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>Atributos</title>
</head>
<body>
<header>
<h1>Atributos</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>Atributos de la etiqueta parrafo</h1>
<h2>practica con etiqueta p</h2>
</hgroup>
<p>Este es un parrafo normal</p>
<p draggable="true">Este parrafo lo puedes arrastrar</p>
<p contenteditable="true">Este parrafo es editable</p>
<p hidden>Este estara oculto, no lo veras</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>
Los atributos incluidos son draggable con el que haremos que el texto se pueda mover, con contenteditable conseguimos editar el texto y con hidden lo ocultamos, este ultimo sera util con algo de codigo como javascript, ya que podremos modificar su atributo en ejecucion y hacer que aparezca y desaparezca.
Esperando sea util, gracias.
No hay comentarios:
Publicar un comentario