Crea tu Web: Indice de diseño

El manual completo HTML en formato PDF
¡ sólo
4 €!
Tras confirmar el pago recibirá
el archivo en su email
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      Las capas o layers
      Capas

      Las capas son bloques con contenido HTML que ppueden posicionarse de manera dinámica y organizables en 3D. Realmente tienen sentido dentro de los estilos CSS, de hecho sus ventajas solo se pueden aprovechar al cien por cien utilizando estilos CSS. Es la mejor ilustración de lo que significa separar contenido de presentación.

      En realidad, el nombre de capas proviene de Netscape, que estos elementos los implementaba como <layers>, en castellano capas. Las versiones modernas de Netscape (de la 6 en adelante) ya no usan esta etiqueta si no que se han decantado por la más standard <div>

      No obstante la manipulación de estos elementos por parte de Micorsoft y Netscape son diferentes, ambos usan algunas extensiones propias, auqnue ambos admiten los standares de la W3C con lo que el uso de estos elementos es bastante universalizable.

      arriba


      Definición

      En realidad las capas no se difinen completamente mediante el lenguaje HTML, sino necesitan del lenguaje de definición de estilos CSS. Entre ambos podemos colocar en nuestras páginas estos elementos movibles, ocultables y en general manipulables de forma dinámica. Por ejemplo:

      <STYLE TYPE="text/css">
        .la_capa {position:absolute; top:100px; left:20px; width:300; heigth: 200}
      </STYLE>

      Con esto hemos definido un tipo de capa, denominda la_capa, cuya altura es de 200 px y anchura 300 px. Además está situada a 100 px de la parte superior y a 20 px del margen izquierdo de la página. Repito que hemos definido una clase capa, pero no hemos contruido la capa. Para construirla usamos la etiqueta <DIV> y el atributo ID

      <DIV ID="micapa">
        <H1>Esto es contenido</H1>
        <P>Aquí sigue más contenido HTML </p>
        ...
      </DIV>

      Cualquier bloque <DIV> con ID="mi_capa" estará en esa posición y con ese tamaño.

      Esta capa puede colocarse en cualquier parte de la ventana, su posición es absoluta (absolute). Pero también podemos definir capas de posicionamiento relativo, es decir, que más que definir las coordenadas de suposición respecto a la ventana, describimos su posición respecto al lugar donde aparezca en el texto. En otras palabras: describimos desplazamiento de la capa respecto de donde la ponemos. Se definen así:

      <STYLE TYPE="text/css">
        .relativa {position: relative; left: 20px;  top: 100px;}
      </STYLE>

      Este ejemplo te muestra dos capas, una absoluta y otra relativa, esta última está construida con una etiqueta <span>, para evitar el salto de línea propio de los bloques.

      arriba


      Propiedades

      Existen varias propiedades de las capas que podemos modificar, como son la posición, la visibilidad, el orden en que se ponen en pantalla, etc... Son estos:

      Propiedad Significado Valores
      left y top Sitúan la esquina superior izquierda de la capa respecto a la esquina superior izquierda de la capa donde esté metida. Hay que tener en cuenta que el documento completo también se considera una capa. distancia en pixels, por defecto cero.
      width y height Determinan la anchura y altura de la capa. un tamaño en pixels.
      clip Nos permite definir el área que se podrá ver dentro de la capa. Por ejemplo, clip:rect(20px 30px 40px 10px); recortará la capa creando un cuadro visible cuya esquina superior izquierda está a 10 pixels por la izquierda y 20 por arriba de la de la capa y cuyo tamaño sería de 30-10 de ancho y 40-20 de alto. un área.
      z-index Las capas con un mayor z-index se colocarán más arriba (se dibujarán al final, encima de las otras). Debe ser un valor positivo y único: dos capas no pueden tener el mismo z-index. número positivo, por defecto las capas definidas en el código HTML más tarde están más arriba.
      visibility Especifican si la capa debe verse o estar oculta. visible, hidden (oculta) o inherit (hereda la visibilidad de la capa padre). En aquellas capas que simplemente estén dentro de la página principal, este valor es equivalente a visible.
      background-image Gráfico de fondo de la capa. una dirección.
      background-color<imagenenlinea direccion="graficos/explorer.gif" descripcion="explorer"/> y layer-background-color<imagenenlinea direccion="graficos/netscape.gif" descripcion="Netscape"/> Color de fondo de la capa. un color.
      arriba


      Comunidad Virtual. Alojamiento gratis