Fundamentos Web
Los ladrillos con los que se construye cualquier página: HTML, CSS, JavaScript y cómo se organiza todo por dentro.
0 / 5 lecciones completadas (0%)
HTML desde cero
Lección 02CSS desde cero
Lección 03JavaScript básico
Lección 04Estructura de carpetas
Lección 05Cómo funciona un navegador
HTML desde cero
HTML (HyperText Markup Language) es el esqueleto de toda página web. No es un lenguaje de programación: es un lenguaje de marcado, es decir, describe qué es cada cosa (un título, un párrafo, una imagen) usando etiquetas. El navegador lee esas etiquetas y decide cómo mostrarlas en pantalla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera pagina</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera pagina web hecha con HTML.</p>
<img src="gato.jpg" alt="Un gato durmiendo">
</body>
</html>¿Qué etiqueta se usa para el título más importante de una página?
CSS desde cero
CSS (Cascading Style Sheets) da estilo a lo que HTML ya ha construido: colores, tamaños, espacios, tipografías y posición de los elementos. Se puede escribir dentro del propio HTML, pero lo habitual y más ordenado es guardarlo en un archivo .css aparte y enlazarlo.
body {
font-family: Arial, sans-serif;
background-color: #0a1628;
color: white;
}
h1 {
color: #4dd8e8;
text-align: center;
}
.tarjeta {
border: 1px solid #333;
border-radius: 8px;
padding: 16px;
}¿Cuál es la forma correcta de enlazar un archivo CSS externo llamado estilos.css?
JavaScript básico
JavaScript es el lenguaje que da vida e interacción a una web: reacciona a clics, valida formularios, cambia contenido sin recargar la página. A diferencia de HTML y CSS, JavaScript sí es un lenguaje de programación completo, con variables, condiciones y funciones.
// Variables y funcion simple
let nombre = "Ana";
function saludar(persona) {
return "¡Hola, " + persona + "!";
}
console.log(saludar(nombre));
// Reaccionar a un clic
document.querySelector("#miBoton").addEventListener("click", () => {
alert("¡Has pulsado el boton!");
});Modifica el código para que el saludo incluya tu propio nombre y muestre el resultado con document.write() en lugar de console.log(). Pulsa «Ejecutar» para probarlo.
Estructura de carpetas
Un proyecto web ordenado separa el contenido por tipo: una carpeta para imágenes, otra para estilos, otra para scripts. Esto facilita encontrar archivos, subirlos por FTP y que el propio código los localice mediante rutas relativas.
mi-proyecto/
|-- index.html
|-- estilos.css
|-- script.js
|-- /imagenes
| |-- logo.png
| `-- fondo.jpg
|-- /paginas
| |-- contacto.html
| `-- sobre-mi.html
`-- /assets
`-- /iconosAntes de subir tu proyecto por FTP, comprueba:
- Todos los nombres de archivo están en minúsculas y sin espacios ni tildes
- Las rutas a imágenes y CSS son relativas (no empiezan por C:\\ ni con rutas de tu ordenador)
- index.html está en la carpeta raíz, no dentro de una subcarpeta
- No hay archivos innecesarios (borradores, capturas, copias de seguridad)
Cómo funciona un navegador
Cuando escribes una URL, el navegador pregunta a un servidor «¿tienes esta página?». El servidor responde enviando el HTML, que el navegador va leyendo de arriba abajo, descargando el CSS y JavaScript que encuentra, y construyendo la página en pantalla pieza a pieza. Este proceso se llama renderizado.
1. Escribes: www.digitosystems.es
2. El navegador pregunta al DNS: "¿que IP tiene ese nombre?"
3. Se conecta al servidor en esa IP
4. El servidor responde con el archivo index.html
5. El navegador lee el HTML y pide tambien estilos.css y script.js
6. Con las tres piezas, construye y pinta la pagina final¿Qué ocurre primero cuando el navegador recibe el HTML de una página?