Cómo crear una página web en HTML: los códigos más necesarios
Por FelipePublicado en:
Crear una página web en HTML consiste en escribir, con un simple editor de texto, las etiquetas que estructuran el contenido: el esqueleto principal, la cabecera y el cuerpo del documento. Guardas el archivo con la extensión .html, lo abres en tu ordenador con cualquier navegador y ya tendrás tu primera web estática lista para ampliar y dar estilo con CSS.
Qué es HTML y por qué conviene empezar por aquí
HTML (HyperText Markup Language) es el lenguaje de marcado con el que se construye la estructura de todas las páginas web. No es un lenguaje de programación al uso, sino un sistema de etiquetas que indican al navegador qué es cada elemento: un título, un párrafo, una imagen o un enlace. Aprender HTML es el primer paso lógico para cualquiera que quiera dedicarse al desarrollo web, porque sienta las bases sobre las que después se añaden los estilos (CSS) y la interactividad (JavaScript).
La principal ventaja de HTML es que no necesitas instalar programas complejos ni configurar entornos: basta con un editor de texto y un navegador. Puedes practicar desde cualquier ordenador y ver los resultados al instante, simplemente recargando la página. A medida que domines las etiquetas básicas, te resultará mucho más sencillo entender cómo funcionan los gestores de contenido como WordPress, que en el fondo generan HTML de forma automática a partir de lo que escribes.
El esqueleto de tu página web en HTML
Para empezar a crear tu web, abre tu editor de texto favorito —Notepad++, Visual Studio Code o Sublime Text son opciones muy utilizadas— y crea un archivo nuevo. Copia y pega la siguiente estructura básica, que constituye el esqueleto mínimo de cualquier documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Este es el título de mi web</title>
</head>
<body>
Bienvenido a mi sitio
</body>
</html>Cada etiqueta cumple una función concreta. La etiqueta <html> es obligatoria y le indica al navegador que el documento está escrito en este lenguaje de marcado. La etiqueta <head> se utiliza para dar detalles al navegador sobre el contenido de la página: almacena, por ejemplo, los metadatos que los motores de búsqueda necesitan para el SEO del sitio, como la descripción, las palabras clave o el tipo de codificación de los caracteres. Por su parte, la etiqueta <body> alberga todo el contenido visual, es decir, lo que realmente se muestra al usuario.
Tras guardar el archivo con la extensión .html, ya podrás abrirlo con un navegador. Eso sí, esto es solo el esqueleto de tu primera página web: aún queda trabajo por delante para que muestre todo lo que tienes en mente.
Los códigos HTML más necesarios
Una vez comprendido el esqueleto, conviene conocer las etiquetas que más vas a utilizar en el día a día. Estas son algunas de las más importantes para estructurar el contenido de tu web:
- Contenedor (<div>): agrupa y organiza otros elementos, como párrafos, imágenes u otros contenedores. Es la base para maquetar secciones.
- Párrafos (<p>): delimitan bloques de texto. Por ejemplo: <p>Esto es un párrafo</p>.
- Títulos y subtítulos (<h1> a <h6>): definen la jerarquía de los encabezados. El <h1> es el título principal y los niveles siguientes (<h2>, <h3>…) organizan los apartados, algo clave también para el SEO.
- Tablas (<table>, <tr>, <td>): se emplean respectivamente para definir la tabla, las filas y las celdas que contienen los datos.
- Enlaces (<a>): permiten enlazar a otras páginas. Un ejemplo de enlace sería <a href=”https://ejemplo.com”>Esto es un enlace</a>.
- Listas (<ul>, <ol>, <li>): crean listas sin orden (<ul>) u ordenadas (<ol>), donde cada elemento se marca con <li>.
Dominar estas etiquetas te permitirá maquetar la mayoría de páginas sencillas. Con la práctica aprenderás a anidarlas correctamente para construir estructuras más complejas y ordenadas.
Cómo hacer una tabla en HTML
Aunque hoy en día el uso de tablas para maquetar ha quedado obsoleto —esa función la cumple ahora CSS—, siguen siendo útiles para mostrar datos tabulados y resultan un buen ejercicio cuando empiezas. Para crear una tabla, primero la defines con la etiqueta <table> y después la construyes fila por fila: cada nueva fila se añade con un elemento <tr> y, dentro de cada <tr>, se incluyen las celdas con la etiqueta <td>. Por ejemplo, para una tabla de tres filas con cuatro celdas cada una, el código sería el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Esto es el título de la web</title>
</head>
<body>
<table>
<tr>
<td>Primero 1</td>
<td>Segundo 1</td>
<td>Tercero 1</td>
<td>Cuarto 1</td>
</tr>
<tr>
<td>Primero 2</td>
<td>Segundo 2</td>
<td>Tercero 2</td>
<td>Cuarto 2</td>
</tr>
<tr>
<td>Primero 3</td>
<td>Segundo 3</td>
<td>Tercero 3</td>
<td>Cuarto 3</td>
</tr>
</table>
</body>
</html>Fíjate en cómo cada fila (<tr>) contiene exactamente cuatro celdas (<td>). Si quisieras añadir una cabecera, podrías sustituir las celdas de la primera fila por la etiqueta <th>, que resalta el contenido como encabezado de columna.
Cómo añadir estilo con CSS
Desarrollar una web estática con HTML es sencillo, pero es importante que practiques lo suficiente para aprender a colocar correctamente cada elemento en su sitio. El siguiente paso natural es dar estilo a tu página: para ello necesitarás aprender a escribir reglas con hojas de estilo en cascada (CSS), que controlan los colores, las tipografías, los márgenes y la disposición de los elementos. HTML define la estructura y el contenido, mientras que CSS se encarga de la apariencia. Juntos te permiten pasar de un documento básico a una web con identidad propia.
Buenas prácticas al escribir HTML
Para que tu código sea fácil de mantener y entender, conviene seguir algunas pautas desde el principio. Indenta el código (deja sangrías) para reflejar la jerarquía de las etiquetas, de modo que se vea con claridad qué elementos están dentro de otros. Cierra siempre las etiquetas que lo requieran y sé coherente con las mayúsculas y minúsculas en los nombres de los atributos. Añade el atributo lang a la etiqueta <html> (por ejemplo, <html lang=”es”>) para indicar el idioma e incluye la etiqueta <meta charset=”UTF-8″> dentro de la cabecera para que los acentos y caracteres especiales se muestren correctamente. Estas pequeñas costumbres marcan la diferencia entre un código desordenado y uno profesional.
Publicar tu página web en internet
Una vez que tu web en HTML está lista en tu ordenador, el último paso es publicarla para que cualquiera pueda visitarla. Para ello necesitarás dos cosas: un dominio (la dirección de tu web) y un plan de alojamiento web donde subir tus archivos. El alojamiento es el espacio en un servidor conectado a internet de forma permanente que guarda tu HTML, tus imágenes y el resto de recursos para que estén siempre disponibles.
A la hora de elegir alojamiento, conviene fijarse en la velocidad y la estabilidad del servidor, ya que influyen directamente en la experiencia de tus visitantes y en el posicionamiento. En HostingPlus, por ejemplo, los planes incluyen discos NVMe y tecnología LiteSpeed para acelerar los tiempos de carga, certificado SSL y migración incluidos, y un panel de autogestión que te permite subir tus archivos sin depender del teléfono. La compañía trabaja en el sector desde 2004, ofrece soporte 24/7 en español y 30 días de garantía, lo que te da margen para probar el servicio con tranquilidad. Los precios se indican en euros y puedes consultarlos directamente en la página de alojamiento.
Preguntas frecuentes
¿Necesito saber programar para crear una página en HTML?
No. HTML no es un lenguaje de programación, sino de marcado: solo tienes que aprender a usar etiquetas para estructurar el contenido. Con un editor de texto y un navegador puedes empezar a practicar desde el primer día, sin instalar ningún programa adicional.
¿Qué editor de texto conviene usar para escribir HTML?
Cualquier editor sirve, pero los más cómodos resaltan el código en colores y avisan de errores. Notepad++, Visual Studio Code y Sublime Text son opciones gratuitas o muy asequibles y ampliamente utilizadas tanto por principiantes como por desarrolladores con experiencia.
¿Puedo publicar una web hecha solo con HTML?
Sí. Una web estática en HTML es perfectamente publicable. Solo necesitas un dominio y un plan de alojamiento donde subir los archivos. Más adelante podrás ampliarla con CSS para el diseño y con JavaScript para añadir funciones interactivas.
Hosting en España con soporte real en español, migración gratis, SSL incluido y 30 días de garantía. Sin líos y sin costes ocultos.
Ver planes de hosting →
