Ejemplo código HTML

Publicada el | por admin

Para crear «bloques desplegables» hay que abrir la pestaña de edición HTML e introducir las siguientes etiquetas HTML:

<div class=»bloque»>Texto visible<div class=»amplia»>Texto oculto</div></div>

Hay que fijarse bien en que el anidado sea correcto, el elemento etiquetado con la clase «bloque» debe envolver al etiqueta con las clase «amplia»; además debe haber algún tipo de texto dentro de «bloque» y fuera de «amplia» para poder ampliar el texto oculto.

A continuación un ejemplo, primero el código HTML, después el resultado visual de dicho código.

Código HTML
<div class="bloque">
 <div class="resalta">Itinerarios</div>
 <table class="amplia">
  <tr>
   <td valign="top">
    <div class="resalta">Itinerario A</div>
    <ul>
     <li>Matemáticas B</li>
     <li>Biología y Geología</li>
     <li>Física y Química</li>
     <li>Francés | Informática | Tecnología</li>
    </ul>
   </td>
   <td valign="top">
    <div class="resalta">Itinerario B</div>
    <ul>
     <li>Matemáticas A | Matemáticas B</li>
     ...
    </ul>
   </td>
   <td valign="top">
    <div class="resalta">Itinerario C</div>
    <ul>
     <li>Matemáticas A</li>
     ...
    </ul>
   </td>
  </tr>
  <tr>
   <td colspan="3">
    <span class="nota">Cada asignatura supone 3 horas lectivas semanales.</span>
   </td>
  </tr>
 </table>
</div>
Visualización
Itinerario A
  • Matemáticas B
  • Biología y Geología
  • Física y Química
  • Francés | Informática | Tecnología
Itinerario B
  • Matemáticas A | Matemáticas B
  • Latín
  • Francés | Informática
  • Informática | Música
Itinerario C
  • Matemáticas A
  • Tecnología
  • Educación Plástica
  • Música | Informática | Francés
Cada asignatura supone 3 horas lectivas semanales.