Y aquí tenemos el final de éste módulo de cuatro entradas de los primeros pasos que hay que dar para empezar a aprender el HTML. Si has visto la primera, segunda y tercera entrada te darás cuenta que ahora puedes escribir y estructurar textos comprensibles con HTML, pero falta el elemento especial que transforma las webs en hipertextos: los enlaces o hiperenlaces. Si acabas de empezar te recomiendo que antes visites la entrada introductoria al HTML.
Los enlaces
Los enlaces (también llamados hiperenlaces, vínculos o hipervínculos) son aquel elemento que permite conectar digitalmente diferentes páginas web entre sí con tan solo un clic.
Las partes de los hipertextos que contienen información accesible para el usuario se les llama nodos. Los enlaces son las uniones o vínculos que se
establecen entre nodos y facilitan la lectura secuencial o no secuencial
por los nodos del documento. Por último, los anclajes son los puntos de
activación de los enlaces.
Existen dos tipos de enlaces en las páginas web:
- Enlaces intradocumentales
- Enlaces extradocumentales
Realmente un enlace puede llevar al usuario a otro punto concreto del mismo documento (enlaces intradocumentales), a un documento diferente o un punto concreto de otro documento diferente. Estos dos últimos casos, ambos extradocumentales, pueden llevar a un documento web del mismo servidor o de otro servidor.
La etiqueta que se utiliza para definir un hiperenlace es <a> y </a>. En el contenido de este elemento puedes utilizar tanto texto como imágenes que se transformarán en el componente sensible (anclaje) que al activarlo con un clic te llevará al destino.
Enlaces intradocumentales
Para hacer un enlace intradocumental lo primero es definir el destino.
Antiguamente se utilizaba el atribuo name para la etiqueta <a>, y escribiendo como valor el nombre que usaremos como referencia del destino:
<a name="aqui">...</a>
Pero ése atributo ya no se usa. Actualmente usamos el atributo id para la etiqueta del párrafo en concreto, y escribiendo como valor el nombre que usaremos como referencia del destino:
<h1 id="aqui">...</h1>
<p id="aqui">...</p>
etc...
Luego, para crear el enlace, se usa la etiqueta <a> con el atributo href y reescribiendo el nombre del destino con una almohadilla delante.
<a href="#aqui">...</a>
Por supuesto que en una página web se pueden definir varios
enlaces a un mismo destino, pero no se pueden crear varios destinos con
el mismo nombre. El nombre debe ser único.
Enlaces extradocumentales
Para hacer un enlace extradocumental tan solo tenemos que indicar la URL de acceso al otro documento como valor del atributo href.
<a href="pagina.html">...</a>
También existe el enlace extradocumental
a un punto concreto de otro documento. En este tipo de enlace se combinan los
dos enlaces anteriores. Por un lado
tenemos el enlace, en el que se tiene que indicar tanto la URL del
documento como el nombre del punto en el otro documento. Por
otro lado, en el destino del enlace se debe definir el punto al que se
hace referencia mediante un nombre, ya sea con el atributo name, el
método antiguo, o mediante el atributo id.
<a href="pagina.html#aqui">...</a>
Si debemos utilizar un enlace para ir a una página web alojada en otro servidor debemos poner la direccion completa.
<a href="http://estudiandoidesweb.blogspot.com.es/">...</a>
Si la página está alojada en el mismo servidor (es decir, otra página de tu sitio web) tan solo debes poner el nombre de la página siempre y cuando compartan la misma carpeta (como en el primer ejemplo de este apartado).
Pero si la página a donde lleva el enlace está en el mismo servidor pero en una carpeta diferente, esta carpeta debe permanecer almacenada dentro de la misma carpeta de la página web principal. No funcionaria si intentásemos buscar en carpetas anteriores una vez lo subamos a la red.
<a href="carpeta/pagina2.html">...</a>
No olvides nunca
Las rutas y los nombres para los ficheros o puntos concretos de los documentos es importante que sean simples. Es mejor hacerlo todo en minúsculas, no utilizar caracteres extraños ni nombres largos y poco amigables.
No uses espacios en blanco para los nombres de las rutas.
También vigila no pongas direcciones de lugares físicos de tu ordenador, pues una vez abierto desde el ordenador de otra persona darían error 404.
Te recomiendo que heches un vistazo a esta entrada con un par de detalles importantes que ayudarán a que puedas conocer mejor como funciona el lenguaje HTML.
¿Algo más?
Pues en realidad sí, muchísimo más. Queda practicar diferentes proyectos e ideas que tengas en la cabeza para acabar de aprender bien el lenguaje HTML, y buscar más información sobre como usar este código. Recuerda que solo te he enseñado unas pocas etiquetas de todas las que usa HTML (que son unas cien).Te recomiendo que heches un vistazo a esta entrada con un par de detalles importantes que ayudarán a que puedas conocer mejor como funciona el lenguaje HTML.
No hay comentarios:
Publicar un comentario
RECUERDA: ésto no es ningún tutorial, pero estaré encantado de compartir información y ayudar en medida de lo posible a cualquiera :)