Manual Basico HTML

MANUAL DE HTML BASICO
ING. CLAUDIA RODRIGUEZ
1
INDICE
ESTRUCTURA BÁSICA DE UN DOCUMENTO EN HTML ................................................ 3

TEXTO ............................................................................................................................... 4
IMÁGENES ........................................................................................................................ 7
ENLACES (LINKS)............................................................................................................. 8
ESPACIOS Y SALTOS DE LINEA ................................................................................... 10
ATRIBUTOS DEL TEXTO ................................................................................................ 12
LISTAS DE ELEMENTOS ................................................................................................ 13
IMAGENES ...................................................................................................................... 15
ENLACES ........................................................................................................................ 17
TABLAS ........................................................................................................................... 18
FRAMES $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$.$$$$.20
MULTIMEDIA $$.$$$$$$$$$$$$$$$$$$$$$$ $$$.$$......28
2
ESTRUCTURA BÁSICA DE UN DOCUMENTO EN HTML
El lenguaje html trabaja con etiquetas (tags) que tienen diferentes usos. Por ejemplo
<TITLE> </TITLE> sirve para colocar el nombre de la página en el marco superior del
navegador. La mayoría de las etiquetas necesitan cerrarse y modifican la información
contenida dentro de ellas. Algunas como <BR> no necesitan cerrarse. Después se
explicará mejor el significado de éstas y otras más.
Todos los documentos en html deben tener la siguiente estructura:
<HTML>
<HEAD>
<TITLE>Mi página</TITLE>
</HEAD>
<BODY>
Aquí va todo el contenido del programa.
</BODY>
</HTML>
Este formato debe seguirse siempre como una regla. El uso de las demás etiquetas y el
contenido del programa irá dentro de la etiqueta <BODY> </BODY>. El título va a ser el
nombre que le quieras dar a tu página.
*** Ahora comienza lo interesante, vamos a empezar a construir nuestra página de

Internet. Entra al editor de textos, carga tú archivo prueba.htm (que por ahora debe estar
vacío) y teclea lo siguiente:
<HTML>
<HEAD>
<TITLE>Historia de Internet</TITLE>
</HEAD>
<BODY>
En esta página explicaremos brevemente los inicios de la red de redes.
</BODY>
</HTML>
*****************
Lo que estamos haciendo aquí es generando el esqueleto de nuestra página. Estas son
las etiquetas básicas para cualquier diseño. El título de esta página-ejemplo es Historia de
Internet y aparece en el marco superior del navegador. Como se acaba de mencionar,
dentro de las etiquetas <BODY> </BODY> desarrollaremos todo nuestro contenido.
Pulsa Guardar en el editor de textos para grabar en prueba.htm lo que acabamos de

codificar. Recuerda que ya has aprendido cómo visualizarlo.
3
TEXTO
Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar

a manipular los elementos de nuestra página. El elemento fundamental en Internet es el
texto. Aunque el auge de los últimos años se ha debido principalmente al contenido
multimedia, (gráficos, sonido y video) el texto sigue siendo la base de todo documento en
la red.
A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la

manipulación de texto en html está un tanto limitada y es necesario utilizar ciertas
etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las
etiquetas más populares en el manejo de texto.
<PRE> </PRE>
Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la
página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc.
<BR>
Realiza un salto de línea. Esta etiqueta no necesita cerrarse.
<P>
Realiza un salto de párrafo. Tampoco necesita cerrarse.
<CENTER> </CENTER>
Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a

gráficos.
<Hx> </Hx>
Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el
encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente.
Ejem:
<H1>Encabezado</H1>
<H2>Encabezado</H2>
<H3>Encabezado</H3>
<H4>Encabezado</H4>
<FONT SIZE=x> </FONT>
Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la
letra y va del 1 al 7. El número predeterminado es el 3.
Texto en <B>Negritas</B>
Texto en <I>Itálica</I>
4
Texto <U>subrayado</U>
<ADDRESS>
Dirección
</ADDRESS>
<HR>
Se utiliza como línea separadora. Tiene algunos atributos que la modifican. WIDTH indica
La longitud, SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no

tenga relieve y además le añade un color gris más fuerte.
Ejem:
<HR>
<HR WIDTH=20% ALIGN=RIGHT SIZE=7>
<HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE>
*** Vamos a utilizar en nuestra página alguna de estas etiquetas para modificar texto.
Carga prueba.htm y teclea lo siguiente:
<HTML>
<HEAD>
</HEAD>
<BODY>
<h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br>
<h3>Introducción</h3><p>
El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos

años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando
el Departamento de Defensa de los Estados Unidos desarrollaba una red de
comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría,
nadie se imaginó que después de transferir el control de esa red llamada
<u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente
involucrando significativamente a toda la sociedad.
<hr>
<font size=2>Documento creado en Febrero del 2000</font>
</BODY>
</HTML>
*****************
COLOR
Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en

algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un
enlace, al texto, a una palabra o a una letra.
5
Para poder representar un color en html, se deben utilizar 6 números hexadecimales.

Ejem:
ROJO FF0000
VERDE 00FF00
AZUL 0000FF
MAGENTA FF00FF
VIOLETA 9900DD
ROSA CLARO FFDDFF
Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es
jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores
básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y ver cómo
cambian las tonalidades.
Html también acepta los nombres de los colores en lugar de los números hexadecimales,
por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF", pero tiene la
limitante de que solamente reconoce unos cuantos colores.
Se pueden seleccionar los colores deseados desde el inicio del documento en la

etiqueta <BODY> </BODY> por ejemplo:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF">
donde:
BGCOLOR es el color del fondo.
TEXT es el color del texto.
LINK es el color del enlace.
Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#".
También se puede cambiar el color sólo para un segmento deseado como:

<FONT COLOR="#FF0000">Texto</FONT>
*** Sigamos con nuestro ejemplo; cargamos el archivo prueba.htm y le agregamos lo

siguiente:
<HTML>
<HEAD>
</HEAD> <BODY BGCOLOR="#0FF0FF">
El mundo de las telecomunicaciones ha tenido un crecimiento acelerado

en los últimos años, en el que <b>Internet</b> ha sido
pieza clave. Hace unas décadas atrás, cuando el <font color=RED>Departamento de
Defensa de los Estados Unidos</font> desarrollaba una red de comunicaciones
6
que fuera capaz de soportar un ataque externo durante la guerra fría,

nadie se imaginó que después de transferir el control de esa red
llamada <u>ARPANET</u> a los investigadores universitarios,
ésta crecería exponencialmente involucrando significativamente a
toda la sociedad.
<hr>
</BODY>
</HTML>
*****************
Las modificaciones hechas a nuestro archivo deben ser evidentes. En la etiqueta

