Scribd
Cargar
242 vistas34 páginas

Código HTML

Este documento describe varias etiquetas HTML para formato de texto como <body>, <p>, <font>, <b>, <i>, <u>, <center>, <div>, <hr> y <marquee>. Explica cómo usar estos elementos para modificar el color, tamaño y tipo de fuente del texto, agregar sangrado, separadores y desplazamiento de texto. También describe cómo agrupar párrafos y bloques de texto y cambiar su alineación.

Cargado por

santiverona
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
242 vistas34 páginas

Código HTML

Este documento describe varias etiquetas HTML para formato de texto como <body>, <p>, <font>, <b>, <i>, <u>, <center>, <div>, <hr> y <marquee>. Explica cómo usar estos elementos para modificar el color, tamaño y tipo de fuente del texto, agregar sangrado, separadores y desplazamiento de texto. También describe cómo agrupar párrafos y bloques de texto y cambiar su alineación.

Cargado por

santiverona
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 34

CÓDIGO HTML

Cuerpo del documento <body>

<html>
<head>
<title>
Curso de HTML
</title>
</head>
<body>
...
</body>
</html>

<body bgcolor="#0000FF">; <body bgcolor="blue">, <body background="imagenes/fondo.gif">,


<body text="#FF0000">.

Entre el borde de la ventana y el contenido de la página existe un margen, cuyo tamaño en píxeles puede
modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos
atributos no funcionan para el navegador Netscape, pero sí los atributos marginwidth (anchura del margen)
y marginheight (altura del margen).
<body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >

Texto preformateado <pre>

Por ejemplo, para insertar el texto:


Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado

Habría que escribir:

<pre>Hola, BIENVENIDOS
esta ES MI PÁGINA WEB

y esto un texto preformateado</pre>

El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las
etiquetas <img> (para incluir imágenes), <object> (para incluir objetos como animaciones), <big>, <small>,
<sub> ni <sup> (las veremos en este tema).

Separadores <hr>

El elemento que suele utilizarse para separar secciones dentro de una misma página 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 Posibles valores
left (izquierda)
alineación de la regla dentro
align right (derecha)
de la página
center (centro)
un número, acompañado de % cuando se desee
width ancho de la regla
que sea en porcentaje

Página 1 de 34
size alto de la regla un número
eliminar el sombreado de la
noshade no puede tomar valores
regla

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

Inicio

Bienvenidos a mi página.

Habría que escribir:

Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi p&aacute;gina.

Sangrado de texto <blockquote>

Por ejemplo, para insertar el texto:

Queridos usuarios,

tengo el placer de comunicaros que hay una nueva sección.

Habría que escribir:

Queridos usuarios,
<blockquote>
<blockquote>
tengo el placer de

comunicaros que hay una nueva secci&oacuten.


</blockquote>
</blockquote>

Formatear el texto <font> ...

Las propiedades del texto pueden modificarse a través 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 Significado Posibles valores
face fuente nombre de la fuente, o fuentes
color color del texto número hexadecimal o texto predefinido
valores del 1 al 7, siendo por defecto el 3,
size tamaño del texto o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans

Serif">Bienvenidos a www.aulaclic.com</font>

Página 2 de 34
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 código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y Arial. Si
después de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que
prevalece es siempre la última que se encuentra.

Resaltado del texto <b> ...

A continuación se muestran algunas etiquetas asociadas al tipo de letra:


Etiqueta Significado Ejemplo
<b> negrita curso HTML aulaclic
<i> cursiva curso HTML aulaclic
<u> subrayado curso HTML aulaclic
<s> tachado curso HTML aulaclic
<tt> teletipo (máquina de escribir) curso HTML aulaclic
<big> aumenta el tamaño de la fuente curso HTML aulaclic
<small> disminuye el tamaño de la fuente curso HTML aulaclic

A continuación se muestran algunas etiquetas asociadas al tipo de información:


Etiqueta Significado Ejemplo
<cite> cita curso HTML aulaclic
<code> ejemplo de código curso HTML aulaclic
<dfn> definición curso HTML aulaclic
<del> eliminado curso HTML aulaclic
<em> énfasis curso HTML aulaclic
<ins> insertado curso HTML aulaclic
<kbd> teclado curso HTML aulaclic
<samp> muestra curso HTML aulaclic

<strong> destacado curso HTML aulaclic


<sub> subíndice curso HTML aulaclic
<sup> superíndice curso HTML aulaclic
<var> variable curso HTML aulaclic

Las etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más fáciles de recordar, y en
muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el
resultado de aplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al
tipo de información pueden representarse de forma distinta según el navegador.

Por ejemplo, para insertar el texto:

Página 3 de 34
Bienvenidos a www.aulaclic.com

Habría que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a

<b><u><tt>www.aulaclic.com</tt></u></b></font>

Párrafos <p> ...

El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe
insertarse entre las etiquetas <p> y </p>.

No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que
las etiquetas <p> y </p> hacen que se cambie de línea automáticamente.

También es posible cambiar la alineación del texto de cada párrafo. 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 página.

Aquí encontraréis cursos de formación muy interesantes.

Habría 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 alineación del texto es mediante las etiquetas <div> y </div>, para las que
también 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 separación entre ellos es menor.

Por ejemplo, para insertar el texto:


Bienvenidos a mi página.
Aquí encontraréis cursos de formación muy interesantes.

Habría que escribir:

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


<div>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</div>

También es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado.

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Habría que escribir:

<center>Bienvenidos a mi p&aacutegina.</center>

Página 4 de 34
Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de línea
(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.

Marquesinas <marquee>

Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de
línea.

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 varíen.

A través 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 través del atributo direction puede modificarse la dirección 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).

