9. Curso HTML5. Novedades. Tags: video y canvas(1)
- Vamos a continuar con nuestro curso de html . Después de ver en la entrada anterior algunas de las nuevas etiquetas que trajo html5. En este capítulo veremos las etiquetas de video y canvas.
- Os cuento un poco para que se usan las nuevas etiquetas antes de ver el vídeo:
- Etiqueta video: Nuevo elemento HTML5 que permite incluir un fichero de vídeo 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.
- Etiqueta canvas: Con HTML5 podemos dibujar, manipular bits de imágenes e incluso de video. Para ello primero creamos e identificamos un canvas. Después vía javascript ( https://es.wikipedia.org/wiki/JavaScript) dibujamos lo que nos apetezca.
- 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" />
<script type="text/javascript">
function dibuja() {
var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
</script>
</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 />
<video controls="controls" height="300" width="300" muted>
<source src="Suscribete.mp4" type="video/mp4" />
</video><br />
<canvas id="myCanvas" >
</canvas>
<input type="submit" value="Enviar" onclick="dibuja();" />
</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