- Una página web es un archivo informático que se guarda con la terminación .html (por ejemplo,
mipagina.html) y que está diseñado para abrirse y visualizarse directamente en un navegador web. - HTML es el código o lenguaje que proporciona la estructura básica obligatoria para construir esa página web. Su funcionamiento se puede entender fácilmente comparándolo con un sándwich o con el cuerpo humano:
1. La Estructura Principal (El Esqueleto)
- <html> (La Caja Principal / El Terreno): Es la etiqueta que envuelve absolutamente todo. Le dice al navegador: «¡Atención, aquí empieza nuestra página web!».
-
- <title> (El Nombre en la Pestaña): Va dentro de
<head>. Es el texto que aparece arriba en la pestaña del navegador.head> (La Cabeza / El Cerebro): Guarda la información invisible para los visitantes, pero necesaria para el navegador (como las instrucciones o el nombre de la página).
- <title> (El Nombre en la Pestaña): Va dentro de
- <body> (El Cuerpo Visible): Todo lo que se coloca aquí sí se ve en la pantalla: textos, imágenes, botones y videos.
2. Las Etiquetas de Contenido Más Comunes
<h1> a <h6> (Los Títulos):
-
- <h1> es el título gigante (el nombre principal de la historia o tema).
- <h2> a <h6> son subtítulos cada vez más pequeños para organizar la información
- <p> (El Párrafo): Sirve para escribir bloques de texto, oraciones o explicaciones.
- <img> (La Fotografía / Dibujo): Coloca fotos o GIFs en la pantalla mediante el atributo
src(la dirección de la imagen). - <a> (El Portal Mágico / Enlace): Crea un texto o botón en el que se puede hacer clic para viajar a otra página web.
- <ul> y <li> (Las Listas de Listados): Sirven para hacer listas de cosas (como los ingredientes de una receta, personajes o pasatiempos).
3. Ejemplo de «Mi Primera Página Web»
Este es el bloque de código básico para mostrarles cómo se juntan todas las piezas:
<!DOCTYPE html>
<html>
<head>
<title>Mi Super Página</title>
</head>
<body>
<h1>¡Bienvenido a mi sitio web! 🚀</h1>
<p>¡Hola! Soy un creador web y este es mi primer proyecto.</p>
<h2>Mis pasatiempos favoritos:</h2>
<ul>
<li>Jugar videojuegos 🎮</li>
<li>Aprender tecnología 💻</li>
<li>Dibujar 🎨</li>
</ul>
<a href="https://www.wikipedia.org">¡Haz clic aquí para explorar el mundo!</a>
</body>
</html>