Sección Informática

Documentos HTML

El HTML (Hyper Text Markup Language) es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto presentado de forma estructurada, con enlaces (links) que conducen a otros documentos o a otras fuentes de información (por ejemplo bases de datos) que pueden estar en tu propia máquina o en máquinas remotas de la red. Todo ello se puede presentar acompañado de cuantos gráficos estáticos o animados y sonidos seamos capaces de imaginar.
Por supuesto, la estética de los documentos escritos en HTML no se limita a texto digamos normal; consigue todos los efectos que habitualmente se pueden producir con un moderno procesador de textos: negrita, cursiva, distintos tamaños y fuentes, tablas, párrafos tabulados, sangrías, incluso texto y fondo de página de colores, y muchos más...

¿Cómo funciona esto?

Básicamente, la cosa es simple: la pieza clave es el "browser", "navegador", "visualizador" o "cliente" o como quieras llamarle, HTML, es decir, el programa que ahora mismo estás utilizando para ver esto. Todas las codificaciones de efectos en el texto que forman el lenguaje HTML no son más que instrucciones para el visualizador. Partiendo de esto, se entiende el porqué no se ve lo mismo con todos los visualizadores. Depende de comó estén diseñados y para qué versión de lenguaje estén diseñados.
Así pues, en esencia, una página escrita en HTML no es más que texto normal, escrito con cualquier editor, y al que, cuando se le quiere dar algun aspecto especial, como por ejemplo el tamaño de la letra, habrá que acompañar de ciertos códigos para indicar el efecto deseado. A estos códigos se les llama elementos del lenguaje.

Introducción al HTML

Elementos en un documento HTML

A las instrucciones que forman el lenguaje HTML se les llama elementos . La notación de los elementos consiste en los símbolos < y > que encierran dentro una instrucción.
Los elementos pueden ser llenos o vacíos.

Elementos llenos

Se forman escribiendo la instrucción correspondiente seguida del texto al que se quiere aplicar la instrucción y se termina repitiendo la instrucción pero con una barra inclinada inmediatamente antes de la misma.
Por ejemplo, el elemento H1 que sirve para dar el máximo tamaño al texto, se escribirá:
<H1> Texto de prueba </H1>.
y este sería el resultado:

Texto de prueba


Si olvidas poner </H1> todo el resto de la página tendrá el mismo tamaño grande.

Elementos vacíos

Los elementos vacíos se escriben como los llenos, pero no es necesario poner la instrucción repetida al final con una barra. Esto se debe a que estos elementos no producen un efecto sobre el texto.
Generalmente se utilizan para separar bloques de texto, y por tanto no es necesario indicar su fin.
Empiezan y terminan en el mismo punto.
Por ejemplo, el elemento <HR> que sirve para dibujar una linea horizontal en la pantalla, se escribirá:
<HR>
Y este sería el resultado:


Elementos con argumento

Algunos elementos se escriben con argumento. Es como pasarle parámetros a la instrucción, y se llaman atributos del elemento.
Por ejemplo, el elemento <A> que sirve para hacer un link (enlace) con otro documento, se escribirá:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>.
Este es un elemento lleno donde al atributo HREF se le asigna el valor que aparece entre comillas:
"http://www.miservidor.es/mifichero.htm". El texto al que afecta este elemento es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.es.
Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres en el lugar adecuado. Por ejemplo, el elemento <H1> combinado con <I> que sirve para generar texto en itálica, se escribirá:
<H1><I>Texto de prueba </I></H1>.
y este sería el resultado:

Texto de prueba


Estructura de un documento HTML

Los documentos escritos en HTML estan estructurados en dos partes diferenciadas: la HEAD (cabecera) y el BODY (cuerpo).
Ejemplo de documento
Si escribes:
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>
<!-- Esto es un comentario-->
<BODY>
<H1> Esto es una "demo" de documento HTML </H1>
Esto es el más sencillo de los documentos HTML.
</BODY>
</HTML>
El elemento <HTML> </HTML> no es obligatorio. Solo sirve como identificación del tipo de contenido del fichero para ciertos programas que hacen cambios masivos en muchas páginas a la vez.
Para escribir comentarios en la página (que sólo se ven en el texto fuente, pero no en el visualizador) se utilizará el elemento <!-- -->
Puedes ver su aspecto real pulsando aquí.

Esquema de tipos de un documento HTML

Cuando un visualizador recibe un fichero, antes de mostrarlo necesita saber el tipo de contenido que éste tiene, a fin de procesarlo adecuadamente. No es lo mismo recibir un documento de texto que una fotografía en formato GIF, o un vídeo en formato MPG, o si lo que estamos intentando es transferir un fichero.
En cada caso, el visualizador pondrá en juego distintas habilidades, de las muchas que posee.
Si el fichero procede de un servidor http remoto, (es decir un servidor WWW; http es el nombre del servicio invocado), éste se encargará de decirle al visualizador cuanto necesite saber, pero si lo que hay que procesar es un fichero local, la única forma de saberlo es por la extensión del fichero.
La extensión de un fichero son las tres o cuatro letras (depende del sistema operativo con el que se trabaje) que hay después del nombre del fichero y que están separadas del mismo por un punto.
Por ejemplo, esta página se llama estruc.htm. Las tres letras que hay después del punto (htm) son la extensión del fichero. Las otras, las que están delante del punto, son el nombre del fichero.
Hay que tener presente que las extensiones de 4 o más letras son propias de sistemas operativos como Unix, Macintosh o Windows95 y las de 3 o menos del DOS.
Estas son algunas de las extensiones stándard más comunes y sus contenidos:

.html o .htm
   Documento HTML. Contine texto e instrucciones HTML que serán interpretadas.
.text o .txt
   Contiene texto plano. El visualizador presentará todo el fichero como si fuera un único bloque de texto y no interpretará ninguna instrucción HTML que pudiera llevar. Esto lo hará con cualquier fichero que lleve una extensión desconocida o simplemente no lleve ninguna.
.gif
   Contiene un fichero de imagen en formato GIF.
.xbm
   Contiene un fichero de imagen en formato X-Bitmap (blanco y negro).
.xpm
   Contiene un fichero de imagen en formato X-Pixmap (color).
.jpeg o .jpg
   Contiene un fichero de imagen en formato codificado jpeg.
.mpeg o .mpg
   Contiene un fichero de imagen de video o cine (en movimiento).
.au
   Contiene un fichero de audio (sonido) codificado en aiff-encoded.
.mid
   Contiene un fichero de audio (sonido) generado con secuenciadores midi típicos de Windows.
.avi
   Contiene un fichero con video y sonido típico de Windows95.
.exe
   Contiene un fichero binario ejecutable en DOS.
.hqx
   Contiene un fichero binario ejecutable en Macintosh.
.Z o .zip
   Contiene un (o varios) fichero/s comprimido/s de cualquier clase. Para poder utilizarlo hay que indicarle al visualizador una herramienta de compresión-descompresión.

En el entorno WWW se utilizan los MIME types (Multipurpose Internet Mail Extension) para definir el tipo de un fichero transferido. El visualizador determina desde el MIME type cómo hay que tratar cada fichero.
Los visualizadores tienen una configuración de los mapas de tipos aceptables, e instrucciones de cómo proceder en cada caso. Algunos tipos son tratados directamente por el propio visualizador (p.ej.: htm, gif, txt) mientras que para otros necesitan de una herramienta auxiliar adecuada, que hay que indicar al visualizador, para que sea llamada en el momento preciso (p.ej.: zip, mpg, au).
Ahora que ya sabes qué son las extensiones de fichero, es el momento de aclarar una cuestión importante:
Los documentos HTML los puedes escribir con lo que quieras... Siempre que los salves en modo Solo Texto. Es decir, que si utilizas, por ejemplo, Word de Windows o de MAC, por defecto estos programas salvan en formato Word. Y aunque luego los renombres como documentos .htm o .html, el formato interno sigue siendo Word.
Tampoco vale dejarlos con la extensión .txt que les dejan la mayoría de editores al salvarlos en modo Solo Texto. No serían interpretados correctamente. Por lo tanto si tienen extensión .txt (y por supuesto son .txt), entonces puedes renombrarlos a .htm, o bien en el momento de guardarlos en formato Solo Texto no dejar la extensión por defecto .txt y darle ya directamente la extensión .htm.
Algunos procesadores de texto, ya incluyen entre sus tipos el .htm. Si es así lo que hacen es eliminar la codificación propia, y convertirla a elementos de HTML. Por ejemplo, si tienes un texto en itálica, automáticamente es convertido al elemento <I>, etc...

Cabecera (HEAD) de un documento HTML

La HEAD es la primera de las dos partes en que se estructura un documento HTML.
En la HEAD reside información acerca del documento, y generalmente no se ve cuando se navega por él. En la HEAD se pone el elemento lleno <TITLE> que es una breve descripción que identifica el documento. Es lo que el visualizador se guarda en el "Bookmarks", con lo que crea la lista que aparece en la orden "Go" de la barra de órdenes y lo que aparece en la esquina superior izquierda cuando se imprime el documento.
No hay que confundir el elemento <TITLE> con el nombre del fichero.
Por ejemplo, esta página está contenida en un fichero llamado head.htm y el texto de su <TITLE> es: Head de un documento. Se escibirá asi:

<HEAD>
<TITLE>Head de un documento </TITLE>
</HEAD>
Dentro de la HEAD puede utilizarse otro elemento: META. Por ejemplo, si se escribe:
<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10">
</HEAD>

Esto hace que el visualizador vuelva a cargar la página activa al cabo de 10 segundos. También puede hacerse a un servidor. Así:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm">
</HEAD>

Utiliza esto con precaución. Si sabes que el contenido de la página no va a cambiar, es inútil hacer esto, y si lo haces contra un servidor, puedes sobrecargarlo. Este elemento, sólo tendrá utilidad en casos muy especiales.
Hay otros elementos que pueden aparecer en la HEAD, como ISINDEX, NEXTID, LINK o BASE, pero son de uso muy especializado y poco corriente, algunos ya en desuso, y ninguno obligatorio (<TITLE> sí lo es).

Cuerpo (BODY) de un documento

El cuerpo (BODY) es la segunda y última de las dos partes en que se estructura un documento HTML.
Por supuesto es obligatoria, ya que es aquí donde reside el verdadero contenido de la página, y por tanto, al contrario de la HEAD sí se ve cuando navegamos por ella.
Se escibirá asi:

<BODY>
texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto
</BODY>

En las siguientes páginas se analizan los elementos más habituales del lenguaje que deben escribirse en esta parte del documento.

Tamaños y tipos de letra en HTML

Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno <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>
<H6> Texto de prueba (H6)</H6>

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)
Texto de prueba (H6)

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.
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.
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, por lo que valor puede ser positivo (+) o negativo (-) respecto a 3. Una gran ventaja de esta notación respecto a la anterior 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:

AAA AAA AAA

Se puede cambiar el tamaño por defecto (3) de toda la página con el elemento <BASEFONT SIZE=valor>. El texto tomará el 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.
Con la versión 3.0 de Netscape se ha implementado un nuevo 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 forzar 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 12345 con tipo ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL FONTS</FONT>

Se verá:

Texto de prueba 12345 con tipo ARIAL
Texto de prueba 12345 con tipo TIMES NEW ROMAN
Texto de prueba 12345 con tipo COURIER NEW
Texto de prueba 12345 con tipo COURIER
Texto de prueba 12345 con tipo ROMAN
Texto de prueba 12345 con tipo SMALL FONTS

Por supuesto, este atributo es compatible con todos los demás ya conocidos, como color y tamaño. Por ejemplo, si escribes:

<FONT FACE="impact" SIZE=6 COLOR="red"> Texto de prueba 12345 con tipo IMPACT</FONT>

Se verá:

Texto de prueba 12345 con tipo IMPACT

Se pueden hacer todas la combinaciones que se quieran, pero hay que tener presente que si en la máquina cliente no está instalada una determinada fuente, ésta no se verá y en su lugar aparecerá la fuente por defecto del visualizador. No es interesante por tanto, definir tipos raros, que probablemente, no llegarán a verse nunca.



Texto en color

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. Hay que tener presente que algunos no se verán o se verán mal si la máquina no soporta 256 colores. Por supuesto, este efecto es anidable con el de tamaño y todos los demás.
Si escribes:

