Vínculos

Vnculos.
Es una de las herramientas ms interesantes de los documentos html. La sintaxis para

establecer
un enlace es: <a href="destino">texto</a>
Donde destino es el documento con el que se enlaza y texto es la palabra o palabras que, al
pulsar, nos llevan a ese destino (tambin puede ser una imagen).
Vnculos a otro documento del mismo sitio.
Nuestro sitio estar formado por varios archivos generadores de varios documentos. Los
documentos tendrn la extensin .html (o .htm). Para establecer el vnculo escribiremos
sencillamente el nombre del documento en el destino y, entre las etiquetas de apertura y cierre
la
palabra o palabras que activarn el vnculo.
Como ejemplo vamos a establecer un enlace a la primera pgina de este sitio (primer
documento)
cuyo archivo tiene como nombre index.htm
<html>
<head>
<title>
Vnculos 1
</title>
</head>
<body>
<center>
<a href="index.htm">
Ir al inicio de este curso
</a>
</center>
</body>
</html>
Vnculos a otro documento externo al sitio.
En este caso en destino deberemos escribir toda la direccin URL del sitio.
Vamos a establecer un enlace a la pgina del buscador Google cuya direccin URL es
http://www.google.com
<html>
<head>
<title>
Vnculos 2
</title>
</head>
<body>
<center>
<a href="http://www.google.com">
Ir a Google
</a>
</center>
</body>
</html>
Muchas veces puede resultar interesante escribir la propia direccin URL como activador del
vnculo:
<html>
<head>
<title>
Vnculos 3
</title>
</head>
<body>
<center>
Ir a Google:<br>
<a
href="http://www.google.com">
http://www.google.com</a>
</center>
</body>
</html>
Vnculos a otra parte del mismo documento.
A veces cuando el documento es muy extenso conviene establecer formas rpidas para subir o
bajar a una parte determinada del documento.
Para realizar esto, primero hay que establecer un ancla o marca en la/s parte/s del documento
a
los que queremos acceder de forma rpida.
La sintaxis del ancla es <a name="ancla1"></a> ponindolo en el punto de destino. No hace
falta
que haya nada entre la etiqueta de apertura y cierre.
En el punto activador escribiremos <a href ="#ancla1"> Ir a la parte tal </a>.
Como ejemplo vamos a movernos por las partes anteriores a esta lnea del punto en el que
estamos.
En primer lugar hemos nombrado las anclas con el mismo nombre que tienen los diferentes
apartados (cambiando el punto por un guin bajo) a los que vamos a desplazarnos:
cdigo
Ir al titulo <a href="#1>Ir al apartado 1</a>
Ir al subtitulo1 <a href="#1_1>Ir al apartado 1.1</a>
Vnculos a una parte concreta de otro documento de nuestro sitio.
Se pueden combinar este ltimo tipo de enlaces con el vnculo a otro documento de nuestro
sitio.
La sintaxis sera <a href="paginax.htm#ancla"> Ir al apartado tal de tal pgina </a>
<html>
<head>
<title>
Vnculos 4
</title>
</head>
<body>
<center>
<a href="diez.htm#13_2">
Ir al apartado 13.2 de este
curso
</a>
</center>
</body>
</html>
Vnculos de correo electrnico.

Vamos a ver los enlaces a una direccin de correo electrnico. Cuando el navegante pinche
sobre
el activador del vnculo, se abrir el programa de correo con la direccin del destinatario ya
escrita
en el mensaje.
La sintaxis es <a href="mailto: edgar_ilo@educailo.com"> Mndame un mensaje </a>
<html>
<head>
<title>
Vnculos 5
</title>
</head>
<body>
<center>
<a href="mailto:edgar_ilo@educailo.com">
Dime lo que piensas de este curso
</a>
</center>
</body>
</html>
Imagen como vnculo a otro documento.
En lugar de texto podemos utilizar una imagen como vnculo.
En primer lugar deberemos escribir la etiqueta de apertura del vnculo y luego la etiqueta de
inclusin de la imagen cerrando, posteriormente, la etiqueta del vnculo.
Para este tipo de vnculos se suelen emplear pequeas imgenes, aunque, a veces, tambin
se
utilizan imgenes de gran formato (sobre todo en los portales de los sitios).
<html>
<head>
<title>
Vnculos 6
</title>
</head>
<body>
<center>
Visita la pgina de TERRA:<P>
<a href="http://www.terra.com.pe">
<img src="imag/logo_terra.gif">
</a>
</center>
</body>
</html>
Para eliminar este borde tan antiesttico que se coloca alrededor de la imagen tenemos el
atributo
border="0"
<html>
<head>
<title>
Vnculos 7
</title>
</head>
<body>
<center>
Visita la pgina de TERRA:<p>
<a href="http://www.terra.es">
<img src="imag/logo_terra.gif"
border="0">
</a>
</center>
</body>
</html>
Marcos.
La estructura de los marcos o frames es un poco compleja.
Empezamos definiendo una estructura de marcos: Consiste en una divisin de la pantalla en
varias
zonas de tal forma que, en una de las partes, puede haber un men de vnculos, por ejemplo,
que
permanecer constante y, en la otra, parte principal o main frame, se cargarn las pginas
pinchadas desde el frame de vnculos.
Puede haber ms partes, por ejemplo, una parte superior con el ttulo del sitio que
permanecer
constante segn vayamos navegando.
Vamos a empezar definiendo una estructura de dos frames: Una columna izquierda, ms
estrecha,
y una columna derecha, ms ancha, como frame principal o main frame.
Para empezar hay que saber que, de entrada, tenemos que generar tres documentos (tres
archivos .html):
El primero, el ms extrao, que definir la estructura de los marcos.
El segundo, que se cargar en el marco izquierdo.
El tercero que se cargar en el marco derecho.
Por otro lado, tenemos que decidir, cunto espacio vamos a asignar a cada marco: Decidimos
que
el marco izquierdo ocupar el 15% del espacio y el marco derecho, el resto (o el 85%).
Veamos la sintaxis del primer archivo, la estructura de los marcos:
<html>
<head>
<title>
Estructura de marcos
</title>
</head>
<frameset cols="15%,*">
<frame src="indice.html">
<frame src="saludo.html" name="principal">
</frameset>
</html>
Esto lo guardamos con el nombre index.html porque va a ser lo que se abra al principio.
Vamos a comentar un poco la sintaxis empleada:
Lo primero que observamos es que, en vez de la etiqueta <body> hemos empleado la
etiqueta <frameset> en ingls algo as como estructura de marcos.
El atributo cols est definiendo las columnas y el espacio reservado a cada una. Si, en vez
de columnas hubiramos querido establecer dos filas, hubiramos empleado el atributo
rows.
A continuacin decimos que la primera columna va a ocupar el 15% del espacio. Y, la
segunda, el resto. Esto indica el asterisco *. Hubiramos podido, perfectamente, escribir el
tanto por ciento que queda, es decir, el 85%: <frameset cols="15% , 85%>.
A continuacin viene la etiqueta <frame> (del primer frame, el de la izquierda) con el
atributo src para indicar qu archivo se va a cargar en ese espacio. En nuestro caso, el
archivo se llama indice.html .
Despus viene la etiqueta del segundo marco. En l se cargar el archivo que he llamado
saludo.html .
En este marco principal hay otro atributo que es el nombre que le vamos a dar. Esto es
necesario porque, en este espacio, se van a cargar otros documentos cuando pulsemos
los enlaces y hay que ponerle un nombre para decrselo a los enlaces. El nombre que yo le
he puesto es principal.
Si abrimos, en estos momentos nuestro index.html nos va a salir: resultado
Esto ocurre porque no hemos creado los dos archivos que se tienen que cargar en cada uno de
los
dos marcos. Pero ya vemos que el espacio s que se ha diferenciado.
Creo el archivo indice.html que se cargar en el marco de la izquierda:
<html>
<head>
<title>
Marco de la izquierda
</title>
</head>
<body bgcolor="#dfdfdf">
Esto se cargar en la izquierda
</body>
</html>
Y lo guardo como indice.html
Creo el archivo saludo.html que se cargar en el marco de la derecha:
<html>
<head>
<title>
Marco de la derecha
</title>
</head>
<body bgcolor="#ff9999">
<center>
<h1>
Bienvenido a mi pgina web
</h1>
</center>
</body>
</html>
Lo guardamos con el nombre saludo.html
Abrimos el archivo index.html:
Nos queda por crear un cuarto documento, un cuarto archivo .html para que sirva de ejemplo
en la
sintaxis a emplear para que los enlaces se carguen en el frame principal.
Para ello, primero tendremos que crear el documento. Sea algo as:
Nos queda por crear un cuarto documento, un cuarto archivo .html para que sirva de ejemplo
en la
sintaxis a emplear para que los enlaces se carguen en el frame principal.
Para ello, primero tendremos que crear el documento. Sea algo as:
<html>
<head>
<title>
Documento a cargar en marco principal
</title>
</head>
<body bgcolor="#ffcccc">
<center>
<h2>
Has pulsado el enlace correctamente
</h2>
</center>
</body>
</html>
Lo guardamos con el nombre enlace.html
Por otro lado, tendremos que modificar el documento indice para poner el
vnculo:
<html>
<head>
<title>
Marco de la izquierda con enlace
</title>
</head>
<body bgcolor="#dfdfdf">
<a href="enlace.html" target="principal">
enlace
</body>
</html>
Lo guardamos con el mismo nombre que tena: indice.html
Formularios.
El formulario es una interesante herramienta de toda pgina web. Permite recabar informacin
ordenada de los visitantes, y almacenar esa informacin de alguna manera.
Nosotros vamos a trabajar un formulario cuyos datos sean enviados a una direccin de correo
electrnico normal y como datos no encriptados.
La otra forma, ms compleja, es ser enviado a nuestro servidor a travs de un programa
determinado que deber estar instalado en ese servidor, para almacenar la informacin y
procesarla. Como esto no est al alcance del usuario corriente, vamos a centrarnos en el
primer
tipo de formularios.
Los formularios estn dentro de las etiquetas <form> y </form>. Los atributos de la etiqueta de
apertura del formulario indicarn la forma de enviar la informacin:
action="mailto:direcciondecorreo". El formulario ser enviado a la direccin de correo:
edgar_ilo@educailo.com (mi correo)
method="post". Los datos se enviarn inmediatamente por correo electrnico.
enctype="text/plain". Las respuestas se enviarn sin codificacin.
17.1.- Campo de texto de una lnea.
<html>
<head>
<title>
Formulario 1
</title>
</head>
<body>
<form action="mailto:edgar_ilo@educailo.com"
method="post" enctype="text/plain">
<table align="center">
<tr>
<td width="50%" align="right">
Escribe tu nombre:
</td>
<td width="50%" alignn="left">
<input type="text" name="Nombre" size="10"
maxlength="15">
</td>
</tr>
</table>
</form>
</body>
</html>
Guardamos el formulario con el nombre form1.html

