Anar a la pàgina anterior
Annex “El nostre primer document web” Codi HTML bàsic
El nostre document web ha d’estar format pels continguts que hem recollit i pel codi HTML, que permet que el navegador d’Internet en pugui visualitzar els continguts.
Per a la nostra activitat hem de fer servir el “Bloc de notas” del Windows per crear el document web, però es pot fer servir qualsevol editor de text o programa de creació i disseny de pàgines web.
Primer de tot expliquem l’estructura bàsica d’una pàgina web i les instruccions que la formen. D’aquesta manera ja podem començar a crear l’estructura bàsica del nostre document i introduir els continguts on correspongui.
L’estructura bàsica d’una pàgina web és aquesta:
Com podem veure a l’estructura bàsica, totes les instruccions s’activen entre angles, sense deixar espais entre els angles i la instrucció. Un cop activades les instruccions, s’han de desactivar, per a la qual cosa cal repetir la instrucció i anteposar-hi la barra inclinada.
Exemple:
<HTML> Activa la instrucció HTML
</HTML> Desactiva la instrucció HTML
Les instruccions que es fan servir a l’estructura bàsica són les següents:
HTML: indica el començament i el final del document web. Inclou la capçalera i el cos de la pàgina web.
HEAD: defineix la zona de capçalera de la pàgina web. Inclou les instruccions que donen informació sobre la nostra pàgina web, com ara TITLE.
TITLE: defineix el títol de la pàgina. És el títol que apareix a la part superior de la finestra del navegador d’Internet.
BODY: delimita el cos del document HTML i és on hi ha la informació que volem transmetre a l’usuari.
Amb aquestes instruccions ja tindríem un document web amb un títol a la barra de títol del navegador d’Internet i un text sense format que es mostraria a la pàgina web.
Altres instruccions que ens poden ser útils:
BGCOLOR: ens permet donar color de fons a la pàgina web. La manera com s’ha de fer servir aquesta instrucció és substituint <BODY> per <BODY BGCOLOR=”#xxyyzz”>, on xxyyzz pot adoptar els valors:
La instrucció s’ha de tancar amb </BODY>, igual com es feia amb la instrucció BODY.
BR: ens permet incloure una línia en blanc a la pàgina web. Només s’hi ha de posar <BR>; aquesta instrucció no s’ha de tancar amb </BR>.
HR: ens permet incloure una barra horitzontal de separació a la pàgina web. Només s’hi ha de posar <HR>; aquesta instrucció no s’ha de tancar amb </HR>.
CENTER: ens permet centrar el text. S’ha de fer servir posant-hi <CENTER> text que volem centrar </CENTER>.
H1, H2, H3, H4, H5, H6: ens permet canviar la mida de la lletra. H1 és la més gran i H6, la més petita. S’ha de fer servir posant-hi <Hx> text </Hx>, substituint Hx per H1, H2, H3, H4, H5 o H6 segons la mida que vulguem.
B: ens permet posar el text en negreta. S’ha de fer servir posant-hi <B> text que volem posar en negreta </B>.
i: ens permet posar el text en cursiva. S’ha de fer servir posant-hi <i> text que volem posar en cursiva </i>.
FONT COLOR: ens permet canviar el color de la lletra. S’ha de fer servir posant-hi <FONT COLOR=”#xxyyzz”> el text que volem canviar de color </FONT>. XXYYZZ pot adoptar els valors:
IMG: ens permet incloure una imatge (pot ser en format JPG o GIF) a la pàgina web. Hem de posar <IMG SRC=”nom de l’arxiu de la imatge”> allà on vulguem que aparegui la imatge. Si volem centrar la imatge només s’ha d’incloure tot el codi de la instrucció IMG entre el codi de la instrucció CENTER. L’arxiu que conté la imatge ha d’estar desat al mateix directori on tenim l’arxiu amb el codi font de la pàgina web.
TABLE: ens permet organitzar la informació en taules. Podem definir-ne el gruix dels contorns, el nombre de files, de cel·les per fila, l’alineació de la informació dins les cel·les, etc.
Per fer-la servir correctament s’han de tenir en compte les instruccions següents:
<TABLE>: indica el començament de la taula.
El gruix dels contorns es pot especificar si en comptes de fer servir <TABLE> fem servir <TABLE BORDER=0>. En aquest cas hi hem posat 0 i no es veuran els contorns, però si s’incrementa la xifra, els contorns augmenten de gruix.
</TABLE>: indica el final de la taula.
<TR>: indica el començament d’una fila (no s’ha d’indicar el final de la fila).
<TD>: indica el començament d’una de les cel·les que formen la fila (no s’ha d’indicar el final de la cel·la).
Exemple de codi i visualització de la composició bàsica d’una taula:
Es pot donar el cas que en una fila vulguem posar un títol i que aquesta fila només estigui formada per una cel·la. Per aconseguirho, el que hem de fer és agrupar totes les cel·les de la fila en una única cel·la.
Per agrupar les cel·les d’una fila s’han de substituir totes les aparicions de la instrucció <TD> per la instrucció <TD COLSPAN=”N”>, on N és el nombre de cel·les que volem agrupar.
Exemple de codi i visualització de la composició amb agrupació de cel·les:
Cal tenir en compte que totes les cel·les de la mateixa columna tenen l’amplada de la cel·la més ampla de la columna.
Podem veure la prova en aquest exemple, on s’ha modificat el valor de la cel·la que contenia el valor 12 per 1200, de manera que automàticament ha augmentat l’amplada de totes les cel·les de la mateixa columna.
L’alineació del text de les cel·les es pot especificar si en comptes de fer servir <TD> fem servir <TD Align=”left”>, <TD Align=”center”> o <TD Align=”right”>, segons que vulguem alinear el text a l’esquerra (left), centre (center) o dreta (right).
Podem veure la prova en aquest exemple, on hem alineat al centre el valor de la primera fila (la de les cel·les agrupades).
També es pot centrar la taula sencera a la pantalla amb les instruccions <CENTER> abans de <TABLE> i </CENTER> després de </TABLE>.
Les cel·les de la taula poden contenir tot tipus d’informació: enllaços, gràfics, altres taules, textos, etc. Es poden aplicar les diferents instruccions de format de text (color, mida, negreta, cursiva, etc.) a la informació que ha d’anar dins de les cel·les.
I finalment tenim els enllaços, que són les funcions principals de les pàgines web. Un enllaç és una connexió a un recurs extern o a parts de la mateixa pàgina (índex).
Per accedir a recursos externs s’ha de fer servir l’expressió següent <A HREF=”.........”> text que s’ha de clicar amb el ratolí per accedir al recurs </A>. A la zona de punts s’ha de posar l’adreça del recurs (per exemple, http://obrasocial.lacaixa.es).
A l’exemple anterior sabem que el text és un enllaç perquè quan hi passem per sobre el punter del ratolí es transforma en una mà amb el dit índex estès.
Els enllaços també poden fer-se a través d’imatges. Una imatge serveix de referència per enllaçar amb el recurs i substitueix el text que es feia servir abans. En aquest cas s’hauria de substituir “Text que s’ha de clicar amb el ratolí per accedir al recurs” per <IMG SRC=”.........”>. A la zona de punts s’ha d’especificar el nom de la imatge.
A l’exemple anterior sabem que la imatge és un enllaç perquè quan hi passem per sobre el punter del ratolí es transforma en una mà amb el dit índex estès i la imatge està contornejada.
Per accedir a parts de la pàgina web visualitzada s’ha de fer servir l’expressió <A HREF=”#referencia”> text que s’ha de clicar amb el ratolí per accedir al recurs </A>. A l’expressió anterior, “referencia” indica la marca amb la qual s’ha d’enllaçar i “Text que s’ha de clicar amb el ratolí per accedir al recurs” indica el text sobre el qual s’ha de clicar per establir l’enllaç.
Perquè l’ordre s’executi correctament cal que en alguna part del document hi hagi l’expressió <A NAME=”referencia”> text opcional </A>, que és la destinació de l’enllaç.
Cada vegada que es cliqui amb el ratolí el text de la referència (HREF) s’enllaça amb la secció corresponent (NAME).
A l’exemple anterior sabem que el text és un enllaç perquè quan hi passem per sobre el punter del ratolí es transforma en una mà amb el dit índex estès.
Quan fem clic a l’enllaç anem directament a la secció corresponent; si fem clic a “Títol” anem directament a la secció “Títol”, i així amb totes les seccions. Aquest tipus d’enllaços dins de la mateixa pàgina web són realment útils quan la pàgina conté molt de text i volem moure’ns ràpidament per les seccions.
Totes aquestes instruccions que només hem vist a la teoria les practiquem ara creant el nostre primer document web.
2009. Tots els drets reservats.