1. Una breve historia de la Web
2. Los trabajos de elaboración de las especificaciones
3. La evolución del HTML
4. La evolución de las CSS

Los navegadores

1. La evolución de los navegadores
2. Las herramientas de desarrollo
3. La compatibilidad de los navegadores

Las buenas prácticas

1. Separar el contenido del formato
2. Utilizar una estructura semántica
3. Optimizar el código y organizar sus archivos
4. Un ejemplo de una página bien formada
5. Validar el código de sus páginas

Los elementos HTML

1. Utilizar correctamente el HTML
2. Las etiquetas y los contenidos
3. Los atributos de los elementos
4. El uso correcto de la sintaxis
5. La anidación de los elementos
6. Los comentarios

La estructura de las páginas

1. La estructura general de las páginas web
2. La declaración doctype
3. El elemento <html>
4. El elemento <head>
1. 4.1 Los elementos hijo del encabezado
2. 4.2 Los elementos <meta>
3. 4.3 El elemento <title>
4. 4.4 El elemento <link>
5. 4.5 El elemento <style>
6. 4.6 El elemento <script>
5. El elemento <body>
6. Las propiedades de visualización
7. Ejemplo de una estructura sencilla

Los contenedores semánticos

1. Utilizar correctamente los contenedores semánticos
2. El elemento <div>
3. El elemento <span>
4. El elemento <header>
5. El elemento <footer>
6. El elemento <aside>
7. El elemento <nav>
8. El elemento <main>
9. El elemento <section>
10. El elemento <article>
11. La visualización de los elementos de estructura
12. Dos ejemplos de estructura semántica de página
1. 12.1 Una estructura semántica sencilla
2. 12.2 Una estructura semántica más elaborada
13. Un ejemplo de estructura semántica de un artículo

Los contenedores de texto

1. Utilizar correctamente los contenedores de texto
2. Los atributos de idioma y dirección del texto
3. Los títulos
4. Los párrafos
5. Las citas
6. Las listas
1. 6.1 Los diferentes tipos de lista
2. 6.2 Las listas no ordenadas
3. 6.3 Las listas ordenadas
4. 6.4 El atributo de <li>
5. 6.5 Las listas de definiciones
7. Las direcciones
8. El texto preformateado
9. Las líneas horizontales

El formateo semántico del texto

1. Utilizar un formateo semántico
2. Insertar caracteres especiales
3. El marcado de especial énfasis
4. El énfasis sencillo
5. Resaltar en negrita y cursiva
6. El índice y el exponente
7. El subrayado
8. El tachado
9. Reducir el tamaño de los caracteres
10. Los títulos de obras y las citas cortas
11. Las inserciones y eliminaciones
12. El retorno de línea
13. Otros formatos semánticos

Los elementos de interacción

1. Mostrar los detalles
2. Utilizar un cuadro de diálogo

Los enlaces

1. Inserción de enlaces para unir páginas
2. La estructura de los enlaces
3. Los enlaces a las páginas
4. Los enlaces internos
5. El contexto de apertura del enlace
6. Las relaciones de los enlaces
7. Los enlaces al correo electrónico
8. Los enlaces de descarga
9. Enlaces en imágenes

Las tablas

1. La correcta utilización de las tablas
2. La estructura de las tablas
3. Las líneas
4. Las celdas
5. La fusión de celdas
6. El título
7. Los grupos de columnas
1. 7.1 Agrupar columnas
2. 7.2 Enumerar las columnas
8. Las tablas estructuradas

Las imágenes

1. Explotar correctamente las imágenes
2. Entender los formatos de compresión
1. 2.1 Comprimir las imágenes
2. 2.2 El formato GIF
3. 2.3 El formato JPEG
4. 2.4 El formato PNG
3. Insertar imágenes con el elemento <img>
1. 3.1 La utilización de las imágenes
2. 3.2 El atributo src
3. 3.3 El atributo alt
4. 3.4 Los atributos width y height
5. 3.5 Los atributos srcset y size
4. Insertar ilustraciones con el elemento <figure>
1. 4.1 La utilización de las ilustraciones
2. 4.2 El elemento <figure>
3. 4.3 El elemento <figcaption>

