Introducción a HTML y Formularios

Como funciona la web… 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. La computadora se comunica con una red de servidores llamada Domain Name System (DNS). Esta red actúa como una agenda de teléfonos diciendo a la computadora la dirección IP asociada al dominio que se solicito. Cada dispositivo en la web tiene una IP única (es como el numero de teléfono para esa computadora). Las direcciones IP tradicionalmente están compuestas por 12 dígitos numéricos separados por “puntos”. Ejemplo: 102.230.213.222. El numero que le devuelve el servidor de DNS a la computadora le permite al navegador conectarse al servidor que se solicito. El servidor web entonces devuelve la pagina que se solicito al navegador para ser mostrada.

URL Localizador de recursos uniforme, más comúnmente denominado URL (sigla en inglés de uniform resource locator), 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 : http://www.asp.net/mvc/mvc3

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 página solicitada. En este caso el servidor es www.asp.net. 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 página en particular dentro del sitio de ASP.NET. Cuando no hay nada luego del donde es porque existe un default para el path (por ejemplo index.html)

¿Qué sucede después? 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 un número telefónico y que te contesten 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 cuando se escribe mal una dirección URL.

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 y respuestas de recursos web que son 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).

Uniendo todo hasta acá Introducimos al navegador una pagina particular (http://www.asp.net/mvc/mvc3) El navegador analiza la URL en 3 partes: el protocolo, el servidor y el path. El navegador utiliza el sistema de DNS para convertir el nombre “amigable” (www.asp.net) en la dirección IP (206.72.125.204). El navegador realizó una conexión a la dirección IP del servidor. El navegador envió al servidor una petición HTTP pidiendo una copia del documento HTML que se encontraba en ese path. El servidor encontró el documento HTML solicitado y le devolvió una copia al navegador a través de una respuesta HTTP. El navegador recibió la respuesta. El navegador interpretó y mostro el documento HTML. El navegador eliminó la conexión con el servidor, terminando la sesión actual.

HTML HTML es un lenguaje para describir las páginas web. HTML significa Hyper Text Markup Language HTML es un lenguaje de etiquetas (markup) Las etiquetas describen el contenido del documento. Los documentos HTML contienen etiquetas HTML y texto plano. A Los documentos HTML también se los conoce como Sitios Web!!!

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 <tagname>content</tagname> "HTML tags" y "elementos HTML" a menudo se utilizan para describir la misma cosa. Pero estrictamente hablando, un elemento HTML está todo lo que contiene una etiqueta inicial su etiqueta final, incluyendo las etiquetas. Elemento HTML: <p>Esto es un parrafo.</p>

Ejemplo HTML La declaración DOCTYPE define el tipo de documento <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> 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 un título •El texto entre <p> y </ p> se muestra como un párrafo

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, etc. La etiqueta <form> se utiliza para crear un formulario HTML: <form> . elementos </form>

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> Visualización del ejemplo

Campos de texto y contraseña <input type="text"> define un campo de entrada de una línea que un usuario puede introducir texto en: <form> Nombre: <input type="text" name="firstname"><br/> Apellido: <input type="text" name="lastname"><br/> Contraseña: <input type=“password” name=“pwd”> </form> Visualización del ejemplo

Radiobuttons y Checkboxes <form> <input type="radio" name="sex" value="male">Macho<br/> <input type="radio" name="sex" value="female">Femenino<br/> <input type="checkbox" name="vehicle" value="Bike">Tengo una bicicleta<br/> <input type="checkbox" name="vehicle" value="Car">Tengo un coche </form> Visualización del ejemplo

Selects (listas desplegables) El elemento <select> se utiliza para crear una lista desplegable. Los <option> dentro del elemento <select> definen las opciones disponibles en la lista. <form> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </form>

Submit Button <input type="submit"> define un botón de envío. El botón de submit 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>

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 El segundo es el método POST La diferencia entre los métodos get y post radica en la forma de enviar los datos a la página cuando se pulsa el botón “Enviar”. Mientras que el método GET envía los datos usando la URL, el método POST los envía de forma que no podemos ver el contenido enviado.

Método GET Coodificación en el formulario: <form action="http://misitioweb.com/forms/procesar.php" method ="get"> El resultado utilizando el método GET sería: http://misitioweb.com/forms/procesar.php?nombre=Carmen&apellido=Tirosa&email=carmentirosa%40gmail.com&sexo=Mujer

Método GET En esta URL podemos distinguir varias partes: http://misitioweb.com/forms/procesar.php?nombre=Carmen&apellido=Tirosa&email=carmentirosa%40gmail.com&sexo=Mujer En esta URL podemos distinguir varias partes: http://misitioweb.com/forms/procesar.php es la dirección web en sí. El símbolo ? indica dónde empiezan los parámetros que se reciben desde el formulario que ha enviado los datos a la página. Las parejas dato1=valor1, dato2=valor2, dato3=valor3 reflejan el nombre de los parámetros y el valor de los campos enviados en el formulario por el usuario. Tener en cuenta que para indicar el comienzo de los parámetros se usa el símbolo ‘?’ y para la separación de los mismos el símbolo ‘&’. Existen determinados caracteres que no son recibidos en la URL de la misma forma en que fueron escritos en el formulario. Por ejemplo, el valor del campo email que se recibe en la URL es carmentirosa%40gmail.com. El carácter @ ha sido sustituido por los caracteres %40. Estas equivalencias se introducen automáticamente en la transmisión de datos debido a que las URLs no admiten determinados caracteres como letras con tildes, arrobas y otros. No debes preocuparte por esta codificación, ya que si posteriormente rescatamos los valores mediante otros mecanismos volveremos a obtener el texto original. Simplemente, conviene conocer esta circunstancia para no pensar que están ocurriendo cosas extrañas o errores.

Método POST Hemos visto el resultado de un envío por el método GET. En el caso de un envío de datos usando el método POST, aunque estos datos también serán enviados (de una forma que podemos denominar “oculta”), no los podremos ver en la URL. Para poder recuperar los valores de los campos en el caso de un envío con el método post necesitaríamos otras herramientas (por ejemplo valernos del lenguaje PHP para recuperar el valor de esos campos). Ejemplo del código en el formulario: <form action="http://misitioweb.com/form/procesar.php" method ="post">

Recepción de datos enviados desde un formulario Para recoger los valores que han sido pasados a través de un formulario, tenemos que usar el objeto del servidor Request y dependiendo de como han sido pasado, si por GET o por POST, usaremos QueryString o Form. Si hemos usado el método GET, entonces cada valor será recuperado de la siguiente manera: Request.QueryString("Nombre variable") Si hemos usado el método POST será entonces: Request.Form("Nombre variable").