Para ver un ejemplo, retomamos la plantilla web que hemos creado en los apartados anteriores, modificando el "article" principal:
En el mismo sitio donde este grabado el archivo html debereis tener una imagen para enlazarla en este codigo y ver bien el ejemplo.<!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>
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.
No hay comentarios:
Publicar un comentario