Etiquetas "Marquee & Table"

El code que utilizo para los banner de publicidad, es simplemente un "marquee" con imágenes {AQUI TUTORIAL} & estas mismas están ordenadas por "tabla".
Explicare como esta organizado, para entender mejor sobre "imágenes en movimiento" recomienzo que lean el tutorial correspondiente, en esta entrada pretendo basarme mas en la etiqueta "table":
ANTES DE COMENZAR:
El código general de una tabla es:
<table><tr>
<td> MMC TUTORIAL! </td>
</tr></table>
Quizá también puedan encontrarlo como:
<table><tbody><tr>
<td> MMC TUTORIAL! </td>
</tr></tbody></table>
Ahora si, comencemos:

CODIGO "MARQUEE DE IMAGENES":

<center>
<div style="overflow: hidden; margin-bottom: 3px;">
<a href="URL LINK" target="_blank" title="TITULO IMG"><img src="URL IMAGEN"/></a>
<marquee direction="up" scrollamount="3" onmouseover="this.stop()" onmouseout="this.start()">
<table width="200">
<tr><td>
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td><td>
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td></tr>
<tr><td>
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td><td>
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td></tr>
<tr><td>
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td><td>
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td></tr>
</table>
<table width="200">
<tr><td>
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
<br />
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
<br />
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td></tr>
</table><br />
</marquee></div>
</center>

EXPLICACION:

Esta primera parte que podemos ver al comienzo:
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/>
</a>
Representa la imagen estática, el banner de publicidad grande de "200x200"; Ademas de ser el código principal de una imagen con link de dirección.
Luego, comienza el código del marquee:
<marquee...
Desde que vemos la etiqueta "<table..." se entiende que comienza la tabla & así la organización de los banners. El primer table, representa los icons pequeños, & se ubican de 2 por fila:
<tr><td>
<a href="URL LINK" target="_blank" title="LET'S MICHI GO ~">
<img src="URL IMAGEN"/></a>
</td><td>
<a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td></tr>
Una ves que comienza <tr> & finaliza </tr>, creamos una "fila", que sera horizontal! No una columna, ya que esta seria vertical.
Profundicemos esta fila: Una ves que comienza <td> & finaliza </td> creamos una columna, vertical!:
<td><a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td>
En resumen, tenemos dos columnas en este caso, con dos icons 90x100 en una fila. & Si seguimos observando el codigo {POR EL MOMENTO DENTRO DEL 1ER TABLE}, tenemos 3 filas de 2 columnas ヾ(゚▽゚*)ノ
<table width="200"><tr> COMENZAMOS 1ra fila!<td><a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td><td><a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td></tr>
<tr> COMENZAMOS 2da fila!<td><a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td><td><a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td></tr>
<tr> COMENZAMOS 3ra fila!<td><a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td><td><a href="URL LINK" target="_blank" title="TITULO IMG">
<img src="URL IMAGEN"/></a>
</td></tr></table>
Si observamos el resto del código, veremos una NUEVA tabla, pero esta ves solo una fila & una columna, donde separo los banners {en este caso de 200x100} con un salto en linea: <BR/>

3 comentarios:

  1. Mell Amo el nuevo diseño *w* Casate conmigo(? xD!! loool no pero en serio me encanto tu diseño que envidia T___T tienes un blog hermoso :'3

    ResponderEliminar
  2. Me gusta mucho el diseño >.< me encanta ese color xD es mi favorito ¬¬ .. me alegra que postearas muchas gracias por el tuto ^^ ..

    ResponderEliminar
  3. jjeejej gracias por la tuto~~lo explicas perfecto!
    saludos

    ResponderEliminar