[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 |
(desde
el 6-6-96)(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...
- 1. Comandos básicos
- 2. Imágenes
- 2.1. Imágenes
alineadas en el texto
- 2.2. Imágenes no
alineadas con el texto
- 2.3. Imágenes
con texto alternativo
- 3. Enlaces
- 4. Tablas
- 5. Funciones especiales
- 5.1. Tamaños de
letra
- 5.2. Definición
del cuerpo de la página (colores y fondos)
- 5.3. Formularios
para la captura de datos
- 6. Recomendaciones
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:
- Inicio de un documento
HTML
- Inicio del
título.
- Título (que
conviene poner para identificar la página de cara al visitante).
- Final del
título.
- Inicio del
cuerpo de la página, esto es, de aquello que queremos visualizar.
- Fin del cuerpo
de la página.
- Fin del
documento HTML.
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.
A partir de ahora, asumiremos que el código a
introducir figura entre las órdenes <body> y </body>.
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. |
|
Código HTML |
|
HTML no reconoce los finales de línea. Por
esa razón, aunque |
|
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, 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.
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> |
|
Visualización |
|
El texto preformateado |
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> |
|
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> |
|
Visualización |
|
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: |
|
Visualización |
|
Esto es una lista no ordenada:
|
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> |
|
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> |
|
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)