Los formularios

1. La presencia de formularios en las páginas web
2. La estructura de los formularios
1. 2.1 El formulario
2. 2.2 Las etiquetas
3. 2.3 Agrupar los campos
4. 2.4 Los atributos comunes
3. Los campos de texto
1. 3.1 La introducción de texto
2. 3.2 Los campos de texto sencillos
3. 3.3 Los campos de texto para las contraseñas
4. 3.4 Los campos de texto multilínea
4. Las listas de valores
5. Los botones de radio de selección única
6. Las casillas de selección múltiple
7. Otros tipos de campos con <input>
8. Las ayudas a la introducción de datos
1. 8.1 Los objetivos
2. 8.2 La indicación inicial de la entrada de los datos
3. 8.3 Activar un campo
4. 8.4 El autocompletado
5. 8.5 Hacer un campo obligatorio
6. 8.6 Las entradas autorizadas
9. Los botones de acción
10. Un ejemplo completo de formulario
1. 10.1 El código completo del formulario
2. 10.2 El formulario
3. 10.3 Los botones de radio
4. 10.4 Los campos de texto
5. 10.5 El campo numérico
6. 10.6 El campo de dirección de correo
7. 10.7 El campo de fecha
8. 10.8 La lista desplegable
9. 10.9 Las casillas de selección
10. 10.10 Los botones de acción

Los recursos multimedia

1. La presencia de elementos multimedia
2. Los formatos y los códecs
3. La inserción de un vídeo
1. 3.1 El elemento <video>
2. 3.2 El origen del vídeo
3. 3.3 Los controles
4. 3.4 Precargar el vídeo
5. 3.5 Mostar una imagen de apertura
6. 3.6 Especificar las dimensiones
7. 3.7 Ofrecer varias fuentes
8. 3.8 Reproducir en bucle y desactivar el sonido
4. La inserción de un archivo de audio

La Web semántica con Microdata

1. El estado actual de la Web semántica
2. El objetivo de Microdata
1. 2.1 La norma y los esquemas
2. 2.2 Los atributos
3. El esquema para las personas
1. 3.1 Definir el uso de Microdata con itemscope
2. 3.2 Indicar el esquema utilizado con itemtype
3. 3.3 Especificar las propiedades con itemprop
4. Anidar esquemas
1. 4.1 ¿ Por qué anidar los esquemas ?
2. 4.2 Los dos esquemas necesarios
3. 4.3 Hacer referencia a un elemento

Integrar los estilos CSS

1. El rol de las CSS
2. Los estilos integrados en un elemento HTML
3. Los estilos definidos en la página
4. Los estilos definidos en un archivo .css
5. Los estilos importados

Definir los estilos CSS

1. La estructura de una regla de estilo
1. 1.1 La terminología de las CSS
2. 1.2 Definir una regla de estilo
3. 1.3 Las reglas de nomenclatura
2. Las unidades de medida
1. 2.1 La utilización de las unidades de medida
2. 2.2 Los valores inicial y heredado
3. 2.3 Los valores numéricos
4. 2.4 Las unidades de longitud
5. 2.5 Los valores calculados
3. La notación de los colores
1. 3.1 Utilizar los colores
2. 3.2 La notación nominativa
3. 3.3 La notación hexadecimal
4. 3.4 Las notaciones RGB y RGBA
5. 3.5 Las notaciones HSL y HSLA
4. Los comentarios
5. Los selectores
1. 5.1 El objetivo de los selectores
2. 5.2 El selector universal
3. 5.3 Los selectores de tipo
4. 5.4 Los selectores de clase
5. 5.5 Los selectores de clase de tipo
6. 5.6 Los selectores de identificación
7. 5.7 Los selectores de atributo
8. 5.8 Los selectores de pseudoclases
  1. 5.8.1 Utilizar las pseudoclases
  2. 5.8.2 Las pseudoclases dinámicas de los enlaces
  3. 5.8.3 Las pseudoclases dinámicas de las acciones de usuario
  4. 5.8.4 La pseudoclase de ancla
  5. 5.8.5 La pseudoclase de idioma
  6. 5.8.6 Las pseudoclases de estado
  7. 5.8.7 Las pseudoclases de estructura
  8. 5.8.8 La pseudoclase de negación
9. 5.9 Los selectores de pseudoelemento
  1. 5.9.1 El pseudoelemento de primera línea
  2. 5.9.2 El pseudoelemento de primera letra
  3. 5.9.3 Los pseudoelementos de contenido
10. 5.10 Las combinaciones de selectores
  1. 5.10.1 Los selectores combinados
  2. 5.10.2 Las combinaciones descendientes
  3. 5.10.3 Las combinaciones de hijos
  4. 5.10.4 Las combinaciones de hermanos inmediatos
  5. 5.10.5 Las combinaciones de hermanos
6. La aplicación de los estilos
1. 6.1 La noción de herencia
2. 6.2 La especificidad de los selectores
  1. 6.2.1 El cálculo de la especificidad de los selectores
  2. 6.2.2 Un ejemplo de las especificidades de los selectores
3. 6.3 La noción de importancia
4. 6.4 La noción de cascada
  1. 6.4.1 Las prioridades en la cascada
  2. 6.4.2 Los conflictos en la cascada
5. 6.5 El orden de aplicación de los estilos
7. La versión 4 de los selectores

Los estilos para las fuentes de caracteres

1. El módulo CSS 3 para las fuentes de caracteres
2. Las fuentes de caracteres
1. 2.1 Elegir una fuente de caracteres
2. 2.2 Las familias de caracteres genéricas
3. 2.3 Declarar una fuente de caracteres
4. 2.4 Incorporar una fuente de caracteres
3. El tamaño de los caracteres
1. 3.1 Los tamaños por defecto
2. 3.2 Modificar el tamaño de los caracteres
4. El formato de los caracteres
1. 4.1 El peso de los caracteres
2. 4.2 La cursiva de los caracteres
3. 4.3 La anchura de los caracteres
4. 4.4 Las versalitas
5. La sintaxis de acceso directo
6. El módulo CSS 4 para las fuentes de caracteres

Los estilos para el texto

1. La aplicación de los estilos
2. El color del texto
3. Las declaraciones
1. 3.1 El módulo CSS
2. 3.2 Las líneas para el texto
3. 3.3 Las líneas decorativas
4. 3.4 El sombreado
4. El formato del texto
1. 4.1 El módulo CSS
2. 4.2 El cambio entre mayúsculas/minúsculas
3. 4.3 Los espacios entre los caracteres y las palabras
4. 4.4 Los espacios en blanco
5. 4.5 Las alineaciones del texto
6. 4.6 Indentación de la primera línea
7. 4.7 La partición de palabras al final de línea
5. Otras propiedades para el texto
1. 5.1 El interlineado
2. 5.2 Desbordamiento de texto
6. El módulo CSS 4 para dar formato al texto

Los estilos para los contenedores de texto

1. Los títulos, los párrafos y las citas
2. Las listas
1. 2.1 Los elementos de las listas y los estilos
2. 2.2 Los estilos de enumeración
3. 2.3 La enumeración con una imagen
4. 2.4 La posición del símbolo
5. 2.5 La sintaxis de acceso directo
3. Las tablas
1. 3.1 El texto en las tablas
2. 3.2 El borde de la tabla
3. 3.3 Los bordes de las celdas
4. 3.4 El espacio interno de las celdas
5. 3.5 Las celdas vacías
6. 3.6 El título de la tabla
4. Los formularios
1. 4.1 El formato del texto de los campos
2. 4.2 Los estados activo e inactivo de los objetos
3. 4.3 Los campos obligatorios
4. 4.4 La longitud de las etiquetas y de los campos
5. 4.5 Formatear el foco de los campos

Los estilos para los paneles

1. El concepto del modelo de panel
2. Las visualizaciones de los paneles
1. 2.1 Los diferentes tipos de visualización
2. 2.2 La visualización en bloque
3. 2.3 La visualización en línea
4. 2.4 Cambiar el tipo de visualización
3. Los márgenes externos
1. 3.1 El margen global y los márgenes diferenciados
2. 3.2 Las sintaxis abreviadas
4. Los bordes
5. Los rellenos internos
6. La longitud y la altura de los paneles
1. 6.1 Las dimensiones del contenido
2. 6.2 Las dimensiones de visualización
7. Los fondos
1. 7.1 El color de fondo
2. 7.2 Las imágenes de fondo
3. 7.3 Los degradados de colores
4. 7.4 La opacidad de los paneles
8. Las esquinas redondeadas de los paneles
9. El sombreado de los paneles

La estructuración de la página con paneles

1. Los objetivos
2. El posicionamiento de los paneles
1. 2.1 Las posiciones de los paneles
2. 2.2 La posición relativa
3. 2.3 La posición absoluta
4. 2.4 La posición fija
3. El flotamiento de los paneles
1. 3.1 Rodear una imagen con texto
2. 3.2 Prohibir la flotación
4. La superposición de los paneles
5. La estructuración con las propiedades de visualización tabla
6. El desbordamiento de los paneles
7. La visibilidad de los paneles

El Responsive Web Design

1. El desarrollo responsivo
2. Las consultas de recursos multimedia
1. 2.1 Los criterios
2. 2.2 La sintaxis
3. 2.3 Los valores mínimos y máximos
4. 2.4 Los operadores lógicos
3. El tamaño de las pantallas
4. Un ejemplo de composición responsiva
1. 4.1 El sitio web inicial
2. 4.2 El sitio web responsivo

Crear paginaciones modernas

1. Los objetivos
2. Utilizar el módulo CSS Flexible Box Layout
1. 2.1 La paginación flexible
2. 2.2 Los contenedores flexibles
  1. 2.2.1 El contenedor con una visualización flex
  2. 2.2.2 El contenedor con una visualización inline-flex
3. 2.3 El flujo de los elementos hijos
  1. 2.3.1 Definir la dirección
  2. 2.3.2 Controlar el flujo de los elementos hijos en fila
  3. 2.3.3 Controlar el flujo de los elementos hijos en bloque
4. 2.4 Alinear los elementos hijos flexibles
  1. 2.4.1 Los alineamientos en el eje principal horizontal
  2. 2.4.2 Los alineamientos en el eje principal vertical
  3. 2.4.3 Los alineamientos en el eje secundario vertical
  4. 2.4.4 Los alineamientos en el eje secundario horizontal
  5. 2.4.5 Los alineamientos y el salto de línea
5. 2.5 Las propiedades de los hijos flexibles
  1. 2.5.1 Aplicar propiedades individuales
  2. 2.5.2 Modificar el orden de visualización de los hijos
  3. 2.5.3 Modificar el alineamiento de los hijos
  4. 2.5.4 Autorizar la expansión de los hijos
  5. 2.5.5 Autorizar la contracción de los hijos
  6. 2.5.6 Definir la anchura de los hijos
  7. 2.5.7 La sintaxis abreviada de las propiedades individuales
6. 2.6 Crear una paginación a pantalla completa y responsiva
  1. 2.6.1 Las visualizaciones obtenidas
  2. 2.6.2 La estructura flexible de la paginación
  3. 2.6.3 Las propiedades del elemento <body>
  4. 2.6.4 Las propiedades del elemento <main>
  5. 2.6.5 Las propiedades CSS para el formateo general
  6. 2.6.6 La paginación responsiva
  7. 2.6.7 El código completo del ejemplo
3. Utilizar el módulo CSS Grid Layout
1. 3.1 La paginación en rejilla
2. 3.2 Conocer el vocabulario de las rejillas
3. 3.3 Comprender la estructura de las rejillas
  1. 3.3.1 El contenedor de la rejilla
  2. 3.3.2 Declarar columnas
  3. 3.3.3 Declarar filas
  4. 3.3.4 Utilizar la sintaxis abreviada
  5. 3.3.5 Aplicar otras unidades
  6. 3.3.6 Insertar huecos
  7. 3.3.7 Dar forma al contenedor
4. 3.4 Posicionar los elementos en la rejilla
  1. 3.4.1 Ubicar los hijos en la rejilla
  2. 3.4.2 Ubicar los hijos en las filas
  3. 3.4.3 Aprovechar la numeración de las líneas
  4. 3.4.4 Nombrar las líneas de la rejilla
  5. 3.4.5 Nombrar las áreas de la rejilla
  6. 3.4.6 Alinear las celdas en la rejilla
5. 3.5 Crear una paginación responsiva con una rejilla
  1. 3.5.1 Las visualizaciones responsivas
  2. 3.5.2 La estructura HTML de la rejilla
  3. 3.5.3 Los estilos CSS en Mobile First
  4. 3.5.4 La consulta de recursos multimedia para las pantallas de las tabletas
  5. 3.5.5 La consulta de recursos multimedia para las pantallas grandes
  6. 3.5.6 El código completo de la rejilla responsiva

Los módulos de animación

1. Los módulos CSS
2. Las transformaciones
1. 2.1 La función y el punto de referencia
2. 2.2 El desplazamiento
3. 2.3 El escalado
4. 2.4 La rotación
5. 2.5 La deformación
6. 2.6 Aplicar todas las transformaciones
3. Las transiciones
1. 3.1 Crear transiciones
2. 3.2 Crear un desplazamiento horizontal
3. 3.3 Crear un desplazamiento horizontal y vertical
4. Las animaciones
1. 4.1 Crear animaciones
2. 4.2 Crear un desplazamiento infinito
3. 4.3 Crear un formulario animado

Los módulos CSS para los diseñadores gráficos

1. Los módulos del futuro
2. Las máscaras
1. 2.1 El módulo CSS
2. 2.2 Crear una máscara
3. Rodear una imagen con texto
1. 3.1 El módulo CSS
2. 3.2 Crear el contorneo de texto

Las hojas de estilo para la impresión

1. La impresión de las páginas web
2. Las hojas de estilo específicas
1. 2.1 Las relaciones con los archivos CSS
2. 2.2 Las consultas de recursos multimedia
3. Las propiedades globales de las páginas
4. Las fuentes de caracteres
5. Los elementos no impresos
6. Las rupturas de lectura
1. 6.1 Los saltos de página
2. 6.2 Las líneas consecutivas
3. 6.3 Las líneas viudas y huérfanas
7. Los enlaces de hipertexto
índice

22/09/2024Versión online

Me a gustado mucho, interesante para las personas que nos gusta el diseño web y queremos avanzar en la materia. Una experiencia muy buena, conforme a mis expectativas, los recomiendo!

Anónimo

Respuesta de ENI,

30/09/2024

Muchas gracias por tomarte el tiempo para dejarnos tu opinión. Saludos.

04/02/2023Versión impresa

Le faltan actividades para poner en practica los conocimientos.

Anónimo

Respuesta de ENI,

21/02/2023

Jaime, como seguramente sabrá, la colección Recursos Informáticos, son libros que se componen de una parte teórica con ejercicios, sobre los conocimientos adquiridos, para que posteriormente pueda ponerlos en práctica en sus propios proyectos. No obstante, gracias por su comentario que derivaremos al departamento correspondiente. Saludos,

04/02/2023Versión online

Genial. Muy completo. Directo al grano. Muy recomendado.

Anónimo

Christophe AUBRY

Responsable pedagógico en un centro de formación. y formador en las tecnologías Web y las Artes Gráficas durante más de quince años, Christophe Aubry es hoy directivo de la sociedad netPlume especializada en la redacción pedagógica y creación de sitios en internet. Autor de numerosos libros y vídeos de Ediciones ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), siempre está al corriente de las novedades en relación a la concepción de sitios Web gracias a su atenta mirada hacia el entorno tecnológico.

Más información