También es posible establecer un color de fondo, a través del atributo bgcolor.

Por ejemplo, para insertar la siguiente marquesina:

Habría que escribir:

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


<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>

También es posible insertar imágenes, tablas y otros elementos entre las etiquetas <marquee> y
</marquee>, no sólamente texto.

Página 5 de 34
 Las listas <li> ...
Elemento de lista <li>

Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>.

Por ejemplo, para insertar en una lista los siguientes elementos:

• Perro
• Gato
• Periquito

Habría que escribir:

...
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
...

Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es
desordenada (con viñetas) u ordenada (numerada) como veremos a continuación.

Lista desordenada <ul>

Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>.

A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o
square (cuadrado).

Por ejemplo, para insertar la siquiente lista:

o Perro
o Gato
o Periquito

Habría que escribir:

<ul type="circle">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>

Lista ordenada <ol>

Página 6 de 34
Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>.

A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras
minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en
mayúsculas).

Por ejemplo, para insertar la siquiente lista:

i. Perro
ii. Gato
iii. Periquito

Habría que escribir:

<ol type="i">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>

</ol>

Anidar listas
Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas.

Por ejemplo, para insertar la siquiente lista:

1. Lunes
 Ingles
 Frances
2. Martes

 Ingles
A. Correccion de ejercicios
B. Proponer ejercicios

Habría que escribir:


<ol>
<li>Lunes Empezamos por la lista ordenada (la más externa) <ol>,
<ul type="square"> esta lista tiene dos elementos <li>Lunes y <li>Martes.
<li>Ingles</li>
<li>Frances</li> El elemento Lunes contiene una lista desordenada con tipo
</ul> cuadrado <ul type="square"> que tiene dos elementos
</li> <li>Ingles</li> y <li>Frances</li>.
<li>Martes
<ol> El elemento Martes contiene una lista ordenada de un sólo
<li>Ingles</li> elemento <li>Ingles</li> elemento que contiene a su vez una
<ol type="A"> lista desordenada de tipo letras mayúsculas <ol type="A">
<li>Correccion de ejercicios</li> con los dos elementos <li>Correccion de ejercicios</li> y
<li>Proponer ejercicios </li> <li>Proponer ejercicios </li>
</ol>
</li>

Página 7 de 34
</ol>
</li>
</ol>

Unidad 4. Hiperenlaces (I)

Hiperenlace <a>

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o
archivo.

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse
entre las etiquetas <a> y </a>.

A través del atributo href se especifica la página a la que está asociado el enlace, la página que se
visualizará cuando el usuario haga clic en el enlace.

Por ejemplo, para insertar el enlace:

Visita www.aulaclic.com

Habría que escribir:

<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>

Tipos de referencias

Existen diferentes formas de expresar una referencia a una página a través del atributo href.

Referencia absoluta:

Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet,
en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de
la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio.

Por ejemplo, "http://www.aulaclic.com" tendrá el mismo efecto que "http://www.aulaclic.com/index.htm"

Para insertar el enlace:

Visita www.aulaclic.com

Página 8 de 34
Habría que escribir:

<a href="http://www.aulaclic.com">Visita www.aulaclic.com</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 diseño similar o un objetivo común, estando
todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.

Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la
carpeta raíz del sitio, para insertar el enlace:

Enlace a Tema 4: Hiperenlaces

Habría que escribir:

<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la
carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada
tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que escribir:

<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del
directorio en el que se encuentra el actual.

Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la misma carpeta
que el documento actual, para insertar el enlace:

Enlace a Tema 4: Hiperenlaces

Habría que escribir:

<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa que en este caso no aparece el símbolo "/" delante del nombre del documento. Si el documento
t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la
misma carpeta que el documento actual, habría que escribir:

<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Punto de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el
vínculo debe ser "nombre_de_documento#nombre_de_punto".

Por ejemplo, para insertar el enlace:

Punto de fijacion Tipos de enlaces

Página 9 de 34
Habría que escribir:

<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>

Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se llama tipos.

Al final de este tema verás cómo definir el punto de fijación.

Unidad 4. Hiperenlaces (II)

Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través
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 vínculo o en el conjunto de marcos
padre.

_self:

Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_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 volverán a ver en el tema de Marcos. De momento sólo te interesa retener la opción _blank y _self.

Para insertar el enlace:

Visita www.aulaclic.com en una ventana nueva

Habría que escribir:

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


nueva</a>

Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando
el usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había
salido (que vuelva a nuestro sitio).

Formato de los enlaces

Página 10 de 34
En general, un texto que tiene un vínculo asociado suele aparecer subrayado.

Cuando el vínculo está definido sobre una imágen, en el borde aparecen una serie de puntitos al pulsar
sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de
esa zona.

Aqui tienes dos vínculos similares de ejemplo:

Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor. Esto ocurre
debido a que se ha establecido un borde para la imagen, como veremos más adelante.

Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima
del vínculo. Suele adquirir la apariencia de una mano señalando.

Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el
puntero del ratón se posiciona sobre él, estos cambios están predefinidos en cada navegador, pero nosotros
podemos cambiar esos colores.

Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la etiqueta
<body>. Estos colores se asignan a través de los atributos link (vínculo), alink (vínculo activo), y vlink
(vínculo visitado).

link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).

alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).

vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).

Por ejemplo, al insertar el siguiente código:

...
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">

...
<a href="http://www.aulaclic.com" target ="_blank">www.aulaclic.com</a>
...

Mientras no se visite la página www.aulaclic.com, el enlace será de color rojo (#FF0000):

www.aulaclic.com

Mientras la página www.aulaclic.com sea la última visitada, el enlace será de color fucsia (#FF0099):

www.aulaclic.com

Cuando se haya visitado la página www.aulaclic.com, el enlace será de color naranja (#FF9900):

www.aulaclic.com

Página 11 de 34
Unidad 4. Hiperenlaces (III)

Puntos de fijación. Anclas

Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente
al apartado deseado, en lugar de ir al comienzo del documento.

Para ello se utilizan las anclas, o puntos de fijación, muy útiles a la hora de crear índices.

Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomar cualquier valor
inventado por el usuario, se recomienda no utilizar caracteres especiales.

Por ejemplo, para insertar un punto de fijación delante del siguiente texto:

Texto con ancla

Habría que escribir:

<a name="miancla"></a>Texto con ancla

Como puedes ver, no es necesario insertar nada entre las etiquetas <a> y </a>, y que sin mirar el código
no hay nada que indique que delante del texto haya un ancla.

Teniendo en cuenta que el documento actual se llama t_4_3.htm, y que el ancla anterior se llama miancla,
podríamos crear un enlace que nos llevara directamente a la línea de texto en la que se encuentra el ancla.
Por ejemplo:

Enlace al ancla

Habría que escribir:

<a href="t_4_3.htm#miancla">Enlace al ancla</a>

Si pulsas sobre el enlace verás como se vuelve a cargar el documento actual, pero en lugar de cargarse
desde el principio, la primera línea de texto será la línea en la que hemos insertado el ancla.

Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, podemos
prescindir de poner el nombre de la página en el atributo href.

En el ejemplo anterior podríamos haber escrito:

<a href="#miancla">Enlace al ancla</a>

Otros tipos de enlaces

Existen otros tipos de enlaces que no conducen a otra página web, los veremos a continuación:

Correo electrónico:

Abre la aplicación Outlook Express para escribir un correo electrónico, cuyo destinatario será el
especificado en el enlace. Para ello la referencia del vínculo debe ser "mailto:direcciondecorreo".

Por ejemplo, para insertar un enlace que permita enviar un correo electrónico a aulaClic, tal como este:

e-mail para aulaclic

Habría que escribir:

<a href="mailto:[email protected]">e-mail para aulaclic</a>

Página 12 de 34
Después 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 rellenado con la direcciondecorreo.
Podemos hacer que esté rellenado algún campo más como es el asunto. En este caso habría que escribir:

<a href="mailto:[email protected]?subject=el asunto del mensaje">e-mail para


aulaclic</a>

Vínculo a ficheros para descarga:

El valor del atributo href normalmente será una página web (con extensión htm, html, asp, php...) pero
también puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con
extensión pdf. Cuando el enlace no es a una página Web nos aparecerá el cuadro de diálogo que seguro
habrás 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
extensión .doc está asociada al programa Word, .pdf al programa Acrobar Reader, .xls al programa Excel...)
en este caso en el cuadro de diálogo aparece una nueva opción, la de abrir el fichero sin descargarlo en el
disco duro del usuario.

Para nombrar el fichero podemos utilizar según 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 página 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" tarjet=_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 página.

Vínculo vacío:

Al pulsar sobre un enlace vacío no se abre ninguna página ni archivo, pero el formato es el mismo que el
de cualquier otro enlace. El vínculo debe ser el símbolo almohadilla "#".

Por ejemplo, para insertar el enlace vacío:

vinculo vacio

Habría que escribir:

<a href="#">vinculo vacio</a>

Página 13 de 34
Este tipo de enlace resulta útil para trabajar con comportamientos javascript.

Unidad 5. Imágenes (I)

Imagen <img>

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su
apariencia, o dotarla de una mayor información 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 través del atributo src.

Por ejemplo, para insertar la siguiente imagen:

Habría que escribir:

<img src="imagenes/logo_animales.gif">

Teniendo en cuentra que la imagen se llama logo_animales.gif 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 más 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.

Formatos de imagen
Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos
son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con
algunos navegadores.

Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las
imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más
sobre estos formatos:

Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo
color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y
animación.

Formato JPG:

Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de
la imagen es mayor y tarda más en descargarse se utilizan más para fotos.

Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este es
el caso de las imágenes BMP y PNG.

Página 14 de 34
Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de
imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia
tiene una opción, exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin perder en
calidad (siempre que la imagen se adecue al formato).

Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de
modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar
los colores, puedes utilizar incluso el programa Paint de Windows.

Texto alternativo

Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el
valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la
imagen.

Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros
deseemos, gracias al atributo alt.

Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo
Imagen gato, para ello insertamos el siguiente código:

<img src="gatito.gif" alt="Imagen gato" >

Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el
documento actual, sino que se encuentra dentro de la carpeta imagenes. En lugar de la imagen se mostrará
lo siguiente:

Si en lugar del código anterior hubiéramos insertado el siguiente código:

<img src="imagenes/gatito.gif" alt="Imagen gato" >

La imagen habría mostrado correctamente:

El texto alternativo se muestra también al situar el puntero sobre la imagen. Si situas el puntero sobre la
imagen durante unos segundos, verás como aparece el texto Imagen gato.

El texto alternativo es muy útil a la hora de diseñar páginas más asequibles a los invidentes ya que los
programas lectores son capaces de leer el texto alternativo.

Unidad 5. Imágenes (II)

Borde de una imagen

Página 15 de 34
En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde alrededor,
pero es posible establecer uno a través del atributo border.

El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde.

Por ejemplo, para insertar la siguiente imagen con borde:

Habría que escribir:

<img src="imagenes/logo_animales.gif" border="4" >

Hay que tener en cuenta que el borde de la imagen siempre será de color negro, a no ser que la imagen
contenga un enlace, en cuyo caso el color del borde será el color establecido para los vínculos.

Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:

Habría que escribir:

<a href="http://www.aulaclic.com" target ="_blank" ><img src="imagenes/logo_animales.gif"


border="4" ></a>

Si se desea establecer un vínculo sobre una imagen y no se desea que se muestre el borde (que por su
color indica que existe dicho vínculo), es necesario establecer border="0".

Tamaño de una imagen

Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño original, pero por
diversos motivos puede interesarnos modificar dicho tamaño.

A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen.
Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la
visualización de la imagen en el navegador.

El valor que pueden tomar los atributos width y height ha de ser un número, acompañado de % cuando
se desee que sea en porcentaje con respecto a la página.

Por ejemplo, para insertar la siguiente imagen (cuyo tamaño original era de 122 píxeles de anchura y 71
píxeles de altura) con 200 píxeles de anchura y 80 píxeles de altura:

Habría que escribir:

<img src="imagenes/logo_animales.gif" width="200" height="80">

Página 16 de 34
Al modificar el tamaño de la imagen a través de estos atributos es muy probable que la imagen resultante
no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo,
como Fireworks.

Alineación de una imagen

La alineación de las imágenes se establece a través del atributo align. Este atributo indica la alineación de
las imágenes con respecto a la línea de texto en la que se encuentran.

Los valores del atributo align pueden ser los siguientes:


Valor Significado Ejemplo

absbottom inferior absoluta Imagen con


texto

absmiddle medio absoluta Imagen con


texto

baseline línea de base Imagen con


texto

bottom inferior Imagen con


texto
Imagen con
left izquierda texto

middle medio Imagen con


texto
Imagen con
right derecha texto

texttop texto superior Imagen con


texto

top superior Imagen con


texto

El resultado de aplicar uno u otro valor puede tener el mismo resultado, como ocurre con los valores
baseline y bottom, o con los valores texttop y top.

Para insertar el texto y la imagen siguientes:

PerrosGatos Una web de animales

Habría que escribir:

Página 17 de 34
PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una web de animales

Este tipo de alineación la recomendamos cuando es una imagen pequeña que queremos fundir con la línea
de texto sin que por ello cree una separación demasiado grande entre la línea donde se encuentra la imágen
y las líneas superior y inferior. Por ejemplo para la imagen de un icono de cualquier programa, de un botón,
etc...

Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla a la derecha ni a la izaquierda
sino colocarla en un bloque aparte).

Unidad 6. Tablas (I)


Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la
intersección entre una fila y una columna.

COLUMN
imagen y texto A

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 formarán la tabla.

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas
deberán insertarse entre las etiqetas <table> y </table>.

Fila <tr>

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>

Columna o celda <td>

Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el
número de columnas.

Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar
el número de celdas por fila, que equivale a especificar el número de columnas por fila.

Página 18 de 34
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:
Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash

Habría que escribir:

<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>

Formato de la tabla

Es posible modificar los siguientes atributos de una tabla:


Atributo Significado Posibles valores
un número, acompañado de % cuando se desee
width ancho de la tabla
que sea en porcentaje
un número, acompañado de % cuando se desee
height altura de la tabla
que sea en porcentaje
espacio entre el contenido de las
cellpadding un número
celdas y el borde
cellspacing espacio entre celdas un número
border grosor del borde un número
left (izquierda)
alineación de la tabla dentro de la
align right (derecha)
página
center (centro)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal

Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente:
Sabado Domingo
Curso HTML Curso Dreamweaver

Página 19 de 34
Curso Frontpage Curso Flash

Habría 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 verás que el ancho de la tabla varía
para ocupar siempre la mitad de la ventana), que el borde ( border) tiene un grosor de dos píxeles (es más
ancho que las separaciones internas de la tabla que tienen grosor 1), 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).

Formato de las celdas

Es posible modificar los siguientes atributos de una celda:

Atributo Significado Posibles valores


un número, acompañado de % cuando se desee
width ancho de la tabla
que sea en porcentaje
un número, acompañado de % cuando se desee
height altura de la tabla
que sea en porcentaje
left (izquierda)
alineación horizontal del
align right (derecha)
contenido de la celda
center (centro)
baseline (línea de base)
alineación vertical del contenido bottom (inferior)
valign
de la celda middle (medio)
top (superior)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal

También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar
de en la etiqueta <td>.

Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda
que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos
establecidos para una fila que los establecidos para toda la tabla.

Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"

bgcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<td>Sabado</td>
<td bgcolor="#66CC99">Domingo</td>
</tr>

Página 20 de 34
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>

Obtendríamos la siguiente tabla:


Sabado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash

Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código <tr
align="center" bgcolor="#0099CC"> se ha establecido el 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 través de la línea <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.

Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que
el contenido de la celda no se ajuste de manera automática al ancho de la columna sino que el ancho de la
celda se adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este atributo no toma
ningún valor, simplemente se añade o no a las etiqueta <td>.

Encabezado de columna <th>

Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner
en su lugar las etiquetas <th> y </th>.

Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta
nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir
los encabezados o títulos de las columnas.

Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="1" align="center">


<tr>
<th>Sabado</td>
<th>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>

Obtendríamos la siguiente tabla:


Sábado Domingo
Curso HTML Curso Dreamweaver

Página 21 de 34
Curso Frontpage Curso Flash

Título de tabla <caption>

No solamente es posible establecer títulos para las columnas, también es posible establecer un título para
la tabla mediante las etiquetas <caption> y </caption>.

Estas etiquetas han de ir después de la etiqueta <table>, y puede especificarse el valor de los atributos
align (con los valores bottom, center, left, right y top) y valign (con los valores bottom y top).

Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="1" align="center">


<caption align="right" valign="top">Titulo de la tabla<tr>
<tr>
<th>Sabado</td>
...
</tr>
</table>

Obtendríamos la siguiente tabla con título:


Titulo de la tabla
Sábado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash

El título aparece ajustado a la margen derecho de la tabla (align="right") y encima de la tabla


(valign="top").

Combinar celdas

Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar
celdas.

A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a
través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla:
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE
PERRO
DIFERENCIAS HOMBRE
PEQUEÑO GRANDE
Duración crecimiento 10 meses 18 a 24 meses 16 años
Tiempo de gestación 58 a 63 días 9 meses
Duración de vida del pelo/cabello 1 año 2 a 7 años

Habría que escribir el siguiente código:

<table width="575" border="2" cellspacing="2">


<tr align="center" valign="middle">
<th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>
</tr>
<tr align="center" valign="middle">
<th rowspan="2">DIFERENCIAS</th>

Página 22 de 34
<th colspan="2">PERRO</th>
<th rowspan="2">HOMBRE</th>
</tr>
<tr align="center" valign="middle">
<th>PEQUE&Ntilde;O</th>
<th>GRANDE</th>
</tr>
<tr align="center" valign="middle">
<td>Duraci&oacute;n crecimiento</td>
<td>10 meses</td>
<td>18 a 24 meses</td>
<td>16 a&ntilde;os</td>
</tr>
<tr align="center" valign="middle">
<td>Tiempo de gestaci&oacute;n</td>
<td colspan="2">58 a 63 d&iacute;as</td>
<td>9 meses</td>
</tr>
<tr align="center" valign="middle">
<td>Duraci&oacute;n de vida del pelo/cabello</td>
<td colspan="2">1 a&ntilde;o</td>
<td>2 a 7 a&ntilde;os</td>
</tr>
</table>

Vamos a explicar un poco cómo funciona dicho código, aunque sería conveniente que primero intentaras
entender el código comparándolo con la tabla que de él se obtiene.

En primer lugar, tenemos que ver el número máximo de columnas que ha de tener la tabla. En este caso
serían cuatro columnas. Para saber el número de columnas total de la tabla, tenemos que fijarnos en el
número total de celdas que podemos obtener por fila al trazar las líneas verticales que separan las columnas
entre sí.

En la primera fila, la línea <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>


indica que la celda ocupará cuatro columnas de la tabla (la columna actual y las 3 siguientes). Como la tabla
tiene como mucho cuatro columnas y el atributo colspan de la celda vale cuatro, no hay que definir más
celdas para esa misma fila.

En la segunda fila, la línea <th rowspan="2">DIFERENCIAS</th> indica que la celda ocupará dos filas
de la tabla (la actual y la siguiente). Lo mismo ocurre con la línea <th rowspan="2">HOMBRE</th>.

Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como mucho cuatro
columnas, por lo que como en la línea <th colspan="2">PERRO</th> el atributo colspan vale dos, ya
tenemos las cuatro celdas.

En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo que en la tercera fila
habrá que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas se corresponden con las
definidas en la fila anterior.

Las dos nuevas celdas son <th>PEQUE&Ntilde;O</th> y <th>GRANDE</th>.

El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestión de
práctica.

Unidad 7. Marcos (I)

Conjunto de marcos <frameset>

Página 23 de 34
Los marcos o frames sirven para distribuir
mejor los datos de las páginas, ya que
permiten mantener fijas algunas partes, como
pueden ser el logotipo y la barra de
navegación, mientras que otras sí pueden
cambiar. Además de mejorar la funcionalidad,
pueden mejorar también la apariencia.

Cada uno de los marcos de una página,


contiene un documento HTML individual. Por
ejemplo, en la imagen de la derecha puedes
ver una página con dos marcos. El marco
izquierdo contiene el documento menu.htm y
el derecho el documento perros.htm. Para
poder visualizar la página de este modo,
hemos tenido que abrir en el navegador el
documento marcos.htm, que es el que en este
caso contiene el grupo de marcos.

El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que vemos
solamente algunos conteptos básicos y ejemplos sencillos.

Como hemos visto si queremos utilizar marcos debemos crear una página con la definición del conjunto de
marcos (en el ejemplo anterior la página marcos.htm).

Los conjuntos de marcos se definen a través de las etiquetas <frameset> y </frameset>, que van
después de la etiqueta <head>. A través de estas etiquetas se indica el número de marcos en que se dividirá
la ventana, cada uno de los cuales será una especie de subventana.

Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y
</body>, ya que el cuerpo del documento será el cuerpo de las páginas que se carguen en cada uno de los
marcos del conjunto de marcos.

Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes:
Atributo Significado Posibles valores
un número (acompañado de %
tamaño de cada una de las columnas en que se cuando se desee que sea en
cols
divide el documento porcentaje) por cada columna,
separados por comas.
un número (acompañado de %
tamaño de cada una de las columnas en que se cuando se desee que sea en
rows
divide el documento porcentaje) por cada fila,
separados por comas.
yes
frameborder aparece o no el borde de los marcos
no
framespacing separación entre los marcos un número
un número, acompañado de %
border grosor del borde cuando se desee que sea en
porcentaje
bordercolor color del borde número hexadecimal

También es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica que
dicha fila o columna ocupará todo lo que quede de ventana o subventana. Cuando existan varias columnas o
filas con este valor, se repartirán de forma equitativa lo que quede de ventana.

Por ejemplo, si insertáramos la siguiente línea de código:

Página 24 de 34
<frameset rows="*" cols="142,*,25%">...</frameset>

Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía todo el alto de la ventana.
En este caso concreto no haría falta poner el atributo rows.

Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en tres columnas. La primera
columna sería de 142 píxeles de ancho, la tercerá del 25% de la ventana, y la segunda columna ocuparía lo
que quedará de ventana (el 75% de la ventana menos 142 píxeles).

También es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos.

Por ejemplo, si insertáramos el siguiente código:

<frameset cols="142,*">
<frameset rows="80,*">...</frameset>
<frameset cols="25%,*,*">...</frameset>
</frameset>

Estaríamos dividiendo el documento en dos columnas. La primera sería de 142 píxeles, y la otra abarcaría
el resto de la ventana.

Al mismo tiempo, la primera columna o subventana estaría dividida en dos filas o subventanas
horizontales, la primera de ellas de 80 píxeles.

La segunda columna o subventana de la ventana principal se dividiría a su vez en tres columnas, la


primera de ellas del 25% de la subventana, y las otras dos se repartirían el resto a partes iguales (se
repartirían el 75% de la subventana).

Por último debemos saber que entre las etiquetas <frameset> y </frameset> sólo se pueden encontrar
la etiquetas <head> <noframe> <frameset> <frame> y sus correspondientes etiquetas de cierre.

Unidad 7. Marcos (II)

Marco <frame>

Ya hemos visto cómo dividir un documento en varias subventanas o marcos, pero no hemos visto cómo
hacer que se carguen las distintas páginas en cada uno de los marcos.

Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la etiqueta <frame>
por cada uno de los marcos de la ventana. Estas etiquetas estarán entre las etiquetas <frameset> y
</frameset>, y no necesitan etiqueta de cierre.

Es posible modificar los siguientes atributos de un marco:


Atributo Significado Posibles valores
yes o 1
frameborder aparece o no el borde del marco
no o 0
name nombre del marco cualquier valor
si aparece, el usuario no podrá redimensionar el
noresize no puede tomar valores
tamaño de este marco
marginwidth anchura del margen con respecto a los bordes del un número, acompañado de %

Página 25 de 34
cuando se desee que sea en
marco
porcentaje
un número, acompañado de %
altura del margen con respecto a los bordes del
marginheight cuando se desee que sea en
marco
porcentaje
se mostrará o no la barra de desplazamiento cuando yes
scrolling la página del marco no se pueda visualizar no
completamente en él auto
src documento que se cargará en el marco ruta y nombre del documento

Por ejemplo, para crear el conjunto de marcos de la página que aparece si pulsas aquí, tendríamos que
escribir:

<frameset cols="150,*" frameborder="yes" framespacing="3" border="3" bordercolor="#FF9900">


<frame src="izquierdo.htm" name="marcoizquierdo" frameborder="no" scrolling="no" noresize>
<frame src="derecho.htm" name="marcoderecho" frameborder="no" scrolling="auto">
</frameset>

Y para crear el conjunto de marcos de la página que aparece si pulsas aquí, tendríamos que escribir:

<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900">


<frame src="superior.htm" name="marcosuperior" frameborder="yes" scrolling="NO" noresize>
<frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900">
<frame src="izquierdo.htm" name="marcoizquierdo" scrolling="NO" noresize>
<frame src="derecho.htm" name="marcoderecho">
</frameset>
</frameset>

Esta última página está dividida en dos marcos horizontales (rows="90,*"), estando el inferior de ellos
dividido en dos marcos verticales (cols="150,*"

Sin marcos <noframes>

Siempre que creamos una página queremos que pueda ser visitada por el mayor número de usuarios, por
lo que el hecho de que hayan usuarios cuyos navegadores no soportan los marcos puede resultar un
problema.

Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea visualizado en aquellos
navegadores que no soportan los marcos.

Si un navegador no soporta los marcos, no cargará ningún documento en ningún marco, por lo que
tendremos que mostrar el cuerpo del documento actual de algún modo. Por ello, han de introducirse las
etiquetas <body> y </body> entre las etiquetas <noframes> y </noframes>.

Por ejemplo, si escribiéramos el siguiente código:

<html>
<head>
...
</head>
<frameset cols="150,*">
<frame src="izquierdo.htm" name="marcoizquierdo">
<frame src="derecho.htm" name="marcoderecho">
</frameset>

Página 26 de 34
<noframes>
<body>
Este documento tiene marcos y tu navegador no los soporta.
</body>
</noframes>
</html>

Obtendríamos una página con dos marcos, que en el caso de intentar ser visualizada en un navegador que
no soportase marcos, mostraría una página con el texto Este documento tiene marcos y tu navegador
no los soporta.

Una buena solución para que el mayor número de usuarios pueda visitar nuestra página, es crear nuevas
páginas con el contenido de los documentos que deberían mostrarse en los marcos, pero que permitan pasar
de unos a otros dentro de la misma ventana.

De este modo, en el caso de que el navegador no soporte los marcos, podemos incluir un enlace a una de
estas páginas. Por ejemplo, si escribiéramos el siguiente código:

...
<noframes>
<body>
Este documento tiene marcos y tu navegador no los soporta.
<a href="sinmarcos.htm">Pulsa aqui para visualizar la página sin marcos.</a>
</body>
</noframes>
</html>

Cuando la página intentara ser visualizada en un navegador que no soportase los marcos, aparecería el
enlace Pulsa aqui para visualizar la página sin marcos. a una ventana sin marcos.

Unidad 7. Marcos (III)

Destino del enlace

Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos
podían ser _blank, _parent, _self, y _top. Vamos a recordar para qué servía cada uno de ellos, ya que
ahora que sabes trabajar con marcos te serán más fáciles de entender.

_blank:

Abre el documento vinculado en una ventana nueva del navegador.

_parent:

Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos
padre.

_self:

Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top:

Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de
la ventana desaparecerán al abrir el vínculo en ella.

Además de estos destinos para los enlaces, también podrás utilizar los nombres de los distintos marcos de

Página 27 de 34
la página. Por ejemplo, si tuvieramos un marco con el nombre marcoderecho, podríamos insertar el enlace:

<a href="http://www.aulaclic.com" target="marcoderecho">Aulaclic en el marco derecho</a>

Este enlace cargaría la página de aulaclic


en el marco llamado marcoderecho.

Podemos añadir todos estos nuevos


destinos a cualquier elemento de la página
que contenga algún enlace, ya sea texto,
una imágen, un mapa de imagen, un
elemento Flash, etc.

Gracias a todo esto podremos hacer que


las barras de navegación y el resto de
enlaces funcionen a nuestro antojo,
cargando unas u otras páginas en alguno
de los marcos, en una ventana nueva, en
toda la ventana, etc.

Esta tarea puede resultar algo pesada, y


al principio complicada, pero da muy
buenos resultados finales.

Ejercicio paso a paso. Crear conjunto de marcos


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

2 Abre el documento marcos.htm, de la carpeta originales/animales del curso.

3 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis


documentos/ejercicios_html/animales

4 Inserta una línea en blanco debajo de la etiqueta </head>, y escribe el siguiente código en ella:

<frameset rows="*" cols="142,*" framespacing="0" frameborder="NO" border="0">


<frame src="menu.htm" name="marcoizquierdo" frameborder="no" scrolling="NO" noresize>
<frame src="inicio.htm" name="marcoderecho" frameborder="no">
</frameset>

Página 28 de 34
Con la primera línea, estarás creando dos marcos en la página. El primero será de 142 píxeles, y el otro
ocupará el resto de la ventana del navegador. Los marcos se distribuirán en forma de columna
(cols="142,*"). No habrá espacio entre los marcos (framespacing="0"), ni se mostrarán sus bordes
(frameborder="NO" border="0").

Con la segunda línea, estarás especificando las propiedades del primer marco. Este marco se llamará
marcoizquierdo, no se mostrarán sus bordes (frameborder="no"), y el usuario no podrá modifciar su
tamaño (noresize). En este marco se cargará el documento menu.htm, y cuando éste no pueda ser
mostrado en su totalidad, no aparecerán las barras de desplazamiento (scrolling="NO").

Con la tercera línea, estarás especificando las propiedades del segundo marco. Este marco se llamará
marcoderecho, y no se mostrarán sus bordes (frameborder="no"). En este marco se cargará el
documento inicio.htm.

5 Inserta una línea en blanco debajo de la etiqueta </frameset>, y escribe el siguiente código en ella:

<noframes>
<body bgcolor="#99CC99">
Esta p&aacute;gina tiene marcos, y tu navegador no los soporta
</body>
</noframes>

Este código será el utilizado por los navegadores que no soportan los marcos. Cuando un navegador no
soporte los marcos, mostrará una página de color verde (<body bgcolor="#99CC99">), con el texto Esta
página tiene marcos, y tu navegador no los soporta.

6 Haz clic sobre el menú Archivo.

7 Haz clic sobre la opción Guardar.

8 Abre el documento marcos.htm, que acabas de guardar, en un navegador, y comprueba que obtienes
una página como la que aparece si pulsas aquí.

Unidad 9. Multimedia (I)

Sonido de fondo <bgsound>

Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la
página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga
que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro
tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita
puede resultar algo molesto.

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI,
aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de
audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido
de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.

A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.

Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que
el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1.

Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:

<bgsound src="varios/audio.mid" loop="-1">

Página 29 de 34
La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la
situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por
ejemplo, incluirla justo debajo de la etiqueta <body>.

Vídeo y audio <embed>

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los
vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de
cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay que
insertar nada.

A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.

Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se
reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.

El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede


tomar los valores true o false.

El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los
valores true o false.

Los atributos width (anchura) y height (altura) sirven para


especificar el tamaño de la consola de control de vídeo. Estos
atributos pueden tomar como valor un número, que indica el
tamaño en píxeles. Si no se especifican estos atributos, la
consola de control de vídeo se mostrará con el tamaño más
adecuado al tamaño del vídeo.

A la derecha tienes un ejemplo de un archivo de video, para


el que se muestran los controles de video. Puedes reproducirlo
pulsando sobre los controles.

Para insertar el vídeo anterior, se podría escribir:

<embed src="varios/cotorra.avi" autostart="false" loop="true">

Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar
esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>, que funciona del
mismo modo para los archivos de audio y de vídeo.

No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción.

A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si
lo deseas, puedes reproducirlo pulsando sobre los controles

Para insertar el archivo de audio anterior, se podría escribir:

<embed src="varios/audio.mid" autostart="false" loop="true">

Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como
sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero.

Página 30 de 34
También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor estrue, se
ocultan los controles de reproducción.

Por ejemplo, para insertar sonido de fondo se podría escribir:

<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" >

O también:

<embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" >

Películas Flash <object> ...

Las películas Flash son animaciones con la extensión SWF. Suelen incluirse en las páginas iniciales de los
sitios web, y se utilizan a modo de presentación hacia los usuarios. También pueden utilizarse como botones
de las barras de navegación.

Estas películas pueden crearse mediante el programa Flash de Macromedia, y necesitan que el usuario
tenga instalado el plug-in para poder ser visualizadas.

La etiqueta <object> puede utilizarse para insertar diferentes objetos dentro de la página, como pueden ser
archivos de audio, archivos de vídeo, imágenes, etc.

El objetivo del uso de la etiqueta <object> es la de que no se produzcan incompatibilidades por las
distintas etiquetas soportadas por unos u otros navegadores.

Las animaciones Flash se insertan del mismo modo que los archivos de audio y de vídeo, a través de la
etiqueta <embed>, pero debido a que tiene más posibilidades de que se produzcan incompatibilidades entre
los distintos navegadores, necesita también de la etiqueta <object>.

Como el uso de la etiqueta <object> puede resultar bastante complicado, vamos a ver solamente un caso
concreto para la inserción de un archivo SWF.

Por ejemplo, vamos a analizar el código que habría que escribir para insertar la animación Flash de la
derecha.

El código a escribir sería el siguiente:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29
,0" width="200" height="100">
<param name="movie" value="graficos/pelicula.swf">
<param name="quality" value="high">
<embed src="graficos/pelicula.swf" width="200" height="100" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object>

En primer lugar vamos a analizar la etiqueta <embed>. En ella aparecen tres atributos que no
conocíamos.

A través del atributo quality se especifica la calidad con la que se reproducirá la animación Flash. Puede
valer high (alta), autolow (baja automática), o low (baja). Si no se incluye este atributo, se considera que la
calidad será automáticamente alta.

A través del atributo pluginspage se especifica la página desde la que se podrá descargar el plug-in
necesario para reproducir la animación Flash, para que si algún usuario no lo tiene aún instalado en su
ordenador pueda descargarlo.

Página 31 de 34
A través del atributo type se especifica el tipo de fichero, para que el navegador pueda saber qué tipo de
programa necesita ejecutar para reproducir la animación.

Ahora vamos a analizar la etiqueta <object>.

A través del atributo classid se identifica al objeto. Cuando el objeto es una animación Flash, el atributo
classid debe valer clsid:D27CDB6E-AE6D-11cf-96B8-444553540000.

A través del atributo codebase se especifica la dirección en la que se encuentran los componentes
externos necesarios para reproducir la animación.

Los atributos width y height se utilizan del mismo modo, y deben tener el mismo valor, que en la etiqueta
<embed>.

Por último, vamos a analizar la etiqueta <param>. Esta etiqueta se utiliza para especificar los valores
necesarios para la inicialización de un objeto.

La etiqueta <param> no necesita etiqueta de cierre, y ha de contener los atributos name y value. El
atributo name indica el nombre de la característica que va a ser definida, y value indica su valor.

Por ejemplo, para indicar la ruta del archivo, que en la etiqueta <embed> aparece especificado por el
atributo src, es necesario incluir también una etiqueta <param>, en la que name tenga el valor movie.

Por eso aparece la línea <param name="movie" value="graficos/pelicula.swf">.

Para indicar la calidad de reproducción, que en la etiqueta <embed> aparece especificado por el atributo
quality, es necesario incluir también una etiqueta <param>, en la que name tenga el valor quality.

Por eso aparece la línea <param name="quality" value="high">.

Las animaciones Flash se reproducen de forma automática al cargarse la página, y su reproducción es


continua.

Para hacer que una animación no se reproduzca automáticamente, habrá que indicarlo mediante el atributo
play, que debe incluirse dentro de la etiqueta <embed>.

El atributo play puede valer true o false. Para que la animación no se reproduzca automáticamente, el
valor de play debe ser false.

También habrá que insertar la línea <param name="play" value="false">.

Lo mismo ocurre para hacer que la reproducción no sea continua. Habrá que insertar el atributo loop en la
etiqueta <embed>.

El atributo loop puede valer true o false. Para que la animación no se reproduzca continuamente, el valor
de loop debe ser false. De este modo, solo se reproducirá una vez.

También habrá que insertar la línea <param name="loop" value="false">.

Practicar las operaciones que hay que realizar para insertar sonido de fondo.

Página 32 de 34
Primero añadiremos una música de fondo a una página.

1 Abre el archivo menu.htm, que se encuentra en la carpeta animales.

2 Inserta una línea en blanco debajo de la etiqueta <basefont>, y escribe el siguiente código en ella:

<bgsound src="varios/audioanimales.MID" loop="-1">

Con este código estarás estableciendo el archivo audioanimales.MID como sonido de fondo de la página,
que se reproducirá continuamente en un bucle infinito (loop="-1").

3 Haz clic sobre la opción Guardar del menú Archivo.

4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una
página como la que aparece si pulsas aquí. No olvides encender unos altavoces que estén conectados a tu
ordenador, para comprobar que el archivo de audio se reproduce correctamente.

Ahora vamos a sustituir las palabras INICIO PERROS GATOS y CONSULTAS por botones Flash.

1 Abre otra vez el archivo menu.htm, que se encuentra en la carpeta animales.

2 Sustituye la palabra INICIO por el siguiente código:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0
,29,0" width="100" height="23">
<param name="movie" value="binicio.swf">
<param name="quality" value="high">
<embed src="binicio.swf" width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-
flash" >
</embed>
</object>

Nota: se ha escrito en el color de los valores del usuario unicamente los valores que cambian al insertar un
botón Flash.

3 Sustituye la palabra PERROS por el siguiente código:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0
,29,0" width="100" height="23">
<param name="movie" value="bperros.swf">
<param name="quality" value="high">
<embed src="bperros.swf" width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-
flash" >
</embed>
</object>

4 Sustituye la palabra GATOS por el siguiente código:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0
,29,0" width="100" height="23">
<param name="movie" value="bgatos.swf">
<param name="quality" value="high">
<embed src="bgatos.swf" width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-
flash" base=".">

Página 33 de 34
</embed>
</object>

5 Sustituye la palabra CONSULTAS por el siguiente código:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0
,29,0" width="100" height="23">
<param name="movie" value="bconsultas.swf">
<param name="quality" value="high">
<embed src="bconsultas.swf" width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-
flash" base=".">
</embed>
</object>

6 Haz clic sobre la opción Guardar del menú Archivo.

7 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una
página como la que aparece si pulsas aquí.

Página 34 de 34

También podría gustarte