1. La evolución de HTML La evolución de las CSS 16

Tamaño: px

Comenzar la demostración a partir de la página:

Download "1. La evolución de HTML La evolución de las CSS 16"

María Jesús Maldonado Rojo
hace 6 años
Vistas:

1 HTML5 y CSS3 1. La evolución de HTML La evolución de las CSS La noción de módulo La evolución de los estados Los prefijos comerciales Utilizar los prefijos comerciales La compatibilidad de los navegadores La validación del código HTML Los navegadores 23 Buenas prácticas 1. Separar el contenido del formato La estructura semántica Optimizar el código y organizar sus archivos Ejemplos de páginas HTML/CSS bien formadas 29 Presentación de HTML5 1. Una breve cronología de HTML5 33 1/20

2 2. Las líneas maestras de HTML Las novedades de HTML HTML5 es un lenguaje de etiquetas Etiquetas Atributos de etiqueta Uso correcto de las etiquetas Elementos HTML 4 obsoletos A nivel de etiquetas A nivel de atributos 41 Estructura de los documentos 1. La declaración doctype El elemento <html> El elemento <head> El elemento <title> La codificación de los caracteres El elemento <body> Los comentarios 50 2/20

3 Contenedores semánticos 1. Objetivos El elemento <div> El elemento <span> El elemento <header> El elemento <footer> El elemento <aside> El elemento <nav> El elemento <main> El elemento <section> El elemento <article> Dos ejemplos de estructura semántica de página Un ejemplo de estructura semántica de un artículo 56 Contenedores de texto 1. Objetivos 59 3/20

4 2. Títulos Párrafos Citas Listas Listas ordenadas Listas no ordenadas Listas anidadas Listas de definiciones Texto preformateado Separadores horizontales Dos ejemplos de formato de los contenedores con CSS 74 Formato semántico del texto 1. Objetivos Caracteres especiales Negrita Cursiva Exponentes y subíndices 81 4/20

5 6. Subrayado Tachado Reducir el tamaño de letra Títulos y las citas cortas Inserciones y supresiones Dirección del texto Otros formatos semánticos 86 Enlaces 1. Insertar un enlace Enlaces a otra página Enlaces a una página situada en la misma carpeta Enlaces a una página situada en otra carpeta Enlace desde indice.htm hacia pagina1.htm Enlace desde pagina1.htm hacia pagina2.htm Enlace desde pagina2.htm hacia indice.htm Enlaces al interior de una página Enlaces a otro sitio Enlace a una dirección de 96 5/20

6 6. Enlaces para descargar un archivo Enlaces hacia una ventana específica Color y subrayado en los enlaces Descripción acerca del enlace Nuevas posibilidades con los enlaces 100 Tablas 1. Preámbulo Creación de una tabla Ancho de la tabla Bordes de la tabla Alineación de la tabla Alineación de las celdas de la tabla Celdas de la tabla Ancho de las celdas Alineación horizontal Alineación vertical Margen interior de las celdas Color de fondo Fusión de celdas Fusión de columnas Fusión de filas 120 6/20

7 5. Celdas de encabezado Leyenda de la tabla Agrupar columnas Estructuración de la tabla 126 Imágenes 1. Formatos de imagen El elemento <img> Los elementos <figure> y <figcaption> Insertar un enlace sobre una imagen Insertar una imagen de fondo 139 Formularios 1. Presentación Declarar el formulario Campo de texto Área de texto 148 7/20

8 5. Lista desplegable Botones de selección única (radio) Botones de selección múltiple (checkbox) Botón de envío Botón de anulación Botón de acción Campos ocultos Campos de transferencia de archivos Campos de contraseña Organización de los campos de formulario Etiquetado de los campos de formulario Campo de texto con lista de sugerencias Campo de texto para la dirección de correo electrónico Campo de texto url Campo de texto con formato numérico Campo de texto con formato de fecha 173 8/20

9 21. Campo de texto de búsqueda Campo de texto de color Cursores Una aplicación completa 182 Multimedia 1. Insertar un archivo de audio Etiqueta <audio> Formatos de archivo de audio Etiqueta <source> Programas de conversión de audio Compatibilidad con navegadores antiguos Insertar un archivo de vídeo Etiqueta <video> Formatos de archivo de vídeo Etiqueta <source> Programas de conversión de vídeo Compatibilidad con navegadores antiguos 204 Presentación de las hojas de estilo 1. El concepto de hoja de estilo La utilidad de las hojas de estilo 208 9/20

