Practica 1

Universidad del Mar
Campus Puerto Escondido
Desarrollo en Web.
“Práctica 1”
Presenta:
Ali Hassan Cruz Galicia.
7º Semestre Grupo: 712.
Lic. En Informática.
Ante la:
M. en C. Mariana Guzmán R.
Titular de la materia.
Puerto Escondido Oax., a 29de octubre de 2009.

Estructura de una página HTML.
La estructura básica de una página web estática escrita en HTML

es la siguiente:
<html>
<head>
<title>Título del documento</title>
</head>
<body>
Cuerpo del documento: texto, imágenes, sonido y órdenes HTML
</body>
</html>
En el navegador se visualiza de la siguiente forma:
Fig. 1
En el siguiente ejemplo se tienen más instrucciones en código
HTML, cada etiqueta da un efecto diferente a la página.
<html>
<head>
</head>
<body>
<hl>Ejemplo de un documento HTML</hl>
<hr>
<h3>El cuerpo del documento puede contener:</h3>
<h4>Texto, imágenes, sonido y órdenes HTML</h4>
<p>
HTML es un lenguaje utilizado para desarrollar páginas y documentos Web.
<p>
A diferencia de los lenguajes convencionales, HTML utiliza una serie de etiquetas
especiales intercaladas en un documento de texto sin formato.
<br>
Dichas etiquetas serán
posteriormente interpretadas por los exploradores
encargados de visualizar la página o el documento Web, con
el fin de establecer el formato.
<hr>
</body>
</html>
Fig. 2
A continuación la explicación de la función de algunas etiquetas de
uso común:
<h1></h1> Dan un tamaño mayor al texto que se encuentre dentro.

<hr> Coloca una línea horizontal.
<p> Asigna formato de párrafo simple al texto.
<br> Hace un salto de línea.
<html>
<head>
</head>
<body>
<hl>Ejemplo de un documento HTML</hl>
<hr>
<h3>El cuerpo del documento puede contener:</h3>
<h4>Texto, imágenes, sonido y órdenes HTML</h4>
<p>
HTML es un lenguaje utilizado para desarrollar páginas y documentos Web.
<p>
A diferencia de los lenguajes convencionales, HTML utiliza una serie de etiquetas
especiales intercaladas en un documento de texto sin formato.
<br>
Dichas etiquetas serán
posteriormente interpretadas por los exploradores
encargados de visualizar la página o el documento Web, con
el fin de establecer el formato.
<hr>
</body>
</html>
Fig. 3
La etiqueta <span></span> sirve para dar formato al texto (como
por ejemplo el color y tipo de fuente) que se encuentra dentro de las
etiquetas de apertura y cierre.
<html>
<head>
<title> Titulo del documento</title>
</head>
<body>
<h1> Ejemplo de un documento HTML</h1>
<hr>
<h3> el cuerpo del documento puede contener:</h3>
<h4>Texto,imagenes,sonidos y ordenes HTML</h4>
<p>
A diferencia de los lenguajes convencionales.
<span style="color:blue; font-style:italic">
HTML utiliza una serie de etiquetas especiales intercaladas en un documento de textos sin
formato.
</span>
</p>
<br>
Dichas etiquetas serán posteriormente interpretadas por los exploradores encargados de
visualizar la pagina o el documento Web, con el fin de establecer el formato.
<hr>
</body>
</html>
Fig. 4
Las etiquetas <div></div> permiten dar formato a los párrafos,
como por el ejemplo el tamaño de la fuente, el tipo de alineación o el
color y tipo de la fuente.
<html>
<head>
</head>
<body>
<hr>
<div class=notas>
<h1> Divisiones</h1>
<p> El elemento div permite utilizar los atributos
aling, class, style, id y otros mcuhos.</p>
<p> Definir un bloque, es util para construir direfentes
secciones en un documento. </p>
<p> Es necesario especificar la etiqueta de cierre </p>
</div>
<hr>
</body>
</html>
Fig. 5
Enlaces
Para definir un enlace, se utiliza la etiqueta a. Esta etiqueta

delimita el texto que se quiere utilizar para enlazar con otra
página. Este texto aparece subrayado para el usuario. Para
indicar al explorador la página que tiene que recuperar cuando
el usuario haga clic en un enlace, incluya en la etiqueta de
apertura a, el atributo href y escriba a continuación el URL de la
página que se quiera recuperar.
Ejemplo:
Fig. 6
Fig. 7
Hojas de Estilos
Estos archivos facilitan el uso de las configuraciones que se le

pueden dar a la página web, para poder usarlas deben ser declaradas en
la cabecera del documento HTML, se puede prescindir de ellos y
declarar directamente el estilo en la cabecera; sin embargo el uso de los
archivos “.css” evitan la reescritura del código en cada página donde se
desee utilizar el mismo estilo.
Los estilos abarcan todas las propiedades de la fuente y párrafos

dando efectos distintos, según se encuentre ubicado el texto como por
ejemplo una tabla, en el cuerpo o dentro de un link.
Titulo y link.
<html>
<head>
<title> Capas </title>
<link rel="stylesheet" href="estilo3.css" type="text/css">
</head>
<body>
<div class="sombra">
TITULO DE LA PAGINA
</div>
<div class="titulo">
TITULO DE LA PAGINA
</div>
</body>
</html>
Estilo3.css
.titulo { color:green; position:absolute; margin-left:20; margin-top:21; font-size:32;

font-weight:bolder}
.sombra{ color:black; position:absolute; margin-left:21;margin-top:21;font-size:32

font-weight:bolder}
Fig. 8
En el ejemplo anterior se utilizó un archivo “.css”, en el siguiente
se declaran los estilos directamente en la cabecera del documento
HTML.
Color y tamaño de texto.
<html>
<head>
<style type="text/css">
P {color: blue; margin-left: 20;text-aling:center}
</style>
</head>
<body>
<hr>
<p>
A diferencia de los lenguajes convencionales, HTML utiliza una serie de etiquetas especiales
intercaladas en un documento de textos sin formato.
<br>
visualizar la pagina o el documento Web, con el fin de establecer el formato.
<hr>
</body>
</html>
Fig. 7
En el siguiente ejemplo se muestra otro uso de las hojas de estilos,
generando clases las cuales pueden ser invocadas con la etiqueta <p
class=”nombreClase”> para hacer uso del estilo declarado dentro de
dicha clase.
Colores y formato de párrafo.
<html>
<head>
<title> Clases en una hoja con estilos</title>
<link rel="stylesheet" href="estilo1.css" type="text/css">
</head
<body>
<hr>
<h3> El cuerpo del documento puede contener:</h3>
<h4> Texto,imagenes, sonido y ordenes HTML</h4>
<p class="azul">
HTML es un lenguaje utilizado par desarrollar paginas
y documentos Web.
<p class="verde">
A difenrencia de los lenguajes convencionales, HTML utiliza una seria de etiquetas especiales
interecaladas en un documento de texto sin formato.
<br>
visualizar la pagina o el documento wbe, con el fin de establecer el formato.
<hr>
</body>
</html>
estilo1.css
p.azul{color: blue; margin-left: 20; border:solid; border-width:2}
p.verde {color:green; margin-left:20; text-aling:center}

Fig.9
Tablas
Una tabla en HTML puede ser considerada de manera simple

como un grupo de filas donde cada una de ellas contiene un grupo de
celdas. Las tablas, así como toda estructura en documentos HTML, son
definidas usando etiquetas. Una tabla simple puede ser insertada en un
documento HTML usando tres etiquetas: table (principal contenedor), tr
(fila contenedora) y td (celda simple). Su estructura es la siguiente:
<table> Declaración de la tabla.

<tr> Declaración de una fila.
<td> Declaración de una columna.
</td> Cierre de la columna.
</tr> Cierre de la fila.
</table> Fin de la tabla.
Las tablas son muy útiles, permiten organizar la información en

la página o para darle formato a la información que se pueda mostrar
en forma de tabla. Uno de sus parámetros más usados son width para el
ancho y height para la altura.
Ejemplo:
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<th>Nombre</th>
<th>Nota</th>
</tr>
<tr>
<td width="200">JavierCeballos Fernández</td>
<td width="30" align=right>10.00</td>
</tr>
<tr>
<td width="200">Elena Ortiz Fuentes</td>
<td width="30" align=right>7.50</td>
</tr>
</table>
</body>
</html>
Fig. 10
Gráficos.
Una forma de insertar imágenes en un documento HTML es utilizando

la etiqueta img y sus atributos src, que permite especificar el nombre del
fichero que contiene la imagen y align, que permite indicar como el explorador
debe alinear la imagen con cualquier texto que este cerca de ella (top, middle o
botton). El atributo alt que permite especificar un texto en el lugar de la
imagen cuando el explorador no puede mostrarla. La etiqueta center centra la
imagen y el titulo de la imagen.
Ejemplo:
Fig. 11
Fig. 12
Formularios
Los formularios son una característica del estándar HTML que

permite a los autores colectar información provista por los visitantes.
Estos formularios pueden ser útiles para recolectar información
personal, información de contacto, preferencias u opiniones, o cualquier
tipo de entrada por parte del visitante que el autor pueda necesitar.
Un formulario puede ser insertado en un documento HTML

mediante la etiqueta form el cual actúa como contenedor para todos los
elementos de entrada (input). La siguientes son formas de declarar
algunos tipos de entradas a un formulario:
<input type=" " name=" " size=""> Entrada de Texto de línea.
<select name="valor">option>Opcion<option></select> Entrada por medio de

listas.
<input type="radio" name=" " value="" checked> Entrada por medio de botones
de radio.
<input type="submit" value="Enviar datos"> Entrada por medio de botones.
Ejemplo:
<html>
<head>
<title>Concertar una tutoría</title>
</head>
<body>
<h1 align="center"> CONCATENAR UNA TUTORIA</h1>
<form action="http:\\localhost:8080/servlet/tutorias" method=post></form>
Alumno: <br><input type="text" name="profesor" size="60">
<br><br>Día:<br>
<select name="dia">
<option>lunes <option>miércoles<option>jueves
</select>
<br><br>Hora:
   10<input type="radio" name="hora" value="10" checked>
<br><br>Asunto:<br><textarea name="asunto" rows="5" cols="40" wrap></textarea>
<br><br><input type="submit" value="Enviar datos">
  <input type="reset">
</form>
</body>
</html>
Fig. 13
Marcos
Una forma de insertar un marco flotante en una página es

utilizando la etiqueta iframe con el atributo src, width y height.
El atributo src específica el URL del documento que quiere
visualizar, y width y height indican la anchura y la altura del
marco.
Ejemplo:
Fig. 14
Fig. 15
Applets
En Java un applet , es un programa que puede incrustarse en un

