ensayo

Pág. 1

GUÍA DE LABORATORIO # 1
PRÁCTICA DE LABORATORIO – HTML y CSS
Este primer laboratorio lo dedicaremos a la caracterización del entorno en el que trabajaremos y
daremos los primeros pasosen la aplicación de HTML y CSS.
Pues solo nos queda poner las manos a la obra.
Primera Parte. Tres pasos inevitables.
1. Creamos un documento HTML. (File -> New -> HTML) y lo guardamos (File -> SaveAs) con el
nombre de page1.html.
2. Creamos un documento CSS (File -> New -> CSS) y lo guardamos (File -> Save As) con el nombre
style.css.
Nota. Guarde los archivos en la misma carpeta.
3.Enlazamos el archivo HTML y CSS. Utilice la etiqueta link que debe ubicarse dentro la sección
HEAD.

Cambiamos el color de fondo de la sección BODY para probar que esté funcionando
correctamentenuestro enlace, para ello, modifique la hoja de estilos (style.css).
body
{
background-color:#660099;
}
Segunda Parte. Empezamos a trabajar con la etiqueta div.
1. En el archivo page1.html, siempreen la sección BODY crearemos un div como el siguiente.


2. Ahora desde la hoja de estilos (style.css) cambiaremos el color de fondo, el ancho, el alto y el
borde de la etiqueta div que acabamos decrear.

INGENIERÍA INFORMÁTICA - TECNOLOGÍAS EMERGENTES DE LA WEB - GRUPO # 2
M.Sc.Lic. Huáscar Fedor Gonzales Guzmán

Pág. 2
#cuerpo
{
background-color:#FFFFFF;
width:80%;
height:100px;border:#000000 solid 1px;
}
Hasta aquí probaremos distintas propiedades que son útiles a la hora de manejar el modelo de
cajas.



Como centrar un div.
Diferenciar la utilidad de laspropiedades margin, border y padding

Tercera Parte. Tipos de posicionamiento.
El posicionamiento CSS es la técnica utilizada para maquetar diseños usando únicamente XHTML y
las propiedades CSS.
1.Position: static
2. Position: absolute
3. Position: relative
Antes de empezar con los ejemplos conozcamos algunos detalles acerca de los tipos de
posicionamiento mencionados.
1. Position: static...