Cómo hacer una página web en HTML paso a paso (con ejemplos)

Descubre ahora nuestra guía básica de HTML y CSS para marketers
Claudio Frisoli
Claudio Frisoli

Actualizado:

Publicado:

Las páginas web se pueden clasificar por su forma, tecnología y funcionalidad. Se crean en formato HTML y se utilizan en blogs, foros, instituciones, medios de comunicación, buscadores, webs corporativas, tiendas online, entre muchas más opciones.

Cómo hacer una página web en HTML

 

HTML, a primera vista, parece complicado y laborioso, pero saber utilizarlo te permitirá construir y lanzar tu página con los elementos que necesitas sin restricciones, y realizar cambios concretos dentro de tu sitio. Aprender HTML es más fácil de lo que crees y con nuestra guía verás lo rápido que te familiarizarás con él.

Guía básica sobre HTML y CSS para marketers

Obtén una introducción básica a HTML y CSS diseñada para profesionales del marketing, que te permitirá comprender y utilizar estos lenguajes para mejorar tus habilidades digitales.

  • Conoce qué es el HTML y el CSS.
  • Descubre códigos esenciales de HTML.
  • Aprende a actualizar el CSS.
  • HTML y CSS: aspectos a evitar.
Más información

    Descargar ahora

    Todos los campos son obligatorios.

    ¡Listo!

    Haz clic en este enlace para acceder a este recurso en cualquier momento.

    Las marcas utilizadas en HTML sirven para etiquetar diferentes elementos dentro de un página web: imágenes, texto, videos, entre otros. Seguro ya has visto de qué te hablamos, pero te mostramos algunos ejemplos de etiquetas: 

    • <head>
    • <title>
    • <body>
    • <section>
    • <video> 

    Otro ejemplo más claro del uso de etiquetas es el siguiente:

    <h1>Cómo hacer una página web en HTML</h1>

    Aquí, la etiqueta <h1> indica que se trata de un título.

    Las etiquetas son vitales en la creación de páginas web en HTML, pues con ellas se aplicarán las pautas de diseño web que las conformarán, para darles un orden jerárquico. Con las etiquetas pueden realizarse diferentes indicaciones como el tipo de fuente, su tamaño y color, entre otros atributos. 

    Recuerda que HTML ofrece grandes ventajas por ser una herramienta verdaderamente útil para crear el sitio de tu empresa, exactamente como lo esperas.

    pagina-web-html-ventajas

    1. Conoce los conceptos básicos de las páginas HTML

    Antes de realizar tu página con códigos HTML, veamos algunos conceptos fundamentales, pues seguramente los aplicarás. No te preocupes, en este enlace encontrarás esos elementos explicados a detalle, para que los utilices durante todo tu proceso de programación.

    Lo más relevante que debes conocer para comprender la estructura del HTML es lo siguiente, y aunque son tecnisismos que quizá te abrumen al principio, verás que en la práctica los entenderás mucho mejor: 

    • Las etiquetas deben tener apertura y cierre (<h1> texto </h1>). De lo contrario, el código no será reconocido por el sitio y los cambios que realices no se visualizarán. Siempre es importante revisar este aspecto, antes de poner un nuevo código, para evitar una posterior revisión exhaustiva en busca de un error.
    • La estructura básica de una página web se compone por las etiquetas:
      • <html> Indica el comienzo de la página. 
      • <head> Cabecera y contiene información descriptiva del sitio.
      • <body> Abarca todos los elementos visibles dentro de la página.
    • Los niveles de títulos pueden variar desde la etiqueta h1 hasta la h6.
    • La etiqueta <p> corresponde a los párrafos
    • La etiqueta <a> representa los enlaces.
    • Los metadatos contienen información sobre la página, como: estilos, buscadores, scripts, por mencionar algunos. Estos se conforman por las etiquetas <base>, <head>, <link>, <meta>, <style> y <title>. 

    Se calcula que hay alrededor de 142 etiquetas HTML; sin embargo, muchas de ellas ya han caído en desuso, sobre todo con la aparición de HTML5, la versión más reciente del código que incluye valiosas funciones nuevas. 

    2. Abre el editor de texto y comienza con una estructura básica

    Si tienes una computadora Windows, podrás encontrar el editor de texto como «Bloc de notas»; en una computadora Mac puedes utilizar «TextEdit».

    Después de abrirlo, escribe una estructura base de HTML como la que te mostramos en la siguiente imagen: 

    cómo hacer una página web paso a paso: abre el editor de texto

    Puedes utilizar esta estructura para personalizar el título principal de tu página, la descripción del contenido y codificar de una manera sencilla todo el sitio. 

    Como principiante, también puedes usar los editores WYSIWYG, del inglés «what you see is what you get», los cuales sirven para visualizar directamente cómo se muestra la página conforme se va escribiendo el código HTML.

    Entre algunos programas de este tipo están:

    editores-paginas-html

    3. Trabaja el texto en HTML

    Trabajar el texto en HTML es uno de los pasos más sencillos. Aquí podrás utilizar las etiquetas de título que te mencionamos anteriormente (h1, h2, h3, h4, h5, h6). Su uso dependerá de la jerarquización que desees darle a cada título o subtítulo.

    La etiqueta <p> marca los párrafos. Con ambos elementos ya puedes comenzar a codificar el texto de tu página.

    cómo hacer una página web paso a paso: Trabaja el texto en HTML

    4. Cambia el color del texto

    Para cambiar el color del texto, escribe la etiqueta correspondiente escribiendo el color que prefieras entre comillas. Por ejemplo:

    cómo hacer una página web paso a paso: Cambia el color del texto

    También con el código HTML puedes indicar los colores de fondo de tu sitio web; existen más de 16 millones de opciones con los sistemas RGB y HEX. 

    5. Da formato al texto

    Para dar formato solo escribe el código como en el siguiente ejemplo:

    Texto en negrita usa la etiqueta <b>texto</b>
    Texto subrayado <u>texto</u>
    Texto en cursivas o itálicas <i>texto</i>

    6. Incluye un enlace a otra página

    Si en el texto quieres incluir un enlace a otra página, debes utilizar la etiqueta:

    cómo hacer una página web paso a paso: incluye un enlace

    Aquí debes añadir el URL que deseas enlazar. El atributo «blank» se utiliza para que el enlace que agregues se pueda abrir en una nueva pestaña o página.

    En caso de que quieras que la liga se abra en la misma página, escribe «self».

    7. Agrega contenido multimedia

    Imágenes

    Un elemento vital en una página web son las imágenes. Para añadirlas en HTML debes usar la etiqueta <img>:

    cómo hacer una página web paso a paso: añade imágenes

    El atributo «src» es para abrir un URL para la imagen que quieres mostrar.

    El apartado «alt» permite visualizar un texto alterno descriptivo, en caso de que, por error de carga del sitio, la imagen no pueda verse.

    El texto en la imagen también sirve como posicionamiento en buscadores, como Google.

    Los atributos «height» y «width» corresponden a las dimensiones que desees que tenga cada imagen, a lo alto y ancho.

    Video

    Hoy en día los videos son uno de los contenidos más cotizados de las páginas web. Para insertarlos en tu sitio coloca este código:

    <video width="320" height=240" controls>
    <source src="animación.mp4" type="video/mp4">
    Tu navegador no soporta este formato de video
    </video>

    • «height» y «width» establecen el tamaño del video
    • «source» es la clave del video
    • «src» indica la URL del video o la ubicación del archivo
    • «type» sirve para señalar el formato de video

    En caso de no poder reproducirlo, aparecerá la leyenda «Tu navegador no soporta este formato de video».

    También puedes insertar un video de YouTube con el código de inserción que ya te ofrece la plataforma. 

    Audio

    Respecto a los audios o canciones, puedes agregar este código:

    <audio controls>
    <source src="cancion.mp3" type="audio/mp3">
      Tu navegador no soporta este formato de audio
    </audio>

    • En este caso «src» describe el nombre o ubicación del archivo
    • Y «type» sirve para indicar el formato del audio.

    Si no es posible reproducirlo aparecerá la frase «Tu navegador no soporta este formato de audio».

     

     

    8. Confirma que todas las etiquetas estén cerradas

    Antes de guardar el documento y ver los resultados, es muy importante que cierres todas las etiquetas en la parte inferior del documento para que puedan visualizarse correctamente todos los códigos que utilizaste.

    Estos se cierran de la siguiente forma:

    cómo hacer una página web: cerrar etiquetas

    Verifica que las etiquetas de todos los códigos estén abiertas y cerradas y que todo esté escrito correctamente.

    9. Guarda tu documento HTML

    Para guardar el texto que creaste, recuerda cambiar el formato «.txt» por «.html».

    Para abrirlo y ver los resultados, da clic derecho sobre el archivo y selecciona el navegador de tu preferencia.

    Si percibes errores en el diseño de la página, deberás regresar al editor de texto o bloc de notas para revisar a detalle en dónde está el error.

    ¡Listo! Ahora ya sabes cómo crear una página web en HTML. Si utilizas esto, en conjunto con el código CSS, puedes optimizar la parte visual y con el lenguaje JavaScript puedes agregar elementos dinámicos para crear páginas interactivas para tus visitantes.  

     

     

    1. Bedow

    Si el diseño de tu sitio web requiere más contenido visual que texto, este es un excelente ejemplo. Para lograrlo, tendrás que prestar más atención a las etiquetas HTML de imágenes y ajustarlas de modo que se ajusten a las dimensiones que deseas. 

    Páginas-web-HTML-bedow-ejemplo

    Imagen de Bedow

    2. AIAIAI

    Si quieres hacer una página web en HTML que te desafíe a agregar diferentes tipos de fuentes, tamaños y colores de texto, inspírate en el sitio web de AIAIAI. Además, puedes practicar el manejo de diversas dimensiones de imágenes. 

    ejemplo-página-web-HTML

    Imagen de AIAIAI

    3. Monograph

    Si quieres intentar combinaciones de colores más complejas para avanzar en tu entrenamiento para crear páginas web en HTML, observa el sitio de Monograph. Su contenido se destaca por el uso de texto con un colorido fondo que atrae toda la atención. 

    Páginas web HTML-ejemplo

    Imagen de Monograph

    Las páginas web originales se caracterizan por mostrar la personalidad de la marca de forma creativa. Para ello se compaginan diversos elementos como los fondos de colores y texturas, animaciones, efectos en el cursor, interfaz intuitiva de secciones, iconos, entre otros. 

    Puedes crear una página web sin saber el código HTML

    Para aprender y dominar el lenguaje HTML es necesario practicar mucho, sobre todo para lograr hacer una personalización de sitios web que sea realmente atractiva para los usuarios y clientes de una marca. Así que si quieres ahorrar el proceso manual de programación HTML, existe la posibilidad de usar un sistema de gestión de contenidos (CMS). 

    Como CMS Hub, un software que te permite desarrollar páginas con temas predeterminados, en los que podrás agregar diversos elementos interactivos con la herramienta de arrastrar y soltar, por lo que no necesitas tener conocimientos de programación para editar.  

    Desde nuestra plataforma podrás gestionar todo el contenido de tu página web, incluyendo la sección de blog, en conjunto con recomendaciones SEO automáticas. Es muy fácil de usar y de actualizar con su sistema de alerta de códigos erróneos. Además, cuenta con una monitorización contra ataques cibernéticos las 24 horas del día. 

    Programar una página web HTML requiere tiempo y dedicación, pero no es imposible. No olvides que la práctica hace al maestro. Si te surgen dudas en el proceso busca apoyo en tutoriales y foros donde hay personas que dominan este tipo de diseño. Poco a poco, aprenderás nuevas habilidades y no habrá límites para tu creatividad y talento.

    Preguntas frecuentes acerca de la creación de páginas web con HTML

    A continuación encontrarás algunas de las preguntas más comunes que recibimos en la comunidad de HubSpot sobre este tema:

    Temas: HTML

    Artículos relacionados

    Aprende los conceptos básicos de HTML y CSS para tu sitio web

      CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

      START FREE OR GET A DEMO