Diferència entre revisions de la pàgina «M8 - Aplicacions web / Continguts UF5: llenguatge de marques»

Revisió del 19:26, 7 set 2016

Les pàgines web contenen informació de tipus divers com ara imatges, vídeo, àudio o text, distribuïda i estructurada d’una manera molt concreta, i disponible per ser visualitzada en diferents dispositius com ara tauletes, ordinadors de sobretaula, smartphones… Aquesta informació la reben els navegadors, normalment procedent del servidor, en format text. Aquest text no solament incorpora els continguts sinó que inclou també marques que indiquen com presentar o distribuir aquesta informació dins les finestres del navegador. Per aquest motiu fem servir els anomenats llenguatges de marques per a la web.

Ja que es requereix que qualsevol navegador pugui interpretar la informació d’una pàgina web escrita amb aquests llenguatges, va ser necessari estandarditzar-los. Per aquest motiu al món informàtic tenim llenguatges com ara HTML, XHTML, SGML o XML que són els estàndards més emprats per les aplicacions web, i que ens permeten codificar un document on el text està acompanyat d’etiquetes que contenen informació addicional.

Aquestes marques (etiquetes) ens ajuden principalment en dues coses: estructurar el document web i marcar part de la presentació vers l’usuari final; però hem de ser molt conscients que tot el que suposa l’estètica final del document és delegat a un altre llenguatge anomenat CSS (Cascade Style Sheet).

         Els documents o pàgines web estan formats per l’estructura realitzada amb (X)HTML + 
         presentació o estètica realitzada amb CSS, i molt relacionats entre ells.

El llenguatge de marques més usat en el món web és el llenguatge HTML (HyperText Markup Language) o, per ser més estrictes, la família de llenguatges (X)HTML.

Orígens de l'(X)HTML

          Un estàndard web és una especificació normativa referent a aspectes del World Wide Web. 
          Diversos organismes com el W3C (World Wide Web Consortium) o l’IETF (Internet Engineering 
          Task Force) s’encarreguen de decidir aquests estàndards.

         L’SGML (Standard Generalized Markup Language) és un conjunt de normes que estableixen la 
         sintaxi d’un document. Es basa en un sistema d’etiquetes que ens permet l’organització de 
         la informació del document.

L’HTML es va crear com un llenguatge SGML.

Paral·lelament, a partir de la versió HTML 4.01, es va generar un altre llenguatge, l’XHTML (eXtensible Hypertext Markup Language). L’XHTML és un llenguatge de marques molt semblant a l’HTML, però en lloc de seguir les regles sintàctiques de l’SGML, segueix les d’un altre llenguatge de marques, l’XML (eXtensible Markup Language).

En la següent taula podem veure l’evolució històrica tant de l’HTML com de l’XHTML.

El futur del món web és la nova versió d’HTML, l’HTML5 (o la seva variant XML, l’XHTML5), que ja ha començat a substituir l’HTML 4.01 i l’XHTML 1.0.

               W3C: Recommendation i Working Draft

               Quan el W3C confecciona un estàndard, aquest passa pels diferents estats que s’enumeren
               a continuació:
 
               1. Working Draft (WD) (Esborrany de treball)

               2. Candidate Recommendation (CR) (Recomanació candidata)

               3. Proposed Recommendation (PR) (Proposta de recomanació)

               4. W3C Recommendation (REC) (Recomanació)

               Per tant, quan una versió d’un estàndard es considera aprovada s’anomena Recommendation. 
               En canvi, quan s’hi comença a treballar, s’anomena Working Draft.

               Actualment, l’HTML 4.01 és una Recommendation, mentre que l’HTML5 és un Working Draft.

L'(X)HTML

          El llenguatge de marques HTML (Hyper Text Markup Language) és el llenguatge de marques predominant
          de les aplicacions web actuals. Permet descriure tant l’estructura com la presentació dels documents
          que conformen les aplicacions web.

El llenguatge HTML ens permet marcar la nostra informació de manera que podem incorporar-hi encapçalaments, paràgrafs, llistes, enllaços, taules, formularis, imatges…

              Quan parlem de metallenguatge ens referim a un seguit de normes de sintaxi

El llenguatge HTML està basat en l’SGML, un metallenguatge força complex. Una simplificació d’aquest llenguatge és l’anomenat XML, que és un subconjunt de normes de l’SGML. Si basem el nostre document en les normes XML, en lloc de les normes SGML, estem confeccionant un document XHTML.

         L’XHTML (eXtensible Hyper Text Markup Language) és una versió més estricta i neta de l’HTML, que neix
         precisament amb l’objectiu de reemplaçar l’HTML davant la seva limitació d’ús amb les cada cop més 
         abundants eines basades en XML. L’XHTML estén l’HTML 4.0 combinant la sintaxi de l’HTML, dissenyat per 
         mostrar dades, amb la de l’XML, dissenyat per descriure les dades.

Quan confeccionem un document XHTML, tot i que algunes de les marques permeses ens permeten definir l’aspecte del document, hem d’intentar seguir la filosofia XML, és a dir, definir només la semàntica del document, no l’aparença.

Quan parlem de la família de llenguatges (X)HTML, ens referim a dues famílies de llenguatges: la família XHTML i la família HTML, que es distingeixen per complir les normes de sintaxi SGML o les normes de sintaxi XML, respectivament. Cadascuna d’aquestes dues grans famílies tenen diversos “sabors”, definits cadascun d’ells per la seva DTD (Document Type Definition): strict, transitional o frameset. Si ens fixem en les versions HTML 4.01 i XHTML 1.0, tenim els següents sabors:

• HTML 4.01 Strict

• HTML 4.01Tran­si­ti­o­nal

• HTML 4.01 Fra­me­set

• XHTML 1.0 Strict

• XHTML 1.0 Tran­si­ti­o­nal

• XHTML 1.0 Fra­me­set

Observem, doncs, que les dues famílies tenen tres sabors cadascuna: Strict, Transitional i Frameset. La diferència d’aquests tres sabors és que cadascun admet diferents etiquetes:

• Transitional permet l’ús d’algunes etiquetes que serveixen per a la presentació (estètica) del document. Això és un inconvenient ja que barreja l’estructura del document amb la seva presentació.

• Strict no permet usar gairebé cap marca o atribut que faci referència a l’estètica del web, de manera que podem separar la semàntica del contingut de l’estètica final de l’aplicació web.

• Frameset ens serveix si estem fent la web amb marcs.

Per tant, si creem una aplicació web nova hem d’intentar basar-la en el sabor Strict, que ens obliga a separar l’estructura de la presentació. Ara bé, trobarem moltes webs antigues que usen el sabor Transitional, ja que usen moltes etiquetes que no són acceptades en el sabor Strict i fer la migració de Transitional a Strict pot arribar a ser molt costós.

L'HTML5

La web html5 test ens mostra en quin punt estan els navegadors més populars pel que fa a la implementació de les noves funcionalitats d’HTML5.

La web del futur es basa en el nou estàndard, l’HTML5. L’anterior versió de l’HTML, l’HTML 4.01, és de l’any 1999 i el món web ha evolucionat moltíssim des de llavors. L’HTML5 incorpora moltes funcionalitats que en aquell moment no es van tenir en compte: àudios, vídeos, eines de dibuix, validació de formularis i molt més. Tot i això, la incorporació de l’HTML5 depèn del fet que els navegadors s’adaptin a aquestes funcionalitats.

Disposem també de la variant XML per a l’HTML5: l’XHTML5. Aquesta variant ens permetrà utilitzar la nostra pàgina web com a document XML. La diferència pel que fa a la sintaxi del llenguatge és que s’han de respectar les normes sintàctiques de l’XML.

El CSS

          El CSS (Cascading Style Sheets) és una tecnologia que permet descriure l’estètica que tindrà 
          un document quan es mostri per pantalla o quan s’imprimeixi, o fins i tot, com es pronunciarà 
          la informació present en el document a través d’un dispositiu de lectura.

El CSS s’utilitza per donar estil a documents (X)HTML i així poder separar el contingut de la presentació.

L'XML

         L’XML (Extensible Markup Language) és un metallenguatge de marques que ens serveix per 
         estructurar la informació semànticament, sense tenir en compte la seva aparença final.

L’XML no ens defineix quines etiquetes podem usar, sinó com s’han d’usar. És a dir, ens diu quina sintaxi hem d’usar, siguin quines siguin les etiquetes que usem.

L’objectiu de l’XML és estructurar informació d’una manera organitzada i que sigui fàcilment llegible per una màquina. Per tal de fer això, es basa en un sistema d’etiquetes i atributs.