<B><FONT COLOR="red">Texto ROJO </FONT> <br>
<FONT COLOR="blue">Texto AZUL </FONT> <br>
<FONT COLOR="navy">Texto AZUL MARINO </FONT> <br>
<FONT COLOR="green">Texto VERDE </FONT> <br>
<FONT COLOR="olive">Texto OLIVA </FONT> <br>
<FONT COLOR="yellow">Texto AMARILLO </FONT> <br>
<FONT COLOR="lime">Texto LIMA </FONT> <br>
<FONT COLOR="magenta">Texto MAGENTA </FONT> <br>
<FONT COLOR="purple">Texto PURPURA </FONT> <br>
<FONT COLOR="cyan">Texto CYAN </FONT> <br>
<FONT COLOR="brown">Texto MARRON </FONT> <br>
<FONT COLOR="black">Texto NEGRO </FONT> <br>
<FONT COLOR="gray">Texto GRIS </FONT> <br>
<FONT COLOR="teal">Texto TEAL </FONT> <br>
<FONT COLOR="white">Texto BLANCO </FONT> <br>
</B>

Se verá:

Texto ROJO
Texto AZUL
Texto AZUL MARINO
Texto VERDE
Texto OLIVA
Texto AMARILLO
Texto LIMA
Texto MAGENTA
Texto PURPURA
Texto CYAN
Texto MARRON
Texto NEGRO
Texto GRIS
Texto TEAL
Texto BLANCO
He aquí una combinación de colores y tamaños:
Si escribes:

<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT>
<FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>

Resulta:

Esto es una Prueba

