Curso HTML5 Etiquetas semánticas

Las etiquetas semánticas de HTML5 nos permiten definir la estructura de nuestra pagina web y organizar nuestro contenido de tal manera que sea mas accesible para los diferentes buscadores, esto ayuda mucho en temas de posicionamiento.

En este segundo vídeo del curso se muestra el uso de estas etiquetas creando una pagina web donde estructuramos nuestro contenido y ademas le aplicamos algunos estilos utilizando CSS3.

A continuación les dejo el código HTML5 y CSS3 que utilizamos en este segundo vídeo.

Código HTML5:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
< !DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>Etiquetas semánticas</title>
        <link rel="stylesheet" href="estilo.css"/>
    </head>
    <body>
        <header>
            <h1>Hola soy un h1 desde un header</h1>
        </header>
        <nav>
            <h2>Hola soy el nav donde estará el menú</h2>
        </nav>
        <section>
            <h2>Hola soy una sección</h2>
       
            <article>
                <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
            </article>
            <article>
                <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
            </article>
        </section>
    </body>
    <footer>
        <span>by <a href="http://www.byspel.com">Byspel</a> - todos los derechos reservados</span>
    </footer>
</html>

Código CSS3:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
body {
background: white;
font-family: verdana;
font-size: 16px;
color: #6d6d6d;
margin: 0;
}

header {
background: #ffa500;
padding: 20px;
color: white;
}
nav {
background: #ca4c4d;
padding: 15px;
color: white;
}
section {
background: #e3b333;
padding: 60px;
}

article {
background: #f5f5dc;
padding: 10px;
}
footer {
background: #000000;
padding: 40px;
text-align: center;
}

Nos vemos en el próximo vídeo!

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *