Está en la página 1de 30

ACADEMIA JAVA

Introduccin a aplicaciones Web


ACADEMIA JAVA
Cliente / Servidor
Arquitectura Cliente - Servidor
PETICION (REQUEST)
RESPUESTA (RESPONSE)
Peticin (Request)
El cliente le solicita al servidor una respuesta
Puede enviar informacin (Mtodos GET y POST)
La informacin se enva por medio de formularios
Respuesta (Response)
La respuesta la enva el servidor al cliente ante una
peticin
Contiene HTML que es interpretado por el navegador
El HTML devuelto es resultado de un proceso que realiza
el servidor ante dicha peticin
HTML
HyperText Markup Language
se escribe en forma de etiqueta (tags)
Puede incluir scripts (como Javascript)
Es interpretado por el navegador
Las etiquetas tienen inicio, fin, atributos y contenido
HTML
Tags importantes:
<html>
<head>
<body>

Ejemplo:
<p> inicio
<p id=parrafo1> atributo
</p> cierre
<p>Hola</p> contenido

Estructura de una pagina HTML
<!DOCTYPE html>
<html>

<head>
<title>Mi primera pgina WEB</title>
</head>

<body>

<h1>Mi primer encabeazado</h1>

<p>Mi primer parrafo.</p>

</body>
</html>
Estructura de una pagina HTML
La declaracion DOCTYPE define el tipo de documento
El texto entre <html> y </html> describe la pagina
El texto entre <body> y </body> es el contenido visible de
la pagina.
El texto entre <h1> y </h1> es muestra como un
encabezado
El texto entre <p> y </p> se muestra como un parrafo.

Qu es HTML?
HTML es un lenguaje para describir paginas Webs
HTML significa Hyper Text Markup Language
HTML es un lenguaje de marcado.
Un lenguaje de marcado es un conjunto de etiquetas de
marcado (markup tags).
Los tags describen el contenido del documento
Los documentos HTML contienen tags HTML y texto
plano
Los documentos HTML se los llama tambien paginas
web.

Tags HTML
Los tags HTML son palabras reservadas (tag names)
rodeados de simbolos de mayo y menor <html>
Los tags HTML normalmente vienen en pares como <p>
y </p>
El primer tag en el par es el tag de apertura, el segundo
es el tag de cierre.
El tag de cierre se escribe como un tag de apertura, pero
con una barra antes del nombre.

<tagname>content</tagname>
Web browser (explorador web)
El proposito de un explorador web (Ej: Google Chrome,
Internet Explorer, Firefox, Safari) es el de leer los
documentos HTML y mostrarlos como paginas web.

El browser no muestra los tags html, pero utilizar los tags
para determinar como se debe mostrar al usuario el
conteido de una pagina HTML.

La declaracion DOCTYPE
La declaracion DOCTYPE le indica al explorador el tipo de
documento que debe representar al usuario.

HTML5
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


HTML Links
Los links a otras paginas se declaran con el tag <a>


<a href=otrapagina.html">Esto es un link</a>

<a href=http://www.google.com.ar">link a google</a>

HTML images
Si queremos representar una imagen, usamos el tag
<img>

<img src=imagen.jpg" alt=imagen" width="104"
height="142">
Atributos HTML
Los elementos HTML pueden tener atributos.
Los atributos proveen informacion adicional sobre un
elemento.
Los atributos Siempre se especifican en el tag de
apertura.
Los atributos siempre estan en pares nombre=valor

<a href=url>
Comentarios HTML
Se puede agregar comentarios en el codigo HTML

<! Comentarios! -->
Estilos CSS (Cascade Style sheet)
El CSS se invento para poder aplicarle estilos a los tags.
Sirven exclusivamente para modificar la forma en la que
se visualiza en pantalla un determinado tag html.

La forma mas prolija de escribir los estilos, es utilizando
un archivo CSS separado del archivo HTML.

Estilos CSS
Estilos por tag, son los que se asignan a todos los tags
independientemente de su id o clase.

Estilos por id, son los que se asignan al tag que tenga
determinado id

Estilos por clase, son los que se asignan a todos los tags
de una misma clase.

Estilos inline, son los que se hardcodean sobre un tag
determinado.

HTML
Para agregar saltos de linea <br/>
Para agregar espacios: &nbsp;
Otros:
Carcter
Entidad
HTML
Carcter
Entidad
HTML
&aacute; &Aacute;
&eacute; &Eacute;
&iacute; &Iacute;
&oacute; &Oacute;
&uacute; &Uacute;
&uuml; &Uuml;
&ntilde; &Ntilde;
&iexcl; &iquest;


Formularios HTML
Action: Indica a qu pagina enva la informacin del
formulario
Method: Indica si se enva por GET o POST
Controles:
Input
Select
Se debe definir un name para cada control
Debe existir un control de tipo submit
Formularios HTML
<form action= method=GET>
<p>Nombre<input type=text name=nombre value=></p>
<p>Apellido<input type=text name=apellido value=></p>
<p><input type=submit value=Enviar></p>
</form>
<form action=recepcion.htm method=POST>
<p>Nombre<input type=text name=nombre value=></p>
<p>Apellido<input type=text name=apellido value=></p>
<p><input type=submit value=Enviar></p>
</form>
Mtodo GET
La informacin se transmite por URL
Es visible y modificable por el usuario
Permite compartir el link
Tiene un lmite (largo de la URL)
Formato:
Comienza con ?
Cada dato se escribe como campo=valor
Si hay ms de un dato se entrelazan con &
Ejemplo:
?nombre=lionel&apellido=messi
Mtodo POST
Est oculto para el usuario
Es ms seguro
No tiene lmite
No es modificable por URL
Tablas
Se definen con el tag <table>

<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Listas HTML
Listas sin orden (Unordered List)

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Listas con numeracin (Ordered List)

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>



Div y Span
El elemento <div>
Define una seccion de contenidos en forma de bloque.
Se utiliza para disponer el esquema general de la pagina (layout)

<div>contenido</div>

El elemento <span>
Define una seccion de contenidos en forma inline (sobre la misma
linea

<span>contenido</span>
Esquemas (layouts)
<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Titulo de la pagina</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">El
contenido va ac!</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright 2014. todos los derechos reservados.</div>

</div>

</body>
</html>
Preguntas?
Ejercicio:
Crear una pgina que simule la pgina inicial de
Google (www.google.com)
Investigar como enva datos la caja de texto (GET o
POST ?) y qu nombre de campo utiliza para esto
Se debe poder realizar bsquedas desde nuestro
sitio