Está en la página 1de 0

En este manual aprenders a crear pginas web con Html, desde qu tipo de programas podemos

usar para crearlas, hasta como usar frames, introducir msica o videos en una pgina web.
Ten paciencia, ya que algunas cosas no son difciles de entender, pero requieren ms esfuerzo. Si
no llegaras a entender algo, trata de leerlo nuevamente y, sino, entra a algn foro y expn tu
problema. De ltima, mndame un e-mail y te contesto en el momento, a menos que sea sbado.
Incluye algunas imgenes (carpeta Images) y ejemplos (carpeta Samples) para que comprendas
mejor. Para no confundirse, los cdigos estn en color verde oscuro y las etiquetas en negrita. Este
manual no es copiado, lo hice yo, as que si lo ves en otro lugar avsame.
Algunos efectos de los cdigos, puede ser que no se realicen correctamente, o ni siquiera se
realicen. Esto es debido al formato del manual, pero lo nico que tienes que hacer es copiar el
cdigo y pegarlo en cualquier archivo html.
Espero que te sea til.
Leo Juszkiewicz (X.Cyclop)

INDICE:
1. Qu programa debo usar?
2. Qu es Html?
3. Estructura y etiquetas
4. Mi primer pgina
5. Estilos de prrafos
6. Alineacin
7. Encabezados
8. Formato de texto
9. Atributos del texto
10. Atributos de <BODY>
11. Tipos de Listas
12. Enlaces - Links
13. Enlaces internos y locales
14. Enlaces remotos, e-mail y archivos
15. Imgenes
16. Tablas
17. Marquesina
18. Formularios
19. Frames
20. Insertar audio/video










1. Qu programa debo usar?

Para empezar a programar en Html, se necesita un programa en el cual puedas introducir tu cdigo
y as, crear la web. Existen varios programas (editores web) con los cuales puedes ayudarte, entre
los ms conocidos estn DreamWeaver, Frontpage y HomeSite. Sin embargo, el mejor sigue siendo
DreamWeaver por ser tan completo.
Existe tambin la posibilidad de usar el Bloc de Notas, el cual yo recomendara para que te aprendas
las etiquetas y no te las escribe el programa (yo aprend con el bloc de notas), pero la decisin es
tuya.
Bueno, ya sabes que programa puedes utilizar, ahora vers qu es exactamente el Html.


2. Qu es Html?

Html es el lenguaje con el que al escribir etiquetas creas la pgina web. Las pginas se visualizan
por medio de un navegador (Internet Explorer, Netscape, Opera...).
Con Html puedes crear tablas, colocar imgenes, reproducir audio y/o video, etc.
El Html no es el nico lenguaje que existe, es simplemente el bsico, ya que los dems lenguajes
como Php, Asp, Javascript... tambin requieren de algunos cdigos de Html para poder funcionar.
Debido a que hay distintos navegadores, a veces se pueden omitir o agregar cdigos para que otros
navegadores puedan tambin visualizar algn contenido.
Tal vez te estars preguntando Qu extensin es para lo archivos HTML?, bueno, pues pueden ser
dos tipos .htm - .html, cualquiera de las dos extensiones sirven, ya ser tu decisin cual poner.
Ahora, comienza con las etiquetas de Html.


3. Estructura y etiquetas

Como dije, Html es un lenguaje (de diseo web) que contiene etiquetas, las cuales permiten
configurar la web. Las etiquetas se escriben entre < > y (la mayora) tienen la etiqueta de cierre < / >,
que es la misma etiqueta solo que con la barra / entre los dos caracteres < > y el nombre de la
etiqueta. Lo que est entre las dos etiquetas recibe el efecto.
Para qu una etiqueta de cierre?, es para limitar la etiqueta, sea, como no quieres que todo este
subrayado (por ejemplo), donde ya no quieras que sea as cierras el efecto la etiqueta. La etiqueta
<u> y su etiqueta de cierre, </u>, indican subrayar un texto. Ejemplo:

<u> Text os subr ayado</ u> Text o Nor mal , el resultado es:

Texto subrayado Texto Normal


Las partes del documento:
Los documentos deben empezar con la etiqueta principal, que es <html>, y terminar con su etiqueta
de cierre </html>.
El encabezado, que es el ttulo de la pgina se escribe entre las etiquetas <head> y </head>. El
ttulo se escribe entre las etiquetas <title> y </title> dentro de la etiqueta <head>.
Y el contenido (cuerpo) de la pgina, entre <body> y </body>.
No importa si lo ponemos en maysculas o minsculas, lo importante es que el cierre sea igual a
como se abri, pero es recomendable poner todo en minsculas por cuestiones de interpretacin
(forma de visualizar) con los navegadores. Todo esto quedara as:

<ht ml >
<head> <t i t l e> T t ul o de mi pgi na </ t i t l e> </ head>
<body>
Aqu
va el cont eni do de mi
pgi na
</ body> </ ht ml >




4. Mi primer pgina

Ya tienes los conceptos para empezar a crear la primera pgina. Ahora, vamos a crear una pgina
pequea con texto en negritas y con espacio de una lnea. La etiqueta <b> indica texto en negrita, y
la etiqueta <p> indica salto de lnea (deja una lnea de separacin).
El cdigo es este:

<ht ml >
<head>
<t i t l e>Msi ca</ t i t l e>
</ head>
<body>
<p><b>Bi enveni do, </ b></ p>
<p>Est as en l a mej or pgi na. </ p>
<p>La mej or msi ca sol o aqu . </ p>
</ body>
</ ht ml >

Copia y pega este cdigo en tu editor y gurdalo con un nombre con extensin .htm - .html (pag.html,
por ejemplo). Comprueba el resultado de estas dos etiquetas.

Nota: Te recomiendo no usar espacios, maysculas o caracteres especiales (# $ % ) en el nombre
del archivo, para evitar problemas de lectura con el navegador.
Podras utilizar guiones bajos ( _ ) para reemplazar a los espacios y nombrar a tu archivo algo como:
pagina_principal.html

Ya tienes una sencilla pgina creada con texto en negritas y con espacios. Ahora ve en la siguiente
imagen lo que has puesto:



Si haces click con el botn derecho del mouse y seleccionas Ver Cdigo Fuente (o en el men
seleccionas Ver | Cdigo Fuente) puedes ver el cdigo (con el bloc de notas) que hay escrito para
esa pgina. Ese cdigo es el interpretado por el navegador, por eso, cuando visualizas una pgina
en otro lenguaje, como Php, Asp, Cgi, siempre te mostrar el cdigo Html (y, Javascript, si es que
hay) y nunca el cdigo del lenguaje. Esto es porque ese tipo de lenguajes, se llaman Lenguajes del
lado servidor, por lo que su cdigo es interpretado y escondido de esa manera por el navegador,
por seguridad de la pgina.

Importante: La pgina principal de tu sitio, sea, la primer pgina que aparece, debes nombrarla
index seguida de un punto y el tipo de extensin (en este caso .htm o .html),
as: index.html o index.htm


5. Estilos de prrafos

Resulta comn querer separar prrafos por medio de espacios. Antes, viste que la etiqueta <p>
dejaba una lnea en blanco y despus se escriba el texto, pero esta no es la nica etiqueta que
puede hacer esto. Existe tambin la etiqueta <br> que deja una lnea de espacio. Se puede repetir la
etiqueta varias veces, para dejar dos o ms lneas de espacio. Ejemplo:
Text o 1<br > Text o 2<br ><br >Text o3, resultado:

Texto 1
Texto 2

Texto 3

Tambin se puede colocar una lnea para separar. Esto es con la etiqueta <hr> y se puede ponerle
el tamao con la propiedad size, el ancho con width y el color con color, ejemplo:
<hr si ze=" 3" col or =" pur pl e" wi dt h=" 75%" >, resultado:

Nota: Las etiquetas <br> y <hr> son unas de las etiquetas que no tienen etiqueta de cierre,
as que no es necesario poner lo que sera </br> o </hr>.


6. Alineacin

Ya sabes como dejar espacio, pero falta algo que es la alineacin. Yo quiero que despus de dejar el
espacio en blanco se escriba el texto al centro, o a la derecha. Para esto estn dos etiquetas <p>,
que adems de dejar espacio en blanco, puede alinear, y la otra etiqueta es <div>. Usando alguna
de estas dos etiquetas y agregando un atributo llamado align, seguido del signo = y despus la
posicin escrita en ingls (left, right, center) entre comillas ( " ).
Ve el ejemplo para entenderlo mejor:
<p al i gn=" cent er " >Text o Cent r ado</ p>, resultado:

Texto Centrado

Tambin se puede hacerlo con la otra etiqueta, <div>:
<di v al i gn=" cent er " >Text o cent r ado</ di v>, resultado:
Texto Centrado

Consejo: No olvides de poner las comillas ( " ) al valor del atributo, es decir, si alineas un texto al
centro poner entre comillas center.
Esto es porque algunos navegadores no reconocen el valor, aunque en la mayora de los casos no
sea as.

Nota: No es necesario agregar el valor left a un atributo de alineacin, sea, nunca deberas poner
por ejemplo: <div align=" left" >, debido a que predeterminadamente todo se alinea a la izquierda
sin tener que indicarlo.


7. Encabezados

Los encabezados son como estilos predeterminados de texto. La etiqueta para hacerlo es <h ms el
nmero> y que ste nmero est entre 1 y 6, ms su etiqueta de cierre (</h ms el nmero>). Ve
un ejemplo para entender:
<h3>Encabezado 3</ h3>, resultado:

Encabezado 3
Aqu se ven todos los encabezados del ms chico (6) al ms grande (1):
Encabezado 6
Encabezado 5
Encabezado 4
Encabezado 3
Encabezado 2
Encabezado 1


8. Formato de texto
A veces, se quiere que algn texto resalte en nuestra pgina, podemos hacerlo ms grande
aumentando el tamao de la fuente (lo que veremos en el prximo captulo), pero lo ms correcto
sera ponerlo en negrita, cursiva, subrayado o tachado.
Explico cada una de estas etiquetas:

Negrita: La etiqueta correspondiente puede ser una de estas dos <b> o <strong> (y su etiqueta de
cierre), b proviene de la palabra en ingls bold, que significa negrita.
Importante: Hay una diferencia entre el uso de <b> y <strong>, aunque
normalmente el efecto es el mismo. La etiqueta <b> indica que el texto sea
en negrita y la etiqueta <strong> indica que el texto est resaltado, y para
algunos navegadores no quiere decir que est en negrita, podr ser
subrayado, cursiva o tachado.
Subrayado: Como ya mencion anteriormente, esto se hace con la etiqueta <u> (y la etiqueta de
cierre), la u que proviene de la palabra en ingls underlined, significa subrayado.
Cursiva: Tambin conocida como itlica. sta tambin tiene dos etiquetas <i> o <em> (y la etiqueta
de cierre), aunque normalmente encontrars la etiqueta <i>. La i, proviene de la palabra en ingls
italic, que significa itlica.
Subndices y suprandices: Estos se usan normalmente para frmulas. La etiqueta para los
subndices es <sub> y para los suprandices es <sup> (y las etiquetas de cierre). Ve un ejemplo de
sto:
<sup>13</ sup>CC H<sub>2</ sub>O, resultado:
13
CC H
2
O
Tachado: Esto normalmente se usa para mostrar que una frase o una(s) palabra(s) est(n)
incorrecta(s), la etiqueta es <strike> (y su cierre). Strike, en ingls, significa tachar.
Seguro te ha surgido una pregunta... Cmo hago para que una parte del texto est en cursiva y
todo el texto est en negrita? Bueno, esto se hace poniendo una etiqueta dentro de otra, la etiqueta
<i> dentro de la <b> y cerrando primero la etiqueta que pusimos al final. Un ejemplo para entender:
<b>Text o en negr i t a <i >Text o en cur si va y negr i t a</ i ></ b>, resultado:
Texto en negrita Texto en cursiva y negrita

Ahora yo te pongo un ejemplo ms difcil, ya sabes que a mi me gusta complicrmela y, a veces,
complicrsela a los dems: Haz un texto todo subrayado con una palabra en negrita, dos tachadas,
cinco palabras en cursiva y la frmula del agua.
Cdigo: <u><b>Negr i t a</ b> <st r i ke>Dos Tachadas</ st r i ke> <i >Las Ci nco
pal abr as en Cur si va</ i > Y l a f r mul a del agua H<sub>2</ sub>O</ u>, resultado:
Negrita Dos Tachadas Las Cinco palabras en Cursiva Y la frmula del agua H
2
O


9. Atributos del texto
En este captulo aprenders a darle color a un texto, modificar el tamao y el tipo de letra (fuente). La
etiqueta que se debe usar es <font> (y su etiqueta de cierre) con los atributos color, face (tipo de
letra) y size (tamao). Esto se puede mejorar notablemente con el lenguaje de diseo Css, mejor
conocido como Hojas de estilo cascada Cascading Style Sheets, pero por el momento lo hars con
puro Html.
Explico los diferentes atributos de esta etiqueta:
Face: Indica el tipo de letra que se le quiere dar al texto. Hay muchos tipos de fuentes, entre las ms
conocidas o ms usadas, se encuentran Times New Roman, Arial y Verdana.
A veces, es recomendable poner varias fuentes separadas por comas ( , ), debido a que cada
navegador dispone de otros tipos de fuentes y puede no reconocer alguna fuente, mostrando la que
reconozca o, simplemente le que tiene por default. Esto se indica despus del signo =, y entre
comillas ( " ) el valor de la fuente. Ejemplo:
<f ont f ace=" Ver dana, Comi c Sans Ms, Ar i al " >Fuent es Ar i al - Ver dana - Comi c
Sans MS</ f ont >, resultado:
Fuentes Arial - Verdana - Comic Sans MS
As, el navegador comprobar que est disponible la primera fuente, sino se va a la segunda, as...
hasta encontrar una fuente que est disponible y reconozca. Si ya no hay fuentes disponibles para
este navegador, pone la predeterminada (que es Times New Roman, normalmente).
Size: Este atributo indica el tamao del texto. Los valores pueden ser del 1 al 7 y se escriben como
cualquier valor, despus del signo = y entre comillas ( " ) el valor. Ejemplo:
<f ont si ze=" 5" >Text o con t amao 5</ f ont >, resultado:
Texto con tamao 5
Color: Este atributo indica el color del texto. Hay dos formas de indicar el color que se desea poner:
1. Escribiendo el nombre del color que se quiere, pero en ingls, si se quiere que algo est en rojo el
valor del atributo color sera red.
2. Indicando el valor de RGB (Red Green Blue - Rojo Verde Azul) con numeracin hexadecimal (del
0 al 9 y de la A a la F) despus del signo de nmero ( # ). Este suele ser un poco ms complicado,
pero si se quiere indicar colores ms exactos debemos usar este mtodo.
Un valor se conseguira poniendo los valores RRGGBB. Ejemplo:
<f ont col or =" #FF00FF" > Text o r osa</ f ont >, resultado:
Texto rosa
Aqu tienes una tabla de la paleta de colores que se obtienen con distintos valores:

Tambin se podran incluir estos 3 atributos: <f ont col or =" #CC0000" si ze=" 4"
f ace=" Comi c Sans MS" >Text o con t odos l os at r i but os</ f ont >, resultado:
Texto con todos los atributos

10. Atributos de <BODY>
Hay algunos atributos que se aaden a <body> (y tambin a tablas, filas, celdas...) para cambiar el
color de fondo, poner una imagen como fondo, hacer ms grueso el margen, definir el color de un
enlace (mejor conocido como link), definir un color para todo el texto de la pgina... Adems de estos
hay mucho ms, pero por el momento solo usaremos stos. Los atributos son:
bgcolor: Sirve para poner un color fijo de la pgina. Como ya indiqu en el captulo anterior, se
indica con el nombre del color (en ingls) o el valor RGB. <body bgcol or =" #00CCFF" >
background: Coloca una imagen de fondo de la pgina, esta se repite varias veces hasta llenar toda
la pgina. Pueden ser fondos con extensin JPG, GIF, BMP o PNG (4 tipos de imgenes), solo se
escribe el nombre de la imagen, su extensin y su ruta en donde est ubicada (si es que est en una
carpeta distinta a la de donde est el archivo Html). <body backgr ound=" f ondo. j pg" >
Nota: Cuando se pone un fondo en una pgina, tambin se puede indicarle otro atributo, que es el
de fijar el fondo (este efecto solo funciona si hay ms espacio y tenemos que usar las barras de
desplazamiento).
<body background="fondo.jpg" bgproperties="fixed">
text: Indica el color para todo el texto de la pgina, que por defecto es el negro ( black - #000000 ).
Adems, se puede indicar el color de los enlaces (hipervnculos - links) para diferenciar del resto del
texto, por defecto vienen subrayados (esto se puede mejorar con Css):
link: El color del link normal, es decir, uno que no ha sido visitado (que no se ha hecho click sobre
l).
Por defecto es el azul ( #FF0000 ).
vlink: Es el color de un link visitado (que se ha hecho click).
Por defecto es el morado ( #800080 ).
alink: Indica el color de un enlace activo, quiere decir, cuando un enlace est presionado (este casi
no se nota).
Por defecto es el rojo ( #FF0000 ).
Tambin se puede indicar el margen de la pgina, quiere decir, desde donde se va a escribir. Los
valores debern ser en pxeles y son 4 propiedades:
leftmargin: Indica el espacio de los lados de la pgina (derecha e izquierda).
topmargin: Indica el espacio del borde superior e inferior.
marginwidth: Es el equivalente a leftmargin.
marginheight: Es el equivalente a topmargin.
<body l ef t mar gi n=" 2" t opmar gi n=" 2" mar gi nwi dt h=" 0" mar gi nhei ght =" 1" >
Importante: Las primeras dos propiedades (leftmargin y topmargin) son vlidas solo para el
navegador de Microsoft, Internet Explorer, y las otras dos (marginwidth y marginheight) son vlidas
para el navegador de Apple, Netscape.
Junta todas estas propiedades:
<body backgr ound=" . . / I mages/ backy. j pg" bgpr oper t i es=" f i xed" t ext =" #000099"
l i nk=" #FF0000" vl i nk=" #009900" al i nk=" #009900" t opmar gi n=" 8"
l ef t mar gi n=" 4" mar gi nwi dt h=" 4" mar gi nhei ght =" 8" >
<h3>Text o nor mal </ h3>
<a hr ef =" ht t p: / / mi cr osof t . com" >Ej empl o de Li nk</ a>
</ body>
Ve el resultado aqu.
Nota: La etiqueta <a> hace que un texto se convierta en enlace (hipervnculo), por ahora ignora esa
etiqueta. En este ejemplo se us para ver el efecto de las propiedades de <body>, ms adelante se
relatar ms sobre el uso de sta etiqueta.

11. Tipos de listas
Muchas veces queremos hacer una lista de nuestros productos, numerar captulos... Y todo sto se
puede hacer con distintos tipos de listas, en vez de numerar cada artculo-item:
Listas Desordenadas: Se usa la etiqueta <ul> (y la etiqueta de cierre). Ul proviene de las palabras
en ingls unorder list (lista desordenada). Cada elemento se pone con la etiqueta <li>, sin etiqueta
de cierre. Ejemplo:
<p>Pa ses di st r i bui dor es: </ p>
<ul >
<l i >Mxi co
<l i >Est ados Uni dos
<l i >Canad
</ ul >
</ p>
Resultado:
Pases distribuidores:
Mxico
Estados Unidos
Canad
Tambin podemos cambiar el tipo de vieta (el carcter de cada elemento). Hay tres tipos:
o circle
square
disc
stos se pueden poner con el atributo type, ya sea en la etiqueta <ul> o <li>:
<ul t ype=" squar e" >
<l i >Mxi co
<l i t ype=" ci r cl e" >Est ados Uni dos
<l i >Canad
</ ul >
Resultado:
Mxico
o Estados Unidos
Canad

Listas Ordenadas: Se hacen con la etiqueta <ol> (y su etiqueta de cierre). Ol proviene de la palabra
en ingls Ordered List (lista ordenada).
Como la otra lista, cada elemento se pone con <li>:
<p>Regl as: </ p>
<ol >
<l i >No f umar
<l i >No gr i t ar
<l i >Tener paci enci a
</ ol >
Resultado:
Reglas:
1. No fumar
2. No gritar
3. Tener paciencia
As como para la listas desordenadas se puede cambiar el tipo de vieta, en las listas ordenadas se
puede cambiar el tipo de numeracin que se indique en el atributo type. Pueden ser:
1 Ordena con nmeros
a Ordena alfabticamente en minsculas
A Ordena alfabticamente en maysculas
i Ordena con nmeros romanos en minsculas
I Ordena con nmeros romanos en maysculas
<p>Or denamos por numer os</ p>
<ol t ype=" 1" >
<l i >El ement o 1
<l i > El ement o 2
</ ol >

<p>Or denamos por l et r as</ p>
<ol t ype=" a" >
<l i >El ement o a
<l i > El ement o b
</ ol >
Resultado:
Ordenamos por nmeros
I. Elemento
II. Elemento
Ordenamos por letras
A. Elemento
B. Elemento
Si queremos que empiece a contar desde otro nmero, por ejemplo 10 o X en vez de 1 o I, lo
haramos con el atributo start seguido del nmero o letra por el que queramos empezar:
<p>Or denamos por nmer os r omanos empezando por el 10</ p>
<ol t ype=" i " st ar t =" 10" >
<l i >El ement o 10
<l i >El ement o 11
</ ol >

<p>Or denamos por nmer os r omanos empezando por el 10 ( en r omano) </ p>
<ol t ype=" i " st ar t =" 10" >
<l i >El ement o x
<l i >El ement o xi
</ ol >
Resultado:
Ordenamos por nmeros romanos empezando por el 10
10. Elemento
11. Elemento
Ordenamos por nmeros romanos empezando por el 10 (en romano)
x. Elemento
xi. Elemento
Junta los estilos y hace una lista mixta:
<p>Pa ses di st r i bui dor es</ p>
<ul >
<l i >Candad
<ol >
<l i >Tor ont o
<l i >Cal gar y
</ ol >
<l i >Est ados Uni dos
<ol >
<l i >Nueva Yor k
<l i >Los Angel es
<l i >Mi ami
</ ol >
</ ul >
Resultado:
Pases distribuidores
Candad
1. Toronto
2. Calgary
Estados Unidos
1. Nueva York
2. Los Angeles
3. Miami

12. Enlaces Links
Un enlace (o link) puede ser para ver otra pgina, descargar uno o varios archivo, o ir a otro sitio. Los
enlaces se pueden identificar si el texto es de otro color o al pasar el mouse sobre un enlace se
produce un efecto (cambia de color, se subraya...).
Tambin se puede enlazar una imgen, es decir, que una imagen sustituya al texto (enlace) y al
presionar sobre sta nos lleve a otra pgina. Para hacer un enlace se usa la etiqueta <a> (y la
etiqueta de cierre), seguida de la propiedad href, que su valor ser el enlace.
Como dije, existen varios tipos de enlaces:
Internos: Nos llevan a otras partes dentro de la misma pgina.
Locales: Son los enlaces que nos dirigen a otras pginas del mismo sitio.
Remotos: Nos dirigen a otro sitio o a una pgina de otro sitio (sitio externo al nuestro).
E-Mail: Como dice, enva un mensaje a un e-mail.
Archivos: Sirven para descargar o ver archivos (exe, doc, pdf, mp3, mpg).

13. Enlaces internos y locales
Internos: Este tipo de enlaces nos manda a una parte de la pgina en la que estamos.
Normalmente, se usan cuando una pgina es muy grande y se necesita ir a una parte especfica.
Esto se hace con la etiqueta <a>, la propiedad href, despus el signo de nmero ( # ) y el nombre
que colocaremos en la parte donde queramos que vaya el visitante. Ejemplo:
<a hr ef =" #t ext o" >I r al t ext o</ a>y en la parte donde queramos ir <a
name=" t ext o" ></ a>
Ver el resultado.

Locales: Los sitios web estn formados de pginas que muestran diferentes contenidos. Las
propiedades de la etiqueta son las mismas que en los enlaces internos, pero sin el signo de nmero
(a menos que en la otra pgina queramos abrirla e ir a una parte especfica).
Se tendra que escribir el nombre del archivo seguido de un punto y la extensin. Entre la etiqueta se
deber escribir el texto que aparecer y ser el enlace. Ejemplo:
<a hr ef =" 1. ht ml " >I r al ej empl o de Body</ a>, resultado: Ir al ejemplo de Body.
Si hay pginas en otro directorio (o carpeta), se debe poner el nombre de la carpeta, despus una
barra ( / ) y la pgina. Ejemplo:
<a hr ef =" I mages/ t i t ul o. png" >Ver l ogo del manual </ a>, resultado: Ver logo del
manual.
Si tenemos un archivo (cualquier tipo) en una subcarpeta y queremos enlazar a una imagen (o
cualquier otro tipo de archivo) que est en la carpeta principal u otra subcarpeta, deberamos poner
en la ruta dos puntos ( .. ), seguida de la carpeta que contiene el archivo y despus el nombre del
archivo. Podemos ver en la siguiente imagen un ejemplo de este manual:
Para enlazar desde indice.html a excavando.gif, pones <a
hr ef =" I mages/ excavando. gi f " >Enl ace</ a>

Para enlazar desde body.html a excavando.gif, pones <a
hr ef =" . . / I mages/ excavando. gi f >Enl ace</ a>
Si existiera una subcarpeta dentro de otra subcarpeta, por ejemplo, dentro de la
subcarpeta Samples, una subcarpeta Archivos, y dentro de esta hay un archivo, enlazando desde
body.html, ponemos dos puntos, una barra, dos puntos, otra barra y el nombre del archivo. Ejemplo:
<a hr ef =" . . / . . / Ar chi vos/ imagen.gif>I magen</ a>
Para ir a otra pgina e ir a una parte en especfico, pones el nombre de la pgina seguida del signo
de nmero y el nombre de la seccin. Ejemplo:
<a hr ef =" i ndi ce. ht ml #I nd" >I r al i ndi ce</ a>
Existe un atributo ms, que al pasar el mouse por algn enlace, aparece un texto. El atributo es title
y el valor es el texto que se quiera mostrar:
<a hr ef =" #" t i t l e=" Text o del enl ace" >Enl ace</ a>

14. Enlaces remotos, e-mail y archivos
Remotos: Este tipo de enlaces son para acceder a pginas que estn fuera de nuestros sitios. Es
igual que un enlace local, pero el URL (nombre del sitio) debe empezar por el protocolo HTTP:
http://. Ejemplo:
<a hr ef =" ht t p: / / mi cr osof t . com" >Mi cr osof t </ a>, resultado: Microsoft.
Pero tambin tiene 4 propiedades, junto con el atributo target para abrir de distintas formas un
enlace:
blank: Esta propiedad hace que el enlace se abra en una pgina por aparte, una ventana nueva.
top: Se abre a pantalla completa, sin frames (marcos, que vers en los ltimos captulos).
self: Esta propiedad abre el enlace en la misma pgina en la que est, es la propiedad por defecto.
parent: El enlace se abre sobre su padre, si no hay un padre se abre en la misma pgina.

E-mail: Estos enlaces nos dirigen a una direccin de e-mail. Se coloca el atributo mailto: despus
del href, seguido del mail. Ejemplo:
<a hr ef =" mai l t o: pepe@gmai l . com" >pepe@gmai l . com</ a>, resultado: pepe@gmail.com.

Tambin se puede agregar el asunto y una copia para que se enve a otro mail, con las propiedades
subject?= y &cc. Ejemplo:
<a hr ef =" mai l t o: pepe@gmai l . com?subj ect =I nf or maci on de
pr oduct o&cci nf o@mi cr osof t . com" >pepe@gmai l . com</ a>, el resultado es el mismo
aparentemente, pero pon el mouse sobre el siguiente enlace y ve la barra de estado (abajo donde
normalmente dice Listo):
pepe@gmail.com
Importante: Este mtodo no es muy comn para enviar un e-mail, en el captulo 18 se detalla ms
sobre esto.

Archivos: Este tipo se usa para ver o descargar un archivo. Si es ZIP o EXE, al hacer click se
muestra un cuadro de dilogo para ver o descargar. Otros formatos de audio y/o video (mp3, mpg,
avi, wav, mov, wmv...) abren el programa predeterminado del usuario para reproducirlo. Para evitar
esto, podras poner un mensaje que diga "Haz click con el botn derecho del mouse sobre el enlace
y selecciona 'Guardar destino como...' para descargar el archivo". Vamos a ver cual es el cdigo para
decargar el Messenger Plus! (por ejempo):
<a hr ef =" ht t p: / / downl oad. msgpl us. net / f i l es/ MsgPl us- 361. exe" >Descar gar Msn
Pl us! </ a>, resultado: Descargar Msn Plus!

15. Imgenes
Sin duda alguna, lo mejor de una pgina web son las imgenes. Como dije, hay varios tipos de
imgenes: JPG, BMP, GIF y PNG.
La etiqueta para insertar una imagen es <img> (no tiene etiqueta de cierre) y sus propiedades son:
src: El nombre completo (con la extensin) de la imagen.
border: El grueso del borde para la imgen.
alt: El texto que se muestra al pasar el mouse sobre la imagen.
width: Ancho de la imagen (en pixeles o en porcentaje).
height: Alto de la imagen (en pixeles o en porcentaje).
vspace - hspace: Indica el espacio (en pixeles) libre de la imagen y lo que la rodea (texto, otra
imagen...)
Un ejemplo con todas estas propiedades:
<i mg sr c=" I mages/ excavando. gi f " al t =" Excavando" wi dt h=" 47" hei ght =" 46"
vspace=" 1" hspace=" 1" bor der =" 0" >, resultado:

Consejo: Intenta no agrandar tanto la imagen (especialmente con GIFs) de su tamao original, esto
puede ocasionar que pierda un poco de resolucin y calidad.
Se puede alinear una imagen agregando un <div> o <p> o la propiedad align dentro de la imagen
que justifica la imagen del lado que deseamos a la vez que ponemos texto en el lado opuesto:
<di v al i gn=" cent er " ><i mg sr c=" I mages/ excavando. gi f " bor der =" 0"
al t =" Excavando" ></ di v>
<p al i gn=" cent er " ><i mg sr c=" I mages/ excavando. gi f " bor der =" 0"
al t =" Excavando" ></ p>
Ejemplo del atributo align en una imagen:
<i mg sr c=" I mages/ excavando. gi f " bor der =" 0" al t =" Excavando" al i gn=" l ef t " >
Text o a l a der echa de l a i magen, por que el val or de al i gn es ' l ef t ' . . . . . . .
Aqu si gue el t ext o que se pone despus de l a i magen. .
Resultado:
Texto a la derecha de la imagen, porque el valor de align es 'left'.......
Aqu sigue el texto que
se pone despus de la imagen..

Se podra colocar una imagen como enlace, poniendo la imagen entre la etiqueta <a>:
<a hr ef =" ht t p: / / mi cr osof t . com" t ar get =" bl ank" ><i mg sr c=" I mages/ Usa. gi f "
bor der =" 0" ></ a>, resultado (click en la imagen):

Consejo: Pon el valor de 0 a la propiedad border, porque si la imagen es un enlace tendr el borde
de color de los enlaces de la pgina.

16. Tablas
Podemos pensar que las tablas no son necesarias porque no vamos a crear ninguna agenda, ni
listas, ni nada por el estilo que requiera una tabla. Pero las tablas no solamente hacen eso, nos
permiten colocar en partes de una pgina o de un espacio diferentes objetos. Un ejemplo de esto es
un men, como seguramente has visto en muchas pginas, el men est en una tabla.
Esto se logra con la etiqueta <table>, la etiqueta <tr> (crea filas) y la etiqueta <td> (crea columnas).
Veamos un ejemplo para entender mejor:
<t abl e>
<t r >
<t d> Cel da 1, f i l a 1- </ t d>
<t d>- Cel da 2, f i l a 1</ t d>
</ t r >
<t r >
<t d> Cel da 1, f i l a 2- </ t d>
<t d>- Cel da 2, f i l a 2</ t d>
</ t r >
</ t abl e>
Resultado:
Celda 1, fila 1- -Celda 2, fila 1
Celda 1, fila 2- -Celda 2, fila 2

Las tablas tienen varios atributos importantes:
border: Indica el tamao (en pixeles) del borde de la tabla (0 es sin borde).
cellspacing: Indica el espacio entre las celdas y filas (en pixeles).
cellpadding: El espacio desde el borde de la celda (en pixeles).
bgcolor: El color de fondo de la tabla.
background: Imagen de fondo de la tabla.
width: Ancho de la tabla (en pixeles o porcentaje).
height: Alto de la tabla (en pixeles o porcentaje).
bordercolor: Color del borde (si se puso un valor mayor o igual a 1 en border).
align: Alinea el texto de una celda (right o center).
Puedes ver la diferencia de cellpadding y cellspacing en la siguiente imagen:

La etiqueta <td>, que sirve para crear columnas, adems de las propiedades de las tablas (bgcolor,
background, width, height y align) tiene otras:
valign: Podemos escoger si queremos que el texto est alineado arriba (top), en medio (middle) o
abajo (bottom) en la celda (alineacin verticalmente).
colspan: Expande una celda horizontalmente.
rowspan: Expande una celda verticalmente.
Veamos un ejemplo con todos estos atributos:
<di v al i gn=" cent er " ><t abl e cel l paddi ng=" 4" cel l spaci ng=" 1" bor der =" 1"
bor der col or =" #999999" wi dt h=" 350" >
<t r bgcol or =" #DDEEFF" ><t d al i gn=" cent er " col span=" 2" >Cel da con col span
2</ t d></ t r >
<t r ><t d al i gn=" cent er " wi dt h=" 50%" >Cel da 1</ t d>
<t d al i gn=" cent er " wi dt h=" 50%" >Cel da 2</ t d></ t r >
</ t abl e>
<br >
<t abl e cel l paddi ng=" 2" cel l spaci ng=" 3" bor der =" 1" bor der col or =" #999999"
wi dt h=" 350" >
<t r ><t d al i gn=" cent er " val i gn=" t op" bgcol or =" #DDEEFF" r owspan=" 2" >Cel da
con r owspan=" 2" y val i gn=" t op" </ t d> <t d>Fi l a 1</ t d></ t r >
<t r ><t d>Fi l a 2</ t d<></ t r > </ t abl e></ di v>, resultado:


Podemos crear tablas dentro de otras, dentro de un <td> y que en vez de que las columnas sean
celdas, sern tablas, metiendo una tabla dentro de otra:
<di v al i gn=" cent er " ><t abl e cel l paddi ng=" 0" cel l spaci ng=" 0" bor der =" 1"
wi dt h=" 500" bor der col or =" #FF0000" ><t r bgcol or =" #FA5D00" >
<t d al i gn=" cent er " col span=" 2" >2 Tabl as en dent r o de un
<b>t d</ b></ t d></ t r >
<t r ><t d>
<t abl e cel l paddi ng=" 1" cel l spaci ng=" 0" bor der =" 0" wi dt h=" 250" ><t r
bgcol or =" #00CCFF" ><t d al i gn=" cent er " >Fi l a 1</ t d></ t r >
<t r bgcol or =" #00FF00" ><t d al i gn=" cent er " >Fi l a 2</ t d></ t r >
<t r bgcol or =" #00CCFF" ><t d al i gn=" cent er " >Fi l a 3</ t d></ t r >
<t r bgcol or =" #00FF00" ><t d al i gn=" cent er " >Fi l a 4</ t d></ t r ></ t abl e></ t d>

<t d val i gn=" t op" > <t abl e cel l paddi ng=" 0" cel l spaci ng=" 1" bor der =" 2"
bor der col or =" #111111" wi dt h=" 250" ><t r bgcol or =" #FFCC00" ><t d
al i gn=" cent er " >Fi l a 1</ t d></ t r >
<t r bgcol or =" #0000FF" ><t d al i gn=" cent er " >Fi l a 2</ t d></ t r >
</ t abl e>
</ t d></ t r ></ t abl e></ di v>, resultado:


17. Marquesina
Las marquesinas son palabras o frases que se desplazan de un lado a otro, ya sea horizontalmente
(izquierda a derecha o viceversa) o verticalmente (arriba hacia abajo o viceversa). Lo podemos usar
para noticias, imgenes, enlaces y todo lo que se quiera desplazar.
La etiqueta para sto es <marquee>, pero tambin se pueden agregar ms atributos:
direction: Indica la direccin hacia donde se desplazar el texto, up (hacia arriba), down (abajo), left
(izquierda) o right (derecha).
width: Indica el ancho de la marquesina (en pixeles o porcentaje).
height: Indica el alto de la marquesina (en pixeles o porcentaje).
scrollAmount: Velocidad a la que se desplaza el texto.
Ejemplo:
<di v al i gn=" cent er " ><mar quee scr ol l Amount =" 3" wi dt h=" 300" hei ght =" 90"
di r ect i on=" up" >Text o<br >despl azado<br >haci a<br >ar r i ba</ mar quee></ di v>
Ver el resultado.

Hay un atributo ms, que sirve para mover el texto de derecha a izquierda y de izquierda a derecha,
pero con ste, el texto no desaparece: alternate=behavior. Ejemplo:
<mar quee behavi or =" al t er nat e" >Text o de der echa a i zqui er da y de i zqui er da
a der echa</ mar quee>

Ver el resultado.

18. Formularios
Mediante el envo de formularios se pueden enviar datos de cualquier tipo, normalmente para enviar
un mensaje a un e-mail.
Para hacer esto se debera saber un poco sobre los lenguajes de lado servidor, ASP, CGI, JSP o
PHP, pero por el momento seguiremos con html.
La etiqueta para un formulario, es <form>, y sus atributos son los siguientes:
method: Indica el mtodo por el que se enviarn los datos. Existen 2:
POST: Enva datos por la entrada estndar STDIO (utilizado normalmente).
GET: Enva datos por medio de un URL (enlace).

action: Indica el e-mail a donde se enviarn los datos, o el nombre del archivo dependiendo del
lenguaje del lado servidor que se utilice.
Ejemplo:
<f or mact i on=" mai l @domi ni i o. com" met hod=" post " ></ f or m> o <f or m
act i on=" f or m. php" met hod=" post " ></ f or m>

ELEMENTOS:
Para enviar datos en un formulario se necesitan cuadros de texto. La etiqueta que se usa es <input>
(no tiene etiqueta de cierre) y tiene varios atributos:
type: Define el tipo de texto que se introduce en el cuadro, sus valores pueden ser:
text: Cualquier tipo de texto como el nombre, e-mail, direccin, estado
password: Se usa para ocultar las claves o datos confidenciales (al escribir en este,
muestra se muestran asteriscos ( * ).
hidden: Datos escondidos. Como puede ser el asunto, e-mail de destino (si se est
usando un servicio)...
button: Crea un botn.
image: Hace que una imagen sea el enlace (la imagen se muestra con el atributo src).
submit: Enva el formulario.
reset: Borra los caracteres que hay en los campos del formulario.
value: Indica el valor de un atributo o el nombre que se mostrar (en el cuadro de texto).
name: Nombre del campo.
maxlength: Indica el nmero mximo de caracteres para escribir.
size: Indica el tamao del cuadro de texto.

Ejemplo:
<f or mmet hod=" post " >
Nombr e <i nput t ype=" t ext " name=" nombr e" maxl engt h=" 10" si ze=" 15" >
Passwor d <i nput t ype=" passwor d" name=" cont r asea" maxl engt h=" 10"
si ze=" 15" >
<i nput t ype=" submi t " name=" envi ar " val ue=" Envi ar " >
<i nput t ype=" r eset " name=" Bor r ar " val ue=" Bor r ar Todo" >
</ f or m>
Resultado:

Si se quiere que una persona enve algn comentario o sugerencia, se puede poner un cuadro de
texto grande con la etiqueta <textarea>. Sus atributos son:
rows: Filas que tendr el cuadro.
cols: Columnas que tendr el cuadro.
Ejemplo:
<t ext ar ea col s=" 30" r ows=" 4" name=" coment ar i o" ></ t ext ar ea>


Resultado:




Listas de Opciones: Son listas en las que se pueden especificar una o varias opciones.
Se podran poner pases, asuntos... y que el usuario seleccione la adecuada. La etiqueta para hacer
esto es <select>, y cada opcin se define por la etiqueta <option>. Adems, deben contener los
atributos value y name, ejemplo:
<sel ect name=" pai s" >
<opt i on val ue=" Ar g" >Ar gent i na</ opt i on>
<opt i on val ue=" Br " >Br asi l </ opt i ont >
<opt i on val ue=" Ch" >Chi l e</ opt i on>
<opt i on val ue=" Eu" >Est ados Uni dos</ opt i on>
<opt i on val ue=" Mx" >Mxi co</ opt i on>
<opt i on val ue=" Vz" >Venezuel a</ opt i on>
</ sel ect >
Resultado:

Se puede seleccionar una opcin por defecto con el atributo selected en la opcin que queramos.
Podemos cambiar la lista de opciones para que se pueda seleccionar ms de una opcin. Esto se
hace con el atributo multiple y size (indica el nmero de valores a mostrar):
<sel ect name=" pai s" si ze=" 3" multiple>
<opt i on val ue=" Ar g" >Ar gent i na</ opt i on>
<opt i on val ue=" Br " >Br asi l </ opt i ont >
<opt i on val ue=" Ch" >Chi l e</ opt i on>
<opt i on val ue=" Eu" >Est ados Uni dos</ opt i on>
<opt i on val ue=" Mx" >Mxi co</ opt i on>
<opt i on val ue=" Vz" >Venezuel a</ opt i on>
</ sel ect >
Resultado:

Nota: Manteniendo presionada la tecla Ctrl o Shift se puede seleccionar ms de una opcin de la
lista.

Botones de opcin: Si se quiere que solo se pueda seleccionar una opcin, adems de las listas
desplegables, tenemos los botones en forma de crculo, mejor conocidos como radio buttons. Se
usa la etiqueta input, pero con el valor radio en el atributo type. Para seleccionar una opcin por
defecto, se usa el atributo checked:

<i nput t ype=" radio" name=" pai s" val ue=" Ar g" >Ar gent i na<br >
<i nput t ype=" radio" name=" pai s" val ue=" Br " >Br asi l <br >
<i nput t ype=" radio" name=" pai s" val ue=" Ch" >Chi l e<br >
<i nput t ype=" radio" name=" pai s" val ue=" Eu" >E. U. <br >
<i nput t ype=" radio" name=" pai s" val ue=" Mx" checked>Mxi co<br >
<i nput t ype=" radio" name=" pai s" val ue=" Vz" >Venzuel a<br >
Resultado:


Cuadros de seleccin: Adems de poner el valor multiple en las listas desplegables para poder
seleccionar ms de una opcin, se puede utilizar el elemento checkbox en el atributo type, y con el
atributo checked se selecciona una (o varias) opcin(es):

<i nput t ype=" checkbox" name=" pai s" val ue=" Ar g" > Ar gent i na
<i nput t ype=" checkbox" name=" pai s" val ue=" Br " > Br asi l
<i nput t ype=" checkbox" name=" pai s" val ue=" Ch" > Chi l e
<i nput t ype=" checkbox" name=" pai s" val ue=" Eu" > E. U.
<i nput t ype=" checkbox" name=" pai s" val ue=" Mx" checked> Mxi co
<i nput t ype=" checkbox" name=" pai s" val ue=" Vz" > Venezuel a

Resultado:


Un ejemplo de un formulario:
<f or mact i on=" mai l @domi ni o. com" met hod=" post " >
Nombr e: <i nput t ype=" t ext " name=" nombr e" si ze=" 15" maxl engt h=" 20" > <br >
E- Mai l : <i nput t ype=" t ext " name=" emai l " si ze=" 15" maxl engt h=" 20" > <br >
Pa s: <sel ect name=" pai s" >
<opt i on val ue=" Ar g" >Ar gent i na</ opt i on>
<opt i on val ue=" Br " >Br asi l </ opt i ont >
<opt i on val ue=" Ch" >Chi l e</ opt i on>
<opt i on val ue=" Eu" >Est ados Uni dos</ opt i on>
<opt i on val ue=" Mx" >Mxi co</ opt i on>
<opt i on val ue=" Vz" >Venezuel a</ opt i on>
</ sel ect ><br >
Sexo: <i nput t ype=" r adi o" name=" sexo" val ue=" hombr e" > Hombr e
<i nput t ype=" r adi o" name=" sexo" val ue=" muj er " > Muj er <br >
Ur gent e: <i nput t ype=" checkbox" name=" pr i or i dad" val ue=" si " > S
Coment ar i o: <t ext ar ea r ows=" 3" col s=" 40"
name=" coment ar i o" ></ t ext ar ea><br ><br >
<i nput t ype=" submi t " val ue=" Envi ar " > <i nput t ype=" r eset " val ue=" Bor r ar " >
</ f or m>

Resultado:


Y en nuestro e-mail recibiramos algo as:
nombre: Leo
e-mail: anonimo@dominio.com
pais: Mx
sexo: hombre
prioridad=on
comentario: hola, quiero informacin.
Nota: Si est activado un cuadro de seleccin, el valor al recibir el mail ser on, y si no se
seleccion el valor ser off.

Consejo: Para alinear la descripcin de los campos y los campos, podras crear una tabla con dos
columnas.

Importante: En esta ocasin se abrir el programa de envos de e-mail por defecto de la
computadora del usuario (suele ser Microsoft Outlook Express). Si se quiere que se enven los
datos a un e-mail sin tener que abrir el programa, se debe crear un archivo con un lenguaje del lado
servidor y en el atributo action poner el valor del archivo (esto lo puedes ver en algn manual de
PHP, ASP, CGI, JSP). Si no quieres utilizar lenguajes, utiliza el servicio gratuito de melodysoft.com.

19. Frames
Los frames (marcos) son una manera de partir (o dividir) la pgina en distintos espacios (o reas)
independientes unos de los otros, de modo que en cada espacio se coloca una pgina distinta que
se codifica en un fichero (.html en este caso) distinto.
Cada frame contiene dentro la pgina que le indiquemos, como cada uno es independiente, tiene sus
barras de desplazamiento (flechas de la derecha) y sus propios atributos. Generalmente, se usan
para poner el men y que al presionar en algn enlace, siempre quede visible (el men) y no
desaparezca ni por unos segundos. Los frames pueden ser en columnas, en filas o de los dos.
Un ejemplo de frames, es como se puede ver en las siguientes imgenes, la pgina est dividida en
3 frames y a la derecha explico lo que podra estar en cada frame:



Para indicar en cuantas partes se dividir la pgina, se debe indicar el tamao de cada parte
separado de una coma ( , ). Por ejemplo, si van a ser solo dos frames, indicaras as: 40%,60%.
As, el primer frame ocupar el 40% de la pgina, y el segundo el 60% de la pgina.
La etiqueta principal es <frameset> y sus atributos son:
cols: Indica el tamao de las columnas (en pxeles o porcentaje).
rows: Indica el tamao de las filas (en pxeles o porcentaje).
framespacing: Indica el tamao (en pxeles) entre cada frame.
border: Indica el grosor del borde (en pxeles).
frameborder: Indica si los frames tendrn bordes (Yes - No).
Y la etiqueta donde se debe indicar la pgina que va a contener el frame es <frame> (no tiene
etiqueta de cierre). Sus atributos son:
src: Nombre la pgina que contendr el frame.
name: Indica el nombre del frame.
scrollbar: Indica si el frame contiene las barras de desplazamiento o no (Yes - No).
noresize: Bloquea el frame para que no se pueda achica o expandir.
Se debe crear un archivo principal, que es el que contiene los frames, y el ttulo que se ponga en
ste, ser el que se mostrar. Los valores del atributo cols o rows se pueden indicar en pxeles o en
porcentaje, pero si se indica en pxeles, debido a que existen varios tipos de resoluciones, como
800x600 - 1024x78 (las ms usadas), se puede utilizar un asterisco como comodn ( * ) para cubrir el
espacio que sobra. Veamos unos ejemplos para entender mejor:
Crea el archivo principal (index.html -por ejemplo), con dos frames que estarn en dos columnas, la
primera ocupar el 20% y la segunda el 80%.
Cdigo:
index.html:
<ht ml >
<head> <t i t l e>Pgi na Pr i nci pal ( I ndex) </ t i t l e></ head>
<f r ameset col s=" 400, *" >
<f r ame sr c=" pagina1.html" scr ol l i ng=" no" name=" f r ame1" nor esi ze>
<f r ame sr c=" pagina2.html" scr ol l i ng=" yes" name=" f r ame_2" nor esi ze>
</ f r ameset >
</ ht ml >
Ahora crea los otros 2 archivos (pagina1.html y pagina2.html) que estarn en la pgina principal
(index.html). En este caso solo pon unas palabras y cambia el color de fondo:
pagina1.html:
<ht ml >
<head> <t i t l e>Pgi na 1</ t i t l e></ head>
<body bgcol or =" #CC0000" >
<f ont si ze=" 4" >Text o de l a p1</ f ont >
</ body>
</ ht ml >
pagina2.html:
<ht ml >
<head> <t i t l e>Pgi na 2</ t i t l e></ head>
<body bgcol or =" #0000FF" >
<f ont si ze=" 4" col or =" #FFFF00" >Text o de l a p2</ f ont >
</ body>
</ ht ml >
El resultado lo puedes ver aqu.
Como puedes ver, el frame de la izquierda (rojo), no tiene barras de desplazamiento porque el valor
del atributo scrolling (en el archivo principal) fue no.
El de la derecha si tiene, porque el valor fue yes.
Ahora pon 3 frames, pero en filas y el tamao ponlo en pxeles, tambin elimina el borde entre
frames. La primer fila ocupar 43 pxeles (de alto), la segunda coloca un asterisco ( * - comodn) para
que ocupe el espacio que sobre, y la tercera fila 200 pxeles.

Crea el archivo principal (frames.html -en este caso) que contiene las 3 pginas:
frames.html
<ht ml >
<head> <t i t l e>Pgi na Pr i nci pal ( Fr ames. ht ml ) </ t i t l e></ head>
<f r ameset rows=" 43, *, 200" f r amesbor der =" no" bor der =" 0" >
<f r ame sr c=" f r ame1. ht ml " scr ol l i ng=" no" name=" f r ame_1" nor esi ze>
<f r ame sr c=" f r ame2. ht ml " scr ol l i ng=" no" name=" f r ame_2" nor esi ze>
<f r ame sr c=" f r ame3. ht ml " scr ol l i ng=" no" name=" f r ame_3" nor esi ze>
</ f r ameset >
</ ht ml >
frame1.html
<ht ml >
<head> <t i t l e>Pgi na 1</ t i t l e></ head>
<body bgcol or =" #00CCFF" >
<f ont si ze=" 4" col or =" #FFFF00" >Text o de l a p1</ f ont >
</ body>
</ ht ml >
frame2.html
<ht ml >
<head> <t i t l e>Pgi na 2</ t i t l e></ head>
<body bgcol or =" #00CC00" >
<f ont si ze=" 4" col or =" #000055" >Text o de l a p2</ f ont >
<a hr ef =" body. ht ml " t ar get =" f r ame_2" >I r a l a pgi na del ej empl o de
BODY</ a> </ body>
</ ht ml >
frame3.html
<ht ml >
<head> <t i t l e>Pgi na 3</ t i t l e></ head>
<body bgcol or =" #111111" >
<f ont si ze=" 4" col or =" #FFFFFF" >Text o de l a p3</ f ont ><br ><br >
</ body>
</ ht ml >
El resultado lo ves aqu.
Importante: El archivo principal (el que contiene los frames) no debe contener la etiqueta <body>.
Si quieres abrir una pgina en otro frame, debrs poner el nombre del frame (con el atributo name)
igual que el valor del atributo target del enlace. Ejemplo:
frames.html (archivo principal)
<ht ml >
<head> <t i t l e>Pgi na Pr i nci pal ( Fr ames. ht ml ) </ t i t l e></ head>
<f r ameset r ows=" 43, *, 200" f r amesbor der =" no" bor der =" 0" >
<f r ame sr c=" f r ame1. ht ml " scr ol l i ng=" no" name=" f r ame_1" nor esi ze>
<f r ame sr c=" f r ame2. ht ml " scr ol l i ng=" no" name=" frame_2" nor esi ze>
<f r ame sr c=" f r ame3. ht ml " scr ol l i ng=" no" name=" f r ame_3" nor esi ze>
</ f r ameset >
</ ht ml >
frame2.html
<ht ml >
<head> <t i t l e>Pgi na 2</ t i t l e></ head>
<body bgcol or =" #00CC00" >
<f ont si ze=" 4" col or =" #000055" >Text o de l a p2</ f ont >
<a hr ef =" body. ht ml " t ar get =" frame_2" >I r a l a pgi na del ej empl o de
BODY</ a> </ body>
</ ht ml >
Ver resultado.

Ahora un ejemplo de como hacer una pgina con 3 frames, dos de ellos son columnas y uno es fila.
Pones 2 <frameset>, en el de la fila. El segundo valor ser el comodn ( * ) y cerrars los dos hasta
el final:
Cdigo:
3frames.html (archivo principal)
<ht ml >
<head> <t i t l e>Pgi na Pr i nci pal ( 3f r ames. ht ml ) </ t i t l e></ head>
<f r ameset rows="60,*">
<f r ame sr c=" pagi na1. ht ml " >
<f r ameset cols="20%,80%">
<f r ame sr c=" pagi na2. ht ml " >
<f r ame sr c=" pagi na3. ht ml " > </ f r ameset > </ f r ameset > </ ht ml >
Ver resultado.
Hay otro tipo de frames que son para incluir una pgina dentro de otra. La etiqueta es <iframe> y
tiene los mismos atributos que un frame. Debes cerrar la etiqueta sin poner nada en medio, indicas si
quieres borde y/o barras de desplazamiento. Ve un ejemplo:
Incluye el archivo interno.html en la pgina:

<di v al i gn=" cent er " ><i f r ame sr c=" i nt er no. ht ml " name=" pag" wi dt h=" 300"
hei ght =" 250" f r amebor der =" no" ></ i f r ame></ di v>
Resultado:

21. Insertar audio/video
A veces, es bueno que pongas msica en tu pgina web para que luzca ms. Tambin puedes
compartir algn video tuyo o alguna pelcula. Debes colocar el archivo (de audio o video) en el
mismo directorio (o carpeta) que est el archivo de la pgina (html -en este caso). De no ser as,
indica la ruta completa en la que se encuentra el archivo.
Los cdigos aqu escritos, son para reproducir solo con el Reproductor de Windows Media y
visualizarlos con Internet Explorer.
Debes tener en cuenta varias cosas:
No toda la gente tiene internet de banda ancha, para cargar rpido el archivo.
Al subir un archivo a la web va FTP (ve el manual de FTP), generalmente tarda unos
minutos dependiendo del tamao y calidad, a menos que tengas internet de 512Kbps (o
mayor).
Si comprimes mucho un archivo (de audio o video), puede ser que al escucharlo (o verlo)
est con mala calidad.
Existen 2 formas para colocar audio-video en una pgina web:
AUDIO:
bgsound: Con esta etiqueta (y los siguientes atributos) colocas solamente archivos de audio, y se
pone entre la etiqueta <HEAD>...</HEAD>. Lo nico que tienes que hacer es indicar algunos
valores. Es importante saber que con sta etiqueta, se reproduce un sonido y se puede repetir, pero
no hay un botn en especfico que detenga el sonido (aunque con Esc se detiene).

Atributos:
src: Indica la ruta (donde est el archivo) y el nombre del archivo (por ejemplo: musica.mp3).
loop: Indica si se repite o no el sonido, y si se repite indica cuantas veces se repite (el valor -1
indica reproducir infinitamente).
volume: El volumen al que se escuchar el sonido (mnimo -10,000 y mximo 0).
Cdigo:
<head> <bgsound sr c=" Sampl es/ My_Heart_Will_Go_On.mid" l oop=" - 1"
vol ume=" 0" > </ head>
Ve el resultado.
object: Con esta etiqueta se reproduce un tipo de archivo (audio y video). Puedes indicar que
empiece la reproduccin automtica o manualmente, el tamao del "reproductor" que aparece en la
pgina, mostrar u ocultar la barra del reproductor (botones de reproducir, detener...).

Atributos:
classid=" identificador del objeto" : Indica la ruta del objeto o un componente para reproducir el
archivo.
type=" tipo de archivo" : Indica el tipo de archivo.
width: Indica el ancho del reproductor.
standby: Muestra un mensaje mientras se carga el archivo.
height: Indica la altura del reproductor.

Existen algunos parmetros para indicar el aspecto del reproductor y mostrar u ocultar objetos (aqu
pongo los ms importantes). La sintaxis de un parmetro es:
<par amNAME=" Nombr e del par met r o" VALUE=" Val or ( Tr ue=S / Fal se=No) " >
autostart: Reproducir automticamente (sin tener que presionar el botn play/reproducir o no.
filename: Indica la ruta y nombre del archivo.
ShowStatusBar: Muestra u oculta la barra de estado del reproductor.
Un ejemplo de un archivo de audio, mira los valores que estn en negrita.
Cdigo:
<obj ect CLASSI D=" CLSI D: 22D6f 312- B0F6- 11D0- 94AB- 0080C74C7E95"
CODEBASE=" ht t p: / / act i vex. mi cr osof t . com/ act i vex/ cont r ol s/ mpl ayer / en/ nsmp2i n
f . cab#Ver si on=5, 1, 52, 701" st andby=" Car gando l os component es del
Repr oduct or de Wi ndows Medi a" t ype=" appl i cat i on/ x- ol eobj ect " NAME=" MC1"
I D=" MC1" hei ght =" 52" wi dt h=" 300" >
<par amNAME=" Fi l eName" VALUE=" My_Heart_Will_Go_On.mid" >
<par amNAME=" Aut oSt ar t " VALUE=" Tr ue" >
<par amNAME=" ShowSt at usBar " VALUE=" True" >
<par amNAME=" ShowGot oBar " VALUE=" False" >
<par amNAME=" Tr anspar ent At St ar t " VALUE=" False" >
<par amNAME=" Vol ume" VALUE=" - 10000" >
<par amNAME=" Loop" VALUE=" - 1" > </ obj ect >
Ve el resultado.
Ahora, un ejemplo de un video (Trailer de Harry Potter y El Cliz de Fuego). Mira los valores que
estn en negrita:
<obj ect CLASSI D=" CLSI D: 22D6f 312- B0F6- 11D0- 94AB- 0080C74C7E95"
CODEBASE=" ht t p: / / act i vex. mi cr osof t . com/ act i vex/ cont r ol s/ mpl ayer / en/ nsmp2i n
f . cab#Ver si on=5, 1, 52, 701" st andby=" Car gando l os component es del
Repr oduct or de Wi ndows Medi a" t ype=" appl i cat i on/ x- ol eobj ect " NAME=" MC1"
I D=" MC1" hei ght =" 250" wi dt h=" 350" >
<par amNAME=" Fi l eName"
VALUE=" http://raincloud.warnerbros.com/harrypotter/us/med/goblet/teaser/te
aser_100.asx" >
<par amNAME=" Aut oSt ar t " VALUE=" True" >
<par amNAME=" ShowSt at usBar " VALUE=" True" >
<par amNAME=" ShowGot oBar " VALUE=" False" >
<par amNAME=" Tr anspar ent At St ar t " VALUE=" True" >
<par amNAME=" Vol ume" VALUE=" - 10000" >
<par amNAME=" Loop" VALUE=" - 1" > </ obj ect >
Ve el resultado.
Fin del manual
Autor: Leo Juszkiewicz
E-Mail: X.Cyclop@gmail.com
Fecha de entrega: 13-Septiembre-2005
ltima actualizacin y revisin: 15-Diciembre-2005

También podría gustarte