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

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

  • Acceso ilimitado 24/7
  • Todos los libros online de ENI
  • Novedades todos los meses
  • Acceso 100% online
  • Disponible
  • Envío gratis a partir de 25 € de compra
  • Versión online gratis
  • Acceso gratuito a todos nuestros libros online durante 1 hora por toda compra
  • Consulta inmediata
  • Versión HTML online
  • Acceso ilimitado 24/7

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 estilo 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, cumpliendo la 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. Después se estudian 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. Se aprende la sintaxis de CSS y los selectores, se estudian 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. También se detallan las diferentes técnicas de diseño y 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. 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. Dos ejemplos de estructura semántica de página
      • 11.1 Una estructura semántica sencilla
      • 11.2 Una estructura semántica más elaborada
    • 12. Un ejemplo de estructura semántica de un artículo
  • Los contenedores de texto
    • 1. Utilizar correctamente los contenedores de texto
    • 2. El idioma y la 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 carácter
    • 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. Mostar 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 Tabla:titulo
    • 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
  • Los estilos para los tipos de letra
    • 1. El módulo CSS 3 para las fuentes de letra
    • 2. Las fuentes de letra
      • 2.1 Elegir una fuente de letra
      • 2.2 Las familias de caracteres genéricas
      • 2.3 Declarar una fuente de letra
      • 2.4 Incorporar una fuente de letra
    • 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
  • 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
  • Los estilos para los contenedores de texto
    • 1. Los titulos, 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
    • 8. La estructuración de página flexible
    • 9. La estructuración en rejilla
  • 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
  • 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 letra
    • 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

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

  • Nivel Medio a Experto
  • Número de páginas 403 páginas
  • Publicación enero 2020
    • Encuadernación rústica - 17 x 21 cm
    • ISBN: 978-2-409-02396-5
    • EAN: 9782409023965
    • Ref. ENI: RIT5.2HTM
  • Nivel Medio a Experto
  • Publicación enero 2020
    • HTML
    • ISBN: 978-2-409-02397-2
    • EAN: 9782409023972
    • Ref. ENI: LNRIT5.2HTM