Introduccion Al Lenguaje HTML

Pro gramació n WEB con HTML (IT Chetumal)
HTML
INTRODUCCIÓN AL HTML
Objetivo
Utilizar las etiquetas básicas de HTML; así como crear formularios sencillos.
1/38
HTML
ETIQUETAS DE LA ESTRUCTURA BÁSICA
Las etiquetas de la estructura básica. Como vimos en el tema 2, el documento HTML se compone de unas etiquetas esenciales. Lo
primero a escribir es <HTML>, la etiqueta de inicio de los documentos HTML. Tras eso se introduce <HEAD> para abrir la
cabecera. A continuación hay que poner un título a la página, el cual estará situado entre las etiquetas <TITLE> y </TITLE>. Tras
eso cerramos la cabecera con la etiqueta </HEAD>. Y lo que queremos que se vea en pantalla irá entre <BODY> y </BODY>. Y por
fin, cerramos con </HTML>. Hasta ahora hemos escrito:
<HTML>
<HEAD>
<TITLE>Mi primera página</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
A continuación vamos a ver todas las etiquetas que sirven para colocar y organizar el texto que se muestra en pantalla de nuestra
página WEB. Todo ello irá colocado entre <BODY> y </BODY>.
Formateando el texto
Para empezar a crear nuestra primera página tenemos que iniciar el programa editor de texto e ir introduciendo las etiquetas y su
contenido. En esta página conoceremos todo lo básico y esencial dentro de un documento HTML.
PÁRRAFOS
Párrafos. Las etiquetas de párrafo <P> nos servirán para iniciar un nuevo párrafo de texto. No necesita la etiqueta </P> al final si no
están alineados de ninguna manera.
Los párrafos pueden alinearse. En este caso sí que necesitan su correspondiente etiqueta de cierre </P>. Son las siguientes:
<P ALIGN="LEFT"> Para alinear el texto con el margen izquierdo:
Este párrafo está alineado a la izquierda
<P ALIGN="CENTER"> Para centrar el texto:
Este párrafo está centrado.
<P ALIGN="RIGHT"> Para alinear el texto con el margen derecho:
2/38
HTML
Este párrafo está alineado a la derecha
<P ALIGN="JUSTIFY"> Para alinear el texto a los dos márgenes. Es ignorado por muchos navegadores, pero algunos no, como el
Explorer 4.0.
Eso es un ejemplo el alineamiento justificado. Si se observa este breve párrafo con exploradores como el Microsoft Internet Explorer
4.0 podrás observar que los dos extremos, izquierdo y derecho, están alineados. Recuerda que para poder apreciar este efecto en los
párrafos de texto, necesitas escribir más de 2 líneas.
Si se quiere hacer un salto de línea o retorno de carro, habrá que usar la eiqueta <BR>. Por ejemplo:
<P>Esto<BR>es un párrafo
Se vería así:
Esto
es un párrafo
Dos <BR> equivalen a un <P>. Estos dos ejemplos se verían igual:
<P>Esto es un párrafo
<P>Esto es otro
<P>Esto es un párrafo<BR><BR>
Esto es otro
También puede usarse la etiqueta <NOBR>...</NOBR>. Es para no permitir el salto de línea, es decir, para hacer líneas muy largas
en páginas en las que haya que usar la barra de desplazamiento horizontal.
CABECERAS
Son para poner títulos en nuestras páginas. Van entre las etiquetas <Hx> y </Hx>, donde x en un número del 1 al 6. 1 es el número
mayor y 6 el número menor. El que corresponde al tamaño estándar del texto es 3. Estos números no tienen nada que ver con el
número de píxeles ni con los números de la etiqueta <FONT> que veremos posteriormente.
Usaremos la cabecera H1 o la H2 para el título principal de la página, y los otros tamaños menores para los
títulos inferiores de segunda categoría.
<H1>Prueba</H1> se verá como:
prueba
3/38
HTML
Prueba
Prueba
Prueba
Prueba
Prueba
LÍNEAS HORIZONTALES
Líneas horizontales. En inglés horizontal rules. Para introducirlos hay que usar la etiqueta <HR>. Así se creará una línea embutida
en el fondo que llegue de lado a lado de la página.
También se puede modificar. Para variar la anchura hay que usar el atributo WIDTH=x%, donde x es el porcentaje del ancho de la
pantalla. Para que ocupe el 75% habría que poner:
<HR WIDTH="75%">
Si se quiere variar la anchura en píxels hay que introducir el valor de ellos en WIDTH=x, pero sin el símbolo %:
<HR WIDTH="250">
Se puede variar la alineación con el atributo ALIGN=x, donde x es LEFT o RIGHT.
<HR WIDTH="50%" ALIGN="RIGHT"> para alinear a la derecha:
Se puede variar el espesor con SIZE=x, donde x es el número de píxels:
<HR SIZE="15">
4/38
HTML
Y por último se puede hacer que la línea no esté sombreada con el atributo NOSHADE:
<HR NOSHADE>
FORMATEO DEL TEXTO
Formateo del texto. Veremos una serie de etiquetas para el texto:
Líneas en blanco, con <BR><P>.
<BR><P>
<BR><P>
<BR><P>
<BR><P>
quedaría así:
Espacios. Nos pueden servir para separar imágenes de textos. La etiqueta es
Negrita, cursiva, subrayado y tachado. Necesitan etiqueta de cierre. Son <B>negrita</B> para negrita, <I>cursiva</I> para
cursiva, <U>subrayado</U> para subrayado y <S>tachado</S> para tachado. Es posible usarlos a la vez,
<B><I><U><S>texto</S></U></I></B> para texto. Hay otras etiquetas que equivalen a estas, como <STRONG> = <B>; <CITE>
y <EM> = <I>; y <STRIKE> = <S>.
Aumentar o disminuir tamaño del texto. Se puede hacer de una forma muy sencilla con
<BIG>...</BIG> para aumentarlo y con <SMALL>...</SMALL> para disminutirlo. Por ejemplo:
Este es un texto <BIG>más grande</BIG>
Se vería como
Este es un texto más grande
Este es un texto <SMALL>más pequeño</SMALL>
Se vería como
Este es un texto más pequeño
En vez de usar estas dos etiquetas, puedes usar la etiqueta <FONT> que se explica más abajo.
Preformateado. La etiqueta es <PRE> con etiqueta de cierre. La característica es que se verá con letra Courier respetando espacios
y cambios de lía, por ejemplo:
5/38
HTML
<PRE>
Hola
Esto es una prueba del preformateado
</PRE>
y quedaría así:
Hola

Máquina de escribir. La etiqueta es <TT> con etiqueta de cierre. Es como el anterior pero sólo cambia el tipo de letra, por ejemplo
(el mismo que pusimos en PRE):
<TT>
Hola
</TT>
y quedaría así:
Hola Esto es una prueba del preformateado
Como ves no ha respetado los espacios ni los cambios de línea.

Citas textuales. La etiqueta es <BLOCKQUOTE> con etiqueta de cierre, para resaltar partes de texto con márgenes a ambos lados,
por ejemplo:
<BLOCKQUOTE>xxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxx xxxxxxxxxxx

xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxx xxxxx xxxxxxxxxxxx
</BLOCKQUOTE>
y quedaría así:
xxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxx

xxxxxxxxxxxxxxx xxxxx xxxxxxxxxxxx
Texto parpadeante. Sólo lo incorpora Netscape Navigator. La etiqueta es <BLINK> y <BLINK>, y quedaría así:
<BLINK>Hola</BLINK>
Hola
Índices y subíndices. Las etiquetas son <SUP> para el superíndice y <SUB> para el subíndice (ambas con etiqueta de cierre), por
ejemplo:
6/38
HTML
cm<SUP>3</SUP>
cm3
H<SUB>2</SUB>SO<SUB>4</SUB>
H2SO4
Etiqueta FONT. Tiene etiqueta de cierre, y nos permite variar el tamaño, el color, y el tipo de letra de un texto determinado. Utiliza
para ello los atributos siguientes:
size="x", siendo "x" el número del tamaño, de 1 a 8, por defecto 3; o +/-, que indican si se usa un tamaño inferior o superior),
bgcolor="xxyyzz" (siendo "xxyyzz" un número hexadecimal). Para saber qué es esto mira el tema de fondos) y face="xxx"
(siendo "xxx" el nombre de la fuente). Si la fuente tiene dos palabras o más es necesario poner comillas, y se pueden colocar varios
nombres para usar unas fuentes en caso que otras no existan. Si la fuente no está instalada en el ordenador se verá Times New
Roman). Ejemplo:
<FONT SIZE=4 COLOR="AA0000" FACE="Arial, Verdana">Prueba de texto</FONT>.
...que quedaría así:
Prueba de texto
Observa cómo hay dos nombres de fuentes. En caso de que Arial no esté instalada se verá con Verdana, y si ésta tampoco lo está se
verá entonces con Times New Roman: la fuente por defecto.
COMENTARIOS
Comentarios. Su principal objetivo es escribir líneas de HTML que no se vean en la pantalla, entre las etiquetas . Puede ser
muy útil para organizar internamente páginas escritas en su totalidad con HTML o, como veremos en los capítulos finales, ocultar
código no soportado por versiones antiguas de navegadores, como programas JavaScript y VBScript, hojas de estilo... En este caso,
sería con . Veamos los dos casos:
Comentario de 1 línea:

Comentario de varias líneas:

Añadiendo listas (contenido antiguo)
Añadiendo listas
7/38
HTML
LISTAS
Hay tres clases de listas: desordenadas, ordenadas y de definición:
Listas desordenadas. Las etiqueta es <UL> con etiqueta de cierre para la lista y <LI> para cada línea. Puede contener el atributo
type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk, circle o
square, con lo que el topo o marca puede ser un disco, un circulo o un cuadrado.
Un ejemplo:
<UL type=square>
<LI>Elemento 1
<LI>Elemento 2
<LI>Elemento 3
</UL>
Elemento 1
Elemento 2
Elemento 3
Es posible anidar las listas, por ejemplo:<UL>

<LI>Elemento 1
<UL>
<LI>Elemento 1.1
<LI>Elemento 1.2
<LI>Elemento 1.3
</UL>
<LI>Elemento 2
<LI>Elemento 3
</UL>
Elemento 1
Elemento 1.1
Elemento 1.2
Elemento 1.3
Elemento 2
Elemento 3
En otro tema veremos cómo poner una imagen en vez de el punto, cuadrado o disco.
También podemos cambiar el tipo de símbolo elemento por elemento:
<UL>
<LI type=square>Elemento 1
<LI type=circle>Elemento 2
<LI type=disk>Elemento 3
</UL>
Elemento 1
Elemento 2
Elemento 3
Listas ordenadas o numeradas. Las etiqueta es <OL> con etiqueta de cierre para la lista y <LI> para cada línea. Puede llevar los
siguientes atributos:
8/38
HTML
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.
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.)
Un ejemplo:
<OL type=i>
<LI>Elemento 1
<LI>Elemento 2
<LI>Elemento 3
</OL>
i. Elemento 1
ii. Elemento 2
iii. Elemento 3
Estas listas también pueden anidarse, al igual que las listas desordnedadas.
A cada elemento puede dársele un valor similar a start=x, con value=x:
<OL>
<LI value=10>Este elemento vale 10
<LI>Elemento siguiente
<LI>Otro elemento más
</OL>
Este elemento vale 10
10. Elemento siguiente

11. Otro elemento más
Listas de definición. La etiqueta es <DL> con etiqueta de cierre para la lista, <DT> para cada palabra y <DD> para cada definición
de cada palabra, por ejemplo:
<DL>
<DT>Elemento 1
<DD>Definición de elemento 1
<DT>Elemento 2
<DT>Elemento 3
</DL>
Elemento 1
Definición de elemento 1
Elemento 2
Elemento 3
9/38
HTML
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 etiqueta <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 etiqueta <DIR></DIR> y los
elementos se anteceden de <LI>. Los elementos tienen un límite de 20 caracteres.
Enlazando las páginas
Los enlaces son la esencia del Web. Sin ellos, el concepto se vería reducido a una publicación de documentos de texto en Internet.
Los enlaces es lo que hace te lleva más allá del trabajo encasillado de un único documento, para trabajar en varios documentos
relacionados.
Lo que originalmente fueron llamados hipervínculos, el método técnico para ofrecer posibilidades de enlace a los documentos se ha
ampliado para incluir algo más que sólo enlaces de texto. De hecho, el web de hoy utiliza una amplia variedad de medios y objetos
que son enlaces activos. En otras palabras, hipermedia, ha comenzado a incluir estos aspectos.
Si intentas hacer una idea de la vastísima red de información enlazada, desde documentos de texto a sitios webs de entretenimiento
pasando por páginas personales, comenzarás a ver una compleja red debido al simple hecho del enlace.
Hay muchos detalles que deberán serte familiares para explotar el potencial de la web y dar facilidades a todo lo que te pueden
ofrecer los enlaces.
Estos asuntos incluyen trabajar con la etiqueta anchor, usando enlaces relativos y absolutos, y manejar links especiales como pueden
ser los que te permiten saltar de una parte a otra dentro de la misma página o a una dirección de email.
La etiqueta anchor
Si la esencia del WEB puede ser definida como los enlaces, la esencia de los enlaces puede ser efectivamente representada por la
etiqueta HTML de su núcleo, es la etiqueta denominada anchor (ancla): la etiqueta A.
Esta etiqueta es lo que permite que un documento HTML se enlace consigo mismo o con otro. Ese otro documento puede estar cerca
o muy lejos. Si es así, ese otro sitio WEB totalmente ajeno al nuestro también puede ser enlazdo, uno al otro, usando la etiqueta
anchor.
CUIDADO
Puedes poner enlaces a otros sitios WEBs siempre que conozcas la dirección correcta. La inmensa mayoría de gente
agradecerá que les pongas enlaces. De todas formas, hay algunos sitios que quieren saber quiénes les enlazan y porqué. En caso
de duda, pide permiso antes de hacer el enlace.
Esta etiqueta se divide en una de inicio y otra de cierre, de la forma:
<A>...</A>
Para funcionar adecuadamente, esta etiqueta debe tener atributos y valores. El más básico y común es HREF (hypertext reference).
Se sigue de un valor, la mayoría de las veces una URL.
NOTA
URL (Uniform Resource Locator), es la dirección de un sitio WEB. Consiste en el prefijo http:// el cual da pie al
hypertext transfer protocol (protocolo de transferencia de hipertexto), el lenguaje usado por los servidores WEB para
10/38
HTML
intercambiar información basada en WEB. Un URL también lleva un prefijo "www" (pero no siempre) antes del nombre del
dominio, como en http://www.microsoft.com.
Vamos a usar por ejemplo la dirección del WEB de Microsoft. Entre la etiqueta inicial y la de cierre, debe haber un elemento donde
podamos hacer clic, puede ser texto simple o un objeto.
Pulsa <A HREF="http://www.microsoft.com">aquí</A> para ir al WEB de Microsoft
Se pueden hacer varios tipos de enlaces:
1. Enlaces absolutos (a páginas situadas en otras WEBs)

2. Enlaces relativos (a páginas nuestras, de nuestra WEB)
3. Enlaces dentro de la misma página
Enlaces absolutos
El ejemplo que acabamos de ver, en el cual pusimos una URL completa, se refiere a un enlace absoluto. Esto significa que se usa
toda la dirección del sitio WEB, no sólo una parte de él. Debe incluir la palabra inicial http:// seguida del nombre del dominio. Esto
llevará a la página inicial por defecto de un sitio WEB.
Los enlaces absolutos son importantes cuando se enlazan WEBs que no son de nuestra propiedad, en otras palabras, sitos que están
hospedados en otros servidores. Por ejemplo, si se quiere poner un enlace al WEB de Netscape, sería:
Ir al <A HREF="http://www.amd.com">AMD</A>.
Ir al AMD.
Este enlace lleva a la página de inicio por defecto de Netscape. Si hay una página específica dentro del sitio WEB a la que queremos
acceder, se puede poner el nombre de archivo de dicha página:
Mira los <A HREF="http://www.amd.com/products/products.html">productos</A> de AMD
Mira los productos de AMD
Este enlace te lleva a una página concreta de un sitio web más grande.
CUIDADO
Los navegadores de últimas versiones permiten eliminar el http:// y simplemente escribir www.amd.com para acceder a
un sitio, pero esto no significa que puedes saltar el código http:// de una dirección URL absoluta. Si se olvida, no harás un
enlace efectivo.
11/38
HTML
Enlaces relativos
Imagina a varias personas dentro de distintas habitaciones en una casa, y tú estás dentro de ella. Si quieres decir dónde está cada una
de ellas, no hace falta decir el domicilio completo con la habitación, basta el nombre de esta última.
Los enlaces relativos nos permiten enlazar páginas situadas en un mismo servidor. Estos archivos pueden estar en el mismo directorio
o cada uno de ellos en un directorio distinto. En todo caso, hay métodos para enlazar más relativamente que absolutamente estos
últimos archivos.
Si estás pensando enlazar una página con otra dentro de un sitio WEB y ambas residen en un mismo directorio, debes de poner un
valor a HREF como el siguiente:
Pulsa <A HREF="intro.htm">aquí</A> para ir la introducción del curso de HTML
Pulsa aquí para ir la introducción del curso de HTML
Las cosas se complican un poco cuando quieres enlazar un documento en otro directorio dentro del mismo servidor. Vamos a suponer
que tenemos en nuestro directorio pincipal un directorio llamado ejemplos donde tenemos situado un archivo llamado ej1.htm. Hay
que situar el código que se indica a continuación:
NOTA: Los siguientes 3 enlace es sólo ejemplos, no llevan a ninguna página real
Pulsa <A HREF="ejemplos/ej1.htm">aquí</A> para ver un ejemplo
Pulsa aquí para ver un ejemplo.
El navegador buscará el archivo ej1.htm dentro del directorio ejemplos.
Imagina que es lo contrario, que estás en el directorio ejemplos y que quieres poner un enlace a una página situada en el directorio
principal. Hay que poner dos puntos seguidos .. por cada directorio que queramos subir.
Pulsa <A HREF="../index.htm">aquí</A> para volver a la página principal
Pulsa aquí para volver a la página principal
Ambos tipos pueden combinarse. Imagina que estamos en el directorio ejemplos, y que queremos enlazar una página llamada
prueba1.htm situada en un directorio llamado pruebas situado al mismo nivel de ejemplos, es decir, subdirectorio del directorio
principal. El código para enlazarlo sería:
Pulsa <a HREF="../pruebas/prueba1.htm">aquí</A> para ver el primer ejemplo
Pulsa aquí para ver el primer ejemplo.
Vamos a hacer un ejercicio para que te sientas cómodo con los enlaces relativos.
1. En tu ordenador, crea un directorio y llámalo web.

2. Ábrelo, y crea dentro un subdirectorio llamado articulos.
3. Crea un página web con lo siguiente
12/38
HTML
<HTML>
<HEAD>
<TITLE>Ejemplo de link relativo</TITLE>
</HEAD>
<BODY>
Esta página aparecerá en el directorio raíz. Si quieres poner un enlace a una página colocada en el subdirectorio
artículos, deberias usar un enlace relativo.
</BODY>
</HTML>
4. Guarda este archivo en el directorio web y llámalo inicio.htm.
Ahora ya tienes una página de inicio dentro del directorio web. Tienes que hacer el enlace relativo del ejercicio.
1. Abre tu editor HTML
Codifica la siguiente página:
<HTML>
<HEAD>
<TITLE>Ejemplo de artículo</TITLE>
</HEAD>
<BODY>
Esta página aparecerá en el directorio artículos.
</BODY>
</HTML>
2. Guarda esta página como articulo1.htm en el directorio articulos.
Ahora vamos a añadir un enlace al documento original.
1. Abre el archivo inicio.htm en tu editor.

2. Añade la línea de código que se ve en este listado.
<HTML>
<HEAD>
</HEAD>
<BODY>
Esta página aparecerá en el directorio raíz. Si quieres poner un enlace a una página colocada en el subdirectorio
artículos, deberias usar un enlace relativo.
Si haces <A HREF="articulos/articulo1.htm">clic en este link</A> se cargará la página. Este es un ejemplo de link
13/38
HTML
relativo.
</BODY>
</HTML>
3. Guarda el archivo.
Comprueba tu link en el navegador. Debería cargar articulo1.htm (si ya tenías la página index.htm cargada en el navegador, tienes
que pulsar el botón "actualizar")
Si quieres poner un enlace para que vuelva al inicio, haz lo siguiente.
1. Abre el archivo articulo1.htm en tu editor.

2. Añade el siguiente enlace relativo.
<HTML>
<HEAD>
<TITLE>Ejemplo de artículo</TITLE>
</HEAD>
<BODY>
Esta página aparecerá en el directorio artículos.
<P>Si haces <A href="../inicio.htm">clic</A> aquí volverás a la página de inicio. También esto es un link relativo.
</BODY>
</HTML>
3. Guarda el archivo, y prueba el enlace.
Los links relativos son simples y potentes. Hay que usar siempre esta forma de enlace cuando estés dentro de un mismo servidor, a no
ser que quieras poner un enlace a otro sitio de Internet. Aquí tienes la página inicio.htm con una línea de ejemplo añadida de un
enlace absoluto.
<HTML>
<HEAD>
</HEAD>
<BODY>
Esta página aparecerá en el directorio raíz. Si quieres poner un enlace a una página colocada en el subdirectorio artículos,
deberias usar un enlace relativo.
<P>Si haces <A href="articulos/articulo1.htm">clic en este link</A> se cargará la página. Este es un ejemplo de link
relativo.
<P>Si quieres visitar el web de AMD, sólo tienes que hacer <A href="http://www.amd.com">clic</A> aquí.
</BODY>
</HTML>
14/38
HTML
NOTA
Cuando dos sitios web contienen un enlace uno al otro y viceversa, se dice que tienen enlaces recíprocos o un intercambio
de enlaces. Este concepto es importante porque promociona el tráfico web entre los dos sitios, y es un aspecto muy importante en
la mercadotecnia de los mismos (mira el capítulo "Mercadotecnia de los sitios web").
Enlaces dentro de la misma página

Una método para ayudar en la navegación de una misma página es hacer enlaces dentro de ella. Esta técnica hace que los navegantes
accedan de una manera más rápida a la información, sin duda muchos lo apreciarán.
Consiste en hacer clic en algún texto o imagen, y desplazarse a otra parte dentro de la misma página. Por ejemplo, en todo el WEB de
Duiops, dispones de un enlace en la parte inferior de las páginas que te permite saltar a la parte superior de las mismas.
Para hacer este tipo de enlaces hay que hacer dos operaciones:
Establecer marcadores a lo largo de la página (son los lugares a los que queremos saltar con los enlaces).
Poner enlaces que salten a los marcadores.
El código de los marcadores es el siguiente:
<A name="nombre_del_marcador"></A>
Hay quien encierra con el código del marcador el elemento a donde quiere saltar:
Código al lado del elemento que queremos marcar:
<A name="Principio"></A><H1>Título de la página</H1>
Código que encierra el elemento que queremos marcar.
<A name="Principio"><H1>Título de la página</H1></A>
Se recomienda usar el primero para enlazar lugares de la página (por ejemplo, el principio) y el segundo para enlazar elementos
(imágenes o textos concretos colocados a lo largo de la página).
Por otro lado, el código de un enlace para que salte a un marcador.
Pulsa para volver al <A href="#principio">principio</A>
CUIDADO
Los marcadores reconocen mayúsculas y minúsculas. <A NAME="Principio"></A> y <A NAME="principio"></A> no

es el mismo enlace.
Aquí tienes un claro ejemplo que te ayudará a comprender los enlaces dentro de la misma página.
15/38
HTML
En tu editor HTML, escribe la estructura básica:
<HTML>
<HEAD>
<TITLE>Página con marcadores - Ejemplo</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Añade varios elementos que puedan enlazarse:
<HTML>
<HEAD>
</HEAD>
<BODY>
En esta página puedes ir al primer apartado, al segundo o al tercero .
</BODY>
</HTML>
Ahora añade texto para que puedas poner después los marcadores:
<HTML>
<HEAD>
</HEAD>
<BODY>
En esta página puedes ir al primer apartado, al segundo o al tercero .
<H1>Primer apartado</H1>
Aquí tienes el primer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque existe
la posibilidad de que no hayas podido ver este efecto. Si es así, prueba a redimensionar el tamaño de la ventana de forma que
veas una barra de desplazamiento vertical, es decir, para subir o bajar dentro de la misma página. Entonces, ya podrás ver el
efecto en este archivo de ejemplo sobre marcadores y los enlaces a los mismos.
<H1>Segundo apartado</H1>
Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque
existe la posibilidad de que no hayas podido ver este efecto. Si es así, prueba a redimensionar el tamaño de la ventana de
forma que veas una barra de desplazamiento vertical, es decir, para subir o bajar dentro de la misma página. Entonces, ya
16/38
HTML
podrás ver el efecto en este archivo de ejemplo sobre marcadores y los enlaces a los mismos.
<H1>Tercer apartado</H1>
Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque existe
</BODY>
</HTML>
Coloca los marcadores en los títulos de los apartados, de la siguiente forma:
<A name="primero"><H1>Primer apartado</H1></A>
Una vez hecho eso, pon los enlaces a los marcadores en las palabras que están en el primer párrafo, de esta forma:
En esta página puedes ir al <A href="#primero">primer</A> apartado, al segundo o al tercero.
Guarda tu archivo como marcadores.htm y comprueba los enlaces en tu navegador.
Y un último detalle, hay mucha gente que utiliza el típico enlace de "Volver arriba". Es una práctica muy recomendable, y
absolutamente todas las páginas deberían tener en la parte inferior de las mismas un enlace que lleve a la parte superior. Esto facilita a
los navegantes moverse dentro de la página con gran velocidad.
Para hacer esto, coloca este marcador en la parte superior de la página (la parte superior de BODY):
<A name="arriba"></A>
Y a continuación, en la parte inferior, coloca el enlace para saltar a la parte superior de la página:
Volver <A href=#arriba"></A>
CUIDADO
Mientras que el uso de marcadores es muy recomendable y a veces imprescindible para organizar el contenido dentro de una
página, es importante mantener la longitud de las páginas en un tamaño razonable. Seguramente habrás visto páginas en Internet
que se desplazan varias pantallas hacia abajo, en ese caso, la solución no es poner marcadores, sino fragmentar la página larga en
páginas más cortas. Procura que tus páginas no excedan de los 30 kb de tamaño. Esto hará felices a tus navegantes.
Y ahora que ya sabes todos los pasos para hacer una página con marcadores, aquí tienes el código para comprobar si lo has hecho
correctamente:
<HTML>
<HEAD>
</HEAD>
17/38
HTML
<BODY>
<A name="arriba"></A>
En esta página puedes ir al <A href="#primero">primer</A> apartado, al <A href="#segundo">segundo</A> o al <A

href="#tercero">tercero</A>.
<A name="primero"><H1>Primer apartado</H1></A>
Aquí tienes el primer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque existe
<A name="segundo"><H1>Segundo apartado</H1></A>
Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque
existe la posibilidad de que no hayas podido ver este efecto. Si es así, prueba a redimensionar el tamaño de la ventana de
forma que veas una barra de desplazamiento vertical, es decir, para subir o bajar dentro de la misma página. Entonces, ya
podrás ver el efecto en este archivo de ejemplo sobre marcadores y los enlaces a los mismos.
<A name="tercero"><H1>Tercer apartado</H1></A>
Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Aunque existe
<P>Volver <A href="#arriba">arriba</A>.
</BODY>
</HTML>
Enlaces con imágenes
Todos los ejemplos de enlace hasta aquí han sido mediante texto. En otras palabras, lo que está "activo" es el texto. Pero esto no es
sólo así, tal como comentamos antes, puede enlazarse cualquier tipo de objeto, particularmente las imágenes.
También es muy fácil de hacer. Todo lo necesario es colocar la etiqueta de las imágenes dentro del contexto de la etiqueta anchor, y
la imagen se hará "hyper", es decir, que al hacer clic sobre ella saltará al archivo que le hayas asignado, enlace absoluto o relativo. Por
ejemplo:
<A href="intro.htm"><IMG src="bander.gif"><A>
Si haces clic sobre la imagen volverás a la introducción del curso de HTML.
18/38
HTML
Te darás cuenta de que hay un borde alrededor de la imagen, indicando que está enlazada. Esto es casi siempre poco estético, para
quitarlo tendrás que añadir el atributo y valor border="0" dentro de la etiqueta IMGAquí tienes el código modificado:
<A href="intro.htm"><IMG src="bander.gif" border="0"><A>
Como ves, el borde ha desaparecido.
Enlaces a otros elementos
No sólo podemos enlazar páginas o imágenes. Cualquier elemento puede ser enlazado, desde otros archivos independientes hasta
otros protocolos de Internet.
Enlaces a archivos independientes

Los archivos independientes es un amplio campos de posibilidades de enlace. Se puede enfocar a dos grupos:
Archivos para abrirlos con el explorador
Se usa sobre todo con archivos grandes que abre el explorador, como imágenes, canciones MIDI, archivos de texto..., por ejemplo:
<A href="bander.gif">Imagen de la bandera<A>
que quedaría así:
Imagen de la bandera
Si de dispone de Microsoft Internet Explorer 4.0 y superiores, se pueden hacer enlaces a otros archivos, como .ccr del Comic Chat,
.cdf o Canales Activos... e incluso otros documentos como .doc, .xls... de forma que el navegador transforma su interfaz en la de
Microsoft Word, Excel, etc...
Archivos para distribuir por el WEB
De esto hablaremos más adelante en el curso. Si queremos distribuir programas desde nuestra página, añadiríamos un código como el
siguiente:
Ejemplo con enlace absoluto:
Descarga este <A HREF="http://www.dominio.com/archivo.zip">archivo</A>
Descarga este archivo
Ejemplo con enlace relativo:
Descarta este <A HREF="archivo.zip">archivo</A>

19/38
HTML
Descarga este archivo
HTML
Enlaces a protocolos de Internet

También podemos hacer enlaces a otros protocolos de Internet. Aquí también podría incluirse el FTP del apartado anterior:
Direcciones de e-mail
Una forma muy conveniente de que los navegantes contacten contigo es ofreciendo un enlace a tu dirección de e-mail. Puede hacerse
con la etiqueta anchor y una referencia conocida como naukti.
Aquí tienes un ejemplo:
Pulsa <A href="mailto:manuel@duiops.net">aquí</A> para mandarme un correo.
Pulsa aquí para mandarme un correo
Haz clic en el enlace y el navegador llamará al programa de correo predeterminado para enviar un e-mail mediante tu cuenta de
correo.
NOTA
Los enlaces a los e-mails también pueden hacerse rodeando a las imágenes. Simplemente pon el código del enlace con la
partícula mailto envolviendo a una imagen tal como explicamos anteriormente en este capítulo:
<A href="mailto:mi@email.com"><IMG src="imagen.gif"></A>
TRUCO
Hay otras formas de conseguir que los navegantes contacten contigo a través de la página. Los formularios es una forma muy
popular de hacer esto. Para más información acerca de ellos, mira el capítulo "Formularios" y el capítulo "Scripting y
preprocesamiento CGI".
Dado que el hecho de poner un enlace a la dirección de e-mail es un método tan cómodo y efectivo para que la gente contacte con
uno, mucha gente la pone en todas las páginas. Esto puede hacerse de una forma discreta en la información de pie de página. El pie de
página del curso HTML de Duiops te servirá de ejemplo.
También es posible decidir el "asunto" del mensaje, de forma que nos manden siempre mensajes con el mismo asunto (puede ser muy
útil si se reciben muchos e-mails al día, por ejemplo:
<A HREF="mailto: manuel@duiops.net?subject=Pruebas de HTML">Mensaje de prueba</A>

20/38
HTML
quedando así:
Mensaje de prueba
Haz clic ahí para probarlo y comprenderlo mejor. Verás que aparece la frase "Pruebas de HTML" en el asunto del mensaje de correo
que vas a enviar.
Direcciones de grupos de noticias
Se hacen de la forma servidor_de_noticias:grupo_de_noticias. Por ejemplo, para hacer un enlace al grupo de noticias de Windows
98 situado en el servidor de Microsoft...
Pulsa <A HREF="msnews.microsoft.com:microsoft.public.es.windows98">aquí</A> para ir al grupo de noticias de Windows

98.
Pulsa aquí para ir al grupo de noticias de Windows 98.
Direcciones de archivos contenidos en FTPs
Un FTP (File Transfer Protocol), te permite descargar archivos desde un servidor. En realidad, se trata de un directorio del ordenador
servidor que está compartido, es decir, que todos los usuarios de Internet pueden entrar en él a modo de sólo lectura (se necesita tener
el nombre de usuario y la contraseña para escribir información). Es muy similar a los enlaces a páginas web, pero en vez de usar
http://www al principio, usa ftp://ftp. Ejemplo:
<A href="ftp://ftp.idsoftware.com/idstuff/quake2/q2_test.exe">Quake 2 Demo Beta</A>
y quedaría así:
CUIDADO
Ten cuidado con poner enlaces a archivos que contengan material ilegal. Nos referimos a todas aquellas palabritas con z: mp3z
(canciones con calidad digital distribuidas ilegalmente), warez (programas comerciales distribuidos por la red), etc... Muchos
administradores de los servidores no permiten estas prácticas y te borrarán la página WEB de la red sin dudarlo.
Usando varios tipos de enlace en la misma página
Las páginas pueden tener enlaces de múltiples estilos. No hay límite en el número de enlaces que puedes usar dentro de una página.
Pero debes de poner una cantidad razonable para que la página sea efectiva.
Vamos a crear por pasos una página que utiliza todos los tipos de enlace que hemos visto en este capítulo: enlaces absolutos, enlaces
relativos, enlaces dentro de la misma página y mailto.
En tu editor HTML, crea la estructura básica.
<HTML>
<HEAD>
<TITLE>EnlaceManía</TITLE>
21/38
HTML
</HEAD>
<BODY>
</BODY>
</HTML>
Tablas
Las tablas nos servirán fundamentalmente para colocar de una forma ordenada textos e imágenes dentro de las páginas.
La etiqueta básica para las tablas sin bordes es <TABLE> y </TABLE>, y para con bordes <TABLE BORDER> y </TABLE>.
Dentro de la etiqueta anterior se colocarían las de las filas <TR> y </TR>. Y dentro de ellas, a su vez, habrá que colocar por celda
<TD> y <TD>. Un ejemplo de todo esto sería:
<TABLE>
<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>
a b
c d
o con borde...
<TABLE BORDER>
<TR>
<TD>
22/38
HTML
a
</TD>
<TD>b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>
a b
c d
También se puede hacer con un número de celdas distinto en las filas:
<TABLE BORDER>
<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
</TR>
</TABLE>
a b
c
También se puede hacer que las celdas abarquen a las demás con COLSPAN=x o con ROWSPAN=x, cambiando la x por el número
de filas a incluir.
<TABLE BORDER>
<TR>
<TD COLSPAN=2>
23/38
HTML
Celda abarcando
</TD>
</TR>
<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>
Celda abarcando
a b
c d
o bien...
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>
Celda abarcando
</TD>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>
Celda abarcando a b
24/38
HTML
c d
También podemos decir la separación de las celdas con CELLSPACING=x. Por defecto es de dos píxels. Se sustituye la x,
obviamente, por el número de píxels.
<TABLE BORDER
CELLSPACING=25>
<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR> B
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>a
c D
Por otro lado también es posible cambiar el espesor de los bordes añadiendo al BORDER un número de píxels, que quedaría así:
BORDER=x. Por defecto es un píxel:
<TABLE BORDER=10>
<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
25/38
HTML
</TR>
</TABLE>
a b
c d
También se puede separar el borde de la tabla del contenido que hay en ella con CELLPADDING=x. Por defecto es un píxel.
<TABLE BORDER CELLPADDING=25>

<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>
a b
c d
Ahora veamos cómo quedarían en la misma tabla BORDER, CELLSPACING y CELLPADING a la vez.
<TABLE BORDER=10 CELLSPACING=25 CELLPADDING=25>

<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
26/38
HTML
</TD>
<TD>
d
</TD>
</TR>
</TABLE>
a b
c d
Ahora veremos cómo poner titulares en las tablas. Es con la etiqueta <CAPTION> y </CAPTION>, y quedaría:
<TABLE BORDER>
<CAPTION>
Tabla con letras
</CAPTION>
<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>
Tabla con letras

a B
c D
27/38
HTML
También podemos añadir las llamadas celdas de cabecera, que por defecto estarán centradas y en negrita. Es con las etiquetas <HR>
y <HR> colocadas dentro de una fila antes de las otras. Quedaría así:
<TABLE BORDER>
<TR>
<TH>
Letras
</TH>
<TH>
Números
</TH>
</TR>
<TR>
<TD>
a
</TD>
<TD>
1
</TD>
</TR>
<TR>
<TD>
b
</TD>
<TD>
2
</TD>
</TR>
</TABLE>
Letras Números
a 1
b 2
El contenido de la celda se puede variar su posición colocando unos atributos dentro de <TD>. En horizontal, quedaría con
ALIGN="LEFT" alineado a la izquierda, con ALIGN="RIGHT" alineado a la derecha y con ALIGN="CENTER" centrado.
Recordemos que este último es el de defecto.
<TABLE BORDER>
<TR>
<TD>
---------------
</TD>
</TR>
<TR>
<TD ALIGN="LEFT">
a
</TD>
</TR>
<TR>
<TD ALIGN="RIGHT">
28/38
HTML
b
</TD>
</TR>
<TR>
<TD ALIGN="CENTER">
c
</TD>
</TR>
</TABLE>
---------------
a
b
c
Y si se puede ajustar en horizontal también se puede en vertical; con VALIGN="TOP" para alinearlo arriba,
VALIGN="BOTTOM" para abajo y VALIGN="MIDDLE" para el medio. Este último es el de defecto.<TABLE BORDER>
<TR>
<TD>
-
-
-
-
-
</TD>
<TD VALIGN="TOP">
a
</TD>
<TD VALIGN="BOTTOM">
b
</TD>
<TD VALIGN="MIDDLE">
c
</TD>
</TR>
</TABLE>
- a
- c
- b
Ahora veremos los fondos de las tablas, con colores e imágenes. Con colores es con BGCOLOR="xxyyzz" tal y como vimos en el
tema de fondos, y con imágenes es BACKGROUND="imagen.***" como vimos también en ese mismo capítulo. Habrá que colocar
29/38
HTML
estos atributos dentro de <TABLE> si queremos que afecte a toda la tabla, en <TR> para que afecte a una fila y en <TD> para que
afecte a una sola celda.
<TABLE BORDER BACKGROUND="chalk.jpg">

<TR BGCOLOR="AACCFF">
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD BGCOLOR="DDAA55">
d
</TD>
</TR>
<TR>
<TD>
e
</TD>
<TD>
f
</TD>
</TR>
</TABLE>
a b
c d
e f
Recordemos que sólo aceptan las imágenes de fondo en tablas el Microsoft Internet Explorer 3.0 o superior y el Netscape
Communicator 4.0 o superior. Para solucionar este problema deberemos colocar dentro de <TABLE> los dos atributos BGCOLOR y
BACKGROUND. Quedaría más o menos así:
<TABLE BORDER BACKGROUND="chalk.jpg" BGCOLOR="000000">
Ahora veremos cómo sobredimensionar una tabla, es decir, que sea más grande que las cosas que contiene. Se hace con HEIGHT=x
para la altura y WIDTH=x para la anchura. Veremos ejemplos de cada uno por separado aunque se pueden usar los dos a la vez.
<TABLE BORDER WIDTH=400>

<TR>
30/38
HTML
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>
a b
c d
o...
<TABLE BORDER HEIGHT=200>

<TR>
<TD>
a
</TD>
<TD>
b
</TD>
</TR>
<TR>
<TD>
c
</TD>
<TD>
d
</TD>
</TR>
</TABLE>
a b
c d
Y con este apartado ya terminamos. Veremos cómo insertar otros elementos dentro de las tablas. Pueden ser imágenes e incluso los
elementos más avanzados que veremos en los últimos capítulos como pueden ser programas JavaScript, HTML Layout, etc... Se
pueden introducir todos los elementos posibles dentro de ellas.
Para insertar una imagen bastará con usar la etiqueta <IMG SRC="imagen.***">.
<TABLE BORDER>
<TR>
<TD>
31/38
HTML
<IMG SRC="conversa.gif">
</TD>
</TR>
</TABLE>
Podemos cambiar la distancia a los bordes con los parámetros HSPACE=x y VSAPCE=x: el primero es para decidir los píxels que se
dejarán a izquierda y derecha, y el segundo los que se dejarán arriba y abajo. La x se sustituye por el número de píxels. Se colocarán
dentro de la etiqueta de la imagen. Da un resultado similar a CELLPADDING:
<TABLE BORDER>
<TR>
<TD>
<IMG SRC="conversa.gif" HSPACE=1 VSPACE=1>
</TD>
</TR>
</TABLE>
Marcos
Los frames o marcos digamos que no es más que dividir la pantalla en partes de forma que se pueda navegar de una forma más
cómoda por la página. Se suele utilizar un frame estrecho donde están los enlaces y un frame más ancho donde se cargan los mismos.
Siempre los WEB que poseen frames siempre constan de:
Una página donde se definen los frames

Las páginas independientes de cada frame
En la página donde hemos de definir los frames diremos el número de los mismos que queremos que haya, su tamaño y la página que
van a contener.
Las etiquetas a tener en cuenta son:
32/38
HTML
<FRAMESET> con </FRAMESET> para decidir el tipo y forma del frame. Veamos sus parámetros:
COLS="x, y" para las columnas y ROWS="x, y" para las filas (sustituyendo x e y por el tamaño de cada frame en píxels o
porcentaje). Recomendamos usar porcentaje si por ejemplo optimizamos nuestra página para 800x600 y queremos que se muestre
bien en resoluciones menores, y es mejor utilizar píxels si queremos que se veabien en resoluciones mayores. De todas formas es
posible que con nuestro navegador se vean muy bien distribuidos y que en las pantallas de otras personas se vean descolocados.
También es posible poner * en el tamaño, de forma que con COLS="20%, *" habría una columna que ocupa el 20% de la pantalla
y la otra columna ocuparía el resto. Se recomienda mucho usar el asterisco si decimos el tamaño con píxels. Se puede hacer
múltiples combinaciones con él, con COLS="20%, *, *" tendríamos tres columnas, una que ocupa el 20% y las otras dos que
ocuparían el resto divido entre ellas, es decir, 40% cada uno; y también podríamos usar COLS="*, 2*", de forma que tendríamos 2
columnas y la segunda con doble espacio que la primera, es decir, la que tiene * ocuparía el 33% y la que tiene 2* ocuparía el 66%.
Frames sin bordes. Se hace mediante la etiqueta FRAMEBORDER=0 dentro de la etiqueta FRAMESET. Si además no se quiere
que se vea el hueco hay que añadir FRAMESPACING=0 para Explorer y BORDER=0 para Netscape, es decir: <FRAMESET
FRAMEBORDER=0 FRAMESPACING=0 BORDER=0 COLS="xx, yy">
<FRAME>. Indica las características de cada frame y siempre irá colocada dentro de <FRAMESET> y </FRAMESET>, y habrá
tanto número de ellas como el número de tamaños indicados por COLS y/o ROWS, como por ejemplo:
<FRAMESET COLS="30%, 40% *">

<FRAME SRC="columna1.html">
</FRAMESET>
Sus parámetros son:
SRC="xxxx.html". Sirve para decidir la página que habrá en el frame, sustituyendo xxx por el nombre de un documento HTML o
una URL completa.
NAME="xxx". Es para decidir el nombre del frame (sustituyendo xxx por el nombre del mismo), y así poder hacer que los enlaces
de los otros frames se carguen en el frame que contenga dicho nombre. Para hacer esto también hay que introducir en cada enlace
(la etiqueta <A HREF> y </A>) un parámetro que diremos más tarde: TARGET.
MARGINWIDTH="x". Es para los márgenes en anchura dentro de los frames, siendo x el número de píxels.
MARGINHEIGHT="x". Como el anterior, pero con la diferencia de que dirá los márgenes en altura.
SCROLLING="yes/no/auto". Es para decidir si tendrá o no barra deslizadora: con "yes" la tendrá siempre, con "no" no la tendrá
nunca y con "auto" (por defecto) la tendrá sólo si se necesita.
NORESIZE. Es para impedir que se redimensionen los frames.
FRAMEBORDER="no". Es para quitar el borde, y habrá que introducirla en las etiquetas de los dos frames que lo comparten. Si
se quieren quitar todos es mejor usarlo en FRAMESET.
NOFRAMES. Indica lo que verán los navegadores que no soportan frames. Quedaría colocada así:
<HTML>
<FRAMESET...>
<FRAME...>
<FRAME...>
<NOFRAMES>
<BODY>
Tu navegador no soporta frames. Pulsa <A HREF="index.html">aquí<A> para acceder a la página de contenidos.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
El parámetro TARGET. Todo lo relacionado con esta etiqueta trata de pulsar enlaces en un frame y que se carguen en otro.
Con TARGET="xxx" introducido en un enlace <A HREF><A> tendremos que sustituir xxx por el nombre de otro frame. Ese
nombre fue el que colocamos en NAME="xxx". Por ejemplo, al pulsar el enlace de:
33/38
HTML
<A HREF="ayuda.html" TARGET="Contenido"<Ayuda<A>
...se cargaría la página ayuda.html dentro del frame que contenga en su etiqueta FRAME SRC="xxx.html" NAME="Contenido".
TARGET tiene otros parámetros también muy útiles. Han de estar siempre en minúsculas:
TARGET="_blank". Abre una nueva ventana del navegador con el enlace activado cargado a pantalla completa. Habrá dos
ventanas del mismo navegador funcionando a la vez.
TARGET="_self". Con él el enlace se carga dentro del propio frame. Si se elimina la etiqueta y no ponemos nada de TARGET
conseguiremos lo mismo, por lo que no tiene mucha utilidad.
TARGET="_top". El enlace se carga a pantalla completa dentro de la misma ventana del navegador. Esto es muy útil, y se suele
olvidar ponerlo. Si no se pone, al cargar páginas ajenas a las nuestras se cargarían dentro del frame, y si tienen frames también el
problema empeora. Hemos de introducirlo SIEMPRE cuando hagamos enlaces con URL completas de WEB ajenos al nuestro.
Recuerda que pueden colocarse frames dentro de otros frames. Por ejemplo, podemos decidir que un frame con forma de columna se
divida en otros dos con forma de fila.
Si queremos una distribución así:
-----------------
|1| |
| | |
|---| 3 |
| | |
|2| |
| | |
-----------------
...tendremos que introducir un código similar al siguiente (hemos llamado a las tres páginas dentro de los frames 1, 2 y 3):
<HTML>
<HEAD><TITLE>Página con dos columnas y una de ellas divida en dos filas</TITLE></HEAD>
<FRAMESET COLS="25%, *">
<FRAMESET ROWS="40%, *">
<FRAME SRC="1.html">
<FRAME SRC="2.html">
</FRAMESET>
<FRAME SRC="3.html" NAME="Contenido">
<NOFRAMES>
<BODY>
Tu navegador no soporta frames. Pulsa <A HREF="index.html">aquí<A> para acceder a la página de contenidos.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
Ya para terminar veremos los frames flotantes. Son totalmente desconocidos para la mayor parte de los navegantes y/o creadores de
páginas WEB. Sólamente funcionan con Microsoft Internet Explorer 3.0 o superior, y no es más que un recuadro con una página
WEB que está contenido a su vez en otra. Se hace mediante la etiqueta <IFRAME> y </FRAME> además de una serie de
parámetros más: NAME="xxx" es análogo al comando del mismo nombre de <FRAME>, es decir, para poder mediante TARGET
cargar enlaces en el frame flotante. HEIGHT="x" y WIDTH="x" son los números de píxels en altura y anchura del hueco
destinado para el frame flotante. SCROLLING="yes/no/auto". Con una de estas tres palabras decidimos si queremos poner barras
34/38
HTML
de desplazamiento o bien que se coloquen automáticamente sólo si se necesitan. SRC="xxx.html". Es el nombre de la página WEB
contenida dentro del frame flotante.
Aquí tenéis un único ejemplo que había antes en el WEB de Duiops. Mira cómo pulsando con el botón derecho del ratón sobre el
frame flotante puedes ver el código fuente, ya que es una página totalmente independiente:
<IFRAME NAME="Copyright" HEIGHT="300" WIDTH="500" SCROLLING="NO" SRC="copyrigh.html">

</IFRAME>
Si se usa un navegador no compatible con este tipo de frames no podrán leerse. Para evitarlo conviene colocar entre <FRAME> y
</FRAME> un código alternativo al mismo. Pondremos un ejemplo con el código exacto y más abajo lo incluiremos pero forzado
para que se vea con todos los navegadores incluido el IE 3.0 o superior:
<IFRAME NAME="Copyright" HEIGHT="300" WIDTH="500" SCROLLING="NO" SRC="copyrigh.html">

<CENTER>
<P><FONT COLOR="#008080" SIZE="4"><B>© Duiops 1997</B></FONT>
</CENTER>
<BR><P>
<P><FONT COLOR="#008080">El diseño y código de las páginas, los gráficos de la barra de herramientas superior y gran
parte del texto de los contenidos temáticos es propiedad del autor. Está prohibido su uso y/o reproducción del contenido del
WEB antes mencionado sin permiso del mismo.
<P>Todas las marcas aquí mencionadas son propiedad de sus respectivos fabricantes y/o diseñadores.</FONT>
</IFRAME>
L
Formularios
Los formularios es la mejor manera de que nuestros lectores se comuniquen con nosotros. Son útiles para hacer, por ejemplo, libros
de visitas.
Hay dos formas de realizar y/o recibir los formularios: mediante un programa CGI del servidor o generado por el navegador. ¿Qué
son ambas cosas? El programa CGI es uno que se almacena en el servidor; mediante el formulario enviaremos la información al
programa CGI y éste generará el mensaje e-mail que nos llegará. La otra manera es mediante el navegador, el cual es que genera el
correo.
La mejor es la primera, ya que la segunda tiene una incompatibilidad mucho mayor. Sólo soportan esta última el Netscape Navigator
2.0 o superior y el Microsoft Internet 4.0 o superior. Para hacer esta necesitamos la información del propietario del CGI para poder
hacer el encabezado del formulario. En este tema explicaremos la segunda forma, más genérica:
La estructura de un formulario es:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">

Elementos del formulario para introducir datos.
Botones de envío y de borrado.
</FORM>
Vamos a explicar cada uno de ellos: Etiqueta FORM inicial:
35/38
HTML
ACTION indica la acción, en este caso que los datos se envíen a la dirección de correo indicada. Con un CGI aquí habría que
escribir la URL del mismo.
METHOD="POST" indica que los datos se procesen al pulsar el botón de envío.
ENCTYPE="TEXT/PLAIN" indica que los datos se envíen sin codificación.
Elementos del formulario:
Campos ocultos, mediante <INPUT TYPE="hidden" NAME="xxx" VALUE="yyy">, donde xxx es el nombre de la
información introducida y yyy la información en sí. A pesar de que casi siempre sive sólo para parámetros del CGI sirve, es
posible también usarlos en nuestra conveniencia.
Cuadros de texto de una línea, mediante <INPUT TYPE="text" NAME="xxx" VALUE="yyy">, donde xxx indica el
nombre de la información introducida y yyy indica si queremos que el formulario incluya alguna información inicial (por ejemplo,
si hay que introducir la URL de una página WEB podemos poner en el cuadro de texto "http://"). Tiene dos modificadores:
SIZE="x", que indica la longitud en píxels, y MAXLENGHT="y", que indica el número máximo de caracteres a introducir.
Cuadros de texto oculto, mediante <INPUT TYPE="password" NAME="xxx"<, donde xxx es el nombre de la información
introducida. Ideal para poner contraseñas o passwords. Tiene los dos mismos modificadores que el anterior.
Cuadros de texto con desplazamiento, mediante <TEXTAREA NAME="xxx" ROWS="y" COLS="z"></TEXTAREA>,
donde xxx es el nombre de la información introducida, y el número de filas y z el número de columnas. Ideal para comentarios o
descripciones largas.
Listas desplegables, mediante:
<SELECT NAME="xxx">
<OPTION>yyy
<OPTION>yyy
<OPTION>yyy
</SELECT >
...donde xxx es el nombre de la información introducida y yyy el nombre de cada opción de la lista introducida.
Botón de opción o de radio, mediante <INPUT TYPE="radio" NAME="xxx" VALUE="yyy">, donde xxx es el nombre de
la información introducida y yyy es el nombre de cada opción en concreto. Habrá que introducid varias veces la etiqueta, y con
CHECKED podemos hacer que se seleccione sólo uno de ellos. Ideal para seleccionar UNA opción entre VARIAS.
Casilla de verificación, mediante <INPUT TYPE="checkbox" NAME="xxx">, donde xxx es el nombre de la información
introducida. Tiene el modificador CHECKED si queremos que se active por defecto. Ideal para seleccionar VARIAS opciones
entre otras VARIAS.
Botones de envío y de borrado:
Son fundamentales para el formulario.
El de envío se hace con <INPUT TYPE="submit" VALUE="xxx">, donde xxx es el texto del botón.
También es posible colocar una imagen en el lugar del botón de eviado mediante <INPUT TYPE="image" SRC="imagen.gif"
BORDER=0>. Esto no se puede hacer con el botón de borrado.
El de borrado se hace con <INPUT TYPE="reset" VALUE="xxx">, donde xxx es el texto del botón.
Ahora veremos un ejemplo de un formulario del tipo de los que el navegador genera el e-mail:
<FORM ACTION="mailto:duiops@interbook.net" METHOD="POST" ENCTYPE="TEXT/PLAIN">

<INPUT TYPE="hidden" NAME="tipodeformulario" VALUE="Formulario de ejemplo">
<P>Escribe tu nombre:
<INPUT TYPE="text" NAME="Nombre" SIZE="30" MAXLENGHT="30">
36/38
HTML
<P>Escribe tus apellidos:
<INPUT TYPE="text" NAME="Apellidos" SIZE="40" MAXLENGHT="50">
<P>Escribe tu dirección de correo electrónico:
<INPUT TYPE="text" NAME="Direccion" VALUE="@" SIZE="30" MAXLENGHT="40">
<P>Pon aquí la dirección de tu página WEB:
<INPUT TYPE="text" NAME="URL" VALUE="http://" SIZE="40" MAXLENGHT="50">
<P>Ahora por pequeño comentario:
<BR><TEXTAREA NAME="Comentario" ROWS="5" COLS="35">
</TEXTAREA>
<P>¿Que tema te gusta más?:
<BR><SELECT NAME="Color">
<OPTION>Beatles
<OPTION>Hi-Fi
<OPTION>New Age
<OPTION>Dinosaurios
</SELECT>
<P>En general, ¿qué te parece esta página?:
<BR>
<INPUT TYPE="radio" NAME="Velocidad" VALUE="Lento">Mal
<INPUT TYPE="radio" NAME="Velocidad" VALUE="Normal" CHECKED>Regular
<INPUT TYPE="radio" NAME="Velocidad" VALUE="Rapido">Muy bien
<P>¿Vas a entrar más veces en el WEB?
<BR><INPUT TYPE="checkbox" CHECKED NAME="Entrarmasveces"> Sí, entraré más veces en el WEB de Duiops
<BR><P>
<BR><P>
<INPUT TYPE="submit" VALUE="Enviar datos">
<INPUT TYPE="reset" VALUE="Borrar">
</FORM>
y todo quedaría así
Escribe tu nombre:
Escribe tus apellidos:
@
Escribe tu dirección de correo electrónico:
http://
Pon aquí la dirección de tu página WEB:
Ahora por pequeño comentario:
37/38
HTML
¿Que tema te gusta más?:
Beatles
En general, ¿qué te parece esta página?:
Mal Regular Muy bien
¿Vas a entrar más veces en el WEB?
Sí, entraré más veces en el WEB de Duiops
Enviar datos Borrar
38/38

Introduccion Al Lenguaje HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introduccion Al Lenguaje HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Pro gramació n WEB con HTML (IT Chetumal)

ETIQUETAS DE LA ESTRUCTURA BÁSICA

<P ALIGN="LEFT"> Para alinear el texto con el margen izquierdo:

Este párrafo está alineado a la izquierda

<P ALIGN="CENTER"> Para centrar el texto:

Este párrafo está centrado.

<P ALIGN="RIGHT"> Para alinear el texto con el margen derecho:

Dos <BR> equivalen a un <P>. Estos dos ejemplos se verían igual:

<H1>Prueba</H1> se verá como:

<H4>Prueba</H4> se verá como:

<H6>Prueba</H6> se verá como:

Se puede variar la alineación con el atributo ALIGN=x, donde x es LEFT o RIGHT.

<HR WIDTH="50%" ALIGN="RIGHT"> para alinear a la derecha:

Se puede variar el espesor con SIZE=x, donde x es el número de píxels:

FORMATEO DEL TEXTO

Formateo del texto. Veremos una serie de etiquetas para el texto:

Líneas en blanco, con <BR><P>.

Este es un texto <BIG>más grande</BIG>

Este es un texto más grande

Este es un texto <SMALL>más pequeño</SMALL>

Este es un texto más pequeño

Esto es una prueba del preformateado

Esto es una prueba del preformateado

Esto es una prueba del preformateado

Hola Esto es una prueba del preformateado

Como ves no ha respetado los espacios ni los cambios de línea.

<BLOCKQUOTE>xxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxx xxxxxxxxxxx

xxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxx

<FONT SIZE=4 COLOR="AA0000" FACE="Arial, Verdana">Prueba de texto</FONT>.

...que quedaría así:

Comentario de varias líneas:

Añadiendo listas (contenido antiguo)

Hay tres clases de listas: desordenadas, ordenadas y de definición:

Es posible anidar las listas, por ejemplo:<UL>

También podemos cambiar el tipo de símbolo elemento por elemento:

A cada elemento puede dársele un valor similar a start=x, con value=x:

Este elemento vale 10

10. Elemento siguiente

Enlazando las páginas

Esta etiqueta se divide en una de inicio y otra de cierre, de la forma:

Pulsa <A HREF="http://www.microsoft.com">aquí</A> para ir al WEB de Microsoft

Se pueden hacer varios tipos de enlaces:

1. Enlaces absolutos (a páginas situadas en otras WEBs)

Mira los <A HREF="http://www.amd.com/products/products.html">productos</A> de AMD

Mira los productos de AMD

Pulsa <A HREF="intro.htm">aquí</A> para ir la introducción del curso de HTML

Pulsa aquí para ir la introducción del curso de HTML

Pulsa <A HREF="ejemplos/ej1.htm">aquí</A> para ver un ejemplo

Pulsa aquí para ver un ejemplo.

El navegador buscará el archivo ej1.htm dentro del directorio ejemplos.

Pulsa <A HREF="../index.htm">aquí</A> para volver a la página principal

Pulsa aquí para volver a la página principal

Pulsa <a HREF="../pruebas/prueba1.htm">aquí</A> para ver el primer ejemplo

Pulsa aquí para ver el primer ejemplo.

1. En tu ordenador, crea un directorio y llámalo web.

4. Guarda este archivo en el directorio web y llámalo inicio.htm.

1. Abre tu editor HTML

Codifica la siguiente página:

Esta página aparecerá en el directorio artículos.

2. Guarda esta página como articulo1.htm en el directorio articulos.

Ahora vamos a añadir un enlace al documento original.

1. Abre el archivo inicio.htm en tu editor.

Si quieres poner un enlace para que vuelva al inicio, haz lo siguiente.