Código HTML en la Inserción de Imágenes

Si abrimos el archivo plantilla1.htm con el Dreamweaver y miramos el código podremos ver esto:

<html>
  <head>
    <title>Titulo de tu pagina : PONER SECCION</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
    <link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css">
  </head>
  <body bgcolor="#FFFFFF">
    <!---- Principio Tabla Primera ---->
    <table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td class="a1">Logotipo</td>
        <td class="a2">Banner</td>
      </tr>
  </table>
  <!---- Principio Tabla Segunda ---->
  <table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
    <tr>
      <td class="b1">titulo</td>
      <td class="b2">ruta</td>
      <td class="b3"><img src="atras.gif" width="13" height="19"> <img src="adelante.gif" width="13" height="19"></td>
    </tr>
  </table>
  <!---- Principio Tabla Tercera ---->
  <table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
    <tr>
      <td class="c1">
        <p>menu</p>
      </td>
      <td class="c2">
        <p>contenido</p>
      </td>
    </tr>
  </table>
  <!---- Principio Tabla Cuarta ---->
  <table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
    <tr>
      <td class="d1">contador</td>
      <td class="d2">opciones</td>
      <td class="d3"><img src="atras.gif" width="13" height="19"> <img src="adelante.gif" width="13" height="19"></td>
    </tr>
  </table>
  <!---- Principio Tabla Quinta ---->
  <table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
    <tr>
      <td class="e1">fecha</td>
      <td class="e2">hueco</td>
      <td class="e3">firma</td>
    </tr>
  </table>
  </body>
</html>

pero vamos a ver solo la parte de la celda b3, pues el código de la celda d3 es casi idéntico:

.....
<!---- Principio Tabla Segunda ---->
<table class="ancho99" width="99%" border="0px" cellspacing="0px" cellpadding="0px">
  <tr>
    <td class="b1">titulo</td>
    <td class="b2">ruta</td>
    <td class="b3"><img src="atras.gif" width="13" height="19"> <img src="adelante.gif" width="13" height="19"></td>
  </tr>
</table>
.....

Vemos que lo único que se ha cambiado del código es que en lugar de aparecer:

<td class="b3">flechas</td>

al borrar la palabra "flechas" e incluir las flechas se ha quedado así (os pongo en rojo lo nuevo):

<td class="b3">
<img src="atras.gif" width="13" height="19">
<img src="adelante.gif" width="13" height="19">
</td>

Pues bien, vemos que para incluir una imagen solo tenemos que irnos al código Html y escribir:

<img que significa que se va a meter una imagen.

src="...." poner la ruta del archivo de la imagen.

width="..." indicar el ancho de la imagen.

height="..." para indicar la altura de la imagen.

Fijaos que toda esa línea empieza y acaba con < y > es decir, hay que cerrarla tras definir en ella la ruta, ancho y alto con el símbolo >.

Eso sí, tal y como os decia otro día, es recomendable aunque no obligatorio añadir al lado del número el tipo de unidades de medida al que nos referimos. De modo que no estaría mal poner, a la derecha de cada número de anchura y altura las letras de pixeles "px", quedando el código así:

<td class="b3">

<img src="atras.gif" width="13px" height="19px">

<img src="adelante.gif" width="13px" height="19px">

</td>

Listo, ya sabéis como insertar imágenes, tanto con Dreamweaver como en el puro estilo "Html a mano", je je je. ¿No estáis contentos? Es que no os oigo aplaudir!!! je je je je.