Rozważmy użycie hiperłączy na przykładzie nr 1.

Wyświetl specyfikację HTML 5 może tu być.
Strona otworzy się w nowym oknie.

Tutaj możesz pobrać tabele elementów i atrybutów.

Przykład 1. Korzystanie z hiperłączy

Używanie hiperłączy do tworzenia zakotwiczeń na stronie

Element „a” może być również używany jako hiperłącze do nawigacji na stronie. Aby to zrobić, we właściwym miejscu w dokumencie musisz utworzyć Kotwica (z angielskiego. Kotwica), czyli zakładkę i określ ją jako cel w hiperłączu. Kotwica jest tworzona za pomocą pustego elementu „a” z atrybutem określonym w otwierającym tagu. Możesz również użyć wymaganego elementu znaczników jako kotwicy, do której będzie prowadzić wewnętrzne hiperłącze w przyszłości. Aby to zrobić, wystarczy określić w nim atrybut. Ponadto w atrybucie href samego hiperłącza jako wartość określa się symbol krzyżyka „#” i wartość atrybutu kotwicy. Aby było jaśniej, rozważmy wszystko na przykładzie nr 2.

Ja jestem pierwszym akapitem.

Wyświetl tabelę atrybutów HTML 5 mogą
na oficjalnej stronie tutaj.
Strona otworzy się w nowym oknie i będzie
przewinięto do tabeli z atrybutami.

Możesz przejść do pierwszego akapitu tutaj.

Przykład nr 2. Korzystanie z wewnętrznych hiperłączy

Zwróć uwagę na obecność kotwicy w adresie bezwzględnym określonym jako wartość atrybutu href w drugim akapicie przykładu. Korzystając z takiego hiperłącza, przeglądarka najpierw przejdzie pod wskazany adres, a następnie przewinie stronę do lokalizacji określonej kotwicy. Jeśli na stronie nie ma kotwicy, strona będzie wyświetlana od początku.

Względne hiperłącza i budowanie adresowania względnego

Podsumowując akapit, rozważ zasadę konstrukcji adresy względne... Niech nasze hiperłącze będzie w dokumencie znajdującym się na serwerze lokalnym pod adresem http: // localhost / site / doc_1 / doc_2 / ... / doc_n / web_page.html, gdzie doc_n to folder n-tego poziomu. W tym przypadku folder doc_n, w którym znajduje się nasz dokument z hiperłączem, jest automatycznie traktowany jako podstawa, na której opiera się całe adresowanie. Więc:

• Jeśli chcesz, aby odsyłacz wskazywał na dokument docelowy nowa_page.html znajdujący się w tym samym folderze doc_n, co nasz oryginalny dokument z hiperłączem, wystarczy podać nazwę dokumentu docelowego jako wartość atrybutu href odsyłacza: href \u003d "nowa_page.html".
• Aby przejść do dokumentu docelowego new_page.html znajdującego się w folderze http: // localhost / site / doc_1 / doc_2 / ... / doc_n / doc_n_1 / ... doc_n_k /, wartość atrybutu href odsyłacza powinna zawierać tylko foldery zagnieżdżone w doc_n i oczywiście nazwę dokumentu docelowego: href \u003d "doc_n_1 / ... doc_n_k / new_page.html"... W ten sposób mówimy przeglądarce, aby przeszła do folderu doc_n_1, znajdującego się w folderze doc_n z dokumentem źródłowym, w którym jest zarejestrowane hiperłącze, następnie do folderu doc_n_2 i tak dalej, aż trafi do folderu doc_n_k, w którym znajduje się dokument docelowy, którym jest i musi się otworzyć.
• Aby dostać się do folderu o jeden poziom wyższego niż oryginalny, używana jest specjalna kombinacja symboli „../”. Aby przejść o n poziomów w górę, napisz kombinację „../” n razy pod rząd. Więc w naszym przypadku, aby przejść do linku do dokumentu docelowego http: // localhost / site / doc_1 / doc_2 / ... / doc_n-3 / new_page.html atrybut href odsyłacza musi mieć postać „../../../new_page.html”. W ten sposób informujemy przeglądarkę, że powinna przejść do folderu doc_n-1, następnie doc_n-2 i doc_n-3, a następnie otworzyć znajdujący się tam dokument docelowy new_page.html.
• Jeśli konieczne jest nie tylko przejście o kilka poziomów wyżej, ale także przejście do folderu (lub kilku podfolderów) tam, aby uzyskać dostęp do dokumentu docelowego, to w wartości atrybutu href odnośnika należy najpierw wpisać wymaganą liczbę poziomów podnoszenia za pomocą symboli ”. ./ ”, a następnie dołącz ścieżkę z folderu wynikowego do dokumentu docelowego. Na przykład, jeśli dokument docelowy znajduje się w folderze new_doc i ścieżka adresowa do niego wygląda http: // localhost / site / doc_1 / doc_2 / ... / doc_n-3 / new_doc / new_page.html, to atrybut href łącza musi mieć wartość „../../../new_doc/new_page.html”... Te. każemy przeglądarce przejść o trzy poziomy w górę w stosunku do folderu źródłowego doc_n, który zawiera dokument z hiperłączem, a następnie przejść do folderu new_doc i otworzyć dokument docelowy new_page.html

Jako przykład możesz pobrać mini witrynę samouczka zbudowaną w całości na podstawie adresowania względnego. Po zakończeniu przeglądania eksperymentuj, modyfikując i tworząc nowe łącza, foldery i strony.

Względne hiperłącza bardzo wygodne podczas tworzenia aplikacji przeglądarek offline, na przykład podręczników. Pamiętaj jednak, że kiedy przenosisz dokument z bieżącego folderu do innego, wszystkie odnośniki względne w nim przestaną działać. Dlatego będą musiały zostać przepisane. Jeśli łącza względne wskazują pliki, które również znajdują się w bieżącym folderze lub w podfolderach, to po przeniesieniu tego folderu do innej lokalizacji wszystkie łącza w dokumencie pozostaną działające.

Jeśli musisz zacząć liczyć ścieżkę względną od katalogu głównego witryny, dodaj ukośnik „/” na początku ścieżki. Na przykład link „ Dom”oznacza dokument, który znajduje się w folderze głównym witryny (nie bieżący!). Pamiętaj, że liczenie od katalogu głównego witryny działa tylko pod kontrolą prawdziwego serwera WWW. Na serwerze lokalnym, na przykład Xampp, musisz zacząć liczyć od nazwa folderu głównego.

Witajcie drodzy goście!

W tym artykule pokażę, jak dodać link do strony w postaci prostego hiperłącza, obrazka i przycisku, który można stylizować za pomocą stylów CSS. Wszystkie 3 opcje są bardzo często używane i mają całkiem niezły efekt, gdy są używane przez odwiedzających.

Zacznijmy od najprostszych i przejdźmy do kompleksu.

Zwykły link i hiperłącze

http: //site/poleznoe/kak-sdelat-ssylku-na-sait.html

http: //site/poleznoe/kak-sdelat-ssylku-na-sait.html

Taka opcja ma miejsce, ale jest istotna wada, jeśli mówimy o skuteczności takiego łącza. Nie można go kliknąć, to znaczy nie można do niego przejść jednym kliknięciem myszy. Ta opcja jest raczej trudna dla odwiedzających.

Inną rzeczą jest hiperłącze, które po kliknięciu przekierowuje do innego dokumentu w Internecie, zarówno wewnętrznego (w tej samej witrynie), jak i zewnętrznego (inna witryna). Przykład takiego linku możesz zobaczyć poniżej. Spróbuj kliknąć łącze.

Strona główna mojego zasobu powinna otworzyć się w nowej karcie. Aby zaimplementować tę opcję, musisz albo użyć środków swojego silnika, albo napisać następujący wiersz w kodzie HTML.

Kliknij tutaj

Link jest tworzony za pomocą prostego tagu , wewnątrz którego znajduje się sam adres, na który należy przekierować użytkownika, a także zakotwiczenie linku (w powyższym przykładzie kotwicą jest fraza „kliknij tutaj”), która wskazuje tekst linku wyjaśniający, co otrzymasz, gdy przejdziesz pod ten adres.

Jeśli masz prostą stronę internetową wykonaną w HTML, to w edytorze stron powinieneś napisać właśnie taki kod, zmienić mój adres na własny i wskazać kotwicę. Będzie to wyglądało tak.

Wewnątrz tagu linku istnieje również atrybut otwierający stronę w nowej karcie.

target \u003d "_blank"

Jest to również bardzo ważne, dlatego wskazane jest, aby nie wyrzucać gościa z zasobu, ale go zostawić. Używając tego atrybutu, zapewnisz, że użytkownik klikający wiele linków na jednej stronie nie opuści bieżącej, ale jednocześnie otworzy wiele innych stron. Jest to ważne, jeśli promujesz witrynę internetową.

Możesz dodać atrybut tytułu do łącza, który jest znacznikiem nagłówka i poinformować wyszukiwarki, dokąd prowadzi łącze. Ten tag jest również wyświetlany (jeśli jest zarejestrowany), gdy najedziemy na link w postaci podpowiedzi.

Wskazane jest dodanie tagu tytułowego, aby odwiedzający mogli zobaczyć tę wskazówkę po najechaniu kursorem i zrozumieć, dokąd zmierzają. Robi się to po prostu wewnątrz tagu otwierającego jak w poniższym przykładzie.

W przypadku korzystania z silnika takiego jak WordPress, dodanie linku do witryny jest bardzo proste bez żadnych zmian w trybie html. Edytor postów ma specjalną ikonę z ikoną połączenia.

Na obrazku pokazałem cały proces dodawania linku pomiędzy tekstem a inną stroną.

1. Najpierw wybierz frazę, którą chcesz utworzyć łącze;
2. Kliknij ikonę dodawania linku;
3. Ustalamy parametry linku (adres strony, na którą chcesz przenieść użytkownika, a także tytuł linku, czyli kotwicę, jeśli to konieczne)

Nie musisz wpisywać tytułu linku, ponieważ będzie to tekst wybrany w pierwszym etapie. Na obrazku pokazałem dodawanie linków z istniejących stron w serwisie. Możesz to zrobić, klikając na jeden z wpisów z listy adresów URL, a tytuł zostanie wpisany automatycznie.

Adres URL można również wprowadzić w witrynie zewnętrznej. Jeśli tak, wprowadź pełny (bezwzględny) adres strony. Aby otworzyć stronę w nowej karcie, nie ma potrzeby ręcznego wpisywania atrybutu. Silnik daje taką możliwość za pomocą jednego checkboxa (patrz obrazek powyżej).

Nieco wyżej powiedziałem o adresie bezwzględnym. Oznacza to, że pełny adres strony, na którą chcesz przekierować, niezależnie od tego, czy jest to nasz zasób, czy inny, znajduje się w linku.

Istnieje również adres względny, gdy nie jest konieczne wpisywanie pełnego adresu. Wystarczy zarejestrować ścieżkę do jakiegoś katalogu lub strony serwisu bez podawania nazwy domeny. Takie linki działają tylko dla strony w jednym zasobie. Nie będziesz odnosić się do takiego zewnętrznego projektu.

Jeśli chcesz zagłębić się w proces tworzenia adresów względnych, bardzo polecam przeczytaj ten artykuł na innym zasobie. Wszystko tam jest bardzo fajne.

Obraz łącza

Linki do zdjęć są również szeroko rozpowszechnione, chociaż należy ich używać tylko zgodnie z ich przeznaczeniem. Jeśli jesteśmy prostymi linkami do innych stron w naszej witrynie, lepiej nie robić z nich obrazów, ponieważ nie zawsze jest jasne, że musisz kliknąć obraz, aby przejść do jakiejś strony.

Jest to wskazane, gdy chcesz kogoś zareklamować, na przykład czyjś kurs wideo. W takim przypadku podajesz zwykłe hiperłącze, po którym następuje obraz łącza. W takim przypadku będzie bardziej jasne, że obraz prowadzi do strony kursu, gdzie można go kupić.

Jeśli weźmiemy tryb html, to zasada budowania struktury linków jest taka sama, łącznie ze wszystkimi atrybutami. Jedyną różnicą jest zakotwiczenie linku, które wygląda jak kod samego obrazu. W poprzednim przypadku był prosty tekst.

W praktyce będzie to wyglądać tak.

Jak widać, wewnątrz otwierających i zamykających tagów linków znajduje się kod obrazu, który również ma swoje własne cechy. Musisz zarejestrować w nim ten sam tytuł, określić ścieżkę do obrazu na hostingu lub w innym zasobie. Warto również określić wymiary obrazka (szerokość - szerokość, wysokość - wysokość). I zdecydowanie powinieneś przepisać atrybut alt, który służy jako opis obrazu. Jeśli zapiszesz wszystko, optymalizacja obrazu będzie na poziomie.

Tak to wygląda w trybie html. Podzieliłem kod na 3 części, aby struktura linków była bardziej zrozumiała (obraz jest klikalny).

Trudność polega tutaj tylko na poprawnym napisaniu kodu obrazu, który służy jako kotwica.

Przycisk linku przy użyciu stylów CSS

Jeśli chcesz zrobić coś inaczej, ta opcja również ma miejsce. Ponadto umożliwia zmianę stylów, dzięki czemu po najechaniu na przycisk zmieni się zarówno sam przycisk, jak i kolor etykiety, która będzie w nim. Jeśli robisz zdjęcie, nie zawsze jest to możliwe. Dzięki stylom wszystko jest możliwe.

Bardzo dobrą zaletą jest również to, że przycisk możemy umieścić ściśle na środku i będzie klikalny tylko w obszarze przycisku. Jeśli zrobimy zdjęcie, to po umieszczeniu go na środku, cały obszar treści w części szerokości w obszarze obrazu będzie klikalny. Czasami taka wada prowadzi do przypadkowego kliknięcia obrazu i, szczerze mówiąc, irytującego.

Na przykład stworzyłem taki prosty przycisk, który prowadzi do strony głównej serwisu. Możesz sprawdzić jego działanie.

Jeśli spojrzysz na kod źródłowy przycisku, wszystko jest bardzo proste. Jedyną różnicą w stosunku do zwykłego hiperłącza jest obecność identyfikatora, który jest dodawany wewnątrz tagu otwierającego a do niego z kolei style projektowe są rejestrowane w pliku style.css.

Oto struktura samego przycisku.

Widzimy to zaraz po otwarciu tagu linku Identyfikator \u003d "przycisk" jest zarejestrowany, co ma swoje własne style projektowania. Reszta struktury jest identyczna z hiperłączem.

Zasada jest jasna, więc podaję style, które dodałem do tego przycisku linku.

/ * style przycisków w trybie normalnym * / #button (display: block; width: 550px; / * button width * / height: 60px; / * height * / background-color: # ff4343; / * background-color * / text- cień: 1px 1px # 800909; / * cień tekstu * / color: #fff; / * kolor tekstu * / border-style: solid; / * button border (border) line type * / border-width: 1px; / * grubość obramowanie przycisku (obramowanie) linie * / border-color: # db3a3a; / * button border (border) color line * / font-size: 18px; / * text size * / line-height: 60px; / * tekst liniowy wysokość * / font-weight: normal; / * text weight * / font-family: arial; / * font type * / text-align: center; / * tekst wyrównanie * / text-decoration: brak; / * podkreślenia tekstu * / margin : 40px auto; / * dopełnienie przycisku od innych elementów na stronie * / text-transform: uppercase; / *, aby wszystkie litery były duże. Jeśli nie jest to konieczne, usuń linię * /) / * style przycisków po najechaniu * / # button: hover (background-color: # f23333; font-size: 19px;)

Dzień dobry wszystkim, drodzy przyjaciele i czytelnicy. Mam nadzieję, że nadal zdecydowałeś się wziąć udział w moim konkursie i już piszesz o swojej ścieżce blogowania. Cóż, chciałbym kontynuować naszą naukę o języku html, a dziś chciałbym opowiedzieć o jednym z najważniejszych elementów, a mianowicie o hiperłączach.

Tak, bez takich hiperłączy Internet nie byłby tak wygodny. Nie, kłamię. Nie byłoby to wcale wygodne z punktu widzenia nawigacji. Czy możesz sobie wyobrazić internet bez nich? Osobiście nie.

A dzisiaj nauczymy się wstawiać hiperłącze do html. Najpierw jednak chciałbym Cię zapytać: czy wiesz, czym jest hiperłącze i czym różni się od zwykłego łącza? Tutaj wszystko jest naprawdę proste: link to zwykłe zapisanie informacji, które odnoszą się do jakiegoś dokumentu. Jednocześnie nie możesz kliknąć tego tekstu (nic się nie stanie), ale wiesz, gdzie szukać informacji.

Przykład: Możesz dowiedzieć się, jak wybierać włosy w Photoshopie pod adresem // site / adobe-photoshop / kak-vydelit-volosy /

Hiperłącze to ten sam tekst, tylko jego istota polega na tym, że możesz kliknąć ten tekst i dostać się do żądanej strony, witryny lub dowolnego innego obiektu. Co więcej, sam tekst może być dowolny, a adres jest już wpisany w środku osobno i może być zupełnie inny. Ale niech tak było, tak samo w mowie potocznej nazywane są po prostu linkami. Oto przykład hiperłącza:

Możesz przeczytać o tym, jak prawidłowo wybrać włosy w Photoshopie w jednym z moich.

Tak czy siak. Dobra teoria. Przejdźmy teraz do praktyki i zobaczmy, którzy są odpowiedzialni za wszystkie te sprawy.

Sparowany tag jest odpowiedzialny za hiperłącze, ale sam w sobie jest niczym. Zawsze ma atrybut. I w tym przypadku musimy nieustannie przepisać to właśnie href. W wartości atrybutu umieszczamy sam link do żądanego zasobu. A w samej treści piszemy sam tekst, który powinien stać się klikalny (praca na kliknięcie). Spójrz na przykład, a myślę, że wszystko zrozumiesz.

Wyszukiwarka Yandex

Jak rozumiesz, w tym przykładzie napisałem, że po kliknięciu na fragment tekstu „wyszukiwarka Yandex” osoba zostanie skierowana pod adres wpisany w wartości atrybutu href.

Myślę, że wielu z was zdaje sobie sprawę, że istnieją linki wewnętrzne i zewnętrzne. Linki wewnętrzne są prowadzone w jednym katalogu, to jest w witrynie, a linki zewnętrzne prowadzą do zasobów stron trzecich. A teraz pokażę ci, jak to zrobić.

Przejścia wewnętrzne

Plik w tym samym folderze

Ale takie przejście będzie działać pod warunkiem, że plik, do którego tworzysz łącze, znajduje się w tym samym folderze, co plik, do którego tworzysz łącze. W przypadku innych opcji wszystko jest trochę inne.

Plik w innym folderze

1. Otwórz plik pushkin.html w Notepad ++
2. Teraz znajdź zdjęcie słowa i zawiń je w tagi<a href\u003e .
3. Teraz uwaga! W wartości atrybutu wpisujemy ścieżkę względem edytowanego pliku, czyli samego pushkin.html. Powinieneś mieć coś takiego:

Zdjęcie

Co teraz zrobiliśmy? I zrobiliśmy tak: ponieważ ścieżka do zdjęcia znajduje się w osobnym folderze img, który znajduje się w tym samym folderze co plik pushkin.html, to w wartości atrybutu musimy najpierw wpisać nazwę folderu, a następnie po ukośniku (/) pełną nazwę dokumentu (w nasze zdjęcia przypadku).

Teraz zapisz i uruchom plik pushkin.html w swojej przeglądarce. Zobaczysz, że słowo „Zdjęcie” zostało podświetlone na niebiesko i stało się klikalne, co oznacza, że \u200b\u200bklikając w ten link przejdziemy do pliku fofo.jpg, który znajduje się w folderze img.

Jak to jest? Wszystko jasne? Jeśli coś się stanie, zapytaj, nie wahaj się.

Przejścia zewnętrzne

I oczywiście nie można nie wspomnieć o linkach zewnętrznych, po kliknięciu w które trafimy na zupełnie inną stronę. Ale nie ma tu nic skomplikowanego. Chodzi o to, aby wrzucić do wartości href pełny adres witryny lub strony internetowej. Pokazałem powyżej przykład z Yandexem. Ale oto kolejny przykład dla Ciebie:

Będę uczyć się na mistrza projektów społecznych.

Tutaj przechodzimy do konkretnej strony określonej witryny.

Otwieranie w nowym oknie

Domyślnie po kliknięciu odsyłacza dokument otwiera się w tym samym oknie co Twoja strona, tj. Twoja strona zostanie zamknięta. A to nie jest dobre. W szczególności w przypadku projektów z treściami promowanymi lub blogów zaleca się, aby po kliknięciu linku dokument otworzył się w nowym oknie lub w nowej karcie bez zamykania strony.

Pomoże nam w tym atrybut target o wartości „_blank”. Nie ma tu nic skomplikowanego. Musisz tylko wstawić to wewnątrz tagu otwierającego po wartości atrybutu href. Weźmy ten fragment z pliku lukomorye.html, w którym utworzyliśmy odnośnik do strony pushkin.html, dopiero teraz zarejestrujemy ten atrybut. To powinno wyglądać tak:

Z wiersza Rusłan i Ludmiła (Autor - A.S. Puszkin)

Cóż, wszystko jest jasne. Teraz po kliknięciu treści żądana strona otworzy się w nowym oknie. Jest to bardzo konieczne, ponieważ jeśli tego nie zarejestrujesz, użytkownik po prostu opuści Twoją stronę. I tak w każdym razie pozostanie na nim, tylko jeśli sam go specjalnie nie zamknie. Spróbuj zrobić wszystko sam, po prostu zrób wszystko swoimi pięknymi długopisami. Nie jest wymagane kopiowanie i wklejanie.

Coś w tym stylu. Wygląda na to, że opowiedział wszystkie najważniejsze rzeczy, ale jeśli chcesz iść w tym kierunku i nauczyć się HTML i CSS, aby tworzyć profesjonalne strony, blogi, a nawet sklepy internetowe, to koniecznie zajrzyj doskonały kurs wideow tym temacie. Lekcje są naprawdę doskonałe i są naprawdę przeznaczone dla osób, które nie są jeszcze zaznajomione z budowaniem witryn lub w ogóle nie są obeznane.

Cóż, na tym kończy się nasza dzisiejsza lekcja. Mam nadzieję, że spodobał Ci się mój artykuł i będziesz zadowolony, jeśli zostaniesz moim stałym czytelnikiem. Dlatego nie zapomnij zasubskrybować aktualizacji na moim blogu, aby nie przegapić czegoś ciekawego. Cóż, życzę powodzenia we wszystkich twoich przedsięwzięciach. PA pa!

Pozdrawiam, Dmitrij Kostin.

Hiperłącze jest wskazówką dla przeglądarki, do którego obiektu w dokumencie HTML lub poza nim ma się odnosić. Korzystając z hiperłączy, użytkownicy mogą przechodzić z jednej strony do drugiej, przesyłać pliki itp. Jak można ozdobić hiperłącze fragmentem tekstu lub obrazem (plik graficzny). Kiedy strona internetowa jest wyświetlana w oknie przeglądarki, łącze tekstowe jest zwykle podświetlone na niebiesko i podkreślone. Jednak nie zawsze tak jest. Aby przejść do miejsca, na które wskazuje link, wystarczy kliknąć jego tekst.

