Leccion 2: TEXTO

En esta lección veremos todas las tags que afectan la visualización del texto en el browser.

ENCABEZADOS

Para los Titulos y Encabezados se utilizan los tags que van de H1 a H6
con su correspondiente tag de cierre. Para obtener el encabezado más grande se usa el tag <H1></H1> asi sucesivamente hasta el <H6></H6> para el tamaño más pequeño. El titulo de este capitulo por ejemplo es un encabezado nivel 2 (H2).
Es muy importante nunca utilizar las tags H1 a H6 para lograr el efecto de negrita o un tamaño de texto en los parrafos. Tal vez se vea bien en tu navegador pero puede verse de tamaño grotesco en otros navegadores. Mas adelante veremos las tags correspondientes para el tamaño de las letras en los parrafos.

PARRAFOS

Lo normal es querramos dividir lo que escribimos en parrafos, como cualquier libro comun. Para esto no bastará dar enter como en un procesador de texto comun, pues el browser no lo tomará en cuenta.
Para dividir un texto en parrafos debemos escribir . En cambio si queremos lograr solo un punto y aparte deberemos escribir . Si lo que queremos obtener son renglones en blanco, debermos combinar ambos tags de esta forma:
 
 
Con el ejemplo anterior logramos dos renglones en blanco.

Otra cosa que ignora el browser es cuando hacemos mas de un espacio entre palabras, para que los tome en cuenta debes escribir   tantas veces como espacios quieras lograr.

EJERCICIO PRACTICO:

Vamos a ponerle un encabezado y escribir algunos parrafos en el documento html que hicimos en la primera lección. Para ello debes abrir el documento (se abre con el Explorer: no tengo nada contra Netscape, pero este ultimo no permite modificar el codigo fuente). Para abrirlo debes ir al menu de la barra de herramientas y clikear en Ver (View) ahi selecciona Código fuente (Source Code). Entonces se abrirá el block de notas y podremos seguir trabajando (no olvides aceptar guardar los cambios antes de salir).

Vamos agregar lo siguiente, siempre entre las etiquetas <BODY> y </BODY>:

<H1> Titulo </H1>

Esto es un solo parrafo en el block de notas pero varios parrafos en la pantalla del navegador. Y esto es un punto y aparte. 

Guarda los cambios, el resultado debe ser el siguiente:

Titulo

Esto es un solo parrafo

en el block de notas

pero varios parrafos

en la pantalla del navegador
Y esto es un punto y aparte.

Como habrás notado, la letra que se visualiza es la que se ve en el navegador por defecto, que suele ser Times New Roman. Ahora veremos como "ordenarle" al navegador que presente otros tipos de letra, otros estilos y otras medidas. Para esto, utilizamos el tag 
Este tag se acompaña con el parámetro face para cambiar el tipo de letra, y con el de size para cambiar el tamaño.
Por ejemplo:
 Este texto se ve en verdana tamaño 4 
El tamaño puede ir del 1 al 7. En cuanto a las fuentes, es conveniente que solo utilices las mas comunes como arial, verdana, tahoma, times new roman, comic san serif y courrier new, ya que si utilizas una letra muy bonita pero poco comun y quien vea tu pagina no tiene instalada esa fuente en su pc, vera el texto en la fuente por defecto del navegador, que como ya dijimos suele ser Times New Roman.

Otros tags que nos permiten cambiar los atributos del texto son:
 Hace que el texto se vea en negritas 
 el texto se ve en cursiva 
 El texto se ve subrayado (Este tag no es muy utilizado, ya que puede confundirse con un link)

COLORES

Ahora veremos la forma de cambiar los colores del texto. Para ello utilizaremos dentro del tag el parámetro color.
La computadora obtiene todos los colores mezclando distintas proporciones de rojo, verde y azul. En el codigo html esta combinacion se expresa en forma hexadecimal, es decir con 6 caracteres, donde los 2 primeros son la cantidad de rojo, los 2 siguientes la cantidad de verde y los 2 ultimos de azul.
Los caracteres a utilizar son: 0123456789ABCDEF donde 0 es la cantidad menor y F la mayor, asi que el color azul puro por ejemplo sería #0000FF porque tiene la maxima cantidad de azul y nada de los otros dos colores.

