Tamaños y tipos de letra en HTML

Tamaños y tipos de letra en HTML

Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno <Hx></Hx> donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor.

Se escribirán así:

<H1> Texto de prueba (H1)</H1>.

<H2> Texto de prueba (H2)</H2>

<H3> Texto de prueba (H3)</H3>

<H4> Texto de prueba (H4)</H4>

<H5> Texto de prueba (H5)</H5>

<H6> Texto de prueba (H6)</H6>

y este sería el resultado:

Texto de prueba (H1)

Texto de prueba (H2)

Texto de prueba (H3)

Texto de prueba (H4)

Texto de prueba (H5)

Texto de prueba (H6)

No hay que olvidar poner el cierre </Hx> a cada elemento utilizado.

Este tipo de elemento se suele utilizar para escribir encabezamientos, ya que después del cierre automáticamente el visualizador inserta un salto de párrafo.

Por ejemplo: si escribes

<H1> Texto en H1 </H1><H3> Texto en H3 </H3>

se verá:

Texto en H1

Texto en H3

Y no una cosa al lado de la otra, como cabría esperar. Este elemento admite un parámetro de alineación. Así, si escribes:

<H3 align=center> Texto en H3 </H3>

Texto en H3

________________________________________

Otra forma de cambiar los tamaños de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un número entre 1 y 7. El valor por defecto del texto es 3. La gran diferencia de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta:

<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font>

<FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font>

<FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>

Dará como resultado:

AAAAAAAAA

Se puede cambiar el tamaño por defecto (3) de toda la página con el elemento <BASEFONT SIZE=valor>. El texto tomará el tamaño indicado por valor y lo mantendrá hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente. Tanto si se ha establecido un valor base como si se utiliza el valor por defecto, los tamaños también pueden indicarse de forma relativa, por lo que el valor puede ser positivo (+) o negativo (-) respecto al tamaño base. Por ejemplo estos dos valores dan el mismo resultado:

<FONT SIZE=5>ABcde</FONT>

<FONT SIZE=+2>ABcde</FONT>

ABcde

ABcde

________________________________________

Con la versión 3.0 de Netscape se ha implementado un nuevo atributo del elemento <FONT> que permite elegir tipos de letra entre los varios de que dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite forzar el tipo de letra que el diseñador de la página quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador.

Si escribes

<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>

<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW ROMAN</FONT>

<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW</FONT>

<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>

<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>

<FONT FACE="smallfonts">Texto de prueba 12345 con tipo SMALL FONTS</FONT>

Se verá:

Texto de prueba 12345 con tipo ARIAL

Texto de prueba 12345 con tipo TIMES NEW ROMAN

Texto de prueba 12345 con tipo COURIER NEW

Texto de prueba 12345 con tipo COURIER

Texto de prueba 12345 con tipo ROMAN

Texto de prueba 12345 con tipo VERDANA

Texto de prueba 12345 con tipo SMALL FONTS

Por supuesto, este atributo es compatible con todos los demás ya conocidos, como color y tamaño. Por ejemplo, si escribes

<FONT FACE="impact" SIZE=6 COLOR="red">

Texto de prueba 12345 con tipo IMPACT</FONT>

Se verá:

Texto de prueba 12345 con tipo IMPACT

Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador. No es interesante por tanto, definir tipos raros, que probablemente, no llegarán a verse nunca.

Si a pesar de todo, se define un tipo del que se tienen dudas de que exista en el cliente, se pueden indicar otros tipos alternativos, de forma que el navegador si no tiene el primer tipo, utilizará el siguiente, y si tampoco lo tiene el próximo, etc. Así:

<FONT FACE="raro, courier" SIZE=4 COLOR="red">

Texto de prueba 12345 con tipos alternativos</FONT>

Se verá:

Texto de prueba 12345 con tipos alternativos

Como puedes ver, se ha declarado como primer tipo de letra el llamado "raro" que, por supuesto, no existe, y el navegador pasa a utilizar el siguiente, "courier", que sí es habitual.

<FRAME> gestionar marcos (frame)

Amados u odiados, útiles o inútiles, excelentes o pésimos, los marcos son instrumentos que forman ya parte habitual del web y que los navegadores gestionan hoy día a la perfección. Los detractores de los marcos afirman la inutilidad de subdividir ulteriormente las páginas web, las cuales, en última instancia, pueden resultar poco legibles. Otros, como yo, consideran que los marcos pueden llegar a ser muy útiles ya que se evita cargar las mismas imágenes y se mantienen ordenados el contenido y la estructura del sitio. Naturalmente, abusar de los marcos puede producir como resultado pésimas impostaciones gráficas, obteniendo un efecto contrario al previsto.

Un punto en contra de los marcos es, ciertamente, su incompatibilidad con los programas de navegación gráfica destinados a invidentes, los cuales se bloquean impidiendo la lectura de las páginas.

Una buena solución es crear una versión con marco y una versión sin marco (como esta misma guía ha hecho).

¿Cómo se crean los marcos?

Antes de nada, repasemos rápidamente las marcas HTML de gestión de marcos.

N2.0 Documento Marco <FRAMESET></FRAMESET> (en

...