Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

HTML5 V

Otras etiquetas en HTML 5

Nuevas etiquetas

Aparte de las ya vistas en páginas anteriores, HTML 5 porporciona otra serie de etiquetas nuevas. No todas están disponibles en todos los navegadores, por lo que se aconseja utilizar varios de ellos para ver los resultados.

A continuación nos referimos a ellas, de las que daremos una breve explicación y un ejemplo con código y visualización en pantalla.

dialog

Para escribir conversaciones, como por ejemplo en chats.

<dialog>Texto de la etiqueta dialog</dialog>

Texto de la etiqueta dialog

figure y figcaption

La etiqueta figure sirve para englobar un elemento más pequeño que section o article. Normalmente se usa para englobar imágenes o elementos multimedia. La etiqueta figcaption sirve pàra indicar el título de este elemento:


<figure style="border: 1px solid black; width: 400px" >
<figcaption id="campanilla" >Campanilla</figcaption>
<br/>
<audio controls src="../objetos/campanilla.ogg" heigt="40" ></audio>
</figure>

Campanilla

mark

Resalta cun texto con un color de fondo distinto.

<mark>Texto de la etiqueta mark</mark>

Texto de la etiqueta mark

meter

Marca en una barra de progreso la cantidad indicada (disponible sólo en Opera y Chrome). Los atributos min y max indican el máximo y mínimo de la barra; el atributo value indica hasta donde se rellena la barra.

El 20 % : <meter min="0" max="100" value="20">20%</meter>

El 20 % : 20%

progress

Al igual que el anterior marca en una barra de progreso la cantidad indicada. Los atributos min y max indican el máximo y mínimo de la barra; el atributo value indica hasta donde se rellena la barra.

progreso 25%: <progress value="250" max="1000">25%</progress>

progreso 25%: 25%

time

Para representar una fecha u hora

Fecha: <time datatime="2011-09-15">15 de Septiembre de 2011</time>

Fecha:

Otras etiquetas

Otras etiquetas que todavía no están disponibles en ningún navegador son:

Nuevos atributos

También hay nuevos atributos en HTML 5, algunos de ellos afectan sólo a una o varias etiquetas, otros pueden utilizarse de forma global con cualquier etiqueta.

A continuación mostramos los nuevos atributos

hidden

Este atributo oculta el elemento que lo lleva. Sus posibles valores son boleanos (true y false), su valor por defecto es true. Un uso interesante para este atributo es cambiarle el valor mediante javascript para hacer aparecer o desaparecer un elemento. El siguiente enlace muestra una página de ejemplo:

Ocultar elemento

contenteditable

Este atributo hace que el elemento que lo lleva pueda ser escrito/editado por el usuario. No lleva valores. (o valor true/false)

<p> Escribe tu nombre <span contenteditable style="background-color: yellow">:...... </span></p>

Escribe tu nombre :......

Observa cómo el usuario puede escribir en el cuadro amarillo del párrafo anterior.

Nuevos eventos javascript

Un evento javascript es una acción que ejerce el usuario y que es detectada por javascript para poner en marcha un código. Los eventos son detectados mediante una serie de atributos que empiezan todos por "on" (onclick, onmousemove, etc.). A los eventos usados comunmente se añaden otros:

Eventos para arrastrar elementos: Hay una serie de eventos relacionados con la nueva aplicación Drag and Drop (arrastrar y soltar), los veremos más adelante cuando expliquemos esta función. Estos son: ondrag, ondargend, ondragenter,opndragleave, ondragover, ondragstart, ondrop. Asímismo también tenemos el atributo draggable que indica que el elemento puede ser arrastrado.

Eventos del ratón

Los nuevos eventos que tenemos cuando utilizamos el ratón, son los descritos anteriormente para arrastrar y soltar y además:

Eventos al cargar la página

Al cargar la página puede haber otra serie de eventos, estos se aplican a la etiqueta body. Los nuevos que hay en HTML 5 son:

Novedades en el DOM

Hay disponibles nuevas funciones para el DOM algunas se aplican al documento (document.---- y otras sobre los elementos. Veamos cuáles son las principales novedades.

Otra serie de funciones están relacionadas con las nuevas aplicaciones que incorpora HTML 5, tales como canvas o Drag & Drop. Las veremos al estudiar esos temas.






En la siguiente página veremos cuales son las etiquetas y atributos que en HTML 5 quedan eliminados del estándar.

Elementos eliminados



Manual HTML5

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo