Los tres lenguajes de la web
Una página web es como una casa. HTML son las paredes y los cuartos (la estructura). CSS es la pintura y los muebles (cómo se ve). JavaScript es la electricidad: hace que las luces se prendan cuando aprietas el interruptor.
- HTML (HyperText Markup Language) describe el contenido y la estructura usando etiquetas como
<h1>(título principal) y<p>(párrafo). - CSS (Cascading Style Sheets, hojas de estilo en cascada) controla cómo se ven las cosas: colores, fuentes, espacios, diseño.
- JavaScript agrega comportamiento: reaccionar a clics, mostrar y ocultar cosas, revisar formularios.
- Un navegador (Chrome, Firefox, Safari, Edge) descarga estos archivos de un servidor y dibuja la página.
- MDN Web Docs (de Mozilla) es una referencia gratuita y confiable para los tres lenguajes. Cuando olvides cómo funciona algo, búscalo ahí.
- Un sitio pequeño típico tiene tres archivos en una carpeta:
index.html,style.cssyscript.js. La página de inicio normalmente se llamaindex.html.
Videos by other creators on YouTube, for reference. They are not made by or affiliated with The Future Market.
Read the video script
[Host] "Todos los sitios web que has visitado están hechos con tres lenguajes."
[Text on screen: HTML = estructura, CSS = estilo, JavaScript = comportamiento] "HTML son las paredes. CSS es la pintura. JavaScript es el interruptor de la luz."
[Screen: carpeta con index.html, style.css, script.js] "Tres archivos en una carpeta. Eso es un sitio web."
Instala un editor de código. Crea una carpeta llamada my-site con tres archivos vacíos: index.html, style.css y script.js.
ClaudeStuck? Copy a ready-made prompt for Claude
Copy this, open Claude, paste it, and Claude will walk you through the lesson step by step.
For a grown-up: Claude is for adults (18+). Copy this, paste it into Claude, and use the answer to explain the lesson to your child.
I'm learning "Desarrollo web básico (HTML, CSS, JavaScript)" on The Future Market. Lesson 1: "Los tres lenguajes de la web". What the lesson teaches: - HTML (HyperText Markup Language) describe el contenido y la estructura usando etiquetas como <h1> (título principal) y <p> (párrafo). - CSS (Cascading Style Sheets, hojas de estilo en cascada) controla cómo se ven las cosas: colores, fuentes, espacios, diseño. - JavaScript agrega comportamiento: reaccionar a clics, mostrar y ocultar cosas, revisar formularios. - Un navegador (Chrome, Firefox, Safari, Edge) descarga estos archivos de un servidor y dibuja la página. - MDN Web Docs (de Mozilla) es una referencia gratuita y confiable para los tres lenguajes. Cuando olvides cómo funciona algo, búscalo ahí. - Un sitio pequeño típico tiene tres archivos en una carpeta: index.html, style.css y script.js. La página de inicio normalmente se llama index.html. The exercise I'm working on: Instala un editor de código. Crea una carpeta llamada my-site con tres archivos vacíos: index.html, style.css y script.js. I'm stuck. Please: 1. Explain the main idea in plain, simple words with one everyday example. 2. Walk me through the exercise one small step at a time. Ask me what I've done so far before giving the next step. 3. Don't just give me the final answer. Help me do it myself, and check my work when I share it.
I'm a parent helping my child (about 8 years old) with a lesson called "Los tres lenguajes de la web" from the course "Desarrollo web básico (HTML, CSS, JavaScript)". Here's what the lesson says: Una página web es como una casa. HTML son las paredes y los cuartos (la estructura). CSS es la pintura y los muebles (cómo se ve). JavaScript es la electricidad: hace que las luces se prendan cuando aprietas el interruptor. The activity: Instala un editor de código. Crea una carpeta llamada my-site con tres archivos vacíos: index.html, style.css y script.js. Please explain this so an 8-year-old understands: short sentences, a fun everyday example, and no hard words. Then give me 3 simple questions I can ask my child to check they understood, and a way to do the activity together, one tiny step at a time.
Sources
- MDN Web Docs, learn web development: developer.mozilla.org/en-US/docs/Learn_web_development
HTML: la estructura
This lesson is part of full access: every course and every level for one payment.
CSS: el estilo
This lesson is part of full access: every course and every level for one payment.
JavaScript: el comportamiento
This lesson is part of full access: every course and every level for one payment.
Herramientas para desarrolladores: mira por dentro cualquier página
This lesson is part of full access: every course and every level for one payment.
Publica tu sitio gratis
This lesson is part of full access: every course and every level for one payment.
Final project
This lesson is part of full access: every course and every level for one payment.
Quiz
¿Qué lenguaje controla la estructura, cuál el estilo y cuál el comportamiento?
HTML la estructura, CSS el estilo, JavaScript el comportamiento.
¿Cuál es el nombre de archivo habitual de la página de inicio de un sitio?
index.html.
¿Por qué cada imagen necesita un atributo alt?
Describe la imagen para quienes usan lectores de pantalla y aparece si la imagen no carga.
En la regla de CSS
h1 { color: navy; }, ¿cuál es el selector?h1.
¿Qué hace una media query como
@media (max-width: 600px)?Aplica estilos solo en pantallas de 600px de ancho o menos.
¿Cuál es la diferencia entre
letyconst?let se puede cambiar después; const no se puede reasignar.
¿Qué da
5 + "5"en JavaScript?"55" (texto).
¿Qué método encuentra un elemento en la página?
document.querySelector().
¿Cómo abres Chrome DevTools en Windows?
F12 o Ctrl+Shift+I.
¿Puedes usar GitHub Pages para manejar una tienda en línea?
No, no está pensado para sitios comerciales como tiendas en línea ni para transacciones delicadas.
Final exam
This lesson is part of full access: every course and every level for one payment.
Certificate
This lesson is part of full access: every course and every level for one payment.