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.

Presentación del tema: "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."— Transcripción de la presentación:

1 HTML

2 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)

3 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 `

4 Herramientas Utiles ● Macromedia Dreamweaver (+++) ● NVU (++) ● Microsoft Office Frontpage ( - - ) ● OpenOffice (+) ● Microsoft Word ( - - - ) ● Block de Notas (+)

5 Tags? ● Html utiliza tags para representar sectores y estructuras dentro de la pagina web. ● Los tags comienzan (generalmente) de la forma: ● Terminando (generalmente) de la forma:

6 Distintos Tags ● Existe una gran variedad (mas de 60) de tags distintos, donde cada uno representa algo diferente dentro de la pagina.

7 Tags ● ● con n = 1,2,3 ●

8 ● Marca el comienzo ( ) y el fin ( ) de una pagina web HTML. ● Es absolutamente necesario para que el browser identifique que tipo de documento es y donde este comienza.

9 ● Marca el comienzo ( ) y el fin ( ) 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

10 Ejemplo: MAS TAGS ACA

11 ● Introduce un titulo al documento Ejemplo: Titulo de la pagina

12 ● Cambia las propiedades de la fuente Ejemplo: Este texto estara en verdana y con color rojo

13 ● Crea un hipervinculo (link) Ejemplo: Click Aca para entrar a la UDP http://www.uchile.cl href = hyperlink reference

14 ● 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.

15 Ejemplo de una pagina web Mi primera pagina web Aqui estoy centrando el texto en la pagina Este es un texto normal. Y Ahora agregro una letra en negrita Para finalizar con una palabra en rojo con un link a la pagina web de la UDP

16

17 Imagenes 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)

18 Imagenes Ejemplo: NO TIENE CIERRE Tiene parametros extra como: width,height,alt,border

19 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

20 Define el comienzo de una tabla y el fin de esta. Tiene parametros extra como: ● border ● bgcolor ● background ● width ● height

21 ● Define el comienzo de un Row (fila) dentro de una tabla y el fin de esta. ● Tiene parametros extra como: ● bgcolor ● background ● width ● height

22 ● Define el comienzo de una columna dentro de una fila (tr) y el fin de esta. ● Tiene parametros extra como: ● bgcolor ● background ● width ● height

23 Ejemplo de una tabla sencilla N RUT Nombre Apellido Nota 1 16021543-2 Roberto Konow 39,5

24 Ejemplo de una tabla sencilla (Continuacion) 2 1121543-2 Macarena Cazenave 69,6 3 1121543-2 Cristian Tala 1,0

25

26 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.

27 Items ● Text ● Submit ● Reset ● Image

28 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.

29 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

30 Formularios Ejemplo

31

32 Formularios Nombre: Detalle:

33