Introducción a Lenguajes web

1 Introducción a Lenguajes webEstela Conde Álvarez Introd...
Author: Adora Altamirano
0 downloads 2 Views

1 Introducción a Lenguajes webEstela Conde Álvarez Introducción al Diseño Para Todos en las TIC 12 Diciembre 2006

2 Problemas típicos con HTMLPermitía errores Cada navegador etiquetas propias Mezcla de contenido y estilo Uso de tablas para maquetar ….. Resultado: Páginas mal escritas Funcionamiento desigual según navegador Mal en ciertos dispositivos Problemas de accesibilidad Solución: Html limpio Separación de contenido y estilo

3 XHTML: CaracterísticasXHTML= EXtensible Hypertext Markup Language Reformulación de HTML 4.01 en XML Parecido a HTML 4.01, Más estricto, más limpio Recomendación W3C Fichero de texto con etiquetas de marcado Obligatorio minúsculas Etiquetas indispensables: ,,

4 XHTML ¿Por qué? HTML mal: Título

Cabecera XML: necesidad de marcar todo correctamente Diferencias XMLHTML XML: para describir datos HTML: para mostrar datos Navegadores: PC, móviles, PDA’s  suficiente capacidad para interpretar mal HTML?? HTML+XML=XHTML

5 XHTML: CaracterísticasDocumentos bien formados Etiquetas en minúsculas Elementos deben cerrarse:

Esto es un párrafo


(OJO: espacio) Elementos bien emparejados: HTML mal :

This text is bold and italic

 XHTML:

This text is bold and italic

6 XHTML: CaracterísticasNombres de atributos en minúsculas Valores de atributos entre comillas

Prohibido minimizar atributosMal: Bien: El atributo name, sustituido por atributo idMal: Bien: Tipos de documentos xhtml:Strict: marcado limpio. Se usa con CSSTransitional: tiene características de presentación.Frameset: para usar frames

7 XHTML: estructura mínima obligatoria El título

8 XHTML: algunas etiquetas,

:secciones

: párrafo

  • : listas :cabeceras i=1..6 :imágenes : enlaces dentro o fuera de la página Enlace a Escuela Ir a párrafo 1

    Párrafo 1

    9 CSS: Características CSS = Cascade Style SheetsIndica cómo mostrar las etiquetas HTML Tipos: Internas: en páginas html (en head) Externas: en hojas .css Prioridad: estilo del elemento  css interno  css externo  estilo del navegador Ventajas: Páginas fácilmente modificables Varios estilos para una página Fácil consistencia de sitios web

    10 CSS: Sintaxis Selector { Selector = elemento htmlpropiedad1: valor1; propiedad2: valor2; } Selector = elemento html Propiedad = atributo que quieres cambiar Ej: Párrafo html:

    Soy un párrafo

    CSS: Cambiar alineación, color, tipo de fuente p { text-align: center; color: black; font-family: arial;

    11 CSS: Selectores (class)ElementoHtml.NombreClase{ propiedad:valor; } .NombreClase { HTML:

    Párrafo azul

    Párrafo verde

    CSS: p.azul {color: blue;} p.verde {color: green} .azul{color:blue;}

    12 Css: Selectores (id) ElementoHtml#IdElemento{ propiedad:valor; }No empezar id con nº  no funciona en Mozilla Las unidades de los valores pegadas a los valores  no funciona en Netscape o en Mozilla HTML:

    Párrafo azul

    CSS: p#azul {color: blue;} #azul{color:blue;}

    13 Css: Pseudoclases selector:pseudoclase { Ejemplos: propiedad: valor }Enlace no visitado: a:link { propiedad: valor} Enlace visitado: a:visited {propiedad: valor} Foco sobre enlace: a:hover {propiedad: valor} Enlace seleccionado: a:active {propiedad: valor} :first-child, :lang

    14 Css: pseudoelementos selector:pseudoelemento {propiedad: valor } Ej: first-line, first-letter, :before, :after

    15 Css en html CSS externa: CSS interna: