IES Arnau Cadell

Pràctiques d'informatica pel batxillerat

El llenguatge XHTML.

Les primeres pàgines web


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.

  1. El contingut es realitza en XHTML (acronim de eXtensibleHyper Text Markup Language) que manté bàsicament les mateixes regles que el HTML. Així en el llenguatge XHTML escriurem el text de la nostra pàgina i inclourem les imatges i els enllaços a altres pàgines etc. Pero no especificarem el tipus de lletra a utilitzar ni la mida de les imatges ni elscolors ni cap element de presentació
  2. La aparença concreta de la pàgina, els tipus de lletra, els colors, la mida i col·locació de les imatges es concreten en els anomenats fulls d'estil (CSS: Cascading Style Sheets). Un mateix document XHTML pot tenir preparats diferents CSS segons per exemple l'aparell que ha de visualitzar el contingut (diferents ordinadors, mobils, impressores, etc.)

Les etiquetes XHTML

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

Estructura bàsica d'un document 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>

Primer exercici

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.

Segon exercici

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/> ?

 

 


Per saber-ne més:

 

al principi de la pàgina a l'índex general del curs

Actualitzat el gener del 2006
Enric Brasó 1990-2005