poniedziałek, 10 września 2012

HTML - Po nitce do kłębka – linki, łącza, hovery jak kto woli.

Linki, łącza

Witaj! Jeśli to czytasz to znaczy, że potrzebujesz podstawowych informacji dotyczących linków. Linki (odnośniki) to bardzo ważny temat jeśli chodzi o strony internetowe. W końcu bez nich nie można by było przechodzić pomiędzy podstronami itd.


Linki zewnętrzne


Wyobraźmy sobie, że chcemy zrobić odnośnik na naszej stronie internetowej pod adres http://wp.pl. Chcemy także, aby linkiem był tekst Wirtu@lna Polska. Aby zrealizować to zadanie powinniśmy umieścić na naszej stronie kod podobny do tego:

<a href="http://wp.pl"> Wirtu@lna Polska </a>

Jak widzimy, znacznikiem odpowiedzialnym za umieszczenie linku jest znacznik <a > </a>. Czymże jednak byłby ten znacznik bez odpowiedniego atrybutu href .

Wartość atrybutu href wskazuje nam miejsce do jakiego kieruje link. Może to być np. jak w przykładzie powyżej strona internetowa Czas na jakiś inny przykład:

<!-- przyklad_6_1.html -->
<html>
<head>
   <title>Przyklad 1 rozdzial 6.</title>

   <meta http-equiv="Content-Type" content="text/html; charset:UTF-8" />
 </head>
 <body>
   To jest zwykły tekst <br />
   <a href="http://wp.pl">A to jest link do Wirtu@lnej Polski :) </a> <br />
 </body>
</html>

To by było tyle na temat odnośników do stron zewnętrznych Czas na drugi typ :) - odnośniki wewnętrzne.


Linki wewnętrzne, lokalne, nazywaj je jak chcesz.

Są to odnośniki do naszych podstron. Zakładając, że mamy stronę internetową o nazwie index.html na której mamy jakąś główną treść i podstronę o_mnie.html przeanalizujmy poniższy przykład:

<!-- index.html -->
<html>
 <head>
   <title>Przyklad 2 rozdzial 6. - Strona główna</title>

   <meta http-equiv="Content-Type" content="text/html; charset:UTF-8" />
 </head>
 <body bgcolor="red">
   <center><a href="index.html"> Strona główna - czerwona </a> | <a href="o_mnie.html"> Podstrona o mnie - żółta </a></center>
   <br />
   <br />
   To jest jakaśtam treść bla bla bla bla bla <br />
 </body>
</html>



<!-- o_mnie.html -->
<html>
<head>
   <title>Przyklad 2 rozdzial 6. - Podstrona</title>

   <meta http-equiv="Content-Type" content="text/html; charset:UTF-8" />
 </head>
 <body bgcolor="yellow">
   <center><a href="index.html"> Strona główna - czerwona </a> | <a href="o_mnie.html"> Podstrona o mnie - żółta </a></center>
   <br />
   <br />
   A tu kilka słów o mnie co chciałem wam przekazać zonk :D<br />
 </body>
</html>

Oczywiście należy pamiętać o kilku rzeczach:

  1. <a href="index.html"> oznacza adres bezwzględny pliku strony internetowej. O adresach bezwzględnych było więcej przy lekcji o znacznikach <IMG>.
  2. Jeśli jedna ze stron jest podstroną, powinna mieć taki sam układ, ze względów etycznych.
  3. Podstrona powinna się różnić tylko treścią docelową. 
  4. Tytuł pliku strony internetowej powinien opisywać jej zawartość. 
  5. Strona główna zawsze nosi nazwę index.html.


Kotwice


Znacznik <A> kojarzy się słusznie z ang. słowem anchor - kotwica. Kotwica, kotwiczenie te pojęcia kojarzą się z zaczepianiem. Jeśli zaczepisz o coś łańcuch, dotrzesz po łańcuchu do tego. Z kolei łańcuch kojarzy się z liną, lina z linką, linka z linkiem :] I tak o to mamy skojarzenie. Anchor <A> jest to znacznik linku. Kotwica jest odnośnikiem do miejsca na stronie. Nie przekierowuje ani na Twoją podstronę, ani na stronę zewnętrzną, ale do konkretnego punktu na Twojej stronie. Jak to działa ? Już pokazuję :)

