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

Por Felipe

Publicado en:

Estilo elegido: A. TÉCNICO (Tutorial/Definición). El contenido original ya es un mini tutorial de HTML (estructura básica + etiquetas comunes + tablas), así que lo más lógico es ordenarlo como guía paso a paso, sumar buenas prácticas (SEO on-page, codificación, accesibilidad) y aterrizarlo al contexto de Argentina (hosting, dominio .com.ar, costos aproximados en ARS).

Cómo crear una página web en HTML (desde cero y sin vueltas)

Si querés meterte en desarrollo web, HTML es el primer ladrillo. No es “programación” en el sentido clásico: es un lenguaje de marcado. Pero ojo, sin HTML no hay estructura, no hay contenido, no hay nada que Google pueda leer bien.

En nuestra experiencia, la mayoría se traba por dos cosas: no respetar el esqueleto mínimo del documento y mezclar estructura (HTML) con estilos (CSS) demasiado pronto. Vamos por partes (y bien prolijo).

Tutorial paso a paso: tu primera web en HTML

Paso 1: Elegí editor y armá el archivo

Podés usar Notepad++, Visual Studio Code o incluso el Bloc de notas. VS Code suele ser el más cómodo por autocompletado y extensiones (te ahorra errores tontos).

  • Creá un archivo nuevo
  • Guardalo como index.html (la extensión .html es clave)
  • Codificación recomendada: UTF-8 (para que no se rompan tildes, ñ, etc.)

Paso 2: Pegá el esqueleto HTML correcto (HTML5)

Este es el mínimo que usamos hoy para cualquier página simple. Notá el <!doctype html> y el <meta charset=”utf-8″> (no lo saltees).

<!doctype html>
<html lang=”es-AR”>
<head>
  <meta charset=”utf-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  <title>Mi primera web en HTML</title>
  <meta name=”description” content=”Página web básica hecha en HTML5: estructura, etiquetas y ejemplo práctico.”>
</head>
<body>
  <h1>Bienvenido a mi sitio</h1>
  <p>Esta es mi primera página en HTML.</p>
</body>
</html>

  • <html>: envuelve todo el documento.
  • <head>: datos para navegador y SEO (título, descripción, codificación, responsive).
  • <body>: lo visible para el usuario.

Sinceramente, con esto ya podés abrir el archivo en Chrome/Firefox y verlo funcionando. Es básico, sí. Pero ya es una web.

Paso 3: Sumá las etiquetas que más vas a usar (las de todos los días)

Acá no hay magia: HTML se aprende usando etiquetas reales. Estas son las más comunes y útiles para una página web simple.

  • Contenedores: <div>…</div> (para agrupar bloques). (Después lo vas a estilizar con CSS.)
  • Párrafos: <p>…</p>
  • Encabezados: <h1>…</h1> hasta <h6>…</h6> (ordenan el contenido y ayudan al SEO)
  • Listas: <ul><li>…</li></ul> y <ol>…</ol>
  • Enlaces: <a href=”https://ejemplo.com”>Texto</a>

Tip rápido: usá un solo <h1> por página (normalmente el título principal). Después organizá con <h2> y <h3>. Google y el usuario te lo agradecen.

Paso 4: Publicá tu HTML (para que exista en internet)

Abrir el archivo en tu compu está perfecto para practicar, pero si querés que cualquiera lo vea necesitás:

  • Un dominio (ej: tusitio.com.ar)
  • Un hosting para subir el archivo index.html

Para el dominio, lo más común en Argentina es .com.ar (y queda más “local”). Podés gestionarlo desde un proveedor y después apuntarlo al hosting. Si estás en esa etapa, mirá opciones de dominios acá: https://hostingplus.ar/dominios.

Y para alojar tu web estática, con un plan de hosting compartido suele alcanzar (y sale mucho menos que un desarrollo complejo). Tenés alternativas en: https://hostingplus.ar/hosting.

Cómo hacer una tabla en HTML (cuando realmente la necesitás)

Las tablas no se recomiendan para maquetar (eso se hace con CSS), pero siguen siendo útiles para datos tabulares: precios, comparativas, horarios, etc.

Estructura:

  • <table>: tabla
  • <tr>: fila
  • <td>: celda

Ejemplo simple (3 filas x 4 columnas):

<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>

Tabla técnica: etiquetas HTML esenciales (chuleta rápida)

Etiqueta Para qué sirve Tip práctico
<!doctype html> Indica HTML5 Siempre primera línea del archivo
<html lang=”es-AR”> Idioma/locale Ayuda a SEO y accesibilidad
<head> Metadatos Acá van title, description, charset
<meta charset=”utf-8″> Codificación Evita caracteres rotos (tildes/ñ)
<title> Título en pestaña + SEO No lo hagas eterno: 50–60 caracteres aprox.
<meta name=”description”> Descripción SEO Útil para snippets (no siempre, pero suma)
<h1>…</h1> Título principal Uno por página (en general)
<p>…</p> Párrafo Texto legible, no metas todo en div
<a href=”…”> Enlace Usá textos claros: “Ver planes de hosting”
<ul><li> Lista Ideal para pasos y features
<table><tr><td> Datos tabulares Usala para datos, no para diseño

Requisitos reales para subir tu web (y cuánto puede costar en ARS)

Para una web HTML estática, los costos suelen ser bajos. Vas a necesitar:

  • Dominio: puede variar según extensión y proveedor (pensá en un rango típico anual en ARS).
  • Hosting: si es una landing o sitio simple, suele ser económico. Si después escalás (más tráfico, apps, bases de datos), ahí sí conviene mirar un VPS.

Si ya sabés que vas a correr algo más pesado (WordPress con muchos plugins, un e-commerce, o una app), un VPS te da control y recursos dedicados. Podés chusmear opciones acá: https://hostingplus.ar/servidores-vps.

FAQ: dudas típicas al crear una página web en HTML

¿HTML alcanza para una web “completa”?
Para una web estática (presentación, portfolio, landing), sí. Si querés diseño más fino, sumás CSS. Si necesitás interacción (formularios avanzados, lógica), sumás JavaScript y/o backend.

¿Qué diferencia hay entre HTML, CSS y JavaScript?
HTML estructura el contenido. CSS lo “viste” (colores, tipografías, layout). JavaScript agrega comportamiento (validaciones, sliders, interacciones).

¿Cómo hago para que mi HTML sea más amigable para SEO?
Usá un <title> claro, una meta description decente, encabezados ordenados (h1, h2, h3), texto real (no todo imágenes) y enlaces internos coherentes. Y no te olvides del lang="es-AR" y el viewport para mobile.

¿Dónde subo mi archivo index.html?
En el panel de tu hosting (File Manager) o por FTP/SFTP. En general lo subís a la carpeta public_html o similar. Con un hosting estándar lo resolvés rápido: planes de hosting.

¿Por qué se ven mal las tildes o la ñ?
Casi siempre es por codificación. Asegurate de guardar el archivo como UTF-8 y de tener <meta charset=”utf-8″> en el head.

¿Querés publicar tu primera web HTML hoy mismo?
Dominio + hosting y listo (sin complicarte).


Ver planes en HostingPlus.ar