Asidai 225x c02 Ud1

Programaci web esttica
Mnica Ramrez Arceda
Xarxes drea local
Xarxes drea local
ndex
Introducci .............................................................................................. Objectius .................................................................................................. 1. Introducci a la programaci web esttica ..................................... 1.1. Funcionament del servei web ................................................... 1.1.1. Classificacions de la programaci web .......................... 1.2. Llenguatges de marques ............................................................ 1.2.1. LHTML ............................................................................ 1.2.2. LXML .............................................................................. 1.2.3. La DTD ............................................................................. 1.2.4. LXHTML .......................................................................... 1.3. El CSS ......................................................................................... 1.4. Validaci ...................................................................................... 2. Els llenguatges de marques: (X)HTML .......................................... 2.1. Estructura d'un document (X)HTML ...................................... 2.1.1. La declaraci XML i la DTD ........................................... 2.1.2. L'element arrel <html> .................................................. 2.1.3. La capalera i el cos ......................................................... 2.1.4. Comentaris ....................................................................... 2.2. Marques del cos del document ................................................. 2.2.1. Tipus delements ............................................................. 2.2.2. Atributs genrics .............................................................. 2.3. Marques de text .......................................................................... 2.3.1. Pargrafs ........................................................................... 2.3.2. Els encapalaments ......................................................... 2.3.3. mfasi ............................................................................... 2.3.4. Citacions ........................................................................... 2.3.5. Salts de lnia ..................................................................... 2.3.6. Separadors ........................................................................ 2.3.7. Acrnims i abreviatures .................................................. 2.3.8. Text preformatat ............................................................. 2.3.9. Codi de programaci ....................................................... 2.3.10.Divisions sense atributs semntics ............................... 2.3.11.Marques antiquades .................................................... 2.4. Enllaos ....................................................................................... 2.4.1. Enllaos a pgines externes ........................................... 2.4.2. Enllaos a pgines locals ................................................ 2.4.3. ncores ............................................................................. 2.5. Imatges ........................................................................................
7 8 9 9 10 11 11 11 14 16 17 17 18 18 18 19 19 20 21 21 21 22 23 23 24 25 26 26 27 27 28 28 29 29 30 30 31 32
2.6. Llistes .......................................................................................... 2.6.1. Llistes ordenades ............................................................. 2.6.2. Llistes desordenades ....................................................... 2.6.3. Llistes de definici .......................................................... 2.6.4. Enniuament de llistes ..................................................... 2.7. Taules .......................................................................................... 2.7.1. Expansi de files i columnes .......................................... 2.8. Formularis ................................................................................... 2.8.1. Propietats d'un formulari ............................................... 2.8.2. Etiquetes dun formulari ................................................ 2.8.3. Atributs genrics dels controls dun formulari ............ 2.8.4. Camps de text .................................................................. 2.8.5. Camps de contrasenya .................................................... 2.8.6. Botons d'opci .................................................................. 2.8.7. Caselles de verificaci ..................................................... 2.8.8. Llistes de selecci ............................................................ 2.8.9. rees de text ..................................................................... 2.8.10.Botons ............................................................................... 2.8.11.Controls ocults ................................................................. 2.9. Marcs ........................................................................................... 2.9.1. Estructura dun web fet amb marcs .............................. 2.9.2. Enniuament de marcs ..................................................... 2.9.3. Modificaci de pgines daltres marcs .......................... 2.9.4. El problema dels marcs .................................................. 2.10.Mapes .......................................................................................... 2.10.1.Mapes gestionats des del client ..................................... 2.10.2.Mapes gestionats des del servidor ................................ 2.11.Objectes ...................................................................................... 2.11.1.Tipus MIME ..................................................................... 2.11.2.Connectors ....................................................................... 2.11.3.Exemples dincorporaci dobjectes genrics en una pgina web ........................................................... 3. Els fulls destils: CSS ........................................................................ 3.1. Ubicaci dels estils ..................................................................... 3.2. Sintaxi bsica de CSS ................................................................. 3.2.1. Les regles arrova .............................................................. 3.2.2. Comentaris ....................................................................... 3.3. Cascada i herncia ..................................................................... 3.3.1. Cascada ............................................................................. 3.3.2. Herncia ........................................................................... 3.4. Selectors ...................................................................................... 3.4.1. Selectors de tipus ............................................................ 3.4.2. Selectors de classes ......................................................... 3.4.3. Selectors d'identificador ................................................. 3.4.4. Selectors d'atribut ............................................................
33 33 33 34 35 35 37 39 41 42 43 43 43 43 44 44 46 47 48 48 49 51 51 52 53 53 55 55 57 58 59 61 62 63 64 65 65 65 66 66 67 67 68 69
Xarxes drea local
3.4.5. Selector universal ............................................................ 3.4.6. Selectors de descendents ................................................ 3.4.7. Selectors de fills ............................................................... 3.4.8. Selectors de germans adjacents ..................................... 3.4.9. Agrupament de selectors ................................................ 3.5. Pseudoclasses i pseudoelements .............................................. 3.5.1. Pseudoclasses .................................................................. 3.5.2. Pseudoelements ............................................................... 3.6. Propietats bsiques de format .................................................. 3.6.1. Mesures i colors ............................................................... 3.6.2. Fonts ................................................................................. 3.6.3. Aspecte del text ................................................................ 3.6.4. Color i fons ....................................................................... 3.7. El model de caixa ....................................................................... 3.8. El format visual dels elements dun document ...................... 3.9. Exemples prctics amb CSS ...................................................... 3.9.1. Fer mens amb llistes ..................................................... 3.9.2. Maquetaci de webs sense s de taules ........................
70 70 71 72 72 73 73 75 76 76 76 78 78 79 82 84 84 86
Xarxes drea local
Xarxes drea local
Introducci
Un dels serveis ms utilitzats a Internet s el servei web. Aquest servei ens ofereix la possibilitat de navegar per multitud de pgines web, que estan formades per un conjunt de documents que poden tenir contingut textual, grfic, udio, animacions, etc. Les tecnologies per confeccionar pgines web on diverses, per en aquesta unitat didctica ens centrarem en la ms bsica: la programaci web esttica. s a dir, aprendrem les tecnologies bsiques per tal de confeccionar pgines web senzilles, sense gaire interacci amb l'usuari, per atractives i accessibles per a aquest. La unitat didctica Programaci web esttica pretn iniciar lalumne en el desenvolupament daplicacions web: saprn a dissenyar aplicacions web esttiques i se nestudia tant lestructura com lesttica. En el nucli dactivitat Introducci a la programaci web esttica es donen les nocions bsiques dall que es coneix com a programaci web. Sofereixen els conceptes genrics de com funcionen les aplicacions web i es fa una descripci genrica breu dels llenguatges de marques ms usats. En el nucli dactivitat Els llenguatges de marques: (X)HTML sanalitza amb profunditat la famlia de llenguatges (X)HTML. Aquests llenguatges sn els que ha dutilitzar el dissenyador de la pgina web per estructurar la informaci que finalment es visualitza en el navegador. Els llenguatges (X)HTML permeten inserir, en els continguts, marques que els navegadors saben interpretar. En el nucli dactivitat Els fulls destils: CSS es presenta el llenguatge CSS, que ens permet fer el disseny esttic de la interfcie web. Per aconseguir aquests objectius, heu de reproduir en el vostre ordinador tots els exemples que sincorporen en el text, per a la qual cosa, en la secci Recursos de contingut, trobareu tots els arxius necessaris, a ms de les activitats i els exercicis dautoavaluaci. Tamb s aconsellable, per descomptat, llegir els annexos.
Xarxes drea local
Objectius
En acabar la unitat didctica, heu de ser capaos del segent: 1. Identificar quan una pgina web compleix els estndards vigents. 2. Elaborar pgines web esttiques a partir del llenguatge de marques (X)HTML i dels fulls destils CSS, amb lajut deines especfiques per crear pgines web.
Xarxes drea local
1. Introducci a la programaci web esttica
La programaci web, lobjectiu de la qual s crear aplicacions web, engloba un ampli ventall de tecnologies que inclou ledici de lestructura de les pgines, el disseny daquestes pgines, la interacci amb lusuari... Tot i que podem tenir aplicacions web locals al nostre ordinador, lestructura daquest tipus daplicacions est pensada perqu sigui una aplicaci remota a la qual podem accedir grcies a un programa (el navegador web).
1.1. Funcionament del servei web

Quan teclegem una adrea web en el nostre programa navegador, obtenim un seguit dinformaci que correspon a la petici feta: text, imatges, vdeos... Per qu est passant realment a la xarxa? Quins elements han intervingut perqu haguem pogut obtenir aquesta informaci? Lesquema bsic duna connexi web consta de dos actors principals: el client i el servidor. Els programes navegadors fan la funci de client: s el navegador qui sollicita fer la connexi web i aix es produeix en el moment en qu teclegem ladrea URL (uniform resource locator). Els servidors sn els ordinadors que tenen laplicaci web i que atenen les peticions dels clients.
Figura 1. Esquema bsic del funcionament del servei web
Logotip del navegador Mozilla Firefox
Quan sestableix una comunicaci entre el client (el navegador) i el servidor se segueixen els passos segents: 1) El client fa una petici en qu demana veure una pgina web. 2) El servidor processa la petici i envia al client els fitxers corresponents a aquesta petici. 3) El client rep la informaci, la interpreta i la mostra de manera adequada perqu lusuari pugui veure-la.
Navegadors En lactualitat disposem de diversos programes navegadors, com per exemple Firefox, Internet Explorer, Opera i Safari, entre daltres.
Xarxes drea local
10
En la figura 1 podeu veure simbolitzat aquest procs. Ara b, sempre que dos ordinadors es comuniquen entre si han dusar un protocol de comunicacions per tal de poder entendres. Aquest protocol ha de ser conegut per les dues mquines.
Un protocol de comunicacions determina com dues mquines o ms es comuniquen entre elles i el format de la informaci que es transmeten.
Els protocols que es fan servir per demanar i rebre pgines web sn lHTTP (hypertext transfer protocol) i lHTTPS (secure hypertext transfer protocol), depenent de si enviem la informaci en clar o encriptada. Aix doncs, la funci principal dun servidor web s rebre peticions HTTP o HTTPS i servir les pgines web corresponents. Els fitxers que rep el client en la comunicaci sn de diversos tipus: fitxers HTML, fulls destils, imatges, fitxers amb codi JavaScript... Els navegadors, doncs, han de saber interpretar tots aquests tipus de fitxers.
1.1.1. Classificacions de la programaci web

La programaci web est en evoluci constant i sentn com a aplicaci web tant una senzilla web esttica on no hi ha interacci amb lusuari com aplicacions complexes en qu intervenen diverses tecnologies. Una possible classificaci de les aplicacions web que hi ha s la segent: 1) Programaci web esttica. s aquella en la qual no interv cap llenguatge de programaci, tot i que paradoxalment lanomenem programaci web esttica. Per confeccionar-la noms susen llenguatges de marques. Sempre que fem una petici a aquest tipus daplicaci obtenim els mateixos resultats. Les tecnologies usades en la programaci web esttica sn (X)HTML i CSS. 2) Programaci web dinmica. s aquella en qu el contingut de la pgina varia segons diversos factors (interactuaci amb lusuari que visita la pgina, interactuaci amb una base de dades del servidor...). Segons si la programaci es fa en el client o en el servidor, podem distingir entre: a) Programaci web en el client. Sn les aplicacions web en qu tot el codi de programaci sexecuta en el client. Les tecnologies usades sn (X)HTML, CSS i JavaScript. b) Programaci web en el servidor. Sn les pgines web en qu el servidor web executa codi de programaci per obtenir la pgina HTML resultant. Les tecnologies usades sn (X)HTML, CSS, PHP, JSP...
AJAX La tecnologia AJAX (asynchronous JavaScript and XML) s una barreja intelligent de la programaci web en el client i de la programaci web en el servidor. Aquesta barreja proporciona pgines web fora espectaculars.
Xarxes drea local
11
Totes aquestes tcniques de programaci web no sn incompatibles i es poden usar conjuntament.
1.2. Llenguatges de marques

