E
n el primer artículo hemos creado la estructura básica de una página con HTML5. Ahora es el turno de añadiendo contenido. Veremos el nuevo código y a continuación comentaremos las novedades introducidas.
<!DOCTYPE HTML>
<html lang="es-es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Page title</title>
</head>
<body>
<header>
<h1>Título de la página</h1>
</header>
<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archivos</a></li>
<li><a href="#">Contacto</a></li>
<li class="subscribe"><a href="#">Subscribete via. RSS</a></li>
</ul>
</nav>
<section id="intro">
<header>
<h2>Que te gusta hacer?</h2>
</header>
<p>Comentanos tus aficiones</p>
</section>
<section>
<article class="blogPost">
<header>
<h2>Título del post</h2>
<p>Publicado el <time datetime="2009-06-29T23:31:45+01:00">5 de Septiembre 2010</time> por <a href="#">Xandru Cancelasr</a> - <a href="#comments">3 commentarios</a></p>
</header>
<p>Seguiremos comentado..</p>
</article>
</section>
<video src="http://v17.lscache5.c.youtube.com/videoplayback?ip=0.0.0.0&sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0dXR1dSTl9FSkNNN19PTFJB&fexp=900161&itag=18&ipbits=0&sver=3&ratebypass=yes&expire=1282770000&key=yt1&signature=97D02D5AA98C223F22168D150E5E1F7049CEFA22.9812D05BCFDD36E77A2719183C4DE85080C1538A&id=b44f53795df29936" />
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Nombre</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Website</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Comentario</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Post comment" /></p>
</form>
<aside>
<section>
<header>
<h3>Categorías</h3>
</header>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
</ul>
</section>
<section>
<header>
<h3>Archivos</h3>
</header>
<ul>
<li><a href="#">Agosto 2010</a></li>
<li><a href="#">Septiembre 2010</a></li>
</ul>
</section>
</aside>
<footer>
<div>
<section id="about">
<header>
<h3>About</h3>
</header>
<p>Conoce más <a href="#">sobre mí</a></p>
</section>
<section id="blogroll">
<header>
<h3>Blogroll</h3>
</header>
<ul>
<li><a href="#">Blogroll 1</a></li>
<li><a href="#">Blogroll 2</a></li>
</ul>
</section>
<section id="enlace">
<header>
<h3>Enlaces</h3>
</header>
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
</ul>
</section>
</div>
</footer>
</body>
</html>
– En la pimera sección (intro) vemos que se añade la etiqueta header para especificar un subtítulo.
– En la sección central se introduce una nueva etiqueta “article” que nos indica que se trata de un texto que puede ser utilizado y redistribuida como feed, por ejemplo.
– Time indica que se trata de un horario o fecha. Desglosaremos su formato:
o En primer lugar se muestra la fecha con formato yyyy-mm-dd
o La “T” indica que se va a usar hora local.
o A continuación la hora local en formato hh:mm:ss
o Por último indicamos la zona GTM en la que nos encontramos. En nuestro caso será Madrid GTM +2.
– En el formulario vemos que se añaden dos nuevos tipos de inputs: email y url. Si escribimos required como atributo, el campo será obligatorio para el usuario.
Aquí finalizamos nuestro mini tutorial introductorio a HTML5. En cuanto vayamos probando nuevas utilidades os iremos informando.
Si tienes dudas sobre si debes configurar Apache para soporta HTML5, consulta el siguiente artículo.
Comentarios recientes