Deseño Web 04: Ligazóns ou hipervínculos
Como xa dixemos, o html é unha linguaxe deseñada para crear hipertextos, e tamén dixemos que as portas que conectan os distintos niveis do hipertexto chámanse hipervínculos, ligazóns, enlaces ou links.
Ligazóns externas
Chamaremos ligazóns externas a aquelas que nos levan a unha páxina que xa está aloxada na web, ou sexa, calquera páxina á que normalmente accedas. Para crear unha destas, imos abrir o arquivo do apartado anterior (indexTeunome.html) e imos engadir o que está en azul:
<html>
<body>
<h1>Informática</h1>
<p>A informática é unha cousa moi chula.</p> <h2>Programación</h2>
<p>A programación non se nos deu moi ben.</p>
<h2>Deseño Web</h2>
<p>O <a href=" https://sites.google.com/site/sitiotuchomendez/informatica/desenhoweb"> deseño web </a> váisenos dar moito mellor.</p>
<p>Sobre<br>todo<br>porque<br>imos</p>
<h1>Traballar na clase!</h1><p>(desde o primeiro día...)</p>
</body>
</html>
Se agora abres o arquivo co navegador, deberas comprobar que as palabras "deseño web" aparecen en azul e subliñadas, co formato estándar para as ligazóns, e que, ao premer sobre elas, lévanche á sección "deseño web" desta miña páxina:
Xa te decatarías que o miolo da cuestión está nas etiquetas <a> </a> , que son as que indican unha ligazón, e no atributo href ="enderezo do sitio", pero observa a imaxe para entendelo mellor:
Ligazóns internas
As ligazóns internas, no canto de levarnos a un sitio de internet, lévannos a algunha das páxinas que integran a estrutura da web que estamos a deseñar.
No noso caso, aínda non temos máis que un nivel de texto, que é o pequeno documento do apartado anterior antes, así que imos crear un segundo nivel, para iso abrimos outra vez o gedit, copiamos e pegamos o texto de abaixo, e o gardamos dentro do cartafol do proxecto como desenhoWeb.html .
<html>
<body>
<h1>Deseño Web</h1>
<p>En deseño web imos desenvolver páxinas.</p> <p>Non te preocupes, logo vai ser máis ameno que este rollo<br>de escribir no bloc de notas.</p>
<p> Voltar a informática</p>
</body>
</html>
Agora, dentro do cartafol webTeunome, temos dous arquivos .html, un é o arquivo indexTeunome.html e o outro é desenhoWeb.html , pero o contido destes dous arquivos non se relaciona, non hai ningún hipervínculo que conecte un co outro, así que o imos crear.
Temos que abrir os dous arquivos, e os modificaremos introducindo cunha etiqueta <a></a> que nos cree o hipervínculo. Ao non ser unha ligazón externa, debemos empregar rutas para que o navegador saiba onde ten que buscar o destino de cada ligazón. Unha ruta é a liña que aparece nalgúns exploradores de sistema opertativo para indicarnos onde está un determinado arquivo ou cartafol, por exemplo:
Ruta absoluta: NON AS USAMOS EN DESEÑO WEB.
C://Meus documentos/Imaxes/veran2008/tucho.jpg
Unha ruta absoluta indícanos a localización dun arquivo respecto á estrutura xeral de arquivos e cartafois dun equipo.
Ruta relativa: SON AS QUE USAMOS EN DESEÑO WEB.
veran2008/tucho.jpg
Unha ruta relativa indícanos a localización dun arquivo desde o cartafol onde nos situamos, neste caso o arquivo no que escribimos a ruta estaría no cartafol imaxes, e desde ese cartafol buscaría o cartafol "veran2008" e, dentro de el, o arquivo "tucho.jpg".
En definitiva, para poñer as nosas ligazóns debemos engadir o seguinte código:
En indexTucho.html:
<html>
<body>
<h1>Informática</h1>
<p>A informática é unha cousa moi chula.</p> <h2>Programación</h2>
<p>A programación non se nos deu moi ben.</p>
<h2>Deseño Web</h2>
<p>O <a href="desenhoWeb.html"> deseño web </a> váisenos dar moito mellor.</p>
<p>Sobre<br>todo<br>porque<br>imos</p>
<h1>Traballar na clase!</h1><p>(desde o primeiro día...)</p>
</body>
</html>
En desenhoWeb.html:
<html>
<body>
<h1>Deseño Web</h1>
<p>En deseño web imos desenvolver páxinas.</p> <p>Non te preocupes, logo vai ser máis ameno que este rollo<br>de escribir no bloc de notas.</p>
<p> Voltar a <a href="indexTucho.html">informática</a></p>
</body>
</html>
Exercicio:
- Fai un cartafol e crea dentro del dous documentos html, un que se chame inicio e outro que se chame contacto. O de inicio debe ter o teu nome, unha ligazón a google.com e unha ligazón á páxina contacto. A páxina contacto debe ter os teus datos de contacto e unha ligazón de volta a inicio.
- Realiza un web coa estrura que se che indica abaixo, as ligazóns que tes que insertar van en azul e subliñadas, a da Wikipedia é unha ligazón externa e as outras todas internas.