Un llenguatge de marques s una manera de codificar un document en qu el text est acompanyat detiquetes (marques) que contenen informaci addicional sobre lestructura del text o la seva presentaci.
1.2.1. LHTML
El llenguatge de marques HTML (hyper text markup language) s el llenguatge de marques predominant de les aplicacions web actuals. Permet descriure tant lestructura com la presentaci dels documents que conformen laplicaci web.
El llenguatge HTML ens permet marcar la nostra informaci de manera que podem incorporar-hi encapalaments, pargrafs, llistes, enllaos, taules, formularis, imatges... El llenguatge de marques HTML t, per, dos grans desavantatges: 1) El fet que es disposi de marques que serveixen per a la presentaci del document fa que es barregi lestructura i la presentaci de la web. Aix resta modularitat a la nostra aplicaci. 2) No t normes molt estrictes de sintaxi. Per solucionar aquests dos problemes va sorgir el llenguatge de marques XHTML (extensible hyper text markup language), que no s altra cosa que aplicar les normes del metallenguatge XML (extensible markup language) al ja existent llenguatge HTML.
1.2.2. LXML
LXML (extensible markup language) s un metallenguatge de marques que ens serveix per estructurar la informaci semnticament, sense tenir en compte la seva aparena final.
Xarxes drea local
12
LXML no ens defineix quines marques podem usar, sin com shan dusar. s a dir, ens diu quina sintaxi hem dusar, siguin quines siguin les marques que usem. Per exemple, si volem fer un smil amb les llenges usades normalment, podrem definir el metallenguatge de les llenges romniques donant com a norma que hem descriure desquerra a dreta, que les frases han de tenir subjecte i predicat, i que podem usar certs signes de puntuaci; no direm, per, quines sn les paraules que podem usar, aix ho definir cadascuna de les llenges. Un document XML est format per nodes. Aquests nodes poden ser de diferents tipus, tal com es pot veure en la taula 1, on es mostren alguns dels tipus de nodes ms importants.
Taula 1. Tipus de nodes XML Tipus delement Elements Atributs Nodes de text Entitats predefinides Comentaris Descripci Sn les marques que permeten identificar i diferenciar les diferents parts de les dades. Serveixen per donar informaci addicional a un element. Sn les dades del document. Serveixen per representar carcters especials. Serveixen per introduir comentaris per al programador Sintaxi
<element></element> <element /> <element atribut=valor></element> <element>text</element> &entitat; 
En la figura 2 es pot veure un exemple de document XML en qu es diferencien els diferents tipus de nodes. En la figura 3 veiem una representaci del mateix document en forma darbre. Els nodes dun document XML estan relacionats entre si. Podem establir diferents relacions: Element arrel: s lelement que engloba tots els altres. En lexemple de la figura 2 lelement arrel s <recepta>. Pares i fills: un element s fill dun altre quan est immediatament dins seu. En lexemple de la figura 2 lelement <nom> s fill de lelement <ingredient> i, per tant, lelement <ingredient> s el pare de lelement <nom>. Germans: dos elements sn germans quan tenen el mateix pare. En lexemple de la figura 2 els elements <titol>, <imatge>, <ingredients> i <preparacio> sn germans.
Xarxes drea local
13
Figura 2. Document XML en qu es mostren els diferents tipus de nodes
Daquesta manera podem entendre un document XML com una estructura en forma darbre, tal com es mostra en la figura 3.
Figura 3. Representaci dun document XML en forma darbre
Els documents XML han de complir les normes de sintaxi segents: Els elements shan de tancar (o amb la marca de tancament <marca></marca>, o tancant-se ella mateixa <marca />): s correcte: <titol>Truita a la francesa</titol> s incorrecte: <titol>Truita a la francesa
Xarxes drea local
14
Els elements han destar 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 danar 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 lXML.
1.2.3. La DTD
Mentre que l'XML ens defineix la sintaxi d'un document, la DTD (document type definition) ens defineix quins sn els elements i atributs permesos d'aquest document, lordre en qu poden anar aquests elements i quins nodes poden anar dins de quins altres. La DTD defineix els elements, atributs i entitats permesos en el document, i a ms indica com podem combinar aquests nodes.
XML Schema Tot i que ls de la DTD est molt ests, hi ha una altra manera de definir els nodes permesos i les seves caracterstiques. Lalternativa s usar XML Schema. Aquesta alternativa ens proporciona ms opcions i ms flexibilitat.
Si ho comparem amb les llenges parlades, en el cas de les llenges romniques, l'XML ens definiria que hem d'escriure d'esquerra a dreta. La DTD, en canvi, ens definiria quines paraules podem usar, s a dir, ens definiria el vocabulari. En la taula 2 sexposen algunes caracterstiques bsiques de la sintaxi duna DTD.
Xarxes drea local
15
Taula 2. Sintaxi bsica duna DTD Sintaxi Descripci Defineix un element que no t contingut. En el document XML apareixer amb una marca que es tancar en ella mateixa (<nom-element />). <!ELEMENT nom-element (#PCDATA)> Defineix un element que cont text. Defineix un element que cont altres elements; aquests elements fills poden portar un modificador que ens indica els cops que poden aparixer: <!ELEMENT nom-element (elem1, elem2,...)> elem: apareix un cop elem*: apareix 0 cops o ms elem+: apareix 1 cop o ms elem?: apareix 0 cops o 1 Defineix un atribut especificant el nom de latribut (nom-atribut) i el nom de lelement al qual pertany latribut (nom-element). Els tipus-atribut ms usats sn els segents: CDATA: text <!ATTLIST nom-element nom-atribut tipus-atribut valor-per-defecte> (valor1|valor2|...): els valors de latribut noms poden ser alguns dels valors enumerats Els valor-per-defecte ms usats sn: valor: especifica el valor que t latribut per defecte #REQUIRED: especifica que latribut s obligatori #IMPLIED: especifica que latribut no s obligatori
<!ELEMENT nom-element (EMPTY)>
Per exemple, per al document XML definit en la figura 2 crearem un document recepta.dtd en qu introduirem la DTD segent:
<!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 ) >
Per com li podem dir a un document XML quina DTD ha d'usar? Podem trobar diversos casos, com figuren en la taula 3.
Taula 3. Com es pot enllaar el document XML amb la DTD que es vol usar On Sintaxi Exemple
La DTD est definida en el mateix document XML.
<!DOCTYPE element-arrel [declaracions]>
<!DOCTYPE recepta [ <!ELEMENT recepta (titol,plat, ingredients,preparacio)> ... <!ELEMENT preparacio (#PCDATA)> ]> <recepta> ... </recepta>
Xarxes drea local
16
On La DTD est definida en un fitxer extern. La DTD est definida en un fitxer extern pblic.
Sintaxi
Exemple
<!DOCTYPE element-arrel SYSTEM "path/nomFitxer.dtd">
<!DOCTYPE recepta SYSTEM "dtds/recepta.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> ... </html>
<!DOCTYPE element-arrel PUBLIC "identificador" "url">
Per exemple, si volgussim usar una DTD que est descrita en un fitxer de nom recepta.dtd, haurem d'incloure una lnia amb la definici de la DTD, desprs de la declaraci de la versi i codificaci del document:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE recepta SYSTEM "recepta.dtd"> ...
!!
Per veure la sintaxi dXML i DTD completa podeu consultar la secci Annexos del web daquest crdit.
Diem que un document valida si est ben format i respecta totes les regles que especifica la DTD que t associada.
1.2.4. LXHTML
Una de les definicions que podem trobar al W3C (World Wide Web Consortium) del llenguatge de marques XHTML s la segent: lXHTML (extensible hyper text markup language) s una versi ms estricta i neta dHTML, que neix precisament amb lobjectiu de reemplaar lHTML davant la seva limitaci ds amb les cada cop ms abundants eines basades en XML. XHTML estn HTML 4.0 combinant la sintaxi dHTML, dissenyat per mostrar dades, amb la dXML, dissenyat per descriure les dades.
W3C El W3C (World Wide Web Consortium) s lorganitzaci internacional ms important que sencarrega de desenvolupar i promocionar els estndards en el mn web.
Hem de tenir en compte que 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 noms la semntica del document, no l'aparena. Per exemple, si volem que el text Fauna i flora a la Garrotxa sigui un encapalament, usarem l'XHTML per fer-ho. Per dir que aquest text s un encapalament no vol dir, per exemple, que el text Fauna i flora de la Garrotxa ha d'aparixer en negreta i mida de lletra 20 (aix seria la seva aparena i per definir-la usarem CSS, cascade style sheets). Quan parlem de la famlia de llenguatges (X)HTML, ens estem referint a dues famlies de llenguatges: la famlia XHTML i la famlia HTML, que es distingeixen per complir o no les normes de sintaxi XML. Cadascuna
Xarxes drea local
17
daquestes dues grans famlies tenen diversos llenguatges de marques definit cadascun dells per la seva DTD (strict, transitional o frameset). Aquests llenguatges sn els segents: HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML 1.1 DTD Si estem fent una web que mant lestructura separada del disseny podem usar les DTD Strict, ja que aquestes DTD no permeten usar gaireb cap marca o atribut que faci referncia a lesttica de la web. En canvi, si la nostra web usa marques o atributs que fan referncia a lesttica de la pgina, ens veiem forats a usar les DTD Transitional. Finalment, si la nostra web est feta amb marcs hem dusar les DTD Frameset.
1.3. El CSS
El CSS (cascading style sheets) s un mecanisme simple que descriu com es mostra un document en la pantalla o com simprimeix, o fins i tot, com es pronuncia la informaci present en el document a travs dun dispositiu de lectura. El CSS sutilitza per donar estil a documents (X)HTML separant el contingut de la presentaci. Els estils defineixen la forma de mostrar els elements HTML i XML.
Exemple daplicaci de CSS Si en un document (X)HTML hem definit que un text s un encapalament, en el document CSS associat podem definir que els tipus de lletra dels encapalaments s verdana de mida 20, que es visualitzen en negreta i que sn de color vermell. Si en el document (X)HTML hem definit que un text s un pargraf, en el document CSS associat podem definir que els pargrafs tindran fons gris i una vora.
1.4. Validaci
Quan escrivim un document amb llenguatge (X)HTML ens hem d'assegurar que hem complert els estndards. Per poder-ho fer W3C ens ofereix un servei de validaci de pgines, en el qual ens diuen si la nostra pgina compleix els estndards i, si no els compleix, quins errors hi hem coms. Tamb existeixen altres eines de validaci, com el programa Tidy, que ens permeten validar el nostre document sense necessitat d'estar en lnia.
Imatge de validaci Quan una web valida, acostuma a posar logos semblants als de la imatge per informar els seus visitants que compleix els estndards.
Xarxes drea local
18
2. Els llenguatges de marques: (X)HTML
Per confeccionar una pgina web esttica s necessari saber com es pot estructurar tota la informaci que ha de contenir laplicaci. Hem de saber, doncs, quins elements podem usar en la famlia de llenguatges (X)HTML, quina sintaxi utilitzen i en quins casos shan dusar.
2.1. Estructura d'un document (X)HTML

Qualsevol pgina (X)HTML t una estructura bsica. El primer que hem de fer s escollir quin llenguatge de la famlia (X)HTML volem usar, aquesta elecci ens limita els elements, els atributs i la sintaxi que hem dusar en la confecci de la web, tot i que les marques ms usades sn comunes a tots els llenguatges de la famlia. En lexemple que mostrem a continuaci sha escollit la DTD (X)HTML 1.0 Strict. La plantilla base que ha de tenir qualsevol document XHTML amb aquesta DTD s la segent:
<?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>Ttol de la web</title> </head> <body >  </body> </html>
!!
Trobareu el codi de tots els exemples en la secci Recursos de contingut del web daquest crdit.
2.1.1. La declaraci XML i la DTD

Si usem XHTML, hem despecificar que el document s XML. Aix es fa a la primera lnia del document, indicant-ne tamb la versi i la codificaci de carcters que estem fent servir:
<?xml version="1.0" encoding="utf-8"?
Si estigussim dissenyant un document HTML, aquesta lnia lhaurem dometre, ja que els documents HTML no sn documents XML. A tota pgina web s'hauria d'especificar la DTD per tal de saber amb quin llenguatge de la famlia (X)HTML estem treballant. Aquesta especificaci
Xarxes drea local
19
ens permet validar la pgina. En l'actualitat, per, trobem moltes pgines web que no especifiquen quin 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 pgina incompleix els estndards proclamats pel W3C. Si usem la DTD XHTML Strict 1.0, la primera lnia del nostre fitxer .html s la segent:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
!!
Per veure una llista de les DTD de la famlia (X)HTML podeu consultar en la web del crdit la secci Annexos del web daquest crdit.
2.1.2. L'element arrel <html>

Tot document XML ha de tenir un element arrel. En el cas de la famlia de llenguatges (X)HTML aquest element arrel s <html>. En el cas particular dXHTML hem d'especificar, a ms, que estem usant XHTML i la llengua del document:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
2.1.3. La capalera i el cos

Tot document (X)HTML t dues seccions principals: la capalera, marcada amb la marca <head> i el cos del document, marcat amb la marca <body>. La capalera cont altres elements que faciliten informaci diversa de la pgina, com el ttol, l'enlla amb altres fitxers relacionats amb el document (fulls d'estils, codi JavaScript...), metainformaci del document... Una capalera mnima pot ser la segent:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>La meva pgina web</title> </head>
La marca <meta> t diferents funcions, en aquest cas diem que el nostre document senviar com a text/html codificat amb UTF-8.
Perqu est perms enviar documents XHTML 1.0 com a text/html? L'XHTML s un format XML; aix vol dir que parlant de manera estricta s'hauria d'enviar amb un tipus de mitj relacionat amb lXML (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 cura 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 noms interpreten el tipus de
!!
Per veure ms usos de la marca <meta>, podeu consultar en la web del crdit la secci Annexos del web daquest crdit.
Xarxes drea local
20
mitj text/html, de manera que s'ha d'emprar aquest tipus de mitj 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 ms freqents d'HTML i XHTML.
La marca <title> ens serveix per posar el ttol de la nostra web. El navegador mostra el contingut d'aquesta marca com a ttol de la finestra o de la pestanya on es mostra el document, com podem veure en la figura 4.
Figura 4. Visualitzaci del contingut de lelement <title>
Desprs de la capalera, tenim l'element <body>, que cont tot el contingut de la web.
<body>  </body>
La taula 4 ens mostra un resum de les marques que utilitzem per crear l'estructura mnima d'un document (X)HTML.
Taula 4. Elements de lestructura dun document (X)HTML Marques Descripci Element arrel de la pgina web. Capalera del document: espai destinat a contenir informaci sobre el mateix document. Ttol descriptiu de la pgina web: normalment apareix a la barra del navegador, tamb s el text que semmagatzema en els marcadors del navegador (llista de preferits). Metainformaci de la pgina: podem posar diverses marques <meta>, que serviran per donar informaci no visible del document. Cos de la web.
<html> </html> <head> </head> <title> </title> <meta /> <body> </body>
2.1.4. Comentaris
En un document (X)HTML podem posar anotacions que no es veuran reflectides quan es miri la web amb el navegador, per que sn tils per al desenvolupador web. La sintaxi dels comentaris amb (X)HTML s la segent:

Xarxes drea local
21
2.2. Marques del cos del document

Dins del cos del document (marcat amb la marca <body>) hem dincloure tot el contingut de la web, s a dir, la informaci que volem que vegi lusuari final de laplicaci web. Disposarem de diferents elements que, amb els seus atributs, ens permetran aconseguir aquest objectiu.
2.2.1. Tipus delements

Els elements (X)HTML fills de lelement <body> es poden classificar en dos tipus: els elements de bloc (block elements) i els elements de lnia (inline elements). Els elements de bloc per exemple, els ttols, els pargrafs, les llistes o les taules sn grans estructures que contenen altres elements de bloc, elements de lnia, o text. Normalment, el navegador els mostra com a blocs independents i separa un bloc d'un altre amb una lnia en blanc. Els elements de lnia per exemple, els hiperenllaos, les citacions o les imatges sn petites estructures que representen o descriuen petits trossos de text o dades. Poden contenir noms text o altres elements de lnia. Normalment, el navegador mostra els elements de lnia un darrere l'altre, en lnia, dins de l'element de bloc que els cont.
2.2.2. Atributs genrics

Les marques poden tenir atributs que acaben de definir lelement. Hi ha una srie d'atributs comuns a la majoria d'elements i que detallem a continuaci: Atributs core: sn atributs genrics. id: identifica lelement. No hi poden haver dos elements en una mateixa pgina amb el mateix id. class: serveix per associar un element a una classe. Ms dun element pot estar en una mateixa classe. Ens s molt til a lhora de definir els estils duna pgina, ja que podem especificar caracterstiques comuns a tots els elements que pertanyin a la mateixa classe. style: susa per definir lestil de lelement. title: susa per posar un text amb una informaci breu de lelement. Molts navegadors mostren aquest text quan es passa per damunt de lelement.
Xarxes drea local
22
Atributs de llenguatge: ens especifiquen diferents caracterstiques del llenguatge de l'element. lang: especifica el llenguatge de lelement. dir: especifica la direcci de lectura. Atributs devent: sn atributs que ens serveixen per associar una acci per fer quan es produeix alguna interacci de lusuari cap a lelement que t aquest atribut. Aquests atributs sn molt tils quan s'usa el llenguatge de programaci JavaScript: onclick: lacci es produeix quan fem un clic amb el ratol damunt de lelement. ondblclick: es fa doble clic amb el ratol. onmousedown: es prem el bot del ratol. onmouseup: es deixa de prmer el bot del ratol. onmouseover: estem amb el ratol fora dun element i el movem de manera que passem a estar damunt de lelement. onmousemove: es mou el ratol per damunt de lelement. onmouseout: quan estem amb el ratol damunt d'un element i el movem de manera que deixem destar al damunt. onkeypress: es prem una tecla i es deixa anar damunt de lelement. onkeydown: es prem una tecla damunt de lelement. onkeyup: es deixa anar una tecla damunt de lelement.
2.3. Marques de text

Quan la informaci que volem marcar s text, volem diferenciar les parts daquest text per tal de denotar-ne la major o menor importncia, aclarir si una part de text s una citaci, si hi volem donar ms o menys mfasi... En la taula 5 es pot veure un resum de les marques de text ms importants.
Taula 5. Marques per a text Marca <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h5> </h6> <p> </p> Bloc Pargrafs Bloc Encapalaments Tipus Descripci
Xarxes drea local
23
Marca <br /> <hr /> <em> </em> <strong> </strong> <blockquote></blockquote> <q> </q> <cite> </cite> <acronym> </acronym> <abbr> </abbr> <pre> </pre> <code> </code> <samp> </samp> <kbd> </kbd> <var> </var> <div> </div> <span> </span>
Tipus Bloc Bloc Lnia Lnia Bloc Lnia Lnia Lnia Lnia Bloc Lnia Lnia Lnia Lnia Bloc Lnia Salt de lnia Lnia separadora Text amb mfasi
Descripci
Text amb molt mfasi Citaci de tipus bloc Citaci de tipus lnia Font de la citaci Acrnim Abreviaci Text preformatat Codi de programaci Sortida dun programa Text per introduir per un usuari Variable o parmetre dun programa Marca de tipus bloc sense significat semntic Marca de tipus lnia sense significat semntic
2.3.1. Pargrafs
Entenem per pargraf un conjunt de frases que estan relacionades entre si. Els pargrafs sn elements de tipus bloc i la marca que s'usa s la marca <p>. Si, per exemple, tenim un pargraf que ens explica qu s el llenguatge XHTML, el marquem de la manera segent:
<p> L'XHTML (acrnim de eXtensible Hyper Text Markup Language) s el llenguatge de marques pensat per substituir l'HTML. L'XHTML t, bsicament, les mateixes funcionalitats que l'HTML noms que compleix les especificacions ms estrictes de l'XML. Per exemple totes les marques s'han de tancar apropiadament i han d'estar escrites en minscules. </p>
2.3.2. Els encapalaments

Els llenguatges de marques (X)HTML ens permeten crear sis nivells d'encapalament amb les marques <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. Tots aquests element sn de tipus bloc.
Xarxes drea local
24
A continuaci veiem un fragment de document XHTML en qu ens expliquen diverses caracterstiques daquest metallenguatge. Fixem-nos en les marques dencapalament:
<h1>XML</h1> <p>XML, de langls eXtensible Markup Language (llenguatge de marques extensible), s un metallenguatge extensible, detiquetes,...</p> <h2>Histria</h2> <p>XML prov dun llenguatge inventat per IBM als anys setanta, anomenat GML (General Markup Language), i que va ser creat per la necessitat que tenia lempresa demmagatzemar grans quantitats dinformaci. Aquest llenguatge...</p> <h2>Parts dun document XML</h2> <h3>Prleg</h3> <p>Tot i no ser obligatori, els documents XML poden comenar amb unes lnies que descriuen la versi XML, el tipus de document...</p> <h3>Cos</h3> <p>A diferncia del prleg, el cos no s opcional en un document XML. Ha de contenir un nic element arrel... </p>
En la figura 5 podeu veure com visualitzaria un navegador aquesta pgina XHTML. Fixem-nos que, normalment, els navegadors posen un estil per defecte a cadascuna de les marques. Aix doncs, el text marcat amb <h1> s ms gran que el marcat amb <h2>, aquest s ms gran que el marcat amb <h3> i aix successivament.
Figura 5. Exemples de marques dencapalament
2.3.3. mfasi
Quan volem donar mfasi a una part de text perqu volem destacar-ne la importncia, tenim a la nostra disposici dues marques. La marca
Xarxes drea local
25
<em> serveix per donar mfasi i la marca <strong> per donar molt mfasi. Imaginem que tenim un pargraf en el qual volem destacar algunes de les paraules que cont:
<p>L'XHTML t, bsicament, les <em>mateixes funcionalitats</em> que l'HTML noms que <strong>compleix les especificacions ms estrictes</strong> de l'XML.</p>
Per defecte, la majoria de navegadors mostren el text marcat amb <em> en lletra cursiva i el text marcat amb <strong> amb lletra negreta, com es veu en la figura 6.
Figura 6. Exemple de marques dmfasi
2.3.4. Citacions
Quan volem fer referncia a un text que no hem escrit nosaltres hem de fer servir les citacions. Tenim tres marques diferents per descriure-les: <blockquote>, <q> i <cite>. Si la citaci s tot un pargraf la marquem amb la marca <blockquote>. En canvi, si la citaci est enmig d'un element de bloc (per exemple, dins dun pargraf) usem la marca <q>, que s un element de lnia. Finalment, la marca <cite> ens serveix per marcar l'origen de la citaci (autor, ttol...). Posem un exemple ds daquestes marques: imaginem que estem fent una web on volem posar una citaci de lescriptor Manuel de Pedrolo:
<p> La frase <q>En cap moment no es pot dir <em>per sempre</em></q> de l'escriptor <cite>Manuel de Pedrolo</cite> apareix en el seu llibre <cite>Diari 1986</cite>. Aqu tenim la cita sencera: </p> <blockquote> <p> En cap moment no es pot dir <em>per sempre</em>. En canvi, sempre hi ha un moment en qu cal dir <em>mai ms</em>. Per: no s el mai ms un per sempre? Tanmateix, el per sempre se situa en el temps, mentre el mai ms s intemporal. </p> </blockquote>
Xarxes drea local
26
Cal destacar que dins la marca <blockquote> no podem escriure text directament sin que hem dafegir una altra marca de bloc (<p>, <div>...). La figura 7 ens mostra el text anterior interpretat per un navegador.
Figura 7. Exemple de marques per a citacions
2.3.5. Salts de lnia

Si volem forar un salt de lnia podem usar la marca <br />. No hem d'abusar d'aquesta marca i noms lhem dusar en els casos necessaris. Per exemple, sha de forar un salt de lnia en cada vers dun poema o b en les lnies duna can. En canvi, no s'ha d'usar per deixar ms espai entre pargrafs ni per simular pargrafs (aix ho farem amb CSS). Posem, per exemple, un fragment duna poesia de Salvador Espriu:
<p> Darrera aquesta porta visc, <br /> per no s <br /> si en puc dir vida. </p>
El navegador ens fa un salt de lnia cada cop que troba la marca <br /> tal com podem veure en la figura 8.
Figura 8. Exemple amb marca per al salts de lnia
2.3.6. Separadors
Si volem marcar una separaci podem usar la marca <hr />, que ens crea una barra horitzontal. Tot i aix, com que ens s molt fcil posar lnies separadores amb CSS, aquesta marca est caient en dess.
Xarxes drea local
27
2.3.7. Acrnims i abreviatures

Si en un text trobem un acrnim o una abreviatura tamb tenim les marques adequades per senyalar-ho. Per marcar que un text s un acrnim fem servir la marca <acronym>. Per a les abreviatures usem la marca <abbr>. Posem un exemple ds:
<p> El meu ordinador t 512 <abbr title="MegaBytes">MB</abbr> de memria <acronym title="Random Access Memory">RAM</acronym>. </p>
En la figura 9 veiem com ens mostraria aquest text un navegador.

Figura 9. Exemple de marques per a acrnims i abreviatures
2.3.8. Text preformatat

Si volem posar un fragment de text tal com est escrit en el fitxer de text (X)HTML, hem d'usar la marca <pre> que ens indica que aquell fragment de text est preformatat. Aquesta marca fa que tot all que hi estigui contingut aparegui exactament igual en el navegador. s a dir, respecta els espais, salts de lnia... Veiem, com a exemple, que volem dibuixar amb carcters una estructura de directoris. El codi s el segent:
<pre> public_html/ | |__ css/ | |_ estil.css |__ js/ |__ img/ |__ modul_1/ |__ index.html |__ seccions |_ seccio1.html |_ seccio2.html </pre>
Aquest codi es visualitza com veiem en la figura 10.

Figura 10. Exemple de text preformatat
Xarxes drea local
28
2.3.9. Codi de programaci

Si en una pgina web volem incloure codi de programaci, tenim diverses marques que ens ajuden a formatar aquest codi. A continuaci sexposen aquestes marques i ls que tenen: La marca <code> ens serveix per marcar codi de programaci en si. La marca <samp> serveix per posar el text obtingut en la sortida d'un programa. La marca <kbd> susa per dir a lusuari quin text ha de teclejar. La marca <var> serveix per marcar variables o parmetres de programes. Tots aquests elements sn elements de lnia. En les lnies de codi segents podem veure com es poden usar les marques descrites:
<p>En prmer el bot ens apareixer el text <samp>Introdueix el teu nom:</samp></p> <p>La lnia de codi <code>var <var>nom</var> = prompt("Introdueix el teu nom:","");</code> fa que l'aplicaci web ens demani el nostre nom i el desa a la variable <var>nom</var>.</p> <p>Recordeu que per tancar la finestra podem usar la combinaci de tecles <kbd>Alt</kbd> + <kbd>F4</kbd></p>
Aquest codi el podem veure visualitzat en un navegador en la figura 11.

Figura 11. Exemple amb marques per representar codi de programaci
2.3.10. Divisions sense atributs semntics

Hi ha dues marques que no tenen un significat semntic concret. Aix ens serveix per delimitar un tros de text o dades que no s'adeqen a cap de les marques existents. Per crear un element de bloc genric usem la marca <div> i per crear un element de lnia genric usem la marca <span>. Si, per exemple, volem maquetar la nostra pgina web, hem de marcar les diverses capes de qu disposem: la capalera, la barra lateral, el cos de la
Xarxes drea local
29
web i el peu de pgina. Per definir cadascuna daquestes capes, podem usar la marca <div>:
<div id="capcalera"> 
<div id="lateral">  </div> <div id="contingut">  </div> <div id="peu">  </div>
(informaci sobre drets d'autoria, crdits, aspectes
2.3.11. Marques antiquades

En documents (X)HTML podem trobar marques que, tot i estar permeses, ens hem d'acostumar a no usar, ja que fan referncia a la presentaci del document i no a lestructura. Aquestes marques sn, entre altres: <b> (negreta), <i> (cursiva), <u> (subratllat), <font> (tipus de font), <center> (centrar text)... Tamb hi ha diversos atributs de marques correctes que haurem devitar, ja que tamb es poden reemplaar amb ls de CSS. Per exemple, els atributs align, border...
2.4. Enllaos
L'xit de la WWW (World Wide Web) s el fet de poder navegar, s a dir, de poder saltar dun document a un altre a partir denllaos. El sistema que ens permet aquesta navegaci sanomena hipertext.
Lhipertext L'hipertext s un sistema dorganitzaci i presentaci de dades que permet a lusuari de moure's amb gran facilitat entre tems relacionats. Gran Diccionari de la llengua catalana, Gran Enciclopdia Catalana
La marca que t l(X)HTML per crear hiperenllaos s la marca <a>. Els elements <a> sn elements de lnia, ja que podem posar enllaos envoltats de text. Per indicar quin s el dest del nostre enlla usem latribut href. Tamb s convenient usar latribut genric de tipus core title per posar una breu descripci de lenlla.
Destins dels enllaos El dest d'un enlla no ha de ser sempre un altre document (X)HTML. Pot ser una imatge, un fitxer de so, un fitxer de vdeo...
Xarxes drea local
30
2.4.1. Enllaos a pgines externes

Si volem fer un enlla a una pgina externa a la nostra aplicaci web hem de saber la URL completa del document al qual volem fer lenlla. Imaginem que volem fer un enlla a un article que es pot trobar a la URL http://alistapart.com/articles/previewofhtml5, per que el text que volem que aparegui en el navegador s simplement HTML 5. El codi que hem dintroduir s el segent:
<p> <a href="http://alistapart.com/articles/previewofhtml5" title="Article HTML 5">HTML 5</a> </p>
2.4.2. Enllaos a pgines locals

Si lenlla que volem fer est dirigit a un document (X)HTML local, s a dir, a un document que pertany a la mateixa aplicaci web, posem, com a valor de latribut href, el cam relatiu al fitxer al qual volem fer lenlla. Posem com a exemple diferents enllaos, dins duna mateixa aplicaci, que van a les diferents seccions del lloc web. Posem tamb un ltim enlla que va a una pgina externa a la nostra aplicaci:
<div id="menu"> <a href="index.html" title="Tornar a la pgina d'inici">Inici</a> <a href="fotos.html" title="Fotos de la web">Veure les fotos</a> <a href="seccions/contacta.html" title="Formulari de contacte">Contacte</a> <a href="http://ca.wikipedia.org" title="Enlla a la Viquipdia">Vikipdia</a> </div>
La gran majoria de navegadors visualitzarien el codi anterior com es reflecteix en la figura 12. En la majoria de navegadors podem veure la URL dest a la barra destat del navegador, quan ens situem damunt de lenlla.
Figura 12. Exemple denlla a pgines locals
Xarxes drea local
31
2.4.3. ncores
Alguns documents (X)HTML sn molt extensos i ens pot interessar navegar en la mateixa pgina. Per poder fer aix hem de posar unes marques que denotin els punts on volem anar (ncores) i crear enllaos cap a aquests punts. Els punts on volem anar sanomenen ncores i per tal de crear-les susa l'atribut id de lelement. Si, per exemple, volem fer una ncora a un element <h2> hem descriure el codi segent:
<h2 id="seccio1">Segona secci</h2>
ncores amb atribut name Les ncores tamb es poden fer usant la marca <a> amb latribut name: <a name="seccio1"/> Aquest mtode, per, est obsolet.
Un cop tenim feta l'ncora hi podem enllaar des de qualsevol punt del text fent un enlla a lncora. Els enllaos a ncores es caracteritzen perqu el dest es denota amb el valor de latribut id de lelement al qual volem enllaar precedit del carcter #. Si volem enllaar a lncora creada en lexemple anterior escriurem, doncs, el codi segent:
<a href="#seccio1" title="Secci 1">Anar a la secci 1</a>
Imaginem un text molt llarg amb diferents seccions. Per tenir una bona navegabilitat podem crear un petit ndex a linici del document que tingui enllaos cap a les diferents parts del document. A ms, tamb podem fer enllaos que ens condueixin a linici del document:
<h1 id="dalt">Seccions</h1> <div id="menu"> <a href="#seccio1" title="Secci 1">Anar a la secci 1</a> <a href="#seccio2" title="Secci 2">Anar a la secci 2</a> <a href="#seccio3" title="Secci 3">Anar a la secci 3</a> </div> <h2 id="seccio1">Secci 1</h2> <p>...</p> <p><a href=#dalt" title="A dalt">Anar a dalt</a></p> <h2 id="seccio2">Secci 2</h2> <p>...</p> <p><a href="#dalt" title="A dalt">Anar a dalt</a></p> <h2 id="seccio3">Secci 3</h2> <p>...</p> <p><a href="#dalt" title="A dalt">Anar a dalt</a></p>
Si el que volem s enllaar a una ncora des dun altre document podem fer el segent:
<a href="seccions.html#seccio1" title="Secci 1">Anar a la secci 1</a>
Xarxes drea local
32
2.5. Imatges
Les imatges sn un recurs molt utilitzat en el desenvolupament web. A part de fer ms atractiva la nostra aplicaci, ens permeten donar informaci duna manera visual. Tot i aix, hem de vigilar, no fos cas que hi hagus un excs dimatges: hem danar amb cura tant amb el nombre dimatges, com amb la mida daquestes imatges. Lexcs d'imatges far que la pgina sigui massa carregada i desagradable estticament, i el pes daquestes imatges pot fer que la navegaci per la nostra aplicaci sigui massa lenta. La marca que ens serveix per inserir una imatge s la marca <img>. Es tracta dun element de lnia que no t marca de tancament: es tanca en ella mateixa. Latribut src ens servir per dir on est ubicada la imatge (podem posar una URL externa o el cam del fitxer, si disposem de la imatge localment). Tamb usarem latribut alt, que ens servir per posar un text alternatiu, en el cas que el navegador no pogus accedir a la nostra imatge. Si, per exemple, volem inserir una imatge que tenim al directori imatges que es diu logo.png i, si no es pot visualitzar aquesta imatge, volem que surti el text Logo de la web, hem descriure el codi segent:
<img src="imatges/logo.png" alt="Logo de la web" />
En el cas que vulguem que una imatge sigui un enlla haurem denniuar correctament les marques <a> i <img>. Per exemple, si volem incorporar el logotip del W3C per destacar que la nostra pgina compleix els estndards i, a ms, volem enllaar aquesta imatge cap al validador en lnia que ens ofereix el W3C (i aix mostrar que realment el nostre document s vlid), posarem el codi segent:
<div id="validacio"> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" /> </a> </div>
En la figura 13 podem veure com es representa el codi anterior en el navegador.

Figura 13. Exemple dimatge amb enlla
Xarxes drea local
33
2.6. Llistes
Les llistes sn el recurs que ens serveix per fer una enumeraci. Hi ha tres tipus de llista: les llistes ordenades, les llistes desordenades i les llistes de definici.
2.6.1. Llistes ordenades

Les llistes ordenades sn les llistes en qu necessitem que els elements estiguin numerats. Per marcar linici i el final de la llista usem la marca <ol> (ordered list) i per marcar cada element de la llista usem la marca <li> (list item). Imaginem que estem fent una recepta de cuina i volem enumerar els passos que hem de seguir. El codi seria el segent:
<h2>Preparaci</h2> <ol> <li>Batre els ous</li> <li>Escalfar l'oli en una paella</li> <li>Tirar els ous batuts a la paella</li> <li>Embolicar la truita</li> </ol>
En la figura 14 podem veure la visualitzaci de lexemple en un navegador, juntament amb una llista desordenada.
Figura 14. Exemple de llistes
2.6.2. Llistes desordenades

Les llistes desordenades sn les llistes en qu no necessitem que els elements estiguin numerats, s a dir, no cal tenir en compte lordre de lenumeraci. Per marcar linici i el final de la llista usem la marca <ul> (unordered list) i per marcar cada element de la llista usem la marca <li> (list item).
Xarxes drea local
34
Si, per exemple, volem llistar tots els ingredients necessaris per fer una truita a la francesa, ho codifiquem de la manera segent:
<h2>Ingredients</h2> <ul> <li>Ous</li> <li>Sal</li> <li>Oli</li> </ul>
En la figura 14 podem veure la visualitzaci daquesta llista no numerada, juntament amb la preparaci de la truita, que s una llista numerada.
2.6.3. Llistes de definici

Les llistes de definici es caracteritzen per ser una enumeraci de definicions de termes. Per tant, els tems de les llistes de definici estan formats per dos elements: el terme i la definici daquest terme. Per marcar linici i el final de la llista usem la marca <dl> (definition list), per a cadascun dels termes susa la marca <dt> (definition term) i per a cadascuna de les definicions susa la marca <dd> (definition description). Si volem definir els termes HTML, XML i XHTML podem usar aquest tipus de llistes, que es visualitzen com mostra la figura 15:
<dl> <dt>HTML</dt> <dd>Llenguatge de marques dissenyat per estructurar textos i relacionar-los en forma dhipertext.</dd> <dt>XML</dt> <dd>Metallenguatge extensible, d'etiquetes. No s realment un llenguatge en particular, sin una manera de definir llenguatges per a diferents necessitats.</dd> <dt>XHTML</dt> <dd>Llenguatge de marques amb les mateixes funcionalitats que l'HTML i que compleix les especificacions de l'XML.</dd> </dl>
Figura 15. Llista de definici
Xarxes drea local
35
2.6.4. Enniuament de llistes

Si volem fer llistes complexes, s a dir, inserir llistes dins daltres llistes, tamb podem fer-ho. Noms hem de vigilar dobrir i tancar les marques correctament: si volem encapsular una llista, ja sigui numerada o no numerada, aquesta llista ha destar dins dun tem (<li>) de la llista mare. Com a exemple, podem pensar en unes instruccions bsiques de com sha dinstallar una impressora:
<h1>Instruccions d'installaci d'una impresora.</h1> <ol> <li>Obrir l'embalatge. <ol> <li>Mirar el contingut del material: <ul> <li>una impresora</li> <li>tinta negra</li> <li>tinta color</li> </ul> </li> <li>Treure el precinte de les tintes.</li> </ol> </li> <li>Endollar la impressora.</li> <li>Posar les tintes: <ul> <li>Posar la tinta negra</li> <li>Posar la tinta de color</li> </ul> </li> <li>Imprimir.</li> </ol>
Aquest exemple es veuria com es mostra en la figura 16.

Figura 16. Exemple denniaument de llistes
2.7. Taules
Les taules sn un recurs que ens permet mostrar informaci tabulada en files i columnes. Molts llocs web usen les taules per maquetar la seva es-
Xarxes drea local
36
tructura, s a dir, si, per exemple, la web t un men lateral i un cos, es codifica una taula de dues columnes i es posa el contingut de la web en les celles daquesta taula. Hem devitar aquesta prctica, ja que complica el codi innecessriament. Per maquetar fem s dels elements <div> conjuntament amb fulls d'estils CSS. Les marques bsiques per fer taules sn les que trobareu en la taula 6.
Taula 6. Marques per a taules Marca Descripci Atributs destacats summary: petit resum del propsit de la taula width: amplada de la taula border: indica la mida de la vora de la taula cellpadding: indica lespai entre les vores de la cella fins al contingut de la cella cellspacing: indica lespai entre celles
<table>
Taula
<caption> <tr> <td> <th> <thead> <tfoot> <tbody>
Ttol associat a la taula Fila Cella Cella capalera Ens permet agrupar les diferents files de la taula que formen la capalera daquesta taula. Ens permet agrupar les diferents files de la taula que formen el peu daquesta taula. Ens permet fer diferents agrupacions de files de la taula. align: alineaci horitzontal valign: alineaci vertical align: alineaci horitzontal valign: alineaci vertical rowspan: nombre de files dexpansi colspan: nombre de columnes dexpansi
Per realitzar una taula, hem de marcar-ne linici i el final amb la marca <table>. Dins daquest element hem de posar tants elements <tr> com files tingui la taula. Finalment, dins de cada element <tr> hem de posar tants elements <td> com columnes tingui la taula. Si les celles sn celles de capalera, s a dir, tenen certa rellevncia, enlloc de posar la marca <td> posem la marca <th>. A vegades, voldrem agrupar les files en grups, per denotar quines files formen la capalera de la taula, quines el peu i si hi diferents agrupacions en les files que conformen el cos de la taula. Per tal de fer aix, usem les marques <thead>, <tfoot> i <tbody>, respectivament. Imaginem que volem fer una taula de 7 files i 2 columnes. La primera fila s la capalera de la taula, les cinc segents conformen el cos de la taula i lltima s el peu. Tindrem el codi segent, el resultat del qual el podem veure en la figura 17:
<table border="1"> <thead> <tr> <th>Nom</th>
Grups de columnes Igual que podem fer agrupacions de files duna taula, tamb es poden agrupar les columnes duna taula usant les marques <colgroup> i <col>.
Xarxes drea local
37
<th>Descripci</th> </tr> </thead> <tfoot> <tr> <th>Nmero de programadors</th> <th>5</th> </tr> </tfoot> <tbody> <tr> <td>Richard Stallman</td> <td>Emacs, gcc, gdb, fundador del projecte GNU,...</td> </tr> <tr> <td>Linus Torvalds</td> <td>Autor del nucli de Linux</td> </tr> <tr> <td>Donald Becker</td> <td>Drivers d'Ethernet per a Linux</td> </tr> <tr> <td>Tim Berners-Lee</td> <td>Inventor del World Wide Web</td> </tr> <tr> <td>Brian Behlendorf</td> <td>Apache</td> </tr> </tbody> </table>
Figura 17. Taula simple
Observem que, en el codi, la fila que fa de peu de pgina la podem escriure abans que les que fan de cos, ja que el navegador ja sap que s peu de taula, ats que est marcat amb la marca <tfoot>.
2.7.1. Expansi de files i columnes

Les taules simples ens permeten fer una quadrcula de x files i y columnes, per ens podem trobar amb la necessitat de voler fusionar celles tant horitzontalment com verticalment. Per aconseguir aquest objectiu la marca <td> disposa de dos atributs: colspan i rowspan.
Xarxes drea local
38
Latribut colspan serveix per fusionar dues celles o ms horitzontalment. Latribut es posa a la cella que ha docupar ms duna columna i se li dna com a valor el nombre de columnes que ha docupar. Latribut rowspan serveix per fusionar dues celles o ms verticalment. Latribut es posa a la cella que ha docupar ms d'una fila i se li dna com a valor el nombre de files que ha d'ocupar. Imaginem que volem posar lhorari escolar que es veu en la figura 18. Per aconseguir-ho hem descriure el codi segent:
<table summary="Horari" border="1"> <caption>Horari</caption> <thead> <tr> <th> </th> <th>Dilluns</th> <th>Dimarts</th> <th>Dimecres</th> <th>Dijous</th> <th>Divendres</th> </tr> </thead> <tbody> <tr> <td>16.00-16.55</td> <td rowspan="2">Bases de dades</td> <td rowspan="2">Xarxes</td> <td rowspan="2">Programaci Estructurada</td> <td>Xarxes</td> <td>Bases de dades</td> </tr> <tr> <td>16.55-17.50</td> <td rowspan="2">Sistemas Operatius</td> <td rowspan="2">Xarxes</td> </tr> <tr> <td>17.50-18.45</td> <td>Programaci Estructurada</td> <td>Programaci Estructurada</td> <td>Bases de dades</td> </tr> </tbody> <tbody> <tr> <td>18.45-19.15</td> <td colspan="5">Pati</td> </tr> </tbody> <tbody> <tr> <td>19.15-20.10</td> <td>Programaci Estructurada</td> <td>Programaci Estructurada</td> <td rowspan="2">FOL</td> <td rowspan="2">Programaci Estructurada</td> <td rowspan="2">RAT</td> </tr> <tr> <td>20.10-21.05</td> <td rowspan="2">Sistemas Operatius</td>
Xarxes drea local
39
<td>Sistemas Operatius</td> </tr> <tr> <td>21.05-21.45</td> <td> </td> <td> </td> <td>Tutoria</td> <td> </td> </tr> </tbody> </table>
Figura 18. Taula amb expansions de files i columnes
2.8. Formularis
Els formularis web ens serveixen per interactuar amb lusuari i perqu aquest usuari ens pugui transmetre informaci. Aquesta informaci es pot processar de diferents maneres, segons les necessitats de laplicaci web. Tcnicament, un formulari no s altra cosa que un fragment de codi (X)HTML que cont uns elements caracterstics anomenats controls. Tenim diversos tipus de control: camps de text, camps de contrasenya, botons dopci (radio buttons), caselles de verificaci (checkbox), camps per introduir fitxers, llistes de selecci, rees de text i botons. En la figura 19 podeu veure un formulari amb tots aquests controls.
Figura 19. Controls dun formulari
Xarxes drea local
40
Cadascun dels controls dun formulari ha de tenir latribut name, amb el qual sidentifica la dada que es vol enviar. Posem un exemple: tenim un camp de text lobjectiu del qual s que lusuari introdueixi el seu nom i suposem que lusuari introdueix Pau. Si el valor de latribut name del camp de text s nom (name=nom), la informaci que s'enviar s nom=Pau. Fixem-nos en el codi daquest formulari:
<h1>Contacta amb nosaltres</h1> <form action="processa.html" method="get"> <fieldset> <legend>Dades personals</legend> <div> <label for="nom">Escriu el teu nom: </label> <input type="text" name="nom" size="30" maxlength="100" id="nom"/> </div> <div> <label for="contrasenya">Escriu la teva contrasenya: </label> <input type="password" name="contrasenya" size="10" maxlength="15" id="contrasenya" /> </div> <div> Edat: <input <label <input <label <input <label </div>
type="radio" name="edat" id="edat_menor" value="menor" /> for="edat_menor">Menys de 18 anys </label> type="radio" name="edat" id="edat_major" value="major" checked="checked" /> for="edat_major">De 18 a 65 anys </label> type="radio" name="edat" id="edat_jubilat" value="jubilat" /> for="edat_jubilat">Ms de 65 anys</label>
<div> <label for="municipi">On vius? </label> <select name="municipi" id="municipi"> <option value="Abella de la Conca">Abella de la Conca</option> <option value="Abrera">Abrera</option> <option value="ger">ger</option> <option value="Agramunt">Agramunt</option> <option value="Aguilar de Segarra">Aguilar de Segarra</option> <option value="Agullana">Agullana</option> <option value="Aiguafreda">Aiguafreda</option> ... </select> </div> <div> <label for="foto">Envia'ns la teva foto: </label><input type="file" name="foto" id="foto" /> </div> </fieldset> <fieldset> <legend>Aficions</legend> <div> Escull les teves aficions: <input type="checkbox" name="llegir" id="llegir" value="si" /> <label for="llegir">Llegir</label> <input type="checkbox" name="cine" id="cine" value="si" /> <label for="cine">Anar al cine</label> <input type="checkbox" name="trekking" id="trekking" value="si" /> <label for="trekking">Trekking</label>
Xarxes drea local
41
</div> </fieldset> <fieldset> <legend><label for="comentari">Comentaris</label></legend> <div> <textarea name="comentari" id="comentari" cols="30" rows="5">Escriu aqu els teus comentaris</textarea> </div> </fieldset> <div> <input type="reset" value="Esborrar formulari" /> <input type="submit" value="Enviar formulari" /> </div> </form>
2.8.1. Propietats dun formulari

Per marcar el codi (X)HTML que forma part dun formulari susa la marca <form>. Aquesta marca t diferents atributs, que ens serveixen per dir com volem trametre la informaci que omple lusuari. A continuaci senumeren cadascun daquests atributs: Atribut action: el valor daquest atribut s el dest on ha danar a parar la informaci que lusuari ha posat en el formulari. Normalment s una URL amb lscript que ha de processar les dades del formulari, per tamb podem fer que la informaci es dirigeixi a una adrea de correu electrnic. Atribut method: ens permet dir de quina manera enviem la informaci. Tenim dues possibilitats: si el valor de l'atribut s get enviem la informaci juntament amb la URL de dest. Si el valor de latribut method s post, la informaci senvia dins de la capalera HTTP que fa la petici. A continuaci es mostra un formulari amb dos camps de text que demanen a lusuari el seu nom i contrasenya, i un bot per enviar les dades. Suposem que al servidor hi ha un script fet amb llenguatge PHP anomenat processa.php, que s qui rep les dades i les gestiona. Suposem primer que el mtode denviament s de tipus get:
<form action="processa.php" method="get"> <div> <label for="nom">Escriu el teu nom: </label> <input type="text" name="nom" id="nom"/> </div> <div> <label for="contrasenya">Escriu la teva contrasenya: </label> <input type="password" name="contrasenya" id="contrasenya" /> </div> <div> <input type="submit" value="Envia les dades" /> </div> </form>
Xarxes drea local
42
Si lusuari entra de nom Anna i de contrasenya secreta, quan premi el bot per enviar el formulari anirem a parar a la URL segent: http://elquesigui.org/accio.php?nom=Anna&edat=secreta. Suposem que canviem el mtode denviar les dades per un mtode de tipus post:
<form action="processa.php" method="post"> ... </form>
La URL que veurem seria http://elquesigui.org/accio.php, per les dades shaurien enviat igualment en la capalera HTTP.
Capalera HTTP Per tal de veure les capaleres HTTP quan s'usa el mtode POST, podrem usar un analitzador de xarxes, com pot ser el programa Wireshark. Un exemple de capalera HTTP amb POST fent la captura amb aquest programa ens retornaria el segent: POST /processa.php HTTP/1.1 Host: localhost User-Agent: Mozilla/5.0 (X11; U; Linux i686; ca; rv:1.8.1.12) Gecko/20080129 Iceweasel/2.0.0.12 (Debian-2.0.0.12-1) Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/ png,*/*;q=0.5 Accept-Language: ca,es;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http://localhost/formulari_complet.html Content-Type: application/x-www-form-urlencoded Content-Length: 28 nom=Anna&contrasenya=secreta
Atribut enctype: aquest atribut ens indica el tipus de contingut que enviem amb el formulari (quan el mtode s de tipus post). Per defecte, el valor s application/x-www-form-urlencoded. Si el formulari ens permet enviat un fitxer hem de canviar aquest valor per multipart/form-data.
2.8.2. Etiquetes dun formulari

La marca <label> ens serveix per associar els elements de text explicatius dels controls amb els controls corresponents. Latribut for de la marca <label> ens permet posar lidentificador (atribut id) del control a qu volem associar letiqueta. Per dir que el text Escriu el teu nom est associat al control amb id nom escriurem el segent:
<label for="nom">Escriu el teu nom:</label> <input type="text" name="nom" id="nom"/>
Xarxes drea local
43
2.8.3. Atributs genrics dels controls dun formulari

Hi ha dos atributs que podem assignar a cadascun dels controls dun formulari. Sn els segents: tabindex: posici en lordre de tabulaci. disabled: si lestablim (disabled=disabled), el control queda deshabilitat.
2.8.4. Camps de text

Els camps de text sn els camps en qu lusuari pot introduir un text relativament curt. Per crear un camp de text usem la marca <input type=text />. A ms, tenim els atributs segents: name: nom del control. value: valor per defecte del camp de text. readonly: si lestablim (readonly=readonly), el control s de noms lectura, no shi pot escriure. maxlength: nombre mxim de carcters que permetrem escriure en el control. size: mida del control. Un camp de text que mesuri lespai que ocuparien trenta carcters per en qu permetem que se nescriguin fins a cent seria:
<input type="text" name="nom" size="30" maxlength="100" id="nom" />
2.8.5. Camps de contrasenya

Seguretat de contrasenyes
Els camps de contrasenya sn els camps en qu lusuari pot introduir una contrasenya, ja que el text que sintrodueix queda camuflat amb asteriscos. Per crear un camp de text usem la marca <input type=password />, i els mateixos atributs que utilitzem per als camps de text. Un exemple de camp de contrasenya seria el segent:
No hem de pensar que la informaci que posem en els controls de tipus password est securitzada ja que si no s'usa el protocol https la informaci circula per la xarxa sense xifrar.
<input type="password" name="contrasenya" size="10" maxlength="15" id="contrasenya" />
2.8.6. Botons dopci

Els botons dopci ens permeten triar una i noms una de les opcions que sens ofereixen. Per crear un bot dopci usem la marca <input type=radio />. A ms, tenim els atributs segents: name: nom del control. checked: determina si el control est seleccionat.
Xarxes drea local
44
value: si est seleccionat, estableix quin valor es tramet. size: determina la mida del control en pxels. Habitualment, no noms posem un bot dopci sin que en posem diversos dassociats entre si. Per exemple, si demanem el sexe de la persona, tenim dos botons dopci, un per senyalar que ss dona i laltre per senyalar que ss home. Per tal que el formulari spiga que aquests botons dopci estan relacionats, donem el mateix valor a latribut name. Fixem-nos en lexemple segent, en qu apareixen tres botons dopci:
<input <label <input <label <input <label type="radio" name="edat" id="edat_menor" value="menor"/> for="edat_menor">Menys de 18 anys </label> type="radio" name="edat" id="edat_major" value="major" checked="checked"/> for="edat_major">De 18 a 65 anys </label> type="radio" name="edat" id="edat_jubilat" value="jubilat"/> for="edat_jubilat">Ms de 65 anys</label>
Observem que els tres controls tenen el mateix valor en el camp name (edat). Aix, quan trametem el formulari ens arriba una de les tres possibilitats segents: edat=menor o b edat=major o b edat=jubilat.
2.8.7. Caselles de verificaci

Les caselles de verificaci ens permeten triar una opci o ms de diverses possibilitats. Per crear una casella de verificaci usem la marca <input type= checkbox />. A ms, tenim els mateixos atributs que per als botons dopci. En aquest cas latribut name no ha de ser el mateix ja que es poden prmer una casella o ms de les caselles de verificaci. Fixem-nos en lexemple:
<input <label <input <label <input <label
type="checkbox" name="llegir" id="llegir" value="si"/> for="llegir">Llegir</label> type="checkbox" name="cine" id="cine" value="si"/> for="cine">Anar al cine</label> type="checkbox" name="trekking" id="trekking" value="si"/> for="trekking">Trekking</label>
En aquest cas, si premssim les caselles Llegir i Anar al cine senviaria: llegir=si&cine=si.
2.8.8. Llistes de selecci

Les llistes de selecci tenen dos formats: les llistes de selecci simple, que ens deixen escollir una nica opci d'un llistat de possibilitats i les llistes
Xarxes drea local
45
de selecci mltiple, que ens deixen escollir ms d'una opci (prement la tecla Ctrl mentre seleccionem les diverses opcions). La funci de la llista de selecci simple s similar als botons d'opci (noms es pot triar una opci), mentre que la funci de la llista de selecci mltiple s similar a les caselles de verificaci (podem triar ms duna opci). Malgrat tot, el format de presentaci i el funcionament del control s diferent. Per crear una llista de selecci usem dues marques: La marca <select> ens serveix per dir on comena i s'acaba la llista de selecci. Tenim els atributs segents: name: nom del control. size: mida del control en nombre dopcions visibles. multiple: si l'establim (<select multiple="multiple">) far que aquesta llista sigui una llista de selecci mltiple. Per a cadascuna de les opcions usem la marca <option>. Aquesta marca est continguda dins de la marca <select> i a la seva vegada cont el text de l'opci que s'ha de seleccionar. T els atributs segents: value: determina el valor que s'envia si se selecciona aquesta opci. selected: si lestablim (selected="selected") aquesta opci est seleccionada per defecte. Hem de tenir en compte que si la llista s de selecci simple, noms haurem de tenir una opci amb aquest atribut, mentre que si s de selecci mltiple podem posarlo en ms duna opci. Un exemple de llista dopci s el segent:
<label for="municipi">Marca els muncipis que has visitat:</label> <select name="municipi" id="municipi" multiple="multiple"> <option value="Abella de la Conca">Abella de la Conca</option> <option value="Abrera">Abrera</option> <option value="ger">ger</option> <option value="Agramunt">Agramunt</option> <option value="Aguilar de Segarra">Aguilar de Segarra</option> <option value="Agullana">Agullana</option> <option value="Aiguafreda">Aiguafreda</option> ... </select>
En aquest cas, es permet que lusuari marqui diverses opcions. Si per exemple, marca que ha visitat les poblacions dAbrera i dAiguafreda, senvia municipi=Abrera&municipi=Aiguafreda.
Xarxes drea local
46
Si volem classificar les diferents opcions de la llista en grups posant-los un ttol descriptiu, podem usar la marca <optgroup>, com es veu en lexemple segent:
<label for="municipi">On vius? </label> <select name="municipi" id="municipi" size="15"> <optgroup label="Capitals"> <option value="bcn">Barcelona</option> <option value="gir" selected="selected">Girona</option> <option value="lle">Lleida</option> <option value="tar">Tarragona</option> </optgroup> <optgroup label="Altres municipis"> <option value="Abella de la Conca">Abella de la Conca</option> <option value="Abrera">Abrera</option> <option value="ger">ger</option> <option value="Agramunt">Agramunt</option> <option value="Aguilar de Segarra">Aguilar de Segarra</option> <option value="Agullana">Agullana</option> <option value="Aiguafreda">Aiguafreda</option> ... </optgroup> </select>
El contingut de latribut label de lelement <optgroup> es mostra com un ttol descriptiu, per no es pot seleccionar. Podem veure aquesta llista en la figura 20.
Figura 20. Exemple de llista de selecci
2.8.9. rees de text

Les rees de text permeten que l'usuari de l'aplicaci web envi una porci de text ms gran que amb el control de camp de text. La marca que ens permet inserir una rea de text s <textarea>. Els atributs que podem usar amb aquesta marca sn els segents: name: nom del control. cols: amplada, en carcters. rows: alada, en nombre de lnies. readonly: si lestablim (readonly=readonly), el control s de noms lectura, no shi pot escriure.
Xarxes drea local
47
Veiem un exemple de control drea de text en qu deixem a lusuari cinc files i trenta columnes visibles per escriure. El text que est entre les marques dinici i fi s el text que surt per defecte a lrea de text:
<textarea name="comentari" id="comentari" cols="30" rows="5">Escriu aqu els teus comentaris</textarea>
2.8.10. Botons
Els botons dun formulari ens serveixen per fer accions quan els premem. Tenim tres tipus de botons: Bot d'enviament de formulari: quan es prem aquest bot el formulari es tramet. s a dir, les dades sn enviades al dest que hem posat en l'atribut action de l'element form. Per inserir un bot d'aquest tipus usem la marca <input type="submit" />. Disposem a ms de latribut value, que ens indica el text que apareix en el bot. Bot de reestabliment del formulari: quan es prem aquest bot el formulari torna a posar-se en lestat inicial. s a dir, s'esborra tot all que ha escrit l'usuari i es posen les dades per defecte de l'usuari. Per inserir un bot d'aquest tipus usem la marca <input type="reset" />. Amb latribut value podem indicar el text que apareix al bot. Bot genric: podem inserir botons en els quals podem afegir noves funcions mitjanat codi de programaci. Per poder fer aix usem la marca <button></button>. El valor que ens apareix al bot s all que posem entre linici i el fi de la marca. Podem posar tant text com imatges. Aquest control t els atributs segents: type: defineix quin tipus de bot s. Pot prendre els valors segents: submit (amb la mateixa funci que els botons denviament de formulari), reset (amb la mateixa funci que els botons de reestabliment de formulari), button (bot genric). name: nom del control value: valor que es tramet quan premem el bot. Posem com a exemple els botons ms usats, que sn el de reestabliment de formulari i el denviament de formulari:
<input type="reset" value="Esborrar formulari" /> <input type="submit" value="Enviar formulari" />
Xarxes drea local
48
2.8.11. Controls ocults

En alguns casos ens pot interessar tenir en un formulari un control amb un valor concret, per que no s visible ni directament modificable per l'usuari final. Per inserir un control d'aquest tipus s'usa la marca <input type="hidden" />. Els atributs que susen amb aquest control sn els segents: name: nom del control. value: valor que es tramet. Per exemple, si volem enviar seccio=segona, hem descriure el codi segent:
<input type="hidden" name="seccio" value="segona" />
2.9. Marcs
Molt sovint trobem llocs web en els quals, per a totes les pgines del lloc, hi ha parts amb el mateix contingut (capalera, bners, men...). Una soluci barroera per fer aquest tipus de lloc s tenir un document (X)HTML per a cada pgina on molta part del contingut s el mateix. El problema que ens pot comportar aquesta soluci s que si volem modificar alguna cosa d'aquestes parts fixes, ho haurem de fer a cadascun dels documents (X)HTML. Aix, a part de ser una feina repetitiva, pot conduir a mltiples errors. Els marcs sn una soluci alternativa a aquest problema. La idea s que dividim el navegador en diverses seccions i a cadascuna de les seccions se'ns carrega una pgina (X)HTML diferent. Per tal d'aconseguir aquesta soluci hi ha un document (X)HTML extra que ens serveix per definir les seccions en qu volem dividir la finestra del navegador. Imaginem la situaci segent: volem un lloc web amb una capalera fixa, un men lateral fix, un peu de pgina fix i un cos variant. Per aconseguir aquest lloc web necessitarem diversos fitxers: un fitxer marcs.html (o index.html, si fos la pgina principal) on es defineix l'estructura de la pgina; un fitxer cap.html, on posem la capalera; un fitxer menu.html, on posem el men; un fitxer peu.html, i diversos fitxers .html que aniran mostrant les diferents seccions de la web (inici.html, seccio1.html, seccio2.html...). La situaci descrita es pot veure en la figura 21.
Marcs flotants Hi ha un altre tipus de marcs que podem incrustar directament en el document (X)HTML. Funcionen igual que si inserssim una imatge per el que inserim s un marc que t com a contingut un altre document (X)HTML. Per fer aquest tipus de marcs susa la marca <iframe>: <iframe src=pagina.html />.
Xarxes drea local
49
Figura 21. Exemple de marc
2.9.1. Estructura dun web fet amb marcs

Lestructura dun web fet amb marcs es defineix en un fitxer especial destinat a aquest objectiu. En aquest fitxer especifiquem quantes files i columnes volem i quant espai ocupa cadascuna delles. Tamb especifiquem quina s la pgina inicial que apareix en cadascun dels marcs. Aquest fitxer de definici dels marcs no t la marca <body> i usa dues marques especials: <frameset> i <frame>. A ms, hem dusar la DTD (X)HTML 1.0 Frameset. La marca <frameset> ens serveix per definir en quins subespais dividirem la pantalla. Amb latribut rows sespecifica el nombre de subespais horitzontals i quant ocupen, i amb latribut cols sespecifica el nombre de subespais verticals i quant ocupen. Si no sestableix latribut rows, cada columna sestn per tota la longitud de la pgina. Si no sestableix latribut cols, cada fila sestn al llarg de tota lamplada de la pgina. Si no sestableix cap dels dos atributs, el marc t exactament la mateixa mida que la pgina. Els marcs es creen desquerra a dreta per a les columnes, i de dalt a baix per a les files. Quan sespecifiquen tots dos atributs, les vistes es creen desquerra a dreta en la fila superior, en la segona fila, etc. La marca <frame> ens serveix per definir com ha de ser cadascun d'aquests subespais. Dins lelement <frameset>, tenim un element
Xarxes drea local
50
<frame> per a cada subespai. Disposem dels atributs segents per tal de definir cadascun dels subespais: src: indica ladrea del document (X)HTML que hi haur al marc. name: assigna un nom al marc per poder-shi referir posteriorment. scrolling: decideix si es colloquen o no barres de desplaament en el marc per poder-nos moure pel seu contingut. El seu valor per defecte s auto, que deixa la decisi al navegador. Les altres opcions sn yes i no. noresize: atribut boole mitjanant el qual, si sespecifica, lusuari no pot canviar la mida del marc. Per especificar-lo hem descriure noresize="noresize". frameborder: si ligualem a zero selimina la vora amb tots els marcs que cont que tamb tinguin aquest valor a zero. marginwidth: permet canviar els marges horitzontals dins un marc. Es representa en pxels. marginheight: permet canviar els marges verticals dins un marc. Es representa en pxels. Vegem ara un seguit d'exemples que ens generarien diverses estructures: 1) Divisi de la pantalla en dos seccions horitzontals de mida igual.
<frameset rows="50%, 50%"> ...la resta de la definici... </frameset>
2) Divisi de la pantalla en tres columnes: la segona columna amb una amplada fixa de 250 pxels (la qual cosa s til, per exemple, per incloure una imatge de mida coneguda), de l'espai restant a la primera columna shi assigna el 25% i a la tercera el 75%.
<frameset cols="1*,250,3*"> <frame name="superior" src="superior.html" /> <frame name="inferior" src=inferior.html" /> </frameset>
3) Divisi de la pantalla en una quadrcula de 2 3 subespais.

<frameset rows="30%,70%" cols="33%,34%,33%" /> <frame name="supesq" src="supesq.html" /> <frame name="supcent" src="supcent.html" /> <frame name="supesq" src="supesq.html" /> <frame name="infesq" src="infesq.html" /> <frame name="infcent" src="infcent.html" /> <frame name="infesq" src="infesq.html" /> </frameset>
4) Divisi de la pantalla en tres files: la segona fila t una alada total fixa de 300 pxels. De l'espai restant la primera fila n'ocupa un 30%. Finalment,
Xarxes drea local
51
lalada del quart marc sha especificat com a 2*, de manera que s el doble dalt que el tercer marc, que t alada * (equivalent a 1*).
<frameset rows="30%,400,*,2*" /> <frame name="superior" src="superior.html" /> <frame name="central" src="central.html" /> <frame name="inferior" src="inferior.html" /> </frameset>
Si suposem que la nostra pantalla t una alada de 1.000 pxels, tindrem que la primera fila t una alada de 300 pxels (que s el 30% de 1.000), la segona fila t una alada de 400 pxels. Ens queden 300 pxels disponibles per als altres dos marcs. Per tant, el tercer marc t 100 pxels dalada i el quart, 200 pxels. Els navegadors hauran dajustar les longituds absolutes que no sumin el 100% de lespai real disponible. Si sobra espai, shaur de repartir proporcionalment entre cada vista. Si falta espai, shaur de reduir cada vista segons la relaci entre lespai indicat i lespai total.
2.9.2. Enniuament de marcs

Els grups de marcs es poden enniuar fins a qualsevol nivell. En lexemple segent, el <frameset> exterior divideix lespai disponible en tres columnes iguals. Lestructura tpica duna capalera, men, cos de pgina i peu de pgina que hem vist en la figura 21 lhaurem de pensar com a tres files, en qu la segona fila no s un <frame> sin que s un altre <frameset> compost per dues columnes:
<frameset rows="15%, 75%, *"> <frame name="cap" src=cap.html" /> <frameset cols="30%, 70%"> <frame name="menu" src="menu.html" /> <frame name="cos" src="seccio1.html" /> </frameset> <frame name="peu" src="peu.html" /> </frameset>
2.9.3. Modificaci de pgines daltres marcs

Un cas habitual en ls de marcs s que volem prmer un enlla i que lobjectiu de lenlla sens obri en un marc diferent del marc en qu estem. Imaginem la situaci tpica dun estructura amb una capalera superior un men esquerre i el cos de la pgina a la dreta. Volem que quan premem els enllaos del men no sens obrin al mateix marc on est el men (marc
Xarxes drea local
52
inferior esquerre) sin que se'ns obrin al marc inferior dret, on hi ha el cos de la web. Per tal de fer aix hem d'usar l'atribut target de la marca <a>. Com a valor de target hem descriure el name del marc on volem que se'ns obri la pgina dest de l'enlla. El fitxer marcs.html amb lestructura del lloc web s:
<frameset rows="15%, 75%, *"> <frame name="cap" src="cap.html" /> <frameset cols="30%, 70%"> <frame name="menu" src="menu.html" /> <frame name="cos" src="seccio1.html" /> </frameset> <frame name="peu" src="peu.html" /> </frameset>
Un fragment de codi del document menu.html:

<ul> <li><a href="inici.html" target="cos">Inici</a></li> <li><a href="seccio1.html" target="cos">Secci 1</a></li> <li><a href="seccio2.html" target="cos">Secci 2</a></li> </ul>
Aix fa que en prmer el segon enlla sens obr el document seccio1.html en el marc que t com a valor de name el text cos. Com hem vist, latribut name sespecifica en la marca <frame> del document de definici de marcs.
2.9.4. El problema dels marcs

Tot i que hi ha mltiples llocs web que usen marcs, el seu s no s molt recomanat per diversos motius: alguns navegadors no els suporten, els cercadors no saben indexar b els llocs web fets amb marcs, no compleixen les normes d'accessibilitat... Hi ha altres maneres daconseguir l'efecte dels marcs sense usar-los: usant programaci web en el servidor o usant fulls destils. Malgrat tot, si no tenim ms remei que usar-los i volem donar una alternativa als navegadors que no suporten els marcs podem usar la marca <noframes>. Un exemple ds seria el segent:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta name="author" content="Monica Ramirez" /> <meta name="date" content="2006-12-19T17:26:20+0100" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Xarxes drea local
53
</head> <frameset rows="15%, 75%, *"> <frame name="cap" src="cap.html" /> <frameset cols="20%, 80%"> <frame name="menu" src="menu.html" /> <frame name="cos" src="seccio1.html" /> </frameset> <frame name="peu" src="peu.html" /> <noframes> <body> <h1>El navegador que ests usant no suporta marcs. Ho sento per no podrs veure el contingut d'aquesta pgina...</h1> </body> </noframes> </frameset> </html>
2.10. Mapes
La combinaci de la marca <a> amb la marca <img> ens permet fer que una imatge sigui alhora un enlla. Per si all que volem s que segons on premem de la imatge vagi a un enlla o a un altre haurem de recrrer a un altre recurs: els mapes sensibles. Els mapes sensibles sn imatges que presenten mltiples enllaos segons la zona en qu se situ el cursor.
Hi ha dos tipus de mapes, els mapes gestionats des del client i els mapes gestionats des del servidor.
2.10.1. Mapes gestionats des del client

La primera tasca que cal fer quan confeccionem un mapa sensible gestionat des del client s dividir la imatge en zones. Per tal de fer aix hem de delimitar aquestes zones establint-ne les coordenades. Hi ha diversos programes de dibuix que ens permeten veure les coordenades de cada punt de la imatge i tamb alguns editors d(X)HTML que ofereixen aquesta possibilitat. Si volem utilitzar mapes sensibles, hem de fer dues actuacions: declarar el mapa i assignar-lo a una imatge. Veiem com podem fer aquests dos passos: 1) La declaraci dun mapa es fa amb la utilitzaci de la marca <map> seguint la sintaxi segent:
<map name="nom_mapa"> <area shape=... coords=... href=... alt=... /> ... </map>
Un exemple deditor d(X)HTML que ens permet trossejar la imatge i donar-nos les coordenades s leditor Quanta amb el connector kimagemapeditor.
Eines de confecci de mapes
Xarxes drea local
54
A la marca <map> noms hi podem definir el nom del mapa. s dins de cada marca <area> que podem definir ms dades, els atributs per fer-ho sn els segents: shape: defineix la forma de la zona, que pot ser rectangular (rect), circular (circ) o poligonal (poly). coords: defineix les coordenades de la zona, seguint la normativa segent: Si es tracta dun rectantgle (rect), cal indicar les coordenades x1, y1, x2, y2, on x1 i y1 sn les coordenades de lextrem superior esquerre, i x2 i y2, les de lextrem inferior dret. Si es tracta dun cercle (circ), cal indicar les coordenades x, y, r, on x i y sn les coordenades del centre del cercle, i r el radi daquest cercle. Si es tracta dun polgon (poly), cal indicar les coordenades x1, y1, x2, y2, x3, y3,..., on cada parella xi, yi defineix un vrtex del polgon. La darrera parella suneix a la primera per tancar el polgon. href: defineix lenlla cap a la destinaci de lusuari si prem sobre la zona. nohref: si lestablim (nohref="nohref") indiquem que la zona no t cap enlla definit. alt: incorpora el text que es presenta en lloc de la imatge en navegadors no visuals per accedir a lenlla. 2) Lassignaci dun mapa a una imatge es fa amb latribut usemap dins la marca <img>, que declara la imatge segons la sintaxi segent:
<img src="cami_imatge" usemap="#nom_mapa" />
El nom del mapa sempre ha danar precedit del smbol # i ha de coincidir amb latribut name de la marca <map>. Imaginem que tenim la imatge que es veu en la figura 22, i volem que en prmer sobre el cap anem a la URL http://fsf.org, en prmer sobre la panxa anem a http://gnu.org i en prmer els peus anem a http://debian.org, el codi seria el segent:
<img src="linux.png" alt="linux" usemap="#linuxmapa" /> <map name="linuxmapa" id="mapa"> <area shape="circle" coords="74,43,40" href="http://fsf.org" alt="Free Software Foundation" title="FSF" /> <area shape="rect" coords="42,89,126,133" href="http://gnu.org" alt="GNU is Not Unix" title="GNU" /> <area shape="poly" coords="27,130,10,141,5,167,53,179" href="http://debian.org" alt="Debian" title="Debian" /> <area shape="poly" coords="108,133,138,134,152,158,114,182" href="http://debian.org" alt="Debian" title="Debian" /> <area shape="default" nohref="nohref" alt="resta" /> </map>
Xarxes drea local
55
Figura 22. Mapa de tipus client
2.10.2. Mapes gestionats des del servidor

Lobjectiu dels mapes gestionats des del servidor s enviar al servidor les coordenades del punt on sha premut. En el servidor hi ha un programa que sap com shan de gestionar aquestes coordenades (per exemple, enviar a una altra pgina segons on shagi premut). Per tal de fer aix hem dusar latribut ismap="ismap" de la marca <img>:
<a href="paginadesti"><img src="" alt="" ismap="ismap" /></a>
Per exemple:
<a href="mapaservcoord.html"><img src="imatges/linux.png" alt="linux" ismap="ismap" /></a>
Aix fa que si premem les coordenades 5,15 de la imatge anem a la pgina mapaservcoord.html?5,15. La pgina de destinaci pot agafar la part de la URL que cont les coordenades i gestionar-les com convingui.
2.11. Objectes
La marca <object> neix per oferir una soluci universal per a la inclusi de qualsevol tipus de fitxers en els documents (X)HTML, de manera que els navegadors rebin la informaci necessria per tractar lobjecte (fitxer incrustat en el document). Com a regla general, la marca <object> serveix per definir un objecte o component extern al navegador que sencarrega de reproduir l'objec-
Xarxes drea local
56
te (so, animaci, vdeo...). Per aconseguir una reproducci correcta, la marca <object> ha de permetre declarar lobjecte, la seva ubicaci i el seu tipus, i unes marques optatives especials, <params>, permeten acabar de definir els valors que necessiti. La sintaxi genrica s la segent:
<object atribut1="valor1" atribut2="valor2" ... atributN="valorN"> <param name="nom" value="valor"> <param name="nom" value="valor"> ... </object>
Un atribut bsic en la declaraci dun objecte s latribut type, que permet indicar al navegador el tipus dobjecte que ha de carregar. El navegador ha dutilitzar aquesta informaci per esbrinar si disposa dalguna aplicaci adequada per reproduir lobjecte, i nha davortar la crrega si no en disposa. De tot aix es dedueix que hi ha dos punts importants perqu un objecte es pugui reproduir correctament: 1) El tipus de lobjecte ha destar ben identificat en el document (X)HTML. Per a aix, cal utilitzar els tipus MIME. 2) El navegador ha de tenir installada alguna aplicaci adequada per tal de reproduir lobjecte. Les aplicacions que possibiliten aquesta funci sanomenen connectors (plugins). La taula 7 mostra una llista dels atributs ms utilitzats en la marca <object>.
Taula 7. Atributs d<object> Atribut Descripci Nom del fitxer per reproduir amb la seva ubicaci. Cadena amb el tipus MIME adequat a lobjecte. Amplada en pxels del control. Alada en pxels del control. Missatge que apareix en pantalla mentre lobjecte es carrega.
data type width height standby
Per exemple, si volem reproduir un arxiu de msica, hem de fer el segent:

<object data="musica.mp3" type="audio/mpeg"> <p>Text alternatiu</p> </object>
Xarxes drea local
57
Quant als parmetres, depenent de quin objecte vulguem encastar, en podrem posar uns o uns altres.
2.11.1. Tipus MIME

MIME s lacrnim angls de Multipurpose Internet Mail Extensions (extensions multipropsit de correu dInternet). Es tracta dun estndard que especifica com un programa (inicialment, de correu o navegador web) ha de transferir arxius multimdia (vdeo, so i, per extensi, qualsevol arxiu que no estigui codificat en US-ASCII). Abans dels tipus MIME, qualsevol arxiu que no es limits a text ASCII shavia de codificar en US-ASCII. Lestndard MIME adjunta un fitxer de capalera a cada fitxer, que especifica el tipus i el subtipus del contingut de larxiu principal. Grcies a aquesta informaci, tant el servidor com el navegador poden gestionar i presentar correctament les dades. En la utilitzaci diria dInternet, ens beneficiem dels tipus MIME. Cada vegada que sollicitem una pgina dInternet, sobre un dileg entre el nostre navegador i el servidor que proporciona la pgina. El nostre navegador demana la pgina i el servidor, abans denviar-la, confirma que existeix i comprova el tipus de dades que cont. Aix darrer es fa mitjanant el tipus MIME que correspongui. La gesti de tipus MIME en el web t lloc en tres punts ben diferenciats: 1) En el servidor, que ha de ser capa de gestionar diversos tipus MIME i tenir-los activats. 2) En la pgina web, en qu lautor constantment fa referncia a tipus MIME. Aix, els enllaos a arxius externs (fulls destils, scripts de JavaScript, objectes incrustats...) han despecificar el tipus de larxiu enllaat. A continuaci posem alguns exemples: a) Enllaos a fulls destils:
<link rel="stylesheet" type="text/css" href="estils.css" />
b) Crida a scripts JavaScript:

<script type="text/javascript" src="codi.js"></script>
c) Definici dobjectes:
<object data="musica.mp3" type="audio/mpeg"> <p>Text alternatiu</p> </object>
Xarxes drea local
58
3) En el navegador del client, que ha destar capacitat per interpretar els tipus MIME que el servidor li envia i, fins i tot, ha de poder informar el servidor dels tipus MIME que pot acceptar. Per permetre aquesta funci, el navegador ha de tenir installades les aplicacions adequades als diferents tipus MIME que interessi gestionar. Sn els connectors (plugins). Actualment, els tipus MIME sagrupen en vuit categories, i cada tipus MIME sidentifica pel nom compost: categoria/tipus. De vegades, es parla de tipus/subtipus. Les vuit categories sn les segents: application, audio, image, message, model, multipart, text i video. Cadascuna est formada per un conjunt ms o menys gran de tipus MIME, i cadascun dels tipus acostuma a dur associades una extensi darxius o ms duna. La taula 8 recull alguns dels tipus MIME amb algunes de les extensions darxius normalment associades.
Taula 8. Recull de tipus MIME i extensions associades darxius Tipus/Subtipus MIME image/png image/gif image/jpeg image/tiff audio/x-wav audio/x-midi text/plain text/richtext video/mpeg Extensions de fitxers .png .gif .jpg, .jpeg, .jpe .tif, .tiff .wav .mid .txt .rtf, .rtx .mpeg, .mpg, .mpe Tipus/Subtipus MIME video/x-msvideo application/pdf application/postscript application/rtf application/gzip application/x-tar application/zip application/x-java-vm application/x-java-archive Extensions de fitxers .avi .pdf .ai, .eps, .ps .rtf .gz .tar .zip .class .jar IANA Lorganisme que sencarrega de registrar els tipus MIME s lIANA, acrnim angls dInternet Assigned Numbers Authority (Agncia dAssignaci de Nmeros dInternet). A la seva pgina web podem trobar la llista completa de tipus/subtipus MIME.
Logotip dIANA
2.11.2. Connectors
Per reproduir arxius definits dins les pgines web com a objectes genrics, els navegadors necessiten tenir installat el connector adequat.
Els connectors (plugins) sn aplicacions informtiques que interactuen amb una altra aplicaci per afegir-hi una funci o utilitat especfica.
s a dir, si en un document web shi ha incrustat un objecte (<object>) que fa referncia a un document dun cert tipus MIME, el navegador que
Xarxes drea local
59
lhagi de reproduir ha de disposar dun connector adequat per a aquell tipus MIME. El fet que el sistema operatiu disposi duna aplicaci que pugui reproduir un determinat arxiu (corresponent a un tipus MIME) no s garantia que els navegadors installats en aquell sistema tinguin installat el connector corresponent. Els navegadors, en rebre pgines web que contenen tipus MIME no suportats, haurien doferir a lusuari (recomanaci del W3C) la possibilitat dinstallar-les duna manera senzilla. Si es vol saber els connectors que es tenen installats al navegador Firefox sha descriure about:plugins en la barra de navegaci. El navegador ens mostra un document HTML amb la informaci corresponent a tots els connectors installats, com es veu en la figura 23. La informaci que dna s molt interessant: connectors installats (versi i nom de larxiu corresponent) i, per a cada connector, la relaci de tipus MIME mitjanant els quals pot donar servei.
Figura 23. Connectors installats al navegador Firefox
2.11.3. Exemples dincorporaci dobjectes genrics en una pgina web

A continuaci es mostren diversos exemples de com podem incrustar alguns tipus de mitjans multimdia a la nostra web. En tots els exemples, si no es pot accedir al mitj, es mostra un text que ofereix la possibilitat de baixar-se el fitxer directament.
Xarxes drea local
60
Inserci dun vdeo en format .mpg:

<object data="media/Miraquiensequeja.mpg" type="application/x-mplayer2" width="500" height="500"> No es pot accedir al video. Baixa-te'l d'<a href="media/Miraquiensequeja.mpg">aqui</a> </object>
Inserci dun fitxer udio en format .mp3:

<div class="canco"> <h2>01 - Bubamara (main version)</h2> <object data="media/01DiesDeDetritus.mp3" type="audio/mpeg" width="100" height="100"> <param name="autoplay" value="false" /> <param name="autoStart" value="0" /> No es pot accedir a l'audio. Baixa-te'l d'<a href="media/01DiesDeDetritus.mp3mp3">aqui</a> </object> </div>
En la figura 24 podem veure totes les canons dun lbum, on cada can est incrustada com un objecte. En aquest cas sest usant el connector de Totem (programa de visionat de vdeo i udio en sistemes GNU/Linux).
Figura 24. Objectes dudio inserits en una pgina web
Inserci dun format .swf (aplicaci Flash):

<object type="application/x-shockwave-flash" data="media/calculator.swf" width="400" height="400"> <param name="src" value="media/calculator.swf" /> </object>
Xarxes drea local
61
3. Els fulls destils: CSS
En els orgens del web i en les seves primeres versions, el llenguatge de marques HTML era un llenguatge fcil daprendre i molt redut quant a les marques i lestructura. Tot va canviar quan van aparixer els primers navegadors que eren capaos de representar recursos grfics per afegir a la informaci textual. Daquesta manera, el nombre de llocs web va comenar a crixer i, amb ell, el nombre de marques que lespecificaci HTML preveia. Lobjectiu era construir llocs web cada vegada ms atractius i, per a aix, lHTML havia dincloure noves marques destinades a aconseguir efectes visuals. Amb tots aquests canvis que el web va patir, ens trobem amb un llenguatge que, si b al principi estava orientat a lestructura, ara est totalment orientat a la presentaci. Aix trobem que lHTML ofereix marques com <b>, <u>, <i> o <font>, que sn marques de visualitzaci i no aporten res a lestructura del document representat. El naixement dXHTML vol posar fi a aquest problema: les marques permeses en XHTML sn marques per marcar lestructura, no la presentaci. Ens falta, per, alguna manera de definir la presentaci del document i aix s el que ens oferir ls dels fulls destils. La finalitat de ls de fulls destils s, doncs, a ms dincorporar el disseny esttic a la nostra aplicaci web, mantenir lestructura i el disseny separats. Usar fulls destils ens proporciona els avantatges segents: Possibilitat de mantenir el codi. En el camp de disseny, el CSS s ms potent que les marques de disseny que oferia lHTML. El CSS s un llenguatge senzill. Es poden especificar diferents fulls destils per a un sol document (X)HTML. Per exemple, podem tenir lestil per a la pgina web quan es visita amb el navegador i lestil per a quan volem imprimir aquesta pgina. El gran inconvenient dels fulls destils s que no tots els navegadors es comporten de la mateixa manera davant del mateix full d'estils. Aix es deu al fet que alguns navegadors no compleixen els estndards establerts i, amb aix, obliguen el programador a codificar diferents fulls d'estils (un per a cada navegador).
Igual que podem validar documents (X)HTML, tamb podem validar els nostres fulls destils per comprovar que segueixen els estndards proposats pel W3C. Validaci de fulls destils
Xarxes drea local
62
A ms, hem de tenir en compte que hi ha dues especificacions oficials de CSS: CSS1 i CSS2.
Especificacions CSS Els fulls destil estan formalment descrits en dues especificacions del W3C: CSS1 i CSS2. CSS1 es va emetre el desembre de 1996 i descriu un model de formataci simple, principalment per a presentacions basades en la pantalla. CSS1 t al voltant de 50 propietats (per exemple color i mida de font). CSS2 senllestia el maig de 1998 i est basada en CSS1. CSS2 inclou totes les propietats del CSS1 i nafegeix al voltant de 70 ms, com per exemple propietats per descriure presentacions auditives i salts de pgina[...]. Si vol llegir les especificacions de CSS, les pot trobar a: http://www.w3.org/TR/REC-CSS1 http://www.w3.org/TR/REC-CSS2 Hkon Wium Lie; Bert Bos (1999). Cascading Style Sheets: Designing for the Web (captol 2). Disponible a: http://www.w3.org/Style/LieBos2e/enter
Hem de tenir en compte que la majoria de navegadors suporten CSS1, per no tots suporten totes les propietats que ofereix CSS2.
3.1. Ubicaci dels estils

El CSS ens defineix quin aspecte han de tenir els elements (X)HTML. s per aix que hem d'associar dalguna manera aquestes propietats als elements. Podem ubicar les propietats CSS en diferents localitzacions: En la marca: afegint les propietats CSS directament a lelement usant latribut style. Suposem que volem que un determinat pargraf estigui centrat amb lletra vermella. El codi s el segent:
<p style="text-align:center; color:red">Pargraf centrat vermell</p>
En la capalera del document (X)HTML: podem posar les diferents propietats CSS dins de lelement <style> que est ubicat dins lelement <head>. Suposem que volem que tots els pargrafs estiguin centrats i amb lletra vermella. El codi s el segent:
<! 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> ... <style> p { text-align:center; color:red } </style> </head> <body> <p>Pargraf centrat vermell</p> </body> </html>
Xarxes drea local
63
En un document extern: posem totes les propietats dins d'un document amb extensi .css i des del document (X)HTML enllacem aquest full d'estils amb lajut de la marca <link>, filla de l'element <head>. Suposem que volem tenir tots els pargrafs centrats amb lletra vermella. El document (X)HTML s:
<! 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> <link rel="stylesheet" href="estils.css" type="text/css" /> </head> <body> <p>Pargraf centrat vermell</p> </body> </html>
El fitxer estils.css t el contingut segent:

p { text-align:center; color:red }
Lavantatge dusar documents externs per establir les propietats CSS s que podem reutilitzar un mateix full destils per a diferents documents (X)HTML.
3.2. Sintaxi bsica de CSS
Un full d'estils s un conjunt de regles que defineixen lesttica final dels documents (X)HTML que lusen. Cadascuna d'aquestes regles est formada per un selector i per un conjunt de declaracions. Una declaraci est formada per una propietat amb el seu valor associat.
El selector ens serveix per definir a quin o a quins elements volem aplicar les declaracions de la regla. Les declaracions sn les diverses caracterstiques que ha de complir el selector. A cada propietat de cada declaraci hi posem el valor que sescaigui. La sintaxi genrica duna regla s, doncs, la segent:
selector{ declaraci_1 ... declaraci_n }
Xarxes drea local
64
on la sintaxi de cada declaracio_i s:

propietat_i: valor_i;
Per exemple, si volem que tots els pargrafs tinguin lletra de mida 10 pt i un fons de color gris hem de definir la regla segent:
p { font-size: 10pt; background-color: gray; }
3.2.1. Les regles arrova

Hi ha un conjunt de regles especials que s'anomenen regles arrova. Aquestes regles es caracteritzen perqu comencen pel carcter @. Les regles arrova ms importants sn @import i @media: Regla @import. La regla @import ens serveix per incloure, en el nostre full destils, fulls destils externs. Si, per exemple, volem incloure en el nostre full destils totes les propietats que hi ha en el document mesestils.css, hem descriure la lnia segent:
@import "mesestils.css";
Regla @media. La regla @media serveix per diferenciar per quin mitj s'ofereixen les propietats que cont aquesta regla. La sintaxi genrica s la segent:
@media mitj{ propietats }
on mitj pot ser print (per imprimir) o screen (per mostrar per pantalla), entre d'altres. Imaginem, per exemple, que volem que, quan imprimim el document (X)HTML, la lletra tingui una mida de 10 pt, per que, quan es miri per pantalla, tingui una mida de 12 pt. Tamb volem que en ambds casos lalada de la lnia sigui d1.2. En el nostre full destils hem dintroduir el codi segent:
@media print { body{ font-size: 10pt } } @media screen { body { font-size: 12pt } } @media screen, print { body { line-height: 1.2 } }
Xarxes drea local
65
3.2.2. Comentaris
Si en un full destils volem posar comentaris destinats a laclariment del codi CSS hem de fer servir la sintaxi segent:
/* comentaris */
3.3. Cascada i herncia

Dues de les caracterstiques que fan que els fulls destils tinguin una gran potncia a lhora dimplementar-los s la cascada i lherncia. La cascada es refereix a la possible combinaci de diferents fulls destils. Lherncia fa referncia a la capacitat que tenen els elements del document (X)HTML dheretar propietats dels seus elements antecessors.
3.3.1. Cascada
Les sigles CSS volen dir Cascading Style Sheets (Fulls destils en cascada). Per, qu vol dir cascada en aquest mbit? Doncs vol dir que podem combinar diferents fulls destils i que les propietats de tots ells es van acumulant. Aix ens s molt til quan pensem en llocs web grans, on podem tenir un full destils bsic i anar incorporant-hi altres fulls destils, segons les nostres necessitats. Ara caldria preguntar-nos si podem combinar diferents fulls destils i si hi ha propietats que es contradiuen, com se soluciona. Quina propietat t prioritat? Per solucionar aquest problema hi ha establerta la jerarquia segent: 1) Propietats establertes per lautor de la web. Les propietats que estableix lautor es poden ubicar en diferents llocs i, segons aquesta ubicaci, la propietat t ms o menys prioritat. La jerarquia s la segent, per ordre de quina preval sobre les altres: a) Propietats establertes en latribut style dun element. b) Propietats establertes en lelement <style> del document (X)HTML. c) Propietats establertes en un full destils extern. 2) Propietats establertes per lusuari. Els navegadors permeten a lusuari establir diferents propietst destil: mida de la lletra, colors... 3) Propietats establertes pel navegador. Els navegadors tenen un estil predeterminat per a cadascun dels elements (X)HTML. Si no sha esta-
Xarxes drea local
66
blert cap propietat en els tems anteriors, les propietats del navegador sn les que prevalen. Podem invertir lordre anterior posant la cadena !important desprs d'una declaraci. Aix fa que l'estil d'usuari prevalgui davant de la propietat especificada per l'autor. Aquest fet ens serveix perqu la pgina sigui ms accessible, ja que si, per exemple, alg t problemes de visi, li permetem que pugui fer la lletra ms gran, tot i que l'aplicaci estigui pensada per ser visualitzada amb una lletra ms petita. Si ens trobem en el cas que les propietats empaten, lltima propietat escrita s la que guanya. Si hem escrit el codi segent en un full destils extern:
p{ color:red; } ... p{ color:green; } ...
En aquest cas la lletra dels pargrafs ser de color verd, ja que s lltima escrita.
3.3.2. Herncia
Cada element d'una pgina (X)HTML est contingut en un altre. Quan parlem d'herncia ens referim al fet que tot element hereta les propietats dels seus elements antecessors. Malgrat tot, hem de tenir en compte el segent: No totes les propietats s'hereten, aquesta caracterstica est descrita en lespecificaci de CSS corresponent. Si volem forar l'herncia en una propietat podem introduir-hi el valor inherit. Si posem un valor a una propietat, aquest valor preval sobre el valor heretat. Els elements hereten el valor computat, no el valor especificat. s a dir, si una propietat t per valor un valor relatiu (per exemple, un percentatge), el valor heretat s el resultat calculat.
3.4. Selectors
Un selector s la part de la regla CSS que identifica lelement o elements del document (X)HTML dels quals volem definir les propietats.
Xarxes drea local
67
Hi ha diferents tipus de selectors: des dels ms simples, en qu simplement s posar la marca (X)HTML a la qual volem modificar lesttica, fins a combinacions complexes daquests selectors.
3.4.1. Selectors de tipus

