├── 9-Tables
    ├── Screen Shot 2019-06-20 at 10.18.17.png
    ├── Screen Shot 2019-06-20 at 10.24.08.png
    ├── Screen Shot 2019-06-20 at 10.26.15.png
    ├── Screen Shot 2019-06-20 at 10.27.59.png
    ├── Screen Shot 2019-06-20 at 10.29.37.png
    ├── Screen Shot 2019-06-20 at 10.49.16.png
    └── Screen Shot 2019-06-20 at 10.52.41.png
├── 6-Tags-that-interact-with-text
    ├── Screen Shot 2019-06-11 at 19.46.57.png
    ├── Screen Shot 2019-06-12 at 08.43.55.png
    ├── Screen Shot 2019-06-12 at 09.35.05.png
    └── Screen Shot 2019-06-12 at 09.45.21.png
├── README.md
├── LICENSE
├── 7-Links.md
├── 5-The-document-body.md
├── 1-Prefacio.md
├── 2-Introduction.md
├── 8-Container-structure-tags.md
├── 11-audio-and-video.md
├── 12-iframes.md
├── 13-Images.md
├── 10-Tables.md
├── 6-Tags-that-interact-with-text.md
├── 14-Accessibility.md
├── 3-HTML-Basics.md
├── 4-The-document-heading.md
└── 9-Forms.md


/9-Tables/Screen Shot 2019-06-20 at 10.18.17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/9-Tables/Screen Shot 2019-06-20 at 10.18.17.png


--------------------------------------------------------------------------------
/9-Tables/Screen Shot 2019-06-20 at 10.24.08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/9-Tables/Screen Shot 2019-06-20 at 10.24.08.png


--------------------------------------------------------------------------------
/9-Tables/Screen Shot 2019-06-20 at 10.26.15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/9-Tables/Screen Shot 2019-06-20 at 10.26.15.png


--------------------------------------------------------------------------------
/9-Tables/Screen Shot 2019-06-20 at 10.27.59.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/9-Tables/Screen Shot 2019-06-20 at 10.27.59.png


--------------------------------------------------------------------------------
/9-Tables/Screen Shot 2019-06-20 at 10.29.37.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/9-Tables/Screen Shot 2019-06-20 at 10.29.37.png


--------------------------------------------------------------------------------
/9-Tables/Screen Shot 2019-06-20 at 10.49.16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/9-Tables/Screen Shot 2019-06-20 at 10.49.16.png


--------------------------------------------------------------------------------
/9-Tables/Screen Shot 2019-06-20 at 10.52.41.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/9-Tables/Screen Shot 2019-06-20 at 10.52.41.png


--------------------------------------------------------------------------------
/6-Tags-that-interact-with-text/Screen Shot 2019-06-11 at 19.46.57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/6-Tags-that-interact-with-text/Screen Shot 2019-06-11 at 19.46.57.png


--------------------------------------------------------------------------------
/6-Tags-that-interact-with-text/Screen Shot 2019-06-12 at 08.43.55.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/6-Tags-that-interact-with-text/Screen Shot 2019-06-12 at 08.43.55.png


--------------------------------------------------------------------------------
/6-Tags-that-interact-with-text/Screen Shot 2019-06-12 at 09.35.05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/6-Tags-that-interact-with-text/Screen Shot 2019-06-12 at 09.35.05.png


--------------------------------------------------------------------------------
/6-Tags-that-interact-with-text/Screen Shot 2019-06-12 at 09.45.21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zetta102/html-handbook-es/HEAD/6-Tags-that-interact-with-text/Screen Shot 2019-06-12 at 09.45.21.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # El Manual de HTML
 2 | Traducción al español del libro open source [The HTML Handbook](https://github.com/flaviocopes/html-handbook), escrito por Flavio Copes.
 3 | 
 4 | Este repositorio contendrá la traducción al español del Manual de HTML.
 5 | 
 6 | Todos los comentarios son bienvenidos, sin embargo, serían especialmente útiles los siguientes:
 7 | 
 8 | * ¿Se me olvidó agregar/traducir algo importante?
 9 | * ¿Alguna explicación es demasiado complicada?
10 | * ¿Agregué/traduje información irrelevante?
11 | * ¿Hay errores de tipeo/escritura?
12 | 
13 | Todas las PRs son bienvenidas siempre y cuando sea para este tipo de comentarios.
14 | 
15 | ¡Muchas gracias por leerme!
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 zetta102
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/7-Links.md:
--------------------------------------------------------------------------------
 1 | # Enlaces
 2 | 
 3 | Los enlaces son definidos usando la etiqueta `a`. El destino del enlace estará en su atributo `href`.
 4 | 
 5 | Ejemplo:
 6 | 
 7 | ```html
 8 | <a href="https://flaviocopes.com">haz click aquí</a>
 9 | ``
10 | 
11 | Entre la etiqueta de apertura y de clausura tendremos el texto del enlace.
12 | 
13 | El ejemplo de arriba es una dirección absoluta, aunque los enlaces también sirven con direcciones relativasThe above example is an absolute URL. Links also work with relative URLs:
14 | 
15 | ```html
16 | <a href="/test">haz click aquí</a>
17 | ```
18 | 
19 | En este caso, al hacer click en el enlace, el usuario es movido a la dirección `/test`, partiendo desde el punto actual.
20 | 
21 | Tenga cuidado con el caracter '/'. Si es omitido, en lugar de comenzar desde la raíz, el navegador solo agregará la palabra 'test' a la dirección actual.
22 | 
23 | Por ejemplo, si estoy en la página `https://flaviocopes.com/axios/` y tengo los enlaces `/test` y `test`:
24 | 
25 | - `/test` me llevará a `https://flaviocopes.com/test`
26 | - `test` me llevará a `https://flaviocopes.com/axios/test`
27 | 
28 | Las etiquetas de enlace pueden contener otras cosas dentro aparte del texto. Por ejemplo, imágenes:
29 | 
30 | ```html
31 | <a href="https://flaviocopes.com">
32 | 	<img src="test.jpg">
33 | </a>
34 | ```
35 | 
36 | o cualquier otro elemento, excepto otras etiquetas `a`.
37 | 
38 | 
39 | Si desea que el enlace se abra en una nueva ventana, puede usar el atributo `target`:
40 | 
41 | ```html
42 | <a href="https://flaviocopes.com" target="_blank">abrir en nueva ventana</a>
43 | ```
44 | 


--------------------------------------------------------------------------------
/5-The-document-body.md:
--------------------------------------------------------------------------------
 1 | # La etiqueta ´body´
 2 | 
 3 | Después de cerrar la etiqueta ´head´, solo podemos tener una etiqueta más en un documento HTML: el elemento `body`.
 4 | 
 5 | ```html
 6 | <!DOCTYPE html>
 7 | <html>
 8 | 	<head>
 9 | 		...
10 | 	</head>
11 | 	<body>
12 | 		...
13 | 	</body>
14 | </html>
15 | ```
16 | 
17 | Tal como las etiquetas `head` y `html`, solo podemos tener una etiqueta ´body´ en una página.
18 | 
19 | Dentro de la etiqueta `body` tenemos todas las etiquetas que definen el contenido de la página.
20 | 
21 | Técnicamente, las etiquetas de apertura y clausura son opcionales, pero considero que es una buena práctica agregarlas solo por cuestiones de claridad.
22 | 
23 | En los próximos capítulos definiremos la variedad de etiquetas que se pueden usar dentro del cuerpo de la página.
24 | 
25 | Pero antes, debemos presentar la diferencia entre elementos de bloque y elementos de línea.
26 | 
27 | ## Bloques o líneas
28 | 
29 | Los elementos visuales, que están definindos en el cuerpo de la página, pueden ser generalmente clasificados en dos categorías:
30 | 
31 | - elementos en bloque (`p`, `div`, listas y sus objetos, ...)
32 | - elementos en línea (`a`, `span`, `img`, ...)
33 | 
34 | ¿Cuál es la diferencia?
35 | 
36 | Los elementos en bloque, al posicionarse en la página, no permiten otros elementos cerca de ellos,. ya sea a la derecha o izquierda.
37 | 
38 | Los elementos en línea, en su lugar, pueden estar cerca de otros elementos en línea.
39 | 
40 | La diferencia también yace en las propiedades visuales que podemos editar usando CSS. Podemos alterar la altura/anchura, margen interno/externo y el borde de los elementos en bloque, mientras que no podemos en el caso de los bloques en línea.
41 | 
42 | > Nótese que usar CSS permite cambiar los valores por defecto de los elementos, haciendo que una etiqueta `p` esté en línea, o que un elemento `span` esté en bloque.
43 | 
44 | Otra diferencia es que los elementos en línea pueden estar dentro de elementos en bloque, pero no al revés.
45 | 
46 | Algunos elementos en bloque pueden contener otros elementos en bloque, pero depende de cada caso. La etiqueta `p`, por ejemplo, no permite tal opción.
47 | 


--------------------------------------------------------------------------------
/1-Prefacio.md:
--------------------------------------------------------------------------------
 1 | # Prefacio del autor
 2 | 
 3 | HTML es la base de la maravilla que hoy conocemos como la Web.
 4 | 
 5 | Hay un increíble poder bajo este relativamente simple y limitado conjunto de reglas, que nos permite crear documentos, aplicaciones y experiencias para personas alrededor del mundo.
 6 | 
 7 | Mi primer libro de HTML (refiriéndose al autor original) fue lanzado en 1997 y se llamaba "HTML Unleashed". Un tomo largo, grande y de muchas páginas.
 8 | 
 9 | 20+ años han pasado desde entonces, y HTML es todavía la base de la web tal y como la conocemos hoy en día, con cambios mínimos desde entonces.
10 | 
11 | Sí, tenemos nuevas etiquetas semánticas, se dejó de usar HTML para dar estilos, y CSS ha tomado las riendas del diseño.
12 | 
13 | Pero el éxito de HTML se basa en una sola cosa: **su sencillez**.
14 | 
15 | Resistió su transformación a un dialecto de XML por medio de XHTML, cuando, eventualmente, la gente se dió cuenta que era demasiado complejo.
16 | 
17 | Logró hacerlo gracias a otra de sus funciones: **su flexibilidad**. Aunque hay *algunas* reglas, después de aprenderlas el usuario tiene mucha libertad para programar.
18 | 
19 | Los navegadores de internet aprendieron a ser resilientes y a intentar hacer lo mejor al presentar código HTML a sus usuarios.
20 | 
21 | Y había algo que la plataforma Web hacía muy bien: siempre funcionaba con documentos antiguos. Por increíble que sea, podemos ir hoy en día a documentos HTML escritos en 1991, y se ven prácticamente iguales a como se veían en aquel entonces.
22 | 
23 | Incluso sabemos cuál fue la primera página. Es ésta: http://info.cern.ch/hypertext/WWW/TheProject.html.
24 | 
25 | Y puedes ver su código fuente ya que, gracias a otra gran función de HTML, **podemos inspeccionar el código HTML de cualquier página web**.
26 | 
27 | Sin embargo, no crea que es algo común. No conozco otra plataforma que nos dé ésta habilidad.
28 | 
29 | Las excepcionales Herramientas de Desarrollador incluidas en cualquier navegador nos permiten tomar inspiración de cualquier documento HTML escrito por cualquier persona del mundo.
30 | 
31 | Si recién aprendes sobre HTML, este libro apunta a darte una mano en tu aprendizaje. Si eres un desarrollador web experimentado, este libro mejorará tus conocimientos.
32 | 
33 | Aprendí mucho al escribirlo, a pesar que llevo trabajando en la web más de 20 años, y estoy seguro que usted también aprenderá algo nuevo.
34 | 
35 | ...O tal vez vuelva a aprender algo que había olvidado.
36 | 
37 | De cualquier manera, la finalidad del libro es que le sea útil, y espero tenga éxito en su misión.
38 | 


--------------------------------------------------------------------------------
/2-Introduction.md:
--------------------------------------------------------------------------------
 1 | # Introducción
 2 | 
 3 | HTML es un estándar definido por el **WHATWG**, un acrónimo para Web Hypertext Application Technology Working Group, una organización formada por gente trabajando en los navegadores web más populares. Básicamente significa que está controlado por Google, Mozilla, Apple y Microsoft.
 4 | 
 5 | En el pasado, el **W3C** (Consorcio World Wide Web) era la organización a cargo de crear el estándar HTML.
 6 | 
 7 | El control del mismo pasó del W3C al WHATWG cuando quedó claro que la inclinación del W3C hacia el XHTML no era una buena idea.
 8 | 
 9 | Si nunca has escuchado de XHTML, acá tienes una historia corta. A principios de los 2000, todos creíamos que el futuro del internet era XML (en serio). Así que HTML pasó de ser un lenguaje de marcado basado en SMGL a un lenguaje de marcado XML.
10 | 
11 | Era un cambio bastante grande. Teníamos que conocer y respetar más reglas, siendo estas también más estrictas.
12 | 
13 | Eventualmente, las empresas detrás de los navegadores se dieron cuenta que no era el camino a tomar, creando lo que es ahora conocido como HTML5.
14 | 
15 | El W3C no cedió al principio el control de HTML, y por años tuvimos dos estándares competidores, cada uno buscando ser el oficial. El 28 de mayo de 2019, eventualmente, se hizo oficial por medio del W3C que la "verdadera" versión de HTML era la publicada por WHATWG.
16 | 
17 | Mencioné HTML5, así que tengo otra pequeña historia. Lo sé, es un poco confuso hasta ahora, como con cualquier cosa en la vida en la que hay muchos actores en juego, pero es igual de fascinante.
18 | 
19 | Tuvimos la **versión 1 de HTML** en 1993. [Acá está el RFC original](https://tools.ietf.org/html/rfc1983).
20 | 
21 | **HTML 2** apareció en 1995.
22 | 
23 | Tuvimos **HTML 3** en enero de 1997, y **HTML 4** en diciembre del mismo año.
24 | 
25 | ¡Tiempos ajetreados!
26 | 
27 | Más de 20 años pasaron y tuvimos esta cosa del XHTML, y eventualmente terminamos teniendo HTML5, que ya no es _simplemente HTML_.
28 | 
29 | HTML5 es ahora un término que define un conjunto entero de tecnologías, las cuales incluyen a HTML, pero también así a un montón de APIs y estándares como WebGL, SVG y más.
30 | 
31 | Es importante entender que ahora ya no existe una cosa tal como una versión HTML. Es ahora un estándar viviente como CSS, que es llamado "3", pero es en realidad un montón de módulos independientes desarrollados por separado, justo como JavaScript, donde tenemos cada año una nueva edición. Sin embargo, lo único que importa son las características individuales que son implementadas por el motor.
32 | 
33 | Sí, lo llamamos HTML5, pero HTML4 viene de 1997. Para cualquier cosa eso es un montón de tiempo, aún más para el área de tecnologia.
34 | 
35 | La definición del estándar ahora "vive" en [https://html.spec.whatwg.org/multipage](https://html.spec.whatwg.org/multipage).
36 | 


--------------------------------------------------------------------------------
/8-Container-structure-tags.md:
--------------------------------------------------------------------------------
  1 | # Etiquetas de contenedor y estructura de página
  2 | 
  3 | ## Etiquetas de contenedor
  4 | 
  5 | HTML provee un conjunto de etiquetas contenedor. Estas etiquetas contienen un conjunto no especificado de otras etiquetas.
  6 | 
  7 | Tenemos:
  8 | 
  9 | - `article`
 10 | - `section`
 11 | - `div`
 12 | 
 13 | y puede ser difícil entender la diferencia entre ellas.
 14 | 
 15 | Veamos cuándo usar cada una de ellas.
 16 | 
 17 | ### `article`
 18 | 
 19 | Esta etiqueta identifica una *cosa* que puede ser independiente de otras *cosas* en una página.
 20 | 
 21 | Por ejemplo, una lista de posts en la página principal.
 22 | 
 23 | O una lista de enlaces.
 24 | 
 25 | ```html
 26 | <div>
 27 | 	<article>
 28 | 		<h2>Un post</h2>
 29 | 		<a ...>Leer más</a>
 30 | 	</article>
 31 | 	<article>
 32 | 		<h2>Otro post</h2>
 33 | 		<a ...>Leer más</a>
 34 | 	</article>
 35 | </div>
 36 | ```
 37 | 
 38 | El límite no son solo las listas: un articulo puede ser el elemento principal de una página.
 39 | 
 40 | ```html
 41 | <article>
 42 | 	<h2>Un post</h2>
 43 | 	<p>Contenido...</p>
 44 | </article>
 45 | ```
 46 | 
 47 | Dentro de una etiqueta `article` deberíamos tener un título (`h1`-`h6`) y una
 48 | 
 49 | ### `section`
 50 | 
 51 | Representa una sección de un documento. Cada sección tiene una etiqueta de encabezado (`h1`-`h6`), y luego la sección del _cuerpo_.
 52 | 
 53 | Ejemplo:
 54 | 
 55 | ```html
 56 | <section>
 57 | 	<h2>Una sección de la página</h2>
 58 | 	<p>...</p>
 59 | 	<img ...>
 60 | </section>
 61 | ```
 62 | 
 63 | Es útil dividir un artículo largo en diferentes **secciones**.
 64 | 
 65 | No debería usarse como un elemento contenedor génerico, ya que ese es el trabajo de `div`.
 66 | 
 67 | ### `div`
 68 | 
 69 | `div` es el elemento contenedor genérico:
 70 | 
 71 | ```html
 72 | <div>
 73 | 	...
 74 | </div>
 75 | ```
 76 | 
 77 | Se suele agregar un atributo `class` o `id` a este elemento, para poder modelarlo con CSS.
 78 | 
 79 | Usamos `div` en cualquier lugar que necesitemos un contenedor, pero que las etiquetas existentes no se ajusten lo suficiente.
 80 | 
 81 | ## Etiquetas relacionadas con la página
 82 | 
 83 | ### `nav`
 84 | 
 85 | Está etiqueta es usada para crear el esqueleto que define la navegación de página. Dentro de ella suele agregarse una lista `ul` u `ol`:
 86 | 
 87 | ```html
 88 | <nav>
 89 | 	<ol>
 90 | 		<li><a href="/">Home</a></li>
 91 | 		<li><a href="/blog">Blog</a></li>
 92 | 	</ol>
 93 | </nav>
 94 | ```
 95 | 
 96 | ### `aside`
 97 | 
 98 | La etiqueta `aside` es usada para agregar una pieza de contenido que está relacionado al contenido principal.
 99 | 
100 | Una caja en la cual agregar una cita, por ejemplo. O una barra lateral.
101 | 
102 | Ejemplo:
103 | 
104 | ```html
105 | <div>
106 |   <p>algún texto..</p>
107 |   <aside>
108 |     <p>Una cita..</p>
109 |   </aside>
110 |   <p>otro texto...</p>
111 | </div>
112 | ```
113 | 
114 | Usar `aside` permite señalar que las cosas que contiene no son parte del flujo regular del documento.
115 | 
116 | ### `header`
117 | 
118 | La etiqueta `header` representa la introducción (o también el resumen) de una página. Puede, por ejemplo, contener una o más etiquetas de encabezado (`h1`-`h6`), un resumen, o una imagen.
119 | 
120 | ```html
121 | <article>
122 |   <header>
123 | 	  <h1>Título del Artículo</h1>
124 |   </header>
125 |   ...
126 | </div>
127 | ```
128 | 
129 | ### `main`
130 | 
131 | La etiqueta main representa la parte principal del artículo `main`:
132 | 
133 | ```html
134 | <article>
135 |   ....
136 |   <main>
137 |     <p>....</p>
138 |   </main>
139 | </div>
140 | ```
141 | 
142 | ### `footer`
143 | 
144 | La etiqueta `footer` se usa para determinar el pie de un artículo, o el pie de una página:
145 | 
146 | ```html
147 | <article>
148 |  ....
149 |   <footer>
150 |     <p>Pie de nota..</p>
151 |   </footer>
152 | </div>
153 | ```
154 | 


--------------------------------------------------------------------------------
/11-audio-and-video.md:
--------------------------------------------------------------------------------
  1 | # Etiquetas multimedia: `audio` y `video`
  2 | 
  3 | En esta sección quiero mostrarte las etiquetas `audio` y `video`.
  4 | 
  5 | ## La etiqueta `audio`
  6 | 
  7 | Esta etiqueta le permite agregar audio a sus páginas HTML.
  8 | 
  9 | Este elemento puede tanto transmitir audio, por medio de `getUserMedia()`, o puede reproducir de alguna fuente de audio a la cual debe hacer referencia con un atributo `src`:
 10 | 
 11 | ```html
 12 | <audio src="file.mp3">
 13 | ```
 14 | 
 15 | Por defecto el navegador no muestra controles para este elemento, lo que significa que el audio solo será reproducido si se establece con reproducción automática (explicación al respecto más adelante) y el usuario no puede detenerlo, cambiar el volumen, o moverse a una posición específica del audio.
 16 | 
 17 | Para mostrar controles, puede agregar el atributo `controls`:
 18 | 
 19 | ```html
 20 | <audio src="file.mp3" controls>
 21 | ```
 22 | 
 23 | Los controles de esta etiqueta puede tener un aspecto visual personalizado.
 24 | 
 25 | Puede especificar el tipo MIME del archivo de audio usando el atributo `type`. Si no es agregado, el navegador intentará determinarlo de forma automática:
 26 | 
 27 | ```html
 28 | <audio src="file.mp3" controls type="audio/mpeg">
 29 | ```
 30 | 
 31 | Por defecto, un archivo de audio no se reproduce automáticamente. Agregue el atributo `autoplay` para darle esta funcionalidad:
 32 | 
 33 | ```html
 34 | <audio src="file.mp3" controls autoplay>
 35 | ```
 36 | 
 37 | > Nota: los navegadores móviles no permiten la reproducción automática
 38 | 
 39 | El atributo `loop` reinicia el archivo desde el minuto 0:00. Si no es agregado, la reproducción se detiene al terminarse:
 40 | 
 41 | ```html
 42 | <audio src="file.mp3" controls autoplay loop>
 43 | ```
 44 | 
 45 | También puede reproducir un archivo de audio con el volumen silenciado usando el atributo `muted` (no estoy muy seguro cuál pueda ser la utilidad de esto):
 46 | 
 47 | ```html
 48 | <audio src="file.mp3" controls autoplay loop muted>
 49 | ```
 50 | 
 51 | Usando Javascript puede 'escuchar' (detectar) varios eventos que puedan ocurrir en un elemento `audio`, siendo los más básicos:
 52 | 
 53 | - `play` cuando el archivo comience a reproducirse
 54 | - `pause` cuando la reproducción del archivo se pause
 55 | - `playing` cuando la reproducción de un archivo se continue
 56 | - `ended`	cuando la reproducción del archivo se termine
 57 | 
 58 | ## La etiqueta `video`
 59 | 
 60 | Esta etiqueta le permite agregar contenido a su página de HTML.
 61 | 
 62 | Este elemento puede tanto transmitir video, por medio de `getUserMedia()` o **WebRTC**,  o puede reproducir de alguna fuente de video a la cual debe hacer referencia con un atributo `src`:
 63 | 
 64 | ```html
 65 | <video src="file.mp4">
 66 | ```
 67 | 
 68 | Tal como los archivos de audio, el navegador no muestra por defecto controles para este elemento, solo el video en cuestión.
 69 | 
 70 | Por defecto el navegador no muestra controles para este elemento, lo que significa que el audio solo será reproducido si se establece con reproducción automática (explicación al respecto más adelante) y el usuario no puede detenerlo, cambiar el volumen, o moverse a una posición específica del video.
 71 | 
 72 | Para mostrar los controles, puede agregar el atributo `controls`:
 73 | 
 74 | ```html
 75 | <video src="file.mp4" controls>
 76 | ```
 77 | 
 78 | Los controles de esta etiqueta puede tener un aspecto visual personalizado.
 79 | 
 80 | Puede especificar el tipo MIME del archivo de audio usando el atributo `type`. Si no es agregado, el navegador intentará determinarlo de forma automática:
 81 | 
 82 | ```html
 83 | <video src="file.mp4" controls type="video/mp4">
 84 | ```
 85 | 
 86 | Por defecto, un archivo de video no se reproduce automáticamente. Agregue el atributo `autoplay` para darle esta funcionalidad:
 87 | 
 88 | ```html
 89 | <video src="file.mp4" controls autoplay>
 90 | ```
 91 | 
 92 | Algunos navegadores también requieren el atributo `muted` (que hace exactamente lo mismo que si se aplicara a un archivo de audio) para poder reproducir automáticamente, de manera que el video se reproduce automáticamente solo si está silenciado por defecto:
 93 | 
 94 | ```html
 95 | <audio src="file.mp3" controls autoplay muted>
 96 | ```
 97 | 
 98 | El atributo `loop` reinicia el archivo desde el minuto 0:00. Si no es agregado, la reproducción se detiene al terminarse:
 99 | 
100 | ```html
101 | <video src="file.mp4" controls autoplay loop>
102 | ```
103 | 
104 | También puede definir una imagen para que se vea por defécto antes que se reproduzca el video.
105 | 
106 | ```html
107 | <video src="file.mp4" poster="picture.png">
108 | ```
109 | 
110 | Si no está definida, el navegador mostrará el primero cuadro del vídeo apenas esté disponible.
111 | 
112 | Puede establecer los atributos `width` (anchura) y `height` (altura) para definir el espacio que el elemento tomará de manera que el navegador pueda tomarlo en cuenta para que no modifique la interfaz cuando termine de cargarse.
113 | Toma un valor numérico, expresado en píxeles.
114 | 
115 | Usando Javascript puede 'escuchar' (detectar) varios eventos que puedan ocurrir en un elemento `audio`, siendo los más básicos:
116 | 
117 | - `play` cuando el archivo comience a reproducirse
118 | - `pause` cuando la reproducción del archivo se pause
119 | - `playing` cuando la reproducción de un archivo se continue
120 | - `ended`	cuando la reproducción del archivo se termine
121 | 


--------------------------------------------------------------------------------
/12-iframes.md:
--------------------------------------------------------------------------------
 1 | # Iframes
 2 | 
 3 | La etiqueta `iframe` nos permite agregar contenido de origen distinto (otras páginas) a nuestra página web.
 4 | 
 5 | A nivel técnico, un iframe crea el contenido de forma anidada. Esto significa que el iframe no interfiere con la página original y viceversa. JavaScript y/o CSS no "gotean" desde/hacia los iframes.
 6 | 
 7 | Muchos sitios usan iframes para ejecutar varios procesos. Puede que conozca CodePen, Glitch u otros sitios que le permiten escribir código en una parte de la página, y luego ver el resultado en otra. Eso es un iframe.
 8 | 
 9 | Puede crear uno de la siguiente manera:
10 | 
11 | ```html
12 | <iframe src="page.html"></iframe>
13 | ```
14 | 
15 | También puede hacer referencia a una URL absoluta:
16 | 
17 | ```html
18 | <iframe src="https://site.com/page.html"></iframe>
19 | ```
20 | 
21 | Puede también establecer parámetros de altura y anchura. En caso que no lo haga, iframe usará los valores por defecto, una caja de 300x150 píxeles:
22 | 
23 | ```html
24 | <iframe src="page.html" width="800" height="400"></iframe>
25 | ```
26 | 
27 | ## Srcdoc
28 | 
29 | El atributo `srcdoc` le permite especificar algún código HTML para mostrar. Es un alternativa a `src`, pero más reciente y no soportada por Edge 18 y versiones anteriores, así como por Internet Explorer:
30 | 
31 | ```html
32 | <iframe srcdoc="<p>My dog is a good dog</p>"></iframe>
33 | ```
34 | 
35 | ## Sandbox
36 | 
37 | El atributo `sandbox` permite limitar las operaciones permitidas dentro de los iframes.
38 | 
39 | Si lo omitimos, todo estará permitido:
40 | 
41 | ```html
42 | <iframe src="page.html"></iframe>
43 | ```
44 | 
45 | Si lo establecemos en "", nada estará permitido:
46 | 
47 | ```html
48 | <iframe src="page.html" sandbox=""></iframe>
49 | ```
50 | 
51 | Podemos seleccionar las acciones que permitiremos al añadir opciones al atributo `sandbox`. Puede permitir múltiples acciones al agregarlas con un espacio entre ellas. Esta es una lista incompleta de las opciones posibles:
52 | 
53 | * `allow-forms`: permite enviar el contenido de las `forms`.
54 | * `allow-modals`: permite abrir ventanas modales, incluyendo llamar a `alert()` en JavaScript.
55 | * `allow-orientation-lock` permite bloquear la orientación de pantalla.
56 | * `allow-popups` permite popups, usando `window.open()` y enlaces `target="_blank"`.
57 | * `allow-same-origin` trata el recurso que está cargándose como si fuera del mismo origen.
58 | * `allow-scripts` deja que el iframe cargado corra scripts (pero no que deje crear popups).
59 | * `allow-top-navigation` da al iframe acceso al nivel superior de navegación.
60 | 
61 | ## Allow
62 | 
63 | Actualmente experimental y solo soportado por navegadores basados en Chromium, es el futuro de intercambio de recursos entre la ventana padre y el iframe.
64 | 
65 | Es similar al atributo `sandbox`, pero permitiéndonos características más específicas, incluyendo:
66 | 
67 | - `accelerometer`, que da acceso a la interfaz API de acelerómetros.
68 | - `ambient-light-sensor`, que da acceso a la interfaz API de AmbientLightSensor.
69 | - `autoplay`, que permite reproducir automáticamente archivos de audio y video.
70 | - `camera`, que da acceso a la cámara del dispositivo por medio de la interfaz API getUserMedia.
71 | - `display-capture`, que permite acceder al contenido de la pantalla usando la API getDisplayMedia.
72 | - `fullscreen`, que permite acceder al modo de pantalla completa.
73 | - `geolocation`, que permite acceder a la API de geolocalización.
74 | - `gyroscope`, que da acceso a la interfaz API del giroscopio.
75 | - `magnetometer`, que da acceso a la interfaz API del magnetómetro.
76 | - `microphone`, que da acceso al micrófono del dispositivo por medio de la interfaz API getUserMedia.
77 | - `midi`, que da acceso a la API Web MIDI.
78 | - `payment`, que da acceso a la API de petición de pagos.
79 | - `speaker`, que da acceso a la reproducción de audio por medio de los altavoces del dispositivo.
80 | - `usb`, que da acceso a la API WebUSB.
81 | - `vibrate`, que da acceso a la API de vibración.
82 | - `vr`, que da acceso a la API WebVR.
83 | 
84 | ## Referrer
85 | 
86 | Al cargar un iframe, el navegador envía información importante sobre el usuario que lo carga con el encabezado de `Referer`.
87 | 
88 | El atributo `referrerpolicy` nos deja establecer la información del usuario a enviar al iframe cuando carga. Esta etiqueta es un encabezado HTTP que deja que la página sepa quién la está cargando. Estos son los valores permitidos:
89 | 
90 | - `no-referrer-when-downgrade`, que es el atributo por defecto, y envía la información cuando la página actual esté cargada sobre HTTPS y el iframe en HTTP.
91 | - `no-referrer`, que no envía la información del encabezado.
92 | - `origin`, que envía la información, y solo contiene el origen (puerto, protocolo y dominio), no solo el origen más la dirección, que suele ser la información que envía por defecto.
93 | - `origin-when-cross-origin`, que envía la información del encabezado en su forma completa (origen + dirección) al cargarlo en una página del mismo dominio (puerto, protocolo y dominio). De otra manera, solo envía el origen.
94 | - `same-origin`, la información se envía solamente si el iframe se carga desde el mismo dominio (puerto, protocolo y dominio).
95 | - `strict-origin`, envía la información de origen como el encabezado si la página actual fue cargada sobre HTTPS y el iframe también. No envía nada si el iframe se envía sobre HTTP.
96 | - `strict-origin-when-cross-origin`, envía el origen + dirección como infomación de encabezado al trabajar en el mismo origen. Envía el origen como infomación si la página actual se carga sobre HTTPS y el iframe también. No envía nada si el iframe se carga sobre HTTP.
97 | - `unsafe-url`, que envía el origen + dirección como información incluso al cargar recursos sobre HTTP mientras que la página haya sido cargada sobre HTTPS.
98 | 


--------------------------------------------------------------------------------
/13-Images.md:
--------------------------------------------------------------------------------
  1 | # Imàgenes
  2 | 
  3 | Las imàgenes pueden ser mostradas usando la etiqueta `img`.
  4 | 
  5 | Esta etiqueta acepta un atributo `src`, usado para configurar la fuente de la imagen:
  6 | 
  7 | ```html
  8 | <img src="image.png">
  9 | ```
 10 | 
 11 | Podemos usar una amplia cantidad de imàgenes, estando las màs comunes en formato PNG, JPEG, GIF, SVG y, màs recientemente, en WebP.
 12 | 
 13 | El estàndar HTML requiere que esté presente un atributo `alt` que describa el contenido de la imagen. Esto es usado tanto por herramientas de lectura de pantalla como por bots de motores de búsqueda:
 14 | 
 15 | ```html
 16 | <img src="dog.png" alt="Una foto de un perro">
 17 | ```
 18 | 
 19 | Puede cambiar los atributos `width` y `height` para configurar el espacio que el elemento tomará, de manera que el navegador pueda tomarlo en cuenta y no cambie la interfaz al terminarse de cargar. Toma un valor numérico, expresado en píxeles.
 20 | 
 21 | ```html
 22 | <img src="dog.png" alt="Una foto de un perro" width="300" height="200">
 23 | ```
 24 | 
 25 | ## La etiqueta `figure`
 26 | 
 27 | La etiqueta `figure` suele ser usada con la etiqueta `img`.
 28 | 
 29 | `figure` es una etiqueta semántica que suele usarse cuando se busca mostrar una imagen con pie de foto. Se usa de la siguiente manera:
 30 | 
 31 | ```html
 32 | <figure>
 33 |     <img src="dog.png"
 34 |          alt="Un buen chico">
 35 |     <figcaption>Un buen chico</figcaption>
 36 | </figure>
 37 | ```
 38 | 
 39 | La etiqueta `figcaption` ajusta el texto del pie de foto.
 40 | 
 41 | ## Imágenes responsivas usando `srcset`
 42 | 
 43 | El atributo `srcset` te permite configurar imágenes responsivas que el navegador puede usar dependiendo de la densidad de píxeles o la anchira de la ventana, de acuerdo a sus preferencias. De esta manera, solo podrá descargar los recursos que necesite para mostrar la página, sin descargar una imagen grande si está en un dispositivo móvil, por ejemplo.
 44 | 
 45 | Acá un ejemplo, donde damos 4 imágenes adicionales para 4 tamaños de pantalla diferentes:
 46 | 
 47 | ```html
 48 | <img src="dog.png"
 49 | 	alt="Una foto de un perro"
 50 | 	srcset="dog-500.png 500w,
 51 | 	  		 dog-800.png 800w,
 52 | 			 dog-1000.png 1000w,
 53 | 			 dog-1400.png 1400w">ventana de
 54 | ```
 55 | 
 56 | En `srcset` usamos la medida `w` (del inglés _width_) para indicar la anchura de la ventana.
 57 | 
 58 | Ya que lo hacemos, también debemos usar el atributo `sizes`:
 59 | 
 60 | ```html
 61 | <img src="dog.png"
 62 | 	alt="Una foto de un perro"
 63 | 	sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
 64 | 	srcset="dog-500.png 500w,
 65 | 	  		 dog-800.png 800w,
 66 | 			 dog-1000.png 1000w,
 67 | 			 dog-1400.png 1400w">
 68 | ```
 69 | 
 70 | En este ejemplo, la línea `(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px` en el atributo `sizes` describe el tamaño de la imagen en relación a la ventana del navegador, con múltiples condiciones separadas por una coma.
 71 | 
 72 | La condición `max-width: 500px ` configura el tamaño de la imagen en correlación con la anchura de la ventana del navegador. En resumen, si el tamaño de la ventana es < `500px`, muestra la imagen al 100% del tamaño de la ventana.
 73 | 
 74 | Si el tamaño de la ventana es más grande, pero < `900px`, muestra la imagen, pero al 50% del tamaño de la ventana.
 75 | 
 76 | Y si es incluso más grande, ajusta la imagen a `800px`.
 77 | 
 78 | La unidad de medida `vw` (del inglés _viewport width_) puede ser nueva para usted, y en resumen diremos que 1 `vw` es 1% de la anchura de la ventana, así que `100vw` es el 100% de la misma. También existe una medida `vh` (del inglés _viewport height_) que, como tal vez se imagine, es similar a `vw`, pero refiriéndose a la altura de la ventana, en lugar de su anchura.
 79 | 
 80 | Un sitio útil para generar las imágenes necesarias para `srcset` es [https://responsivebreakpoints.com/](https://responsivebreakpoints.com/).
 81 | 
 82 | ## La etiqueta `picture`
 83 | 
 84 | HTML también nos otorga la etiqueta `picture`, que hace un trabajo similar a `srcset`, con diferencias muy sutiles pero importantes.
 85 | 
 86 | Puede usar `picture` cuando, en lugar de mostrar una versión más pequeña de la imagen, quiera cambiarla completamente. O usar un formato distinto.
 87 | 
 88 | El mejor caso que he encontrado es usarlo al mostrar una imagen en formato WebP, que no está todavia ampliamente soportado. En la etiqueta `picture` puede especificar una lista de imágenes, y éstas serán mostradas en orden, de manera que, en el siguiente ejemplo, los navegadores que soporten WebP usarán la primera, o JPG si no es el caso:
 89 | 
 90 | ```html
 91 | <picture>
 92 |   <source type="image/webp" srcset="image.webp">
 93 |   <img src="image.jpg" alt="An image">
 94 | </picture>
 95 | ```
 96 | 
 97 | > La etiqueta `source` define uno (o más) formatos para las imágenes. La etiqueta `img` se usa en caso que el navegador sea antiguo y no soporte la etiqueta `picture`.
 98 | 
 99 | En la etiqueta `source` dentro de `picture` puede agregarse un atributo `media` para configurar consultas multimedia (llamadas también _media queries_).
100 | 
101 | El ejemplo siguiente funciona más o menos como el ejemplo usado con `srcset`:
102 | 
103 | ```html
104 | <picture>
105 |   <source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
106 |   <source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
107 |   <source media="(min-width: 1000w)" srcset="dog-1000.png"	sizes="800px">
108 |   <source media="(min-width: 1400w)" srcset="dog-1400.png"	sizes="800px">
109 |   <img src="dog.png" alt="Una imagen de un perro">
110 | </picture>
111 | ```
112 | 
113 | Aunque funciona más o menos de la misma manera, lleva un poco más de código que la etiqueta `img`.
114 | 
115 | Esta etiqueta es muy reciente, pero ya es [soportada](https://caniuse.com/#search=picture) por todos los navegadores más populares, salvo Opera Mini e IE en todas sus versiones.
116 | 
117 | 


--------------------------------------------------------------------------------
/10-Tables.md:
--------------------------------------------------------------------------------
  1 | # Tablas
  2 | 
  3 | En los primeros días de la web, las tablas eran parte importante en la construcción de interfaces.
  4 | 
  5 | Luego, fueron reemplazadas por CSS y su capacidad de creación de interfaces, y hoy tenemos poderosas herramientas como Grid y Flexbox de CSS para construir interfaces. Las tablas son hoy en día usadas para, como se puede imaginar, ¡crear tablas!
  6 | 
  7 | ### La etiqueta `table`
  8 | 
  9 | Puede definir una tabla usando la etiqueta `table`:
 10 | 
 11 | ```html
 12 | <table>
 13 | 
 14 | </table>
 15 | ```
 16 | 
 17 | Dentro de la tabla definiremos los datos. Tenemos que pensar en términos de filas, lo que significa que lo que se agrega a una table son filas, no columnas. Las columnas se definirán dentro de una fila.
 18 | 
 19 | ### Filas
 20 | 
 21 | Una fila se agrega usando la etiqueta `tr`, y es lo único que podemos agregar a una etiqueta `table`:
 22 | 
 23 | ```html
 24 | <table>
 25 |   <tr></tr>
 26 |   <tr></tr>
 27 |   <tr></tr>
 28 | </table>
 29 | ```
 30 | 
 31 | Esta es una tabla con tres filas.
 32 | 
 33 | La primera fila _puede_ tomar el rol de encabezado.
 34 | 
 35 | ### Encabezados de columna
 36 | 
 37 | El encabezado de una tabla contiene el nombre de una columna, típicamente en negritas.
 38 | 
 39 | Piense en un documento de Excel / Google Sheets. Es similar al encabezado `A-B-C-D...` superior.
 40 | 
 41 | ![](9-Tables/Screen%20Shot%202019-06-20%20at%2010.18.17.png)
 42 | 
 43 | Se define el encabezado usando la etiqueta `th`:
 44 | 
 45 | ```html
 46 | <table>
 47 |   <tr>
 48 |     <th>Columna 1</th>
 49 |     <th>Columna 2</th>
 50 |     <th>Columna 3</th>
 51 |   </tr>
 52 |   <tr></tr>
 53 |   <tr></tr>
 54 | </table>
 55 | ```
 56 | 
 57 | ### Contenido de una tabla
 58 | 
 59 | El contenido de una tabla se define usando etiquetas `td` dentro los otros elementos `tr`:
 60 | 
 61 | ```html
 62 | <table>
 63 |   <tr>
 64 |     <th>Columna 1</th>
 65 |     <th>Columna 2</th>
 66 |     <th>Columna 3</th>
 67 |   </tr>
 68 |   <tr>
 69 |     <td>Fila 1 Columna 1</td>
 70 |     <td>Fila 1 Columna 2</td>
 71 |     <td>Fila 1 Columna 3</td>
 72 |   </tr>
 73 |   <tr>
 74 |     <td>Fila 2 Columna 1</td>
 75 |     <td>Fila 2 Columna 2</td>
 76 |     <td>Fila 2 Columna 3</td>
 77 |   </tr>
 78 | </table>
 79 | ```
 80 | 
 81 | Los navegadores lo renderizan de la siguiente manera, si no le agrega estilos con CSS:
 82 | 
 83 | ![](9-Tables/Screen%20Shot%202019-06-20%20at%2010.24.08.png)
 84 | 
 85 | Agregarl el siguiente CSS:
 86 | 
 87 | ```css
 88 | th, td {
 89 |   padding: 10px;
 90 |   border: 1px solid #333;
 91 | }
 92 | ```
 93 | 
 94 | Hace que la tabla se vea más como una tabla:
 95 | 
 96 | ![](9-Tables/Screen%20Shot%202019-06-20%20at%2010.26.15.png)
 97 | 
 98 | ### Tamaño de filas y columnas
 99 | 
100 | Una fila puede expandirse a dos o más columnas, usando el atributo `colspan`:
101 | 
102 | ```html
103 | <table>
104 |   <tr>
105 |     <th>Columna 1</th>
106 |     <th>Columna 2</th>
107 |     <th>Columna 3</th>
108 |   </tr>
109 |   <tr>
110 |     <td colspan="2">Fila 1 Columnas 1-2</td>
111 |     <td>Fila 1 Columna 3</td>
112 |   </tr>
113 |   <tr>
114 |     <td colspan="3">Fila 2 Columnas 1-3</td>
115 |   </tr>
116 | </table>
117 | ```
118 | 
119 | ![](9-Tables/Screen%20Shot%202019-06-20%20at%2010.27.59.png)
120 | 
121 | O puede expandirse a dos o más filas, usando el atributo `rowspan`:
122 | 
123 | ```html
124 | <table>
125 |   <tr>
126 |     <th>Columna 1</th>
127 |     <th>Columna 2</th>
128 |     <th>Columna 3</th>
129 |   </tr>
130 |   <tr>
131 |     <td colspan="2" rowspan="2">Filas 1-2 Columnas 1-2</td>
132 |     <td>Fila 1 Columna 3</td>
133 |   </tr>
134 |   <tr>
135 |     <td>Fila 2 Columna 3</td>
136 |   </tr>
137 | </table>
138 | ```
139 | 
140 | ![](9-Tables/Screen%20Shot%202019-06-20%20at%2010.29.37.png)
141 | 
142 | ### Encabezados de fila
143 | 
144 | Antes, le expliqué cómo tener encabezados de columnas, usando la etiqueta `th` dentro de la primera etiqueta `tr` de la tabla.
145 | 
146 | Puede agregar una etiqueta `th` como el primer elemento dentro de una etiqueta `tr` que no sea la primera `tr` de la tabla para obtener encabezados de fila:
147 | 
148 | ```html
149 | <table>
150 |   <tr>
151 |     <th></th>
152 |     <th>Columna 2</th>
153 |     <th>Columna 3</th>
154 |   </tr>
155 |   <tr>
156 |     <th>Fil 1</th>
157 |     <td>Col 2</td>
158 |     <td>Col 3</td>
159 |   </tr>
160 |   <tr>
161 |     <th>Fil 1</th>
162 |     <td>Col 2</td>
163 |     <td>Col 3</td>
164 |   </tr>
165 | </table>
166 | ```
167 | 
168 | ![](9-Tables/Screen%20Shot%202019-06-20%20at%2010.49.16.png)
169 | 
170 | ### Más etiquetas para organizar las tablas
171 | 
172 | Existen tres etiquetas más que pueden ser agregadas a una tabla para tenerla más organizada.
173 | 
174 | Son mejor usadas con tablas grandes, para así definir correctamente tanto el pie como el encabezado de la misma.
175 | 
176 | Esas etiquetas son:
177 | 
178 | - `thead`
179 | - `tbody`
180 | - `tfoot`
181 | 
182 | Estas envuelven las etiquetas `tr` de manera que claramente definan las diferentes secciones de la tabla. Aquí un ejemplo:
183 | 
184 | ```html
185 | <table>
186 |   <thead>
187 |     <tr>
188 |       <th></th>
189 |       <th>Columna 2</th>
190 |       <th>Columna 3</th>
191 |     </tr>
192 |   </thead>
193 |   <tbody>
194 |     <tr>
195 |       <th>Fil 1</th>
196 |       <td>Col 2</td>
197 |       <td>Col 3</td>
198 |     </tr>
199 |     <tr>
200 |       <th>Fil 2</th>
201 |       <td>Col 2</td>
202 |       <td>Col 3</td>
203 |     </tr>
204 |   </tbody>
205 |   <tfoot>
206 |     <tr>
207 |       <td></td>
208 |       <td>Pie de Col 1</td>
209 |       <td>Pie de Col 2</td>
210 |     </tr>
211 |   </tfoot>
212 | </table>
213 | ```
214 | 
215 | ![](9-Tables/Screen%20Shot%202019-06-20%20at%2010.52.41.png)
216 | 
217 | ## Descripción de tabla
218 | 
219 | Una tabla debería tener una etiqueta `caption` que describa su contenido. Esa etiqueta debería ser agregada inmediatamente después de la etiqueta `table`:
220 | 
221 | ```html
222 | <table>
223 |   <caption>Edades de los Perritos</caption>
224 |   <tr>
225 |     <th>Perrito</th>
226 |     <th>Edad</th>
227 |   </tr>
228 |   <tr>
229 |     <td>Solovino</td>
230 |     <td>7</td>
231 |   </tr>
232 | </table>
233 | ```
234 | 


--------------------------------------------------------------------------------
/6-Tags-that-interact-with-text.md:
--------------------------------------------------------------------------------
  1 | # Etiquetas que interactúan con el texto
  2 | 
  3 | ## La etiqueta `p`
  4 | 
  5 | Define un parágrafo de texto.
  6 | 
  7 | ```html
  8 | <p>Algún texto</p>
  9 | ```
 10 | 
 11 | Es un elemento en bloque.
 12 | 
 13 | Dentro, podemos agregar cualquier elemento en línea que queramos, como un `span` o `a`.
 14 | 
 15 | No podemos agregar elementos en bloque. Tampoco podemos crear un elemento `p` dentro de otro.
 16 | 
 17 | Por defecto, los navegadores dan estilo a los parágrafos con un margen arriba y debajo del mismo. Es de `16px` en Chrome, pero el valor exacto puede variar entre navegadores.
 18 | 
 19 | Esto causa que dos parágrafos consecutivos estén espaciados entre ellos, replicando lo que esperaríamos de un "parágrafo" en medios como un periódico.
 20 | 
 21 | ## La etiqueta `span`
 22 | 
 23 | Es una etiqueta en línea que puede ser usada para crear una sección en un parágrafo para que pueda ser modificada con CSS:
 24 | 
 25 | ```html
 26 | <p>Una parte del texto <span>y aquí otra</span></p>
 27 | ```
 28 | 
 29 | ## La etiqueta `br`
 30 | 
 31 | Esta etiqueta representa un salto de línea. Es un elemento en línea, y no necesita una etiqueta de clausura.
 32 | 
 33 | La usamos para crear saltos de línea dentro de una etiqueta `p`, sin crear un nuevo parágrafo.
 34 | 
 35 | Y, comparados con un nuevo parágrafo, no necesitan espaciado adicional.
 36 | 
 37 | ```html
 38 | <p>Algo de texto<br>Una nueva línea</p>
 39 | ```
 40 | 
 41 | ## Etiquetas de encabezado
 42 | 
 43 | HTML nos provee 6 etiquetas de encabezado. De la más a la menos importante, tenemos `h1`, `h2`, `h3`, `h4`, `h5`, `h6`.
 44 | 
 45 | Tipicamente, una página tendrá un elemento `h1`, que será el título de la página. Luego, puede que tenga uno o más elementos `h2` dependiendo del contenido de la página.
 46 | 
 47 | Los encabezados, especialmente durante la organización de los mismos, son esenciales para el SEO, donde los motores de búsqueda los usan de diferentes maneras.
 48 | 
 49 | El navegador mostrará por defecto a la etiqueta `h1` con el tamaño de texto más grande, reduciéndolo a medida que el número cerca de `h` aumenta:
 50 | 
 51 | ![](6-Tags-that-interact-with-text/Screen%20Shot%202019-06-11%20at%2019.46.57.png)
 52 | 
 53 | Todos los encabezados son elementos en bloque. No pueden contener otros elementos, solo texto.
 54 | 
 55 | ## La etiqueta `strong`
 56 | 
 57 | Esta etiqueta es usada para marcar al texto que lleva dentro como *importante*. Vale notar esto porque no es una ayuda visual sino semántica, cuya interpretación dependerá del medio usado.
 58 | 
 59 | Los navegadores, por defecto, cambiarán el texto que tengan dentro a **negritas**.
 60 | 
 61 | ## La etiqueta `em`
 62 | 
 63 | Esta etiqueta es usada para darle *énfasis* al texto que lleva dentro. Como `strong`, no es una ayuda visual sino semántica.
 64 | 
 65 | Los navegadores, por defecto, cambiarán el texto que tengan dentro a **cursiva**.
 66 | 
 67 | ## Citas
 68 | La etiqueta HTML `blockquote` es útil para insertar citas en el texto. Es una etiqueta en bloque.
 69 | 
 70 | Los navegadores, por defecto, aplicarán un margen a un elemento `blockquote`. Chrome aplica un margen de 40px izquierdo y derecho, y un margen de 10px arriba y abado.
 71 | 
 72 | La etiqueta HTML `q` es usada también para citas, pero en línea.
 73 | 
 74 | ## Línea horizontal
 75 | 
 76 | No está realmente basada en texto, pero la etiqueta `hr` suele ser usada dentro de una página para agregar una página horizontal en la misma.
 77 | 
 78 | Es útil para separar secciones de una página.
 79 | 
 80 | ## Bloques de código
 81 | 
 82 | La etiqueta `code` es especialmente útil para mostrar código, debido a la fuente especial que le otorga al texto que tiene dentro.
 83 | 
 84 | Eso suele ser lo único que hacen los navegadores con el texto. Este es el CSS aplicado por Chrome:
 85 | 
 86 | ```css
 87 | code {
 88 |     font-family: monospace;
 89 | }
 90 | ```
 91 | 
 92 | Esta etiqueta es típicamente agregada dentro de una etiqueta `pre` tag, ya que el elemento `code` ignora el espacio y los saltos de línea, similar a la etiqueta `p`.
 93 | 
 94 | Chrome le da el siguiente estilo a la etiqueta `pre`:
 95 | 
 96 | ```css
 97 | pre {
 98 |     display: block;
 99 |     font-family: monospace;
100 |     white-space: pre;
101 |     margin: 1em 0px;
102 | }
103 | ```
104 | 
105 | lo que previene que el espacio en blanco colapse, haciéndolo un elemento en bloque.
106 | 
107 | ## Listas
108 | 
109 | Tenemos 3 tipos de listas:
110 | 
111 | - listas sin ordenar
112 | - listas ordenadas
113 | - listas de definiciones
114 | 
115 | Las listas sin ordenar son creadas usando la etiqueta `ul`. Cada objeto en la lista es creado con la etiqueta `li`:
116 | 
117 | ```html
118 | <ul>
119 | 	<li>Primero</li>
120 | 	<li>Segundo</li>
121 | </ul>
122 | ```
123 | 
124 | Las listas ordenadas son similares, solo que con la etiqueta `ol` en su lugar:
125 | 
126 | ```html
127 | <ol>
128 | 	<li>Primero</li>
129 | 	<li>Segundo</li>
130 | </ol>
131 | ```
132 | 
133 | La diferencia entre ambas es que las listas ordenadas tienen un número antes de cada objeto:
134 | 
135 | ![](6-Tags-that-interact-with-text/Screen%20Shot%202019-06-12%20at%2009.35.05.png)
136 | 
137 | Las listas de definición son un poco más diferentes. Están compuestas de un término y su descripción:
138 | 
139 | ```html
140 | <dl>
141 | 	<dt>Flavio</dt>
142 | 	<dd>El nombre</dd>
143 | 	<dt>Copes</dt>
144 | 	<dd>El apellido</dd>
145 | </dl>
146 | ```
147 | 
148 | Típicamente son mostradas de la siguiente forma por los navegadores:
149 | 
150 | ![](6-Tags-that-interact-with-text/Screen%20Shot%202019-06-12%20at%2009.45.21.png)
151 | 
152 | Debo admitir que no se ven tanto en el día a día como las dos anteriores, pero pueden ser útiles en algunas ocasiones.
153 | 
154 | ## Otras etiquetas de texto
155 | 
156 | Hay otro número de etiquetas con propósitos de presentación:
157 | 
158 | - la etiqueta `mark` 
159 | - la etiqueta `ins` 
160 | - la etiqueta `del` 
161 | - la etiqueta `sup`
162 | - la etiqueta `sub`
163 | - la etiqueta `small`
164 | - la etiqueta `i`
165 | - la etiqueta `b`
166 | 
167 | Este es un ejemplo de la la visualización aplicada por los navegadores:
168 | 
169 | ![](6-Tags-that-interact-with-text/Screen%20Shot%202019-06-12%20at%2008.43.55.png)
170 | 
171 | Acá puede que se pregunte, ¿en qué se diferencia `b` de `strong`? ¿Y cómo es `i` diferente de `em`?
172 | 
173 | La diferencia radica en el significado semántico. Aunque `b` e `i` son instrucciones directas al navegador para que aplique un estilo en particular al texto, `strong` y `em` le da un significado especial, y queda de parte del navegador el estilo que le otorgue. Casualmente, es por defecto el mismo estilo de `b` e `i`, pero puede cambiarse usando CSS.
174 | 
175 | Todavía quedan algunas otras etiquetas relacionadas al texto por explicar, pero son muy poco usadas.
176 | 


--------------------------------------------------------------------------------
/14-Accessibility.md:
--------------------------------------------------------------------------------
  1 | # Accesibilidad
  2 | 
  3 | Es importante que diseñemos nuestro HTML con la accesibilidad en mente.
  4 | 
  5 | Tener un HTML con esto en mente significa que las personas con discapacidad puedan usar tu página. Existen personas completa o parcialmente invidentes, personas con pérdida auditiva y una multitud de otras diferentes discapacidades.
  6 | 
  7 | Desafortunadamente, no suele dársele a esta sección la importancia que requiere, ya que no es tan llamativa como las demás.
  8 | 
  9 | ¿Qué pasaría si una persona que no puede *ver* tu página quiere consumir su contenido? En primer lugar, ¿cómo lo hacen? No pueden usar el ratón, usan algo llamado **lector de pantalla**. No tiene por qué imaginárselo cuando puede probarlo. Google provee la extensión gratuita de Chrome, [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn/). La accesibilidad también debe tomar en cuenta que se permita a estas herramientas seleccionar los elementos o navegar por las páginas con tranquilidad.
 10 | 
 11 | Las páginas y aplicaciones web no son siempre construidas con la accesibilidad como una de sus primeras metas y, aunque tal vez la versión 1 no tenga este acercamiento, puede hacerse accesible en una iteración futura. Mientras antes se haga, mejor, pero nunca es demasiado tarde.
 12 | 
 13 | Es importante tomar esto siempre en cuenta, especialmente cuando se habla de contenido de interés público, como puede ser las páginas web de los gobiernos u otras organizaciones públicas.
 14 | 
 15 | ¿Qué significa hacer una página HTML accesible? Déjeme ilustrarle las cosas principales que debe tomar en cuenta.
 16 | 
 17 | > Nota: hay una gran cantidad de cosas extra para tomar en cuenta, pero van dentro de otra sección, dedicada a CSS, como podría ser los colores, el contraste y las fuentes. O tal vez [cómo hacer las imágenes en formato SVG accesibles](https://css-tricks.com/accessible-svgs/). No hablaremos de esto en este libro.
 18 | 
 19 | ## Uso de HTML semático
 20 | 
 21 | El HTML semático es importantísimo, y una de las cosas principales que usted debería hacerse cargo al crear una página. Déjeme ilustrar algunos escenarios comunes.
 22 | 
 23 | Es importante usar la estructura correcta para las etiquetas de escritura. La más importante es `h1`, siendo otros números usados para información menos importante, pero todas las del mismo nivel deberían tener el mismo significado (piense en ello como en la estructura de un árbol):
 24 | 
 25 | ```
 26 | h1
 27 | 	h2
 28 | 		h3
 29 | 	h2
 30 | 	h2
 31 | 		h3
 32 | 			h4
 33 | ```
 34 | 
 35 | Use `strong` y `em` en lugar de `b` e `i`, respectivamente. Tienen el mismo aspecto visual, pero las dos primeras tienen significado semántico asociado a ellas. `b` e `i` son elementos mas visuales.
 36 | 
 37 | Las listas también son parte importante en la accesibillidad. Un lector de pantalla puede detectar uan lista y proveer un resumen, dejando luego que el usuario decida leer el resto o no.
 38 | 
 39 | Una tabla debería tener una etiqueta `caption` que describa su contenido:
 40 | 
 41 | ```
 42 | <table>
 43 |   <caption>Edad de los perros</caption>
 44 |   <tr>
 45 |     <th>Perro</th>
 46 |     <th>Edad</th>
 47 |   </tr>
 48 |   <tr>
 49 |     <td>Roger</td>
 50 |     <td>7</td>
 51 |   </tr>
 52 | </table>
 53 | ```
 54 | 
 55 | ## Use atributos `alt` para las imágenes
 56 | 
 57 | Todas sus imágenes deben tener un atributo `alt` que describa el contenido de la misma. No solo es una buena práctica, es requerido por el estándar HTML y su HTML no estará validado sin esto.
 58 | 
 59 | ```html
 60 | <img src="dog.png" alt="Una foto de mi perro">
 61 | ```
 62 | 
 63 | También ayuda al SEO, así que es otro incentivo para agregarlo.
 64 | 
 65 | ## Use el atributo `role`
 66 | 
 67 | Este atributo `role` le permite asignar roles específicos a los varios elementos de su página.
 68 | 
 69 | Puede asignar un montón de roles distintos, eso sí, todos en perfecto inglés, por lo que puede que tener un diccionario a la mano le ayude.
 70 | 
 71 | Son un montón, y para una completa referencia de cada uno, le entrego este [enlaze de MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles). Pero tampoco es necesario asignar un rol a cada elemento de la página. Los lectores de pantalla pueden inferirlo de la etiqueta HTML en la mayoría de los casos. Por ejemplo, no necesita agregar este atributo a etiquetas como `nav`, `button` o `form`.
 72 | 
 73 | Tomemos un ejemplo con la etiqueta `nav`. Puede usarla para definir la navegación de página de la siguiente manera:
 74 | 
 75 | ```html
 76 | <nav>
 77 |   <ul>
 78 |     <li><a href="/">Home</a></li>
 79 |     <li><a href="/blog">Blog</a></li>
 80 |   </ul>
 81 | </nav>
 82 | ```
 83 | 
 84 | Si estuviera *forzado* a usar una etiqueta `div` en lugar de `nav`, debería entonces usar el rol `navigation`:
 85 | 
 86 | ```html
 87 | <div role="navigation">
 88 |   <ul>
 89 |     <li><a href="/">Home</a></li>
 90 |     <li><a href="/blog">Blog</a></li>
 91 |   </ul>
 92 | </div>
 93 | ```
 94 | 
 95 | Así que acá tiene un ejemplo práctico: `role` es usado para asignar un valor significativo cuando la etiqueta no entrega el significado deseado
 96 | 
 97 | ## Use el atributo `tabindex`
 98 | 
 99 | Este atributo le permite cambiar el orden en el cual la tecla Tabulador "selecciona" los elementos seleccionables. Por defecto, solo los enlaces y elementos de un formulario solo "seleccionables" de esta manera, por lo que no tiene que usar `tabindex` en ellos.
100 | 
101 | Agregar `tabindex="0"` a un elemento hace al mismo seleccionable:
102 | 
103 | ```html
104 | <div tabindex="0">
105 | ...
106 | </div>
107 | ```
108 | 
109 | Por otra parte, usar `tabindex="-1"` en su lugar elimina este tipo de navegación del elemento, siendo bastante útil en algunos casos.
110 | 
111 | ## Use los atributos `aria`
112 | 
113 | ARIA es un acrónimo que significa Aplicaciones de Internet Ricas y Accesibles (_Accessible Rich Internet Applications_, en inglés), y define semática aplicada a elementos.
114 | 
115 | ### `aria-label`
116 | 
117 | Este atributo se usa para agregar una oración que describa a un elemento.
118 | 
119 | Ejemplo:
120 | 
121 | ```html
122 | <p aria-label="Descripción de un producto">...</p>
123 | ```
124 | 
125 | ### `aria-labelledby`
126 | 
127 | Este atributo configuta una correlación entre el elemento actual y el que lo etiqueta.
128 | 
129 | Si entiende cómo un elemento `input` se puede asociar a un elemento `label`, puede pensar esto en términos similares.
130 | 
131 | Pasamos la identificación del objetoq ue describe el elemento actual.
132 | 
133 | Ejemplo:
134 | 
135 | ```html
136 | <h3 id="descripcion">Descripción del producto</h3>
137 | 
138 | <p aria-labelledby="descripcion">
139 | ...
140 | </p>
141 | ```
142 | 
143 | ### `aria-describedby`
144 | 
145 | Este atributo nos permite asociar un elemento con otro elemento que sirva como descripción.
146 | 
147 | Ejemplo:
148 | 
149 | ```html
150 | <button aria-describedby="pADescripcion" >Pague Ahora</button>
151 | 
152 | <div id="pADescripcion">¡Hacer click en el botón lo enviará a nuestro fomulario!</div>
153 | ```
154 | 
155 | ### Use aria-hidden para ocultar contenido
156 | 
157 | Con el atributo `aria-hidden="true"`, le dirá a los lectores de pantalla que ignoren el elemento
158 | 
159 | ## Dónde aprender más
160 | 
161 | Esta es solo una introducción al tema. Para aprender más, recomiendo estos recursos (en inglés):
162 | 
163 | - [W3](https://www.w3.org/TR/WCAG20/)
164 | - [WebAim](https://webaim.org/)
165 | - [Google Developers](https://developers.google.com/web/fundamentals/accessibility/)
166 | 


--------------------------------------------------------------------------------
/3-HTML-Basics.md:
--------------------------------------------------------------------------------
  1 | # Bases de HTML
  2 | 
  3 | HTML es el lenguaje de marcado que usamos para estructural el contenido que consumimos en internet.
  4 | 
  5 | HTML se sirve al navegador de diferentes maneras. 
  6 | * Puede ser generado por una aplicación del servidor que lo construya dependiendo de la petición o de los datos de la sesión, como por ejemplo con Rails, Laravel o Django. 
  7 | * Puede ser generado por una aplicación de JavaScript del lado del cliente que genere HTML en su ejecución. 
  8 | * De manera más simple, puede ser almacenado en un archivo y servido al navegador por medio de un servidor web.
  9 | 
 10 | Vayamos a este último caso. Aunque en la práctica posiblemente es la forma menos popular para generar HTML, sigu siendo esencial conocer al menos los bloques más básicos.
 11 | 
 12 | Por convención,  un archivo HTML es guardado con una extensión `.html` o `.htm`.
 13 | 
 14 | Dentro de este archivo, organizamos el contenido usando **etiquetas** (o _tags_, en inglés).
 15 | 
 16 | Las etiquetas están alrededor del contenido, y cada una le da un significado especial al texto que rodea.
 17 | 
 18 | Hagamos algunos ejemplos.
 19 | 
 20 | Este fragmento de HTML crea un parágrafo usando la etiqueta `p`:
 21 | 
 22 | ```html
 23 | <p>Un parágrafo de texto</p>
 24 | ```
 25 | 
 26 | Este otro fragmento crea una lista de objetos usando la etiqueta `ul`, que significa *lista sin ordenar* (el nombre viene del inglés _unordered list_), y las etiquetas `li`, que significan *objeto de lista* (_list item_, en inglés):
 27 | 
 28 | ```html
 29 | <ul>
 30 |   <li>Primer objeto</li>
 31 |   <li>Segundo objeto</li>
 32 |   <li>Tercer objeto</li>
 33 | </ul>
 34 | ```
 35 | 
 36 | Cuando una página HTML es servida por el navegador, las etiquetas son interpretadas, y el navegador muestra los elementos de acuerdo con las reglas que definen su apariencia visual.
 37 | 
 38 | Algunas de estas reglas están estrablecidas de fábrica, como la manera en la que una lista se muestra o como un enlace está subrayado y en color azul.
 39 | 
 40 | Algunas otras reglas pueden ser establecidas por usted usando hojas de estilo en cascada, conocidas más comúnmente como CSS..
 41 | 
 42 | HTML no es un lenguaje de presentación. No se preocupa por cómo las cosas se *ven*, sino por qué *significan*.
 43 | 
 44 | Queda de parte del navegador determinar cómo se ven las cosas con las reglas establecidas por la persona que crea la página usando el lenguaje CSS.
 45 | 
 46 | Sin embargo, esos dos ejemplos eran fragmentos tomados fuera del contexto de una página real.
 47 | 
 48 | ### Estructura de una página en HTML
 49 | 
 50 | Hagamos un ejemplo de una página en HTML real
 51 | 
 52 | Las cosas comienzan con la declaración del tipo de documento (conocido como _doctype_), una manera de decirle al navegador que lo que está "viendo" es una página HTML, así como la versión que está utilizándose.
 53 | 
 54 | El HTML moderno usa esta declaración de la siguiente manera:
 55 | 
 56 | ```html
 57 | <!DOCTYPE html>
 58 | ```
 59 | 
 60 | Luego tenemos el elemento `html`, que tiene una etiqueta de apertura y de clausura:
 61 | 
 62 | ```html
 63 | <!DOCTYPE html>
 64 | <html>
 65 | ...
 66 | </html>
 67 | ```
 68 | 
 69 | La mayoría de las etiquetas viene en pares, con una etiqueta de apertura y de cerradura. La etiqueta de cerradura se escrible casi de la misma manera que la de clausura, pero con un `/`:
 70 | 
 71 | ```html
 72 | <etiqueta>contenido</etiqueta>
 73 | ```
 74 | Hay algunas etiquetas que no requieren etiquetas de clausura, dado que _no contienen_ nada dentro de ellas.
 75 | 
 76 | La etiqueta de apertura `html` se usa al principio del documento, después de la declaración del tipo de documento.
 77 | 
 78 | La etiqueta de clausura de `html` es lo último presente en un documento de HTML.
 79 | 
 80 | Dentro del elemento `html` tenemos dos elementos : `head` y `body`:
 81 | 
 82 | ```html
 83 | <!DOCTYPE html>
 84 | <html>
 85 | 	<head>
 86 | 	...
 87 | 	</head>
 88 | 	<body>
 89 | 	...
 90 | 	</body>
 91 | </html>
 92 | ```
 93 | 
 94 | Dentro de `head` tendremos etiquetas esenciales para la creación de una página web, como el título, los metadatos, el CSS interno o externo y el código de JavaScript. La mayoría de estas cosas no aparecen directamente en la página, sino que ayudan al navegador (o a los bots de búsqueda) a mostrarla apropiadamente.
 95 | 
 96 | Dentro de `body` tendremos el contenido de la página. Las **cosas visibles**.
 97 | 
 98 | ### Etiquetas o elementos
 99 | 
100 | Mencioné etiquetas y elementos. ¿Cuál es la diferencia?
101 | 
102 | Los elementos tienen una etiqueta de apertura y una de clausura. En este ejemplo, usaremos las etiquetas de apretura y clausura `p`para crear un elemento `p`:
103 | 
104 | ```html
105 | <p>Un parágrafo de texto</p>
106 | ```
107 | 
108 | Así, un elemento constituye el _paquete entero_:
109 | 
110 | - una etiqueta de apertura
111 | - el texto de contenido (y posiblemente otras cosas)
112 | - una etiqueta de clausura
113 | 
114 | Si un elemento no tiene una etiqueta de clausura, está solo escrito con la etiqueta de apertura y por esto no puede contener ningun texto.
115 | 
116 | Explicado esto, puedo usar ambos términos de manera intercambiable, a menos que explícitamente se mencione una etiqeuta de apertura o de clausura.
117 | 
118 | ### Atributos
119 | 
120 | La etiqueta de apertura de un elemento puede tener fragmentos especiales de información que podemos agregarle, llamados **atributos**.
121 | 
122 | Los atributos tienen una sintaxis de `atributo="valor"`:
123 | 
124 | ```html
125 | <p class="una-clase">Un parágrafo de texto</p>
126 | ```
127 | 
128 | > También pueden usarse comillas simples, pero es una buena práctica usar comillas dobles en su lugar.
129 | 
130 | Podemos tener muchos de ellos:
131 | 
132 | ```html
133 | <p class="una-clase" id="un-id">Un parágrafo de texto</p>
134 | ```
135 | 
136 | algunos de los atributos son booleanos, lo que significa que solo se necesita el atributo:
137 | 
138 | ```html
139 | <script defer src="archivo.js"></script>
140 | ```
141 | 
142 | Los atributos `class` e `id` son de los que más te encontrarás.
143 | 
144 | Tienen un significado especial, y son útiles tanto en CSS como en JavaScript.
145 | 
146 | La diferencia entre ambos es que un `id` es único dentro del contexto de una página web, no puede ser duplicado.
147 | 
148 | Las clases, por otra parte, pueden aparecer múltiples veces en múltiples elementos.
149 | 
150 | Además, un `id` debe ser solo un valor. `class`, por su parte, puede contener múltiples valores, separados por un espacio:
151 | 
152 | ```html
153 | <p class="una-clase otra-clase">Un parágrafo de texto</p>
154 | ```
155 | 
156 | Es común usar guiones `-` para separar palabras en un valor de clase, pero no es obligatorio.
157 | 
158 | Esos son solo dos de los atributos que puede usar. Algunos de ellos pueden ser usados solo en ciertas etiquetas, ya que son altamente especializados.
159 | 
160 | Otros atributos pueden ser usados de manera más general. Justo acaba de ver dos de ellos, `id` y `class`, pero también tenemos otros, como `style`, que puede ser usado para agregar CSS dentro de un elemento (vale acotar que es una práctica no recomendada).
161 | 
162 | ### ¿Mayúsculas o minúsculas?
163 | 
164 | En HTML, es irrelevante que se use unas u otras dentro de las etiquetas. Las etiquetas pueden ser escritas enteramente en mayúsculas o minúsculas. Otrora era común usar mayúsculas, pero hoy en día es común usar minúsculas.
165 | 
166 | Usualmente escribiría así:
167 | 
168 | ```html
169 | <p>Un parágrafo de texto</p>
170 | ```
171 | 
172 | y no así:
173 | 
174 | ```html
175 | <P>Un parágrafo de texto</P>
176 | ```
177 | 
178 | ### Espaciado
179 | Un detalle importante. En HTML, el espaciado no es relevante. A la hora de la interpretación, los espacios en blanco se quitan de la ecuación.
180 | 
181 | Para el navegador,
182 | 
183 | ```html
184 | <p>Un parágrafo de texto</p>
185 | ```
186 | 
187 | es lo mismo que
188 | 
189 | ```html
190 | <p>        Un parágrafo de texto</p>
191 | ```
192 | 
193 | y lo mismo que
194 | 
195 | ```html
196 | <p>Un parágrafo
197 | 
198 | de
199 |            texto          </p>
200 | ```
201 | 
202 |  
203 | Le aconsejaría que usara una sintaxis que le permita organizar visualmente los elementos, de manera que sea más fácil de leer, pero es libre de usar cualquier sintaxis que desee.
204 | 
205 | Yo prefiero, 
206 | 
207 | ```html
208 | <p>Un parágrafo de texto</p>
209 | ```
210 | 
211 | o
212 | 
213 | ```html
214 | <p>
215 | 	Un parágrafo de texto
216 | </p>
217 | ```
218 | 
219 | Las etiquetas que estén dentro de otras deberían ser indentadas con 2 o 4 espacios (o tabulaciones, dependiendo de su gusto):
220 | 
221 | ```html
222 | <body>
223 | 	<p>
224 | 		Un parágrafo de texto
225 | 	</p>
226 | 	<ul>
227 | 		<li>Un objeto de lista</li>
228 | 	</ul>
229 | </body>
230 | ```
231 | 
232 | > Nota: esta característica del espaciado significa que, si asi lo desea, agregar espacio puede ser bastante complicado. Le sugiero que use CSS para hacer más espacio cuando sea necesario.
233 | 
234 | > Nota: en casos especiales, puede usar la entidad HTML `&nbsp;` (un acrónimo que significa _non-breaking space_ (o un espacio que sí se muestra), pero explicaré más luego. Sin embargo, creo que esto no debería ser abusado. Es preferible usar CSS para alterar la presentación visual.
235 | 


--------------------------------------------------------------------------------
/4-The-document-heading.md:
--------------------------------------------------------------------------------
  1 | # La etiqueta head
  2 | 
  3 | Esta etiqueta contiene otras etiquetas especiales que definen las propiedades del documento.
  4 | 
  5 | Siempre se escribe antes de la etiqueta `body`, justo después de la etiqueta `html` de apertura:
  6 | 
  7 | ```html
  8 | <!DOCTYPE html>
  9 | <html>
 10 | 	<head>
 11 | 		...
 12 | 	</head>
 13 | 	...
 14 | </html>
 15 | ```
 16 | 
 17 | Nunca usamos atributos en esta etiqueta, tampoco escribimos contenido en ella, ya que es solo un contenedor para otras etiquetas.
 18 | 
 19 | Algunas de ellas son las siguientes, dependiendo de lo que necesite
 20 | 
 21 | - `title`
 22 | - `script`
 23 | - `noscript`
 24 | - `link`
 25 | - `style`
 26 | - `base`
 27 | - `meta`
 28 | 
 29 | ### La etiqueta `title`
 30 | 
 31 | Esta etiqueta determina el título de la página. El mismo es mostrado en el navegador, y es especialmente importante ya que es parte esencial en el tema de la optimización de motor de búsqueda (o SEO, por sus siglas en inglés).
 32 | 
 33 | ### La etiqueta `script`
 34 | 
 35 | Esta etiqueta es usada para agregar JavaScript a la página.
 36 | 
 37 | Puede agregarlo dentro del mismo documento, con una etiqueta de apertura, el código, y una etiqueta de clausura:
 38 | 
 39 | ```html
 40 | <script>
 41 | ..código JS
 42 | </script>
 43 | ```
 44 | 
 45 | O, alternativamente, puede cargar un archivo JavaScript externo usando el atributo `src`:
 46 | 
 47 | ```html
 48 | <script src="archivo.js"></script>
 49 | ```
 50 | 
 51 | > El atributo `type`, por defecto, está configurado como `text/javascript`, así que es completamente opcional.
 52 | 
 53 | Hay un detalle bastante importante respecto a esta etiqueta.
 54 | 
 55 | Suele ser colocada, si existe, al final de la página, justo antes de la etiqueta `</body>` de clausura. ¿Por qué? Por cuestiones de rendimiento.
 56 | 
 57 | Al cargar código JS (o scripts), el navegador bloquea por defecto la visualización de la página hasta que el script esté interpretado y cargado.
 58 | 
 59 | Al colocarlo al fondo de la página, es cargado y ejecutado después que la página haya sido interpretada y cargada, otorgando una mejor experiencia al usuario que si estuviera en la etiqueta `head`.
 60 | 
 61 | En mi opinión, estas son malas prácticas hoy en día. No hay problemas en dejar que las etiquetas `script` estén dentro de `head`.
 62 | 
 63 | En el JS moderno, tenemos una alternativa mejor que dejar los scripts al final, siendo este el atributo `defer`. Este es un ejemplo que carga un `archivo.js`, relativo a la dirección actual: 
 64 | 
 65 | ```html
 66 | <script defer src="archivo.js"></script> 
 67 | ```
 68 | 
 69 | Con esto, se tiene un escenario que llevará a un camino más rápido para cargar tanto la página como el JavaScript.
 70 | 
 71 | ### La etiqueta `noscript`
 72 | 
 73 | Esta etiqueta es usada para detectar si los scripts están deshabilitados por el navegador.
 74 | 
 75 | > Nota: los usuarios pueden elegir deshabilitar los scripts de JS en los ajustes del navegador, así como también puede que el navegador no los soporte por defecto.
 76 | 
 77 | Se usa de manera distinta dependiendo del lugar en el que se ponga, pudiendo ser dentro de la etiqueta `head` o dentro de la etiqueta `body`.
 78 | 
 79 | Ya que estamos hablando de la etiqueta, presentaré su uso.
 80 | 
 81 | En este caso, la etiqueta `noscript` solo puede contener etiquetas:
 82 | 
 83 | - `link`
 84 | - `style`
 85 | - `meta`
 86 | 
 87 | para alterar los recursos servidos por la página, en caso que los scripts estén deshabilitados.
 88 | 
 89 | En este ejemplo, establezco un elemento con la clase `no-script-alert` a mostrarse si los scripts están desactivados, ya que tiene la clase de CSS `display: none` por defecto:
 90 | 
 91 | ```html
 92 | <!DOCTYPE html>
 93 | <html>
 94 | 	<head>
 95 | 		...
 96 | 		<noscript>
 97 | 			<style>
 98 | 				.no-script-alert {
 99 | 					display: block;
100 | 				}
101 | 			</style>
102 | 		</noscript>
103 | 
104 | 		...
105 | 	</head>
106 | 	...
107 | </html>
108 | ```
109 | 
110 | > Por otra parte, si se pone dentro de la etiqueta `body`, puede contener parágrafos u otras cosas para ser mostradas en la interfaz de usuario.
111 | 
112 | ### La etiqueta `link`
113 | 
114 | Es usada para establecer relaciones entre un documento y otros recursos.
115 | 
116 | Es usada principalmente para enlazar y permitir cargar un archivo de CSS externo.
117 | 
118 | Este elemento no tiene etiqueta de clausura.
119 | 
120 | Uso:
121 | 
122 | ```html
123 | <!DOCTYPE html>
124 | <html>
125 | 	<head>
126 | 		...
127 | 		<link href="archivo.css" rel="stylesheet">
128 | 		...
129 | 	</head>
130 | 	...
131 | </html>
132 | ```
133 | 
134 | El atributo `media` permite cargar diferentes hojas de estilo dependiendo de las capacidades del dispositivo:
135 | 
136 | ```html
137 | <link href="file.css" media="screen" rel="stylesheet">
138 | <link href="print.css" media="print" rel="stylesheet">
139 | ```
140 | 
141 | También se pueden lanzar otros contenidos además de hojas de estilo.
142 | 
143 | Por ejemplo, podemos enlazar una fuente RSS usando
144 | 
145 | ```html
146 | <link rel="alternate" type="application/rss+xml" href="/index.xml">
147 | ```
148 | 
149 | O podemos enlazar un favicon usando:
150 | 
151 | ```html
152 | <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
153 | 
154 | <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
155 | 
156 | <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
157 | ```
158 | 
159 | Esta etiqueta _fue_ usada por Google para contenido multipágina, para indicar la página anterior y previa, usando `rel="prev"` y `rel="next"`. Hasta el momento de la escritura de este libro (2019), [Google anunció que ya no usa más esta etiqueta](https://twitter.com/googlewmc/status/1108726443251519489), ya que puede encontrar la estructura correcta del libro sin ella.
160 | 
161 | ### La etiqueta `style`
162 | 
163 | Puede ser usada para agregar estilos al documento, en lugar de cargar una hoja de estilos externa.
164 | 
165 | Uso:
166 | 
167 | ```html
168 | <style>
169 | .algun-css {}
170 | </style>
171 | ```
172 | 
173 | 
174 | Como con a etiqueta `link`, peude usar el atributo `media` para ajustar dónde se usará, específicamente, ese CSS:
175 | 
176 | ```html
177 | <style media="print">
178 | .some-css {}
179 | </style>
180 | ```
181 | 
182 | ### La etiqueta `base`
183 | 
184 | Es usada para establecer una dirección base para todas las direcciones relativas contenidas en la página.
185 | 
186 | ```html
187 | <!DOCTYPE html>
188 | <html>
189 | 	<head>
190 | 		...
191 | 		<base href="https://github.com/zetta102">
192 | 		...
193 | 	</head>
194 | 	...
195 | </html>
196 | ```
197 | 
198 | ### La etiqueta `meta`
199 | 
200 | Las etiquetas meta ejecutan una variedad de importantes tareas, especialmente en cuando a SEO se refiere.
201 | 
202 | Los elementos `meta` solo tienen una etiqueta de apertura.
203 | 
204 | La más básica es la etiqueta meta de `description`, usada para describir algo:
205 | 
206 | ```html
207 | <meta name="descripción" content="Una bonita página">
208 | ```
209 | 
210 | Esto "puede" ser usado por Google para generar la descripción de la página en sus resultados de búsqueda, en caso que lo encuentre mejor que el contennido dentro de la misma (no me pregunte cómo).
211 | 
212 | La etiqueta meta de `charset` es usada para establecer la codificación de los caracteres de la página. Suele ser `utf-8` en la mayoría de los casos:
213 | 
214 | ```html
215 | <meta charset="utf-8">
216 | ```
217 | 
218 | La etiqueta meta de `robots` instruye al motor de búsqueda respecto a la posibilidad (o no) de indexar una página (en otras palabras, mostrarla en los resultados de búsqueda del respectivo motor):
219 | 
220 | ```html
221 | <meta name="robots" content="noindex">
222 | ```
223 | 
224 | O si deberían seguir los enlaces o no (esto significa pedir que los enlaces sean [o no] indexados por el motor de búsqueda):
225 | 
226 | ```html
227 | <meta name="robots" content="nofollow">
228 | ```
229 | 
230 | > También puede establecerlo con enlaces individuales. Esta es una manera de establecerlo globalmente.
231 | 
232 | También se pueden combinar:
233 | 
234 | ```html
235 | <meta name="robots" content="noindex, nofollow">
236 | ```
237 | 
238 | El comportamiento por defecto es `index, follow`.
239 | 
240 | También puede usar otras propiedades, como podrían ser `nosnippet`, `noarchive`, `noimageindex` y más.
241 | 
242 | También puede simplemente 'hablar' con Google en lugar de *todos* los motores de búsqueda:
243 | 
244 | ```html
245 | <meta name="googlebot" content="noindex, nofollow">
246 | ```
247 | 
248 | Y otros motores de búsqueda podrían también tener sus propias etiquetas meta.
249 | 
250 | Hablando de ello, podemos pedirle a Google que deshabilite algunas características. Esto previene, por ejemplo, que se active la funcionalidad de traducción en los resultados del motor de búsqueda:
251 | 
252 | ```html
253 | <meta name="google" content="notranslate">
254 | ```
255 | 
256 | La etiqueta meta `viewport` es usada para decirle al navegador que estableca la anchura de la página en base a la del dispositivo.
257 | 
258 | ```html
259 | <meta name="viewport" content="width=device-width, initial-scale=1">
260 | ```
261 | 
262 | Otra etiqueta meta bastante popular es `http-equiv="refresh"`. En este caso, pide que el navegador redirija a otra página después de esperar 3 seg:
263 | 
264 | ```html
265 | <meta http-equiv="refresh" content="3;url=http://otra-pagina.com>
266 | ```
267 | 
268 | Usar 0, redirigirá tan rápido como sea posble.
269 | 
270 | Vale acotar que no es una referencia completa, existen otras etiquetas meta menos usadas.
271 | 
272 | Después de este deocumento, podremos ahondar en el cuerpo del mismo.
273 | 


--------------------------------------------------------------------------------
/9-Forms.md:
--------------------------------------------------------------------------------
  1 | # Formularios
  2 | 
  3 | Los formularios son una forma de interacturar on una página o una aplicación construida con tecnologías web.
  4 | 
  5 | Tiene un conjunto de controles, y cuando envía el formulario, ya sea con un boton dedicado o por medio de código, el navegador enviará la información al servidor.
  6 | 
  7 | Por defecto, este envío de información hace que la página se recargue después de enviar los datos, pero este comportamiento puede ser alterado con JS. Sin embargo, este libro está dedicado únicamente a HTML.
  8 | 
  9 | Un formulario se crea usando la etiqueta `form`:
 10 | 
 11 | ```html
 12 | <form>
 13 | 	...
 14 | </form>
 15 | ```
 16 | 
 17 | Por defecto, los formularios son enviados usando el método HTTP GET, el cual tiene algunas contraindicaciones, por lo que usualmente preferirá usar POST.
 18 | 
 19 | Puede ajustar el método a POST al enviar usando el atributo `method`:
 20 | 
 21 | ```html
 22 | <form method="POST">
 23 | 	...
 24 | </form>
 25 | ```
 26 | 
 27 | El formulario se enviará, ya sea usando GET o POST, a la misma dirección en la que está alojada.
 28 | 
 29 | Así, si el formulario está en `https://flaviocopes.com/contacts`, al presionar el botón de envío, hará una petición a la misma dirección.
 30 | 
 31 | Lo que puede que resulte en que no ocurra nada
 32 | 
 33 | Se necesita algo del lado del servidor para manejar la petición, y normalmente se "escuchan" estos eventos por medio de una dirección dedicada.
 34 | 
 35 | Puedes especificar la dirección por medio el parámetro `action`:
 36 | 
 37 | ```html
 38 | <form action="/new-contact" method="POST">
 39 | 	...
 40 | </form>
 41 | ```
 42 | 
 43 | Esto causará que el navegador envíe los datos de formulario con método POST a la dirección `/new-contact` del mismo origen.
 44 | 
 45 | Si el origen (esto es, protocolo + dominio + puerto) es `https://flaviocopes.com` (siendo el puerto 80 el usado por defecto), esto significa que los datos del formulario serán enviados a `https://flaviocopes.com/new-contact `.
 46 | 
 47 | Hablé de datos, ¿pero cuáles datos?
 48 | 
 49 | Los datos son provistos por los usuarios por medio de un conjunto de controles que están disponibles en la plataforma web:
 50 | 
 51 | - Cajas de texto (de línea única)
 52 | - Áreas de texto (de líneas múltiples)
 53 | - Cajas de selección (de selección única de una lista)
 54 | - Botones radio (o _radio buttons_, de selección única de una lista siempre visible)
 55 | - Cajas de tildado (o _checkboxes_, de selección múltiple, o ninguna)
 56 | - Subida de archivos
 57 | - ¡Y mucho más!
 58 | 
 59 | Procederé a presentar cada uno de ellos a continuación.
 60 | 
 61 | ## La etiqueta `input`
 62 | Este campo es uno de los elementos de formulario más usados. También es un elemento muy versátil, que puede cambiar completamente su comportamiento basado en su atributo `type`.
 63 | 
 64 | El comportamiento por defecto es de un control de línea única:
 65 | 
 66 | ```html
 67 | <input>
 68 | ```
 69 | 
 70 | Y eso es equivalente a:
 71 | 
 72 | ```html
 73 | <input type="text">
 74 | ```
 75 | 
 76 | Como con todos los otros campos a continuación, se debe dar un nombre al campo para que su contenido sea correctamente identificado al ser enviado el formulario al servidor:
 77 | 
 78 | ```html
 79 | <input type="text" name="username">
 80 | ```
 81 | 
 82 | El atributo `placeholder` se usa para mostrar texto dentro del elemento, en color gris claro, cuando esté vacío. Es útil para dar una pista al usuario de qué información introducir:
 83 | 
 84 | ```html
 85 | <input type="text" name="username" placeholder="Su nombre de usuario">
 86 | ```
 87 | 
 88 | ### Email
 89 | 
 90 | Usar `type="email"` validará la información introducida del lado del cliente (en otras palabras, en el navegador), para asegurarse que esté semáticamente correcto (lo que significa que no verificará si existe el correo), antes de enviar el formulario.
 91 | 
 92 | ```html
 93 | <input type="email" name="email" placeholder="Su correo">
 94 | ```
 95 | 
 96 | ### Contraseña
 97 | 
 98 | Usar `type="password"` hará que cualquier información introducida se muestre como un asterisco (*), o un punto, útil para campos que estén destinados a contraseñas.
 99 | 
100 | ```html
101 | <input type="password" name="password" placeholder="Su contraseña">
102 | ```
103 | 
104 | ### Números
105 | 
106 | Puede tener un campo que únicamente reciba números:
107 | 
108 | ```html
109 | <input type="number" name="edad" placeholder="Su edad">
110 | ```
111 | 
112 | Puede especificar un valor máximo y mínimo por medio de los atributos `max` y `min`, respectivamente:
113 | 
114 | ```html
115 | <input type="number" name="edad" placeholder="Su edad" min="18" max="110">
116 | ```
117 | 
118 | El atributo `step` permite establecer los 'pasos' entre distintos valores. Por ejemplo, este campo acepta un valor entre 10 y 50, en incrementos de 5 unidades:
119 | 
120 | ```html
121 | <input type="number" name="un-numero"  min="10" max="50" step="5">
122 | ```
123 | 
124 | ### Campo oculto
125 | 
126 | Los campos pueden estar ocultos del usuario, pero aún así su información será enviada al servidor:
127 | 
128 | ```html
129 | <input type="hidden" name="campo-oculto" value="algun-valor">
130 | ```
131 | 
132 | Esto es usado para almacenar valores como un token CSRF, conocido por ser útil para seguridad e identificación de usuario, e inclusive la detección de bots de envío de spam, usando técnicas especiales.
133 | 
134 | También se puede usar para identificar un formulario y su acción.
135 | 
136 | ### Configurando un valor por defecto
137 | 
138 | Todos estos tipos aceptan un valor por defecto. Si el usuario no lo cambia, ese será el valor enviado al servidor:
139 | 
140 | ```html
141 | <input type="number" name="edad" value="18">
142 | ```
143 | 
144 | Si usa un `placeholder`, ese valor aparecerá si el usuario borra el valor dentro del campo:
145 | 
146 | ```html
147 | <input type="number" name="edad" placeholder="Su edad" value="18">
148 | ```
149 | 
150 | ## Envío de formulario
151 | 
152 | El campo `type="submit"` es un botón que, una vez presionado, envía el formulario:
153 | 
154 | ```html
155 | <input type="submit">
156 | ```
157 | 
158 | El atributo `value` ajusta el texto del botón, el cual se ajusta por defecto a "Submit":
159 | 
160 | ```html
161 | <input type="submit" value="Haz click">
162 | ```
163 | 
164 | ## Validación de Formulario
165 | 
166 | Los navegadores proveen funcionalidades de validación del lado del cliente a los formularios.
167 | 
168 | Puedes ajustar los campos como sea requerido, asegurándose de que fueron rellenados, así como imponer un formato establecido para los datos de cada campo.
169 | 
170 | Veamos ambas opciones.
171 | 
172 | ### Establecer campos requeridos
173 | 
174 | El atributo `required` ayuda a validar los campos. Si el campo no está lleno, la validación del lado del cliente falla y el navegador no envía el formulario:
175 | 
176 | ```html
177 | <input type="text" name="nombre de usuario" required>
178 | ```
179 | 
180 | ### Establecer un formato específico
181 | 
182 | Describí el `type="email"` hace unos párrafos atrás. Automáticamente valida la dirección de correo electrónico de acuerdo con un formato establecido en su especificación.
183 | 
184 | En el campo `type="number"`, mencioné el atributo `min` y `max` para limitar los valores a cierto intervalo.
185 | 
186 | Pero puede hacer más.
187 | 
188 | Puede imponer un formato específico en cualquier campo.
189 | 
190 | El atributo `pattern` le otorga la habilidad de establecer una expresión regular, conocida como _regular expression_ en inglés, contra la cual comparar la información introducida.
191 | 
192 | Recomiendo leer mi guía de expresiones regulares en el siguiente [enlace](https://flaviocopes.com/javascript-regular-expressions/), en inglés.
193 | 
194 | ```html
195 | <input type="text" name="username" pattern="[a-zA-Z]{8}">
196 | ```
197 | 
198 | ## Otros campos
199 | 
200 | ### Subidas de archivos
201 | 
202 | Puede subir archios locales desde su computador y enviarlos al servidor usando un elemento con atributo `type="file"`:
203 | 
204 | ```html
205 | <input type="file" name="documentos-secretos">
206 | ```
207 | 
208 | Puede también adjuntar múltiples archivos:
209 | 
210 | ```html
211 | <input type="file" name="documentos-secretos" multiple>
212 | ```
213 | 
214 | Puede especificar uno o más tipos de archivo permitido con el atributo `accept`. Este ejemplo en particular acepta imágenes:
215 | 
216 | ```html
217 | <input type="file" name="documentos-secretos" accept="image/*">
218 | ```
219 | 
220 | Puede usar un tipo MIME específico, como `application/json`, o también establecer una o múltiples extensiones de archivo, como podría ser `.pdf`:
221 | 
222 | ```html
223 | <input type="file" name="secret-documents" accept=".jpg, .jpeg, .png">
224 | ```
225 | 
226 | ### Botones
227 | 
228 | Los campos `type="button"` pueden ser usados para agregar botones adicionales a el formulario, que no sean botones de envíos:
229 | 
230 | ```html
231 | <input type="button" value="Hazme click">
232 | ```
233 | 
234 | Son usados para hacer algo por medio de un método de código, usando JS.
235 | 
236 | Hay un campo especial mostrado como un botón, cuya acción es la de limpiar el formulario entero y reestablecer el estado de los campos:
237 | 
238 | ```html
239 | <input type="reset">
240 | ```
241 | 
242 | ### Botones radio
243 | 
244 | Son usados para crear un conjunto de elecciones dónde, si uno es presionado, los demás son deshabilitados.
245 | 
246 | El nombre viene de las antiguas radios de automóvil que tenían este tipo de interfaz.
247 | 
248 | Se define por medio de un conjunto de `type="radio"`, todos con el mismo atributo `name`, y diferentes atributos `value`:
249 | 
250 | ```html
251 | <input type="radio" name="color" value="amarillo">
252 | <input type="radio" name="color" value="rojo">
253 | <input type="radio" name="color" value="azul">
254 | ```
255 | 
256 | Una vez el formulario sea enviado, la propiedad de datos `color` tendrá un único valor.
257 | 
258 | Siempre hay al menos un elemento seleccionado. El primer objeto es el seleccionado por defecto.
259 | 
260 | Se puede establecer el valor preseleccionado por medio del atributo `checked`. Solo puede ser usado una vez por cada grupo de botones radio.
261 | 
262 | ### Cajas de tildado
263 | 
264 | Similares a los botones radio, pero permiten múltiples valores, o ninguno de ellos.
265 | 
266 | Se definen por medio de un conjunto de `type="checkbox"`, todos con el mismo atributo `name`, y diferentes atributos `value`:
267 | 
268 | ```html
269 | <input type="checkbox" name="color" value="amarillo">
270 | <input type="checkbox" name="color" value="rojo">
271 | <input type="checkbox" name="color" value="azul">
272 | ```
273 | 
274 | Ninguna de estas cajas estarán tildadas por defecto. Puede usar el atributo `checked` para tildarlas al cargar la página.
275 | 
276 | Ya que este campo permite múltiples valores, al enviar el formulario, estos serán enviados al servidor como un `array`.
277 | 
278 | ### Fecha y hora
279 | 
280 | Tenemos algunos campos que aceptan valores de fecha.
281 | 
282 | El campo `type="date"` permite al usuario introducir una fecha, y muestra un seleccionador si es necesario:
283 | 
284 | ```html
285 | <input type="date" name="cumpleaños">
286 | ```
287 | 
288 | El campo `type="time"` permite al usuario introducir una hora, y muestra un seleccionador si es necesario:
289 | 
290 | ```html
291 | <input type="time" name="hora-de-busqueda">
292 | ```
293 | 
294 | El campo `type="month"` permite al usuario introducir un mes y un año:
295 | 
296 | ```html
297 | <input type="month" name="mes-lanzamiento">
298 | ```
299 | 
300 | El campo `type="week"` permite al usuario introducir una semana y un año:
301 | 
302 | ```html
303 | <input type="week" name="elegir-semana">
304 | ```
305 | 
306 | Todos estos campos permiten limitar el rango y los incrementos entre cada valor. Recomiendo revisar la Red de Desarrolladores de Mozilla (abreviado MDN) para los pormenores de su uso.
307 | 
308 | El campo `type="datetime-local"` te permite elegir una fecha y una hora.
309 | 
310 | ```html
311 | <input type="datetime-local" name="fechar-y-hora">
312 | ```
313 | 
314 | Acá una [página](https://codepen.io/flaviocopes/pen/ZdWQPm) en la cual probarlos todos.
315 | 
316 | ### Selección de color
317 | 
318 | Puedes permitir que el usuario seleccione un color por medio del elemento `type="color"`:
319 | 
320 | ```html
321 | <input type="color" name="color-auto">
322 | ```
323 | 
324 | Puede ajustar un valor por defecto usando el atributo `value`:
325 | 
326 | ```html
327 | <input type="color" name="color-auto" value="#000000">
328 | ```
329 | 
330 | El navegador se encargará de mostrar un seleccionador al usuario.
331 | 
332 | ### Rango
333 | 
334 | Este elemento muestra una barra deslizante, la cual puede ser movida desde un valor de inicio hasta un valor final:
335 | 
336 | ```html
337 | <input type="range" name="edad" min="0" max="100" value="30">
338 | ```
339 | 
340 | Opcionalmente, se puede incluir el valor de los incrementos entre valores:
341 | 
342 | ```html
343 | <input type="range" name="age" min="0" max="100" value="30" step="10">
344 | ```
345 | 
346 | ### Teléfono
347 | 
348 | El campo `type="tel"` se usa para introducir un número de teléfono:
349 | 
350 | ```html
351 | <input type="tel" name="numero-telefono">
352 | ```
353 | 
354 | La ventaja de usar `tel` sobre `text` es que, en móviles, el dispositivo mostrará un teclado númerico.
355 | 
356 | Puede especificar un atributo `pattern` para validación adicional:
357 | 
358 | ```html
359 | <input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="numero-teléfono">
360 | ```
361 | 
362 | ### Dirección
363 | 
364 | El campo `type="url"` se usa para introducir una dirección.
365 | ```html
366 | <input type="url" name="sitio-web">
367 | ```
368 | 
369 | Se puede validar usando el atributo `pattern`:
370 | 
371 | ```html
372 | <input type="url" name="website"  pattern="https://.*">
373 | ```
374 | 
375 | ## La etiqueta `textarea`
376 | 
377 | El elemento `textarea` permite a los usuarios introducir texto multilinea. Comparado con `input`, requiere una etiqueta de clausura:
378 | 
379 | ```html
380 | <textarea></textarea>
381 | ```
382 | 
383 | Puede ajustar sus dimensiones usando CSS, así como también usando los atributos `rows` y `cols`:
384 | 
385 | ```html
386 | <textarea rows="20" cols="10"></textarea>
387 | ```
388 | 
389 | Como otras etiquetas de formulario, el atributo `name` determinar el nombre de los datos enviados al servidor:
390 | 
391 | ```html
392 | <textarea name="articulo"></textarea>
393 | ```
394 | 
395 | ## La etiqueta `select`
396 | 
397 | Esta etiqueta se usa para crear un menú desplegado.
398 | 
399 | Allí, el usuario puede elegir una de las opciones disponibles.
400 | 
401 | Cada opción se crea usando la etiqueta `option`. Se agrega un nombre a la selección, y un valor a cada opción:
402 | 
403 | ```html
404 | <select name="color">
405 | 	<option value="rojo">Rojo</option>
406 | 	<option value="amarillo">Amarillo</option>
407 | </select>
408 | ```
409 | 
410 | También puede deshabiltar alguna de las opciones:
411 | 
412 | ```html
413 | <select name="color">
414 | 	<option value="rojo" disabled>Rojo</option>
415 | 	<option value="amarillo">Amarillo</option>
416 | </select>
417 | ```
418 | 
419 | También puede tener una opción vacía:
420 | 
421 | ```html
422 | <select name="color">
423 | 	<option value="">None</option>
424 | 	<option value="rojo">Rojo</option>
425 | 	<option value="amarillo">Amarillo</option>
426 | </select>
427 | ```
428 | 
429 | Las opciones pueden ser agrupadas usando la etiqueta `optgroup`. Cada grupo de opciones tiene un atributo `label`:
430 | 
431 | ```html
432 | <select name="color">
433 | 	<optgroup label="Primarios">
434 | 		<option value="rojo">Rojo</option>
435 | 		<option value="amarillo">Amarillo</option>
436 | 		<option value="azul">Azul</option>
437 | 	</optgroup>
438 | 	<optgroup label="Otros">
439 | 		<option value="verde">Verde</option>
440 | 		<option value="rosa">Rosa</option>
441 | 	</optgroup>
442 | </select>
443 | ```
444 | 


--------------------------------------------------------------------------------