Logo

atributos de la letra

La fuente o letra en lenguaje html tiene su etiqueta que es <font> y la de cierre que es </font>, esta etiqueta de html tiene muchos atributos que veremos a continuación.

El atributo face específica el tipo de letra. Con este atributo debemos tener cuidado porque si elegimos un tipo de letra de la que el equipo del usuario no dispone el navegador que use utilizara otra la que por defecto utiliza, que suele ser Times New Roman. Esto lo podemos evitar, poniendo dentro del atributo face, colocar varios tipos de letras separadas por comas.

De esta forma el navegador comprobara que dispone del primer tipo de letra, si no es así, pasará al segundo y así sucesivamente hasta que encuentre uno que tenga, o terminará por utilizar el tipo de fuente que tiene por defecto.

Un ejemplo sería:

<font face=”Comic Sans MS, arial, verdana” y se vería en el navegador así:

Este texto se vería en Comic Sans MS ; Este texto se vería en arial, etc.

En este caso es preciso colocar el atributo face o tipo de letra entre comillas porque sino lo hacemos el html solo entiende como atributo del tipo de letra a Comic Sans MS, y el resto lo descartaría.

Otro atributo de la fuente o font es size, que hace referencia al tamaño de la letra. Este tamaño puede ser absoluto o relativo. Absoluto es cuando le damos un determinado tamaño, para lo cual tenemos 7 niveles que corresponden desde el 1 al 7, donde 1 corresponde a la letra más pequeña y 7 a la mayor.

Por otro lado podemos utilizar otra manera de modificar el tamaño de la fuente o letra. Podemos aumentarla o disminuirla con respecto a la precedente. Por ejemplo, si le colocamos al atributo size lo siguiente: size=”+ 1”, significa que aumentamos en un nivel la letra con respecto al texto precedente. Si por el contrario escribimos size=” -2”, disminuirá el tamaño de la letra en dos niveles con respecto a la del texto precedente.

Como ya hemos mencionado anteriormente este como otros atributos están condicionados por el navegador que utilicemos, para modificarlo podemos ir dentro de su menú al apartado ver / tamaño de fuente o tamaño texto, y elegir el que consideremos oportuno. Este atributo normalmente esta prefijado en las hojas de estilo en cascada, que en su momento veremos.

El color del texto puede ser fijado con el atributo color. Si usamos el sistema RGB (Red, Green y Blue). Cada color esta formado por tres partes, el porcentaje que tiene de rojo, el que tiene de verde y el que tiene de azul.

Por ejemplo, el azul oscuro en el sistema RGB sería: el color=”#000080 ”, donde los dos primeros dígitos corresponde a la parte de la mezcla del color que tiene de rojo, los dos siguientes de verde y los dos últimos corresponden a la cantidad de azul. El carácter # se coloca al principio, luego se coloca el porcentaje que tiene de Rojo (Red), luego el de verde (Green) y por ultimo el de azul (Blue), de ahí lo de RGB. Otros colores usando el sistema RGB serían: naranja: # FF8000, el rojo: #FF0000, etc. y donde FF significa color al 100 % (Full). Y se les ha dado nombre a algunos de los colores más usados como podemos ver en el cuadro siguiente:

Nombre
Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow

Por ejemplo si queremos que el texto aparezca en rojo el código en html sería:

<font color=”red”>Este texto se verá en el navegador en rojo</font>

Y el resultado que veríamos en el navegador sería:

Este texto se verá en el navegador en rojo

Podemos decir que con todo lo que hemos visto ya podemos crear un texto y darle una forma elaborada. Por ejemplo podemos empezar creando un titular o encabezado de nivel 1, en itálica y color verde oliva:

<font color=”olive”>< h1>Primer Titular en verde oliva</h1></font>

Un segundo titular de nivel 2, en azul:

<font color=”blue”><h2>Segundo Titular en azul</h2></font>

Podemos elegir que la fuente del texto fuese Comic Sans MS y en caso que no existiese esta, arial, el código html sería:

<font face="Comic Sans MS,arial">Texto en Comic Sans MS</font>

Siguiente Tema: Atributos del HTML para la Página web

PÁGINA PRINCIPAL DEL CURSO CREACIÓN DE PÁGINAS WEB EN HTML