INFORMACIÓN TURÍSTICA SOBRE
PARÍS
Crea una
página web en Kompozer llamada paris.html, con información turística sobre
París. La información deberás buscarla en páginas de Internet.
La página
deberá tener las siguientes características:
·
El título de la página (lo que se ve en la barra
superior del navegador)debe serTurismo en París
·
El color de fondo debe ser rojo claro (el que quieras)
·
Debe tener al menos 2 encabezados de nivel 1, cada uno
a su vez con 2 encabezados dentro de nivel 2. Detrás de cada encabezado de
nivel 2 debe haber un párrafo de al menos 3 líneas con información de París (que
tenga que ver con ese encabezado y subencabezado)
·
Al final de todos los encabezados de nivel 1, añade
otro más, llamado "Lugares de interés". Dentro, pon una lista (no
numerada) con las 5 cosas que consideres que más merece la pena visitar de
París.
NOTA
IMPORTANTE: ten cuidado si copias y pegas información de diferentes páginas. La
página que hagas
debe
quedarse al final homogénea (todos los encabezados con el mismo formato entre
sí, y todos los párrafos y listas con el mismo formato entre sí).
FICHAS DE
PELÍCULAS
Crea una página web en Kompozer llamada pelicula1.html , con información
sobre una película que elijas. La información deberás buscarla en páginas de
Internet. La página deberá tener las siguientes características:
·
•El título de la página (lo que se ve en la barra
superior del navegador)debe ser Ficha de XXXXXX, donde XXXXX será el título de
la película
·
El color de fondo debe ser azul claro (el que quieras)
·
Debe tener las siguientes secciones:
o
Un encabezado de nivel 1 (H1) que tenga como texto el
título de la película. Dentro de este encabezado, pondremos dos encabezados de
nivel 2 (H2):
§
§Uno llamado "Ficha".
Dentro pondremos una lista con los siguientes elementos:
§
§Nombre del director
§
§Año de la película
§
§Género (comedia, drama,
aventuras...)
§
§Duración (en minutos)
§
§Otro llamado "Resumen",
con al menos 2 o 3 párrafos que hablen sobre de qué trata la película
o
Después tendremos otro encabezado de nivel 1 (H1)
llamado “Reparto", donde tendremos una lista con los 5 personajes principales
de la película, y los actores que los interpretan
o
Finalmente, tendremos otro encabezado 1 (H1) llamado
"También te puede gustar...", donde pondremos una lista con al menos
3 películas parecidas a la que hemos elegido
·
Debe haber una línea horizontal justo antes de cada
encabezado de nivel 1 (excepto para el primero). Para insertar líneas
horizontales debes hacer clic derecho sobre la Herramienta HTML de la barra de herramientas,
y elegir Customize Toolbar . Después, elige la herramienta H. Line y arrástrala
a la barra, para poderla usar e insertar barras horizontales.
EJERCICIO CON IMÁGENES Y ANCLAJES
Crea una página llamada harrypotter.html
. Vamos a crear en ella un pequeño resumen de la
saga Harry Potter, con apartados y subapartados, de forma que al principio de
la página tengamos un índice desde el que poder ir directamente a cada partado.
Estructura de la página:
Para empezar, la página deberá tener los
siguientes elementos. Observa que cada uno de los encabezados que vamos a
añadir (tanto de nivel 1 como de nivel 2) tendrán un anclaje, que deberás
añadirles a su izquierda, con el nombre que se indica:
·
Título de la página
(title): Harry Potter
·
Encabezado de nivel 1:
Introducción. Deberá tener un anclaje llamado"introduccion":Dentro,
añade al menos 2 párrafos que encuentres por Internet y que describan de qué va
la saga de Harry Potter.
·
Encabezado de nivel 1:
Episodios de la saga. Deberá tener un anclaje llamado "episodios"
·
Encabezado de nivel 2:
Harry Potter y la piedra filosofal. Deberá tener un anclaje llamado
"episodio1".
·
Encabezado de nivel 2:
Harry Potter y la cámara secreta. Deberá tener un anclaje llamado
"episodio2".
·
Encabezado de nivel 2:
Harry Potter y el prisionero de Azkaban. Deberá tener un anclaje llamado
"episodio3".
·
Encabezado de nivel 2:
Harry Potter y el cáliz de fuego. Deberá tener un anclaje llamado
"episodio4".
·
Encabezado de nivel 2:
Harry Potter y la orden del Fénix. Deberá tener un anclaje llamado
"episodio5".
·
Encabezado de nivel 2:
Harry Potter y el misterio del príncipe.Deberá tener un anclaje llamado
"episodio6".
·
Encabezado de nivel 2:
Harry Potter y las reliquias de la muerte.Deberá tener un anclaje llamado
"episodio7".
Dentro de cada uno de estos encabezados de nivel 2,
busca por Internet al menos 1 o 2 párrafos que sirvan para resumir de qué va
cada episodio.
•Encabezado
de nivel 1: Resumen de personajes. Deberá tener un
anclaje llamado "personajes" : Dentro,
deberá tener una lista (no ordenada), donde aparezcan el nombre de los 5 a 10
personajes principales y el actor o actriz que lo interpreta (busca la
información por Internet). Por ejemplo:Harry Potter: Daniel Radcliffe
§
...
AVANZADO
CREAR Y
APLICAR ESTILOS CSS
Crea un
nuevo documento CSS en Kompozer, y guárdalo como
estilos1.css
en tu carpeta de trabajo del tema. Dentro añade los siguientes estilos:
·
Haz que los párrafos (p) tengan fuente Arial tamaño
12px, color azul (el azul que quieras)
·
Haz que los encabezados de nivel 1 (h1) tengan color
de texto blanco y color de fondo negro
·
Haz que los encabezados de nivel 2 (h2) tengan color
de texto negro y color de fondo gris (el gris que quieras)
·
Crea un estilo personalizado llamado prueba , que
tenga fuente Verdana, tamaño 14px y color rojo (el rojo que quieras)
Cuando
tengas todo esto definido, guarda el documento CSS. Crea ahora dos páginas web pagcss1.html
y pagcss1b.html . Adjunta en ambas la hoja de estilo anterior (como se explica
en los apuntes), y añade en las dos un contenido de cada tipo para ver su formato
(un h1, un h2, un párrafo normal y otro párrafo de estilo prueba).
DOCUMENTOS
WEB A PARTIR DE PLANTILLAS
Crea en
tu carpeta de trabajo un nuevo archivo que sea una plantilla Kompozer. Para
ello, ve a la flecha de la herramienta New, y elige More options.
En el
panel que aparece, elige A blank
template.
Después,
dale a guardar, NO LE PONGAS TÍTULO, y guárdala como PlantillaPrueba.mzt.
Ahora que
la tienes guardada, pincha en la herramienta de CSS, crea una hoja CSS externa
llamada estilosplantillaprueba.css , que tenga los siguientes elementos:
•Estilos
para el elemento body, que ponga el color de fondo de la página
amarillo
claro.
•Estilos
para el H1 que ponga la letra color rojo, con un borde rojo inferior
•Estilos
para el párrafo que ponga la letra Arial 12 píxeles, color gris
Una vez
tengas los estilos hechos, en la plantilla, añade un encabezado H1
que ponga
“Biografía de...”. Debajo, añade dos enlaces, uno que vaya a una página llamada
bio1.html y otro a bio2.html (estas dos páginas las harás a continuación).
Finalmente,
añade un área editable llamada biografía , debajo de los enlaces anteriores.
Guarda la plantilla con sus cambios.
Ahora,
pincha de nuevo en la flecha de la herramienta New, ve a More options y elige
la opción A new document based on a template . Elige la plantilla que has hecho
antes, y guarda el documento como bio1.html
. En el
H1 que pone “Biografía de...” complétala con el nombre de un personaje que te
guste (porejemplo, “Biografía de Isaac Newton”), y en el área editable de
abajo, rellénala con algunos párrafos de la biografía de ese personaje.
Ve al
menú Format >Page Title and Properties y cámbiela el Title a “Biografía de
XXX”, donde XXX será el nombre del personaje que hayas elegido (en este caso,
Isaac Newton).
Repite
los pasos anteriores para crear una segunda página a partir de la misma plantilla.
Llámala bio2.html y rellénala con los datos de la biografía de un segundo
personaje.
Cuando lo
tengas todo, prueba a visualizarlo en un navegador, y comprueba que los enlaces
cambian de una biografía a la otra.
