Resumen: Entrega nº26 del Tutorial básico del programador web: HTML desde cero.
Codificación aprenderaprogramar.com: CU00726B

 

 

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.

<!DOCTYPE html>

<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>

 

 

 

Como podemos observar,  hemos creado 3 capas (rectángulos) cada una con un borde de distinto color. Y lo más importante, le hemos dado estructura a la página y un diseño muy sencillo y básico.

Ahora supongamos que queremos cambiar los estilos de la cabecera. Al tener bien definida y estructurada la página HTML en capas, simplemente realizamos el siguiente cambio (no te preocupes si no entiendes la sintaxis para establecer los estilos, lo único importante es ver cómo se puede cambiar específicamente las características de una capa HTML). Escribe este código y visualiza los resultados en tu navegador.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>

</head>

<body>

<div style="text-align: center; font-size: 60px; 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>

 

 

 

Hemos aumentado el tamaño de la fuente (letra) de la cabecera y, además, hemos centrado el texto, simplemente cambiando los estilos de la capa (div) que contenía a la cabecera.

Por tanto, la principal utilidad de las capas, como ya mencionamos antes, es la de poder separar por partes la página HTML (estructurar). Tener bien estructurada un documento HTML (página web) es importante por distintos motivos, por ejemplo:

a) Nos permitirá establecer un estilo diferente (diseño) para cada contenedor.

b) Nos permitirá identificar cuándo un usuario hace click sobre la página, en qué contenedor ha hecho click.

c) Nos permitirá crear efectos especiales para una capa concreta.

 

 

ETIQUETA SPAN

La etiqueta span al igual que casi todas las etiquetas en HTML tiene su etiqueta de apertura <span> y su respectiva etiqueta de cierre </span>. ¿Qué utilidad tiene? La etiqueta span sirve normalmente para crear subdivisiones dentro de una capa (div). Esto nos permite aplicar estilos diferentes a cada subdivisión sin necesidad de crear nuevas capas.

Imaginemos que en el ejemplo anteriormente mostrado, dentro de la cabecera cuya fuente es de color negro, quisiéramos añadir texto de distintos colores pero que ese texto perteneciera a la misma capa de la cabecera. Para ello, utilizaríamos la etiqueta span.

Escribe el siguiente código, guárdalo en un archivo html y visualízalo en tu navegador.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Ejemplo etiqueta span - aprenderaprogramar.com</title>

</head>

<body>

<div style="text-align: center; font-size: 60px; border: 1px solid red;">

Cabecera

<span style="color: green;">de</span> la <span style="color: orange;">página</span>.

</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>

 

 

 

Como podemos observar, la etiqueta span permite crear subdivisiones que nos servirán para poder identificar y aplicar estilos a porciones de texto dentro de una misma capa (div).

 

 

HTML SE COMBINA CON CSS

Para poder aprovechar todo el potencial de este par de etiquetas, deberíamos tener un buen conocimiento de maquetación, diseño y uso de hojas de estilos (CSS). En este curso estos temas no se van a tratar, aunque se mencionan de forma sencilla y simplificada. El verdadero potencial de estas etiquetas lo obtenemos cuando utilizamos HTML combinado con CSS, pero desde el punto de vista didáctico, lo adecuado es ir aprendiendo los aspectos más básicos para luego introducir los más complejos. No te preocupes por hacer páginas complejas en este momento, sino por entender bien los conceptos. Una vez termines el curso de HTML te recomendamos que continues con el curso “Tutorial básico del programador web: CSS desde cero” de aprenderaprogramar.com.

 

 

EJERCICIO

Crea una página web utilizando los distintos elementos HTML que hemos ido estudiando en el curso que refleje de forma aproximada lo que se ve en esta imagen y que cumpla lo indicado más abajo:

maquetacion HTML

 

 

Los elementos a incluir son: un título h1, un título h2. Menú, separador hr, lista de elementos que son links, párrafos de texto que contienen algunos links. Imágenes. Un formulario. Imagen y texto de pie.

La página debe organizarse en capas según esta estructura: capa de cabecera (contiene títulos h1 y h2). Capa de cuerpo (contiene menú, párrafos y formulario). Capa de pie (contiene imagen y copyright).

Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: