O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Znacznik linku a

HTML podręcznikZnaczniki budują strony internetowe. Oczywiście strona nie musi być napisana w języku HTML, są liczne inne sposoby ale z punku widzenia tego blogu nieistotne. Tak się składa, że bloksowe blogi posługują się językiem XHTML. Wystarczy zajrzeć do źródła strony i tam zaraz na początku będą informacje o typie dokumentu. Bloksy to XHTML.

Znaczniki układają treść w odpowiednie formy, mówią one przeglądarce jaki to rodzaj treści tak aby mogła ona zdecydować o sposobie wyświetlania. Najprościej wyjaśnić to na podstawie ilustracji czy linku. Kontynuując temat z poprzedniej podręcznikowej notki dzisiaj przejdę do bardziej konkretnego przykładu i opiszę co nieco jeden ze znaczników: odnośnik.

Znacznik linku, budowa, atrybuty, możliwości opisu wyglądu

Linki to okna naszego HTMLowego domku. Pozwalają one zobaczyć coś więcej, rozszerzyć nieco temat i powiązać go z innymi elementami w sieci. Odpowiednikiem linków w wersji papierowej są przypisy. W najlepszym razie są one na tej samej stronie co treść do której są przypisane i od razu można podejrzeć ogólny kierunek w którym przypis ma nas prowadzić. Zazwyczaj jednak nie zawierają rozszerzającej treści tylko informują, że ona istnieje i znajduje się w określonej pozycji książkowej. Jeżeli chcesz się dowiedzieć czegoś więcej musisz zacząć od znalezienia następnej książki. W Internecie jest dużo łatwiej wystarczy kliknąć. I na tym właśnie moim zdaniem polega cała magia użyteczności linków.

W dzisiejszej notce opiszę budowę znacznika linku, które jego części są niezbędne, które mile widziane i całkiem przydatne a które to raczej osobliwość. Te części to oczywiście atrybuty ale o tym wiesz już z poprzedniej notki.

Budowa znacznika

W większości przypadków znacznik składa się z części otwierającej i zamykającej, które różnią się od siebie ukośnikiem. Tak też jest w przypadku linku: istnieje znacznik otwierający i znacznik zamykający i oba są absolutnie niezbędne. Przeglądarka nie czyta ci w myślach i musisz jej powiedzieć gdzie ma zaczynać się część linkująca a gdzie kończyć bo linkować może jedna litera, cały wyraz, zdanie, akapit, obraz a nawet cała strona może być jednym monstrualnym linkiem.

budowa znacznika a

Każdemu znacznikowi otwierającemu MUSI odpowiadać znacznik zamykający. Znacznik otwierający składa się z ostrych nawiasów i nazwy znacznika umieszczonej pomiędzy nimi. Znacznik zamykający jest niemal identyczny tylko nazwa poprzedzona musi być ukośnikiem. Nazwą znacznika linku jest a co jest skrótem od anchor czyli kotwica co jest nawet całkiem trafnym określeniem choć niekoniecznie doskonałym ale to nie ma znaczenia liczy się tylko to że a oznacza odnośnik (hiprłącze, link).

Dla znaczników XHTML obowiązują małe litery. W starszych stronach można zetknąć się ze znacznikami pisanymi dużymi literami ale takie rozwiązania aktualnie są niezalecane i mogą przysparzać problemów. Piszemy więc małymi literami.

Samo objęcie elementu znacznikiem tworzy tylko potencjalny link. To, że swojego Malucha nazwiesz BMW nie znaczy wcale że będzie się on zachowywał jak auto tej niemieckiej marki. Możesz zrobić samochód z kartonu wyglądający jak najnowsze BMW i dalej nie będzie to miało większego znaczenia. Dla działania liczyć się będzie dopiero to co jest w środku czyli w przypadku wielu znaczników atrybuty.

Niezbędnym atrybutem linku jest href poprzez który wprowadza się adres docelowy. Href czyli hiperreferencja tworzy działający link. Reszta atrybutów to tylko szczegół, wracając do motoryzacyjnej analogii href to silnik i układ kierowniczy w jednym - kwintesencja linku. Ale oczywiście jeżeli zadowala cię potencjał linku to i hiperreferencja nie jest potrzebna.

Inne atrybuty specyficzne dla linku to: target, rel, media, hreflang, type. Linkowi można bez problemu dodać też atrybuty dozwolone globalnie (standardowe), będą to: id, class, style, title, lang, dir.

Atrybuty znacznika linku

Znaczniki poza swoją nazwą zamkniętą w ostrych nawiasach mogą zwierać dodatkowe informacje: atrybuty. Atrybuty wprowadza się poprzez ich nazwę, następnie znak równości (=) i wartość atrybutu koniecznie umieszczoną w cudzysłowie (nieprawdziwym). Dopuszczalny jest zarówno pojedynczy jak i podwójny jednak stosować go należy konsekwentnie. Jeżeli otworzyliśmy cudzysłów podwójny to i taki mamy zamknąć. Atrybuty zarówno od nazwy znacznika jak i innych atrybutów oddzielamy spacją.

atrybut adresu href (hiperreferencja)

Otoczenie słowa znacznikiem a oznacza link ale bez odpowiedniego atrybutu jest to tylko informacja logiczna dla przeglądarki. Aby ten nasz element zadziałał jako odnośnik trzeba dodać atrybut href i jego wartość w postaci adresu URL.

atrybut adresu linku

Adres podajemy razem z protokołem. Czyli wpisujemy http://www.blox.pl a nie www.blox.pl. Samo www nie wystarczy, w zasadzie w tym przypadku niewiele znaczy.

Jeżeli dodajemy link kontaktowy z adresem mailowym i chcemy aby po jego kliknięciu otworzyło się okno programu pocztowego użytkownika to wpisujemy zamiast protokołu http:// polecenie mailto:. Oczywiście są także inne protokoły i polecenia dotyczące linków ale te dwa na blogu przydają się najczęściej.

zwykły link kontaktowy | link kontaktowy mailto

atrybut standardowy tytułu title

Title to atrybut etykiety tytułowej, można go dodać każdemu znacznikowi, nie tylko linkom. Title wyświetla się zazwyczaj w postaci dymku narzędziowego po najechaniu kursorem na element, któremu jest przypisany. Sposób prezentacji title zależy od przeglądarki.

Jako wartość atrybutu można wpisać dowolną treść, w zasadzie nie ma ograniczeń. Wyjątkiem jedynie będzie znak cudzysłowu pojedynczy bądź podwójny, w zależności od tego który użyliśmy po znaku równości. On kończy wartość atrybutu więc nie może być jego treścią.

atrybut tytułu

Title jest o tyle przydatnym atrybutem, że pozwala w prosty i nieinwazyjny sposób wyjaśnić gdzie prowadzi link i dlaczego czytający powinien tam zajrzeć. Zawsze patrzę gdzie prowadzi dany link i dopiero po adresie decyduję czy odwiedzić stronę czy nie. Ot taki nawyk, po najechaniu kursorem na link zawsze zerkam na pasek stanu aby zobaczyć jak wygląda adres. Nie zawsze jednak adres cokolwiek mówi, często są to bezsensowne ciągi znaków po których niewiele można się zorientować. W takim przypadku title będzie dużym ułatwieniem. Polecam więc mimo iż nie jest niezbędny.

atrybut celu target (gdzie ma się otworzyć link)

Cel czyli miejsce w którym otworzony zostanie link. Domyślnie jest to _self czyli w tym samym oknie i polecam taki zostawić. Jak ktoś będzie chciał otworzyć sobie link w osobnym oknie to bez problemu to zrobi korzystając z roki myszy, prawego przycisku czy klawisza Shift, możliwości jest kilka i warto pozostawić decyzję czytelnikowi. Dodatkowo przez długi czas atrybut ten miał status przestarzałego.

Jeżeli jednak koniecznie chcesz zdecydować za użytkownika to do otwarcia w nowym oknie służy target="_blank". Nie polecam tego rozwiązania bo liczne pootwierane karty są irytujące, szczególnie jeżeli czytelnik sam korzysta z wielu otwartych kart i potem szuka właściwej chcąc wrócić do twojego bloga. Dodatkowo nowo otwarta karta nie ma historii, nie można skorzystać tam ze strzałki cofnij co ponoć jest jedną z najczęstszych czynności.

atrybut celu dla linku

Innymi wartościami atrybutu target_top i _parent. Związane są one z ramkami i pozwalają wyskoczyć z ramki i otworzyć link w głównym oknie.

Atrybut target jest oznaczony jako niezalecany w HTML 4.01 i XHTML. Okazało się jednak, że ten atrybut przydaje się w wielu sytuacjach dlatego też powróci on w nadchodzącym standardzie HTML 5. Nie bardzo polecam jego używanie ale często sama korzystam więc od niedawna linki otwierające się w nowym oknie oznaczyłam niewielka ilustracją. Czytelnik jest więc uprzedzony o otwarciu się nowej karty.

atrybut relacji rel (jaki związek łączy twoją stronę ze stroną do której prowadzi link)

Rodzaj relacji czyli inaczej typ odsyłacza (ale nie typ dokumentu jaki pod linkiem się kryje, do tego służy atrybut type). Możemy określić czy pod linkiem kryje się słownik, strona pomocy czy następna chronologicznie notka.

poniższą listę podaję za www.kurshtml.edu.pl »

  • alternate - wyznacza zastępczą wersję dokumentu
  • appendix - dodatek w kolekcji dokumentów
  • bookmark - zakładka
  • chapter - rozdział w kolekcji dokumentów
  • contents - spis treści
  • copyright - prawa autorskie
  • glossary - słownik
  • help - odnosi się do dokumentu oferującego pomoc
  • index - skorowidz
  • next - odnosi się do następnego dokumentu w sekwencji
  • prev - odnosi się do poprzedniego dokumentu w sekwencji
  • section - dział w kolekcji dokumentów
  • start - odnosi się do pierwszego dokumentu w kolekcji
  • stylesheet - odnosi się do zewnętrznego arkusza stylów (CSS)
  • subsection - "poddzał" w kolekcji dokumentów

atrybut standardowy identyfikatora id (unikalna jakby-nazwa)

Identyfikator (id) to jeden z atrybutów standardowych, które można dodać do każdego znacznika. Ma on dwie magiczne role, zupełnie niezależne od siebie. Pamiętać tylko należy, że jednego identyfikatora możemy użyć na stronie tylko raz. Na całej stronie.

atrybut identyfikatora dla linku

Po pierwsze identyfikatora można używać jako kotwicy/etykiety/zakładki (jak zwał tak zwał, chodzi o odnośnik do miejsca na stronie identyfikator wskazuje to miejsce). Kotwica to taki adres miejsca w treści. Zamiast linkować do całej strony możemy linkować do dowolnego miejsca na niej. Przypisując identyfikator do linku możemy także do niego linkować. Przykładowo jeżeli później w naszej notce wrócimy do tego samego tematu możemy umieścić tam link, który będzie cofał do wcześniejszej jego części. Identyfikator można przypisywać dowolnemu znacznikowi w tym także linkowi co niekoniecznie jest niezbędną częścią linku ale bywa przydatne.

Znakiem identyfikatora jest kratka (#) i nią należy poprzedzić identyfikator gdy chce się go użyć jako linku.

link do kotwice skrócony i pełen

Druga magiczna rola to opis wyglądu. Do identyfikatorów możemy się odwoływać w szablonie CSS. Co oznacza, że ten jeden jedyny link możemy opisać w szablonie w bardzo szczególny i unikatowy sposób a gdy zdecydujemy się zmienić szablon to nie będziemy musieli szukać tej notki tylko ten unikalny wygląd opiszemy w szablonie w sposób pasujący do nowego szablonu.

W szablonie do opisu identyfikatora również używa się kratki (#). Wpisujesz kratkę, nazwę identyfikatora a następnie w nawiasach klamrowych opis stylu.

opis css przykładowego identyfikatora

atrybut klasy class (powtarzalna nazwa)

Jeżeli chodzi o wygląd elementów najbardziej przydatnym atrybutem jest jednak class. Klasę można przypisać także linkowi. Nazwę klasy wybieramy sobie sami i jedną nazwę klasy można przypisać wielu elementom. Następnie tą stworzoną przez nas klasę możemy dowolnie opisać w edycji CSS.

atrybut klasy

Przykładowo chcemy aby linki prowadzące do innych notek z naszego bloga były inaczej wyróżnione niż linki prowadzące do innych stron. Dodajemy więc im odpowiednią klasę (nazwa jest wymyślona przez nas) i opisujemy w szablonie, że linki prowadzące do innych notek na blogu będą miały obok słowa naszą ikonkę albo będą inaczej podkreślone.

Klasę w szablonie opisuje się analogicznie jak identyfikator tylko poprzedza nie kratką a kropką (.). Pamiętaj tylko, że link o ile nie zostanie przypisany elementowi blokowemu to sam jest elementem śródliniowym.

atrybut stylu lokalnego style (bezpośrednia zmiana wyglądu)

Atrybut style służy do dodawania stylów lokalnych, czyli wyglądu specyficznego tylko dla tego miejsca i sytuacji. Po więcej informacji o różnych sposobach implementacji CSS zapraszam do starszej notki. Style lokalne dodajemy przykładowo klikając w różne przyciski w edytorze TinyMCE gdy zmieniamy wygląd tekstu notki. Są one nadrzędne w stosunku do stylów z szablonu. Dlatego chcąc zmienić wygląd czegoś określonego w tym określonym miejscu warto użyć stylu lokalnego.

atrybut stylu lokalnego

Problem pojawi się gdy zechcesz zmienić wygląd strony. Style lokalne zmienia się lokalnie a więc aby zmienić wygląd opisany poprzez atrybut style konieczne będzie edytowanie każdej notki w której jest on opisany. Dlatego nie bardzo polecam zmieniać kolory, rodzaj czcionki, jej rozmiar etc. Ale jeżeli piszesz, że link do twojej najulubieńszej strony jest czerwony czy podkreślony to w takiej sytuacji styl lokalny jest najlepszym rozwiązaniem. Zastanów się po prostu co się stanie jak zechcesz zmienić szablon na przykładowo ciemny...


Na razie nie będę opisywała więcej atrybutów dla linku, może jeszcze do tematu wrócę ale dla tematyki tego bloga istotne są dwie rzeczy: sam fakt dodania linku i następnie możliwości opisu jego wyglądu. Jeżeli chcesz dowiedzieć się nieco więcej o atrybutach odnośników to w Internecie jest wiele podręczników HTML i XHTML. Korzystaj z najnowszych jakie znajdziesz i pamiętaj że wygląd określają style. Jeżeli poradnik zaleca Ci użycie atrybutu algin, border czy name to jest on nieco przestarzały, te atrybuty są raczej niezalecane. Dwa pierwsze dotyczą wyglądu a trzeci jest uboższą wersją id.

Notki na podobne tematy:

środa, 29 lutego 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: Altaria, *.164.rako-lan.pl
2018/09/12 09:10:15
Samo objęcie elementu znacznikiem tworzy tylko potencjalny link, nie oznacza jeszcze cudu. Po za tym trzeba jeszcze wielu rzeczy żeby to działało jak należy i spełniało swoje pierwotne założenia ;)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...