Los colores también se pueden definir en hexadecimal (por ejemplo el rojo es <FONT COLOR=#FF0000>). Cuando son colores básicos, como los del ejemplo de arriba, es más cómodo escribir el nombre aunque sea en inglés, pero cuando se trata de definir un color que "no tiene nombre" no hay más remedio que usar la codificación hexadecimal. En el índice encontrarás una tabla con los códigos de colores.


Cambios de párrafo y de línea. Línea horizontal. Divisiones de texto.

Para definir los saltos de párrafo se utiliza el elemento lleno <P> </P> (por Paragraph). No suele utilizarse el cierre </P>, ya que el texto continuará normalmente hasta que encuentre otro salto <P>
Se escribirá así:

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

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

Como puede verse, hay un línea en blanco entre los dos bloques. El efecto del elemento <BR> (por BReak) es el mismo, pero sin esa línea vacía.

Se escribirá así:

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

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

El elemento <P> admite tres atributos: ALIGN=LEFT (por defecto) ALIGN=RIGHT y ALIGN=CENTER
Se escribirán así:

<P ALIGN=LEFT>
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
<P ALIGN=RIGHT>
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
<P ALIGN=CENTER>
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3

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 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 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2

Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3

Un elemento que se comporta de forma parecida a <BR> es <DIV> pero que admite los mismos atributos que <P>: ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER
Se escribe así:

<DIV ALIGN=LEFT>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
</DIV>
<DIV ALIGN=RIGHT>
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
< /DIV>
<DIV ALIGN=CENTER>
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
</DIV>
Fíjate en que aquí sí se utiliza el cierre </DIV>. Este sería el resultado:

texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3

Otro interesante efecto es el elemento lleno <BLOCKQUOTE> que sirve para presentar párrafos adentrados (como si estuviesen tabulados).
Se escribirá así:

<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>
Y este sería el resultado:

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Fíjate que en este ejemplo hay un anidamiento, y por tanto, debe haber dos cierres </BLOCKQUOTE> al final.
Otro separador de bloques de texto es el elemento vacío <HR> (por Horizontal Rule). Este sería el resultado:
Se puede cambiar su apariencia añadiéndole el atributo <NOSHADE>. Así:

<HR NOSHADE>
El resultado es:

El elemento <HR> admite dos parámetros: WIDTH y SIZE. El primero define la longitud de la línea y el segundo su anchura. No es obligado usar los dos a la vez.
Por ejemplo, si escribes:
<HR WIDTH=400 SIZE=5>
El resultado será:

El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en número de puntos (píxels), o en tantos por ciento referidos al ancho total de la ventana. Así:
<HR WIDTH=80% SIZE=5>
El resultado será:

Además se puede indicar su posición respecto a los márgenes de la ventana con los atributos ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT. Por ejemplo:
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>
El resultado será:

O bien:
<HR WIDTH=80% SIZE=5 ALIGN=RIGHT>
El resultado será:

Textos preformateados

Posiblemente ya te habrás dado cuenta de que, cuando escribes un texto con tu editor, a la hora de ver lo hecho con el visualizador, algunas cosas no están como tú las pusiste... Como por ejemplo poner dos o tres espacios en blanco entre palabras, o intentar encolumnar los datos de una pequeña tabla: ¡acaba todo junto y en la misma línea!
Este efecto se puede eliminar con el elemento lleno <PRE> . Al texto que va dentro del elemento PRE se le pueden aplicar todos los elementos que se quiera, siempre que sean elementos que no alteren la posición del texto. Por ejemplo si utilizas el elemento <H>, se rompería el preformateo pero no ocurrirá lo mismo con <FONT SIZE>. Por defecto, los textos preformateados se ven con tipo de letra "curier", es decir de paso fijo y los no preformateados en "Times New Roman". Estos tipos son configurables en el visualizador.
Se escribirá así:

<PRE>
1 2 3 4 5 6 7 <B>Esto es una demostracion de</B>
8 9 10 11 12 13 14 texto preformateado.
15 16 17 18 19 20 21
</PRE>
y este sería el resultado: 
	1 2 3 4 5 6 7 Esto es una demostracion de
	8 9 10 11 12 13 14 texto preformateado.
	15 16 17 18 19 20 21
Dentro de un bloque preformateado también se pueden poner links a otros documentos y codificación para caracteres especiales (se verá más adelante lo que es eso).
Este elemento admite el parámetro WIDTH=x donde x define la máxima longitud de línea visualizada.
El navegador, por defecto, elimina varios espacios en blanco y los convierte en uno solo. Si lo que deseas es separar una palabra de otra más de un espacio, se puede recurrir a una instrucción especial que le indica esto al navegador, pero hay que darla codificada; funciona como un avance de carro, y aunque en pantalla cumple su objetivo, cuando se imprime la página, no todas las impresoras son capaces de interpretarlo correctamente. Se escribe: &#160; y como alias se utiliza: &nbsp;
Por ejemplo, si escribes:

texto texto&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;texto texto
Se ve así:

texto texto     texto texto

Otros efectos en el texto

Una o varias líneas de texto, pueden estar centradas respecto a los márgenes de la ventana. Esto afecta sólo al texto que hay entre <CENTER> y </CENTER>, pero no a todo el párrafo. Por ejemplo:
texto texto texto texto texto texto texto texto texto texto texto texto
<CENTER>texto centrado texto centrado</CENTER>
texto texto texto texto texto texto texto texto texto texto texto texto
Se verá:

texto texto texto texto texto texto texto texto texto texto texto texto
texto centrado texto centrado
texto texto texto texto texto texto texto texto texto texto texto texto

Esto, además de a texto sólo, se puede aplicar a una tabla, una imagen o cualquier otra cosa.
Quedan algunos otros elementos que modifican el aspecto del texto. Algunos, aparentemente, hacen la misma cosa, y otros no funcionan con el visualizador de Netscape, por lo que se omiten aquí.

Texto en negrita:
   <B>Texto en negrita</B>

Texto realzado:
   <STRONG>Texto realzado</STRONG>

Texto en itálica:
   <I>Texto en itálica</I>

Texto con énfasis:
   <EM>Texto con énfasis</EM>

Texto ejemplo de código:
   <CODE>Texto ejemplo de código</CODE>

Texto teletipo:
   <TT>Texto teletipo</TT>

Texto subrayado:
   <U>Texto subrayado</U>

Texto tachado:
   <STRIKE>Texto tachado</STRIKE>

Texto de dirección:
   <ADDRESS>Texto de dirección</ADDRESS>

Texto superíndiceTexto normal

   <SUP>Texto Superíndice</SUP>

Texto subíndiceTexto normal

   <SUB>Texto Subíndice</SUB>

Texto grande
   <BIG>Texto grande</BIG>

Texto pequeño
   <SMALL>Texto pequeño</SMALL>

| Anterior | 1    2 | Siguiente |



Waldylei Yépez by DarkisX.Com
http://darkisx.com/staticpages/index.php/html