HTML

CAPAS
 ¿DÓNDE ESTAMOS?

Lenguaje
interpretado
HTML

Hiperenlaces

Formularios
Multimedia
Elementos
de Texto

Capas
Tablas
Listas

Ing. Pablo Durazno Silva MSc 2

 IMPORTANCIA
 Las capas son muy útiles para organizar contenido de una página
 Las capas permiten identificar claramente las secciones principales de una
página web
 Cada capa puede tener sus propias características
 Cada capa puede contener un determinado tipo de elementos
 OBJETIVO
 Organizar el contenido una página Web mediante secciones
 COMPETENCIA
 Insertar secciones organizadas en una página Web utilizando lenguaje de
etiquetas HTML
CONTENIDOS
 Elementos en línea y elementos de bloque
 Capas: introducción y sintaxis
 Capas: propiedades y atributos
 Capas: definición de estilos mediante clases e identificadores
 Etiquetas estructurales HTML 5
 Ejercicio de aplicación
CONOCIMIENTOS PREVIOS
 ESTRUCTURA DE UNA PÁGINA WEB
 Etiquetas que definen la estructura de una página web
 FORMATOS DE ELEMENTOS HTML
 Bordes y fondos
 Imágenes de fondo
 Márgenes internos y externos
 ELEMENTOS HTML
 Imágenes
 Tablas
 ESTILOS DE UN ELEMENTO HTML
CAPAS – INTRODUCCIÓN: TIPOS DE ELEMENTOS

 Elementos «de bloque»

 Siempre empiezan en una nueva línea y ocupan todo el
espacio disponible hasta el final de la línea

 Elementos «en línea»

 No necesariamente empiezan en una nueva línea y solo
ocupan el espacio necesario para mostrar su contenido
CAPAS – INTRODUCCIÓN: TIPOS DE ELEMENTOS
CAPAS – INTRODUCCIÓN: TIPOS DE ELEMENTOS
 CAPAS – INTRODUCCIÓN Y SINTAXIS

 Capas
 Son unos recuadros (o cajas) que
pueden situarse en cualquier parte de
la página en los que se puede incluir
código HTML.
 Las capas pueden ocultarse y
solaparse entre sí.
 Proporcionan grandes posibilidades
de diseño
 Sintaxis
 <div atributos=“valor”>contenido de
la capa</div>
CAPAS – SINTAXIS

 Definición de estilos de las capas

 style  se establecen los estilos o propiedades de la capa en línea
 id  se establecen los estilos utilizando un selector de identidad
 class  se establecen los estilos utilizando un selector de clase

Ejemplos:
<div style=“width: 100%; height: 115px; visibility: visible; background-color:
#0099CC; border-style: solid; border-width: 3;”>contenido de la capa</div>

<div class=“nombre_clase_estilo”>contenido de la capa</div>

<div id=“nombre_identificador_estilo”>contenido de la capa</div>

CAPAS – PROPIEDADES DEL ATRIBUTO STYLE

 Propiedades de «style» - “width” – “height”

 width  define el ancho de la capa dentro de su contenedor, el valor
puede ser en px ó %
 height  define el alto de la capa dentro de su contenedor, el valor
puede ser en px ó %

Ejemplo
◦ <div style=“width: 100%; height: 115px;”>contenido de la
capa</div>
CAPAS – PROPIEDADES DEL ATRIBUTO STYLE
 Propiedades de «style» - “border”
 border  define los estilos (ancho, estilo, color) para el borde de la capa
 border-width  establece el ancho del borde de la capa, el valor puede ser en px
 border-style  establece el estilo del borde de la capa, el valor puede ser solid,
dashed, dotted, etc.
 border-color  establece el color del borde de la capa

Ejemplos
◦ <div style=“border: 3px solid #6AACE6;”>contenido de la capa</div>
◦ <div style=“border-width: 3px; border-style: solid; border-color:
#ffffff;”>contenido de la capa</div>
◦ <div style=“border-width: 3px 5px; border-top-style: solid; border-bottom-style:
dashed; border-color: 13px;”>contenido de la capa</div>
CAPAS – PROPIEDADES DEL ATRIBUTO STYLE

 Propiedades de «style» - “background”

 background-color  establece un color de fondo para la capa. El color ha de ser
un número en hexadecimal.
 background-image  establece una imagen de fondo para la capa. La ruta y el
