1. Libros
  2. HTML5 y CSS3 - Domine los estándares de creación de sitios web (2ª edición)

HTML5 y CSS3 Domine los estándares de creación de sitios web (2ª edición)

  • Disponible
  • Expedido en 24 horas
  • Envío gratis a partir de 25 € de compra
  • Versión online gratis por un año
  • Consulta inmediata
  • Versión online digital, no descargable
  • Acceso ilimitado 24/7, durante 10 años
  • Acceso ilimitado 24/7, durante 10 años
  • Todos los libros online de ENI
  • Más de 5 novedades todos los meses
  • Novedades disponibles el mismo día de su publicación
  • Acceso 100% online

Presentación

Este libro sobre el lenguaje HTML5 (en versión 5.2 en el momento de la redacción de este libro) y las hojas de estilos CSS3, ambos lenguajes fundacionales de la creación de sitios web, está dirigido a desarrolladores que desean tener los conocimientos necesarios para crear y hacer evolucionar sitios web, respetando las buenas prácticas.

El libro está escrito de manera que permite un aprendizaje progresivo de los elementos HTML y las propiedades CSS más utilizados. Su objetivo no es presentar las diferentes variedades de sintaxis existentes, sino solo aquellas que se usan más comúnmente en la creación de sitios web modernos. Los ejemplos de código presentados por el autor se ilustran con capturas de pantalla, para que el lector pueda tener una idea del resultado obtenido.

En la primera parte del libro, el autor proporciona la información necesaria para comprender totalmente el diseño del sitio web. Presenta las especificaciones técnicas de HTML y CSS (las famosas recomendaciones propuestas por el W3C), el papel esencial de los navegadores y su compatibilidad con elementos HTML y propiedades CSS, así como las buenas prácticas de diseño de sitios web, para obtener contenidos semánticamente bien diseñados.

En la segunda parte, el lector aprende a diseñar la estructura de las páginas web, con elementos HTML semánticos dedicados. Luego estudia los elementos que permiten insertar texto, enlaces, tablas, imágenes, formularios, sin olvidar los contenidos multimedia. Se dedica un capítulo a Microdata que permite obtener un sitio semántico y optimizar su SEO.

La tercera parte permite al lector explotar el CSS para formatear y diseñar un sitio web. Aprende la sintaxis de CSS y los selectores, estudia los conceptos de herencia y diseño en cascada. Después, descubre cómo formatear cada componente de una página web: texto, imágenes, formularios y cajas de contenedores. A continuación, se dedica un capítulo a las diferentes técnicas de paginación con los módulos Flexbox y Grid, y se detalla el diseño de sitios web responsivos. El autor termina con el estudio de módulos CSS dedicados a animaciones para energizar páginas web.

