Utilització dels llenguatges de marques en entorns web

A l’hora de crear documents XML només cal preocupar-se de les etiquetes, de l’estructura dels documents i de comprovar que el document compleixi les normes del vocabulari correcte, però no de com es veuran aquestes pàgines.

Tot això està bé perquè un dels objectius principals és fer que els programes puguin interpretar les dades que contenen els documents. Alhora, si s’han seguit les recomanacions qualsevol persona amb una mica d’esforç també podrà interpretar les dades que conté el document.

XML està pensat perquè un usuari pugui entendre les dades però no per ser llegides còmodament. Algú que no sigui expert en informàtica, en intentar veure les dades d’un document no espera veure això:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <?xml-stylesheet type="text/css" href="notes.css" ?>
  3. <institut nom="Institut Cendrassos">
  4. <cicles>
  5. <especialitat nom="Informàtica">
  6. <cicle id="ASIX">
  7. Administració de Sistemes Informàtics i Xarxes
  8. </cicle>
  9. <cicle id="SMX" >
  10. Sistemes Microinformàtics i Xarxes
  11. </cicle>
  12. </especialitat>
  13. </cicles>
  14. <notes>
  15. <classe nom="ASIX">
  16. <alumne aprovat="NO"><nom>Jaume Capmany</nom></alumne>
  17. <alumne aprovat="SI"><nom>Mohamed Polih</nom><nota>5</nota></alumne>
  18. <alumne aprovat="SI"><nom>Juan Pérez</nom><nota>6</nota></alumne>
  19. <alumne aprovat="SI"><nom>Frederic Pi</nom><nota>5</nota></alumne>
  20. ...

Per contra, el que aquest usuari espera trobar-se és més aviat una cosa com la de la figura.

Figura Document XML amb un estil aplicat

Si bé és cert que hi ha vocabularis XML pensats per ser representats, com SVG (figura) o MathXML, aquests llenguatges no estan pensats per representar informació general sinó per representar camps concrets.

Figura SVG està pensat per representar gràfics vectorials en 2D.

D’adaptar el contingut d’un document per fer que pugui ser visualitzat d’una manera alternativa s’encarregaran els fulls d’estil.

Els fulls d’estil seran els responsables de fer que els documents XML puguin ser visualitzats de maneres diferents per adaptar-se al medi per al qual seran visualitzats.

En documents XML els fulls d’estil més usats són:

  • Cascading style sheets (CSS): un mecanisme simple per afegir estil als documents. És el que es fa servir en HTML/XHTML.
  • XSL formatting objects (XSL-FO): un llenguatge XML que només té com a objectiu donar format als documents XML. Es fa servir sobretot per transformar la informació en altres formats com PDF (portable document format) o HTML.

Cascading style sheets (CSS)

Els fulls d’estil CSS van ser creats per posar una mica d’ordre en l’entorn web i, per tant, es van pensar per donar format a HTML (i per tant, també a XHTML).

XHTML és la versió en XML d’HTML.

De totes maneres també es poden aplicar a documents XML que no siguin XHTML, tot i que normalment portarà una mica més de feina. Com que les etiquetes HTML ja defineixen una manera de ser representades per defecte això permet que en alguns casos no calgui canviar aquesta representació, però en canvi en XML no hi ha informació sobre com s’ha de presentar la informació i, per tant, normalment s’haurà de definir la manera de representar cada una de les etiquetes.

Han sortit diverses versions de CSS:

  • CSS1: va ser la primera versió que va sortir i ja no està suportada pel W3C.
  • CSS2: va expandir les característiques de CSS1 afegint-li moltes funcionalitats. Tot i que va sortir el 1998 encara és la versió més suportada pels programes i està en constant revisió.
  • CSS3: CSS3 a més d’afegir noves funcionalitats converteix l’especificació en modular, de manera que alguns mòduls s’han convertit en recomanacions i d’altres encara no. No està gaire suportada.

En l’especificació de la versió 2 de CSS fins i tot s’hi inclou un punt, que anomena “A brief CSS 2.1 tutorial for XML”, en què es parla com es pot lligar CSS amb documents XML.

Mentre que fa temps tothom visitava les pàgines web amb un ordinador, en un moment donat la situació va començar a canviar radicalment i es van començar a visitar les pàgines web amb altres dispositius: ordinadors de butxaca, telèfons mòbils, televisions, etc… i les primeres versions d’HTML no estaven preparades per al canvi.

Calia que les pàgines s’adaptessin al dispositiu que les visitava, ja que allò que en un ordinador personal era perfectament llegible, en un telèfon mòbil podia ser il·legible. Però en HTML era molt difícil convertir una pàgina que tenia un format específic en un altre, ja que les dades estaven mesclades amb la manera de representar-les. Calia separar les dades de la manera de representar-les.

A més, la popularitat de les pàgines web va començar a fer que els llocs web cada vegada tinguessin més pàgines. En tenir el format dins del document, si es volia que totes les pàgines mostressin un aspecte coherent s’havia de repetir l’estil en totes les pàgines. Calia una manera de poder aplicar un estil a múltiples pàgines.

CSS intenta donar una manera de definir les regles de presentació d’un document sense barrejar les dades amb el contingut i permetent que els estils es puguin aplicar a múltiples pàgines.

Per tant, CSS proporciona un sistema per controlar la presentació de les pàgines sense haver de canviar el document al qual es vol donar estil.

Navegadors web

Com que CSS va sorgir de les tecnologies web els programes que en tenen un suport més gran són els navegadors web. Per tant, solen ser els programes més usats per visualitzar documents als quals s’aplica un full d’estil.

Actualment els navegadors web estan fent tasques molt diferents d’aquelles per a les quals van ser pensats inicialment. Els navegadors web no solament es fan servir per visualitzar informació en una pàgina web sinó que es poden fer servir per descarregar programes, visualitzar pel·lícules, escoltar música, edició de textos, executar programes, etc. Fins i tot les tecnologies en el núvol ens permeten administrar servidors des del navegador.

  • La complexitat associada a les múltiples tasques noves que han anat assumint els navegadors ha fet que no sempre compleixin perfectament tots els estàndards i recomanacions.
  • A vegades algunes especificacions no deixen clar què s’ha de fer en casos determinats i els navegadors han tendit a improvisar, i això fa que no tots els navegadors responguin igual en aquestes situacions.

El suport dels navegadors a CSS ha estat molt variable al llarg del temps però en general els navegadors interpretaran les regles CSS majoritàriament de la mateixa manera (però no sempre) i, per tant, en crear un full d’estil CSS s’haurà de comprovar com es veu amb diferents navegadors per assegurar-se que no té problemes.

Visualització de documents XML

En carregar un document XML que no tingui full d’estil els navegadors solen carregar un full d’estil per defecte que sol ser en forma d’arbre com en la figura.

Figura Visualització per defecte d’un document XML en el Firefox
Aquesta visualització avisa que el document no té full d'estil.

Si es defineix un full d’estil sense regles es mostrarà el document amb la visió per defecte (figura).

La representació per defecte d’un document XML és simplement ignorar els elements i pintar el contingut de les dades un rere l’altre.

Figura Visualització per defecte d’un document XML en el Firefox

Associar un full d'estil a un document

Per poder aplicar un full d’estil CSS a un document aquest s’ha de modificar per indicar-li quin és el full d’estil per aplicar. Associar un full d’estil es farà de manera diferent si l’estem associant a un document HTML que si l’estem associant a un document XML.

Com que l’XHTML és HTML i a més està basat en XML, es pot associar un full d’estil CSS a XHTML fent servir qualsevol dels sistemes.

Associar un document HTML

L’HTML defineix dues etiquetes per mitjà de les quals es poden definir fulls d’estils per a un document:

  1. <style>
  2. <link>

Totes dues regles s’han de definir dins de l’etiqueta <head> del document.

L’element <style> permet que es puguin afegir regles CSS directament en un document HTML.

  1. <head>
  2. <title>Test</title>
  3. <style type="text/css">
  4. ... regles ...
  5. </style>
  6. ...

Les regles CSS simplement s’han d’especificar entre l’obertura i el tancament de l’element.

Aquest no és el sistema més usat, ja que es perd la possibilitat de fer que totes les pàgines d’un lloc web concret tinguin un estil semblant. Per aquest motiu el més corrent és definir el full d’estil com un fitxer a part amb l’element <link> (figura).

Figura Definir un full d’estil CSS extern en HTML

Els tipus MIME

MIME és un estàndard que es fa servir per transferir arxius binaris en protocols que només accepten la transferència de caràcters de text. Inicialment va ser creat per poder adjuntar arxius per correu electrònic, però actualment hi ha molts altres protocols que el fan servir.

  • L’atribut type sempre serà el valor MIME de CSS (text/css).
  • rel serveix per determinar quina és la relació de l’arxiu que estem enllaçant amb el document.
  • I l’atribut href és el que es fa servir per enllaçar amb l’arxiu que conté les regles CSS. Normalment se li posa extensió .css però pot tenir l’extensió que es vulgui.

Associar un document XML

L’XML permet a l’usuari especificar les seves etiquetes pròpies i no en porta cap de predefinida, o sigui que en XML les etiquetes <style> i <link> no existiran, o si existeixen estaran dotades d’un significat diferent del que tenen en HTML.

Per aquest motiu els fulls d’estil en documents basats en XML es defineixen fent servir la instrucció de procés xml-stylesheet (figura).

Figura Definició de la instrucció de procés xml-stylesheet

La majoria dels atributs tenen el mateix nom que en l’element <link> d’HTML (excepte rel, que aquí no es pot fer servir).

Altres paràmetres

Tant <link> com <?xml-stylesheet ?> permeten tota una sèrie d’atributs a part dels dos bàsics (type i href) que tenen per objectiu passar més informació al programa per representar el document (taula).