documento HTML; es decir en una página Web. Cuando un Navegador
carga una página Web que contiene un Applet, éste se descarga en el
navegador Web y comienza a ejecutarse. Esto nos permite crear
programas que cualquier usuario puede ejecutar con tan solo cargar la
página Web en su navegador.
Ejemplo:
import java.util.StringTokenizer;
import javax.swing.JApplet;
public class MiApplet extends JApplet{
private StringBuffer texto_a_mostrar;
private java.awt.Font fuente;
private java.awt.Color colorFondo;
private java.awt.Color colorTexto;
private void añadir(String str)
{
texto_a_mostrar.append(str);
repaint();
}
//Punto de entrada
public void init()
{
fuente=new java.awt.Font("Courier new", java.awt.Font.BOLD, 14);
colorFondo= new java.awt.Color(0,0,128);//Azul
colorTexto=new java.awt.Color(255,255,255);//Blanco
texto_a_mostrar = new StringBuffer();
añadir("Iniciando applet ...");
}
public void start()

{
añadir("Arrancando el applet");
}
public void stop()

{
añadir("Deteniendo el applet...");
}
public void paint(java.awt.Graphics g)

{
g.setColor(colorFondo);//color con el que se pintará el fondo
//Pintar el fondo
g.fillRect(0,0, getSize().width,getSize().height);
g.setColor(colorTexto);//color para el primer plano
g.setFont(fuente); //fuente para pintar el texto
//dibujar un ractángulo alrededor del contenedor
g.draw3DRect(5, 5,getSize().width-10,getSize().height-10, false);
//Dibujar el texto que hay actualmente en texto_a_mostrar
//poniendo cada frase debajo de la anterior
java.util.StringTokenizer cadena;
cadena= new StringTokenizer(texto_a_mostrar.toString(), ",");
int i=1;
while(cadena.hasMoreTokens())
{
g.drawString(cadena.nextToken(), 10, 20*i);
i++;
}
}
}
Ejecución:
Fig. 16
Un Applet es una parte de código hecho en java llamado
“applet.class”, esto puede agregarle una funcionalidad a la pagina
HTML, existen muchos tipos de Applets, desde un simple “hola mundo”
hasta tener algún Applet para imágenes, juegos, relojes y muchas más
aplicaciones.
Ejemplo de código para cargar un Applet en HTML:
<HTML>
<HEAD>
<TITLE>Página HTML</TITLE>
</HEAD>
<BODY>
<h3><hr width="100%">
Página HTML que incluye un Applet
<hr width="100%">
<h3>
<p>
<applet
code="MiApplet.class"
width="350" height="210">
</applet>
</p>
<hr width="100%"><font size=-1><i> Esto es un applet </i></font>
</BODY>
</HTML
Pasar parámetros a un applet.
Los parámetros son para los applets lo que los argumentos en la línea de
órdenes son para las aplicaciones. Utilizando un applet podemos hacer trabajar
a aun applet en múltiples situaciones. Los valores de los parámetros tienen que
ser siempre cadenas de caracteres.
Para mostrar una imagen en un applet, lo primero que tiene que hacer
este es cargarla. Para hacer esto, se necesita crear un objeto URL que indique
la ubicación del fichero que contiene la imagen. Una vez obtenido el URL base
de la imagen, lo siguiente es cargar la imagen y crear un objeto image.
A continuación se muestra el código del applet que recoge estos
parámetros y los muestra al usuario. Para recoger los valores de los
parámetros, el applet invoca a su método getParameter. Este método tiene un
argumento que almacenará la cadena de caracteres asignada al atributo name
de la etiqueta param del parámetro que se quiere recoger.
public class MiApplet extends javax.swing.JApplet

{
/** Iniciar el applet MiApplet*/
public void init()
{
initComponents();
/*imagenes primera modificacion segun el manual
*/
imgCorreo= getImage(getDocumentBase(),"recursos/correo.gif");
imgTfno= getImage(getDocumentBase(),"recursos/telefono.gif");
/* ***********************************************************
*/
String correo_e=getParameter("CORREO_E");
if(correo_e==null) correo_e="@";
String stel=getParameter("TELEFONO");
if(stel==null) stel="0";
jlbCorreoE.setText(correo_e);
jlbTelefono.setText(stel);
/* ****************************************************** */
jlbCorreoE.setIcon(new javax.swing.ImageIcon(imgCorreo));
jlbTelefono.setIcon(new javax.swing.ImageIcon(imgTfno));
/* ****************************************************** */
}
/** El siguiente método es invocado por init para

*iniciar el formulario
*/
private void initComponents()
{
jlbCorreoE=new javax.swing.JLabel();
jlbTelefono=new javax.swing.JLabel();
getContentPane().setLayout(new java.awt.GridLayout(2,1));
jlbCorreoE.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
jlbCorreoE.setText("correo-e");
getContentPane().add(jlbCorreoE);
jlbTelefono.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
jlbTelefono.setText("Teléfono");
getContentPane().add(jlbTelefono);
}
//Declaración de variables
private javax.swing.JLabel jlbCorreoE;
private javax.swing.JLabel jlbTelefono;
/*Declaracion de variables para el manejo de imagenes*/
private java.awt.Image imgTfno,imgCorreo;
}
Fig. 17
Reproducir un fichero de sonido con un Applet
La forma más sencilla en Java para reproducir un sonido en Java

