Laboratorio2

Fundamentos de Desarrollo Web
Laboratorio N° 2

LABORATORIO Nº 2
Al finalizar el laboratorio el participante estará en capacidad de:
•

Hacer uso de las etiquetas HTML para el diseño de una páginaweb así
como la aplicación de reglas mediante las hojas de estilo CSS.

ENUNCIADO 1 :
Se organizara el evento gastronómico Mistura 2013 y se requiere elaborar la portada de la página web a
mostrarsepara el evento. Se pide hacer uso de las últimas tecnologías web como HTML5 y CSS3.
Para el diseño vamos a elaborar la página principal de nombre index.html y la hoja de estilos de nombre
estilos.cssHTML

+

CSS

Página web

Paso 1 – Creando el sitio web local
1.

Empezaremos a diseñar nuestro ejercicio utilizando el programa Adobe Dreamweaver.

Pag. 1

Fundamentos de Desarrollo Web
Laboratorio N°2
2.

Uno de los primeros pasos es crear un sitio web local en nuestro equipo. Para ello hacemos clic en el menú
Sitio/Nuevo Sitio, ponemos un “Nombre del sitio” y creamos una “Carpeta del sitiolocal”, luego hacemos clic
en “Guardar”

Paso 2 – Creando un archivo de tipo HTML
3.

Creamos ahora una nuevo archivo de tipo “HTML”, para ello hacemos clic en “menú Archivo/Nuevo”.

Pag. 2

Fundamentosde Desarrollo Web
Laboratorio N° 2
4.

Ahora guardamos el archivo dentro de nuestro sitio web “Sesion1” con el nombre de “index.html”.

Paso 3 – Creando la hoja de estilos
5.

Creamos un nuevo archivode tipo CSS. Clic en el “menú Archivo/Nuevo/CSS”.

Pag. 3

Fundamentos de Desarrollo Web
Laboratorio N° 2
6.

Lo guardamos en el sitio web “Sesion1” con el nombre de “estilos.css”.

Paso 4 –Enlazando el HTML al CSS
7.

Para enlazar el archivo HTML al archivo CSS abrimos el archivo HTML y desde el panel “Estilos CSS” hacemos
clic en el icono “Adjuntar hoja de estilos”.

8.

Examinamos y buscamosel archivo “estilos.css” creado anteriormente y luego aceptamos.

9.

Veremos que se genera una nueva línea de código que hace referencia al enlace con la hoja de estilos.

Pag. 4

Fundamentos de...