HTML5 y CSS 3 Aprovechar los estándares de la Web

Christophe AUBRY

Este libro sobre el lenguaje HTML5 y las hojas de estilo CSS3, lenguajes fundacionales de la creación de sitios web, se dirige a diseñadores y maquetadores que deseen dominar estos estándares para crear y personalizar sitios web. El libro comienza con una presentación de la evolución y el uso de los estándares de la Web según el W3C y el WHATWG, antes de abordar la sintaxis de HTML con los elementos que constituyen las páginas web y los atributos de las etiquetas. El capítulo siguiente trata de...

Consultar extractos del libro Extracto de la edición impresa

Nivel Iniciado a Medio
Número de páginas 343 páginas
Publicación noviembre 2025

Nivel Iniciado a Medio
Publicación noviembre 2025

Presentación

Este libro sobre el lenguaje HTML5 y las hojas de estilo CSS3, lenguajes fundacionales de la creación de sitios web, se dirige a diseñadores y maquetadores que deseen dominar estos estándares para crear y personalizar sitios web.

El libro comienza con una presentación de la evolución y el uso de los estándares de la Web según el W3C y el WHATWG, antes de abordar la sintaxis de HTML con los elementos que constituyen las páginas web y los atributos de las etiquetas.

El capítulo siguiente trata de los contenedores semánticos, que permiten estructurar con eficacia las páginas web. A continuación se estudian todos los elementos dedicados al texto, así como las tablas y los formularios. Para ilustrar y animar sus páginas web de forma eficaz, verá cómo integrar medios: imágenes, pero también vídeo y audio.

En la segunda parte aprenderá a sacar partido de las hojas de estilo (CSS) para perfeccionar la maquetación y el formato de las páginas web. Se abordan todos los elementos de la sintaxis de las CSS: reglas, unidades, valores, colores y declaraciones. Los selectores principales se detallan con ejemplos precisos. Trabajará asimismo la aplicación de estilos basada en las nociones de cascada y herencia.

Aprovechará los estilos para concebir diseños estructurados con cajas y verá cómo aplicarles estilos de formato: márgenes, relleno, bordes, anchura, altura, fondo, etc. La maquetación de los contenidos se apoya en numerosos ejemplos en los que se da estilo a los caracteres, el texto, las tablas, los formularios y las columnas.

La maquetación de los sitios modernos utiliza «cajas flexibles» (CSS Flexible Box Layout) y cuadrículas (CSS Grid Layout). Estas técnicas se estudian en detalle y se ilustran con numerosos ejemplos. Por último, el diseño web responsivo le permitirá crear sitios web que se muestren correctamente sea cual sea el soporte: ordenador, tableta o teléfono inteligente.

De este modo, dispondrá de todos los elementos necesarios para crear o personalizar sitios web modernos y atractivos.

Características

Encuadernación rústica - 17 x 21 cm
ISBN: 978-2-409-05273-6
EAN: 9782409052736
Ref. ENI: OWT55HTM

Características

HTML
ISBN: 978-2-409-05274-3
EAN: 9782409052743
Ref. ENI: LNOWT55HTM

Índice

Introducción

Creación de sitios web
Los lenguajes de la Web
Una breve historia de Internet
La evolución del HTML
La evolución de las CSS
La interpretación de CSS3 por los navegadores
CSS especializadas
1. 1. Páginas web para imprimir
2. 2. Módulos para diseñadores gráficos
3. 3. La accesibilidad de los sitios web

El documento HTML

Objetivos
Los elementos HTML
Los atributos de las etiquetas
La declaración del tipo de documento
El elemento <html></html>
El elemento <head></head>
1. 1. Los elementos hijos del encabezado
2. 2. Los elementos <meta>
3. 3. El elemento <title></title>
4. 4. El elemento <link>
5. 5. El elemento <style></style>
6. 6. El elemento <script></script>
El elemento <body></body>
Los comentarios
Ejemplo de estructura de una página web

Los contenedores de estructura

Objetivos
El elemento <main></main>
El elemento <header></header>
El elemento <footer></footer>
El elemento <aside></aside>
El elemento <nav></nav>
El elemento <section></section>
El elemento <article></article>
El elemento <search></search>
El elemento <div></div>
El elemento <span></span>
Una estructura semántica simple

Los contenedores para el texto

Objetivos
Atributos habituales
1. 1. El atributo de idioma
2. 2. El atributo de dirección del texto
Los títulos
Los párrafos
Las citas
Las listas
1. 1. Los diferentes tipos de lista
2. 2. Las listas no ordenadas
3. 3. Las listas ordenadas
4. 4. El atributo de los ítems ordenados
5. 5. Las listas de definiciones
Las direcciones
El texto preformateado
Los enlaces
1. 1. La estructura de los enlaces
2. 2. Los enlaces hacia páginas
3. 3. Los enlaces internos
4. 4. Abrir los enlaces
5. 5. Las relaciones de los enlaces
6. 6. Los enlaces de correo electrónico
7. 7. Los enlaces de descarga
8. 8. Los enlaces con imágenes
Las líneas horizontales

El formato semántico del texto

Objetivos
Los caracteres especiales
Énfasis
1. 1. Énfasis fuerte
2. 2. Énfasis simple
El subíndice y el superíndice
El subrayado y el tachado
Inserciones y eliminaciones
El salto de línea
Otros formatos semánticos

Las tablas

Objetivos
La estructura de las tablas
Las filas
Las celdas
La combinación de celdas
El título de la tabla
Los grupos de columnas
1. 1. Agrupar columnas
2. 2. Seleccionar las columnas para agrupar
Las tablas estructuradas

Los formularios

Objetivos
La integración de los formularios
La estructura de los formularios
1. 1. El formulario
2. 2. Las etiquetas
3. 3. Los campos agrupados
4. 4. Atributos comunes
Los campos de texto
1. 1. Introducir texto
2. 2. Campos de texto simples
3. 3. Campos de texto para contraseñas
4. 4. Campos de texto multilínea
las listas de valores
Los botones de opción
Las casillas de verificación
Otros tipos de campos
Ayudas para la introducción de datos
1. 1. Objetivos
2. 2. Instrucciones para la introducción de datos
3. 3. La activación de un campo
4. 4. Autocompletado
5. 5. Los campos obligatorios
Los botones de acción
Un ejemplo completo de formulario
1. 1. El código completo del formulario
2. 2. El formulario
3. 3. Los botones de opción
4. 4. Los campos de texto
5. 5. El campo numérico
6. 6. El campo de dirección de correo electrónico
7. 7. El campo de fecha
8. 8. La Lista desplegable
9. 9. Las casillas de verificación
10. 10. Los botones de acción

El contenido multimedia

Objetivos
Las imágenes y los formatos
Las imágenes con el elemento <img>
1. 1. El atributo scr
2. 2. El atributo alt
3. 3. Los atributos de width y height
4. 4. Los atributos srcset y size
Las ilustraciones con el elemento <figure></figure>
1. 1. El elemento <figure></figure>
2. 2. El elemento <figcaption></figcaption>
Multimedia, formatos y códecs
El vídeo
1. 1. El elemento <video></video>
2. 2. Los controles
3. 3. El vídeo precargado
4. 4. Imagen de apertura
5. 5. Dimensiones especificadas
6. 6. Fuentes múltiples
7. 7. Reproducción en bucle y sin sonido
El audio

Las hojas de estilo

Objetivos
Estructura de las reglas de estilo
1. 1. La terminología
2. 2. Las reglas de estilo
3. 3. Las reglas de nomenclatura de los selectores
Unidades y valores
1. 1. Las unidades de medida
2. 2. Los valores calculados
Las notaciones de los colores
1. 1. La notación por nombre
2. 2. La notación hexadecimal
3. 3. Las notaciones RGB y RGBA
4. 4. Las notaciones HSL y HSLA
Los comentarios
La declaración de los estilos
1. 1. Los estilos integrados en los elementos
2. 2. Los estilos definidos en la página
3. 3. Los estilos definidos en un archivo .css
4. 4. Los estilos importados
Los selectores habituales
1. 1. El objetivo de los selectores
2. 2. El selector universal
3. 3. Los selectores de tipo
4. 4. Los selectores de clase
5. 5. Los selectores de clase de tipo
6. 6. Los selectores de identificación
7. 7. Los selectores de atributo
Los selectores de pseudoclases
1. 1. El uso de las pseudoclases
2. 2. Las pseudoclases dinámicas de los enlaces
3. 3. Las pseudoclases dinámicas de las accionesdel usuario
4. 4. La pseudoclase de anclaje
5. 5. La pseudoclase de idioma
6. 6. Las pseudoclases de estado
Selectores de pseudoelementos
1. 1. El pseudoelemento de primera línea
2. 2. El pseudoelemento de la primera letra
Combinaciones de selectores
1. 1. Los selectores combinados
2. 2. Las combinaciones descendentes
3. 3. Las combinaciones de hijos
4. 4. Las combinaciones de hermanos inmediatos
5. 5. Las combinaciones de hermanos
Aplicar estilos
1. 1. La noción de herencia
2. 2. La especificidad de los selectores
3. 3. La noción de importancia
4. 4. La noción de cascada
5. 5. El orden de aplicación de los estilos

La maquetación con cajas

Objetivos
El posicionamiento de las cajas
1. 1. Las posiciones de las cajas
2. 2. La posición relativa
3. 3. La posición absoluta
4. 4. La posición fija
Las cajas flotantes
1. 1. El ajuste del texto alrededor de las imágenes
2. 2. Cancelar el ajuste flotante
Las cajas superpuestas
El desbordamiento de las cajas
La visibilidad de las cajas

Los estilos para las cajas

Objetivos
El concepto del modelo de caja
La visualización de las cajas
1. 1. Principios
2. 2. Un ejemplo de visualización modificada
Los márgenes externos
1. 1. El margen global y los márgenes diferenciados
2. 2. Las sintaxis abreviadas
Los bordes
Los rellenos interiores
La anchura y la altura
1. 1. Las dimensiones del contenido
2. 2. Las dimensiones de visualización
Los fondos
1. 1. El color de fondo
2. 2. Las imágenes de fondo
3. 3. Los degradados de color
4. 4. La opacidad de las cajas
Las esquinas redondeadas
Las sombras proyectadas

Los estilos para el texto

Objetivos
Los estilos para los caracteres
1. 1. Las fuentes genéricas
2. 2. Las fuentes incrustadas
3. 3. El tamaño de los caracteres
4. 4. Otros formatos de caracteres
Los estilos para el texto
1. 1. Los colores
2. 2. Las líneas decorativas
3. 3. Las sombras proyectadas
4. 4. El cambio de mayúsculas/minúsculas
5. 5. El espaciado entre caracteres y palabras
6. 6. La alineación del texto
7. 7. La sangría de primera línea
8. 8. La partición de palabras a final de línea
9. 9. El interlineado
Los estilos para las listas
1. 1. Las enumeraciones
2. 2. La enumeración con una imagen
3. 3. La posición del símbolo
4. 4. La sintaxis abreviada
Los estilos para las tablas
1. 1. El borde de la tabla
2. 2. Los bordes de las celdas
3. 3. El espacio interior de las celdas
4. 4. Las celdas vacías
5. 5. El título de la tabla
Los estilos para los formularios
1. 1. Los estados activo e inactivo de los objetos
2. 2. Los campos obligatorios
3. 3. El ancho de las etiquetas y los campos
4. 4. El formato del foco en los campos
Los estilos para las columnas
1. 1. Las columnas de texto
2. 2. La configuración de las columnas
3. 3. Imágenes en columnas

