Scribd
Cargar
28 vistas22 páginas

Introduccion HTML 2.0

Cargado por

wjuegos2021
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
28 vistas22 páginas

Introduccion HTML 2.0

Cargado por

wjuegos2021
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Introduccion a las páginas WEB

HTML
Objetivo

Identificar los principales elementos y


tecnologías que intervienen en el desarrollo y
despliegue de una página WEB HTML simple.
Introducción las páginas WEB
HTML

¿Como funciona la WEB?


¿Qué es HTML?
Estructura de un documento HTML
Elementos de HTML
Formularios / Script
¿Cómo funciona la web?
Protocolo HTTP: HyperText Transfer Protocol.
URL: Uniform Resource Locator.
DNS: Domain Name System.
Servidor web: IIS, Apache, etc.
Clientes web: IE, Mozilla, Netscape, Opera, etc.
Documentos HTML: HyperText Mark-up Language.
Páginas estáticas vs. Dinámicas.
Hypertext Transfer Protocol (HTTP)

Uno de los protocolos más importantes de


Internet.
HTTP define como los navegadores y los
servidores Web se comunican uno con otro.
Esta basado en texto y es transmitido sobre
conexiones TCP.

5
Funcionamiento de HTTP
Cliente
http://www.cursopav2.com/i
nicio.html
Servidor
Internet DNS

IP=66.45.26.25 Puerto: 80

HTTP Request

www.cursopav2.com
IP = 66.45.26.25

inicio.html
<html>

HTTP Response
<body>
Bienvenidos a
Programción de
Aplicaciones
Visuales II
</body>
</html>
¿Qué es HTML?
Lenguaje de marcas. Código abierto.
Editores: Notepad.
Ejemplo de un documento HTML.
<html>
<head>
<title>Primer ejemplo en HTML</title>
</head>
<body>
<h1>Mi colección de discos</h1>
<h2>Grupo 1</h2>
<p>Descripción del grupo</p>
<ol>
<li>Disco 1</li>
<li>Disco 2</li>
</ol>
………………………
</body>
<html>

7
Estructura de un documento
HTML
Cabecera: <head> </head>
⚫ Título de la página: <title> </title>

⚫ Meta-tags: <meta http-equiv="Content-language"


content="es">
⚫ Estilos: <link rel="stylesheet" href="estilo.css"
media="screen" type="text/css">
Cuerpo: <body> </body>
⚫ <body
background="imagenes/logo_usabilidad.gif">
⚫ <body bgcolor="white">

⚫ <body leftmargin="5px" bottommargin="5px">


8
Elementos de HTML
Elementos y propiedades:
⚫ Títulos: <h1> </h1>, <h2> </h2>,…, <h6> </h6>

⚫ Párrafos: <p> </p>

⚫ Listas (ol, ul): <ol> <li> </li> <li> </li>


</ol>
⚫ Vínculos: <a
href="http://.........">Descripción</a>
<a ref=“mailto:abc@xyz.com">Jose</a>
⚫ Avance de línea: <br>

⚫ Imágenes: <img scr="miimagen.gif" width=130


height=50>
9
Elementos de HTML
Elementos y propiedades:
⚫ Líneas: <hr>

⚫ Texto en negritas <strong> </strong>

⚫ Tablas: <table> </table>

⚫ Filas de una tabla <tr> </tr>

⚫ Celdas de una tabla: <td> </td>

⚫ Encabezado de una tabla: <th> </th>

⚫ Marcos: <frameset></frameset>

<frame> </frame>

10
HTML Forms
En el corazón de toda aplicación Web genuina
están los HTML Forms.
Un HTML Form es la porción de un documento
HTML que aparece entre las etiquetas
<form></form>
Suma.html
<html>
<body>
<form>
<input type="text" name="op1" />
+
<input type="text" name="op2" />
<input type="submit" value=" = " />
</form>
</body>
</html>

11
HTML Forms
Un botón submit (<input type=“submit”>) juega un
rol especial en un HTML Form:
⚫ Cuando es pulsado, el navegador envía el HTML Form junto con
cualquier entrada de datos del usuario al servidor Web.

Cómo el HTML Form es enviado, dependerá del


atributo Method del form:
⚫ Si el atributo Method del form no está presente o tiene el valor GET, el
navegador enviará al servidor un comando HTTP GET.
⚫ Si el atributo Method del form tiene el valor POST, el navegador
enviará al servidor un comando HTTP POST.

12
HTML Forms
Method = GET Method = POST
<form method=“get"> <form method=“post">
... ...
</form> </form>

GET /suma.html?op1=2&op2=2 HTTP/1.1 POST /suma.html HTTP/1.1


. .
. .
. Content-Type: ...
Connection: Keep-Alive Content-Length: 11
[blank line] [blank line]
op1=2&op2=2

El navegador envía los datos El navegador envía los datos


ingresados como una ingresados en el cuerpo
cadena de consulta de la solicitud HTTP

Cualquiera sea el método utilizado, es decir GET o POST, cuando un form es


enviado al servidor, decimos que se produjo un POSTBACK
13
Procesamiento en el Servidor
Construir la parte del cliente es “fácil”, sólo es HTML.
La parte difícil es la construcción de la lógica del
lado del servidor. “Algo en el servidor”, tiene que
interpretar las entradas del usuario enviadas junto
con el form y generar la correspondiente salida.
Suma.html
<html>
Después del procesamiento
<body> Suma.html
<form> <html>
<input type="text" name="op1" /> <body>
+ <form>
<input type="text" name="op2" /> <input type="text" name="op1“ value=“2”/>
<input type="submit" value=" = " /> +
</form> <input type="text" name="op2“ value=“2”>
</body> <input type="submit" value=" = " />
</html> 4
</form>

Antes del procesamiento </body>


</html>

14
Formularios
Propiedades
⚫ Name: Nombre con que lo referenciamos.

⚫ Action: que quermos hacer con los datos.

⚫ Method: método para mover los datos (get/post).

⚫ Enctype: Tipo de contenido de los datos.

<html>
<head>
<title>Primer ejemplo en HTML</title>
</head>
<body>
<Form method="post" action="mailto:mio@mio.com" enctype="text/plain">
<Input> </Input>
</Form>
</body>
<html>

15
Formularios
Elementos de formularios
⚫ Input
⚫ Text
⚫ Password
⚫ CheckBox
⚫ Radio
⚫ Submit
⚫ Reset
⚫ File
⚫ Hidden
⚫ Image
⚫ Button
⚫ TextArea
⚫ Select
⚫ Button
16
Formularios
Input
⚫ <Input Type=“text” value=“Valor” size=NN maxlength= NN>

⚫ <Input Type=“password” value=“Valor” size=NN maxlength= NN>

⚫ <Input Type=“radio” name=“TipoDocumento” value=“DNI” checked>DNI<br>


⚫ <Input Type=“radio” name=“TipoDocumento“ value=“LE“>LE<br>

⚫ <Input Type=“checkbox” name=“AirBa” value=“SI” checked>Airbag<br>


⚫ <Input Type=“checkbox” name=“Direccion“ value=“NO“>Direccion
asistida<br>

⚫ <Input Type=“hidden” name=“Direccion“ value=“NO“>Direccion asistida<br>

⚫ <Input Type=“file” name=“FileName”>

⚫ <input type=“image” src=“Submit.gif” alt=“Submite“ width=“94”


height=“26”>
17
Formularios
Lista desplegable
<Select> ... </Select>

<html>
<head>
<title>Programación de Aplicaciones Visuales II</title>
</head>
<body>
<Form method="post" action="mailto:mio@mio.com" enctype="text/plain">
<select name="Tipo Documento">
<option value="DNI">Doc. Nac. Identidad</option>
<option value="LE" selected>Libreta de Enrolamiento</option>
<option value="LC">Libreta Civica</option>
<option value="PASAPORTE">Pasaporte</option>
</select>
</Form>
</body>
<html>

18
Formularios
Lista enrollable
SELECT incluyendo el atributo “Size”

<html>
<head>
<title>Programación de Aplicaciones Visuales II</title>
</head>
<body>
<Form method="post" action="mailto:mio@mio.com" enctype="text/plain">
<select name="Tipo Documento" size="3">
<option value="DNI">Doc. Nac. Identidad</option>
<option value="LE" selected>Libreta de Enrolamiento</option>
<option value="LC">Libreta Civica</option>
<option value="PASAPORTE">Pasaporte</option>
</select>
</Form>
</body>
<html>

19
Formularios
Area de Texto

<html>
<head>
<title>Programación de Aplicaciones Visuales II</title>
</head>
<body>
<form method="post" action="mio@mio.com.ar" enctype="text/plain">
<textarea name="Comentario" cols="60" rows="5" wrap="soft">
</textarea>
</form>
</body>
</html>

20
Formularios
Enviar y resetear un formulario
⚫ <Input Type=“submit” Name = “Nombre1”
value=“Presione aquí para enviar”>
⚫ <Input Type=“reset”> Name=“Nombre2”
value=“Presione aquí para resetear”>

21
Script

<script type="text/javascript"> ... </Script>


<Script language="JavaScript"> ... </Script>
Eventos comunes
⚫ OnClick Recibe un click
⚫ OnChange Pierde el foco y el valor cambio

⚫ OnBlur Pierde el foco


⚫ OnFocus Toma el foco
⚫ OnSelect Se selecciona el texto
Mas información en: http://www.w3schools.com
22

También podría gustarte