Manual de Html

¿Qué programa
debo usar?
¿Qué es
Html?
Estructura y
etiquetas
Mi primer
página
Estilos de
párrafos
Encabezados
Formato de
texto
Atributos del
texto
Atributos de
<BODY>
Tipos de
Listas
Enlaces –
Links
Enlaces internos y
locales
Enlaces remotos, e-mail y
archivos
Imágenes
Tablas
Marquesina
Formularios
Frames
Insertar
audio/video

En este manual
aprenderás a crear páginas en Html, desde
qué tipo de programas podemos
usar para la creación de nuestra página web
hasta como usar frames, introducir música o videos en
una página web.
Ten paciencia, ya que algunas cosas no son difíciles de
entender, pero requieren más esfuerzo. Si no llegaras a
entender algo, trata de leerlo nuevamente. Incluye algunas
imágenes (carpeta Images) y ejemplos
(carpeta Samples) para que comprendas mejor. Para no confundirse,
los códigos están 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
avísame.
Espero que te sea útil.

1. ¿Qué programa debo
usar?

Para empezar a programar con Html, se necesita un
programa en el cual podamos introducir nuestro código
y así, crear nuestra web. Existen varios programas
(editores web) con los cuales puedes ayudarte, entre los
más conocidos están DreamWeaver,
Frontpage
y HomeSite.
Sin embargo, el mejor sigue siendo DreamWeaver por
ser tan completo.
Existe también la posibilidad de usar el Bloc de
Notas, el cual yo recomendaría para que
te aprendes las etiquetas y no te las escribe el programa (yo
aprendí con el bloc de notas), pero la decisión es
tuya.
Bueno, ya sabemos que programa podemos utilizar, ahora veremos
qué es exactamente el Html.

¿Qué
es Html?

Html es el lenguaje
con el que al escribir eitquetas creamos páginas
web. Las páginas se visualizan por medio de un
navegador (Internet
Explorer, Netscape…). Con Html puedes crear tablas, colocar
imágenes, reproducir audio y/o video, etc.
El Html no es el único lenguaje que
existe, es simplemente el básico, ya que los demás
lenguajes como Php, Asp, Javascript…
también requieren de algunos códigos de Html para
poder
funcionar.
Debido a que hay distintos navegadores, a
veces se pueden omitir o agregar códigos para que otros
navegadores puedan también visualizar una
página.
Tal vez te estarás preguntando ¿Qué
extensión es para lo archivos HTML?,
bueno pues pueden ser dos tipos .htm – .html, cualquiera
de las dos extensiones nos sirven, ya será tu
decisión cual poner.
Ahora, comencemos con las etiquetas de Html.

3.
Estructura y
etiquetas

Como dijimos, el Html es un lenguaje (de programación) que contiene etiquetas, las
cuales nos permiten configurar nuestra web. Las etiquetas se
escriben entre < > y (la mayoría) tienen la
etiqueta de cierre < / >, que es la misma etiqueta
solo que con la barra / después de <. Lo que
está entre las dos etiquetas recibe el efecto.
¿Para qué una etiqueta de cierre?, bueno es para
limitar nuestra etiqueta, o sea, como no queremos que todo este
subrayado (por ejemplo) donde ya no queremos que sea así
escribimos el cierre. La etiqueta <u> y su etiqueta
de cierre, </u>, indica subrayar un texto.

Ejemplo:
<u> Texto subrayado </u> Texto Normal, 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 título de la página se
escribe entre las etiquetas <head> y
</head>. El título se escribe entre las
etiquetas <title> y </title> dentro de
la etiqueta <head>.
Y el contenido de la página, entre <body> y
</body>.
No importa si lo ponemos en mayúsculas o
minúsculas, lo importante es que el cierre sea igual a
como se abrió. Todo esto quedaría
así:

<html>
<head> <title> Título de mi página
</title> </head>
<body>
Aquí
va el contenido de mi
página
</body> </html>

Ya tenemos los conceptos para empezar a crear
nuestra primer página. Ahora vamos a crear una
página con texto en negritas y con espacio de una
línea. La etiqueta <b> indica texto en
negrita, y la etiqueta <p> indica salto de
línea (dejar una línea de
separación).
El código es este:

<html>
<head>
<title>Música</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Estas en la mejor página.</p>
<p>La mejor música solo
aquí.</p>
</body>

</html>

Copia y pega este código en tu editor y
guárdalo con un nombre con extensión .htm –
.html (pag.html, por ejemplo).

