Examen HTML y JavaScript Recuperacin

Instrucciones: crea el cdigo para la pgina web segn las propiedades

que se te proporcionan. No todas las propiedades han sido especificadas, las
que falten debers colocarlas a fin que el diseo quede lo ms similar al del
ejemplo. (17pt)
1. Dentro de la cabecera emplea la siguiente informacin para algunas
de las etiquetas: (1.5pt)
a. Autor: Computo-III
b. Descripcin: Welcome to Samsung PE. Discover a wide range
of home electronics with cutting-edge technology including
TVs, smartphones, tablets, home appliances & more!
c. Palabras
clave:
samsung,
samsung.com,
samsung
electronics, samsung website.
2. Crea la estructura de contenedores con los siguientes nombres:

(1.5pt)
3. Definir el resto de elementos empleando sus respectivas etiquetas
HTML en el contenedor que les corresponda. (6pt)
4. Crear las reglas de estilo necesarias para que el diseo de la pgina
sea como el del ejemplo. Tomar en cuenta las siguientes propiedades:
a. El body tendr 0px de mrgenes, el texto ser Arial, Verdana,
Helvetica de 16px

b. El wrapper tendr un ancho de 960px, ajustar los mrgenes

para centrarlo.
c. La cabecera ser de 960px de ancho, float:left, con un borde
superior de 40px color #08529F
El logo tendr una altura de 30px y mrgenes:20 0 20
20px, float:left
El men de navegacin tendr mrgenes 27 0 0 60px y
sus rellenos en 0px, float:left
Los elementos de la lista sern float:left, sin estilo de
lista y con relleno derecho de 25px
Los enlaces de la lista sern float:left, sin subrayado,
color #08529F y tamao de texto 14px
Cuando pases el puntero por encima de dichos enlaces
el color de fondo cambiar a #08529F y el color de la
letra ser blanco.
d. El contenido ser de 960px de ancho, float:left, dentro de este
contenedor tendrs en cuenta:
El titular h1 (BIENVENIDO A LA WEB OFICIAL DE
SAMSUNG) ser de tamao 28px, con negrita, color de
texto #08529F y mrgenes 50 0 20 20px
El prrafo ser de color #7f7f7f, con mrgenes 0px y
rellenos 0 20px
e. El contenedor izquierda ser de 640px de ancho con rellenos
0 0 0 20px y margen superior de 45px, adems:
Crears contenedores div que agrupen el titular h2, el
titular h3, la imagen, el prrafo y su respectivo enlace.
Estos contenedores tendrn 300px ancho por 390px de
altura con mrgenes 0 20 40 0px y con float:left
Los titulares h2 (Cmaras Samsung, Samsung GALAXY
Note 4, Samsung IFA 2014, Lnea Blanca Samsung)
tendrn 24px en tamao de texto sin negrita (normal),
mrgenes 0 0 5 0px y color de texto negro.
Los titulares h3 (Captura el mundo, sin lmites, Do you
Note?, Nuevas formas de vivir ms inteligente, Vive tu
estilo, vive mejor) tendrn 16px en tamao de texto,
color de texto negro, sin negrita (normal) y mrgenes 0
0 20 0px
Las imgenes tendrn 300px de ancho.
Los prrafos tendrn tamao de texto 14px con relleno
0px t margen superior 20px
Los enlaces sern de color #08529F, tamao de texto
14px, con negrita, sin subrayado y con float:right
Cuando se pase el mouse encima los enlaces tendrn
subrayado.
f.

El contenedor derecha ser de 280px de ancho, float:left, con

relleno 0 20 0 0px, y margen superior de 45px. Adems:
Los titulares h2 (CONTCTANOS, NOTICIAS) estarn
alineados al centro, tendrn color de texto #08529F de

tamao 16px y con negrita. Sus rellenos sern 12 0px y

mrgenes 0 0 20 0px. El borde superior y el borde
inferior sern slidos de 1px color #08529F
El formulario tendr rellenos 0 40px y margen inferior de
50px
Las etiquetas label tendrn color de texto #08529F y
tamao 14px
El control para el email y el del mensaje sern de
200px de ancho con margen inferior de 18px y borde
slido de 1px color #8b8b8b
El control del mensaje tendr una altura de 70px,
mientras que el control para el email, el botn para
enviar y el botn para cancelar tendrn 25px de altura.
Los botones para enviar y cancelar tendrn un ancho
de 90px, color de fondo #08529F, sin borde, con
mrgenes y rellenos en 0px, color de texto blanco,
tamao de texto 14px con negrita.
El botn cancelar tendr un margen izquierdo de 15px.
Los prrafos tendrn tamao de texto 12px y mrgenes
0 0 30 0px
Los textos iniciales azules en cada prrafo se logran con
etiquetas <span></span>, esta etiqueta tendr texto
en negrita y color de texto #08529F
Los enlaces que estn dentro de los prrafos sern de
color negro con efecto de negrita sin subrayado.
Cuando se pase el mouse por encima de los enlaces
estos tendrn subrayado.

5. Enlazar la librera jQuery con tu archivo HTML y generar un efecto de

desvanecimiento a un 50% con velocidad fast cuando se ubique el
mouse sobre alguna imagen de los productos o el slider. Al retirar el
mouse la imagen volver a mostrarse normal al 100% de opacidad.
(3pt)