Las nuevas tendencias llegan a las páginas web con HTML5.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 30
Visitas el mes pasado: 72
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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.
Para escribir conversaciones, como por ejemplo en chats.
<dialog>Texto de la etiqueta dialog</dialog>
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>
Resalta un texto con un color de fondo distinto.
<mark>Texto de la etiqueta mark</mark>
Texto de la etiqueta markDisponible en todos los navegadores.
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 % :No disponible en Internet Explorer ni en Safari.
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%:No disponible en Safari.
Para representar una fecha u hora
Fecha: <time datatime="2011-09-15">15 de Septiembre de 2011</time>
Fecha:Otras etiquetas que todavía no están disponibles en ningún navegador son:
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
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:
No disponible en Internet Explorer 9 o anteriores.
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.
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:
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.
Los nuevos eventos que tenemos cuando utilizamos el ratón, son los descritos anteriormente para arrastrar y soltar y además:
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:
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.
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