Manual HTML

c c|

En principio, empecemos diciendo que HTML son las siglas de HyperText Markup Language (o
Lenguaje de marcado de hipervínculos o hipertexto). Una página Web abunda en marcas de
hipervínculos (enlaces). Generalmente, cuando movemos el Mouse sobre una línea de texto,
encontramos palabras o expresiones subrayadas, con color azul (aunque pueden tener otros
colores). Cuando hacemos clic sobre alguna palabra o expresión de hipervínculo, el explorador
de Internet nos remite a otro sitio o página Web.
Cuando hablamos de páginas Web, nos referimos a las páginas que se utilizan en los
exploradores de Internet, que, a primera vista, tiene las mismas propiedades. Cabe aclarar que
actualmente se pueden crear páginas Web en muchos programas, en procesadores de texto
como Microsoft Word, Excel, PowerPoint, Access, Corel Draw, Publisher, etc. Sin embargo,
cuando se diseña la estructura de una página Web en estos programas, el código que permite
dar forma a la página Web para ser accedida desde cualquier explorador, queda oculto a los
ojos del diseñador de la página.
HTML es un lenguaje que utiliza los códigos estandarizados para la creación de páginas Web.
Sin embargo, desde este punto no se utilizan objetos para colocar en pantalla, todo o l que se
desee hacer y representar, debe ser pensado y previsto antes de codificar.

Antes de entrar en detalle acerca de la creación de páginas Web, es necesario entender cómo
se escribe el código y en qué programa. El código se puede escribir en cualquier procesador de
textos, aunque es recomendable hacerlo en un programa que no maneje estilos de texto que
pueden no ser reconocidos por el explorador de Internet; puede ser un programa como
WordPad, el Bloc de notas o Microsoft Word.

Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo
de información necesita introducir. Esto ayuda a que la página que diseña sea claramente
legible y se pueda modificar más fácilmente. Si una página Web es complicada en su diseño,
habrá muy pocos que sepan dar el mantenimiento adecuado. Abajo se muestra la estructura
lógica de una página Web.
<HTML>
<HEAD>
<TITLE>Primera página</TITLE>
</HEAD>
<BODY>
...
...
...
</BODY>
</HTML>
Estas líneas son permanentes en una página Web. Siempre van a estar presentes no
importando qué tan corta o tan larga sea la página y el contenido.
La primera instrucción <HTML> indica al explorador de Internet que ahí comienza una página
Web. La siguiente instrucción <HEAD> indica el encabezado de la página, es decir el área de la
barra de título. <TITLE> indica el título de la página propiamente dicho. <BODY> es una
instrucción que indica al explorador de Internet que ahí empieza el área de contenido de la
página (es decir el cuerpo de la página).
En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para indicar al
programa que las propiedades aplicadas con esa instrucción se terminan ahí donde se pone el
signo diagonal. Si el signo de cierre (/) no se aplica convenientemente, el programa seguirá
aplicando las propiedades de la instrucción anterior a todas las líneas inferiores, hasta que se
encuentre otra instrucción que modifique las propiedades actuales.

Cuando se haya escrito el código de la página Web, es necesario guardar el archivo como una
página Web. Una página Web tiene la extensión HTM, la cual se debe especificar en el
momento de guardar la página. Una vez guardado el archivo con la extensión HTM, se puede
crear un acceso directo para este archivo o se puede abrir directamente desde el sitio en el que
se guardó.

Abre el Bloc de notas y copia el siguiente código que se muestra. Cuando hayas terminado de
capturar el código, guárdalo como Primera.htm (si existe y pide reemplazar el archivo, responde
afirmativamente).
El resultado se muestra a continuación.

c

Una vez creada nuestra página Web, será necesario modificarla. Para ello, necesitamos abrir el
código de la página. Si se abre la página en un procesador de textos como Microsoft Word, sólo
veremos el texto, pero el código no es accesible para el usuario.
Si deseamos obtener el código, será necesario abrir el bloc de notas y abrir la página desde ahí,
utilizando la opción Abrir, y en el cuadro de diálogo Abrir, se elige Todos los archivos, en la lista
Tipo (esto porque la página tiene una extensión diferente al filtro mostrado). Sin embargo, una
manera más cómoda y rápida, es acceder al código desde la página Web abierta. Para ello, se
hace lo siguiente:
1.- Se hace clic con el botón secundario en un área que no sea un objeto (como una imagen,
un hipervínculo, etc.)
.- En el menú contextual, se elige la opción · .

HTML maneja seis estilos de título aplicables al texto. Cuando se aplica un estilo, el programa
interpreta el estilo y lo aplica mientras no encuentre un signo de cierre.
Los estilos de título se enumeran de H1 a H6, siendo H1 el más grande y H6 el más pequeño.
Aunque el programador tiene la opción de utilizar un tamaño diferente mediante la instrucción
FontSize.
A continuación se muestra el código y el resultado de la utilización de títulos en una página
Web.
El resultado de este código se muestra a continuación.
De aquí en adelante, sólo se mostrará la ventana de resultados en los ejercicios. El alumno

tiene la obligación de usar las instrucciones que se van explicando para obtener los resultados
requeridos en los ejercicios.

!

" # #$ %
Al igual que otros programas, en HTML puede aplicar el efecto " , o $ %
al texto. Para el efecto negrita use <B>, para cursiva use <I>, para subrayado use <U> con su
respectivo signo de cierre.
Ejemplo:
<B> Estilos Negrita</B><BR>
<I> Estilo Cursiva</I><BR>
<U>Estilo subrayado</U><BR>
La instrucción <BR> de las líneas de arriba se utiliza para insertar un retorno de carro. Si no se
incluye esta instrucción en cada línea de texto, la página Web juntará las tres líneas de texto en
una sola línea. Esto significa que cada vez que deseemos insertar un salto de línea, debemos
incluir esta instrucción en el lugar donde se desee generar una nueva línea.
Existe una instrucción que permite remarcar partes de un párrafo, esta instrucción es la
instrucción STRONG. Por ejemplo, este código:
Este es un ejemplo de <strong> instrucciones de formateo de texto </strong>
Produce este resultado:
La instrucción <EM> funciona de forma similar a <I>. Cuando se aplica <EM>, el texto
afectado aparece siempre en estilo cursiva. Por ejemplo, el siguiente código:
Este es un ejemplo de instrucciones de <em>formateo de texto</em>
Produce el siguiente resultado:

Usando las instrucciones conocidas hasta este momento, debes diseñar la página que se
muestra a continuación.
Se usa el estilo H1 para el título principal, <B> o <STRONG> para el remarcado negrita y <U>
para el subrayado. Doble salto de línea <BR> para la separación de un párrafo con otro.

c

Cuando se desee indicar a HTML un inicio de párrafo y utilizar una alineación junto con la
instrucción, se debe utilizar <P>. Este comando se usa junto con las instrucciones de alineación
<Left>, <Center> o <Right> para modificar la posición del texto en pantalla. Por ejemplo, la
siguiente línea de código, centra el texto en la pantalla.
<p align=center>Texto centrado en la pantalla </p>
El siguiente código:
Produjo el resultado que se muestra a continuación.

Si se desea alinear texto a la derecha, debe introducir una expresión como ésta:
<p align=right>Texto justificado a la derecha</p>
Para trazar una línea de separación utilice el comando <HR>. Esta instrucción sin
modificadores, traza una línea horizontal predeterminada. Si se incluyen modificadores, se
podrá personalizar la apariencia de la línea.
Ejemplo:
<HR>
Traza una línea horizontal.
Para modificar la apariencia predeterminada, haga esto:
<HR Width= >
Traza una línea de ancho de pantalla (en píxeles) de píxeles. Esta línea de código
produciría una línea como ésta:
Si se desea cambiar el color, es necesario incluir el modificador Color=m . Ejemplo:

<HR Color=Blue>
m
m

m
Puedes aplicar color de fondo a la página utilizando el siguiente modificador:
bgcolor=Color
Por ejemplo:
<body bgcolor=cyan>
Esta instrucción aplica el color CYAN al fondo de la página. La instrucción bgcolor se debe
aplicar dentro de la instrucción <Body>.
Para facilitar la utilización de colores de fondo mediante constantes de color, presentamos la
siguiente tabla de colores:
m m
Negro BLACK
Azul BLUE
Verde GREEN
Rojo claro RED
Rosa intenso MAGENTA
Marrón FUCSIA
Gris GRAY
Rosa claro PINK
Amarillo YELLOW
Blanco WHITE
Verde claro GREEN+
Rojo intenso BLUE+
Cián Claro BLUE/RED
Además de que se pueden aplicar combinaciones con modificadores (con el signo +) a cada
constante de color, puede utilizar modificadores con el signo /. Por ejemplo, la combinación
MAGENTA/YELLOW, produce un color verde oliva claro.
La forma más extensa de obtener colores es utilizando la representación hexadecimal del a la
F. Por ejemplo, la siguiente línea de código:
<Body Bgcolor="# FFFFF">
Produce un color azul aguamarina.

Además de aplicar colores de fondo usando combinaciones como las mencionadas
anteriormente, puedes aplicar imágenes como fondo de la página. Para ello, utiliza el
modificador & '( )
Por ejemplo, la siguiente línea de código aplica una imagen de fondo a la página.
<body img background=imagen.bmp>
Para aplicar una imagen de fondo, debe ubicar la imagen en la misma ruta donde se encuentra
la página, en su defecto, deberá especificar la ruta completa en el parámetro IMG
BACKGROUND.
La imagen de esta página fue retocada con efecto relieve. Sin embargo, puede acceder a la
galería de imágenes para encontrar alguna imagen que desee aplicar. También puede utilizar
una imagen animada de fondo. Para ello, debe buscar archivos con extensión GIF y verificar
que sean animados.

!

Además de modificar el fondo de la página aplicando color de fondo o imágenes, es posible
cambiar el color del texto de toda la página, así como el color de los vínculos.
Para cambiar el color del texto de toda la página, use el modificador TEXT=Color.
Por ejemplo:
<body bgcolor=cyan Text=Blue>
Se utiliza para aplicar color de fondo cyan y color de texto azul a toda la página. Si se desea
que los hipervínculos no visitados aún tengan un color distinto al color azul predeterminado,
debe hacer lo siguiente:
<body bgcolor=cyan Text=Blue Link=Yellow Vlink=Gray>
Esta instrucción aplica el color amarillo predeterminado para todos los hipervínculos de la
página, y el color gris a los hipervínculos visitados.

Deberás diseñar la página que se muestra a continuación, aplicando posteriormente, a solicitud
del profesor, color de fondo o imagen de fondo, así como alineación y líneas de separación.
La imagen de fondo es una diapositiva de Microsoft PowerPoint con una plantilla de fondo.
Además se aplicó un relleno de textura a la diapositiva Después se agregaron las dos imágenes
que se muestran sobre la textura, y se modificó el color negro en la opción Volver a colorear,
del menú Formato/Imagen. Los estilos de título utilizados para esta página fueron H1, H, H3 y
H5.

c

Al igual que otros programas, HTML permite al programador modificar la apariencia
predeterminada de los párrafos aplicando sangrías tanto de primera línea como de párrafos, e
interlineados.
$

Para aplicar sangría de primera línea se usa el modificar !*) Para aplicar sangría de
párrafo se usa el comando &'+) Por ejemplo, la siguiente línea de código, aplica una
sangría de 5 píxeles para la primera línea de un párrafo.
<p style="text-indent:5 ">Esta es la primera línea de texto con sangría de cincuenta píxeles de
distancia desde el borde izquierdo.</p>
El resultado de aplicar esta línea de código, es el siguiente:
Además de la sangría de primera línea que puede ser especificada con un número en píxeles,
HTML permite utilizar una sangría automática mediante el comando Blockquote.
Por ejemplo, la siguiente instrucción muestra cómo se puede aplicar una sangría automática
mediante el comando Blockquote.
<Blockquote>
Texto y otras instrucciones
</Blockquote>

En un procesador de textos los interlineados se utilizan mediante opciones de menús que
permiten cambiar el espacio entre líneas de un párrafo. En HTML, el interlineado se controla
con el modificador *. A diferencia de un procesador de textos como Microsoft Word
que tiene unos interlineados predeterminados, HTML permite al usuario separar las líneas de un
párrafo mediante porcentajes.
Por ejemplo, la siguiente instrucción aplica un porcentaje de interlineado de 15 , equivalente
a 1.5 líneas.
<p align=justify style="line-height=15 ">
El resultado se muestra en la siguiente ventana con dos párrafos, el párrafo modificado con
interlineado y el párrafo normal.
Cada vez que desees aumentar el interlineado, deberás aumentar el porcentaje.

En la línea de código anterior, se incluyó un modificador de alineación, align=justify, esto
permite que el párrafo se justifique.

Haciendo uso de los conocimiento adquiridos, utilizando prioritariamente los comandos de
formateo de párrafos para sangrías e interlineados, deberás diseñar la página que a
continuación se muestra.

Un hipervínculo es un vínculo de una página Web o un archivo a otra página Web u otro
archivo. Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en un
explorador Web, se abrirá o se ejecutará, en función del tipo de destino. El destino es con
frecuencia otra página Web, pero también puede ser una imagen, un archivo multimedia, un
documento de Microsoft Office, una dirección de correo electrónico o un programa.
Por ejemplo, un hipervínculo a una página muestra la página en el explorador Web y un
hipervínculo a un archivo .avi abre el archivo en un reproductor multimedia.

Cuando se crea un hipervínculo local, lo que en realidad se hace es desplazarse hacia otro
punto de la misma página Web. Para ello, primero debemos hacer referencia al marcador del
hipervínculo con la instrucción href="#Marcador", donde Marcador es el marcador del
hipervínculo. Posteriormente, cuando se desarrolle el marcador, se deberá anotar el nombre del
marcador con la instrucción name="#marcador", donde marcador es el identificador utilizado
en la instrucción href.
A continuación se muestra un diagrama que ilustra el concepto de un hipervínculo local.
En la siguiente página encontrará un ejemplo de una página Web que utiliza marcadores de
hipervínculos dentro del mismo documento. Observe que los marcadores se inician con las
palabras claves <A Name>, para indicar que en esa sección inicia un marcador que podrá ser
accedido desde cualquier parte del mismo documento, y las referencias a estos marcadores se
aplican con la expresión <A Ref=#marcador>, donde marcador, es el nombre del marcador al
que se desee acceder.
Ambas páginas fueron desarrolladas en la misma ventana, es decir el código fue escrito de
arriba hacia abajo. La mecánica de esta página fue aplicar varios espacios (BR) para así poder
desplazarse hacia la siguiente página y que ésta se ubique hasta arriba (TOP). En situaciones
normales, no sería necesario dejar tantos espacios, bastaría con escribir los temas uno tras otro
en el orden deseado.
La siguiente figura muestra el código utilizado para obtener ambas páginas mostradas arriba.
Por lo tanto, si quiere probar lo mismo, sólo debe copiar este código en el bloc de notas y
guardarlo como MARCADORES.HTM, y obtendrá un página Web con dos ventanas iguales a las
que se muestran arriba.
<html>
<head><title>Página Web con marcadores</title></head>
<body TextColor="blue">
<a name="#Inicio"><h1>Página principal</h1></A>
<hr>
<p align="justify" Style="text-indent:5 ">Esta página contiene marcadores o hipervínculos
locales que permiten al usuario desplazarse a través del documento mediante estos
hipervínculos.
El uso de marcadores proporciona una manera práctica y sencilla de seccionar el documento y
encontrar información rápidamente.
No podían faltar en un curso de páginas Web los enlaces o hipervínculos, que son la esencia
misma de la Red. Los también llamados hipertextos son los textos o los objetos sobre los que
podemos hacer clic para que nos lleven a otra parte del documento, a otro archivo del mismo
sitio de Internet o a otra página de Internet, entre otras funciones.
Habíamos dejado nuestra página en la lección anterior diseñada en una tabla que ocupaba todo
el documento. En esta lección vamos a insertar todos los hipervínculos que tiene que haber en
nuestra página.
<br><br>
</p>
<a "target="_top" href="#Marcadores">Haga clic para obtener más información sobre
marcadores</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br>
<br><br><br><br><br><br>
<A name="#Marcadores"><h1>Qué son los marcadores</h1></A>
Los marcadores son hipervínculos o enlaces internos que permiten desplazarse a través del
mismo documento. Cuando el usuario hace clic sobre un enlace, la página se desplaza hasta la
sección donde se haya definido un marcador.
<br>
Para definir un marcador, debe empezar con la expresión <b><i>A
Name="#Marcador"</i></b> en el sitio donde desee definir un marcador. Para hacer
referencia al marcador definido, use la expresión <b><i>A Href="#Marcador"</i></b>, para
acceder a dicho marcador.
<br>
Un hipervínculo con marcador es un enlace entre un hipertexto y una sección de un documento.
<br><br><br><br><br><br><br><br><br><br><br><br>
<A href="#Inicio">Volver arriba</A>
</body>
</html>

!

!
,
Para organizar de forma más inteligente la información de un sitio Web puede manejarse más
de una página. En cualquier momento será necesario acceder a dicha página, entonces puede
crear un hipervínculo que le permita dirigirse a esa página de la siguiente manera:
<a ref="páginaweb.htm">Texto del hipervínculo</a>
La siguiente gráfica ilustra el concepto de relacionar páginas en un mismo sitio con acceso
mediante hipervínculos.
Cuando accede a una página relacionada, puede controlar la ventana donde se mostrará el
contenido de esta. Por ejemplo, puede mostrar la siguiente página en una ventana diferente, en
la misma venta o en el mismo marco (en el caso de que se manejen marcos). Para realizar esta
operación debe escribir una instrucción como la siguiente:
<a target="_blank ref="paginaweb.htm">Texto del hipervínculo</a>
Esta instrucción indica a HTML que la siguiente página que se abrirá utilizará una ventana
nueva para su contenido.
El siguiente ejemplo ilustra el uso de hipervínculos que acceden a otros documentos externos a
la página Web actual.
El código para realizar una página como la que se muestra en el ejemplo anterior, lo tiene a
continuación.
<html>
<head><Title>Página con hipervínculos externos</title></head>
<body>
<h1>Mi página con hipervínculos externos</h1>
<hr>
<a href="Primera.htm">Primer hipervínculo</a><br>
<a href="Segunda.htm">Segundo hipervínculo</a><br>
<a href="tercera.htm">Tercer hipervínculo</a><br>
</body>
</html>
Las páginas a las que acceden los hipervínculos se diseñan de forma independiente de la página
actual. Si necesita saber cómo relacionar estas páginas, haga lo siguiente:
1.- Una vez diseñada la página principal, guárdela con el nombre Principal.htm.
.- En el menú Archivo, elija Nuevo.
3.- Diseñe una nueva página para el primer hipervínculo. Cuando termine guárdela con el
nombre Primera.htm.
4.- Repita estos pasos para las siguientes páginas (Segunda.htm, Tercera.htm).
Cuando termine con todas las páginas, abra la página principal y pruebe haciendo clic en los
hipervínculos de la página.

Con los conocimientos adquiridos hasta este momento, diseña la página que se muestra,
utilizando los elementos de párrafos, alineación, Negrita, cursiva y subrayado, estilo de título e
hipervínculos externos.
El fondo de la página se obtuvo de usar una diapositiva de PowerPoint con fondo relleno con
trama. Sin embargo, se usará la imagen o color de fondo que el profesor indique. Los
hipervínculos son externos. Cuando el usuario haga clic en algún hipervínculo, éste se abrirá en
una ventana independiente.

, -.

Así como pueden vincularse páginas Web dentro del mismo sitio, también podemos crear un
hipervínculo que nos lleve a un sitio Web. Para ello, debemos utilizar la siguiente sintaxis:
<a ref="http://www.sitioweb.com">Texto del hipervínculo</a>
Por ejemplo, la siguiente página muestra unos hipervínculos a sitios de Internet.
El código para obtener la página mostrada, es el siguiente:

<html>
<head><title>Uso de URL</title></head>
<body>
<h1>Uso de URL</h1>
<hr>
<a href="http://www.todito.com.mx"><h3>Quiero acceder a Todito.com</a>
<a href="http://www.mp3.com"><h3>Sitio de música MP3</a>
<a href="http://www.1 1juegos.com"><h3>Juegue como los mejores</a>
</body>
</html>
Para poder acceder a dichos sitios, deberá estar conectado a Internet. Si prueba estos vínculos
con conexión a Internet, verá que el contenido del sitio visitado, reemplaza el contenido de
nuestra página. Para evitar esto, escriba la siguiente sintaxis:
<a target="_blank" ref="http://www.sitioweb.com">Texto del hipervínculo</a>
En la siguiente gráfica se muestra cómo el hipervínculo visitado muestra el contenido de
Todito.com en una nueva ventana.

Modifica la página anterior de manera que aparezca en el sitio que se indica, la página Web de
la papelería.

,

Un tipo de hipervínculo muy utilizado es a una . Muy a
menudo nos topamos en Internet con expresiones que nos permiten pulsar un hipervínculo y
nos remiten a un programa administrador de correos. Desde aquí podemos escribir un mensaje
al usuario de correo que se especifique. Por ejemplo, observe la siguiente página.
Esta página hace lo siguiente: Cuando el usuario hace clic en la expresión subrayada para
enviar el e-mail, abrirá un programa (en este caso propiamente), Outlook Express.
La siguiente figura muestra las dos ventanas después de haber hecho clic en el hipervínculo.
En esta ventana podrá escribir el comentario que desee escribir al propietario del e-mail.
El código para obtener el resultado mostrado arriba, lo verá a continuación.

Modifica la página anterior de manera que muestre la página con la siguiente vista.

En una página Web puede insertar cualquier imagen. Las imágenes deben ser de tipo JPG, BMP
o GIF. Para insertar una imagen, debe utilizar la siguiente sintaxis:
<img src="imagen.jpg">
En ésta instrucción se da por defecto que la imagen que se inserta tiene la extensión JPG. Para
insertar otro tipo de imagen sólo deberá especificar la extensión correspondiente. Las imágenes
pueden ser adquiridas de la galería de imágenes de Microsoft, o de cualquier otra imagen
digitalizada. Incluso se pueden crear iconos animados desde algún programa de animación, y
usarlos en una página Web.
Observe la página anterior modificada.
La imagen anterior fue insertada en una diapositiva de PowerPoint; posteriormente, se hizo clic
con el botón derecho sobre la misma, se eligió la opción Guardar como imagen, se escribió un
nombre para la imagen y se pulsó guardar.
El código para insertar la imagen se muestra a continuación.

/%

En algún momento será necesario controlar la dimensión de la imagen insertada, sea para
aumentarla o para disminuirla. En el ejemplo anterior se usó la instrucción <align=right>, para
alinear la imagen a la derecha; además de esta instrucción, puede usar las instrucciones
<center> y <align=Left> para ubicar la imagen al centro, o a la izquierda de la pantalla. Para
controlar el tamaño de las imágenes, use las instrucciones <height=valor> o <Width=valor>
para controlar la altura y la anchura de la imagen. También puede usar la instrucción <Border>
con un valor mayor que , para aplicar un marco alrededor de la imagen.
Por ejemplo, la página anterior fue modificada para mostrar dos imágenes, una a la izquierda y
otra a la derecha con tamaños de 1 píxeles cada una.
Para poder escribir alrededor del texto debe utilizar la instrucción <align=left> para la imagen
insertada. No obstante que si no usa dicha instrucción la imagen se alineará a la izquierda, la
instrucción <align=left> permite aplicar el efecto que se muestra en la página.
El código para aplicar obtener el diseño de la página mostrada arriba, se muestra a
continuación.

,

Se dijo anteriormente que a una imagen insertada en una página Web se le puede aplicar un
marco o borde. Además, si utiliza el modificador ALT, podrá especificar un mensaje o pista,
cuando señale con el Mouse a la imagen. Para hacer esto, debe incluir dentro de la instrucción
para insertar una imagen, la siguiente sintaxis:
<img src="imagen.jpg" Border=valor Alt="Estudio=Progreso">
Un valor mayor que , aplicará un contorno a la imagen insertada. Si utiliza valor , será como
si omitiera el modificar Border.
La página anterior fue modifica para aplicar contornos a las dos imágenes insertadas.
Cuando el Mouse se ubica sobre la imagen del estudiante, despliega un mensaje instantáneo
aplicado en la instrucción ALT="cadena de mensaje".
Si se desea aplicar espaciado horizontal o vertical, debe utilizar los modificadores hspace o
vspace, con la instrucción de inserción de imágenes. Cuando se aplica espaciado horizontal, la
siguiente imagen o texto se ajusta a la distancia indicada en hspace (en píxeles). Igual sucede
cuando se aplica el modificar vspace, la siguiente imagen o párrafo insertado debajo de la
imagen, se ajustará a la distancia indicada por hspace. Por ejemplo, observe la página anterior
y se dará cuenta que el texto a la derecha de la imagen, está pegada del lado derecho de la
misma. Ahora si observa la siguiente pantalla, verá que el texto tiene una separación de
píxeles respecto al lado derecho de la imagen. Se debe entender que la separación en orden
horizontal aplicado a una imagen, afecta a ambos lados de la misma, es decir, si aplico
píxeles de separación, se aplicarán a la izquierda, y a la derecha de la imagen.
La siguiente pantalla muestra la página de productos de la papelería. Es un mosaico de

imágenes insertadas controladas mediante los modificadores Height, Width, hspace y vspace.
El código para obtener la página mostrada arriba, se muestra a continuación.
<img Border=1 src="Agenda.gif" Alt="Agenda Escolar $5 . " Height=8 Width=6 >
<img Border=1 src="Agenda.jpg" Alt="Agenda Ejecutiva $1 . " Height=8 Width=6
hspace= >
<img Border=1 src="AgendaElectronica.gif" Alt="Agenda Electrónica $8 . " Height=8
Width=6 >
<img Border=1 src="OrganizaDiscos.jpg" Alt="Organizador de discos $1 . " Height=8
Width=6 hspace= >
<img Border=1 src="OrganizaLapiz.jpg" Alt="Organizador de lápices $5 . " Height=8
Width=6 >

Para utilizar imágenes como hipervínculos, se debe usar la misma instrucción que para los
hipervínculos de texto, a excepción de que a continuación de la instrucción se debe incluir la
instrucción de inserción de imágenes.
La siguiente línea de código muestra el ejemplo de inserción de imágenes como hipervínculos.
<a href="carrera.htm"><img border= src="carrera.jpg" ></A>
La primera instrucción indica el nombre de la página a la que se desee acceder cuando se haga
clic en el hipervínculo. La segunda instrucción inserta la imagen en la página Web.

Con los conocimientos adquiridos hasta este momento, se deberá diseñar la página que se
muestra a continuación.
Los botones pueden ser creados en PowerPoint o Paint, o Corel Draw. Cada botón representa
un hipervínculo, por lo tanto, se deberá crear una página para cada hipervínculo. La última
línea de código es una marquesina que se desplaza a través de toda la pantalla.

De forma parecida a las imágenes, las películas pueden insertarse mediante dos formas, con la
extensión .AVI o con la extensión .DAT. De ambas maneras, HTML interpretará que se trata de
una película y buscará reproducir el archivo en el explorador.
La siguiente instrucción inserta una película de tipo AVI, de las que se encuentran en la galería
de imágenes de Office.
<img border=" " dynsrc="COUNT8.AVI" start="fileopen" >
La primera instrucción indica que se insertará una imagen; la instrucción %, significa
dynamic source (origen dinámico) y prepara al explorador para reproducir un archivo de
película. La instrucción $ indica en qué momento iniciará la película, si no tiene
parámetros, la película se iniciará automáticamente al abrir la página. Puede buscar películas y
guardarlas en una carpeta, posteriormente, inserte una línea de código en el sitio que desee.
Para reproducir una película al mover el Mouse sobre ella, agregue el parámetro mouseover al
modificador start. Si desea que la película se reproduzca de forma infinita, agregue el
parámetro con la expresión ) El ejemplo siguiente muestra la forma como debe
usar el parámetro .
<img border=" " dynsrc="COUNT8.AVI" start="fileopen" loop="infinite">
Además de insertar películas con formato .AVI, HTML le permite insertar películas con extensión
.DAT. Por ejemplo, la siguiente instrucción reproduce una película con extensión .DAT, llamada
MUSIC 1. Este archivo es un vídeo clip de Michael Jackson. Para reproducir correctamente el
archivo de película, la página deberá estar en la misma ruta que el archivo a reproducir o en su
defecto, hacer referencia correctamente al archivo.
<img border=" " dynsrc="MUSIC 1.DAT" start="fileopen">
Para ajustar el tamaño de la película, deberá usar los modificadores y , junto con
la instrucción de inserción de la película. Por ejemplo:
<img border=" " dynsrc="MUSIC 1.DAT" start="fileopen" Width="3 " Height=" ">

" %/

Al igual que en un procesador de textos u otros programas, el lenguaje HTML permite aplicar
viñetas, a excepción de que se cuenta sólo con tres tipos diferentes de viñetas.
·/
Para aplicar viñetas debe hacerse uso de la instrucción <-0. Esta instrucción indica al
explorador que lo que sigue a continuación es una lista con viñetas. Por cada símbolo utilizado
debe usar la instrucción <0, la cual se corresponde con cada línea de dato de la lista.
Finalmente debe cerrar la lista de viñetas con la instrucción <1->.
Las siguientes líneas de código muestran la forma como debe introducirse cada expresión en la
página Web para su correcta ejecución.
<ul>
<li>Viñeta 1</li>
<li>Viñeta </li>
<li>Viñeta 3</li>
<li>Viñeta 4</li>
</ul>
Si copia estas líneas de código a una página Web, guarde los cambios y actualice la página para
ver el resultado, debe mostrarse como la figura siguiente:
Si se desea cambiar el tipo de viñeta predeterminada, se debe incluir el parámetro 2 junto
con la instrucción 3-0. Por ejemplo, la siguiente línea de código, aplica el estilo círculo a la
lista de viñetas.
<ul type="circle">
<li>Viñeta 1</li>
<li>Viñeta </li>
<li>Viñeta 3</li>
<li>Viñeta 4</li>
</ul>
El resultado se muestra a continuación:
Otro tipo de viñetas que puede usarse en una lista es el tipo cuadrado. Para ello, utilice el
parámetro 2 con la expresión + . El siguiente ejemplo aplica viñeta de tipo cuadrado
a la lista.
<ul type="square">
<li>Viñeta 1</li>
<li>Viñeta </li>
<li>Viñeta 3</li>
<li>Viñeta 4</li>
</ul>
El resultado se muestra abajo.
Si se desea cambiar el color de la lista con viñetas, se debe incluir el parámetro $2="Color:
nombrecolor". Por ejemplo, la siguiente línea de código aplica una viñeta de tipo cuadrada, con
color de texto y viñeta azul.
<ul type="square" style="color: blue">
Asimismo puede usar la instrucción <Font Color=Color> para modificar el color del texto.

"

Además de aplicar viñetas a una lista, puede sangrar una lista si usa una instrucción <UL>
dentro de otra. Asimismo, puede usar numeración automática para genera listas de datos
numeradas a partir de un valor. Para usar numeración debe aplicar la instrucción <OL> al
principio de la lista y las instrucciones <li> para cada línea de dato; finalmente, debe cerrar la
numeración con la instrucción </OL>.
El siguiente fragmento de código es un ejemplo de cómo se debe ordenar una lista con
numeración.
<ol>
<li>Primer número</li>
<li>Segundo número</li>
<li>Tercer número</li>
<li>Cuarto número</li>
</ol>
El resultado de este bloque de código se muestra a continuación.
Para cambiar el tipo de numeración por letras o en representación romana, debe incluir el
parámetro type con una expresión siguiente:
! .
I Números romanos con letras mayúsculas.
i Números romanos con letras minúsculas.
A Literales mayúsculas.
a Literales minúsculas
El siguiente bloque de código muestra la forma correcta de utilizar las expresiones con el
parámetro % , de manera que se puedan obtener diferentes tipos de viñetas.
<ol type="A">
<li>Viñeta 1</li>
<li>Viñeta </li>
<li>Viñeta 3</li>
<li>Viñeta 4</li>
</ol>
Resultado:
Si se desea iniciar la numeración desde un número mayor que 1, entonces debe incluir, junto
con la instrucción <OL>, el parámetro , que indica el número donde se desea iniciar la
lista.
El siguiente bloque de código se usa para ilustrar el tema en cuestión.
<ol start="5">
<li>Línea 1</li>
<li>Línea </li>
<li>Línea 3</li>
<li>Línea 4</li>
</ol>
El resultado es el siguiente:
Para iniciar con literales en un valor mayor que 1, se debe establecer el número
correspondiente a la letra en que se desee iniciar.
Por ejemplo, el siguiente bloque de texto, enumera una lista de temas iniciando desde la letra
F.
<ol type="A" start="6">
<li>Computadoras</li>
<li>Impresoras</li>
<li>Monitores</li>
<li>Teclados</li>
<li>Cámaras digitales</li>
</ol>
Ejercicio
Haciendo uso de las instrucciones para inserción de películas, viñetas y numeración, debe
diseñar la siguiente página.
Para que los objetos se realicen correctamente debes ajustar la configuración de la página al
tamaño deseado. Por ejemplo, para el título principal, se usó una diapositiva de tamaño
horizontal de cm y 3 cm. Para el globo se usó una diapositiva de cm. horizontal y 5 cm.
vertical. Después de se hayan ajustado las diapositivas, se debe diseñar el contenido.
El procedimiento para obtener esta página es el siguiente:
1. Se busca una película de tipo GIF la cual se inserta en el lugar donde se encuentra las dos
imágenes de personas.
. El título se diseñó en PowerPoint y se guardó como una imagen JPG. Se inserta en el lugar
indicado. Asimismo, la imagen del globo junto con el texto alrededor suyo se diseñó en
PowerPoint y se guardó como imagen JPG. Posteriormente se insertó en el lugar mostrado.
3. Las viñetas se deben utilizar fuera de cualquier instrucción de manejo de imágenes.

4%

Para facilitar el diseño de índices, vocabularios, diccionarios, enciclopedias y temas afines,
HTML cuenta con instrucciones que permiten utilizar una palabra como término definido y una
sección asociada que es la definición del término. Es ideal para generar vocabularios, tablas de
contenido, diccionarios, etc.
La instrucción para iniciar la lista de expresiones o términos es DL con su respectivo cierre. La
sintaxis es la siguiente:
<DL>
<DT>Termino</DT>
<DD>Definición del término que puede ser tan largo como el usuario desee.</DD>
</DL>
DL significa Language Dictionary (Diccionario de Lenguaje) e indica la lista de términos que se
van a definir. DT significa Terms Dictionary (Diccionario de términos) e indica propiamente el
término que se va definir. La definición del término se realiza con la instrucción DD (Dictionary
Definition), y en esta instrucción se puede colocar cualquier cantidad de texto.
El siguiente ejemplo muestra la forma correcta de utilizar las opciones descritas anteriormente.
Para el ejercicio anterior se utilizó el estilo "negrita" para remarcar el término definido. Sin
embargo, puede utilizar dichos términos sin añadir estilos para realizar un ejercicio natural. El
código para obtener el resultado mostrado en la página anterior, se muestra a continuación.
<html>
<body>
<h1>Diccionario de informática</h1>
<hr>
<dl>
<dt><b>Informática</b></dt>
<dd>Ciencia que estudia el procesamiento, organización, almacenamiento y
transferencia de la información de a través de una computadora.
<dt><b>Computadora</b></dt>
<dd>Máquina electrónica capaz de realizar cualquier actividad con la ayuda
del software.
<dt><b>Hardware</b></dt>
<dd>Son todos los componentes físicos de una computadora, como el CPU,
el Mouse, la impresora, los componentes internos, como la memoria, el
microprocesador, etc.
<dt><b>Software</b></dt>
<dd>Es la parte inteligente de la computadora. Esta capacidad de la

computadora de interpretar, calcular y analizar datos la obtiene mediante
los programas diseñados para este fin. Por ejemplo, para cálculos
financieros se utiliza Microsoft Excel; para películas Studio 3DMax y para animaciones, Flash,
etc.
</body>
</html>
Si omite las cláusulas <b> y </b>, su ejercicio se verá de la siguiente manera.
Esta es la forma predetermina de utilizar las herramientas citadas anteriormente.

Ejercicio Usando los conocimientos adquiridos acerca del uso de términos y definiciones, diseñe
la siguiente página:
El profesor podrá añadir otros elementos como Fondo, color del texto, tamaños de texto y otras
opciones según la creatividad del profesor o del alumno. También podrá presentarse como un
proyecto a manera de tarea para el alumno, de manera que éste mejore la apariencia del
documento actual. Incluso podrá cambiar el contenido de forma que cuando aparezcan
palabras no conocidas, se utilice un hipervínculo que lleve hacia el significado de dicho término.

Una tabla está formada por filas y columnas de celdas en las que se puede insertar texto y
gráficos.
Se pueden utilizar y personalizar las tablas de varias formas diferentes con el fin de hacerlas
más atractivas y fáciles de leer.
Se debe utilizar una tabla para presentar la información en formato de cuadrícula, por ejemplo
horarios, información acerca de productos, tarifas, calificaciones de alumnos, etc.

Para crear una tabla se debe usar la instrucción Table, seguida de parámetros que indican la
anchura, el color o imagen de fondo, etc.
Ejemplo:
<table>
</table>
Estas dos instrucciones indican al explorador de Internet que se en este lugar de la página se
va a crear una tabla.
- 5
Después de que se haya indicado al explorador de Internet que se va a crear una tabla, es
necesario definir cuántas columnas de tabla se desean utilizar. Para ello se deben utilizar las
instrucciones <TH>, las cuales indican los encabezados de tabla.
Ejemplo:
<Table>
<Th>Columna 1</th><TH>Columna ><TH>Columna 3</TH>
</table>
Este segmento de código le indica al explorador que usaremos una tabla de tres columnas.
Cada identificador TH que utilice indica una columna de dato que desee representar en la
tabla. Más adelante se verá cómo no siempre se deben hacer coincidir las columnas con las
filas.

6

Para utilizar filas en una tabla, se debe usar la instrucción TR y TD. TR identifica la fila de
datos, y TD es la fila de los datos propiamente dicho.
El siguiente ejemplo muestra la forma como se debe crear una tabla básica basada en filas y
columnas.
<html>
<head><Title>Mi primera tabla</title></head>
<body>
Este es una ejemplo de tablas.<br><br>
<Table>
<th>Columna 1</th><th>Columna </th><th>Columna 3</th>
<tr>
<td>Dato 1</td><td>Dato </td><td>Dato 3</td>
</tr>
</table>
</body>
</html>
El resultado de este código, se muestra en la siguiente gráfica.
Si se desea mostrar la cuadrícula de la tabla, sólo debe usar el modificar Border, con un valor
mayor que . Por ejemplo, la siguiente línea código, mostrará la cuadrícula de la tabla.
<Table Border=1>

Cuando se crea una tabla sin parámetros, ésta se ajusta al ancho de los campos escritos en los
encabezados. Si se desea crear una tabla más amplia, se debe usar el modificar Width con un
valor de porcentaje. Por ejemplo, para crear una tabla a mitad de pantalla, se debe usar la
siguiente instrucción:
<Table Border=1 Width=5 >
El resultado de esta línea de código se muestra en la siguiente gráfica.
Por lo tanto para crear una tabla que ocupe el ancho de la pantalla, se deberá ajustar el
porcentaje al 1 .
El siguiente ejemplo, muestra la misma tabla anterior a toda la pantalla.
Para aplicar color de fondo a la tabla use el modificar bgcolor seguido de una constante de
color. Por ejemplo, para aplicar color de fondo cyan a la tabla, use la siguiente instrucción:
<table Border=1 Width=1 bgcolor=cyan>
Ejercicio
Con los conocimientos adquiridos hasta este momento, se deberá diseñar la siguiente tabla.
Para aplicar una imagen de fondo a una tabla, deberá usar la instrucción Img Background que
usamos en el fondo de la página. La siguiente línea de código muestra la forma correcta de
aplicar una imagen de fondo a una tabla.
<table border=1 width=1 img background="imagen.jpg">
La siguiente gráfica muestra una imagen de fondo aplicada a la tabla.
El procedimiento para lograr este efecto es insertar una imagen en una diapositiva de
PowerPoint; posteriormente aclararla un poco con la herramienta brillo; después guardarla
como imagen.

Lo más importante de crear tablas es saber manipular las celdas respecto a la información que
se desea mostrar. Esto requiere controlar el ancho, alto color de fondo de forma particular,
combinar celdas, etc.
Digamos que la celda es en sí, una instrucción TD de la tabla. Es decir cada celda es un campo
en particular dentro la tabla. Para ello, si queremos aplicar un color distinto a la celda de los
nombres de los alumnos, el código debe ser el siguiente:
<td bgcolor="yellow">Ana Mariela Dominguez Vázquez </td>
Esta línea de código debe repetirla para cada fila de registro de la tabla.
El siguiente ejemplo muestra la misma tabla anterior con los encabezados en color gris oscuro.
El código completo de la tabla, se lo muestro a continuación.

<html>
<head><Title>Mi primera tabla</title></head>
<body>
<h><center>CAMBRIDGE ENGLISH CENTER</H>
<H3>REPORTE DE CALIFICACIONES</H3></center>
<Table Border=1 width=1 >

<th bgcolor="gray">No.</th><th bgcolor="gray">Nombre del alumno</th>
<th bgcolor="gray">Calificación</th>
<tr>
<td bgcolor="gray">1</td>
<td bgcolor="yellow">Ana Mariela Dominguez Vázquez </td>
<td bgcolor="cyan">1 </td>
</tr>
<tr>
<td bgcolor="gray"></td>
<td bgcolor="yellow">Marisela Cardozo Vega</td>
<td bgcolor="cyan">9</td>
</tr>
<tr>
<td bgcolor="yellow">Emmanuel Rodríguez Velasco</td>
<td bgcolor="cyan">1 </td>
</tr>
<tr>
<td bgcolor="yellow">Jacinto Marin Dominguez</td>
</tr>
<tr>
<td bgcolor="yellow">Silvia Nayeli Amador Hdez.</td>
</tr>
</table>
</body>
</html>

La combinación de celdas permite obtener diseños de tablas más sofisticados que pueden
utilizarse para titulares, marcos de imagen, etc.
Para combinar celdas se usa la instrucción Colspan o Rowspan, ya sea que se deseen combinar
columnas o filas.
Por ejemplo, la siguiente instrucción combina las tres columnas de la primera fila de una tabla.
<td width="1 " colspan="3" height="34">Fila combinada</td>
Para ilustrar mejor el uso de combinación de celdas, a continuación se muestra la siguiente
tabla.
El código para obtener una tabla con este aspecto se muestra a continuación.
<html>
<head><title>Mi tabla combinada</title></head>
<body>
<table Border=1 width=1 >
<tr>
<td width="1 " colspan="4">Primera fila combinada</td>
</tr>
<tr>
<td width="5">Columna 1</td>
<td width="5">Columna </td>
</tr>
</table>
</body>
</html>
La expresión ColSpan indica cuántas columnas se van a combinar, en este indican cuatro
columnas. Si se desean combinar filas se debe utilizar la expresión RowSpan. Por ejemplo
RowSpan="4" indica que se van a combinar 4 filas.
La siguiente tabla muestra un ejemplo de combinación de columnas y filas.
El código para esta tabla es el siguiente:

<html>
<head>
<title>Pagina nueva 1</title>
</head>
<body>
<table border="1" width="1 ">
<tr>
<td width="1 " colspan="4">Fila combinada</td>
</tr>
<tr>
<td width="5" rowspan="4">Área RowSpan</td>
<td width="5">Celda 1</td>
<td width="5">Celda </td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td width="5">Celda 1 </td>
</tr>
</table>
</body>
</html>
Ejercicio
Con los conocimientos adquiridos acerca del uso de tablas, combinación de celdas y temas
anteriores como viñetas, inserción de imágenes y películas, diseña la página que se muestra a
continuación.

c

Una página de marcos es un tipo especial de página HTML que divide la ventana del explorador
en distintas zonas denominadas marcos, cada una de las cuales puede mostrar una página
diferente. Por ejemplo, la siguiente gráfica muestra una página con tres marcos: Titular,
Contenido y Marco principal.
Una página de marcos no incluye contenido visible, es sólo un contenedor que especifica el
resto de las páginas que se van a mostrar y la forma de mostrarlas. Cuando hace clic en un
hipervínculo de una página que aparece en un marco, la página a la que señala dicho
hipervínculo aparece normalmente en otro marco, denominado c ) Por
ejemplo, la página de marcos mostrada anteriormente, muestra realmente cuatro páginas al
mismo tiempo en el explorador: la página de marcos, que es el contenedor y las tres páginas
que aparecen en cada uno de los marcos. Las páginas de marcos normalmente se utilizan para
los catálogos, las listas de artículos o cualquier otro tipo información ordenada en secciones de
pantalla. Los autores utilizan páginas de marcos porque incluyen exploración integrada y
presentan una interfaz de usuario coherente (es decir, la estructura y el diseño de los marcos).
Puede también crear páginas de dos marcos, como muestra la siguiente gráfica.
Para nuestro ejercicio, crearemos una página con dos marcos. El marco izquierdo servirá como
contenido, y el marco derecho como marco de destino. Para ello será necesario crear tres
páginas: la primera será la que dividirá la ventana del explorador en dos secciones (como lo
muestra la gráfica). La segunda será la que se ubique en la sección de contenido, y la tercera,
será la que se muestre inicialmente en el marco de destino.

c

Para generar marcos en una página Web se debe utilizar la instrucción FRAMESET. El código de
la primera página se muestra a continuación.
La instrucción 7 indica al explorador que se van a utilizar marcos. , identifica el
número de columnas que se van a usar, la primera de píxeles y la segunda con la parte
restante de la pantalla. " es una instrucción que se utilizan en este caso para nombrar las
secciones del explorador, para poder hacer referencia posteriormente al manejar hipervínculos.
# significa destino, y especifica el nombre del marco de destino donde se dirigirá el
contenido del hipervínculo. $ significa Source (origen), e identifica la página origen mostrada
inicialmente en cada sección. " es una instrucción que se utiliza en caso de que el
explorador de Internet no pudiese mostrar una página con marcos. En este caso, el Explorador
enviará el mensaje que queda entre las líneas de <Body> y </Body>.
Cuando se haya capturado el código, debe guardar el archivo con un nombre que se relacione
con la función del código (por ejemplo, marco.htm)
Si abre la página, observará algo como esto:
Izquierda: Contenido. Derecha: Marco de destino.

A continuación, se debe crear la página de contenido. Puede ingresar nuevamente al bloc de
notas o al programa donde se edita el código y capturar el código que muestra a continuación.
Cuando termine de capturar este código, guarde el archivo como Contenido.htm, ya que con
este nombre, se hizo referencia en la página anterior, en la instrucción $..
Cuando haya capturado el código y guardado el archivo, abra la página c # y observará lo
siguiente:

c

La página tres, es en realidad una página de relleno, es decir esta página se mostrará
inicialmente, aunque será remplazada por la página correspondiente a cada hipervínculo del
marco de contenido. Para cada hipervínculo se debe crear una página diferente, con la
estructura que tiene la página inicial. El código de esta página se muestra a continuación.
Cuando haya capturado el código, guarde el archivo como )# que es el nombre con
el que se hizo referencia a la página en el primer código. Posteriormente, abra el archivo
marco, y observará lo siguiente:
Cuando haya hecho esto, habrá comprendido cómo funcionan las páginas Web que manejan
marcos.

La página anterior contiene cuatro viñetas. Usando las opciones de Hipervínculos deberás
convertir a las cuatro viñetas en hipervínculos que permitan, al hacer clic en cada uno,
desplazarse a una página correspondiente a la información de la viñeta.
" . Las páginas a las que se hará referencia deberán ser diseñadas con la
misma estructura de las cinco primeras líneas de código de la página )# para que
puedan aparecer en el marco derecho cada vez que se haga clic en un vínculo de la izquierda.

7

La manera general para que los lectores de nuestra página se puedan comunicar con nosotros
es por medio de un enlace a nuestra dirección de e-mail, con lo que recibiríamos un e-mail
convencional. Pero puede ser que lo que necesitemos sea solamente una respuesta concreta a
unas opciones que presentaremos nosotros mismos, o un comentario del usuario, para lo que le
suministraremos un espacio en donde introducirlo.
Se puede hacer todo esto, además de otras cosas, utilizando los formularios, con los que se
pueden confeccionar páginas que contengan los elementos necesarios para ello, tal como
botones de radio, listas de selección, cajas de introducción de texto y de control, etc.
Los formularios permiten que los demás nos envíen la información directamente a nosotros o
bien a nuestro servidor, en donde hemos instalado un programa que procese esta información.
Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los usuarios pueden
introducir sus nombres y direcciones de e-mail y pulsar un botón de envío. Esos datos los
podemos recibir "en bruto" en nuestro correo, con los que haríamos manualmente dicha lista de
correo, sin necesitar ningún programa para ello. Este proceso es el que vamos a comentar en
este capítulo.
La otra posibilidad, de la que únicamente se va a hacer esta mención, es que hubiéramos
instalado en nuestro servidor un programa especial para procesar esos datos y añadirlos a la
lista de correo, y que incluso pudiera devolver automáticamente al usuario algún tipo de
información. Para conseguir esto, los formularios necesitan ejecutar programas o scripts por
medio del CGI (Common Gateway Interface). El CGI permite a los formularios ser procesados
por programas escritos en cualquier lenguaje, aunque los más usados en Internet son el Perl y
el C.

La estructura general de un formulario es:
1. Etiqueta de inicio:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST"
ENCTYPE="TEXT/PLAIN">
. Cuerpo del formulario, con los distintos elementos para poder introducir los datos.
3. Botones de envío y de borrado.
4. Etiqueta de cierre </FORM>
+
El atributo ACTION indica la acción que se debe efectuar y que es que los datos sean enviados
por e-mail a la dirección indicada. (Si hiciéramos uso del CGI, sería precisamente aquí donde
indicaríamos su localización en el servidor, que habitualmente es el directorio cgi-bin, para que
procese los datos).
El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correo a la
dirección de e-mail, cuando el usuario pulse el botón de envío.
Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un
fichero de texto, perfectamente legible y sin codificar.

Los vamos a dividir en tres clases:
1. Introducción por medio de texto.
. Introducción por medio de menús.
3. Introducción por medio de botones.
La introducción de los datos se consigue por medio de la etiqueta:
<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">
En donde:
!!! es la palabra que indica el tipo de introducción.
%%% es el nombre que le asignamos nosotros a la variable de introducción del dato.
555 es la palabra asociada a un elemento.
Ejemplo:
<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
</FORM>
Este segmento de código permite al usuario escribir su apellido mediante un cuadro de texto.
Si el usuario introduce su apellido, recibiremos en nuestro e-mail, algo como esto:
Apellido=González
La longitud de este campo es por defecto de caracteres. Se puede modificar dicha longitud
incluyendo en la etiqueta el atributo SIZE="número". Por otra parte, cualquiera que sea la
longitud del formulario, si no se indica nada, el usuario puede introducir el número de
caracteres que desee. Se puede limitar la longitud máxima, incluyendo en la etiqueta el atributo
MAXLENGTH="número".
Ejemplo:
<INPUT TYPE="text" NAME="Apellido" SIZE="1 " MAXLENGTH="1">
Esta instrucción limita el campo a 1 caracteres visibles y 1 caracteres de entrada máxima.
Puede también convertir el texto introducido a caracteres comodines para simular una
contraseña, ello convierte la expresión del cuadro de texto en una serie de asteriscos.
Ejemplo:
<INPUT TYPE="password" NAME="Apellido" SIZE="1 " MAXLENGTH="1">

8 !

Cuando se necesite utilizar grandes áreas de texto como comentarios, explicaciones de registro,
contratos, licencias, etc., se debe utilizar un control de área de texto.
Esto se consigue con la etiqueta de inicio:
<TEXTAREA NAME="yyy" ROWS="número" COLS="número">
ROWS representa el número de filas, y COLS el número de columnas. Se debe finalizar con la
etiqueta de cierre </TEXTAREA>
Ñ
%
Un elemento muy importante que permiten manipular la información de los formularios son los
botones de Envío y Borrado. Para aplica a un formulario un botón de envío, se deberá introducir
la siguiente instrucción.
<INPUT TYPE="submit" VALUE="Texto del botón">
En donde ! es el texto que queremos que aparezca en el botón.
Sin embargo, además de colocar en nuestro formulario un botón de envío, deberá aplicarse un
botón que permita restablecer los cuadros de texto así como las opciones predeterminadas del
formulario. Generalmente esto se consigue con la siguiente instrucción:
<INPUT TYPE="reset" VALUE="Texto del botón">

Para ilustrar lo dicho hasta ahora, haremos un formulario que permita al usuario introducir
alguna información mediante cajas de texto, áreas de texto y botones.
El código para obtener el aspecto mostrado del formulario, es el siguiente:

<html>
<head><title>Formulario de registro</title></head>
<body>
<center>
<h3>Cambridge English Center</h3>
<h4>Formulario de Registro</h4>
</center>
<hr>
Sea tan amable de rellenar el siguiente formulario.
<br>
<FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Nombre: <BR>
<INPUT TYPE="text" NAME="Apellido">
<br>
Dirección: <BR>
<INPUT TYPE="text" NAME="Dirección">
<br>
Teléfono: <BR>
<INPUT TYPE="text" NAME="Telefono">
<br>
Comentarios:<br>
<TEXTAREA NAME="comentario" ROWS="7" COLS="4 ">
</TEXTAREA>
<INPUT TYPE="submit" VALUE="Enviar datos">
<INPUT TYPE="reset" VALUE="Borrar datos">
</FORM>
</body>
</html>

9 :

Una forma muy común de seleccionar opciones en un formulario es mediante las opciones de
menú (listas desplegables). Para incluir un menú de opciones en un formulario, debemos hacer
lo siguiente:
<Select Name="Nombre">
<Option>Opción 1
<Option>Opción
<Option>Opción 3
</Select>
Donde Option indica cada una de las opciones del menú. La siguiente figura muestra una
forma real de la utilización de menús.
El código para obtener un menú como el anterior, se muestra a continuación.

Estado civil:<br>
<Select Name="EdoCivil">
<option>Casado (a)
<option>Soltero (a)
</select>
<br>
Si se desea crear una lista de selección con barras de desplazamiento, se debe introducir una
instrucción como la siguiente:
<SELECT NAME="Nombre" Multiple Size="nFilas">
Donde nFilas es el número de filas que se muestran en el control y que se podrán seleccionar
arrastrando el control sobre ellas.
La siguiente figura muestra un ejemplo de ello.
El código que permite obtener este método es el siguiente:
Materias de interés:<br>
<Select Name="Materias" Multiple Size=4>
<option>Office XP
<option>Diseño gráfico
<option>Bases de datos
<option>Redes Lan
</select>
Cuando la lista de opciones es más larga que la altura predeterminada del control, se muestra
automáticamente la barra de desplazamiento.
Ejemplo:

Ñ

Los botones de radio permiten seleccionar una de varias opciones dentro de un formulario. Por
ejemplo, en nuestro ejercicio, hemos incluido una expresión que solicita al usuario indicar su
sexo, y muestra dos opciones de las cuales sólo se podrá elegir una.
El usuario podrá seleccionar cualquiera de las dos opciones mostradas.

El código para obtener estas opciones, se muestra a continuación.
Sexo:<br>
<input type="radio" Name="M" Value="Hombre">Hombre
<input type="radio" Name="F" Value="Mujer">Mujer
<br>
Según el número de opciones que se desee aplicar, será el número de veces que debe aparecer
la instrucción en el código.

Permiten al usuario seleccionar varias opciones dentro de un formulario. Por ejemplo, existen
páginas en Internet que permiten suscribirse a algún boletín y nos dan la opción de "marcar"
qué tipo de información queremos recibir en nuestro correo.
La instrucción para aplicar una casilla de verificación es la siguiente:
<input type="checkbox" name="Nombre">Texto de la opción
La siguiente figura muestra un ejemplo de una situación real donde permitimos al usuario
seleccionar las opciones que quiera.
El código se muestra a continuación.
Deseo información sobre:<br>
<input type="checkbox" name="IniciosCursos">Inicios de cursos
<input type="checkbox" name="Autocad">Diplomado de AutoCad
<input type="checkbox" name="Ingles">Cursos de inglés
<br>
Si se desea que una casilla aparezca seleccionada de forma predeterminada, debemos usar la
instrucción CHECKED en la línea donde queramos seleccionar dicha opción.
Por ejemplo:
<input type="checkbox" name="IniciosCursos">Inicios de cursos
Dará un resultado como el que se muestra en la siguiente figura:

Haciendo uso de las herramientas estudiadas hasta este momento, debe diseñar la siguiente
página, utilizando campos de texto, listas de menús, botones de opciones, casillas de
verificación, etc. Asimismo debe utilizar una tabla para organizar los campos como los que se
muestran en la página. El tipo de fuente utilizado es Arial.

Manual HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual HTML

Uploaded by

Copyright:

Available Formats

c c|

El resultado se muestra a continuación.

El resultado de este código se muestra a continuación.

De aquí en adelante, sólo se mostrará la ventana de resultados en los ejercicios. El alumno

Produjo el resultado que se muestra a continuación.

Si se desea cambiar el color, es necesario incluir el modificador Color=m . Ejemplo:

Cada vez que desees aumentar el interlineado, deberás aumentar el porcentaje.

El código para obtener la página mostrada, es el siguiente:

La siguiente pantalla muestra la página de productos de la papelería. Es un mosaico de

<dd>Es la parte inteligente de la computadora. Esta capacidad de la

Si omite las cláusulas <b> y </b>, su ejercicio se verá de la siguiente manera.

Esta es la forma predetermina de utilizar las herramientas citadas anteriormente.

El código completo de la tabla, se lo muestro a continuación.

<Table Border=1 width=1 >

<table Border=1 width=1 >

El código para esta tabla es el siguiente:

Izquierda: Contenido. Derecha: Marco de destino.

El código para obtener el aspecto mostrado del formulario, es el siguiente:

El código para obtener un menú como el anterior, se muestra a continuación.

El usuario podrá seleccionar cualquiera de las dos opciones mostradas.

You might also like

Manual HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual HTML

Uploaded by

Copyright:

Available Formats

c c|

El resultado se muestra a continuación.

El resultado de este código se muestra a continuación.

De aquí en adelante, sólo se mostrará la ventana de resultados en los ejercicios. El alumno

Produjo el resultado que se muestra a continuación.

Si se desea cambiar el color, es necesario incluir el modificador Color=m . Ejemplo:

Cada vez que desees aumentar el interlineado, deberás aumentar el porcentaje.

El código para obtener la página mostrada, es el siguiente:

La siguiente pantalla muestra la página de productos de la papelería. Es un mosaico de

<dd>Es la parte inteligente de la computadora. Esta capacidad de la

Si omite las cláusulas <b> y </b>, su ejercicio se verá de la siguiente manera.

Esta es la forma predetermina de utilizar las herramientas citadas anteriormente.

El código completo de la tabla, se lo muestro a continuación.

<Table Border=1 width=1 >

<table Border=1 width=1 >

El código para esta tabla es el siguiente:

Izquierda: Contenido. Derecha: Marco de destino.

El código para obtener el aspecto mostrado del formulario, es el siguiente:

El código para obtener un menú como el anterior, se muestra a continuación.

El usuario podrá seleccionar cualquiera de las dos opciones mostradas.

You might also like

c c|