Feeds:
Entradas
Comentarios

Posts Tagged ‘CSS’

 

 

Com a complement del post sobre CSS ja publicat, Podem definir on es poden col·locar les fulles d’ estil:

  • Arxiu CSS vinculat (Recomenat).

Es vincula a l’ HTML posant dins el meta el codi <link rel=”steelsheet” type text/css ref.=”nom de l’ arxiu.css”/> 

  • Dins el <HEAD>

            <style> </style>

  • Paràmetre etiqueta HTML

            style=”…….”

            <div style=”fontsize:140%”>

            </div>

 

També cal comentar a que podem atribuir els CSS:

  • Identificadors. Amb els identificadors podem aplicar un disseny a les etiquetes del codi html. Per fer-ho escriurem el nom de la etiqueta seguit de # i del nom del identificador.

          Exemples: #columnadreta; #negreta…

  • Classes. Són similars als identificadors però en lloc de identificar un sol element,   n’ identifiquen un grup. Això permet donar estil diferents elements de la mateixa etiqueta. El llenguatge utlilitzat és un punt (.) davant el nom de la classe.

          Exemples:.textpetit, .destacats…

  • Etiquetes HTML. Una etiqueta és una lletra, paraula… que és dona a un element per poder identificar-lo.

          Exemples: html, body, h1, p, a…

 

En el cas de conflicte entre l’ acció de un identificador i una classe prevaleix la informació del identificador ja que, com és veu en el llistat, està per damunt en l’ ordre de jerarquía. Aquesta propietat és la que dona el nom de CSS ja que significa fulla d’ estil en cascada.

 

Per maquetar tota la informació dins la web s’ utilitzen paràmetres com float o clear mitjançant els quals es controlen aspectes com l’ alineació i col·locació del contingut dins de la pàgina.

 

 

Fonts:

 

Aprende-gratis 

Stardustxs

 

Anuncios

Read Full Post »

HTML + CSS

HTML 

L’HTML (HyperText Markup Language) és un llenguatge utilitzat per la creació de pàgines web i que permet tenir el control sobre el seu aspecte a partir de les fulles d’estil mitjançant les quals podem modificar atributs com els marges, colors, tamanys de lletres, i molt més.

c`dochtml

Per iniciar-nos amb aquest tipus de llenguatge, hem analitzat una pàgina amb la que podem veure ambos còdics i analitzar el seu contingut. Per començar a poder analitzar ens hem basat en una web d’exemple com és Zen Gardenen la qual podem trobar dissenys molt diversos aplicats en una mateixa web i li dona un aire completament diferent. Òbviament tots els dissenys han de complir els estàndards del W3C i el XHTML permet separar el disseny del contingut.

Per tant, si començem analitzan el códic, a la primera línea que apareix en la imatge fa referència a la versió de HTML que estem utilitzan, en aquest cas, es tracta de la versió 1,0 de XHTML.

A continuació clasifiquem el còdic en dues parts ben diferenciades, <head> y <body>.

Entre <head> i <head> hi ha espai per diferents tipus de informació que no apareix en la pantalla. El document conté el títol, junt amb els metatags i la fulla d’estils de CSS.

Entre <body> i <body> es sitúa el text del document que es mostrarà en la pantalla, sent així, el contingut de la nostra web.

Altres etiquetes (tags) necesaries per entendre el còdic font son:

  • Entre <ul> i </ul> crea una “llista desordenada”, es a dir, una llista en la cual els elements n o estan numerades.
  • Entre <li> i </li> indica el començament d’un “element llista”
  • Entre <p> i </p> es un pàrraf
  • Entre <h> i </h>una capçalera.
  • Entre <a> i </a> es un enllaç, que es el que crea l’hipervincle.
  • Entre <div> i </div> permet dividir la pàgina en diferents continguts amb fulles d’estils diferents. En cas de fer referencia desde el CSS a una etiqueta concreta, utilitzarem un identificador ( <div id=container>), mentres que si desitjem fer ús varies vegades utilitzarem una clase class.

Tenint en compte les diferents etiquetes ja podriem tenir un HTML bàsic del que vindria a ser el nostre document.

CSS
Per complementar l’HTML, hem de fer ús del CSS (Cascade Style Sheets) , que d’una forma molt senzilla podem modificar l’aspecte visual del contigut web.còdic CSSspecte

 

 

 
Per poder-ho fer hem de tenir en compte alguns aspectes que comentem a continuació:

 contenido

Per poder-ho fer hem de tenir en compte alguns aspectes que comentem a continuació:

  • margin”: separació entre l’esquina de la caixa i l’esquina del document.
  • “padding”: Separació entre la cantonada dels elements i el contingut dels mateixos
  • contingut”: text, imatge, flash, javascript, …
  • border”: sangrat de pantalla

 Per altre banda, també hem de tenir en consideració que en la fulla d’estil ens referim als identificadors amb el nom d’una almuadilla (#) davant, com en el cas de “#container” i les clases amb el nom precedit d’un punt(.), com és el cas de “.acceskey”.

Nota: Els còdics no són els originals del web, s’ha suprimit contingut per poder fer l’explicació.

Read Full Post »