Aby utworzyć hiperłącze, musisz użyć znaczników i definiując dla tagu atrybut Href... Jego wartością musi być adres URL, na który wskazuje łącze. Tekst łącza jest umieszczony między znacznikami i.

Jeśli strona internetowa, do której prowadzi odsyłacz, znajduje się w innej witrynie, to wartość atrybutu Href musi być pełnym adresem URL z nazwą protokołu włącznie; takie linki nazywane są linkami zewnętrznymi. Jeśli hiperłącze wskazuje na inną stronę tej samej witryny, to w celu wyszukania dokumentu wystarczy podać tylko ścieżkę względną; takie łącze nazywa się wewnętrznym.

Hiperłącze może wskazywać określone miejsce na stronie, jeśli najpierw osadzisz tam znacznik kotwicy. Tagi są również używane do definiowania kotwic i , ale zamiast atrybutu Href ustawić atrybut IMIĘktórej wartością musi być nazwa kotwicy. Może składać się z liter i cyfr, ale nie może zawierać znaków spacji. Jeśli na stronie jest kilka tagów, wszystkie powinny mieć różne nazwy.

Aby utworzyć link do zainstalowanej kotwicy, potrzebujesz w tagu umieść jego nazwę na końcu adresu URL po nazwie dokumentu, oddzielając go # ... Symbol # oznacza, że \u200b\u200bpo nim jest zapisywana nazwa znacznika, a nie nazwa pliku.

tekst linku

Jeśli atrybut Href ustaw adres email ze słowem mailto: przed nim, a następnie po wybraniu takiego linku możesz wysłać wiadomość, gdzie w polu "Do kogo" ten adres zostanie zarejestrowany.

Poniższy przykład przedstawia użycie różnych typów hiperłączy.

Dokument HTML wykorzystujący hiperłącza i kotwice:

Nowe wersje standardowych programów dla systemu operacyjnego Windows i sterowników można znaleźć na stronie internetowej firmy Microsoft.

A teraz możesz przejść do strony głównej serwisu.

Na końcu tej strony dowiesz się, jak się ze mną skontaktować.

w tym dokumencie tekstowym.

[email chroniony]

Oto jak dokument HTML będzie wyglądał po odtworzeniu przez przeglądarkę:

Nowe wersje standardowych programów dla systemu operacyjnego Windows i sterowników można znaleźć na stronie internetowej Microsoft.

Możesz użyć materiałów opublikowanych w tym dokumencie tekstowym.

W tym przykładzie słowo „Microsoft” znajduje się w zewnętrznym znaczniku hiperłącza oraz w tekście „Strona główna serwisu” - w tagu linku wewnętrznego. Tekst „Na końcu tej strony” umieszczony w tagu łącza kotwicy, a „W tym dokumencie tekstowym” - w tagu hiperłącza z atrybutem Href, w którym ustawiamy łącze nie do strony internetowej, ale do dokumentu tekstowego, który jest zapisany w tym samym folderze, co bieżący dokument HTML. Tekst ” [email chroniony] „Znajdują się w tagu opisującym etykietę kotwicy oraz w atrybucie Href adres e-mail jest określony.

Jeśli odwiedzający stronę korzysta z zewnętrznego łącza Microsoft, strona zostanie otwarta pod adresem: http://www.microsoft.com/... Po kliknięciu hiperłącza „Strona główna serwisu” otworzy się strona główna serwisu. Po kliknięciu na link wewnętrzny w dokumencie tekstowym, otworzy się okno z dokumentem tekstowym text.doczawarte w bieżącym folderze. Jeśli użyjesz linku do kotwicy na końcu tej strony, obraz bieżącej strony zostanie przesunięty, tak że tekst etykiety „ [email chroniony] ”, Z którym połączona jest kotwica, zostanie umieszczona w części dokumentu widocznej na ekranie.

