Ejercicio1

Ejercicio número 1: 
Creación del documento discos.html. 
1ª parte: 
En el primer ejercicio creamos un documento sencillo. En este primero volveremos a crear un 
sitio, crearemos una hoja de estilos CSS y crearemos enlaces dentro de la misma página. 
Como ya hicimos en el ejercicio anterior crearemos la carpeta “discoduro” dentro de la carpeta 
“c:\practicasweb”. 
Iremos  a  Dreamweaver  y crearemos  un  sitio  de  la  misma  manera  que  el  ejercicio  anterior, 
simplemente  cambiaremos  el  nombre  del  sitio  por  el  de  “discoduro”  y  la  carpeta  donde 
trabajaremos con el “C:\practicasweb\discoduro”. También crearemos la carpeta de imágenes. 
Descargamos  el  archivo  con  los  baseejercicio1.zip  que  encontraremos  en  la  plataforma, 
descomprimiremos  y  colocaremos las  imágenes  dentro  de  la  carpeta  “imagenes”  del  sitio  y 
abriremos  el  archivo  de  texto  "textodiscoduro.txt"  para  copiarlo  y  pegarlo  dentro  del 
documento  html  que  creamos  dentro  del  sitio,  que  llamaremos  discoduro.html,  después  de 
pegar si es necesario divide el documento en los párrafos tal como aparecen en el documento 
de texto. Esta parte creo que todo el mundo debe de saber hacerla sin problemas. 
2ª parte: 
En el ejercicio anterior le dimos formato a la página (propiedades de la página) y al texto de 
manera directa. Ahora vamos a crear una hoja de estilos CSS que va a controlar cada parte del 
texto  y  las  propiedades  de  la  etiqueta  body,  que  es  la  que  controla  las  propiedades  de  la 
página. Para ello vamos a crear una nueva carpeta dentro de nuestro sitio le llamaremos css, la forma 
de  hacerlo  es  muy  sencilla,  nos  vamos  al  panel  de  archivos,  seleccionamos  la  raíz  del  sitio  y 
hacemos clic en el botón derecho del ratón, aparecerá la opción de crear una nueva carpeta y 
le ponemos el nombre “css”. 
Vamos  a  crear  4  estilos,  3  de  clase  de  la  forma  .nombreestilo  y  1  de  etiqueta  que  le  dará formato a la etiqueta body. 
Se llamaran 
.titulo, .punto, .texto y body. 
Ahora vamos a crear la hoja de estilos css que nos va a permitir utilizar estos estilos para todas 
las demás hojas que quisiéramos crear dentro de nuestro sitio. 
Buscamos  el  panel  CSS,  y  le  damos  al  botón  nueva  regla  CSS,  aparecerá  una  ventana  como 
esta:  

 En ella crearemos primero los estilos para los textos. 
El primero será la opción clase y nombre del estilo .titulo y donde pone definir en elegiremos la 
opción de nueva hoja de estilos y le damos a aceptar. 
Ahora  nos  pedirá  el  nombre  de  la  hoja  de  estilos  y  donde  guardarla  dentro  de  sitio  web,  le 
ponemos el nombre “misestilos.css” y la guardamos en la carpeta css. 
El  estilo  .titulo  tiene  la  siguientes  características: tipo  de  letra  verdana,  tamaño  24  puntos, 
color verde oscuro, negrita, centrado, subrayado y mayúsculas. 
Acuérdate que si te olvidas de algo o ves que no te gusta como queda podrás editar el estilo 
para modificarlo y se actualizará automáticamente. 
Ahora crearemos el estilo .puntos. 
El  procedimiento  es  igual  que  el  anterior  pero  donde  pone  definir  en  elegirás  el documento 
“misestilos.css”. 
.punto: verdana, 16 puntos, azul oscuro, justificado, negrita. 
.texto: verdana, 14 puntos, negro, justificado, sangría de 1 cm. 
Hasta ahora hemos creado estilos de clase, ahora crearemos un estilo de etiqueta. 
Le  damos  a  añadir  nuevo  estilo,  pero  ahora  vienen  los  cambios, elegiremos  tipo  de  selector: 
etiqueta  y  en  la  lista  del  nombre  buscamos body.  También  le  ponemos  definir  en 
“misestilos.css”. le damos a aceptar y ahora los cambios serán para todos los elementos que 
utilicen este tipo de etiqueta. 
Body: imagen de fondo: fondo.jpg, color de fondo: gris claro. Márgenes, izquierdo el necesario 
para  que  el  texto  empiece  a  la  derecha  de  la  espiral  del  fondo,  vete  poniendo  valores  hasta ...