nombre de la imagen se establece con la palabra url entre paréntesis.

Ejemplo
<div style="background-color: #0099CC; background-image: url(
https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg
);">Este texto est&aacute; dentro de una capa</div>
CAPAS – PROPIEDADES DEL ATRIBUTO STYLE
 Propiedades de «style» - “margin”
 margin  define los 4 (superior, derecho, inferior, izquierdo) márgenes de la capa
con respecto a su contenedor, el valor puede ser en px ó %
 margin-left  posición de la capa respecto al margen izquierdo de su contenedor, el
valor puede ser en px ó %
 margin-top  posición de la capa respecto al margen superior de su contenedor, el
valor puede ser en px ó %
…

Ejemplo
◦ <div style=“margin-left: 10%; margin-right: 10px; margin-top: 20px; margin-
bottom: 20px;”>contenido de la capa</div>
◦ <div style=“margin: 20px 10px 20px 10%;”>contenido de la capa</div>
CAPAS – PROPIEDADES DEL ATRIBUTO STYLE
 Propiedades de «style» - “padding”
 padding  define los 4 (superior, derecho, inferior, izquierdo) márgenes internos
de la capa con respecto a su contenido, el valor puede ser en px ó %
 padding-left  posición del contenido respecto al margen izquierdo de la capa, el
valor puede ser en px ó %
 padding-top  posición del contenido respecto al margen derecho de la capa, el
valor puede ser en px ó %
…

Ejemplo
◦ <div style=“padding-left: 10%; padding-right: 10px; padding-top: 20px; padding-
bottom: 20px;”>contenido de la capa</div>
◦ <div style=“padding: 20px 10px 20px 10%;”>contenido de la capa</div>
CAPAS – PROPIEDADES DEL ATRIBUTO STYLE

 Propiedades de «style» - “display”

 display  permite especificar el tipo de comportamiento que tendrá un
elemento HTML. Es aplicable a casi todo los elementos.
 block  se comporta el elemento como un elemento de bloque.
 Inline-block  se comporta el elemento como un elemento en línea.
 none  permite desactivar la visualización de elementos.

Ejemplo
◦ <div style=“width: 50%; height: 115px; display: inline-
block;”>contenido de la capa</div>
CAPAS – PROPIEDADES DEL ATRIBUTO STYLE

 Propiedades de «style» - “float”

 float  permite a un elemento HTML salir del flujo normal y aparecer a la
izquierda o derecha de su contenedor, donde los elementos de texto y los en
línea aparecerán a su alrededor.
 left  flotará a la izquierda de su posición, si encuentra espacio dentro del
contenedor.

Ejemplo
◦ <div style=“width: 50%; height: 115px; display: inline-block; float:
left;”>contenido de la capa</div>
ETIQUETAS ESTRUCTURALES (SEMÁNTICAS) HTML 5
Cabecera

Barra de navegación

Estructura de
Menú
una página web Cuerpo de la página
Lateral

Pie de página:
Información de la empresa
ETIQUETAS ESTRUCTURALES (SEMÁNTICAS) HTML 5
<header> </header>

<nav> </nav>

Estructura de
<aside>
una página web <main> </main>
</aside>

<footer> </footer>
ETIQUETAS ESTRUCTURALES (SEMÁNTICAS) HTML 5
<header> </header>

<nav> </nav>
<main>
<section>
<article></article>
……….
……….
<aside>
<article>...</article>
</aside>
</section>

<section>
</section>
</main>

<footer> </footer>
CAPAS – EJERCICIO PROPUESTO

• Realizar, una página Web con las siguientes características:

• Crear una capa principal que haga de contenedor del resto de capas
• Crear 3 capas que se ubiquen dentro del contenedor principal
• La primera capa se utilizará como encabezado de la página y se subdividirá en 2
capas, para ubicar un logotipo y el título de la página, respectivamente
• La segunda página se utilizará como menú principal horizontal y se subdividirá en
4 capas, cada capa contendrá un texto como opciones de un menú principal
• La tercera capa se utilizará para los contenidos de la página y se subdividirá en 4
capas, de 2 filas de 2 capas cada una, el contenido de cada capa corresponderá a:
1 tabla, una imagen, un video, un formulario.
• Cada capa debe tener un color diferente para que se puedan identificar a primera
vista
CAPAS – CAPAS EN EL EJERCICIO PROPUESTO