Tutorial Funciones en JSP y HTML

Mdulo: Desarrollo de Funciones en el Sistema de Informacin
2 Administracin de Sistemas Informticos
Tema 7.- Desarrollo de funciones y

aplicacin en JSP. Introduccin al HTML.
Copyleft 2006 Juan Antonio Lpez Quesada.
Licencia
Copyright Juan Antonio Lpez Quesada.
Se otorga permiso para copiar, distribuir y/o modificar este
documento bajo
los
trminos
de
la
Licencia de
Documentacin Libre de GNU, Versin 1.2 o cualquier otra
versin
posterior
publicada
por
la
Free Software
Foundation; sin Secciones Invariantes ni Textos de
Cubierta Delantera ni Textos de Cubierta Trasera. Puede
acceder
a
una
copia
de
la
licencia
en
http://www.fsf.org/copyleft/fdl.html.
NDICE
1.- Introduccin al Desarrollo de funciones y aplicacin en JSP_________________________3
1.1.- Qu es JSP? ________________________________ _____________________________3
2.- Plataforma para el Desarrollo de funciones y aplicacin en JSP ______________________3

2.1.- Entorno de desarrollo ______________________________________________________3
_______________________________________________________________3
_______________________________________________________4
2.2.- Introduccin al Servidor de Aplicaciones Tomcat de Apache ________________________4
2.2.1.- Cul es la Diferencia entre Tomcat y Jserv?_____________________________________________4
2.2.2.- Arrancar y Parar Tomcat ____________________________________________________________5
2.2.3.- La Estructura de Directorios de Tomcat_________________________________________________5
2.2.4.- Los Scripts de Tomcat______________________________________________________________6
2.2.5.- Ficheros de Configuracin de Tomcat _________________________________________________9
server.xml__________________________________________________________________________9
web.xml ________________________________ ________________________________ __________ 11
2.3.- Estructura y despliegue de aplicaciones web ________________________________ ____12

2.4.- Acceso a bases de datos mySQL (JDBC) _______________________________________21
3.- Tag HTML ________________________________________________________________22

3.1.- Introduccin ________________________________ ____________________________22
3.2.- http://www.ultraedit.com___________________________________________________23
3.3.- Ejemplo Propuestos/Resueltos. ______________________________________________24
3.4.- W3C Markup Validation Service_____________________________________________79
Profesor: Juan Antonio Lpez Quesada.

Ciclo Formativo de Grado Superio r: Desarrollo de Funciones en Sistemas de Informacin.
WEB: http://dis.um.es/~lopezquesada
E-mail: juanlop@um.es
Pag. 3
1.- Introduccin al Desarrollo de funciones y aplicacin en

JSP
1.1.- Qu es JSP?
Java Server Pages (JSP) es una tecnologa que nos permite mezclar HTML
esttico con HTML generado dinmicamente. Muchas pginas Web que estn
construidas con programas CGI son casi estticas, con la parte dinmica
limitada a muy pocas localizaciones. Pero muchas variaciones CGI,
incluyendo los servlets, hacen que generemos la pgina completa mediante
nuestro programa, incluso aunque la mayora de ella sea siempre lo mismo.
JSP nos permite crear dos partes de forma separada. Aqu tenemos un
ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Welcome to Our Store</TITLE></HEAD>
<BODY>
<H1>Welcome to Our Store</H1>
<SMALL>Welcome,

<% out.println(Utils.getUserNameFromCookie(request)); %>
To access your account settings, click
<A HREF="Account-Settings.html">here.</A></SMALL>
<P>
Regular HTML for all the rest of the on-line store's Web page.
</BODY></HTML>
2.- Plataforma para el Desarrollo de funciones y aplicacin en

JSP
2.1.- Entorno de desarrollo
q Java SE
q Java SE 6 RC
q Java EE 5 SDK

Pag. 4
NetBeans IDE with Application Server:

8 Java EE 5 Tools Bundle - includes NetBeans IDE 5.5, NetBeans Enterprise
Pack 5.5, Sun Java System Application Server PE 9 and more.
8 NetBeans IDE 5.5 with Java EE Application Server 9.0 U1 bundle
8 NetBeans IDE 5.5 with JBoss Application Server 4.0.4 bundle
2.2.- Introduccin al Servidor de Aplicaciones Tomcat de Apache
Tomcat es un contenedor de Servlets con un entorno JSP. Un contenedor de

Servlets es un shell de ejecucin que maneja e invoca servlets por cuenta del
usuario.
Tomcat puede utilizarse como un contenedor solitario (principalmente para
desarrollo y depuracin) o como plugin para un servidor web existente
(actualmente se soporan los servidores Apache, IIS y Netscape
2.2.1.- Cul es la Diferencia entre Tomcat y Jserv?

Es una confusin comn, Jserv es un contenedor compatible con el API
Servlet 2.0 que fue creado para usarse con Apache. Tomcat es una reescritura completa y es un contenedor compatible con los APIs Servlet 2.2 y
JSP 1.1.
Tomcat utiliza algn cdigo escrito para Jserv, especialmente el adaptador de
servidor para Apache, pero aqu se terminan todas las similitudes.

Pag. 5
2.2.2.- Arrancar y Parar Tomcat
Arrancamos y paramos Tomcat usando los scripts que hay en el directorio

bin:
Para arrancar Tomcat ejecutamos:
8 Sobre UNIX:
bin/startup.sh
8 Sobre Win32:
bin\startup
Para parar Tomcat ejecutamos:
8 Sobre UNIX:
bin/shutdown.sh
8 Sobre Win32:
bin\shutdown
2.2.3.- La Estructura de Directorios de Tomcat

Asumiendo que hemos descomprimido la distribucin binaria de Tomcat
deberamos tener la siguiente estructura de directorios:
Nombre de
Directorio
Descripcin
bin
conf
Contiene los scripts de arrancar/parar

Contiene varios ficheros de configuracin incluyendo
server.xml (el fichero de configuracin principal de Tomcat) y
web.xml que configura los valores por defecto para las
distintas aplicaciones desplegadas en Tomcat.
doc
Contiene varia documentacin sobre Tomcat (Este manual, en

Ingls).
Contiene varios ficheros jar que son utilizados por Tomcat.
lib

Pag. 6
logs
src
Sobre UNIX, cualquier fichero de este directorio se aade al

classpath de Tomcat.
Aqu es donde Tomcat sita los ficheros de diario.
L o s ficheros fuentes del API Servlet, aunque son slo los
interfaces vacos y las clases abstractas que debera
implementar cualquier contenedor de servlets.
webapps
Contiene aplicaciones Web de Ejemplo.
Adicionalmente podemos, o Tomcat crear, los siguientes directorios:
Nombre
de
Directorio
work
classes
Descripcin
Generado automticamente por Tomcat, este es el sitio donde
Tomcat sita los ficheros intermedios (como las pginas JSP
compiladas) durante su trabajo. Si borramos este directorio
mientras se est ejecutando Tomcat no podremos ejecutar
pginas JSP.
Podemos crear este directorio para aadir clases adicionales al
classpath. Cualquier clase que aadamos a este directorio
encontrar un lugar en el classpath de Tomcat.
2.2.4.- Los Scripts de Tomcat

Tomcat es un programa Java, y por lo tanto es posible ejecutarlo desde la
lnea de comandos, despus de configuar varias variables de entorno. Sin
embargo, configurar cada variable de entorno y seguir los parmetros de la
lnea de comandos usados por Tomcat es tedioso y propenso a errores. En su
lugar, el equipo de desarrollo de Tomcat proporciona unos pocos scripts para
arrancar y parar Tomcat fcilmente.
Nota: Los scripts son slo una forma conveniente de arrancar/parar...

Podemos modificarlos para personalizar el CLASSPATH, las variables
de entorno como PATH y LD_LIBRARY_PATH, etc., mientras que se
genera la lnea de comandos correcta para Tomcat.

Pag. 7
Qu son esos scripts? La siguiente tabla presenta los scripts ms

importantes para el usuario comn:
Nombre
del Script
tomcat
startup
shutdown
Descripcin
El script principal. Configura el entorno apropiado, incluyendo
CLASSPATH, TOMCAT_HOME y JAVA_HOME, y arranca
Tomcat con los parmetros de la lnea de comando
apropiados.
Arrancar tomcat en segundo plano. Acceso directo para
tomcat start
Para tomcat (lo apaga). Acceso directo para tomcat stop;
El script ms importante para los usuarios es tomcat (tomcat.sh/tomcat.bat).

Los otros scripts relacionados con tomcat sirven como un punto de entrada
simplificado a una sola tarea (configuran diferentes parmetros de la lnea de
comandos, etc.).
Una mirada ms cercana a tomcat.sh/tomcat.bat nos muestra que realiza las
siguientes acciones:
Sistema
Operativo
Unix
Acciones
Averigua donde est TOMCAT_HOME si no se especifica.

Averigua donde est JAVA_HOME si no se especifica.
Configura un CLASSPATH que contiene:
1. El
directorio
${TOMCAT_HOME}/classes
(si
exsiste).
2. Todo el contenido de ${TOMCAT_HOME}/lib.
3. ${JAVA_HOME}/lib/tools.jar
(este
fichero
jar
contine la herramienta javac, que necesitamos para
compilar los ficheros JSP).
Ejecuta java con los parmetros de la lnea de comandos
que ha configurado un entorno de sistema Java, llamado
tomcat.home, con org.apache.tomcat.startup.Tomcat
como la clase de arranque. Tambin procesa los
parmetros
de
la
lnea
de
comandos
para

Pag. 8
org.apache.tomcat.startup.Tomcat, como:
1. La operacin a ejecutar start/stop/run/etc.

2. Un path al fichero server.xml usado por este
proceso Tomcat.
Por ejemplo, si server.xml est localizado en
/etc/server_1.xml y el usuario quiere arrancar Tomcat
en segundo plano, debera introducir la siguiente lnea
de comandos:
Win32
bin/tomcat.sh start -f /etc/server_1.xml

Graba las configuraciones actuales para TOMCAT_HOME
y CLASSPATH.
Prueba JAVA_HOME para asegurarse de que est
configurado.
Prueba si TOMCAT_HOME est configurado y los valores
por defecto a "." no lo estn. Entonces se usa
TOMCAT_HOME para probar la existencia de servlet.jar
para asegurarse de que TOMCAT_HOME es vlido.
Configura la varibale CLASSPATH que contiene:
1. %TOMCAT_HOME%\classes (incluso si no existe),
2. Los ficheros Jar de %TOMCAT_HOME%\lib. Si es
posible,
todos
los
ficheros
jar
en
%TOMCAT_HOME%\lib
sin
incluidos
dinmicamente. Si no es posible, se incluyen
estticamente los siguientes ficheros jar: ant.jar,
jasper.jar, jaxp.jar, parser.jar, servlet.jar, y
webserver.jar
3. %JAVA_HOME%\lib\tools.jar, si existe (este fichero
jar contiene la herramietna javac necesaria para
compilar los ficheros JSP).
Ejecuta
%JAVA_HOME%\bin\java,
con
los
parmetros de la lnea de comandos que configuran el
entorno de sistema Java, llamado tomcat.home , con
org.apache.tomcat.startup.Tomcat como la clase de
arranque. Tambin le pasa los parmetros de la lena de
comandos a org.apache.tomcat.startup.Tomcat, como:
1. La operacin a realizar: start/stop/run/etc.
2. Un path al fichero server.xml usado por este

Pag. 9
proceso Tomcat.
Por
ejemplo,
si
server.xml
est
localizado
en
conf\server_1.xml y el usuario quiere arrancar Tomcat en
una nueva ventana, debera proporcionar la siguiente lnea
de comando:
bin\tomcat.bat start -f conf\server_1.xml
Restaura las configuraciones de

CLASSPATH grabadas prviamente.
TOMCAT_HOME
2.2.5.- Ficheros de Configuracin de Tomcat

La configuracin de Tomcat se basa en dos ficheros:
q server.xml - El fichero de configuracin golbal de Tomcat.

q web.xml - Configura los distintos contextos en Tomcat.
server.xml
server.xml es el fichero de configuracin principal de Tomcat. Sirve para dos
objetivos:
1. Proporcionar configuracin inicial para los componentes de Tomcat.
2. Especifica la estructura de Tomcat, lo que significa, permitir que
Tomcat arranque y se construya a s mismo ejemplarizando los
componentes especificados en server.xml .
Los elementos ms importantes de server.xml se describen en la siguiente
tabla:
Elemento
Server
Descripcin
El elemento superior del fichero server.xml. Server
define un servidor Tomcat. Generalmente no
deberamos tocarlo demasiado. Un elemento
Server puede contener elementos Logger y
ContextManager.

Logger
ContextManager
Pag. 10
Este elemento define un objeto logger. Cada objeto

de este tipo tiene un nombre que lo identifica, as
como un path para el fichero log que contiene la
salida y un verbosityLevel (que especifica el nivel
de log). Actualmente hay loggeres para los servlets
(donde va el ServletContext.log()), los ficheros JSP
y el sistema de ejecucin tomcat.
Un ContextManager especifica la configuracin y la
estructura
para
un
conjunto
de
ContextInterceptors ,
RequestInterceptors ,
Contexts y sus Connectors . El ContextManager
tiene unos pocos atributos que le proporcionamos
con:
1. Nivel de depuracin usado para marcar los
mensajes de depuracin
2. La localizacin base para webapps/, conf/,
logs/ y todos los contextos definidos. Se usa
para arrancar Tomcat desde un directorio
distinto a TOMCAT_HOME.
3. El nombre del directorio de trabajo.
4. Se incl uye una bandera para controlar el
seguimiento de pila y otra informacin de
depurado en las respuestas por defecto.
ContextInterceptor &
RequestInterceptor
Estos interceptores escuchan ciertos eventos que

sucenden en el ContextManager. Por ejemplo, el
ContextInterceptor escucha los eventos de
arrancada
y
parada
de
Tomcat,
y
RequestInterceptor mira las distintas fases por las
que las peticiones de usuario necesitan pasar
durante su servicio. El administrador de Tomcat no
necesita conocer mucho sobre los interceptores;
por otro lado, un desarrollador debera conocer que
ste es un tipo global de operaciones que pueden
implementarse en Tomcat (por ejemplo, loggin de
seguridad por peticin).
Connector
El Connector representa una conexin al usuario, a

travs de un servidor Web o directamente al
navegador del usuario (en una configuracin
independiente). El objeto connector es el
responsable del control de los threads en Tomcat y

Pag. 11
de leer/escribir las peticiones/respuestas desde los

sockets conectados a los distintos clientes. La
configuracin de los conectores incluye informacin
como:
1. La clase handler.
2. El
puerto TCP/IP donde escucha el
controlador.
3. el backlog TCP/IP para el server socket del
controlador.
Describiremos cmo se usa esta configuracin de
conector ms adelante.
Context
Cada Context representa un path en el rbol de

tomcat donde situanos nuestra aplicacin web. Un
Context Tomcat tiene la siguiente configuracin:
1. El path donde se localiza el contexto. Este
puede ser un path completo o relativo al
home del ContextManager.
2. Nivel de depuracin usado para los mensaje
de depuracin.
3. Una
bandera
reloadable.
Cuando
se
desarrolla un servlet es muy conveniente
tener que recargar el cambio en Tomcat, esto
nos permite corregir errores y hacer que
Tomcat pruebe el nuevo cdigo sin tener que
parar y arrancar. Para volver a recargar el
servlet seleccionamos la bandera reloadable
a true. Sin embargo, detectar los cambios
consume tiempo; adems, como el nuevo
servlet se est cargando en un nuevo objeto
class-loader hay algunos casos en los que
esto lanza errores de forzado (cast). Para
evitar estos problemas, podemos seleccionar
la bandera reloadable a
false,
esto
desactivar esta caracterstica.
Se puede encontrar informacin adicional dentro del fichero server.xml.
web.xml

Pag. 12
Podemos encontar una detallada descripcin de web.xml y la estructura de la

aplicacin web (incluyendo la estructura de directorios y su configuracin) en
los captulo 9, 10 y 14 de la Servlet API Spec en la site de Sun Microsystems .
Hay una pequea caracterstica de Tomcat que est relacionada con web.xml.
Tomcat permite al usuario definir los valores por defecto de web.xml para
todos los contextos poniendo un fichero web.xml por defecto en el directorio
conf. Cuando construimos un nuevo contexto, Tomcat usa el fichero web.xml
por defecto como la configuracin base y el fichero web.xml especfico de la
aplicacin (el localizado en el WEB-INF/web.xml de la aplicacin), slo
sobreescribe estos valores por defecto.
2.3.- Estructura y despliegue de aplicaciones web
Una APLICACIN WEB consiste en un conjunto de servlets, pginas

jsp, ficheros html, clases Java de apoyo empaquetadas o no en
ficheros jar y otro tipo de recursos tales como ficheros de imgenes,
de sonidos, de texto, etc.
Una aplicacin web puede existir de dos modos:
q Mediante un fichero de extensin war (Web Application
Resource, a veces tambin se le suele llamar Web ARchive)

que engloba a todo su contenido. Se crea mediante la herramienta
jar incluido en el J2SE, del mismo modo que un fichero jar. Este
empaquetamiento se produce en la etapa de produccin, es decir,
cuando la aplicacin ha sido comprobada y depurada para su
comercializacin.
q Mediante una estructura de directorios basada en la
especificacin definida por Sun para los Servlets. Dentro de
esta estructura deben ubicarse de forma adecuada los componentes
de la aplicacin.
Es el modo de trabajo habitual en la etapa de desarrollo de la aplicacin, es
decir, cuando se realizan pruebas y modificaciones constantes en sus
componentes.
Con estos modos de existencia se persigue que la misma aplicacin
web pueda ser deplegada en diferentes servidores web manteniendo
su funcionalidad y sin ninguna modificacin de cdigo.
A partir de la especificacin 2.2 de los servlets, todos los servidores
compatibles con la misma deben aceptar para el despliegue de aplicaciones

Pag. 13
web, su fichero war asociado, que se ubicar en el directorio del servidor que
su fabricante indique.
A partir de ese momento, y sin hacer nada ms, la aplicacin web estar
disponible para todo el mundo.
CONCLUSIN:
Modo de trabajo habitual en las aplicaciones web. De divide en dos fases:
q Etapa de desarrollo: su usa una estructura de directorios. Se

preven constantes cambios en los componentes de la aplicacin
q Etapa de produccin: se usa un fichero war. Los objetivos de la
aplicacin se han logrado y no se preven modificaciones en sus
componentes. Todos los recursos de la aplicacin se empaquetan en
un war para que pueda ser desplegada en cualquier tipo de servidor
J2EE compatible con la especificacin.
Despliegue mediante war

Para ilustrar el proceso de despliegue de una aplicacin web, se va a suponer
que se han cumplido las dos etapas mencionadas anteriormente, se dispone
de un fichero war de nombre Prueba.war que engloba todos sus
componentes y que se le ha hecho llegar al administrador del servidor J2EE
en el que se va a desplegar.
Los componentes de la aplicacin sern:
Dos servlets: ServletPrueba.java y ServletEnlace.java
Un fichero html y una imagen: FormularioPrueba.html y tomcat.gif
Un fichero xml: web.xml
Cul es el siguiente paso?

El administrador asignar a la aplicacin un context path o ruta de contexto
coincidente con el nombre del fichero war, que indica el URL mediante el
que cualquier cliente puede acceder a la misma. Cada aplicacin web
estar asociada a un contexto y todos sus componentes existirn en relacin
a ese contexto

Pag. 14
En este caso, el contexto ser /Prueba. El contexto debe empezar por /. Esta
barra significa directorio raz del servidor a nivel de aplicaciones web
desplegadas en l. Cada servidor tiene el suyo propio:
q En el caso de Tomcat es tomcat_home\webapps

Una vez descargado, se descomprime colgando del disco duro y ya est.
La asignacin de ruta de contexto comentada anteriormente se hace de modo
automtico, sin ms que colgar el fichero war del raz del servidor.
Si se utiliza Tomcat, el administrador ubicar Prueba.war colgando de
tomcat_home\webapps. Hecho esto, el despliegue se considera finalizado.
A continuacin se levanta Tomcat y se crear la estructura de directorios
siguiente:

Pag. 15
Cdigo del fichero descriptor de despliegue de la aplicacin: web.xml

Pag. 16

Cdigo del servlet trilcejf.ServletPrueba.java:
Pag. 17

Pag. 18
Cdigo del servlet trilcejf.ServletEnlace.java:
Estructura:
NOTA 1: si se modifica el web.xml de la aplicacin, no es necesario tumbar

al servidor para que la aplicacin se actualice.
NOTA 2: Veas en la siguiente pgina una Servlet con recogidad de
parmetros partiendo de un formulario.

Pag. 19

Pag. 20
Introduccin:
Cmo se obtiene el contexto de una aplicacin web?
Mediante el mtodo ServletContext getServletContext() de la interface
ServletConfig o mediante getServletContext () de GenericServlet. Se obtiene
un contexto vaco, todava no contiene elementos.
Cmo se agregan elementos al contexto de una aplicacin web?
Mediante el mtodo de la interface javax.servlet.ServletContext void
setAttribute(String clave, Object valor). Se asigna una clave y un valor
asociado a la misma. La clave debe ser una String y el valor un Object.
Cmo se obtienen elementos del contexto de una aplicacin web?
Mediante el mtodo de esta misma interface Object getAttribute(String
clave).
NOTA: etiquetas tpicas empleadas en el descriptor de despliegue y

relacionadas con el contexto son:
<context-param> <param-name> y <param-value>

Pag. 21
2.4.- Acceso a bases de datos mySQL (JDBC)
Una forma sencilla de acceder a bases de datos mySQL desde Java es la

siguiente:
Nos bajamos el mySQL
mySQL Connector/J 3.1
Connector
for
Java
de
la
web
de
mySQL
Al descomprimirlo, lo que nos interesa es el archivo siguiente que hay en el

interior: mysql-connector-java-3.0.17-ga-bin.jar
Podemos incluirlo como una librera en nuestro proyecto, o aadirlo a la
variable de entorno CLASSPATH de Java.
Las consultas se hacen de una forma muy sencilla, como muestra este
ejemplo (omitiendo el tratamiento de excepciones):
Cargar el driver
String driverName = "com.mysql.jdbc.Driver";
Class.forName(driverName);
String server = "localhost";
String database = "bbdd";
String url = "jdbc:mysql://" + server + "/" + database;
String user = "user";
String password = "passwd";
Crear conexin
con = DriverManager.getConnection(url, user, password);
El resto es como los accesos a cualquier base de datos:
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM tabla WHERE ...");

Pag. 22
3.- Tag HTML

3.1.- Introduccin
El HTML ( HiperText Markup Language ) es el lenguaje utilizado para

representar documentos en la WWW (World Wide Web). Adems de texto
normal incluye tambin, elementos multimedia (grficos, vdeo, audio) y
existen enlaces (links) que permiten saltar a otras partes del documento o a
otro sitio cualquiera de Internet.
Otra caracterstica muy importante de este lenguaje es que es portable, es
decir, se pueden visualizar las pginas con cualquier sistema operativo y, por
supuesto tambin crearlas.
En la actualidad (noviembre 1999), Netscape y Microsoft siguen sin ponerse
de acuerdo en el estndar del lenguaje. Microsoft ha asumido las directrices
del ww3, pero no as Netscape, que implementa etiquetas propias, de modo
que las pginas no se visualizan igual en el Navigator y en el Explorer.
Las etiquetas constituyen la filosofa de este lenguaje. Por medio de ellas se
pueden controlar los elementos tipogrficos del texto: tipo, color y tamao de
las fuentes, el estilo ( negrita, cursiva, etc ), as como tambin la inclusin de
tablas, listas, formularios, la insercin de fotos, sonidos, fondos, los enlaces
mencionados anteriormente. etc.
Las etiquetas se pueden modificar por medio de sus atributos, stos son del
tipo atributo="valor" y se colocan detrs del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los smbolos < y >
y normalmente se usan dos, una de inicio y otra final, para conseguir el
efecto deseado.
Por ejemplo si escribimos
<FONT COLOR="#ff0000" size="2">El texto se ver rojo y en tamao un
poco menor de lo normal </font>
Se ver rojo El texto y en tamao un poco menor de lo normal

Pag. 23
El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difcil.

Precisamente el objetivo de esta pequea gua es servir de introduccin y
referencia de las caractersticas ms usadas del HTML
3.2.- htt p://www.ultraedit.com

Pag. 24
3.3.- Ejemplo Propuestos/Resueltos.
Ejercicio 1: Crear una carpeta denominada Cartelera y dentro de ella crear la siguiente
pgina Web con el nombre practicas1.htm
Objetivo del Ejercicio: Incluir como fondo de la pgina una imagen.
<HTML>
<HEAD>
<TITLE>Prácticas con la etiqueta BODY</TITLE>
</HEAD>
<BODY BACKGROUND="logotanet.gif">
</BODY>
</HTML>
Ejercicio 2: Crear la siguiente pgina Web con el nombre practicas2.htm

Objetivo del Ejercicio: Incluir como fondo de la pgina un color utilizando el cdigo
hexadecimal correspondiente.
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FFCC66">
</BODY>
</HTML>

Objetivo del Ejercicio: Incluir como fondo de la pgina un color utilizando el nombre del
color correspondiente en ingles.
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="blue">
</BODY>
</HTML>

Pag. 25

Objetivo del Ejercicio: Asignar al fondo de la pgina un color, y asignar al texto que se va
a incluir en la misma un color distinto del que toma por defecto.
<HTML>
<HEAD>
<TITLE>Master and Commander </TITLE>
</HEAD>
<BODY BGCOLOR="lightblue" TEXT="navy">
Las Guerras Napoleónicas: una época para el valor marinero
Más allá de la llamada del deber y las aventuras heroicas
en los procelosos océanos. Y no hay nadie más valiente, más
honrado y más comprometido con los esfuerzos bélicos del Imperio
Británico que Jack Aubrey, el CAPITán del HMS Surprise. <BR> <BR>
En 1805 recibe órdenes de capturar el b uque insignia de la Armada
Francesa, un barco muy superior al suyo que responde al nombre de
Acheron.<BR><BR>
Cuando el navío galo lanza un contraataque sorpresa Aubrey, a
pesar de los enormes da ños sufridos por su barco y su leal
tripulación, toma la decisión crucial de perseguir al Acheron
por los mares del Sur y cumplir así su misión.<BR><BR>
Sobreviviendo a los témpanos de hielo de la Antártida, a una
feroz tormenta en el Cabo de Hornos y a los rumores de un motín
a bordo, Aubrey está decidido a torpedear la misión de alto secreto
del Acheron: apropiarse del valioso cargamento de la flota ballenera
británica.
</BODY>
</HTML>

Objetivo del Ejercicio: Modificar los atributos de color de fondo de la pgina, color del
texto y aadir los atributos de color de los hiperenlaces.
<HTML>
<HEAD>
<TITLE>Master and Commander </TITLE>
</HEAD>
<BODY BGCOLOR="lightblue" TEXT="navy" LINK="orange" VLINK="green"
ALINK="pink">
Las Guerras Napoleónicas: una época para el valor marinero
más allá de la llamada del deber y las aventuras heroicas
en los procelosos océanos. Y no hay nadie más valiente, más
honrado y más comprometido con los esfuerzos bélicos del Imperio

Pag. 26
Británico que Jack Aubrey, el capitán del HMS Surprise. <BR><BR>

En 1805 recibe órdenes de capturar el buque insignia de la Armada
Francesa, un barco muy superior al suyo que responde al nombre de
Acheron.<BR><BR>
Cuando el navío galo lanza un contraataque sorpresa Aubrey, a
pesar de los enormes da ños sufridos por su barco y su leal
tripulación, toma la decisión crucial de perseguir al Acheron
por los mares del Sur y cumplir así su misión.<BR><BR>
Sobreviviendo a los témpanos de hielo de la Antártida, a una
feroz tormenta en el Cabo de Hornos y a los rumores de un motín
a bordo, Aubrey está decidido a torpedear la misión de alto secreto
del Acheron: apropiarse del valioso cargamento de la flota ballenera
británica.<BR><BR><BR>
<A HREF="http://www.cinentradas.com"> Compra ya tu entrada</A>
</BODY>
</HTML>
Ejercicio 6: Aadir a la etiqueta BODY, del ejercicio anterior, los atributos

LEFTMARGIN=150 TOPMARGIN=30 y guardar la pgina con el nombre practicas6.htm
Objetivo del Ejercicio: Incluir los atributos de mrgenes a la pgina y comprobar su
funcionamiento.
Ejercicio 7: Aadir el siguiente comentario al documento practicas6.htm: Página

sobre la película de Russel Crowe, Master and Commander.
Objetivo del Ejercicio: Ver el funcionamiento de los comentarios en una pgina web.
Ejercicio 8: Crear la siguiente pgina web con el nombre practicas7.htm

Objetivo del Ejercicio: Ver el funcionamiento de los estilos lgicos y de los estilos fsicos.
<HTML>
<HEAD>
<TITLE>Master and Commander</TITLE>
</HEAD>
<BODY BGCOLOR="teal" TEXT="white" LEFTMARGIN="60" TOPMARGIN="30">
Los bravucones <BIG>héroes y villanos</BIG> nacidos de la fértil
imaginación del escritor superventas <CITE>Patric O'Brian </CITE> hacen su
primer viaje en barco por la gran pantalla en la película del director <CODE>Peter
Weir </CODE>. Usando los personajes principales de la primera novela de O'Brian,
<DFN>Capitán de mar y guerra</DFN>, y el esquema narrativo de la
décima entrega, La costa más lejana del mundo (O'Brian escribió 20
novelas en total sobre el tándem Aubrey - Maturin), la película es un
incomparable y fidedigno retrato de la vida en alta mar a comienzos del siglo XIX.
<BR><BR>

Pag. 27
Al frente de la misma figura el capitán <EM>Jack Aubrey</EM>, un verdadero

compendio de todos los héroes de cualquier época que navegan por los
mares.
<BR><BR>
<SMALL> Un personaje exageradamente arquetípico, no sólo de enorme
valor, tenacidad y capacidad de liderazgo, sino también un hombre con gran
corazón y un fabuloso sentido del humor.</SMALL>
<BR><BR>
Para los <SUB>197 integrantes</SUB > de la tripulación del HMS Surprise es
Jack <SUP>"El Afortunado"</SUP>; saben que les va a ayudar a superar cualquier
dificultad con la que se encuentren y, en último término, le otorgan su
más ciega confianza como capitán.
<BR><BR>
<B>Esta tripulación está compuesta por marineros de de diversas
nacionalidades (inglesa, francesa, polaca y sudanesa, por citar sólo unas pocas) y
diferentes edades. Contando con algunos guardiamarinas de tan sólo doce
años de edad, esta película entrecruza hábilmente sus experiencias a
bordo del HMS Surprise, donde Aubrey ejerce labores de guía y mentor, con las
aventuras épicas en mar abierto.</B>
<BR><BR>
<I>"Hay muy pocas personas en el mundo que puedan interpretar el papel del
capitán Jack Aubrey. Todos entienden que él sea el capitán y su
líder, y están dispuestos a seguirle hasta la muerte". (Duncan Henderson,
Productor)</I>
<BR><BR>
<U>"Nadie en el cine ha reproducido armas con este grado de fidelidad". (Martin
Bibbings, experto en armamento del Siglo XVIII)</U>
<BR><BR>
<TT> "Hemos extremado la precisión histórica. Recibimos de manos del
Almirantazgo Británico los pormenores de la construcción completamente
documentados, usamos fórmulas matemáticas para determinar el
tama ño adecuado del ancla... Se ha estudiado hasta el mínimo detalle, cada
cent ímetro cuadrado de este barco". (Leon Poindexter, experto en
construcción de barcos)</TT>
<BR><BR>
<S>"Ha sido un reto mayúsculo y la experiencia más extraordinaria
contar visualmente esta historia de una forma que pudiera hacer justicia a las palabras de
O'Brian" (Peter Weir, director)</S>
</BODY>
</HTML>
Ejercicio 9: En la pgina anterior, cambiar el color del fondo a blanco (white) y el color del
texto a negro (black) y guardar los cambios.
Objetivo del Ejercicio: Practicar con los atributos de la etiqueta BODY.

