Tomás Domínguez Mínguez
Internet forma ya parte inseparable de nuestras vidas. Sin la existencia de esta red, muchas de las actividades que realizamos a diario, tanto personales como profesionales, no serían posibles. En todas ellas, ya se trate de una gestión burocrática, una compra online o tan solo la consulta del pronóstico del tiempo, lo que hacemos básicamente es utilizar un navegador para acceder a las páginas ofrecidas por un servidor web.
Dichas páginas se desarrollan en HTML (HyperText Markup Language), acrónimo que hace referencia a un lenguaje de marcas e hipertexto. HTML es un lenguaje hipertexto porque permite el desarrollo de páginas desde las que se puede saltar a otras pulsando sobre el enlace (hipervínculo) correspondiente. También es un lenguaje de marcas porque está formado por un conjunto de etiquetas (o marcas) que determinan el papel que juega cada elemento de la página y, en consecuencia, su estructura. Así, por ejemplo, un texto puede ser un encabezado (el título de la página, un capítulo o un apartado), parte de un párrafo o un hipervínculo. Todo depende de la etiqueta en la que se encuentre, tal como queda patente en el siguiente código:
<h1>Este es el título de un capítulo</h1>
<p>Este texto forma parte de un párrafo</p>
<a href=”http://www.google.es”>Este es un enlace al buscador de Google</a>
A continuación puedes ver el aspecto de estos tres textos en un navegador. El incluido entre las etiquetas <h1> y </h1> se muestra de forma destacada, mientras que el que hay entre <p> y </p> lo hace de forma sencilla. El perteneciente a la etiqueta <a> es muy especial, ya que, si lo pulsaras, te llevaría a otra página (la del buscador de Google), motivo por el que su color es azul y está subrayado.
Sin embargo, cuando navegas por Internet seguro que estás acostumbrado a visitar páginas con elaborados diseños gráficos que llaman tu atención, a la vez que facilitan su uso, algo que dista mucho de la página anterior. Eso es porque HTML presta atención a la organización del contenido (el papel que juega cada elemento), pero no a la forma en la que se muestra en pantalla como, por ejemplo, la fuente o el color de un texto, el tamaño de una imagen o su posición en la página.
Entonces, ¿cómo se consiguen los elaborados diseños de las páginas web actuales? Mediante CSS (Cascading Style Sheets, hojas de estilo en cascada), otro lenguaje que, a diferencia de HTML, se centra en lo que tiene que ver con el aspecto visual de los elementos y su distribución en pantalla. Ambos lenguajes se complementan, por lo que, actualmente, todas las páginas web se desarrollan como una combinación de código HTML y CSS.
Si en HTML se utilizan etiquetas, con CSS se manejan reglas de estilo mediante las que se asignan los diferentes valores que deberá tener cada una de las propiedades visuales de los elementos que conforman la página. A modo de ejemplo, si añadiera la siguiente regla CSS al archivo HTML anterior, modificaría el aspecto del enlace para que simule un botón:
a {
color: white;
background-color: blue;
padding: 10px;
border-radius: 10px;
text-decoration: none;
text-align: center;
}
A primera vista, te puede resultar difícil de entender, pero con una breve explicación sabrás cómo interpretarla. Así, la primera parte de la regla, llamada selector, está formada únicamente por la letra a, que corresponde al nombre de la etiqueta del hipervínculo, lo que indica que afecta a dicho elemento. Dentro, encerradas entre llaves, están las declaraciones mediante las que se asignan los valores a las diferentes propiedades visuales del hipervínculo. De este modo, el texto del enlace se escribirá en color blanco sobre un fondo azul (la propiedad color toma el valor white y background-color el valor blue). Con la propiedad padding se crea un espacio alrededor del texto del enlace de 10 píxeles que se rellena con el color de fondo. La propiedad border-radius redondea las esquinas de dicho espacio con la forma de un arco de circunferencia de 10 píxeles de radio. Por último, al asignar el valor none a la propiedad text-decoration se evita que el texto del enlace quede subrayado. El resultado será un hipervínculo con la apariencia de un botón.
Si te ha resultado sencillo seguir estas breves explicaciones, puedes estar seguro de que el libro HTML y CSS como nunca antes se lo habían contado le dará las bases para desarrollar sus propias páginas web, tanto en lo que respecta a la estructura de la información haciendo uso de HTML como en el aspecto que quieras darle mediante CSS. Además, adquirirás los conocimientos imprescindibles para que una misma página se vea correctamente tanto en la pantalla de un ordenador, como en una Tablet o en un teléfono móvil. Incluso, aprenderás a utilizar un servicio de hosting web gratuito que te permitirá acceder a ellas desde cualquier dispositivo y en cualquier lugar. Todo ello, explicado mediante códigos de ejemplo que se analizan línea a línea.
