Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 39

Visitas el mes pasado: 88

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


El futuro del desarrollo web: HTML 5
Desarrollo Web
Manual de HTML5 en español
Alejandro Castillo Cantón
HTML5 Tags
quackit.com
Las novedades de HTML5
Victor Pimentel - Jazztel
HTML5 Novedades en los formularios
BufferOverflow
El sustituto del 'iframe' en HTML5
Gepetto - Globedia
HTML5 drag and drop
w3schools.com
Arrastrar y soltar en HTML5 nativo
html5rocks.com
javascript dataTransfer Description
javascript.gakaa.com
dataTransfer object
help.dottoro.com
localStorage en HTML5
rolandocaldas.com

Donativos

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




HTML 5 (V)

Otras etiquetas

Nuevas etiquetas

imagen html5

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 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>

Campanilla


mark

Resalta un texto con un color de fondo distinto.

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

Texto de la etiqueta 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>

El 20 % : 20%

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>

progreso 25%: 25%

No disponible en Safari.


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


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 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



Manual de HTML5

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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