Pag. 28

Objetivo del Ejercicio: Conocer el funcionamiento y los diferentes atributos de la etiqueta
FONT.
<HTML>
<HEAD>
<TITLE>Buscando a Nemo </TITLE>
</HEAD>
<BODY BGC OLOR="#CDF0F8" TEXT="#105969" LEFTMARGIN="20"
TOPMARGIN="20">
<CENTER> <FONT FACE="Monotype Corsiva" SIZE="5"
COLOR="navy">Buscando a Nemo</FONT></CENTER>
<BR>
<FONT FACE="georgia" SIZE="2">
<CENTER>Título original: <FONT COLOR="blue">Finding
Nemo </FONT><BR>
Distribuidora: <FONT COLOR="blue">Buena Vista</FONT><BR>
Género: <FONT COLOR="blue">Aventura </FONT><BR>
Año de producción: <FONT COLOR="blue">2003</FONT><BR>
Fotografía: <FONT COLOR="blue">Sharon Calahan, Jeremy
Lasky </FONT><BR>
Dirección: <FONT COLOR="blue">Andrew Stanton</FONT><BR>
Guión: <FONT COLOR="blue">Andrew Stanton</FONT><BR>
Producción: <FONT COLOR="blue">John Lasseter</FONT><BR>
Músic a: <FONT COLOR="blue">Thomas Newman</FONT><BR>
Idioma: <FONT COLOR="blue">Inglés</FONT><BR>
Duración: <FONT COLOR="blue">101
minutos</CENTER></FONT><BR><BR>
<FONT FACE="verdana" SIZE="2" COLOR="darkred">
       Dos peces, Marlin y su hijo
