Prcticas con . .

HTML

Luis Escandell Gmez

Enero de 2.007

Prctica 1 - Introduccin a HTML (1)

A lo largo de estas prcticas vamos a conocer los conceptos bsicos sobre HTML, y cmo se
utiliza para crear pginas web.

Qu es el HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas
web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma
estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento
del documento.
Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido,
vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados
en los navegadores (programas que permiten visualizar las pginas web).
Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a
los usuarios las pginas web resultantes del cdigo interpretado.

Los navegadores. Compatibilidad

Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es
necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta
ltima versin.
Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer
y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los
estndares, intentando incluir las nuevas funciones incluidas en los borradores.

Editores
Un editor es un programa que nos permiten redactar documentos. Es aconsejable comenzar
utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros mismos el
cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor
visual posteriormente, y depurar el cdigo cuando fuera necesario.
Para crear pginas web escribiendo directamente el cdigo HTML utilizaremos la herramienta
del Bloc de notas que proporciona Windows.

1) Crear una carpeta dentro de tu carpeta de alumno que tenga como nombre HTML . Dentro
iremos guardando todos los documentos y pginas web que vayamos realizando en esta
evaluacin.
2) Abrir el Bloc de Notas, que est situado en Inicio / Programas / Accesorios / Bloc de Notas
3) Cerrarlo y a continuacin crear un acceso directo a dicho programa en el escritorio (para ello
hay que pulsar con el botn derecho encima del acceso directo al programa y seleccionar la
opcin Enviar a / Escritorio)

Etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento
HTML. Existen dos tipos de etiquetas: la de comienzo de elemento y la de fin o cierre de
elemento.
La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el
identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que
permiten aadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...>
Etiqueta de comienzo.................................... <etiqueta>
Etiqueta de cierre.......................................... </etiqueta>
Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su
correspondiente etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta
de cierre. Tambin es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de
comienzo y de cierre.

Mi primera pgina
Para que te vayas haciendo una idea de cmo crear una pgina
html a travs del Bloc de notas, vamos a crear una pgina web
sencilla, con una lnea de texto.
4) Lo primero que tienes que hacer es abrir el Bloc de notas.
Seguidamente introduce, en el documento en blanco, el texto
siguiente:
5) Guarda el documento en la carpeta HTML que has creado antes con la extensin htm, con el
nombre primera.htm. Para guardar una pgina entra en el men Archivo / Guardar. A
continuacin selecciona en Tipo Todos los archivos y luego pulsa Guardar.

6) Pulsando dos veces sobre el icono del archivo primera.htm, ste debera abrirse
automticamente en el navegador que tengas instalado en tu ordenador.

El navegador deber mostrar una pgina

como la de la derecha.
Como puedes ver, la pgina resultante es una pgina
que solamente tiene una lnea de texto.
Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA
PAGINA. Este ttulo ha sido establecido por la lnea <title>MI PRIMERA PAGINA</title>.
El color de fondo de la pgina ha sido establecido por la lnea <body bgcolor="#FFCC99">.
El texto Hola, estoy haciendo pruebas. se ha insertado a travs de lnea <font
color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
7) Crea otra nueva pgina web con el nombre segunda.htm pero esta vez que el ttulo sea
SEGUNDA PGINA, el texto sea Sigo practicando y el color de fondo el CCCCCC

Prctica 2 - Introduccin a HTML

Estructura de una pgina
La estructura bsica de una pgina es:

<html>
<head>
...
</head>
<body>
...
</body>
</html>
Ahora veamos cmo funcionan estas etiquetas:

Identificador del tipo de documento <html>

Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo
tiempo, tienen que tener las etiquetas <html> y </html>.
Entre las etiquetas <html> y </html> estar comprendido el resto del cdigo HTML de la
pgina.
Por ejemplo:
<html>
...
</html>

Cabecera de la pgina <head>

La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo.
Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la
etiqueta <html>. Por ejemplo:
<html>
<head>
...
</head>
...
</html>
Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y ms se utilizan
son:
<link>, <style>, <script> ,<meta> y <title> que es la que se explica a continuacin.

Ttulo de la pgina <title>

El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador,

cuando la pgina est cargada en l.
Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas
<title> y </title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y
</head>.
Por ejemplo:
<html>
<head>
<title> Prcticas de HTML
</head>
...

</title>

</html>

1) Crea una pgina web con la estructura bsica vista anteriormente que tenga como
ttulo Pgina web de tu nombre y apellidos. Gurdala con el nombre
mititulo.htm

Cuerpo del documento <body>

El cuerpo del documento contiene la informacin propia del documento, es decir lo que
queremos que se visualice: el texto de la pgina, las imgenes, los formularios, etc.
Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van
justo debajo de la cabecera.
A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina.
El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un
color representado en hexadecimal o por un nombre predefinido.
Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que
escribir:
..
<body bgcolor="#0000FF">
...
</body>
</html>

...
<body bgcolor="blue">
...
</body>
</html>

Que sera equivalente a poner:

