ORIGEN:

Fecha

3-2-2006

------------------------------------------------------

[Dpto. Psicología Básica y Metodología] [Facultad de Psicología] [Universidad de Murcia]
[Página Principal|Conceptos básicos] [Imágenes][Enlaces] [Tablas] [Funciones Especiales][Recomendaciones]

Tutorial HTML

Gracias por su visita, que es la número (desde el 6-6-96)
(c) Juan José López García [jjloga@fcu.um.es] (Abril-1996)
Dpto. Psicología Básica y Metodología
Facultad de Psicología. Universidad de Murcia
Apdo. 4021, 30080 Murcia (España)

(Esta página está optimizada para NetScape 2.0 y una resolución gráfica de 800x600 con 256 colores)

CONTENIDOS

Introducción
La Estructura básica del documento HTML
Allá vamos...

Introducción

HTML es un lenguaje de programación que se utiliza para la creación de páginas en la WWW. Por página entenderemos el documento que aparece en el visualizador.

HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En última instancia es el visualizador el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas funciones, no podremos comprobarlas.

En este tutorial se expondrán los comandos fundamentales de la programación HTML. Para hacer comprensible estos comandos, indicaré por una parte, las secuencias de comandos y por otra el resultado de dichas secuencias, de la siguiente forma:

Código HTML
secuencia de <b>comandos</b>
Visualización
secuencia de comandos


Los comandos HTML tienen una estructura muy básica. Son órdenes, algunas de una sola letra, contenidas entre los signos < y >. Con frecuencia, los comandos tienen una función de inicio y otra de fin.

La estructura base del documento HTML [T]

Es recomendable que todo fichero HTML siga la siguiente estructura:

<HTML>
<TITLE>Título de la ventana</TITLE>
<BODY>
......comandos y texto......
</body>
</HTML>

Como puedes comprobar, estos comandos tienen una orden de inicio y otra de fin, que no es más que el mismo comando con el signo / antecediéndolo. Los comandos pueden figurar en letras mayúsculas o en minúsculas, indistintamente. La secuencia lógica de estas órdenes es la siguiente:

Allá vamos... [T]

Ya podemos iniciar el trabajo con HTML. Necesitas dos herramientas, un visualizador de HTML (son populares los productos Netscape o Mosaic), y un editor de texto, como el bloc de notas (notepad) de Windows. También se puede utilizar un procesador de textos, pero los documentos deberán almacenarse en modo texto (ASCII ó ANSI).

Cuando almacenes un fichero, es conveniente que le pongas por extensión (.htm), que es el tipo de fichero que por defecto buscará el visualizador (aunque puede visualizar ficheros con otra extensión). Para visualizar un fichero, utiliza la orden Open File del menú File de tu visualizador. Siempre que realices una modificación en el código y la almacenes en el mismo fichero, utiliza la función reload del visualizador, para comprobar los cambios.

1. Comandos Básicos [T]

A partir de ahora, asumiremos que el código a introducir figura entre las órdenes <body> y </body>.

1.1 Saltos de línea [T]

HTML no reconoce los finales de línea del editor de texto. Así, estas dos secuencias de comandos producen el mismo resultado:

Código HTML
HTML no reconoce los finales de línea.
Por esa razón, aunque utilicemos distintas líneas
en nuestro fichero, serán visualizadas de forma
continua.
No te preocupes, hay dos comandos básicos para saltar de
línea. El primero produce un salto de línea, <BR>
pasando el texto a la línea siguiente. El segundo,
define un final de párrafo <P>
dejando una línea en blanco de separación con
el texto siguiente.
Código HTML
HTML no reconoce los finales de línea. Por esa razón, aunque
utilicemos distintas líneas en nuestro fichero, serán visualizadas
de forma continua. No te preocupes, hay dos comandos básicos para
saltar de línea. El primero produce un salto de línea, <BR>pasando
el texto a la línea siguiente. El segundo, define un final de párrafo
<P>dejando una línea en blanco de separación con el texto siguiente.
Visualización
HTML no reconoce los finales de línea. Por esa razón, aunque utilicemos distintas líneas en nuestro fichero, serán visualizadas de forma continua. No te preocupes, hay dos comandos básicos para saltar de línea. El primero produce un salto de línea,
pasando el texto a la línea siguiente. El segundo, define un final de párrafo

dejando una línea en blanco de separación con el texto siguiente.



