DIV
div de "division" - división . Sirve para crear secciones o agrupar contenidos.
Sus etiquetas son: <div> y </div> (ambas obligatorias). <div> se usa para agrupar uno o más elementos a nivel de bloque. Ejemplo 1: <div style="color:#0000FF"> <h3>este es un Titulo</h3> <p>Este es un párrafo.</p> </div> |
Ejemplo 2
<div style="color: blue;"> <h2> Ejemplo de div y span </h2> <p> Esto es un párrafo dentro de un div, <span style="color: red;"> y esto un span dentro de un párrafo.</span> </p> </div> Ejemplo 3 <div > <h3>Grupo 1</h3> <p>Este bloque tiene definido el texto de color rojo.</p> </div> <div > <h3>Grupo 2</h3> <p>Este bloque tiene definido el texto de color verde.</p> </div> |
A través del atributo id se le da un nombre a la capa, y a través del atributo style se establecen el resto de propiedades de la capa.
A través de las propiedades left (izquierda) y top (superior) se establece la posición de la capa respecto a los márgenes izquierdo y superior de la página. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
Para que la capa aparezca en la posición establecida, es necesario incluir también la propiedad position con el valor absolute. Si no se estableciera este valor, la capa se mostraría pegada al margen izquierdo, en la posición en la que hubiera sido insertada dentro del código.
A través de las propiedades width (anchura) y height (altura) se establece el tamaño de la capa. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
A través de la propiedad z-index puede establecerse el índice de la capa dentro de la página. Una capa podrá ser solapada por aquellas capas cuyo índice sea mayor. Siempre es un valor numérico.
A través de la propiedad visibility puede establecerse la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta).
A través de las propiedades layer-background-image y background-image se puede establecer una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.
A través de las propiedades layer-background-color y background-color se puede establecer un color de fondo para la capa. Ha de ser un número hexadecimal.
A través de la propiedad overflow puede establecerse si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa sea más grande), hidden (no es posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario).
A través de la propiedad clip puede establecerse el área de la capa que podrá ser visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles. Ha de especificarse la distancia de los márgenes de la capa entre paréntesis, después de la palabra url.
El primer valor ha de ser la distancia (se asume que está en píxeles) del margen superior, hasta la que no se visualizará el contenido de la capa.
El segundo valor ha de ser la distancia del margen izquierdo, hasta la que no se visualizará el contenido de la capa.
El tercer valor ha de ser la distancia del margen superior, hasta la que se visualizará el contenido de la capa.
El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se visualizará el contenido de la capa.
También es posible incluir auto como valor de alguna de estas distancias, lo que indica que la distancia se corresponderá con los bordes de la capa.
Todas estas propiedades se especifican a través del atributo style, y deben aparecer entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos).
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:
<div id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibility: visible; background-color: #0099CC; layer-background-color: #0099CC; background-image: url(imagenes/fondocapa.gif); layer-background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);">
Este texto está dentro de una capa.
</div>
Otra forma de insertar capas es utilizando las etiquetas <span> y </span>, en lugar de las etiquetas <div> y </div>.
La etiqueta <span> se utiliza del mismo modo que la etiqueta <div>, y es compatible con un mayor número de navegadores.
También existen las etiquetas <layer> y </layer>, pero solamente son reconocidas por el navegador Netscape.
La principal diferencia de la etiqueta <layer>, en lo que se refiere a las otras dos, es que las propiedades de la capa se especifican como atributos independientes, y no como valores dentro del atributo style.
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:
<layer name="capa" width="200px" height="115px" z-index="3" visibility="show" bgcolor="#0099CC"
background="imagenes/fondocapa.gif">
Este texto está dentro de una capa.
</layer>
A través de las propiedades left (izquierda) y top (superior) se establece la posición de la capa respecto a los márgenes izquierdo y superior de la página. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
Para que la capa aparezca en la posición establecida, es necesario incluir también la propiedad position con el valor absolute. Si no se estableciera este valor, la capa se mostraría pegada al margen izquierdo, en la posición en la que hubiera sido insertada dentro del código.
A través de las propiedades width (anchura) y height (altura) se establece el tamaño de la capa. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
A través de la propiedad z-index puede establecerse el índice de la capa dentro de la página. Una capa podrá ser solapada por aquellas capas cuyo índice sea mayor. Siempre es un valor numérico.
A través de la propiedad visibility puede establecerse la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta).
A través de las propiedades layer-background-image y background-image se puede establecer una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url.
A través de las propiedades layer-background-color y background-color se puede establecer un color de fondo para la capa. Ha de ser un número hexadecimal.
A través de la propiedad overflow puede establecerse si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa sea más grande), hidden (no es posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario).
A través de la propiedad clip puede establecerse el área de la capa que podrá ser visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles. Ha de especificarse la distancia de los márgenes de la capa entre paréntesis, después de la palabra url.
El primer valor ha de ser la distancia (se asume que está en píxeles) del margen superior, hasta la que no se visualizará el contenido de la capa.
El segundo valor ha de ser la distancia del margen izquierdo, hasta la que no se visualizará el contenido de la capa.
El tercer valor ha de ser la distancia del margen superior, hasta la que se visualizará el contenido de la capa.
El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se visualizará el contenido de la capa.
También es posible incluir auto como valor de alguna de estas distancias, lo que indica que la distancia se corresponderá con los bordes de la capa.
Todas estas propiedades se especifican a través del atributo style, y deben aparecer entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos).
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:
<div id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibility: visible; background-color: #0099CC; layer-background-color: #0099CC; background-image: url(imagenes/fondocapa.gif); layer-background-image: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);">
Este texto está dentro de una capa.
</div>
Otra forma de insertar capas es utilizando las etiquetas <span> y </span>, en lugar de las etiquetas <div> y </div>.
La etiqueta <span> se utiliza del mismo modo que la etiqueta <div>, y es compatible con un mayor número de navegadores.
También existen las etiquetas <layer> y </layer>, pero solamente son reconocidas por el navegador Netscape.
La principal diferencia de la etiqueta <layer>, en lo que se refiere a las otras dos, es que las propiedades de la capa se especifican como atributos independientes, y no como valores dentro del atributo style.
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:
<layer name="capa" width="200px" height="115px" z-index="3" visibility="show" bgcolor="#0099CC"
background="imagenes/fondocapa.gif">
Este texto está dentro de una capa.
</layer>
Marcos = Frame
Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargua una página html distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no podrán verlos.
Sintaxis
Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorará.
Un ejmplo sencillo es el siguiente:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<FRAMESET ROWS=75,*> <FRAME SRC="frames1.htm" >
<FRAME SRC="frames2.htm" > </FRAMESET>
<NOFRAMES>
<BODY> Lo siento,su navegador no soporta frames. Pulse <a href="frames1.htm>aquí </A> para acceder a los contenidos de estas páginas.
</BODY>
</NOFRAMES>
</HTML>
Los frames (en inglés frame = cuadro, bastidor o marco) es un elemento implementado por Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. No hay límites para el contenido de cada una de estas áreas: tienen las mismas propiedades que la pantalla completa normal, tal y como la conocemos. No hay que confundir los frames con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido de la celda de una tabla es fijo, en un área de pantalla creado por el elemento FRAME se dispone de todos los recursos del HTML. Es una zona viva.Las páginas que contienen una definición de FRAME no pueden contener el elemento BODY ni ninguno de los elementos que habitualmente aparecen en el BODY antes del elemento FRAMESET que es el que define la creación del FRAME. Si esto no se cumple, el FRAME será ignorado.
Algunos visualizadores no soportan los frames. Para que nuestra página con frames no resulte opaca a ellos, se utilizará el elemento NOFRAMES que permite ofrecer un texto alternativo en entorno normal.
Los frames permiten una flexibilidad de presentación extraordinaria, y para contenidos muy complejos, de difícil estructura por los medios convencionales del HTML, son casi insustituibles. De nuevo se presenta la duda de para qué visualizador es preferible programar nuestro WWW.
Por supuesto, los frames son parametrizables en cuanto a tamaño y número de áreas, si éstas se pueden redimensionar por el usuario o son fijas, si tienen o no barras de scrolling, se pueden anidar, relacionar sus contenidos, etc
Realice los ejemplos de la Pagina
https://www.uv.es/jac/guia/frame.htm
Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargua una página html distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no podrán verlos.
Sintaxis
Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorará.
Un ejmplo sencillo es el siguiente:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<FRAMESET ROWS=75,*> <FRAME SRC="frames1.htm" >
<FRAME SRC="frames2.htm" > </FRAMESET>
<NOFRAMES>
<BODY> Lo siento,su navegador no soporta frames. Pulse <a href="frames1.htm>aquí </A> para acceder a los contenidos de estas páginas.
</BODY>
</NOFRAMES>
</HTML>
Los frames (en inglés frame = cuadro, bastidor o marco) es un elemento implementado por Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. No hay límites para el contenido de cada una de estas áreas: tienen las mismas propiedades que la pantalla completa normal, tal y como la conocemos. No hay que confundir los frames con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido de la celda de una tabla es fijo, en un área de pantalla creado por el elemento FRAME se dispone de todos los recursos del HTML. Es una zona viva.Las páginas que contienen una definición de FRAME no pueden contener el elemento BODY ni ninguno de los elementos que habitualmente aparecen en el BODY antes del elemento FRAMESET que es el que define la creación del FRAME. Si esto no se cumple, el FRAME será ignorado.
Algunos visualizadores no soportan los frames. Para que nuestra página con frames no resulte opaca a ellos, se utilizará el elemento NOFRAMES que permite ofrecer un texto alternativo en entorno normal.
Los frames permiten una flexibilidad de presentación extraordinaria, y para contenidos muy complejos, de difícil estructura por los medios convencionales del HTML, son casi insustituibles. De nuevo se presenta la duda de para qué visualizador es preferible programar nuestro WWW.
Por supuesto, los frames son parametrizables en cuanto a tamaño y número de áreas, si éstas se pueden redimensionar por el usuario o son fijas, si tienen o no barras de scrolling, se pueden anidar, relacionar sus contenidos, etc
Realice los ejemplos de la Pagina
https://www.uv.es/jac/guia/frame.htm
Realice los ejercicios de la siguiente pagina DIV
http://www.ite.educacion.es/formacion/materiales/182/cd/seis/la_etiqueta_div.html
Luego cree una pagina WEB, sobre 10 animales que estén en vía de extinción.
Utilizando DIV, tablas y enlaces a cada Animal, donde se describa, su nombre científico, historia , Tipo de habitad , imágenes y recomendaciones de cuidado.
http://www.ite.educacion.es/formacion/materiales/182/cd/seis/la_etiqueta_div.html
Luego cree una pagina WEB, sobre 10 animales que estén en vía de extinción.
Utilizando DIV, tablas y enlaces a cada Animal, donde se describa, su nombre científico, historia , Tipo de habitad , imágenes y recomendaciones de cuidado.