Manuales
HTML básico
HTML 2ª. y CSS
Propiedades CSS
Javascript
Applets Java
CGIs

 
dHTML
Introducción
Cambiar formato
Mover capas
Mover con teclado
Visibilidad
Mover con el ratón
 
JavaScript
Barra de estado
Botones y menús
Validar formular.
Passwords
Abrir ventanas
Cargar frames
Volver atrás
Alertas
Ver navegador
Cargar imágenes
 
Creación de páginas web
© Paco Cascón Soriano
(diseño del índice tomado de la espléndida página jsworld.com)
Manual de HTML
Original de Luis Mariñas
(corregido y ampliado por Paco Cascón)

ÍNDICE DE CONTENIDOS


¿Qué es el HTML?

El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos. Estos documentos pueden ser mostrados por los visores de páginas Web en Internet, como Netscape, Mosaic o Microsoft Explorer. Por el momento no existe un estándar de HTML, aunque existen diferentes revisiones o niveles de estandarización, el 1.0, el 2.0 , el 3.0, el 3.2 y el 4.0, lo que produce que algunos visores no "comprendan" en su totalidad el contenido de un documento. En este manual se ha utilizado la revisión 3.2 de HTML. Esto quiere decir que algunas de las órdenes de HTML que aquí se indican puede que no sean reconocidas por algunos visores de páginas Web. Netscape 2.x y Microsoft Explorer 3.x reconocen prácticamente todas las órdenes HTML vistas en este manual. (Para los estilos, tendrá que ser Netscape 4.x).

Básicamente, el HTML consta de texto plano (ASCII) y una serie de órdenes a través de marcas o etiquetas (tags), que indican al visor que estemos utilizando, la forma de representar los elementos (texto, gráficos, etc...) que contenga el documento. En este manual nos referiremos a estas órdenes con la palabra "directiva". Un documento HTML se puede crear usando cualquier editor o procesador de textos que permita trabajar con texto ASCII.

Una directiva será un texto incluido entre los símbolos menor que < y mayor que >. Este texto será una orden que explique la utilidad de la etiqueta, y es indistinto que se escriba en mayúsculas o minúsculas. Las directivas de HTML pueden ser de dos tipos, cerradas o abiertas. Las directivas cerradas son aquellas que tienen una etiqueta que indica el principio de la directiva y otra que indica el final. La del final contendrá el mismo texto, añadiéndole al principio el carácter /. El efecto que define la directiva se aplicará sobre todo lo que esté incluido entre estas dos etiquetas. Entre ambas etiquetas se pueden encontrar otras directivas. Las directivas abiertas constan de una sola etiqueta.

Las directivas pueden contener modificadores que llamaremos "parámetros" o "atributos". En el caso de las directivas cerradas, se escriben sólo en la etiqueta de inicio y consisten, normalmente, en el nombre del parámetro y un valor, unidos por el carácter =. Si se incluyen varios, se separan por espacios y su orden es indistinto. Si el valor que toma el parámetro es más de una palabra, deberá escribirse entre comillas.

Ejemplos:

Directiva cerrada
<CENTER> Mi página Web </CENTER>

Directiva abierta
<HR>

Directiva con parámetros
<BODY bgcolor="#FFFFFF"> </BODY>

Los ficheros que contienen documentos HTML suelen tener la extensión .html o .htm. En este manual se han fijado los siguientes criterios a la hora de escribir la sintaxis de las directivas de HTML:

1º) Las directivas se indican en letra mayúscula y en negrilla.
2º) Los parámetros de las directivas se indican en letra minúscula y negrilla.
3º) El resto de elementos se indican en letra normal.
4º) Las palabras a resaltar en el texto se indican en cursiva y negrilla.


Estructura básica de un documento HTML

Un documento escrito en HTML contendría básicamente las siguientes directivas:

<HTML>
     <HEAD>
          <TITLE>
          </TITLE>
     </HEAD>
     <BODY>
     </BODY>
</HTML>
     Indica el inicio del documento.
     Inicio de la cabecera.
     Inicio del título del documento.
     Final del título del documento.
     Final de la cabecera del documento.
     Inicio del cuerpo del documento.
     Final del cuerpo del documento.
     Final del documento.

El documento se hallará situado en algún ordenador al que se pueda acceder a través de Internet. Para indicar la situación del documento en Internet se utiliza la URL (Uniform Resource Locator). La URL es el camino que ha de seguir nuestro visor a través de Internet para acceder a un determinado recurso, bien sea una página Web, un fichero, un grupo de noticias, etc. Es decir, lo que el visor de páginas Web hace es acceder a un fichero situado en un ordenador que está conectado a la red Internet. La estructura de una URL para una página Web suele ser del tipo http://dominio/directorio/fichero. El dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre del directorio de ese ordenador y fichero el nombre del fichero que contiene la página Web escrita en HTML. Por ejemplo:

http://ares.six.udc.es/cine/corunha2.html

Donde ....
http://
ares.six.udc.es
/cine/
corunha2.html
es el indicador de pagina Web
es el Dominio (nombre) del ordenador
es el Directorio dentro del ordenador
es el Fichero que contiene la página Web



Cabecera del documento

La directiva <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de la directiva <TITLE></TITLE>. Este título será el que aparezca en la barra de nuestro visor de páginas Web.

Ejemplo:

<TITLE>La página Web de Juan</TITLE>

Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. La directiva <META> indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Google, Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la página en sus bases de datos. La directiva <META> lleva generalmente dos parámetros, name y content.

Ejemplos:

<META name = "Descripción" content = "Mi página personal, Música y Películas">
Indica al visor la descripción de la página y sus contenidos principales.

<META name = "keywords" content = "música, películas, links">
Indica al visor las palabras clave para los buscadores de Internet.
<meta name="title" content="AgregaWeb">
Indica el título de la Página

Hay páginas para registrar automáticamente, por ejemplo: Agregaweb, Recursos gratis,...

Otro uso de la directiva <META> es la de indicar documentos con "refresco automático". Si se indica una URL se sustituirá el documento por el indicado una vez transcurridos el número de segundos especificados. Si no se incluye ninguna URL se volverá a cargar en el visor el documento en uso transcurridos los segundos indicados. Esto es útil para páginas que cambian de contenido con mucha frecuencia o para redireccionar a la persona que visita nuestra página Web a una nueva dirección donde se encuentra una versión actualizada de nuestra página Web.

Ejemplo :

<META http-equiv= "refresh" content = "15;url=http://www.pangea.org">
Transcurridos 15 segundos se accederá a la pagina Web de Pangea.

La directiva <BASE> indica la localización de los ficheros, gráficos, sonidos, etc... a los que se hace referencia en nuestra página Web. Si no se incluye esta directiva el visor entiende que dichos elementos se encuentran en el mismo lugar donde se encuentra nuestra página Web.

Ejemplo:

<BASE href = "http://www.jet.es/jose/">


Cuerpo del documento

La directiva <BODY></BODY> indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final de esta directiva donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc.... Esta directiva tiene una serie de parámetros opcionales que nos permiten indicar la "apariencia" global del documento:

background= "nombre de fichero gráfico"
Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si la imagen no ocupa todo el fondo del documento, esta será reproducida tantas veces como sea necesario.

bgcolor = "código de color"
Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro background. Aun así es bueno indicarlo ya que en el caso de que el visor que utilicemos tenga desactivado los gráficos sí se verá.

text = "código de color"
Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro.

link = "código de color"
Indica el color de los textos que dan acceso a un Hyperenlace. Por defecto es azul.

vlink = "código de color"
Indica el color de los textos que dan acceso a un Hyperenlace que ya hemos visitado con nuestro visor. Por defecto es azul oscuro.

El código de color es un número compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores "primarios", rojo, verde y azul. El código de color se antecede del símbolo #.

El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la proporción de color Verde y, las dos últimas, la proporción de color Azul. Estos números están en numeración hexadecimal. Esta numeración se caracteriza por tener 16 dígitos (en lugar de los 10 habituales). Estos dígitos son:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Combinando las proporciones de cada color primario obtendremos diferentes colores.

Ejemplos:
#000000
#FF0000
#00FF00
#0000FF
#FFFFFF
Color Negro
Color Rojo
Color Verde
Color Azul
Color Blanco

Cuando la gente no usa color verdadero, sino 256 colores hay que tener en cuenta que los navegadores sólo permiten ver con exactitud 216. Estos se conseguirán con ternas de parejas expresadas como: 00, 33, 66, 99, CC y FF. Cualquier otra combinación se visualizará como el color más parecido.

La paleta de colores de 216 que asegura una visión real de los colores en la web será:

FFFFFF FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCFFFF CCFFCC
CCFF99 CCFF66 CCFF33 CCFF00 99FFFF 99FFCC 99FF99 66FFFF
99FF66 99FF33 66FFCC FFCCFF 99FF00 33FFFF FFCCCC 33FFCC
00FFFF 66FF99 FFCC99 66FF66 66FF33 00FFCC 66FF00 33FF99
FFCC66 FFCC33 CCCCFF 33FF66 33FF33 00FF99 FFCC00 33FF00
00FF66 00FF33 00FF00 CCCCCC CCCC99 99CCFF CCCC66 CCCC00
CCCC33 99CCCC FF99FF 99CC99 66CCFF FF99CC 99CC66 66CCCC
99CC33 00CCFF 33CCFF 99CC00 FF9999 66CC99 FF9966 66CC66
33CCCC CC99FF 00CCCC FF9933 FF9900 66CC33 66CC00 33CC99
00CC99 CC99CC 33CC66 00CC66 CC9999 FF66FF 33CC33 33CC00
CC9966 00CC33 9999FF 00CC00 CC9933 CC9900 FF66CC 9999CC
FF6699 999999 6699FF FF6666 CC66FF 999966 6699CC 999933
FF6633 FF6600 FF33FF 3399FF 999900 669999 CC66CC 0099FF
FF33CC 3399CC CC6699 669966 FF00FF 339999 669933 669900
FF3399 0099CC 9966FF CC6666 009999 CC6633 CC6600 339966
FF00CC FF3366 009966 CC33FF FF3333 339933 009933 9966CC
FF3300 FF0099 339900 009900 6666FF CC33CC FF0066 996699
FF0033 FF0000 CC00FF CC3399 996666 6666CC 996633 996600
3366FF CC3366 CC00CC 9933FF 0066FF 666699 CC3333 CC3300
3366CC CC0099 9933CC 666666 666633 0066CC 9900FF 666600
CC0066 336699 993399 CC0033 6633FF 336666 006699 CC0000
993366 9900CC 336633 006666 336600 6633CC 3333FF 006633
993333 993300 6600FF 990099 006600 0033FF 663399 990066
3333CC 663366 6600CC 990033 0033CC 990000 3300FF 663333
663300# 660099 0000FF 333399 3300CC 003399 333300 660066
333333 003366 0000CC 660033 333300 660000 330099 003333
003300 000099 330066 330033 000066 330000 000033 000000

De cualquier forma la mayoría de los editores de HTML nos permiten obtener el código de color correspondiente escogiendo directamente el color de una paleta. Así mismo la mayor parte de los navegadores actuales tienen algunos colores predefinidos por lo que pueden ser referenciados por su nombre. La paleta de colores que se pueden poner con nombre es más limitada, sólo 140:

White Snow Seashell FloralWhite OldLace
Linen GhostWhite WhiteSmoke Gainsboro LightGrey
Silver DarkGray LightCyan Azure AliceBlue
Lavender LavenderBlush MistyRose MintCream Honeydew
Beige Cornsilk AntiqueWhite PapayaWhip Ivory
LightYellow LightGoldenrodYellow LemonChiffon PaleGoldenrod Khaki
BlanchedAlmond Bisque Moccasin Wheat NavajoWhite
PeachPuff LightSteelBlue LightBlue SkyBlue LightSkyBlue
DeepSkyBlue DodgerBlue CornflowerBlue SteelBlue RoyalBlue
Blue MediumBlue DarkBlue MediumSlateBlue SlateBlue
DarkSlateBlue Indigo Navy MidnightBlue MediumPurple
BlueViolet DarkViolet DarkOrchid DarkMagenta Purple
Thistle Plum Magenta Violet Orchid
MediumOrchid Pink LightPink HotPink DeepPink
PaleVioletRed MediumVioletRed Burlywood LightSalmon DarkSalmon
RosyBrown Salmon LightCoral Coral Tomato
OrangeRed Red IndianRed Crimson Firebrick
Brown Sienna SaddleBrown DarkRed Maroon
Tan SandyBrown Orange DarkOrange Chocolate
Peru DarkSeaGreen DarkKhaki Yellow Gold
Goldenrod DarkGoldenrod OliveDrab ForestGreen Green
Olive DarkOliveGreen DarkGreen SeaGreen MediumSeaGreen
LimeGreen YellowGreen Chartreuse GreenYellow LawnGreen
Lime MediumSpringGreen SpringGreen LightGreen PaleGreen
Cyan PaleTurquoise PowderBlue Turquoise MediumTurquoise
DarkTurquoise Aquamarine MediumAquamarine LightSeaGreen CadetBlue
DarkCyan Teal LightSlateGray SlateGray Gray
DimGray DarkSlateGray Black




Juego de caracteres del Documento.

Todos los visores de páginas Web actuales soportan todos los caracteres gráficos de la especificación ISO 8859-1, que permite escribir textos en la mayoría de los países occidentales.

De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido dos formas de representar caracteres especiales usando solamente el código ASCII de 7 bits. Para hacer referencia a estos caracteres se les asigna un código numérico o un nombre de "entidad". Asimismo hay caracteres que se utilizan para las directivas de HTML, por ejemplo < y >. Estos caracteres pueden ser representados por un código numérico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el símbolo & (ampersand) y terminan con el símbolo ; (punto y coma).

A continuación veamos una tabla con las principales entidades:

CarácterCódigoEntidad CarácterCódigoEntidad
! &#33; -- " &#34; --
# &#35; -- $ &#36; --
% &#37; -- & &#38; --
' &#39; -- ( &#40; --
) &#41; -- * &#42; --
+ &#43; -- , &#44; --
- &#45; -- . &#46; --
/ &#47; -- : &#58; --
; &#59; -- < &#60; --
= &#61; -- > &#62; --
? &#63; -- @ &#64; --
[ &#91; -- \ &#92; --
] &#93; -- ^ &#94; --
_ &#95; -- ` &#96; --
{ &#123; -- | &#124; --
} &#125; -- ~ &#126; --
  &#160; nbsp ¡ &#161; iexcl
¢ &#162; cent £ &#163; pound
¤ &#164; curren ¥ &#165; yen
¦ &#166; brvbar § &#167; sect
¨ &#168; uml © &#169; copy
ª &#170; ordf « &#171; laquo
¬ &#172; not ­ &#173; shy
® &#174; reg ¯ &#175; macr
° &#176; deg ± &#177; plusmn
² &#178; sup2 ³ &#179; sup3
´ &#180; acute µ &#181; micro
&#182; para · &#183; middot
¸ &#184; cedil ¹ &#185; sup1
º &#186; ordm » &#187; raquo
¼ &#188; frac14 ½ &#189; frac12
¾ &#190; frac34 ¿ &#191; iquest
À &#192; Agrave Á &#193; Aacute
 &#194; Acirc à &#195; Atilde
Ä &#196; Auml Å &#197; Aring
Æ &#198; AElig Ç &#199; Ccedil
È &#200; Egrave É &#201; Eacute
Ê &#202; Ecirc Ë &#203; Euml
Ì &#204; Igrave Í &#205; Iacute
Î &#206; Icirc Ï &#207; Iuml
Ð &#208; ETH Ñ &#209; Ntilde
Ò &#210; Ograve Ó &#211; Oacute
Ô &#212; Ocirc Õ &#213; Otilde
Ö &#214; Ouml × &#215; times
Ø &#216; Oslash Ù &#217; Ugrave
Ú &#218; Uacute Û &#219; Ucirc
Ü &#220; Uuml Ý &#221; Yacute
Þ &#222; THORN ß &#223; szlig
à &#224; agrave á &#225; aacute
â &#226; acirc ã &#227; atilde
ä &#228; auml å &#229; aring
æ &#230; aelig ç &#231; ccedil
è &#232; egrave é &#233; eacute
ê &#234; ecirc ë &#235; euml
ì &#236; igrave í &#237; iacute
î &#238; icirc ï &#239; iuml
ð &#240; eth ñ &#241; ntilde
ò &#242; ograve ó &#243; oacute
ô &#244; ocirc õ &#245; otilde
ö &#246; ouml ÷ &#247; divide
ø &#248; oslash ù &#249; ugrave
ú &#250; uacute û &#251; ucirc
ü &#252; uuml ý &#253; yacute
þ &#254; thorn ÿ &#255; yuml

Por lo tanto, la palabra página la podríamos escribir como:

página
p&aacute;gina
p&#225;gina

Si deseamos que cualquier visor de páginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o códigos para representarlas.




Espaciados y saltos de línea

En HTML sólo se reconoce un espacio entre palabra y palabra, el resto de los espacios serán ignorados por el visor.

EjemploSe verá como
Esto     es    una      frase
Esto es una frase

Asimismo tampoco se respetan las tabulaciones, retornos de carro etc... Para ello existen una serie de directivas que indican estos códigos. La directiva <PRE></PRE> obliga al visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc.. pero se verá con una fuente tipo máquina (courier).

EjemploSe verá como
<PRE>
Este texto      ha sido

preformateado .

</PRE>
Este texto      ha sido

preformateado .

Para indicar un salto de línea se utiliza la directiva <BR> y para un cambio de párrafo (deja una línea en blanco en medio) se utiliza la directiva <P>.

EjemploSe verá como
Este texto tiene<BR>saltos de línea y <P> de párrafo. Este texto tiene
saltos de línea y

de párrafo.

La directiva <P> tiene el parámetro opcional:

align = posición
Alinea el párrafo a la izquierda (left), a la derecha (right), lo centra (center) o lo justifica (justify). Este último parámetro sólo funciona en navegadores versiones 4 o superiores.

La directiva <HR> muestra una línea horizontal de tamaño determinable. Tiene los siguientes parámetros opcionales:

align = posición
Alinea la línea a la izquierda (left), a la derecha (right) o la centra (center).

noshade
No muestra sombra, evitando el efecto en tres dimensiones.

size = número
Indica el grosor de la línea en pixels.

width = % ó número
Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana del visor, o en pixels si indicamos un número sin porcentaje.

Ejemplo:

<HR align= center size= 20 width= 50%>


La directiva <HR> sin ningún parámetro mostrará una línea horizontal que ocupará todo el ancho de la página. Estas líneas sencillas son las que ves en este manual para separar las diferentes secciones.




Cabeceras

En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de las directivas <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el fin de la directiva será el afectado por las cabeceras. La cabecera <H1> será la que muestre el texto en mayor tamaño.

EjemploSe vería como
<H1>Texto de Prueba</H1>

Texto de prueba

<H2>Texto de Prueba</H2>

Texto de Prueba

<H3>Texto de Prueba</H3>

Texto de Prueba

<H4>Texto de Prueba</H4>

Texto de Prueba

<H5>Texto de Prueba</H5>
Texto de Prueba
<H6>Texto de Prueba</H6>
Texto de Prueba

Los textos marcados como "cabeceras" provocan automáticamente un retorno de carro sin necesidad de incluir la directiva <BR>. Por ejemplo:

EjemploSe vería como
<H3>Página de José</H3>Esta es mi página personal.

Página de José

Esta es mi página personal


Atributos del Texto

Para indicar atributos de texto (negrilla, subrayado, etc...) tenemos varias directivas. Algunas de ellas no son reconocidas por determinados visores de Internet, es por ello que según el visor que estés utilizando, verás el resultado correctamente o no.

AtributoDirectivaEjemploResultado
Negrita<B></B> <B>Texto de prueba</B> Texto de prueba
Cursiva<I></I> <I>Texto de prueba</I> Texto de prueba
Teletype<TT></TT> <TT>Texto de prueba</TT> Texto de prueba
Subrayado<U></U> <U>Texto de prueba</U> Texto de prueba
Tachado<S></S> <S>Texto de prueba</S> Texto de prueba
Parpadeo<BLINK></BLINK> <BLINK>Texto de prueba</BLINK> Texto de prueba
Superíndice<SUP></SUP> <SUP>Texto de prueba</SUP> Texto de prueba
Subíndice<SUB></SUB> <SUB>Texto de prueba</SUB> Texto de prueba
Centrado<CENTER></CENTER> <CENTER>Texto de prueba</CENTER> Texto de prueba

Por otro lado, la directiva <FONT></FONT> nos permite variar el aspecto del texto, con los siguientes parámetros:

size = valor
Da al texto un tamaño en puntos determinado.

size = +/- valor
Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el valor.

color = "código de color"
Escribe el texto en el color cuyo código se especifica.

face = "fuente_de_letra"
Permite cambiar la fuente de la letra, por ejemplo: Arial. Se pueden poner varias separadas por comas. De esa manera si el navegador no tiene la primara, probará con la segunda, etc. Por ejemplo: Helvetica, Arial, Sans Serif.
EjemploSe vería como
<FONT size = +2 color = "#FF0000"> Texto de prueba </FONT> Texto de prueba

El tamaño por defecto de la letra es 3. Pero la directiva <BASEFONT>, con el parámetro size permite cambiarlo.

Existen otras directivas que realizan las mismas operaciones que las antes vistas en los atributos del texto.

DirectivaHace lo mismo que
<STRONG></STRONG> <B></B>
<CITE></CITE> <I></I>
<STRIKE></STRIKE> <S></S>

Para sangrar el texto se puede utilizar la directiva <BLOCKQUOTE></BLOCKQUOTE>

Para incluir comentarios en la página Web que no sean mostrados en la página, se utiliza la directiva <!-- -->.

Ejemplo:

<!-- Esto es un comentario sobre mi página Web -->




Listas de elementos

Existen tres tipos de listas: numeradas, sin numerar y de definición.
Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos según el lugar que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la lista irá precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parámetros:

start = num
Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1. Se indica numéricamente, independientemente del tipo que se elija.

type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.

Los tipos posibles son:

1 = Numéricamente. (1, 2, 3, 4, ... etc.)
a = Letras minúsculas. (a, b, c, d, ... etc.)
A = Letras mayúsculas. (A, B, C, D, ... etc.)
i = Números romanos en minúsculas. (i, ii, iii, iv, v, ... etc.)
I = Números romanos en mayúsculas. (I, II, III, IV, V, ... etc.)

EjemploResultado
<OL>
<LI>España
<LI>Francia
<LI>Italia
<LI>Portugal
</OL>
  1. España
  2. Francia
  3. Italia
  4. Portugal
<OL type = A >
<LI>España
<LI>Francia
<LI>Italia
<LI>Portugal
</OL>
  1. España
  2. Francia
  3. Italia
  4. Portugal

Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Se utiliza la directiva <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La directiva <UL> puede contener el parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disc, circle o square, con lo que el topo o marca puede ser un disco, un circulo o un cuadrado.

EjemploResultado
<UL type = disc >
<LI>España
<LI>Francia
<LI>Italia
<LI>Portugal
</UL>
  • España
  • Francia
  • Italia
  • Portugal
<UL type = square>
<LI>España
<LI>Francia
<LI>Italia
<LI>Portugal
</UL>
  • España
  • Francia
  • Italia
  • Portugal

Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para ellas la directiva <DL></DL>. El elemento marcado como término se antecede de la directiva <DT>, el marcado como definición se antecede de la directiva <DD>.

EjemploResultado
<DL>
<DT>WWW
<DD>Abreviatura de World Wide Web
<DT>FTP
<DD>Abreviatura de File Transfer Protocol
<DT>IRC
<DD>Abreviatura de Internet Relay Chat
</DL>
WWW
Abreviatura de World Wide Web
FTP
Abreviatura de File Transfer Protocol
IRC
Abreviatura de Internet Relay Chat

Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza la directiva <MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin numerar más "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la directiva <DIR></DIR> y los elementos se anteceden de <LI>. Los elementos tienen un limite de 20 caracteres.

Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "índice de materias".

EjemploResultado
<UL type= disc>
<LI>Buscadores
<UL>
<LI>Google
<LI>Yahoo
<LI>Ole
<LI>El índice
</UL>
<LI>Links
<UL>
<LI>Pangea
<LI>PIE
</UL>
</UL>
  • Buscadores
    • Google
    • Yahoo
    • Ole
    • El índice
  • Links
    • Pangea
    • PIE



Imágenes

Hasta el momento hemos visto como se puede escribir texto en una página Web, así como sus posibles formatos. Para incluir una imagen en nuestra página Web utilizaremos la directiva <IMG>. Hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el visor, a no ser que disponga de un programa externo que permita su visualización.

La directiva <IMG> tiene varios parámetros:

src = "imagen"
Indica el nombre del fichero gráfico a mostrar.

alt = "Texto"
Mostrará el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen.

align = TOP / MIDDLE / BOTTOM
Las imágenes, por defecto, se comportan como si fueran un carácter, alineándose en la misma línea que el texto que las precede o que las sigue. Éste parámetro indica como se alineará el texto que siga a la imagen con respecto a ésta. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior. Otras opciones más avanzadas serían: TEXTTOP se alinea justo al comienzo del texto más alto de la línea, ABSMIDDLE, se alinea en el centro real de la imagen y ABSBOTTOM, coloca el texto justo al final de la imagen. Estos tres parámetros son más precisos, pero no todos los navegadores los aceptan.
align = LEFT / RIGHT
Si en el parámetro align tiene los valores left o right, la imagen dejará de comportarse como un carácter colocándose a la izquierda o a la dercha y permitiendo escribir texto a su otro lado (si no, sólo se podrá escribir una línea).

border = tamaño
Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace.

height = tamaño
Indica el alto de la imagen en puntos o en porcentaje. Se puede usar para variar el tamaño de la imagen original, aunque es mejor redimensionarla en un programa de retoque fotográfico ya que será de mejor calidad y el archivo tendrá el tamaño apropiado.

width = tamaño
Indica el ancho de la imagen en puntos o en porcentaje. Se puede usar para variar el tamaño de la imagen original, aunque es mejor redimensionarla en un programa de retoque fotográfico ya que será de mejor calidad y el archivo tendrá el tamaño apropiado.

hspace = margen
Indica el número de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.

vspace = margen
Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.

EjemploSe vería como
<IMG src="caution.gif" alt= "Obras !!" > Obras!!
Si el visor no pudiese visualizar el gráfico..... Obras!!

La imagen a mostrar puede encontrarse en el mismo lugar (URL) que la página Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL o la trayectoria de donde se encuentre la imagen.

Ejemplo:

<IMG src= "http://www.microsoft.com/iexplorer.gif">

<IMG src= "/imagenes/iexplorer.gif"> (imágenes sería un subdirectorio de aquel donde se encuentra la página HTML que estamos usando)

Veamos varios ejemplos "jugando" con los tamaños de la imagen, así como comprobando la alineación de los textos. (Recuerda que en función del visor que utilices pueden verse o no los efectos de cada parámetro).

EjemploSe vería como
<IMG src="caution.gif"
width=100 >
<IMG src="caution.gif"
height=20 >
<IMG src="caution.gif"
align=TOP>Atención !!!
Atención !!!
<IMG src="caution.gif"
align=MIDDLE>Atención !!!
Atención !!!
<IMG src="caution.gif"
align=BOTTOM>Atención !!!
Atención !!!
Tenga en cuenta<IMG src="caution.gif"
hspace=20>esta indicación.
Tenga en cuentaesta indicación
Tenga en cuenta<IMG src="caution.gif"
vspace=40>esta indicación.
Tenga en cuentaesta indicación.

Siempre es bueno especificar el tamaño de la imagen, incluso aunque no se quiera redimensionar y se use el suyo propio, ya que esto acelerará la velocidad de visualización de la página.




Hyperenlaces.

La característica principal de una página Web es que podemos incluir Hyperenlaces. Un Hyperenlace es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc...

Para incluir un Hyperenlace se utiliza la directiva <A></A>. El texto o imagen que se encuentre dentro de los límites de esta directiva será sensible, esto quiere decir que si situamos el ratón sobre él aparecerá una mano con el dedo apuntando y si pulsamos se realzará la función de hyperenlace indicada por la directiva <A></A>. Si el Hyperenlace está indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el Hyperenlace si lo pulsamos.

