Buscar Más buscado
Capitulos de este wiki
  1. 1 Conceptos Basicos
  2. 2 Atributos CSS-P
  3. 3 Referencias
  4. 4 Programación
  5. 5 Eventos
  6. 6 Handlers

Introduccion DHTML - Conceptos Basicos

1 - Conceptos Basicos

[editar]
Curso gratis creado por Carlos Castillo. Extraido de: http://www.tejedoresdelweb.com/307/article-1058.html
18 de Octubre de 2005
1 2 3 4 5 6 | siguiente >
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.

SPAN

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>

Layer

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>

ILayer

Similar a la marca SPAN, el elemento Ilayer permite tener su propio dise&nacute;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>
[editar]
1 2 3 4 5 6 | siguiente >

Opinar
1 opinión

opinion

necesito 20 aspectos de como ocupar dhtml

Cursos gratis relacionados con 'Introduccion DHTML'

Introduccion DHTML
Esta tecnologia permite posicionamiento dinamico de elementos, y es la extension natural de la idea... Más »
Introducción al diseño web
El diseño web va más allá del diseño gráfico, al influir en él multitud de... Más »
Fundamentos de diseño de Sitios Web
Cuando hablamos de un sitio web nos estamos refiriendo en realidad a un conjunto de... Más »
Estrategias publicitarias para Internet
Los modelos de publicidad en Internet se basan en sus dos principales aplicaciones: el correo... Más »
Proxys y anonimato
Para proteger nuestra navegación y filtrar la publicidad disponemos en el mundo windows de los... Más »

Anuncios Google

Autor y licencia de 'Introduccion DHTML'


Curso gratis de Carlos Castillo. Extraido de: http://www.tejedoresdelweb.com/307/article-1058.html CopyLeft
Los contenidos de este sitio pueden ser reproducidos solamente bajo estas condiciones. La licencia está respaldada con el registro de propiedad intelectual número 97.125 en Chile y otros países.
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.