Exemple: imagineu-vos que tenim la següent recepta per fer una truita a la francesa:

         Truita a la francesa
         2 ous, oli i sal
         Batre els ous, escalfar l'oli en una paella, tirar els ous batuts a la paella i embolicar la truita.

Una possible estructuració d’aquesta recepta és la següent:

<?xml version="1.0" encoding="utf-8"?>
<recepta>
   <!-- Una recepta casolana -->
   <titol>
      Truita a la francesa
   </titol>
   <imatge ubicacio="img/truita.png" />
   <ingredients>
      <ingredient quant="2">
         <nom>Ous</nom>
      </ingredient>
      <ingredient>
         <nom>Oli</nom>
      </ingredient>
      <ingredient>
         <nom>Sal</nom>
      </ingredient>
   </ingredients>
   <preparacio>
      Batre els ous, escalfar l&apos;oli en
      una paella, tirar els ous batuts a la
      paella i embolicar la truita.
   </preparacio>
</recepta>

La primera línia ens indica que és un document XML versió 1.0 i que s’usa la codificació de caràcters UTF-8.

En aquest exemple hem definit unes etiquetes i atributs que ens permetrien estructurar qualsevol recepta de cuina.

Un document XML està format per nodes. Aquests nodes poden ser de diversos tipus. A la següent llista es descriuen alguns dels tipus de nodes més importants:

• Elements: són les etiquetes que ens permeten classificar la informació. La sintaxi és:

          <element></element>

o si l’element no té contingut intern:

          <element />

• Atributs: serveixen per donar informació addicional a un element. Els atributs sempre tenen associat un valor. La sintaxi és la següent:

          <element atribut="valor"></element>

o si l’element no té contingut intern:

          <element atribut="valor" />

• Nodes de text: són els fragments de text del document, la informació que volem estructurar. La sintaxi és:

          <element>text</element>

• Entitats predefinides: serveixen per representar caràcters especials. La sintaxi és:

          &entitat;

• Comentaris: serveixen per introduir comentaris per al programador, aquesta informació no serà mostrada ni processada. La sintaxi és:

          <!-- comentari -->

En la següent figura es pot veure un exemple de document XML amb la informació estructurada de com fer una truita a la francesa. S’hi diferencien els diversos tipus de nodes.

Finalment, els documents XML han de complir les normes de sintaxi següents:

• Els elements s’han de tancar (o amb l’etiqueta de tancament <etiqueta></etiqueta>, o fent que l’etiqueta es tanqui en ella mateixa <etiqueta />).

• És correcte: <titol>Truita a la francesa</titol>

• És incorrecte: <titol>Truita a la francesa

• Els elements han d’estar correctament enniuats.

• És correcte: <ingredient><nom>Oli</nom></ingredient>

• És incorrecte: <ingredient><nom>Oli</ingredient></nom>

• Tots els documents tenen un element arrel.

• És correcte:

<?xml version="1.0" encoding="utf-8"?>
<recepta>
  ...
</recepta>

• És incorrecte:

<?xml version="1.0" encoding="utf-8"?>
<recepta>
  ...
</recepta>
<observacions>
  ...
</observacions>

• Tots els atributs han d’anar entre cometes.

• És correcte: <nom quant=“2”>Ou</nom>

• És incorrecte: <nom quant=2>Ou</nom>

Diem que un document està ben format si respecta totes les regles de sintaxi de l’XML.

La DTD

Mentre que l’XML ens defineix la sintaxi d’un document, la DTD (Document Type Definition) ens defineix quins són els elements i atributs permesos en el document, l’ordre en què poden anar aquests elements i quins nodes poden anar dins de quins altres.

               XML Schema

               Tot i que l’ús de les DTD està molt estès, hi ha una altra manera de definir 
               els nodes permesos i les seves característiques. Aquesta alternativa és usar
               l’XML Schema, que ens proporciona més opcions i més flexibilitat.

          La DTD defineix els elements, atributs i entitats permesos en el document i, a més, indica com podem 
          combinar aquests nodes.

Si ho comparem amb les llengües parlades, en el cas de les llengües romàniques, l’XML ens definiria que hem d’escriure d’esquerra a dreta, entre d’altres. La DTD, en canvi, ens definiria quines paraules podem usar, és a dir, ens definiria el vocabulari.