Taula: Paràmetres de càrrega de CSS
Atribut Descripció
title El nom o el títol del full.
media Indica sota quin medi s’ha de carregar el CSS.
charset Codi de caràcters que fa servir el full d’est’l.
alternate Indica si el CSS és preferit o no.

Sense cap mena de dubte, dels atributs que hi ha el més usat és media, que permet que s’apliqui un estil o un altre en funció del dispositiu amb què s’està intentant visualitzar el document.

Gràcies a l’atribut media es poden fer fulls d’estil que s’aplicaran en funció de quin sigui el dispositiu que vol llegir el document (taula).

Taula: Valors possibles en l’atribut media
valor dispositius
screen Per ser visualitzat en un monitor de PC
print Sortida en paper: impressores, etc.
tty Sortida en terminals, teletips, etc.
handheld PDA, telèfons mòbils, etc.
braille La sortida es generarà en dispositius tàctils per a cecs.
aural Per sortir en lectors de pantalla, sintetitzadors de veu, etc.
tv Televisors, consoles de videojocs, etc.

Tot i que el suport en els navegadors està millorant, normalment (excepte per als atributs screen i print) els navegadors no sempre compleixen l’estàndard i no hi ha gaires garanties que si es navega per la pàgina amb un navegador de telèfon mòbil, per exemple, aquesta faci servir el full d’estil marcat com a handheld i no pas un altre.

Si no s’especifica cap valor a l’atribut media s’està indicant que el que s’està definint és el full d’estil per defecte.

  1. <?xml-stylesheet href="web.css"?>
  2. <?xml-stylesheet media="print" href="imprimir.css"?>
  3. <?xml-stylesheet media="handheld" href="mobils.css"?>

En cas d’especificar diversos fulls d’estil es barrejaran les regles de tots i en cas de conflicte es faran servir les definicions especificades més tard. Això permet fer fulls d’estils personalitzats per a algunes pàgines sense que es perdi l’aspecte global d’una web.

  1. <?xml-stylesheet href="empresa.css"?>
  2. <?xml-stylesheet href="departament.css"?>

Regles CSS

Els documents de CSS normalment seran una llista de regles en què cada una té una forma semblant a la que es mostra en la figura.

Figura Forma bàsica de les regles CSS

Els elements es van passant a CSS i aquest determina quines són les regles que se’ls ha d’aplicar a partir del selector. Per exemple, si es té el CSS següent quan s’està analitzant l’etiqueta cognom d’un document:

  1. nom { color: red; }
  2. cognom { color: blue; }

La regla de la primera línia fallarà, ja que no quadra el selector nom amb l’etiqueta cognom i per tant la regla s’ignorarà. En canvi, com que la segona regla sí que coincideix amb l’etiqueta aquesta sí que serà aplicada en la representació de l’etiqueta.

Cal tenir en compte que no s’aplica només a la primera regla, sinó a totes les regles que es puguin aplicar a l’element.

Un cop determinades les regles s’aplicaran els valors de les propietats que s’especifiquin en la declaració a l’element. En l’exemple anterior, per tant, es modificarà la propietat ‘color’ de l’etiqueta <cognom> amb el valor ‘blue’ que farà que el text es representi de color blau:

  1. color:blue;

A pesar que en l’exemple anterior només es canvia una de les propietats de l’etiqueta, CSS permet que en una regla es puguin especificar tantes propietats com calgui, sempre que es vagin separant l’una de l’altra amb un punt i coma (;).

  1. persona {
  2. color: red;
  3. margin: 5px;
  4. }

Selectors

Els selectors són un dels components bàsics de CSS, ja que serveixen per determinar quines regles s’han d’aplicar a cada element i quines no.

Per facilitar la tasca de seleccionar les etiquetes, CSS defineix diferents tipus de selectors:

  • Universal
  • D’etiquetes
  • De fills
  • De descendents
  • De germans adjacents
  • Per ID
  • De classes
  • D’atributs
  • De pseudoclasses
Selector universal

El selector universal es representa amb un ‘*’ i es fa servir per seleccionar tots els elements d’un document.

Això vol dir que es pot fer servir per definir característiques que seran aplicades a totes les etiquetes del document. Per exemple, amb això s’està definint que s’ha de pintar tot el text de color vermell:

  1. * { color: red; }

Per tant, aplicat al codi:

  1. <alumnes>
  2. <nom>Pere</nom>
  3. <cognom>Garcia</cognom>
  4. </alumnes>

S’obtindrà tot el text del document de color vermell (figura).

Figura Aplicació del selector universal
Selector d'etiquetes

Es pot seleccionar un element específic simplement amb el nom. En aquest codi se seleccionen totes les etiquetes nom del document:

  1. nom { color: red; }
  2. cognom { color: blue; }

Que si s’aplica al codi següent

  1. <classe>
  2. <alumnes>
  3. <alumne>
  4. <nom>Pere</nom>
  5. <cognom>Garcia</cognom>
  6. </alumne>
  7. <alumne>
  8. <nom>Manel</nom>
  9. <cognom>Puig</cognom>
  10. </alumne>
  11. </alumnes>
  12. </classe>

Pintarà els <nom> vermells i els <cognom> blaus (figura).

Figura Exemple de selector d’etiquetes

S’ha de tenir en compte que no solament se seleccionen els elements del mateix nivell, sinó tots els elements que tinguin el mateix nom d’etiqueta sense importar en quin nivell estiguin.

Si es volen aplicar les mateixes característiques a diversos elements, es poden especificar separant-los per comes. En l’exemple següent es pinta el text de <nom> i <cognom> de color vermell.

  1. nom, cognom { color:red; }

Tampoc no seria cap error especificar-los per separat:

  1. nom { color:red; }
  2. cognom { color:red; }
Selector de fills

El selector de fills es fa servir per seleccionar les etiquetes filles directes d’una altra. Es fa servir el símbol > per definir el pare i el fill.

Per exemple, si es parteix d’aquest XML

  1. <classe>
  2. <professor>
  3. <nom>Marcel</nom>
  4. <cognom>Puig</cognom>
  5. </professor>
  6. <alumnes>
  7. <alumne>
  8. <nom>Pere </nom>
  9. <cognom>Garcia</cognom>
  10. </alumne>
  11. <alumne>
  12. <nom>Joan</nom>
  13. <cognom>Ferrarons</cognom>
  14. </alumne>
  15. </alumnes>
  16. </classe>

I se li aplica aquest CSS:

  1. alumne > nom { color: red; }

El resultat serà que només els elements <nom> descendents d’<alumne> són pintats de vermell (figura).

Figura Selecció dels noms dels alumnes

No hi ha cap problema a fer servir altres selectors en combinació amb aquest. Per tant, si volem que es pintin de color vermell tant els noms com els cognoms dels alumnes es pot definir la regla d’aquesta manera:

  1. alumne > nom, cognoms { color: red; }

El resultat serà el de la figura.

Figura Selecció dels noms i cognoms dels alumnes

També es pot fer servir el selector d’etiquetes per triar diferents pares. Si es vol que els noms dels alumnes i dels professors siguin de color vermell simplement se n’especifiquen les etiquetes una rere l’altra.

  1. alumne, professor > nom { color: red; }
Selector de descendents

Una possibilitat alternativa consisteix a definir que es vol que l’estil s’apliqui a algun dels descendents d’un element.

Per especificar que es vol fer servir aquest selector simplement es posen els noms dels elements l’un al costat de l’altre. Fent servir aquest selector s’aconsegueix pintar el cognom dels alumnes de color vermell i deixar el dels professors (figura).

  1. alumnes cognom { color:red; }
Figura Selecció de descendents

Es poden combinar amb el selector d’etiquetes cada un dels dos termes, de manera que amb el codi següent pintem el nom i cognom dels alumnes i dels professors de color vermell.

  1. alumnes,professor nom,cognom { color: red; }
Selector de germans adjacents

El selector de germans adjacents serveix per seleccionar elements que comparteixin el mateix pare i estiguin situats immediatament l’un rere l’altre.

En el codi XML següent:

  1. <classe>
  2. <alumne>
  3. <delegat/>
  4. <nom>Pere</nom>
  5. </alumne>
  6. <alumne>
  7. <nom>Joan</nom>
  8. </alumne>
  9. <alumne>
  10. <nom>Marcel</nom>
  11. </alumne>
  12. </classe>

El CSS permet seleccionar aquests elements fent servir el símbol +. Per fer que el nom dels alumnes que estigui just darrere de l’atribut delegat siguin pintats de color vermell definirem la regla següent:

  1. delegat+nom { color: red; }

El navegador només mostrarà de color vermell el text de l’etiqueta <nom> que sigui posterior a un element <delegat> (figura).

Figura Selecció del germà de delegat

No es poden seleccionar elements que siguin de diferents nivells perquè no comparteixen el mateix pare. En el següent codi:

  1. <classe>
  2. <professor>
  3. <nom>Marcel Puig</nom>
  4. </professor>
  5. <alumne>
  6. <nom>Frederic Pi</nom>
  7. </alumne>
  8. <alumne>
  9. <nom>Manel Puigdevall</nom>
  10. </alumne>
  11. </classe>

Aquest CSS no hi tindrà cap efecte a pesar de que els elements alumne i nom són adjacents:

  1. alumne+nom { color: blue; }
Selector per ID

L’atribut id es fa servir per poder identificar elements concrets dins d’un document XML o HTML. Per tant, l’atribut id només especificarà un sol element dins d’un document.

  1. <classe>
  2. <professor>
  3. <nom>Marcel</nom>
  4. <cognom>Puig</cognom>
  5. </professor>
  6. <alumnes>
  7. <alumne id="delegat">
  8. <nom>Pere </nom>
  9. <cognom>Garcia</cognom>
  10. </alumne>
  11. <alumne>
  12. <nom>Joan</nom>
  13. <cognom>Ferrarons</cognom>
  14. </alumne>
  15. </alumnes>
  16. </classe>