Nemo, se ven obligados a separarse en la <B><U>Gran Barrera de Coral</U></B>, ya
que Nemo es capturado por un buceador. El pobre termina en la pecera de la consulta de un
dentista, desde la que se divisa el puerto de Sydney.</FONT><BR><BR>
<FONT FACE="arial" SIZE="2" COLOR="olive">
       Marlin, con la ayuda de un
simpático pero despistado pez llamado Dory (que carece de memoria inmediata), se
embarca en un peligroso viaje. El precavido padre acaba convirtiéndose en el
héroe de una verdadera epopeya cuyo fin es rescatar a su hijo, que por su parte ha
urdido un descabellado plan para volver sano y salvo a casa.</FONT><BR><BR>
<FONT FACE="comic sans ms" SIZE="2" COLOR="teal">
       El guionista y director de
<EM>Buscando a Nemo </EM>, Andrew Stanton, también codirigió el gran
éxito de Disney/Pixar de 1998, Bichos. También fue uno de los guionistas de
las cuatro películas anteriores realizadas por Disney y Pixar.</FONT><BR><BR>
<FONT FACE="courier new" SIZE="2" COLOR="purple">

Pag. 29
       <B>Buscando a Nemo</B>
marca un nuevo hito en el arte y la tecnología de animación por ordenador,
recreando un asombroso mundo subarino poblado de personajes absolutamente inolvidables.
La película es un escaparate espectacular del talento de los equipos técnicos
y creativos de Pixar. Para contar la historia de un modo convincente, el equipo
técnico tuvo que descubrir nuevas formas para mejorar aún más al
animar por ordenador las imágenes submarinas. Llevó a cabo una amplia
actividad de investigación y desarrollo para estudiar las propiedades del agua y
creó herramientas nuevas para abarcar todo el abanico de posibilidades que
incluía el guión.</FONT><BR><BR>
<FONT FACE="impact" SIZE="2" COLOR="silver">
       Para los animadores,
<I>Buscando a Nemo </I> supuso toda una serie de desafíos totalmente nuevos. El
equipo de animación, dirigido por el supervisor de animación Dylan Brown,
tuvo que superar el obst áculo que supon ía reflejar la gran variedad de
emociones y acciones de unos personajes que no tienen miembros ni cuerpos
normales.</FONT>
</BODY>
</HTML>
Ejercicio 11: En la pgina creada en el ejercicio anterior sustituir donde haya dos etiquetas
<BR> por una etiqueta <P> o <PRE>, segn se indica ms abajo. Guardar el documento con
el nombre practicas9.htm
Objetivo del Ejercicio: Ver el funcionamiento de las etiquetas de prrafo <P> y <PRE>.
<HTML>
<HEAD>
<TITLE>Buscando a Nemo</TITLE>
</HEAD>
<BODY BGCO LOR="#CDF0F8" TEXT="#105969" LEFTMARGIN="20" TOPMARGIN="20">
<CENTER> <FONT FACE="Monotype Corsiva" SIZE="5" COLOR="navy">Buscando a
Nemo</FONT></CENTER>
<BR>
<CENTER>T ítulo original: <FONT COLOR="blue">Finding
Nemo</FONT><BR>
Distribuidora: <FONT COLOR="blue">Buena Vista</FONT><BR>
Género: <FONT COLOR="blue">Aventura</FONT><BR>
Año de producción: <FONT COLOR="blue">2003</FONT><BR>
Fotografía: <FONT COLOR="blue">Sharon Calahan, Jeremy
Lasky</FONT><BR>
Dirección: <FONT COLOR="blue">Andrew Stanton</FONT><BR>
Guión: <FONT COLOR="blue">Andrew Stanton</FONT><BR>
Producción: <FONT COLOR="blue">John Lasseter</FONT><BR>
Música: <FONT COLOR="blue">Thomas Newman</FONT><BR>
Idioma: <FONT COLOR="blue">Inglés</FONT><BR>

Pag. 30
Duración: <FONT COLOR="blue">101 minutos</CENTER></FONT>

<P> </P>
<P ALIGN="right"><FONT FACE="verdana" SIZE="2" COLOR="darkred">
       Dos peces, Marlin y su hijo Nemo, se
ven obligados a separarse en la <B><U>Gran Barrera de Coral</U></B>, ya que Nemo es
capturado por un buceador. El pobre termina en la pecera de la consulta de un dentista,
desde la que se divisa el puerto de Sydney.</FONT></P>
<P ALIGN="center"><FONT FACE="arial" SIZE="2" COLOR="olive">
       Marlin, con la ayuda de un
simpático pero despistado pez llamado Dory (que carece de memoria inmediata), se
embarca en un peligroso viaje. El precavido padre acaba convirtiéndose en el
héroe de una verdadera epopeya cuyo fin es rescatar a su hijo, que por su parte ha
urdido un descabellado plan para volver sano y salvo a casa.</FONT></P>
<P ALIGN="left"><FONT FACE="comic sans ms" SIZE="2" COLOR="teal">
       El guionista y director de
<EM>Buscando a Nemo</EM>, Andrew Stanton, también codirigió el gran
éxito de Disney/Pixar de 1998, Bichos. También fue uno de los guionistas de
las cuatro películas anteriores realizadas por Disney y Pixar.</FONT></P>
<P ALIGN="justify"><FONT FACE="courier new" SIZE="2" COLOR="purple">
       <B>Buscando a Nemo </B> marca
un nuevo hito en el arte y la tecnología de animación por ordenador,
recreando un asombroso mundo subarino poblado de personajes absolutamente inolvidables.
La película es un escaparate espectacular del talento de los equipos técnicos
y creativos de Pixar. Para contar la historia de un modo convincente, el equipo
técnico tuvo que descubrir nuevas formas para mejorar aún más al
animar por ordenador las imágenes submarinas. Llevó a cabo una amplia
actividad de investigación y desarrollo para estudiar las propiedades del agua y
creó herramientas nuevas para abarcar todo el abanico de posibilidades que
incluía el guión.</FONT></P>
<PRE><FONT FACE="impact" SIZE="2" COLOR="silver">
Para los animadores,
<I>Buscando a Nemo</I>
supuso toda una serie de desafíos
totalmente nuevos.
El equipo de animación, dirigido por el
supervisor de animación
Dylan Brown,
tuvo que superar el obstáculo
que suponía reflejar la gran variedad de
emociones y acciones de
unos personajes que no tienen
miembros ni cuerpos normales.</FONT></PRE>
</BODY>
</HTML>

Pag. 31

Objetivo del Ejercicio: Conocer las caractersticas de las diferentes cabeceras que existen.
<HTML>
<HEAD>
<TITLE>Cabeceras</TITLE>
</HEAD>
<BODY>
<H1>Título de primer nivel</ H1>
<H2>Título de segundo nivel</H2>
<H3>Título de tercer nivel</H3>
<H4>Título de cuarto nivel</H4>
<H5>Título de quinto nivel</H5>
<H6>Título de sexto nivel</H6>
</BODY>
</HTML>

Objetivo del Ejercicio: Usar lneas de separacin en un documento aplicndoles diferentes
atributos.
<HTML>
<HEAD>
<TITLE>Líneas de Separación </TITLE>
</HEAD>
<BODY >
<HR>
<HR NOSHADE SIZE="4" WIDTH="260" COLOR="pink">
<HR ALIGN="right" WIDTH="60%" COLOR="#88C528">
<HR SIZE="20" COLOR="purple">
<HR ALIGN="center" SIZE="7" WIDTH="50%" COLOR="aqua">
</BODY>
</HTML>
Ejercicio 14: Crear la siguiente pgina web con el nombre practicas12.htm, con las
caractersticas que se especifican ms abajo.
Objetivo del Ejercicio: Practicar todos los elementos vistos hasta el momento, dejando
libertad al alumno para combinarlos y aplicarlos de forma adecuada.
La pgina web ser un cuento infantil.

Pag. 32
El cuento debe tener como mnimo un folio y medio, y mximo tres folios.
El ttulo del cuento debe aparecer en la barra de ttulo del navegador.
Utilizar como fondo una imagen o un color adecuado al cuento.
Utilizar combinaciones de colores para el texto.
Sustituir los smbolos especiales y o

l s caracteres acentuados por las secuencias de
escape correspondientes.
Utilizar lneas horizontales, cabeceras, negritas, cursivas, alineaciones diferentes,

estilos lgicos, etc
Utilizar y combinar todas las etiquetas posibles, de las vistas hasta el momento, para
crear una pgina infantil atractiva, elegante y fcil de leer.
Utilizar slo las etiquetas conocidas, cualquier otra etiqueta no ser tenida en cuenta
en la puntuacin del ejercicio.
Se puntuar el esfuerzo, la creatividad y la limpieza en el cdigo.
Ejercicio 15: Crear una carpeta llamada Cartelera dentro de la carpeta HTML. Mover el
archivo practicas9.htm a la carpeta Cartelera. Dentro de la carpeta Cartelera crear una
pgina Web con el nombre practicas13.htm, con la siguiente estructura:
Objetivo del Ejercicio: Practicar los hiperenlaces dentro de una pgina web.
<HTML>
<HEAD>
<TITLE>Cartelera</TITLE>
</HEAD>
<BODY BGCOLOR="maroon" TEXT="olive" LEFTMARGIN="20" TOPMARGIN="20"
LINK="white" VLINK="white" ALINK="white">
<CENTER> <FONT FACE="arial narrow" SIZE="6" COLOR="navy"> Cartelera
</FONT></CENTER>
<BR>
<A HREF="http://www.cinentradas.com" TARGET="_blank">Cartelera de
Cine</A>
<P> </p>
<A HREF="../practicas7.htm">Master and Commander</A>
<P> </p>

Pag. 33
<A HREF="practicas9.htm" TARGET="_blank">Buscando a Nemo</A>

