Antes de empezar el curso.
Grupos y foros.- Módulo 1 - Desarrollo web1.1 Sitios Web4 Temas1 Cuestionario
-
1.2 Lenguajes4 Temas1 Cuestionario
-
1.3 Herramientas3 Temas
- Módulo 2 - HTML2.1 Estructura5 Temas1 Cuestionario
-
2.2 Contenido6 Temas1 Cuestionario
-
Descargar material 1
- Módulo 3 - CSS3.1 Estilos2 Temas
-
3.2 Referencias2 Temas
-
3.3 Propiedades12 Temas1 Cuestionario
-
Descargar material 2
- Módulo 4 - Diseño web4.1 Cajas1 Tema1 Cuestionario
-
4.2 Modelo de caja tradicional4 Temas1 Cuestionario
-
Proyecto 1 - Netflix13 Temas
-
4.3 Modelo de caja flexible2 Temas1 Cuestionario
-
Proyecto 2 - Azul Web6 Temas
-
Descargar material 3
- Módulo 5 - Diseño web adaptable5.1 Web móvil
- Final del cursoProyecto final2 Temas
-
Despedida del curso
-
Encuesta
Elementos estructurales parte 3
Angel Sánchez 25 abril, 2024
Una vez que hayamos terminado con la cabecera tenemos que continuar con el cuerpo de nuestra página, esto dentro de las etiquetas <body>. Para formar la estructura de nuestra página contamos con los siguientes elementos:
<div> – Este elemento define una división genérica. Se usa cuando no se puede aplicar ningún otro elemento.
<main> – Este elemento define una división que contiene el contenido principal del documento (el contenido que representa el tema central de la página).
<nav> – Este elemento define una división que contiene ayuda para la navegación, como el menú principal de la página o bloques de enlaces necesarios para navegar en el sitio web.
<section> – Este elemento define una sección genérica. Se usa frecuentemente para separar contenido temático, o para generar columnas o bloques que ayudan a organizar el contenido principal.
<aside> – Este elemento define una división que contiene información relacionada con el contenido principal pero que no es parte del mismo, como referencias a artículos o enlaces que apuntan a publicaciones anteriores.
<article> – Este elemento representa un artículo independiente, como un mensaje de foro, el artículo de una revista, una entrada de un blog, un comentario, etc.
<header> – Este elemento define la cabecera del cuerpo o de secciones dentro del cuerpo.
<footer> – Este elemento define el pie del cuerpo o de secciones dentro del cuerpo.
En conjunto todos estos elementos nos ayudan a formar la estructura tradicional de una página web, pero en realidad pueden ser utilizados de muchas formas. A continuación te muestro una imagen de una estructura utilizada comúnmente por muchos paginas web:
Archivo index.html usado en el video.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi primera pagina web.</title>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/style.css">
<script type="text/javascript" src="JS/script.js"></script>
</head>
<body>
<header>
Logo - Esta es mi primera pagina hecha en HTML.
</header>
<nav>
Me 1 - Me 2 - Me 3 - Me 4
</nav>
<main>
<article>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quo atque, nulla tempore molestias eum, maiores facilis alias consequuntur non placeat omnis earum? Esse animi accusantium saepe dignissimos reiciendis dolore.
</section>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quo atque, nulla tempore molestias eum, maiores facilis alias consequuntur non placeat omnis earum? Esse animi accusantium saepe dignissimos reiciendis dolore.
</section>
</article>
</main>
<aside>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam consequatur cupiditate ad cumque earum dicta ea quas libero, voluptate necessitatibus nihil alias ducimus est nemo? Quo quia eos doloremque dolores.
</aside>
<footer>
Este es el pie de pagina.
</footer>
</body>
</html>