Es poden seleccionar els elements pel seu id fent servir el símbol #

  1. alumne#delegat { color:red; }

Alguns navegadors encara fallen en seleccionar elements amb l’atribut id en documents XML.

Aquest codi pintarà de color vermell l’element que tingui l’atribut id amb el valor delegat (figura).

Figura Selecció per l’identificador delegat
Selector de classes

Podria passar que, en algun document, a etiquetes que tenen el mateix nom a vegades els volem aplicar un estil i a vegades un altre.

Això és molt usat en HTML però no sol funcionar en XML tret que tingui l’espai de noms d’XHTML definit.

Això se soluciona especificant l’atribut class en els elements, com en l’exemple següent:

  1. <p class="normal">
  2. Els fitxers de marques només són arxius de text que
  3. es poden obrir amb un <span class="important">editor de textos</span>
  4. senzill.
  5. </p>
  6.  
  7. <p class="important">
  8. Tot i que els editors especialitzats ens ajudaran a no
  9. cometre errors.
  10. </p>
  11.  
  12. <p class="normal">
  13. Per tant, la creació de documents XML està
  14. a l'abast de tothom.
  15. </p>

Es poden seleccionar els atributs per classes amb el nom de l’etiqueta, un punt i el nom de la classe:

  1. p.important {
  2. color:red;
  3. }

Com que l’atribut class mateix es pot especificar en diferents elements, es pot fer una selecció de tots els atributs del mateix nom si no s’hi especifica el nom de l’element.

  1. .important { color:red; }

Això donarà el que es mostra en la figura.

Figura Selecció de tots els elements d’una classe

Els elements poden pertànyer a més d’una classe alhora. Simplement s’hi posen els diferents noms de classes separats per un espai.

  1. <p class="important ressaltat">Oh!</p>
Selector d'atributs

També hi ha un selector que permet triar les etiquetes en funció dels seus atributs.

  1. <classe>
  2. <alumnes>
  3. <alumne aprovat="si" delegat="si">
  4. <nom>Pere</nom>
  5. <cognom>Garcia</cognom>
  6. </alumne>
  7. <alumne aprovat="si">
  8. <nom>Jordi</nom>
  9. <cognom>Ferrarons</cognom>
  10. </alumne>
  11. <alumne aprovat="no">
  12. <nom>Manel</nom>
  13. <cognom>Puigdevall</cognom>
  14. </alumne>
  15. <alumne aprovat="si">
  16. <nom>Frederic</nom>
  17. <cognom>Pi</cognom>
  18. </alumne>
  19. </alumnes>
  20. </classe>

Es pot triar per si l’atribut existeix. Per exemple, per fer que el delegat sigui pintat de color verd (figura).

  1. alumne[delegat] { color: green; }
Figura A partir de l’atribut pinta de color verd el delegat del curs

També es pot seleccionar per a atributs que tinguin un determinat valor. Per exemple es poden marcar els aprovats i no aprovats de colors diferents:

  1. alumne[aprovat="si"] { color:blue; }
  2. alumne[aprovat="no"] { color:red; }

Que ens mostraria això (figura).

Figura Diferenciar els aprovats dels no aprovats

O fins i tot seleccionar per diversos atributs, per aconseguir condicions més complexes. En l’exemple següent definim que si el delegat ha aprovat el pinti verd i si no ha aprovat el pinti groc:

  1. alumne[aprovat="si"][delegat] { color: green; }
  2. alumne[aprovat="no"][delegat] { color: yellow; }

En el cas que els valors de l’atribut siguin una llista es pot fer servir l’operador especial ~= per seleccionar si algun dels valors és un valor en concret.

L’atribut moduls defineix tres valors per a l’element alumne:

  1. <alumne moduls="XML BDD Programació"/>

Es poden seleccionar tots els elements <alumne> que tinguin el valor XML en l’atribut amb aquesta regla:

  1. alumne[moduls]~="XML" { color: red; }
Selectors de pseudoclasses

La idea d’aquests selectors és permetre seleccionar elements a partir d’una condició que no sigui el seu nom.

Les pseudoclasses se separen del nom de l’element al qual s’aplicaran amb dos punts (:).

Hi ha diverses pseudoclasses disponibles, que es poden veure en la taula.

Taula: Pseudoclasses de CSS
Pseudoclasse Significat
first-child Permet seleccionar el primer element de la classe actual.
link Selecciona l’element si és l’origen d’un enllaç ja visitat.
visited Per als enllaços visitats d’un tipus determinat.
active Per als elements que s’estan activant (essent clicats, etc.).
linking Per a enllaços en XLink.
hover Elements que tenen el cursor al damunt.
focus Tria l’element que té el focus.
lang Permet triar els elements amb l’etiqueta especificant un idioma determinat.

Per tant, en aquest exemple:

  1. <alumnes>
  2. <nom>Frederic Pi</nom>
  3. <nom>Pere Garcia</nom>
  4. <nom>Manel Puigdevall</nom>
  5. </alumnes>

Es poden definir característiques especials per al primer alumne de la llista fent servir una pseudoclasse:

  1. alumnes:first-child {
  2. color: red;
  3. }
Resolució de conflictes

Es pot donar el cas en què, en seleccionar les regles per aplicar a un element, una propietat estigui definida en diverses regles de les que se li han d’aplicar. I a més, que els valors d’aquesta propietat es contradiguin.

Quan a un element se li pot aplicar la mateixa propietat segons regles diferents i aquestes es contradiuen, el CSS defineix que la regla per aplicar ha de ser la més específica.

Per exemple, com que les regles nom de l’exemple següent es contradiuen s’agafarà la primera regla perquè és més concreta –defineix més clarament a quins elements s’està fent referència:

  1. alumnes nom { color: red; }
  2. nom { color: blue; }

Per tant, els noms sortiran de color vermell (figura).

Figura En cas de conflicte es tria la regla més específica

Si hi ha regles que són igual d’específiques, aleshores s’aplicarà la que s’hagi especificat més tard. En l’exemple següent les regles són igual d’específiques i, per tant, es triarà la segona:

  1. nom { color:red; }
  2. nom { color:blue; }

O sigui, que pintarà el nom de color blau (figura).

Figura En cas de conflicte es tria la regla més específica

Declaracions

La declaració és el segon terme de les regles CSS i és la part que s’encarregarà de donar el format a les etiquetes. Es defineix entre claus ”{ }” i estarà formada per una o més propietats. A cada propietat se li assignarà quin és el valor desitjat.

Per exemple, per fer que el text de l’atribut alumne sigui vermell es pot fer servir la propietat color i se li assigna el color amb la paraula “red” aprofitant que alguns dels colors es poden usar fent servir el nom en anglès:

  1. alumne { color: red; }

Podem afegir tantes propietats com calguin en una regla. Es poden fer declaracions tan llargues com calgui:

  1. alumne { color: red;
  2. padding: 35px;
  3. border-style: solid;
  4. border-color: black;
  5. border-width: 1px;
  6. }

Per tant, coneixent les propietats de CSS es tindrà un potent mecanisme per representar les dades en documents XML i HTML.

Herència

La primera lletra de CSS és de cascading (‘cascada’, en català), i indica que les propietats de les etiquetes no cal que es vagin repetint indefinidament, ja que s’hereten. Això vol dir que si apliquem unes propietats a un element, els seus elements fills automàticament les adquireixen.

Si tenim el document següent:

  1. <alumnes>
  2. <alumne>
  3. <nom>Frederic</nom>
  4. <cognom>Pi</cognom>
  5. </alumne>
  6. </alumnes>

Si assignem el color vermell a l’element <alumne> automàticament els elements <nom> i <cognom> també adquiriran el color vermell.

  1. alumne { color: red; }

Per evitar aquest comportament en algun dels descendents només cal sobreescriure la propietat amb una regla nova. Per exemple, si volem <cognom> de color blau li assignem explícitament:

  1. alumne { color: red; }
  2. cognom { color: blue; }

Ara <alumne> rep per herència que ha de fer servir el color vermell, però com que ell té blau i aquesta és una regla més específica es pintarà blau (figura).

Figura Es pot evitar l’herència de propietats sobreescrivint-les

Model de caixes

El CSS tracta tots els elements com si estiguessin dins d’una caixa rectangular que envolta el contingut (figura). En aquesta caixa es poden definir una sèrie de marges:

  • padding: marge intern entre el contingut i la caixa.
  • margin: marge entre la caixa i les altres caixes adjacents.

La caixa pot tenir una línia al seu voltant, que el CSS anomena border.

Figura El contingut dels elements CSS fa servir el model de caixes

Però com que tant l’XML com l’HTML fan servir etiquetes niuades normalment tindrem caixes que estan dins d’altres caixes (figura).

Figura El contingut dels elements CSS poden ser altres caixes

Per defecte:

  • En XML quan es posicionen les caixes si no es diu el contrari sempre es col·loquen una al costat de l’altra fins que s’acaba l’espai horitzontal. Quan no queda més espai es representa la caixa següent a sota (figura)
  • En HTML algunes etiquetes fan com les d’XML i d’altres no permeten tenir altres caixes al costat.
Figura El posicionament per defecte col·loca les caixes horitzontalment

Es pot canviar el comportament per defecte de dues maneres:

  • Amb la propietat display.
  • Posicionant les caixes.

Propietat display

Els elements tenen una propietat display, que entre d’altres coses determina com es posiciona la caixa respecte a les altres:

  • block: treballa amb blocs de contingut. Fa que les caixes acabin com si tinguessin un salt de línia darrere seu. Per tant, es trenca amb el posicionament per defecte.
  • inline: permet que les etiquetes flueixin amb la resta del contingut. Aquest és el comportament per defecte en representar contingut XML.

Per tant, si es té un codi XML com aquest:

  1. <alumnes>
  2. <nom>Pere</nom>
  3. <nom>Frederic</nom>
  4. <nom>Manel</nom>
  5. </alumnes>

El resultat de mostrar-lo amb un navegador si no li definim cap estil serà posar-los inline com en la figura.

Figura El document es presenta per defecte en ‘inline’

En canvi, si canviem la propietat display de l’element <nom> a block:

  1. nom { display:block; }

Ens afegirà un salt de línia darrere de cada un dels elements com en la figura.

Figura El resultat de mostrar les caixes amb ‘block’

Posicionament de caixes

El posicionament en CSS reposa sobre tres opcions:

  • Normal
  • Relatiu
  • Flotant
  • Absolut
Posicionament normal

El posicionament normal és el posicionament per defecte i consisteix a anar posant les caixes una al costat de l’altra horitzontalment fins que no hi hagi espai per posar-ne una altra. Quan això passi les següents es posen al principi de la línia següent i tornem a començar

Una cosa que s’ha de tenir en compte és que els marges horitzontals de les caixes es respecten i s’acumulen. Per tant, dos elements alumne que tinguin la definició de format següent estaran separades 40 píxels:

  1. alumne { margin: 20px; }

En canvi verticalment els navegadors mesclen els marges, de manera que no se sumen els marges sinó que s’agafa el més gran. Per tant, amb la mateixa definició anterior les caixes estaran separades només 20px verticalment.

Posicionament relatiu

Si se segueix el posicionament normal les caixes ja tenen un lloc en el qual posicionar-se però es pot canviar aquest lloc convertint el posicionament de la caixa amb position: relative. Amb això s’aconsegueix que la caixa es mogui de la posició que li tocava indicant-li en quina quantitat.

Ens podem moure de les posicions normals amb left, right, top, bottom.

Per tant si partim del document següent:

  1. <alumnes>
  2. <nom>Pere</nom>
  3. <nom delegat="si">Frederic</nom>
  4. <nom>Manel</nom>
  5. </alumnes>

Les dades de mesura que indiquem en el posicionament relatiu sempre es computen en relació amb la caixa anterior.

Si li afegim les regles següents per canviar-li la posició esquerra on ha de sortir l’element amb el position: relative i afegint 30 píxels a la posició esquerra:

  1. nom { display:block; }
  2. nom[delegat] {
  3. position: relative;
  4. left:30px;
  5. }

En visualitzar el document es veurà que el posicionament de l’etiqueta ha canviat (figura).

Figura Canvi en les posicions relatives d’un element
Posicionament flotant

El posicionament flotant ens permet col·locar la caixa de manera que quedi surant en la part de la pantalla que li especifiquem.

La propietat que es fa servir per marcar posicionament com a flotant és float, que pot tenir els valors de la taula.

Taula: Valors de la propietat float
Valor Significat
left La caixa es quedarà tant a l’esquerra com pugui.
right La caixa es quedarà tant a la dreta com pugui.
none La caixa no és flotant.
inherit Ha de fer el mateix que faci el seu element pare.

Per tant, si es parteix d’aquest exemple:

  1. <classe>
  2. <professor>
  3. <nom>Marcel Puig</nom>
  4. </professor>
  5. <alumnes>
  6. <nom>Pere Gallerí</nom>
  7. <nom delegat="si">Frederic Pi</nom>
  8. <nom>Manel Fontcoberta</nom>
  9. <nom>Llucia Martí</nom>
  10. </alumnes>
  11. </classe>

En aplicar-li les regles següents:

  1. professor {
  2. float: right;
  3. width: 50%
  4. color:red;
  5. }

El nom del professor apareixerà a la dreta de la pantalla, mentre que els alumnes apareixeran normalment (figura).

Figura El professor en ser float apareix a la dreta

Una de les característiques interessants de float és que fa que el contingut de les altres caixes aparegui al seu voltant.

Es pot donar el cas que sí que quedi sobre alguns elements posteriors si es dóna el cas que els elements del seu voltant siguin molt més petits que el float.

Per evitar que passi això es pot afegir un valor a l’atribut clear en els elements que no vulguem que siguin adjacents a una finestra float (taula).

Taula: Valors de la propietat clear
Valor Significat
left El costat esquerre no pot ser adjacent a un float.
right El costat dret no pot ser adjacent a un float.
both No es permeten caixes flotants en cap dels seus costats.
inherit Ha de fer el mateix que faci el seu element pare.
none Ha de fer el funcionament per defecte.

Per tant, si s’afegeix clear a l’etiqueta <nom> de l’exemple anterior:

  1. professor {
  2. float: right;
  3. width: 50%
  4. color:red;
  5. }
  6. nom {
  7. display:block;
  8. clear: right;
  9. }

El resultat serà que els alumnes no permeten <professor> a la seva esquerra, i per tant baixen un nivell (figura).

Figura L’atribut clear impedeix que hi hagi floats a la dreta
Posicionament absolut

El posicionament absolut serveix per posicionar exactament la caixa en un lloc determinat. Les caixes que es posicionen amb posicionament absolut surten del flux normal de representació.

Per fer posicionament absolut es fa servir l’atribut position, que només pot tenir dos valors: absolute i fixed (vegeu taula).

Taula: Valors de l’atribut position
Valor Funcionament
absolute Posiciona la caixa exactament en la posició especificada.
fixed La caixa es col·loca en una posició fixa de la pantalla. Això fa que no es mogui mai encara que el document pugi i baixi.

El posicionament fixed només té sentit per mostrar el document per pantalla. No té cap sentit per imprimir, etc.

Per tant, es pot posicionar un element en el lloc on es vulgui. Per exemple, a 200 píxels a l’esquerra i 20 des de dalt.

  1. professor {
  2. position:absolute;
  3. left:200px; top:20px;
  4. width: 100px;
  5. height: 50px;
  6. background-color:blue;
  7. }

A diferència del posicionament relatiu, en aquest tipus de posicionament les mesures que definim són relatives al total de les mides de la pàgina, i no pas a algun dels elements que conté aquesta.

Aquest codi mostraria el que es veu en la figura.

Figura L’element professor amb posicionament absolut

Les caixes amb posicionament absolut, en no estar dins del flux normal de representació, poden quedar per sota o per sobre de les altres (figura), i per aquest motiu se solen especificar amb l’amplada i alçada.

Figura Problemes amb el posicionament absolut

Propietats

En cada una de les versions de CSS s’han anat afegint propietats noves que es poden aplicar a cada element.

