Estas Viendo las etiquetas de la estructura de una pagina WEB en HTML5 |
Estructura Semantica HTML5
|
Veamos Como se declara la Pagina |
Debemos preparar al editor para este caso utilizaremos NOTEPAD++ , que es la página principal HTML5 se encuentra el Instalador.
Indicamos al navegador que estamos trabajando con HTML5, Iniciando el código con la Etiqueta <!DOCTYPE html > Luego abrimos la etiqueta HTML y añadimos lang="es"< html lang="es"> Esto es para indicarle que estamos trabajando con el idioma español Llamamos la etiqueta Head y dentro de ella la etiqueta meta charset con el parámetro utf8 para que reconozca los caracteres raros, puntos o tildes. <html lang="es"> <head> <meta charset="utf-8" /> También dentro de nuestro head vamos a colocar el título de nuestra página web con la etiqueta y cerramos head <title>Aprender HTML5 en 5 minutos</title> Luego Creo la etiqueta <Body> que indica que e indica el cuerpo de la pagina WEB, esta de abre y cierra Además debo cerrar siempre la etiqueta HTML Quedando el código así: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Aprender HTML5 en 5 minutos</title> </head> <body> Cuerpo de la pagina WEB donde inicio con la estructura HTML5 </body> </html> |
Estructura de la pagina con HTML5 |
Realice este ejemplo Analizando claramente cada Apartado de la Estructura HTML5, guarde el archivo como prueba.html, Luego Ejecute en Notepad ++
Al ejecutar, Notara que sale el documento Plano y sin distribución, esto es por que solo estamos entendiendo la parte estructural de HTML5 y no aplicamos estilos, ni alineación. <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Aprender HTML5 en 5 minutos</title> </head> <body> <header> <h1>Título de Pagína</h1> </header> <nav> <!-- Navegación --> <a href="inicio.html">Inicio</a> <a href="nosotros.html">Nosotros</a> <a href="opcion.html">Opcion</a> <a href="opcion.html">Opcion</a> </nav> <section id="intro"> <!-- Introducción --> Introducción de texto, noticia y/o informaciòn </section> <section id="intro"> <!-- Contenido principal --> Contenido Principal <article id="article1"> <!-- Contenido del articulo --> Contenido del articulo </article> </section> <aside> <!-- Barra Lateral puede Ubicarse en el lado derecho o Izquierdo--> Enlaces a otras Noticias </aside> <footer> <!-- Pie de Página --> Derechos Reservados @pepito perez </footer> </body> </html> |