Los colores en HTML se representan mediante un nmero hexadecimal.

Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que puede tomar hasta diecisis valores distintos,
que van del 0 al 9, y de la A a la F.
Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF.
Existen 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en
Windows como en Macintosh.
Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos que forman parte del nmero hexadecimal.
A continuacin se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo necesites.

#000000

#000033

#000066

#000099

#0000CC

#0000FF

#003300

#003333

#003366

#003399

#0033CC

#0033FF

#006600

#006633

#006666

#006699

#0066CC

#0066FF

#009900

#009933

#009966

#009999

#0099CC

#0099FF

#00CC00

#00CC33

#00CC66

#00CC99

#00CCCC

#00CCFF

#00FF00

#00FF33

#00FF66

#00FF99

#00FFCC

#00FFFF

#330000

#330033

#330066

#330099

#3300CC

#3300FF

#333300

#333333

#333366

#333399

#3333CC

#3333FF

#336600

#336633

#336666

#336699

#3366CC

#3366FF

#339900

#339933

#339966

#339999

#3399CC

#3399FF

#33CC00

#33CC33

#33CC66

#33CC99

#33CCCC

#33CCFF

#33FF00

#33FF33

#33FF66

#33FF99

#33FFCC

#33FFFF

#660000

#660033

#660066

#660099

#6600CC

#6600FF

#660033

#663333

#663366

#663399

#6633CC

#6633FF

#666600

#666633

#666666

#666699

#6666CC

#6666FF

#669900

#669933

#669966

#669999

#6699CC

#6699FF

#66CC00

#66CC33

#66CC66

#66CC99

#66CCCC

#66CCFF

#66FF00

#66FF33

#66FF66

#66FF99

#66FFCC

#66FFFF

#990000

#990033

#990066

#990099

#9900CC

#9900FF

#993300

#993333

#993366

#993399

#9933CC

#9933FF

#996600

#996633

#996666

#996699

#9966CC

#9966FF

#999900

#999933

#999966

#999999

#9999CC

#9999FF

#99CC00

#99CC33

#99CC66

#99CC99

#99CCCC

#99CCFF

#99FF00

#99FF33

#99FF66

#99FF99

#99FFCC

#99FFFF

#CC0000

#CC0033

#CC0066

#CC0099

#CC00CC

#CC00FF

#CC3300

#CC3333

#CC3366

#CC3399

#CC33CC

#CC33FF

#CC6600

#CC6633

#CC6666

#CC6699

#CC66CC

#CC66FF

#CC9900

#CC9933

#CC9966

#CC9999

#CC99CC

#CC99FF

#CCCC00

#CCCC33

#CCCC66

#CCCC99

#CCCCCC

#CCCCFF

#CCFF00

#CCFF33

#CCFF66

#CCFF99

#CCFFCC

#CCFFFF

#FF0000

#FF0033

#FF0066

#FF0099

#FF00CC

#FF00FF

#FF3300

#FF3333

#FF3366

#FF3399

#FF33CC

#FF33FF

#FF6600

#FF6633

#FF6666

#FF6699

#FF66CC

#FF66FF

#FF9900

#FF9933

#FF9966

#FF9999

#FF99CC

#FF99FF

#FFCC00

#FFCC33

#FFCC66

#FFCC99

#FFCCCC

#FFCCFF

#FFFF00

#FFFF33

#FFFF66

#FFFF99

#FFFFCC

#FFFFFF

Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en hexadecimal. Estos colores pueden representarse por
su nombre, y son los siguientes:

Color

Prrafos <p> ...

Hexadecimal

Nombre

#FFFFFF

white

#000000

black

#000080

navy

#0000FF

blue

#008000

green

#008080

teal

#00FF00

lime

#00FFFF

aqua

#800000

maroon

#800080

purple

#808000

olive

#808080

gray

#C0C0C0

silver

#FF0000

red

#FF00FF

fuchsia

#FFFF00

yellow

El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada uno de los prrafos debe insertarse entre las
etiquetas <p> y </p>.
No es necesario insertar la etiqueta <br> para que un nuevo prrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se
cambie de lnea automticamente.
Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden
ser left (izquierda), right (derecha), center (centrado) o justify (justificado).
Por ejemplo, para insertar el texto:

Bienvenidos a mi pgina.
Aqu encontraris cursos de formacin muy interesantes.
Habra que escribir:

<p align="center">Bienvenidos a mi p&aacutegina.</p>

<p>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</p>
Otra forma de cambiar la alineacin del texto es mediante las etiquetas <div> y </div>, para las que tambin existe el atributo align. La
etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separacin entre ellos es
menor.
Por ejemplo, para insertar el texto:

Bienvenidos a mi pgina.
Aqu encontraris cursos de formacin muy interesantes.
Habra que escribir:

<div align="center">Bienvenidos a mi p&aacutegina.</div>

<div>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</div>
Tambin es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado.
Por ejemplo, para insertar el texto:

Bienvenidos a mi pgina.
Habra que escribir:

<center>Bienvenidos a mi p&aacutegina.</center>
Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de lnea (como en el caso de <p> y <div>), son las
etiquetas <span> y </span> volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo.

Encabezados <h1> ...

Existen una serie de encabezados que suelen utilizarse para establecer ttulos dentro de una pgina. La diferencia entre los distintos tipos de
encabezado es el tamao de la letra, el tipo de resaltado, y la separacin existente entre el texto y los elementos que tiene encima y debajo de l.
Hay que tener en cuanta que el navegador del usuario es el que aplicar el estilo del encabezado por lo que el mismo ttulo se puede visualizar de
forma diferente segn el navegador.
Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre.
A continuacin se muestran los distintos encabezados existentes:

Etiqueta

Ejemplo

<H1>

Ttulo 1: HTML

<H2>

Ttulo 2: HTML

<H3>

Ttulo 3: HTML

<H4>

Ttulo 4: HTML

<H5>

Ttulo 5: HTML

<H6>

Ttulo 6: HTML

Para todas estas etiquetas es posible especificar el valor del atributo align.
Por ejemplo, para insertar el texto:

El lenguaje HTML
Apartado 1: Las etiquetas
Habra que escribir:

<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>

Marquesinas <marquee>

Las marquesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea.
Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.
La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen.
A travs del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como
si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).
A travs del atributo direction puede modificarse la direccin en la que se mover el texto. Puede tomar los valores down (de arriba a
abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha).
Tambin es posible establecer un color de fondo, a travs del atributo bgcolor.
Por ejemplo, para insertar la siguiente marquesina:

Habra que escribir:

<marquee bgcolor="#006699" behavior="alternate" direction="right">

<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>
Tambin es posible insertar imgenes, tablas y otros elementos entre las etiquetas <marquee> y </marquee>, no slamente texto.

Practicar las operaciones que hay que realizar para crear una pgina bsica.

Si es la primera vez que realizas el ejercicio, haz clic aqu para descargarte la carpeta de ejercicios, debers extraer los archivos en la
carpeta Mis documentos de tu disco duro, ah se crear una carpeta ejercicios_html.
A lo largo del curso vamos a crear tres sitios web, cada sitio lo guardaremos en una carpeta dentro de ejercicios_html.
En esa carpeta tenemos:
La carpeta animales, donde guardaremos los archivos de un sitio web de una asociacin ficticia de veterinarios que iremos creando a lo largo de
los ejercicios paso a paso.
La carpeta deportes, donde guardaremos los archivos de un sitio web de una cadena de centros deportivos que iremos creando a lo largo de los
ejercicios propuestos.
La carpeta flores, donde guardaremos los archivos de un sitio web de una floristera que iremos creando a lo largo de los ejercicios propuestos.
Cada carpeta contiene a su vez una carpeta imagenes y una carpeta varios donde iremos guardando las imgenes y ficheros varios

respectivamente.
Una vez tenemos nuestros sitios organizados, podemos empezar a practicar.

1 Si no tienes abierto el Bloc de notas, brelo para realizar el primer ejercicio.

2 Escribe el cdigo que aparece a continuacin:

<html>
<head>
<title>Inicio</title>
</head>
<body bgcolor="#99CC99">
</body>
</html>
Con este cdigo estars creando un documento con el ttulo "Inicio", y con el color de fondo verde (#99CC99).
3 Haz clic sobre el men Archivo.
4 Haz clic sobre la opcin Guardar como. Se abrir el cuadro de dilogo Guardar como.
5 En el recuadro Tipo: elige Todos los archivos.
6 Guarda el documento con el nombre inicio.htm, dentro de la carpeta Mis documentos/ejercicios_html/animales de tu disco duro.
7 Abre el documento que acabas de crear en un navegador, y comprueba que obtienes una pgina como la que aparece si pulsas aqu. Fjate en
el color de fondo de la pgina y en la barra de ttulo.

Estructura de una pgina

Si no tienes abierto el Bloc de notas, brelo para realizar los ejercicios planteados a continuacin.

Ejercicio 1: Deportes.

1 Abrir el documento quienes.htm, de la carpeta originales/deportes del curso.

2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes

3 Establecer #0099CC como color de fondo y 40 como tamao de los mrgenes.
4 Guardar los cambios y comprobar el funcionamiento con tu navegador, no te preocupes por el formato del texto, lo arreglars en el tema
siguiente.

Ejercicio 2: Flores.

1 Copiar la imagen fondo.gif que encontrars en la carpeta originales/flores/imagenes a tu carpeta Mis

documentos/ejercicios_html/flores/imagenes
2 Copiar el documento inicio.htm, de la carpeta originales/flores a tu carpeta Mis documentos/ejercicios_html/flores.
3 Abrir el documento Mis documentos/ejercicios_html/flores/inicio.htm con el Bloc de notas.
4 Establecer como imagen de fondo la imagen fondo.gif de la carpeta ejercicios_html/flores/imagenes.
5 Guardar los cambios y comprobar el funcionamiento en tu navegador.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.

Ejercicio 1: Deportes

Apartado 1 Hacer clic sobre el men Archivo, y elegir la opcin Abrir.

En la nueva ventana, elegir Todos los archivos en Tipo:.
Seleccionar el documento quienes.htm, de la carpeta deportes.
Pulsar sobre el botn Abrir.
Apartado 2 Hacer clic sobre el men Archivo, y elegir la opcin Guardar como.
En la nueva ventana, elegir la carpeta ejercicios_html/deportes.
Dejar el mismo nombre de documento quienes.htm.
Pulsar sobre el botn Guardar.
Apartado 3 Buscar la etiqueta <body>.
Sustituirla por <body bgcolor="#0099CC" leftmargin="40" topmargin="40" marginwidth="40" marginheight="40">.
Apartado 4 Hacer clic sobre la opcin Guardar, del men Archivo.
Abrir el documento quienes.htm en un navegador y comprobar que el fondo de la pgina es de color azul.

Ejercicio 2: Flores

Apartado 3 Hacer clic sobre el men Archivo, y elegir la opcin Abrir.

En la nueva ventana, elegir Todos los archivos en Tipo:.
Seleccionar el documento inicio.htm, de la carpeta ejercicios_html/flores.
Pulsar sobre el botn Abrir.
Apartado 4 Buscar la lnea en la que aparezca <body.
Aadir background="imagenes/fondo.gif" delante del smbolo > de cierre de la etiqueta body.
Apartado 5 Hacer clic sobre la opcin Guardar, del men Archivo.
Abrir el documento inicio.htm en un navegador, y comprobar el fondo de la pgina es de color rosa, con flores.

Modificar las propiedades del texto

Practicar las operaciones que hay que realizar para insertar texto especificando sus propiedades.

Ejercicio 1.

1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio.

2 Abre el archivo inicio.htm, que creaste en el tema anterior y que se encuentra en la carpeta ejercicios_html/animales.
3 Inserta una lnea en blanco debajo de la etiqueta <body>, y escribe el siguiente cdigo en ella:

<basefont color="red" size="1 ">

Con este cdigo estars estableciendo el color rojo (#FF0000) y tamao 1 para el texto del documento.
Si guardas ahora los cambios y visualizas la pgina, no vers ningn cambio ya que la pgina no tiene texto.
4 Detrs de la etiqueta <basefont> inserta una lnea en blanco, y escribe el siguiente texto: Inicio
5 Guarda el archivo y visualzalo en tu navegador, el texto debe aparecer en rojo y pequeo.
Dejaremos la pgina un poco ms discreta y cambiaremos el color del texto a verde oscuro ( #003333) y subiremos el tamao de las letras.
6 Rectifica la etiqueta <basefont para que quede as:

<basefont color="#003333" size="4">

Con este cdigo estars estableciendo el color verde oscuro (#003333) y tamao 4 para el texto del documento.
7 Guarda el archivo y visualzalo en tu navegador, observa los cambios.
8 Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma:

<h1>Inicio</h1>
Con este cdigo estars conviertiendo el texto en un encabezado de primer nivel.
9 Guarda el archivo y visualzalo en tu navegador, observa los cambios, el texto aparece destacado y ms grande.
10 Inserta una lnea en blanco debajo del cdigo anterior, y escribe la etiqueta <hr>.
Con esta etiqueta estars insertando una regla horizontal.
11 Guarda el archivo y visualzalo en tu navegador, observa la regla
12 Inserta una lnea en blanco debajo de la etiqueta anterior, y escribe el siguiente cdigo en ella:

<blockquote>
<blockquote>
<p align="left">
<em>
Somos una asociaci&oacute;n de veterinarios, estudiantes de veterinaria, o simplemente amantes de los animales.
<br>
Desde esta p&aacute;gina web intentaremos resolver tus dudas acerca de c&oacute;mo cuidar a tus mascotas.
</em>
</p>
</blockquote>
</blockquote>
Con este cdigo estars insertando un prrafo (<p>) dividido en dos lneas (<br>).
Este prrafo estar alineado a la izquierda (align="left"), aparecer en cursiva (<em>) y tendr doble sangrado (<blockquote>).
13 Guarda el archivo y visualzalo en tu navegador, comprueba que obtienes una pgina como la que aparece si pulsas aqu. Para apreciar mejor

el efecto del prrafo ves cambiando el tamao de la ventana de tu navegador y vers como el texto se va escribiendo en ms lneas pero siempre
alineado a la izquierda y saltando de lnea despus de la primera frase.

Ejercicio 2.

1 Abre el documento gatos.htm, de la carpeta originales/animales del curso.

2 Guarda la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales
Vamos a modificar la pgina para que tenga el siguiente aspecto:

1 Empezamos por darle a la palabra Gatos un estilo de encabezado 1: <h1>Gatos</h1>

Si quieres puedes ir observando los cambios segn los vayas introduciendo, guardando sin cerrar el bloc de notas y visualizando la pgina cada
vez (la primera vez abres el explorador con la pgina gatos.htm y despus de ver el efecto, en vez de cerrar la ventana del explorador la dejas
abierta, as cuando hayas hecho el siguiente cambio en la pgina podrs volver a la sesin del explorador con la pgina gatos.htm y despus de
hacer clic en el botn Actualizar de tu navegador vers mejor el efecto producido por el cambio que has incorporado a la pgina).
2 Detrs aadimos una regla con la etiqueta <hr>.
3 Aadimos una lnea en blanco con <br>
4 La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una etiqueta <blockquote> y adems le asignamos un
estilo de encabezado 3:

<blockquote>
<h3>&iquest;COMO PREVENIR LOS PROBLEMAS DENTALES?</h3>
</blockquote>
5 Slo nos queda definir la lista intercalando las siguientes etiquetas:

<ul>
<li>Alimentar al gato con comida seca de buena calidad o darle algo duro para que lo mastique</li>
<ul>
<li>Preferiblemente que coma pienso</li>
</ul>
<li>Cepillarle los dientes una vez a la semana</li>
<li>Que el veterinario examine la boca del gato por lo menos cada seis meses</li>
</ul>
6 Guarda el archivo y visualzalo en tu navegador.

********************************************************

Si no tienes abierto el Bloc de notas, brelo para realizar los ejercicios planteados a continuacin.

Ejercicio 1: Deportes.

1 Abrir el documento quienes, de tu carpeta ejercicios_html/deportes.

2 Aadir el cdigo necesario para que la pgina quede de la siguiente forma:

3 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 2: Deportes.

1 Abrir el documento donde.htm, de la carpeta originales/deportes del curso.

2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes
3 Convertir la ltima frase en una marquesina.
4 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 3: Deportes.

1 Abrir el documento intalaciones.htm, de la carpeta originales/deportes del curso.

2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes
3 Convertir la lista de actividades que aparece antes de la frase Puedes apuntarte... en una lista con vietas.
4 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 4: Flores.

1 Abrir el documento inicio.htm, de la carpeta ejercicio_html/flores.

2 Aadir el cdigo necesario para que la pgina quede de la siguiente forma:

Establecer #990033 como color del texto del documento, y 4 como el tamao normal.
3 Guardar los cambios y comprobar el funcionamiento en un navegador.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.

Ejercicio 1: Deportes

Apartado 2 Rectificar el cdigo dejndolo de la siguiente manera:

<basefont size="4">
<h1><u>&iquest;QUIENES SOMOS?</u></h1>
<br>
<p align="justify">Somos una cadena de centros deportivos dispuestos a ofrecerte
nuestras instalaciones a buen precio, con la posibilidad de reservarlas con
antelaci&oacute;n a trav&eacute;s de esta web.</p>
<br>
<p align="center">Este m&eacute;s, podr&aacute;s hacerte socio de forma totalmente
gratuita. <br>
Ac&eacute;rcate a uno de nuestros centros y no pierdas esta oportunidad.</p>
La primera lnea aparece subrayada ( <u>), como un encabezado (<h1>).
Luego tenemos dos prrafos ya que tiene una alineacin diferente, el primero est justificado ( <p align="justify" todas las lneas acaban sobre
la misma vertical derecha), el segundo est alineado al centro (<p align="center">).
Entre los dos prrafos tenemos una lnea en blanco (<br>)

Ejercicio 2: Deportes

Apartado 2 Buscar la lnea en la que aparezca el texto Para m&aacute;s informaci&oacute;n sobre d&oacute;nde se encuentran

nuestros centros, puedes llamar al: 555 05 05 50 .

El prrafo es <p><em><b>Para m&aacute;s informaci&oacute;n sobre d&oacute;nde se encuentran nuestros centros, puedes
llamar al: 555 05 05 50</b></em></p>.
Insertar dicho prrafo entre las etiquetas <marquee> y </marquee>.
Apartado 3 Hacer clic sobre la opcin Guardar, del men Archivo.

Apartado 4 Abrir el documento donde.htm en un navegador y comprobar que el texto Para ms informacin sobre dnde se encuentran
nuestros centros, puedes llamar al: 555 05 05 50 est en movimiento.

Ejercicio 3: Deportes

Apartado 3 Sustituir las etiquetas <p> que aparecen delante de cada actividad por la etiqueta <li> y encerrar la lista entre etiquetas <ul> (lista
con vietas), el cdigo quedar as:

<ul>
<li>Pista f&uacute;tbol sala y baloncesto</li>
<li>Sala aer&oacute;bic</li>
<li>Pistas de tenis</li>
<li>Sala de musculaci&oacute;n</li>
<li>Sauna</li>
<li>Duchas</li>
</ul>
Apartado 4 Abrir el documento instalaciones.htm en un navegador y comprobar que el texto ahora aparece una lista de actividades.

Ejercicio 4: Flores

Apartado 2 Rectificar el cdigo dejndolo de la siguiente manera:

<basefont color="#990033" size="4">

<h1 align="center"><em><font size="7">- Inicio -</font></em></h1>
<p>Desde esta p&aacute;gina web podr&aacute;s comprar regalos para aquellas personas
que son especiales para ti.</p>
<p>Nosotros nos encargaremos de hac&eacute;rselos llegar, y darles esa sorpresa
que no se esperan.</p>
<br><br>
<h2><center> aulaClic</center></h2>
Apartado 3 Hacer clic sobre la opcin Guardar, del men Archivo.
Abrir el documento inicio.htm en un navegador, y comprobar que el texto de la pgina es de color rojo.

Insertar hiperenlaces

Ejercicio 1: Deportes.

1 Abrir el documento menu.htm, de la carpeta originales/deportes del curso.

2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes
3 Rectificar la pgina para que la palabra E-MAIL sea un enlace de correo electrnico a tu direccin de correo.
4 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 2: Deportes.

1 Abrir el documento instalaciones.htm, de la carpeta ejercicios_html/deportes.

2 Aadir al texto de cada actividad un enlace al prrafo correspondiente a esa actividad para que el navegante pueda ver directamente la
descripcin de la actividad sin tener que moverse por toda la pgina.
3 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 3: Flores.

1 Abrir el documento menu.htm, de la carpeta originales/flores del curso.

2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores
3 Asociar a la palabra Inicio un enlace a la pgina inicio.htm, a la palabra Productos un enlace a la pgina productos.htm y a la
palabra Pedidos un enlace a la pgina pedidos.htm, las pginas inicio.htm, productos.htm y pedidos.htm se encontrarn en el mismo directorio
que la pgina menu.htm. Las pginas se abrirn en la misma ventana.
4 Guardar los cambios y comprobar el funcionamiento del enlace a la pgina Inicio.htm en un navegador (las pginas productos.htm y
pedidos.htm se incorporarn ms adelante) .
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.

Ejercicio 1: Deportes

Apartado 1 Hacer clic sobre el men Archivo, y elegir la opcin Abrir.

En la nueva ventana, elegir Todos los archivos en Tipo:.
Seleccionar el documento menu.htm, de la carpeta originales/deportes.
Pulsar sobre el botn Abrir.
Apartado 2 Hacer clic sobre el men Archivo, y elegir la opcin Guardar como.
Buscar y abrir la carpeta Mis documentos/ejercicios_html/deportes.
Pulsar sobre el botn Guardar.
Apartado 3 Aadir delante de la palabra E-MAIL la etiqueta: <a href="mailto:direccion@aulaclic.com">.
Sustituye direccion@aulaclic.com por tu direccin de correo.
Escribe detrs de la palabra E-MAIL la etiqueta de cierre </a>
Apartado 4 Hacer clic sobre la opcin Guardar, del men Archivo.
Abrir el documento menu.htm en un navegador, pulsar sobre la palabra E-MAIL, y comprobar que se abre algn programa de envio de correo
electrnico, como puede ser Outlook Express con tu direccin como destinatario del mensaje.

Ejercicio 2: Deportes

Apartado 2 Para que el enlace vaya directamente a un lugar concreto de la pgina debemos definir anclas delante de la descripcin de cada
actividad, y aadir el enlace a esa ancla en cada actividad de la lista. El cdigo quedar de la siguiente forma:

<ul>
<li><a href="#futbol">Pista f&uacute;tbol sala y baloncesto</a></li>
<li><a href="#aerobic">Sala aer&oacute;bic</a></li>
<li><a href="#tenis">Pistas de tenis</a></li>
<li><a href="#musculacion">Sala de musculaci&oacute;n</a></li>
<li>Sauna</li>
<li>Duchas</li>
</ul>
...

<h3><a name="futbol"></a>Pista de f&uacute;tbol sala y baloncesto</h3>

<p>Disponemos de una pista de f&uacute;tbol sala y una de baloncesto, estas se
deben reservar con una semana con m&iacute;nimo de antelaci&oacute;n. Tambi&eacute;n
ofrecemos el servicio de alquiler de pelotas.</p>

<p>&nbsp;</p>
<h3><a name="aerobic"></a>Sala aer&oacute;bic</h3>
<p>Las sesiones de aer&oacute;bic se realizan con monitores titulados para m&aacute;s
informaci&oacute;n pregunta en recepci&oacute;n por los horarios disponibles.</p>
<p>&nbsp;</p>
<h3><a name="tenis"></a>Pistas de tenis
....

<h3><a name="musculacin"></a>Salas de musculaci&oacute;n...

....

Apartado 3 Hacer clic sobre la opcin Guardar, del men Archivo.

Abrir el documento instalaciones.htm en un navegador, pulsar sobre la palabra aerobic de la lista de actividades y la pgina se desplazar
automticamente al prrafo con la descripcin de la actividad..

Ejercicio 3: Flores

Apartado 3 Encerrar la palabra Inicio entre las etiquetas <a href="inicio.htm"> y </a> de la siguiente
forma: <a href="inicio.htm">Inicio</a> repetir lo mismo con las palabras Productos y Pedidos:

<a href="productos.htm">Productos</a> <a href="pedidos.htm">Pedidos</a> .

En este caso hemos empleado una direccin relativa al documento el navegador buscar la pgina inicio.htm en el directorio donde se
encuentra menu.htm.
No hemos empleado el atributo Tarjet ya que queremos que se visualicen las pginas en la misma ventana (valor por defecto).
Apartado 4 Hacer clic sobre la opcin Guardar, del men Archivo.
Abrir el documento menu.htm en un navegador, pulsar sobre la palabra Inicio y comprueba que ahora aparece la pgina Inicio.htm en la misma
ventana, para volver al men haz clic en el botn Atrs de tu navegador.

Insertar imgenes

Ejercicio 1: Deportes.

1 Abrir el documento menu.htm, de la carpeta ejercicios_html/deportes.

2 Sustituir la palabra DEPORTES por la imagen logodeportes.gif que se encuentra en la carpeta imagenes de la
carpeta ejercicios_html/deportes, la imagen deber tener deportes como texto alternativo.
3 Sustituir la palabra E-MAIL por la imagen email.gif, sin texto alternativo.
4 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 2: Deportes.

1 Abrir el documento instalaciones.htm, de la carpeta ejercicios_html/deportes.

2 Sustituir la palabra DEPORTES que aparece al final de la pgina por la misma imagen logodeportes.gif que en el ejercicio anterior, la imagen
deber tener deportes como texto alternativo.
3 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 3: Flores.

1 Abrir el documento menu.htm, de la carpeta flores.

2 Sustituir la palabra FLORES por la imagen logo_flores.gif que se encuentra en la carpeta imagenes de la carpeta flores, la imagen deber
tener flores como texto alternativo y el texto que hay a su derecha debe quedar a media altura de la imagen.
3 Guardar los cambios y comprobar el funcionamiento en un navegador.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.

Ejercicio 1: Deportes

Apartado 2 Sustituir la palabra DEPORTES por la referencia a la imagen:

<img src="imagenes/logodeportes.gif" alt="deportes" >.

Con el atributo src indicamos qu imagen se tiene que visualizar y dnde se encuentra (en el directorio imagenes), con el atributo alt indicamos
el texto alternativo.
Apartado 3 Sustituir la palabra E-MAIL por la referencia a la imagen:

<img src="imagenes/email.gif" border="0" >.

Con el atributo border indicamos que la imagen no tiene borde para que no salga el borde ya que la imagen est dentro de un hiperenlace.
Apartado 4 Hacer clic sobre la opcin Guardar, del men Archivo.
Abrir el documento menu.htm en un navegador, y situar el cursor sobre la imagen con el logotipo para ver si aparece el texto
alternativo deportes, situar el cursor sobre la imagen E-MAil y comprobar que no aparece texto alternativo.

Ejercicio 2: Deportes

Apartado 2 Sustituir la palabra DEPORTES por la referencia a la imagen:

<img src="imagenes/logodeportes.gif" alt="deportes" >.

Con el atributo src indicamos qu imagen se tiene que visualizar y dnde se encuentra (en el directorio imagenes), con el atributo alt indicamos
el texto alternativo.
Apartado 3 Hacer clic sobre la opcin Guardar, del men Archivo.
Abrir el documento instalaciones.htm en un navegador, y situar el cursor sobre la imagen con el logotipo para ver si aparece el texto
alternativo deportes, situar el cursor sobre la imagen E-MAil y comprobar que no aparece texto alternativo.

Ejercicio 3: Flores

Apartado 2 Sustituir la palabra FLORES por la referencia a la imagen:

<img src="imagenes/logo_flores.gif" alt="flores" align="absmiddle" >.

Con el atributo alt indicamos el texto alternativo y con el atributo align y el valor absmiddle indicamos que la imagen tendr la alineacin media
absoluta por lo que el texto que se encuentra a su derecha quedar a media altura de la imagen
Apartado 3 Hacer clic sobre la opcin Guardar, del men Archivo.
Abrir el documento menu.htm en un navegador, y situar el cursor sobre la imagen con el logotipo para ver si aparece el texto flores.

TABLAS Ejercicio 1: Deportes.

1 Abrir el documento donde.htm, de la carpeta deportes.

2 Modificar la pgina para colocar la lista de centros en una tabla como esta:

3 Rectificar la tabla para que las celdas de la primera fila sean ttulos de columna.
4 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 2: Deportes.

1 Abrir el documento instalaciones.htm, de la carpeta deportes.

2 Modificar la tabla que aparece para dejarla as:

3 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 3: Flores.

1 Abrir el documento productos.htm, de la carpeta originales/flores del curso.

2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores
3 Modificar la tabla para que la celda que contiene el texto 6 se combine con la celda que se encuentra debajo de ella.
4 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 4: Flores.

1 Abrir el documento menu.htm, de la carpeta flores.

2 Aadir una tabla para que cada palabra y la imagen ocupen el ancho de la ventana y estn equidistantes.
3 Guardar los cambios y comprobar el funcionamiento en un navegador.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.

Ejercicio 1: Deportes

Apartado 2 Tenemos que dejar dentro de una tabla texto que ya tenemos escrito, lo podemos hacer de dos formas, o bien crear la tabla con sus
filas y sus columnas y despus cortar y pegar el texto entre las etiquetas <td> de la tabla o bien intercalar las etiquetas de la tabla dentro del texto
ya escrito. De cualquiera de las formas debemos definir una tabla de cuatro filas y cuatro columnas. El cdigo deber quedar as:

<table width="550" border="4" align="center">

<tr bgcolor="#003333">
<td><font color="#CCFFCC" size="4">NOMBRE</font></td>
<td><font color="#CCFFCC" size="4">CALLE</font></td>
<td><font color="#CCFFCC" size="4">POBLACI&Oacute;N</font></td>
<td><font color="#CCFFCC" size="4">PROVINCIA</font></td>
</tr>
<tr bgcolor="#CCFFCC">
<td><font size="4">DEPORTES 1</font></td>
<td><font size="4">C/Avenida 8</font></td>
<td><font size="4">Don Benito</font></td>
<td><font size="4">Badajoz</font></td>
</tr>
<tr bgcolor="#99CC99">
<td><font size="4">DEPORTES 2</font></td>
<td><font size="4">C/Fernando 5</font></td>
<td><font size="4">Madrid</font></td>
<td><font size="4">Madrid</font></td>
</tr>
<tr bgcolor="#CCFFCC">
<td><font size="4">DEPORTES 3 </font></td>
<td><font size="4">C/Deportiva 31</font></td>
<td><font size="4">Silla</font></td>
<td><font size="4">Valencia</font></td>
</tr>
</table>

Apartado 3 Buscar la primera lnea en la que aparezca <tr.

Cambiar td por th en todas las etiquetas que se encuentren entre el primer par de etiquetas <tr> y </tr>.

Ejercicio 2: Deportes

Apartado 2 Aadir a la segunda etiqueta <td de la segunda fila de la tabla el atributo rowspan para que la columna se expanda sobre dos filas
y quitar la segunda etiqueta <td de la tercera fila ya que ahora esta tercera fila slo tiene una columna. El cdigo deber quedar as:

<tr bgcolor="#CCFFCC">
<td><font size="4">AEROBIC</font></td>
<td rowspan="2"><div align="center"><font size="4">3 &euro;</font></div></td>
</tr>
<tr bgcolor="#CCFFCC">
<td><font size="4">STEP</font></td>
</tr>

Ejercicio 3: Flores

Apartado 2 Hacemos lo mismo que en el ejercicio anterior, buscar la lnea en la que aparezca el texto 6 &euro;.
La lnea es <td><div align="center"><font size="4">6 &euro;</font></div></td>
Cambiar <td> por <td rowspan="2">, para que la celda ocupe dos filas.
Como estamos ocupando una celda de la fila de abajo, tendremos que eliminar la declaracin de la celda corespondiente en la fila siguiente.

La fila siguiente quedar definida por el siguiente cdigo:

<tr>
<td><font size="4">Caja de golosinas</font></td>
</tr>

Ejercicio 4: Flores

Apartado 2 Para repartir nuestras opciones a lo ancho de la ventana lo mejor es colocar cada opcin en una celda de una tabla. Tenemos que
definir una tabla de una fila y cinco columnas y colocar cada palabra en una columna. El cdigo deber quedar as:

<table width="100%" border="0">

<tr>
<td width="20%"><img src="imagenes/logo_flores.gif" alt="flores" align="absmiddle" ></td>
<td width="20%"><a href="inicio.htm">INICIO</a></td>
<td width="20%"><a href="productos.htm">PRODUCTOS</a></td>
<td width="20%"><a href="pedidos.htm">PEDIDOS</a></td>
<td width="20%">OFERTA</td>
</tr>
</table>
Con el atributo width="100%" de la etiqueta <table hacemos que la tabla se expanda a lo ancho de la ventana y con el valor "0" del
atributo border= hacemos que la tabla quede invisible.
Para que las columnas se repartan a lo ancho de la ventana les asignamos a cada una un ancho del 20%.

MARCOS Ejercicio 1: Deportes.

1 Abrir el documento marcos.htm, de la carpeta originales/deportes del curso.

2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes
3 Modificar el conjunto de marcos para que se muestre un borde de 2 pxeles de color #CCFF99.
4 Guardar los cambios y comprobar el funcionamiento en un navegador.

Ejercicio 2: Flores.

1 Crear el documento marcos.htm en la carpeta Mis documentos/ejercicios_html/flores. Esta pgina contendr un conjunto de marcos para
que en la parte superior de la ventana se visualice la pgina menu.htm y en el resto de la ventana se visualice la pgina inicio.htm. El marco
superior tendr un alto de100 pxeles.

Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.

Ejercicio 1: Deportes

Apartado 3 Buscar la lnea en la que aparezca <frameset.

Cambiar frameborder="no" por frameborder="yes".
Aadir border="2" y bordercolor="#CCFF99" dentro de esa etiqueta <frameset>.
Apartado 4 Hacer clic sobre la opcin Guardar, del men Archivo.

Abrir el documento marcos.htm en un navegador, y comprobar que aparece una lnea vertical de color verde que divide la pgina en dos
marcos.
Si en lugar de eso te aparece el texto Esta pgina tiene marcos, y tu navegador no los soporta, sera conveniente que probaras con otro
navegador diferente, que s soportara los marcos.

Ejercicio 2: Flores

Apartado 1 Abrir en el bloc de notas un documento en blanco y escribir el siguiente cdigo:

<html>
<head>
<title>Marcos</title>
</head>
<frameset rows="100,*" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="menu.htm" name="marcopadre" frameborder="no" scrolling="no" noresize id="marcopadre">
<frame src="inicio.htm" name="marcoinferior" frameborder="no" scrolling="auto" id="marcoinferior">
</frameset>
<noframes>
<body>
Esta p&aacute;gina tiene marcos, y tu navegador no los soporta
</body>
</noframes>
</html>
Guardar el documento en la carpeta Mis documentos/ejercicios_html/flores con el nombre marcos.htm