Así, pues: <BR> desplaza el texto a la línea siguiente, y <P> también lo desplaza, dejando una línea de separación.

1.2 Tipos de letra [T]

Con HTML se pueden especificar distintos tipos de letra. Los básicos son negrita, cursiva y courier, que utilizan los códigos B, I, TT, respectivamente, como demuestra el siguiente código:

Código HTML
letra <B>negrita</B>, letra <I>cursiva</I> y letra <TT>courier</TT>.
Visualización
letra negrita, letra cursiva y letra courier.


Comprobarás que estos comandos necesitan el comando de finalización, para indicar el inicio y el final del tipo de letra.

Antes hemos comentado que HTML no respeta los finales de línea. Esto es parcialmente cierto, ya que dispone de un comando que mantiene el texto tal y como se introduce. A este texto se le denomina preformateado, y está contenido entre las órdenes <pre> y </pre>, como se muestra a continuación:

Código HTML
<pre>
El texto preformateado
respeta los finales de línea
sin necesidad de indicarlos.
El tipo de letra que utiliza es COURIER.
</pre>
Visualización
El texto preformateado
respeta los finales de línea
sin necesidad de indicarlos.
El tipo de letra que utiliza es COURIER.

1.3 Cabeceras [T]

HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se activan con el comando <Hn> y se desactivan con </Hn>, donde n es un número de 1 a 6. Estas son las cabeceras:

Código HTML
<h1>Cabecera tipo 1</h1>
<h2>Cabecera tipo 2</h2>
<h3>Cabecera tipo 3</h3>
<h4>Cabecera tipo 4</h4>
<h5>Cabecera tipo 5</h5>
<h6>Cabecera tipo 6</h6>
Visualización

Cabecera tipo 1

Cabecera tipo 2

Cabecera tipo 3

Cabecera tipo 4

Cabecera tipo 5
Cabecera tipo 6


Las cabeceras provocan un salto de línea, aunque no se le indique.

1.4 Listas [T]

La presentación de información en forma de listas se puede realizar de dos formas básicas: como listas ordenadas (<OL>...</OL>) y como listas no ordenadas (<UL>...</UL>). Las listas ordenadas anteceden a cada párrafo un número, y las no ordenadas una marca (círculo o cuadrado). En ambos casos, el número o la marca, sólo aparecerá si el párrafo se inicia con la orden <LI>. Un tercer tipo de listas, denominadas listas de definición, se utiliza para presentar la información sin marcas, ni números, sino jugando con los sangrados de los párrafos.

1.4.1 Listas Ordenadas (numeradas) [T]

Código HTML
<OL>
<LI>Las listas ordenadas presentan la información antecediendo a cada párrafo un número, siempre que a su inicio se especifique <B>LI</B>.
En caso de que no se especifique la orden <B>LI</B>, como ocurre aquí, la presentación de la información guardará el sangrado, pero el párrafo no se numerará.
<LI>Las listas pueden estar anidadas, de forma que a partir de un nivel de una lista puede generarse otra lista. Es suficiente con establecer un nuevo bloque de información entre las órdenes <b>OL</B> y <B>/OL</B>.
<OL>
<LI>Los anidamientos de listas permiten una estructuración muy deseable para clarificar la información.
<LI>Después de cerrar la lista, con la orden que sigue a este párrafo, volveremos a la lista principal.
</OL>
<LI>Asegurate de <I>cerrar todas las listas</I> (deben figurar tantos <B>OL</B> como <B>/OL</B>).
</OL>
Visualización

  1. Las listas ordenadas presentan la información antecediendo a cada párrafo un número, siempre que a su inicio se especifique LI.
    En caso de que no se especifique la orden LI, como ocurre aquí, la presentación de la información guardará el sangrado, pero el párrafo no se numerará.
  2. Las listas pueden estar anidadas, de forma que a partir de un nivel de una lista puede generarse otra lista. Es suficiente con establecer un nuevo bloque de información entre las órdenes OL y /OL.
    1. Los anidamientos de listas permiten una estructuración muy deseable para clarificar la información.
    2. Después de cerrar la lista, con la orden que sigue a este párrafo, volveremos a la lista principal.
  3. Asegurate de cerrar todas las listas (deben figurar tantos OL como /OL).

1.4.2 Listas No Ordenadas (no numeradas) [T]

La presentación de información en listas no ordenadas sigue las pautas comentadas para las ordenadas. Cuando se utilizan distintos niveles, la marca para cada nivel puede ser distinta, aunque es una cuestión que depende del visualizador. La marca aparecerá, como antes comentamos en las listas ordenadas, cuando el párrafo se inicie con la orden <LI>.

Código HTML
Esto es una lista no ordenada:
<UL>
<LI>Las listas no ordenadas se insertan entre los comandos <B>UL</B> y <B>/UL</B>.<BR> Esta línea no tiene marca; no está antecedida con la orden <B>LI</B>.
<LI>En este nivel iniciamos otras lista:
<UL>
<LI>Este es su primer nivel.
<LI>Este su segundo nivel.
</UL>
<LI>Final de la lista.
</UL>
Visualización
Esto es una lista no ordenada:
  • Las listas no ordenadas se insertan entre los comandos UL y /UL.
    Esta línea no tiene marca; no está antecedida con la orden LI.
  • En este nivel iniciamos otras lista:
    • Este es su primer nivel.
    • Este su segundo nivel.
  • Final de la lista.

1.4.3. Listas de definición [T]

Las listas de definición están contenidas entre las órdenes <DL> y </DL>. En el contenido de la lista se utilizan otras dos órdenes: <DT> para indicar un término, que no se sangrará, y <DD> para indicar su definición, que se sangrará. También pueden anidarse.

Código HTML
<DL>
<DT>Término
<DD>La orden <B>DT</B> marca un término de la lista. El término no será indentado al mismo nivel que su definición.
<DT>Definición
<DD>La definición se sangrará hacia la derecha, para resaltarla del término. Las listas de definición también pueden anidarse, incluyendo nuevos bloques de texto entre las órdenes <B>DL</B> y <B>/DL</B>.
</DL>
Visualización

Término
La orden DT marca un término de la lista. El término no será indentado al mismo nivel que su definición.
Definición
La definición se sangrará hacia la derecha, para resaltarla del término. Las listas de definición también pueden anidarse, incluyendo nuevos bloques de texto entre las órdenes DL y /DL.

1.5 Otros comandos básicos [T]

1.5.1 Alineación de párrafos [T]

Para centrar un párrafo, puedes utilizar la orden <CENTER> al principio y al final. Esta orden es específica de NetScape, y posiblemente no pueda apreciarse su efecto con otros visualizadores.

Código HTML
<CENTER>Este párrafo está centrado</CENTER>
Visualización
Este párrafo está centrado


A partir de la versión 3 de HTML (disponible en NetScape 2.0), un párrafo puede alinearse a la izquierda, centro o derecha. El párrafo en cuestión debe estar contenido entre las órdenes <P Align="left|center|right"></P>, utilizando la opción correspondiente.

Código HTML
<P Align="left">Este párrafo está alineado a la izquierda</P>
<P Align="center">Este párrafo está centrado</P>
<P Align="right">Este párrafo está alineado a la derecha</P>
Visualización

Este párrafo está alineado a la izquierda

Este párrafo está centrado

Este párrafo está alineado a la derecha


1.5.2 Intermitencia o parpadeo de texto [T]

Para hacer parpadear un texto, coloca antes y después de él la orden BLINK.

Código HTML
Esta orden es <BLINK>específica de NetScape</BLINK>, por eso es posible que no produzca su efecto en otros visualizadores.
Visualización
Esta orden es específica de NetScape, por eso es posible que no produzca su efecto en otros visualizadores.

1.5.3 Separadores horizontales [T]

Un recurso para adornar las páginas son las líneas horizontales, que se obtienen con la orden <HR>. Dependiendo de los visualizadores, este separador horizontal puede modificarse en longitud y en altura. La modificación en altura se realiza con la orden <HR size="n"> donde n representa la anchura de la línea en puntos. La longitud del separador puede modificarse con la orden <HR width="n">. Ambas órdenes pueden combinarse en un separador que, en cualquier caso, siempre aparecerá centrado. A continuación pongo algunos ejemplos:

<HR>
<HR size="20">
<HR width="200">
<HR size="20", width="200">

El resaltado de las líneas horizontales depende del color de fondo de la página, o de la imagen que se sitúe como fondo. Después analizaremos estos detalles.

[Página Principal|Conceptos básicos] [Imágenes][Enlaces] [Tablas] [Funciones Especiales][Recomendaciones]
(c) JuanJo López (4-96) - Facultad de Psicología - Universidad de Murcia (España)