en invocando al método play del Applet. Por ejemplo:
play(getDocumentBase(), “sonido.mid”);
Si necesitamos tener control sobre la reproducción, podemos

utilizar la funcionalidad proporcionada por la interfaz AudioClip del
paquete java. Applet, la cual proporciona los siguientes métodos:
play Inicia la reproducción.
loop Repite indefinidamente la reproducción de un fichero de

sonido.
stop Detiene la reproducción de un fichero de sonido.
Para utilizar estos métodos, es necesario crear un objeto AudioClip y

cargar el sonido a través del método getAudioClip del applet.
Ejemplo:
public class Bucle extends Applet {

AudioClip sonido;
String texto="Sonidito en reproduccion";
String subtexto;
// Cogemos el fichero de sonido y lo converitmos en clip

public void init() {
sonido = getAudioClip( getDocumentBase(),"sonido.mid" );

}
// Pintamos en el applet para que se vea que funciona

public void paint( Graphics g ) {
showStatus(texto);
for(int i=0;i<texto.length();i++)
{
subtexto=texto.substring(0,i+1);
showStatus(subtexto);
}
g.drawString( "Prueba de Repetición",25,25 );
}
// Arrancamos el applet y dejamos que el fichero de sonido se

// repita indefinidamente, hasta que llegue el evento de stop
public void start() {
sonido.loop();
}
// Detenemos la música. Aquí se entra, por ejemplo, cuando se

// cierra la ventana en donde se está ejecutando el applet
public void stop() {
sonido.stop();
}
}
Este es el ejemplo del HTML para reproducir el Applet en le navegador:
<html>
<body>
<applet code=MiAppletAnim.class width="200" height="200" >
</applet>
</body>
</html>
Fig. 18
Crear una animación
Para hacer una animación que solo requiere los siguientes pasos:
1. Dibujar algo
2. Volverlos a dibujar en la misma posición adoptando otra firma
3. Repetir el paso 1 y 2 el tiempo que queramos.
Este proceso se logra mediante hilos, y, en un applet el lugar ideal para

lanzar un hilo es el método start El método run contendrá la secuencia
animada para todo lo necesario.
public class MiAppletAnim extends JApplet implements Runnable

{
private Thread hilo=null;
public int x=30,y=30;
public void start(){
if(hilo==null){
hilo=new Thread(this);
hilo.start();
}
}
public void run() {
Thread hiloActual = Thread.currentThread();
while(hilo==hiloActual){
x+=25;
//y+=2;
System.out.println(x);
try{
Thread.sleep(1000);
}catch(Exception e){}
repaint();
}
}
public void paint(Graphics g){
g.drawString("Solesito =)", x,y);
try{
Thread.sleep(1000);
}catch(Exception e){}
g.setColor(Color.white);
g.fillRect(x-25, 20, x, 30);
}
public void stop()
{
hilo=null;
}
}
El código de la página HTML, la cual llamará al applet contiene el
código siguiente:
<html>
<body>
<applet code=MiAppletAnim.class width="200" height="200" >
</applet>
</body>
</html>
HaZZa…xD
Fig. 19
Applet que muestra la hora actual
Se diseñará un applet que muestre la hora. La interfaz grafica

