Como mencioné anteriormente aún queda mucho que decir con respecto a los Links y las Tablas y por ello dedicaré esta tercer entrega de HTML a este tema.
Los Links dentro de un HTML son uno de los elementos esenciales por que permiten asociar e informar al navegador a donde tiene que ir buscar el documento HTML para mostrar la información que el usuario requiere.
Por lo cual debemos aclarar que existen 2 formas de utilizar los links y esto son "Links Relativos" o "Links Absolutos".
Generalmente los mas usados son los relativos puesto que se utilizar para llamar a documentos HTML dentro del mismo servidor, mientras que los absolutos son links completos de direcciones de web.
Pero basta de palabras y vamos con ejemplos:
Supongamos que nosotros tenemos la siguiente distribución de archivos:
Así es como ustedes deberían tener su web (o al menos es lo recomendable).
Como pueden ver al mismo nivel que el archivo "Index" existen otros como "Empresa", "Productos", etc.
Aclaración principal: El archivo "index.html" es el archivo que se muestra cuando uno ingresa a una página (en realidad depende del servidor en donde se "instale" la web puesto que algunos requieren de un archivo llamado "home.html". Por lo cual deben verificar que solicita su server para que la gente pueda ingresar a su web [Mas adelante detallare todo este tema, por el momento solo lo menciono]).
Lo que haré a continuación es crear una tabla de links hacia todos los elementos de esta web:
<html>
<head>
<title>Links</title>
</head>
<body>
<table border="1">
<tr>
<td><a href="index.html">Index</a></td>
<td><a href="empresa.html">Empresa</a></td>
<td><a href="productos.html">Productos</a></td>
<td><a href="contacto.html">Contacto</a></td>
<td><a href="http://www.programandoeldestino.blogspot.com">Programando el Futuro</a></td>
</tr>
</table>
</body>
</html>
Visualmente queda así:
En este ejemplo vemos los dos tipos de links.
Links Relativos: Son los dirigidos a index.html, empresa.html, productos.html y contacto.html
Links Absolutos: Es el dirigido a http://www.programandoeldestino.blogspot.com
Como pueden ver los links relativos son mucho mas cortos, esto se debe a que omiten el protocolo y el servidor.
Esto se debe a que el navegador entiendo que se refiere a un link relativo cuando carece de estas características y toma automáticamente las del sitio actual. Es decir, que si estoy dentro de mi sitio "http://www.misitio.com" visualizando la pagina index.html y el link es hacia empresa.html y el código será <a href="empresa.html"> y el navegador tomará el protocolo (http) y el servidor (www.misitio.com) del sitio actual donde está navegando.
En cambio al encontrarse con "http://www.programandoeldestino.blogspot.com" redirige directamente al servidor determinado con el protocolo establecido en el link.
Los links pueden tener mas partes ademas de protocolo y servidor, estos son "ruta", "consulta/parámetro" y "sección".
Quizás en un comienzo no necesitemos de ellos pero esta bien mencionarlos.
Los links con ruta permiten especificar dentro de un sitio un archivo determinado a mostrar por ejemplo: http://www.misitio.com/empresa.html.
La "ruta" del link es "/empresa.html" puesto que si nosotros solo escribimos "http://www.misitio.com" iremos a "index.html" en cambio de la manera del ejemplo iremos directamente al archivo "empresa.html", practico y simple.
La "consulta/parámetro" es utilizada con lenguajes de programación mas complejos como puede ser un php, asp, etc. Un ejemplo podría ser:
http://www.misitio.com/productos.php?id=12
Como pueden observar luego de la extensión ".php" esta escrito lo siguiente "?id=12" esto significa que la "variable" id tiene el valor de "12". Esto es muy utilizado en programación web pero para el HTML no se explota demasiado.
Por último la "sección" si se utiliza en HTML y funciona con anclas.
Lo que permiten hacer estos links es dirigir al usuario a un sector determinado de un documento HTML en lugar de cambiar de documento.
Ejemplo:
<html>
<head>
<title>Links Anclas</title>
</head>
<body>
<a href="#ancla1">Ancla 1</a>
<a href="#ancla2">Ancla 2</a>
<a href="#ancla3">Ancla 3</a>
<br />
<a name="ancla1"><h2>Ancla 1</h2></a>
<p>Aqui esta el Ancla 1</p>
<br />
<br />
<br />
<hr />
<a name="ancla2"><h2>Ancla 2</h2></a>
<p>Aqui esta el Ancla 2</p>
<br />
<br />
<br />
<hr />
<a name="ancla3"><h2>Ancla 3</h2></a>
<p>Aqui esta el Ancla 3</p>
<br />
<br />
<br />
<hr />
</body>
</html>
Primero necesito aclarar dos nuevas etiquetas "<br />" y "<hr />"
"BR" es salto de linea mientras que "HR" es una regla horizontal. La terminación " />" [Espacio Barra Mayor Que] se debe a que son etiquetas únicas que no se abren y cierra, solo se utilizan una vez y se cierran cuando se las usa de esa manera, es decir, en lugar de que exista "<hr></hr>" solo se utiliza "<hr />" o sea abre y cierra.
Este ejemplo será mas visual si cuantos mas <br /> o texto haya entre cada Ancla.
Ahora bien, las anclas cuentas de dos partes la primera un link con el nombre y por otra parte un link convocando al ancla.
En el ejemplo el link <a href="#ancla1"> significa para el navegador "ve al sector donde esté el ancla1" y el link <a name="ancla1"> significa "acá esta el ancla1".
En conclusión para determinar donde esta el ancla se utiliza el atributo "name" y para llamar a un ancla por su nombre se utiliza el atributo "href" siempre iniciado con el numeral(#) continuado del nombre del ancla ("#nombreancla).
Así queda visualmente las anclas:
Para que el efecto del ancla funcione utilicen mas <br /> o inserten mas texto entre cada ancla o en su defecto achiquen el tamaño de su navegador para que no llegue a verse toda la pagina, para así observar como se posiciona la pagina dependiendo del ancla que se elija.
Si desean anclar un link, es decir, que cuando el usuario clickee en él vaya directamente a un sector determinado de la pagina el código es el siguiente:
<a href="empresa.html#nuestraempresa">Nuestra Empresa</a>
Una vez que el usuario clickee sobre "Nuestra Empresa" el navegador irá a ese archivo HTML y se ubicará en el sector que tenga un ancla cuyo valor "name" sea "nuestraempresa", ejemplo:
<a name="nuestraempresa">Nuestra Empresa</a>
Eso es todo, hasta la próxima entrega.
No hay comentarios:
Publicar un comentario