<BODY> </BODY> hemos agregado un determinado color para el fondo. También hemos
especificado que sólo un segmento del texto sea de color rojo.
IMÁGENES
Una característica muy importante en las páginas de Internet son los gráficos o imágenes.
Estos elementos contribuyen a hacer más completa una página proporcionando mayor
realce. Las imágenes se pueden usar como fondo de nuestra página, como complemento
y apoyo visual para cierta información, vínculos hacia otras páginas, etc. Los formatos de
imágenes más comunes en Internet son los .gif y .jpg, así que si queremos introducir un
gráfico, éste tiene que cumplir con estos formatos.
Para agregar una imagen en un documento se utiliza la etiqueta <IMG>.
Ejem:
<IMG SRC="home2.jpg" ALT="Casa azul">
Donde:
IMG indica el deseo de cargar una imagen.
SRC indica la ruta en la que se encuentra nuestro gráfico. Este puede estar en el mismo
directorio de nuestra página, en otro directorio, o incluso en un servidor en algún lugar del
mundo.
Ejem:
<IMG SRC="../web/imagen/home2.jpg" ALT="Casa azul">
ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra página desde
un navegador que no despliegue gráficos, pueda saber que en ese lugar existe una
imagen.
Existen una serie de atributos que modifican las imágenes de diferente forma, aquí están
algunos:
7
ALIGN=left|right|top|middle|bottom
Las opciones para ALIGN sitúan al gráfico en diferentes posiciones con respecto al texto.
BORDER=n
Le agrega un borde a la imagen y "n" indica el grosor.
WIDTH=n, HEIGHT=n
Especifican la altura y la anchura de la imagen, cuyas unidades se dan en píxeles.

VSPACE=n, HSPACE=n
Se utiliza para dejar espacio tanto vertical como horizontal entre la imagen y el texto que
la rodee.
Ejem:
Este ejemplo mostrará una imagen alineada a la izquierda del texto y separada de
él horizontalmente 10 unidades con un borde de grosor 2.
*** Agreguemos ahora una imagen a nuestro diseño. Carga prueba.htm y realiza la
modificación.
<HTML>
<HEAD>
<TITLE>Historia de Internet>/TITLE>
</HEAD>
<BODY BGCOLOR="#0FF0FF">
pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de
Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones
toda la sociedad.
<hr>
<center><IMG SRC="home2.jpg" ALT="Casa azul"></center>
</BODY>
</HTML>
*****************
Se ha insertado un gráfico a nuestra página que debe aparecer centrado.
ENLACES (LINKS)
El poder verdadero de html radica en la capacidad de manejar hipertexto o hipermedios

como algunos le llaman, y se logra por medio de enlaces o links. Esto es, a través de un
click en un segmento de texto o una imagen, es posible encontrar más información
8
relacionada con la que originó ese click. Dicha información puede encontrarse en otras
páginas dentro y fuera de nuestro servidor*, o en algún punto concreto de páginas dentro
y fuera de nuestro servidor.
*La computadora donde tenemos montada nuestra página.
El enlace por definición aparece en nuestras páginas subrayadas y de color azul. Como
ya se vio anteriormente, el color del enlace puede cambiarse al gusto.
La etiqueta encargada de establecer un enlace es:
<A> </A>.
Dentro de esta etiqueta está la función HREF en la cual se debe indicar la dirección donde
está la información a enlazar y también el tipo de protocolo* utilizado. Con HREF es
posible también hacer enlaces directos hacia imágenes, sonidos, etc.
*El protocolo son las normas o reglas utilizadas para diferentes tipos de servicios como
documentos hipertexto, transferencia de archivos, correo electrónico, etc. Ejem: HTTP,
FTP, MAILTO, GOPHER, etc.
Ejem:
<A HREF="http://www.usatoday.com">Periódico USA Today</A>
Periódico USA Today
Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link hacia otra página fuera de la nuestra en otro servidor.
Ejem:
<A HREF="index.html">Página principal>/A>
Página principal
Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link hacia otra página dentro del mismo servidor en el que se
encuentra esta página de html.
También es posible crear un enlace a través de una imagen en lugar de utilizar un

segmento de texto. Esto se hace de la misma manera que los ejemplos anteriores, sólo
que en lugar de escribir texto entre las etiquetas se inserta una imagen como las que ya
hemos visto.
Ejem:
<A HREF="http://www.goto.com"><IMG SRC="logo.gif"></A>
Dale un click al enlace gráfico creado y después pulsa "Back" o "Atrás" para regresar.
Este ejemplo muestra un link gráfico hacia otra página web.
9
*** Vamos ahora a aplicar enlaces en nuestro ejemplo. Carga prueba.htm
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#0FF0FF">

pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de
Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones
toda la sociedad.<P>
* Más información sobre este tema en:

<A HREF="http://www.interhelp.org/historia01.html">www.interhelp.org</A>
<hr>
<center><A HREF="index.html"><IMG SRC="home2.jpg" ALT="Casa azul"> </A>
</center>
</BODY>
</HTML>
*****************
ESPACIOS Y SALTOS DE LINEA
En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios
serán ignorados por el navegador.
Ejemplo Se vera como
Esto es una frase

Esto es una frase
Así mismo, tampoco se respetan las tabulaciones, retornos de carro etc... Para ello
existen una serie de etiquetas que indican estos códigos. La etiqueta <PRE></PRE>
obliga al navegador a visualizar el texto tal y como ha sido escrito, respetando
tabulaciones, espacios, retornos de carro, etc..
10
<PRE>
Este texto ha sido Este texto ha sido
preformateado . preformateado .
</PRE>
Para indicar un salto de línea se utiliza la etiqueta <BR> y para un cambio de párrafo (deja
una línea en blanco en medio) se utiliza la etiqueta <P> .
Este texto tiene

saltos de línea y
Este texto tiene<BR>saltos de línea y <P> de párrafo.
de párrafo.
La etiqueta <P> puede usarse también como etiqueta "cerrada" <P></P> indicando de
esta manera los atributos de un párrafo en concreto. Cuando se usa de esta manera tiene
el parámetro align que indica al navegador la forma de "justificar" el párrafo. Los valores
posibles de este parámetro son LEFT, RIGHT y CENTER , estando aun en estudio el
valor JUSTIFY .
<P Align=right>Este es un ejemplo de un párrafo Este es un ejemplo de párrafo de

de texto justificado a la derecha.</P> texto justificado a la derecha
<P Align=center>Este es un ejemplo de párrafo de Este es un ejemplo de párrafo de

texto centrado.</P> texto centrado
La etiqueta <HR> muestra una línea horizontal de tamaño determinable. Tiene los
siguientes parámetros opcionales: align = posición Alinea la línea a la izquierda (left), a la
derecha (right) o la centra (center). No muestra sombra, evitando el efecto en tres
dimensiones.
Size = numero Indica el grosor de la línea en píxeles. width = num / % Indica el ancho de
la línea en tanto por ciento en función del ancho de la ventana del navegador. También se
puede especificar un número que indicaría el ancho de la línea en píxeles. Ejemplo :
<HR align= center size= 20 width=50%>
La etiqueta <HR> sin ningún parámetro mostraría una línea horizontal que ocuparía todo
el ancho de la página. Estas líneas sencillas son las que ves en este manual para separar
las diferentes secciones
11
ATRIBUTOS DEL TEXTO
Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias etiquetas.
Algunas de ellas no son reconocidas por determinados navegadores de Internet, es por
ello que según el navegador que este vd. utilizando, verá el resultado correctamente o no.
Atributo Etiqueta Ejemplo Resultado

Negrita <B></B> <B> Texto de prueba </B> Texto de prueba
Cursiva <I></I> <I> Texto de prueba </I> Texto de prueba
Texto de
Teletype <TT></TT> <TT> Texto de prueba </TT>
prueba
Subrayado <U></U> <U> Texto de prueba </U> Texto de prueba
Tachado <S></S> <S> Texto de prueba </S> Texto de prueba
<BLINK> Texto de prueba
Parpadeo <BLINK></BLINK> Texto de prueba
</BLINK>
Texto de prueba
Superíndice <SUP></SUP> <SUP> Texto de prueba </SUP>
Subíndice <SUB></SUB> <SUB> Texto de prueba </SUB> Texto de prueba
<CENTER> Texto de prueba

Centrado <CENTER></CENTER> Texto de prueba
</CENTER>
Por otro lado la etiqueta <FONT></FONT> nos permite variar el tamaño, el color, y el tipo
de letra de un texto determinado. Utiliza para ello los parámetros size , bgcolor y face .
size = valor Da al texto un tamaño en puntos determinado. size = + / - valor Da al texto un

tamaño tantas veces superior (+) o inferior (-) como indique el valor. color = "código de
color" Escribe el texto en el color cuyo código se especifica. face = "nombre de font"
Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el
ordenador que "lee" la página se usara el font predeterminado del navegador.
Ejemplo
<FONT size = +2 color = "#FF0000 face = "Arial" > Texto de prueba </FONT>
Existen otras etiquetas que realizan las mismas operaciones que las antes vistas en los
atributos del texto.
Ejemplo
<FONT size = +2 color = "#FF0000 face = "Arial" > Texto de prueba </FONT>
Para incluir comentarios en la página Web se utiliza la etiqueta .
Ejemplo :
12

Los comentarios no serán mostrados por el navegador y son útiles para realizar
anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una
determinada parte del documento. Asimismo veremos mas adelante que la etiqueta de
comentario nos será de utilidad para incluir código JavaScript en nuestra pagina Web
LISTAS DE ELEMENTOS
Existen tres tipos de listas, numeradas, sin numerar y de definición. Las listas numeradas
representarán los elementos de la lista numerando cada uno de ellos según el lugar que
ocupan en la lista. Para este tipo de lista se utiliza la etiqueta <OL></OL> . Cada uno de
los elementos de la lista irá precedido de la etiqueta <LI> . La etiqueta <OL> puede llevar
los siguientes parámetros :
start = num Indica que número será el primero de la lista. Si no se indica se entiende que
empezará por el número 1. type = tipo Indica el tipo de numeración utilizada. Si no se
indica se entiende que será una lista ordenada numéricamente. Los tipos posibles son :
1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)
Ejemplo Resultado
<OL>
1. España
<LI> España
2. Francia
<LI> Francia
3. Italia
<LI> Italia
4. Portugal
<LI> Portugal
</OL>
<OL type = A >
1. España
<LI> España
2. Francia
<LI> Francia
3. Italia
<LI> Italia
4. Portugal
<LI> Portugal
</OL>
Las listas sin numerar representan los elementos de la lista con un "topo" o marca que
antecede a cada uno de ellos. Se utiliza la etiqueta <UL></UL> para delimitar la lista, y
<LI> para indicar cada uno de los elementos. La etiqueta <UL> puede contener el
parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de
la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o marca
puede ser un disco, un círculo o un cuadrado.
13
Ejemplo Resultado
<UL type = disk >
• España
<LI> España
• Francia
<LI> Francia
• Italia
<LI> Italia
• Portugal
<LI> Portugal
</UL>
<UL type = square >
• España
<LI> España
• Francia
<LI> Francia
• Italia
<LI> Italia
• Portugal
<LI> Portugal
</UL>
Las listas de definición muestran los elementos tipo Diccionario, o sea, término y
definición. Se utiliza para ellas la etiqueta <DL></DL> . El elemento marcado como
término se antecede de la etiqueta <DT> , el marcado como definición se antecede de la
etiqueta <DD> .
Ejemplo Resultado
<DL>
<DT> WWW
<DD> Abreviatura de
World Wide Web
<DT> FTP
WWW Abreviatura de World Wide Web FTP Abreviatura de
<DD> Abreviatura de File
File Transfer Protocol IRC Abreviatura de Internet Relay Chat
Transfer Protocol
<DT> IRC
<DD> Abreviatura de
Internet Relay Chat
</DL>
Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se
comportan igual que las listas sin numerar. La lista de Menú utiliza la etiqueta
<MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin
numerar mas "compacta" es decir, con menos espacio interlineal entre los elementos. La
lista de Directorio utiliza la etiqueta <DIR></DIR> y los elementos se anteceden de <LI> .
Los elementos tienen un límite de 20 caracteres.
Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se
consigue una estructura tipo "índice de materias".
14
Resultado
Ejemplo
• Buscadores
o Yahoo
o Ole
<UL type= disk > <LI> Buscadores <UL> <LI> Yahoo
o Lycos
<LI> Ole <LI> Lycos </UL> <LI> Links <UL> <LI>
• Links
Microsoft <LI> IBM </UL> </UL>
o Microsoft
o IBM
IMAGENES
Hasta el momento hemos visto como se puede escribir texto en una pagina Web, así
como sus posibles formatos. Para incluir una imagen en nuestra página Web utilizaremos
la etiqueta <IMG> . Hay dos formatos de imágenes que todos los navegadores modernos
reconocen. Son las imágenes GIF y JPG . Cualquier otro tipo de fichero gráfico o de
imagen (BMP, PCX, CDR, etc...) no será mostrado por el navegador, a no ser que
disponga de un programa externo que permita su visualización.
La etiqueta <IMG> tiene varios parámetros :
src = "imagen" Indica el nombre del fichero gráfico a mostrar.
alt = "Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver
la página no sea capaz de visualizar la imagen.
lowsrc = "imagen" Muestra una segunda imagen "superpuesta" sobre la primera una vez
se carga la pagina. Este parámetro no es reconocido por la totalidad de los navegadores
ya que esta en estudio su aplicación, así que en la mayoría de los casos será ignorado
mostrándose solo la primera imagen ( src ). En Netscape muestra la imagen indicada por
lowsrc en primer lugar, y posteriormente muestra la imagen indicada por src . Si las
imágenes son iguales pero tienen distinta "resolución" se conseguirá un efecto tipo
"Fade". Si las imágenes son de distinto tamaño la imagen indicada en src se
redimensionara al tamaño indicado por la imagen indicada enlowsrc
align = TOP / MIDDLE / BOTTOM Indica como se alineará el texto que siga a la imagen.
TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y
BOTTOM con la parte inferior.
border = tamaño Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna
un borde que será visible cuando la imagen forme parte de un Hyperenlace.
height = tamaño Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar
el tamaño de la imagen original.
width = tamaño Indica el ancho de la imagen en puntos o en porcentaje. Se usa para

variar el tamaño de la imagen original.
15
hspace = margen Indica el numero de espacios horizontales, en puntos, que separarán la

imagen del texto que la siga y la anteceda.
vspace = margen Indica el número de puntos verticales que separaran la imagen del texto
que le siga y la anteceda.
ismap / usemap Indica que la imagen es un MAPA. Veremos estos parámetros mas
adelante en este manual.
Ejemplo Se vería como
<IMG src= "caution.gif" alt= "Cuidado !!" >
Si el navegador no pudiese visualizar el gráfico.....
La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si
este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre
la imagen.
Ejemplo
<IMG src= "http://www.microsoft.com/iexplorer.gif" >
Veamos varios ejemplos "jugando" con los tamaños de la imagen, así como comprobando
la alineación de los textos. (Recuerde que en función del navegador que vd. utilice pueden
verse o no los efectos de cada parámetro).
<IMG src= "caution.gif"

width= 100 >

height= 20 >

align= TOP > Atencion !!!
Atencion !!!

align= MIDDLE > Atencion !!!
Atencion !!!
16

align= BOTTOM > Atencion !!!
Atencion !!!
Tenga en cuenta <IMG src= "caution.gif"

hspace= 20 > esta indicación.
Tenga en cuenta esta indicación
Tenga en cuenta <IMG src= "caution.gif"

vspace= 40 > esta indicación.
Tenga en cuenta esta indicación.
ENLACES
La característica principal de una página Web es que podemos incluir Hiperenlaces. Un

Hiperenlace es un elemento de la página que hace que el navegador acceda a otro
recurso, otra página Web, un archivo, etc...
Para incluir un Hyperenlace se utiliza la etiqueta <A></A> . El texto o imagen que se

encuentre dentro de los límites de esta etiqueta será sensible, esto quiere decir que si
pulsamos con el ratón sobre él, se realzará la función de hiperenlace indicada por la
etiqueta <A></A> . Si el Hiperenlace está indicado por un texto, este aparecerá
subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde
rodeándola. Esta etiqueta tiene el parámetro href que indica el lugar a donde nos llevará
el Hiperenlace si lo pulsamos.
Ejemplo
<A href = "http://www.microsoft.com/" > Pulse para ir a la página de Microsoft </A>
Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la página

Web indicada por el parámetro href, es decir, accederá a la página situada en
http://www.microsoft.com/
Lo mismo podríamos hacer con un gráfico.

Para buscar en Internet :
<A href = "http://www.yahoo.com/" > Para buscar en Internet :
<IMG src = "yahoo.gif" ></A>
Pulsando sobre la imagen se accedería a la página situada en http://www.yahoo.com/.
Un Hiperenlace también puede llevarnos a una zona de nuestra página. Para ello
debemos marcar en nuestra página las diferentes secciones en las que se divide. Lo
haremos con el parámetro name .
17
Ejemplo:
<A name = "seccion1" ></A>
Esta instrucción marca el inicio de una sección dentro de nuestra página. La sección se
llamará seccion1 . Para hacer un enlace a esta sección dentro de nuestra página lo
haríamos de la siguiente forma :
<A href = "#seccion1" > Primera Parte </A>

O también:
<A href = "http://www.mipagina.dom/mipagina.htm#seccion1" > Primera Parte </A>
Un Hiperenlace puede hacerse a cualquier tipo de fichero. Con las etiquetas anteriores
hemos visto como hacer enlaces a páginas Web o secciones dentro de una página web,
pero podríamos hacer un Hiperenlace a un grupo de noticias, o a otro servicio de Internet.
Ejemplo:
<A href = "news://news.actualidad.es/" > Noticias de actualidad </A>
Asimismo podemos hacer que el Hiperenlace de como resultado el envío de un correo

electrónico a una dirección de correo determinada.
Ejemplo:
<A href = mailto:usuario@email.dom> Envíame tus sugerencias </A>
También podemos realizar un Hiperenlace a un fichero cualquiera. En este caso el

navegador intentará "ejecutar" el fichero, y si no puede hacerlo nos preguntará si
deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los
visitantes de nuestra página copiar ficheros a su ordenador.
<A href = "manual.zip" > Pulsa aquí para llevarte una copia del manual. </A>
TABLAS
Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas,
imágenes, etc...) en diferentes filas y columnas separadas entre si. Es una herramienta
muy útil para "ordenar" contenidos de distintas partes de nuestra página. La tabla se
define mediante la etiqueta <TABLE></TABLE>. Los parámetros opcionales de esta
etiqueta son:
border = num. Indica el ancho del borde de la tabla en puntos.
cellspacing = num Indica el espacio en puntos que separa las celdas que están dentro de
la tabla.
cellpadding = num Indica el espacio en puntos que separa el borde de cada celda y el
contenido de esta.
18
width = num ó % Indica la anchura de la tabla en puntos o en porcentaje en función del

ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará
al tamaño de los contenidos de las celdas.
height = num ó % Indica la altura de la tabla en puntos o en porcentaje en función del alto
de la ventana del navegador. Si no se indica este parámetro, la altura se adecuará a la
altura de los contenidos de las celdas.
bgcolor = código de color Especifica el color de fondo de toda la Tabla.
Para definir las celdas que componen la tabla se utilizan las etiquetas <TD> y <TH> .
<TD> indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el
contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los
parámetros opcionales de ambas etiquetas son :
align = LEFT / CENTER / RIGHT / JUSTIFY Indica como se debe alinear el contenido de
la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado
(JUSTIFY).
valign = TOP / MIDDLE / BOTTOM Indica la alineación vertical del contenido de la celda,
en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE).
rowspan = num Indica el número de filas que ocupará la celda. Por defecto ocupa una
sola fila.
colspan = num Indica el número de columnas que ocupará la celda. Por defecto ocupa
una sola columna.
width = num ó % Indica la anchura de la columna en puntos o en porcentaje en función

del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se
adecuará al tamaño de los contenidos. Este parámetro solo funciona en los navegadores
modernos.
bgcolor = código de color Especifica el color de fondo del elemento de la Tabla. Para
indicar que acaba una fila de celdas se utiliza la etiqueta <TR> . A continuación
mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó
anteriormente el contenido de las celtas puede ser cualquier elemento de HTML, un texto,
una imagen, un Hiperenlace, una Lista, etc...
Ejemplo
<TABLE border = 4 cellspacing = 4 cellpadding = 4 width = 80% >
<TR>
<TH align = center > Buscadores</TH>
<TH align = center colspan = 2 > Otros Links</TH>
</TR>
<TR>
<TD align = LEFT > Yahoo </TD>
<TD align = LEFT > Microsoft </TD>
19
<TD align = LEFT > IBM </TD>

</TR>
<TR>
<TD align = LEFT > Infoseek </TD>
<TD align = LEFT > Apple </TD>
<TD align = LEFT > Digital </TD>
</TR>
</TABLE>
Se vería como:
Buscadores Otros Links
Yahoo Microsoft IBM
Infoseek Apple Digital
Las etiquetas <TD> y <TH> son cerradas según el estándar de HTML, es decir que un
elemento de tabla <TD> debería cerrarse con un </TD>, sin embargo los navegadores
asumen que un elemento de la tabla, queda automáticamente "cerrado" cuando se "abre"
el siguiente.
FRAMES
Introdución a los frames, un poco de historia y sus utilidades.
Una de las más modernas características de HTML son los frames, que se añadieron,
tanto en Netscape Navigator como en Internet Explorer, a partir de sus versiónes 2.0. Los
frames -que significan en castellano marcos- son una manera de partir la página en
distintos espacios independientes los unos de los otros, de modo que en cada espacio se
coloca una página distinta que se codifica en un fichero HTML distinto.
Los frames, como decíamos, nos permiten partir la ventana del navegador en diferentes
áreas. Cada una de estas áreas son independientes y han de ser codificadas con archivos
HTML también independientes. Como resultado, cada frame o marco contiene las
propiedades específicas que le indiquemos en el código HTML a presentar en ese
espacio. Así mismo, y dado que cada marco es independiente, tendrán sus propias barras
de desplazamiento, horizontales y verticales, por separado.
Existen en la web muchas páginas que contienen frames y seguro que todos hemos
tenido la ocasión de conocer algunas. Se suelen utilizar para colocar en una parte de la
ventana una barra de navegación, que generalmente se encuentra fija y permite el acceso
a cualquier zona de la página web. Una de las principales ventajas de la programación
con frames viene derivada de la independencia de los distintos frames, pues podemos
navegar por los contenidos de nuestro web con la barra de navegación siempre visible, y
sin que se tenga que recargar en cada una de las páginas que vamos visitando.
20
Un ejemplo de las áreas que se pueden construir en una construcción de frames se puede
ver en las imágenes siguientes.
Dicha definición está compuesta por etiquetas <FRAMESET> y <FRAME>, con las que se
indicamos la disposición de todos los cuadros. La etiqueta <FRAMESET> indica las
particiones de la ventana del navegador y la etiqueta <FRAME> indica cada uno de los
cuadros donde colocaremos una página independiente.
Las particiones que se pueden hacer con un <FRAMESET> son en filas o columnas. Por
ejemplo, podríamos indicar que deseamos hacer una división de la página en dos filas, o
dos columnas, tres filas, etc. Para indicar tanto la forma de partir la ventana -en filas o
columnas- como el número de particiones que pretendemos hacer, se ha de utilizar el
atributo COLS o ROWS. El primero sirve para indicar una partición en columnas y el
segundo para una partición en filas.
En el atributo COLS o ROWS -sólo podemos elegir uno de los dos- colocamos entre
comillas el número de particiones que deseamos realizar, indicando de paso el tamaño
que va a asignarse a cada una. Un valor típico de estos atributos sería el siguiente:
cols="20%,80%"
Indica que se deben colocar dos columnas, la de la izquierda tendría un 20% del espacio
total de la ventana y la de la derecha un 80%.
rows="15%,60%,25%"
Así indicamos que deseamos tres filas, la de arriba con un 15% del espacio total, la del
medio con un espacio correspondiente al 60% del total y la de abajo con un 25%. En total
suman el 100% del espacio de la ventana.
Además del porcentaje para indicar el espacio de cada una de las casillas, también
podemos indicarlo en pixeles. De esta manera.
cols="200,600"
Para indicar que la columna de la izquierda debe tener 200 pixels de ancho y la de la
derecha 600. Esto está bien si nuestra ventana tiene 800 pixels de ancho, pero esto no
tiene porque ser así en todos los monitores de los usuarios, por lo que este modo de
expresar los marcos es importante que se indique de la siguiente manera.
cols="200,*"
21
Así indicamos que la primera columna ha de medir 200 pixels y que el resto del espacio
disponible -que será mayor o menor dependiendo de la definición de la pantalla del
usuario- se le asignará a segunda columna.
Una vez hemos indicado el número de filas o columnas y el espacio reservado a cada una
con la etiqueta <FRAMESET>, debemos especificar con la etiqueta <FRAME> la
procedencia de cada uno de los frames en los que hemos partido la ventana.
Para ello, disponemos del atributo SRC, que se ha de definir para cada una de las filas o
columnas. De esta manera.
<FRAME src="marco1.html">
Así queda indicado que el frame que estamos definiendo debe mostrar la página
marco1.html en su interior.
Ejemplo de la creación de un frame simple para ilustrar lo aprendido hasta ahora.
Para ilustrar todo lo que venimos explicando podemos ver el ejemplo sobre cómo se
crearía la definición de frames de la imagen que podemos ver a continuación.
<html>
<head>
<title>Definición de Frames</title>
</head>
<frameset rows="15%,*,75">
<frame src="pagina1.html">
</frameset>
</html>
Además tenemos algunas consideraciones que hacer para terminar de comprender este
ejemplo:
• El título de la definición de frames es el que hereda toda la página web, por ello,
no es buena idea titular como "definición de frames" por ejemplo, ya que entonces
22
toda nuestra página se titularía así y seguramente no sea muy descriptivo. Si

estuviésemos haciendo una página para la carnicería pepe sería mejor titular a la
definición de frames algo como "Carnicería Pepe, las mejores carnes en Madrid".
• La página que define los frames no tiene body. HTML puede arrojarnos un error si
lo incluimos.
• Las páginas "pagina1.html", "pagina2.html"y "pagina3.html" han de escribirse en
archivos independientes con el nombre indicado. En este ejemplo, dichas páginas
deberían encontrarse en el mismo directorio que la declaración de frames. Si
especificamos una ruta para acceder al archivo podemos colocarlo en el directorio
que deseemos.
• Los colores de cada uno de los frames los hemos colocado con el atributo bgcolor
colocado en la etiqueta <BODY> de cada una de las páginas que se muestran en
los marcos.
FRAMES - UNA PÁGINA EN CADA MARCO
Vemos cómo serían las distintas páginas independientes que componen un sitio
creado con frames.
Las páginas que mostraremos en cada marco son documentos HTML iguales a los que
venimos creando anteriormente. Podemos colocar cualquier elemento HTML de los
estudiados en este manual, como etiquetas de párrafo, imágenes, colores de fondo, etc.
Cada documento, como ya hemos indicado, se escribe por separado en su propio archivo
HTML. Para el ejemplo del capítulo anterior podemos definir los archivos HTML de la
siguiente manera.
pagina1.html
Es la página que contiene el titular de la web. Simplemente se trata de una etiqueta <H1>
de titular. La página tiene su propio título, con la etiqueta <TITLE>, que no se podrá
visualizar por ningún sitio a no ser que se muestre esta página sin los frames, ya que las
páginas dentro de los marcos heredan el título de la definición de los frames.
<html>
<head>
<title>Titulo Carnicería Pepe</title>
</head>
<body bgcolor="#DECC09">
<h1 align=center>Carnicería PEPE</h1>
</body>
</html>
pagina2.html
Es la página que se presentará en el área principal de la definición de frames, es decir, la
página que tiene más espacio para visualizarse y donde pondremos los contenidos de la
web. En este caso muestra un mensaje de bienvenida a la web, que hará las veces de
23
portada.
<html>
<head>
<title>Portada de Carnicería PEPE</title>
</head>
<body bgcolor="#CF391C" text="#ffffff">
<h1 align="center">Bienvenidos a nuestra web</h1>
<br>
<br>
La carnicería PEPE, con más de 100 años de experiencia, es la mejor fuente de carnes
de vacuno y cerdo de la comunidad. <br>
<br>
Tanto en invierno como en verano puede encontrar nuestras ofertas de temporada de
primera calidad.
</body>
</html>
pagina3.html
En esta página se mostrará la barra de navegación por los contenidos del sitio. Contiene
enlaces que deberían actualizar el contenido del área principal de la declaración de
frames, para mostrar los distintos contenidos del sitio, por ejemplo, la portada, los
productos, la página de contacto, etc.
<html>
<head>
<title>Barra de navegación de carnicería PEPE</title>
</head>
<body bgcolor="#AC760E" link="ffffcc" vlink="ffffcc">
<div align="center">
<b>
<a href="pagina2.html">Portada</a>
<a href="productos.html">Productos</a>
<a href="contacto.html">Contacto</a>
</b>
</div>
</body>
</html>
24
FRAMES - DIRIGIR LOS ENLACES
Explicación sobre cómo dirigir el enlace al frame que deseemos que actualice, que
no tiene porque ser el mismo donde está situado.
La única particularidad destacable en el ejemplo del capítulo anterior, y en el manejo de

frames en general, se trata de que cada uno de los enlaces que colocamos en las
páginas actualizan el frame donde está colocado este enlace. Por ejemplo, si
tenemos enlaces en la parte inferior de la ventana, en el espacio correspondiente al tercer
marco, actualizarán los contenidos del tercer frame, que es donde están situados los
enlaces.
Este efecto que comentamos se puede observar en el ejemplo de la página de la

carnicería, tal como quedaría al incluir los códigos de las distintas páginas.
Lo lógico es que al pulsar sobre un enlace de la barra de navegación actualicemos el

frame principal, que es donde habíamos planeado colocar los contenidos, en lugar del
frame donde colocamos la barra de navegación, que debería mantenerse fija. Para
conseguir este efecto debemos hacer un par de cosas:
1. Darle un nombre al frame que deseamos actualizar

Dicho nombre se indica en la etiqueta <FRAME> de la definición de frames. Para
ello utilizamos el atributo name, igualado al nombre que le queremos dar a dicho
marco.
2. Dirigir los enlaces hacia ese frame
Para ello debemos colocar en el atributo target de los enlaces -etiqueta <A>- el
nombre del frame que deseamos actualizar al pulsar el enlace.
Después de darle un nombre al frame principal, nuestra declaración de frames

quedaría de la siguiente manera.
<frameset rows="15%,*,75">
<frame src="pagina2.html" name="principal">
</frameset>
Además, deberíamos colocar el atributo target a los enlaces, tal como sigue.
<a href="pagina2.html" target="principal">Portada</a>

|
<a href="productos.html" target="principal">Productos</a>
|
<a href="contacto.html" target="principal">Contacto</a>
25
Una vez realizados este par de cambios podemos ver como los enlaces de la barra de
navegación sí actualizan la página que deben.
Valores para el atributo target
Como hemos visto, con el atributo target de la etiqueta <A> podemos indicar el nombre
del frame que deseamos que actualice ese enlace. Sin embargo, no es este el único valor
que podemos aplicarle al atributo. Tenemos algunos valores adicionales que podemos
asignar a cualquier enlace en general.
_blank
Para hacer que ese enlace se abra en una ventana a parte. Nuestros ejemplos en este
manual se suelen abrir en una ventana a parte, colocando este valor en el target de los
enlaces que llevan a los ejemplos.
_self
Se actualiza el frame donde está situado el enlace. Es el valor por defecto.
_parent
El enlace se actualiza sobre su padre o sobre la ventana que estamos trabajando, si es
que no hay un padre.
_top
La página se carga a pantalla completa, es decir, eliminando todos los frames que pudiera
haber. Este atributo es muy importante porque si colocamos en nuestra página con
frames un enlace a una página externa, se abriría en uno de los frames y se mantendrían
visibles otros frames de la página, haciendo un efecto que suele ser poco agradable,
porque parece que están evitando que nos escapemos.
La sintaxis de uno de estos valores de atributos colocados en un enlace sería la siguiente.
<A href="http://www.guiarte.com" target="_top">Acceder a guiarte.com</A>
FRAMES - ANIDAR FRAMES
Explicamos como se crean estructuras con frames más complejas: anidación de

frames.
Para crear estructuras de marcos en las que se mezclen las filas y las columnas debemos
anidar etiquetas <FRAMESET>. Empezando por la partición de frames más general,
debemos colocar dentro las particiones de frames más pequeñas. La manera de indicar
esto se puede ver fácilmente con un ejemplo.
26
Los pasos para definir la anidación se pueden encontrar a la derecha.

Los distintos frames vienen numerados con el orden
en el que se escriben en el código.
En la imagen se puede ver el resultado final acompañada de la representación sobre la

manera de definirlos. En primer lugar definimos una estructura de frames en dos
columnas y dentro de la primera columna colocamos otra parcición de frames en dos filas.
El código necesario es el siguiente.
<frameset cols="200,*">
<frameset rows="170,*">
</frameset>
</frameset>
El ejemplo anterior se puede complicar un poco más si incluimos más particiones. Vamos
a ver algo un poco más complicado para practicar más con las anidaciones de frames.
Los pasos para definir la anidación se pueden encontrar a la derecha.

Los distintos frames vienen numerados con el orden
en el que se escriben en el código.
En la imagen se observa que el primer frameset a definir se compone de dos filas.

Posteriormente, dentro de la segunda fila del primer frameset, tenemos otra partición en
dos columnas, dentro de las que colocamos un tercer nivel de frameset con una definción
en filas en los dos casos. El código se puede ver a continuación.
<frameset rows="60,*">
27
<frameset cols="200,*">
<frameset rows="*,150">
</frameset>
<frameset rows="*,60">
</frameset>
</frameset>
</frameset>
MULTIMEDIA
Sonido en html
Cuáles son los ficheros que podemos ejecutar desde el navegador y cuales desde
un programa específico.
Formatos de sonido
A la hora de incluir ficheros de sonido en nuestras páginas web debemos distinguir entre
los que pueden ser directamente ejecutados por el navegador y aquellos que deben ser
abiertos por un programa propio, que deberá tener el usuario instalado en su equipo para
poder reproducir el fichero.
De forma general, podemos incluir en la web los siguientes tipos de ficheros de audio.
• WAV (Wave form Audio File format): formato típico de la casa Windows, de
elevada calidad, usado en las grabaciones de CDs, que trabaja a 44 Khz y a 16
bits. Consta básicamente de tres bloques: el de identificación, el que especifica los
parámetros del formato y el que contiene las muestras. Su principal inconveniente
es el elevado peso de los ficheros, por lo que su uso queda limitado en Internet a
la reproducción de ruidos o frases cortas. La extensión de estos ficheros es .wav.
Es soportado por Internet Explorer y Netscape 4x.
• AU (Audio File format): formato creado por la casa Apple para plataformas MAC,
cuyos ficheros se guardan con la extensión .au
• MIDI formato de tabla de ondas, que no guardan el sonido a reproducir, sino un

código que nuestra tarjeta de sonido tendrá que interpretar. Por ello, este tipo de
ficheros no puede almacenar sonidos reales, como voces o música rela grabada;
sólo puede contener sonidos almacenables en tablas de ondas. Como
contarpartida, los ficheros MIDI, que se guardan con extensión .mid, son de
pequeño tamaño, lo que los hace idóneos para la web. Es soportado por Internet
Explorer y Netscape 4x.
28
• MP3 (MPEG 1 Layer 3): desarrollado por el MPEG (Moving Picture Expert Group),
obtiene una alta compresión del sonido y una muy buena calidad basándose en la
eliminación de los componentes del sonido que no estén entre 20 hz y 16 Kh (los
que puede oir el ser humano normal). Tiene en cuenta el sonido envolvente
(surround) y la extensión multilingüe, y guarda los ficheros con la extensión .mp3, y
permite configurar el nivel de compresión, consiguiéndose calidades similares a las
del formato WAVE pero con hasta 10 veces menos tamaño de fichero. Es
soportado directamente sólo por Internet Explorer 5.5 y superiores.
• MOD especie de mezcla entre el formato MIDI y el formato WAV, ya que por un
lado almacena el sonido en forma de instrucciones para la tarjeta de sonido, pero
por otro puede almacenar también sonidos de dintrumentos musicales
digitalizados, pudiendo ser interpretados por cualquier tarjeta de sonido de 8 bits.
No es un formato estándar de Windows, por lo que su uso es más indicado para
sistemas Mac, Amiga o Linux. La extensión de los ficheros es .mod
• µ-Law Format de calidad similar al formato WAV, es original de las máquinas

NeXt, y guarda sus ficheros con la extensión .au
• Real Audio de calidad media, aunque permite ficheros muy comprimidos, que
guarda con extensión .rmp o .ra. Para su reproducción hace falta tener instalado el
plugin Real Audio.
A la hora de trabajar con estos formatos de sonido, deberemos tener en cuenta las
limitaciones en su uso, ya que muchos de ellos no pueden ser reproducidos más que en
sistemas operativos concretos, y aún así, con plugins o programas específicos.
En busca de la compatibilidad, si usamos Windows como sistema operativo conviene usar

para ficheros musicales a reproducir directamente en el navegador los formatos WAV y
MIDI, que son los más compatibles.
En cambio, si lo que deseamos es poder brindar a nuestros visitantes la opción de

navegar con música ejecutable desde un programa externo, lo mejor es usar ficheros en
formato MP3, ya que en la actualidad la mayoría de los navegantes tienen instalado en su
equipo algún programa reproductor adecuado, pudiendo valer desde software incluido en
Windows, como Windows Media Player, hasta aplicaciones externas, como Winamp. En
este caso, basta colocar un enlace normal en nuestras páginas, apuntando al fichero de
sonido.
Como ejemplo, si queremos enlazar en nuestra página un fichero MP3, bastaría con
escribir:
<a href="sonidos/mp3.mp3" target="_blank"> Pincha aquí para oir la música. </a>
Que nos da:
Pincha aquí para oir la música
29
Con esto, al pinchar el usuario el enlace, se lanzará la aplicación que tenga asociada con
el tipo de fichero MP3, que dependerá de la configuración interna de cada navegador y
usuario.
Un caso especial es Netscape 6x. Casi no admite directamente ningún tipo de formato de
sonido incrustado en la página, al no venir configuradas por defecto las aplicaciones o
plugins necesarios. Y en el caso de ficheros enlazados, Nestscape 6x suele lanzar su
propio reproductor, que suele ser de la casa AOL, precisando para la ejecución una serie
de pasos para darse de alta en esa compañia como usuario del software.
Resumiendo: cada usuario tendrá configurada su máquina de forma particular, soliendo

