Potafolio 2C-2
Programación II
Aprendamos a Programar
Manejo de Capas
CAPAS O CONTENEDORES HTML
Las capas o contenedores son unos recuadros o espacios rectangulares que pueden colocarse en cualquier parte de la página. En ellas, podemos insertar contenido HTML. Su utilidad principal es visual, permitiendo organizar y dar estructura y diseño a las páginas HTML.
ETIQUETA DIV
Podemos insertar una capa o contenedor a través de las etiquetas <div> y </div>
A través del atributo style se establecen las propiedades de estilo de la capa mediante el lenguaje CSS. Nosotros no vamos a estudiar CSS en este curso, pero incluiremos estilos muy básicos para facilitar la comprensión del código de ejemplo que iremos viendo.
Imaginemos que queremos crear una página web con 3 partes diferenciadas: cabecera, cuerpo y pie. Crea un archivo html con el siguiente código y visualízalo en tu navegador.
01 /
Formato de capas utilizando la etiqueta "DIV"
Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos que puede contener un documento HTML.
En el editor de páginas web de Macromedia Dreamweaver (Frontpage no trabaja con capas) el icono nos indica cada una de las capas que incorporemos a la página. Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa. También podemos seleccionar la capa pinchando en el cuadrado. Este recuadrado sirve, además para arrastrarla hasta el punto exacto que deseemos. Con los cuadrados rellenos podemos estirar o encoger la capa adaptando su tamaño a las necesidades.
02 /
Que podemos insertar dentro de las Capas
05 /
<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>
Algunas Propiedades Estudiadas
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>
</head>
<body>
<div style="border: 1px solid red;">
Cabecera de la página.
</div>
<div style="border: 1px solid green;">
Cuerpo de la página.
</div>
<div style="border: 1px solid blue;">
Pie de la página
</div>
</body>
</html>