Cómo crear una página web en HTML: los códigos más necesarios

Por Felipe

Publicado en:

Para crear una página web en HTML necesitas un simple editor de texto y dominar unas pocas etiquetas básicas como <html>, <head> y <body>. Escribes la estructura, guardas el archivo con extensión .html y lo abres en cualquier navegador. A partir de ahí agregas títulos, párrafos, enlaces e imágenes hasta darle forma a tu sitio.

HTML: el primer paso para programar para la web

El desarrollo web ha evolucionado muchísimo desde sus orígenes y han nacido varios lenguajes que nos permiten programar para Internet. Sin embargo, si quieres introducirte en este mundo, lo más sensato es dar los primeros pasos aprendiendo cómo hacer una página web en HTML, el lenguaje de marcado con el que está construida la base de prácticamente toda la web. A continuación te damos una introducción práctica a los códigos más necesarios para empezar.

El esqueleto de tu primera página web

Para comenzar, lo primero que tienes que hacer es abrir tu editor de texto favorito —uno muy recomendado y gratuito es Notepad++—, crear un nuevo archivo y copiar el siguiente código:

<!DOCTYPE html>
<html>
  <head>
    <title>Este es el título de mi web</title>
  </head>
  <body>
    Bienvenido a mi sitio
  </body>
</html>

La etiqueta <html> es obligatoria y le indica al navegador que estás codificando 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, 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 se va a mostrar al usuario.

Tras guardar el archivo con la extensión .html, ya podrás abrirlo con un navegador. No obstante, esto es tan solo el esqueleto de tu primera página web: aún queda trabajo para lograr que muestre todo lo que tienes en mente.

Los códigos más comunes para crear una página en HTML

Una vez aprendidas las etiquetas que debe contener el esqueleto, pasamos a conocer otros códigos habituales. Estas son algunas de las etiquetas más importantes que usarás todo el tiempo:

Contenedores y párrafos

El <div> es un contenedor que alberga a su vez otros elementos, como más contenedores, párrafos o imágenes; es la pieza con la que organizas la estructura visual de tu web. Los párrafos se escriben con <p> y son la forma estándar de mostrar texto corrido al visitante.

Títulos y subtítulos

Para los títulos se usa <h1>, que representa el encabezado más importante de la página. A partir de ahí tienes una jerarquía de subtítulos con <h2>, <h3> y así sucesivamente hasta <h6>. Respetar esta jerarquía no solo ordena el contenido: también ayuda al posicionamiento en buscadores, porque Google entiende mejor de qué trata cada sección.

Enlaces y listas

Los enlaces se crean con la etiqueta <a>. Un ejemplo sería <a href="https://enlace.com">Esto es un enlace</a>. Las listas, por su parte, se arman con <ul> (listas con viñetas), <ol> (listas numeradas) y <li> para cada elemento dentro de ellas.

Cómo hacer una tabla en HTML

Aunque hoy el uso de tablas para maquetar ha quedado obsoleto, todavía se utilizan para mostrar datos y, cuando recién estás aprendiendo, puede ser muy útil practicar con alguna. Para crear una tabla, primero la defines con la etiqueta <table> y luego la construyes fila por fila: cada vez que quieras añadir una fila nueva agregas un elemento <tr>, y dentro de cada <tr> colocas las celdas, que se representan con <td>.

Por ejemplo, una tabla sencilla de una fila con dos celdas se vería así:

<table>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
  </tr>
</table>

Repitiendo el bloque <tr> tantas veces como filas necesites, puedes armar tablas de cualquier tamaño.

Etiquetas semánticas: el HTML moderno

Con la llegada de HTML5 aparecieron las llamadas etiquetas semánticas, que describen el significado de cada bloque de la página y no solamente su apariencia. En lugar de llenar todo el documento de contenedores genéricos, hoy se recomienda usar etiquetas con nombre propio para la cabecera, el menú de navegación, el contenido principal, las distintas secciones de artículos y el pie de página. Adoptar este enfoque hace que tu código sea más limpio, más fácil de mantener y mucho más amigable tanto para los buscadores como para los lectores de pantalla, lo que mejora la accesibilidad de tu sitio. Es un buen hábito que conviene incorporar desde tus primeras páginas, porque te acostumbra a pensar en la estructura y en el usuario al mismo tiempo. Cuanto más ordenado sea tu HTML, más sencillo te resultará luego aplicarle estilos y sumarle funciones interactivas.

HTML, CSS y JavaScript: el trío del desarrollo web

El HTML se encarga de la estructura y el contenido, pero rara vez trabaja solo. Para darle estilo —colores, tipografías, márgenes y diseño responsive— se utiliza CSS, y para agregar interactividad —menús, animaciones o validar formularios— se suma JavaScript. Dominar primero el HTML te da la base sobre la que después montarás estos otros lenguajes sin perderte. Es un camino de aprendizaje muy accesible y, en el Perú, una habilidad cada vez más valorada para emprender o conseguir trabajo en tecnología.

De tu archivo .html a Internet: necesitas un hosting

Tu página en HTML funciona en tu computadora, pero para que el mundo la vea necesitas publicarla en un servidor conectado a Internet. Ahí entra el hosting. En HostingPlus, el hosting N°1 del Perú, trabajamos desde 2004 con discos SSD/NVMe y tecnología LiteSpeed, para que tus archivos HTML, CSS y JavaScript carguen a toda velocidad.

Incluimos certificado SSL y migración gratuita, ofrecemos soporte técnico 24/7, datacenter en Orlando (EE. UU.) y una garantía de 30 días. Cuando tu primer proyecto en HTML esté listo, revisa los planes y precios en soles en nuestra página de hosting y publícalo en cuestión de minutos.

Preguntas frecuentes

¿Necesito programas pagados para escribir HTML?

No. Puedes empezar con editores totalmente gratuitos como Notepad++ o Visual Studio Code, e incluso con el bloc de notas que ya viene en tu computadora. Lo único indispensable es guardar el archivo con la extensión .html para que el navegador lo reconozca como una página web.

¿El HTML sirve para hacer una web profesional o solo para practicar?

El HTML es la base de absolutamente todas las webs profesionales, incluso las más complejas. Lo que cambia es que esos sitios combinan el HTML con CSS, JavaScript y, muchas veces, gestores como WordPress. Aprender HTML es el primer escalón sólido para llegar a cualquier nivel.

¿Dónde subo mi página HTML para que esté en línea?

Necesitas contratar un servicio de hosting y subir tus archivos mediante el panel de control o por FTP. En HostingPlus puedes hacerlo en minutos, con SSL y migración incluidos. Si tienes dudas, nuestro soporte está disponible 24/7 o puedes llamarnos al (01) 640 9409.

¿Tu web necesita el hosting N°1 del Perú?

Hosting peruano con soporte real 24/7, migración gratis, SSL incluido y 30 días de garantía. Desde S/.70 al año.

Ver planes de hosting →

Artículos relacionados

Los beneficios de la autenticación de dos factores (2FA)Servidor DNS: qué es y cómo configurarloRecomendaciones: importancia de los dominios de internet