Nota: Te recomiendo no
usar espacios, mayúsculas o caracteres
especiales (# $ % °) en el nombre de tu archivo, para evitar problemas de lectura con el navegador.
Podrías utilizar guiones ( – ) o guiones bajos (
_ ) para reemplazar a los espacios y nombrar a tu
archivo algo así: pagina_1.html

Ya tenemos una sencilla página creada con
texto en negritas y con espacios. Ahora vemos en la siguiente
imágen lo que hemos puesto:

Si haces click con el botón derecho del
mouse y
seleccionas Ver Código Fuente (o en el menú
seleccionas Ver | Código Fuente) puedes ver el
código (con el bloc de notas) que has escrito para esa
página.

Importante: La
página principal de tu sitio, osea la primer
página que aparece, debemos nombrarla
index seguida de un punto y el tipo d
extensión (en este caso .htm o .html),
así: index.html o
index.htm

Mi primer
página
Estilos de
párrafos

Resulta común querer hacer espacios entre
párrafos. Antes vimos que la etiquieta <p>
dejaba una línea en blanco y después se
escribía el texto, pero esta no es la única
etiqueta que puede hacer esto. Existe también la etiqueta
<br> que deja una linea de espacio. Podemos repetir
la etiqueta para dejar dos líneas de espacio.
Ejemplo:

Texto 1<br> Texto
2<br><br>Texto3, resultado:

Texto 1
Texto 2

Texto 3

También podemos colocar una línea para
separar, con la etiqueta <hr> y podemos ponerle el
tamaño con la propiedad
size, el ancho con width y el color con
color, ejemplo:

<hr size="3" color="purple"
width="75%">, resultado:

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

6. Alineación

Ya sabemos como dejar espacio, pero nos falta algo que
es la alineación. Yo quiero que despúes de dejar el
espacio en blanco se escriba el texto al centro, o a la derecha.
Para esto tenemos dos etiquetas<p>, que
además de dejar espacio en blanco, puede alinear o
<div>. Usando alguna de estas dos etiquetas y
agregando un atributo llamado align, seguido del signo
= y después la posición, escrita en inglés
(left, right, center) entre comillas ( " ).
Veamos un ejemplo para entenderlo mejor:

<p align="center">Texto
Centrado</p>, resultado:

Texto Centrado

También podemos hacerlo con la otra etiqueta,
<div>:

<div align="center">Texto
centrado</div>, resultado:

Texto Centrado

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

Nota: No es necesario agregar
el valor left a un atributo de alineación,
osea, nunca deberías 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 hacero es <h más el
número> (que sea entre 1 y 6) y su etiqueta de
cierre (</h más el número>), pongamos
un ejemplo para entender:
<h3>Encabezado 3</h3>,
resultado:

Encabezado 3

Aquí vemos todos los encabezados del más
chico (6) al más grande (1):

Encabezado 6

Encabezado 5

Encabezado 4

Encabezado 3

Encabezado 2

Encabezado 1

8.
Formato de texto

A veces, queremos que algún texto resalte en
nuestra página, podemos hacerlo más grande
aumentando el tamaño de la fuente (lo que veremos en el
próximo capítulo), pero lo más correcto
sería ponerlo en negrita, cursiva,
subrayado o tachado.
Explico cada una de estas etiquetas:
Negrita: La etiqueta correspondiente puede una de estas
dos <b> o <strong> (y su etiqueta de
cierre), b proviene de la palabra en inglés 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é sobresaltado, y para algunos
navegadores no quiere decir que esté en negritas,
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
inglés underlined, significa subrayado.

Cursiva: También conocida como
itálica. Esta también tiene dos etiquetas
<i> o <em> (y la etiqueta de cierre),
normalmente encontrarás la etiqueta <i>. La
i, proviene de la palabra en inglés italic, que
significa italica.

Subíndices y supraíndices: Estos se
usan normalmente para fórmulas. La etiqueta para los
subíndices es <sub> y para los
supraíndices es <sup> (y las etiquetas de
cierre). Veamos un ejemplo de esto:

<sup>13</sup>CC
H<sub>2</sub>O, resultado:
13CC H2O

Tachado: Esto normalmente se usa para mostrar que
una frase o una palabra está incorrecta, la etiqueta es
<strike> (y su cierre). Strike, en inglés,
significa tachar.

Seguro te ha surgido una pregunta… ¿Cómo
hago para que una parte del texto esté en en cursiva y
todo el texto esté en negrita?. Bueno, esto se hace
poniendo una etiqueta adentro de otra, la etiqueta
<i> dentro de la <b> y cerrando primero
la etiqueta que pusimos al final, un ejemplo para
entender:

<b>Texto en negrita<i>Texto
en cursiva y negrita</i></b>,
resultado:

Texto en negritaTexto en cursiva y
negrita

Ahora yo te pongo una más difícil, haz un texto
todo subrayado con una palabra en negrita, dos tachadas, cinco
palabras en cursiva y la fórmula del agua.
Código: <u><b>Negrita</b> <strike>Dos
Tachadas</strike> <i>Las Cinco palabras en
Cursiva</i> Y la fórmula del agua
H<sub>2</sub>O</u>,
resultado:

Negrita Dos Tachadas
Las Cino palabras en Cursiva Y la fórmula del agua
H2O

9.
Atributos del texto

En este capítulo aprenderemos a darle color a un
texto, modificar el tamaño y el tipo de fuente. La
etiqueta que debemos usar es <font> (y su etiqueta
de cierre) con los atributos color, face (tipo de
letra) y size (tamaño), sin embargo en
próximas versiones de Html puede ser que esta etiqueta
quede sin funcionar, así que es mejor estudiar
después de este manual, el de Css (mejor conocidas
como hojas de estilo cascada), pero por el momento usaremos esta
etiqueta (en el manual de Css hay más sobre esto).
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 más conocidas 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. Esto se indica despues del signo = y entre
comillas ( " ). Ejemplo:

<font face="Verdana,Comic Sans Ms,
Arial">Fuentes Arial – Verdana – Comic Sans
MS</font>, resultado:

Fuentes Arial – Verdana – Comic Sans MS

Así, el navegador comprobará que
está disponible la primer fuente, sino se va a la segunda,
así.. hasta encontrar una fuente que esté
disponible, y si ya no hay fuentes disponibles para este
navegador, pone la predeterminada (que es Times New
Roman).

Size: Este atributo indica el tamaño del
texto. Los valores
pueden ser del 1 al 7 y se escriben como cualquier valor,
después del signo = y entre comillas ( " ).
Ejemplo:

<font size="5">Texto con
tamaño 5</font>, resultado:

Texto con tamaño 5

Color: Este atributo indica el color del texto.
Hay dos formas de indicar el color que deseamos poner:
1. Escribiendo el nombre del color que queremos, pero en
inglés, si queremos que algo este en rojo el valor del
atirbuto color sería red.
2. Indicando el valor de RGB (Red Green Blue – Rojo Verde
Azul) con numeración hexadecimal (del 0 al 9 y de la A a
la F) después del signo de número ( # ). Este suele
ser un poco más complicado, pero si queremos indicar
colores
más exactos debemos usar este método.
Un valor se conseguiría poniendo los valores
RRGGBB. Ejemplo:

<font color="#FF00FF"> Texto
rosa</font>, resultado:

Texto rosa

Aquí tienes una tabla de la paleta de colores que
se obtienen con distintos valores:

También podríamos incluir estos 3
atributos: <font color="#CC0000"
size="4">Texto con todos los
atributos</font>, resultado:

Texto con todos los atributos

10. Atributos de <BODY>

Hay algunos atributos que se añaden a
<body> (y también a tablas, filas, celdas…)
para cambiar el color de fondo, poner una imágen como
fondo, hacer más grueso el márgen, definir el color
de un enlace (mejor conocido como link), definir un color para
todo el texto de la página… Además de estos hay
mucho más, pero por el momento solo usaremos
estos.

Los atributos son:

bgcolor: Sirve para poner un color fijo de la
página. Como ya indicamos en el capítulo anterior
se indica con el nombre del color (en inglés) o el valor
RGB. <body
bgcolor="#00CCFF">

background: Coloca una imágen
de fondo de la página, esta se repite varias veces hasta
llenar toda la página. Pueden ser fondos con
extensión JPG, GIF, BMP o PNG (4 tipos de
imágenes), solo escribimos el nombre de la imágen y
su extensión. <body
background="fondo.jpg">

Nota: Cuando ponemos un fondo
en una página, también podemos indicarle otro
atributo, que es el de fijar el fondo (este efecto solo
funciona si hay más 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 página, que por defecto es el negro ( black –
#000000 ).

Además, podemos indicar el color de los enlaces
(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 ).

También podemos indicar el márgen de la
página, quiere decir, desde donde se va a escribir, los
valores deberán ser en pixeles y son 4
propiedades:

leftmargin: Indica el espacio de los lados de la
página (derecha e izquierda).

topmargin: Indica el espacio del borde superior e
inferior.

marginwidth: Es el equivalente a
leftmargin.

marginheight: Es el equivalente a
topmargin.

Importante: Las primeras dos
propiedades (leftmargin y topmargin) son válidas
solo para Internet Explorer, y las otras dos
(marginwidth y marginheight) son válidas para
Netscape.

Vamos a juntar todas estas propiedades:

<body
background="../Images/backy.jpg" bgproperties="fixed"
text="#000099" link="#FF0000" vlink="#009900" alink="#009900"
topmargin="8" leftmargin="4" marginwidth="4"
marginheight="8">
<h3>Texto normal</h3>
<a href="http://microsoft.com">Ejemplo de Link</a>
</body>

Ve el resultado aquí.

Nota: La etiqueta
<a> hace que un texto se convierta en enlace,
por ahora ignora esa etiqueta. En este ejemplo se
usó para ver el efecto de las propiedades de
<body>, más adelante se relatará
más sobre esta etiqueta.

11. Tipos de listas

Muchas veces queremos hacer una lista de nuestros
productos,
numerar capítulos… Y todo esto se puede hacer con
distintos tipos de listas:

Listas Desordenadas: Se usa la etiqueta
<ul> (y la etiqueta de cierre). Ul proviene de las
palabras en inglés unorder list (lista
desordenadas). Cada elemento se pone con la etiqueta
<li>, sin etiqueta de cierre. Ejemplo:

<p>Países
distribuidores</p>
<ul>
<li>México
<li>Estados Unidos
<li>Canadá
</ul>
</p>

Resultado:

Países distribuidores

México
Estados Unidos
Canadá

También podemos cambiar el tipo de viñeta
(el punto), hay tres tipos:

circle
- square

disc

Estos se pueden poner con el atributo type, ya
sea en la etiqueta <ul> o
<li>:

<ul type="square">
<li>México
<li type="circle">Estados Unidos
<li>Canadá
</ul>

Resultado:

México
- Estados Unidos
Canadá

Listas Ordenadas: Se hacen con la etiqueta
<ol> (y su etiqueta de cierre). Ol proviene de la
palabra en inglés Ordered List (lista
ordenada).
Como la otra lista, cada elemento se pone con
<li>:

<p>Reglas</p>
<ol>
<li>No fumar
<li>No gritar
<li>Tener paciencia
</ol>

Resultado:

Reglas

No fumar
No gritar
Tener paciencia

Así como para la listas desordenadas se puede
cambiar el tipo de viñeta, en listas ordenadas se puede
cambiar el tipo de numeración que se indique en el
atributo type y pueden ser:
1 Ordena con números
a Ordena alfabéticamente en minúsculas
A Ordena alfabéticamente en mayúsculas
i Ordena con números romanos en
minúsculas
I Ordena con números romanos en
mayúsculas

<p>Ordenamos por
numeros</p>
<ol type="1">
<li>Elemento 1
<li> Elemento 2
</ol>

<p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a
<li> Elemento b
</ol>

Resultado:

Ordenamos por números

Elemento I
Elemento II

Ordenamos por letras

Elemento A
Elemento B

Si queremos que empiece a contar desde otro
número, por ejemplo 10 o X en vez de 1 o I, lo
haríamos con el atributo start seguido del
número o letra por el que queramos empezar:

<p>Ordenamos por números
romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Elemento 10
<li>Elemento 11
</ol>

<p>Ordenamos por números romanos empezando por el 10
(en romano)</p>
<ol type="i" start="10">
<li>Elemento x
<li>Elemento xi
</ol>

Resultado:

Ordenamos por números romanos empezando por el
10

10. Elemento 10

11. Elemento 11

Ordenamos por números romanos empezando por el 10
(en romano)

x. Elemento x

xi. Element xi

Podemos juntar los estilos y hacer una lista
mixta:

<p>Países
distribuidores</p>
<ul>
<li>Candadá
<ol>
<li>Toronto
<li>Calgary
</ol>
<li>Estados
Unidos
<ol>
<li>Nueva York
<li>Los Angeles
<li>Miami
</ol>
</ul>

Resultado:

Países distribuidores

Candadá
1. Toronto
2. Calgary
Estados Unidos

Nueva York
Los Angeles
Miami

12. Enlaces – Links

Un enlace (o link) puede ser para ver otra
página, descargar archivos o ir a otro sitio. Los
enlaces se pueden identificar si el texto es de otro color o
al pasar el mouse se produce un efecto (cambia de color, se
subraya…).
También podemos enlazar una imágen, es decir,
que una imágen nos sirva como enlace y al presionar
sobre esta nos lleve a otra página. 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 dijimos, existen varios tipos de enlaces:

Internos: Nos llevan a otras partes
dentro de la misma página.
Locales: Son los enlaces que nos dirigen
a otras páginas del mismo sitio.
Remotos: Nos dirigen a otro sitio o a
una página de otro sitio (sitio externo al
nuestro).
E-Mail: Como dice, envía un
mensaje a un e-mail.
Archivos: Sirven para descargar o ver
archivos (exe, doc, pdf, mp3…).

13. Enlaces internos y
locales

Internos: Este tipo de enlaces nos manda a
una parte de la página en la que estamos. Normalmente,
se usan cuando una página es muy grande y se necesita
ir a una parte específica.
Esto se hace con la etiqueta <a>, la propiedad
href, después el signo de número ( # ) y
el nombre que colocaremos en la parte donde queramos que vaya
el visitante. Ejemplo:
<a
href="#texto">Ir al texto</a> y en la parte donde
queramos ir <a name="texto"></a>

Ver el resultado.

Locales: Los sitios web están formados
de páginas, que muestran diferentes contenidos. Las
propiedas de la etiqueta son las mismas que en los enlaces
internos, pero sin el signo de número (a menos que en
la otra página queramos abrirla e ir a una parte
específica).
Se tendría que escribir el nombre del archivo seguido
de un punto y la extensión. Entre la etiqueta se
deberá escribir el texto que aparecerá.
Ejemplo:

<a href="1.html">Ir al ejemplo
de Body</a>, resultado: Ir al ejemplo de
Body.

Si hay páginas en otro directorio (o
carpeta), deberemos poner el nombre ce la carpeta,
despúes una barra ( / ) y la página.
Ejemplo:

<a
href="Images/titulo.png">Ver logo del
manual</a>, resultado: Ver logo del
manual.

Si tenemos un archivo (cualquier tipo) en una
subcarpeta y queremos enlazar a una imágen (o
cualquier otro tipo de archivo) que está en la carpeta
principal u otra subcarpeta, deberíamos poner en la
ruta dos puntos ( .. ), seguida de la carpeta que contiene el
archivo y después el nombre del archivo. Podemos ver
en la siguiente imágen (ejemplo de con este
manual):

Para enlazar desde indice.html a
excavando.gif, pones <a
href="Images/excavando.gif">Enlace</a>

Para enlazar desde body.html a excavando.gif,
pones <a
href="../Images/excavando.gif>Enlace</a>

Si existiría una subcarpeta dentro de otra
subcarpeta, por ejemplo, dentro de la subcarpeta Samples, una
subcarpeta Archivos, dentro de esta hay un archivo, y
enlazamos desde body.html, ponemos dos puntos, una
barra, dos puntos, otra barra y el nombre del archivo.
Ejemplo:
<a
href="../../Archivos/imagen.gif>Imagen</a>

Para ir a otra página e ir a una parte en
específico, pones el nombre de la página
seguido del signo de número y el nombre de la
sección. Ejemplo:
<a href="indice.html#Ind">Ir al
indice</a>

Existe un atributo más, que al pasar el mouse
por algún enlace, aparezca un texto. El atributo es
title y el valor es el texto que se quiera
mostrar:
<a href="#"
title="Texto del enlace">Enlace</a>
Resultado (pon el mouse sobre el texto):

Enlace

14. Enlaces remotos, e-mail y
archivos

Remotos: Este tipo de enlaces son para
acceder a páginas que están fuera de nuestros
sitios. Es igual que un enlace local, pero el URL (nombre del
sitio) debe empezar por http://. Ejemplo:
<a
href="http://microsoft.com">Microsoft</a>,
resultado: Microsoft.

Pero también tiene 4 propiedades, junto con
el atributo target para abrir de distintas formas un
enlace:

blank: Esta propiedad hace que la ventana se
abra en una página por aparte, una ventana nueva.
top: Se abre a pantalla completa, sin frames
(páginas independientes, que veremos en los
últimos capítuos).
self: Esta propiedad abre el enlace en la misma
página 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 página.

E-mail: Estos enlaces nos dirigen a una
dirección de mail. Se coloca el
atributo mailto: después del href,
seguido del mail. Ejemplo:
<a
href="mailto:leoj90[arroba]gmail.com">leoj90[arroba]gmail.com</a>,
resultado: .

También se puede agregar el asunto y una copia para
que se envíe a otro mail, con las propiedades
subject?= y &cc. Ejemplo:
<a
href="mailto:leoj90[arroba]gmail.com?subject=Informacion de
producto&ccinfo[arroba]microsoft.com">leoj90[arroba]gmail.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):

Importante: Este
método no es muy común para enviar un
e-mail, en el capítulo 18 se
detalla más sobre esto.

Archivos: Este tipo de enlace se
usa para ver o descargar un archivo. Si es ZIP o EXE, al
hacer click se muestra un
cuadro de diálogo para ver o descargar, otros
formatos, como de audio y/o video (mp3, mpg, avi, wav, mov,
wmv…) abren el programa predeterminado del usuario para
reproducirlo. Para evitar esto, podrías poner un
mensaje que diga "Haz click con el botón derecho
del mouse y selecciona 'Guardar destino como…' para
descargar el archivo". Vamos a ver cual es el
código para decargar el Msn Plus! (por
ejempo):
<a
href="http://download.msgplus.net/files/MsgPlus-361.exe">Descargar
Msn Plus!</a>, resultado:
Descargar Msn Plus!

15. Imágenes

Sin duda lo mejor de una página web son las
imágenes. Como dijimos hay varios tipos de
imágenes: JPG, BMP, GIF y PNG.
La etiqueta para insertar una imágen es
<img> (no tiene etiqueta de cierre) y sus
propiedades son:

src: El nombre completo (con la
extensión) de la imágen.
border: El tamaño de borde para la
imágen.
alt: El texto que se muestra al pasar el mouse sobre
la imágen.
width: Ancho de la imágen (en pixeles o en
porcentaje).
height: Alto de la imágen (en pixeles o en
porcentaje).
vspace – hspace: Indica el espacio (en pixeles)
libre de la imágen y lo que la rodea (texto, otra
imágen…)

Hagamos un ejemplo con todas estas
propiedades:

<img src="Images/excavando.gif"
alt="Excavando" width="47" height="46" vspace="1" hspace="1"
border="0">, resultado:

Consejo: Intenta no
agrandar tanto la imágen (especialmente con GIF)
de su tamaño original, esto puede ocasionar que
pierda un poco de resolución y calidad.

Podemos alinear una imágen agregando un
<div> – <p> o la propiedad align
dentro de la imágen, que justifica la imagen del lado
que deseamos a la vez que ponemos texto en el lado
opuesto:
<div
align="center"><img src="Images/excavando.gif"
border="0" alt="Excavando"></div>
<p align="center"><img src="Images/excavando.gif"
border="0" alt="Excavando"></p>

Ejemplo del atributo align en una
imágen:
<img
src="Images/excavando.gif" border="0" alt="Excavando"
align="left"> Texto a la derecha de la imágen,
porque el valor de align es 'left'……. Aquí sigue
el texto que se pone después de la
imágen..

Resultado:

Texto a la derecha de la imágen, porque el
valor de align es 'left'…….
Aquí sigue el texto que
se pone después de la imágen..

Podríamos colocar una imagen como enlace,
poniendo la imagen entre la etiqueta
<a>:
<a
href="http://microsoft.com" target="blank"><img
src="Images/Usa.gif" border="0"></a>,
resultado (click en la imágen):

Consejo: Pon el valor de
0 a la propiedad border, porque si la
imágen es un enlace tendrá el borde de
color de los enlaces de la página.

16. Tablas

Podemos pensar que las tablas no son necesarias
porque no vamos a crear ninguna agenda, ni listas, ni nada
por el estilo. Pero las tablas no solamente hacen esto, nos
permiten colocar en partes de una página o de un
espacio, diferentes objetos.

Un ejemplo de esto es un menú, como
seguramente has visto en muchas páginas, el
menú está en una tabla.
Esto se logra con la etiqueta <table>, la
etiqueta <tr> (crea filas) y la etiqueta
<td> (crea columnas). Veámos un ejemplo
para entender mejor:
<table>
<tr>
<td> Celda 1, fila 1-</td>
<td>-Celda 2, fila 1</td>
</tr>
<tr>
<td> Celda 1, fila 2-</td>
<td>-Celda 2, fila 2</td>
</tr>
</table>

Resultado:

Celda 1, fila 1-	-Celda 2, fila 1
Celda 1, fila 2-	-Celda 2, fila 2

Para la creación de una tabla hay varios
atributos importantes:

border: Indica el tamaño (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 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), no
es necesario ponerlo porque la tabla se hace tan alta como se
necesita.
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, además de las propiedades de la tabla
(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 (alineación
verticalmente).
colspan: Expande una celda horizontalmente.
rowspan: Expande una celda verticalmente.

Veamos un ejemplo con todos estos
atributos:
<div
align="center"><table cellpadding="4" cellspacing="1"
border="1" bordercolor="#999999" width="350">
<tr bgcolor="#DDEEFF"><td align="center"
colspan="2">Celda con colspan 2</td></tr>
<tr><td align="center" width="50%">Celda
1</td>
<td align="center" width="50%">Celda
2</td></tr>
</table>
<br>
<table cellpadding="2" cellspacing="3" border="1"
bordercolor="#999999" width="350">
<tr><td align="center" valign="top"
bgcolor="#DDEEFF" rowspan="2">Celda con rowspan="2" y
valign="top"</td> <td>Fila
1</td></tr>
<tr><td>Fila 2</td<></tr>
</table></div>,
resultado:

Podemos crear tablas dentro de otras, dentro de un
<td> y que en vez de que las columnas sean
celdas, serán tablas:

<div align="center"><table
cellpadding="0" cellspacing="0" border="1" width="500"
bordercolor="#FF0000"><tr bgcolor="#FA5D00">
<td align="center" colspan="2">2 Tablas en dentro de un
<b>td</b></td></tr>
<tr><td>
<table cellpadding="1" cellspacing="0" border="0"
width="250"><tr bgcolor="#00CCFF"><td
align="center">Fila 1</td></tr>
<tr bgcolor="#00FF00"><td align="center">Fila
2</td></tr>
<tr bgcolor="#00CCFF"><td align="center">Fila
3</td></tr>
<tr bgcolor="#00FF00"><td align="center">Fila
4</td></tr></table></td>

<td valign="top"> <table cellpadding="0"
cellspacing="1" border="2" bordercolor="#111111"
width="250"><tr bgcolor="#FFCC00"><td
align="center">Fila 1</td></tr>
<tr bgcolor="#0000FF"><td align="center">Fila
2</td></tr>
</table>
</td></tr></table></div>,
resultado:

17. Marquesina

Las marquesinas son palabras o textos que se
desplazan de un lado a otro, ya sea horizontal (izquierda a
derecha o viceversa) o vertical (arriba hacia abajo o
viceversa). Lo podemos usar para noticias,
imágenes, enlaces…
La etiqueta para esto es <marquee>, pero
también podemos agregar diferentes
atributos:

direction: Indica la dirección 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:

<div
align="center"><marquee scrollAmount="3" width="300"
height="90"
direction="up">Texto<br>desplazado<br>hacia<br>arriba</marquee></div>

Ver el resultado.

Hay un atributo más, que sirve para mover el
texto de derecha a izquierda y de izquierda a derecha, pero
con este el texto no desaparece: alternate=behavior,
ejemplo:
<marquee
behavior="alternate">Texto de derecha a izquierda y de
izquierda a derecha</marquee>
Ver el resultado.

18. Formularios

Mediante el envío de formularios
se pueden enviar datos de un
artículo, de una encuesta o
normalmente para enviar un mensaje a un e-mail.
Para hacer esto deberíamos saber un poco sobre los
lenguajes de tipo servidor, ASP
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 método por el que se
enviarán los datos. Existen 2:

POST: Envía datos por la entrada
estándar STDIO (utilizado
normalmente).
GET: Envía datos por medio de un
URL (enlace).
action: Indica el mail a donde se enviarán los
datos o el nombre del archivo .php o .asp
–

Ejemplo:

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, dirección…
password: Se usa para ocultar las claves
o datos confidenciales (al escribir en este, muestra
*******.
hidden: Datos escondidos, asunto, e-mail
de destino…
button: Crea un
botón.
image: Hace que una imagen sea el enlace
(la imagen se muestra con el atributo
src).
submit: Envía el
formulario.
reset: Borra los campos del
formulario.

value: Indica el valor de un atributo o el
nombre que se mostrará (en el cuadro).
name: Nombre del campo.
maxlength: Indica el número de caracteres
máximo para escribir.
size: Indica el tamaño del cuadro de texto.

Ejemplo:

<form method="post">
Nombre <input type="text" name="nombre" maxlength="10"
size="15">
Password <input type="password" name="contraseña"
maxlength="10" size="15">
<input type="submit" name="enviar" value="Enviar">
<input type="reset" name="Borrar" value="Borrar
Todo">
</form>

Resultado:

Si queremos que una persona
envíe algún comentario o sugerencia, ponemos 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:

Resultado:

Lista de Opciones: Son listas en las que se
pueden especificar una o varias opciones.
Podríamos poner páises, asuntos… y que el
usuario seleccione la adecuada. La etiqueta para hacer esto
es <select>, y cada opción se define por
la etiqueta <option>. Además, deben
contener los atributos value y name,
ejemplo:

<select name="pais">
<option value="Arg">Argentina</option>
<option value="Br">Brasil</optiont>
<option value="Ch">Chile</option>
<option value="Eu">Estados Unidos</option>
<option value="Mx">México</option>
<option value="Vz">Venezuela</option>
</select>

Resultado:

Se puede seleccionar una opción por defecto,
con el atributo selected en la opción que
queramos. Podemos cambiar la lista de opciones, para que se
pueda seleccionar más de una opción. Esto se
hace con el atributo multiple y size (indica el
número de valores a mostrar):

<select name="pais" size="3"
multiple>
<option value="Arg">Argentina</option>
<option value="Br">Brasil</optiont>
<option value="Ch">Chile</option>
<option value="Eu">Estados Unidos</option>
<option value="Mx">México</option>
<option value="Vz">Venezuela</option>
</select>

Resultado:

Nota: Manteniendo
presionada la tecla Ctrl o Shift se puede
seleccionar más de una opción de la
lista.

Botones de círculo: Si
queremos que solo se pueda seleccionar una opción,
además de las listas desplegables, tenemos los botones
en forma de círculo. Se usa la etiqueta input,
pero con el valor radio en el atributo type.
Para seleccionar una opción por defecto, es el
atributo checked:
<input type="radio" name="pais"
value="Arg">Argentina<br>
<input type="radio" name="pais"
value="Br">Brasil<br>
<input type="radio" name="pais"
value="Ch">Chile<br>
<input type="radio" name="pais"
value="Eu">E.U.<br>
<input type="radio" name="pais" value="Mx"
checked>México<br>
<input type="radio" name="pais"
value="Vz">Venzuela<br>

Resultado:

Cuadros de selección: Además de
poner el valor multiple en las listas desplegables
para poder seleccionar más de una opción,
podemos utilizar el valor checkbox en el atributo
type, y con el atributo checked se selecciona
una (o varias) opción(es):
<input type="checkbox" name="pais"
value="Arg"> Argentina
<input type="checkbox" name="pais" value="Br">
Brasil
<input type="checkbox" name="pais" value="Ch">
Chile
<input type="checkbox" name="pais" value="Eu">
E.U.
<input type="checkbox" name="pais" value="Mx"
checked> México
<input type="checkbox" name="pais" value="Vz">
Venezuela

Resultado:

Un ejemplo de un formulario:

<form
action="mail[arroba]dominio.com" method="post">
Nombre: <input type="text" name="nombre" size="15"
maxlength="20"> <br>
E-Mail: <input type="text" name="email" size="15"
maxlength="20"> <br>
País: <select name="pais">
<option value="Arg">Argentina</option>
<option value="Br">Brasil</optiont>
<option value="Ch">Chile</option>
<option value="Eu">Estados Unidos</option>
<option value="Mx">México</option>
<option value="Vz">Venezuela</option>
</select><br>
Sexo:
<input type="radio"
name="sexo" value="hombre"> Hombre
<input type="radio" name="sexo" value="mujer">
Mujer<br>
Urgente: <input type="checkbox" name="prioridad"
value="si"> Sí
Comentario: <textarea rows="3" cols="40"
name="comentario"></textarea><br><br>

Resultado:

Y en nuestro e-mail recibiríamos algo
asi:

nombre: Leo
email: anonimo[arroba]dominio.com
pais: Mx
sexo: hombre
prioridad=on
comentario: hola, quiero información.

Nota: Si está
activada un cuadro de selección, el valor al recibir el
mail será on, si no se activó el
valor será off.

Consejo: Para alinear la
descripción de los campos y los
campos, podrías crear una tabla con dos
columnas.

Importante: En esta
ocasión se abrirá el programa de
envíos de mail por defecto de la
computadora del usuario (suele ser Outlook
Express). Si queremos que envíe los datos a un
mail sin tener que abrir el programa, debemos crear un
archivo PHP y en el atributo action poner el
valor del archivo (esto lo puedes ver en el manual de
PHP).

19. Frames

Los frames (páginas independientes) son una
manera de partir (o dividir) la página en distintos
espacios (o áreas) independientes unos de los otros,
de modo que en cada espacio se coloca una página
distinta que se codifica en un fichero (.html en este caso)
distinto.
Cada frame contiene dentro, la página que le
indiquemos, como cada uno es indepediente, tiene sus barras
de desplazamiento (flechas de la derecha). Generalmente se
usan los frames para poner el menú y que al presionar
en algún 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
imágenes, la página está dividida en 3
frames y a la derecha explico lo que podría estar en
cada frame:

Para indicar en cuantas partes dividiremos la
página, debemos indicar el tamaño de cada parte
separado de una coma ( , ). Por ejemplo, si van a ser solo
dos frames, indicaríamos así:
40%,60%.
Así, el primer frame ocupará el 40% de la
página, y el segundo el 60% de la
página.

La etiqueta principal es <frameset> y
sus atributos son:

cols: Indica el tamaño de las columnas
(en pixeles o porcentaje).
rows: Indica el tamaño de las filas (en pixeles
o porcentaje).
framespacing: Indica el tamaño (en pixeles)
entre cada frame.
border: Indica el ancho del borde (en pixeles).
frameborder: Indica si los frames tendrán
bordes (Yes – No).

Y la etiqueta donde debemos indicar la página
que va a contener el frame es <frame> (no tiene
etiqueta de cierre). Sus atributos son:

src: Aquí escribimos la página
que contiene el frame.
name: Indicamos el nombre del frame.
scrollbar: Indicar si el frame contiene las barras de
desplazamiento o no (Yes o No).
noresize: Bloquea el frame para que no podamos
achicarlo o expandirlo.

Debemos crear un archivo principal, que es el que
contiene frames, y el título que se ponga en este,
sera el que se mostrará. Los valores del atributo
cols o rows podemos indicarlos en pixeles o en
porcentaje, pero si se indica en pixeles, debido a que
existen varios tipos de resoluciones, como 800×600 – 1024×78
(las más usadas), podemos utilizar un comodin ( * )
para cubrir el espacio que sobra. Veamos unos ejemplos para
entender mejor:

Creamos el archivo principal (index.html -por
ejemplo), con dos frames que estarán en dos columnas,
la primera ocupará el 20% y la segunda el 80%.
Código:

index.html:
<html>
<head> <title>Página Principal
(Index)</title></head>
<frameset cols="400,*">
<frame src="pagina1.html" scrolling="no"
name="frame1" noresize>
<frame src="pagina2.html" scrolling="yes"
name="frame_2" noresize>
</frameset>
</html>

Ahora creamos los otros 2 archivos (pagina1.html y
pagina2.html) que estarán en la página
principal (index.html). En este caso solo pondremos unas
palabras y cambiamos el color de fondo:

pagina1.html:
<html>
<head> <title>Página
1</title></head>
<body bgcolor="#CC0000">
<font>Texto de la p1</font>
</body>
</html>

pagina2.html:
<html>
<head> <title>Página
2</title></head>
<body bgcolor="#0000FF">
<font color="#FFFF00">Texto de la p2</font>
</body>
</html>

El resultado lo puedes ver aquí.

Como puedes ver, en 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 vamos a poner 3 frames, pero en filas y el
tamaño lo pondremos en pixeles, también
eliminamos el borde entre frames. La primer fila
ocupará 43 pixeles (de alto), la segunda colocamos un
* (comodin) para que ocupe el espacio que sobre, y la tercer
fila 200 pixeles.

Creamos el archivo principal (frames.html -en este caso) que
contiene las 3 páginas:

frames.html
<html>
<head> <title>Página Principal
(Frames.html)</title></head>
<frameset rows="43,*,200" framesborder="no"
border="0">
<frame src="frame1.html" scrolling="no" name="frame_1"
noresize>
<frame src="frame2.html" scrolling="no" name="frame_2"
noresize>
<frame src="frame3.html" scrolling="no" name="frame_3"
noresize>
</frameset>
</html>

frame1.html
<html>
<head> <title>Página
1</title></head>
<body bgcolor="#00CCFF">
<font color="#FFFF00">Texto de la p1</font>
</body>
</html>

frame2.html
<html>
<head> <title>Página
2</title></head>
<body bgcolor="#00CC00">
<font color="#000055">Texto de la p2</font>
<a href="body.html" target="frame_2">Ir a la
página del ejemplo de BODY</a> </body>
</html>

frame3.html
<html>
<head> <title>Página
3</title></head>
<body bgcolor="#111111">
<font color="#FFFFFF">Texto de la
p3</font><br><br>
</body>
</html>

El resultado lo ves aquí.

Importante: En el archivo
principal (el que contiene los frames) no debe contener
la etiqueta <body>.

Si queremos abrir una página en otro frame,
debemos poner el nombre del frame (con el atributo
name) igual que el valor del atributo target
del enlace. Ejemplo:

frames.html (archivo principal)
<html>
<head> <title>Página Principal
(Frames.html)</title></head>
<frameset rows="43,*,200" framesborder="no"
border="0">
<frame src="frame1.html" scrolling="no" name="frame_1"
noresize>
<frame src="frame2.html" scrolling="no"
name="frame_2" noresize>
<frame src="frame3.html" scrolling="no" name="frame_3"
noresize>
</frameset>
</html>

frame2.html
<html>
<head> <title>Página
2</title></head>
<body bgcolor="#00CC00">
<font color="#000055">Texto de la p2</font>
<a href="body.html" target="frame_2">Ir a la
página del ejemplo de BODY</a> </body>
</html>

Ver resultado.

Ahora un ejemplo de como hacer una página con
3 frames, dos de ellos son columnas y uno es fila. Ponemos 2
<frameset>, en el de la fila, el segundo valor
será el comodín ( * ) y cerraremos los dos
hasta el final:

Código:

3frames.html (archivo principal)
<html>
<head> <title>Página Principal
(3frames.html)</title></head>
<frameset rows="60,*">
<frame src="pagina1.html">
<frameset cols="20%,80%">
<frame src="pagina2.html">
<frame src="pagina3.html"> </frameset>
</frameset> </html>

Ver resultado.

Hay otro tipo de frames que son para incluir
una página dentro de otra. La etiqueta es
<iframe> y tiene los mismos atributos que un
frame. Debemos cerrar la etiqueta sin poner nada en medio,
indicamos si queremos borde y/o barras de desplazamiento.
Veamos un ejemplo:

Incluiremos el archivo interno.html en la
página:

Resultado:

Insertar audio/video

A veces, es bueno que pongamos música en
nuestra página web para que se vea mejor.
También podemos también compartir algún
video de nosotros o alguna película. Debemos colocar
el archivo (de audio o video) en el mismo directorio (o
carpeta) que está el archivo de la página (html
-en este caso).
Los códigos aquí escritos, son para reproducir
solo con el Reproductor de Windows
Media y visualizarlos con Internet
Explorer. Debemos tener en cuenta varias
cosas:

No toda la gente tiene internet de
banda
ancha, para cargar rápido el
archivo.
Al subir un archivo a la web vía FTP (ve
el manual de FTP), generalmente tarda unos minutos, a menos
que tengas internet de 512Kbps (o más).
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
página web:

bgsound: Con esta etiqueta (y los siguientes
atributos) colocamos solamente archivos de audio,
ésta etiqueta se pone entre la etiqueta
<HEAD>…</HEAD>. Lo único
que tenemos que hacer es indicar algunos valores. Es
importante saber que con esta etiqueta, se reproduce un
sonido y se
puede repetir, pero no hay un botón en
específico que detenga el sonido (aunque con
Esc se detiene).

Atributos:
→ src: Indica la ruta (donde está el
archivo) y el nombre del archivo (por ej: 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 volúmen que se
escuchará el sonido (mínimo -10,000 y
máximo 0).

Código:

Ver el resultado.

object: Con esta etiqueta se reproduce un
tipo de archivo (audio y video). Podemos indicar que empiece
la reproducción automáticamente o
manualmente, el tamaño del "reproductor" que aparece
en la página, 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 parámetros para indicar el aspecto del
reproductor y mostrar u ocultar objetos (aquí pongo
los más importantes). El código de un
parámetro es:

→ autostart: Reproducir
automáticamente 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 están en negrita. Código:

Ve el resultado.

Ahora, un ejemplo de un video (Trailer de Harry
Potter y El Cáliz de Fuego). Mira los valores que
están en negrita:

Ve el resultado.

Fin del manual

Autor:

Leo Juszkiewicz

Fecha de entrega: 13-Septiembre – 2005