n al HTML - Cristian Tala Sánchez
Anuncio
Introducción al HTML Cristian Tala Sánchez Universidad Diego Portales Martes 18 de Mayo 2010 Objetivos clase ◮ Introducción a HTML Objetivos clase ◮ Introducción a HTML ◮ Que son los TAGS ? Objetivos clase ◮ Introducción a HTML ◮ Que son los TAGS ? ◮ Tags HTML Objetivos clase ◮ Introducción a HTML ◮ Que son los TAGS ? ◮ Tags HTML ◮ Tablas Objetivos clase ◮ Introducción a HTML ◮ Que son los TAGS ? ◮ Tags HTML ◮ Tablas ◮ Imágenes Objetivos clase ◮ Introducción a HTML ◮ Que son los TAGS ? ◮ Tags HTML ◮ Tablas ◮ Imágenes ◮ Enlaces Introducción a HTML ◮ Html es el lenguaje predominante al momento de diseñar páginas web. ◮ Esta basado en etiquetas(tags) que forman su estructura. ◮ Posee elemntos y atributos. Elementos y Atributos ◮ Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Elementos y Atributos 1 ◮ Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. ◮ Un elemento generalmente tiene una etiqueta de inicio y una etiqueta de cierre. <p c l a s s=” m i C l a s e ”> E s t e e s e l c o n t e n i d o </p> Elementos y Atributos 1 ◮ Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. ◮ Un elemento generalmente tiene una etiqueta de inicio y una etiqueta de cierre. ◮ Existen ciertas excepciones como BR y HR que no tienen cierres, debido a que no los necesitan. <p c l a s s=” m i C l a s e ”> E s t e e s e l c o n t e n i d o </p> Tags¡? Se comen? ◮ Corresponden a las etiquetas que envuelven a los elementos. Tags¡? Se comen? ◮ Corresponden a las etiquetas que envuelven a los elementos. ◮ Existen alunos tı́picos que usaremos. Tags que ocuparemos ◮ Html: La página. Tags que ocuparemos ◮ Html: La página. ◮ Body: Contenido. Tags que ocuparemos ◮ Html: La página. ◮ Body: Contenido. ◮ head: Información con respecto a la página. Tags que ocuparemos ◮ Html: La página. ◮ Body: Contenido. ◮ head: Información con respecto a la página. ◮ Title: Titulo de la página. Tags que ocuparemos ◮ Html: La página. ◮ Body: Contenido. ◮ head: Información con respecto a la página. ◮ Title: Titulo de la página. ◮ H del 1 al 7. (Headers / Tı́tulos de mayor o menor importancia). Tags que ocuparemos ◮ Html: La página. ◮ Body: Contenido. ◮ head: Información con respecto a la página. ◮ Title: Titulo de la página. ◮ H del 1 al 7. (Headers / Tı́tulos de mayor o menor importancia). ◮ Img: Imagenes. Tags que ocuparemos ◮ Html: La página. ◮ Body: Contenido. ◮ head: Información con respecto a la página. ◮ Title: Titulo de la página. ◮ H del 1 al 7. (Headers / Tı́tulos de mayor o menor importancia). ◮ Img: Imagenes. ◮ Table, TD, TR. Tags que ocuparemos ◮ Html: La página. ◮ Body: Contenido. ◮ head: Información con respecto a la página. ◮ Title: Titulo de la página. ◮ H del 1 al 7. (Headers / Tı́tulos de mayor o menor importancia). ◮ Img: Imagenes. ◮ Table, TD, TR. ◮ Li, Ol, Ul. Imagenes ◮ Para insertar la imagen se le debe de asignar la ruta de esta. ◮ tambien posee los atributos de ancho y largo. Imagenes 1 ◮ Para insertar la imagen se le debe de asignar la ruta de esta. ◮ tambien posee los atributos de ancho y largo. <img s r c=” img /compu3 . j p g ” /> Tablas ◮ 1 Se dividen en filas y columnas. <t a b l e><t r><td>C o n t e n i d o de una c e l d a</ td></ t r ></ t a b l e> Tablas 1 ◮ Se dividen en filas y columnas. ◮ Las filas o rows usan la etiqueta TR. <t a b l e><t r><td>C o n t e n i d o de una c e l d a</ td></ t r ></ t a b l e> Tablas 1 ◮ Se dividen en filas y columnas. ◮ Las filas o rows usan la etiqueta TR. ◮ Las Columnas ocupan la etiqueta TD. <t a b l e><t r><td>C o n t e n i d o de una c e l d a</ td></ t r ></ t a b l e> Texto ◮ b / strong: texto en negrita ◮ i / em: texto en cursiva. ◮ s / del: texto tachado. ◮ u: texto subrayado Listas ◮ li. Item de la lista. ◮ ol. Lista ordenada (Enumerada). ◮ ul. Lista desordenada (Sin enumerar). Enlaces / Links 1 <a h r e f=” e n l a c e ”><img s r c=” imagen ” /></a> . Lo que veremos Antes de poder continuar con nuestro proyecto, este viernes veremos un poco de JSP (Java Server Pages), con lo cual mezclaremos los conocimientos adquiridos de html. con lo que ya sabiamos de JAVA. ◮ Recuerden que cada vez estamos más cerca de construir nuestro blog!. ◮ Ya que no creo que lo hayan hecho, el próximo martes revisaremos la BdD de nuestro blog. ◮ El próximo viernes(Próxima semana). Programaremos páginas web.
