<FONT>

La marca tipográfica FONT es una de las más utilizadas y frecuentes en el actual web publishing. En la
sección Impostar el fondo del documento (elemento BODY), hemos visto que el atributo TEXT da un
color único a todo el texto del documento. La marca FONT tiene, en parte, una función similar, aunque
es mucho más amplia y conceptualmente diversa.

La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento
específicos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto comprendido
dentro quedaría formateado tal y como estuviera indicado. Sin embargo, conceptualmente la marca
FONT ha sido concebida para definir partes limitadas de texto. Por otro lado, mientras TEXT determina
tan sólo en color del texto, la marca FONT puede definir el tipo utilizado, así como su tamaño y color.
Aquí tienes la sintaxis correcta de la marca:

<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT>

El atributo FACE="arial" indica el tipo que se visualizará; SIZE=5 el tamaño del tipo, que puede estar
comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7); COLOR=red indica el color del
texto (que puede expresarse asimismo en valores hexadecimales).

Para un ejemplo práctico, haz clic aquí

<B>, <I>, <U>

<B>, <I>, <U> son tres de las marcas de formatación tipográfica más usadas del HTML. Todas ellas
deben constar de apertura y cierre:

<B> Texto en negrita </B>

El texto comprendido entre estas marcas queda formateado en negrita (la B corresponde al inglés
BOLD).

<I> Texto en cursiva </I>

El texto comprendido entre estas marcas queda formateado en cursiva (la I corresponde al inglés
ITALIC)

<U> Texto subrayado </U>

El texto comprendido entre estas marcas queda subrayado aun sin ser un enlace (la U corresponde al
inglés UNDERLINE).

Atributos de la etiqueta <IMG>

A la etiqueta <IMG> se le pueden añadir varios atributos para controlar la manera en que un navegador
administra una imagen. Estos atributos son los siguientes:
 width="x" Permite al navegador predeterminar el ancho, en pixles, que tendrá tu imagen.
height="x" Junto con el atributo width, el navegador puede preparar el espacio necesario para tu imagen
antes de que se muestre.
border="x" Para añadir o eliminar un borde, donde la x será un valor numérico.
align="xxx" Puedes alinear una imagen horizontal y/o verticalmente en una página usando este atributo.
alt="descripción_de_la_imagen" El atributo alt te permite describir la imagen para los navegadores de
sólo texto, así como etiquetar la imagen antes de que se cargue en una página.
hspace="x" horizontal space, se usa para añadir espacio vacío, con un valor numérico, en la coordenada
horizontal de una imagen.
vspace="x" vertical space, controla el espacio de la imagen en las coordenadas verticales.

NOTA

Para información sobre los atributos ISMAP y USEMAP usados para el mapeado de imágenes, mira el capítulo
"Diseñando gráficos especiales".

Vamos a ver más profundamente cada uno de estos atributos.

WIDTH y HEIGHT

Dos consejos básicos para el uso de estas etiquetas:

1. Pon siempre los atributos width y height en tu etiqueta IMG. Esto ayuda al navegador a administrar los
datos de imágenes a lo largo de la página.
2. Nunca uses valores imprecisos de width y height en tu imagen. Estos valores deben ser siempre
exactos, o harás que el navegador muestre imágenes distorsionadas en la pantalla.

Pero puedes estar pensando: he visto páginas WEB con imágenes pequeñas que al pulsar sobre ellas se hacen
más grandes. Esto es una gran idea, inteligente, pero muy problemática.

Esto es debido al tamaño que ocupa la imagen descargada del servidor. Normalmente, se suelen poner
imágenes de pequeño tamaño (30 kb por ejemplo) que al pulsas sobre ellas aparece una imagen mucho
mayor (digamos, 150 kb). Para hacer la imagen primera, la pequeña, NO hay que usar los valores width y
height. Si intentamos hacer una imagen de 150 kb más pequeña usando los valores width y height, seguirá
ocupando 150 kb. En vez de eso, hay que reducirla de tamaño usando programas como Adobe Photoshop, con
la utilidad de cambiar el tamaño de imagen. Para los usuarios de FrontPage, también pueden hacer estos 2
pasos: primero redimensionar la imagen y hacerla más pequeña, y segundo pulsar sobre el botón "Nuevo
Muestreo" en la barra de herramientas Imagen.

