diff options
Diffstat (limited to 'files/ca/learn/html/introducció_al_html')
10 files changed, 3639 insertions, 0 deletions
diff --git a/files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html b/files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html new file mode 100644 index 0000000000..c2bc2d0b0c --- /dev/null +++ b/files/ca/learn/html/introducció_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Familiaritzar-se amb els conceptes bàsics de l’HTML, que es tracten en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Iniciació a l’HTML</a>. Format del text en HTML, que es tracta en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">Fonaments del text HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre com implementar un hipervincle amb eficàcia, i enllaçar diversos fitxers.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_un_hipervincle"><span id="result_box" lang="ca"><span>Què</span> <span>és</span> <span>un hipervincle</span><span>?</span></span></h2> + +<p>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 <em>xarxa</em>; 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")}}).</p> + +<div class="note"> +<p><strong>Nota</strong>: 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).</p> +</div> + +<p>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.</p> + +<p><img alt="Portal de bbc.co.uk, que mostra moltes notícies i també elements de navegació i funcions de menú " src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomia_d’un_enllaç"><span id="result_box" lang="ca"><span>Anatomia</span> <span>d’un</span> <span>enllaç</span></span></h2> + +<p>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 <strong>destinació</strong> o <em><strong>target</strong></em>) que conté l’adreça web on vols que apunti l’enllaç.</p> + +<pre class="brush: html notranslate"><p>I’m creating a link to +<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>. +</p></pre> + +<p>Això ens dóna el següent resultat:</p> + +<p>I’m creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p> + +<h3 id="Afegir_informació_de_suport_amb_<title>">Afegir informació de suport amb <title></h3> + +<p>Un altre atribut que és possible que vulguis afegir als teus enllaços és <code>title</code>; 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> + +<pre class="brush: html notranslate"><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></pre> + +<p>Això ens dona el resultat següent (el títol apareix com un indicador de funció (<em>tooltip</em>) quan passem el cursor per sobre l’enllaç):</p> + +<p>I’m creating a link to <a class="ignore-external" 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> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> 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.</p> +</div> + +<h3 id="Aprenentatge_actiu_Crear_un_exemple_d’enllaç_propi">Aprenentatge actiu: Crear un exemple d’enllaç propi</h3> + +<p>É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 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla inicial</a>).</p> + +<ul> + <li>Dintre del cos de l’HTML, afegeix un o més paràgrafs o altres tipus de contingut que ja coneguis.</li> + <li>Converteix alguns dels continguts en enllaços.</li> + <li>Inclou l’atribut <code>title</code>.</li> +</ul> + +<h3 id="Enllaços_de_nivell_de_bloc">Enllaços de nivell de bloc</h3> + +<p>Com ja s’ha esmentat, pots convertir gairebé qualsevol contingut en un enllaç, fins i tot <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Elements_de_bloc_i_elements_de_l%C3%ADnia">elements de nivell de bloc</a>. Si vols convertir una imatge en un enllaç, només cal que posis la imatge entre les etiquetes <code><a></a></code>.</p> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.org/en-US/"> + <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> +</a></pre> + +<div class="note"> +<p><strong>Nota</strong>: En un proper article t’assabentaràs de molts més aspectes sobre l’ús d’imatges al web.</p> +</div> + +<h2 id="Una_introducció_ràpida_a_les_adreces_URL_i_les_rutes">Una introducció ràpida a les adreces URL i les rutes</h2> + +<p>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ò.</p> + +<p>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 <code>https://www.mozilla.org/en-US/</code>.</p> + +<p>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 <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>L’<strong>arrel</strong> d’aquesta estructura de directoris s’anomena <code>creating-hyperlinks</code>. 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 <code>index.html</code> i un fitxer <code>contacts.html</code>. En un lloc web real, <code>index.html</code> seria la nostra pàgina d’inici o pàgina de destinació.</p> + +<p>També hi ha dos directoris dins del nostre directori arrel: <code>pdfs</code> i <code>projects</code>. Cadascun té a dins un sol fitxer: un fitxer PDF (<code>projecte-brief.pdf</code>) i un fitxer <code>index.html</code>, 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 <code>index.html</code> seria potser la pàgina de destinació principal per a obtenir informació relacionada amb el projecte.</p> + +<ul> + <li> + <p><strong>Mateix directori</strong>: Si dins d’<code>index.html</code> (el nivell superior <code>index.html</code>) vols incloure un hipervincle que apunti a <code>contacts.html</code>, només has d’especificar el nom del fitxer per a establir l’enllaç, perquè és en el mateix directori que el fitxer d’origen. Aleshores, l’URL que utilitzaries seria <code>contacts.html</code>:</p> + + <pre class="brush: html notranslate"><p>Want to contact a specific staff member? +Find details on our <a href="contacts.html">contacts page</a>.</p></pre> + </li> + <li> + <p><strong>Baixar a subdirectoris</strong>: Si vols incloure un hipervincle dins d’<code>index.html</code> (el nivell superior <code>index.html</code>) que apunti a <code>projects/index.html</code>, hauries de desplaçar-te cap avall en el directori <code>projects</code> abans d’indicar el nom del fitxer que vols enllaçar. Això es fa especificant el nom del directori, a continuació, una barra inclinada, i a continuació, el nom del fitxer. De manera que utilitzaries l’URL <code>projects/index.html</code>:</p> + + <pre class="brush: html notranslate"><p>Visit my <a href="projects/index.html">project homepage</a>.</p></pre> + </li> + <li> + <p><strong>Pujar cap als directoris pare</strong>: Si vols incloure un hipervincle dins de <code>projects/index.html</code> que apunti a <code>pdfs/project-brief.pdf</code>, hauries de pujar un nivell en el directori, i després anar avall cap al directori <code>pdf</code>. «Pujar un directori» s’indica amb l’ús de dos punts, <code>..</code>. Per tant, l’URL que utilitzaries seria <code>../pdfs/project-brief.pdf</code>:</p> + + <pre class="brush: html notranslate"><p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Si cal, pots combinar diverses instàncies d’aquestes característiques en adreces URL complexes; per exemple, <code>../../../complex/path/to/my/file.html</code>.</p> +</div> + +<h3 id="Fragments_de_document">Fragments de document</h3> + +<p>És possible enllaçar una part específica d’un document HTML (conegut com un <strong>fragment de document</strong>), 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:</p> + +<pre class="brush: html notranslate"><h2 id="Mailing_address">Mailing address</h2></pre> + +<p>A continuació, per a enllaçar aquest <code>id</code> específic, cal incloure'l al final de l'URL, precedit per un símbol de número o coixinet (#). Per exemple:</p> + +<pre class="brush: html notranslate"><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p></pre> + +<p>Fins i tot pots utilitzar la referència mateixa del fragment del document per a fer un enllaç cap a <em>una altra part del mateix document</em>:</p> + +<pre class="brush: html notranslate"><p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p></pre> + +<h3 id="URL_absoluts_i_relatius">URL absoluts i relatius</h3> + +<p>Dos termes que et trobaràs a la web són l’<strong>URL absolut</strong> i l’<strong>URL relatiu:</strong></p> + +<p><strong>URL absolut</strong>: 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 <code>index.html</code> es carrega en un directori anomenat <code>projects</code> que hi ha dins de l’arrel d’un servidor web, i el domini del lloc web és <code>http://www.example.com</code>, la pàgina estaria disponible en <code>http://www.example.com/projects/index.html</code> (o fins i tot només <code>http://www.example.com/projects/</code>, perquè la majoria dels servidors web cerquen una pàgina de destinació com <code>index.html</code> per carregar-la si no s’especifica a l'URL).</p> + +<p>Un URL absolut sempre apuntarà a la mateixa ubicació, no importa des d’on s’utilitzi.</p> + +<p><strong>URL relatiu</strong>: 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 <code>http://www.example.com/projects/index.html</code> a un fitxer PDF del mateix directori, l’URL només seria el nom del fitxer; per exemple: <code>project-brief.pdf</code>; no cal informació addicional. Si el PDF estigués disponible en un subdirectori dins de <code>projects</code> anomenat <code>pdfs</code>, l’enllaç relatiu seria <code>pdfs/project-brief.pdf</code> (l’URL absolut equivalent seria <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p> + +<p>Un URL relatiu assenyala diferents llocs segons on estigui el fitxer que s’utilitza; per exemple, si movem el nostre fitxer <code>index.html</code> del directori <code>projects</code> a l’arrel del lloc web (el nivell superior, no en altres directoris), l’URL relativa <code>pdfs/project-brief.pdf</code> ara apunta a <code>http://www.example.com/pdfs/project-brief.pdf</code>, no a <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<p>Naturalment, la ubicació de l'arxiu <code>project-brief.pdf</code> i el directori <code>pdfs</code> no canviaran de sobte perquè moguis l'arxiu <code>index.html</code>; això faria que el teu enllaç apunti al lloc equivocat, així que no funcionaria si s'hi fes clic. Cal anar amb compte.</p> + +<h2 id="Les_bones_pràctiques_en_els_enllaços">Les bones pràctiques en els enllaços</h2> + +<p>Hi ha algunes bones pràctiques que és bo de seguir quan es posen enllaços. Vegem quines són.</p> + +<ul> +</ul> + +<h3 id="Fes_servir_un_redactat_clar">Fes servir un redactat clar</h3> + +<p>É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:</p> + +<ul> + <li>Als usuaris de lectors de pantalla els agrada saltar d’enllaç en enllaç per la pàgina, i llegir els enllaços fora del context.</li> + <li>Els motors de cerca utilitzen el text de l’enllaç per a indexar els fitxers de destinació, de manera que és una bona idea incloure paraules clau en el text de l’enllaç per a descriure de manera efectiva què s’enllaça.</li> + <li>Els usuaris que fan una lectura visual de la pàgina, fan un cop d’ull a la pàgina en lloc de llegir-la paraula per paraula, i els ulls se senten atrets per les característiques que es destaquen en la pàgina, com ara els enllaços. Trobaran útil que el text dels enllaços sigui descriptiu.</li> +</ul> + +<p>Vegem-ne un exemple concret:</p> + +<p><span class="short_text" id="result_box" lang="ca">Text d’enllaç <strong>ben</strong> redactat</span>: <a href="https://firefox.com">Download Firefox</a></p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Download Firefox +</a></p></pre> + +<p><span class="short_text" id="result_box" lang="ca"><strong>Text d’enllaç mal</strong> redactat</span>: <a href="https://firefox.com/">Click here</a> to download Firefox</p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Click here +</a> +to download Firefox</p> +</pre> + +<p>Altres consells:</p> + +<ul> + <li>No repeteixis l’URL com a part del text de l’enllaç; els URL es veuen lletjos i el so que generen encara és més lleig quan un lector de pantalla els llegeix lletra per lletra.</li> + <li>No diguis «enllaç» o «enllaços a» en el text de l’enllaç; és només soroll. Els lectors de pantalla avisen que hi ha un enllaç. Els usuaris que fan una lectura visual de la pàgina també saben que hi ha un enllaç perquè els enllaços en general es decoren amb un color diferent i es mostren subratllats (aquesta convenció general no s’ha de trencar, perquè els usuaris hi estan acostumats).</li> + <li>Mantingues l’etiqueta de l’enllaç tan curta com sigui possible, sobretot en enllaços llargs que molesten els usuaris de lectors de pantalla, que han d’escoltar la lectura de tot el text.</li> + <li>Minimitza les instàncies en què múltiples còpies del mateix text enllacen a llocs diferents. Això pot causar problemes pels usuaris de lectors de pantalla, si hi ha una llista d'enllaços sense context etiquetats tots "fes clic aquí", "fes clic aquí", "fes clic aquí".</li> +</ul> + +<h3 id="Utilitza_enllaços_relatius_sempre_que_puguis">Utilitza enllaços relatius sempre que puguis</h3> + +<p>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 <em>mateix lloc web</em> (i fes servir enllaços absoluts quan enllacis a un <em>altre lloc web</em>):</p> + +<ul> + <li>Per començar, resulta molt més fàcil d’analitzar el codi si les URL són relatives perquè en general són molt més curtes que les URL absolutes, i la lectura del codi resulta força més lleugera.</li> + <li>En segon lloc, és més eficient utilitzar URL relatives sempre que sigui possible. Quan utilitzes una URL absoluta, el navegador comença per cercar la ubicació real del servidor en el sistema de noms de domini ({{glossary( "DNS")}}), aleshores va a aquest servidor i cerca el fitxer que s’ha demanat. En canvi, amb una adreça URL relativa el navegador cerca el fitxer que se sol·licita en el mateix servidor. De manera que si utilitzes adreces URL absolutes en lloc d’URL relatives, el teu navegador ha de fer feina extra constantment, i això significa que funciona amb menys eficiència.</li> +</ul> + +<h3 id="Indica_amb_claredat_quan_s’enllacen_recursos_no_HTML">Indica amb claredat quan s’enllacen recursos no HTML</h3> + +<p>Quan enllaces a un recurs que es pot descarregar (com un document PDF o Word) o reproduir en continu (<em>streaming</em>), 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:</p> + +<ul> + <li>Si tens una connexió de poc ample de banda, fas clic en un enllaç i s’inicia una descàrrega de diversos megabytes de manera inesperada.</li> + <li>Si no has aconseguit instal·lar el reproductor de Flash, fas clic en un enllaç i et trobes de cop i volta en una pàgina que requereix Flash.</li> +</ul> + +<p>Observa amb alguns exemples quin tipus de text pots utilitzar aquí:</p> + +<pre class="brush: html notranslate"><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></pre> + +<h3 id="Utilitza_l‘atribut_download_quan_enllacis_a_una_descàrrega">Utilitza l‘atribut <code>download</code> quan enllacis a una descàrrega</h3> + +<p>Quan enllaces a un recurs que s’ha de descarregar en lloc d’obrir-se en el navegador, pots utilitzar l’atribut <code>download</code>, 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:</p> + +<pre class="brush: html notranslate"><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></pre> + +<h2 id="Aprenentatge_actiu_crear_un_menú_de_navegació">Aprenentatge actiu: crear un menú de navegació</h2> + +<p>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.</p> + +<p>Fes còpies locals de les quatre pàgines següents, totes en el mateix directori (consulta també el directori de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navegació del menú d’inici</a> per a la llista completa de fitxers):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>Hauries de:</p> + +<ol> + <li>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.</li> + <li>Convertir cada nom de la pàgina en un enllaç a aquesta pàgina.</li> + <li>Copiar el menú de navegació en cada pàgina.</li> + <li>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.</li> +</ol> + +<p>L’exemple acabat hauria de veure’s més o menys així:</p> + +<p><img alt="Un exemple senzill de menú de navegació HTML, amb els elements inici, imatges, projectes i xarxes socials" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Si t’encalles o no saps si ho has fet bé, pots comprovar la solució en el directori de l’<a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">etiquetatge del menú de navegació</a>.</p> +</div> + +<h2 id="Enllaços_a_correu_electrònic">Enllaços a correu electrònic</h2> + +<p>É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 <code>mailto:</code>.</p> + +<p>En la forma més bàsica i d’ús més comú, un enllaç <code>mailto:</code> simplement indica l’adreça de correu electrònic del destinatari. Per exemple:</p> + +<pre class="brush: html notranslate"><a href="mailto:ningu@mozilla.org">Envia un missatge a ningú</a> +</pre> + +<p>Això genera un enllaç que té aquest aspecte: <a href="mailto:ningu@mozilla.org">Envia un missatge a ningú</a>.</p> + +<p>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.</p> + +<h3 id="Especificar_detalls">Especificar detalls</h3> + +<p>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 <code>mailto:</code> 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.</p> + +<p>Aquí hi ha un exemple que inclou un cc, bcc, assumpte i cos:</p> + +<pre class="brush: html notranslate"><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></pre> + +<div class="note"> +<p><strong>Nota:</strong> Els valors de cada camp han de tenir una codificació URL (és a dir, amb caràcters no imprimibles i espais <a href="http://en.wikipedia.org/wiki/Percent-encoding">percentatge-escapats</a>). També has de tenir en compte l’ús del signe (&), que separa cada camp en la URL <code>mailto:</code>. Aquesta és la notació estàndard d’una consulta URL.</p> +</div> + +<p>Aquí hi ha algunes altres mostres d’URL de <code><code>mailto:</code></code>:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="Sumari">Sumari</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/depurar_html/index.html b/files/ca/learn/html/introducció_al_html/depurar_html/index.html new file mode 100644 index 0000000000..5d8feaea62 --- /dev/null +++ b/files/ca/learn/html/introducció_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Familiaritzar-se amb els fonaments bàsics de l’HTML, que s’expliquen, per exemple, en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Iniciació a l’HTML</a>, <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">Fonaments de text en HTML</a> i <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">Creació d’hipervincles</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td><span id="result_box" lang="ca">Aprendre els conceptes bàsics de la utilització d'eines de depuració per a trobar problemes en HTML. </span></td> + </tr> + </tbody> +</table> + +<h2 id="Depurar_no_fa_por">Depurar no fa por</h2> + +<p>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 <a href="https://www.rust-lang.org/">Rust</a>.</p> + +<p><img alt="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'." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">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ó <code>println!(Hello, world!”);</code> 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.</p> + +<p>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.</p> + +<h2 id="Depuració_amb_HTML">Depuració amb HTML</h2> + +<p>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 <strong>permissiva</strong> que la manera com s'executen els llenguatges de programació, i això és alhora bo i dolent.</p> + +<h3 id="Codi_permissiu">Codi permissiu</h3> + +<p>Què entenem per permissiu? Bé, en general, quan comets algun error de codi, et pots topar amb dos tipus d'error principals:</p> + +<ul> + <li><strong>Errors de sintaxi:</strong> són errors d'ortografia en el codi, que impedeixen que el programa s'executi, igual que l'error en el codi Rust que es mostra a dalt. En general, aquests errors es poden resoldre bé, sempre que estiguem familiaritzats amb les eines adequades i sapiguem què signifiquen els missatges d'error.</li> + <li><strong>Errors lògics</strong>: aquests són errors en què la sintaxi és correcta, però el codi no fa el que vols que faci, sinó que el programa s'executa de manera incorrecta. Sovint, aquests errors són més difícils de corregir que els de sintaxi, perquè no hi ha cap missatge d'error que t’adreci cap a la font de l'error.</li> +</ul> + +<p>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!</p> + +<div class="note"> +<p><strong>Nota</strong>: 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.</p> +</div> + +<h3 id="Aprenentatge_actiu_estudiar_la_permissivitat_del_codi">Aprenentatge actiu: estudiar la permissivitat del codi</h3> + +<p>És hora d'estudiar la naturalesa permissiva del codi HTML per tu mateix.</p> + +<ol> + <li>En primer lloc, fes-te amb una còpia de la nostra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">demostració de depuració</a> 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à <strong>mal format</strong>, en oposició a <strong>ben format</strong>).</li> + <li>A continuació, obre’l en un navegador; veuràs alguna cosa com aquesta: <img alt="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." src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>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 <code>body</code>): + <pre class="brush: html notranslate"><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></pre> + </li> + <li>Fem un repàs dels problemes que hi podem veure: + <ul> + <li>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.</li> + <li>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.</li> + <li>En aquesta secció les etiquetes estan mal imbricades: <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>. No és fàcil saber com s'ha d'interpretar això, a causa del problema anterior.</li> + <li>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.</li> + </ul> + </li> + <li>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 <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Descobreix les eines de desenvolupador del navegador</a>, i després torna.</li> + <li>En l'inspector de DOM pots veure quin aspecte presenta la representació d’aquest etiquetatge: <img alt="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." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>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 <em>haurien de donar</em> el mateix resultat): + <ul> + <li>S’han donat etiquetes de tancament als paràgrafs i elements de llista.</li> + <li>No està clar on s’ha de tancar el primer element <code><strong></code>, de manera que el navegador ha etiquetat cada bloc de text per separat que hi ha fins al final del document amb una etiqueta <code>strong</code>.</li> + <li>El navegador ha resolt la imbricació d’etiquetes incorrecta de la següent manera: + <pre class="brush: html notranslate"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>L'enllaç amb la cometa doble que falta s’ha eliminat del tot. L'últim element de la llista ara presenta aquest aspecte: + <pre class="brush: html notranslate"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="Validació_HTML">Validació HTML</h3> + +<p>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?</p> + +<p>La millor estratègia és començar per executar la pàgina HTML amb el servei de validació d’etiquetatge (<a href="https://validator.w3.org/">Markup Validation Service</a>), 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.</p> + +<p><img alt="La pàgina d’inici del validador d’HTML" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>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.</p> + +<h3 id="Aprenentatge_actiu_validació_d’un_document_HTML">Aprenentatge actiu: validació d’un document HTML</h3> + +<p>Provem-ho amb el nostre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">document de mostra</a>.</p> + +<ol> + <li>En primer lloc, carrega el <a href="https://validator.w3.org/">Markup Validation Service</a> en una de les pestanyes del navegador, si encara no ho has fet.</li> + <li>Ves a la pestanya <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li> + <li>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.</li> + <li>Prem el botó <em>Check</em>.</li> +</ol> + +<p>Això t’ha de donar una llista d'errors i altres dades.</p> + +<p><img alt="Llista dels resultats de la validació HTML del servei de validació d'etiquetatge de W3C " src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="Interpretació_dels_missatges_derror"><span class="short_text" id="result_box" lang="ca">Interpretació dels missatges d'error</span></h4> + +<p>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.</p> + +<ul> + <li>"<span>Consider adding a </span><code>lang</code><span> attribute to the </span><code>html</code><span> start tag to declare the language of this document." [Considera afegir un atribug <code>lang</code> a l'etiqueta d'inici <code>html</code> per declarar l'idioma del document]: No es tracta d'un error, sinó d'una advertència (warning). La <a class="external external-icon" href="https://www.w3.org/International/questions/qa-html-language-declarations" rel="noopener">recomanació</a> és definir sempre l'idioma, i aquest "warning" explica com fer-ho.</span></li> + <li>"End tag <code>li</code> implied, but there were open elements" [Etiqueta final <code>li</code> implícita, però hi havia elements oberts] (2 instàncies): Aquest missatge indica que un element està obert i que s’ha de tancar. L'etiqueta final hi és implícita, però de fet no hi és. La informació de línia/columna apunta a la primera línia després de la línia en què hi hauria d’haver l'etiqueta de tancament, però això ja aquest és un bon indici per veure què falla.</li> + <li>"Unclosed element <code>strong</code>" [“Element <code>strong</code> sense tancar”]: Aquest és molt fàcil d'entendre, un element {{htmlelement("strong")}} està sense tancar i la informació de línia/columna hi apunta directament.</li> + <li>"End tag <code>strong</code> violates nesting rules" [L'etiqueta de tancament <code>strong</code> infringeix les regles d’imbricació]: Aquest missatge assenyala els elements que estan mal imbricats, i la informació de línia/columna assenyala on són.</li> + <li>"End of file reached when inside an attribute value. Ignoring tag" [S'ha arribat al final de l'arxiu sense sortir d'un valor d’atribut. L’etiqueta s’ignora]: Aquest missatge és força críptic; es refereix al fet que hi ha un valor d'atribut que no està correctament format en algun lloc, possiblement prop del final de l'arxiu, perquè en el valor de l'atribut apareix el final de l'arxiu. El fet que el navegador no mostri l'enllaç ens dona una pista de quin element falla.</li> + <li>"End of file seen and there were open elements" [S’ha arribat al final de l'arxiu i hi ha elements oberts]: Aquest missatge és una mica ambigu, però bàsicament es refereix al fet que hi ha elements oberts que s’han de tancar correctament. Els números de línia apunten a les últimes línies de l'arxiu i aquest missatge d'error ve amb una línia de codi que assenyala un exemple d'element obert: + <pre class="notranslate">example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html></pre> + + <div class="note"> + <p><strong>Nota</strong>: Un atribut que no té cometes de tancament pot entendre’s com un element obert perquè la resta del document s’interpreta com el valor de l'atribut.</p> + </div> + </li> + <li>"Unclosed element <code>ul</code>" [Element <code>ul</code> sense tancar]: Aquest missatge no resulta de gaire utilitat perquè l'element {{htmlelement("ul")}} està tancat correctament. L’error es produeix perquè l'element {{htmlelement("a")}} no està tancat perquè no té cometes de tancament.</li> +</ul> + +<p>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.</p> + +<p>Sabràs que has resolt tots els errors quan en la sortida t’aparegui una banda amb el missatge següent:</p> + +<p><img alt="Banda amb el text: "El document valida d'acord amb els esquemes i les restriccions addiconals especificats que verifica el validador"" src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Resum">Resum</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/document_i_estructura_del_lloc_web/index.html b/files/ca/learn/html/introducció_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ó_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Familiaritat amb els conceptes bàsics de l’HTML que s'expliquen en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Iniciació a l’HTML</a>. <span id="result_box" lang="ca"><span>Aplicació de format</span> <span>al text amb HTML</span></span>, que s'explica en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">Fonaments de text amb HTML</a>. Funcionament dels hipervincles, que s'expliquen en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">Crear hipervincles</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a estructurar un document amb etiquetes semàntiques, i elaborar l'estructura d'un lloc web senzill.</td> + </tr> + </tbody> +</table> + +<h2 id="Seccions_bàsiques_dun_document">S<span id="result_box" lang="ca"><span title="Basic sections of a document">eccions bàsiques d'un document</span></span></h2> + +<p>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:</p> + +<dl> + <dt>capçalera (header)</dt> + <dd>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.</dd> + <dt>barra de navegació (navigation bar)</dt> + <dd>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’<a href="/ca/docs/Learn/Accessibility">accesibilitat</a>, perquè els lectors de pantalla poden llegir més bé totes dues característiques si estan separades.</dd> + <dt>contingut principal (main content)</dt> + <dd>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!</dd> + <dt>barra lateral (sidebar)</dt> + <dd>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ó.</dd> + <dt>peu de pàgina (footer)</dt> + <dd>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.</dd> +</dl> + +<p>Un «lloc web típic» podria presentar una estructura semblant a això:</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="HTML_per_a_estructurar_el_contingut">HTML per a estructurar el contingut</h2> + +<p>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 <strong>utilitzar l'element correcte per a la funció correcta</strong>.</p> + +<p>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»?</p> + +<div class="note"> +<p><strong>Nota</strong>: Les persones daltòniques representen al voltant del <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la població mundial</a>. Les persones cegues o amb discapacitats visuals representen aproximadament el 4-5% de la població mundial (el 2012 hi havia <a href="https://ca.wikipedia.org/wiki/Defici%C3%A8ncia_visual">285 milions d'aquest tipus de persones al món</a>, mentre que la població total era de <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">prop de 7.000 milions</a>.)</p> +</div> + +<p>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 <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Fonaments_de_text_HTML#Per_qu%C3%A8_cal_una_estructura">conseqüències de no utilitzar una estructura i una semàntica correctes perquè un element compleixi la funció correcta</a>.</p> + +<p>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:</p> + +<ul> + <li><strong>capçalera: </strong>{{htmlelement("header")}}.</li> + <li><strong>barra de navegació: </strong>{{htmlelement("nav")}}.</li> + <li><strong>contingut principal: </strong>{{htmlelement("main")}}, <span id="result_box" lang="ca"><span>amb</span> <span>diverses</span> <span>subseccions</span> <span>de contingut</span> <span>representades</span> <span>pels elements</span></span> {{HTMLElement("article")}}, {{htmlelement("section")}} i {{htmlelement("div")}}.</li> + <li><strong>barra lateral: </strong>{{htmlelement("aside")}}; <span class="short_text" id="result_box" lang="ca"><span>sovint</span> <span>col·locat dins de l’element</span></span> {{htmlelement("main")}}.</li> + <li><strong>peu de pàgina: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Aprenentatge_actiu_Analitzar_el_codi_del_nostre_exemple">Aprenentatge actiu: Analitzar el codi del nostre exemple</h3> + +<p>L’exemple que hem vist abans està representat pel codi següent (també pots trobar <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">l’exemple en el repositori de GitHub</a>). Observa’l a dalt i fes un cop d’ull a la llista següent per veure quines parts componen quines seccions visibles.</p> + +<pre class="brush: html notranslate"><!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></pre> + +<p>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.</p> + +<h2 id="Els_elements_HTML_de_disseny_amb_més_detall"><span class="short_text" id="result_box" lang="ca"><span>Els elements</span> <span>HTML de disseny</span> <span>amb</span> <span>més</span> <span>detall</span></span></h2> + +<p>É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 <a href="/ca/docs/Web/HTML/Element">referència d’elements HTML</a>. De moment, aquestes són les definicions principals que ens cal comprendre:</p> + +<ul> + <li>{{HTMLElement('main')}} és el contingut <em>particular d'aquesta pàgina</em>. <code><main></code> només es fa servir una vegada per pàgina i es posa directament a dins de l’element {{HTMLElement('body')}}. Per anar bé, no hauria d'estar imbricat dins d'altres elements.</li> + <li>{{HTMLElement('article')}} tanca un bloc de contingut que té sentit per si sol, sense la resta de la pàgina (per exemple, una sola entrada al bloc).</li> + <li>{{HTMLElement('section')}} és similar a <code><article></code>, però és més aviat per mantenir agrupada una sola part de la pàgina, que constitueix una peça amb una funció única (per exemple, un mini mapa, o un conjunt de titulars d'articles i resums). Es considera una bona pràctica començar cada secció amb un <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">títol d’encapçalament</a>; observa també que pots fragmentar cada article (<code><article></code>) en diferents seccions (<code><section></code>), o cada secció (<code><section></code>) en diferents articles (<code><article></code>), segons el context.</li> + <li>{{HTMLElement('aside')}} inclou contingut que no està directament relacionat amb el contingut principal, però pot proporcionar informació addicional que hi estigui relacionada indirectament (entrades del glossari, biografia de l'autor, enllaços relacionats, etc.)</li> + <li>{{HTMLElement('header')}} representa un grup de contingut introductori. Si es tracta d'un element fill de l’element {{HTMLElement('body')}}, defineix la capçalera global d'una pàgina web, però si es tracta d'un element fill d'un element {{HTMLElement('article')}} o d’un element {{HTMLElement('section')}}, defineix una capçalera específica per a aquesta secció (no confonguis això amb els <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Qu%C3%A8_hi_ha_en_el_head_Metadades_en_HTML#Afegir_un_t%C3%ADtol">títols d’encapçalament</a>.)</li> + <li>{{HTMLElement('nav')}} inclou les funcions de navegació principal de la pàgina. A la navegació no anirien enllaços secundaris i d’altres elements.</li> + <li>{{HTMLElement('footer')}} representa un grup de continguts al final d'una pàgina.</li> +</ul> + +<h3 id="Delimitadors_no_semàntics"><span id="result_box" lang="ca"><span>Delimitadors no semàntics</span></span></h3> + +<p>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.</p> + +<p>{{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> + +<pre class="brush: html notranslate"><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></pre> + +<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.</p> + +<p>{{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:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>No és realment un element <code><aside></code>, 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 <code><section></code>, perquè no és part del contingut principal de la pàgina. En aquest cas està molt bé utilitzar un element <code><div></code>. 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.</p> + +<div class="warning"> +<p><strong>Atenció</strong>: Els elements <code>div</code> 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.</p> +</div> + +<h3 id="Salts_de_línia_i_separadors_horitzontals">Salts de línia i separadors horitzontals</h3> + +<p>Dos elements que utilitzaràs de tant en tant i que voldràs conèixer són {{htmlelement("br")}} i {{htmlelement("hr")}}:</p> + +<p><code><br></code> 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> + +<pre class="brush: html notranslate"><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></pre> + +<p>Sense els elements <code><br></code>, el paràgraf es mostraria en una línia llarga (com hem dit abans en el curs, <a href="/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Els_espais_en_blanc_en_HTML">l’HTML ignora la major part dels espais en blanc</a>); amb aquests elements en el codi, el marcatge es mostra així:</p> + +<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> + +<p>Els elements <code><hr></code> 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> + +<pre class="notranslate"><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></pre> + +<p>Seria com això:</p> + +<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 sighed; "better get back to work then", he mused.</p> + +<h2 id="Planificar_un_lloc_web_senzill">Planificar un lloc web senzill</h2> + +<p>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!</p> + +<ol> + <li>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.<img alt="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" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>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. <img alt=" 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." src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>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. <img alt="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" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>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")}}. <img alt="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." src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>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.<img alt="Un mapa del lloc web que mostra les pàgines d'inici, informació específica del país, resultats de cerca, pagament i compres" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Aprenentatge_actiu_crea_el_teu_mapa_de_lloc_web_propi">Aprenentatge actiu: crea el teu mapa de lloc web propi</h3> + +<p>Fes l'exercici anterior per a un lloc web de creació pròpia. De què t’agradaria fer un lloc web?</p> + +<div class="note"> +<p><strong>Nota</strong>: Desa el teu treball en algun lloc; pot ser que el necessitis més endavant.</p> +</div> + +<h2 id="Resum">Resum</h2> + +<p>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.</p> + +<h2 id="Mira_també">Mira també</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Ús de seccions i esquemes</a>: Guia avançada d'elements semàntics HTML5 i algoritme de disseny d'estructures HTML5.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/estructurar_una_pàgina_de_contingut/index.html b/files/ca/learn/html/introducció_al_html/estructurar_una_pàgina_de_contingut/index.html new file mode 100644 index 0000000000..e3481bdc15 --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/estructurar_una_pàgina_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Abans de procedir a aquesta avaluació heu hagut de treballar la resta del curs, amb un èmfasi particular en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Documents i estructura del lloc web</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Posar a prova el coneixement de les estructures de pàgines web, i com representar un esquema de diseny possible en el marcat.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2> + +<p>Per obtenir aquesta avaluació inicial, cal anar i agafar l'<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">arxiu zip que conté tots els recursos per començar</a>. L'arxiu zip conté:</p> + +<ul> + <li>L'HTML que es necessita per afegir el marcat estructural</li> + <li>CSS per l'estil del marcat.</li> + <li>Les imatges que s'utilitzen en la pàgina.</li> +</ul> + +<p>Crear l'exemple en el vostre equip local, o bé, utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> or <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació.</p> + +<h2 id="Resum_del_projecte">R<span class="short_text" id="result_box" lang="ca"><span>esum</span> <span>del projecte</span></span></h2> + +<p>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:</p> + +<ul> + <li>Una capçalera que abasta l'ample complet del lloc que conté el títol principal de la pàgina, el logotip del lloc, i el menú de navegació. El títol i el logotip apareixen un al costat de l'altre una vegada que s'aplica l'estil, i la navegació apareix sota d'aquests dos elements.</li> + <li>Una àrea de contingut principal que conté dues columnes - un bloc principal per contenir el text de benvinguda, i una barra lateral que conté imatges en miniatura.</li> + <li>Un peu de pàgina que conté informació dels drets d'autor i crèdits.</li> +</ul> + +<p>Cal afegir un embolcall adequat per a:</p> + +<ul> + <li>La capçalera</li> + <li>El menú de navegació</li> + <li>El contingut principal</li> + <li>El text de benvinguda</li> + <li>La barra lateral de la imatge</li> + <li>El peu de pàgina</li> +</ul> + +<p>També s'ha de:</p> + +<ul> + <li>Aplicar el CSS, proporcionat,a la pàgina mitjançant l'addició d'una altra element {{htmlelement("link")}} just a sota de l'existent proporcionada a l'inici.</li> +</ul> + +<h2 id="Consells_i_suggeriments"><span id="result_box" lang="ca"><span>Consells</span> <span>i</span> <span>suggeriments</span></span></h2> + +<ul> + <li>Utilitzar el <a href="https://validator.w3.org/">validador HTML de W3C</a> per validar el codi HTML; s'obtenen punts de bonificació si es valida tant com sigui possible (la línia "googleapis" és una línia que s'utilitza per importar fonts personalitzades en la pàgina de Google Fonts service; no valida, pel que no ens hem de preocupar per això.)</li> + <li>No es necessita saber res de CSS per fer aquesta avaluació; només s'ha de posar el CSS proporcionat a l'interior d'un element HTML.</li> + <li>El CSS proporcionat està dissenyat de manera que quan s'afegeixen els elements estructurals correctes per al marcatge, apareixeran en verd a la pàgina representada.</li> + <li>Si us quedeu encallats i no es pot preveure a on posar els elements, sovint, ajuda dibuixar un diagrama de blocs simples del disseny de pàgina, i escriure sobre els elements que cregueu que haurien d'embolicar cada bloc.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p>La següent captura de pantalla mostra un exemple del que la pàgina podria ser després del seu marcatge.</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Avaluació">Avaluació</h2> + +<p>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 <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">fil del discurs de l'àrea d'aprenentatge</a> o al canal d'IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Prova el primer exercici - no hi ha res a guanyar amb trampa!</p> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/fonaments_de_text_html/index.html b/files/ca/learn/html/introducció_al_html/fonaments_de_text_html/index.html new file mode 100644 index 0000000000..fafc49effe --- /dev/null +++ b/files/ca/learn/html/introducció_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Familiaritzar-se amb els elements bàsics de l’HTML, com es tracta en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Inici en HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td><span id="result_box" lang="ca"><span>Aprendre com</span> <span>marcar una</span> <span>pàgina</span> <span>bàsica</span> <span>de text</span> <span>per donar-hi</span> <span>estructura</span> <span>i</span> <span>significat</span> <span>- incloent</span> <span>paràgrafs,</span> <span>capçaleres,</span> <span>llistes</span><span>, destacats</span> <span>i</span> <span>cites.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Conceptes_bàsics_capçaleres_i_paràgrafs">Conceptes bàsics: capçaleres i paràgrafs</h2> + +<p>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.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p> + +<p>El contingut estructurat fa que l'experiència de llegir sigui més fàcil i agradable.</p> + +<p>En HTML, cada paràgraf s’ha de delimitar amb un element {{htmlelement("p")}}, així:</p> + +<pre class="brush: html notranslate"><p>I am a paragraph, oh yes I am.</p></pre> + +<p>Cada títol s’ha de delimitar amb un element de títol:</p> + +<pre class="brush: html notranslate"><h1>I am the title of the story.</h1></pre> + +<p>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; <code><h1></code> representa el títol principal, <code><h2></code> representa un subtítol, <code><h3></code> representa un subsubtítol, i així successivament.</p> + +<h3 id="Implementar_una_estructura_jeràrquica">Implementar una estructura jeràrquica</h3> + +<p>A tall d'exemple, en una història, <code><h1></code> representaria el títol de la història, <code><h2></code> representaria el títol de cada capítol i <code><h3></code> representaria subseccions de cada capítol, i així successivament.</p> + +<pre class="brush: html notranslate"><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></pre> + +<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:</p> + +<ul> + <li>Preferiblement, només has d'utilitzar un únic <code><h1></code> per pàgina; aquest és el títol de nivell superior, i tots els altres se situen per sota d'aquest en la jerarquia.</li> + <li>Assegura’t que utilitzes els títols en l'ordre correcte de la jerarquia. No utilitzis <code><h3></code> per representar subtítols, seguit per <code><h2></code> per representar subsubtítols; no té cap sentit i condueix a resultats estranys.</li> + <li>Dels sis nivells de títols disponibles, no hauries d’utilitzar-ne més de tres per pàgina, llevat que ho creguis de debò necessari. Els documents amb molts nivells (és a dir, una jerarquia profunda en títols) es tornen difícils de manejar i és difícil de navegar-hi. En aquestes ocasions, és recomanable desplegar el contingut en múltiples pàgines, si és possible.</li> +</ul> + +<h3 id="Per_què_cal_una_estructura">Per què cal una estructura?</h3> + +<p>Per respondre a aquesta pregunta, fem una ullada a <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>; 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).</p> + +<p>No obstant això, quan obres el document en el navegador, observa que el text apareix com gran garbuix!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/12972/text-no-formatting.png" style="display: block; height: 420px; margin: 0px auto; width: 594px;"></p> + +<p>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:</p> + +<ul> + <li>Els usuaris que busquen en una pàgina web tendeixen a fer-hi una ullada ràpida per a trobar contingut rellevant, sovint només llegint les capçaleres, per començar (<a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">solen passar molt poc temps en una pàgina web</a>). Si no poden veure res útil en uns pocs segons, és probable que se sentin frustrats i vagin a un altre lloc.</li> + <li>Els motors de cerca que indexen les pàgines consideren el contingut dels títols paraules clau importants, que influeixen en la posició de cerca de les pàgines. Sense títols, la vostra pàgina funcionarà malament en termes d’optimització dels motors de cerca (<em>search engine optimization</em>, o {{glossary( "SEO")}}).</li> + <li>Les persones amb discapacitats visuals greus sovint no llegeixen les pàgines web; en lloc d’això, les escolten. Això es fa amb una aplicació de programari anomenada <a class="external external-icon" href="https://ca.wikipedia.org/wiki/Lector_de_pantalla" title="screen readers">lector de pantalla</a>. Aquesta aplicació proporciona maneres d'obtenir un accés ràpid al contingut del text. Entre les diferents tècniques que s’utilitzen, proporcionen un esquema del document a partir de la lectura dels títols, que permet als usuaris trobar la informació que necessiten ràpidament. Si els títols no estan disponibles, es veuen obligats a escoltar tot el document llegit en veu alta.</li> + <li>Per a aplicar estil al contingut amb {{glossary( "CSS")}} o per a fer-li fer coses interessants amb {{glossary("JavaScript")}}, cal tenir elements que delimitin el contingut rellevant, de manera que CSS/JavaScript els puguin localitzar.</li> +</ul> + +<p>Per tant, hem de donar al nostre contingut un etiquetatge estructural.</p> + +<h3 id="Aprenentatge_actiu_donar_estructura_als_continguts">Aprenentatge actiu: donar estructura als continguts</h3> + +<p>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.</p> + +<p>Si t’equivoques, sempre pots tornar a començar amb el botó de reinici. Si t’encalles, fes clic al botó <em>Mostra la solució</em> per veure la resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">My short story I am a statistician and my name is Trish. + +My legs are made of cardboard and I am married to a fish.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>My short story</h1>\n<p>I am a statistician and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h3 id="Per_què_cal_semàntica">Per què cal semàntica?</h3> + +<p>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!).</p> + +<p>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».</p> + +<pre class="brush: html notranslate"><h1>This is a top level heading</h1></pre> + +<p>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).</p> + +<p>D'altra banda, tu pots fer que qualsevol element sembli un títol de nivell superior. Considera el codi següent:</p> + +<pre class="brush: html notranslate"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre> + +<p>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ó.</p> + +<h2 id="Llistes">Llistes</h2> + +<p>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.</p> + +<h3 id="No_ordenades">No ordenades</h3> + +<p>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.</p> + +<pre class="notranslate">milk +eggs +bread +hummus</pre> + +<p>Totes les llistes no ordenades comencen amb un element {{htmlelement("ul")}} que delimita tots els elements de la llista:</p> + +<pre class="brush: html notranslate"><ul> +milk +eggs +bread +hummus +</ul></pre> + +<p>L'últim pas consisteix a delimitar cada element de la llista amb un element {{htmlelement("li")}} (element de llista):</p> + +<pre class="brush: html notranslate"><ul> + <li>milk</li> + <li>eggs</li> + <li>bread</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Aprenentatge_actiu_etiquetatge_duna_llista_no_ordenada">Aprenentatge actiu: etiquetatge d'una llista no ordenada</h4> + +<p>Modifica l'exemple en viu a continuació per a crear la teva llista HTML no ordenada pròpia.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">milk +eggs +bread +hummus</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> + +<h3 id="Ordenades">Ordenades</h3> + +<p>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:</p> + +<pre class="notranslate">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</pre> + +<p>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 <code><ul></code>:</p> + +<pre class="brush: html notranslate"><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></pre> + +<h4 id="Aprenentatge_actiu_etiquetatge_duna_llista_ordenada">Aprenentatge actiu: etiquetatge d'una llista ordenada</h4> + +<p>Modifica l'exemple en viu a continuació per a crear la teva llista HTML ordenada pròpia.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">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</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> + +<h3 id="Aprenentatge_actiu_etiquetatge_de_la_teva_pàgina_de_receptes">Aprenentatge actiu: etiquetatge de la teva pàgina de receptes</h3> + +<p>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 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> 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.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Quick hummus recipe + + This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. + + Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. + + Ingredients + + 1 can (400g) of chick peas (garbanzo beans) + 175g of tahini + 6 sundried tomatoes + Half a red pepper + A pinch of cayenne pepper + 1 clove of garlic + A dash of olive oil + + Instructions + + Remove the skin from the garlic, and chop coarsely + Remove all the seeds and stalk from the pepper, and chop coarsely + Add all the ingredients into a food processor + Process all the ingredients into a paste + If you want a coarse "chunky" hummus, process it for a short time + If you want a smooth hummus, process it for a longer time + + For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. + + Storage + + Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. + + Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Quick hummus recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> + +<p>Si t’encalles, sempre es pot prémer el botó <em>Mostra la solució</em> o fer un cop d'ull al nostre exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> que trobaràs en el nostre repositori de GitHub.</p> + +<h3 id="Llistes_imbricades">Llistes imbricades</h3> + +<p>É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:</p> + +<pre class="brush: html notranslate"><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> </pre> + +<p>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í:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Torna a l'exemple de l'aprenentatge actiu anterior i modifica la segona llista de la mateixa manera.</p> + +<h2 id="Èmfasi_i_importància">Èmfasi i importància</h2> + +<p>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.</p> + +<h3 id="Èmfasi">Èmfasi</h3> + +<p>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.</p> + +<p>I am glad you weren't late.</p> + +<p>I am <em>glad</em> you weren't <em>late</em>.</p> + +<p>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.</p> + +<p>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> + +<pre class="brush: html notranslate"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> + +<h3 id="Importància_forta">Importància forta</h3> + +<p>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:</p> + +<p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p> + +<p>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> + +<pre class="brush: html notranslate"><p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> + +<p>Pots imbricar etiquetes d’importància i èmfasi les unes dins de les altres, si ho vols:</p> + +<pre class="brush: html notranslate"><p>This liquid is <strong>highly toxic</strong> — +if you drink it, <strong>you may <em>die</em></strong>.</p></pre> + +<h3 id="Aprenentatge_actiu_ser_important!">Aprenentatge actiu: ser important!</h3> + +<p>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.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Important notice</h1> +<p>On Sunday January 9th 2010, a gang of goths were + spotted stealing several garden gnomes from a + shopping center in downtown Milwaukee. They were + all wearing green jumpsuits and silly hats, and + seemed to be having a whale of a time. If anyone + has any information about this incident, please + contact the police now.</p></textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> + +<h3 id="Cursiva_negreta_subratllat..."><span class="short_text" id="result_box" lang="ca"><span>Cursiva,</span> <span>negreta</span><span>, subratllat</span><span>...</span></span></h3> + +<p>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 <strong>elements de presentació</strong> 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.</p> + +<p>HTML5 va redefinir les etiquetes <code><b></code>, <code><i></code> i <code><u></code> amb funcions semàntiques noves, que tanmateix resulten un xic confuses.</p> + +<p>Aquesta és la millor regla d'or: només és apropiat utilitzar <code><b></code>, <code><i></code> o <code><u></code> 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í.</p> + +<ul> + <li>{{HTMLElement('i')}} s'utilitza per a transmetre un significat que tradicionalment s’ha transmès en lletra cursiva: paraules estrangeres, denominacions taxonòmiques, termes tècnics, un pensament...</li> + <li>{{HTMLElement('b')}} s'utilitza per a transmetre un significat que tradicionalment s’ha transmès en lletra negreta: paraules clau, noms de productes, frases importants...</li> + <li>{{HTMLElement('u')}} s'utilitza per a transmetre un significat que tradicionalment s’ha transmès en lletra subratllat: noms propis, faltes d'ortografia...</li> +</ul> + +<div class="note"> +<p>Una advertència amable sobre el subratllat: <strong>la gent associa en gran mesura el subratllat amb els hipervincles</strong>. Per tant, a la web, és millor posar en subratllat només els enllaços. Utilitza l'element <code><u></code> 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:</p> +</div> + +<pre class="brush: html notranslate"><!-- 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></pre> + +<h2 id="Resum">Resum</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/format_de_text_avançat/index.html b/files/ca/learn/html/introducció_al_html/format_de_text_avançat/index.html new file mode 100644 index 0000000000..8163f0b4c3 --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/format_de_text_avançat/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Hi ha molts altres elements en HTML per a la formatació del text, que no hem vist en l'article sobre els <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">elements bàsics de text HTML</a>. 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Familiarització amb els elements bàsics de l’HTML, com es tracten en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">iniciació a l’HTML</a>. Aplicació de format a textos amb HTML, com s'explica en els <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">Elements bàsics de text en HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td><span id="result_box" lang="ca"><span class="alt-edited">Aprendre a utilitzar elements HTML menys coneguts per a etiquetar característiques semàntiques avançades.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Llistes_de_descripció">Llistes de descripció</h2> + +<p>En els elements bàsics de text en HTML, hem fet camí pels <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Fonaments_de_text_HTML#Llistes">elements d’etiquetatge bàsics de les llistes</a> 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:</p> + +<pre class="notranslate">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</pre> + +<p>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:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>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.</p> + +<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> + +<p>Observa que pots tenir múltiples descripcions per a un mateix terme; per exemple:</p> + +<pre class="brush: html notranslate"><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></pre> + +<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 addtional 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> + +<h3 id="Aprenentatge_actiu_etiquetatge_dun_conjunt_de_definicions">Aprenentatge actiu: etiquetatge d'un conjunt de definicions</h3> + +<p>É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..</p> + +<p>Si t’equivoques, sempre pots tornar a començar amb el botó de <em>Reinicia</em>. Si t’encalles, fes clic al botó, <em>Mostra la solució</em> per veure la resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +Bacon +The glue that binds the world together. +Eggs +The glue that binds the cake together. +Coffee +The drink that gets the world running in the morning. +A light brown color.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +const code = textarea.value; +const userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const htmlSolution = '<dl>\n <dt>Bacon</dt>\n <dd>The glue that binds the world together.</dd>\n <dt>Eggs</dt>\n <dd>The glue that binds the cake together.</dd>\n <dt>Coffee</dt>\n <dd>The drink that gets the world running in the morning.</dd>\n <dd>A light brown color.</dd>\n</dl>'; +const solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Citacions">Citacions</h2> + +<p>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.</p> + +<h3 id="Elements_de_bloc_de_citació_blockquotes">Elements de bloc de citació (<em>blockquotes</em>)</h3> + +<p>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 <code><blockquote></code>»:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Per convertir això en una citació de bloc, has de fer això:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>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:</p> + +<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> +<p>L'<strong>element HTML <code><blockquote></code></strong> (<em>o element de bloc de citació HTML</em>) indica que el text associat és una citació extensa.</p> +</blockquote> + +<h3 id="Elements_de_línia_de_citació">Elements de línia de citació</h3> + +<p>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 <code><q></code>:</p> + +<pre class="brush: html notranslate"><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></pre> + +<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ò:</p> + +<p>The quote element — <code><q></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> + +<h3 id="Citacions_2">Citacions</h3> + +<p>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 <code>cite</code> 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 <code>quote</code>. 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 <code><cite></code>:</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Les citacions tenen l'estil en cursiva per defecte.</p> + +<p>{{EmbedLiveSample('Citations', '100%', '179px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<h3 id="Aprenentatge_actiu_Qui_ha_dit_això">Aprenentatge actiu: Qui ha dit això?</h3> + +<p>Temps per a un altre exemple d'aprenentatge actiu! En aquest exemple ens agradaria:</p> + +<ol> + <li>Convertir el paràgraf del mig en un bloc de citació que inclogui un atribut <code>cite</code>.</li> + <li>Convertir una part del tercer paràgraf en una citació de línea que inclogui un atribut <code>cite</code>.</li> + <li>Incloure un element <code><cite></code> per a cada citació</li> +</ol> + +<p>Cerca a Internet per trobar fonts de citacions apropiades.</p> + +<p>Si t’equivoques, sempre pots tornar a l’inici amb el botó de <em>Reinicia</em>. Si t’encalles, fes clic al botó <em>Mostra la solució</em> per veure la resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 150px; width: 95%"> +<p>Hello and welcome to my motivation page. As Confucius' quotes site says:</p> +<p>It does not matter how slowly you go as long as you do not stop.</p> +<p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk (as mentioned in Affirmations for Positive Thinking.)</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +const code = textarea.value; +const userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const htmlSolution = '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius\' quotes site</cite></a> says:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; +const solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="Abreviatures">Abreviatures</h2> + +<p>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> + +<pre class="notranslate"><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></pre> + +<p>Ve a ser una cosa com això (el desenvolupament apareix en un indicador de funció quan passes el cursor per sobre del terme):</p> + +<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> + +<div class="note"> +<p><strong>Nota</strong>: Hi ha un altre element, {{HTMLElement ("acronym")}}, que bàsicament fa el mateix que <code><abbr></code> 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 <code><abbr></code>, 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 <code><abbr></code>.</p> +</div> + +<h3 id="Aprenentatge_actiu_etiquetatge_duna_abreviatura">Aprenentatge actiu: etiquetatge d'una abreviatura</h3> + +<p>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ó. </p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 50px; width: 95%"> +<p>NASA sure does some exciting work.</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +const code = textarea.value; +const userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const htmlSolution = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>'; +const solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p> + +<h2 id="Etiquetatge_de_les_dades_de_contacte">Etiquetatge de les dades de contacte</h2> + +<p>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:</p> + +<pre class="brush: html notranslate"><address> + <p>Chris Mills, Manchester, The Grim North, UK</p> +</address></pre> + +<p>També s'hi pot incloure marcatge més comples, i d'altres formes d'informació de contacte, com ara:</p> + +<pre class="brush: html notranslate line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>address</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + Chris Mills<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> + Manchester<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> + The Grim North<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> + UK + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Tel: 01234 567 890<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Email: me@grim-north.co.uk<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>address</span><span class="punctuation token">></span></span></code></pre> + +<p><span class="tag token"><span class="punctuation token">Fixeu-vos que una cosa com la següent també seria vàlida, si la pàgina enllaçada contingués informació de contacte:</span></span></p> + +<pre class="brush: html notranslate line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>address</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Page written by <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>../authors/chris-mills/<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Chris Mills<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>address</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Superíndex_i_subíndex">Superíndex i subíndex</h2> + +<p>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> + +<pre class="brush: html notranslate"><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></pre> + +<p>La sortida d'aquest codi és com això:</p> + +<p>My birthday is on the 25<sup>th</sup> of May 2001.</p> + +<p>Caffeine'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> + +<h2 id="Representar_codi_informàtic">Representar codi informàtic</h2> + +<p>Hi ha una sèrie d'elements disponibles per a l’etiquetatge de codi informàtic:</p> + +<ul> + <li>{{htmlelement("code")}}: per a etiquetar peces genèriques de codi informàtic.</li> + <li>{{htmlelement("pre")}}: per a etiquetar blocs de text d'amplada fixa, en què es conserven els espais en blanc (en general, blocs de codi)</li> + <li>{{htmlelement("var")}}: per a etiquetar específicament els noms de variables.</li> + <li>{{htmlelement("kbd")}}: per a etiquetar entrades de teclat (i altres tipus d’entrades) a l'ordinador.</li> + <li>{{htmlelement("samp")}}: per a etiquetar la sortida d'un programa d'ordinador.</li> +</ul> + +<p>Vegem-ne uns exemples. Juga amb aquests exemples (fes una còpia del nostre arxiu d'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>El codi anterior es veuria així:</p> + +<p>{{ EmbedLiveSample('Representar_codi_informàtic','100%',300) }}</p> + +<h2 id="Etiquetatge_dhores_i_dates">Etiquetatge d'hores i dates</h2> + +<p>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:</p> + +<pre class="brush: html notranslate"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>></pre> + +<p>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:</p> + +<ul> + <li>20 January 2016</li> + <li>20th January 2016</li> + <li>Jan 20 2016</li> + <li>20/06/16</li> + <li>06/20/16</li> + <li>The 20th of next month</li> + <li><span lang="fr">20e Janvier 2016</span></li> + <li><span lang="ja">2016年1月20日</span></li> + <li><span lang="ja">And so on</span></li> +</ul> + +<p>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 .</p> + +<p>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:</p> + +<pre class="brush: html notranslate"><!-- Standard simple date --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>> +<!-- Just year and month --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>January 2016</<span class="pl-ent">time</span>> +<!-- Just month and day --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 January</<span class="pl-ent">time</span>> +<!-- Just time, hours and minutes --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19:30</<span class="pl-ent">time</span>> +<!-- You can do seconds and milliseconds too! --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19:30:01.856</<span class="pl-ent">time</span>> +<!-- Date and time --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>7.30pm, 20 January 2016</<span class="pl-ent">time</span>> +<!-- Date and time with timezone offset--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 January 2016 is 8.30pm in France</<span class="pl-ent">time</span>> +<!-- Calling out a specific week number--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>The fourth week of 2016</<span class="pl-ent">time</span>></pre> + +<h2 id="Resum">Resum</h2> + +<p>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 <a href="/ca/docs/Web/HTML/Element">referència d'elements HTML</a> (la secció de la <a href="https://wiki.developer.mozilla.org/ca/docs/Web/HTML/Element#Sem%C3%A0ntica_de_text_en_l%C3%ADnia">semàntica de text en línia</a> 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.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/getting_started/index.html b/files/ca/learn/html/introducció_al_html/getting_started/index.html new file mode 100644 index 0000000000..03b70effc6 --- /dev/null +++ b/files/ca/learn/html/introducció_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica, <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a> i coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb arxius</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Familiaritzar-se amb el llenguatge HTML i obtenir una mica de pràctica escrivint elements HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_HTML">Què és HTML?</h2> + +<p>{{glossary("HTML")}} (HyperText Markup Language) no és un llenguatge de programació; és un <em>llenguatge de marcat</em>, 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:</p> + +<pre class="notranslate">My cat is very grumpy</pre> + +<p>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> + +<pre class="brush: html notranslate"><p>My cat is very grumpy</p></pre> + +<h2 id="Anatomia_dun_element_HTML"><span id="result_box" lang="ca"><span>Anatomia</span> <span>d'un</span> <span>element</span> <span>HTML</span></span></h2> + +<p><span id="result_box" lang="ca"><span>Explorem una mica el nostre element paràgraf fins una mica més enllà</span>:</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Les parts principals del nostre element són:</p> + +<ol> + <li><strong>L'etiqueta d'obertura</strong>: Consisteix en el nom de l'element (en aquest cas, p), delimitat amb <strong>claus angulars</strong> 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.</li> + <li><strong>L'etiqueta de tancament</strong>: É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.</li> + <li><strong>El contingut</strong>: És el contingut de l'element, que en aquest cas és només text.</li> +</ol> + +<p>L'element és l'etiqueta d'obertura, seguida del contingut, seguida de l'etiqueta de tancament.</p> + +<h3 id="Aprenentatge_actiu_crea_el_teu_primer_element_HTML">Aprenentatge actiu: crea el teu primer element HTML</h3> + +<p>Edita la línia següent en l'àrea d'<em>entrada</em> delimitant-la amb les etiquetes <code><em></code> i <code></em></code> (posa <code><em></code> abans d'<em>obrir l'element</em>, i <code></em></code> després, per <em>tancar l'element</em>); això hauria de donar una línia en cursiva! Pots veure els canvis actualitzats en viu en l'<em>àrea de sortida</em>.</p> + +<p>Si t’equivoques sempre pots tornar al codi anterior amb el botó de <em>Reinicia</em>. Si et quedes realment encallat, fes clic al botó <em>Mostra la solució</em> per veure la resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> + This is my text. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<em>This is my text.</em>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p> + +<h3 id="Niar_elements">Niar elements</h3> + +<p>També pots posar elements dins d'altres elements; això s’anomena <strong>imbricar</strong>. Si volem afirmar que el nostre gat està de <strong>molt</strong> mal humor, podem delimitar la paraula «molt» amb un element {{htmlelement("strong")}}, que significa que la paraula es destaca amb força:</p> + +<pre class="brush: html notranslate"><p>El meu gast està de <strong>molt</strong> mal humor.</p></pre> + +<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 <code>p</code> i a continuació l'element <code>strong</code>; per tant, hem de tancar l'element <code>strong</code> en primer lloc i l’element <code>p</code> a continuació. Fer el següent és incorrecte:</p> + +<pre class="example-bad brush: html notranslate"><p>El meu gat està <strong>de molt mal humor.</p></strong></pre> + +<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</strong>. 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.</p> + +<h3 id="Elements_de_bloc_i_elements_de_línia">Elements de bloc i elements de línia</h3> + +<p>Hi ha dues categories importants d'elements en HTML, que has de conèixer: els elements de bloc i els elements de línia.</p> + +<ul> + <li>Els elements de bloc formen un bloc visible en una pàgina; apareixen en una línia nova després de qualsevol contingut que en vagi davant, i qualsevol contingut que hi vagi després també apareixerà en una línia nova. Els elements de bloc tendeixen a ser elements estructurals de la pàgina. Representen, per exemple, paràgrafs, llistes, menús de navegació, peus de pàgina, etc. Un element de bloc no es pot imbricar dins d'un element de línia, però pot estar imbricat dintre d'un altre element de bloc.</li> + <li>Els elements de línia estan continguts dins d’elements de nivell de bloc i només delimiten petites parts del contingut del document, no paràgrafs sencers ni agrupacions de contingut. Un element de línia no fa aparèixer una línia nova en el document: normalment apareix dins d'un paràgraf de text, per exemple, un element {{htmlelement("a")}} (hipervincle), o elements d'èmfasi com {{htmlelement("em")}} o {{htmlelement("strong")}}.</li> +</ul> + +<p>Prenguem <span>l'exemple següent:</span></p> + +<pre class="brush: html notranslate"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<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'<a href="/ca/docs/Learn/CSS/First_steps">aplicació d’estil CSS</a> que el navegador aplica als paràgrafs per defecte).</p> + +<p>{{ EmbedLiveSample('Elements_de_bloc_i_elements_de_línia', 700, 200) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: HTML5 va redefinir les categories d'elements en HTML5: vegeu <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Categories d'elements de contingut</a>. 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.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Podeu trobar pàgines de referència útils que inclouen llistes d'elements de bloc i elements de línia; vegeu els <a href="/ca/docs/Web/HTML/Block-level_elements">elements de nivell de bloc</a> i els <a href="/ca/docs/Web/HTML/Elements_en_línia">elements de línia</a>.</p> +</div> + +<h3 id="Elements_buits">Elements buits</h3> + +<p>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:</p> + +<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Aquesta sortida mostraria el següent a la vostra pàgina:</p> + +<p>{{ EmbedLiveSample('Elements_buits', 700, 300) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>Els</span> <span>elements</span> <span>buits</span> </span> també se'ls anomena de vegades <span lang="ca"> <em> (void elements</em>).</span></p> +</div> + +<h2 id="Atributs">Atributs</h2> + +<p>Els elements també poden tenir atributs, que tenen presenten l’aspecte següent:</p> + +<p><img alt='&lt;p class="editor-note">My cat is very grumpy&lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Els atributs contenen informació addicional sobre l'element que no vols que aparegui com a contingut. En aquest cas, l'atribut <code>class</code> 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.</p> + +<p>Un atribut ha de tenir:</p> + +<ol> + <li>Un espai entre ell i el nom de l'element (o l'atribut anterior, si l'element ja té un o més atributs.)</li> + <li>El nom de l'atribut, seguit d'un signe igual.</li> + <li>Un valor d'atribut, amb signes d'obertura i de tancament de cometes que el delimiten</li> +</ol> + +<h3 id="Aprenentatge_actiu_Afegir_atributs_a_un_element">Aprenentatge actiu: Afegir atributs a un element</h3> + +<p>Un altre exemple d'un element és {{HTMLElement ("a")}}; ve d’<em>anchor</em> i delimita la part del text que és un enllaç. Pot prendre un seguit d'atributs, però dos són els següents:</p> + +<ul> + <li><code>href</code>: Aquest atribut especifica, com a valor, l'adreça web que desitgeu que l'enllaç apunti; on el navegador es desplaçarà quan es fa clic a l'enllaç. Per exemple, <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: L'atribut <code>title</code> especifica informació addicional sobre l'enllaç, com quina és la pàgina que estem vinculant. Per exemple, <code>title="La pàgina web de Mozilla"</code>. Això apareixerà com un "tooltip" quan planegem per damunt.</li> + <li><code>target</code>: L'atribut <code>target</code> especifica el context de navegació que es farà servir per mostrar l'enllaç. Per exemple, <code>target="_blank"</code> mostrarà l'enllaç en una pestanya nova. Si vols que l'enllaç es mostri a la pestanya actual, omet l'atribut.</li> +</ul> + +<p>Edita la línia següent en l'àrea <em>Input</em> per convertir-la en un enllaç al teu lloc web favorit.</p> + +<ol> + <li>Afegeix l'element <code><a></code>.</li> + <li>Afegeix l'atribut <code>href</code>, i seguidament l'atribut <code>title</code>.</li> + <li>Especifica l'atribut <code>target</code> per obrir l'enllaç en una nova pestanya.</li> +</ol> + +<p>Observa els canvis actualitzats en directe a l'àrea <em>Output</em>. Hauries de veure un enllaç, que en passar-hi per sobre mostrarà el contingut de l'atribut <code>title</code>, i en clicar-hi, va a l'adreça web de l'element <code>href</code>. Recorda que has d’incloure un espai entre el nom de l'element i cada atribut.</p> + +<p>Si t’equivoques, sempre pots restablir el codi anterior amb el botó de reinici. Si et quedes realment encallat, fes clic al botó <em>Mostra la solució</em> per veure la solució.</p> + +<div class="hidden"> +<h6 id="Codi_executable_2">Codi executable 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;A link to my favorite website.&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Codi_executable_2', 700, 300) }}</p> + +<h3 id="Atributs_booleans">Atributs booleans</h3> + +<p>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,</p> + +<pre class="notranslate"><input type="text" disabled="disabled"></pre> + +<p>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):</p> + +<pre class="brush: html notranslate"><input type="text" disabled> + +<input type="text"> +</pre> + +<p>Tots dos donaran una sortida com la següent:</p> + +<p>{{ EmbedLiveSample('Atributs_booleans', 700, 100) }}</p> + +<h3 id="Ometre_les_cometes_que_delimiten_els_valors_dels_atributs">Ometre les cometes que delimiten els valors dels atributs</h3> + +<p>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 <code>href</code>, així:</p> + +<pre class="notranslate"><a href=https://www.mozilla.org/>favourite website</a> +</pre> + +<p>No obstant això, quan afegim a aquest estil l'atribut <code>title</code>, les coses no funcionen:</p> + +<pre class="brush: html notranslate"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a> +</pre> + +<p>En aquest punt, el navegador ha interpretat malament el marcatge perquè pensa que l'atribut <code>title</code> té en realitat tres atributs: un atribut <code>title</code> amb el valor «The», i dos atributs booleans, <code>Mozilla</code> i <code>homepage</code>. 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!</p> + +<p>{{ EmbedLiveSample('Ometre_les_cometes_que_delimiten_els_valors_dels_atributs', 700, 100) }}</p> + +<p>Inclou sempre les cometes de l'atribut. Evita aquest tipus de problemes, i el codi resulta més llegible.</p> + +<h3 id="Cometes_simples_o_dobles">Cometes simples o dobles?</h3> + +<p>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:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>Però t’has d’assegurar que no es barregen. El codi següent no et funcionarà!</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>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:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>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:</p> + +<pre class="example-bad brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>http://www.example.com<span class="punctuation token">'</span></span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>Isn<span class="punctuation token">'</span></span><span class="attr-name token">t</span> <span class="attr-name token">this</span> <span class="attr-name token">fun?'</span><span class="punctuation token">></span></span>A link to my example.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span></code></pre> + +<p>Així, necessites fer el següent:</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>http://www.example.com<span class="punctuation token">'</span></span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>Isn<span class="entity token" title="'">&#39;</span>t this fun?<span class="punctuation token">'</span></span><span class="punctuation token">></span></span>A link to my example.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Anatomia_dun_document_HTML">Anatomia d'un document HTML</h2> + +<p>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:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Aquí tenim:</p> + +<ol> + <li><code><!DOCTYPE html></code>: El tipus de document. Als inicis, quan HTML era jove (al voltant de 1991/1992), els <code>doctype</code> 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ò: + + <pre class="notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + Avui dia són un llegat històric que cal incloure perquè tot funcioni. <code><!DOCTYPE html></code> é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.</li> + <li><code><html></html></code>: L'element <code><html></code> delimita tot el contingut de la pàgina, i de vegades es coneix com l'element arrel.</li> + <li><code><head></head></code>: L'element <code><head></code> actua com un contenidor de totes les coses que vols incloure a la pàgina HTML, però que <strong>no són el contingut</strong> 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.</li> + <li><code><meta charset="utf-8"></code>: Aquest element especifica que el teu document utilitzarà el conjunt de caràcters <code>UTF-8</code>, 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.</li> + <li><code><title></title></code>: 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.</li> + <li><code><body></body></code>: Inclou <em>tot</em> 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.</li> +</ol> + +<h3 id="Aprenentatge_actiu_Afegir_característiques_a_un_document_HTML">Aprenentatge actiu: Afegir característiques a un document HTML</h3> + +<p>Si vols escriure una mica d'HTML en el teu ordinador local per a experimentar, pots:</p> + +<ol> + <li>Copiar l'exemple de la pàgina HTML que apareix a dalt.</li> + <li>Crear un arxiu nou a l'editor de text.</li> + <li>Enganxar el codi en l’arxiu nou de text.</li> + <li>Desar el fitxer com <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: també pots trobar aquesta plantilla bàsica HTML en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">repositori Github de l’Àrea d’aprenentatge d’MDN</a>.</p> +</div> + +<p>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í:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">En 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 <code><body></code>, en aquest cas). Intenta reproduir els passos següents:</p> + +<ul> + <li>Just a sota de l'etiqueta d'obertura <code><body></code>, afegeix un títol principal per al document. Haurà d’estar delimitat per una etiqueta <code><h1></code> d'obertura i una etiqueta <code></h1></code> de tancament.</li> + <li>Edita el contingut del paràgraf per a incloure-hi un text sobre alguna cosa que t’interessi.</li> + <li>Fes que qualsevol paraula important destaqui en negreta delimitant-la amb d'una etiqueta <code><strong></code> d'obertura i una etiqueta <code></strong</code>> de tancament</li> + <li>Afegeix un enllaç al paràgraf, <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Aprenentatge_actiu_crea_el_teu_primer_element_HTML">com s'ha explicat abans en aquest mateix article</a>.</li> + <li>Afegeix una imatge al document, sota el paràgraf, com <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Elements_buits">s'ha explicat abans en aquest mateix article</a>. Guanyaràs més punts si aconsegueixes enllaçar-lo a una imatge diferent (ja sigui de manera local a l'ordinador, o d’un altre lloc web.)</li> +</ul> + +<p>Si t’equivoques, sempre pots restablir el codi anterior amb el botó Reinicia. Si realment et quedes encallat, fes clic al botó <em>Mostra la solució</em> per veure la solució.</p> + +<div class="hidden"> +<h6 id="Codi_executable_3">Codi executable 3</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;This is my page&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h1 { + color: blue; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +img { + max-width: 100%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Codi_executable_3', 700, 600) }}</p> + +<h3 id="Els_espais_en_blanc_en_HTML">Els espais en blanc en HTML</h3> + +<p>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> + +<pre class="brush: html notranslate"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<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.</p> + +<p>É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.</p> + +<h2 id="Referències_a_entitats_inclusió_de_caràcters_especials_en_HTML">Referències a entitats: inclusió de caràcters especials en HTML</h2> + +<p>En HTML, els caràcters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> i <code>&</code> 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 <em>ampersand</em> (&) o el signe <em>menys que</em> (<), i que els navegadors no l'interpretin com codi?</p> + +<p>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 (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caràcter literal</th> + <th scope="col">Referència de caràcter equivalent</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>En el següent exemple, pots veure dos paràgrafs, que parlen sobre tecnologies web:</p> + +<pre class="brush: html notranslate"><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></pre> + +<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.</p> + +<p>{{ EmbedLiveSample('Referències_a_entitats_inclusió_de_caràcters_especials_en_HTML', 700, 200) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>Un gràfic</span> <span>de totes</span> <span>les</span> <span>referències</span> <span>a entitats</span> <span>de caràcters</span> <span>HTML</span> <span>disponibles, es pot</span> <span>trobar</span> <span>en la Viquipèdia</span></span>: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">Llista de XML i HTML de les referències a entitats de caràcters</a>.</p> +</div> + +<h2 id="Comentaris_HTML">Comentaris HTML</h2> + +<p>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.</p> + +<p>Per a convertir en un comentari una secció de contingut del teu arxiu HTML, l’has de delimitar amb els marcadors especials <code><!--</code> i <code>--></code>. Per exemple:</p> + +<pre class="brush: html notranslate"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></pre> + +<p>Com pots veure a continuació, el primer paràgraf apareix a la sortida en directa, però el segon no ho fa.</p> + +<p>{{ EmbedLiveSample('Comentaris_HTML', 700, 100) }}</p> + +<h2 id="Resum">Resum</h2> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota</strong>: 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 <a href="/ca/docs/Learn/CSS">CSS</a>). 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.</p> +</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/ca/learn/html/introducció_al_html/index.html b/files/ca/learn/html/introducció_al_html/index.html new file mode 100644 index 0000000000..721a2795f5 --- /dev/null +++ b/files/ca/learn/html/introducció_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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">En el fons, {{glossary("HTML")}} és un llenguatge bastant simple compost d'<a href="/en-US/docs/Glossary/Element">elements</a>, 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.</p> + +<h2 id="Requisits_previs">R<span id="result_box" lang="ca"><span>equisits</span> <span>previs</span></span></h2> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instal.lació de programari bàsic</a>, i entendre com crear i administrar arxius, com es detalla en <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Tractar amb arxius</a> — tots dos són parts del nostre mòdul <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Introducció a la web</a> per a principiants.</p> + +<div class="note"> +<p><strong>Nota</strong>: 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.</p> +</div> + +<h2 id="Guies">Guies</h2> + +<p>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.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Introducció a HTML</a></dt> + <dd>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!</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Què hi ha en la capçalera? Metadades en HTML</a></dt> + <dd>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.)</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fonaments de text HTML</a></dt> + <dd>Un dels treballs principals de l'HTML és donar significat al text (també conegut com la <strong>semàntica</strong>), 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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creació d'hipervincles</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Format de text avançat</a></dt> + <dd>Hi ha molts altres elements en HTML per donar format al text, que no vam veure en l'article de <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">fonaments de text HTML</a>. 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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document i estructura del lloc web</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depuració HTML</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Avaluacions">Avaluacions</h2> + +<p>Les següents avaluacions posaran a prova la vostra comprensió dels conceptes bàsics d'HTML coberts en les guies anteriors.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marcatge d'una carta</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Estructuració d'una pàgina de contingut</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Veure_també">Veure també</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Conceptes bàsics d'alfabetització Web 1</a></dt> + <dd>Un excel·lent curs de la fundació Mozilla que explora i posa a prova moltes de les habilitats parlades al mòdul <em>Introducció a HTML</em>. 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ó.</dd> +</dl> diff --git a/files/ca/learn/html/introducció_al_html/marcatge_una_carta/index.html b/files/ca/learn/html/introducció_al_html/marcatge_una_carta/index.html new file mode 100644 index 0000000000..34647eb294 --- /dev/null +++ b/files/ca/learn/html/introducció_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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>.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits Previs:</th> + <td>Abans de procedir amb aquesta avaluació, ja hauríeu d'haver treballat <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Inici en HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Què hi ha en el head? Metadades in HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">fonaments de text HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Crear hipervincles</a>, i <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">format de text avançat</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>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>.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida"><span class="short_text" id="result_box" lang="ca"><span>Punt de partida</span></span></h2> + +<p>Per obtenir aquesta avaluació inicial, cal anar i agafar el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">text sense format que necessiteu per marcar</a>, i el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS que cal incloure</a> en el codi HTML. Crear un nou arxiu <code>.html</code> amb el vostre editor de text per treballar-ho (o, alternativament, utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la avaluació.)</p> + +<h2 id="Resum_del_projecte">R<span id="result_box" lang="ca"><span>esum</span> <span>del projecte</span></span></h2> + +<p>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.</p> + +<p>Bloc/semàntica estructural:</p> + +<ul> + <li>S'ha d'estructurar el document general amb una estructura adequada que inclogui doctype, i els elements {{htmlelement("html")}}, {{htmlelement("head")}} i {{htmlelement("body")}}.</li> + <li>La carta, en general, s'ha de marcar amb una estructura de paràgrafs i encapçalats, amb l'excepció dels següents punts. Hi ha un encapçalat de nivell superior (el "Re:" línia) i tres encapçalats de segon nivell.</li> + <li>Les dates d'inici del semetre, els temes d'estudi i balls exòtics han de ser marcats utilitzant un tipus de llista apropiat.</li> + <li>Les dues direccions només es poden posar dins dels paràgrafs, o es pot utilitzar l'element {{htmlelement("address")}} de manera apropiada; cada línia de la direcció ha de seure en una nova línia, però no ha d'estar en un nou paràgraf.</li> +</ul> + +<p>Semàntica en línia:</p> + +<ul> + <li>S'ha de marcar el contingut del cos amb elements apropiats:</li> + <li>Els noms del remitent i receptor (i "Tel" i "Email") han de ser marcats amb una forta (strong) importància.</li> + <li>Les quatre dates en el document han de tenir els elements adequats que continguin dates llegibles per la màquina.</li> + <li>La primera direcció i la primera data en la carta se li ha de donar un valor d'atribut class de "receiver-column"; la CSS s'afegirà més tard, fent que aquests siguin alineats a la dreta, com hauria de ser en el cas d'un disseny de lletres clàssiques.</li> + <li>Els cinc acrònims/abreviatures en el text principal de la carta s'han de marcar per proporcionar expansió de cada acrònim/abreviatura.</li> + <li>Els sis sub/superíndexs han d'estar marcats de forma apropiada.</li> + <li>Els símbols de grau, major que i multiplicació han de ser marcats usant les referències a entitats apropiades.</li> + <li>Intentar marcar almenys dues paraules apropiades en el text amb una forta (strong) importància/èmfasi.</li> + <li>Hi ha dos llocs en què s'ha d'afegir un hipervincle; afegir enllaços adequats amb els títols. Per la ubicació que els enllaços apunten, només s'ha d'utilitzar http://example.com.</li> + <li>La cita del lema de la universitat i la citació s'han de marcar amb elements apropiats.</li> +</ul> + +<p>La capçalera del document:</p> + +<ul> + <li>El conjunt de caràcters del document s'ha d'especificar com UTF-8 utilitzant la etiqueta meta apropiada.</li> + <li>L'autor de la carta ha de ser especificat en una etiqueta meta apropiada.</li> + <li>El CSS proporcionat ha de ser inclòs dins d'una etiqueta propiada.</li> +</ul> + +<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2> + +<ul> + <li>Utilitzar el <a href="https://validator.w3.org/">validador de W3C HTML</a> per validar el codi HTML; obtindreu punts de bonificació si es valida.</li> + <li>No es necessita saber res de CSS per fer aquesta avaluació; només s'ha de posar el CSS, proporcionat, a l'interior d'un element HTML.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p>La següent captura de pantalla mostra un exemple del que la carta podria ser després del seu marcat.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12291/letter-screengrab.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p> + +<h2 id="Evaluació">Evaluació</h2> + +<p>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 <a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a> o al canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Proveu el primer exercici - no hi ha res a guanyar amb trampa!</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/què_hi_ha_en_el_head_metadades_en_html/index.html b/files/ca/learn/html/introducció_al_html/què_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ó_al_html/què_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Familiaritat amb HTML, respecte dels continguts a <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Inici en HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>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.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_la_capçalera_dHTML">Què és la capçalera d'HTML?</h2> + +<p>Fem un cop d’ull a aquest document HTML senzill <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Anatomia_dun_document_HTML">que ja hem vist en l’article anterior</a>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>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:</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>My test page</title> +</head></pre> + +<p>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 <a href="/en-US/docs/Learn/Discover_browser_developer_tools">eines del desenvolupador</a> 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.</p> + +<h2 id="Afegir_un_títol">Afegir un títol</h2> + +<p>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 (<code>body</code>) del teu document. Això també es coneix de vegades com el títol de la pàgina. Però són coses diferents!</p> + +<ul> + <li>L'element {{htmlelement("h1")}} apareix a la pàgina quan el navegador la carrega. En general, n’hi ha d’haver un per pàgina, per a marcar el títol del contingut de la pàgina (el títol de la història, o el titular de la notícia, o el que escaigui).</li> + <li>L'element {{htmlelement("title")}} és una metadada que representa el títol del document HTML en general (no del contingut del document).</li> +</ul> + +<h3 id="Aprenentatge_actiu_Anàlisi_d’un_exemple_senzill">Aprenentatge actiu: Anàlisi d’un exemple senzill</h3> + +<ol> + <li>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 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html"> title-example.html</a>. Pots fer-ho de diverses maneres: + + <ol> + <li>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.<strong> </strong></li> + <li>Prem el botó «Raw» de la pàgina, selecciona <em>File > Save Page As...</em> del menú del teu navegador, i a continuació escull un lloc per a guardar l'arxiu.</li> + </ol> + </li> + <li>Ara obre l'arxiu al teu navegador. Hauries de veure alguna cosa com això: + <p><img alt="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>." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Ara, hauries de tenir clar on apareix el contingut de l’element <code><h1></code> i on apareix el contingut de <code><title></code>!</p> + </li> + <li>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.</li> +</ol> + +<p>El contingut de l'element <code><title></code> també s'utilitza per a altres coses. Per exemple, quan poses a la pàgina un marcador de pàgina (<em>Bookmarks > Bookmark This Page</em>, en Firefox), observa que el nom que se suggereix com a nom del marcador és el contingut de l’element <code><title></code>.</p> + +<p><img alt="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> " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>El contingut de <code><title></code> també s'utilitza en els resultats de cerca, com es veu a continuació.</p> + +<h2 id="Metadades_lelement_<meta>">Metadades: l'element <code><meta> </code></h2> + +<p>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 <code><meta></code> diferents que es poden incloure en la capçalera (<code><head></code>) 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.</p> + +<h3 id="Especificar_la_codificació_de_caràcters_del_document">Especificar la codificació de caràcters del document</h3> + +<p>En l'exemple que hem vist més amunt, s’hi ha inclòs aquesta línia:</p> + +<pre class="brush: html notranslate"><meta charset="utf-8"></pre> + +<p>Aquest element simplement especifica la codificació de caràcters del document: el conjunt de caràcters que el document pot utilitzar. <code>UTF-8</code> é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:</p> + +<p><img alt="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é," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">En canvi, si configures la teva codificació de caràcters segons <code>ISO-8859-1</code>, per exemple (el conjunt de caràcters de l'alfabet llatí), la representació de la teva pàgina s’esgavellaria del tot:</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<h3 id="Aprenentatge_actiu_Experimentar_amb_la_codificació_de_caràcters">Aprenentatge actiu: Experimentar amb la codificació de caràcters</h3> + +<p>Per provar això, torneu a la plantilla HTML que heu obtingut en l'apartat anterior amb el <code><title></code> (la pàgina <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html"> title-example.html</a>), canvieu el valor <code>charset</code> de <code>meta</code> per la norma <code>ISO-8859-1</code>, i afegiu el japonès a la vostra pàgina. Aquest és el codi que fem servir:</p> + +<pre class="brush: html notranslate"><p>Japanese example: ご飯が熱い。</p></pre> + +<h3 id="Afegir_un_autor_i_una_descripció">Afegir un autor i una descripció</h3> + +<p>Molts elements <code><meta></code> inclouen els atributs <code>name</code> i <code>content</code>:</p> + +<ul> + <li><code>name</code> especifica el tipus d'element <code>meta</code> que és; quin tipus d'informació conté.</li> + <li><code>content</code> especifica el contingut concret de l’element <code>meta</code>.</li> +</ul> + +<p>Aquests dos elements <code>meta</code> 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:</p> + +<pre class="brush: html notranslate"><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."></pre> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, o {{glossary("SEO")}}.)</p> + +<h3 id="Aprenentatge_actiu_La_utilitat_de_la_descripció_per_als_motors_de_cerca">Aprenentatge actiu: La utilitat de la descripció per als motors de cerca</h3> + +<p>Les pàgines de resultats dels motors de cerca també fan servir aquestes descripcions. Vegem-ho amb un exemple.</p> + +<ol> + <li>Ves a la <a href="https://developer.mozilla.org/ca/">pàgina d’inici de The Mozilla Developer Network</a>.</li> + <li>Ves al codi font de la pàgina (botó dret/<kbd>Ctrl</kbd> + clic sobre la pàgina, selecciona l’opció <em>Veure l’origen de la pàgina</em> del menú contextual).</li> + <li>Busca la descripció en l'etiqueta <code>meta</code>. S'assembla a això: + <pre class="brush: html notranslate"><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."></pre> + </li> + <li>Ara busca «Mozilla Developer Network» amb el teu motor de cerca favorit (nosaltres hem fet servir Yahoo). Observa, a partir del contingut dels elements <code><meta></code> i <code><title></code> utilitzats en el resultat de la cerca que, definitivament, paga la pena tenir aquests elements de descripció! + <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: 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 <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a>; és una manera de millorar els resultats de cerca del teu lloc web en el motor de cerca de Google.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Moltes característiques de <code><meta></code> senzillament ja no s'utilitzen. Per exemple, l'element <code><meta></code> de paraules clau (<code><meta name="keywords" content="posa, les, teves, paraules, clau"></code>) , 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 <em>spammers</em> omplien la llista de paraules clau amb centenars de paraules clau que esbiaixaven els resultats.</p> +</div> + +<h3 id="Altres_tipus_de_metadades"><span id="result_box" lang="ca"><span>Altres tipus de</span> <span>metadades</span></span></h3> + +<p>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.</p> + +<p>Per exemple, <a href="http://ogp.me/">Open Graph Data</a> é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ò:</p> + +<pre class="brush: html notranslate"><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"></pre> + +<p>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.</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;"></p> + +<p>Twitter també té metadades propietàries pròpies, les <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards">Twitter Cards</a>, que tenen un efecte similar quan a twitter.com es mostra l’URL del lloc web. Per exemple:</p> + +<pre class="brush: html notranslate"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Afegir_icones_personalitzades_al_teu_lloc_web">Afegir icones personalitzades al teu lloc web</h2> + +<p>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.</p> + +<p>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.</p> + +<p>Pots afegir una icona de web a la teva pàgina així:</p> + +<ol> + <li>La deses en el mateix directori que la pàgina índex del lloc web, en format <code>.ico</code> (la majoria dels navegadors admetem les icones de web en els formats més comuns, com <code>.gif</code> o <code>.png</code>, però si utilitzes el format ICO t’assegures que funciona en navegadors antics com Internet Explorer 6).</li> + <li>Afegeixes al bloc de codi <code><head></code> de l’HTML la línia següent per a fer-hi referència: + <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>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:</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>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ò:</p> + +<pre class="brush: html notranslate"><!-- 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"></pre> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Aplicar_CSS_i_JavaScript_a_HTML">Aplicar CSS i JavaScript a HTML</h2> + +<p>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.</p> + +<ul> + <li> + <p>L'element {{htmlelement("link")}} sempre va dins de la capçalera (<code>head</code>) del document. Pot prendre dos atributs, <code>rel="stylesheet"</code>, que indica que es tracta del full d'estil del document, i <code>href</code>, que conté la ruta d'accés al fitxer del full d'estil:</p> + + <pre class="brush: html notranslate"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p>L'element {{htmlelement("script")}} també hauria d'anar a la capçalera, i hauria d'incloure un atribut <code>src</code> amb la ruta al JavaScript que vols carregar, i <code>defer</code>, que bàsicament li diu al nevegador que carregui el JavaScrpt alhora que l'HTML de la pàgina. Això és útil perquè assegura que l'HTML es carrega abans que s'executi el JavaScript, i així no hi ha errors perquè el JavaScript ha provat d'accedir a un element HTML que encara no existeix. En realitat, hi ha unes quantes maneres de gestionar com es carrega el JavaScript a les vostres pàgines, però aquesta és la més «a prova de bombes» amb els navegadors moderns (per la resta, llegiu <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies">Script loading strategies</a>).</p> + + <pre class="brush: html notranslate"><script src="my-js-file.js"></script></pre> + + <p><strong>Nota</strong>: L'element <code><script></code> pot semblar un element buit, però no ho és, i per tant necessita una etiqueta de tancament. En lloc d'apuntar a un arxiu script extern, també es pot optar per posar el script dins de l'element <code><script></code>.</p> + </li> +</ul> + +<h3 id="Aprenentatge_actiu_Aplicar_CSS_i_JavaScript_a_una_pàgina">Aprenentatge actiu: Aplicar CSS i JavaScript a una pàgina</h3> + +<ol> + <li>Per iniciar aquest aprenentatge actiu, pren una còpia dels arxius <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a>, 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.</li> + <li>Obre el fitxer HTML en el teu navegador i en l’editor de text.</li> + <li>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.</li> +</ol> + +<p>Si ho fas correctament, quan deses el codi HTML i actualitzes el navegador observaràs que les coses han canviat:</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>El JavaScript ha afegit una llista buida a la pàgina. Ara, quan fas clic a qualsevol lloc de la llista, un quadre de diàleg et demana que introdueixis un text per a un element nou a la llista. Quan prems el botó Acceptar, a la llista s'afegeix un element de llista nou que conté aquest text. En fer clic en un element de la llista, un quadre de diàleg et permet canviar el text de l'element.</li> + <li>El CSS ha pintat de verd el fons i ha augmentat la mida del text. També ha aplicat estil a alguns dels continguts que JavaScript ha afegit a la pàgina (la barra vermella amb la vora negra és l'estil del codi CSS que s'ha afegit a la llista que ha generat el JS).</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Si t’encalles amb aquest exercici i no se t’hi apliquen el CSS/JS, revisa la nostra pàgina d'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p> +</div> + +<h2 id="Establir_lidioma_principal_del_document">Establir l'idioma principal del document</h2> + +<p>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'<a href="/ca/docs/Web/HTML/Global_attributes/lang">atribut lang</a> en l'etiqueta d'obertura HTML (com es veu en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>).</p> + +<pre class="brush: html notranslate"><html lang="en-US"></pre> + +<p>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).</p> + +<p>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> + +<pre class="brush: html notranslate"><p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p></pre> + +<p>Aquests codis els defineix la norma <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Pots trobar més informació sobre aquests codis en les <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> |