Diego Gauchat Juan - El gran libro de HTML5, CSS3 y Javascript

El gran libro de HTML5, CSS3 y Javascript

Segunda edición, 2013

© 2013 Juan Diego Gauchat

© 2013 MARCOMBO, S.A.

www.marcombo.com

Los códigos fuente para este libro se encuentran disponibles en www.minkbooks.com.

«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra».

ISBN: 978-84-267-2064-1

Dedicado a aquellos que ya no están a mi lado.

Introducción

1. Documentos HTML5

1.1 Componentes básicos

1.2 Una breve introducción a HTML

1.2.1 Etiquetas y elementos

1.2.2 Atributos

1.2.3 Elementos anteriores

1.3 Estructura global

1.3.1

1.3.2

1.3.3

1.3.4

1.3.5

1.3.6

1.3.7

1.4 La estructura del cuerpo del documento

1.4.1 Organización

1.4.2

1.4.3

1.4.4

1.4.5

1.4.6

1.5 En el interior del cuerpo

1.5.1

1.5.2

1.5.3 y

1.5.4 y

1.6 Elementos nuevos y elementos antiguos

1.6.1

1.6.2

1.6.3

1.6.4

1.6.5

1.6.6

1.6.7

1.7 Nuevos atributos y viejos atributos

1.7.1 El atributo data–*

1.7.2 reversed

1.7.3 pingy download

1.7.4 translate

1.7.5 contenteditable

1.7.6 Spellcheck

2. Estilos CSS y modelos de caja

2.1 CSS y HTML

2.2 Breve introducción a CSS

2.2.1 Reglas CSS

2.2.2 Propiedades

2.2.3 Estilos en línea

2.2.4 Estilos incrustados

2.2.5 Archivos externos

2.2.6 Referencias

2.2.7 Selectores nuevos

2.3 Aplicar CSS a nuestro documento

2.3.1 Modelos de caja

2.4 Modelo de caja tradicional

2.4.1 Documento HTML

2.4.2 Selector universal ( *)

2.4.3 Títulos

2.4.4 Declaración de nuevos elementos HTML5

2.4.5 Centrar el cuerpo

2.4.6 Creación de la caja principal

2.4.7 La cabecera

2.4.8 Barra de navegación

2.4.9 Área principal y Barra lateral

2.4.10 Pie de página

2.4.11 Toques finales

2.4.12 box-sizing

2.5 Modelo de caja flexible

2.5.1 Contenedor flexible

2.5.2 Documento HTML

2.5.3 Display

2.5.4 Ejes

2.5.5 Propiedad Flex

2.5.6 flex-direction

2.5.7 order

2.5.8 justify-content

2.5.9 align-items

2.5.10 align-self

2.5.11 flex-wrap

2.5.12 align-content

3. Propiedades CSS3

3.1 Las nuevas reglas

3.1.1 CSS3 ha enloquecido

3.1.2 Documento HTML

3.1.3 border-radius

3.1.4 box-shadow

3.1.5 text-shadow

3.1.6 @font-face

3.1.7 linear-gradient

3.1.8 radial-gradient

3.1.9 rgb

3.1.10 hsla

3.1.11 outline

3.1.12 border-image

3.1.13 background

3.1.14 Columnas

3.2 Transformar

3.2.1 transform: scale

3.2.2 transform: rotate

3.2.3 transform: skew

3.2.4 transform: translate

3.2.5 Transformar todo en un elemento

3.2.6 Transformaciones dinámicas

3.2.7 Transformaciones 3D

3.3 Transiciones

3.4 Animaciones

4 Javascript

4.1 Breve introducción a Javascript

4.1.1 El lenguaje

4.1.2 Variables

4.1.3 Condicionales y bucles

4.1.4 Objetos

4.1.5 Constructores

4.1.6 El objeto Window

4.1.7 El objeto Document

4.2 Una introducción a los eventos

4.2.1 Atributos de eventos

4.2.2 Propiedades del evento

4.2.3 El método addEventListener()

4.3 Incorporar Javascript

4.3.1 En línea

4.3.2 Incrustado

4.3.3 Desde un archivo externo

4.4 Nuevos selectores

4.4.1 querySelector()

4.4.2 querySelectorAll()

4.4.3 matchesSelector()

4.5 Interactuar con el documento

4.5.1 Estilos Javascript

4.5.2 ClassList

4.5.3 Acceder a los atributos

4.5.4 dataset

4.5.5 Crear y borrar elementos

4.5.6 innerHTML, outerHtmle insertAdjacentHTML

4.6 Las API

4.6.1 API nativas

4.6.2 API externas

4.7 Errores y depuración

4.7.1 Consola

4.7.2 console.log()

4.7.3 Evento error

5 Formularios

5.1 Formularios HTML

5.1.1 El elemento

5.1.2. El elemento

5.1.3 Más elementos de formulario

5.1.4 Enviar un formulario

5.2 Nuevos tipos de entrada

5.2.1 Tipo email

5.2.2 Tipo search

5.2.3 Tipo url

5.2.4 Tipo tel

5.2.5 Tipo number

5.2.6 Tipo range

5.2.7 Tipo date

5.2.8 Tipo week

5.2.9 Tipo month

5.2.10 Tipo time

5.2.11 Tipo datetime

5.2.12 Tipo datetime-local

5.2.13 Tipo color

5.3 Nuevos atributos

5.3.1 Atributo autocomplete

5.3.2 Atributos novalidatey formnovalidate

5.3.3 Atributo placeholder

5.3.4 Atributo required

5.3.5 Atributo multiple

5.3.6 Atributo autofocus

5.3.7 Atributo pattern

5.3.8 Atributo form

5.4 Nuevos elementos de los formularios

5.4.1 El elemento

En primer lugar, es necesario que indicar el tipo de documento que se va a crear, porque los navegadores son capaces de procesar diferentes tipos de archivos. Para asegurarse de que el documento sea interpretado como código HTML de forma correcta, es necesario declarar el tipo de documento al principio del mismo. En HTML5 es simple:

Código 1-3

Uso del elemento .

Tenga en cuenta que esta línea debe ser la primera línea de su archivo y que no debe haber espacios ni líneas antes de ella. De esta forma se activa un modo y se fuerza a los navegadores a interpretar HTML5 si es posible, o ignorarlo si no es el caso.

Hágalo usted mismo