EjemploSe vería como
<A href = "http://www.pangea.org/"> Pulse para ir a la página de Pangea</A> Pulse para ir a la página de Pangea

Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la página Web indicada por el parámetro href, es decir, accederá a la página situada en http://www.pangea.org

Lo mismo podríamos hacer con un gráfico.

EjemploSe vería como
Para buscar en Internet :
<A href = "http://www.yahoo.com/" >
<IMG
src = "yahoo.gif"></A>
Para buscar en Internet : Ir a Yahoo

Pulsando sobre la imagen se accedería a la página situada en http://www.yahoo.com/.

Cuando queremos ir a una página fuera de nuestro sitio web, siempre hay que usar una referencia absoluta, es decir, hay que poner la url completa, incluido el protocolo, etc. Por ejemplo: http://www.pangea.org/pacoc/manuales.

Cuando queremos ir a una página de nuestro sitio web se debe poner siempre una referencia relativa, es decir, sólo el nombre de la página ala que queremos ir si está en la misma carpeta, o el camino para ir desde donde estamos a donde queremos ir. Por ejemplo, para ir a la página "principal.htm" que estuviera en la subcarpeta "paginas" de la que estamos, habría que poner: <A HREF="paginas/principal.htm>.

Un Hyperenlace también puede llevarnos a una zona de nuestra página. Para ello debemos marcar en nuestra página las diferentes secciones en las que se divide. Lo haremos con el parámetro name.

Ejemplo:
<A name = "seccion1"></A>

Esta instrucción marca el inicio de una sección dentro de nuestra página. La sección se llamará seccion1. Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma:

<A href = "#seccion1">Primera Parte</A>
O también :
<A href = "http://www.jet.es/mipagina.htm#seccion1">Primera Parte</A>

Un Hyperenlace puede hacerse a cualquier tipo de fichero. Con las directivas anteriores hemos visto como hacer enlaces a páginas Web o secciones dentro de una página web, pero podríamos hacer un Hyperenlace a un grupo de noticias, o a otro servicio de Internet.

Ejemplo:
<A href = "news://news.actualidad.es/">Noticias de actualidad</A>

Asimismo podemos hacer que el Hyperenlace de como resultado el envío de un correo electrónico a una dirección de correo determinada.

Ejemplo:
<A href = "mailto: luisfd@jet.es">Envíame tus sugerencias</A>

También podemos realizar un Hyperenlace a un fichero cualquiera. En este caso el navegador intentará "ejecutar" el fichero, y si no puede hacerlo nos preguntará si deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los visitantes de nuestra página copiar ficheros a su ordenador.

Ejemplo:
<A href = "manual.zip">Pulsa aquí para llevarte una copia del manual.</A>




Tablas

Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc...) en diferentes filas y columnas separadas entre sí. Es una herramienta muy útil para "ordenar" contenidos de distintas partes de nuestra página. La tabla se define mediante la directiva <TABLE></TABLE>. Los parámetros opcionales de esta directiva son:

border = num
Indica el ancho del borde de la tabla en puntos.

cellspacing = num
Indica el espacio en puntos que separa las celdas que están dentro de la tabla. Por defecto 2.

cellpadding = num
Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta. Por defecto 1.

width = num ó %
Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.

height = num ó %
Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del visor. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.

bgcolor = "código de color"
Indica el color del fondo de la tabla.

background = "código de color"
Indica una imagen de fondo para la tabla.

Para definir las celdas que componen la tabla se utilizan las directivas <TD> y <TH>. <TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de ambas directivas son:

align = LEFT / CENTER / RIGHT / JUSTIFY
Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).

valign = TOP / MIDDLE / BOTTOM
Indica la alineación vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).

rowspan = num
Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.

colspan = num
Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.

bgcolor = "código de color"
Indica el color del fondo de la celda.

background = "código de color"
Indica una imagen de fondo para la celda.
Para indicar que acaba una fila de celdas se utiliza la directiva <TR>. A continuación mostraremos un ejemplo de una tabla que contiene sólo texto. Como se indicó anteriormente el contenido de las celdas puede ser cualquier elemento de HTML, un texto, una imagen, un Hyperenlace, una Lista, etc...

Ejemplo
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%>
<TH align = center>Buscadores
<TH align = center colspan = 2>Otros Links
<TR>
<TD align = LEFT>Yahoo
<TD align = LEFT>El índice
<TD align = LEFT>Pangea
<TR>
<TD align = LEFT>APC
<TD align = LEFT>Web verde
<TD align = LEFT>Agenda alternativa
</TABLE>
Se vería como
Buscadores Otros Links
Yahoo El índice Pangea
APC Web verde Agenda alternativa

Las directivas <TD> y <TH> son cerradas según el estándar de HTML, es decir, que un elemento de tabla <TD> debería cerrarse con un </TD>, sin embargo los visores asumen que un elemento de la tabla, queda automáticamente "cerrado" cuando se "abre" el siguiente.

La directiva CAPTION se utiliza para poner una cabecera o un pie a la tabla, según se indique en el parámetro align que puede tener los valores top y bottom.

Por ejemplo, <CAPTION ALIGN="BOTTOM">Titulo tabla</CAPTION>.




Mapas

Un Mapa es una imagen que permite realizar diferentes Hyperenlaces en función de la "zona" de la imagen que se pulse. Para crear un mapa debemos tener un fichero con la imagen y un conjunto de órdenes donde indicaremos las coordenadas de la imagen que nos enlazarán con cada Hyperenlace. Actualmente hay dos maneras de hacer los mapas: a través de un programa externo (CGI) que pueda "procesar" el fichero .map en el que habremos metidos las órdenes, o a través de la directiva que soportan los Navegadores a partir de su versión 2 y 3 de Netscape y Explorer, respectivamente. En el primer caso el mapa se dice que corre en el servidor, ya que tiene que hacer llamadas a el y a su CGI para que funcione, en el segundo, corre en el cliente. Para el segundo caso, se utilizan las directivas <MAP></MAP> y <AREA>.

La directiva <MAP> identifica al mapa y tiene el parámetro name para indicar el nombre del mapa.

La directiva <AREA> define las áreas sensibles de la imagen y tiene los siguientes parámetros obligatorios:

shape = "tipo"
Indica el tipo de área a definir.

coords = "coordenadas"
Indica las coordenadas de la figura indicada con shape.

href = "URL"
Indica la dirección a la que se accede si se pulsa en la zona delimitada por el área indicada.

Los tipos de área pueden ser los siguientes:

rect
Área rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha.

poly
Polígono. Se deben especificar las coordenadas de todos los vértices del polígono. El visor se encarga de "cerrar" la figura.

circle
Círculo. Se debe especificar en primer lugar las coordenadas del centro del círculo y a continuación el valor del radio (en puntos).

Si dos áreas se superponen, se ejecutará la que se encuentre en primer lugar en la definición del mapa. Es importante definir una última área que abarque la totalidad del gráfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un área definida.

Veamos un ejemplo completo.

<MAP name = "casa">
<AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm">
<AREA shape = "rect" coords = "21,101,35,138" href= "puerta.htm">
<AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm">
<AREA shape = "circle" coords = "80,76,21" href= "arbol.htm">
<AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm">
<AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm">
</MAP>

Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un mapa. Para ello escribiríamos la siguiente directiva:

<IMG src = "grafico.gif" usemap = "#casa">

Si tu visor tiene la capacidad de gestionar este tipo de mapas (Netscape 2.x o Ms-Explorer 2.x), prueba a pulsar sobre alguna parte del mapa que hemos definido y que te aparecerá a continuación:

Tejado Puerta Casa Arbol Tronco Resto del dibujo




Extensiones del HTML

Netscape y Microsoft han añadido al estándar de HTML diversas directivas para hacer más atractiva la visualización de las páginas Web. Veremos aquí las más interesantes y la forma de usarlas.

Estas directivas pueden no funcionar en algún visor de HTML, pero el uso de ellas por parte de los dos "grandes" del software para Internet hace prever que serán inmediatamente incluidas en las nuevas versiones del resto de los visores.


Marquee

La directiva <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza. Funciona únicamente con Ms-Explorer. Sus parámetros son los siguientes:

align = top / middle / bottom
Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma.

bgcolor = "código de color"
Indica el color del fondo de la marquesina.

direction = left / right
Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right)

height = num o %
Indica la altura de la marquesina en puntos o porcentaje en función de la ventana del visor.

width = num o %
Indica la anchura de la marquesina en puntos o porcentaje en función de la ventana del visor.

loop = num / infinite
Indica el número de veces que se desplazará el texto por la marquesina. Si se indica infinite, se desplazará indefinidamente.

scrolldelay = num.
Indica el número de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor número más lentamente se desplazará el texto.

Veamos un ejemplo de esta directiva:

<MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Bienvenido a mi página personal en Internet.
</MARQUEE>
Si estás utilizando Ms-Explorer verás el efecto producido a continuación:

Bienvenido a mi página personal en Internet.


Sonido de fondo

Nuestra página Web puede tener un sonido que se active al entrar en la página. Esta característica de Ms Explorer utiliza la directiva <BGSOUND> y tiene los siguientes parámetros:

src = "fichero"
Indica el nombre del fichero que contiene el sonido (.wav, .mid).

loop = num / infinite
Indica el número de veces que se reproducirá el sonido. Si se indica infinite, el sonido se reproducirá de forma continua hasta que abandonemos la página.

Un ejemplo de esta directiva sería:

<BGSOUND src= "yesterday.mid" loop= infinite>


Embed y sonido de fondo en netscape

Para lograr el sonido de fondo en Netscape se puede utilizar la directiva <EMBED>, que también nos permitirá incorporar cualquier tipo de archivo en cualquier posición. Para que pueda mostrarse el archivo se deberá tener el plug-in adecuado. Es una directiva cerrada y tiene los siguientes parámetros:

src = "fichero"
Indica el nombre del fichero (sonido .wav o .mid, o cualquier otro).

loop = num / infinite
Indica el número de veces que se reproducirá el sonido. Si se indica infinite, el sonido se reproducirá de forma continua hasta que abandonemos la página.
width = "número"
Ancho del objeto insertado. Si se quiere que no se vea se puede poner en 0 o utilizar el parámetro <HIDDEN>
height = "número"
Altura del objeto insertado. Si se quiere que no se vea se puede poner en 0 o utilizar el parámetro <HIDDEN>
HIDDEN = true
Ocultar el gestor de sonidos.
AUTOSTART = true
Se activará el sonido al cargarse la página.
Estos dos últimos parámetros los utilizaremos cuando queramos poner sonidos de fondo para Netscape. Habrá que utilizar tanto esta directiva como la <BGSOUND>. De esta manera el sonido de fondo funcionará tanto en Netscape como en Explorer.


Frames (marcos)

Los marcos son una técnica para dividir la ventana del visor en diferentes zonas. Cada una de estos marcos se podrá manipular por separado, permitiéndonos mostrar en cada una de ellos una página Web diferente. Esto es muy útil para, por ejemplo, mostrar permanentemente en un marco los diferentes contenidos de nuestra página, y en otro mostrar el contenido seleccionado.

