Capitulos de este wiki
  1. 1 Introducción al lenguaje HTML
  2. 2 Primeros pasos con HTML
  3. 3 Parrafos en HTML
  4. 4 Cómo insertar imagenes en una pagina
  5. 5 Cómo crear enlaces hipertexto
  6. 6 PRÁCTICA 1: La pagina web de "La chistera"
  7. 7 Anclas (I)
  8. 8 Anclas (II)
  9. 9 Formato de texto
  10. 10 La etiqueta FONT
  11. 11 Texto preformateado
  12. 12 Acentos y otros caracteres especiales
  13. 13 Listas en HTML (I)
  14. 14 Listas en HTML (II)
  15. 15 Comentarios en HTML
  16. 16 Practica 2: Un sitio web completo
  17. 17 Usando color en el WWW
  18. 18 Cómo cambiar la apariencia de una pagina
  19. 19 Imagenes en las paginas Web (I)
  20. 20 Imagenes en las paginas Web (II)
  21. 21 Imagenes en las paginas Web (III)
  22. 22 Cómo cambiar la apariencia de las imagenes
  23. 23 Alternativas a las imagenes inline (I)
  24. 24 Alternativas a las imagenes inline (II)
  25. 25 Mejoras en las imagenes
  26. 26 Cómo se crea una tabla HTML (I)
  27. 27 Cómo se crea una tabla HTML (II)
  28. 28 Alineamiento de tablas
  29. 29 Alineamiento de celdas y filas
  30. 30 Ancho de tablas y celdas
  31. 31 Celdas que abarcan varias filas o columnas
  32. 32 Margenes y separación de celdas
  33. 33 Anidamiento
  34. 34 Practica 3 - Tabla de Datos
  35. 35 Practica 4 - Pagina Web con una estructura creada con tablas
  36. 36 Practica 4 - Pagina Web con una estructura creada con tablas
  37. 37 Practica 4 - Pagina Web con una estructura creada con tablas
  38. 38 Estandares y extensiones del lenguaje HTML (I)
  39. 39 Estandares y extensiones del lenguaje HTML (II)
  40. 40 Extensiones a las listas (I)
  41. 41 Extensiones a las listas (II)
  42. 42 Alineamiento
  43. 43 La etiqueta META
  44. 44 Otras etiquetas del lenguaje HTML 3.2
  45. 45 El atributo TARGET
  46. 46 La etiqueta BASE
  47. 47 Creación de paginas con frames
  48. 48 Creación del documento de definición de frames (I)
  49. 49 Creación del documento de definición de frames (II)
  50. 50 Pagina completa con frames
  51. 51 Atributos de la etiqueta FRAME
  52. 52 Compatibilidad: NOFRAME
  53. 53 Anidamiento de framesets
  54. 54 Bordes de los frames
  55. 55 Valores especiales del atributo TARGET
  56. 56 Practica 5: Web de Los Alpes con frames
  57. 57 Frames flotantes
  58. 58 Sonido vídeo y otros ficheros externos
  59. 59 Multimedia Inline (I)
  60. 60 Multimedia Inline (I)
  61. 61 Plug-ins y objetos incrustados
  62. 62 Java en las Paginas Web
  63. 63 Inserción de Applets Java (I)
  64. 64 Inserción de Applets Java (II)
  65. 65 Inserción de Applets Java (III)
  66. 66 ActiveX, la tecnología del futuro
  67. 67 Formularios en HTML
  68. 68 Controles de Formularios (I)
  69. 69 Controles de Formularios (II)
  70. 70 Controles de Formularios (III)
  71. 71 Controles de Formularios (IV)
  72. 72 Otros controles
  73. 73 Practica 6-Formulario para "Los Alpes"
  74. 74 Como usar los datos de un formulario
  75. 75 Envío De Ficheros Usando Formularios

Curso completo de HTML - La etiqueta FONT

10 - La etiqueta FONT

[editar]
Curso gratis creado por Jorge Ferrer, Víctor García y Rodrigo García. Extraido de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/
23 de Febrero de 2006

