Si has te interesa un poco el mundo de la web, seguro que has escuchado algo sobre HTML. Es el estándar con el que se construye y se estructura el contenido en la web. En esta guía para principiantes, vamos a ver qué es el HTML, cómo funciona y por qué es tan importante para la creación de sitios web. También veremos algunos ejemplos básicos para que veas cómo funciona el HTML.
Qué es HTML
HTML, abreviatura de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje imprescindible para la creación de páginas web.
Es un estándar que define cómo se estructura y presenta el contenido en la web, permitiendo a los desarrolladores crear y organizar secciones, párrafos, enlaces y mucho más en sus páginas web.
Un Poco de Historia
El origen de HTML se remonta a 1991, cuando Tim Berners-Lee, un físico trabajando en el CERN (Organización Europea para la Investigación Nuclear), lo diseñó.
Berners-Lee propuso un nuevo sistema de información que utilizara hipervínculos para conectar documentos entre sí en una red global, lo que eventualmente se convertiría en la World Wide Web que conocemos hoy.
HTML fue concebido originalmente para ser un lenguaje de marcado que pudiera ser usado por personas sin experiencia en codificación para crear documentos y compartirlos.
Los primeros documentos HTML eran relativamente simples, con el tiempo, el lenguaje ha evolucionado para incorporar una gama más amplia de funcionalidades, incluyendo incrustación de imágenes, formularios interactivos, y scripts complejos.
Cómo Funciona HTML
HTML utiliza las etiquetas para marcar los elementos, indicando al navegador cómo debe presentar el contenido.
Por ejemplo, una etiqueta de título < title > determina el título de la página, que es el texto que ves en la pestaña de tu navegador.
Las etiquetas de encabezado (< h1 >, < h2 >, etc.) definen los títulos y subtítulos, organizando la información de manera jerárquica y facilitando la lectura tanto para los usuarios como para los motores de búsqueda.
El HTML en sí mismo no se encarga del estilo o la interactividad de las páginas web. Eso se logra con CSS (Cascading Style Sheets) y JavaScript, respectivamente, que trabajan en conjunto con HTML para crear experiencias web ricas y dinámicas.
Elementos y Etiquetas
En HTML, los elementos y las etiquetas son conceptos fundamentales que forman la base estructural de cualquier página web.
Cada elemento HTML se define por etiquetas, que son fragmentos de código encerrados entre corchetes angulares (<, >).
Estas etiquetas dictan cómo se debe mostrar el contenido dentro de los navegadores web y cómo se organiza la información en la página.
Elemento HTML
Un elemento HTML típico consiste en:
- Etiqueta de Apertura:
Esta etiqueta marca el inicio de un elemento. Por ejemplo, < div > inicia un elemento divisorio. - Contenido:
Este es el cuerpo del elemento, que puede ser texto, otros elementos HTML, o incluso contenido multimedia como imágenes y vídeos. - Etiqueta de Cierre:
Esta etiqueta señala el final del elemento. Se diferencia de la etiqueta de apertura por incluir una barra inclinada antes del nombre del elemento, como en < /div >.
Veamos algunos ejemplos más detallados para ilustrar cómo se utilizan estos elementos en la práctica:
Ejemplo de uso de etiquetas
Encabezados y párrafos
<h1>Bienvenido a mi Blog</h1>
<p>Este es el primer párrafo del contenido, donde explico de qué tratará mi blog.</p>En este ejemplo, < h1 > es una etiqueta que define un encabezado de primer nivel, el más importante y de mayor tamaño en la jerarquía HTML. El < p > es una etiqueta para párrafos, utilizada para envolver bloques de texto.
Listas
Las listas son elementos muy utilizados para organizar información de manera ordenada o desordenada. Hay dos tipos principales:
- Listas Ordenadas (< ol >): Enumera los elementos en un orden específico.
- Listas Desordenadas (< ul >): Agrupa los elementos sin un orden particular.
<h2>Mis Frutas Favoritas</h2>
<ul>
<li>Manzana</li>
<li>Banana</li>
<li>Fresa</li>
</ul>Enlaces
Los enlaces permiten la navegación entre páginas o sitios. Se crean usando la etiqueta < a >, que incluye un atributo href especificando el destino del enlace.
<p>Visita nuestro <a href="https://www.ejemplo.com">sitio web</a> para más información.</p>Imágenes
Las imágenes se incrustan en las páginas HTML mediante la etiqueta < img >, que es una etiqueta autocerrada y lleva atributos como src (la fuente de la imagen) y alt (texto alternativo).
<img src="imagen.jpg" alt="Descripción de la imagen">Atributos de las etiquetas
Los elementos HTML pueden tener atributos, que proporcionan información adicional sobre el elemento. Un atributo siempre se escribe dentro de la etiqueta de apertura y generalmente consta de un nombre y un valor, como en class=»nombreClase».
Ejemplo de Atributos
<a href="https://www.ejemplo.com" target="_blank">Visita Ejemplo</a>En este ejemplo, href es un atributo que indica la dirección URL del enlace, y target=»_blank» es un atributo que hace que el enlace se abra en una nueva pestaña del navegador.
Etiquetas HTML más utilizadas
Aquí tienes una tabla que resume algunas de las etiquetas HTML más utilizadas y su función, ideal para principiantes que desean familiarizarse rápidamente con los elementos fundamentales del lenguaje HTML:
| Etiqueta | Función |
|---|---|
<html> | Define la raíz de un documento HTML. |
<head> | Contiene metadatos y enlaces a scripts y hojas de estilo. |
<title> | Especifica el título del documento, visible en la pestaña del navegador. |
<body> | Representa el contenido principal del documento HTML. |
<h1> a <h6> | Definen los encabezados, desde el más importante (<h1>) al menos importante (<h6>). |
<p> | Define un párrafo de texto. |
<a> | Define un hipervínculo, que enlaza a otra página o recurso. |
<img> | Incrusta una imagen en el documento, usando el atributo src para determinar la fuente de la imagen. |
<ul>, <ol>, <li> | <ul> y <ol> definen listas desordenadas y ordenadas, respectivamente, mientras que <li> se utiliza para cada elemento de la lista. |
<table>, <tr>, <td>, <th> | <table> crea una tabla, <tr> define una fila de la tabla, <td> una celda de datos, y <th> una celda de encabezado. |
<div> | Define una división o sección en un documento, útil para agrupar elementos y aplicar estilos CSS. |
<span> | Se utiliza para agrupar contenido en línea para aplicar estilos o identificar partes del texto. |
<form> | Define un formulario HTML para la entrada del usuario. |
<input> | Define un campo de entrada, como texto, contraseña, radio, checkbox, etc. |
<button> | Define un botón que el usuario puede presionar. |
<script> | Incorpora o hace referencia a un script, como JavaScript, en el documento. |
<link> | Se utiliza para enlazar hojas de estilo externas, como CSS. |
<meta> | Proporciona metadatos sobre el HTML, como la codificación de caracteres o palabras clave para SEO. |
Esta tabla proporciona una visión general de las etiquetas más comunes que encontrarás y utilizarás al desarrollar páginas web.
Cada etiqueta tiene su propósito específico y juega un papel importante en la estructuración y la funcionalidad de los sitios web.
Con el dominio de estas etiquetas, podrás empezar a crear tu propio HTML para tu web.
Crea tu primera Web HTML
Crear tu primera página web es más fácil de lo que piensas, de hecho vamos a hacer una web ahora mismo.
Tómatelo como una introducción al mundo del desarrollo web. Aprenderás a crear una página web simple que incluye un saludo, una imagen y un enlace.
Comenzaremos eligiendo una herramienta adecuada para escribir el código y luego pasaremos a la escritura del HTML básico.
Herramientas Necesarias
Para escribir HTML, necesitas un editor de texto. Hay muchas opciones disponibles, pero aquí te recomendamos algunas que son fáciles de usar y gratuitas:
- Notepad++ (Windows):
Es un editor de texto poderoso con características que facilitan la escritura de código, como la coloración de sintaxis. - Visual Studio .Code (Windows, Mac, Linux):
Un editor de código fuente ligero pero potente que soporta la edición de HTML y muchos otros lenguajes de programación. Ofrece muchas extensiones y herramientas integradas. - Sublime Text (Windows, Mac, Linux):
Este es otro editor de texto muy utilizado que es rápido y fácil de usar.
Cualquiera de estos editores será suficiente para empezar a crear páginas web. Son gratuitos, no tienes que gastar nada para empezar crear tu web con HTML.
Creando un Documento HTML Básico
- Abre tu editor de texto y comienza un nuevo archivo.
- Escribe el siguiente código HTML en tu archivo. Este código es una estructura básica de una página HTML que incluye un saludo, una imagen y un enlace.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Primera Página Web</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Bienvenido a mi primera página web.</p>
<img src="https://www.loading.es/blog/wp-content/uploads/logo-loading-100.png" alt="Imagen genérica">
<p>Visita <a href="https://loading.es">Loading</a> para saber más sobre desarrollo web.</p>
</body>
</html>- Guarda el archivo con la extensión .html, por ejemplo, mi_primera_web.html.
- Abre el archivo en tu navegador. Puedes hacerlo simplemente haciendo doble click en el icono y se abrirá en el navegador por defecto que tengas establecido o haciendo clic derecho en el archivo y seleccionando «Abrir con» y luego eligiendo tu navegador.
Explicación del código
- <!DOCTYPE html> declara que este documento es HTML5.
- <html lang=»es»> es el elemento raíz de una página web y especifica que el idioma del documento es español.
- Dentro del <head>, se define la codificación de caracteres y el título de la página web, que aparece en la pestaña del navegador.
- El <body>contiene todo el contenido visible de la página:
- <h1> es un encabezado que dice «¡Hola, mundo!».
- <p> es un párrafo con texto de bienvenida.
- <img> incrusta una imagen genérica (reemplaza el URL de la imagen con una real o elige una imagen de tu PC modificando el atributo src).
- El último <p> contiene un enlace a Loading, donde puedes aprender más sobre desarrollo web.
Resultado
Cuando abras el archivo en tu navegador, verás un encabezado, un párrafo de texto, una imagen y un enlace.
¡Felicidades! Acabas de crear y visualizar tu primera página web.
Este ejemplo es un punto de partida excelente para empezar a experimentar con HTML.
Puedes intentar modificar el texto, agregar más imágenes, o incluso enlazar otras páginas que crees. La práctica es clave en el aprendizaje del desarrollo web.
Hosting para tu página web
Una vez tengas creada tu primera página web en HTML** la tendrás guardada en tu PC, así que no estará accesible para nadie más que para ti.
Si quieres que tu web esté en internet tienes que subirla a un servidor y es aquí donde Loading puede ayudarte.
Tenemos planes de hosting web de distintos tamaños para que se adapten al proyecto que quieras crear.
Sólo tienes que contratar el plan de hosting que mejor se adapte a tus necesidades y subir tu web al hosting y a partir de es ese momento, cualquier usuario de cualquier parte del mundo podrá acceder a tu web.
Y si no tienes claro qué tipo de hosting es el que más te conviene, siempre puedes ponerte en contacto con nosotros. Te ayudaremos encantados.
Conclusión
¡Y ahí lo tienes! Has dado tus primeros pasos en el emocionante mundo del desarrollo web con HTML.
Como has visto, HTML es la base de todas las páginas web, pero también es un punto de partida accesible para cualquiera que quiera empezar a crear contenido en la web.
Aunque lo que hemos cubierto hoy es bastante básico, te proporciona la estructura fundamental para que puedas empezar a experimentar y construir por tu cuenta.
Recuerda que la práctica hace al maestro, así que no dudes en jugar con el código, probar nuevas etiquetas y explorar cómo los diferentes elementos interactúan entre sí.
Cada línea de código que escribes te acerca un poco más a convertirte en un hábil desarrollador web. No tengas miedo de cometer errores; cada error es una oportunidad de aprendizaje.