Publicado el Deja un comentario

Html5 – 9. Figure

En esta entrada introduzco la etiqueta “figure”, dentro de esta etiqueta podemos meter imagenes, video, audio. Con ella indicamos al navegador que introducimos contenido distinto de texto.
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>Figure con html5</title>
</head>
<body>
<header>
<h1>Etiqueta figure</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>Figure en html5</h1>
<h2>practica</h2>
</hgroup>
<p>Aqui va el texto
<figure><img src=”imagen.jpeg”/>
</figure>aqui continua el texto anterior</p>
</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>

En el mismo sitio donde este grabado el archivo html debereis tener una imagen para enlazarla en este codigo y ver bien el ejemplo.
El resto del codigo ya se vio en anteriores explicaciones, por lo que la introduccion de esta etiqueta es sencilla de entender.
Probar a quitar figure y ver como queda, vereis que el texto cambia de posicion respecto a la imagen.

Please follow and like us:

Deja un comentario