La Estructura Básica de una Página Web
¡Hola, Maker! Ya sabemos que HTML es el esqueleto de nuestra página. Pero así como el cuerpo humano siempre tiene la cabeza arriba y los pies abajo, un documento HTML siempre, pero siempre, debe seguir un orden obligatorio para que el navegador no se confunda.
1. Las 4 Etiquetas Sagradas 🗺️
Para empezar cualquier proyecto web, existe una plantilla inicial que es como el "molde" universal. Todo lo que programes en tu vida escolar de ICT irá dentro de esta estructura:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Primer Portal Maker</title>
</head>
<body>
<h1>¡Bienvenidos a mi sitio web!</h1>
<p>Aquí mostraré mis proyectos de robótica con Arduino y Micro:bit.</p>
</body>
</html>2. ¿Qué significa cada línea? (Sin tecnicismos)
Vamos a desarmar este rompecabezas para entender qué le estamos diciendo a la computadora en cada renglón:
| Línea de Código | ¿Qué le dice al navegador? 🗣️ |
|---|---|
<!DOCTYPE html> |
¡Atención! Prepárate porque te voy a enviar un archivo de la última versión moderna: HTML5. |
<html lang="es"> |
Aquí inicia oficialmente la página web y todo el contenido estará escrito en español. |
<head> |
La Cabeza (Invisible): Aquí se guardan los secretos de la página. El usuario no ve esto en la pantalla, pero sirve para configuraciones como los acentos (UTF-8) o el nombre de la pestaña. |
<title> |
Es el título oficial que aparece arriba en la pestaña del navegador (por ejemplo, al lado del icono de YouTube). |
<body> |
El Cuerpo (¡El show principal!): Todo lo que metas aquí adentro es lo que tus amigos, profesores y papás podrán ver, leer y clickear en la pantalla. |
3. Pensando en Bloques: Contenedores
Aprender ICT es aprender a ser ordenado. Nota cómo en el código anterior, unas etiquetas están "metidas" dentro de otras. A esto en el mundo Maker le llamamos anidación.
- El sobre completo es la etiqueta
<html>. - Los datos del remitente y el sello postal que lee la empresa de envíos son el
<head>. - La hoja de papel con el mensaje, los dibujos y las fotos que lee tu amigo es el
<body>.
Reto de Diagnóstico en Parejas
Mira con atención el siguiente código que escribió un estudiante de séptimo grado. El navegador se volvió loco y no muestra nada en la pantalla. ¿Puedes descubrir los dos errores que cometió?
<head>
<title>Mi Robot</title>
</head>
<body>
<h1>Proyecto Seguidor de Línea</h1>
<p>Usa dos sensores TCRT5000.
</body>
Pista Maker: Revisa muy bien las "cajas" contenedoras y las etiquetas de cierre. ¡El primero en encontrar los errores se gana un punto en el tablero!