Como hacer una página web en HTML: una guía para principiantes

Última actualización
01 Jun 2023
Tiempo de lectura
9 min
estructura básica de un documento, etiquetas, ejemplos

El desarrollo web empieza desde la primera página de HTML.

¿Qué es HTML?

HTML (Hypertext Markup Language) es el código que se utiliza para estructurar, mostrar una página web y su contenido. Por ejemplo, el contenido se puede estructurar en varios párrafos, listas con viñetas o mediante imágenes y tablas de datos.

HTML no es un lenguaje de programación; es un lenguaje de marcado y se utiliza para decirle a tu navegador cómo mostrar las páginas web que tú visitas. HTML se compone de una serie de elementos que se utilizan para hacer que el contenido aparezca o actúe de cierta manera, por ejemplo, las etiquetas pueden hacer que una palabra o imagen se vincule a otra cosa, poner palabras en cursiva, aumentar o disminuir una fuente, etc.

Fuente: Unsplash

¿Cómo crear una página web en HTML?

Las etiquetas se escriben en el editor. El ejemplo más simple de un editor es el bloc de notas. Pero te recomendamos usar el editor Notepad++. Puedes descargarlo en el sitio web oficial e instalarlo en dos clics.

La principal ventaja de este editor es que tiene resaltado de sintaxis. Esto significa que su código se resaltará en un color determinado. Esta acción simplifica la escritura de código y te permite evitar errores.

Estructura básica de un documento HTML

Una página web simple consta de un conjunto “básico” de etiquetas. Estas son:

<!DOCTYPE html>

Es el tipo de documento. En el pasado, cuando HTML era joven (alrededor de 1991-1992), los doctypes tenían que actuar como una referencia a un conjunto de reglas que una página HTML tenía que seguir, para ser considerada una buena HTML, lo que podía implicar una verificación automática de errores y otras cosas útiles. Sin embargo, hoy en día, a nadie realmente le preocupa esto y en realidad son solo un artefacto histórico que debe habilitarse para que todo funcione correctamente. Por ahora, eso es todo lo que necesitas saber.

<html></html>

Este elemento “envuelve” todo el contenido de la página completa y también se le conoce como el elemento raíz.

<head></head>

Este elemento actúa como contenedor para todo lo que desees incluir en una página HTML, pero no es el contenido que se muestra a los usuarios de tu página.

<title></title>

Este elemento establece el título de tu página, que aparece en la pestaña del navegador de la página que se está cargando, y se utiliza para describir la página cuando la marcas como favorita.

<body></body>

Contiene todo el contenido que le muestras a los usuarios cuando visitan tu página, ya sea texto, imágenes, videos, juegos, pistas de audio que se reproducen o cualquier otra cosa.

<meta charset="utf-8">

Este elemento establece la codificación UTF-8 de tu documento, que incluye la mayoría de los caracteres de todos los idiomas conocidos por la humanidad. De hecho, ahora el documento puede procesar cualquier contenido de texto que le pongas.

Trabaja con el texto: formato y color

Fuente: Unsplash

Para eso existe la etiqueta font. Por definición, la etiqueta font sirve como una especie de “envoltura” para el texto, controlando las propiedades que pueden cambiar la apariencia del mismo.

La etiqueta font se aplica así:

<p>Creador de sitios web <font>"Nubex"</font></p>

La etiqueta tiene 3 atributos:

  • Color: establece el color del texto. El parámetro de color se puede especificar con un nombre de color (por ejemplo, “rojo”, “azul”, “verde”) o un código hexadecimal (por ejemplo, #fa8e47).
  • Size: establece el tamaño del texto. Puede tomar valores del 1 al 7 (el valor predeterminado es 3, que corresponde a 13.5 puntos para la fuente Times New Roman). Otra opción para configurar el atributo es “+1” o “-1”. Esto significa que el tamaño de la fuente se cambiará en relación con la básica en 1 más o 1 menos.
  • Face: establece la familia de fuentes.

Veamos un ejemplo del uso de estos atributos:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>cambiamos el color del texto con ayuda de HTML</title>
</head>
<body>
<p>Constructor de páginas web <font size="6" color="#fa8e47" face="serif">"Nubex"</font></p>
</body>
</html>

Hemos aplicado una etiqueta de fuente a una palabra, le hemos dado un tamaño de 6, un color naranja y una familia de fuentes de “Serif”.

Agrega imágenes

El código inserta la imagen en la página en el lugar correcto. Esto se hace usando el atributo src (de source, fuente), que contiene la ruta al archivo de la imagen.

<img src="images/ebac-icon.png" alt="Mi imagen de prueba">

En el atributo alt (de alternative, alternativa) especifica un texto que explica a los usuarios que no pueden ver la imagen debido a problemas de visión o errores al cargar la imagen. Debes proporcionar al lector información suficiente para tener una idea de lo que transmite la imagen. Así que en lugar de “Mi imagen de prueba”, es mejor escribir “El logo de EBAC: cuatro letras orientadas en el sentido de las agujas del reloj formando un cuadrado”, por ejemplo.

<img src="images/ebac-icon.png" alt="El logo de EBAC: cuatro letras orientadas en el sentido de las agujas del reloj formando un cuadrado">

Asegurate de que todas las etiquetas estén cerradas

Todas las etiquetas se encierran en corchetes angulares:

<nombre de la etiqueta>

Con la excepción de algunas etiquetas, la mayoría de las etiquetas tienen etiquetas de cierre correspondientes. Por ejemplo:

<html></html>

Guarda tu documento HTML

Guarda el archivo con la extensión .html. Después de eso, puedes abrirlo en un navegador.

Fuente: Unsplash

Etiquetas más importantes para HTML básico

Echemos un vistazo a algunos de los elementos HTML básicos, que usarás para marcar el texto.

Encabezado

Así como un libro tiene un título, títulos de capítulos y subtítulos, un documento HTML puede contener lo mismo. HTML incluye seis niveles de encabezados <h1> (en-US)–<h6> (en-US), aunque normalmente se usan no más de 3-4:

<h1>Mi encabezado principal</h1>
<h2>Mi encabezado de nivel superior</h2>
<h3>Mi subtítulo</h3>
<h4>Mi sub-sub-título</h4>

Párrafos

<p>

El elemento es para párrafos de texto; se usa regularmente para marcar un contenido textual:

<p>Este es un solo párrafo</p>

Listas e índices

La mayor parte del contenido web son listas, y HTML tiene elementos especiales para ello. El marcado de la lista siempre consta de al menos dos elementos. Los tipos de listas más comunes son las listas numeradas y desordenadas:

Las listas desordenadas son listas donde el orden de los artículos no importa, como en una lista de compras. Están envueltos en un elemento:

<ul>

Las listas numeradas son listas en las que el orden de los elementos es importante, como en una receta. Están envueltos en un elemento:

<ol>

Cada elemento dentro de las listas se encuentra dentro del elemento

<li>
<p>Ebac ofrece cursos en las siguientes áreas:</p>
<ul>
<li>diseño</li>
<li>programación y datos</li>
<li>gaming</li>
<li>software</li>
<li>marketing</li>
<li>fashion</li>
</ul>
<p>que cambiarán tu vida... </p>

Hipervínculos

Los links son los que hacen que Internet sea Internet. Para agregar un link, debes usar un elemento simple:

<a>

Para convertir el texto de un párrafo en un enlace, haz lo siguiente:

Estilo

La etiqueta style se usa para definir estilos para los elementos de la página web. La etiqueta style debe usarse dentro del contenedor head. Puedes especificar más de una etiqueta style.

Sintaxis:

Tablas

Una tabla se crea usando el elemento:

<table></table>

Que es un contenedor para los elementos de la tabla, y todos los elementos deben estar dentro de él.

Fuente: Unsplash

Ejemplos de páginas web sencillas en HTML

<h1>Por que aprender Data Science?</h1>
Se encuentra dentro del top 10 de empleos emergentes; Hay un crecimiento anual del 47% según un estudio anual de Linkedin. El análisis de datos se aplica en varios sectores:
<ul>
<li>medicina,</li>
<li>banca,</li>
<li>negocios privados;</li>
<li>supermercados,</li>
<li>grandes escuelas.</li>
</ul></p>
<p>Gracias a que es una profesión con más demanda que oferta, es una de las disciplinas mejor pagadas en el mercado laboral.</p>
</body>
</html>
Página de inicio / Programación & Data

Desarrollo Front End de cero a pro

Aprende a desarrollar proyectos en HTML, diseñar con CSS, interactuar con JavaScript y agregar dinamismo con jQuery y React. Conviértete en desarrollador front end y experto en diseñar sitios que cautiven al usuario. Al finalizar el curso estarás preparado para comenzar tu carrera en IT.

23 Dec 2022
8 meses
12x de
$ 754,17 MXN
a meses sin intereses con tarjeta de crédito
Precio total
$ 9.050 MXN
$ 18.099 MXN
Inscríbete al curso
Comparte tu opinión
Recibir notificaciones de otros comentarios

O como invitado

Suscribiete Suscribiete Suscribiete Suscribiete Suscribiete

Más artículos relacionados

22 Oct 2023
8 min
Bill Gates: La mente maestra detrás de Microsoft

Descubre cómo la increíble visión de Bill Gates transformó la tecnología para siempre.

22 Oct 2023
8 min
21 Sep 2023
8 min
¿Qué es DevOps?

Conoce el concepto de DevOps, cómo funciona y qué beneficios trae la cooperación de diferentes equipos IT.

21 Sep 2023
8 min
21 Sep 2023
7 min
Ada Lovelace: La vida y descubrimientos de la hija de lord Byron

Descubre cómo la hija de lord Byron marcó un hito en la historia de la programación.

21 Sep 2023
7 min
21 Sep 2023
7 min
¿Qué es el internet de las cosas?

Aprende cómo funciona la tecnología IoT, dónde se usa, cuáles son sus beneficios y posibles riesgos.

21 Sep 2023
7 min
21 Sep 2023
5 min
¿Qué es un objeto en programación?

Conoce el concepto del objeto en programación y aprende a crear uno para tu programa.

21 Sep 2023
5 min
21 Sep 2023
6 min
Frameworks: Marcos de trabajo para programadores

Descubre cómo puedes facilitar el desarrollo de una aplicación usando frameworks.

21 Sep 2023
6 min