La DTD és un fitxer, amb extensió .dtd, que ens descriu tot el vocabulari de les etiquetes i els atributs i el seu ordre. A continuació s’exposen algunes característiques bàsiques de la sintaxi d’una DTD:

• <!ELEMENT nom-element (EMPTY)>: Defi­neix un ele­ment que no té con­tin­gut. En el docu­ment XML apa­rei­xerà amb una marca que es tan­carà en ella mateixa (<nom-element />).

• <!ELEMENT nom-element (#PCDATA)>: Defi­neix un ele­ment que conté text.

<!ELEMENT nom-element (elem1, elem2,…)>: Defi­neix un ele­ment que conté altres ele­ments; aquests ele­ments fills poden por­tar un modi­fi­ca­dor que ens indica els cops que poden apa­rèi­xer:

• elem: elem apa­reix un únic cop.

• elem*: elem apa­reix 0 cops o més.

• elem+: elem apa­reix 1 cop o més.

• elem?: elem apa­reix 0 cops o 1.

• <!ATTLIST nom-element nom-atribut tipus-atribut valor-per-defecte>: Defi­neix un atri­but espe­ci­fi­cant el nom de l’atri­but (nom-atribut) i el nom de l’ele­ment al qual per­tany l’atri­but (nom-element). Els tipus-atribut més usats són els següents:

• CDATA: el valor de l’atri­but serà text.

• (valor1|valor2|…): el valor de l’atri­but només pot ser algun dels valors enu­me­rats.

Els valor-per-defecte més usats són:

• valor: espe­ci­fica el valor que té l’atri­but per defecte.

• 1. REQUIRED: espe­ci­fica que l’atri­but és obli­ga­tori.

• 1. IMPLIED: espe­ci­fica que l’atri­but no és obli­ga­tori.

Per exem­ple, per al docu­ment XML defi­nit en la figura.2 cre­a­ríem un docu­ment recepta.dtd en què intro­dui­ríem la DTD següent:

     <!ELEMENT recepta ( titol, imatge, ingredients, preparacio ) >
 
     <!ELEMENT titol ( #PCDATA ) >
 
     <!ELEMENT imatge EMPTY >
     <!ATTLIST imatge ubicacio CDATA #REQUIRED >
 
     <!ELEMENT ingredient ( nom ) >
     <!ATTLIST ingredient quant CDATA #IMPLIED >
 
     <!ELEMENT ingredients ( ingredient+ ) >
 
     <!ELEMENT nom ( #PCDATA ) >
 
     <!ELEMENT preparacio ( #PCDATA ) >

Expliquem aquesta DTD línia per línia:

• <!ELEMENT recepta ( titol, imatge, ingredients, preparacio ) >: L’element <recepta> tindrà quatre elements fill: <titol>, <imatge>, <ingredients> i <preparacio>. Només tindrà un fill de cada i en aquest ordre.

• <!ELEMENT titol ( #PCDATA ) >: L’element <titol> contindrà text.

• <!ELEMENT imatge EMPTY >: L’element <imatge> no tindrà fills. És a dir, serà una etiqueta que es “tanca en ella mateixa”.

• <!ATTLIST imatge ubicacio CDATA #REQUIRED >: L’element <imatge> tindrà un atribut de nom ubicacio, que és obligatori.

• <!ELEMENT ingredient ( nom ) >: L’element <ingredient> tindrà un únic fill <nom>.

• <!ATTLIST ingredient quant CDATA #IMPLIED >: L’element <ingredient> pot tenir un atribut de nom quant. Aquest atribut no és obligatori.

• <!ELEMENT ingredients ( ingredient+ ) >: L’element <ingredients> tindrà un o més fills <ingredient>.

• <!ELEMENT nom ( #PCDATA ) >: L’element <nom> contindrà text.

• <!ELEMENT preparacio ( #PCDATA ) >: L’element <preparacio> contindrà text.

Un cop vist com definir una DTD, ens hem de preguntar: com li podem dir a un document XML quina DTD ha d’usar? Ens podem trobar diversos casos, tal i com es mostra a continuació.

Per enllaçar el document XML amb la DTD que vol seguir es poden usar les següents formes:

• Definir la DTD en el mateix document XML. La sintaxi és la següent:

     <!DOCTYPE element-arrel [declaracions]>

Per exemple:

     <!DOCTYPE recepta [
     <!ELEMENT recepta (titol,plat, ingredients,preparacio)>
     ...
     <!ELEMENT preparacio (#PCDATA)>
     ]>
     <recepta>
     ...
     </recepta>

• Definir la DTD en un fitxer extern. La sintaxi és la següent:

     <!DOCTYPE element-arrel SYSTEM "path/nomFitxer.dtd">

Per exemple:

     <!DOCTYPE recepta SYSTEM "dtds/recepta.dtd">
     <recepta>
     ...
     </recepta>

• Definir la DTD en un fitxer extern públic. La sintaxi és la següent:

     <!DOCTYPE element-arrel PUBLIC "identificador" "url">

Per exemple:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
     <html>
           ...
     </html>

Per tant, en l’exemple anterior, si volguéssim usar una DTD que està descrita en un fitxer de nom recepta.dtd, hauríem d’incloure una línia amb la definició de la DTD, després de la declaració de la versió XML i codificació del document:

     <?xml version="1.0" encoding="utf-8"?>
     <!DOCTYPE recepta SYSTEM "recepta.dtd">
     <recepta>
     ...
     </recepta>

               Diem que un document valida si està ben format i respecta 
               totes les regles que especifica la DTD que té associada.

Les DTD de l'XHTML

La família de llenguatges (X)HTML té diversos “sabors”. Per a cadascun d’aquests sabors disposem d’una DTD pública que ens ofereix el W3C. Enumerem-les:

• HTML 4.01 - Strict

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• HTML 4.01 - Tran­si­ti­o­nal

     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• HTML 4.01 - Fra­me­set

     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

• XHTML 1.0 - Strict

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• XHTML 1.0 - Tran­si­ti­o­nal

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• XHTML 1.0 - Fra­me­set

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

• XHTML 1.1

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

• XHTML Basic 1.0

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

• XHTML Basic 1.1

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

• HTML5 (encara no és un estàndard)

     <!DOCTYPE html>

Per exemple, si volguéssim escriure un document XHTML 1.0 Strict, les dues primeres línies del document serien:

     <?xml version="1.0" encoding="utf-8"?>
     <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >

Validació

Quan escrivim un document amb llenguatge (X)HTML, ens hem d’assegurar que complim la sintaxi SGML o XML (segons si el nostre document és HTML o XHTML, respectivament) i que respectem la DTD que haguem escollit.

Per poder-ho fer, el W3C ens ofereix un servei de validació de pàgines, on se’ns diu si la nostra pàgina compleix amb la DTD escollida, i si no és així, quins errors hem comès.

També existeixen altres eines de validació, com el programa Tidy, que ens permeten validar el nostre document sense necessitat d’estar en línia.

Diferències entre l'HTML i l'XHTML

El llenguatge de marques HTML està basat en el metallenguatge SGML i el llenguatge de marques XHTML està basat en el metallenguatge XML. Vegem quines són les diferències bàsiques:

• Declaració del tipus de document

• Tancament d’etiquetes

• Etiquetes buides

• Valors dels atributs

• Atributs sense valor

• Sensibilitat a les majúscules

Declaració del tipus de document

En els documents XHTML hem de posar la versió de XML que estiguem usant, en els documents HTML no s’ha de posar.

Així doncs, amb l’XHTML posarem la versió d’XML usada, seguida de la DTD. Per exemple, un document XHTML 1.0 Strict començaria amb les següents dues línies:

     <?xml version="1.0" encoding="utf-8"?>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
     ...   

Amb l’HTML, no posarem la versió d’XML, ja que no és un document XML. Per exemple, un document HTML 4.01 Strict començaria amb la següent línia:

     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     ...

Tancament d’etiquetes

Si usem l’XHTML, hem de tancar totes les etiquetes que obrim. En canvi, amb l’HTML no és obligatori.

Amb l’XHTML, quan volem escriure un paràgraf fem:

     <p>Això és un paràgraf</p>

En canvi, amb l’HTML podríem no tancar l’etiqueta:

     <p>Això és un paràgraf

Etiquetes buides

Amb l’XHTML les etiquetes buides s’han de tancar “en elles mateixes”. En canvi, amb l’HTML no cal tancar-les.

Per exemple, l’etiqueta <meta> d’un document indica la codificació de caràcters del document i no té contingut. Si usem l’XHTML, hauríem de tancar l’etiqueta “en ella mateixa”:

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

En canvi, amb l’HTML no cal que tanquem l’etiqueta (és a dir, no cal posar la / final):

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Valors dels atributs

Amb l’XHTML els valors dels atributs han d’anar sempre entre cometes, en canvi amb l’HTML no cal (excepte quan el valor de l’atribut conté espais en blanc):

Per exemple, amb l’XHTML el valor de l’atribut alt sempre ha d’anar entre cometes:

     <img src="img/laimatge.png" alt="Logotip" />

En canvi, amb l’HTML podem ometre les cometes:

     <img src="img/laimatge.png" alt=Logotip>

Atributs sense valor

Amb l’XHTML els atributs sempre han de tenir un valor, i cal usar la sintaxi atribut=“valor”. En canvi amb l’HTML, hi ha atributs que no tenen valor.

Així, per posar una casella de verificació marcada, amb l’XHTML es fa el següent:

     <input type="checkbox" checked="checked" />

En canvi, amb l’HTML aquest atribut no té valor i s’escriu de la següent manera:

     <input type="checkbox" checked />

Sensibilitat a les majúscules

L’XHTML és sensible a les majúscules. Això vol dir, per exemple, que el caràcter ‘H’ és diferent del caràcter ‘h’. En canvi, l’HTML no és sensible a les majúscules.

Per això, si es vol escriure un encapçalament en XHTML, s’usa l’etiqueta 'h1' i sempre s’ha d’escriure en minúscules:

     <h1>Títol principal</h1>

En canvi, amb l’HTML, com que no distingeix majúscules de minúscules, es pot posar l’etiqueta 'H1':

      <H1>Títol principal</H1>

L’HTML i l’XHTML són prou similars. La gran diferència és que l’XHTML és més estricte amb les seves regles sintàctiques, però alhora té l’avantatge que és un llenguatge més homogeni i els ordinadors són capaços d’analitzar-lo millor.

Estructura d'un document

Qualsevol pàgina (X)HTML té una estructura bàsica. El primer que hem de fer és escollir quin sabor de la família (X)HTML volem usar. Aquesta elecció ens limita els elements, els atributs i la sintaxi que hem d’usar en la confecció de la web, tot i que les etiquetes més usades són comunes a tots els sabors de la família.

En l’exemple que mostrem a continuació s’ha escollit la DTD (X)HTML 1.0 Strict. La plantilla base que ha de tenir qualsevol document XHTML amb aquesta DTD és la següent:

<?xml version="1.0" encoding="utf-8"?
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
        <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
           <title>Títol de la web</title>
        </head>
        <body >
        <!-- Aquí hi va el contingut de la web -->
        </body>
     </html>

Si, en canvi, no volguéssim usar la sintaxi XML i utilitzéssim una DTD de la família HTML, per exemple la HTML 4.01 Strict, l’estructura del document seria la següent:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     <html>
        <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf -8">
           <title>Títol de la web</title>
        </head>
        <body>
        <!-- Aquí hi va el contingut de la web -->
        </body>
     </html>

               Passejar pels elements d'un document (X)HTML

               Per passejar per l’estructura i els elements d’un document, 
               molts navegadors inclouen extensions o funcionalitats que ens
               permeten analitzar cadascun dels elements del document (X)HTML 
               que està obert en aquells moments en el navegador. Aquestes eines 
               són extremadament útils quan estem desenvolupant una aplicació 
               web ja que, si el document és molt llarg, ens permeten accedir a 
               l’element desitjat d’una manera ràpida, visual i senzilla, així 
               com explorar cadascun dels seus atributs, els seus valors, editar 
               l’element al vol per poder comprovar què passaria si féssim els
               canvis en el fitxer real…
 
               Per exemple, si usem el navegador web Firefox, existeix una 
               extensió que ens dóna totes aquestes funcionalitats i moltes més. 
               El nom de l’extensió és Firebug.

Tant si és un document HTML com si és XHTML, el fitxer on escrivim el codi s’acostuma a desar amb el nom que trobem més escaient i l’extensió .html.

La declaració de l'XML i la DTD

Si usem l’XHTML, hem d’especificar que el document és XML. Això es fa a la primera línia del document, i se n’indica també la versió i la codificació de caràcters que fem servir:

     <?xml version="1.0" encoding="utf-8"?>

Si estiguéssim dissenyant un document HTML, aquesta línia l’hauríem d’ometre, ja que els documents HTML no són documents XML.

A tota pàgina web s’hauria d’especificar la DTD per tal de saber amb quin llenguatge de la família (X)HTML estem treballant. Aquesta especificació ens permet validar la pàgina. En l’actualitat, però, trobem moltes pàgines web que no especifiquen quina DTD usen. Podem entendre que, o bé no n’usen cap o bé s’han oblidat d’especificar-la. En qualsevol dels dos casos, aquesta pàgina incompleix els estàndards proclamats pel W3C.

Si usem la DTD XHTML Strict 1.0, la segona línia del nostre fitxer .html és la següent:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >

L'element arrel

Tot document XML ha de tenir un element arrel. En el cas de la família de llenguatges (X)HTML aquest element arrel és <html>. En el cas particular d’XHTML hem d’especificar, a més, que estem usant XHTML amb l’atribut xmlns i la llengua del document amb els atributs xml:lang i lang:

<?xml version="1.0" encoding="utf-8"?>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
     ...
     </html>

La capçalera i el cos

Tot document (X)HTML té dues seccions principals: la capçalera, marcada amb l’etiqueta <head> i el cos del document, marcat amb l’etiqueta <body>.

La capçalera conté elements que faciliten informació diversa de la pàgina, com el títol, l’enllaç amb altres fitxers relacionats amb el document (fulls d’estils, codi JavaScript…) i metainformació del document, entre d’altres.

Una capçalera mínima seria la següent:

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>La meva pàgina web</title>
     </head>

La marca <meta> serveix per establir metainformació del document i té diferents funcions, en aquest cas diem que el nostre document s’enviarà amb el tipus MIME (Multipurpose Internet Mail Extensions) text/html i que el document està codificat amb UTF-8.

               Per què està permès enviar documents XHTML 1.0 com a texthtml?*

               L’XHTML és un format XML; això vol dir que parlant de manera 
               estricta s’hauria d’enviar amb un tipus MIME relacionat amb l’XML
               (application/xhtml+xml, application/xml, o text/xml). Malgrat tot,
               l’XHTML 1.0 es va dissenyar amb molta cura, de manera que si el
               document està fet amb compte hauria de funcionar també en agents
               d’usuari pensats per a l’HTML llegat. Si se segueixen algunes pautes 
               senzilles es pot fer que molts documents XHTML 1.0 funcionin en 
               navegadors antics. Malgrat tot, els navegadors antics només 
               interpreten el tipus MIME text/html, de manera que s’ha d’emprar
               aquest tipus si se’ls envia documents XHTML 1.0. S’ha de tenir 
               present que enviar documents XHTML als navegadors com a text/html
               vol dir que aquests navegadors veuran el document com a HTML i no 
               com a XHTML.

               S. Pemberton (ed.). Preguntes més freqüents d’HTML i XHTML.

La marca <title> ens serveix per posar el títol de la nostra web. El navegador mostra el contingut d’aquesta marca com a títol de la finestra o de la pestanya on es mostra el document.

Després de la capçalera, tenim l’element <body>, que conté tot el contingut de la web.

     <body>
        <!-- Contingut de la web -->
      </body>

Vegem a continuació un resum de les etiquetes que utilitzem per crear l’estructura mínima d’un document (X)HTML:

• <html>: Ele­ment arrel del docu­ment.

• <head>: Cap­ça­lera, espai des­ti­nat a con­te­nir infor­ma­ció del docu­ment.

• <title>: Títol des­crip­tiu de la pàgina web. Nor­mal­ment apa­reix a la barra del nave­ga­dor, també és el text que s’emma­gat­zema en els mar­ca­dors del nave­ga­dor (llista d’adre­ces d’interès).

• <meta />: Metain­for­ma­ció de la pàgina. Podem posar diver­ses mar­ques <meta>, que donen infor­ma­ció no visi­ble del docu­ment.

• <body>: Cos o con­tin­gut del docu­ment.

Estructura del document amb l'(X)HTML5

El futur estàndard, l’(X)HTML5, incorpora moltes novetats. Una d’elles és la simplificació de la DTD.

Un document bàsic amb HTML5 té la següent estructura:

<!DOCTYPE html>
     <html>
        <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
           <title>Títol de la web</title>
        </head>
        <body>
           <!-- Aquí hi va el contingut de la web -->
        </body>
     </html>

Si preferim la sintaxi XML, usarem XHTML5. L’XHTML5 és un llenguatge amb les mateixes etiquetes que l’HTML5, però amb sintaxi XML.

Un document bàsic amb XHTML5 té la següent estructura:

<!DOCTYPE html>
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
        <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf -8" />
           <title>Títol de la web</title>
        </head>
        <body>
           <!-- Aquí hi va el contingut de la web -->
        </body>
     </html>

Llegibilitat i organització del codi

          La llegibilitat del codi font és la claredat amb què està codificat, en el
          sentit que un ésser humà sigui capaç d’entendre’l de manera fàcil i ràpida.

És fonamental que el codi font (X)HTML que generem sigui llegible. Hem de pensar que normalment no treballarem sols i fer que allò que hem desenvolupat sigui llegible pot ajudar a aquells que treballen amb el nostre document a entendre què hem fet i per què ho hem fet. Fins i tot, suposant que el document creat només serà modificat per nosaltres, la llegibilitat també és indispensable per recordar tot allò que hem fet.

          Entendrem per organització del codi font l’estructuració de l’aplicació web
          en diversos fitxers així com la classificació d’aquests fitxers en els 
          directoris que calgui.

Hi ha diverses tècniques per tal que el codi sigui llegible i estigui ben organitzat. Les més rellevants són els comentaris, el sagnat del codi i l’organització dels fitxers.

Comentaris

En un document (X)HTML podem posar anotacions que no es veuran reflectides quan es miri la web amb el navegador, però que són útils per al desenvolupador web. La sintaxi dels comentaris amb (X)HTML és la següent: És molt important comentar el codi font, sobretot si es tracta d’un document molt llarg.

Imaginem que tenim una pàgina web amb una capçalera, un menú, una columna esquerra, una part central amb articles i un peu de pàgina. Podríem posar els següents comentaris per denotar on comencen cadascuna d’aquestes seccions del nostre document:

<?xml version="1.0" encoding="utf-8"?
     <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf -8" / >
     <title>Títol de la web</title>
     </head>
     <body>
        <!-- Capçalera -->
        ...
        <!-- Menú de navegació -->
        ...
        <!-- Columna lateral amb enllaços interessants per a l'usuari -->
        ...
        <!-- Secció principal amb articles -->
        ...
        <!-- Peu de pàgina -->
        ...
     </body>
     </html>

Sagnat del codi

El codi HTML està farcit d’etiquetes que s’obren i es tanquen. Al navegador web que interpretarà aquest codi no li cal que hi hagi ni salts de pàgina ni tabuladors per poder interpretar-lo, però els éssers humans necessitem que el codi estigui organitzat amb salts de línia i sagnats per tal de llegir-lo d’una manera còmoda.

queda sagnada respecte l’etiqueta

     <div>
        <p>Això és el contingut d'un paràgraf</p>
     </div>

     <div>
        <p>Això és el contingut d'un paràgraf, ara fem un <a href="http://elquesigui.org"> enllaç extern</a> i continuem escrivint...</p>
     </div>

  |--web
  |   |--imatges
  |   |    |--img1.png
  |   |    |--img2.jpg
  |   |    |--img3.gif
  |   |    |...
  |   |--videos
  |   |    |--video1.mpg
  |   |    |--video2.mpg
  |   |    |...
  |   |--audios
  |   |    |--audio1.ogg
  |   |    |--audio2.mp3
  |   |    |...
  |   |--css
  |   |    |--estil.css
  |   |    |...
  |   |--index.html
  |   |--seccio1.html
  |   |--seccio2.html
  |   |--contacte.html
  |   |...
  |

               Es pot configurar el servidor web per tal que en lloc de
               index.html el fitxer d’inici tingui un altre nom.

  |--web
  |   |--imatges
  |   |    |--img1.png
  |   |    |--img2.jpg
  |   |    |--img3.gif
  |   |    |...
  |   |--videos
  |   |    |--video1.mpg
  |   |    |--video2.mpg
  |   |    |...
  |   |--audios
  |   |    |--audio1.ogg
  |   |    |--audio2.mp3
  |   |    |...
  |   |--css
  |   |    |--estil.css
  |   |    |...
  |   |--seccions
  |   |    |--index.html
  |   |    |--seccio1.html
  |   |    |--seccio2.html
  |   |    |...
  |   |--galeria
  |   |    |--index.html
  |   |    |--fotos1.html
  |   |    |--fotos2.html
  |   |    |...
  |   |--index.html
  |   |--contacte.html
  |   |...
  |