HTML y CSS

HTML y CSS: los poderosos lenguajes informáticos para crear una página web

HTML y CSS son dos lenguajes informáticos claves para desarrollar un sitio web. Si no lo sabías, no te preocupes. Una vez hayas terminado de leer este artículo, entenderás muchas de las cosas que pasan en el desarrollo front-end de todo sitio web. 

Así que te adelantamos que HTML siempre representará contenido y CSS siempre representará la apariencia de ese contenido. 🤓

¡Pero esto es solo el principio! Antes de comenzar un viaje para aprender a construir sitios web con HTML y CSS, es importante entender las diferencias entre estos dos lenguajes, la estructura y sintaxis de cada uno de ellos y los términos más comunes.

Una vez entendida la diferencia entre HTML y CSS, profundizaremos en HTML e incluso veremos una breve historia de HTML para no dejar escapar ni un detalle.

¡Que tengas un buen aprendizaje! 💻

¿Qué significa el lenguaje HTML?

El lenguaje HTML fue creado en 1989 por Tim Berners-Lee y es el acrónimo de Hypertext Markup Language, que traducido de manera directa al español sería Lenguaje de Marcado de Hipertexto.

El hipertexto es el método que permite la navegación a través de la red y las páginas web, ya que permite que al hacer clic en un texto especial llamado hipervínculo puedas ir a una siguiente página.

El prefijo "hiper" hace referencia a que el movimiento no es lineal, ya que puede ir a cualquier lugar de internet con solo un clic. Por otro lado, el marcado es la acción de colocar etiquetas HTML al texto que se usa en una web. Este marcado le asigna un tipo de elemento, por ejemplo, un botón.

¿Qué es el HTML en informática?   

Entonces, el HTML es un lenguaje que permite definir la estructura del contenido de una página web a través del uso de elementos envueltos en etiquetas compatibles universalmente. Esto permite que cualquier persona en el mundo con acceso a internet pueda visualizarlo.

Se le denomina como lenguaje ya que tiene palabras en código y sintaxis como cualquier otro lenguaje. Los buscadores como Mozilla Firefox, Google Chrome, Safari o Microsoft Edge procesan toda la información en código HTML y nos la muestra con las estructuras con la que fue creada. Pero para darle más “vida” a los elementos de HTML aparecieron los estilos del lenguaje CSS.

¿Qué significa CSS?

CSS es el acrónimo para Cascading Style Sheets, que traducido al español es Hojas de Estilo en Cascada. Haciendo referencia al lenguaje que le da un estilo determinado y complementa el lenguaje HTML.

Usando nuestro ejemplo anterior, nuestro botón no solo será cuadrado, sino que ahora tendrá las puntas redondeadas, será de color azul y tendrá una sombra detrás de él. El término cascada es porque se aplican de arriba hacia abajo siguiendo un patrón al que se le denomina "herencias". En caso de que exista ambigüedad se utilizan una serie de reglas como las que mencionamos arriba.

¿Qué es el lenguaje CSS? 

En términos simples, el lenguaje CSS es el que describe cómo nuestros elementos en HTML serán mostrados en una pantalla de computadora, celular u otro dispositivo multimedia. Las hojas de estilos CSS son de gran ayuda y ahorran mucho trabajo al momento de programar un sitio web, ya que pueden controlar el aspecto de múltiples páginas dentro del sitio a la vez con una sola hoja de estilos o documento de CSS. Entonces, a través del CSS tendrás la capacidad de determinar el diseño, color, fuente, entre otras características de tus elementos.

El CSS y el HTML suelen renderizarse en los navegadores con una separación del contenido y la presentación o estilos de ese contenido, y este proceso se lleva a cabo en el siguiente orden:

1. El navegador convierte HTML y CSS en un DOM (Objeto Documento Modelo) este DOM funciona como un documento para la memoria del ordenador, de forma que puede combinar el contenido del documento en texto con su hoja de estilo.
2. El navegador muestra el contenido del DOM al usuario.

¿Qué es el DOM? 

El DOM (Document Object Model) en español significa textualmente Modelo de Objetos del Documento. En programación, todas las páginas web HTML se denominan documentos.

El modelo de objetos de este documento representa cada una de estas páginas web en una estructura en forma de árbol para facilitar el acceso y la gestión de los elementos. De manera general el DOM es esencialmente un intento de convertir la estructura y el contenido del documento HTML en un modelo de objetos que puede ser utilizado por varios programas o navegadores.

