Sie sind auf Seite 1von 6

Multimedia I

Ejercicio 1 (con nota): HTML – CSS

Encargo

Crear documento HTML y CSS según las instrucciones dadas más adelante
en este documento.

Las instrucciones deben ser seguidas exactamente, ya que se evaluará que


el código obtenido sea el mismo que se pide.

Se deberá entregar una carpeta con los siguientes contenidos:


• index.html
• estilo.css
• carpeta img con todas las imágenes adentro.

El código debe estar ordenado, esto es muy importante!

El objetivo de este ejercicio es terminar de ejercitar la escritura HTML y


comprendan bien la relación entre este y el CSS.

En el HTML se deben utiizar textos e imágenes de un sitio simulado. La


idea es que el ejercicio se veal lo más real posible.

Instrucciones

1. Crear un nuevo documento HTML y guardarlo en una carpeta con el


nombre de index.html

2. Crear un nuevo documento CSS y guardarlo como estilo.css

3. Enlazar (insertar) el CSS en el HTML (dentro del <head>)

HTML

4. Deberán hacer un sitio con la estructura de contenidos de la imagen 1

5. En la imagen 2 se puede ver la estructura de Divs que haremos para ir


agrupando los elementos HTML.

6. En a imagen 3 se puede ver algo parecido a como debería quedarles


este ejercicio terminado.
7. Para comenzar haremos un div que contenga a todos los otros
elementos. Esto permitirá mantener todos los elementos centrados en
el body. Este div tendrá un id de “contenedor”.

8. Dentro de el div contenedor crearemos un div con id=”cabecera” el


cual tendrá 3 elementos HTML adentro:
a. Imagen (logo) de 350x150 pixels
b. Nombre del sitio web (Título principal)
c. Menú principal (Lista con 5 elementos)

9. Abajo del div “cabecera” crearemos un div (id=“principal”) el cual


contendrá los elementos destacados del sitio web.

10. Dentro del div principal crearemos primero un div llamado <div
id=”destacado”>

11. Dentro del div destacado crearemos 2 elementos HTML:


a. Imagen de elemento destacado de 600 x 200 pixels
b. Titulo de destacado (h2)

12. Ahora haremos un nuevo div con el id de “ultimas”, aquí pondremos


las 3 últimas noticias del sitio.

13. Dentro del div ultimas crearemos varios elementos HTML:


a. Titulo “Ultimas noticias” (h2)
b. Ahora haremos una lista de noticias (ul) con 3 noticias (li)
c. Dentro de cada uno de los (li) pondremos el titulo de la noticia
(h3) y una frase de descripción de la noticia (p)

14. Con esto terminamos de crear el div “principal”. Tener cuidado con
donde abren y cierran las etiquetas.

15. Abajo del div principal, crearemos un nuevo div llamado “articulos”.

16. Adentro del div “articulos” pondremos los siguientes elementos


HTML:
a. Un titulo principal (Artículos)
b. Un div llamado “articulo1” y dentro de ese div pondremos un
párrafo con una imagen adentro de 300 x 200 pixeless y un texto.
c. Abajo haremos lo mismos con el “articulo2”
d. Luego lo mismo con el “articulo3”.

17. Despues del div “articulos” crearemos el ultimo div llamado “footer”

18. Dentro del div “footer” crearemos un párrafo con una dirección y un
teléfono simulados.
CSS

En el archivo “estilo.css” deberán aplicar las siguientes propiedades y


atributos a los elementos HTML. Tener cuidado al elegir el selector, ya que
puede ser la etiqueta del elemento HTML (ej h1 o div) o puede ser
mediante ID (ej #contenedor).

1. Propiedades CSS del body:


o margin 0 pixeles
o padding de 0 pixeles
o elegir una familia de fuentes (font-family)
o tamaño de la fuente 12 pixeles (font-size)

2. Propiedades CSS para los títulos principales:


o Tamaño de la fuente 26pixeles

3. Propiedades para los títulos secundarios:


o Tamaño de la fuente 18 pixeles

4. Propiedades para el div “contenedor”


o Ancho 960 pixeles (width)
o Margen izquierdo: auto
o Margen derecho: auto
o Elegir un color de fondo (background)

5. Propiedades para el div “cabecera”


o Ancho 930 pixeles
o Elegir un color de fondo
o Padding 15 pixeles

6. Propiedades para el div “principal”


o Ancho 930 pixeles
o Padding izquierda 15 pixeles
o Padding derecha 15 pixeles
o Margen superior 15 pixeles (top)

7. Propiedades para el div “destacado”


o Ancho 600 pixeles
o Elegir un color de fondo

8. Propiedades para el div “ultimas”


o Ancho 320 pixeles
o Margen izquierdo 10 pixeles
o Elegir un color de fondo

9. Propiedades para el footer


o Altura 100 pixeles (height)
o Elegir un color de fondo
o Alineacion del texto centrada (text-align)

Imágenes de referencia

Imagen 1 Diagrama de como quedaría diagramada la información en el


sitio terminado.
Imagen 2 Diagrama de la estructura de Divs
Imagen 3 Ejemplo aproximado de cómo debería verse su ejercicio
terminado. En la próxima clase agregaremos algunos estilos CSS que
perimitiran que esto “desordenado” se parezca mas a la “imagen 1”

Das könnte Ihnen auch gefallen