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 `
Herramientas Utiles Macromedia Dreamweaver (+++) NVU (++) Microsoft Office Frontpage ( - - ) OpenOffice (+) Microsoft Word ( - - - ) Block de Notas (+)
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> <br> <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 que 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> Introduce un titulo al documento 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.uchile.cl”> Click Aca para entrar a la UDP </a> href = hyperlink reference href = hyperlink reference
<br> Inserta un break (enter o nueva linea) Ejemplo: Esto es un texto, en donde ahora aca <br> inserto una nueva linea. <br> 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. <br> <b> Y Ahora agregro una letra en negrita </b> <br> Para finalizar con una palabra en <font color="red"> rojo </font> con un link a la pagina web de la <a href="http://www.udp.cl"> UDP </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:\imagenes\imagen.jpg) Lugar Virtual: Una direccion en internet (http://www.uchile.cl/logo.gif)
Imagenes <img src=”Direccion”> Ejemplo: <img src=”C:\imagenes\imagen.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>
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> Cristian </td> <td> Tala </td> <td> 1,0 </td> </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.
Items <input type=”item” name=”nombre” value=”valor”> Text Submit Reset Image <textarea name=”Area de texto”> </textarea>
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.udp.cl/index.jsp?pagina=inicio&tipo=usuario
Formularios Ejemplo <form action="test.jsp" name="formulario" method="POST"> <input type="text" name="nombre"> <br> <textarea name="detalle"> </textarea> <br> <input type="submit" name="add" value="Agregar"> </form>
Formularios <table border="1"> <form action="test.jsp" name="formulario" method="POST"> <tr> <td> Nombre: </td> <td> <input type="text" name="nombre"> </td> </tr> <td> Detalle: </td> <td> <textarea name="detalle"> </textarea> </td> <td><input type="submit" name="add" value="Agregar"> </td> </form> </table>