Curso práctico avanzado

Transcripción

1 Curso práctico avanzado 1

2 HTML & CSS HTML & CSS: Curso práctico avanzado Sergio Luján Mora De la edición: PUBLICACIONES ALTARIA, S.L. Se ha puesto el máximo interés en ofrecer al lector una información completa y precisa. No obstante, PUBLICACIONES ALTARIA, S.L. no asume ninguna responsabilidad derivada del uso, ni tampoco por cualquier violación de patentes y otros derechos de terceros que pudieran ocurrir mientras este libro esté destinado a la utilización de aficionados o a la enseñanza. Las marcas o nombres mencionados son únicamente a título informativo y son propiedad de sus registros legales. Reservados todos los derechos. Ninguna parte de este libro puede ser reproducida, registrada en sistema de almacenamiento o transmitida de ninguna forma ni por cualquier procedimiento, ya sea electrónico, mecánico, reprográfico, magnético o cualquier otro. Queda también prohibida la distribución, alquiler, traducción o exportación sin la autorización previa y por escrito de PUBLICACIONES ALTARIA, S.L. ISBN: Depósito legal: T Revisado por: Marta Giménez, Mariam Msaoury y Jordi Nicolás Soler Impreso en España - Printed in Spain Editado por: PUBLICACIONES ALTARIA, S.L. C/ Enric d Ossó, Tarragona info@altariaeditorial.com CONSULTE NUESTRO CATÁLOGO POR INTERNET: Podrá estar al corriente de todas las novedades. 2

3 Curso práctico avanzado HTML & CSS CURSO PRÁCTICO Este libro dispone de un sitio web en el que se encuentra el código fuente de los ejemplos desarrollados. La URL del mismo es: 3

4 HTML & CSS 4

5 Curso práctico avanzado Índice general Capítulo 1 Preámbulo Introducción Para quién es este libro? El desarrollo de las páginas web Estructura del libro Convenciones tipográficas Sitio web del libro Sugerencias y errores PARTE I CONCEPTOS GENERALES...21 Capítulo 2 Estructura de un sitio web Qué es un sitio web Contenido de un sitio web Estructura física Las URL...35 Nombres de los directorios y de los ficheros...38 Las URL amigables Tipos de direcciones...41 Estructura lógica Estructura secuencial...44 Estructura en rejilla...47 Estructura en árbol...48 Estructura en red...50 Estructura mixta...50 Comparativa...51 Cómo no perderse en la estructura de un sitio web...52 Consejos

6 HTML & CSS Prólogo Capítulo 3 Los estándares web Los estándares por El World Ignacio Wide Mazo Web Redondo Consortium El juego de caracteres...69 Fuentes de información Microsoft Developer Network...72 Corría el año 1991 o 1992 cuando escuché por primera vez la expresión que Mozilla Developer Network...74 da W3Schools...76 título al libro. Fue la persona que me introdujo en el apasionante mundo de la gestión de recursos humanos, dejadme utilizar el término en su acepción habitual, quien utilizó la expresión, en el marco de una de las conversaciones que tuvimos cuando intentaba convencerme de que tenía un perfil adecuado para PARTE dedicarme IIa esta actividad. Su nombre Luis Illueca, podríamos decir que fue mi maestro. HTML...79 José Luis Pascual, fue unos años más tarde alumno de Luis. También alumno mío. Un alumno muy despierto que como tal intuyó que esa expresión no era casual ni afortunada, sino que encerraba una especie de filosofía, un punto de Capítulo referencia 4que permitía hacernos entender en qué consiste exactamente la gestión de recursos humanos en las organizaciones. Y no sólo lo entendió, sino El lenguaje de marcado de hipertexto que ha sido capaz de desarrollarlo en este libro. Introducción Desde Evolución el principio de HTML... el libro reconoce que su objetivo es desbrozar 82 las relaciones entre HTML5... las estructuras y las personas, poniéndolas en el mismo plano 88 porque ninguna Por de qué ellas se pueden estarlo. seguir empleando Las empresas características no pueden existir sin personas, pero un obsoletas grupo de en personas las páginas sin web?...91 objetivos comunes y sin mecanismos para ordenar las Diferencias tareas y para entre tomar HTML las y decisiones, XHTML... tampoco es una empresa. 92 Qué recursos necesito para escribir HTML Coincido con el autor en la importancia de reflexionar sobre el papel de la Conceptos básicos de HTML gestión de recursos humanos en la empresa y también en la importancia de hacer Estructura autocrítica. de una Algo página debemos web... estar haciendo mal cuando 104 es algo muy poco Variantes frecuente que de XHTML un profesional, que ha desarrollado toda o parte 109 de su carrera Cómo en esta escribir función, texto llegue en a hacerse una página cargo web... de la primera responsabilidad 110 ejecutiva Cómo de una comprobar empresa. Pese que a una que página ha habido web en está los últimos años un número muy bien elevado escrita... de investigaciones sobre el futuro de la función, incluso 113 desde hace Por cinco qué o seis es años importante se viene escribir repitiendo código una investigación correcto... a nivel 118 europeo y a nivel Caracteres global sobre especiales los retos de y la secuencias función; pese de a escape... que se han propuesto 125 modelos de Elementos referencia, algunos en línea de o los en cuales bloque... están mencionados en el texto; 128 pese a ello, no Metadatos... tengo la sensación de que los profesionales de la gestión de 128 recursos humanos hayamos Novedades sido en capaces HTML de avanzar mucho. Desde mi punto de vista, uno de los elementos en los que tenemos que seguir esforzándonos es en el conocimiento del negocio. Me refiero al conocimiento 6

7 Curso práctico avanzado Capítulo 5 La estructura de la página Encabezados de sección Nuevos elementos de HTML Capítulo 6 El texto Semántica del texto Edición Semántica de bloques de texto Líneas horizontales Capítulo 7 Enlaces El hipertexto Enlace a un punto del mismo documento Enlace a otro documento Enlace a un punto de otro documento Apertura de un enlace en una ventana nueva Evitar que un buscador siga un enlace Envío de un correo electrónico Capítulo 8 Listas Tipos de listas Listas de definición Listas ordenadas Listas no ordenadas Capítulo 9 Tablas Tablas Unión de filas y columnas

8 HTML & CSS Tablas invisibles Alineamiento del contenido de una tabla Distancia entre celdas Capítulo 10 Imágenes Formatos de imagen El formato GIF El formato JPEG El formato PNG Cómo insertar una imagen en una página web El atributo alt El atributo longdesc Imágenes como fondo de una página Novedades en HTML La etiqueta <figure> La etiqueta <canvas> SVG Capítulo 11 Formularios Los formularios Controles tradicionales de un formulario Campos de texto y de contraseña Campos de verificación Campos excluyentes Envío de ficheros Campos ocultos Listas de selección Áreas de texto Etiquetas de campos Eventos Novedades en HTML Alineamiento de formularios

9 Curso práctico avanzado Capítulo 12 Multimedia Vídeo Audio PARTE III CSS Capítulo 13 Las hojas de estilo en cascada Evolución de CSS Separación del contenido y la presentación Conceptos básicos de CSS Cómo aplicar los estilos Comentarios Estilos para diferentes dispositivos Estilos alternativos Estilos persistente, preferido y alternativo Cómo validar una hoja de estilo en cascada Lenguaje de estilo por defecto Compatibilidad con los navegadores Capítulo 14 El color Introducción Nombres básicos de colores Nombres extendidos de colores Código hexadecimal Código RGB decimal o en porcentaje Código RGBA decimal o en porcentaje Código HSL Código HSLA

10 HTML & CSS Capítulo 15 Selectores, unidades y funciones Selectores Selectores en CSS Unidades de medida Funciones Elementos en línea o en bloque Recomendaciones para escribir una hoja de estilo correcta Capítulo 16 El texto La propiedad font Tipos de letra de reserva Uso de cualquier tipo de letra Propiedades del texto Sangría Alineación Decoración Sombra Cambio de minúsculas y mayúsculas Espaciado de letras, palabras y líneas Espacios en blanco Capítulo 17 Tablas Los antiguos atributos de la tabla El título de la tabla Estilo cebra

11 Curso práctico avanzado Capítulo 18 Transformaciones Introducción Escalar Rotar Sesgar Trasladar Varias transformaciones a la vez Capítulo 19 Transiciones Introducción Propiedades que pueden ser animadas Funciones de intervalos de transición Capítulo 20 Diseño Maquetación de una página web El modelo de caja El relleno El borde Ancho del borde Estilo del borde Color del borde Propiedades resumidas del borde El margen El contorno Posicionamiento Estilos de diseños Diseño fijo Diseño líquido o fluido Diseño elástico Diseño híbrido Diseño adaptativo o adaptable Separación de la presentación y la maquetación

12 HTML & CSS 12