Guia HTML Basico

1 de 43 http//:www.masterlinux.
org EFGM 2000-2007

INTRODUCCIN

El lenguaje HTML (HyperText Markup Language), es el formato estndar
que se utiliza para crear e interpretar documentos de texto e imgenes, conocidos
popularmente como pginas web. Estos documentos, que en realidad son archivos
de texto plano, estn compuestos bsicamente por:

- la informacin que el usuario ve en la pantalla cuando accede a una pgina, y
- cdigos (tags o etiquetas), transparentes para el usuario, que son interpretados
por el programa del navegador y que controlan la manera como la informacin es
mostrada en la pantalla.

El objeto del presente mdulo es aprender a utilizar de manera correcta,
algunas de esas etiquetas, con el fin de crear y modificar pginas mediante el uso
de cualquier editor de texto.

El siguiente ejemplo sencillo, contiene lo necesario para crear una pgina que
desplegar en el explorador (browser o navegador), la frase Bienvenido al curso
de HTML:

<HTML>
<HEAD>
<TITLE>Primer Pgina</TITLE>
</HEAD>
<BODY>
Bienvenido al curso de HTML
</BODY>
</HTML>

Las palabras encerradas entre los smbolos menor y mayor que (< >), son
las etiquetas de HTML y las frases dentro de stas, constituyen la informacin que
realmente ver el usuario.

Todo archivo HTML comienza siempre con la etiqueta <HTML> y finaliza con
la etiqueta </HTML>. La estructura de una pgina est compuesta bsicamente
por dos secciones: el encabezado (HEAD), y el cuerpo (BODY), delimitados por las
etiquetas <HEAD>, </HEAD>, <BODY> y </BODY> respectivamente.

2 de 43 http//:www.masterlinux.org EFGM 2000-2007

El cuerpo contiene toda la informacin de la pgina que ser desplegada por
el browser al accederla, mientras que el encabezado cuyo contenido generalmente
no es visible, se utiliza principalmente para colocar en l, adems del ttulo de la
pgina, scripts y otras etiquetas especiales en las que se consignan datos
relacionados con el autor, palabras claves sobre el contenido, descripcin, etc.

En un documento HTML se pueden incluir un sinnmero de etiquetas, que
controlan la manera como la informacin ser presentada por el explorador. Existen
etiquetas para formatear la presentacin del texto y las imgenes, otras indican al
sistema cmo responder a eventos generados por el usuario, tales como, hacer clic
con el ratn o desplazarlo sobre una imagen, texto o ciertas reas sensibles.
Tambin hay etiquetas para organizar la informacin dentro tablas, dividir la
pantalla en secciones o ventanas independientes, etc. Una de las ms importantes
es la etiqueta que le permite al usuario navegar entre documentos, simplemente
dando clic sobre los denominados vnculos (links), sin importar dnde residen las
pginas a las cuales apuntan.

El explorador, tambin conocido como navegador o browser, es el software
que permite acceder, interpretar y visualizar documentos HTML ubicados en
cualquier sitio cuya direccin es conocida. El navegador interpreta las etiquetas y
muestra el documento en pantalla. La principal ventaja del formato HTML es su
portabilidad. Es decir, los exploradores son capaces de interpretar y mostrar la
informacin contenida en una pgina web, independientemente de la plataforma en
que se usen (IBM, MAC, UNIX, LINUX, etc.).

El presente mdulo no pretende hacer una explicacin exhaustiva del
lenguaje HTML ni de ninguna herramienta de edicin grfica. Aqu se tratarn
nicamente, aquellos aspectos bsicos que le permitan al lector desarrollar pginas
sencillas que funcionen de acuerdo a lo esperado, sin importar la versin y la casa
productora del software del navegador ni la plataforma de trabajo.


QU SE NECESITA PARA CREAR PGINAS WEB?

Dado que las pginas Web son simples documentos de texto plano, lo nico
que se requiere para su creacin es un editor de texto. Aunque existen muchas y
potentes herramientas para la creacin y edicin grfica de documentos HTML, el
Block de Notas (NotePad), el editor (EDIT) de DOS, o cualquier otro editor de
texto sirven bien para estos propsitos. Mientras que para visualizar documentos
HTML, debemos disponer de un explorador como Netscape Navigator , Mozilla
Firefox o Microsoft Internet Explorer , que son los ms populares en el
mercado.

LA PRIMER PGINA

Para crear sta y todas las pginas propuestas, se utilizar el Block de Notas
de Microsoft (notepad). bralo y escriba en l el siguiente texto:

<HTML>
<HEAD>
<TITLE>Mi primera pgina</TITLE>
</HEAD>
<BODY>
HOLA A TODOS! STA ES MI PRIMERA PGINA WEB
</BODY>
</HTML>

HTML no es un lenguaje sensible a las maysculas, lo que significa que
cualquier etiqueta puede ser escrita en maysculas, minsculas o una combinacin
de ellas. Por ejemplo, escribir <HTML> tendr el mismo efecto que escribir
<html> o <Html>. De igual forma, no es necesario utilizar una lnea para cada
etiqueta, ni conservar la sangra y formato propuestos en los ejemplos de ste
mdulo. Lo anterior se hace para facilitar la lectura, comprensin y edicin de los
archivos, adems de ser una prctica casi obligada entre los buenos
desarrolladores. El cdigo anterior pudo haberse escrito de la siguiente manera, y
el resultado obtenido seguir siendo el mismo:

<html><HEAD><TITLE>Mi primera pgina</title></HEAD><BODY>
HOLA A TODOS! STA ES MI PRIMERA PGINA WEB</BODY>
</HTML>

Guarde el archivo con el nombre PrimeraPagina.html en un directorio
cualquiera, por ejemplo, C:/CursoHTML/, asegurndose de colocarle la extensin
.html.

Abra en el explorador el archivo que acaba de crear y si todo va bien,
obtendr una pgina similar a la siguiente:


ETIQUETAS PARA TEXTO

Las etiquetas de texto como su nombre lo indica, permiten cambiar los
atributos y la manera como el texto se ver dentro de la pgina. Se puede afectar
todo un prrafo, una lnea, una palabra o caracteres individuales simplemente
encerrndolos dentro de las etiquetas apropiadas. Algunos atributos del texto
pueden ser controlados por diferentes etiquetas, obteniendo resultados similares.

ETIQUETA <HX> </HX>

Esta etiqueta, conocida como etiqueta de encabezado (heading), es utilizada
con frecuencia para escribir ttulos y subttulos, dado que permite mostrar texto en
negrillas con seis tamaos diferentes, dependiendo del valor asignado al atributo X.
Para ver su funcionalidad, escriba las siguientes lneas en un nuevo archivo:

<HTML>
<HEAD>
<TITLE> Encabezados</TITLE>
</HEAD>
<BODY>
<H1>Este texto tiene el tamao que le da la etiqueta H1</H1>
</BODY>
</HTML>

Una vez guardado el archivo, bralo en el explorador y observe los resultados.

La etiqueta <HX> tiene otro atributo que permite controlar la alineacin del texto.
ste se puede alinear al centro (align="center"), a la derecha (align="right"), a la
izquierda, que es la alineacin que toma por defecto cuando el atributo align es
omitido, o justificado (align="justify").

Por ejemplo,

<H1 align=center>Texto </H1>

mostrar la palabra Texto alineada al centro de la pgina, mientras que

<H1 align=right>Texto </H1>

alinear Texto a la derecha y

<H1>Texto </H1>

presentar Texto alineada a la izquierda. Lo mismo ocurrir si se comete un error al
escribir el valor del atributo align. Veamos un par de ejemplos:

<H1 align=centre>Este texto no se alinear al centro </H1>
<H1 aling=right>Este tampoco se alinear a la derecha</H1>

En general, se puede afirmar que cuando la sintaxis de una etiqueta no es la
correcta, el navegador no generar error o advertencia alguna al respecto, ni dejar
de mostrar la pgina, simplemente los resultados no sern los esperados.

ETIQUETA <FONT> </FONT>

Esta etiqueta permite controlar tres atributos del texto que se encuentra
encerrado entre ellas: su tamao (SIZE), su color (COLOR) y el tipo de fuente
(FACE). Por ejemplo, las siguientes lneas escritas dentro del cuerpo de un nuevo
archivo, mostrarn texto con cuatro tamaos de fuente diferentes:

Texto con fuente tamao normal
<FONT SIZE="+1">Texto con fuente tamao + 1</FONT>
<FONT SIZE="+2">Texto con fuente tamao + 2</FONT>
<FONT SIZE="-1">Texto con fuente tamao - 1</FONT>
<FONT SIZE="-2">Texto con fuente tamao - 2</FONT>


La sintaxis completa de la etiqueta <FONT> es la siguiente:

<FONT SIZE="X" COLOR="color" FACE="Nombre de la fuente">Texto</FONT>

Donde X corresponde como ya se vi, al tamao de la fuente que admite
valores positivos y negativos.

El atributo color puede ser un valor hexadecimal o el nombre en ingls de
un color especfico. Aunque en teora se pueden mostrar millones de colores, existen
16 de ellos que componen la denominada Paleta Segura. El uso de cualquiera de
esos colores, garantiza que las pginas podrn ser vistas tal como fueron
diseadas, aun cuando se utilice para su visualizacin un monitor con la
configuracin ms pobre. La tabla siguiente muestra los valores hexadecimales
(cdigos) y nombres de los 16 colores mencionados.

PALETA SEGURA
Cdigo Nombre Color
#ffffff White
#000000 Black
#ff0000 Red
#00ff00 Lime
#0000ff Blue
#ffff80 Yellow
#c0c0c0 Silver
#808080 Gray
#800000 Maroon
#800080 Purple
#ff00ff Fuchsia
#008000 Green
#808000 Olive
#000080 Navy
#008080 Teal
#00ffff Aqua

Finalmente, Nombre de la fuente es el atributo correspondiente a los
nombres de las fuentes disponibles en el sistema, tales como: Arial, Helvetica,
Times New Roman, Arial Black, Chalesworth, etc.

Como ejemplo, se propone escribir las siguientes lneas dentro del cuerpo de
una nueva pgina:


<FONT SIZE="+1" COLOR="maroon" FACE="Comic Sans MS">TEXTO</FONT>
<FONT SIZE="+2" COLOR="#0000ff" FACE="Tahoma">TEXTO</FONT>
<FONT SIZE="+2" COLOR="Purple" FACE="Stencil">TEXTO</FONT>
<FONT SIZE="+2" COLOR="#ff00ff" FACE="Arial">TEXTO</FONT>

cuyo resultado ser similar al de la siguiente grfica:

ETIQUETA <PRE> </PRE>

HTML slo reconoce y muestra un espacio en blanco entre palabras, aunque
se hayan escrito dos o ms. Tampoco reconocer tabuladores o retornos de carro.
Es decir, s dentro del cuerpo de un archivo HTML se escribe el siguiente texto:

<BODY>
Este texto tiene
varios espacios y retornos de carro
</BODY>

al abrir la pgina en el explorador se obtendr:


S se quiere que el texto se vea en la pgina tal como fue escrito, ste debe
encerrarse dentro de las etiquetas <PRE> y </PRE> (preformated), que forzarn
al explorador a mostrar todos los espacios, tabuladores y retornos de carro que
encuentre.

ETIQUETA <BR> y <P>

La etiqueta <BR> permite forzar un salto de lnea dentro de un texto.
Observe que esta etiqueta no se cierra con </BR>, razn por la que se le conoce
como etiqueta abierta. <P> es otra etiqueta que puede utilizarse abierta o
cerrada. Si se usa de la primera forma, iniciar un nuevo prrafo dejando una lnea
en blanco, si por el contrario se cierra con </P> permite alinear el nuevo prrafo a
la derecha, en el centro, a la izquierda o justificado, dependiendo del valor
asignado al parmetro ALIGN. A continuacin se muestran algunos ejemplos:

Ejemplo Resultado
Texto con<BR> salto de lnea Texto con
salto de lnea
En este ejemplo iniciaremos aqu <P> un
nuevo prrafo
En este ejemplo iniciaremos aqu

un nuevo prrafo
<P ALIGN=right> alineado a la derecha</P> alineado a la derecha
<P ALIGN=left>alineado a la izquierda</P> alineado a la izquierda
<P ALIGN=center>alineado al centro</P> Alineado al centro

ETIQUETA <HR >

Esta etiqueta abierta, dibuja una lnea horizontal (Horizontal Rule), con
alineacin, tamao y ancho variables. Se utiliza con frecuencia para separar
secciones de contenido. Su sintaxis se ilustra en las siguientes lneas:

Lnea centrada, de tamao 10 puntos y ocupando el 30% de la pgina
<HR ALIGN=center SIZE= 10 WIDTH= 30%>

Lnea alineada a la izquierda, de tamao 5 puntos y ocupando la mitad de la pgina
<HR ALIGN=left SIZE= 5 WIDTH= 50%>

Lnea alineada a la derecha, de tamao 20 puntos y ocupando la mitad de la pgina
<HR ALIGN=right SIZE= 20 WIDTH= 50%>

Lnea sencilla que ocupar el 90% de la pgina
<HR>


OTRAS ETIQUETAS PARA TEXTO

La siguiente tabla muestra otras etiquetas muy tiles a la hora de trabajar
con texto y los efectos que se conseguirn:

Ejemplo Efecto Resultado
<CENTER>Texto</CENTER> Texto centrado Texto
<B>Texto</B> Texto en negrilla Texto
<I> Texto </I> Texto en itlica Texto
<U> Texto </U> Texto subrayado Texto
Texto <SUP>Texto</SUP> Texto en superndices Texto
Texto

Texto <SUB>Texto</SUB> Texto en subndices Texto
Texto

<S> Texto </S> Texto tachado Texto

COMENTARIOS

En HTML, como en cualquier otro lenguaje existe una forma de escribir
comentarios dentro del cdigo. Todo lo escrito dentro de los signos  ser
ignorado por el navegador sin que se muestre cuando la pgina sea visualizada.

CARACTERES ESPECIALES

Existen una serie de signos que aunque estn disponibles en el teclado,
pertenecen a un conjunto especfico de caracteres propios del idioma para el cual
fue configurado el computador. Es as como, una pgina escrita por un hispano
parlante, que probablemente utiliza el conjunto de caracteres de Europa Occidental,
denominado Latin-1 (ISO 8859-1), sea visualizada de manera diferente por un
usuario ubicado en un pas de Asia o Europa Oriental. Las vocales acentuadas, la
letra ee, el signo del Euro y otros caracteres especiales deben sustituirse por
ciertos cdigos, para que su visualizacin sea la correcta, sin importar el conjunto
de caracteres predefinido en el navegador. Por ejemplo, la letra ee debe ser
reemplazada por ñ, de tal forma que la palabra ao se escribe dentro de
una pgina Web de la siguiente manera:

año

La tabla siguiente muestra algunos de los caracteres especiales ms
utilizados, y su correspondiente cdigo:


CARACTERES ESPECIALES
Carcter Cdigo Carcter Codigo
< < > >
& & "
©
€ ¥
| ¦ Ø
ø ÷
±

°
½ ¼
¾ ¢
á é
í ó
ú Á
É Í
Ó Ú
ñ Ñ

Antes de realizar el primer ejercicio, es importante anotar que el lenguaje
HTML soporta el anidamiento de etiquetas. Si fuera necesario por ejemplo, exhibir
en una pgina la frase "MDULO DE HTML" subrayada, en negrilla, con fuente
"VERDANA" y de color azul, bastar con escribir la siguiente lnea dentro del cuerpo
del archivo:

<FONT SIZE="6" COLOR="#0000ff" FACE="Verdana"> <U><B>MDULO DE HTML</B></U></FONT>

Lo anterior significa que un trozo de texto puede estar afectado
simultneamente por varias etiquetas. Lo nico que se debe tener en cuenta a la
hora de anidarlas es que la primera etiqueta en ser abierta debe ser la ltima en
cerrarse.

LA ETIQUETA <BODY>

Hasta ahora se ha trabajado con pginas cuyos colores son: blanco para el
fondo y negro para el texto escrito en ellas. Estos son los colores que HTML toma
por defecto. El uso adecuado de la etiqueta <BODY>, que por supuesto tiene
atributos, permite entre otras cosas cambiar o establecer: el color del texto, un
color o una imagen de fondo y los colores de los enlaces que tendr la pgina. La
siguiente es la sintaxis completa de esta etiqueta:

<BODY BACKGROUND = "nombre_imagen" BGCOLOR = "color_fondo" TEXT = "color_texto"
LINK = "color_enlace" VLINK = "color_enlace_V" ALINK = " color_enlace_A"> </BODY>

nombre_imagen se refiere al nombre, o mejor la ubicacin del archivo de
una imagen que se quiere aparezca como fondo de la pgina, color_fondo,
color_texto, color_enlace, color_enlace_V y color_enlace_A corresponden a
los cdigos o los nombres de los colores para el fondo de la pgina, el texto de la
informacin, el texto de los enlaces no visitados, el texto de los enlaces visitados y
el texto de los enlaces activos respectivamente. El manejo de estos tres ltimos se
ver ms adelante en el captulo correspondiente a enlaces.

El siguiente ejemplo desplegar una pgina con fondo negro (black) y texto
de color lima (#00ff00):

<HTML>
<HEAD>
<TITLE>Cuerpo</TITLE>
</HEAD>
<BODY BGCOLOR=black TEXT=#00ff00>
<H3>ESTA PGINA TENDR FONDO NEGRO Y TEXTO LIMA</H3>
</BODY>
</HTML>


UBICACIN DE ARCHIVOS

Antes de comenzar a trabajar con imgenes, es indispensable entender el
concepto de la ubicacin relativa de archivos. Existen en HTML algunos atributos
que indican la ruta o el camino donde se encuentran ubicados ciertos elementos y
no un valor simple como un nmero o el cdigo de un color. Tal es el caso del
atributo background cuyo valor hace referencia a la ubicacin y el nombre de una
imagen que se quiere aparezca como fondo en la pgina (BACKGROUND=ruta).

Cualquiera que sea el sistema operativo que se utilice, los programas,
aplicaciones, archivos y documentos se guardan fsicamente en una unidad de
almacenamiento, dentro de una jerarqua de directorios y subdirectorios conocida
como Sistema de Archivos.

Un directorio puede contener archivos y otros directorios denominados
subdirectorios. Dependiendo de la ubicacin de las pginas y las imgenes u otros
objetos dentro del sistema de archivos, el valor o ruta de los atributos, cambia.
Existen tres posibilidades (ver grfica de Ejemplo de sistema de Archivos):

1. la pgina y la imagen se encuentra dentro del mismo subdirectorio
(ejemplos: Pgina1 e Imagen1, Pgina 2 e Imagen 2 y Pgina 3 e
Imagen 3).

2. la imagen se encuentra en un subdirectorio ubicado en el mismo nivel o
por debajo del subdirectorio que contiene la pgina (ejemplos: Pgina 3
e Imagen 1, Pgina 3 e Imagen 2 y Pgina 1 e Imagen 2).

3. la imagen se encuentra en un subdirectorio arriba del que contiene la
pgina (ejemplos: Pgina 2 e Imagen 1, Pgina 2 e Imagen3 y Pgina 1
e Imagen 3).


El ejemplo ms sencillo se tiene cuando, tanto la imagen de fondo como la
pgina residen en el mismo directorio o subdirectorio. En este caso la ruta se reduce
al nombre de la imagen:

<BODY BACKGROUND=nombre_imagen>

Si la imagen de fondo reside en un subdirectorio al mismo nivel o por debajo
del directorio que contiene la pgina, la ruta adems del nombre de la imagen debe
estar compuesta por el o los nombres de los subdirectorios que la contienen,
separados por un slash (/). Si por ejemplo, se desea que Imagen 2 aparezca como
fondo de la Pgina 3, la ruta ser: D2/D3/Imagen 2, con lo que la etiqueta
BODY ser similar a:

<BODY BACKGROUND=D2/D3/Imagen 2>

La ltima posibilidad que existe es que la imagen se encuentre ubicada uno o
mas niveles por encima del directorio que contiene la pgina. En este caso la ruta
estar compuesta por el nombre de la imagen, precedida por un conjunto de dos
puntos y un slash (../) por cada nivel que sea necesario subir para alcanzar el
directorio donde est ubicada la imagen. Con los siguientes ejemplos se ilustra esta
situacin:

La Imagen 1, ubicada un nivel por encima debe aparecer como fondo de la
Pagina 2 . La ruta ser: ../Imagen 1 y la etiqueta BODY debe ser:

<BODY BACKGROUND=../Imagen 1>


Ahora se quiere que Imagen 3 sea el fondo de la Pagina 2:

<BODY BACKGROUND=../../Imagen 3>

Una prctica comn y muy til, consiste en crear un subdirectorio ubicado al
mismo nivel de las pginas, que contendr todas las imgenes. De esta manera, la
siguiente pgina tendr como fondo una imagen llamada logoPostgres.gif, que se
encuentra ubicada en el subdirectorio Imagenes:

<HTML>
<HEAD>
<TITLE>Cuerpo1</TITLE>
</HEAD>
<BODY BACKGROUND=Imagenes/logoPostgres.gif>

</BODY>
</HTML>


Es importante mencionar que HTML soporta slo ciertos formatos de imagen.
Bsicamente se pueden mostrar imgenes creadas en formato GIF y JPG. Las
ltimas versiones de navegadores soportan el formato PNG de MACROMEDIA .

LISTAS

En ocasiones es necesario presentar informacin de manera ordenada
mediante listas con vietas o listas numeradas. Con HTML se pueden crear tres de
estos tipos de listados: listas ordenadas o numeradas, listas con vietas o listas de
definicin, cada una de ellas con sus variaciones.

LISTA ORDENADA <OL>

Considere el caso en el que debe presentar la lista numerada de algunas de
las dependencias de la empresa donde trabaja, comenzando con un nmero en
particular:

4. Direccin de Informtica
5. Planeacin
6. Vicepresidencia Financiera
7. Comunicaciones

El listado anterior se consigue en HTML mediante el uso de las etiquetas
<OL> (Ordered List) y <LI> (List Item):

<OL TYPE ="1" START ="4">
<LI>Direccin de Informtica
<LI>Planeacin
<LI>Vicepresidencia Financiera
<LI>Comunicaciones
</OL>

En la etiqueta <OL>, el atributo TYPE ="1" indica que la lista ser
numrica (el nmero entre comillas puede ser cualquier entero y el resultado ser el
mismo), mientras que el atributo START ="4" hace que el primer elemento del
listado est precedido por el nmero 4, el segundo por el nmero 5 y as
sucesivamente. S no se incluye ninguno de los dos atributos anteriores, el
explorador desplegar la misma lista pero comenzando el listado en 1.

S se quiere presentar el mismo listado pero de la siguiente manera:

A. Direccin de Informtica
B. Planeacin
C. Vicepresidencia Financiera
D. Comunicaciones

Bastar con cambiar el 1 del atributo TYPE por una A y el 4 del atributo
START por un 1, o simplemente omitir ste ltimo:

<OL TYPE = "A" START ="1">
<LI>Direccin de Informtica
<LI>Planeacin
<LI>Vicepresidencia Financiera
<LI>Comunicaciones
</OL>

EJERCICIO PROPUESTO

Cambie la A mayscula del tributo TYPE por una i, luego por una I y finalmente por
una a y observe los resultados.

LISTA CON VIETAS <UL>

S en lugar de una letra o un nmero precediendo los tems del listado, lo
que se quiere es que aparezca una vieta, se debe entonces utilizar la etiqueta
<UL> (Unorderd List) de la siguiente manera:

<UL TYPE = "circle">
<LI> tem 1
<LI> tem 2
<LI> tem 3
<LI> tem 4
</UL>

lo que producir una lista similar a:

o tem 1
o tem 2
o tem 3
o tem 4

La etiqueta <UL> nicamente tiene el atributo TYPE, que se refiere al tipo
de vieta que presentar. Pruebe omitiendo este atributo o cambiando circle por
disc o por square.

LISTA DE DEFINICIN <DL>

Esta etiqueta como su nombre lo indica, permite desplegar listas de palabras
con su correspondiente definicin. Se utiliza tpicamente en la construccin de
glosarios. Considere por ejemplo, la siguiente lista de trminos que definen las
funciones de algunas dependencias de la empresa:

PLANEACIN:
Encargada de ejecutar y revisar los planes de inversin.
INFORMTICA:
Encargada de disear, implementar y ejecutar los planes de desarrollo
informtico en la empresa.
RECURSOS HUMANOS:
Encargada de los asuntos relacionados con el recurso humano.

El listado anterior se comienza y termina con las etiquetas <DL> y </DL>.
Cada uno de los trminos a definir se precede con la etiqueta <DT>, mientras que
a la definicin en s, se le antepone la etiqueta <DD>:

<DL>
<DT>PLANEACIN:
<DD>Encargada de ejecutar y revisar los planes de inversin.
<DT>INFORMTICA:
<DD>Encargada de disear, implementar y ejecutar los planes de desarrollo informtico
en la empresa.
<DT>RECURSOS HUMANOS.
<DD>Encargada de los asuntos relacionados con el recurso humano.
</DL>

TABLAS

Una tabla est compuesta por columnas y filas que conforman un conjunto
de celdas que permiten mostrar informacin de manera organizada. En una celda se
puede incluir indistintamente texto, imgenes o cualquier otro elemento soportado
por HTML.

Para crear tablas en HTML, se utiliza la etiqueta <TABLE> cuyos atributos
principales son:

WIDTH ="95%" Ancho de la tabla con respecto al tamao de la pgina. En
este caso la tabla ocupar el 95%; o WIDTH ="600", con lo que la tabla tendr un
ancho de 600 pxeles.

BORDER ="1" Ancho en puntos de los bordes exteriores de la tabla.

CELLSPACING ="0" Ancho en puntos entre los bordes de las celdas

CELLPADDING ="4" Espacio en puntos, que separa el borde de la celda de
su contenido.

BGCOLOR ="#0000ff" Color del fondo de tabla. En el ejemplo azul.

En la etiqueta <TABLE> se definen las caractersticas principales de la tabla,
pero no se dice de cuntas filas y columnas estar compuesta ni cul ser su
contenido. En realidad existen tres etiquetas adicionales, que colocadas

adecuadamente dentro de <TABLE> y </TABLE> permiten controlar el nmero
de filas y columnas, adems de otras caractersticas:

<TR> Se utiliza para definir una nueva fila.
<TD> Permite agregar una celda o columna dentro de una fila
<TH> Es similar a <TD>, con la diferencia de que el texto contenido en ella
ser escrito en negrilla.

Lo anterior significa que una tabla en HTML tendr tantas filas como
etiquetas <TR> contenga y una fila estar compuesta por un nmero de celdas
igual al de etiquetas <TD> o <TH> que la misma tenga.

Las siguientes lneas ilustran el uso de estas etiquetas para crear una tabla
sencilla, compuesta por dos filas y dos columnas:

<TABLE BORDER=1>
<TR>
<TH>Primera Celda</TH>
<TH>Segunda Celda</TH>
</TR>
<TR>
<TD>Tercera Celda</TD>
<TD>Cuarta Celda</TD>
</TR>
</TABLE>

El resultado obtenido ser similar a:

Primera Celda Segunda Celda
Tercera Celda Cuarta Celda

Las etiquetas <TD> y <TH> tienen entre otros, atributos que permiten
controlar: el color del fondo de la celda (BGCOLOR=color), la alineacin del
texto o de la imagen dentro de la celda (ALIGN=alineacin), y que funcionan de
manera idntica a los utilizados con las etiquetas <H#>, <P> y <FONT>. Otro de
los atributos importante de estas dos etiquetas, es el que permite indicar el nmero
de columnas o de filas que ocupar una celda en particular. Suponga que se debe
crear una tabla similar a la siguiente:

TTULO DE LA TABLA
Celda 1 Celda 2

Observe que la tabla est compuesta por dos filas y dos columnas, y que la
celda del ttulo ocupa dos columnas. Cuando este es el caso, es decir que una celda
est distribuida en dos o mas columnas o filas, se utiliza para su definicin el

atributo COLSPAN=X o ROWSPAN=X respectivamente. X obviamente
corresponde al nmero de columnas o filas sobre las que se distribuir la celda.

Para crear la tabla que se muestra arriba, se debe escribir:

<TABLE BORDER=1>
<TR>
<TH COLSPAN=2>TTULO DE LA TABLA</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
</TR>
</TABLE>

Y si lo que se desea es crear una tabla como la siguiente:

Celda 1
TTULO DE LA TABLA
Celda 2

Se debe escribir:

<TABLE BORDER=1>
<TR>
<TH ROWSPAN=2>TTULO DE LA TABLA</TH>
<TD>Celda 1</TD>
</TR>
<TR>
<TD>Celda 2</TD>
</TR>
</TABLE>

EJERCICIO PROPUESTO

Cree una pgina que contenga una tabla con un pequeo inventario de productos,
similar a la que se muestra a continuacin.


IMGENES

Las pginas Web adems de mostrar texto, son capaces de desplegar
imgenes que han de ser creadas en cualquiera de los formatos aceptados: GIF,
JPG o PNG. Una imagen con extensin BMP, CDR, PCX o cualquier otro formato
diferente no ser exhibida en el explorador y en su lugar se mostrar uno de los
siguientes iconos, dependiendo del navegador que se tenga:

Una imagen puede ubicarse en cualquier parte de la pgina, incluso puede
ocupar el lugar de un carcter. Para insertar imgenes lo nico que se necesita
conocer es la ruta y el nombre del archivo que la contiene. La etiqueta <IMG>
junto con su atributo SRC ="ruta" permiten mostrar una imagen:

<IMG SRC ="logo.gif">

El ejemplo anterior mostrar la imagen logo.gif ubicada en el mismo
directorio donde reside la pgina web. Si por el contrario la imagen se encuentra en
otro directorio o subdirectorio, se debe incluir su ruta en el atributo SRC. La ruta
tiene las mismas caractersticas ya definidas en el aparte dedicado a Ubicacin de
Archivos de ste mdulo. Por ejemplo, SRC=Imagenes/logo.gif mostrar la
imagen logo.gif, ubicada bajo el subdirectorio Imagenes.

La etiqueta <IMG> cuenta adems de SRC con otros atributos que controlan
la manera como se desplegarn las imgenes:

ALT ="Texto alternativo" Permite definir un texto que aparecer en caso
de que la imagen por alguna razn no pueda ser mostrada, o cuando se desplaza el
puntero del ratn sobre la imagen ya desplegada.

HEIGHT = XX y WIDTH = XX Medida en pxeles del alto y ancho de la
imagen. Aunque estos atributos son opcionales, es conveniente incluirlos para que
de esta manera el navegador conozca el tamao de la imagen antes de descargarla.
Con ellos podemos controlar adems el tamao original de una imagen. Si por
ejemplo, se quiere que logo.gif, que originalmente tiene 120 x 120 pxeles, sea

Internet Explorer Netscape Navigator

mostrada a la mitad de su tamao en el navegador, basta con escribir una de las
tres lneas siguientes, siendo ms recomendable la tercera:

<IMG SRC ="Imagenes/logo.gif" HEIGHT = 60 >

<IMG SRC ="Imagenes/logo.gif" WIDTH = 60 >

<IMG SRC ="Imagenes/logo.gif" WIDTH = 60 HEIGHT = 60 >

S se desea cambiar el tamao de la imagen de manera proporcional, solo es
necesario incluir uno de los dos atributos.

ALIGN = Alineacin de texto Permite especificar la alineacin respecto
de la imagen de un texto que se escriba inmediatamente despus de la etiqueta
<IMG>. El texto en mencin, puede alinearse arriba, utilizando TOP como valor;
en el centro de la imagen, si utilizamos MIDDLE y en la parte inferior de la misma,
si el valor para ALIGN es BOTTOM. Adems, el atributo ALIGN puede recibir el
valor LEFT, con lo que la imagen se colocar a la izquierda del texto, o RIGHT,
caso en el que la imagen aparecer a la derecha.

BORDER ="X" Dibuja un borde o marco negro de x puntos alrededor de la
imagen. Si se omite este atributo, simplemente no se dibujar ningn borde.

Para comprender mejor el comportamiento de las imgenes, copie en un
directorio denominado Imgenes el siguiente logotipo y luego escriba en un archivo
las lneas que a continuacin se muestran:

logo.gif

<IMG SRC ="Imagenes/logo.gif" ALT ="Logo tamao 180 x 180
pxeles" WIDTH = 180 ALIGN = top BORDER=5>Texto alineado arriba
de la imagen
<P>
<IMG SRC ="Imagenes/logo.gif" ALT =" Logo tamao original"
ALIGN = middle BORDER=3>Texto alineado en la mitad de la imagen
<P>
<IMG SRC ="Imagenes/logo.gif" ALT =" Logo tamao 60 x 60
pxeles" HEIGHT = 80 ALIGN= Bottom >Texto alineado abajo de la
imagen
<P>
<IMG SRC ="Noexiste.gif" ALT ="No existe la imagen" > Texto

VNCULOS

Como ya se mencion, una de las etiquetas ms importantes de HTML es la
que permite, a travs de vnculos o enlaces, navegar por las diferentes pginas y
sitios en la red. Se pueden colocar enlaces que nos lleven a un lugar especfico en la
misma pgina, que abran otra pgina o un sitio nuevo e inclusive utilizar un vnculo
para enviar un correo electrnico a una direccin dada o permitir que el usuario
descargue y ejecute, o guarde archivos ubicados en una localizacin remota.

Un vnculo puede ser colocado sobre una zona de texto o sobre una imagen,
lo que lo convierte en un elemento sensible. Es decir, el elemento responder a
acciones tales como hacer clic, doble clic o desplazar el puntero del ratn sobre l.
Si el enlace se coloca sobre una franja de texto, sta aparecer subrayada y con
diferente color; si es una imagen la que lo soporta, HTML entonces le colocar un
borde del color definido para el atributo LINK de la etiqueta BODY.

VNCULOS DENTRO DE LA PGINA

Para facilitar la navegacin dentro de una pgina cuando su contenido es
demasiado largo y al desplegarla ocupa ms de una pantalla, se pueden colocar
enlaces que lleven al usuario a sitios especficos o predeterminados de la misma.
Para esto, se deben utilizar dos atributos de la etiqueta <A>:

<A NAME = "nombre">Texto de marca</A> sirve para marcar la zona
de nuestra pgina a la cual saltar el explorador cuando demos clic sobre el enlace
definido por la etiqueta <A HREF = "#nombre">Texto de enlace</A> que es
la que en realidad contiene el enlace.

EJERCICIO 3

Abra en el editor de texto el archivo Automvil.txt. Con los conocimientos hasta
ahora adquiridos realice los cambios necesarios para crear una pgina similar a la
siguiente, la cual guardar con el nombre de Automovil.html.

Una vez obtenido el resultado deseado, abra la pgina en el browser y
observe que su contenido ocupa ms de una pantalla. Nos interesa colocar enlaces

sobre los literales a. El motor y b. La transmisin, de tal forma que al dar clic
sobre cualquiera de ellos, el explorador nos lleve a la seccin deseada. Para
lograrlo, agregue las siguientes etiquetas en los lugares apropiados:


ENLACES A OTRA PGINA

Para ilustrar el uso de enlaces a otras pginas, se utilizarn Menu.html
(creada en el ejercicio 2), Automvil.html y dos pginas nuevas:
Computador.html y Telefono.html, que se crearn con los siguientes textos:
Computador.txt y Telefono.txt. Las pginas as creadas deben guardarse dentro
del mismo directorio. La idea es que al abrir Menu.html en el explorador, se pueda
desde all acceder a cualquiera de las otras tres pginas (Automvil, Computador y
Telfono). Para esto se debe editar la pgina Menu.html y agregar los links
faltantes:

<LI><A HREF="Automovil.html">Automvil</A>
<LI><A HREF="Computador.html">Computador</A>
<LI><A HREF="Telefono.html">Telfono</A>

En el ejercicio 3, cuando se definieron enlaces a otras secciones dentro de la
misma pgina, el atributo HREF contena el nombre de una seccin predefinida,
precedida por el signo #. Cuando se quiere crear un enlace a otra pagina que reside
dentro del mismo nivel, vale decir dentro del mismo directorio, el atributo HREF
debe contener la ruta y el nombre completo de la pgina y su extensin. La ruta
cumple con las mismas caractersticas ya explicadas en la seccin dedicada a la
ubicacin de archivos.

Es importante anotar, que en lo que se refiere a nombres de archivos y
pginas, HTML es sensible a las maysculas. Es decir, Telefono.html es diferente a
telefono.html. Lo anterior no se aplica a las etiquetas como ya se explic.

ENLACES A PGINAS REMOTAS

La verdadera potencia del lenguaje HTML consiste en que permite enlazar y
acceder pginas Web localizadas en cualquier servidor y punto geogrfico del
mundo, para lo cual lo nico que se necesita conocer es su direccin, que constituye
el valor (nombre) del atributo HREF.

Por ejemplo, la etiqueta para colocar un enlace a mi servidor, cuya direccin
es www.masterlinux.org, es:

<A HREF ="http://www.masterlinux.org"> IR A MASTERLINUX </A>

Los caracteres http se refieren al tipo de servicio o protocolo que presta el
servidor, en este caso protocolo de transferencia de hipertexto, en ingls HyperText
Transfer Protocol. Aunque existen otros servicios como ftp, telnet, y news, no es
del alcance de ste modulo profundizar en ellos.

El procedimiento para utilizar una imagen como elemento de enlace es
similar al anteriormente explicado. En el siguiente ejemplo, se utilizar la imagen
Hormiga.gif como elemento de enlace.
<A HREF ="http://www.masterlinux.org">
<IMG SRC ="Hormiga.gif" HEIGHT=100 ALIGN ="left">
</A>
ENLACE AL SERVICIO MAIL

El protocolo o servicio mailto permite definir otro tipo de enlace, que activa
la herramienta de correo electrnico para enviar un mensaje a la direccin definida
en el atributo HREF. Este enlace, al igual que los anteriores, puede ser colocado
indistintamente sobre imgenes o texto.

<A HREF=" mailto:egaitan@masterlinux.org"> Escribanos </A> si
desea recibir ms informacin.

Al abrir esta pgina en el explorador, la palabra Escribanos aparecer
subrayada, y al dar clic sobre ella se desplegar la herramienta de Mail, lista para
enviar un mensaje a mi cuenta de correo.

MARCOS O FRAMES

Los marcos o FRAMES, son etiquetas o procedimientos especiales de HTML
que permiten dividir, lo que aparentemente es una sola pgina, en diferentes zonas
o ventanas, independientes unas de las otras. En cada ventana se puede mostrar
una pgina diferente. La divisin puede hacerse verticalmente por columnas, de
manera horizontal por filas, o una combinacin de ambas. La pgina contenida en
cada marco tendr definidas sus propiedades de manera independiente y desde un
marco se puede, a travs de enlaces, hacer que se despliegue una pgina
cualquiera en otro marco, lo que los hace muy tiles para varios propsitos. Por
ejemplo, en una misma ventana se puede definir un marco que contenga el logotipo
o banner de la compaa, un segundo marco para desplegar el men de
navegacin, y por ltimo un marco que muestre la pgina o documento actual.

La construccin de pginas que contienen marcos se hace de manera similar
a la de cualquier documento HTML. La nica diferencia radica en el hecho de que la
etiqueta <BODY> es reemplazada por <FRAMESET>, que es la etiqueta que
define la estructura de los frames o marcos en los que se dividir la ventana del
navegador.

Para explicar el uso de <FRAMESET>, y el de otras etiquetas necesarias
para la implementacin de frames, se utilizarn cuatro pginas ya creadas:
Computador.html, Automovil.html, Telefono.html y Menu.html, y una nueva que
servir como pgina de definicin de los marcos, la cual debe guardarse con el
nombre de Marcos.html, dentro del mismo directorio de las otras pginas
mencionadas.

Se crear como ejercicio una pgina dividida verticalmente en dos marcos:
en el de la izquierda, ocupando el 20% de la pantalla, aparecer el contenido de la
pgina MenuFrames.html; mientras que en el marco de la derecha que ocupar
el 80% restante, se desplegar inicialmente la pgina Computador.html o
cualquiera de las otras dos, dependiendo de el enlace que se active en el frame de
la izquierda. Para este propsito se deben escribir las siguientes lneas:

<HTML>
<FRAMESET COLS="20%, 80%">
<FRAME SRC = "MenuFrames.html" NAME ="izquierda">
<FRAME SRC="Computador.html" NAME ="derecha">
</FRAMESET>
<NOFRAMES>
Lo sentimos, su navegador no soporta FRAMES
</NOFRAMES>
</HTML>

La etiqueta FRAMESET sirve para dos propsitos principales: definir la
orientacin de los marcos que puede ser horizontal (ROWS) o vertical (COLS); y el
nmero y tamao de cada marco. En el ejemplo, el atributo COLS ="20%, 80%",
divide la pantalla en dos marcos verticales, ocupando el primero de ellos a la
izquierda, el 20%, y el segundo el 80% del espacio. Para conformar n marcos
dentro de una pantalla, el atributo COLS o ROWS debe contener n valores
separados por comas. Estos valores pueden ser porcentajes o valores absolutos; en
cuyo caso el marco as definido, tendr un espacio igual al del nmero de pxeles
indicado. Si se quiere por ejemplo, dividir la pantalla de manera horizontal en cuatro
frames, y se necesita que el primero de ellos tenga una altura fija de 40 pxeles, el
segundo ocupe el 50% del espacio restante, y los otros dos se dividan el espacio de
manera proporcional:

<FRAMESET ROWS="40, 50%, 25%, 25%">

Otra forma de definir el tamao de los frames consiste en utilizar el carcter
*. En el siguiente ejemplo, una pantalla de 800 pxeles ser dividida en tres marcos
verticales: el primero de 400 pxeles (50% de 800), el segundo de 260 (valor
absoluto) y el tercero 140 pxeles, correspondiente al espacio restante.

<FRAMESET COLS="50%, 260, *">

Las etiquetas <FRAME> definen entre otras cosas el origen de la pgina que
contendr y el nombre del marco. En el ejercicio propuesto, se observan dos de
estas etiquetas, en la primera se define el marco denominado izquierda donde se
desplegar la pgina MenuFrames.html y en el segundo marco de nombre

derecha se mostrar la pgina Computador.html. Para que el ejercicio sea
completamente funcional, es necesario editar el archivo Menu.html como se indica a
continuacin, guardndolo luego como MenuFrames.html:

<A HREF = "Computador.html" TARGET = "derecha">
Computador</A>
<A REF ="Automovil.html" TARGET ="derecha"> Automovil</A>
<A REF ="Telefono.html" TARGET ="derecha"> Telfono</A>

El atributo TARGET de la etiqueta <A>, cuyo valor en el ejemplo es
derecha, indica en cual de los marcos definidos se debe desplegar la pgina
correspondiente a cada uno de los enlaces. Si se omite este atributo, el documento
ser mostrado dentro del mismo marco. Otro valor posible para TARGET es
blank, con lo que se abrir una nueva ventana en la cual se mostrar la pgina
correspondiente al enlace invocado.

La etiqueta <FRAME> tiene otros atributos que permiten controlar el
comportamiento de cada marco:

<FRAME SRC="xx" NAME="xx" MARGINWIDTH="x" MARGINHEIGHT="y"
SCROLLING="z" FRAMEBORDER="w" NORESIZE>

Donde:

MARGINWIDTH="x" define el valor en pxeles del margen izquierdo y derecho
entre el contenido y los bordes del frame. El valor de x debe ser mayor que 1. Si
este atributo es omitido, el browser se auto ajustar para hacer el mejor despliegue
posible del contenido del marco.

MARGINHEIGHT="y" trabaja de manera similar a MARGINWIDTH, pero
controla los mrgenes superior e inferior del frame.

El atributo SCROLLING="z" soporta tres valores posibles yes, no y auto. Se
utiliza para controlar la aparicin o no de las barras de desplazamiento (scrollbars),
cuando el contenido del frame excede el rea del mismo.

FRAMEBORDER="w" se utiliza para controlar que el browser muestre o no los
bordes del marco. En Internet Explorer w debe ser un valor numrico (cero significa
sin bordes), mientras que en Netscape Navigator w toma cualquiera de los valores
yes o no.

Por defecto, el tamao de todos los frames especificados en una pgina
puede ser cambiado por el usuario arrastrando los bordes del marco. Si se desea
mantener fijo el tamao predefinido de un marco, basta con agregar el atributo
NORESIZE dentro de la etiqueta de definicin.

Aunque no es muy comn en la actualidad, si el navegador desde donde se
accede la pgina no soporta el procedimiento FRAMES, se desplegar en lugar de
los marcos definidos, la informacin contenida dentro de las etiquetas
<NOFRAMES> y </NOFRAMES>.


Dentro de un documento que contiene frames pueden existir varias etiquetas
<FRAMESET>, lo que se conoce como anidamiento. Con este procedimiento, un
marco puede ser subdividido en otros marcos, para lo cual la etiqueta <FRAME> que
define las caractersticas del marco a subdividir se reemplaza por una nueva
etiqueta de definicin de frames. En el ejemplo siguiente, la pantalla es dividida
inicialmente en dos zonas horizontales, mediante la etiqueta <FRAMESET
rows="30%, *">; la etiqueta <FRAMESET cols="25%, *">, divide al segundo marco
horizontal en dos nuevos marcos verticales.

<HTML>
<HEAD>
<TITLE>Ejemplo de Frames</TITLE>
</HEAD>
<FRAMESET ROWS="30%, *">
<FRAME SRC = "banner.htm">
<FRAMESET COLS="25%, *">
<FRAME SRC="menu.html" NAME ="menu">
<FRAME SRC="princ.html" NAME ="princ">
</FRAMESET>
</FRAMESET>
</HTML>

FORMULARIOS

Los formularios son por excelencia los elementos utilizados para recolectar
informacin de los usuarios que luego es enviada al servidor para ser procesada.
Estn constituidos por un conjunto de elementos denominados controles, cuyo
contenido puede ser editado o activado por el cliente. Un control es bsicamente un
elemento de HTML que pertenece a un tipo y que tiene asociado un nombre y un
valor. El envo se hace mediante un controlador de formulario (generalmente un
botn). Cuando el usuario, despus de completar un formulario lo enva, en realidad
est transmitiendo un conjunto de parejas: nombre del control y valor. Un
formulario puede contener adems de controles, imgenes, texto en todos los
estilos, tablas, etc., pero nunca puede contener a otro formulario.

Para declarar un formulario se utiliza la etiqueta FORM que consta
bsicamente de dos atributos:

<FORM ACTION ="programa" METHOD ="mtodo">

</FORM>

En programa se especifica un servicio o un programa escrito en cualquiera
de los lenguajes compatibles (CGI, PERL, PHP, VBSCRIPT, etc.), que se encargar
de procesar las variables contenidas en cada uno de los controles incluidos dentro
del formulario. Por no ser la programacin del alcance de este mdulo, nicamente
se utilizar aqu la accin ACTION ="mailto: direccin de correo", cuya accin
ser enviar a la direccin de correo especificada los datos contenidos en los
controles.

El atributo METHOD soporta dos valores: el mtodo POST y el mtodo GET.
El primero de ellos se utiliza cuando se requiere procesamiento externo de los datos
del formulario o la introduccin de modificaciones al destino, por ejemplo, escribir
en una base de datos. El mtodo GET es ideal para el envo de formularios que no
producen ninguna modificacin en el destino, ejemplo una consulta sobre una base
de datos.

Los controles disponibles en HTML, se pueden clasificar segn su utilidad en
cuatro tipos: controles para texto, opciones, mens y botones.

CONTROLES PARA TEXTO

Texto de una sola lnea

Para especificar dentro de un formulario un control de texto de una sola lnea
que contendr cadenas de texto, se utiliza la etiqueta:

<INPUT TYPE ="text" NAME ="Nombre" SIZE ="60" MAXLENGTH
="80" VALUE = "Texto que aparecer cuando se abra la pgina">

Con el atributo NAME ="Nombre" se bautiza el campo para distinguirlo de
otros campos del mismo tipo. El texto que introduzca el usuario, quedar asociado a
la variable Nombre.

El atributo SIZE ="60" especifica la longitud del campo en caracteres que
se visualizar en la pantalla (para el ejemplo 60), mientras que MAXLENGTH
="80" indica el nmero mximo de caracteres (en este caso 80), que el usuario
podr introducir.

VALUE = "Texto que aparecer cuando se abra la pgina" define el
valor inicial del control, que aparecer cuando la pgina que contiene el formulario
sea abierta. Este atributo puede dejarse en blanco, especificando como valor " ", o
simplemente omitiendo el atributo.

Otro control para texto de una sola lnea es el conocido como control de tipo
password. Funciona y se define de manera similar al anterior, con la diferencia de
que los caracteres introducidos dentro del control no sern visibles para el usuario,
en su lugar se mostrar un conjunto de asteriscos.

rea de texto

Este control se utiliza cuando se sabe de antemano que los datos ingresados
por el usuario ocuparn ms de una lnea. Para construir uno de estos campos se
debe especificar adems del nombre de la variable a la cual se asociar el texto, el
nmero de filas y columnas que se visualizarn en la pantalla. La sintaxis de esta
etiqueta es como sigue:

<TEXTAREA NAME ="nombre" ROWS = "2" COLS ="60"> Texto
</TEXTAREA>


La etiqueta anterior mostrar sobre la pgina un campo de dos lneas de 60
caracteres de ancho. Lo anterior no significa que el usuario no pueda introducir
texto que sobrepase una de estas dos dimensiones. Cuando esto ocurre,
simplemente se activar el scrollbar vertical u horizontal segn sea el caso. La
variable nombre contendr el texto que el usuario introduzca. Observe que esta
etiqueta debe cerrarse con </TEXTAREA>, y que los caracteres contenidos dentro
de las dos etiquetas, en el ejemplo Texto, constituyen el valor inicial.

CONTROLES DE OPCIN

Radio Botones

Este tipo de control se utiliza cuando se quiere que el usuario escoja una y
solo una de entre varias opciones disponibles. Por ejemplo, si se est realizando una
encuesta y es necesario conocer el estado civil del encuestado, se puede colocar
dentro del formulario algo similar a:

para lograrlo debemos escribir las siguientes lneas:

<PRE>
<INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE
="Soltero"> Soltero(a)
="Casado"> Casado(a)
<INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="U.Libre"
CHECKED> U. Libre
="Viudo"> Viudo(a)
="Divorciado"> Divorciado(a)
</PRE>

En el ejemplo, la variable EstadoCivil tendr como valor U.Libre que es la
que se encuentra seleccionada. Si se quiere que una de las opciones aparezca
seleccionada por defecto, se debe agregar a la etiqueta que define tal opcin el
atributo CHECKED.


Casilla de verificacin

Al contrario de los radio botones, la casilla de verificacin permite seleccionar
ms de una opcin. La sintaxis de su etiqueta es como sigue:

<INPUT TYPE ="checkbox" NAME ="nombre" VALUE ="valor"
CHECKED>

Si el usuario selecciona esta casilla, la variable nombre contendr el texto
especificado en el atributo valor.

MEN DESPLEGABLE

Esta es otra forma de permitir al usuario escoger una nica opcin dentro de
varias disponibles, ocupando dentro de la pgina un rea menor a la que se
necesitara si se utilizaran radio botones. La encuesta del estado civil desplegada
lucira como se muestra ms adelante y se construye mediante las siguientes lneas:

<SELECT NAME="EstadoCivil">
<OPTION>Soltero(a)
<OPTION>Casado(a)
<OPTION SELECTED>U. Libre
<OPTION>Viudo(a)
<OPTION>Divorciado(a)
</SELECT>

Una variante a este tipo de control se consigue agregando el atributo
MULTIPLE a la etiqueta SELECT, lo que permite seleccionar ms de un valor entre
las opciones posibles:

<SELECT NAME="EstadoCivil" MULTIPLE>

BOTNES

Aunque se pueden implementar otros usos, los botones son controladores
que se utilizan bsicamente para: enviar (SUBMIT) el formulario o para
reinicializar o borrar (RESET) los campos del mismo. El botn de tipo SUBMIT,
ejecutar el programa especificado en el atributo ACTION ="programa" de la
etiqueta FORM, cuando el usuario de clic sobre l. La forma de construir botones
SUBMIT y RESET es como sigue:

Etiqueta Botn
<INPUT TYPE ="submit" VALUE
="Enviar">

<INPUT TYPE ="reset" VALUE
="Borrar">

En ambos casos, el valor contenido en el atributo VALUE, corresponde al
texto que aparecer sobre el botn.

Guia HTML Basico

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia HTML Basico

Cargado por

Copyright:

Formatos disponibles

1 de 43 http//:www.masterlinux.

org EFGM 2000-2007

También podría gustarte