Seria excessiu veure-les totes i, per tant, ens concentrarem en les més usades. De totes maneres es poden consultar totes les propietats disponibles en l’especificació oficial al web de W3C (http://www.w3.org/TR/CSS21/propidx.html).

No s’ha d’oblidar que no tots els navegadors suporten totes les propietats de CSS, de manera que sempre s’haurà de provar quin és l’efecte de les regles en diversos navegadors.

Podem dividir les propietats en tres grans grups:

  1. Propietats de caixa: permetran definir característiques de la representació de les caixes que contenen els elements.
  2. Propietats de text: ens permetran definir com ha de ser representat el contingut textual del document.
  3. Propietats de color: definiran el color en què s’han de representar els continguts i les caixes.

Unitats

Algunes propietats necessitaran que els especifiquem un color o unes dimensions. En aquests casos, el CSS ofereix diverses alternatives per poder definir-hi un valor.

Colors

Per especificar colors es poden fer servir diversos sistemes però el més corrent és fer-ho en RGB (red, green, blue), que consisteix a barrejar quantitats de cada color per representar-ne d’altres.

Això es pot fer amb la funció rgb():

  1. nom {
  2. color: rgb(250,20,10);
  3. }
  4. cognom{
  5. color: rgb(80%, 40%, 0%);
  6. }

O bé el seu valor en hexadecimal

  1. nom {
  2. color: #cc6600;
  3. }

També hi ha una sèrie de colors predefinits que es poden usar fent servir la paraula en anglès: red, blue, yellow, green, black, white…

  1. alumne {
  2. color:red;
  3. }
Mides

Quan alguna propietat demana que se li especifiqui una mida es poden especificar de dues maneres diferents:

  • Valors absoluts
  • Valors relatius

Les mides en valors absoluts són aquelles en les quals s’especifica la mida exacta en la qual es vol que es representi aquella propietat. És corrent definir-ho en píxels (px) però també es poden fer servir una sèrie de valors de text (small, medium, large… )

  1. nom {
  2. width: 50px;
  3. }
  4.  
  5. cognom{
  6. width: large;
  7. }

Unitats 'em'

Les unitats ‘em’ fan referència a l’increment o decrement sobre la mida de la font que s’està fent servir. Tenint en compte que la mida normal és 1em si s’especifica 2 em s’està dient que les lletres s’han de representar al doble de la mida normal. També es pot fer servir per reduir-ne la mida a la meitat amb 0.5em

També es poden especificar les mides en valors relatius. En aquest cas s’expressa l’increment o decrement de la mida per defecte del tipus de lletra de la caixa. Podem definir aquestes mides en percentatge (%) o en escalat (em).

alumne {
    width: 100px;
}

nom {
    width: 50%;
}

cognom 
{
    width: 1.2em;
}

Propietats de caixa

El CSS representa totes les marques com a caixes rectangulars. Per defecte les caixes tenen unes propietats per defecte però es poden canviar simplement redefinint-les. Es poden veure algunes de les propietats en la taula.

Taula: Algunes de les possibles propietats de caixa
Propietat Ús
margin Serveix per definir quin és l’espai entre caixes. Per defecte és 0.
padding Permet definir el marge intern d’una caixa. Per defecte és 0.
border Permet definir si s’ha de representar la línia que envolta la caixa. Per defecte no es fa.
width Permet definir l’amplada d’una caixa.
height Permet definir l’alçada d’una caixa.

Les propietats margin, padding i border especificades directament assignen els seus valors als quatre costats de la caixa. D’aquesta manera, amb aquest codi:

  1. nom {
  2. border: 1px black solid;
  3. padding:10px;
  4. }

El resultat serà que sortirà una línia que envoltarà tota la caixa i el contingut tindrà un marge intern de 10 píxels (figura).

Figura Canvi en el marge intern i una línia envoltant

Es poden definir els valors dels marges d’un costat en concret especificant els valors de cada costat (dalt, dreta, baix, esquerra: sempre en aquest ordre, com les agulles del rellotge).

  1. nom {
  2. padding: 30px 50px 1px 1px;
  3. }

O bé fent servir la versió de l’atribut que permet posar explícitament els valors:

  1. nom {
  2. padding-left:1px;
  3. padding-top: 30px;
  4. padding-right: 50px;
  5. padding-bottom: 1px;
  6. }

Les darreres regles ens mostraran la figura.

Figura Canvis en els marges interns dels elements

Una cosa semblant passa amb la propietat border, que permet especificar el gruix de la línia, el color i el tipus de línia que es vol.

  1. nom { border: 1px black solid; }

També es poden especificar les línies de cada un dels costats de manera individual:

  1. nom {
  2. border-top: 2px red solid;
  3. border-bottom: 2px blue dashed;
  4. border-left: 1px green dotted;
  5. border-right: 1px yellow outset;
  6. }

Que mostrarà una imatge com la de la figura.

Figura Aplicar propietats diferents per a cada línia

També es disposa de propietats per canviar només característiques concretes de la línia, com ara:

  1. nom {
  2. border-width: 1px;
  3. border-color: black;
  4. border-style: solid;
  5. border-top-color: red;
  6. }

Propietats de text

Un dels aspectes fonamentals a l’hora de donar format serà poder-ho fer al contingut de text dels documents. En CSS això es fa de dues maneres:

  • Propietats de tipus: fan referència a com es veuran les lletres
  • Propietats text: fan referència a com es mostrarà el bloc de text en conjunt
Propietats de tipus

Aquestes propietats permetran canviar tot el que fa referència al tipus de lletra que es fa servir per mostrar el text. Es poden canviar la majoria dels paràmetres de cop fent servir la propietat font.

  1. nom {
  2. font:italic bold 12px Verdana,Geneva,Arial,sans-serif;
  3. }

També es pot canviar només algun aspecte concret amb propietats més específiques com les de la taula

Taula: Propietats habituals del tipus font
Propietat Ús
font-family Permet especificar quin tipus de lletra fem servir i la família a la qual pertany. Normalment se n’hi posen diverses per si l’equip no té instal·lat el tipus de lletra demanat.
font-size Serveix per definir la mida del tipus de lletra que es fa servir.
font-weight Defineix el pes de la lletra. Generalment es fan servir negretes (bold) o rodones (normal), però hi ha més valors possibles.
font-style Permet definir l’estil de lletra. Els valors més corrents són cursiva (italic) o obliqua (oblique).
font-variant Sobretot es fa servir per convertir el contingut a versaletes (small-caps).

Famílies de tipus de lletra

Una família de tipus de lletra és un grup de tipus de lletra que comparteixen característiques comunes. En CSS se’n defineixen cinc famílies, que contenen un gran nombre de tipus:

  • sans-sefif: tipus de lletra de pal sec. Per exemple: Arial, Verdana, Helvetica…
  • serif: són els que contenen gràcies, que són unes línies de decoració en els extrems d’algunes lletres. Per exemple: Times, Georgia, Times New Roman…
  • monospace: tipus de lletra de mida fixa. Tots els caràcters ocupen el mateix espai. Per exemple: Courier.
  • cursive: en aquesta família les lletres semblen escrites a mà. Per exemple: Comic Sans…
  • fantasy: la família està formada per tipus de lletres en què les lletres tenen decoració afegida. Per exemple: Impact.

En l’XML següent…

  1. <alumnes>
  2. <alumne>
  3. <nom>Frederic</nom>
  4. <cognom>Pi</cognom>
  5. </alumne>
  6. <alumne>
  7. <nom>Pere</nom>
  8. <cognom>Garcia</cognom>
  9. </alumne>
  10. </alumnes>

apliquem aquest CSS:

  1. alumne {
  2. display:block;
  3. }
  4.  
  5. nom {
  6. font:italic bold 30px Georgia, serif;
  7. }
  8.  
  9. cognom {
  10. font-family:Times,serif;
  11. font-size:15px;
  12. }

Observeu que els tipus de lletra han canviat (figura).

Figura Canvis en els tipus de lletra
Propietats de text

A més de les propietats de les lletres també es poden canviar les propietats de com es visualitzarà el text. Podem canviar l’orientació, el color, l’espaiat entre línies, etc. (taula).

Taula: Propietats del text
Propietat Ús
word-spacing Espaiat entre paraules.
letter-spacing Espaiat entre lletres.
text-decoration Permet decorar el text amb subratllats o línies diverses.
vertical-align Alineació vertical del contingut dins de la caixa.
text-align Alineació del text en la caixa.
line-height Alçada de la línia de text.
color Color amb què es mostrarà el text.

Les regles següents:

  1. nom {
  2. text-decoration:underline;
  3. }
  4.  
  5. cognom {
  6. letter-spacing:20px;
  7. }

Generaran un resultat com el que es veu a la figura.

Figura Canvi de la representació del text

Propietats de color i d'imatge

Una altra de les característiques del model de caixes és que en el fons de les caixes es pot definir un color o una imatge

El color de fons es defineix amb background-color i s’hi especifica el color que es vol:

  1. nom {
  2. background-color: blue;
  3. }

Les imatges s’afegeixen passant l’URL de la imatge.

  1. nom {
  2. background-image: url('fons.png');
  3. }

El funcionament per defecte és omplir el fons repetint la imatge tantes vegades com calgui fins a cobrir-lo tot, tal com es mostra en la figura.

Figura Imatge de fons

Hi ha una sèrie de propietats que permeten canviar aquest comportament, que podeu veure en la taula.

Taula: Propietats del fons de caixa
Propietat Ús
background-repeat Defineix de quina manera s’ha de repetir la imatge, si s’ha de fer.
bakground-position Es fa servir per posicionar la imatge en un punt concret.
background-attachment Defineix si el fons es mourà en desplaçar la imatge o no.

Amagar contingut

A vegades pot interessar que no tot el contingut del document XML sigui mostrat, ja sigui perquè no aporta res a un lector humà o per altres raons.

Això es pot fer mitjançant dues propietats:

  • visibility
  • display:none

Propietat 'visibility'

La propietat visibility permet fer que algun element no es mostri quan es defineix en un determinat element.

Si partim del document següent:

  1. <persona>
  2. <nom>Pere</nom>
  3. <cognom>Gallerí</cognom>
  4. </persona>

Podem fer que no es mostri l’element <nom> definint la propietat hidden:

  1. persona {
  2. display:block;
  3. }
  4.  
  5. nom {
  6. visibility:hidden;
  7. }

En la figura podeu comprovar que, en efecte, no es mostra el nom si aquest té el valor visibility:hidden.

Figura Aplicar visibility:hidden

És important veure que, a pesar que no se’n mostra el contingut, encara s’està reservant l’espai que ocuparia.

Propietat display:none

Amb aquesta propietat el que s’aconsegueix és que l’etiqueta no sigui mostrada. Prenent el codi de l’exemple anterior, amb el CSS següent:

  1. persona {
  2. display:block;
  3. }
  4.  
  5. nom {
  6. display:none;
  7. }

S’aconsegueix que l’etiqueta <nom> no es mostri ni, a diferència del que passa amb visibility:hidden, es reservi cap espai (figura).

Figura El nom desapareix de la presentació

Afegir contingut a l'XML

Hi ha tota una sèrie d’aspectes que són molt diferents en XML i HTML. Per exemple l’HTML té etiquetes que s’encarreguen de mostrar el contingut en taules, llistes numerades, etc.

En XML totes aquestes ajudes per a la representació de la informació no existeixen i, per tant, s’haurà de buscar alguna alternativa per representar-les.

Crear taules XML

En HTML es pot fer servir <table> per fer taules però en XML no existeix aquesta etiqueta. No existeix perquè els documents XML no especifiquen de quina manera s’han de mostrar les dades.

Es pot simular la manera de mostrar les taules per pantalla fent combinacions de posicionament però això representa molta feina.

L’atribut display de CSS permet crear taules des del full d’estil amb les etiquetes de la taula. Això fa que es pugui associar cada una de les etiquetes del document a files, cel·les, etc.

Taula: Taules en CSS
Valor Descripcio
display:table Defineix que comença una taula.
display:table-row Defineix l’etiqueta com una línia de la taula.
display:table-cell L’etiqueta amb aquest valor serà una cel·la.

Si partim del document següent:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <classe>
  3. <alumnes>
  4. <alumne>
  5. <nom>Pere</nom>
  6. <cognom>Punyetes</cognom>
  7. </alumne>
  8. <alumne>
  9. <nom>Filomeno</nom>
  10. <cognom>Garcia</cognom>
  11. </alumne>
  12. <alumne>
  13. <nom>Mariano</nom>
  14. <cognom>Puigdevall</cognom>
  15. </alumne>
  16. </alumnes>
  17. </classe>

Es pot veure que la informació pot ser mostrada en forma de taules; si definim que la taula comença a <alumnes>, cada fila està representada per <alumne> i el contingut de cada cel·la seran les etiquetes <nom> i <cognom>:

  1. alumnes {
  2. display:block;
  3. display:table;
  4. margin:10px;
  5. }
  6.  
  7. alumne {
  8. display:table-row;
  9. }
  10.  
  11. nom, cognom {
  12. display:table-cell;
  13. border: 1px solid #000000;
  14. padding: 3px;
  15. border-spacing: 0px;
  16. }
  17.  
  18. nom { background-color:blue; }
  19. cognom {background-color:red; }

Amb la decoració afegida el resultat serà semblant al que es pot veure en la figura.

Figura Presentació de les dades XML en taules

Llistes de valors

A partir de determinades etiquetes es poden crear llistes de resultats fent servir la propietat display:list-item. Normalment aquests elements es mostren amb un cercle davant del seu valor

S’ha de vigilar de posar marge a la caixa que tindrà la llista perquè si no pot passar que quedi fora de pantalla.

Per exemple, en aquest document

  1. <persones>
  2. <persona>
  3. <nom>Pere Gallerí</nom>
  4. </persona>
  5. <persona>
  6. <nom>Frederic Pi</nom>
  7. </persona>
  8. </persones>

Es pot fer que es mostrin les <persones> en forma de llista amb un codi CSS com el següent:

  1. persona {
  2. display:block;
  3. margin-left:40px;
  4.  
  5. }
  6. persona {display:list-item; }

Es mostrarà el document tal com apareix en la figura.

Figura Representació en forma de llista

Per representar una llista es poden fer servir diferents propietats (taula) que permeten personalitzar-les tal com calgui.

Taula: Representar una llista amb CSS
Propietat Significat
list-style-type Permet definir de quin tipus serà la llista. Pot tenir una sèrie de valors numèrics o símbols. Per exemple: decimal, circle, square, disc
list-style-position Defineix si les marques han d’aparèixer abans o en el flux de text.
list-style-image Permet definir una imatge com a marca de la llista.

Per exemple, podem canviar el símbol d’ítem de llista per una imatge determinada.

  1. persona {
  2. display:block;
  3. margin-left:40px;
  4. }
  5.  
  6. persona
  7. {
  8. display:list-item;
  9. list-style-image: url("bola.png");
  10. }

Imatges en XML

En els documents de marques les imatges no s’afegeixen sinó que s’hi enllacen.

El problema és que l’XML no té cap etiqueta que serveixi per mostrar imatges, ni té cap manera de fer enllaços. Per tant, l’única manera que hi ha és per mitjà d’un llenguatge XML anomenat XLink.

XLink

L’XLink és un llenguatge basat en XML que està pensat per afegir enllaços als documents XML; en podeu trobar més informació en el web www.w3.org/TR/xlink .

Una opció alternativa consisteix a afegir les imatges per mitjà de la propietat background de les cel·les de CSS. Amb aquesta propietat podrem fer que aparegui una imatge en representar una etiqueta d’un document XML.

  1. logotip {
  2. display:block;
  3. background: url(logotip.png);
  4. background-repeat: no-repeat;
  5. }

Afegir text que no es troba en el document

Es pot afegir text nou en mostrar un document XML fent servir els pseudoselectors. Els pseudoselectors permetran afegir informació complementària a les etiquetes.

No tots els pseudoselectors funcionen amb XML.

Els pseudoselectors més usats són els que es mostren a la taula :

Taula: Pseudo-selectors
pseudo-selector Descripció
:first-letter Permet definir estils especials a la primera lletra del contingut seleccionat pel selector.
:fist-line Es fa servir per donar format a la primera línia d’un contingut de dades de bloc.
:before Permet afegir contingut abans d’un element.
:after Permet afegir contingut després d’un element.

Gràcies als pseudoselectors es pot afegir contingut a la representació fent servir la propietat content. Per exemple, en l’XML següent:

  1. <persones>
  2. <professor>
  3. <nom>Pere Gallerí</nom>
  4. </professor>
  5. <alumnes>
  6. <nom>Frederic Pi</nom>
  7. <nom>Filomenu Garcia</nom>
  8. <nom>Manel Puigdevall</nom>
  9. </alumnes>
  10. </persones>

es pot afegir el text “professor:” davant del nom del professor amb la regla :before:

  1. professor nom:before {
  2. content:"Professor:";
  3. color: red;
  4. }
  5. nom {display:block;}

I mostrarà el text “Professor:” abans del nom del professor (figura).

Figura Representació del document XML amb el text “professor”

Mostrar el valor dels atributs

El CSS no té cap manera senzilla de mostrar les dades que hi ha en els atributs. Fent servir els pseudoselectors es podran mostrar els valors dels atributs fent servir la funció attr().

En l’exemple següent els càrrecs es defineixen fent servir un atribut:

  1. <alumnes>
  2. <nom>Frederic Pi</nom>
  3. <nom carrec="delegat">Pere Garcia</nom>
  4. <nom>Manel Puigdevall</nom>
  5. <nom carrec="subdelegat">Maria Bosch</nom>
  6. </alumnes>

Si es vol mostrar la llista d’alumnes però que al costat surti el càrrec ho podem fer de la manera següent:

  1. alumnes {
  2. display:block;
  3. }
  4.  
  5. nom:after {
  6. content: "(" attr(carrec) ")";
  7. }

i mostrarà el de la figura figura.

Figura Mostrar l’atribut d’un document XML

Com que alguns elements no tenen l’atribut es mostren els parèntesis () sense contingut a dins. Això es pot solucionar posant el pseudoselector només pels elements que tenen l’atribut:

  1. nom[carrec]:after
  2. {
  3. font-size:8px;
  4. content: " (" attr(carrec) ")";
  5. }

El resultat final serà el que es mostra en la figura.

Figura Mostrar només els atributs dels elements que en tenen

Validació

Generalment els navegadors web que es troben amb una línia que conté algun error (una propietat mal escrita, unitats mal definides, etc…) o que no entenen (perquè no l’han implementat) la solen ignorar.

En conseqüència, una de les coses importants per no tenir problemes de representació del CSS és que el document segueixi tant com pugui els estàndards.

Figura Pàgina del W3C per validar CSS

Igual que en molts llenguatges de marques, podem validar el CSS per comprovar que no hi ha cap error i que no s’incompleix cap norma de l’especificació.

Els validadors de CSS ens permetran comprovar que el document de regles que estem definint no incompleix cap estàndard ni conté errors.

Hi ha diverses maneres de validar documents CSS però una de molt popular és el validador en línia del W3C jigsaw.w3.org/css-validator (figura).

HTML / XHTML

A pesar que es pot representar la informació fent servir XML i CSS, el més habitual sol ser representar-la en algun tipus de llenguatge de marques que estigui pensat per a la representació. El llenguatge de marques per excel·lència a l’hora de presentar la informació és l’HTML (hypertext markup language).

L’HTML va sorgir durant el 1989 quan Tim Berners-Lee va proposar un sistema d’hipertext per compartir documents científics per mitjà d’Internet perquè poguessin ser visualitzats des de diferents sistemes.

L’HTML és un llenguatge de marques que permet publicar informació molt diversa pensant en l’estructura dels documents i en com es representaran les dades que contenen. Ha tingut tant d’èxit que pràcticament s’ha convertit en una forma de comunicació universal.

L’HTML és una recomanació del W3C. El gran èxit que ha tingut ha provocat que n’hagin sortit diverses versions al llarg dels anys per intentar adaptar-se a les noves demandes dels usuaris.

HTML5

Des de la publicació de l’HTML 4.01 (1999), l’activitat de millora de l’HTML es van aturar perquè el W3C es va centrar en l’XHTML, ja que la intenció era que l’XHTML substituís completament l’HTML.

Com a resposta a la lentitud en els canvis en l’HTML, una sèrie d’empreses pel seu compte (Mozilla, Apple i Opera) van crear el WHATWG (Web Hypertext Application Technology Working Group), que es va centrar en crear l’HTML5. Des del 2007 el W3C torna a definir les recomanacions d’HTML.

L’objectiu fonamental de l’HTML5 és suportar les darreres tecnologies multimèdia mentre es manté el llenguatge de marques fàcil de llegir per als humans i fàcil d’entendre per als programes i dispositius. En podeu trobar més informació en els enllaços següents:

HTML

L’HTML està pensat per definir l’estructura d’un document de text a partir d’una sèrie d’etiquetes predefinides formades per un nom envoltat dels símbols < i >. Cada una de les etiquetes servirà per definir l’estructura d’un document a part d’aportar-li informació semàntica sobre el contingut respecte al document.

En les primeres versions, algunes de les etiquetes i propietats estaven pensades també per marcar quina seria la manera en què es representaria la informació, però actualment s’estan eliminant de l’estàndard.

Actualment la creació d’una pàgina web consistirà a definir l’estructura del document per mitjà d’HTML i definir-ne el format per mitjà dels fulls d’estil CSS.

La separació de la informació de l’estructura de les dades és un dels components clau per donar dinamisme a les pàgines web.

Definició de l'estructura d'un document

Si s’analitza un document de text a grans trets podem veure que té una estructura definida. Primer hi sol haver títols, text repartit en paràgrafs, imatges… (figura).

Figura Determinació de l’estructura d’un text

Aquestes parts són fàcils de detectar per una persona però no és igual de senzill que un programa ho pugui fer. L’HTML intenta definir l’estructura d’un document de manera que sigui senzill per a un programa interpretar què són cada una de les dades que va trobant. Per fer-ho fa servir tota una sèrie d’etiquetes que indicaran quin és el paper que tenen cada una de les dades en el document.

S’han definit etiquetes per marcar cada una de les seccions en què podem definir un document.

Títols

Es poden definir títols fent servir les etiquetes <h1>, <h2>,<h3>, <h4>, <h5> i <h6>. Aquestes etiquetes serveixen per definir diferents nivells de títols en un document.

Els navegadors, en carregar un document HTML, ja “comprenen” per defecte quin és el significat dels diferents nivells de títols i els representen convenientment: amb mides diferents i amb un salt de línia després (figura).

  1. <h1>Primer títol</h1>
  2. <h2>Segon títol</h2>
  3. <h3>Tercer títol</h3>
  4. <h4>Quart títol</h4>
  5. <h5>Cinquè títol</h5>
  6. <h6>Sisè títol</h6>
Figura Representació per defecte dels títols en el Firefox
Paràgrafs

Una de les parts bàsiques que formen un document solen ser els paràgrafs, que en HTML es defineixen fent servir l’etiqueta <p>.

Per defecte els paràgrafs acaben amb un salt de línia encara que no s’indiqui explícitament en el document (figura).

  1. <h1>Primer títol</h1>
  2. <p>Aquest és el primer paràgraf</p><p>Segon paràgraf</p>
Figura Representació dels paràgrafs en el Firefox
Agrupació de contingut

Gairebé sempre, els títols i un nombre determinat de paràgrafs d’un text estan lligats per un contingut semàntic comú. Però com que la representació de les dades pot reordenar el contingut del document cal algun sistema per mantenir aquestes parts unides.

L’HTML permet agrupar continguts que tenen algun tipus de lligam per mitjà de l’etiqueta <div>.

  1. <div>
  2. <h1>Titol 1</h1>
  3. <p>Contingut de text</p>
  4. <p>Més contingut de text</p>
  5. </div>

Generalment els elements <div> se solen identificar per mitjà d’atributs id o class perquè el full d’estil hi pugui fer referència de manera més senzilla.

Un cop es té el contingut agrupat convenientment es farà més fàcil per als fulls d’estil presentar el document reordenant els continguts d’un document sense que se’n perdi la coherència interna (figura).

Figura Amb div es pot reordenar coherentment
Ressaltar text

Hi ha tota una sèrie d’etiquetes més que tenen diverses funcions per a parts concretes del text:

  • Definir text com a citacions: <blockquote>, <q> i <cite>.
  • Marcar que s’ha de donar èmfasi a una part del text: <em> i <strong>
  • Definir contingut com abreviacions, acrònims i definicions: <abbr>, <acronym>, <dfn>
  • Permetre l’entrada de text preformatat: <pre> i <code>

Però moltes d’aquestes etiquetes poden ser substituïdes per l’etiqueta <span>. L’element <span> aporta una manera de separar lògicament contingut dins d’un paràgraf. Gràcies a aquesta separació es podrà donar un format diferent a parts del seu contingut.

Per defecte els navegadors representen les etiquetes <span> com a text normal, de manera que si volem que el text tingui un format diferent del normal se li haurà d’assignar per mitjà d’un full d’estil. És per aquest motiu que gairebé sempre s’hi afegeix un atribut id o class.

Figura El paràgraf té dues parts amb format diferent

Per exemple, si es volgués mostrar el text tal com apareix a la figura, es podria definir la part que ha de ser en negreta envoltant-la amb <span> d’aquesta manera:

  1. <h1>Cicles formatius de formació professional</h1>
  2. <p>dimarts, 12 d'abril de 2011 12:23</p>
  3. <p>Els cicles formatius són els ensenyaments que preparen per a l’exercici d’una professió determinada;
  4. s’agrupen en famílies professionals i poden ser de <span class="negreta">grau mitjà</span> o de <span class="negreta">grau superior</span>.
  5. </p>

I posteriorment, en el full d’estil, definint que es vol negreta en la classe negreta.

Imatges

Les imatges són un dels elements importants en les pàgines web. Podem classificar les imatges que trobem en una pàgina web en dos grans grups:

  • Imatges d’adornament: no són essencials per al contingut de la pàgina, simplement hi són per millorar-ne la presentació. Per tant, s’haurien de carregar des del CSS.
  • Imatges de contingut: formen part del contingut de la pàgina. Per tant, s’han de definir en el document.

És important saber que les imatges no s’afegeixen realment al document sinó que en aquest només s’hi desa una referència al lloc on les podem trobar via una URL.

Per definir imatges en un document es fa servir l’element <img>, que té dos atributs obligatoris:

  • L’atribut src, en què s’especificarà l’URL de la imatge.
  • L’atribut alt, que contindrà un text que visualitzaran els programes que accedeixin al document HTML però no tinguin capacitat gràfica per mostrar imatges.

En HTML l’etiqueta <img> no cal que sigui tancada però en XHTML ho ha d’estar per força.

Per tant, es pot fer que aparegui una imatge en qualsevol document HTML definint la imatge amb una línia com aquesta:

  1. <img alt="Pilota" src="pilota.png"/>
Llistes

Les llistes són una altra manera de representar la informació en HTML. Hi ha tres tipus de llistes disponibles (figura):

  • Llistes numerades
  • Llistes no numerades
  • Llistes de definicions

Les llistes numerades permeten especificar una sèrie de valors precedits per un nombre. Aquestes llistes comencen amb l’etiqueta <ol> i després cada un dels elements de la llista es col·loquen en un <li>.

En les llistes no numerades cada un dels elements de la llista està precedit per un símbol, que per defecte és un cercle. Es comença la definició per <ul> i posteriorment els elements es posen dins d’un <li>.

Les llistes de definició són les menys conegudes però permeten especificar dos valors per cada element: un per a un terme o una frase, i l’altre per a la definició. En aquestes llistes es comença la llista per <dl>, els termes per <dt> i la definició per <dd>.

Figura Representació de la informació en llistes
Taules

A vegades la presentació de dades requereix que aquestes siguin formatades en taules. L’HTML permet la definició de taules amb tot un grup d’etiquetes.

Les taules sempre es consideren un grup de files en què cada fila té unes quantes caselles. Hi ha un grup més d’etiquetes per representar capçaleres, peus de taula, unir caselles, però la idea sempre es basa en el mateix.

Les etiquetes bàsiques per representar les taules són tres: <table> per marcar l’inici d’una taula, <tr> per crear files, i la que representarà cada una de les cel·les dins d’una fila,<td>.

Formatat de pàgines amb taules

Durant molt de temps les taules es van fer servir per poder donar formats especials a les pàgines web. Això va comportar que es creessin moltes pàgines que no complien amb la idea bàsica de separar el contingut de la presentació. Aquestes pàgines acabaven sent molt difícils de mantenir i d’interpretar.

S’han de fer servir les taules només per a allò per al que van ser creades: mostrar informació tabulada.

El codi següent ens crea una taula de dues files i dues caselles a cada fila:

  1. <tr>
  2. <td>1</td>
  3. <td>2</td>
  4. </tr>
  5. <tr>
  6. <td>3</td>
  7. <td>4</td>
  8. </tr>

En ser representat, aquest codi ens donarà un document com el que es mostra a la figura (s’hi han afegit les línies per poder visualitzar-ne millor el resultat).

Figura Representació d’una taula

Esquema bàsic d'un document HTML

Els documents HTML només tenen una arrel, que serà l’element <html>. Aquesta etiqueta es fa servir per informar a qui llegeixi el document que el contingut del document és un fitxer HTML.

L’arrel només pot tenir dos elements fills:

  • <head>: és el lloc en el qual es pot posar informació sobre el document HTML. El títol, el creador, l’idioma, el full d’estil, etc. Molta d’aquesta informació no es visualitzarà en el navegador.
    • En la capçalera hi ha un element obligatori, <title>, en el qual s’especificarà el nom del document.
  • <body>: conté el contingut i l’estructura del document. Són les parts que es “veuen” en visualitzar el document HTML.
Declaració DOCTYPE

Segons els estàndards HTML cada document necessita una declaració del tipus de document, que ha de sortir abans de l’element <html>. Encara que no és estrictament necessari, és molt recomanable.

Amb l’etiqueta DOCTYPE es defineix quin és el vocabulari real que es fa servir en el document i quin és el tipus d’estàndard que es fa servir, i es dóna informació al possible validador sobre quina versió ha de fer servir per comprovar la sintaxi del document.

Tot i que en les primeres versions no es feien servir, també s’han definit DOCTYPE per a aquestes versions:

  • HTML 2
  1. <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
  • HTML 3.2
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Per a la versió 4.01 es van crear diferents conjunts de regles en funció d’una sèrie d’objectius. L’objectiu era que tothom fes servir la versió strict, però per criteris de compatibilitat es van definir altres versions.

  • Strict: no permet informació presentacional ni els elements declarats “per eliminar”. Tampoc no permet fer servir marcs.
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  • Transitional: permet elements i atributs que ja no es recomanen. Està pensat per compatibilitat respecte a versions anteriors. No es permeten marcs.
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Frameset: és idèntic al transitional però accepta marcs
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML també ha definit els seus DTD i a més la seva especificació defineix que s’han d’especificar obligatòriament:

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

En XHTML 1.1 això ja no es va fer d’aquesta manera i només hi ha una sola definició DOCTYPE per a tots els documents. XHTML 1.1 és igual que la versió 1.0 strict però hi afegeix suport per a mòduls.

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

Per tant, si escollim fer servir HTML 4.01 strict, l’esquelet bàsic d’un document XHTML serà com aquest:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  3. "http://www.w3.org/TR/html4/strict.dtd">
  4. <head>
  5. <title>Títol</title>
  6. </head>
  7. <body>
  8. ...
  9. </body>
  10. </html>

Enllaços

La possibilitat que els documents s’enllacin entre ells ha estat un dels aspectes clau en la popularitat de les pàgines web. L’objectiu dels enllaços és permetre tenir un apuntador unidireccional cap a una destinació qualsevol i que s’hi pugui accedir per mitjà d’una URL.

Hi ha diverses maneres de fer enllaços en HTML però la més corrent és l’etiqueta <a>. L’objectiu d’aquesta etiqueta és definir origen i destinacions dels enllaços.

L’únic obligatori que té aquesta etiqueta és href, que permet definir la destinació.

Les destinacions solen ser altres documents HTML.

  1. <a href="http://ioc.xtec.cat/">Web de l'IOC</a>

O documents d’altres tipus:

  1. <a href="http://ioc.xtec.cat/educacio/presentació.mp3">Presentació</a>

O fins i tot es poden enllaçar punts dins del document mateix. Per fer-ho només s’ha d’afegir el nom d’un origen que s’hi hagi definit i posar-hi el símbol # davant.

  1. <a href="#LLOC">Enllaç dins del document</a>

Els punts que poden ser destinacions dins d’un document es defineixen amb la mateixa etiqueta però fent servir l’atribut ‘id’ i un nom descriptiu únic. Per exemple, si es col·loca aquest codi en un document estem definint que pugui ser enllaçat amb el nom LLOC.

  1. <a id="LLOC" />

Tots els navegadors per defecte mostren els enllaços de manera diferent del text normal per facilitar que el lector els localitzi ràpidament (figura).

Figura Els enllaços es mostren de manera diferent per ser localitzats fàcilment

Formularis

Un formulari en HTML és una part especial que conté uns elements anomenats controls que permeten que l’usuari hi introdueixi algun tipus de dades.

Els formularis sobretot estan pensats per permetre que els usuaris enviïn informació emplenant o seleccionant els controls que conté.

Així, el codi següent:

  1. <form action="resultat.php" method="post">
  2. <p>
  3. <label for="nom">Nom:</label>
  4. <input type="text" id="Nom" />
  5. <label for="cognom">Cognom:</label>
  6. <input type="text" id="Cognom" />
  7. <input type="radio" name="tipus" value="professsor"/>
  8. <input type="radio" name="tipus" value="alumne"/>
  9. <input type="submit">
  10. </p>
  11. </form>

…ens mostrarà el resultat que podeu veure en la figura.

Figura Formulari en HTML

Convertir d'HTML a XHTML

XHTML (extensible hypertext markup language) és una recomanació oficial del W3C i defineix una sintaxi d’HTML compatible amb XML. O dit d’una altra manera, és un vocabulari XML vàlid.

Tot i que visualment l’HTML i l’XHTML són molt semblants, la diferència més important entre els dos llenguatges és que l’XHTML compleix les regles XML i per tant no permet que hi hagi etiquetes que s’obrin i no es tanquin o que no es mantingui l’ordre a l’hora de tancar les etiquetes obertes.

El compliment de les normes XML fa que els documents XHTML tinguin tendència a ser més grans però també tenen l’avantatge de que poden ser processats d’una forma més senzilla pels programes i que això els fa més fàcils de mantenir

La segona diferència important està en el fet de que durant els anys l’evolució d’HTML ha fet que hi apareguin algunes inconsistències en les que XHTML ha intentat posar ordre. Per exemple HTML fa servir en alguns elements els atributs id i name per pràcticament les mateixes coses

XHTML parteix de la idea actual de separar la presentació de les dades del seu contingut i per tant elimina algunes de les etiquetes d’HTML que es feien servir exclusivament per donar format (font, center, u, s, strike, color, align…). L’XHTML ja no es preocupa de l’aspecte de les coses sinó de què signifiquen. La manera com s’ha de representar es deixa per als navegadors o bé per als fulls d’estil.

Però també hi ha algunes diferències més com que mentre en HTML l’especificació del DTD que es fa servir és opcional en XHTML s’ha d’especificar sempre o que XHTML obliga a fer servir les minúscules per especificar les etiquetes i els atributs

Com que l’HTML deixava molta llibertat, molts documents necessiten bastants canvis per poder-se convertir en documents XHTML. Però com a contraprestació, un cop fet el canvi tindran l’avantatge que els documents obtinguts seran documents XML vàlids, i per tant podran aprofitar dels avantatges que ofereix l’XML. Es podran processar amb les mateixes eines que els documents XML i n’obtindran els avantatges derivats:

  • Seran més fàcils d’usar pels programes d’ordinador.
  • Es podran validar els documents amb els processadors XML.
  • Seran més petits perquè no contindran la informació sobre el format per aplicar.
  • Serà més senzill canviar-ne la presentació, ja que el codi HTML no s’haurà de tocar. I per tant, el mateix document es podrà representar de maneres alternatives i es podrà adaptar als nous dispositius.
  • S’hi podrà mesclar informació en altres llenguatges XML (SVG, MathML, etc..).

Declaració XML

La declaració XML és opcional en els documents XML però es recomana que tots els documents XHTML en tinguin.

  1. <?xml version="1.0" encoding="UTF-8"?>

Però a pesar de la recomanació la realitat és que no es fa servir gaire perquè un dels navegadors més usats, el Microsoft Internet Explorer, durant molt de temps, en trobar la declaració XML mostrava l’arbre XML en comptes de mostrar la pàgina web. Com es pot veure en la figura, en les darreres versions de l’Internet Explorer ja no és així, i per tant no hi ha excusa per no incloure la declaració XML en els documents HTML.

Figura Internet Explorer 8 ja no té problemes amb la declaració XML

Per tant, podem trobar molts documents que són XHTML però que no tenen la declaració XML, tot i que es recomana fer-la servir.

DOCTYPE

L’estàndard XHTML especifica que la declaració DOCTYPE és obligatòria. Per tant si es vol convertir un document HTML que no contingui la declaració DOCTYPE, en HTML era opcional, en un XHTML s’hi haurà d’afegir

Espai de noms

Com que l’XHTML està basat en XML, s’ha de definir l’espai de noms d’XHTML en l’etiqueta arrel :

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. ...
  3. </xhtml>

A més, tot i que no és obligatori, es recomana fer servir els atributs xml:lang i lang per definir l’idioma en el qual està escrit el document.

  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca" >
  2. ...
  3. </xhtml>

Eines de disseny web

Els documents HTML/XHTML només són documents de text i, per tant, es poden crear fent servir un simple editor de text, com es pot veure en la imatge (figura).

Figura Edició HTML des de consola

A pesar d’això hi ha tota una sèrie d’editors que ofereixen diverses ajudes per crear documents HTML de manera més ràpida i menys subjecta a errors.

Molts editors ofereixen alguna ajuda visual per a la creació de pàgines web. El més habitual és l’acoloriment de sintaxi HTML o fins i tot autocompletar durant l’edició (figura).

Figura Edició d’HTML amb el Komodo

A pesar de tot, els editors més populars són els editors HTML WYSIWYG (what you see is what you get) que permeten editar els documents HTML veient en tot moment com quin serà el resultat final.

Editors HTML WYSIWYG

L’objectiu principal d’aquests editors és permetre que qualsevol pugui crear documents HTML per crear pàgines sense ser un expert en el llenguatge. S’esforcen a fer que es pugui treballar gràficament en comptes de fer-ho editant el codi HTML.

Hi ha una gran llista d’editors d’aquest tipus, i no para de créixer:

  • Adobe Dreamweaver
  • Microsoft Expression Studio
  • CoffeCup HTML Editor
  • Kompozer
  • Amaya
  • BlueFish
  • Quanta Plus
  • etc.

Sempre s’haurien de fer proves per determinar quin és l’editor HTML que s’adapta més a les necessitats que es tinguin.

Barra d'eines

Normalment els editors basen el seu funcionament en una sèrie de botons en forma de barra d’eines (figura) que permeten arrossegar components sobre la pantalla d’edició.

Figura Barra d’eines del Kompozer
Vistes

Els editors HTML solen dividir la pantalla en diferents vistes per intentar facilitar les tasques als usuaris. En cada una de les vistes de treball l’usuari pot veure diferents aspectes de la web en funció de les necessitats de cada moment.

Normalment sempre solen tenir almenys dues vistes, una vista de previsualització (figura) i una vista de codi.

El més habitual serà treballar amb la vista de previsualització, ja que permet editar l’arxiu a més de veure en tot moment quin és l’aspecte que va prenent la pàgina.

Figura Vista de previsualització del Kompozer

En la vista de codi (figura) es pot veure i editar el codi HTML que ha anat generant el programa automàticament. Normalment es recorre a aquesta vista quan cal fer alguna tasca que no està prevista en l’editor gràfic, o per forçar que el codi compleixi amb l’estàndard.

Figura Vista de codi del Kompozer
Característiques extra

La major part dels editors solen oferir la possibilitat de fer més tasques a part de l’edició d’HTML assistida:

  • Permetre l’edició de fulls d’estil.
  • Facilitar la incorporació de codi en llenguatges de programació a la pàgina: Javascript, PHP…
  • Penjar la pàgina al servidor on ha de ser-hi.
  • etc.
Problemes

Però a pesar dels avantatges que ofereixen aquests editors també s’hi poden trobar alguns punts foscos:

  • No sempre són gaire estrictes en el seguiment dels estàndards.
  • No sempre tots els navegadors interpreten igual que els editors les pàgines i, per tant, podem tenir resultats inesperats.

Per tant, sempre que es dissenyi una pàgina s’hauria de validar el codi amb un validador i a més comprovar quin és el resultat de visualitzar la pàgina amb diferents navegadors.

Un dels validadors en línia més populars és el que ofereix el W3C a validator.w3.org (figura).

Figura Validador HTML/XHTML del W3C

Aquest validador a partir de la línia DOCTYPE analitza el document que hem fet i ens mostra els errors que hi trobi.

També ens permet comprovar quin seria el resultat si defínissim algun altre DOCTYPE. Per exemple, si validem la web de l’IOC contra XHTML 1.1 ens dóna 8 errors i ens explica com solucionar-los (figura).

Figura Errors en validar la web de l’IOC contra XHTML 1.1
Anar a la pàgina anterior:
Referències
Anar a la pàgina següent:
Activitats