Introduccion a DHTML - Conceptos Basicos
La manera de utilizar HTML Dinámico es mediante el uso de las marcas DIV para Explorer y Layer para Netscape. Sin embargo, también se puede utilizar la marca DIV en Netscape, ya que ésta es tranformada internamente en un objeto Layer.
Dentro de estas marcas se puede colocar código HTML, como por ejemplo imágenes, tablas o formularios. La característica principal de ambos objetos es que poseen un conjunto de atributos que pueden ser modificables. Esto permite crear una infinidad de efectos como animaciones, menús, etc.
De ahora en adelante, usaremos solamente el objeto DIV, ya que como se dijo anteriormente, este es soportado tanto por Explorer como por Netscape y lo mas importante, soporta hojas de estilo. Para comenzar veamos un pequeño ejemplo.
<html>
<div id="nombre" style="position:absolute; top:10; left:50; width:200; background-color:#AADDFF; border-color:white; border-width:1">
Hola Mundo!
</div>
</html>
En este ejemplo, podemos ver un objeto DIV el cual esta ubicado 50 pixeles desde el margen izquierdo de la pantalla y 10 pixeles desde la parte superior de la pantalla. También se especifica el color de fondo.
Hay un elemento muy útil llamado SPAN similar a DIV. Su principal utilidad esta asociada al uso de hojas de estilo. Cuando se tiene un documento gobernado por una hoja de estilo, al encerrar una parte del texto con el elemento SPAN, este adopta las características propias del elemento SPAN dadas por su atributo STYLE.
El siguiente ejemplo, muestra el uso del elemento SPAN. En el, el texto encerrado dentro del elemento SPAN adquiere su propio estilo. Para ver el documento haga clic.
<html>
<style type="text/css">
P {color:red}
A {text-decoration:none; color:orange}
</style>
<body bgcolor=white>
<p>Texto usando la hoja de <a href=" ">estilo</a>
<span style="position:relative; color:blue">Texto usando SPAN</span></p>
</body>
</html>
Como vimos anteriormente, Netscape provee un elemento adicional para la creación de elementos posicionables, el cual no es reconocido por Explorer 4.0 o HTML 4.0. Para manipular el elemento Layer, basta con modificar el valor de los atributos en la forma document.myLayer.atributo = valor.
El siguiente código, genera el mismo despliege que en el primer ejemplo. Para ver el documento, haga clic (este código no puede visualizarse en Explorer).
<html>
<layer id="mylayer" top=10 left=50 width=200 bgcolor=#AADDFF> Hola Mundo! </layer>
</html>
Similar a la marca SPAN, el elemento Ilayer permite tener su propio diseńo al contenido almacenado en su interior. En el próximo ejemplo, el bloque interior tiene su propio color de fondo y su ubicación esta dada en relación al bloque exterior. Para ver el documento haga clic (este código no puede visualizarse en Explorer).
<html>
<layer id="mylayer" top=10 left=50 width=200 bgcolor=#AADDFF> Hola Mundo!
<ilayer id="inner" top=30 left=30 bgcolor=#FFFFAA height=50> Texto interior </ilayer>
</layer>
</html>
|
Opiniona sobre 'Introduccion a DHTML - Conceptos Basicos' (2)
Opina sobre este tutorial |
