Diferencias entre HTML, XHTML y CSS

Webmaster profesional Capítulo 1
¿Cuáles son las diferencias
y ventajas de la utilización

Diseño de HTML, XHTML y CSS?
¿Qué aplicaciones pagas
y gratuitas existen para
diseñar y administrar
14

del sitio y CSS
un sitio web? 19
¿Qué herramientas nos ayudan
a elegir la paleta de colores
para un sitio? 24
¿Qué tipografías pueden utilizarse
en el diseño de un sitio web
Para comenzar a dar respuesta y cuáles son las recomendadas? 28
¿Cómo visualizar los sitios
a las dudas y problemas que no muestran los caracteres
de manera correcta? 30
más frecuentes que enfrenta ¿Cómo se pueden definir estilos
de texto para todas las
páginas de un sitio? 33
un diseñador o un desarrollador ¿Qué efectos es posible aplicar
a los links de una página y cómo se
de sitios web, en el primer capítulo pueden establecer para un sitio? 39
¿Qué aspectos deben considerarse
de este libro, abordaremos para diseñar y establecer el formato
de las tablas de un sitio? 45
¿Cómo es posible crear una
las soluciones relacionadas capa y ubicarla dentro de otra? 48
¿Es posible mostrar una capa con
con el diseño del sitio, trabajo una transparencia de fondo? 51
¿En qué casos se recomienda
con tablas, utilización de capas, diseñar una página
con dimensiones fijas y cuándo,
con porcentuales? 54
creación de diferentes tipos ¿Cuál es la mejor forma
de establecer los márgenes
de menús y aplicación de estilos CSS. de una página y sus elementos? 58
¿Cómo solucionar los problemas de
centrado del sitio web en diferentes
resoluciones de pantalla? 59
¿Cuáles son las diferentes
opciones de menús que se
pueden crear al utilizar CSS? 62
Resumen 67
SERVICIO DE ATENCIÓN AL LECTOR: usershop@redusers.com Actividades 68

1. DISEÑO DEL SITIO Y CSS

¿Cuáles son las diferencias y ventajas de la
utilización de HTML, XHTML y CSS?
Para lograr comprender cómo funciona Internet y las tecnologías que
conviven en su infinita telaraña, es importante conocer su evolución; nace como
un proyecto militar denominado ARPANET. Este desarrollo se concreta en
1969, año en el cual se produce la primera transmisión por esta vía. A principios
de la década del setenta, cuando aún la conectividad era muy rudimentaria, Ray
Tomlinson crea el correo electrónico, una invención que, renovaciones me-
diante, se mantiene vigente hasta nuestros días. Hacia fines de la década del
ochenta, Internet logra su punto de inflexión, cuando se crea lo que conocemos
como World Wide Web o WWW.

Figura 1. La entidad que determina los estándares que se utilizan
en la Web, World Wide Web, es conocida como W3C
(World Wide Web Consortium) y se encuentra en la dirección www.w3.org.

HTML
Con la llegada de la World Wide Web, fue fundamental contar con un lengua-
je que se transformara en un estándar en la construcción de páginas web. A prin-
cipios de la década del noventa, nace el HyperText Markup Language, nom-
bre que podría traducirse como lenguaje de marcado (o etiquetado) de hipertexto,
HTML. Aún hoy es la base de las páginas web que vemos en Internet, poten-
ciado con las ventajas que ofrecen las nuevas tecnologías.
HTML utiliza etiquetas que permiten enriquecer o agregar contenido adicional,

14 www.redusers.com

¿Cuáles son las diferencias y ventajas de la utilización de HTML, XHTML y CSS?

al estructurar texto y otros elementos que conoceremos más adelante. Cabe
destacar que no es un lenguaje de programación ya que, entre otras cosas, no
puede ofrecer las funciones y el trabajo con variables, que sí brindan los lengua-
jes de programación. La ventaja del HTML es su versatilidad para trabajar con
distintos lenguajes y tecnologías. Por eso, a pesar de sus limitaciones, mantiene
su importancia en el armado de sitios web.
Dentro de un documento HTML, se puede agregar código de lenguajes, como
por ejemplo Javascript. También, es posible incluir etiquetas para mostrar imá-
genes, hipervínculos, películas Flash o reproductores multimedia. Por otra par-
te, los desarrolladores que trabajan con PHP, ASP o .NET tienen la posibilidad
de incluir fragmentos de código HTML dentro de la programación, para ofrecer
datos al usuario y realizar representaciones en pantalla.
Para poder visualizar un documento HTML, se necesita un software capaz de in-
terpretarlo. A este tipo de aplicaciones, se las conoce como navegadores, dentro
de los que se pueden mencionar, con sus diferentes versiones: Internet Explorer,
Mozilla Firefox, Google Chrome, Safari y Opera, entre otros. En el capítulo 3 de
este libro, analizaremos la compatibilidad de un sitio con estos.

Figura 2. La mayoría de los navegadores modernos ofrecen
una opción para mostrar el código fuente de las páginas web.

El lenguaje HTML ha evolucionado a través de los años y es identificado por versiones.
Su revisión actual es la 4.01, que fue dada a conocer en el año 1999. HTML5 aún está
en desarrollo. En la tabla 1, veremos las etiquetas más importantes de este lenguaje.

www.redusers.com 15


ETIQUETA HTML DESCRIPCIÓN DE SU FUNCIÓN4
<!DOCTYPE> Permite establecer el tipo de documento.
<html> Indica el inicio del código HTML.
<head> Establece el comienzo del encabezado del documento.
<title> Se incluye dentro de la cabecera y sirve para indicar el título del documento.
Por lo general, este dato puede verse reflejado en la barra de título
del navegador al acceder a una página.
<link> Permite vincular iconos o archivos externos, como por ejemplo hojas de estilo.
Se define dentro del encabezado.
<style> Se utiliza para definir los estilos CSS y códigos Javascript que se incluyen
dentro del documento. Se ubica dentro del encabezado.
<script> Esta etiqueta se utiliza con el fin de incorporar un código script.
<body> Indica el comienzo del cuerpo del documento y envuelve el contenido
que se muestra en la ventana del navegador.
<h1> Estas etiquetas, que se utilizan dentro del cuerpo del documento,
<h2> permiten definir los distintos niveles de título que admite el estándar
<h3> HTML. <h1> es el de mayor importancia, y <h6>, el de menor jerarquía.
<h4>
<h5>
<h6>
<p> Define un párrafo.
<blockquote> Mediante esta etiqueta, es posible asignar una sangría al texto.
<br> Con esta opción, se agrega una línea en blanco en el flujo. Actúa como
si fuera creada con Enter en un procesador de texto.
<a> Permite definir la dirección de un enlace y el texto que éste muestra
en pantalla, entre otras opciones.
<table> Posibilita definir una tabla. Dentro de ella, se utiliza <tr> para crear
una fila y <td> para una celda.
<div> Envuelve el área de un contenido. Se utiliza para la construcción de capas.
<frame> Se emplea para definir un marco. Trabaja junto con <frameset>, que determina
el conjunto de marcos. Por otra parte, la etiqueta <iframe> permite insertar
un marco en el documento, sin necesidad de que pertenezca a un conjunto.
<form> Envuelve los elementos de un formulario.
<img> Esta etiqueta es utilizada para mostrar una imagen en pantalla.
<b> Se utiliza para envolver texto en negrita o bold. En la actualidad, se extiende
la opción de reemplazar esta etiqueta por <strong>, que fuerza al navegador
a dar énfasis o reforzar el texto destacado, por lo general, al mostrarlo en negrita.
<i> Se utiliza para envolver texto en itálica o cursiva.
<u> Se emplea para envolver texto subrayado.
Tabla 1. Código de las etiquetas HTML
más importantes y descripción de su función.

16 www.redusers.com

¿Cuáles son las diferencias y ventajas de la utilización de HTML, XHTML y CSS?

Por lo general, en HTML se encierra contenido con etiquetas de apertura y de
cierre: por ejemplo, para marcar un texto en cursiva, se debe escribir <i>Texto a
mostrar</i>. Algunas etiquetas especiales, como puede ser <br>, no envuelven un
contenido, por lo cual no necesitamos cerrarlas.

XML y XHTML
XML, cuyas siglas significan eXtensive Markup Language, es considerado como
un metalenguaje que define reglas, al permitir que otros lenguajes se basen en ellas.
Su desarrollo pertenece al World Wide Web Consortium (W3C).

Figura 3. Cuando ingresamos en www.w3c.es/divulgacion/guiasbreves/tecnologiasXML,
encontramos una guía de XML en castellano, publicada por la oficina española de W3C.

El término en inglés eXtensible Hypertext Markup Language es un estándar
conocido como XHTML y cuya traducción al castellano es lenguaje extensible de
marcado de hipertexto. Éste utiliza etiquetas, al igual que el HTML, pero exige
mayores requisitos en cuanto a estructura y formación de los documentos, tal co-
mo lo establecen las reglas del XML.

❘❘❘
¿QUÉ ES ASP?

ASP es una tecnología que fue creada por Microsoft. Permite el desarrollo de páginas web que
son procesadas e interpretadas por un servidor que devuelve un resultado al cliente, para ser
visualizado en el navegador. ASP significa Active Server Pages, que en castellano puede tradu-
cirse como páginas activas de servidor.

www.redusers.com 17


CSS
Uno de los conceptos que ha crecido de manera notable en el mundo del diseño
web, es la utilización de hojas de estilo (Cascading Style Sheets) conocidas como
CSS. Las características que ofrece CSS resultan muy prácticas para el armado de
un sitio, ya que permiten realizar una separación entre lo que es la estructura del
contenido y la forma de representarlo en la pantalla.
Es importante destacar que, si bien algunas de las características que ofrece CSS tam-
bién pueden lograrse mediante HTML, CSS ofrece una mayor cantidad de efectos
y opciones para personalizar textos y elementos en general, lo que representa otra
de las ventajas de integrar esta opción en el diseño de las páginas o de un sitio web.
Por sus características, CSS puede incorporarse en un documento HTML o
XHTML, o bien incluirse como un archivo aparte. Existen dos formas de incor-
porar CSS en un documento HTML. La primera consiste en declarar los estilos
y sus características en la cabecera del documento (entre las etiquetas <head> y
</head>). Esta opción puede ser útil para definir los estilos que tendrá sólo una
página en particular y no serán utilizados en otras.
La segunda alternativa es incluir los estilos y sus propiedades dentro del cuerpo del
HTML, es decir dentro de las etiquetas <body> y </body>. Se recomienda desestimar
el uso de esta opción, ya que no colabora con la separación de la estructura, debido
a que no permite tener todos los estilos en un solo lugar para ser modificados.
Para trabajar con estilos en un sitio, en especial cuando se utilizan en varias páginas
o se procede a integrarlos con lenguajes de programación, es recomendable colocar
los estilos en un archivo específico, tal como veremos en el punto 6 de este capítulo.

Figura 4. Algunos navegadores, como Internet Explorer o Mozilla Firefox, permiten desactivar
los estilos de un sitio para lograr una visualización de él sin tener esta característica habilitada.

18 www.redusers.com

¿Qué aplicaciones pagas y gratuitas existen para diseñar y administrar un sitio web?

¿Qué aplicaciones pagas y gratuitas existen para
diseñar y administrar un sitio web?
Si contamos con el suficiente conocimiento de HTML, la creación de
una página web puede llevarse a cabo con un simple editor de texto, como pue-
de ser el Bloc de notas de Windows. En este caso, sólo debemos escribir el có-
digo que deseamos utilizar y guardar el archivo con extensión HTM o HTML.
Estas aplicaciones que permiten editar texto plano, son suficientes para crear una
página web. Si bien esta afirmación es válida, hay que tener en cuenta que, para
afrontar desarrollos de mayor complejidad, esta alternativa no nos ofrece dema-
siada ayuda. La elección entre un tipo de editor y otro se basa, principalmente,
en el conocimiento que tenemos sobre el lenguaje HTML. Las ventajas de tra-
bajar con este tipo de editores es que no nos encontramos limitados por el nú-
mero de opciones que tiene la aplicación.
Si nuestro deseo es trabajar con código, para luego probarlo en un navegador, una
opción que nos ayudará en gran medida consiste en buscar un editor que reco-
nozca las etiquetas HTML y nos ofrezca ayuda en su creación. Dentro de esta ga-
ma de aplicaciones, encontraremos software gratuito que permite editar código.
UltraEdit es un potente editor de código capaz de trabajar con XHTML,
HTML, PHP, Java, Javascript y Perl, entre otros lenguajes. Permite indentado
automático, Drag & drop y chequeo de palabras mientras se escribe, entre otras
opciones. Se puede obtener una versión trial desde www.ultraedit.com/
downloads/ultraedit_download.html.

Figura 5. Las características de UltraEdit lo ubican como
una excelente opción tanto para el uso personal como profesional.

www.redusers.com 19


PSPad es un editor que cuenta con una licencia freeware y es apto para correr en
sistemas Windows. Reconoce sintaxis de diferentes lenguajes, y las resalta con co-
lor. Entre los lenguajes soportados, se encuentran HTML, XHTML, PHP, Perl,
VBScript, Java y JavaScript, entre otros. Para descargar los archivos relacionados con
este programa, debemos acceder a www.pspad.com/es/download.php.
La opción de trabajar con editores resulta muy útil para quienes tienen experien-
cia en programación o si se necesita realizar ajustes puntuales. Sin embargo, para
los diseñadores web, armar un sitio desde línea de código puede resultar poco ami-
gable. Como respuesta a este problema, se adoptó el concepto WYSIWYM para
aplicaciones de edición de páginas web. Estas siglas, que en inglés significan What
You See Is What You Mean, hacen referencia a que lo que se ve en pantalla es
lo que se obtiene como resultado. Este modelo, mucho más visual que el ofreci-
do por un editor de código, es el que se impone hoy por hoy en el mundo del di-
seño web. La tendencia actual también marca que cada vez son más los progra-
mas de este tipo que permiten trabajar en tiempo real con la vista simulada y la
línea de código, para brindarle mayor versatilidad al usuario.

Los programas WYSIWYM
Existe una variada oferta entre los programas WYSIWYM. Desde aquellos gratui-
tos, disponibles para diversas plataformas, hasta potentes suites multimedia de uso
profesional, pensadas para el trabajo individual o en equipo.

Programas gratuitos
Dentro de las aplicaciones gratuitas, se destaca WYMeditor, un editor open sour-
ce (código abierto) que puede trabajar con XHTML y CSS, además de integrarse
con ASP, PHP y Javascript. Al ser una alternativa open source, soporta la inclusión
de plugins, skins y es adaptable en su totalidad a las necesidades del desarrollador.
Para descargarlo, hay que ingresar en www.wymeditor.org/download.
KompoZer es otra aplicación libre que permite la edición de páginas HTML.
Presenta gran facilidad de uso y puede ser manejado por todo tipo de usuarios
que deseen armar un sitio web.

❘❘❘
¿QUÉ ES PHP?

PHP es un lenguaje de programación de páginas dinámicas muy difundido en Internet, cuya
primera versión fue lanzada a mediados de la década del noventa. Las páginas desarrolladas
en PHP se alojan en servidores web que interpretan el código ante un requerimiento del usua-
rio, para poder ofrecer el resultado en un navegador.

20 www.redusers.com


Figura 6. KompoZer es una aplicación que resulta compatible con Windows,
Linux y Mac OS X. Puede ser descargada desde el sitio web: http://kompozer.net.

Adobe Dreamweaver
En el ámbito profesional, Dreamweaver ha logrado ubicarse en un lugar de privilegio
entre las preferencia de los usuarios. En su origen, este programa fue desarrollado por
una empresa llamada Macromedia y lanzado en el año 1997. A raíz del éxito alcanzado
por sus versiones posteriores, Adobe adquirió los derechos del programa y es esta
empresa la que, en la actualidad, tiene en sus manos el desarrollo del producto. La ver-
sión CS4 de este software fue lanzada en septiembre de 2008. Entre las principales ven-
tajas que ofrece Dreamweaver, se destaca su alto grado de personalización en las vistas,
el agregado de nuevas funcionalidades, vista de código con marcado y ayuda de sintaxis.

Figura 7. Dreamweaver permite editar y crear archivos que utilizan
código HTML, XML, ASP, PHP, CSS y JavaScript, entre otras opciones.

www.redusers.com 21


Además de sus características como editor, Dreamweaver ofrece una completa
respuesta para administración: permite tanto definir distintos sitios como traba-
jar con ellos, subir y descargar archivos, sin olvidar la ventaja de sincronizar la
información entre el equipo local y el servidor.
Dreamweaver es un software pago que funciona en Windows XP (SP2 o supe-
rior), Windows Vista y también en sistemas Mac OS X. Este producto se puede
conseguir dentro de las suites de diseño comercializadas por Adobe o bien es po-
sible descargarlo, en una versión de prueba, desde el centro de descarga de pro-
ductos de Adobe: www.adobe.com/es/downloads.

Figura 8. Desde su centro de descargas, Adobe ofrece, a los usuarios, la posibilidad
de acceder a versiones de prueba de sus productos más destacados.

Para realizar la descarga de Dreamweaver o de cualquiera de los otros productos
ofrecidos como demostración, debemos crear una cuenta en el sitio de Adobe. El
proceso es gratuito y requiere pocos pasos. Luego nos podremos autenticar y reali-
zar la descarga, disponible en diversos idiomas, incluido el castellano.

Microsoft Expression Web
Expression Web es la aplicación a través de la cual Microsoft brinda una alternativa
para el diseño de sitios web. Ofrece un entorno de trabajo basado en el concepto
WYSIWYM, agrega la opción de trabajo en línea de código y tiene la capacidad de
trabajar con los estándares más utilizados en Internet en la actualidad. Cuenta con di-
versas herramientas para manejar y administrar hojas de estilo CSS. Este programa
puede desarrollarse tanto con ASP.NET como con PHP. Para ejecutar Microsoft
Expression Web 2 es necesario contar con Windows XP (SP2 o superior) o Windows
Vista. Este producto se puede obtener en diferentes idiomas, incluido el castellano.

22 www.redusers.com


Figura 9. Para obtener Microsoft Expression Web se debe ingresar
en www.microsoft.com/spain/expression/try-it/Default.aspx y hacer
clic en el botón Evaluar, correspondiente al producto elegido.

<oXygen/>
Con <oXygen/> podemos acceder a una plataforma de edición y creación de pági-
nas XML, HTML y XHTML. Ofrece una interfaz visual WYSIWYG y la posibili-
dad de editar y validar código. Este producto cuenta con dos versiones: <oXygen/>
XML Editor y <oXygen/> XML Author. Para acceder a la descarga de una versión
de evaluación, hay que ingresar en www.oxygenxml.com/download.html.

Figura 10. <oXygen/> ofrece opciones muy completas para trabajar con desarrollos
web, tanto para crear y editar archivos, como para manejar proyectos.

www.redusers.com 23


¿Qué herramientas nos ayudan a elegir la paleta
de colores para un sitio?
Aunque para muchos parezca una tarea trivial, la elección de la paleta de
colores que se utilizará en un sitio web consiste en una labor que debe realizarse con
cuidado, ya que una mala elección puede deslucir de manera considerable el resul-
tado final. Es parte clave del trabajo de un buen diseñador poder captar la esencia
de un sitio, para plasmarla en la combinación de colores que mejor se adapte al es-
tilo concordante con los contenidos que se desean transmitir.

Cómo transmitir sensaciones a través de los colores
Además de su función estética, los colores permiten transmitir sensaciones. Una po-
sible separación que se puede hacer entre ellos, es ubicarlos como cálidos o fríos.
Los colores cálidos son los que transmiten un clima íntimo y cercano. También
pueden dar una sensación de pasión y calidez. Dentro de esta clasificación se en-
cuentran los tonos del amarillo, naranja y rojo. Un claro ejemplo de esto son el sol
y el fuego, representados por los colores mencionados.
Por su parte, los colores fríos son aquellos que sirven para marcar distancias y, en
algunos casos, describir situaciones de tristeza. Entre los colores que se ubican en
este rango, se encuentran azul, cian, violeta y verde, en especial en sus tonos más
apagados. Para dar un ejemplo de esto, se dice que son algunos metales, fuertemente
identificados con el frío, los que suelen tomar estos colores como base.
Al elegir un color, se debe tener muy presente su tonalidad, luminosidad y satura-
ción, para ubicarlo en el lugar apropiado y mantener la armonía del diseño.

Colores RGB
Para determinar los colores de un sitio web, es fundamental tener en cuenta que
el resultado de nuestro diseño será visto en una pantalla, ya sea un monitor o
bien la de un dispositivo móvil. Por tal motivo, la elección de colores debe rea-
lizarse sobre la base de una composición RGB. En HTML, los colores RGB pue-
den ser representados en modo hexadecimal con el símbolo # antepuesto. Por

FRONTPAGE

Frontpage es un editor de páginas web, cuyo desarrollo estuvo en manos de Microsoft a
partir de mediados de la década del noventa. Logró cierta popularidad en aquellos años,
acompañado por el crecimiento que Internet adquiría en todo el mundo. En la actualidad, se
ha discontinuado y cedió su lugar a Expression Web.

24 www.redusers.com

¿Qué herramientas nos ayudan a elegir la paleta de colores para un sitio?

ejemplo, el color rojo se representa como #ff0000 y el amarillo como #ffff00.
Color Cop es una aplicación libre que permite obtener el valor de colores que
después se puede utilizar en el desarrollo de páginas web o en otras aplicaciones.
Al ingresar en la dirección del sitio: http://colorcop.net/download, tenemos la
posibilidad de descargar el software para su utilización.

Figura 11. Para quienes utilizan editores web del tipo WYSIWYM, como
Dreamweaver, la elección de un color resulta mucho más sencilla,
ya que el programa ofrece una paleta a la vista para elegir el tono deseado.

Sitios web para elegir paletas de colores
COLOURlovers es un sitio web que brinda la posibilidad de elegir colores, pa-
letas y diseños de patrones (patterns). Este espacio se nutre por la contribución
de los usuarios y permite registrarse de manera gratuita. Entre los servicios adi-
cionales, se destacan un foro de discusiones y un blog que aporta muy buenas
ideas sobre todo lo relacionado con los colores.

Figura 12. Para acceder a COLOURlovers hay que ingresar en www.colourlovers.com.
Desde la página principal, se puede acceder a las últimas novedades subidas
por los usuarios, calificar y dejar comentarios, entre otras opciones.

www.redusers.com 25


Color Combos es una alternativa que nos permite crear nuestra propia paleta de
colores. Entre otras opciones, se encuentra la posibilidad de acceder a las paletas
subidas por los usuarios que desean compartir sus combinaciones. Para poten-
ciar esta alternativa, podemos suscribirnos al RSS del sitio y, de esta forma, es-
tar al tanto de las actualizaciones que se producen en la página.
Si lo deseamos, también contamos con la opción de ingresar una dirección URL
para conocer la paleta de colores utilizada. Para acceder a este beneficio, ingre-
samos al sitio web en www.colorcombos.com.

Figura 13. Color Combos ofrece una buena variedad de paletas, permite realizar búsquedas
personalizadas y brinda muchas facilidades, pero sólo se ofrece en inglés.

Aplicaciones para elegir paletas de colores
ColorSchemer Studio es una aplicación que nos permite utilizar una rueda de co-
lores para seleccionar los tonos de nuestra paleta. Podemos guardar nuestros traba-
jos y realizar funciones avanzadas. Está disponible para Windows y MAC OS X. Se
puede descargar una versión de evaluación desde www.colorschemer.com.

❘❘❘
DIFERENCIAS ENTRE RGB Y CMYK

Se conoce como RGB a la combinación que se forma con los colores de luz primarios: rojo,
verde y azul. Un ejemplo de esto es la pantalla de un monitor o de un televisor. Por su parte,
CMYK es la combinación que se logra al combinar en impresión los colores cian, magenta,
amarillo y negro; las impresoras utilizan este sistema.

26 www.redusers.com

¿Qué herramientas nos ayudan a elegir la paleta de colores para un sitio?

Figura 14. Existe una versión para utilizar en línea,
llamada Color Schemer Online, a la que se puede acceder
desde la dirección web www.colorschemer.com/online.html.

Otra alternativa que tenemos a nuestro alcance se llama colorbrowser. Su fun-
ción principal es ayudarnos con la organización y la edición de paletas de colores.
Ofrece varias opciones de exportación, y se puede acceder a la página principal
del proyecto ingresando en http://code.google.com/p/colorbrowser.

Figura 15. Colorbrowser es una aplicación sencilla
de tecnología Adobe AIR que puede ser útil para aquellas
personas que necesitan trabajar con paletas de colores.

www.redusers.com 27


¿Qué tipografías pueden utilizarse en el diseño
de un sitio web y cuáles son las recomendadas?
Al diseñar un sitio web, no se puede dejar de contemplar las tipografías
que se utilizarán en su creación. En este sentido, es importante destacar que las fuen-
tes que visualizará el navegador son las que se encuentran instaladas en el sistema del
usuario. Si tenemos en cuenta que, al instalarse el sistema operativo, solamente se in-
cluye un reducido conjunto de tipografías, esto hace que las posibilidades sean aco-
tadas, ya que no todos los usuarios cuentan con los packs adicionales de fuentes que
pueden disponer, por ejemplo, los especialistas en diseño gráfico. En consecuencia,
al abordar el diseño de un sitio, hay que utilizar las familias de fuentes que aseguren
compatibilidad y se encuentren en los diversos sistemas donde pueda ser visualizado.

Figura 16. Si desconocemos las fuentes que están instaladas en Windows, podemos
acceder a ellas a través del Panel de Control/Apariencia y personalización/Fuentes.

Desde hace unos años, se ha popularizado el concepto de fuentes seguras para
utilizar en sitios web, al que, en idioma inglés, se lo suele denominar web-safe
fonts. Utilizar estas fuentes nos brinda mayor certeza en cuanto a lo que el usua-
rio podrá visualizar en su navegador. Entre las fuentes más populares incluidas
en Windows y en otros sistemas, se encuentran Arial, Courier New, Georgia,
Times New Roman, Verdana, Trebuchet y Lucida Sans.
Es posible reunir las fuentes por familias, que son las que permiten agrupar por es-
tilo y características. Dentro de este concepto, se pueden señalar las fuentes serif,
que son aquellas que cuentan con algún tipo de remate o de adorno en sus puntas
o extremos, que las distingue, como por ejemplo Times New Roman o Georgia.

28 www.redusers.com

¿Qué tipografías pueden utilizarse en el diseño de un sitio web y cuáles son las recomendadas?

Por el contrario, las tipografías que se identifican como sans serif son las que no
presentan este remate, en este grupo se incluyen Arial y Verdana, entre otras.

Figura 17. Para comprender claramente las diferencias entre una fuente serif y una sans serif,
basta realizar una comparación visual entre ellas, en la pantalla de la computadora o en un papel.

Es importante señalar que se pueden marcar otras divisiones entre tipografías. Por
ejemplo, la letra Courier presenta características que la definen como serif, por
su terminación, pero además es monoespaciada. Esta especificidad hace que ca-
da uno de los caracteres, escritos con tipografía Courier, ocupe el mismo espacio.
La mayoría de las tipografías no utilizan esta característica. Por ejemplo, en un
texto escrito con Verdana, la letra i ocupa menos lugar que la m.

Fuentes y reemplazos
Una ventaja que presenta el lenguaje HTML es la posibilidad de establecer fuentes
de reemplazo, en caso de que una tipografía no se encuentre en el sistema, como en
el ejemplo que se muestra a continuación.

<font face=”Arial, Helvetica, sans-serif”>Texto de prueba</font>

La etiqueta <font> debe estar contenida dentro del cuerpo del documento, es de-
cir después de <body> y antes de </body>. Su función es definir las característi-
cas del texto. A través de la propiedad face, podemos establecer la tipografía con
la que se mostrará el texto y sus posibles reemplazos. Como vimos en el ejemplo

www.redusers.com 29


anterior, además de las fuentes de reemplazo se puede indicar la familia.
Otras propiedades que es posible aplicar a <font> son size (tamaño de la fuente) y
color (color de la fuente). Como podremos ver en el punto 6 de este capítulo, tam-
bién se puede establecer una fuente y sus propiedades por medio de CSS.

Fuentes en imágenes y animaciones
Para resolver las situaciones en las que es imprescindible utilizar una tipografía
determinada, por ejemplo, para crear un logotipo, se puede recurrir a la incorpo-
ración de una imagen, generada con un programa de creación y edición, como
por ejemplo Adobe Photoshop o Gimp.
De igual forma, se puede proceder para una animación, pero mediante el uso de
otras herramientas, como Adobe Flash, una de las aplicaciones que ha ganado
un lugar destacado en la preferencia de los diseñadores web. Cabe destacar que
las tipografías empleadas al generar una película en Flash quedan incorporadas
en el archivo. Por este motivo, no es necesario que el usuario las tenga instala-
das en su PC y, por lo tanto, le brinda mayor libertad al diseñador.

¿Cómo visualizar los sitios que no muestran
los caracteres de manera correcta?
A esta altura del siglo XXI, no hay dudas de que Internet es un fenó-
meno global que abarca a personas de todo el mundo. Este suceso comunicacio-
nal y cultural también implica una enorme cantidad de contenidos escritos en
muchos idiomas y dialectos.
Los sistemas operativos en castellano están preparados para visualizar juegos de ca-
racteres de los lenguajes que comparten la misma codificación, pero pueden reque-
rir la instalación de paquetes adicionales para otros lenguajes, como el árabe o el
chino. Por esta causa, un navegador en español puede ver sin problemas páginas es-
critas en inglés o en italiano, pero, a veces, presentan caracteres incorrectos u
ofrecen la descarga de un paquete adicional si el contenido está en idiomas que ma-
nejan otro alfabeto, distinto del latino, utilizado por el idioma castellano.

❘❘❘
¿QUÉ SON LAS FUENTES TRUETYPE?

Las fuentes TrueType conforman un estándar entre las tipografías. Su uso se encuentra muy
extendido en sistemas Windows, Mac OS y Linux. Se pueden instalar de manera sencilla y
existe una importante cantidad de familias disponibles para descargar a través de Internet,
tanto en forma gratuita como arancelada.

30 www.redusers.com

¿Cómo visualizar los sitios que no muestran los caracteres de manera correcta?

Figura 18. Si nuestro sistema no cuenta con los paquetes de fuentes y configuración
adecuada, el contenido en otros idiomas no será visto de manera correcta.

Para que el navegador tenga la información necesaria de cómo debe mostrar una pá-
gina, existen etiquetas específicas que permiten dar información sobre el tipo de do-
cumento, el idioma y el juego de caracteres que se necesita utilizar. Se recomienda
tener muy presente esta opción, para lograr una mejor compatibilidad con todos los
navegadores del mercado y, además, para colaborar con el trabajo de rastreo de los
buscadores de Internet. Algunos programas, como Dreamweaver, pueden introdu-
cir el código inicial de manera predeterminada.

Figura 19. Quienes utilizan Dreamweaver como editor, cuentan con una opción
para definir la codificación y otras características del documento HTML.

Si debemos iniciar un documento desde cero, por nuestros propios medios, el có-
digo por ingresar al comienzo es el siguiente:

www.redusers.com 31


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />

Si bien no afectan la codificación de la página, cabe destacar que existen atributos
específicos de idioma y región que se pueden aplicar a la etiqueta <HTML>. Para in-
dicar que un documento está escrito en español, se debe escribir de siguiente :

<html lang=”es”>

Si se desea aclarar el idioma y el país, o región, se deben escribir las letras que lo
identifican, separadas por un guión. Por ejemplo, para especificar el idioma inglés
y el país Estados Unidos, hay que escribir:

<html lang=”en-US”>

Si el problema persiste en algunos equipos puntuales, se puede recomendar al usua-
rio que verifique la configuración de su navegador. En el caso de Internet Explorer,
debe ir al menú Ver/Codificación o en Mozilla Firefox a Ver/Codificación de caracteres.
Por defecto, en ambos casos, debería estar seleccionada la opción Unicode.

Figura 20. Si en páginas de uso frecuente se visualizan de manera incorrecta algunos
caracteres, es muy probable que esté mal configurada la codificación del navegador.

32 www.redusers.com

¿Cómo se pueden definir estilos de texto para todas las páginas de un sitio?

¿Cómo se pueden definir estilos de texto
para todas las páginas de un sitio?
Como hemos visto antes, las tipografías de un sitio son parte de su
identidad. Desde un punto de vista estético y para mantener homogeneidad
entre las páginas que lo componen, es importante definir desde el comienzo los
estilos de texto que se utilizarán.

Figura 21. Definir los estilos de un sitio nos permite identificarlo
como marca, concepto, o bien dentro de un rubro o especialidad.

www.redusers.com 33


Una de las grandes ventajas que nos ofrece la utilización de CSS es la posibili-
dad de definir estilos de texto, que podrán ser incorporados en las páginas que
componen el sitio. Otro de los puntos positivos, que nos brinda trabajar con es-
ta modalidad, es que resulta mucho más sencilla cualquier modificación ya que,
al cambiar las propiedades del estilo, éstas se aplicarán a los textos de todas las
páginas vinculadas. En la tabla que veremos a continuación, analizaremos
las principales propiedades que se pueden aplicar por medio de CSS, tanto para
texto como para otros elementos.
PROPIEDAD DESCRIPCIÓN VALORES4
color Permite establecer un color. Puede recibir valores RGB o el nombre del color
en inglés. Por ejemplo:
color: #000099;
color: blue;
font-family Se utiliza para definir Se pueden indicar nombres de fuentes o de
la familia tipográfica. familias. Es posible indicar más de un valor,
separado por coma. Por ejemplo:
font-family: Arial, sans-serif;
font-size Permite definir el tamaño Puede recibir un valor numérico o el tamaño
de una fuente. escrito en inglés. Por ejemplo:
font-size:10pt;
font-size: medium;
font-weight Se utiliza para establecer Puede recibir el valor normal, bold, bolder,
el grosor de una fuente. lighter o un número entre 100 y 900
(de cien en cien). Por ejemplo:
Font-weight: 700;
font-style Permite establecer Se le puede aplicar un valor normal,
el estilo de fuente. oblique o italic. Por ejemplo:
font-style: italic;
text-decoration Permite definir si un texto Puede tener un valor none, underline,
tendrá subrayado overline o line-through. Por ejemplo:
o se verá tachado. text-decoration: underline;
text-transform Se utiliza para hacer que Se le puede asignar capitalize, uppercase,
el texto tenga la primera lowercase o none. Por ejemplo, para todo
letra en mayúsculas el texto en mayúsculas:
(letra capital), todas las text-transform: uppercase;
letras en mayúsculas o
todo en minúsculas.
line-height Es un atributo que permite Puede recibir el valor normal o uno numérico.
establecer el interlineado, Por ejemplo:
definiendo el alto de la línea. line-height: 10px;

34 www.redusers.com


PROPIEDAD DESCRIPCIÓN VALORES4
text-align Se utiliza para alinear el texto. Se le puede aplicar un valor left, right, center
o justify. Por ejemplo: text-align: left;
text-indent Permite establecer Se puede asignar un valor numérico expresado
un indentado. en pixeles o pulgadas. Por ejemplo:
text-indent: 15px;
text-indent: 4in;
background-color Ofrece la posibilidad de Puede recibir valores RGB o el nombre del color
asignar un color de fondo en inglés. Por ejemplo:
a un elemento. color: #FF0000;
color: red;
background-image Se utiliza para establecer Se debe asignar el nombre y la ruta donde se
una imagen de fondo encuentra alojada la imagen. Por ejemplo:
para un elemento. background-image:
url(http://www.misitio.com/imagne.jpg)
margin Permite asignar un margen Puede utilizarse para izquierda (margin-left),
para un elemento. derecha (margin-right), abajo (margin-bottom)
y arriba (margin-top). Se le asignan valores
numéricos que pueden estar expresados en
pixeles, pulgadas o porcentajes. Por ejemplo:
margin-top: 8px;
padding Se utiliza para indicar el Puede utilizarse para izquierda (padding-left),
espacio entre un elemento derecha (padding-right), abajo (padding-bottom)
y su interior. y arriba (padding-top). Se le asignan valores
numéricos que pueden estar expresados en
pixeles, pulgadas o porcentajes. Por ejemplo:
padding-right: 1in;
border-color Permite establecer el color Puede recibir valores RGB o el nombre del color
del borde de un elemento. en inglés. Por ejemplo:
color: #33CC33;
color: green;
border-style Se emplea para definir Se le puede asignar un valor none, dotted,
el estilo de un borde. solid, double, groove, ridge, outset o inset.
Por ejemplo:
border-style: none;
border-width Permite asignar un ancho Se le asignan valores numéricos que pueden
a un borde. estar expresados en pixeles o en pulgadas.
Por ejemplo:
border-width: 2px;
Tabla 2. Tabla de los atributos más utilizados en CSS,
descripción de su uso y valores que pueden recibir.

www.redusers.com 35


Figura 22. Si ingresamos en www.w3.org/Style/CSS, podremos obtener
información y novedades sobre Cascading Style Sheets (CSS).

Hojas de estilo dentro del documento HTML
Al hablar de las características de CSS, en el punto 1 del presente capítulo, dijimos
que puede incluirse dentro del documento HTML o bien en un archivo externo. Si
elegimos la primera alternativa, es conveniente declarar los estilos en la cabecera del
HTML y serán válidos sólo para el documento en cuestión. A continuación, vere-
mos de qué manera se define una clase para aplicar como estilo a un texto.

<style type=”text/css”>
.miestilo {
font-family: “Times New Roman”, Times, serif;
font-size: 12px;
font-style: italic;
color: #000066;
}
</style>

El listado del ejemplo debe incorporarse en la cabecera del documento, después de
la etiqueta <head> y antes de </head>. En este caso, definimos una clase de texto al
especificar la familia de fuentes, el tamaño, el estilo y su color. Como podemos ver,

36 www.redusers.com


para incluir los estilos, en la cabecera escribimos <style type=”text/css”>. Al finalizar
todo el código CSS que deseamos incluir en el documento, cerramos con </style>.
Para aplicar la clase creada a un párrafo, debemos escribir:
<p class=”miestilo”>Texto del párrafo</p>. Esta opción también puede ser aplicada
a otras etiquetas, como por ejemplo a <body>. Una clase puede ser utilizada para un
único elemento o para varios. Si deseamos incluir el estilo directamente en un pá-
rrafo, sin declararlo en la cabecera, deberíamos proceder de la siguiente forma:

<p style=”font-family: Times New Roman, Times, serif; font-size:12px; font-
style: italic; color: #000066;”> Texto del párrafo</p>

En este caso, definimos los estilos dentro de la etiqueta párrafo (<p>) y separamos
las propiedades con ;. Si bien en el ejemplo tenemos todo en un mismo lugar, en
este caso, perdemos las ventajas de abstracción del diseño, que brinda CSS, debido
a que el contenido y la apariencia quedan en un mismo lugar. Además, en un ar-
chivo más extenso, declarar los estilos dentro del cuerpo del texto hace más engo-
rrosa la lectura del código al quitarle claridad.
Otro aspecto que debemos remarcar es que también es posible agregarle propieda-
des a un selector existente. Por ejemplo, si deseamos que todos los encabezados de
máximo nivel de una página sean de color azul, podríamos declarar lo siguiente en
la sección destinada para CSS en el encabezado del documento.

h1 {
color: blue;
}

Con estas líneas, definimos el color para los Encabezados 1 del HTML, pero tam-
bién podríamos definir otras propiedades relativas a la forma en que se representa
el texto en pantalla. Este ejemplo también podría realizarse con la aplicación del
concepto de clase, como ya hemos visto.

HISTORIA DEL CSS

Si bien su historia podría remontarse un poco más en el tiempo, fue en el mes de diciembre de
1996 cuando tuvo su primera revisión el nivel 1 de CSS, también conocido como CSS1. Esta fecha
podría marcarse como su lanzamiento público. CSS2 aparece en mayo de 1998. Por su parte, CSS3
se mantiene en desarrollo y algunos navegadores ya son compatibles con sus características

www.redusers.com 37


Figura 23. Al ingresar en http://jigsaw.w3.org/css-validator, accedemos
a un validador de código CSS que ofrece un completo informe
de los problemas que se pueden encontrar en los archivos analizados.

Hojas de estilo externas
La utilización de estilos en archivos externos a los documentos HTML es una
opción que ofrece muchas ventajas, porque nos permite manejar todos los esti-
los de un sitio de manera independiente. Esta alternativa nos ofrece una mejor
diferenciación entre el contenido y la forma en que se muestra en pantalla. La
opción mencionada resulta muy útil cuando se necesita realizar modificaciones,
ya que simplifica el trabajo de manera notable.
Los archivos de hojas de estilo llevan la extensión .CSS y están conformados por
una estructura muy simple, ya que en ellos sólo se deben incluir los estilos de texto
que se utilizarán, de la misma forma que si lo hiciéramos en el encabezado. Se pue-
den crear con un editor que reconozca el código, como los que hemos visto en el
punto 2 de este capítulo o desde cualquier otro editor de texto.
Como primera línea del archivo CSS, es recomendable indicar el juego de caracte-
res utilizado y, luego, declarar los estilos, como vemos en el ejemplo a continuación.

@CHARSET “UTF-8”;
.miestilo1 {
font-size: 10px;
color: #3333CC;
}

38 www.redusers.com

¿Qué efectos es posible aplicar a los links de una página y cómo se pueden establecer para un sitio?

.miestilo2 {
font-size: 12px;
color: #3399FF;
}

Para incluirlo en el archivo HTML, dentro del encabezado, escribimos lo siguiente:

<link type=”text/css” rel=”stylesheet” href=”./css/nombredearchivo.css” />

En el valor de href, se indicará la ruta y el nombre del archivo CSS, con su extensión.

Figura 24. Cada nivel o especificación de CSS incluye las características
de las versiones previas y además agrega nuevas funcionalidades. Por ejemplo,
CSS nivel 3 incluye todas las características del nivel 2 e incluye nuevas.

¿Qué efectos es posible aplicar a los links de una
página y cómo se pueden establecer para un sitio?
Una de las características más importante de los sitios web es su
capacidad de enlazar otros contenidos, ya sean del propio sitio o bien de otros
lugares. Esta posibilidad es la que permite estructurar un sitio y dar a conocer a
los visitantes las diferentes páginas que lo componen. Además, les ofrece la
alternativa de acceder a otros espacios recomendados, que pueden brindar con-
tenidos de interés o bien ser auspiciantes que ofrecen sus servicios.

www.redusers.com 39


Figura 25. En los primeros años de auge de la web, los links, por lo general, se representaban
al subrayar la palabra o frase que enlazaba hacia otra página o referencia de Internet.

Hoy en día, la representación básica de un link en HTML ofrece las mismas carac-
terísticas que conocimos en sus comienzos, sin embargo, con la utilización de CSS
y código Javascript, es posible lograr efectos mucho más interesantes.

La ubicación de los links
La ubicación de los enlaces en una página no es un asunto menor, debido a que su dis-
posición, dentro del diseño, define su atractivo y la posibilidad que existe de que el
usuario los vea y le resulte tentador hacer un clic en ellos. Como veremos más adelan-
te, los enlaces pueden figurar como un texto en HTML, ser enriquecidos por propie-
dades CSS, crearse con código Javascript o bien ponerse como imágenes, entre otras
opciones. Es importante tener en cuenta que hay que elegir la opción indicada, según
el diseño del sitio y también tener en cuenta la función que deseamos asignarle al en-
lace creado. Por ejemplo, se podría incluir una imagen animada muy llamativa para
definir el enlace que conduce a la ayuda de uso de un sitio y, a su vez, ubicarla en la
cabecera para que resulte bien visible. Sin embargo, en la mayoría de los casos, esta op-
ción no es la más relevante en el esquema de un sitio web, por lo cual puede tener una
ubicación de menor peso y un tipo de link más discreto.
En el capítulo 6, cuando recorramos las características de optimización del sitio (SEO),
veremos los lugares más destacados para incluir enlaces de publicidad, pero, por lo pron-
to, podemos decir que, en todos los casos, los links que el usuario percibirá como más
accecibles, son los que estén ubicados a menor distancia del contenido que está leyen-
do. Por lo general, se ubican a la izquierda o en la parte superior de la pantalla, como
por ejemplo ocurre con las botoneras que, al fin y al cabo, son un conjunto de enlaces
que pueden representarse como texto o como gráficos (estáticos o animados).

Crear un link en HTML
Antes de centrarnos en los efectos que se pueden generar sobre los links, veamos
de qué manera se crea un enlace en HTML.

<a href=”contacto.htm”>Contacto</a>

40 www.redusers.com


El enlace se define con etiqueta <a> y se cierra con </a>. Con el parámetro href, se in-
dica el sitio o página web de destino; en este ejemplo, enviamos a la página de contac-
to del sitio (contacto.htm). En caso de enviar a un sitio web, se debe indicar la direc-
ción URL completa, por ejemplo, http://www.direcciondemisitioweb.com/
contacto.htm. Lo que queda envuelto entre las etiquetas <a> y </a>, es el texto que
muestra el navegador, es decir lo que se imprime en pantalla. Si deseamos utilizar una
imagen con enlace, en lugar de un texto, debemos escribir el siguiente código:

<a href=”contacto.htm”><img src=”img/imagen.gif” width=”175” height=”192”
/></a>

Como vemos, la estructura es similar. Con la etiqueta img src, se debe definir el
nombre y la ruta de la imagen que deseamos que se vea en lugar del enlace. Las pro-
piedades width (ancho) y height (alto) establecen las dimensiones, en pixeles, con
las que se muestra la imagen en pantalla.

Figura 26. Utilizar imágenes, en lugar de texto, para crear links, es una opción que puede
resultar más atractiva para el usuario y que, a su vez, brinda mejores alternativas para diseñar.

Agregar efectos a los links con CSS
Una opción para darle un estilo distinto o para decorar un enlace consiste en apro-
vechar las opciones que nos ofrece CSS, entre las que encontramos:
a:link: define las propiedades del link, cuando no ha sido visitado, ni tiene el mouse
sobre él, ni tampoco el foco. Es la opción predeterminada para mostrar un enlace cuan-
do carga la página por primera vez y no ha recibido ninguna acción del usuario.
a:visited: establece la apariencia de los enlaces que han sido visitados por el usuario.

www.redusers.com 41


a:focus: se utiliza para establecer cómo se muestra un enlace que tiene el foco sobre
él. Una manera de hacer foco sobre un enlace es, posicionados sobre la página acti-
va, pulsar la tecla TAB. Si bien esta alternativa no es muy utilizada, es una opción
que aún tiene validez y puede servir en algunos casos puntuales.
a:hover: esta opción se activa cuando el usuario pasa el mouse por encima del link.
Es, quizás, una de las acciones más comunes porque se considera de mucha utilidad.
a:active: se activa cuando el usuario hace clic sobre el enlace.
Entre las propiedades que se pueden aplicar a cada uno de estos estados, se en-
cuentran casi todas las opciones que ofrece CSS para un texto común, por ejem-
plo: pasar a negrita, cambiar el color, subrayar, cambiar el tamaño de la fuente,
etcétera. De manera habitual, estas opciones se definen junto con el estilo de tex-
to que se utilizará. En el siguiente listado, veremos un ejemplo de aplicación, que
nos permitirá comprender mejor el tema.

.MiEstilo {
font-family: Verdana, Arial, sans-serif;
color: #000000;
}
a:link {
text-decoration: none;
color: #2400ff;
}
a:visited {
color: #ff0000;
}
a:focus {
color: #001eff;
font-style: italic;
}
a:hover {
text-decoration: underline;
color: #8c7de7;
}

a:active {
color: #6a7cff;
}

42 www.redusers.com


El estilo que definimos en el listado anterior puede incluirse en el encabezado del
documento, entre las etiquetas <style type=”text/css”> y </style> o bien agregarse a
una hoja de estilos independiente. En el ejemplo, podemos ver que, en primer lu-
gar, definimos las características generales del texto —en este caso la fuente—, sus
reemplazos posibles y el color que tendrá aplicado de manera predeterminada. En
las siguientes líneas del código podemos apreciar cómo se especifica la forma en que
se debe mostrar un enlace según su estado. Por ejemplo, en a:link, definimos el co-
lor que tendrá de manera predeterminada el link y, también, especificamos que no
tendrá decoración, es decir que no se verá subrayado. Para los siguientes estados, de-
finimos que cambie el color. Además, para a:hover (cuando el mouse está encima
del enlace) indicamos que se muestre subrayado y para a:focus (cuando se hace fo-
co en el enlace) especificamos que se muestre el texto inclinado, con el estilo italic.

Figura 27. En algunos casos, puede ser una ventaja no utilizar el subrayado para un link, pero,
en otros, puede resultar más claro para indicarle al usuario que existe un enlace sobre ese texto.

CSS también nos permite trabajar con imágenes. Una alternativa que podemos utilizar
en las imágenes que tienen enlaces es aplicarles un borde y hacer que cambie su color
cuando el mouse pasa por encima. Para ello, primero definimos el siguiente código CSS.

#imagenenlace img {
border: 2px solid #333333;
border-width: 2px 2px 2px;
}

#imagenenlace a:hover img {
border: 2px solid #d4d4d4;
border-width: 2px 2px 2px;
color: #CCCCCC;
}

www.redusers.com 43


Cuando dentro de los estilos utilizamos # para definirlos, podemos usar su nombre
para referenciarlo en un objeto HTML, por ejemplo, con una capa. Debemos ha-
cer que coincida el nombre con la etiqueta id del objeto HTML. Para aplicarlo so-
bre una imagen, es posible incluirla en una capa y escribir el siguiente código:

<div id=”imagenenlace” align=”center”>
<a href=”http://www.direcciondejemploweb.com/”><img alt=”Texto de la
imagen” src=”img/imagen.jpg” longdesc=”Descripción de la imagen”/></a></p>
</div>

En el código, debemos reemplazar los valores de href, scr, img alt y longdesc, por
los que deseemos utilizar en la página web.

Figura 28. Cuando se aplica la propiedad alt a una imagen, en algunos navegadores,
por ejemplo en Internet Explorer, veremos el texto al pasar el mouse por encima.

¿QUÉ ES LA WEB 2.0?

A diferencia de lo que muchos piensan, la Web 2.0 no es un nuevo estándar de Internet, sino
un concepto que hace referencia a la evolución de la Web hacia un formato de mayor partici-
pación e interacción de los usuarios. La Web 2.0 está identificada con aplicaciones web, blogs
y redes sociales, entre otros servicios.

44 www.redusers.com

¿Qué aspectos deben considerarse para diseñar y establecer el formato de las tablas de un sitio?

Todos los efectos que se generen con CSS para los links pueden ser incluidos en una
hoja de estilo externa. La ventaja de utilizar esta opción es que, como hemos visto
antes, nos permite definir estilos que podrán ser utilizados en todas las páginas del
sitio si lo deseamos. Es importante destacar que, también, existen otras formas de
aplicar efectos a los enlaces utilizando Javascript, Flash u otros lenguajes o tecno-
logías disponibles para desarrollos de sitios web.

Figura 29. Adobe Flash es una aplicación que, entre sus funciones básicas,
permite crear links o botones, pero su potencia resulta mucho mayor,
ya que es una herramienta pensada para crear proyectos multimedia profesionales.

¿Qué aspectos deben considerarse para diseñar
y establecer el formato de las tablas de un sitio?
Las tablas son elementos HTML que se crean a través de la etiqueta
<table>. Para definir una fila, se utiliza <tr>, y <td> para crear una celda.
A las tablas, se les puede asignar un nombre y propiedades, como colores y bor-
des. A continuación, veremos un ejemplo de una tabla de países y ciudades.

<table width=”400” id=”Tabla 1”>
<tr>
<td><b>País</b></td>
<td><b>Ciudad</b></td>
</tr>
<tr>
<td>Argentina</td>
<td>Buenos Aires</td>

www.redusers.com 45


</tr>
<tr>
<td>Paraguay</td>
<td>Asunción</td>
</tr>
<tr>
<td>Uruguay</td>
<td>Montevideo</td>
</tr>
</table>

Como vimos, la tabla se abre con la etiqueta <table> y se cierra con </table>. Se
le asigna el nombre con la propiedad id. Se utiliza width para indicar el ancho
que ocupa la tabla. Este valor está expresado en pixeles.

Figura 30. Sin aplicarle ningún diseño, la tabla luce simple y muy poco atractiva.

Aplicar formato a una tabla
En el ejemplo anterior, describimos cómo se forma una tabla y sus características
básicas. Para enriquecer el aspecto de una tabla, se pueden aplicar propiedades de
código HTML o agregar un estilo CSS, opción que nos puede ser útil para repetir
el diseño en otras tablas de la página o del sitio.
Entre las características que se pueden establecer en una tabla, se encuentra su
alineación y la de los elementos contenidos en sus celdas. También es posible
definir estilos y grosores para sus bordes. Por último, existe la posibilidad de apli-
car imágenes o colores a las celdas o a la tabla en su conjunto. Si deseamos esta-
blecer el color de la tabla, podemos hacerlo por medio de la propiedad bgcolor,
dentro de la etiqueta <table>, por ejemplo:

<table width=”400” border=”0” cellspacing=”0” bgcolor=”#000099” id=”Tabla
1”>

46 www.redusers.com

¿Qué aspectos deben considerarse para diseñar y establecer el formato de las tablas de un sitio?

La propiedad bgcolor también puede ser aplicada a una celda si la utilizamos
con la etiqueta <td>.

<td bgcolor=”#99CCCC”><b>País</b></td>

Si lo que deseamos es aplicar una imagen, tanto a la etiqueta <table> como a <td>,
podemos agregarle la propiedad background e indicar la ruta del archivo de imagen
y su nombre, como vemos en el siguiente ejemplo:

<td background=”img/imagen.jpg”><b>País</b></td>

Figura 31. Cuando utilizamos una imagen de fondo para
una celda o una tabla, debemos tener en cuenta sus dimensiones
y colores para que no perjudique la lectura del texto mostrado.

Si buscamos una solución que nos sea útil para poder reutilizarla, en el listado
que veremos a continuación, definiremos un estilo CSS que nos permite apli-
carlo a una o a varias tablas de un sitio.

table.paises {
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
text-align:center;
background-color:#333333;
}
table.paises td{
border:2px solid #CCCCCC;
}

Con table.paises, definimos las propiedades de la tabla y su contenido. Con
table.paises td, definimos características específicas de las celdas, en este caso,
las propiedades de sus bordes.

www.redusers.com 47


Figura 32. Luego de aplicar las propiedades de CSS, la tabla cambia su aspecto
y obtenemos un resultado que podremos integrar en nuestro diseño.

¿Cómo es posible crear una capa
y ubicarla dentro de otra?
El concepto de capas se ha extendido en el ámbito informático a diferen-
tes tipos de aplicaciones. En lo que respecta específicamente al armado de una página
web, las capas o divisiones permiten manejar elementos de una manera independien-
te. Uno de los aspectos más destacado de una capa es que puede ubicarse con precisión
dentro de una página y, además, permite que se le asigne un estilo personalizado para
definir su aspecto. También, se le pueden aplicar propiedades de visibilidad, grados de
transparencia y orden como elemento en la página. La etiqueta que se utiliza para abrir
una capa o división es <div>, mientras que con </div> se cierra.
En el ejemplo que vemos a continuación, ubicaremos una capa en una página y
le aplicaremos una imagen de fondo.

<div style=”position:absolute; top:0px; left:0px; width:750px;
height:500px; background-image: url(img/fondo.jpg); background-repeat: no-
repeat”></div>

Con este listado, definimos una capa que se dibujará a partir de la esquina superior
izquierda de la pantalla, o de la división que la contenga; tendrá unas dimensiones

EDITORES DE CÓDIGO HTML VS. PROGRAMAS WYSIWYM

Muchas personas ligadas a la programación prefieren editar páginas HTML con un editor de códi-
go. Quienes provienen del mundo del diseño, por lo general, eligen aplicaciones WYSIWYM. Para
ofrecer una solución que pueda ser útil para todos, muchos programas WYSIWYM permiten traba-
jar con una vista de diseño, otra vista de código y, también, una vista que combina ambas opciones.

48 www.redusers.com

¿Cómo es posible crear una capa y ubicarla dentro de otra?

de 750x500 pixeles y utilizará una imagen de fondo que no se repetirá. Esta capa,
así definida, sólo mostrará la imagen de fondo. Si deseamos mostrar otros elemen-
tos dentro de ella, ya sean otras capas, tablas o cualquier otro objeto HTML, de-
bemos declararlos antes de cerrar con la etiqueta </div>.Todo aquello que quede
determinado dentro de este bloque se moverá y ajustará de acuerdo con las di-
mensiones y la posición que adquiera la capa que lo contiene. Si deseamos mos-
trar una capa dentro de otra, podríamos hacerlo con <div><div></div></div>. Con
esta opción, creamos capas anidadas vacías y sin propiedades. A cada una de ellas,
podemos asignarle las características que deseemos.

Figura 33. Dentro de un <div> se pueden incluir otros elementos, como por ejemplo
un texto, una imagen, una tabla o incluso, otros contenidos multimedia.

Antes de continuar, debemos detenernos un instante en el valor de position. De ma-
nera predeterminada, su valor es static, es decir que los elementos se presentan en
pantalla uno a continuación del otro, tal como lo definimos en el código que ge-
neramos. Si asignamos un valor relative, las coordenadas de los elementos se fijarán
a partir de la posición que les correspondería por el flujo. Si optamos por utilizar
absolute, podremos asignar una posición sin tener en cuenta cómo se encuentren
ubicados los elementos en el flujo. Como vemos en el ejemplo, al tener en cuenta
el contenedor, la posición se puede establecer con top y left, entre otras opciones.
En la práctica, deberemos decidir en qué casos es conveniente anidar capas y cuando te-
nerlas independientes. Una posibilidad muy útil es ordenarlas por medio de la opción
z-index, que es la que permite determinar el orden en el que se superponen o apilan las
capas. Esta propiedad hace que un elemento se ubique dentro del eje Z, es decir, el que
da la profundidad para los objetos tridimensionales. Puede tener asignado un valor
numérico que, al ser menor que el de otro, indicará que el elemento está más atrás.

www.redusers.com 49


Figura 34. La posibilidad de controlar el orden de las capas puede tener
variadas aplicaciones, por tal motivo, es importante comprender cómo debe
utilizarse z-index, porque puede ayudarnos a solucionar muchos problemas.

La alternativa de utilizar frames
Si bien, hoy en día, está en auge la utilización de la etiqueta <div>, cabe recordar
que también es posible mostrar páginas HTML dentro de otras, con la opción
que ofrecen los marcos o frames. Con esta alternativa, se puede dividir la pági-
na en áreas o subventanas con un elemento contenedor que defina el conjunto
con la etiqueta <frameset> y cada uno de sus marcos con <frame>. La ruta del do-
cumento que será incrustado se determina por medio del atributo src.

Figura 35. Los frames o marcos no son tan utilizados
como hace algunos años en el diseño web, ya que existen
otras alternativas que brindan mayor versatilidad.

50 www.redusers.com

¿Es posible mostrar una capa con una transparencia de fondo?

Por otra parte, con la etiqueta <iframe>, podemos incorporar otro documento del
mismo tipo, como si se tratara de un nuevo elemento flotante. Además de la ruta
del documento, puede tener asignadas dimensiones, bordes y propiedades de trans-
parencia, entre otras opciones. La utilización de marcos puede presentar algunos
problemas de compatibilidad con navegadores antiguos.

Figura 36. Para saber más sobre la utilización de frames,
podemos ingresar en www.w3.org/TR/html401/present/frames.html.

¿Es posible mostrar una capa
con una transparencia de fondo?
Como vimos en el punto 9, las capas pueden tener asignadas diferentes
propiedades. Una alternativa que resulta de suma utilidad en el diseño de una pá-
gina web consiste en asignarle, a uno o más elementos, un grado de transparencia,
para permitir que se vea de manera parcial un fondo. A esta función es posible dar-
le diversas aplicaciones prácticas, pero, al utilizarla, es importante contar con los ele-
mentos de la página ordenados con la función z-index, que ya hemos visto. Para uti-
lizar esta opción con transparencias, si hay una imagen de fondo, debería tener el
menor valor, luego le seguiría la capa transparente y, por último, la capa que debe
quedar arriba, por ejemplo, un texto, como se muestra en la figura 34.
Otro aspecto importante es la elección del color que se aplicará a la capa y có-
mo se representa según el grado de transparencia que se le aplique. En primer
lugar, definimos el estilo CSS para la capa; para ello, utilizamos las opciones que
permitan que el efecto funcione en todos los navegadores.

www.redusers.com 51


#CapaTransparente {
z-index: 2;
background-color: black;
opacity: 0.3;
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
filter: alpha(opacity=30);
}

La propiedad background-color define el color que se utilizará para la transparencia,
en este caso, está asignado black (negro). Cuanto menor sea el valor aplicado a las pro-
piedades de transparencia, menos opaco será el objeto. Por ejemplo, un elemento con
opacidad 0, no será visible; por el contrario, si tiene las propiedades de opacidad en 1
(o 100 en el filtro alpha), en ese caso será totalmente opaco. A continuación, veremos
las características de cada una de las propiedades utilizadas en el listado.

- opacity: define el nivel de transparencia estándar. Se utiliza, por ejemplo para Opera.
-moz-opacity: es una propiedad específica para la familia de navegadores que utili-
zan el código Mozilla.
- khtml-opacity: se utiliza para los navegadores que utilizan el framework WebKit,
por ejemplo Google Chrome, Safari y Konqueror.
- filter: alpha: se utiliza para lograr compatibilidad con la familia de navegadores
Microsoft Internet Explorer. También puede aplicarse de la siguiente manera:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30).

Para aplicar el estilo creado a una capa, lo asignamos a la id y luego ubicamos nor-
malmente la capa dentro del diseño de nuestra página.

<DIV id= “Layer2” STYLE=”position:absolute; top:155px; left:200px;
width:500px; height:378px;”></div>

LA TRANSPARENCIA DE LOS MATERIALES

La transparencia de un material está dada por las características que presenta para dejar
pasar la luz. Se dice que un elemento es opaco cuando no permite que la luz pase a través
de él. Por otra parte, un objeto translúcido permite pasar la luz, pero no deja ver de mane-
ra definida lo que hay del otro lado.

52 www.redusers.com

¿Es posible mostrar una capa con una transparencia de fondo?

Figura 37. El efecto de transparencia es ideal para utilizarlo, por ejemplo,
con una imagen de fondo y un texto encima. Siempre es conveniente
que el texto tenga un tamaño y color que lo mantenga legible.

Debemos tener en cuenta que todo lo que se encuentre contenido dentro de la eti-
queta <div> tendrá asignada las características de transparencia. Por este motivo, por
lo general, será recomendable el manejo de manera independiente de la capa con trans-
parencia, para no afectar otros elementos de la página que no deseemos que tomen
estas características. Es importante destacar que el efecto de transparencia también
puede utilizarse en otros elementos a los que pueden aplicarse estilos, como las tablas.

Figura 38. Algunos navegadores, como Internet Explorer 6, pueden mostrar
un alerta y bloquear el efecto de transparencias en páginas ubicadas
en el equipo local. Al publicarlas en Internet, no se mostrará el mensaje.

www.redusers.com 53


¿En qué casos se recomienda diseñar una página
con dimensiones fijas y cuándo, con porcentuales?
Hace algunos años, el estándar de monitores estaba dado por panta-
llas de 14”, que, por lo general, se configuran en resoluciones de 640x480 pixe-
les o en 800x600 pixeles. La llegada de los monitores de 17” impuso el estándar
de 1024x768 pixeles, respetado por muchos sitios web hoy en día. Los nuevos
monitores ya han superado la marca de las 17” y también el formato. Las di-
mensiones estándares de pantallas con relación 4:3 (como los televisores anti-
guos), están dando paso a los modelos wide screen de relación 16:9.

Figura 39. Las pantallas wide, como su nombre lo indica,
son más anchas que las estándares (4:3), permiten mostrar
un área similar a la que ofrece el cine, pero en dimensiones menores.

Estas características, sumadas a que, en la actualidad, se encuentran pantallas de
19”, 20”, 22”, entre otras alternativas, hace que exista una gran variedad de ta-
maños y, por ende, de resoluciones de pantalla, ya que cada una de estas opcio-
nes tiene asociada una resolución recomendada.
El dilema de tener que diseñar un sitio sin saber en qué pantalla será visualizado in-
fluye en el diseño que vamos a realizar. Quienes deciden inclinarse por un diseño
con dimensiones fijas utilizan como unidad de medida el pixel. Para lograr mayor
compatibilidad, se puede optar por diseñar en una medida de 800x600 pixeles, sin
embargo, en la actualidad, cada vez más diseñadores toman como estándar la reso-
lución 1024x768, impuesta por los monitores estándares de 17 pulgadas.

54 www.redusers.com

¿En qué casos se recomienda diseñar una página con dimensiones fijas y cuándo, con porcentuales?

Figura 40. Si bien no es necesario contar con una placa de video
de última generación para realizar un diseño web, es importante
que esta nos permita visualizar la mayor cantidad de resoluciones posibles.

Figura 41. La resolución de pantalla debe ser soportada tanto por la placa de video,
como por el monitor. De lo contrario, no tendremos una visualización adecuada.

Cualquiera sea la opción que tomemos en el diseño, es recomendable poner un co-
lor o una imagen de fondo que logre armonía con el sitio, ya que en las pantallas
de más resolución se verá en mayor extensión, en especial hacia los costados.

www.redusers.com 55


Figura 42. Al visualizar un sitio en diferentes resoluciones de pantallas
y versiones de navegadores, el fondo puede verse en algunos casos
y en otros no, según la configuración del equipo.

El lenguaje HTML nos permite trabajar con medidas porcentuales en diversos ele-
mentos, como puede ser en tablas y capas. Por ejemplo, es posible establecer que
una tabla ocupe el 80% del espacio que tiene disponible en su contenedor (por ejem-
plo un <div>) en lugar de definir su medida exacta en pixeles.
Como podemos darnos cuenta, la ventaja de utilizar un valor porcentual para los ele-
mentos que componen una página web es que se adaptarán según las dimensiones
que les ofrezca la pantalla. Además, con un diseño adecuado, utilizando valores por-
centuales, se puede aprovechar el máximo espacio disponible en cada una de las
resoluciones. En cambio, al hacerlo fijo, desaprovechamos parte del área de pantalla
si el usuario no tiene configurada la resolución para la cual fue optimizado el sitio.
La desventaja de utilizar medidas porcentuales en el diseño reside en que los ele-
mentos pueden modificarse de tal forma que aparezcan movidos en la pantalla,

56 www.redusers.com

¿En qué casos se recomienda diseñar una página con dimensiones fijas y cuándo, con porcentuales?

si no contemplamos todos los aspectos del diseño. Al igual que las dimensiones
expresadas en pixeles, el porcentaje puede aplicarse a las propiedades width (ancho)
y height (alto) de los elementos que lo admitan.
Dentro de una misma página web, pueden utilizarse medidas en pixeles o en por-
centaje, aunque hay que evaluar con cuidado en qué casos puede ser útil optar
por esta alternativa. Para indicar que un valor está expresado en pixeles, se utili-
za px, por ejemplo: height=”100px”. Para establecer que el valor es porcentual,
se usa el símbolo %, por ejemplo: width=”10%”.
Como veremos en el punto 13 de este capítulo, más allá de la decisión que to-
memos en cuanto a utilizar medidas porcentuales o fijas, es fundamental que el
sitio se muestre centrado en todas las resoluciones de monitores ya que, de lo
contrario, el diseño no lucirá de la mejor manera.

Figura 43. Si ingresamos en www.w3counter.com/globalstats.php, podremos
conocer estadísticas actualizadas, mes por mes, sobre los navegadores
y resoluciones de pantalla más utilizadas por los usuarios.

❘❘❘
¿QUÉ ES UN PIXEL?

Pixel es una palabra que proviene del término inglés picture element y que hace referencia a la
unidad de color más pequeña que conforma una imagen digital. Para representar un color, ca-
da pixel puede tomar un valor diferente, que está dado por la profundidad de color de la ima-
gen. Por ejemplo, una profundidad de 24 bits permite 16.777.216 colores.

www.redusers.com 57


¿Cuál es la mejor forma de establecer los
márgenes de una página y sus elementos?
En la tabla 2 de este capítulo, cuando hablamos de atributos CSS, hicimos
referencia a margin y a padding. El primer concepto se refiere al margen de un elemento
y, como vimos, puede establecerse para cada uno de los lados (arriba, abajo, izquierda
o derecha). Por otra parte, padding se utiliza para definir el espacio en el interior de un
elemento y, también, se asigna a cada uno de los lados. Sus valores pueden estar ex-
presados en porcentaje, pulgada o pixel. Muchas veces, estos dos conceptos suelen con-
fundirse porque, en algunos diseños, ofrecen resultados similares; sin embargo, resulta
relevante saber en qué casos es recomendable optar por uno o por otro.

Figura 44. Definir los valores de margin y padding nos puede ser muy útil especialmente
en sitios donde trabajamos con varias columnas de texto, para que no quede encimado

Para comprender este tema de una manera sencilla, pensemos en una alternativa
que podemos encontrar, de forma cotidiana, al diseñar un sitio. Por ejemplo, ve-
amos qué ocurre con un rectángulo que, en su interior, tiene un texto. Debemos
tener en cuenta que el rectángulo se encuentra dentro de una página que también
posee sus bordes, por lo cual, podríamos pensar que el rectángulo se encuentra
dentro de otro rectángulo que, en este caso, es la página. La distancia que hay en-
tre el borde de la página y uno de los lados del rectángulo es el margen (margin),
que puede ser superior, inferior, derecho o izquierdo. Ahora bien, el espacio que
existe entre los lados del rectángulo y el texto interior es lo que se conoce como
padding. Para entender aún mejor esto, debemos pensar que el texto está envuel-
to en su propia caja imaginaria o caja de texto.

58 www.redusers.com

¿Cómo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla?

● MARGIN Y PADDING DE UN SITIO GUÍA VISUAL

Contenido: espacio donde se ubica el texto o el elemento que actúa como contenido.
Padding: espacio entre el contenido y el borde del objeto contenedor.
Borde contenedor: es la línea que determina los límites del objeto contenedor
(puede estar visible o no).
Margin: determina la distancia entre el objeto contenedor y la ventana.
Borde de la ventana: es el borde del área de representación de la página
web en el navegador.

Una vez que comprendemos estos conceptos, será nuestra tarea aplicarlos según lo que
deseemos lograr en nuestro diseño. Por ejemplo, establecer un valor de padding suele
ser muy útil para evitar que un texto interior se vea muy encimado sobre las líneas de
una caja. En cambio, margin puede ser útil si pretendemos separar columnas.
En algunos casos, estas opciones pueden trabajar en forma conjunta para ofrecer
mejores resultados.

¿Cómo solucionar los problemas de centrado
del sitio web en diferentes resoluciones de pantalla?
El problema de centrado de una página web es uno de los más frecuentes
para un diseñador. Si recorremos sitios de Internet, y los visualizamos en diferentes re-
soluciones de pantalla -es diferente cuando comparamos monitores de proporciones
16:9 con los de 4:3-, descubriremos que, en muchas ocasiones, este problema no está
resuelto de una forma adecuada para ser compatible con las necesidades de todos los
usuarios. En este punto, analizaremos las soluciones posibles.

www.redusers.com 59


Figura 45. El problema de centrado puede ser imperceptible para algunos usuarios,
pero un buen diseñador no debe omitir nunca este tema en sus trabajos.

En algunos casos, para solucionar los problemas de centrado, puede ser suficiente
asignar el atributo de centrado a una capa para que los elementos contenidos se
muestren de esa manera. Esto sería: <div align=”center”>.
Sin embargo, en diseños que puedan presentar ciertos aspectos más complejos,
deberemos tener en cuenta algunos conceptos adicionales. En primer lugar, es
importante destacar que, además de las diferencias entre las distintas configura-
ciones posibles de pantallas, también hay diferencias entre los diferentes tipos de
navegadores, tema sobre el cual profundizaremos en el capítulo 3 de este libro.
Sin olvidar esto, para resolver un problema de centrado de una página, podre-
mos aprovechar las ventajas que brinda CSS. Para lograrlo, definiremos una
capa que actuará como contenedora de los elementos o bien de las demás capas
que formen parte de la página. A continuación, veremos un ejemplo, que puede
agregarse a la sección de estilos o en el archivo de estilos externo.

body {
background-color: #778f92;
margin: auto;
background-image: url(fondo.jpg);
background-repeat: repeat-x;
background-attachment:fixed;
background-position: 0px 0px;

60 www.redusers.com

¿Cómo solucionar los problemas de centrado del sitio web en diferentes resoluciones de pantalla?

}

#contenedor
{
position:relative;
left:0px;
width:900px;
height:100%;
margin: 0px auto;
text-align:center;
}

Para body, definimos una imagen que se repetirá durante el eje X. Para ese ejemplo,
puede utilizarse un JPG de 4 ó 5 pixeles de ancho, y entre 600 y 650 pixeles de lar-
go. Puede armarse como un degradado, en el cual el último pixel inferior coincide
con el color de fondo (background-color).
Las propiedades de centrado de los elementos se encuentran en #contenedor. En
este caso, definimos un ancho fijo (900px) y una altura porcentual para abarcar
toda la página (100%). Con las líneas margin: 0px auto; y text-align:center;, lo-
gramos que el contenido se muestre centrado en los navegadores más populares,
como Internet Explorer y Mozilla Firefox.

Figura 46. Podemos ajustar de diferente manera los márgenes, según
nuestras necesidades de diseño, pero lo fundamental es obtener un diseño
centrado que se vera de manera adecuada en todos los navegadores.

www.redusers.com 61


¿Cuáles son las diferentes opciones de menús
que se pueden crear al utilizar CSS?
Los menús son elementos que, desde hace muchos años, se han ganado
un importante lugar en el armado del entorno gráfico de las aplicaciones informá-
ticas. Con el auge de Internet y la necesidad de brindarles a los usuarios una ma-
nera práctica y ordenada de acceder a la información, éstos se convirtieron en una
herramienta muy importante a la hora de crear interfaces para sitios web.
De igual forma que ha ocurrido con las aplicaciones, los menús para sitios webs han
evolucionado, tanto en las funcionalidades que pueden brindar, como también en
el diseño que ofrecen para ser más atractivos al público.
Con los conceptos que aprendimos en el punto 7 de este capítulo, conocimos cómo
aplicar diferentes opciones de estilos a un link. Así podemos darnos cuenta, que esos
efectos son muy similares a los que se utilizan con frecuencia para crear un menú.
Como ya hemos explicado anteriormente, una de las ventajas del CSS consiste
en permitir la separación de la estructura del diseño. Por este motivo, si creamos
un menú HTML, pero basado su aspecto visual en estilos CSS, podremos reali-
zar cambios de una manera más sencilla.

Diseñar un menú con estilos CSS a partir de una lista
En este ejercicio, en primer lugar, crearemos el contenido del menú, utilizando las
etiquetas de lista que ofrece HTML. El siguiente listado se ubicará dentro del cuer-
po del documento en el lugar donde debe aparecer el menú.

<ul>
<li>Elemento 1 de menu</li>
</ul>

La etiqueta <ul> se utiliza para definir una lista conformada por elementos que, a su
vez, se envuelven con la etiqueta <li>. Para agregar un link a los elementos, simple-
mente, recurrimos a la etiqueta href, y la utilizamos de la forma que ya hemos visto.

Figura 47. Si visualizamos el ejemplo que preparamos en un navegador,
veremos que aún el resultado está lejos de parecer un menú.

62 www.redusers.com

¿Cuáles son las diferentes opciones de menús que se pueden crear al utilizar CSS?

Para lograr que ese simple listado tenga el aspecto de un menú, debemos definir los
estilos necesarios mediante CSS. Si el estilo lista no nos desagrada, pero deseamos
mejorarlo, podemos recurrir a la siguiente alternativa.

#EstiloMenu {
list-style-type:square;
}

Con list-style-type, definimos el tipo de viñeta por utilizar. En este caso, definimos
un cuadrado (square), pero también podemos determinar un círculo (circle), ningún
objeto (none). También es posible utilizar una imagen pequeña, si cambiamos la lí-
nea por list-style-image:url(imagen.gif). El valor que aparece entre paréntesis debe
ser modificado por la ruta y el nombre de la imagen que deseamos incluir.
Ahora que conocemos la opción más simple, veremos cómo mejorar el aspecto
visual del menú para, por ejemplo, mostrarlo de manera horizontal, con una ima-
gen de fondo, otra posibilidad también puede ser un color, y con un efecto al
pasar el mouse por encima de los elementos.

#EstiloMenu {
width: 900px;
height: 40px;
background: #c3c3c3 url(“fondoMenu.gif”);
background-repeat: repeat-x;
}

#EstiloMenu ul {
list-style: none;
margin: 0;
padding: 0;
}

#EstiloMenu li {
float: left;
border-right: 1px solid #c3c3c3;
border-left: 1px solid #fff;
}

#EstiloMenu li a {
display: block;

www.redusers.com 63


color: #515e5e;
font-family: Verdana, Arial, Helvetica;
font-size: 11px;
font-weight: 500;
padding: 10px 7px 10px 7px;
}

#EstiloMenu li a:hover {
color: #fff;
background: #819292;
}

Para aplicar el estilo, podemos ubicar el listado en una capa, a la cual le asigna-
mos id=”EstiloMenu”.

Figura 48. El resultado de aplicarle un estilo a la lista le da una verdadera apariencia de menú.

Como podemos ver en la figura 48, para este ejemplo creamos un menú hori-
zontal. En #EstiloMenu, definimos el ancho (width), el alto total del menú
(height), la imagen que tendrá de fondo y un color con background. También
definimos que se repita en el eje X con la propiedad background-repeat.
En #EstiloMenu ul, definimos que no tenga viñetas y los valores de margin y
padding, en este caso lo indicamos en 0.
En #EstiloMenu li, al utilizar la opción float: left;, indicamos que los ítems aparez-
can uno al lado del otro, es decir, de manera horizontal. Luego definimos el grosor,
el color y el estilo de los bordes laterales con las propiedades border-right y border-
left, también podríamos trabajar sobre los otros bordes si lo deseáramos.
Con #EstiloMenu li, definimos las propiedades que tendrá el elemento del menú,
el cual será un enlace a una página interna, a otra página o bien a un recurso de

64 www.redusers.com

¿Cuáles son las diferentes opciones de menús que se pueden crear al utilizar CSS?

Internet. Se pueden aplicar todas las características de texto que hemos visto en
CSS: color, tipografía, etcétera. En este caso, se agrega display: block; para lograr
que se vea cada ítem como un bloque, o bien como un botón.
Como podemos ver, #EstiloMenu li a:hover nos permite definir las características que
tomará el elemento del menú cuando el mouse pase por encima, en este caso, el co-
lor de fondo que tendrá el texto, es decir, el botón.

Figura 49. Cuando incorporamos el menú en nuestro sitio,
debemos asegurarnos de que se integre de manera adecuada con el diseño.

Otras alternativas para crear un menú
Crear un menú utilizando HTML y aplicando estilos con CSS tiene muchas ven-
tajas, incluso de cara al posicionamiento de un sitio, como veremos en el
capítulo 6. Pero también existen otras alternativas que nos brindan interesantes
prestaciones, como por ejemplo, los menús creados con Flash o con código
Javascript. Para quienes no conocen Flash, pero desean contar con una botonera,

❘❘❘
¿QUÉ SIGNIFICA URL?

El término Uniform Resource Locator, abreviado habitualmente como URL, hace referencia a una
cadena de caracteres que se utilizan para identificar un recurso informático que puede estar alo-
jado en un servidor. En Internet, se utiliza para ubicar la dirección donde se encuentra un archi-
vo, por ejemplo, una imagen o un documento HTML.

www.redusers.com 65


pueden probar lo que ofrece el sitio http://flash-menu.net. Allí encontramos la
posibilidad de descargar una herramienta para generar nuestro propio menú o
para acceder al generador en línea que ofrece el sitio.

Figura 50. Con la versión online del generador, podremos acceder a una buena cantidad
de opciones para crear un menú que luego puede ser guardado en formato SWF.

Si buscamos alternativas con una mayor variedad de posibilidades, encontramos
Flash Menu Labs, una aplicación que puede obtenerse en versión de prueba si
ingresamos en su sitio web http://flashmenulabs.com.

Figura 51. En la sección Examples, podremos ver algunos
ejemplos muy interesantes de las creaciones
que es posible realizar con Flash Menu Labs.

66 www.redusers.com

Diferencias entre HTML, XHTML y CSS

Diferencias entre HTML, XHTML y CSS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Similar a Diferencias entre HTML, XHTML y CSS

Similar a Diferencias entre HTML, XHTML y CSS (20)

Más de Roberto Cordova Coral

Más de Roberto Cordova Coral (10)

Último

Último (20)

Diferencias entre HTML, XHTML y CSS