From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../com_estructurar_un_formulari_web/index.html | 316 +++++++ .../controls_de_formulari_originals/index.html | 325 +++++++ .../html/forms/el_teu_primer_formulari/index.html | 298 +++++++ files/ca/learn/html/forms/index.html | 356 ++++++++ .../html/forms/validacio_formularis/index.html | 829 ++++++++++++++++++ files/ca/learn/html/index.html | 57 ++ .../crear_hipervincles/index.html" | 320 +++++++ .../depurar_html/index.html" | 171 ++++ .../document_i_estructura_del_lloc_web/index.html" | 267 ++++++ .../index.html" | 93 ++ .../fonaments_de_text_html/index.html" | 950 +++++++++++++++++++++ .../format_de_text_avan\303\247at/index.html" | 677 +++++++++++++++ .../getting_started/index.html" | 735 ++++++++++++++++ .../html/introducci\303\263_al_html/index.html" | 65 ++ .../marcatge_una_carta/index.html" | 90 ++ .../index.html" | 271 ++++++ .../index.html" | 287 +++++++ .../index.html" | 294 +++++++ .../index.html" | 318 +++++++ .../images_in_html/index.html" | 373 ++++++++ .../imatges_sensibles/index.html" | 254 ++++++ .../html/multim\303\250dia_i_incrustar/index.html" | 75 ++ .../index.html" | 109 +++ .../index.html" | 79 ++ .../fonaments_de_la_taula_html/index.html | 618 ++++++++++++++ files/ca/learn/html/taules_html/index.html | 45 + .../index.html" | 462 ++++++++++ 27 files changed, 8734 insertions(+) create mode 100644 files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html create mode 100644 files/ca/learn/html/forms/controls_de_formulari_originals/index.html create mode 100644 files/ca/learn/html/forms/el_teu_primer_formulari/index.html create mode 100644 files/ca/learn/html/forms/index.html create mode 100644 files/ca/learn/html/forms/validacio_formularis/index.html create mode 100644 files/ca/learn/html/index.html create mode 100644 "files/ca/learn/html/introducci\303\263_al_html/crear_hipervincles/index.html" create mode 100644 "files/ca/learn/html/introducci\303\263_al_html/depurar_html/index.html" create mode 100644 "files/ca/learn/html/introducci\303\263_al_html/document_i_estructura_del_lloc_web/index.html" create mode 100644 "files/ca/learn/html/introducci\303\263_al_html/estructurar_una_p\303\240gina_de_contingut/index.html" create mode 100644 "files/ca/learn/html/introducci\303\263_al_html/fonaments_de_text_html/index.html" create mode 100644 "files/ca/learn/html/introducci\303\263_al_html/format_de_text_avan\303\247at/index.html" create mode 100644 "files/ca/learn/html/introducci\303\263_al_html/getting_started/index.html" create mode 100644 "files/ca/learn/html/introducci\303\263_al_html/index.html" create mode 100644 "files/ca/learn/html/introducci\303\263_al_html/marcatge_una_carta/index.html" create mode 100644 "files/ca/learn/html/introducci\303\263_al_html/qu\303\250_hi_ha_en_el_head_metadades_en_html/index.html" create mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/afegir_gr\303\240fics_vectorials_a_la_web/index.html" create mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/contingut_de_v\303\255deo_i_\303\240udio/index.html" create mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustaci\303\263/index.html" create mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/images_in_html/index.html" create mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/imatges_sensibles/index.html" create mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/index.html" create mode 100644 "files/ca/learn/html/multim\303\250dia_i_incrustar/mozilla_p\303\240gina_de_benvinguda/index.html" create mode 100644 "files/ca/learn/html/taules_html/avaluaci\303\263_estructurar_les_dades_dels_planeta/index.html" create mode 100644 files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html create mode 100644 files/ca/learn/html/taules_html/index.html create mode 100644 "files/ca/learn/html/taules_html/taula_html_caracter\303\255stiques_avan\303\247ades_i_laccessibilitat/index.html" (limited to 'files/ca/learn/html') diff --git a/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html b/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html new file mode 100644 index 0000000000..c0cb1e022c --- /dev/null +++ b/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html @@ -0,0 +1,316 @@ +--- +title: Com estructurar un formulari web +slug: Learn/HTML/Forms/Com_estructurar_un_formulari_web +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
+ +

Ara que ja coneixem els conceptes bàsics, veurem amb més detall els elements que s’utilitzen per a proporcionar estructura i significat a les diferents parts d’un formulari.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica i una fonaments bàsics de l’HTML.
Objectiu:Aprendre a estructurar els formularis HTML i donar-los semàntica perquè compleixin criteris d’usabilitat i accessibilitat.
+ +

La flexibilitat dels formularis els converteix en una de les estructures més complexes pel que fa al codi HTML; pots crear qualsevol tipus de formulari bàsic amb elements i atributs específics de formulari. Fer servir una estructura correcta en crear un formulari HTML et garantirà la usabilitat i l’accessibilitat del formulari.

+ +

L'element <form>

+ +

L’element {{HTMLElement("form")}} defineix formalment un formulari i els atributs que determinen el comportament del formulari. Cada vegada que vols crear un formulari HTML, has de començar per aquest element i imbricar-hi tot el contingut a dins. Moltes tecnologies d'assistència i complements de navegador poden descobrir elements {{HTMLElement("form")}} i implementar codis de suport (hooks) especials per a facilitar-ne l’ús.

+ +

Ja ho hem vist en l’article anterior.

+ +
Atenció: Està totalment prohibit imbricar un formulari dins d’un altre formulari. És una mala idea perquè la imbricació de formularis pot introduir comportaments del tot imprevisibles.
+ +

Sempre és possible utilitzar un control de formulari fora d'un element {{HTMLElement("form")}}. Si ho fas, per defecte aquest control no tindrà res a veure amb cap formulari, tret que l’associïs a algun formulari amb l'atribut form. Això es va introduir per a permetre unir explícitament un control amb un formulari encara que no hi estigui imbricat.

+ +

Avancem una mica i observem els elements estructurals que trobaràs en un formulari.

+ +

Els elements <fieldset> i <legend>

+ +

L’element {{HTMLElement("fieldset")}} és una manera convenient de crear grups de controls que comparteixen el mateix propòsit, amb les mateixes finalitats d’estil i semàntiques. Pots etiquetar un element {{HTMLElement("fieldset")}} incloent un element {{HTMLElement("legend")}} just a sota de l'etiqueta d'obertura {{HTMLElement("fieldset")}}. El text contingut en l'element {{HTMLElement("legend")}} descriu formalment el propòsit de l'element {{HTMLElement("fieldset")}} que hi ha inclòs.

+ +

Moltes tecnologies d'assistència utilitzaran l'element {{HTMLElement("legend")}} com si fos una part de l'etiqueta de cada control de formulari que hi ha dins de l'element {{HTMLElement("fieldset")}} corresponent. Per exemple, alguns lectors de pantalla com Jaws i NVDA llegiran el contingut de la llegenda abans de llegir el text de l’etiqueta de cada control.

+ +

Aquí hi ha un petit exemple:

+ +
<form>
+  <fieldset>
+    <legend>Mida del suc de fruita</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Petit</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Mitjà</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Gran</label>
+    </p>
+  </fieldset>
+</form>
+ +
+

Nota: Pots trobar aquest exemple en el fitxer fieldset-legend.html (o consultar-ne l’exemple en viu).

+
+ +

En llegir el formulari anterior, un lector de pantalla dirà «Mida del suc de fruita: petit» per al primer giny, «Mida del suc de fruita: mitjà» per al segon i «Mida del suc de fruita: gran» per al tercer.

+ +

El cas d’ús que mostra aquest exemple és un dels més importants. Cada vegada que tinguis un conjunt de botons d'opció, els hauries d’imbricar dins d’un element {{HTMLElement("fieldset")}}. Hi ha altres casos d'ús i, en general, l'element {{HTMLElement("fieldset")}} també es pot utilitzar per a introduir seccions en un formulari. L’ideal seria que els formularis llargs ocupin diverses pàgines, però si un formulari s’allarga i només ha d’ocupar una sola pàgina, posar les diferents seccions relacionades dins de diferents elements {{HTMLElement("fieldset")}} millora la usabilitat.

+ +

L’element {{HTMLElement("fieldset")}} és un dels elements clau per crear formularis accessibles per l’efecte que té sobre la tecnologia d’assistència; tanmateix, és la teva responsabilitat no abusar-ne. Si és possible, cada cop que creïs un formulari, intenta escoltar com l’interpreta un lector de pantalla. Si sona estrany, prova de millorar l'estructura del formulari.

+ +

L'element <label>

+ +

Com hem vist en l’article anterior, l’element {{HTMLElement("label")}} és la manera formal de definir una etiqueta per a un control de formulari en HTML. Aquest és l’element més important si vols crear formularis accessibles: quan s’implementen correctament, els lectors de pantalla llegeixen l’etiqueta d’un element de formulari juntament amb qualsevol instrucció relacionada, i també resulta útil per als usuaris sense discapacitats. Considerem aquest exemple, que hem vist en l’article anterior:

+ +
<label for="name">Nom:</label> <input type="text" id="name" name="user_name">
+ +

Amb l'etiqueta <label> associada correctament amb l’element <input> per l’atribut for (que conté l'atribut id de l'element <input>), un lector de pantalla llegirà una cosa així com «Nom, editar text».

+ +

Hi ha una altra manera d’associar un control de formulari amb una etiqueta: introduir el control de formulari dins de <label> i associar-l’hi implícitament.

+ +
<label for="name">
+  Nom: <input type="text" id="name" name="user_name">
+</label>
+ +

Fins i tot en aquests casos, però, es considera una bona pràctica establir-hi l’atribut for per garantir que totes les tecnologies d’assistència entenen la relació entre l'etiqueta i el control.

+ +

Si no hi ha cap etiqueta o si el control de formulari no està associat implícitament ni explícitament amb una etiqueta, un lector de pantalla llegirà alguna cosa com ara «Editar text en blanc», la qual cosa no és gaire útil.

+ +

També pots clicar les etiquetes!

+ +

Un altre avantatge de configurar correctament les etiquetes és que pots fer-hi clic o tocar-les per a activar-ne el control corresponent. Això és útil per a controls com les entrades de text, en què pots fer clic a l’etiqueta i també a l’entrada per a donar-hi el focus, però és útil, sobretot, per als botons d'opció i les caselles de verificació; l’àrea d’aquest control pot ser molt petita, de manera que és útil per a facilitar-ne l’activació.

+ +

Per exemple, si fas clic al text de l'etiqueta «M'agraden les cireres» de l'exemple següent, canviarà l'estat seleccionat de la casella taste_cherry:

+ +
<form>
+  <p>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
+    <label for="taste_1">M'agraden les cireres</label>
+  </p>
+  <p>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="banana">
+    <label for="taste_2">M'agraden els plàtans</label>
+  </p>
+</form>
+ +
+

Nota: Pots trobar aquest exemple en el fitxer checkbox-label.html (o consultar l’exemple en viu).

+
+ +

Etiquetes múltiples

+ +

Estrictament parlant, pots posar diverses etiquetes en un sol control, però no és una bona idea perquè algunes tecnologies d'assistència poden tenir problemes a l'hora de manejar-los. En el cas de tenir etiquetes múltiples, hauràs d’incloure el control i les seves múltiples etiquetes dins d’un únic element {{htmlelement("label")}}.

+ +

Considerem l'exemple següent:

+ +
<p>Els camps obligatoris van seguits de <abbr title="required">*</abbr>.</p>
+
+<!-- Doncs, això: --->
+<div>
+  <label for="username">Nom:</label>
+  <input type="text" name="username">
+  <label for="username"><abbr title="obligatori" aria-label="required">*</abbr></label>
+</div>
+
+<!-- seria millor fer-ho d'aquesta manera: -->
+<div>
+  <label for="username">
+    <span>Nom:</span>
+    <input id="username" type="text" name="username">
+    <abbr title="obligatori" aria-label="required">*</abbr>
+  </label>
+</div>
+
+<!-- Però això és probablement el millor: -->
+<div>
+  <label for="username">Nom: <abbr title="obligatori" aria-label="required">*</abbr></label>
+  <input id="username" type="text" name="username">
+</div>
+ +

{{EmbedLiveSample("Etiquetes_múltiples", 120, 120)}}

+ +

El paràgraf de la part superior estableix una regla per als elements obligatoris. La regla s'ha d'incloure abans que s’hagi d'utilitzar perquè els usuaris generals i els usuaris amb tecnologies d’assistència, com ara lectors de pantalla, puguin saber què vol dir abans de trobar un element obligatori. Tot i que això ajuda a informar els usuaris què significa un asterisc, no ens en podem refiar. Un lector de pantalla llegirà un asterisc així: «estrella». Si s'hi passa el ratolí per sobre, hauria d'aparèixer «obligatori», que s'aconsegueix amb l'atribut title. Els títols que es llegeixen en veu alta depenen de la configuració del lector de pantalla, de manera que és més fiable incloure també l’atribut aria-label, que els lectors de pantalla llegeixen sempre.

+ +

Les variants anteriors augmenten l’efectivitat a mesura que hi avances:

+ + + +
+

Nota: Pots obtenir resultats una mica diferents, segons quin sigui el teu lector de pantalla. Aquest ha estat provat amb VoiceOver (i NVDA es comporta de manera similar). Ens agradaria conèixer també les teves experiències.

+
+ +
+

Nota: Pots trobar aquest exemple a GitHub en el fitxer required-labels.html (o consulta l’exemple en viu). No provis l'exemple amb les dues o tres versions sense comentaris: els lectors de pantalla definitivament es confondran si tens diverses etiquetes i múltiples entrades amb el mateix ID.

+
+ +

Estructures HTML habituals que es fan servir als formularis

+ +

Més enllà de les estructures específiques dels formularis web, és bo recordar que l'etiquetatge del formulari només és HTML. Això significa que pots utilitzar tot el poder de l'HTML per a estructurar un formulari web.

+ +

Com es pot veure en els exemples, és una pràctica habitual delimitar una etiqueta i el control associat amb un element {{HTMLElement("li")}} dins d'un element de llista {{HTMLElement("ul")}} o {{HTMLElement("ol")}}. Els elements {{HTMLElement("p")}} i {{HTMLElement("div")}} també s'utilitzen de forma habitual. Per a estructurar diverses caselles de verificació o botons d'opció es recomana crear una llista.

+ +

A més de l’element {{HTMLElement("fieldset")}}, també és una pràctica habitual utilitzar títols HTML (per exemple, {{htmlelement("h1")}}, {{htmlelement("h2")}}) i seccionar (per exemple, {{htmlelement("section")}}), per a estructurar formularis complexos.

+ +

Per sobre de tot, et correspon a tu trobar un estil de codificació còmode que doni lloc a formularis que compleixin criteris d’accessibilitat i usabilitat. Les seccions independents amb funcions diferents haurien d’estar contingudes en un element {{htmlelement("section")}} separat, amb elements {{htmlelement("fieldset")}} per a contenir botons d'opció.

+ +

Aprenentatge actiu: construir l’estructura d’un formulari

+ +

Posem en pràctica aquestes idees i construïm un formulari una mica més complicat: un formulari de pagament. Aquest formulari contindrà diversos tipus de controls que encara no coneixes. No et preocupis; en veuràs el funcionament en l’article següent (Els controls de formulari bàsics originals). Per ara, llegeix amb detall les descripcions mentre segueixes les instruccions següents i comences a entendre quins elements utilitzem per a estructurar un formulari, i per què.

+ +
    +
  1. Per començar, fes una còpia local del fitxer de plantilla en blanc i del CSS del nostre formulari de pagament en un directori nou del teu ordinador.
    2. +
  2. Aplica el CSS a l’HTML afegint la línia següent a l’element {{htmlelement("head")}} de l’HTML: + 
    <link href="payment-form.css" rel="stylesheet">
    +
    3. +
  3. A continuació, afegeix l’element extern {{htmlelement("form")}} per a crear el teu formulari: + 
    <form>
+
+</form>
    +
    4. +
  4. Afegeix un títol d’encapçalament encapçalament i un paràgraf a les etiquetes <form> per a informar els usuaris com es marquen els camps obligatoris: + 
    <h1>Forma de pagament</h1>
+<p>Els camps obligatoris van seguits de <strong><abbr title = "obligatori">*</abbr></strong>.</p>
    +
    5. +
  5. A continuació, afegirem una secció més gran de codi al formulari, a sota de l’entrada anterior. Aquí veuràs que delimitem amb un element {{htmlelement("section")}} independent els camps amb la informació de contacte. A més, hi ha un conjunt de dos botons d'opció, cadascun dels quals col·loquem dins d’un element de llista ({{htmlelement("li")}}) propi. També hi ha dos textos estàndard {{htmlelement("input")}} i els seus elements {{htmlelement("label")}} associats, cadascun imbricat dins d'un element {{htmlelement("p")}} i un camp per a introduir una contrasenya. Afegeix aquest codi al teu formulari: + 
    <section>
+    <h2>Informació de contacte</h2>
+    <fieldset>
+      <legend>Títol </legend>
+      <ul>
+          <li>
+            <label for="title_1">
+              <input type="radio" id="title_1" name="title" value="K" >
+              Rei
+            </label>
+          </li>
+          <li>
+            <label for="title_2">
+              <input type="radio" id="title_2" name="title" value="Q">
+              Reina
+            </label>
+          </li>
+          <li>
+            <label for="title_3">
+              <input type="radio" id="title_3" name="title" value="J">
+              Bufó
+            </label>
+          </li>
+      </ul>
+    </fieldset>
+    <p>
+      <label for="name">
+        <span>Nom: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="name" name="username">
+    </p>
+    <p>
+      <label for="mail">
+        <span>Correu electrònic: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="email" id="mail" name="usermail">
+    </p>
+    <p>
+      <label for="pwd">
+        <span>Contrasenya:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="password" id="pwd" name="password">
+    </p>
+</section>
    +
    6. +
  6. La segona secció (<section>) del nostre formulari és la informació de pagament. Hi ha tres controls diferents, juntament amb les seves etiquetes, cadascun inclòs en un element <p>. El primer és un menú desplegable ({{htmlelement("select")}}) que selecciona el tipus de targeta de crèdit. El segon és un element <input> del tipus tel, que introdueix un número de targeta de crèdit; tot i que podríem haver utilitzat el tipus number, no volem la interfície d'usuari que s'hi aplica per defecte. L'últim és un element <input> del tipus date, per a introduir la data de caducitat de la targeta; aquest apareixerà amb un control de selecció de dates en els navegadors compatibles, i es converteix en una entrada de text normal en els navegadors no compatibles. Aquests tipus d’entrada més nous es reintrodueixen en l’article tipus d’entrades en HTML5.
    +
    + Introdueix el següent en la secció anterior: + 
    <section>
+    <h2>Informació de pagament</h2>
+    <p>
+      <label for="card">
+        <span>Tipus de targeta: </span>
+      </label>
+      <select id="card" name="usercard">
+        <option value="visa">Visa</option>
+        <option value="mc">Mastercard</option>
+        <option value="amex">American Express</option>
+      </select>
+    </p>
+    <p>
+      <label for="number">
+        <span>Número de targeta:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="tel" id="number" name="cardnumber">
+    </p>
+    <p>
+      <label for="date">
+        <span> Data de caducitat: </span>
+        <strong><abbr title="required">*</abbr></strong>
+        <em>en format mm/aa</em>
+      </label>
+      <input type="date" id="date" name="expiration">
+    </p>
+</section>
    +
    7. +
  7. L’última secció que afegim és molt més senzilla, perquè només conté un element {{htmlelement("button")}} de tipus submit, que envia les dades del formulari. Afegeix això al final del formulari: + 
    <p> <button type="submit">Validar el pagament</button> </p>
    +
    8. +
+ +

A sota pots veure en acció el formulari acabat (també el pots trobar a GitHub; consulta el codi d’origen a payment-form.html i executa’l en viu):

+ +

{{EmbedLiveSample("A_payment_form","100%",620, "", "en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}

+ +

Resum

+ +

Ara tens tot el coneixement que necessites per a estructurar adequadament els teus formularis web. En els pròxims articles tractarem moltes de les funcions que s’introdueixen aquí; l’article següent explica amb més detall l’ús de tots els diferents tipus de controls de formulari que voldràs utilitzar per a recopilar informació dels teus usuaris.

+ +

Consulta també

+ + + +

{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}

+ +

En aquest mòdul

+ + + +

Temes avançats

+ + diff --git a/files/ca/learn/html/forms/controls_de_formulari_originals/index.html b/files/ca/learn/html/forms/controls_de_formulari_originals/index.html new file mode 100644 index 0000000000..73ee2a9249 --- /dev/null +++ b/files/ca/learn/html/forms/controls_de_formulari_originals/index.html @@ -0,0 +1,325 @@ +--- +title: Controls de formulari originals +slug: Learn/HTML/Forms/Controls_de_formulari_originals +translation_of: Learn/Forms/Basic_native_form_controls +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}
+ +

En l’article anterior hem etiquetat un exemple de formulari web funcional, hem introduït alguns controls de formulari i elements estructurals comuns, però sobretot, ens hem centrat en l'accessibilitat. A continuació analitzarem amb detall la funcionalitat dels diferents controls de formulari, també anomenats ginys o widgets, i estudiarem totes les opcions que hi ha disponibles per a recollir diferents tipus de dades. En aquest article, veurem el conjunt original de controls de formulari que hi ha disponibles en tots els navegadors des dels primers dies.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica i una comprensió bàsica d’HTML.
Objectiu:Comprendre amb detall el conjunt de controls de formulari originals que hi ha disponibles als navegadors per a la recollida de dades, i com implementar-los amb HTML.
+ +

Ja coneixes alguns elements de formulari, com ara {{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}} i {{HTMLelement('input')}}. Aquest article exposa:

+ + + +
+

Nota: Les característiques que comentem en aquest article són compatibles amb tots els navegadors, però no amb tots els controls de formulari. En els dos articles següents expliquem els controls de formulari que s’han afegit a l’HTML5 més recentment. Si vols una referència més avançada, has de consultar la nostra referència d’elements de formulari HTML i, en particular, la nostra extensa referència de tipus <input>.

+
+ +

Camps d'entrada de text

+ +

Els camps d’entrada de text {{htmlelement("input")}} són els controls del formulari més bàsics. Són una manera molt còmoda de permetre a l’usuari introduir qualsevol tipus de dades, i ja n’hem vist alguns exemples senzills.

+ +
+

Nota: Els camps de text en format HTML són controls d’entrada de text pla. Això vol dir que no pots aplicar-hi una edició enriquida (negreta, cursiva, etc.). Tots els controls de formulari que trobis amb text enriquit són controls de formulari personalitzats creats amb HTML, CSS i JavaScript.

+
+ +

Tots els controls bàsics de text comparteixen alguns comportaments comuns:

+ + + +
+

Nota: L’element {{htmlelement("input")}} és únic entre els elements d’HTML perquè pot adoptar moltes formes diferents segons el valor del seu atribut type. S'utilitza per a crear la majoria de tipus de controls de formulari, que inclouen camps de text d'una sola línia, controls d'hora i data, controls sense entrada de text com ara caixes de selecció, botons d'opció i selectors de colors, i botons.

+
+ +

Camps de text d'una sola línia

+ +

Un camp de text d'una sola línia es crea en assignar a l'atribut {{htmlattrxref("type","input")}} d’un element {{HTMLElement("input")}} el valor text, o si l’atribut {{htmlattrxref("type","input")}} s’omet (perquè el valor per defecte d’aquest atribut és text). El valor text d’aquest atribut és també el valor alternatiu que el navegador utilitza si el valor que especifiques per a l’atribut {{htmlattrxref("type","input")}} li és desconegut (per exemple, si especifiques type="color" i el navegador no és compatible amb els selectors de color).

+ +
+

Nota: Consulta exemples de tots els tipus de camp de text d’una sola línia a GitHub, en el fitxer single-line-text-fields.html (també pots consultar l’exemple en viu).

+
+ +

A continuació es mostra un exemple bàsic de camp de text d'una sola línia:

+ +
<input type="text" id="comment" name="comment" value="I'm a text field">
+ +

Els camps de text d'una sola línia només tenen una restricció: si escrius text amb salts de línia, el navegador elimina els salts de línia abans d'enviar les dades al servidor.

+ +

La captura de pantalla següent mostra els tipus de controls d’entrada de text predeterminat, amb el focus i desactivat en Firefox 71 i Safari amb macOS i en Chrome 79 i Edge 18 amb Windows 10.

+ +

Captura de pantalla que mostra els estils de l’atribut en els estats predeterminat, amb el focus i desactivat per a un control d’entrada de text en Firefox, Safari, Chrome i Edge.

+ +
+

Nota: L'HTML5 va millorar el camp de text d'una sola línea bàsic original afegint valors especials per a l’atribut {{htmlattrxref("type","input")}} que aplica restriccions de validació específiques i altres funcions, per exemple a l'hora d'introduir adreces URL o números. Les tractarem en l’article següent: tipus d’entrada HTML5.

+
+ +

Camps de contrasenya

+ +

Un dels tipus d’entrada de text originals era el tipus de camp de text per a introduir una contrasenya (password):

+ +
<input type="password" id="pwd" name="pwd">
+ +

El valor de contrasenya (password) no afegeix cap restricció especial al text que s’introdueix al camp, però n’amaga el valor (per exemple, amb punts o asteriscs) i impedeix que altres usuaris el puguin llegir.

+ +

Tingues en compte que es tracta només d’una funció d’interfície d’usuari; si no és que envies el formulari d’una manera segura, s’enviarà un text pla, i això no és aconsellable per a la seguretat. Una persona maliciosa podria interceptar les teves dades i robar-te contrasenyes, dades de la targeta de crèdit o qualsevol cosa que hagis enviat. La millor manera de protegir els usuaris d’això és allotjar les pàgines que incloguin formularis en una connexió segura (és a dir, una adreça https://...), perquè les dades se xifrin abans d’enviar-se.

+ +

Els navegadors reconeixen les implicacions de seguretat de l'enviament de dades del formulari per una connexió no segura i disposen de missatges d’advertiments per a dissuadir els usuaris d'utilitzar formularis no segurs. Per a obtenir més informació sobre el que implementa Firefox, consulta l’article Contrasenyes insegures.

+ +

Contingut ocult

+ +

Un altre control de text original és el tipus d’entrada hidden. S'utilitza per a crear un control de formulari que és invisible per a l'usuari, però que s'envia al servidor juntament amb la resta de dades del formulari. Per exemple, pot ser que vulguis enviar una marca de temps al servidor que indiqui quan s’ha fet una comanda. Com que és un control ocult, l’usuari no el pot veure ni editar-ne el valor de manera intencionada, mai no rep el focus i un lector de pantalla tampoc no el detecta.

+ +
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
+
+ +

Quan crees aquest element, cal que hi configuris els atributs name i value. El valor es pot configurar dinàmicament amb JavaScript. El tipus d’entrada hidden no hauria de tenir cap etiqueta associada.

+ +

Amb HTML5 es van afegir altres tipus d'entrada de text, com {{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}} i {{HTMLElement("input/tel", "tel")}}. Es tracten en el tutorial següent: tipus d’entrada HTML5.

+ +

Elements de selecció: caselles de selecció i botons d'opció

+ +

Els elements de selecció (o checkable items, en anglès) són controls dels quals pots canviar l’estat fent-hi clic a sobre o en les etiquetes que hi estan associades. Hi ha dos tipus d’elements de selecció: la casella de selecció, o check box, i el botó d'opció, o radio button. Tots dos utilitzen l’atribut checked per indicar si el control està en estat seleccionat per defecte o no.

+ +

Val la pena assenyalar que aquests controls no es comporten exactament igual que altres controls de formulari. Per a la majoria de controls de formulari, un cop validat el formulari s’envien tots els controls que tenen un atribut name, fins i tot si no se n’ha omplert el valor. En el cas dels elements de selecció, els valors s’envien només si estan seleccionats. Si no ho estan, no s'envia res, ni tan sols el nom. Si estan seleccionats però no tenen cap valor, el nom s'envia amb el valor on.

+ +
+

Nota: Pots trobar els exemples d'aquesta secció a GitHub, en el fitxer checkable-items.html (o també consultar-ne l’exemple en viu).

+
+ +

Per a assolir una usabilitat/accessibilitat màxima, es recomana delimitar cada llista d’elements que estan relacionats entre si dins d'un element {{htmlelement("fieldset")}} amb un element {{htmlelement("legend")}} que ofereixi una descripció general de la llista. Cada parella d'elements {{htmlelement("label")}}/{{htmlelement("input")}} hauria d’estar continguda en un element de llista (o similar) propi. L'element associat {{htmlelement('label')}} se situa en general immediatament a continuació del botó d'opció o de la caixa de verificació, i les instruccions del grup de botons d'opció o caselles de selecció solen ser el contingut de l'element {{htmlelement("legend")}}. Observa els exemples estructurals que et presentem en l’enllaç anterior.

+ +

Caselles de verificació

+ +

Una casella de verificació es crea amb l’element {{HTMLElement("input")}} i un atribut type amb el valor {{HTMLElement("input/checkbox", "checkbox")}}.

+ +
<input type="checkbox" id="carrots" name="carrots" value="carrots" checked>
+
+ +

Si s’hi inclou l’atribut checked, la casella de verificació es marca automàticament en carregar-se la pàgina. Si s’hi fa clic, en la casella de verificació o en l’etiqueta associada, la casella de verificació canvia entre els estats activat o desactivat.

+ +

Les captures de pantalla següents mostren les caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10:

+ +

Caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10

+ +
+

Nota: La pseudoclasse {{cssxref(':default')}} selecciona les caselles de verificació i els botons d'opció que presenten l'atribut checked en el moment de carregar-se la pàgina, encara que ja no estiguin en l’estat checked. La pseudoclasse {{cssxref(':checked')}} selecciona només els elements que estan en estat checked.

+
+ +

A causa de la característica activada-desactivada que presenten les caselles de verificació, es consideren botons de commutació i molts desenvolupadors i dissenyadors han estès l’estil per defecte de la casella de selecció per a crear botons que semblen interruptors. Pots consultar-ne un exemple en acció aquí (o també pots consultar-ne el codi d’origen).

+ +

Botons d'opció

+ +

Un botó d'opció es crea amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor radio:

+ +
<input type="radio" id="soup" name="meal" checked>
+ +

És possible associar diversos botons de ràdio. Si comparteixen el mateix valor de l’atribut {{htmlattrxref("name","input")}}, es considera que estan en el mateix grup de botons. Només és possible marcar un botó d’un grup determinat cada vegada; això vol dir que quan se’n clica un, tots els altres es desmarquen automàticament. Quan el formulari s’envia, només s’envia el valor del botó d'opció seleccionat. Si no se'n selecciona cap, es considera que el conjunt de botons d'opció està en un estat desconegut i no s’envia cap valor amb el formulari. Quan s’ha clicat un dels botons d'opció d’un mateix grup de botons, no és possible desmarcar tots els botons sense reiniciar el formulari.

+ +
<fieldset>
+  <legend>Quin és el teu menjar preferit?</legend>
+  <ul>
+    <li>
+      <label for="soup">Sopa </label>
+      <input type="radio" id="soup" name="meal" value="soup" checked>
+    </li>
+    <li>
+      <label for="curry">Curry </label>
+      <input type="radio" id="curry" name="meal" value="curry">
+    </li>
+    <li>
+      <label for="pizza">Pizza </label>
+      <input type="radio" id="pizza" name="meal" value="pizza">
+    </li>
+  </ul>
+</fieldset>
+ +

Les captures de pantalla següents mostren els botons d'opció en els estats no marcat i marcat, amb el focus i desactivats: en Firefox 71 i Safari 13 amb MacOs i Chrome 79 i en Edge 18 amb Windows 10.

+ +

Botons d'opció en Firefox 71 i Safari 13 amb Mac i Chrome 79 i en Edge 18 amb Windows 10

+ +

Botons reals

+ +

En realitat, els botons d'opció no són botons, malgrat el nom. Ara anirem una mica més enllà i veurem botons autèntics! Hi ha tres tipus d’entrada que proporcionen botons:

+ +
+
submit
+
Envien les dades del formulari al servidor. Per als elements {{HTMLElement("button")}}, si s’omet l'atribut type (o es posa un valor de type no vàlid), s’obté un botó d'enviament.
+
reset
+
Restableixen tots els controls de formulari als valors predeterminats.
+
button
+
No presenten cap efecte automàtic, però es poden personalitzar amb codi JavaScript.
+
+ +

A més, l’element {{htmlelement("button")}} pot prendre un atribut type i imitar aquests tres tipus d'entrada. La diferència principal entre els dos elements és que els elements <button> autèntics admeten moltes més opcions d’estil.

+ +
+

Nota: També es pot representar com un botó el tipus d’entrada image. El tractarem més endavant també.

+
+ +
+

Nota: Pots trobar els exemples d'aquesta secció a GitHub, en els fitxers button-examples.html (o també pots consultar l’exemple en viu).

+
+ +

A continuació pots trobar exemples de cada tipus d’entrada <input> de tipus botó, juntament amb el tipus de botó equivalent.

+ +

submit

+ +
<button type="submit">
+    Aquest és un <strong>botó Enviar</strong>
+</button>
+
+<input type="submit" value="Aquest és un botó Enviar">
+ +

reset

+ +
<button type="reset">
+    Aquest és un <strong>botó Reiniciar</strong>
+</button>
+
+<Input type = "reset" value = "Aquest és un botó Reiniciar">
+ +

anonymous

+ +
<button type="button">
+    Aquest és un <strong>botó anònim</strong>
+</button>
+
+<input type="button" value="Aquest és un botó anònim">
+ +

Els botons sempre es comporten igual, tant si fas servir un element {{HTMLElement("button")}} com un element {{HTMLElement("input")}}. Però, com pots veure en els exemples, els elements {{HTMLElement("button")}} et permeten aplicar HTML al contingut inclòs entre les etiquetes <button> d'obertura i de tancament. En canvi, els elements {{HTMLElement("input")}} són elements buits; el contingut que s’hi mostra s’insereix dins de l’atribut value, i per tant només accepten contingut textual.

+ +

Els exemples següents mostren els tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10.

+ +

Tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10

+ +

Botons imatge

+ +

El control botó imatge es comporta exactament com un element {{HTMLElement("img")}}, però passa a comportar-se com un botó de validació quan un usuari hi fa clic.

+ +

Un botó imatge es crea amb un element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor image. Aquest element admet exactament el mateix conjunt d’atributs que l’element {{HTMLElement("img")}}, i a més, tots els atributs que són compatibles amb els altres botons de formulari.

+ +
<input type="image" alt="Fes-me clic!" src="my-img.png" width="80" height="30">
+ +

Si per a validar el formulari s’utilitza un botó imatge, aquest control no envia el seu valor, sinó que s’envien les coordenades X i Y del clic que s’ha fet en la imatge (les coordenades són relatives a la imatge, és a dir, que la part superior esquerra de la imatge representa les coordenades (0, 0)). Les coordenades s’envien com dos parells clau/valor:

+ + + +

Així, per exemple, observa que en fer clic a les coordenades (123, 456) de la imatge i enviar pel mètode get, aquests valors s’annexen a l’URL de la manera següent:

+ +
http://foo.com?pos.x=123&pos.y=456
+ +

Aquesta és una manera molt còmoda de construir un «mapa interactiu». La manera d’enviar i recuperar aquests valors es detalla en l’article Enviar les dades d’un formulari.

+ +

Selector de fitxers

+ +

Un últim tipus <input> que ens va arribar amb l'HTML inicial és el tipus entrada de fitxer. Els formularis poden enviar fitxers a un servidor (aquesta acció específica també es detalla en l’article Enviar les dades d’un formulari). El control de selecció de fitxers es pot utilitzar per triar un o més fitxers que es volen enviar.

+ +

Pots crear un control de selecció de fitxers amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor file. Pots restringir els tipus de fitxers que se seleccionen amb l’atribut {{htmlattrxref("accept","input")}}. A més, pots deixar que l’usuari triï més d’un fitxer si hi afegeixes l’atribut {{htmlattrxref("multiple","input")}}.

+ +

Exemple

+ +

En aquest exemple es crea un selector de fitxers que sol·licita fitxers gràfics d’imatge. En aquest cas, l'usuari té la possibilitat de seleccionar diversos fitxers.

+ +
<input type="file" name="file" id="file" accept="image/*" multiple>
+ +

En alguns dispositius mòbils, el selector de fitxers pot accedir a fotos, vídeos i àudio capturats directament per la càmera i el micròfon del dispositiu i afegir a l’atribut accept informació sobre la captura com ara:

+ +
<input type="file" accept="image/*;capture=camera">
+<input type="file" accept="video/*;capture=camcorder">
+<input type="file" accept="audio/*;capture=microphone">
+ +

Atributs comuns

+ +

Molts dels elements utilitzats per a definir controls de formulari tenen atributs específics propis. Això no obstant, hi ha un conjunt d’atributs comuns a tots els elements de formulari. Ja n'has conegut uns quants, però a continuació et presentem una llista d’aquests atributs comuns, perquè els tinguis com a referència:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de l'atributValor per defecteDescripció
autofocusfalseAquest atribut booleà permet especificar que un element adquireix el focus d'entrada automàticament quan es carrega la pàgina. En un document només hi pot haver un element associat a un formulari que tingui especificat aquest atribut.
disabledfalseAquest atribut booleà indica que l'usuari no pot interactuar amb l'element. Si aquest atribut no s'especifica, l'element hereta la configuració de l'element que el conté, per exemple, {{HTMLElement("fieldset")}}; si no hi ha cap element contenidor que tingui establert l'atribut disabled, l'element està habilitat.
formL’element <form> s’utilitza per a associar el control al formulari, quan aquest no hi està imbricat. El valor de l’atribut ha de ser l’atribut id d’un element {{HTMLElement("form")}} del mateix document. D’aquesta manera pots associar un formulari un control de formulari que n’estigui fora, encara que sigui dins d’un formulari diferent.
nameEl nom de l'element; s'envia amb les dades del formulari.
valueEl valor inicial de l'element.
+ +

Resum

+ +

Aquest article ha exposat els tipus d’entrada més antics: el conjunt original introduït els primers dies de l’HTML, que és compatible amb tots els navegadors. En l'article següent analitzarem els valors més recents de l’atribut type, que s’han afegit en HTML5.

+ +

{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}

+ +

En aquest mòdul

+ + + +

Temes avançats

+ + diff --git a/files/ca/learn/html/forms/el_teu_primer_formulari/index.html b/files/ca/learn/html/forms/el_teu_primer_formulari/index.html new file mode 100644 index 0000000000..3f327d4494 --- /dev/null +++ b/files/ca/learn/html/forms/el_teu_primer_formulari/index.html @@ -0,0 +1,298 @@ +--- +title: El teu primer formulari +slug: Learn/HTML/Forms/El_teu_primer_formulari +translation_of: Learn/Forms/Your_first_form +--- +
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
+ +

Aquest articles t'ofereix la primera experiència de creació d’un formulari web, que inclou dissenyar d’un formulari senzill amb els controls de formulari HTML adequats i altres elements HTML, afegir una mica d’estil molt senzill amb CSS i enviar les dades a un servidor. A mesura que avancem en el mòdul, ampliarem aquesta informació.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica i fonaments bàsics d’HTML.
Objectiu:Familiaritzar-se amb els formularis web, per a què serveixen, com dissenyar-los, i quins elements bàsics HTML necessitaràs per a casos senzills.
+ +

Què són els formularis web?

+ +

Els formularis web són un dels principals punts d’interacció entre un usuari i un lloc web o aplicació. Els formularis permeten als usuaris introduir dades, que en general s’envien a un servidor web per a processar-les i emmagatzemar-les (consulta l’article Enviar les dades d’un formulari web més endavant d’aquest mòdul) o permeten al client actualitzar a l’instant la interfície d’alguna manera (per exemple, afegir un altre element de llista, o mostrar o amagar una funció d'interfície d'usuari).

+ +

L’HTML d’un formulari web està format per un o més controls de formulari (de vegades anomenats ginys o, en anglès, widgets), a més d’alguns elements addicionals que ajuden a estructurar el formulari general, que sovint s’anomenen formularis HTML. Els controls poden ser camps de text d'una sola línia o de diverses línies, caixes desplegables, botons, caselles de selecció o botons d'opció, i es creen majoritàriament amb l'element {{htmlelement("input")}}, tot i que hi ha altres elements que també has de conèixer.

+ +

Els controls de formulari també es poden programar per a forçar la introducció de formats o valors específics (validació del formulari) i es poden combinar amb etiquetes de text que en descriuen el propòsit tant als usuaris estàndard com als que tenen discapacitats visuals.

+ +

Disseny del formulari

+ +

Abans de començar a codificar, sempre és millor fer un pas enrere i prendre't el temps necessari per pensar en el teu formulari. Dissenyar una maqueta ràpida t'ajudarà a definir el conjunt adequat de dades que vols que l'usuari introdueixi. Des del punt de vista de l'experiència d’usuari (UX), és important recordar que, com més gran sigui el teu formulari, més risc hi ha de frustrar les persones i perdre usuaris. Fes que sigui senzill i concís: demana només les dades que necessites.

+ +

El disseny de formularis és un pas important a l’hora de crear un lloc web o una aplicació. Aquest article no tracta de l’experiència d’usuari amb els formularis, però si vos aprofundir aquest tema, pots llegir els articles següents:

+ + + +

En aquest article crearem un formulari de contacte senzill. Fem-ne un esbós.

+ +

Una manera aproximada de fer un esbós de formulari

+ +

El nostre formulari inclourà tres camps de text i un botó. Demanem a l’usuari el nom, el correu electrònic i el missatge que vol enviar. En prémer el botó, les dades s’enviaran a un servidor web.

+ +

Aprenentatge actiu: Creació del nostre formulari HTML

+ +

D’acord, en primer lloc creem l’HTML per al nostre formulari. Utilitzarem els elements HTML següents: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} i {{HTMLelement("button")}}.

+ +

Abans d’avançar, fes una còpia local de la nostra plantilla HTML senzilla i hi introduiràs el formulari HTML.

+ +

L’element {{HTMLelement("form")}}

+ +

Tots els formularis comencen amb un element {{HTMLelement("form")}}, com ara:

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

Aquest element defineix formalment un formulari. És un element contenidor, com un element {{HTMLelement ("section")}} o {{HTMLelement ("footer")}}, però que conté específicament formularis; també admet alguns atributs específics per a configurar el comportament del formulari. Tots els atributs són opcionals, però és una pràctica habitual establir sempre com a mínim els atributs action i method:

+ + + +
+

Nota: Observa com funcionen aquests atributs en el nostre article Enviar les dades d’un formulari web, que trobaràs més endavant.

+
+ +

Per ara, afegeix l'element {{htmlelement("form")}} anterior al teu element HTML {{htmlelement("body")}}.

+ +

Els elements {{HTMLelement("label")}}, {{HTMLelement("input")}} i {{HTMLelement("textarea")}}

+ +

El nostre formulari de contacte no és complex: la part de l’entrada de les dades conté tres camps de text, cadascun amb el seu element {{HTMLelement("label")}} corresponent:

+ + + +

En termes de codi HTML, necessitem alguna cosa com la següent per a implementar aquests controls de formulari:

+ +
<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Nom:</label>
+    <input type="text" id="name" name="user_name">
+  </li>
+  <li>
+    <label for="mail">Correu electrònic:</label>
+    input type="email" id="mail" name="user_mail">
+  </li>
+  <li>
+    <label for="msg">Missatge:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+ </ul>
+</form>
+ +

Actualitza el codi del teu formulari perquè s'assembli a l’anterior.

+ +

Els elements {{HTMLelement("li")}} hi són per estructurar convenientment el nostre codi i facilitar el disseny (ho veuràs més endavant en aquest article). Incloem una etiqueta explícita per a cada control de formulari per motius d'usabilitat i accessibilitat. Tingues en compte l’ús de l’atribut for per a tots els elements {{HTMLelement ("label")}}, que pren com a valor l'identificador del control de formulari id al qual està associat; així és com un formulari s'associa a la seva etiqueta.

+ +

Fer-ho resulta molt útil: associa l’etiqueta amb el control del formulari i permet als usuaris de ratolí, trackpad i dispositius tàctils fer clic a l’etiqueta i activar el control corresponent, i també proporciona un nom accessible per als usuaris de lectors de pantalla. Trobaràs més informació sobre les etiquetes dels formularis en l’article Com estructurar un formulari web.

+ +

En l’element {{HTMLelement("input")}}, l’atribut més important és type. Aquest atribut és molt important perquè defineix la manera com apareix l’element {{HTMLelement("input")}}, i com es comporta. Trobaràs més informació més endavant, en l’article Els controls de formulari bàsics originals.

+ + + +

Per últim, però no per això menys important, cal destacar la sintaxi de <input> en contraposició a <textarea></textarea>. Aquesta és una de les curiositats de l’HTML. L’etiqueta <input> és un element buit, que significa que no necessita una etiqueta de tancament. En canvi, {{HTMLElement("textarea")}} no és un element buit, és a dir, s'hauria de tancar amb l'etiqueta final adequada. Això té una conseqüència en una característica específica dels formularis: la manera de definir el valor per defecte. Per a definir el valor predeterminat d'un element {{HTMLElement("input")}} has d'utilitzar l'atribut value de la manera següent:

+ +
<input type="text" value="per defecte aquest element s'omple amb aquest text">
+ +

D'altra banda, si vols definir un valor predeterminat per a un {{HTMLElement("textarea")}}, l'has de posar entre les etiquetes d'obertura i tancament de l'element {{HTMLElement("textarea")}}, com en el cas següent:

+ +
<textarea>
+per defecte aquest element s'omple amb aquest text
+</textarea>
+ +

L’element {{HTMLelement("button")}}

+ +

L'etiquetatge del nostre formulari és gairebé complet; només haurem d’afegir un botó que permeti a l’usuari enviar les dades un cop emplenat el formulari. Això es fa amb l’element {{HTMLelement("button")}}; afegeix el següent just a sobre de l’etiqueta de tancament </form>:

+ +
<li class="button">
+  <button type="submit">Envia el teu missatge</button>
+</li>
+ +

L’element {{htmlelement("button")}} també accepta un atribut type, que a la vegada accepta un d'aquests tres valors: submit, reset o button.

+ + + +
+

Nota: També pots utilitzar l’element {{HTMLElement("input")}} amb el type corresponent i crear un botó, per exemple <input type="submit">. L’avantatge principal de l’element {{HTMLelement("button")}} és que l’element {{HTMLelement("input")}} només admet text, mentre que l’element {{HTMLelement("button")}} admet contingut HTML complet i permet dissenyar botons més complexos i creatius.

+
+ +

Nocions bàsiques d’aplicació d’estil a formularis

+ +

Ara que has acabat d'escriure el codi HTML del teu formulari, desa’l i obre’l en un navegador. Observa que, de moment, presenta un aspecte més aviat lleig.

+ +
+

Nota: Si creus que el teu codi HTML no és correcte, compara’l amb el nostre exemple acabat: consulta el fitxer first-form.html (també pots consultar l’exemple en viu).

+
+ +

Aplicar estil a un formulari perquè quedi bé no és gens fàcil. En aquest article no t’ensenyarem a aplicar-hi estil de manera detallada; de moment, només afegirem una mica de CSS perquè sigui presentable.

+ +

Abans de res, afegeix un element {{htmlelement("style")}} a la teva pàgina, en la capçalera de l’HTML. Hi hauria d’haver una cosa com aquesta:

+ +
<style>
+
+</style>
+ +

Afegeix a l'etiqueta style el CSS següent:

+ +
form {
+  /* Centra el formulari a la pàgina */
+  margin: 0 auto;
+  width: 400px;
+  /* Esquema de formulari */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* Mida i alineació uniforme */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input,
+textarea {
+  / * Per garantir que tots els camps de text tenen la mateixa configuració de tipus de lletra
+     de manera predeterminada, les àrees de text tenen un tipus de lletra monospai */
+  font: 1em sans-serif;
+
+  /* Mida uniforme del camp de text */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Vores del camp de formulari */
+  border: 1px solid #999;
+}
+
+input:focus,
+textarea:focus {
+  /* Destacat addicional per a elements enfocats */
+  border-color: #000;
+}
+
+textarea {
+  /* Alinea els camps de text multilínies amb les seves etiquetes */
+  vertical-align: top;
+
+  /* Proporciona espai per a escriure algun text */
+  height: 5em;
+}
+
+.button {
+  /* Alinea els botons amb els camps de text */
+  padding-left: 90px; /* la mateixa mida que els elements d'etiqueta */
+}
+
+button {
+  /* Aquest marge addicional representa aproximadament el mateix espai que l’espai
+     entre les etiquetes i els seus camps de text */
+  margin-left: .5em;
+}
+ +

Desa’l i torna’l a carregar i observa que el teu formulari no s’hauria de veure tan lleig com abans.

+ +
+

Nota: Pots trobar la nostra versió a GitHub, en el fitxer first-form-styled.html (o consultar l’exemple en viu).

+
+ +

Enviar les dades del formulari al servidor web

+ +

L’última part, i potser la més complicada, és tractar les dades del formulari del costat del servidor. L’element {{HTMLelement("form")}} defineix on i com enviar les dades amb els atributs action i method.

+ +

Proporcionem un nom (name) a cada control de formulari. Els noms són importants tant del costat del client com del costat del servidor; informen el navegador sobre quin nom ha de donar a cadascuna de les dades i, del costat del servidor, permeten tractar cada dada pel nom. Les dades del formulari s’envien al servidor com a parells de nom/valor.

+ +

Per posar el nom a les dades d'un formulari, has d'utilitzar l'atribut name en cada control de formulari que recopilarà una informació específica. Vegem de nou una mica de codi del nostre formulari:

+ +
<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Nom:</label>
+    <input type="text" id="name" name="user_name" />
+  </li>
+  <li>
+    <label for="mail">Correu electrònic:</label>
+    <input type="email" id="mail" name="user_email" />
+  </li>
+  <li>
+    <label for="msg">Missatge:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+
+  ...
+
+ +

En el nostre exemple, el formulari enviarà 3 blocs de dades anomenats «user_name», «user_email» i «user_message». Aquestes dades s’enviaran a l’URL «/my-handling-form-page» pel mètode post de HTTP .

+ +

De la banda del servidor, l'script a l'URL «/my-handling-form-page» rebrà les dades com una llista de 3 elements clau/valor continguts en la sol·licitud HTTP. La manera de gestionar aquest script depèn de les dades. Cada llenguatge de servidor (PHP, Python, Ruby, Java, C#, etc.) té el seu mecanisme propi per al tractament de les dades de formulari. Està fora de l’àmbit d’aquest article aprofundir en aquest tema, però si vols saber-ne més, et proporcionem alguns exemples en el nostre article Enviar les dades d’un formulari web que trobaràs més endavant.

+ +

Resum

+ +

Enhorabona!, has creat el teu primer formulari web. Hauria de presentar un aspecte semblant a aquest:

+ +

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', '/en-US/Learn/Forms/Your_first_form/Example') }}

+ +

Això només és el començament; ara toca aprofundir. Els formularis tenen molt més poder que el que hem vist aquí i la resta d'articles d'aquest mòdul t'ajudaran a dominar-los.

+ +

{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}

+ +

En aquest mòdul

+ + + +

Temes avançats

+ + diff --git a/files/ca/learn/html/forms/index.html b/files/ca/learn/html/forms/index.html new file mode 100644 index 0000000000..bfd01dcf91 --- /dev/null +++ b/files/ca/learn/html/forms/index.html @@ -0,0 +1,356 @@ +--- +title: HTML forms guide +slug: Learn/HTML/Forms +tags: + - Featured + - Formularis + - Guía + - HTML + - Web +translation_of: Learn/Forms +--- +

Aquesta guia és una sèrie d'articles que l'ajudaran a dominar els formularis HTML. Els formularis HTML són una eina molt potent per interactuar amb els usuaris; No obstant això, per raons històriques i tècniques, no sempre és obvi com usar-los al seu màxim potencial. En aquesta guia, anem a cobrir tots els aspectes dels formularis HTML, des de donar estil a l'estructura, des de la manipulació de dades amb components personalitzats. Aprendràs a gaudir de la gran potència que ofereixen!

+ +

Articles

+ +
    +
  1. El meu primer formulari HTML
    2. +
  2. Com estructurar un formulari HTML
    3. +
  3. Formularis widgets nadius
    4. +
  4. CSS amb formularis HTML +
      +
    1. Estil en formularis HTML
      2. +
    2. Estils avançats en formularis HTML
      3. +
    3. Taula de propietats compatibles per formularis widgets
      4. +
    +
    5. +
  5. Enviar y recuperar dades del formulari
    6. +
  6. Validació de dades del formulari
    7. +
  7. Contruir formularis widgets personalitzats
    8. +
  8. Enviament de formularis amb JavaScript +
      +
    1. Utilitzant l'objecte FormData
      2. +
    +
    9. +
  9. Formularis HTML en navegadors antics
    10. +
+ +

Documentació HTML

+ +

Elements HTML

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementInterfície DOM relacionatDescripció
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}L'element button representa un botó que es premi.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}L'element datalist conté un conjunt d'elements {{ HTMLElement("option") }} que representen les opcions possibles per al valor d'altres elements de formulari.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}El fieldset s'utilitza per agrupar diversos elements formulari dins d'un formulari.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}L'element form representa una secció del document que conté l'element interactiu que permet a un usuari enviar informació a un servidor web.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}L'element input s'utilitza per crear controls interactius per als formularis.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}L'element keygen existeix per facilitar la generació de material clau, i l'enviament de la clau pública com a part d'un formulari HTML
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}L'element label representa un títol d'un article en una interfície d'usuari
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}L'element legend representa una llegenda per al contingut del seu pare {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}L'element metre representa o bé un valor escalar dins d'un rang conegut o un valor fraccionari.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}l'element optgroup crea un grup d'opcions dins d'un element {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}l'element HTML option  s'utilitza per crear un control que representa un element dins d'un element {{ HTMLElement("select") }}, o un {{ HTMLElement("optgroup") }} o un {{ HTMLElement("datalist") }}.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}L'element output representa el resultat d'un càlcul.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}L'element progress s'utilitza per veure el progrés de la finalització d'una tasca.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}L'element select representa un control que presenta un menú d'opcions.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}L'element textarea representa un control d'edició de text pla multilínia.
+ +
+

Nota: Tots els elements formulari, com tots els elements d'HTML, suportan la interfície DOM {{domxref("HTMLElement")}}.

+
+ +

Atributs HTML

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom AtributElementsDescripció
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Llista de tipus que accepta el servidor, normalment un tipus de fitxer.
accept-charset{{ HTMLElement("form") }}Llista de jocs de caràcters suportats.
action{{ HTMLElement("form") }}L'URI d'un programa que processa la informació presentada a través del formulari.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica si els controls d'aquest formulari poden tenir per defecte els seus valors emplenats automàticament pel navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}L'element ha de tenir el focus automàticament després de carregar la pàgina.
challenge{{ HTMLElement("keygen") }}Una cadena proposada que es presenta juntament amb la clau pública.
checked{{ HTMLElement("input") }}Indica si l'element s'ha de comprovar en carregar la pàgina.
cols{{ HTMLElement("textarea") }}Defineix el nombre de columnes en una àrea de text.
data{{ HTMLElement("object") }}Especifica l'adreça URL del recurs.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si l'usuari pot interactuar amb l'element.
enctype{{ HTMLElement("form") }}Defineix el tipus de contingut de les dades del formulari quan el mètode és POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descriu els elements que pertanyen a aquest.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica el formulari que és el propietari de l'element.
high{{ HTMLElement("meter") }}Indica el límit inferior del rang superior.
keytype{{ HTMLElement("keygen") }}Especifica el tipus de clau generada.
list{{ HTMLElement("input") }}Identifica una llista d'opcions predefinides per suggerir a l'usuari.
low{{ HTMLElement("meter") }}Indica el límit superior del rang inferior.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica el valor màxim permès.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defineix el nombre màxim de caràcters permesos en l'element.
method{{ HTMLElement("form") }}Defineix quin mètode HTTP a utilitzar al enviar el formulari. Pot ser GET (per defecte) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica el valor mínim permès.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica si diversos valors es poden introduir en una entrada del correu electrònic o tipus  arxiu.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Nom de l'element. Per exemple el usat en el servidor per identificar els camps de formulari enviat.
novalidate{{ HTMLElement("form") }}Aquest atribut indica que el formulari no ha de ser validat quan sigui enviat.
optimum{{ HTMLElement("meter") }}Indica el valor numèric òptim.
pattern{{ HTMLElement("input") }}Defineix una expressió regular que es validarà el valor de l'element en contra.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Proporciona un suggeriment a l'usuari de què es poden introduir en el camp.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica si l'element pot ser editat o no.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si es requereix aquest element per omplir o no.
rows{{ HTMLElement("textarea") }}Defineix el nombre de files en una àrea de text.
selected{{ HTMLElement("option") }}Defineix un valor que serà seleccionat en carregar la pàgina.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defineix l'amplada de l'element (en píxels). Si el atribut type de l'element és text o contrasenya, llavors és el nombre de caràcters.
src{{ HTMLElement("img") }}La URL del contingut integrable.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defineix el tipus d'element.
usemap{{ HTMLElement("img") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defineix un valor predeterminat que es mostrarà en l'element en la càrrega de la pàgina.
wrap{{ HTMLElement("textarea") }}Indica si el text ha de ser embolicat o no.
+ +

Referència normativa

+ + diff --git a/files/ca/learn/html/forms/validacio_formularis/index.html b/files/ca/learn/html/forms/validacio_formularis/index.html new file mode 100644 index 0000000000..0b76183d7e --- /dev/null +++ b/files/ca/learn/html/forms/validacio_formularis/index.html @@ -0,0 +1,829 @@ +--- +title: Validació de formularis del costat del client +slug: Learn/HTML/Forms/Validacio_formularis +translation_of: Learn/Forms/Form_validation +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
+ +

Abans d’enviar dades al servidor és important assegurar-se que s’emplenen tots els controls de formulari necessaris en el format correcte. Es denomina validació de formularis del costat del client, i ajuda que les dades enviades coincideixin amb els requisits establerts en els diversos controls de formulari. Aquest article et permet conèixer els conceptes bàsics i veure exemples de validació de formularis del costat del client.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica i nocions d'HTML, CSS i JavaScript.
Objectiu:Entendre què és la validació de formularis de costat del client, per què és important i conèixer-ne diverses tècniques d’implementació.
+ +

La validació del costat del client és una comprovació inicial i una característica important que garanteix una bona experiència d’usuari; si es detecten dades no vàlides del costat del client, l'usuari pot corregir-les immediatament. Si van al servidor i aquest les rebutja, es genera un retard perquè les dades s’envien de tornada a la banda del client perquè l'usuari les corregeixi.

+ +

Tanmateix, la validació del costat del client no s'ha de considerar una mesura de seguretat exhaustiva. Les aplicacions sempre han de dur a terme comprovacions de seguretat de qualsevol informació que s’envia en un formulari tant del costat del servidor com també del costat del client, perquè la validació del client és molt fàcil de desactivar i qualsevol usuari maliciós pot enviar fàcilment dades incorrectes al teu servidor. Llegeix La seguretat dels llocs web per a fer-te una idea de què podria passar; implementar la validació del costat del servidor és fora de l’àmbit d’aquest mòdul, però l’has de tenir en compte.

+ +

Què és la validació de formularis?

+ +

Ves a qualsevol lloc web popular que tingui un formulari d’inscripció i observa que et fan comentaris quan no introdueixes les dades en el format que s’espera. Rebràs missatges com ara:

+ + + +

Això es coneix com validació de formulari. Quan introdueixes dades, el navegador i/o el servidor web comproven que les dades estan en el format correcte i són dins de les restriccions que l’aplicació estableix. La validació que es fa en el navegador s’anomena validació del costat del client, mentre que la validació que es fa en el servidor s’anomena validació del costat del servidor. En aquest article ens centrem en la validació del costat del client.

+ +

Si la informació està en el format correcte, l'aplicació permet que les dades que les dades s’enviïn al servidor i (normalment) es guarden en una base de dades; si la informació no té el format correcte, es proporciona a l'usuari un missatge d'error en què li explica què ha de corregir, i s'ha de tornar a provar.

+ +

Volem fer que l’emplenament dels formularis web sigui tan fàcil com sigui possible. Aleshores, per què insistim que cal validar els nostres formularis? Hi ha tres raons principals:

+ + + +

Els diferents tipus de validació del costat del client

+ +

Els llocs web poden presentar dos tipus diferents de validació del costat del client

+ + + +

Ús de la validació de formulari integrada

+ +

Una de les característiques més significatives dels controls de formulari HTML5 és la capacitat de validar la majoria de les dades de l'usuari sense dependre de JavaScript. Això es fa gràcies als atributs de validació dels elements del formulari. Ja n'hem vist uns quants, però en fem una recapitulació:

+ + + +

Si les dades que s’introdueixen en un camp de formulari segueixen les regles especificades pels atributs anteriors, es consideren vàlides. Si no és així, es consideren no vàlides.

+ +

Quan un element és vàlid, es compleixen els aspectes següents:

+ + + +

Quan un element no és vàlid, es verifica el següent:

+ + + +
+

Nota: Els diversos errors que impedeixen enviar el formulari inclouen {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o {{domxref('validityState.customError','customError')}}.

+
+ +

Exemples de validació de formularis integrada

+ +

En aquesta secció provarem alguns dels atributs que hem esmentat abans.

+ +

Un fitxer d’inici senzill

+ +

Comencem amb un exemple senzill: una entrada que permet triar si prefereixes un plàtan o una cirera. Aquest exemple inclou una entrada de text {{HTMLElement("input")}} senzilla amb una etiqueta {{htmlelement("label")}} associada i un {{htmlelement("button")}} de validació. En pots trobar el codi d’origen a GitHub, en el fitxer fruit-start.html, i l’exemple en viu a continuació.

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry?</label>
+  <input id="choose" name="i_like">
+  <button>Submit</button>
+</form>
+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

{{EmbedLiveSample("Un_fitxer_d’inici_senzill", "100%", 80)}}

+ +

Per començar, fes una còpia del fitxer fruit-start.html en un directori nou del teu disc dur.

+ +

L’atribut required

+ +

La característica de validació HTML5 més simple és l’atribut required (obligatori). Afegeix aquest atribut a l'element si vols que una entrada sigui obligatòria. Quan es defineix aquest atribut, l'element coincideix amb la pseudoclasse {{cssxref(':required')}} de la interfície d'usuari i el formulari no s’envia; si l'entrada és buida, en el moment de validar mostra un missatge d'error. L’entrada, tot i que és buida, es considera no vàlida i coincideix amb la pseudoclasse de la interfície d'usuari {{cssxref(':invalid')}}.

+ +

Afegeix un atribut required a la teva entrada, com es mostra a continuació.

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry? (requested)</label>
+  <input id="choose" name="i_like" required>
+  <button>Submit</button>
+</form>
+ +

Tingues en compte el CSS que s'ha inclòs en el fitxer d'exemples:

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:required {
+  background-image: linear-gradient(to right, pink, lightgreen);
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

Aquest CSS afegeix una vora vermella quan l’entrada no és vàlida i una vora negra més subtil quan és vàlida. També hi afegeix un degradat de fons quan l’entrada és necessària i no vàlida. Prova’n el comportament nou en l'exemple següent:

+ +

{{EmbedLiveSample("L’atribut_required", "100%", 80)}}

+ +
+

Nota: Pots trobar aquest exemple en directe a GitHub en el fitxer fruit-validation.html (consulta’n també el codi d’origen.)

+
+ +

Prova de validar el formulari sense cap valor. Observa que l’entrada no vàlida pren el focus, apareix un missatge d’error per defecte («Emplena aquest camp») i el formulari no s’envia.

+ +

La presència de l'atribut required en qualsevol element que admet aquest atribut significa que l'element coincideix amb la pseudoclasse {{cssxref(':required')}}, tant si té un valor com si no. Si {{HTMLElement("input")}} no té cap valor, l’element input coincideix amb la pseudoclasse {{cssxref(':invalid')}}.

+ +
+

Nota: Si vols oferir una bona experiència d'usuari, indica quan són obligatoris els camps de formulari. No és només una bona experiència d’usuari, sinó que ho demanen les directrius d’accessibilitat de WCAG. A més, demana només les dades que necessites realment. Per què necessites saber, per exemple, el gènere o el títol d’algú?

+
+ +

Validar una expressió regular

+ +

Una altra característica útil de la validació és l’atribut pattern, que espera una expressió regular com a valor. Una expressió regular (regex) és un patró que es pot utilitzar per a establir combinacions de caràcters en cadenes de text, de manera que resulten ideals per a la validació de formularis i serveixen per a molts altres usos en JavaScript.

+ +

Els regex són força complexos i no pretenem ensenyar-los exhaustivament en aquest article. A continuació te’n mostrem alguns exemples perquè et puguis fer una idea bàsica de com funcionen.

+ + + +

Hi ha moltes més possibilitats, que no presentem aquí. Per a obtenir-ne una llista completa i molts exemples, consulta la nostra documentació sobre expressions regulars.

+ +

Posem-ho en pràctica amb un exemple. Afegeix al teu codi HTML un atribut pattern, d'aquesta manera:

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry?</label>
+  <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
+  <button>Submit</button>
+</form>
+
+ + + +

Això ens proporciona l’actualització següent. Prova-ho:

+ +

{{EmbedLiveSample("Validar_una_expressió_regular", "100%", 80)}}

+ +
+

Nota: Pots trobar aquest exemple en directe a GitHub en el fitxer fruit-pattern.html (consulta’n també el codi d’origen).

+
+ +

En aquest exemple, l’element {{HTMLElement("input")}} accepta un dels quatre valors possibles: les cadenes «banana», «Banana», «cherry» o «Cherry». Les expressions regulars distingeixen entre majúscules i minúscules, però hem eliminat aquesta característica utilitzant un patró «Aa» extra situat entre claudàtors.

+ +

En aquest punt, intenta canviar el valor de l’atribut pattern per a igualar alguns dels exemples que has vist abans, i observa com això afecta els valors que pots introduir perquè que el valor d’entrada sigui vàlid. Prova d'escriure-hi alguna cosa i observa què passa. Intenta tant com sigui possible que estiguin relacionats amb la fruita perquè els teus exemples siguin coherents.

+ +

Si un valor {{HTMLElement("input")}} no buit no coincideix amb el patró de l'expressió regular, input coincideix amb la pseudoclasse {{cssxref(':invalid')}}.

+ +
+

Nota: Alguns tipus d'elements {{HTMLElement("input")}} no necessiten validar una expressió regular amb l’atribut pattern. Si especifiques el tipus email, per exemple, el valor d’entrada es valida amb un patró d’adreça de correu electrònic ben formada, o amb un patró que coincideix amb una llista d’adreces de correu electrònic separades per comes si té l’atribut multiple.

+
+ +
+

Nota: L'element {{HTMLElement("textarea")}} no admet l'atribut pattern.

+
+ +

Restringir la longitud de les entrades

+ +

Pots restringir la longitud de caràcters de tots els camps de text creats amb {{HTMLElement("input")}} o {{HTMLElement("textarea")}} amb els atributs minlength i maxlength. Un camp no és vàlid si té un valor que té menys caràcters que el valor assignat a minlength, o més que el valor assignat a maxlength.

+ +

Els navegadors sovint no permeten que l'usuari escrigui un valor més llarg del que s'espera en els camps de text. Una experiència d’usuari encara més bona que utilitzar només maxlength és proporcionar també comentaris de recompte de caràcters d’una manera accessible, i deixar editar el contingut fins que sigui d’una mida més reduïda. Un exemple d'això és el límit de caràcters de Twitter. Per a això pots utilitzar JavaScript, incloses les solucions que fan servir maxlength.

+ +

Restringir els valors de les entrades

+ +

Per als camps d’entrada de números (és a dir, <input type="number">), es poden utilitzar els atributs min i max, que proporcionen un rang de valors vàlids. Un camp que conté un valor que cau fora d'aquest interval no és vàlid.

+ +

Observem-ne un altre exemple. Crea una còpia nova del fitxer fruit-start.html.

+ +

A continuació suprimeix el contingut de l'element <body> i substitueix-lo pel següent:

+ +
<form>
+  <div>
+    <label for="choose">Would you prefer a banana or a cherry?</label>
+    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">How many would you like?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+ + + + + +

Aquí tens l’execució en viu de l’exemple:

+ +

{{EmbedLiveSample("Restringir_els_valors_de_les_entrades", "100%", 100)}}

+ +
+

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer fruit-length.html (o també consultar-ne el codi d’origen.)

+
+ +
+

Nota: <input type="number"> (i altres tipus, com ara range i date) també poden tenir un atribut step, que especifica quin increment augmenta o disminueix el valor quan s'utilitzen els controls d'entrada (com ara els botons numèrics d’increment i decrement). En l'exemple anterior no hem inclòs un atribut step, de manera que el valor per defecte és 1. Això vol dir que els números de coma flotant (com ara el 3,2) també es mostren com a no vàlids.

+
+ +

Exemple complet

+ +

A continuació hi ha un exemple complet que mostra l'ús de les funcions de validació integrades en HTML. En primer lloc, una mica d'HTML:

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
+      <!-- While only one radio button in a same-named group can be selected at a time,
+           and therefore only one radio button in a same-named group having the "required"
+           attribute suffices in making a selection a requirement -->
+      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
+      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">How old are you?</label>
+    <!-- The pattern attribute can act as a fallback for browsers which
+         don't implement the number input type but support the pattern attribute.
+         Please note that browsers that support the pattern attribute will make it
+         fail silently when used with a number field.
+         Its usage here acts only as a fallback -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
+    <datalist id="l1">
+      <option>Banana</option>
+      <option>Cherry</option>
+      <option>Apple</option>
+      <option>Strawberry</option>
+      <option>Lemon</option>
+      <option>Orange</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">What's your e-mail address?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Leave a short message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+ +

I ara, una mica de CSS per a aplicar estil al codi HTML:

+ +
form {
+  font: 1em sans-serif;
+  max-width: 320px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+textarea,
+fieldset {
+  width: 100%;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}
+ +

Això dona la sortida següent:

+ +

{{EmbedLiveSample("Exemple_complet", "100%", 420)}}

+ +

Consulta una llista completa d’atributs que es poden utilitzar per a restringir els valors d’entrada i els tipus d’entrada que els admeten en els atributs relacionats amb la validació.

+ +
+

Nota: Pots trobar aquest exemple en viu a GitHub, en el fitxer full-example.html (o consultar-ne també el codi d’origen).

+
+ +

Validació de formularis amb JavaScript

+ +

Has d’utilitzar JavaScript si vols controlar l’aspecte dels missatges d’error originals o fer-los compatibles amb els navegadors antics que no admeten la validació de formularis integrada en HTML. En aquesta secció veurem les diferents maneres de fer això.

+ +

L’API de validació de restriccions

+ +

La majoria dels navegadors admeten l'API de validació de restriccions, que consta d'un conjunt de mètodes i propietats disponibles en les interfícies DOM per als elements de formulari següents:

+ + + +

L’API de validació de restriccions posa a la disposició dels elements anteriors les propietats següents.

+ + + +

L'API de validació de restriccions també ofereix als elements anteriors els mètodes següents:

+ + + +

Missatges d’error personalitzats

+ +

Com has vist en els exemples de restricció de validació HTML5 anteriors, cada vegada que un usuari intenta enviar un formulari no vàlid, el navegador mostra un missatge d'error. La manera com es mostra aquest missatge depèn del navegador.

+ +

Aquests missatges automatitzats tenen dos inconvenients:

+ + + +

Exemple d’un missatge d’error a Firefox en francès en una pàgina en anglès

+ +

La personalització d’aquests missatges d’error és un dels casos d’ús més comuns de l’API de validació de restriccions. Vegem la manera de fer-ho amb un exemple senzill.

+ +

Començarem amb alguns elements senzills d’HTML (no dubtis a posar-ho en un fitxer HTML en blanc; utilitza una còpia nova del fitxer fruit-start.html com a base, si vols):

+ +
<form>
+  <label for="mail">I would like you to provide me with an e-mail address: </label>
+  <input type="email" id="mail" name="mail">
+  <button>Submit</button>
+</form>
+ +

I afegeix a la pàgina el JavaScript següent:

+ +
const email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity(«I am expecting an e-mail address!»);
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

Aquí emmagatzemem una referència a l’entrada de correu electrònic, i a continuació afegim un detector d’esdeveniments que executa el codi de content cada vegada que es modifica el valor dins de l’entrada.

+ +

Dins del codi de content, comprovem si la propietat validity.typeMismatch de l’entrada de correu electrònic retorna true, que significa que el valor que conté no coincideix amb el patró d’una adreça de correu electrònic ben formada. Si és així, cridem el mètode setCustomValidity() amb un missatge personalitzat. Això fa que l’entrada no sigui vàlida, de manera que quan intentes enviar el formulari, l’enviament falla i es mostra el missatge d’error personalitzat.

+ +

Si la propietat validity.typeMismatch retorna false, cridem el mètode setCustomValidity() amb una cadena buida. Això fa que l’entrada sigui vàlida, i el formulari s’envia.

+ +

Pots provar-ho a continuació:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

+ +
+

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer custom-error-message.html (consulta’n també el codi d’origen).

+
+ +

Un exemple més detallat

+ +

Ara que hem vist un exemple molt senzill; observem com podem utilitzar aquesta API per a crear una validació personalitzada una mica més complexa.

+ +

En primer lloc, el codi HTML. Un cop més, no dubtis a construir-lo amb nosaltres:

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Please enter an email address:</span>
+      <input type="email" id="mail" name="mail" required minlength="8">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <button>Submit</button>
+</form>
+ +

Aquest formulari senzill utilitza l’atribut novalidate, que desactiva la validació automàtica del navegador; això permet que el nostre codi prengui el control de la validació. Però això no desactiva la compatibilitat per a l’API de validació de restriccions ni l’aplicació de pseudoclasses CSS com {{cssxref(":valid")}}, etc. Això vol dir que, tot i que el navegador no comprova automàticament la validesa del formulari abans d’enviar les dades, encara pots fer-ho tu mateix i dissenyar el formulari en conseqüència.

+ +

La nostra entrada per validar és <input type="email">, que està marcada com a required i té una longitud mínima (minlength) de 8 caràcters. Comprovem-ho amb el nostre codi i mostrem un missatge d'error personalitzat per a cada element.

+ +

El nostre objectiu és mostrar els missatges d'error dins d'un element <span>. L'atribut aria-live està establert a <span> per a assegurar-nos que el missatge d'error personalitzat serà visible per a tothom, inclosos els usuaris que empren lectors de pantalla.

+ +
+

Nota: Un element clau aquí és el fet que establir l’atribut novalidate en el formulari impedeix el formulari de mostrar els quadres de diàleg de missatge d’error propis, i permet de mostrar els missatges d’error personalitzats en el DOM de la manera que escollim.

+
+ +

Ara una mica de CSS bàsic per a millorar una mica l’aspecte del formulari i proporcionar informació visual quan les dades d’entrada no són vàlides:

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Aquest és el nostre estil per als camps no vàlids */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* Aquest és l'estil per als nostres missatges d'error */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

A continuació veurem el JavaScript que implementa la validació d'errors personalitzada.

+ +
// Hi ha moltes maneres de triar un node DOM; amb aquest obtenim el formulari en si i el control de formulari de tipus caixa d’entrada
+// de correu electrònic, i també l’element span en què col·locarem el missatge d’error.
+const form  = document.getElementsByTagName('form')[0];
+
+const email = document.getElementById('mail');
+const emailError = document.querySelector('#mail + span.error');
+
+email.addEventListener('input', function (event) {
+  // Cada vegada que l’usuari escriu alguna cosa, comprovem si els
+  // camps del formulari són vàlids.
+
+  if (email.validity.valid) {
+    // En cas que hi hagi un missatge d’error visible, si el camp
+    // és vàlid, n’eliminem el missatge d'error.
+    emailError.innerHTML = ''; // Restablim el contingut del missatge
+    emailError.className = 'error'; // Restablim l'estat visual del missatge
+  } else {
+    // Si encara hi ha un error, mostrem l'error correcte
+    ShowError();
+  }
+});
+
+form.addEventListener('submit', function (event) {
+  // si el camp de correu electrònic és vàlid, enviem el formulari
+
+  if(!email.validity.valid) {
+    // Si no és així, mostrem el missatge d'error corresponent
+    showError();
+    // Aleshores, cancel·lem l’esdeveniment i evitem que s’enviï el formulari
+    event.preventDefault();
+  }
+});
+
+function showError() {
+  if(email.validity.valueMissing) {
+    // Si el camp està buit
+    // mostra el missatge d'error següent.
+    emailError.textContent = 'You need to enter an e-mail address.';
+  } else if(email.validity.typeMismatch) {
+    // Si el camp no conté una adreça de correu electrònic
+    // mostra el missatge d'error següent.
+    emailError.textContent = 'Entered value needs to be an e-mail address.';
+  } else if(email.validity.tooShort) {
+    // Si les dades són massa curtes
+    // mostra el missatge d'error següent.
+    emailError.textContent = `el correu electrònic ha de tenir com a mínim $ {email.minLength} caràcters; n'heu introduït $ {email.value.length}. ';
+  }
+
+  // Configura l’estil de manera adequada
+  emailError.className = 'error active';
+}
+ +

Els comentaris expliquen les coses força bé, però de manera breu:

+ + + +

Aquest és el resultat en viu:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

+ +
+

Nota: Pots trobar aquest exemple en viu a GitHub en el fitxer detailed-custom-validation.html (consulta’n també el codi d’origen).

+
+ +

L'API de validació de restriccions t’ofereix una eina poderosa per a gestionar la validació de formularis i et proporciona un gran control sobre la interfície d'usuari, més enllà del que hi pots fer només amb l’HTML i el CSS.

+ +
+

Nota: Per obtenir més informació, consulta la nostra guia de validació de restriccions i la referència de l'API de validació de restriccions.

+
+ +

Validació dels formularis sense una API integrada

+ +

En alguns casos, com ara la compatibilitat amb navegadors antics o els controls personalitzats, no podràs o no voldràs utilitzar l'API de validació de restriccions. Aleshores pots utilitzar JavaScript per a validar el teu formulari, només que l'hauràs d’escriure.

+ +

Per a validar un formulari, planteja’t unes quantes preguntes:

+ +
+
Quin tipus de validació he de fer?
+
Has de determinar com validar les dades: operacions amb variables de cadena, conversió de tipus, expressions regulars, etc. Tot depèn de tu.
+
Què he de fer si el formulari no es valida?
+
Això és clarament una qüestió de la interfície d'usuari. Has de decidir com es comporta el formulari. El formulari ha d’enviar les dades igualment? Has de destacar els camps que tenen un error? Has de mostrar missatges d’error?
+
Com puc ajudar l’usuari a corregir dades no vàlides?
+
Per a reduir la frustració de l’usuari és molt important proporcionar la informació més útil possible i orientar-lo en la correcció de les entrades. Has d’oferir suggeriments anticipats perquè sàpiguen què se n’espera, i missatges d’error clars. Si vols aprofitar els requisits de la interfície d'usuari de validació de formularis, aquí tens alguns articles útils: + +
+
+ +

Un exemple que no utilitza l'API de validació de restriccions

+ +

A continuació es mostra una versió simplificada de l'exemple anterior que funciona amb navegadors antics.

+ +

L’HTML és gairebé el mateix; només n’hem tret les funcions de validació HTML.

+ +
<form>
+  <p>
+    <label for="mail">
+        <span>Please enter an email address::</span>
+        <input type="text" class="mail" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <!-- Alguns navegadors antics han de tenir l’atribut «type»
+       definit explícitament com «submit» en l'element «button»
+  <button type="submit">Submit</button>
+</form>
+ +

De la mateixa manera, el CSS no ha de canviar gaire; acabem de convertir la pseudoclasse {{cssxref(":invalid")}} de CSS en una classe real i hem evitat utilitzar el selector d'atributs que no funciona en Internet Explorer 6.

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Aquest és el nostre estil per als camps no vàlids */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* Aquest és l'estil dels nostres missatges d'error */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

Els grans canvis es produeixen en el codi JavaScript, que ha de fer molta més feina feixuga.

+ +
// Hi ha menys maneres de seleccionar un node DOM amb navegadors antics
+const form  = document.getElementsByTagName('form')[0];
+const email = document.getElementById('mail');
+
+// A continuació es mostra un truc per a arribar al node següent d’elements germans en el DOM.
+// Això és perillós perquè pots crear fàcilment un bucle infinit.
+// En els navegadors moderns és preferible utilitzar element.nextElementSibling
+let error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// segons l'especificació HTML5
+const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Molts navegadors antics no són compatibles amb el mètode addEventListener.
+// Aquesta és una manera senzilla de tractar això; però no n’és l’única.
+function addEvent(element, event, callback) {
+  let previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    const output = callback(e);
+
+    // Una crida que retorna «false» atura la cadena de devolució
+    // i interromp l'execució de l'esdeveniment de retorn de la crida
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Ara podem reconstruir la nostra restricció de validació
+// Com que no ens basem en cap pseudoclasse de CSS, hem
+// d'establir explícitament la classe vàlida/invàlida en el nostre camp de correu electrònic
+addEvent(window, "load", function () {
+  // Aquí comprovem si el camp està buit (recorda que no és un camp obligatori)
+  // Si no ho està, comprovem si el contingut és una adreça de correu electrònic ben formada.
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// Això defineix què passa quan l'usuari escriu en el camp
+addEvent(email, "input", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// Això defineix què passa quan l’usuari intenta enviar les dades
+addEvent(form, "submit", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Alguns navegadors antics no admeten el mètode event.preventDefault ()
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

El resultat és el següent:

+ +

{{EmbedLiveSample("Un_exemple_que_no_utilitza_lAPI_de_validació_de_restriccions", "100%", 130)}}

+ +

Com pots veure, no és tan difícil construir un sistema de validació pel teu compte. La part difícil és que sigui prou genèric perquè es pugui utilitzar tant en múltiples plataformes com en qualsevol formulari que puguis crear. Disposes de moltes biblioteques de fitxers que et permeten executar una validació de formulari, com ara Validate.js.

+ +

Resum

+ +

De vegades, la validació de formulari del costat del client necessita JavaScript si vols personalitzar els missatges d’estil i d’error, però sempre requereix que pensis detingudament en l’usuari. Recorda d’ajudar sempre els usuaris a corregir les dades que et proporcionen. Per a això, assegura’t de:

+ + + +

Un cop comprovat que el formulari s'ha emplenat correctament, pots procedir a enviar-lo. A continuació exposarem l’enviament de les dades d’un formulari.

+ +

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

+ +

En aquest mòdul

+ + + +

Temes avançats

+ + diff --git a/files/ca/learn/html/index.html b/files/ca/learn/html/index.html new file mode 100644 index 0000000000..b490d7ec06 --- /dev/null +++ b/files/ca/learn/html/index.html @@ -0,0 +1,57 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - Topic +translation_of: Learn/HTML +--- +
{{LearnSidebar}}
+ +

Per construir llocs web, heu de saber sobre {{Glossary('HTML')}} - la tecnologia fonamental utilitzada per definir l'estructura d'una pàgina web. HTML s'utilitza per especificar si el contingut de la web ha de ser reconegut com un paràgraf, llista, títol, enllaç, imatge, reproductor multimèdia, un formulari o un de molts altres elements disponibles o fins i tot un nou element que es defineixi.

+ +

Itinerari d'aprenentatge

+ +

L'ideal seria que comencéssiu el vostre viatge d'aprenentatge per l'aprenentatge d'HTML ( Introduction to HTML). Comenceu llegint la Introducció a HTML. A continuació, podeu passar a aprendre sobre temes més avançats, com ara:

+ + + +

Abans d'iniciar aquest tema, heu d'estar almenys familiaritzats basicamente amb l'ús d'ordinadors, i l'ús de la web de forma passiva (és a dir, amb només mirant, consumint el contingut). Heu de tenir un entorn base de treball establert, com es detalla en Instal·lació de programari bàsic (Installing basic software),  i entendre com crear i administrar arxius, com es detalla en Tractament d'arxius (Dealing with files) - tots dos són parts del nostre mòdul d'Introducció a la web (Getting started with the web) del principiant.

+ +

Es recomana que es treballi a través de Introducció a la Web (Getting started with the web) abans de tractar aquest tema, però, no és absolutament necessari; molt del que es tracta en l'article de conceptes Bàsics d'HTML (HTML basics) també està cobert en la nostra Introducció al mòdul d'HTML (Introduction to HTML) encara que en molt més detall..

+ +

Mòduls

+ +

Aquest tema conté els següents mòduls, en un ordre suggerit per treballar a través d'ells. Definitivament, heu de començar pel primer.

+ +
+
Introducció a HTML
+
Aquest mòdul prepara l'escenari, per aconseguir utilitzar conceptes importants i sintaxis, buscant aplicar HTML a un text, com crear hipervincles, i com utilitzar HTML per estructurar una pàgina web.
+
Multimedia i incrustació
+
Aquest mòdul explora com utilitzar HTML per incloure multimèdia en les seves pàgines web, incloent-hi les diferents formes en què les imatges poden ser incloses, i com integrar vídeo, àudio i fins i tot altres pàgines web senceres.
+
Formularis i botons
+
Els formularis i els botons són una part molt important de la web - aquests permeten als visitants del lloc entrar dades i enviar-les (per exemple formularis de registre, d'inici de sessió i de comentaris), i per implementar controls per controlar funcionalitats complexes (per exemple, enviar un formulari al servidor, o pausar la reproducció d'un vídeo.) Aquest mòdul us ajudarà a començar.
+
Taules (TBD)
+
Representar dades tabulars en una pàgina web d'una manera comprensible, {{glossary("Accessibility", "accessible")}} pot ser un desafiament. Aquest mòdul cobreix el marcat bàsic de la taula , juntament amb característiques més complexes, com la implementació dels títols i resums.
+
+ +

Solució de problemes comuns d'HTML

+ +

Utilitza HTML per resoldre problemes comuns (Use HTML to solve common problems) proporciona enllaços a seccions de contingut que expliquen com utilitzar HTML per resoldre problemes molt comuns en crear una pàgina web: es tracta de títols, afegir imatges o vídeos, emfatitzar continguts, creació d'un formulari bàsic, etc.

+ +

Veure

+ +
+
+
HTML (HyperText Markup Language) en MDN.
+
El punt d'entrada principal per a la documentació HTML en MDN, incloent referències detallades dels elements i atributs - Si voleu saber quins atributs té un element o quins valors té un atribut, per exemple, aquest és un gran lloc per començar.
+
+
diff --git "a/files/ca/learn/html/introducci\303\263_al_html/crear_hipervincles/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/crear_hipervincles/index.html" new file mode 100644 index 0000000000..c2bc2d0b0c --- /dev/null +++ "b/files/ca/learn/html/introducci\303\263_al_html/crear_hipervincles/index.html" @@ -0,0 +1,320 @@ +--- +title: Crear hipervincles +slug: Learn/HTML/Introducció_al_HTML/Crear_hipervincles +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Links + - Title + - absolute + - hyperlinks + - relative + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

Els hipervincles són realment importants; són els que fan de la xarxa web una xarxa. En aquest article es mostra la sintaxi necessària per a fer un enllaç, i es tracten les bones pràctiques en els enllaços.

+ + + + + + + + + + + + +
Prerequisits:Familiaritzar-se amb els conceptes bàsics de l’HTML, que es tracten en Iniciació a l’HTML. Format del text en HTML, que es tracta en Fonaments del text HTML.
Objectiu:Aprendre com implementar un hipervincle amb eficàcia, i enllaçar diversos fitxers.
+ +

Què és un hipervincle?

+ +

Els hipervincles són una de les innovacions més interessants que la web té per oferir. Bé, ha estat una característica de la web des del principi, i són els que fan de la xarxa web una xarxa; ens permeten vincular els nostres documents a un altre document (o un altre recurs) qualsevol, també ens permeten vincular parts específiques dels documents entre elles, i permeten que les aplicacions estiguin disponibles en una adreça web (això contrasta amb les aplicacions natives, que requerien instal·lació i altres obligacions d’aquesta mena). Gairebé qualsevol contingut del web es pot convertir en un enllaç, de manera que en fer-hi clic (o activar-ho d’alguna altra manera) el navegador anirà cap a una altra adreça web ({{glossary("URL")}}).

+ +
+

Nota: Una URL pot apuntar a fitxers HTML, fitxers de text, imatges, documents de text, vídeo i fitxers d’àudio, i qualsevol cosa que pugui existir en la web. Si el navegador no sap com mostrar o gestionar el fitxer, se’t demana si vols obrir el fitxer (en aquest cas el deure d’obrir o manipular el fitxer passa per una aplicació nativa adequada en el dispositiu) o descarregar el fitxer (i en aquest cas pots fer-te’n càrrec més endavant).

+
+ +

La pàgina web de la BBC, per exemple, conté un gran nombre d’enllaços que apunten no només a múltiples històries de notícies, sinó també a diferents àmbits del lloc web (funcions de navegació), pàgines d’accés/registre (eines d’usuari), i molt més.

+ +

Portal de bbc.co.uk, que mostra moltes notícies i també elements de navegació i funcions de menú

+ +

Anatomia d’un enllaç

+ +

Un enllaç bàsic es crea delimitant el text (o d’altres continguts, consulta {{anch("Enllaços de nivell de bloc")}}) que vols convertir en un enllaç dintre d’un element {{htmlelement("a")}}, i hi assigna un atribut {{htmlattrxref ("href", "a")}}  (també conegut com a destinació o target) que conté l’adreça web on vols que apunti l’enllaç.

+ +
<p>I’m creating a link to
+<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
+</p>
+ +

Això ens dóna el següent resultat:

+ +

I’m creating a link to the Mozilla homepage.

+ +

Afegir informació de suport amb <title>

+ +

Un altre atribut que és possible que vulguis afegir als teus enllaços és title; aquest atribut està destinat a contenir informació complementària útil sobre l’enllaç, com ara quin tipus d’informació conté la pàgina, o coses que cal tenir en compte. Per exemple:

+ +
<p>I’m creating a link to
+<a href="https://www.mozilla.org/en-US/"
+   title="The best place to find more information about Mozilla’s
+          mission and how to contribute">the Mozilla homepage</a>.
+</p>
+ +

Això ens dona el resultat següent (el títol apareix com un indicador de funció (tooltip) quan passem el cursor per sobre l’enllaç):

+ +

I’m creating a link to the Mozilla homepage.

+ +
+

Nota: El títol d'un enllaç només es mostra quan el punter del ratolí planeja per sobre, i això significa que les persones que fan servir el teclat per navegar, o pantalles tàctils, tindran dificultats per a accedir a aquesta informació. Si la informació d'un títol és realment important per la usabilitat d'una pàgina, s'hauria de presentar d'una forma accessible per a tothom, per exemple incloent-la com a text normal.

+
+ +

Aprenentatge actiu: Crear un exemple d’enllaç propi

+ +

És l’hora de l’aprenentatge actiu: volem que creïs un document HTML al teu editor de codi (faràs bé d’aconseguir la nostra plantilla inicial).

+ + + +

Enllaços de nivell de bloc

+ +

Com ja s’ha esmentat, pots convertir gairebé qualsevol contingut en un enllaç, fins i tot elements de nivell de bloc. Si vols convertir una imatge en un enllaç, només cal que posis la imatge entre les etiquetes <a></a>.

+ +
<a href="https://www.mozilla.org/en-US/">
+  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
+</a>
+ +
+

Nota: En un proper article t’assabentaràs de molts més aspectes sobre l’ús d’imatges al web.

+
+ +

Una introducció ràpida a les adreces URL i les rutes

+ +

Per entendre bé les destinacions dels enllaços, cal comprendre les adreces URL i les rutes dels fitxers. En aquesta secció es proporciona la informació que necessites per a aconseguir això.

+ +

Un URL, o Uniform Resource Locator (localitzador de recursos uniforme), és simplement una cadena de text que defineix on es pot localitzar alguna cosa a la web. Per exemple, la pàgina d’inici de Mozilla en versió anglesa es troba a https://www.mozilla.org/en-US/.

+ +

Els URL utilitzen rutes per a trobar fitxers. Les rutes especifiquen en quina part del sistema de fitxers es troba el fitxer en el qual estàs interessat. Vegem un exemple senzill d’una estructura de directoris (observa el directori de creating-hyperlinks).

+ +

Una estructura de directoris senzilla. El directori pare s’anomena creating-hyperlinks i conté dos fitxers anomenats index.html i contacts.html i dos directoris anomenats projects i pdfs, que contenen un fitxer index.html i un fitxer project-brief.pdf, respectivament.

+ +

L’arrel d’aquesta estructura de directoris s’anomena creating-hyperlinks. Quan treballes amb un lloc web en local, hi ha un directori que conté dins tot el lloc web. A l’arrel hi ha un fitxer index.html i un fitxer contacts.html. En un lloc web real, index.html seria la nostra pàgina d’inici o pàgina de destinació.

+ +

També hi ha dos directoris dins del nostre directori arrel: pdfs i projects. Cadascun té a dins un sol fitxer: un fitxer PDF (projecte-brief.pdf) i un fitxer index.html, respectivament. Observa que hi pot haver sense problemes dos fitxers index.html en un projecte, sempre que es trobin en ubicacions diferents del sistema de fitxers. Molts llocs web ho fan. El segon index.html seria potser la pàgina de destinació principal per a obtenir informació relacionada amb el projecte.

+ + + +
+

Nota: Si cal, pots combinar diverses instàncies d’aquestes característiques en adreces URL complexes; per exemple, ../../../complex/path/to/my/file.html.

+
+ +

Fragments de document

+ +

És possible enllaçar una part específica d’un document HTML (conegut com un fragment de document), i no només a l'inici del document. Per a això, primer cal assignar un atribut {{htmlattrxref ("id")}} a l’element en què vols establir l’enllaç. Normalment té sentit enllaçar en una línia de títol específica, de manera que es veuria alguna cosa com la següent:

+ +
<h2 id="Mailing_address">Mailing address</h2>
+ +

A continuació, per a enllaçar aquest id específic, cal incloure'l al final de l'URL, precedit per un símbol de número o coixinet (#). Per exemple:

+ +
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
+ +

Fins i tot pots utilitzar la referència mateixa del fragment del document per a fer un enllaç cap a una altra part del mateix document:

+ +
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
+ +

URL absoluts i relatius

+ +

Dos termes que et trobaràs a la  web són l’URL absolut i l’URL relatiu:

+ +

URL absolut: Apunta cap a una ubicació definida per la seva ubicació absoluta al web, que inclou el {{glossary("protocol")}} i el {{glossary("nom de domini")}}. Així, per exemple, si una pàgina index.html es carrega en un directori anomenat projects que hi ha dins de l’arrel d’un servidor web, i el domini del lloc web és http://www.example.com, la pàgina estaria disponible en http://www.example.com/projects/index.html (o fins i tot només http://www.example.com/projects/, perquè la majoria dels servidors web cerquen una pàgina de destinació com index.html per carregar-la si no s’especifica a l'URL).

+ +

Un URL absolut sempre apuntarà a la mateixa ubicació, no importa des d’on s’utilitzi.

+ +

URL relatiu: Apunta a una ubicació que és relativa al fitxer que s’enllaça, una mica com el que hem vist en la secció anterior. Per exemple, si volem tenir un enllaç des del nostre fitxer d’exemple en http://www.example.com/projects/index.html a un fitxer PDF del mateix directori, l’URL només seria el nom del fitxer; per exemple: project-brief.pdf; no cal informació addicional. Si el PDF estigués disponible en un subdirectori dins de projects anomenat pdfs, l’enllaç relatiu seria pdfs/project-brief.pdf (l’URL absolut equivalent seria http://www.example.com/projects/pdfs/project-brief.pdf).

+ +

Un URL relatiu assenyala diferents llocs segons on estigui el fitxer que s’utilitza; per exemple, si movem el nostre fitxer index.html del directori projects a l’arrel del lloc web (el nivell superior, no en altres directoris), l’URL relativa pdfs/project-brief.pdf ara apunta a http://www.example.com/pdfs/project-brief.pdf, no a http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Naturalment, la ubicació de l'arxiu project-brief.pdf i el directori pdfs no canviaran de sobte perquè moguis l'arxiu index.html; això faria que el teu enllaç apunti al lloc equivocat, així que no funcionaria si s'hi fes clic. Cal anar amb compte.

+ +

Les bones pràctiques en els enllaços

+ +

Hi ha algunes bones pràctiques que és bo de seguir quan es posen enllaços. Vegem quines són.

+ + + +

Fes servir un redactat clar

+ +

És molt fàcil afegir enllaços. Però amb això, no n’hi ha prou. Hem de fer que els nostres enllaços siguin accessibles a tots els lectors, independentment de quin sigui el seu context i quines eines prefereixen. Per exemple:

+ + + +

Vegem-ne un exemple concret:

+ +

Text d’enllaç ben redactat: Download Firefox

+ +
<p><a href="https://firefox.com/">
+  Download Firefox
+</a></p>
+ +

Text d’enllaç mal redactat: Click here to download Firefox

+ +
<p><a href="https://firefox.com/">
+  Click here
+</a>
+to download Firefox</p>
+
+ +

Altres consells:

+ + + +

Utilitza enllaços relatius sempre que puguis

+ +

A partir de la descripció anterior, es podria pensar que és una bona idea utilitzar enllaços absoluts en tot moment; al cap i a la fi, no es trenquen com els enllaços relatius quan una pàgina es mou. Tanmateix, és bo emprar enllaços relatius sempre que puguis quan enllaces a altres llocs dins del mateix lloc web (i fes servir enllaços absoluts quan enllacis a un altre lloc web):

+ + + +

Indica amb claredat quan s’enllacen recursos no HTML

+ +

Quan enllaces a un recurs que es pot descarregar (com un document PDF o Word) o reproduir en continu (streaming), com ara un vídeo o un àudio, o que pot tenir un altre efecte potencialment inesperat (s’obre una finestra emergent), hauries d’afegir un redactat clar per a reduir qualsevol confusió. Pot resultar força molest, per exemple:

+ + + +

Observa amb alguns exemples quin tipus de text pots utilitzar aquí:

+ +
<p><a href="http://www.example.com/large-report.pdf">
+  Download the sales report (PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/">
+  Watch the video (stream opens in separate tab, HD quality)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  Play the car game (requires Flash)
+</a></p>
+ +

Utilitza l‘atribut download quan enllacis a una descàrrega

+ +

Quan enllaces a un recurs que s’ha de descarregar en lloc d’obrir-se en el navegador, pots utilitzar l’atribut download, que proporciona l’opció de desar amb el nom de fitxer per defecte. Heus aquí un exemple amb un enllaç de descàrrega de Firefox 39 per a la versió de Windows:

+ +
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
+   download="firefox-39-installer.exe">
+  Download Firefox 39 for Windows
+</a>
+ +

Aprenentatge actiu: crear un menú de navegació

+ +

Per a aquest exercici, et volem proposar que enllacis algunes pàgines amb un menú de navegació per a crear un lloc web de diverses pàgines. Aquesta és una manera comuna per a crear un lloc web: en cada pàgina s’utilitza la mateixa estructura de pàgina, que inclou el mateix menú de navegació, de manera que quan fas clic als enllaços fa la impressió que ets en el mateix lloc, però apareix un contingut diferent.

+ +

Fes còpies locals de les quatre pàgines següents, totes en el mateix directori (consulta també el directori de navegació del menú d’inici per a la llista completa de fitxers):

+ + + +

Hauries de:

+ +
    +
  1. Afegir una llista no ordenada en el lloc indicat en una pàgina, que contingui els noms de les pàgines que s’enllacen. Un menú de navegació és justament una llista d’enllaços, de manera que això és semànticament correcte.
    2. +
  2. Convertir cada nom de la pàgina en un enllaç a aquesta pàgina.
    3. +
  3. Copiar el menú de navegació en cada pàgina.
    4. +
  4. Eliminar de cada pàgina només l’enllaç a ella mateixa; és confús incloure un enllaç a la mateixa pàgina, i no té sentit, i el fet que no hi hagi enllaç resulta un bon recordatori visual de la pàgina en què et trobes.
    5. +
+ +

L’exemple acabat hauria de veure’s més o menys així:

+ +

Un exemple senzill de menú de navegació HTML, amb els elements inici, imatges, projectes i xarxes socials

+ +
+

Nota: Si t’encalles o no saps si ho has fet bé, pots comprovar la solució en el directori de l’etiquetatge del menú de navegació.

+
+ +

Enllaços a correu electrònic

+ +

És possible crear enllaços o botons que, quan els prems, en lloc d’enllaçar amb un recurs o pàgina, obren un missatge de correu electrònic nou de sortida. Això es fa amb l’element {{HTMLElement("a")}} i l’esquema d’URL mailto:.

+ +

En la forma més bàsica i d’ús més comú, un enllaç mailto: simplement indica l’adreça de correu electrònic del destinatari. Per exemple:

+ +
<a href="mailto:ningu@mozilla.org">Envia un missatge a ningú</a>
+
+ +

Això genera un enllaç que té aquest aspecte: Envia un missatge a ningú.

+ +

De fet, fins i tot l’adreça de correu electrònic és opcional. Si la deixes fora (és a dir, {{htmlattrxref ("href", "a")}} és simplement "mailto:"), el client de correu de l’usuari obrirà una finestra de correu electrònic sortint nova que encara no té cap adreça de destinació especificada. Això sovint és útil com a enllaços per «compartir» en què els usuaris poden fer clic i enviar un correu electrònic a una adreça que triïn.

+ +

Especificar detalls

+ +

A més de l’adreça de correu electrònic, pots proporcionar més informació. De fet, pots afegir qualsevol camp de capçalera d’un missatge de correu electrònic estàndard a l’adreça URL mailto: que proporcionis. El més habituals són «subject», «cc» i «body» (respectivament, «tema», «amb còpia» i «cos», que no és un veritable camp de capçalera, però permet especificar el contingut d’un missatge curt per al nou correu electrònic). Cada camp i el seu valor s’especifiquen com un terme de la consulta.

+ +

Aquí hi ha un exemple que inclou un cc, bcc, assumpte i cos:

+ +
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
+  Send mail with cc, bcc, subject and body
+</a>
+ +
+

Nota: Els valors de cada camp han de tenir una codificació URL (és a dir, amb caràcters no imprimibles i espais percentatge-escapats). També has de tenir en compte l’ús del signe (&), que separa cada camp en la URL mailto:. Aquesta és la notació estàndard d’una consulta URL.

+
+ +

Aquí hi ha algunes altres mostres d’URL de mailto::

+ + + +

Sumari

+ +

Això, de tota manera, és tot sobre els enllaços, per ara! Tornarem als enllaços més endavant en el curs, quan comencem a aplicar-los estils. El pas següent pel que fa a l’HTML és tornar a la semàntica de text i conèixer algunes de les característiques més avançades/inusuals que podeu trobar útils; la formatació avançada del text és la vostra pròxima parada.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/depurar_html/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/depurar_html/index.html" new file mode 100644 index 0000000000..5d8feaea62 --- /dev/null +++ "b/files/ca/learn/html/introducci\303\263_al_html/depurar_html/index.html" @@ -0,0 +1,171 @@ +--- +title: Depurar HTML +slug: Learn/HTML/Introducció_al_HTML/Depurar_HTML +tags: + - Beginner + - CodingScripting + - Debugging + - Error + - Guide + - HTML + - Validation + - validator +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Escriure HTML està molt bé; però, i si hi ha alguna cosa que va malament i no se sap on està l'error en el codi? Aquest article dona a conèixer algunes eines que poden ajudar.

+ + + + + + + + + + + + +
Prerequisits:Familiaritzar-se amb els fonaments bàsics de l’HTML, que s’expliquen, per exemple, en Iniciació a l’HTML, Fonaments de text en HTML i Creació d’hipervincles.
Objectiu:Aprendre els conceptes bàsics de la utilització d'eines de depuració per a trobar problemes en HTML.
+ +

Depurar no fa por

+ +

En escriure qualsevol mena de codi, tot està molt bé en general, fins que arriba aquest moment temut, que és quan es produeix un error; s'ha fet alguna cosa malament i el codi no funciona en absolut, o no ben bé com es voldria. Per exemple, a continuació es mostra la informació d'un error en intentar {{glossary("compilar")}} un programa senzill escrit en el llenguatge Rust.

+ +

Una finestra d’ordinador portàtil que mostra el resultat d'intentar compilar un programa en codi Rust amb una cometa que manca en algun lloc d'una instrucció 'print'. El missatge d'error indica: 'error: unterminated double quote string'.En aquest cas, el missatge d'error és relativament fàcil d'entendre: «cadena de text amb cometes dobles sense tancar». Si et fixes en la programació, és probable que puguis veure que en la instrucció println!(Hello, world!”); podria faltar-hi, per lògica, una cometa doble. Però els missatges d'error poden esdevenir ràpidament més complicats i menys fàcils d'interpretar a mesura que els programes es fan més extensos, i fins i tot el cas senzill anterior pot intimidar una mica a algú que no sap gens de programació amb Rust.

+ +

Això no obstant, la depuració no té per què fer por; la clau per estar còmodes amb l’escriptura i depuració de qualsevol llenguatge de programació o codi és la familiaritat, tant amb el llenguatge com amb les eines.

+ +

Depuració amb HTML

+ +

HTML no és tan complicat d'entendre com Rust; HTML no es compila en una forma diferent abans que el navegador n’analitzi el resultat i el presenti (s’interpreta, no es compila). I la sintaxi d’un {{glossary("element")}} HTML és possiblement molt més fàcil d'entendre que la d’un «autèntic llenguatge de programació» com Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. Però la manera amb què els navegadors executen l’HTML és molt més permissiva que la manera com s'executen els llenguatges de programació, i això és alhora bo i dolent.

+ +

Codi permissiu

+ +

Què entenem per permissiu? Bé, en general, quan comets algun error de codi, et pots topar amb dos tipus d'error principals:

+ + + +

L’HTML en si no té tendència a presentar errors de sintaxi perquè els navegadors en què s'executa són permissius, i això significa que el codi funciona fins i tot encara que hi hagi errors de sintaxi. Els navegadors incorporen regles que els indiquen com interpretar l’etiquetatge escrit erròniament, de manera que s'obtingui alguna cosa que rutlli, encara que potser no sigui exactament el que esperaves. Això, per descomptat, també pot ser un problema!

+ +
+

Nota: L’HTML s'executa amb permissivitat perquè quan es va crear la web, es va decidir que permetre a la gent la publicació dels seus continguts fos més important que garantir que la sintaxi fos totalment correcta. La xarxa web probablement no seria tan popular com ho és avui, si hagués estat més estricta des dels inicis.

+
+ +

Aprenentatge actiu: estudiar la permissivitat del codi

+ +

És hora d'estudiar la naturalesa permissiva del codi HTML per tu mateix.

+ +
    +
  1. En primer lloc, fes-te amb una còpia de la nostra demostració de depuració i desa-te-la en local. Hem escrit aquest exemple de demostració deliberadament amb alguns errors perquè els analitzis (es diu que l’etiquetatge HTML està mal format, en oposició a ben format).
    2. +
  2. A continuació, obre’l en un navegador; veuràs alguna cosa com aquesta: Un document HTML senzill amb el títol Exemples de depuració HTML i una mica d'informació sobre errors comuns amb HTML, com elements que no es tanquen, elements mal imbricats o atributs que no es tanquen.
    3. +
  3. Això, d’entrada, no fa bona pinta; analitzem el codi per veure si podem esbrinar-ne el perquè (només es mostren els continguts de body): + 
    <h1>HTML debugging examples</h1>
+
+<p>What causes errors in HTML?
+
+<ul>
+  <li>Unclosed elements: If an element is <strong>not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  <li>Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+      what is this?</em>
+
+  <li>Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+      homepage</a>
+</ul>
    +
    4. +
  4. Fem un repàs dels problemes que hi podem veure: +
      +
    • Els elements {{htmlelement("p")}} i {{htmlelement("li")}} no tenen etiquetes de tancament. A partir de la imatge de dalt, no sembla que això hagi afectat malament la representació del codi d’etiquetatge, perquè és fàcil deduir on acaba un dels elements i on en comença un altre.
      • +
    • El primer element {{htmlelement("strong")}} no té etiqueta de tancament. Això és una mica més problemàtic, perquè no és fàcil saber on se suposa que acaba l'element. De fet, sembla que s’ha destacat en negreta tota la resta del text.
      • +
    • En aquesta secció les etiquetes estan mal imbricades: <strong>strong <em>strong emphasised?</strong> what is this?</em>. No és fàcil saber com s'ha d'interpretar això, a causa del problema anterior.
      • +
    • El valor de l'atribut {{htmlattrxref ("href", "a")}} no té cometes dobles tancament. Això sembla que ha causat el problema més greu: l'enllaç no apareix en absolut.
      • +
    +
    5. +
  5. Ara observem quina presentació fa el navegador a partir d’aquest d’etiquetatge, en oposició a l’etiquetatge que observem en el codi. Per a això, pots utilitzar les eines de desenvolupador del navegador. Si no estàs familiaritzat amb l'ús de les eines de desenvolupador del navegador, dedica uns minuts a revisar Descobreix les eines de desenvolupador del navegador, i després torna.
    6. +
  6. En l'inspector de DOM pots veure quin aspecte presenta la representació d’aquest etiquetatge: L'inspector d'HTML de Firefox, amb el nostre paràgraf d'exemple destacat, mostra el text "Què genera errors en l'HTML". Hi pots veure que el navegador s'ha encarregat de tancar l'element paràgraf.
    7. +
  7. Amb l'inspector DOM, explorarem el codi amb detall per veure com el navegador ha intentat de corregir els errors HTML (hem fet la revisió amb Firefox; altres navegadors moderns haurien de donar el mateix resultat): +
      +
    • S’han donat etiquetes de tancament als paràgrafs i elements de llista.
      • +
    • No està clar on s’ha de tancar el primer element <strong>, de manera que el navegador ha etiquetat cada bloc de text per separat que hi ha fins al final del document amb una etiqueta strong.
      • +
    • El navegador ha resolt la imbricació d’etiquetes incorrecta de la següent manera: + 
      <strong>strong
+  <em>strong emphasised?</em>
+</strong>
+<em> what is this?</em>
      +
      • +
    • L'enllaç amb la cometa doble que falta s’ha eliminat del tot. L'últim element de la llista ara presenta aquest aspecte: + 
      <li>
+  <strong>Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

Validació HTML

+ +

A partir de l'exemple anterior pots veure que és important que t’asseguris que el codi HTML està prou ben format. Però, com? En un exemple petit com el que has vist abans, resulta prou fàcil buscar per les línies de codi i trobar els errors; però, què passa amb un document HTML extens i complex?

+ +

La millor estratègia és començar per executar la pàgina HTML amb el servei de validació d’etiquetatge (Markup Validation Service), creat i mantingut per l'organització W3C, que s'ocupa de les especificacions que defineixen l’HTML, el CSS i altres tecnologies web. Aquesta pàgina web pren un document HTML com una entrada, l’analitza i et retorna un informe que exposa tot el que està malament en l’HTML.

+ +

La pàgina d’inici del validador d’HTML

+ +

Per a especificar el codi HTML que vols validar, pots donar-ne l’adreça web, pujar-hi l’arxiu HTML o introduir-hi el codi HTML directament.

+ +

Aprenentatge actiu: validació d’un document HTML

+ +

Provem-ho amb el nostre document de mostra.

+ +
    +
  1. En primer lloc, carrega el Markup Validation Service en una de les pestanyes del navegador, si encara no ho has fet.
    2. +
  2. Ves a la pestanya Validate by Direct Input.
    3. +
  3. Copia tot el codi del document de mostra (no només el body) i enganxa’l en l'àrea gran de text que hi ha en el Markup Validation Service.
    4. +
  4. Prem el botó Check.
    5. +
+ +

Això t’ha de donar una llista d'errors i altres dades.

+ +

Llista dels resultats de la validació HTML del servei de validació d'etiquetatge de W3C

+ +

Interpretació dels missatges d'error

+ +

La llista de missatges d'error que el validador presenta sovint són útils, però de vegades no tant; amb una mica de pràctica trobaràs la manera d'interpretar-los per resoldre el codi. Fem una passada pels missatges d'error i vegem què signifiquen. Observem que cada missatge ve amb un número de línia i columna, que t’ajuda a localitzar l'error més fàcilment.

+ + + +

Si no arribes a esbrinar què significa cada missatge d'error, no t’hi amoïnis; una bona idea és tractar de resoldre uns quants errors cada la vegada, i a continuació tornar a validar el codi HTML per veure els errors que queden. De vegades, la resolució d'un error pot eliminar més d’un missatges d'error diferents, perquè sovint un sol problema pot causar diversos errors, en un efecte dòmino.

+ +

Sabràs que has resolt tots els errors quan en la sortida t’aparegui una banda amb el missatge següent:

+ +

Banda amb el text: "El document valida d'acord amb els esquemes i les restriccions addiconals especificats que verifica el validador"

+ +

Resum

+ +

Aquí tenim una introducció a la depuració de codi HTML, que t’hauria de proporcionar alguns coneixements útils per quan comencis a depurar CSS, JavaScript i altres tipus de codi, més endavant durant la carrera. Això també marca el final dels articles d’aprenentatge del mòdul Introducció a l’HTML; ara ja pots examinar-te tu mateix amb les nostres activitats d’avaluació: a sota trobaràs un enllaç a la primera d'elles.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/document_i_estructura_del_lloc_web/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/document_i_estructura_del_lloc_web/index.html" new file mode 100644 index 0000000000..1088731eea --- /dev/null +++ "b/files/ca/learn/html/introducci\303\263_al_html/document_i_estructura_del_lloc_web/index.html" @@ -0,0 +1,267 @@ +--- +title: Document i estructura del lloc web +slug: Learn/HTML/Introducció_al_HTML/Document_i_estructura_del_lloc_web +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

Així com definim les parts individuals de la pàgina (per exemple, «un paràgraf» o «una imatge»), {{glossary("HTML")}} també compta amb una sèrie d'elements de nivell de bloc que s'utilitzen per a definir les àrees del teu lloc web (com ara «la capçalera», «el menú de navegació» o «la columna principal de contingut»). En aquest article es reflexiona sobre com planificar una estructura bàsica d'un lloc web, i com escriure el codi HTML per a representar aquesta estructura.

+ + + + + + + + + + + + +
Prerequisits:Familiaritat amb els conceptes bàsics de l’HTML que s'expliquen en Iniciació a l’HTML. Aplicació de format al text amb HTML, que s'explica en Fonaments de text amb HTML. Funcionament dels hipervincles, que s'expliquen en Crear hipervincles.
Objectiu:Aprendre a estructurar un document amb etiquetes semàntiques, i elaborar l'estructura d'un lloc web senzill.
+ +

Seccions bàsiques d'un document

+ +

Les pàgines web poden i tenen un aparença molt diferent les unes de les altres, però totes tendeixen a compartir components estàndard similars, llevat que a la pàgina es mostri un vídeo o un joc en pantalla completa, formi part d'alguna mena de projecte artístic, o simplement estigui mal estructurada:

+ +
+
capçalera (header)
+
Sol ser una gran franja a la part superior amb un títol gran i/o un logotip. És on en general es manté la informació principal comuna sobre un lloc web respecte d'una altra pàgina web.
+
barra de navegació (navigation bar)
+
Són els enllaços a les seccions principals del lloc; en general es representen com botons de menú, enllaços o pestanyes. Igual que la capçalera, aquest contingut en general roman característic d'una pàgina web respecte d’una altra; un sistema de navegació incoherent en el lloc web només portarà frustració i confusió als usuaris. Molts dissenyadors web consideren que la barra de navegació ha de ser part de la capçalera en lloc d'un component individual, però això no és un requisit; de fet, alguns sostenen també que el fet de tenir aquests dos elements separats és millor per motius d’accesibilitat, perquè els lectors de pantalla poden llegir més bé totes dues característiques si estan separades.
+
contingut principal (main content)
+
Una àrea gran al centre que conté la part principal del contingut particular d'una pàgina web determinada, per exemple, el vídeo que vols veure o la història principal que llegeixes, o el mapa que vols examinar, o els titulars de les notícies, etc. Aquesta és la part singular de la pàgina web que sens dubte variarà d'una pàgina web a una altra!
+
barra lateral (sidebar)
+
Informació secundària, enllaços, citacions, anuncis, etc. En general es tracta d’informació de context respecte de la que inclou el contingut principal (per exemple, en un article d’una pàgina de notícies, la barra lateral podria contenir la biografia de l'autor o enllaços a articles relacionats), però també hi ha casos en què trobaràs elements recurrents, com ara un sistema secundari de navegació.
+
peu de pàgina (footer)
+
Una franja a la part inferior de la pàgina que generalment conté la lletra petita, els avisos de copyright o informació de contacte. És un lloc per a posar-hi informació que és comuna (com la capçalera) per a tot el lloc web, però aquesta informació no és en general ni crítica ni secundària respecte de la pàgina web mateixa. El peu de pàgina també s'utilitza de vegades amb finalitats de posicionament {{Glossary("SEO")}}, en proporcionar enllaços per a un accés ràpid al contingut popular.
+
+ +

Un «lloc web típic» podria presentar una estructura semblant a això:

+ +

Un exemple senzill d’estructura de lloc web que inclou una capçalera principal, un menú de navegació, una àrea de contingut principal, una barra lateral i un peu de pàgina.

+ +

HTML per a estructurar el contingut

+ +

L'exemple senzill que es mostra a dalt no és bonic, però és perfectament acceptable per a il·lustrar un exemple típic de disseny d'una pàgina web. Alguns llocs web tenen més columnes, alguns són molt més complexos, però ja es copsa la idea. Amb el CSS correcte, pots usar gairebé qualsevol element per a delimitar les diferents seccions i assignar-los l’aspecte que vulguis però, com ja hem dit, cal respectar la semàntica i utilitzar l'element correcte per a la funció correcta.

+ +

Això és perquè els elements visuals no expliquen tota la història. Utilitzem el color i la mida de la lletra per a cridar l'atenció dels usuaris en les parts del contingut més rellevants, com ara el menú de navegació i els enllaços relacionats; però, què passa amb les persones que tenen una discapacitat visual, per exemple, que potser no troben gaire útils conceptes com «rosa» o «mida de lletra gran»?

+ +
+

Nota: Les persones daltòniques representen al voltant del 8% de la població mundial. Les persones cegues o amb discapacitats visuals representen aproximadament el 4-5% de la població mundial (el 2012 hi havia 285 milions d'aquest tipus de persones al món, mentre que la població total era de prop de 7.000 milions.)

+
+ +

En el teu codi HTML pots etiquetar seccions de contingut segons la funció que compleixen; pots fer servir elements que representin de manera inequívoca les seccions de contingut que hem descrit abans, i les tecnologies de suport com els lectors de pantalla poden reconèixer aquells elements i ajudar amb tasques com «trobar la navegació principal» o «trobar el contingut principal». Com ja hem esmentat abans en el curs, són moltes les conseqüències de no utilitzar una estructura i una semàntica correctes perquè un element compleixi la funció correcta.

+ +

Per a dur a terme aquest etiquetatge semàntic, l’HTML proporciona etiquetes específiques que es poden utilitzar per a representar aquestes seccions, per exemple:

+ + + +

Aprenentatge actiu: Analitzar el codi del nostre exemple

+ +

L’exemple que hem vist abans està representat pel codi següent (també pots trobar l’exemple en el repositori de GitHub). Observa’l a dalt i fes un cop d’ull a la llista següent per veure quines parts componen quines seccions visibles.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>My page title</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Here is our main header that is used accross all the pages of our website -->
+
+    <header>
+      <h1>Header</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Here is our page's main content -->
+    <main>
+
+      <!-- It contains an article -->
+      <article>
+        <h2>Article heading</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>subsection</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Another subsection</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- the aside content can also be nested within the main content -->
+      <aside>
+        <h2>Related</h2>
+
+        <ul>
+          <li><a href="#">Oh I do like to be beside the seaside</a></li>
+          <li><a href="#">Oh I do like to be beside the sea</a></li>
+          <li><a href="#">Although in the North of England</a></li>
+          <li><a href="#">It never stops raining</a></li>
+          <li><a href="#">Oh well...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- And here is our main footer that is used across all the pages of our website -->
+
+    <footer>
+      <p>©Copyright 2050 by nobody. All rights reversed.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Pren-te un temps per observar el codi i intentar entendre’l; els comentaris que hi ha dins del codi també t’haurien d'ajudar a entendre’l. No et demanem de fer gaire més en aquest article perquè la clau per a entendre el disseny del document és escriure una estructura HTML semblant a aquesta i a continuació posar-hi CSS. Però ens esperarem per a això fins que comencis a estudiar com dissenyar amb CSS en l’article dedicat al CSS que tracta aquest tema.

+ +

Els elements HTML de disseny amb més detall

+ +

És bo entendre amb detall el significat general de tots els elements HTML de seccionament; treballarem aquesta qüestió de manera gradual a mesura que anem assolint més experiència en el desenvolupament web. Pots entrar en molt de detall amb la lectura de la nostra referència d’elements HTML. De moment, aquestes són les definicions principals que ens cal comprendre:

+ + + +

Delimitadors no semàntics

+ +

A vegades et trobes amb una situació en què no hi ha un element semàntic adequat per a agrupar junts un seguit d’elements o delimitar uns continguts concrets. A vegades pot ser que simplement vulguis agrupar un conjunt d'elements per a tractar-los tots com una sola entitat amb una mica de {{glossary("CSS")}} o {{glossary("JavaScript")}}. Per a casos com aquests, l’HTML proporciona els elements {{HTMLElement("div")}} i {{HTMLElement("span")}}. S'han d'utilitzar preferiblement amb un atribut {{htmlattrxref('class')}} adequat, que els proporcioni algun tipus d'etiqueta perquè se’ls pugui identificar fàcilment.

+ +

{{HTMLElement("span")}} és un element de línia no semàntic que només hauries d'utilitzar si no trobes cap altre element de text semàntic que vagi més bé per a delimitar aquell contingut, o no vols afegir-hi cap significat específic. Per exemple:

+ +
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
+him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
+play, the lights should be down low]</span>.</p>
+ +

En aquest cas, la nota de l'editor només pretén proporciona una indicació addicional per al director de l'obra; no es pretén que tingui un significat semàntic addicional. Podries aplicar-hi CSS per a distanciar aquesta nota del text principal als ulls d’un usuari vident.

+ +

{{HTMLElement("div")}} és un element de bloc no semàntic que només hauries d'utilitzar si no trobes cap altre element de bloc semàntic que vagi més bé per a delimitar aquell contingut, o no vols afegir-hi cap significat específic. Per exemple, imagina’t un giny de tipus carretó de la compra que pots optar per seleccionar en qualsevol moment durant el temps que navegues per un lloc web de comerç electrònic:

+ +
<div class="shopping-cart">
+  <h2>Shopping cart</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/" alt="Silver earrings">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total cost: $237.89</p>
+</div>
+ +

No és realment un element <aside>, perquè no s'identifica necessàriament amb el contingut principal de la pàgina (vols que estigui accessible des de qualsevol lloc). Tampoc és particularment necessari utilitzar un element <section>, perquè no és part del contingut principal de la pàgina. En aquest cas està molt bé utilitzar un element <div>. Hi hem inclòs un títol d’encapçalament com un indicador per a ajudar els usuaris amb lectors de pantalla a trobar-ho.

+ +
+

Atenció: Els elements div són tan còmodes d'usar que és fàcil d'utilitzar-los en excés. Però com que no aporten cap valor semàntic, només introdueixen soroll en el teu codi HTML. Assegura’t d’utilitzar-los només quan no hi hagi cap altra solució semàntica més adequada i tracta de reduir-ne l’ús al mínim. En cas contrari et trobaràs amb moltes dificultats a l’hora d’actualitzar i mantenir els teus documents.

+
+ +

Salts de línia i separadors horitzontals

+ +

Dos elements que utilitzaràs de tant en tant i que voldràs conèixer són {{htmlelement("br")}} i {{htmlelement("hr")}}:

+ +

<br> crea un salt de línia en un paràgraf; és l'única manera de forçar una estructura rígida, en una situació en què vols un seguit de línies curtes fixes, com en una adreça postal o un poema. Per exemple:

+ +
<p>There once was a girl called Nell<br>
+Who loved to write HTML<br>
+But her structure was bad, her semantics were sad<br>
+and her markup didn't read very well.</p>
+ +

Sense els elements <br>, el paràgraf es mostraria en una línia llarga (com hem dit abans en el curs, l’HTML ignora la major part dels espais en blanc); amb aquests elements en el codi, el marcatge es mostra així:

+ +

There once was a girl called Nell
+ Who loved to write HTML
+ But her structure was bad, her semantics were sad
+ and her markup didn't read very well.

+ +

Els elements <hr> creen un separador horitzontal en el document que indica un canvi de temàtica en el text (com ara un canvi de tema o escena). Visualment es veu com una línia horitzontal. A tall d'exemple:

+ +
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
+<hr>
+<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>
+ +

Seria com això:

+ +

Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.

+ +
+

Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.

+ +

Planificar un lloc web senzill

+ +

Una vegada planificat el contingut d'una pàgina web simple, el pas lògic següent és tractar d'esbrinar quin contingut volem posar en tota la pàgina web, quines pàgines es necessitaran i de quina manera s'han d'arranjar i enllaçar l’una amb l'altra per a oferir la millor experiència d'usuari possible. Això s’anomena {{glossary("Arquitectura de la informació")}}. En un lloc web gran i complex, aquest procés pot requerir una gran planificació, però per a un lloc web senzill d'unes poques pàgines això pot ser força senzill, i fins i tot divertit!

+ +
    +
  1. Has de tenir en compte que hi ha d’haver uns quants elements comuns en la majoria de pàgines (si no totes), com ara el menú de navegació i els continguts del peu de pàgina. Si el lloc és per una empresa, per exemple, és una bona idea que tingui la informació de contacte disponible al peu de pàgina de cada pàgina. Apunta quins continguts vols que siguin comuns a totes les pàgines.Els elements comuns que hi ha d'haver a cada pàgina d'una pàgina web de viatges: el títol i el logotip, la informació de contacte, el copyright, la declaració de termes i condicions, el selector d'idioma, la política d'accessibilitat
    2. +
  2. A continuació, dibuixa un esbós de quina estructura vols que presenti cada pàgina (pot ser semblant a la nostra pàgina web senzilla d’abans). Pren nota de què hi haurà a cada bloc. Un diagrama senzill d'una mostra de l'estructura d'un lloc web, amb una capçalera, l'àrea de contingut principal , dues barres laterals i un peu de pàgina.
    3. +
  3. Ara, fes una previsió (una pluja d'idees) de la resta de continguts (que no seran comuns a totes les pàgines) que vols que hi hagi al lloc web; escriu-ne tota la llista, tan llarga com vulguis. Una llarga llista de tots els elements que podríem posar en el nostre lloc web de viatges, des d'un cercador fins a ofertes especials o informació específica per a cada país
    4. +
  4. A continuació, ordena tots aquests elements de contingut per grups, perquè et puguis fer una idea de quines parts poden anar juntes en les diferents pàgines. Això és molt similar a una tècnica anomenada classificació de targetes, o {{glossary("card sorting")}}. Els elements que haurien d'aoparpèixer en un lloc web de vacances, repartits en 5 categories: Cercar, Ofertes especials, Informació específica de país, Resultats de cerca i Compres.
    5. +
  5. Ara, dibuixa un mapa del lloc web en brut; dibuixa un globus per a cada pàgina del lloc web, i línies que mostrin el flux de treball esperat entre les pàgines. La pàgina d'inici probablement estarà al centre, i s’enllaçarà amb la majoria de les altres, si no amb totes; la major part de les pàgines d'un lloc web petit han d'estar disponibles en la navegació principal, encara que hi ha excepcions. També hi pots voler incloure observacions sobre com podrien presentar-se les coses.Un mapa del lloc web que mostra les pàgines d'inici, informació específica del país, resultats de cerca, pagament i compres
    6. +
+ +

Aprenentatge actiu: crea el teu mapa de lloc web propi

+ +

Fes l'exercici anterior per a un lloc web de creació pròpia. De què t’agradaria fer un lloc web?

+ +
+

Nota: Desa el teu treball en algun lloc; pot ser que el necessitis més endavant.

+
+ +

Resum

+ +

En aquest punt hauries de tenir idea més clara sobre com estructurar una pàgina/lloc web. En l'últim article d'aquest mòdul, estudiarem com depurar l’HTML.

+ +

Mira també

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/estructurar_una_p\303\240gina_de_contingut/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/estructurar_una_p\303\240gina_de_contingut/index.html" new file mode 100644 index 0000000000..e3481bdc15 --- /dev/null +++ "b/files/ca/learn/html/introducci\303\263_al_html/estructurar_una_p\303\240gina_de_contingut/index.html" @@ -0,0 +1,93 @@ +--- +title: Estructurar una pàgina de contingut +slug: Learn/HTML/Introducció_al_HTML/Estructurar_una_pàgina_de_contingut +tags: + - Assessment + - Beginner + - CodingScripting + - Design + - HTML + - Layout + - Learn + - Structure + - semantics +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

L'estructuració d'una pàgina de contingut llest per dissenyar, utilitzant CSS, és una habilitat molt important per dominar, pel que en aquesta avaluació es provarà la vostra capacitat de pensar sobre com una pàgina podria acabar veient-se, i triar la semàntica estructural apropiada per construir un disseny damunt.

+ + + + + + + + + + + + +
Requisits previs:Abans de procedir a aquesta avaluació heu hagut de treballar la resta del curs, amb un èmfasi particular en Documents i estructura del lloc web.
Objectiu:Posar a prova el coneixement de les estructures de pàgines web, i com representar un esquema de diseny possible en el marcat.
+ +

Punt de partida

+ +

Per obtenir aquesta avaluació inicial, cal anar i agafar l'arxiu zip que conté tots els recursos per començar. L'arxiu zip conté:

+ + + +

Crear l'exemple en el vostre equip local, o bé, utilitzar un lloc com JSBin or Thimble per fer la vostra avaluació.

+ +

Resum del projecte

+ +

Per a aquest projecte, la tasca és prendre el contingut de la pàgina principal d'un lloc web d'observació d'aus i afegir elements estructurals a la mateixa, pel que pot tenir un disseny de pàgina que se li aplica. S'ha de tenir:

+ + + +

Cal afegir un embolcall adequat per a:

+ + + +

També s'ha de:

+ + + +

Consells i suggeriments

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que la pàgina podria ser després del seu marcatge.

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

Avaluació

+ +

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al vostre professor/tutor per qualificar-ho. Si sou d'auto-aprenentatge, llavors podeu obtenir la guia de qualificació amb molta facilitat preguntan fil del discurs de l'àrea d'aprenentatge o al canal d'IRC #mdn en Mozilla IRC. Prova el primer exercici - no hi ha res a guanyar amb trampa!

+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/fonaments_de_text_html/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/fonaments_de_text_html/index.html" new file mode 100644 index 0000000000..fafc49effe --- /dev/null +++ "b/files/ca/learn/html/introducci\303\263_al_html/fonaments_de_text_html/index.html" @@ -0,0 +1,950 @@ +--- +title: Fonaments de text HTML +slug: Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Introduction to HTML + - Learn + - Text + - headings + - paragraphs + - semantics +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

Una de les funcions principals de l'HTML és donar estructura i significat al text (també conegut com {{glossary("semàntica")}}), perquè el navegador el pugui mostrar correctament. En aquest article s'explica la forma com es pot utilitzar {{glossary("HTML")}} per estructurar una pàgina de text afegint títols i paràgrafs, destacant paraules, amb la creació de llistes, i més.

+ + + + + + + + + + + + +
Requisits previs:Familiaritzar-se amb els elements bàsics de l’HTML, com es tracta en Inici en HTML.
Objectiu:Aprendre com marcar una pàgina bàsica de text per donar-hi estructura i significat - incloent paràgrafs, capçaleres, llistes, destacats i cites.
+ +

Conceptes bàsics: capçaleres i paràgrafs

+ +

La majoria del text estructurat es compon de títols i paràgrafs, independentment de si llegeixes una història, un diari, un llibre de text universitari, una revista, etc.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

El contingut estructurat fa que l'experiència de llegir sigui més fàcil i agradable.

+ +

En HTML, cada paràgraf s’ha de delimitar amb un element {{htmlelement("p")}}, així:

+ +
<p>I am a paragraph, oh yes I am.</p>
+ +

Cada títol s’ha de delimitar amb un element de títol:

+ +
<h1>I am the title of the story.</h1>
+ +

Hi ha sis elements de títol: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} i {{htmlelement("h6")}}. Cada element representa un nivell de contingut diferent del document; <h1> representa el títol principal, <h2> representa un subtítol, <h3> representa un subsubtítol, i així successivament.

+ +

Implementar una estructura jeràrquica

+ +

A tall d'exemple, en una història, <h1> representaria el títol de la història, <h2> representaria el títol de cada capítol i <h3> representaria subseccions de cada capítol, i així successivament.

+ +
<h1>The Crushing Bore</h1>
+
+<p>By Chris Mills</p>
+
+<h2>Chapter 1: The Dark Night</h2>
+
+<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
+
+<h2>Chapter 2: The eternal silence</h2>
+
+<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
+
+<h3>The specter speaks</h3>
+
+<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
+ +

Què representen exactament els elements que intervenen depèn en realitat de tu, sempre que la jerarquia tingui sentit. Només has de tenir en compte un seguit de bones pràctiques a mesura que crees aquest tipus d'estructures:

+ + + +

Per què cal una estructura?

+ +

Per respondre a aquesta pregunta, fem una ullada a text-start.html; el punt de partida del nostre exemple d'aquest article (una bona recepta d’humus). Desa una còpia d'aquest arxiu a l'ordinador, el necessitaràs per als exercicis més endavant. El cos d'aquest document actualment conté diversos elements de contingut, que no estan marcats de cap manera, però estan separats per salts de línia (Intro/Retorn picat per a passar a la línia següent).

+ +

No obstant això, quan obres el document en el navegador, observa que el text apareix com gran garbuix!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

Això és perquè no hi ha elements que donin estructura als continguts, de manera que el navegador no sap què és un títol i què és un paràgraf. A més:

+ + + +

Per tant, hem de donar al nostre contingut un etiquetatge estructural.

+ +

Aprenentatge actiu: donar estructura als continguts

+ +

Passem directament a un exemple en viu. En l'exemple següent, afegim elements al text sense format en el requadre d’entrada perquè en el requadre de sortida aparegui com un títol i dos paràgrafs.

+ +

Si t’equivoques, sempre pots tornar a començar amb el botó de reinici. Si t’encalles, fes clic al botó Mostra la solució per veure la resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Per què cal semàntica?

+ +

Tot al nostre entorn compta amb la semàntica; comptem amb l'experiència prèvia per a conèixer la funció dels objectes quotidians; quan veiem una cosa, sabem quina és la seva funció. Així, per exemple, esperem que un semàfor en vermell tingui el sentit de «parar», i un semàfor en verd signifiqui «continuar». Si apliquem malament la semàntica, les coses poden complicar-se ràpidament (hi ha cap país en què el vermell signifiqui «continuar»? Esperem que no!).

+ +

En una línia similar, ens hem d’assegurar que utilitzem els elements correctes per a donar al nostre contingut el significat, la funció o l’aspecte correctes. En aquest context, l'element {{htmlelement("h1")}} és també un element semàntic, que dona al text al qual delimita la funció (o el sentit) d'un «nivell superior en la capçalera de la teva pàgina».

+ +
<h1>This is a top level heading</h1>
+ +

Per defecte, el navegador hi donarà una mida de cos de lletra gran perquè es vegi com un títol d’encapçalament (encara que amb CSS podries aplicar-hi estil perquè tingui l’aspecte que vulguis). I encara és més important el fet que el seu valor semàntic s’utilitzarà de diverses maneres, per exemple, l’empraran els motors de cerca i els lectors de pantalla (com hem esmentat abans).

+ +

D'altra banda, tu pots fer que qualsevol element sembli un títol de nivell superior. Considera el codi següent:

+ +
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+ +

Aquest és un element {{htmlelement("span")}}. No té semàntica. Es fa servir per a delimitar el contingut quan vols aplicar-hi CSS (o fer alguna cosa amb JavaScript) sense donar-hi cap significat addicional (en trobaràs més informació més endavant en el curs). Hi hem aplicat una mica de CSS perquè es vegi com un títol de nivell superior, però ja que no té valor semàntic, no aconseguirà cap dels beneficis addicionals que hem esmentat abans. És bo emprar l'element HTML que correspon a cada funció.

+ +

Llistes

+ +

Ara centrarem la nostra atenció en les llistes. Les llistes estan per tot arreu en la vida, de la llista de la compra a la llista de carrers que seguim subconscientment per a arribar a casa cada dia, a les llistes d'instruccions que segueixes en aquests tutorials! Les llistes també estan pertot arreu al web, i n’hi ha tres tipus diferents dels quals ens volem ocupar.

+ +

No ordenades

+ +

Les llistes no ordenades s'utilitzen per a marcar les llistes d'elements en què l'ordre dels elements no és important; com a exemple, farem una llista de la compra.

+ +
milk
+eggs
+bread
+hummus
+ +

Totes les llistes no ordenades comencen amb un element {{htmlelement("ul")}} que delimita tots els elements de la llista:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

L'últim pas consisteix a delimitar cada element de la llista amb un element {{htmlelement("li")}} (element de llista):

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

Aprenentatge actiu: etiquetatge d'una llista no ordenada

+ +

Modifica l'exemple en viu a continuació per a crear la teva llista HTML no ordenada pròpia.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

+ +

Ordenades

+ +

Les llistes ordenades són llistes en què l'ordre dels elements és important. Com a exemple, prendrem un seguit d’instruccions per a arribar a una adreça:

+ +
Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road
+ +

L'estructura de l’etiquetatge és la mateixa que per a les llistes no ordenades, excepte que cal delimitar els elements de la llista amb un element {{htmlelement("ol")}}, en lloc d’amb un element <ul>:

+ +
<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+ +

Aprenentatge actiu: etiquetatge d'una llista ordenada

+ +

Modifica l'exemple en viu a continuació per a crear la teva llista HTML ordenada pròpia.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

+ +

Aprenentatge actiu: etiquetatge de la teva pàgina de receptes

+ +

En aquest punt de l'article ja tens tota la informació que necessites per a marcar el teu exemple d’una pàgina de receptes. Pots optar per desar una còpia local del nostre arxiu d'inici text-start.html i fer la feina allà, o fer-ho en l'exemple editable a continuació. Fer-ho de manera local probablement serà millor, perquè aleshores podràs desar la feina que hi facis, mentre que si treballes en l'exemple editable, la perdràs la vegada següent que obris la pàgina. Totes dues coses tenen pros i contres.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

+ +

Si t’encalles, sempre es pot prémer el botó Mostra la solució o fer un cop d'ull al nostre exemple text-complete.html que trobaràs en el nostre repositori de GitHub.

+ +

Llistes imbricades

+ +

És perfectament correcte imbricar una llista dins d'una altra. És possible que vulguis tenir subvinyetes sota d’una vinyeta de nivell superior. Considera la segona llista del nostre exemple recepta:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.</li>
+  <li>If you want a coarse "chunky" humous, process it for a short time.</li>
+  <li>If you want a smooth humous, process it for a longer time.</li>
+</ol>
+ +

Atès que les dues últimes vinyetes estan molt estretament relacionades amb l'anterior (es llegeixen com a subinstruccions o opcions que s'ajusten per sota d'aquesta vinyeta), podria tenir sentit imbricar-les en una llista desordenada pròpia i posar aquesta llista dins de la quarta vinyeta. Es veuria així:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" humous, process it for a short time.</li>
+      <li>If you want a smooth humous, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+ +

Torna a l'exemple de l'aprenentatge actiu anterior i modifica la segona llista de la mateixa manera.

+ +

Èmfasi i importància

+ +

En el llenguatge humà, sovint destaquem certes paraules per a alterar el significat d'una oració, i moltes vegades volem ressaltar certes paraules perquè són importants o perquè són diferents d'alguna manera. HTML proporciona diversos elements semàntics que permeten destacar el contingut textual amb aquesta finalitat, i en aquest apartat en veurem alguns dels més comuns.

+ +

Èmfasi

+ +

Quan en el llenguatge parlat volem donar èmfasi, accentuem certes paraules de manera que n’alterem subtilment el significat. De la mateixa manera, en el llenguatge escrit tendim a posar en cursiva les paraules que volem emfatitzar. Per exemple, les dues frases següents tenen significats diferents.

+ +

I am glad you weren't late.

+ +

I am glad you weren't late.

+ +

La primera frase expressa alleujament autèntic perquè la persona no arriba tard. Per contra, la segona sona amb sarcasme o agressivitat passiva, que expressa enuig perquè la persona arriba una mica tard.

+ +

En HTML s'utilitza l'element {{htmlelement("em")}} (èmfasi) per marcar aquests casos. Alhora que fa que el document sigui més interessant de llegir, els lectors de pantalla reconeixen aquests elements i hi incorporen un to de veu parlat diferent. Els navegadors hi apliquen per defecte l’estil de lletra cursiva, però aquesta etiqueta no és l’única que podem usar per a donar un estil de lletra cursiva. Per a això també podem utilitzar un element {{htmlelement("span")}} i una mica de CSS, o potser un element {{htmlelement("i")}} (veure més endavant).

+ +
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+ +

Importància forta

+ +

Per a destacar la importància de les paraules, en el llenguatge parlat tendim a accentuar-les, i en el llenguatge escrit les posem en lletra negreta. Per exemple:

+ +

This liquid is highly toxic.

+ +

I am counting on you. Do not be late!

+ +

En HTML s'utilitza l'element {{htmlelement("strong")}} (importància forta) per a destacar aquests casos. A mes de fer el document més útil, de nou els lectors de pantalla reconeixen aquests elements i hi apliquen un to de veu diferent. L'estil per defecte que els navegadors apliquen a aquest text és la lletra negreta, però aquesta etiqueta no és l’única que podem usar per a aplicar l’estil de lletra negreta. Per a això també podem utilitzar un element {{htmlelement("span")}} i una mica de CSS, o potser un element {{htmlelement("b")}} (veure més endavant).

+ +
<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+ +

Pots imbricar etiquetes d’importància i èmfasi les unes dins de les altres, si ho vols:

+ +
<p>This liquid is <strong>highly toxic</strong> —
+if you drink it, <strong>you may <em>die</em></strong>.</p>
+ +

Aprenentatge actiu: ser important!

+ +

En aquesta secció d'aprenentatge actiu, et proporcionem un exemple editable. Per a adquirir una mica de pràctica, afegeix èmfasi i importància a les paraules que penses que ho necessiten.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

+ +

Cursiva, negreta, subratllat...

+ +

Els elements que hem tractat fins ara tenen una semàntica associada clara. La situació amb {{htmlelement("b")}}, {{htmlelement("i")}} i {{htmlelement("u")}} és una mica més complicada. Van arribar perquè la gent pogués escriure text en negreta, cursiva o subratllat en una època en què el CSS encara era poc compatible, o gens en absolut. Elements com aquests només afecten la presentació, però no la semàntica; es coneixen com elements de presentació i ja no s'haurien d'utilitzar perquè, com hem vist, la semàntica és molt important per a l'accessibilitat, el posicionament SEO, etc.

+ +

HTML5 va redefinir les etiquetes <b>, <i> i <u> amb funcions semàntiques noves, que tanmateix resulten un xic confuses.

+ +

Aquesta és la millor regla d'or: només és apropiat utilitzar <b>, <i> o <u> quan es vol transmetre un significat que tradicionalment s’ha expressat amb lletra negreta, cursiva o subratllat, si no hi ha cap element més adequat. No obstant això, sempre continua sent crític mantenir una mentalitat d'accessibilitat. El concepte de cursiva no és gaire útil per a les persones que utilitzen lectors de pantalla, ni per a les persones que utilitzen un sistema d'escriptura que no sigui l'alfabet llatí.

+ + + +
+

Una advertència amable sobre el subratllat: la gent associa en gran mesura el subratllat amb els hipervincles. Per tant, a la web, és millor posar en subratllat només els enllaços. Utilitza l'element <u> quan sigui semànticament apropiat, però considera l'ús de CSS per a canviar el valor per omissió del subratllat per alguna cosa més apropiada en la web. L’exemple següent il·lustra com es pot fer:

+
+ +
<!-- scientific names -->
+<p>
+  The Ruby-throated Hummingbird (<i>Archilocus colubris</i>)
+  is the most common hummingbird in Eastern North America.
+</p>
+
+<!-- foreign words -->
+<p>
+  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- a known misspelling -->
+<p>
+  Someday I'll learn how to <u>spel</u> better.
+</p>
+
+<!-- Highlight keywords in a set of instructions -->
+<ol>
+  <li>
+    <b>Slice</b> two pieces of bread off the loaf.
+  </li>
+  <li>
+    <b>Insert</b> a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  </li>
+</ol>
+ +

Resum

+ +

Això és tot per ara! Aquest article t’hauria d’haver donat una idea prou bona de com començar a marcar text en HTML i presentat alguns dels elements més importants en aquest àmbit. Hi ha molts més elements semàntics per a exposar en aquest àmbit, i en veurem molts més en el nostre article «Format de text avançat», més endavant en el curs. En el proper article, veurem amb detall com crear hipervincles, possiblement l'element més important en la web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/format_de_text_avan\303\247at/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/format_de_text_avan\303\247at/index.html" new file mode 100644 index 0000000000..8163f0b4c3 --- /dev/null +++ "b/files/ca/learn/html/introducci\303\263_al_html/format_de_text_avan\303\247at/index.html" @@ -0,0 +1,677 @@ +--- +title: Format de text avançat +slug: Learn/HTML/Introducció_al_HTML/Format_de_text_avançat +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Text + - abbreviation + - description list + - quote + - semantic +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

Hi ha molts altres elements en HTML per a la formatació del text, que no hem vist en l'article sobre els elements bàsics de text HTML. Els elements que es descriuen en aquest article són menys coneguts, però són útils de conèixer (i això no és encara en absolut una llista completa). Aquí aprendreu sobre l’etiquetatge de les citacions, de les llistes de descripció, del codi d'ordinador i altres textos relacionats, dels subíndexs i superíndexs, de la informació de contacte, i de molt més.

+ + + + + + + + + + + + +
Requisits previs:Familiarització amb els elements bàsics de l’HTML, com es tracten en iniciació a l’HTML. Aplicació de format a textos amb HTML, com s'explica en els Elements bàsics de text en HTML.
Objectiu:Aprendre a utilitzar elements HTML menys coneguts per a etiquetar característiques semàntiques avançades.
+ +

Llistes de descripció

+ +

En els elements bàsics de text en HTML, hem fet camí pels elements d’etiquetatge bàsics de les llistes en HTML, però no hem esmentat un tercer tipus de llistes amb que et pots topar de tant en tant, les llistes de descripció. El propòsit d'aquestes llistes és etiquetar un conjunt d'elements i les descripcions associades a aquests, com ara termes i definicions, o preguntes i respostes. Vegem un exemple d'un conjunt de termes i definicions:

+ +
soliloquy
+In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
+monologue
+In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
+aside
+In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information
+ +

Les llistes de descripció utilitzen un etiquetatge diferent dels altres tipus de llistes, l’element {{htmlelement("dl")}}; a més, cada terme es delimita amb un element {{htmlelement("dt")}} (descripció del terme), i cada descripció es delimita amb un element {{htmlelement("dd")}} (definició de la descripció). Acabem d’etiquetar el nostre exemple:

+ +
<dl>
+  <dt>soliloquy</dt>
+  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
+  <dt>monologue</dt>
+  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
+  <dt>aside</dt>
+  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.</dd>
+</dl>
+ +

Els estils per defecte del navegador mostren els termes de les llistes de descripció sagnats en certa mesura respecte de les descripcions. Els estils de MDN segueixen aquesta convenció de bastant a prop, però a més, destaquen els termes amb lletra negreta.

+ +
+
soliloquy
+
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
+
monologue
+
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
+
aside
+
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.
+
+ +

Observa que pots tenir múltiples descripcions per a un mateix terme; per exemple:

+ +
<dl>
+  <dt>aside</dt>
+  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
+  <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
+</dl>
+ +
+
aside
+
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.
+
In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)
+
+ +

Aprenentatge actiu: etiquetatge d'un conjunt de definicions

+ +

És l’hora de posar a prova la teva destresa amb les llistes de descripció; afegeix elements al text sense format en el camp d'entrada perquè aparegui com una llista de descripció en el camp de sortida. Si vols, pots fer servir termes i descripcions propis..

+ +

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó, Mostra la solució per veure la resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Citacions

+ +

L'HTML també disposa de característiques per a l’etiquetatge de cites; quin element s'utilitza depèn de si s’etiqueta en el nivell de bloc o es fa en el nivell de línia.

+ +

Elements de bloc de citació (blockquotes)

+ +

Per a indicar que una secció de continguts de nivell de bloc (un paràgraf, diversos paràgrafs, una llista, etc.) se cita des d'un altre lloc l’has d’etiquetar amb un element {{HTMLElement("blockquote")}}, i has d’incloure en un atribut {{htmlattrxref("cite","blockquote")}} una URL que apunti cap a la font de la citació. Per exemple, la línia de codi següent es pren de la pàgina MDN: «L'element <blockquote>»:

+ +
<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+ +

Per convertir això en una citació de bloc, has de fer això:

+ +
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+ +

L’estil per defecte del navegador mostra això com un paràgraf sagnat per indicar que es tracta d'una citació; MDN fa això, però també hi afegeix una mica més d'estil:

+ +
+

L'element  HTML <blockquote> (o element de bloc de citació HTML) indica que el text associat és una citació extensa.

+
+ +

Elements de línia de citació

+ +

Els elements de línia de citació funcionen exactament de la mateixa manera, només que utilitzen l'element {{htmlelement("q")}}. Per exemple, l’etiquetatge que tens a continuació inclou una citació de la pàgina de MDN sobre <q>:

+ +
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q></p>
+ +

L'estil per defecte del navegador mostra aquest text com un element normal posat entre cometes per a indicar que és una citació, com això:

+ +

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

+ +

Citacions

+ +

El contingut de l'atribut {{htmlattrxref("cite","blockquote")}} sembla útil, però per desgràcia als navegadors, als lectors de pantalla, etc., no hi fan gaire. No hi ha manera d'aconseguir que el navegador mostri el contingut de cite sense necessitat d'escriure una solució pròpia amb JavaScript o CSS. Si vols que la font de la citació estigui disponible a la pàgina, la millor manera és etiquetar-la amb l'element {{HTMLElement("cite")}} al costat de l'element quote. Això serveix en realitat per a incloure el nom de la font de la citació, és a dir, el nom del llibre o el de la persona de qui és el text que se cita; però no hi ha cap raó per la qual el text no es pugui associar d'alguna manera la font de la cita dins de <cite>:

+ +
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+<cite>MDN blockquote page</cite></a>:
+</p>
+
+<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+
+<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
+<cite>MDN q page</cite></a>.</p>
+ +

Les citacions tenen l'estil en cursiva per defecte.

+ +

{{EmbedLiveSample('Citations', '100%', '179px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Aprenentatge actiu: Qui ha dit això?

+ +

Temps per a un altre exemple d'aprenentatge actiu! En aquest exemple ens agradaria:

+ +
    +
  1. Convertir el paràgraf del mig en un bloc de citació que inclogui un atribut cite.
    2. +
  2. Convertir una part del tercer paràgraf en una citació de línea que inclogui un atribut cite.
    3. +
  3. Incloure un element <cite> per a cada citació
    4. +
+ +

Cerca a Internet per trobar fonts de citacions apropiades.

+ +

Si t’equivoques, sempre pots tornar a l’inici amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per veure la resposta.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

Abreviatures

+ +

Un altre element força comú que et trobes quan et passeges per la web és {{HTMLElement ("abbr")}}. Aquesta etiqueta serveix per a delimitar una abreviatura o un acrònim i proporcionar el desenvolupament complet del terme (que s’inclou dins d'un atribut {{htmlattrxref("title")}}). Vegem-ne un parell d'exemples:

+ +
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
+
+<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
+ +

Ve a ser una cosa com això (el desenvolupament apareix en un indicador de funció quan passes el cursor per sobre del terme):

+ +

We use HTML to structure our web documents.

+ +

I think Rev. Green did it in the kitchen with the chainsaw.

+ +
+

Nota: Hi ha un altre element, {{HTMLElement ("acronym")}}, que bàsicament fa el mateix que <abbr> i que estava destinat específicament als acrònims, en lloc de les abreviatures, però que ha caigut en desús; tampoc era compatible amb tots els navegadors, com ho és <abbr>, i com que les dues etiquetes tenen una funció tan similar, es va considerar inútil tenir-les totes dues. Per tant, fes servir només <abbr>.

+
+ +

Aprenentatge actiu: etiquetatge d'una abreviatura

+ +

Per a aquesta senzilla tasca d'aprenentatge actiu, només et proposem de fer l’etiquetatge d'una abreviatura. Pots utilitzar el nostre exemple a continuació, o substituir-lo per un de la teva elecció. 

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

+ +

Etiquetatge de les dades de contacte

+ +

HTML té un element per a etiquetar les teves dades de contacte: {{htmlelement("address")}}. Aquesta etiqueta senzillament delimita de les dades de contacte; per exemple:

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, UK</p>
+</address>
+ +

També s'hi pot incloure marcatge més comples, i d'altres formes d'informació de contacte, com ara:

+ +
<address>
+  <p>
+    Chris Mills<br>
+    Manchester<br>
+    The Grim North<br>
+    UK
+  </p>
+
+  <ul>
+    <li>Tel: 01234 567 890</li>
+    <li>Email: me@grim-north.co.uk</li>
+  </ul>
+</address>
+ +

Fixeu-vos que una cosa com la següent també seria vàlida, si la pàgina enllaçada contingués informació de contacte:

+ +
<address>
+  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Superíndex i subíndex

+ +

De tant en tant hauràs d’utilitzar superíndex i subíndex per a etiquetar correctament elements com ara dates, fórmules químiques o equacions matemàtiques. Els elements {{htmlelement("sup")}} i {{htmlelement("sub")}} gestionen aquesta feina. Per exemple:

+ +
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
+<p>Caffiene's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
+ +

La sortida d'aquest codi és com això:

+ +

My birthday is on the 25th of May 2001.

+ +

Caffeine's chemical formula is C8H10N4O2.

+ +

If x2 is 9, x must equal 3 or -3.

+ +

Representar codi informàtic

+ +

Hi ha una sèrie d'elements disponibles per a l’etiquetatge de codi informàtic:

+ + + +

Vegem-ne uns exemples. Juga amb aquests exemples (fes una còpia del nostre arxiu d'exemple other-semantics.html):

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}</code></pre>
+
+<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
+
+<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
+
+
+<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+ +

El codi anterior es veuria així:

+ +

{{ EmbedLiveSample('Representar_codi_informàtic','100%',300) }}

+ +

Etiquetatge d'hores i dates

+ +

HTML també proporciona l'element {{htmlelement("time")}} per a etiquetar les hores i les dates en un format llegible per la màquina. Per exemple:

+ +
<time datetime="2016-01-20">20 January 2016</time>
+ +

Per què és això útil? Bé, hi ha moltes maneres diferents d’escriure les dates. La data anterior es podria escriure de totes aquestes maneres:

+ + + +

Però els ordinadors no reconeixen fàcilment aquesta diversitat de formes. Si vols agafar automàticament les dates de tots els esdeveniments en una pàgina i inserir-los en un calendari, l'element {{htmlelement("time")}} et permet adjuntar una hora/data que una màquina podrà llegir inequívocament .

+ +

L'exemple bàsic anterior proporciona una simple data llegible per una màquina, però hi ha moltes altres opcions que són possibles, per exemple:

+ +
<!-- Standard simple date -->
+<time datetime="2016-01-20">20 January 2016</time>
+<!-- Just year and month -->
+<time datetime="2016-01">January 2016</time>
+<!-- Just month and day -->
+<time datetime="01-20">20 January</time>
+<!-- Just time, hours and minutes -->
+<time datetime="19:30">19:30</time>
+<!-- You can do seconds and milliseconds too! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Date and time -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
+<!-- Date and time with timezone offset-->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
+<!-- Calling out a specific week number-->
+<time datetime="2016-W04">The fourth week of 2016</time>
+ +

Resum

+ +

Això marca el final del nostre estudi de la semàntica de text HTML. Tingues present que el que has vist durant aquest curs no és una llista exhaustiva dels elements de text HTML; només hem volgut exposar els elements essencials i alguns dels més comuns que et pots trobar, o si més no, que puguis trobar prou interessants. Per trobar més elements HTML pel camí, pots fer una ullada a la nostra referència d'elements HTML (la secció de la semàntica de text en línia seria un bon lloc per on començar). En l’article següent veurem els diversos elements HTML que s'usen per a estructurar les diferents parts d'un document HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/getting_started/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/getting_started/index.html" new file mode 100644 index 0000000000..03b70effc6 --- /dev/null +++ "b/files/ca/learn/html/introducci\303\263_al_html/getting_started/index.html" @@ -0,0 +1,735 @@ +--- +title: Inici en HTML +slug: Learn/HTML/Introducció_al_HTML/Getting_started +tags: + - Attribute + - Beginner + - CodingScripting + - Comment + - Element + - Guide + - HTML + - entity reference + - whitespace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

En aquest article exposarem els fonaments bàsics de l'HTML, perquè pugueu començar. Definirem els elements, els atributs i tots els altres termes importants que podeu haver sentit, i quina funció compleixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres característiques bàsiques importants del llenguatge. Pel camí, jugarem una mica amb l'HTML perquè mantinguis l'interès!

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, programari bàsic instal·lat i coneixements bàsics de treballar amb arxius.
Objectiu:Familiaritzar-se amb el llenguatge HTML i obtenir una mica de pràctica escrivint elements HTML.
+ +

Què és HTML?

+ +

{{glossary("HTML")}} (HyperText Markup Language) no és un llenguatge de programació; és un llenguatge de marcat, que serveix per dir al teu navegador la manera d'estructurar les pàgines web que visites. Pot ser tan complicat o tan simple com el desenvolupador web desitgi que sigui. HTML consisteix en un seguit d'{{glossary("Element", "elements")}}, que s'utilitzen per tancar, delimitar o marcar diferents parts del contingut per fer que aparegui o actuï d'una manera determinada . Les {{glossary("Tag", "etiquetes")}} que el delimiten poden convertir un petit fragment de contingut en un enllaç que connecti amb una altra pàgina en la web, per a posar paraules en cursiva, i així successivament. Per exemple, prenguem la següent línia de contingut:

+ +
My cat is very grumpy
+ +

Si volem que la línia es mantingui independent, podem especificar que és un paràgraf delimitant-la amb un element d'etiqueta de paràgraf ({{htmlelement ("p")}}):

+ +
<p>My cat is very grumpy</p>
+ +

Anatomia d'un element HTML

+ +

Explorem una mica el nostre element paràgraf fins una mica més enllà:

+ +

+ +

Les parts principals del nostre element són:

+ +
    +
  1. L'etiqueta d'obertura: Consisteix en el nom de l'element (en aquest cas, p), delimitat amb claus angulars d'obertura i tancament. Això indica on comença l'element, o comença a tenir efecte; en aquest cas és al començament del paràgraf.
    2. +
  2. L'etiqueta de tancament: És la mateixa que l'etiqueta d'obertura, excepte que inclou una barra inclinada abans del nom de l'element. Això indica on acaba l'element; en aquest cas és al final del paràgraf. El fet de no incloure una etiqueta de tancament és un error de principiant comú, i pot conduir a resultats estranys.
    3. +
  3. El contingut: És el contingut de l'element, que en aquest cas és només text.
    4. +
+ +

L'element és l'etiqueta d'obertura, seguida del contingut, seguida de l'etiqueta de tancament.

+ +

Aprenentatge actiu: crea el teu primer element HTML

+ +

Edita la línia següent en l'àrea d'entrada delimitant-la amb les etiquetes <em> i </em> (posa <em> abans d'obrir l'element, i </em> després, per tancar l'element); això hauria de donar una línia en cursiva! Pots veure els canvis actualitzats en viu en l'àrea de sortida.

+ +

Si t’equivoques sempre pots tornar al codi anterior amb el botó de Reinicia. Si et quedes realment encallat, fes clic al botó Mostra la solució per veure la resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 300) }}

+ +

Niar elements

+ +

També pots posar elements dins d'altres elements; això s’anomena imbricar. Si volem afirmar que el nostre gat està de molt mal humor, podem delimitar la paraula «molt» amb un element {{htmlelement("strong")}}, que significa que la paraula es destaca amb força:

+ +
<p>El meu gast està de <strong>molt</strong> mal humor.</p>
+ +

No obstant això, us heu d’assegurar que els elements estan correctament imbricats: en l'exemple anterior en primer lloc hem obert l'element p i a continuació l'element strong; per tant, hem de tancar l'element strong en primer lloc i l’element p a continuació. Fer el següent és incorrecte:

+ +
<p>El meu gat està <strong>de molt mal humor.</p></strong>
+ +

Els elements s’han d’obrir obrir i tancar correctament de manera que estiguin clarament dins o fora l’un de l'altre. Si se superposen, com a dalt, llavors el teu navegador web tractarà de fer l’estimació que li sembli més correcta del que vols dir, i així es poden obtenir resultats inesperats.

+ +

Elements de bloc i elements de línia

+ +

Hi ha dues categories importants d'elements en HTML, que has de conèixer: els elements de bloc i els elements de línia.

+ + + +

Prenguem l'exemple següent:

+ +
<em>first</em><em>second</em><em>third</em>
+
+<p>fourth</p><p>fifth</p><p>sixth</p>
+
+ +

{{htmlelement("em")}} és un element de línia. Així, com es pot veure a continuació, els tres primers elements són a la mateixa línia l'un i l'altre, sense cap espai entre ells. D'altra banda, {{htmlelement("p")}} és un element de bloc, de manera que cada element apareix en una línia nova, amb un espai per sobre i per sota de cada un (L'espaiat es deu a l'aplicació d’estil CSS que el navegador aplica als paràgrafs per defecte).

+ +

{{ EmbedLiveSample('Elements_de_bloc_i_elements_de_línia', 700, 200) }}

+ +
+

Nota: HTML5 va redefinir les categories d'elements en HTML5: vegeu Categories d'elements de contingut. Si bé aquestes definicions són més precises i menys ambigües que les anteriors, són molt més complicades d'entendre que «de bloc» i «de línia», per la qual cosa ens quedarem amb aquestes al llarg d'aquest article.

+
+ +
+

Nota: Podeu trobar pàgines de referència útils que inclouen llistes d'elements de bloc i elements de línia; vegeu els elements de nivell de bloc i els elements de línia.

+
+ +

Elements buits

+ +

No tots els elements segueixen el patró anterior d'etiqueta d'obertura, contingut i etiqueta de tancament. Alguns elements consisteixen en una sola etiqueta, que normalment s'utilitza per inserir/incrustar alguna cosa  en el document en el lloc on s'inclou. Per exemple, l'element {{htmlelement("img")}} insereix una imatge en una pàgina en la posició en què està inclosa:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Aquesta sortida mostraria el següent a la vostra pàgina:

+ +

{{ EmbedLiveSample('Elements_buits', 700, 300) }}

+ +
+

Nota: Els elements buits també se'ls anomena de vegades (void elements).

+
+ +

Atributs

+ +

Els elements també poden tenir atributs, que tenen presenten l’aspecte següent:

+ +

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

+ +

Els atributs contenen informació addicional sobre l'element que no vols que aparegui com a contingut. En aquest cas, l'atribut class permet donar a l'element un nom d'identificació que pot ser posteriorment utilitzat per l'element destí amb informació d'estil i altres coses.

+ +

Un atribut ha de tenir:

+ +
    +
  1. Un espai entre ell i el nom de l'element (o l'atribut anterior, si l'element ja té un o més atributs.)
    2. +
  2. El nom de l'atribut, seguit d'un signe igual.
    3. +
  3. Un valor d'atribut, amb signes d'obertura i de tancament de cometes que el delimiten
    4. +
+ +

Aprenentatge actiu: Afegir atributs a un element

+ +

Un altre exemple d'un element és {{HTMLElement ("a")}}; ve d’anchor i delimita la part del text que és un enllaç. Pot prendre un seguit d'atributs, però dos són els següents:

+ + + +

Edita la línia següent en l'àrea Input per convertir-la en un enllaç al teu lloc web favorit.

+ +
    +
  1. Afegeix l'element <a>.
    2. +
  2. Afegeix l'atribut href, i seguidament l'atribut title.
    3. +
  3. Especifica l'atribut target per obrir l'enllaç en una nova pestanya.
    4. +
+ +

Observa els canvis actualitzats en directe a l'àrea Output. Hauries de veure un enllaç, que en passar-hi per sobre mostrarà el contingut de l'atribut title, i en clicar-hi, va a l'adreça web de l'element href. Recorda que has d’incloure un espai entre el nom de l'element i cada atribut.

+ +

Si t’equivoques, sempre pots restablir el codi anterior amb el botó de reinici. Si et quedes realment encallat, fes clic al botó Mostra la solució per veure la solució.

+ + + +

{{ EmbedLiveSample('Codi_executable_2', 700, 300) }}

+ +

Atributs booleans

+ +

De vegades veuràs atributs que estan escrits sense valors; això està perfectament permès. S’anomenen atributs booleans, i només poden tenir un valor, que és generalment el mateix que el nom de l'atribut. A tall d'exemple, preneu l'atribut {{htmlattrxref("disabled", "input")}}, que es pot assignar als elements d’entrada de dades d'un formulari, si voleu que estiguin desactivats (en gris) perquè l'usuari no hi pugui entrar cap dada. Per exemple,

+ +
<input type="text" disabled="disabled">
+ +

Com a forma abreujada, és perfectament admissible escriure-ho de la manera següent (també hem inclòs un element d’entrada de dades de formulari no desactivat com a referència, perquè tinguis una idea de què passa):

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

Tots dos donaran una sortida com la següent:

+ +

{{ EmbedLiveSample('Atributs_booleans', 700, 100) }}

+ +

Ometre les cometes que delimiten els valors dels atributs

+ +

Quan navegues per la web, et trobes amb tot tipus d'estils de marcat estranys, inclosos valors d'atributs sense cometes. Això és permissible en algunes circumstàncies, però en d'altres trencarà el codi de marcatge. Per exemple, si reprenem el nostre exemple d'enllaç d'abans, podem escriure una versió bàsica amb només l'atribut href, així:

+ +
<a href=https://www.mozilla.org/>favourite website</a>
+
+ +

No obstant això, quan afegim a aquest estil l'atribut title, les coses no funcionen:

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
+
+ +

En aquest punt, el navegador ha interpretat malament el marcatge perquè pensa que l'atribut title té en realitat tres atributs: un atribut title amb el valor «The», i dos atributs booleans, Mozilla i homepage. Això, òbviament, no és el que es pretenia, i causarà errors o un comportament inesperat en el codi, com es veu en l'exemple a continuació. Intenta passar sobre l'enllaç per veure quin és el títol del text!

+ +

{{ EmbedLiveSample('Ometre_les_cometes_que_delimiten_els_valors_dels_atributs', 700, 100) }}

+ +

Inclou sempre les cometes de l'atribut. Evita aquest tipus de problemes, i el codi resulta més llegible.

+ +

Cometes simples o dobles?

+ +

En aquest article t’adonaràs que els atributs estan delimitats per cometes dobles. No obstant això, és possible que vegis cometes simples en algun codi HTML. Això és purament una qüestió d'estil, i ets lliure d'escollir . Les dues línies següents són equivalents:

+ +
<a href="http://www.example.com">A link to my example.</a>
+
+<a href='http://www.example.com'>A link to my example.</a>
+ +

Però t’has d’assegurar que no es barregen. El codi següent no et funcionarà!

+ +
<a href="http://www.example.com'>A link to my example.</a>
+ +

Si has utilitzat un tipus de cometes en el codi HTML, pots fer servir l’altre tipus de cometes per als teus valors d’atribut sense tenir problemes:

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

Ara bé, si vols imbricar cometes dins de cometes, i són iguals, has d’utilitzar {{anch ("Entitats de referències: incloent caràcters especials en HTML")}}. Per exemple, aquest marcatge trencarà el codi:

+ +
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
+ +

Així, necessites fer el següent:

+ +
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
+ +

Anatomia d'un document HTML

+ +

Els elements HTML no són gaire útils per si mateixos. Ara veurem com els elements individuals es combinen per formar una pàgina HTML completa:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

Aquí tenim:

+ +
    +
  1. <!DOCTYPE html>: El tipus de document. Als inicis, quan HTML era jove (al voltant de 1991/1992), els doctype estaven destinats a actuar com enllaços cap a un conjunt de regles que la pàgina HTML havia de seguir per ser considerat un bon HTML, que podia significar la comprovació automàtica d'errors i altres coses útils. Solien ser alguna cosa com ara això: + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + Avui dia són un llegat històric que cal incloure perquè tot funcioni. <!DOCTYPE html> és la cadena més curta de caràcters que es considera com un tipus de document vàlid. Això és tot el que realment et cal saber.
    2. +
  2. <html></html>: L'element <html> delimita tot el contingut de la pàgina, i de vegades es coneix com l'element arrel.
    3. +
  3. <head></head>: L'element <head> actua com un contenidor de totes les coses que vols incloure a la pàgina HTML, però que no són el contingut que vols mostrar als visitants de la teva pàgina. Això inclou coses com ara paraules clau i una descripció de la pàgina que vols que aparegui en els resultats de cerca, estil CSS per al teu contingut, declaracions de conjunts de caràcters, i més. N’aprendràs més en el proper article de la sèrie.
    4. +
  4. <meta charset="utf-8">: Aquest element especifica que el teu document utilitzarà el conjunt de caràcters UTF-8, que inclou la majoria dels caràcters de tots els idiomes humans escrits coneguts. Si ho poses, en essència pots gestionar qualsevol contingut textual possible. No hi ha cap raó per no establir-lo, i us pot ajudar a evitar alguns problemes més endavant.
    5. +
  5. <title></title>: Estableix el títol de la pàgina, que és el títol que apareix a la pestanya del navegador quan carrega la pàgina, i s'utilitza per descriure la pàgina quan l’afegeixes als teus marcadors/favorits.
    6. +
  6. <body></body>: Inclou tot el contingut que es mostra a la teva pàgina, ja sigui text, imatges, vídeos, jocs, reproducció de pistes d'àudio o qualsevol altra cosa.
    7. +
+ +

Aprenentatge actiu: Afegir característiques a un document HTML

+ +

Si vols escriure una mica d'HTML en el teu ordinador local per a experimentar, pots:

+ +
    +
  1. Copiar l'exemple de la pàgina HTML que apareix a dalt.
    2. +
  2. Crear un arxiu nou a l'editor de text.
    3. +
  3. Enganxar el codi en l’arxiu nou de text.
    4. +
  4. Desar el fitxer com index.html.
    5. +
+ +
+

Nota: també pots trobar aquesta plantilla bàsica HTML en el repositori Github de l’Àrea d’aprenentatge d’MDN.

+
+ +

Ara pots obrir aquest arxiu en un navegador web per veure quina aparença té el codi reproduït, i després editar el codi i actualitzar el navegador per veure quin n’és el resultat. Inicialment es veurà així:

+ +

A simple HTML page that says This is my pageEn aquest exercici pots editar el codi localment en el teu ordinador, com s’ha indicat abans, o pots editar-lo en la finestra de mostra editable a continuació (la finestra de mostra editable representa només el contingut de l'element <body>, en aquest cas). Intenta reproduir els passos següents:

+ + + +

Si t’equivoques, sempre pots restablir el codi anterior amb el botó Reinicia. Si realment et quedes encallat, fes clic al botó Mostra la solució per veure la solució.

+ + + +

{{ EmbedLiveSample('Codi_executable_3', 700, 600) }}

+ +

Els espais en blanc en HTML

+ +

Et deus haver adonat que en els exemples anteriors hi ha una gran quantitat d'espais en blanc i salts de línia en el codi; això no és necessari en absolut; els dos fragments de codi següents són equivalents:

+ +
<p>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</p>
+ +

No importa la quantitat d'espais en blanc que utilitzis (pots incloure caràcters d'espai, però també salts de línia), l'intépret HTML ho redueix tot a un sol espai quan el codi es representa. Així, per què utilitzem tant els espais en blanc? La resposta és la llegibilitat.

+ +

És molt més fàcil d'entendre què passa al teu codi si té un format endreçat, que no si està desordenat. En el nostre HTML, cada element imbricat té una sagnia de dos espais més respecte del que el conté. De tu depèn l'estil de format que utilitzis (el nombre d'espais per a cada nivell de sagnat, per exemple), però t’has de plantejar l'ús d'algun tipus de format.

+ +

Referències a entitats: inclusió de caràcters especials en HTML

+ +

En HTML, els caràcters <, >,",' i & són caràcters especials. Són parts de la sintaxi HTML en si; ara bé, com hem d’incloure un d'aquests caràcters en el text, per exemple, si realment volem emprar un ampersand (&) o el signe menys que (<), i que els navegadors no l'interpretin com codi?

+ +

Hem d'utilitzar referències de caràcters, codis especials que representen caràcters i que es poden utilitzar en aquestes circumstàncies exactes. Tots els caràcters de referència s'inicien amb un signe (&) i acaben amb un punt i coma (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caràcter literalReferència de caràcter equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

En el següent exemple, pots veure dos paràgrafs, que parlen sobre tecnologies web:

+ +
<p>In HTML, you define a paragraph using the <p> element.</p>
+
+<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
+ +

A la sortida en directe que veus a continuació pots observar que el primer paràgraf ha anat malament perquè el navegador pensa que la segona instància de <p> inicia un paràgraf nou! El segon paràgraf es veu bé perquè hem reemplaçat els parèntesis angulars amb referències de caràcters.

+ +

{{ EmbedLiveSample('Referències_a_entitats_inclusió_de_caràcters_especials_en_HTML', 700, 200) }}

+ +
+

Nota: Un gràfic de totes les referències a entitats de caràcters HTML disponibles, es pot trobar en la Viquipèdia: Llista de XML i HTML de les referències a entitats de caràcters.

+
+ +

Comentaris HTML

+ +

En HTML hi ha un mecanisme disponible per escriure comentaris en el codi. El navegador ignora els comentaris, i així també són invisibles per a l'usuari. E·l seu propòsit és permetre que puguis incloure comentaris en el codi per a aclarir-ne el funcionament, explicar què fan les diferents parts, etc. Això pot ser molt útil com a recordatori del treball que has fet si tornes a treballar en un codi amb què no has treballat durant 6 mesos; o si el lliures a una altra persona perquè hi treballi.

+ +

Per a convertir en un comentari una secció de contingut del teu arxiu HTML, l’has de delimitar amb els marcadors especials <!-- i -->. Per exemple:

+ +
<p>I'm not inside a comment</p>
+
+<!-- <p>I am!</p> -->
+ +

Com pots veure a continuació, el primer paràgraf apareix a la sortida en directa, però el segon no ho fa.

+ +

{{ EmbedLiveSample('Comentaris_HTML', 700, 100) }}

+ +

Resum

+ +

Has arribat al final de l'article! Esperem que hagis gaudit de la visita als conceptes bàsics d'HTML. En aquest punt, hauries de ser capaç d'entendre el llenguatge i com funciona en un nivell bàsic, i hauries de ser capaç d'escriure alguns elements i atributs. En els articles següents del mòdul ens introduirem amb més detall en algunes de les coses que ja has examinat, i introduirem algunes característiques noves del llenguatge.

+ +
+

Nota: En aquest punt, a mesura que comences a aprendre més sobre HTML, és possible que també vulguis començar a explorar els fonaments dels fulls d’estil e cascada (cascading style sheets o CSS). CSS és el llenguatge que s’utilitza per a aplicar estil a les teves pàgines web (per exemple, pots canviar el tipus de lletra o els colors, o alterar el disseny de pàgina). HTML i CSS van alhora, com descobriràs de seguida.

+
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
diff --git "a/files/ca/learn/html/introducci\303\263_al_html/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/index.html" new file mode 100644 index 0000000000..721a2795f5 --- /dev/null +++ "b/files/ca/learn/html/introducci\303\263_al_html/index.html" @@ -0,0 +1,65 @@ +--- +title: Introducció a l'HTML +slug: Learn/HTML/Introducció_al_HTML +tags: + - CodingScripting + - HTML + - Introduction to HTML + - Landing + - Links + - Structure + - Text + - head + - semantics +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

En el fons, {{glossary("HTML")}} és un llenguatge bastant simple compost d'elements, que es poden aplicar a peces de text per donar-los significats diferents en un document (és un paràgraf? És una llista de vinyetes? és part d'una taula?), l'estructura d'un document en seccions lògiques (té una capçalera? tres columnes de contingut? un menú de navegació?) i inserir contingut com imatges i vídeos en una pàgina. Aquest mòdul us presentarà els dos primers d'aquests, i us introduirà en els conceptes fonamentals i la sintaxi que necessiteu saber per entendre HTML.

+ +

Requisits previs

+ +

Abans d'iniciar aquest mòdul, no cal cap coneixement previ d'HTML, però heu de tenir almenys coneixements bàsics en l'ús d'ordinadors, i l'ús de la web de forma passiva (és a dir, simplement mirant, consumint el contingut.) Heu de tenir un entorn de treball bàsic configurat com es descriu en Instal.lació de programari bàsic,  i entendre com crear i administrar arxius, com es detalla en Tractar amb arxius — tots dos són parts del nostre mòdul Introducció a la  web per a principiants.

+ +
+

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu en el qual no teniu la capacitat de crear els vostres propis arxius, podeu provar (la majoria) els exemples de codi en un programa de codificació en línia, com ara JSBin o Thimble.

+
+ +

Guies

+ +

Aquest mòdul conté els següents articles, que us portaran a través de tota la teoria bàsica d'HTML, i oferint-vos una gran oportunitat per posar a prova algunes habilitats.

+ +
+
Introducció a HTML
+
Cobreix els fonaments absoluts d'HTML, perquè pugueu començar — definirem els elements, atributs i tots els altres termes importants que podeu haver sentit, i mostrarem on encaixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres importants característiques bàsiques del llenguatge. En el camí, jugarem amb una mica d'HTML, perquè t'interessi!
+
Què hi ha en la capçalera? Metadades en HTML
+
La capçalera (head) d'un document HTML és la part que no es mostra en el navegador web quan es carrega la pàgina. Conté informació tal com el {{htmlelement("title")}} de la pàgina, enllaços a {{glossary("CSS")}} (si voleu donar estil el vostre contingut HTML amb CSS), enllaços a favicones personalitzats, i les metadades (que són dades sobre l'HTML, com qui el va escriure, i les paraules clau importants que descriuen el document.)
+
Fonaments de text HTML
+
Un dels treballs principals de l'HTML és donar significat al text (també conegut com la semàntica), de manera que el navegador sàpiga com mostrar-lo correctament. En aquest article s'analitza com usar HTML per dividir un bloc de text en una estructura d'encapçalats i paràgrafs, afegir èmfasis/importància a les paraules, crear llistes i molt més.
+
Creació d'hipervincles
+
Els hipervincles són realment importants — són el que fan de la web un web. En aquest article es mostra la sintaxi necessària per fer un enllaç, i discuteix les millors pràctiques per als enllaços.
+
Format de text avançat
+
Hi ha molts altres elements en HTML per donar format al text, que no vam veure en l'article de fonaments de text HTML. Els elements que veurem aquí són menys coneguts, però encara així és útil conèixer-los. Aquí aprendreu sobre el marcatge de cites, llistes de descripció, codi de computadora i altre text relacionat, subíndexs i superíndexs, informació de contacte, i més.
+
Document i estructura del lloc web
+
Així com es defineixen les parts individuals de la pàgina (per exemple, "un paràgraf" o "una imatge"), HTML també s'utilitza per definir les àrees del vostre lloc web (per exemple, "la capçalera", "el menú de navegació", "la columna de contingut principal"). En aquest article es reflexiona sobre com planificar una estructura bàsica del lloc web, i escriure el codi HTML per representar aquesta estructura.
+
Depuració HTML
+
Escriure HTML està molt bé, però què passa si alguna cosa va malament i no trobes on està l'error en el codi? Aquest article us donarà a conèixer algunes eines que poden ajudar-vos.
+
+ +

Avaluacions

+ +

Les següents avaluacions posaran a prova la vostra comprensió dels conceptes bàsics d'HTML coberts en les guies anteriors.

+ +
+
Marcatge d'una carta
+
Tots aprenem a escriure una carta, tard o d'hora; també és un exemple útil per posar a prova les vostres habilitats de format de text! Així que en aquesta avaluació se us donarà una carta per marcar.
+
Estructuració d'una pàgina de contingut
+
Aquesta avaluació posa a prova la vsotra capacitat d'utilitzar HTML per estructurar una simple pàgina de contingut, que conté una capçalera, peu de pàgina, el menú de navegació, contingut principal, i la barra lateral.
+
+ +

Veure també

+ +
+
Conceptes bàsics d'alfabetització Web 1
+
Un excel·lent curs de la fundació Mozilla que explora i posa a prova moltes de les habilitats parlades al mòdul Introducció a HTML. Els estudiants es familiaritzaran amb la lectura, l'escriptura i participació en la web en aquest mòdul de sis parts. Descobriran els fonaments del web a través de la producció i col·laboració.
+
diff --git "a/files/ca/learn/html/introducci\303\263_al_html/marcatge_una_carta/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/marcatge_una_carta/index.html" new file mode 100644 index 0000000000..34647eb294 --- /dev/null +++ "b/files/ca/learn/html/introducci\303\263_al_html/marcatge_una_carta/index.html" @@ -0,0 +1,90 @@ +--- +title: Marcatge d'una carta +slug: Learn/HTML/Introducció_al_HTML/Marcatge_una_carta +tags: + - Assessment + - Beginner + - CodingScripting + - HTML + - Links + - Text + - head +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
+ +

Tots aprenem a escriure una carta, tard o d'hora; també és un exemple útil per posar a prova les vostres habilitats de format de text! En aquesta avaluació, se us donarà una carta per al seu marcatge per posar a prova les habilitats bàsiques i avançades de format de text HTML, incloent hipervincles; a més, posareu a prova la vostra familiaritat amb alguns continguts HTML <head>.

+ + + + + + + + + + + + +
Requisits Previs:Abans de procedir amb aquesta avaluació, ja hauríeu d'haver treballat Inici en HTML, Què hi ha en el head? Metadades in HTML, fonaments de text HTML, Crear hipervincles, i format de text avançat.
Objectiu:Provar el format bàsic i avançat de text HTML i habilitats en hipervincles, i el coneixement del que succeeix en el codi HTML <head>.
+ +

Punt de partida

+ +

Per obtenir aquesta avaluació inicial, cal anar i agafar el text sense format que necessiteu per marcar, i el CSS que cal incloure en el codi HTML. Crear un nou arxiu .html amb el vostre editor de text per treballar-ho (o, alternativament, utilitzar un lloc com JSBin o Thimble per fer la avaluació.)

+ +

Resum del projecte

+ +

Per a aquest projecte, la tasca consisteix a marcar una carta que ha de ser allotjada en una intranet de la universitat. La carta és una resposta d'un investigador a un futur estudiant doctorat sobre la seva sol·licitud per treballar a la universitat.

+ +

Bloc/semàntica estructural:

+ + + +

Semàntica en línia:

+ + + +

La capçalera del document:

+ + + +

Consells i suggeriments

+ + + +

Exemple

+ +

La següent captura de pantalla mostra un exemple del que la carta podria ser després del seu marcat.

+ +

+ +

Evaluació

+ +

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al vostre professor/tutor per qualificar-vos. Si sou d'auto-aprenentatge, llavors podeu obtenir la guia de qualificació, amb molta facilitat, preguntan a la llista de correu dev-mdc o al canal IRC #mdn en Mozilla IRC. Proveu el primer exercici - no hi ha res a guanyar amb trampa!

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/introducci\303\263_al_html/qu\303\250_hi_ha_en_el_head_metadades_en_html/index.html" "b/files/ca/learn/html/introducci\303\263_al_html/qu\303\250_hi_ha_en_el_head_metadades_en_html/index.html" new file mode 100644 index 0000000000..934377c4ca --- /dev/null +++ "b/files/ca/learn/html/introducci\303\263_al_html/qu\303\250_hi_ha_en_el_head_metadades_en_html/index.html" @@ -0,0 +1,271 @@ +--- +title: Què hi ha en el head? Metadades en HTML +slug: Learn/HTML/Introducció_al_HTML/Què_hi_ha_en_el_head_Metadades_en_HTML +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Meta + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

El {{glossary("Head", "head")}} és la part d'un document HTML que no es mostra en el navegador web quan es carrega la pàgina. Conté informació com el {{htmlelement("title")}} de la pàgina, els enllaços a {{glossary("CSS")}} (si voleu aplicar estil al vostre contingut HTML amb CSS), enllaços a favicones personalitzades, i altres metadades (dades sobre l'HTML, com qui l’ha escrit, i les paraules clau importants que descriuen el document). En aquest article exposarem tot això i molt més, per a donar-vos una bona base per a treballar amb el marcatge.

+ + + + + + + + + + + + +
Requisits previs:Familiaritat amb HTML, respecte dels continguts a Inici en HTML.
Objectiu:Aprendre sobre la capçalera HTML, quin propòsit té, quins elements importants pot contenir, i quin efecte que poden tenir en el document HTML.
+ +

Què és la capçalera d'HTML?

+ +

Fem un cop d’ull a aquest document HTML senzill que ja hem vist en l’article anterior:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

La capçalera d'un document HTML és el contingut de l'element {{htmlelement("head")}}. A diferència dels continguts de l'element {{htmlelement("body")}}, que es mostren a la pàgina quan es carrega en un navegador, el contingut de la capçalera no es mostra a la pàgina. La funció de la capçalera, en canvi, és contenir {{glossary("Metadata", "metadades")}} sobre el document. En l'exemple anterior, la capçalera és més aviat curta:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

En pàgines més extenses, però, la capçalera pot arribar a estar força plena d'elements. Ves a alguns dels teus llocs web favorits i utilitza les eines del desenvolupador per revisar-ne el contingut de les capçaleres. El nostre objectiu aquí no és mostrar com utilitzar tot el que possiblement es pot posar a la capçalera, sinó ensenyar-te com fer servir els elements principals que hi inclouràs, i que t’hi familiaritzis. Comencem.

+ +

Afegir un títol

+ +

Ja hem vist l'element {{htmlelement("title")}} en acció: es pot emprar per a afegir un títol al document. Però aquest element es podria confondre amb {{htmlelement ("h1")}}, que s'utilitza per a afegir un títol d’encapçalament de nivell superior en el contingut del cos (body) del teu document. Això també es coneix de vegades com el títol de la pàgina. Però són coses diferents!

+ + + +

Aprenentatge actiu: Anàlisi d’un exemple senzill

+ +
    +
  1. Per començar aquest aprenentatge actiu, et proposem d’anar al nostre repositori de GitHub i que et descarreguis una còpia de la nostra pàgina title-example.html. Pots fer-ho de diverses maneres: + +
      +
    1. Copia i enganxa el codi de la pàgina en un arxiu de text nou de l'editor de codi, i a continuació, guarda’l en un lloc adequat.
      2. +
    2. Prem el botó «Raw» de la pàgina, selecciona File > Save Page As... del menú del teu navegador, i a continuació escull un lloc per a guardar l'arxiu.
      3. +
    +
    2. +
  2. Ara obre l'arxiu al teu navegador. Hauries de veure alguna cosa com això: +

    Una pàgina web senzilla amb el títol del document HTML en l’element <title> i el títol d’encapçalament de la pàgina <h1> en l’element <h1>.Ara, hauries de tenir clar on apareix el contingut de l’element <h1> i on apareix el contingut de <title>!

    +
    3. +
  3. També pots provar d’obrir el codi en el teu editor de codi, editar-ne els continguts, i a continuació actualitzar la pàgina en el teu navegador. Juga-hi una mica.
    4. +
+ +

El contingut de l'element <title> també s'utilitza per a altres coses. Per exemple, quan poses a la pàgina un marcador de pàgina (Bookmarks > Bookmark This Page, en Firefox), observa que el nom que se suggereix com a nom del marcador és el contingut de l’element <title>.

+ +

Una pàgina web amb un marcador de pagina en Firefox; el nom del marcadode pàgina s’omple automàticament amb el contingut de l’element <title>

+ +

El contingut de <title> també s'utilitza en els resultats de cerca, com es veu a continuació.

+ +

Metadades: l'element <meta>

+ +

Les metadades són dades que descriuen dades i HTML té una manera «oficial» d'afegir metadades a un document: l'element {{htmlelement("meta")}}. Per descomptat, que altres coses sobre les quals parlem en aquest article també podrien considerar-se metadades. Hi ha una gran quantitat de tipus d'elements <meta> diferents que es poden incloure en la capçalera (<head>) de la teva pàgina, però no provarem d'explicar-los tots en aquesta etapa, ja que podria acabaria sent massa confús. En lloc d’això, explicarem algunes coses amb què et pots trobar habitualment, només per a donar-te’n una idea.

+ +

Especificar la codificació de caràcters del document

+ +

En l'exemple que hem vist més amunt, s’hi ha inclòs aquesta línia:

+ +
<meta charset="utf-8">
+ +

Aquest element simplement especifica la codificació de caràcters del document: el conjunt de caràcters que el document pot utilitzar. UTF-8 és un conjunt de caràcters universal que inclou gairebé qualsevol caràcter de qualsevol idioma humà. Això vol dir que la vostra pàgina web serà capaç de gestionar la visualització de qualsevol idioma. Per tant, és una bona idea establir això a cada pàgina web que creïs! Per exemple, la pàgina podria gestionar anglès i japonès sense problema:

+ +

Una pàgina web que conté caràcters en anglès i en japonès, amb el conjunt universal de codificació de caràcters, o utf-8. Tots dos idiomes es veuen igual de bé,En canvi, si configures la teva codificació de caràcters segons ISO-8859-1, per exemple (el conjunt de caràcters de l'alfabet llatí), la representació de la teva pàgina s’esgavellaria del tot:

+ +

Una pàgina web que conté caràcters en anglès i en japonès, amb el conjunt de caràcters per a l’alfabet llatí. Els caràcters japonesos no es veuen correctament.

+ +

Aprenentatge actiu: Experimentar amb la codificació de caràcters

+ +

Per provar això, torneu a la plantilla HTML que heu obtingut en l'apartat anterior amb el <title> (la pàgina title-example.html), canvieu el valor charset de meta per la norma ISO-8859-1, i afegiu el japonès a la vostra pàgina. Aquest és el codi que fem servir:

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Afegir un autor i una descripció

+ +

Molts elements <meta> inclouen els atributs name i content:

+ + + +

Aquests dos elements meta són útils d’incloure a la teva pàgina perquè defineixen l'autor de la pàgina i proporcionen una descripció concisa de la pàgina. Vegem-ne un exemple:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications.">
+ +

Especificar l’autor de la pàgina és bo en molts sentits: és útil per a esbrinar qui ha escrit la pàgina, per si us hi voleu posar en contacte i fer-li preguntes sobre el contingut. Alguns sistemes de gestió de continguts disposen de funcions que extreuen automàticament la informació de l'autor de la pàgina i la poden a disposició amb aquesta finalitat.

+ +

Especificar una descripció que inclou paraules clau relacionades amb el contingut de la pàgina és útil perquè té el potencial de fer que la pàgina aparegui més amunt en les cerques rellevants que els motors de cerca executen (aquestes activitats es denominen Search Engine Optimization, o {{glossary("SEO")}}.)

+ +

Aprenentatge actiu: La utilitat de la descripció per als motors de cerca

+ +

Les pàgines de resultats dels motors de cerca també fan servir aquestes descripcions. Vegem-ho amb un exemple.

+ +
    +
  1. Ves a la pàgina d’inici de The Mozilla Developer Network.
    2. +
  2. Ves al codi font de la pàgina (botó dret/Ctrl + clic sobre la pàgina, selecciona l’opció Veure l’origen de la pàgina del menú contextual).
    3. +
  3. Busca la descripció en l'etiqueta meta. S'assembla a això: + 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    +
    4. +
  4. Ara busca «Mozilla Developer Network» amb el teu motor de cerca favorit (nosaltres hem fet servir Yahoo). Observa, a partir del contingut dels elements <meta> i <title> utilitzats en el resultat de la cerca que, definitivament, paga la pena tenir aquests elements de descripció! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Nota: A Google veuràs que a continuació de l'enllaç principal de la pàgina d'inici s'enumeren algunes pàgines secundàries rellevants del projecte MDN; són els anomenats enllaços de llocs web, i es configuren en les Google's webmaster tools; és una manera de millorar els resultats de cerca del teu lloc web en el motor de cerca de Google.

+
+ +
+

Nota: Moltes característiques de <meta> senzillament ja no s'utilitzen. Per exemple, l'element <meta> de paraules clau (<meta name="keywords" content="posa, les, teves, paraules, clau">) , que se suposa que proporciona als motors de cerca paraules clau per a determinar la rellevància d’aquella pàgina respecte dels termes de cerca, els motors de cerca l’ignoren perquè els spammers omplien la llista de paraules clau amb centenars de paraules clau que esbiaixaven els resultats.

+
+ +

Altres tipus de metadades

+ +

Trobareu altres tipus de metadades a mesura que volteu per la web. Una gran quantitat de les funcions que apareixen en els llocs web són creacions propietàries, dissenyades per a proporcionar a certs llocs web (com els llocs web de les xarxes socials) parts específiques d'informació que poden utilitzar.

+ +

Per exemple, Open Graph Data és un protocol de metadades que Facebook va inventar per proporcionar als llocs web metadades enriquides. En el codi font de MDN Web Docs trobaràs això:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Un efecte d'això és que quan a Facebook es fa un enllaç a MDN Web Docs, l'enllaç apareix amb una imatge i una descripció: una experiència més rica per als usuaris.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.

+ +

Twitter també té metadades propietàries pròpies, les Twitter Cards, que tenen un efecte similar quan a twitter.com es mostra l’URL del lloc web. Per exemple:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Afegir icones personalitzades al teu lloc web

+ +

Per enriquir encara més el disseny del teu lloc web, en les metadades pots afegir referències a icones personalitzades, que es mostraran en certs contextos.

+ +

La humil icona de web (favicon), que existeix de fa molts, molts anys, va ser la primera icona d'aquest tipus, una icona de 16 x 16 píxels utilitzada en múltiples llocs.

+ +

Pots afegir una icona de web a la teva pàgina així:

+ +
    +
  1. La deses en el mateix directori que la pàgina índex del lloc web, en format .ico (la majoria dels navegadors admetem les icones de web en els formats més comuns, com .gif o .png, però si utilitzes el format ICO t’assegures que funciona en navegadors antics com Internet Explorer 6).
    2. +
  2. Afegeixes al bloc de codi <head> de l’HTML la línia següent per a fer-hi referència: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Els navegadors moderns utilitzen les icones de web en diversos llocs, com en la pestanya de la pàgina activa, i en el panell de marcadors, quan hi ha un marcador de pàgina:

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Avui dia hi ha un munt d'altres tipus d'icones que també pots tenir en compte. Per exemple, en el codi font de la pàgina MDN trobaràs això:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

Els comentaris expliquen per a què s'utilitza cada icona; aquests elements cobreixen coses com ara proporcionar una agradable icona en alta resolució quan deses el lloc web a la pantalla principal d'un iPad.

+ +

No et preocupis gaire pel que fa a l'aplicació de tots aquests tipus d'icona en aquest moment; aquesta característica és bastant avançada i no s'espera que en tingueu un coneixement per a poder progressar en el curs. L'objectiu principal aquí és fer-te saber què són aquests tipus de coses, per si te les trobes quan navegues pel codi font d'altres llocs web.

+ +

Aplicar CSS i JavaScript a HTML

+ +

Gairebé tots els llocs web que utilitzes actualment fan servir {{glossary("CSS")}} perquè presentin un bon aspecte, i {{glossary("JavaScript")}} per a potenciar-hi les funcions interactives, com ara reproductors de vídeo, mapes, jocs, i molt més. Aquests s'apliquen amb més freqüència a una pàgina web amb l'ús dels elements {{htmlelement("link")}} i {{htmlelement("script")}}, respectivament.

+ + + +

Aprenentatge actiu: Aplicar CSS i JavaScript a una pàgina

+ +
    +
  1. Per iniciar aquest aprenentatge actiu, pren una còpia dels arxius meta-example.html, script.js i style.css, i desa’ls tots tres en el mateix directori del teu ordinador. Assegura’t que es desen amb els noms i les extensions d'arxiu correctes.
    2. +
  2. Obre el fitxer HTML en el teu navegador i en l’editor de text.
    3. +
  3. Seguint la informació que et proporcionem aquí, afegeix els elements {{htmlelement("link")}} i {{htmlelement("script")}} al teu HTML perquè els teus CSS i JavaScript s'apliquin a l’HTML.
    4. +
+ +

Si ho fas correctament, quan deses el codi HTML i actualitzes el navegador observaràs que les coses han canviat:

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Nota: Si t’encalles amb aquest exercici i no se t’hi apliquen el CSS/JS, revisa la nostra pàgina d'exemple css-and-js.html.

+
+ +

Establir l'idioma principal del document

+ +

Per acabar, paga la pena esmentar que es pot establir (i realment s'hauria d'establir) l'idioma de la teva pàgina. Això es pot fer afegint l'atribut lang en l'etiqueta d'obertura HTML (com es veu en el meta-example.html).

+ +
<html lang="en-US">
+ +

Això és útil en molts sentits. Els motors de cerca indexen més eficaçment el document si s'hi estableix el llenguatge (permeten que aparegui correctament en els resultats específics de l'idioma, per exemple), i és útil per a les persones amb discapacitat visual que utilitzen lectors de pantalla (per exemple, la paraula «six» hi és tant en francès com en anglès, però es pronuncia diferent).

+ +

També post fer que diverses subseccions del teu document reconeguin idiomes diferents. Per exemple, podem establir que es reconegui una secció de japonès per a la part del nostre document que està escrita en japonès, així:

+ +
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Aquests codis els defineix la norma ISO 639-1. Pots trobar més informació sobre aquests codis en les Language tags in HTML and XML.

+ +

Resum

+ +

Arribem al final del nostre recorregut per la capçalera d’un document HTML; s’hi poden fer moltes més coses, però un recorregut exhaustiu seria avorrit i en aquesta etapa podria embolicar, i per ara només volem donar-te una idea de les coses més comunes que s’hi poden trobar! En l’article següent veurem els elements bàsics d’un text HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/afegir_gr\303\240fics_vectorials_a_la_web/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/afegir_gr\303\240fics_vectorials_a_la_web/index.html" new file mode 100644 index 0000000000..feaf09c048 --- /dev/null +++ "b/files/ca/learn/html/multim\303\250dia_i_incrustar/afegir_gr\303\240fics_vectorials_a_la_web/index.html" @@ -0,0 +1,287 @@ +--- +title: Afegir gràfics vectorials a la Web +slug: Learn/HTML/Multimèdia_i_incrustar/Afegir_gràfics_vectorials_a_la_Web +tags: + - Beginner + - Graphics + - Guide + - HTML + - Images + - Learn + - Raster + - SVG + - Vector + - iframe + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Els gràfics vectorials són molt útils en moltes circumstàncies - tenen una grandària d'arxiu reduït i són altament escalables, de manera que no pixelen en acostar-ho o ampliar-se a una grandària gran. En aquest article et mostrarem com incloure un en la vostra pàgina web.

+
+ + + + + + + + + + + + +
Requisits previs:Conèixer els conceptes bàsics d'HTML i com inserir una imatge en el document.
Objectiu:Aprendre com incrustar una imatge SVG (vector) en una pàgina web.
+ +
+

Nota: Aquest article no té la intenció d'ensenyar SVG; just el que és, i com afegir-lo a pàgines web.

+
+ +

Què són els gràfics vectorials?

+ +

A la web, treballarem amb dos tipus d'imatges - imatges de trama (raster) i imatges vectorials:

+ + + +

Per donar-vos una idea de la diferència entre els dos, veurem un exemple. Podeu trobar aquest exemple en el nostre repositori Github com a vector-versus-raster.html - mostra dues imatges costat a costat aparentment idèntiques, una estrella vermella amb una ombra negre. La diferència és que el de l'esquerra és un PNG, i la dreta és una imatge SVG.

+ +

Two star images, one raster and one vector. At their default size they look identical

+ +

La diferència es fa evident quan s'amplia la pàgina: la imatge PNG es pixela a mesura que s'amplia, ja que conté informació sobre on ha d'estar cada píxel (i quin color); quan s'amplia, cada píxel augmenta de grandària per emplenar múltiples píxels en la pantalla, per la qual cosa la imatge comença a veure's bloquejada.La imatge vectorial, no obstant això, segueix lluint agradable i nítida, ja que no importa la grandària que sigui, els algorismes s'utilitzen per elaborar les formes en la imatge, amb els valors simplement s'escalen a mesura que es fa més gran

+ +

Two star images zoomed in. The raster one on the left starts to look pixellated, whereas the vector one still looks crisp.

+ +

D'altra banda, els arxius d'imatge vectorial són molt més lleugers que els seus equivalents trama, ja que només necessiten tenir un grapat d'algorismes, en lloc d'informació sobre cada píxel de la imatge individualment.

+ +

Què és SVG?

+ +

SVG és un llenguatge basat en {{glossary("XML")}} per descriure imatges vectorials. Es bàsicament de marcat, com HTML, excepte que té molts elements diferents per a la definició de les formes que volem que apareguin a la imatge, i els efectes que volem aplicar a aquestes formes. SVG és per marcar els gràfics, no el contingut. Al final de l'espectre més simple, tenim elements per a la creació de formes simples, com {{svgelement("circle")}} i {{svgelement("rect")}}. Més característiques avançades de SVG inclouen {{svgelement("feColorMatrix")}} (transforma colors utilitzant una matriu de transformació,) {{svgelement("animate")}} (animar parts d'un gràfic vectorial,) i {{svgelement("mask")}} (aplicar una màscara sobre la part superior de la imatge.)

+ +

Com a simple exemple, el codi següent crea un cercle i un rectang

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+ +

Això crea el següent resultat:

+ +

{{ EmbedLiveSample('What_is_SVG', 300, 200) }}

+ +

L'exemple anterior, donava la impressió que SVG és fàcil de codifca manualment. Sí, es pot codifca manualment un simple SVG en un editor de text, però per una imatge complexa comença ràpidament a ser molt difícil. Per a la creació d'imatges SVG, la majoria de la gent utilitza un editor de gràfics vectorials com Inkscape o Illustrator. Aquests paquets permeten crear una varietat d'il·lustracions utilitzant diverses eines de gràfics, i crear aproximacions de fotos (per exemple, funció Traçar mapa de bits de l'Inkscape).

+ +

SVG té algunes avantatges addicionals a més de les descrites fins al moment:

+ + + +

Llavors, per què algú vol utilitzar gràfics de trama sobre SVG? Bé, SVG té alguns desavantatges:

+ + + +

Els gràfics de trama són sens dubte millor per a les imatges de precisió complexes, com ara fotos, per les raons descrites anteriorment.

+ +
+

Nota: En Inkscape, guardar els arxius com Plain SVG per estalviar espai. També, si us plau referiu-vos a aquest article que descriu com preparar SVGs per a la Web.

+
+ +

Afegir SVG a les vostres pàgines

+ +

En aquesta secció veurem les diferents formes en què es poden afegir gràfics vectorials SVG a les vostres pàgines web.

+ +

La forma més ràpida : {{htmlelement("img")}}

+ +

Per incrustar un SVG mitjançant un element {{htmlelement("img")}}, només s'ha de fer referència a ell en l'atribut src, com es podria esperar. Necessitarem un atribut height o width (o tots dos si el SVG no té cap relació d'aspecte inherent). Si no ho heu fet ja, si us plau llegiu les imatges en HTML.

+ +
<img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87px"
+    width="100px" />
+ +

Pros

+ + + +

Contres

+ + + +

Solució de problemes i compatibilitat entre navegadors

+ +

Per donar suport als navegadors SVG que no suporten SVG (IE 8 i per sota, Android 2.3 i per sota), es pot fer referència a un PNG o JPG des de l'atribut src i utilitzar un atribut {{htmlattrxref("srcset", "img")}} (que només reconeixen els navegadors recents) per fer referència al SVG. Sent aquest el cas, només els navegadors compatibles carregaran el SVG - els navegadors més antics carregaran el PNG en lloc d'un altre:

+ +
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+ +

També es pot utilitzar el SVGs com imatges de fons de CSS, com es mostra a continuació. En el codi següent, els navegadors antics es pegaran amb el PNG que entenen, mentre que els nous navegadors carregaran el SVG:

+ +
background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+ +

Igual que el mètode <img> descrit anteriorment, la inserció d'SVGs utilitzant imatges de fons CSS vol dir que el SVG no pot ser manipulat amb JavaScript, i també està subjecta a les mateixes limitacions de CSS.

+ +

Si els SVGs no es mostren en absolut, pot ser que el servidor no estigui configurat correctament. Si aquest és el problema, aquest article us orientarà en la direcció correcta.

+ +

Com incloure el codi SVG dins del vostre HTML

+ +

També es pot obrir el fitxer SVG en un editor de text, copiar el codi SVG, i enganxar-lo en el vostre document HTML - això de vegades es diu posar en  línia SVG, o inlining SVG. Assegureu-vos que el fragment de codi SVG comença i acaba amb les etiquetes <svg></svg> (no incloure res fora d'aquestes). Aquí hi ha un exemple molt simple del que es pot enganxar en el vostre document:

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

Pros

+ + + +

Contres

+ + + + + +

Com incrustar un SVG amb un {{htmlelement("iframe")}}

+ +

Es poden obrir imatges SVG en el navegador de la mateixa manera que les pàgines web. Així que la incrustació d'un document SVG amb un <iframe> es fa de la mateixa manera que l'estudiat en Des de <object> a <iframe> - altres tecnologies d'incrustació.

+ +

Aquí teniu una ullada ràpida:

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Triangle with three unequal sides" />
+</iframe>
+ +

Això en definitiva no és el millor mètode per triar:

+ +

Contres

+ + + +

Aprenentatge actiu: Jugar amb SVG

+ +

En aquesta secció d'aprenentatge actiu ens agradaria que simplement juguéssiu amb una mica de SVG per diversió. A la secció d'entrada de sota veureu que us hem proporcionat algunes mostres perquè pugueu començar. També podeu anar a SVG Element Reference, per conèixer més detalls sobre altres joguines que es poden utilitzar en SVG, i provar-les també. Aquesta secció és, sobre tot, la pràctica de les vostres habilitats d'investigació, i que té una mica de diversió.

+ +

Si us quedeu encallats i no podeu aconseguir que funcioni el vostre codi, sempre el podeu restablir amb el botó Reset.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 600) }}

+ +

Sumari

+ +

En aquest article se us ha proporcionat un viatge ràpid del que són gràfics vectorials i SVG, perquè són útils conèixer-los, i com s'inclouen els SVG dins de les pàgines web. Mai hem tingut la intenció de que fos una guia completa per a l'aprenentatge SVG, només un punter perquè conegueu que és SVG, per si us els trobeu en el vostres viatjes al voltant de la web. Així que no us preocupeu si no us sentiu, encara, com uns experts en SVG. Hem inclòs alguns enllaços, més a baix, que us podria ajudar-vos si voleu anar i esbrinar més sobre com funciona.

+ +

En l'últim article d'aquest mòdul explorarem les imatges sensibles en detall, mirant les eines que té HTML, que us permetin fer que les vostres imatges funcionin millor a través de diferents dispositius.

+ +

Veure

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/contingut_de_v\303\255deo_i_\303\240udio/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/contingut_de_v\303\255deo_i_\303\240udio/index.html" new file mode 100644 index 0000000000..5a8855df2b --- /dev/null +++ "b/files/ca/learn/html/multim\303\250dia_i_incrustar/contingut_de_v\303\255deo_i_\303\240udio/index.html" @@ -0,0 +1,294 @@ +--- +title: Contingut de vídeo i àudio +slug: Learn/HTML/Multimèdia_i_incrustar/Contingut_de_vídeo_i_àudio +tags: + - Article + - Audio + - Beginner + - Guide + - HTML + - Video + - captions + - subtitles + - track +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Ara que estem a gust afegint imatges senzilles a una pàgina web, el següent pas és començar a afegir els reproductors de vídeo i àudio als documents HTML! En aquest article veurem com es fa exactament això amb els elements {{htmlelement("video")}} i {{htmlelement("audio")}}; després acabarem mirant com afegir títols/subtítols als vídeos

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, instal.lació programari bàsic, coneixements bàsics de treballar amb arxius, familiaritzar-se amb els fonaments HTML (com s'explica en Inici en HTML) i Imatges en HTML.
Objectiu:Aprendre com incrustar vídeo i àudio en una pàgina web, i afegir títols/subtítols a un vídeo.
+ +

Àudio i vídeo a la web

+ +

Els desenvolupadors web han volgut utilitzar vídeo i àudio a la web des de fa molt de temps, des de la dècada del 2000, quan vam començar a tenir un ample de banda prou ràpid com per suportar qualsevol tipus de vídeo (els arxius de vídeo són molt més grans que els de text o fins i tot les imatges). En els primers dies, les tecnologies web natives com HTML no tenien la capacitat d'integrar vídeo i àudio a la web, per la qual cosa les tecnologies propietàries (basades en el plug-in) com Flash (i més tard, Silverlight) es van fer populars per al maneig d'aquests continguts. Aquest tipus de tecnologia funcionan bé, però tenen una sèrie de problemes, incloent, que no funcionan bé amb les característiques HTML/CSS, problemes de seguretat i problemes d'accessibilitat.

+ +

Una solució nativa resoldria gran part d'això si es feia bé. Afortunadament, uns anys més tard, l'especificació {{glossary("HTML5")}} havia afegit aquestes característiques, amb els elements {{htmlelement("video")}} i {{htmlelement("audio")}}, i alguns nous i brillants {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per controlar-los. No estarem veient JavaScript aquí - només els fonaments bàsics que es poden aconseguir amb HTML.

+ +

No estem per ensenyar com produir arxius d'àudio i vídeo - aixó requereix un conjunt d'habilitats completament diferents. Us hem proporcionat unes mostres d'arxiu d'àudio i vídeo i codi d'exemple perquè pugueu experimentar, en cas que no pugueu aconseguir-ho vosaltres mateixos.

+ +
+

Nota: Abans de començar aquí, també s'ha de saber que hi ha un bon nombre {{glossary("OVP","OVPs")}} (proveïdors de vídeo en línia) com YouTube, Dailymotion i Vimeo, i proveïdors d'àudio en línia com Soundcloud. Aquestes empreses ofereixen una forma còmoda i fàcil d'allotjar i consumir videos, pel que no ha de preocupar l'enorme consum d'ample de banda. OVP, fins i tot, en general, ofereix codi ja preparat per incrustar vídeo/àudio a les seves pàgines web. Si anem per aquest camí, es pot evitar algunes de les dificultats que es discuteixen en aquest article. Estarem discutint aquest tipus de servei, una mica més, en el proper article.

+
+ +

L'element <video>

+ +

L'element {{htmlelement("video")}} permet incrustar un vídeo molt fàcilment. Un exemple realment senzill és el següent:

+ +
<video src="rabbit320.webm" controls>
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
+</video>
+ +

Les característiques de la nota són:

+ +
+
{{htmlattrxref("src","video")}}
+
De la mateixa manera que l'element {{htmlelement("img")}}, l'atribut src conté una ruta d'accés al vídeo que es vol incrustar. Funciona exactament de la mateixa manera.
+
{{htmlattrxref("controls","video")}}
+
Els usuaris han de poder controlar la reproducció de vídeo i d'àudio (és especialment important per a les víctimes de l'epilepsia.) S'ha d'utilitzar l'atribut controls per incloure la pròpia interfície de control del navegador, o construir la interfície amb l'API JavaScript apropiat. Com a mínim, la interfície ha d'incloure una manera d'iniciar i aturar els medis i ajustar el volum.
+
El paràgraf dins de les etiquetes <video>
+
+

Això es coneix com a contingut alternatiu - aquest és mostrat si el navegador per accedir a la pàgina no és compatible amb l'element <video>, ens permet oferir una alternativa per a navegadors antics. Això pot ser qualsevol cosa; en aquest cas, hem proporcionat un enllaç directe a l'arxiu de vídeo, de manera que l'usuari pogui, almenys, tenir accés a ell, d'alguna manera, independentment de quin navegador estan fent servir.

+
+
+ +

El vídeo incrustat es veurà semblant a això:

+ +

A simple video player showing a video of a small white rabbit

+ +

Podeu provar l'exemple viu aquí ( vegeu també el codi font.)

+ +

Suport de múltiples formats

+ +

Hi ha un problema amb l'exemple anterior, el qual us haureu adonat al intentar accedir a l'enllaç directe, anteriorment, amb un navegador com Safari o Internet Explorer. El vídeo no es reprodueix! Això és perquè diferents navegadors suporten diferents formats de vídeo (i àudio).

+ +

Anem a través de la terminologia ràpidament. Formats com MP3, MP4 i WebM es diuen formats contenidors. Contenen diferents parts en què es compon la cançó o vídeo - com una pista d'àudio, una pista de vídeo (en el cas del vídeo), i les metadades per descriure els medis en que són presentats.

+ +

Les pistes d'àudio i vídeo estan també en diferents formats, per exemple:

+ + + +

Un reproductor d'àudio tendeix a reproduir una pista d'àudio directament, per exemple, un arxiu MP3 o Ogg. Aquests no necessiten contenidors.

+ +
+

Nota: No és tan senzill, com es pot veure a la nostra taula de compatibilitat de còdec d'àudio i de vídeo. A més, molts navegadors de plataformes mòbils poden reproduir un format no suportat lliurant-ho al reproductor multimèdia del sistema subjacent per reproduir-ho. Però això ho farà ara com ara.

+
+ +

Els formats anteriors existeixen per comprimir video i àudio en arxius manejables (el video i l'àudio en brut són molt grans). Els navegadors contenen diferents {{Glossary("Codec","Codecs")}}, com Vorbis o H.264, que s'utilitzen per convertir el so comprimit i el vídeo en dígits binaris i a l'inrevés. Com hem indicar anteriorment, els navegadors per desgràcia no tots suporten als mateixos còdecs, pel que s'haurà de proporcionar diversos arxius per a cada producció de medis. Si falta el còdec adequat per descodificar el medi, simplement no es reproduirà.

+ +
+

Nota: És possible que ens pregunten per què existeix aquesta situació. MP3 (per a àudio) i MP4/H.264 (per a vídeo) són àmpliament recolzats, i de bona qualitat. No obstant això, també són gravats per patents - patents nord-americanes que cobreixen MP3 fins almenys 2017, i H.264 fins 2027 com molt aviat, el que significa que els navegadors que no tenen la patent han de pagar grans summes de diners per recolzar aquests formats. A més, moltes persones eviten el programari restringit en principi, a favor dels formats oberts. Aquesta és la raó per la qual hem de proporcionar múltiples formats per a diferents navegadors.

+
+ +

Llavors, com fem això? Fer una ullada a el següent exemple actualitzat (prova-ho qui viu aquí, també):

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+ +

Aquí hem pres l'atribut src fora de l'etiqueta <video> actual, i en el seu lloc hem inclòs elements {{htmlelement("source")}}, per separat, que apunten a les seves pròpies fonts. En aquest cas, el navegador va a través dels elements <source> i reprodueix el primer còdec que té que donar suport. Incloent les fonts de WebM i MP4 hauria de ser suficient per reproduir els vídeos a la majoria de plataformes i navegadors actuals.

+ +

Cada element <source> també té un atribut type. Aquest és opcional, però s'aconsella que s'inclogui - conté el {{glossary("MIME type","MIME types")}} dels arxius de vídeo i els navegadors poden llegir aquests i saltar immediatament els vídeos que no entenen. Si no està inclòs, els navegadors carregan i tractan de reproduir cada arxiu fins a trobar un que funcioni, prenent encara més temps i recursos.

+ +
+

Nota: El nostre article sobre els formats dels medis compatibles conté alguna cosa en comú {{glossary("MIME type","MIME types")}}.

+
+ +

Altres característiques de <video>

+ +

Hi ha una sèrie d'altres característiques que es poden incloure en un vídeo HTML5. Fer una ullada al nostre tercer exemple, a continuació:

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+
+ +

Això ens donarà una sortida semblant alguna cosa com això:

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah! Les noves característiques són:

+ +
+
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
+
Es pot controlar la mida del vídeo, ja sigui amb aquests atributs o amb {{Glossary("CSS")}}. En ambdós casos, els vídeos mantenen la seva relació amplada-alçada nativa - coneguda com la relació d'aspecte. Si la relació d'aspecte no es manté per les mides que s'hagin definit, el vídeo creixerà per omplir l'espai horitzontal, i l'espai sense omplir acabarà tinguen un color de fons sòlid per defecte.
+
{{htmlattrxref("autoplay","video")}}
+
Aquest atribut fa que l'inici d'àudio o vídeo es reprodueixi immediatament, mentre que la resta de la pàgina s'està carregant. Es recomana no utilitzar el vídeo en reproducció automàtica (o àudio) en els vostres llocs, ja que els usuaris poden trobar que és realment molest.
+
{{htmlattrxref("loop","video")}}
+
Aquest atribut fa que el vídeo (o àudio) comenci reproduir-se, de nou, cada vegada que acabi. Això també pot ser molest, de manera que només s'utilitzi quan sigui realment necessari.
+
{{htmlattrxref("muted","video")}}
+
Aquest atribut fa que el medi es reprodueixi amb el so desactivat per defecte.
+
{{htmlattrxref("poster","video")}}
+
Aquest atribut pren com a valor l'adreça URL d'una imatge, que es podrà veure abans de reproduir-se el vídeo. Està destinat a ser utilitzat per a una pantalla de presentació o de publicitat.
+
{{htmlattrxref("preload","video")}}
+
+

Aquest atribut s'utilitza en l'element per emmagatzemar en búfer arxius grans. Pot prendre un dels 3 valors:

+ +
    +
  • "none" no emmagatzema l'arxiu en búfer
    • +
  • "auto" emmagatzema l'arxiu multimèdia en búfer
    • +
  • "metadata" només emmagatzema en búfer les metadades de l'arxiu
    • +
+
+
+ +

Es pot trobar l'exemple anterior disponible per reproduir en viu en Github (també veureu el codi font.) Recordeu que no hem inclòs l'atribut de reproducció automàtica en la versió en viu - si el vídeo comença a reproduir-se tan aviat com es carrega la pàgina, no es veurà el cartell!

+ +

L'element <audio>

+ +

L'element {{htmlelement("audio")}} funciona exactament de la mateixa manera que l'element {{htmlelement("video")}}, amb algunes petites diferències com s'indica a continuació. Un exemple típic podria ser així:

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+ +

Això produeix alguna cosa, com el següent, en un navegador:

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Nota: Es pot executar la demostració d'àudio en viu en Github (també veure el codi font reproductor d'àudio.)

+
+ +

Aquest ocupa menys espai que un reproductor de vídeo, ja que no hi ha component visual - només ha de mostrar els controls per reproduir l'àudio. Altres diferències amb el vídeo HTML5 són els següents:

+ + + +

A part d'això, <audio> suporta les mateixes característiques que <video> - reviseu les seccions anteriors per obtenir més informació sobre ells.

+ +

Visualitzar pistes de text de vídeo

+ +

Ara parlarem d'un concepte una mica més avançat que és molt útil conèixer. Moltes persones no poden o no volen escoltar el contingut d'àudio/vídeo que troben a la web, almenys en determinats moments. Per exemple:

+ + + +

No seria agradable proporcionar a aquestes persones amb una transcripció de les paraules que es parla en l'àudio/vídeo? Bé, gràcies a vídeo HTML5, es pot amb el format WebVTT i l'element {{htmlelement("track")}}.

+ +
+

Nota: "transcriure" i "transcripció" vol dir escriure les paraules parlades com a text.

+
+ +

WebVTT és un format per escriure arxius de text que contenen diverses cadenes de text juntament amb metadades, així com a quina hora volem que en el video, es mostri cada cadena de text i fins i tot informació limitada d'estil/posicionament. Aquestes cadenes de text s'anomenen senyals, i també poden mostrar diferents tipus per a diferents propòsits, sent els més comuns:

+ +
+
subtitles
+
Traduccions de material estranger, per a persones que no entenen les paraules pronunciades en l'àudio.
+
captions
+
Transcripcions sincronitzades de diàleg o descripcions de sons significatius, permeten a les persones que no poden sentir l'àudio entendre el que està passant.
+
timed descriptions
+
Text per a la conversió a àudio, serveix a les persones amb discapacitat visual.
+
+ +

Un arxiu típic WebVTT es veurà així:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+
+ +

Perquè es visualitzi juntament amb la reproducció de medis HTML, cal:

+ +
    +
  1. Guardar-ho com un arxiu .vtt en un lloc sensible.
    2. +
  2. Enllaçar al arxiu .vtt amb l'element {{htmlelement("track")}}. <track> ha de ser col·locat dins <audio> o <video>, però després de tots els <source>. Utilitzar l'atribut {{htmlattrxref("kind","track")}} per especificar si els senyals són subtitles, captions o descriptions. A més, utilitzar {{htmlattrxref("srclang","track")}} per indicar al navegador l'idioma en què s'han escrit els subtítols.
    3. +
+ +

Heus aquí un exemple:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

Això resultarà un vídeo que mostrarà subtítols, agradable com aixó:

+ +

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

Per a més detalls, si us plau llegiu Afegir llegendes i subtitols a video HTML5. Es pot trobar l'exemple que acompanya aquest article a Github, escrit per Ian Devlin (veureu també el codi font .) En aquest exemple s'utilitza una mica de JavaScript per permetre als usuaris triar entre diferents subtítols. Recordeu que per activar els subtítols, cal prémer el botó "CC" i seleccionar una opció - English, Deutch o Español.

+ +
+

Nota: Les pistes de text també ajudan amb {{glossary("SEO")}}, ja que els motors de cerca prosperen especialment en el text. Les pistes de text, fins i tot, permeten que els motors de cerca enllacin directament a un lloc parcial a través del vídeo.

+
+ +

Aprenentatge actiu: Incrustar el nostre àudio i vídeo

+ +

Per a aquest aprenentatge actiu, ens agradaria (idealment) que sortíssiu al món i registréssiu alguns vídeos i àudio - la majoria dels telèfons, avui dia, permeten gravar àudio i vídeo molt fàcilment, i sempre es pot transferir al ordinador, ho podeu fer servir. Podria ser necessari fer una mica de conversió acabant amb un WebM i MP4 en el cas de vídeo, i un MP3 i Ogg en el cas de l'àudio, però hi ha suficients programes que permeten fer això sense masses problemes, com Miro Video Converter i Audacity. Ens agradaria que ho provéssiu!

+ +

Si no podeu tenir qualsevol font de vídeo o d'àudio, llavors sou lliures d'utilitzar els nostres arxius d'àudio i vídeo d'exemple per dur a terme aquest exercici. També es pot utilitzar el nostre codi d'exemple com a referència.

+ +

Ens agradaria que:

+ +
    +
  1. Guardar els arxius d'àudio i vídeo en un nou directori a l'equip.
    2. +
  2. Crear un nou arxiu HTML en el mateix directori, anomenat index.html.
    3. +
  3. Afegir els elements <audio> i <video> a la pàgina; fer que es mostrin els controls del navegador per defecte.
    4. +
  4. Proporcionar, a tots dos, elements <source> perquè els navegadors trobin el format d'àudio que millor suportin i carregar-lo. Aquests han d'incloure els atributs type.
    5. +
  5. Donar a l'element <vídeo> un cartell que es mostrarà abans que el vídeo comenci a ser reproduït. Divertir-vos creant el vostre cartell gràfic.
    6. +
+ +

Per a un bo addicional, es podria intentar investigar les pistes de text, i trobar la manera d'afegir una mica de subtítols al vídeo.

+ +

Sumari

+ +

I això és un embolcall; esperem que us hagi divertit jugar amb vídeo i àudio en les pàgines web! En el proper article, veurem altres formes d'inserir continguts a la web, utilitzant tecnologies com {{htmlelement("iframe")}} i {{htmlelement("object")}}.

+ +

Veure

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +
+
+ + diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustaci\303\263/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustaci\303\263/index.html" new file mode 100644 index 0000000000..0a69bc1d47 --- /dev/null +++ "b/files/ca/learn/html/multim\303\250dia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustaci\303\263/index.html" @@ -0,0 +1,318 @@ +--- +title: De objecte a iframe - altres tecnologies d'incrustació +slug: >- + Learn/HTML/Multimèdia_i_incrustar/De_objecte_a_iframe_altres_tecnologies_incrustació +tags: + - Article + - Beginner + - CodingScripting + - Embedding + - Flash + - Guide + - HTML + - Learn + - Multimedia and embedding + - Object + - embed + - iframe +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Per ara, realment, s'aconseguit penjar coses incrustades en les pàgines web, incloent imatges, àudio i vídeo. En aquest punt ens agradaria fer un petit pas a banda, mirant a alguns elements que ens permetin introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} i {{htmlelement("object")}}. Els <iframe>s són per incrustar altres pàgines web, i els altres dos, permeten incrustar arxius PDF, SVG, i fins i tot, flash - una tecnologia que està en camí de desaparèixer, però que encara es veu semi-regular.

+ + + + + + + + + + + + +
Requisits Previs:Coneixements bàsics d'informàtica, programari bàsic instal.lat, coneixement bàsic de tractar amb arxius, familiaritat-se amb els fonaments d'HTML (com s'explica en Inici amb HTML) i els articles anteriors d'aquest mòdul.
Objectiu:Aprendre com inserir elements en pàgines web fent servir {{htmlelement("object")}}, {{htmlelement("embed")}} i {{htmlelement("iframe")}}, com pel·lícules Flash i altres pàgines web.
+ +

Una breu història de la incrustació

+ +

Fa molt de temps, a la web, era popular l'ús de marcs (frames) per crear llocs web - petites parts d'un lloc web que s'emmagatzemaven en pàgines HTML individuals. Aquests eran inserits en un document mestre anomenat conjunt de marcs (frameset), el que permetia especificar l'àrea de la pantalla de cada marc ple, com una manera de dimensionar columnes i files d'una taula. Aquests van ser considerats un súmmum de frescor a mitjans i finals dels 90, però no hi havia proves, que tenir la pàgina web dividida en trossos més petits com aquest era millor per la velocitat de descàrrega - sent especialment notable que les connexions de xarxa era tan lentes en aquell temps. Però, van tenir molts problemes, que sobrepassaven els aspectes positius com la velocitat de la xarxa, ara més ràpida, pel que ja no es veu la seva utilització.

+ +

Una mica més tard (finals dels 90, principis de 2000), les tecnologies de plug-in es van fer molt populars, com els Java Applets i Flash - aixó va permetre els desenvolupadors web incrustar un contingut ric en pàgines web com vídeo i animacions, que simplement no estaven disponibles a través d'HTML. La incrustació d'aquestes tecnologies es va aconseguir mitjançant elements com {{htmlelement("object")}}, i el menys usat {{htmlelement("embed")}}, van ser molt útils a l'hora. Des de llavors, han caigut en desús a causa de molts problemes, inclosa l'accessibilitat, la seguretat, mida del fitxer, i més; avui dia la majoria dels dispositius mòbils no són compatibles amb aquest tipus de plugins, i el suport d'escriptori està en el camí de ser exclòs.

+ +

Finalment, l'element {{htmlelement("iframe")}} va aparèixer (juntament amb altres formes d'inserir contingut, com {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc.) Això va proporcionar una manera de incrustar un document web sencer dins d'un altre, com si es tractés d'un {{htmlelement("img")}} o un altre element, i s'utilitza regularment en l'actualitat.

+ +

Sortint de la lliçó de la història, anem a seguir endavant i veure com utilitzar alguns d'aquests.

+ +

Aprenentatge actiu: usos clàssics d'incrustació

+ +

En aquest article saltarem directament a una secció d'aprenentatge actiu, per donar-vos immediatament una idea real del que les tecnologies d'incrustació són útils. El món en línia està molt familiaritzat amb Youtube, però moltes persones no saben sobre algunes dels mecanismes d'intercanvi que té disponibles. Vegem com Youtube ens permet incrustar un vídeo en qualsevol pàgina que ens agradi, utilitzant un {{htmlelement("iframe")}}.

+ +
    +
  1. En primer lloc, anar a Youtube i trobar un vídeo que us agradi.
    2. +
  2. A continuació en el vídeo trobareu un botó Compartir - seleccioneu aquesta opció per mostrar les opcions d'ús compartit.
    3. +
  3. Seleccioneu l'opció Inserir i se us donarà un cert codi <iframe> - copieu aquest.
    4. +
  4. Inserir-lo en el quadre d'entrada de sota, i veureu quin és el resultat a la sortida.
    5. +
+ +

Per als punts de bonificació, també es podria tractar d'insertar un Google Map en l'exemple:

+ +
    +
  1. Aneu a Google Maps i trobar un mapa que us agradi.
    2. +
  2. Feu clic al "Hamburger Menu" (tres línies horitzontals) a la part superior esquerra de la interfície d'usuari.
    3. +
  3. Seleccioneu l'opció Compartir o insetar un mapa.
    4. +
  4. Seleccionar l'opció insertar un mapa, us donarà un cert codi <iframe> - copieu aquest.
    5. +
  5. Inserir-lo en el quadre d'entrada de sota, i veureu quin és el resultat a la sortida.
    6. +
+ +

Si cometeu un error, sempre es pot restablir amb el botó de Reinici. Si aconseguiu realment queda encallats, feu clic al botó Mostra solució per veure una resposta.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 600) }}

+ +

Iframes en detall

+ +

Per tant, això va ser fàcil i divertit oi? Els elements {{htmlelement("iframe")}} estan dissenyats per permetre inserir altres documents web dins del document actual. Això és molt bó per incorporar continguts de tercers al lloc web en que no es pot tenir control directe sobre i no es vol haver d'implementar la seva pròpia versió - com els vídeo de proveïdors de vídeo en línia, sistemas de comentarios como Disqus, mapes de proveïdors de mapes en línia, pancartes publicitaries, etc. Els exemples editables en directe que s'han estat usant a través d'aquest curs s'implementen utilitzant <iframe>s.

+ +

Hi ha alguns {{anch("Problemes de seguretat")}} greus a considerar amb els <iframe>s, com veurem més endavant, però això no vol dir que no s'hagin d'utilitzar en els llocs web - només requereix una mica de coneixement i un raonament. Explorarem el codi en una mica més de detall. Digueu que voleu incloure en el glossari MDN en una de les seves pàgines web - podreu intentar alguna cosa com això:

+ +
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox>
+  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
+    Fallback link for browsers that don't support iframes
+  </a> </p>
+</iframe>
+ +

Aquest exemple inclou els elements essencials bàsics necessaris per utilitzar un <iframe>:

+ +
+
{{htmlattrxref('allowfullscreen','iframe')}}
+
Si s'estableix, el <iframe> és capaç de ser col·locat en la manera de pantalla completa amb Full Screen API (està fora de l'abast per a aquest article).
+
{{htmlattrxref('frameborder','iframe')}}
+
Si s'estableix en 1, això indica al navegador per establir una frontera entre aquest marc i altres marcs, que és el comportament per defecte. 0 elimina la frontera. L'ús d'aquest realment no es recomana més, ja que el mateix efecte es pot aconseguir, millor, mitjançant {{cssxref('border')}}: none; en el {{Glossary('CSS')}}.
+
{{htmlattrxref('src','iframe')}}
+
Aquest atribut, igual que amb {{htmlelement("video")}}/{{htmlelement("img")}}, conté una ruta que apunta a la URL del document per a ser incrustat.
+
{{htmlattrxref('width','iframe')}} i {{htmlattrxref('height','iframe')}}
+
Aquests atributs especifiquen l'amplada i l'alçada que es vol que tingui el iframe.
+
Contingut alternatiu
+
De la mateixa manera que altres elements similars com {{htmlelement("video")}}, pot incloure el contingut alternatiu entre les etiquetes d'obertura i tancament <iframe></iframe> que apareixeran si el navegador no suporta l'etiqueta <iframe>. En aquest cas hem inclòs un enllaç a la pàgina en el seu lloc. És poc probable trobar-se amb qualsevol navegador que no sigui compatible amb <iframe>s avui dia.
+
{{htmlattrxref('sandbox','iframe')}}
+
Aquest atribut, funciona en navegadors una mica més modern que la resta de les característiques <iframe> (per exemple, Internet Explorer 10 i superior) sol·licita la configuració de seguretat reforçada; direm més sobre això en la següent secció.
+
+ +
+

Nota: Per tal de millorar la velocitat, és una bona idea establir l'atribut src de l'iframe amb JavaScript després que el contingut principal s'hagi carregat. Això fa que la pàgina s'utilitzi més aviat i disminueixi el temps de càrrega de la pàgina oficial (una mètrica important {{glossary("SEO")}}).

+
+ +

Problemes de seguretat

+ +

Esmentem abans els problemes de seguretat - Entrarem en això en detall, una mica més, ara. No esperem que es pugui entendre tot aquest contingut perfectament la primera vegada; només volem fer-vos conscients d'aquesta preocupació, i proporcionar una referència per tornar a mesura que tingueu més experiéncia i començar a considerar l'ús de <iframe>s en els vostres experiments i treball. A més, no hi ha necessitat de tenir por i no utilitza <iframe>s - només s'ha de tenir cura. Seguiu llegint...

+ +

Els fabricants de navegadors i desenvolupadors web han après per les males que els iframes són un objectiu comú (terme oficial: attack vector) per a les persones dolentes a la web (sovint anomenat hackers, o més exactament, crackers) per atacar, si estan tractant de modificar maliciosament la vostre pàgina web, o enganyar a la gent a fer alguna cosa que no volen fer, com revelar informació sensible com noms d'usuari i contrasenyes. A causa d'això, els enginyers d'especificacions i els desenvolupadors de navegadors han desenvolupat diversos mecanismes de seguretat per fer <iframe>s més segurs, i també estan les millors pràctiques a tenir en compte - anem a cobrir alguns d'aquests a continuació.

+ +
+

{{interwiki('wikipedia','Clickjacking')}} és un tipus d'atac iframe comú on els pirates informàtics incrustan un iframe invisible en el document (o incrustan el document en el seu propi lloc web maliciós) i el fan servir per capturar les interaccions dels usuaris. Aquesta és una forma comuna de confondre als usuaris o robar dades confidencials.

+
+ +

Un exemple ràpid, primer - intenteu carregar l'exemple anterior, mostrat previament, en el vostre navegador - es pot trobar en Github (veure el codi font també). No veureu, realment, res que apareigui a la pàgina, i si ens fixem en la consola en les eines de desevolupament del navegador, veureu un missatge que us indica perquè. En Firefox, se hos dirá, càrrega denegada per X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary, no permet marcs. Això es deu al fet que els desenvolupadors que van construir MDN han inclòs una configuració al servidor que serveix a les pàgines del lloc web de no permetre que siguin incrustades a l'interior de <iframe>s (veure {{anch("Configure CSP directives")}}, més avall). Això té sentit - una pàgina sencere MDN no té molt sentit incrustar-la en altres pàgines, llevat que es vulgui fer alguna cosa com incrustar-la el vostre lloc i reclamar-les com a propies - o l'intent de robatori de dades a través de clickjacking, que són alhora coses molt dolentes, que es poden fer. A més, si tothom comences a fer això, tot l'ample de banda addicional començaria a costar-li molts diners a Mozilla.

+ +

Només incrustar quan sigui necessari

+ +

De vegades té sentit incrustar el contingut de tercers - com vídeos i mapes youtube - però ens podem estalviar molts mals de cap si només incrusten contingut de tercers quan sigui completament necessari. Una bona regla d'or per a la seguretat web és "Mai es pot ser massa cautelós. Si ho heu fet, torneu a comprovar-ho de totes maneres. Si algú més ho ha fet, se suposa que és perillós fins que es demostri el contrari".

+ +
+

A més de la seguretat, també s'ha d'estar al tant de les qüestions de la propietat intel·lectual. La majoria dels continguts té drets d'autor, fora de línia i en línia, fins i tot continguts que no us ho espereu (per exemple, la majoria de les imatges de Wikimedia Commons). Mai mostrar el contingut de la vostra pàgina web a menys que el propietari o els propietaris hagin donat per escrit, l'autorització inequívoca. Les sancions per infracció de drets d'autor són greus. Un cop més, mai es pot ser massa cautelós.

+ +

Si el contingut és llicenciat, s'ha d'obeir els termes de la llicència. Per exemple, el contingut MDN és sota llicència CC-BY-SA. Això vol dir, que s'ha d'acreditar adequadament quan se cita el nostre contingut, fins i tot si es realitzen canvis substancials.

+
+ +

Utilitzar HTTPS

+ +

{{Glossary("HTTPS")}} és la versió encriptada de {{Glossary("HTTP")}}. S'h de fer servir, HTTPS, en els vostres llocs web sempre que sigui possible:

+ +
    +
  1. HTTPS redueix la possibilitat que el contingut remot hagi estat manipulat en trànsit,
    2. +
  2. HTTPS impedeix que el contingut incrustat accedeixi al contingut del vostre document principal, i viceversa.
    3. +
+ +

L'ús d'HTTPS requereix un certificat de seguretat, que pot ser car (encara que Let's Encrypt facilita les coses) - si no es pot aconseguir un, es pot fer servir el document principal amb HTTP. No obstant això, a causa del segon benefici descrit anteriorment sobre HTTPS , no importa el que costi, mai s'ha de incrustar contingut de tercers amb HTTP. (En el millor dels casos, el navegador web de l'usuari donarà un advertiment de por). Totes les empreses de renom que fan que el contingut disponible vagi incrustar a través d'un <iframe> ho farà disponible a través d'HTTPS - mirar les URL dins de l'atribut src d'<iframe> quan està incrustant contingut de Google Maps o Youtube, per exemple.

+ +
+

Nota: Les pàgines de Github permeten que el contingut se serveixi a través d'HTTPS de forma predeterminada, per la qual cosa és útil per allotjar contingut. Si utilitzeu altre allotjament i no esteu segurs, consulteu al vostre proveïdor d'allotjament, sobre això.

+
+ +

Utilitzar sempre l'atribut sandbox

+ +

Si es vol donar als atacants poc poder, com sigui possible, per fer coses dolentes al vostre lloc web, s'ha de donar els continguts incrustats, només, els permisos necessaris per realitzar-lo. Per descomptat, això també, s'aplica al vostre propi contingut. Un contenidor de codi el qual es pot utilitzar apropiadament - o per a les proves - però no pot causar cap mal a la resta de la base del codi (ja sigui accidental o maliciós) s'anomena sandbox.

+ +

El contingut sense sandbox pot fer molt (l'execució de JavaScript, l'enviament de formularis, finestres emergents, etc.) Per defecte s'ha d'imposar totes les restriccions disponibles mitjançant l'atribut sandbox  sense paràmetres, com es mostra en l'exemple anterior.

+ +

Si és absolutament necessari, es pot afegir permisos de tornada un per un (dins del valor d'atribut sandbox ="" ) - veure la referència d'entrada {{htmlattrxref('sandbox','iframe')}} per a totes les opcions disponibles. Una nota important és que mai s'ha d'afegir tant allow-scripts i allow-same-origin al seu atribut sandbox - en aquest cas el contingut incrustat podria passar per alt la mateixa política de seguretat d'origen que deté l'execució de scripts de llocs i l'ús de JavaScript per desactivar completament la sandbox.

+ +
+

Nota: La Sandboxing no proporciona cap protecció si els atacants poden enganyar a la gent perquè visiti el contingut maliciós directament (fora d'un iframe). Si hi ha alguna possibilitat que cert contingut pot ser maliciós (per exemple, el contingut generat per l'usuari), si us plau feu servir un {{glossary("domini")}} diferent del vostre lloc principal.

+
+ +

Configurar directives CSP

+ +

La {{Glossary("CSP")}} representa la content security policy, i proporciona un conjunt de capçaleres HTTP (metadades enviades juntament amb les seves pàgines web quan es serveixen des d'un servidor web) dissenyades per millorar la seguretat del document HTML. Quan es tracta de protegir <iframe>s, es pot configurar el servidor per a enviar una capçalera X-Frame-Options apropiada. Això pot evitar que altres llocs web incrustin el seu contingut en les vostres pàgines web (el que permetria {{interwiki('wikipedia','clickjacking')}} i una sèrie d'altres atacs), que és exactament el que els desenvolupadors MDN han fet, com hem vist anteriorment.

+ +
+

Nota: Es pot llegir el post de Frederik Braun On the X-Frame-Options Security Header per obtenir més informació d'antecedents sobre aquest tema. Òbviament, està fora de l'abast, per a una explicació completa, d'aquest article.

+
+ +

Els elements <embed> i <object>

+ +

Els elements {{htmlelement("embed")}} i {{htmlelement("object")}}  compleixen una funció diferent a {{htmlelement("iframe")}} - aquests elements de propòsit general són eines d'inserció per a la incrustació de diversos tipus de contingut extern, que inclouen tecnologies de complements com els applets de Java i flash, PDF (es pot mostrar en un navegador amb un plugin PDF), i fins i tot el contingut com vídeos, SVG i les imatges!

+ +
+

Nota: Un plugin és un programari que proporciona accés als continguts del navegador que no pot llegir de forma nativa.

+
+ +

No obstant això, és poc probable que utilitzeu molt aquests elements - Els applets no s'han utilitzat durant anys, Flash ja no és molt popular, a causa d'una sèrie de raons (veure {{anch("El cas contra els complements")}}, més endavant), els arxius PDF tendeixen a estar millor enllaçats que incrustats, i altres continguts com a imatges i video tenen elements molt millors i més fàcils de manejar. Plugins i aquests mètodes d'incrustació són realment una tecnologia heretada, i els estem esmentant principalment en cas que us trobeu amb ells en certes circumstàncies com a intranets o projectes empresarials.

+ +

Si necessiteu incorporar contingut de plugin, aquest és el tipus d'informació que necessitareu, com a mínim:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 {{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} del contingut incrustat{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
accurate {{glossary("MIME type", 'media type')}} del contingut incrustat{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
l'altura i l'amplada (en píxels CSS) de la caixa controlada pel complement{{htmlattrxref('height','embed')}}
+ {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
+ {{htmlattrxref('width','object')}}
noms i valors, per alimentar el complement com paràmetresatributs ad hoc amb els noms i valorselements d'una sola etiqueta {{htmlelement("param")}}, continguts dins <object>
Contingut HTML independent com a recurs alternatiu per a un recurs no disponibleNo suportat (<noembed> és obsolet)contingut dins <object>, després d'elements <param>
+ +
+

Nota: <object> requereix un atribut data, un atribut type, o tots dos. Si s'utilitzant ambdòs, també es pot utilitzar l'atribut {{htmlattrxref('typemustmatch','object')}} (només implementat en Firefox, a partir d'aquest escrit). typemustmatch mante l'arxiu incrustat a que s'executi llevat que l'atribut type proporcioni el tipus de medi correcte. Per tant, typemustmatch pot conferir beneficis significatius de seguretat quan està incrustar el contingut d'un {{glossary("origen")}} diferent (pot mantenir els atacants d'executar scripts arbitràries mitjançant el complement).

+
+ +

Heus aquí un exemple que utilitza l'element {{htmlelement("embed")}} per  incrustar una pel lícula Flash (veure aquest en Github i comprovar el codi font també):

+ +
<embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+ +

Bastant horrible, no ho és. El HTML generat per l'eina d'Adobe Flash tendia a ser encara pitjor, l'ús d'un element <object> amb un element <embed> incrustat en ell, per cobrir totes les bases (fes un cop d'ull a un exemple). El flaix fins i tot va ser utilitzat amb èxit com a contingut alternatiu a HTML5 de vídeo, per un temps, però això cada vegada es veu més innecessari.

+ +

Ara veurem un exemple <object>, que insereix un PDF en una pàgina (vegeu l'exemple en viu i el codi font):

+ +
<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
+</object>
+ +

Els PDFs eren un pas necessari entre el paper i el digital, però plantegen molts reptes d'accessibilitat i poden ser difícils de llegir en pantalles petites. Encara tendeixen a ser popular en alguns cercles, però és molt millor enllaçar-los perquè puguin ser descarregats o llegits en una pàgina separada, en lloc de incrustar-los en una pàgina web.

+ +

El cas en contra dels complements (plugins)

+ +

Hi havia una vegada, que els complements (plugins) eran indispensables a la web. Recordeu els dies en què calia instal·lar Adobe Flash Player, només, per veure una pel·lícula en línia? Llavors teníem constantment alertes molestes sobre l'actualització de Flash Player i el seu entorn d'execució de Java. Les tecnologies web han crescut molt més robustes, i aquells dies s'han acabat. Per a la majoria de les aplicacions, és hora que deixin de lliurar contingut que depenguin dels complements (plugins), i comencin a prendre avantatge de les tecnologies web al seu lloc.

+ + + +

Llavors, què s'ha de fer? Si es necessita interactivitat, HTML i {{glossary("JavaScript")}} ens pot donar fàcilment la feina feta sense necessitat d'applets de Java o  tecnologia obsoleta ActiveX/BHO. En lloc de confiar en Adobe Flash, podem utilitzar vídeo HTML5 per les necessitats media, per a gràfics vectorials SVG i Canvas per a imatges i animacions complexes. Peter Elst escrivia fa uns anys que Adobe Flash no sol ser l'eina adequada per al treball, excepte per a jocs i aplicacions empresarials especialitzades. Pel que fa a ActiveX, fins i tot el navegador Microsoft {{glossary("Microsoft Edge","Edge")}} ja no ho suporta.

+ +

Sumari

+ +

El tema de la incrustació d'altres continguts en els documents web, de forma ràpida, pot arribar a ser molt complex, pel qual en aquest article hem tractat d'introduir d'una manera simple i familiar el que us pogui semblar d'una rellevancia immediata, mentre en seguit fent al·lusió a algunes de les característiques més avançades de les tecnologies involucrades. Per començar, és probable que feu servir la incrustació molt més enllà, inclouent continguts de tercers com mapes i vídeos en les vostres pàgines. A mesura que adquiriu més experiència, és probable que comenceu a trobar més usos per a ells.

+ +

Hi ha moltes altres tecnologies que impliquen la incrustació de continguts externs a més dels que hem tractat aquí. Vam veure alguns, en els articles anteriors, com {{htmlelement("video")}}, {{htmlelement("audio")}} i {{htmlelement("img")}}, però hi ha altres a descobrir, com {{htmlelement("canvas")}} per generar en JavaScript gràfics 2D i 3D, i {{htmlelement("svg")}} per a incrustar gràfics vectorials. Aviat ens ocuparem de SVG en l'article següent del mòdul.

+ +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/images_in_html/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/images_in_html/index.html" new file mode 100644 index 0000000000..839a38b400 --- /dev/null +++ "b/files/ca/learn/html/multim\303\250dia_i_incrustar/images_in_html/index.html" @@ -0,0 +1,373 @@ +--- +title: Imatges en HTML +slug: Learn/HTML/Multimèdia_i_incrustar/Images_in_HTML +tags: + - Article + - Beginner + - Guide + - HTML + - Image + - alt text + - captions + - figcaption + - figure + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Al principi, la web era només text, i resultava molt avorrit. Afortunadament, no va passar gaire temps abans que s’afegís la capacitat d'incrustar imatges (i altres tipus de continguts més interessants) dins de les pàgines web. Hi ha altres tipus de mitjans multimèdia a tenir en compte, però és lògic començar amb l'humil element {{HTMLElement("img")}}, que s'utilitza per a incrustar en una pàgina web una imatge simple . En aquest article veurem com utilitzar-lo en profunditat, incloent els conceptes bàsics, com anotar-la amb llegendes amb l’element {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.

+ + + + + + + + + + + + +
Requisits previs:Coneixements bàsics d'informàtica, instal·lació de software bàsic, coneixements bàsics de treballar amb arxius, familiaritat amb els fonaments de l’HTML (que exposen en l’article Introducció a l’HTML.)
Objectiu:Aprendre a incrustar imatges simples en HTML i comentar-les amb llegendes, i com es relacionen les imatges HTML amb les imatges de fons CSS.
+ +

Posar una imatge en una pàgina web

+ +

Per posar una imatge simple en una pàgina web, s'utilitza l'element {{htmlelement("img")}}. Es tracta d’un element buit (que significa que no té contingut de text o etiqueta de tancament) que requereix un mínim d'un atribut per a ser útil: src (de vegades se l’anomena pel nom complet, source). L'atribut src conté una ruta que apunta a la imatge que es vol incrustar a la pàgina, que pot ser una adreça URL relativa o absoluta, de la mateixa manera que en l'element {{htmlelement("a")}} el valor de l'atribut href.

+ +
+

Nota: Fes una lectura de la guia ràpida a les adreces i rutes per refrescar la memòria abans de continuar.

+
+ +

Així, per exemple, si la imatge es diu dinosaur.jpg i és en el mateix directori que la pàgina HTML, la imatge es podria incloure d'aquesta manera:

+ +
<img src="dinosaur.jpg">
+ +

Si la imatge és en un subdirectori d'imatges dins del mateix directori que la pàgina HTML (que és el que Google recomana per a propòsits de posicionament en cercadors ({{glossary("SEO")}}) / indexació), llavors s'incrusta així:

+ +
<img src="images/dinosaur.jpg">
+ +

I així succesivament.

+ +
+

Nota: Els motors de cerca també llegeixen els noms d'arxiu d'imatge i els tenen en compte en termes de SEO; per tant, s'ha de donar a la imatge un nom d'arxiu que sigui descriptiu (dinosaur.jpg és millor que img835.png.)

+
+ +

La imatge es pot incloure utilitzant la seva adreça URL absoluta, per exemple:

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

Però això no té sentit perquè el navegador té més feina a buscar l'adreça IP del servidor de nou, etc. Gairebé sempre, les imatges del lloc web es mantenen en el mateix servidor que l'HTML.

+ +
+

Atenció: La majoria de les imatges tenen drets de propietat intelectual. No mostris una imatge a la pàgina web si no és que

+ + + +

Les infraccions dels drets d'autor són il·legals i antiétiques. A més, no incloguis mai en l'atribut src una adreça url que apunti cap a una imatge que estigui allotjada en la pàgina web d'algú, si no tens permís per a enllaçar-la. D’això, se’n diu hotlinking i, un cop més, robar ample de banda d'algú altre és il·legal. També redueix la velocitat de la pàgina, i no tens control sobre la imatge si l’eliminen o la substitueixen per alguna altra cosa que et podria resultar enutjosa.

+
+ +

El codi anterior donaria el resultat següent:

+ +

Imatge bàsica d’un dinosaure incrustada en un navegador, amb el text Images in HTML escrit a dalt

+ +
+

Nota: Els elements com {{htmlelement("img")}} i {{htmlelement("video")}} es denominen de vegades elements reemplaçats, perquè el contingut i la mida de l'element el defineix un recurs extern (com una imatge o un arxiu de vídeo), no el contingut propi de l’element.

+
+ +
+

Nota: Pots trobar l'exemple acabat al final d'aquesta secció, executat a GitHub (consulta’n també el codi font.)

+
+ +

Text alternatiu

+ +

L’atribut següent que veurem és alt. El valor d’aquest atribut se suposa que és una descripció textual de la imatge, que s’utilitza en situacions en què la imatge no es pot veure/representar. Per exemple, el codi anterior es pot modificar d'aquesta manera:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth">
+ +

La manera més senzilla de provar el text alternatiu és escriure malament el nom de l'arxiu. Si, per exemple, escrius el nom de la imatge així: dinosooooor.jpg, el navegador no mostrarà la imatge; en lloc d’ella, mostrarà el text alternatiu.

+ +

El títol Images in HTML, però aquesta vegada la imatge del dinosaure no es mostra i en lloc de la imatge apareix el text alternatiu.

+ +

Llavors, per què hauries de veure o necessitar mai el text alternatiu? Pot ser útil en diverses situacions:

+ + + +

Què s'ha d'escriure exactament dins de l'atribut alt? En primer lloc, depèn de per què la imatge és allà (en altres paraules, què es perd si la imatge no es mostra):

+ + + +

La clau està en oferir una experiència d’usabilitat fins i tot quan les imatges no es poden veure, en què els usuaris no perdin cap dels continguts. Desactiva les imatges en el navegador i observa com són les coses. De seguida t’adonaràs de com són d’inútils els textos alternatius com «logo» o «el meu lloc web favorit», si la imatge no es pot veure.

+ +
+

Nota: WebAIM, guia del text alternatiu, ofereix una orientació més detallada per al text alternatiu, i és una bona lectura per a més informació.

+
+ +

Amplada i alçada

+ +

Es poden utilitzar els atributs width i height per a especificar l'amplada i l'alçada de la imatge (es pot trobar l'amplada i l'alçada de la imatge de moltes maneres, per exemple en Mac es pot utilitzar Cmd + I per a obtenir la visualització de la informació de l'arxiu d'imatge). Tornant al nostre exemple, poden fer això:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341">
+ +

Això no dona com a resultat una gran diferència a la pantalla en circumstàncies normals, però si no la imatge es mostra (per exemple, perquè l'usuari acaba d’acccedir a la pàgina i la imatge encara no s'ha carregat) veuràs que el navegador deixa un espai perquè la imatge aparegui:

+ +

El títol Images in HTML amb el text alternatiu per al dinosaure, que es mostra dins de la caixa que resulta de configurar l’amplada i l’alçada

+ +

Això és bo perquè la càrrega de la pàgina resulta més ràpida i suau.

+ +

La mida de les imatges no s'ha d'alterar utilitzant atributs HTML; si s'estableix la mida massa gran, les imatges es veuran granulades/difuses; si la mida es fa massa petita, es malbarata ample de banda amb la descàrrega d'una imatge que és molt més gran del que cal. La imatge també pot acabar semblant distorsionada, si no es manté la relació d'aspecte correcta. S'ha d'utilitzar un editor d'imatges per a posar la imatge en la mida correcta abans de posar-la a la pàgina web.

+ +
+

Nota: Si has d’alterar la mida d'una imatge, utilitza CSS en lloc d'HTML.

+
+ +

Títols d’imatge

+ +

De la mateixa manera que amb els enllaços, també es pot afegir l'atribut title a les imatges per a proporcionar informació de suport addicional, si cal. En el nostre exemple, podríem fer això:

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum">
+ +

Això ens fa aparèixer un indicador de funció (tooltip), igual que amb els títols dels enllaços:

+ +

La imatge del dinosaure amb un indicador de funció a la part de dalt que diu: Un T-Rex exposat al museu de la Universitat de Manchester

+ +

Els títols d'imatge no són essencials, i sovint és millor incloure'ls com a informació de suport en el text principal de l'article, en lloc d’associar-los a la imatge. Són útils en algunes circumstàncies, per exemple quan en una galeria d'imatges no hi ha espai per als subtítols.

+ +

Aprenentatge actiu: incrustar una imatge

+ +

Doncs, ara et toca a tu! En aquesta secció d'aprenentatge actiu volem que juguis amb un exercici d'incrustació simple. Disposes d'una etiqueta bàsica {{htmlelement("img")}}, i volem que incrustis la imatge que hi ha en la següent URL:

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

Sí, ja hem dit que no s’ha de fer hotlink d'imatges a altres servidors. Però això és només a tall de demostració; et deixem fer-ho, només aquesta vegada!

+ +

Potser també voldries:

+ + + +

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per a veure una solució.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Descriure imatges amb figures i peus d'imatge

+ +

Hi hauria moltes maneres possibles d’afegir una llegenda associada a la teva imatge. Per exemple, no hi hauria res que impedís de fer això:

+ +
<div class="figure">
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <p>A T-Rex on display in the Manchester University Museum.</p>
+</div>
+ +

Això està bé. Inclou el contingut que necessita, i es fa un ús correcte de l’aplicació d’estil amb CSS. Però hi ha un problema: no hi ha res que vinculi semànticament la imatge a la seva llegenda, i això pot causar problemes als lectors de pantalla, per exemple (quan hi ha 50 imatges i llegendes, quina llegenda va amb quina imatge?).

+ +

Una solució més encertada és utilitzar els elements {{htmlelement("figure")}} i {{htmlelement("figcaption")}} d’HTML5, que s'han creat precisament amb aquest propòsit: proporcionar un contenidor semàntic per a les figures, que vinculi clarament la figura amb la llegenda. El nostre exemple anterior es podria reescriure així:

+ +
<figure>
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
+</figure>
+ +

L'element {{htmlelement("figcaption")}} indica als navegadors i la tecnologia d'assistència que la llegenda descriu la resta del contingut de l'element {{htmlelement("figure")}}.

+ +
+

Nota: Des d'un punt de vista d'accessibilitat, les llegendes i el text alternatiu {{htmlattrxref('alt','img')}} tenen funcions diferents. Les llegendes beneficien fins i tot les persones que poden veure la imatge, mentre que el text alternatiu {{htmlattrxref('alt','img')}} fa la mateixa funció que una imatge, quan aquesta no hi és. Per tant, les llegendes i el text alternatiu no poden dir el mateix, perquè tots dos elements apareixen quan la imatge no hi és. Intenta desactivar les imatges en el navegador i observa com es veuen les coses.

+
+ +

Recordeu que una figura no té per què ser una imatge; una figura és una unitat independent del contingut que:

+ + + +

Una figura podria ser un conjunt d’imatges, un fragment de codi, àudio o vídeo, equacions, una taula, o alguna altra cosa.

+ +

Aprenentatge actiu: crear una figura

+ +

En aquesta secció d'aprenentatge actiu, et demanarem que agafis el codi acabat de la secció d'aprenentatge actiu anterior, i el converteixis en una figura:

+ + + +

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per a veure una solució.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

Imatges de fons de CSS

+ +

També pots utilitzar CSS per a incrustar imatges en pàgines web (i JavaScript, però això és una altra història). La propietat {{cssxref("background-image")}} de CSS, i les altres propietats background* s'utilitzen per a controlar la col·locació de la imatge de fons. Per exemple, per a posar una imatge de fons en cada paràgraf d’una pàgina, es podria fer això:

+ +
p {
+  background-image: url("images/dinosaur.jpg");
+}
+ +

La imatge incrustada que resulta possiblement és més fàcil de posicionar i controlar que les imatges HTML; aleshores, per què ens hem de molestar amb les imatges HTML? Com ja hem insinuat abans, les imatges de fons de CSS són només per a decoració. Si només volem afegir una cosa bonica per a millorar l'aspecte visual de la pàgina, això està molt bé, però aquest tipus d'imatges no tenen cap significat semàntic en absolut —no poden tenir text equivalent—, són invisibles per als lectors de pantalla, etc. Aquí és on destaquen les imatges HTML.

+ +

Per tant, si una imatge té sentit en termes de contingut, s'ha d'utilitzar una imatge en HTML. Si una imatge és purament decorativa, s'han d'utilitzar imatges de fons CSS.

+ +
+

Nota: Aprendreu molt més sobre imatges de fons CSS en el nostre tema CSS.

+
+ +

Sumari

+ +

Això és tot per ara. Hem exposat les imatges i les llegendes amb detall. En l’article següent ens mourem en un nivell superior, i aprendrem com utilitzar HTML per a incrustar vídeo i àudio a les pàgines web.

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/imatges_sensibles/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/imatges_sensibles/index.html" new file mode 100644 index 0000000000..4be56f6248 --- /dev/null +++ "b/files/ca/learn/html/multim\303\250dia_i_incrustar/imatges_sensibles/index.html" @@ -0,0 +1,254 @@ +--- +title: Imatges sensibles +slug: Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles +tags: + - Article + - Beginner + - CodingScripting + - Design + - Graphics + - Guide + - HTML + - Image + - Intermediate + - img + - sizes + - srcset +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

En aquest article aprendrem sobre el concepte de les imatges sensibles - imatges que funcionen bé en dispositius amb diferentes mides de pantalles, resolucions i altres característiques semblants - i veurem les eines que proporciona HTML per ajudar-nos a posar-les en pràctica. Imatges sensibles és només una part del (i prepara l'escenari per) disseny web sensible, un tema que aprendrem molt més en un futur mòdul del tema CSS.

+
+ + + + + + + + + + + + +
Requisits previs:Heu de coneixer el fonaments bàsics d'HTML i com afegir imatges estàtiques a una pàgina web.
Objectius:Aprendre com utilitzar funcions com {{htmlattrxref("srcset", "img")}} i l'element {{htmlelement("picture")}} per implementar solucions d'imatges sensibles en els llocs web.
+ +

Per què les imatges sensibles ?

+ +

Llavors, quin problema estem tractant de resoldre amb imatges sensibles? Examinarem un escenari típic. Un lloc web típic, probablement, té una imatge de capçalera perquè es vegi bonic per als visitants, a més, potser algunes imatges de contingut per sota d'aquesta. És possible que vulgueu fer que la capçalera abasti la totalitat de l'amplada de la mateixa, i la imatge de contingut en formi part, en algun lloc, dins de la columna de contingut. Fem una ullada a un exemple senzill d'això:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

+ +

Això funciona bé en un dispositiu de pantalla ampla, com ara un ordinador portàtil o de sobretaula (es pot veure l'example en directa i trobar el codi font en Github.) No parlarem tant de la CSS, excepte per dir que

+ + + +

Això està bé, però el problema ve quan es comença a veure el lloc en un dispositiu de pantalla estreta - la capçalera es veu bé, però està començant a ocupar molta alçada de la pantalla d'un dispositiu mòbil; la primera imatge de contingut, d'altra banda, es veu terrible - en aquesta grandària amb prou feines es pot veure a la gent!

+ +

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

+ +

Seria molt millor mostrar una versió retallada de la imatge que fixar-se en els detalls importants de la fotografia quan el lloc es veu en una pantalla estreta, i potser una mica entre els dos per a un dispositiu de pantalla d'amplada mitjana com una tauleta - això es coneix comunament com el problema direcció d'art .

+ +

A més, no hi ha necessitat d'integrar aquest tipus d'imatges de grans dimensions a la pàgina si s'està veient en una petita pantalla de mòbil; això es diu problema canvi de resolució - una imatge de trama és un nombre fix de píxels d'ample i un nombre fix de píxels d'alt; com vam veure en fixar-nos en els gràfics de vector, una imatge de trama comença a veure's granulada i horrible si es visualitza més gran que la mida original (mentre que un gràfic vectorial no ho fa). I si es mostra significativament més petita que la mida original, és un malbaratament d'ample de banda - en especial els usuaris de mòbils no volen haver de gravar a través del seu ample de banda la descàrrega d'una imatge gran destinada a escritori, quan una imatge petita faria per al dispositiu. Una situació ideal seria tenir múltiples resolucions disponibles i servir mides adequades, depenent dels diferents dispositius que accedeixen al lloc web.

+ +

Per complicar més les coses, alguns dispositius tenen pantalles d'alta resolució que necessiten les imatges més grans del que s'espera que ells necessiten, per mostrar-ho bé. Això és essencialment el mateix problema, però en un context lleugerament diferent.

+ +

Es podria pensar que les imatges de vector resoldrien aquests problemes, i ho fan fins a cert punt - tots dos són petits en grandària d'arxiu i s'escalen bé, i han de ser usats sempre que sigui possible. No són adequats per a tot tipus d'imatges però -si bé són excel·lents per a gràfics simples, patrons, elements d'interfície, etc., comença a ser molt complex per crear una imatge basada en vectors amb el tipus de detall que ens agradaria trobar, diguem, una foto. Els formats d'imatge de trama, com JPEG són més adequats per al tipus d'imatges que hem vist en l'exemple anterior.

+ +

Aquest tipus de problema no existia quan la primera web va existir, a principis de mitjans dels anys 90 - en aquell temps els únics dispositius que existien per navegar per la web eren de sobretaula i portàtils, de manera que els enginyers de navegadors i escriptors d'especificacions ni tan sols pensaven posar en pràctica solucions. Les tecnologies d'imatges sensibles es van dur a terme recentment per resoldre els problemes indicats anteriorment, ja que permetien oferir el navegador diversos arxius d'imatge, ja sigui tots els que mostraven el mateix, però que contenien un nombre diferent de píxels (resolution switching), o diferents imatges adequades per a diferents assignacions d'espai (art direction)

+ +
+

Nota: Les noves característiques que es descriuen en aquest article -  {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} - están totes suportades en les versions pubicades per els escriptoris moderns i navegadors mòbils (incloent el navegador de Microsoft Edge, encara que no amb Internet Explorer.)

+
+ +

Com crear imatges sensibles?

+ +

En aquesta secció, veurem els dos problemes il·lustrats a dalt i mostrarem com resoldre'ls utilitzant les característiques de la imatge sensible d'HTML. S'ha de tenir en compte que ens centrarem en {{htmlelement("img")}}s d'HTML per aquesta secció, com es veu en l'àrea de contingut de l'exemple anterior - la imatge a la capçalera del lloc és només de decoració, i per tant implementat utilitzant imatges de fons CSS. CSS podria dir-se que té millors eines per el disseny sensible, parlarem d'elles en un futur mòdul CSS.

+ +

Canvi de resolució: Diferents mides

+ +

Llavors, quin és el problema que es vol resoldre amb el canvi de resolució? Volem mostrar el mateix contingut d'imatge, major o menor depenent del dispositiu - aquesta és la situació que tenim amb la segona imatge de contingut en el nostre exemple. L'element standard {{htmlelement("img")}} tradicionalment només se li permet apuntar el navegador a un sol arxiu font:

+ +
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

No obstant això, podem utilitzar dos nous atributs - {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}} - per proporcionar diverses imatges fonts addicionals, juntament amb consells per ajudar al navegador a triar el més adequat. Es pot veure un exemple d'això en el nostre exemple responsive.html en Github (vegeu també el codi font):

+ +
<img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Els atributs srcset i sizes es veuen complicats, però no són tan dolents per entendre si es formaten com es mostra a dalt, amb una part diferent del valor de l'atribut en cada línia. Cada valor conté una llista separada per comes. i cada part de les llistes es componen de tres sub-parts. Recorrerem els continguts de cada, ara:

+ +

srcset defineix el conjunt d'imatges que permetrà el navegador triar entre,   cada mida d'imatge. Abans de cada coma, escrivim:

+ +
    +
  1. Un nom de fitxer d'imatge (elva-fairy-480w.jpg.)
    2. +
  2. Un espai.
    3. +
  3. L'ample de la imatge inherent en píxels (480w) - en compte que aquesta utilitza la unitat w, no px com es podria esperar. Aquesta és la mida real de la imatge, que es pot trobar al inspeccionar l'arxiu d'imatge a l'ordinador (per exemple en un Mac es pot seleccionar la imatge en el Finder i preme Cmd + I per obrir la pantalla d'informació).
    4. +
+ +

sizes defineix un conjunt de condicions de medis (per exemple, amples de pantalla) i indica quina mida de la imatge seria millor triar, quan es compleixin certes condicions en els medis - aquests són els consells que parlàvem anteriorment. En aquest cas, abans de cada coma, escrivim

+ +
    +
  1. una condició de medis ((max-width:480px)) - aprendrem més sobre això en el tema de CSS, però per ara direm que una condició de medis descriu un possible estat en que la pantalla pot estar. En aquest cas, estem dient "quan l'amplada de la finestra gràfica sigui de 480 píxels o menys".
    2. +
  2. Un espai.
    3. +
  3. L'amplada de l'espai de la imatge s'ompli quan la condició del medi sigui certa (440px).
    4. +
+ +
+

Nota: Per l'ample de l'espai, és possible proporcionar una longitud absoluta (px, em) o una longitud relativa (com un percentatge). Es pot haver notat que l'última amplada de l'espai no té cap condició del medi - Aquest és per defecte el que es tria quan cap de les condicions del medi són certes). El navegador ignora tot després de la primera condició coincident, així que s'ha d'anar amb compte com es demanan les condicions del medi.

+
+ +

Així, amb aquests atributs en el seu lloc, el navegador:

+ +
    +
  1. Mirar l'amplada del dispositiu.
    2. +
  2. Calcular quina condició del medi en la llista de sizes (mides) és el primer a ser veritat.
    3. +
  3. Mirar la mida de l'espai donat a aquesta consulta de medis.
    4. +
  4. Carregar la imatge de referència en la llista srcset que més s'acosti a la mida de l'espai triat.
    5. +
+ +

I ja està! Així que en aquest punt, si un navegador de suport amb un ample de 480px de finestra gràfica carrega la pàgina, la condició (max-width: 480px) del medi serà veritat, per tant, es triarà l'espai 440px, de manera que el elva-fada-480w.jpg serà carregat, ja que el seu ample inherent (480w) és el més proper a 440px. La imatge 800px és de 128 KB en el disc mentre que la versió de 480px és només 63KB - un estalvi de 65KB. Ara imaginem si aquesta era una pàgina que tenia moltes imatges. Usant aquesta tècnica es podria estalviar als usuaris de mòbils una gran quantitat d'ample de banda.

+ +

Els navegadors més antics no soportan aquestes característiques, simplement, les ignoran i segueixen endavant i carregan la imatge que es fa referència en l'atribut {{htmlattrxref("src", "img")}} com a normal.

+ +
+

Nota: En el {{htmlelement("head")}} del document trobarem la línia <meta name = "viewport" content = "width = device-width">: això obliga els navegadors mòbils a adoptar l'amplada real de la seva finestra en carregar pàgines web (alguns navegadors mòbils menteixen sobre la seva amplada de la finestra gràfica, i en lloc de carregar pàgines a l'amplada de la finestra gràfica, redueixen la pàgina carregada cap avall, el que no és molt útil per a les imatges o el disseny sensible. Us ensenyarem més sobre això en un mòdul futur).

+
+ +

Eines útils per a desenvolupadors

+ +

Hi ha algunes eines de desenvolupament útils en els navegadors per ajudar en l'elaboració de les amplades d'espai, etc, que són necessàries utilitzar. Quan els estem treballant, carreguem per primera vegada la versió no sensible del exemple (not-responsive.html), després entreu en Responsive Design View (Tools > Web Developer > Responsive Design View), que ens permetrà mirar els dissenys de pàgina web com si els veiéssim a través d'una varietat de diferents mides de pantalles de dispositius.

+ +

S'ha establert l'amplada de la finestra gràfica a 320px llavors 480px; per a cada un entrem al Inspector DOM, fent clic a l'element {{htmlelement("img")}} que ens interessa, després mirem la seva grandària en la pestanya de Box Model view en el costat dret de la pantalla. Això ens ha de donar els amples de imatge inherents que necessita.

+ +

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

+ +

A continuació, es pot comprovar si el srcset ha treballat mitjançant l'establiment de l'amplada de la finestra gràfica que volem (establint una amplada estreta, per exemple), obrim Network Inspector (Tools > Web Developer > Network), a continuació, tornem a carregar la pàgina. Això ens ha de donar una llista de recursos que s'han descarregat per compondre la pàgina web, i aquí es pot comprovar quin arxiu d'imatge va ser triat per a descarregar.

+ +

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

+ +

Canvi de resolució: Mateixa grandària, diferents resolucions

+ +

Si s'està donant suport a múltiples resolucions de pantalla, però tothom veu la imatge a la mateixa grandària real en la pantalla, es pot permetre que el navegador seleccioni una imatge de resolució apropiada utilitzant srcset amb x-descriptors i sense grandaries (sizes) - una sintaxi una mica més fàcil! Es pot trobar un exemple de com es veu en srcset-resolutions.html (vegeu també el codi font):

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
+
+ +

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageEn aquest exemple, el següent CSS s'aplica a la imatge de manera que tindrà una amplada de 320 píxels a la pantalla (també anomenats píxels CSS):

+ +
img {
+  width: 320px;
+}
+ +

En aquest cas, la grandària (sizes) no és necessaria - el navegador simplement resol la resolució de la pantalla que es mostra, i serveix la imatge més adequada que es fa referència en el srcset. Així, si el dispositiu que accedeixi a la pàgina té un estàndard/de baixa resolució, amb un píxel de dispositiu que representa cada píxel CSS, la imatge elva-fada-320w.jpg serà carregada (el 1x està implícit, pel que no cal incloure). Si el dispositiu té una alta resolució de dos píxels de dispositiu per píxel CSS o més, es carregarà la imatge elva-fada-640w.jpg. La imatge de 640px té 93KB, mentre que la imatge de 320px té només 39KB.

+ +

Direcció d'art

+ +

En resum, el problema de direcció d'art implica voler canviar la imatge que es mostra per adaptar-se a diferents grandàries de visualització de la imatge. Per exemple, si es mostra un paisatge gran amb una persona al mig en un lloc web quan es veu en un navegador d'escriptori, aquesta es redueix quan es veu el lloc web en un navegador mòbil, es veurà malament, la persona serà molt petita i difícil de veure. Probablement seria millor mostrar una imatge més petita, de retrat en el mòbil, que mostri la persona ampliada. L'element {{htmlelement("picture")}} ens permet implementar exactament aquest tipus de solució.

+ +

Tornant al nostre exemple original not-responsive.html tenim una imatge que necessita molt la direcció d'art:

+ +
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+ +

Arreglarem això, amb {{htmlelement("picture")}}! Igual que <video> i <audio>,  l'element <picture> és un contenidor que conté diversos elements {{htmlelement("source")}} que proporcionen diverses fonts diferents que el navegador pot triar, seguit per l'importantíssim element {{htmlelement("img")}}. El codi de responsive.html es veu així:

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+</picture>
+
+ + + +

Aquest codi ens permet mostrar una imatge adequada tant en pantalla ampla com en pantalla estreta, com es veu a continuació:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

+ +
+

Nota: S'ha d'utilitzar el atribut media només en escenaris de direcció d'art; quan es fa ús de media, no oferir condicions de medis dins l'atribut sizes.

+
+ +

Per què no podem fer això usant CSS o Javascript?

+ +

Quan el navegador comença a carregar una pàgina, s'inicia la descàrrega (precàrrega) d'alguna de les imatges abans que l'analitzador principal hagi començat a carregar i interpretar el CSS i JavaScript de la pàgina. Aquesta és una tècnica útil, que de mitjana ha rebaixat el 20% el temps de càrrega. No obstant això, no és útil per a les imatges sensibles, d'aquí la necessitat d'implementar solucions com srcset. No es podria, per exemple, carregar l'element {{htmlelement("img")}}, després de detectar l'amplada de la finestra gràfica amb JavaScript i canviar dinàmicament la imatge d'origen en una més petita si es desitjes. Per llavors, la imatge original ja hauria estat carregada, i es carregaria també la imatge petita, així, que és encara pitjor en termes d'imatge sensible.

+ + + +

Utilitzar formats d'imatge moderns audaçment

+ +

Hi ha diversos nous formats d'imatge emocionants (com WebP i JPEG-2000) que poden mantenir una mida d'arxiu baix i d'alta qualitat al mateix temps. No obstant això, el suport dels navegadors és irregular.

+ +

<picture> ens permet continuar atenent els navegadors antics. Es pot subministrar el tipus MIME dins de l'atribut type perquè el navegador pogui rebutjar immediatament tipus d'arxius no compatibles:

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+
+ + + +

Aprenentatge actiu: La implementació de les vostres pròpies imatges sensibles

+ +

Per a aquest aprenentatge actiu, estem esperant que sigueu valents i sobretot actueu independentment.... Volem que implementeu el vostre propi art adequat dirigit a pantalla estreta/pantalla ampla utilitzant <picture>, i un exemple de canvi de resolució que utilitzi srcset.

+ +
    +
  1. Escriure alguna cosa d'HTML senzilla per contenir el codi (usar not-responsive.html com a punt de partida, si es vol)
    2. +
  2. Troba una bona imatge apaïsada de pantalla ampla amb algun tipus de detalls continguts en ella en algun lloc. Crear una versió en grandària web de la mateixa utilitzant un editor de gràfics, a continuació, retallar-la per mostrar una part més petita que ampliï el detall, i crear una segona imatge (al voltant de 480px d'ample que és bo per a això).
    3. +
  3. Utilitzeu l'element <picture> per implementar un selector d'imatge de direcció d'art!
    4. +
  4. Crear diversos arxius d'imatges de diferents mides, cadascun mostrant la mateixa imatge.
    5. +
  5. Utilitzeu srcset/size per crear un exemple de canvi de resolució, ja sigui per servir la mateixa imatge a mida en diferentes resolucions, o diferentes mides d'imatges en diferentes amplades de finestra gràfica.
    6. +
+ +
+

Nota: Utilitzeu el devtools del navegador perquè us ajudi a saber quines mides necessiteu, com es va esmentar anteriorment.

+
+ +

Sumari

+ +

Això és un embolcall per a les imatges sensibles - Esperem que hagiu gaudit jugant amb aquestes noves tècniques. Com a resum, hi ha dos problemes diferents que hem estat discutint aquí:

+ + + +

Hem arribat al final de tot, dels mòduls Multimedia i incrustació! L'única cosa que fer ara, abans de seguir endavant, és provar la vostra avaluació multimèdia i veure com us va. Diverteix-te.

+ +

Veure

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/index.html" new file mode 100644 index 0000000000..43e0e89c91 --- /dev/null +++ "b/files/ca/learn/html/multim\303\250dia_i_incrustar/index.html" @@ -0,0 +1,75 @@ +--- +title: Multimèdia i incrustar +slug: Learn/HTML/Multimèdia_i_incrustar +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - SVG + - Video + - iframes + - imagemaps + - responsive +translation_of: Learn/HTML/Multimedia_and_embedding +--- +
+
Multimèdia i incrustar
+
+ +

{{LearnSidebar}}

+ +

Hem vist una gran quantitat de text fins ara en aquest curs. Molt. de. text. Però la web seria molt avorrida sense res més que el text, de manera que anem a començar a buscar la manera de fer que la web cobri vida, amb un contingut més interessant! Aquest mòdul explora com utilitzar HTML per incloure multimèdia en les pàgines web, incloent-hi les diferents formes en què les imatges poden ser inclosos, i com integrar vídeo, àudio i fins i tot altres pàgines web senceres.

+ +

Requisits previs

+ +

Abans d'iniciar aquest mòdul, s'ha de tenir un coneixement raonable dels conceptes bàsics d'HTML, com s'explica en Introduction to HTML. Si no s'ha treballat a través d'aquest mòdul (o alguna cosa semblant), comenceu a treballar amb ell en primer lloc, i a continuació, tornar!

+ +
+

Nota: Si esteu treballant en un ordinador/tauleta/altre dispositiu els quals no tenen la capacitat de crear els vostres propis arxius, podeu provar (la majoria) els exemples en un programa de codificació en línia, com ara JSBin o Thimble.

+
+ +

Guies

+ +

Aquest mòdul conté els següents articles, que ens portarà a través de tots els fonaments de la incrustació de multimèdia en pàgines web.

+ +
+
Imatges en HTML
+
Hi ha altres tipus de multimèdia a tenir en compte, però és lògic començar amb l'element humil {{htmlelement("img")}}, que s'utilitza per incrustar una imatge en una pàgina web senzilla. En aquest article veurem com utilitzar-lo en profunditat, incloent conceptes bàsics, anotant-ho amb subtítols utilitzant {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.
+
Contingut d'àudio i vídeo
+
A continuació, veurem com utilitzar els elements HTML5 {{htmlelement("video")}} i {{htmlelement("audio")}} per incrustar vídeo i àudio a les pàgines, incloent conceptes bàsics, proporcionant accés a diferents formats d'arxiu a diferents navegadors, afegir títols i subtítols, i com afegir alternatives per als navegadors antics.
+
De <object> a <iframe> — altres tecnologies d'incrustació
+
En aquest punt ens agradaria fer un petit pas al costat, mirant a un parell d'elements que permeten introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}}. <iframe>s són per incrustar en altres pàgines web, i els altres dos permeten incrustar arxius PDF, SVG, i fins i tot flash - una tecnologia que està en camí de desapareixa, però que encara es veu semi-regularment.
+
Afegir gràfics vectorials a la Web
+
+

Els gràfics vectorials poden ser molt útils en certes situacions. A diferència dels formats habituals com PNG/JPG, que no es distorsionen/pixelen quan s'acostan - poden romandre suaus quan s'escalen. Aquest article és una introducció al que són vectors gràfics, i com incloure el popular format {{glossary("SVG")}} en pàgines web.

+
+
Imatges responsive
+
Amb tants tipus de dispositius differerents capaços de navegar per la web - des de telèfons mòbils als ordinadors d'escriptori - un concepte essencial per dominar en el món web modern és el disseny sensible. Això es refereix a la creació de pàgines web que poden canviar de forma automàtica les seves característiques per adaptar-se a diferents mides de pantalla, resolucions, etc. Això es veurà amb més detall en un mòdul CSS més endavant, però per ara mirem les eines HTML que tenim a disposició per crear imatges sensibles, incloent l'element {{htmlelement("picture")}}.
+
+ +

Avaluació

+ +

Les següents avaluacions posaran a prova la comprensió dels conceptes bàsics HTML coberts en les guies anteriors.

+ +
+
Pàgina de benvinguda de Mozilla
+
En aquesta avaluació, posarem a prova el coneixement d'algunes de les tècniques descrites en els articles d'aquest mòdul, aconseguir afegir algunes imatges i vídeo a una pàgina de benvinguda de moda, tot sobre Mozilla!
+
+ +

Veure

+ +
+
Afegir un hitmap a la part superior d'una imatge
+
Els mapes d'imatge proporcionen un mecanisme perquè les diferents parts d'una imatge enllaci a diferents llocs (pensem en un mapa, a través del qual amb els enllaços obtenim més informació sobre cada pais en clicar-los.) Aquesta tècnica pot ser útil a vegades.
+
Conceptes bàsics d'alfabetització Web 2
+
+

Un excel·lent curs de la fundació Mozilla que explora i posa a prova algunes de les habilitats parlades en el mòdul Multimèdia i incrustació. Busseig profund en la composició bàsica de les pàgines web, disseny per l'accessibilitat, compartint recursos, utilitzant els medis en línia, i el treball obert.

+
+
diff --git "a/files/ca/learn/html/multim\303\250dia_i_incrustar/mozilla_p\303\240gina_de_benvinguda/index.html" "b/files/ca/learn/html/multim\303\250dia_i_incrustar/mozilla_p\303\240gina_de_benvinguda/index.html" new file mode 100644 index 0000000000..71e1d3426e --- /dev/null +++ "b/files/ca/learn/html/multim\303\250dia_i_incrustar/mozilla_p\303\240gina_de_benvinguda/index.html" @@ -0,0 +1,109 @@ +--- +title: Mozilla pàgina de benvinguda +slug: Learn/HTML/Multimèdia_i_incrustar/Mozilla_pàgina_de_benvinguda +tags: + - Assessment + - Beginner + - CodingScripting + - Embedding + - HTML + - Images + - Multimedia + - Video + - iframe + - picture + - responsive + - sizes + - srcset +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +

En aquesta avaluació, posarem a prova els vostres coneixements d'algunes de les tècniques descrites en els articles d'aquest mòdul, fent que afegiu algunes imatges i vídeos a una pàgina, amb un toc de moda, tot sobre Mozilla!

+ + + + + + + + + + + + +
Requisits Previs:Abans d'intentar aquesta avaluació ja hauria d'haver treballat el mòdul Multimedia i incrustació.
Objectiu:Posar a prova els coneixements al voltant de la incrustació d'imatges i de vídeo en pàgines web, marcs i tècniques d'imatge sensible HTML.
+ +

Punt de partida

+ +

Per començar aquesta avaluació, s'ha de agafar l'HTML i totes les imatges disponibles en el directori mdn-splash-page-start en github. Desar el contingut d'index.html en un arxiu anomenat index.html en la unitat local, en un nou directori. A continuació, desar pattern.png en el mateix directori (botó dret del ratolí sobre la imatge per obtenir l'opció de guardar-lo).

+ +

Accedir a les diferents imatges en el directori de les originals i guardar-les de la mateixa manera; voldreu guardar-les en un directori diferent, per ara, ja que necessitareu manipular-les (algunes) usant un editor de gràfics abans de que estiguin llestes per ser utilitzades.

+ +
+

Nota: L'arxiu HTML d'exemple conté un bon munt de CSS, l'estil de la pàgina. No cal tocar el CSS, només l'HTML dins de l'element {{htmlelement("body")}} - sempre que s'insereix el marcat correcte, l'estil farà que es vegi correcte.

+
+ +

Project brief

+ +

En aquesta avaluació presentem una pàgina de benvinguda de Mozilla gairebé acabada, que pretén dir alguna cosa agradable i interessant sobre el que representa Mozilla, i proporcionar alguns enllaços a altres recursos. Malauradament, no s'han afegit imatges o vídeos - aquesta és la vostre feina! Cal afegir alguns medis perquè la pàgina es vegi bé i tingui més sentit. Les següents subseccions detallan el que s'ha de fer:

+ +

Preparar imatges

+ +

Usar l'editor d'imatges favorit, per crear versions de 400px d'ample i 120px d'ample:

+ + + +

Anomenar-les d'una manera sensata, per exemple, firefoxlogo400.png i firefoxlogo120.png.

+ +

Juntament amb mdn.svg, aquestes imatges seran les vostres icones per enllaçar a altres recursos, dins l'àrea d'informació addicional. També s'enllaçarà el logo de Firefox a la capçalera del lloc. Desar les còpies de tot això dins el mateix directori que index.html.

+ +

A continuació, crear una versió apaïsada de 1200 píxels d'ample de red-panda.jpg, i una versió retrat de 600px d'ample que mostri el panda en un primer pla. Una vegada més, anomenar-les d'una manera sensata perquè puguin se identificades fàcilment. Guardar una còpia de tots dues dins del mateix directori que index.html.

+ +
+

Nota: S'han de optimitzar les imatges JPG i PNG perquè siguin el més petites possible, mentre encara es vegin bé. tinypng.com és un gran servei per fer això fàcilment.

+
+ +

Afegir un logo a la capçalera

+ +

Dins de l'element {{htmlelement("header")}}, afegir un element {{htmlelement("img")}} que incrustar la petita versió del logo de Firefox a la capçalera.

+ +

Afegir un vídeo al continut principal del article

+ +

Just dins de l'element {{htmlelement("article")}} (a sota de l'etiqueta d'obertura), incrustar el vídeo de YouTube trobat en https://www.youtube.com/watch?v=ojcNcvb1olg, utilitzant les eines adequades de YouTube per generar el codi. El vídeo ha de ser 400 px d'ample.

+ +

Afegir imatges sensibles als enllaços d'informació addicional

+ +

Dins de {{htmlelement("div")}} amb la classe further-info, troben quatre elements {{htmlelement("a")}} - cada un dels enllaços amb pàgines interessants relacionades amb Mozilla. Per completar aquesta secció haurem de inserir un element {{htmlelement("img")}} dins de cada un d'ells que continguin els atributs apropiats {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}}.

+ +

En tots els casos (excepte un - quin és inherentment sensible?) volem que el navegador serveixi la versió de 120px d'ample quan l'amplada de la finestra gràfica sigui 480px d'ample o menys, o la versió de 400px d'amplada d'altra manera.

+ +

Assegurar-se de fer coincidir les imatges correctes amb els vincles correctes!

+ +
+

Nota: Per provar correctament els exemples srcset/sizes, es necessita pujar el lloc a un servidor (usant pàgines Github pages és una solució fàcil i lliure), a continuació, a partir d'aquí es pot comprovar si s'està treballant adequadament utilitzant les eines de desenvolupador del navegador, com es detalla en les imatges sensibles: eines útils per a desenvolupadors.

+
+ +

Un art dirigit panda vermell

+ +

Dins de {{htmlelement("div")}} amb la classe red-panda, volem inserir un element {{htmlelement("picture")}} que serveixi d'imatge de petit retrat del panda si la finestra gràfica és de 600px d'ample o menys, i la imatge apaïsada, gran, al contrari.

+ +

Exemple

+ +

Les següents captures de pantalla mostren la pàgina de benvinguda que ha de ser similar després d'haver estat marcada correctament, en una àmplia i estreta visualització de la pantalla.

+ +

A wide shot of our example splash page

+ +

A narrow shot of our example splash page

+ +

Avaluació

+ +

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al professor/tutor per evaluar. Si sou d'auto-aprenentatge, llavors es pot obtenir la guia d'evaluació faciliment preguntan a la llista de correu dev-mdc o al canal d'IRC #mdn en Mozilla IRC. Proveu el primer exercici - no hi ha res a guanyar amb trampa!

+ +

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

diff --git "a/files/ca/learn/html/taules_html/avaluaci\303\263_estructurar_les_dades_dels_planeta/index.html" "b/files/ca/learn/html/taules_html/avaluaci\303\263_estructurar_les_dades_dels_planeta/index.html" new file mode 100644 index 0000000000..15d583607f --- /dev/null +++ "b/files/ca/learn/html/taules_html/avaluaci\303\263_estructurar_les_dades_dels_planeta/index.html" @@ -0,0 +1,79 @@ +--- +title: 'Avaluació: Estructurar les dades dels planeta' +slug: Learn/HTML/Taules_HTML/Avaluació_Estructurar_les_dades_dels_planeta +tags: + - Assessment + - Beginner + - CodingScripting + - HTML + - Learn + - Tables +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

En la nostra avaluació de la taula, proporcionarem algunes dades sobre els planetes del nostre sistema solar, per  obtenir una estructura en una taula HTML.

+ + + + + + + + + + + + +
Requisits Previs:Abans de procedir a aquesta avaluació ja s'hauria d'haver treballat a través de tots els articles d'aquest mòdul.
Objectiu:Posar a prova la comprensió de les taules HTML i funcions associades.
+ +

Punt de partida

+ +

Per obtenir aquesta avaluació començarem per fer còpies locals de blank-template.html, minimal-table.css i planets-data.txt en un nou directori a l'equip local.

+ +
+

Nota: Com a alternativa, es pot utilitzar un lloc com JSBin o Thimble per fer l'avaluació. Es pot fer enganxant el codi HTML, CSS i JavaScript en un d'aquests editors en línia. Si l'editor en línia que s'utilitza no té panells  separats de JavaScript/CSS, lliurament es poden posar en línia amb els elements <script>/<style> dins de la pàgina HTML.

+
+ +

Resum del projecte

+ +

Estem treballant en una escola; actualment els estudiants estan estudiant els planetes del nostre sistema solar, i volem proporcionar-los un conjunt fàcil de seguiment de dades per buscar dades i xifres sobre els planetes. Una taula de dades HTML seria ideal - cal prendre les dades en brut que tenim disponibles i convertir-les en una taula, seguint els passos a continuació.

+ +

La taula d'acabada ha de tenir aquest aspecte:

+ +

+ +

També es pot veure el exemple en viu aquí (sense mirar el codi font - no enganyar!)

+ + + +

Passos per completar

+ +

Els següents passos descriuen el que s'ha de fer per completar la taula d'exemple. Totes les dades que es necessitan estan contingudes en l'arxiu planets-data.txt. Si hi ha problemes per visualitzar les dades, mirar l'exemple viu de dalt, o tractar de dibuixar un diagrama.

+ +
    +
  1. Obrir la còpia blank-template.html i començar la taula per fora, donant-li un recipient exterior, una capçalera i un cos de taula. No cal un peu de taula per a aquest exemple.
    2. +
  2. Afegir el títol proporcionat a la taula.
    3. +
  3. Afegir una fila a la capçalera de la taula que contingui tots els encapçalats de columna.
    4. +
  4. Crear totes les files de contingut dins del cos de la taula, sense oblidar de fer tots els encapçalats de les files en encapçalats semàntics.
    5. +
  5. Assegureu-vos que tot el contingut s'insereix en les cel·les correctes - amb les dades en brut, cada fila de dades del planeta s'ha de mostrar al costat del seu planeta associat.
    6. +
  6. Afegir atributs per fer que les capçaleres de fila i columna estiguin inequívocament associades a les files, columnes o grups de files que actuen com capçaleres.
    7. +
  7. Afegir una vora negre al voltant de la columna que conté tots els encapçalats de fila dels noms del planetes
    8. +
+ +

Consells i suggeriments

+ + + +

Avaluació

+ +

Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al treball al vostre professor/tutor per avaluar-ho. Si és d'auto-aprenentatge, llavors es pot obtenir la guia d'avaluació facilment preguntan a la llista de correu dev-mdc o al canal d'IRC #mdn en Mozilla IRC. Proveu el primer exercici - no hi ha res a guanyar amb trampes!

+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git a/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html b/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html new file mode 100644 index 0000000000..f21f6fd3ca --- /dev/null +++ b/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html @@ -0,0 +1,618 @@ +--- +title: Fonaments de la taula HTML +slug: Learn/HTML/Taules_HTML/Fonaments_de_la_taula_HTML +tags: + - Article + - Beginner + - CodingScripting + - HTML + - Learn + - Tables + - basics + - cell + - col + - colgroup + - colspan + - header + - row + - rowspan +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Aquest article ens ajuda a començar amb les taules HTML, n’exposa els conceptes bàsics com ara les files i cel·les, les capçaleres, les cel·les que ocupen diverses columnes i files, i la manera d’agrupar totes les cel·les d'una columna per a propòsits d'estil.

+ + + + + + + + + + + + +
Requisits previs:Fonaments d'HTML (consulta la Introducció a l’HTML).
Objectiu:Familiaritzar-se amb les taules HTML.
+ +

Què és una taula?

+ +

Una taula és un conjunt estructurat de dades compost de files i columnes (dades tabulars). Una taula permet buscar de manera ràpida i fàcil valors que indiquen algun tipus de connexió entre els diferents tipus de dades, per exemple, una persona i la seva edat, o un dia de la setmana, o l’horari d'una piscina municipal.

+ +

Una taula de mostra que presenta els noms i les edats d'algunes persones: Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

Un exemple de taula de dades que presenta l'horari d'una piscina

+ +

Les taules s'utilitzen amb molta freqüència en la nostra societat, i hi estan des de fa molt de temps, com ho demostra aquest document del cens dels EUA de 1800:

+ +

Un document en pergamí molt antic en què les dades no es llegeixen amb facilitat, però presenta clarament l'ús d'una taula de dades.

+ +

Per tant, no és estrany que els creadors de l'HTML proporcionessin un mitjà d’estructurar i presentar dades tabulars per al web.

+ +

Com funciona una taula?

+ +

La característica d'una taula és que és rígida. La informació és fàcil d'interpretar a partir d’associacions visuals entre les capçaleres de les files i les columnes. Mira la taula que hi ha a continuació i busca ungegant de gas amb 62 llunes. Trobes la resposta associant els encapçalaments de fila i columna corresponents.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomMassa (1024 kg)Diàmetre (km)Densitat (kg/m3)Gravetat (m/s2)Duració del dia (hores)Distància del Sol (106km)Temperatura mitja (°C)Número de llunesObservacions
Planetes terrestresMercuri0,3304.8795.4273,74.222,657,91670El més proper al Sol
Venus4,8712.1045.2438,92.802,0108,24640
La Terra5,9712.7565.5149,824,0149,6151El nostre planeta
Mart0,6426.7923.9333,724,7227,9-652El planeta vermell
Planetas joviansGegants de gasJúpiter1.898142.9841.32623,19,9778,6-11067El planeta més gran
Saturn568120.5366879,010,71.433,5-14062
Gegants de gelUrà86,851.1181.2718,717,22.872,5-19527
Neptú10249.5281.63811,016,14.495,1-20014
Planetes nansPlutó0,01462.3702.0950,7153,35.906,4-2255Desclassificat como planeta el 2006, pero encara és una qüestió polèmica.
+ +

Quan es fa correctament, fins i tot les persones cegues poden interpretar les dades tabulades en una taula HTML; una taula HTML ben feta hauria de millorar l'experiència dels usuaris sense discapacitats i amb discapacitats per igual.

+ +

Aplicar estil a una taula

+ +

A GitHub pots trobar l'exemple en viu. Observa que la taula que hi trobaràs és llegible; això és perquè la taula que apareix més amunt té uns estils mínims, mentre que la de GitHub té força més CSS aplicat.

+ +

No ens enganyem; perquè les taules siguin eficaces en web s'ha de proporcionar alguna informació d'estil amb CSS, així com una bona estructura sòlida amb HTML. En aquest mòdul ens centrem en la part HTML; si vols saber coses sobre la part CSS, pots visitar el nostre article Aplicar estil a les taules quan acabis d’aquí.

+ +

En aquest mòdul no ens centrarem en el CSS, però et proporcionem un full d'estil CSS de mínims perquè l’usis per fer les taules més llegibles que amb els valors per defecte que s'obtenen sense afegir cap tipus d'estil. Pots trobar el full d'estil aquí i també hi pots trobar una plantilla HTML on aplicar el full d'estil; tot plegat et donarà un bon punt de partida per a experimentar amb taules HTML.

+ +

Quan NO s’han d’usar taules HTML?

+ +

Les taules HTML s'han d'utilitzar per a presentar dades tabulades; estan dissenyades per a això. Malauradament, molta gent utilitza taules HTML per a fer disseny de pàgines web; per exemple, una fila per a contenir la capçalera, una fila per a contenir les columnes de contingut, una fila per a contenir el peu de pàgina, etc. En pots trobar més detalls i un exemple en l’article Disseny de pàgines web en el nostre mòdul d'aprenentatge de l'accessibilitat. Això es feia servir sovint perquè la compatibilitat CSS dels navegadors solia ser molt precària; avui dia els dissenys de pàgines web amb taules són molt menys comuns, però encara se’n poden veure en alguns racons de la xarxa web.

+ +

En resum, l'ús de taules per al disseny de pàgines web en lloc de les tècniques de disseny CSS és una mala idea. Les raons principals són les següents:

+ +
    +
  1. El disseny de pàgines web amb taules redueixen l'accessibilitat dels usuaris amb discapacitats visuals: Els lectors de pantalla que fan servir les persones amb discapacitat visual interpreten les etiquetes d’una pàgina HTML i en llegeixen el contingut a l'usuari. Com que les taules no són l'eina adequada per al disseny de pàgines web i l’etiquetatge és més complex que amb les tècniques de disseny CSS, la sortida pels lectors de pantalla serà confusa per a aquests usuaris.
    2. +
  2. El disseny de pàgines web amb taules genera una sopa d'etiquetes: Com s’ha dit, els dissenys de pàgines web amb taules en general involucren estructures d’etiquetatge més complexes que les tècniques de disseny adequades. Això pot generar un codi més difícil d'escriure, mantenir i depurar.
    3. +
  3. Les taules no tenen adaptabilitat automàtica: Quan s'utilitzen esquemes de contenidors adequats (com ara {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} o {{htmlelement("div")}}), els valors per defecte de les amplades són el 100% de la de l’element pare. En canvi, les taules estan dimensionades per defecte d'acord amb el contingut que inclouen, de manera que calen mesures addicionals per a aconseguir aplicar estils de disseny de taula que funcionin de manera eficient en una varietat de dispositius.
    4. +
+ +

Aprenentatge actiu: Crea la teva primera taula

+ +

Hem parlat de prou teoria sobre les taules; ara ens cabussarem en un exemple pràctic i construirem una taula senzilla.

+ +
    +
  1. En primer lloc, fes una còpia local de blank-template.html i minimal-table.css en un directori nou del teu equip local.
    2. +
  2. El contingut de cada taula està delimitat per aquestes dues etiquetes: <table></table>. Afegeix-les al cos del teu codi HTML.
    3. +
  3. El contenidor més petit que hi ha dins d'una taula és una cel·la de taula, que es crea amb un element <td> ('td' ve de table data, 'dades de la taula'). Afegeix el següent entre les etiquetes de la teva taula: + 
    <td>Hi, I'm your first cell.</td>
    +
    4. +
  4. Si vols fer una fila de quatre cel·les, has de copiar aquestes etiquetes tres vegades més. Actualitza els continguts de la teva taula perquè et quedi així: + 
    <td>Hi, I'm your first cell.</td>
+<td>I'm your second cell.</td>
+<td>I'm your third cell.</td>
+<td>I'm your fourth cell.</td>
    +
    5. +
+ +

Observa que les cel·les no es col·loquen l’una sota de l'altra, sinó que s'alineen automàticament les unes amb les altres a la mateixa fila. Cada element <td> crea una sola cel·la, i totes juntes formen la primera fila. Cada cel·la que afegeixes fa la fila més llarga.

+ +

Per evitar que aquesta fila continuï creixent i començar a col·locar les cel·les següents en una segona fila, hem d'utilitzar l'etiqueta <tr> ('tr' ve de table raw, ’fila de taula'). Ara explicarem això.

+ +
    +
  1. Col·loca les quatre cel·les que has creat entre etiquetes <tr>, d’aquesta manera: + + 
    <tr>
+  <td>Hi, I'm your first cell.</td>
+  <td>I'm your second cell.</td>
+  <td>I'm your third cell.</td>
+  <td>I'm your fourth cell.</td>
+</tr>
    +
    2. +
  2. Ja has creat una fila, ara intenta fer-ne una o dues més; cada fila ha d’estar etiquetada en un element <tr> addicional, i cada cel·la ha d’estar continguda entre etiquetes <td>.
    3. +
+ +

Això hauria de donar com a resultat una taula, com la que es veu a continuació:

+ + + + + + + + + + + + + + + + +
Hi, I'm your first cell.I'm your second cell.I'm your third cell.I'm your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.
+ +
+

Nota: També la pots trobar a GitHub, com simple-table.html (i també pots consultar-la en l’exemple en viu).

+
+ +

Afegeix capçaleres amb elements <th>

+ +

Ara centrem la nostra atenció en les capçaleres de taula; són cel·les especials que van al començament d'una fila o columna i defineixen el tipus de dades que conté la fila o la columna (per exemple, observa les cel·les «Breed» i «Age» en el primer exemple que es mostra en aquest article). Per a il·lustrar per què són útils, dona una ullada a la taula d'exemple següent. Primer, el codi d’origen:

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Breed</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Owner</td>
+    <td>Mother-in-law</td>
+    <td>Me</td>
+    <td>Me</td>
+    <td>Sister-in-law</td>
+  </tr>
+  <tr>
+    <td>Eating Habits</td>
+    <td>Eats everyone's leftovers</td>
+    <td>Nibbles at food</td>
+    <td>Hearty eater</td>
+    <td>Will eat till he explodes</td>
+  </tr>
+</table>
+ +

Ara, la representació de la taula:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone's leftoversNibbles at foodHearty eaterWill eat till he explodes
+ +

El problema és que, encara que pots anar intuint què passa aquí, fer el creuament de les dades no resulta tan fàcil com podria ser. Seria molt millor si les capçaleres de la columna i de la fila destaquessin d'alguna manera.

+ +

Aprenentatge actiu: capçaleres de taula

+ +

Intentem millorar aquesta taula.

+ +
    +
  1. En primer lloc, fes una còpia local dels fitxers dogs-table.html i minimal-table.css en un directori nou del teu equip local. L'HTML conté el mateix exemple Dogs que has vist abans.
    2. +
  2. Perquè les capçaleres de taula es reconeguin com capçaleres, tant visualment com semànticament, pots utilitzar l'element <th> ('th' ve de table header, 'capçalera de taula'). Funciona exactament de la mateixa manera que un element <td>, però denota una capçalera, que no és una cel·la normal. Entra al codi HTML i canvia tots els elements <td> que delimiten les cel·les de capçalera de la taula per elements <th>.
    3. +
  3. Desa l'HTML i carrega’l en un navegador; ara hauria de mostrar les cel·les de capçalera amb aspecte de capçaleres.
    4. +
+ +
+

Nota: En GitHub pots trobar el nostre exemple acabat en dogs-table-fixed.html (i també el pots consultar en l’exemple en viu).

+
+ +

Per què són útils les capçaleres?

+ +

Ja hem respost parcialment aquesta pregunta; quan busques dades, resulta més fàcil trobar-les quan les capçaleres destaquen clarament i el disseny es veu més bé en general.

+ +
+

Nota: Les capçaleres de les taules venen amb un estil per defecte fins i tot quan no afegeixes el teu estil de taula propi, perquè destaquin: el text està en negreta i centrat.

+
+ +

Les capçaleres de les taules també presenten un altre avantatge: juntament amb l'atribut scope (que veurem en l’article següent), fa les taules més accessibles perquè cada capçalera s’associa amb totes les dades de la mateixa fila o columna. Els lectors de pantalla són capaços de llegir tota una fila o tota una columna de dades alhora, i això és força útil.

+ +

Cel·les que ocupen diverses files i columnes

+ +

A vegades volem que les cel·les abastin diverses files o columnes. Prenguem l’exemple senzill següent, que mostra uns quants noms d’animals comuns. Volem que en alguns casos es mostrin els noms dels mascles i els de les femelles al costat del nom de l'animal, però d’altres vegades no ho volem, sinó que volem que el nom de animal abasti tota l’amplada de la taula.

+ +

L’etiquetatge inicial és el següent:

+ +
<table>
+  <tr>
+    <th>Animals</th>
+  </tr>
+  <tr>
+    <th>Hippopotamus</th>
+  </tr>
+  <tr>
+    <th>Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th>Crocodile</th>
+  </tr>
+  <tr>
+    <th>Chicken</th>
+    <td>Cock</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+ +

Però la sortida no ens dona exactament el que volem:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenCock
Rooster
+ +

Necessitem una manera d'aconseguir que «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes, i «Horse» i «Chicken» ocupin més de dues files cap avall. Afortunadament, les capçaleres de taula i les cel·les tenen els atributs colspan i rowspan, que ens permeten fer precisament aquestes coses. Totes dues propietats accepten per valor un nombre sense unitats, que és igual al nombre de files o columnes que es vol abastar. Per exemple, colspan="2" fa que una cel·la ocupi dues columnes.

+ +

Utilitzem colspan i rowspan per a millorar aquesta taula.

+ +
    +
  1. En primer lloc, fes una còpia local dels fitxers animals-table.html i minimal-table.css en un directori nou del teu equip local. L'HTML conté el mateix exemple amb animals que has vist abans.
    2. +
  2. A continuació, utilitza colspan perquè «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes.
    3. +
  3. Finalment, utilitza rowspan perquè «Horse» i «Chicken» ocupin dues files.
    4. +
  4. Desa el codi i obre’l en el navegador per a veure com millora.
    5. +
+ +
+

Nota: En GitHub pots trobar el nostre exemple acabat en animals-table-fixed.html (també el pots consultar en l’exemple en viu).

+
+ + +
+ +

Aplicar a les columnes un estil comú

+ +

Abans de continuar endavant, en aquest article explicarem una darrera característica. HTML té un mètode per a definir la informació d'estil per a tota una columna de dades en un sol lloc; es tracta dels elements <col> i <colgroup>. Aquests elements existeixen perquè pot ser una mica empipador i ineficient haver d'especificar l'estil de les columnes; en general, la informació d'estil s'ha d'especificar per a cada <td> o <th> de la columna, o s’ha d’utilitzar un selector complex com {{cssxref(":nth-child()")}}.

+ +

Considerem l’exemple següent:

+ +
<table>
+  <tr>
+    <th>Data 1</th>
+    <th style="background-color: yellow">Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td style="background-color: yellow">Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Ens dona el resultat següent:

+ + + + + + + + + + + + + + + + +
Data 1Data 2
CalcuttaOrange
RobotsJazz
+ +

Això no és l'ideal, perquè hem de repetir la informació d'estil en les tres cel·les de la columna (probablement en un projecte real tindríem un conjunt de classes en totes tres i l'estil especificat en un full d'estil separat). En comptes d’això, podem especificar la informació una vegada en un element <col>. Els elements <col> s'especifiquen dins d'un contenidor <colgroup> just a sota de l'etiqueta d'obertura <table>. Podem crear el mateix efecte que veiem a dalt si especifiquem la nostra taula de la següent manera:

+ +
<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+    <th>Data 1</th>
+    <th>Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td>Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

De fet, hem definit dues «columnes d'estil», una que especifica la informació d'estil per a cadascuna de les columnes. No volem aplicar estil a la primera columna, per això encara hem d'incloure un element en blanc <col>; si no ho fem, l'estil s'aplicarà justament a la primera columna.

+ +

Si volem aplicar la informació d'estil a totes dues columnes, podem incloure un element <col> que inclogui un atribut span, com aquest:

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Igual que colspan i rowspan, span pren un valor numèric sense unitats que especifica el nombre de columnes a les quals volem aplicar l'estil.

+ +

Aprenentatge actiu: colgroup i col

+ +

Ara és el moment de fer-ho tu mateix.

+ +

A continuació pots veure l'horari d'una professora d'idiomes. Divendres té una classe nova d'ensenyament d'holandès durant tot el dia, però també fa classes d’alemany algunes hores el dimarts i el dijous. Vol que destaquin les columnes dels dies que fa classes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MonTuesWedThursFriSatSun
1st periodEnglishGermanDutch
2nd periodEnglishEnglishGermanDutch
3rd periodGermanGermanDutch
4th periodEnglishEnglishDutch
+ +

Tornar a crear la taula seguint aquests passos:

+ +
    +
  1. En primer lloc, fes una còpia local de l'arxiu timetable.html en un directori nou del teu equip local. L'HTML conté la mateixa taula que hem vist abans, menys la informació de les columnes d'estil.
    2. +
  2. Afegeix un element <colgroup> a la part superior de la taula, just a sota de l'etiqueta <table>, en què afegirem els elements <col>.
    3. +
  3. No apliquem cap estil a les dues primeres columnes.
    4. +
  4. Afegim un color de fons a les columnes segona i tercera. El valor de l'atribut style és background-color:#97DB9A;
    5. +
  5. Establim una amplada de separació en la quarta columna. El valor de l'atribut style és width: 42px;
    6. +
  6. Afegim un color de fons a la cinquena columna. El valor de l'atribut style és background-color:#97DB9A;
    7. +
  7. Afegim un color de fons diferent, més una vora, a la sisena columna, per a indicar que és un dia especial perquè dona una classe nova. Els valors de l'atribut style són background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. Els dos últims dies són dies lliures; el valor de l'atribut style és width: 42px;
    9. +
+ +

Continua tu amb l'exemple i a veure com et va. Si t’encalles o vols revisar-lo, pots trobar la nostra versió en GitHub com timetable-fixed.html (també el pots consultar en l’exemple en viu).

+ +

Resum

+ +

Amb això concloem gairebé els conceptes bàsics de les taules HTML. En l’article següent veurem algunes característiques una mica més avançades de les taules i començarem a pensar en l'accessibilitat per a les persones amb discapacitat visual.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
diff --git a/files/ca/learn/html/taules_html/index.html b/files/ca/learn/html/taules_html/index.html new file mode 100644 index 0000000000..add81f874e --- /dev/null +++ b/files/ca/learn/html/taules_html/index.html @@ -0,0 +1,45 @@ +--- +title: Taules HTML +slug: Learn/HTML/Taules_HTML +tags: + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - Landing + - Module + - Tables +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Una tasca molt comuna en HTML és estructurar dades tabulars, té una sèrie d'elements i atributs per a aquest propòsit. Juntament amb una mica de CSS per el disseny, HTML fa que sigui fàcil de visualitzar taules d'informació a la web, com ara el pla de lliçó de l'escola, els horaris a la piscina del lloc, estadístiques sobre els dinosaures favorits o equip de futbol. Aquest mòdul us porta a través de tot el que es necessita saber sobre l'estructuració de dades tabulars utilitzant HTML.

+ +

Requisits previs

+ +

Abans d'iniciar aquest mòdul, ja hauria d'haver cobert els conceptes bàsics d'HTML - vegeu Introducció a HTML.

+ +
+

Nota: Si es treballa en un ordinador/tauleta/altre dispositiu el qual no té la capacitat de crear els vostres propis arxius, es pot portar a terme (la majoria) els exemples amb un programa de codificació en línia, com ara JSBin o Thimble.

+
+ +

Guies

+ +

Aquest mòdul conté els següents articles:

+ +
+
Taules HTML bàsiques
+
+

Aquest article ens ajudarà a començar amb les taules HTML, que cobreix els conceptes més bàsics com ara files i cel·les, encapçalats, fent que les cel·les abastin múltiples columnes i files, i com agrupar totes les cel·les d'una columna per a propòsits d'estil.

+
+
Taules HTML característiques avançades i accessibilitat
+
En el segon article d'aquest mòdul, ens fixarem en algunes de les característiques més avançades de les taules HTML - com llegendes/resums i agrupament de files en la taula, seccions de cos i peu - així com l'accessibilitat de les taules per als usuaris amb discapacitat visual.
+
+ +

Avaluació

+ +
+
Estructuració de dades dels planetes
+
En la nostra avaluació de la taula, us proporcionarem algunes dades sobre els planetes del nostre sistema solar i aconseguir una estructura dins d'una taula HTML.
+
diff --git "a/files/ca/learn/html/taules_html/taula_html_caracter\303\255stiques_avan\303\247ades_i_laccessibilitat/index.html" "b/files/ca/learn/html/taules_html/taula_html_caracter\303\255stiques_avan\303\247ades_i_laccessibilitat/index.html" new file mode 100644 index 0000000000..69b7edf725 --- /dev/null +++ "b/files/ca/learn/html/taules_html/taula_html_caracter\303\255stiques_avan\303\247ades_i_laccessibilitat/index.html" @@ -0,0 +1,462 @@ +--- +title: 'Taules HTML: característiques avançades i accessibilitat' +slug: Learn/HTML/Taules_HTML/Taula_HTML_característiques_avançades_i_laccessibilitat +tags: + - Accessibility + - Advanced + - Article + - Beginner + - CodingScripting + - HTML + - Headers + - Learn + - caption + - nesting + - scope + - sumary + - table + - tbody + - tfoot + - thead +translation_of: Learn/HTML/Tables/Advanced +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +

En el segon article d'aquest mòdul ens fixem en algunes de les característiques més avançades de les taules HTML, com ara les llegendes/resums i l'agrupament de files en seccions de capçalera, cos i peu de taula, i en l'accessibilitat de les taules per als usuaris amb discapacitat visual.

+ + + + + + + + + + + + +
Requisits previs:Fonaments d'HTML (consulta la Introducció a l’HTML).
Objectiu:Aprendre les característiques més avançades de les taules HTML i qüestions d'accessibilitat de les taules.
+ +

Afegir un títol a la taula amb <caption>

+ +

Pots donar a la taula una títol, que es posa dins d'un element {{htmlelement("caption")}} que està imbricat dins de l'element {{htmlelement("table")}}. Aquest títol s'ha de posar just sota l'etiqueta d'obertura <table>.

+ +
<table>
+  <caption>Dinosaurs in the Jurassic period</caption>
+
+  ...
+</table>
+ +

Com es pot deduir del breu exemple anterior, el títol està destinat a contenir una descripció del contingut de la taula. Això és útil per a tots els lectors que volen tenir una idea ràpida de si la taula els és útil a partir de donar una ullada a la pàgina, però ho és en particular per als usuaris cecs perquè, en lloc d’haver-se d’esperar que el lector de pantalla llegeixi el contingut de moltes cel·les per a esbrinar quina informació proporciona la taula, podran decidir a partir del títol si llegeixen la taula amb més detall.

+ +

Un títol es col·loca directament sota l'etiqueta <table>.

+ +
+

Nota: Per a proporcionar una descripció també pots utilitzar l'atribut {{htmlattrxref("summary","table")}} en l'etiqueta <table>, que els lectors de pantalla també poden llegir. Tanmateix, et recomanem que empris l'element <caption>, perquè l’atribut {{htmlattrxref("summary","table")}} està {{glossary("desaprovat")}} per l'especificació HTML 5, i a més els usuaris vidents no el poden llegir (no apareix a la pàgina).

+
+ +

Aprenentatge actiu: Afegir un títol

+ +

Tornem al primer exemple de l'article anterior i observem com es fa això.

+ +
    +
  1. Obre l’exemple de la taula horària de la professora d'idiomes del final de l’article Fonaments bàsics de les taules HTML, o fes una còpia local de l'arxiu timetable-fixed.html
    2. +
  2. Afegeix un títol adequat a la taula.
    3. +
  3. Desa el codi i obre’l en el navegador, i observa com es veu.
    4. +
+ +
+

Nota: Pots trobar a GitHub la nostra versió del fitxer timetable-caption.html; i també el pots consultar en l’exemple en viu).

+
+ +

Afegir estructura amb <thead>, <tfoot> i <tbody>

+ +

A mesura que l’estructura de les taules es fa més complexa, és útil aprofundir en la definició estructural. Una manera clara de fer això és amb l'ús de {{htmlelement("thead")}}, {{htmlelement("tfoot")}} i {{htmlelement("tbody")}}, que et permeten etiquetar les seccions de capçalera, peu i cos de la taula.

+ +

Aquests elements no fan la taula més accessible als usuaris de lectors de pantalla, i no proporcionen cap millora visual, però són molt útils per a l'aplicació d’estil i el disseny de pàgina web perquè actuen com «ganxos» amb què s’afegeix CSS a la taula. Podem esmentar com a exemples interessants que es repeteixin en cada pàgina impresa la capçalera i el peu de pàgina d’una taula molt llarga, o que el cos de la taula es mostri en una sola pàgina i el contingut disponible es pugui desplaçar amunt i avall.

+ +

Per a utilitzar aquests elements cal tenir en compte el següent:

+ + + +
+

Nota: <tbody> sempre s'inclou implícitament en totes les taules, si no s'especifica en el codi. Per comprovar-ho, obre un dels exemples anteriors que no inclogui <tbody> i observa el codi HTML amb les eines de desenvolupador del navegador; observa que el navegador hi ha afegit aquesta etiqueta. Et podries demanar per què molestar-nos a incloure-la; s’ha de fer, perquè ens proporciona més control sobre l’estructura de la taula i l'estil.

+
+ +

Aprenentatge actiu: afegir estructura a la taula

+ +

Posarem aquests elements nous en acció.

+ +
    +
  1. Primer de tot, fes una còpia local de spending-record.html i minimal-table.css en una carpeta nova.
    2. +
  2. Obre’l en un navegador; observa que no està malament, però es podria millorar. La fila «SUM» conté una suma de les quantitats que s’han gastat i no sembla que estigui en el lloc adequat, i falten alguns detalls de codi.
    3. +
  3. Posa les capçaleres òbvies de fila dins d'un element <thead>, la fila «SUM» dins d'un element <tfoot>, i la resta del contingut dins d'un element <tbody>.
    4. +
  4. Desa i actualitza, i observa que en afegir l'element <tfoot> la fila «SUM» s’ha col·locat a la part inferior de la taula.
    5. +
  5. A continuació, afegeix un atribut {{htmlattrxref("colspan","td")}} perquè la cel·la «SUM» ocupi les quatre primeres columnes, de manera que el nombre aparegui a la part inferior de la columna «Cost».
    6. +
  6. Afegeix una mica d'estil extra a la taula i observa la utilitat d’aplicar CSS a aquests elements. Observa que en la capçalera (head) del document HTML hi ha un element {{htmlelement("style")}} buit. Afegirem dins d'aquest element les línies de codi CSS següents: + 
    tbody {
+  font-size: 90%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+
    +
    7. +
  7. Desa i actualitza, i dona una ullada al resultat. Si els elements <tbody> i <tfoot> no estan a lloc, serà molt més complicat escriure selectors/regles i aplicar-los el mateix estil.
    8. +
+ +
+

Nota: No esperem que entenguis del tot el CSS en aquest moment. N’aprendràs més en els nostres mòduls dedicats al CSS (Introducció al CSS és un bon lloc per on començar; també hi ha un article concret sobre aplicar estil a les taules).

+
+ +

La taula acabada ha de presentar un aspecte semblant a aquest:

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 300) }}

+ +
+

Nota: Pots trobar el fitxer a GitHub com spending-record-finished.html (i també consultar l’exemple en viu).

+
+ +

Taules imbricades

+ +

És possible imbricar una taula dins d'una altra, sempre que s'hi inclogui l'estructura completa, que inclou l'element <table>. No és en aconsellable en general perquè dona un marcatge més confús i menys accessible als usuaris de lectors de pantalla, i perquè en molts casos es pot resoldre afegint cel·les/files/columnes addicionals a la taula d’origen. Això no obstant, de vegades és necessari, per exemple, per a importar contingut fàcilment d'altres fonts.

+ +

El marcatge següent mostra una imbricació de taules senzilla:

+ +
<table id="table1">
+  <tr>
+    <th>title1</th>
+    <th>title2</th>
+    <th>title3</th>
+  </tr>
+  <tr>
+    <td id="nested">
+      <table id="table2">
+        <tr>
+          <td>cell1</td>
+          <td>cell2</td>
+          <td>cell3</td>
+        </tr>
+      </table>
+    </td>
+    <td>cell2</td>
+    <td>cell3</td>
+  </tr>
+  <tr>
+    <td>cell4</td>
+    <td>cell5</td>
+    <td>cell6</td>
+  </tr>
+</table>
+ +

La sortida presenta aquest aspecte:

+ + + + + + + + + + + + + + + + + + + +
title1title2title3
+ + + + + + + + +
cell1cell2cell3
+ 		cell2cell3
cell4cell5cell6
+ +

Taules per a usuaris amb discapacitats visuals

+ +

Recapitulem breument sobre com la manera de fer servir les taules de dades. Una taula pot ser una eina molt útil perquè ens dona un accés ràpid a les dades i ens permet buscar-hi valors. Per exemple, només cal un cop d'ull breu a la taula de sota per a esbrinar quants anells es van vendre a Gant (Gent) l'agost passat. Per a entendre la informació, fem associacions visuals entre les dades i les capçaleres de les files i columnes d'aquesta taula.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Items Sold August 2016
ClothesAccessories
TrousesSkirtsDressesBraceletsRings
BelgiumAntwerp5622437223
Gent4618506115
Brussels5127386928
The NetherlandsAmsterdam8934698538
Utrecht8012433619
+ +

Però... i si no pots fer associacions visuals? Com es pot llegir una taula com l'anterior, llavors? Les persones que tenen alguna discapacitat visual sovint utilitzen lectors de pantalla que els llegeixen la informació de les pàgines web. Això no és cap problema quan es llegeix text sense format, però la interpretació d'una taula pot ser tot un repte per a una persona cega. Tanmateix, amb el marcatge adequat, les associacions visuals es poden substituir per unes de programàtiques.

+ +

En aquesta secció de l'article t'oferim tècniques que confereixen a les taules una accessibilitat màxima.

+ +

Utilitza capçaleres per a les files i les columnes

+ +

Els lectors de pantalla identifiquen totes les capçaleres i les utilitzen per a fer associacions programàtiques entre les capçaleres i les cel·les amb què es relacionen. La combinació de les capçaleres de les files i les columnes identifica i interpreta les dades que hi ha en cada cel·la perquè l'usuari lector de pantalla pugui interpretar la taula de manera similar a com ho fa un usuari sense discapacitats visuals.

+ +

Ja hem exposat les capçaleres en l’article anterior; consulta Afegir capçaleres amb elements <th>.

+ +

L'atribut scope

+ +

Un tema nou d'aquest article és l'atribut {{htmlattrxref("scope","th")}}, que s’afegeix a l'element <th> i informa els lectors de pantalla exactament de quines cel·les són capçalera les cel·les de capçalera; per exemple, la capçalera és de la fila o de la columna en què es troba? Si tornem enrere al nostre exemple de registre de despeses, les capçaleres de columna es podrien definir sense ambigüitats com capçaleres de columna de la manera següent:

+ +
<thead>
+  <tr>
+    <th scope="col">Purchase</th>
+    <th scope="col">Location</th>
+    <th scope="col">Date</th>
+    <th scope="col">Evaluation</th>
+    <th scope="col">Cost (€)</th>
+  </tr>
+</thead>
+ +

I cada fila podria tenir una capçalera definida de la mateixa manera (si afegíssim capçaleres a les files, a més de les capçaleres de columna):

+ +
<tr>
+  <th scope="row">Haircut</th>
+  <td>Hairdresser</td>
+  <td>12/09</td>
+  <td>Great idea</td>
+  <td>30</td>
+</tr>
+ +

Els lectors de pantalla reconeixen un marcatge estructurat com aquest i permeten als usuaris llegir tota una columna o tota una fila alhora, per exemple.

+ +

scope té dos valors possibles més; colgroup i rowgroup. S'utilitzen per als títols que es col·loquen a la part superior de diverses columnes o files. Si tornem enrere a la taula d’exemple dels articles venuts l’agost del 2016 (Items Sold August 2016) que hi ha al començament d'aquesta secció de l'article, pots observar que la cel·la «Clothes» fa de capçalera de les cel·les «Trousers», «Skirts» i «Dresses». Totes aquestes cel·les haurien de marcar-se com capçaleres (<th>), però «Clothes» és un títol de nivell superior i defineix els altres tres subtítols. Per tant, «Clothes» ha de tenir un atribut scope="colgroup", mentre que les altres tindrien un atribut scope="col".

+ +

Els atributs id i headers

+ +

Una alternativa a l'ús de l'atribut scope és utilitzar els atributs {{htmlattrxref("id")}} i {{htmlattrxref("headers", "td")}} per a crear associacions entre les capçaleres i les cel·les. La forma en què s'utilitzen és la següent:

+ +
    +
  1. Afegeix un id únic per a cada element <th>.
    2. +
  2. Afegeix un atribut headers per a cada element <td>. Cada atribut headers ha d’incloure una llista dels id de tots els elements <th> que actuen de capçalera per a aquesta cel·la, separats per espais.
    3. +
+ +

Això dona a la taula HTML una definició explícita de la posició de cada cel·la de la taula, definida per les capçaleres de cada columna i de cada fila de què forma part, de manera semblant a un full de càlcul. Perquè funcioni bé, la taula necessita les dues capçaleres, de fila i de columna.

+ +

Tornem al nostre exemple de les despeses; dos fragments anteriors es podrien reescriure així:

+ +
<thead>
+  <tr>
+    <th id="purchase">Purchase</th>
+    <th id="location">Location</th>
+    <th id="date">Date</th>
+    <th id="evaluation">Evaluation</th>
+    <th id="cost">Cost (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Haircut</th>
+  <td headers="location haircut">Hairdresser</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Great idea</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+ +
+

Nota: Aquest mètode crea associacions molt precises entre les capçaleres i les cel·les de dades però utilitza molt més etiquetatge i no deixa gens d’espai per a errors. L'enfocament de scope sol ser prou per a la majoria de les taules.

+
+ +

Aprenentatge actiu: Juga amb l’scope i les capçaleres

+ +
    +
  1. Per a aquest exercici final, et proposem de fer, primer, còpies locals dels fitxers items-sold.html i minimal-table.css, en un directori nou.
    2. +
  2. A continuació, afegeix els atributs scope apropiats per a fer aquesta taula més adequada.
    3. +
  3. Per acabar, fes una altra còpia dels fitxers inicials i millora l’accessibilitat de la taula utilitzant els atributs id i header.
    4. +
+ +
+

Nota: Pots verificar el teu treball comparant-lo amb els nostres exemples acabats, que pots consultar a items-sold-scope.html (o també consultar l’exemple en viu) i items-sold-headers.html (o també consultar l’exemple en viu).

+
+ +

Resum

+ +

Es poden aprendre més coses sobre les taules en HTML, però de fet t’hem proporcionat tot el que et cal saber ara mateix. En aquest punt, pot ser que vulguis aprendre com aplicar estil a les taules HTML; ves a l’article Aplicar estil a les taules.

+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
-- cgit v1.2.3-54-g00ecf