2) Crea una pgina web con la estructura bsica vista anteriormente que tenga como ttulo
Probando los colores y como color de fondo el rojo (red). Gurdala con el nombre
probandocolores.htm

La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en
la que se encuentra la imagen.
Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se
encuentra en el mismo directorio en el que se encuentra guardada la pgina, tendremos que
escribir:
...
<body background="fondo.gif">
...
</body>
</html>

En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se

encuentre dentro de la carpeta imagenes, que s se encuentra en el mismo directorio que la
pgina, tendremos que escribir:
...
<body background="imagenes/fondo.gif">
...
</body>
</html>

3) Crea una carpeta llamada IMAGENES dentro de la carpeta HTML y copia ah la imagen
1t.jpg situada en la carpeta E:\ALUMNO\RECURSOS PARA EL ALUMNO\IMGENES. A
continuacin crea una pgina web con la estructura bsica vista anteriormente que tenga como ttulo
Web con imagen de fondo y como imagen de fondo la que acabis de copiar. Gurdala con el
nombre imagenfondo.htm

A travs de la etiqueta <body> tambin es posible establecer el color del texto de la pgina a
travs del atributo text.
Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que
escribir:
...
<body text="#FF0000">
...
</body>
</html>

...
<body text=red">
...
</body>
</html>

Que sera equivalente a poner

4) Crea una pgina web con la estructura bsica vista anteriormente que tenga como ttulo Texto
de colores y con el texto Hola mundo en color azul. Gurdala con el nombre
textocolores.htm

Prctica 3 - Introduccin a HTML

En estas prcticas vamos a aprender a cambiar las propiedades del texto, as como a insertar
caracteres especiales o separadores.

Caracteres especiales y espacios en blanco

Existen una serie de caracteres que no se visualizan correctamente en algunos navegadores, como
es el caso de la y las letras acentuadas, por lo que habra que escribir el nombre que los
representa.
A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser
representados:
Carcter
<
>

Representacin
&lt;
&gt;

&aacute;

&Aacute;
&eacute;
&Eacute;
&iacute;
&Iacute;
&oacute;
&Oacute;
&uacute;
&Uacute;
&ntilde;
&Ntilde;
&#153;

Carcter

&

"

Representacin
&euro;
&ccedil;
&Ccedil;
&uuml;
&Uuml;
&amp;
&iquest;
&iexcl;
&quot;
&middot;
&ordm;
&ordf;
&not;
&copy;
&reg;

Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios
en blanco seguidos slamente se mostrar uno en el navegador. Para conseguir que se muestren
varios espacios en blanco seguidos puede sustituirse cada uno de ellos por &nbsp;.
Por ejemplo, para insertar el texto:
Bienvenidos, esta es mi 1 pgina!
Habra que escribir:
&iexcl;Bienvenidos, esta es
mi&nbsp;&nbsp;&nbsp;1&ordf;&nbsp;&nbsp;&nbsp;p&aacute;gina!

1) Crea una pgina web con la estructura bsica ya vista que tenga como ttulo Probando los
caracteres especialesy en el navegador deber aparecer el siguiente texto en color naranja:
Vaya pgina vamos a crear !!! 1000 - probando los acentos:
Debers escribir los correspondientes cdigos para que aparezca tal cual est aqu. Cuando
acabes gurdala en la carpeta habitual con el nombre caracteresespeciales.htm

Comentarios
En ocasiones podemos desear aadir comentarios aclaratorios dentro del cdigo, de manera que
no sean visualizados en el navegador, pero s a la hora de editar el documento.
Para insertar comentarios dentro del cdigo, basta con insertar el texto entre <!-- y //-->
Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores.
Por ejemplo, para insertar el texto siguiente con un comentario:
Bienvenidos, esta es mi 1 pgina!
Habra que escribir:

<!-- A continuacin aparecer una lnea de texto//-->

&iexcl;Bienvenidos, esta es mi 1&ordf; p&aacute;gina!

2) Crea una pgina web con la estructura bsica ya vista que tenga como ttulo Insertando
comentarios, un comentario aclaratorio donde ponga Los comentarios sirven para que el
cdigo quede mucho ms claro y como texto que ponga:
<Aprendiendo a crear pginas> acentos:
Debers escribir los correspondientes cdigos para que aparezca tal cual est aqu. Cuando acabes
gurdala con el nombre comentarios.htm

Saltos de lnea <br>

Si pulsamos INTRO en un documento HTML, el salto de lnea se producir en el cdigo, pero
no se mostrar en el navegador. Para que se produzca el salto de lnea en el navegador, en lugar
de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el
salto.
La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br>
despus de ella, ya que dicha etiqueta no existe.
Por ejemplo, para insertar el texto:
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva seccin.
Habra que escribir:
Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.

3) Crea una pgina web con la estructura bsica ya vista que tenga como ttulo
Insertando saltos de lnea, color de fondo amarillo y como texto que ponga:
Primera lnea
Segunda lnea
Tercera lnea
Cuarta lnea
Cuando acabes gurdala con el nombre saltosdelinea.htm

Separadores <hr>
El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla
horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no
precisa ninguna etiqueta de cierre.
Es posible especificar algunos atributos de la regla horizontal:

Atributo

Significado

align

alineacin de la regla
dentro de la pgina

width

ancho de la regla

size

alto de la regla

Posibles valores
left (izquierda)
right (derecha)
center (centro)
un nmero, acompaado de % cuando se desee que
sea en porcentaje
un nmero

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Inicio

Bienvenidos a mi pgina.
Habra que escribir en el body:
Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi p&aacute;gina.
4) Crea una pgina web con la estructura bsica que acabamos de ver y que tenga como ttulo
Barras de separacin, y texto en color verde que ponga:
Primera seccin
(regla horizontal)
Segunda seccin
(regla horizontal)
Tercera seccin
Cuando acabes gurdala con el nombre separadores.htm

Prctica 4 - Introduccin a HTML

Formato de texto
Las propiedades del texto pueden modificarse a travs de la etiqueta <font>. Para ello, podemos
insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la
etiqueta:
Atributo
face
color
size

Significado
fuente
color del texto

Posibles valores
nombre de la fuente, o fuentes
nmero hexadecimal o texto predefinido

tamao del texto

valores del 1 al 7, siendo por defecto el 3,

o desplazamiento respecto al tamao por defecto,
aadiendo + o - delante del valor

Por ejemplo, para insertar el texto:

Bienvenidos a mi pgina web

Habra que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos
a mi pgina web</font>
Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la
etiqueta <basefont> despus de la etiqueta <body>.
La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos
atributos del texto que la etiqueta <font>.
Por ejemplo:

<body>
<basefont color="#006699" size="4" face="Arial">
...

Este cdigo hara que la fuente del documento fuera por defecto de color azul, de tamao 4 y
Arial. Si despus de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta
<font>, la que prevalece es siempre la ltima que se encuentra.

1) Crea una pgina web con la estructura bsica ya vista que tenga como ttulo Letra Times
New Roman y en el navegador deber aparecer el siguiente texto con la fuente Times New
Roman y tamao 6:
Fundamentos de Windows
Perfeccione sus habilidades en Windows y aprenda otras nuevas.
Ya sea un usuario principiante o avanzado, seguro que esta seccin le resultar muy interesante.
Contiene mucha informacin til y fcil de entender, adems de instrucciones claras y
detalladas.
Cuando acabes gurdala en la carpeta habitual con el nombre letratimes.htm

10

Resaltado del texto <b>

Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra
entre ellas, y generalmente se utilizan para resaltarlo. No hay que olvidar que todas estas etiquetas
necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto.
A continuacin se muestran algunas etiquetas asociadas al tipo de letra:
Etiqueta
<b>
<i>
<u>
<s>

Significado
Negrita
Cursiva
Subrayado
Tachado

Ejemplo
curso HTML
curso HTML
curso HTML
curso HTML

<big>

aumenta el tamao de la fuente

curso HTML

<small>

disminuye el tamao de la fuente

curso HTML

A continuacin se muestran algunas etiquetas asociadas al tipo de informacin:

Etiqueta

Significado

Ejemplo

<strong>

Destacado

curso HTML aulaclic

<sub>

Subndice

curso HTML aulaclic

<sup>

Superndice

curso HTML aulaclic

Por ejemplo, para insertar el texto:

Bienvenidos a www.google.es
Habra que escribir:
<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos
a <b><u>www.google.es</u></b></font>

2) Modifica la pgina web del ejercicio anterior (letratimes.htm) y aade las etiquetas necesarias
para hacer que el texto quede de esta forma:

Fundamentos de Windows
Perfeccione sus habilidades en Windows y aprenda otras nuevas.
Ya sea un usuario principiante o avanzado, seguro que esta seccin le resultar muy
interesante. Contiene mucha informacin til y fcil de entender, adems de instrucciones
claras y detalladas.

Cuando acabes gurdala en la carpeta habitual con el nombre resaltadoletras.htm

11

Prctica 5 - Introduccin a HTML

Prrafos <p>
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).
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>
1) Crea una pgina web con ttulo Alineacin del texto, con fondo de color azul y que
contenga este texto con esta forma y en color naranja:

Tambin puede seleccionar un Ayudante diferente

Por ejemplo, si prefiere utilizar el teclado en vez del mouse (ratn), puede hacer
que el Ayudante muestre las sugerencias en teclas de mtodo abreviado.
Todos los programas de Office comparten el mismo Ayudante, de forma que si se
cambia alguna opcin, afectar al Ayudante de todos los programas de Office.
Cuando acabes gurdala en la carpeta habitual con el nombre alineaciones.htm

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.
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:

12

Etiqueta

Ejemplo

<h1>

Ttulo 1: HTML

<h2>
<h3>
<h4>
<h5>
<h6>

Ttulo 2: HTML
Ttulo 3: HTML
Ttulo 4: HTML
Ttulo 5: HTML

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>

2) Crea una pgina web con ttulo Encabezados diferentes y que contenga este texto con
esta forma y en color verde:

Tambin puede seleccionar un Ayudante diferente.

(h1)

Por ejemplo, si prefiere utilizar el teclado en vez del mouse (ratn), puede hacer que el Ayudante
muestre las sugerencias en teclas de mtodo abreviado. (h5)

Todos los programas de Office comparten el mismo Ayudante, de forma que si se

cambia alguna opcin, afectar al Ayudante de todos los programas de Office. (h3)
Cuando acabes gurdala en la carpeta habitual con el nombre encabezados.htm

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).

13

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:

Esto es una 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.

3) Crea una pgina web con ttulo Creacin de marquesinas, que contenga este texto con
tamao 3 y en color verde, con direccin del texto hacia la izquierda:

Haciendo pruebas con las marquesinas........

Cuando acabes gurdala en la carpeta habitual con el nombre marquesina.htm

14

Prctica 6 - Introduccin a HTML

Hiperenlaces (1)
En esta prctica vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son
un elemento esencial para cualquier pgina web.
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una
pgina o archivo.
Aquellos elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de
encontrarse entre las etiquetas <a> y </a>.
A travs del atributo href se especifica la pgina a la que est asociado el enlace, la pgina que se
visualizar cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace (que enlaza con la pgina del colegio):
Visita www.petrer.es

Pgina donde se accede

Habra que escribir:

Texto mostrado

Visita <a href="http://www.petrer.es">www.petrer.es</a>

1) Crea una pgina web con la estructura bsica ya vista que tenga como ttulo Probando los
hiperenlaces y en el navegador deber aparecer el siguiente texto con la fuente Times New
Roman:
Hola, estoy probando los hiperenlaces, cuando pulse aqu acceder a la pgina del marca.

Poner un hiperenlace en la palabra aqu

de forma que cuando se pulse en ella vaya
a la pgina web www.marca.es
Gurdala con el nombre hiperenlace.htm en la carpeta habitual.

Tipos de referencias
Existen diferentes formas de expresar una referencia a una pgina a travs del atributo href.
Referencia absoluta:
Conduce a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en
Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas
veces el nombre de la pgina. Si no se escribe el nombre de la pgina se cargar la pgina de inicio
asociada al dominio.

15

Para insertar el enlace: Visita www.petrer.es

Habra que escribir:
Visita <a href="http://www.petrer.es">www.petrer.es</a>

Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web
es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un
objetivo comn, estando todos ellos dentro de una misma carpeta, conocida como carpeta raz
del sitio.
Por ejemplo, teniendo en cuenta que el documento Times.htm se encuentra directamente dentro
de la carpeta raz del sitio, para insertar el enlace:
Enlace a la pgina web Times que ya creamos anteriormente
Habra que escribir:
<a href="letratimes.htm"> Enlace a la pgina web que ya creamos anteriormente </a>
Observa como aparece el smbolo "/" delante del nombre del documento. Esta barra inclinada
indica la carpeta raz del sitio. Si el documento letratimes.htm se encontrara, por ejemplo,
dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raz del sitio, habra
que escribir:
<a href="tema4/letratimes.htm">Enlace a la pgina web Letratimes que ya creamos
anteriormente</a>

2) Crea una pgina web con la estructura bsica ya vista que tenga como ttulo Probando los
hiperenlaces 2 y en el navegador deber aparecer un enlace al archivo resaltadoletras.htm
que creaste anteriormente, con el siguiente texto:
Enlace al archivo resaltadoletras
Gurdala con el nombre hiperenlace2.htm en la carpeta habitual.

3) Crear dentro de la carpeta HTML una carpeta con el nombre PRUEBA y copiar dentro el
archivo marquesina.htm que hicisteis en la prctica anterior. A continuacin aadid a la
pgina del ejercicio anterior un enlace a dicha pgina (tened en cuenta que el hiperenlace accede
ahora a una carpeta.
Gurdala con el nombre hiperenlace3.htm en la carpeta habitual.

4) Crear una pgina web que contenga un hiperenlace a los siguientes archivos :

16

primera.htm

segunda.htm

mititulo.htm

probandocolores.htm

imagenfondo.htm

www.petrer.es

www.marca.es

www.wanadoo.es

El texto es libre, podis poner el texto

que queris siempre que el hipervnculo
se active cuando se pulse sobre la
palabra aqu.
Por ejemplo: Pulsa aqu para acceder al
archivo Tercera.htm

Gurdala con el nombre hiperenlace4.htm en la carpeta habitual.

17

Prctica 7 - Introduccin a HTML

Hiperenlaces (2) - Destino del enlace
El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se
especifica a travs del atributo target al que se le puede asignar los siguientes valores:
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto
de marcos padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el
vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de
destino, ya que se volvern a ver ms adelante. De momento slo te interesa retener la opcin
_blank y _self.
Para insertar el enlace:

Pgina donde se accede

Visita www.petrer.es en una ventana nueva

