Aprende HTML desde cero: Primeros pasos en el desarrollo web

HTML Basics

Bienvenido a esta serie de guía completas para aprender los conceptos básicos de HTML y dar tus primeros pasos en el emocionante mundo del desarrollo web.

En este artículo, te llevaremos de la mano a través de los fundamentos esenciales de HTML, el lenguaje de marcado que se utiliza para estructurar el contenido en la web. Aprenderás cómo crear una página web simple y comprenderás la importancia de HTML en la construcción de sitios web modernos y dinámicos.

Entonces, ¿qué es HTML en realidad?

HTML, o HyperText Markup Language, es el lenguaje de marcado estándar utilizado para estructurar y presentar el contenido en la web. Cada página web que ves en Internet está escrita en HTML. HTML utiliza etiquetas para marcar diferentes elementos de una página web y definir su estructura.

Está cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. HTML se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW).

Por ejemplo, detrás de la página web que muestra la Wikipedia (izquierda de la imagen) existe un código escrito en HTML compuesto por etiquetas que permite estructurar los contenidos (derecha de la imagen).

Wikipedia en el explorador Chrome y parte de su código fuente (HTML)

Elementos (etiquetas).

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML.

Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre.

Estructura general de una línea de código en el lenguaje de etiquetas HTML.

Primer código en HTML

Para empezar, necesitarás un editor de texto básico para escribir tu código HTML. Puedes utilizar cualquier editor de texto que prefieras, como Notepad++ o Sublime Text. Incluso hasta con el editor Bloc de Notas de Windows o TextEdit puedes trabajar en HTML, pero lo recomendable es utilizar algún editor diseñado para estos efectos.

Una vez que hayas escrito tu código HTML, puedes guardarlo con la extensión .html.

Aquí tienes un ejemplo de un documento HTML básico:

<!DOCTYPE html>
<html>
<head>
    <title>Mi primera página web</title>
</head>
<body>
    <h1>Hola, mundo!</h1>
    <p>¡Este es mi primer párrafo en HTML!</p>
</body>
</html>

En este ejemplo, se utiliza la etiqueta <!DOCTYPE html> para indicar que el documento sigue la especificación HTML5. La etiqueta <html> engloba todo el contenido de la página web, mientras que las etiquetas <head> y <body> definen las secciones de encabezado y cuerpo, respectivamente. Dentro del <head>, se encuentra la etiqueta <title>, que define el título de la página web y se muestra en la barra de título del navegador.

Dentro del <body>, se pueden utilizar varias etiquetas HTML para estructurar el contenido de la página. En este ejemplo, se utiliza la etiqueta <h1> para crear un encabezado de nivel 1 y la etiqueta <p> para crear un párrafo. Estas etiquetas son solo algunos ejemplos de las muchas etiquetas HTML disponibles para estructurar y presentar el contenido en la web.

Guarda tu archivo con el nombre que desees, por ejemplo «index.html», «primero.html» o «basico.html» y ábrelo con el navegador de Internet que tengas instalado en tu equipo. Tendrás una salida similar a esta:

Imágenes

Las imágenes son una parte importante de cualquier página web, ya que pueden transmitir información, mejorar el diseño y hacer que el contenido sea más atractivo visualmente. HTML ofrece una forma sencilla de agregar imágenes a tu página web utilizando la etiqueta <img>.

Aquí tienes un ejemplo de cómo agregar una imagen a tu página web:

<!DOCTYPE html>
<html>
<head>
    <title>Mi primera página web</title>
</head>
<body>
    <h1>Hola, mundo!</h1>
    <p>¡Este es mi primer párrafo en HTML!</p>
    <img src="mi-imagen.jpg" alt="Descripción de la imagen">
</body>
</html>

En este ejemplo, la etiqueta <img> se utiliza para insertar una imagen en la página web. El atributo src especifica la ubicación de la imagen, ya sea una URL o la ruta de un archivo en tu computadora. El atributo alt proporciona una descripción de la imagen, que se mostrará si la imagen no se puede cargar correctamente o si el usuario utiliza un lector de pantalla.

Al guardar el documento y volver a cargar el archivo tendrás una salida como esta:

Recuerda que es importante optimizar tus imágenes para la web, ya que las imágenes grandes pueden ralentizar la carga de tu página. Puedes utilizar herramientas de edición de imágenes como Photoshop o GIMP para redimensionar y comprimir tus imágenes antes de agregarlas a tu página web.

Marcado de texto

Además de la estructura y las imágenes, HTML también te permite dar formato y estilo al texto en tu página web utilizando diferentes etiquetas. Aquí hay algunas etiquetas comunes de marcado de texto en HTML:

<h1> a <h6>: Estas etiquetas se utilizan para los encabezados de nivel 1 al 6, siendo <h1> el más importante y <h6> el menos importante.
<p>: Esta etiqueta se utiliza para los párrafos de texto.
<strong> y <em>: Estas etiquetas se utilizan para resaltar el texto en negrita (<strong>) o cursiva (<em>).
<u>: Esta etiqueta se utiliza para subrayar el texto.

Aquí tienes un ejemplo de cómo utilizar estas etiquetas de marcado de texto:

<!DOCTYPE html>
<html>
<head>
    <title>Mi primera página web</title>
</head>
<body>
    <h1>Hola, mundo!</h1>
    <p>¡Este es mi <strong>párrafo</strong> en HTML!</p>
    <p>¡Este es otro <em>párrafo</em> en HTML!</p>
    <p>¡Este es un <u>párrafo</u> subrayado en HTML!</p>
</body>
</html>

En este ejemplo, se utiliza la etiqueta <strong> para resaltar la palabra «párrafo» en negrita, la etiqueta <em> para resaltar la palabra «párrafo» en cursiva y la etiqueta <u> para subrayar la palabra «párrafo». Estas etiquetas son solo algunos ejemplos de las muchas etiquetas disponibles en HTML para dar formato y estilo al texto en tu página web.

Vínculos

Los vínculos, o enlaces, son una parte fundamental de la web, ya que permiten a los usuarios navegar de una página web a otra. HTML ofrece la etiqueta <a> para crear vínculos en tu página web.

Aquí tienes un ejemplo de cómo crear un vínculo en HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Mi primera página web</title>
</head>
<body>
    <h1>Hola, mundo!</h1>
    <p>¡Este es mi primer párrafo en HTML!</p>
    <a href="https://www.ejemplo.com">Haz clic aquí</a> para visitar un sitio web.
</body>
</html>

En este ejemplo, la etiqueta <a> se utiliza para crear un vínculo. El atributo href especifica la URL a la que se debe dirigir el vínculo. En este caso, el vínculo apunta a «https://www.ejemplo.com«. El texto entre las etiquetas de apertura y cierre de <a> se muestra como el texto del vínculo en la página web. Mira en el navegador de Internet la página actualizada y cómo se muestra el destino del enlace que se ha escrito:

En este artículo, hemos explorado inicialmente los conceptos básicos de HTML y hemos aprendido cómo crear una página web simple utilizando etiquetas HTML. Ahora tienes una base sólida para comenzar a construir tus propias páginas web y adentrarte en el emocionante mundo del desarrollo web.

En próximas entregas aprenderemos sobre otros elementos y etiquetas que también componen el código HTML y que pueden hacer que una página web sea más funcional y mejor estructurada.

Recuerda que HTML es solo el comienzo. Para crear sitios web más dinámicos y atractivos, deberás aprender otros lenguajes y tecnologías como CSS para el diseño y JavaScript para la interactividad. Sigue aprendiendo y experimentando, y pronto serás capaz de crear sitios web increíbles. Te recomendamos que mires está página de la Wikipedia para que conozcas más sobre historia del HTML y otras etiquetas HTML básicas

¡Buena suerte en tu viaje de aprendizaje en el desarrollo web!

Share on Social Media