Els selectors de tipus sn els selectors ms simples: es tracta nicament dintroduir la marca (X)HTML. Afecten tots els elements (X)HTML amb aquella marca. Imaginem que volem que tots els encapalaments de primer ordre, amb marca <h1>, siguin de color blau. El codi s el segent:
h1{ color:blue; }
Per, i si no volem modificar laparena de tots els elements dun mateix tipus? Per aconseguir aix hem dusar altres tipus de selectors, com ara els selectors de classes i els selectors didentificadors.
3.4.2. Selectors de classes

Els selectors de classes serveixen per associar unes propietats a tots els elements que tinguin latribut class digual valor. Si en el document (X)HTML tenim:
<tag class="nomclasse">...</tag>
podem introduir la regla segent amb un selector de classe:

tag.nomclasse{ declaracions }
Aix fa que a tots els elements tag que tinguin latribut class amb valor nomclasse sels apliquin les propietats especificades. Tamb podem definir un selector de classe ms genric, que no depengui de la marca de lelement. s a dir, podem definir la regla segent:
.nomclasse{ declaracions }
Aquesta regla fa que qualsevol element, sigui quina sigui la seva marca, si t latribut class amb valor "nomclasse" tingui la lletra de color verd.
Xarxes drea local
68
Posem un exemple: volem que tots els pargrafs siguin de color verd, excepte els de classe destacat, que sn de color vermell. El codi CSS s el segent:
p{ color:green; } p.destacat{ color:red; }
Qualsevol pargraf, amb marca <p> t el color de lletra verd, per si introdum un pargraf amb classe destacat, <p class="destacat">, la lletra daquest pargraf s de color vermell. Si el que volem s que qualsevol element amb class="destacat" tingui la lletra vermella hem descriure el codi segent:
.destacat{ color:red; }
3.4.3. Selectors d'identificador

Els selectors didentificador serveixen per associar unes propietats a lelement que t un determinat identificador. Lidentificador dun element (X)HTML es declara amb latribut id de lelement. Hem de tenir en compte que en un document (X)HTML no hi pot haver dos elements amb el mateix identificador. Si en el document (X)HTML tenim:
<tag id="nomidentificador">...</tag>
podem escriure la regla segent amb un selector didentificador:

tag#nomidentificador{ declaracions }
Podem introduir la mateixa regla prescindint de quin element porti lidentificador, s a dir, podem dir:
#nomidentificador{ declaracions }
Si, per exemple, volem que lelement amb identificador principal, per exemple <h1 id="principal">, estigui centrat hem descriure:
#principal{ text-align:center; }
Xarxes drea local
69
3.4.4. Selectors d'atribut

Els selectors datribut serviran per aplicar les propietats de la regla als elements que tenen un atribut concret. El selector segent:
tag[atribut] { declaracions }
afecta tots els elements (X)HTML amb la sintaxi segent:

<tag atribut="valor">...</tag>
Per exemple, si volem que hi hagi un marge dret de 10 px en tots els elements <img> que tinguin establert latribut title, hem descriure el segent:
img[title] { margin-right:10px; }
Aquest selector permet diverses variants. Una delles s que podem jugar amb el valor de latribut. En lexemple anterior podem haver decidit que volem un marge dret de 10 px en totes les imatges que tenen establert latribut title i que, a ms, aquest atribut ha de tenir per valor logo. El codi CSS ha de ser el segent:
img[title="logo"] { margin-right:10px; }
Tamb podem filtrar per ms dun atribut. Per exemple, si ara volem seleccionar tots els elements <img> que tenen latribut title i que sn de classe important, tindrem el codi segent:
img[title][class="preferent"] { margin-right:10px; }
Finalment, podem filtrar segons el valor de latribut. Disposem de dues frmules per fer-ho: [atribut~="valor"]: susa per seleccionar els elements que tenen com a atribut una llista de paraules separades per espais, una de les quals s exactament valor. [atribut|=valor]: susa per seleccionar els elements que tenen com a atribut una llista de paraules separades per guions, comenant per valor.
Xarxes drea local
70
Posem un exemple per a cada cas:

img[alt~="logo"] { border: solid } p[lang|="en"] { font-family: "Times New Roman", Serif }
La primera regla selecciona les imatges en les quals latribut alt t per valor una cadena que cont la paraula logo, com per exemple alt="logo de la web". La segona regla selecciona els pargrafs que tenen com a valor de latribut lang, paraules que comencen amb en, com en-US o en-cockney.
3.4.5. Selector universal

El selector * sanomena selector universal i afecta tots els element del document. La sintaxi s la segent:
* { declaracions }
3.4.6. Selectors de descendents

Diem que un element s descendent dun altre quan aquest element est contingut en laltre, no importa a quin nivell. Un selector de descendents ens permet seleccionar tots els elements que estan continguts en un altre. La sintaxi genrica s la segent:
tag tagdescendent { declaracions }
Per exemple, si volem posar en blau tots els elements <em> continguts en un pargraf hem descriure:
p em{ color:blue; }
Podem posar ms nivells i barrejar altres tipus de selectors. Imaginem un exemple ms complex: volem posar amb lletra vermella tots els elements de classe destaca que estiguin continguts en pargrafs que alhora estan continguts en un <div>:
div p .destaca{ color:red; }
Xarxes drea local
71
3.4.7. Selectors de fills

Un element s fill dun altre si s descendent de primer nivell. Els selectors de fills ens permeten seleccionar els fills dun determinat element. El smbol que hem dusar s >:
tag>tagfill { declaracions }
Per exemple, si tenim les regles segents en el nostre document CSS:

body>p { font-weight: bold; } div ol>li p { text-decoration : underline; }
La primera lnia de lexemple fa que tots els pargrafs que sn fills de <body> estiguin en lletra negreta. La segona regla s una mica ms complexa: el selector afecta tots els elements <p> que sn descendents d'un element <li>, on l'element <li> ha de ser fill d'un element <ol> que, alhora, ha de ser descendent d'un element <div>. Aquests dos exemples combinats amb el codi (X)HTML segent fan que observem el resultat que es mostra en la figura 25 en el nostre navegador:
<body> <p>pargraf en negreta</p> <div> <p>pargraf normal</p> <div> <ol> <li> <p>pargraf subratllat</p> <p>pargraf subratllat</p> </li> <li> <div> <p>pargraf subratllat</p> </div> </li> </ol> <ul> <li> <p>pargraf normal</p> <p>pargraf normal</p> </li> <li> <div> <p>pargraf normal</p> </div> </li> </ul> </div> </div> </body>
Figura 25. Selectors de fill
Xarxes drea local
72
3.4.8. Selectors de germans adjacents

Els selectors de germans adjacents ens permeten, donat un element, conferir propietats al seu germ immediatament posterior. El smbol usat s +:
tag+taggermaadjacent { declaracions }
Si, per exemple, volem reduir lespai vertical que hi ha entre un <h1> i l<h2> que el segueix immediatament, hem de definir la regla segent:
h1 + h2 { margin-top: -5mm }
Obtindrem el resultat que podem veure en la figura 26.

Figura 26. Selectors de germans adjacents
Complicant una mica la regla anterior, fa que la regla noms sapliqui si lelement <h1> s de classe oberta (class="obert"):
h1.obert + h2 { margin-top: -5mm }
3.4.9. Agrupament de selectors

Si diversos selectors tenen les mateixes propietats podem agrupar-los separant els selectors per una coma:
selector1,selector2,selector3 { declaracions }
s a dir, si, per exemple, tenim les regles segents:

h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif }
s equivalent a la regla segent, en qu hem agrupat els tres selectors:

h1, h2, h3 { font-family: sans-serif }
Xarxes drea local
73
3.5. Pseudoclasses i pseudoelements

Les pseudoclasses i els pseudoelements serveixen per afegir alguns efectes addicionals als elements que ens interessi.
3.5.1. Pseudoclasses
A continuaci enumerem les pseudoclasses que hi ha amb la seva descripci i alguns exemples: :first-child. Selecciona un element que s el primer fill dun altre element. Per exemple, CSS:
/*els pargrafs fills de div.nota tindran un sagnat d'1 em*/ div.nota > p { text-indent:1em; } /* els pargrafs primer fill de div.nota tindran un sagnat de 2em */ div.nota > p:first-child { text-indent:2em; }
(X)HTML:
<body> <p> Pargraf exterior al <div></p> <div class="nota"> <p>Pargraf primer fill de <div></p> <p>Pargraf segon fill de <div></p> </div> </body>
En la figura 27 podem veure el resultat daquest exemple. :link. Permet definir lestil dels enllaos de la nostra pgina, quan encara no shan visitat. :visited. Permet definir lestil dels enllaos de la nostra pgina, quan shan visitat. Per exemple, CSS:
Figura 27. Pseudoclasse :first-child
/* Els enllaos sn de lletra blanca damunt de fons negre */ a {color: white; background-color: black;} /* Quan no han estat visitats no tindran cap tipus de subratllat */ a:link { text-decoration: none;} /* Quan han estat visitats apareixeran tatxats */ a:visited { text-decoration: line-through;}
(X)HTML:
<p><a href="http://fsf.org">Enlla normal</a></p> <p><a href="http://gnu.org">Enlla visitat</a></p>
Xarxes drea local
74
Podem veure el resultat en la figura 28. :active. Permet definir lestil dels elements quan sactiven (quan premem damunt seu). :hover. Permet definir lestil dels elements quan passem per damunt seu. :focus. Permet definir lestil dels elements quan reben el focus. Per exemple, CSS:
Figura 28. Pseudoclasses denllaos
/* Els enllaos (visitats i no visitats) sn de lletra blanca damunt de fons negre */ a:link, a:visited { color:white; background-color:black; } /* Quan hi passem per damunt tenen una vora negra, la lletra ser negra i el fons blanc */ a:hover { border: solid thin black; color: black; background-color:white; } /* Quan els premem, la lletra s blanca i el fons vermell */ a:active { color:white; background-color:red; } /* Quan ens situem en un control de formulari <input> tindr una vora vermella puntejada, i un fraciment de 2px */ input:focus { border: red 2px dotted; padding: 2px; }
(X)HTML:
<p><a href="http://fsf.org">Enlla</a></p> <p><a href="http://gnu.org">Enlla pel qual passo per sobre</a></p> <p>Camp de text no actiu: <input type="text" name="input" /></p> <p>Camp de text actiu: <input type="text" name="input" /></p>
Una mostra del que veurem la tenim en la figura 29.

Figura 29. Exemple de pseudoclasse :focus
:lang. Permet definir les propietats segons lidioma. Per exemple, si volem establir que els pargrafs que tenen latribut lang amb valor ca (<p lang="ca">...</p>) estan amb lletra vermella, hem de definirho amb la regla segent:
p:lang(ca) { color:red; }
Xarxes drea local
75
3.5.2. Pseudoelements
A continuaci enumerem els pseudoelements que hi ha amb la seva descripci: :first-line. Permet definir lestil de la primera lnia de l'element. :first-letter. Permet posar propietats destil a la primera lletra de l'element. :after. Permet introduir contingut al final de lelement. A lelement li hem de donar la propietat content amb el valor desitjat. :before. Permet introduir contingut a linici de lelement. A lelement li hem de donar la propietat content amb el valor desitjat. A continuaci exposem un exemple on participen tots aquests pseudoelements. Podeu observar el resultat en la figura 30. CSS:
/* La primera lnia dels pargrafs de classe ll estan en lletra negreta */ p.ll:first-line { font-weight:bold;} /* La primera lletra dels pargrafs de classe ll est flotant a lesquerra amb lletra de tipus monospace tres cops ms gran */ p.ll:first-letter {float: left; font-size: 300%; font-family:monospace;} /* Davant de cada pargraf de classe pf hi haur el text Pargraf: , desprs hi haur un logotip del navgeador Firefox */ p.pf:before { content: "Pargraf: "; } p.pf:after { content: url("imatges/firefox.png"); }
(X)HTML:
<p class="pf">Aix <p class="pf">Aix <p class="ll">Aix primera lnia est s un pargraf </p> tamb s un pargraf </p> s un pargraf d'amplada 20em on la primera lletra s molt gran i la en negreta...</p>
Figura 30. Exemple sobre pseudoelements
Xarxes drea local
76
3.6. Propietats bsiques de format

Per tal de definir les declaracions duna regla tenim disponibles un seguit de propietats que ens permeten modificar laparena dels elements (X)HTML: els colors, la tipografia, etc.
!!
Podeu trobar unes guies de referncia rpida de totes les propietats de CSS (tant per a CSS1 com per a CSS2) en la secci Annexos del web del crdit.
3.6.1. Mesures i colors

Algunes de les propietats que podem establir en el full destils tenen com a valor una unitat de mesura que ens indica la mida de la propietat (mides de lletra, amplades, marges...). Aquestes unitats de mesura poden ser unitats relatives o absolutes: Les unitats relatives les podem mesurar amb la mesura em, amb la mesura ex, amb pxels (px) o amb percentatges (%). Les unitats absolutes es poden mesurar amb centmetres (cm), amb millmetres (mm), amb polzades (in) o amb punts (pt). Quant a les unitats relatives, hem de destacar que una distncia definida en px no canvia si lusuari canvia la mida del text en el seu navegador o si lusuari canvia la mida de la finestra del navegador, per s que canvia si lusuari canvia la resoluci de la pantalla. En canvi, una distncia definida en em o en percentatge s proporcional a la mida de la font establerta pel navegador. Per tant, si lusuari canvia la mida del text en el seu navegador, la mesura augmenta o disminueix proporcionalment. Algunes propietats tenen com a valor un color (color de la lletra, color de fons...). Els colors es poden expressar amb paraules clau (red (vermell), green (verd), blue (blau)...) o amb el model RGB. Si usem les paraules clau estem limitats a usar un cert nombre de colors, els que tenen associat un nom. En canvi, amb la frmula RGB podem obtenir tota la gamma de colors. Per expressar un color amb el format RGB, tenim dues maneres de fer-ho: per exemple, si volem donar el color vermell, hem descriure el segent: #ff0000 o b rgb(255,0,0).
!!
Podeu trobar totes les paraules clau amb el seu color corresponent en la secci Annexos del web daquest crdit.
3.6.2. Fonts
En la taula 9 podem veure les diferents propietats que ens ajuden a modificar la font de la lletra.
Xarxes drea local
77
Taula 9. Propietats CSS per a la font de la lletra Propietat Descripci Canvia el tipus de lletra. Sen poden posar diversos, separats per coma, per si el navegador no disposs dalgun dells. Serveix per posar (italic) o treure (normal) la lletra en cursiva. Posa (small-caps) o treu (normal) les lletres minscules en majscules per amb una tipografia ms petita. Serveix per posar (bold) o treure (normal) la lletra en negreta. Exemples
font-family
body { font-family:Gill, Helvetica, sans-serif; } h1, h2, h3 { font-style: italic; } h1 em { font-style: normal; } h3 { font-variant: small-caps } p { font-weight: normal } h1 { font-weight: bold } p { font-size: 16px; } @media print { p { font-size: 12pt; } } p p p p { { { { font: font: font: font: 12px sans-serif } x-large Helvetica, serif } bold italic large serif } normal small-caps 120% fantasy }
font-style
font-variant
font-weight
font-size
Defineix la mida de la lletra.
font
Propietat que resumeix les propietats anteriors.
line-height
Estableix lalada de cadascuna de les lnies de lelement.
p { line-height: 2em; }
La figura 31 mostra ms exemples daquestes propietats.
!!
Figura 31. Propietats de font Trobareu el codi dels exemples en la secci Recursos de contingut del web daquest crdit.
Xarxes drea local
78
3.6.3. Aspecte del text

