Ahora que ya sabemos las etiquetas necesarias para dividir una web o estructurar una web de forma general, veremos una estructura básica de un body completo con HTML5.
Utilizaremos todas las etiquetas vistas en el punto 1.2.2 Etiquetas de secciones del documento.
Podremos apreciar la falta de uso de div id, div class y span a favor de estas etiquetas mucho mas semánticas para dividir el documento.
La misma estructura básica que vamos a ver pero creada en HTML4.0.1 o XHTML1.0.1 se podría ver como en el siguiente ejemplo:
….
<body>
<div id=”header”>
<h1>Logo</h1>
<h2>Eslogan</h2>
</div><!—fin header-->
<div id=”navegador”>
<ul>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
….
</ul>
</div><!—fin navegador-->
<div id=”section”>
<div id=”article”>
….
</div><!—fin article-->
</div><!—fin section-->
<div id=”aside”>
….
</div><!—fin aside-->
<div id=”footer”>
….
</div><!—fin footer-->
</body>
….
Y ahora la veremos en HTML5 y podremos ver la diferencia:
….
<body>
<header>
<hgroup>
<h1>Logo</h1>
<h2>Eslogan</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
….
</ul>
</nav>
<section>
<article>
….
</article>
</section>
<aside>
….
</aside>
<footer>
….
</footer>
</body>
….
La diferencia es enorme en cuanto a semántica se refiere, a partir de ahora con HTML5 tendremos que utilizar etiquetas especificas para un fin y no solo distribuir mediante div id y div class las zonas o apartados de nuestra web.
21 de abril de 2012
16 de abril de 2012
Etiquetas de secciones del documento
aside
Etiqueta que utilizaremos para definir una zona secundaría de nuestra página web, se suele utilizar en los bloques derechos o izquierdos que contienen publicidad, o menús secundarios de nuestra web.Su sintaxis seria la siguiente:
<aside>….</aside>
Ejemplo:
….
<aside>
<div id=”publicidad”>
<img src=”banner.jpg” title=”banner” alt=”banner />
</div>
</aside>
….
section
Zonas divisibles y únicas en las que se divide nuestra web, las cuales contienen otros datos en común. Puede haber varios <section> en una misma web y puede haber <section> anidados, es decir uno o varias <section> dentro de otro <section>.
Su sintaxis seria la siguiente:
<section>….</section>
Ejemplo:
….
<section id=”tablets”>
<article id=”Apple ipad”>
……
</article>
<article id=”Samsung galaxy tab”>
……
</article>
</section>
….
header
Nueva etiqueta HTML5 que se utilizara para indicar la cabecera de la página o de cualquier cabecera de un elemento individual dentro de ella. Por lo que podremos utilizar más de un <header>, en un mismo documento HTML.
Su sintaxis seria la siguiente:
<header>….</header>
Ejemplo:
….
<header>
<hgroup>
<h1>Logo</h1>
<h2>Eslogan…</h2<
</hgroup>
<nav id=”navegador”>
<ul>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
</ul>
</nav>
</header>
….
footer
Nueva etiqueta HTML5 que se utilizara para indicar el pie de la página o de cualquier pie de un elemento individual dentro de ella. Por lo que podremos utilizar más de un <footer>, en un mismo documento HTML.
Su sintaxis seria la siguiente:
<footer>….</footer>
Ejemplo:
…
<footer>
<span>
<ul>
<li><a href=”#”>© Narf</a></li>
<li><a href=”#”>Política de privacidad</a></li>
<li><a href=”#”>Condiciones de servicio</a></li>
</ul>
</span>
</footer>
….
nav
Etiqueta nueva de HTML5 para señalar el menú de navegación principal de la página web que estemos maquetando.
Su sintaxis seria la siguiente:
<nav>….</nav>
Ejemplo:
….
<nav id=”navegador”>
<ul>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
</ul>
</nav>
….
article
Partes iguales y con características iguales en una pagina web, se pueden y suelen encontrar dentro de la etiqueta <section>. Pueden haber <section> dentro de <article> y otros <article> dentro del <article> padre.
Su sintaxis seria la siguiente:
<article>….</article>
Ejemplo:
….
<article id=”Apple ipad”>
……
</article>
<article id=”Samsung galaxy tab”>
……
</article>
….
hgroup
El elemento <hgroup> se utilizara para englobar varios títulos consecutivos, como por ejemplo el logo y el eslogan, titulo-subtitulo…
Su sintaxis seria la siguiente:
….
<hgroup>
<h1>….</h1>
<h2>….</h2>
….
</hgroup>
….
Ejemplo:
….
<hgroup>
<h1>Logo</h1>
<h2>Eslogan…</h2>
</hgroup>
….
Etiqueta que utilizaremos para definir una zona secundaría de nuestra página web, se suele utilizar en los bloques derechos o izquierdos que contienen publicidad, o menús secundarios de nuestra web.Su sintaxis seria la siguiente:
<aside>….</aside>
Ejemplo:
….
<aside>
<div id=”publicidad”>
<img src=”banner.jpg” title=”banner” alt=”banner />
</div>
</aside>
….
section
Zonas divisibles y únicas en las que se divide nuestra web, las cuales contienen otros datos en común. Puede haber varios <section> en una misma web y puede haber <section> anidados, es decir uno o varias <section> dentro de otro <section>.
Su sintaxis seria la siguiente:
<section>….</section>
Ejemplo:
….
<section id=”tablets”>
<article id=”Apple ipad”>
……
</article>
<article id=”Samsung galaxy tab”>
……
</article>
</section>
….
header
Nueva etiqueta HTML5 que se utilizara para indicar la cabecera de la página o de cualquier cabecera de un elemento individual dentro de ella. Por lo que podremos utilizar más de un <header>, en un mismo documento HTML.
Su sintaxis seria la siguiente:
<header>….</header>
Ejemplo:
….
<header>
<hgroup>
<h1>Logo</h1>
<h2>Eslogan…</h2<
</hgroup>
<nav id=”navegador”>
<ul>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
</ul>
</nav>
</header>
….
footer
Nueva etiqueta HTML5 que se utilizara para indicar el pie de la página o de cualquier pie de un elemento individual dentro de ella. Por lo que podremos utilizar más de un <footer>, en un mismo documento HTML.
Su sintaxis seria la siguiente:
<footer>….</footer>
Ejemplo:
…
<footer>
<span>
<ul>
<li><a href=”#”>© Narf</a></li>
<li><a href=”#”>Política de privacidad</a></li>
<li><a href=”#”>Condiciones de servicio</a></li>
</ul>
</span>
</footer>
….
nav
Etiqueta nueva de HTML5 para señalar el menú de navegación principal de la página web que estemos maquetando.
Su sintaxis seria la siguiente:
<nav>….</nav>
Ejemplo:
….
<nav id=”navegador”>
<ul>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
</ul>
</nav>
….
article
Partes iguales y con características iguales en una pagina web, se pueden y suelen encontrar dentro de la etiqueta <section>. Pueden haber <section> dentro de <article> y otros <article> dentro del <article> padre.
Su sintaxis seria la siguiente:
<article>….</article>
Ejemplo:
….
<article id=”Apple ipad”>
……
</article>
<article id=”Samsung galaxy tab”>
……
</article>
….
hgroup
El elemento <hgroup> se utilizara para englobar varios títulos consecutivos, como por ejemplo el logo y el eslogan, titulo-subtitulo…
Su sintaxis seria la siguiente:
….
<hgroup>
<h1>….</h1>
<h2>….</h2>
….
</hgroup>
….
Ejemplo:
….
<hgroup>
<h1>Logo</h1>
<h2>Eslogan…</h2>
</hgroup>
….
12 de abril de 2012
Etiquetas de agrupación de contenido
figure
Con figure podremos encapsular elementos como listas , gráficos, imágenes…., representa a algún tipo de contenido que opcionalmente pueda tener una leyenda, encabezado o un texto asociado.
En conjunto a la etiqueta <figure> podemos añadirle en su interior otras dos etiquetas.
La etiqueta <legend> (conocida de HTML4.01) o figcaption, que veremos la manera de utilizarla próximamente, pero no necesariamente se deben utilizar todas juntas.
Su sintaxis seria la siguiente:
<figure>….</figure>
Ejemplo:
….
<figure>
/*La etiqueta legend funcionaria como encabezado de una lista*/
<legend>Menu usuarios</legend>
<ul>
<li><a href=”#”>Mi muro</a></li>
<li><a href=”#”>Mi muro</a></li>
<li><a href=”#”>Mi muro</a></li>
</ul>
</figure>
….
Ejemplo:
….
<figure>
<img src=”imagen.jpg” />
</figure>
….
figcaption
La etiqueta figcaption la utilizaremos dentro de la etiqueta <figure>, en ella pondremos el texto relacionado con la imagen, grafico o etiqueta que contenga <figure>.
Su sintaxis seria la siguiente:
<figure>
<figcaption>….</figcaption>
</figure>
Ejemplo:
….
<figure>
<img src=”imagen.jpg” />
<figcaption>
Pie de foto
</figcaption>
</figure>
….
Con figure podremos encapsular elementos como listas , gráficos, imágenes…., representa a algún tipo de contenido que opcionalmente pueda tener una leyenda, encabezado o un texto asociado.
En conjunto a la etiqueta <figure> podemos añadirle en su interior otras dos etiquetas.
La etiqueta <legend> (conocida de HTML4.01) o figcaption, que veremos la manera de utilizarla próximamente, pero no necesariamente se deben utilizar todas juntas.
Su sintaxis seria la siguiente:
<figure>….</figure>
Ejemplo:
….
<figure>
/*La etiqueta legend funcionaria como encabezado de una lista*/
<legend>Menu usuarios</legend>
<ul>
<li><a href=”#”>Mi muro</a></li>
<li><a href=”#”>Mi muro</a></li>
<li><a href=”#”>Mi muro</a></li>
</ul>
</figure>
….
Ejemplo:
….
<figure>
<img src=”imagen.jpg” />
</figure>
….
figcaption
La etiqueta figcaption la utilizaremos dentro de la etiqueta <figure>, en ella pondremos el texto relacionado con la imagen, grafico o etiqueta que contenga <figure>.
Su sintaxis seria la siguiente:
<figure>
<figcaption>….</figcaption>
</figure>
Ejemplo:
….
<figure>
<img src=”imagen.jpg” />
<figcaption>
Pie de foto
</figcaption>
</figure>
….
3 de abril de 2012
Etiquetas de formulario
meter
Con esta nueva etiqueta <meter>, lo que podremos hacer es indicar una unidad de medida escalar basada en un rango con un maximo y un minimo.
Para su uso utilizaremos tras atributos para indicar el rango donde nos movemos. Los atributos serian los siguientes:
-min → el valor minimo del rango.
-max → el valor maximo del rango.
-value → el valor que indicamos entre los valores minimo y maximo.
Su sintaxis seria la siguiente:
<meter min=”....” max=”....” value=”....”>....</meter>
Ejemplo:
<meter min=”0” max=”100” value=”30”>30%</meter>
/*Esta seria otra forma de utilización*/
<meter value=”0.3”>30%</meter>
output
El tag <output> se utiliza para representar el resultado de una serie de valores dados en otros campos. Para saber de que valores depende utilizamos los atributos que puede utilizar.
Estos atributos son los siguientes:
-for → en este atributo especificaremos la relacion existente entre el resultado del calculo, y el elemento usado en el calculo. Su valor seria el id de los elementos separados por espacios que intervienen en el calculo.
-form → Especifica los formularios de los que sacamos el calculo. El valor seria el id de esos formularios separados por espacios.
-name → en este atributo especificaremos el nombre que le queramos dar a esta etiqueta.
Su sintaxis seria la siguiente:
<output name=”...” for=”....” form=”....”></outtput>
Ejemplo:
….
<form id=”suma”>
<input type=”number” id=”a” value=”5” />
<input type=”number” id=”b” value=”6” />
<output for=”a b” form=”suma” name=”total”></output>
</form>
….
datalist
Se utiliza para mostrar una serie de opciones de autocompletado en una caja de texto <input> conforme vamos escribiendo la palabra en la caja de texto <input>.
Para asignar unas opciones de un <datalist> a una caja de texto input determinada, en el <input> debemos colocar un atributo list con el valor que le demos al id de la etiqueta <datalist>.
Dentro de la etiqueta <datalist> iran etiquetas <option> con las palabras que queramos que nos sirvan para el autocompletado.
Su sintaxis seria la siguiente:
<datalist>
<option value=”....”>
…..
</datalist>
Ejemplo:
….
<datalist id=”equipos”>
<option value=”FC Barcelona”>
<option value=”Real Madrid”>
</datalist>
….
keygen
https://developer.mozilla.org/es/HTML/Elemento/Keygen
progress
El elemento <progress>, lo utilizaremos para medir algo que esta cambiando o en proceso de cambio.
Utiliza los atributos siguientes:
-min--> valor mínimo a medir.
-max--> valor máximo a medir.
-value--> valor medido en la actualidad.
Su sintaxis seria la siguiente:
<progress min=”….” max=”….” value=”….”></progress>
Ejemplo:
….
<progress min=”0” max=”100” value=”60”></progress>
….
Con esta nueva etiqueta <meter>, lo que podremos hacer es indicar una unidad de medida escalar basada en un rango con un maximo y un minimo.
Para su uso utilizaremos tras atributos para indicar el rango donde nos movemos. Los atributos serian los siguientes:
-min → el valor minimo del rango.
-max → el valor maximo del rango.
-value → el valor que indicamos entre los valores minimo y maximo.
Su sintaxis seria la siguiente:
<meter min=”....” max=”....” value=”....”>....</meter>
Ejemplo:
<meter min=”0” max=”100” value=”30”>30%</meter>
/*Esta seria otra forma de utilización*/
<meter value=”0.3”>30%</meter>
output
El tag <output> se utiliza para representar el resultado de una serie de valores dados en otros campos. Para saber de que valores depende utilizamos los atributos que puede utilizar.
Estos atributos son los siguientes:
-for → en este atributo especificaremos la relacion existente entre el resultado del calculo, y el elemento usado en el calculo. Su valor seria el id de los elementos separados por espacios que intervienen en el calculo.
-form → Especifica los formularios de los que sacamos el calculo. El valor seria el id de esos formularios separados por espacios.
-name → en este atributo especificaremos el nombre que le queramos dar a esta etiqueta.
Su sintaxis seria la siguiente:
<output name=”...” for=”....” form=”....”></outtput>
Ejemplo:
….
<form id=”suma”>
<input type=”number” id=”a” value=”5” />
<input type=”number” id=”b” value=”6” />
<output for=”a b” form=”suma” name=”total”></output>
</form>
….
datalist
Se utiliza para mostrar una serie de opciones de autocompletado en una caja de texto <input> conforme vamos escribiendo la palabra en la caja de texto <input>.
Para asignar unas opciones de un <datalist> a una caja de texto input determinada, en el <input> debemos colocar un atributo list con el valor que le demos al id de la etiqueta <datalist>.
Dentro de la etiqueta <datalist> iran etiquetas <option> con las palabras que queramos que nos sirvan para el autocompletado.
Su sintaxis seria la siguiente:
<datalist>
<option value=”....”>
…..
</datalist>
Ejemplo:
….
<datalist id=”equipos”>
<option value=”FC Barcelona”>
<option value=”Real Madrid”>
</datalist>
….
keygen
https://developer.mozilla.org/es/HTML/Elemento/Keygen
progress
El elemento <progress>, lo utilizaremos para medir algo que esta cambiando o en proceso de cambio.
Utiliza los atributos siguientes:
-min--> valor mínimo a medir.
-max--> valor máximo a medir.
-value--> valor medido en la actualidad.
Su sintaxis seria la siguiente:
<progress min=”….” max=”….” value=”….”></progress>
Ejemplo:
….
<progress min=”0” max=”100” value=”60”></progress>
….
31 de marzo de 2012
Etiquetas de texto semántico
ruby
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:
<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:
<p>Yo nací en el <time datetime=”1980-06-30”>verano de 1980</time></p>
/*Indicamos la fecha en lenguaje maquina del nacimiento*/
<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 */
<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:
<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>
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>
30 de marzo de 2012
Nueva cabecera HTML5
Ahora que ya sabemos los cambios que han ocurrido en las etiquetas de cabecera en HTML5, es el momento de crear una cabecera que cumpla con la especificación y con la cual podamos trabajar a partir de ahora además de poder introducir otras etiquetas ya utilizadas en HTML4.0.1 y XHTML1.0 para indicar el titulo de la pagina, descripción, palabras clave, autor….
Estas otras etiquetas <meta> no las pondremos en nuestro ejemplo ya que no corresponden con HTML5, y son etiquetas que ya existían y su utilización es igual.
La sintaxis utilizada hasta ahora con HTML4.01 y XHTML1.0, aunque había varias opciones yo solo pondré una de ejemplo para poder compararla con la nueva sintaxis en HTML5, sería la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
….
</body>
</html>
La nueva sintaxis de la cabecera de una web HTML5 en su formato más básico, sería la siguiente:
/*Especificamos el documento que vamos a tratar, es decir un archivo .html*/
<!DOCTYPE>
/*Le indicamos el lenguaje a utilizar en la página web*/
<html lang="ES-es">
<head>
/*Le decimos el grupo de caracteres que se utilizaran para la web*/
<meta charset="UTF-8">
/*Titulo de la pagina*/
<title>….</title>
/*Script externo que posiblemente utilicemos en la web*/
<script src="script.js"></script>
/*Link a nuestra hoja de estilos css*/
<link rel="stylesheet" href="estilos.css" />
/*Script en el archivo .html sin ser externo*/
<script>
/*Codigo javascript*/
</script>
/*Estilo en el archivo .html sin ser externo*/
<style>
/*Estilos CSS*/
</style>
</head>
<body>
……..
</body>
</html>
Nos podemos dar cuenta la diferencia que existe de una a otra, HTML5 está llegando para ser mucho más intuitivo, mas semántico y para poder ser funcional tanto para el pasado, el presente o el futuro sin tener que sufrir cambios en sus etiquetas como ocurría hasta ahora.
Estas otras etiquetas <meta> no las pondremos en nuestro ejemplo ya que no corresponden con HTML5, y son etiquetas que ya existían y su utilización es igual.
La sintaxis utilizada hasta ahora con HTML4.01 y XHTML1.0, aunque había varias opciones yo solo pondré una de ejemplo para poder compararla con la nueva sintaxis en HTML5, sería la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
….
</body>
</html>
La nueva sintaxis de la cabecera de una web HTML5 en su formato más básico, sería la siguiente:
/*Especificamos el documento que vamos a tratar, es decir un archivo .html*/
<!DOCTYPE>
/*Le indicamos el lenguaje a utilizar en la página web*/
<html lang="ES-es">
<head>
/*Le decimos el grupo de caracteres que se utilizaran para la web*/
<meta charset="UTF-8">
/*Titulo de la pagina*/
<title>….</title>
/*Script externo que posiblemente utilicemos en la web*/
<script src="script.js"></script>
/*Link a nuestra hoja de estilos css*/
<link rel="stylesheet" href="estilos.css" />
/*Script en el archivo .html sin ser externo*/
<script>
/*Codigo javascript*/
</script>
/*Estilo en el archivo .html sin ser externo*/
<style>
/*Estilos CSS*/
</style>
</head>
<body>
……..
</body>
</html>
Nos podemos dar cuenta la diferencia que existe de una a otra, HTML5 está llegando para ser mucho más intuitivo, mas semántico y para poder ser funcional tanto para el pasado, el presente o el futuro sin tener que sufrir cambios en sus etiquetas como ocurría hasta ahora.
29 de marzo de 2012
Etiquetas de metadatos y scripting
meta
De la etiqueta <meta> podemos decir que se ha simplificado sensiblemente a la utilizada hasta ahora en HTML4.1 o XHTML1.0.
Hasta la aparición de HTML5, para la descripción del conjunto de caracteres que utilizaríamos en nuestra página, utilizábamos la siguiente sintaxis:
<meta http-equiv="Content-Type" content="text/html;" charset="UTF-8">
Ahora con HTML5 la sintaxis quedaría de la siguiente manera:
<meta charset="UTF-8">
En cuanto a los atributos que se le pueden asignar a la etiqueta , serian todos los atributos globales.
script
La etiqueta <script … > es la utilizada dentro de la cabecera de un documento web, es decir entre las etiquetas <head> y </head>, para enlazar un archivo javascript externo.
La forma de utilizar esta etiqueta en HTML4.1 y XHMTL1.0, era con una serie de atributos que vemos en la sintaxis siguiente:
<script type="text/javascript" src="codigo.js"></script>
HTML5 nos vuelve a facilitar el trabajo y nos permite al igual que con otras etiquetas ( link, style) , a prescindir del atributo type, con lo que la sintaxis quedaría valida de la siguiente manera:
<script src="codigo.js"></script>
Lo mismo ocurrirá si el código javascript que queremos hacer funcionar en nuestra web, en vez de tenerlo en un documento externo al .html, lo queremos insertar dentro del código html.
<script>
Código javascript
</script>
link
Con la etiqueta link lo que hacemos es enlazar código css externo para que nuestra página web tenga el diseño deseado. En HTML4.1 y XHTML1.0 usábamos una sintaxis un tanto larga:
<link rel="stylesheet" type="text/css" href="comun.css" />
Con HTML5 se simplifica y se prescinde del atributo type. La sintaxis quedaría de la siguiente manera:
<link rel="stylesheet" href="comun.css" />
style
Con la etiqueta <style>, que se utiliza para incluir estilos CSS en el propio documento HTML, nos ocurre lo mismo que con la etiqueta <link>, deja de ser imprescindible usar el atributo type, para indicar el tipo de estilo que utilizaremos.
En HTML4.1 y XHTML1.0 la sintaxis utilizada sería la siguiente:
<style type=”text/css”>
Estilos css
</style>
En HTML5 su sintaxis seria la que vemos a continuación:
<style>
Estilos css
</style>
De la etiqueta <meta> podemos decir que se ha simplificado sensiblemente a la utilizada hasta ahora en HTML4.1 o XHTML1.0.
Hasta la aparición de HTML5, para la descripción del conjunto de caracteres que utilizaríamos en nuestra página, utilizábamos la siguiente sintaxis:
<meta http-equiv="Content-Type" content="text/html;" charset="UTF-8">
Ahora con HTML5 la sintaxis quedaría de la siguiente manera:
<meta charset="UTF-8">
En cuanto a los atributos que se le pueden asignar a la etiqueta , serian todos los atributos globales.
script
La etiqueta <script … > es la utilizada dentro de la cabecera de un documento web, es decir entre las etiquetas <head> y </head>, para enlazar un archivo javascript externo.
La forma de utilizar esta etiqueta en HTML4.1 y XHMTL1.0, era con una serie de atributos que vemos en la sintaxis siguiente:
<script type="text/javascript" src="codigo.js"></script>
HTML5 nos vuelve a facilitar el trabajo y nos permite al igual que con otras etiquetas ( link, style) , a prescindir del atributo type, con lo que la sintaxis quedaría valida de la siguiente manera:
<script src="codigo.js"></script>
Lo mismo ocurrirá si el código javascript que queremos hacer funcionar en nuestra web, en vez de tenerlo en un documento externo al .html, lo queremos insertar dentro del código html.
<script>
Código javascript
</script>
link
Con la etiqueta link lo que hacemos es enlazar código css externo para que nuestra página web tenga el diseño deseado. En HTML4.1 y XHTML1.0 usábamos una sintaxis un tanto larga:
<link rel="stylesheet" type="text/css" href="comun.css" />
Con HTML5 se simplifica y se prescinde del atributo type. La sintaxis quedaría de la siguiente manera:
<link rel="stylesheet" href="comun.css" />
style
Con la etiqueta <style>, que se utiliza para incluir estilos CSS en el propio documento HTML, nos ocurre lo mismo que con la etiqueta <link>, deja de ser imprescindible usar el atributo type, para indicar el tipo de estilo que utilizaremos.
En HTML4.1 y XHTML1.0 la sintaxis utilizada sería la siguiente:
<style type=”text/css”>
Estilos css
</style>
En HTML5 su sintaxis seria la que vemos a continuación:
<style>
Estilos css
</style>
Suscribirse a:
Entradas (Atom)