CSS y HTML (parte 1)

Mario González - Blog sobre desarrollo web

Introducción a HTML y CSS (1ª parte)

| ,

En esta serie de dos artículos explicaremos qué son los lenguajes HTML y CSS, y nos adentraremos en los estándares: cuál es su origen, por qué es importante conocerlos y aplicarlos a la hora de desarrollar una web, y también veremos algunos consejos para estar siempre al día respecto a una tecnología que no para de cambiar.

En este primer capítulo nos centraremos en introducir ambos lenguajes, y en el siguiente explicaremos los estándares.

Ver siguiente artículo: Introducción a HTML y CSS (2ª parte)

HTML

El HTML (HyperText Markup Language) es un lenguaje, como su nombre indica, de marcado. Es decir, el contenido de un documento HTML va acompañado de marcas (o etiquetas) que informan sobre él o lo describen. A grandes rasgos, las marcas definen la estructura del contenido y le otorgan significado. Por ejemplo, si un ordenador se encuentra este texto en un documento, no sabrá qué es:


Historia del HTML.

Pero si se encuentra esto:


<h1>Historia del HTML.</h1>
<p>hola</p>

Entonces sabrá que es un titular que sintetiza en pocas palabras de qué trata el contenido que venga después.

Del mismo modo, si un ordenador se encuentra esto, no sabrá qué es:


Lenguajes de programación:
PHP
ASP
JavaScript
Python

Pero si se encuentra esto:


<h1>Lenguajes de programación:</h1>
<ul>
    <li>PHP</li>
    <li>ASP</li>
    <li>JavaScript</li>
    <li>Python</li>
</ul>

Sabrá que está enumerando una serie de elementos de la misma categoría. Otorgar significado a los contenidos de un documento es fundamental para el tratamiento automático de la información.

Estas marcas o etiquetas se han usado tradicionalmente no sólo para estructurar o dar significado a un texto, sino para establecer su presentación. Así, en webs de hace años se pueden encontrar etiquetas HTML como <font> o <center>, cuya función era establecer cómo se presentaba el contenido al que acompañaban. Con el tiempo estas etiquetas se han ido abandonando, ya que lo ideal es que el documento HTML no contenga información de cómo se ha de presentar el contenido. Si pensamos que un documento HTML no es sólo para que lo vean personas en una pantalla a través de un navegador, sino que también tiene que ser procesado e indexado por los robots de los buscadores, impreso en papel por una impresora, o leído en voz alta por un navegador para ciegos, podemos ver lo importante que es mantener exclusivamente la información en el documento HTML, y separar la manera de presentarla, para poder hacerlo de diferentes maneras. Este planteamiento se llama separación de presentación y contenido, y es la tendencia actual en desarrollo web. Con ayuda del CSS podremos definir diferentes presentaciones para un mismo contenido.

CSS

El CSS (Cascading Style Sheets) es un lenguaje orientado a definir cómo se presenta un documento. HTML. Es el encargado de establecer colores, tipografías, tamaños, posiciones, bordes, e incluso forma de pronunciar una parte del texto en un navegador para ciegos. Permite mantener independientes, como ya hemos visto, el contenido y la forma de presentarlo.

Un documento CSS se compone de varias reglas de estilo. Una regla es un trozo de código que establece cómo se presenta uno o varios elementos HTML determinados. Por ejemplo:


h1 { font-size:16px; font-weight:bold }

Esta regla establece que todos los elementos <h1> tengan un tamaño de letra de 16px y vayan en negrita.


a { text-decoration:underline; color:#ff0000 }

Esta regla establece que todos los elementos <a> vayan en color rojo y subrayados.

Tener centralizados los estilos de un sitio web en un solo documento CSS proporciona varias ventajas además de las ya comentadas:

Permite un mantenimiento rápido: Imaginemos un sitio web compuesto por 10 o más páginas web. Si cada página web tiene definido el tipo de letra con etiquetas <font>, el día que queramos cambiar el tipo de letra, tendremos que cambiar todas las páginas, mientras que si el tipo de letra está establecido en un único documento CSS, sólo tendremos que cambiarlo ahí. Es cierto que hay maneras no muy aconsejables de incluir CSS que no evitarían este problema, como incluir CSS inline o en la etiqueta <head> de cada página. Todo esto lo veremos en un próximo artículo que se centrará en CSS.

Reduce uso de ancho de banda: Al entrar en una web, se carga su archivo CSS y se almacena en caché. Da igual el número de páginas del sitio web por las que naveguemos, el archivo sólo se cargará una vez. Si esta información está incluida en el propio HTML, tendremos que cargarla para cada página que visitemos, incluso aunque se trate de la misma información.

Les enseña a los buscadores lo que necesitan: Cuando un buscador envía su robot para analizar una web, lo que busca es el contenido. Si el HTML está lleno de marcas de presentación, el robot tendrá que leer información que no utilizará. Además, los robots de los buscadores tienen en cuenta el tiempo de descarga de una página, y cuanto más código tenga el documento HTML, mayor será aquél.

Con esto hemos repasado algunas nociones básicas sobre HTML y CSS. En el siguiente artículo hablaremos sobre los estándares web.

Ver siguiente artículo: Introducción a HTML y CSS (2ª parte)

¿Qué opinas?

Tu dirección de correo electrónico no será publicada. * Campos obligatorios