Añade name para details, amplia explicaciones sobre grid (CSS) y añade ejercicios de Javascript

Author: José Miguel Sánchez Alés

docs/06.html/04.basico.html

@@ -251,7 +251,23 @@ <h2><span class="section-number">6.4.2. </span>Elementos de párrafo<a class="he
 <div class="ej-html"><details>
    <summary>Datos</summary>
    Extraidos del <a href="https://www.ine.es">Instituto Nacional de Estadistica</a>.
-</details></div></dd>
+</details></div><table class="attr-html docutils align-default" id="id6">
+<caption><span class="caption-text">Atributos de details</span><a class="headerlink" href="#id6" title="Enlace permanente a esta tabla">¶</a></caption>
+<tbody>
+<tr class="row-odd"><td><p>open</p></td>
+<td><p>-</p></td>
+<td><p>Muestra abierto los detalles.</p></td>
+</tr>
+<tr class="row-even"><td><p>name</p></td>
+<td><p>token</p></td>
+<td><p>Permite relacionar todos los elementos
+<a class="reference internal" href="#html-details"><span class="std std-ref">&lt;details&gt;</span></a> cuyo valor de este atributo sea
+el mismo. Esto provoca que solamente uno
+del grupo pueda estar abierto.</p></td>
+</tr>
+</tbody>
+</table>
+</dd>
 </dl>
 <span id="index-5"></span><dl id="html-address">
 <dt><strong>address</strong> (<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address#technical_summary">address</a>)</dt><dd><p>elemento de bloque que permite definir una información de contacto relativa a
@@ -509,8 +525,8 @@ <h2><span class="section-number">6.4.2. </span>Elementos de párrafo<a class="he
 <span id="index-23"></span><dl id="html-img">
 <dt><strong>img</strong> (<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#technical_summary">img</a>)</dt><dd><p>Permite incrustar una imagen en la página <abbr title="HyperText Markup Language">HTML</abbr>. Existen otros modos de
 incrustar imágenes <a class="reference internal" href="09.media.html#html-media"><span class="std std-ref">que se verán más adelante</span></a>.</p>
-<table class="attr-html docutils align-default" id="id6">
-<caption><span class="caption-text">Atributos más frecuentes para &lt;img&gt;</span><a class="headerlink" href="#id6" title="Enlace permanente a esta tabla">¶</a></caption>
+<table class="attr-html docutils align-default" id="id7">
+<caption><span class="caption-text">Atributos más frecuentes para &lt;img&gt;</span><a class="headerlink" href="#id7" title="Enlace permanente a esta tabla">¶</a></caption>
 <tbody>
 <tr class="row-odd"><td><p>src</p></td>
 <td><p>url</p></td>
@@ -557,8 +573,8 @@ <h2><span class="section-number">6.4.2. </span>Elementos de párrafo<a class="he
 </dl>
 <span id="index-24"></span><dl id="html-a">
 <dt><strong>a</strong> (<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#technical_summary">a</a>)</dt><dd><p>Es el elemento en línea que permite crear hipervínculos.</p>
-<table class="attr-html docutils align-default" id="id7">
-<caption><span class="caption-text">Atributos más habituales para &lt;a&gt;</span><a class="headerlink" href="#id7" title="Enlace permanente a esta tabla">¶</a></caption>
+<table class="attr-html docutils align-default" id="id8">
+<caption><span class="caption-text">Atributos más habituales para &lt;a&gt;</span><a class="headerlink" href="#id8" title="Enlace permanente a esta tabla">¶</a></caption>
 <tbody>
 <tr class="row-odd"><td><p>href</p></td>
 <td><p>url</p></td>
@@ -672,8 +688,8 @@ <h2><span class="section-number">6.4.4. </span>Contenido informático<a class="h
 <dt><strong>time</strong> (<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#technical_summary">time</a>)</dt><dd><p>El elemento permite escribir una hora o fecha en formato legible por un
 humano, pero de modo que también pueda ser procesado por una máquina. Tiene
 un atributo:</p>
-<table class="attr-html docutils align-default" id="id8">
-<caption><span class="caption-text">Atributos para time</span><a class="headerlink" href="#id8" title="Enlace permanente a esta tabla">¶</a></caption>
+<table class="attr-html docutils align-default" id="id9">
+<caption><span class="caption-text">Atributos para time</span><a class="headerlink" href="#id9" title="Enlace permanente a esta tabla">¶</a></caption>
 <tbody>
 <tr class="row-odd"><td><p>datetime</p></td>
 <td><p>hora/fecha</p></td>
@@ -749,8 +765,8 @@ <h2><span class="section-number">6.4.5. </span>Elementos de revisión<a class="h
 <dt><strong>del</strong> (<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del#technical_summary">del</a>)</dt><dd><p>Marca el texto eliminado. Véase el ejemplo anterior.</p>
 </dd>
 </dl>
-<table class="attr-html docutils align-default" id="id9">
-<caption><span class="caption-text">Atributos de ins/del</span><a class="headerlink" href="#id9" title="Enlace permanente a esta tabla">¶</a></caption>
+<table class="attr-html docutils align-default" id="id10">
+<caption><span class="caption-text">Atributos de ins/del</span><a class="headerlink" href="#id10" title="Enlace permanente a esta tabla">¶</a></caption>
 <tbody>
 <tr class="row-odd"><td><p>cite</p></td>
 <td><p>[url]</p></td>
@@ -788,8 +804,8 @@ <h3><span class="section-number">6.4.6.1. </span>Listas numeradas y no numeradas
 que componen una lista numerada (<code class="code docutils literal notranslate"><span class="pre">&lt;ol&gt;</span></code>) o no numerada (<code class="code docutils literal notranslate"><span class="pre">&lt;ul&gt;</span></code>).
 Están constituidos exclusivamente por elementos <code class="code docutils literal notranslate"><span class="pre">&lt;li&gt;</span></code>.</p>
 <p>Tanto para uno como para otro elemento es posible añadir tres opciones:</p>
-<table class="attr-html docutils align-default" id="id10">
-<caption><span class="caption-text">Atributos de ol/ul</span><a class="headerlink" href="#id10" title="Enlace permanente a esta tabla">¶</a></caption>
+<table class="attr-html docutils align-default" id="id11">
+<caption><span class="caption-text">Atributos de ol/ul</span><a class="headerlink" href="#id11" title="Enlace permanente a esta tabla">¶</a></caption>
 <tbody>
 <tr class="row-odd"><td><p>start</p></td>
 <td><p>[num]</p></td>
@@ -817,8 +833,8 @@ <h3><span class="section-number">6.4.6.1. </span>Listas numeradas y no numeradas
 anidarlas.</p>
 <p>No es necesario cerrar el elemento, ya que se considera cerrado cuando se
 abre otro <code class="code docutils literal notranslate"><span class="pre">&lt;li&gt;</span></code> o cuando acaba la lista.</p>
-<table class="attr-html docutils align-default" id="id11">
-<caption><span class="caption-text">Atributos de li</span><a class="headerlink" href="#id11" title="Enlace permanente a esta tabla">¶</a></caption>
+<table class="attr-html docutils align-default" id="id12">
+<caption><span class="caption-text">Atributos de li</span><a class="headerlink" href="#id12" title="Enlace permanente a esta tabla">¶</a></caption>
 <tbody>
 <tr class="row-odd"><td><p>value</p></td>
 <td><p>[num]</p></td>

docs/06.html/index.html

@@ -201,6 +201,7 @@ <h3>Navegación</h3>
 <li><p><a class="reference external" href="http://lenguajehtml.com/p/html/">Guía bastante completa en castellano de los elementos HTML</a>.</p></li>
 <li><p><a class="reference external" href="https://html5andcss3.org/html5history.php">Referencia a algunos elementos de HTML5</a></p></li>
 <li><p><a class="reference external" href="https://html.spec.whatwg.org/multipage/">Norma viva de HTML5</a></p></li>
+<li><p><a class="reference external" href="https://www.htmhell.dev/">HTMHell</a>, página que recoge recetas de malas y de buenas prácticas.</p></li>
 </ul>
 <p class="rubric">Notas al pie</p>
 <aside class="footnote-list brackets">

docs/07.css/02.sintaxis.html

@@ -774,7 +774,7 @@ <h3><span class="section-number">7.2.2.3. </span>Lista<a class="headerlink" href
 <span class="p">}</span>
 
 <span class="nt">pre</span><span class="w"> </span><span class="p">{</span>
-<span class="w">   </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="n">ble</span><span class="p">;</span>
+<span class="w">   </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">blue</span><span class="p">;</span>
 <span class="p">}</span>
 </pre></div>
 </div>