HTML desde cero – Clase 4

En la clase 1 hicimos una página muy sencilla. En la clase 2 agregamos negrita, cursiva, enlaces. En la tercera clase le agregamos imágenes, título y encabezados.

En esta cuarta clase vamos a utilizar listas numeradas y no numeradas, y un mínimo de tablas.

Listas

  • Comienzo de lista numerada: <ol>
  • Fin de lista numerada: </ol>
  • Comienzo de lista no numerada (viñetas): <ul>
  • Fin de lista no numerada: </ul>
  • Comienzo ítem de lista: <li>
  • Fin de ítem de lista: </li>

Cada vez que necesitamos tener un conjunto de párrafos con viñetas, o con un símbolo al lado, debemos utilizar listas ordenadas (OL, “orderer) o no ordenadas (UL, “unorderer list”).ejemplo de ol y ul

<h1>Comienzo de clases</h1>
<h2>Resultado del campeonato de truco</h2>
<ol>
<li>Pérez</li>
<li>Gómez</li>
<li>Fernández</li>
<li>Rodríguez</li>
</ol>
<h2>Lista de elementos a traer</h2>
<ul>
 <li>Birome</li>
<li>Cuaderno</li>
<li>Hilo de pizza</li>
<li>Instrumento musica (no piano)</li>
</ul>

Tablas

  • Comienzo de tabla: <table>
  • Fin de tabla: </table>
  • Comienzo de fila de tabla (row): <tr>
  • Fin de fila de tabla: </tr>
  • Comienzo de datos de la tabla (data): <td>
  • Fin de datos de tabla: </td>
  • Comienzo de encabezados de tabla (heading): <th>
  • Fin de encabezados de tabla: </th>

Es muy importante saber que se deben usar tablas solamente cuando los datos pueden presentarse claramente como una tabla, es decir tienen más de una columna y más de una fila. Hace unos cuántos años se usaban tablas invisibles para acomodar objetos en la pantalla, pero estas le están indicando a los lectores de pantalla algo que no es, lo cual hace imposible la comprensión para una persona invidente o que utiliza ayudas técnicas.
Tabla

<h2>Resultado del campeonato de truco</h2>

<table>
<tr>
<th>Apellido</th>
<th>Nombre</th>
<th>Puntaje</th>
</tr>
<tr> <td>Pérez</td>
<td>Juan</td>
<td>300</td> </tr>
<tr> <td>Gómez</td>
<td>Juana</td>
<td>299</td> </tr>
<tr> <td>Rodríguez</td>
<td>Andrés</td>
<td>99</td> </tr>
</table>

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *