1a Sessió: La informació
Documents i codificació HTML
Una pàgina HTML molt senzilla es codificaria així:
<HTML>
<HEAD>
<TITLE>Mi primera pàgina Web</TITLE>
</HEAD>
<BODY>
Hola món
</BODY>
</HTML>
Aquest codi el podem escriure amb la llibreta (notepad) i desar-lo com
pag1.htm. Aquest arxiu el podrem fer servir
com a model per totes les nostres pàgines. Al navegador la
veuríem així:
Fixem-nos en els següents aspectes:
-
Tots els codis HTML van dintre dels separadors <>
-
El document comença amb el codi <HTML>
i finalitza amb el codi </HTML>. El primer
obre el codi, laltre el tanca. Trobareu moltes parelles <
> ..... </ > que delimiten làmbit
dun codi.
-
Distingim dos blocs: la capçalera (<HEAD>
... </HEAD>) i el cos del document (<BODY>
... </BODY>. En el primer sintrodueix
informació general, com el títol que ha de mostrar la finestra
del navegador (<TITLE> ... </TITLE>).
Al segon trobem la informació que veu lusuari dintre del navegador.
-
Les paraules accentuades es codifiquen de forma especial: el símbol
&,
la vocal que volem accentuar (majúscula o minúscula), el
tipus daccent (grave o acute)
i el símbol ; que tanca el codi (compte,
que és fàcil oblidar-sen).
Un dels grans avantatges que té el format HTML és que
es codifica amb lletres normals, sense valors especial o lletres que depenen
dun país. El navegador sencarrega dinterpretar el codi, fent
possible que un ordinador japonès pugui mostrar una pàgina
escrita en català.
Inserció dimatges
Imaginem que a la pàgina anterior, després del text Hola
món, volem inserir una imatge del nostre planeta. Primer caldrà
localitzar larxiu on es troba la imatge, posem per cas a J:\Library\Iconos\i046.gifi
copiar-lo a un directori local (iconos). El
codi que haurem dafegir al nostre document seria (el desarem com a
pag2.htm):
<HTML>
<HEAD>
<TITLE>Mi primera pàgina Web</TITLE>
</HEAD>
<BODY>
Hola món
<IMG SRC= iconos\i046.gif>
</BODY>
</HTML>
Es a dir, fem una referència a una imatge (IMG)
que es troba a un determinat lloc (SRC=...).
IMG
és el codi HTML (volem inserir una
imatge), SRC és un atribut que afegeix
certa informació (on trobar la imatge). Hem danar amb compte per
no oblidar-nos les cometes () que delimiten
la ubicació de larxiu.
Una forma dagafar una imatge que ens interessa duna pàgina
o directori es fer servir el navegador i, sobre la imatge, clicar amb el
botó dret del ratolí. Lopció Anomena i desa la imatge
o Guardar imagen como ens permet desar-la con vulguem (no canvieu lextensió).
Fixeu-vos que aquest codi no té la seva parella de tancament
(</IMG>). No existeix. No tindria
sentit marcar quan acabem dinserir la imatge. Inserim la imatge i punt:
Fixem-nos que, malgrat que hem posat el codi de la imatge a una altra
línia, la imatge apareix a la dreta del text. Un canvi de línia
a un document HTML només serveix com a un separador intern per millorar
la claredat del codi al programador, no al lector del document. Si volem
forçar un canvi de línia hem dinserir el codi <BR>.
Això és així perquè el navegador ajusta les
línies segons lamplada de la finestra, i ens permet fer canvis
de línia tradicional al codi per no haver de codificar línies
massa llargues.
© Jordi Orts, febrer 2000
