Etiquetes i atributs

Per confeccionar una pàgina web estàtica és necessari saber com es pot estructurar tota la informació que ha de contenir l’aplicació; actualment amb HTML5. Hem de saber, doncs, quins elements podem usar, quina sintaxi utilitzen i en quins casos s’han de fer servir.

A més a més de les etiquetes que conformen l’estructura d’un document, tenim disponibles una col·lecció d’etiquetes que ens permetran ordenar la informació que tenim al cos de la web, la qual cosa donarà un significat semàntic a cada porció d’informació.

Des que es va introduir HTML5 s’han incorporat noves etiquetes i atributs molt variats, alhora que han quedat en desús unes altres, ja que es va entendre que hi havia moltes etiquetes que ja donaven la mateixa funcionalitat i no calia ser redundants, o simplement per diferenciar millor el que és estructura i semàntica (HTML) del que és estètica (CSS).

En aquest apartat ens centrarem principalment en HTML5 deixant de banda XHTML, ja que, com ja vam veure a l’anterior unitat, es pot fer servir puntualment però no té una correlació directa amb la versió actual d’HTML.

Com a regla general podríem dir que les etiquetes tenen atributs i que segueixen una nomenclatura com la de la figura.

Figura Etiquetes i atributs a HTML

A partir d’ara ens centrarem en les etiquetes disponibles a HTML5 i els seus atributs, tenint en compte que hi ha atributs comuns a totes les etiquetes i d’altres que poden ser exclusius per a algunes en concret.

Etiquetes del cos del document

Per dissenyar la part visible d’un document o plana web, partirem del concepte cos del document (marcat amb l’etiqueta <body>) on hem d’incloure tot el contingut de la web, és a dir, la informació que volem que vegi l’usuari final de l’aplicació web, tot i que poden existir minoritàriament elements ocults a l’usuari dins del cos. A l’interior del <body> o cos, disposarem de diferents elements que, amb els seus atributs, ens permetran aconseguir aquest objectiu. 

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>.:: Exemple de document web ::.</title>
  6. </head>
  7. <body>
  8.  
  9. 	<!-- Aquí disposarem de les etiquetes i atributs visibles a la web -->
  10.  
  11.  
  12. </body>
  13. </html>

Tipus d'elements

Els elements HTML5 descendents de l’element <body> es poden classificar en dos tipus: els elements (block elements) i els elements de línia (inline elements).

Els elements de bloc, com per exemple els títols, els paràgrafs, les llistes o les taules, els articles, les seccions, etc. són grans estructures que poden contenir altres elements de bloc, elements de línia, o text.

Normalment, el navegador els mostra com a blocs independents i separa un bloc d’un altre amb un salt de línia. Per aquest motiu, si posem a una pàgina un element en bloc, aquest tendeix a expandir-se el màxim permès per la finestra i provoca un salt de línia. Heu de tenir en compte que aquest comportament és modificable, ja que podem forçar la grandària dels elements principalment des de CSS.

Els elements de línia, com per exemple els enllaços, les citacions o les imatges, són petites estructures que representen o descriuen petits trossos de text o dades. Poden contenir només text o altres elements de línia.

Normalment, el navegador mostra els elements de línia un al costat de l’altre, dins de l’element de bloc que els conté, o al seu defecte dins del document que representa l’etiqueta <body>. Podríem dir que un element de línia ocupa l’espai d’allò que conté, però no s’expandeix més enllà.

Si ho comparem amb un processador de textos, podem pensar en un paràgraf com un element de bloc i una paraula emfatitzada, per exemple en negreta, com un element de línia.

A la figura podem veure quina és la diferència, entre un element inline representat per l’etiqueta <span> i un element block representat per l’etiqueta <div>, tot i que hi ha molts més elements possibles de cada tipus.

Figura Elements block i inline

Atributs genèrics

Les etiquetes poden tenir atributs que acaben de definir l’element. Hi ha una sèrie d’atributs comuns a la majoria d’elements:

  • Atributs globals
  • Atributs de llenguatge
  • Atributs d’esdeveniment (event)

Atributs globals

Els atributs globals són atributs genèrics. Són principalment els següents:

  • id: identifica l’element. No hi poden haver dos elements en un mateix document amb el mateix id.
  • class: serveix per associar un element a una classe. Més d’un element pot ser anomenat amb la mateixa classe. Ens és molt útil a l’hora de definir els estils d’una pàgina, ja que podem especificar característiques comunes a tots els elements que pertanyin a la mateixa classe.
  • style: s’usa per definir l’estil de l’element.
  • title: s’usa per posar un text amb una informació breu de l’element. Molts navegadors mostren aquest text quan es passa per damunt de l’element.

Tot i no ser objecte d’estudi en aquesta unitat, existeixen altres atributs globals com ara: acceskey, tabindex en totes les versions d’HTML i també contenteditable, contextmenu, data-*, draggable, dropzone, hidden, spellcheck i translate a la versió HTML5 que fem servir actualment.

Posem un exemple: imaginem que tenim un paràgraf que volem identificar amb la cadena descripcio, que pertany a la classe important i que volem que en passar-hi per sobre ens aparegui un text amb la frase Aquest paràgraf és molt important. El codi seria el següent: 

  1. <p id="descripcio" class="important" title="Aquest paràgraf és molt important"> Si passeu per sobre, us n'adonareu del contingut del títol del paràgraf!</p>

Atributs de llenguatge

Els atributs de llenguatge ens especifiquen diferents característiques de la llengua del text contingut a l’element. Són els següents:

  • lang: especifica la llengua del text contingut a l’element.
  • dir: especifica la direcció de lectura de la llengua del text contingut a l’element.

Per establir l’idioma en el qual està escrit tot el document, s’acostuma a posar en l’atribut lang de l’etiqueta <html>:

Per saber quins són els codis associats a cada llenguatge podem visitar w3schools

Si al document HTML volem indicar que està escrit en català farem el següent: 

  1. <html lang="ca">
  2. ...
  3. </html>

Igualment amb l’atribut dir, podem assignar-li tres possibles valors: <ltr>, <rtl> i <auto>, indicant si l’escriptura és d’esquerra a dreta, de dreta a esquerra o si deixem que el propi navegador detecti de quin tipus és respectivament. 

  1. <html dir="ltr">
  2. ...
  3. </html>

Atributs d'esdeveniment ('event')

Els atributs d’esdeveniment són atributs que associen una acció que es realitzarà quan es produeixi una determinada interacció de l’usuari cap a l’element que té aquest atribut. Aquests atributs són molt útils quan s’usen en combinació amb el llenguatge de programació JavaScript.

La quantitat d’esdeveniments disponibles és força elevada, i des de la versió HTML5 han augmentat significativament. Podem fer-ne una classificació en 8 grups:

  • Finestra (window events): relacionats amb tot allò que té a veure amb la finestra. Per exemple quan carreguem un document a la finestra del navegador o quan redimensionem la finestra, entre d’altres.
  • Formulari (form events): relacionats amb tots els camps que formin part d’un formulari. Per exemple quan entrem a un camp d’un formulari per començar a escriure o seleccionar/modificar un camp.
  • Teclat (keyboard events): relacionats amb el teclat. Per exemple quan cliquem a una tecla o l’alliberem, entre d’altres.
  • Ratolí (mouse events): relacionats amb el ratolí. Per exemple, moure’l, passar per sobre d’un element, clicar-lo, etc.
  • Portapapers (clipboard events): quan copiem, retallem o enganxem.
  • Mèdia (media events): relacionats amb tot el que té a veure amb imatges, vídeo o àudio.
  • Tàctils (touch events): tenen a veure amb la interacció d’un usuari amb pantalles tàctils, ja siguin per mòbil, tauleta o qualsevol tipus de pantalles tàctils.
  • Miscel·lània (altres): aquesta classificació agrupa aquells esdeveniments que no tenen cabuda a cap dels anteriors, per exemple quan es produeix un error en carregar un arxiu extern al document, si aquest hi fa referència.

Alguns dels més importants són els següents:

  • onclick: l’acció es produirà quan es faci un clic amb el ratolí damunt de l’element.
  • ondblclick: l’acció es produirà quan es faci doble clic amb el ratolí.
  • onmousedown: l’acció es produirà quan es premi el botó del ratolí.
  • onmouseup: l’acció es produirà quan es deixi de prémer el botó del ratolí.
  • onmouseover: l’acció es produirà quan estiguem amb el ratolí fora d’un element i el moguem de manera que passem a estar damunt de l’element.
  • onmousemove: l’acció es produirà quan es mogui el ratolí per damunt de l’element.
  • onmouseout: l’acció es produirà quan estiguem amb el ratolí damunt d’un element i el moguem de manera que deixem d’estar-hi al damunt.
  • onkeypress: l’acció es produirà quan es premi una tecla i es deixi anar damunt de l’element.
  • onkeydown: l’acció es produirà quan es premi una tecla damunt de l’element.
  • onkeyup: l’acció es produirà quan es deixi anar una tecla damunt de l’element.
  • ondrag: l’acció es produirà quan un element sigui arrossegat.
  • ondragend: quan un element hagi finalitzat el procés d’arrossegament.
  • ondragstart: quan un element comenci el procés d’arrossegament.
  • ondrop: quan un element arrossegat sigui alliberat.
  • onload: quan hagi finalitzat la càrrega d’una pàgina.
  • etc.

Tot i que l’estudi del llenguatge de programació JavaScript està fora de l’abast d’aquesta unitat, és interessant saber què volen dir aquests atributs. Per exemple, si tenim el següent fragment de codi: 

  1. <p onclick="obreFinestra()">Aquest és un paràgraf que ens permet obrir una finestra</p>

Hem d’interpretar que quan es faci un clic damunt d’aquest paràgraf, s’executarà una funció que, segons el seu nom, provocarà l’obertura d’una finestra.

Per veure un llistat ordenat segons els tipus i quantitat d’esdeveniments disponibles podeu visitar w3schools

Etiquetes de text

Marcar el text del document vol dir diferenciar les parts d’aquest text per tal de denotar-ne la major o menor importància, aclarir si una part de text és una citació, si hi volem fer més o menys èmfasi…

A continuació es detalla un resum de les etiquetes de text més importants:

  • Etiquetes corresponents a elements de bloc:
    • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: encapçalaments. El número denota el nivell de l’encapçalament, és a dir <h1> és l’encapçalament de primer nivell i <h6> l’encapçalament d’últim nivell.
    • <p>: paràgraf.
    • <br />: salt de línia.
    • <hr />: línia separadora.
    • <blockquote>: citació de tipus bloc.
    • <pre>: text preformatat.
    • <div>: capa. Es tracta d’una etiqueta de tipus bloc sense significat semàntic que ens servirà per agrupar text i/o d’altres elements.
    • <header>: encapçalament, no lligat a cap format i amb una clara orientació semàntica.
    • <aside>: element de bloc, que es posiciona al voltant normalment d’un altre.
    • <footer>: posicionat normalment al final de les pàgines.
    • <article>: determina que el contingut és un article, independentment dels elements continguts.
    • <section>: marca una secció.
  • Etiquetes corresponents a elements de línia:
    • <em>: text amb èmfasi.
    • <strong>: text amb molt èmfasi.
    • <q>: citació de tipus línia.
    • <cite>: font de la citació.
    • <abbr>: abreviació.
    • <code>: codi de programació.
    • <samp>: sortida d’un programa.
    • <kbd>: text introduït per un usuari.
    • <var>: variable o paràmetre d’un programa.
    • <span>: etiqueta de tipus línia sense significat semàntic que ens servirà per agrupar text i/o d’altres elements.

Paràgrafs

Entenem per paràgraf un conjunt de frases que estan relacionades entre si. Els paràgrafs són elements de tipus bloc i l’etiqueta que s’usa és l’etiqueta <p>.

Si, per exemple, tenim un paràgraf que ens explica què és el llenguatge HTML5, el marquem de la manera següent: 

  1. <p>HTML5 (acrònim Hyper Text Markup Language versió 5) és el llenguatge d'etiquetes que 
  2. fem servir a l'actualitat per l'elaboració de pàgines web, interpretables pels navegadors.
  3. </p>

Els encapçalaments

Els llenguatges d’etiquetes (X)HTML ens permeten crear sis nivells d’encapçalament amb les etiquetes <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. Tots aquests elements són de tipus bloc. L’objectiu del seus ús és la classificació dels continguts en títol o subtítols, o simplement la creació de diferents nivells de titulars.

A continuació veiem un fragment d’un document HTML5 en què ens expliquen diverses característiques d’aquest llenguatge d’etiquetes. Fixem-nos en les etiquetes d’encapçalament: 

  1. <h1>HTML5</h1>
  2.  
  3. <p>HTML5 és el llenguatge de marques més estès en l'actualitat, per l'elaboració de pàgines web mitjançant l'ús d'etiquetes i atributs que hi estan associats.
  4. </p>
  5.  
  6. <h2>Història</h2>
  7.  
  8. <p>El primer llenguatge HTML va ser escrit l'any 1993 pel físic Tim Berners-Lee i millorat posteriorment per Dave Raggett que el va anomenar HTML+. No va ser fins a 1995 que va sortir els primers treballs per l'elaboració d'un estàndard, anomenat HTML 2.0. Anys després gràcies a W3C van arribar a popularitzar durant molts anys la versió HTML4 per l'elaboració de pàgines web, i posteriorment es van incorporar millores gràcies a l'estàndard HTML5, que és la versió que fem servir en l'actualitat.</p>
  9.  
  10. <h2>Parts d'un document HTML</h2>
  11. <p> Podem dir que tot document HTML5 conté bàsicament dues parts: el head i el body, que tenen les seves respectives etiquetes associades.
  12. </p>
  13.  
  14. <h3>Head</h3>
  15.  
  16. <p>En aquesta part del document, fem les definicions i crides a altres fitxers, que no són visibles pels usuaris, a excepció del títol del document.</p>
  17.  
  18. <h3>Body</h3>
  19.  
  20. <p>En aquesta part, disposem de totes les etiquetes que volem que siguin visibles pels usuaris, i que determinen principalment l'estructura dels documents HTML vers els navegadors.</p>