Destino

Habra que escribir:

Texto mostrado

<a href="http://www.petrer.es" target ="_blank">Visita www.petrer.es en una ventana

nueva</a>
Es interesante utilizar esta opcin cuando la pgina de destino est fuera de nuestro sitio para
que cuando el usuario cierre la ventana del explorador, se encuentre automticamente en la
pgina desde la que haba salido (que vuelva a nuestro sitio).

1) Modificar la pgina hiperenlace que creaste en la prctica anterior para que abra la pgina
en una pgina aparte.
Guardarla con el nombre aparte.htm (con la opcin guardar como...) y comprobar que
funciona correctamente.
2) Modificar la pgina hiperenlace2 que creaste en la prctica anterior para que abra el
documento vinculado en la ventana completa del navegador.
Guardarla con el nombre completa.htm (con la opcin guardar como...) y comprobar que
funciona correctamente.

18

Vnculos de correo electrnico

Este tipo de enlaces o vnculos abren la aplicacin Outlook Express para escribir un correo
electrnico, cuyo destinatario ser el especificado en el enlace. Para ello la referencia del
vnculo debe ser "mailto:direcciondecorreo".
Por ejemplo, para insertar un enlace que permita enviar un correo electrnico al colegio, tal
como este:
Pulsa aqu para enviar un e-mail para el Ayto. de Petrer
Habra que escribir:
<a href="mailto:[email protected]">Pulsa aqu para enviar un e-mail para el Ayto. de
Petrer</a>
Despus de hacer clic en el enlace se abrir el Outlook Express (si el usuario lo tiene instalado)
con la pantalla para redactar un nuevo mensaje y con el campo destinatario completado con la
direccin de correo. Podemos hacer que est completado algn campo ms como es el asunto.
En este caso habra que escribir:
<a href="mailto:[email protected]?subject=el asunto del mensaje">e-mail para el Ayto.
de Petrer</a>

3) Crear una pgina web con el ttulo Envo de mensajes de correo electrnico y que
contenga un pequeo texto con un hiperenlace que enve un e-mail a la direccin
[email protected] con el asunto Prueba de Correo.
Guardar la pgina con el nombre correo.htm

Vnculos a ficheros para descarga

El valor del atributo href normalmente ser una pgina web (con extensin htm, html, asp,
php...) pero tambin puede ser un fichero comprimido, una hoja de Excel, un documento Word,
un documento con extensin pdf. Cuando el enlace no es a una pgina Web nos aparecer el
cuadro de dilogo que seguro habrs visto alguna vez en el que el navegador le pide al usuario
permiso para descargar el fichero en su ordenador.

El navegador reconoce algunas extensiones como asociadas a un determinado programa (por

ejemplo la extensin .doc est asociada al programa Word, .pdf al programa Acrobar Reader,

19

.xls al programa Excel...) en este caso en el cuadro de dilogo aparece una nueva opcin, la de
abrir el fichero sin descargarlo en el disco duro del usuario.
Para nombrar el fichero podemos utilizar segn el caso, una referencia externa, una referencia
relativa al sitio o una referencia relativa al documento.
Por ejemplo, en la carpeta donde se encuentra esta pgina tenemos el fichero Word carta.doc y
queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco
duro, en este caso definiremos el enlace:
haz clic aqu para descargarte el fichero
De la siguiente forma:
<a href="carta.doc" target=_blank >haz clic aqu&iacute; para descargarte el fichero</a>
En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra
en la misma carpeta que nuestra pgina.

4) Crear una pgina web con el ttulo Descarga de archivos en una web que tenga un enlace
a un archivo de Word (cualquiera de los que tenis en vuestra carpeta de alumno) para que el
que pinche en el enlace se lo pueda descargar. El texto del enlace ser: Pincha aqu para
descargarte el archivo de Word.
Pista: Para que sea ms fcil podis copiar ese archivo de word dentro de la carpeta HTML.

Guarda la pgina con el nombre archivos.htm en la carpeta habitual.

20

Prctica 8 - Introduccin a HTML

Imgenes (1)
Vamos a ver cmo insertar imgenes, y cmo modificar algunas de sus propiedades.
Todas las pginas web acostumbran a tener un cierto nmero
de imgenes, que permiten mejorar su apariencia, o dotarla de
una mayor informacin visual.
Para insertar una imagen es necesario insertar la etiqueta
<img> Dicha etiqueta no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a travs del
atributo src.
Por ejemplo, para insertar la siguiente imagen:
Habra que escribir:
<img src="imagenes/2009.jpg">

Teniendo en cuentra que la imagen se llama 2009.jpg y que est dentro de la carpeta imagenes,
que se encuentra en el mismo directorio que el documento actual (referencia relativa al
documento).
Para trabajar de una forma ms sencilla y ordenada, es recomendable que todos los
documentos html se encuentren en un mismo directorio, y que dentro de este directorio
existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta
destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio,
etc.
1) Realiza una pgina web con el ttulo Insertando imgenes donde aparezca el texto
centrado Aqu tenemos un par de imgenes. Dos lneas debajo insertars las imgenes
2009.jpg y 2070.jpg (debers copiar previamente dichas imgenes a la carpeta Imgenes).
Guarda la pgina con el nombre imagenes.htm

Texto alternativo
El texto alternativo se muestra al situar el puntero sobre la imagen. Tambin nos sirve en caso
de que no se encuentre la imagen y as pueda mostrar un mensaje de error relativo al nombre de
la imagen. Por ejemplo:
Si en lugar del cdigo anterior hubiramos insertado el siguiente cdigo:
<img src="imagenes/2070.jpg" alt="Abuelos paseando" >

21

Al situar el puntero sobre la imagen durante unos segundos, veras como aparece el texto:
Abuelos paseando. Y en caso de no encontrar la imagen aparecera el siguiente mensaje de
error:
A PARTIR DE AHORA A TODAS LAS IMGENES DE LOS
EJERCICIOS DEBERIS PONERLE UNA PEQUEA
DESCRIPCIN UTILIZANDO ALT
2) Realizar sobre la pgina del ejercicio anterior los cambios que se acaban de exponer para que
aparezca un comentario sobre las dos imgenes. El texto a mostrar ser Abuelos paseando y
Barcos navegando. Comprobar que cuando situamos el cursor encima nos aparece el texto
deseado.
Guardar la pgina con el nombre imagenes2.htm (con la opcin guardar como...)

3) Crear una pgina web con el ttulo Web de Coches de lujo donde aparezcan 4 imgenes
de coches de lujo (las debis bajar de internet) con su nombre respectivo debajo. Poner como
color de fondo el color naranja, como texto de encabezado en la primera lnea Automviles de
altas prestaciones y una barra horizontal para separar el ttulo de las imgenes.
Nota: si las imgenes descargadas son demasiado grandes les podis cambiar el tamao con el
Gimp a un tamao de 300x200 pixeles (estas imgenes se guardarn en la carpeta Imgenes).
Guardar la pgina con el nombre coches.htm y comprobar que se visualiza correctamente.

Borde de una imagen

En general, al visualizar una pgina en un navegador las imgenes aparecen sin ningn borde
alrededor, pero es posible establecer uno a travs del atributo border.
El atributo border puede tomar valores numricos, que indican el grosor en pxeles del borde.
Por ejemplo, para insertar la siguiente imagen con borde:
Habra que escribir:
<img src="imagenes/5005.jpg" border="4" >
4) Crear una pgina web con el ttulo Bordes de imagen
donde se muestre el ejemplo anterior para comprobar la
utilizacin de los bordes. Insertar la misma imagen 4 veces,
poniendo en cada caso los siguientes tamaos de borde: 5 , 10,
15 y 20 pixeles
Guardar la pgina con el nombre bordes.htm

5) Modificar la pgina coches.htm creada anteriormente para aadirle un borde de 10 pxeles

a cada una de las imgenes. Guardar la pgina resultante con el nombre bordecoches.htm
(con la opcin guardar como...)

22

Prctica 9 - Introduccin a HTML

Imgenes (2) - Imgenes con hipervnculo
Para insertar una imagen con un enlace utilizaremos la sintaxis ya vista en prcticas anteriores.
En este caso en concreto habra que escribir:
Direccin web

Destino

Imagen

<a href="http://www.perrosygatos.com" target ="_blank" ><img src="imagenes/8232.jpg"

border="0" ></a>
Si se desea establecer un vnculo sobre una imagen y no se desea que se muestre el borde (que
por su color indica que existe dicho vnculo), es necesario establecer border="0".

1) Crear la pgina web con el enlace en la imagen del ejemplo anterior que tenga como ttulo de
Pgina Pgina de perros y gatos y aquellos elementos que tu consideres oportunos (texto,
otras imgenes, barras, bordes de imgenes, etc.) Las imgenes se guardarn en la carpeta
Imgenes. Una de las imgenes tendr un enlace a la pgina expuesta en el ejemplo anterior.
Guardarla con el nombre perrosygatos.htm y comprobar que se visualiza correctamente.

Tamao de una imagen

Cuando insertamos una imagen, sta se muestra en los navegadores con su tamao original, pero
por diversos motivos puede interesarnos modificar dicho tamao.
A travs de los atributos width (anchura) y height (altura) puede modificarse el tamao de la
imagen. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino
que lo que vara es la visualizacin de la imagen en el navegador.
El valor que pueden tomar los atributos width y height ha de ser un nmero, acompaado de %
cuando se desee que sea en porcentaje con respecto a la pgina.
Por ejemplo, para insertar la siguiente imagen (cuyo tamao original era de 510 pxeles de
anchura y 341 pxeles de altura) con 300 pxeles de anchura y 80 pxeles de altura:

Habra que escribir:

<img src="imagenes/COMIDA.jpg" width="300" height="80">

Al modificar el tamao de la imagen a travs de estos atributos es muy probable que la imagen
resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde
un editor externo, como Photoshop o Gimp. Por tanto esta tcnica no la utilizaremos demasiado
porque ser preferible redimensionar las imgenes desde un editor como Photoshop o Gimp.

23

2) Crear una pgina web con el ttulo Cambiando el tamao de las imgenes donde
aparezca la imagen DINERO.jpg con un tamao de 800x200 pixeles. Guardar la pgina con
el nombre cambioimagen.htm y comprobar que se visualiza correctamente.

Alineacin de una imagen

La alineacin de las imgenes se establece igual que hacamos con el texto a travs de la
etiqueta <div align>
Por ejemplo, para alinear una imagen en las siguientes posiciones de la pgina utilizaramos:
EXPRESIN

SIGNIFICADO

<div align= left><img src="imagenes/EQUIPO.JPG"><div>

Alinear la imagen a la
izquierda de la pantalla

<div align= center><img src="imagenes/EQUIPO.JPG"><div>

Alinear la imagen en el
centro de la pantalla

<div align= right><img src="imagenes/EQUIPO.JPG"><div>

Alinear la imagen a la
derecha de la pantalla

3) Crear una pgina web con el ttulo Alineacin de imgenes, donde aparezcan 3 imgenes:
SOLDADOR.JPG, SERVICIO.JPG y SALUDO.JPG cada una de ellas con una
alineacin distinta (izquierda, centrada, derecha). Deben tener un tamao de 150x300 pixeles.
Adems cada una de ellas tendr un hipervnculo con una estas pginas: perrosygatos.htm,
imagenes.htm y coches.htm.
Guardar la pgina con el nombre alineacionimagen.htm y comprobar que se visualiza
correctamente.

4) Crear una pgina web donde aparezcan 3 equipos de ftbol con su respectivo nombre debajo,
con alineacin centrada. Cada una de ellas tendr un hipervnculo a la pgina oficial de dicho
club. (ej. www.realmadrid.com ). El ttulo de esta pgina ser Clubs de Ftbol y tendr un
encabezado en la pgina con el mismo nombre. Aadir el texto que creis conveniente.

Guardar la pgina con el nombre futbol.htm y comprobar que se visualiza correctamente.

24

Prctica 10 - Introduccin a HTML

Tablas (1)
Ahora vamos a ver cmo trabajar con tablas. Podremos insertar tablas, filas y columnas, y
modificar sus propiedades.
Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las
tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto,
y otra serie de cosas que sin las tablas seran imposibles de realizarse.
Las tablas estn formadas por celdas, que son los recuadros que se obtienen como resultado de
la interseccin entre una fila y una columna.

COLUMNA
imagen y texto
Texto dentro de una
celda

FILA

CELDA

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas
habr que especificar las filas y columnas que formarn la tabla.

Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas
etiquetas debern insertarse entre las etiquetas <table> y </table>.
Por ejemplo, para crear una tabla con cinco filas escribiramos:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>

25

1 columna

5 filas

Columna o celda <td>

Para crear una tabla no basta con especificar el nmero de filas, es necesario tambin especificar
el nmero de columnas.
Una celda es el resultado de la interseccin entre una fila y una columna, por lo que
podremos especificar el nmero de celdas por fila, que equivale a especificar el nmero de
columnas por fila.
Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada
una de las filas de la tabla. Por lo tanto, habr que insertar esas etiquetas entre las etiquetas <tr>
y </tr>.
Entre las etiquetas <td> y </td> se podr especificar el contenido de cada una de las celdas. Por
ejemplo, para insertar la siguiente tabla de 3 filas por 2 columnas:

Lunes

Martes

Matemticas Lengua
Filosofa

Informtica

Habra que escribir:

Tamao del borde de las celdas

Tipo de alineacin

<table border ="1 align ="center>

<tr>
<td>Lunes</td>
<td>Martes</td>
</tr>
<tr>
<td>Matemticas</td>
<td>Lengua</td>
</tr>
<tr>
<td>Filosofa</td>
<td>Informtica</td>
</tr>
</table>
1) Realizar una tabla donde tengamos un calendario del mes de Abril. Como ttulo pondr
Calendario y tendr un encabezado donde pondremos el nombre del mes. Debe quedaros
algo como esto:

Guarda la pgina con el nombre calendario.htm y comprueba que se visualiza correctamente.

26

Prctica 11 - Introduccin a HTML

Tablas (2) - Formato de la tabla
Es posible modificar los siguientes atributos de una tabla:

Atributo

Significado

width

ancho de la tabla

height

altura de la tabla

cellpadding

espacio entre el contenido de las celdas y

el borde

un nmero

cellspacing

espacio entre celdas

un nmero

border

grosor del borde

un nmero

align

alineacin de la tabla dentro de la pgina

left (izquierda)
right (derecha)
center (centro)

bgcolor

color de fondo

nmero hexadecimal

Posibles valores
un nmero, acompaado de % cuando se
desee que sea en porcentaje
un nmero, acompaado de % cuando se
desee que sea en porcentaje

background imagen de fondo

nmero hexadecimal

bordercolor color del borde

nmero hexadecimal

Por ejemplo, para modificar la tabla de la practica anterior para que quedase como la siguiente:
Lunes
Matemticas
Filosofa

Martes
Lengua
Informtica

Habra que escribir:

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"
bgcolor="#FFCC99">
...
</table>
Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la
ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y vers que el
ancho de la tabla vara para ocupar siempre la mitad de la ventana), que el borde (border) tiene
un grosor de dos pxeles, que la tabla est alineada al centro (center) de la ventana, que no hay
espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo
naranja (#FFCC99).
1) Realiza la tabla anterior ayudndote de estas indicaciones y las de la prctica anterior para
que te quede igual que tienes aqu.

27

Formato de las celdas

Es posible modificar los siguientes atributos de una celda:
Atributo

Significado

width

ancho de la tabla

height

altura de la tabla

align

alineacin horizontal del contenido de la

celda

valign

alineacin vertical del contenido de la

celda

bgcolor

color de fondo

Posibles valores
un nmero, acompaado de % cuando se desee
que sea en porcentaje
un nmero, acompaado de % cuando se desee
que sea en porcentaje
left (izquierda)
right (derecha)
center (centro)
baseline (lnea de base)
bottom (inferior)
middle (medio)
top (superior)
nmero hexadecimal

background imagen de fondo

nmero hexadecimal

bordercolor color del borde

nmero hexadecimal

Tambin es posible modificar estos atributos de toda una fila, especificndolos en la etiqueta
<tr>, en lugar de en la etiqueta <td>.
Hay que tener en cuenta que los atributos tienen ms prioridad cuando son establecidos para una
celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen ms
prioridad los atributos establecidos para una fila que los establecidos para toda la tabla.
Por ejemplo, si escribiramos el siguiente cdigo:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"
bgcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<td>Lunes</td>
<td bgcolor="#66CC99">Martes</td>
</tr>
<tr>
<td>Matemticas</td>
Lunes
Martes
<td>Lengua</td>
Matemticas
Lengua
</tr>
Filosofa
Informtica
<tr>
<td>Filosofa</td>
<td>Informtica</td>
</tr>
</table>

Obtendramos la siguiente tabla:

Se ha establecido el color naranja como fondo de toda la tabla, pero con la lnea de cdigo <tr
align="center" bgcolor="#0099CC"> y un color azul como color de fondo de la primera fila,
por lo que dicha fila se mostrar de color azul, y no de color naranja. Al mismo tiempo, se ha
cambiado el color de la segunda celda de la primera fila por el color verde, a travs de la lnea
<td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul ser verde, los
atributos de celda tienen prioridad sobre los de la fila.

28

2) Crear una pgina web que tenga como ttulo Clases del da y un encabezado en la primera
lnea que ponga Horario de clases de 1 de BAT. A continuacin deberis definir la tabla
necesaria para albergar vuestro horario de clases (si no os acordis de todas las clases os las
podis inventar).

Adems la pgina debe tener color de fondo de un color diferente para cada fila de la tabla.

Guarda la pgina con el nombre horario.htm.

29

Prctica 12 - Introduccin a HTML

PRACTICA DE REPASO
En esta prctica vamos a repasar todo lo que hemos visto hasta ahora, y al final debe
quedarnos una serie de pginas web atractivas y funcionales.

PASOS A SEGUIR:
-

Pensad un tema sobre el cual realizar la pgina web. Algunos que se os

proponen son: vuestras aficiones, vuestros personajes favoritos, pelculas
famosas, un equipo de ftbol o cualquier otro deporte, un posible negocio
en Internet, un grupo de msica, etc.

Crear dentro de vuestra carpeta de alumno una carpeta llamada web

(C:\alumno\nombre_alumno\web)

Dentro de dicha carpeta cread otra que

(C:\alumno\nombre_alumno\web\imagenes)

Ahora debis bajaros de Internet todas las imgenes que pensis que sern
necesarias para realizar la web y las guardaris dentro de esta carpeta que
acabis de crear.

En esta prctica deberis incluir como mnimo y obligatoriamente 4 pginas web

o ms, que estn enlazadas entre s. La principal debe llamarse index.html y
puede hacer de men para a travs de ella acceder a las dems.

Crear las pginas web: en ellas se debe incluir obligatoriamente todos los
elementos que hemos estado viendo hasta ahora en las prcticas:

se

llame

imagenes

o Texto de colores y con diferente tipo de fuente

o Marquesinas, negritas, cursivas y encabezados de diferentes tipos
o Reglas horizontales para separar la informacin
o Fondos de pgina por medio de un color o por medio de una imagen
o Imgenes, con su alineacin correspondiente y a ser posible con bordes y
algn hipervnculo
o Tablas para organizar la informacin
o Hipervnculos que enlacen las pginas: entre las que has hecho t y
enlaces para otras pginas de Internet, ej http://www.marca.es,
http://www.as.com, etc.
o Vnculos de correo electrnico

30