Introduccion a HTML y Formularios. Gerardo Grinman 5D

Transcripción

1 Introduccion a HTML y Formularios Gerardo Grinman 5D

2 COMO FUNCIONA LA WEB 1. Cuando se conecta a la web, lo hace a través de un proveedor de servicios de Internet (ISP). Se escribe el nombre de dominio o una dirección web en el navegador para visitar un sitio, por ejemplo: google.com, microsoft.com, etc. 2. La computadora se comunica con una red de servidores llamada Domain Name System (DNS). Esta red actua como una agenda de telefonos diciendo a la computadora la direccion IP asociada al dominio que se solicito. Cada dispositivo en la web tiene una IP unica (es como el numero de telefono para esa computadora). Las direcciones IP tradicionalmente estan compuestas por 12 digitos numericos separados por puntos. Ejemplo:

3 COMO FUNCIONA LA WEB 3. El numero que le devuelve el servidor de DNS a la computadora le permite al navegador conectarse al servidor que se solicito. 4. El servidor web entonces devuelve la pagina que se solicito al navegador para ser mostrada.

4 URL Las URLs tienen un formato como el siguiente: <protocolo>://<servidor>/<path>. Echemos un vistazo a una URL y ver cómo se consigue dividir en pedazos :

5 URL El protocolo: es el como y le dice a la pc que convenciones hay que utilizar cuando se comunica con el servidor solicitado. En este caso el protocolo es http, que tiene un conjunto de reglas para solicitar y recibir contenido web. El servidor: es el donde, le dice a la pc el nombre de la computadora que aloja a la pagina solicitada. En este caso el servidor es El path: es el que e indica que pagina estamos interesados en acceder de ese sitio web. En este ejemplo, el path es mvc/mvc3, que es el nombre asociado con una pagina en particular dentro del sitio de ASP.NET.

6 Pero que sucede despues? La pc establece una conexión con la dirección IP del servidor y el servidor acepta la conexión, algo así como llamar a tu mamá y ella contesta el teléfono. Una vez establecida la conexión, el equipo envía algo que se llama una petición HTTP (lo veremos más adelante) y el servidor hace una de dos cosas: si se puede encontrar la página solicitada, se devuelve en una respuesta HTTP. Si el servidor no encuentra la página solicitada, se devuelve una "página 404 no encontrado" que es una respuesta especial, que es todo lo que vemos de vez en cuando si se escribe mal una dirección URL.

7 HTTP (HyperText Transfer Protocol) En la world wide web, las computadoras no se comunican con palabras, sino que utilizan protocolos como HTTP (HyperText Transfer Protocol). HTTP es una forma de estructura de peticiones de recursos web (y las respuestas correspondientes) de manera que que pueden ser entendidas claramente y sin ambigüedad por un ordenador. Además de utilizar un protocolo para gestionar la transferencia de información, el contenido real que se transfiere y presenta por el navegador también sigue un formato muy preciso llamado HTML (HyperText Markup Language).

8 En Resumen 1. Le dijimos al navegador de visitar una pagina particular ( 2. El navegador analiza la URL en 3 partes: el protocolo, el servidor y el path. 3. El navegador utiliza el sistema de DNS para convertir el nombre amigable ( en la direccion IP ( ). 4. El navegador realizo una conexion a la direccion IP del servidor. 5. El navegador envio al servidor una peticion HTTP pidiendo una copia del documento HTML que se encontraba en ese path. 6. El servidor encontro el documento HTML solicotado y le devolvio una copia al navegador a traves de una respuesta HTTP. 7. El navegador recibio la respuesta. 8. El navegador interpreto y mostro el documento HTML. 9. El navegador elimino la conexion con el servidor, terminando la sesion actual.

9 Que es HTML? HTML es un lenguaje para describir las páginas web. HTML significa Hyper Text Markup Language HTML es un lenguage de etiquetas (markup) A markup language is a set of markup tags Las etiquetas describen el contenido del documento. Los documentos HTML contienen etiquetas HTML y texto plano. Los documentos HTML tambien se los conoce como Sitios Web!!!

10 HTML Tags (etiquetas) Etiquetas HTML son palabras clave (nombres de etiqueta) rodeadas por corchetes angulares como <html> Etiquetas HTML normalmente vienen en pares como <b> y </ b> La primera etiqueta en una pareja es la etiqueta de inicio, la segunda etiqueta es la etiqueta de cierre La etiqueta final se escribe igual que la etiqueta inicial, con una barra diagonal antes del nombre de la etiqueta Etiquetas inicial y final son también llamados etiquetas etiquetas de apertura y cierre <tagname>content</tagname>

11 Elementos HTML "HTML tags" y "elementos HTML" a menudo se utilizan para describir la misma cosa. Pero estrictamente hablando, un elemento HTML está todo lo que entre la etiqueta inicial y la etiqueta final, incluyendo las etiquetas. Elemento HTML: <p>esto es un parrafo.</p>

12 <!DOCTYPE html> <html> <body> Ejemplo HTML <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html>

13 Explicacion del Ejemplo La declaración DOCTYPE define el tipo de documento El texto entre <html> y </ html> describe la página web El texto entre <body> y </ body> es el contenido de la página visible El texto entre <h1> y </ h1> se muestra como una partida El texto entre <p> y </ p> se muestra como un párrafo

14 Formularios HTML Formularios HTML se utilizan para pasar datos a un servidor. Un formulario HTML puede contener elementos de entrada como campos de texto, casillas de verificación, botones de radio, botones de envío y más. El formulario también puede contener listas de selección, textarea, fieldset, legend y elementos de etiquetado.

15 Formularios HTML La etiqueta <form> se utiliza para crear un formulario HTML: <form>.. elementos.. </form>

16 Campos de texto <input type="text"> define un campo de entrada de una línea que un usuario puede introducir texto en: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>

17 Campo de contraseña <input type="password"> define un campo de contraseña: <form> Password: <input type="password" name="pwd"> </form>

18 Radiobuttons <input type="radio"> define un botón de radio. Los botones de opción permiten al usuario seleccionar sólo una de un número limitado de opciones: <form> <input type="radio" name="sex" value="male">male<br> <input type="radio" name="sex" value="female">female </form>

19 Checkboxes <input type="checkbox"> define una casilla de verificación. Las casillas de verificación le permiten al usuario seleccionar cero o más opciones de un número limitado de opciones. <form> <input type="checkbox" name="vehicle" value="bike">i have a bike<br> <input type="checkbox" name="vehicle" value="car">i have a car </form>

20 Selects El elemento <select> se utiliza para crear una lista desplegable. Los <option> etiquetas dentro del elemento <select> definen las opciones disponibles en la lista. <select> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select>

21 Submit Button <input type="submit"> define un botón de envío. Un botón de enviar se utiliza para enviar los datos del formulario a un servidor. Los datos se envían a la página especificada en el atributo de acción del formulario. El archivo se define en el atributo de acción suele hacer algo con la información recibida: <form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="submit"> </form>

22 Métodos de Peticiones Hay dos métodos principales por los cuales un navegador interactúa con un servidor web. El más común es el método GET, en el que el navegador simplemente solicita el contenido de un URL en particular. El segundo es el método POST, en el que el navegador "envía" datos a un URL en particular. Por ejemplo, puede enviar algunos datos que un usuario ha entrado en un formulario en una página web.

23 GET GET es como tu navegador baja la mayoría de los archivos, como archivos HTML e imágenes. Puede ser usado también en la mayoría de los envíos si no hay muchos datos (el límite varía de navegador a navegador). Esta diseñado principalmente para obtener información del servidor. Ejemplo:

24 POST POST es usado para enviar un datos al servidor para ser procesado. Cuando un formulario HTML se envía usando POST, los datos del formulario se agregan al final de la petición POST. Esto no es tan rápido como al usar GET, pero es mucho más versátil. Por ejemplo, puedes enviar un archivo completo usando POST. El tamaño de los datos es ilimitado a diferencia de GET.