DANDO FORMA AL TEXTO
 |
2. DANDO FORMA AL TEXTO DEL DOCUMENTO HTML
Cuando escribimos en el documento el texto que queremos
que aparezca en la pantalla, veremos
que éste se acomoda
a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar
el texto en distintos párrafos
debemos usar la etiqueta <P>, (que tiene su correspondiente etiqueta de cierre
</P> pero no suele
ponerse)
El texto
puede tener unos encabezados, comprendidas entre las etiquetas
<H1> y </H1>, <H2> y </H2>, etc.
(hasta el número 6), siendo
el número indicativo del tamaño. El tamaño mayor
es el correspondiente al número
1.
Una etiqueta muy
interesante es la de centrado <CENTER> y </CENTER> (no la soportan
todos los navegadores, aunque sí la mayoría de ellos). Nos centra todo lo que esté dentro
de ella, ya sea texto,
imágenes, etc.
También tenemos
los separadores (horizontal rules), que se consiguen con
la etiqueta <HR> (no existe
la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como
la pantalla, y con la apariencia de estar embutida sobre el
fondo, como se puede observar a continuación:
Ejemplo
<HTML>
<HEAD>
<TITLE> Mi pagina en el Web - 1 </TITLE>
</HEAD>
<BODY>
<H1>
<CENTER> Primera
Pagina </CENTER> </H1>
<HR>
Esta es mi primera
pagina, aunque todavía
es muy sencilla. Como el lenguaje HTML no es difícil, pronto
estaré en condiciones de hacer cosas más interesantes.
<P> Aquí va un segundo párrafo, ¿ qué les
parece ?
</BODY>
</HTML>
Una etiqueta
puede estar anidada
dentro de otra.
En el ejemplo anterior lo está la etiqueta
<CENTER> dentro de la eti- queta <H1>.
Cuando queremos
poner un texto
sin ninguna característica especial,
lo ponemos directamente. La separación entre pá-
rrafos (dejando una línea en blanco) la conseguimos con la etiqueta
<P>.
Si queremos
separar los párrafos,
o cualquier otra cosa, pero sin dejar una línea en blanco, usamos una etiqueta
pensada para ello: <BR> (break, o romper). No
tiene etiqueta de cierre.
Al escribir el texto, si ponemos más
de un espacio en blanco
entre dos palabras observamos que el navegador
sólo recono- ce uno de ellos.
Si queremos forzarle
a que lo haga, debemos
poner el código
" " (non-breaking space).
Para destacar alguna parte del texto se pueden usar:
<B> y </B> para poner algo en negrita
(bold).
<I> y </I> para poner algo
en cursiva (italic).
Otra etiqueta
interesante es <PRE>
y </PRE>. El texto que se encuentre
entre ella estará preformateado, es decir
que aparecerá como haya
sido escrito y con una fuente de espaciado fijo
(tipo Courier). Se respetarán los espacios en blanco
y retornos del carro,
tal como estaban
en nuestro documento HTML. Es muy apropiada para confeccionar tablas
poco ela- boradas y otros
documentos similares.
Con la etiqueta
<TT> y </TT>
conseguimos que el texto
tenga un tamaño
menor y la apariencia de los caracteres de una máquina de escribir (typewriter). La diferencia con la anterior
es que no preformatea el texto, sino que únicamente cam- bia su apariencia.
La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para
destacar una cita
textual dentro del
texto general. Este párrafo está escrito entre ambas etiquetas. Deja márgenes a ambos lados,
por eso se usa para poner sangrías.
En las fórmulas
matemáticas puede interesar poder escribir índices y subíndices, que se
consiguen con las etiquetas
<SUP>
</SUP> y <SUB> </SUB> respectivamente.
Listas
A menudo nos
interesará presentar las cosas en forma de listas. Podemos escoger entre tres
tipos distintos:
*
Listas
desordenadas (no numeradas)
*
Listas
ordenadas (numeradas)
*
Listas
de definición.
Las listas desordenadas (Unordered Lists) sirven
para presentar cosas
que, por no tener un orden determinado, no necesi- tan ir precedidas por un número.
Su estructura es la siguiente:
<UL>
</UL>
<LI> Un elemento
<LI> Otro elemento
<LI>
Otro más
<LI> etc.
Es decir, toda la lista está dentro de la etiqueta
<UL> y </UL>, y luego cada elemento
va
precedida de la
etiqueta <LI>
(list ítem). Se puede anidar una lista
dentro de otra. Por ejemplo:
<UL>
<LI> Mamíferos
<LI> Peces
<UL>
</UL>
<LI> Sardina
<LI> Bacalao
<LI> Aves
</UL>
Las listas
ordenadas (Ordered Lists)
sirven para presentar elementos en un orden determinado. Su estructura es similar
a la anterior. La diferencia estriba
en que aparecerá automáticamente un número correlativo para cada elemento.
<OL>
</OL>
<LI>
Primer Elemento
<LI> Segundo Elemento
<LI> Tercer Elemento
<LI> etc.
Al igual que las listas desordenadas, también se pueden anidar
las listas ordenadas.
El tercer
tipo lo forman
las listas de definiciones. Como su nombre
indica, son apropiadas para glosarios (o definiciones de términos). Toda la lista debe
ir englobada entre
las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes:
* El nombre de la cosa a definir
, que se consigue con la etiqueta
<DT> (definition term).
* La definición de dicha cosa, que se consigue con la etiqueta
<DD> (definition definition).
<DL>
<DT> Una cosa a definir
<DD>
La definición de
esta cosa
<DT> Otra cosa a definir
<DD>
La definición de
esta otra cosa
</DL>
Comentarios
no visibles en la pantalla
A veces es muy útil escribir
comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar
posteriormente sobre lo que hicimos,
y que no queremos que se vean en pantalla.
Esto se consigue encerrando dichos comentarios entre estos dos
símbolos: <!–– y ––>
Ejemplo
<HTML>
<HEAD>
<TITLE> Mi pagina del Web - 2 </TITLE>
</HEAD>
<BODY>
<CENTER><H1>
Mis aficiones </H1></CENTER>
<HR>
Sin un orden particular,
mis <B> aficiones </B> son las siguientes:
<!–– Una lista sin orden alguno ––>
<UL>
<LI> El cine
<LI> El deporte
<UL>
</UL>
<LI>
Natacion
<LI>
Baloncesto
<LI>
La musica
</UL>
La musica que más me
gusta es <I> (en orden de preferencia): </I>
<!–– Una lista con un orden ––>
<OL>
</OL>
</BODY>
</HTML>
<LI> El rock
<LI> El jazz
<LI>
La musica clasica