Lección 3

Formatos de texto

En este capítulo veremos los distintos formatos que se le pueden dar al texto. Empezaremos con lo básiko: negrita, cursiva... y acabaremos con la etiqueta FONT.

Negrita:Etiqueta (bold). Ejemplo: DIV Games StudioDIV Games Studio
Cursiva:Etiqueta (italic). Ejemplo: DIV Games StudioDIV Games Studio
Subrayado:Etiqueta (underline). Ejemplo: DIV Games Studio DIV Games Studio
Grande:Etiqueta <BIG> (big). Ejemplo: <BIG>DIV Games Studio</BIG>DIV Games Studio
Pequeño: Etiqueta (small). Ejemplo: DIV Games Studio DIV Games Studio
Máquina de escribir:Etiqueta <TT> (typewriter). Ejemplo: <TT>DIV Games Studio</TT> DIV Games Studio
Tachado:Etiqueta <STRIKE> (strike). Ejemplo: <STRIKE>Hammer Technologies</STRIKE>~~Hammer Technologies~~jeje }:-)

Superíndice:Etiqueta . Ejemplo: mm3 mm³
Subíndice: Etiqueta . Ejemplo: H2O H₂O

Hummmm. Creo que no me dejo ninguno...Sólo falta comentar uno especial, el <PRE> (preformateo). ¿Te acuerdas que dije que en HTML los retornos de carro, espacios en blanco, etc. que hicieses escribiendo el código no afectan al resultado final? Pues si pones esta etiqueta sí que afectan.

Wenas     . Acabo de dejar 5 espacios en blanco. Esto no se podría hacer sin la etiqueta PRE.
Ahora he hecho un retorno de carro.

La etiqueta mágica FONT.

¿Ké tiene esto de mágico? Nada. Sólo ke es una de las etiquetas que más se usan en HTML. En un procesador de textos, equivaldría al menú Fuente. Con lo cual, con la etiqueta FONT, cambiamos la fuente, color y tamaño del texto. Una etiqueta FONT al 100% quedaría así:

<FONT FACE="fuente" SIZE="tamaño" COLOR="color">

Ya sabéis que sólo hay que poner los parámetros ke keráis y da igual el orden. Ahora vamos a ver qué son esas palabrejas en inglés.

FACE: Es la fuente que utiliza el texto. Por ejemplo:

<FONT FACE="Arial">DIVnet</FONT>

DIVnet

Hay que tener en cuenta de que si el ordenador del visitante de la web no posee esa fuente la verá con la que tenga por defecto el navegador (normalmente Times New Roman). Por eso, no hay que poner fuentes muy raras. O, en caso contrario, establecer unas fuentes alternativas (varias fuentes separadas por comas).

<FONT FACE="Creepy, Twang LET, Comic Sans MS">DIVnet</FONT>

DIVnet

En este caso, se vería primero con Creepy, si no la tenemos, con la Twang y si no con la Comic Sans. Pero si no tuviesemos ninguna, se vería con la fuente por defecto definida en el navegador.

SIZE: Es el tamaño del texto. Puede ir desde el 1 al 7, siendo el 1 el más pequeño. El tamaño por defecto es 3. Podemos poner el tamaño de forma absoluta poniendo el número sin más. Pero también lo podemos hacer de manera relativa al tamaño base que el usuario tenga en su navegador. Suponiendo que el tamaño base sea 3 (lo normal):

y son equivalentes, al igual que y

Podemos cambiar el tamaño base con la etiqueta <BASEFONT>. Ejemplo: <BASEFONT="4">.

Yo recomiendo siempre usar los tamaños relativos. Imaginad a un visitante que no ve bien o que le resulta más cómodo leer en un tamaño más grande de lo normal. Claro, no vamos a hacer la web con unos tamaños gigantes sólo para estas personas, pero sí podemos ayudarles poniendo los tamaños relativos. Esta gente tendrá configurado las letras del navegador en un tamaño 4, 5, 6 ó 7. Así que a nosotros no nos cuesta nada poner las cosas relativas. ¿De acuerdo? OK.

COLOR: Color del texto. Al igual que en las líneas horizontales, el color se pone con un número hexadecimal, pero hasta que no lleguemos a ese capítulo...lo ponemos en inglés.

<FONT COLOR="purple">Color lila</FONT>

Color lila

Venga, un poko más y terminamos. Ahora unos efectos curiosillos que atraerán la atención de más de un jedi. Como la etiqueta FONT no inserta retornos de carro, podemos hacer...

Letras capitales:

<FONT SIZE="+2" COLOR="red">B</FONT><FONT COLOR="white">en</FONT><FONT SIZE="+2" COLOR="red">

K</FONT><FONT COLOR="white">o</FONT>

BenKo

Aquí cambiamos el tamaño y color de las letras capitales (letras mayúsculas que queremos que destaquen).

Alternar colores:

FORÇA BARÇA !

FORÇA BARÇA !

Jeje. Mola...¿eh? Se consigue con un tamaño de letra grande, poniendo todo en negrita y alternando los colores rojo y azul.

Y ahora, el efecto lupa.

DIV GAMES STUDIO

DIV GAMES STUDIO

Aquí lo que hacemos es ponerlo todo en negrita y verde. Luego vamos escribiendo una letra desde el tamaño más pequeño hasta el más grande y después volvemos otra vez al más pequeño.

Komo ves, son muchas las cosas curiosas que se pueden hacer con la etiqueta FONT. Ahora el ejercicio práctico va a ser...Hummm...no sé. ¿Qué tal si en home.html cambias el texto y pones algunas cosas en negrita, haces nuevos párrafos, cambias la fuente, etc.? También puedes cambiar los títulos y usar letras de colores o el efecto lupa. O al principio de cada párrafo poner letras capitales. Es una idea.

Recordad que si descubrís algún efecto bonito o raro que hagáis con la etiqueta FONT podéis mandarlo a benko@arrakis.es y lo pondré en el cursillo. Valor...y al toro.

P' atrás | Principio | P' alante