prevalecer el último software de sonido instalado, ya que estos programas suelen
adueñarse de ciertos tipos de ficheros para su ejecución automática. Entre las apliaciones
posibles de ejecución de ficheros de audio, bien de forma directa o en forma de plugina
para los navegadores, destacan Windos Media Player, Real Player, Winamp, Quick time,
etc.
INCLUIR SONIDOS EN LA WEB.
Una vez elegidos nuestros ficheros de sonido, es hora de incluirlos en nuestra página
web. Lógicamente, para que un fichero de audio pueda ser reproducido por un navegador
es necesario que su máquina tenga incluida una tarjeta de sonido y un par de altavoces.
Existen diversas formas de incluir un fichero de audio en una página, formas que
dependen del tipo de fichero y del navegador usado, y podemos usar diferentes etiquetas
para cada una de ellas.
BGSOUND
La etiqueta bgsound incorpora sonidos de fondo en una página web, sonidos que se
ejecutan automáticamente al cargarse la página. Es una etiqueta propietaria de Microsoft,
por lo que sólo es interpretada por Internet Explorer, admitiendo los formatos de audio
MID y WAV, aunque generalmente también acepta AU y MP3, en versiones actuales del
navegador o mediante plugins de uso general.
Su sintaxis general, con sus atributos más importantes, es del tipo:
<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>
Donde:
• src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a

reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta
respecto el sistema de carpetas del servidor web o una URL completa que localice
el fichero en Internet.
• loop="l" determina el número de veces (l) que se debe ejecutar el fichero de

audio. Si le damos el valor infinito, el fichero se reproducirá indefinidamente.
30
• balance="b" determina el balance del sonido entre los dos altavoces del equipo,
es decir, la potencia o intensidad con que se oirá en cada uno de ellos (derecho e
izquierdo). Sus valores pueden estar entre -10,000 y +10,000, correspondiendo el
valor 0 a un balance equilibrado entre los dos altavoces.
• volume="v" fija el volumen al que se oirá el sonido, y sus valores pueden variar
entre -10,000 (mínimo) y 0 (máximo). No es soportado por los equipos MAC.
Ejemplo:
<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound>
La etiqueta bgsound admite muchas más propiedades (disabled, delay, id, class, controls,
etc.). Asímismo, esta etiqueta es accesible en Internet Explorer mediante código
JavaScript, pudiendo modificar en tiempo real sus propiedades balance, loop, src, y
volume, aunque ésta última sólo es accesible en plataformas PC.
VIDEO y AUDIO
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.
31
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.
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.
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" >
32

Manual Basico HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Basico HTML

Uploaded by

Copyright:

Available Formats

MANUAL DE HTML BASICO

ING. CLAUDIA RODRIGUEZ

ESTRUCTURA BÁSICA DE UN DOCUMENTO EN HTML ................................................ 3

ESTRUCTURA BÁSICA DE UN DOCUMENTO EN HTML

Todos los documentos en html deben tener la siguiente estructura:

*** Ahora comienza lo interesante, vamos a empezar a construir nuestra página de

Pulsa Guardar en el editor de textos para grabar en prueba.htm lo que acabamos de

Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar

A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la

Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a

<FONT SIZE=x> </FONT>

La longitud, SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no

<HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE>

El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos

Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en

Para poder representar un color en html, se deben utilizar 6 números hexadecimales.

Se pueden seleccionar los colores deseados desde el inicio del documento en la

TEXT es el color del texto.

LINK es el color del enlace.

También se puede cambiar el color sólo para un segmento deseado como:

*** Sigamos con nuestro ejemplo; cargamos el archivo prueba.htm y le agregamos lo

El mundo de las telecomunicaciones ha tenido un crecimiento acelerado

que fuera capaz de soportar un ataque externo durante la guerra fría,

Las modificaciones hechas a nuestro archivo deben ser evidentes. En la etiqueta

Para agregar una imagen en un documento se utiliza la etiqueta <IMG>.

Especifican la altura y la anchura de la imagen, cuyas unidades se dan en píxeles.

Se ha insertado un gráfico a nuestra página que debe aparecer centrado.

El poder verdadero de html radica en la capacidad de manejar hipertexto o hipermedios

*La computadora donde tenemos montada nuestra página.

La etiqueta encargada de establecer un enlace es:

Periódico USA Today

También es posible crear un enlace a través de una imagen en lugar de utilizar un

*** Vamos ahora a aplicar enlaces en nuestro ejemplo. Carga prueba.htm

El mundo de las telecomunicaciones ha tenido un crecimiento acelerado

* Más información sobre este tema en:

ESPACIOS Y SALTOS DE LINEA

Ejemplo Se vera como

Esto es una frase

Ejemplo Se vera como

Ejemplo Se vera como

Este texto tiene

Ejemplo Se vera como

<P Align=right>Este es un ejemplo de un párrafo Este es un ejemplo de párrafo de

<P Align=center>Este es un ejemplo de párrafo de Este es un ejemplo de párrafo de

<HR align= center size= 20 width=50%>

ATRIBUTOS DEL TEXTO

Atributo Etiqueta Ejemplo Resultado

<CENTER> Texto de prueba

size = valor Da al texto un tamaño en puntos determinado. size = + / - valor Da al texto un

Para incluir comentarios en la página Web se utiliza la etiqueta .

1 = Numéricamente. (1,2,3,4,... etc.)

a = Letras minúsculas. (a,b,c,d,... etc.)

A = Letras mayúsculas. (A,B,C,D,... etc.)

i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)

I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)

La etiqueta <IMG> tiene varios parámetros :

src = "imagen" Indica el nombre del fichero gráfico a mostrar.

width = tamaño Indica el ancho de la imagen en puntos o en porcentaje. Se usa para

hspace = margen Indica el numero de espacios horizontales, en puntos, que separarán la

Ejemplo Se vería como

<IMG src= "caution.gif" alt= "Cuidado !!" >

Si el navegador no pudiese visualizar el gráfico.....

<IMG src= "http://www.microsoft.com/iexplorer.gif" >