Feeds:
Entradas
Comentarios

Posts Tagged ‘HTML’

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ó.

Anuncios

Read Full Post »