<P> </P>
<HR>
<BR>
<CENTER><B><A NAME="directorio">Directorio de Películas</A></B>
<P><A HREF="#A">Letra A</A>
<A HREF="#B">Letra B</A>
<A HREF="#C">Letra C</A>
<A HREF="#D">Letra D</A>
<A HREF="#E">Letra E</A>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
</CENTER>
<FONT COLOR="aqua">
<FONT COLOR="blue"><A NAME="A"><B><I>Letra A</I></B></A> <BR>
</FONT>
<P>Al otro lado de la cama </P>
<P>Ali G</P>
<P>Alien</P>
<P>Amadeus</P>
<P>Amelie</P>
<P>Antz</P>
<P>Armagedon</P>
<P>American Pie </P>
<P> </P>
<P> </P>
<A HREF="#directorio">Volver al Directorio </A>
<P> </P>
<P> </P>
<FONT COLOR="blue"><A NAME="B"><B><I>Letra B</I> </B> </A>
<BR> </FONT>
<P>Buscando a Nemo </P>
<P>Braveheart</P>
<P>Bichos</P>
<P>Bar Coyote</P>
<P>Babe</P>
<P>Bandits</P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>

Pag. 34
<P> </P>
<FONT COLOR="blue"><A NAME="C"><B><I>Letra C</I> </B> </A>
<BR> </FONT>
<P>Cazafantasmas</P>
<P>Cabin Fever</P>
<P>Carmen </P>
<P>Carrie</P>
<P>Casablanca</P>
<P>Con la muerte en los talones</P>
<P>Crueldad Intolerable</P>
<P>Cowboys del Espacio</P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<FONT COLOR="blue"><A NAME="D"><B><I>Letra D</I></B></A>
<BR> </FONT>
<P>Dinosaurios</P>
<P>Dias de Futbol</P>
<P>Deep Impact</P>
<P>Dungeons and Dragons</P>
<P>Dos Policias Rebeldes </P>
<P>Doraemon</P>
<P>Daredevil</P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<FONT COLOR="blue">< A NAME="E"><B><I> Letra E</I></B></A> <BR>
</FONT>
<P>El Señor de los Anillos</P>
<P>El Exorcista</P>
<P>El Día de la Bestia</P>
<P>El Negociador</P>
<P>El Pacto de los Lobos</P>
<P>El Sexto Día</P>
<P> </P>
<P> </P>
<A HREF="#directorio">Volver al Directorio</A>
<P> </P>
<P> </P>
</FONT>
</BODY>
</HTML>

Ejercicio 16: Crea una nueva pgina Web con el nombre practicas14.htm
<HTML>
<HEAD>
<TITLE>Imagenes</TITLE>
</HEAD>
<BODY>
<IMG SRC ="logotanet.gif" ALT="Logo de Tanet" HEIGHT="30" WIDTH ="30">
<BR><BR>
<IMG SRC ="logotanet.gif" ALT="Imagen" HEIGHT="100" WIDTH ="100">
<BR><BR>
<IMG SRC ="logotanet.gif" ALT="Logo"><BR><BR>
<IMG SRC ="logotanet.gif" ALT="Mi nombre" HEIGHT="300" WIDTH="300"
BORDER="3">
</BODY>
</HTML>
Ejercicios 17. Crea una nueva Web con el nombre practicas15.htm

<HTML>
<HEAD>
<TITLE>Lista no ordenada</TITLE>
<HEAD>
<BODY>
<UL TYPE="circle">
<LH>Canciones 1</LH>
<LI>Fran Perea - <B>Mi Coraz ón</B></LI>
<LI>Alex Ubago - <B>Aunque no te pueda ver</B></LI>
<LI> Rosa - <B>La esencia de tu voz</B></LI>
<LI> Café Quijano - <B>Tequila</B></LI>
</UL>
<UL TYPE="square">
<LI>Tony Aguilar - <B>Latido Urbano</B></LI>
<LI> Chenoa - <B>En tu cruz me clavaste</B></LI>
<LI> Britney Spears - <B>Me against the music </B></LI>
<LI> Mago de Oz - <B>La Costa del Silencio</B></LI>
</UL>
<UL TYPE="disk">
<LI> La Oreja de Van Gogh - <B>Rosas</B></LI>
<LI> Kylie Minogue - <B>Slow</B></LI>
<LI> R.E.M. - <B> Bad Day </B></LI>
<LI>Tiziano Ferro - <B>Perverso</B></LI>
</UL>
Pag. 35

Pag. 36
</BODY>
</HTML>
Ejercicio 18. Crea una nueva Web con el nombre practicas16.htm

<HTML>
<HEAD>
<TITLE>Lista ordenada</TITLE>
<HEAD>
<BODY>
<OL TYPE="0" START="4">
<LI>Avril Lavigne - <B>Basketcase</B></LI>
<LI> David Demaría - <B>Petalos marchitos</B></LI>
<LI> Red Hot Chili Peppers - <B>Fortune faded</B></LI>
<LI>Man á - <B>Te llevaré al cielo</B></LI>
</OL>
<OL TYPE="A">
<LI> Natasha St-Pier - <B>Encontrarás</B></LI>
<LI>Miami Sound Machine - <B>Paso a paso</B></LI>
<LI>El Canto del Loco - <B>Ya nada volverá a
antes</B></LI>
<LI> Bruce Springsteen - <B>Viva las Vegas</B></LI>
</OL>
<OL TYPE="a">
<LI>Elefante - <B>De la noche a la mañana </B></LI>
<LI> Beyoncé - <B>Baby Boy - feat. Sean Paul</B></LI>
<LI>Vega - <B>La Verdad </B></LI>
<LI> Gates Gareth - <B>Spirit in the Sky </B></LI>
</OL>
<OL TYPE="I" START="5">
<LI>Enrique Iglesias - <B>Addicted </B></LI>
<LI>Pedro Javier Hermosilla - <B>Camino de Madrid </B></LI>
<LI>Texas - <B>Carnival Girl</B></LI>
<LI>Sidonie - <B>On the sofa</B></LI>
</OL>
<OL TYPE="i">
<LI>Love Spit Love - <B>How soon is now?</B></LI>
<LI> Hombres G - <B>Lo noto</B></LI>
<LI>Jewel - <B>Stand </B></LI>
<LI>Pink - <B>Trouble</B></LI>
</OL>
</BODY>
</HTML>
ser
como

Pag. 37

<HTML>
<HEAD>
<TITLE>Lista de definición</TITLE>
<HEAD>
<BODY>
<DL>
<LH>Glosario de Términos</LH>
<DT><B>Máscara</B></DT>
<DD>Figura de cartón, tela, etc..., imitando una cara, con que uno se
tapa el rostro para no ser conocido</DD>
<DT><B>Guirlache</B></DT>
<DD>Turrón de almendras tostadas y caramelo</DD>
<DT><B>Generación</B></DT>
<DD>Conjunto de personas que viven en la misma época</DD>
<DT><B>Agorafia </B></DT>
<DD>Temor angustioso y patológico de hallarse sólo en grandes
espacios abiertos</DD>
</DL>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Listas anidadas</TITLE>
<HEAD>
<BODY>
<OL>
<LH>Curso de HTML</LH>
<BR>
<LI>Introducción</LI>
<LI>Estructura Básica</LI>
<LI> Distribución del Contenido de una Página </LI>
<UL>
<LI> Listas</LI>
<UL>
<LI>Listas no ordenadas</LI>
<LI>Listas ordenadas</LI>
<LI>Listas de definición</LI>
</UL>
<LI>Tablas</LI>
<LI> Marcos o Frames </LI>
</UL>
</OL>
</BODY>
</HTML>

Pag. 38
Ejercicio 21. Crea una nueva Web con el nombre practicas19.htm, que contenga la
siguiente tabla sin bordes:
<HTML>
<HEAD>
<TITLE>Tabla sin borde</TITLE>
<HEAD>
<BODY>
<TABLE>
<TR>
<TH> 1 Cabecera</TH>
</TR>
<TR>
<TD> 1 Celda, 2 Fila </TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

Ejercicio 22. Aade los bordes a la tabla anterior.
<HTML>
<HEAD>
<TITLE>Tabla con borde</TITLE>
</ HEAD>
<BODY>
<TABLE BORDER>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Ejercicio 23. Aade un borde de 6 pixeles y de color azul a la tabla anterior.
Pag. 39

<HTML>
<HEAD>
<TITLE>Tabla con borde azul</TITLE>
</ HEAD>
<BODY>
<TABLE BORDER="6" BORDERCOLOR="blue">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Ejercicio 24. Aade el color de fondo azul claro a la tabla anterior.
<HTML>
<HEAD>
<TITLE>Tabla con borde azul</TITLE>
</ HEAD>
<BODY>
<TABLE BORDER="6" BORDERCOLOR="blue" BGCOLOR="lightblue">
<TR>
</TR>
<TR>
Pag. 40

<TD>
<TD>
</TR>
<TR>
<TD>
<TD>
<TD>
</TR>
</TABLE>
</BODY>
</HTML>
Pag. 41
2 Celda, 2 Fila </TD>


Ejercicio 25. Quita el color de fondo y añade la imagen logotanet.gif a la tabla

anterior.
<HTML>
<HEAD>
<TITLE>Tabla con imagen de fondo</TITLE>
</ HEAD>
<BODY>
<TABLE BORDER="6" BORDERCOLOR="blue" BACKGROUND="logotanet.gif">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

Ejemplo 26. Modifica el ancho de la tabla anterior, que ha de ser un 75%.
<HTML>
<HEAD>
<TITLE>Tabla</TITLE>
</ HEAD>
<BODY>
<TABLE BORDER="6" BORDERCOLOR="blue" WIDTH="75%">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Pag. 42

Ejemplo 27. Modifica el alto de la tabla anterior, que ha de ser un 33%.
<HTML>
<HEAD>
</ HEAD>
<BODY>
<TABLE BORDER="6" BORDERCOLOR="blue" HEIGHT="33%">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Pag. 43

Pag. 44
Ejercicio 28. Mantener el alto de la tabla y modifica el espacio entre celdas (30 pixeles).
<HTML>
<HEAD>
</ HEAD>
<BODY>
<TABLE BORDER="6" BORDERCOLOR="blue" HEIGHT="33%"
CELLSPACING="30">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

Pag. 45
Ejercicio 29. Mantener el alto de la tabla y modifica el espacio entre el borde y el contenido
de la tabla (30 pixeles).
<HTML>
<HEAD>
</ HEAD>
<BODY>
CELLPADDING="30">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

Pag. 46
Ejercicicio 30. Alinea la tabla en el centro de la pantalla.

<HTML>
<HEAD>
<TITLE>Tabla </TITLE>
</HEAD>
<BODY>
<TABLE BORDER="6" BORDERCOLOR="blue" HEIGHT="33%" ALIGN="center">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
siguiente tabla:
<HTML>
<HEAD>
</HEAD>
<BODY>

Pag. 47

ALIGN="center">
<TR VALIGN="top">
<TH BGCOLOR="lightblue"> 1 Cabecera</TH>
<TH BGCOLOR="silver"> 3 Cabecera</TH>
</TR>
<TR>
<TD BACKGROUND="logotanet.gif"> 2 Celda, 2 Fila </TD>
</TR>
<TR BORDERCOLOR="maroon">
<TD WIDTH="50%" ALIGN="center"> 2 Celda, 3 Fila </TD>
</TR>
</TABLE>
</BODY>
</HTML>
siguiente tabla, con un borde de 10 pixeles y de color olive:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="10" BORDERCOLOR="olive">
<TR>
<TD> 1 Celda, 1 Fila</TD>
<TD ROWSPAN="2"> 2 Celda, 1 Fila</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

Pag. 48
siguiente tabla, con un borde de 10 pixeles y de color olive:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="10" BORDERCOLOR="olive">
<TR>
<TD> 1 Celda, 1 Fila</TD>
<TD COLSPAN="2"> 2 Celda, 1 Fila </TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
siguiente tabla, con un borde de 2 pixeles y de color purple:
<HTML>
<HEAD>
</HEAD>
<BODY>

Pag. 49
<TABLE BORDER="2" BORDERCOLOR="purple">

<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
siguiente tabla, con un borde de 4 pixeles y de color yellow:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="4" BORDERCOLOR="yellow">
<TR>
</TR>
<TR>
<TD ROWSPAN="2"> 1 Celda, 2 y 3 Fila </TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

Pag. 50
siguiente tabla, con un borde de 4 pixeles y de color maroon:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="4" BORDERCOLOR="maroon">
<TR>
</TR>
<TR>
<TD ROWSPAN="2"> 1 Celda, 2 y 3 Fila </TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

Pag. 51
Ejercicio 37. Crea una nueva Web con el nombre ajedrez.htm, que contenga la siguiente
tabla en forma de tablero de Ajedrez, añade cada una de las fichas del tablero:
<HTML>
<HEAD>
<TITLE>Ajedrez </TITLE>
<HEAD>
<BODY>
<TABLE BORDER="2" BORDERCOLOR="black" ALIGN="center">
<TR>
<TD WIDTH="50" HEIGHT="50"> </ TD>
<TD BGCOLOR="black" WIDTH="50" HEIGHT="50"> </TD>
<TD WIDTH="50" HEIGHT="50"> </TD>
</TR>
<TR>

</TR>
<TR>
<TD
<TD
<TD
<TD
<TD
<TD
<TD
<TD
</TR>
<TR>
<TD
<TD
<TD
<TD
<TD
<TD
<TD
<TD
</TR>
<TR>
<TD
<TD
<TD
<TD
<TD
<TD
<TD
<TD
</TR>
<TR>
<TD
<TD
<TD
<TD
<TD
<TD
<TD
<TD
</TR>
<TR>
<TD
<TD
<TD
<TD
<TD
<TD
<TD
<TD
</TR>
<TR>
Pag. 52
WIDTH="50" HEIGHT="50"> </TD>
BGCOLOR="black" WIDTH="50" HEIGHT="50"> </TD>



Pag. 53

</TR>
</TABLE>
</BODY>
</HTML>
Ejercicio 38. Crea una nueva Web con el nombre parchis.htm.
<HTML>
<HEAD>
<TITLE>Parchís</TITLE>
<HEAD>
<BODY>
<TABLE BORDER="15" BORDERCOLOR="navy" ALIGN="center">
<TR>

Pag. 54
<TD ROWSPAN=7 COLSPAN= 7 BGCOLOR=yellow WIDTH=25

HEIGHT= 25></TD>
<TD COLSPAN=2 WIDTH=25 HEIGHT=25 >1</TD>
<TD COLSPAN=2 WIDTH=25 HEIGHT=25>68</TD>
<TD ROWSPAN=7 COLSPAN= 7 BGCOLOR=green WIDTH= 25
HEIGHT= 25></TD>
</TR>
<TR>
<TD COLSPAN=2 BGCOLOR=yellow WIDTH=25 HEIGHT=25></TD>
</TR>
<TR>
</TR>
<TR>
</TR>
<TR>
<TD COLSPAN=2 BGCOLOR=yellow WIDTH=25
HEIGHT= 25>5</TD>
</TR>
<TR>
</TR>
<TR>
</TR>
<TR>
<TD ROWSPAN=2 WIDTH=25 HEIGHT=25>16</TD>

Pag. 55

<TD WIDTH=25 HEIGHT=25>- </TD>
<TD WIDTH=25 HEIGHT=25>8</TD>
<TD ROWSPAN=2 BGCOLOR=green WIDTH=25
HEIGHT= 25>56</TD>
</TR>
<TR>
<TD WIDTH=25 HEIGHT=25 >9</TD>
<TD ROWSPAN=4 COLSPAN= 4 WIDTH= 25
HEIGHT= 25></TD>
</TR>
<TR>
<TD ROWSPAN=2 BGCOLOR=blue WIDTH=25 HEIGHT=25></TD>
<TD ROWSPAN=2 BGCOLOR=blue WIDTH=25 HEIGHT= 25></TD>
<TD ROWSPAN=2 BGCOLOR=green WIDTH=25 HEIGHT= 25></TD>
</TR>

Pag. 56
<TR>
</TR>
<TR>
<TD ROWSPAN=2 WIDTH=25 HEIGHT=25 >18</TD>
<TD ROWSPAN=2 BGCOLOR=blue WIDTH=25
HEIGHT= 25>22</TD>
</TR>
<TR>
</TR>
<TR>
<TD ROWSPAN=7 COLSPAN= 7 BGCOLOR=blue WIDTH=25
HEIGHT= 25></TD>
<TD COLSPAN=2 BGCOLOR=red WIDTH=25 HEIGHT= 25 ></TD>
<TD ROWSPAN=7 COLSPAN= 7 BGCOLOR=red WIDTH=25
HEIGHT= 25></TD>
</TR>
<TR>
</TR>
<TR>

<TD COLSPAN=2
HEIGHT= 25>39</TD>
</TR>
<TR>
<TD COLSPAN=2
<TD COLSPAN=2
</TD>
<TD COLSPAN=2
</TR>
<TR>
<TD COLSPAN=2
<TD COLSPAN=2
</TD>
<TD COLSPAN=2
</TR>
<TR>
<TD COLSPAN=2
<TD COLSPAN=2
</TD>
<TD COLSPAN=2
</TR>
<TR>
<TD COLSPAN=2
<TD COLSPAN=2
<TD COLSPAN=2
</TR>
</TABLE>
</BODY>
</HTML>
Pag. 57
BGCOLOR=red WIDTH=25
WIDTH=25 HEIGHT=25 >30</TD>

BGCOLOR=red WIDTH=25 HEIGHT= 25 >WIDTH=25 HEIGHT=25 >38</TD>




Pag. 58
Ejercicio 39. Crea una nueva Web con el nombre practicas26.htm que contenga el siguiente
formulario:
<HTML>
<HEAD>
<TITLE>Formularios: Campos de Texto</TITLE>
</HEAD>
<BODY BGCOLOR="palevioletred" TEXT="wheat">
<FORM>
<CENTER><FONT FACE="Monotype Corsiva" SIZE="5"><B>D a t o s
   P e r s o n a l e s</B></FONT></CENTER>
<HR COLOR="wheat">
<BR>
<TABLE CELLPADDING="10" ALIGN="center">
<TR>
<TD ALIGN="right">
<FONT FACE="century gothic" COLOR="lavender" SIZE="2">
<B>Nombre:</B>
</FONT>
</TD>
<TD>
<INPUT
TYPE="text"
NAME="nombre"
SIZE="10"
MAXLENGTH="30">
</TD>
</TR>
<TR>

Pag. 59
<TD ALIGN="right">
<B>Apellidos:</B>
</FONT>
</TD>
<TD>
<INPUT
TYPE="text"
NAME="apellidos"
SIZE="50"
MAXLENGTH="50">
</TD>
</TR>
<TR>
<TD ALIG N="right">
<B>Dirección:</B>
</FONT>
</TD>
<TD>
<INPUT
TYPE="text"
NAME="direccion"
SIZE="50"
MAXLENGTH="50">
</TD>
</TR>
<TR>
<TD ALIGN="right">
<B>Población:</B>
</FONT>
</TD>
<TD>
<INPUT
TYPE="text"
NAME="poblacion"
SIZE="10"
MAXLENGTH="30">
</TD>
</TR>
<TR>
<TD ALIGN="right">
<B>Provincia:</B>
</FONT>
</TD>
<TD>
<INPUT
TYPE="text"
NAME="provincia"
SIZE="10"
MAXLENGTH="30">
</TD>
</TR>
<TR>
<TD ALIGN="right">
<B>Código Postal:</B>
</FONT>
</TD>
<TD>
<INPUT
TYPE="text"
NAME="cod_postal"
SIZE="10"
MAXLENGTH="5">

</TD>
</TR>
<TR BGCOLOR="lightsteelblue">
<TD ALIGN="right">
<FONT FACE="century gothic"
<B>Usuario:</B>
</FONT>
</TD>
<TD>
<INPUT
TYPE="text"
MAXLENGTH="10">
<BR>
* Máximo 10 caracteres
</FONT>
</TD>
</TR>
<TD ALIGN="right">
<B>Contraseña:</B>
</FONT>
</TD>
<TD>
<INPUT
TYPE="password"
MAXLENGTH="10">
<BR>
* Máximo 10 caracteres
</FONT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Pag. 60
COLOR="lavender" SIZE="2">
NAME="usuario"
SIZE="10"
NAME="contrasena "
SIZE="10"

Pag. 61
formulario:
<HTML>
<HEAD>
<TITLE>Formularios: &AACUTE;reas de Texto</TITLE>
</ HEAD>
<BODY BGCOLOR="lightslategray" TEXT="lavender">
<FORM>
<CENTER><FONT FACE="Monotype Corsiva" SIZE="5"><B>L i b r o
    d e     V i s i t a s</B></FONT></CENTER>
<BR>
<TABLE ALIGN="center" BORDER="10" BORDERCOLOR="lightsteelblue"
CELLPADDING="20">
<TR>
<TD>
<TD ALIGN="right">
<B>Nombre:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="nombre" SIZE="10" MAXLENGTH="30">
</TD>
</TR>

Pag. 62
<TD ALIGN="right">
<B>E- mail:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="email" SIZE="50" MAXLENGTH="50">
</TD>
</TR>
<TD ALIGN="right">
<F O NT FACE="century gothic" COLOR="lavender" SIZE="2">
<B>Comentarios:</B>
</FONT>
</TD>
<TD>
<TEXTAREA NAME="comentarios" ROWS="5" COLS="45">Deja aqui tus
comentarios</TEXTAREA>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Ejercicio 41. Crea una nueva Web con el nombre seleccion.htm que contenga el siguiente
formulario:
<HTML>
<HEAD>
<TITLE>Formularios: Listas de Selección</TITLE>
</ HEAD>
<BODY BGCOLOR="tan" TEXT="darkred">
Seleccione las categorías que desee:
<FORM>
<SELECT NAME="categorias">
<OPTION VALUE="Drama">Drama</OPTION>
<OPTION VALUE="Fantastico">Cine Fant ástico</OPTION>
<OPTION VALUE="Aventura">Cine de Aventuras</OPTION>
<OPTION VALUE="Comedia">Comedias</OPTION>
<OPTION VALUE="Terror">Cine de Terror</OPTION>
<OPTION VALUE="Thriller">Thrillers</OPTION>
<OPTION VALUE="Romantico">Romático</ OPTION>
<OPTION VALUE="Accion">Cine de Acción</OPTION>
</SELECT>
</FORM>
</BODY>

Pag. 63
</HTML>
Ejercicio 42. Aade a la pgina anterior las siguientes caractersticas y comprueba su

funcionamiento:
Aade el atributo MULTIPLE y comprueba el efecto que produce en la

página. Selecciona 3 elementos diferentes, para ello pulsa la tecla Ctrl.
Aade el atributo SIZE=3 y comprueba el efecto que produce en la
página.
formulario:
<HTML>
<HEAD>
<TITLE>Formularios: Listas de Selección</TITLE>
</ HEAD>
<BODY BGCOLOR="darkcyan" TEXT="wheat">
<FORM>
<CENTER><FONT FACE="Trebuchet MS" SIZE="5"><B>A g E n D a
    D e     S e R v I c I o S</B></FONT></CENTER>

Pag. 64
<BR>
<TABLE ALIGN="center" BORDER="10" BORDERCOLOR="wheat"
CELLPADDING="20">
<TR><TD><TABLE CELLPADDING="10" ALIGN="center">
<TR BGCOLOR="wheat">
<TD ALIGN="center" COLSPAN="2">
<FONT FACE="century gothic" COLOR="darkcyan" SIZE="3">
<B>Seleccione el Servicio al que quiere Suscribirse</B>
</FONT>
</TD>
</TR>
<TR BGCOLOR="whitesmoke">
<TD ALIGN="right">
<B>Servicios:</B>
</FONT>
</TD>
<TD>
<SELECT NAME="servicios" SIZE="3" MULTIPLE>
<OPTION VALUE="Internet">Acceso a Internet</OPTION>
<OPTION VALUE="Agenda">Agenda</OPTION>
<OPTION VALUE="Boletines">Boletines</OPTION>
<OPTION VALUE="Buscador">Buscador</OPTION>
<OPTION VALUE="Callejero">Callejero</OPTION>
<OPTION VALUE="Chat">Chat</OPTION>
<OPTION VALUE="Compras">C ompras</OPTION>
<OPTION VALUE="Correo">Correo Web</OPTION>
</SELECT>
</TD>
</TR>
<TD ALIGN="right">
<B>E- mail:</B>
</FONT>
</TD>
<TD>
</TD>
</TR>
<TD ALIGN="right">
<B>Comentarios:</B>
</FONT>
</TD>
<TD>
<TEXTAREA NAME="comentarios" ROWS="5" COLS="45">Deja aqui tus
comentarios</TEXTAREA>
</TD>
</TR>
</TABLE>

Pag. 65
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
formulario con botones de opciones:
<HTML>
<HEAD>
<TITLE>Botones de Opciones</TITLE>
</HEAD>
<BODY BGCOLOR="lightblue" TEXT="dodgerblue">
<FORM>
<CENTER><FONT FACE="Impact" SIZE="5"><B>Encuesta del día</B>
</FONT>
<BR><BR>
<TABLE BORDER="2" BORDERCOLOR="slategray">
<TR>
<TD>
<FONT FACE="century gothic" COLOR="slategray" SIZE="2">
<B>Sabe qué es un virus informático:</B>
</FONT>
<BR><BR>
</TD>
</TR>
<TR>
<TD>
<FONT FACE="century gothic" COLOR="slategray" SIZE="2">
<INPUT TYPE="radio" NAME="virus" VALUE="si"><B>Sí</B>
<BR>
<INPUT TYPE="radio" NAME="virus" VALUE="no"><B>No</B><BR>
<INPUT TYPE="radio" NAME="virus" VALUE="ns_nc"> <B> NS/NC </B>
</FONT>

Pag. 66
</TD>
</TR>
</TABLE>
</CENTER>
</FORM>
</BODY>
</HTML>
Ejercicio 45. Aade a la pgina anter ior la siguiente caracterstica y comprueba su

funcionamiento:
Añade el atributo CHECKED a la opción Sí y comprueba

el efecto que produce.
Ejecicio 46. Crea una nueva Web con el nombre practicas30.htm que contenga el siguiente
formulario con cuadros de comprobacin:
<HTML>
<HEAD>
<TITLE>Cuadros de Comprobación</TITLE>
</ HEAD>
<BODY BGCOLOR="lavender" TEXT="sienna">
<FORM>
<CENTER><FONT FACE="Impact" SIZE="5"><B>I d I o M a S</B></FONT>
<BR><BR>
<TABLE BORDER="2" BORDERCOLOR="sienna">
<TR>
<TD>
<FONT FACE="century gothic" COLOR="sienna" SIZE="2">
<B>Seleccione los idiomas que conoce:</B>

Pag. 67
</FONT>
<BR><BR>
</TD>
</TR>
<TR>
<TD>
<FONT FACE="century gothic" COLOR="sienna" SIZE="2">
<INPUT TYPE="checkbox" NAME="idioma" VALUE="ingles" CHECKED>
<B>Inglés</B><BR>
<INPUT TYPE="checkbox" NAME="idioma" VALUE="frances">
<B>Francés</B><BR>
<INPUT TYPE="checkbox" NAME="idioma" VALUE="aleman">
<B>Alemán</B><BR>
<INPUT TYPE="checkbox" NAME="idioma" VALUE="ruso">
<B>Ruso</B><BR>
<INPUT TYPE="checkbox" NAME="idioma" VALUE="japones">
<B>Japonés</B><BR>
</FONT >
</TD>
</TR>
</TABLE>
</CENTER>
</FORM>
</BODY>
</HTML>
Ejercicio 47. Aade a la pgina anterior dos botones, uno de envo de informacin y otro de
borrado:
El botn de enviar debe aparecer con el texto Mandar Informe.

El botn de borrar debe aparecer con el texto Limpiar Informe.
Ejercicio 48. Crea una Web con el nombre curriculum.htm que contenga el siguiente
formulario:

Pag. 68

Pag. 69

Pag. 70
<HTML>
<HEAD>
<TITLE>Curriculum Vitae</TITLE>
</ HEAD>
<BODY BGCOLOR="darkred" TEXT="peachpuff">
<FORM>
<CENTER><FONT FACE="Impact" SIZE="5"><B>Inserta tu Curriculum
Vitae</B></FONT></CENTER>
<BR>
<TR BGCOLOR="peachpuff">
<FONT FACE="century gothic" COLOR="saddlebrown" SIZE="3">
<B>Datos Personales</B>
</FONT>
</TD>
</TR>
<TD ALIGN="left">
<FONT FACE="century gothic" COLOR="lightslategray" SIZE="2">
<B>Nombre:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="nombre" SIZE="30" MAXLENGTH="50">
</TD>
</TR>
<TD ALIGN="left">
<FONT FACE="century gothic" COLOR=" lightslategray" SIZE="2">
<B>1er Apellido:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="apellido1" SIZE="30" MAXLENGTH="50">
</TD>
</TR>
<TD ALIGN="left">
<FONT FACE ="century gothic" COLOR="lightslategray" SIZE="2">
<B>2 Apellido:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="apellido2" SIZE="30" MAXLENGTH="50">
</TD>
</TR>
<TD ALIGN="left">
<B>Teléfono:</B>
</FONT>

</TD>
<TD>
<INPUT TYPE="text" NAME="telefono" SIZE="30" MAXLENGTH="9">
</TD>
</TR>
<TD ALIGN="left">
<B>Móvil:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="movil" SIZE="30" MAXLENGTH="9">
</TD>
</TR>
<TD ALIGN="left">
<B>E- mail:</B>
</FONT>
</TD>
<TD>
</TD>
</TR>
<TD ALIGN="left">
<B>Fecha de Nacimiento:</B>
</FONT>
</TD>
<TD>
<SELECT NAME="dia" SIZE="1">
<OPTION VALUE="1">1</OPTION>
Pag. 71

Pag. 72
</SELECT>
<SELECT NAME="mes" SIZE="1">
<OPTION VALUE="enero">Enero</OPTION>
<OPTION VALUE="febrero">Febrero</OPTION>
<OPTION VALUE="marzo">Marzo</OPTION>
<OPTION VALUE="abril">Abril</OPTION>
<OPTION VALUE="mayo">Mayo</OPTION>
<OPTION VALUE="junio">Junio</OPTION>
<OPTION VALUE="julio">Julio</OPTION>
<OPTION VALUE="agosto">Agosto</OPTION>
<OPTION VALUE="septiembre">Septiembre</OPTION>
<OPTION VALUE="octubre">Octubre</OPTION>
<OPTION VALUE="noviembre">Noviembre</OPTION>
<OPTION VALUE="diciembre">Diciembre</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="ano" SIZE="6" MAXLENGTH="4">
</TD>
</TR>
<TD ALIGN="left">
<B>Sexo:</B>
</FONT>
</TD>
<TD>
<FONT FACE ="century gothic" COLOR="lightslategray" SIZE="2">
<INPUT TYPE="radio" NAME="sexo" VALUE="hombre">
<B>Hombre</B>
<INPUT TYPE="radio" NAME="sexo" VALUE="mujer"><B>Mujer</B>
</FONT>
</TD>
</TR>
<TR BGCOLOR="darkred">

</TD>
</TR>

Pag. 73

<B>Localización</B>
</FONT>
</TD>
</TR>
<TD ALIGN="left">
<B>Dirección:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="direccion" SIZE="30" MAXLENGTH="50">
</TD>
</TR>
<TD ALIGN="left">
<B>Población:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="poblacion" SIZE="30" MAXLENGTH="50">
</TD>
</TR>
<TD ALIGN="left">
<B>C ódigo Postal:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="codigo_postal" SIZE="30" MAXLENGTH="5">
</TD>
</TR>
<TD ALIGN="left">
<B>Provincia:</B>
</FONT>
</TD>
<TD>
<SELECT NAME="provincia" SIZE="1">
<OPTION VALUE="sevilla">Sevilla</OPTION>
<OPTION VALUE="cordoba">Córdoba</OPTION>
<OPTION VALUE="jaen">Jaén</OPTION>
<OPTION VALUE="almeria">Almeria</OPTION>
<OPTION VALUE="malaga">Málaga</OPTION>
<OPTION VALUE="huelva">Huelva</OPTION>
<OPTION VALUE="granada">Granada</OPTION>
<OPTION VALUE="cadiz">Cádiz</OPTION>
</SELECT>

</TD>
</TR>
<TD ALIGN="left">
<B>País:</B>
</FONT>
</TD>
<TD>
<SELECT NAME="pais" SIZE="1">
<OPTION VALUE="espana">España</OPTION>
<OPTION VALUE="francia">Francia</OPTION>
<OPTION VALUE="italia">Italia</OPTION>
<OPTION VALUE="alemania">Alemania</OPTION>
<OPTION VALUE="suiza">Suiza</OPTION>
<OPTION VALUE="holanda">Holanda</OPTION>
<OPTION VALUE="austria">Austria</OPTION>
<OPTION VALUE="finlandia">Finlandia</OPTION>
</SELECT>
</TD>
</TR>

</TD>
</TR>
<B>Curriculum Vitae</B>
</FONT>
</TD>
</TR>
<TD ALIGN="left">
<B>Datos del Curriculum:</B>
</FONT>
</TD>
<TD>
<TEXTAREA NAME="comentarios" ROWS="10" COLS="45">Inserta
aquí tu Curriculum</TEXTAREA>
</TD>
</TR>

</TD>
</TR>
Pag. 74

Pag. 75
<B>Perfil Profesional</B>
</FONT>
</TD>
</TR>
<TD ALIGN="left">
<B>Situación Laboral:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="radio" NAME="situacion_laboral"
VALUE="trabajador_activo"><B>Trabajador en Activo</B>
<INPUT TYPE="radio" NAME="situacion_laboral"
VALUE="desempleado"><B>Desempleado</B>
</FONT>
</TD>
</TR>
<TD ALIGN="left">
<B>Puesto de Trabajo<BR> Preferente:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="puesto_trabajo" SIZE="30"
MAXLENGTH="50">
</TD>
</TR>
<TD ALIGN="left">
<B>Perfil Profesional:</B>
</FONT>
</TD>
<TD>
<SELECT NAME="provincia" SIZE="8" MULTIPLE>
<OPTION VALUE="administracion">Administración</OPTION>
<OPTION VALUE="asesoria">Asesoría</OPTION>
<OPTION VALUE="comercial_venta">Comercial - Venta</OPTION>
<OPTION VALUE="construccion">Construcción</OPTION>
<OPTION VALUE="formacion">Formación</OPTION>
<OPTION VALUE="marketing">Marketing</OPTION>
<OPTION VALUE="programacion">Programación</OPTION>
<OPTION VALUE="restauracion">Restauraci& oacute;n</OPTION>
<OPTION VALUE="sanidad">Sanidad</OPTION>
<OPTION VALUE="telecomunicaciones"> Telecomunicaciones
             &
nbsp;   </OPTION>
</SELECT>
</TD>

Pag. 76
</TR>

</TD>
</TR>
<F ONT FACE="century gothic" COLOR="saddlebrown" SIZE="3">
<B>Formación</B>
</FONT>
</TD>
</TR>
<TD ALIGN="left">
<B>Nivel:</B>
</FONT>
</TD>
<TD>
<SELECT NAME="nivel" SIZE="1">
<OPTION VALUE="sin_estudios">Sin Estudios</OPTION>
<OPTION VALUE="graduado_escolar">Graduado Escolar</OPTION>
<OPTION VALUE="fp1">FP1</OPTION>
<OPTION VALUE="fp2">FP2</OPTION>
<OPTION VALUE="bup_cou">BUP/COU</OPTION>
<OPTION VALUE="ciclo_superior">Ciclo Formativo de Grado
Superior</OPTION>
<OPTION VALUE="diplomado">Diplomado</OPTION>
<OPTION VALUE="ingeniero_tecnico">Ingeniero
Técnico</OPTION>
<OPTION VALUE="ingeniero_superior">Ingeniero Superior</OPTION>
<OPTION VALUE="licenciado">Licenciado</OPTION>
<OPTION VALUE="doc torado">Doctorado</OPTION>
</SELECT>
</FONT>
</TD>
</TR>
<TD ALIGN="left">
<B>Especialidad:</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="text" NAME="especialidad" SIZE="35" MAXLENGTH="50">
</TD>
</TR>
<TD ALIGN="left">

</TEXTAREA>
Pag. 77
<B>Otros Est udios:</B>

</FONT>
</TD>
<TD>
<TEXTAREA NAME="otros_estudios" ROWS="7" COLS="27">
</TD>
</TR>

</TD>
</TR>
<B>Conocimientos</B>
</FONT>
</TD>
</TR>
<TD ALIGN="left">
<FONT FAC E="century gothic" COLOR="lightslategray" SIZE="2">
<B>Idiomas:</B>
</FONT>
</TD>
<TD>
<TABLE WIDTH="100%">
<TR>
<TD>
<INPUT TY PE="checkbox" NAME="idiomas" VALUE="aleman">
<B>Alemán</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="arabe">
<B>&AACUTE;rabe</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="chino">
<B>Chino</B>
</FONT>
</TD>
</TR>
<TR>
<TD>

Pag. 78
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="ingles">

<B>Inglés</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="italiano">
<B>Italiano</B>
</FONT>
</TD>
<TD>
<INPUT TYPE="checkbox" NAME="idiomas" VALUE="frances">
<B>Francés</B>
</FONT>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TD ALIGN="left">
<B>Informática:</B>
</FONT>
</TD>
<TD>
<B>1</B>  </FONT><INPUT TYPE="text" NAME="informatica1" SIZE="35"
MAXLENGTH="50"><BR>
MAXLENGTH="50"><BR>
MAXLENGTH="50"><BR>
<FONT FACE="century gothic" COLOR=" lightslategray" SIZE="2">
MAXLENGTH="50"><BR>
MAXLENGTH="50">
</TD>
</TR>

</TD>
</TR>

Pag. 79
<INPUT TYPE="submit" VALUE="Enviar">


<INPUT TYPE="reset" VALUE="Borrar">
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
3.4.- W3C Markup Validation Service
1. Paso:
http://www.w3.org/
2. Paso:
http://www.w3.org/QA/Tools/#validators
The W3C's main production are its Specifications, but in the core of its
philosophy is the belief that the natural complement to specifications is
running code.
This page lists some of the tools provided by the W3C in the domain of
Quality Assurance: validators and other test tools. Almost all of these tools
are web-based, are available both as downloadable source, and as free
services on the w3.org site.

Pag. 80
The Basics - what you should run on all your web pages:
q The MarkUp Validator. - Also known as the HTML validator, it

helps check Web documents in formats like HTML and XHTML,
SVG or MathML.
q The Link Checker - Checks anchors (hyperlinks) in a HTML/XHTML
document. Useful to find broken links, etc.
q The CSS Validator - validates CSS stylesheets or documents using
CSS stylesheets.
3. Paso:
This is the W3C Markup Validation Service, a free service that checks Web
documents in formats like HTML and XHTML for conformance to W3C
Recommendations and other standards.
if you wish to validate specific content such as RSS/Atom feeds or CSS
stylesheets or to find broken links , there are other validators and tools
available.
Validate Your Markup
Validate by URL
Address:
Check
Enter the URL of the page you want to check. Advanced options are available
from the Extended Interface .

Tutorial Funciones en JSP y HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tutorial Funciones en JSP y HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Mdulo: Desarrollo de Funciones en el Sistema de Informacin

2 Administracin de Sistemas Informticos

Tema 7.- Desarrollo de funciones y

Copyleft 2006 Juan Antonio Lpez Quesada.

2.- Plataforma para el Desarrollo de funciones y aplicacin en JSP ______________________3

2.3.- Estructura y despliegue de aplicaciones web ________________________________ ____12

3.- Tag HTML ________________________________________________________________22

Profesor: Juan Antonio Lpez Quesada.

1.- Introduccin al Desarrollo de funciones y aplicacin en

2.- Plataforma para el Desarrollo de funciones y aplicacin en

Profesor: Juan Antonio Lpez Quesada.

NetBeans IDE with Application Server:

2.2.- Introduccin al Servidor de Aplicaciones Tomcat de Apache

Tomcat es un contenedor de Servlets con un entorno JSP. Un contenedor de

2.2.1.- Cul es la Diferencia entre Tomcat y Jserv?

Profesor: Juan Antonio Lpez Quesada.

2.2.2.- Arrancar y Parar Tomcat

Arrancamos y paramos Tomcat usando los scripts que hay en el directorio

2.2.3.- La Estructura de Directorios de Tomcat

Contiene los scripts de arrancar/parar

Contiene varia documentacin sobre Tomcat (Este manual, en

Profesor: Juan Antonio Lpez Quesada.

Sobre UNIX, cualquier fichero de este directorio se aade al

Contiene aplicaciones Web de Ejemplo.

Adicionalmente podemos, o Tomcat crear, los siguientes directorios:

2.2.4.- Los Scripts de Tomcat

Nota: Los scripts son slo una forma conveniente de arrancar/parar...

Profesor: Juan Antonio Lpez Quesada.

Qu son esos scripts? La siguiente tabla presenta los scripts ms

El script ms importante para los usuarios es tomcat (tomcat.sh/tomcat.bat).

Averigua donde est TOMCAT_HOME si no se especifica.

Profesor: Juan Antonio Lpez Quesada.

1. La operacin a ejecutar start/stop/run/etc.

bin/tomcat.sh start -f /etc/server_1.xml

Profesor: Juan Antonio Lpez Quesada.

Restaura las configuraciones de

2.2.5.- Ficheros de Configuracin de Tomcat

q server.xml - El fichero de configuracin golbal de Tomcat.

Profesor: Juan Antonio Lpez Quesada.

Este elemento define un objeto logger. Cada objeto

Estos interceptores escuchan ciertos eventos que

El Connector representa una conexin al usuario, a

Profesor: Juan Antonio Lpez Quesada.

de leer/escribir las peticiones/respuestas desde los

Cada Context representa un path en el rbol de

Se puede encontrar informacin adicional dentro del fichero server.xml.

Profesor: Juan Antonio Lpez Quesada.

Podemos encontar una detallada descripcin de web.xml y la estructura de la

Una APLICACIN WEB consiste en un conjunto de servlets, pginas

q Mediante un fichero de extensin war (Web Application

Resource, a veces tambin se le suele llamar Web ARchive)

Profesor: Juan Antonio Lpez Quesada.

q Etapa de desarrollo: su usa una estructura de directorios. Se

Despliegue mediante war

Dos servlets: ServletPrueba.java y ServletEnlace.java

Un fichero html y una imagen: FormularioPrueba.html y tomcat.gif

Un fichero xml: web.xml

Cul es el siguiente paso?

Profesor: Juan Antonio Lpez Quesada.

q En el caso de Tomcat es tomcat_home\webapps

Profesor: Juan Antonio Lpez Quesada.

Cdigo del fichero descriptor de despliegue de la aplicacin: web.xml

Profesor: Juan Antonio Lpez Quesada.

Profesor: Juan Antonio Lpez Quesada.

2.3.- Estructura y despliegue de aplicaciones web ____________________________ 12

Británico que Jack Aubrey, el capitán del HMS Surprise. <BR><BR>

Ejercicio 7: Aadir el siguiente comentario al documento practicas6.htm: Página

Al frente de la misma figura el capitán <EM>Jack Aubrey</EM>, un verdadero

Duración: <FONT COLOR="blue">101 minutos</CENTER></FONT>

Ejercicio 25. Quita el color de fondo y añade la imagen logotanet.gif a la tabla