HTML y CSS
Desarrolladores web: ¡esta es vuestra guía completa sobre HTML y CSS! Aprended a utilizar HTML para dar formato al texto y estructurar páginas web. Comprendan el esqueleto de los documentos HTML antes de crear formularios, hacer referencia a hipervínculos, incrustar contenido activo y mucho más. A continuación, diseñen sus páginas con CSS: creen diseños coherentes con selectores, el modelo de caja, el algoritmo en cascada y la herencia. Completa tu experiencia en desarrollo del lado del cliente familiarizándote con JavaScript. Con ejemplos de código detallados, dominarás HTML y CSS en poco tiempo.
- Tu guía completa sobre HTML5 y CSS3
- Cree documentos HTML, diseñe con CSS y obtenga una introducción práctica a los conceptos básicos de JavaScript.
- Cree diseños adaptables, trabaje con gráficos y vídeos, y mucho más.
Aprenderás sobre:
- HTML para el formato y la estructura:
Domina la sintaxis HTML y la estructura de los documentos. Trabaja con etiquetas, elementos y atributos para crear documentos HTML. Crea tablas y formularios, incrusta imágenes, configura enlaces y desarrolla elementos HTML interactivos.
- CSS para estilo y diseño:
Desarrolle diseños web simples y complejos con reglas CSS, selectores, declaraciones, combinadores, pseudoclases y pseudoelementos. Comprenda los principios de cascada, especificidad y herencia. Aprenda a utilizar el modelo de caja CSS, la propiedad de posición y mucho más.
- Fundamentos de JavaScript:
Amplíe sus conocimientos con una introducción a JavaScript. Descubra cómo utilizar variables, sentencias, funciones, matrices y objetos para escribir y ejecutar programas sencillos. Explore los conceptos básicos de Ajax para el diseño de aplicaciones web interactivas.
Aspectos Destacados:
- Sintaxis y estructura HTML
- Elementos HTML
- Tablas, enlaces e imágenes
- Formularios HTML
- Selektores CSS
- Cascada y herencia
- Modelo de caja CSS
- Preprocesadores CSS
- Diseño de maquetación adaptable
- Pruebas
- JavaScript
- Ajax
Ver Tabla de Contenidos Completa
- Prefacio
- Recursos del libro
- HTML5 y el «estándar vivo»
- Grupo destinatario
- ¿Cómo debo leer el libro?
- Escrito para ti, lector
- Agradecimientos
- 1 Introducción al universo HTML
- 1.1 ¿Este libro está realmente dirigido a mí?
- 1.2 Diferentes tipos de sitios web
- 1.2.1 Presencia en la web
- 1.2.2 Blog/Revista en línea/Portafolio
- 1.2.3 Sitios web de comercio electrónico: tiendas sin horario de apertura
- 1.2.4 Página de aterrizaje/micrositio
- 1.2.5 Plataforma web: crea tu propia red social
- 1.2.6 Aplicaciones web
- 1.3 Sitios web dinámicos y estáticos
- 1.3.1 Sitios web estáticos
- 1.3.2 Sitios web dinámicos
- 1.4 Lenguajes para el diseño y desarrollo web
- 1.4.1 HTML: Lenguaje de marcado de hipertexto basado en texto
- 1.4.2 CSS: Lenguaje de diseño
- 1.4.3 JavaScript: lenguaje de programación del lado del cliente del navegador web
- 1.4.4 Lenguajes de programación del lado del servidor y bases de datos
- 1.5 ¿Qué necesito para empezar?
- 1.5.1 Editor HTML para escribir documentos HTML
- 1.5.2 Navegador web para visualizar el sitio web
- 1.5.3 Paso a paso: Crear una página web y visualizarla en el navegador web
- 1.5.4 Revisión del código HTML escrito
- 1.5.5 Buenas razones para validar el código HTML de todos modos
- 1.6 Convenciones utilizadas en este libro
- 1.7 Resumen
- 2 Estructura básica de HTML y documentos HTML
- 2.1 Sintaxis y estructura de HTML y documentos HTML
- 2.1.1 Cómo estructurar un documento en HTML
- 2.1.2 Visualización de la estructura de árbol mediante el inspector del modelo de objetos de documento
- 2.1.3 Etiquetas HTML y elementos HTML
- 2.1.4 Anidamiento de elementos HTML y estructura jerárquica
- 2.1.5 Evitar el anidamiento incorrecto de elementos HTML
- 2.1.6 Omitir la etiqueta de cierre de un elemento HTML
- 2.1.7 Etiquetas HTML independientes sin etiquetas de cierre
- 2.1.8 Atributos HTML adicionales para elementos HTML
- 2.1.9 Uso de comentarios en documentos HTML
- 2.2 Un marco sencillo para documentos HTML
- 2.2.1 Tipo de documento HTML: <!doctype>
- 2.2.2 Inicio y finalización de un documento HTML: <html>
- 2.2.3 Encabezado de un documento HTML: <head>
- 2.2.4 Parte visible de un documento HTML: <body>
- 2.3 Resumen
- 3 Datos de cabecera de un documento HTML
- 3.1 Descripción general de los elementos HTML para el encabezado
- 3.2 <title>: Encabezado de la página HTML
- 3.3 Tema relacionado: Convención de nomenclatura y referencias
- 3.3.1 Nombres de archivo válidos y adecuados para un documento HTML
- 3.3.2 Nombres de directorios válidos y estructuras de directorios significativas
- 3.3.3 Escribir una referencia a una fuente de datos
- 3.4 Definición de la URL base de una página web mediante <base>
- 3.5 Referencia a un documento externo mediante <link>
- 3.6 Escribir estilos CSS para todo el documento utilizando <style>
- 3.7 Incluir scripts en páginas web utilizando <script>
- 3.8 Metadatos para el documento utilizando <meta>
- 3.8.1 Los metadatos más utilizados
- 3.8.2 Configuración de la ventana gráfica
- 3.8.3 Especificación de metadatos útiles para un rastreador web
- 3.8.4 Metadatos útiles para los motores de búsqueda
- 3.8.5 Metadatos útiles para el navegador web
- 3.8.6 Uso de metadatos generales
- 3.8.7 Mi recomendación: estos metadatos deben incluirse en el marco HTML básico.
- 3.8.8 Atributos HTML para el elemento <meta>
- 3.9 Resumen
- 4 La parte visible de un documento HTML
- 4.1 Elementos HTML para estructurar páginas
- 4.1.1 Uso de <body>: la sección de contenido visible de un documento HTML
- 4.1.2 Introducción a los elementos de sección de HTML
- 4.1.3 Uso de encabezados con los elementos HTML de <h1> a <h6>
- 4.1.4 Creación de un encabezado con <header> y un pie de página con <footer>
- 4.1.5 Marcar la información de contacto utilizando <address>
- 4.2 Elementos HTML para estructurar texto
- 4.2.1 Añadir párrafos de texto utilizando <p>
- 4.2.2 Forzar saltos de línea utilizando <br>
- 4.2.3 Añadir saltos de línea opcionales utilizando <wbr>
- 4.2.4 Forzar espacios y evitar el ajuste automático utilizando "" ""
- 4.2.5 Añadir una separación basada en temas utilizando <hr>
- 4.2.6 Añadir párrafos o citas utilizando <blockquote>
- 4.2.7 Definición de una sección general utilizando <div>
- 4.2.8 Uso de <main>: un elemento HTML para el contenido principal
- 4.2.9 Etiquetar el contenido por separado utilizando <figure> y <figcaption>
- 4.2.10 Creación de listas desordenadas con <ul> y <li>
- 4.2.11 Creación de listas ordenadas con <ol> y <li>
- 4.2.12 Invertir la numeración de una lista ordenada
- 4.2.13 Cambiar la numeración de una lista ordenada
- 4.2.14 Anidar listas unas dentro de otras
- 4.2.15 Creación de una lista descriptiva utilizando <dl>, <dt> y <dd>
- 4.3 Uso de HTML semántico
- 4.3.1 HTML sin una estructura precisa
- 4.3.2 Estructuración genérica utilizando <div>
- 4.3.3 Estructuración semántica utilizando los elementos proporcionados en HTML
- 4.3.4 ¿Para qué sirven esos elementos HTML semánticos?
- 4.4 Elementos HTML para el marcado de texto
- 4.4.1 Marcado de abreviaturas o acrónimos con <abbr>
- 4.4.2 Marcar texto como fuente de un título provisional utilizando <cite>
- 4.4.3 Marcado de la representación del código informático utilizando <code> y <pre>
- 4.4.4 Entrada de teclado con <kbd> y salida de programa con <samp>
- 4.4.5 Marcar texto como definición utilizando <dfn>
- 4.4.6 Marcar texto como variable utilizando <var>
- 4.4.7 Cambiar la dirección del texto utilizando <bdo> y <bdi>
- 4.4.8 Resaltar texto con <em>, <strong>, <i> y <b>
- 4.4.9 Resaltar texto con <mark>
- 4.4.10 Colocar texto entre comillas utilizando <q>
- 4.4.11 Subrayar o tachar texto con <u> y <s>
- 4.4.12 Marcar cambios en el texto utilizando <ins> y <del>
- 4.4.13 Mostrar texto como superíndice o subíndice utilizando <sup> y <sub>
- 4.4.14 Indicación de fechas y horas con <time>
- 4.4.15 Marcar la letra pequeña con <small>
- 4.4.16 Uso de <ruby>, <rp> y <rt> para anotaciones sobre la pronunciación
- 4.4.17 Agrupación de rangos de pasajes de texto individuales utilizando <span>
- 4.5 Tema relacionado: Codificación de caracteres
- 4.5.1 De bytes a codificación de caracteres
- 4.5.2 De ASCII a ISO-8859
- 4.5.3 Más allá del límite de bytes con Unicode
- 4.6 Entidades de caracteres en HTML
- 4.6.1 Estructura de una entidad de carácter en HTML
- 4.7 Resumen
- 5 Tablas e hipervínculos
- 5.1 Estructuración de datos en una tabla
- 5.1.1 Una estructura de tabla sencilla utilizando <table>, <tr>, <td> y <th>
- 5.1.2 Combinar columnas o filas utilizando «colspan» o «rowspan»
- 5.1.3 Atributos HTML para los elementos de tabla
- 5.1.4 Estructuración de tablas con <thead>, <tbody> y <tfoot>
- 5.1.5 Agrupación de columnas de una tabla mediante <colgroup> y <col>
- 5.1.6 Etiquetado de tablas con <caption> o <figcaption>
- 5.2 Referencias electrónicas (hipervínculos) utilizando <a>
- 5.2.1 Insertar enlaces a otros documentos HTML en su propio sitio web
- 5.2.2 Insertar enlaces a otros sitios web
- 5.2.3 Abrir enlaces con el atributo «target» en una nueva ventana
- 5.2.4 Enlaces de correo electrónico con «href=mailto: . . .»
- 5.2.5 Configuración de enlaces a otros tipos de contenido
- 5.2.6 Añadir enlaces de descarga utilizando el atributo «download»
- 5.2.7 Configuración de enlaces a partes específicas de una página web
- 5.2.8 Creación de enlaces a números de teléfono
- 5.2.9 Atributos HTML para el elemento HTML <a>
- 5.3 Resumen
- 6 Gráficos y multimedia
- 6.1 Incrustar imágenes con <img>
- 6.1.1 Añadir imágenes a un documento HTML
- 6.1.2 Especificar la altura y el ancho de un gráfico
- 6.1.3 Etiquetado de imágenes con <figure> y <figcaption>
- 6.1.4 Atributos HTML para el elemento HTML <img>
- 6.2 Creación de gráficos sensibles a enlaces (mapas de imagen)
- 6.2.1 Utilizar atributos HTML para el elemento HTML <area>
- 6.2.2 Referencia a áreas definidas del elemento HTML <area>
- 6.2.3 Atributos HTML de <area>
- 6.3 Cargar la imagen adecuada utilizando <picture>
- 6.3.1 Atributos HTML de <source>
- 6.3.2 Múltiples fuentes de imágenes con el atributo HTML «srcset»
- 6.4 Añadir un ícono para el sitio web (Favicon)
- 6.5 Uso de gráficos vectoriales en documentos HTML
- 6.5.1 Añadir SVG como referencia gráfica utilizando <img>
- 6.5.2 Incorporación directa de SVG en la página web mediante <svg>
- 6.5.3 Etiquetas SVG para gráficos vectoriales
- 6.5.4 Descripción general de los elementos gráficos SVG
- 6.5.5 Notas adicionales sobre el uso de SVG
- 6.5.6 Fórmulas matemáticas con MathML
- 6.6 Dibujar gráficos utilizando <canvas>
- 6.7 Reproducción de videos con el elemento HTML <video>
- 6.7.1 Atributos HTML para el elemento HTML <video>
- 6.7.2 Añadir subtítulos a un video utilizando <track>
- 6.7.3 Reproducción de videos a través de YouTube
- 6.8 Reproducción de archivos de audio con el elemento HTML <audio>
- 6.8.1 Atributos HTML para el elemento HTML <audio>
- 6.9 Inclusión de otro contenido activo
- 6.9.1 Elemento HTML <embed>
- 6.9.2 Elemento HTML <object>
- 6.9.3 Elemento HTML <iframe>
- 6.10 Resumen
- 7 Formularios HTML y elementos interactivos
- 7.1 Definición de un espacio para formularios
- 7.2 Campos de entrada HTML para formularios
- 7.2.1 Campo de entrada de texto de una sola línea utilizando <input type=""text"">
- 7.2.2 Campo de entrada de contraseña utilizando <input type="password">
- 7.2.3 Campo de entrada de texto multilínea utilizando <textarea>
- 7.2.4 Lista de selección o lista desplegable con <select>
- 7.2.5 Creación de un grupo de botones de radio utilizando <input type="radio">
- 7.2.6 Añadir una etiqueta de texto utilizando <label>
- 7.2.7 Uso de casillas de verificación mediante <input type="checkbox">
- 7.2.8 Uso de campos para cargar archivos mediante <input type="file">
- 7.2.9 Descripción general de los distintos botones
- 7.2.10 Uso de un campo de entrada oculto mediante <input type="hidden">
- 7.2.11 Escribir campos de formulario fuera de <form>...</form>
- 7.2.12 Varios botones de envío para diferentes URL
- 7.3 Tipos especiales de campos de entrada
- 7.3.1 Un campo de entrada para colores utilizando <input type="color">
- 7.3.2 Un campo de entrada para una fecha utilizando <input type=""date"">
- 7.3.3 Un campo de entrada para una hora utilizando <input type=""time"">
- 7.3.4 Campos de entrada para fecha y hora
- 7.3.5 Campos de entrada para el mes y la semana
- 7.3.6 Un campo de entrada para búsquedas utilizando <input type=""search"">
- 7.3.7 Un campo de entrada para direcciones de correo electrónico utilizando <input type="email">
- 7.3.8 Un campo de entrada para una URL utilizando <input type="url">
- 7.3.9 Un campo de entrada para números de teléfono utilizando <input type="tel">
- 7.3.10 Un campo de entrada para números utilizando <input type=""number"">
- 7.3.11 Un campo de entrada para números de un rango determinado
- 7.3.12 Salida de valores y cálculos utilizando <output>
- 7.4 Los atributos HTML para los campos de entrada
- 7.4.1 Establecer el foco de entrada utilizando el atributo HTML «autofocus»
- 7.4.2 Activación/desactivación del autocompletado mediante el atributo «autocomplete»
- 7.4.3 Lista de sugerencias para utilizar el atributo HTML «list» y <datalist>
- 7.4.4 Especificación de valores mínimos y máximos y del tamaño del paso
- 7.4.5 Selección o introducción de varios valores utilizando «multiple»
- 7.4.6 Expresiones regulares para campos de entrada utilizando «patrón»
- 7.4.7 Un marcador de posición para un campo de entrada utilizando «placeholder»
- 7.4.8 Definición de un campo como obligatorio mediante el atributo «required»
- 7.4.9 Control de los mensajes de error para los campos de entrada
- 7.5 Otras herramientas útiles para los campos de entrada
- 7.5.1 Desactivación de elementos de formulario mediante el atributo HTML «disabled»
- 7.5.2 Permitir solo lectura para campos de entrada utilizando el atributo «readonly»
- 7.5.3 Atajos de teclado útiles y secuencia de tabulaciones para campos de entrada
- 7.5.4 Agrupación de elementos de formulario mediante <fieldset> y <legend>
- 7.5.5 Visualización del progreso mediante <progress>
- 7.5.6 Visualización de valores mediante <meter>
- 7.6 Envío de datos de formularios con PHP
- 7.6.1 Transferencia de datos desde el navegador web para su posterior procesamiento
- 7.6.2 El método «POST»
- 7.6.3 El método «GET»
- 7.6.4 Procesamiento de los datos mediante un script PHP
- 7.7 Elementos HTML interactivos
- 7.7.1 Expandir/contraer contenido utilizando <details> y <summary>
- 7.7.2 Un cuadro de diálogo mediante <dialog>
- 7.8 Resumen
- 8 Introducción a las hojas de estilo en cascada
- 8.1 La historia de CSS
- 8.2 El principio básico del uso de CSS
- 8.2.1 Estructura de una regla CSS
- 8.2.2 Declaración de un selector
- 8.2.3 Uso de comentarios para código CSS
- 8.2.4 Algunas notas sobre el formato del código CSS
- 8.3 Integración de CSS en HTML
- 8.3.1 Declaraciones de estilo directamente en la etiqueta HTML utilizando el atributo HTML «style»
- 8.3.2 Declaraciones de estilo en el encabezado del documento utilizando el elemento HTML <style>
- 8.3.3 Integración de declaraciones de estilo desde un archivo CSS externo utilizando <link>
- 8.3.4 Combinación de reglas CSS en la sección Head y en archivos CSS externos
- 8.3.5 Recomendación: Debe separar el HTML y el CSS
- 8.3.6 Prueba de hojas de estilo alternativas durante el desarrollo
- 8.3.7 Integración de declaraciones de estilo desde un archivo CSS externo utilizando «@import»
- 8.3.8 Hojas de estilo específicas para medios para dispositivos de salida específicos
- 8.3.9 Hojas de estilo específicas para medios con CSS
- 8.4 Análisis de CSS en el navegador web
- 8.5 Resumen
- 9 Los selectores de CSS
- 9.1 Los selectores simples de CSS
- 9.1.1 Cómo abordar elementos HTML utilizando el selector de tipo
- 9.1.2 Cómo abordar elementos HTML utilizando una clase o un identificador específicos
- 9.1.3 Selector universal: cómo abordar todos los elementos de un documento
- 9.1.4 Cómo abordar elementos basándose en atributos utilizando el selector de atributos
- 9.1.5 Un selector de atributos para atributos con un valor específico
- 9.1.6 Selector de atributos para atributos con un valor parcial específico
- 9.1.7 Pseudo-clases CSS: los selectores para características específicas
- 9.1.8 Las prácticas pseudoclases estructurales en CSS
- 9.1.9 Otras pseudoclases útiles
- 9.1.10 Pseudoelementos: los selectores para elementos inexistentes
- 9.2 Combinadores: concatenación de selectores
- 9.2.1 El combinador descendiente (E1 E2)
- 9.2.2 El combinador secundario (E1 > E2)
- 9.2.3 El combinador de hermanos adyacentes (E1 + E2)
- 9.2.4 El combinador general de hermanos (E1 ~ E2)
- 9.3 Recomendación: Cómo utilizar CSS de forma eficiente y sencilla
- 9.3.1 Cómo escribir CSS con buen rendimiento
- 9.3.2 Recomendación: mantenga el código CSS lo más sencillo posible.
- 9.4 Resumen
- 10 Herencia y cascada
- 10.1 El principio de herencia en CSS
- 10.1.1 Ten cuidado al utilizar propiedades relativas
- 10.1.2 No todo se hereda
- 10.1.3 Aplicar la herencia utilizando «inherit»
- 10.1.4 Restablecimiento del valor predeterminado de una característica CSS («inicial»)
- 10.1.5 Forzar la herencia o restaurar un valor («desactivar»)
- 10.1.6 Forzar la herencia o restaurar valores para todas las propiedades
- 10.2 Comprensión del sistema de control para la conexión en cascada
- 10.2.1 El origen de una hoja de estilos
- 10.2.2 Aumentar la prioridad de una característica CSS utilizando «!important»
- 10.2.3 Clasificación por importancia y origen
- 10.2.4 Clasificación por ponderación de los selectores (especificidad)
- 10.2.5 Resumen del sistema de reglas en cascada
- 10.2.6 Análisis de la cascada en el navegador
- 10.3 Tema relacionado: Pasar valores a las características CSS
- 10.3.1 Diferentes unidades de medida en CSS
- 10.3.2 Cadenas de caracteres y palabras clave como valores para las características CSS
- 10.3.3 Muchas formas de utilizar un color en CSS
- 10.3.4 Dimensiones angulares en CSS
- 10.3.5 Pasar valores mediante notación corta a una característica CSS
- 10.4 Resumen
- 11 El modelo de caja de CSS
- 11.1 Modelo clásico de cajas de CSS
- 11.1.1 Especificar el área de contenido utilizando «width» y «height»
- 11.1.2 Especificar el espaciado interior utilizando «padding»
- 11.1.3 Creación del borde con «border»
- 11.1.4 Configuración del margen exterior con «margin»
- 11.1.5 Margen de colapso
- 11.1.6 Determinación del ancho total y la altura total de una caja
- 11.2 Nuevo modelo de caja alternativa de CSS
- 11.2.1 Uso del modelo de caja «box-sizing»
- 11.2.2 Uso del modelo de caja alternativo
- 11.3 Análisis del modelo de caja en el navegador
- 11.4 Modelo de caja para elementos en línea
- 11.5 Diseño de cajas
- 11.5.1 Añadir y diseñar un borde utilizando la propiedad «border»
- 11.5.2 Establecimiento de un color de fondo mediante «background-color»
- 11.5.3 Uso de imágenes de fondo
- 11.5.4 Hacer transparentes las cajas
- 11.5.5 Añadir un degradado
- 11.5.6 Añadir una sombra utilizando la función «box-shadow»
- 11.5.7 Añadir esquinas redondeadas utilizando la función CSS «border-radius»
- 11.6 Tema relacionado: Prefijos de navegadores web (prefijos de proveedores CSS)
- 11.7 Resumen
- 12 Posicionamiento CSS
- 12.1 Posicionamiento mediante la función CSS «position»
- 12.1.1 Posicionamiento normal (“position: static”)
- 12.1.2 Posicionamiento de elementos mediante «top», «right», «bottom» y «left»
- 12.1.3 Posicionamiento relativo (“position: relative”)
- 12.1.4 Posicionamiento absoluto (“position: absolute”)
- 12.1.5 Posicionamiento fijo (“position: fixed”)
- 12.1.6 Posicionamiento fijo (“position: sticky”)
- 12.2 Controlar el apilamiento utilizando «z-index»
- 12.3 Cuadros flotantes para posicionamiento mediante «float»
- 12.3.1 Finalización de la flotación
- 12.3.2 Combinación de flotantes en una sola entidad
- 12.4 Cajas flexibles de CSS
- 12.4.1 Alinear el Flexbox
- 12.4.2 Configuración de la flexibilidad de Flexbox
- 12.4.3 Determinación del orden de las cajas
- 12.5 Resumen
- 13 Creación de diseños adaptables con CSS
- 13.1 Conocimientos teóricos básicos sobre diseño web adaptativo
- 13.1.1 Uso de tipos de medios específicos
- 13.1.2 Consultas de medios para características multimedia
- 13.1.3 Integración y aplicación de consultas de medios para funciones multimedia
- 13.1.4 Estructura básica de una consulta de características multimedia
- 13.1.5 ¿Qué características multimedia se pueden consultar?
- 13.1.6 De vital importancia: la ventana gráfica para dispositivos móviles
- 13.1.7 Utilizar «em» en lugar de píxeles para los cambios de diseño en las consultas de medios
- 13.1.8 Saltos de diseño (puntos de ruptura)
- 13.1.9 Se acabaron los juegos matemáticos gracias a «box-sizing: border-box;».
- 13.1.10 ¿Qué sucede con los navegadores web que no comprenden las consultas de medios?
- 13.2 Creemos un diseño sencillo y adaptable
- 13.2.1 Creemos el marco básico utilizando HTML
- 13.2.2 Configuración de las características generales de CSS
- 13.2.3 ¿Qué debo utilizar como versión básica sin consultas de medios: Mobile First?
- 13.2.4 Configuración del salto de diseño (punto de ruptura)
- 13.2.5 Añadir más saltos de diseño
- 13.2.6 Personalización del contenido principal
- 13.3 Elementos aún más flexibles
- 13.3.1 Utilizar tamaños de fuente relativos en lugar de píxeles
- 13.3.2 Crear imágenes adaptables
- 13.3.3 Imágenes flexibles con el ancho máximo posible
- 13.3.4 Ocultar imágenes por completo
- 13.3.5 Carga de la imagen adecuada para el ancho de la pantalla: <picture>
- 13.3.6 Uso de imágenes que cubren áreas
- 13.4 Diseño de cuadrícula CSS
- 13.4.1 Creación de una cuadrícula para el contenido
- 13.4.2 Colocación de elementos en la cuadrícula
- 13.4.3 Cambios de diseño sencillos
- 13.4.4 Espaciado entre líneas de cuadrícula
- 13.4.5 Comprobación de la cuadrícula en el navegador web
- 13.5 Cambiar el comportamiento de los elementos HTML utilizando «display»
- 13.5.1 «display: block», «display: inline» y «display: inline-block»
- 13.5.2 Ocultar elementos con «display:none»
- 13.5.3 Otros valores para «display»
- 13.6 Cálculos con CSS y la función «calc()»
- 13.7 Resumen
- 14 Diseño con CSS
- 14.1 Diseñar textos con CSS
- 14.1.1 Selección de fuentes mediante «font-family»
- 14.1.2 Proporcionar fuentes a través de fuentes web: «@font-face»
- 14.1.3 Uso de íconos mediante fuentes de íconos
- 14.1.4 Configuración del tamaño de fuente mediante «font-size»
- 14.1.5 Fuentes en cursiva y negrita mediante «font-style» y «font-weight»
- 14.1.6 Creación de versalitas con «font-variant»
- 14.1.7 Definición del interlineado mediante «line-height»
- 14.1.8 Una notación breve para el formato de fuentes utilizando «font»
- 14.1.9 Especificar el espaciado entre letras y palabras mediante «letter-spacing» y «word-spacing»
- 14.1.10 Configuración de la alineación del texto mediante «text-align»
- 14.1.11 Configuración de la alineación vertical mediante «vertical-align»
- 14.1.12 Sangría de texto con «text-indent»
- 14.1.13 Subrayar texto y tachar texto mediante el uso de «text-decoration»
- 14.1.14 Texto en mayúsculas y minúsculas mediante «text-transform»
- 14.1.15 Añadir sombra al texto mediante «text-shadow»
- 14.1.16 Dividir texto en varias columnas utilizando «column-count»
- 14.2 Diseño de listas con CSS
- 14.2.1 Personalización de viñetas mediante «list-style-type»
- 14.2.2 Uso de imágenes como viñetas mediante «list-style-image»
- 14.2.3 Posicionamiento de listas con viñetas mediante «list-style-position»
- 14.2.4 Notación abreviada «list-style» para diseñar listas
- 14.2.5 Creación de navegación y menús mediante listas
- 14.3 Diseñar tablas atractivas con CSS
- 14.3.1 Creación de tablas de ancho fijo
- 14.3.2 Recomendación general: Diseñar tablas atractivas con CSS
- 14.3.3 Colapso de bordes para celdas de tabla utilizando «border-collapse»
- 14.3.4 Configuración del espaciado entre celdas mediante «border-spacing»
- 14.3.5 Mostrar celdas vacías de una tabla utilizando «empty-cells»
- 14.3.6 Posicionamiento de los títulos de las tablas mediante «caption-side»
- 14.4 Ajustar imágenes y gráficos utilizando «width» y «height»
- 14.5 Transformar elementos con CSS
- 14.5.1 Escalado de elementos HTML mediante «transform: scale()»
- 14.5.2 Rotación de elementos HTML utilizando «transform: rotate()»
- 14.5.3 Inclinación de elementos HTML utilizando «transform: skew()»
- 14.5.4 Mover elementos HTML utilizando «transform: translate()»
- 14.5.5 Combinación de diferentes transformaciones
- 14.5.6 Otros elementos HTML
- 14.6 Creación de transiciones con CSS
- 14.7 Diseñar formularios HTML con CSS
- 14.7.1 Estructuración ordenada de un formulario HTML
- 14.7.2 Alinear elementos de formulario con CSS
- 14.7.3 Diseño de elementos de formulario con CSS
- 14.8 Resumen
- 15 Pruebas y organización
- 15.1 Pruebas de navegadores web: ¿qué es posible?
- 15.1.1 Validación de HTML y CSS
- 15.1.2 ¿Qué navegadores utilizan actualmente los visitantes?
- 15.1.3 Prueba del navegador web CSS
- 15.1.4 Prueba del navegador web HTML5
- 15.1.5 ¿Puedo usar eso?
- 15.1.6 Consulta de características mediante la regla «@supports»
- 15.2 Visualización de sitios web en diferentes tamaños
- 15.3 Configuración de una hoja de estilos central
- 15.3.1 Combinar todo en un solo archivo para acortar el tiempo de carga
- 15.4 ¿Restablecimiento o normalización de CSS?
- 15.4.1 Preajustes de estilo integrados del navegador web y restablecimiento de CSS
- 15.4.2 Normalización: la alternativa al restablecimiento de CSS
- 15.5 Resumen
- 16 El preprocesador CSS Sass y SCSS
- 16.1 Sintaxis Sass o SCSS
- 16.2 De Sass/SCSS a CSS
- 16.3 Instalación y configuración de Sass
- 16.3.1 Preprocesador CSS en línea sin instalación
- 16.3.2 Configuración de Sass con Visual Studio Code
- 16.3.3 Instalación de Sass para la línea de comandos
- 16.4 Uso de variables con Sass
- 16.5 Anidación con Sass
- 16.6 Mixins (“@mixin”, “@include”)
- 16.7 Extender («@extend»)
- 16.8 Consultas de medios y «@content»
- 16.9 Operadores
- 16.10 Ajuste de colores y brillo
- 16.11 Estructuras de control Sass
- 16.12 Funciones «@función»
- 16.13 «@import»
- 16.14 Comentarios
- 16.15 Resumen
- 17 Breve introducción a JavaScript
- 17.1 JavaScript en el desarrollo web
- 17.2 Escribir y ejecutar programas JavaScript
- 17.2.1 Integración de un archivo JavaScript en un archivo HTML
- 17.2.2 Escribir JavaScript dentro de HTML
- 17.2.3 Posición de JavaScript y su ejecución en el documento HTML
- 17.2.4 Atributos para manipular el comportamiento de carga de JavaScript («async», «defer»)
- 17.2.5 El elemento <noscript> para sin JavaScript
- 17.3 Salida de JavaScript
- 17.3.1 Diálogos estándar (y diálogo de entrada)
- 17.3.2 Salida a la consola
- 17.3.3 Publicación en el sitio web
- 17.3.4 Ejecutar JavaScript sin un navegador web
- 17.3.5 Anotar código JavaScript con comentarios
- 17.4 Uso de variables en JavaScript
- 17.4.1 Definición de constantes
- 17.4.2 Modo estricto utilizando «use strict»
- 17.5 Descripción general de los tipos de datos de JavaScript
- 17.5.1 Tipo de datos numéricos (números)
- 17.5.2 Tipos de datos de cadena (cadenas)
- 17.5.3 Cadenas de plantillas
- 17.5.4 Tipo de datos booleanos
- 17.5.5 Tipos de datos indefinidos y nulos
- 17.5.6 Objetos
- 17.5.7 Conversión de tipos de datos
- 17.6 Operadores aritméticos para tareas de cálculo en JavaScript
- 17.7 Instrucciones condicionales en JavaScript
- 17.7.1 «verdadero» o «falso»: valor booleano verdadero
- 17.7.2 Uso de los distintos operadores de comparación en JavaScript
- 17.7.3 Uso de la rama «if»
- 17.7.4 Uso del operador de selección
- 17.7.5 Operadores lógicos
- 17.7.6 Ramificación múltiple mediante «switch»
- 17.8 Repeticiones múltiples de instrucciones de programa mediante bucles
- 17.8.1 Operadores de incremento y decremento
- 17.8.2 El bucle «for» controlado por encabezados
- 17.8.3 El bucle «while» controlado por encabezado
- 17.8.4 El bucle «do-while» controlado por el pie de página
- 17.8.5 Finalizar el bloque de instrucciones con «break»
- 17.8.6 Saltar al inicio del bucle mediante «continue»
- 17.9 Resumen
- 18 Matrices, funciones y objetos en JavaScript
- 18.1 Funciones en JavaScript
- 18.1.1 Diferentes formas de definir una función en JavaScript
- 18.1.2 Funciones de llamada y parámetros de función
- 18.1.3 Valor de retorno de una función
- 18.1.4 El ámbito de las variables en una función
- 18.1.5 Definición de funciones en notación corta (funciones flecha)
- 18.1.6 Uso de una función en una página web
- 18.2 Matrices
- 18.2.1 Acceso a los elementos individuales de la matriz
- 18.2.2 Matrices multidimensionales
- 18.2.3 Añadir o eliminar nuevos elementos en una matriz
- 18.2.4 Ordenación de matrices
- 18.2.5 Búsqueda dentro de matrices
- 18.2.6 Métodos adicionales para matrices
- 18.3 Cadenas y expresiones regulares
- 18.3.1 Funciones útiles para cadenas
- 18.3.2 Aplicación de expresiones regulares a cadenas
- 18.4 Programación orientada a objetos en JavaScript
- 18.4.1 ¿Qué son exactamente los objetos?
- 18.4.2 Creación de objetos mediante funciones constructoras
- 18.4.3 Creación de objetos mediante la sintaxis de clase
- 18.4.4 Acceso a las propiedades y métodos del objeto: setters y getters
- 18.4.5 La palabra clave «this»
- 18.5 Otros objetos globales
- 18.5.1 El objeto superior «Objeto»
- 18.5.2 Objetos para los tipos de datos primitivos: número, cadena y booleano
- 18.5.3 Objeto «Función»
- 18.5.4 Objeto «Fecha»
- 18.5.5 Objeto «Matemáticas»
- 18.5.6 Objeto «Mapa»
- 18.5.7 Objeto «Set»
- 18.6 Resumen
- 19 Cambiar páginas web de forma dinámica
- 19.1 Introducción al DOM de un documento HTML
- 19.2 El objeto «documento»
- 19.3 Interfaz de programación DOM
- 19.4 Acceso a elementos en el DOM
- 19.4.1 Buscar un elemento HTML con un atributo «id» específico
- 19.4.2 Búsqueda de elementos HTML con un nombre de etiqueta específico
- 19.4.3 Búsqueda de elementos HTML con un atributo «class» específico
- 19.4.4 Búsqueda de elementos HTML con un atributo «name» específico
- 19.4.5 Uso de «querySelector()» y «querySelectorAll()»
- 19.4.6 Otras colecciones de objetos y propiedades
- 19.5 Cambiar un elemento HTML, un atributo o el estilo
- 19.5.1 Cambiar el contenido de elementos HTML utilizando «innerHTML»
- 19.5.2 Cambiar el valor de un atributo HTML
- 19.5.3 Cambiar el estilo (CSS) de un elemento HTML
- 19.6 Respuesta a eventos JavaScript
- 19.7 Manejo de eventos con el controlador de eventos
- 19.7.1 Configuración de un controlador de eventos como atributo HTML en el elemento HTML
- 19.7.2 Configuración de controladores de eventos como propiedad de un objeto
- 19.7.3 Configuración de un controlador de eventos mediante «addEventListener()»
- 19.8 Descripción general de los eventos comunes de JavaScript
- 19.8.1 Los eventos JavaScript de la interfaz de usuario (eventos de ventana)
- 19.8.2 Eventos JavaScript que pueden ocurrir en relación con el mouse
- 19.8.3 Eventos JavaScript para dispositivos con pantalla táctil
- 19.8.4 Eventos JavaScript que se producen en relación con el teclado
- 19.8.5 Eventos JavaScript para formularios HTML
- 19.8.6 Eventos JavaScript para las API web
- 19.9 Más información sobre eventos con el objeto «event»
- 19.10 Suprimir la acción predeterminada de los eventos
- 19.11 El flujo de eventos (propagación de eventos)
- 19.11.1 Más información sobre la fase de ebullición
- 19.11.2 Cancelación de la propagación mediante el método «stopPropagation()»
- 19.11.3 Intervención en el flujo de eventos durante la fase de captura
- 19.11.4 Información adicional sobre las fases de captura y burbujeo
- 19.12 Añadir, cambiar y eliminar elementos HTML
- 19.12.1 Creación y adición de un nuevo elemento HTML y contenido
- 19.12.2 Selección aún más precisa de elementos HTML en el árbol DOM
- 19.12.3 Añadir un nuevo elemento HTML aún más específico al árbol DOM
- 19.12.4 Eliminación de un elemento HTML existente del árbol DOM
- 19.12.5 Reemplazar un elemento HTML en el árbol DOM por otro
- 19.12.6 Clonación de un nodo o fragmentos completos del árbol DOM
- 19.12.7 Diferentes métodos para manipular los atributos HTML
- 19.12.8 La etiqueta HTML <template>
- 19.13 Formularios HTML y JavaScript
- 19.13.1 Lectura de campos de entrada de texto con JavaScript
- 19.13.2 Lectura de listas de selección con JavaScript
- 19.13.3 Lectura de botones de radio y casillas de verificación con JavaScript
- 19.13.4 Interceptar botones con JavaScript
- 19.13.5 Control del indicador de progreso <progress> con JavaScript
- 19.14 Resumen
- 20 Introducción a Ajax
- 20.1 Introducción a la programación Ajax
- 20.1.1 Un ejemplo sencillo de Ajax en ejecución
- 20.1.2 Creación del objeto «XMLHttpRequest»
- 20.1.3 Realizar una solicitud al servidor
- 20.1.4 Envío de datos
- 20.1.5 Determinación del estado del objeto «XMLHttpRequest»
- 20.1.6 Procesamiento de la respuesta del servidor
- 20.1.7 El ejemplo Ajax durante la ejecución
- 20.1.8 Un ejemplo más complejo de Ajax con XML y DOM
- 20.1.9 El formato de datos JSON con Ajax
- 20.2 Resumen
- El autor
- Índice
HTML and CSS
Web developers—this is your all-in-one guide to HTML and CSS! Learn to use HTML to format text and structure web pages. Understand the HTML document skeleton before creating forms, referencing hyperlinks, embedding active content, and more. Then style your pages with CSS: Create consistent designs with selectors, the box model, the cascade algorithm, and inheritance. Round out your client-side development experience by getting to know JavaScript. With detailed code examples, you’ll master HTML and CSS in no time!
- Your complete guide to HTML5 and CSS3
- Build HTML documents, design with CSS, and get a hands-on introduction to JavaScript basics
- Create responsive layouts, work with graphics and video, and more
You'll learn about:
- HTML for Formatting and Structure:
Master HTML syntax and document structure. Work with tags, elements, and attributes to build HTML documents. Create tables and forms, embed images, configure links, and develop interactive HTML elements.
- CSS for Style and Design:
Develop simple and complex web layouts with CSS rules, selectors, declarations, combinators, pseudoclasses, and pseudoelements. Understand the principles of cascading, specificity, and inheritance. Learn to use the CSS box model, the position property, and more.
- JavaScript Fundamentals:
Expand your knowledge with an introduction to JavaScript. See how to use variables, statements, functions, arrays, and objects to write and run simple programs. Explore the basics of Ajax for interactive web application design.
Key Highlights:
- HTML syntax and structure
- HTML elements
- Tables, links, and images
- HTML forms
- CSS selectors
- Cascade and inheritance
- CSS box model
- CSS preprocessors
- Responsive layout design
- Testing
- JavaScript
- Ajax
View Full Table of Contents
- Preface
- Book Resources
- HTML5 and the “Living Standard”
- Target Group
- How Should I Read through the Book?
- Written for You, the Reader
- Acknowledgments
- 1 Introduction to the HTML Universe
- 1.1 Is This Book Even Intended for Me?
- 1.2 Different Types of Websites
- 1.2.1 Web Presence
- 1.2.2 Blog/Online Magazine/Portfolio
- 1.2.3 E-Commerce Websites: Stores without Opening Hours
- 1.2.4 Landing Page/Microsite
- 1.2.5 Web Platform: Building Your Own Social Network
- 1.2.6 Web Apps
- 1.3 Dynamic and Static Websites
- 1.3.1 Static Websites
- 1.3.2 Dynamic Websites
- 1.4 Languages for Designing and Developing on the Web
- 1.4.1 HTML: Text-Based Hypertext Markup Language
- 1.4.2 CSS: Design Language
- 1.4.3 JavaScript: Client-Side Scripting Language of the Web Browser
- 1.4.4 Server-Side Scripting Languages and Databases
- 1.5 What Do I Need to Get Started?
- 1.5.1 HTML Editor for Writing HTML Documents
- 1.5.2 Web Browser for Displaying the Website
- 1.5.3 Step by Step: Creating a Web Page and Viewing It in the Web Browser
- 1.5.4 Checking Written HTML
- 1.5.5 Good Reasons for Validating the HTML Code Anyway
- 1.6 Conventions Used in This Book
- 1.7 Summary
- 2 Basic Structure of HTML and HTML Documents
- 2.1 Syntax and Structure of HTML and HTML Documents
- 2.1.1 How to Structure a Document in HTML
- 2.1.2 Viewing the Tree Structure Using the Document Object Model Inspector
- 2.1.3 HTML Tags and HTML Elements
- 2.1.4 Nesting HTML Elements and the Hierarchical Structure
- 2.1.5 Avoiding Incorrect Nesting of HTML Elements
- 2.1.6 Omitting the End Tag of an HTML Element
- 2.1.7 Standalone HTML Tags without End Tags
- 2.1.8 Additional HTML Attributes for HTML Elements
- 2.1.9 Using Comments in HTML Documents
- 2.2 A Simple HTML Document Framework
- 2.2.1 HTML Document Type: <!doctype>
- 2.2.2 Beginning and Ending an HTML Document: <html>
- 2.2.3 Head of an HTML Document: <head>
- 2.2.4 Visible Part of an HTML Document: <body>
- 2.3 Summary
- 3 Head Data of an HTML Document
- 3.1 Overview of HTML Elements for the Head
- 3.2 <title>: Heading of the HTML Page
- 3.3 Related Topic: Naming Convention and Referencing
- 3.3.1 Valid and Good File Names for an HTML Document
- 3.3.2 Valid Directory Names and Meaningful Directory Structures
- 3.3.3 Writing a Reference to a Data Source
- 3.4 Defining the Base URL of a Web Page Using <base>
- 3.5 Referencing an External Document via <link>
- 3.6 Writing Document-Wide CSS Styles Using <style>
- 3.7 Including Scripts in Web Pages Using <script>
- 3.8 Metadata for the Document Using <meta>
- 3.8.1 The Most Commonly Used Metadata
- 3.8.2 Setting the Viewport
- 3.8.3 Specifying Useful Metadata for a Web Crawler
- 3.8.4 Useful Metadata for Search Engines
- 3.8.5 Useful Metadata for the Web Browser
- 3.8.6 Using General Metadata
- 3.8.7 My Recommendation: This Metadata Belongs in the Basic HTML Framework
- 3.8.8 HTML Attributes for the <meta> Element
- 3.9 Summary
- 4 The Visible Part of an HTML Document
- 4.1 HTML Elements for Structuring Pages
- 4.1.1 Using <body>: The Displayable Content Section of an HTML Document
- 4.1.2 Introducing the Section Elements of HTML
- 4.1.3 Using Headings with the HTML Elements from <h1> to <h6>
- 4.1.4 Creating a Header Using <header> and a Footer Using <footer>
- 4.1.5 Marking Contact Information Using <address>
- 4.2 HTML Elements for Structuring Text
- 4.2.1 Adding Text Paragraphs Using <p>
- 4.2.2 Forcing Line Breaks Using <br>
- 4.2.3 Adding Optional Line Breaks Using <wbr>
- 4.2.4 Forcing Spaces and Preventing Wrapping Using "" ""
- 4.2.5 Adding a Topic-Based Separation Using <hr>
- 4.2.6 Adding Paragraphs or Citations Using <blockquote>
- 4.2.7 Defining a General Section Using <div>
- 4.2.8 Using <main>: An HTML Element for the Main Content
- 4.2.9 Labeling Content Separately Using <figure> and <figcaption>
- 4.2.10 Creating Unordered Lists Using <ul> and <li>
- 4.2.11 Creating Ordered Lists Using <ol> and <li>
- 4.2.12 Reversing the Numbering of an Ordered List
- 4.2.13 Changing the Numbering of an Ordered List
- 4.2.14 Nesting Lists within Each Other
- 4.2.15 Creating a Description List Using <dl>, <dt>, and <dd>
- 4.3 Using Semantic HTML
- 4.3.1 HTML without a Precise Structure
- 4.3.2 Generic Structuring Using <div>
- 4.3.3 Semantic Structuring Using the Elements Provided in HTML
- 4.3.4 What’s the Use of Those Semantic HTML Elements?
- 4.4 HTML Elements for Text Markups
- 4.4.1 Marking Up Abbreviations or Acronyms Using <abbr>
- 4.4.2 Marking Up Text as the Source of a Working Title Using <cite>
- 4.4.3 Marking Up Computer Code Representation Using <code> and <pre>
- 4.4.4 Keyboard Input Using <kbd> and Program Output Using <samp>
- 4.4.5 Marking Up Text as a Definition Using <dfn>
- 4.4.6 Marking Up Text as a Variable Using <var>
- 4.4.7 Changing the Text Direction Using <bdo> and <bdi>
- 4.4.8 Emphasizing Text Using <em>, <strong>, <i>, and <b>
- 4.4.9 Highlighting Text Using <mark>
- 4.4.10 Placing Text between Quotes Using <q>
- 4.4.11 Underlining or Crossing Out Text Using <u> and <s>
- 4.4.12 Marking Changes of Text Using <ins> and <del>
- 4.4.13 Displaying Text as Superscript or Subscript Using <sup> and <sub>
- 4.4.14 Marking Dates and Times Using <time>
- 4.4.15 Marking the Small Print Using <small>
- 4.4.16 Using <ruby>, <rp>, and <rt> for Annotations about Pronunciation
- 4.4.17 Grouping Ranges of Individual Text Passages Using <span>
- 4.5 Related Topic: Character Encoding
- 4.5.1 From Bytes to Character Encoding
- 4.5.2 From ASCII to ISO-8859
- 4.5.3 Beyond the Byte Boundary with Unicode
- 4.6 Character Entities in HTML
- 4.6.1 Structure of a Character Entity in HTML
- 4.7 Summary
- 5 Tables and Hyperlinks
- 5.1 Structuring Data in a Table
- 5.1.1 A Simple Table Structure Using <table>, <tr>, <td>, and <th>
- 5.1.2 Combining Columns or Rows Using “colspan” or “rowspan”
- 5.1.3 HTML Attributes for the Table Elements
- 5.1.4 Structuring Tables Using <thead>, <tbody>, and <tfoot>
- 5.1.5 Grouping Columns of a Table Using <colgroup> and <col>
- 5.1.6 Labeling Tables Using <caption> or <figcaption>
- 5.2 Electronic References (Hyperlinks) Using <a>
- 5.2.1 Inserting Links to Other HTML Documents on Your Own Website
- 5.2.2 Inserting Links to Other Websites
- 5.2.3 Opening Links with the “target” Attribute in a New Window
- 5.2.4 Email Links with “href=mailto: . . .”
- 5.2.5 Setting Links to Other Types of Content
- 5.2.6 Adding Download Links Using the “download” Attribute
- 5.2.7 Setting Links to Specific Parts of a Web Page
- 5.2.8 Creating Links to Phone Numbers
- 5.2.9 HTML Attributes for the HTML Element <a>
- 5.3 Summary
- 6 Graphics and Multimedia
- 6.1 Embedding Images Using <img>
- 6.1.1 Adding Images to an HTML Document
- 6.1.2 Specifying the Height and Width of a Graphic
- 6.1.3 Labeling Images Using <figure> and <figcaption>
- 6.1.4 HTML Attributes for the HTML Element <img>
- 6.2 Creating Link-Sensitive Graphics (Image Maps)
- 6.2.1 Use HTML Attributes for the HTML Element <area>
- 6.2.2 Referencing Defined Areas of the HTML Element <area>
- 6.2.3 HTML Attributes of <area>
- 6.3 Loading the Appropriate Image Using <picture>
- 6.3.1 HTML Attributes of <source>
- 6.3.2 Multiple Image Sources with the HTML Attribute “srcset”
- 6.4 Adding an Icon for the Website (Favicon)
- 6.5 Using Vector Graphics in HTML Documents
- 6.5.1 Adding SVG as a Graphic Reference Using <img>
- 6.5.2 Embedding SVG Directly into the Web Page Using <svg>
- 6.5.3 SVG Tags for Vector Graphics
- 6.5.4 Overview of Graphical SVG Elements
- 6.5.5 Further Notes on Using SVG
- 6.5.6 Mathematical Formulas Using MathML
- 6.6 Drawing Graphics Using <canvas>
- 6.7 Playing Videos Using the HTML Element <video>
- 6.7.1 HTML Attributes for the HTML Element <video>
- 6.7.2 Adding Subtitles to a Video Using <track>
- 6.7.3 Playing Videos via YouTube
- 6.8 Playing Audio Files Using the HTML Element <audio>
- 6.8.1 HTML Attributes for the HTML Element <audio>
- 6.9 Including Other Active Content
- 6.9.1 HTML Element <embed>
- 6.9.2 HTML Element <object>
- 6.9.3 HTML Element <iframe>
- 6.10 Summary
- 7 HTML Forms and Interactive Elements
- 7.1 Defining a Space for Forms
- 7.2 HTML Input Fields for Forms
- 7.2.1 A Single-Line Text Input Field Using <input type=""text"">
- 7.2.2 A Password Input Field Using <input type=""password"">
- 7.2.3 A Multiline Text Input Field Using <textarea>
- 7.2.4 A Selection List or Dropdown List Using <select>
- 7.2.5 Creating a Group of Radio Buttons Using <input type=""radio"">
- 7.2.6 Adding a Text Label Using <label>
- 7.2.7 Using Checkboxes via <input type=""checkbox"">
- 7.2.8 Using Fields for File Uploads via <input type=""file"">
- 7.2.9 Overview of Various Buttons
- 7.2.10 Using a Hidden Input Field via <input type=""hidden"">
- 7.2.11 Writing Form Fields outside of <form>...</form>
- 7.2.12 Multiple Submit Buttons for Different URLs
- 7.3 Special Types of Input Fields
- 7.3.1 An Input Field for Colors Using <input type=""color"">
- 7.3.2 An Input Field for a Date Using <input type=""date"">
- 7.3.3 An Input Field for a Time Using <input type=""time"">
- 7.3.4 Input Fields for Date and Time
- 7.3.5 Input Fields for the Month and the Week
- 7.3.6 An Input Field for Searches Using <input type=""search"">
- 7.3.7 An Input Field for Email Addresses Using <input type=""email"">
- 7.3.8 An Input Field for a URL Using <input type=""url"">
- 7.3.9 An Input Field for Phone Numbers Using <input type=""tel"">
- 7.3.10 An Input Field for Numbers Using <input type=""number"">
- 7.3.11 An Input Field for Numbers of a Certain Range
- 7.3.12 Outputting Values and Calculations Using <output>
- 7.4 The HTML Attributes for Input Fields
- 7.4.1 Setting the Input Focus Using the HTML Attribute “autofocus”
- 7.4.2 (De)activating Autocompletion Using the “autocomplete” Attribute
- 7.4.3 A List of Suggestions for Using the HTML Attribute “list” and <datalist>
- 7.4.4 Specifying Minimum and Maximum Values and the Step Size
- 7.4.5 Selecting or Entering Multiple Values Using “multiple”
- 7.4.6 Regular Expressions for Input Fields Using “pattern”
- 7.4.7 A Placeholder for an Input Field Using “placeholder”
- 7.4.8 Defining an Input as Required Using the “required” Attribute
- 7.4.9 Controlling Error Messages for Input Fields
- 7.5 Other Useful Helpers for Input Fields
- 7.5.1 Disabling Form Elements Using the HTML Attribute “disabled”
- 7.5.2 Permitting Read-Only for Input Fields Using the “readonly” Attribute
- 7.5.3 Useful Keyboard Shortcuts and Tab Sequence for Input Fields
- 7.5.4 Grouping Form Elements Using <fieldset> and <legend>
- 7.5.5 Progress Display via <progress>
- 7.5.6 Visualizing Values Using <meter>
- 7.6 Sending Form Data Using PHP
- 7.6.1 Transferring the Data from the Web Browser for Further Processing
- 7.6.2 The “POST” Method
- 7.6.3 The “GET” Method
- 7.6.4 Processing the Data Using a PHP Script
- 7.7 Interactive HTML Elements
- 7.7.1 Expanding/Collapsing Content Using <details> and <summary>
- 7.7.2 A Dialog Box via <dialog>
- 7.8 Summary
- 8 Introduction to Cascading Style Sheets
- 8.1 The Story of CSS
- 8.2 The Basic Principle of Using CSS
- 8.2.1 Structure of a CSS Rule
- 8.2.2 Declaring a Selector
- 8.2.3 Using Comments for CSS Code
- 8.2.4 A Few Notes on Formatting CSS Code
- 8.3 Integrating CSS into HTML
- 8.3.1 Style Statements Directly in the HTML Tag Using the HTML Attribute “style”
- 8.3.2 Style Statements in the Document Head Using the HTML Element <style>
- 8.3.3 Integrating Style Statements from an External CSS File Using <link>
- 8.3.4 Combining CSS Rules in the Head Section and in External CSS Files
- 8.3.5 Recommendation: You Should Separate HTML and CSS
- 8.3.6 Testing Alternate Stylesheets during Development
- 8.3.7 Integrating Style Statements from an External CSS File Using “@import”
- 8.3.8 Media-Specific Stylesheets for Specific Output Devices
- 8.3.9 Media-Specific Stylesheets with CSS
- 8.4 Analyzing CSS in the Web Browser
- 8.5 Summary
- 9 The Selectors of CSS
- 9.1 The Simple Selectors of CSS
- 9.1.1 Addressing HTML Elements Using the Type Selector
- 9.1.2 Addressing HTML Elements Using a Specific Class or ID
- 9.1.3 Universal Selector: Addressing All Elements in a Document
- 9.1.4 Addressing Elements Based on Attributes Using the Attribute Selector
- 9.1.5 An Attribute Selector for Attributes with a Specific Value
- 9.1.6 Attribute Selector for Attributes with a Specific Partial Value
- 9.1.7 CSS Pseudo-Classes: The Selectors for Specific Features
- 9.1.8 The Convenient Structural Pseudo-Classes in CSS
- 9.1.9 Other Useful Pseudo-Classes
- 9.1.10 Pseudo-Elements: The Selectors for Nonexistent Elements
- 9.2 Combinators: Concatenating the Selectors
- 9.2.1 The Descendant Combinator (E1 E2)
- 9.2.2 The Child Combinator (E1 > E2)
- 9.2.3 The Adjacent Sibling Combinator (E1 + E2)
- 9.2.4 The General Sibling Combinator (E1 ~ E2)
- 9.3 Recommendation: How to Use Efficient and Simple CSS
- 9.3.1 How to Write Well Performing CSS
- 9.3.2 Recommendation: Keep the CSS Code as Simple as Possible
- 9.4 Summary
- 10 Inheritance and Cascading
- 10.1 The Principle of Inheritance in CSS
- 10.1.1 Be Cautious When Using Relative Properties
- 10.1.2 Not Everything Gets Inherited
- 10.1.3 Enforcing Inheritance Using “inherit”
- 10.1.4 Restoring the Default Value of a CSS Feature (“initial”)
- 10.1.5 Forcing Inheritance or Restoring a Value (""unset"")
- 10.1.6 Forcing Inheritance or Restoring Values for All Properties
- 10.2 Understanding the Control System for Cascading
- 10.2.1 The Origin of a Stylesheet
- 10.2.2 Increasing the Priority of a CSS Feature Using “!important”
- 10.2.3 Sorting by Importance and Origin
- 10.2.4 Sorting by Weighting the Selectors (Specificity)
- 10.2.5 Summary of the Cascading Rules System
- 10.2.6 Analyzing the Cascading in the Browser
- 10.3 Related Topic: Passing Values to CSS Features
- 10.3.1 Different Units of Measurement in CSS
- 10.3.2 Character Strings and Keywords as Values for CSS Features
- 10.3.3 Many Ways of Using a Color in CSS
- 10.3.4 Angular Dimensions in CSS
- 10.3.5 Passing Values via Short Notation to a CSS Feature
- 10.4 Summary
- 11 The Box Model of CSS
- 11.1 Classic Box Model of CSS
- 11.1.1 Specifying the Content Area Using “width” and “height”
- 11.1.2 Specifying the Inner Spacing Using “padding”
- 11.1.3 Creating the Border Using “border”
- 11.1.4 Setting Up the Outer Margin Using “margin”
- 11.1.5 Collapsing Margins
- 11.1.6 Determining the Total Width and Total Height of a Box
- 11.2 Newer Alternate Box Model of CSS
- 11.2.1 Using the “box-sizing” Box Model
- 11.2.2 Using the Alternate Box Model
- 11.3 Analyzing the Box Model in the Browser
- 11.4 Box Model for Inline Elements
- 11.5 Designing Boxes
- 11.5.1 Adding and Designing a Border Using the “border” Property
- 11.5.2 Setting a Background Color Using “background-color”
- 11.5.3 Using Background Images
- 11.5.4 Making Boxes Transparent
- 11.5.5 Adding a Gradient
- 11.5.6 Adding a Shadow Using the “box-shadow” Feature
- 11.5.7 Adding Round Corners Using the CSS Feature “border-radius”
- 11.6 Related Topic: Web Browser Prefixes (CSS Vendor Prefixes)
- 11.7 Summary
- 12 CSS Positioning
- 12.1 Positioning via CSS Feature “position”
- 12.1.1 Normal Positioning (“position: static”)
- 12.1.2 Positioning Elements Using “top”, “right”, “bottom”, and “left”
- 12.1.3 Relative Positioning (“position: relative”)
- 12.1.4 Absolute Positioning (“position: absolute”)
- 12.1.5 Fixed Positioning (“position: fixed”)
- 12.1.6 Sticky Positioning (“position: sticky”)
- 12.2 Controlling Stacking Using “z-index”
- 12.3 Floating Boxes for Positioning via “float”
- 12.3.1 Terminating the Float
- 12.3.2 Combining Floats into One Entity
- 12.4 Flexible Boxes of CSS
- 12.4.1 Aligning the Flexbox
- 12.4.2 Setting the Flexibility of the Flexbox
- 12.4.3 Determining the Order of the Boxes
- 12.5 Summary
- 13 Creating Responsive Layouts with CSS
- 13.1 Basic Theoretical Knowledge of Responsive Web Design
- 13.1.1 Using Specific Media Types
- 13.1.2 Media Queries for Media Features
- 13.1.3 Integrating and Applying Media Queries for Media Features
- 13.1.4 Basic Structure of a Media Feature Query
- 13.1.5 Which Media Features Can Be Queried?
- 13.1.6 Crucially Important: The Viewport for Mobile Devices
- 13.1.7 Use “em” Instead of Pixels for a Layout Break in Media Queries
- 13.1.8 Layout Breaks (Breakpoints)
- 13.1.9 No More Math Games Thanks to ""box-sizing: border-box;""
- 13.1.10 What Happens to Web Browsers That Don’t Understand Media Queries?
- 13.2 Let’s Create a Simple Responsive Layout
- 13.2.1 Let’s Create the Basic Framework Using HTML
- 13.2.2 Setting General CSS Features
- 13.2.3 What Should I Use as a Basic Version without Media Queries: Mobile First?
- 13.2.4 Setting the Layout Break (Breakpoint)
- 13.2.5 Adding More Layout Breaks
- 13.2.6 Customizing the Main Content
- 13.3 Even More Flexible Elements
- 13.3.1 Use Relative Font Sizes instead of Pixels
- 13.3.2 Making Images Responsive
- 13.3.3 Flexible Images in Maximum Possible Width
- 13.3.4 Hiding Images Entirely
- 13.3.5 Loading the Right Image for the Screen Width: <picture>
- 13.3.6 Using Area-Covering Images
- 13.4 CSS Grid Layout
- 13.4.1 Creating a Grid for the Content
- 13.4.2 Placing Elements in the Grid
- 13.4.3 Layout Changes Made Easy
- 13.4.4 Spacing between Grid Lines
- 13.4.5 Checking the Grid in the Web Browser
- 13.5 Changing the Behavior of HTML Elements Using “display”
- 13.5.1 “display: block”, “display: inline”, and “display: inline-block”
- 13.5.2 Hiding Elements Using “display:none”
- 13.5.3 Further Values for “display”
- 13.6 Calculations Using CSS and the “calc()” Function
- 13.7 Summary
- 14 Styling with CSS
- 14.1 Designing Texts with CSS
- 14.1.1 Selecting Fonts via “font-family”
- 14.1.2 Providing Fonts via Web Fonts: “@font-face”
- 14.1.3 Using Icons via Icon Fonts
- 14.1.4 Setting the Font Size Using “font-size”
- 14.1.5 Italic and Bold Fonts via “font-style” and “font-weight”
- 14.1.6 Creating Small Caps Using “font-variant”
- 14.1.7 Defining Line Spacing via “line-height”
- 14.1.8 A Short Notation for Font Formatting Using “font”
- 14.1.9 Specifying Letter and Word Spacing via “letter-spacing” and “word-spacing”
- 14.1.10 Setting the Text Alignment Using “text-align”
- 14.1.11 Setting the Vertical Alignment via “vertical-align”
- 14.1.12 Indenting Text Using “text-indent”
- 14.1.13 Underlining Text and Striking Text Through Using “text-decoration”
- 14.1.14 Uppercase and Lowercase Text via “text-transform”
- 14.1.15 Adding Shadow to Text via “text-shadow”
- 14.1.16 Splitting Text into Multiple Columns Using “column-count”
- 14.2 Designing Lists with CSS
- 14.2.1 Customizing Bullet Points Using “list-style-type”
- 14.2.2 Using Images as Bullets via “list-style-image”
- 14.2.3 Positioning Bulleted Lists via “list-style-position”
- 14.2.4 Short Notation “list-style” for Designing Lists
- 14.2.5 Creating Navigation and Menus via Lists
- 14.3 Designing Appealing Tables with CSS
- 14.3.1 Creating Fixed-Width Tables
- 14.3.2 General Recommendation: Designing Appealing Tables with CSS
- 14.3.3 Collapsing Borders for Table Cells Using “border-collapse”
- 14.3.4 Setting the Spacing between Cells via “border-spacing”
- 14.3.5 Displaying Empty Table Cells Using “empty-cells”
- 14.3.6 Positioning Table Captions via “caption-side”
- 14.4 Adjusting Images and Graphics Using “width” and “height”
- 14.5 Transforming Elements with CSS
- 14.5.1 Scaling HTML Elements via “transform: scale()”
- 14.5.2 Rotating HTML Elements Using “transform: rotate()”
- 14.5.3 Skewing HTML Elements Using “transform: skew()”
- 14.5.4 Moving HTML Elements Using “transform: translate()”
- 14.5.5 Combining Different Transformations
- 14.5.6 Other HTML Elements
- 14.6 Creating Transitions with CSS
- 14.7 Styling HTML Forms with CSS
- 14.7.1 Neatly Structuring an HTML Form
- 14.7.2 Aligning Form Elements with CSS
- 14.7.3 Designing Form Elements with CSS
- 14.8 Summary
- 15 Testing and Organizing
- 15.1 Web Browser Tests: What’s Possible?
- 15.1.1 Validating HTML and CSS
- 15.1.2 Which Browsers Are Visitors Currently Using?
- 15.1.3 CSS Web Browser Test
- 15.1.4 HTML5 Web Browser Test
- 15.1.5 Can I Use That?
- 15.1.6 Feature Query Using the “@supports” Rule
- 15.2 Viewing Websites in Different Sizes
- 15.3 Setting Up a Central Stylesheet
- 15.3.1 Combining Everything Back into One File to Shorten the Load Time
- 15.4 CSS Reset or Normalization?
- 15.4.1 Built-In Style Presets of the Web Browser and CSS Reset
- 15.4.2 Normalization: The Alternative to CSS Reset
- 15.5 Summary
- 16 The CSS Preprocessor Sass and SCSS
- 16.1 Sass or SCSS Syntax
- 16.2 From Sass/SCSS to CSS
- 16.3 Installing and Setting Up Sass
- 16.3.1 Online CSS Preprocessor without Installation
- 16.3.2 Setting Up Sass Using Visual Studio Code
- 16.3.3 Installing Sass for the Command Line
- 16.4 Using Variables with Sass
- 16.5 Nesting with Sass
- 16.6 Mixins (“@mixin”, “@include”)
- 16.7 Extend (“@extend”)
- 16.8 Media Queries and “@content”
- 16.9 Operators
- 16.10 Adjusting Colors and Brightness
- 16.11 Sass Control Structures
- 16.12 Functions “@function”
- 16.13 “@import”
- 16.14 Comments
- 16.15 Summary
- 17 A Brief Introduction to JavaScript
- 17.1 JavaScript in Web Development
- 17.2 Writing and Executing JavaScript Programs
- 17.2.1 Integrating a JavaScript File in an HTML File
- 17.2.2 Writing JavaScript within HTML
- 17.2.3 Position of JavaScript and Its Execution in the HTML Document
- 17.2.4 Attributes for Manipulating the Load Behavior of JavaScript (“async”, “defer”)
- 17.2.5 The <noscript> Element for No JavaScript
- 17.3 JavaScript Output
- 17.3.1 Standard Dialogs (and Input Dialog)
- 17.3.2 Outputting to the Console
- 17.3.3 Outputting to the Website
- 17.3.4 Running JavaScript without a Web Browser
- 17.3.5 Annotating JavaScript Code with Comments
- 17.4 Using Variables in JavaScript
- 17.4.1 Defining Constants
- 17.4.2 Strict Mode Using “""use strict""”
- 17.5 Overview of JavaScript Data Types
- 17.5.1 Number Data Type (Numbers)
- 17.5.2 String Data Types (Strings)
- 17.5.3 Template Strings
- 17.5.4 Boolean Data Type
- 17.5.5 Undefined and Null Data Types
- 17.5.6 Objects
- 17.5.7 Converting Data Types
- 17.6 Arithmetic Operators for Calculation Tasks in JavaScript
- 17.7 Conditional Statements in JavaScript
- 17.7.1 “true” or “false”: Boolean Truth Value
- 17.7.2 Using the Various Comparison Operators in JavaScript
- 17.7.3 Using the “if” Branch
- 17.7.4 Using the Selection Operator
- 17.7.5 Logical Operators
- 17.7.6 Multiple Branching via “switch”
- 17.8 Multiple Repetitions of Program Statements via Loops
- 17.8.1 Increment and Decrement Operators
- 17.8.2 The Header-Controlled “for” Loop
- 17.8.3 The Header-Controlled “while” Loop
- 17.8.4 The Footer-Controlled “do-while” Loop
- 17.8.5 Ending the Statement Block Using “break”
- 17.8.6 Jumping to the Start of the Loop via “continue”
- 17.9 Summary
- 18 Arrays, Functions, and Objects in JavaScript
- 18.1 Functions in JavaScript
- 18.1.1 Different Ways to Define a Function in JavaScript
- 18.1.2 Calling Functions and Function Parameters
- 18.1.3 Return Value of a Function
- 18.1.4 The Scope of Variables in a Function
- 18.1.5 Defining Functions in Short Notation (Arrow Functions)
- 18.1.6 Using a Function in a Web Page
- 18.2 Arrays
- 18.2.1 Accessing the Individual Elements in the Array
- 18.2.2 Multidimensional Arrays
- 18.2.3 Adding or Removing New Elements in an Array
- 18.2.4 Sorting Arrays
- 18.2.5 Searching within Arrays
- 18.2.6 Additional Methods for Arrays
- 18.3 Strings and Regular Expressions
- 18.3.1 Useful Functions for Strings
- 18.3.2 Applying Regular Expressions to Strings
- 18.4 Object-Oriented Programming in JavaScript
- 18.4.1 What Exactly Are Objects?
- 18.4.2 Creating Objects via Constructor Functions
- 18.4.3 Creating Objects via the Class Syntax
- 18.4.4 Accessing the Object Properties and Methods: Setters and Getters
- 18.4.5 The Keyword “this”
- 18.5 Other Global Objects
- 18.5.1 The Top Object “Object”
- 18.5.2 Objects for the Primitive Data Types: Number, String, and Boolean
- 18.5.3 “Function” Object
- 18.5.4 “Date” Object
- 18.5.5 “Math” Object
- 18.5.6 “Map” Object
- 18.5.7 “Set” Object
- 18.6 Summary
- 19 Changing Web Pages Dynamically
- 19.1 Introduction to the DOM of an HTML Document
- 19.2 The “document” Object
- 19.3 DOM Programming Interface
- 19.4 Accessing Elements in the DOM
- 19.4.1 Finding an HTML Element with a Specific “id” Attribute
- 19.4.2 Finding HTML Elements with a Specific Tag Name
- 19.4.3 Finding HTML Elements with a Specific “class” Attribute
- 19.4.4 Finding HTML Elements with a Specific “name” Attribute
- 19.4.5 Using “querySelector()” and “querySelectorAll()”
- 19.4.6 Other Object and Property Collections
- 19.5 Changing an HTML Element, an Attribute, or the Style
- 19.5.1 Changing the Content of HTML Elements Using “innerHTML”
- 19.5.2 Changing the Value of an HTML Attribute
- 19.5.3 Changing the Style (CSS) of an HTML Element
- 19.6 Responding to JavaScript Events
- 19.7 Handling the Events Using the Event Handler
- 19.7.1 Setting Up an Event Handler as an HTML Attribute in the HTML Element
- 19.7.2 Setting Up Event Handlers as a Property of an Object
- 19.7.3 Setting Up an Event Handler via “addEventListener()”
- 19.8 Overview of Common JavaScript Events
- 19.8.1 The JavaScript Events of the UI (Window Events)
- 19.8.2 JavaScript Events That Can Occur in Connection with the Mouse
- 19.8.3 JavaScript Events for Devices with a Touchscreen
- 19.8.4 JavaScript Events That Occur in Connection with the Keyboard
- 19.8.5 JavaScript Events for HTML Forms
- 19.8.6 JavaScript Events for the Web APIs
- 19.9 More Information about Events with the “event” Object
- 19.10 Suppressing the Default Action of Events
- 19.11 The Event Flow (Event Propagation)
- 19.11.1 More about the Bubbling Phase
- 19.11.2 Canceling Bubbling via the “stopPropagation()” Method
- 19.11.3 Intervening in the Event Flow during the Capturing Phase
- 19.11.4 Additional Information on the Capturing and Bubbling Phases
- 19.12 Adding, Changing, and Removing HTML Elements
- 19.12.1 Creating and Adding a New HTML Element and Content
- 19.12.2 Targeting HTML Elements Even More Exactly in the DOM Tree
- 19.12.3 Adding a New HTML Element Even More Targeted to the DOM Tree
- 19.12.4 Deleting an Existing HTML Element from the DOM Tree
- 19.12.5 Replacing an HTML Element in the DOM Tree with Another One
- 19.12.6 Cloning a Node or Entire Fragments of the DOM Tree
- 19.12.7 Different Methods to Manipulate the HTML Attributes
- 19.12.8 The <template> HTML Tag
- 19.13 HTML Forms and JavaScript
- 19.13.1 Reading Text Input Fields with JavaScript
- 19.13.2 Reading Selection Lists with JavaScript
- 19.13.3 Reading Radio Buttons and Checkboxes with JavaScript
- 19.13.4 Intercepting Buttons with JavaScript
- 19.13.5 Controlling the Progress Indicator <progress> with JavaScript
- 19.14 Summary
- 20 An Introduction to Ajax
- 20.1 An Introduction to Ajax Programming
- 20.1.1 A Simple Ajax Example in Execution
- 20.1.2 Creating the “XMLHttpRequest” Object
- 20.1.3 Making a Request to the Server
- 20.1.4 Sending Data
- 20.1.5 Determining the Status of the “XMLHttpRequest” Object
- 20.1.6 Processing the Response from the Server
- 20.1.7 The Ajax Example during Execution
- 20.1.8 A More Complex Ajax Example with XML and DOM
- 20.1.9 The JSON Data Format with Ajax
- 20.2 Summary
- The Author
- Index
