Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Nuevo HTML5

Las nuevas tendencias llegan a las páginas web con HTML5.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

HTML 5 (V)

Otras etiquetas

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>

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 para indicar el título de este elemento:

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

mark

Resalta un texto con un color de fondo distinto.

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

Disponible en todos los navegadores.

meter

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.

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

No disponible en Internet Explorer ni en Safari.

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>

No disponible en Safari.

time

Para representar una fecha u hora

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

Otras etiquetas

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

• command : Representa un comando que un usuario puede usar en un navegador.
• output : Representa una salida de un programa, normalmente ejecutado por el navegador.
• datagrid : representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información

Nuevos atributos

También hay nuevos atributos en HTML5, 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

No disponible en Internet Explorer 9 o anteriores.

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.

disponible en todos los navegadores.

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, ondragleave, 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:

• OnMouseWheel : Se activa al utilizar la rueda del ratón.
• OnScroll : Se activa mover la barra de desplazamiento del elemento que lo lleva.

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:

• onafterprint : Se ejecuta después de que el documento se imprima.
• onbeforeprint : Se ejecuta antes de que el documento se imprima.
• onbeforeonload : Se ejecuta antes de que se cargue el documento.
• onerror : Se ejecuta cuando se produce un error.
• onhaschange : Se ejecuta cuando el documento ha cambiado.
• onoffline : Se ejecuta cuando el documento se desconecta de la red.
• ononline : Se ejecuta cuando el documento se conecta a la red.
• onpagehide : Se ejecuta cuando la ventana está oculta.
• onpageshow : Se ejecuta cuando la ventana se hace visible.
• onpopstate : Se ejecuta cuando cambia el historial de la ventana.
• onresize : Se ejecuta cuando la ventana cambia de tamaño
• onstorage : Se ejecuta cuando el documento se está cargando.
• onunload : Se ejecuta cuando el usuario deja el documento.

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.

• innerHTML : Este atributo, de sobras conocido y muy usado por todos los desarrolladores, se añade por fin al estándar.
• getElementsByClassName() : Está disponible ahora para todos los elementos y para el documento. Su funcionamiento es parecido al de getElementById() pero con el atributo class. Si hay más de un elemento que lo lleva, se crea un array.
• classList : Este atributo devuelve una lista con todas las clases que tiene el elemento al que se le aplica.

• getSelection() : Se aplica al documento, y devuelve un objeto con el elemento que está seleccionado.

Otra serie de funciones están relacionadas con las nuevas aplicaciones que incorpora HTML5, 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 HTML5 quedan eliminados del estándar.

Elementos eliminados

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com