Introducción
HTML es un lenguaje de marcado que permite crear y estructurar el contenido de una página web. Es la base sobre la que se construyen todas las páginas web en Internet. En este blog, te enseñaremos los conceptos fundamentales de HTML para que puedas crear tus propias páginas web desde cero.
Donde se utiliza y para qué
HTML se utiliza para crear páginas web, desde simples páginas estáticas hasta páginas dinámicas y complejas con animaciones y efectos interactivos. HTML es el lenguaje que permite al navegador interpretar la información de una página web y presentarla al usuario de manera coherente y ordenada.
Ejemplo
<html>
<head>
<title>Mi página de ejemplo</title>
</head>
<body>
Aquí va el contenido
</body>
</html>
Historia
HTML fue creado en 1990 por Tim Berners-Lee, un científico de la computación británico, mientras trabajaba en el CERN, el centro europeo para la investigación nuclear. Berners-Lee necesitaba un lenguaje que permitiera a los científicos compartir información y documentos a través de la red incipiente de computadoras conocida como Internet. HTML se convirtió en el lenguaje estándar para la creación de páginas web y ha evolucionado a lo largo de los años, con la incorporación de nuevas características y funcionalidades.Elementos HTML
Los elementos son los bloques de construcción básicos de una página web y se escriben utilizando etiquetas HTML. Cada elemento tiene un propósito específico y se utiliza para agregar diferentes tipos de contenido a una página web. Por ejemplo, los encabezados se utilizan para titulares o subtítulos, los párrafos se utilizan para texto normal y las imágenes se utilizan para mostrar gráficos o fotografías.
Los elementos HTML se pueden anidar, lo que significa que se pueden colocar unos dentro de otros para crear estructuras más complejas. Por ejemplo, un elemento de lista (<li>) se puede colocar dentro de un elemento de lista ordenada (<ol>) o no ordenada (<ul>) para crear una lista de elementos.
Algunos ejemplos de elementos HTML son:
- Encabezados:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> - Párrafos:
<p> - Listas:
<ul>,<ol>,<li> - Imágenes:
<img> - Enlaces:
<a> - Formularios:
<form>,<input>,<button>,<select>,<textarea>
Atributos HTML
Los atributos son propiedades que se pueden agregar a los elementos HTML para darles más funcionalidad o para cambiar su apariencia. Cada elemento tiene diferentes atributos disponibles, y algunos atributos son específicos para ciertos elementos.
Por ejemplo, el atributo src se utiliza para especificar la ubicación de una imagen, y el atributo href se utiliza para crear enlaces a otras páginas web. Otros atributos comunes incluyen class para asignar una clase CSS a un elemento, id para identificar un elemento de manera única, y style para aplicar estilos CSS directamente a un elemento.
Es importante recordar que los atributos deben colocarse dentro de las etiquetas de apertura de los elementos correspondientes y deben tener un valor asignado. Por ejemplo, si quisiéramos agregar un enlace a una página web, usaríamos la etiqueta <a> con el atributo href y un valor que especifique la URL de destino:
<a href="https://www.ejemplo.com"><strong>Enlace a Ejemplo.com</strong></a>
Anatomía de una etiqueta HTML
Una etiqueta HTML consta de tres partes principales: el nombre de la etiqueta, los atributos (opcionales) y el contenido (también opcional).
Por ejemplo, la etiqueta para crear un párrafo es <p>. Si quisiéramos agregar una clase CSS a este párrafo, podríamos usar el atributo class con un valor específico. El contenido del párrafo es el texto que aparecerá en la página web:
<p class="intro">Este es un párrafo de introducción.</p>
También hay etiquetas auto-cerrantes, como <img>, que no tienen contenido y no necesitan una etiqueta de cierre. En lugar de eso, cualquier atributo se escribe en la etiqueta de apertura:
<img src="ejemplo.jpg" alt="Ejemplo de imagen">