Des del seu origen, l'any 1989, la web va funcionar amb un llenguatge anomenat HTML (acrònim de Hyper Text Markup Language) era un llenguatge dissenyat per compartir informació especialitzada entre científics de tot el món. Era purament un llenguatge molt simple que interpretava textos per mitjà d'etiquetes les quals indicaven si es tractava d'un títol, un paràgraf o un enllaç.
En principi, es pretenia que les etiquetes fossin capaces de marcar la informació d'acord amb el seu significa (títols, enllaços, paràgrafs, llistes,...),, sense importar com es mostrava a la pantalla. Allò important era el contingut i no la forma, és a dir, estava orientat a descriure els continguts. Es deixava a cada visualitzador (browser) la tasca de donar format al document segons el seu criteri. Això produïa presentacions diferents, però permetia controlar fàcilment el contingut.
Amb l'exit de la web la pressió per aconseguir controlar la forma com es presentava la informació va dur a que diferents navegadors (Microsoft, Netscape) inventesin ampliacions de l'HTML per aconseguir la presentació desitjada, i formatar i presentar text i gràfics. El desgavell que això va provocar encara el patim ara quan per utilitzar una pàgina és obligatori utilitzar un determinat navegador o quan s'han de crear diferents versions de la mateixa web per a diferents navegadors o aparells. Això va provocar l'aparició d'un consorci que serveix de punt de trobada per tal d'estudiar les necessitats futures i proposar estandards: el W3C (World Wide Web Consortium). Afortunadament la pressió per tal que tothom compleixi els estandarts es comença a notar.
El W3C ha anat proposant al llarg dels anys diverses versions del llenguatge HTML. Actualment aquest estàndard és el XHTML i les CSS. Aquest estandard té un punt clau: la separació del contingut i l'aparença.
Els elements XHTML es defineixen mitjançant etiquetes (també anomenades tags o marques)
Aquests s'escriuen entre els caràcters < i >
Les etiquetes normalment apareixen aparellades així per exemple <strong> i </strong> que signifiquen respectivament inici de negreta i final de negreta.
Les etiquetes XHTML s'han d'escriure obligaroriament en minúscules
Les primeres etiquetes que cal conèixer són:
<html>...</html> | Engloba la pàgina |
<head>...</head> | La capçalera de la pàgina. Inclou el títol entre d'altres |
<title>...</title> | El títol de la pàgina es veu a la barra de l'explorador |
<body>...</body> | Engloba tot el que es veu. |
<h1>...</h1> | Capçaleres. Poden anar d'h1 a h6 i cadascuna fa que el text s'escrigui d'una mida diferent. h1 presenta el text de la mida més gran i h6 de la més petita. |
<p>...</p> | paràgraf |
<br/> | salt de línia, aquesta etiqueta no va en parella |
<strong>...</strong> | text éscrit més fort, és a dir en negreta |
<em>...</em> | text enfatitzat, normalment en cursiva |
<!-- ... --> | Aquestes marques s'utilitzen per posar textos que no surten a la visualització s'anomenen comentaris i serveixen d'ajuda o de referència en l'escriptura de l'XHTML |
Un document XHTML comença amb l'etiqueta <html> i acaba amb el seu tancament: </html>. Hi ha dues parts dins del document XHTML: la capçalera, que va dins l'etiqueta <head></head>; i el cos, dins l'etiqueta <body></body>.
Dins la capçalera hi va el títol de la plana web (el que apareix a la barra de títol de la finestra) i la informació tècnica (autor, idioma, etc.) sobre la plana que no és visible a la plana (només si mirem el seu codi). El títol es col·loca dins l'etiqueta <title></title>.
Al cos del document hi va tot el contingut de la plana web.
A més, XHTML requereix una declaració de tipus de document. En la major part dels casos, això només representa escriure el següent a les primeres línies del document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Per tant, el codi corresponent a una plana amb el títol "Plana web d'en Jordi Joan" i que com a únic contingut digui "Hola , soc en Jordi Joan, benvingut a la meva plana web!" seria el següent:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Plana web d'en Jordi Joan</title>
</head>
<body>
Hola, soc en Jordi Joan, benvingut a la meva plana web!
</body>
</html>
Obriu un programa d'edició de textos per exemple el bloc de notes (NOTEPAD) del windows.
Copieu i enganxeu el codi anterior.
Modifiqueu el títol i el contingut amb el vostre nom en lloc de Jordi Joan.
A la vostra carpeta creeu una nova subcarpeta amb el nom de PAGWEB
Guardeu aquest text en aquesta carpeta amb el nom de 1.htm
Feu doble clic sobre aquest arxiu o bé obriu-lo amb el navegador. Comprobeu que visualitzeu correctament la pàgina creada.
Torneu a obrir amb el bloc de notes l'arxiu 1.htm
Modifiqueu el contingut situat al cos de la pàgina (entre <body> i </body>) per tal de provar com funcionen les etiquetes d'encapçalament i de paràgraf de manera que sigui:
<h1>Hola, soc en Jordi Joan, benvingut a la meva plana web!</h1>
<h2>Aquesta és una línia d'encapçalament de segon nivell</h2>
<h3>Aquesta és una línia d'encapçalament de tercer nivell</h3>
<h4>Aquesta és una línia d'encapçalament de quart nivell</h4>
<h5>Aquesta és una línia d'encapçalament de cinquè nivell</h5>
<h6>I aquesta és una línia d'encapçalament de sisè nivell</h6>
<br />
<p>
Aquesta línia torna a ser un pàragraf. <strong> Aquí una frase amb l'etiqueta strong o negreta.</strong> <em>I aqui una frase amb l'etiqueta em és a dir émfasi o cursiva </em>
</p>
<!-- això és un comentari que no apareix a la pag web -->
<hr/>
Deseu l'arxiu 1.htm i comproveu com es visualitza.
Escribiu un mail al professor indicant que heu fet l'exercici i contestant a la pregunta:
¿ Quina funció fa l'etiqueta <hr/> ?