HTML, Elegir el elemento correcto
Como con otros lenguajes de programación, con HTML hay muchas maneras o métodos
diferentes de conseguir su objetivo. No hay una sola forma correcta de hacer algo.
Hay sin embargo maneras incorrectas de hacer algo. Elegir que elemento es el más
apropiado para sus necesidades es por supuesto importante, pero habrá veces en las
que pueda usar cualquiera de los 2 o 3 elementos seleccionados.
Vamos a hacer un
ejemplo.
<html>
<head>
<title>Tabla Flotante</title>
</head>
<body>
<table style="float: right"
border="0"
cellspacing="0"
cellpadding="0"
width=100>
<tr>
<td valign="top" align="center">
<img src="images/STUCK.gif" border=0
/>
<br
/>
<p align="left">Algun texto va aqui.</p>
</td>
</tr>
</table>
<h1>Tabla Flotante</h1>
Aqui podemos ver que usamos un elemento tabla.
</body>
</html>
Ahora con el ejemplo de arriba hacemos uso del elemento tabla como contenedor de
la imagen. Copie y pegue el código de arriba en el recuadro de Vista del Código
y haga clic en “Renderizar”.
El siguiente ejemplo, conseguiremos la misma apariencia como en el ejemplo de arriba
pero usaremos el elemento div. Copie y pegue el código de abajo en el recuadro de
Vista de Código y haga clic en “Renderizar”.
<html>
<head>
<title>DIV Flotante</title>
</head>
<body>
<div style="float: right; width: 100px;">
<img
src="images/STUCK.gif" border="0"
/>
<br />
<p align="left">Algun texto va aqui.</p>
</div>
<h1>DIV Flotante</h1>
Aqui podemos ver que usamos un elemento div.
</body>
</html>
Puede ver que el resultado es el mismo. Así que no pase demasiado tiempo decidiendo
qué elemento es el mejor para su objetivo. Conforme gane más experiencia sus decisiones
sobre el mejor elemento llegarán a ser más fáciles. De acuerdo con los ejemplos
de arriba, ambos consiguen el mismo objetivo. En una situación real, si yo nunca
fuera a expandir la página usaría el elemento
<div>. Si hay una
posibilidad de expandir la página usaría el elemento <table>. Todo depende de su objetivo.
Aquí tenemos otro ejemplo. Esta vez usaremos el elemento
<p>.
<html>
<head>
<title>P Flotante</title>
</head>
<body>
<p
style="float: right; width: 100px;">
<img src="images/STUCK.gif" border="0"
/>
<br />
Algun texto va aqui.
</p>
<h1>P Flotante</h1>
Aqui podemos ver que usamos un elemento p.
</body>
</html>
El resultado es el mismo. ¡Chulo, eh!
|