En la figura podeu veure com es visualitzaria aquest exemple en un navegador. Fixem-nos que, normalment, els navegadors posen un estil per defecte a cadascuna de les etiquetes. Així doncs, el text marcat amb <h1> és més gran que el marcat amb <h2>, aquest és més gran que el marcat amb <h3> i així successivament.

Figura Exemples d’etiquetes d’encapçalament

Èmfasi

Quan volem posar èmfasi a una part de text perquè volem destacar-ne la importància, tenim a la nostra disposició dues etiquetes. L’etiqueta <em> serveix per donar èmfasi i l’etiqueta <strong> per donar molt d’èmfasi.

Imaginem que tenim un paràgraf del qual volem destacar algunes paraules: 

  1. <p>SVG és un estàndard per la creació de <em>gràfics vectorials bidimensionals</em> 
  2. basat en <strong>XML</strong> i que pot incorporar animacions amb l'ajuda de 
  3. <strong>SMIL.</strong></p>

Per defecte, la majoria de navegadors mostren el text marcat amb <em> en lletra cursiva i el text marcat amb <strong> amb lletra negreta, com es veu en la figura.

Figura Exemple d’etiquetes d’èmfasi

Dues etiquetes més que podem confondre fàcilment amb <strong> i <em>

Les etiquetes <b> (negreta) i <i> (cursiva) porten a vegades a confusió. Aquestes etiquetes defineixen directament l’estil del text que contenen, no el significat semàntic.

Per posar alguns exemples pràctics podríem dir que moltes vegades, per qüestió exclusivament estètica fem servir la negreta, per exemple a titulars o un logo o perquè volem que a un dispositiu mòbil es vegi millor el text. Això no té associat una finalitat semàntica d’èmfasi i per aquest motiu hauríem de fer servir l’etiqueta <b> en comptes de <strong>.

Passa el mateix amb les etiquetes <em>, que denoten que volem marcar un text amb èmfasi i <i>, que especifica que el text estigui en cursiva.

Heu de pensar també, que hi ha lectors de pantalla (screen readers) per a persones amb manca de visió, que no tenen en compte l’estètica però sí totes les qüestions relacionades amb l’èmfasi que l’autor d’un document vol destacar.

És recomanable fer ús d’<strong> i <em>, ja que hem d’intentar delegar l’estètica de la pàgina web al CSS en lloc de delegar-la a l’HTML, per aquest motiu millor fer un ús puntual de <b> i <i>.

Citacions

Quan volem fer referència a un text que no hem escrit nosaltres hem de fer servir les citacions. Tenim tres etiquetes diferents per descriure-les: <blockquote>, <q> i <cite>. El seu ús el podeu veure a la següent llista:

  • <blockquote>, si la citació és tot un paràgraf.
  • <q>, si la citació és enmig d’un element de bloc (per exemple, dins d’un paràgraf).
  • <cite>, ens serveix per marcar l’origen de la citació (l’autor de la citació, el títol…).

Posem un exemple d’ús d’aquestes etiquetes. Imaginem que estem fent un lloc web on volem posar una citació de l’escriptor Manuel de Pedrolo: 

  1. <p>
  2.    La frase <q>En cap moment no es pot dir <em>per 
  3.    sempre</em></q> de l'escriptor <cite>Manuel de Pedrolo</cite> 
  4.    apareix en el seu llibre <cite>Diari 1986</cite>. Aquí tenim 
  5.    la cita sencera:
  6. </p>
  7. <blockquote>
  8.    <p>
  9.       En cap moment no es pot dir <em>per sempre</em>. En canvi, 
  10.       sempre hi ha un moment en què cal dir <em>mai més</em>. 
  11.       Però: no és el mai més un per sempre? Tanmateix, el per 
  12.       sempre se situa en el temps, mentre el mai més és
  13.       intemporal.
  14.    </p>
  15. </blockquote>

Cal destacar que dins l’etiqueta <blockquote> no podem escriure text directament sinó que hem d’afegir una altra etiqueta de bloc (<p>, <div>…).

La figura ens mostra el text anterior interpretat per un navegador.

Figura Exemple d’etiquetes per a citacions

Salts de línia

Si volem forçar un salt de línia podem usar l’etiqueta <br>. No hem d’abusar d’aquesta etiqueta i només l’hem d’utilitzar en els casos necessaris. Per exemple, s’ha de forçar un salt de línia en cada vers d’un poema o bé en les línies d’una cançó. En canvi, no s’ha d’usar per simular paràgrafs ni per deixar més espai entre paràgrafs (això es podrà fer amb CSS).

Posem, per exemple, un fragment de la poesia de Joan Brossa, “Oda a Louis Armstrong”: 

  1. <p>
  2.  Col·locades les peces a cada banda<br>
  3.  del tauler, a les caselles negres,<br>
  4.  moc una peça endavant.<br>
  5.  El contrari en juga una de seva.<br>
  6. </p>

El navegador ens fa un salt de línia cada cop que troba l’etiqueta <br /> tal com podem veure en la figura.

Figura Exemple amb etiqueta per a salts de línia d’un poema de Joan Brossa

Separadors

Si volem posar un separador horitzontal podem usar l’etiqueta <hr />, que ens crea una barra horitzontal. Tot i això, com que ens és molt fàcil posar línies separadores amb CSS, aquesta etiqueta està caient en desús.

Abreviatures

Si en un text trobem una abreviatura també tenim l’etiqueta adequada per assenyalar-la que és <abbr>. Posem un exemple d’ús: 

  1. <p> El metallenguatge XML <abbr title="Extensible Markup Language">MB</abbr> 
  2. ens permet definir etiquetes pròpies. </p>

En la figura veiem com ens mostraria aquest text un navegador.

Figura Exemple de l’etiqueta abreviatura

Text preformatat

Si volem posar un fragment de text tal com està escrit en el fitxer de text HTML, hem d’usar l’etiqueta <pre> que ens indica que aquell fragment de text està preformatat. Aquesta etiqueta fa que tot allò que hi estigui contingut aparegui exactament igual en el navegador. És a dir, es respecten els espais, els salts de línia, etc.

Vegem, com a exemple, una estructura de directoris “dibuixada” mitjançant caràcters. El codi és el següent: 

  1.  <pre>
  2.   |--web
  3.   |   |--imatges
  4.   |   |    |--img1.png
  5.   |   |    |--img2.jpg
  6.   |   |    |--img3.gif
  7.   |   |    |...
  8.   |   |--videos
  9.   |   |    |--video1.mpg
  10.   |   |    |--video2.mpg
  11.   |   |    |...
  12.   |   |--audios
  13.   |   |    |--audio1.ogg
  14.   |   |    |--audio2.mp3
  15.   |   |    |...
  16.   |   |--javascript
  17.   |   |    |--llibreria1.js
  18.   |   |    |--codificacio.js
  19.   |   |--css
  20.   |   |    |--estil1.css
  21.   |   |    |--estil2.css  
  22.   |   |    |...
  23.   |   |--pagines
  24.   |   |    |--quisom.html
  25.   |   |    |--seccio1.html 
  26.   |   |    |--seccio2.html   
  27.   |   |    |--contacte.html   
  28.   |   |    |...
  29.   |   |--index.html
  30.   |   |...
  31.   </pre>

Aquest codi es visualitza com veiem en la figura.

Figura Exemple de text preformatat

Codi de programació

Si en una pàgina web volem incloure codi de programació, tenim diverses etiquetes que ens ajuden a formatar aquest codi. A continuació s’exposen aquestes etiquetes i l’ús que tenen:

  • <code>: ens serveix per marcar codi de programació en si.
  • <samp>: serveix per posar el text obtingut en la sortida d’un programa.
  • <kbd>: s’usa per dir a l’usuari què ha de teclejar.
  • <var>: serveix per marcar variables o paràmetres de programes.

Tots aquests elements són elements de línia.

En les línies de codi següents, que són un exemple de codificació amb JavaScript, podem veure com es poden usar les etiquetes descrites: 

  1. <p>En prémer el botó ens apareixerà el text <samp>Introdueix el teu nom:</samp></p>
  2.  
  3. <p>La línia de codi <codi>var <var>nom</var> = prompt("Introdueix el teu nom:","");</codi>
  4. fa que l'aplicació web ens demani el nostre nom i el desa a la variable <var>nom</var>.</p>
  5.  
  6. <p>Recordeu que per tancar la finestra podem usar la combinació de tecles <kbd>Alt</kbd> + 
  7. <kbd>F4</kbd></p>

Aquest codi el podem veure en un navegador tal com es mostra en la figura.

Figura Exemple amb etiquetes per representar codi de programació

Etiquetes sense atributs semàntics

Hi ha dues etiquetes que no tenen un significat semàntic concret. Això ens serveix per delimitar un tros de text o dades que no s’adeqüen a cap de les etiquetes existents.

Per crear un element de bloc genèric usem l’etiqueta <div> i per crear un element de línia genèric usem l’etiqueta <span>.

Divitis

Amb el pas del temps, cada cop s’ha fet més ús de l’etiqueta <div> per tal de maquetar pàgines web. Aquest fenomen s’anomena a vegades divitis, i fa referència a l’abús d’aquesta etiqueta. La nova versió d’HTML, l’HTML5, incorpora noves etiquetes per establir la capçalera i peus de pàgina de la web, el menú, les seccions… Això ens permetrà no haver d’usar tantes etiquetes <div>.

L’etiqueta <div> ha estat, i és, especialment útil a vegades per maquetar o fer el layout d’un document, és a dir, crear àrees d’agrupacions de contingut per donar-li estructura a un document o bé una estètica concreta amb l’ajuda de CSS a tota l’agrupació.

Actualment <div> és fa servir moltíssim, però altres etiquetes d’HTML5 han substituït part del seu ús, amb funcions similars a la que afegeixen una orientació semàntica al contingut. Aquestes etiquetes les veurem detalladament en altres apartats, però un exemple il·lustratiu seria per exemple l’etiqueta <footer>, que serveix per crear el peu del document, ja que és un element bloc com el <div>, però ens informa alhora que la ubicació d’aquest bloc és a la part inferior de la pàgina.

També heu de pensar que pels cercadors de contingut (Google, Yahoo, etc.) aquesta informació semàntica és molt útil per filtrar contingut.

En l’exemple següent observem l’ús de l’etiqueta <div> per a la creació de diverses capes ubicades a diferents àrees del document visible per l’usuari: la capçalera, la barra lateral, el cos de la web i el peu de pàgina. 

  1. <div id="capcalera">
  2. <!--  contingut de la capçalera  (logo, títol, navegació interna...)-->
  3. </div>
  4.  
  5. <div id="lateral">
  6. <!-- contingut del menú lateral (enllaços d'interès, informació...) -->
  7. </div>
  8.  
  9. <div id="contingut">
  10. <!-- contingut (el contingut de la pàgina) -->
  11. </div>
  12.  
  13. <div id="peu">
  14. <!--  contingut del peu de pàgina  (informació sobre drets d'autoria, crèdits, aspectes 
  15. legals)-->
  16. </div>

Heu de pensar que gràcies a aquesta estructura, un cop haguem incorporat l’ús de CSS, podrem maquetar la pàgina web al nostre gust, però és molt aconsellable no assignar noms als id’s que indiquin una posició exacta, ja que actualment les pàgines modifiquen les posicions dels blocs en funció de la pantalla amb la qual les consultem, és a dir, no és el mateix un disseny per veure amb mòbil, o amb una tauleta, o amb un ordinador; és el que s’anomena disseny adaptatiu o responsive web design (RWD) en anglès.

Etiquetes estructurals

Moltes pàgines web disposen d’una estructura similar o tenen àrees molt diferenciades: tenen una capçalera, un menú de navegació, un cos on va el gruix de la informació, articles, seccions amb informació concreta i un peu de pàgina. Així doncs, quan maquetem una web podem dividir-la en diferents seccions. A més, moltes webs estan conformades principalment d’articles com, per exemple, els blogs, els diaris o portals d’informació.

Blogs

Un blog (en anglès, blog) o bitàcola, és una pàgina web que actua com a diari personal. Els blogs estan dissenyats perquè cada article tingui data de publicació i l’article més nou aparegui el primer.

  • Logotip típic per a la sindicació web
  • Logotip típic per a la sindicació web

En les versions anteriors d’(X)HTML, en no haver-hi etiquetes específiques per designar tots aquests apartats dels llocs web, s’acabava usant l’etiqueta genèrica <div> amb un identificador que definia aquella capa de la pàgina. També s’usaven altres estratègies com la maquetació amb taules o marcs, estratègies que actualment s’han quedat obsoletes per la seva poca flexibilitat.

HTML5 inclou diverses etiquetes que solucionen aquest problema. Les veiem llistades a continuació:

  • <section>: secció genèrica del document que agrupa contingut similar.
  • <header>: capçalera d’un document o secció.
  • <footer>: peu d’un document o secció.
  • <nav>: un bloc de navegació.
  • <article>: especifica un article: una notícia, article d’un blog… Se suposa que pot ser distribuït de manera independent, per exemple per a la sindicació de continguts.
  • <aside>: relacionat amb una àrea que envolta altre contingut d’un mateix element contenidor.

Sindicació web

La sindicació web és una tècnica que permet que els articles d’un lloc web estiguin disponibles des d’un altre lloc web.

Posem a continuació un exemple de maquetació d’una web amb dues columnes, capçalera, peu de pàgina, barra de navegació i uns quants articles.

Vegem primer com es podria fer amb HTML5 i divs: 

  1. <!DOCTYPE html>
  2. <head>
  3.    <title>Títol de la web</title>
  4.    <meta charset=utf-8">
  5. </head>
  6. <body>
  7.    <div id="cap">
  8.     ...
  9.    </div>
  10.    <div id="menu">
  11.    ...
  12.    </div>
  13.    <div id="lateral">
  14.    ...
  15.    </div>
  16.    <div id="cos">
  17.       <div id="article1">
  18.       ...
  19.       </div>
  20.       <div id="article2">
  21.       ...
  22.       </div>
  23.     </div>
  24.     <div id="peu">
  25.       ...
  26.     </div>
  27. </body>
  28. </html>

Vegem ara com podríem codificar aquest mateix document usant algunes les etiquetes estructurals d’HTML5: 

  1. <!DOCTYPE html>
  2. <head>
  3.    <meta charset=utf-8">
  4.    <title>Títol de la web</title>
  5. </head>
  6. <body>
  7.    <header>
  8.    ...
  9.    </header>
  10.    <nav>
  11.    ...
  12.    </nav>
  13.    <aside>
  14.    ...
  15.    </aside>
  16.    <section>
  17.       <article>
  18.       ...
  19.       </article>
  20.       <article>
  21.       ...
  22.       </article>
  23.    </section>
  24.    <footer>
  25.    ...
  26.    </footer> 
  27. </body>
  28. </html>

Enllaços

L’èxit de la WWW (World Wide Web) és el fet de poder “navegar”, és a dir, de poder saltar d’un document a un altre a partir d’enllaços. Aquesta manera de navegar va ser revolucionària ja que als documents impresos, la lectura i ordenació dels continguts és vertical, mentre que els enllaços permeten en tot moment saltar d’un contingut a l’altre, i no necessàriament s’ha de donar una lectura vertical, i afegir contingut relacionat en qualsevol moment. El sistema que ens permet aquesta navegació s’anomena hipertext.

Destins dels enllaços

El destí d’un enllaç no ha de ser sempre un altre document (X)HTML. Pot ser una imatge, un fitxer de so, un fitxer de vídeo…

L'hipertext

“L’hipertext és un sistema d’organització i presentació de dades que permet a l’usuari de moure’s amb gran facilitat entre ítems relacionats.”

Gran Diccionari de la llengua catalana, Gran Enciclopèdia Catalana

L’etiqueta que té HTML per crear hiperenllaços és l’etiqueta <a>. Els elements <a> són elements de línia, ja que podem posar enllaços envoltats de text.

Per indicar quin és el destí del nostre enllaç usem l’atribut href. També és convenient usar l’atribut genèric de tipus global title per posar una breu descripció de l’enllaç.

Enllaços a pàgines externes

Si volem fer un enllaç a una pàgina externa a la nostra aplicació web hem de saber l’URL complet del document al qual volem fer l’enllaç.

Imaginem que volem fer un enllaç a un article que es pot trobar a l’URL http://www.creativebloq.com/web-design/10-top-html5-resources-413919, però que el text que volem que aparegui en el navegador és simplement “Recursos HTML5”. El codi que hem d’introduir és el següent: 

  1. <p><a href="http://www.creativebloq.com/web-design/10-top-html5-resources-413919" title="Article HTML 5">Recursos HTML5
  2. 5</a></p>

La majoria de navegadors ens mostraran l’enllaç anterior de color blau i subratllat. A més, quan ens hi posem a sobre apareixerà el text que haguem posat en l’atribut title.

Enllaços a pàgines locals

Si l’enllaç que volem fer està dirigit a un document HTML local, és a dir, a un document que pertany a la mateixa aplicació web, posem, com a valor de l’atribut href, el camí relatiu al fitxer al qual volem fer l’enllaç.

Com a exemple, imaginem que estem codificant un fitxer de nom index.html, que és la pàgina d’inici del portal o aplicació, en el qual tenim un menú amb diferents enllaços que van a les diferents seccions del lloc web. Aquí teniu el fragment de codi del fitxer index.html: 

  1. <nav>
  2. <a href="index.html" title="Tornar a la pàgina d'inici">Inici</a>
  3. <a href="seccions/fotos.html" title="Fotos de la web">Veure les fotos</a> 
  4. <a href="seccions/activitats.html" title="Activitats actuals">Activitats</a>
  5. <a href="seccions/projectes.html" title="Projectes actuals">Projectes</a>
  6. <a href="contacte.html" title="Formulari de contacte">Contacte</a>
  7. </nav>

En aquest exemple estem suposant que els fitxers de l’aplicació estan organitzats amb la següent estructura de directoris: 

|--web
    |--seccions
    |    |--fotos.html
    |    |--activitats.html
    |    |--projectes.html
    |
    |--index.html
    |--contacte.html

La gran majoria de navegadors visualitzarien el codi anterior com es reflecteix en la figura. A més, a la majoria de navegadors podem veure l’URL destí a la barra d’estat del navegador quan ens situem damunt de l’enllaç.

Figura Exemple d’enllaç a pàgines locals

Àncores

Alguns documents HTML són molt extensos i ens pot interessar navegar dins la mateixa pàgina. Per poder fer això hem de fer servir l’atribut global id de les etiquetes per forçar els punts on volem anar, i posteriorment crear enllaços que hi apuntin, que posicionaran la pàgina en el lloc concret quan hi cliquem.

Els punts on volem anar s’anomenen àncores. Si, per exemple, volem fer una àncora a un element <h2> hem d’escriure el codi següent: 

  1. <h2 id="seccio1">Secció 1</h2>

Un cop tenim feta l’àncora, hi podem enllaçar des de qualsevol punt del text fent un enllaç a l’àncora. Els enllaços a àncores es caracteritzen perquè el destí es denota amb el valor de l’atribut id de l’element al qual volem enllaçar precedit del caràcter #. Si volem enllaçar a l’àncora creada en l’exemple anterior, escriurem el codi següent: 

  1. <a href="#seccio1" title="Secció 1">Anar a la secció 1</a>

Imaginem ara un text molt llarg amb diferents seccions. Per tenir una bona navegabilitat podem crear un petit índex a l’inici del document que tingui enllaços cap a les diferents parts del document. A més, també podem fer enllaços que ens condueixin a l’inici del document: 

  1. <h1 id="dalt">Seccions</h1>
  2.  
  3. <div id="menu"> 
  4.    <a href="#seccio1" title="Secció 1">Anar a la secció 1</a> 
  5.    <a href="#seccio2" title="Secció 2">Anar a la secció 2</a> 
  6.    <a href="#seccio3" title="Secció 3">Anar a la secció 3</a>
  7. </div>
  8.  
  9. <h2 id="seccio1">Secció 1</h2>
  10. <p>...</p>
  11. <p><a href="#dalt" title="A dalt">Anar a dalt</a></p>
  12.  
  13. <h2 id="seccio2">Secció 2</h2>
  14. <p>...</p>
  15. <p><a href="#dalt" title="A dalt">Anar a dalt</a></p>
  16.  
  17. <h2 id="seccio3">Secció 3</h2>
  18. <p>...</p>
  19. <p><a href="#dalt" title="A dalt">Anar a dalt</a></p>

Si el que volem és enllaçar a una àncora des d’un altre document podem fer el següent: 

  1. <a href="seccions.html#seccio1" title="Secció 1">Anar a la secció 1</a>

Imatges

Les imatges són un recurs molt utilitzat en el desenvolupament web. A part de fer més atractiva la nostra aplicació, ens permeten donar informació d’una manera visual.

Tot i això, hem de vigilar de no abusar de posar massa imatges: hem d’anar amb cura tant amb el nombre d’imatges, com amb el pes i mida d’aquestes imatges.

El pes d’aquestes imatges pot fer que la navegació per la nostra aplicació sigui massa lenta, ja que s’ha de descarregar al navegador per tal que sigui visible. Per aquest motiu es recomana:

  • Fer servir imatges comprimides amb JPEG, PNG, GIF, etc. per tal de reduir els temps de descàrrega.
  • Ajustar la grandària de les imatges per tal que s’ajusti a la pàgina prèviament a introduir-les a la maquetació, i evitar fer servir els seus atributs (width o height) per reduir-ne la grandària.

L’etiqueta que ens serveix per inserir una imatge és l’etiqueta <img>. Es tracta d’un element de línia que no té etiqueta de tancament: es tanca en ella mateixa.

L’atribut src ens servirà per dir on està ubicada la imatge: podem posar un URL extern o el camí del fitxer, si disposem de la imatge localment. També usarem l’atribut alt, que ens servirà per posar un text alternatiu, en el cas que el navegador no pogués mostrar o accedir a la nostra imatge. Aquest atribut també és útil pels screen readers, és a dir, software llegeix les planes web i les textualitza per tal de ser escoltades per persones amb dèficit visual.

Si, per exemple, volem inserir una imatge que tenim al directori de nom imatges que es diu logo.png i, si no es pot visualitzar aquesta imatge, volem que surti el text “Logo de la web”, hem d’escriure el codi següent: 

  1. <img src="imatges/logo.png" alt="Logo de la web" />

En el cas que vulguem que una imatge sigui un enllaç, haurem d’enviar correctament les etiquetes <a> i <img>. Per exemple, si volem incorporar el logotip del W3C per destacar que la nostra pàgina ha passat el nivell de conformitat d’accessibilitat AA i, a més, volem enllaçar aquesta imatge cap al validador en línia que ens ofereix el W3C (i així mostrar que realment el nostre document és vàlid), posarem el codi següent: 

  1. <a href="http://www.w3.org/WAI/WCAG2AA-Conformance" title="Explanation of WCAG 2.0 Level Double-A Conformance">
  2.  <img height="32" width="88" 
  3.  src="http://www.w3.org/WAI/wcag2AA"
  4.  alt="Level Double-A conformance, 
  5.  W3C WAI Web Content Accessibility Guidelines 2.0">
  6. </a>

En la figura podem veure com es veu el codi anterior en el navegador.

Els nivells de conformitat d’Accessibilitat es fonamenten en la valoració d’uns indicadors regulats pel W3C, que determinen quin nivell d’assoliment de conformitat compleix una pàgina web dels tres que existeixen A, AA i AAA. Un nivell superior (AAA) indica que és una pàgina molt més accessible per a tothom.

Figura Exemple d’imatge amb enllaç

Panell de dibuix o llenç

HTML5 incorpora una etiqueta que ha revolucionat el món web: es tracta de l’etiqueta <canvas>. Aquesta etiqueta defineix un panell de dibuix o llenç. Si la combinem amb l’ús del llenguatge de programació JavaScript, es poden aconseguir efectes fascinants, tant dibuixant com animant. Ara bé, sense usar JavaScript no podem treure gaire partit d’aquesta etiqueta.

Vegem un exemple, usant una mica de JavaScript:

No és l’objectiu d’aquest curs aprendre JavaScript. El codi aquí mostrat només és a tall d’exemple. Un molt bon portal per aprendre a dibuixar formes bàsiques, el trobareu als desenvolupadors de Mozilla 

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>.:: Càmera amb Canvas</title>
  6. </head>
  7. <body>
  8. <canvas id="canvas">
  9.   El teu navegador no suporta l'etiqueta &lt;canvas&gt;.
  10. </canvas>
  11.     <script>
  12. var canvas = document.getElementById('canvas');
  13. var ctx = canvas.getContext('2d');
  14.  
  15. canvas.width = 700;
  16. canvas.height = 500;
  17.  
  18. // fons
  19. ctx.fillRect(0, 0, canvas.width, canvas.height);
  20.  
  21. // Quadrat central
  22. ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
  23. ctx.fillRect(200, 200, 250, 150);
  24.  
  25. //Triangle        
  26. ctx.beginPath();
  27. ctx.moveTo(450,270);
  28. ctx.lineTo(540,320);
  29. ctx.lineTo(540,220);
  30. ctx.fillStyle = 'rgb(255, 255, 0)';
  31. ctx.fill();        
  32.  
  33. // cercle gran
  34. ctx.beginPath();
  35. ctx.arc(240, 140, 60, 0, (Math.PI/180)*360, false);
  36. ctx.fillStyle = 'rgb(255, 255, 0)';
  37. ctx.fill();
  38.  
  39. // cercle petit
  40. ctx.beginPath();
  41. ctx.arc(370, 160, 40, 0, (Math.PI/180)*360, false);
  42. ctx.fillStyle = 'rgb(255, 255, 0)';
  43. ctx.fill();    
  44.  
  45.     </script>
  46. </body>
  47. </html>

Veiem en la figura el resultat del nostre codi tal com es veuria en el navegador.

Figura Una imatge iconogràfica d’una càmera feta amb el llenç d’HTML5 i JavaScript

L’exemple aquí mostrat és extremadament simple. S’ha de tenir en compte que amb aquesta etiqueta i JavaScript més avançat es poden arribar a fer animacions espectaculars.

Àudio

Per reproduir so usarem l’etiqueta <audio>, que permet la reproducció de fitxers de so, i que tenim disponible exclusivament a HTML5. Els atributs més rellevants són:

  • autoplay: si l’activem posant autoplay=“autoplay”, el so començarà a sonar un cop el fitxer s’hagi carregat.
  • controls: si l’activem posant controls=“controls”, es mostraran uns controladors a l’usuari (per engegar l’àudio, pausar-lo, canviar el volum…)
  • loop: si l’activem posant loop=“loop”, un cop acabat de reproduir el so, tornarà a començar.
  • src: especifica on és el fitxer d’àudio que volem reproduir. Si volem que el navegador tingui diverses alternatives, és millor usar l’etiqueta <source>, que anirà dins de l’etiqueta <audio>.

L’etiqueta <source> s’insereix dins l’etiqueta <audio> i ens serveix per donar diverses alternatives de format de fitxer al navegador, ja que no tots els navegadors suporten tots els formats. Així, si el navegador no suporta un format d’àudio, en podrà escollir un altre. A la taula es mostren les compatibilitats per diversos navegadors i formats d’àudio.

Taula: Taula de compatibilitats navegadors i formats d’àudio
Navegador MP3 Wav Ogg
FirefoxSuportatSuportatSuportat
ChromeSuportatSuportatSuportat
OperaSuportatSuportatSuportat
SafariSuportatSuportatNo suportat
Internet ExplorerSuportat No suportat No suportat
Navegadors i formats d'àudio.

Imaginem que volem reproduir un enregistrament d’àudio en una web en format .ogg. Per si el navegador de l’usuari no pot reproduir “.ogg”, volem oferir també el format “.mp3” . A més, volem que l’enregistrament es reprodueixi indefinidament i volem que l’usuari disposi dels controls per pausar o posar en marxa l’àudio. Si els fitxers són enregistrament_audio.ogg i enregistrament_audio.mp3, el codi seria el següent:

Per convertir formats d’àudio i fins i tot manipular àudio, existeix programari exclusiu. Un dels més estesos és Audacity. 

  1. <audio controls autoplay loop>
  2.   <source src="enregistrament_audio.ogg" type="audio/ogg">
  3.   <source src="enregistrament_audio.mp3" type="audio/mpeg">
  4. El teu navegador no suporta l'etiqueta d'àudio.
  5. </audio>

En aquest cas, el navegador intentaria reproduir el fitxer enregistrament_audio.ogg i si no pogués reproduiria enregistrament_audio.mp3. Si no suportés aquesta etiqueta donaria el missatge d’error a l’usuari.

El resultat de l’ús d’aquesta etiqueta, és el que mostra la figura, tot i que depenent del navegador l’estètica del reproductor pot variar.

Figura Reproducció d’àudio amb l’etiqueta <audio>

Igualment l’etiqueta <audio> es pot combinar amb codi JavaScript per tenir un millor control i donar-li molts més usos, per exemple a l’hora de fer llistes de reproducció o jocs.

Vídeo

De la mateixa manera que amb l’àudio, tenim l’etiqueta <video>, per reproduir vídeo en HTML5. Els atributs més rellevants són:

  • autoplay: si l’activem posant autoplay=“autoplay”, el vídeo es començarà a reproduir un cop s’hagi carregat.
  • controls: si l’activem posant controls=“controls”, es mostraran uns controladors a l’usuari (per començar a reproduir el vídeo, pausar-lo, canviar el volum…)
  • loop: si l’activem posant loop=“loop”, un cop acabat de reproduir el vídeo, tornarà a començar.
  • src: especifica on és el fitxer de vídeo que volem reproduir. Si volem que el navegador tingui diverses alternatives, és millor usar l’etiqueta <source>, que anirà dins de l’etiqueta <video>.
  • height i witdh: especifiquen respectivament l’alçada i l’amplada en píxels del reproductor de vídeo.
  • muted: si l’activem posant muted=“muted”, el vídeo no tindrà so.
  • poster: serveix per posar la URL d’una imatge mentre el vídeo es descarrega o fins que l’usuari premi el botó d’inici de reproducció.

L’etiqueta <source> actua igual que en l’etiqueta <audio>: s’insereix dins l’etiqueta <video> per tal de donar diverses alternatives de format al navegador, ja que no tots els navegadors són capaços de reproduir tots els formats de vídeo disponibles. A la taula teniu una llista de compatibilitats:

Taula: Taula de compatibilitats navegadors i formats de vídeo
Navegador MP4 WebM Ogg
FirefoxDarreres versionsSuportatSuportat
ChromeSuportatSuportatSuportat
OperaDarreres versionsSuportatSuportat
SafariSuportatNo suportatNo suportat
Internet ExplorerSuportat No suportat No suportat
Navegadors i formats de vídeo.

Vegem un exemple d’inserció d’un vídeo amb aquesta etiqueta: 

  1. <video width="500" height="500" controls="controls">
  2.    <source src="media/anunci.ogv" type="video/ogg" />
  3.    <source src="media/anunci.mp4" type="video/mp4" />
  4.    El teu navegador no té suport per a l'etiqueta de vídeo.
  5. </video>

Llistes

Les llistes són el recurs que ens serveix per fer una enumeració. Hi ha tres tipus de llista: les llistes ordenades, les llistes desordenades i les llistes de definició.

Tot i que inicialment, les llistes ordenades <ol> i desordenades <ul> són molt diferenciades, des de CSS podem modificar l’estètica i arribar a obtenir el mateix aspecte.

Llistes ordenades

Les llistes ordenades són les llistes en què necessitem que els elements estiguin numerats. Per marcar l’inici i el final de la llista usem l’etiqueta <ol> (ordered list) i per marcar cada element de la llista usem l’etiqueta <li> (list item).

Imaginem que estem fent una recepta de cuina i volem enumerar els passos que hem de seguir. El codi seria el següent: 

  1. <h2>Preparació</h2>
  2. <ol>
  3.   <li>Batre els ous</li>
  4.   <li>Escalfar l'oli en una paella</li>
  5.   <li>Tirar els ous batuts a la paella</li>
  6.   <li>Embolicar la truita</li>
  7. </ol>

En la figura podem veure la visualització de l’exemple en un navegador, juntament amb una llista ordenada.

Figura Exemple de llista ordenada

Llistes desordenades

Les llistes desordenades són les llistes en què no necessitem que els elements estiguin numerats, és a dir, no cal tenir en compte l’ordre de l’enumeració. Per marcar l’inici i el final de la llista usem l’etiqueta <ul> (unordered list) i per marcar cada element de la llista usem l’etiqueta<li> (list item).

Si, per exemple, volem llistar tots els ingredients necessaris per fer una truita a la francesa, ho codifiquem de la manera següent: 

  1. <h2>Ingredients</h2>
  2. <ul>
  3.   <li>Ous</li>
  4.   <li>Sal</li>
  5.   <li>Oli</li>
  6. </ul>

En la figura podem veure la visualització d’aquesta llista no numerada.

Figura Exemple de llista no ordenada

Llistes de definició

Les llistes de definició es caracteritzen per ser una enumeració de definicions de termes. Per tant, els ítems de les llistes de definició estan formats per dos elements: el terme i la definició d’aquest terme. Per marcar l’inici i el final de la llista usem l’etiqueta <dl> (definition list); per a cadascun dels termes s’usa l’etiqueta <dt> (definition term), i per a cadascuna de les definicions s’usa l’etiqueta <dd> (definition description).

Si per exemple volguéssim definir els termes HTML, CSS i JavaScript, podem usar aquest tipus de llistes, que es visualitzen com mostra la figura. 

  1. <dl>
  2.   <dt>HTML</dt>
  3.   <dd>Llenguatge de marques dissenyat per estructurar textos i relacionar-los en forma 
  4. d'hipertext.</dd>
  5.  
  6.   <dt>CSS</dt>
  7.   <dd>Llenguatge creat per definir l'aspecte de documents estructurats amb HTML principalment.</dd>
  8.  
  9.   <dt>JavaScript</dt>
  10.   <dd>Llenguatge de programació interpretat, que fem servir principalment al navegador, per donar més dinamisme als documents HTML.</dd>
  11. </dl>
Figura Llista de definició

Enniuament de llistes

Si volem fer llistes complexes, és a dir, inserir llistes dins d’altres llistes, també podem fer-ho. Només hem de vigilar d’obrir i tancar les etiquetes correctament: si volem encapsular una llista, ja sigui numerada o no numerada. Aquesta llista ha de ser dins d’un ítem (<li>) de la llista mare.

Com a exemple, podem pensar els passos per la realització d’un disseny web de l’entorn client: 

  1. <h1>Fases en la realització d'un disseny web.</h1>
  2.  <ol>
  3.  <li>Realització de l'esbós.</li>
  4.  <li>Realització del prototip.
  5.   <ol>
  6.    <li>Escollir eines de disseny.
  7.     <ul>
  8.      <li>Eina de creació tipogràfica</li>
  9.      <li>Eina de creació de l'esquema de colors</li>
  10.      <li>Eina de dibuix</li>
  11.     </ul>
  12.    </li>
  13.    <li>Creació de la guia d'estil.</li>
  14.   </ol>  
  15.  </li>
  16.  <li>Realització del layout.
  17.   <ul>
  18.    <li>Elecció llenguatges.</li>
  19.    <li>Proves a diferents navegadors.</li>
  20.    <li>Proves a diferents resolucions.</li>
  21.   </ul>
  22.  </li>
  23.  <li>Entrega de les plantilles al client.</li>
  24. </ol>

Aquest exemple es veuria com es mostra en la figura.

Figura Exemple d’enniaument de llistes

Taules

Les taules són un recurs que ens permet mostrar informació tabulada en files i columnes.

Antigament molts llocs web feien servir les taules per maquetar la seva estructura, és a dir, si per exemple, la web té un menú lateral i un cos, es codifica una taula de dues columnes i es posa el contingut de la web en les cel·les d’aquesta taula. Actualment no és treballa així, i hem d’evitar aquesta pràctica, ja que complica el codi innecessàriament, i dóna poca flexibilitat a l’hora de redistribuir columnes en dissenys per mòbils o tauletes, és a dir, no es pot fer una web adaptativa.

Per maquetar actualment hem de fer ús dels elements <div> conjuntament amb fulls d’estils CSS, o elements estructurals i semàntics com ja hem vist a apartats anteriors. Podem usar etiquetes com ara, <header>, <footer>, <section>, <aside>, etc.

L’ús de taules té molta utilitat quan és per presentar informació tal com ho faríem amb full de càlcul; taules que acompanyen informació estadística, llistes de resultats, llistats comparatius, enumeració tabulada, etc.

Hem de restringir, doncs, l’ús de les taules a la informació tabular. A continuació, enumerem les etiquetes bàsiques per fer taules:

  • <table>: estableix on comença i on acaba una taula. Els seus atributs són:
    • summary: petit resum del propòsit de la taula.
    • width: amplada de la taula.
    • border: indica la mida de la vora de la taula.
    • cellpadding: indica l’espai entre les vores de la cel·la fins al contingut de la cel·la.
    • cellspacing: indica l’espai entre cel·les.
  • <caption>: títol associat a la taula.
  • <tr>: estableix on comencen i acaben cadascuna de les files d’una taula. Els seus atributs són:
    • align: alineació horitzontal.
    • valign: alineació vertical.
  • <td>: estableix on comencen i acaben cadascuna de les cel·les d’una fila. Els seus atributs són:
    • rowspan: nombre de files d’expansió.
    • colspan: nombre de columnes d’expansió.
  • <th>: cel·la de capçalera. Té els mateixos atributs que l’etiqueta <td>.
  • <thead>: ens permet agrupar les diferents files de la taula que formen la capçalera d’aquesta taula. Els seus atributs són:
    • align: alineació horitzontal.
    • valign: alineació vertical.
  • <tfoot>: ens permet agrupar les diferents files de la taula que en formen el peu. Té els mateixos atributs que l’etiqueta <thead>.
  • <tbody>: ens permet fer diferents agrupacions de files de la taula. Té els mateixos atributs que l’etiqueta <thead>.

Per crear una taula, hem de marcar l’inici i el final amb l’etiqueta <table>. Dins d’aquest element hem de posar tants elements <tr> com files tingui la taula. Finalment, dins de cada element <tr> hem de posar tants elements <td> com columnes tingui la taula. Si les cel·les són cel·les de capçalera, és a dir, tenen certa rellevància, en lloc de posar l’etiqueta <td> posem l’etiqueta <th>.

De vegades voldrem agrupar les files en grups, per denotar quines files formen la capçalera de la taula, quines el peu i si hi ha diferents agrupacions en les files que conformen el cos de la taula. Per tal de fer això, usem les etiquetes <thead>, <tfoot> i <tbody>, respectivament.

Grups de columnes

Igual que podem fer agrupacions de files d’una taula, també es poden agrupar les columnes d’una taula usant les etiquetes <colgroup> i <col>. Podeu trobar més informació de com fer-ho a http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4

Imaginem que volem fer una taula de 7 files i 2 columnes. La primera fila és la capçalera de la taula; les cinc següents conformen el cos de la taula, i l’última és el peu. Tindrem el codi següent, el resultat del qual es pot veure en la figura: 

  1. <table border="1">
  2.  <thead>
  3.   <tr>
  4.    <th>Alumne</th>
  5.    <th>Nota</th>
  6.   </tr>
  7.  </thead>
  8.  <tfoot>
  9.   <tr>
  10.    <th>Mitjana</th>
  11.    <th>5</th>
  12.   </tr>
  13.  </tfoot>
  14.  <tbody>
  15.   <tr>
  16.    <td>Albert Pàmies</td>
  17.    <td>3</td>
  18.   </tr>
  19.   <tr>
  20.    <td>Sara Ortega</td>
  21.    <td>10</td>
  22.   </tr>
  23.   <tr>
  24.    <td>José González</td>
  25.    <td>6,5</td>
  26.   </tr>
  27.   <tr>
  28.    <td>Laia Nieto</td>
  29.    <td>4,5</td>
  30.   </tr>
  31.   <tr>
  32.    <td>Raúl Valverde</td>
  33.    <td>6</td>
  34.   </tr>
  35.  </tbody>
  36. </table>
Figura Taula simple

Observem que, en el codi, la fila que fa de peu de taula es pot escriure abans que les que fan de cos, ja que el navegador ja sap que és el peu, atès que està marcat amb l’etiqueta <tfoot>.

Expansió de files i columnes

Les taules simples ens permeten fer una quadrícula de x files i y columnes, però ens podem trobar amb la necessitat de voler fusionar cel·les tan horitzontalment com verticalment. Per aconseguir aquest objectiu l’etiqueta <td> disposa de dos atributs: colspan i rowspan.

L’atribut colspan serveix per fusionar dues o més cel·les horitzontalment. L’atribut es posa a la cel·la que ha d’ocupar més d’una columna i se li dóna com a valor el nombre de columnes que ha d’ocupar.

L’atribut rowspan serveix per fusionar dues o més cel·les verticalment. L’atribut es posa a la cel·la que ha d’ocupar més d’una fila i se li dóna com a valor el nombre de files que ha d’ocupar.

Imaginem que volem posar l’horari escolar que es veu en la figura. Per aconseguir-ho hem d’escriure el codi següent: 

  1. <table border="1">
  2.  <caption>Horari</caption>
  3.  <thead>
  4.   <tr>
  5.    <th>&nbsp;</th>
  6.    <th>Dilluns</th>
  7.    <th>Dimarts</th>
  8.    <th>Dimecres</th>
  9.    <th>Dijous</th>
  10.    <th>Divendres</th>
  11.   </tr>
  12.  </thead>
  13.  <tbody>
  14.   <tr>
  15.    <td>16.00-16.55</td>
  16.    <td rowspan="2">Bases de dades</td>
  17.    <td rowspan="2">Xarxes</td>
  18.    <td rowspan="2">Programació Estructurada</td>
  19.    <td>Xarxes</td>
  20.    <td>Bases de dades</td>
  21.   </tr>
  22.   <tr>
  23.    <td>16.55-17.50</td>
  24.    <td rowspan="2">Sistemes Operatius</td>
  25.    <td rowspan="2">Xarxes</td>
  26.   </tr>
  27.   <tr>
  28.    <td>17.50-18.45</td>
  29.    <td>Programació Estructurada</td>
  30.    <td>Programació Estructurada</td>
  31.    <td>Bases de dades</td>
  32.   </tr>
  33.  </tbody>
  34.  <tbody>
  35.   <tr>
  36.    <td>18.45-19.15</td>
  37.    <td colspan="5">Pati</td>
  38.   </tr>
  39.  </tbody>
  40.  <tbody>
  41.   <tr>
  42.    <td>19.15-20.10</td>
  43.    <td>Programació Estructurada</td>
  44.    <td>Programació Estructurada</td>
  45.    <td rowspan="2">FOL</td>
  46.    <td rowspan="2">Programació Estructurada</td>
  47.    <td rowspan="2">RAT</td>
  48.   </tr>
  49.   <tr>
  50.    <td>20.10-21.05</td>
  51.    <td rowspan="2">Sistemes Operatius</td>
  52.    <td>Sistemes Operatius</td>
  53.   </tr>
  54.   <tr>
  55.    <td>21.05-21.45</td>
  56.    <td>&nbsp;</td>
  57.    <td>&nbsp;</td>
  58.    <td>Tutoria</td>
  59.    <td>&nbsp;</td>
  60.   </tr>
  61.  </tbody>
  62. </table>
Figura Taula amb expansions de files i columnes

Formularis

Els formularis web ens serveixen per interactuar amb l’usuari i perquè aquest usuari ens pugui transmetre informació. Aquesta informació es pot processar de diferents maneres, segons les necessitats de l’aplicació web.

Tècnicament, un formulari no és altra cosa que un fragment de codi HTML que conté uns elements característics anomenats controls o camps. Tenim diversos tipus de control: camps de text, camps de contrasenya, botons d’opció (radio buttons), caselles de verificació (checkbox), camps per introduir fitxers, llistes de selecció, àrees de text i botons. En la figura podeu veure un exemple de formulari amb part d’aquests controls.

Figura Controls d’un formulari bàsics

El tipus d’elements que es mostren a la figura es corresponen amb:

  1. Camps de tipus text
  2. Camps de tipus password
  3. Camp de tipus email
  4. Llista de selecció
  5. Botons d’opcions
  6. Camp de tipus file
  7. Caselles de verificació
  8. Àrea de text
  9. Botons de tipus submit i reset de formulari

Cadascun dels controls d’un formulari ha de tenir l’atribut name, amb el qual s’identifica la dada que es vol enviar.

Posem un exemple: tenim un camp de text l’objectiu del qual és que l’usuari introdueixi el seu nom i suposem que l’usuari introdueix “Pau”. Si el valor de l’atribut name del camp de text és nom (name=“nom”), la informació que s’enviarà és nom=Pau. Fixem-nos en el codi d’aquest formulari: 

  1. <h3> :: Formulari de registre al Portal:: </h3>
  2. <form name="formulari" method="POST" action="proces.asp">
  3. <fieldset>
  4.   <legend>Dades personals</legend>
  5.   <input type="hidden" name="oculto" value="0">
  6.   <div>
  7.     <label for="inom">Nom:</label>
  8.     <input type="text" name="nom" id="inom" placeholder="Nom">
  9. 		<label for="icognoms">Cognoms:</label>
  10. 		<input type="text" name="cognoms" id="icognoms" placeholder="Cognoms">
  11. 	</div>
  12. 	<div>
  13. 		<label for="idni">DNI:</label>
  14. 		<input type="text" name="idni" placeholder="P.ex: 45987989X">
  15. 	</div>
  16. 	<div>
  17. 		<label for="iusername">Username:</label>
  18. 		<input type="text" id="iusername" name="username">
  19. 		<label for="iclau">Clau:</label>
  20. 		<input type="password" id="iclau" name="clau">
  21. 		<label for="ireclau">Repetir Clau:</label>
  22. 		<input type="password" id="ireclau" name="reclau">
  23. 	</div>
  24. 	<div>
  25. 		<label for="iemail">E-Correu:</label>
  26. 		<input type="text" name="email" id="iemail" placeholder="usuari@domini.org">
  27. 		<label for="ifranjaedat">Franja d'edat: </label>
  28. 		<select name="edat" id="ifranjaedat">
  29. 			<option value="menor16">Menor que 16 anys</option>
  30. 			<option value="menor21">Entre 16 i 21 anys</option>
  31. 			<option value="major21">Major de 21 anys</option>
  32. 		</select>
  33.  
  34. 	</div>
  35. 	<div>
  36. 		Sexe:
  37. 		<input type="radio" name="sex" id="ihome" value="home">
  38. 		<label for="ihome">Home</label>
  39. 		<input type="radio" name="sex" id="idona" value="dona">
  40. 		<label for="ihome">Dona</label>
  41. 	</div>
  42. 	<div>
  43. 	</div>	
  44. 	<div>
  45. 		<label for="ipais_code">Codi País:</label>
  46. 		<input type="text" id="ipais_code" name="pais_code" pattern="[A-Za-z]{2}" placeholder="Codi del pais dos caracters">
  47. 		<label for="izip_code">Codi ZIP:</label>
  48. 		<input type="text" id="izip_code" name="zip_code" pattern="[0-9]{5}" placeholder="El codi postal">
  49. 	</div>	
  50. 	<div>
  51. 		<label >Imatge Personal:</label>
  52. 		<input type="file" name="imatge" id="iimatgepersonal">
  53. 	</div>
  54. </fieldset>
  55. <fieldset>
  56. 	<legend>Altres dades d'interès</legend>
  57. 	<div>Interessos:<br>
  58. 		<input type="checkbox" name="interessos" value="css">
  59. 		CSS
  60. 		<input type="checkbox" name="interessos" value="html5">
  61. 		HTML5
  62. 		<input type="checkbox" name="interessos" value="javascript">
  63. 		Javascript
  64. 	</div>
  65. 	<div><label>Coneixements:</label><br>
  66. 		<input type="checkbox" name="coneixaments" value="xarxessociales">
  67. 		Xarxes Socials
  68. 		<input type="checkbox" name="coneixaments" value="programaciohtml">
  69. 		Programació HTML
  70. 		<input type="checkbox" name="coneixaments" value="programacioCSS">
  71. 		Programació CSS
  72. 		<input type="checkbox" name="coneixaments" value="Disseny">
  73. 		Disseny
  74. 	</div>
  75. 	<div>
  76. 		<label>Comentaris:</label><br>
  77. 		<textarea rows="10" cols="50" name="coment">Aquí disposeu d'espai per escriure</textarea>
  78. 	</div>
  79. </fieldset>
  80. <div>
  81. 	<input type="submit" value="Enviar"><input type="reset" value="Esborrar">
  82. </div>
  83. </form>

Des de l’aparició d’HTML5 el número de tipus de camps es va incrementar significativament, tot i que no tots els navegadors els suporten tots. Per veure el seu comportament disposem de planes informatives, on s’indica el tipus de camp i la versió a partir de la qual el navegador l’ha va integrar si és el cas.

Propietats d'un formulari

Tota agrupació de camps d’un formulari va emmarcada dins l’etiqueta <form>. Hem de tenir en compte que podem disposar de més d’un formulari per pàgina i que cada formulari tindrà els seus camps i que a l’hora d’enviar igualment cada formulari indicarà qui serà qui processi la informació. L’etiqueta <form> té diferents atributs, que ens serveixen per dir com volem trametre la informació que omple l’usuari. A continuació s’enumeren cadascun d’aquests atributs:

  • action: el valor d’aquest atribut és el destí on ha d’anar a parar la informació que l’usuari ha posat en el formulari. Normalment és un URL amb l’script o programa que ha de processar les dades del formulari, però també podem fer que la informació es dirigeixi a una adreça de correu electrònic.
  • name: indica el nom que té el formulari, i n’és una referència unívoca.
  • method: ens permet dir de quina manera enviem la informació. Tenim dues possibilitats: si el valor de l’atribut és get enviem la informació juntament amb l’URL de destí, i d’aquesta manera és visible a la barra de navegació. Si el valor de l’atribut method és post, la informació s’envia dins de la capçalera HTTP que fa la petició.

A continuació es mostra un formulari amb dos camps de text que demanen a l’usuari el seu nom i clau d’accés, i un botó per enviar les dades. Suposem que al servidor hi ha un script fet amb llenguatge PHP anomenat processa.php, que és qui rep les dades i les gestiona. Suposem primer que el mètode d’enviament és de tipus get: 

  1. <form name="formulariacces" action="processa.php" method="get">
  2.  <div>
  3.   <label for="id_nom">Escriu el teu nom: </label>
  4.   <input type="text" name="nom" id="id_nom"/>
  5.  </div>
  6.  <div>
  7.   <label for="id_clau">Escriu la teva clau: </label>
  8.   <input type="password" name="clau" id="id_clau" />
  9.  </div>
  10.  <div>
  11.   <input type="submit" value="Envia les dades" />
  12.  </div>
  13. </form>

Si l’usuari entra de nom Sara i de contrasenya secreta, quan premi el botó per enviar el formulari anirem a parar a l’URL següent: http://elquesigui.org/processa.php?nom=Sara&clau=secreta.

Suposem que canviem el mètode d’enviar les dades pel mètode de tipus post: 

  1. <form action="processa.php" method="post">
  2. ...
  3. </form>

L’URL que veuríem seria http://elquesigui.org/processa.php, però les dades s’haurien enviat igualment dins la capçalera HTTP.

Capçalera HTTP

Per tal de veure les capçaleres HTTP quan s’usa el mètode POST, podríem usar un analitzador de xarxes, com pot ser el programa Wireshark. Un exemple de capçalera HTTP amb POST fent la captura amb aquest programa ens retornaria el següent: 

POST /processa.php HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (X11; U; Linux i686; ca; rv:1.8.1.12) Gecko/20080129 Iceweasel/2.0.0.12 (Debian-2.0.0.12-1)
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: ca,es;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://localhost/formulari_complet.html
Content-Type: application/x-www-form-urlencoded
Content-Length: 28
nom=Sara&clau=secreta
  • enctype: aquest atribut ens indica el tipus de contingut que enviem amb el formulari (quan el mètode és de tipus post). Per defecte, el valor és application/x-www-form-urlencoded. Si el formulari ens permet enviar un fitxer hem de canviar aquest valor per multipart/form-data.

Associació de text i controls

L’etiqueta <label> ens serveix per associar els elements de text explicatius dels controls amb els controls corresponents. L’atribut for de l’etiqueta <label> ens permet posar l’identificador (atribut id) del control al qual volem associar l’etiqueta.

Accessibilitat

L’etiqueta <label> està pensada fonamentalment per tal que la nostra web sigui accessible. Amb aquesta etiqueta els lectors de web per a persones cegues llegeixen el formulari en l’ordre correcte, associant cada text amb el seu control. També serveix perquè en fer clic damunt del text contingut en l’etiqueta <label> el control associat rebi el focus.

Per dir que el text Escriu el teu nom està associat al control amb identificador nom escriurem el següent: 

  1.  <label for="identificadornom">Escriu el teu nom:</label>
  2.  <input type="text" name="nom" id="identificadornom" />

El resultat és el següent:

Figura Camp d’entrada de dades de tipus text

Atributs comuns dels controls d'un formulari

Hi ha uns quants atributs, a part del globals, que podem assignar a cadascun dels controls d’un formulari. Els més destacables són els següents:

  • tabindex: indica la posició en l’ordre de tabulació.
  • disabled: si l’establim (disabled=“disabled”), el control queda deshabilitat.
  • autocomplete: si aquest atribut està activat, amb el valor on, el navegador intentarà autocompletar el camp. Per desactivar-lo, el valor és off.
  • autofocus: si activem aquest atribut (autofocus=“autofocus”), quan es carregui la pàgina, el control amb aquest atribut tindrà el focus.
  • pattern: permet posar una expressió regular que haurà de complir el text introduït per l’usuari.
  • placeholder: mostra el text que posem com a valor en el control. Aquest text desapareixerà només rebre el focus.

En un formulari, podem saltar de control en control sense necessitat d’usar el ratolí o pulsació tàctil, prement la tecla del tabulador.

Camps de text

Els camps de text són els camps en què l’usuari pot introduir un text relativament curt, en cas que sigui llarg es recomana fer servir una altra etiqueta i tipus anomenat <textarea>, que veurem en un altre apartat. Per crear un camp de text usem l’etiqueta <input type=“text” />. A més, tenim els atributs següents:

  • name: nom del control.
  • value: valor per defecte del camp de text.
  • readonly: si l’establim (readonly=“readonly”), el control és de només lectura, no s’hi pot escriure.
  • maxlength: nombre màxim de caràcters que permetrem escriure en el control.
  • size: mida del control.

Seguint l’exemple de l’associació de text i controls, que hem vist amb anterioritat, hem afegit al camp que mesuri l’espai que ocuparien 30 caràcters però que hi permetem que se n’escriguin fins a 100. Això seria: 

  1. <label for="identificadornom">Escriu el teu nom:</label>
  2. <input type="text" name="nom" size="30" maxlength="100" id="identificadornom">

Camps de contrasenya

Els camps de contrasenya són els camps en què l’usuari pot introduir una contrasenya, ja que el text que s’introdueix queda “camuflat” amb asteriscos o punts. Per crear un camp de contrasenya usem l’etiqueta <input type=“password” /> i els mateixos atributs que utilitzem per als camps de text. Un exemple de camp de contrasenya seria el següent:

Seguretat de les contrasenyes

No hem de pensar que la informació que posem en els camps de contrasenya és segura ja que si no s’usa el protocol https la informació circula per la xarxa sense xifrar. 

  1. <label for="identificadorclau">Escriu una clau:</label>
  2. <input type="password" name="clau" size="10" maxlength="15" id="identificadorclau" />

El resultat d’aquest codi és el següent:

Figura Camp de contrasenya o clau

Camp de correu

Abans d’HTML5 no existia aquest tipus d’entrada i fèiem servir el tipus text controlant amb JavaScript el valor introduït. L’etiqueta email serveix per escriure una adreça de correu electrònic. Si el navegador detecta que el que ha escrit l’usuari és invàlid, mostrarà un error. Vegem el codi en un exemple: 

  1. <label for="mail">E-mail:</label> 
  2. <input type="email" id="email" name="email" />

Com hem dit abans, fent servir l’atribut pattern a una etiqueta de tipus text, podríem arribar a fer el mateix fent ús d’una expressió regular.

Les expressions regulars són patrons que ens indiquen condicions que han de complir determinats textos. Per exemple al correu, ha d’existir un domini TLD, ha de contenir el caràcter @, no es pot fer servir caràcters no alfanumèrics per començar, etc.

Camp d'URL

url: serveix per escriure un URL. Si el navegador detecta que no compleix el patró correcte per a un URL mostrarà un error. Vegem un exemple: 

  1. <label for="enllac">URL:</label> 
  2. <input type="url" id="enllac" name="enllac" />

Camp numèric

number: serveix per escriure un nombre. A més, podrem fer restriccions del nombre introduït a partir dels següents atributs:

  • min: mínim valor permès.
  • max: màxim valor permès.
  • step: especifica quins nombres permetem segons el salt indicat. Per exemple, si step=“2”, els nombres permesos seran: -2, 0, 2, 4, 6…
  • value: especifica el nombre per defecte que apareixerà al control.

Vegem un exemple d’aquest control: 

  1. <label for="nota">Nota de l'examen:</label> 
  2. <input type="number" id="nota" name="nota" min="0" max="10" />

Camp de rang

range: és una barra de desplaçament que simula un nombre en un rang. Per tal d’establir el rang disposem dels mateixos atributs que el tipus number: min, max i step. 

  1.  <label for="rang">Rang:</label>
  2.  <input name="rang" id="rang" type="range" value="0" min="0" max="100"/>

Camps de data o horaris

date, month, week, time, datetime i datetime-local: aquests tipus ens serveixen per poder seleccionar una data/hora, tot i que el seu comportament no és el mateix segons el navegador que fem servir, ja que aquests tipus encara no són plenament integrats en tots els navegadors.

Vegem un exemple: 

  1. <label for="data">Data:</label> 
  2. <input type="date" id="data" name="data" />

El resultat pel navegador Chrome i Firefox és el següent:

Figura Camp date al navegador Chrome
Figura Camp date al navegador Firefox

Si volguéssim fer servir altres tipus com ara month, time, etc, hauríem de substituir l’atribut type de l’etiqueta input pel valor corresponent.

Camps de colors

El camp de tipus color serveix per a camps que han de contenir un color. El codi seria: 

  1. <label for="color">Color:</label> 
  2. <input type="color" id="color" name="color" />

El resultat és el següent al navegador Chrome:

Figura Visió del camp de tipus color al navegador Chrome

El resultat és el següent al navegador Firefox:

Figura Visió del camp de tipus color al navegador Firefox

Camp de cerca

Serveix per a camps de cerca i cal fer servir el valor search per l’atribut type de la etiqueta input. El seu comportament és molt semblant a un camp de tipus text. El codi seria: 

  1. <label for="cerca">Cerca:</label> 
  2. <input type="search" id="cerca" name="cerca" />

Botons d'opció

Els botons d’opció ens permeten triar una i només una de les opcions que se’ns ofereixen. Per crear un botó d’opció usem l’etiqueta <input type=“radio” />. A més, tenim els atributs següents:

  • name: nom del control. És molt important fer servir el mateix nom per agrupar botons d’opcions que pertanyen a la mateixa selecció, de forma que exclusivament un sigui seleccionable alhora.
  • checked: determina si el control està seleccionat.
  • value: si està seleccionat, estableix quin valor es tramet.
  • size: determina la mida del control en píxels.

Habitualment, no només posem un botó d’opció sinó que en posem diversos d’associats entre si. Per exemple, si demanem el sexe de la persona, tenim dos botons d’opció, un per senyalar que és dona i l’altre per senyalar que és home.

El codi d’aquest exemple seria el següent: 

  1.  <input type="radio" id="sexe_dona" name="sexe" value="dona"/>
  2.  <label for="sexe_dona">Dona</label>
  3.  <input type="radio" id="sexe_home" name="sexe" value="home"/>
  4.  <label for="sexe_home">Home</label>

Fixem-nos que per tal que el formulari sàpiga que aquests botons d’opció estan relacionats, donem el mateix valor a l’atribut name.

Vegem un altre exemple, en què apareixen tres botons d’opció i com es mostra en el navegador (figura): 

  1.  <h2>Fes la selecció de franja d'edat</h2>
  2.  <input type="radio" name="edat" id="edat_menor" value="menor"/>
  3.  <label for="edat_menor">Menys de 18 anys </label>
  4.  <input type="radio" name="edat" id="edat_major" value="major" checked="checked"/>
  5.  <label for="edat_major">De 18 a 65 anys </label>
  6.  <input type="radio" name="edat" id="edat_jubilat" value="jubilat"/>
  7.  <label for="edat_jubilat">Més de 65 anys</label>
Figura Selecció exclusiva per botons d’opcions

Observem que els tres controls tenen el mateix valor en el camp name (edat). Així, quan trametem el formulari, ens arriba una de les tres possibilitats següents: edat=menor o bé edat=major o bé edat=jubilat. També observem que hi ha una selecció marcada per defecte amb l’atribut checked assignat al valor checked.

Caselles de verificació

Les caselles de verificació ens permeten triar una opció o més de diverses possibilitats. Per crear una casella de verificació usem l’etiqueta <input type=“checkbox” />. A més, tenim els mateixos atributs que amb els botons d’opció.

En aquest cas l’atribut name no ha de ser el mateix ja que es pot prémer una o més d’una de les caselles de verificació. Fixem-nos en l’exemple i com es mostra en el navegador (figura): 

  1.  <form method="get" action="processa.php">
  2.   <h2>Coneixements:</h2> 
  3.   <input type="checkbox" name="coneixements" value="xarxes" id="xarxes">
  4.   <label for="xarxes">Xarxes Socials</label>	
  5.   <input type="checkbox" name="coneixements" value="html" id="html">
  6.   <label for="html">Programació HTML</label>	
  7.   <input type="checkbox" name="coneixements" value="css" id="css">
  8.   <label for="css">Programació CSS</label>		
  9.   <input type="checkbox" name="coneixements" value="disseny" id="disseny">
  10.   <label for="disseny">Disseny</label>
  11.   <button type="submit">Enviar</button>
  12.  </form>

En aquest cas, si preméssim les caselles Programació HTML i Programació CSS s’enviaria: coneixaments=html&coneixaments=css, a la plana processa.php del servidor, per tal que la processés.

Figura Selecció per tipus de camp checkbox

Llistes de selecció

Les llistes de selecció tenen dos formats: les llistes de selecció simple, que ens deixen escollir una única opció d’un llistat de possibilitats i les llistes de selecció múltiple, que ens deixen escollir més d’una opció (prement la tecla Ctrl mentre seleccionem les diverses opcions).

La funció de la llista de selecció simple és similar als botons d’opció (només es pot triar una opció), mentre que la funció de la llista de selecció múltiple és similar a les caselles de verificació (podem triar més d’una opció). Malgrat això, el format de presentació i el funcionament del control és diferent.

Per crear una llista de selecció usem dues etiquetes:

  • L’etiqueta <select> ens serveix per dir on comença i s’acaba la llista de selecció. Tenim els atributs següents:
    • name: nom del control.
    • size: nombre d’opcions visibles.
    • multiple: si l’establim (<select multiple=“multiple”>) farà que aquesta llista sigui una llista de selecció múltiple.
  • Per a cadascuna de les opcions usem l’etiqueta <option>. Aquesta etiqueta està continguda dins de l’etiqueta <select> que al seu torn conté el text de l’opció que s’ha de seleccionar. Té els atributs següents:
    • value: determina el valor que s’envia si se selecciona aquesta opció.
    • selected: si l’establim (selected=“selected”) aquesta opció està seleccionada per defecte. Hem de tenir en compte que si la llista és de selecció simple, només haurem de tenir una opció amb aquest atribut, mentre que si és de selecció múltiple podem posar-lo en més d’una opció.

Un exemple de llista d’opció és el següent: 

  1. <form method="get" action="processa.php">
  2.  <label for="municipi">Marca els muncipis que has visitat:</label><br>
  3.  <select name="municipi" id="municipi" multiple="multiple">
  4.   <option value="Calafell">Calafell</option>
  5.   <option value="Coma-ruga">Coma-ruga</option>
  6.   <option value="Cubelles">Cubelles</option> 
  7.   <option value="Cunit">Cunit</option>
  8.   <option value="Sant Salvador">Sant Salvador</option>
  9.   <option value="Sant Vicenç de Calders">Sant Vicenç de Calders</option>
  10.   <option value="Segur de Calafell">Segur de Calafell</option>
  11.  </select><br><br>
  12.  <button type="submit">Enviar</button>
  13. </form>

En aquest cas, es permet que l’usuari marqui diverses opcions. Si per exemple, marca que ha visitat les poblacions Sant Salvador i Segur de Calafell, s’envia municipi=Sant+Salvador&municipi=Segur+de+Calafell. La figura recull com es mostra en un navegador.

Figura Exemple de llista de selecció

Si volem fer seleccions classificant les diferents opcions de la llista en grups posant-los un títol descriptiu, podem usar l’etiqueta <optgroup>, com es veu en l’exemple següent: 

  1. <h2>Selecciona estació destí </h2>
  2. <select name="estacio" id="estacio" size="11">
  3.  <optgroup label="Barcelona">
  4.   <option value="Sans"selected="selected">Barcelona Sants</option>
  5.   <option value="Passeig Gracia" >Barcelona Passeig de Gràcia</option>
  6.   <option value="Franca">Barcelona Estació de França</option>
  7.   <option value="Clot">Barcelona El Clot</option>
  8.  </optgroup>
  9.  <optgroup label="Terrassa">
  10.   <option value="Terrassa Centre">Terrassa Centre</option>
  11.   <option value="Terrassa Est">Terrassa Est</option>
  12.  </optgroup>
  13. </select>

El contingut de l’atribut label de l’element <optgroup> es mostra com un títol descriptiu, però no es pot seleccionar. Podem veure aquesta llista en la figura.

Figura Exemple de llista de selecció amb agrupació

Llista de dades: <datalist>

L’etiqueta <datalist> és una llista de dades que podem associar a diferents tipus de camp <input>, i que pot funcionar igualment a tall de suggeriment. Quan l’usuari vol introduir un valor en un camp, l’ajudarem a completar-ho amb valors llistats dins del <datalist>, tot i que pot escollir de propis. A més a més, podem canviar/ajudar allò que introdueix l’usuari pel valor correcte. Això pot ser molt útil per a codis en els quals l’usuari en sap la descripció, però no el codi.

És imprescindible que establim l’atribut id de l’etiqueta <datalist> per tal de poder associar la llista de dades amb el control <input>. En el control <input> tindrem l’atribut list, on haurem de posar l’ id de l’element <datalist>

Dins de l’element <datalist> tindrem diversos elements <option> amb els següents atributs:

  • label: allò que escriurà l’usuari
  • value: valor amb el qual substituirem allò que escriu l’usuari

Vegem un exemple: suposem que volem que l’usuari de la nostra aplicació web hagi d’escriure el codi d’un aeroport. Normalment els usuaris saben les ciutats o la zona on hi ha l’aeroport, però no saben el codi. Podríem ajudar-lo mitjançant un <datalist>: 

  1. <form action="accio.php">
  2.   <label for="aeroport">Aeroport: </label>
  3.   <input type="text" id="aeroport" name="aeroport" list="codis_aeroports"  />
  4.   <datalist id="codis_aeroports">
  5.     <option label="Barcelona" value="BCN"></option>
  6.     <option label="El Prat" value="BCN"></option>
  7.     <option label="Bilbao" value="BIO"></option>
  8.     <option label="Girona" value="GRO"></option>
  9.     <option label="Menorca" value="MAH"></option>
  10.     <option label="Mahó" value="MAH"></option>
  11.   </datalist>
  12.   <input type="submit" value="Envia dades" />
  13. </form>

En la figura podem veure com el control ajuda l’usuari, i en la figura podem veure què passa quan l’usuari selecciona l’ajuda que se li ofereix.

Figura Ajuda a l’usuari amb les dades de la llista
Figura Canvi de text pel valor de la llista

Com hem apuntat abans, la llista de dades pot fer-se servir amb altres tipus d’inputs, com ara range, color, time, datatime-local, date, week o moth, tot i que això depèn del navegador on les visualitzem, ja que no tots tenen aquests tipus d’inputs i cal consultar-ho amb anterioritat a algun portal com ara www.html5test.com o www.caniuse.com.

A mode d’exemple, amb el següent codi podem veure un <input type=“time”> amb una llista de selecció. 

  1. <label>Escull una hora:</label>
  2. <input type="time" list="hores" />
  3. <datalist id="hores">
  4.   <option label="Mitjanit">00:00</option>
  5.   <option label="Matinada">06:00</option>
  6.   <option label="Migdia">12:00</option>
  7.   <option>18:00</option>
  8. </datalist>

El comportament a un navegador Chrome es mostra a la següent figura:

Figura Llista de dades pel tipus time al navegador Chrome

I el resultat si escollim les 06.00h de la matinada.

Figura Llista de dades pel tipus time al navegador Chrome

Generador de claus: <keygen>

La seguretat a la xarxa és un factor que cada cop ha esdevingut més important atesa la immensa quantitat de traspàs de dades sensibles a través de la xarxa. És per això que HTML5 incorpora una etiqueta que fa que l’enviament de dades sigui més segur. L’etiqueta s’anomena <keygen> i si l’usem es generen un parell de claus per tal de comunicar-se amb el servidor web a qui se li vol enviar la informació.

D’aquest parell de claus, la clau privada s’emmagatzema en el client i la pública s’envia al servidor.

Vegem com s’usa aquesta etiqueta: 

  1. <form action="accio.php" method="get">
  2.    <label for="usuari">Usuari:</label>
  3.    <input type="text" name="usuari" id="usuari" />
  4.    <label for="enc">Encriptació:</label>
  5.    <keygen name="enc" id="enc" />
  6.    <input type="submit" value="Envia dades" />
  7. </form>

Sortida de resultats: <output>

L’etiqueta <output> serveix per mostar els resultats d’alguna operació feta generalment amb Javascript.

Tot i que haurem d’usar una mica de JavaScript per tal de veure’n la utilitat. Com a exemple, suposem que l’usuari entra un preu sense IVA i l’IVA a aplicar i volem que es vagi recalculant el preu amb IVA si canviem els valors. El codi seria el següent: 

  1. <form oninput="preu_amb_iva.value = preu_sense_iva.value * (1 + iva.value / 100) ">
  2.    <label for="preu_sense_iva">Preu sense IVA: </label> 
  3.    <input id="preu_sense_iva" name="preu_sense_iva" type="number" /> 
  4.    <label for="iva">IVA: </label> 
  5.    <input id="iva" name="iva" type="number" /> 
  6.    <label for="preu_amb_iva">Preu amb IVA: </label> 
  7.    <output id="preu_amb_iva" name="preu_amb_iva" for="preu_sense_iva iva"></output>
  8. </form>

En la figura podem veure el resultat obtingut al navegador després d’introduir el preu sense IVA i l’IVA.

Figura Resultat d’una operació en un formulari

Àrees de text

Les àrees de text permeten que l’usuari de l’aplicació web enviï una porció de text més gran que amb els camps de text. L’etiqueta que ens permet inserir una àrea de text és <textarea>. Els atributs que podem usar amb aquesta etiqueta són els següents:

  • name: nom del control.
  • cols: amplada, en caràcters.
  • rows: alçada, en nombre de línies.
  • readonly: si l’establim (readonly=“readonly”), el control és de només lectura, no s’hi pot escriure.

Vegem un exemple de control d’àrea de text en què deixem a l’usuari cinc files i trenta columnes visibles per escriure. El text que està entre les etiquetes d’inici i fi és el text que surt per defecte a l’àrea de text: 

  1. <textarea name="comentari" id="comentari" cols="30" rows="5">Escriu aquí els teus 
  2. comentaris</textarea>

Botons

Els botons d’un formulari ens serveixen per fer accions quan els premem. Tenim tres tipus de botons:

  • Botó d’enviament de formulari: quan es prem aquest botó el formulari es tramet. És a dir, les dades són enviades al destí que hem posat en l’atribut action de l’element <form>. Per inserir un botó d’aquest tipus usem l’etiqueta <input type=“submit” />. Disposem, a més, de l’atribut value, que ens indica el text que apareix en el botó.
  • Botó de restabliment del formulari: quan es prem aquest botó el formulari torna a posar-se en l’estat inicial. És a dir, s’esborra tot allò que ha escrit l’usuari i es posen les dades per defecte del formulari. Per inserir un botó d’aquest tipus usem l’etiqueta <input type=“reset” />. Amb l’atribut value podem indicar el text que apareix al botó.
  • Botó genèric: podem inserir botons en els quals podem afegir noves funcions mitjançat codi de programació. Per poder fer això usem l’etiqueta <button>. El valor que ens apareix al botó és allò que posem entre l’inici i el final de l’etiqueta. Podem posar tant text com imatges. Aquest control té els atributs següents:
    • type: defineix quin tipus de botó és. Pot prendre els valors següents: submit (amb la mateixa funció que els botons d’enviament de formulari), reset (amb la mateixa funció que els botons de restabliment de formulari) o button (botó genèric).
    • name: nom del control
    • value: valor que es tramet quan premem el botó.

Posem com a exemple els botons de restabliment de formulari i el d’enviament de formulari: 

  1.  <input type="reset" value="Esborrar formulari" />
  2.  <input type="submit" value="Enviar formulari" />

Fixem-nos que l’etiqueta <button> no es tanca en ella mateix i per tant podem inserir qualsevol cosa dins del botó com, per exemple, una imatge o el text que ha d’aparèixer: 

  1. <button><img src="envia.png" alt="Enviament de dades" /></button>

Controls ocults

En alguns casos ens pot interessar tenir en un formulari un control amb un valor concret, però que no sigui ni visible ni directament modificable per l’usuari final. Per inserir un control d’aquest tipus s’usa l’etiqueta <input type=“hidden” />. Els atributs que s’usen amb aquest control són els següents:

  • name: nom del control.
  • value: valor que es tramet.

Per exemple, si volem enviar seccio=segona, hem d’escriure el codi següent: 

  1. <input type="hidden" name="seccio" value="segona" />

Marcs flotans

En ocasions ens interessa introduir contingut dins d’una pàgina d’una altra pàgina. En aquests casos el que fem servir són els marcs flotants amb l’ús de l’etiqueta <iframe>, indicant amb l’atribut src l’origen del contingut a mostrar dins del marc creat.

Un exemple de codificació per mostrar el contingut dins d’una pàgina del portal de l’IOC per defecte, seria el següent: 

  1. <iframe width="500px" height="400px" src="http://ioc.xtec.cat/educacio/" name="marcflotant_a"></iframe>
  2. <p><a href="http://www.w3c.es/" target="marcflotant_a">Mostrar portal W3C</a></p>
  3. <p>Quan cliquem a l'enllaç obrim la pàgina principal del portal www.w3c.es a l'interior del marc flotant.</p>

A l’etiqueta <iframe> hem afegit l’atribut width i height per donar-li una amplada i alçada respectivament al marc flotant, i també hem fet ús de l’atribut name per posar-li un nom i posteriorment fer-ho servir a l’etiqueta <a>. Això ens permet indicar-li amb l’atribut target de l’enllaç, quin marc flotant serà el destí de l’enllaç quan cliquem, és a dir, posarà el contingut que marca l’enllaç a dins del marc flotant. A la figura veiem el resultat del codi anterior.

Figura Marc flotant amb contingut dinàmic

Mapes

La combinació de l’etiqueta <a> amb l’etiqueta <img> ens permet fer que una imatge sigui alhora un enllaç. Però si el que volem és que segons el punt d’una imatge on premem ens porti a un enllaç o a un altre, haurem de recórrer a un altre recurs: els mapes sensibles.

Els mapes sensibles són imatges que presenten múltiples enllaços segons la zona on se situï el cursor.

Hi ha dos tipus de mapes, els mapes gestionats des del client i els mapes gestionats des del servidor.

Mapes gestionats des del client

La primera tasca que cal fer quan confeccionem un mapa sensible gestionat des del client és dividir la imatge en zones. Per tal de fer això hem de delimitar aquestes zones establint-ne les coordenades.

Hi ha diversos programes de dibuix que ens permeten veure les coordenades de cada punt de la imatge. També tenim eines específiques per a la creació de mapes d’imatges que ofereixen aquesta possibilitat.

Eines de confecció de mapes

Confeccionar un mapa “a mà” i obtenir les coordenades necessàries pot arribar a ser molt laboriós. Existeixen diversos programes que ens poden ajudar en aquesta tasca. Podem posar com a exemples el programa kimagemapeditor o el connector imagemap del programa de tractament d’imatges GIMP.

Si volem utilitzar mapes sensibles, hem de fer dues actuacions: declarar el mapa i assignar-lo a una imatge. Vegem com podem fer aquests dos passos:

1. La declaració d’un mapa es fa amb una etiqueta <map> i diverses etiquetes <area> seguint la sintaxi següent: 

  1. <map name="nom_mapa">
  2.  <area shape="..." coords="..." href="..." alt="..." />
  3.   ...
  4. </map>

A l’etiqueta <map> hi establim el nom del mapa i a les etiquetes <area> hi definim cadascuna de les zones del mapa. Els atributs per fer-ho són els següents:

  • shape: defineix la forma de la zona, que pot ser rectangular (rect), circular (circ) o poligonal (poly).
  • coords: defineix les coordenades de la zona, seguint la normativa següent:
    • Si es tracta d’un rectantgle (rect), cal indicar les coordenades x1, y1, x2 i y2, on x1 i y1 són les coordenades de l’extrem superior esquerre i x2 i y2 les de l’extrem inferior dret.
    • Si es tracta d’un cercle (circ), cal indicar les coordenades x, y i r, on x i y són les coordenades del centre del cercle i r és el radi d’aquest cercle.
    • Si es tracta d’un polígon (poly), cal indicar les coordenades x1, y1, x2, y2, x3, y3… on cada parella xi, yi defineix un vèrtex del polígon. La darrera parella s’uneix a la primera per tancar el polígon.
  • href: defineix l’enllaç on s’anirà si l’usuari prem sobre la zona.
  • nohref: si l’establim (nohref= “”) indiquem que la zona no té cap enllaç definit.
  • alt: incorpora el text que es presenta si no es pot presentar la imatge.

2. L’assignació d’un mapa a una imatge es fa amb l’atribut usemap de l’etiqueta <img>. La sintaxi és la següent: 

  1. <img src="cami_imatge" usemap="#nom_mapa" />

El nom del mapa sempre ha d’anar precedit del símbol # i ha de coincidir amb l’atribut name de l’etiqueta <map>.

Imaginem que tenim la imatge que es veu en la figura i volem que en prémer sobre qualsevol de les quatre figures es faci una consulta a la Viquipèdia que correspongui a cadascuna d’elles. El codi complet seria el següent: 

  1. <img id="figures" src="rbfiguresbasiques.png" border="0" width="516" height="468" orgWidth="516" orgHeight="468" usemap="#figures" alt="4 figures bàsiques" />
  2. <map name="figures" id="ifigures">
  3.  <area shape='rect' id='rectangle' coords='96,77,219,202' href='http://ca.wikipedia.org/wiki/Rectangle' alt="rectangle" />
  4.  <area shape='circle' coords='347,140,63' href='http://ca.wikipedia.org/wiki/Cercle' alt="cercle" />
  5.  <area shape='polygon' coords='121,262,194,263,225,371,89,372' href='http://ca.wikipedia.org/wiki/Trapezoide' alt='trapezoide' />
  6.  <area shape='polygon' coords='324,260,372,260,372,295,407,295,408,340,371,342,371,376,325,376,325,342,290,340,291,295,326,295' href='http://ca.wikipedia.org/wiki/Geometria' alt='creu' />
  7. </map>
Figura Mapa de tipus client

Mapes gestionats des del servidor

L’objectiu dels mapes gestionats des del servidor és enviar al servidor les coordenades del punt on s’ha premut. En el servidor hi haurà un programa que sap com s’han de gestionar aquestes coordenades (per exemple, enviar a una altra pàgina segons on s’hagi premut). Per tal de fer això hem d’usar l’atribut ismap=“ismap” de l’etiqueta <img>. Per exemple: 

  1. <a href="mapaservcoord.html"><img src="imatges/linux.png" alt="linux" ismap="ismap" /></a>

Això fa que si premem les coordenades 5,15 de la imatge anem a la pàgina mapaservcoord.html?5,15. La pàgina de destinació pot agafar la part de l’URL que conté les coordenades i gestionar-les com convingui.

Objectes

L’etiqueta <object> neix per oferir una solució universal a la inclusió de qualsevol tipus de fitxers en els documents HTML, de manera que els navegadors rebin la informació necessària per tractar l’objecte (fitxer incrustat en el document).

Altres etiquetes HTML5 per a objectes concrets

HTML5 incorpora etiquetes pròpies per inserir objectes de diversos tipus. Per exemple tenim l’etiqueta <audio> per a inserir so o l’etiqueta <video> per a inserir vídeos. Tot i això, HTML5 continua conservant l’etiqueta genèrica <object> que ja existia a HTML4, amb l’objectiu d’englobar qualsevol tipus d’objecte.

Com a regla general, l’etiqueta <object> serveix per definir un objecte o component extern al navegador que s’encarrega de reproduir l’objecte (so, animació, vídeo, connectors, documents…). Per aconseguir una reproducció correcta, l’etiqueta <object> ha de permetre declarar l’objecte, la seva ubicació i el seu tipus, i unes etiquetes optatives especials, <params>, permeten acabar de definir els valors o paràmetres que aquest necessiti.

La sintaxi genèrica és la següent: 

  1. <object atribut1="valor1" atribut2="valor2" ... atributN="valorN">
  2.    <param name="nom" value="valor">
  3.    <param name="nom" value="valor">
  4.    ...
  5. </object>

Un atribut bàsic en la declaració d’un objecte és l’atribut type que permet indicar al navegador el tipus d’objecte que ha de carregar. El navegador ha d’utilitzar aquesta informació per esbrinar si disposa d’alguna aplicació adequada per reproduir l’objecte, i n’ha d’avortar la càrrega si no en disposa.

De tot això es dedueix que hi ha dos punts importants perquè un objecte es pugui reproduir correctament:

  1. El tipus d’objecte ha d’estar ben identificat en el document HTML. Per a això, cal utilitzar els tipus MIME.
  2. El navegador ha de tenir instal·lada alguna aplicació adequada per tal de reproduir l’objecte. Les aplicacions que possibiliten aquesta funció s’anomenen connectors (en anglès, plugins).

L’etiqueta <object> disposa dels següents atributs:

  • data: nom del fitxer per reproduir amb la seva ubicació.
  • type: cadena amb el tipus MIME adequat a l’objecte.
  • width: amplada en píxels del control.
  • height: alçada en píxels del control.

Per exemple, si volem reproduir un arxiu de música, hem de fer el següent: 

  1. <object data="musica.mp3" type="audio/mpeg">
  2.    <p>Aquest objecte no ha pogut ser reproduït.</p>
  3. </object>

En nombre de paràmetres, depèn de quin objecte vulguem encastar, en podrem posar uns o uns altres.

Tipus MIME

MIME és l’acrònim anglès de Multipurpose Internet Mail Extensions (extensions multipropòsit de correu d’Internet). Es tracta d’un estàndard que especifica com un programa (inicialment, de correu o navegador web) ha de transferir arxius multimèdia (vídeo, so i, per extensió, qualsevol arxiu que no estigui codificat en US-ASCII).

L’estàndard MIME adjunta un fitxer de capçalera a cada fitxer, que especifica el tipus i el subtipus del contingut del fitxer principal. Gràcies a aquesta informació, tant el servidor com el navegador poden gestionar i presentar correctament les dades.

En la utilització diària d’Internet, ens beneficiem dels tipus MIME. Cada vegada que sol·licitem una pàgina d’Internet, s’obre un diàleg entre el nostre navegador i el servidor que proporciona la pàgina. El nostre navegador demana la pàgina i el servidor, abans d’enviar-la, confirma que existeix i comprova el tipus de dades que conté. Això darrer es fa mitjançant el tipus MIME que correspongui.

La gestió del tipus MIME en el web té lloc en tres punts ben diferenciats:

1. En el servidor, que ha de ser capaç de gestionar diversos tipus MIME i tenir-los activats.

2. En la pàgina web, en què l’autor pot fer referència a tipus MIME, tot i que és merament consultiu. Els enllaços a arxius externs (fulls d’estils, scripts de JavaScript, objectes incrustats…) es feien servir en versions anteriors a HTML5 indicant el tipus de l’arxiu enllaçat amb l’atribut type. A continuació posem alguns exemples, tot i que si no l’indiquem als dos primers casos, el navegador ja dóna per defecte un comportament adequat:

  • Enllaços a fulls d’estils:
  1. <link rel="stylesheet" type="text/css" href="estils.css" />
  2. <!-- A les darreres versions de navegadors funciona igualment aquesta altre definició-->
  3. <link rel="stylesheet" href="estils.css" />
  • Crida a scripts JavaScript:
  1. <script type="text/javascript" src="codi.js"></script>
  2. <!-- A les darreres versions de navegadors funciona igualment aquesta altre definició-->
  3. <script src="codi.js"></script>
  • Definició d’objectes:
  1. <object data="musica.mp3" type="audio/mpeg">
  2.    <p>Text alternatiu</p>
  3. </object>

3. En el navegador del client, que ha d’estar capacitat per interpretar els tipus MIME que el servidor li envia i, fins i tot, ha de poder informar el servidor dels tipus MIME que pot acceptar.

  • Logotip d'IANA
  • Logotip d'IANA

Per permetre aquesta funció, el navegador ha de tenir instal·lades les aplicacions adequades als diferents tipus MIME que interessi gestionar. Són els anomenats connectors (plugins) del navegador.

Actualment, els tipus MIME s’agrupen en vuit categories, i cada tipus MIME s’identifica pel nom compost: categoria/tipus. De vegades, es parla de tipus/subtipus. Les vuit categories són les següents: application, audio, image, message, model, multipart, text i video. Cadascuna està formada per un conjunt més o menys gran de tipus MIME, i cadascun dels tipus acostuma a dur associades una extensió d’arxius o més d’una.

IANA

L’organisme que s’encarrega de registrar els tipus MIME és l’IANA, acrònim anglès d’Internet Assigned Numbers Authority (Agència d’Assignació de Números d’Internet). A la seva pàgina web podem trobar la llista completa de tipus/subtipus MIME.

La taula recull alguns dels tipus MIME amb les extensions de fitxers més habituals.

Taula: Recull de tipus MIME i extensions de fitxers associades
Tipus/Subtipus MIME Extensions de fitxers Tipus/Subtipus MIME Extensions de fitxers
image/png .png video/x-msvideo .avi
image/gif .gif application/pdf .pdf
image/jpeg .jpg, .jpeg, .jpe application/postscript .ai, .eps, .ps
image/tiff .tif, .tiff application/rtf .rtf
audio/x-wav .wav application/gzip .gz
audio/x-midi .mid application/x-tar .tar
text/plain .txt application/zip .zip
text/richtext .rtf, .rtx application/x-java-vm .class
video/mpeg .mpeg, .mpg, .mpe application/x-java-archive .jar

Connectors

Per reproduir fitxers encastats dins les pàgines web com a objectes genèrics, els navegadors necessiten tenir instal·lat el connector adequat.

Els connectors (plugins) són aplicacions informàtiques que interactuen amb una altra aplicació per afegir-hi una funció o utilitat específica.

És a dir, si en un document web s’hi ha incrustat un objecte (<object>) que fa referència a un document d’un cert tipus MIME, el navegador que l’hagi de reproduir ha de disposar d’un connector adequat per a aquell tipus MIME. Per exemple moltes vegades trobem que certs navegadors necessiten de la instal·lació d’un pluging específic per reproduir objectes de tipus Flash d’Adobe.

El fet que el sistema operatiu disposi d’una aplicació que pugui reproduir un determinat arxiu (corresponent a un tipus MIME) no és garantia que els navegadors instal·lats en aquell sistema tinguin instal·lat el connector corresponent.

Els navegadors, en rebre pàgines web que contenen tipus MIME no suportats, haurien d’oferir a l’usuari, tal com recomana el W3C, la possibilitat d’instal·lar-los d’una manera senzilla.

Si es vol saber els connectors que es tenen instal·lats al navegador Firefox s’ha d’escriure about:plugins a la barra de navegació. El navegador ens mostra un document HTML amb la informació corresponent de tots els connectors instal·lats, com es veu en la figura. La informació que dóna és molt interessant: connectors instal·lats (versió i nom del fitxer corresponent) i, per a cada connector, la relació de tipus MIME als quals pot donar servei.

Figura Pantalla de connectors instal·lats a Firefox

Exemples d'incorporació d'objectes genèrics en una pàgina web

A continuació es mostren diversos exemples de com podem incrustar alguns tipus de mitjans multimèdia a la nostra web. En tots els exemples, si no es pot accedir al mitjà, es mostra un text que ofereix la possibilitat de baixar el fitxer directament.

  • Inserció d’un fitxer PDF d’extensió .pdf.
  1.  <object data="documentacio.pdf" type="application/pdf" width="100%" height="100%">
  2.  <p>Sembla que no tens un connector per veure el contingut del fitxer PDF.
  3.  Baixa-te'l de: <a href="myfile.pdf">Fes click i es descarregarà</a></p>
  4.  </object>
  • Inserció d’un vídeo en format .mpg:
  1. <object data="media/EntrevistaStallman.mpg" type="application/x-mplayer2" width="500" height="500">
  2.      No es pot accedir al vídeo. Baixa-te'l d'<a href="media/EntrevistaStallman.mpg">aquí</a>
  3. </object>
  • Inserció d’un fitxer àudio en format .mp3:
  1. <div class="canco">
  2.    <h2>01 - Requiem for a fish</h2>
  3.    <object data="media/01-TheFreakFandangoOrchestra-Requiemforafish.mp3" type="audio/mpeg" width="250" height="250">
  4.       <param name="autoplay" value="false" />
  5.       <param name="autoStart" value="0" />
  6.       No es pot accedir a l'àudio. Baixa-te'l d'<a href="media/01-TheFreakFandangoOrchestra-Requiemforafish.mp3">aquí</a>
  7.    </object>
  8. </div>
  • Inserció d’un format .swf (aplicació Flash):
  1. <object type="application/x-shockwave-flash" data="media/calculator.swf" width="400" 
  2. height="400">
  3.    <param name="src" value="media/calculator.swf" />
  4. </object>
Anar a la pàgina anterior:
Exercicis d'autoavaluació
Anar a la pàgina següent:
Activitats