8. Curso HTML5. Novedades. Tags: progess, meter y audio
- Vamos a continuar con nuestro curso de html . Después de ver en la entrada anterior algunas de las nuevas campos de formulario que traía html5. En este capítulo veremos las etiquetas progress, meter y audio.
- Os cuento un poco para que se usan las nuevas etiquetas antes de ver el vídeo:
- Etiqueta progress: Se utiliza para indicar el progreso de una tarea. Un ejemplo de su representación en html es: <progress value="25" max="100">25%</progress>
- Etiqueta meter: Representa el valor conocido de un rango, entre un mínimo y un máximo.
- Etiqueta audio: Es un nuevo elemento HTML5 que permite incluir un fichero de audio dentro de una página Web sin la necesidad de recurrir a un plugin. Únicamente en el caso de que el navegador no acepte HTML5 se utilizará el plugin.
- Aquí os dejo un vídeo con ejemplos de uso de estos controles:
- Os dejo también el código html visto en el vídeo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pruebas</title>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<form>
<article>
<header>
<h1>Mi primera página html</h1>
</header>
</article>
<nav>
<ul>
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
</ul>
</nav>
<article class="pagina">
<section class="contenedor">
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIIrOH9SJeXDSEeOFtMxez5Zfnozh9J3l27GClLeYM0LZSaUFN1zCiN3AG604Yxm03evhidS9gxy9bkM9TtOrgoBP1yPbk6CFIb6v8oiqpxWOMVcbEc-h66TLgHrRYXSZ0ZxPhSdtb0A/s640/Basedatosnba.png" />
<figcaption><mark> diseño de BBDD para web Scrapping</mark></figcaption>
</section>
<aside>
<input type="search" placeholder="Busqueda" />
<input type="email" placeholder="email" />
<input type="url" placeholder="url" />
<input type="tel" placeholder="telefono" /><br />
<input type="number" placeholder="numero" min="0" max="10" />
<input type="range" name="nunmero" id="numero" min="0" max="100" step="25" /> <br />
<input type="date" name="fecha" id="fecha" />
<input type="week" name="semana" id="semana" />
<input type="month" name="mes" id="mes" /> <br /><br />
<input type="time" name="hora" id="hora" checked />
<input type="datetime" name="fechahora" id="fechahora" />
<input type="color" name="micolor" id="micolor" /><br /><br />
<progress value="20" max="100" >60%</progress>
<meter min="0" max="100" value="75" ></meter>
<audio controls="controls" class="audio">
<source src="Rock_Intro_4.mp3" type="audiompeg" />
</audio><br /><br />
<input type="submit" value="Enviar" />
</aside>
</article>
<article class="pagina">
<section class="contenedor">
<br />
<mark>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</mark> <br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
</section>
<aside>
<p>YYYYYYYYYYYYYYYy</p>
</aside>
</article>
<article>
<footer>
<ul>
<li><a href="#">Derechos de uso</a></li>
<li><a href="#">Copyright</a></li>
</ul>
</footer>
</article>
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario