El text central d’HTMLCC-BY-NC-ND • PID_00150449 8 El text central d’HTML dins el text per a aconseguir el sagnat desitjat, deixar més espai després d’un punt entre frases

El text central d’HTMLBen BuchananJenifer HanenMark Norman FrancisChristian Heilmann

PID_00150449

CC-BY-NC-ND • PID_00150449 2 El text central d’HTML

CC-BY-NC-ND • PID_00150449 El text central d’HTML

Índex

1. Etiquetar contingut textual en HTML ...................................... 71.1. L’espai: l’última frontera .............................................................. 7

1.2. Elements de bloc ........................................................................... 8

1.2.1. Títols de secció de pàgina .................................................. 8

1.2.2. Paràgrafs genèrics .............................................................. 9

1.2.3. Citar altres fonts................................................................. 9

1.2.4. Text preformatat ............................................................... 10

1.3. Elements en línia .......................................................................... 11

1.3.1. Cites curtes ........................................................................ 11

1.3.2. Èmfasi ................................................................................ 11

1.3.3. Text en cursiva ................................................................... 12

1.4. Elements presentacionals: no els heu de fer servir mai ............... 12

Resum ................................................................................................... 13

2. Llistes HTML ..................................................................................... 142.1. Els tres tipus de llistes ................................................................... 14

2.1.1. Llistes no ordenades .......................................................... 14

2.1.2. Etiquetatge de llistes desordenades ................................... 15

2.1.3. Llistes ordenades ................................................................ 15

2.1.4. Etiquetatge de llistes ordenades ......................................... 16

2.1.5. Començar llistes ordenades

amb un número diferent d’1 ............................................. 17

2.1.6. Llistes de definicions ......................................................... 18

2.2. Escollir entre tipus de llistes .......................................................... 20

2.3. La diferència entre llistes HTML i text ......................................... 20

2.4. Imbricar llistes ............................................................................... 21

2.5. Exemple pas a pas ......................................................................... 22

2.5.1. Etiquetatge de la pàgina principal .................................... 22

2.5.2. Afegir alguns estils ............................................................. 23

2.5.3. La pàgina de la recepta....................................................... 25

2.5.4. Etiquetatge de la pàgina de la recepta ............................... 26

2.5.5. Estils de la pàgina de la recepta.......................................... 27

Resum.................................................................................................... 28

Preguntes de repàs ............................................................................... 28

Lectures complementàries .................................................................... 29

3. Imatges en HTML ............................................................................. 303.1. Una imatge diu més que mil paraules, o no? ............................... 30

3.2. Diferents tipus d’imatges al web: imatges de contingut

i de fons ........................................................................................ 31

3.3. L’element img i els seus atributs .................................................. 31

3.3.1. Oferir una alternativa de text amb l’atribut alt .............. 32


3.3.2. Afegir informació pertinent amb l’atribut title ........... 33

3.3.3. Utilitzar longdesc per oferir una alternativa

a les imatges complexes ..................................................... 34

3.3.4. Visualització més ràpida de les imatges definint-ne

les dimensions amb width i height .............................. 36

3.4. Les imatges en línia ....................................................................... 37

3.5. Imatges de fons amb CSS............................................................... 37

3.5.1. Aplicació de fons amb el CSS ............................................. 37

Resum.................................................................................................... 39

Preguntes de repàs ................................................................................ 39

4. Enllaços HTML: construïm un web! ........................................... 414.1. Què són els enllaços?..................................................................... 41

4.2. L’anatomia d’un enllaç àncora ..................................................... 41

4.3. Enllaç o destinació? Els atributs id i href ................................... 42

4.4. No permeteu cap ambigüitat en els enllaços ............................... 45

4.4.1. Oferir informació addicional amb un atribut title ...... 45

4.4.2. Enllaços a recursos no HTML: no obligueu

els visitants a fer conjectures ............................................. 47

4.4.3. Enllaços externs i enllaços interns .................................... 48

4.5. Marcs i finestres emergents: ni parlar-ne! ..................................... 48

4.6. Avantatges dels enllaços de sortida i dels enllaços d’entrada ...... 49

4.7. Descripció dels enllaços ................................................................ 50

4.8. Estils dels enllaços ......................................................................... 51

Resum.................................................................................................... 51

Preguntes de repàs ................................................................................ 52

5. Taules HTML ..................................................................................... 535.1. La taula més bàsica ....................................................................... 53

5.2. Afegir-hi algunes altres funcions .................................................. 55

5.3. Seguir estructurant la taula ........................................................... 56

5.4. El CSS ens ajuda: una taula amb un aspecte millor ...................... 58

Resum ................................................................................................... 60


Lectures complementàries ................................................................... 61

6. Formularis HTML: conceptes bàsics ........................................... 626.1. Pas u: El codi bàsic ........................................................................ 62

6.2. Pas dos: Afegir-hi estructura i comportament .............................. 65

6.3. Pas tres: Afegir-hi semàntica, estil

i una mica més d’estructura ......................................................... 69

Resum.................................................................................................... 71


Lectures complementàries ................................................................... 72

7. Elements semàntics menys coneguts........................................... 737.1. Destacar la informació de contacte ............................................... 73


7.2. Llenguatges i codi de programació ............................................... 74

7.3. Mostrar la interacció amb ordinadors ........................................... 75

7.4. Variables ....................................................................................... 76

7.5. Cites ............................................................................................... 76

7.6. Abreviatures .................................................................................. 77

7.7. Instàncies definidores ................................................................... 78

7.8. Superíndex i subíndex .................................................................. 80

7.9. Salts de línia .................................................................................. 80

7.10.Línies horitzontals ....................................................................... 81

7.11.Canvis en els documents (inserir i suprimir) ............................... 82

7.12.Alguns elements HTML futurs ...................................................... 82

Resum.................................................................................................... 83

8. Contenidors genèrics: els elements div i span ........................ 848.1. Semànticament neutres ................................................................. 84

8.2. En línia i de bloc ........................................................................... 84

8.3. Més explicacions sobre l’agrupament del contingut..................... 85

8.4. Informació addicional ................................................................... 88

8.5. Lligams per a JavaScript, i també CSS ........................................... 89

8.6. “div-itis” ........................................................................................ 89

8.7. Semàntica inadequada................................................................... 89

8.7.1. “Paràgrafs” genèrics ........................................................... 89

8.7.2. Elements presentacionals .................................................. 90

Resum ................................................................................................... 90


9. Creació de múltiples pàgines amb menús de navegació ..................................................................................... 929.1. Les eines del vostre menú HTML: enllaços, àncores i llistes ........ 92

9.2. La necessitat de flexibilitat ............................................................ 93

9.3. Diferents tipus de menús .............................................................. 94

9.3.1. Navegació per la pàgina (contingut) ................................. 94

9.3.2. Navegació pel lloc ............................................................. 96

9.3.3. Menús contextuals ............................................................ 97

9.3.4. Mapes del lloc .................................................................... 98

9.3.5. Paginació ............................................................................ 98

9.4. Quan les llistes no són suficients: mapes d’imatge i formularis .. 99

9.4.1. Definir zones sensibles amb mapes d’imatge ................... 99

9.4.2. Estalviar espai de pantalla i evitar la sobrecàrrega

d’enllaços amb formularis ................................................. 101

9.5. On posar el menú, i oferir opcions per saltar-se’l ........................ 102

Resum ................................................................................................... 103


10.Validar l’HTML ................................................................................ 10510.1.Errors ............................................................................................ 105

10.2.Què és la validació? ...................................................................... 106


10.3.Per què validar? ............................................................................ 106

10.4.Els diferents navegadors interpreten l’HTML no vàlid

d’una manera diferent .................................................................. 107

10.4.1.El “quirks mode” ............................................................... 108

10.5.Com validar les pàgines ............................................................... 108

10.5.1.El validador d’HTML del W3C .......................................... 110

Resum ................................................................................................... 112


Altres eines que podeu utilitzar ........................................................... 112


1. Etiquetar contingut textual en HTMLMark Norman Francis

En aquest apartat explicaré els conceptes bàsics de l’ús de l’HTML per a des-

criure el significat del contingut dins el cos del vostre document.

Veurem elements estructurals generals com ara els títols i els paràgrafs i la in-

crustació de cites i codi. Després també veurem el contingut en línia, com ara

les cites curtes i l’èmfasi, i acabarem amb una anàlisi ràpida del contingut pre-

sentacional antiquat.

1.1. L’espai: l’última frontera

Una qüestió molt important que vull tractar abans de començar a parlar sobre

el text és la de l’espai, i concretament la de l’espai entre paraules. Quan s’es-

criu l’HTML, el document font contindrà el que es coneix com “espais en

blanc”, que són els caràcters de l’arxiu que serveixen per a separar el text. El

caràcter d’espai més habitual és el que s’obté en prémer la barra espaiadora,

però n’hi ha d’altres, com el tabulador i la marca entre dues línies indepen-

dents d’un document (conegut com a retorn o línia nova).

Per exemple, un navegador interpretaria el següent:

Vegeu exemples reals a: “Whitespace example”http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/HTMLtext_examples.html#whitespace

com a equivalent a:

L’únic cas en el qual això no és així és l’element pre, del qual parlarem en de-

tall més endavant en aquest mateix apartat.

Això pot provocar algunes confusions per als autors que escriuen per primera

vegada un document en HTML i que intenten introduir espais addicionals

Nota

Després de cada exemple de codi hi ha un enllaç “Vegeu exemples reals” que us portarà a la visualització del resultat d’aquest codi font en un arxiu diferent; d’aquesta manera po-dreu veure exemples reals de com es veu realment aquest codi font en el navegador, a banda del codi en si.

En l’HTML, quan un caràcter d’aquests apareix diverses vegades segui-

des es considera (quasi) sempre com un únic caràcter d’espai.

<h3>In the

beginning</h3>

<h3>In the beginning</h3>

http://www.perl.com/

http://www.perl.com/

http://www.php.net

http://www.php.net

http://www.php.net

http://uk3.php.net/manual/en/tutorial.forms.php


http://python.org/

http://python.org/

http://python.org/

http://www.ruby-lang.org

http://www.ruby-lang.org

http://www.sendmail.org/



http://www.asp.net/

http://www.asp.net/

http://www.asp.net/

http://www.asp.net/

http://dragonfly.opera.com/app/debugmenu/DebugMenu.ini


http://www.squarefree.com/bookmarklets/validation.html



http://chrispederick.com/work/web-developer/



http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/HTMLtext_examples.html#whitespace

http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/HTMLtext_examples.html#whitespace

http://www.alistapart.com/articles/taminglists/




http://zappatic.net/safaritidy/


dins el text per a aconseguir el sagnat desitjat, deixar més espai després d’un

punt entre frases o afegir més espai vertical entre paràgrafs. El disseny visual

dels documents no s’ha de definir en el codi font HTML, sinó que s’ha de fer

a través dels fulls d’estils, dels quals parlarem més endavant en aquesta sèrie

d’apartats.

1.2. Elements de bloc

En aquest subapartat explicaré la sintaxi i l’ús dels elements de bloc més fre-

qüents* utilitzats per formatar text.

1.2.1. Títols de secció de pàgina

aUna vegada hàgiu dividit la pàgina en seccions lògiques, cadascuna d’aquestes

seccions hauria d’anar introduïda per un títol adequat. D’això es parla en més

detall a l’apartat Què necessita una bona pàgina web.

És molt important utilitzar els nivells de títols per a descriure el document pel

que fa a les seccions, subseccions, subsubseccions..., ja que això fa que el do-

cument sigui més comprensible per als lectors de pantalla* i per als processos

automatitzats (com els robots d’indexació de Google).

Un bon exemple d’una estructura de títols, fent servir aquest document com

a plantilla, podria ser el següent:

Vegeu exemples reals a: “Headings example”http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/HTMLtext_examples.html#headings

* http://dev.opera.com/articles/view/12-the-basics-of-html/

#blockinline

Vegeu l’apartat 2 del mòdul “Conceptes de disseny web”.

L’HTML defineix sis nivells de títols: h1, h2, h3, h4, h5 i h6 (des del més

fins al menys important). Parlant en general, h1 seria el títol principal

de tota la pàgina que introduiria el tema. h2 s’utilitzaria per a dividir la

pàgina en seccions, h3 en subseccions i així successivament.

* http://www.accessibilitytips.com/2008/

03/10/avoid-skipping-header-levels/

<h1>Etiquetar contingut textual en HTML</h1>

<h2>Introducció</h2>

<h2>L’espai: l’última frontera</h2>

<h2>Elements de bloc</h2>

<h3>Títols de secció de pàgina</h3>

<h3>Paràgrafs genèrics</h3>

<h3>Citar altres fonts</h3>

<h3>Text preformatat</h3>

<h2>Elements en línia</h2>



http://www.w3.org/TR/REC-CSS2/generate.html#lists



1.2.2. Paràgrafs genèrics

Per exemple:

Vegeu exemples reals a: “Paragraph example”http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/HTMLtext_examples.html#paragraph

En molts articles i llibres, un paràgraf pot contenir només una frase. Tot i que el

significat (pel que fa a la prosa escrita) de “paràgraf” és bastant clar, al web hi ha

àrees de text molt més curtes que sovint apareixen entre elements de paràgrafs pel

simple fet que l’autor creu que és més “semàntic” que utilitzar un element div

(en parlarem en un altre apartat titulat “Contenidors genèrics”).

1.2.3. Citar altres fonts

Un element blockquote no pot contenir text, sinó que ha de tenir en el seu

interior un altre element de bloc. Hauríeu de fer servir el mateix element de

bloc que en el document original. Si citeu un paràgraf de text, utilitzeu un pa-

ràgraf; quan citeu una llista, utilitzeu els elements per a llistes; i així successi-

vament.

Si la cita és d’una altra pàgina web, podeu indicar-ho utilitzant l’atribut cite.

Com en l’exemple següent:

El paràgraf és el component bàsic de la majoria dels documents. En

l’HTML, un paràgraf es representa amb l’element p, que no té cap atri-

but especial.

<p>This is a very short paragraph. It only has two

sentences.</p>

Exemple

Un paràgraf és un conjunt d’una o més frases, igual que en els diaris i llibres. Al web és una bona idea utilitzar l’ele-ment de paràgraf per a aquests conjunts de frases i no per a qualsevol part aleatòria de text de la pàgina. Si són només unes quantes paraules i no una frase pròpiament dita, llavors potser seria millor no etique-tar-ho com un paràgraf.

Sovint, els articles, els apunts de blocs i els documents de referència ci-

ten totalment o parcialment algun altre document. En l’HTML, aques-

tes cites es marquen amb l’element blockquote per a cites llargues,

com ara frases senceres, paràgrafs, llistes o similars.

<p>HTML 4.01 is the only version of HTML that you should use

when creating a new web page, as, according to the

specification:</p>

http://dev.opera.com/articles/view/20-html-forms-the-basics/form.css

http://dev.opera.com/articles/view/20-html-forms-the-basics/form.css

http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

http://www.w3.org/TR/html401/struct/tables.html


http://www.w3.org/TR/CSS21/tables.html



Vegeu exemples reals a: “Quoting other sources example”http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/HTMLtext_examples.html#cite

L’atribut cite no és necessari en el cas que la cita s’agafi d’una novel·la, una

revista o d’alguna altra forma de contingut fora de línia.

1.2.4. Text preformatat

En la majoria dels navegadors web, el text marcat com a preformatat es mostrarà

a l’usuari tal com aparegui en el codi font, algunes vegades fent servir un tipus de

lletra d’amplada fixa, la qual cosa dóna al text l’aspecte d’haver estat escrit amb

una màquina d’escriure. Aquest ús de tipus de lletres d’amplada fixa és un dels pri-

mers recursos que van fer servir els programadors per al text preformatat.

En aquest podeu veure un fragment de codi escrit en el llenguatge de progra-

mació Perl:

Vegeu exemples reals a: “Preformatted example”http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/HTMLtext_examples.html#preformatted

aL’ús de code que es fa en aquest exemple s’explicarà a l’apartat sobre els ele-

ments semàntics menys coneguts més endavant en aquest mòdul.

<blockquote cite=“http://www.w3.org/TR/html401/”>

<p>This document obsoletes previous versions of HTML 4.0,

although W3C will continue to make those specifications and

their DTDs available at the W3C Web site.</p>

</blockquote>

Qualsevol text en el qual el format i l’espai en blanc (vegeu més amunt)

siguin importants s’haurien d’etiquetar amb l’element pre.

1 <pre><code class=“language-perl”>

2 # read in the named file in its entirety

3 sub slurp {

4 my $filename = shift;

5 my $file = new FileHandle $filename;

6 if ( defined $file ) {

7 local $/;

8 return <$file>;

9 }

10 return undef;

11 };

12 </code></pre>

Vegeu l’apartat 7 d’aquest mòdul.


1.3. Elements en línia

aEn aquest subapartat explicaré la sintaxi i l’ús dels elements en línia més fre-

qüents utilitzats per a formatar text.

1.3.1. Cites curtes

a

Una cita curta apareix normalment entre cometes. Segons l’especificació

HTML, aquestes cites les ha d’inserir l’agent usuari per tal de poder-les imbri-

car correctament i que sàpiguen l’idioma que s’utilitza en el document. Es pot

utilitzar el CSS per a controlar les cometes utilitzades; aquest aspecte es tracta-

rà a l’apartat sobre “estils de text”.

Un exemple de q en acció:

Vegeu exemples reals a: “Inline quote example”http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/HTMLtext_examples.html#q

1.3.2. Èmfasi

L’HTML conté dos mètodes per a indicar que el text del seu interior ha d’apa-

rèixer emfasitzat davant l’usuari, com per exemple els missatges d’error, les ad-

vertències o les notes.

Com l’exemple següent:

Vegeu exemples reals a: “Emphasis example”http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/HTMLtext_examples.html#em

Vegeu l’apartat 1 del mòdul “Fonaments d’HTML”.

Les cites curtes que s’utilitzen en una frase o paràgraf normal es posen

a l’element q. Igual que l’element blockquote, aquest pot contenir un

atribut cite, que indica la pàgina d’Internet a la qual es pot trobar la cita.

* http://www.w3.org/TR/html401/struct/text.html#h-9.2.2.1

Vegeu l’apartat 3 del mòdul “Conceptes bàsics de CSS”.

<p>This did not end well for me. Oh well,

<q lang=“fr”>c’est la vie</q> as the French say.</p>

En els navegadors visuals això significa normalment l’aplicació d’un co-

lor o un tipus de lletra diferent o la visualització del text en negreta o

cursiva. Per als usuaris de lectors de pantalla, el resultat pot ser una veu

diferent o algun altre efecte acústic. Per a presentar text amb èmfasi cal

utilitzar l’element em.

<p><em>Please note:</em> the kettle is to be unplugged

at night.</p>

http://www.w3.org/2001/tag/doc/whenToUseGet.html


http://simonwillison.net/2003/Jun/17/theHolyGrail/

http://www.w3.org/TR/html401/struct/text.html#h-9.2.2

http://www.w3.org/TR/html401/struct/text.html#h-9.2.2

http://www.w3.org/TR/html401/interact/forms.html



Si cal emfasitzar tota una frase però una part concreta d’aquesta s’ha d’emfa-

sitzar d’una manera encara més important, s’ha d’utilitzar l’element strong

per a indicar un èmfasi més fort del normal com en l’exemple següent:

Vegeu exemples reals a: “Emphasis and strong example”http://dev.opera.com/articles/view/15-marking-up-textual-content-in-html/HTMLtext_examples.html#emstrong

1.3.3. Text en cursiva

Normalment es creu que “cursiva” no descriu el significat i que, per tant, l’ele-

ment i no s’ha d’utilitzar (igual que molts altres elements presentacionals des-

crits al subapartat següent).

La raó és que la cursiva indica que el text és especial i el context indica en quin

sentit ho és, d’especial.

De fet, això ja queda reflectit a l’esborrany de l’especificació de l’HTML 5:

“L’element i representa un text en una veu o un mode alternatiu, o que d’alguna maneraqueda fora de la prosa normal […] L’element i s’ha d’utilitzar com a últim recurs quanno hi ha cap altre element que sigui més apropiat.”

Com que el CSS pot modificar l’element i per tal que no sigui cursiva, en

aquest context cal interpretar el significat de “cursiva” fonamentalment com

a “alguna cosa una mica diferent”. Jo no ho trobo correcte, personalment par-

lant, però hi ha precedents suficients per a utilitzar-ho d’aquesta manera.

1.4. Elements presentacionals: no els heu de fer servir mai

L’especificació de l’HTML inclou diversos elements que es descriuen de mane-

ra general com a “presentacionals”, ja que només especifiquen quin aspecte

ha de tenir el text que contenen però no el que signifiquen.

<p><em>Please note: the kettle <strong>must</strong> be

unplugged every evening, otherwise it will explode -

<strong>killing us all</strong></em>.</p>

Hi ha un parell de casos en els quals és correcte descriure el contingut

com a cursiva. Ja s’ha comentat que alguns conceptes es descriuen mi-

llor com a “cursiva” en lloc d’haver de crear alguns elements molt espe-

cífics i no utilitzats. Aquests inclouen coses com ara el noms de vaixells,

els títols de sèries de televisió, pel·lícules i llibres, alguns termes tècnics

i altres designacions taxonòmiques.


L’especificació ha etiquetat alguns d’aquests elements com a desaprovats.

Això significa que han estat substituïts per un mètode més nou que permet

aconseguir els mateixos resultats.

aJo aquí els descriuré breument, però cal tenir en compte que aquesta explica-

ció té quasi exclusivament un interès purament històric; aquests elements no

s’han d’utilitzar mai en cap pàgina web moderna. L’efecte de tots aquests ele-

ments s’ha d’aconseguir d’alguna altra manera, que es descriurà en dos altres

apartats: “estils de text amb el CSS” i elements semàntics menys coneguts.

• font face=“…” size=“…”. El navegador mostrarà el text en aquests ele-

ments utilitzant un tipus de lletra diferent del tipus per defecte; els tipus de

lletra, però, s’han de definir amb el CSS.

• b. El text apareix en negreta; gairebé sempre significa que el text té algun tipus

d’èmfasi, i per tant caldria utilitzar em o strong tal com s’ha explicat abans.

• s i strike. El text apareix ratllat amb una línia que el travessa; si és només

un efecte presentacional, aquest efecte s’hauria d’aconseguir amb el CSS.

També, si el text es vol marcar com a suprimit o no desitjat, s’hauria d’eti-

quetar amb l’element del que es descriu més endavant.

• u. El text es subratlla; és quasi sempre un efecte visual i s’hauria d’aconse-

guir amb el CSS.

• tt. El text es presenta en un tipus de lletra de “teletip” o d’amplada fixa;

aquest efecte s’hauria d’aconseguir amb el CSS o amb algun element se-

màntic més apropiat com per exemple pre, tal com s’ha vist anteriorment.

• big i small. S’ajusta la mida del text; s’hauria d’aconseguir amb el CSS.

Resum

En aquest apartat he parlat d’alguns dels elements més comuns que es fan ser-

vir per etiquetar contingut textual. En el següent apartat parlarem d’un altre

tipus de contingut: les llistes.

Vegeu l’apartat 3 del mòdul “Conceptes bàsics de CSS” i l’apartat 7 d’aquest mòdul.


2. Llistes HTMLBen Buchanan

Les llistes es fan servir per a agrupar dades relacionades per tal que quedin cla-

rament associades entre elles i siguin fàcils de llegir. En el desenvolupament

dels webs modernes, les llistes són uns elements molt habituals que es fan ser-

vir tant per a la navegació com per al contingut general.

Les llistes són molt adequades des d’un punt de vista estructural, ja que aju-

den a crear un document ben estructurat, més accessible i fàcil de mante-

nir. També són útils per una raó purament pràctica: aporten elements

addicionals als quals adjuntar estils del CSS i disposar així d’una gran vari-

etat d’estils (més endavant en aquesta assignatura ja parlarem del CSS; per

a saber quins són els apartats sobre el CSS que hi ha disponibles, consulteu

l’índex de continguts).

En aquest apartat explicaré els diferents tipus de llistes disponibles en l’HTML,

quan i com s’han d’utilitzar i com aplicar alguns estils bàsics.

2.1. Els tres tipus de llistes

En l’HTML hi ha tres tipus de llistes:

• llista no ordenada: es fa servir per a agrupar elements relacionats sense cap

ordre en concret.

• llista ordenada: es fa servir per a agrupar elements relacionats en un ordre

concret.

• llista de definicions: es fa servir per a mostrar parelles de noms i valors,

com per exemple termes i les seves definicions o hores i actes.

Cadascuna d’aquestes llistes té una finalitat i un significat específics i no són

intercanviables.

2.1.1. Llistes no ordenades

La llista de la compra

Un exemple podria ser una llista de la compra:

• llet• pa

Les llistes no ordenades, o llistes de pics, s’utilitzen quan tenim una sè-

rie d’elements que es poden col·locar en qualsevol ordre.


• mantega• cafè

Tots aquests elements formen part d’una llista, però es poden posar en qualsevol ordresense que la llista perdi el seu sentit:

• pa• cafè • llet• mantega

Es pot fer servir el CSS per a canviar el pic a un dels diversos estils per de-

fecte, podeu fer servir una imatge pròpia o fins i tot es poden fer llistes sen-

se pics; més endavant en aquest mateix apartat veurem com fer-ho i en

altres apartats sobre el CSS ho explicarem amb més detall. Si ho trobeu una

mica confús no cal que ara us preocupeu pel CSS; ja ho aclarirem tot plegat

més endavant.

2.1.2. Etiquetatge de llistes desordenades

2.1.3. Llistes ordenades

Un exemple podrien ser les instruccions de cuina, que s’han de seguir per or-

dre per tal que la recepta surti bé:

1. Tingueu tots els ingredients a mà

2. Mescleu tots els ingredients

3. Poseu la mescla en una safata per al forn

4. Deixeu-ho coure durant una hora

5. Traieu-ho del forn

6. Deixeu-ho reposar durant deu minuts

7. Serviu-ho

Les llistes desordenades utilitzen les etiquetes <ul></ul> i dintre

d’aquestes hi ha molt grups de <li></li>.

<ul>

<li>pa</li>

<li>cafè</li>

<li>llet</li>

<li>mantega</li>

</ul>

Les llistes ordenades, o llistes numerades, s’utilitzen quan tenim una sè-

rie d’elements que s’han de col·locar en un ordre concret.


Si els elements de la llista es desordenen la informació no tindrà cap sentit:




4. Serviu-ho




Les llistes ordenades es poden crear amb diversos sistemes de numeració o al-

fabètics; és a dir, lletres o números. El sistema per defecte de la majoria de na-

vegadors són els números decimals, però hi ha més opcions:

• Lletres

– Lletres ASCII en minúscules (a, b, c…)

– Lletres ASCII en majúscules (A, B, C…)

– Lletres gregues clàssiques en minúscules: (?, ?, ?…)

• Números

– Números decimals (1, 2, 3…)

– Números decimals amb zeros inicials (01, 02, 03…)

– Números romans en minúscules (i, ii, iii…)

– Números romans en majúscules (I, II, III…)

– Numeració georgiana tradicional (an, ban, gan…)

– Numeració armènia tradicional (mek, yerku, yerek…)

Aquí també podeu fer servir el CSS per a canviar l’estil de les vostres llistes.

2.1.4. Etiquetatge de llistes ordenades

Les llistes ordenades utilitzen les etiquetes <ol></ol> i dintre d’aques-

tes hi ha molts grups de <li></li>.

<ol>

<li>Tingueu tots els ingredients a mà</li>

<li>Mescleu tots els ingredients</li>

<li>Poseu la mescla en una safata per al forn</li>

<li>Deixeu-ho coure durant una hora</li>

<li>Traieu-ho del forn</li>

<li>Deixeu-ho reposar durant deu minuts</li>

<li>Serviu-ho</li>

</ol>


2.1.5. Començar llistes ordenades amb un número diferent d’1

Ho podríem fer, per exemple, amb la llista anterior:

Amb això s’obté el resultat següent:




Abans de posar la mescla a la safata, preescalfeu el forn

a 180 graus centígrads per tenir-lo a punt per al següent

pas




7. Serviu-ho

És possible fer que una llista ordenada comenci amb un número dife-

rent de l’1 (o bé i, I, etc.). Això s’aconsegueix amb l’atribut start, que

defineix un valor numèric fins i tot encara que feu servir el CSS per can-

viar els comptadors de la llista i fer que siguin caràcters alfabètics o nú-

meros romans amb la propietat list-style-type. Això pot ser útil si

teniu una única llista de punts però voleu trencar-la amb una nota o

una altra mena d’informació relacionada.

<ol>

<li>Tingueu tots els ingredients a mà</li>

<li>Mescleu tots els ingredients</li>

<li>Poseu la mescla en una safata per al forn</li>

</ol>

<p class=“note”>Abans de posar la mescla a la safata,

preescalfeu el forn a 180 graus centígrads per tenir-lo

a punt per al següent pas</p>

<ol start=“4”>

<li>Deixeu-ho coure durant una hora</li>

<li>Traieu-ho del forn</li>

<li>Deixeu-ho reposar durant deu minuts</li>

<li>Serviu-ho</li>

</ol>


Tingueu en compte que aquest atribut ha estat desaprovat en l’última versió de

les especificacions de l’HTML, la qual cosa significa que les vostres pàgines no es

validaran quan utilitzin doctypes estrictes. Això pot semblar molt estrany, ja que

aquest atribut és molt útil i no hi ha cap equivalent en CSS. Això demostra que la

validació de l’HTML és un dels objectius ideals que cal perseguir, però que no sem-

pre ha de ser l’objectiu únic. A més, tenim un altre recurs al nostre abast: l’atribut

start no està desaprovat a les especificacions HTML5 (les diferències entre el do-

cument en HTML5 i el document en HTML4* en donen fe). Si voleu utilitzar

aquesta funció en una pàgina HTML4 estricta i és absolutament necessari validar-

la, podeu fer-ho utilitzant els comptadors del CSS** en lloc d’aquest atribut.

2.1.6. Llistes de definicions

Les llistes de definicions associen elements concrets i les seves definicions en

un format de llista. Per exemple, si voleu donar una definició dels elements de

la vostra llista de la compra, podeu fer-ho de la següent manera:

llet

Producte lacti líquid de color blanc

pa

Aliment cuinat al forn a base de farina.

mantega

Producte lacti sòlid de color groc

cafè

Llavors dels fruits d’alguns arbres del cafè

Cadascuna de les definicions i termes es un grup de definició (o grup nom-va-

lor). Podeu tenir tants grups de definició com vulgueu, però hi ha d’haver com

a mínim un terme i una definició a cadascun dels grups. No és possible tenir

un terme sense cap definició o una definició sense cap terme.

Podeu associar més d’un terme a una única definició, o viceversa. Per exemple, el

terme “cafè” pot tenir diversos significats, que podeu mostrar un després de l’altre:

cafè

beguda feta a partir de grans de cafè torrats i mòlts

una tassa de cafè

una reunió social en la qual es consumeix cafè

un color marró tirant a fosc

També és possible tenir més d’un terme per a la mateixa definició. Això s’uti-

litza per a mostrar variacions d’un terme, totes elles amb el mateix significat:

soda

gasosa

beguda gasosa

cola

Beguda dolça amb gas.

* http://www.w3.org/TR/2008/WD-html5-diff-20080122/

** http://dev.opera.com/articles/view/automatic-numbering-with-

css-counters/


Una llista de definicions molt senzilla amb termes únics i definicions úniques

tindria el següent aspecte:

I es representa de la manera següent:

Terme

Definició del terme

Terme


Terme


En aquest exemple hem associat més d’un terme a una definició, i viceversa:

Les llistes de definicions són diferents dels altres tipus de llistes, ja que

utilitzen termes i descripcions en lloc d’elements de llista.

Així, doncs, les llistes de definicions utilitzen les etiquetes <dl></dl> i

dintre d’aquestes hi ha grups de <dt></dt> i <dd></dd>: S’ha d’apa-

rellar com a mínim un <dt></dt> amb com a mínim un <dd></dd>;

el <dt></dt> ha de ser sempre el primer.

<dl>

<dt>Terme</dt>

<dd>Definició del terme</dd>

<dt>Terme</dt>


<dt>Terme</dt>


</dl>

<dl>

<dt>Terme</dt>


<dt>Terme</dt>

<dt>Terme</dt>

<dd>Definició aplicable als dos termes anteriors</dd>

<dt>Terme que pot tenir les dues definicions següents</dt>

<dd>Una definició del terme</dd>

<dd>Una altra definició del terme</dd>

</dl>


I es representaria de la manera següent:

Terme


Terme

Terme

Definició aplicable als dos termes anteriors

Terme que pot tenir les dues definicions següents

Una definició del terme

Una altra definició del terme

En general, no és massa habitual associar múltiples termes a una única defini-

ció, però està bé saber que és possible per si alguna vegada s’ha de fer.

2.2. Escollir entre tipus de llistes

A l’hora de decidir el tipus de llista que utilitzareu, normalment podreu pren-

dre la decisió correcta responent dues preguntes molt senzilles:

1. Estic definint termes (o associant altres parelles nom/valor)?

a. Si la resposta és afirmativa, utilitzeu una llista de definicions.

b. Si la resposta és negativa, no utilitzeu una llista de definicions i passeu

a la pregunta següent.

2. L’ordre dels elements de la llista és important?

a. Si la resposta és afirmativa, utilitzeu una llista ordenada.

b. Si la resposta és negativa, utilitzeu una llista desordenada.

2.3. La diferència entre llistes HTML i text

És possible que us estigueu preguntant quina és la diferència entre una llista

HTML i el text amb pics o números escrits manualment. L’ús d’una llista HTML

té uns quants avantatges:

• Si heu de canviar l’ordre dels elements d’una llista ordenada, només caldrà

que els moveu en el codi HTML. Si haguéssiu escrit els números a mà hau-

ríeu de revisar-ho tot i canviar el número de cadascun dels elements per tal

de corregir-ne l’ordre, la qual cosa seria molt feixuga!

• L’ús d’una llista HTML permet aplicar un estil a la llista. Si us limiteu a uti-

litzar un text normal us serà molt més difícil aplicar un estil als elements

individuals d’una manera adient.

• Si utilitzeu una llista HTML, el contingut tindrà l’estructura semàntica ade-

quada i no serà només un efecte visual “tipus llista”. Això té uns avantatges

importants; per exemple, els lectors de pantalla poden indicar als usuaris


amb alguna deficiència visual que estan llegint una llista i no un embolic

confús de text i números.

O, per a dir-ho d’una altra manera: el text i les llistes no són el mateix. L’ús

de text en lloc d’una llista farà que tingueu més feina i pot provocar problemes

als lectors del document. Per tant, si el vostre document necessita una llista,

hauríeu d’utilitzar la llista HTML correcta.

2.4. Imbricar llistes

Un element d’una llista pot contenir tota una altra llista; això es coneix com

a “imbricar” una llista. Pot ser útil per a elements com ara taules de contingut:

1. Capítol u

1. Secció u

2. Secció dos

3. Secció tres

2. Capítol dos

3. Capítol tres

La clau per a imbricar llistes és recordar que la llista imbricada ha d’estar relacio-

nada amb un element concret de la llista. Per tal de reflectir-ho en el codi, la llista

imbricada ha d’estar continguda en aquest element de la llista.

El codi de la llista anterior és el següent:

Observeu que la llista imbricada comença després de <li> i del text de l’ele-

ment de la llista que la conté (“Capítol u”), i que acaba abans de </li> de

l’element de la llista que la conté. Les llistes imbricades són normalment la

base per als menús de navegació de llocs web, ja que són una bona manera de

definir l’estructura del lloc.

En teoria es poden imbricar tantes llistes com es vulgui, tot i que en la pràctica

una imbricació excessiva pot arribar a crear una situació molt confusa. En cas

<ol>

<li>Capítol u

<ol>

<li>Secció u</li>

<li>Secció dos</li>

<li>Secció tres</li>

</ol>

</li>

<li>Capítol dos</li>

<li>Capítol tres</li>

</ol>


de llistes molt llargues, pot ser millor dividir el contingut en diverses llistes

amb títols o fins i tot dividir-la en diverses pàgines.

2.5. Exemple pas a pas

A continuació veurem un exemple pas a pas en el qual inclourem tot el que

hem explicat fins ara. Imaginem-nos la següent situació:

Esteu creant un petit lloc web per a l’Escola de Cuina HTML. A la pàgina prin-

cipal hi ha d’aparèixer una llista de receptes classificades per categories que

ens han de dur a les pàgines de les receptes. Cadascuna de les pàgines de re-

ceptes inclou una llista amb els ingredients necessaris, notes sobre aquests in-

gredients i el mètode de preparació. Les tres categories són Pastissos (que

inclou receptes per a “Pa de pessic”, “Pastís de xocolata” i “Pastís de poma”);

“Galetes” (que inclou receptes per a “Galetes de civada i coco”, “Gotes de mel-

melada” i “Moments dolços”); i “Pans ràpids” (que inclou receptes per a “Pa

de soda” i “Panets de llet”). El client no té cap preferència per l’ordre en què

apareguin les categories i les receptes; només vol estar segur que la gent sabrà

quins elements són categories i quins són receptes.

Ara anirem passant per tot el procés de creació d’aquest lloc. En aquest subapartat

explicaré la creació de l’etiquetatge i mostraré la manera d’afegir alguns estils a les

llistes. Els estils els explicaré d’una manera més superficial, ja que més endavant

en aquesta sèrie trobareu un apartat dedicat als estils de les llistes i dels enllaços.

2.5.1. Etiquetatge de la pàgina principal

1) Creeu una pàgina HTML de la manera adequada que inclogui el doctype i els

elements html, head i body i deseu-la com a stepbystep-main.html. Afegiu-hi el

títol principal (h1) “Escola de cuina HTML” i un subtítol (h2) “Receptes”:

2) Hi heu de presentar tres categories de receptes i l’ordre no és important; en

aquest cas el més adequat és una llista desordenada i, per tant, haureu d’afegir

el següent a la vostra pàgina:

<h1>Escola de cuina HTML</h1>

<h2>Receptes</h2>

<h2>Receptes</h2>

<ul>

<li>Pastissos</li>

<li>Galetes</li>

<li>Pans ràpids</li>

</ul>


El sagnat dels elements li, tot i que no és necessari, fa que el codi sigui més

llegible.

a3) Ara hi haureu d’afegir les receptes com a subelements; per exemple, “Pa de

pessic”, “Pastís de xocolata” i “Pastís de poma” han d’anar a la categoria “Pas-

tissos”. Per fer-ho cal que creeu una llista imbricada a cadascun dels elements.

Com que l’ordre no és important, aquí també haurem d’utilitzar llistes no or-

denades. Per tal de facilitar les coses en aquest tutorial, enllaçarem totes les re-

ceptes a una única pàgina de recepta (més endavant s’expliquen els enllaços

HTML amb més detall. Si voleu informació sobre els enllaços, podeu anar-hi):

2.5.2. Afegir alguns estils

Cal que tornem a dir que, si no l’enteneu, en aquest apartat no cal que us pre-

ocupeu excessivament del CSS. Aquí només veurem el CSS d’una manera molt

superficial, i ja en parlarem en molt més detall més endavant en aquesta ma-

teix assignatura.

Al client li agrada aquesta organització, però vol que les categories s’indiquin

amb unes fletxes petites en lloc de pics. També vol que les categories quedin


<h2>Receptes</h2>

<ul>

<li>Pastissos

<ul>

<li><a href=“stepbystep-recipe.html”>Pa de pessic</a></li>

<li><a href=“stepbystep-recipe.html”>Pastís de xocolata</a></li>

<li><a href=“stepbystep-recipe.html”>Pastís de poma</a></li>

</ul>

</li>

<li>Galetes

<ul>

<li><a href=“stepbystep-recipe.html”>Galetes de civada i coco</a></li>

<li><a href=“stepbystep-recipe.html”>Gotes de melmelada</a></li>

<li><a href=“stepbystep-recipe.html”>Moments dolços</a></li>

</ul>

</li>

<li>Pans/pans ràpids

<ul>

<li><a href=“stepbystep-recipe.html”>Pa de soda</a></li>

<li><a href=“stepbystep-recipe.html”>Panets de llet</a></li>

</ul>

</li>

</ul>


alineades a l’esquerra de la pàgina. Per a fer-ho cal que especifiqueu una imat-

ge en lloc d’un pic i que llavors definiu els ajustos de marge/separació.

1) Per a evitar conflictes amb altres llistes del lloc, haureu d’afegir una classe

a la llista per tal de poder crear selectors contextuals específics en el vostre full

d’estils. La classe “llista de receptes” podria ser adequada:

2) Ara heu de crear un full d’estil i afegir-hi unes quantes regles, però en pri-

mer lloc heu d’afegir etiquetes style d’obertura i de tancament al head del

vostre document.

3) Ara eliminareu l’espaiat de la llista. Per defecte, alguns navegadors utilitzen

margin i altres padding per a separar els elements i, per tant, haureu d’ajustar

els dos a zero; cal que afegiu el següent entre les etiquetes style:

4) A continuació heu de crear una imatge de pic personalitzada; si ho voleu

podeu utilitzar la meva (vegeu la figura 1).

Figura 1

Imatge de pic personalitzada.

5) Ara haureu d’eliminar els pics dels elements de la llista, definir el pic com

a imatge de fons per a aquests i afegir-hi una mica de separació per tal que el

text no quedi sobre la imatge de fons. Podeu fer-ho afegint el següent CSS just

abans de l’etiqueta style de tancament:

<h2>Receptes</h2>

<ul class=“llista-de-receptes”>

ul.llista-de-receptes {

margin-left: 0;

padding-left: 0;

}

ul.llista-de-receptes li {

list-style-type: none;

background: #fff url(“example-bullet.gif”) 0 0.4em no-repeat;

padding-left: 10px;

}


6) Finalment, haureu de tornar a posar els pics als elements de la llista imbri-

cada i definir un fons de color blanc (la segona norma és més específica, per la

qual cosa anul·larà la norma de la imatge de fons). Recordeu que la llista im-

bricada heretarà la primera norma del CSS, per la qual cosa haureu de “desfer”

tot els ajustos de la llista principal. Afegiu el següent CSS just abans de l’eti-

queta style de tancament:

El resultat final hauria de ser alguna similar al que apareix a la figura 2:

Figura 2

La pàgina principal acabada amb imatges de pics personalitzades.

També podeu veure més exemples a: “HTML Cooking School”http://dev.opera.com/articles/view/16-html-lists/stepbystep-main.html

2.5.3. La pàgina de la recepta

En aquest exemple només crearem la pàgina de la recepta per al pa de pessic,

però si ho voleu, podeu crear les altres pel vostre compte utilitzant aquesta pà-

gina com a plantilla. El client us ha subministrat la recepta del pa de pessic en

un arxiu de text que té el següent aspecte:

Pa de pessic

Ingredients

3 ous

100 g de sucre de llustre

85 g de farina amb llevat

Notes sobre els ingredients:

Sucre de llustre: sucre blanc granulat molt fi.

Farina amb llevat: una mescla ja preparada de farina i agents gasificants

(normalment sal i llevat artificial).

ul.llista-de-receptes li li {

list-style-type: disc;

background: #fff;

}


Preparació

1. Preescalfeu el forn a 190° C.

2. Greixeu un motlle rodó de 20 cm.

3. En un bol de mida mitjana, barregeu-hi els ous i el sucre de llustre fins a

obtenir una mescla esponjosa.

4. Incorporeu-hi la farina.

5. Poseu aquesta mescla en el motlle preparat.

6. Enforneu-ho durant 20 minuts al forn preescalfat, o fins que la part superior

del pa de pessic recuperi la forma en prémer-la lleugerament.

7. Deixeu-lo refredar dins el motlle sobre una reixa metàl·lica.

2.5.4. Etiquetatge de la pàgina de la recepta

1) Creeu un altre document HTML de la manera adequada i deseu-lo com a

stepbystep-recipe.html. Afegiu-hi els títols següents:

2) La llista d’ingredients té diversos elements, però l’ordre no és important.

Així, doncs, cal fer servir una llista desordenada. Afegiu el següent a body del

vostre HTML:

3) Les notes sobre els ingredients hi són per a definir adequadament què són

alguns dels ingredients. Cal que associeu l’ingredient (el terme) amb la seva

definició. Per a això cal fer servir una llista de definicions. Afegiu el següent al

vostre HTML, sota la llista desordenada del pas anterior:

<h1>Pa de pessic</h1>

<h2>Ingredients</h2>

<h3>Notes sobre els ingredients</h3>

<h2>Preparació</h2>

<h2>Ingredients</h2>

<ul>

<li>3 ous</li>

<li>100 g de sucre de llustre</li>

<li>85 g de farina amb llevat</li>

</ul>

<h3>Notes sobre els ingredients</h3>

<dl>

<dt>Sucre de llustre</dt>

<dd>Sucre blanc granulat molt fi</dd>


4) La preparació ha de seguir, com és obvi, l’ordre correcte, per la qual cosa

haurem de fer servir una llista ordenada; afegiu el següent al vostre HTML, sota

la llista de definicions:

2.5.5. Estils de la pàgina de la recepta

El client està molt content amb els resultats, però vol que les definicions apa-

reguin en negreta per a fer-les més llegibles. Afegiu el següent al head del vos-

tre HTML:

La pàgina hauria de tenir un aspecte similar al de la figura 3.

<dt>Farina amb llevat</dt>

<dd>Una mescla ja preparada de farina i agents

gasificants (normalment sal i llevat artificial).</dd>

</dl>

<h2>Preparació</h2>

<ol>

<li>Preescalfeu el forn a 190°C.</li>

<li>Greixeu un motlle rodó de 20 cm.</li>

<li>En un bol de mida mitjana, barregeu-hi els ous i el

sucre de llustre fins a obtenir una mescla esponjosa.</li>

<li>Incorporeu-hi la farina</li>

<li>Poseu aquesta mescla en el motlle preparat.</li>

<li>Enforneu-ho durant 20 minuts al forn preescalfat, o

fins que la part superior del pa de pessic recuperi la

forma en prémer-la lleugerament.</li>

<li>Deixeu-lo refredar dins el motlle sobre una reixa

metàl·lica.</li>

</ol>

<style>

dt {

font-weight: bold;

}

</style>


Figura 3

La pàgina de la recepta acabada amb els termes de les definicions en negreta.

També podeu veure la pàgina d’exemple a: “Simple Sponge Cake”http://dev.opera.com/articles/view/16-html-lists/stepbystep-recipe.html

Ja heu acabat!

Resum

Arribats a aquest punt ja hauríeu d’entendre perfectament els tres tipus de llis-

tes diferents de l’HTML. Amb aquest exemple pas a pas les heu creades totes

tres i heu après a imbricar llistes a dins d’elements de llistes.

Ara que ja sabeu com fer servir adequadament les llistes HTML, molt proba-

blement veureu que les utilitzeu amb molta freqüència. Hi ha molt de contin-

gut al web que s’hauria d’haver posat en una llista però que simplement s’ha

col·locat en un element genèric amb unes quantes etiquetes de salts de línia.

És una pràctica de ganduls i que genera més problemes que no els soluciona;

no heu de fer-ho mai! Heu de crear sempre llistes semànticament correctes per

a ajudar la gent a llegir els vostres llocs web. A l’hora d’anar fent el manteni-

ment dels llocs web és millor per a tothom i no només per a qui els ha creat.

Preguntes de repàs

Preguntes que hauríeu de poder respondre:

1. Quins són els tres tipus de llistes de l’HTML?

2. Quan utilitzaríeu cadascun dels tipus de llistes? Com n’escolliu l’un o l’altre?

3. Com es fa per a imbricar llistes?

4. Per què s’ha d’utilitzar el CSS en lloc de l’HTML per a aplicar estils a les llistes?


Lectures complementàries

A List Apart: Taming Lists


W3C CSS2: list-style-type definition



3. Imatges en HTMLChristian Heilmann

En aquest apartat parlaré d’una de les coses que fan que el disseny del web si-

gui una cosa bonica: les imatges. Una vegada l’hàgiu llegit sabreu com afegir

imatges als vostres documents web d’una manera accessible (per tal que la

gent amb discapacitats visuals també pugui utilitzar la informació del vostre

lloc) i com i quan utilitzar imatges en línia per a aportar informació o imatges

de fons en el disseny de la pàgina.

3.1. Una imatge diu més que mil paraules, o no?

Resulta molt temptador utilitzar un munt d’imatges als llocs web. Les imatges

són una manera molt bona de donar un aire concret a la pàgina i les il·lustra-

cions resulten molt útils per a comunicar informació complexa d’una manera

més fàcil a la gent que la visita.

L’inconvenient de les imatges al web és que no tothom que navega les pot

veure. Si reculem fins als dies que els navegadors van començar a acceptar les

imatges, veurem que molts dels visitants tenien les imatges desactivades per

així estalviar trànsit i poder navegar més ràpidament; les connexions eren nor-

malment molt lentes i s’havien de pagar molts diners per cada minut que es

passava en línia. Tot i que actualment les coses són molt diferents, encara no

estem ni molt menys totalment fora de perill.

• Les persones que fan servir dispositius mòbils poden seguir tenint les imat-

ges desactivades a causa de les reduïdes dimensions de les pantalles i del

cost de la descàrrega de dades.

• El vostre lloc web pot ser visitat per persones cegues o amb alguna discapa-

citat visual que els impedeixi veure correctament les imatges.

• També pot rebre visites de persones d’altres cultures que no entenguin les

icones que hi heu utilitzat.

• Els motors de cerca només indexen text i (encara) no analitzen les imatges,

la qual cosa significa que la informació emmagatzemada en imatges no es

podrà trobar ni indexar.

aPer tant, és molt important escollir les imatges amb prudència i fer-les servir

només quan sigui adequat. I encara és més important que us assegureu que

oferiu sempre alguna alternativa per a aquelles persones que no puguin veure

les vostres imatges. De moment, vegem les tecnologies que tenim disponibles

per a afegir imatges a un document HTML.

Nota

Podeu descarregar-vos els ar-xius d’exemple que es fan ser-vir en aquest apartat des de l’arxiu “code.zip”*; al llarg d’aquest apartat aniré fent re-ferències a aquests arxius. * http://dev.opera.com/articles/view/17-images-in-html/code.zip

A l’apartat “Navegació del web i menús” d’aquest mateix tutorial trobareu més informació sobre els problemes que generen les icones i les imatges mal utilitzades.


3.2. Diferents tipus d’imatges al web: imatges de contingut

i de fons

Hi ha dues maneres bàsiques d’afegir imatges a un document: imatges de con-

tingut utilitzant l’element img i imatges de fons aplicades a elements utilit-

zant el CSS. L’ús de l’un o de l’altre dependrà de què vulgueu fer:

1) Si la imatge és crucial per al contingut del document, com per exemple una

fotografia de l’autor o un gràfic que presenta dades, l’hauríeu d’afegir com un

element img amb el text alternatiu adequat.

2) Si la imatge té només una finalitat estètica, hauríeu d’utilitzar les imatges

de fons del CSS. La raó és que aquestes imatges no han de tenir cap text alter-

natiu (de què serviria “angle arrodonit de color verd que parpelleja” per a una

persona cega?) i que hi ha moltes més opcions al CSS que a l’HTML per a tre-

ballar amb estils d’imatges.

3.3. L’element img i els seus atributs

El document inlineimageexample.html de l’arxiu zip mostra la fotografia bal-

conyview.jpg en un navegador (sempre que tingueu la imatge a la mateixa car-

peta que l’arxiu HTML).

Arxiu font: “inlineimageexample.html”http://devfiles.myopera.com/articles/364/inlineimageexample.html

Si executeu aquest codi en un navegador veureu el que surt a la figura 1.

Amb l’element img és molt fàcil afegir una imatge a un document

HTML.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<title>Example of an inline image</title>

</head>

<body>

<img src=“balconyview.jpg”>

</body>

</html>


Figura 1

La imatge tal com es veu en un navegador.

3.3.1. Oferir una alternativa de text amb l’atribut alt

La imatge es veu bé, però és un codi HTML no vàlid perquè l’element img neces-

sita un atribut alt. Aquest atribut conté el text que apareix si, per alguna raó, la

imatge no està disponible. La imatge pot no estar disponible perquè no es pot tro-

bar o carregar o perquè l’agent d’usuari (normalment un navegador) no accepta

imatges. A més a més, les persones amb alguna discapacitat visual utilitzen tecno-

logies d’assistència que els llegeixen les pàgines web. Aquestes tecnologies llegei-

xen en veu alta el contingut de l’atribut alt dels elements img als usuaris. Per

tant, és molt important escriure un bon text alternatiu per a descriure el contingut

de la imatge i posar-lo dins l’atribut alt.

Al web trobareu molts textos que parlen sobre les “etiquetes alt”. Això és objec-

tivament un error, ja que no hi ha cap etiqueta (o element) que tingui aquest

nom, sinó que és un atribut de l’element img que és extremament important tant

per a l’accessibilitat com per a l’optimització dels motors de cerca.

Per tal que la imatge sigui comprensible per a tothom, cal que hi afegiu un text

alternatiu adequat; en aquest cas, per exemple, “View from my balcony, showing

a row of houses, trees and a castle” (vista des del meu balcó, des d’on es veu una

filera de cases, arbres i un castell).

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/

strict.dtd”>

<html>

<head>

<title>Example of an inline image</title>

</head>


Arxiu font: “inlineimageexamplealt.html”http://dev.opera.com/articles/view/17-images-in-html/inlineimageexamplealt.html

3.3.2. Afegir informació pertinent amb l’atribut title

L’atribut title pot ser molt útil, però no és una manera segura d’oferir infor-

mació crucial. En canvi, sí que és una bona manera, per exemple, per a escriure

les sensacions que provoca la imatge o el significat que té dins el context.

Arxiu font: “inlineimagewithtitle.html”http://devfiles.myopera.com/articles/364/inlineimagewithtitle.html

<body>

<img src=“balconyview.jpg” alt=“View from my balcony, showing a row of houses,

trees and a castle”>

</body>

</html>

L’atribut alt conté el text que apareixerà quan la imatge no estigui dis-

ponible. La informació de l’atribut alt no hauria d’aparèixer quan la

imatge es carregui correctament; Internet Explorer ho fa malament i

mostra aquest text com si fos un indicador de funció en posar el punter

del ratolí sobre la imatge durant uns moments. Això és un error, ja que

fa que molta gent utilitzi l’atribut alt per afegir informació addicional

sobre la imatge. Si voleu afegir informació addicional heu d’utilitzar

l’atribut title, que explicaré en el subapartat següent.

La majoria dels navegadors mostren el valor de l’atribut title d’un ele-

ment img com si fos un indicador de funció en posar-hi el punter del

ratolí a sobre (vegeu la figura 5). Això pot ajudar el visitant a saber més

coses sobre la imatge, però no us podeu refiar que tots els visitants tin-

dran un ratolí.

1 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/

strict.dtd”>

2 <html>

3 <head>

4 <title>Example of an inline image with alternative text and title</title>

5 </head>

6 <body>

7 <img src=“balconyview.jpg” alt=“View from my balcony, showing a row of houses,

trees and a castle” title=“What I see when I look out of my window; the castle

was one reason to move there.”>

8 </body>

9 </html>


Si carregueu aquest codi en el vostre navegador veureu el que hi ha a la figura 2.

Figura 2

En molts navegadors, els atributs title apareixen com si fossin indicadors de funció.

3.3.3. Utilitzar longdesc per oferir una alternativa a les imatges

complexes

Aquest atribut conté una URL que porta a un document que conté la mateixa

informació. Per exemple, si teniu un gràfic que mostra una sèrie de dades, po-

deu vincular-lo a una taula de dades que contingui la mateixa informació uti-

litzant longdesc:

Arxiu font: “inlineimagelongdesc.html”http://dev.opera.com/articles/view/17-images-in-html/inlineimagelongdesc.html

L’arxiu “fruitconsumption.html” conté una taula molt senzilla que representa

les mateixes dades:

Si la imatge és molt complexa, com per exemple un gràfic, podeu oferir-ne

una descripció més llarga amb l’atribut longdesc per tal que les persones

que utilitzin lectors de pantalla o naveguin amb les imatges desactivades

puguin seguir accedint a la informació que transmet la imatge.


strict.dtd”>

2 <html>

3 <head>

4 <title>Example of an inline image with longdesc</title>

5 </head>

6 <body>

7 <img src=“chart.png” width=“450” height=“150” alt=“Chart showing the fruit

consumption amongst under 15 year olds. Most children ate Pineapples, followed

by Pears” longdesc=“fruitconsumption.html”>

8 </body>

9 </html>


Arxiu font: “fruitconsumption.html”http://dev.opera.com/articles/view/17-images-in-html/fruitconsumption.html

Les dues representacions d’aquestes dades, l’una al costat de l’altra, apareixen

tal com es pot veure a la figura 3.

Figura 3

Podeu vincular un document amb dades complexes a una imatge mitjançant l’atribut longdesc.


strict.dtd”>

<html>

<head>

<title>Fruit consumption</title>

</head>

<body>

<table summary=“Fruit Consumption of under 15 year olds, March 2007”>

<caption>Fruit Consumption</caption>

<thead>

<tr><th scope=“col”>Fruit</th><th scope=“col”>Amount</th></tr>

</thead>

<tbody>

<tr><td>Apples</td><td>10</td></tr>

<tr><td>Oranges</td><td>58</td></tr>

<tr><td>Pineapples</td><td>95</td></tr>

<tr><td>Bananas</td><td>30</td></tr>

<tr><td>Raisins</td><td>8</td></tr>

<tr><td>Pears</td><td>63</td></tr>

</tbody>

</table>

<p><a href=“inlineimagelongdesc.html”>Back to article</a></p>

</body>

</html>


Observeu que no hi ha cap indicació visual i que hi ha un arxiu de descripció

llarg connectat a aquesta imatge. No obstant això, les tecnologies d’assistència

permetran que els seus usuaris sàpiguen que hi ha una alternativa disponible.

3.3.4. Visualització més ràpida de les imatges definint-ne les

dimensions amb width i height

Arxiu font: “inlineimagewithdimensions.html”http://dev.opera.com/articles/view/17-images-in-html/inlineimagewithdimensions.html

D’aquesta manera apareixerà un indicador de posició de la imatge fins que aques-

ta es carregui i ocupi el seu lloc, amb la qual cosa s’evitarà el desagradable despla-

çament de la pàgina. Amb aquests atributs també es poden modificar les

dimensions de la imatge (dividiu per dos els valors dels atributs de l’exemple an-

terior, deseu-lo i torneu a carregar la pàgina), però no és una bona idea perquè la

qualitat d’aquesta modificació de les dimensions no és bona en tots els navega-

dors. Una cosa que està especialment desaconsellada és el fet de redimensionar les

imatges per a convertir-les en miniatures, ja que la idea de les miniatures no és

només tenir una imatge amb unes dimensions més petites, sinó també un arxiu

que ocupi menys. No hi ha ningú que vulgui carregar una fotografia de 300 KB

per acabar tenint una imatge petita que podria ser de només 5 KB.

Quan l’agent d’usuari troba un element img en l’HTML, comença a

carregar la imatge assenyalada per l’atribut src. Per defecte, aquest no

sap quines són les dimensions de la imatge, per la qual cosa es limitarà

a mostrar tot el text apilonat i desplaçarà la resta del document quan

finalment es carreguin i apareguin les imatges. Això pot fer que la càr-

rega de la pàgina sigui més lenta i genera confusió entre les persones

que visiten la pàgina. Per tal que això no ocorri, podeu indicar a

l’agent d’usuari que assigni l’espai adequat a les imatges abans que

aquestes es carreguin especificant-li les dimensions de la imatge amb

els atributs width i height.


strict.dtd”>

<html>

<head>

<title>Example of an inline image with dimensions</title>

</head>

<body>

<img src=“balconyview.jpg” alt=“View from my balcony, showing a row of houses,

trees and a castle” width=“400” height=“186”>

</body>

</html>


3.4. Les imatges en línia

Hi ha molts atributs que podeu utilitzar per a les imatges, però la majoria estan

desaprovats perquè defineixen la maquetació i l’alineació de la imatge. Si l’objec-

tiu és aquest no s’ha de fer servir l’HTML, sinó el CSS, que es va inventar precisa-

ment per a això. Aquí només direm que és important recordar que les imatges

són, per defecte, elements en línia. Això significa que poden aparèixer entre pa-

raules dins el text sense crear línies noves. Això és molt útil per a afegir icones pe-

tites dins el text, però pot ser molt molest quan intenteu crear maquetacions

utilitzant imatges i text. Amb el CSS podreu fer que les imatges no quedin en línia

per defecte i fer que apareguin com si fossin elements de bloc (elements que apa-

reixen en una línia nova en afegir-los a un document).

3.5. Imatges de fons amb CSS

Una cosa que és ben clara és que el disseny de webs va esdevenir molt més di-

vertit quan els navegadors van començar a acceptar el CSS. En lloc de mani-

pular l’HTML utilitzant cel·les de taules per definir la posició dels diferents

components de la pàgina, espais no separables ( ) per mantenir l’espa-

iat i GIF separadors (imatges GIF transparents d’1x1 píxels redimensionades

per a crear marges), ara podem utilitzar la separació, els marges, les dimensions

i el posicionament en el CSS i deixar que l’HTML es dediqui exclusivament a

definir l’estructura del contingut.

Amb el CSS també podeu utilitzar les imatges de fons d’una manera molt

versàtil; podeu posar-les darrere del text o al voltant d’aquest de la manera

que desitgeu, i també podeu repetir les imatges utilitzant patrons regulars

per a crear fons. Aquí només parlaré molt breument de las imatges del CSS,

perquè en un altre apartat ja parlarem amb molt més detall de les imatges

de fons del CSS.

3.5.1. Aplicació de fons amb el CSS

L’ús del CSS per a aplicar imatges com a fons és molt senzill. Abans de mirar

el codi CSS següent, carregueu l’arxiu d’exemple “imagesandcss.html*” al vos-

tre navegador, o bé consulteu la figura 4 per a fer-vos una idea de tot el que es

pot fer amb les imatges de fons del CSS.

Els diferents quadres són en realitat elements de títol amb l’estil h2 amb una

certa separació i vores aplicats amb el CSS per així tenir espai suficient per a

mostrar la imatge de fons. Si comproveu l’arxiu HTML veureu que cadascun

dels elements h2 té un id únic, de manera que cadascun pot tenir una norma

CSS diferent aplicada.

* http://dev.opera.com/articles/view/17-images-in-html/

imagesandcss.html


Figura 4

Imatges de fons amb el CSS.

El CSS per al primer exemple és el següent:

La imatge s’hi afegeix amb el selector background-image i se li dóna una

URL entre parèntesis per a especificar la imatge que cal incloure-hi. Com a al-

ternativa en cas que la imatge no estigui disponible, també hauríeu de definir

un color de fons amb el selector background-color i un valor de color (he-

xadecimal, de nom o RGB). En aquest cas he escollit un color gris clar.

Per defecte, les imatges de fons es repetiran tant horitzontalment com verti-

calment per a omplir tot l’espai de l’element. Però es pot definir una repetició

diferent amb el selector background-repeat:

• No repetir la imatge: background-repeat:no-repeat;

• Repetir la imatge només horitzontalment: background-repeat:repeat-x;

• Repetir la imatge només verticalment: background-repeat:repeat-y;

Per defecte, la imatge de fons (si no es repeteix) es col·locarà a l’angle superior

esquerre de l’element. També podeu utilitzar background-position per a des-

background-image:url(ball.gif);

background-color:#eee;


plaçar la imatge de fons. Els valors més senzills que es poden escollir són top,

center i bottom per a l’alineació vertical i left, center i right per a l’aline-

ació horitzontal. Per exemple, per a col·locar la imatge a la part inferior dreta

haureu d’utilitzar background-position:bottom-right;, mentre que per a

centrar la imatge verticalment i alinear-la horitzontalment a la dreta utilitzaríeu

background-position:center-right;.

aSi controleu la repetició i la posició de les imatges de fons i utilitzeu unes imatges

enginyoses podreu crear molts efectes impressionants que no eren possibles abans

del CSS; i si poseu totes les definicions del fons en un arxiu CSS independent ho

tindreu molt fàcil per a canviar l’aspecte de tot el lloc web canviant només algu-

nes línies del codi. Això s’explicarà més endavant a l’apartat 30.

Resum

Això és tot el que heu de saber per a començar a afegir imatges al vostre HTML.

Hi ha molts més trucs per a utilitzar imatges i el CSS, però de moment podeu

començar a treballar amb el que heu après aquí tot concentrant-vos en les mi-

llors pràctiques per a l’aplicació d’imatges. Hem parlat de:

1. L’element img i els seus atributs bàsics:

a. src per a la ubicació de l’arxiu de la imatge

b. alt per al text que ha d’estar disponible quan la imatge no es carrega o no

es pot veure

c. title per a la informació addicional interessant (però no essencial)

d. longdesc per a indicar un arxiu extern que conté una representació tex-

tual alternativa de les dades que apareixen a la imatge quan aquesta és, per

exemple, un gràfic complex

e. width i height per a indicar al navegador les dimensions de la imatge i,

per tant, l’espai que li ha d’assignar

2. Els conceptes bàsics de les imatges de fons del CSS

a. Quan utilitzar fons (bàsicament, quan no és necessari que la imatge tingui

un text alternatiu perquè té només una finalitat estètica per a la maquetació).

b. Com col·locar i repetir les imatges de fons en el CSS

Preguntes de repàs

1. Per què és important afegir un bon text a una imatge en un atribut alt i

per què és necessari?

2. Si teniu una imatge de 1.280 × 786 píxels i voleu presentar una miniatura

de 40 × 30 píxels, podeu fer-ho amb HTML i és aconsellable fer-ho?

3. Què fa l’atribut longdesc, i com ho mostren els navegadors?

Vegeu l’apartat 4 del mòdul “Conceptes bàsics de CSS”.


4. Què fan els atributs valign i align i per què no els hem explicat aquí?

5. On es col·loquen per defecte les imatges de fons del CSS en un element i

quin és el patró de repetició per defecte?


4. Enllaços HTML: construïm un web!Christian Heilmann

En aquest apartat trobareu informació sobre un dels invents més revoluciona-

ris de tota la història del web: els enllaços. Els enllaços permeten que el lector

d’un document els segueixi per anar cap a un altre document i pugui passar

d’un servidor a un altre sense necessitat de desconnectar-se i tornar-se a con-

nectar cada vegada. Des que es van inventar han passat moltes coses, però n’hi

ha una que no ha canviat gens: els enllaços són una part molt important de

l’experiència en el web, i segons com els utilitzeu podeu posar les coses fàcils

o difícils a les persones que visitin el vostre web.

Una vegada hàgiu llegit aquest apartat sabreu com crear enllaços que siguin

fàcils d’entendre i que funcionin en qualsevol entorn. A més a més, també

aprendreu la manera en què els enllaços afecten la vostra popularitat en els

motors de cerca i rebreu alguns consells sobre la descripció dels enllaços.

4.1. Què són els enllaços?

Els enllaços són parts d’un lloc web (normalment creats amb l’HTML, però no

sempre) que apunten cap a altres recursos, com per exemple altres documents

HTML, arxius de text, PDF, etc. Hi ha enllaços que el navegador ha de seguir au-

tomàticament i que es creen amb elements link (ja n’heu trobat alguns en apar-

tats anteriors, els quals s’utilitzaven per a importar arxius CSS a un document

HTML) i també hi ha enllaços que l’usuari pot activar opcionalment. Aquests es

coneixen com a àncores i podeu afegir-los al document amb l’element a.

4.2. L’anatomia d’un enllaç àncora

Per exemple, en el següent document HTML el text Yahoo Developer Network es

converteix en un enllaç.

Nota

Com ja és habitual, aquest apartat va acompanyat d’un arxiu “links_code.zip”* que conté diversos arxius als quals aniré fent referència. * http://dev.opera.com/arti-cles/view/18-html-links-let-s-build-a-web/links_code.zip

Podeu convertir qualsevol element inserit en el document en un enllaç

àncora afegint un element a al davant i al darrere.


strict.dtd”>

<html>

<head>

<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>


Arxiu font: “linkexample.html”http://dev.opera.com/articles/view/18-html-links-let-s-build-a-web/linkexample.html

Les persones que visitin el web i activin aquest enllaç (clicant-hi amb el ratolí

o activant-lo amb el teclat o, en alguns casos, amb la veu) deixaran el lloc ac-

tual i passaran a YDN. L’enllaç en si experimenta altres canvis, que ja veurem

quan parlem dels estils dels enllaços.

L’àncora té diversos atributs que podeu afegir-hi:

• href: el recurs cap al qual apunta (ja sigui un arxiu extern o un ID d’àncora).

• id: l’ID d’àncora si l’àncora es una destinació i no un enllaç.

• title: informació addicional sobre el recurs extern.

Ara veurem en primer lloc els atributs més importants i llavors parlarem sobre

el que podeu fer per tal que tot sigui més comprensible per a les persones que

visitin el vostre web.

4.3. Enllaç o destinació? Els atributs id i href

Un element a pot tenir diverses funcions segons els atributs que hi definiu.

L’atribut més habitual que utilitzareu és href, que defineix el recurs al qual

apunta l’enllaç. Aquest atribut pot contenir diferents valors:

• Una URL a la mateixa carpeta (help.html), relativa a la carpeta actual (per

exemple “../../help/help.html”; els 2 punts signifiquen “puja un nivell dins

la jerarquia de carpetes del lloc”) o absoluta a l’arrel del servidor. Per exem-

ple “/help/help.html”; una barra inclinada al principi de l’adreça significa

que aquesta comença a l’arrel de l’ordinador en el qual es troba la pàgina.

• Una URL en un servidor totalment diferent. Per exemple “http://wait-till-

i.com” o “ftp://ftp.opera.com/” o “http://developer.yahoo.com/yui”.

• Un identificador de fragment o un nom d’àncora precedit d’un coixinet.

Aquest apunta a una destinació dins del mateix document. Per exemple

“#menu”.

<title>Link Example</title>

<link rel=“stylesheet” href=“styles.css”>

</head>

<body>

<h1>A link to the YDN</h1>

<p><a href=“http://developer.yahoo.com”>Yahoo Developer Network</a></p>

</body>

</html>


• Una combinació d’URL i identificadors de fragments: podeu enllaçar direc-

tament amb una secció d’un document diferent fent que l’atribut href

apunti cap a una URL seguida d’un identificador de fragment. Per exemple,

“http://developer.yahoo.com/yui/#cheatsheets”.

Qualsevol d’aquests valors el convertirà en un enllaç, ja que apuntarà cap a un al-

tre lloc. Per altra banda, un atribut id el convertirà en una àncora dins la pàgina;

alguna cosa a la qual apunta un altre enllaç. Això pot ser una mica confús, ja que

els dos utilitzen l’element d’àncora (a). Per a poder-ho recordar més fàcilment po-

deu veure-ho de la manera següent: un atribut id converteix un enllaç en una àn-

cora i el podeu utilitzar per a enllaçar amb seccions específiques del document.

El següent bloc de codi HTML conté exemples de tots els tipus diferents d’en-

llaços:


strict.dtd”>

2 <html>

3 <head>

4 <meta http-equiv=“content-type” content=“text/html; charset=utf-8”>

5 <title>Different Link Example</title>

6 <link rel=“stylesheet” href=“linkexamplestyles.css”>

7 </head>

8 <body>

9 <h1>Different Link examples</h1>

10 <h2>Example of in-page navigation with fragment identifiers, links and

anchors</h2>

11 <div id=“nav”>

12 <ul id=“toc”>

13 <li><a href=“#sec1”>Section One</a></li>

14 <li><a href=“#sec2”>Section Two</a></li>

15 <li><a href=“#sec3”>Section Three</a></li>

16 <li><a href=“#sec4”>Section Four</a></li>

17 <li><a href=“#sec5”>Section Five</a></li>

18 </ul>

19 </div>

20 <div id=“content”>

21 <div>

22 <h2><a id=“sec1”>Section #1</a></h2>

23 <p><a href=“#toc”>Back to menu</a></p>

24 </div>

25 <div>



28 </div>


Arxiu font: “linkexample.html”http://dev.opera.com/articles/view/18-html-links-let-s-build-a-web/linkexamples.html

Obriu aquest arxiu en el navegador i experimenteu-hi. Veureu que si activeu qual-

sevol dels enllaços de la primera llista passareu a la secció corresponent del docu-

ment. Això és així perquè estan connectats pel mateix identificador de fragment;

el primer enllaç de la llista, per exemple, té un atribut href de #sec1, que és el

mateix que el valor ID de l’enllaç que hi ha a l’interior del primer element h2 del

contingut. Això és tot el que necessiteu per a connectar dos elements d’àncora en

un document; si us hi enllaceu en un atribut href, utilitzeu el mateix valor pre-

cedit per un coixinet. També pot ser que us hagueu adonat que la URL de la barra

d’ubicació del navegador ha canviat i que ara mostra un identificador de segment

al final, la qual cosa significa que els visitants poden afegir aquesta secció a les

adreces d’interès o enviar l’enllaç per correu electrònic a altres persones per a in-

dicar-los exactament on han d’anar.

No obstant això, si activeu qualsevol dels enllaços “Back to menu” (tornar al

menú) ocorrerà el mateix. Com pot ser? Els identificadors de fragment poden

ser qualsevol element amb un ID.

29 <div>



32 </div>

33 <div>



36 </div>

37 <div>



40 </div>

41 </div>

42 <h2>Some other link examples</h2>

43 <ul>

44 <li><a href=“http://developer.yahoo.com”>Yahoo Developer Network</a></li>

45 <li><a href=“http://dev.opera.com/articles/view/the-freelancing-business-

part-1-pricing/#marketing”>Tips on marketing yourself</a></li>

46 <li><a href=“ftp://get.opera.com/pub/opera/win/”>Download different Opera

versions</a></li>

47 <li><a href=“http://farm1.static.flickr.com/56/

188791635_0b8bdd808d.jpg?v=0”>Photo of my book</a></li>

48 </ul>

49 </body>

50 </html>


Per a recapitular:

• Els enllaços d’àncora poden tenir un identificador de fragment com a valor

de l’atribut ref; aquest identificador de fragment ha de començar amb un

coixinet (#).

• En activar-lo, aquest enllaç portarà cap a qualsevol element HTML amb un

id d’aquest valor. Aquests ID de cada pàgina han de ser únics.

• Els ID segueixen algunes convencions pel que fa als noms. Les més impor-

tants és que han de començar amb un caràcter alfanumèric i que no poden

contenir espais.

Tot això cobreix el menú i les diferents seccions de l’exemple, però què passa

amb els altres enllaços? Si els proveu veureu que apunten cap a destinacions

diferents: un va a un altre lloc, un altre mostra una fotografia i el tercer mostra

una secció concreta d’una altra pàgina web (que es troba passant a un ID es-

pecífic). Si tot ha funcionat bé, perfecte! Però què passa si no heu entès, o el

navegador no ha entès, alguns d’aquests recursos?

4.4. No permeteu cap ambigüitat en els enllaços

El més important que cal que recordeu sobre els enllaços és que són una part

bàsica per a la vostra relació amb les persones que us visitin. Aquestes persones

es refien que quan els oferiu un enllaç podran seguir-lo i accedir a una infor-

mació bona i pertinent. Si els vostres enllaços no funcionen perquè el recurs

al qual apunten no està disponible o es troba en un format que el visitant no

pot llegir, haureu traït la seva confiança i haureu perdut credibilitat. No heu

de permetre mai que això passi.

4.4.1. Oferir informació addicional amb un atribut title

Per exemple, podeu escriure una petita introducció al contingut i la ubicació

del document enllaçat:

Igual que amb qualsevol altre element HTML, podeu afegir un atribut

title a un element a per afegir-hi informació addicional. Els navega-

dors mostraran el que es coneix com un indicador de funció quan els

visitants passin el cursor del ratolí sobre l’enllaç. Aquest indicador de

funció els indica la naturalesa d’aquest enllaç.


Arxiu font: “titleexample.html”http://dev.opera.com/articles/view/18-html-links-let-s-build-a-web/titleexample.html

Figura 1

Afegir un atribut de títol per a mostrar la informació com un indicador de funció quan els visitants passen per sobre l’enllaç.

Però no podeu esperar que els visitants tinguin prou paciència i coordinació

mà-ull per a poder-vos refiar d’aquest recurs per a donar informació crucial. És

molt probable que els usuaris amb alguna discapacitat visual, que no poden

veure la pàgina, no puguin accedir a aquesta informació. Tot i que els lectors

de pantalla inclouen l’opció de llegir en veu alta els atributs title per a l’usu-

ari final, aquesta opció està desactivada per defecte; és per aquest motiu que

no hauríeu de fer servir mai l’atribut title per a donar informació crucial so-

bre l’enllaç. La informació crucial:

• Enllaçar amb recursos no HTML com arxius PDF, imatges, vídeos, arxius de

so o descàrregues.

• Fer que sortim del lloc actual i que passem a un altre servidor (enllaços ex-

terns i enllaços interns).


strict.dtd”>

<html>

<head>

<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>

<title>Adding extra information with a title attribute</title>

<link rel=“stylesheet” href=“linkexamplestyles.css”>

</head>

<body>

<h1>Adding extra information with a title attribute</h1>

<ul>

<li>Find more information on the <a title=“The Yahoo Developer Network is the

main hub for all the developer tools Yahoo offers, including the Yahoo User

Interface Library (YUI) and the Design Patterns repository”

href=“http://developer.yahoo.com”>Yahoo Developer Network</a>.</li>

</ul>

</body>

</html>


• Enllaçar amb un document que s’obrirà en un marc o en una finestra emer-

gent diferent.

4.4.2. Enllaços a recursos no HTML: no obligueu els visitants

a fer conjectures

Hi ha una situació molt empipadora, que és quan cliqueu un enllaç i el navegador

no sap què ha de fer amb allò a què apunta l’enllaç que heu clicat. No obstant ai-

xò, no és gens estrany veure llocs web que enllacen amb imatges, documents PDF

i vídeos sense avisar els visitants perquè estiguin preparats. Els vídeos són una cau-

sa molt habitual de problemes dels navegadors. A més a més, també és possible

que el recurs tingui un volum molt gran (un PDF de 20 MB, per exemple), la qual

cosa significa que potser el visitants preferirien descarregar-lo en lloc d’obrir-lo

dintre del navegador i afegir-lo així a un consum de memòria que ja és conside-

rable; o potser fins i tot decidirien ni tan sols accedir-hi.

Aquí trobareu alguns exemples:

Uns dels factors principals de l’èxit d’un producte web és el fet de no

obligar les persones que el visiten a fer conjectures sobre què passarà

quan hi facin alguna cosa; sempre s’ha d’explicar clarament quins efec-

tes tindran les seves accions. En el cas dels enllaços, tot el que cal que

feu per a evitar moltes frustracions és explicar bé als visitants què és el

recurs al qual porta l’enllaç.


strict.dtd”>

2 <html>

3 <head>

4 <meta http-equiv=“content-type” content=“text/html; charset=utf-8”>

5 <title>Linking non-HTML resources</title>

6 <link rel=“stylesheet” href=“linkexamplestyles.css”>

7 </head>

8 <body>

9 <h1>Linking non-HTML resources</h1>

10 <ul>

11 <li>Find more information on the <a href=“http://developer.yahoo.com”>Yahoo

Developer Network site (external)</a></li>

12 <li>Download the <a href=“http://www.wait-till-i.com/stuff/JavaScript-

DOM- Cheatsheet.pdf”>Dom Cheatsheet (PDF, 85KB)</a></li>

13 <li>Pick and <a href=“ftp://get.opera.com/pub/opera/win/”>download

different Opera versions from their FTP (external)</a></li>


Arxiu font: “linkingnonhtml.html”http://dev.opera.com/articles/view/18-html-links-let-s-build-a-web/linkingnonhtml.html

Si oferiu tota aquesta informació sobre l’arxiu enllaçat i l’espai que ocupa, els vi-

sitants podran decidir què en faran i no haureu de suposar que tenen el navegador

configurat d’una manera concreta o alguns programes instal·lats. Si ho combineu

amb uns estils intel·ligents, fins i tot podreu aconseguir que tingui un bon aspecte

i que tot sigui molt intuïtiu. Si us en voleu assegurar del tot, també podeu oferir

una secció d’ajuda que expliqui què són els diferents formats d’arxiu i on es po-

den aconseguir els programes necessaris per obrir-los.

4.4.3. Enllaços externs i enllaços interns

Una de les coses que més temen els responsables dels negocis pel que fa als llocs

web de les seves companyies és que la gent que els visiti en surti prematurament.

Aquesta és sovint la raó per no oferir mai enllaços cap a tercers (a menys que

aquests tercers paguin diners pel privilegi del redireccionament del trànsit cap a

ells). Més endavant ja tornaré a parlar d’aquest criteri tan equivocat; de moment

parlarem del que fa la gent per a evitar que els visitants abandonin el seu lloc i les

conseqüències que tenen aquestes mesures per a l’èxit del lloc web.

4.5. Marcs i finestres emergents: ni parlar-ne!

El temor de perdre visitants que van cap a altres llocs web, combinat amb el desig

de seguir-nos enllaçant amb aquests altres llocs, ens ha portat alguns invents en

el desenvolupament dels webs que s’han convertit durant anys en un veritable

problema per a la usabilitat dels llocs: els marcs i les finestres emergents.

L’ús de marcs HTML significa que esteu separant la pàgina que apareix en el

navegador en diferents documents. L’avantatge és que el document segueix

essent aparentment el mateix fins i tot en carregar-ne parts d’aquest, ja sigui

des del servidor propi o des de servidors de tercers. Però aquí és on acaba la

seva utilitat; els marcs són una experiència terrible per a l’usuari i en realitat

són perniciosos:

• Els motors de cerca no poden indexar mai tota la pàgina, sinó que en els

resultats de la cerca només en mostren parts que no tenen cap sentit fora

de context.

14 <li>Check out a <a href=“http://farm1.static.flickr.com/56/

188791635_0b8bdd808d.jpg?v=0”>Photo of my book (JPG, 200KB)</a></li>

15 </ul>

16 </body>

17 </html>


• Els visitants no poden afegir la pàgina a la llista d’adreces d’interès; la pro-

pera vegada que obrin la pàgina des d’aquesta llista veuran l’estat inicial

del conjunt de marcs i no la pàgina tal com la van deixar l’última vegada.

• Els visitants que depenguin de tecnologies d’assistència ho tenen molt di-

fícil per navegar per conjunts de marcs.

• És possible que els llocs web de tercers no vulguin aparèixer dintre d’un

conjunt de marcs i que utilitzin scripts “trencadors de marcs”, que substi-

tuiran els conjunts de marcs per a la URL real quan intenteu incrustar-los.

Això es fa, per exemple, per evitar que els delinqüents aconsegueixin amb

enganys que els usuaris d’Internet introdueixin informació com ara el nú-

mero de la targeta de crèdit en un lloc web que aparentment sembla d’un

banc (el que es coneix com a “phishing”).

Obrir una nova instància del navegador és una altra de les maneres habituals

d’enllaçar amb llocs web de tercers, ja sigui amb una finestra emergent de

scripts o amb un atribut target amb el valor _blank. El fet que tots els nave-

gadors moderns tinguin un bloquejador de finestres emergents ja és tota una

indicació de si és segur o no refiar-se d’aquesta tècnica... No ho és en absolut!

Ras i curt: no utilitzeu l’atribut target per a crear enllaços tret que sapigueu exac-

tament què esteu fent. De totes maneres, aquesta ja és una idea antiquada; actu-

alment la majoria dels navegadors tenen interfícies amb pestanyes, amb la qual

cosa els usuaris poden obrir llocs de tercers en el fons per a tornar-hi més tard i

mentrestant quedar-se al vostre lloc web. En algunes circumstàncies és possible

que vulgueu indicar la diferència entre els enllaços externs i interns, però heu de

deixar sempre que sigui el visitant el que decideixi què en farà.

4.6. Avantatges dels enllaços de sortida i dels enllaços d’entrada

Hi ha algunes bones raons per enllaçar amb llocs de tercers fins i tot quan

aquests són de la competència.

• Us dóna credibilitat davant els vostres visitants; esteu tan segurs de la qua-

litat del vostre contingut que no us espanteu davant de la competència.

Els enllaços dintre d’un conjunt de marcs utilitzen l’atribut target de

l’àncora per adreçar-se al marc correcte. Cadascun dels marcs d’un con-

junt de marcs té un nom concret i en activar l’enllaç s’obre el document

definit a l’atribut href d’aquest marc. Si el conjunt de marcs no està dis-

ponible (per exemple, quan un visitant ha trobat el document amb els

enllaços a través d’un motor de cerca), cadascun dels enllaços s’obre en

una nova instància del navegador.


• És una oportunitat per a oferir un servei complet; us podeu vincular al con-

tingut i a articles o fins i tot a productes d’altres llocs web que vosaltres no

oferiu però que poden ser d’interès per als visitants que volen aprofundir

més en el tema en qüestió.

• Podeu demostrar que teniu raó agafant un article anterior d’un tercer i ofe-

rint una solució millor o diferent i fer referència a aquest article mitjançant

un enllaç.

La utilitat dels enllaços d’entrada (els enllaços que apunten des del lloc web

d’un tercer cap al vostre) genera molt menys debat. Com més llocs web vàlids

i d’alta qualitat s’enllacin amb el vostre amb les paraules clau pertinents, més

amunt apareixereu en els motors de cerca com el Google. Abans que això pas-

si, però, cal que demostreu que no teniu por d’enllaçar-vos amb altres llocs.

Les paraules clau pertinents ens porten cap a una altra part molt important de

la creació d’uns bons enllaços: com descriure’ls.

4.7. Descripció dels enllaços

Ja n’he parlat una mica en el subapartat sobre els enllaços cap a recursos no

HTML, però sempre és bo recordar que els enllaços no només són part del text

de la pàgina, sinó que també són uns elements interactius del document.

Algunes tecnologies d’assistència ofereixen una llista dels enllaços en lloc de

tot el document per tal de permetre als usuaris que puguin navegar ràpida-

ment per ell, la qual cosa significa que heu de comprovar que els textos dels

vostres enllaços tinguin sentit fora del context en què es troben. Podeu com-

provar-ho molt fàcilment a Opera obrint qualsevol lloc web i seleccionant To-

ols > Links (eines > enllaços) en el menú o prement ‘Ctrl’ + ‘Majúscules’ + ‘L’.

S’obrirà una pestanya nova en la qual podreu veure tots els enllaços del docu-

ment i cap a on apunten.

Això significa que heu de comprovar no només que tots els textos dels enlla-

ços tinguin sentit, sinó també que no hi hagi diversos enllaços amb la mateixa

descripció però que apuntin cap a recursos diferents. L’error clàssic que es co-

met és el dels enllaços “cliqueu aquí” que es descriuen, per exemple, com a

“Per descarregar l’última versió de la nostra eina, cliqueu aquí”. És molt millor

utilitzar un text de l’enllaç que expliqui cap on apunta; en aquest cas, “Podeu

descarregar i provar l’última versió de la nostra eina”.

aAixò mateix també s’aplica als enllaços “més”. Els trobareu en els llocs de no-

tícies, en els quals veureu un titular i un text resumit i un enllaç “més” o “no-

tícia completa” que s’ha de seguir. La solució d’aquest problema és utilitzar

una imatge “més” enllaçada i donar-li un text alternatiu únic o afegir un espai



dins l’enllaç després de “més” i ocultar-lo amb el CSS. Explicarem tots aquests

trucs més detalladament a l’apartat sobre els menús i la navegació, que troba-

reu més endavant en aquesta assignatura.

4.8. Estils dels enllaços

Encara no ha arribat el moment de parlar del CSS, però en aquest punt és útil

tenir en compte que l’aspecte dels enllaços és molt important i que hi ha di-

versos i diferents estats d’enllaços que cal considerar. Els estats dels enllaços

(que més endavant es relacionen amb els pseudoselectors del CSS; pot sonar

complex, però no ho és) són:

• link: és l’estat per defecte; defineix l’aspecte que han de tenir els enllaços

en una part concreta del document. Per defecte, els enllaços no visitats són

de color blau.

• visited: l’estil d’un enllaç que ja s’ha visitat (i que potser ja es troba a la

memòria cau del navegador). Per defecte, els enllaços ja visitats són de co-

lor porpra.

• hover: l’estil d’un enllaç mentre el cursor del ratolí es troba sobre ell.

• active: l’estil de l’enllaç mentre està activat; és a dir, mentre està en curs

la connexió amb l’altre lloc; també és l’estil de l’últim enllaç activat quan

arribeu al document anant enrere en el navegador.

Resum

Aquesta vegada hem explicat moltes coses, però és molt important recordar el

funcionament dels enllaços i què han de fer. Al llarg de la vostra trajectòria

professional com a desenvolupadors de webs aprendreu molts trucs i tècni-

ques per a anul·lar aquests comportaments per defecte, i espero que us pareu

a pensar si el que voleu fer és realment necessari.

He parlat de:

• L’anatomia de l’element a i els seus atributs (no desaprovats).

• La diferència entre els elements a com a enllaços (amb un atribut href) i

com a àncores (amb un atribut name).

• La necessitat que el nom d’una àncora sigui únic.

• La necessitat d’explicar als visitants què poden esperar quan segueixen un

enllaç (el format de l’arxiu i si és molt gran).


• Com afegir informació amb l’atribut de títol que es mostra com un indica-

dor de funció; i per què aquesta no és una manera segura d’oferir informa-

ció crucial.

• La diferència entre els enllaços externs (que apunten cap a llocs web de ter-

cers) i els interns (que apunten cap a documents del mateix servidor).

• Les pràctiques antiquades, com ara les finestres emergents i els marcs, i per

què cal evitar-les.

• Els avantatges d’enllaçar-se amb altres llocs i que altres llocs s’enllacin amb

el vostre.

• Com descriure adequadament els enllaços de manera que tinguin sentit

fora de context, i per què és necessari.

• Els antecedents dels estils bàsics dels enllaços.

Amb tots aquests coneixements hauríeu de ser capaços d’escriure documents

HTML que s’enllacin adequadament, i ja esteu preparats per a començar a pen-

sar en els menús i la navegació del lloc.

Preguntes de repàs

1. Quin problema té l’enllaç següent: <a href=“report.pdf” title=“re-

port as PDF, 2.3MB”>get our latest report</a>?

2. Per a què serveix l’atribut target en els enllaços? Es pot fer servir d’alguna

manera positiva?

3. He parlat sobre les relacions dels enllaços i les connexions entre els enllaços

i les àncores. Hi ha algun atribut per als enllaços que descrigui també les rela-

cions entre documents?

4. Com es pot escriure un enllaç que enviï els visitants cap a un element que

hi ha més avall de la pàgina en clicar-lo? Què cal comprovar per endavant?


5. Taules HTMLJenifer Hanen

Vaja! Com hem d’utilitzar els estàndards del web per a organitzar pilons de da-

des? El simple fet de pensar en les tones d’elements imbricats necessaris per a

aconseguir que totes aquestes dades es distribueixin en files i quadres ja fa que

el nostre cervell quedi totalment col·lapsat; però hi ha una solució: les taules

poden salvar-nos!

En el disseny de webs, les taules són una manera molt bona d’organitzar dades

en un format tabulat. És a dir, que hem de veure les taules, els gràfics i els altres

elements visuals informatius com una ajuda per a veure i processar una gran

quantitat d’informació d’una manera resumida que ens ajuda a comparar i

contrastar dades diferents. Podem veure aquests elements molt sovint als llocs

web, ja sigui per a resumir o comparar resultats d’eleccions polítiques, estadís-

tiques esportives, preus, talles o altres dades.

A l’època juràssica d’Internet, abans de la popularització del CSS com a mèto-

de per a separar la presentació de l’estructura de l’HTML, les taules s’utilitza-

ven per a maquetar les pàgines web: per a crear columnes i quadres i, en

general, per a distribuir el contingut. Però aquesta no és la manera correcta de

fer les coses; la maquetació amb taules donava com a resultat unes pàgines car-

regades i confuses amb un piló de taules imbricades; arxius molt grans, difícils

de mantenir i difícils de modificar. Encara podreu veure llocs web fets així al

web, però cal que tingueu molt clar que actualment les taules s’han d’utilitzar

només per a allò que van ser dissenyades: les dades tabulars, i fer servir el CSS

per a controlar la maquetació.

En aquest apartat explicaré com utilitzar adequadament les taules HTML.

5.1. La taula més bàsica

Començaré amb el codi HTML semàntic necessari per a crear una taula bàsica;

aquest exemple en concret compara erupcions volcàniques recents de la regió

del Pacífic d’Amèrica del Nord. A mi m’agraden els volcans i quan era petita

vaig convèncer la meva mare que em portés a diversos d’aquests volcans du-

rant els viatges que fèiem a l’estiu per a visitar l’àvia. Sempre esperava que al-

gun d’aquests volcans del nord-est del Pacífic* entrés en erupció mentre

estàvem de vacances, però va ser en va.

* http://volcanoes.usgs.gov/Volcanoes/Historical.html


La primera taula és la següent:

Aquest codi es representa de la manera següent:

Començarem descomponent l’etiquetatge HTML utilitzat en el codi anterior:

• <table></table>: L’element table és necessari per a indicar al navegador

que voleu organitzar el contingut d’una manera tabular.

• <tr></tr>: L’element tr estableix una fila de la taula. Això permet que

el navegador organitzi tot el contingut que hi ha entre les etiquetes <tr>

i </tr> d’una manera horitzontal, totes elles en una fila.

• <td></td>: L’element td defineix la cel·la de la taula o cadascun dels es-

pais individuals per al contingut dintre de la fila. Utilitzeu només les cel·les

<table>

<tr>

<td>Volcano Name</td>

<td>Location</td>

<td>Last Major Eruption</td>

<td>Type of Eruption</td>

</tr>

<tr>

<td>Mt. Lassen</td>

<td>California</td>

<td>1914-17</td>

<td>Explosive Eruption</td>

</tr>

<tr>

<td>Mt. Hood</td>

<td>Oregon</td>

<td>1790s</td>

<td>Pyroclastic flows and Mudflows</td>

</tr>

<tr>

<td>Mt. St. Helens</td>

<td>Washington</td>

<td>1980</td>


</tr>

</table>


de taula td que siguin necessàries segons les dades que s’hi vulguin inclou-

re. No utilitzeu cel·les td buides per a crear espai en blanc o separació; per

a crear l’espai en blanc o la separació cal que utilitzeu el CSS, ja que no no-

més és una bona manera de separar la presentació de l’estructura, sinó que

també fa que la taula sigui més fàcil d’entendre per part de les persones

amb discapacitats visuals que utilitzen lectors de pantalla per a llegir-los el

contingut de la taula en veu alta.

Tingueu en compte que els elements bàsics s’han d’imbricar de la manera se-

güent:

Si els ordenem d’una altra manera, el navegador generarà un garbuix conside-

rable i mostrarà la taula d’una manera molt estranya.

5.2. Afegir-hi algunes altres funcions

Ara que ja tenim la taula bàsica, podeu afegir-hi algunes funcions de taula una

mica més complexes. En primer lloc hi afegirem un títol i uns encapçalaments de

columna per a millorar les dades tant pel que fa a la semàntica com a la llegibilitat

per part dels lectors de pantalla. L’etiquetatge de la taula millorada és el següent:

<table>

<tr>

<td>content</td>

<td>content</td>

<td>content</td>

</tr>

</table>

<table>

<caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>

<tr>

<th>Volcano Name</th>

<th>Location</th>

<th>Last Major Eruption</th>

<th>Type of Eruption</th>

</tr>

<tr>

<td>Mt. Lassen</td>

<td>California</td>

<td>1914-17</td>


</tr>


Aquest codi es representa de la manera següent:

Els elements nous que hem utilitzat són:

• <caption></caption>: L’element caption permet afegir un títol a les

dades de la taula. La majoria dels navegadors centren el títol i el reprodu-

eixen amb la mateixa amplada que la taula, llevat que s’utilitzi el CSS per

a alinear el text d’una manera diferent.

• <th></th>: L’element th descriu el contingut que hi ha entre aquestes eti-

quetes com els encapçalaments per a les columnes de la taula. Això és útil

no només per a ajudar a descriure semànticament quina és la funció

d’aquest contingut, sinó que també ajuda a reproduir-lo d’una manera més

precisa en diversos navegadors i dispositius. Aquest exemple és la manera

més bàsica d’utilitzar l’element th.

5.3. Seguir estructurant la taula

Com a pas final per a acabar d’estructurar la nostra taula, definiré unes sec-

cions d’encapçalament i de cos de la taula, hi afegiré un peu i definiré l’àm-

bit dels títols de fila i columna. També hi afegiré un atribut de resum per a

<tr>

<td>Mt. Hood</td>

<td>Oregon</td>

<td>1790s</td>


</tr>

<tr>

<td>Mt. St. Helens</td>

<td>Washington</td>

<td>1980</td>


</tr>

</table>


descriure el contingut de la taula. L’etiquetatge definitiu de la taula és el

següent:

Aquest codi de taula té el següent aspecte en un navegador:

<table summary=“a summary of recent major volcanic eruptions in the Pacific

Northwest”>

<caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>

<thead>

<tr>

<th scope=“col”>Volcano Name</th>

<th scope=“col”>Location</th>

<th scope=“col”>Last Major Eruption</th>

<th scope=“col”>Type of Eruption</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan=“4”>Compiled in 2008 by Ms Jen</td>

</tr>

</tfoot>

<tbody>

<tr>

<th scope=“row”>Mt. Lassen</th>

<td>California</td>

<td>1914-17</td>


</tr>

<tr>

<th scope=“row”>Mt. Hood</th>

<td>Oregon</td>

<td>1790s</td>


</tr>

<tr>

<th scope=“row”>Mt. St. Helens</th>

<td>Washington</td>

<td>1980</td>


</tr>

</tbody>

</table>


Els nous elements/atributs són els següents:

• Els elements thead, tbody i tfoot: Aquests elements defineixen respectiva-

ment el títol, el cos i el peu de la taula. Llevat que estiguem codificant una tau-

la realment complexa amb moltes columnes i files de dades, si els utilitzem

correm el risc d’excedir-nos. En una taula complexa, però, el seu ús no només

estructurarà el contingut per al codificador, sinó també per als navegadors i al-

tres dispositius.

• Els atributs colspan i rowspan: L’atribut colspan crea una cel·la de taula

que ocuparà més d’una columna. En el cas del peu anterior, jo volia que

una cel·la de la taula n’ocupés tota l’amplada i per això li he dit que havia

d’estendre’s al llarg de quatre columnes. També podeu afegir-hi un atribut

rowspan de cel·la de taula que permetrà que la cel·la ocupi x files, per

exemple <td rowspan=“3”>.

• L’atribut summary: Aquest atribut s’utilitza per a definir un resum del contin-

gut de la taula per al seu ús per part dels lectors de pantalla (observeu que

aquest resum no apareix a la versió de la taula que es veu en pantalla.) Tingueu

en compte que en les recomanacions WC3 antigues, WCAG 1.0 i HTML 4.0,

es diu que es pot utilitzar l’atribut summary tal com s’ha explicat anterior-

ment. En els esborranys més nous de les especificacions, però, aquest atribut

summary ja no es menciona. El fet de seguir utilitzant l’atribut summary és una

qüestió que està per resoldre; de moment, els integrants del Web Standards

Curriculum hem arribat a la conclusió que val la pena seguir-lo utilitzant. Al

cap i a la fi, no fa cap mal i presenta alguns avantatges per a l’accessibilitat.

• L’atribut scope: També és possible que hàgiu observat els atributs scope de

les etiquetes th, i el fet que jo hagi definit els noms dels volcans també com a

títols de columnes, dins les files de dades. Això és perfectament possible, però

de fet m’estic apartant del tema. L’atribut scope es pot utilitzar dins l’element

th per a indicar als lectors de pantalla que el contingut de th és el títol d’una

columna o una fila. L’atribut scope només s’utilitza dins l’element th.

5.4. El CSS ens ajuda: una taula amb un aspecte millor

Els elements i atributs anteriors són tot el que necessiteu per codificar una

bona taula de dades. Ara que ja hem definit l’estructura HTML, passem a veure

un CSS molt senzill per a fer que la taula tingui un aspecte encara millor:

body{

background: #ffffff;

margin: 0;

padding: 20px;

line-height: 1.4em;

font-family: tahoma, arial, sans-serif;

font-size: 62.5%;

}


Quan ho apliquem a l’etiquetatge definitiu de la nostra taula, l’aspecte que

tindrà és el que es pot veure a la figura 1. També podeu comprovar la taula real

d’exemple.

Figura 1

Ara la taula és visualment molt més atractiva.

Arxiu font: “table3.html”http://dev.opera.com/articles/view/19-html-tables/table3.html

Ooooh...! Molt millor, no? Podeu aplicar els estils que vulgueu a la taula,

però l’exemple anterior és un punt de referència a partir del qual podeu co-

mençar a treballar. En un apartat aprendreu moltes més coses sobre els es-

table {

width: 80%;

margin: 0;

background: #FFFFFF;

border: 1px solid #333333;

border-collapse: collapse;

}

td, th {

border-bottom: 1px solid #333333;

padding: 6px 16px;

text-align: left;

}

th {

background: #EEEEEE;

}

caption {

background: #E0E0E0;

margin: 0;

border: 1px solid #333333;

border-bottom: none;

padding: 6px 16px;

font-weight: bold;

}


tils de les taules; de moment em limitaré a explicar què fa cadascuna de les

seccions d’aquest CSS:

• body: En el CSS anterior he afegit propietats per definir el marge (en aquest cas

a zero), una separació per crear una mica de lloc, un color de fons (blanc), la

mida i la família del tipus de lletra, així com l’interlineat per fer-ho tot una

mica més espaiós. Podeu descarregar-vos el codi d’aquest exemple a http://

dev.opera.com/articles/view/19-html-tables/csstable.zip; proveu de modifi-

car-ne les propietats a l’arxiu CSS per a veure com canvien les coses.

• table: Les vores s’hi han afegit amb la declaració de vores del CSS. Per tal

que tot funcionés correctament també he hagut d’afegir la propietat bor-

der-collapse a collapse; d’aquesta manera es reinicien els valors de les

vores de la taula i border-bottom és una línia recta contínua que ocupa

tota la fila en lloc de quedar trencada entre cadascuna de les cel·les de la

taula. En aquest exemple he definit width al 80%. Això fa que la taula ocu-

pi el 80% de l’amplada de la pantalla i l’amplada de la taula canviarà sem-

pre que es facin canvis a l’amplada de pantalla del navegador.

• th i td: En el CSS anterior he definit l’alineació del text a l’esquerra, però tam-

bé pot ser centrada o fins i tot podeu donar noms de classe als diferents ele-

ments th i td i llavors utilitzar el CSS per a tenir un major control sobre

cadascuna de les files o columnes (en el cas de les files, donareu un nom de

classe a l’etiqueta de l’element tr). També he afegit una mica de separació a

th i td per obrir les files i aconseguir així que la llegibilitat fos millor. En el cas

del selector th anterior, he definit un altre color per diferenciar els títols de la

resta de la taula.

• caption: Si no definiu les propietats CSS per al selector caption, aquest

no tindrà cap vora i tindrà el mateix color de fons que tota la pàgina encara

que l’etiquetatge HTML per al títol de la taula es trobi a l’etiqueta table.

Així, doncs, en l’exemple anterior he definit una vora per al títol (sense cap

vora inferior, ja que la vora de la taula ja fa aquesta funció), un color de

fons diferent i un tipus en negreta per a diferenciar el títol de la fila dels

títols de columna.

Resum

En aquest apartat he explicat tot el que heu de saber per a crear unes taules de

dades en HTML molt efectives. Això és tot! Per a acabar us deixaré amb un pa-

rell d’idees bàsiques que cal que recordeu:

• És important que les taules estiguin correctament codificades per tal que es

puguin llegir en tots els navegadors, dispositius mòbils i tota mena de su-

ports. L’HTML de la taula ha de ser tan reduït com sigui possible, i per a


definir-ne els estils s’ha d’utilitzar el CSS. Més endavant en aquesta mateixa

assignatura aprendreu molt més sobre el CSS.

• Els dispositius mòbils i els usuaris que utilitzin lectors de pantalla podran

accedir a les taules sempre que el seu codi sigui net i que es facin servir els

atributs com scope i summary, així com l’element caption, per anunciar

clarament i semànticament per a què serveixen les seccions respectives. Per

a l’accessibilitat també és important no utilitzar cel·les buides per a crear

espai en blanc (per a això heu d’utilitzar el CSS).

Preguntes de repàs

1. Comenceu escrivint el codi d’una taula senzilla amb només els 3 elements

de taula principals: table, tr i td. Deseu-la i obriu-la en un navegador.

2. Igual que en el segon exemple anterior, afegiu-hi un títol, títols de colum-

na i un peu. Com canvia el que podeu veure en el navegador?

3. Què podeu fer per a que la taula sigui més accessible per als lectors de pan-

talla i els dispositius portàtils?

4. Ara creeu un arxiu CSS. Proveu de definir un estil per a les vores, la separa-

ció i l’espaiat de cel·la de la taula només amb el CSS i sense fer servir cap atri-

but de l’etiquetatge HTML. Afegiu-hi un color de fons i definiu l’estil dels tipus

de lletra.

Passeu-ho bé!


Recomanació HTML 4 per a taules del W3C


Recomanació CSS 2 per a taules del W3C


“Bring on the Tables” de Roger Johansson

http://www.456bereastreet.com/archive/200410/bring_on_the_tables/


6. Formularis HTML: conceptes bàsicsJenifer Hanen

Tothom ha vist un formulari. Tothom n’ha utilitzat algun. Però n’heu codifi-

cat algun?

Un formulari en línia és qualsevol àrea en la qual es pot introduir informació

en una pàgina web; per exemple, introduint text o números en un quadre de

text, marcant una casella de selecció, seleccionant un botó d’opció o escollint

una opció d’una llista. Llavors, el formulari es tramet al lloc web prement el

botó de trametre.

Al web trobareu formularis per tot arreu: per a introduir noms d’usuari i con-

trasenyes en una pantalla d’accés, per a fer comentaris en blocs, per a escriure

el vostre perfil en una xarxa social o per a especificar la informació de factura-

ció en un lloc de compres.

Crear un formulari és molt senzill, però què cal saber sobre els formularis per-

què siguin conformes amb els estàndards del web? De moment, si heu anat se-

guint el programa d’estudis d’estàndards del web d’Opera, probablement ja

tindreu molt clar que és molt important seguir sempre aquests estàndards. El

codi necessari per a crear un formulari accessible i conforme amb els estàn-

dards no suposa més feina que la creació d’un formulari malgirbat.

Així, doncs, començarem amb el formulari més bàsic i senzill que podríem uti-

litzar i llavors ja l’anirem complicant; en aquest apartat explicaré tots els con-

ceptes bàsics que cal conèixer per a crear unes estructures de formularis

elegants i accessibles amb l’HTML.

6.1. Pas u: El codi bàsic

Començarem amb un formulari de comentari molt i molt bàsic, el tipus de for-

mulari que utilitzaríeu en un lloc web per a permetre que la gent pugui donar

la seva opinió sobre alguna cosa com ara un article que hàgiu escrit, o per a

permetre que pugui enviar-vos un missatge sense saber la vostra adreça elec-

trònica. El codi és el següent:

<form>

Name: <input type=“text” name=“name” id=“name” value=““ />

Email: <input type=“text” name=“email” id=“email” value=““ />

Comments: <textarea name=“comments” id=“comments” cols=“25” rows=“3”></textarea>

<input type=“submit” value=“submit” />

</form>


Si introduïu aquest codi en un document HTML i llavors obriu aquest docu-

ment en un navegador, el que veureu és el que apareix a la figura 1.

Figura 1

El primer exemple de formulari bàsic.

Arxiu font: “step-1-form.html”http://dev.opera.com/articles/view/20-html-forms-the-basics/step-1-form.html

Proveu-ho; introduïu aquest codi en el vostre document HTML de mostra i carre-

gueu-lo en un navegador, o aneu a la pàgina del primer exemple de formulari bà-

sic* per a navegar fins al formulari en una altra pàgina. Intenteu jugar una mica

amb els diferents controls del formulari per a veure tot el que hi podeu fer.

Si llegiu el codi, hi veureu una etiqueta <form> d’obertura, una etiqueta </form>

de tancament i algunes altres coses entre aquestes dues. L’element conté dos

camps de text en els quals el lector de la pàgina pot introduir el seu nom i la

seva adreça electrònica, i una àrea de text que es pot omplir amb un comentari

per a trametre’l al propietari del lloc web.

Què hi tenim, doncs, aquí?

• <form></form>: Aquestes dues etiquetes són essencials per a iniciar i aca-

bar un formulari; sense aquestes no tindríem cap formulari web. Tots els

formularis han de començar i acabar amb les etiquetes <form> i </form>

respectivament.

L’etiqueta <form> pot tenir alguns atributs, que explicarem en el pas dos,

però d’entrada cal tenir ben clar que no es poden imbricar formularis din-

tre de formularis.

• <input> (si utilitzeu un doctype XHTML hauria de ser <input />):

Aquesta etiqueta defineix l’àrea en la qual podreu inserir informació. En el

nostre exemple anterior, les etiquetes input defineixen quadres de text en

els quals els visitants poden escriure el seu nom i l’adreça electrònica.

Totes les etiquetes d’entrada han de tenir un atribut type per a definir el tipus

d’informació que rebran. Els valors possibles per a l’atribut són text, button,

checkbox, file, hidden, image, password, radio, reset o submit.

Totes les etiquetes <input> (introducció de dades) també han de tenir un

nom (excepte en alguns casos especials en els quals l’atribut value —va-

lor— té sempre el mateix valor que l’atribut type —tipus—, com per exem-

ple type=“submit” o “reset”), que ha de triar el codificador. L’atribut

name (nom) informa sobre on s’envien les dades quan es tramet el formu-

lari (el destí pot ser una base de dades, o un missatge electrònic que s’envia

* http://dev.opera.com/articles/view/20-html-forms-the-basics/

step-1-form.html


a l’administrador del lloc a través d’un script del servidor) i sobre el nom

que té la informació del quadre d’introducció de dades. En trametre el for-

mulari, la majoria dels scripts utilitzen l’atribut name per col·locar les dades

del formulari en una base de dades o en un missatge electrònic que pot ser

llegit per una persona.

Per tant, si l’element <input> serveix perquè el visitant del lloc hi pugui

introduir el seu nom, llavors l’atribut name seria name=“nom”,

name=“name” o name=“first name”, etc. Si l’etiqueta <input> és per a

l’adreça electrònica, llavors l’atribut name seria name=“email”. Per a faci-

litar-vos les coses, i per a facilitar-les a la persona que utilitzarà el formulari,

es recomana que poseu un nom descriptiu a l’element <input>.

Per nom descriptiu s’entén un nom relacionat amb la seva funció, tal com

s’ha explicat abans. Si l’objectiu és obtenir una adreça electrònica, llavors

el nom hauria de ser name=“correu-electronic”. Si ha de ser l’adreça

postal de la persona que visita el lloc, llavors el nom hauria de ser

name=“street-address” o name=“adreça-postal”. Com més acurat

sigui l’ús d’aquests noms, no només ho tindreu més fàcil per codificar el

formulari i anar-ne realitzant el manteniment, sinó que la persona o la base

de dades que el rebi també ho tindrà més fàcil per entendre’l. Cal que de-

diqueu tot el temps necessari a pensar bé aquests noms.

• Totes les etiquetes <input> també han de tenir un atribut value. El seu valor

es pot deixar en blanc (value=““), amb la qual cosa indicareu a l’script de

processament que hi insereixi qualsevol cosa que el visitant del lloc escrigui

en aquest quadre. En el cas d’una casella de selecció (checkbox), un botó

d’opcions (radio), ocult (hidden), trametre (submit) o qualsevol altre atribut,

podeu definir el valor per tal que sigui igual al que voleu que sigui per defec-

te. En altres casos, com per exemple trametre o ocult, heu de definir el

valor per tal que sigui igual a l’entrada final. Exemples: value=“yes” per a

sí, value=“submit” per a un botó de tramesa, value=“reset” per a un

botó de reinicialització, value=“http://www.opera.com” per a un redi-

reccionament ocult, etc.

L’atribut value

Alguns exemples sobre l’ús de l’atribut value:

1) Un atribut de valor en blanc el valor del qual ve determinat per allò que hi introdueixil’usuari:

• El codi diu: <input type=“text” name=“first-name” id=“first-name”value=““ />

• L’usuari hi introdueix: Jenifer• El valor de first-name s’envia com a “Jenifer” en el moment de trametre el formulari.

2) Un valor predeterminat:

• El codi diu: <input type=“checkbox” name=“mailing-list” id=“mailing-list” value=“yes” />

• L’usuari selecciona la casella perquè es vol unir a la llista de correu del lloc web.


• El valor de mailing-list s’envia com a “yes” en el moment de trametre el formulari.

• Després dels dos elements <input> podeu veure una cosa una mica dife-

rent: l’element textarea.

textarea és un espai nou i millorat molt adequat per a introduir-hi text. No

és el mateix que l’antic quadre de text normal d’una única línia que ofereix el

nostre amic <input>; l’element textarea permet introduir múltiples línies i

fins i tot hi podeu definir quantes línies hi haurà disponibles per a introduir-

hi text. Fixeu-vos en els atributs cols i rows; aquests atributs són necessaris

per a tots els elements textarea i especifiquen les columnes i files que tindrà

l’àrea de text. Aquests valors es mesuren en caràcters.

• I per a acabar, però no per això menys important, hi ha un element <input>

especial amb l’atribut value=“submit”. En lloc de mostrar un quadre d’una

única línia per a introduir-hi text, la tramesa del text introduït mostrarà un

botó de tramesa que, en clicar-lo, tramet el formulari al destí que especifiqui

el formulari per a enviar-hi les dades (en aquest moment això encara no està

definit, i ara per ara la tramesa del formulari no farà res).

6.2. Pas dos: Afegir-hi estructura i comportament

Així, doncs, heu clicat l’enllaç del formulari #1 anterior, l’heu omplert i heu

clicat el botó Trametre; per què no ha passat res? I per què té tan mal aspecte

i apareix tot en una línia? La resposta és que encara no l’heu estructurat ni heu

definit cap lloc on trametre les dades que recull el formulari.

Tornem a la taula de dibuix per crear un formulari nou:

<form id=“contact-form” action=“script.php” method=“post”>

<input type=“hidden” name=“redirect” value=“http://www.opera.com” />

<ul>

<li>

<label for=“name”>Name:</label>

<input type=“text” name=“name” id=“name” value=““ />

</li>

<li>

<label for=“email”>Email:</label>

<input type=“text” name=“email” id=“email” value=““ />

</li>

<li>

<label for=“comments”>Comments:</label>

<textarea name=“comments” id=“comments” cols=“25” rows=“3”></textarea>

</li>


Quan l’obriu en un navegador, aquest formulari té l’aspecte que es pot veure

a la figura 2:

Figura 2

El segon exemple de formulari; el seu aspecte és millor, però encara no és perfecte.

Podeu jugar amb aquest formulari millorat a: “step-2-form.html”http://dev.opera.com/articles/view/20-html-forms-the-basics/step-2-form.html

Aquí he afegit algunes coses al formulari bàsic. Vegem-ho per a saber què és el

que he fet:

• Dintre de l’etiqueta <form> hi ha alguns atributs nous. Hi he afegit un atri-

but id no només per donar un nom semànticament descriptiu al formula-

ri, sinó també per oferir un ID únic per identificar-lo de manera que s’hi

puguin posar estils més fàcilment amb el CSS o es pugui manipular utilit-

zant JavaScript si és necessari. Només podeu tenir un id de cada per pàgi-

na; en aquest cas jo l’he anomenat contact-form (formulari de contacte).

• Llums, càmera, acció! Quan heu premut el botó de tramesa en el primer for-

mulari i no ha passat res, la raó era que no incloïa cap acció ni mètode. L’atri-

but method (mètode) especifica com s’envien les dades a l’script que les

processarà. Els dos mètodes més comuns són “GET” i “POST”. El mètode

“GET” enviarà les dades de la URL de la pàgina (sempre veureu URL de l’estil

http://www.example.com/page.php?data1=value1&data2=value2...; aquestes

són dades que es transporten amb el mètode “GET”). Si no és que teniu una

raó concreta per a utilitzar “GET”, probablement és millor no utilitzar-lo si in-

tenteu enviar informació segura, ja que tothom pot veure la informació men-

tre es transmet a través de la URL. “POST” envia les dades a través de l’script

que ofereix el formulari; aquestes dades es poden enviar a un missatge electrò-

nic que s’envia a l’administrador de lloc o bé a una base de dades que s’emma-

gatzemarà i a la qual es podrà accedir més endavant, i no a la URL del “GET”.

“POST*” és l’opció més segura i normalment la millor.

<li>

<input type=“submit” value=“submit” />

<input type=“reset” value=“reset” />

</li>

</ul>

</form>

* http://www.w3.org/2001/tag/doc/whenToUseGet.html


Si la seguretat de les dades del formulari és un aspecte que us preocupa especi-

alment, per exemple si trameteu un número de targeta de crèdit a un lloc de

compres, llavors hauríeu d’utilitzar el protocol https amb una capa de sòcols

segurs (SSL, secure socket layer). Bàsicament, això significa que les dades s’en-

viaran a través del protocol https i no del protocol http. La propera vegada que

pagueu alguna cosa en un lloc de compres o que utilitzeu la banca en línia,

observeu les URL; és molt probable que hi veieu https:// en lloc de http://. La

diferència és que una connexió https és una mica més lenta de transmetre que

una http, però les dades s’encripten de manera que cap pirata que hi furgui pu-

gui entendre res de les dades mentre estan en trànsit. Parleu amb l’hostatjador

del vostre web per a saber com us pot oferir una connexió https i una SSL.

• L’atribut action (acció) especifica el fitxer de script al qual s’han d’enviar les

dades del formulari per al seu processament. Molts hostatjadors de webs tenen

un script genèric d’enviament de correu electrònic o altres scripts de formula-

ris disponibles per al seu ús (consulteu aquesta informació a la documentació

del vostre hostatjador) que han adaptat per als seus servidors. Per altra banda,

podeu utilitzar un script de servidor que vosaltres mateixos o algú més hagi

creat per a oferir el vostre formulari. La majoria de les vegades es fan servir llen-

guatges com PHP, Perl o Ruby per crear un script que processarà el formulari;

per exemple, podeu enviar un missatge electrònic que contingui la informació

del formulari, o bé introduir la informació del formulari en una base de dades

que s’emmagatzemarà per al seu ús en el futur.

L’abast d’aquesta assignatura no ens permet explicar-vos la manera de redactar

un script de servidor ni ensenyar-vos a escriure un codi de servidor pel vostre

compte; us haureu de limitar a demanar al vostre hostatjador què és el que us

ofereix o a fer-vos amics d’un bon programador.

Aquí us donem uns quants recursos per a començar a introduir-vos en aquest

camp en cas que vulgueu investigar els scripts de servidor:

– Perl: http://www.perl.com/

– PHP: http://www.php.net

– Documentació PHP sobre formularis:


– Python: http://python.org/

– Ruby: http://www.ruby-lang.org

– Sendmail: http://www.sendmail.org/

– ASP.NET: http://www.asp.net/


• La segona línia que hem afegit al nostre formulari del pas dos és el camp

d’entrada “ocult”, que és un redireccionament. Què?

Amb l’objectiu de separar l’estructura de l’etiquetatge per una banda i la

presentació i el comportament per l’altra, el millor és utilitzar l’script que

oferirà el formulari també per redirigir l’usuari una vegada el formulari ja

s’hagi tramès. El que no voleu de cap de les maneres és que els usuaris es

trobin mirant la pàgina del formulari sense saber què han de fer una vegada

l’han tramès; estic ben segura que tots estareu d’acord que és molt millor

redirigir l’usuari a una pàgina d’agraïment que inclogui uns enllaços sobre

“què heu de fer a continuació” una vegada el formulari s’hagi tramès cor-

rectament. Aquesta línia en concret especifica que, després de trametre el

formulari, l’usuari passarà a la pàgina inicial d’Opera.

• Per a millorar l’aspecte del formulari, he posat tots els seus elements en una

llista no ordenada per així poder utilitzar l’etiquetatge per a alinear-los i lla-

vors utilitzar el CSS per a polir-ne l’aspecte.

Algú podria dir que no hauríem d’utilitzar una llista no ordenada per a eti-

quetar un formulari, sinó una llista de definicions. Altres podrien dir que

ni tan sols hauríem de fer servir una llista, sinó el CSS per a aplicar estils a

les etiquetes <label> i <input>. Jo no entraré en aquest debat i deixaré

que feu investigacions pel vostre compte sobre aquest tema i arribeu a una

conclusió pròpia sobre què és semànticament més correcte. Per al nostre

exercici tan senzill jo utilitzaré la llista no ordenada.

• I l’última cosa del pas dos, però no per això menys important, és que he

etiquetat els elements del formulari. Tant en termes de significat com d’ac-

cessibilitat del formulari en una gamma àmplia de dispositius habilitats per

a Internet, el millor és posar etiquetes a tots els elements del formulari;

comproveu el contingut dels elements label, ja que aquestes etiquetes es-

tan lligades als elements respectius del formulari mitjançant els elements

id dels elements input i textarea que tenen el mateix valor que els atri-

buts for de les etiquetes. Això és perfecte perquè no només aporta un in-

dicador visual sobre la finalitat de cadascun dels camps del formulari en

pantalla, sinó que també dóna més significat semàntic als camps del for-

mulari. Per exemple, una persona amb alguna deficiència visual que utilitzi

la pàgina amb un lector de pantalla podrà veure quina etiqueta correspon

a cadascun dels elements del formulari. Els id també es poden utilitzar per

a aplicar estils als camps individuals del formulari amb el CSS.

És molt probable que en aquest moment us estigueu preguntant per què, a

més a més dels atributs name, s’inclouen atributs id com a identificadors

en els elements del formulari. La resposta és que els elements input sense

atributs name no es trameten al servidor i, per tant, són absolutament ne-

cessaris. Els atributs id són necessaris per a associar els elements del formu-


lari amb els seus elements label corresponents. Per tant, els hauríeu de fer

servir tots dos.

El segon formulari té un aspecte una mica millor, però encara el podem seguir

millorant una mica més. Ja ha arribat el moment d’afegir-hi alguns altres de-

talls abans d’aplicar-hi estils.

6.3. Pas tres: Afegir-hi semàntica, estil i una mica més

d’estructura

Ara acabaré el que he començat al principi d’aquest apartat amb la versió de-

finitiva del meu formulari d’exemple:

1 <form id=“contact-form” action=“script.php” method=“post”>

2 <fieldset>

3 <legend>Contact Us:</legend>

4 <ul>

5 <li>

6 <label for=“name”>Name:</label>

7 <input type=“text” name=“name” id=“name” value=““ />

8 </li>

9 <li>

10 <label for=“email”>Email:</label>

11 <input type=“text” name=“email” id=“email” value=““ />

12 </li>

13 <li>

14 <label for=“comments”>Comments:</label>

15 <textarea name=“comments” id=“comments” cols=“25” rows=“3”></textarea>

16 </li>

17 <li>

18 <label for=“mailing-list”>Would you like to sign up for our mailing list?

</label>

19 <input type=“checkbox” checked=“checked” id=“mailing-list” value=“Yes,

sign me up!” />

20 </li>

21 <li>

22 <input type=“submit” value=“submit” />

23 <input type=“reset” value=“reset” />

24 </li>

25 </ul>

26 </fieldset>

27 </form>


Quan es mostra en un navegador, aquest formulari té l’aspecte que es pot veu-

re a la figura 3:

Figura 3

El formulari d’exemple definitiu en tota la seva esplendor.

Podeu veure la versió real d’aquest formulari en un navegador i jugar-hi a: “step-3-form”.http://dev.opera.com/articles/view/20-html-forms-the-basics/step-3-form

Els dos últims elements principals que he afegit a aquest formulari són

fieldset (conjunt de camps) i legend (llegenda). Cap d’aquests és obligato-

ri, però són molt útils per a formularis més complexos i per a la presentació.

L’element fieldset us permet organitzar el formulari en mòduls semàn-

tics. En un formulari més complex, podríeu per exemple utilitzar diferents

fieldset per a contenir informació de l’adreça, informació de facturació,

informació sobre les preferències del client... L’element legend permet do-

nar un nom a cadascuna de les seccions fieldset.

També he aplicat una mica de CSS a aquest formulari per a donar estil a l’eti-

quetatge estructural. Això s’aplica al tercer formulari d’exemple amb un full

d’estils extern; per veure els estils, aneu a la pàgina d’exemple*. Les dues coses

més importants que volia que fes el CSS bàsic eren afegir marges per a alinear

les etiquetes i els quadres d’introducció de dades, i eliminar els pics de la llista

desordenada. Aquest és el CSS que resideix al full d’estils extern:

Què fa aquest CSS? La primera línia defineix l’estil de la vora del conjunt de

camps per tal que no ocupi tota la pàgina; també podeu definir que no hi hagi

cap vora amb {border: none;} en cas que no en vulgueu. La segona línia

afegeix un marge de 10 píxels als elements li per posar una mica d’espai visual

* http://dev.opera.com/articles/view/20-html-forms-the-basics/

form.css

#contact-form fieldset {width:40%;}

#contact-form li {margin:10px; list-style: none;}

#contact-form input {margin-left:45px; text-align: left;}

#contact-form textarea {margin-left:10px; text-align: left;}


entre cadascun dels elements de la llista. Les línies tercera i quarta defineixen

un marge esquerre en els elements input i textarea per tal que no quedin a

la mateixa alçada que les etiquetes i s’alineïn adequadament. Si voleu més in-

formació sobre els estils d’un formulari, consulteu l’apartat sobre els estils dels

formularis d’aquest currículum d’estàndards web o bé l’article de Nick Rigby a

A List Apart, “Prettier Accessible Forms”*. També podreu trobar més informació

sobre els marges i les vores més endavant en aquesta assignatura.

Resum

En aquest apartat he explicat els tres passos més bàsics per a crear un formulari

conforme amb els estàndards del web. El món dels formularis inclou moltes

més coses que no he explicat aquí i que, en cas que vulgueu, haureu d’explorar

pel vostre compte. Hi ha les tecles d’accés, les caselles de selecció i els botons

d’opció, els botons de tramesa i reinicialització personalitzats i els quadres de

selecció.

En el formulari anterior del pas tres he afegit una casella de selecció (checkbox)

per tal de mostrar que es poden fer servir els atributs addicionals de l’element in-

put per a recollir informació que queda més enllà de la introducció de text en una

única línia o de la introducció de text en una àrea de múltiples línies. Els valors

dels atributs de botó checkbox i radio es poden fer servir per a afegir-hi la pos-

sibilitat de fer preguntes curtes i donar al lector una llista d’opcions entre les quals

podrà escollir (les caselles de selecció permeten seleccionar diverses opcions, men-

tre que els botons d’opció només en permeten seleccionar una). Els botons d’op-

ció poden ser molt útils en un formulari d’enquesta.

L’element select, que tampoc s’ha tractat en aquest apartat, es pot utilitzar

per a un menú desplegable amb opcions (per exemple, una llista de països o

d’estats/províncies).

Preguntes de repàs

Ja és hora que escriviu el codi del vostre formulari de contacte.

1. Creeu un formulari de contacte senzill que demani a l’usuari el seu nom,

l’adreça electrònica i un comentari.

2. Afegiu-hi una casella de selecció que demani al lector si es vol unir a la vos-

tra llista de correu.

3. Utilitzeu el CSS per a aplicar estils al formulari: definiu una amplada per

al formulari, alineeu les etiquetes a l’esquerra, poseu un color de fons a la

pàgina, etc.

* http://alistapart.com/articles/prettyaccessibleforms


• Deures voluntaris: Com més jugueu amb els elements del formulari i amb

diferents CSS, més bé veureu tot el que podeu fer amb un formulari de con-

tacte molt senzill.

• Deures encara més voluntaris: Si voleu endinsar-vos encara més en

aquest tema, busqueu un script o utilitzeu-ne un que us ofereixi el vostre

hostatjador web per a enviar-vos el formulari a vosaltres mateixos. Si

l’script per crear el formulari es complica excessivament, també podeu pro-

var de subornar algun bon programador...


Cameron Adams, “Accessible, stylish form layout”.

http://www.themaninblue.com/writing/perspective/2004/03/24/

Brian Crescimanno, “Sensible Forms: A Form Usability Checklist”.

http://www.alistapart.com/articles/sensibleforms/

Simon Willison, “Easier form validation with PHP”.

http://simonwillison.net/2003/Jun/17/theHolyGrail/

Les especificacions. No qualsevol especificació antiga, sinó L’ESPECIFICACIÓ

W3C.


Si mai patiu d’insomni i un vas de llet calenta o comptar xais no us solucionen el

problema, llegiu les especificacions completes de l’HTML 4.01 o l’XHTML 1.0 a

w3.org. És molt més barat i més efectiu que qualsevol altre remei. Que [inseriu

aquí el nom de la deïtat] beneeixi els enginyers de tot el món.

Els amables integrants de W3.org han definit les diferències entre “GET” i

“POST” i quan s’han d’utilitzar:


I tot l’agraïment del món per al Sr. Rigby:

http://alistapart.com/articles/prettyaccessibleforms


7. Elements semàntics menys conegutsMark Norman Francis

En aquest apartat presentaré alguns dels elements semàntics de l’HTML

més obscurs i menys coneguts i utilitzats. Parlaré de l’etiquetatge del codi

de programació, la interacció amb ordinadors, les cites i les abreviatures, la

visualització dels canvis realitzats en els documents i més. Acabaré comen-

tant algunes de les propostes d’elements semàntics nous que s’han fet en

l’esborrany d’HTML 5.