Para definir los diferentes marcos o frames se utilizan las directivas <FRAMESET> </FRAMESET> y <FRAME>. La directiva <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias directivas <FRAMESET> anidadas con el objeto de subdividir una división. Los parámetros de <FRAMESET> son rows y cols en función de si la división de la pantalla se realiza por filas (rows) o columnas (cols). Los parámetros rows y cols se acompañan de un grupo de números que indican en puntos o en porcentaje el tamaño de cada uno de los marcos. En caso de utilizar rows los tamaños de los marcos se entienden indicados de arriba a abajo, es decir, el primer valor será el asignado al marco superior, el segundo al marco inmediatamente inferior, etc... En el caso de cols los tamaños se aplican de izquierda a derecha.

EjemplosResultado
<FRAMESET rows = "25%,50%,25%"> Crea tres marcos horizontales, la primera ocupará un 20% de la ventana principal, la segunda un 50% y la tercera un 25%.
<FRAMESET cols = "120,*,100"> Crea tres marcos verticales, la primera y la tercera tendrán un "ancho" fijo de 120 y 100 puntos respectivamente. La segunda ocupará el resto de la ventana principal (*).
<FRAMESET cols = "15%,*">
<FRAMESET rows = 20%,*">
En este caso "anidamos" dos directivas. La primera divide la ventana principal en dos marcos verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda directiva vuelve a subdividir el primer marco creado anteriormente, pero esta vez en dos marcos horizontales, el superior ocupará un 20% de la ventana, y el inferior el resto.

La directiva <FRAMESET> tiene los siguientes parámetros:

border = "número"
Permite cambiar o quitar (0) el borde entre los marcos. Por defecto, aparece. Para que también funcione en Explorer habrá que usar frameborder = 0

framespacing = "número"
Permite cambiar el espacio entre el borde del marco y la página.

La directiva <FRAME> indica las propiedades de cada marco. Es necesario indicar una directiva <FRAME> para cada marco creado. Los parámetros de <FRAME> son:

name = "nombre"
Indica el nombre por el que nos referiremos a ese marco.

src = "URL"
El marco mostrará en principio el contenido del documento HTML que se indique.

marginwidth = num.
Indica, en puntos, el margen izquierdo y derecho del marco.

marginheight = num
Indica, en puntos, el margen superior e inferior del marco.

scrolling = "yes / no / auto"
Indica si se aplica una barra de desplazamiento al marco en el caso de que la página que se cargue en ella no quepa en los límites del marco. El valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la página que no quepa en el marco no la veremos), y "auto" la muestra sólo en caso de que sea necesario para poder ver la página.

noresize
Si se indica este parámetro, el usuario no podrá "redimensionar" los marcos con el visor. Un usuario que esté viendo una página con marcos puede redimensionarlos seleccionando un borde del marco con el ratón y desplazándolo.

Los visores que no soportan la característica de marcos, no mostrarán nada de lo indicado con estas directivas. Es por ello que existe una directiva llamada <NOFRAMES> </NOFRAMES>. Todo lo indicado entre esta directiva será lo que muestren los visores sin capacidad para visualizar marcos. Los visores que soporten marcos obviarán las directivas incluidas entre <NOFRAMES> </NOFRAMES>.

Veamos un ejemplo completo de marcos con comentarios:

<HTML>
<HEAD>
<TITLE>Página con Marcos</TITLE>
</HEAD>

<FRAMESET cols = "15%,*">
<!-- Creo dos marcos verticales, el de la izquierda ocupa un 15% de la pantalla, el de la derecha el resto. -->

<FRAMESET rows = "35%,*">
<!-- Creo dos marcos horizontales dentro del marco de la izquierda. -->

<FRAME name = "rotulo" src = "titulo.htm" scrolling = "auto">
<!-- Llamo al marco horizontal superior izquierda con el nombre "rotulo" y muestro el documento titulo.htm -->

<FRAME name = "menu" src = "menu1.htm" scrolling = "auto">
<!-- Llamo al marco horizontal inferior izquierda con el nombre "menu" y muestro el documento menu1.htm -->

</FRAMESET>
<!-- Cierro la definición de los marcos horizontales del marco de la izquierda -->

<FRAME name = "principal" src = "primera.htm" scrolling = "auto">
<!-- Llamo al marco vertical derecho con el nombre "principal" y muestro el documento primera.htm -->

<NOFRAMES>
<!-- Indico las órdenes para aquellos visores que no soporten marcos -->
SU VISOR NO MUESTRA MARCOS. Pulse <A href= "primera.htm"> AQUI </A> para ir a la página principal sin Marcos.
</NOFRAMES>

</FRAMESET>
<!-- Cierro la definición de los macos verticales -->

</HTML>

Al usar marcos, nos encontramos con un problema. Cuando queramos mostrar una página Web debemos indicarle al visor en que marco queremos que se muestre. Por defecto se mostrará en el marco donde se encuentre el enlace. Para poder escoger el marco de destino del Hyperenlace se añade un nuevo parámetro a la directiva <A href= > </A>. Este parámetro se llama target y puede tener los siguientes valores:

target = "nombre_marco"
Muestra el Hyperenlace en la ventana cuyo nombre se indica.

target = "_blank"
Abre una nueva copia del visor y muestra el Hyperenlace en ella.

target = "_self"
Se muestra el Hyperenlace en el marco activo, es decir, en el mismo marco que lo referencia.

target = "_parent"
El Hyperenlace se muestra en el marco o <FRAMESET> que llamó al documento actual. Si no hay ningún <FRAMESET> anterior se muestra a pantalla completa suprimiendo todos los marcos de la pantalla.

target = "_top"
Suprime todos los marcos de la pantalla y muestra el Hyperenlace a pantalla completa.

Ejemplos Resultado
<A href= "http://www.nasa.com/"
target = "_blank">
Muestra la página de la Nasa en una nueva copia del visor
<A href= "http://www.pangea.org/"
target = "principal">
Muestra la página de Pangea en el marco llamado "principal"
<A href= "http://www.yahoo.com/"
target = "_top">
Muestra la pagina del buscador Yahoo a pantalla completa