¿Qué es HTML?

HTML es la abreviatura de HyperText Markup Language, y es el lenguaje que todos los

programas navegadores usan para presentar información en la World Wide Web (WWW). Este es un
lenguaje muy sencillo que se basa en el uso de etiquetas, consistentes en un texto ASCII encerrado dentro de
un par de paréntesis angulares(). El texto incluido dentro de los paréntesis nos dará una explicación de la
utilidad de la etiqueta. Así por ejemplo la etiqueta
nos permitirá definir una tabla. Las etiquetas podrán incluir una serie de atributos o parámetros, en su
mayoría opcionales, que nos permitirán definir diferentes posibilidades o características de la misma. Estos
atributos quedarán definidos por su nombre (que será explicativo de su utilidad) y el valor que toman
separados por un signo de igual. En el caso de que el valor que tome el atributo tenga más de una palabra
deberá expresarse entre comillas, en caso contrario no será necesario. Así por ejemplo la etiqueta
nos permitirá definir una
tabla con borde de
tamaño 2. Entre otras
cosas, el manejo de
estas etiquetas nos Contenido de la celda
permitirá:  Definir la
estructura lógica del
documento HTML. 
Aplicar distintos estilos 27
al texto (negrita,
cursiva, ...).  La {TR: Table Row} {TH:
inclusión de
hiperenlaces, que nos Table Header} {TD: Table
permitirán acceder a
otros documentos Data}
relacionados con el
actual.  La inclusión de Vamos a analizar cada una
imágenes y ficheros
multimedia (gráficos, de estas etiquetas de
vídeo, audio). ¿Qué
vamos a necesitar para forma separada:
crear un documento
HTML?  Un 1.
procesador de textos
para escribir y editar el : Definición general de la
código HTML. Este
podrá ser cualquiera que tabla. Dentro de ella
no formatee el texto, ya
que el leguaje HTML definiremos las filas y
está basado en el código
ASCCI. Si usamos un columnas que la
procesador como el
Word, tendremos que constituyen, pudiendo
guardar el documento
como "sólo texto ".  Un incluso definir tablas
navegador Web como el
Explorer, Netscape, dentro de tablas, es decir,
Mosaic, etc., el cual se
encargará del interpretar tablas
el código HTML de
nuestro documento y anidadas.
mostrárnoslo en todo su
esplendor. La secuencia 2.
de trabajo para crear
nuestro documento es:
1. Con el procesador de
texto crearemos el
documento HTML y lo
guardaremos con el
nombre que deseemos, a
excepción de la
extensión, que deberá
ser necesariamente .htm
ó .html. 2. Para
visualizar nuestro
documento HTML
abriremos el documento
con el programa
navegador. Reglas de
formato Todos los
navegadores usan unas
reglas básicas para
poder mostrar una
página web con un buen
formato: 2  El espacio
en blanco es ignorado.
Ya que un documento
HTML puede estar en
cualquier tipo de fuente
y además la ventana del
navegador puede ser de
cualquier tamaño.  Las
etiquetas pueden ser
escritas en mayúsculas o
en minúsculas. En todo
caso se aconseja su
escritura en mayúsculas
para poder distinguirlas
del texto normal. 
Existe normalmente una
etiqueta de inicio y otra
de fin. La etiqueta de fin
contendrá el mismo
texto que la de inicio
añadiéndole al principio
una barra inclinada /. La
etiqueta afectará por
tanto a todo lo que esté
incluido entre las
etiquetas de inicio y fin.
No obstante, existen
algunas que no
necesitan cierre, ya que
en estas etiquetas se
presupone su final,
como por ejemplo;

párrafo,
salto de línea ó ¡Error!
Nombre de archivo no
especificado.inclusión
de una imagen. Vemos
un ejemplo en la Tabla
1. Instrucción HTML
Resultado Texto en
negrita Texto en negrita
Texto en cursiva Texto
en cursiva Texto en
negrita y cursiva Texto
en negrita y cursiva
Tabla 1 Estructura de un
documento HTML La
estructura básica de un
documento HTML es la
siguiente: Indica el
inicio del documento
Indica el inicio de la
cabecera Final del título
del documento Final de
la cabecera

Inicio del cuerpo del

documento
Instrucciones HTML
Final del cuerpo del
documento
Final del documento
Ninguno de estos
elementos es
obligatorio, pudiendo
crear documentos
HTML sin incluir estas
etiquetas de
identificación. No
obstante es altamente
recomendable la
construcción de páginas
HTML siguiendo esta
estructura, para una
buena estructuración y
legibilidad del código.
Nuestra primera página
HTML Una vez que
conocemos la estructura
básica de un documento
HTML, vamos a crear
una página HTML muy
sencillita. 1. Lo primero
será abrir el procesador
de textos que hayamos
elegido y copiar el
Código fuente 1.
Esta es mi primera
página HTML
Código fuente 1 2. Una
vez tecleado el código,
guardamos el
documento como
Pagina1.htm, y
procedemos a abrirlo
con el navegador
correspondiente. El
resultado será: Esta es
mi primera página
HTML Forma del URL
El URL(Uniform
Resource Locator) nos
van a permitir localizar
y acceder a cualquier
recurso de la red desde
nuestro programa
navegador. A través de
los URL podremos
referenciar cualquier
fichero que deseemos
incluir en nuestro
documento HTML.
Cada elemento de
Internet vendrá definido
por su URL
correspondiente,
independientemente del
tipo de servidor en el
que se encuentre. La
forma general del URL
es: Tipo de servicio:
//maquina.dominio:puert
o/camino/archivo El
Tipo de servicio, como
su propio nombre
indica, hace referencia a
alguno de los servicios
de Internet. El servicio
correspondiente al
WWW es http
(HiperText Transport
Protocol), protocolo
para la transmisión de
hipertexto. Por lo que
cualquier referencia a un
documento HTML
debería comenzar por
http:// .Otros servicios
son: ftp, news, telnet o
mailto. La
máquina.dominio indica
el nombre del servidor
en que se encuentra el
documento al que
estamos haciendo
referencia, junto con el
dominio al que
pertenece dicho
servidor. El puerto es
opcional, y lo normal es
no ponerlo, indicándose
sólo en el caso de que el
servidor utilice un
puerto distinto al puerto
por defecto. El camino
indica la ruta de
directorios que hay que
seguir para encontrar el
documento que estamos
referenciando.
Finalmente
especificaremos el
nombre del archivo en
que está guardado el
documento en cuestión.
Si no indicamos un
archivo, accederemos al
archivo por defecto del
directorio al que
estemos referenciando.
(En el caso del servicio
http este archivo por
defecto suele ser
default.htm ó
default.html). Vamos a
ver a continuación
algunos ejemplos de
URL' s, accediendo a
distintos servicios de la
WWW. 4 Localizando
un documento
hypertexto
(http):Sintaxis:
http://maquina.dominio:
puerto/camino/archivo
Ejemplo1:
http://www.google.com
En este ejemplo estamos
indicando el servicio al
que estamos accediendo
(http), la máquina y el
dominio, tomándose el
resto de parámetros por
defecto, de forma que
accederemos al
directorio raíz del
servidor y al documento
por defecto de ese
directorio, en este caso
estamos accediendo a la
página de portada de
Google Cabecera y
cuerpo del documento
HTML Cabecera
Cabecera del documento
HTML ...... En la
cabecera de un
documento HTML
incluiremos las
definiciones generales
que afecten a todo el
documento, como por
ejemplo el título de la
página que aparecerá en
la parte superior de la
ventana del navegador.
Las etiquetas y son las
que van a delimitar la
cabecera de nuestro
documento. Todas la
etiquetas de la cabecera
son opcionales, aunque
se recomienda incluir en
todos nuestros
documentos la etiqueta
El título de nuestro
documento viene
especificado por las
etiquetas: y, como ya
hemos mencionado, este
título es el que
aparecerá en la ventana
de nuestro programa
navegador. Lo normal y
recomendable es que el
título guarde relación
con el contenido de
nuestro documento, ya
que por ejemplo es
utilizado por algunos
servidores de búsqueda
para poder intuir el
contenido de nuestro
documento. Veamos un
ejemplo en el Código
fuente 2. Código fuente
2 Indicador de refresco
del documento Esta
etiqueta sirve para
indicar un documento
que deberá sustituir al
actual transcurrido un
número determinado de
segundos. Una posible
utilidad de esta etiqueta
podría ser para
visualizar documentos
de forma secuencial, de
forma que se empieza
por un documento y se
pasa al siguiente
transcurrido un período
de tiempo sin necesidad
de que la persona que
lee el documento realice
ninguna acción. Veamos
un ejemplo en el Código
fuente 3. 6 Código
fuente 3 Si insertamos
esta instrucción en la
cabecera de nuestro
página HTML,
transcurridos 5
segundos ésta se
refrescará con la página
Web de portada de:
"google". Indicador de
la URL base del
documento Con esta
etiqueta indicamos la
localización de los
ficheros a los que se
hace referencia en
nuestra página Web. Si
no incluimos esta
etiqueta el navegador
entenderá que dichos
ficheros se encuentran
en el mismo lugar donde
reside nuestra página
Web. Vemos un ejemplo
en el Código fuente 4.
Código fuente 4 Si
especificamos como
URL base de nuestro
documento HTML la
indicada en este ejemplo
y posteriormente
hacemos referencia en
nuestra página a un
fichero llamado
"aula.htm", se entenderá
que la localización del
fichero es
"http://www.google.com
/vulcan/aula.htm" .
Cuerp o Cuerpo del
documento HTML:
......
En el cuerpo de un
documento HTML es
donde incluiremos las
distintas instrucciones
del lenguaje junto con el
contenido en sí de
nuestra página Web:
textos, imágenes,
enlaces a otras páginas,
etc.. Las etiquetas
y
son las que van a
delimitar el cuerpo de
nuestro documento. Esta
posee una serie de
argumentos que nos van
a permitir variar las
características del
documento en su
conjunto, como por
ejemplo el color del
texto o del color de
fondo de nuestra página
web. Antes de analizar
los componentes y
atributos de BODY
vamos a ver como se
especifican los colores
en un documento
HTML. Estos se pueden
especificar por su
nombre (name) o por su
código de color, que es
un número compuesto
de tres pares de cifras
hexadecimales que nos
indican la proporción de
los colores primarios
(rojo, verde y azul) que
forman el color deseado
(#rrggbb): Nombre
Código de color Color
mostrado Black
#000000 Negro Teal
#008080 Teal Blue
#0000FF Azul Navy
#000080 Azul marino
Lime #00FF00 Lima
White #FFFFFF Purple
#800080 Púrpura
Yellow #FFFF00
Amarillo Olive #808000
Oliva Red #FF0000
Rojo maroon #800000
Marrón gray #808080
Gris fuchsia #FF00FF
Fucsia green #008000
Verde silver #C0C0C0
Plata aqua #00FFFF
Agua Tabla 2 La
etiqueta
presenta una serie de
atributos que van a
afectar a todo el
documento en su
conjunto. Estos atributos
nos van a permitir
definir los colores del
texto, del fondo, y de los
hiperenlaces del
documento. Incluso nos
permitirán insertar una
imagen de fondo en
nuestra página.
 background="URL".
Nos va a permitir
mostrar una imagen
como fondo de nuestro
documento HTML. El
camino a esta imagen
vendrá especificado por
la URL que definamos.
Si la imagen no rellena
todo el fondo del
documento, ésta será
reproducida tantas veces
como sea necesario
hasta completar todo el
fondo. Si insertas el
Código fuente 5 en el
documento HTML que
creamos como ejemplo
en el capítulo anterior:
Pagina1.htm, este
presentará como fondo
la imagen "fondo.gif"
Código fuente 5 
bgcolor=#rrggbb ó
name {bgcolor:
Background Color}.
Nos va a permitir definir
un 8 color para el fondo
de nuestro documento.
Este atributo será
ignorado si previamente
hemos utilizado el
atributo background.
Inserte el Código fuente
6 en Pagina1.htm y
compruebe el resultado.
Código fuente 6 
text=#rrggbb ó name.
Nos permitirá definir un
color para el texto de
nuestro documento. Por
defecto es negro. Inserte
el Código fuente 7 en
Pagina1.html y
compruebe el resultado
Código fuente 7 Y
ahora, inserte el Código
fuente 8 en el
documento y comprueba
el resultado.
Código fuente 8 
link=#rrggbb ó name.
Indica el color que
tendrán los hiperenlaces
que no han sido
accedidos. Por defecto
es azul. Como todavía
no sabemos insertar
hiperenlaces en nuestro
documento vamos a
dejar el ejemplo
correspondiente para
más adelante. 
vlink=#rrggbb ó name
{vlink: Visited Links}.
Indica el color de los
hiperenlaces que ya han
sido accedidos. Por
defecto es púrpura.
Caracteres especiales
Hasta ahora hemos
escrito algunos ejemplos
de código HTML, pero
hemos pasado por alto
algunas limitaciones de
HTML respecto al uso
de caracteres especiales.
Una de estas
limitaciones es, por
ejemplo, el uso de los
caracteres < y >, que
como ya sabemos
indican el inicio y fin de
una etiqueta HTML.
Pues bien, si
quisiéramos escribir
estos caracteres como
parte normal de un
texto, el navegador no
sabría si se trata de texto
normal o del comienzo
y final de una etiqueta, o
sea, que se haría un lío.
Como todo tiene
solución, existen unos
códigos para poder
escribir estos caracteres
y otros relacionados con
las etiquetas los vemos
en la Tabla 3. Símbolo
Código < (menor que) <
> (mayor que) > &
(ampersand) & "
(comillas) " Tabla 3
Para las letras
específicas del idioma
castellano: las vocales
acentuadas, la ñ, la ü y
los signos ¿ y ¡, existen
los códigos que muestra
la Tabla 4. Letra Código
Letra Código Letra
Código á á Á Á ñ ñ é é
ÉÉÑÑííÍÍüüóóÓ
ÓÜÜúúÚÚ
¿ ¿ ¡ ¡ Tabla 4 Para los
navegadores actuales,
podemos escribir
nuestro código HTML
de manera directa sin
tener en cuenta estos
códigos, pero nunca
podemos asegurar que
las personas que
accedan a nuestras
páginas con otros
navegadores puedan
leerlas correctamente.
Así que los más
adecuado es el empleo
de los mismos. Otros
símbolos especiales
aparecen en la Tabla 5.
Símbolo Código Ç ç Ç
Ç © © ® ® Tabla 5
Veamos un ejemplo en
el Código fuente 9. "La
inspiración existe, pero
tiene que encontrarse
trabajando". © Pablo
Ruíz Picasso. Código
fuente 9 10 Esta
instrucción HTML,
debería producir el
siguiente resultado: "La
inspiración existe, pero
tiene que encontrarse
trabajando". © Pablo
Ruíz Picasso. Para la
inclusión de
comentarios en nuestra
página HTML, podemos
usar la etiqueta: . Estos
comentarios nos podrán
servir para efectuar
anotaciones en nuestro
documento HTML que
ayuden a una mayor
comprensión del código.
En el Código fuente 10
se muestra un ejemplo
de comentario. Código
fuente 10 Espaciado y
saltos de línea En
HTML sólo se admite
un único espacio en
blanco separando
cualquier elemento o
texto, el resto de
espacios serán
ignorados por el
navegador, al igual que
las tabulaciones,
retornos de carro, etc.
Veamos un ejemplo en
la Tabla 6. Ejemplo
Resultado Esta frase no
se verá así en el visor.
Esta frase no se verá así
en el visor. Tabla 6 No
obstante, sí podremos
dar el formato que
deseemos a nuestras
páginas con el empleo
de los siguientes
elementos del lenguaje
HTML: Inclusión de
espacios en blanco:
Nos permitirá la
inclusión de más de un
espacio en blanco entre
dos textos consecutivos,
de forma que estos
espacios se muestren de
forma efectiva en el
navegador. Tendremos
que incluir tantas
expresiones como
espacios en blanco se
deseen incluir. Ejemplo
Resultado
Texto1 Texto2 Texto1
Texto2 Tabla 7 Salto de
línea:
{BR: Break} Nos
permite dar un salto a la
línea siguiente en el
punto donde la etiqueta
sea insertada. Ejemplo
Resultado Esta frase
tiene aquí
un salto de línea Esta
frase tiene aquí un salto
de línea Tabla 8 Cambio
de párrafo:

{P: Paragraph} Permite

definir un párrafo,
introduciendo
normalmente un espacio
de separación de dos
líneas con el texto
siguiente al punto donde
hayamos insertado la
etiqueta

. Ejemplo Resultado
Esta frase tiene aquí

un cambio de párrafo
Esta frase tiene aquí un
cambio de párrafo Tabla
9 La etiqueta de fin
párrafo

es opcional, no siendo
necesario incluirla.
Aunque siempre es
recomendable delimitar
claramente el inicio y
final de un párrafo.
Además, cuando usemos
esta etiqueta como
cerrada

.....

, tenemos la posibilidad
de incluirle el atributo
align el cual indica al
navegador la forma de
justificar el texto
incluido en el párrafo.
El formato sería el
siguiente:
Texto contenido en el
párrafo

Veamos algunos
ejemplos en la Tabla 10.
Ejemplo Resultado

Este es un ejemplo de
párrafo alineado a la
derecha

Este es un ejemplo de
párrafo alineado a la
derecha

Este es un ejemplo de
párrafo centrado

Este es un ejemplo de
párrafo centrado Tabla
10 Línea Horizontal:

{HR: Horizontal Rule}

Nos permite insertar una
línea horizontal, cuyo
tamaño podremos
determinar a través de
sus atributos. Si no
especificamos ningún
atributo dibujará una
línea que ocupe el ancho
de la pantalla del
navegador. Su utilidad
es la de permitirnos
dividir nuestra página en
distintas secciones. No
será necesaria la
etiqueta de fin . El
formato de la etiqueta
con sus posibles
atributos es:

12  align= left / right /

center. Permite
establecer la alineación
de la línea a la
izquierda, a la derecha o
centrarla.  noshade. No
muestra la sombra de la
línea, evitando el efecto
de tres dimensiones. 
size=n. Indica el grosor
de la línea en pixels. 
width=n ó n%.
Especificará el ancho de
la línea, este se podrá
especificar en pixels (n)
o en tanto por ciento del
ancho de la ventana (n
%). Vamos a ver
algunos ejemplos en la
Tabla 11. Ejemplo
Resultado

Tabla 11 Texto
preformateado:
{PRE:
Preformatted}
Nos permitirá
visualizar el texto
tal y como se ha
escrito, respetando
los saltos de
línea, las
tabulaciones, y
espacios en blanco
de todo el texto
incluido entre las
etiquetas
y
.
El texto se
mostrará con una
fuente de espaciado
fijo más pequeña
que el texto
normal. No es
recomendable su uso
ya que presenta
muchas limitaciones
y no se obtiene una
buena presentación.
Ejemplo Resultado
Este texto está
preformateado.

Este texto está

preformateado.
Tabla 12
13
Elementos del
lenguaje I
Cabeceras y
atributos de texto
Cabeceras:

...
{H: Heading}

En un documento HTML
podemos incluir seis tipos
distintos de cabeceras,
que van a constituir
normalmente el título y
los distintos subapartados
que forman el documento,
aunque podremos

utilizarlas en el punto
que queramos del documento
para resaltar cualquier
texto. Estas cabeceras son

definidas por las

etiquetas

. El texto que componga

cada

cabecera deberá estar

incluido entre las
etiquetas de inicio () y
fin (/Hn) correspondiente.
La

cabecera

será la
que
muestre
el texto
de mayor
tamaño,
este
tamaño
irá
disminuy
endo
hasta
llegar a
la
cabecera
. Como
podemos
ver en
la Tabla
13. Para
alinear
las
cabecera
s
utilizam
os
el
atributo
align.
El
formato
sería: ,
como
muestra
la Tabla
14.
Ejemplo
Resultad
o
Cabecera
1
Cabecera
1
Cabecera 2

Cabecera
2
Cabecera 3

Cabecera
3
Cabecera 4

Cabecera
4
Cabecera 5

Cabecera
5
Cabecera 6

Cabecera
6
Tabla 13
Ejemplo
Resultad
o
Cabecera 5

Cabecera
5
Tabla 14
Atributo
s del
texto
Al texto
de
nuestro
document
o HTML
le
podemos
aplicar
distinto
s
atributo
s
(negrita
,
cursiva,
subrayad
o,
etc..),
al igual
que
hacemos
cuando
trabajam
os con
el
procesad
or de
textos
en la
edición
de
nuestros
document
os. Para
aplicar
estos
atributo
s
disponem
os de
distinta
s
etiqueta
s, que
aplicará
n su
efecto
al texto
incluido
entre
sus
indicado
res de
inicio y
fin. Las
vemos en
la Tabla
15.
Atributo
Etiqueta
Ejemplo
Resultad
o
Negrita
Texto en
negrita
Texto en
negrita
Cursiva
Texto en
cursiva
Texto en
cursiva
Teletype
Texto en modo

teletype

Texto en
modo
teletype
Subrayad
o Texto
subrayad
o Texto
subrayad
o
Tachado
Texto
tachado
Texto
tachado
Parpadeo
Texto
parpadea
ndo
Texto
parpadea
ndo
Superínd
ice Texto
en modo

superíndice

Texto en
modo
superínd
ice
Subíndic
e Texto en
modo

subíndice

Texto en
modo
subíndic
e
Centrado

Texto
centrado

Texto
centrado
{B:
Bold}
{I:
Italic}
{TT:
Teletype
} {U:
Underlin
ed} {S:
Strike}
{SUP:
Superscr
ipt}
{SUB:
Subscrip
t}
Tabla 15
Alguna
de estas
etiqueta
s no es
reconoci
da por
determin
ados
navegado
res. Así
por
ejemplo,
la
etiqueta

(Parpade
o) no es
implemen
tada por
el
Explorer
. Por lo
que
según el
explorad
or que
estemos
utilizan
do,
podremos
ver el
resultad
o
correcta
mente o
no.
Existen
otras
etiqueta
s que
nos van
a servir
para
especifi
car, de
manera
diferenc
iada,
unidades
lógicas
de
nuestro
document
o HTML
tales
como
citas,
direccio
nes de
correo,
etc. En
algunos
casos el
formato
obtenido
con
estas
etiqueta
s de
estilo
lógico
va a ser
el mismo
que con
las
anterior
es, a
las que
se les
denomina
también
etiqueta
s de
estilo
físico.
Algunas
etiqueta
s de
estilo
lógico
las
vemos en
la Tabla
16.
Etiqueta
Ejemplo
Resultad
o

Especifi
ca texto
resaltad
o (igual
)
Especifi
ca texto
resaltad
o
(igual )
Indica
una cita
o
título
(igual )
Indica
una cita
o título
(igual
)
< Texto
tachado
(igual )
Texto
tachado
(igual )
Tabla 16
Si
queremos
aplicar
efectos
más
espectac
ulares a
nuestro
document
o HTML,
debemos
variar
el
tamaño,
el color
y el
tipo de
letra
del
texto.
La
etiqueta
que nos
permite
todo
esto es
15
..., por
medio de
sus
atributo
s size,
color y
face:


size="n"
ó "+/-
n". El
atributo
size nos
permite
especifi
car un
tamaño
determi
nado
para la
fuente
del
texto
incluido
entre
las
etiqueta
s de
inicio y
fin, el
cual
puede
estar
entre 1
y
7. El
texto de
tamaño
normal
equivale
a la
fuente
de
tamaño
3
(fuente
base).
Por
tanto, si
especifi
camos
size=+2
, el
tamaño
de la
fuente
será 5.
Y si
especifi
camos
size=
-1, el
tamaño
será 2.
Ejemplo
Resulta
do
Tamaño 2

Tamaño
2
Tamaño 5
(3+2)
Tamaño
5 (3+2)
Tamaño 2 (3-1)

Tamaño
2 (3-1)
Tabla 17

color="#
rrggbb
ó
name".
Nos va a
permitir
definir
el color
que
tendrá
el texto
incluido
entre
las
etiqueta
s. Tabla
18.
Ejemplo
Resulta
do
Texto de
color
rojo
Texto de
color
rojo
Texto de
color
azul
Texto de
color
azul
Texto
verde y de
tamaño 5

Texto
verde
tamaño
5
y de
Tabla 18

face="n
ombre
de
font".
Nos va a
permitir
escribir
texto
con el
tipo de
letra
que le
especifi
quemos.
En el
caso de
que el
tipo de
letra
que le
hayamo
s
especifi
cado no
esté
cargada
en el
ordenad
or que
lee la
página,
se usará
el font
por
defecto
del
navegad
or.
Ejemplo
Resulta
do
Tipo de
letra
Tahoma
Tipo de
letra
Tahoma
Texto azul, de
tamaño

4 y Tahoma

Texto
azul, de
tamaño
4
y
Tahoma
Tabla 19
Listas
Podemo
s
represe
ntar
element
os en
forma
de lista
dentro
de
nuestro
s
docume
ntos de
una
forma
muy
sencilla
y con
una
gran
versatili
dad.
Estas
listas
podrán
incluir
cualquie
ra de
los
element
os HTML
e
incluso
podemo
s definir
listas
anidada
s, es
decir,
listas
dentro
de
listas.
HTML
nos
permite
crear
tres
tipos
distinto
s de
listas:
 Listas
no
numera
das
 Listas
numera
das
 Listas
de
definicio
nes
Listas
no
numera
das:
{UL:
Unor
dered
List}
Con
este
tipo
de
listas
pode
mos
espec
ificar
una
serie
de
elem
entos
sin
un
orden
prede
termi
nado,
prece
didos
de
una
marc
ao
viñet
a que
nosot
ros
mism
os
pode
mos
defini
r.
Para
la
defini
ción
de
los
límite
s de
la
lista
utiliz
arem
os la
etiqu
eta
....
,y
para
deter
minar
cada
uno
de
los
elem
 entos
que
la
comp
onen
usare
mos
la
etiqu
eta
 . El
forma
to es
el
sigui
ente:

 Tít
ulo
de
la
list
a


 Elem
ento
1

 Elem
ento
2
 ....

 Elem
ento
n
 17
 {LH:
List
Head
} {LI:
List
Item}
 Con
el
atrib
uto
type
vamo
sa
espec
ificar
el
tipo
de
marc
ao
viñet
a que
antec
ederá
a
cada
uno
de
los
 elem
entos
de la
 lista.
Estas
marc
as
podrá
n ser:
un
disco
(disk)
, un
círcul
o
(circl
e) o
un
cuadr
ado
 (squa
re).
La
etiqu
eta
nos
va a
servir
para
 espec
ificar
un
posib
le
título
de la
lista,
siend
o
esta
 opcio
nal.
Vamo
sa
ver
algun
os
ejem
plos
en la
Tabla
20
 Ejem
plo
 Resul
tado

 Lo
s
cin
co
co
nti
ne
nt
es

o Eu
ro
pa
o
o Asi
a
o
o Afr
 ica
o
o Am
éri
ca
o
o Oc
ea
nía
o

 Los
cinco
conti
nente
s

Europ
a

Asia

África

Améri
ca

Ocea
nía

o Eu
ro
pa
o
o Asi
a
o
o Afr
ica
o
o Am
éri
ca
o
o
oA
m
é
r
i
c
a
d
e
l
N
o
r
t
e
o
oA
m
é
r
 i
c
a
d
e
l
S
u
r
o
o
o Oc
ea
nía
o


Europ
a

Asia

África

Améri
ca

Améri
ca del
Norte

Améri
ca del
Sur

Ocea
nía
 Tabla
20
Listas
nume
radas
:
{O
L:
Or
de
re
d
Lis
t}
Co
n
est
e
tip
o
de
list
as
po
de
mo
s
es
pe
cifi
car
un
a
ser
ie
de
ele
me
nt
os
nu
me
ra
do
s
se
gú
n
el
lug
ar
qu
e
oc
up
an
en
la
list
a.
Par
a
la
def
ini
ció
n
de
los
lím
ite
s
de
la
list
a
uti
liz
are
mo
s
la
eti
qu
eta
.
.
.
.

,y
pa
ra
de
ter
mi
na
r
ca
da
un
o
de
los
ele
me
nt
os
qu
 e
la
co
mp
on
en
us
are
mo
s
la
eti
qu
eta
1. .
El
for
ma
to
es
el
2. si
gui
en
te:
3.
4.

5.
Tí
t
u
l
o
d
e
l
a
l
i
s
t
a
6.
7. El
em
en
to
 1
8.
9. El
em
en
to
2
10.
....
11.

12.
Ele
me
nt
on
13.
Con
el
atr
ibu
to
sta
rt
va
mo
sa
es
pe
cifi
car
el
nú
me
ro
po
r el
qu
e
va
a
em
pe
zar
la
list
a.
Si
no
14.
indi
ca
mo
s
est
e
ar
gu
me
nt
o
la
list
a
em
pe
zar
áa
nu
me
rar
se
a
pa
rtir
 del
1.
Co
n
el
atr
ibu
to
typ
e
va
mo
sa
15.
esp
eci
fic
ar
el
tip
o
de
list
a
nu
me
ra
da.
Su
s
po
sib
les
val
ore
s
ap
are
ce
na
co
nti
nu
aci
ón
y
ver
em
os
alg
un
os
16.
eje
mp
los
en
la
Ta
bla
21.
17.
A:
Let
ras
ma
yú
sc
ula
s
(A,
B,
C, .
..)
18.
a:
Let
 ras
mi
nú
sc
ula
s
(a,
b,
c, .
..)
19.
I:
Nú
me
ros
ro
ma
no
s
en
ma
yú
sc
ula
s
(I,
 II,
III,
IV,
...)
20.
i:
Nú
me
ros
ro
ma
no
s
en
mi
nú
sc
ula
s
(i,
ii,
iii,
iv,
...)
21.
1:
Nu
mé
ric
am
en
te
(1,
2,
3,
4, .
...)
(es
la
nu
me
rac
ión
po
r
def
ect
oy
po
r
ta
 nt
o
no
ha
brí
a
qu
e
22.
indi
car
la).
23.
Eje
mp
lo
Re
sul
ta
do
24.

25.
26.
L
o
s
c
i
n
c
o
c
o
n
t
i
n
e
n
t
e
s
oE
u
r
o
p
 a
o
oA
s
i
a
o
oÁ
f
r
i
c
a
o
oA
m
é
r
i
c
a
o
 oO
c
e
a
n
í
a
o
27.

28.
Los
cin
co
co
nti
ne
nt
es
29.
A.
Eu
ro
pa
30.
B.
Asi
a
31.
C.
Áfr
ica
32.
D.
Am
éri
ca
33.
E.
Oc
ea
nía
34.

II.E
u
r
o
 p
a
III.
IV.A
s
i
a
V.
VI.Á
f
r
i
c
a
VII.
VIII.A
m
é
r
i
c
a
 IX.
X.
i.
A

ii.

iii.
A

iv.

XI.
XII.O
c
e
a
n
í
a
XIII.
35.
36.
II.
Eu
ro
pa
37.
III.
Asi
a
38.
IV.
Áfr
ica
39.
V.
Am
éri
ca
40.
i.
Am
éri
ca
 del
No
rte
41.
ii.
Am
éri
ca
del
Su
r
42.
VI.
Oc
ea
nía
43.
Tabl
a
21
44.
19
45.
List
 as
de
def
ini
cio
ne
s:
{D
L:
De
fini
tio
n
Lis
t}
46.
Esta
s
list
as
no
s
va
na
ser
vir
pa
ra
es
pe
cifi
car
un
a
ser
ie
de
tér
mi
no
sy
su
s
def
ini
cio
ne
s
cor
res
po
ndi
 en
tes
.
47.
Para
la
def
ini
ció
n
de
la
list
a
us
are
mo
s
la
eti
qu
eta
....
,
pa
ra
es
pe
cifi
car
los
tér
mi
no
s
us
are
mo
s
la
eti
qu
eta
y
pa
ra
es
pe
cifi
car
la
 def
ini
ció
n
cor
res
po
ndi
en
te
a
ca
da
tér
mi
no
us
are
mo
s
la
eti
qu
eta
. El
forma
to es
el
sigui
ente:

Título
de la
lista
Tér
mi
no
1
Defini
ción
1
Tér
mi
no
2
Defini
ción
2
....
Tér
mi
no
n
Defini
ción
n
{DT:
Defini
tion
Term
}
{DD:
Defini
tion
Descr
iption
}
Vamo
sa
ver
un
ejem
plo
en la
Tabla
22.
Ejem
plo
Resul
tado
 Par
ís
Capit
al de
Franc
ia
Ro
ma
Capit
al de
Italia
Ma
dri
d
Capit
al de
Espa
ña
París
Capit
al de
Franc
ia
Roma
Capit
al de
Italia
Madri
d
Capit
al de
Espa
ña
Tabla
22
Hiper
enlac
es
Los
hiper
enlac
es
son
enlac
es de
hiper
texto
que
nos
van a
permi
tir
acced
er de
mane
ra
direct
aa
otros
docu
ment
os
HTML
indep
endie
ntem
ente
de su
ubica
ción,
oa
otras
zonas
dentr
o de
nuest
ro
propi
o
docu
ment
o.
Enlac
es a
otras
págin
as:
Con
este
tipo
de
hiper
enlac
es
vamo
sa
poder
acced
er
tanto
a
otras
págin
as
que
estén
ubica
das
dentr
o
de
nuest
ro
propi
o
siste
ma
como
a
págin
as
ubica
das
en
punto
s muy
dista
ntes
del
globo
. El
forma
to de
este
tipo
de
hiper
enlac
es es:
Texto
del
hiper
enlac
e
Con
el
atrib
uto
href
vamo
sa
espec
ificar
la
URL
del
docu
ment
o al
que
se
prete
nde
acced
er. El
texto
conte
nido
entre
las
etiqu
etas
de
comie
nzo y
fin
nos
va a
servir
para
defini
r el
hiper
enlac
e, por
lo
que
deber
ía ser
clarifi
cador
del
conte
nido
del
docu
ment
o con
el
que
vamo
sa
enlaz
ar.
Esta
defini
ción
apare
cerá
resalt
ada
norm
alme
nte
en
azul y
subra
yada.
En la
mayo
ría de
los
nave
gador
es
esta
defini
ción
del
hiper
enlac
e es
sensi
ble,
por lo
que
cuan
do el
curso
r
pasa
por
enci
ma
del
mism
o
este
camb
ia de
aspec
to
indic
ándol
o.
Veam
os un
ejem
plo
en la
Tabla
23.
Ejem
plo
Resul
tado
Págin
a
inicial
de
Villa
Eidos
Págin
a
inicial
de
Villa
Eidos
Tabla
23
Si
situa
mos
el
ratón
enci
ma
del
hiper
enlac
ey
pulsa
mos,
el
nave
gador
acced
erá a
la
págin
a
Web
indic
ada
por
href,
es
decir,
acced
erá a
la
págin
a
situa
da en
http:/
/www
.eido
s.es.
Igual
ment
e
podrí
amos
indic
ar el
hiper
enlac
e por
medi
o de
una
imag
en. Si
esta
imag
en
tiene
defini
do
un
borde
, este
apare
cerá
resalt
ado
en
color
azul.
El
forma
to
corre
spon
dient
e
sería:
y
tambi
én
texto
{IMG:
Imag
e}
{src:
Sourc
e}
Veam
os un
ejem
plo
en la
Tabla
24
Ejem
plo
Resul
tado

Villa
Eidos
Villa
Eidos
Tabla
24
Si
pulsa
mos
sobre
la
imag
en, el
nave
gador
acced
erá a
la
págin
a
Web
inicial
de
Villa
Eidos
.
Enlac
es
dentr
o de
la
mism
a
págin
a:
Este
tipo
de
hiper
enlac
es
nos
va a
permi
tir
marc
ar
distin
tas
zonas
del
docu
ment
o
activ
o con
el
objet
o
de
tener
un
acces
o
direct
oa
las
mism
as.
Una
buen
a
utilid
ad de
este
tipo
de
enlac
es
radic
a en
la
creac
ión
de
índic
es
para
docu
ment
os
largo
s, de
forma
que
si
pinch
amos
en el
hiper
enlac
e
corre
spon
dient
e al
título
de un
capít
ulo
deter
mina
do, el
nave
gador
saltar
á
auto
mátic
amen
te
hasta
el
comie
nzo
de
dicho
capít
ulo.
Para
la
creac
ión
de
estos
hiper
enlac
es,
debe
mos
segui
r dos
pasos
:
21
1.
Marc
ar las
distin
tas
zonas
o
secci
ones
del
docu
ment
o.
Esto
lo
hare
mos
con el
pará
metr
o
name
:
Texto
de la
secci
ón
A
cada
secci
ón le
asign
arem
os un
identi
ficad
or
distin
to,
para
poder
refer
encia
rlas
poste
riorm
ente
de
mane
ra
inequ
ívoca.
2.
Espec
ificar
un
enlac
ea
cada
una
de las
secci
ones
que
haya
mos
defini
do.
Texto
del
enlac
e a la
secci
ón
Si
pinch
amos
en
este
enlac
e, el
nave
gador
saltar
á
auto
mátic
amen
te a
la
secci
ón
corre
spon
dient
e.
Veam
os un
ejem
plo
sencil
lito
en la
Tabla
25,
pero
demo
strati
vo,
de
todo
lo
que
acaba
mos
de
explic
ar.
Ejem
plo
Resul
tado
Capít
ulo1
Capít
ulo 1
........
........
........
......
........
........
........
........
........
........
...
........
........
.
........
........
......
........
......
........
......
Capít
ulo 1
Capít
ulo 1
Tabla
25
Si
nos
crea
mos
una
págin
a
HTML
con
distin
tos
capít
ulos,
podrí
amos
crear
una
secci
ón
para
cada
uno
de
ellos,
de
forma
que
si
pinch
amos
en el
hiper
enlac
e
corre
spon
dient
e al
Capít
ulo 1,
el
nave
gador
saltar
ía
direct
amen
te a
la
secci
ón
corre
spon
dient
e al
Capít
ulo 1.
Adem
ás de
los
dos
tipos
de
hiper
enlac
es
vistos
,
pode
mos
crear
hiper
enlac
es
que
nos
permi
tan
acced
er
a
cualq
uiera
de
los
servic
ios
de
Inter
net.
Es
decir,
podrí
amos
indic
ar
enlac
es a
servi
dores
FTP,
GOPH
ER,
NEWS
,
MAILT
O,
etc.
Para
ello
tendr
íamos
que
indic
ar la
URL
corre
spon
dient
e al
servic
io
al
cual
quere
mos
acced
er,
como
ya
vimos
en el
prime
r
capít
ulo
de
este
manu
al.
Imág
enes
Podre
mos
dar
un
aspec
to
much
o más
vistos
oa
nuest
ros
docu
ment
os
HTML
con la
inclus
ión
de
imág
enes.
Los
forma
tos
de
imag
en
que
todos
los
nave
gador
es
recon
ocen
son:
gif y
jpg.
Si
quere
mos
insert
ar
una
imag
en en
otro
forma
to, el
visor
deber
ía
dispo
ner
del
progr
ama
exter
no
que
permi
ta su
visual
izació
n. De
todas
forma
s,
una
buen
a
soluci
ón es
utiliz
ar
algún
progr
ama
de
trata
mient
o de
imág
enes
que
nos
convi
erta
la
imag
en a
uno
de
los
forma
tos
menc
ionad
os
anter
iorme
nte.
El
forma
to gif
es
más
reco
mend
ado
para
la
inclus
ión
de
icono
s,
gráfic
as,..
y el
forma
to jpg
para
el
caso
de
insert
ar
fotog
rafías
en
nuest
ras
págin
as.
La
etiqu
eta
que
nos
va a
permi
tir la
inser
ción
de
imág
enes
es .
La
imag
en se
insert
ará
justo
en
el
punto
del
docu
ment
o
dond
e
coloq
uemo
s
dicha
etiqu
eta,
pudie
ndo
insert
ar
imág
enes
dentr
o de
listas
,
tabla
so
form
ulario
s.
El
forma
to de
la
etiqu
eta,
con
sus
posib
les
argu
ment
os, es
el
sigui
ente:

src="
URL
de la
imag
en".
El
atrib
uto
src
nos
va
servir
para
indic
ar la
URL
de la
imag
en
que
quere
mos
insert
ar, es
decir,
el
servi
dor y
cami
no
hasta
llegar
al
ficher
o de
la
imag
en.
No
será
neces
ario
que
la
imag
en
que
quere
mos
insert
ar en
nuest
ro
docu
ment
o
esté
en el
orden
ador
local,
aunq
ue sí
es
reco
mend
able
ya
que
el
acces
oa
las
mism
as
pued
e ser
más
lento.
Por
tanto
, es
una
buen
a
prácti
ca
copia
r
todas
las
imág
enes,
que
vaya
mos a
inclui
r en
nuest
ro
docu
ment
o
HTML
, al
orden
ador
local.
Tabla
26

alt="
Texto
alter
nativ
o"
.Nos
va a
permi
tir
mostr
ar un
texto
alter
nativ
o
para
el
caso
en
que
el
nave
gador
no
sea
capaz
de
mostr
ar la
imag
en.
Su
uso
es
muy
reco
mend
able
ya
que
cuan
do
publi
quem
os
nuest
ras
págin
as en
la
WWW
, no
sabre
mos
desd
e qué
tipo
de
nave
gador
es
acced
erán
los
inter
nauta
sa
nuest
ras
págin
as.
En la
Tabla
27
vamo
sa
ver
un
ejem
plo.
Si
usas
un
nave
gador
que
no
tiene
ningú
n
probl
ema
para
la
visual
izació
n de
imág
enes,
desac
tiva
temp
oralm
ente
la
opció
n de
mostr
ar
imág
enes,
prueb
a el
ejem
plo
que
mues
tra la
Tabla
27 y
comp
áralo
con el
anter
ior.
Tabla
27
23

align
=top/
middl
e/bot
ton
left/ri
gth.
Nos
permi
te
indic
ar
cómo
se
aline
ará el
texto
que
siga a
la
imag
en.

top:
aline
a el
texto
con la
parte
super
ior de
la
imag
en.

middl
e:
con la
parte
centr
al.

botto
m:
con la
parte
inferi
or.

left:
imag
en
aline
ada a
la
izqui
erda
de la
págin
a.

rigth:
imag
en
aline
ada a
la
derec
ha de
la
págin
a.
Tabla
28
En el
caso
de
que
el
texto
que
acom
paña
a la
imag
en
tenga
más
de
una
línea,
tan
sólo
la
prime
ra
será
la
que
se
aline
ará
segú
n
algun
a de
las
anter
iores
aline
acion
es, el
resto
de
líneas
se
inclui
rán
debaj
o de
la
imag
en
qued
ando
un
efect
o
basta
nte
feo.
Para
solve
ntar
esto,
están
las
aline
acion
es
LEFT
(imag
en
aline
ada a
la
izqui
erda
de la
págin
a)
y
RIGH
T
(imag
en
aline
ada a
la
derec
ha de
la
págin
a).
Las
cuale
s
permi
ten
que
la
imag
en se
insert
e
dentr
o del
párra
fo
que
la
rodea
,
produ
ciend
o un
result
ado
much
o más
profe
sional
en la
integ
ració
n de
texto
e
imág
enes.
Estas
dos
aline
acion
es no
se
podrá
n
usar
en
comb
inació
n con
las
anter
iores.
Veam
os
algun
os
ejem
plos
en la
Tabla
29
Vemo
s
como
en el
prime
r
ejem
plo la
segu
nda
línea
de
texto
apare
ce
debaj
o de
la
imag
en
produ
ciend
o un
efect
o
meno
s
vistos
o que
en
los
dos
ejem
plos
sigui
entes
.
Tabla
29

borde
r="Ta
maño
"
Permi
te
añadi
rle un
borde
a la
imag
en
del
tama
ño
que
le
espec
ifique
mos.
Si la
imag
en
forma
parte
de un
hiper
enlac
e
esta
apare
cerá
con
un
borde
del
color
del
hiper
enlac
e. Si
no
deseá
ramo
s que
apare
zca
este
borde
tendr
íamos
que
espec
ificar
borde
r=0.
Tabla
30

heigh
t="Ta
maño
".
Permi
te
espec
ificar
el
alto
de la
imag
en,
en
punto
s de
panta
lla
(pixel
s) o
en %
del
tama
ño
del
docu
ment
o

width
="Ta
maño
".
Con
este
argu
ment
o
espec
ificar
emos
el
anch
o al
que
mostr
arem
os la
imag
en:
en
punto
s de
panta
lla
(pixel
s) o
en %
del
tama
ño
del
docu
ment
o
En el
segu
ndo
de
los
ejem
plos
de la
Tabla
31, el
anch
o de
la
imag
en se
ha
exten
dido
al
50%
del
total
del
anch
o de
la
celda
dond
e
está
conte
nida
la
imag
en. Si
prueb
as
este
ejem
plo
en tu
docu
ment
o
HTML
, la
imag
en se
exten
derá
horiz
ontal
ment
e
hasta
ocup
ar el
50%
del
anch
o de
la
págin
a.
25
Tabla
31

hspac
e="M
argen
"
{hsp
ace:
Horiz
ontal
Spac
e}.
Permi
te
espec
ificar
el
núme
ro de
espac
ios
horiz
ontal
es
(en
punto
s)
que
separ
arán
a la
imag
en de
cualq
uier
elem
ento
que
le
siga
o le
antec
eda.

vspac
e="M
argen
"
{vspa
ce:
Vertic
al
Spac
e}.
Con
este
argu
ment
o
espec
ificar
emos
el
marg
en
vertic
al (en
punto
s)
que
habrá
entre
la
imag
en y
cualq
uier
otro
elem
ento
de
nuest
ro
docu
ment
o.
Tabla
32
Elem
entos
del
lengu
aje II
Tabla
s
HTML
nos
va a
permi
tir la
inclus
ión
de
cualq
uiera
de
los
elem
entos
de
nuest
ra
págin
a
(text
o,
imág
enes,
hiper
enlac
es,
listas
,
etc.),
dentr
o de
una
tabla.
Graci
as a
lo
cual
conse
guire
mos
dar
una
mayo
ry
mejor
estru
ctura
ción a
los
conte
nidos
de
nuest
ros
docu
ment
os.
Adem
ás, la
defini
ción
de las
tabla
s en
HTML
es
muy
abier
ta,
pudie
ndo
en
cualq
uier
mom
ento
redim
ensio
nar la
tabla,
es
decir,
camb
iar su
núme
ro de
filas
o de
colu
mnas
,
camb
iar el
tama
ño de
algun
a de
sus
celda
s,
etc.
La
etiqu
eta
que
nos
va a
permi
tir la
defini
ción
de
tabla
s es
.
El
forma
to
gener
al de
la
etiqu
eta
sin
ningú
n
argu
ment
o, es
el
sigui
ente:

Conte
nido
de la
celda
:
Defini
ción
de las
filas
de la
tabla.
Por
cada
etiqu
eta
que : para definir
ó q l
incluy celdas
D u a
amos de datos. En
e e
se u este caso
crear f i s tampoco es
á una i n a necesario
fila n cl r indicar las
en la i u e etiquetas de
tabla. c y m cierre.
No i a o Todas estas
será ó m s etiquetas
neces n o tienen sus
p
ario s respectivos
d a
indic s argumentos
e r
ar la e . Pero antes
a
etiqu c c de analizar
eta a r c cada uno de
de d e r ellos,
cierre a a e vamos a ver
. r a un ejemplo
u
3. á r muy
n
u sencillito,
a c
n en la Tabla
e
d a 33, que nos
l
e c creará una
d
l e tabla de una
a
a l sola celda
s
s d (1
a d fila X 1
c d e columna = 1
e e celda). Para
l n t ello
d tr i usaremos la
a o p etiqueta de
s d o creación de
e tabla
d l c con el argumento border=1
(nos dibuja un borde de
e a a tamaño 1 alrededor de la
tabla). Ejemplo Resultado
fi b Mi primera tabla
l Mi primera tabla Tabla 33 Vamos
e
a l
ahora a analizar lo distintos
argumentos que componen las
a c etiquetas de la tabla,
analizándolos desde lo general
t c e (la definición de la tabla), hasta
lo específico (la definición de las
a o r celdas): 1. Definición de la tabla:
.
b rr a ......
Contenido .
l e , .....

a s  border="n". Si especificamos
e
. p
este argumento, se dibujará un

s borde alrededor de la tabla del

ancho que le indiquemos, como

V o muestra la Tabla 34. Ejemplo

d Resultado

e n Mi primera
e tabla
m d Mi primera tabla 28 Tabla 34 
c cellpadding="n". Indica el
o i espacio en puntos que separa el
i contenido de la celda con el
s e borde de la misma, siendo 1 por

n r defecto. Ejemplo Resultado

Mi
q t , primera
tabla
u e c Mi primera tabla Tabla 35 
e . e cellspacing="n". Indica el
espacio en puntos que separa a
e L l las celdas contenidas dentro de
la tabla, siendo 2 por defecto. 
s a d width="n ó %". Indica la
anchura de la tabla en puntos o
t e a en % en función del ancho de la
ventana del visualizador. Si no
a ti s indicamos este argumento, el
ancho de la tabla se ajustará al

s q tamaño del contenido de las

c celdas. Esto es lo que ha

u ocurrido en el último ejemplo

e u que hemos realizado. Veamos

e un ejemplo en el Código fuente

t y 11. El resultado se muestra en la

t Tabla 36.

i o Mi primera
a tabla
q Código fuente 11 Mi primera
c tabla Tabla 36  height="n ó %".
u Nos permite definir la altura de
o la tabla en puntos o en % de la
e altura de la ventana del
n visualizador. Si indicamos este
t argumento, lo recomendable es
t darlo en puntos ya que es más
a complicado adecuarnos a la
e altura de la ventana del
s visualizador. Al igual que en el
n caso anterior, si no
especificamos este argumento la
e i altura se adecuará al contenido
de las celdas. El Código fuente
s d 12 muestra un ejemplo y la
Tabla 37 nos muestra el
t o resultado.
Mi primera
á tabla
e Código fuente 12 Mi primera
n tabla Tabla 37  bgcolor=
s "#rrggbb" o "nombre del color".
Nos permite definir un color 29
c t de fondo para todas las celdas
de la tabla. Más adelante
o á veremos como podemos definir
colores específicos para cada
n una de las celdas por separado.
r Ejemplo Resultado
t Mi primera
e tabla
e Mi primera tabla Tabla 38 2.
s Definición de las filas de la
n tabla:
a
i Antes de Co la para la
l empezar a mo us creación
d descifrar el ya ar de celdas
t significado expl e de datos.
a a de cada uno
de los
ica m Vamos a
mos os completar
s d argumentos
de esta
ant pa nuestro
erio ra ejemplo

o etiqueta rme cr inicial

d vamos a ver
un ejemplo,
nte, ea añadiéndo
la r le tres

e e en la Tabla
39 de cómo
etiq cel filas de
uet da dos celdas

n n se
construiría
a s cada una
de (3 filas X

t una tabla tip 2

n con dos filas o columnas

r (2 filas X 1 ca = 6

e columna = 2
celdas).
be celdas).
ce Tabla 42
o
g Ejemplo
Resultado
ra Ejemplo
y Resultado
la Cab Cab
d r Primera
fila eti ecer ecer
qu a 1 a 2
e i Segunda
fila et Cel Cel
a da da
t Primera fila
o Segunda fila 1.1 1.2
a Tabla 39  Cel Cel
t align="left/r da da
, ight/center". 2.1 2.2
r Con este
argumento
Cabecera
1
a d vamos a
indicar la
Cabecera
2 Celda
e alineación 1.1 Celda
e horizontal 1.2 Celda
j (left:izquier 2.1 Celda
t da, 2.2 Tabla
a right:derech 42 
i a, align="lef
n center:centr t/right/cen
q ado) del ter/justify
d contenido ". Con
u de todas las este
o celdas de la argumento
e fila
correspondi
vamos a
indicar la
t l ente.
Posteriorme
alineación
horizontal
a a nte veremos
como
(left:
izquierda,
podremos right:
d e especificar
la alineación
derecha,
center:
e t del
contenido
centrado,
justify:just
de cada ificado)
d i celda de la
fila por
del
contenido
e q separado.
Veamos un
de cada
celda por

f u ejemplo en
el Código
separado.
Su

i e fuente 13 y
su
significad
o es el

n t correspondi
ente
mismo
que en la

i a resultado en
la Tabla 40.
etiqueta

c Prime
ra fila
i Segu
nda
ó fila
Código
n fuente 13
Primera fila
Segunda fila
d Tabla 40 
valign="top/
e middle/botto
m". Con
este
f argumento
vamos a
i indicar la
alineación
l vertical
(top:arriba,
a middle:centr
ado,
, bottom:abaj
o) del
contenido
d de todas las
celdas de la
e fila
correspondi
ente.
f Posteriorme
nte veremos
o como
podremos
r especificar
la alineación
m del
contenido
a de cada
celda de la
fila por
separado. 30
  bgcolor=
"#rrggbb" o
"nombre del
color". En
este caso,
este
q argumento
nos
u permitirá
definir un
e color de
fondo para
todas las
p celdas de
una fila,
o veamos un
ejemplo en
r la Ejemplo
Resultado
c Primera
fila
a Segunda
fila
d Primera fila
Segunda fila
a Tabla 41 3.
Definición
de las celdas
e de la tabla:
ó
t .
valign="top/
i middle/botto
m". Con
q este
argumento
u vamos a
indicar la
e alineación
vertical
t (top:arriba,
middle:centr
a ado,
bottom:abaj
o) del
contenido
o de cada
celda. 
bgcolor=
"#rrggbb" o
"nombre del
color". En
este caso,
podremos
definir un
color de
fondo para
cada una de
las celdas de
manera
independien
te. 
width="n ó
%". Indica
el ancho de
la celda en
puntos o en
% en
función del
tamaño de la
tabla. 31
Ejemplo
Resultado
Cabe Cabe
cera cera
1 2
Celd Celd
a 1.1 a 1.2
Celd Celd
a 2.1 a 2.2
Cabecera 1
Cabecera 2
Celda 1.1
Celda 1.2
Celda 2.1
Celda 2.2
Tabla 43 
rowspan="n
". Con este
argumento
podemos
lograr que
una celda
concreta
abarque más
de una fila,
ya sabemos
que por
defecto una
celda ocupa
una sola
fila.
Ejemplo
Resultado
Cabe Cabe
cera cera
1 2
 Celd
Celd a 1.2
a 1.1 Celd
a 2.2
Cabecera 1
Cabecera 2
Celda 1.1
Celda 1.2
Celda 2.2
Tabla 44 
colspan="n"
. Con este
argumento
podemos
lograr que
una celda se
expanda a
más de una
columna.
Ejemplo
Resultado
Cabe Cabe
cera cera
1 2
Celd Celd
a 1.1 a 1.2
Celda 2.2
Cabecera 1
Cabecera 2
Celda 1.1
Celda 1.2
Celda 2.2
Tabla 45
Para
finalizar
este tema
sobre la
creación de
tablas,
vamos a ver
el ejemplo
que aparece
en el Código
fuente 14 y
su resultado
en la Tabla
46.
Título
Ca
Ca Ca
bec
bec bec
era
era era
3
1 2
32
Cel Cel Cel
da da da
1.1 1.2 1.3
Cel Cel
da da
Cel 2.2 2.3
da
2.1 Cel Cel
da da
3.2 3.3
Código
fuente 14
Título
Cabecera 1
Cabecera 2
Cabecera 3
Celda 1.1
Celda 1.2
Celda 1.3
Celda 2.1
Celda 2.2
Celda 2.3
Celda 3.2
Celda 3.3
Tabla 46
Formularios
El
formulario
es el
elemento de
HTML que
nos va a
permitir
interactuar
con los
visitantes de
nuestras
páginas
web, de
forma que
podemos
solicitarle
información
al usuario y
procesarla.
De esta
forma,
podremos
crear en
nuestras
páginas:
encuestas
para
solicitar la
opinión del
visitante
sobre algún
tema e
incluso
sobre el
contenido
de nuestra
propia
página web,
cuestionario
s para
evaluar la
asimilación
de
contenidos
sobre un
tema
concreto
que se trate
en la página,
etc. El
contenido
de la
información
introducida
por medio
del
formulario
será enviado
a la
dirección
URL donde
resida el
programa
que se
encargará de
procesar los
datos. A este
tipo de
programas
externos se
les
denomina
programas
CGI
(Common
Gateway
Interface).
La etiqueta
HTML que
nos va a
permitir la
creación de
formularios
es
. Su formato
es el
siguiente:
.....
Elementos
del
formulario ..
...

action="UR
L del
programa
que trata el
formulario".
A través de
este
argumento
indicaremos
, como ya
hemos
mencionado
, la
dirección
del fichero
de programa
que va a
tratar la
información
suministrada
por el
formulario.
También
podríamos
incluir como
URL que
trata el
formulario
una
dirección de
correo
electrónico.
Por tanto, el
valor de este
argumento
podría ser:
action
="mailto:
dirección de
correo".
Nota: Esta
opción sólo
funciona
adecuadame
nte con el
navegador
Netscape.
Con el
Explorer
este envío
daría como
resultado un
correo en
blanco. Para
que esta
opción
funcione de
manera
independien
te del
navegador
que se esté
utilizando se
ha de
emplear un
programa
externo que
realice este
proceso. 33

method="po
st/get". A
través de
este
argumento
indicaremos
el método
empleado
para
transferir la
información
generada
por el
formulario.
Si
indicamos
post, se
producirá la
modificació
n del
documento
destino,
como es el
caso de
enviar la
información
a una
dirección de
correo
electrónico.
Mediante el
método get
no se
producirán
cambios en
el
documento
destino.
Dentro de
un
formulario
podremos
incluir
cualquier
texto o
instrucción
HTML de
las vistas a
lo largo de
los capítulos
anteriores
además,
claro está,
de los
elementos
típicos de un
formulario:
cajas de
texto,
botones de
selección,
menús de
opciones,
etc. Vamos a
ver cómo se
incluirán
estos
elementos
en un
formulario.
Entrada
básica de
datos Para
definir los
distintos
tipos de
campos
básicos de
entrada de
datos
usaremos la
etiqueta

. El formato
es el
siguiente:
Valor inicial

 El
argumento
type
determinará
el tipo de
campo de
entrada que
estamos
insertando.
A
continuació
n
describirem
os cada uno
de ellos. 
El
argumento
name
especifica el
nombre de
la variable
que tomará
el valor
introducido
en el campo.
 El
argumento
value
especifica el
valor por
defecto que
tendrá el
campo.
Vamos a
continuació
n a describir
los distintos
tipos
campos de
entrada, que
vendrán
dados por
los valores
del
argumento
type: Texto
corto:
type=text
Con este
argumento
vamos a
indicar que
el campo a
introducir
será un
texto. El
formato
sería:
Valor inicializa

El
significado
de los
nuevos
atributos es:

size="Tama
ño".
Indicaremos
el tamaño en
caracteres
de la
ventana de
introducción
de texto. 
maxlength=
"Longitud
máxima".
Indicaremos
el número
máximo de
caracteres a
introducir
en el campo.
Vamos a ver
un ejemplo
en la Tabla
47. 34
Ejemplo
Resultado
Nombre:
Texto por defecto

Tabla 47
Claves:
type=passw
ord Con este
argumento
indicamos
que el
campo a
introducir
será una
palabra
clave, por lo
que los
caracteres
que se
introduzcan
serán
sustituidos
por
asteriscos en
la
visualizació
n por
pantalla. El
formato es:
*****************

El
significado
de los
distintos
argumentos
es el mismo
que en el
caso
anterior.
Veamos un
ejemplo: en
la Tabla 48.
Ejemplo
Resultado
Clave:
**********

Tabla 48
Botones de
selección:
type=checkb
ox El
checkbox es
un botón
que presenta
dos estados:
marcado (1)
y
desmarcado
(0).
Podremos
variar su
estado
simplemente
pinchando
con el ratón.
El formato
es: Si
especificam
os el
argumento
checked, el
botón
aparecerá
marcado por
defecto. Si
incluimos el
argumento
value,
cuando el
botón esté
marcado su
variable
asociada
adquirirá el
valor dado
por value.
Veamos un
ejemplo en
la Tabla 49.
Ejemplo
Resultado
Opción
1
Opción
2 Tabla 49
35
Selección
entre varias
opciones:
type=radio
Este
argumento
se usa
cuando hay
que hacer
una
selección
entre varias
alternativas
excluyentes,
pudiéndose
seleccionar
únicamente
una de las
alternativas.
Debemos
incluir una
etiqueta
radio por
cada una de
las posibles
alternativas.
El formato
es: Si
especificam
os el
argumento
checked, el
botón
aparecerá
marcado por
defecto. En
este caso
únicamente
uno de los
botones de
radio podrá
aparecer
marcado, ya
que se usa
para el caso
de opciones
excluyentes.
Cuando un
botón esté
seleccionad
o la variable
asociada a la
lista de
botones
adquirirá el
valor dado
por value.
Veamos un
ejemplo en
la Tabla 50.
Ejemplo
Resultado
Opción
1
Opción
2
Opción
3 Tabla 50
En este
ejemplo la
variable
"Var5"
tendrá el
valor Op2.
Campos
ocultos:
type=hidden
Este tipo de
campos no
son visibles
para el
usuario. Su
uso tiene
sentido en el
caso de
enviar algún
tipo de
información
que no deba
ser
visualizada
o variada
por el lector
de nuestra
página Web.
El formato
es:
Valor

Con esta
etiqueta
asignaríamo
s a la
"Variable"
referenciada
por name el
"Valor" de
value y se
mandaría
junto con el
formulario
sin que el
usuario de la
página se
entere de
nada.
Veamos un
ejemplo en
el Código
fuente 15.
tutankamon

Código
fuente 15 36
Botón de
envío de
datos:
type=submit
Con este
argumento
especificam
os un botón
en el que al
pulsar, los
datos serán
enviados al
programa o
dirección de
correo
encargada
de procesar
la
información
recogida por
el
formulario.
El formato
es:
Mensaje a mostrar

En este caso
el parámetro
value indica
el mensaje
que se
mostrará en
el botón.
Veamos un
ejemplo en
la Tabla 51.
Ejemplo
Resultado
Enviar los Datos

Tabla 51
Botón
gráfico de
envío de
datos:
type=image
Con este
argumento
especificam
os un botón
de tipo
imagen en el
que, al igual
que con el
botón
anterior, si
pulsamos en
la imagen
los datos
serán
enviados al
programa o
dirección de
correo
encargada
de procesar
la
información
recogida por
el
formulario.
Su formato
es el
siguiente:

Con el
parámetro
src
especificam
os la URL
de la imagen
que será
insertada en
el botón. En
este caso, en
la variable
referenciada
por name se
almacenarán
las
coordenadas
del punto de
la imagen
donde se
halla
pinchado
(de forma
que estas
coordenadas
podrían ser
procesadas
por el
programa
que recibe
los datos del
formulario).
Botón de
borrado de
datos:
type=reset
Con este
argumento
especificam
os un botón
que al ser
pulsado
borrará el
contenido
actual de
todos los
campos,
dejándolos
con sus
valores por
defecto. Su
formato es:
Texto del botón

Con el
parámetro
value
especificam
os el texto
que
etiquetará al
botón.
Ejemplo
Resultado
Borrar datos

Tabla 52 37
Entrada
datos en
múltiples
líneas: En
un
formulario
también
podremos
introducir
un campo de
texto que
abarque
varias
líneas. Para
ello
usaremos la
etiqueta

. Su formato
es el
siguiente:
Contenido por defecto.

Los
argumentos
rows y cols
nos van a
permitir
especificar,
respectivam
ente, el
número de
filas de
texto
visibles y el
número de
columnas de
texto
visibles en
el campo.
Ejemplo
Resultado
Contenido por defecto.

Tabla 53
Entrada de
datos a
través de
campos de
selección
Con los
campos de
selección
podremos
desplegar
una lista de
opciones,
entre las que
podremos
seleccionar
una. Para
ello
usaremos la
etiqueta

. Su formato
es el
siguiente:
Primera Opción

Figura 1 
La variable
referenciada
por name
tomará el
valor(value)
de la opción
seleccionada
.  Si
especificam
os el
argumento
múltiple, se
mostrarán
todas la
opciones en
forma de
tabla. El
número de
opciones
visibles en
la tabla
vendrá dado
por el
argumento
size. 38 
Con la
etiqueta
iremos
definiendo
cada una de
las opciones
de la lista. 
El
argumento
selected va a
determinar
cuál es la
opción por
defecto.
Para
finalizar
vamos a ver
el Código
fuente 16,
correspondi
ente a una
encuesta
realizada
por la
editorial
ficticia
EditoPc, y
en la Figura
2
observamos
el resultado
del
formulario.

EDITORIA
L EditoPc

Nombre:
E_mail:

Deseas
recibir
información

sobre:

Internet
Programació

n
Sist.Operati

vo
Ofimática

¿Te conectas
a Internet
desde casa?:

Sí
No

¿Qué uso le
das a tu
ordenador?:
Profesional
Doméstico
Ocio/Juego s

Característic
as de tu PC:

Enviar datos

Borrar
datos

Códi
go fuente 16
Figura 2 39
52
Elementos
del lenguaje
III Frames
Las frames
son una
utilidad del
HTML que
nos permite
dividir la
ventana del
navegador
en
diferentes
subventanas
, que podrán
ser
manipuladas
de manera
independien
te. Esto nos
permitirá
mostrar una
página web
diferente en
cada una de
la
subventanas
o frames.
Estructura
de un
documento
con frames:
Un
documento
con frames
se estructura
de manera
diferente a
un
documento
HTML
normal. Así,
en este tipo
de
documentos
no aparecerá
la etiqueta

. En su lugar
se incluirá la
etiqueta
dentro de la
cual se
definirán las
distintas
frames que
se incluyan
en el
documento.
La
estructura
general de
un
documento
de este tipo
sería, por
tanto:
Cabecera
Definición
de la
distintas
frames
Instruccione
s HTML
Puede darse
el caso de
que
programemo
s nuestro
documento
con frames
siguiendo la
estructura
anterior y
que el
navegador
que se use
para leer el
documento
no soporte
la
característic
a de frames,
con lo cual
no se
mostrará
nada de lo
indicado
entre las
etiquetas y .
Para
solucionar
este
problema,
todas las
instruccione
s HTML
incluidas
entre las
etiquetas y
serán
ejecutadas
por los
navegadores
que no
soportan las
frames. La
sintaxis de
la etiqueta
es:
54
Tabla 54
Definición
de cada una
de las
frames
Como ya
sabemos,
cada una de
las frames
que
incluyamos
en nuestro
documento
vendrá
definida por
la etiqueta
correspondi
ente. Su
formato es
el siguiente:
Ejemplo
Resultado
Tabla 55
Elementos
multimedia
La inclusión
de
elementos
multimedia
en nuestros
documentos
HTML
dependerá
de la
capacidad
del
navegador
para
soportar
estas
característic
as, como
son la
posibilidad
de mostrar
vídeo o
sonidos de
fondo en
nuestras
páginas
web. El
Explorer de
Microsoft
incluye
etiquetas
que
permitirán
explotar su
posibilidade
s
multimedia,
pero hay
que tener en
cuenta que
éstas no son
estándar.
Sonido de
fondo
{BGSOUN
D:
Background
Sound} Si
insertamos
esta etiqueta
en nuestro
documento,
ser
reproducirá
el sonido
especificado
como
sonido de
fondo de
nuestra
página web.
Con el
argumento
src
especificare
mos el
fichero de
sonido que
se va a
reproducir
(.waw,
.mid). Con
el
argumento
loop
indicaremos
el número
de veces (n)
que se
reproducirá
el sonido. Si
indicamos
loop=infinit
e el sonido
se
reproducirá
de manera
indefinida
hasta
abandonar
la página.
Vemos un
ejemplo en
el Código
fuente 17.
Código
fuente 17
Reproducció
n de vídeo
56 En

este caso
podemos
reproducir
un vídeo en
formato .avi
dentro de
nuestro
documento
HTML. Con
el
argumento
dynsrc
especificare
mos el
fichero .avi
a reproducir.
El
argumento
loop indica
el número
de veces que
se
reproducirá
el video.
Con
argumento
start
indicaremos
si la
secuencia de
video
empezará al
abrir el
fichero
(fileopen) o
cuando el
cursor del
ratón esté
encima
(mouseover)
. Si
especificam
os el
argumento
controls
aparecerán
los botones
de control
de vídeo.
Veamos el
Código
fuente 18.
Código

fuente 18
Inserción de
cualquier
tipo de
fichero Con
esta etiqueta
podremos
insertar
cualquier
tipo de
fichero en
nuestro
documento:
fichero de
sonido, de
video,
gráfico,etc.
Como es
lógico, el
navegador
deberá tener
la capacidad
de leer el
tipo de
fichero
especificado
 o ayudarse
de algún
otro
programa
externo que
le permita
visualizar el
fichero. En
caso
contrario
dará un
mensaje de
error
informándo
nos de que
no puede
leer el
fichero
especificado
. Con el
argumento
src
indicamos la
URL del
fichero a
mostrar.
Con los
argumentos
width y
height
indicaremos
el tamaño
del objeto
insertado,
estos
argumentos
son
opcionales.
1. JEE Java Platform, Enterprise Edition o Java EE (anteriormente conocido como Java 2 Platform,
Enterprise Edition o J2EE hasta la versión 1.4), es una plataforma de programación—parte de la Plataforma
Java—para desarrollar y ejecutar software de aplicaciones en Lenguaje de programación Java con
arquitectura de N niveles distribuida, basándose ampliamente en componentes de software modulares
ejecutándose sobre un servidor de aplicaciones. La plataforma Java EE está definida por una especificación.
Similar a otras especificaciones del Java Community Process, Java EE es también considerada
informalmente como un estándar debido a que los suministradores deben cumplir ciertos requisitos de
conformidad para declarar que sus productos son conformes a Java EE; estandarizado por The Java
Community Process / JCP. Java EE incluye varias especificaciones de API, tales como JDBC, RMI, e-mail,
JMS, Servicios Web, XML, etc. y define cómo coordinarlos. Java EE también configura algunas
especificaciones únicas para Java EE para componentes. Estas incluyen Enterprise JavaBeans, servlets,
portlets (siguiendo la especificación de Portlets Java), JavaServer Pages y varias tecnologías de servicios
web. Esto permite al desarrollador crear una Aplicación de Empresa portable entre plataformas y escalable, a
la vez que integrable con tecnologías anteriores. Otros beneficios añadidos son, por ejemplo, que el servidor
de aplicaciones puede manejar transacciones, la seguridad, escalabilidad, concurrencia y gestión de los
componentes desplegados, significando que los desarrolladores pueden concentrarse más en la lógica de
negocio de los componentes en lugar de en tareas de mantenimiento de bajo nivel. Las razones que empujan
a la creación de la plataforma JEE son las siguientes:  Programación eficiente. Para conseguir
productividad es importante que los equipos de desarrollo tengan una forma estándar de construir múltiples
aplicaciones en diversas capas (cliente, servidor web, etc.). En cada capa necesitaremos diversas
herramientas; por ejemplo, en la capa cliente tenemos applets, aplicaciones Java, etc. En la capa web,
tenemos servlets, páginas JSP, etc. Con JEE tenemos una tecnología estándar, un único modelo de
aplicaciones, que incluye diversas herramientas; en contraposición al desarrollo tradicional con HTML,
Javascript, CGI, servidor web, etc. que implicaba numerosos modelos para la creación de contenidos
dinámicos, con los lógicos inconvenientes para la integración.  Extensibilidad frente a la demanda del
negocio. En un contexto de crecimiento de número de usuarios, es precisa la gestión de recursos, como
conexiones a bases de datos, transacciones o balanceo de carga. Además, los equipos de desarrollo deben
aplicar un estándar que les permita abstraerse de la implementación del servidor, con aplicaciones que
puedan ejecutarse en múltiples servidores, desde un simple servidor hasta una arquitectura de alta
disponibilidad y balanceo de carga entre diversas máquinas.  Integración. Los equipos de ingeniera precisan
estándares que favorezcan la integración entre diversas capas de software. La plataforma JEE implica una
forma de implementar y desplegar aplicaciones empresariales. La plataforma se ha abierto a numerosos
fabricantes de software para conseguir satisfacer una amplia variedad de requisitos empresariales. La
arquitectura JEE implica un modelo de aplicaciones distribuidas en diversas capas o niveles (tier). La capa
cliente admite diversas tipos de clientes (HTML, Applet, aplicaciones Java, etc.). La capa intermedia
(middle tier) contiene subcapas (el contenedor web y el contenedor EJB). La tercera capa dentro de esta
visión sintética es la de de aplicaciones 'backend' como ERP, EIS, bases de datos, etc. Como se puede ver, un
concepto clave de la arquitectura es el de contenedor, que dicho de forma genérica no es más que un entorno
de ejecución estandarizado que ofrece unos servicios por medio de componentes. Los componentes externos
al contenedor tienen una forma estándar de acceder a los servicios de dicho contenedor, con independencia
del fabricante. Algunos tipos de ontenedores:  Contenedor Web, también denominado contenedor
Servlet/JSP, maneja la ejecución de los servlets y páginas JSP. Estos componentes se ejecutan sobre un
servidor Enterprise Edition.  Contenedor Enterprise JavaBeans, que gestiona la ejecución de los EJB. Esta
ejecución requiere de un server EE. Los contenedores incluyen descriptores de despliegue (deployment
descriptors), que son archivos XML que nos sirven para configurar el entorno de ejecución: rutas de acceso
a aplicaciones, control de transacciones, parámetros de inicialización, etc. La plataforma JEE incluye APIs
para el acceso a sistemas empresariales:  JDBC es el API para accceso a GBDR desde Java.  Java
Transaction API (JTA) es el API para manejo de transacciones a través de sistemas heterogéneos.  Java
Naming and Directory Interface (JNDI) es el API para acceso a servicios de nombres y directorios.  Java
Message Service (JMS) es el API para el envío y recepción de mensajes por medio de sistemas de
mensajería empresarial como IBM MQ Series.  JavaMail es el API para envío y recepción de email.  Java
IDL es el API para llamar a servicios CORBA. 1.1 Servidor de aplicaciones JEE A continuación, vamos a
entrar en más detalle. Para ello, hemos subrayado en el siguiente gráfico los elementos más importantes y
usuales. La arquitectura de un servidor de aplicaciones incluye una serie de subsistemas:  Servidor HTTP
(también denominado servidor Web o servidor de páginas). Un ejemplo es el servidor Apache.  Contenedor
de aplicaciones o contenedor Servlet/JSP. Un ejemplo, Tomcat (que incluye el servicio anterior sobre
páginas)  Contenedor Enterprise Java Beans, que contiene aplicativos Java de interacción con bases de
datos o sistemas empresariales. Un ejemplo es JBoss, que contiene a los anteriores (servidor de páginas web
y contenedor de aplicacione web). Sin embargo, conviene empezar por el principio, es decir, el lenguaje
básico de interconexión: el protocolo HTTP. Este es un protocolo de aplicación, generalmente implementado
sobre TCP/IP. Es un protocolo sin estado basado en solicitudes (request) y respuestas (response), que usa por
defecto el puerto 8080:  "Basado en peticiones y respuestas": significa que el cliente (por ejemplo, un
navegador) inicia siempre la conexión (por ejemplo, para pedir una página). No hay posibilidad de que el
servidor realice una llamada de respuesta al cliente (retrollamada). El servidor ofrece la respueta (la página)
y cierra la conexión. En la siguiente petición del cliente, se abre una conexión y el ciclo vuelve e empezar: el
servidor devuelve el recurso y cierra conexión.  "Sin estado": el servidor cierra la conexión una vez
realizada la respuesta. No se mantienen los datos asociados a la conexión. Más adelante veremos que hay
una forma de persistencia de datos asociada a la "sesión". ¿Qué ocurre cuando un navegador invoca una
aplicación? El cliente (el navegador) no invoca directamente el contenedor de aplicaciones, sino que llama al
servidor web por medio de HTTP. El servidor web se interpone en la solicitud o invocación; siendo el
servidor web el responsable de trasladar la solicitud al contenedor de aplicaciones. Aspectos a considerar de
forma síncrona:  El cliente (normalmente por medio de un navegador, aunque podría ser una aplicación
Swing) solicita un recurso por medio de HTTP. Para localizar el recurso al cliente especifica una URL
(Uniform Resource Locator), como por ejemplo http://www.host.es/aplicacion/recurso.html. El URI
(Uniform Resource Identifier) es el URL excluyendo protocolo y host. Existen diversos métodos de
invocación, aunque los más comunes son POST y GET. Los veremos más adelante.  Sobre una misma
máquina podemos tener diversas instancias de un AS (Application Server), procurando que trabajen sobre
puertos diferentes, para que no se produzcan colisiones (por defecto HTTP trabaja con 8080).  Un servicio
crucial es la capacidad de recibir peticiones HTTP, para lo cual tenemos un HTTP Listener (aunque puede
tener listeners para otros protocolos como IIOP).  La solicitud llega el servidor de páginas web, que tiene
que descifrar si el recurso solicitado es un recurso estático o una aplicación. Si es una aplicación delega la
solicitud en el contenedor web (contenedor Servlet/JSP). El contenedor web gestiona la localización y
ejecución de Servlets y JSP, que no son más que pequeños programas. El contenedor web o contenedor
Servlet/JSp recibe la solicitud. Su máquina Java (JVM) invoca al objeto Servlet/JSP, por tanto nos
encontramos ante un tipo de aplicaciones que se ejecutan en el servidor, no en el cliente. No conviene
olvidar que un Servlet o un JSP no es más que una clase Java. Lo más interesante en este sentido es que: o
La JVM (generalmente) no crea una instancia de la clase por cada solicitud, sino que con una única instancia
de un Servlet/JSP se da servicio a múltiples solicitudes HTTP. Esto hace que el consumo de recursos sea
pequeño en comparación con otras opciones, como el uso de CGIs, en donde cada solicitud se resuelve en un
proceso. o Para cada solicitud se genera un hilo (thread) para resolverla (pero con una única instancia de la
clase, como hemos dicho).  Un Application Server tendrá un servidor de administración (y normalmente un
manager de la aplicación). Otros aspectos del contenedor web:  El contenedor necesita conectores que
sirven de intermediarios para comunicarse con elementos externos. Los conectores capacitan al AS para
acceder a sistemas empresariales (backends). Por ejemplo: o El Java Message Service ofrece conectividad
con sistemas de mensajeria como MQSeries. o El API JDBC da la capacidad de gestionar bases de datos
internas al AS, pero además permite ofrecer servicios como un pool de conexiones.  Es necesario una
gestión de hilos, ya que será necesario controlar la situación en la que tenemos una instancia de un
componente (por ejemplo, un servlet) que da respuesta a varias peticiones, donde cada petición se resuelve
en un hilo. 1.2 Las capas de la arquitectura En la arquitectura JEE se contemplan cuatro capas, en función
del tipo de servicio y contenedores:  Capa de cliente, también conocida como capa de presentación o de
aplicación. Nos encontramos con componentes Java (applets o aplicaciones) y no-Java (HTML, JavaScript,
etc.).  Capa Web. Intermediario entre el cliente y otras capas. Sus componentes principales son los servlets
y las JSP. Aunque componentes de capa cliente (applets o aplicaciones) pueden acceder directamente a la
capa EJB, lo normal es que Los servlets/JSPs pueden llamar a los EJB.  Capa Enterprise JavaBeans.
Permite a múltiples aplicaciones tener acceso de forma concurrente a datos y lógica de negocio. Los EJB se
encuentran en un servidor EJB, que no es más que un servidor de objetos distribuidos. Un EJB puede
conectarse a cualquier capa, aunque su misión esencial es conectarse con los sistemas de información
empresarial (un gestor de base de datos, ERP, etc.)  Capa de sistemas de información empresarial. La visión
de la arquitectura es un esquema lógico, no físico. Cuando hablamos de capas nos referimos sobre todo a
servicios diferentes (que pueden estar físicamente dentro de la misma máquina e incluso compartir servidor
de aplicaciones y JVM). A continuación, veremos algunos de los diversos escenarios de aplicación de esta
arquitectura. 1.3 Escenario desde un navegador Es el escenario canónico, donde aparecen todas las capas,
empezando en un navegador HTML/XML. La generación de contenidos dinámicos se realiza normalmente
en páginas JSP. La capa EJB nos permite desacoplar el acceso a datos EIS de la interacción final con el
usuario que se produce en las páginas HTML y JSP: XML utiliza HTTP como su soporte para el Transporte.
Una pregunta muy común es cuándo usar servlets y cuándo usar páginas JSP. La pregunta es lógica, al fin y
al cabo ambos mecanismos permiten generar contenidos dinámicos y además las JSP son servlets generados
por el servidor de aplicaciones. La norma es que la mayor parte de las interacciones con el usuario se
realizarán en las JSP debido a su flexibilidad, ya que integran de forma natural etiquetas HTML, XML, JSF,
etc. Los servlets serán la excepción (un ejemplo típico es usar un servlet como controlador: un controlador
recibe peticiones o eventos desde el interfaz de cliente y "sabe" el componente que debe invocar). 1.4
Escenario desde una aplicación Podemos considerar que tenemos como cliente una aplicación stand-alone,
que puede ser una aplicación Java o incluso un programa en Visual Basic. La aplicación puede acceder
directamente a la capa EJB o a la base de datos del EIS (esto último por medio de JDBC): 1.5 Escenario
basado en la web (web-centric application) La plataforma JEE no obliga a usar todas las capas en un
sistema. Lo esencial es escoger el mecanismo adecuado para el problema. En este sentido, en ocasiones no
hay (ni prevemos que haya) la complejidad como para requerir una capa EJB. Se denomina escenario web-
centric porque el contenedor web es el que realiza gran parte del trabajo del sistema. En este tipo de
escenario, la capa web implica tanto lógica de presentación como lógica de negocio. Pero lo deseable es no
mezclar todas las cosas, planteando un diseño modular. Para ello, las JSP y servlets no suelen acceder de
forma directa a la base de datos, sino que lo hacen por medio de un servicio de acceso a datos: El escenario
web-centric es el más ampliamente utilizado actualmente. 1.6 Nota sobre MVC Es muy usual utilizar el
patrón MVC como patrón arquitectónico. En este patrón, ya sabemos que el modelo representa los datos y
las reglas de negocio que determinan el acceso y modificación de los datos. La vista traduce los contenidos
del modelo a uno o unos modos de presentación. Cuando el modelo cambia, es responsabilidad de la vista
mantener la consistencia de la presentación. El controlador define el comportamiento de la aplicación, es
decir, asocia (map) las peticiones del usuario (captadas por botones, ítems de menú, etc.) con acciones
realizadas por componentes del modelo. En una aplicación web, las peticiones aparecen como peticiones
HTTP que usan normalmente el método POST o GET para invocar a la capa web. El controlador es el
responsable de seleccionar la vista que debe responder a la petición realizada por el usuario. Ya dijimos en el
escenario web-centric que en bastantes ocasiones las aplicaciones no requieren acceder a múltiples sistemas
empresariales, es decir, la capa de lógica de negocio no requiere fuerte conectividad distribuida con sistemas
empresariales. No se contemplan EJBs, pero esto no significa que desaparezcan los componentes del
modelo, sino que los servicios del modelo se implementan en JavaBeans (no Enterprise JavaBeans) para ser
utilizados por Servlets/JSP dentro de la capa web: En una aplicación centrada en la capa Web, sigue
existiendo, aunque sea ligera, un modelo que contiene entidades y reglas de negocio; es decir, el que no sean
necesarios los EJB no implica no modularizar, mezclarlo todo y eliminar los componentes del modelo. Nota:
La especificación JEE no considera como componentes JEE a los Java Beans ya que son diferentes de los
EJB (no confundirlos). La arquitectura de componentes JavaBeans se pueden utilizar tanto en la capa de
cliente como de servidor, mientras que los componentes Enterprise JavaBeans sólo se utilizan en la capa de
negocio como parte de los servicios del servidor. 2. TOMCAT 2.1 Tomcat - Definición Jakarta-Tomcat es un
servidor de aplicaciones que extiende la funcionalidad de un servidor web. Por sí solo, un servidor web sólo
puede mostrar páginas estáticas html. Tomcat extiende y mejora esta funcionalidad al permitir ejecutar
componentes Java tales como JSPs, Servlets, etc. Tomcat no soporta Enteprise Java Beans (EJBs). Es
básicamente un contenedor de Servlets y JSPs. Ejemplos de otros servidores de aplicaciones que soportan
Servlets y JSPs son los siguientes:  iPlane  Jett  JRun  Blueston  Borland Enterprise Server Se puede
trabajar con Tomcat como contenedor de JSPs y Servlets y algún otro servidor de aplicaciones como
contenedor de EJBs. A continuación, se listan ejemplos de servidores de aplicaciones que soportan EJBs: -
Oracle iAS - JBoss (gratuito) - JOnAS (gratuito) - Web Logic - IBM ebSphere Tomcat se constituye en uno
de los proyectos más interesantes de código abierto (open source) liderado por la Apache Software
Foundation y es distribuído junto con el servidor web Apache. Tomcat cumple parcialmente (no soporta
EJBs) con los estándares JEE e implementa las especificaciones Servlet 2.3 y JavaServer Pages 1.2. 2.2
Aplicaciones web en Tomcat Aplicación web: “Una aplicación web es una colección de Servlets, páginas
JSP, clases Java, archivos de descripción de la aplicación y documentos estáticos tales como HTML,
XHTML, imágenes, etc. “ 1 Las aplicaciones web en Tomcat deben ser alojadas en un contenedor. El
contenedor que alberga una aplicación web es la estructura de directorios en donde están colocados todos los
archivos necesarios para la ejecución de la aplicación web. Esta estructura de directorios en la que
colocamos los componentes se crea dentro del directorio Webapps. tomcat Webapps Examples ROOT
Manager …. miwebapp web. xml WEB-INF classes login.jsp home.jsp index.html … 1 Definición extraída
de la Api Servlet 2.2 Principales directorios de una aplicación web: /miwebapp. Directorio raíz de la
aplicación web en donde se colocan todos los archivos HTML, JSP, GIF, JPG que utiliza la aplicación. Se
pueden crear subdirectorios adicionales para mantener cualquier otro recurso de tipo estático que forme
parte de la aplicación web. /miwebapp/WEB-INF. Directorio que contiene todos los recursos relacionados
con la aplicación web que no son de acceso directo para un cliente (browser). En este directorio, se coloca el
archivo descriptor web.xml, donde se define la configuración de la aplicación web. /miwebapp/WEB-
INF/classes. Directorio que contiene todos los Servlets y cualquier otra clase de utilidad o complementaria
que se necesite para la ejecución de la aplicación web. Por lo general, contiene solo archivos compilados
.class Archivo de configuración web.xml Conocido como archivo descriptor de la aplicación web, este
archivo xml, ubicado dentro del directorio WEB-INF, contiene la descripción de la configuración
correspondiente a la aplicación web. La información que contiene puede incluir lo siguiente: 
Configuración de la sesión  Definiciones de Servlets y Registro de Servlets  Registro de tipos MIME 
Páginas de error  Páginas de bienvenida (tag ) Archivos War Un archivo WAR (web Archive) es la
representación de una aplicación web en una unidad única distribuible. Es el método estándar empleado para
empaquetar una aplicación web y dejarla lista para su distribución y acceso a través de servidores web con
soporte para Servlets y páginas JSP. No importa el número o tipo de recursos (Servlets, JSPs, HTMLs, etc.);
un archivo WAR agrupa una aplicación web completa, en una única unidad de distribución, en un único
archivo. Java Server Page (JSP) Introducción Los servlets y Java Server Pages (JSPs) son dos métodos de
creación de páginas web dinámicas en servidor usando el lenguaje Java. En ese sentido son similares a otros
métodos o lenguajes tales como el PHP o los ASP (Active Server Pages). Sin embargo, se diferencian de
ellos en otras cosas. Para empezar, los JSPs y servlets se ejecutan en una máquina virtual Java, lo cual
permite que, en principio, se puedan usar en cualquier tipo de ordenador, siempre que exista una máquina
virtual Java para él. Cada servlet (o JSP, a partir de ahora lo usaremos de forma indistinta) se ejecuta en su
propia hebra, es decir, en su propio contexto; pero no se comienza a ejecutar cada vez que recibe una
petición, sino que persiste de una petición a la siguiente, de forma que no se pierde tiempo en invocarlo
(cargar programa + intérprete). Su persistencia le permite también hacer una serie de cosas de forma más
eficiente: conexión a bases de datos y manejo de sesiones, por ejemplo. Los JSPs son en realidad servlets: un
JSP se compila a un programa en Java la primera vez que se invoca, y del programa en Java se crea una
clase que se empieza a ejecutar en el servidor como un servlet. La principal diferencia entre los servlets y los
JSPs es el enfoque de la programación: un JSP es una página Web con etiquetas especiales y código Java
incrustado, mientras que un servlet es un programa que recibe peticiones y genera a partir de ellas una
página web, tienen código HTML incrustado. Simplemente escribimos el HTML regular de la forma normal,
usando cualquier herramienta de construcción de páginas Web que usemos normalmente. Encerramos el
código de las partes dinámicas en unas etiquetas especiales, la mayoría de las cuales empiezan con "".
Nuestra primera página JSP
Hola, mundo. Te lo repito vez veces
El fichero contiene la mayoría de los elementos de un JSP. Para empezar, la línea 2 incluye una directiva,
que son órdenes que se ejecutan antes de que se comience a procesar el JSP, y modifican de alguna forma el
resultado del mismo. Todas las directivas en JSP se indican con una @ después del comienzo de la orden
JSP ( info es una especie de comentario, que usa el contenedor para describir la clase en su interfaz de
administración; import permite especificar una serie de paquetes en Java para importar; errorPage
indica la página a la que habría que saltar en caso de que se genere una excepción. Ahora mismo, ninguno de
estos atributos son necesarios, y, de hecho, la página funciona perfectamente bien sin ellos; en ese caso,
tomaría los valores por defecto, es decir, lenguaje HTML para la página y Java para los scriptlets. Justo a
continuación, la línea es una declaración; el signo de admiración (!) se usa para indicar declaraciones de
variables globales, es decir, variables persistentes de una llamada a otra del JSP; y es compartida por todas
las llamadas a una página. La declaración se ejecutará la primera vez que se llame a la página, y se volverá a
ejecutar cada vez que se recompile la página (o se arranque el servidor); el efecto que tendrá esta declaración
será un contador de visitas, que se incrementará cada vez que se visite. Por lo demás, la declaración es una
declaración normal en Java; se pueden incluir tantas declaraciones como se quieran, no necesariamente al
principio de la página. A continuación vienen una serie de elementos HTML, hasta la línea 7, donde se
encuentra la orden . Todo lo que comience por ; y dentro, se puede incluir cualquier trozo de programa en
Java que se quiera. En este caso es una sentencia if, y lo único relevante es que el código Java está mezclado
con el texto; en este caso, se incluiría condicionalmente un texto u otro en la página de salida. Se podría
hacer usando sólo Java, de esta forma: Sin embargo, de esta forma, se pueden incluir más fácilmente todo
tipo de estructuras HTML, sin necesidad de hacer un uso exagerado de System.out. CICLO DE VIDA DEL
JSP Antes de poder ser ejecutado, un jsp debe ser convertido en un servlet de Java. Esto es hecho en dos
etapas:  El texto jsp es traducido en código Java.  El código java es compilado en servlet. El servlet
resultante procesa las peticiones http. El proceso de traducido y compilado es realizado una sola vez antes de
procesar la primera petición http; luego, el servlet resultante tiene el mismo ciclo de vida que cualquier
servlet. Los equivalentes a los métodos init, service y destroy son los siguientes:  jspIni t,  _jspService y 
jspDestro y Elementos de secuencias de comandos Elementos de secuencias de comandos están marcados
con, con toda la acción sucede en el medio. Hay tres tipos básicos de elementos scripts: - expresiones -
scriptlets - declaraciones. Un elemento de expresión hace que el código de la expresión a evaluar y los
resultados que se imprimirá en la salida de la página. Un elemento scriptlets contiene el código Java que
desea ejecutar, tales como cálculos, bucles, condicionales y conexiones de base de datos. Un elemento de la
declaración contiene declaraciones de variables, funciones y clases internas. Estas declaraciones son
persistentes durante la vida útil de la JSP en el servidor.
3. DIRECTIVAS JSP Las directivas JSP son usadas para definir información al traductor java acerca de la página. La
sintaxis es la siguiente: a) Directiva include. Se usa para definir el contenido de otro archivo en el JSP. b) Directiva
page. Se usa para definir las características de las cuales va a depender la página. La directiva aplica a todo el JSP
incluso los archivos incluidos con la directiva include. Directiva page info. Define una cadena de texto que es ubicada
en el método Servlet.getServletInfo() del código traducido. Ejemplo: Directiva page import. Se usa para importar una
lista de nombres de paquetes separados por comas. Ejemplo: Directiva page errorPage. Se usa para redireccionar un
cliente a un URL específico cuando ocurre una excepción que no ha sido capturada en la página. Ejemplo: Ejemplo:

Ing. Hugo Joel Ortiz Saldaña PROGRAMACION IV Directiva page isErrorPage. Se usa para indicar si la página es un
“target” válido (destino) de una directiva page errorPage. El valor por defecto es false.Ejemplo: Directiva
contentType="MIME-Type" ó contentType="MIME-Type;charset=Character-Set" Esto especifica el tipo MIME de la
salida. El valor por defecto es text/html. Directiva language="java". En algunos momentos, esto está pensado para
especificar el lenguaje a utilizar. Ing. Hugo Joel Ortiz Saldaña PROGRAMACION IV 4. JSP SCRIPTING El scripting es
utilizado para codificar el JSP. El scripting está conformado de: · Declarations · Scriplets · Expressions a) Declarations.
Son utilizadas para declarar métodos y variables de instancia en el servlet JSP. Sintaxis: Ejemplo: b) Scriplets. Se
utilizan para escribir código Java en el JSP. Sintaxis: , para indicar el final de la línea de código se tiene agregar punto y
coma(;) Ejemplo:

c) Expressions. Las expresiones son para incluir directamente dentro de la salida de la página cadenas (Strings), que
son el resultado de evaluar una expresión de código Java y luego convertirla en una cadena. Las expresiones son las
únicas que no llevan punto y como(;) al final de la línea. Ing. Hugo Joel Ortiz Saldaña PROGRAMACION IV Sintaxis:
Ejemplo:

Resultado: Código que genera el servidor. Ing. Hugo Joel Ortiz Saldaña PROGRAMACION IV Ing. Hugo Joel Ortiz
Saldaña PROGRAMACION IV Ejemplo: Hacer un JSP para mostrar la tabla de multiplicación del 10, como se muestra
en la siguiente imagen. Ing. Hugo Joel Ortiz Saldaña PROGRAMACION IV Respuesta: Ing. Hugo Joel Ortiz Saldaña
PROGRAMACION IV Código generado por el servidor.

Tabla de Multiplicacion del 10

10 X 1 = 10

20
10 X 2 = Ing. Hugo Joel Ortiz Saldaña
PROGRAMACION IV

10 X 3 = 30

10 X 4 = 40

10 X 5 = 50

10 Ing. Hugo Joel Ortiz Saldaña

X 6 = 60
PROGRAMACION IV

10 X 7 = 70
10 X 8 = 80

= Ing. Hugo Joel Ortiz Saldaña

10 X 9 90
PROGRAMACION IV

10 X 10 = 100

Las Java Server Pages a menudo presenta el contenido en forma dinámica como parte de un documento de XHTML
que se envía al cliente en respuesta a una petición, en algunos casos el contenido es estático, pero se envía
solamente si se cumplen ciertas condiciones durante la petición(como el proporcionar valores en un elemento form
que envía una petición). Los programadores de JSPs pueden insertar código y lógica de Java en una JSP mediante el
uso de secuencias de comandos. Componentes de las secuencia de comandos Los componentes de las secuencias de
comandos de JSP incluyen scriptlets, comentarios, expresiones, declaraciones y secuencias de escape. Los Scriptlets
son bloques de código delimitado por los caracteres . Contienen instrucciones de Java que el contenedor coloca en el
método _jspService al momento de la traducción. Las JSPs soportan tres estilos de comentarios: Comentarios JPS,
comentarios de XHTML y comentarios de lenguaje de secuencia de comandos. Los comentarios de JSP están
delimitados por los caracteres , estos pueden colocarse en cualquier parte en cualquier parte de una JSP, pero no
dentro de los scriptlets. Los comentarios de XHTML están delimitados por los caracteres . Estos comentarios pueden
colocarse en cualquier parte de la JSP, pero no dentro de los scriptlets. Los comentarios de lenguaje de secuencia de
comandos son en realidad comentarios de JAVA, ya que este es el único lenguaje de comandos para las JSP
actualmente. Los scriptlets pueden utilizar comentarios de fin de línea de java (//) y los comentarios tradicionales
(delimitados por /* y */). Los comentarios de JSP y los comentarios de lenguaje de secuencias de comandos se
ignoran y no aparecen en las respuestas a un cliente. Cuando los clientes ven el código fuente de una respuesta JSP,
solo ven los comentarios de HTML en el código fuente, los distintos estilos de comentarios son útiles para separar los
comentarios que el usuario pueda ver de los comentarios que documentan la lógica procesada por el servidor. Una
expresión de JSP delimitada por los caracteres contiene una expresión de Java que se evalúa cuando un cliente
solicita una JSP que contiene esa expresión. El contenedor convierte el resultado de una expresión JSP en un objeto
String y después envía ese objeto String como parte de esa respuesta al cliente. Las Declaraciones (delimitadas por
los caracteres ) permiten a un programador de JSPs definir las variables y los métodos a utilizar en una JSP. Las
variables se convierten en variables de instancia de la clase de servlet que representa a la JSP traducida. Las
declaraciones de las variables y los métodos en una JSP utilizan la sintaxis de java. Por lo tanto, la declaración de una
variable debe de terminar con un punto y coma. Los caracteres o secuencia de caracteres especiales que utiliza
normalmente el contenedor de JSPs para delimitar código de JSP puede incluirse en una JSP como caracteres literales
en elementos de secuencia de comandos, datos de plantilla fija y valores de atributos, mediante el uso de secuencia
de escape, En la siguiente tabla se muestra el carácter o los caracteres literales y sus correspondientes secuencias de
escape, además de indicar en donde se puede utilizar estas secuencias de escape. Literal Secuencia de Escape
Descripción %\> La secuencia de caracteres %> normalmente indica el final de un scriptlet, la secuencia de escape
%\> coloca los caracteres <> en la respuesta al cliente ‘ \’ Al igual que con las literales de cadena en un programa de
java, la secuencia de escape para los caracteres ‘,” y \ permiten que estos caracteres aparezcan en los valores de los
atributos. Recuerde que el texto literal en una JSP se convierte en literales de cadena en el servlet que representa a la
JSP traducida. “ \” \ \\ Ejemplo de Secuencia de Comandos En el código anterior se muestra cómo responder a las
peticiones get mediante las herramientas básicas de secuencia de comandos. La JSP permite al usuario escribir un
nombre y después muestra ese nombre en la respuesta. Mediante el uso de secuencias de comandos, la JSP
determina si se pasó un parámetro txtnombre como parte de la petición; de no ser así, la JSP devuelve un
documento HTML que contiene un elemento form, a través del cual el usuario puede escribir un nombre. En caso
contrario, la JSP obtiene el valor de txtnombre y lo utiliza como parte de un documento HTML que da la bienvenida al
usuario al mundo de la JavaServer Pages. Observe que la mayor parte del código escrito es en formato HTML. A lo
largo del elemento body hay varios scriptlets( líneas 17 al 23, 30 a 35 y 45 a 49) y una expresión de JSP(línea 26).
Observe que en esta JSP aparecen tres estilos de comentarios (en las líneas 5, 17 y 23). Los scriptlets definen una
estructura if…else que determina si la JSP recibió un valor por el txtnombre como parte de la petición. En la línea 19
se utiliza el método getParameter(tema a ver en la semana siguiente) del objeto implícito JSP request( un objeto
HttpServletRequest) para obtener el valor del parámetro txtnombre, y se asigna el resultado a la variable nombre, en
la línea 21 se determina si nombre no es null(es decir que se haya pasado un valor para txtnombre a la JSP, como
parte de la petición) . Si es condición es verdadera, el scriptlet termina temporalmente, de manera que puedan
enviarse a la salida de datos del documento HTML en la líneas 25 a 28. La expresión de JSP de la línea 26 envía a la
salida el valor de la variable txtnombre (es decir el nombre que el usuario digito que se pasa a la JSP como parámetro
de petición). El scriptlet continua en la línea en la línea 30 a 35 con la llave de cierre del cuerpo de la instrucción if y
con el comienzo de la parte de la estructura if..else que corresponden a else. Si la condición de la línea 21 es falsa, no
se envía a la salida las líneas 25 a 28. En vez de esto, las líneas 37 a 43 envían a la salida un elemento form. El usuario
puede escribir un nombre en el elemento form y presionar clic en el botón Enviar para pedir la JSP de nuevo que se
ejecute el cuerpo de la estructura if (líneas 25 a 28). Cuando se ejecute por primera vez la JSP, esta mostrara el
elemento form en el que se podrá escribir un nombre (ver figura 1), debido a que la URL no le pasa un parámetro
txtnombre. Una vez que envié un nombre, el navegador deberá mostrar una pantalla similar a la captura de pantalla
de la figura 2. Observe la URL de esta figura y notara que se está pasando argumentos de peticiones get como parte
de la URL, la siguiente URL proporciona el parámetro txtnombre a la _JSP bienvenida.jsp

Manejo de formularios Una de las partes más comunes de una aplicación en la web es la gestión de información en
un formulario. La información podría ser un nombre de cliente y su dirección, una palabra o frase introducida para un
motor de búsqueda, o un conjunto de preferencias lanzadas como datos del mercado. La información que el usuario
introduce en el formulario se almacena en el objeto request, que se envía desde el cliente al motor JSP. El motor JSP
envía el objeto solicitado a cualquier componente del lado del servidor (JavaBeansTM , servlet, o bean enterprise)
que especifica el JSP. El componente maneja la solicitud, posiblemente recuperando datos desde una base de datos u
otros datos almacenados, y pasa un objeto respuesta de vuelta al motor JSP, donde los datos se formatean de
acuerdo al diseño de la página HTML. El motor JSP y el servidor Web entonces envían la página JSP revisada de vuelta
al cliente, donde el usuario puede ver el resultado, en el navegador Web. Los protocolos de comunicación usados
entre el cliente y el servidor pueden ser HTTP, o cualquier otro protocolo. Request, es el objeto por el cual se recibe
la información enviada por el cliente, utilizando un navegador web. Response, es el objeto por el cual se le envía la
información al usuario. Ejemplo. Como se puede observar en la línea 13 se está verificando si el usuario ha
presionado clic sobre el botón que tiene el nombre de “mostrar”, si el usuario no ha presionado el botón “mostrar”
retornara el método getParamenter el valor de Nulo (null), en caso contrario retornara el valor colocado en la
propiedad value del botón submit (línea 11). Este proceso se utiliza muy frecuentemente para cuando se necesita
realizar la captura y ejecución de código java dentro de la misma jsp. Para poder leer datos introducidos por el
usuario en un formulario se utiliza el método getParamenter del objeto request, la sintaxis del método es la
siguiente: request.getParamenter(“nombre del objeto”) Ejemplo: Request.getParamenter(“tabla”) Para este ejemplo
se está leyendo el valor que el usuario digito en la caja de texto con el nombre tabla (línea 17), todo valor que se
obtiene por este método es de tipo cadena (string) por lo que es necesario la conversión de dicho dato cuando se
necesitan realizar operaciones matemáticas tal es el caso en la línea 17 que el valor devuelto por el método
getParemeter es convertido a entero, si dicho valor no se puede convertir a entero dará una exception en cual es
controlado por la sentencia try –catch, si hay un error en la conversión de este dato se ejecutara la línea 34 que
controlada por la parte de catch . Para este ejercicio la primera vez que se ejecute la jsp no se ejecutara el código
desde la línea 14 hasta las 36, este porque el usuario no ha presionado clic sobre el botón “mostrar”.