HTML desde cero: crea tu primera página
Vamos a crear una página pequeña desde un archivo vacío. Cada paso añade una parte que puedes comprobar antes de continuar. Al terminar tendrás una presentación con encabezado, navegación, contenido e imagen; no hace falta añadir estilos para que el documento tenga sentido.
Empieza por un archivo que el navegador reconozca
Crea una carpeta llamada mi-pagina y guarda dentro un archivo index.html. Escribe el doctype, html lang="es", head y body. En head coloca meta charset="utf-8" y un title breve. En body añade un h1 que describa el tema. Abre el archivo en el navegador. La primera comprobación es simple: el texto del encabezado debe aparecer en la página y el título debe identificarse en la pestaña.
Si el navegador muestra el código sin interpretarlo, comprueba la extensión. Un archivo llamado index.html.txt sigue siendo texto, aunque el explorador oculte parte del nombre. Activa la visualización de extensiones y cambia el nombre si hace falta. Si ves una página anterior, verifica la ruta completa del archivo abierto.
Añade contenido que se pueda recorrer
Debajo del encabezado escribe una introducción en un párrafo y una lista de tres puntos. Elige ul cuando el orden no importe y ol cuando representes una secuencia. Añade un segundo encabezado para separar otra idea. Después crea una navegación corta con un enlace a #contacto y una sección cuyo atributo id sea contacto. Al activar el enlace, el navegador debe ir a esa sección dentro de la misma página.
<nav aria-label="Secciones"> <a href="#contacto">Contacto</a> </nav> <section id="contacto"> <h2>Contacto</h2> <p>Escribe aquí una forma de contacto.</p> </section>
El nombre del fragmento después de # debe coincidir exactamente con el id. Si el enlace no salta a la sección, compara ambos textos carácter por carácter. Evita repetir el mismo id en dos lugares porque el destino dejaría de estar claro.
Incluye una imagen con propósito
Crea una carpeta images dentro del proyecto y coloca allí una imagen que tengas derecho a usar. Enlázala con una ruta relativa, por ejemplo images/foto.jpg. Escribe un alt que transmita la información de la imagen cuando esta no pueda verse; si es puramente decorativa, un alt vacío puede ser más adecuado. No uses el nombre del archivo como descripción automática. La ruta relativa se interpreta desde el archivo HTML, de modo que mover uno de los archivos sin actualizar la ruta romperá la imagen.
Antes de dar el proyecto por terminado, recarga la página y comprueba cuatro cosas: la navegación llega a su sección, la imagen carga o tiene una alternativa coherente, las etiquetas principales cierran donde corresponde y el idioma está indicado. Desactiva temporalmente cualquier CSS si lo añadiste: los títulos, párrafos y listas deben seguir en un orden lógico. Guarda una copia del archivo terminado y cambia un solo texto para confirmar que realmente controlas el resultado.
Haz una última prueba sin conexión a la red. El archivo local debe conservar su texto, sus enlaces internos y las imágenes que estén dentro de la carpeta del proyecto. Un enlace a otra web, en cambio, necesitará conexión para abrir el destino. Esa diferencia te ayudará a decidir qué recursos son parte de tu proyecto y cuáles dependen de un tercero. Anota las rutas que fallan antes de mover la carpeta a otro lugar.