La estructura de objetos del DOM está representada por lo que se llama un "árbol de nodos" y se llama así porque se puede pensar en un árbol con un solo tallo padre que se ramifica en varias ramas secundarias, cada una de las cuales puede tener hojas. En este caso, el "tallo" principal es el elemento raíz <html>, las "ramas" secundarias son los elementos anidados y las "hojas" son el contenido dentro de los elementos.

¿Qué son las etiquetas HTML?

Las etiquetas dentro del lenguaje de programación HTML son fragmentos de código que nos facilitan la creación de elementos HTML para crear una página web. Estos luego son procesados por los navegadores como ya te hemos explicado. 

La sintaxis o formato en el que se escriben estas etiquetas es a través del uso de corchetes angulares < >. La gran mayoría de elementos HTML tienen una etiqueta de inicio o apertura, por ejemplo <button>, y luego se finaliza con una etiqueta de cierre que lleva una diagonal al inicio, por ejemplo </button>.

Estos elementos HTML tienen también dos propiedades básicas. Unos son los atributos, que se encuentran en la etiqueta de apertura y sirven para asignarle información relevante para tu sitio como un identificador, y luego se ingresa el contenido, que comprende el texto que se mostrará a los usuarios, y se ingresa dentro de las dos etiquetas (la de apertura y la de cierre).  En nuestro ejemplo del botón, este se vería así:

 <button id=”boton-de-compra”>Comprar curso</button> 

Ejemplo etiquetas HTML más comunes:

Esta es una estructura muy básica que muestra el orden y algunos elementos muy comunes dentro de un archivo HTML. Para que tengas una mejor idea, mira la lista de etiquetas básicas de HTML que te mostramos a continuación.

Etiquetas básicas de HTML

• <html>: sirve para indicar el comienzo del documento HTML.
• <head>: se utiliza para indicar que empieza el título de una página. Se suele poner el título (<title>) de la web, una descripción y demás información relacionada con el contenido de la página.
• <body>: es el contenido de tu página, es lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.
• <h1>, <h2>, etc.: son los títulos y subtítulos. Se utilizan para darle un orden determinado al contenido de la página como los titulares. Suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto y son importantes en el posicionamiento en buscadores.
• <a>: sirve para definir los enlaces.
• <table>: esta etiqueta encierra todas las filas y columnas de la tabla. Al definir una tabla, debes pensar en primer lugar en las filas <tr> que la forman y en las columnas <td>.
• <p>: el texto dentro de esta etiqueta html forma un párrafo.
• <img>: imágenes.
• <ul>: los textos dentro de esta etiqueta html se estructuran en listas. Mediante el uso de <li> se define cada guión dentro de la lista, y usando <ol> en lugar de <ul> se obtienen listas ordenadas.
• <b> y <strong>: cuando quieres resaltar el texto.
• <u>: para subrayar el texto.
• <i> y <em>: texto en cursiva.

Observa cómo se relacionan entre ellos, en qué punto abren y cierran estos elementos. Por ejemplo, dentro de la etiqueta de body (<body>) ‘viven’ muchos elementos como headings (<h1>) y párrafos de texto (<p>), y esta etiqueta que alberga a la mayoría del contenido, abre después de que cierra la etiqueta del head (</head>), y cierra casi al final, justo antes de que la etiqueta principal del archivo (<html>).

También nota cómo el primer párrafo de texto tiene asignado un atributo llamado clase que busca diferenciarlo del otro párrafo con el nombre “texto-resaltado”.  Esto permitirá asignarle estilos y otras funcionalidades exclusivamente a ese párrafo, llamándolo a través de selectores de CSS como veremos a continuación.

¿Cuál es la estructura y sintaxis de CSS?

Selector: se utiliza para llamar al elemento HTML al cual queremos modificar. Este es el primer parámetro que necesitamos para asignar estilos a nuestro contenido.

Propiedad: especifica qué característica queremos alterar de nuestro elemento HTML como el color, tipo de letra, opacidad, entre otros.

Valor de propiedad: define cómo o en qué cantidad vamos a aplicar el cambio de la propiedad.

Declaración: especifica cuál de las propiedades del elemento queremos darle un estilo.

Para hacer la declaración de estilo correctamente es necesario que respetemos los signos utilizados y su orden. Entonces, para asignarle color rojo al texto de nuestro botón, la declaración de CSS se vería así:

¿Cómo aplicar los selectores de CSS?

Existen tres formas en las que se pueden incluir los selectores de CSS en una hoja de estilos en una página web: 

1. Inline Styles o  Estilo de Línea: Los cuales se aplican directamente en un elemento HTML, en la que se adiciona el atributo style=”propiedad:valor;?” en la etiqueta de apertura de ese elemento. Por ejemplo: