Académique Documents
Professionnel Documents
Culture Documents
I. INTRODUCCION
En este manual aprenders a crear pginas en Html, desde qu tipo de programas
podemos usar para la creacin de nuestra pgina web, hasta como usar mapas, imgenes,
marcos o frames, introducir msica o videos en una pgina Web, etc.
Para el internauta una pgina WEB es una pantalla en su monitor que le muestra
la informacin que va buscando y enlaces a otros sitios relacionados.
Para el diseador una pgina WEB es un documento construido para mostrar
informacin en la pantalla de un monitor, que contiene adems de la informacin
una serie de instrucciones para indicar como se ha de mostrar esa informacin.
Estas instrucciones se escriben siguiendo un lenguaje llamado HTML
Como ves el diseador define la pgina web como algo ms completo y tcnico que el
simple internauta. La pgina web se concreta en un documento con un nombre terminado
con la extensin .htm o .html.
Una serie de pginas web interconectas e interrelacionadas de alguna forma (el mismo
tema, el mismo objetivo...) forman un sitio web, que habitualmente est almacenado en un
servidor.
<html>
<head>
</head>
<body>
</body>
</html>
Buscando un smil, podramos decir que todo el cdigo va metido en un armario llamado
html y que a su vez tiene dos compartimentos separados, uno llamado head y otro
llamado body.
El contenido correspondiente a la cabecera (head) tendr que ir siempre entre la etiqueta
<head> que indica inicio de la cabecera, y la etiqueta </head> que indica el fin de la
cabecera. Estas dos etiquetas se diferencian por la barra que tiene delante la que indica
fin: /.
La que no tiene la barra siempre indica que a partir de ah el cdigo pertenece a esa
etiqueta (head, body o lo que sea), mientras que la que s lleva la barra indica siempre que
el cdigo de esa parte ha terminado.
Lo mismo ocurre con el Cuerpo (body), cuyo contenido ha de estar siempre entre la
etiqueta <body> que indica comienzo del Cuerpo, y la etiqueta </body> que indica su final.
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
Con esto queda claro que la barra "/" indica siempre final de una parte, importante
elemento para q no nos traiga problemas en el siguiente cdigo q escribamos a
continuacin, ya q si una etiqueta no se cierra correctamente, podra incluir elementos que
no son parte de su cdigo y entonces nuestra pgina se vera afectada.
Ilustracin de Estructura:
Nota: Existen cosillas que solo podremos colocar dentro del encabezado (head) y otras
cosas que solo funcionarn dentro del cuerpo (body), pero esas cosillas las iremos viendo
conforme avancemos.
A continuacin muestro debajo el cdigo de una pgina web vaca, pero esta ves con
algunas cosillas ms. Este cdigo es el que tiene una pgina de esas que creas con
FrontPage, Dreamweaver, Html-Kit o programas por el estilo, nada ms de empezar, es
decir, cuando an no has metido cdigo alguno en ella.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
Vemos en este cdigo las palabras mgicas comentadas antes, html, head, body y sus
correspondientes cierres con la barra "/". A estas palabras encerradas con los smbolos <
y > recuerden, las llamaremos etiquetas.
Aparecen algunas cosas nuevas, pero las veremos con detenimiento ms adelante. Con
esto que saben hasta ahora, ya pueden mirar el cdigo Html de cualquier pgina web e
identificar dnde empieza su cdigo html, dnde termina, y dnde empiezan y acaban la
cabecera y el body.
Mi_2da_pagina.htm
<HTML>
<HEAD>
<TITLE>Mi segunda pagina web </TITLE>
</HEAD>
<BODY>
<H1 align="center" >Mi Segunda pagina web </H1>
<HR>
<P>Esto que ves tan sencillo es una verdadera pgina web, aunque le falta el contenido,
pero calma, todo llegar</P>
</BODY>
</HTML>
II.4. La explicacin
Si nos fijamos en la pgina que vemos con el explorador solo se ve parte de lo que hemos
escrito, concretamente todo lo que no est encerrado entre los smbolos < y >. Eso es el
contenido de la pgina, pero y lo que est entre esos parntesis angulares? pues
recordar que esas son las etiquetas que le dicen al explorador como mostrar el contenido:
en grande, con colores, centrado, el ttulo de la pgina, etc. Si se fijan cada etiqueta tiene
un comienzo y un fin:
<ETIQUETA parmetros> ... </ETIQUETA>
Como ves una apertura y un cierre. Algunas etiquetas (como <BR> cambio de lnea o
<HR> lnea horizontal) no llevan cierre. Fijmonos que lo primero que tenemos es la
etiqueta <HTML> cerrada al final del documento con </HTML>, eso quiere decir que
estamos ante un HTML:
<HTML> ... </HTML>
Dentro de ese documento vemos una parte llamada cabecera, que la reconocers porque
est limitada con la etiqueta <HEAD> </HEAD>. l contenido de esta parte no siempre es
visible, y si lo es nunca se muestra en la pgina en si. Contiene por ejemplo el ttulo que se
ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto:
<HEAD>
<TITLE>Mi segunda pgina web</TITLE>
</HEAD>
Puede contener muchas otras cosas, pero eso lo dejamos para ms adelante.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Ejemplos de Tipos de Documentos:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Cumple el estndar HTML 2.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Cumple el estndar HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">
Cumple el estndar HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">
Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">
Es una definicin de marcos que cumple el estndar HTML 4.0
Nota: El HTML 4.0 considera desaconsejables aquellos elementos que, an siendo
soportados, han sido sustituidos por otros ms potentes y, por ello, es posible que sean
eliminados del estndar HTML en el futuro.
<!DOCTYPE html>
Html5, la ltima versin de Html por el momento (es bien corta su definicin).
Anteriormente, para otras versiones de Html, la lnea para definir el tipo de documento era
ms larga y liosa, como puedes ver en los ejemplos anteriores pero ahora en Html5 es as
de cortica.
De modo que, una pgina web vaca, pero con el tipo de documento ya declarado
correctamente, sera as, y si es una versin anterior escoger cualquiera de los ejemplos
vistos arriba segn corresponda:
<!DOCTYPE
<html>
<head>
</head>
<body>
</body>
</html>
html>
IV. LA CABECERA
Suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no
alteren el contenido de la misma, aunque s la forma de presentarlo y su comportamiento.
Es por eso que es el lugar ms recomendable para colocar los scripts y las hojas de estilo,
como veremos en los captulos correspondientes.
Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras.
Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una
pgina situada en nuestro mismo servidor.
Sin embargo, si especificamos:
<BASE HREF="http://www.misitio.com/">
Ahora todas nuestras
http://www.misitio.com
URLs
relativas
se
encontrarn
dentro
del
servidor
Es muy muy importante que el ttulo de cada una de las pginas de tu web sea distinto
de unas a otras. Como tengas dos titles exactamente iguales en varias de las pginas de
tu sitio web, los buscadores (por ejemplo Google) creern que tienes dos pginas idnticas
(que una es copia de la otra) de modo que solo har caso a una de ellas, solo indexar
una de las dos. Cuida que todas sean distintas para aumentar la cantidad de pginas que
los buscadores conocen de tu web y conseguir as aumentar las visitas de tu web.
Se recomienda, adems de no repetirse en las distintas pginas de tu web, que el
contenido del title no tenga ms de 65 letras o caracteres ni ms de 15 palabras.
Aprovecha para incluir en los ttulos palabras clave de esa pgina, es decir, algunas de
aquellas palabras por las que crees que podras ser encontrado si alguien est interesado
en encontrar una pgina como esa. Qu escribira un usuario en Google para
encontrarla?. Pues esas son tus palabras clave para esa pgina concreta.
Nota: Adems, no se pueden colocar dos etiquetas title dentro de la cabecera de una
misma pgina, tan solo una por pgina.
Content
Autor de la pgina.
Palabras que permite clasificar la pgina dentro de un buscador
CLASSIFICATION
jerrquico (como Yahoo).
Palabras clave por las que encontrarn la pgina en los buscadores.
KEYWORDS
Google no le hace mucho caso.
GENERATOR
Herramienta utilizada para hacer la pgina.
DESCRIPTION
Descripcin del contenido de la pgina. Google le hace algn caso.
CONTENT
Fecha desde la que la pgina debe ser recargada por los navegadores
El contenido debe ser no-cache y sirve para que el navegador no
guarde la pgina en el ordenador del internauta.
Content-Language Idioma en el que est escrita la pgina. Se usan las iniciales como:
es_ES: espaol Espaa, en_US: ingles americano...
Refresh
Indica al navegador el tiempo (en segundos) que debe esperar para
recargar la pgina automticamente y la pgina a la que debe ir.
Ambos datos se separan con un punto y coma.
Content-Type
Tipo de documento y juego de caracteres usado. Lo habitual es
colocar
el
valor:
text/html;
charset=iso-8859-1
Si n o se usa los caracteres especiales (letras acentuadas, ) pueden
quedar ilegibles .
Esa lnea ha de ir en todas las pginas de nuestras webs, o al menos, en las que no
hablemos en chino. Puede ser que en algunas versiones de navegadores ya no haga falta
esta codificacin, pues ya lo traen implcito y lo pueden reconocer sin problemas.
Veremos que esta etiqueta empieza por la palabra meta y que no tiene etiqueta de cierre
(no se pone </meta> al final de la lnea). Es un caso un poco especial pues normalmente
casi siempre hay una etiqueta de cierre tras una etiqueta de apertura. En el caso de que
una etiqueta no use la correspondiente etiqueta de cierre, se coloca en su lugar una barra
al final de la lnea de apertura. En este caso la puedes ver al final del cdigo que he
colocado antes.
Ahora que tenemos claro que el cdigo Html va a tener una codificiacin del tipo UTF-8,
hemos de asegurarnos de que cada vez que guardamos un archivo de cdigo, ha de
guardarse como tal, como UTF-8. Si lo guardamos sin especificar esto y por defecto se
guardara con otra codificacin, podramos tener los problemas comentados atrs, como
que los acentos aparezcan raros, etc.
Y este es el cdigo que llevamos hecho por el momento en este tutorial y que conocemos
ya perfectamente, lnea a lnea:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Ttulo de esta pgina</title>
</head>
<body>
</body>
</html>
Nota: Antes de seguir aadiendo lneas y lneas de cdigo Html a nuestros ejemplos,
recordar que la lnea que especifica el charset="utf-8" tiene que ser la primera lnea que
haya justo despus de <head>, pq en caso contrario, podra no ser leda por los
navegadores. (Debe estar dentro de los primeros 512 caracteres del archivo).
V. El CUERPO
El cuerpo es el contenido de la pgina propiamente dicho, o sea, lo que se ve, en el es
donde colocarn prcticamente todos los elementos que vamos a ir viendo por este
manual. Los atributos que admite esta etiqueta <BODY>:
BACKGROUND
BGCOLOR
BGPROPERTIES
TEXT
LINK
VLINK
ALINK
LEFTMARGIN
TOPMARGIN
MARGINWIDTH
MARGINHEIGHT
Nota: No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista
alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el
usuario ha podido cambiarlos en las opciones de su navegador y estarn ya a su gusto.
V.1.1. Prrafos
Con lo explicado antes seguimos teniendo una pgina vaca. Explicamos ahora algunos
elementos que podemos usar en nuestras pginas web, y empezaremos por los prrafos.
Lo ms bsico que podemos insertar en nuestra nueva pgina an en blanco, son
palabras. Vamos a ver como se pone en cdigo Html un prrafo.
En primer lugar decir que todos los elementos (o casi todos los elementos) de una web, ir
dentro del body que ya conocen, es decir, entre <body> y </body>.
Existen otras cosas que no son "visibles" y esas irn en el head principalmente. Las
lneas que vimos para especificar el tipo de codificacin no es algo visible, mientras un
prrafo que intenta transmitir algo a los visitantes, obviamente si que es visible.
Para escribir un prrafo, lo haremos dentro de la zona visible (el body) encerrando lo que
queremos escribir entre los smbolos <p> y </p> que son las etiquetas para escribir
prrafos. Como ves, la primera etiqueta indica comienzo de prrafo (de ah la "p" de
prrafo) y la segunda situada al final indica el final del prrafo, y lleva por tanto la barra "/".
Por ejemplo, si queremos que en nuestra web aparezca el siguiente prrafo:
Hola amigos, esta es mi nueva Web
Tendremos que escribir, entre <body> y </body> la siguiente lnea:
<p>Hola amigos, esta es mi nueva Web</p> entonces quedara asi:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
</head>
<body>
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</html>
A continuacin muestro una Tabla con algunos de los estilos que pueden tener los prrafos
en HTML:
Estos estilos o formatos actan a nivel de prrafo:
Etiqueta
Significado
Resultado
<P>
Alineacin izquierda
Texto centrado
Justificar el texto del prrafo a la izquierda
Alineacin derecha
(ALIGN=LEFT), derecha (RIGHT), al centro
Texto justificado o sea,
(CENTER) o a ambos mrgenes (JUSTIFY
alineado a ambos lados sin
html4 )
dejar, escalones en el
margen derecho.
<CENTER>
</CENTER>
<PRE WIDTH=x>
</PRE>
<BLOCKQUOTE>
</BLOCKQUOTE>
...
Resultado
Si ahora guardamos el archivo del ejemplo y lo abrimos como pgina web, se mostrar
este otro resultado.
La apariencia es sin duda alguna distinta, como si de un titular de peridico se tratara.
Existen otras etiquetas de ttulos en Html, h2, h3, h4, h5.... y hasta el 6, aunque no creo
que se pase del h2 o h3 normalmente. El aspecto de estos otros tipos de titular es menos
cantoso, menos destacado, conforme mayor es el numerito que sigue a la letra h.
Nota: Como estndar se usa h1 para titulares principales y h2 para titulares secundarios.
Si se diera el caso tambin los h3 para titulares menores, y as sucesivamente si aparecen
mas elementos de menor jerarqua.
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de
letra que estemos utilizando y se pueden utilizar dentro de un prrafo.
Etiqueta
Utilidad
Resultado
Estoy ladeado
Para tachar.
A m, en cambio, nadie me
quiere
importante
Letra superndice.
E=mc
Letra subndice.
ai,j=bi,j+1
Soy GRANDE
...
</SMALL>
Significado
Efectos
Esta frase no es ma
Cdigo
int x=0;
<STRONG>
</STRONG>
Fuerte, negrita.
Enfasis.
Teclado
La
variable
anteriormente...
<ABBR>
...
de
definida
Estoy en un literal
...
Abreviaturas.
</ABBR>
serie
x,
Resultado
<BR>
<HR>
Barra horizontal.
No se ve el contenido
V.4. Alineacin
Ya sabemos como dejar espacio, pero nos falta algo que es la alineacin. Si yo quisiera
que despus de dejar el espacio en blanco se escriba el texto al centro, o a la derecha,
entonces me tocara escoger una etiqueta que puede ayudarnos con eso.
Para esto tenemos dos etiquetas <p>, que adems 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 despus la posicin, escrita en ingls (left, right, center)
entre comillas ( " ).
Veamos un ejemplo para entenderlo mejor:
<p align="center">Texto Centrado</p>,
resultado:
Texto Centrado
Tambin 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 mayora de los casos no es necesario.
Nota: No es necesario agregar el valor left a un atributo de alineacin, o sea, nunca
deberas poner por ejemplo: <div align="left">, debido a que predeterminadamente todo se
alinea a la izquierda sin tener que indicarlo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
<!-- Insertar aqu mas Metatags-->
</head>
<body>
<!-- <p>BIENVENIDOS!</p> -->
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</html>
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 (").
Ejemplo:
<font size="5">Texto con tamao 5</font>
Resultado:
Texto con tamao 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 ingls, si queremos 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 queremos indicar colores ms exactos debemos usar
este mtodo.
Un valor se conseguira poniendo los valores RRGGBB. Ejemplo:
<font color="#FF00FF"> Texto rosa</font>
Resultado:
Texto rosa
Tambin podramos incluir estos 3 atributos:
<font color="#CC0000" size="4" face="Comic Sans MS">Texto con todos los
atributos</font>
Resultado:
Texto con todos los atributos
V.6.3. El color
Podemos cambiar el color de cualquier carcter mediante el uso del parmetro COLOR. La
manera de especificarle el color es comn a todas las etiquetas HTML: o bien indicando el
nombre, si es un color normal, o bien especificando los componentes de rojo, verde y azul
(cdigo RGB) del mismo.
Los colores reconocidos son los siguientes:
Black Silver Gray White Maroon Red Purple Fuchsia
Green Lime Olive Yellow Navy
<FONT color="blue">Soy azul como el mar</FONT>
Blue Teal
Aqua
El modo de indicar el color RGB es el mediante los componentes RGB para lo que se usa
un cdigo de seis dgitos hexadecimales: 00 a FF. Por ejemplo:
<FONT COLOR="#FF0000">Cdigo para rojo es #FF0000D</FONT>
Cdigo para rojo es #FF0000
<FONT COLOR="#00FF00">Cdigo para verde es #00FF00</FONT>
Cdigo para verde es #00FF00
<FONT COLOR="#0000FF">Cdigo para Azul es #0000FF</FONT>
Cdigo para azul es #0000FF
<FONT COLOR="#0000FF">Y ahora mezclemos colores con #10A2FF</FONT>
Y ahora mezclemos colores con #10A2FF
Resultado
¿
¡
º
ª
™
©
®
Espacio en blanco
<
>
>
&
&
"
"
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
estos.
<body background="fondo.jpg">
Nota: Cuando ponemos un fondo en una pgina, tambin podemos 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, 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 ).
Un enlace (o link) puede ser para ver otra pgina, 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...).
Tambin podemos enlazar una imagen, es decir, que una imagen nos sirva como enlace y
al presionar sobre esta 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.
target="_top": Se usa esta opcin cuando queremos que el archivo enlazado se muestre
en una pantalla completa de la ventana eliminando los frames o marcos si los hay. Esta
opcin se utiliza solo cuando nuestra pgina web est hecha con frames o marcos.
target="_parent": Con esta opcin la pgina destino se muestra en marco anterior al
marco o frame en el que est el enlace. Pues no pasa nada, pues es tambin para usar
cuando tienes marcos y no va a ser el caso.
target="_self": Con esta tercera opcin, la pgina de destino a la que apunta en vnculo se
mostrar en la misma ventana del navegador del visitante, es decir, no se abrir en una
ventana aparte. Esta opcin es la que se toma por defecto, la que se activa si no se
indica ninguna propiedad target y por tanto tampoco la usaremos
target="_blank": Esta es la que mas nos interesa. Con esta opcin la pgina enlazada se
abrir en una ventana nueva del navegador. Resulta til cuando queremos enviar a las
visitas a una pgina externa, fuera de nuestra web. As se mantendr nuestra web abierta
en otra ventana y no perdemos esa visita, pues tiene nuestra pgina a mano. Tambin la
puedes usar cuando quieres mostrar otra pgina de tu web, pero sin que el visitante pierda
de vista la pgina en la que estaba.
Resumiendo, si queremos que la pgina de destino se abra en otra ventana del navegador
usaremos target="_blank" y en caso contrario no colocamos esa propiedad target.
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
http://.
Ejemplo:
<a href="http://microsoft.com">Microsoft</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 la ventana se abra en una pgina por aparte, una
ventana nueva.
top: Se abre a pantalla completa, sin frames (pginas independientes, que veremos
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 mail. Se coloca el atributo mailto:
despus del href, seguido del mail.
Ejemplo:
<a href="mailto:leoj90@gmail.com">leoj90@gmail.com</a>,
resultado: leoj90@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 href="mailto:leoj90@gmail.com?subject=Informacion de
producto&ccinfo@microsoft.com">leoj90@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):
leoj90@gmail.com
Importante: Este mtodo no es muy comn para enviar un e-mail, mas adelanta se detalla
ms 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 dilogo 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, podras poner un mensaje que diga "Haz click con el botn derecho del
mouse y selecciona 'Guardar destino como...' para descargar el archivo".
Vamos a ver cual es el cdigo para descargar el Msn Plus! (por ejemplo):
<a href="http://download.msgplus.net/files/MsgPlus-361.exe">Descargar Msn Plus!</a>,
resultado: Descargar Msn Plus!
http://www.espaciolatino.com/tutorhtml/tema6.html
Pues bien si en esta pgina se colocara un enlace en la forma
<A href="tema3.htm">Tema 3</A>
Esta direccin realmente apuntara a
http://www.espaciolatino.com/tutorhtml/tema3.html
Como ltimo detalle a tener en cuenta es el uso de la / como forma de referirse a la raz del
sitio. As este enlace
<A href="/index.htm">Portada</A>
Estara apuntando a http://www.espaciolatino.com/index.htm.
V.7.5. Anclas
Como dijimos antes, es posible acceder a una posicin dentro del documento HTML. Para
ello lo primero que tenemos que hacer es colocar marcas de destino en el documento al
que queremos acceder:
<A NAME="ancla">
A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace
colocamos el smbolo # seguido del nombre del ancla de esta manera:
<A HREF="#ancla">Ancla en esta pgina</A>
Al pulsar sobre este enlace se mostrar en la ventana la parte de la pgina actual que
contiene el ancla. Si queremos acceder a un ancla en otra pgina basta indicarlo al final de
su URL. Como en este ejemplo:
<A HREF="1- 1ra_pag.html#ancla">Ancla en la pgina 1-1ra_pag.html </A>
Usando las anclas o anclajes puedes hacer que cuando las visitas pulsen sobre ese
enlace, la ventana del navegador corra hacia esa parte concreta de la misma pgina o
bien, pase a otra pgina distinta, pero no a su comienzo, sino a la parte media o a la parte
que t desees de esa otra pgina.
Para verlo ms claro an, imagina que en una misma pgina de tu web hablas de pelculas
de accin, y luego, debajo, de pelculas de humor, y bajo sta parte, de pelculas de
ciencia ficcin. Si defines un ancla o un anclaje en cada uno de sus ttulos puedes luego
colocar vnculos de modo que al pulsarlos se dirija justo a esa parte de la pgina.
Si defines un ancla al principio del contenido y colocas un enlace en la parte inferior
indicando "Ir al principio de la pgina", al pulsarlo se dirigir automticamente a la parte
superior, an siendo la misma pgina.
Juan Pedro
Luisa
Ejemplo:
<p>Pases distribuidores</p>
<ul>
<li>Mxico
<li>Estados Unidos
<li>Canad
</ul>
</p>
Resultado:
Pases distribuidores
Mxico
Estados Unidos
Canad
Tambin podemos cambiar el tipo de vieta (el punto), hay tres tipos:
o circle
square
disc
Estos se pueden poner con el atributo type, ya sea en la etiqueta <ul> o <li>:
Ejemplo:
<ul type="square">
<li>Mxico
<li type="circle">Estados Unidos
<li>Canad
</ul>
Resultado:
Mxico
o Estados Unidos
Canad
A partir del HTML 3.2 la etiqueta <UL> admite estos parmetros:
Parmetro
Significado
Resultado
COMPACT
TYPE="disc",
"circle", "square"
Primer
elemento
Segundo
elemento
Tipo disc
Tipo circle
Tipo square
Se ver como
1. Primer elemento
2. Segundo elemento
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
1. No fumar
2. No gritar
3. Tener paciencia
As como para las listas desordenadas se puede cambiar el tipo de vieta, en listas
ordenadas se puede cambiar el tipo de numeracin que se indique en el atributo type y
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>Ordenamos por nmeros</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 nmeros
I. Elemento I
II. Elemento II
Ordenamos por letras
A. Elemento A
B. Elemento B
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>Ordenamos por nmeros romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Elemento 10
<li>Elemento 11
</ol>
<p>Ordenamos por nmeros romanos empezando por el 10 (en romano)</p>
<ol type="i" start="10">
<li>Elemento x
<li>Elemento xi
</ol>
Resultado:
Ordenamos por nmeros romanos empezando por el 10
10. Elemento 10
11. Elemento 11
Ordenamos por nmeros romanos empezando por el 10 (en romano)
x. Elemento x
xi. Element xi
Podemos juntar los estilos y hacer una lista mixta:
<p>Pases distribuidores</p>
<ul>
<li>Canad
<ol>
<li>Toronto
<li>Calgary
</ol>
<li>Estados Unidos
<ol>
<li>Nueva York
<li>Los Angeles
<li>Miami
</ol>
</ul>
Resultado:
Pases distribuidores
Canad
1. Toronto
2. Calgary
Estados Unidos
1. Nueva York
2. Los Angeles
3. Miami
Significado
COMPACT
TYPE="1",
"A", "i", "I"
Resultado
1. Primer
elemento
2. Segundo
elemento
1. Tipo 1
b. Tipo a
Indica al navegador el tipo de numeracin que
C. Tipo A
"a",
preceder a cada elemento de la lista. Para mayor iv.
Tipo i
flexibilidad se admite tambin como parmetro de <LI>.V.
Tipo I
START="num"
3. Primer
elemento
4. Segundo
elemento
1. Primer
elemento
VALUE="num"
4. Segundo
elemento
5. Tercer
elemento
VII. IMAGENES
Una pgina web sin alguna imagen es como el mar sin sal. Sin duda lo mejor de una
pgina web son las imgenes. Como dijimos 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:
vspace - hspace: Indica el espacio (en pxeles) libre de la imagen y lo que la rodea
(texto, otra imagen...)
Significado
TOP
MIDDLE
BOTTOM
LEFT
RIGHT
Muestra
Este es el texto
Este es el texto
Este es el texto
Este es el texto
y esta es otra
lnea
Este es el texto
y esta es otra
lnea
Hay que aclarar que la base del texto es la lnea donde descansan casi todas las letras del
alfabeto excepto algunas como la p, la g o la j.
de que stas se decidan por visitar otra distinta, no ocurrir nada malo, pero si acertamos
la velocidad ser mucho mayor, claro. Tampoco es cuestin de colocar ese valor a todos
los enlaces de tus pginas.
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 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.
Todo esto se logra con la etiqueta <table> la etiqueta <tr> (crea filas) y la etiqueta <td>
(crea columnas).
Veamos 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 creacin de una tabla hay 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 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).
La etiqueta <td>, que sirve para crear columnas, adems 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 (alineacin verticalmente).
colspan: Expande una celda horizontalmente.
rowspan: Expande una celda verticalmente.
Podemos crear tablas dentro de otras, dentro de un <td> y que en vez de que las
columnas sean celdas, sern 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>
Como ves, usando tablas puedes organizar los datos de modo que aparezcan ordenados
en filas y columnas. Tambin puedes hacer que aparezca un borde alrededor de cada dato
y, como puedes ver en la imagen de abajo, combinar algunas celdas:
Una vez entendido esto, se pueden imaginar las aplicaciones que se le pueden dar, desde
por ejemplo, colocar datos ordenadamente, como en el ejemplo anterior, hasta usarla para
darle forma a una web, si en lugar de meros datos, lo que colocas en cada celda son
imgenes y conjuntos de datos. Otro ejemplo, se puede colocar una imagen de fondo en la
primera fila con aspecto de borde superior, otra con aspecto de borde inferior en la fila de
abajo, un men en una celda lateral, y dejar los textos principales de la web para las
celdas de la parte central, tal que as:
El uso de tablas para dar forma a una pgina web ya no se estila, no se recomienda en
absoluto, aunque funcionar funciona. Para dar forma a una web es mejor usar capas o
DIVs. Desde que sali la versin HTML5 incluso se tiende a no usar ni siquiera capas o
DIVs, sino algunas etiquetas nuevas de HTML5.
Recuerda que en esta seccin solo veremos Html, de modo que solo veremos cmo se
usan y definen las tablas. Si luego quieres una anchura concreta para alguna celda o
columna, una altura distinta, un borde ms o menos grueso o invisible, imgenes de fondo
para cierta fila etc. debes aprender a definirlas usando los estilos css. En html tambin se
puede definir, pero no merece la pena, es mucho mejor hacerlo con estilos.
En este caso, tenemos dos celdas dentro de la nica fila que tiene la tabla. Podemos
colocar todas las que queramos y aparecern siempre una al lado de la otra, pues todas
estn dentro de la misma fila, entre las etiquetas <tr> y </tr>
El siguiente ejemplo lo haremos con dos filas. Una tabla con dos filas y con una celda en
cada fila tendra este cdigo Html:
<table>
<tr>
<td>contenido1</td>
</tr>
<tr>
<td>contenido2</td>
</tr>
</table>
En este caso basta con duplicar el cdigo anterior, es decir, colocar otras lneas de
apertura y cierre para la nueva fila y escribir dentro la celda con el contenido.
El ltimo ejemplo por el momento sera una tabla con dos filas y dos celdas en cada una
de ellas. Tendra este cdigo Html:
<table>
<tr>
<td>contenido1</td><td>contenido2</td>
</tr>
<tr>
<td>contenido3</td><td>contenido4</td>
</tr>
</table>
Los recuadros azules son las filas, cada recuadro amarillo es una celda, y el conjunto es la
tabla completa. Adems, se pueden combinar celdas, pero eso lo vemos en las pginas
siguientes.
XI.3. Combinacin de Celdas
En ocasiones crear una tabla de ese modo tan cuadriculado no se acerca mucho a lo que
queremos. A veces nos viene mejor que una de las celdas sea ms larga o ms alta que
las otras, es decir, que ocupe varias celdas. Para lograr esto hay que recurrir a combinar
celdas.
El ejemplo ms clarito que se me ocurre ahora mismo es la de una tabla con, por ejemplo,
tres columnas (verticales) pero en la que aparezca una sola celda arriba del todo,
ocupando la anchura total de la tabla. Algo como esto:
Para conseguir eso, tenemos que colocar en esa primera fila una sola celda, pero hay que
ponerle una palabra mgica para indicar a cuntas celdas corresponde o lo que es lo
mismo, cuantas celdas hemos de combinar para conseguir esa tan ancha.
Como el resto de filas tiene tres celdas, est claro que la superior ha de combinar tambin
3.
Primero coloco el cdigo Html completo de una celda de cinco filas (horizontales) y tres
columnas, o tres celdas por fila, que es lo mismo. En la primera fila solo colocar una
celda, por ahora sin la palabra mgica para ver cmo queda:
<table>
<tr>
<td>Nmeros de Telfono</td>
</tr>
<tr>
<td>Nombre</td><td>Apellido</td><td>Telfono</td>
</tr>
<tr>
<td>Pablo</td><td>Garcia</td><td>123456789</td>
</tr>
<tr>
<td>Pedro</td><td>Sanchez</td><td>234567890</td>
</tr>
<tr>
<td>Antonio</td><td>Fernandez</td><td>345678901</td>
</tr>
</table>
Si copias ese cdigo y lo pegamos en un archivo ponindole la extensin .html podrs ver
el resultado haciendo doble clic sobre ese archivo. Eso si, no vers los bordes pues no los
hemos definido an. Yo los he puesto en las imgenes para que se vea ms clara la tabla,
pero para que aparezcan hay que especificarlo. El resultado con el cdigo de arriba sera
algo as:
Por mucho que queramos, esa celda de arriba nunca podr ser ms ancha que la celda
que tiene debajo, pues la tabla tiende a guardar el espacio de su derecha para otras
celdas, que en este caso no existen. Para conseguir que esa primera celda ocupe todo el
ancho de la tabla es necesario indicar que equivale a tres celdas. De ese modo ocupar
todo el ancho, o el ancho de tres celdas.
El cdigo Html que hay que aadirle a la etiqueta <td> para indicar que equivale a tres
celdas es el siguiente:
<td colspan="3">Nmeros de Telfono</td>
Aadiendo esa palabra mgica conseguimos lo que decamos al principio, una celda
superior que ocupa todo el ancho, tres celdas combinadas:
Es decir, colspan para combinar celdas horizontales y rowspan para combinar celdas
verticales, ok?
Hay que colocar la cantidad de celdas que quieres que ocupe la que combinamos. En
nuestro ejemplo queremos combinar las tres celdas en una, por tanto en el cdigo inicial
tendramos que eliminar el cdigo Html correspondiente a las celdas de imagen de la
segunda y tercera fila y, en la que queda, colocarle <td rowspan="3">, quedando as:
<table>
<tr>
<td rowspan="3">imagen</td><td>contenido1</td><td>contenido2</td> </tr>
<tr>
<td>contenido3</td><td>contenido4</td> </tr>
<tr>
<td>contenido5</td><td>contenido6</td>
</tr>
</table>
El resultado sera el de la ltima imagen que pusimos arriba. Como ves, en el cdigo de la
primera fila se colocan las etiquetas td de la celda de la imagen, y las otras dos de su
derecha. En cambio en las otras dos filas solo se colocan las etiquetas td de los contenidos
y nada de la celda de imagen, pues est toda contenida ya en el cdigo de la fila primera.
Con la palabra <td rowspan="3"> se indicaba ya que la celda ocupara las otras dos de
debajo de esa, por lo que no es necesario colocar nada de cdigo en las filas dos y tres
correspondientes a la celda de imagen.
Quisiramos combinar tan solo las dos celdas de abajo a la derecha, el cdigo Html
correcto sera el siguiente:
<table>
<tr>
<td>contenido1</td><td>contenido2</td><td>contenido3</td>
</tr>
<tr>
<td>contenido4</td><td>contenido5</td><td>contenido6</td>
</tr>
<tr>
<td>contenido7</td><td colspan="2">contenido8</td>
</tr>
</table>
Se ve claro? Colocamos <td colspan="2"> en la segunda celda de la tercera fila (se
coloca el colspan en la celda en la que empieza la combinacin, en este caso en la
segunda celda de la tercera columna que es lo que queramos en este ejemplo), le
escribimos un 2, pues queremos combinar tan solo dos celdas, y eliminamos el cdigo
correspondiente al contenido 9 (<td>contenido9</td>), pues ya no tiene sentido esa tercera
celda para la tercera fila.
En esa imagen se muestra una tabla de 4 filas por 4 columnas en la que se desean
combinar las celdas del interior, quizs para alojar ah el contenido principal de la web
dejando las celdas de los alrededores para mens, logotipos, publicidad, o lo que sea. Eso
no se puede conseguir combinando celdas de una tabla, pero... podemos usar varias
tablas para obtener esa estructura!
Se trata pues de dividir esa estructura en varias tablas, hasta conseguir lo que deseamos.
Se me ocurre por ejemplo, separar la primera fila en una sola tabla (de una sola fila y
cuatro celdas), otra tabla ms para las filas segunda y tercera (sera una tabla con dos filas
y 3 columnas solo) y finalmente para terminar ese diseo, colocar abajo de las tablas
anteriores otra tabla como la primera, con una sola fila y cuatro celdas. Es decir, la
siguiente divisin:
De este modo s que podemos conseguir esa estructura. Bastara tan solo combinar
verticalmente las filas centrales de la segunda tabla para conseguir lo que desebamos al
principio.
El cdigo Html completo de con las tres tablas sera este:
<table>
<tr>
<td>a1</td><td>a2</td><td>a3</td><td>a4</td>
</tr>
</table>
<table>
<tr>
<td>b1</td><td rowspan="2">central</td><td>b4</td>
</tr>
<tr>
<td>c1</td><td>c4</td>
</tr>
</table>
<table>
<tr>
<td>d1</td><td>d2</td><td>d3</td><td>d4</td>
</tr>
</table>
Solo tendras ahora que eliminar los mrgenes o separaciones que pudieran existir entre
esas tres tablas para que quedaran totalmente pegadas para conseguir lo que queramos.
Pero recuerda, todo lo que tenga que ver con mrgenes, anchuras, etc, lo dejamos para
los estilos CSS. Por lo que en cuanto a Html ya lo tendramos terminado. Cualquier otra
combinacin seguro que se puede conseguir sin ms que darle un poco de rienda suelta a
la imaginacin. Tambin podras colocar una tabla dentro de la celda de otra tabla si fuera
necesario. Son cosas raras ya, pero es posible, claro.
XII. MARQUESINAS
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, imgenes, enlaces...
La etiqueta para esto es <marquee>, pero tambin podemos agregar diferentes 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:
<div align="center"><marquee scrollAmount="3" width="300" height="90"
direction="up">Texto<br>desplazado<br>hacia<br>arriba</marquee></div>
Hay un atributo ms, 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>
XIII. FORMULARIOS
Realmente, escribir y publicar contenidos en nuestras pginas web seria algo totalmente a
ciegas si no conocemos la opinin de nuestros lectores. Por otro lado, no se me ocurre
cmo podramos gestionar un pedido de compra sin dar la oportunidad a los visitantes a
comunicarnos qu y cunto quieren, verdad? Para estas cuestiones y para muchas
aplicaciones ms, surgen los formularios.
Los formularios son recuadritos donde las visitas pueden escribir datos, datos que luego
sern procesados para una u otra accin. Ser enviados a una direccin de email que le
indiquemos, o pasados a un departamento de ventas para procesar un pedido, o incluso ir
a parar a un foro en forma de mensaje o respuesta. Es uno de los mtodos ms bsicos y
utilizados para la comunicacin entre webmaster y visitantes.
Las etiquetas que abren y cierran un formulario son <form> y </form> (apertura sin barra
y cierre con barra, como siempre). Adems, en la etiqueta de apertura se aade qu
queremos que se haga con los datos que se recojan, o mejor dicho, qu archivo va a
procesar esos datos.
Mira este ejemplo de abajo:
......
<form method="post" action="mostrardatosenpagina.php">
......
</form>
.......
Es un formulario vaco, pero se ve cmo se indica a qu archivo se van a enviar los datos
recogidos por el formulario. Otro estudio ser cmo crear ese archivo, pero ya escapa del
alcance de este apartado en el que solo veremos puro Html. Las pginas webs no son solo
permiten presentar documentos de forma ms o menos atractiva al destinatario final, sino
que tambin proporcionan elementos para interactuar con l.
De esta manera el usuario final puede enviar su opinin de la pgina al autor, o realizar
una compra en lnea.
Ahora, entre esas dos etiquetas, hemos de colocar los recuadritos que recopilarn la
informacin del visitante. Existen recuadros de muchos tipos. Unos son para recoger
algunas palabras, otras para grandes textos, tambin los hay para recoger contraseas, o
desplegables en los que se muestran varias opciones de las que el visitante ha de recoger
una o varias de ellas, adems de casillas de verificacin que se pueden activar o
desactivar, etc.
Un ejemplo sencillo de formulario:
Tu nombre:
Ests registrado?
Si
No
<FORM ACTION="" METHOD="POST" name="formul">
Tu nombre:<BR>
<INPUT NAME="nombre" TYPE="TEXT" SIZE="32"/><BR>
¿Estás registrado?<br>
<label><input type="radio" name="Si" value="1">Si</label><br>
<label><input type="radio" name="Si" value="0">No</label><br><BR>
<INPUT TYPE="Submit" VALUE="Enviar">
<input name="Reset" type="reset" id="Reset" value="Borrar">
</FORM>
El formulario est formado por una serie de elementos (cajas de texto, casillas de
verificacin, botones...) encerrados entre las etiquetas <FORM> </FORM>.
Mediante el envo de formularios se pueden enviar datos de un artculo, de una encuesta o
normalmente para enviar un mensaje a un e-mail.
Para hacer esto deberamos saber un poco sobre los lenguajes de tipo servidor, ASP o
PHP, pero por el momento seguiremos con html.
La etiqueta para un formulario, como ya sabemos 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 mail a donde se enviarn los datos o el nombre del archivo .php o .asp
Ejemplo:
<form action="mail@dominiio.com" method="post"></form> o <form action="form.php"
method="post"></form>
name: es el nombre que identifica al formulario, til si se usan scripts dentro de la pgina.
XIII.1. 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...
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 botn.
image: Hace que una imagen sea el enlace (la imagen se muestra con el atributo
src).
submit: Enva 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 nmero de caracteres mximo para escribir.
size: Indica el tamao del cuadro de texto.
Ejemplo:
<form method="post">
Nombre <input type="text" name="nombre" maxlength="10" size="15">
Password <input type="password" name="contrasea" maxlength="10" size="15">
Ejemplo:
<textarea cols="30" rows="4" name="comentario"></textarea>
prioridad=on
comentario: hola, quiero informacin.
Nota: Si est activada el cuadro de seleccin, el valor al recibir el mail ser on, si no se
activ 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 mail por defecto de la
computadora del usuario (suele ser Outlook Express).
<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>
Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que est
codificado en ninguna manera. Ambos tipos comparten todos sus atributos que son:
Parmetro
Significado
SIZE
Pero si necesitamos que el usuario escriba ms lneas de texto pues usamos la etiqueta
<TEXTAREA></TEXTAREA>:
Comienza a escribir
Si escribimos algn texto dentro de esta etiqueta, ese texto aparecer por defecto en ese
rea de texto. Admite estos parmetros:
Parmetro Utilidad
ROWS
COLS
XV.1. Opciones
Para que el usuario pueda marcar una de entre varias opciones podemos usar un campo
INPUT de tipo RADIO. En nuestro ejemplo lo hemos usado:
Si<INPUT
NAME="Registrado" Si
TYPE=RADIO VALUE="1"><BR>
No<INPUT
NAME="Registrado" No
TYPE=RADIO VALUE="0"><BR>
Fjate que ambos INPUT usan el mismo atributo NAME, de esa manera el navegador los
reconoce como un juego de respuestas alternativas.
Parmetro Significado
VALUE
CHECKED Si lo indicamos en una de las opciones esta ser la que est activada por defecto.
<OPTION>Ingls</OPTION>
<OPTION>Francs</OPTION>
<OPTION>Alemn</OPTION>
</SELECT>
Los parmetros que admite SELECT son las siguientes:
Parmetro Significado
SIZE
El nmero de opciones que podremos ver. Si es mayor que 1 veremos una lista de
seleccin con un scroll y, si no, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir ms de una opcin, para ello el usuario utilizar la tecla
CTRL y el botn activo del ratn.
Y OPTION estos:
Parmetro Significado
VALUE
SELECTED La opcin con esta propiedad ser la que aparezca seleccionada por defecto.
Te gusta el curso?
XV.4.1. Botones
Una importante mejora en el HTML 4 es el nuevo control <BUTTON> que permite
enriquecer la etiqueta de texto que hasta ahora tenan los botones de formulario. Ahora
estos elementos pueden tener cualquier contenido HTML, como por ejemplo imagen con
un texto.
Por ejemplo el siguiente cdigo:
<BUTTON
TYPE="button">
Inicio
<img
src="imgs/im_crear/bolamas.gif"
width="10" height="10">
</BUTTON>
Los parmetros de dicha etiqueta son TYPE, que podr tomar los valores SUBMIT (por
defecto), RESET y BUTTON, NAME y VALUE.
XV.4.2. Etiquetas
Los controles tipo LABEL permiten asociar etiquetas a los controles de formulario. Es decir
ahora el texto que suele acompaar a los campos que debe rellenar el usuario son solo
eso texto, pero con esta etiqueta ese texto se convierte en un elemento activo que forma
parte del campo y podemos seleccionar ste pulsando sobre la etiqueta.
Observa el uso del atributo for usado para asociar la etiqueta al campo cuyo ID tenga el
mismo valor que este for
<INPUT ID="Curso" TYPE=CHECKBOX>
<LABEL for="Curso"> Me gusta este curso
</LABEL>
En el primer caso el click sobre la etiqueta acta igual que sobre el control.
La posicin del ttulo (LEGEND) puede controlarse usando el parmetro ALIGN, que por
defecto es TOP (arriba), pero puede ser BOTTOM (abajo) a la LEFT (Izquierda) o RIGHT
(derecha) .
Por tanto se usa la etiqueta Html <div> cuando queremos darle un nombre o identificador
no a un trozo de elemento, sino a un elemento entero (el prrafo completo) o ms
habitualmente, a un grupo de elementos, varios prrafos, varias imgenes, un bloque
formado por varios prrafos e imgenes, o incluso la pgina completa. De ese modo,
podemos darle los estilos definidos a ese nombre en la hoja de estilos, a todos los
elementos de ese grupo.
De nuevo, veamos algunos ejemplos concretos para aclarar el concepto. Imagina que
queremos darle un ancho concreto a toda la web. Podramos crear un estilo en la hoja de
estilos llamado "anchura", darle el valor de 800px de ancho y.... a quin se lo aplico? Pues
por ejemplo, a toda la web, no? Para eso bastara con colocar la lnea:
......
</head>
<body>
<div class="anchura">
......
al principio del contenido de la web, es decir, justo despus de la etiqueta <body> y luego,
antes de </body> colocar el cierre de ese div con esta otra lnea:
.
</div>
</body>
</html>
O imagina que tenemos una lista de elementos construida con las etiquetas que vimos
atrs, las etiquetas <ul> y <li> con las que hemos hecho el men lateral. Para darle la
forma, anchura y colores que queramos podramos encerrarla dentro de un div y darle el
nombre de "menu" de este modo:
......
<div class="menu">
<ul>
<li>enlace 1</li>
<li>enlace 2</li>
<li>enlace 3</li>
</ul>
</div>
......
Pasamos ahora a ver un par de propiedades relacionadas con estas dos etiquetas tan
prometedoras. Antes destacar que cualquier elemento o conjunto de elementos encerrados
por la etiqueta <div> es una capa.
Si, las capas no son ms que eso, agrupaciones de elementos entre esas etiquetas con el
fin de poder aplicarle estilos a lo que tenga en el interior. Ya sabes entonces q son las
famosas capas, esa tecnologa tan moderna para hacer webs profesionales!!
XVI.3. CLASE E ID
En las pginas anteriores, mientras hablbamos de las etiquetas <div> y <span>, pusimos
la propiedad class para indicar el nombre que identificara a ese grupo o cachito de
elemento, recuerdas? No coment nada ms para no mezclar unas cosas con otras, pero
ahora que sabemos manejar las etiquetas <div> y <span> puedo comentar ya lo siguiente.
Existen dos formas de asignar un nombre a un <div> o a un <span>. Una la hemos visto
en los ejemplos anteriores, la propiedad class, pero existe otra ms, la propiedad id.
Vamos a ver cundo se utiliza una y cundo la otra.
Podramos decir que existen dos tipos de estilos. Los que se definen para objetos
concretos, como el men lateral, la cabecera de la pgina, el pie de pgina, etc, y los
estilos que usamos a discrecin, como los estilos para resaltar ciertos textos, o para dar
unas propiedades caractersticas a ciertos enlaces.
Estilos estos ltimos que podemos aplicar a este elemento de aqu o a aquel otro de all.
Entonces, asignaremos un nombre con la propiedad id cuando pertenezca a un objeto
que solo aparece una vez en cada pgina web. Es el caso del pie de pgina (no suele
haber dos), o a la cabecera (suele haber uno solo), o del men lateral. Son objetos que en
caso de aparecer en una de las pginas de nuestra web, lo hacen una sola vez.
En cambio hay otros estilos que podemos aplicar a discrecin y repetidas veces. Si creo un
estilo llamado "resaltado" que puedo aplicar a una palabra de cierto prrafo, y a otro grupo
de palabras de otro prrafo distinto, y a aquel enlace de ah arriba, etc. es decir, que
vamos a aplicar varias veces en una pgina de nuestra web, usaremos en lugar de la
propiedad id la propiedad class para asignar el nombre de estilo, ok?
XVII. MAPAS
Recordemos que los enlaces en las pginas web podan escribirse con un texto o con una
imagen. Es decir podamos tener una imagen que al ser pulsada con el ratn nos llevaba a
otra pgina. Pues bien un mapa de imagen es algo parecido pero en el que l imagen no
tienen asociado un solo enlace sino varios: depende de que parte de la imagen pises para
ir a uno u otro destino. Esto se puede hacer de dos maneras:
Los ms utilizados sin duda actualmente son los primeros, los mapas del lado del cliente,
pues no exigen ningn apoyo del servidor y por tanto los puede usar cualquier webmaster
en su propia pgina.
COORDS
HREF
NOHREF
Zona inactiva
ALT
Como podemos ver, para declarar correctamente una zona necesitamos conocer cmo se
definen exactamente las formas y coordenadas:
SHAPE
COORDENADAS
Rectangular
RECT
Circular
CIRC
Polgono
irregular
POLY
Toda
imagen
la
DEFAULT No se necesitan
Nota: Hay que tener en cuenta que, cuando dos zonas se solapan, la que est declarada
primero es la que tiene preferencia. Por eso declaramos al final una zona que no conduce
a ningn URL por si el usuario pulsa fuera de las zonas activas.
- Dentro del <FRAMESET> definimos los marcos que componen el conjunto y la accin
alternativa para navegadores que no soporten marcos. A cada uno de los marcos le
ponemos un nombre y especificamos qu pgina HTML se mostrar en l (etiqueta
<FRAME>). Slo queda definir lo que ver el usuario en el supuesto de que su navegador
no soporte frames (etiqueta <NOFRAMES>).
Para indicar en cuantas partes dividiremos la pgina, debemos indicar el tamao de cada
parte separado de una coma ( , ). Por ejemplo, si van a ser solo dos frames, indicaramos
as: 40%,60%. As, el primer frame ocupar el 40% de la pgina, y el segundo el 60% de
la pgina.
Debemos crear un archivo principal, que es el que contiene frames, y el ttulo que se
ponga en este, ser el que se mostrar. Los valores del atributo cols o rows podemos
indicarlos 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), podemos utilizar
un comodn (*) para cubrir el espacio que sobra.
Veamos unos ejemplos para entender mejor:
Creamos 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:
<html>
<head> <title>Pgina 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 estarn en la pgina
principal (index.html). En este caso solo pondremos unas palabras y cambiamos el color
de fondo:
pagina1.html:
<html>
<head> <title>Pgina 1</title></head>
<body bgcolor="#CC0000">
<font size="4">Texto de la p1</font>
</body>
</html>
pagina2.html:
<html>
<head> <title>Pgina 2</title></head>
<body bgcolor="#0000FF">
<font size="4" color="#FFFF00">Texto de la p2</font>
</body>
</html>
Como se puede 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 tamao lo pondremos en pxeles, tambin
eliminamos el borde entre frames. La primera fila ocupar 43 pxeles (de alto), la segunda
colocamos un * (comodn) para que ocupe el espacio que sobre, y la tercera fila 200
pxeles.
Creamos el archivo principal (frames.html -en este caso) que contiene las 3 pginas:
frames.html
<html>
<head> <title>Pgina 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>Pgina 1</title></head>
<body bgcolor="#00CCFF">
<font size="4" color="#FFFF00">Texto de la p1</font>
</body>
</html>
frame2.html
<html>
<head> <title>Pgina 2</title></head>
<body bgcolor="#00CC00">
<font size="4" color="#000055">Texto de la p2</font>
<a href="body.html" target="frame_2">Ir a la pgina del ejemplo de BODY</a> </body>
</html>
frame3.html
<html>
<head> <title>Pgina 3</title></head>
<body bgcolor="#111111">
<font size="4" color="#FFFFFF">Texto de la p3</font><br><br>
</body>
</html>
Importante: En el archivo principal (el que contiene los frames) no debe contener la
etiqueta
<body>.
Si queremos abrir una pgina 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>Pgina 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>Pgina 2</title></head>
<body bgcolor="#00CC00">
<font size="4" color="#000055">Texto de la p2</font>
<a href="body.html" target="frame_2">Ir a la pgina del ejemplo de BODY</a> </body>
</html>
Ahora un ejemplo de como hacer una pgina 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 comodn ( * ) y
cerraremos los dos hasta el final:
Cdigo:
3frames.html (archivo principal)
<html>
<head> <title>Pgina 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>
ALIGN
Alineacin del marco respecto al texto que lo rodea (botton, right, left, middle)
SRC
HEIGHT
WIDTH
MARGINWIDTH
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 pgina:
<div align="center"><iframe src="interno.html" name="pag" width="300" height="250"
frameborder="no"></iframe></div>
_top : Elimina todos los marcos existente y muestra la nueva pgina en la ventana original
sin marcos.
_blank : Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
_self : Muestra la nueva pgina en el marco donde est declarado el enlace.
_parent : Muestra la nueva pgina en el <FRAMESET> que contiene al marco donde se
declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace
situado en el marco ejemplo cuyo parmetro TARGET fuese igual a _parent eliminara la
separacin entre los marcos ejemplo y principal y mostrara en ese nuevo marco la nueva
pgina.
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 volmen que se escuchar el sonido (mnimo -10,000 y mximo 0).
Cdigo: