Hacer una página web sencilla

De 13 a 17 años Leer solo · unos 60 minutos

Lean juntos

Una página web es un archivo de texto. HTML marca el contenido con etiquetas: títulos, párrafos, enlaces e imágenes. CSS controla cómo se ve: colores, fuentes y diseño. Puedes hacer una página solo con un editor de texto y un navegador, sin internet.

Las buenas páginas son accesibles. Da a las imágenes una descripción corta (texto alternativo) para que las personas que no pueden verlas entiendan. Usa los títulos en orden. Haz el texto legible, con buen contraste.

Este sitio web está construido de la misma manera: HTML y CSS sencillos, con un poco de JavaScript y sin rastreo.

Háganlo

1. Abre un editor de texto sencillo y crea un archivo llamado page.html. Escribe: <!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>Mi página</title> </head> <body> <h1>Sobre mí</h1> <p>¡Hola!</p> </body> </html>. Guárdalo y abre el archivo en un navegador.
2. Añade un segundo título con <h2>, una lista con <ul> y <li>, y un enlace con <a href="...">. Recarga la página para ver cada cambio.
3. Añade estilo: en el head, escribe <style> body { font-family: serif; max-width: 40rem; margin: 2rem auto; } </style>. Cambia un color. Comprueba que el texto se lea con facilidad.
4. Añade una imagen con <img src="foto.jpg" alt="Una descripción breve">. ¿Por qué importa el texto alternativo?

Conversen

• ¿Cuál es la diferencia entre HTML y CSS?
• ¿Quién se beneficia del texto alternativo?

Para el adulto

Construir una página sencilla en casa enseña cómo funciona la web y se puede hacer sin conexión. Si tu adolescente quiere publicar una página, hablen primero de privacidad: no incluyas nombres completos, direcciones, escuelas ni fotos de otros niños.

Marcar como hecha

← Lección anterior Lección siguiente →

De dónde viene esto

• World Wide Web Consortium (W3C), HTML Living Standard and Web Content Accessibility Guidelines (WCAG) 2.2, on text alternatives
• Mozilla Developer Network (MDN) Web Docs, “Learn web development”

Escrito con ayuda de IA y revisado con las fuentes indicadas. Léelo antes de compartirlo con un niño.

Este idioma todavía no lo ha revisado un hablante nativo.