En la taula 10 podem veure les diferents propietats que ens ajuden a modificar laspecte del text.
Taula 10. Propietats CSS per a la font de la lletra Propietat Descripci Defineix el sagnat, pot ser una unitat positiva o negativa. Defineix el tipus dalienaci. Permet posar una lnia a sobre (underline), a sota (overline) o tatxant el text (line-through). Incrementa la distncia entre lletres. Incrementa la distncia entre paraules. Escriu les lletres en majscules (uppercase), minscules (lowercase) o la primera lletra de cada paraula en majscula (capitalize) o anulla la propietat (none). Defineix com shan de tractar els espais en blanc que contingui lelement. El valor perqu tingui en compte els espais en blanc s pre. Exemples
text-indent text-align text-decoration
p { text-indent: 3em; } div.important { text-align: center ; } .destaca { text-decoration: underline; } blockquote { letter-spacing: 0.1em; } h1 { word-spacing: 1em; } h1 { text-transform: uppercase; } .titol { text-transform: capitalize; }
letter-spacing word-spacing
text-transform
white-space
pre { white-space: pre; } p { white-space: normal; }

Figura 32. Propietats text-indent i text-decoration
!!
Recordeu que trobareu el codi dels exemples en la secci Recursos de contingut del web daquest crdit.
3.6.4. Color i fons

En la taula 11 podem veure les diferents propietats que ens ajuden a modificar el color del text i el seu color de fons.
Taula 11. Propietats CSS per al color i el fons dels elements Propietat Descripci Estableix el color de la lletra. Estableix el color de fons. Treu (none) la imatge de fons. Exemples
color background-color background-image
em { color: red; } em { color: rgb(255,0,0); } h1 { background-color: #FF0000; } body{background-image: url("fons.png");} p { background-image: none; }
Xarxes drea local
79
Propietat
Descripci
Exemples
background-attachment
Estableix la fixaci de la imatge de fons. Pot ser fixa (fixed) o movible (scroll).
body { background-image: url("fons.png"); background-attachment: fixed; } body { background: white url("fons.png"); background-repeat: repeat-y; } body{ background-image:url("fons.png"); backgrond-position: right top; } body { background: red; } p{ background: gray url("fons.png") repeat fixed left top; }
background-repeat
Especifica com volem que la imatge de fons es repeteixi (repeat, repeat-x, repeat-y) o si no volem que es repeteixi (no-repeat). Especifica la posici de la imatge de fons. El primer valor correspon a leix X (left, center o right) i el segon a leix Y (top, center o bottom). Tamb podem introduir percentatges. Propietat que resumeix les propietats anteriors.
background-position
background

Figura 33. Propietats de background
3.7. El model de caixa

Hi ha diverses propietats, com els marges o les vores, que hem destablir a partir de lanomenat model de caixa. Per entendre aquest model hem de pensar cada element del document (X)HTML com si fos una caixa. De cadascuna daquestes caixes podem distingir els elements segents: El contingut (content) de lelement: text o altres elements. El farciment (padding): espai entre el contingut i la vora de la caixa. La vora (border): vora que delimita la caixa. El marge (margin): espai entre la vora de la caixa i la resta delements.
Xarxes drea local
80
A ms, cada caixa t quatre segments: el superior (top), linferior (bottom), lesquerre (left) i el dret (right). Podem observar tots aquests elements en la figura 34.
Figura 34. El model de caixa
La taula 12 ens ofereix les propietats que ens permeten definir les mesures de tots aquests elements.
Taula 12. Propietats del model de caixa Propietat Descripci Descripci
margin-top margin-right margin-bottom margin-left
Mesura cadascun dels marges de la caixa (superior, dret, inferior i esquerre).
body { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 4em; }
Propietat que resumeix les propietats margin-*: es poden introduir dun a quatre valors separats per espai:
margin
1 valor: afecta els quatre marges 2 valors: top-bottom left-right 3 valors: top right-left bottom 4 valors: top right bottom left
body { margin: 1em 2em 3em 4em; }
padding-top padding-right padding-bottom padding-left padding
Mesura cadascun dels farciments: superior, dret, inferior i esquerre.
body { padding-top: 1em; padding -right: 2em; padding -bottom: 1em; padding-left: 2em; } h1 { padding: 1em 2em; }
Propietat que resumeix les propietats padding-*. Els valors sintrodueixen igual que a la propietat margin.
border-top-width border-right-width border-bottom-width border-left-width
Especifica lamplada de cadascuna de les vores superior, dreta, inferior i esquerra. Com a valor podem posar thin (prim), mitj (medium), gruixut (thick) o una mesura.
h1 { border-top-width: thin; border-right-width: thick; border-botom-width: medium; border-left-width: thick; }
Xarxes drea local
81
Propietat
Descripci Propietat que resumeix les propietats border-*width. Els valors sintrodueixen igual que a la propietat margin.
Descripci
border-width
h1 {border-width: thin thick medium;} p { border-top-color: black; border-right-color: red; border-bottom-color: green; border-left-color: blue; } p { border-color: gray; }
border-top-color border-right-color border-bottom-color border-left-color
Especifica el color de cadascuna de les vores superior, dreta, inferior i esquerra.
border-color
Propietat que resumeix les propietats border-*color. Els valors sintrodueixen igual que a la propietat margin. Defineix lestil de cadascuna de les vores superior, dreta, inferior i esquerra. Podrem introduir els valors segents: none o hidden: cap vora dotted: punts dashed: segments solid: lnia contnua double: dues lnies contnues groove: enfonsat ridge: sortit inset: encastat outset: sobresortit
border-top-style border-right-style border-bottom-style border-left-style
#caixa { border-top-style: solid; border-right-style: dotted; border-bottom-style:solid; border-left-style: dotted; }
border-style
Propietat que resumeix les propietats border-*style. Els valors sintrodueixen igual que a la propietat margin.
#caixa { border-style: solid dotted } h1 { border-top: thick solid red; border-right: thick solid red; border-bottom: thick solid red; border-left: thick solid red; } h1{ border: thick solid red; }
border-top border-right border-bottom border-left
Propietats que resumeixen les propietats border per posici.
border
Propietat que resumeix les propietats border. Afecten les quatre posicions igual.
La figura 35 i la figura 36 mostren ms exemples daquestes propietats.

Figura 35. Propietats de border
!!
Xarxes drea local
82
Figura 36. Propietats de margin
3.8. El format visual dels elements dun document

El format visual defineix com sn les caixes (s a dir, els elements (X)HTML vistos com a caixes) en el document i el comportament daquestes caixes envers la resta de caixes de la pgina. En la taula 13 es mostren les propietats que ens permeten modificar el format visual de cadascun dels elements del nostre document.
Taula 13. Propietats per a modificar el format visual dels elements dun document Propietat Descripci Canvia el tipus de visualitzaci de lelement. Els valors que pot prendre sn els segents: block: element de bloc. inline: element de lnia. list-item: element de llista. marker: aquest valor declara que el contingut generat davant o desprs duna caixa s un marcador. none: lelement amb aquesta propietat no genera cap caixa, no s visible ni ocupa espai en el document. run-in i compact: creen caixes de bloc o de lnia segons el context. table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footergroup, table-row, table-cell i table-caption: lelement es comporta com una taula. Exemples
display
/* Per defecte: */ p { display: block; } em { display: inline; } li { display: list-item; } /* Si no volem mostrar imatges: */ img { display: none; }
Xarxes drea local
83
Propietat
Descripci Descriu la posici envers la resta delements. Els valors poden ser els segents:
Exemples
position
relative: guarda l'espai i mou el que li diguem. absolute: no guarda l'espai. fixed: com absolute, per sempre est all encara que ens desplacem amb la pgina.
h1#primer { position: fixed }
top right bottom left
Indica a quina posici posem la caixa dins la pgina.
#header { top: 0; right: 0; bottom: auto; left: 0; } #peu { position: fixed; width: 100%; height: 100px; top: auto; right: 0; bottom: 0; left: 0; }
width height
Indica la mida de la caixa: amplada i alada.
min-width min-height max-width max-height float
Assenyala les dimensions mnimes i mximes que poden prendre les caixes, sigui quina sigui la mida de la finestra: amplada mnima, alada mnima, amplada mxima i alada mxima.
Fa que la caixa quedi flotant a lesquerra (left) o a la dreta (right). Serveix per desactivar elements flotants al voltant de lelement que t la propietat. Podem eliminar els elements flotants a la part esquerra (left), a la part dreta (right), a ambds costats (both) i anullar la propietat (none).
img { float: right; }
clear
#peu { clear:both; }
z-index
Marca la profunditat duna caixa. Com ms petit sigui el valor ms al fons se situar la caixa. Indica qu fer quan el contingut mesura ms que la caixa. Els possibles valors sn: visible: el contingut es veu sobrepassant la taula. hidden: el contingut sobrant no es veu. scroll: apareix una barra de desplaament. auto: apareix una barra de desplaament, si s necessari.
p.fons { z-index:1; } p.primer {z-index:2; }
overflow
div.desplaca { height: 10em; overflow:auto; }
La figura 37 i la figura 38 mostren ms exemples daquestes propietats.

Figura 37. Exemple de les propietats de posicionament absolut
Xarxes drea local
84
Figura 38. Exemple de la propietat float
!!
3.9. Exemples prctics amb CSS

Ms propietats Lespecificaci CSS2 estableix encara ms propietats que les que hem presentat. Les podeu consultar directament a lespecificaci que trobareu en el lloc web del W3C.
Lart del CSS no s saber-se totes les propietats que hi ha sin saber-les combinar adequadament per aconseguir els efectes desitjats. Hi ha centenars de tcniques per a problemes comuns.
Casos tpics on s necessari dominar les propietats CSS sn fer mens a partir de llistes o maquetar webs sense usar taules.
!!
3.9.1. Fer mens amb llistes
Gaireb tota web disposa dun men de navegaci que ens permet anar enllaant a les diferents seccions del lloc. Una manera molt elegant de fer aquests mens s pensar-los com una llista amb tems (i subtems, si sescau). El problema que tenim s que les llistes sn lletges.
En la secci Recursos de contingut del web del crdit trobareu ms exemples de mens fets amb llistes. Figura 39. Men fet amb una llista
Vegem com podem fer un men bonic a partir duna llista. Es tracta dun men vertical que t laspecte que mostra la figura 39.
Xarxes drea local
85
El codi (X)HTML s molt simple. Es tracta simplement duna llista desordenada:

<div id="menu"> <ul> <li><a href="">Inici</a></li> <li><a href="">Secci 1</a></li> <li><a href="">Secci 2</a></li> </ul> </div>
Vegem quines regles CSS hem dintroduir per obtenir els resultats desitjats. A continuaci, combinarem diverses de les regles CSS existents, i aix aconseguirem que aquesta simple llista desordenada acabi essent un men atractiu i accessible per a lusuari. Primer de tot hem de dir a la llista que no volem pics a cada tem, aix ho podem aconseguir aplicant una propietat especifica de llistes que es diu list-style-type. A ms, hi traiem marges i farciments i hi posem una vora:
#menu ul { list-style-type: none ; margin: 0; padding: 0; border: thick solid #D68EFF; }
A cada tem de la llista hi canviem el color de fons:

#menu ul li { background-color: #B20298; }
Ara, definim lestil dels enllaos: canviem el color de la lletra, traiem el subratllat, fem que les lletres siguin sempre majscules i hi posem una mica de farciment. Hem de destacar que la declaraci display: block serveix perqu lenlla passi a ser un element de bloc (per defecte, s un element de lnia) i aix aconseguim poder prmer lenlla en tot el bloc, no noms on hi ha les lletres de lenlla:
#menu ul li a { color: white ; text-decoration: none ; text-transform: uppercase ; display: block ; padding: 0.2em 0.2em 0.2em 0.4em ; }
Xarxes drea local
86
Finalment, definim quina esttica han de tenir els enllaos quan hi passem per damunt. En aquest cas, els canviem el color de lletra i de fons, i hi fem aparixer una vora a lesquerra:
#menu ul li a:hover { background: #CC4ABD; border-left: 0.3em solid #58014B; color: #58014B; }
3.9.2. Maquetaci de webs sense s de taules

Podem trobar en molts llocs web que la maquetaci est feta a partir de taules. Ls de taules per maquetar s feixuc i hem devitar-lo. En aquest exemple mostrem com podem fer una maquetaci sense taules (tableless) fent s nicament de la marca <div> i de CSS. La maquetaci que ens proposem fer s la dun lloc web tpic, amb una capalera, una barra lateral per al men, el cos de la pgina amb el contingut del lloc i un peu de pgina. El resultat desitjat el podeu observar en la figura 40.
Figura 40. Maquetaci tableless
El codi (X)HTML s fora senzill, simplement marquem amb marques <div> cadascuna de les capes que formen el web. Englobem tot el contingut en un <div> contenidor, en qu posem la resta de capes (cap, lateral amb el men, cos i peu):
<body> <div id="contenidor"> <div id="cap"> <h1>Ttol de la web</h1>
Xarxes drea local
87
<h2>Subttol de la web</h2> </div> <div id="lateral"> <div id="menu"> <ul> <li><a href="">Inici</a></li> <li><a href="">Secci 1</a></li> <li><a href="">Secci 2</a></li> </ul> </div> </div> <div id="cos"> <div id="inici"> <h3>Inici</h3> <p>..</p> </div> </div> <div id="peu"> <p>Peu de pgina </p> </div> </div> </body>
Ara definim les regles pertinents per aconseguir els nostres objectius. En la marca <body> definim totes les propietats genriques: color de fons, color de lletra i tipus de lletra. A ms, posem el text centrat (perqu Internet Explorer entengui que volem el contingut centrat) i traiem qualsevol tipus de marge.
body { text-align: center ; background-color:#FFC7FC; color: #58014B; font: small sans-serif; margin: 0; }
Al <div> amb identificador contenidor hem de dir-li que no ocupi tota la pgina (li diem que nocupi noms un 80%), que quedi centrat (aix saconsegueix posant els marges esquerre i dret amb valor auto) i que el fons sigui blanc. A ms, fem que tot el text del web estigui alineat a lesquerra.
#contenidor{ width: 80%; margin: 0px auto; text-align: left; background-color:white; }
La capalera i el peu de pgina tenen propietats comunes: tenen la mateixa imatge de fons, el color de lletra s blanc i en negreta, i el text est centrat.
#cap, #peu{ background-image: url("imatges/banner-web.png"); text-align:center; font-weight: bold; color:white; }
Xarxes drea local
88
Especifiquem tamb les propietats que noms afecten la capalera: volem que els ttols que contingui no tinguin marges:
#cap h1, #cap h2{ margin:0; }
Posem, a ms, les mides per defecte que han de tenir tots els encapalaments <h1> i <h2> de la pgina:
h1{ font-size: 5em; } h2{ font-size: 4em; }
Per al peu de pgina tamb tenim propietats especfiques: la lletra ha de ser petita i fem que no pugui tenir cap element flotant. Aix, la barra lateral, que s un element flotant, mai no es posar per damunt del peu de pgina.
#peu { font-size: small; clear: both ; }
Ara definim la barra lateral: s un element flotant a lesquerra i t una amplada del 15% de la pgina:
#lateral { width: 15% ; float: left ; }
Per maquetar el cos del web diem que el marge esquerre s dun 15%, que s just lespai que ocupa la barra lateral. A ms, posem una mica de farciment a lesquerra, perqu el text del cos no quedi enganxat al men.
#cos { margin-left: 15% ; padding-left: 1em ; }
!!
Amb totes aquestes regles hem aconseguit el nostre objectiu: tenim una web bonica, ben estructurada, amb un codi (X)HTML senzill i sense fer s de taules. (Noms ens manca el codi per convertir la llista que conforma el men en lesttica proposada.)

Asidai 225x c02 Ud1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Asidai 225x c02 Ud1

Uploaded by

Copyright:

Available Formats

Programaci web esttica

Mnica Ramrez Arceda

Xarxes drea local

Xarxes drea local

Programaci web esttica

Xarxes drea local

Programaci web esttica

Xarxes drea local

Programaci web esttica

Xarxes drea local

Programaci web esttica

Xarxes drea local

Programaci web esttica

Xarxes drea local

Programaci web esttica

1. Introducci a la programaci web esttica

1.1. Funcionament del servei web

Xarxes drea local

Programaci web esttica

1.1.1. Classificacions de la programaci web

Xarxes drea local

Programaci web esttica

Totes aquestes tcniques de programaci web no sn incompatibles i es poden usar conjuntament.

1.2. Llenguatges de marques

Xarxes drea local

Programaci web esttica

Xarxes drea local

Programaci web esttica

Figura 2. Document XML en qu es mostren els diferents tipus de nodes

Xarxes drea local

Programaci web esttica

Xarxes drea local

Programaci web esttica

<!ELEMENT nom-element (EMPTY)>

La DTD est definida en el mateix document XML.

<!DOCTYPE element-arrel [declaracions]>

Xarxes drea local

Programaci web esttica

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

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

Xarxes drea local

Programaci web esttica

Xarxes drea local

Programaci web esttica

2. Els llenguatges de marques: (X)HTML

2.1. Estructura d'un document (X)HTML

2.1.1. La declaraci XML i la DTD

Xarxes drea local

Programaci web esttica

2.1.2. L'element arrel <html>

2.1.3. La capalera i el cos

Xarxes drea local

Programaci web esttica

Xarxes drea local

Programaci web esttica

2.2. Marques del cos del document

2.2.1. Tipus delements

2.2.2. Atributs genrics

Xarxes drea local

Programaci web esttica

2.3. Marques de text

Xarxes drea local

Programaci web esttica