estará formada por un contenedor JApplet, y un control JLabel, para
mostrar la hora actual. La hora actual la obtendremos a partir de un
objeto Calendar del paquete java.util.
Ejemplo:
public class Reloj extends javax.swing.JApplet implements Runnable{
public void init(){

initComponets();
}
private void initComponets(){

horaActual=new JLabel();
horaActual.setFont(new Font("Arial",1,48));
horaActual.setHorizontalAlignment(SwingConstants.CENTER);
horaActual.setText("00:00:00");
getContentPane().add(horaActual,BorderLayout.CENTER);
}
public void start(){

if(hilo==null){
hilo=new Thread(this,"Reloj");
hilo.start();
}
}
public void run() {

Thread hiloActual=Thread.currentThread();
while(hilo==hiloActual){
Calendar cal=Calendar.getInstance();
Date hora=cal.getTime();
DateFormat df=DateFormat.getTimeInstance();
horaActual.setText(df.format(hora));
try{
Thread.sleep(1000);
}catch(InterruptedException e){}
}
}
public void stop(){

hilo=null;
}
private JLabel horaActual;

private Thread hilo=null;
private Font fuente;
Se muestra el código ejecutado, por el navegador:

Fig. 20

Practica 1

Încărcat de

Informații document

Titlu original

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

Practica 1

Încărcat de

Drepturi de autor:

Formate disponibile

Universidad del Mar

Campus Puerto Escondido

Puerto Escondido Oax., a 29de octubre de 2009.

La estructura básica de una página web estática escrita en HTML

En el navegador se visualiza de la siguiente forma:

En el navegador se visualiza de la siguiente forma:

<h1></h1> Dan un tamaño mayor al texto que se encuentre dentro.

En el navegador se visualiza de la siguiente forma:

En el navegador se visualiza de la siguiente forma:

Para definir un enlace, se utiliza la etiqueta a. Esta etiqueta

En el navegador se visualiza de la siguiente forma:

Estos archivos facilitan el uso de las configuraciones que se le

Los estilos abarcan todas las propiedades de la fuente y párrafos

.titulo { color:green; position:absolute; margin-left:20; margin-top:21; font-size:32;

.sombra{ color:black; position:absolute; margin-left:21;margin-top:21;font-size:32

En el navegador se visualiza de la siguiente forma:

Color y tamaño de texto.

En el navegador se visualiza de la siguiente forma:

Colores y formato de párrafo.

p.azul{color: blue; margin-left: 20; border:solid; border-width:2}

p.verde {color:green; margin-left:20; text-aling:center}

Una tabla en HTML puede ser considerada de manera simple

<table> Declaración de la tabla.

Las tablas son muy útiles, permiten organizar la información en

Una forma de insertar imágenes en un documento HTML es utilizando

En el navegador se visualiza de la siguiente forma:

Los formularios son una característica del estándar HTML que

Un formulario puede ser insertado en un documento HTML

<input type=" " name=" " size=""> Entrada de Texto de línea.

<select name="valor">option>Opcion<option></select> Entrada por medio de

<input type="submit" value="Enviar datos"> Entrada por medio de botones.

Una forma de insertar un marco flotante en una página es

En el navegador se visualiza de la siguiente forma:

En Java un applet , es un programa que puede incrustarse en un

public void start()

public void stop()

public void paint(java.awt.Graphics g)

Ejemplo de código para cargar un Applet en HTML:

ser siempre cadenas de caracteres.

de la imagen, lo siguiente es cargar la imagen y crear un objeto image.

A continuación se muestra el código del applet que recoge estos

parámetros y los muestra al usuario. Para recoger los valores de los

parámetros, el applet invoca a su método getParameter. Este método tiene un

argumento que almacenará la cadena de caracteres asignada al atributo name

de la etiqueta param del parámetro que se quiere recoger.

public class MiApplet extends javax.swing.JApplet

/** El siguiente método es invocado por init para

En el navegador se visualiza de la siguiente forma:

La forma más sencilla en Java para reproducir un sonido en Java

Si necesitamos tener control sobre la reproducción, podemos

play Inicia la reproducción.

loop Repite indefinidamente la reproducción de un fichero de

stop Detiene la reproducción de un fichero de sonido.

Para utilizar estos métodos, es necesario crear un objeto AudioClip y

public class Bucle extends Applet {

// Cogemos el fichero de sonido y lo converitmos en clip

sonido = getAudioClip( getDocumentBase(),"sonido.mid" );

// Pintamos en el applet para que se vea que funciona

// Arrancamos el applet y dejamos que el fichero de sonido se

// Detenemos la música. Aquí se entra, por ejemplo, cuando se

Este es el ejemplo del HTML para reproducir el Applet en le navegador:

En el navegador se visualiza de la siguiente forma:

Este proceso se logra mediante hilos, y, en un applet el lugar ideal para