Las etiquetas de los apartados anteriores permiten modificar ciertos aspectos de la apariencia del texto de una página, pero ¿es suficiente?. Cuando el WWW se hizo más y más popular y la apariencia de las páginas comenzó a adquirir la importancia actual se hizo evidente que no.

Para poder controlar en mayor medida aún la apariencia del texto se creó la etiqueta FONT. A continuación se explicarán sus virtudes, aunque cabe destacar que actualmente existe una alternativa mejor: las hojas de estilo en cascada o CSS que será tratada en los últimos capítulos del curso.

Cambiando el tamaño del texto

La etiqueta FONT permite tener un gran control sobre el tamaño de un texto. Este tamaño se especifica con su atributo SIZE y afectará al texto que encierren la instrucción de inicio (<FONT SIZE=" ">) y de fin (</FONT>).

La forma de especificar el tamaño del texto consistirá en darle el valor deseado al atributo SIZE, si bien hay dos formas de hacerlo:

  1. La primera de ellas es indicar un tamaño absoluto de 1 a 7. Correspondiendo 7 al tamaño mayor y 1 al menor. El tamaño por defecto del texto es el equivalente al número 3. Veamos un ejemplo:

         Esto es texto normal 
    	   <FONT SIZE="6"> 
    	   y esto es grande
    	   </FONT>
    	 

    En la figura 3.7 podemos ver una comparación de todos los tamaños.

    Figura 3.7. Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el tamaño del texto.

  2. La segunda consistirá en indicar un tamaño relativo respecto al que haya por defecto. Por ejemplo, para poner un tamaño 6 y suponiendo un tamaño por defecto 3 se usaría:

         Texto de tamaño 3 
    	   <FONT SIZE="+3"> 
    	   Tamaño 6 
    	   </FONT>
    	 

    Es necesario hacer notar que el aumento de tamaño se tomará siempre respecto al que se tenga por defecto (y que será 3 mientras el usuario no cambie las preferencias de su navegador), por tanto anidando varias etiquetas FONT no se irá aumentando el tamaño del texto como ocurría con la etiqueta BIG. Por ejemplo:

         Texto normal (tamaño 3), 
    	   <FONT SIZE="+1"> 
    	   Texto de tamaño 4 ,
    	     <FONT SIZE="+1">
    	       este texto sigue teniendo tamaño 4
    	     </FONT>
    	   </FONT>
    	 

En la figura 3.7 se puede ver un ejemplo de ambos modos de uso.

Figura 3.7. Ejemplo de uso de la etiqueta FONT y su atributo SIZE para cambiar el tamaño del texto.

Cuando se indica el tamaño del texto usando el método relativo (+n o -n) será necesario usar comillas. Aunque algunos navegadores podrían entender el valor aunque no se usen la única manera de estar seguro de que la visualización será correcta en todos ellos será entrecomillar el valor dado al atributo SIZE.

Conocidos estos dos métodos es el momento de introducir una nueva etiqueta muy relacionada con FONT: la etiqueta BASEFONT. Esta permite modificar el tamaño por defecto del texto de la página Web. Su modo de uso es el siguiente:

 <BASEFONT SIZE="n">
	    

Donde n es un número del 1 al 7 (por defecto vale 3) y las comillas son obligatorias. Podemos observar como esta etiqueta está formada por una única instrucción cuya función será modificar el tamaño de todo el texto a partir de su inclusión. La única excepción que escapa al efecto de esta etiqueta son los encabezados, que mantienen su tamaño.

En general cuando se usa esta etiqueta se introduce como la primera después de <BODY>, no usarla es lo mismo que usar <BASEFONT SIZE="3">.

A continuación se incluyen dos ejemplos con distintos tamaños de letra por defecto:

 <BASEFONT SIZE="3">
   Esto es texto de tamaño 3, 
   <FONT SIZE="+3"> 
   esto es de tamaño 6, 
   </FONT>
   <FONT SIZE="+4"> 
   y esto es de tamaño 7
   </FONT>
	    

Como se ve, para hallar el tamaño de un texto hay que sumar el tamaño relativo (+3 o +4 en este caso) al tamaño por defecto del resto del texto (en este caso 2). Otro ejemplo más:

 <BASEFONT SIZE="4">
   Esto es texto de tamaño 4, 
   <FONT SIZE="+3"> 
   esto es de tamaño 7, 
   </FONT>
   <FONT SIZE="+4" 
   y esto sigue siendo de tamaño 7
   </FONT>
	    

En este segundo ejemplo se ve, además, que en ningún caso se puede conseguir un tamaño superior a siete. De igual manera nunca se puede poner un tamaño menor que uno.

En la figura 3.8 podemos ver ambos ejemplos.

Figura 3.8. Los tamaños del texto que hallamos modificado usando el método relativo se calcularán a partir del al tamaño por defecto del texto normal, pero sin pasar nunca de 7.

Cambiando el color del texto

Con otro atributo de la etiqueta FONT: COLOR se puede cambiar el color del texto con la misma facilidad con la que hasta ahora se ha cambiado su tamaño. En un principio la única forma de indicar un color consistía en usar un código hexadecimal de la siguiente manera:

 <FONT COLOR="#RRGGBB">
	    

Dónde hay que sustituír RR por dos números hexadecimales que indican la cantidad de rojo (desde 00 que es ausencia de color a FF que es máxima cantidad de color), GG por otros dos que indican la cantidad de verde y BB por dos que indican la cantidad de azul. Combinando estos tres colores en diferentes proporciones se pueden crear hasta 16 millones de colores. Este sistema suele parecer ligeramente complicado en un principio, pero con la práctica o con ayuda de herramientas gráficas de selección de colores se convierte en un método bastante sencillo e increíblemente potente.

Existe un segundo método de indicar el color que sin duda le resultará al lector más sencillo. Este método consiste en poner como valor de COLOR el nombre del color en inglés. Los colores aceptados son: Black (negro), white (blanco),green (verde), maroon (marron rojizo), olive (verde oliva), Navy (azul marino), purple (violeta), red (rojo), yellow (amarillo), blue (azul), teal (verde azulado), lime (verde lima), aqua (azul claro), fuchsia (fusia), silver (gris claro). Aunque además de estos existen otros valores, no son soportados en todos los navegadores.

Y la forma de usarlas queda clara en el siguente ejemplo:

 <H1>
   <FONT COLOR="FUCHSIA">
   Colores en el Web
   </FONT>
   </H1>
   ya podemos decir que sabemos poner colores en las páginas Web,
   <FONT COLOR="green">
   verde
   </FONT>,
   <FONT COLOR="blue">
   azul
   </FONT>
   <FONT COLOR="red">
   rojo
   </FONT>, 
   etc. Ninguno se nos resiste.
	    

cuyo resultado podemos ver en la figura 3.9 :

Figura 3.9. Gracias a la etiqueta FONT y a su atributo COLOR nuestras páginas tomarán un colorido totalmente diferente.

[editar]

192 opiniones

sara

deberian poner como hacer un enlace a otra pagina desde un boton
luis

este tutorial esta fabuloso!
esta chivo

gracias por publicar cosas buenas
OCHOA

BUENO
OCHOA

El comentario de algo asi me interesa a mi tambien.
1 2 3 4 5 6 7 ... 39 | siguiente >

Cursos gratis relacionados con 'Curso completo de HTML'

Este es un curso tremendamente completo, guiado y con ejemplos y prácticas pensadas para convertirlo... Más »
El objetivo de este curso es aprender a programar en el lenguaje Ada, desde sus... Más »
Práctico y completo curso de hacking.
Completo curso de Linux, un sistema operativo gratuito y de libre distribución inspirado en el... Más »
Completo curso acerca de los virus informáticos, historia, clasificación, protección...

Autor y licencia de 'Curso completo de HTML'


Curso gratis de Jorge Ferrer, Víctor García y Rodrigo García. Extraido de: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/ CopyLeft
Licencia GNU Free Documentation License: http://www.gnu.org/copyleft/fdl.html
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.