Cómo crear una página web en HTML

Si estás empezando a navegar en las aguas del desarrollo y programación web, es normal que te plantees la pregunta ¿Cómo crear una página web en HTML?

‍

Qué es HTML

Antes de avanzar, lo primero que debes saber es que HTML no es un lenguaje de programación, sino un lenguaje de marcado. Explicado en palabras sencillas, es un componente esencial en el desarrollo web porque es el que se encarga de definir el significado y la estructura de todo el contenido web como texto, imágenes o vídeos. Pero, ¿qué significa HTML? Pues, sus siglas vienen de HyperText Markup Language, que en español se traduce como Lenguaje de Marcas de Hipertexto.

Características de HTML

La característica más relevante del lenguaje HTML es la forma en la que organiza los datos. Es bastante práctica porque los separa en dos bloques. El primero, <head> o cabecero, es donde se agrupa el contenido descriptivo como los metadatos, el espacio para definir datos como el idioma, sobre qué va tu sitio web o cuáles son las palabras claves, además de hacer referencias a ficheros como JavaScript o archivos CSS.

Cuando hablamos del segundo bloque de contenido de HTML, nos referimos al <body> o cuerpo si lo traducimos al español. Es el espacio que contiene todos los elementos de la web como textos, imágenes, enlaces, vídeos y diferentes atributos.

‍

Creando una web en HTML

Definidas las principales características de este lenguaje, podemos empezar a contarte cómo crear una página web en HTML.

Lo primero que debes hacer es elegir un editor de texto. Existen diversas opciones gratuitas y de pago. Los editores de HTML textuales son los más recomendados. Entre las opciones más utilizadas se encuentran Notepad++ para Windows, BBedit para Mac y Visual Studio Code que está disponible para Windows, Mac y Linux.

Estructura del código

Ya con el editor de texto seleccionado, ¡es momento de comenzar con el código!

‍

‍

Empecemos con el siguiente bloque de código:

‍

‍

Ahora desglosamos a detalle el código:

  • <!DOCTYPE html>: Esta es ****la etiqueta que identifica el lenguaje.
  • <html lang="es">: Escribiendo esta etiqueta definimos que el idioma del sitio es español.
  • <head>: Utilizar esta etiqueta indica que se abre el bloque de información de la web
  • <title>: Este es el espacio para escribir el título de la página. El que vemos en la pestaña del navegador web.
  • <meta name=”description”>: Es la etiqueta encargada de informar a los buscadores sobre qué se trata tu sitio web. Por eso, es importante escribir una buena descripción.

Ahora, avanzamos a la segunda parte. Es momento de trabajar el contenido en la etiqueta <body>

Es una imagen con el código html de ejemplo

‍

La interpretación de las etiquetas de este bloque, sería la siguiente:

  • <h1>: Esta etiqueta se utiliza para definir el título de nivel uno.
  • <p>: Para empezar un nuevo párrafo necesitas usar esta etiqueta.
  • <h2>: En este caso, es para un título de nivel dos. Esta etiqueta identifica los niveles de los títulos y puede llegar hasta la H6.

Con el código que hemos hecho ahora, tanto para el <head> como para el <body>, ya tendríamos nuestra web a un nivel muy básico. Para añadirle color al texto, darle estilos diferentes, pintar imágenes, etc. Puedes utilizar etiquetas como:

  • <img>: Para añadir una imagen en la página web.
  • <ul>: Si quieres hacer listas sin ningún tipo de orden especifico, ¡esta es tu etiqueta! Para cada elemento de la lista tendrás que usar la etiqueta <li>
  • <style>: Se emplea para introducir código CSS.
  • <blockquote>: Si quieres escribir una cita larga que incluye varios párrafos, necesitarás esta etiqueta.
  • <span style=”color:blue“></span>: con esta puedes especificar un color, en este caso, azul.

Por ejemplo, si queremos agregarle color al H1, el código se vería así:

Es una imagen con el código html de ejemplo
  • <a>: Es la etiqueta para añadir un enlace a un texto.
  • “_blank”: Se refiere que al hacer clic, la página debe abrirse en una pestaña nueva.

‍

‍

Con todo el código html que hemos trabajado, nuestra web se vería así:

Es un ejemplo de como quedaría la web con el código html

‍

Si este artículo te ha interesado y quieres aprender más a fondo como crear una página web en html, trabajar estilos CSS, y tener todos los conocimientos necesarios para hacerlo, te recomendamos el bootcamp de programación de HACK A BOSS. Es un curso con un enfoque eminentemente práctico en el que en 16 semanas aprenderás todo lo necesario para convertirte en un desarrollador o desarrolladora full stack, uno de los perfiles tecnológicos con más demanda laboral en el mercado.

‍