Historia de la Web | Partes del Código HTML

📖 ¿Qué es una página web?

Una página web es un documento digital accesible a través de un navegador web, que puede contener texto, imágenes, videos y enlaces. Se escribe principalmente en HTML junto con CSS y JavaScript.

🔧 Partes del código HTML

El código HTML está compuesto por diferentes elementos que trabajan juntos para crear la estructura de una página web.

<!DOCTYPE html>

📌 ¿Qué es? El DOCTYPE (Declaración de Tipo de Documento) le dice al navegador qué versión de HTML está usando la página.

✅ Función: Asegura que el navegador interprete el código correctamente en modo estándar (no en modo compatibilidad).

💡 Ejemplo actual: <!DOCTYPE html> es la declaración para HTML5, la versión más moderna.

                            <!-- Esto SIEMPRE va al inicio del documento -->
                            <!DOCTYPE html>
                        

<html> </html> - Etiquetas

📌 ¿Qué son? Las etiquetas HTML son los elementos que estructuran el contenido. La mayoría vienen en pares: apertura <etiqueta> y cierre </etiqueta>.

✅ Función: La etiqueta <html> envuelve TODO el contenido de la página. Es la raíz del documento.

💡 Tipos de etiquetas:

De bloque: <div>, <p>, <h1> - Ocupan todo el ancho
En línea: <span>, <a>, <strong> - Solo ocupan su contenido
Vacías (self-closing): <img>, <br>, <hr>

                            <html>
                            <head></head>
                            <body></body>
                            </html>
                        

Las etiquetas se anidan jerárquicamente

<head> </head> - Metadatos

📌 ¿Qué es? El <head> contiene metadatos (información sobre la página que NO se ve en el navegador).

✅ Elementos comunes en el head:

<title> - Título que aparece en la pestaña del navegador
<meta charset="UTF-8"> - Define la codificación de caracteres
<meta name="viewport"> - Controla el diseño en móviles
<link> - Conecta archivos CSS externos
<script> - Conecta archivos JavaScript

                            <head>
                            <title>Mi Página</title>
                            <meta charset="UTF-8">
                            <link rel="stylesheet" href="style.css">
                            </head>
                        

🔍 Lo que se ve en la pestaña → Mi Página

<body> </body> - Contenido visible

📌 ¿Qué es? El <body> contiene TODO el contenido visible de la página: textos, imágenes, botones, videos, etc.

✅ Etiquetas comunes dentro del body:

<header>, <main>, <footer> - Estructura semántica
<h1> a <h6> - Títulos y subtítulos
<p> - Párrafos de texto
<a> - Enlaces (hipervínculos)
<img> - Imágenes
<div> y <section> - Contenedores

                            <body>
                            <h1>Título Principal</h1>
                            <p>Esto es un párrafo</p>
                            <img src="foto.jpg" alt="Descripción">
                            </body>
                        

🏷️ Atributos HTML

📌 ¿Qué son? Los atributos proporcionan información adicional sobre las etiquetas. Siempre van en la etiqueta de apertura.

✅ Atributos más comunes:

class="nombre" - Asigna una clase para CSS/JS
id="único" - Identificador ÚNICO para un elemento
src="ruta" - Fuente de imágenes o scripts
href="url" - Destino de un enlace
alt="texto" - Texto alternativo para imágenes
style="color:red" - Estilo en línea (NO recomendado)

💡 Sintaxis: nombre_atributo="valor"

                            <a href="https://google.com" target="_blank" class="enlace">
                            Ir a Google
                            </a>
                        

href = "https://google.com" → Destino del enlace

target = "_blank" → Abre en nueva pestaña

class = "enlace" → Nombre de la clase CSS

💬 Comentarios en HTML

📌 ¿Qué son? Los comentarios son texto que NO se muestra en la página, solo es visible para quien ve el código fuente.

✅ Para qué sirven:

Documentar y explicar partes del código
Deshabilitar temporalmente código (debugging)
Organizar secciones grandes del código

⚠️ Importante: Los comentarios NO deben usarse para información sensible, ya que cualquiera puede verlos.

                            <!-- Esto es un comentario - no se ve en la página -->
                            <p>Esto SÍ se ve</p>
                            <!-- <p>Este párrafo está oculto</p> -->
                        

📌 En el código fuente (Ctrl+U) puedes ver todos los comentarios

📐 Estructura completa de un documento HTML

                        <!-- Declaración del tipo de documento -->

                        <!DOCTYPE html>

                        <html lang="es">

                        <!-- METADATOS (no visibles) -->

                        <head>

                        <meta charset="UTF-8">

                        <title>Mi Página</title>

                        </head>

                        <!-- CONTENIDO VISIBLE -->

                        <body>

                        <h1>Hola Mundo</h1>

                        <p>Esta es mi primera página web</p>

                        </body>

                        </html>

📅 Fechas más importantes en la historia de la Web

👥 Creadores y Personajes Clave

Tim Berners-Lee

Padre de la World Wide Web. Creó HTML, HTTP y URL.

Robert Cailliau

Co-creador de la Web, promovió el proyecto en el CERN.

Vinton Cerf

Padre de Internet, co-creador del protocolo TCP/IP.

🏛️ Contexto histórico (1989-1993)

🌍 Geopolítica

Caída del Muro de Berlín (1989), fin de la Guerra Fría.

💻 Tecnología

Windows 3.0 (1990), Linux (1991). Internet académico.

🎨 Cultura

Auge del cine digital y el inicio de la era digital.

🕹️ ¿Sabías que...?

Haz clic para descubrir datos curiosos