Miejsce tekstu ” [email chroniony] „To hiperłącze, za pomocą którego użytkownik będzie mógł wysłać list przy użyciu adresu e-mail skonfigurowanego na komputerze pod wskazanym w atrybucie Href adres - [email chroniony] .

Spójrzmy na inny przykład tworzenia hiperłączy tekstowych. Załóżmy, że w określonym folderze znajdują się dwa dokumenty HTML, które opisują dwa obszary pracy firmy - 1.html i 2.html.

Stwórzmy listę hiperłączy, z których każdy ilustruje jeden z kierunków pracy firmy:

Nasza produkcja

Nasi klienci

Wynik:

Nasza produkcja

Nasi klienci

W tym przykładzie znaczniki hiperłącza są zawarte w znacznikach nagłówków pierwszego poziomu. Teksty hiperłączy zostaną umieszczone w oddzielnych wierszach i stylizowane na nagłówki pierwszego poziomu.

Domyślnie hiperłącza tekstowe są wyświetlane na niebiesko i podkreślone lub ciemnoczerwone, jeśli są używane. Aby zmienić te kolory, dodaj odpowiednie atrybuty w tagu : ... Oznacza to, że po pierwszym załadowaniu strony wszystkie hiperłącza będą fioletowe, a jeśli odwiedzający skorzysta z jednego z nich, ich tekst zmieni kolor na żółty. Jest to wygodne, gdy na stronie znajduje się wiele linków, a odwiedzający chce je przeglądać jeden po drugim: wtedy zastąpienie odwiedzanych hiperłączy innym kolorem pozwala na zorganizowanie takiego przeglądania.

Hiperłącze to główny element hipertekstu, cecha charakterystyczna dokumentów HTML, która łączy ze sobą strony internetowe i inne pliki. Dla wielu ludzi słowo „link” jest kojarzone ze słowem „internet”.

Proste linki

HTML używa tagu do tworzenia linków i jego atrybuty.

Przejdźmy od prostych do złożonych i najpierw nauczmy się, jak dodawać podstawowe linki do dokumentu HTML. Potrzebujemy następujących elementów językowych:

href - atrybut tagu , którego wartością będzie adres linku. Niezależnie od tego, czy łączysz się z witryną, stroną internetową czy plikiem, nie ma znaczenia, różni się tylko wartość tego atrybutu.

Spójrzmy teraz na wiersz kodu HTML:

Spójrzmy teraz na każdy element łańcucha.

to tag odpowiedzialny za tworzenie linku.

- tag zamykający.

Między postaciami > i < tekst Link znajduje się. Zobaczy go użytkownik, który otworzył stronę, kliknie na nią, aby przejść pod wskazany w niej adres.

Na przykład na dole dokumentu HTML chcesz umieścić łącze „W górę”, które będzie prowadziło do jego początku - nagłówka „Góra strony”. Aby to zrobić, musisz umieścić kotwicę na początku strony, a link do niej na dole strony.

Niech zacznie się kotwica. Następnie w tagu do treści, do której będzie prowadzić link, należy dodać atrybut iD ze znaczeniem zaczynać.

Na górze strony

Kotwica jest ustawiona i teraz pozostaje tylko dodać prowadzący do niej link. W naszym przypadku będzie to wyglądać tak:

W górę

Uwaga: przed nazwą kotwicy znajduje się hash - jest to charakterystyczna cecha linków wewnętrznych.

Linki graficzne

Wraz z pojawieniem się tagu HTML 5 zamienił się w kontener, który może zawierać elementy blokowe, dzięki czemu link może być teraz nie tylko tekstem lub obrazkiem, ale nawet tabelą, listą lub całą stroną.

Linki do poczty elektronicznej i Skype

Dla wygody odwiedzających witrynę możesz nie tylko podać swoje dane kontaktowe na stronie, ale także je uaktywnić, aby po kliknięciu przez użytkownika adresu e-mail klient poczty otworzył się natychmiast, a gdy użytkownik kliknie login Skype, program natychmiast poprosi o pozwolenie na połączenie.

Napisz na maila!

Zadzwoń do mnie na Skype