Ademas de los estilos del texto, HTML ofrece la posibilidad de cambiar el color, tamano y tipo de letra del texto.
Objetivos
1. Conocer como cambiar el color del texto.
2. Conocer como cambiar el tamano del texto.
3. Conocer como cambiar el tipo de letra del texto.
Color
HTML ofrece la posibilidad de cambiar de color el texto para mejorar la presentacion de nuestra informacion. Para cambiar el color del texto haremos uso del atributo -color- de la etiqueta <font>.
Ejemplos con el nombre del color en Ingles:
<font color="blue"> Texto de color azul. </font>
<font color="red"> Texto de color rojo. </font>
<font color="orange"> Texto de color naranja. </font>
<font color="red"> Texto de color rojo. </font>
<font color="orange"> Texto de color naranja. </font>
Donde el color se cambia al escribir el nombre del color en Ingles, o con el codigo hexadecimal de los colores.
Ejemplos con el codigo hexadecimal del color:
<font color="0000FF"> Texto de color azul. </font>
<font color="FF0000"> Texto de color rojo. </font>
<font color="FF8000"> Texto de color naranja. </font>
<font color="FF0000"> Texto de color rojo. </font>
<font color="FF8000"> Texto de color naranja. </font>
Tamano
Tambien es posible cambiar el tamaño del texto, con el atributo -size- de la etiqueta <font>.
Ejemplos:
Texto con el tamaño por default.
<font size="+1">
Texto aumentado.
</font>
<font size="-1">
Texto disminuido.
</font>
<font size="+1">
Texto aumentado.
</font>
<font size="-1">
Texto disminuido.
</font>
Para los casos donde se aumenta o disminuye, entre mas alto es el valor positivo o negativo, mas se reduce o aumenta el texto.
Tipo de letra
Otro atributo que nos permite usar la etiqueta <font>, es el atributo -face-, que nos permite cambiar la fuente (tipo de letra) de nuestro texto.
Ejemplos:
<font face="Arial, Helvetica, sans-serif">
Texto con fuente Arial.
</font>
<font face="Times New Roman, Times, serif">
Texto con fuente Times New Roman.
</font>
<font face="Courier New, Courier, monospace">
Texto con fuente Courier New.
</font>
<font face="Georgia, Times New Roman, Times, serif">
Texto con fuente Georgia.
</font>
<font face="Verdana, Arial, Helvetica, sans-serif">
Texto con fuente Verdana.
</font>
<font face="Geneva, Arial, Helvetica, sans-serif">
Texto con fuente Geneva.
</font>
Texto con fuente Arial.
</font>
<font face="Times New Roman, Times, serif">
Texto con fuente Times New Roman.
</font>
<font face="Courier New, Courier, monospace">
Texto con fuente Courier New.
</font>
<font face="Georgia, Times New Roman, Times, serif">
Texto con fuente Georgia.
</font>
<font face="Verdana, Arial, Helvetica, sans-serif">
Texto con fuente Verdana.
</font>
<font face="Geneva, Arial, Helvetica, sans-serif">
Texto con fuente Geneva.
</font>
Donde la primer fuente que reconocera HTML sera la primera de la izquierda, y en caso que no la reconozca o no encuentre la fuente, usara la siguiente. Las fuentes mencionadas en los ejemplos, son por lo general las mas comunes.
Actividad
Crea una pagina Web con el siguiente codigo, e identifica como se aplica el tipo de letra, el tamano y el color al texto.
<html>
<head>
<title> Uso de los Atributos de la Etiqueta FONT </title>
</head>
<body>
<p>
<font face="Arial, Helvetica, sans-serif" color="blue">
El color <b>azul</b> es una de las seis sensaciones cromáticas básicas de la visión humana normal.
</font>
</p>
<p>
<font face="Times New Roman, Times, serif" size="-1" color="orange">
Su opuesto es el <b>naranja</b> en las artes plásticas y es complementario al amarillo en la luz, ya que para formar amarillo se necesita mezclar rojo y verde al 100% de intensidad, y nada de azul.
</font>
</p>
<p>
<font face="Courier New, Courier, monospace" color="009900">
El <b>verde</b> es un color frecuente en la naturaleza. Las plantas son verdes porque contienen clorofila. Mezclando pigmentos de colores azul y amarillo se crea dicho color.
</font>
</p>
</body>
</html>
<head>
<title> Uso de los Atributos de la Etiqueta FONT </title>
</head>
<body>
<p>
<font face="Arial, Helvetica, sans-serif" color="blue">
El color <b>azul</b> es una de las seis sensaciones cromáticas básicas de la visión humana normal.
</font>
</p>
<p>
<font face="Times New Roman, Times, serif" size="-1" color="orange">
Su opuesto es el <b>naranja</b> en las artes plásticas y es complementario al amarillo en la luz, ya que para formar amarillo se necesita mezclar rojo y verde al 100% de intensidad, y nada de azul.
</font>
</p>
<p>
<font face="Courier New, Courier, monospace" color="009900">
El <b>verde</b> es un color frecuente en la naturaleza. Las plantas son verdes porque contienen clorofila. Mezclando pigmentos de colores azul y amarillo se crea dicho color.
</font>
</p>
</body>
</html>
Observe en los ejemplos que al colocar el color, se utilita tanto el nombre del color en Ingles asi como el codigo hexadecimal.
Resultado
No hay comentarios:
Publicar un comentario
Comente sus dudas, sugerencias o temas que desee conocer: