LABORATORIO2 PROFESOR CARLOS BOBADILLA
Material de Clase: Fundamentos del Desarrollo Web
Asignatura: Laboratorio de Informática | Nivel: 2° BTI
1.1 Sitios Web y su Funcionamiento
Un sitio web no es más que un conjunto de archivos almacenados en un ordenador remoto
llamado servidor. Cuando queremos ver una página, nuestro ordenador (el cliente) solicita esos
archivos a través de un navegador.
El concepto de Navegación
Páginas: Son los documentos individuales que forman el sitio.
Navegar: Es el proceso de abrir y pasar de una página a otra dentro de un sitio.
[Link]: Es el archivo más importante; es la "puerta de entrada" que el servidor busca
por defecto cuando alguien ingresa al dominio sin especificar un archivo.
Anatomía de una URL
Para localizar cualquier recurso en la inmensa red, utilizamos una URL (Uniform Resource Locator).
Según el material, una URL estándar se compone de tres partes fundamentales:
1. Protocolo: Es el lenguaje de comunicación. El estándar para la web es HTTP (o HTTPS para
conexiones seguras y encriptadas).
2. Dominio: Es el nombre amigable que identifica al servidor (ej: [Link]), el cual
reemplaza a la compleja dirección IP numérica.
3. Recurso/Ruta: Es el nombre específico del archivo o carpeta que queremos descargar (ej:
[Link]).
Ejemplo: [Link]
http → Protocolo
[Link] → Dominio
imagenes/[Link] → Ruta del recurso
Los Lenguajes de la Web
El desarrollo moderno bajo el estándar HTML5 integra tres lenguajes esenciales que trabajan en
equipo:
1. HTML (La Columna Vertebral)
Originalmente, el HTML se concibió solo para estructurar texto y compartir documentos entre
ordenadores remotos. Hoy, en su versión HTML5, es el encargado de definir la estructura y el qué
de la página.
Concepto clave: Funciona como un "árbol" donde la raíz es la etiqueta <html>.
LABORATORIO2 PROFESOR CARLOS BOBADILLA
Ejemplo de estructura según el libro:
<!DOCTYPE html> <html lang="es"> <head>
<meta charset="UTF-8"> <title>Mi Sitio Web</title>
</head>
<body>
<article>
<header>
<h1>Título del Artículo</h1>
<time datetime="2026-04-05">Publicado hoy</time>
</header>
<p>Contenido del párrafo con <strong>negrita</strong>.</p>
</article>
</body>
</html>
2. CSS (El Diseñador Visual)
El lenguaje CSS (Cascading Style Sheets) nació para resolver la complejidad de dar formato solo
con HTML. Su función es la presentación: colores, tamaños, tipos de letra y disposición de los
elementos.
Concepto clave: Se basa en Reglas. Una regla tiene un selector (a quién afecta) y
propiedades (qué cambia) entre llaves { }.
Ejemplo de regla CSS según el libro:
p{
color: #FF0000; /* Texto en color rojo */
font-size: 24px; /* Tamaño de letra */
font-family: Arial; /* Tipo de letra */
}
header {
background: #CCCCCC; /* Color de fondo gris */
border: 1px solid; /* Borde sólido */
padding: 15px; /* Espacio interno */
}
JavaScript (El Motor de Funcionalidad)
Es el lenguaje que permite que los sitios web se conviertan en aplicaciones. A diferencia de los
otros dos, JavaScript es un lenguaje de programación profesional que puede modificar el
contenido de la página en tiempo real sin recargarla.
Concepto clave: Interactúa directamente con el HTML para responder al usuario (clics,
movimientos del ratón, cálculos).
// Declaración de una variable
var nombre Estudiante = "Carlos";
LABORATORIO2 PROFESOR CARLOS BOBADILLA
// Función simple para mostrar un mensaje
function saludar() {
alert("¡Hola " + nombreEstudiante + "!");
}
¿Cómo trabajan juntos?
El material explica que la integración de estos tres fue lo que originó la "era de oro" del desarrollo
web:
1. HTML crea la estructura (las paredes y habitaciones de una casa).
2. CSS prepara esa estructura para ser mostrada (pintura, decoración, luces).
3. JavaScript introduce la capacidad de procesamiento (el sistema eléctrico, puertas
automáticas, alarmas).
Evaluación: 5 Preguntas de Repaso
1. ¿Cuál es la diferencia principal entre un "Cliente" y un "Servidor" en el contexto web?
2. Si un usuario entra a [Link] sin especificar un archivo, ¿qué nombre de archivo
buscará el servidor por defecto para mostrar la página inicial?
3. Explica qué significan las siglas HTTP y por qué es necesario en una URL.
4. ¿Para qué sirve el atributo lang="es" dentro de la etiqueta <html>?
5. De los tres lenguajes mencionados (HTML, CSS, JavaScript), ¿cuál es el responsable de que un
botón cambie el color de fondo al hacer clic?