Volver al índice del curso

Lección 2: Conceptos básicos de HTML, XHTML y CSS

 

Objetivos:

En esta lección conocerás los conceptos básicos de HTML, XHTML y CSS. Juntos, estos tres sistemas de codificación conforman la estructura y el estilo visual de las páginas web.

 

Para empezar

Vamos a trabajar con algunos archivos de la carpeta HTML5_02lessons. Comprueba que has descargado y copiado la carpeta de prácticas de HTML5 en tu ordenador.

 

Lenguajes Web

En esta lección vamos a conocer los elementos básicos de dos lenguajes: HTML y CSS. Aunque tienen distinta sintaxis y reglas, dependen fuertemente uno del otro. Al finalizar esta lección podrás saber cómo crear paginas sencillas HTML, añadir imágenes, crear enlaces de una página a otra y modificar su aspecto en pantalla utilizando CSS.

Este tema es enormemente extenso y muchos de los principios básicos que se explican aquí te enseñarán a crear sitios web de calidad con los medios disponibles en este momento, al tiempo que te preparan para el futuro, al avanzar las nuevas funcionalidades de HTML5.

 

La estructura de la página web se basa en HTML

Los documentos HTML (iniciales de Hypertext Markup Language) utilizan la extensión .htm o .html. Esta extensión avisa al navegador web o a un dispositivo como un teléfono móvil, que en este archivo hay contenido HTML y dicho contenido se restituye en la ventana del navegador o la pantalla del dispositivo siguiendo las reglas del lenguaje HTML.

Las etiquetas se utilizan para definir el contenido de una página HTML. Estas etiquetas quedan enmarcadas dentro de los símbolos "menor que" (<) y "mayor que" (>) y se ponen al principio y al final de un objeto o texto utilizado en la página HTML. Aquí vemos un ejemplo de dos etiquetas de título con textos en ellas. Las etiquetas no se muestran en pantalla, pero todos los navegadores saben que el texto entre las etiquetas es un título de primer nivel:

<h1>Welcome to Worldwide Apparel's intranet</h1>

En este ejemplo, el <h1> es la etiqueta de apertura, y </h1> la etiqueta de cierre. A toda esta línea de código la denominamos "elemento". Más concretamente, nos referiríamos a ella como un "elemento de título de nivel 1" o también "elemento heading 1" si preferimos utilizar el nombre en inglés original.

HTML y XHTML están estrechamente relacionados. Existe una lista de reglas definidas por el World Wide Web Consortium (organismo de normalización que también se conoce como W3C) que especifican los límites de HTML y XHTML.

 

 

Cómo se representa el código HTML en el navegador

 

 

Para entender mejor la relación entre el código HTML y lo que vemos en el navegador al abrir el archivo, en este ejemplo se muestra la conexión entre ambos:

 

A. Doctype. Esta línea indica al navegador que debe interpretar todo el código que sigue de acuerdo con un conjunto de reglas específico.

B. Elemento HTML. Este elemento contiene a los demás y le indica al navegador que contiene un documento HTML.

C. Elemento HEAD. En esta sección aparece información sobre la página, pero no se muestra en la pantalla.

D. Elemento TITLE. Cualquier contenido dentro de las etiquetas "title" se muestra en la parte superior del navegador. Es lo que se utiliza cuando un usuario marca una página como "favorito" en el navegador.

E. Elemento BODY. Todo el contenido dentro del body se muestra en la ventana principal del navegador.

F. Elemento HEADING 1. El primero de seis elementos de cabecera. El contenido dentro de un heading de nivel 1 se muestra en tipografías grandes y en negrita.

G. Elemento IMAGE: enlaza a un archivo de imagen y la muestra en pantalla.

H. Elemento PARAGRAPH: por defecto, el navegador añade un salto antes y después de este elemento, que suele contener varias líneas de texto.

I. Elemento STRONG: el texto dentro de él se muestra en negrita.

J. Elemento ORDERED LIST: abre una lista de elementos en forma de líneas numeradas por orden.

K. Elemento LIST: cada línea con esta etiqueta recibe automáticamente un número ordinal empezando por el 1.

 

Detalles de la sintaxis de XHTML

Hay una diferencia esencial entre HTML 4.0 y XHTML 1.0 – los dos estándares más recientes publicados por el W3C (World Wide Web Consortium). Tal y como está definido el XHTML, las páginas escritas en XHTML se pueden ver también en los navegadores que muestran las páginas HTML actuales. Las etiquetas y atributos de XHTML y HTML siguen siendo las mismas, pero la sintaxis del código XHTML es más estricta.

Las diferencias más importantes entre XHTML y HTML son estas:

• En XHTML, todas las etiquetas deben escribirse en minúsculas.
• XHTML exige que todas las etiquetas de apertura lleven su correspondiente etiqueta de cierre, es decir, siempre debe existir una etiqueta al principio y otra al final de cualquier elemento, sea un título, párrafo, imagen u otro.

Todas las etiquetas XHTML deben tener cierre, aun en el caso de etiquetas especiales que técnicamente no necesitan etiquetas de apertura y cierre. Por ejemplo, la etiqueta <br>, que inserta un salto de línea, utiliza una sintaxis especial de autocierre. Una etiqueta que se cierra ella misma tiene este aspecto (con un espacio y la barra inclinada antes del signo ">": <br />

• XHTML exige que el anidamiento de etiquetas (su inclusión unas dentro de otras), siga unas reglas estrictas. En el ejemplo siguiente, la etiqueta <em>, que se utiliza para enfatizar un texto, se abre dentro de la etiqueta de título <h1>. Por tanto, tiene que cerrarse antes de que se cierre el elemento <h1>:

<h1> Esta es la intranet de <em>Worldwide Apparel</em>. Bienvenido</h1>

En este libro hemos utilizado código ajustado a XHTML al hacer los ejemplos, lo que ayuda a que nuestros diseños sean compatibles con los navegadores y dispositivos móviles actuales, y también porque así es más fácil la resolución de errores cuando aparecen.

Doctype indica al navegador qué debe esperar

Al inicio de toda página web debe aparecer una declaración Doctype. La declaración de "tipo de documento" le aporta pistas al navegador sobre el tipo de información que se va a encontrar en la página. Puesto que las especificaciones de HTML y XHTML son distintas, el navegador sabe así qué lenguaje va a interpretar y representar. El navegador restituye la página empezando por la primera línea y va avanzando de principio a fin, por lo que esta indicación en la primera línea de todas tiene pleno sentido. Aunque no es obligatoria, es una buena práctica empezar siempre utilizando doctype al principio de nuestras páginas. La declaración doctype en HTML 4.01 tiene este aspecto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Cuando un navegador lee una declaración Doctype, espera que todo en la página sea conforme con el lenguaje indicado. Si la página es totalmente conforme con las especificaciones, se considera válida. En la Lección 3 veremos qué cambios incorpora HTML5 en los requisitos de Doctype.

El W3C y la validación de la página

W3C es la abreviatura con la que se conoce al World Wide Web Consortium una organización sin ánimo de lucro cuyo objetivo consiste en orientar la evolución de la Web. El W3C ofrece directrices y reglas para especificaciones como HTML y XHTML. Una forma de definir la validez del código HTML o XHTML que generamos es utilizar el servicio online de validación del W3C, que es gratuito.

Para este ejercicio es necesario tener acceso a Internet. Si no dispones de acceso a Internet puedes seguir leyendo este apartado y conocer la teoría del proceso de validación.

 

1 Abre el navegador y ve a la página http://validator.w3.org. 2 Pulsa en la pestaña "Validate by File Upload".   El validador del W3C permite analizar el código HTML para verificar su conformidad o posibles errores. 3 Pulsa en Browse y ve a la carpeta HTML5_02lessons. Selecciona el archivo w3_noncompliant.html y pulsa Abrir. Pulsa en el botón Check para validar el código. 4 El sitio del W3C nos devuelve una serie de errores. Si te desplazas por la página hacia abajo puedes ver información detallada sobre los errores encontrados. No te preocupes por eso ahora. A continuación vamos a cargar un archivo casi idéntico, pero sin errores. 5 Pulsa en el botón Browse, ve de nuevo a la carpeta HTML5_02lessons, selecciona el archivo w3_compliant.html y pulsa Abrir. 6 Pulsa el botón Revalidate. Ahora verás un mensaje de felicitación que dice que la página ha sido revisada y es conforme con las reglas de XHTML 1.0 Strict. Aunque la página es válida, puede que no se vea muy atractiva en un navegador. Este ejemplo utiliza una página en la que no se aplican estilos y no lleva imágenes, para ilustrar mejor el proceso. Conviene saber que tener un código conforme es solo un paso dentro de una serie que nos garantizará que nuestras páginas web se van a ver en el mayor número posible de ordenadores y dispositivos. Puedes validar también páginas web que ya se ven en Internet. Para ello puedes utilizar la opción "Validate by URL". También puedes pegar código HTML directamente dentro del validador eligiendo la opción "Validate by Direct Input". 7 En tu navegador, selecciona "Archivo – Abrir" y muévete hacia la carpeta HTML5_02lessons. Selecciona el mismo documento w3_compliant.html que acabamos de validar, pulsa Abrir y después en Aceptar. Si utilizas Internet Explorer 9, puedes también abrir la carpeta HTML5_02lessons desde el sistema operativo y arrastrar el documento w3_compliant.html y soltarlo dentro de la ventana del navegador.     Una página "válida" puede tener enlaces a imágenes que no existen y ofrecer un diseño mediocre. Ya que sabemos que esta página utiliza un XHTML válido, sabemos también que si tenemos problemas al representarla en pantalla, no se deben al código XHTML. Sabemos que no faltan etiquetas y que todas ellas están bien escritas. El proceso seguido puede ser útil para resolver errores, ya que nos facilita la detección de cualquier problema de sintaxis. 8 Abre otra vez en tu navegador Ia página http://validator.w3.org y pulsa en la pestaña "Validate by File Upload". Aunque veremos las diferencias entre las páginas HTML5 y las escritas con HTML 4.01 y XHTML en la siguiente lección, podemos ver no obstante los resultados de una página si se valida como HTML5. 9 Pulsa el botón Browse, ve a la carpeta HTML5_02lessons de tu ordenador y selecciona el archivo html5_compliant.html. Pulsa Abrir y después el botón Check. Aparecerá un resultado positivo: el documento es conforme con HTML5.

 

 

 

Otras ventajas del diseño basado en estándares

 

La validación de páginas del W3C es el aspecto más tangible de un diseño web conforme a estándares, pero hay también otras ventajas importantes al crear páginas bien estructuradas:

Menos código: el uso de HTML y CSS nos permite crear páginas similares con menos líneas de código, es decir, menos trabajo para el desarrollador y tiempos de descarga menores para el visor.

Mantenimiento más sencillo: tener menos código supone un mantenimiento más sencillo, y esto beneficia tanto al que escribe el código como a cualquier otra persona que después deba encargarse de su mantenimiento y revisión.

Accesibilidad: los documentos creados de forma semántica, es decir, que utilizan la etiqueta HTML más adecuada a su función en cada momento, pueden facilitar la lectura y navegación a personas con discapacidad visual y los usuarios que los visitan encuentran la información más fácilmente.

Optimización para motores de búsqueda: Las páginas web que incluyen secciones claras e identificadas de forma lógica, tanto a nivel de código como de contenidos, facilitan la labor a los motores de búsqueda a la hora de indexarlas y clasificarlas puesto que con un contenido organizado y bien identificado resulta más fácil evaluar el contexto temático y la relevancia de la información que ofrecen.

Compatibilidad: los sitios web que independizan la estructura con respecto al estilo se adaptan mucho más fácilmente a dispositivos móviles y formatos de pantalla variados. CSS nos permite aplicar hojas de estilo alternativas que optimizan la presentación en pantalla dependiendo del dispositivo utilizado.

 

Estructura HTML

Uno de los conceptos más importantes que debemos dominar a la hora de diseñar contenidos web es la estructura anidada de los documentos HTML. Los elementos suelen presentarse contenidos unos dentro de otros. Por lo general tenemos que empezar por diseñar la estructura HTML de la página para después continuar con los estilos, aplicando CSS.

En este ejemplo podemos ver los elementos más básicos que nos vamos a encontrar en prácticamente toda página web:

<html> 
     <body> 
     </body> 
</html>

El elemento <body> está anidado (incluido) dentro del elemento <html>. En términos de programación, <body> está colocado entre la etiqueta de apertura <html> y la de cierre </html>, y por eso decimos que las etiquetas anidadas son las que se encuentran entre otras etiquetas de apertura y cierre. Ambos elementos, <body> y <html>, forman la estructura básica de toda página web. Cuando un navegador abre un documento HTML busca esta estructura.

El contenido dentro de la etiqueta body es la parte visible de la página, ya que es lo que se muestra en la ventana del navegador.

<html>
     <body>

 Aquí están los recursos internos y el centro de información de los empleados de Worldwide Apparel

      </body>
</html>

En los documentos HTML parte del contenido se muestra en pantalla dentro de la ventana del navegador, pero hay otra parte del código que queda oculta, aunque es de gran utilidad para el navegador, para los motores de búsqueda y para el desarrollador. Algunos ejemplos de este código oculto son los scripts que sirven para añadir interactividad a la página, o también el código que ayuda a los buscadores a clasificar el documento, y los estilos que definen el aspecto de la página. Este código suele aparecer dentro del elemento <head>, el cual a su vez, está anidado dentro de las etiquetas <html>.

Un ejemplo:

<html>
     <head>
     </head>
     <body>

 Aquí están los recursos internos y el centro de información de los empleados de Worldwide Apparel

      </body>
</html>

En este ejemplo, todavía no tenemos nada dentro del elemento <head>. Puedes ver que está anidado dentro del elemento <html>, pero no dentro del elemento <body>. El elemento <head> se abre y se cierra antes de que empiece el elemento <body>. Por su parte, el elemento <body> contiene texto, pero le falta un contexto y por ello los buscadores no podrán determinar si se trata de un título, una lista, un párrafo, un comentario o un contenido de cualquier otra naturaleza. Para definir el texto como párrafo, se utiliza la etiqueta <p>:

        <html>
             <head>
                  </head>
             <body>
                 <p> The internal resource and information center for all employees of Worldwide Apparel </p>
             </body>
        </html>

El elemento paragraph ahora queda anidado dentro del elemento <body> que, a su vez, está anidado dentro del elemento <html>. Ahora vamos practicar con un archivo html.

 

1 Abre un editor de textos (p.ej. Notepad) y selecciona Archivo – Abrir. Ve a la carpeta HTML5_02lessons. Dependiendo del editor de textos que utilices, puede que tengas que seleccionar "Todos los archivos" en vez de "Documentos de Texto" para poder ver el archivo. Selecciona el archivo 02_index.html y pulsa Abrir. 2Selecciona Archivo – Guardar como, ponle el nombre 02_index_work.html y pulsa Guardar. Así hemos creado una copia con la que podremos trabajar manteniendo el archivo original como copia de seguridad. Para entender mejor la estructura del HTML y el anidamiento de etiquetas, vamos a añadir un enlace a este documento, asociando las palabras Worldwide Apparel a una página web de Internet. 3 En el último párrafo, donde dice "Todo el contenido de este sitio web es copyright de Worldwide Apparel," pulsa una vez antes de la palabra "Worldwide" y luego escribe el código siguiente: . Esta etiqueta es la etiqueta de apertura de un elemento "anchor" (un enlace) que nos sirve para vincular el texto a otra página web en nuestro propio sitio web o a cualquier dirección de Internet. 4 Pulsa a la derecha de la palabra "Apparel" y escribe . Esta es la etiqueta de cierre del enlace, y es obligatoria en XHTML. Algunos editores web, como el editor gratuitoVisual Web Developer Express de Microsoft, se encargan de añadir automáticamente las etiquetas de cierre. Puedes desactivar la función de "Autocompletar". En cada editor es diferente, pero en Visual Web Developer Express 2010 podemos cambiar esta configuración por defecto desde el menú Herramientas < Opciones > Formato y después desmarcar la casilla "Insertar automáticamente etiquetas de cierre". Para finalizar el proceso de creación de un vínculo, necesitamos indicar la dirección web a donde debe remitir, lo que se hace con el atributo href. 5 En la etiqueta “<a>” de apertura, sitúa el cursor entre la letra <a y el signo de cierre (>). Pulsa la barra espaciadora una vez y después href="". El código completo de la etiqueta debería quedar ahora como <a href="">. Ahora tenemos una etiqueta anchor y el atributo href, pero este enlace no dirige a ninguna parte. Tenemos que añadir ahora un valor al atributo href, que en este caso será una dirección de Internet (URL). 6 Dentro de las comillas escribe la dirección siguiente: http://www.digitalclassroombooks.com/worldwideapparel. 7 En el menú Archivo selecciona Guardar y tras grabar el archivo, muéstralo en el navegador web, bien abriéndolo desde el propio navegador (Archivo – Abrir) o bien pulsando Ctrl + click (el botón del ratón en Mac OS) o Ctrl + botón derecho en Windows, seleccionando después el archivo desde el propio sistema operativo. El enlace aparece subrayado y con el color azul normal, indicativo de que se trata de una dirección Web que aún no hemos visitado.   Un enlace sencillo, creado con la etiqueta y el atributo href. 8 Cierra el navegador y vuelve al editor de texto.

 

Insertar imágenes en HTML

Para colocar imágenes dentro de un documento HTML se utiliza la etiqueta <img>. Al igual que ocurre con la etiqueta <a>, la etiqueta de imagen por sí sola no hace nada. Depende del valor de los atributos que especifiquemos, que indican qué imagen se debe mostrar y cómo ha de hacerse. Aquí vamos a insertar una imagen en nuestro documento HTML.

 

1 Mueve el cursor hacia el primer párrafo y sitúalo inmediatamente después de la etiqueta de cierre </p>. Pulsa Intro para pasar a la línea siguiente. Escribe <img />. La etiqueta de imagen es una categoría especial dentro de las etiquetas HTML, de las que admiten el autocierre. No necesitamos escribir por separado etiqueta de apertura y cierre: con una sola es suficiente, pero es importante que la escribamos bien. Hay un espacio de separación entre la palabra img y la barra /. Así se cumplen los requisitos de sintaxis de XHTML y el archivo de imagen que vamos a utilizar se indicará en el espacio que queda entre img y /. 2 Mueve el ratón a la derecha de la palabra img, inserta un espacio en blanco y escribe src="". src es la abreviatura del atributo source (origen), y tenemos que indicar un valor para él, que es la dirección URL de la imagen que queremos mostrar dentro de la página. 3 En el interior de las comillas de src= escribe images/familysitting.jpg. El código quedaría así: <img src="images/familysitting.jpg" /> Esta línea le indica al navegador que busque dentro de la carpeta images y presente en pantalla el archivo familysitting.jpg. En los pasos siguientes debemos asegurarnos de que se mantiene el espacio en blanco de separación entre la comilla y el cierre de la etiqueta. Ahora vamos a añadir un atributo alt. El atributo alt representa el texto alternativo a la imagen, y es obligatorio añadirlo para mantener la validez de la página. Este atributo es muy útil para las personas que utilizan sistemas de lectura de pantalla para navegar por la Web, ya que permite convertir a voz el texto indicado como valor. También sirve para dar un contenido al espacio vacío que se genera cuando, por cualquier razón, la imagen no se puede representar (porque el enlace está roto o el archivo tiene un formato incorrecto, por ejemplo). 4 Sitúa el cursor a la derecha de la comilla de cierre que sigue al nombre de archivo familysitting.jpg e inserta un espacio en blanco, y después escribe alt="". 5 Dentro de las comillas del paso anterior, escribe Familia sentada en unos escalones. 6 En el menú Archivo, selecciona Guardar y después abre el archivo en el navegador.     Las imágenes se añaden a las páginas web con el elemento src y una referencia al archivo gráfico. Tanto el atributo src como el alt son obligatorios bajo XHTML. Hay también otros atributos, opcionales, que podemos utilizar. Vamos a ver dos de ellos: height y width. 7 Regresa al editor de textos y pon el cursor a la derecha de las últimas comillas que siguen al atributo alt, inserta un espacio y escribe lo siguiente: width="296" height="250". Estos dos atributos indican al navegador las dimensiones que tendrá esta imagen en pantalla (ancho y alto respectivamente). Estos atributos le indican al navegador las dimensiones que tendrá la imagen en pantalla (que no necesariamente tienen que coincidir con las dimensiones originales), y aunque estos valores son opcionales, ayudan a restituir la página de manera más eficiente y siempre que sea posible, debemos utilizarlos.

 

El empleo de atributos opcionales

 

Muchos de los atributos opcionales se encuadran dentro de lo que se denomina "buenas prácticas". Las buenas prácticas son un concepto amplio, que se utiliza para describir la manera generalmente aceptada de hacer las cosas en el diseño y programación para la Web. Hay, en general, razones de sentido común detrás de las buenas prácticas: por ejemplo, al indicar la altura y la anchura se crea un espacio (conocido como "placeholder") para la imagen, y permanece aún en el caso de que la imagen no se haya descargado, debido a la lentitud de la conexión. Si no se crea este placeholder con una anchura y altura prefijadas, el aspecto y distribución de los elementos en pantalla va cambiando a medida que se cargan las imágenes, lo que en ciertos casos impide al usuario poder leer los contenidos durante ese proceso.

 

8 En el menú Archivo, selecciona Guardar y visualiza la página en el navegador para ver la imagen. Mantén abierto el documento mientras trabajas con él en el siguiente ejercicio.

 

El papel de CSS

CSS (Cascading Style Sheets) utiliza un lenguaje distinto de HTML. CSS nos permite aplicar estilos de manera coherente a los distintos elementos de las páginas del sitio web, de modo que los títulos, listas y párrafos pueden verse igual en todas y cada una de las páginas.

 

 

Cómo hacemos referencia a la sintaxis de CSS en este libro

 

Antes de que empecemos a trabajar con CSS es preciso aclarar cómo vamos a denominar a las distintas partes de la sintaxis de CSS en este libro. No es cosa fácil dicho así, porque ocurre que hay diferencias entre la especificación oficial del lenguaje CSS y la forma en que los diseñadores se refieren a CSS en el mundo real. En cualquier caso, los conceptos básicos son estos: el siguiente código es lo que conocemos como una regla de CSS:

Los componentes de esta regla son:
A. Selector. B. Declaración. C. Propiedad. D.Valor.

De vez en cuando iremos mencionando los distintos componentes en el libro, así que si te pedimos que cambies el valor "blue" por "red", debes tener claro lo que hay que hacer. O, si te pedimos que busques y cambies el selector h1 por un selector h2, que ello tenga sentido para ti.

En el día a día la mayor parte de los diseñadores no son tan concretos. Por ejemplo, podrían referirse a la regla anterior como "estilo", "regla de estilo", "la regla h1", o "la regla CSS para h1". Además, como puedes ver, el nombre oficial para el par propiedad-valor, se denomina "declaración". De nuevo, en el mundo real los diseñadores no suelen utilizar el término "declaración", sino que a menudo utilizan el término "propiedad" o "propiedades" de forma indistinta.

 

Definir un estilo para los títulos

Para hacernos una idea de cómo funciona CSS vamos a crear una regla CSS sencilla que cambia el estilo de un título en la página. En el archivo 02_index_work.html ya tenemos el texto "Welcome to Worldwide Apparel's intranet" dentro de una etiqueta <h1>. Puede que una de las mejores maneras de entender la acción de CSS sea ver cómo se aplica el estilo por defecto para este título al escribirlo en pantalla.

 

1 Dentro del navegador, analiza el texto de título. El estilo y las instrucciones de formato las aportan las "reglas" que el propio navegador aplica por diseño a los elementos <h1> a la hora de presentarlos en pantalla. El tamaño, color y tipo de letra los resuelve el navegador ya que no dispone de otras instrucciones de formato. El navegador solo sabe que hay un elemento "heading 1" y lo muestra de la forma en que considera adecuado. Por ejemplo, el tamaño por defecto es 16 pixels, el color es el negro y la fuente, Times New Roman. Esto es lo que nos encontramos, por ejemplo, en Internet Explorer, Firefox y algunos otros navegadores. Ahora podemos modificar esta apariencia con una regla de CSS. 2 En la parte superior de la página busca la etiqueta <title>, y justo debajo de ella, añade una línea nueva, con el siguiente texto: <style type="text/css"> 3 Pulsa Intro tres veces y después escribe </style>. En este momento tenemos un elemento de estilo sin contenido alguno, pero nos servirá para insertar ahí una regla con la que vamos a modificar el estilo del elemento <h1>. El elemento <style> queda dentro de las etiquetas delimitadoras de la cabecera <head> de la página. En HTML todo lo que queda dentro de la sección <head> no se muestra en pantalla. Por ejemplo, también tenemos un elemento <title> en esta sección. Este título aparece en la parte superior de la ventana del navegador, pero no dentro de la página propiamente. 4 En la línea vacía que hay debajo de la etiqueta de apertura <style>, escribe esto: h1 { Este es el selector, el que nos dice a qué elemento de HTML queremos aplicar el estilo, y en este caso es el elemento heading 1. 5 Pulsa Intro y después el tabulador para poner el cursor debajo del signo de la llave en el editor, si es que el propio editor no te posiciona automáticamente en ese lugar. La tabulación es opcional, pero hace que el código CSS se lea mejor. Como veremos ahora, el número de líneas en esta regla va a aumentar y es muy conveniente que el código con facilidad. 6 Escribe este código debajo de h1 {: color: red; La palabra color se denomina como una propiedad en la sintaxis CSS y la palabra red es el valor que le aplicamos a esa propiedad. Al par compuesto por una propiedad y un valor se le denomina declaración. 7 Pulsa Intro otra vez y en la línea siguiente escribe el signo } el signo de llave que cierra al signo { que hemos escrito en el paso 4. Ahora tenemos una regla con estas tres líneas: h1 { color:red; } 8 Guarda el archivo en disco y visualiza la página en el navegador. La cabecera aparece ahora en color rojo y eso nos indica que hemos escrito bien la regla CSS. Cierra el navegador y vuelve al editor.     El título dentro de la etiqueta H1 tiene un nuevo color, por aplicación de una regla CSS. 9 En el archivo HTML, selecciona la palabra red y cámbiala por este otro código, que representa un color de la gama de colores que pueden mostrarse en pantalla: #FF0000. Este valor es el mismo color rojo, pero en notación hexadecimal. En CSS puedes utilizar colores por su nombre en inglés o mediante esta notación. Guarda el archivo y muéstralo de nuevo en el navegador. El color sigue siendo el mismo rojo. La notación hexadecimal es el método más habitual para indicar colores en la Web.

 

 

 

Notación hexadecimal de color

 

El color, tanto en HTML como CSS, se designa mediante un código de seis caracteres precedido por el signo de almohadilla. A esta notación se le llama código hexadecimal, y es el sistema que se utiliza para identificar y establecer el color de los elementos. Con esta notación podemos reproducir prácticamente cualquier color. Por ejemplo, el color rojo oscuro se representa como #CC0000.

El código se divide en tres pares de dígitos, y cada uno de ellos representa el valor RGB del espectro. Por ejemplo, el color blanco se representa en notación RBG como R:255 G:255 B:255, y su equivalente en HTML en formato hexadecimal es #FFFFFF (siendo FF el equivalente hexadecimal del número 255 decimal, que se repite para los tres pares). Un programa de edición de imágenes como Photoshop nos permite elegir un color concreto de una paleta y obtener directamente su equivalente RGB, tanto decimal como hexadecimal, para insertarlo en una regla CSS.

Hay también una serie de sitios web donde podemos conocer las equivalencias entre los colores y sus códigos, como por ejemplo: www.w3schools.com/Html/html\_colorvalues.asp

 

La regla que acabamos de crear emplea lo que se conoce como "selector de tipo", puesto que se aplica a todas las apariciones del elemento tipo h1 en el documento. Los selectores de tipo asignan propiedades CSS a cualquier etiqueta HTML del documento. En este caso, a la etiqueta <h1>. Todas las apariciones de <h1> se mostrarán en pantalla con el texto en rojo. Los selectores de tipo también se les suele denominar "selectores de etiqueta". No es frecuente que oigas a nadie utilizar la expresión "selector de tipo", pero es el nombre oficial que tiene, por eso lo llamamos así en este capítulo.

Ahora vamos a ver otra categoría de estilos CSS que se conocen como clases. También vamos a empezar a trabajar con el elemento <span> de HTML, que nos permite separar y controlar partes de un contenido, como por ejemplo una frase dentro de un párrafo, o una palabra concreta dentro de una frase.

 

Los estilos de clase y el elemento <span>

Los selectores de etiqueta se utilizan con mucha frecuencia, pero solo se pueden aplicar a elementos HTML. Cuando lo que queremos es modificar el estilo de alguna cosa que no coincide exactamente con una etiqueta, por ejemplo cambiar el color de una única palabra dentro de un párrafo, el selector de etiqueta no es una buena opción (e incluso en algunas ocasiones resulta imposible de aplicar). En este caso podemos utilizar el selector de clase, que es una regla CSS que se puede aplicar a cualquier elemento dentro de una página. Los selectores de clase tienen unas opciones de nomenclatura flexibles, pero es muy conveniente utilizar nombres que describan adecuadamente lo que hacen. Por ejemplo, podemos crear selectores de clase como .caption, .imageborder, o .redtext. En este ejercicio vamos a crear un estilo de clase que aplica color rojo a las palabras Worldwide Apparel en un párrafo.

 

1 Sitúa el cursor en la línea justo debajo de la llave de cierre de la regla h1 y escribe esto: .red { color:red; } Fíjate en el punto al principio del selector de clase. El texto que sigue al punto es el nombre de la clase. Puedes utilizar cualquier nombre, pero el punto al principio del mismo es obligatorio, para poder identificarlo como una clase. La declaración color:red es la misma que en la práctica anterior, pero en este caso el selector no es el elemento h1. Ahora aplicaremos esta clase a las palabras Worldwide Apparel para que se vean en color rojo. Para ello tenemos que insertar una etiqueta <span>. 2 En el primer párrafo <p> dentro de la etiqueta <body>, sitúa el cursor justo delante de las palabras Worldwide Apparel, pulsa y escribe: <span> 3 A la derecha de Apparel añade la siguiente etiqueta de cierre </span>. El código debe quedar así: <p>... employees of <span> Worldwide Apparel</span> </p> Guarda el archivo. Si visualizas ahora la página en el navegador verás que no hay ningún cambio. La etiqueta <span> en nuestro HTML está vacía, no hace nada y tenemos que asociarla a un estilo. En este caso, la etiqueta <span> delimita el contenido dentro del párrafo al cual se aplicará un estilo, pero por sí misma no aplica ningún estilo ni tampoco lo define. 4 Ve a la etiqueta de apertura <span>. Entre la letra "n" de "span" y símbolo ">", inserta un espacio en blanco y escribe esto: class="red" Ahora la línea queda así: <p>... employees of <span class="red"> Worldwide Apparel</span> </p> 5 Busca el segundo párrafo donde aparece información de copyright y dentro de la etiqueta de apertura <p> escribe esto que destaco en color rojo: <p class="red"> All content on this site is the copyright of <a href="http://www.digitalclassroombooks.com/worldwideapparel"> Worldwide Apparel</a>.</p> 6 Guarda la página y visualízala en el navegador. Todo el texto del párrafo (excepto el vínculo) aparece ahora en rojo. Aquí es donde vemos la flexibilidad de las clases CSS: se pueden utilizar y reutilizar para aplicar estilos a distintas partes de la página. El vínculo no cambia de color porque se le aplica un estilo predefinido específico (el de la etiqueta <a>). En un ejercicio más adelante veremos cómo se cambia el estilo de un vínculo.     Los estilos de clase CSS se pueden aplicar a elementos de línea y de bloque, como ocurre en el último párrafo. 7 Cierra el navegador, pero mantén abierto el documento en el editor de texto porque seguiremos trabajando sobre él en el siguiente ejercicio.

 

Tres maneras de utilizar estilos

En la práctica anterior los estilos estaban situados dentro de la sección de cabecera (<head>) de la página. Esta modalidad recibe el nombre de hoja de estilos interna. Además de hojas de estilo internas, también existen las hojas de estilos externas y los estilos aplicados directamente ("inline").

Una hoja de estilo externa es un documento independiente con la extensión .css. Cuando utilizamos un archivo externo, los estilos se definen en él y en las páginas HTML tenemos que insertar un enlace a dicho archivo. Mientras que las hojas de estilo internas solo se aplican a la página donde residen, las hojas externas se pueden aplicar a múltiples documentos HTML.

Los estilos inline o directos son la tercera posibilidad pero se utilizan mucho menos que las otras dos. En este caso, las reglas se declaran dentro de las propias etiquetas HTML. Un ejemplo de estilo inline para escribir en rojo el texto del título puede ser:

<h1 style="color:red">Worldwide Apparel</h1>

Los estilos directos son herramientas potentes porque se superponen tanto a los estilos internos como a los externos, aunque solamente se aplican a una etiqueta cada vez. Por su propia naturaleza, resulta complicado reutilizarlos. En el ejemplo anterior podemos ver que el estilo para presentar el texto en rojo va dentro de la etiqueta <h1>. Si tuviéramos 50 elementos <h1> en nuestro sitio web y utilizásemos estilos inline, necesitaríamos añadir este código de estilo 50 veces, pero lo peor es que si quisiéramos cambiar el color a verde, tendríamos que buscar las 50 apariciones de este estilo y remplazar la palabra "red" por "green". Los estilos inline son útiles para aplicaciones puntuales o cuando no podemos utilizar una hoja de estilos interna o externa. Uno de estos casos puede ser un correo electrónico en formato HTML.

En las siguientes lecciones no vamos a utilizar mucho los estilos directos, en línea con la forma en que se diseñan actualmente los sitios web. La práctica más habitual consiste en combinar estilos internos y externos.

 

Cuándo utilizar hojas de estilo internas y externas

En las hojas de estilo internas, las reglas CSS quedan escritas directamente dentro del documento utilizando la etiqueta <style>. La hoja de estilos queda ubicada dentro de la sección <head> del documento.

En el caso de las hojas internas, las reglas CSS solo se aplican al documento en donde residen. Por ejemplo, si tenemos un sitio web con 20 páginas y decidimos utilizar hojas de estilo internas, deberemos crear una hoja de estilos dentro de cada una de esas 20 páginas. Un cambio en cualquier regla exigiría modificar todas y cada una de las hojas de estilo internas en dichas páginas para mantener la consistencia.

En las hojas externas las reglas CSS, como ya explicábamos anteriormente, se guardan en archivos independientes. Podemos asociar un mismo archivo .css a cualquier página HTML, y con ello nos ahorraremos mucho trabajo y ganamos en flexibilidad. Si definimos una regla para el elemento <p> en una hoja de estilo externa, todos los párrafos del sitio web quedan modificados de inmediato. En la práctica siguiente vamos a crear una hoja de estilo externa la asociaremos a una página HTML nueva.

 

Creación de una hoja de estilos externa

Una página HTML no tiene por qué limitarse a utilizar solamente una hoja de estilos externa, y en muchos sitios web de grandes dimensiones, las definiciones de estilos suelen repartirse entre varios archivos, para facilitar su organización y mantenimiento. Podemos incluso utilizar hojas de estilos para funciones concretas, como imprimir una página o visualizar el contenido en dispositivos móviles. Se pueden diseñar hojas de estilo también para que nuestros sitios web sean compatibles con navegadores antiguos.

En este ejercicio vamos a crear una hoja de estilos externa, traspasaremos las reglas desde el documento HTML a la hoja externa y después asociaremos la hoja de estilos a una página HTML nueva

 

1 Desde el menú Archivo – Nuevo, selecciona la Plantilla de Estilos CSS y ábrela si tu editor web ofrece esta opción. Puede que tu editor de textos tenga un menú de opciones distinto, y debas seleccionar un comando equivalente. Por ejemplo, muchos editores tienen la opción Archivo – Nuevo documento CSS.. 2 Desde el menú Archivo, selecciona "Guardar como" y ponle al archivo el nombre styles.css, y lo guardas dentro de la carpeta HTML5_02lessons folder. Una hoja de estilos CSS lleva la extensión .css, pero en realidad se trata de un archivo de texto plano. 3 Pasa ahora al documento HTML que hemos utilizado en el último ejercicio (02_index_work.html), pero mantén abierta también la hoja de estilos. 4 En el documento HTML busca las reglas que has escrito dentro de las etiquetas <style> y selecciónalas con el ratón. No selecciones las etiquetas <style> y </style>, solo las reglas, a partir de h1 y hasta encontrar el último signo de llaves de cierre (}).     Selecciona solo las reglas de estilo, no las etiquetas <style>. 5 En el menú Edición selecciona Cortar y pasa ahora al archivo styles.css. Si en este archivo aparece algún código, tendrás que sobrescribirlo seleccionándolo y después pegando (desde el menú Edición – Pegar) las reglas que acabas de seleccionar. Guarda el archivo en el disco. La hoja de estilos externa funciona como sustituta de las etiquetas <style> del documento HTML. Ahora que hemos pasado las reglas a este nuevo documento, necesitamos insertar un vínculo a él en la página HTML para que el navegador sepa dónde están las reglas de estilo que debe aplicarle. 6 En el editor, vuelve al archivo 02_index_work.html y guárdalo en disco. Ahora vamos a añadir la etiqueta <link> que apuntará a nuestro archivo styles.css. Este paso es fundamental porque si no vinculamos la hoja de estilos externa, la página HTML se mostrará sin aplicar esos estilos. 7 Pon el cursor detrás de la etiqueta de cierre </ style> y pulsa Intro para empezar a escribir en la línea siguiente. Escribe esto: <link rel="stylesheet" type="text/css" href="styles.css" /> En esta línea estás añadiendo los atributos rel, type y href. Probablemente recordaras que el atributo href ya lo habíamos utilizado al insertar el vínculo en uno de los ejercicios anteriores. Para que funcione correctamente nuestra hoja de estilos externa, debemos escribir de forma precisa tanto el nombre como el path del archivo. 8 Selecciona Archivo – Guardar y visualiza la página HTML en el navegador. La página debe verse igual que antes, ya que estamos utilizando los mismos estilos. Simplemente ocurre que se aplican desde fuera del documento. 9 Cierra el navegador y vuelve al editor de texto. Vamos a crear un nuevo documento HTML y le añadiremos el mismo enlace al archive CSS externo, para ver cómo se aplican las reglas. 10 Desde el menú Archivo, abre el archive test.html que está en la carpeta HTML5_02lessons. Es un documento que no contiene nada. 11Sin salir del editor, vuelve al archivo 02_index_work.html y selecciona todo el elemento <link> que has escrito en el paso 7: <link rel="stylesheet" type="text/css" href="styles.css" /> En el menú Edición, selecciona Copiar. 12Vuelve al documento test.html, pulsa debajo del elemento <title> y pega (Edición- Pegar) para que añadir la línea anterior. Guarda el archivo.

 

Ahora, la hoja de estilo externa también está asociada a este documento HTML. Las etiquetas HTML que añadamos a este nuevo documento quedarán modificadas si existe alguna regla para ellas en el archivo CSS. Por ejemplo, vamos a añadir ahora un elemento heading 1 y su texto cambiará de forma automática a color rojo.

Pulsa dentro del elemento <body> y escribe:

<h1> Worldwide Apparel benefits page </h1>

Guarda el archivo y visualízalo en el navegador.

 

 

La etiqueta <h1> obtiene su estilo de una hoja de estilos CSS externa que hemos creado.

El título se escribe en rojo porque la regla de estilo para el elemento <h1> es color:#FF0000 y dicha regla está dentro de una hoja externa asociada a dos páginas: 02_index_work.html y test.html. Esto nos permite controlar el estilo de ambos documentos HTML desde un único sitio.

 

En qué consisten los estilos en cascada

Hemos visto que hay tres sitios donde podemos indicar reglas CSS: dentro de la propia etiqueta (inline), internamente y en archivos externos asociados. Si surgiera algún conflicto en la definición de estilos entre las declaraciones inline, interna y/o externa, el estilo directo (inline) será el que prevalezca porque es el que más cerca se sitúa del código HTML. La hoja de estilo interna tiene precedencia sobre cualquier otra externa, y las definiciones utilizadas en hojas de estilo externas se utilizan solo si no entran en conflicto con las declaraciones internas o directas.

 

Uso de textos y tipos de letra en la web

A la hora de diseñar para la web, podemos formatear el texto de una forma parecida a como se hace en las aplicaciones de procesamiento de textos y diseño publicitario de los equipos de escritorio, pero debemos tener en cuenta algunas diferencias importantes. Cuando especificamos el uso de una fuente (tipo de letra) concreta, esta fuente ha de estar instalada en el ordenador o el dispositivo del usuario donde se va a restituir la página. Si el ordenador o dispositivo no dispone de esa fuente, el navegador la sustituye por otra.

Puesto que es imposible saber qué fuentes están instaladas en los ordenadores de los usuarios, y debido a la capacidad que tienen los navegadores para sustituir unos tipos de letra por otros, es posible que los resultados obtenidos en ciertos equipos no se correspondan con el diseño que hemos previsto. Una opción puede ser utilizar fuentes que sabemos que podemos encontrar en la mayoría de los ordenadores. Lo malo es que son muy pocas estas fuentes de las cuales podemos tener la certeza de que se encuentran en prácticamente todos los ordenadores del mundo.

 

 

Tipos de letra de uso común en la web

 

Estas son las Fuentes que podemos utilizar con más confianza en la Web:

• Arial
• Verdana
• Georgia
• Times New Roman
• Courier
• Trebuchet
• Lucida
• Tahoma
• Impact

La lista es pequeña porque tiene en cuenta las plataformas Mac y Windows y suponemos además que aún acceden a la web muchos ordenadores antiguos. Estos equipos más antiguos tienen una lista de fuentes preinstaladas más reducida que los actuales, por lo que un diseñador tiene que tener esto en cuenta a la hora de seleccionar el tipo de letra que usará en sus páginas.

Por otra parte, esta lista es pequeña también por razones de tipo estético. Por ejemplo, las fuentes Courier e Impact se usan poco porque, aunque estén disponibles de forma general, su apariencia es muy peculiar y limita mucho su uso de forma habitual.

 

Una de las soluciones que nos puede ayudar a resolver la falta de tipos de letra variados en la Web es el uso de una "pila" de fuentes, ("font stack" en inglés). En CSS, la pila de fuentes es una lista de varios tipos de letra que puede utilizar el navegador para mostrar texto en pantalla.

Aquí vemos un ejemplo de pila de fuentes CSS:

font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

En este ejemplo, el navegador primero busca la fuente Helvetica Neue en el sistema del usuario. Fíjate en las comillas del ejemplo. En la mayoría de casos, cuando se indica una fuente, las comillas no hacen falta pero si el nombre de la fuente consta de más de una palabra, son necesarias. Si el usuario no dispone de la Helvetica Neue, el navegador buscará una versión más genérica de la Helvética (segunda opción de la lista). Si tampoco la encuentra, utilizará Arial, que es un tipo de letra muy similar a la Helvética. Si por algún motivo tampoco estuviera presente la fuente Arial en el sistema, elegiría sans-serif, lo que permite al navegador emplear cualquier fuente sans-serif que encuentre. "Sans-serif" es una definición genérica para todos los tipos de letra que no llevan unos pequeños trazos (o "serifs") al final de cada letra. Ejemplos de fuentes "serif" son la Times New Roman y la Georgia.

 

Elección de font-family

En este ejercicio vamos a definir una lista de fuentes para toda la página y después declararemos una lista específica para los títulos.

 

1 En el editor de textos, vuelve al archivo 02_index_work.html si sigue abierto, o ábrelo si es preciso. Vamos a modificar el estilo del texto en esta página, pero dado que nuestros estilos están ahora declarados en una hoja de estilos externa, tendremos que realizar estas modificaciones en dicha hoja. 2 Volvamos a nuestro documento styles.css que hemos creado en el ejercicio anterior. Ahora mismo tenemos estilos para la etiqueta h1 y para una clase llamada ".red". Vamos a crear un estilo para el cuerpo de la página. 3 En la parte superior del documento, por encima de la regla del estilo h1, escribe:: body { font-family:"Trebuchet MS", Tahoma, Arial, sans-serif; } 4 Guarda el archivo (Menú Archivo – Guardar) y visualiza la página 02_index_work.html en el navegador. Como decíamos antes, el navegador muestra el tipo de letra Trebuchet si la tenemos instalada en el equipo; en caso contrario, lo intenta primero con Tahoma, luego con Arial y finalmente, con cualquier tipo de letra sans-serif.     Cuando se define la fuente Trebuchet en la declaración font-family para la regla de la etiqueta <body>, todo el texto de la página se muestra en ese tipo de letra. Ahora, todo el texto de la página se escribe con letra Trebuchet porque es el estilo que hemos declarado para el cuerpo. Recordemos que la etiqueta "body" de HTML engloba a todos los elementos visuales de la página. Ahora vamos a declarar una familia de fuentes específica para el elemento de párrafo ("<p>"). 5 Vuelve a la hoja de estilos en el editor y debajo justo de la regla para el "body", añade una nueva regla de estilo para la etiqueta <p> con este contenido: p { font-family:Georgia, "Times New Roman", Times, serif; } 6 Guarda de nuevo el documento y visualiza el archivo 02_index_work.html en el navegador. Ahora tenemos una regla explícita para los párrafos, por la cual el tipo de letra aplicable es la Georgia. Los rótulos de título siguen saliendo con letra Trebuchet, que es la que hemos definido para todo el cuerpo. Ten en cuenta que aunque podríamos haber elegido cualquier tipo de letra presente en el ordenador, Trebuchet y Georgia son buenas opciones de partida porque se encuentran en la mayoría de los ordenadores del mundo.

 

 

 

El prometedor futuro de las fuentes

 

La escasez de opciones a la hora de utilizar distintas fuentes en la web ha causado frustración entre los diseñadores Web durante muchos años. Este problema va aliviándose a medida que ciertas empresas han ido creando soluciones para que las páginas puedan verse en un navegador con los tipos de letra especificados por los creadores.
El panorama de las fuentes está cambiando, sin embargo, con la aparición de las llamadas "web fonts" y, en concreto, con la funcionalidad @font-face de CSS. Ahora es posible añadir una gran variedad de tipos de letra y tener la certeza de que nuestras páginas se podrán ver tal y como pretendemos.

Si quieres leer un análisis más detallado sobre este asunto e instrucciones paso a paso para integrar web fonts en tus páginas, lee la sección Aplicar estilos con CSS3 en la Lección 11 del libro "HTML5 Digital Classroom".

 

Cambiar el tamaño del texto con CSS

Cuando utilizamos CSS para formatear textos para la web, disponemos de algunas opciones para establecer su tamaño y su grosor. La propiedad CSS que controla el tamaño del texto se llama font-size.

Podemos modificar el valor de la propiedad font-size de varias formas:

• Tamaño absoluto: se trata de una serie de palabras clave que indican tamaños predefinidos de letra. Los tamaños nominados escalan de acuerdo con las preferencias del usuario con respecto a la letra. Los valores posibles xx-small, x-small, small, medium, large, x-large y xx-large.
• Longitud: Es un número seguido de un indicador del sistema de medida (cm, mm, in, pt, o pc) o bien un de unidades relativas (em, ex, o px).
• Porcentaje: Un entero seguido del signo de porcentaje (%). El valor es un tanto por ciento del tamaño de letra del objeto padre.
• Tamaño relativo: una serie de palabras clave que se interpretan como relativas al tamaño de letra del objeto padre. Los valores posibles son larger y smaller.

La elección de la unidad de medida para el tamaño de la letra en una página web es importante y no es tan fácil como parece. La principal dificultad en este sentido tiene que ver con la resolución de la pantalla y las distintas maneras en que, a lo largo del tiempo, los navegadores han resuelto la presentación de los textos.

El texto en monitores pequeños a menudo tiene un aspecto distinto de como aparecen en monitores de gran formato; con un poco de previsión podemos resolver este problema, imaginando el efecto en cada caso. Además del problema de la resolución de pantalla, tenemos que considerar también la forma en que cada navegador resuelve la restitución de los textos. Por ejemplo, nos navegadores permiten al usuario cambiar a mano el tamaño de la letra. Más aún: cada vez hay más gente que navega por la Web desde teléfonos y dispositivos móviles, lo que hace que la elección del tamaño de letra sea un asunto aún más crítico.

 

Las medidas en pixels y puntos no son la mejor opción para el tamaño

La declaración del tamaño de letra en puntos puede ser algo obvio si vienes del mundo de las artes gráficas, y si tienes experiencia con el diseño gráfico por ordenador, seguramente te manejarás muy bien usando los pixels como unidad de medida. La propiedad font-size en CSS nos permite utilizar ambas unidades. En el siguiente ejemplo, el selector CSS muestra una regla de párrafo con puntos y la segunda, una regla de párrafo basada en pixels:

p {
   font-size:12pt;
  }

(regla CSS de tamaño de letra basada en puntos)

p {
  font-size:12px;
  }

(regla CSS de tamaño de letra basada en pixels)

Aunque la unidad "points" está soportada, su uso es una mala práctica y no se recomienda en el diseño de páginas Web. Los puntos son un sistema de medida pensado para la imprenta de papel que indican una unidad absoluta de medida que no tiene una equivalencia exacta en pantalla. Los pixels, por su parte, son la unidad de medida que se suele emplear en los gráficos por ordenador. Los tamaños y resoluciones de pantalla se expresan en pixels. En un mundo ideal, los diseñadores deberían poder utilizar sin riesgo los tamaños de letra expresados en pixels porque son unidades relativas pensadas para escalar de forma nativa. A lo largo de los años, los navegadores han resuelto el proceso de cambio de tamaño de los textos de diversas maneras. Por ejemplo, Internet Explorer 6 y 7 no modifican el tamaño del texto basado en pixels si el usuario opta por alterar la configuración por defecto.

Prácticamente todos los navegadores web ofrecen la posibilidad de alterar el tamaño del texto. Esta opción suele aparecer en el menú de Opciones o de Configuración. En algunos navegadores modernos la opción de cambio de tamaño del texto aparece en un submenú llamado Zoom. Muchos navegadores además ofrecen la combinación de Ctrl + + (para ampliar) y Ctrl + – (para reducir) que aumentan o reducen respectivamente el tamaño del texto. En el Mac OS, estas combinaciones son Command + + [aumento] y Command + - [reducción].

 

Uso de una combinación de porcentaje y medida "em"

Una forma de resolver el problema del cambio de tamaño de los textos que causa el uso de pixels consiste en aplicar otras unidades de medida. Aquí vamos a establecer un cambio de tamaño fiable combinando el porcentaje y la unidad "em". Para tener una idea de cómo funciona, vamos a introducir unas reglas de estilo CSS directamente en un archivo HTML que hemos preparado previamente para ti.

 

1 En el menú Archivo del editor de texto, selecciona Abrir y ve a la carpeta HTML5_02lessons. Localiza el archivo 02_sizing.html y pulsa Aceptar. En el menú Archivo, selecciona "Guardar como" y guárdalo con el nombre 02_sizing_work.html. Este archivo tiene cuatro bloques de texto: un título de nivel 1 (heading 1, <h1>), un heading 2 <h2>, y dos párrafos <p>. Este archivo utiliza una hoja de estilos interna por comodidad, y hemos declarado el tipo de letra Trebuchet para todo el cuerpo. Vamos a empezar por modificar algunas propiedades en el propio cuerpo para ver qué ocurre. 2 Antes de cambiar nada, tenemos que comprobar cómo se ve la página en su estado inicial. Visualiza este archivo en el navegador. Todos los navegadores aplican un tamaño de letra por defecto si no hay estilos que aplicar. En la mayoría de casos, el valor utilizado para el cuerpo es de 16 pixels (en este caso los párrafos heredan el valor de la etiqueta <body>). Cierra el navegador y regresa al editor de textos. 3 En la regla de estilos para el cuerpo, escribe esta línea: body { font-family:"Trebuchet MS", Tahoma, Arial, sans-serif; font-size:10px; } 4 Guarda el archivo en disco y abre la página en el navegador. Verás que todo el texto es ahora bastante más pequeño, y esto es debido a que el estilo del cuerpo define el tamaño general del texto para toda la página, y los demás elementos como párrafos y títulos, se restituyen en función de ese valor base.     Al establecer el tamaño de letra para el cuerpo, todo el texto de la página se representa más pequeño. 5 Vuelve al editor de textos y cambia el siguiente valor en la propiedad font-size: font-size:small; 6 De nuevo, guarda el archivo y abre la página en el navegador. Todo el texto es ahora algo más grande que el valor de 10 pixels que le indicamos en el paso 3. Como explicaba anteriormente, el valor "small" es una unidad de medida absoluta, llamada "palabra clave". Los navegadores web tienen tamaños predefinidos asignados a las palabras clave y, aunque algunos prefieren las palabras clave porque así se evitan tener que usar unidades (y los problemas que acarrean), en general no nos aportan el nivel de detalle que seguramente necesitaremos en muchas ocasiones. 7 Vuelve al editor y cambia el valor de la propiedad font-size poniendo esto: font-size:100%; 8 Guarda el archivo y visualiza la página en el navegador. Podrás ver que ahora el tamaño del texto es el mismo que teníamos al principio del ejercicio (cuando aún no habíamos definido ningún tamaño de letra). Este paso nos sirve para definir expresamente que el tamaño de letra para el cuerpo es el mismo que tiene predefinido el navegador. Tendrás que hacer un pequeño acto de fe y creer que la técnica que estás aprendiendo resuelve ciertos problemas concretos de cambio de tamaño del texto en los navegadores antiguos. Si atendemos a este tipo de problemas ahora nos evitaremos muchos problemas en el futuro y nos aseguraremos una mejor compatibilidad para nuestras páginas web. 9 En la regla de estilo para el párrafo, escribe esto: p { font-size:1em; } La unidad de medida llamada "em" es muy parecida a los pixels en el sentido de que está pensada para variar la escala. La diferencia principal es que los "ems" no dependen de la resolución del monitor, mientras que los pixels sí. Puede que al principio los ems no sean muy intuitivos, pero si aprendemos a utilizarlos, nos aportarán grandes ventajas en el futuro. 10 Guarda el archivo y vuelve a mostrarlo en el navegador. Dependiendo de qué navegador utilices, probablemente no vas a ver ningún cambio en la página y eso se debe a que el valor em de 1 se vincula con un tamaño de letra del 100%, que es lo que hemos definido para el cuerpo. Quizá nos ayude a entender esta relación si la expresamos en forma matemática: 1 em = 100% = 16 pixels. Aquí tenemos que el tamaño de letra para el párrafo es de 1em, el tamaño de fuente para el cuerpo es 100% y el tamaño de fuente por defecto para el navegador es de 16 pixels. Una vez definida la relación, podemos empezar a variar el valor de "em" para agrandar o reducir el tamaño de la letra. 11 Cierra el navegador y vuelve al editor de texto. En la regla para el párrafo, cambia este valor: font-size:0.875em; 12 Guarda el archivo y ábrelo en el navegador. Ahora el texto del párrafo es más pequeño.     Hemos declarado el tamaño de fuente para el párrafo en unidades "em". La razón por la que utilizamos un valor tan exacto como 0.875 es porque así el tamaño de la fuente equivale a 14 pixels. Si estás empezando a pensar que el diseño de páginas web es una ciencia matemática, no te preocupes demasiado. Todo será más fácil a partir de ahora. Si tienes curiosidad, verás que multiplicando el valor de 16 pixels que es el tamaño por defecto del navegador, por el valor em (0,875) el resultado es 14.. 13 Ahora vamos a modificar el tamaño de los títulos, pero utilizando unidades em. En la regla h1, vamos a añadir esta línea: h1 { font-size:1.5em; } Esto hace que el tamaño de los títulos de nivel 1 sea vez y media el tamaño normal del texto del cuerpo. Es equivalente a 24 pixels. Guarda el archivo y muéstralo otra vez en el navegador para ver el efecto. En este momento, el texto h1 es de aproximadamente el mismo tamaño que h2, lo que no tiene mucha lógica, así que vamos a reducir también el tamaño de letra para la etiqueta h2. 14 En la regla h2 añade la siguiente línea: h2 { font-size:1.25em; } Esto provoca un cambio de escala que hace que los textos de h2 sean 1,25 veces más grandes que el texto normal del cuerpo, lo que (siguiendo nuestra fórmula matemática) nos da un valor real de 20 pixels. 15 Guarda el archivo y muéstralo otra vez en el navegador. Ahora tendrás que ver el texto manteniendo las proporciones adecuadas.     Establecemos el tamaño de letra del elemento h2 (título de nivel 2) a 1.25 ems. Recuerda que una de las razones más importantes para utilizar em como unidad de medida es que se adapta en el caso de que un usuario altere el tamaño del texto de su navegador. Podemos simular este efecto si aumentamos el tamaño de la letra en el navegador. Por ejemplo, en Internet Explorer 9 podemos ir a la opción View de la barra de menú, seleccionar "Text Size" y elegir entre unas cuantas opciones. Podrás ver que el texto reacciona bien a este cambio de escala. Cuando termines asegúrate de que vuelves a dejar el tamaño del texto en el valor por defecto. Muchos navegadores tienen un comando que permite hacer esto. El problema que nos plantea el cambio de tamaño del texto en los navegadores es algo más complicado, ya que algunos utilizan la función "zoom" que aumenta o reduce la escala de toda la página. Los navegadores que disponen de zoom pueden tener, además, una opción aparte para variar solo el tamaño de la letra. Otra de las ventajas de utilizar ems tiene que ver con la relación de escala entre todos los elementos que utilizan esta unidad de medida. 16 Vuelve al editor de texto y en la regla correspondiente al body, modifica el siguiente valor: font-size: 85%; 17 Guarda el archivo y vuelve a mostrarlo en el navegador. Ahora todo el texto es más pequeño, ¡y solo hemos cambiado un valor! Esto es por la relación que mantiene la unidad em con el elemento body. Algunos diseñadores asignan de esta forma un tamaño de base si, por ejemplo, el cliente quiere que el tamaño de letra sea más grande o más pequeño en todo el sitio web. En lugar de modificar las propiedades una a una, con una sola regla controlamos múltiples tamaños de letra de una manera más fácil. 18 Vuelve a dejar la propiedad font-size del cuerpo en su valor original de 100%: font-size: 100%; 19 Guarda el documento, con esto hemos concluido la lección.

 

En este ejercicio has podido explorar distintas maneras de dar formato a los textos. Cuando quieras cambia el aspecto de los textos, casi siempre lo mejor será utilizar el texto real en vez de una imagen del texto (esto es, un archivo gráfico con los rótulos dentro). Si utilizamos textos en vez de imágenes con texto creadas con programas como Photoshop o Illustrator, nuestros sitios web serán accesibles para una audiencia más amplia de usuarios, dispositivos y (muy importante), buscadores.

Auto estudio

 

1 Añade otro título debajo del último párrafo en el archivo 02_index_work.html con esto: <h2> Worldwide Apparel volunteer opportunities </h2> 2 Crea un estilo para la etiqueta en tu hoja externa de estilos que defina este rótulo con letra de color naranja.

 

Repaso

Preguntas

 

1 ¿Qué es un doctype y qué relación tiene con la validación de las páginas web? 2 En el siguiente código XHTML, ¿cuál es el atributo y qué valor tiene? ¿Qué otros atributos podríamos encontrar con frecuencia en un elemento img como este? <img src="images/familysitting.jpg"/> 3 Indica la finalidad de las hojas de estilo externas y alguna de las ventajas que ofrece su utilización.

 

Respuestas

 

1 Un doctype es una declaración que se hace al principio de los documentos HTML. Los navegadores web la utilizan para saber qué lenguaje de markup y qué versión se utilizan en la página. La validación de páginas comprueba la conformidad de la sintaxis del código respecto de las especificaciones del doctype declarado. La validación de las páginas es una buena opción para detectar problemas como etiquetas que faltan o errores de tipografía en el código. 2 En esta línea de código, el atributo es src y su valor es "images/familysitting.jpg". El atributo src y su valor están anidados dentro de la etiqueta <img>. Este atributo contiene un vínculo a un archivo de imagen que se mostrará en pantalla. Otros ejemplos de atributos para imágenes son alt, que aporta un texto alternativo a la imagen para uso en dispositivos como sintetizadores de voz o lectores de pantalla, y los atributos width y height, que indican el tamaño que debe tener la imagen dentro de la página. 3 Una hoja de estilos CSS externa es un documento de texto con extensión .css. Este documento contiene reglas CSS que definen el aspecto de los elementos HTML. Puesto que las hojas de estilos externas se pueden asociar a múltiples páginas web, nos permiten disponer de un lugar centralizado para la definición de estilos de todo un sitio web. Una de las ventajas es que podemos modificar el aspecto de todo el sitio web con un solo cambio en una regla CSS. Otras ventajas pueden ser la posibilidad de utilizar múltiples hojas de estilos para facilitar su mantenimiento posterior e indicar hojas de estilo específicas para imprimir el documento o para optimizar su presentación en dispositivos móviles.

 

 

---

Windows, Bing, PowerPoint, Internet Explorer, Visual Studio, WebMatrix, DreamSpark y Silverlight son marcas registradas o marcas comerciales de Microsoft Corporation en Estados Unidos y/o en otros países. Otros nombres de productos y compañías mencionados aquí pueden ser marcas registradas de sus dueños respectivos.

Las empresas, organizaciones, productos, nombres de dominio, direcciones de correo, logos, personas, lugares y eventos de ejemplo utilizados aquí son ficticios. No se intenta ni debe deducirse ninguna relación con cualquier empresa, organización, producto, nombre de dominio, dirección de correo, logo, persona, lugar o evento real.

La información contenida en este curso se ofrece sin garantía, expresa, implícita o estatutaria. Ni los autores, Microsoft Corporation, ni los distribuidores o comercializadores serán responsables por ningún daño causado o imputado que pueda tener su origen, de manera directa o indirecta, en los contenidos de este curso.

Creado para Microsoft por Avlade: www.Avlade.com

©2011 Microsoft Corporation.

Ciertas secciones extraídas de la guía HTML5 Digital Classroom están protegidas por copyright 2011 de AGI Training y se utilizan con autorización. Si desea más información sobre el libro HTML5 Digital Classroom visite el sitio web http://www.digitalclassroombooks.com/Web-Design/HTML5-Digital-Classroom-Book.html