Po 1. Każda kotwica ma punkt zaczepienia, po 2. Każda kotwica ma Odnośnik, który po kliknięciu przenosi nas do tego punktu. W praktyce wygląda to w sposób następujący:


<!-- przyklad_6_3.html -->
<html>
 <head>
   <title>Przyklad 3 rozdzial 6. - Strona główna</title>

   <meta http-equiv="Content-Type" content="text/html; charset:UTF-8" />
 </head>
 <body bgcolor="yellow">
   <center><a href="#poczatek"> Początek strony </a> | <a href="#koniec"> Koniec strony </a></center>
   <br />
   <br /></pre>
<a name="poczatek">Nam</a> a dui ipsum, eu volutpat tortor. Maecenas posuere tempor est, adipiscing fringilla lacus vehicula sed. Suspendisse neque leo, posuere vel congue vitae, semper sed justo. Nunc volutpat iaculis sapien, laoreet rhoncus enim pretium non. Duis laoreet aliquet enim, quis molestie justo posuere eleifend. Etiam non mi dui. Donec ut venenatis augue. Nullam ut tincidunt sapien. Nunc a est ac nulla pellentesque elementum sed dapibus nisi. Duis placerat nisl sit amet nulla dictum ac gravida sem venenatis. Aliquam id purus libero, ac euismod massa. Nunc risus nulla, porttitor et fermentum sit amet, condimentum vitae neque. Aliquam vitae nisi urna, in porttitor sapien. Proin suscipit, elit eget commodo congue, tortor eros mattis risus, et pellentesque lectus leo sit amet tellus. In ipsum arcu, interdum sed fermentum eu, mollis ac erat. Nunc cursus accumsan pharetra.

Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.
Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.
Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.
Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.
Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.
Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.

Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.

Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.

Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.

Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.

Nam lacus leo, tristique vitae ultrices vitae, dictum ac lectus. Nam felis sapien, feugiat sed eleifend eget, condimentum ac magna. Vestibulum vestibulum, arcu sollicitudin malesuada lobortis, quam nunc lacinia diam, ut laoreet neque nisi a felis. Integer pretium viverra enim, id gravida metus suscipit et. Fusce luctus laoreet condimentum. Fusce hendrerit tortor ut metus sollicitudin semper ullamcorper magna bibendum. Morbi sollicitudin viverra porttitor. Fusce convallis volutpat nulla nec interdum.

Maecenas ac dui vitae lectus lobortis commodo non quis velit. Suspendisse ut augue adipiscing nulla tristique dictum. Aenean nec magna nibh, sit amet faucibus turpis. Duis quis faucibus urna. Aliquam viverra sollicitudin nisi, id vehicula augue eleifend ac. Aliquam risus massa, semper eu placerat eget, pulvinar non urna. Vivamus enim mi, pellentesque nec convallis vitae, sollicitudin sed diam. Donec rutrum dignissim quam nec sagittis.

Cras suscipit egestas mi, ac volutpat nisl porttitor sit amet. Proin vitae urna ut odio facilisis lacinia. Integer nec dui est, id ultrices libero. Integer eu massa nunc, a vulputate magna. Nunc ipsum ante, aliquet nec convallis et, fringilla nec justo. Integer imperdiet fringilla erat. Donec ante lectus, malesuada id interdum et, interdum sit amet neque. Morbi blandit eros sed lectus adipiscing eget porta odio mollis. Etiam auctor sem in diam ultrices vulputate vestibulum eros posuere. Praesent nunc quam, consectetur et auctor blandit, iaculis a lacus. Suspendisse non semper purus. Cras eu porttitor <a name="koniec">sem.</a>
 </body>
</html>

Nas interesują tylko 2 fragmenty.
  1. <a href=”#nazwa”>Link do punktu zaczepienia</a>
  2. <a name=”nazwa”>Punkt zaczepienia </a>

Jak widzisz w linku nazwe umieszczamy z wcześniejszym znakiem hash.
To na tyle jeśli chodzi o linki. Więcej informacji w rozdziale drugim.

Praca domowa

  1. Odpowiedz na poniższe pytania
      • Czym jest link.
      • Czym jest kotwica.
  2. Napisz stronę internetową o Twoim hobby, tak by zawierała 3 podstrony.
  3. Dodaj do tej strony 3 sekcje, do których dodasz kotwice.
Powodzenia!
Autor: o
Etykiety: , , , , , ,

Brak komentarzy:

Prześlij komentarz

Subskrybuj: Komentarze do posta (Atom)