Descargar como PPSX, PPTX
Tema2(1)
- 1. Curso 2012 –2013 Profesora: Désirée Torreira Pereira 1
- 2. Lenguajes de marcas:HTML 1. Clasificación de los lenguajes de marcas 2. HTML. Estructura y elementos. 3. Etiquetas y atributos 4. Elementos multimedia 5. XHTML 2
- 3. 1. Lenguajes demarcas. Clasificación. Un lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto, o su presentación Las ‘marcas’ indican donde empieza un párrafo, si hay tabla, o listas, etc. 3
- 4. Lenguajes de marcas.Clasificación. Procedimental: Describen operaciones tipográficas Estructural: Describen la estructura lógica de un documento, pero no su tipografía Híbrido: Combinación de ambos 4
- 5. Lenguajes de marcas.Clasificación. Documentación electrónica RTF TeX Wikitexto Tecnologías de internet HTML, XHTML RSS 5
- 6. 2. HTML. ESTRUCTURAY ELEMENTOS El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado. 6
- 7. 2. HTML. ESTRUCTURAY ELEMENTOS Inconvenientes: Información estática (ver ej. Santillana) Vocabulario limitado Ventajas: Muy sencillo No requiere herramientas especiales Muy difundido 7
- 8. 2. HTML. ESTRUCTURAY ELEMENTOS Existen varias versiones (hasta la 5), ya que se han ido incorporando etiquetas nuevas para tratar la información multimedia, los marcos, hojas de estilo, etc. Es posible que distintos muestren la información de manera distinta, o incluso que un navegador no soporte la última versión, el HTML 5.0. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda reflejado en la página. 8
- 9. 3. Etiquetas yatributos Etiquetas: Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. Etiquetas de inicio: <identificador_de_etiqueta> Etiquetas de fin: </identificador_de_etiqueta> 9
- 10. 3. Etiquetas yatributos Atributo: Propiedad que se le añade opcionalmente a una etiqueta de inicio: <identificador_de_etiqueta atributo1 atributo2…> 10
- 11. 3. Etiquetas yatributos Ejemplo 1: La etiqueta <p> indica un párrafo. En el ejemplo aparece con el atributo align=“center” para centrar el texto. <p align="center">Bienvenidos a mi página Web</p> 11
- 12. 3. Etiquetas yatributos Ejemplo 2: La etiqueta <font> indica el tipo de fuente o texto a utilizar. En este caso aparece con atributos que indican el color y el tamaño del texto, y está anidada dentro de la etiqueta <p>. <p align="center"> <font color="#993366" size="4" face="Arial"> Bienvenidos a mi página web </font> </p> 12
- 13. 3. Etiquetas yatributos – Estructura de página Estructura de una página Web: <html> <head> … </head> <body> … </body> </html> 13
- 14. 3. Etiquetas yatributos: <html> Identificador del tipo de documento <html> Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas fundamentales <html> y </html>. <html> <head> … </head> <body> … </body> </html> 14
- 15. 3. Etiquetas yatributos: <head> Cabecera de la página <head> Da información sobre la página: título, palabras clave para los buscadores, autor, descripción, etc. <html> <head> … </head> <body> … </body> </html> 15
- 16. 3. Etiquetas yatributos: <head> <head> admite otras etiquetas anidadas. Cabe destacar: <title> para poner título a la web. <meta> para indicar autor, descipción, keywords, … <head>... <meta name="author" content=« Desiree Torreira »> <meta name="description" content="Curso de HTML"> <meta name="keywords" content="código HTML etiqueta"> </head> 16
- 17. 3. Etiquetas yatributos: <body> Atributos: de la etiqueta <body> Bgcolor color de fondo Background imagen de fondo Text color del texto Etiquetas anidadas : <p><br><div><table><ol><ul> <marquee><a><img><font> y muchas más. 17