La etiqueta tipo es: Este por ejemplo es un color negro, el blanco seria

Para hacertelo mas facil incluyo una tabla con el codigo hexadecimal de los colores mas utilizados: TABLA DE COLORES HEXADECIMALES.
Claro que también puedes expresar los colores en ingles, pero esto limita a unos pocos colores:
Este texto se ve en rojo
Este color solo se puede obtener en formato hexadecimal

CENTRADO

Este tag es sumamente util no solo para el texto, sino para las imágenes, y cualquier cosa que insertemos en el documento html.

<CENTER> Todo lo que este entre estas dos etiquetas</CENTER>
<CENTER> se vera centrado en la pantalla </CENTER>

Ejercicio Práctico:

Supongamos que queremos lograr el siguiente texto, centrado, en letra tahoma, negrita, tamaño 4 y de un color verde oscuro: El lenguaje html es fácil ¿cuales son los tags necesarios para lograrlo?

Respuesta:

<center>El lenguaje html es facil</center>

Resultado en pantalla:

El lenguaje html es facil

LISTAS

Muchas veces sera necesario presentar la información en forma ordenada, para ello podemos ayudarnos con las listas. Hay varios tipos de listas:

Con viñetas :

El tag que necesitaremos sera:
<UL> y </UL>. Siempre será necesario cerrar este tag, así como los de cierre de cualquier otra lista.
Para cada punto de la lista es necesario el tag:
<LI> elemento listado </LIi>

Ejemplo práctico:

<UL>
<LI>uno</LI>
<LI>dos</LI>
<LI>tres</LI>
</UL>

Esto en pantalla resulta:

Uno
Dos
Tres

Numeradas:

El tag que necesitaremos sera:
<OL> y </OL>.
Para cada punto de la lista es necesario el tag:
<LI> y </LI>

Ejemplo practico:

<OL>
<LI>uno</LI>
<LI>dos</LI>
<LI>tres</LI>
</OL>

Que resulta en pantalla:

Uno
Dos
Tres

Listas de directorio o descripción:

Necesitamos tres tags diferentes:
<DL>, que es necesario cerrar con </DL>. Este tag delimita el comienzo de la lista.
<DT>, Este tag delimita el titulo del punto a describir.
<DD>, Este tag delimita la descripción.

Ejemplo práctico:

<DL>
<DT>Termino a definir</DT>
<DD>definicion</DD>
<DT>Otro termino a definir</DT>
<DD>definicion</DD>
</DL>

Que se resulta en pantalla:

Termino a definir: definición
Otro termino a definir: definicion
Las listas se pueden anidar. Por ejemplo podemos anidar una lista con viñetas dentro de una lista numerada: <OL> <LI>uno
<UL><LI>subpunto a</LI>
<LI>subpunto b</LI>
<LI>subpunto c </LI></UL>
<LI>dos</LI> <LI>tres</LI> </OL>

Que se verá en pantalla como:

uno
- subpunto a
- subpunto b
- subpunto c
dos
tres

CARACTERES ESPECIALES

Como hemos estado viendo hay ciertos caracteres que el browser interpreta como parte del codigo html y por lo tanto al encontrarlos no los presentará en pantalla como tales sino que tratará de interpretarlos, ellos son: < > # / " así como los tildes (los browsers modernos leen normalmente los tildes, solo los antiguos no los reconocen).
Para que el browser presente en pantalla estos simbolos debemos escribirlos de la forma que se explica en la siguiente lista:

Código Resultado en pantalla:

&quot "

&lt <

&gt >

&amp &

&aampacute; á

é é

í í

ó ó

ú ú

EN RESUMEN:
El tag  puede ir acompañado de los siguientes parámetros:
SIZE= "x" (x es un numero del 1 al 7)
COLOR="xxxxx" (xxxxx es un color en ingles o en codigo hexadecimal)
FACE="xxxxx" (donde xxxxx es un tipo de fuente (arial, tahoma, etc)

Otros tags que afectan el texto son:
 cursiva
 negritas
 subrayado
 separa el texto en parrafos
 separa en texto en punto y aparte
<CENTER> centra el texto en la pantalla

IR A LECCION 3