5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 1/35
Julio 2003, 1
HTML Dinámico (introducción)
HTML + DOM + JavaScript<html> ... </html> window.document, ... <script> ... </script>
Elementos estándar (multiplataforma), independientes del navegador:
DHTML: Es un término de marketing, empleado por
Netscape y Microsoft, para describir las tecnologíassoportadas en la version 4 de sus respectivosnavegadores. Y por ello tiene una gran dependencia
con el navegador que emplemos.
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 2/35
Julio 2003, 2
HTML Dinámico (Cliente)
Capas + Estilos<div> ... </div> css
Flash<object> ... </object>
Java<object> ... </object>
Elementos incorporados en los propios navegadores, y portanto no es necesario descargarse ningún software.
VRML<object> ... </object>
Elementos externos a los navegadores, que son incrustadosen las páginas web (<object>). Para su funcionanmiento enuna página web necesitan de un software especial o plugin.
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 3/35
Julio 2003, 3
HTML Dinámico (Ejemplo: VRML)
http://www.canoma.com/vrml
http://www.web3d.orghttp://www.cai.com/cosmo/
http://web3d.about.com/
•Lenguaje de Modelado para Realidad Virtual. Creación de
mundos virtuales, objetos 3D y escenarios 3D, posibilitando la interaccióncon los objetos, y movimiento del espectador
EJEMPLO
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 4/35
Julio 2003, 4
Nuevas Tecnologías: Flash, etc.
Programas de edición de animaciones, que permiten desarrollar fácilmenteficheros que se pueden incrustar en una página Web. Ejemplo
Mostrar fichero flash
Toda la programaciónse realiza de formavisual (arrastrandoobjetos, etc.).
El código resultante esespecífico de cadaproducto y se requiereun plugg-in en elnavegador para poder
interpretarlo.
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 5/35
Julio 2003, 5
HTML Dinámico (Ejemplo: FLASH)
http://www.flash-es.net/topten/topten.html
http://www.plusmedia.es/
http://www.macromedia.com
Flash: Creación y diseño de animaciones en una página
web.
http://www.programatium.com/flash/
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 6/35
Julio 2003, 6
JAVA. Ejemplo de Aplicación Cliente Servidor
http://grupos.unican.es/ai/meteo
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 7/35
Julio 2003, 7
HTML Dinámico (Servidor)
? El acceso a información que cambia en el tiempo,
requiere un esquema de programación cliente/servidor.
Página web de AIMet
http://www.alsa.es
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 8/35
Julio 2003, 8
Aplicaciones cliente / servidor
•Cuando un servidor web recibe una petición de una página HTML
simple, solamente se trata de encontrar el archivo adecuado y devolverlo.Se trata de contenido estático .
•Actualmente la gran parte de de las páginas web son de contenidodinámico , debido a que presentan información que cambia con el tiempo.
•Podemos querer que en función de la fecha, hora, país o identificacióndel ususario la respuesta a esta petición sea diferente.
•También es muy frecuente encontrar páginas web que muestraninformación originada en una base de datos .
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 9/35
Julio 2003, 9
?
Javaes un potente lenguaje de
programación orientado a objetos.
? Todo el entorno de desarrollo (SDK)para crear ficheros .class con códigopseudocompilado para intérpretesJava.
? Los programas son compilados en
ficheros “pseudo-ejecutables” que sepueden ser interpretados:
– (aplicaciones) máquina virtual, o
– (applets) plug-in de un navegador Web.
? Tiene reglas estrictas sobre cómodeclarar y utilizar variables.
(control estricto de tipos)
• Independencia de plataforma
(UNIX, Windows, Mac,...).• Orientado a objetos
(Obligado a implementar).
• Seguridad y confianza:lenguaje, compilador, interprete
• Simplicidad:gestión automática de “basura”.
• Estándar.• Computación distribuida.
• “Clases" potentes para desarrollo.(GUI,NET,BD)
• Generación rápida de código.
• Documentación y Mantenimiento.
• Rendimiento????.
JAVA no es sólo un Lenguaje de Programación, JAVA es además un conjunto
de herramientas avanzadas: JAVA es una Tecnología
Tecnología Java
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 10/35
Julio 2003, 10
HTML Dinámico (Ejemplo: JAVA)
Java: Lenguaje de programación desarrollado para la Web.
Su principal fundamento es, que todo programa, puedeejecutarse, sin ser modificado, en cualquier plataforma.
http://java.sun.com/
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 11/35
Julio 2003, 11
Tecnologías Actuales Java
JavaTM
technologies:
•J2SETM ,•J2EETM ,•J2METM,•JAX XML.
SDK(Standard Development Kit)
JRE(Java RunTime Enviroment)
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 12/35
Julio 2003, 12
Elementos de Desarrollo para Java
•Java 1.0 –212 Clases, 8 paquetes
•Java 1.1 –504 Clases, 23 paquetes
–Mejopras en el rendimiento de la VM
•Java 1.2 –1520 Clases, 59 paquetes
–Plataforma Java 2.0
•Java 1.4.1 (Beta), Julio 2002
• Para trabajar con Java 1.0 o Java 1.1
–Java Development Kit para la versión (JDK)
• Para trabajar con Java 1.2 (Renombrado como Java 2)
–Software Development Kit(SDK) o más concreto:
–Java 2 SDK, Standard Edition Ver. 1.2, ...
El lenguaje de programación Java: Lenguaje de programación.
Un lenguaje con una sintaxis similar a C, orientado a Objetos
Evitando las características complejas que han caracterizado a otros lenguajes como C++
La máquina virtual Java (JVM): Hardware/Software (habitual).Es la parte imprescindible para poder ejecutar programas Java
•Sun: Solaris, Linux y Windows, También para Mac, Unix…Palm OS…
A pesar de ser un intérprete, la VM tiene un buen rendimiento.JIT Compiler ( Just-In-Time compilers).
–Propio de la Máquina Virtual
–Bytecodes convertidos instantáneamente en código nativo de la plataforma correspondiente
–Mejora en la velocidad de ejecución
–Hotspot => Buena implantación de JIT
• Java Runtime Environment (JRE)Contiene todo lo necesario para ejecutar programas Java
pero no para desarrollarlos
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 13/35
Julio 2003, 13
Ejemplo de un Applet JAVA
import java.applet.*;import java.awt.*;
public class MiApplet extends Applet {
public void paint (Graphics g){
g.drawLine(1,1,50,50);
g.fillOval(40,40,20,20);
}}
<html><head></head><body>
<applet code="MiApplet.class" width="100" height="100">
</body></html>
EjemploApplet.html
MiApplet.java
Ver Ejemplo
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 14/35
Julio 2003, 14
Programación: JavaScript vs Java
? JavaScript es un lenguaje simple
para usos sencillos.
? Es relativamente fácil de utilizar.
? No es necesario ningún Kit dedesarrollo, ya que sólo se precisaescribir scripts.
? Los scripts se insertan directamenteen el código HTML, por lo que no haynecesidad de compilarlo.
? Está basado en objetos, que puedenutilzarse en un script.
? Es muy poco restrictivo en cuanto a ladeclaración y uso de variables.
? Java es un potente lenguje de
programación orientado a objetos.
? Es complicado de utilizar.
? Necesita JDK para crear ficheros.class con códigopseudocompiladopara intérpretes Java.
? Los programas son compilados enficheros “ejecutables” o en “applets”que se pueden incrustar en páginasWeb.
? Es un completo lenguaje deprogramación orientada a objetos.
? Tiene reglas estrictas sobre cómo
declarar y utilizar variables.
Ambos lenguajes son independientes de plataforma y sus programaspueden ejecutarse sobre Internet, en una página Web.
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 15/35
Julio 2003, 15
Otras Tecnologías Web .Net (Microsoft)
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 16/35
Julio 2003, 16
Hojas de estilo CSS
Con el HTML se intentó desde un principio la definición de estilos lógicos quese centrasen más en el contenido de la información que en su presentación.
El gran éxito de Internet motivó una evolución del HTML centrada en mejorarsu presentación.
Hemos llegado a un HTML demasiado complejo para sus objetivos iniciales yen muchos casos incompatible entre los principales navegadores.
Las hojas de estilo vienen a intentar volver a separar en un documento elcontenido del estilo físico.
CSS son las siglas de "Cascade StyleSheet" y se trata de una especificaciónsobre los estilos físicos aplicables a un documento HTML, trata de dar laseparación definitiva de la estructura y la presentación del documento.
La finalidad de las hojas de estilo es crear unos estilos físicos, separados delas etiquetas HTML, y aplicarlos en los bloques de texto en los que se quieranaplicar, en lugar de cómo parámetros de las etiquetas.
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 17/35
Julio 2003, 17
Aplicación
Tenemos varias posibilidades para definir un estilo:
1. Directamente en la etiqueta en la que queremos usarlo.
2. Definirlo globalmente para toda la página html.
<HTML><HEAD>
<TITLE>ejemplo1</TITLE></HEAD><BODY><P STYLE=color:blue;font-size:18pt; >
Este pá ;rrafo tiene aplicado un estilo<P>y este otro no.</BODY></HTML>
1. Directamente en la etiqueta en la que queremos usarlo:
<ETIQUETA STYLE=propiedad1:valor;....;propiedad2:valor;>....</ETIQUETA>
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 18/35
Julio 2003, 18
Aplicación
2. Para definir una hoja de estilos de forma global empleamos la etiqueta
<STYLE> ... </STYLE> que debe estar colocada en la cabecera del documento.
<STYLE TYPE="text/css"><!—Etiqueta1:{propiedad1:valor;...propiedadn:valor}/* podemos introducir comentarios */...Etiquetam:{propiedad1:valor;...}
//--></STYLE>
<HTML><HEAD><TITLE>ejemplo3</TITLE><STYLE><!--
P {font-family:Verdana;color=green}B {color=blue}
--></STYLE>
</HEAD><BODY>
<P>Fuente de estilo Verdana y colorverde, la<B> negrita </B> en azul</BODY></HTML>
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 19/35
Julio 2003, 19
Aplicación
Podemos definir el estilo en un fichero externo de texto con la extensión .css
y luego referenciarlo desde el propio documento HTML, lo haremos dentro dela cabecera del documento con la etiqueta:
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo1.css">
/* Fichero estilo1.css */<!--
P {font-family:Verdana;color=green}
B {color=blue}-->
<HTML><HEAD>
<TITLE>ejemplo3</TITLE><LINK REL="stylesheet"
TYPE="text/css"HREF="estilo1.css">
</HEAD><BODY><P>Fuente de estilo Verdana y colorazul, la<B> negrita </B> en verde</BODY></HTML>
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 20/35
Julio 2003, 20
Herencia de estilos
Las etiquetas de un documento HTML estan organizadas de manera que unas
engloban a otras. Esta organización permite una relación padre-hijo de maneraque los estilos definidos para etiquetas padres serán heredados por los hijos.Sin embargo si tenemos definido un estilo para una etiqueta "padre", podremosdefinir un estilo distinto para una etiqueta "hija", el cual prevalece sobre elheredado.<HTML><HEAD><TITLE>Ejemplo4</TITLE>
<STYLE><!--
P {font-family:Verdana; color=green}B {color=blue}
--></STYLE></HEAD>
<BODY>
<P><I>La letra cursiva hereda el estilodel pá ;rrafo</I> mientras que<B>la negrita tiene su estilo propio</B></BODY></HTML>
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 21/35
Julio 2003, 21
Clases
Una clase es una definición de estilo que en principio no está asociado a algunaetiqueta HTML, pero que podemos asociar, en el documento, a etiquetas
concretas. Definimos la clase como un estilo más, de la forma:
.Nombre_de_la_Clase {propiedad1:valor;propiedad2:valor;...}
Para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos elparámetro CLASS
<etiqueta CLASS="Nombre_de_la_Clase">....</etiqueta>
<HTML><HEAD> <TITLE>ejemplo7</TITLE><STYLE TYPE="text/css"><!--
BODY {font-family:Verdana; color=blue;}B,P {color=red;}.Baqua {color=aqua;}
--></STYLE>
</HEAD><BODY>El texto está ; escrito en azul <P>lospá ;rrafos en rojo</P>así ; como <B>la negrita </B>, <B CLASS="Baqua">pero en esta
otra negrita estoy aplicando una clase.</B></BODY></HTML>
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 22/35
Julio 2003, 22
Propiedades
XX unidades | %100 | 200... 400 |... 900normal |italic |boldArial, Courier... | sans-serif
font-sizefont-weightfont-stylefont-family
Propiedades de las fuentes
XX unidades | % |
0
underline | overline |
line-throug | blink | none
left | right |center |
justify
uppercase | lowercase|
none | capitalize
text-indenttext-decorationtext-aligntext-transform
Propiedades del texto
none |
url("direccion")
transparent | red, blue... |
RGB
red, blue... |
RGB
background-imagebackground-colorcolor
Propiedades de los colores y los fondosaqua, black, blue,fucshia, gray, green,lime, marron, navy,olive, purple, red, silver,teal, white y yellow
XX unidades | %XX unidades | % | auto | 0
padding-top, padding-botton, padding-left,
padding-right, padding
margin-top, margin-botton, margin-left,
margin-right, margin
Propiedades de márgenes y padding
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 23/35
Julio 2003, 23
Ejemplo de hojas de estilo I
<HTML><HEAD><TITLE>ejemplo5</title><LINK REL="stylesheet" TYPE="text/css"HREF="estilo2.css"><STYLE><!--
TD B {color=olive}UL B {color=purple}
-->
</STYLE></HEAD><BODY>
Texto normal <B>y texto en negrita</B>, según el estiloque hemos importado.<UL><LI>Elemento 1<LI>Elemento 2<LI><B>Elemento 3 en negrita</B></UL><TABLE BORDER="1">
<TR><TD>Celda (1,1)</TD><TD>Celda (1,2)</TD></TR><TR><TD><B>Celda (2,1) en negrita</B></TD><TD>Celda (1,2)</TD></TR></TABLE></BODY></HTML>
/*fichero estilo2.css */<!--/* estilo para el documento */
BODY {font-family:Verdana,Arial;color=blue}
/* estilos para otras etiquetas */B,TD {color=red}
-->
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 24/35
Julio 2003, 24
Ejemplo de hojas de estilo II
La etiqueta A,
A:link {propiedad1:valor;propiedad2:valor;...}
A:visited {propiedad1:valor;propiedad2:valor;...}
A:active {propiedad1:valor;propiedad2:valor;...}
A:hover {propiedad1:valor;propiedad2:valor;...}
<HTML><HEAD>
<TITLE>ejemplo6</TITLE><STYLE TYPE="TEXT/CSS"><!--
A:link {color:#0000ff;}A:visited {color:#00ff00;}
A:active {color:#cccccc;}A:hover {color:#f3fe1e;}
--></STYLE><BODY><P>Un <a href="http://www.unican.es"> enlace </A> de prueba</BODY></HTML>
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 25/35
Julio 2003, 25
Ejemplos de hojas de estilos III
/* fichero de estilo */
P { font-size : 12pt;font-family : arial,helvetica;font-weight : normal;
}H1 { font-size : 36pt;
font-family : verdana,arial;text-decoration : underline;text-align : center;
background-color : Teal;}TD { font-size : 10pt;
font-family : verdana,arial;text-align : center;background-color : #666666;
}
BODY { background-color : #006600;font-family : arial;
color : White;}
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 26/35
Julio 2003, 26
Ejemplo de estilos IV
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 27/35
Julio 2003, 27
HTML Dinámico (Ejemplo: CAPAS)
? Inclusión de capas (documentos independientes incluidos en el propio documento)
de posicionamiento absoluto, permite dar dinamismo a las páginas Web.
<DIV ID="mylayer" STYLE="postition:absolute;...">
<A HREF="pagina.html">Enlace</A>
ponemos algo de texto<BR>
ahora una imagen <IMG SRC="image.gif">
y mas texto
</DIV>
width:300px
height:300px
left:300px
top:300px
z-index:1
Visibility:hidden (visible)
Netscape: document.layers["ID"].visibility
IE : document.all["ID"].style.visibility
var layerRef="", styleSwitch="";
function init(){
if (navigator.appName == "Netscape") {
var layerRef="document.layers";
var styleSwitch="";
}else{
var layerRef="document.all";
var styleSwitch=".style";
}}
document.getElementById("ID")
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 28/35
Julio 2003, 28
Teniendo en cuenta el tipo de navegador
var layerRef="", styleSwitch="";
function init(){
if (navigator.appName == "Netscape") {
var layerRef="document.layers";
var styleSwitch="";
}else{
var layerRef="document.all";
var styleSwitch=".style";
}}
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
n6 = (document.getElementById) ? 1:0
function show() {
if (n) document.uno.visibility = "show"if (n6) document.getElementById('uno').style.visibility = "visible"
if (ie) uno.style.visibility = "visible"
}
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 29/35
Julio 2003, 29
HTML Dinámico (Ejemplo: CAPAS) II
Ejemplo Moscasub
Ejemplo Perros
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 30/35
Julio 2003, 30
<html>
<head><title>Ejemplo Capas - Curso JavaScript</title>
</head>
<body>
Pagina ejemplo de capas
<div id="c1" style="position:absolute;
left:245 px; top:168 px; width:157 px; height:151 px;
z-index:1; visibility: visible">
<img src="imagenes/perrito-marron.jpg">
Esta es la primera capa, la del perro marron </div>
</body>
</html>
Ejemplo de Capas
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 31/35
Julio 2003, 31
Ejemplo de capas (con estilos)
<html>
<head>
<title>Ejemplo Capas - Curso JavaScript</title><STYLE TYPE="text/css">
#c1 { background-color:#66CCFF;
width:150 px; height:150 px;
border-width:5 px;
border-style:ridge;
padding:5%
}
</STYLE></head>
<body>
Pagina ejemplo de capas
<div id="c1" style="position:absolute;
left:250px; top:150px;
z-index:1; visibility: visible;"><img src="imagenes/perrito-marron.jpg" width="157" height="136">
Esta es la primera capa, la del perro marron </div>
</body>
</html>
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 32/35
Julio 2003, 32
Ejemplo Simple: Mostrando y Ocultando Capas
Ejemplo Simple de Capas
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 33/35
Julio 2003, 33
Mostrando y Ocultando Capas (Código, IE)
<html> <head>
<title>Ejemplo Capas - Curso JavaScript</title>
</head>
<body bgcolor="#FFFFFF">
<div id="capamarron" style="position:absolute; width:157px; height:151px; z-index:1;
left: 165px; top: 138px; visibility: hidden">
<img src="imagenes/perrito-marron.jpg" width="223" height="275">
Esta es la primera capa, la del perro marron
</div>
<div id="capanegro" style="position:absolute; width:305px; height:217px; z-index:2;
left: 214px; top: 161px; visibility: hidden">
<img src="imagenes/perrito-negro.jpg" width="306" height="231">
Esta es la segunda capa, la del perro negro
</div>
<input type="button" value="capa1" onMouseOver="document.all['capanegro'].style.visibility='visible';
document.all['capamarron'].style.visibility='hidden';"
onMouseDown="document.all['capanegro'].style.visibility='visible';
document.all['capamarron'].style.visibility='visible';">
<input type="button" value="capa2" onMouseOver="document.all['capanegro'].style.visibility='hidden';
document.all['capamarron'].style.visibility='visible';"
onMouseDown="document.all['capanegro'].style.visibility='visible';
document.all['capamarron'].style.visibility='visible';">
</body>
</html>
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 34/35
Julio 2003, 34
HTML Dinámico (JavaScript + capas)
Controlando capas desde un formulario
Controlando capas con eventos del ratón
Ejemplo. La inclusión de capas en HTML, quepermite superponer, ocultar y mover elementosde forma interactiva.
? JavaScript es un lenguaje de programación que permite añadir dinamismo a las
páginas Web. Para ello se utiliza una marca especial<script> ... </script>
Página con diversos scripts de JavaScript
? El acceso a bases de datos permite tener la información actualizada, y requiere
un esquema de programación cliente/servidor.
Página web de AIMet
5/12/2018 HTML DOM Javascript - slidepdf.com
http://slidepdf.com/reader/full/html-dom-javascript 35/35
Julio 2003, 35
Capas en Movimiento<html><head>
<SCRIPT>
var izquierda=0;
function corre() {object = document.getElementById("c1").style;
if (izquierda < 650) {
izquierda += 10;
object.left = izquierda;
setTimeout("corre()",10)
}
}
</SCRIPT>
<STYLE TYPE="text/css">#c1 { position:relative; top:50 px; left:15 px;
background-color:#990000;width:200 px; z-index=0;
}</STYLE>
</head>
<body>
Para mover una CAPA<br>
<input type="button" value="Pulsa" onclick="corre()">
<DIV ID="c1" ><img src="corredor.gif" width="114" height="134"
alt="" border="0">
</DIV>
</body></html>
Top Related