2. DANDO FORMATO AL TEXTO

Ahora veremos como darle formato al texto de la página. Antes de seguir veamos como se maneja el color en html.

2.1 Color en html

Los colores en html son representados con un código, aunque en la actualidad los navegadores ya aceptan el nombre en inglés del color. El código se compone de 7 caractéres, el signo gato (#) seguido de 3 pares de dígitos (que pueden ir del 00 al 99), es decir:

#00 00 00

Donde cada par de dígitos se podria decir que corresponde al porcentaje de un color. El primer par corresponde al rojo, el segundo al verde y el tercero al azul. Los códigos de body (text, link, etc.) van a tomar valores "hexadecimales", o sea que en vez de ir de 0 a 9 como en base 10, van a ir de 0 a 15. Por lo tanto, los dígitos hexadecimales son: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, donde va A vale 10, B vale 11, etc. Así logras tener un total de 16777216 colores. Entonces, un Rojo al 100% sería FF.
Ejemplos de colores:

#000000 Negro #CCCCCC Gris #FFFFFF Blanco
#FF0000 Rojo #00FF00 Verde #0000FF Azul
#FFFF00 Amarillo #990099 Morado #FF33FF Rosa

Como ven la combinación de colores es enorme. Ahora sí, el tag <font>

2.2 El Tag <font>

Anteriormente mencione que el tag para poner un texto es <p>, esto es más o menos cierto porque el tag que en realidad enriquece al texto es <font>,</font>, mientras <p>,</p> indica que hay un párrafo, es decir, en la primera página pude haber puesto:

<p><font>Mundo Paul</font></p>

En todo caso si hacen el cambio la apariencia es la misma. No nos desviemos y sigamos con los atributos.

 Definición
Atributos:

Los atributos son como cualidades que se le añaden a los tags y sirven para modificar la apariencia de algo (como el tipo, color, tamaño, etc), y se usan poniéndolos dentro de <> al lado del nombre de el tag, es decir:

<tag1 atributo1 atributo2... atributoX>blah, blah, blah </tag1>

2.3 Atributos de el Tag <font>

Atributo Función
face = "tipo de letra" Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en la PC que ejecuta la página se usará la fuente predeterminada del navegador.

color = "código_color"

Indica el color del texto, por defecto es negro.
size = "número" Indica el tamaño del texto, por ejemplo esta línea tiene size 1.

Ejemplo Se ve
<font face="times new roman" color=#0000FF size=1>Holaaa</font> Holaaa

Más ejemplos con: "color", "size", "face".

2.4 Los Tags <p>,</p>

Aunque no he definido formalmente, el tag <p> se ha usado desde la primera página web, este tag sirve para indicar el comienzo y fin de un párrafo, generalmente se usa dentro de el tag <body>

2.5 Atributos de el Tag <p>

Atributo Función
align= "alineación" Señala la alineación del texto dentro de la página, esta puede ser left (para izquierda), right (para derecha) o center (para centrarlo).

Ejemplo

2.6 Tags de Texto

Para indicar el estilo de texto (negrilla, subrayado, itálica etc...) hay varios tags, algunos no son reconocidos por determinados navegadores, es por ello que según el navegador que se use, se verá como se desea. Pero estos son los más usuales.

Nombre Tag
Negrita <b></b>
Cursiva <i></i>
Subrayado <u></u>
Tachado <s></s>
Centrado
<center></center>

Ejemplo

2.7 Cabeceras

En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de los tags <H1><H2><H3><H4><H5><H6>. El texto que escribas entre el inicio y el fin de el tag será el afectado por las cabeceras. La cabecera <H1> será la que muestre el texto en mayor tamaño.

Ejemplo Se ve
<h1>Texto de Prueba</h1>

Texto de prueba

<h2>Texto de Prueba</h2>

Texto de Prueba

<h3>Texto de Prueba</h3>

Texto de Prueba

<h4>Texto de Prueba</h4>

Texto de Prueba

<h5>Texto de Prueba</h5>
Texto de Prueba
<h6>Texto de Prueba</h6>
Texto de Prueba

2.8 El Tag <hr>

El tag <hr> muestra una linea horizontal de tamaño determinable.

2.9 Atributos de el Tag <hr>

Atributo Función
noshade No muestra sombra, evitando el efecto en tres dimensiones.
width = num / % Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana del visor. Tambien se puede especificar un número que indicaría el ancho de la línea en pixeles.
color = "código_color" Indica el color de la línea.
align = "posición" Alinea la línea a la izquierda (left), a la derecha (right) o la centra (center).
size = "número" Indica el grosor de la línea en pixeles.

Ejemplos:

<hr>


<hr align="center" color=#000000 size="10" width="50%">


2.10 Salto de Línea

El salto de línea corresponde al tag <br>, también puedes cerrar con </p> donde quieras un salto de línea, pero se tiene un efecto diferente:

Ejemplo Se ve
<p>Hola<br>Como<br>Estás?</p> Hola
Como
Estás?
<p>Hola</p><p>Como</p><p>Estás?</p>

Hola

Como

Estás?

2.11 Acentos

Para ponerle acento a una letra en html se necesita un código especial así como a la "ñ", pues de ponerlas como tal, el navegador las puede interpretar como otro carácter debido a la codificación que éste tenga. El código en cuestión es el siguiente: &acute;

Ejemplo Se ve
&aacute; - &Aacute; á - Á
&eacute; - &Eacute; é - É
&iacute; - &Iacute; í - Í
&oacute; - &Oacute; ó - Ó
&uacute; - &Uacute; ú - Ú
&ntilde; - &Ntilde; ñ - Ñ

A la letra que desees colocarle el acento solo debes ponerla después del "&" (como se muestra en el ejemplo). Es importante señalar que siempre debe terminar con ; pues de lo contrario algunos navegadores (firefox, por ejemplo) lo interpretarán como tal y no como acento, es decir, si la palabra que le pusiste acento es árbol, aparecería así "&aacuterbol", obteniendo un resultado inesperado.