Home / html5 y css / ESTRUCTURA DE UN DOCUMENTO EN HTML5

ESTRUCTURA DE UN DOCUMENTO EN HTML5


Hola amigos lo que haremos hoy en este artículo es hacer un poco de practica sobre la estructura de HTML5  usando las siguientes etiquetas


<header></header ,  <nav></nav>,  <section></section>,  <article></article>,  <aside></aside>  y <footer></footer>

 Estas etiquetas ya las explique en el artículo anterior si no la viste te recomiendo que veas primero la teoría y luego vuelvas a este articulo, el enlace al articulo anterior está en la parte inferior.

 Como hemos visto con las nuevas etiquetas semánticas introducidas en HTML5, éstas
aportan un significado concreto al documento que estamos definiendo, y por lo tanto,
afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver
un ejemplo sencillo de  una página con las etiquetas introducidas en HTML5.



Para ser nuestra primera pagina web casi completa no esta nada mal verdad, en este ejemplo estamos utilizando algunas de las etiquetas llevadas en los artículos anteriores, a continuación les dejo el código del documento HTML5.



<!DOCTYPE html>
<html>
<head>
    <title>mi primera Pagina web</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <header>
        <a href="/"><img src="LOGOcodeab.png"></a>
        <hgroup>
            <h3>ESTRUCTURA DE UN DOCUMENTO EN HTML5</h3>
            <h4 class="tagline">
                 aplicando algunas etiquetas de HTML5 aprendidas en este curso
            </h4>
        </hgroup>
    </header>
    <nav>
        <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">Galeria</a></li>
        <li><a href="#">Contáctos</a></li>
        </ul>
    </nav>
    <section >
        <article>
                <time datetime="2009-10-22">October 22, 2009</time>
            <h2>
                Mi perrito
            </h2>
            <img src="perrito.PNG" alt="">
        </article>
        <article>  
            <h2>
                Descripción
            </h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam provident, consequatur obcaecati deserunt laboriosam, magni aliquam repudiandae alias accusantium porro vel! Necessitatibus aut ad tempore eveniet qui, assumenda pariatur id?
            </p>
        </article>
    </section>
<footer>
<p>&#169; todos los derechos reservados <a href="#">Codeab</a></p>
</footer>
</body>
</html>


DESCARGA DEL CÓDIGO CSS + IMAGENES CLIK AQUI
Ojo: es un ejemplo muy sencillo y los estilos no están muy bien usados



<--- artículo anterior  -   -  -  Siguiente artículo--->


Bueno eso es todo sobre este tema espero que te aya gustado el artículo y ya saben para no perderte el siguiente únete a nosotros en el grupo de facebook que allí se estará subiendo todos los artículos de esta página web.


GRUPO DE FACEBOOK: <codeAB> programación y más

ESTRUCTURA DE UN DOCUMENTO EN HTML5 ESTRUCTURA DE UN DOCUMENTO EN HTML5 Reviewed by codeAb on 4:17 Rating: 5

TAMBIÉN TE PUEDE INTERESAR

No hay comentarios:

Suscribirse a: Enviar comentarios ( Atom )
Con la tecnología de Blogger.