Con el tag <ruby> especificamos que vamos a insertar una anotación de tipo ruby. La anotación de tipo ruby es la tipografía utilizada en el Este Asiático.
Se utiliza para mostrar la pronunciación de los caracteres del Este Asiático.
La etiqueta <ruby> contendrá uno o más caracteres que necesiten de una explicación o pronunciación, e irá acompañada de los tag <rt> y <rp> o uno de los dos.
Ejemplo:
…..
<ruby>
句
</ruby>
….
rt
El tag <rt> define una explicación o una pronunciación de caracteres, ( para la tipografía del este asiático ), en una anotación de ruby.
Esta etiqueta se utiliza dentro del tag <ruby> y puede utilizarse paralelamente con el tag <rp>.
Su sintaxis seria la siguiente:
<ruby>
<rt>…</rt>
</ruby>
Ejemplo:
…..
<ruby>
句<rt>句</rt>
</ruby>
….
rp
El tag <rp> define lo que un navegador mostrara si no es compatible con las anotaciones ruby, ( tipografía del Este Asiático).
Esta etiqueta se utilizara dentro de un tag <ruby> y podrá ir acompañada del tag <rt>
Ejemplo:
…..
<ruby>
句<rp>(</rp><rt>句</rt><rp>)</rp>
</ruby>
….
time
Con la etiqueta <time> definimos una hora, o una fecha en el calendario Gregoriano, o las dos opciones al mismo tiempo, también podemos indicarle la zona horaria en la que nos encontramos.
Esta etiqueta nos da la opción de que el navegador sepa a que momento, fecha y lugar nos referimos en una frase en lenguaje humano. Es decir cuando nosotros decimos en un dialogo o en un texto la palabra “hoy”, el navegador no podía saber a que día o fecha nos referíamos, al igual que al escribir en un artículo, la fecha de escritura, modificación y otros elementos que indiquen tiempo.
Con la etiqueta <time> solucionamos esto y hacemos nuestros textos mas semánticos.
Su sintaxis podría ser de las siguientes formas:
- <time>…..</time>
<p>El tren a Granada sale a las <time>07:00</time>h todas las mañanas.</p>
/*Indicamos la hora de salida, ya que el navegador con 07:00 no sabría o podría entender que nos referimos a una hora*/
La etiqueta <time> puede tener dos atributos posibles, con los cuales podremos ser más específicos o darle un significado horario a palabras que utilizamos habitualmente (ayer, hoy, mañana, pasado mañana….), al igual que podemos indicar si la fecha pertenece a la publicación del documento o a otra fecha.
Los atributos serian los siguientes:
-datetime --> para indicar fecha, hora y zona horaria en la que nos encontramos.
Podemos utilizarlo de las siguientes maneras:
- <time datetime=”aaaa-mm-dd”>....</time>
<p>Yo nací en el <time datetime=”1980-06-30”>verano de 1980</time></p>
/*Indicamos la fecha en lenguaje maquina del nacimiento*/
- <time datetime=”hh:mm”>…..</time>
<p><time datetime=”07:00”>Cuando me levante</time> hacia bastante frio.</p>
/*Indicamos la hora a la que me levante*/
<time datetime=”aaaa-mm-ddThh:mm”>….</time>
Ejemplo:
<p><time datetime=”2012-01-25T22:00”>Antesdeayer por la tarde</time> se jugo el partido de vuelta de las semifinales de la copa del Rey entre el FC Barcelona y el Real Madrid</p>
/* Indicamos el día y la hora del partido */
/* Con este formato podemos indicar los segundos después de los minutos de la siguiente manera aaaa-mm-ddThh:mm:ss */
- <time datetime=”aaaa-mm-ddThh:mm:ss-hh:mm”>....</time>
<p><time datetime=”2012-01-27T18:00-01:00”>Ayer por la tarde en Madrid</time> hizo bastante frio</p>
/*En este ejemplo le indicamos el día, la hora y la zona horaria donde hizo frío*/
-pubdate → Lo utilizaremos para indicar que nos referimos a la fecha de publicación del articulo, o en su defecto indicara que la fecha es la de su elemento padre. Podemos utilizarlo de la siguiente manera:
- <time datetime=”aaaa-mm-ddThh:mm:ss-hh:mm” pubdate>....</time>
<p>El Real Madrid sucumbio en las semifinales de la copa del rey ante el FC Barcelona.</p>
<p><time datetime=”2012-01-25T16:00” pubdate>Jueves 26 de Enero de 2012</time></p>
/*Con pubdate le indicamos que nos referimos a la fecha de publicacion del articulo y no a la fecha de la frase*/
Ejemplo:
….
<article>
<h2>Titulo articulo</h2>
<p><time datetime=”2012-01-25”>Este semana</time> ha sido de las mas frías que hemos vivido en la Comunidad de Madrid.............<time pubdate>Hoy sábado aun no ha terminado esa semana.</time>
</p>
</article>
…..
mark
La etiqueta <mark>, es algo que nos faltaba en HTML, no es que sea una etiqueta demasiado importante pero si que nos ayudara a darle importancia a una palabra dentro de un texto. Hasta ahora podíamos darle énfasis o poner una palabra en negrita para darle un valor mas fuerte dentro de un texto, pero ahora con esta etiqueta podremos remarcar esa palabra con un background de color amarillo para darle un valor visual aun mas marcado.
Su sintaxis seria la siguiente:
<mark>….</mark>
Ejemplo:
<p>No te olvides que tienes que <mark>venir esta tarde.</mark></p>
bdi
Es una etiqueta que nos ayudará a poder poner textos de otros lugares donde se escriben de derecha a izquierda, antes de esta etiqueta había que ingeniárselas para introducir textos con este formato. Para lo que se usaba la regla CSS unicode-bidi: y aislábamos en el HTML el texto que queríamos formatear con una etiqueta <span>. Pero la única manera de ser semántico es con esta nueva etiqueta.
Su sintaxis es la siguiente:
<bdi>....</bdi>
Ejemplo:
<p>En algunos lugares el texto se escribe de derecha a izquierda en vez de izquierda a derecha como lo hacemos nosotros, el siguiente texto se leería de derecha a izquierda<bdi>Texto de ejemplo</bdi></p>
bdo
Esta etiqueta es parecida al tag <bdi>, aunque no tiene su misma función, con el tag <bdo>, lo que hacemos es que el texto se escribe de derecha a izquierda literalmente o al revés en caso de que lo necesitemos.
Para utilizar el tag <bdo> nos hará falta utilizar su único atributo (dir),refiriéndose a la dirección en la que queremos se escriba el texto dentro de las etiquetas <bdo>. Los valores posibles para este atributo serian (ltr) que viene de la frase en ingles left to right (izquierda a derecha) o (rtl) de la frase inglesa right to left (derecha a izquierda).
Su sintaxis básica es la siguiente:
<bdo dir=”ltr/rtl”>....</bdo>
Ejemplo:
<p>Mi nick <bdo dir=”rtl”>narf</bdo>, es mi nombre escrito de derecha a izquierda</p>
wbr
Esta etiqueta se utilizara para palabras demasiado largas, el navegador por defecto si las encuentra al final de linea y no entra entera la bajara a la siguiente linea, dejandonos un espacio en la linea superior mas grande de lo normal. Con este tag <wbr> lo que haremos sera marcarle al navegador que la palabra puede dividirse en silabas o bloques para poder partirla.
Es una etiqueta que no tiene cierre, tampoco se cierra ella misma como haríamos en otras etiquetas como <br />, <img />....
Su sintaxis básica seria la siguiente:
<wbr>
Ejemplo:
<p>El viaje a Cuba fue fantástico lo peor de todo fueron las horas que pasamos en los aero<wbr>puertos</p>
/*La palabra aeropuerto podrá separarse en caso de que coincida al final de linea*/
dialog
La etiqueta <dialog> se utilizara para diálogos entre personas, como por ejemplo un chat, una obra de teatro.... Podrá ir acompañada de listas de definición para indicar el nombre de la persona que habla y el texto que habla. También podrá contener otras etiquetas como por ejemplo <time>, para mostrar el tiempo de la conversación.
Su sintaxis seria la siguiente:
<dialog>....</dialog>
Ejemplo:
<dialog>
<dt>Narf dijo hace<time datetime=”2012-01-25T18:10”> 10 minutos</time></dt>
<dd>Hola, buenas tardes.</dd>
<dt>Alexandra dijo hace <time datetime=”2012-01-25T18:12”> 8 minutos</time></dt>
<dd>Buenas tardes, viendo la tele</dd>
…....
</dialog>
No hay comentarios:
Publicar un comentario