Taller de HTML

2- Caracteres, Tablas e Imágenes


Escuela Superior de Informática Buceo

Problemas con caracteres







  • La primer tabla de caracteres (ASCII) solo soportaba caracteres pertenecientes al alfabeto inglés.
  • En la década del 90 se construye el repertorio Unicode y se estandarizan tablas de caracteres que lo soporten.

Como usuario quiero arreglarlo en el navegador web


Como desarrollador quiero dar una solución prolija

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Codificación de caracteres</title>
  </head>
  <body>
  </body>
</html>
  • UTF-8: 8-bit Unicode Transfer Format
  • Funciona siempre y cuando se guarde el archivo codificado como UTF-8
  • Se pueden reconocer caracteres de cualquier lengua con solo escribirlos.

Como desarrollador quiero dar una solución desprolija a prueba de fallos.

  • Remplazar toda "á" por "&aacute;"
  • Remplazar toda  "à" por "&agrave;"
  • Remplazar toda "â" por "&acirc;"
  • Remplazar toda "ã" por "&atilde;"
    • En el español usamos la "ñ" como "&ntilde;"
  • Remplazar toda "ä" por "&auml;"

Caracteres especiales

  • <    -   &lt;
  • >    -  &gt;
  • &   -  &amp;

Mi primera tabla

<table>
  <tr>
    <th>Ciudad</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Cerro Largo</td>
    <td>Melo</td>
  </tr>
  <tr>
    <td>Flores</td>
    <td>Trinidad</td>
  </tr>
  <tr>
    <td>Lavalleja</td>
    <td>Minas</td>
  </tr>
</table>

OK, sin borde no es una tabla

<table border="1">
    [...]

Combinar celdas: ¿Cómo planificar?



Preguntas clave para cada celda:

  • ¿Cuantas filas ocupa?
  • ¿Cuantas columnas ocupa?

Combinar celdas: ¿Cómo codificar?

<table border="1">
    <tr>
        <th colspan="4">Diferencias entre el perro y el hombre</th>
    </tr>
    <tr>
        <th rowspan="2">Diferencias</th>
        <th colspan="2">Perro</th>
        <th rowspan="2">Hombre</th>
    </tr>
    <tr>
        <th>Pequeño</td>
        <th>Grande</td>
    </tr>
    <tr>
        <td>Duración crecimiento</td>
        <td>10 meses</td>
        <td>18 a 24 meses</td>
        <td>16 años</td>
    </tr>
    <tr>
        <td>Tiempo de gestación</td>
        <td colspan="2">58 a 63 días</td>
        <td>9 meses</td>
    </tr>
</table>

Resumen de una tabla

<table border="1">
    <caption>Diferencias entre el perro y el hombre</caption>
    <tr>
        <th rowspan="2">Diferencias</th>
        <th colspan="2">Perro</th>
        <th rowspan="2">Hombre</th>
    </tr>
    [...]
</table>

Empezando con Imágenes

  • Uso de la etiqueta

<img src="imagen.png"></img>

  • Dimensiones:
    • width: Ancho.  Pixeles o porcentaje
    • height: Alto. Pixeles o porcentaje
<img src="imagen.png" width="800" height="600"></img>


  • Texto alternativo
    • Atributo "alt"

Taller de HTML, capitulo 2- Caracteres, Tablas e Imágenes

By Daniel Francis

Made with Slides.com

Taller de HTML, capitulo 2- Caracteres, Tablas e Imágenes

  • 2,210

More from Daniel Francis