|
En
este apartado veremos como cambiar el color el tamaño y el tipo
de letra para dar un mejor aspecto a nuestros documentos. Para
ello usaremos la etiqueta <FONT>.
Hasta
ahora las etiquetas que hemos visto no llevaban ningún dato adicional
pero como veremos muchas etiquetas llevan esta serie de datos
que se llaman atributos. Los atributos iran dentro de la
etiqueta y separados con un espacio.
Ejemplo:
Para ponerle a una palabra un tamaño 5 pondríamos la etiqueta
<FONT>
y el atributo
Size con
el valor 5:
<FONT Size=5>Palabra</FONT>
A
continuación veremos los atributos que podremos usar con la etiqueta
font y la función que ejercerá cada uno de ellos.
El atributo Size:
Este
atributo sirve para cambiar el tamaño de las fuentes. Hay varias
maneras de utilizarlo:
a)
Size=n. De
esta manera estamos asignando un tamaño directamente. El tamaño
(n) va desde uno a siete donde uno es el valor de letra más pequeño
y siete el más grande. Aquí tenemos algunos ejemplos con su codigo
y su resultado:
<FONT Size=1>El
tamaño de letra es 1</FONT>
El tamaño de letra es 1
<FONT Size=4>El
tamaño de letra es 4</FONT>
El tamaño de letra es 4
<FONT Size=7>El
tamaño de letra es 7</FONT>
El tamaño de letra es 7
b)
Size=+n
ó
Size=-n.
En
cambio aqui incrementamos o disminuimos un tamaño (n) relativo
al tamaño base que tiene la fuente, que por defecto es 3 normalmente.
Veamos algunos ejemplos de codigo y resultado:
<FONT Size=-1>Tamaño
de letra 2 (3-1)</FONT>
Tamaño de letra 2 (3-1)
<FONT Size=+3>Tamaño
de letra 6 (3+3)</FONT>
Tamaño de letra 6 (3+3)
El
tamaño base del documento (por defecto 3) se puede cambiar al
principio del documento abriendo la etiqueta
<BASEFONT> y
poniendo el atributo Size
al
tamaño que se desee.
Ejemplo:
... ... ...
<BODY>
<BASEFONT Size=4>
... ... ...
</BASEFONT>
</BODY>
... ... ...
Así
este documento tendría un tamaño base de 4 (en vez de 3), por
lo que a la hora de usar el atributo Size=+n
ó
-n hay
que tener en cuenta que ahora se incrementará o se disminuirá
un tamaño (n) sobre ese tamaño base (4).
Ejercicio:
<HTML>
<HEAD>
<TITLE>Tamaños de fuente</TITLE>
</HEAD>
<BODY>
<BASEFONT Size=4>
El tamaño base de letra es 4<BR>
<FONT Size=6>
Esta frase tiene un tamaño de letra 6<BR>
</FONT>
<FONT Size=+2>
Esta frase tambien tiene un tamaño de letra 6 (4+2)<BR>
</FONT>
</BASEFONT>
</BODY>
</HTML>
Despues
de haber copiado el código guardamos como ejer3.htm
y cargamos la página en el navegador. Pincha para ver el resultado.
El atributo Color:
Este
atributo sirve para cambiar el color de las fuentes. Para ver
como se define el atributo Color
primero
debemos entender como se definen los colores en HTML así
que antes de continuar con la lección pincha aquí
COLORES.
Ejemplo:
<FONT Color=Blue>Esta
frase es de color Azul</FONT>
Esta frase es de color Azul
<FONT Color="#0000ff">Esta
frase también es de color Azul</FONT>
Esta frase también es de color Azul
<FONT Color=Red
Size=5>Esta frase es de color Rojo</FONT>
Esta frase es de color Rojo
Ejercicio:
<HTML>
<HEAD>
<TITLE>Colores</TITLE>
</HEAD>
<BODY>
<FONT Color=Orange Size=7>
Colores<BR>
</FONT>
<FONT Color="#33ff00" Size=+2>
Ejemplo 1<BR>
</FONT>
<FONT Color="#ff00ff">
Ejemplo 2<BR>
</FONT>
</BODY>
</HTML>
Pasamos
el código al bloc de notas y guardamos como ejer4.htm.
Cargamos la página en el navegador. Pincha para ver el resultado.
El atributo Face:
El
atributo Face se
utiliza para cambiar el tipo de la fuente. Si no definimos este
atributo cada navegador cargara el documento HTML con la fuente
que tenga predeterminada, lo mismo pasará si el ordenador en que
se visualice la página no contiene el tipo de fuente que definamos
en el documento con este atributo.
Ejemplo:
<FONT Face="Comic
Sans MS" Size=5>Tipos de fuente</FONT>
Tipos de fuente
Si
no notas diferencia entre este tipo de letra y la del documento
es que tu ordenador no contiene el tipo de letra Comic
Sans MS.
En
este atributo se puede definir más de un tipo de letra, con el
fin de que si un ordenador no contiene el primer tipo de fuente
que contiene el atributo, pruebe con el segundo, tercero...
Ejemplo:
<FONT Face="Arial,Comic
Sans MS" Size=5>Tipos de fuente</FONT>
Tipos de fuente
Ejercicio:
<HTML>
<HEAD>
<TITLE>Fuentes</TITLE>
</HEAD>
<BODY>
<FONT Color=Red Size=7 Face="Comic Sans MS,Arial">
Ejercicio 5<BR>
</FONT>
<FONT Color="#33ccaa" Size=5>
Atributos<BR>
</FONT>
<FONT Color="#bb22ff" Size=+3 Face="Courier
New">
HTML<BR>
</FONT>
</BODY>
</HTML>
Pasamos
el código al bloc de notas y guardamos como ejer5.htm.
Cargamos la página en el navegador. Pincha para ver el resultado.
(Hay que tener en cuenta que algunos tipos de letra puede que
no se vean, depende de los que contenga el ordenador).
|
Tamaño, color y tipos de fuente.