Semana 5 PDF 3

Taller de Diseño, Selección y
Planificación Web
Nadine Santander Alvarez
Uso de contenedores de información
en HTML
01 CONÉCTATE
En esta sesión hablaremos sobre
Aprenderemos sobre la utilidad de los contenedores en una web para organizar el contenido.
Recuerda que, cuando acabemos esta presentación, puedes revisar el libro digital, en el que
vas a encontrar material referente a lo que estamos abordando hoy, en las páginas 30 a la 36.
01 CONÉCTATE
¿Sabes como organizar el contenido en una web en HTML?
Hoy aprenderemos a ejecutar etiquetas contenedoras , que nos ayudarán a tener el contenido de m web
ordenado y con diferentes estilos visuales.
02 CONSTRUYAMOS JUNTOS
Contenedor en Dreamweaver
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 con atributos:
<div id:2”>Contenido</div>
La etiqueta de DIV, es una de las tantas etiquetas que podemos agregarle un atributo, sin embargo
a pesar de tener mucho contenido dentro de la etiqueta de inicio , es necesario colocarle una
etiqueta de cierre también.
El atributo de la etiqueta, lo diferenciaremos porque en el Software nos aparecerá de otro color

después de un espacio de la etiqueta y siempre lleva dos puntos pegados al finalizar (:)
La característica del atributo, estará pegada a los dos puntos, y se caracteriza por siempre estar
entre comillas, al finalizar las comillas no debemos olvidarnos de colocarle el símbolo de > a la
etiqueta.
Contenedor en Dreamweaver
Podemos insertar una capa

o contenedor a través de las
etiquetas <div> y </div>
Insertar Contenedor desde el menú
Podemos insertar también el

contenedor de <div>, por medio del
menú insertar. Y automáticamente
se colocara el código escrito.
Insertar Contenedor desde el menú
Debemos colocar el puntero de mouse dentro de <body> e insertarlo mediante el menú

insertar. Luego escribiremos en ID: contenedor y luego das clic en Nueva Regla CSS.
Nueva Regla CSS
Aquí por default nos saldrá

el contenedor que
acabamos de crear y le
daremos un estilo a este
contenedor.
Cambiaremos el color al estilo del div
Podemos colocarnos en el
Fondo y seleccionar un
color que nos guste.
La posición del div debe ser adaptable
Posición y seleccionar en
Position: relative, de esta
forma se adaptará a
cualquier pantalla que
visualice la web.
Tamaño del div
Posición y seleccionar en
width, el ancho
(Recomiendo de 900 a 1200
px) y height, el alto (Este
dependerá de que tan
grande sea la página)
Creación de estilo CSS
Luego le damos aceptar y

vemos por detrás que ya se
esta creando el código de
estilo CSS, para este DIV
Creación de div
Finalmente creamos el div,

en esta opción que nos
queda, dándole clic en
aceptar.
Creación de div
Así debería
quedarnos el
código, para
poder crear
correctamente el
div (contenedor)
Creación de div
Así lo
visualizamos, de
acuerdo al color
que elegiste.
Creación de div
Solo recuerda
borrar el
contenido del div,
cuando empieces
a programar
texto o imágenes.
03 PONTE EN ACCIÓN
• Recuerda que los contenedores <div> nos ayudarán a organizar el contenido de

la web en HTML.
• La etiqueta <div>, es una que contiene atributos y debemos saber diferenciarla.
• Cuando crees un <div> recuerda que debes configurar el estilo CSS básico para
utilizar correctamente el contenedor.
03 PONTE EN ACCIÓN
Actividad en el Aula Virtual
Crea una web con un contenedor <div> y agrégale un texto que contenga el desarrollo del
siguiente tema: ¿En donde te ves en 5 años?
Criterios:
• Debe tener un título.
• Debe tener mínimo 2 párrafos.
• Utiliza los formatos de negrita e italic.
• Dale color y tamaño a por lo menos un párrafo.
• Debe tener un contenedor <div> con color de fondo, y correctamente la posición y
tamaños.
Adjunta los pantallazos del proceso de creación del archivo y también de la carpeta donde
alojarás tu primer archivo en HTML.
Gracias!

Semana 5 PDF 3

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Semana 5 PDF 3

Cargado por

Copyright:

Formatos disponibles

Taller de Diseño, Selección y

En esta sesión hablaremos sobre

¿Sabes como organizar el contenido en una web en HTML?

Las capas o contenedores son unos

Etiqueta con atributos:

El atributo de la etiqueta, lo diferenciaremos porque en el Software nos aparecerá de otro color

Podemos insertar una capa

Insertar Contenedor desde el menú

Podemos insertar también el

Insertar Contenedor desde el menú

Debemos colocar el puntero de mouse dentro de <body> e insertarlo mediante el menú

Nueva Regla CSS

Aquí por default nos saldrá

Cambiaremos el color al estilo del div

La posición del div debe ser adaptable

Tamaño del div

Creación de estilo CSS

Luego le damos aceptar y

Finalmente creamos el div,

• Recuerda que los contenedores <div> nos ayudarán a organizar el contenido de

Actividad en el Aula Virtual

También podría gustarte