El modelo de caja flexible

Objetivos
Los contenedores flexibles
1. 1. Los diferentes tipos de contenedores
2. 2. El contenedor con display: flex
3. 3. El contenedor con display: inline-flex
El flujo de los elementos hijos
1. 1. La dirección principal
2. 2. El control del flujo de elementos hijos en línea
3. 3. El control del flujo de los elementos hijos en bloque
Las alineaciones flexibles de los elementos hijos
1. 1. Alineaciones en el eje principal horizontal
2. 2. Las alineaciones en el eje principal vertical
3. 3. Las alineaciones en el eje secundario vertical
4. 4. Alineaciones en el eje secundario horizontal
5. 5. Las alineaciones y los saltos de línea
Las propiedades de los hijos flexibles
1. 1. Las propiedades individuales
2. 2. El orden de visualización de los hijos
3. 3. La alineación de los hijos
4. 4. La ampliación de los hijos
5. 5. La reducción de los hijos
6. 6. La anchura de los hijos
7. 7. La sintaxis abreviada de las propiedades individuales
Un diseño a pantalla completa y responsivo
1. 1. Las disposiciones obtenidas
2. 2. La estructura flexible del diseño
3. 3. Las propiedades del elemento <body></body>
4. 4. Las propiedades del elemento <main></main>
5. 5. Las propiedades CSS para formato general
6. 6. El diseño responsivo
7. 7. El código completo del ejemplo

Las cuadrículas de maquetación

Objetivos
El vocabulario de las cuadrículas
1. 1. Los principales términos
2. 2. Un ejemplo sencillo
La estructura de las cuadrículas
1. 1. El contenedor de la cuadrícula
2. 2. La declaración de columnas
3. 3. La declaración de las filas
4. 4. La sintaxis abreviada
5. 5. El uso de otras unidades
6. 6. La inserción de medianiles
7. 7. El formato del contenedor
Las posiciones de los elementos en la cuadrícula
1. 1. Las posiciones de los elementos hijos en la cuadrícula
2. 2. Las posiciones de los elementos hijos en las líneas
3. 3. El uso de la numeración de líneas
4. 4. Las líneas con nombre de la cuadrícula
5. 5. Las zonas con nombre de la cuadrícula
6. 6. La alineación de las celdas en la cuadrícula
Una maquetación responsiva con una cuadrícula
1. 1. Las visualizaciones responsivas
2. 2. La estructura HTML de la cuadrícula
3. 3. Los estilos CSS en mobile first
4. 4. La consulta de medios para pantallas de tabletas
5. 5. La consulta de medios para pantallas grandes
6. 6. El código completo de la cuadrícularesponsiva

El diseño web responsivo

Objetivos
Las consultas de medios
1. 1. Criterios
2. 2. Sintaxis
3. 3. Valores mínimos y máximos
4. 4. Operadores lógicos
El tamaño de las pantallas
Ejemplo de maquetación responsiva
1. 1. El sitio inicial
2. 2. El sitio responsivo

Autor

Christophe AUBRY

Responsable pedagógico en un centro de formación y formador en tecnologías web y artes gráficas durante más de quince años, Christophe AUBRY es hoy director de la empresa netPlume, especializada en redacción didáctica y creación de sitios web. Autor de numerosos libros y vídeos en Ediciones ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla, etc.), se mantiene al día de las novedades sobre el diseño de sitios web practicando una vigilancia tecnológica constante. También es el creador del canal de YouTube LaTeX et la plume (en francés).

Más información

HTML5 y CSS 3 Aprovechar los estándares de la Web

Información adicional

Información adicional

Características

Características

Christophe AUBRY

Descubrir todos sus libros

Novedades