Cómo hacer una página web con HTML

Para hacer una página web con HTML basta un editor de texto y un navegador. Escribes un archivo index.html con el DOCTYPE y la etiqueta html, que se divide en head y body. Luego lo abres en el navegador para verlo. HTML es la pieza más básica de la Web y define la estructura del contenido.

Qué necesitas para empezar.

No hace falta instalar nada especial. Sirve el Bloc de notas de Windows, aunque un editor de código como Visual Studio Code ayuda mucho. Colorea las etiquetas y avisa cuando olvidas cerrar alguna.

El segundo programa es el navegador que ya usas. Con él abrirás el archivo y verás el resultado cada vez que guardes.

Paso 1. Crea el archivo.

Crea una carpeta para tu web y, dentro, un archivo llamado index.html. Ese nombre importa. Los servidores lo entregan por defecto cuando alguien entra en la dirección sin indicar página.

Guárdalo con codificación UTF-8. Así los acentos y la eñe se verán bien en cualquier navegador.

Paso 2. Escribe el esqueleto mínimo.

Toda página HTML lleva las mismas líneas de partida. Escríbelas en este orden.

1. <!DOCTYPE html>, que va siempre en la primera línea.
2. <html lang="es">, que abre el documento y dice que está en español.
3. <head>, que abre la parte que no se ve.
4. <meta charset="utf-8">, para los acentos.
5. <meta name="viewport" content="width=device-width, initial-scale=1">, para que se adapte al móvil.
6. <title>Panadería Ejemplo</title>, el nombre que sale en la pestaña.
7. </head> y, a continuación, <body>, donde va todo lo visible.
8. </body> y </html>, que cierran el documento.

El DOCTYPE parece un adorno, pero no lo es. Se exige por razones históricas, y sin él los navegadores usan otro modo de mostrar la página. La etiqueta html es la raíz de la que cuelga todo lo demás.

El title merece cuidado. Representa el nombre del documento, y es lo que verás en la pestaña y en los resultados de Google.

Paso 3. Ordena el contenido con etiquetas.

Dentro de body, cada bloque lleva la etiqueta que describe su función. Se llaman etiquetas semánticas.

La etiqueta main marca el contenido dominante del documento. Usar estas etiquetas en lugar de cajas genéricas ayuda a los lectores de pantalla y a los buscadores. Las explicamos con más detalle en partes de una página web.

Ejemplo de página web en HTML.

Así quedaría el body de una panadería de barrio. Cada línea es una etiqueta con su contenido.

1. <header> con <h1>Panadería Ejemplo</h1> dentro.
2. <nav> con tres enlaces, del tipo <a href="#horario">Horario</a>.
3. <main>, que abre el contenido.
4. <section id="pan"> con un <h2>Nuestro pan</h2> y un párrafo <p>.
5. <img src="hogaza.jpg" alt="Hogaza de masa madre recién hecha">.
6. <section id="horario"> con el horario en una lista <ul> y sus <li>.
7. </main> para cerrar el contenido.
8. <footer> con la dirección, el teléfono y el enlace al aviso legal.

Fíjate en el atributo alt de la imagen. Las pautas WCAG piden que todo contenido no textual tenga una alternativa de texto. Describe lo que se ve, no «imagen1».

Paso 4. Dale estilo con CSS.

HTML ordena el contenido, pero no decide colores ni tipografías. De eso se encarga CSS, el lenguaje que describe la presentación de los documentos HTML.

Crea un archivo estilos.css en la misma carpeta. Enlázalo desde head con <link rel="stylesheet" href="estilos.css">. Empieza por lo básico, como una tipografía legible, un ancho máximo para el texto y colores con buen contraste.

Cuando quieras que algo responda a lo que hace el usuario, como un menú que se despliega, entra JavaScript. Repasamos qué hace cada lenguaje en lenguajes de programación web.

Paso 5. Comprueba y publica.

Antes de subirla, pasa la página por el validador del W3C. Te dirá si hay etiquetas sin cerrar o mal anidadas. Ábrela también en el móvil y prueba a navegar solo con el teclado.

Para publicarla basta un alojamiento que sirva archivos. Un servidor estático entrega los archivos tal cual al navegador, así que solo tienes que subir la carpeta. Después conecta tu dominio, como contamos en qué es el dominio de una página web.

Cuándo el HTML a mano se queda corto.

Una página HTML escrita a mano es perfecta para aprender y para webs muy pequeñas. Se queda corta cuando necesitas cambiar textos a menudo sin tocar código, o cuando hay formularios que guardar y usuarios que se registran.

Ahí entra un gestor de contenidos, como explicamos en cómo hacer una página web con WordPress. Si necesitas algo hecho a medida, en OverFuture lo programamos contigo. Puedes verlo en diseño web profesional.

Preguntas frecuentes.