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:
[cc lang=»html5″]
< !DOCTYPE html>
Hola soy un h1 desde un header
Hola soy una sección
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.
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.
[/cc]
Código CSS3:
[cc lang=»css»]
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;
}
[/cc]
Nos vemos en el próximo vídeo!
Byspel