En resumidas cuentas, aquí tienes ejemplos de estos atributos usados de forma adecuada:

Usando píxeles:
 <IMG SRC="maxilogo.gif" WIDTH="160" HEIGHT="32">

<IMG SRC="maxilogo.gif" WIDTH="100" HEIGHT="32">

En porcentaje

Es muy poco utilizado, y solo vale para casos muy concretos, por ejemplo, para hacer líneas horizontales
con imágenes. Aquí tienes un ejemplo con la imagen anterior, pero distorsionada:

<IMG SRC="maxilogo.gif" WIDTH="80%" HEIGHT="32">

Para ver el ancho y alto exactos de tu imagen, míralos con tu programa de imágenes (en el capítulo
"Herramientas para gráficos del Web"). Otro método es abrir las imágenes con Explorer 5.0, en el cual las
imágenes aparecerán en las "Propiedades" tras pulsar con el botón derecho sobre ella, o con Netscape en el
cual las dimensiones aparecen en la barra de título del programa.

NOTA

Cuando diseñes tus gráficos, deberías de darles el tamaño adecuado para la web. Puedes aprender cómo hacer
esto en el capítulo "Creando gráficos profesionales para el web".

Bordes de imagen

Los bordes alrededor de las imágenes están predeterminados en los navegadores, especialmente si la imagen
está enlazada con otra imagen o un archivo. Si no está enlazada, lo predeterminado es que no tenga borde.
Los bordes pueden quedar totalmente antiestéticos según el diseño de la página.

Para asegurarte de que tus gráficos nunca muestren bordes, hay que usar el valor 0 en el atributo border=

<IMG SRC="maxilogo.gif" WIDTH="160" HEIGHT="32" BORDER="0">

Esto dirá a los navegadores que no muestren ningún tipo de borde alrededor de tu imagen, especialmente útil
para aquellos navegadores antiguos que muestren bordes alrededor de las imágenes de forma
predeterminada.

Aquí tienes unos ejemplos de sustituir el 0 por otro valor numérico en este atributo:
<IMG SRC="cambiar.jpg" BORDER=1>

<IMG SRC="cambiar.jpg" BORDER=2>

<IMG SRC="cambiar.jpg" BORDER=3>

Alineación

Hay muchas maneras de alinear una imagen dentro de la página. Horizontalmente, está predeterminada la
alineación a la izquierda para una imagen y cualquier otro tipo de objeto solitario. Puedes usar el valor de
alineación left (útil en casos en el que el texto rodea a la imagen, por ejemplo), o el valor right. Ejemplos:

<IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95" BORDER="0"

ALIGN="LEFT">

<IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95" BORDER="0"

ALIGN="RIGHT">

NOTA

Debes usar otro método para centrar las imágenes, por ejemplo, la etiqueta DIV (mira el tema de las hojas de
 estilo), o centrando el párrafo:

<P ALIGN="center"><IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95" BORDER="0"></P>

Mientras que la alineación horizontal se hace con los valores de left y right, la alineación más empleada,
también puedes usar el atributo alignpara alinear una imagen verticalmente.

Como estándar, los navegadores soportan estos tres valores:

top Este coloca la imagen en la parte más superior de la línea de texto (valor por defecto)
middle La imagen ahora estará alineada con el centro de la línea de texto
bottom Con este valor, la imagen será alineada con la parte inferior de la línea de texto

Hay otros valores específicos de los navegadores, por ejemplo texttop (en la parte de arriba del texto más alto
o imagen que esté en la línea de textp), absmiddle (alinea la imagen con la mitad más absoluta del texto o
imagen que le rodee), baseline (igual que bottom) y absbottom (el cual alinea la parte de abajo de la imagen
con la parte más baja de la imagen o texto que le rodee).

Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="TOP"> está alineada.

Esta imagen está alineada

Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="MIDDLE"> está

alineada.

Esta imagen está alineada

Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="BOTTOM"> está

alineada.

Esta imagen está alineada

Estos valores son útiles algunas veces, pero no muy usados. De hecho, el alineamiento vertical de las
imágenes usando el atributo align está reservado a situaciones en las que se requiere alineación precisa. En
el HTML 4.0, tales alineamientos se hacen mejor con tablas o, sobre todo, hojas de estilo.
El atributo ALT

Este importante atributo te permite colocar una descripción a las imágenes. Por ejemplo:

<IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0"

ALIGN="RIGHT" ALT="Dibujo de una bandera">

Para aquellos casos individuales donde no estén disponibles los gráficos (si se usan navegadores de sólo texto
con imposibilidad de mostrar imágenes, recursos limitados de Internet, o aquellas personas que navegan por
la web con la opción de mostrar gráficos desconectada, el atributo alt ofrece una estupenda forma de escribir
una visión natural de lo que es la imagen.

El descripción de alt aparecerá en otras dos circunstancias. Una es un página en la que se cargan los gráficos.
La descripción se mostrará antes de que se cargue el archivo asociado. Esta es una manera muy interesante
de mantener informados a los navegantes de lo que posteriormente verán. Las descripciones definidas con
este atributo también aparecen cuando el puntero del ratón pasa por encima de la imagen (pruébalo en el
ejemplo de la bandera anterior). Esta información visual extra puede ser interesante para un diseño web.

Deberías usar este atributo con una única excepción: cuando una imagen tiene un único píxel en alguna de
sus dimensiones usada para corregir algunas colocaciones en el diseño del web. En este caso, el
atributo alt puede ser dejado en blanco o simplemente eliminado. Muchos desarrolladores de webs prefieren
dejar este atributo en su lugar pero sin ninguna información entre las comillas.

<IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0"

ALIGN="RIGHT" ALT="">

Espaciado horizontal y vertical

Los valores para hspace y vspace son numéricos. Para que podamos ver bien el efecto, vamos a usar unos
valores muy altos para estos atributos.

Una bandera <IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0"

ALT="Dibujo de una bandera">

Una bandera
Una bandera <IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0"
ALT="Dibujo de una bandera" HSPACE="20">

Una bandera

Una bandera <IMG SRC="bander.gif" WIDTH="86" HEIGHT="59" BORDER="0"

ALT="Dibujo de una bandera" VSPACE="20">

Una bandera

Existe también la marca STRIKE para el texto tachado:

<STRIKE> Texto tachado </STRIKE>

Tipo de letra Ejemplo (sólo las verá si las tiene instaladas en su dispositivo)

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su whisky al desagüe de la banqueta.
Agency FB
0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Antiqua
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Architect
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose,

Arial
Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
BankFuturistic
whisky al desagüe de la banqueta. 0123456789

BankGothic
ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
 whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Blackletter
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Calibri
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose,

Comic Sans
Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú.

Courier
Excusándose, Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose,

Cursiva
Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Decorativa
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose,

Fantasía
Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Fraktur
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Frosty
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Garamond
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía

Georgia
tiró su whisky al desagüe de la banqueta. 0123456789
 ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose,
Helvética
Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su whisky al
Impact
desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Minion
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose,

Modern
Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú.

Monoespaciado
Excusándose, Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose,

Palatino
Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Romana
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose,

Palo seco
Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Gracia
whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose,

Script
Sofía tiró su whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Suiza
whisky al desagüe de la banqueta. 0123456789

Times
ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
 whisky al desagüe de la banqueta. 0123456789

Times New ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Roman whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú. Excusándose, Sofía tiró su
Tw Cen MT whisky al desagüe de la banqueta. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ José compró una vieja zampoña en Perú.

Verdana
Excusándose, Sofía tiró su whisky al desagüe de la banqueta. 0123456789