fbpx
Volver a Curso

Curso profesional de HTML y CSS.

0% Completado
0/0 Steps
  1. Antes de empezar el curso.

    Grupos y foros.
  2. Módulo 1 - Desarrollo web
    1.1 Sitios Web
    4 Temas
    |
    1 Cuestionario
  3. 1.2 Lenguajes
    4 Temas
    |
    1 Cuestionario
  4. 1.3 Herramientas
    3 Temas
  5. Módulo 2 - HTML
    2.1 Estructura
    5 Temas
    |
    1 Cuestionario
  6. 2.2 Contenido
    6 Temas
    |
    1 Cuestionario
  7. Descargar material 1
  8. Módulo 3 - CSS
    3.1 Estilos
    2 Temas
  9. 3.2 Referencias
    2 Temas
  10. 3.3 Propiedades
    12 Temas
    |
    1 Cuestionario
  11. Descargar material 2
  12. Módulo 4 - Diseño web
    4.1 Cajas
    1 Tema
    |
    1 Cuestionario
  13. 4.2 Modelo de caja tradicional
    4 Temas
    |
    1 Cuestionario
  14. Proyecto 1 - Netflix
    13 Temas
  15. 4.3 Modelo de caja flexible
    2 Temas
    |
    1 Cuestionario
  16. Proyecto 2 - Azul Web
    6 Temas
  17. Descargar material 3
  18. Módulo 5 - Diseño web adaptable
    5.1 Web móvil
  19. Final del curso
    Proyecto final
    2 Temas
  20. Despedida del curso
  21. Encuesta
Lección 5, Tema 5

Elementos estructurales parte 3

Angel Sánchez 19 abril, 2024
Lección Progreso
0% Completado

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>