HTML fácil y para todos III: Tamaños, fuentes, colores y párrafos.

Tamaños y tipos de fuente en HTML

Para definir distintos tamaños de letra, en HTML se utiliza el elemento  <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>

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)

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.

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 diferencia entre <Hx> </Hx> y  <FONT > 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 algo así más o menos para que os hagais una idea:

AAAAAAAAA

Otro 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 cambiar 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 con tipo ARIAL</FONT>

Se verá: Texto de prueba con tipo ARIAL

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

Se verá: Texto de prueba con tipo COURIER

Este atributo es compatible con todos los demás, como color y tamaño. 

Por ejemplo, si escribes

<FONT FACE="arial" SIZE=5 COLOR="red">Texto de prueba con tipo ARIAL</FONT>

Se verá: Texto de prueba  con tipo ARIAL

Nota: Se pueden hacer todas la combinaciones que quieras, pero hay que tener en cuenta que si en el servidor, maquina cliente no está instalada una determinada fuente, ésta no se verá yen su lugar aparecerá la fuente por defecto del visualizador. Es decir que si nosotros queremos poner en Blogger una fuente "rara" o poco conocida, y ellos no trabajan con ella, nos aparecerá la que tengan predefinida. No es interesante por tanto, definir tipos raros, que probablemente, no llegarán a verse nunca.

Pequeño resumen de los elementos que hemos dado:

• <Hx> </Hx> donde X sera un número siendo 1 el de mayor tamaño. Se usa para encabezamientos e inserta un salto de párrafo.
• <FONT > que puede ir seguido de los elementos size o face. No inserta saltos de párrafo.

a) <FONT SIZE=x></FONT> lo usaremos para dar tamaño a nuestro texto (sustituir la X por un valor del 1-7).

b) <FONT FACE="nombre de fuente"></FONT>

Nota: Habreis observado que más arriba pongo font en minúscula, se puede de las dos formas aunque en blogger me lo toma en minúscula.

Color en HTML

En el apartado anterior ya di una pista de como se introduce el color, pero ahora lo volveremos a tratar.

Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR="xxx", donde "xxx" es el nombre en inglés del color que se desea. Así que si hemos olvidado los colores en Ingles deberemos repasarlos.

Hay que tener presente que algunos no se verán o se verán mal si la máquina o el servidor no soporta.

Si escribes:

<FONT COLOR="red">Texto ROJO </FONT>

Veremos esto: Texto ROJO

<FONT COLOR="green">Texto VERDE </FONT>

Veremos esto: Texto VERDE

Como veis es muy sencillo y no nos va a costar nada aprender como se hace.

Párrafos en HTML

Para definir los párrafos se utiliza el elemento <P> </P> (por Paragraph). Aunque a menudo no se utiliza el cierre </P>, ya que el texto continuará normalmente hasta que encuentre otro párrafo <P>, pero es conveniente acostumbrarse a ponerlo siempre.

<P> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 
Texto 1 Texto 1 </P> 
<P> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P> 

Y visualmente quedaría más o menos así:

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 

Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 

Osea lo que hace este elemento es crear un bloque de separación. Si no se quiere dejar esa línea vacía entre los dos párrafos puede utilizarse el elemento <BR> (por BReak). Es decir, que el elemento <BR> es un separador, no un indicador de bloque.

Se escribirá así:

<P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 
Texto 1 Texto 1 <BR> 
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

y este sería el resultado:

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2


Y para que no se haga pesado lo vamos a dejar aquí. En el próximo post hablare de los tipos de párrafos y algunas "cositas" más que son interesantes del mundo HTML.

http://misteriosabsas.blogspot.com.ar

http://susanafadon.blogspot.com.es

http://www.lasmejorespeliculasdelahistoriadelcine.com