SEGUNDA EVALUACION

HTML

APUNTES: HTML BASICS

Ejercicio 1. Crea un fichero html (html_e1.html) tal que en el navegador se vea lo siguiente enlace.

Ejercicio 2. Crea un fichero html (html_e2.html) tal que en el navegador se vea lo siguiente enlace.

Ejercicio 3. Crea un fichero html (html_e3.html) tal que en el navegador se vea lo siguiente enlace.

Necesitarás esta imagen.

Ejercicio 4. Crea un fichero html (html_e4.html) tal que en el navegador se vea lo siguiente enlace.

Necesitarás esta enlace.

Ejercicio 5. Crea un fichero html (html_e5.html) tal que en el navegador se vea lo siguiente enlace.

Ejercicio 6. Crea un fichero html (html_e6.html) tal que en el navegador se vea lo siguiente enlace.

Ejercicio 7. Crea un fichero html (html_e7.html) en la que integres todo o casi todo lo visto hasta ahora. El elemento principal será una tabla con imágenes de páginas web de referencia de un tema en particular, con enlaces (al pinchar sobre las imágenes) a esas páginas. Para que te hagas una ideas, imagínate una tabla con los logos de buscadores de Internet y que al pinchar en ellos nos lleven a sus sitos web

La Evolución de la Web

APUNTES: HTML5

Ejercicio 8. La etiqueta <div> define una sección o una división en un fichero html.

Crea dos secciones en un fichero html (html_e8.html), cada una de ellas con una cabecera (<h1>, <h2>, etc.) y con un párrafo. Añádeles estilos utilizando el atributo style. Añade una imagen de fondo a tu página. Una muestra: enlace

Ejercicio 9. Aunque a primera vista no vamos a ver su utilidad, con HTML5 se definieron nuevas etiquetas que sirven para estructurar los contenidos de las páginas web de forma más coherente: Imagen.

Crea un fichero html (html_e9.html) con las etiquetas header, nav, article, section, aside, footer. Dentro de la etiqueta section inserta una canción. Canción y Vídeo

Añade otra sección con un vídeo. Una muestra: enlace

CSS

APUNTES: CSS (I) CSS (II) CSS (III) CSS (IV)

CSS (Cascading Style Sheets) permite aplicar estilos específicos a elementos específicos de HTML.

El aspecto más importante de CSS es que nos va a permitir separar el estilo del contenido de nuestras páginas web.

En los tres siguientes ejercicios vamos a ver las diferentes maneras de utilizar CSS.

Ejercicio 10. (INLINE CSS) Crea un fichero html (css_e1.html) con el siguiente código y haz lo que se te pide.

Ejercicio 11. (EMBEDDED/INTERNAL CSS) Crea un fichero html (css_e2.html) con el siguiente código y haz lo que se te pide.

Ejercicio 12. (EXTERNAL CSS) Crea un fichero html (css_e3.html) con el siguiente código y otro fichero css (css_e3.css) con el siguiente código y haz lo que se te pide.

La SINTAXIS de CSS sencilla y consta de un selector, sus propiedades y los valores asignados a éstas.

selector {propiedad: valor;

propiedad: valor

}

Existen varios tipos de selectores:

• Selectores de tipo: como los vistos hasta ahora, hacen referencia a elementos tipo de nuestra página como párrafos <p>, cabeceras <h1>, etc.

p {

color:red;

font-size:130%

}

• Selectores id

Ejercicio 13. (Selectores id) Crea un fichero html (css_e4.html) con el siguiente código y otro fichero css (css_e4.css) con el siguiente código.

• Selectores class

Ejercicio 14. (Selectores class) Crea un fichero html (css_e5.html) con el siguiente código y otro fichero css (css_e5.css) con el siguiente código.

• Selectores descendientes

Ejercicio 15. Crea un fichero html (css_e6.html) con la siguiente estructura y otro fichero css (css_e6.css) con ésta. El ejercicio consistes en crear una página con dos títulos y dos párrafos con distintos tipos de estilos. Ejemplo

EN el MODELO DE CAJAS CSS los elemento de HTML se pueden consideran como cajas. Con este modelo podremos diseñar la estructura de nuestras páginas web, es decir la disposición de sus elementos en las mismas.

Así pues, según este modelo, un elemento consta de un contenido, un relleno, un borde y un margen.

La siguiente imagen ilustra este modelo:

Ejercicio 16. Crea un fichero html (css_e7.html) y otro fichero css (css_e7.css). Deberá contener un elemento h1 y tres párrafos con diferentes estilos (utiliza clases) como el del siguiente ejemplo. Imágenes (chrome, nubes)

En el siguiente ejemplo puedes ver cómo dar estilo a una página haciendo uso de los elementos <header> <nav> <aside> <article> .... (css_e8.html) (css_e8.css)

Ejercicio 17. Tal como se ha explicado en clase, diseña y sube a tu cuaderno digital (en formato .zip) un sitio web. Fecha límite: sábado 3 de marzo a las 23:59 horas. Criterios de calificación. Este ejercicio tiene una ponderación del 50% de la nota final de la evaluación.