7.1. Destacar la informació de contacte

L’element address és probablement el que té el nom més equivocat i el més

mal entès de l’HTML. A primera vista, amb un nom com “address” (adreça)

semblaria que es fa servir per a encapsular adreces, ja siguin electròniques o

postals, o coses similars. Això només és així en part.

Per exemple:

Arxiu font: “Simple address example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#address1

A l’exemple següent, l’adreça es troba en el paràgraf del peu de pàgina i és

un enllaç cap a una altra pàgina del lloc web. La informació de contacte

ampliada de la pàgina a la qual apunta aquest enllaç pot contenir moltes

més dades, i d’aquesta manera no cal repetir-la una i altra vegada en el lloc

web.

Nota

Després de cada exemple de codi hi ha un enllaç “Arxiu font:” que, en clicar-lo, us por-tarà a la visualització del resul-tat d’aquest codi font en un arxiu diferent; d’aquesta ma-nera podreu veure exemples reals de com apareix realment aquest codi font en el navega-dor, a banda del codi en si.

El significat real d’address és oferir informació de contacte de l’au-

tor o els autors de la pàgina, o de la secció principal de la pàgina, en

què apareix. Aquesta informació pot ser un nom, una adreça electrò-

nica, una adreça postal o un enllaç a una altra pàgina amb més in-

formació de contacte.

<address>

<span>Mark Norman Francis</span>,

<span class=“tel”>1-800-555-4865</span>

</address>


Arxiu font: “Advanced address example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#address2

(Evidentment, si el lloc web tingués més d’un autor es podria fer servir aquest

mateix patró i definir enllaços cap a pàgines de contacte diferents per als dife-

rents autors.)

El que és incorrecte és utilitzar l’element address per a indicar qualsevol altre

tipus d’adreces, com ara el que podeu veure a la pàgina web d’exemple incor-

recte.

Arxiu font: “Incorrect address example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#address3

(Evidentment, si Opera assumís la responsabilitat col·lectiva per l’article,

aquest codi seria correcte encara que jo, i no tot el personal d’Opera, fos l’autor

real d’aquesta pàgina en concret).

Per a qualsevol adreça general, podeu utilitzar el que es coneix com a “micro-

format” per a indicar que un paràgraf conté una adreça. Trobareu més infor-

mació sobre els microformats en altres articles de la pàgina web d’Opera*.

7.2. Llenguatges i codi de programació

<p class=“footer”>© Copyright 2008</p>

<address>

<a href=“/contact/”>Mark Norman Francis</a>

</address>

<p> Our company address: </p>

<address>

Opera Software ASA,

Waldemar Thranes gate 98,

NO-0175 OSLO,

NORWAY

</address>

* http://dev.opera.com/articles/html/

L’element code s’utilitza per a indicar el codi informàtic o els llenguatges

de programació, com per exemple PHP, JavaScript, CSS, XML i altres. En el

cas de mostres curtes dintre d’una frase, simplement heu d’envoltar l’ele-

ment amb l’element code, com ara:


Arxiu font: “First code example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#code1

aEn cas de mostres de codi més grans que poden ocupar múltiples línies podeu

utilitzar un bloc preformatat, tal com s’explica a l’apartat Etiquetatge del con-

tingut de text a HTML.

Tot i que no hi ha cap mètode definit per a indicar el llenguatge de programació

o el codi informàtic dintre de l’element code, podeu utilitzar l’atribut class.

Una pràctica molt habitual (que es menciona en l’esborrany d’HTML 5) és utilit-

zar el prefix language- (llenguatge) i llavors afegir-hi el nom del llenguatge.

Així, doncs, l’exemple anterior es convertiria en:

Arxiu font: “Second code example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#code2

Alguns llenguatges de programació tenen noms que no es poden representar

fàcilment en classes, com per exemple C#. La manera correcta d’escriure

aquest nom seria class=‘language-c\#’, que pot resultar confusa i es pot

escriure malament amb molta facilitat. Jo aconsellaria utilitzar una classe con-

sistent només amb lletres i guions i lletrejar-la completament. Així, doncs, en

aquest cas es podria utilitzar class=‘language-csharp’.

7.3. Mostrar la interacció amb ordinadors

Per exemple:

<p>It is bad form to use event handlers like

<code>onclick</code> directly in the HTML.</p>


<p>It is bad form to use event handlers like

<code class=“language-javascript”>onclick</code>

directly in the HTML.</p>

Els dos elements samp i kbd es poden utilitzar per a indicar l’entrada i

la sortida de la interacció amb un programa informàtic.

<p>One common method of determining if a computer is connected

to the internet is to use the computer program <code>ping</code>

to see if a computer likely to be running is reachable.</p>

<pre><samp class=“prompt”>kittaghy%</samp> <kbd>ping -o google.com</kbd>

<samp>PING google.com (64.233.187.99): 56 data bytes

64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms


Arxiu font: “Computer interaction example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#computer

L’element samp indica un exemple de la sortida d’un programa informàtic. Tal

com es pot veure en aquest exemple, amb l’atribut class es poden indicar dife-

rents tipus de sortides. No obstant això, però, no hi ha cap convenció que s’hagi

adoptat d’una manera general sobre el tipus de classes que s’han d’utilitzar.

L’element kbd indica l’entrada per part de l’usuari que interactua amb l’ordina-

dor. Tot i que tradicionalment aquestes entrades es fan des del teclat (i per això es

fa servir la contracció “kbd”, de l’anglès “keyboard” –teclat–), també s’ha d’utilit-

zar per indicar altres tipus d’entrades, com per exemple per veu.

7.4. Variables

Per exemple:

Arxiu font: “Variables example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#variables

7.5. Cites

--- google.com ping statistics ---

1 packets transmitted, 1 packets received, 0% packet loss

round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms

</samp></pre>

L’element var s’utilitza per a indicar variables en el contingut textual.

Això pot incloure expressions matemàtiques algebraiques o dintre del

codi de programació.

<p>The value of <var>x</var> in

3<var>x</var>+2=14 is 4.</p>

<pre><code class=“language-perl”>

my <var>$welcome</var> = “Hello world!”;

</code></pre>

L’element cite (cita) s’utilitza per a indicar d’on procedeix el contin-

gut proper; quan se cita una persona, un llibre o una altra publicació, o

es remet el visitant de manera general a una altra font, aquesta font

hauria de trobar-se dintre d’un element cite.


Per exemple:

Arxiu font: “Citations example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#citations

7.6. Abreviatures

El text de l’abreviatura es troba dintre de l’element abbr i la versió completa

se situa dintre de l’atribut title, és a dir:

Arxiu font: “Abbreviations example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#abbreviations

Un acrònim és un tipus d’abreviatura, amb la diferència que el resultat és acceptat

com si fos una paraula i es llegeix com a tal. Un exemple podria ser radar, que és

una paraula formada a partir de la frase RAdio Detecting And Ranging ‘detecció i me-

sura de la distància per ràdio’. Tot i que l’especificació HTML 4.01 accepta els ele-

ments abbr i acronym, la veritat és que no sempre queda perfectament clar quin

és el que cal utilitzar…

Internet Explorer (abans de la versió 7, i la 7 no posa el subratllat de punts sota les

abreviatures igual que fan altres navegadors) no reconeix l’element abbr, però sí

acronym. Desafortunadament, els acrònims són un subgrup d’abreviatures i és in-

correcte etiquetar alguna cosa com ara “HTML” amb l’element acronym.

Per altra banda, a l’esborrany de l’HTML 5, l’element acronym ha desaparegut

i es proposa estandarditzar abbr per a ambdós casos, ja que qualsevol acrònim

no deixa de ser una abreviatura vàlida.

<p>The saying <q>Everything should be made as simple as possible, but not

simpler</q> is often attributed to <cite>Albert Einstein</cite>, but it is

actually a paraphrasing of a quote which is much less easy to understand.</p>

Els elements abbr i acronym s’utilitzen per a indicar on hi ha abrevia-

tures i ofereixen un mètode per a desenvolupar-les sense interrompre

innecessàriament el flux del document.

<p>Styling is added to <abbr title=“Hypertext Markup

Language”>HTML</abbr> documents using <abbr

title=“Cascading Style Sheets”>CSS</abbr>.</p>


aEl millor que es pot fer és evitar utilitzar acronym i fer servir sempre abbr en

tot el codi. Si heu d’aplicar algun estil visual a abbr, podeu posar un span en

el seu interior i aplicar-lo a aquest en lloc d’aplicar-lo a abbr, amb la qual cosa

tots els navegadors aplicaran aquests estils visuals.

7.7. Instàncies definidores

La diferència és que el terme utilitzat a dfn no ha de formar part d’una llista

de termes i definicions i que es pot utilitzar com a part del flux de text normal,

fins i tot en un estil de prosa conversacional. Vegem, doncs, un exemple de

l’ús de dfn:

Hi apareix el terme HTML seguit immediatament de la seva definició, amb la

qual cosa és el lloc ideal per a utilitzar-hi l’element dfn. L’hauríeu d’utilitzar

només una vegada en una pàgina, en el punt en el qual es defineix el terme

per primera vegada; de totes maneres, els termes s’han de definir només una

vegada en una pàgina, per la qual cosa no és gaire problemàtic.

Tot això està molt bé, però un exemple aïllat no és massa pràctic; l’ús de dfn es

recomana quan una abreviatura es fa servir més d’una vegada en una pàgina. Per

exemple, en el mòdul “Fonaments de l’HTML” d’aquesta assignatura, l’abreviatu-

ra HTML apareixia més de quaranta vegades. Utilitzar el codi <abbr title=“Hy-

perText Markup Language”>HTML</abbr> totes i cadascuna de les vegades

que es fa servir aquesta abreviatura seria un malbaratament d’amplada de banda,

seria visualment molt molest i per als usuaris de lectors de pantalles seria proba-

blement molt pesat i avorrit, ja que HTML s’explicaria una vegada i una altra tot

i que ja s’hauria explicat què significa. En lloc d’això, el que es podria fer és inserir

el codi en el punt en el qual es defineix per primera vegada per als lectors:

Arxiu font: “First defining instances example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#dfn1

Donarem més detalls sobre els estils de text en l’apartat 3 del mòdul “Conceptes bàsics de CSS”.

Hi ha una mica de confusió sobre l’ús adequat de dfn, que es descriu en

l’especificació HTML com “la instància definidora del terme inclòs”.

Aquest concepte és molt semblant a la idea de l’element dt (terme de

definició) utilitzat en les llistes de definicions.

<p><dfn>HTML</dfn>: HTML significa “HyperText Markup

Language”. Es el llenguatge que es fa servir per

descriure el contingut de documents web.</p>

<p><dfn><abbr>HTML</abbr></dfn> (“HyperText Markup Language”) is

a language to describe the contents of web documents.</p>


Aleshores, cada vegada que es faci servir HTML es pot etiquetar simplement

com a <abbr>HTML</abbr>. Llavors, un agent d’usuari podria posar a dispo-

sició de l’usuari algun mètode per a recuperar la instància definidora de l’abre-

viatura. Desafortunadament, ara per ara no hi ha cap agent d’usuari que ho

faci, ni tan sols els lectors de pantalla. Per tant, seria millor utilitzar també

l’atribut title per a oferir aquesta informació:

Arxiu font: “Second defining instances example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#dfn2

Ara, però, hem doblat el terme ampliat per a HTML, la qual cosa pot ser un

problema per als usuaris de lectors de pantalla. No obstant això, el fet de dei-

xar l’ampliació visible fa que el document sigui menys útil per als usuaris vi-

dents, que en pràcticament tots els casos seran la majoria.

Jo crec que aquest es un compromís acceptable quan només hi ha una o dues

abreviatures que necessiten una definició (en pàgines que exigeixen un nom-

bre més gran de definicions, potser seria millor crear una secció de glossari o

una pàgina en la qual es pugui utilitzar l’etiquetatge més rigorós de les llistes

de definicions). Si això és un tema que us afecta, el codi podria ser:

Arxiu font: “Third defining instances example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#dfn3

No obstant això, l’agent d’usuari hauria de tenir algun mètode per a connectar

la definició amb totes les aparicions del terme definit. Actualment no hi ha

cap navegador que faci res útil amb dfn, tot i que segueix essent un lligam útil

per a aplicar estils amb el CSS. La solució proposada anteriorment és actual-

ment la millor que tenim.

Aquest és un cas molt desgraciat d’una especificació que s’ha creat sense

unes directrius clares sobre com s’ha d’utilitzar un element; probablement

no es va basar en cap ús d’aquest element en el món real, ja que en cas con-

trari hi hauria algun mètode per combinar el terme amb la seva descripció

o definició completa. L’especificació HTML 5 entra en molts més detalls so-

bre l’ús de dfn*, però segueix essent només un esborrany i encara no es pot

utilitzar en el web.

<p><dfn><abbr title=“HyperText Markup Language”>HTML</

abbr></dfn> (“HyperText Markup Language”) is a language

to describe the contents of web documents.</p>

<p><abbr title=“HyperText Markup Language”>HTML</abbr>

(<dfn>HyperText Markup Language</dfn>) is a language to

describe the contents of web documents.</p>

* http://www.w3.org/html/wg/html5/#the-dfn


7.8. Superíndex i subíndex

Alguns llenguatges necessiten aquests elements per a l’ús correcte de les abre-

viatures i es poden fer servir per a etiquetar contingut matemàtic de poca en-

vergadura, ja que així s’evita recórrer a MathML (un llenguatge de marques

matemàtic específic però bastant complicat creat amb l’únic objectiu d’etique-

tar fórmules matemàtiques complicades).

Un exemple dels dos tipus:

Arxiu font: “Superscript and subscript example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#supsub

7.9. Salts de línia

Tenint en compte la manera en què l’HTML defineix l’espai en blanc, no és

possible controlar el lloc on saltaran les línies de text (per exemple, etiquetar

una adreça postal com un paràgraf però voler que tingui un aspecte visual en

el qual cada part de l’adreça aparegui en una línia independent) simplement

prement la tecla de retorn mentre es va escrivint el text.

Algunes vegades pot ser més fàcil utilitzar un bloc de text preformatat en lloc

d’inserir-hi elements br. O bé, si voleu que una part concreta d’un text apare-

gui en una línia independent, tot i que això és purament una qüestió d’estil,

Per a etiquetar una part d’un text com a superíndex o subíndex (lleuge-

rament per sobre o per sota de la resta del text) cal utilitzar els elements

sup i sub.

<p>The chemical formula for water is H<sub>2</sub>O, and it is also known as

hydrogen hydroxide.</p>

<p>The famous formula for mass-energy equivalence as derived by Albert Einstein

is E=mc<sup>2</sup> — energy is equal to the mass multiplied by the speed of light

squared.</p>

Amb l’element br és possible introduir un salt de línia en el docu-

ment. No obstant això, només s’hauria d’utilitzar per a forçar salts

de línia en els llocs on siguin estrictament necessaris, i mai per a apli-

car més espaiat vertical entre paràgrafs o similars en un document;

això s’hauria de fer amb el CSS.


podeu posar aquesta part en un element span i definir-la per tal que es mostri

com un element de bloc.

Així, per exemple, podeu escriure l’adreça de contacte d’Opera que hem vist

abans en aquest apartat quan parlàvem sobre l’element address de la següent

manera:

Arxiu font: “Line breaks example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#breaks

Evidentment, si escriviu en XHTML en lloc d’HTML, l’element hauria de ser

autotancat, com el següent: <br />.

7.10. Línies horitzontals

Alguns diuen que aquest és un efecte inherentment no semàntic i pura-

ment visual i de presentació, però de fet hi ha precedents en la literatura

que justifiquen l’existència d’un element així. En un capítol (que es podria

descriure com una secció d’un llibre) a vegades apareix una línia horitzon-

tal entre escenes que tenen lloc en temps i/o llocs diferents. En la poesia

també s’utilitzen algunes separacions decoratives per delimitar les diferents

estrofes del poema.

Cap d’aquests usos justificaria l’existència d’un element d’encapçalament

nou, que és la manera acceptada de marcar els límits entre seccions d’un do-

cument.

L’element hr no té cap atribut i el seu estil s’haurà de definir amb el CSS en

cas que l’aspecte per defecte no sigui satisfactori.

També, igual que en el salt de línia, si escriviu en XHTML i no en HTML caldrà

que utilitzeu la forma autotancada : <hr />.

<p>Our company address: </p>

<address>

Opera Software ASA,<br>Waldemar Thranes gate 98,<br>

NO-0175 OSLO,<br>NORWAY

</address>

Les línies horitzontals es creen en l’HTML amb l’element hr. Aquest ele-

ment insereix una línia en el document que representa un límit entre

seccions diferents.


7.11. Canvis en els documents (inserir i suprimir)

Si s’han introduït canvis en un document des de la primera vegada que va estar

disponible, podeu marcar aquests canvis per tal que les persones que el tornin a

llegir o els processos automatitzats puguin saber què s’hi ha canviat i quan.

Aquests dos elements poden tenir dos atributs que aporten més significat a les

edicions.

Si la raó del canvi s’explica a la pàgina o en algun altre lloc del web, hauríeu

de crear un enllaç cap aquest document o fragment de l’atribut de cita. El que

estem dient en realitat és que “Aquest canvi s’ha fet per la raó següent”.

També podeu indicar l’hora que es va fer el canvi amb l’atribut datetime. El

valor hauria de ser una marca horària conforme a l’estàndard ISO, que normal-

ment té la forma “AAAA-MM-DD HH:MM:SS ±HH:MM” (en trobareu més in-

formació a la Wikipedia*).

Un exemple que utilitza els dos atributs:

Arxiu font: “Inserting and deleting example”http://dev.opera.com/articles/view/21-lesser-known-semantic-elements/lesserknownsemantics.html#insdelexample

7.12. Alguns elements HTML futurs

Tal com ja s’ha comentat diverses vegades en aquest i en altres apartats, la ver-

sió 5 d’HTML* encara s’està redactant. Aquesta versió serà l’actualització més

radical d’HTML des de la seva aparició. Estudiant els patrons d’ús real de

El text nou (insercions) s’ha de posar dintre de l’element ins. El text

que s’ha eliminat (supressions) s’ha de posar dintre de l’element del. Si

en un punt concret del document s’ha fet una supressió i una inserció,

la manera correcta de procedir és posar primer el text suprimit i llavors

el text inserit.

* http://en.wikipedia.org/wiki/ISO_8601

<p>We should only solve problems that actually arise. As

<cite><del datetime=“2008-03-25 18:26:55 Z”

cite=“/changes.html#revision-4”>Donald Knuth</del><ins

datetime=“2008-03-25 18:26:55 Z”

cite=“/changes.html#revision-4”>C. A. R. Hoare</ins></cite>

said: <q>premature optimization is the root of all

evil</q>.</p>

* http://www.w3.org/html/wg/html5/


l’HTML a Internet en lloc de limitar-se a pensar en què podria ser útil, és més

que probable que la semàntica dels documents, que actualment és poc més

que una convenció, s’insereixi directament a l’especificació.

Alguns elements d’exemple que probablement s’introduiran en l’HTML i que

podrien representar una millora significativa en la manera de codificar i utilit-

zar els documents inclouen:

• header: conté l’encapçalament (masthead) de la pàgina; normalment con-

sisteix en un logotip i un títol, potser una petita secció “Sobre” i alguna na-

vegació global del lloc, com per exemple enllaços per a iniciar sessió/sortir/

perfil.

• footer: conté el peu de pàgina, que normalment inclou altres enllaços

dintre del lloc, el copyright i altra informació legal.

• nav: conté els enllaços de navegació principals d’una pàgina.

• article: conté la part d’una pàgina que és l’àrea de contingut principal i

exclou tots els altres elements de la pàgina com per exemple la navegació,

l’encapçalament i el peu de pàgina.

• aside: conté la informació de la barra lateral d’una àrea concreta de la pà-

gina; també es pot utilitzar per a destacats o notes dintre del contingut

principal.

N’hi ha més, que podeu trobar a l’especificació HTML 5*.

Resum

En aquest apartat he explicat alguns dels elements semàntics de l’HTML

menys coneguts i que menys s’utilitzen. En l’apartat següent seguirem exami-

nant l’ús correcte de dos elements semàntics d’HTML semànticament neutres:

div i span.

* http://www.whatwg.org/specs/web-apps/current-work/


8. Contenidors genèrics: els elements div i spanMark Norman Francis

En aquest apartat explicaré com i quan utilitzar els dos elements de l’HTML que

no s’utilitzen per a descriure el contingut. Els elements span i div no conferei-

xen en realitat cap significat al contingut que envolten; de fet són un mecanisme

genèric que permet crear una estructura i uns agrupaments personalitzats d’ele-

ments en els llocs on no hi ha cap altre element de l’HTML que resulti realment

adequat, als quals llavors es poden aplicar estils amb CSS o manipular amb JavaS-

cript. Tot i que els elements div no afegeixen cap significat semàntic, es pot con-

siderar que aquests representen una divisió estructural de l’etiquetatge juntament

amb la classe semàntica o el nom d’ID adequats.

Són “l’últim recurs” i només s’han d’utilitzar quan no hi ha cap altre element

de l’HTML que compleixi els requisits necessaris, ja que no tenen cap significat

per a les tecnologies d’assistència, els motors de cerca, etc.

8.1. Semànticament neutres

La majoria dels elements d’HTML existeixen per a descriure el contingut, com

per exemple les imatges, les llistes o els títols, o per a ajudar a compondre el

document, com per exemple head, body, link, meta, etc. Hi ha dos elements,

però, que no tenen cap significat assignat.

De l’especificació de l’HTML:

Els elements div i span, juntament amb els atributs id i class, ofereixen un mecanis-me genèric per a afegir estructura als documents.

Aquests dos elements es poden considerar com la bastida d’HTML. Donen la

possibilitat d’agrupar el contingut i d’afegir informació addicional relativa al

contingut i lligams per a incorporar-hi estils i interactivitat. Però no afegeixen

cap significat semàntic nou al document, ni en si mateixos ni d’ells mateixos.

8.2. En línia i de bloc

aTal com ja heu après, els elements de bloc són elements que ajuden a in-

formar sobre l’estructura d’un document. L’element div, que és l’abrevia-

tura de divisió, és el contenidor genèric dels blocs. Normalment es fa servir

per envoltar altres elements de bloc amb l’objectiu d’agrupar-los. També es

pot utilitzar per a reunir una colla d’elements inserits i/o text que no en-

caixen de manera lògica sota cap altre element de bloc, però això hauria de

ser l’últim recurs.

Vegeu el subapartat següent, on trobareu una explicació més detallada sobre l’agrupament del contingut.


En un primer moment, la línia de separació entre aquests dos tipus diferents

podria semblar arbitrària. La diferència que cal tenir en compte és el tipus de

contingut i la manera en què hauria d’aparèixer en escriure’l sense cap estil.

Un element div es posa al voltant d’un grup d’elements de bloc; per exem-

ple, per envoltar un títol i una llista d’enllaços per a crear un menú de nave-

gació. Un element span envolta un grup d’elements en línia o bé (la majoria

de les vegades) text net. La paraula clau és “grup”; si un element div envolta

només un element de bloc, o un element span només un element en línia,

llavors el seu ús és innecessari.

Per exemple, observeu l’ús que es fa dels elements div i span en el següent

etiquetatge, que és molt simple:

Ara podeu seleccionar el contingut de l’interior dels elements div i span uti-

litzant els seus atributs id i aplicar-los estils i posicionaments especials amb el

CSS.

8.3. Més explicacions sobre l’agrupament del contingut

Si observem el codi font de moltes pàgines d’Internet hi veurem molts ele-

ments div imbricats que inclouen algunes metàfores habituals a class i/o id

dels elements; per exemple, header, footer, content, sidebar, etc.

Els vostres noms de class i id han de ser sempre semàntics, la qual cosa vol

dir que haurien de remetre al significat/paper del contingut i no limitar-se a

fer referència al seu aspecte visual. Així, doncs, per exemple, barraLateral i

L’element span és el contenidor genèric per als elements en línia. També

ajuda a informar sobre l’estructura del document, però s’utilitza per a agru-

par o envoltar altres elements inserits i/o text més que elements de bloc.

1 <body>

2 <div id=“mainContent”>

3 <h1>Títol de la pàgina</h1>

4 <p>Aquest és el primer paràgraf de contingut de la meva pàgina d’exemple.</p>

5 <img src=“example.gif” alt=“Aquesta imatge és només un exemple, no té res

d’especial”>

6 <p>Aquest és el segon paràgraf de contingut de la meva pàgina d’exemple. És molt

semblant al primer, però aquí hi ha una <span id=“specialAlert”>alerta especial

que volem colorejar i augmentar-li la mida del text mitjançant CSS</span>.

No es tracta d’un èmfasi estàndard, sinó més aviat un estil, de manera que <em>

i <strong> no són del tot adients.</p>

7 </div>

8 </body>


missatgeAlerta són uns bons noms per a class, mentre que columnaEs-

querraVermella i textBlauIntermitent no. Què passaria si després vol-

guéssiu canviar el color de la barra lateral de vermell a blau, o la seva posició

en el lloc web de l’esquerra a la dreta? I si volguéssiu canviar els vostres mis-

satges d’alerta de blaus intermitents a verd sense intermitència?

Aquestes divisions aporten predictibilitat a l’hora de crear estructures de pàgi-

na i, segurament molt més important, quan es torna a revisar l’HTML més en-

davant ofereixen pistes sobre la part de la pàgina en la qual us trobeu. Una

pàgina ben dividida es documenta pràcticament a si mateixa pel que fa a les

seves intencions i al seu contingut.

Amb la bona intenció de deixar-ho tot una mica més clar, ara veurem una estruc-

tura de div d’un lloc web real, concretament la pàgina d’inici de dev.opera.com.

Tingueu en compte que aquest exemple de codi no inclou cap contingut, si dei-

xem de banda alguns altres elements que hi he posat perquè són importants per

a l’estructura del lloc. Bàsicament el que vull és únicament reproduir l’estructura

real del lloc tal com està definida amb els elements div. En el codi següent, llegiu

amb atenció els comentaris HTML; els hi he posat per a explicar l’estructura del

lloc. Mentre aneu revisant aquest codi, obriu la pàgina principal de dev.ope-

