M8 - Aplicacions web / Apunts UF5: HTML i CSS

De wikiserver
La revisió el 18:49, 21 oct 2014 per Rsort (Discussió | contribucions) (Es crea la pàgina amb «==El llenguatge de marques (X)HTML== ===Història i orígens de l'(X)HTML=== ===L'(X)HTML=== ===El CSS=== ===L'XML=== ===La DTD=== ===Validació=== ===Diferències ent…».)
(dif) ← Versió més antiga | Versió actual (dif) | Versió més nova → (dif)
Dreceres ràpides: navegació, cerca

Contingut

El llenguatge de marques (X)HTML

Història i orígens de l'(X)HTML

L'(X)HTML

El CSS

L'XML

La DTD

Validació

Diferències entre l'HTML i l'XHTML

==

<!doctype html>

<html class="no-js" lang="ca">

<head id="www-sitename-com" data-template-set="html5-reset">

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Aplicacions web</title>

<meta name="description" content="">

<meta name="google-site-verification" content="">

<meta name="author" content="Institut Obert de Catalunya"> <meta name="Copyright" content="Copyright Institut Obert de Catalunya 2011. All Rights Reserved.">

<meta name="DC.title" content="Aplicacions web"> <meta name="DC.subject" content="Informàtica i comunicacions"> <meta name="DC.creator" content="Institut Obert de Catalunya">


<link rel="shortcut icon" href="../../../img/favicon.ico">

<link rel="apple-touch-icon" href="../../../img/apple-touch-icon.png">

<link rel="stylesheet" href="../../../_/css/style.css">

<link rel="stylesheet" href="../../../_/css/jquery-ui.css">

<script src="../../../_/js/modernizr-1.7.min.js"></script> <script src="../../../_/js/Hyphenator.js" type="text/javascript"></script> <script type="text/javascript"> Hyphenator.config({ minwordlength : 4 }); Hyphenator.run(); </script> 

   <script src="../../../_/js/build.js" type="text/javascript"></script>

</head>

<body class="style-newspaper">

<header id="header">

<a href="http://ioc.gencat.cat"><img src="../../../img/logo.png" alt="Institut Obert de Catalunya"/></a><a href="http://creativecommons.org/licenses/by-nc-sa/3.0/es/deed.ca"><img src="../../../img/license.png" alt="Llicència" class="license"/></a>
<a href="../../../index.html">Aplicacions web</a>

</header> 

  <aside id="aside">

  </aside>

  <section>

  </section>
  <section>

  </section>
<section>

</section>   

    <article lang="ca" class="sheet">

<a id="el_llenguatge_de_marques_x_html"> El llenguatge de marques (X)HTML </a>

Un llenguatge de marques és una manera de codificar un document on el text està acompanyat d’etiquetes (marques) que contenen informació addicional sobre l’estructura del text o la seva presentació.

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

<a id="historia_i_origens_de_l_x_html" >Història i orígens de l'(X)HTML</a>

<img src="../media/ic10m8d1_01.png" title="El W3C és l'organització internacional més important que desenvolupa i promociona els estàndards web." alt="El W3C és l'organització internacional més important que desenvolupa i promociona els estàndards web." />

IETF

La missió de l’IETF és fer que Internet funcioni millor. L’IETF produeix documents tècnics d’alta qualitat que pretenen influenciar la manera com la gent dissenya, usa i gestiona Internet.

L’any 1993, el físic Tim Berners-Lee, treballador del CERN (European Organization for Nuclear Research), va descriure el llenguatge <acronym title="HyperText Markup Language">HTML</acronym>. Aquest primer esborrany no va prosperar i, un temps més tard, Dave Raggett en va proposar un altre, l’<acronym title="HyperText Markup Language">HTML</acronym>+, que tampoc va prosperar com a estàndard.

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

El 1995, l’IETF va crear un grup de treball per elaborar l’estàndard <acronym title="HyperText Markup Language">HTML</acronym> i va sorgir l’<acronym title="HyperText Markup Language">HTML</acronym> 2.0, que incloïa idees dels esborranys fets per Berners-Lee i Raggett. Però a partir del 1996, l’IETF tanca el seu grup de treball i el desenvolupament de l’estàndard <acronym title="HyperText Markup Language">HTML</acronym> és adoptat pel <acronym title="World Wide Web Consortium">W3C</acronym>. L’última versió d’<acronym title="HyperText Markup Language">HTML</acronym> acceptada és l’<acronym title="HyperText Markup Language">HTML</acronym> 4.01.

S’ha de tenir en compte que l’<acronym title="HyperText Markup Language">HTML</acronym> es va crear com un llenguatge <acronym title="Standard General Markup Language">SGML</acronym>.

L’<acronym title="Standard General Markup Language">SGML</acronym> (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.

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

En la <a href="#Figure1">figura</a> podem veure l’evolució històrica tant de l’<acronym title="HyperText Markup Language">HTML</acronym> com de l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym>.

<a name="Figure1"></a>

<figure> <figcaption>Figura Línia de temps dels estàndards <acronym title="HyperText Markup Language">HTML</acronym> </figcaption><img src="../media/ic10m8d1_02.png" alt="" /></figure>

| |(c) 2012 Simó Albert i Beltran Línia de temps dels estàndards HTML està subjecta a una llicència de Reconeixement-CompartirIgual 3.0 Espanya de Creative Commons. Per veure una còpia de la llicència, visiteu http://creativecommons.org/licenses/by-sa/3.0/es/ o envieu una carta a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

Trobareu enllaços amb més informació de la història i orígens de l’(X)<acronym title="HyperText Markup Language">HTML</acronym> a la secció “Adreces d’interès” del material web d’aquesta unitat.

El futur del món web és la nova versió d’<acronym title="HyperText Markup Language">HTML</acronym>, l’HTML5 (o la seva variant <acronym title="Extensible Markup Language">XML</acronym>, l’XHTML5), que ja ha començat a substituir l’<acronym title="HyperText Markup Language">HTML</acronym> 4.01 i l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0.

W3C: Recommendation i Working Draft

Quan el <acronym title="World Wide Web Consortium">W3C</acronym> 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. <acronym title="World Wide Web Consortium">W3C</acronym> 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’<acronym title="HyperText Markup Language">HTML</acronym> 4.01 és una Recommendation, mentre que l’HTML5 és un Working Draft.

<a id="l_x_html" >L'(X)HTML</a>

El llenguatge de marques <acronym title="HyperText Markup Language">HTML</acronym> (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 <acronym title="HyperText Markup Language">HTML</acronym> 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 <acronym title="HyperText Markup Language">HTML</acronym> està basat en l’<acronym title="Standard General Markup Language">SGML</acronym>, un metallenguatge força complex. Una simplificació d’aquest llenguatge és l’anomenat <acronym title="Extensible Markup Language">XML</acronym>, que és un subconjunt de normes de l’<acronym title="Standard General Markup Language">SGML</acronym>. Si basem el nostre document en les normes <acronym title="Extensible Markup Language">XML</acronym>, en lloc de les normes <acronym title="Standard General Markup Language">SGML</acronym>, estem confeccionant un document <acronym title="Extensible HyperText Markup Language">XHTML</acronym>.

Una de les definicions que podem trobar al <acronym title="World Wide Web Consortium">W3C</acronym> del llenguatge de marques <acronym title="Extensible HyperText Markup Language">XHTML</acronym> és la següent:

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

Hem de tenir en compte que quan confeccionem un document <acronym title="Extensible HyperText Markup Language">XHTML</acronym>, tot i que algunes de les marques permeses ens permeten definir l’aspecte del document, hem d’intentar seguir la filosofia <acronym title="Extensible Markup Language">XML</acronym>, és a dir, definir només la semàntica del document, no l’aparença.

Per exemple, si volem que el text “Fauna i flora a la Garrotxa” sigui un encapçalament, usarem l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> per fer-ho. Però dir que aquest text és un encapçalament no vol dir, per exemple, que el text “Fauna i flora de la Garrotxa” ha d’aparèixer en negreta i mida de lletra 20 (això seria la seva aparença i per definir-la usarem <acronym title="Cascading Style Sheets">CSS</acronym>, Cascade Style Sheets).

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

  • <acronym title="HyperText Markup Language">HTML</acronym> 4.01 Strict
  • <acronym title="HyperText Markup Language">HTML</acronym> 4.01Transitional
  • <acronym title="HyperText Markup Language">HTML</acronym> 4.01 Frameset
  • <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 Strict
  • <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 Transitional
  • <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 Frameset

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.

<a id="l_html5" >L'HTML5</a>

La web <a href="http://html5test.com/" class="urlextern" title="http://html5test.com/" rel="nofollow">http://html5test.com/</a> 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’<acronym title="HyperText Markup Language">HTML</acronym>, l’<acronym title="HyperText Markup Language">HTML</acronym> 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 <acronym title="Extensible Markup Language">XML</acronym> per a l’HTML5: l’XHTML5. Aquesta variant ens permetrà utilitzar la nostra pàgina web com a document <acronym title="Extensible Markup Language">XML</acronym>. La diferència pel que fa a la sintaxi del llenguatge és que s’han de respectar les normes sintàctiques de l’<acronym title="Extensible Markup Language">XML</acronym>.

<a id="el_css" >El CSS</a>

El <acronym title="Cascading Style Sheets">CSS</acronym> (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 <acronym title="Cascading Style Sheets">CSS</acronym> s’utilitza per donar estil a documents (X)<acronym title="HyperText Markup Language">HTML</acronym> i així poder separar el contingut de la presentació.

Exemple d'aplicació de CSS

Si en un document (X)<acronym title="HyperText Markup Language">HTML</acronym> hem definit que un text és un encapçalament, en el document <acronym title="Cascading Style Sheets">CSS</acronym> associat podem definir que el tipus de lletra dels encapçalaments és Verdana de mida 20, que es visualitzen en negreta i que són de color vermell.

Si en el document (X)<acronym title="HyperText Markup Language">HTML</acronym> hem definit que un text és un paràgraf, en el document <acronym title="Cascading Style Sheets">CSS</acronym> associat podem definir que els paràgrafs tindran fons gris i una vora.

<a id="l_xml" >L'XML</a>

L’<acronym title="Extensible Markup Language">XML</acronym> (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’<acronym title="Extensible Markup Language">XML</acronym> 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.

Per exemple, si fem un símil amb les llengües usades normalment, podríem definir el metallenguatge de les llengües romàniques com un conjunt de normes que estableixen que hem d’escriure d’esquerra a dreta, que les frases han de tenir subjecte i predicat, i que podem usar certs signes de puntuació; no direm, però, quines són les paraules que podem usar, ja que això ho definirien cadascuna de les llengües.

L’objectiu de l’<acronym title="Extensible Markup Language">XML</acronym> é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.

Vegem com s’estructura la informació amb l’<acronym title="Extensible Markup Language">XML</acronym> a partir d’un exemple. Imaginem que tenim el poema Divisa de l’escriptora catalana Maria Mercè Marçal: 

Divisa

A l'atzar agraeixo tres dons: haver nascut dona,
de classe baixa i nació oprimida.

I el tèrbol atzur de ser tres voltes rebel.

Ara volem estructurar la informació amb sintaxi <acronym title="Extensible Markup Language">XML</acronym>. Ho podríem fer de la següent manera: 

<ol><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><?xml</span> <span class="re0">version</span>=<span class="st0">"1.0"</span> <span class="re0">encoding</span>=<span class="st0">"utf-8"</span><span class="re2">?></span></span></div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><poema</span> <span class="re0">autor</span>=<span class="st0">"Maria Mercè Marçal"</span><span class="re2">></span></span></div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"><titol<span class="re2">></span></span></span>Divisa<span class="sc3"><span class="re1"></titol<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"><estrofa<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><vers<span class="re2">></span></span></span>A l'atzar agraeixo tres dons: haver nascut dona,<span class="sc3"><span class="re1"></vers<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><vers<span class="re2">></span></span></span>de classe baixa i nació oprimida.<span class="sc3"><span class="re1"></vers<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"></estrofa<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"><estrofa<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><vers<span class="re2">></span></span></span>I el tèrbol atzur de ser tres voltes rebel.<span class="sc3"><span class="re1"></vers<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"></estrofa<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><poesia<span class="re2">></span></span></span></div></li></ol>

La primera línia ens indica que és un document <acronym title="Extensible Markup Language">XML</acronym> versió 1.0 i que s’usa la codificació de caràcters UTF-8.

El nom de les etiquetes (<poema>, <titol>, <estrofa> i <vers>) i de l’atribut (autor) ens els hem inventat, però estem seguint un conjunt de regles que fan que complim la sintaxi <acronym title="Extensible Markup Language">XML</acronym>. Fixeu-vos que aquestes etiquetes ens servirien per marcar qualsevol altre poema.

Posem un altre 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: 

<ol><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><?xml</span> <span class="re0">version</span>=<span class="st0">"1.0"</span> <span class="re0">encoding</span>=<span class="st0">"utf-8"</span><span class="re2">?></span></span></div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><recepta<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">   <span class="sc-1"><!-- Una recepta casolana --></span></div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"><titol<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      Truita a la francesa</div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"></titol<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"><imatge</span> <span class="re0">ubicacio</span>=<span class="st0">"img/truita.png"</span> <span class="re2">/></span></span></div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"><ingredients<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><ingredient</span> <span class="re0">quant</span>=<span class="st0">"2"</span><span class="re2">></span></span></div></li><li class="li1"><div class="de1">         <span class="sc3"><span class="re1"><nom<span class="re2">></span></span></span>Ous<span class="sc3"><span class="re1"></nom<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      <span class="sc3"><span class="re1"></ingredient<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><ingredient<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">         <span class="sc3"><span class="re1"><nom<span class="re2">></span></span></span>Oli<span class="sc3"><span class="re1"></nom<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      <span class="sc3"><span class="re1"></ingredient<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><ingredient<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">         <span class="sc3"><span class="re1"><nom<span class="re2">></span></span></span>Sal<span class="sc3"><span class="re1"></nom<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      <span class="sc3"><span class="re1"></ingredient<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"></ingredients<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"><preparacio<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">      Batre els ous, escalfar l<span class="sc1">&apos;</span>oli en </div></li><li class="li1"><div class="de1">      una paella, tirar els ous batuts a la </div></li><li class="li1"><div class="de1">      paella i embolicar la truita.</div></li><li class="li1"><div class="de1">   <span class="sc3"><span class="re1"></preparacio<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"></recepta<span class="re2">></span></span></span></div></li></ol>

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

Ara, un cop vistos aquests exemples, detallarem com ha d’estar formatat qualsevol document <acronym title="Extensible Markup Language">XML</acronym> i quines regles sintàctiques s’han d’aplicar.

Per veure la sintaxi d’<acronym title="Extensible Markup Language">XML</acronym> completa podeu consultar l’annex “Sintaxi <acronym title="Extensible Markup Language">XML</acronym>” del web d’aquesta unitat.

Un document <acronym title="Extensible Markup Language">XML</acronym> 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:
<ol><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><element<span class="re2">></span></span><span class="re1"></element<span class="re2">></span></span></span></div></li></ol>

o si l’element no té contingut intern: 

<ol><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><element</span> <span class="re2">/></span></span></div></li></ol>
  • Atributs: serveixen per donar informació addicional a un element. Els atributs sempre tenen associat un valor. La sintaxi és la següent:
<ol><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><element</span> <span class="re0">atribut</span>=<span class="st0">"valor"</span><span class="re2">></span><span class="re1"></element<span class="re2">></span></span></span></div></li></ol>

o si l’element no té contingut intern: 

<ol><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><element</span> <span class="re0">atribut</span>=<span class="st0">"valor"</span> <span class="re2">/></span></span></div></li></ol>
  • Nodes de text: són els fragments de text del document, la informació que volem estructurar. La sintaxi és: 
<ol><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><element<span class="re2">></span></span></span>text<span class="sc3"><span class="re1"></element<span class="re2">></span></span></span></div></li></ol>
  • Entitats predefinides: serveixen per representar caràcters especials. La sintaxi és:
<ol><li class="li1"><div class="de1"><span class="sc1">&entitat;</span></div></li></ol>
  • Comentaris: serveixen per introduir comentaris per al programador, aquesta informació no serà mostrada ni processada. La sintaxi és:
<ol><li class="li1"><div class="de1"><span class="sc-1"><!-- comentari --></span></div></li></ol>

En la <a href="#Figure2">figura</a> es pot veure un exemple de document <acronym title="Extensible Markup Language">XML</acronym> amb la informació estructurada de com fer una truita a la francesa. S’hi diferencien els diversos tipus de nodes. En la <a href="#Figure3">figura</a> veiem una representació del mateix document en forma d’arbre.

<a name="Figure2"></a>

<figure> <figcaption>Figura Document <acronym title="Extensible Markup Language">XML</acronym> en què es mostren els diferents tipus de nodes </figcaption><img src="../media/ic10m8d1_03.png" alt="" /></figure>

Els nodes d’un document <acronym title="Extensible Markup Language">XML</acronym> estan relacionats entre sí. Podem establir diferents relacions:

  • Element arrel: és el node que engloba tots els altres. En l’exemple de la <a href="#Figure2">figura</a> l’element arrel és <recepta>.
  • Pares i fills: un node és fill d’un altre quan està dins seu en un primer nivell. En l’exemple de la <a href="#Figure2">figura</a> l’element <nom> és fill de l’element <ingredient> i, per tant, l’element <ingredient> és el pare de l’element <nom>.
  • Germans: dos nodes són germans quan tenen el mateix pare. En l’exemple de la <a href="#Figure2">figura</a> els elements <titol>, <imatge>, <ingredients> i <preparacio> són germans ja que l’element <recepta> és el seu pare.

D’aquesta manera podem entendre un document <acronym title="Extensible Markup Language">XML</acronym> com una estructura de nodes en forma d’arbre, tal i com es mostra en la <a href="#Figure3">figura</a>.

<a name="Figure3"></a>

<figure> <figcaption>Figura Representació d’un document <acronym title="Extensible Markup Language">XML</acronym> en forma d’arbre </figcaption><img src="../media/ic10m8d1_04.png" alt="" /></figure>

Finalment, els documents <acronym title="Extensible Markup Language">XML</acronym> 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:
<ol><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><?xml</span> <span class="re0">version</span>=<span class="st0">"1.0"</span> <span class="re0">encoding</span>=<span class="st0">"utf-8"</span><span class="re2">?></span></span></div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><recepta<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">  ...</div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"></recepta<span class="re2">></span></span></span></div></li></ol>
  • És incorrecte:
<ol><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><?xml</span> <span class="re0">version</span>=<span class="st0">"1.0"</span> <span class="re0">encoding</span>=<span class="st0">"utf-8"</span><span class="re2">?></span></span></div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><recepta<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">  ...</div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"></recepta<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><observacions<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">  ...</div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"></observacions<span class="re2">></span></span></span></div></li></ol>
  • 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’<acronym title="Extensible Markup Language">XML</acronym>.

<a id="la_dtd" >La DTD</a>

Mentre que l’<acronym title="Extensible Markup Language">XML</acronym> ens defineix la sintaxi d’un document, la <acronym title="Document Type Definition">DTD</acronym> (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 <acronym title="Document Type Definition">DTD</acronym> està molt estès, hi ha una altra manera de definir els nodes permesos i les seves característiques. Aquesta alternativa és usar l’<acronym title="Extensible Markup Language">XML</acronym> Schema, que ens proporciona més opcions i més flexibilitat.

La <acronym title="Document Type Definition">DTD</acronym> 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’<acronym title="Extensible Markup Language">XML</acronym> ens definiria que hem d’escriure d’esquerra a dreta, entre d’altres. La <acronym title="Document Type Definition">DTD</acronym>, en canvi, ens definiria quines paraules podem usar, és a dir, ens definiria el vocabulari.

La <acronym title="Document Type Definition">DTD</acronym> é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 <acronym title="Document Type Definition">DTD</acronym>:

  • <!ELEMENT nom-element (EMPTY)>: Defineix un element que no té contingut. En el document <acronym title="Extensible Markup Language">XML</acronym> apareixerà amb una marca que es tancarà en ella mateixa (<nom-element />).
  • <!ELEMENT nom-element (#PCDATA)>: Defineix un element que conté text.
  • <!ELEMENT nom-element (elem1, elem2,…)>: Defineix un element que conté altres elements; aquests elements fills poden portar un modificador que ens indica els cops que poden aparèixer:
    • elem: elem apareix un únic cop.
    • elem*: elem apareix 0 cops o més.
    • elem+: elem apareix 1 cop o més.
    • elem?: elem apareix 0 cops o 1.
  • <!ATTLIST nom-element nom-atribut tipus-atribut valor-per-defecte>: Defineix un atribut especificant el nom de l’atribut (nom-atribut) i el nom de l’element al qual pertany l’atribut (nom-element). Els tipus-atribut més usats són els següents:
    • CDATA: el valor de l’atribut serà text.
    • (valor1|valor2|…): el valor de l’atribut només pot ser algun dels valors enumerats.

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

  • valor: especifica el valor que té l’atribut per defecte.
  • #REQUIRED: especifica que l’atribut és obligatori.
  • #IMPLIED: especifica que l’atribut no és obligatori.

Per exemple, per al document <acronym title="Extensible Markup Language">XML</acronym> definit en la <a href="#Figure2">figura</a> crearíem un document recepta.dtd en què introduiríem la <acronym title="Document Type Definition">DTD</acronym> següent: 

<ol><li class="li1"><div class="de1"><!ELEMENT recepta ( titol, imatge, ingredients, preparacio ) ></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><!ELEMENT titol ( #PCDATA ) ></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><!ELEMENT imatge EMPTY ></div></li><li class="li1"><div class="de1"><!ATTLIST imatge ubicacio CDATA #REQUIRED ></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><!ELEMENT ingredient ( nom ) ></div></li><li class="li1"><div class="de1"><!ATTLIST ingredient quant CDATA #IMPLIED ></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><!ELEMENT ingredients ( ingredient+ ) ></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><!ELEMENT nom ( #PCDATA ) ></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><!ELEMENT preparacio ( #PCDATA ) ></div></li></ol>

Expliquem aquesta <acronym title="Document Type Definition">DTD</acronym> 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 <acronym title="Document Type Definition">DTD</acronym>, ens hem de preguntar: com li podem dir a un document <acronym title="Extensible Markup Language">XML</acronym> quina <acronym title="Document Type Definition">DTD</acronym> ha d’usar? Ens podem trobar diversos casos, tal i com es mostra a continuació.

Per enllaçar el document <acronym title="Extensible Markup Language">XML</acronym> amb la <acronym title="Document Type Definition">DTD</acronym> que vol seguir es poden usar les següents formes:

  • Definir la <acronym title="Document Type Definition">DTD</acronym> en el mateix document <acronym title="Extensible Markup Language">XML</acronym>. La sintaxi és la següent:
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE element-arrel [declaracions]></span></div></li></ol>

Per exemple: 

<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE recepta [ </span></div></li><li class="li1"><div class="de1"><span class="sc0"><!ELEMENT recepta (titol,plat, ingredients,preparacio)></span></div></li><li class="li1"><div class="de1">	... </div></li><li class="li1"><div class="de1"><span class="sc3"><!ELEMENT preparacio <span class="br0">(</span>#PCDATA<span class="br0">)</span><span class="re2">></span></span> </div></li><li class="li1"><div class="de1">]></div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><recepta<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">	... </div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"></recepta<span class="re2">></span></span></span></div></li></ol>
  • Definir la <acronym title="Document Type Definition">DTD</acronym> en un fitxer extern. La sintaxi és la següent:
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE element-arrel SYSTEM "path/nomFitxer.dtd"></span></div></li></ol>

Per exemple: 

<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE recepta SYSTEM "dtds/recepta.dtd"></span></div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><recepta<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">	... </div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"></recepta<span class="re2">></span></span></span></div></li></ol>
  • Definir la <acronym title="Document Type Definition">DTD</acronym> en un fitxer extern públic. La sintaxi és la següent:
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE element-arrel PUBLIC "identificador" "url"></span></div></li></ol>

Per exemple: 

<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></span> </div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>></span></div></li><li class="li1"><div class="de1">	... </div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>></span></div></li></ol>

Per tant, en l’exemple anterior, si volguéssim usar una <acronym title="Document Type Definition">DTD</acronym> que està descrita en un fitxer de nom recepta.dtd, hauríem d’incloure una línia amb la definició de la <acronym title="Document Type Definition">DTD</acronym>, després de la declaració de la versió <acronym title="Extensible Markup Language">XML</acronym> i codificació del document: 

<ol><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><?xml</span> <span class="re0">version</span>=<span class="st0">"1.0"</span> <span class="re0">encoding</span>=<span class="st0">"utf-8"</span><span class="re2">?></span></span></div></li><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE recepta SYSTEM "recepta.dtd"></span></div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"><recepta<span class="re2">></span></span></span></div></li><li class="li1"><div class="de1">...</div></li><li class="li1"><div class="de1"><span class="sc3"><span class="re1"></recepta<span class="re2">></span></span></span></div></li></ol>

Diem que un document valida si està ben format i respecta totes les regles que especifica la <acronym title="Document Type Definition">DTD</acronym> que té associada.

<a id="les_dtd_de_l_x_html" >Les DTD de l'(X)HTML</a>

Podeu trobar el llistat de totes les <acronym title="Document Type Definition">DTD</acronym> per a tots els sabors d’(X)<acronym title="HyperText Markup Language">HTML</acronym> a la secció “Adreces d’interès” del web d’aquesta unitat.

La família de llenguatges (X)<acronym title="HyperText Markup Language">HTML</acronym> té diversos “sabors”. Per a cadascun d’aquests sabors disposem d’una <acronym title="Document Type Definition">DTD</acronym> pública que ens ofereix el <acronym title="World Wide Web Consortium">W3C</acronym>. Enumerem-les:

  • <acronym title="HyperText Markup Language">HTML</acronym> 4.01 - Strict
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></span></div></li></ol>
  • <acronym title="HyperText Markup Language">HTML</acronym> 4.01 - Transitional
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></span></div></li></ol>
  • <acronym title="HyperText Markup Language">HTML</acronym> 4.01 - Frameset
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"></span></div></li></ol>
  • <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 - Strict
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span></div></li></ol>
  • <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 - Transitional
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span></div></li></ol>
  • <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 - Frameset
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></span></div></li></ol>
  • <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.1
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></span></div></li></ol>
  • <acronym title="Extensible HyperText Markup Language">XHTML</acronym> Basic 1.0
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"></span></div></li></ol>
  • <acronym title="Extensible HyperText Markup Language">XHTML</acronym> Basic 1.1
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"></span></div></li></ol>
  • HTML5 (encara no és un estàndard)
<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html></span></div></li></ol>

Per exemple, si volguéssim escriure un document <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 Strict, les dues primeres línies del document serien: 

<ol><li class="li1"><div class="de1"><span class="sc2"><?xml <span class="kw3">version</span><span class="sy0">=</span><span class="st0">"1.0"</span> encoding<span class="sy0">=</span><span class="st0">"utf-8"</span>?></span></div></li><li class="li1"><div class="de1"><span class="sc2"><! DOCTYPE html PUBLIC <span class="st0">"-//W3C//DTD XHTML 1.0 Strict//EN"</span> <span class="st0">"http://www.w3c.org/TR/xhtml1/</span></span></div></li><li class="li1"><div class="de1"><span class="sc2"><span class="st0">DTD/xhtml1-strict.dtd "</span> ></span></div></li></ol>

<a id="validacio" >Validació</a>

  • <img src="../media/ic10m8d1_05.png" class="imgB" title="Quan una web valida, s'acostuma a posar un logotip per informar que compleix els estàndards" alt="Quan una web valida, s'acostuma a posar un logotip per informar que compleix els estàndards" />
  • Quan una web valida, s'acostuma a posar un logotip per informar que compleix els estàndards

Podeu aprendre més de les eines de validació a l’Annex “Validació de documents (X)<acronym title="HyperText Markup Language">HTML</acronym>” del material web d’aquesta unitat.

Quan escrivim un document amb llenguatge (X)<acronym title="HyperText Markup Language">HTML</acronym>, ens hem d’assegurar que complim la sintaxi <acronym title="Standard General Markup Language">SGML</acronym> o <acronym title="Extensible Markup Language">XML</acronym> (segons si el nostre document és <acronym title="HyperText Markup Language">HTML</acronym> o <acronym title="Extensible HyperText Markup Language">XHTML</acronym>, respectivament) i que respectem la <acronym title="Document Type Definition">DTD</acronym> que haguem escollit.

Per poder-ho fer, el <acronym title="World Wide Web Consortium">W3C</acronym> ens ofereix un servei de validació de pàgines, on se’ns diu si la nostra pàgina compleix amb la <acronym title="Document Type Definition">DTD</acronym> 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.

<a id="diferencies_entre_l_html_i_l_xhtml" >Diferències entre l'HTML i l'XHTML</a>

El llenguatge de marques <acronym title="HyperText Markup Language">HTML</acronym> està basat en el metallenguatge <acronym title="Standard General Markup Language">SGML</acronym> i el llenguatge de marques <acronym title="Extensible HyperText Markup Language">XHTML</acronym> està basat en el metallenguatge <acronym title="Extensible Markup Language">XML</acronym>. 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

<a id="declaracio_del_tipus_de_document" >Declaració del tipus de document</a>

En els documents <acronym title="Extensible HyperText Markup Language">XHTML</acronym> hem de posar la versió de <acronym title="Extensible Markup Language">XML</acronym> que estiguem usant, en els documents <acronym title="HyperText Markup Language">HTML</acronym> no s’ha de posar.

Així doncs, amb l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> posarem la versió d’<acronym title="Extensible Markup Language">XML</acronym> usada, seguida de la <acronym title="Document Type Definition">DTD</acronym>. Per exemple, un document <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 Strict començaria amb les següents dues línies: 

<ol><li class="li1"><div class="de1"><span class="sc2"><?xml <span class="kw3">version</span><span class="sy0">=</span><span class="st0">"1.0"</span> encoding<span class="sy0">=</span><span class="st0">"utf-8"</span>?></span></div></li><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd " ></span></div></li><li class="li1"><div class="de1">...</div></li></ol>

Amb l’<acronym title="HyperText Markup Language">HTML</acronym>, no posarem la versió d’<acronym title="Extensible Markup Language">XML</acronym>, ja que no és un document <acronym title="Extensible Markup Language">XML</acronym>. Per exemple, un document <acronym title="HyperText Markup Language">HTML</acronym> 4.01 Strict començaria amb la següent línia: 

<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></span></div></li><li class="li1"><div class="de1">...</div></li></ol>

<a id="tancament_d_etiquetes" >Tancament d'etiquetes</a>

Si usem l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym>, hem de tancar totes les etiquetes que obrim. En canvi, amb l’<acronym title="HyperText Markup Language">HTML</acronym> no és obligatori.

Amb l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym>, quan volem escriure un paràgraf fem: 

<ol><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span>Això és un paràgraf<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span></div></li></ol>

En canvi, amb l’<acronym title="HyperText Markup Language">HTML</acronym> podríem no tancar l’etiqueta: 

<ol><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span>Això és un paràgraf</div></li></ol>

<a id="etiquetes_buides" >Etiquetes buides</a>

Amb l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> les etiquetes buides s’han de tancar “en elles mateixes”. En canvi, amb l’<acronym title="HyperText Markup Language">HTML</acronym> 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’<acronym title="Extensible HyperText Markup Language">XHTML</acronym>, hauríem de tancar l’etiqueta “en ella mateixa”: 

<ol><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/meta.html"><span class="kw2">meta</span></a> <span class="kw3">http-equiv</span><span class="sy0">=</span><span class="st0">"Content-Type"</span> <span class="kw3">content</span><span class="sy0">=</span><span class="st0">"text/html; charset=utf-8"</span> <span class="sy0">/</span>></span></div></li></ol>

En canvi, amb l’<acronym title="HyperText Markup Language">HTML</acronym> no cal que tanquem l’etiqueta (és a dir, no cal posar la / final): 

<ol><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/meta.html"><span class="kw2">meta</span></a> <span class="kw3">http-equiv</span><span class="sy0">=</span><span class="st0">"Content-Type"</span> <span class="kw3">content</span><span class="sy0">=</span><span class="st0">"text/html; charset=utf-8"</span>></span></div></li></ol>

<a id="valors_dels_atributs" >Valors dels atributs</a>

Amb l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> els valors dels atributs han d’anar sempre entre cometes, en canvi amb l’<acronym title="HyperText Markup Language">HTML</acronym> no cal (excepte quan el valor de l’atribut conté espais en blanc):

Per exemple, amb l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> el valor de l’atribut alt sempre ha d’anar entre cometes: 

<ol><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/img.html"><span class="kw2">img</span></a> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"img/laimatge.png"</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">"Logotip"</span> <span class="sy0">/</span>></span></div></li></ol>

En canvi, amb l’<acronym title="HyperText Markup Language">HTML</acronym> podem ometre les cometes: 

<ol><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/img.html"><span class="kw2">img</span></a> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"img/laimatge.png"</span> <span class="kw3">alt</span><span class="sy0">=</span>Logotip></span></div></li></ol>

<a id="atributs_sense_valor" >Atributs sense valor</a>

Amb l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> els atributs sempre han de tenir un valor, i cal usar la sintaxi atribut=“valor”. En canvi amb l’<acronym title="HyperText Markup Language">HTML</acronym>, hi ha atributs que no tenen valor.

Així, per posar una casella de verificació marcada, amb l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> es fa el següent: 

<ol><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/input.html"><span class="kw2">input</span></a> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"checkbox"</span> <span class="kw3">checked</span><span class="sy0">=</span><span class="st0">"checked"</span> <span class="sy0">/</span>></span></div></li></ol>

En canvi, amb l’<acronym title="HyperText Markup Language">HTML</acronym> aquest atribut no té valor i s’escriu de la següent manera: 

<ol><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/input.html"><span class="kw2">input</span></a> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"checkbox"</span> <span class="kw3">checked</span> <span class="sy0">/</span>></span></div></li></ol>

<a id="sensibilitat_a_les_majuscules" >Sensibilitat a les majúscules</a>

L’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> é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’<acronym title="HyperText Markup Language">HTML</acronym> no és sensible a les majúscules.

Per això, si es vol escriure un encapçalament en <acronym title="Extensible HyperText Markup Language">XHTML</acronym>, s’usa l’etiqueta <h1> i sempre s’ha d’escriure en minúscules: 

<ol><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/h1.html"><span class="kw2">h1</span></a>></span>Títol principal<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/h1.html"><span class="kw2">h1</span></a>></span></div></li></ol>

En canvi, amb l’<acronym title="HyperText Markup Language">HTML</acronym>, com que no distingeix majúscules de minúscules, es pot posar l’etiqueta <H1>: 

<ol><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/h1.html"><span class="kw2">H1</span></a>></span>Títol principal<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/h1.html"><span class="kw2">H1</span></a>></span></div></li></ol>

L’<acronym title="HyperText Markup Language">HTML</acronym> i l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> són prou similars. La gran diferència és que l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> é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.

<a id="estructura_d_un_document_x_html" >Estructura d'un document (X)HTML</a>

Qualsevol pàgina (X)<acronym title="HyperText Markup Language">HTML</acronym> té una estructura bàsica. El primer que hem de fer és escollir quin sabor de la família (X)<acronym title="HyperText Markup Language">HTML</acronym> 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.

Trobareu el codi dels exemples a l’annex “Codi font dels exemples” del material web d’aquesta unitat.

En l’exemple que mostrem a continuació s’ha escollit la <acronym title="Document Type Definition">DTD</acronym> (X)<acronym title="HyperText Markup Language">HTML</acronym> 1.0 Strict. La plantilla base que ha de tenir qualsevol document <acronym title="Extensible HyperText Markup Language">XHTML</acronym> amb aquesta <acronym title="Document Type Definition">DTD</acronym> és la següent: 

<ol><li class="li1"><div class="de1"><span class="sc2"><?xml <span class="kw3">version</span><span class="sy0">=</span><span class="st0">"1.0"</span> encoding<span class="sy0">=</span><span class="st0">"utf-8"</span>?</span></div></li><li class="li1"><div class="de1"><span class="sc2"><!DOCTYPE html PUBLIC <span class="st0">"-//W3C//DTD XHTML 1.0 Strict//EN"</span> <span class="st0">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span> ></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a> xmlns<span class="sy0">=</span><span class="st0">"http://www.w3.org/1999/xhtml"</span> xml:<span class="kw3">lang</span><span class="sy0">=</span><span class="st0">"ca"</span> <span class="kw3">lang</span><span class="sy0">=</span><span class="st0">"ca"</span>></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>></span></div></li><li class="li1"><div class="de1">      <span class="sc2"><<a href="http://december.com/html/4/element/meta.html"><span class="kw2">meta</span></a> <span class="kw3">http-equiv</span><span class="sy0">=</span><span class="st0">"Content-Type"</span> <span class="kw3">content</span><span class="sy0">=</span><span class="st0">"text/html; charset=utf-8"</span> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1">      <span class="sc2"><<a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>></span>Títol de la web<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a> ></span></div></li><li class="li1"><div class="de1">   <span class="sc-1"><!-- Aquí hi va el contingut de la web --></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>></span></div></li></ol>

Si, en canvi, no volguéssim usar la sintaxi <acronym title="Extensible Markup Language">XML</acronym> i utilitzéssim una <acronym title="Document Type Definition">DTD</acronym> de la família <acronym title="HyperText Markup Language">HTML</acronym>, per exemple la <acronym title="HyperText Markup Language">HTML</acronym> 4.01 Strict, l’estructura del document seria la següent: 

<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>></span></div></li><li class="li1"><div class="de1">     <span class="sc2"><<a href="http://december.com/html/4/element/meta.html"><span class="kw2">meta</span></a> <span class="kw3">http-equiv</span><span class="sy0">=</span><span class="st0">"Content-Type"</span> <span class="kw3">content</span><span class="sy0">=</span><span class="st0">"text/html; charset=utf -8"</span>></span></div></li><li class="li1"><div class="de1">     <span class="sc2"><<a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>></span>Títol de la web<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>></span></div></li><li class="li1"><div class="de1">      <span class="sc-1"><!-- Aquí hi va el contingut de la web --></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>></span></div></li></ol>

  • <img src="../media/ic10m8d1_06.png" class="imgB" title="Logotip de l'extensió Firebug | |BSD, http:commons.wikimedia.orgwikiFile:Firebug_logo.png http:upload.wikimedia.orgwikipediacommonsaadFirebug_logo.png" alt="Logotip de l'extensió Firebug | |BSD, http:commons.wikimedia.orgwikiFile:Firebug_logo.png http:upload.wikimedia.orgwikipediacommonsaadFirebug_logo.png" />
  • Logotip de l'extensió Firebug | |BSD, http:commons.wikimedia.orgwikiFile:Firebug_logo.png http:upload.wikimedia.orgwikipediacommonsaadFirebug_logo.png

Podeu aprendre a instal·lar i fer un ús bàsic de l’extensió Firebug en l’Annex “L’extensió Firebug” del material web d’aquesta unitat.

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)<acronym title="HyperText Markup Language">HTML</acronym> 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 <acronym title="HyperText Markup Language">HTML</acronym> com si és <acronym title="Extensible HyperText Markup Language">XHTML</acronym>, el fitxer on escrivim el codi s’acostuma a desar amb el nom que trobem més escaient i l’extensió .html.

<a id="la_declaracio_de_l_xml_i_la_dtd" >La declaració de l'XML i la DTD</a>

Si usem l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym>, hem d’especificar que el document és <acronym title="Extensible Markup Language">XML</acronym>. 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: 

<ol><li class="li1"><div class="de1"><span class="sc2"><?xml <span class="kw3">version</span><span class="sy0">=</span><span class="st0">"1.0"</span> encoding<span class="sy0">=</span><span class="st0">"utf-8"</span>?></span></div></li></ol>

Si estiguéssim dissenyant un document <acronym title="HyperText Markup Language">HTML</acronym>, aquesta línia l’hauríem d’ometre, ja que els documents <acronym title="HyperText Markup Language">HTML</acronym> no són documents <acronym title="Extensible Markup Language">XML</acronym>.

A tota pàgina web s’hauria d’especificar la <acronym title="Document Type Definition">DTD</acronym> per tal de saber amb quin llenguatge de la família (X)<acronym title="HyperText Markup Language">HTML</acronym> estem treballant. Aquesta especificació ens permet validar la pàgina. En l’actualitat, però, trobem moltes pàgines web que no especifiquen quina <acronym title="Document Type Definition">DTD</acronym> 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 <acronym title="World Wide Web Consortium">W3C</acronym>.

Podeu consultar un llistat de les <acronym title="Document Type Definition">DTD</acronym> de la família (X)<acronym title="HyperText Markup Language">HTML</acronym> a la secció “Adreces d’interès” del material web d’aquesta unitat.

Si usem la <acronym title="Document Type Definition">DTD</acronym> <acronym title="Extensible HyperText Markup Language">XHTML</acronym> Strict 1.0, la segona línia del nostre fitxer .html és la següent: 

<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" </span></div></li><li class="li1"><div class="de1"><span class="sc0">"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd " ></span></div></li></ol>

<a id="l_element_arrel" >L'element arrel</a>

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

<ol><li class="li1"><div class="de1"><span class="sc2"><?xml <span class="kw3">version</span><span class="sy0">=</span><span class="st0">"1.0"</span> encoding<span class="sy0">=</span><span class="st0">"utf-8"</span>?></span></div></li><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" </span></div></li><li class="li1"><div class="de1"><span class="sc0">"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd " ></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a> xmlns<span class="sy0">=</span><span class="st0">"http://www.w3.org/1999/xhtml"</span> xml:<span class="kw3">lang</span><span class="sy0">=</span><span class="st0">"ca"</span> <span class="kw3">lang</span><span class="sy0">=</span><span class="st0">"ca"</span>></span></div></li><li class="li1"><div class="de1">...</div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>></span></div></li></ol>

<a id="la_capcalera_i_el_cos" >La capçalera i el cos</a>

Tot document (X)<acronym title="HyperText Markup Language">HTML</acronym> 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: 

<ol><li class="li1"><div class="de1"><span class="sc2"><<a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<a href="http://december.com/html/4/element/meta.html"><span class="kw2">meta</span></a> <span class="kw3">http-equiv</span><span class="sy0">=</span><span class="st0">"Content-Type"</span> <span class="kw3">content</span><span class="sy0">=</span><span class="st0">"text/html; charset=utf-8"</span> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>></span>La meva pàgina web<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>></span></div></li></ol>

Per veure més usos de la marca <meta> podeu consultar l’annex “Exemples d’ús de l’etiqueta <meta>” del web d’aquesta unitat.

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 <acronym title="Multipurpose Internet Mail Extension">MIME</acronym> (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’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> és un format <acronym title="Extensible Markup Language">XML</acronym>; això vol dir que parlant de manera estricta s’hauria d’enviar amb un tipus <acronym title="Multipurpose Internet Mail Extension">MIME</acronym> relacionat amb l’<acronym title="Extensible Markup Language">XML</acronym> (application/xhtml+xml, application/xml, o text/xml). Malgrat tot, l’<acronym title="Extensible HyperText Markup Language">XHTML</acronym> 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’<acronym title="HyperText Markup Language">HTML</acronym> llegat. Si se segueixen algunes pautes senzilles es pot fer que molts documents <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0 funcionin en navegadors antics. Malgrat tot, els navegadors antics només interpreten el tipus <acronym title="Multipurpose Internet Mail Extension">MIME</acronym> text/html, de manera que s’ha d’emprar aquest tipus si se’ls envia documents <acronym title="Extensible HyperText Markup Language">XHTML</acronym> 1.0. S’ha de tenir present que enviar documents <acronym title="Extensible HyperText Markup Language">XHTML</acronym> als navegadors com a text/html vol dir que aquests navegadors veuran el document com a <acronym title="HyperText Markup Language">HTML</acronym> i no com a <acronym title="Extensible HyperText Markup Language">XHTML</acronym>.

S. Pemberton (ed.). Preguntes més freqüents d’<acronym title="HyperText Markup Language">HTML</acronym> i <acronym title="Extensible HyperText Markup Language">XHTML</acronym>.

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, com podem veure en la <a href="#Figure4">figura</a>.

<a name="Figure4"></a>

<figure> <figcaption>Figura Visualització del contingut de l’element &lt;title&gt; </figcaption><img src="../media/ic10m8d1_07.png" alt="" /></figure>

| |(c) 2012 Mònica Ramírez Arceda Aquesta obra està subjecta a una llicència de Reconeixement-CompartirIgual 3.0 Espanya de Creative Commons. Per veure una còpia de la llicència, visiteu http://creativecommons.org/licenses/by-sa/3.0/es/ o envieu una carta a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

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

<ol><li class="li1"><div class="de1"><span class="sc2"><<a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>></span></div></li><li class="li1"><div class="de1">     <span class="sc-1"><!-- Contingut de la web --></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>></span> </div></li></ol>

Vegem a continuació un resum de les etiquetes que utilitzem per crear l’estructura mínima d’un document (X)<acronym title="HyperText Markup Language">HTML</acronym>:

  • <html>: Element arrel del document.
  • <head>: Capçalera, espai destinat a contenir informació del document.
  • <title>: Títol descriptiu de la pàgina web. Normalment apareix a la barra del navegador, també és el text que s’emmagatzema en els marcadors del navegador (llista d’adreces d’interès).
  • <meta />: Metainformació de la pàgina. Podem posar diverses marques <meta>, que donen informació no visible del document.
  • <body>: Cos o contingut del document.

<a id="estructura_del_document_amb_l_x_html5" >Estructura del document amb l'(X)HTML5</a>

El futur estàndard, l’(X)HTML5, incorpora moltes novetats. Una d’elles és la simplificació de la <acronym title="Document Type Definition">DTD</acronym>.

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

<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>></span></div></li><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>></span></div></li><li class="li1"><div class="de1">    <span class="sc2"><<a href="http://december.com/html/4/element/meta.html"><span class="kw2">meta</span></a> <span class="kw3">http-equiv</span><span class="sy0">=</span><span class="st0">"Content-Type"</span> <span class="kw3">content</span><span class="sy0">=</span><span class="st0">"text/html; charset=utf-8"</span>></span></div></li><li class="li1"><div class="de1">    <span class="sc2"><<a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>></span>Títol de la web<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>></span></div></li><li class="li1"><div class="de1">  <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>></span></div></li><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>></span></div></li><li class="li1"><div class="de1">     <span class="sc-1"><!-- Aquí hi va el contingut de la web --></span></div></li><li class="li1"><div class="de1">  <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>></span></div></li></ol>

Si preferim la sintaxi <acronym title="Extensible Markup Language">XML</acronym>, usarem XHTML5. L’XHTML5 és un llenguatge amb les mateixes etiquetes que l’HTML5, però amb sintaxi <acronym title="Extensible Markup Language">XML</acronym>.

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

<ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a> xmlns<span class="sy0">=</span><span class="st0">"http://www.w3.org/1999/xhtml"</span> xml:<span class="kw3">lang</span><span class="sy0">=</span><span class="st0">"ca"</span> <span class="kw3">lang</span><span class="sy0">=</span><span class="st0">"ca"</span>></span></div></li><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>></span></div></li><li class="li1"><div class="de1">    <span class="sc2"><<a href="http://december.com/html/4/element/meta.html"><span class="kw2">meta</span></a> <span class="kw3">http-equiv</span><span class="sy0">=</span><span class="st0">"Content-Type"</span> <span class="kw3">content</span><span class="sy0">=</span><span class="st0">"text/html; charset=utf -8"</span> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1">    <span class="sc2"><<a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>></span>Títol de la web<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/title.html"><span class="kw2">title</span></a>></span></div></li><li class="li1"><div class="de1">  <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/head.html"><span class="kw2">head</span></a>></span></div></li><li class="li1"><div class="de1">  <span class="sc2"><<a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>></span></div></li><li class="li1"><div class="de1">     <span class="sc-1"><!-- Aquí hi va el contingut de la web --></span></div></li><li class="li1"><div class="de1">  <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/body.html"><span class="kw2">body</span></a>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/html.html"><span class="kw2">html</span></a>></span></div></li></ol>

<a id="llegibilitat_i_organitzacio_del_codi" >Llegibilitat i organització del codi</a>

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)<acronym title="HyperText Markup Language">HTML</acronym> 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.

<a id="comentaris" >Comentaris</a>

En un document (X)<acronym title="HyperText Markup Language">HTML</acronym> 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)<acronym title="HyperText Markup Language">HTML</acronym> és la següent: 

<ol><li class="li1"><div class="de1"><span class="sc-1"><!-- comentari --></span></div></li></ol>

É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: 

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

<a id="sagnat_del_codi" >Sagnat del codi</a>

El codi <acronym title="HyperText Markup Language">HTML</acronym> 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.

Una tècnica per tal de sagnar el codi és que tot el contingut que hi ha entre una etiqueta d’inici i la seva etiqueta de tancament corresponent estigui sagnat. Aquest sagnat es fa sempre, excepte si el contingut és text, ja que això provocaria massa sagnats. Posem un exemple on es veu com l’etiqueta <p> queda sagnada respecte l’etiqueta <div> i, en canvi, el text contingut en el paràgraf no el sagnem: 

<ol><li class="li1"><div class="de1">   <span class="sc2"><<a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a>></span></div></li><li class="li1"><div class="de1">      <span class="sc2"><<a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span>Això és el contingut d'un paràgraf<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a>></span></div></li></ol>

Si els elements són de línia, tampoc s’acostuma a sagnar el codi. Posem un altre exemple:

En l’apartat “Tipus d’elements” d’aquesta unitat podeu veure la definició dels elements de línia i els elements de bloc 

<ol><li class="li1"><div class="de1">   <span class="sc2"><<a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a>></span></div></li><li class="li1"><div class="de1">      <span class="sc2"><<a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span>Això és el contingut d'un paràgraf, ara fem un <span class="sc2"><<a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"http://elquesigui.org"</span>></span> enllaç extern<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a>></span> i continuem escrivint...<span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/p.html"><span class="kw2">p</span></a>></span></div></li><li class="li1"><div class="de1">   <span class="sc2"><<span class="sy0">/</span><a href="http://december.com/html/4/element/div.html"><span class="kw2">div</span></a>></span></div></li></ol>

<a id="organitzacio_dels_fitxers" >Organització dels fitxers</a>

Quan l’aplicació web és molt gran tindrà diversos fitxers amb extensió .html, fulls d’estil amb extensió .css, imatges, vídeos… Si tenim tots aquests fitxers barrejats, la nostra aplicació web tendirà al caos. Hem d’organitzar la nostra aplicació en directoris. Si l’aplicació no és excessivament gran, podem usar la següent organització de directoris: 

  |--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
  |   |...
  |

Com podeu observar, és molt recomanable que cada cop que creem una aplicació web creem un directori principal on desarem tots els nostres fitxers. En el cas de l’exemple l’hem anomenat web. En aquest directori podem posar tots els fitxers .html i crear els directoris que ens calguin per posar els fitxers multimèdia (imatges, àudios i vídeos) i els estils de l’aplicació.

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

És recomanable que el fitxer d’inici de les aplicacions tingui el nom index.html. Això fa que l’usuari no hagi d’escriure el nom del fitxer per accedir-hi.

Si tinguéssim molts fitxers .html ens podria interessar complicar una mica més l’estructura de directoris per tal que els fitxers quedin més organitzats. Posem un altre exemple: 

  |--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
  |   |...
  |

Fixeu-vos que en aquest exemple hem agafat els fitxers .html que tenen alguna cosa en comú i els hem classificat en diferents directoris. També cal destacar que hem posat un fitxer de nom index.html en cada directori, la qual cosa ens serveix per poder accedir mitjançant un enllaç al directori sense haver de posar el nom del fitxer principal. Això no és ni molt menys obligatori, sinó que dependrà de les necessitats de l’aplicació.

</article>

Anar a la pàgina anterior:
<a href="../../../WebContent/u5/referencies.html">Referències</a>
Anar a la pàgina següent:
<a href="../../../WebContent/u5/a1/activitats.html">Activitats</a>
   <footer class="footer">
Aquest document està subjecte a una llicència oberta de Creative Commons, es reserva el dret de reconeixement de l'autoria, d'exigir que no se'n faci cap mena d'ús comercial. Si altereu o transformeu aquesta obra, o en genereu obres derivades, només podeu distribuir l'obra generada amb una llicència idèntica a aquesta.
   </footer>

</body> </html>

Obtingut de «http://wikiserver.infomerce.es/index.php?title=M8_-_Aplicacions_web_/_Apunts_UF5:_HTML_i_CSS&oldid=2378»