Odno�niki, odsy�acze, linki, hiper��cza... kwintesencja strony internetowej

kate_mac@NOSPAM.gazeta.pl — Sun, 20 May 2012 11:46:48 +0200

Linki (s�owo linkuj�ce " width="55" height="9" />) s� kwintesencj� stron internetowych. Nie ma co dyskutowa� o celowo�ci ich u�ywania bo na pytanie czy linkowa�? odpowiedz jest tylko jedna: TAK. Mo�emy si� co najwy�ej zastanawia� do czego linkowa� i jak cz�sto. Tak wi�c zapewne linki jako fundamenty Internetu s� obecne na twoim blogu teraz pozostaje ci jedynie zastanowi� si� jak one powinny wygl�da�.

Zastosowanie a

Znacznik a w kodzie html oznacza link. Link czyli inaczej odno�nik, hiper��cze, hipertekst czasem u�ywa si� te� nazw ��cze czy hiperlink. Bez wzgl�du na to jak to nazwiemy zawsze to b�dzie jednak jaka� dodatkowa specyficzna w�a�ciwo�� przypisana elementowi. W�a�ciwo�ci� t� jest mo�liwo�� szybkiego i �atwego przej�cia na inn� stron� b�d� nieco inne miejsce na stronie (w zale�no�ci do czego linkujemy).

Nie u�ywamy natomiast znacznika a jako kotwicy (zak�adki, zaznaczenia w tre�ci). W starszych wersjach stron w�a�nie poprzez atrybut nazwy dodany do znacznika linku mo�na by�o zaznaczy� miejsce w tre�ci. By� to zazwyczaj pusty znacznik, cz�sto niepotrzebnie odr�bny. Teraz obowi�zuj�cym standardem jest u�ywanie atrybutu identyfikatora, kt�ry mo�na przypisa� dowolnemu znacznikowi wi�c jest to zmiana na lepsze. Wi�cej o zaznaczaniu miejsca w tre�ci przy nieco innej okazji a p�ki co polecam notk� poruszaj�c� cz�ciowo temat z mojego poprzedniego bloga.

Ja linkuj� kiedy tylko si� da. Moje g��wne blogi s� pomocowe wi�c istotnym s� dla mnie linki do powi�zanych tre�ci umieszczonych na tych blogach. Nie chc� za ka�dym razem t�umaczy� wszystkiego od pocz�tku. Moje notki s� te� najcz�ciej bardzo rozbudowane wi�c aby u�atwi� korzystanie z nich cz�sto umieszczam linki do innych (zaznaczonych uprzednio identyfikatorami) miejsc w tre�ci tej samej notki.

Druga sytuacja, niestety nieco rzadsza na pomocowych blogach ale za to najcz�stsza na wszystkich innych, to linki do innych stron i blog�w. Pierwsza zasada: zawsze linkuj do �r�d�a. To nie jest co� co jest po�yteczne tylko dla miejsc do kt�rych linkujesz ale tak�e dla ciebie i twojego bloga. Twoja strona b�dzie lepiej powi�zana z innymi stronami o podobnej tre�ci i �atwiej b�dzie odnajdowana w wyszukiwarkach.

Dodawanie link�w do notki

Wszystko oczywi�cie zale�y od wybranego edytora w kt�rym piszesz notki. W prostym tekstowym nale�y wpisa� przed elementem/s�owem kt�ry ma by� linkiem a za nim " width="24" height="9" />. Zaawansowane maj� do tego celu odpowiedni przycisk, kt�ry wygl�da jak po��czone ogniwa. Dok�adniej i z ilustracjami (tak dla nawet bardzo zielonych) opisane jest to w notce Jak doda� odno�nik (link) do notki?

Wygl�d link�w

Najcz�ciej stosowanym przeze mnie sposobem opisania wygl�du link�w jest kolor, najprostszy i najoczywistszy spos�b wyr�nienia linku. Od zmiany koloru linku zacz�o si� w�a�nie moje zainteresowanie szablonami. Na m�j pierwszy blog wybra�am sobie �liczny szablon 103 by epeeya ale kolor link�w wydawa� mi si� za jasny i za szary wi�c postanowi�am dowiedzie� si� jak to zmieni�. Odpowiedz znalaz�am w bardzo podstawowym wpisie�BODY, Box, Text, Szpalta - o co chodzi?� M�j nowy opis w css wygl�da� mniej wi�cej tak:

a {
�color: #cc7070;
�text-decoration: none;
}
a:hover {
�color: #cc9999;
}

Link a przegl�darka.

Znacznik a, jak wiele innych, mo�e mie� automatyczny wygl�d przypisywany mu przez przegl�dark�. Otwieraj�c stron� przegl�darka czyta kod naszej strony, zagl�da do styl�w i je�eli na blogu u�ywasz link�w a nie masz ich wygl�du opisanego w css to przypisze mu go sama wedle w�asnego uznania (wygl�d w poszczeg�lnych przegl�darkach i ich wersjach mo�e si� nieco r�ni�).

W przypadku link�w najcz�ciej jest to kolor niebieski i podkre�lenie, w przypadku lin�w odwiedzonych nast�puje zmiana na kolor fioletowy. S� to ustawienia przegl�darki a nie cecha strony. Zmieni� to mo�na sobie w swojej przegl�darce dowolnie, wystarczy przej�� do dzia�u opcje.

Je�eli linki na twoim blogu maj� w�a�nie taki kolor a nie powinny to co� z ich opisem jest nie tak. W 99% przypadk�w gdy komu� nieoczekiwanie linki zrobi�y si� niebieskie powodem nie by� szablon, zar�wno w oryginalnej formie jak i pozmieniany przez u�ytkownika, b��dy w szablonach nie maj� a� takiego wp�ywu na stron�. Zazwyczaj to co� nie tak pochodzi�o z kodu html, niew�a�ciwe znaczniki, tajemnicze skrypty... w html trzeba by� bardzo dok�adnym (bez wzgl�du na to czy jest to pole na dodatkowy kod html czy kod w�a�nie pisanej notki).

Przede wszystkim nale�y wi�c w szablonie opisa� linki generalnie, dla samego a . Dotyczy� to b�dzie w�a�nie ca�ej strony. P�niej mo�na zaj�� si� konkretnymi linkami, wygl�dem tytu�u bloga czy link�w w notce. Dzi�ki temu nawet je�eli jaki� nowy typ link�w pojawi si� na blogu to nie b�dzie on niebieski. W najstarszych szablonach u�ytkownik�w czasami brakuje pewnych opis�w element�w, generalne opisanie link�w sprawia, �e wygl�daj� one wystarczaj�co dobrze.

Najpopularniejsze cechy mo�liwe do przypisania linkom.

color - kolor; linki zawsze maj� inny kolor wi�c nawet je�eli jakiemu� elementowi, przyk�adowo tytu�owi notki, zostanie zmieniony kolor to o ile jest on linkiem to konieczne jest wpisanie koloru w�a�nie przy linku
text-decoration - dekoracja tekstu; linki cz�sto s� podkre�lone ( underline ) nie polecam jednak zdawa� si� tylko na przegl�dark� i je�eli oczekujesz podkre�lenia to mimo wszystko wpisz je; je�eli go nie chcesz to koniecznie wpisz none
font - kr�j; nie polecam zbiorczego zapisu bo wymaga wpisania rozmiaru i nazwy kroju a to nie zawsze jest niezb�dne (chocia� czasami mo�liwe do wykorzystania; polecam jednak taki zbiorczy zapis u�y� przy opisach link�w bli�ej cia�a);

font-weight - pogrubienie
font-style - kursywa (pochylenie)
font - zapis zbiorczy gdy zmienia si� zar�wno rozmiar jak i rodzin�

border-bottom - dolna ramka; mo�e s�u�y� jako podkre�lenie, umieszczana jest nieco ni�ej ale mo�na zmieni� zar�wno kolor, grubo�� jak i styl takiego podkre�lenia

w okre�lonych sytuacjach mo�e si� te� przyda� border-left albo border-right

background - t�o; w podstawowej wersji wystarczy kolor t�a

w specyficznych warunkach przyda� si� mo�e t�o graficzne

Wygl�d link�w na stylowym blogu: kolor i podkre�lenie.

z bloga stylekatemac.blox.pl " src="http://stylekatemac.blox.pl/resource/style_hr_przyklad1.gif" alt="przyk�ad z bloga stylekatemac.blox.pl" width="250" height="100" />Tutaj aktualnie stosuj� tylko karmazynowy kolor w podstawowej formie a po najechaniu kursorem na link szarzeje on nieco i zyskuje przerywane podkre�lenie.

Kolory mo�na opisywa� na r�ne sposoby, ja od pocz�tku u�ywa�am najcz�ciej tzw. zapisu HEX . Podkre�lenie jest rodzajem dekoracji tekstu i mo�na co najwy�ej okre�li� czy ono jest czy nie. Dlatego aby uzyska� podkre�lenie przerywane zastosowa�am doln� ramk� o szeroko�ci 1px i jako styl wpisa�am dashed. Opis linku w arkuszu styl�w wygl�da dok�adnie tak:

a {
�color: #d71149;
�text-decoration: none;
}
a:hover {
�color:#a30331;
�text-decoration: none;
�-moz-opacity: 0.8;
�-khtml-opacity: 0.8;
�filter:alpha(opacity=80);
�opacity: 0.8;
}
#tresc-glowna .tresc a:hover {
�border-bottom: 1px dashed #a30331;
}

color: #d71149; - m�j karmazynowy odcie�, kt�ry u�ywam na wszystkich szablonowych blogach
text-decoration: none; - linki maj� opisane w przegl�darce podkre�lenie, ja go nie chcia�am
color:#a30331; - to m�j nowy ulubiony odcie� karmazynowego, umie�ci�am go jako kolor linku po najechaniu na niego kursorem ( opacity nie jest dost�pne dla najstarszych przegl�darek)
opacity: 0.8; - czyli transparentno��; w przypadku tekstu daje to tu efekt podobny do szarzenia; na zupe�nie bia�ym tle link by blakn��; taki efekt mo�na uzyska� tak�e odpowiednim kolorem; plusem korzystania z opcaity jest wtapianie si� w t�o tak�e ilustracji; przy moim tle o teksturze papieru daje to dodatkowe efekty
border-bottom: 1px dashed #a30331; - dolne podkre�lenie w postaci linii przerywanej

Wygl�d link�w, najprostsze rozwi�zania.

Kolor

Najoczywistszym sposobem wyr�nienia link�w zawsze b�dzie kolor. Powinien znacz�co odr�nia� si� od koloru tekstu aby czytelnicy �atwo mogli odszuka� linki w tek�cie (linkami powinny by� frazy maj�ce znaczenie a nie s�owa typu KLIKNIJ TUTAJ). S� r�ne sposoby zapisu koloru, najpopularniejszy na stronach internetowych jest HEX. Ciekaw� i wygodn� dla projektant�w zmian� jak� przynosi CSS3 jest mo�liwo�� zapisu koloru wg. numeru barwy i procentowego stopnia jasno�ci i nasycenia (hsl b�d� wraz z kana�em alfa hsla).

Pocz�tkuj�cym polecam tabel� kolor�w X11. Od tego mo�na zacz�� i nast�pnie subtelnie dopasowyw� odcienie. W przypadku tekstu powinny by� wyraziste, intensywne ale niekoniecznie bardzo jasne. Kolor tekstu zawsze b�dzie si� wydawa� ja�niejszy ni� ten sam kolor u�yty jako wype�nienie t�a.

Je�eli wszystkie linki maj� jeden kolor to wystarczy opisa� je dla wszystkich znacznik�w linku.

zobacz przyk�ad w szablonie 02 subtelnym, niebieskim »

a {
�color:#668888;
�text-decoration:none;
}
a:visited {
�color:#779999;
�text-decoration:none;
}
a:hover {
�color:#cc9900;
�text-decoration:underline;
}

Podkre�lenie

Jest to drugi spodziewany spos�b wyr�nienia linku. O ile w tek�cie pisanym r�cznie podkre�lenie b�dzie rodzajem wzmocnienia (zaznaczenia wa�no�ci) o tyle na ekranie jest u�ywane rzadko w takim znaczeniu i zdecydowanie cz�ciej kojarzone jest z linkami. Je�eli wi�c nie chcesz link�w wyr�nia� kolorem podkre�l je.

Przyk�ad pochodzi z szablonu na starym kodzie ale opis dotyczy wszystkich link�w wi�c dok�adnie taki sam mo�e by� na dowolnej stronie.

zobacz przyk�ad w szablonie 19 Light, be�owym »

a {
�color:#ed1c24;
�text-decoration:underline;
}
a:hover {
�color:#9e0b0f;
�text-decoration:underline;
}

Pogrubienie i kursywa

Aby wyr�ni� linki spo�r�d zwyk�ego tekstu nie trzeba stosowa� jaskrawych kolor�w. Mo�na u�y� subtelnego koloru i bardziej typowych dla pisma wyr�nik�w czyli pogrubienia b�d� kursywy (pochylenia tekstu). U�ywaj�c jednak takiego wyr�nienia nale�y liczy� si� tak�e z jego znaczeniem. Pogrubienie przypisywane jest zazwyczaj wzmocnieniom, kursywa natomiast zwi�zana jest z frazami wymagaj�cymi emfatycznego podkre�lenia. Polecam wi�c mimo wszystko doda� tak�e nieco inny kolor aby unikn�� niejasno�ci.

Przyk�ad pogrubienia pochodzi z szablonu na starym kodzie. Wszystkie linki w tym szablonie mia�y ten sam pomara�czowy kolor ale ju� pogrubienie by�o cech� tylko link�w w notce. Poni�szy kod CSS dotyczy jednak notek w szablonach na nowym kodzie (wygl�d ten sam ale selektory nazwane s� nieco inaczej).

zobacz przyk�ad w szablonie 61 fall jesiennym »

a {
�color: #E57449;
�text-decoration: none;
}
a:hover {
�color: #A77A58;
�text-decoration: none;
}
#tresc-glowna .tresc a {
�font-weight:bold;
}

W szablonach klasycznych wszystkie linki maj� ten sam kolor, w pi�tym jest to fioletowo-niebieski odcie�. Kursywa przy linkach pojawia si� tylko w kilku miejscach: przy tytule notki, linkach w elemencie ostatnie notki i linkach w notkach. Poni�szy kod dotyczy koloru wszystkich link�w i pochylenia link�w w tre�ci notki.

zobacz przyk�ad w szablonie 05 klasycznym, granatowym »

a {
�color:#110055;
�text-decoration:none;
}
a:visited {
�color:#3B0055;
}
a:hover {
�text-decoration:underline;
}
#tresc-glowna .tresc a {
�font-style:italic;
}

Wygl�d link�w, mniej standardowe rozwi�zania.

Mo�liwo�ci jest oczywi�cie wi�cej. Nie polecam rozwi�za� bardzo rzucaj�cych si� w oczy stosowa� na ca�ym blogu ale dla link�w w notce czemu by nie (je�eli ju� na ca�ym blogu to dla prostego wizualnie szablonu).

Inny kolor podkre�lenia

Stosuj�c zamiast podkre�lenia tekstu ( text-decoration:underline; ) w�a�ciwo�� dolnej ramki ( border-bottom) mo�emy osobno okre�li� kolor linii a co za tym idzie mo�emy linki podkre�li� innym kolorem. O ile nie ma to by� blog jak dzieci�ca kolorowanka to proponuj� wybiera� kolory podobne do t�a na jakim umieszczony zosta� link.

W szablonie z reliefami jest to ciemniejszy szary. Wszystkie linki w tym szablonie s� niebieskie i po najechaniu na nie zostaj� podkre�lone ci�g�� szar� lini�. Czerwone s� linki w notce, tytu�y notek i samego bloga. Poni�szy opis dotyczy tylko widocznych na ilustracji cech czyli podkre�lenia i koloru czerwonego przy linkach w tre�ci notki.

zobacz przyk�ad w szablonie 08 reliefowym, czerwono-niebieskim »

a:hover {
�border-bottom:#d1d1d1 1px solid;
}
.dzien .tresc a {
�color: #cd2a3f;
}
.dzien .tresc a:hover {
�color: #ac1e2c;
}

Inny rodzaj podkre�lenia

Wykorzystuj�c do podkre�lenia doln� ramk� mo�na nie tylko zmieni� kolor podkre�lenia ale tak�e jego rodzaj. W najprostszym uj�ciu zmodyfikowa� mo�na grubo�� i rodzaj podkre�lenia, ewentualnie mo�na doda� te� zakrzywienie wykorzystuj�c zaokr�glenie naro�nik�w (CSS3).

Podkre�lenie link�w lini� przerywan� mo�na znale�� w szablonach na starym kodzie kt�re nazwa�am ampla . Bardziej jaskrawy przyk�ad widoczny jest w szablonie z cudzym topem o nazwie This Is How It Feels. Jest to szablon na starym kodzie ale poni�szy fragment kodu CSS dostosowa�am do potrzeb new_age. Linki w tym szablonie maj� r�ne kolory ale czerwony opisa�am jako podstawowy. Za to specyficzne podkre�lenie jest ju� cech� tylko link�w w notkach.

zobacz przyk�ad w szablonie top 06 - This Is How It Feels »

a {
�color: #CC0000;
�text-decoration: none;
}
a:hover {
�color: #339900;
}
.dzien .tresc a {
�font-weight:bold;
�border-bottom: 3px dashed #CC0000;
}
.dzien .tresc a:hover {
�border-bottom: 3px solid #CC0000;
}

Lubi� te� podkre�la� linki lin� kropkowan� . Na moim szablonowym blogu takie podkre�lenie pojawia si� po najechaniu na link kursorem ale w szablonie na starym kodzie o nazwie 31 Garamond podkre�li�am tak linki w notce aby je wyr�ni� spo�r�d tre�ci. Tre�� pisana jest grafitowym kolorem a linki s� granatowe. R�nica w kolorach jest niewielka aby wi�c zaznaczy� dodatkowo linki u�y�am ramki kropkowanej. Ponownie mimo i� przyk�ad jest z szablonu na starym kodzie poni�szy zapis CSS wykorzystuje selektory z nowego.

zobacz przyk�ad w szablonie 31 szablon Garamond - ciemny »

#tresc-glowna .tresc a {
�color: #08122E;
�border-bottom: 1px dotted #08122E;
}
#tresc-glowna .tresc a:hover {
�color: #8C8C8C;
�border-bottom: 1px dotted #8C8C8C;
}

Inne t�o pod linkiem

Zazwyczaj nie dodaje si� innego t�a pod samym tekstem ale jest to kolejny ze sposob�w podkre�lania wa�no�ci tekstu przeniesiony ze �wiata pisma r�cznego. Inne t�o pod tekstem imituje u�ycie podkre�lacza . Czy rzeczywi�cie b�dzie to jaskrawy (najcz�ciej ��ty) kolor czy jaka� inna forma to kwestia pomys�u, wykonanie jest mniej wi�cej takie samo, u�ywa si� w�a�ciwo�ci background.

��ty pasek t�a pod linkiem jest jedn� z cech szablonu 14 ale, �e zamierzam jego wygl�d nieco zmieni� to do tego przyk�adu wykorzystam bardziej subtelne rozwi�zanie z szablonu zero. Wszystkie linki w szpalcie z g��wna tre�ci� po najechaniu na nie kursorem zyskuj� ��te t�o. Oczywi�cie poni�sze selektory dotycz� nowego kodu mimo i� szablon zrobiony jest na starym.

zobacz przyk�ad w szablonie 01 zero, szarym »

#tresc-glowna .tresc a {
�color: #777777;
�background-color: #ffffff;
�text-decoration: none;
}
#tresc-glowna .tresc a:hover {
�color: #777777;
�background-color: #ffffbb;
�text-decoration: none;
}

W bardziej rzucaj�cej si� w oczy formie pod�wietlenie innym kolorem t�a wykorzysta�am w szablonie na starym kodzie o nazwie The Kid. Wybra�am radykalne rozwi�zanie w postaci ciemno szarego t�a i grubej czarnej ramki na lewo od linku. Po najechaniu kursorem na link t�o znika ale lewa ramka zostaje. Poni�szy kod dostosowany zosta� do selektor�w szablon�w new_age.

zobacz przyk�ad w szablonie filmowym 03 - The Kid »

#tresc-glowna .tresc a {
�padding: 0px 3px 2px 2px;
�background:#222;
�border-left:4px solid #000;
�color:#ddd;
}
#tresc-glowna .tresc a:hover {
�background:none;
�color:#666;
}

Obrazek obok linku

Nie polecam tworzenia skomplikowanej, przyci�tej na wymiar grafiki ale co� prostego i niewielkiego powinno dobrze si� sprawdzi�. Je�eli to ma by� obrazek, kt�ry zajdzie si� pod ca�ym linkiem (np. na ca�ej jego d�ugo�ci) to nale�y pami�ta�, �e linki na blogu mog� mie� bardzo dowoln� d�ugo��. Najbardziej przydatny wydaje si� obrazek na wysoko�� litery umieszczony zaraz obok linku. W takim przypadku nale�y pami�ta� o wysoko�ci tekstu. Nie polecam zwi�kszania wysoko�ci link�w, zaburzy to sta�y odst�p mi�dzy wierszami tekstu.

W jednym z nowych szablon�w pojawi si� opcja szczeg�lnego wyr�nienia niekt�rych link�w gwiazdk�. Jak szablon zostanie opublikowany to podziel� si� opisem wygl�du w tej notce.

Na szablonowym blogu linki otwierane w nowej karcie zaznaczam specjaln� ilustracj�. Jako u�ytkownika linki otwierane w nowych kartach mocno mnie dra�ni� z drugiej strony jako autorka w�asnego bloga nie mog� si� powstrzyma� przed zmian� celu gdy linki s� tylko rodzajem wtr�cenia albo prowadz� do ilustracji czy dokument�w tekstowych. Do niedawna taka ilustracja informacyjna by�a tylko na szablonowym blogu (st�d powy�sza ilustracja) ale poni�szy opis dotyczy ju� blog�w z szablonami na nowym kodzie (takich jak ten).

a[target="_blank"] {
�padding-right: 11px;
�background: url(/resource/skm_t_blank.png) center right no-repeat;
}

Wygl�d link�w w szablonach na starym kodzie opisa�am w notce: W�a�ciwo�ci odno�nik�w cz.1 wygl�d link�w

Wpisy na powi�zane tematy opublikowane na blogu o szablonach na starym kodzie:

CSS: wpis na g��wnej (dotyczy tylko starego kodu)
CSS: wpis na statycznej (dotyczy tylko starego kodu)
Jak wygl�da pojedyncza deklaracja stylu (konkretne selektory pochodz� ze starego kodu ale s�u� tylko jako ilustracja a nie fundamentalna tre�� notki)

style kate mac

Odno�niki, odsy�acze, linki, hiper��cza... kwintesencja strony internetowej