MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Format de text avançat

This translation is incomplete. Please help translate this article from English.

Hi ha molts altres elements en HTML per el formateig de text, que no vam donar en l'article fonaments de text HTML. Els elements descrits en aquest article són menys coneguts, però encara útils de conèixer (i això encara no és una llista completa, de cap manera.) Aquí aprendreu sobre el marcatge de cites, llistes de descrpció, codi d'ordinador i altres texts relacionats, subíndexs i superíndexs, informació de contacte, i molt més.

Requisits previs: Familiaritat bàsica en HTML, com es tracta en Inici en HTML. format de text HTML, com s'explica en els fonaments de text en HTML.
Objectiu: Per aprendre a utilitzar elements HTML menys coneguts per marcar les característiques semàntiques avançades.

Llistes de descripció

En els fonaments de text HTML, caminem a través de com marcar les llistes bàsiques en HTML, però no 'sesmenta el tercer tipus de llista que opcionalment venen a través de les -  Llistes de Descripció. El propòsit d'aquestes llistes és marcar un conjunt d'elements i les seves descripcions associades, com ara termes i definicions, o preguntes i respostes. Vegem un exemple d'un conjunt de termes i definicions:

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

Les llistes de descripció utilitzen un embolcall diferent dels altres tipus de llistes - <dl>; a més, cada terme és embolicat en un element <dt> (descripció del terme), i cada descripció s'embolica en un element <dd> (descripció descripció). Acabarem el marcat del nostre exemple:

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

Els estils per defecte del navegador mostraran les llistes de descripció amb les descripcions amb una sagnia, en certa mesura, dels termes. Els estils de MDN segueixen aquesta convenció bastant de prop, però també encoratgen els termes per a la definició extra.

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.

Recordeu que es permet tenir un sol terme amb múltiples descripcions, per exemple:

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.
En l'escriptura, una secció de contingut que es relaciona amb el tema actual, però no encaixa directament en el flux principal del contingut, de manera que es presenta al voltant (sovint en una caixa a un costat.)

Aprenentatge actiu: marcat d'un conjunt de definicions

És hora de provar la vostra destresa en les llistes de descripció; afegint elements al text sense format en el camp d'entrada perquè aparegui com una llista de descripció en el camp de sortida. Podreu tractar d'usar els votres propis termes i descripcions si ho desitjeu.

Si cometeu un error, sempre ho podeu restablir amb el botó de Reinici. Si aconseguiu realment encallar-vos, feu clic al botó, Mostra solució, per veure la resposta.

Cites

HTML també té característiques disponibles per al marcatge de cites; quin element s'utilitza, depèn de si s'està marcant un bloc o una cita en línia.

Cites en block (blockquotes)

Si una secció de continguts a nivell de bloc (ja sigui un paràgraf, diversos paràgrafs, una llista, etc.) és citat des d'un altre lloc, ho heu d'envoltar dins d'un element  <blockquote> per significar això, i incloure un URL que apunti a la font de la cita dins d'un atribut cite. Per exemple, la següent línia de codi es pren de la pàgina MDN l'element <blockquote>:

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

Per convertir això en una cita de bloc, hauríem de fer això:

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

El estil per defecte del navegador mostrarà això com un paràgraf sagnat, com un indicador que es tracta d'una cita; MDN fa això, sinó que també afegeix alguna cosa més d'estil:

L'Element  HTML <blockquote> (o Element de cita de Bloc HTML) indica que el text adjunt és una cita estesa.

Cites en línia

Les cites en línia funcionen exactament de la mateixa manera, tret que utilitzen l'element <q>. Per exemple, una mica mes a baix del marcat conté una cita de la pàgina MDN <q>:

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

L'estil per defecte del navegador mostrarà aquest text com una cosa normal posat entre cometes per indicar una cita, com això:

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

Cites

El contingut de l'atribut cite sona útil , però per desgràcia els navegadors, lectors de pantalla, etc., no els agrada fer molt amb ell. No hi ha manera d'aconseguir que el navegador mostri el contingut de cite, sense necessitat d'escriure la seva pròpia solució utilitzant JavaScript o CSS. Si voleu que la font de la cita estigui disponible a la pàgina, la millor manera és marcar-la posant l'element  <cite> al costat de l'element quote. Això serveix realment per contenir el nom de la font de la cita - és a dir, el nom del llibre, o el nom de la persona que va dir la cita - però no hi ha cap raó perquè no es pugui vincular el text dins de <cite> per a la font de la cita, d'alguna manera:

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

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

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

Les cites tenen l'estil en cursiva per defecte. Es pot veure aquest codi en el treball del nostre exemple quotations.html.

Aprenentatge actiu: Qui ha dit això?

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

  1. Convertir el paràgraf del mig en un blockquote, que inclogui un atribut cite.
  2. Convertir part del tercer paràgraf en una cita en línia, que inclogui un atribut cite.
  3. Incloure un element <cite> per a cada cita

Cercar a Internet per trobar fonts apropiades de cites.

Si cometeu un error, sempre es pot restablir amb el botó de Reinici. Si aconseguiu realment encallar-vos, feu clic al botó Mostra solució per veure la resposta.

Abreviatures

Un altre element força comú que es troba quan es mira al voltant de la web és <abbr> - aquest s'utilitza per embolicar al voltant d'una abreviatura o acrònim, i proporcionar una expansió completa del terme (inclòs dins d'un atribut title) Vegem un parell d'exemples:

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

Aquest ve a ser una cosa com això (l'expansió apareixerà en una tooltip quan planar per sobre el terme):

We use HTML to structure our web documents.

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

Nota: Hi ha un altre element, <acrònim>, que bàsicament fa el mateix que <abbr>, i està destinat específicament als acrònims en lloc d'abreviatures. No obstant això, ha caigut en desús - no es recolza tampoc en els navegadors, així com <abbr>, i el tenir una funció similar es va considerar inútil tenir les dues coses. Només s'ha d'utilitzar <abbr> en el seu lloc.

Aprenentatge actiu: Marcat d'una abreviatura

Per aquesta senzilla tasca d'aprenentatge actiu, ens agradaria que simplement féssiu un marcat d'una abreviatura. Podeu utilitzar el nostre exemple a continuació, o substituir-lo per un de la vostra elecció. 

Marcatge de les dades de contacte

HTML té un element per marcar les dades de contacte - <address>. Això simplement s'embolica al voltant de les vostres dades de contacte, per exemple:

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

Una cosa que cal recordar però és que l'element <address> és per al marcat de les dades de contacte de la persona que va escriure el document HTML, no qualsevol direcció. Pel que l'anterior només seria acceptable si Chris hagués escrit el document i aparegués en el marcat. Recordeu que alguna cosa com això també seria acceptable:

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

Superíndex i subíndex

De tant en tant es necessari utilitzar superíndex i subíndex quan el marcat d'elements com dates, fórmules químiques i equacions matemàtiques tinguin un significat correcte. Els elements <sup> i <sub> gestionan aquesta feina. Per exemple:

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

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

My birthday is on the 25th of May 2001.

Caffiene's chemical formula is C8H10N4O2.

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

Representar codi informàtic

Hi ha una sèrie d'elements disponibles per al marcat de codi informàtic:

  • <code>: per marcar peces genèriques de codi informàtic.
  • <pre>: per marcar blocs de text d'amplada fixa, en el qual l'espai en blanc es retingut (En general blocs de codi)
  • <var>: Per marcar específicament els noms de variables.
  • <kbd>: Per al marcat de teclat (i altres tipus de) entrada dins a l'ordinador.
  • <samp>: Per marcar la sortida d'un programa d'ordinador.

Vegem alguns exemples. Heu de tractar de jugar amb aquests (intenteu agafar una còpia del nostre arxiu d'exemple other-semantics.html):

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>

<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>


<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

El codi anterior es veuria així:

Marcatge d'hores i dates

HTML també proporciona l'element <time> per marcar les hores i dates en un format llegible per la màquina. Per exemple:

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

Per què és això útil? Bé, hi ha moltes maneres diferents que els éssers humans escriuen les dates. La data anterior es podria escriure com:

  • 20 January 2016
  • 20th January 2016
  • Jan 20 2016
  • 20/06/16
  • 06/20/16
  • The 20th of next month
  • 20e Janvier 2016
  • 2016年1月20日
  • And so on

Però aquestes diferents formes no són fàcilment reconegudes pels ordinadors - que es volia agafar automàticament les dates de tots els esdeveniments en una pàgina i inserir-los en un calendari? L'element <time> us permet adjuntar inequívocament, el temps de lectura mecànica/data per a aquest propòsit.

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

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

Sumari

Això marca el final del nostre estudi de la semàntica de text HTML. Cal tenir en compte que el que heu vist durant aquest curs no és una llista exhaustiva dels elements de text HTML - volíem intentar cobrir l'essencial, i alguns dels més comuns que es poden veure naturalment, o almenys trobar força interessants. Per trobar pel camí més elements HTML, podeu fer una ullada a la nostra referència d'elements HTML (la secció de la semàntica de text en línia seria un gran lloc per començar.) En el següent article veurem els elements HTML que s'usan per estructurar les diferents parts d'un document HTML.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,