Publicado el Deja un comentario

Html5 – 11. Meter

En esta entrada introduzco la etiqueta “meter”, nos servira para mostrar una barra de progreso.
Para ver un ejemplo, retomamos la plantilla web que hemos creado en los
apartados anteriores, modificando el “article” principal:

<!DOCTYPE html>
<html>

<head>
<meta charset=’utf-8′>
<link rel=”stylesheet” href=”hojadeestilo.css”>
<title>Meter</title>
</head>
<body>
<header>
<h1>Etiqueta meter</h1>
<figure><img src=”milogo.jpeg”/></figure>
</header>

<nav>
<ul>
<li><a href=”index.html”>Inicio</a></li>
<li><a href=”acercade.html”>Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Barra de progreso con Meter</h1>
<h2>practica</h2>
</hgroup>
<p>barra de progreso</p>
<meter value=”5″ max=”10″ min=”0″>no soporto la etiqueta meter</meter>
</article>

</section>

<aside>
<h1>Siguenos en:</h1>
<ul>
<li><a href=”facebook.html”>Facebook</a>
</li>
<li><a href=”twitter.html”>Twitter</a></li>
</ul>
</aside>
<footer>

<p>Pagina creada por Ticoticotaa @2016</p>

<ul>
<li><a href=”contacto.html”>Contacto</a>
</li>
<li><a href=”mapaweb.html”>Mapa Web</a></li>
</ul>
</footer>
</body>
</html>

Dentro del parrafo “p” ponemos texto indicando que es una barra de progreso.
Con la etiqueta meter le decimos al navegador que muestre la barra de progreso, en este caso le hemos puesto un valor = 5, con un maximo de 10 y un minimo de 0, podeis cambiar los valores por practicar y ver como queda. En caso de que el navegador no soporte esta etiqueta, lo mostrara imprimendo el texto indicando que no soporta dicha etiqueta.
Una de las utilidades de esta etiqueta es mostrar el progreso por ejemplo en la realizacion de un curso, con php es sencillo ir modificando el valor de dicha etiqueta en su momento de ejecucion segun los valores que se le indiquen desde el codigo.

Please follow and like us:

Deja un comentario