PRACTICA 1: TEXTOS

1. Crea una nueva pgina en el sitio EJEMPLO1, y la guardamos con el nombre TEXTO1. 2. Escribe directamente en ella este texto: Sabas que... ... el refrn " en las manos de un idiota ni la plvora arde " viene de las guerras napolenicas. Al parecer el mismo Napolen Bonaparte profiri esta frase a propsito del general Hardrick Von Jaun, comandante del ejercito austrohngaro, tras arrasar al ejercito aliado en la batalla de Jena. Lo curioso es que Bonaparte, en sus aos de academia militar en Lyon, era conocido como el cadete "Oblique" (oblicuo) por sus sucesivos errores en las prcticas de artillera. 3. Aplica a la primera lnea un Encabezado1 y a la segunda un Encabezado2. 4. Selecciona el ltimo prrafo. 5. Corta el prrafo seleccionado y lo pegas por encima del anterior. 6. Convierte los dos ltimos prrafos en una lista ordenada. 7. Cambia la lista ordenada a Lista sin ordenar.

8. Aplica la fuente Arial a los elementos de la lista. 9. Aplica color azul oscuro a los encabezados.
10. Convierte en prrafos normales los elementos de la lista, y sngralos una vez.

11. Aplica un color de gris al fondo de la pgina.

12. Guardamos los cambios. 13. Finalmente visualiza el resultado en el navegador.

PRACTICA 2: ENLACES DE PGINAS

1. Crea una pgina nueva llamada INDEX en un sitio nuevo, que se llame EJEMPLO2. sta va a ser la pgina principal. Acostmbrate a llamar a las pginas principales de esta forma (index.htm). Es un mtodo utilizado universalmente por los servidores para reconocer la pgina inicial de un sitio web. Con el siguiente esquema vamos a enlazar mediante vnculos cada una de las pginas, segn indican las flechas. Para ello crea las pginas necesarias y escribe los textos que consideres oportunos para cada uno de los enlaces.

NOTAS El contenido de la informacin de la energa elica tiene la siguiente estructura: Parques elicos= parqueseolicos.htm Cmo funciona un aerogenerador? = saberaero.htm

El contenido de la informacin de la energa solar se va ha componer de dos apartados con sus dos pginas: Conexin directa a red = conexin.htm Cmo funciona una clula fotovoltaica? = sabercelula.htm

El contenido de la informacin de los productos es similar.

PRACTICA 3: TABLAS ANIDADAS

2. Crea las siguientes tablas, en una pgina nueva dentro de tu sitio EJEMPLO 1. Guarda la pgina con el nombre TABLAS01.

NOTAS Para poner el tamao de texto a 2, haz clic en el men Texto y en la opcin Tamao y clic en 2. Si est desactivado esto ltimo, haz clic en el men Edicin y en la opcin Preferencias y en la categora General, desactiva la casilla Utilizar CSS en lugar de etiquetas HTML . Y haz clic en el botn Aceptar.

PRACTICA 4: HIPERVINCULOS DE ANCLAJE

3. Crea una pgina nueva HTML en el sitio EJEMPLO1. Guarda la pgina con el nombre ROLLO2. 4. Escribe y copia un texto cualquiera hasta rellenar varias pantallas. 5. Inserta los siguientes ttulos, con el formato Encabezado 2, en tu pgina: PRINCIPIO DESARROLLO DEL TEMA CONCLUSIONES 6. Inserta 3 puntos de anclaje, que coincidan con los ttulos anteriores: Pon el nombre PRINCIPIO al primer anclaje. Pon el nombre DESARROLLO al segundo anclaje. Pon el nombre CONCLUSIONES al tercer anclaje. 7. Ahora, crea 2 hipervnculos al comienzo de la pgina, con los siguientes textos: Para ir al Desarrollo del tema, haz clic aqu. Para ir a las conclusiones del tema, haz clic aqu. 8. Por ltimo, crea un hipervnculo al final de la pgina, que salte al principio de la pgina. 9. Guarda todos los cambios y comprueba que funcionan los hipervnculos.

PRACTICA 5: TABLAS
10. Crea un sitio nuevo con el nombre PRACTICA05. 11. Crea 4 pginas nuevas html. Gurdalas con los nombres INDEX, HISTORIA, CONCEPTOS y SERVICIOS. 12. En la pgina INDEX haz el siguiente diseo:

El ttulo est escrito en la fuente Arial, Helvetica, sans-serif, con el formato Encabezado 1 y est centrado. La tabla tiene 3 columnas de 170 pxeles de ancho cada una y 1 fila de 145 pxeles de alto. El grosor del borde es 1 pxel. Est centrada. Los hipervnculos estn escritos en la fuente Arial, Helvetica, sans-serif, con el formato Prrafo. Estn centrados. 13. En la pgina HISTORIA haz el siguiente diseo:

El ttulo est escrito en la fuente Arial, Helvetica, sans-serif, con el formato Encabezado 1. La tabla est al 90 %, la primera columna est al 13% y la segunda columna est al 87%. Tiene 10 filas. El grosor del borde es 1 pxel.

El texto de la primera columna est escrito en la fuente Arial, Helvetica, sans-serif en negrita y con color rojo. Est centrado. El texto de la segunda columna est escrito en la fuente Arial, Helvetica, sans-serif. 14. En la pgina SERVICIOS crea el siguiente diseo:

La tabla y los textos tienen las mismas propiedades que en la pgina HISTORIA. (Puedes copiar y pegar la tabla). 15. En la pgina CONCEPTOS crea el siguiente diseo:

La tabla y los textos tienen las mismas propiedades que en la pgina HISTORIA. (Puedes copiar y pegar la tabla). 16. En el men Modificar, en la opcin Propiedades de la pgina y en la categora Aspecto, puedes cambiar el color de fondo de la pgina y poner un ttulo. 17. Pon un hipervnculo en las pginas de HISTORIA, SERVICIOS y CONCEPTOS para que vuelvan a la pgina INDEX.

18. Pon un hipervnculo para enviar un e-mail a juanperez@laalegriadelacasa.com.

19. Guarda todo y comprueba los hipervnculos.

PRACTICA 6: DISEO DE TABLAS

1. Crea un sitio nuevo con el nombre PRACTICA06. 2. Crea una pgina nueva html. Gurdala con el nombre INDEX. 3. Escribe el ttulo MIS SEIS WEBS IMPRESCINDIBLES. Est escrito en la fuente Arial, Helvetica, sans-serif, con el formato Encabezado 1 y est centrado, dentro de una tabla centrada de 750 x 110. Usa el botn Estndar para escribir. 4. Disea una tabla de 750 x 260.

5. Busca una imagen que te guste. Puedes usar www.google.es. Cpiala en tu sitio web.
6. Inserta una celda en la tabla anterior. Inserta dentro de la celda la imagen. 7. En la otra celda de la tabla, escribe los siguientes vnculos: Alerta antivirus Diccionarios online Descarga de software - Softonic Viajes - Gua Micheln Informacin de telfonos Enciclopedia Wipipedia www.alerta-antivirus.com www.diccionarios.com www.softonic.com www.michelin.com www.paginasamarillas.es es.wikipedia.org

Los hipervnculos estn escritos en la fuente Arial, Helvetica, sans-serif, con el formato Prrafo. Estn centrados.

8. Pon un hipervnculo para enviar un e-mail a juanperez@laalegriadelacasa.com, con el formato

Prrafo y la fuente Arial, Helvetica, sans-serif , en la parte inferior derecha de la pgina. 9. Guarda todo y comprueba los hipervnculos.

PRACTICA 7: GALERIA DE IMGENES

En esta prctica vamos a crear una galera de imgenes. Se trata de crear una pgina principal con las imgenes pequeas y, despus, una pgina separada por cada imagen original-grande. Se hace esta separacin para que la carga de la galera no sea excesivamente lenta. 1. Crea una pgina nueva HTML con el nombre INDEX, en un sitio nuevo con el nombre PRACTICA07.

2. Busca en www.google.es seis imgenes que te gusten. Guarda cada imagen en una carpeta
de imgenes de tu sitio web. 3. Usa el men Comandos y la opcin Crear lbum de fotos web. 4. Rellena el cuadro de dilogo Crear lbum de fotos web: a. En la casilla Ttulo del lbum de fotos escribe: MIS SEIS FOTOS PREFERIDAS b. En la casilla Informacin de subencabezado escribe: UNA IMAGEN VALE MAS QUE MIL PALABRAS. c. En la casilla Otra informacin escribe: PRACTICA 7 DEL CURSO. d. En la casilla Carpeta de imgenes de origen, selecciona con el botn Examinar tu carpeta de imgenes que has buscado en google. e. En la casilla Carpeta de destino, selecciona la carpeta de tu sitio web. f. Las dems opciones del cuadro puedes dejarlas como estn. g. Pulsa el botn Aceptar. 5. Guarda todos los cambios y comprueba los resultados en el navegador.

PRACTICA 8: REPASO
Definir el sitio Web y establecer propiedades de pgina 1. Cada prctica debe hacerse paso a paso, y en el mismo orden sin saltos. 2. Crea un sitio local con el nombre DEPORTES, en tu carpeta Mis documentos. 3. Crea una pgina HTML con el nombre INDEX y modifica las propiedades de pgina (men Modificar). En el ttulo escribe Quines somos?, en el color de fondo selecciona el color #99CCCC y el color de texto ser #003333. 4. Guarda los cambios y cierra la pgina. Modificar las propiedades de texto 1. Crea una pgina HTML con el nombre INSTALACIONES, en el sitio DEPORTES. 2. Escribe en la primera lnea el texto NUESTRAS INSTALACIONES. 3. Selecciona el formato Encabezado 1 al texto NUESTRAS INSTALACIONES. 4. Escribe 6 lneas describiendo las instalaciones, con una lista sin ordenar (men Texto). 5. Pon 2 sangras a la lista anterior (men Texto). 6. Guarda los cambios y cierra la pgina. Inserta imgenes 1. Abre la pgina INSTALACIONES. 2. Busca en www.google.es una imagen de deportes. Guarda la imagen en la subcarpeta IMAGENES (Si no existe crala) de DEPORTES. 3. Inserta la imagen anterior a la derecha del texto de las instalaciones. 4. Guarda los cambios y cierra la pgina. Formatos de tablas 1. Crea una pgina HTML con el nombre RESERVAS, en el sitio DEPORTES. 2. Crea la siguiente tabla y selecciona algn formato de tabla (men Comandos). ACTIVIDAD AEROBIC CARDIO PESAS 3. Guarda los cambios y cierra la pgina. Crear hipervnculos 1. Crea una pgina HTML con el nombre QUIEN, en el sitio DEPORTES. 2. Crea un hipervnculo a http://es.sports.yahoo.com en la pgina QUIEN. Utiliza el destino _blank (en el panel Propiedades) para que se abra en una ventana nueva del navegador. 3. En la pgina INDEX, crea un hipervnculo para cada pgina del sitio. 4. Guarda los cambios y cierra la pgina. 4 PRECIO/HORA 3

PRACTICA 9: REPASO
1. Crea un sitio local con el nombre PRACTICA 10. 2. Crea una pgina HTML nueva y modifica las propiedades de la pgina para poner un color de fondo #00FFCC. 3. Escribe como ttulo RECETAS en el ttulo de la pgina. 4. Guarda la pgina con el nombre INDEX. 5. Escribe el ttulo RECETAS DE LA ABUELA, con el formato Encabezado 1, centrado y con la fuente Courier New, Courier, mono. 6. Crea otra pgina HTML con el nombre CONSEJOS. Inserta la siguiente tabla:

CONSEJOS
Uno de los mtodos ms empleados en la cocina consiste en sumergir los alimentos en un recipiente con agua y aplicar calor durante un tiempo, hasta que estn cocidos. En ocasiones los distintos elementos se agregan al agua fra, como es el caso de hortalizas frescas, legumbres ablandadas, pescados, carne para caldo, huevos, etc., mientras que en otras ocasiones, se aaden cuando el agua est en ebullicin: pasta, arroz, algunas verduras, la carne del cocido, etc.

Tiempos de coccin Alcachofas Apio Calabacines Calabaza Cardos Cebollas Coles de Bruselas Coliflor Escarola

Minutos 20-30 30-40 20-30 30-40 45-50 25-30 20-25 15-20 15-20

7. La fuente es Courier New, Courier, mono. 8. Escribe el texto CONSEJOS PRACTICOS en el ttulo de la pgina. 9. Guarda los cambios. 10. Crea un men de salto, con la siguiente lista:

El mundo de las recetas Recetas tradicionales Recetas internacionales Recetas espaolas

http://www.mundorecetas.com http://www.recetas.net http://www.arecetas.com http://www.acocinar.com/recetas.htm

11. Crea una barra de navegacin, con dos imgenes ( imagen arriba y sobre imagen). Pon un hipervnculo que salte a la pgina de consejos. 12. Inserta una direccin de e-mail para solicitar ms informacin (mailto:) 13. Inserta una tabla de 2 columnas y 10 filas en la pgina INDEX, con las recetas ms populares. Elige algn formato de tabla a tu gusto. 14. Guarda todos los cambios y comprueba los resultados en el navegador.

PRACTICA 10: MARCOS

1. Crea un sitio Web, con el nombre PRACTICA 12, donde la pgina principal est dividida en 3 marcos; el marco superior para el ttulo TIENDAS DE MUSICA ONLINE, otro marco a la izquierda con los hipervnculos, y el marco principal, que muestre el contenido de cada hipervnculo de las tiendas de msica online. 2. Las pginas de los marcos deben estar diseadas con las siguientes propiedades: a. El fondo de la pgina del marco principal debe contener una imagen o un color de fondo. b. El marco superior debe tener el ttulo con Encabezado 1, con el tipo de letra y el color que quieras. 3. Los hipervnculos del marco izquierdo deben estar diseados con las siguiente propiedades: a. Los prrafos deben estar con el tipo de letra y color que elijas. La alineacin debe ser centrada. b. Los hipervnculos son: Terra Msica Premium MSN Music Wanadoo Jukebox Apple iTunes Music Store http://musicapremium.terra.es/index.cfm http://music.msn.es http://jukebox.ritmic.com http://www.apple.com/es/itunes/store

4. Modifica las propiedades de los bordes de los marcos, para que se visualicen como t elijas. 5. Guarda todo y comprueba los resultados en el navegador.

PRACTICA 13: GALERIA DE IMGENES Y MARCOS

En esta prctica vamos a crear una galera de imgenes. Se trata de crear una pgina principal con las imgenes pequeas y, despus, una pgina separada por cada imagen original-grande. Se hace esta separacin para que la carga de la galera no sea excesivamente lenta. 6. Crea una pgina nueva HTML con el nombre INDEX, en un sitio nuevo con el nombre PRACTICA13. 7. Disea marcos, en la pgina INDEX. 8. En la pgina INDEX, escribe el texto GALERIA DE IMGENES con el formato Encabezado 1, centrado y con la fuente Arial, Helvetica, sans-serif. Debajo de este texto, escribe el texto HAZ CLIC EN CADA IMAGEN PARA AMPLIARLA!, con el formato Encabezado 2, centrado y la fuente Arial, Helvetica, sans.serif. 9. En el marco de la izquierda, inserta la imagen PUESTA DE SOL, de la carpeta IMAGENES DE MUESTRA. Copia la imagen dentro de tu sitio en una carpeta de imgenes. Si es necesario crea la carpeta de imgenes. En la imagen anterior, cambia el ancho a 80 pxeles y el alto a 60 pxeles. 10. Debajo de PUESTA DE SOL, inserta la imagen COLINAS AZULES, de la carpeta IMAGENES DE MUESTRA. Copia la imagen dentro de tu sitio en una carpeta de imgenes. En la imagen anterior, cambia el ancho a 80 pxeles y el alto a 60 pxeles. 11. Debajo de COLINAS AZULES, inserta la imagen INVIERNO, de la carpeta IMAGENES DE MUESTRA. Copia la imagen dentro de tu sitio en una carpeta de imgenes. En la imagen anterior, cambia el ancho a 80 pxeles y el alto a 60 pxeles. 12. Debajo de INVIERNO, inserta la imagen NENUFARES, de la carpeta IMAGENES DE MUESTRA. Copia la imagen dentro de tu sitio en una carpeta de imgenes. En la imagen anterior, cambia el ancho a 80 pxeles y el alto a 60 pxeles. 13. Crea 4 hipervnculos para que cada imagen del marco izquierdo, se abra en el marco principal. 14. Guarda todos los cambios y visualiza el resultado en el navegador.