1.
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de la siguiente manera:
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente.
Lo que haya entre ambas etiquetas estará afectado por ellas. Por ejemplo, todo el documento HTML debe estar entre las
etiquetas <HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
Un documento HTML en sí está dividido en dos zonas principales:
* La cabecera, comprendida entre las etiquetas <HEAD> y </HEAD>
* El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro de la cabecera hay información del documento, que no se ve en la pantalla principal del navegador que es utiliza-
do para visualizar el documento HTML, principalmente la información encontrada en la cabecera es el título del docu-
mento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido,
pues será lo que vean los demás cuando añadan nuestra página a su lista de favoritos (o bookmark).
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.)
Por tanto, la estructura de un documento HTML queda de esta manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
JL-Curso de HTML 2
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.
JL-Curso de HTML 3
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>
<LI> Un elemento
<LI> Otro elemento
<LI> Otro más
<LI> etc.
</UL>
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>
<LI> Sardina
<LI> Bacalao
</UL>
<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>
<LI> Primer Elemento
<LI> Segundo Elemento
<LI> Tercer Elemento
<LI> etc.
</OL>
Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.
JL-Curso de HTML 4
