SESIÓN 2: FORMATO DE TEXTO

CARACTERES ESPECIALES

Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado especial en HTML 

(por ej. "<" - menor que).

Para poder mostrarlos debemos usar su nombre en código.

Los nombres de las entidades están compuestos por el signo(&), luego el nombre de la entidad y al final (";" - punto y coma).

Los números de estos caracteres están compuestos por (&), luego (# - numeral), el número de la entidad y al final (";" - punto y coma).

Por ejemplo para mostrar el signo "<" debemos escribir &lt; o &#60;.

El uso más común de los caracteres especiales es el espacio en blanco. Si en un texto figuran 5 espacios en blanco seguidos, HTML automáticamente borra 4.

Para ingresar espacios en blanco usamos "&nbsp;" y HTML los dejará en su lugar.

Otro uso muy frecuente es el de insertar acentos en el código html por medio de los números de las entidades

SALTO DE LINEA

• Líneas divisorias: Se crean con la tag <hr> que no tiene tag de cierre ni lleva texto asociado. Se puede especificar el ancho de la línea con el siguiente atributo  <hr width="80%">.

• Saltos de línea: La tag <br> inserta un salto de línea donde se coloque. Puede colocar tantas como desee y se insertará un salto de línea por cada una de ellas.

TEXTO PREFORMATEADO  <PRE>

Ya dijimos que HTML elimina cualquier espacio en blanco adicional que se inserte pero nos encontramos con una excepción a esta regla cuando utilizamos las tags <pre>.....</pre>. Sin embargo esta tag convertirá el texto afectado a fuente monoespaciada (posiblemente Courier).

Esta tag se usaba para hacer tablas en versiones anteriores del lenguaje HTML ahora su utilidad puede reducirse a convertir a HTML, rápida y fácilmente, archivos de correo electrónico y publicaciones de grupos Usenet.

SEPARADORES <HR>

Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.

La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parámetro size.

Para escribir este parámetro en la etiqueta escribiremos “size=x”, siendo “x” el número del grosor de la franja. A continuación te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 10 y la segunda dos. La diferencia es abismal

<hr size="20" />

<hr size="2"  />

SANGRADO DE TEXTO  <BLOCKQUOTE> </BLOCKQUOTE>

Esta etiqueta nos permite realizar sangrados del texto. Es una etiqueta acumulativa, lo que quiere decir que podemos utilizar sucesivos niveles de sangrado.

<BLOCKQUOTE>Texto sangrado.

<BLOCKQUOTE>Texto sangrado. Segundo nivel.</BLOCKQUOTE>

</BLOCKQUOTE>

Texto sangrado.

Texto sangrado. Segundo nivel.

FORMATEAR EL TEXTO <FONT>

La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto comprendido dentro quedaría formateado tal y como estuviera indicado. Sin embargo, conceptualmente la marca FONT ha sido concebida para definir partes limitadas de texto. Por otro lado, mientras TEXT determina tan sólo en color del texto, la marca FONT puede definir el tipo utilizado, así como su tamaño y color.

Aquí tienes la sintaxis correcta de la marca:

<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT>

El atributo FACE="arial" indica el tipo que se visualizará; SIZE=5 el tamaño del tipo, que puede estar comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7); COLOR=red indica el color del texto (que puede expresarse asimismo en valores hexadecimales).

RESALTADO DEL TEXTO <B>

<B> Texto en negrita </B>

El texto comprendido entre estas marcas queda formateado en negrita (la B corresponde al inglés BOLD).

CURSIVA

<I> Texto en cursiva </I>

El texto comprendido entre estas marcas queda formateado en cursiva (la I corresponde al inglés ITALIC)

SUBRAYADO

<U> Texto subrayado </U>

El texto comprendido entre estas marcas queda subrayado aun sin ser un enlace (la U corresponde al inglés UNDERLINE).

Existe también la marca STRIKE para el texto tachado:

<STRIKE> Texto tachado </STRIKE>

PARRAFOS <P>

Para indicarle al navegador que queremos poner ese texto en un párrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>.

Así el texto quedará dentro de un párrafo, separado por un espacio en blanco por encima y uno por abajo.

El texto del párrafo lo puedes alinear utilizando la etiqueta align utilizando los parámetros “center” (para alinearlo al centro), “right” (para alinearlo a la derecha), “left” (para alinearlo a la izquierda) y “justify” (para justificar el texto).

Un ejemplo de esta etiqueta con sus respectivos parámetros es el siguiente:

<p align="center">Este texto se alineará al centro</p>

<p align="right">Este texto se alineará a la derecha</p>

<p align="left">Este texto se alineará a la izquierda</p>

ENCABEZADOS <H1>

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados tenemos que utilizar las etiquetas <h>.

Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño.

A continuación vamos a mostraros el código de los seis diferentes encabezados:

<h1> Texto muy grande</h1>

<h2>Texto grande</h2>

<h3>Texto algo más grande de lo normal</h3>

<h4>Texto normal</h4>

<h5>Texto pequeño</h5>

<h6>Texto muy pequeño</h6>

MARQUESINAS <MARQUEE>

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio "<marquee>" y su cierre "</marquee>".

El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos:

align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").

bgcolor: Con este atributo definiremos el color de fondo que le queremos dar a la marquesina donde está el texto en movimiento.

height y width: El primero marca la altura que tendrá la marquesina y el segundo la anchura de la misma.

scrollamount: Este atributo define la cantidad de píxeles que queremos que se desplace el texto en cada movimiento. Por ejemplo: <marquee scrollamount="3"> </marquee> significará que el texto que vaya dentro de esa etiqueta se moverá a razón de tres píxeles por movimiento.

scrolldelay: Éste nos define la velocidad del texto que está dentro de la marquesina. A menor numeración, mayor velocidad. Es decir, un texto irá más rápido si el scrolldelay es 5, que si el scrolldelay es 20.

loop: Este atributo nos determina si el movimiento se repetirá o no. Si queremos que el movimiento sólo se repita unas veces determinadas debemos indicárselo con un número, que será el número de veces que se repita. Si queremos que se repita sólo 10 veces, su loop será el siguiente: <marquee loop="10"> </marquee>

Si queremos que se repita debemos usar "infinite" o "-1". Si no especificamos nada, se repetirá constantemente.

direction: Sirve para definir la dirección del movimiento: "left" para la izquierda, "right" para la derecha, "top" para arriba y "down" para abajo.

behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se moverá de forma circular en el sentido que le hayamos marcado. Con behavior="scroll" conseguiremos el mismo efecto: el texto se moverá circularmente.

Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el behavior="alternate" el texto irá y volverá de un lado a otro de la marquesina.

Y el código de nuestro marquee es el siguiente:

<marquee bgcolor="#FFFFFF" width="50%" scrolldelay="100" scrollamount="5" direction="left" loop="infinite">Estás viendo el ejemplo que hemos hecho nosotros.</marquee>


LISTA ORDENADAS Y DESORDENADAS

• Listas Ordenadas

Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. La sintaxis correcta para elaborar listas ordenadas es:
<OL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

• Listas Desordenadas

Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos del elenco, por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras.
Las listas desordenadas constan de una sola marca de apertura y cierre <UL></UL> y tantas marcas de lista como voces hay que ordenar <LI>. La sintaxis correcta para definir una lista desordenada es:
<UL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>

ALINEACIONES

Disponer el texto con <DIV ALIGN> y <CENTER>

El elemento <DIV> se utiliza para alinear horizontalmente el texto a la izquierda, a la derecha o en el centro de la página. El atributo ALIGN es fundamental a este respecto.
<DIV ALIGN=left>Texto e imágenes a la izquierda</DIV>
Mueve a la izquierda los elementos contenidos dentro de sus marcas.
<DIV ALIGN=right>Texto e imágenes a la derecha</DIV>
Mueve los elementos a la derecha.
<DIV ALIGN=center>Texto e imágenes centrados</DIV>
Centra los elementos.