Capas en HTML

Ay˙danos a seguir haciendo cursos online gratis
DESCARGA EL CURSO COMPLETO DE HTML Y HTML5 PULSANDO AQUÍ


Capas en HTML

El contenido de toda página web (bueno, casi todas) está distribuído mediante capas. Las capas son una especie de contenedores invisibles a los que podemos dar tamaño, colocación... y otros atributos, y que contienen los elementos de nuestra web. Este texto que estáis leyendo está contenido en una capa, por ejemplo. Una capa que tiene una posición determinada y una anchura establecida. Además le hemos dado los parámetros del texto, como tamaño, tipo de fuente... Veamos cómo poder distribuir el contenido de nuestra web mediante capas:




Insertar capas

Lo primero que debemos hacer para comenzar a distribuir contenido es crear la capa, esto se realiza mediante la etiqueta <div> ... </div>. Dentro de esta etiqueta introduciremos el contenido que deseemos, por ejemplo una imagen, que quedaría:

<div><img src="ruta/imagen.extensión" title="Imagen en capa" alt="Como utilizar las capas" /></div>
	

Ahora que ya la tenemos creada, lo primero que debemos hacer es darle tamaño y posición mediante un archivo css:


Position, top, left, width y height

Empezaremos viendo las 5 cosas que deben incluirse siempre para cualquier capa, recordamos que debemos incluirlo en el css, si no sabes qué es eso ni cómo se maneja, te recomiendo visitar nuestro Curso online gratis de programación web: css

Y con esto tenemos la capa situada en nuestra página web, junto con su contenido, ahora vamos a ver algunos otros atributos de las capas:


margin y padding

border

Emplearemos este atributo para establecer un borde para la capa dándole un grosor y el color. Para ello emplearemos el siguiente código:


background

Este atributo sirve para ponerle un fondo a la capa. Para ello tenemos dos opciones, ponerle un fondo de un color o ponerle una imagen de fondo:







Autor: Javier García Rodríguez