HTML Que es HTML Nace del XML en
- Slides: 37
HTML
Que es HTML? Nace del XML en los principios de la “web” ● Es un lenguaje de estructuracion de documentos ● NO es considerado un lenguaje de programacion ● Es la base de cualquier pagina web (Excepto paginas Flash) ●
Y. . . Para que sirve? Es usado para estructurar y disenar paginas web. ● Los Browsers (1) Lo usan para poder traducir ` y mostrar la informacion disponible en una pagina web de una manera estructurada, con tablas, imagenes, animaciones , formularios e hipervinculos (links) ●Es ademas un estandar existente para la creacion de documentos. ● (1) Browser es el software utilizado para visualizar paginas web. Ej: Mozilla Firefox, ` Internet Explorer
Tags? Html utiliza tags para representar sectores y estructuras dentro de la pagina web. ●Los tags comienzan (generalmente) de la forma: < tag > ●Terminando (generalmente) de la forma: < / tag > ●
Distintos Tags Existe una gran variedad (mas de 60) de tags distintos, donde cada uno representa algo diferente dentro de la pagina. ●
Tags <html> </html> ● <hn> </hn> con n = 1, 2, 3 ● <body> </body> ● <table> </table> ● <font> </font> ● <b> </b> ● ● <img src=””> ●
<html> </html> Marca el comienzo (<html>) y el fin (</html>) de una pagina web HTML. ● Es absolutamente necesario para que el browser identifique tipo de documento es y donde este comienza. ●
<body> </body> Marca el comienzo (<body>) y el fin (</body>) del contenido de una pagina web ●Tiene parametros extra para definir cosas como: ● Color de Fuente ● Color de Fondo ● Imagen de Fondo ● Color de Links ●
<body> </body> Ejemplo: <body bgcolor=”fondo. jpg” link=”#FFFFFF” color=”black”> MAS TAGS ACA </body>
<title> </title> v v Introduce un titulo al documento Es la leyenda que se ve en el borde superior del navegador Ejemplo: <title> Titulo de la pagina </title>
<font> </font> ● Cambia las propiedades de la fuente Ejemplo: <font face=”Verdana” color=”red”> Este texto estara en verdana y con color rojo </font>
<a> </a> ● Crea un hipervinculo (link) Ejemplo: <a href=”http: //www. fen. uchile. cl”> Click Aca para entrar a la la FEN</a> href = hyperlink reference
● Inserta un break (enter o nueva linea) Ejemplo: Esto es un texto, en donde ahora aca inserto una nueva linea. Despues del cierre de un parrafo tambien viene una nueva linea.
Ejemplo de una pagina web <html> <body bgcolor="green" link="red"> <title> Mi primera pagina web </title> <center> Aqui estoy centrando el texto en la pagina </center> Este es un texto normal. <b> Y Ahora agregro una letra en negrita </b> Para finalizar con una palabra en <font color="red"> rojo </font> con un link a la pagina web de la <a href="http: //www. fen. uchile. cl"> FEN</a> </body> </html>
Imagenes <img src=”Direccion”> Para insertar una imagen hay que definir el lugar fisico o virtual en donde esta se encuentra. Lugar Fisico: Una direccion en el disco duro (C: imagenesimagen. jpg) Lugar Virtual: Una direccion en internet (http: //www. uchile. cl/logo. gif)
Imagenes <img src=”Direccion”> Ejemplo: <img src=”C: imagenesimagen. jpg”> NO TIENE CIERRE Tiene parametros extra como: width, height, alt, border
Tablas Las tablas son quizas una de las estructuras mas usadas en una pagina web ● Se usan generalmente para definir el diseno de esta ● Son muy utilizadas para los formularios y Listas de datos ●
<table> </table> Define el comienzo de una tabla y el fin de esta. Tiene parametros extra como: ● border ● bgcolor ● background ● width ● height
<tr> </tr> Define el comienzo de un Row (fila) dentro de una tabla y el fin de esta. ● Tiene parametros extra como: ● bgcolor ● background ● width ● height ●
<td> </td> Define el comienzo de una columna dentro de una fila (tr) y el fin de esta. ● Tiene parametros extra como: ● bgcolor ● background ● width ● height ●
Ejemplo de una tabla sencilla <table border="1"> <tr> <td> N </td> <td> RUT </td> <td> Nombre </td> <td> Apellido </td> <td> Nota </td> </tr> <td> 1 </td> <td> 16021543 -2 </td> <td> Roberto </td> <td> Konow </td> <td> 39, 5 </td> </tr>
Ejemplo de una tabla sencilla (Continuacion) <tr> <td> 2 </td> <td> 1121543 -2 </td> <td> Macarena </td> <td> Cazenave </td> <td> 69, 6 </td> </tr> <td> 3 </td> <td> 1121543 -2 </td> <td> Cristian </td> <td> Tala </td> <td> 1, 0 </td> </tr> </table>
Formularios Los formularios sirven para poder enviar informacion desde el browser hacia algun otro lugar (generalmente hacia el servidor mismo) ●Los formularios pueden enviar la informacion de dos formas distintas: POST y GET ●Cada item (textarea, text) de un formulario TIENE que tener un nombre definido. ●
Input Items <input type=”item” name=”nombre” value=”valor”> ● ● ● Text Password Submit Checkbox Radio Select
Formularios POST Cuando se envia informacion usando el metodo POST, esta se envia de forma “escondida” utilizando el browser. ● Se usa generalmente para los formularios de tipo Login y Password. ●
Formularios GET Cuando se envia informacion usando el metodo GET, esta se envia de forma “explicita” en la URL (direccion). ● Se usa generalmente para crear links dinamicos. ● Ejemplo: http: //www. uchile. cl/index. java? pagina=inicio&tipo=us uario ●
Formularios Ejemplo <form action="test. java" name="formulario" method="POST"> <input type="text" name="nombre"> <textarea name="detalle"> </textarea> <input type="submit" name="add" value="Agregar"> </form> Al oprimir el boton Agregar se llama al “Servlet” test. java que procesa la información introducida al formulario por el usuario (ver próxima clase)
Formularios en tablas <table border="1"> <form action="test. jsp" name="formulario" method="POST"> <tr> <td> Nombre: </td> <input type="text" name="nombre"> </td> </tr> <td> Detalle: </td> <textarea name="detalle"> </textarea> </td> </tr> <td><input type="submit" name="add" value="Agregar"> </td> </tr> </form> </table>
Selección única alternativa: radio Se implementa con un conjunto de lineas <input type=radio name=nombre value=valor> Todas con el mismo atributo nombre Ejemplo: Ingrese su rango de edad <input type=radio name=redad value=menor 15> menor que 15 <input type=radio name=redad value=entre 15 -25> entre 15 y 25 <input type=radio name=redad value=entre 26 -35> entre 26 y 35 <input type=radio name=redad value=entre 36 -45> entre 36 y 45 <input type=radio name=redad value=entre 46 -55> entre 46 y 55 <input type=radio name=redad value=mayor 56> 56 o mayor
Selección única alternativa: Select Se implementa con un conjunto de opciones <option value=valor> Texto </option> Encerradas entre tags <select name=nombre> y </select> Ejemplo: Ingrese su color preferido <select name=color> <option value=rojo> Color Rojo </option> <option value=azul> Color Azul</option> <option value=verde> Color Verde</option> <option value=gris> Color Gris</option> <option value=amarillo> Color Amarillo</option> </select>
Selección varias alternativas: checkbox Se implementa con un conjunto de lineas <input type=checkbox name=nombre value=valor> Todas con el mismo atributo nombre Ejemplo: Que idiomas habla <input type=checkbox name=idioma value=eng> Inglés <input type=checkbox name=idioma value=fra> Francés <input type=checkbox name=idioma value=chi> Chino <input type=checkbox name=idioma value=de> Alemán <input type=checkbox name=idioma value=es> Español <input type=checkbox name=idioma value=ru> Ruso
Pongamos todo junto en una página para ordenar pizzas <title> Pizza Order Page </title> <H 2>Welcome to Electronic Pizza </H 2> <p> This page allows you to order your pizza which will be delivered just 30 mitutes after you press the "ORDER" button <BR><h 4>Type of Dough: Thin <input type=radio name=dough value=thin> Medium <input type=radio name=dough value=medium> Thick <input type=radio name=dough value=thick> </h 4> <BR> <h 4>Ingredients: <input type=checkbox name=ing 1 value=tomato> Tomato <input type=checkbox name=ing 1 value=ham>Ham <input type=checkbox name=ing 1 value=paprika>Paprika <input type=checkbox name=ing 1 value=onion>Onion <input type=checkbox name=ing 1 value=corn>Corn </h 4>
<BR> <h 4>Size: <select name=size=1> <option value=small>small</option> <option value=medium>medium</option> <option value=big>big</option> <option value=jumbo>jumbo</option> </select></h 4> <BR><h 4> Phone number: <input type=text name=phone> Credit Card Number: <input type=password NAME=card. Nu"></h 4><BR> <input type=submit value="ORDER">
<BR> <h 3>Prices for Ingredients </h 3> <table border="1"> <tr> <td> Ingredient Name </td> <td> Price </td> </tr> <td> Ham </td> <td> 234 </td> </tr> <td> Paprika </td> <td> 225 </td> </tr> <td> Onion </td> <td> 456 </td> </tr> <td> Corn</td> <td> 555 </td> </tr> <td> Tomato </td> <td> 300 </td> </tr> </table> </form>