10 3. Una breve cronología Los módulos CSS La evolución de los estados La utilidad de los prefijos comerciales Compatibilidad con los navegadores Herramientas para trabajar con las hojas de estilo 218 Sintaxis de las CSS 1. Integrar los estilos CSS CSS integradas en un elemento HTML CSS internas al documento HTML CSS externas al documento HTML CSS importada Declaración de estilo CSS Selectores Selectores de tipo /20

11 9. Selectores de clase Selectores de identificación Selectores jerárquicos Pseudoclases Pseudoclases de enlace a:link a:visited a:hover a:active Pseudoclases de párrafo :first-letter :first-line Selectores de inserción :before :after Pseudoclases de selección Selectores de atributos Noción de cascada Noción de herencia Comentarios /20

12 21. Unidades de medida Notación de los colores 254 Propiedades CSS para las fuentes 1. CSS para las fuentes Aplicar una fuente Importar una fuente Aplicar la cursiva Cambiar a mayúsculas Cambiar el grosor de los caracteres Gestionar el tamaño de letra Agrupar las propiedades de la fuente Fuentes del sistema 272 Propiedades CSS para el texto 1. Aplicar un color Decoración del texto /20

13 3. Cambiar a mayúsculas o minúsculas Indentación de la primera línea Espacio entre letras Espacio entre palabras Gestionar el interlineado de los párrafos Controlar los espacios vacíos Alineación del texto Posicionamiento vertical del texto Gestionar el sentido de lectura del texto Aplicar sombreado al texto Gestionar el texto en exceso Utilizar reglas de división de palabras Ajustar la altura de los caracteres Texto en columnas 297 Propiedades CSS para listas y tablas 13/20

14 1. CSS para las listas Los símbolos de las listas Símbolos gráficos Posición del símbolo Sintaxis abreviada para las listas CSS para las tablas Espacio entre las celdas de las tablas Bordes de las tablas Celdas vacías en las tablas Posición de la leyenda de las tablas 309 Formato de las cajas 1. Concepto de modelo de caja o bloque Cajas en bloque o en línea Anchura y altura de las cajas Márgenes externos /20

15 5. Espaciado interno Aplicar un color de fondo Degradado de color Degradados lineales Degradados circulares Opacidad de las cajas Bordes de las cajas Estilos de los bordes Grosor del borde Color del borde Sintaxis abreviada Bordes decorados Bordes redondeados de las cajas Imágenes de fondo Aplicar una imagen de fondo Repetición de la imagen Posición de la imagen Fijación de la imagen Sintaxis abreviada Fondos múltiples Sombras sobre un elemento caja Redimensionar las cajas /20

16 Maquetación de las cajas 1. La maquetación web Posicionamiento de las cajas Posicionamiento estático Posicionamiento relativo Posicionamiento absoluto Posicionamiento fijo Flotación de las cajas Prohibir la flotación Superposición de las cajas Desbordamiento del contenido Recortar una caja Visualización de las cajas Propiedades CSS Visualización en bloque y en línea Visualización en tabla Mostrar y ocultar las cajas Maquetación flexible 378 Consultas de medios 16/20

17 1. Responsive Web Design y consultas de medios Consultas de medios Criterios Sintaxis Valores mínimos y máximos Operadores lógicos Tamaño de las pantallas Diseño responsive El sitio para una pantalla grande El sitio responsive 389 Propiedades de impresión 1. Utilidad de las hojas de estilo para la impresión Hojas de estilo según el medio de salida Presentación Incorporación Optimizar una página de impresión Salto de página antes Salto de página después Evitar los saltos de página El /20

18 Módulos gráficos CSS por venir 1. Módulos para los diseñadores gráficos Transformaciones Transiciones Animaciones Filtros gráficos Máscaras Ceñir texto 428 Diseño 2D 1. Introducción Etiqueta <canvas> Llamada al API de diseño Diseñar un rectángulo Agregar color Trazar una línea recta /20

19 7. Diseño de formas geométricas Importar imágenes Agregar texto Agregar sombreado Transformaciones 453 Geolocalización 1. Concepto y utilidad Funcionamiento Navegadores Protección de la privacidad Longitud y latitud Localización en un mapa Seguir los desplazamientos 463 Almacenamiento de datos en local 1. Presentación /20

20 2. El almacenamiento persistente El almacenamiento temporal 477 Las aplicaciones en modo desconectado (offline) 1. Presentación El archivo de grabación en caché (manifest) Ejemplo completo 487 El resto de las API JavaScript de HTML5 1. Líneas maestras Las API operativas Las API en desarrollo 496 índice /20

Documentos relacionados

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Código: DWEB003 Duración: 160 Horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos