Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Tema formato de texto color tamaño fuente alineación
1. TEMA: Formato de texto: color, tamaño, fuente,
alineación
Lee el textoque se te presentay utiliza todos lostags para realizarlos ejercicios.Recuerdaque
Tamaño de las letras
Aunque ya hemos visto anteriormente estás instrucciones al explicar los
estilos lógicos y los estilos físicos. Vamos a explicar cómo utilizarlas.
Para definir distintos tamaños de letra, en HTML tenemos varias
opciones:
1º) Usamos el elemento <hx>....</hx>: donde x es un número que
puede variar entre 1 y 6, siendo 1 el tamaño mayor. Esto se utiliza
sólamente para los titulares de páginas
Ejemplo podría ser el siguiente:
2. <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>
se verá:
Texto de prueba h1
Texto de prueba h2
Texto de prueba h3
Texto de prueba h4
Texto de prueba h5
Texto de prueba h6
Es importante no olvidar el cerrar </hx> cada etiqueta ulitizada.
Como ya hemos mencionado anteriormente este tipo de elemento se suele
utilizar para escribir titulares, ya que después del cierre automáticamente el
3. 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.
2) por medio de la etiqueta <font> con el atributo size <font
size="3"> (tamaño en inglés) seguido por un número, el cual indica el tamaño
entre 1 y 7. Tenemos que tener en cuenta que el valor por defecto es 3. Esta
notación no provoca un salto de párrafo después de cada cambio.
Ejemplo:
4. <font size="3">N</font> <font size="4">N</font>
<font size="5">N</font> <font size="6">N</font>
<font size="7">N</font> <font size="6">N</font>
<font size="5">N</font> <font size="4">N</font>
<font size="3">N</font>
El resultado será:
NNN NNNNNN
Es posible cambiar el tamaño por defecto (3) de toda la página con el
elemento <basefont size="valor">.
El texto pasará al 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.
Tipo de las Fuentes
5. Para cambiar el tipo de le letra podemos usar el atributo face seguido por el
nombre del tipo de letra al cual queremos cambiar.
Ejemplo:
<font face="times new roman">Fuente Times New Roman </font>
<font face="arial">Fuente Arial </font>
<font face="courier new">Fuente Courier New </font>
<font face="courier">Fuente Courier </font>
<font face="roman">Fuente Roman </font>
el navegador mostrará:
Fuente Times New Roman
Fuente Arial
Fuente Courier New
Fuente Courier
Fuente Roman
Este atributo se puede usar en conjunción con color y tamaño.
Por ejemplo:
<font face="univers" size="6" color="blue">
6. Texto tipo Univers
</font>
Se verá:
Texto tipo Univers
Podemos definir cualquier tipo de letra, pero tenemos que tener en cuenta que si
en el ordenador de la persona que esta visualizando la página no tiene instalada
la fuente que nosotros hemos definido en font face se mostrará la en su lugar
fuente que el navegador tenga por defecto. Por tanto hemos de tener mucho
cuidado a la hora de definir los tipos de letra. Puesto que si definimos tipos de
letra raros es muy probable que no lleguen a mostrase en la pantalla del cliente.
Color del Texto
El color del texto puede ser definido mediante el atributo color. En principio
existen dos posibilidades para definir los colores:
1. Mediante la Utilización de los valores RGB en forma
hexadecimalRGB=Red/Green/Blue; Insertar los valores Rojo/Verde/Azul.
7. Por ejemplo:
<font color="#24AAFF">
Este texto está en azul usando color="#24AAff"
</font>
se verá:
Este texto está en azul usando color="#24AAff"
2. Utilizando la especificación del nombre del color.
Por ejemplo:
<font color="red">
Este texto está en rojo usando color="red"
</font>
se mostrará:
Este texto está en azul usando color="red"
Si nos decidimos a trabajar con valores hexadecimales, podremos escoger entre
una paleta de 16,7 millones de colores. De esta manera se trabaja
independientemente de los navegadores Web.
8. Si embargo escribimos el nombre del color, podemos evitar la definición del color
en forma hexadecimal que es un poco más dificil. Actualmente están
estándarizados tan sólo 16 colores. Existen colores adicionales los cuales son
dependientes de los navegadores Web. Los cuales son:
Nombre Color Nombre Color Nombre Color
Aqua Black Blue
Fuchsia Gray Green
Lime Maroon Purple
Navy Olive Red
Silver Teal White
Yellow
Veamos lo siguiente ejemplos:
<font color="blue">
Este texto está en azul usando color="blue"
</font>
Este texto está en azul usando color="blue"
9. <font color="maroon">
Este texto está en azul usando color="maroon"
</font>
Este texto está en azul usando color="maroon"
Ejercicio de Alineación de Texto
<html>
<head>
<title>parrafos</title>
</head>
<body>
10. <p align="center">
Ejemplo de formatear parrafos
</p>
<p align="center">
Esto es el resultado:
</p>
<div align="right">
<p>
Que son los buscadores que no tienen porque
mantener un índice y que tienen robots que
constantemente recorren Internet en busca de
nuevas páginas para incluirlas en el buscador.
</p>
<p>
11. Imaginemos un texto relativamente largo donde
todos los párrafos están alineados a la izquierda
(por ejemplo).
</p>
<p>
Que son los buscadores que no tienen porque
mantener un índice y que tienen robots que
constantemente recorren Internet en busca de
nuevas páginas para incluirlas en el buscador.
Estos buscadores suelen tener un formulario
accesible desde la página inicial, con el enlace
correspondiente. No hay que navegar las
categorías para acceder al formulario.
</p>
</div>
<br>