ra.com en una nova pestanya o finestra del navegador per tal de poder veure l’as-

pecte del lloc mentre exploreu la seva estructura.

1 <body>

2 

3 <div id=“wrap”>

4 

5 <ul id=“sitenav” class=“hidemobile”>

...

6 </ul>

...

7 

8 <form action=“/search/” method=“get” id=“search”>

9 <div>

...

10 </div>

11 </form>

12 


13 <ul id=“menu”>

...

14 </ul>

15 

16 <div id=“loginbox”>

17 <div id=“login”>

...

18 </div>

19 </div>

20 

21 <div id=“content2”>

22 <div id=“main”>

...

23 <div class=“major”>

...

24 </div>

25 <div class=“major”>

...

26 </div>

...

27 </div>

28 </div>

29 

30 <div id=“side”>

...

31 </div>

32 

33 <div id=“footer”>

...

34 </div>

35 

36 </div>

37 </body>


8.4. Informació addicional

Part del contingut té informació addicional, que és d’utilitat per als agents

d’usuari i per a altres analitzadors, i aquesta s’ha de comunicar a través d’un

atribut. Els elements span són sovint una bona manera d’adjuntar aquesta

informació al contingut d’una pàgina web, tal com veureu a continuació.

Un bon exemple és un idioma diferent que apareix en un document. Per

exemple:

Tot i que l’idioma del document principal és l’anglès, la cita és en francès. Això

s’indicaria mitjançant l’ús de l’atribut lang, de la següent manera:

En aquest exemple era molt fàcil indicar aquest canvi d’idioma, ja que aparei-

xia només en una cita, amb la qual cosa l’element q era perfecte per a envol-

tar el contingut. Hi ha alguns casos, però, en què no hi ha cap element

semàntic adequat fàcilment disponible, amb la qual cosa hauríeu de recórrer

a span o div. Per exemple:

En aquest exemple, la primera aparició de la paraula chat, que és una paraula

en francès en un document en anglès, hauria de tenir aquesta diferència indi-

cada per tal que no es pogués interpretar com la paraula anglesa chat. En

aquest cas, la manera correcta de fer-ho és amb un element span al voltant

de la paraula chat, ja que no hi ha cap altre element HTML adequat per a en-

voltar la paraula francesa (no volem afegir cap èmfasi a la paraula, no és un

cita, no és un codi, etc.). Com que és una única paraula dintre d’una frase, es-

tarem treballant amb un element inserit. Per tant, aquest exemple s’hauria

d’escriure de la manera següent:

<p><q>Plus ça change, plus c’est la même chose</q> she said.</p>

<p><q lang=‘fr’>Plus ça change, plus c’est la même chose</q> she said.</p>

<p>A screen reader will read the French word chat (cat) as chat (to talk

informally) unless it is properly marked up.</p>

<p> A screen reader will read the French word <span lang=‘fr’>chat</span> (cat)

as chat (to talk informally) unless it is properly marked up.</p>


Aquesta és la mateixa tècnica que la utilitzada en els microformats* per etique-

tar formats de dades comuns en pàgines web. Podeu trobar molta més infor-

mació sobre els microformats en alguns del apartats més avançats sobre

l’HTML a dev.opera.com**.

8.5. Lligams per a JavaScript, i també CSS

Abans ja he parlat de com es poden utilitzar div i span juntament amb els

atributs id i class per oferir lligams amb els quals aplicar estils CSS i el posi-

cionament a certes parts del vostre contingut. El mateix també es pot fer per

a aplicar JavaScript al vostre document.

Si el JavaScript ha de trobar i manipular un element concret, el més habitual

és aplicar-li un id i llavors utilitzar la funció getElementById per a trobar-

lo. A l’última part d’aquesta assignatura aprendreu moltes més coses sobre el

JavaScript.

8.6. “div-itis”

Una de les coses que cal tenir en compte és un efecte que, entre la comunitat

de desenvolupadors de webs, es coneix normalment com a “div-itis”.

És molt fàcil afegir estils mitjançant molts elements div o span imbricats,

però és una temptació en la qual hauríem d’evitar caure sempre que fos possi-

ble. En la majoria dels casos es poden afegir estils o funcions JavaScript als ele-

ments ja existents del document. L’ús d’un contenidor genèric hauria de ser

l’últim recurs; és millor intentar escriure pàgines web començant només amb

els elements semàntics i afegir-hi contenidors només quan sigui necessari.

8.7. Semàntica inadequada

En aquesta secció exploro algunes de les errades més habituals que cal tenir en

compte a l’hora d’etiquetar el contingut amb HTML i que cal evitar sempre

que sigui possible.

8.7.1. “Paràgrafs” genèrics

Algunes vegades és molt temptador utilitzar un element p (paràgraf) al vol-

tant de qualsevol bloc de text, però això no és massa correcte.

Tal com ja he explicat en el meu apartat anterior sobre l’etiquetatge del contingut:

“Si són només unes quantes paraules i no una frase pròpiament dita, llavors potser seriamillor no etiquetar-ho com un paràgraf.”

* http://microformats.org/about/** http://dev.opera.com/articles/

html/


L’element correcte per a envoltar el contingut textual inconnex que no té cap

altra relació semàntica coberta per altres elements de l’HTML és div o span

(segons la posició exacta).

8.7.2. Elements presentacionals

Un consell especialment dolent que es pot trobar algunes vegades a Internet és el

d’utilitzar elements presentacionals curts, com b o i, com a contenidors genèrics

en lloc de span. La raó aportada és normalment una de les dues següents:

• Els elements són tres bytes més curts, amb la qual cosa estalvien amplada

de banda tant en l’HTML com el CSS.

• Els estils necessaris són només per a l’aspecte, i per tant l’ús d’elements

“presentacionals” és correcte en aquestes circumstàncies.

La primera raó és correcta, però l’estalvi és pràcticament insignificant (si no és

que utilitzeu una quantitat increïble d’efectes presentacionals), especialment

si tenim en compte la compressió moderna aplicada pels servidors web als do-

cuments abans d’enviar-los a través d’Internet al navegador. Això fa que els

documents siguin molt més curts del que pot aconseguir qualsevol sistema de

taquigrafia humana.

La segona raó revela una manca de comprensió del que significa realment “pre-

sentacional” en el context de l’HTML. Els elements presentacionals descriuen l’as-

pecte que ha de tenir el seu contingut (b significa simplement “el text de l’interior

és en negreta”). No representen cap lligam genèric per a l’estil del seu interior.

Si s’ha d’aplicar un estil a una secció petita de text dintre d’un paràgraf, o si el

JavaScript l’ha de definir com un destí i no hi ha cap element semàntic apli-

cable per a envoltar-la, l’únic element correcte que es pot utilitzar és span.

Resum

Aquí acaben les meves explicacions sobre els elements span i div; ara ja hau-

ríeu d’entendre molt millor quina és la seva finalitat i ser capaços d’utilitzar-

los amb tota confiança. Els apartats del mòdul “Conceptes bàsics de CSS”

aprofundiran molt més en el seu ús per crear maquetacions de pàgina i per a

altres finalitats.

Preguntes de repàs

1. Quina és la diferència entre div i span?


2. Digueu dos dels usos principals d’aquests elements a les pàgines web.

3. Observeu el codi font d’una de les pàgines del vostre lloc web preferit. Mi-

reu quina estructura té. Utilitza molt elements div i span? Podeu veure al-

guna cosa dolenta o inadequada en la manera d’utilitzar-los? Com es podria

millorar?


9. Creació de múltiples pàgines amb menús de navegacióChristian Heilmann

aEn aquest apartat parlaré sobre la navegació en llocs web i els menús. Veureu

els diferents tipus de menús i la manera de crear-los amb HTML. També parla-

ré sobre la qüestió de la usabilitat i l’accessibilitat dels menús. No entraré en-

cara en l’aplicació d’estils als menús, però sí que establiré els fonaments per a

un altre apartat posterior d’aquesta assignatura sobre el CSS.

9.1. Les eines del vostre menú HTML: enllaços, àncores i llistes

Amb l’HTML cal considerar diversos tipus diferents de menús i sistemes de na-

vegació, tots ells molt relacionats amb els elements link i a (àncora). Per expli-

car-ho ràpidament:

• Els elements link descriuen relacions a través de diversos documents. Per

exemple, podeu dir a un agent d’usuari que el document actual forma part

d’un curs més ampli que inclou diversos documents i quin altre document

és el contingut.

• Les àncores (també conegudes com a elements a) permeten enllaçar amb

un altre document o amb una secció concreta del document actual. L’agent

d’usuari no les segueix automàticament; cal que els visitants les activin

amb el mitjà que sigui que tinguin a la seva disposició (ratolí, teclat, reco-

neixement de veu, accés per commutador…).

aSi no heu llegit els apartats anteriors d’aquesta assignatura sobre els enllaços i

sobre les llistes, us aconsello que els llegiu, ja que aquí dono per coneguda part

de la informació que trobareu en aquests apartats per així evitar repeticions.

Les àncores i els enllaços no es converteixen en menús sense més ni més; cal

donar-los una estructura i aplicar-los estils perquè tant el navegador com els

usuaris sàpiguen que funcionen com un menú de navegació i no només com

un grup d’enllaços aleatoris. Si l’ordre de les pàgines no és important, podeu

utilitzar una llista desordenada igual que a l’exemple de menú de llista desor-

denada de l’arxiu “unordered.html”*.

Observeu que he posat un id als elements ul. Ho he fet per oferir un lligam

per aplicar-los estils amb el CSS i per afegir-los més endavant un comporta-

ment especial amb JavaScript. Un id és una manera molt eficaç de permetre

que altres tecnologies escullin un element concret amb l’HTML.

Vegeu el mòdul “Conceptes bàsics de CSS” d’aquesta assignatura.

Nota

Podeu descarregar-vos codis d’exemple a “menu_examples.zip*” per anar seguint les explicacions; jo m’hi aniré referint al llarg d’aquest apartat. * http://dev.opera.com/articles/view/23-creating-multiple-pages-with-navigat/menu_examples.zip

Vegeu els enllaços i les llistes en els apartats 2 i 4 d’aquest mòdul.

* http://dev.opera.com/articles/view/23-creating-multiple-pages-

with-navigat/unordered.html


Si l’ordre en què els visitants van passant per tots els documents és important,

llavors hauríeu de fer servir una llista ordenada. Si, per exemple, teniu un curs

en línia format per múltiples documents i cadascun parteix d’allò que s’ha ex-

plicat a l’anterior, podeu utilitzar una llista ordenada com la de l’exemple de

llista ordenada de l’arxiu “ordered.html”*.

L’ús de llistes per crear menús és ideal per diverses raons:

• Tot l’HTML es troba en un únic element de llista (ul, per exemple), la qual

cosa significa que podeu utilitzar la cascada del CSS per aplicar un estil di-

ferent a cadascun d’ells i que és molt fàcil arribar fins als elements en Ja-

vaScript baixant des del nivell superior.

• Les llistes es poden imbricar, la qual cosa significa que podeu crear fàcil-

ment una navegació amb diversos nivells de jerarquia.

• Fins i tot si no s’aplica cap estil a la llista, la representació de l’HTML per

part del navegador és lògica i per a un visitant és molt fàcil veure que

aquests enllaços van junts i que formen una única unitat lògica.

Les llistes s’imbriquen incrustant la llista imbricada a l’element li, i no des-

prés d’aquest. Podeu veure’n un exemple correcte i un d’incorrecte a l’arxiu

“nesting.html”*.

Tingueu en compte que els navegadors mostren els dos exemples de la matei-

xa manera.

Una construcció HTML no vàlida com la de l’exemple erroni anterior farà que

sigui molt difícil aplicar-hi estils, afegir-hi comportament amb el JavaScript o

de convertir a un altre format. L’estructura des elements UL imbricats ha de

ser sempre <ul><li><ul><li></li></ul></li></ul> i mai <ul><li>

</li><ul><li></li></ul></ul>.

9.2. La necessitat de flexibilitat

És molt probable que el menú d’un lloc canviï sovint; els llocs web tenen ten-

dència a créixer orgànicament a mesura que s’hi van afegint funcions i que

creix la base d’usuaris, per la qual cosa hauríeu de crear els menús tenint en

compte que s’hi afegiran i se’n trauran entrades a mesura que el lloc vagi pro-

gressant, i també que potser es traduiran a diferents llenguatges (amb la qual

cosa canviarà la longitud dels enllaços). També us podeu trobar treballant en


with-navigat/unordered.html


with-navigat/nesting.html

La visualització en el navegador no hauria de ser mai un indicador de la

qualitat del codi.


llocs en els quals l’HTML dels menús es crea dinàmicament utilitzant llenguat-

ges del servidor i no HTML estàtic. Això, però, no significa que el coneixement

de l’HTML ja no tingui cap utilitat. De fet, serà cada vegada més important

perquè aquests coneixements se seguiran necessitant per crear plantilles

HTML amb les quals treballarà l’script del servidor.

9.3. Diferents tipus de menús

Hi ha diversos tipus de menús que haureu de crear en HTML quan aneu treba-

llant en diferents llocs web. La majoria es poden crear amb llistes, tot i que al-

gunes vegades les restriccions de la interfície obliguen a seguir un altre camí

(ja en parlarem més endavant). Els menús basats en llistes que molt probable-

ment creareu són els següents:

• Navegació per la pàgina: per exemple, un contingut per a una única pàgina

amb enllaços que condueixen a diferents seccions d’aquesta.

• Navegació pel lloc: una barra de navegació per a tot el lloc web (o una sub-

secció d’aquest) amb enllaços que condueixen a pàgines diferents del ma-

teix lloc.

• Navegació contextual segons el contingut: una llista d’enllaços que condu-

eixen a pàgines estretament relacionades amb el tema de la pàgina actual,

tant del mateix lloc com d’altres.

• Mapes del lloc: llistes llargues d’enllaços que condueixen a totes les pàgines

diferents d’un lloc web; els enllaços s’agrupen en subllistes relacionades

perquè sigui més fàcil entendre-ho tot plegat.

• Paginació: enllaços que condueixen a altres pàgines que constitueixen al-

tres seccions o parts de tot un conjunt juntament amb la pàgina actual,

com per exemple part 1, part 2 i part 3 d’un article.

9.3.1. Navegació per la pàgina (contingut)

Ja n’he parlat una mica a l’apartat sobre els enllaços, però aquí trobareu una

descripció més detallada de què significa la navegació per la pàgina i què cal

fer perquè funcioni.

A l’exemple relatiu a aquest subapartat de navegació per la pàgina (arxiu “in-

pagenavigation.html”*) he fet servir una llista d’enllaços que condueixen a

àncores que es troben més avall a la mateixa pàgina. Per connectar les àncores

cal fer servir un atribut id en els elements cap als quals es navegarà i un atribut

href consistent en un símbol de coixinet seguit del mateix nom que el valor


with-navigat/inpagenavigation.html


id de l’àncora a la qual voleu que condueixi aquest enllaç. Cadascuna de les

seccions de la pàgina també té un enllaç per tornar al menú que funciona de

la mateixa manera, però que condueix de tornada cap al menú.

Tècnicament, això és tot el que necessiteu perquè aquest tipus de navegació

funcioni sense problemes, però Internet Explorer presenta un problema molt

empipador que ens obliga a treballar una mica més.

Podeu comprovar aquest error vosaltres mateixos:

1) Obriu el document amb l’Internet Explorer 6 o 7.

2) No utilitzeu el ratolí, feu servir el teclat per navegar pel document. Podeu

prémer la tecla del tabulador per passar d’un enllaç a un altre i la tecla de re-

torn per activar un enllaç; en aquest cas, per passar a la secció a la qual apunta.

3) Aparentment tot funciona sense problemes; el navegador va fins al punt de

la pàgina on volíeu anar.

4) Si torneu a prémer la tecla del tabulador, el que hauria de fer un navegador

seria portar-vos a (o marcar) el primer enllaç de la secció escollida. L’Internet

Explorer, però, us enviarà al principi del menú del principi de la pàgina!

La manera de solucionar aquest problema és molt confusa i té a veure amb una

propietat especial de l’Internet Explorer anomenada hasLayout. Podeu fer-ho de

diverses maneres, i totes elles s’expliquen a l’excel·lent article d’Ingo Chao “On

having layout”*. La manera més senzilla és definir l’amplada de l’element div

amb el CSS, igual que a l’exemple de l’arxiu “inpagenavigationmsiefix.html”**. El

que exigeix l’IE és que l’àncora es trobi en un element amb hasLayout.

Haver-ho de fer és molt empipador, però també va bé en cas que vulgueu apli-

car estils diferents a les seccions. També soluciona un dels problemes dels tí-

tols en HTML: Els títols no contenen les seccions a les quals s’apliquen;

simplement s’assumeix que tot el que segueix fins al proper títol forma part de

la mateixa secció del document. Això fa que sigui impossible aplicar estils di-

ferents a les seccions d’un document sense afegir-hi un <div>. Altres llenguat-

ges de marques proposen un element <section> amb un <title> en el seu

interior, de manera similar a com <fieldset> i <legend> us permeten eti-

quetar parts d’un formulari.

* www.satzansatz.de/cssd/onhavinglayout.html

** http://dev.opera.com/articles/view/23-creating-multiple-pages-

with-navigat/inpagenavigationmsiefix.html

Navegació espacial a

Tingueu en compte que amb Opera la navegació pels enllaços amb el

teclat funciona una mica diferent; mireu l’exemple anterior amb Opera,

mantingueu premuda la tecla Majúscules i utilitzeu les tecles de les flet-

xes per navegar pels enllaços (també funciona amb els elements dels

formularis). Això es coneix com a navegació espacial.


9.3.2. Navegació pel lloc

La navegació pel lloc és probablement el tipus de menú més habitual que hau-

reu de crear. És el menú de tot el lloc (o d’una subsecció) que mostra tant les

opcions que poden escollir els visitants com la jerarquia del lloc. Per a aquests

menús les llistes són l’opció perfecta, tal com veureu a l’exemple de navegació

pel lloc de l’arxiu “home.html”*.

No hi trobareu gaires sorpreses, com a mínim des del punt de vista de l’HTML

en si. Més endavant en aquesta assignatura parlaré sobre l’aplicació d’estils a

aquests tipus de menús amb el CSS i sobre la manera d’afegir-hi comporta-

ment amb el JavaScript. Una cosa important que cal tenir en compte és la ma-

nera de destacar el document actual del menú, per tal de donar a l’usuari la

sensació de ser en un lloc concret i que s’està movent d’un lloc a l’altre (encara

que en realitat no es mou en absolut, tret que faci servir algun dispositiu mòbil

per navegar pel web). Això és el que veurem a continuació.

1) Donar als visitants la sensació de “Vostè es troba aquí”

La regla principal per al desenvolupament de webs i la navegació és que el do-

cument actual no s’ha d’enllaçar mai amb ell mateix sinó que ha de ser clara-

ment diferent de les altres entrades del menú. Això és important perquè dóna

als visitants alguna cosa a la qual aferrar-se i perquè els explica on es troben

en el seu viatge pel lloc. Hi ha molts casos diferents, com ara aplicacions web,

enllaços permanents en blocs i el que es coneix com a llocs web “d’una pàgi-

na”, però en el 99% dels casos un enllaç cap al document que ja esteu mirant

és redundant i resulta confús per al visitant.

A l’apartat sobre els enllaços ja he explicat que un enllaç és un acord i una res-

ponsabilitat: s’ofereix als visitants una manera d’arribar a més informació que

necessiten, però cal tenir molta cura perquè si l’enllaç no dóna als usuaris allò

que volen, o si té un comportament inesperat, perdreu credibilitat i la seva

confiança. Si, per exemple, oferiu un enllaç que apunta cap al document actu-

al, en activar-lo es tornarà a carregar el document. Com a usuari això és una

cosa que no espereu: de què serveix clicar aquest enllaç? L’únic que s’aconse-

gueix és que els usuaris quedin perplexos.

És per això que des del menú no hi ha d’haver mai cap enllaç fins a la pàgina

actual. Podríeu eliminar l’enllaç o, millor encara, fer que deixi d’actuar com

un enllaç però destacar-lo (per exemple amb un element strong); amb això

els usuaris tindrien una indicació visual i també diria als visitants cecs que és

important i que és l’entrada actual del menú.

Podeu veure un exemple de pàgina actual destacada a: “about.html”http://3dev.opera.com/articles/view/23-creating-multiple-pages-with-navigat/about.html


with-navigat/home.html


2) Quantes opcions cal donar als usuaris en cada moment?

Una altra qüestió que cal tenir en compte és quantes opcions voleu donar als

visitants. Molts dels menús que veieu al web intenten garantir que es podrà

accedir a totes les pàgines del lloc des d’un únic menú. Aquí és on entren en

joc els trucs dels scripts i del CSS; podeu fer que els menús siguin més fàcils de

fer servir ocultant-ne parts fins que els usuaris en seleccionin algunes àrees

concretes (és el que algunes vegades es coneix com a menús desplegables). Des

d’un punt de vista tècnic és perfecte, però aquest enfocament presenta uns

quants problemes:

• No tots els usuaris podran utilitzar aquest truc tan intel·ligent de la manera

esperada; els usuaris del teclat, per exemple, hauran de passar per tots els

enllaços de la pàgina amb el tabulador per arribar al que busquen.

• Per aconseguir-ho haureu d’afegir molt d’HTML a cada document del vos-

tre lloc, i una bona part d’aquest pot ser redundant en moltes pàgines. Si

baixo tres nivells dintre d’un menú d’aquesta mena per arribar al docu-

ment que vull llegir, no cal que pugui veure les opcions que em porten a

un profunditat de 4, 5 i 6 nivells.

• Si oferiu massa opcions a la vegada podeu aclaparar els visitants; als éssers

humans no els agrada prendre decisions. Només cal que penseu en tot el

temps que necessiteu per triar un plat en una carta de restaurant una mica

llarga.

• Si en una pàgina no hi ha gaire contingut però sí molts enllaços, els mo-

tors de cerca assumiran que no hi ha gaire informació vàlida i no li faran

gaire cas, amb la qual cosa serà difícil de trobar quan es facin cerques al

web.

Fet i fet, la decisió sobre les entrades que posareu en un menú és vostra, ja

que els diferents dissenys exigiran unes opcions diferents; però si teniu al-

gun dubte, sempre hauríeu d’intentar reduir els menús als enllaços fins a

les seccions principals del lloc. Sempre podeu oferir altres menús en els

llocs on sigui oportú.

9.3.3. Menús contextuals

Els menús contextuals són enllaços que es basen en contingut del docu-

ment actual i ofereixen més informació relacionada amb la pàgina a la qual

us trobeu. Un exemple clàssic són els enllaços “notícies relacionades” que

s’acostumen a trobar al final de les notícies que llegiu, tal com podeu veure

a la figura 1.


Figura 1

Exemple de menú contextual: una notícia que ofereix notícies relacionades.

Aquests menús són una mica diferents dels menús contextuals de les interfí-

cies d’usuari, que ofereixen opcions diferents segons el lloc des d’on s’hi acce-

deix (com els menús que apareixen amb un clic del botó dret del ratolí o amb

‘Ctrl’ + clic en les aplicacions d’escriptori que ofereixen unes opcions concre-

tes segons el punt on es troba el punter del ratolí en cada moment).

Els menús contextuals dels llocs web són una manera perfecta de presentar el

contingut d’altres parts del lloc; i pel que fa a l’HTML, no són res més que una

altra llista d’enllaços.

9.3.4. Mapes del lloc

Els mapes del lloc són ben bé el que indica el seu nom: mapes de totes les pà-

gines diferents (o de les seccions principals si parlem de llocs realment molt

grans) del lloc. Permeten als visitants del lloc veure’n ràpidament l’estructura

general i anar ràpidament allà on vulguin, fins i tot si la pàgina que necessiten

es troba en un nivell molt profund de la jerarquia.

Tant els mapes del lloc com les cerques en el lloc són una manera perfecta

d’oferir als visitants una opció alternativa quan es troben perduts, o d’oferir-

los un accés ràpid quan tenen pressa.

Des del punt de vista de l’HTML, poden ser una llista molt gran imbricada ple-

na d’enllaços o bé, en el cas de llocs web molt grans, títols de secció amb en-

llaços imbricats de jerarquies específiques de cada secció, o fins i tot formularis

de cerca per a cadascuna de les seccions.

9.3.5. Paginació

La paginació és necessària quan cal oferir una manera de navegar per docu-

ments molt grans dividits en diverses pàgines. Trobareu paginació, per exem-

ple, als arxius d’imatges molt grans o a les pàgines de resultats de cerca (com

Google o Yahoo).


La paginació és diferent d’altres tipus de navegació perquè normalment enlla-

ça cap al mateix document, però amb un enllaç que conté més informació,

com per exemple la pàgina des de la qual cal començar. La figura 2 mostra al-

guns exemples de paginació:

Figura 2

Els menús de paginació permeten que els visitants naveguin per grans conjunts de dades sabent en tot moment on estroben.

L’HTML no és gens revolucionari, ja que no deixa de ser una altra llista d’en-

llaços amb l’enllaç actual (el que indica les dades actuals i el nivell que ocupen

a la paginació) desactivat i destacat (amb un element strong, per exemple).

La diferència principal amb la navegació pel lloc és que la paginació inclou

una lògica de programació important. Segons el lloc on us trobeu de tot el con-

junt de dades, haureu de mostrar o ocultar els vincles previ, següent, primer i

últim. Si teniu un volum d’informació realment enorme pel qual navegar,

també és recomanable oferir enllaços a punts de referència com 100, 200 i

moltes més opcions. És per aquesta raó que molt probablement no codificareu

menús d’aquesta mena en HTML sinó que els creareu en el servidor. Això, pe-

rò, no fa que canviïn les normes; les dades actuals no s’han d’enllaçar amb

elles mateixes i no heu d’oferir enllaços que no portin enlloc.

9.4. Quan les llistes no són suficients: mapes d’imatge i formularis

En el 99% dels casos, les llistes ordenades o desordenades són opcions de l’HTML

suficients per crear menús, especialment perquè l’ordre lògic i la imbricació també

permeten aplicar uns estils molt interessants amb el CSS. Hi ha algunes situacions,

però, que poden exigir algunes tècniques de disseny diferents.

9.4.1. Definir zones sensibles amb mapes d’imatge

Una de les tècniques són els mapes d’imatge del client. Els mapes d’imatge

converteixen una imatge en un menú convertint seccions d’una imatge en

àrees interactives que es poden enllaçar amb diferents documents. L’exem-

ple de mapa d’imatge* associat a aquesta secció converteix una imatge en


with-navigat/imagemap.html


un menú que es pot clicar. Proveu-ho seguint l’enllaç anterior i clicant les

diferents seccions del triangle de la imatge que apareix a la figura 3.

Figura 3

Definint un mapa amb elements d’àrea podeu convertir parts d’una imatge enelements interactius.

Arxiu font: “imagemap.html”http://dev.opera.com/articles/view/23-creating-multiple-pages-with-navigat/imagemap.html

Podeu convertir una imatge en un menú definint un mapa amb àrees diferents

(també conegudes com a zones sensibles). Haureu de donar al mapa un atribut

name i connectar la imatge i el mapa amb l’atribut usemap de l’element img.

Observeu que això funciona exactament igual que els enllaços a la mateixa pà-

gina, la qual cosa significa que el valor de l’atribut usemap haurà d’anar pre-

cedit d’un coixinet.

Cadascuna de les àrees ha de tenir diversos atributs:

href

Defineix la URL a la qual enllaça l’àrea (que també podria ser un destí en el

mateix document).

alt

Defineix un text alternatiu per si no es pot trobar la imatge o si l’agent

d’usuari no accepta imatges.

shape

Defineix la forma de l’àrea. Pot ser rect per a rectangles, circle per a cer-

cles o poly per a formes irregulars definides mitjançant polígons.

coords

Defineix les coordenades en la imatge que s’han de convertir en zones sen-

sibles; aquests valors es mesuren des del vèrtex superior esquerre de la imat-

ge i es poden mesurar en píxels o percentatges. Per a les àrees rectangulars

només cal definir el vèrtex superior esquerre i l’inferior dret; per als cercles

haureu de definir-ne el centre i el radi; per als polígons haureu d’oferir una

llista de tots els punts de vèrtex.


Els mapes d’imatge no són tan divertits de definir i escriure com l’HTML, i és

per això que hi ha eines de manipulació d’imatges, com ara Adobe Image Re-

ady o Fireworks, que ofereixen una opció per crear-los visualment (generen

automàticament l’HTML).

9.4.2. Estalviar espai de pantalla i evitar la sobrecàrrega

d’enllaços amb formularis

Una altra tècnica que podeu utilitzar és crear un formulari amb l’element se-

lect. Podeu definir les diferents pàgines com a opcions de l’element select,

i així els visitants podran escollir una opció i trametre el formulari per passar

a altres pàgines. Trobareu un exemple de menú de formulari a l’arxiu “se-

lectnavigation.html”*.

L’avantatge més obvi de l’ús d’aquest tipus de menú és que podeu oferir un

munt d’opcions sense ocupar molt d’espai de la pantalla, ja que els navegadors

mostren el menú en una línia; vegeu la figura 4.

Figura 4

Els menús de selecció ocupen només una líniaa la pantalla.

Arxiu font: “selectnavigationoptgroup.html”http://dev.opera.com/articles/view/23-creating-multiple-pages-with-navigat/selectnavigationoptgroup.html

Podeu anar més lluny i agrupar les diferents opcions del menú amb l’element

optgroup, tal com podeu veure a l’exemple de l’arxiu “selectnavigationopt-

group.html”*.

Llavors apareixerà un menú amb opcions que no es podran seleccionar (són

els noms dels grups), tal com es mostra a la figura 5.

Aquesta tècnica té l’avantatge que ocupa molt poc espai, però també us obliga

a tenir un script del servidor per enviar els visitants a les pàgines que han es-

collit. Per fer que els enllaços funcionin també podeu utilitzar JavaScript, però

no us podeu refiar que el JavaScript estigui disponible; haureu de comprovar


with-navigat/selectnavigation.html


with-navigat/selectnavigationoptgroup.html


que els vostres usuaris puguin utilitzar els menús fins i tot amb el JavaScript

desactivat.

Figura 5

Els menús de selecció poden incorporar grups d’opcionsque us permetran dir als visitants quines opcions estanrelacionades entre elles. Així és tal com apareix a l’Opera9.5.

Un altre avantatge, tot i que menys evident, és que d’aquesta manera no oferiu

un excés d’enllaços en el mateix document. Això significa que no atabalareu

els usuaris de tecnologies d’assistència (que normalment solen trobar tots els

enllaços en una llista molt llarga). I també significa que els motors de cerca no

consideraran els enllaços de la vostra pàgina com una cosa inútil, ja que la re-

lació entre enllaços i text fa que el document sembli un mapa de lloc. No obs-

tant això, moltes tecnologies d’assistència poden generar un mapa dels

enllaços de les vostres pàgines; si tots els vostres enllaços importants es troben

en un menú de selecció, hi ha la possibilitat que un visitant no els arribi a tro-

bar mai. Així, doncs, és una bona idea oferir enllaços d’àncora cap a les pàgines

de destí principals i els menús de l’element select per oferir més opcions. Els

visitants els podran utilitzar, però les màquines com els robots dels motors de

cerca no caldrà que sàpiguen que existeixen.

9.5. On posar el menú, i oferir opcions per saltar-se’l

Una última cosa que cal mencionar sobre els menús HTML és que la situació del

menú és molt important. Penseu en els visitants que no tenen cap mecanisme

de desplaçament o que no poden veure-s’hi i que, per tant, es refien de la nave-

gació amb el teclat per moure’s pel lloc. La primera cosa amb què es trobaran

quan carreguin el document és la seva ubicació i el títol, i a continuació el do-

cument es llegirà de principi a fi aturant-se en cadascun dels enllaços per dema-

nar al visitant si el volen seguir o no. Altres opcions poden ser una llista de tots

els enllaços o passar de títol a títol. Si el menú es troba a la part superior del do-

cument, serà la primera cosa que trobarà l’usuari. El fet d’haver de passar per 15

o 20 enllaços abans d’arribar al contingut pot ser una tasca realment empipado-

ra. Per a això hi ha dues solucions disponibles. En primer lloc, podeu posar el


menú després del contingut principal del document (si voleu també el podeu

posar a la part superior de la pantalla utilitzant el CSS). En segon lloc, podeu ofe-

rir un enllaç per passar per alt el menú. Aquest no és res més que un enllaç

col·locat abans del menú principal i que porta cap al començament del contin-

gut, amb la qual cosa el visitant, si ho desitja, pot saltar-se el menú i anar direc-

tament al contingut. Podeu afegir un altre enllaç “anar al menú” al final del

document per així poder tornar fàcilment a la part superior.

Per conèixer més detalls sobre aquesta mena d’enllaços, podeu veure’n exemples a: “skiplinks.html”http://dev.opera.com/articles/view/23-creating-multiple-pages-with-navigat/skiplinks.html

Els enllaços per saltar el menú no només són útils per a les persones amb

aquesta mena de discapacitats, sinó que també ho fan tot més fàcil quan es na-

vega per un lloc en un dispositiu mòbil amb una pantalla petita.

Resum

En aquest apartat he explicat els diferents tipus de menús que probablement

haureu d’escriure en HTML. He parlat de:

• Per què les llistes amb àncores són l’estructura HTML perfecta per definir

un menú.

• Per què és important no considerar els menús com una cosa inamovible

sinó que cal preveure i planificar els canvis que puguin fer-s’hi.

• Navegació per la pàgina: enllaços cap a seccions del document actual i de

tornada cap al menú.

• Navegació pel lloc: oferir un menú que mostra tant les pàgines del lloc ac-

tual com la seva jerarquia; també he explicat per què és important destacar

la pàgina a la qual es troba actualment l’usuari.

• Navegació contextual: oferir enllaços cap a pàgines relacionades d’altres

punts del lloc (o d’altres llocs).

• Mapes del lloc: com a alternativa i eina d’orientació per als visitants que se

sentin perduts o que hi arribin amb una necessitat específica.

• Paginació: una eina que permet als visitants navegar per un document di-

vidit en múltiples pàgines.

• Mapes d’imatge: crear menús gràfics posant zones sensibles sobre imatges.

• Menús de formulari: oferir moltes opcions sense ocupar gaire espai de pan-

talla i sense aclaparar els visitants i els motors de cerca amb massa enllaços.


• Enllaços per saltar el menú i ubicació del menú.

Més endavant tornarem a parlar d’alguns d’aquests temes a la secció del CSS

d’aquesta assignatura i explicarem com es pot aconseguir que aquestes estruc-

tures HTML tinguin un aspecte atractiu i siguin uns menús encara més intuï-

tius per als visitants.

Preguntes de repàs

1. Per què és una bona idea etiquetar els menús com a llistes?

2. Quan dissenyeu un menú de navegació, què cal planificar de cara al futur?

3. Quins són els avantatges d’utilitzar elements select per als menús, i quins

són els problemes?

4. Què es defineix amb els elements area, i per a què serveix l’atribut nohref

d’un element area (no ho trobareu aquí, us caldrà fer una mica de recerca en

línia).

5. Quins són els avantatges dels enllaços per saltar el menú?


10. Validar l’HTMLMark Norman Francis

Ara ja heu escrit unes quantes pàgines en HTML i sembla que es veuen prou

bé, però hi ha unes quantes coses que no són del tot correctes. Quina és la mi-

llor manera de trobar allò que no funciona i garantir que aquestes pàgines (i

totes les pàgines que escriviu en el futur) es vegin correctament amb tots els

navegadors sense cap error?

La resposta és la validació. Hi ha moltes eines disponibles, del W3C i d’altres

llocs, que us permeten validar el codi dels vostres llocs web. Els tres validadors

més habituals que utilitzareu són:

• El validador d’etiquetes del W3C*: Busca el doctype de l’(X)HTML que uti-

litzeu per al document que li doneu per comprovar, revisa tot el document

i senyala els llocs on l’HTML no segueix correctament el doctype (és a dir,

on hi ha errors a l’HTML).

• El comprovador d’enllaços de W3C*: Aquesta eina revisa tot el document

que li doneu per comprovar i prova tots els enllaços que hi troba per garan-

tir que funcionin (és a dir, que els valors href no apuntin cap a recursos

que no existeixen).

• El validador del CSS de W3C*: Tal com probablement ja us imagineu,

aquesta eina revisa un document CSS (o HTML/CSS) i comprova que el CSS

segueixi correctament les especificacions del CSS.

aEn aquest apartat explicaré el primer d’aquests tres validadors i ensenyaré la

manera d’utilitzar-lo i com interpretar els tipus de resultats típics que dóna. El

comprovador d’enllaços és molt obvi, i sobre el validador del CSS no caldrà ex-

plicar gaire res més una vegada hàgiu llegit aquest apartat i els apartats relatius

al CSS que trobareu més endavant en aquesta assignatura.

10.1. Errors

En general, a la programació informàtica hi ha dos tipus de problemes amb el

codi:

• Errors sintàctics, que es donen quan un error d’escriptura del codi fa que

l’ordinador sigui incapaç d’executar o compilar el programa adequada-

ment.

* http://validator.w3.org/

* http://validator.w3.org/checklink

* http://jigsaw.w3.org/css-validator/

Vegeu els continguts del mòdul “Conceptes bàsics de CSS” d’aquesta assignatura.


• Errors de programació (o lògics), que es donen quan el codi no reflecteix com-

pletament la intenció del programador.

La majoria de llenguatges de programació detecten molt fàcilment el pri-

mer error, ja que el programa no s’executa o no es compila fins que se so-

luciona. Això fa que trobar i solucionar aquests tipus de problemes en els

moments de desconcert en què us pregunteu: “per què no fa el que hauria

de fer?”, sigui molt més fàcil.

L’HTML no és un llenguatge de programació. Els errors de sintaxi d’una pà-

gina web no fan normalment que el navegador web es negui a obrir la pà-

gina (tot i que l’XHTML acostuma a ser més estricte que l’HTML, com a

mínim quan se serveix com a dades application/xhtml+xml o text/

xml, segons es vulgui; i alguns doctypes rebutjaran l’ús de certs tipus d’ele-

ments HTML). Aquesta és una de les raons principals de la ràpida adopció

i difusió del web.

El primer navegador web, WorldWideWeb* (creat per Tim Berners-Lee) era

també un editor, i permetia crear pàgines web sense haver d’aprendre

HTML. Aquest editor creava un HTML no vàlid. Això es podria haver solu-

cionat, però va establir un precedent important que encara existeix a tots

els navegadors web actuals: és més important que la gent pugui accedir al

contingut que no queixar-se d’errors que la gent no entendrà o que no po-

drà solucionar.

10.2. Què és la validació?

Els navegadors web acceptaran les pàgines web dolentes (el terme que utilit-

zem aquí és “no vàlides”) i faran tot el que puguin per reproduir el codi inten-

tant endevinar quines eren les intencions de l’autor, però també es pot

comprovar si l’HTML s’ha escrit correctament; de fet, tal com veureu a conti-

nuació, val la pena fer-ho. Això es coneix com “validar” l’HTML.

aEl programa de validació compara el codi HTML de la pàgina web amb les nor-

mes del doctype d’acompanyament i diu si no s’han respectat aquestes nor-

mes i on.

10.3. Per què validar?

Alguns desenvolupadors de webs opinen que si una pàgina web es veu bé als

navegadors, el fet que no es validi no té cap importància. Consideren que la

validació és un objectiu ideal, però ni molt menys obligatori.

* http://www.w3.org/People/Berners-Lee/WorldWideWeb.html

Vegeu el doctype a l’apartat 3 del mòdul “Fonaments d’HTML”.


aAquesta actitud no deixa de ser sàvia. L’especificació HTML no és perfecta, i

ara fins i tot ha quedat una mica antiquada. Algunes coses que són perfecta-

ment correctes (com per exemple començar una llista ordenada en un punt

diferent d’1) no són vàlides amb HTML.

Però, tal com diu la dita:

“Aprèn les normes per així saber com infringir-les correctament.”

Hi ha dues raons molt potents per validar l’HTML mentre l’aneu escrivint.

• Les persones no són perfectes, igual que tampoc ho és el codi; tots come-

tem errors, i les vostres pàgines web seran d’una qualitat superior (és a dir,

funcionaran millor) si els elimineu.

• Els navegadors canvien. En el futur és molt probable que els navegadors

siguin menys condescendents quan analitzin un codi no vàlid, i no al

revés.

La validació és el vostre sistema d’alerta precoç davant la introducció de pro-

blemes a les vostres pàgines que llavors es poden manifestar de maneres real-

ment interessants i difícils de determinar. Quan un navegador troba codi

HTML no vàlid ha de prendre una decisió ben fonamentada sobre quines eren

les vostres intencions, i els diferents navegadors poden arribar a respostes di-

ferents.

10.4. Els diferents navegadors interpreten l’HTML no vàlid

d’una manera diferent

L’HTML vàlid és l’únic contracte que teniu amb els fabricants del navegadors.

L’especificació d’HTML diu com l’hauríeu d’escriure i com haurien d’interpre-

tar el vostre document. Actualment, la conformitat dels navegadors amb els

estàndards ha arribat al punt en què, si escriviu un codi vàlid, tots els navega-

dors principals interpretaran el vostre codi de la mateixa manera. Amb

l’HTML això passa pràcticament sempre, mentre que els altres estàndards es

poden trobar amb algunes altres diferències aquí i allà pel que fa a la seva ac-

ceptació.

Però què passa si envieu un codi no vàlid a un navegador? Quines conseqüèn-

cies té? La resposta és que entra en acció la gestió d’errors del navegador per

decidir què cal fer amb el codi. Bàsicament el que fa és dir: “D’acord, aquest

codi no es pot validar, però com podem presentar aquesta pàgina a l’usuari fi-

nal? Omplirem els buits de la manera següent”.

Vegeu com començar una llista ordenada en un punt diferent d’1el doctype a l’apartat 2 d’aquets mòdul.


Sona molt bé, no? Si la pàgina conté alguns errors, el navegador omplirà els

buits per vosaltres? Doncs no ben bé, perquè cada navegador fa les coses a la

seva manera. Per exemple:

Els errors són que l’element strong es troba imbricat incorrectament a través

de múltiples elements de bloc i que l’element d’àncora no s’ha tancat. Quan

s’intenta veureu-ho amb diferents navegadors, aquests interpreten el codi de

maneres molt diferents:

• Opera converteix els elements consecutius en fills de l’element negreta.

• Firefox afegeix elements negreta addicionals entre els paràgrafs que no

eren presents a l’etiquetatge.

• Internet Explorer posa el text “Aquest text hauria de ser un enllaç” fora de

l’etiqueta d’àncora que crea l’enllaç.

Cap dels comportaments dels diferents navegadors és incorrecte; tots intenten

reparar els errors del vostre codi incorrecte. La conclusió és, doncs, que cal evi-

tar sempre que sigui possible l’etiquetatge no vàlid a la vostra pàgina.

10.4.1. El “quirks mode”

Una altra cosa que hauríeu de conèixer és el que es coneix com a “Quirksmo-

de” o “mode quirks”. És el mode al qual passa el navegador quan troba una

pàgina amb un doctype incorrecte, o sense doctype. En aquest mode, el na-

vegador fa tot el que pot per saber quina sèrie de regles ha de fer servir per va-

lidar el codi i repara els errors tan bé com sap. Aquest mode existeix realment

per permetre la visualització de les pàgines més antigues, i no s’ha de fer servir

mai per crear una pàgina nova.

10.5. Com validar les pàgines

Ara que ja hem explorat tota la part teòrica que hi ha al darrere de la validació

de l’HTML, ja podem passar a la part més senzilla: la validació en si. Bé, de fet,

no és ben bé així. Posar una URL en un validador i veure si la pàgina és vàlida

<p><strong>Aquest text hauria d’estar en negreta</p>

<p>Aquest text hauria d’estar en negreta? Com queda l’HTML quan es representa?</p>

<p><a href=“#”></strong>Aquest text hauria de ser un enllaç</p>

<p>Aquest text hauria de ser un enllaç? Com queda l’HTML quan es representa?</p>

Nota

Podeu trobar la versió original d’aquest exemple a l’article de Hallvord Steen “Same DOM errors, different browser inter-pretations”*; si el llegiu hi tro-bareu un tractament molt més detallat dels errors de l’HTML i informació sobre les eines de depuració.* http://www.thinkvitamin.com/features/dev/same-dom-errors-different-browser-interpretations


o no és molt fàcil; descobrir què és el que està malament i solucionar els errors

no és sempre tan fàcil, perquè els missatges d’error a vegades són una mica

críptics. Tot seguit en veurem alguns exemples.

El que mirarem en aquest subapartat és el següent (també us el podeu descar-

regar o veure’n l’HTML):

Arxiu font: “example_validation.html”http://dev.opera.com/articles/view/24-validating-your-html/example_validation.html

1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/

TR/xhtml1/DTD/xhtml1-strict.dtd”>

2 <html xmlns=“http://www.w3.org/1999/xhtml” lang=“en”>

3 <head>

4 <title>Validating your HTML</title>

5 </head>

6 <body>

7 <h2>The tale of Herbet Gruel</h2>

8 <p>Welcome to my story. I am a slight whisp of a man, slender and fragile,

features wrinkled and worn, eyes sunken into their sockets like rabbits

cowering in their burrows. The <em>years have not been kind to me</em>,

but yet I hold no regrets, as I have overcome all that sought to ail me,

and have been allowed to bide my time, making mischief as I travel to and

fro, 'cross the unyielding landscape of the <a href=“http://outer-rim-

rocks.co.uk” colspan=“3”>outer rim</a>.</p>

9 <h3>Buster</h3>

10 <p>Buster is my guardian angel. Before that, he was my dog. Before that,

who knows? I lost my dog many moons ago while out hunting geese in the

undergrowth. A shot rang out from my rifle, and I called for Buster to

collect the goose I had felled. He ran off towards where the bird had

landed, but never returned. I never found his body, but I comfort myself

with the thought that he did not die; rather he transcended to a higher

place, and now watches over me, to ensure my well-being.

11 <h3>My possessions</h3>

12 <p>A travelling man needs very little to accompany him on the road:</p>

13 <ul>

14 <li>My hat full of memories</li>

15 <li>My trusty walking cane</li>

16 <li>A purse that did contain gold at one time</li>

17 <li>A diary, from the year 1874<li>

18 <li>An empty glasses case</li>

19 <li>A newspaper, for when I need to look busy</li>

20 </ul>

21 </body>


Aquesta pàgina tan senzilla està formada per tres títols, tres paràgrafs, un en-

llaç i una llista desordenada. Fa servir el doctype XHTML 1.0 Strict com a sèrie

de regles de validació. El document conté alguns errors, que descobrireu més

endavant amb el validador d’HTML de W3C.

10.5.1. El validador d’HTML del W3C

Tal com ja he comentat, el W3C ofereix un validador en línia. Us serà molt

útil poder canviar entre diferents pestanyes per anar alternant entre el valida-

dor i aquest apartat mentre aneu seguint aquest exemple.

Veureu que el validador té tres pestanyes a la part superior de la interfície:

• Validate by URI (Validar per URI): Permet introduir l’adreça d’una pàgina

que ja es troba a Internet per a la seva validació.

• Validate by File Upload (Validar per càrrega d’arxiu): Permet carregar un ar-

xiu HTML per a la seva validació.

• Validate by Direct Input (Validar per entrada directa): Permet enganxar el

contingut d’un arxiu HTML a la finestra per a la seva validació.

Sigui quin sigui el mètode que utilitzeu, el resultat hauria de ser el mateix; jo

crec que el més senzill és comprovar la pàgina d’exemple que tenim aquí co-

piant tot el codi anterior i enganxant-lo en una tercera pestanya. Si ho feu,

hauríeu d’obtenir el resultat que podeu veure a la figura 1:

Figura 1

Resultats de la validació del document de mostra, 17 errors!

Tingueu en compte que també podeu validar pàgines amb el validador

del W3C directament des del navegador Opera senzillament fent clic

amb el botó dret del ratolí o amb un ‘Ctrl’ + clic i seleccionant l’opció

“Validate” (Validar).


Pot semblar molt preocupant, especialment si us dic que en aquest document no

hi ha realment 17 errors! No us desespereu; diu que hi ha més errors dels que hi

ha realment perquè normalment un error al principi de la pàgina té un efecte en

cascada, la qual cosa fa que el validador informi de més errors a mesura que va

baixant per la pàgina, ja que sembla que hi ha més elements que no estan tancats

o que no estan correctament imbricats. Només cal que penseu en el significat del

missatge d’error i que trobeu els errors obvis de l’etiquetatge. La següent taula 1

mostra tots els errors que he reparat per poder validar la pàgina, juntament amb

les deduccions per esbrinar què era el que no funcionava i la solució aplicada.

Taula 1

Després de corregir aquests errors, el validador dóna un missatge bastant satis-

factori, tal com mostra la figura 2:

Figura 2

Un missatge satisfactori que diu que ja s’han reparat tots els errors.

Missatge d’error Deducció Reparació

Línia 8, columna 461: no hi ha cap atribut “colspan”

Sabem que hi ha un atribut colspan i que és un HTML vàlid; per tant, per què diu que no hi és? Espereu; potser vol dir que s’utilitza en un element en el qual no s’hauria d’utilitzar. Evidentment, s’utilitza en un element a. Malament!

He eliminat l’atribut colspan de l’element a.

Línia 13, columna 7: El tipus de document no permet l’element “h3” aquí; falta una etiqueta d’obertura d’“object”, “applet”, “map”, “iframe”, “button”, “ins”, “del”. <h3>My possessions</h3>

A primera vista també sembla estranya, ja que l’element h3 està tancat i en aquest context està permès. Cal que tingueu en compte que, sovint, aquest missatge d’error significa que hi ha un element no tancat a prop…

He afegit una etiqueta de tancament p a la línia que hi ha sobre el títol en qüestió.

Línia 19, columna 40: El tipus de document no permet l’element “li” aquí; falta una etiqueta d’obertura d’“ul”, “ol”, “menu”, “dir”. <li>A diary, from the year 1874<li>

Aquest és molt fàcil; a la línia indicada podeu veure ràpidament que l’etiqueta li final no té la barra inclinada de tancament (/)

He afegit una barra inclinada de tancament a la línia en qüestió.

Línia 23, columna 9: No hi ha l’etiqueta de tancament per a “html”, però s’ha especificat OMITTAG NO. </body>

En aquest cas també és molt fàcil veure que falta l’etiqueta html final. Fins i tot l’explicació del missatge d’error comença dient que potser heu oblidat tancar un element.

He afegit l’element html final que faltava.

Els errors reparats per validar la pàgina d’exemple


Això és tot el que calia fer. Només cal que no us poseu nerviosos i que recordeu

el doctype que feu servir per validar la pàgina.

Descarregueu-vos o mireu la versió correcta de l’HTML a: “example_validation_fixed.html”http://dev.opera.com/articles/view/24-validating-your-html/example_validation_fixed.html

Resum

Després de llegir aquest apartat hauríeu de poder treballar amb comoditat amb

el validador en línia de W3C per validar el vostre HTML. Això, però, és només

la punta de l’iceberg pel que fa a la validació, a continuació trobareu una llista

amb unes eines més complicades que us poden ajudar quan les vostres pàgines

es vagin fent grans i es vagin complicant.

Preguntes de repàs

1. Què passa quan un navegador analitza un HTML no vàlid?

2. Quin problema hi ha?

3. L’ús d’un conjunt de marcs en un document validat amb el doctype

HTML 4 Strict generarà un error?

Altres eines que podeu utilitzar

El menú de depuració d’Opera


Bookmarklet de validació general


L’ampliació de la barra d’eines del desenvolupador de webs de Firefox


La barra d’eines del desenvolupador de l’IE

http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-

672d-4511-bb3e-2d5e1db91038&displaylang=en

Safari tidy

http://zappatic.net/safaritidy/

HTML tidy

http://tidy.sourceforge.net/

Documents

El text central d’HTMLCC-BY-NC-ND • PID_00150449 8 El text central d’HTML dins el text per a aconseguir el sagnat desitjat, deixar més espai després d’un punt entre frases