Hemos colocado, dentro del formulario, una tabla con dos columnas para mejorar la
presentacin
de los datos: En la columna izquierda, y alineado a la derecha, colocamos el texto de lo que se
pide (en este caso el nombre) y, en la columna de la izquierda y, alineado a la derecha, el
campo
de texto:
input type (entrada de tipo) texto.
name es lo que aparecer en el mensaje de correo delante de lo que introduzca el
ususario.
size nos indica el tamao de la caja de texto de una lnea. En este caso 10 caracteres.
maxlenght indica la cantidad mxima de caracteres que puede introducir el usuario.
De poco sirve el formulario si no tenemos la opcin de enviarlo. As que vamos a proceder a la
introduccin del cdigo necesario. Normalmente, adems del botn de enviar se suele poner
otro
para borrar los datos introducidos.
<html>
<head>
<title>
Formulario 2
</title>
</head>
<body>
<form action="mailto:edgar_ilo@educailo.com"
method="post" enctype="text/plain">
<table align="center">
<tr>
Escribe tu nombre:
</td>
<td width="50%" alignn="left">
<input type="text" name="Nombre" size="10"
maxlength="15">
</td>
</tr>
<tr>
<input type="submit" value="Enviar">
</td>
<td width="50%" align="left">
<input type="reset" value="Borrar">
</td>
</tr>
</table>
</form>
</body>
</html>
Guardamos el archivo con el nombre form2.html

Hemos introducido otra fila en la tabla con:
input type submit (enviar).
value ser lo que aparezca escrito en el botn.
input type reset en ingls borrar.
value ser lo que aparezca escrito en el botn.
Cuando, una vez escrito el dato, el usuario pulse el botn de enviar, aparecer un mensaje
indicando que se abrir el programa de CORREO ELECTRNICO:
Hay que aceptar para que el formulario sea enviado a mi correo electrnico.
Supongamos que un tal Federico ha rellenado el formulario. En la bandeja de entrada de mi
correo
aparecer este mensaje:

Vínculos

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Vínculos

Cargado por

Copyright:

Formatos disponibles

Vnculos.

Es una de las herramientas ms interesantes de los documentos html. La sintaxis para

Vnculos de correo electrnico.

Guardamos el formulario con el nombre form1.html

Guardamos el archivo con el nombre form2.html

También podría gustarte