16. Łącza

Paul Erdős był wybitnym matematykiem węgierskiego pochodzenia. Zajmował się różnymi dziedzinami matematyki, np. teorią grafów i kombinatoryką.

Zasłynął też tym, że we współpracy z innymi matematykami napisał ogromną liczbę prac (ponad 1500). W związku z tym jego przyjaciele wymyślili w ramach uznania dla jego wkładu w naukę tzw. liczbę Erdősa. Sam Erdős ma liczbę Erdősa 0, osoba która napisała z nim artykuł ma liczbę Erdősa 1, osoba która napisała artykuł z tą osobą, ma liczbę Erdősa 2 itd.

Paul Erdős był niezwykle barwnym i ciekawym człowiekiem, o którym warto dowiedzieć się więcej. Dodamy więc o nim stronę do naszej witryny o ciekawych ludziach i umieścimy do niej łącze w menu oraz w artykule o Feynmanie…

Są tylko dwa problemy. Po pierwsze nie mamy jeszcze menu, a po drugie nie umiemy tworzyć łączy do stron internetowych. Tworzeniem menu zajmiemy się w jednym z dalszych rozdziałów, a w tym nauczymy się tworzyć łącza (linki HTML, odnośniki, hiperłącza).

Łącza do stron i innych plików

Do tworzenia łączy na stronach internetowych służy element a (ang. anchor – kotwica). Jego najważniejszym atrybutem jest href (ang. hypertext reference – odnośnik hipertekstowy), którego wartością powinien być adres strony internetowej, np.:

<a href="https://shebang.pl" title="Strona z ciekawym kursem HTML i CSS">Shebang.pl</a>

Powyższy element tworzy odnośnik do strony Shebang.pl. Tekst znajdujący się między znacznikami otwierającym <a> i zamykającym </a> zostanie wyświetlony jako hiperłącze, którego kliknięcie spowoduje przejście do strony Shebang.pl. Sprawdź to: Shebang.pl.

Adresy stron, podobnie jak ścieżki do obrazów, mogą być zarówno względne, jak i bezwzględne.

Adresy względne i bezwzględne

Adres względny (ang. relative address) określa położenie pliku na serwerze względem bieżącej strony lub katalogu głównego. Poniższe łącze odnosi się do pliku feynman.html znajdującego się w tym samym folderze, co strona, na której je umieszczono:

<a href="feynman.html">Richard Feynman</a>

To łącze zawiera adres względny w odniesieniu do folderu bieżącego. A teraz spójrz na poniższe łącze:

<a href="/img/feynman.png">Zdjęcie Feynmana</a>

To łącze odnosi się do pliku feynman.png znajdującego się w folderze img witryny niezależnie od tego, gdzie znajduje się zawierająca je strona. Jego adres jest względny w odniesieniu do katalogu głównego witryny na serwerze.

Oprócz łączy względnych, można też tworzyć łącza bezwzględne (ang. absolute link), które zawierają cały adres URL pliku z uwzględnieniem protokołu i domeny, np.:

<a href="https://shebang.pl">Shebang.pl</a>

W wielu przypadkach wybór między łączem względnym i bezwzględnym nie ma większego znaczenia, ale łącza względne mają pewną przewagę nad bezwzględnymi: kiedy zmienimy domenę naszej witryny, nie będziemy musieli przerabiać wszystkich odnośników przez wstawienie do nich nowej nazwy domeny.

Obrazy jako łącza

Element a jako treść może zawierać nie tylko tekst, ale także grafikę. Wtedy obraz staje się odnośnikiem, który można kliknąć, aby przejść do wskazywanego zasobu, np.:

<a href="https://shebang.pl"><img src="img/feynman.png" alt="Richard Feynman ze swoimi bębnami" width="300" height="241"></a>

Możliwość tworzenia odnośników graficznych wykorzystuje się na przykład w galeriach zdjęć, w których wyświetlone są tylko miniatury obrazów. Kliknięcie miniatury powoduje otwarcie w oknie przeglądarki pełnowymiarowej grafiki.

Umiesz już tworzyć łącza do innych stron i zasobów, ale język HTML umożliwia także tworzenie odnośników do miejsc w obrębie tej samej strony. Przyjrzymy się im teraz.

Łącza w obrębie strony

Jeśli treść strony jest długa, jak jest na przykład w przypadku tej strony, to czasami przydają się odnośniki do innych miejsc w jej obrębie. Powiedzmy, że chcemy teraz przywołać postać Paula Erdősa opisaną na samym początku tego rozdziału. Kliknięcie łącza znajdującego się w poprzednim zdaniu przeniesie Cię do odpowiedniego miejsca na tej stronie.

Tego typu odnośniki także tworzymy za pomocą elementu a, tylko z odpowiednio spreparowanym adresem w atrybucie href. Adres ten musi odnosić się do wybranego miejsca na stronie. Aby można było odwołać się do wybranego miejsca na stronie, należy je jakoś oznaczyć. Do tego celu służy identyfikator elementu, który definiujemy w atrybucie id.

Identyfikatory elementów

W języku HTML istnieje globalny atrybut id, za pomocą którego można nadać dowolnemu elementowi identyfikator, aby go jednoznacznie zidentyfikować.

Na stronie HTML może znajdować się tylko jeden element o określonym identyfikatorze, a zasady nadawania nazw identyfikatorom są takie same, jak zasady nadawania nazw klasom.

Stwierdziliśmy, że chcemy utworzyć łącze do fragmentu strony poświęconego Paulowi Erdősowi. Aby móc to zrobić, musimy przypisać identyfikator elementowi zawierającemu ten tekst. Znajduje się on w akapicie, więc identyfikator nadamy elementowi p:

<p id="erdos">Paul Erdős był wybitnym matematykiem węgierskiego pochodzenia. Zajmował się różnymi dziedzinami matematyki, np. teorią grafów i kombinatoryką.<p>

Teraz pierwszy akapit tekstu na temat Paula Erdősa ma identyfikator erdos, do którego będziemy mogli odwoływać się za pomocą naszych odnośników. Takie odniesienie do fragmentu strony nazywa się identyfikatorem fragmentu (ang. fragment identifier).

Identyfikator fragmentu

Aby utworzyć odnośnik do elementu o określonym identyfikatorze na stronie, należy wpisać w atrybucie href elementu a identyfikator fragmentu. Jego składnia jest bardzo prosta: #identyfikator-elementu, np.:

<a href="#erdos">Paul Erdős</a>

Kliknięcie tego odnośnika spowoduje przeniesienie do miejsca na stronie, w którym zaczyna się element z atrybutem id="erdos".

Identyfikatory elementów są tak często używane, że dla nich, podobnie jak dla klas, w CSS utworzono specjalny selektor.

Selektor identyfikatora

Aby w CSS odnieść się do elementu mającego zdefiniowany atrybut id z jakąkolwiek wartością, można posłużyć się zwykłym selektorem atrybutu, dokładnie tak samo, jak w przypadku klas, np.:

p[id] {…}

Albo bardziej szczegółowo:

p[id=erdos] {…}

Ewentualnie bardziej ogólnie:

[id=erdos] {…}

Pierwszy z powyższych selektorów odnosi się do wszystkich elementów p mających atrybut id o jakiejkolwiek wartości, drugi wybiera tylko ten element p, który ma atrybut id o wartości erdos, a trzeci odwołuje się do dowolnego elementu mającego atrybut id o wartości erdos.

Tej składni jednak praktycznie się nie używa, ponieważ istnieje o wiele prostsza metoda – selektor identyfikatora. Ma on postać identyfikatora elementu poprzedzonego znakiem #, np.:

#erdos {…}

Ten selektor odnosi się do dowolnego elementu mającego identyfikator erdos (atrybut id o wartości erdos). Oczywiście w razie potrzeby można też określić typ elementu:

p#erdos {…}

Jednak w przypadku selektora identyfikatora rzadko określa się typ elementu, ponieważ selektor ten z natury odnosi się do elementu, który występuje tylko w jednym egzemplarzu na stronie.

Stylizacja łączy

Łącza są elementem tekstowym, więc do ich stylizacji można używać wszystkich własności CSS odnoszących się do tekstu, takich jak font-size, font-weight, letter-spacing itd.

Na przykład reguła a {color: green; text-decoration: none} zmienia kolor wszystkich odnośników na zielony i usuwa ich standardowe podkreślenie. Użyliśmy w niej własności text-decoration, której jeszcze nie znamy. Na razie zapamiętaj, że powyższa deklaracja usuwa podkreślenie z łączy (a żeby je przywrócić, należy użyć wartości underline). Dokładniejszy opis znajdziesz w następnym rozdziale.

Ponadto łącza są też elementem interaktywnym (pierwszym, który poznaliśmy w tym kursie). Ich interaktywność polega na tym, że reagują na działania użytkownika. Ze względu na tę cechę do ich stylizacji często wykorzystuje się także specjalne interaktywne selektory, nazywane pseudoklasami (ang. pseudoclass).

Stylizację łączy na stronie najlepiej jest uporządkować według następującego schematu:

• Najpierw należy zdefiniować ogólne style dotyczące wszystkich łączy na stronie za pomocą selektora a. Wprawdzie odnoszą się one zarówno do łączy do stron odwiedzonych, jak i nieodwiedzonych przez użytkownika, ale następne reguły zmienią ich ustawienia dla łączy odwiedzonych, więc regułę z selektorem a można traktować jako regułę dotyczącą tylko łączy nieodwiedzonych.
• Następnie należy zdefiniować pseudoklasy odnoszące się do poszczególnych stanów łączy, a więc prowadzących do stron, które zostały odwiedzone, takich na które najechano kursorem oraz aktywnych.

Poniżej znajduje się dokładny opis wymienionych pseudoklas.

Pseudoklasy

Pseudoklasy CSS odnoszą się do elementów nie wg ich miejsca w hierarchii drzewa dokumentu, typu lub cech budowy, tylko według ich stanów, np. najechanie elementu kursorem, kliknięcie elementu itd.

Składnia selektora pseudoklasy ma następującą postać:

selektor:nazwa-pseudoklasy

Jak widać, selektor pseudoklasy składa się z opcjonalnego dowolnego selektora CSS, dwukropka i nazwy pseudoklasy. Przed dwukropkiem może znajdować się dowolny selektor CSS, np. a[lang=en] lub po prostu a. Ten selektor może, ale nie musi, być oddzielony od dwukropka spacją. Na przykład, wszystkie poniższe definicje są poprawne (pseudoklasę :hover poznasz za chwilę).

a:hover {…}
a[lang=en]:hover {…}
a :hover {…}
a[lang=en] :hover {…}

Nie można natomiast rozdzielić dwukropka i nazwy pseudoklasy, tak na przykład jest źle: a: hover.

W CSS jest dostępny całkiem pokaźny zestaw pseudoklas, np. odnoszących się do pierwszego lub ostatniego dziecka wybranego elementu albo do elementów formularza, które zostały zaznaczone przez użytkownika itd. Nas w tej chwili interesują pseudoklasy umożliwiające stylizację łączy.

Pseudoklasy do stylizowania łączy

W CSS dostępne są dwie pseudoklasy odnoszące się specyficznie do łączy (elementów a mających zdefiniowany atrybut href) – :link i :visited – oraz dwie bardziej ogólne, których jednak najczęściej używa się do stylizowania łączy – :hover i ::active. Przyjrzymy się im dokładnie, a zaczniemy od pseudoklasy :link.

Standardowo łącza do nieodwiedzonych stron są niebieskie i podkreślone, a łącza do odwiedzonych stron są fioletowe i podkreślone. Pseudoklasa :link odnosi się do łączy do stron (elementów a z atrybutem href), które jeszcze nie zostały odwiedzone przez użytkownika:

Za pomocą pseudoklasy :link możemy zmienić wygląd linków prowadzących do stron, których użytkownik jeszcze nie oglądał, np.:

a:link {color: green}

Efekt zastosowania tej reguły jest następujący:

Jednak pseudoklasy tej używa się rzadko, ponieważ do uzyskania pożądanego efektu wystarcza także reguła z selektorem elementu a (przypomnij sobie listę parę akapitów wyżej).

Druga pseudoklasa łączy to :visited – umożliwia ona formatowanie wyglądu łączy prowadzących do stron, które zostały odwiedzone przez użytkownika, np.:

a:visited {color: red}

W oknie przeglądarki wygląda to tak:

Jak zostało napisane wcześniej, choć w regule z selektorem a zdefiniowaliśmy kolor zielony tekstu, tekst łączy do stron odwiedzonych jest czerwony, ponieważ zmienia go znajdująca się dalej reguła z selektorem pseudoklasy :visited.

Następna jest pseudoklasa :hover. Jest najciekawsza ze wszystkich, które tu opisujemy, ponieważ pozwala na stworzenie dynamicznego efektu. Stosuje ona ustawienia CSS do elementu, gdy użytkownik umieści na nim kursor myszy. Jeśli więc zdefiniujemy rozmiar pisma większy lub mniejszy niż normalny, to element zmieni rozmiar, kiedy najedziemy na niego kursorem, np.:

a:hover {font-size: larger;}

Efekt zastosowania tej reguły widać na poniższym zrzucie ekranu.

To oczywiście nie jest najczęstszy sposób użycia tej pseudoklasy. Najczęściej za jej pomocą zmienia się kolor łącza, aby uzyskać efekt „podświetlenia” np.:

a:hover {color: navy;}

Jeśli teraz użytkownik najedzie kursorem na którekolwiek łącze (odwiedzone i nieodwiedzone), zmieni ono kolor na granatowy. Spójrz na poniższy zrzut ekranu.

Ostatnia z interesujących nas w tej chwili pseudoklas to pseudoklasa ::active. Odnosi się ona do stanu aktywności elementu, a więc w przypadku łączy – do krótkiego momentu między kliknięciem łącza, a przejściem do nowej strony, np.:

a:active {color: aqua;}

Jeśli dodasz tę regułę do arkusza stylów na swojej stronie i klikniesz na niej odnośnik, to zmieni on kolor na chwilę w czasie między kliknięciem, a wyświetleniem nowej strony. Ta pseudoklasa też nie jest zbyt często używana.

Inne pseudoklasy

W CSS3 dostępny jest całkiem pokaźny zestaw pseudoklas. Poniższa tabela zawiera zwięzły opis kilku najciekawszych spośród nich, włącznie z opisanymi w tym rozdziale.

Linki wychodzące

Selektor odnoszący się do łączy prowadzących do stron nie należących do naszej domeny wygląda na dość skomplikowany, ale w rzeczywistości jest prosty. Poniżej znajduje się ten selektor używany w tej witrynie:

a[href*="//"]:not([href*="shebang.pl"])

Znasz już dwa selektory atrybutu. Człon [href*="//"] to jego kolejny rodzaj. Odnosi się on do wszystkich elementów, które mają atrybut href zawierający znaki // (fragment adresu URL do zewnętrznej strony).

Człon :not to tzw. pseudoklasa negacji, czyli zaprzeczenia. W związku z tym człon :not([href*="shebang.pl"] oznacza, że mają zostać wybrane wszystkie elementy, które nie zawierają tekstu shebang.pl.

Podsumowując, selektor a[href*="//"]:not([href*="shebang.pl"]) oznacza: „najpierw wybierz wszystkie elementy a, które mają atrybut href zawierający w wartości ciąg znaków //, a następnie spośród nich odrzuć te, które zawierają ciąg znaków shebang.pl”. W ten sposób wybieramy adresy URL nie odnoszące się do naszej domeny.

Dobraliśmy się już do odpowiednich elementów, więc teraz musimy je sformatować we właściwy sposób. W tym przypadku chcemy coś dodać za wybranym elementem. Moglibyśmy to zrobić przez dodanie odpowiedniego fragmentu kodu do samych elementów a, np.:

<a href="http://example.com">Jakaś strona<span>↗</span></a>

Następnie odpowiednio ustawiamy strzałkę w elemencie span, ewentualnie nadając mu jeszcze specjalną klasę. To jednak jest żmudne rozwiązanie, które wymaga pisania dodatkowego kodu HTML i pamiętania o tym, by za każdym razem go dodać.

Lepszym rozwiązaniem w takiej sytuacji jest użycie tzw. pseudoelementu.

Pseudoelementy

Pseudoelementy CSS to konstrukcje pozwalające uzyskać dostęp do części dokumentu, do których nie da się odnieść za pomocą elementów języka HTML. Na przykład, nie ma w języku HTML mechanizmu pozwalającego oznaczyć pierwszy wiersz tekstu (bo ten się zmienia w zależności choćby od szerokości okna przeglądarki), ani takiego, który pozwalałby odnieść się do „miejsca za wybranym elementem”.

Właśnie do takich części elementów pozwalają odnosić się pseudoelementy CSS. W naszym przykładzie chcemy umieścić strzałkę (a najlepiej specjalną ikonę – wrócimy do tego w następnym rozdziale) za elementem a, więc powinniśmy użyć pseudoelementu, który do tego służy. Ten pseudoelement to:

::after

Aby więc dodać coś za każdym elementem a, powinniśmy użyć następującego selektora:

a::after {…}

Sam selektor pseudoelementu to jednak nie wszystko. Pozwala on nam wskazać, że chcemy coś dodać za określonym elementem lub określonymi elementami, ale nie wskazuje, co chcemy tam dodać i jak to ma wyglądać. Treść dodawaną (która w specyfikacji CSS ma nazwę treści generowanej – ang. generated content) definiuje się za pomocą własności content, natomiast jej wygląd określamy za pomocą dowolnych własności CSS, np.:

a::after {
  content: ' jakiś tekst';
  font-size: small;
}

Własność content jako wartość przyjmuje dowolny łańcuch znaków umieszczony w cudzysłowie pojedynczym (jak powyżej) lub podwójnym. Nie przyjmuje jednak elementów HTML, albo inaczej, jeśli wpiszesz znacznik HTML, to zostanie on po prostu wyświetlony, a nie zinterpretowany jako kod HTML.

Gdybyśmy dodali tę regułę do naszych wcześniejszych przykładów formatowania linków, otrzymalibyśmy następujący efekt:

Oczywiście w tym przypadku zamiast tekstu chcemy wstawić strzałkę. Najlepiej zrobić to przy użyciu encji. W zestawie znaków UTF-8 znajduje się skierowana w górę strzałka o wartości szesnastkowej 1F855. Możemy jej użyć w naszej regule (pamiętaj, że encje CSS składają się z ukośnika i liczby szesnastkowej):

a::after {
  content: ' https://shebang.pl/wp-admin/edit.php?post_type=html\1F855';
}

Efekt zastosowania tej reguły jest taki:

To już zaczyna wyglądać nieźle, chociaż przydałoby się tę strzałkę jeszcze pomniejszyć i odpowiednio wypozycjonować. Ze zmniejszeniem nie mamy problemu, ponieważ znamy już własność font-size:

a::after {
  content: ' \1F855';
  font-size: 80%;
}

Natomiast położenie strzałki zmienimy za pomocą nowej dla nas własności vertical-align. Przyjmuje ona kilka wartości umożliwiających określenie pionowego położenia elementu w wierszu. Dla nas w tej chwili najbardziej przydatna będzie wartość super, która powoduje przeniesienie do indeksu górnego (w indeksie górnym znajduje się na przykład wykładnik potęgi, czyli liczba 2, w 3²).

a::after {
  content: ' \1F855';
  font-size: 80%;
  vertical-align: super;
}

Teraz nasze linki na stronie wyglądają tak:

To nam na razie wystarczy. Należy wiedzieć, że standardowo łącza wychodzące oznacza się za pomocą specjalnej ikony, ale nie ma jej w zestawie znaków UTF. Zastosowaliśmy więc rozwiązanie zastępcze, które też wygląda całkiem dobrze.

Pozostało nam połączyć nasze selektory w jedną całość:

a[href*="//"]:not([href*="shebang.pl"])::after {
  content: ' \1F855';
  font-size: 80%;
  vertical-align: super;
}

Od tej pory wszystkie łącza zewnętrzne będą opatrzone strzałką.

Na razie jednak nie będziemy korzystać z tej techniki, ponieważ nasza witryna nie znajduje się na serwerze i nie mamy dla niej wykupionej domeny, więc nie wiemy jeszcze, co wpisać w miejsce shebang.pl. Zapamiętaj sobie ten kod i wykorzystaj go, gdy już będziesz mieć wszystko gotowe.

Na zakończenie części poświęconej pseudoelementom przedstawiam tabelę ze zwięzłym opisem kilku najciekawszych spośród nich.

Skoro umiemy już tworzyć łącza do innych stron, to grzechem byłoby z tej umiejętności nie skorzystać. Pamiętasz jeszcze tego wybitnego matematyka, Paula Erdősa, o którym była mowa na początku rozdziału? W następnym rozdziale utworzymy o nim stronę , a teraz dodamy do niej łącze na stronie o Feynmanie.

W tym celu na samym dole obecnej strony, pod akapitem na temat Tuwy, dodaj poniższą ciekawostkę:

Liczba Erdősa

Wielu wybitnych naukowców współpracowało bezpośrednio lub pośrednio z Paulem Erdősem, który w trakcie swojej kariery naukowej napisał ponad 1500 artykułów. Liczba Erdősa określa, jak blisko współpracy z tym matematykiem był dany uczony. Feynman ma na przykład liczbę Erdősa 3.

Teraz nasza strona powinna wyglądać tak:

Poniżej znajduje się jej kompletny kod źródłowy:
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta  charset="utf-8">
    <title>Richard Feynman</title>
    <style>
      body {min-width: 600px; max-width: 800px; margin: 0 auto; padding: 10px;}
      h1, h2, h3 {margin-bottom: 0; margin-top: 30px;}
      p {margin-top: 5px;}
      blockquote {border-left: 6px solid green; padding: 10px 20px; margin-bottom: 0; text-align: justify;}
      figcaption {margin-left: 66px; font-weight: bold; font-size: 90%;}
      strong {font-size:large;}
      em {letter-spacing: 0.15em;}
      i[lang=en] {color: brown;}
      mark {background-color: pink;}
      .nazwisko {color: darkgreen; letter-spacing: 0.1em;}
      .uniwersytet {color: darkred;}
      a {color: green; text-decoration: none;}
      a:visited {color: red;}
      a:hover {color: navy;}
      a:active {color: aqua;}
    </style>
  </head>
  <body>
    <h1>Richard <span class="nazwisko">Feynman</span></h1>
    <p>Richard  Phillips <span class="nazwisko">Feynman</span> to amerykański fizyk teoretyk, który w 1999 roku znalazł się na liście dziesięciu najwybitniejszych fizyków wszech czasów.</p>
    <img src="img/feynman.png" alt="Richard Feynman ze swoimi bębnami" width="300" height="241">
    <h2>Studia</h2>
    <p>Studiował w <span class="uniwersytet"><abbr title="Massachusetts Institute of Technology">MIT</abbr></span>, a następnie odbył studia doktoranckie na Uniwersytecie <span class="uniwersytet">Princeton</span> pod kierunkiem Johna Wheelera, <em>nie</em> Stephena Hawkinga, jak niektórzy sądzą.</p>
    <h2>Ciekawostki</h2>
    <p><span class="nazwisko">Feynman</span> zajmował się wieloma dziedzinami fizyki, w tym <i>kwantową teorią pola</i>, <i>fizyką cząstek elementarnych</i>, czy <i>kwantową teorią grawitacji</i>. Kiedyś wyraził się na temat tych spraw w następujący sposób (zwróć uwagę na to, co mówił o świecie submikroskopowym):</p>
    <figure>
      <blockquote cite="https://www.brainyquote.com/authors/richard-p-feynman-quotes">
        <p>„<mark>Przedmioty w bardzo małej skali zachowują się w sposób całkowicie odmienny od wszystkiego, co znamy</mark>. Nie przypominają fal, nie przypominają cząsteczek, nie  przypominają chmur, kul bilardowych, ciężarków zawieszonych na sprężynach ani nie zachowują się jak cokolwiek, co kiedykolwiek widzieliśmy”.</p>
      </blockquote>
      <figcaption>— Richard Phillips <span class="nazwisko">Feynman</span></figcaption>
    </figure>
    <h3>Projekt Manhattan</h3>
    <p><span class="nazwisko">Feynman</span> od bardzo młodych lat był uznawany za wybitnego fizyka, dzięki czemu otrzymał propozycję wzięcia udziału w projekcie Manhattan, którego celem było stworzenie bomby atomowej. <strong><span class="nazwisko">Feynman</span> uczestniczył w pierwszej próbie detonacji tej bomby w 1945 roku.</strong></p>
    <h3>Pochodzenie</h3>
    <p>Richard <span class="nazwisko">Feynman</span> wychował się w rodzinie żydowskiej oraz <b>miał korzenie rosyjskie i polskie</b> – ojciec jego matki, Lucille, wyemigrował z Polski. Ponadto jej matka także pochodziła z rodziny polskich imigrantów.</p>
    <h3>Tuva or Bust</h3>
    <p><span class="nazwisko">Feynman</span> fascynował się wchodzącą w skład Federacji Rosyjskiej republiką Tuwy, co wyrażał m.in. za pomocą hasła <i lang="en">Tuva or Bust</i> (Tuwa albo nic). W nawiązaniu do tej fascynacji jego przyjaciel, Ralph Leighton, napisał nawet książkę pod tym właśnie tytułem.</p>
    <h3>Liczba Erdősa</h3>
    <p>Wielu wybitnych naukowców współpracowało bezpośrednio lub pośrednio z <a href="erdos.html">Paulem Erdősem</a>, który w trakcie swojej kariery naukowej napisał ponad 1500 artykułów. Liczba Erdősa określa, jak blisko współpracy z tym matematykiem był dany uczony. Feynman ma na przykład liczbę Erdősa 3.</p>
  </body>
</html>

Podsumowanie

• Do tworzenia łączy służy element a z atrybutem href.
• Łącze może prowadzić do strony, do pliku dowolnego innego typu oraz do miejsca w obrębie tej samej strony.
• Dodatek atrybutu download do łącza sprawia, że wskazywany zasób jest pobierany na dysk komputera użytkownika, a nie otwierany w oknie przeglądarki.
• Adres w atrybucie href może być względny lub bezwzględny.
• Adres względny odnosi się do bieżącego lub głównego katalogu na serwerze.
• Adres bezwzględny to pełny adres z przedrostkiem http:// lub https://.
• Atrybut id określa identyfikator elementu.
• Łącze do określonego miejsca na stronie odnosi się do elementu o określonym identyfikatorze.
• Selektor identyfikatora w CSS ma postać #identyfikator.
• Do stylizacji różnych stanów łączy służą pseudoklasy CSS.
• W CSS istnieje spora grupa pseudoklas.
• Linki wychodzące to łącza do stron w innych witrynach.
• Pseudoelementy CSS CSS to rodzaj selektora odnoszący się do części elementów niedostępnych za pośrednictwem języka HTML.
• W CSS istnieje kilka pseudoelementów.

Ćwiczenia

1. Nadaj łączom na stronie o Feynmanie następujące ustawienia CSS:
   1. Element a: kolor 3a5a01, brak podkreślenia.
   2. Łącza odwiedzone: kolor 889079, rozmiar czcionki mniejszy o 5%.
   3. Łącza najechane kursorem myszy: kolor 679e05, podkreślenie.
   4. Aktywne łącza: kolor bdf35d.
2. Spraw, aby kolor zaznaczanego tekstu na Twojej stronie zmieniał się na różowy z fioletowym tłem – dzięki temu użytkownikom odechce się go zaznaczać…