¡Hola! Mi nombres es David Zamora y este es el primer capítulo de la serie donde vamos a prender HTML desde cero. En este curso vamos a aprenderlo todo acerca de este lenguaje y además, daremos un vistazo a todas y cada una de las etiquetas HTML.
Sí, lo has oído bien, todas las etiquetas estarán disponibles en un diccionario que podrás consultar cuando tu quieras.
Para seguir este curso necesitarás solamente dos cosas fundamentales.
Necesitarás practicar bastante y necesitarás también un poco de paciencia. Aunque bueno, esto último no hará falta, ya que los capítulos de esta serie son cortos y accesibles para todo el mundo. Da igual el nivel que tengas.
Recuerda que si en algún momento tienes alguna duda o quieres preguntarme lo que sea, puedes dejarme tu consulta en los comentarios.
¿Qué es y para qué sirve el lenguaje HTML?
Las siglas HTML en inglés significan HyperText Markup Language, que en español significa lenguaje (web) de marcas de hipertexto.
Este lenguaje define la estructura del contenido de una página web y funciona a través de etiquetas. HTML es un lenguaje de marcado y no es un lenguaje de programación.
Aunque esto último no sé porque puede generar mucha polémica.
Normalmente se utiliza en conjunto con otros lenguajes o tecnologías como CSS o JavaScript.
Gracias al lenguaje HTML podemos navegar fácilmente por un sitio web e insertar enlaces y demás elementos cómo las imágenes.
Además, nos permite organizar el contenido y dar formato a los documentos html, por ejemplo mediante títulos, subtítulos y párrafos.
Uno de los puntos fuertes que tiene html es que es fácil de aprender y tiene un soporte muy extendido, de hecho, funciona de forma nativa en todos los navegadores.
Partes de HTML
El lenguaje de HTML se compone de varias partes. Las etiquetas (tags), los atributos, los elementos y el contenido.
Etiquetas
Una etiqueta en html es un “trozo” de código que nos permite construir elementos en HTML. Normalmente suele tener una apertura y un cierre, para indicar el comienzo y el final de cada etiqueta.
En medio de la apertura y el cierre de esta podemos encontrar el contenido.
Por ejemplo:
La etiqueta <p> define un párrafo, y la etiqueta <h1> define un título.Atributos
Los atributos en HTML proporcionan información adicional sobre los elementos de HTML. Se incluyen siempre en el inicio de una etiqueta y están compuestos por dos partes: el nombre del atributo y el valor del atributo, separados por un signo igual. El valor del atributo está siempre entre comillas.
Algunos ejemplos comunes son:
class: Este atributo se utiliza para especificar una o varias clases para un elemento HTML. Las clases se utilizan para seleccionar elementos y aplicar CSS a ellos.id: Este atributo se utiliza para especificar un id único para un elemento HTML.src: Este atributo se utiliza para especificar la fuente de un elemento incrustado, como una imagen.alt: Este atributo se utiliza para proporcionar un texto alternativo para las imágenes, en caso de que no puedan ser visualizadas.href: Este atributo se utiliza para proporcionar un enlace a otra página web.
Existen muchos otros atributos, puedes consultar la lista de atributos en HTML para más información.
Elemento
Los elementos HTML son los bloques de construcción de las páginas HTML. Un elemento HTML está compuesto por una etiqueta de apertura, una etiqueta de cierre y el contenido que se encuentra entre ambas. Algunos elementos también pueden tener atributos.
Aquí se muestran algunos ejemplos de elementos comunes en HTML:
<p>: Este es el elemento que se utiliza para los párrafos de texto.<h1>a<h6>: Estos son los elementos que se utilizan para los encabezados.<h1>es el encabezado de mayor nivel y<h6>es el de menor nivel.<div>: Este es un contenedor que se utiliza para agrupar otros elementos.<a>: Este es el elemento que se utiliza para los enlaces.<img>: Este es el elemento que se utiliza para las imágenes.
Contenido
El contenido HTML es el texto, imágenes, videos u otro tipo de información que se muestra en un sitio web y que está contenido dentro de los elementos HTML.
El contenido más básico y común en HTML se incluye el texto que se encuentra dentro de elementos como <p>, <h1> a <h6>, <li> y otros. Por ejemplo:
<p>Este es un párrafo de texto.</p>
En HTML, hay varios tipos de contenido… pero eso ya lo veremos en otro post.
Cómo funciona HTML
Conocer el funcionamiento de HTML nos permite tener una visión más global del ámbito web y del uso de este lenguaje.
HTML es un lenguaje interpretado por el navegador. Esto significa que, cuando entramos a un sitio web el navegador recibe el texto y la información que hay en el archivo html, que está alojado en un servidor y lo convierte en una página web.
Cuando un navegador carga una página web, lee el archivo HTML de arriba a abajo, y de izquierda a derecha. Analiza las etiquetas para crear un modelo de la página llamado DOM (Document Object Model), que es una representación estructurada de la página web. Luego, el navegador utiliza esta representación para mostrar la página web al usuario.
En resumen, el lenguaje de HTML le dice al navegador qué contenido mostrar y cómo estructurarlo. La apariencia de este contenido (como colores, tamaños de fuente, espaciado, etc.) se controla con CSS, y la interactividad y funcionalidad se maneja con JavaScript.
Para que un navegador pueda leer el código html que escribimos deberemos crear un archivo con la terminación o el sufijo “.html”.
Por ejemplo, cuando empezamos a crear una página web, el primer archivo que creamos suele ser el index.html.
Existen muchas otras etiquetas en HTML. Esto ha sido una pequeña introducción para comprender de forma rápida qué es HTML y para qué sirve.
A continuación, veremos más en el siguiente capítulo.