Índice

  • La evolución de las especificaciones
    • 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>
      • 4.1 Los elementos hijo del encabezado
      • 4.2 Los elementos <meta>
      • 4.3 El elemento <title>
      • 4.4 El elemento <link>
      • 4.5 El elemento <style>
      • 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
      • 12.1 Una estructura semántica sencilla
      • 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
      • 6.1 Los diferentes tipos de lista
      • 6.2 Las listas no ordenadas
      • 6.3 Las listas ordenadas
      • 6.4 El atributo de <li>
      • 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
      • 7.1 Agrupar columnas
      • 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
      • 2.1 Comprimir las imágenes
      • 2.2 El formato GIF
      • 2.3 El formato JPEG
      • 2.4 El formato PNG
    • 3. Insertar imágenes con el elemento <img>
      • 3.1 La utilización de las imágenes
      • 3.2 El atributo src
      • 3.3 El atributo alt
      • 3.4 Los atributos width y height
      • 3.5 Los atributos srcset y size
    • 4. Insertar ilustraciones con el elemento <figure>
      • 4.1 La utilización de las ilustraciones
      • 4.2 El elemento <figure>
      • 4.3 El elemento <figcaption>
  • Los formularios
    • 1. La presencia de formularios en las páginas web
    • 2. La estructura de los formularios
      • 2.1 El formulario
      • 2.2 Las etiquetas
      • 2.3 Agrupar los campos
      • 2.4 Los atributos comunes
    • 3. Los campos de texto
      • 3.1 La introducción de texto
      • 3.2 Los campos de texto sencillos
      • 3.3 Los campos de texto para las contraseñas
      • 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
      • 8.1 Los objetivos
      • 8.2 La indicación inicial de la entrada de los datos
      • 8.3 Activar un campo
      • 8.4 El autocompletado
      • 8.5 Hacer un campo obligatorio
      • 8.6 Las entradas autorizadas
    • 9. Los botones de acción
    • 10. Un ejemplo completo de formulario
      • 10.1 El código completo del formulario
      • 10.2 El formulario
      • 10.3 Los botones de radio
      • 10.4 Los campos de texto
      • 10.5 El campo numérico
      • 10.6 El campo de dirección de correo
      • 10.7 El campo de fecha
      • 10.8 La lista desplegable
      • 10.9 Las casillas de selección
      • 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
      • 3.1 El elemento <video>
      • 3.2 El origen del vídeo
      • 3.3 Los controles
      • 3.4 Precargar el vídeo
      • 3.5 Mostar una imagen de apertura
      • 3.6 Especificar las dimensiones
      • 3.7 Ofrecer varias fuentes
      • 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
      • 2.1 La norma y los esquemas
      • 2.2 Los atributos
    • 3. El esquema para las personas
      • 3.1 Definir el uso de Microdata con itemscope
      • 3.2 Indicar el esquema utilizado con itemtype
      • 3.3 Especificar las propiedades con itemprop
    • 4. Anidar esquemas
      • 4.1 ¿ Por qué anidar los esquemas ?
      • 4.2 Los dos esquemas necesarios
      • 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 La terminología de las CSS
      • 1.2 Definir una regla de estilo
      • 1.3 Las reglas de nomenclatura
    • 2. Las unidades de medida
      • 2.1 La utilización de las unidades de medida
      • 2.2 Los valores inicial y heredado
      • 2.3 Los valores numéricos
      • 2.4 Las unidades de longitud
      • 2.5 Los valores calculados
    • 3. La notación de los colores
      • 3.1 Utilizar los colores
      • 3.2 La notación nominativa
      • 3.3 La notación hexadecimal
      • 3.4 Las notaciones RGB y RGBA
      • 3.5 Las notaciones HSL y HSLA
    • 4. Los comentarios
    • 5. Los selectores
      • 5.1 El objetivo de los selectores
      • 5.2 El selector universal
      • 5.3 Los selectores de tipo
      • 5.4 Los selectores de clase
      • 5.5 Los selectores de clase de tipo
      • 5.6 Los selectores de identificación
      • 5.7 Los selectores de atributo
      • 5.8 Los selectores de pseudoclases
        • 5.8.1 Utilizar las pseudoclases
        • 5.8.2 Las pseudoclases dinámicas de los enlaces
        • 5.8.3 Las pseudoclases dinámicas de las acciones de usuario
        • 5.8.4 La pseudoclase de ancla
        • 5.8.5 La pseudoclase de idioma
        • 5.8.6 Las pseudoclases de estado
        • 5.8.7 Las pseudoclases de estructura
        • 5.8.8 La pseudoclase de negación
      • 5.9 Los selectores de pseudoelemento
        • 5.9.1 El pseudoelemento de primera línea
        • 5.9.2 El pseudoelemento de primera letra
        • 5.9.3 Los pseudoelementos de contenido
      • 5.10 Las combinaciones de selectores
        • 5.10.1 Los selectores combinados
        • 5.10.2 Las combinaciones descendientes
        • 5.10.3 Las combinaciones de hijos
        • 5.10.4 Las combinaciones de hermanos inmediatos
        • 5.10.5 Las combinaciones de hermanos
    • 6. La aplicación de los estilos
      • 6.1 La noción de herencia
      • 6.2 La especificidad de los selectores
        • 6.2.1 El cálculo de la especificidad de los selectores
        • 6.2.2 Un ejemplo de las especificidades de los selectores
      • 6.3 La noción de importancia
      • 6.4 La noción de cascada
        • 6.4.1 Las prioridades en la cascada
        • 6.4.2 Los conflictos en la cascada
      • 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
      • 2.1 Elegir una fuente de caracteres
      • 2.2 Las familias de caracteres genéricas
      • 2.3 Declarar una fuente de caracteres
      • 2.4 Incorporar una fuente de caracteres
    • 3. El tamaño de los caracteres
      • 3.1 Los tamaños por defecto
      • 3.2 Modificar el tamaño de los caracteres
    • 4. El formato de los caracteres
      • 4.1 El peso de los caracteres
      • 4.2 La cursiva de los caracteres
      • 4.3 La anchura de los caracteres
      • 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
      • 3.1 El módulo CSS
      • 3.2 Las líneas para el texto
      • 3.3 Las líneas decorativas
      • 3.4 El sombreado
    • 4. El formato del texto
      • 4.1 El módulo CSS
      • 4.2 El cambio entre mayúsculas/minúsculas
      • 4.3 Los espacios entre los caracteres y las palabras
      • 4.4 Los espacios en blanco
      • 4.5 Las alineaciones del texto
      • 4.6 Indentación de la primera línea
      • 4.7 La partición de palabras al final de línea
    • 5. Otras propiedades para el texto
      • 5.1 El interlineado
      • 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
      • 2.1 Los elementos de las listas y los estilos
      • 2.2 Los estilos de enumeración
      • 2.3 La enumeración con una imagen
      • 2.4 La posición del símbolo
      • 2.5 La sintaxis de acceso directo
    • 3. Las tablas
      • 3.1 El texto en las tablas
      • 3.2 El borde de la tabla
      • 3.3 Los bordes de las celdas
      • 3.4 El espacio interno de las celdas
      • 3.5 Las celdas vacías
      • 3.6 El título de la tabla
    • 4. Los formularios
      • 4.1 El formato del texto de los campos
      • 4.2 Los estados activo e inactivo de los objetos
      • 4.3 Los campos obligatorios
      • 4.4 La longitud de las etiquetas y de los campos
      • 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
      • 2.1 Los diferentes tipos de visualización
      • 2.2 La visualización en bloque
      • 2.3 La visualización en línea
      • 2.4 Cambiar el tipo de visualización
    • 3. Los márgenes externos
      • 3.1 El margen global y los márgenes diferenciados
      • 3.2 Las sintaxis abreviadas
    • 4. Los bordes
    • 5. Los rellenos internos
    • 6. La longitud y la altura de los paneles
      • 6.1 Las dimensiones del contenido
      • 6.2 Las dimensiones de visualización
    • 7. Los fondos
      • 7.1 El color de fondo
      • 7.2 Las imágenes de fondo
      • 7.3 Los degradados de colores
      • 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
      • 2.1 Las posiciones de los paneles
      • 2.2 La posición relativa
      • 2.3 La posición absoluta
      • 2.4 La posición fija
    • 3. El flotamiento de los paneles
      • 3.1 Rodear una imagen con texto
      • 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
      • 2.1 Los criterios
      • 2.2 La sintaxis
      • 2.3 Los valores mínimos y máximos
      • 2.4 Los operadores lógicos
    • 3. El tamaño de las pantallas
    • 4. Un ejemplo de composición responsiva
      • 4.1 El sitio web inicial
      • 4.2 El sitio web responsivo
  • Crear paginaciones modernas
    • 1. Los objetivos
    • 2. Utilizar el módulo CSS Flexible Box Layout
      • 2.1 La paginación flexible
      • 2.2 Los contenedores flexibles
        • 2.2.1 El contenedor con una visualización flex
        • 2.2.2 El contenedor con una visualización inline-flex
      • 2.3 El flujo de los elementos hijos
        • 2.3.1 Definir la dirección
        • 2.3.2 Controlar el flujo de los elementos hijos en fila
        • 2.3.3 Controlar el flujo de los elementos hijos en bloque
      • 2.4 Alinear los elementos hijos flexibles
        • 2.4.1 Los alineamientos en el eje principal horizontal
        • 2.4.2 Los alineamientos en el eje principal vertical
        • 2.4.3 Los alineamientos en el eje secundario vertical
        • 2.4.4 Los alineamientos en el eje secundario horizontal
        • 2.4.5 Los alineamientos y el salto de línea
      • 2.5 Las propiedades de los hijos flexibles
        • 2.5.1 Aplicar propiedades individuales
        • 2.5.2 Modificar el orden de visualización de los hijos
        • 2.5.3 Modificar el alineamiento de los hijos
        • 2.5.4 Autorizar la expansión de los hijos
        • 2.5.5 Autorizar la contracción de los hijos
        • 2.5.6 Definir la anchura de los hijos
        • 2.5.7 La sintaxis abreviada de las propiedades individuales
      • 2.6 Crear una paginación a pantalla completa y responsiva
        • 2.6.1 Las visualizaciones obtenidas
        • 2.6.2 La estructura flexible de la paginación
        • 2.6.3 Las propiedades del elemento <body>
        • 2.6.4 Las propiedades del elemento <main>
        • 2.6.5 Las propiedades CSS para el formateo general
        • 2.6.6 La paginación responsiva
        • 2.6.7 El código completo del ejemplo
    • 3. Utilizar el módulo CSS Grid Layout
      • 3.1 La paginación en rejilla
      • 3.2 Conocer el vocabulario de las rejillas
      • 3.3 Comprender la estructura de las rejillas
        • 3.3.1 El contenedor de la rejilla
        • 3.3.2 Declarar columnas
        • 3.3.3 Declarar filas
        • 3.3.4 Utilizar la sintaxis abreviada
        • 3.3.5 Aplicar otras unidades
        • 3.3.6 Insertar huecos
        • 3.3.7 Dar forma al contenedor
      • 3.4 Posicionar los elementos en la rejilla
        • 3.4.1 Ubicar los hijos en la rejilla
        • 3.4.2 Ubicar los hijos en las filas
        • 3.4.3 Aprovechar la numeración de las líneas
        • 3.4.4 Nombrar las líneas de la rejilla
        • 3.4.5 Nombrar las áreas de la rejilla
        • 3.4.6 Alinear las celdas en la rejilla
      • 3.5 Crear una paginación responsiva con una rejilla
        • 3.5.1 Las visualizaciones responsivas
        • 3.5.2 La estructura HTML de la rejilla
        • 3.5.3 Los estilos CSS en Mobile First
        • 3.5.4 La consulta de recursos multimedia para las pantallas de las tabletas
        • 3.5.5 La consulta de recursos multimedia para las pantallas grandes
        • 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
      • 2.1 La función y el punto de referencia
      • 2.2 El desplazamiento
      • 2.3 El escalado
      • 2.4 La rotación
      • 2.5 La deformación
      • 2.6 Aplicar todas las transformaciones
    • 3. Las transiciones
      • 3.1 Crear transiciones
      • 3.2 Crear un desplazamiento horizontal
      • 3.3 Crear un desplazamiento horizontal y vertical
    • 4. Las animaciones
      • 4.1 Crear animaciones
      • 4.2 Crear un desplazamiento infinito
      • 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
      • 2.1 El módulo CSS
      • 2.2 Crear una máscara
    • 3. Rodear una imagen con texto
      • 3.1 El módulo CSS
      • 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
      • 2.1 Las relaciones con los archivos CSS
      • 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
      • 6.1 Los saltos de página
      • 6.2 Las líneas consecutivas
      • 6.3 Las líneas viudas y huérfanas
    • 7. Los enlaces de hipertexto
    • índice

Autor

Christophe AUBRYMás información

Responsable pedagógico en un centro de formation 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 sitio 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 mirando del entorno tecnológico.

Características

  • Número de páginas 502 páginas
  • Publicación junio 2021
    • Encuadernación rústica - 17 x 21 cm
    • ISBN: 978-2-409-03123-6
    • EAN: 9782409031236
    • Ref. ENI: RIT25.2HTM
  • Publicación junio 2021
    • HTML
    • ISBN: 978-2-409-03124-3
    • EAN: 9782409031243
    • Ref. ENI: LNRIT25.2HTM