HTML para empezar a programar la web

Antes de escribir etiquetas, decide qué información necesita la persona que visita tu página. Para una presentación personal pequeña bastan un nombre, una frase que explique qué haces y una forma de contacto. HTML convierte esas partes en una estructura que el navegador puede interpretar y que seguirá teniendo sentido cuando cambie el diseño.

Convierte un boceto en partes

Dibuja tres bloques en papel: título, presentación y contacto. El título principal puede ser un h1; la explicación, un párrafo; el contacto, un enlace con un destino real. Si tienes varios proyectos para mostrar, una lista puede ayudar a recorrerlos. No empieces con columnas, colores o animaciones. Esas decisiones pertenecen a CSS y pueden esperar hasta que la información esté completa.

<main>
  <h1>Soy Alex y diseño carteles</h1>
  <p>Trabajo con tipografía y color para eventos locales.</p>
  <h2>Contacto</h2>
  <p><a href="mailto:[email protected]">Escríbeme</a></p>
</main>

Lee el ejemplo sin mirar cómo se renderiza. Ya puedes identificar el tema de la página y la acción disponible. Si sustituyes el texto por información tuya, conserva la relación entre encabezado y párrafos. Evita usar un encabezado solo para hacer una palabra más grande; el tamaño se puede controlar después con CSS.

Añade una imagen que explique algo

Una fotografía de un proyecto puede aportar contexto si enseña un resultado que el texto menciona. Guárdala dentro de la carpeta del sitio y usa una ruta relativa en src. El atributo alt debe transmitir la información que una persona perdería si no viera la imagen. Por ejemplo, puedes describir los elementos visibles de un cartel terminado. No repitas simplemente “imagen” o el nombre del archivo. Si el gráfico es decorativo y la misma información ya está en el texto, un alt vacío puede ser más adecuado.

Después desactiva la imagen en el navegador o cambia temporalmente su ruta. Lee la página de nuevo: ¿se entiende aún qué proyecto presentas? Si no, mejora la descripción o el párrafo que la acompaña. Esa prueba obliga a pensar en el contenido antes que en el efecto visual y también descubre rutas incorrectas.

Comprueba la primera versión

Abre el archivo en un navegador y recorre la página solo con teclado. El enlace de contacto debe recibir foco y llevar a un destino que hayas comprobado. Cambia el texto del título, guarda y recarga para asegurarte de que editas el archivo correcto. Revisa que haya un solo encabezado principal que describa el conjunto y que los subtítulos separen temas reales.

Guarda una copia y pruébala sin hoja de estilos. Si el orden de lectura sigue siendo claro, ya tienes una estructura útil. Si algo solo tiene sentido por su posición o color, reescribe el HTML para expresar mejor la relación entre las partes. En lecciones posteriores puedes añadir CSS para tipografía y espacio, y JavaScript cuando necesites una acción que HTML por sí solo no realiza. La primera victoria es una página pequeña y comprensible que abre desde un archivo propio.