html. que es html? ● nace del xml en los principios de la “web” ● es un lenguaje de...
TRANSCRIPT
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 referencehref = 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><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><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.
Items
<input type=”item” name=”nombre” value=”valor”>
● Text● Submit● Reset● Image
<textarea name=”Area de texto”> </textarea>
FormulariosPOST
●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.
FormulariosGET
●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
FormulariosEjemplo
<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><tr>
<td> Detalle: </td><td> <textarea name="detalle"> </textarea> </td>
</tr><tr>
<td><input type="submit" name="add" value="Agregar"> </td></tr></form>
</table>
