Myślę, że już rozumiesz, o czym będzie mowa w tym rozdziale.. i wiesz, co to jest link, jeśli nie, to kliknij tutaj.. Istnieje kilka rodzajów linków, a także „mechanizmów” ich podążania. W tym rozdziale postaram się szczegółowo opowiedzieć o tym, jak rejestrować linki, a także poświęcić zawiłości pracy z nimi.

Dygresja liryczna:
W wojsku podszedł do mnie szef sztabu i wydał rozkaz, cytuję:
Przynieś mi ten dokument, chociaż nie wiem gdzie i co to jest!! Co stoisz? Biegnijmy!! Jestem spóźniony!!!

Dlaczego więc tak, aby przeglądarka, tak jak ja wtedy, nie popadła w osłupienie, musi wiedzieć: dokładną nazwę dokumentu, ścieżkę do dokumentu i miejsce, do którego go przynieść, a raczej gdzie go otworzyć.

Na ten moment za pomocą notatnika stworzyliśmy tylko jeden dokument HTML, mam go o nazwie index.html (dlaczego wybrałem tak dziwną nazwę index.html i dlaczego muszę to zobaczyć) nie wiem z czym , nazwę wymyśliłeś sam, ale myślę, że pamiętasz i wiesz, gdzie to leży, chyba że jesteś moim szefem sztabu :) W tym dokumencie postaramy się stworzyć link do innego dokumentu, którego nie robimy już.. Więc zanim podlinkujesz, musisz to stworzyć, dziękuję, że już to wiesz.

1. Otwórz notatnik.
2. Piszemy kod w html. Na przykład strona z wieloma zdjęciami.
3. Zapisujemy go jako stronę html w tym samym folder roboczy, gdzie jest już pierwszy utworzony przez nas dokument. Załóżmy, żeby się nie pomylić nazwijmy to primer.html, a może też zmieńmy nazwę pierwszego na index.html

Teraz wiem, że masz dwa dokument html oraz index.html i primer.html a teraz masz minimalny zestaw do dalszej nauki.

Linki tekstowe.

Zapoznaj się z tagiem (od kotwicy - kotwica), możesz dołączyć do niego tekst lub obraz, który stanie się linkiem do niektórych dokumentów. Atrybut tagu href określa nazwę i ścieżkę do dokumentu, na który wskazuje łącze.

Wszystko razem jest napisane tak:

Oto moje zdjęcia!!

Jak zapewne zrozumiałeś primer.html to nazwa naszego drugiego dokumentu html oraz napis "Oto moje zdjęcia!!" to jest fragment tekstu z pliku index.html.

Analogicznie do tagu zdjęcia ścieżka łącza do otwieranego dokumentu jest zapisywana w ten sam sposób:

Oto moje zdjęcia!!- Ten wpis sugeruje, że w katalogu, w którym znajduje się nasz pierwszy dokument html, znajduje się folder stranica, w którym znajduje się plik primer.html
Oto moje zdjęcia!!- A to oznacza, że ​​plik primer.html jest umieszczony o jeden poziom wyżej od dokumentu
Oto moje zdjęcia!!- dokument znajduje się na stronie internetowej www.site.ru..

Cóż, spróbujmy? Poniżej znajduje się przykład dwóch dokumentów naraz, w których zarejestrowane są linki wskazujące na siebie.

plik index.html:

Powiedz mi, drogie dziecko: w którym uchu brzęczy?


W prawo lub lewy?

plik podkład.html:

Ale nie zgadłem! Mam brzęczenie w obu uszach.

Cóż, ja tak nie gram...

Przykład pokazuje, że linki są podświetlone w kolorze, domyślnie niebieski to link, a czerwony to już odwiedzony link, te kolory można zmienić za pomocą znanego nam już tagu otwierającego < body > i jego atrybuty.

połączyć- kolor linku.
powiązać- kolor klikniętego, aktywnego linku.
vlink- kolor odwiedzanego linku.

Jest napisane tak:

>

Kontynuując rozmowę o kolorze linku tekstowego, warto wspomnieć, że w razie potrzeby można wymusić wyróżnienie kolorem zarówno całego linku, jak i jego poszczególnych części (fraz, słów, liter) znanym tagiem i jego atrybut kolor. Dotyczy to jednak nie tylko koloru, ale również osobno można ustawić rozmiar, styl i czcionkę tekstu. Pamiętaj jednak, że manipulacja kolorami musi odbywać się wewnątrz tagu tutaj a nie za burtą, w przeciwnym razie kolor linku będzie domyślnie lub taki, jak napisano w tagu

plik index.html:

link="#008000" alink="#ff0000" vlink="#ffff00">

Poszukaj frazy, która pomoże Ci zapamiętać miejsca kolorów tęczy.

R
ALE
D
Na
G
ALE




plik podkład.html:

link="#008000" alink="#ff0000" vlink="#ffff00">

Każdy
Łowca
życzenia
wiedzieć
gdzie
siedzi
bażant



Wróć do strony głównej

Jedna z Twoich stron w witrynie koniecznie powinno się nazywać index.html Jest to plik o tej nazwie w Twojej witrynie, którego program robota będzie szukał, gdy osoba wprowadzi nazwę Twojej witryny. Od strony index.html otworzy się jako pierwszy, uczyń go głównym. Możesz nazwać resztę stron, jak chcesz ... nie ma już niuansów z nazwami.

O sprawie.. Pisząc ścieżkę i nazwy dokumentów pamiętaj, że np.: Strona.html, strona.html i STRONA.html są nazwami różne dokumenty! To samo dotyczy nazw zakładek i rysunków. Zawsze zwracaj uwagę na wielkość liter podczas pisania kodu, istnieje duża szansa, że ​​takie nazwy nie zostaną rozpoznane przez konkretną przeglądarkę. Zasadą jest pisanie wszystkiego i wywoływanie nazwisk małymi łacińskimi literami, wtedy ryzyko czynnika ludzkiego i kaprysów programów zostanie zredukowane do zera.

Zasada trzech kliknięć.

Postaraj się utworzyć „drzewo linków” w taki sposób, aby odwiedzający witrynę mógł dostać się z dowolnej jej strony do dowolnego miejsca w witrynie za minimalną liczbę kliknięć w linki. Więcej niż trzy przejścia do właściwe miejsce to już nie jest dobre na stronie.. Niekończące się ładowanie stron, których dana osoba nie potrzebuje, może prowadzić do załamania nerwowego i przedwczesnego zamknięcia strony. Oszczędzaj czas, pieniądze i nerwy.

Główną cechą dokumentu HTML jest to, że zawiera hiperłącza(lub po prostu linki) do innych dokumentów, witryn, plików, obrazów itp. To właśnie możliwość wstawiania linków do stron do obiektów znajdujących się poza nią sprawiła, że ​​Internet jest tak popularny i wygodny w użyciu. Dlatego tworząc swoją stronę zawsze pamiętaj o „magii” linków.

W tej lekcji porozmawiamy o jak stworzyć link do witryny, do jej oddzielnej strony lub pliku. Dowiesz się, jak zmienić tekst linku, jak otworzyć go w nowym oknie, jak zrobić link jako obrazek, co to są linki zewnętrzne i wewnętrzne i wiele więcej. Dodatkowo masz już informacje o pracy z linkami, o których mówiliśmy w poprzednich lekcjach (na przykład rozmawialiśmy o tym, jak zmienić kolor linku w ).

Ogólnie rzecz biorąc, ta lekcja sprawi, że Twój pomysł na budowanie linków będzie kompletny i wystarczający. Zrozumiesz, jak utworzyć hiperłącze w HTML i dlaczego. I naucz się zarządzać jego właściwościami.

Semestry

§ 1. Link do pliku, link do strony, link do strony

Liczne pytania o różnicę między linkiem do pliku a linkiem do witryny lub jej indywidualnej strony zmusiły mnie do odpowiedzi na to pytanie już na samym początku tej lekcji. Odpowiedź brzmi: nic. Wszystkie wymienione linki są zewnętrzne dla oryginał strony i są tworzone w ten sam sposób.

Aby nie rozprzestrzeniać myśli po drzewie, pokażę wszystko na przykładzie.

W przeglądarce zobaczymy to:

W przeglądarce zobaczymy to:

Jak widać, wszystkie rodzaje linków tworzone są dokładnie w ten sam sposób. Jedyna różnica to adres zamieszkania obiekt, do którego ma się odnosić. Przejdźmy teraz do głównej części lekcji.

§ 2. Tworzenie linków zewnętrznych

Linki różnią się między sobą zewnętrzny oraz wewnętrzny, jak również na tekst oraz graficzny. Linki zewnętrzne prowadzą poza "ograniczenia" strony html, linki wewnętrzne do różnych części ten sam stron. Linki tekstowe to tekst (domyślnie jest podświetlony na niebiesko i podkreślony), a linki graficzne jako obiekt, na który trzeba kliknąć, aby przejść, zawierają jakiś obraz. Wszystkie te typy linków są tworzone w HTML za pomocą tagu (skrót od angielskiego anchor - anchor). Rozważmy to bardziej szczegółowo.

Aby utworzyć link zewnętrzny do witryny, strony lub pliku, używany jest atrybut tag - href. Ten atrybut przyjmuje jako swoją wartość URL witryna, strona lub plik (rozmawialiśmy o tym powyżej). Pomiędzy tagami i znajduje się widoczna część linku (link anchor), czyli to, co widzimy na ekranie przeglądarki. Kotwica linku może być zwykłym tekstem (link tekstowy) lub obrazem graficznym (link do obrazu). Łącze do obrazu jest tworzone przez wstawienie znanego tagu między tagami i . Ogólnie składnia tworzenia linku wygląda tak:

Na przykład, aby utworzyć łącze tekstowe do strona główna tej stronie, musisz napisać następujący kod HTML:

http://www.seoded.ru/"> Strona główna witryny

W przeglądarce będzie to wyglądać tak:

Jak pisałem na samym początku tego samouczka, kolor tekstu linku (kotwicy) można zmienić za pomocą . Ogólnie rzecz biorąc, możesz zastosować to samo do tekstu linków, co do głównego tekstu strony, tj. Pogrubienie, kursywa, użyj nagłówków itp.

§ 2.1 Linki graficzne (linki obrazkowe)

Jak powiedziałem powyżej, aby utworzyć link do obrazu, musisz użyć . Przykład takiego linku wygląda tak:

A przeglądarka pokaże:

Domyślnie przeglądarka otacza obraz w łączu do obrazu ramką. Jeśli nie jest to pożądane, atrybut granica etykietka obrazek powinien być ustawiony na 0:

border="0">

Strona główna

§ 3. Linki wewnętrzne

Do wygodnej nawigacji po stronach z dużą ilością treści wykorzystywane są linki wewnętrzne. To z ich pomocą stworzyłem Treść Lekcji (patrz na początku tej strony). Linki wewnętrzne tworzy się w taki sam sposób jak linki zewnętrzne. Tylko w wartości atrybutu href wskazana jest „kotwica” linku. Kotwica jest tworzona przez atrybut Nazwa:

name="nazwa kotwicy">tekst

A nazwa „kotwicy” jest ustalana arbitralnie. Tutaj warto powiedzieć, że nie wszystkie przeglądarki rozumieją rosyjskie nazwy „kotwicy”, dlatego polecam używanie alfabetu łacińskiego. Tekst pomiędzy tagami, aby utworzyć „kotwicę” jest opcjonalny i najczęściej nie jest określony.

„Jestem odrą” znajduje się w tych miejscach na stronie, do których użytkownik powinien przejść po kliknięciu w link.

Jak powiedziałem powyżej, w atrybucie href link wewnętrzny zamiast adresu, nazwa żądanej „kotwicy” jest wskazana z obowiązkowym symbolem hash ( # ) przed nim. Weźmy przykład.

Stworzyłem „kotwicę” o nazwie nagłówek i umieścił go w kodzie strony obok tytułu tej lekcji („Hiperłącza w HTML”). Kod „kotwicy” jest następujący:

name="tytuł">

href="#zagolovok">Przejdź do tytułu

A w przeglądarce tak:

Jeśli zauważysz, że po kliknięciu w wewnętrzny link do tytułu zmienił się URL w pasek adresu przeglądarka:

Na oryginalny adres:

http://www.html

http://www..html#header

Korzystając z tej funkcji, możesz utworzyć link do określonego miejsca na stronie z dowolnego zasobu w Internecie! Oznacza to, że załóżmy, że utworzyłeś stronę z obszernym artykułem o czymś (lub umieściłeś go na stronie duża liczba zdjęcia) i oznaczyliśmy go wewnętrznymi linkami. Będąc w , trzeba było odnieść się nie tylko do strony z artykułem (lub zdjęciami), ale do określonego miejsca na nim (lub konkretnego zdjęcia). Korzystając z opcji z linkiem wewnętrznym w adresie, możesz łatwo osiągnąć to, czego potrzebujesz.

§ 4. Odniesienia bezwzględne i względne

Strona główna

Ale z linkami względnymi jest to trochę bardziej skomplikowane. W takich linkach wskazany jest również adres stosunkowo folder główny witryny (ten, w którym znajduje się strona główna) lub względem oryginalnej strony. Takie linki są potrzebne np. jeśli strona znajduje się na komputer domowy. Albo nie jest to strona internetowa, ale wskaźnik strony do innych dokumentów.

Powiedzmy, że potrzebujemy linku do strony klient.html, który kłamie w jednym folderze ze stroną główną serwisu. Wtedy względny kod linku będzie wyglądał tak:

/clienty.html">Klienci

Załóżmy teraz, że w tym samym folderze co strona główna znajduje się kolejność folderów i już w tym leży strona klienty.html, wtedy względny kod linku będzie wyglądał następująco:

/zakazy/clienty.html">Klienci

Teraz spójrzmy na tworzenie hiperłączy w stosunku do oryginalnej strony. Powiedzmy, że mamy stronę cena.html(strona źródłowa) i z niej musisz linkować do strony klient.html Oto następujące typowe opcje:

1. Strony price.html i clienty.html są w jednym folderze.

clientty.html">Klienci




2. w głównym folderze witryny, cena strony.html znajduje się w folderze zamówień jeden poziom wyżej).

Kod będzie wyglądał tak:

../clienty.html">Klienci

Dwie kropki wskazują, że musisz wyjść z bieżącego folderu na wyższy poziom.




3. Strona klienty.html i folder zakazy w głównym folderze witryny, folder mebli znajduje się w folderze zamówień, cena strony.html jest w folderze mebel(czyli strona klienty.html w stosunku do oryginalnej strony cena.html leży dwa poziomy w górę).

../../clienty.html">Klienci

Oznacza to, że każdy poziom jest oznaczony dwiema kropkami i ukośnikiem " / ».




4. w głównym folderze witryny, strona clienty.html znajduje się w folderze zamówień(czyli teraz strona klienty.html jest w stosunku do oryginalnej strony cena.html) jeden poziom niżej).

zakazy/clienty.html">Klienci

W tym przypadku kropki i ukośniki nie są umieszczane.




5. Strona cena.html (strona oryginalna) i folder zakazy są w głównym folderze witryny, folder mebli znajduje się w folderze zamówień, strona clienty.html jest w folderze mebel(czyli teraz strona klienty.html jest w stosunku do oryginalnej strony cena.html) leży dwa poziomy poniżej).

zakazy/meble/klient.html">Klienci




6. W folderze głównym witryny są dwa foldery: zakazy i oplata. strona clienty.html znajduje się w folderze zamówień, oryginalna strona price.html leży w folderze oplata(tj. obie strony leżą w różne foldery jeden poziom niżej z folderu głównego witryny).

../zakazy/clienty.html">Klienci

§ 5. Link do e-maila

Do utwórz link e-mail, potrzebujesz zamiast adresu URL w wartości atrybutu href wpisz adres e-mail z protokołem ( poczta:). A potem, gdy klikniesz na taki link, otworzy się okno program pocztowy z adresem e-mail wpisanym w polu „Do”. W kodzie HTML wygląda to tak:

poczta: [e-mail chroniony]">Moja poczta

I tak jest w przeglądarce.

Witajcie drodzy czytelnicy serwisu blogowego. Dzisiaj porozmawiamy jak tworzyć hiperłącza w html, dowiedz się, jak używać tagu „A” oraz jego atrybutów href i target, dowiedz się, jak utworzyć link do obrazu.

Hiperłącza to kluczowe elementy strony internetowej. Łączą ze sobą różne strony html w kompletną witrynę. Zazwyczaj linki są wyświetlane jako podkreślony fragment tekstu, po najechaniu na niego kursor myszy staje się palcem wskazującym.

Ponadto może wyglądać hiperłącze obraz graficzny lub jego fragment. Po kliknięciu łącza przeglądarka ładuje stronę internetową określoną w atrybutach łącza. Hiperłącza umożliwiają tworzenie łączy do wewnętrznych stron witryny, a także do wszelkich innych zasobów w Internecie.

Utwórz hiperłącza tekstowe

Zacznijmy prosto i spójrzmy na tworzenie regularnych tekst spinki do mankietów. Aby utworzyć hiperlink tekstowy, wystarczy dołączyć dowolny fragment tekstu, który powinien stać się linkiem w sparuj tag A. I w atrybut href Dla tego tagu musisz podać adres docelowej strony internetowej w Internecie:

Ten fragment kodu HTML tworzy akapit zawierający łącze. Łącze wskazuje na stronę internetową page15.html, która znajduje się w folderze katalogu przechowywanym w folderze głównym witryny www.site.ru.

Jeśli strona nie używa style css i nie są stosowane żadne dodatkowe atrybuty, hiperłącza na stronie są domyślnie wyświetlane w następujący sposób:

• zwykłe linki są wyświetlane na niebiesko;
• odwiedzone linki są podświetlone na fioletowo;
• aktywne hiperłącze (które jest aktualnie kliknięte) jest wyświetlane na czerwono, ale ponieważ czas między kliknięciem w łącze a rozpoczęciem ładowania nowego dokumentu jest dość krótki, ten stan łącza jest bardzo krótkotrwały;
• Tekst linku jest podkreślony.

Adresy internetowe

Pełny adres zawiera adres internetowy serwera WWW oraz ścieżkę do pliku, który ma zostać pobrany. Na przykład:

Tutaj www.site.ru to adres serwera WWW, a /catalog/page15.html to ścieżka do pliku na tym serwerze. Na ogół pełne adresy internetowe są zwykle używane tylko wtedy, gdy konieczne jest utworzenie hiperłącza wskazującego na niektóre zasoby znajdujące się na innej stronie internetowej.

Tworząc hiperłącza wskazujące na pliki, które są częścią tej samej witryny, co bieżąca strona internetowa, najlepiej używać skróconych adresów internetowych. Skrócony adres zawiera tylko ścieżkę do pliku na serwerze, ponieważ Adres serwera WWW jest już znany przeglądarce.

Skrócone adresy internetowe to absolutny oraz względny. Adres bezwzględny określa ścieżkę do pliku docelowego względem folderu głównego witryny. Taki adres zaczyna się od znaku / (ukośnik), który oznacza folder główny. Na przykład adres „/page15.html” wskazuje na plik page15.html, który jest przechowywany w folderze głównym witryny. Lub adres "/catalog/page.html" wskazuje na plik page.html, który jest umieszczony w folderze katalogu, zagnieżdżonym w folderze głównym witryny.

Adres względny to ścieżka pliku w stosunku do pliku bieżącej strony internetowej. Adresy względne nie zawierają wiodącego ukośnika. Spójrzmy na kilka przykładów.

Na przykład adres „page.html” wskazuje na plik, który znajduje się w tym samym folderze, co plik bieżącej strony internetowej. A adres „catalog/page.html” otworzy plik page.html zapisany w folderze katalogu, zagnieżdżonym w folderze, w którym przechowywana jest bieżąca strona.

Używając dwóch kropek na początku adresu, możesz określić foldery z poprzedniego poziomu zagnieżdżenia. Na przykład adres „.../page.html” wskazuje na page.html, przechowywany w folderze, w którym zagnieżdżony jest folder z bieżącą stroną internetową.

Link do poczty

Używając język html możesz stworzyć hiperłącza do poczty, kliknięcie na które uruchamia program klient poczty. Podczas określania adresu w atrybucie href umieścić przed e-mailem "prześlij do:", tj. coś takiego: href="mailto: [e-mail chroniony]". Ponadto po dwukropku nie powinno być spacji przed adresem pocztowym.

Jak zrobić z obrazu link

Ponieważ jest to wbudowany element strony html, po prostu wstawiamy ten tag wewnątrz znacznika „A” zamiast tekstu:

Oprócz prosta opcja tworząc obraz hiperłącza, html pozwala zamienić część obrazu graficznego w hiperłącze. Ponadto istnieje możliwość podzielenia obrazu na części, z których każda będzie hiperłączem wskazującym na jego adres internetowy. Ta opcja nazywa się mapa obrazu.

Obecnie mapa obrazów jest rzadko używana, ponieważ wymaga bardzo dużej liczby tagów, a kod html staje się nieporęczny i zagmatwany.

Mapa obrazu jest tworzona w trzech etapach:

Pełny kod html tworzący mapę obrazu wygląda tak:

Tutaj utworzyliśmy jeden prostokątny obszar wskazujący na główną stronę witryny webcodius, jeden okrągły obszar wskazujący stronę ze wszystkimi artykułami w tej samej witrynie oraz jeden wielokątny obszar bez linku.

Kotwice

Kotwica lub etykieta- jest to rodzaj hiperłącza, który oznacza osobny fragment strony html i umożliwia poruszanie się po treści dokumentu.

Być może widzieliście już strony, na których zaraz po nagłówku znajdowała się lista tytułów rozdziałów artykułu, kliknięcie na której przerzuciło Was do interesującego fragmentu wpisu.

Kotwice są tworzone, podobnie jak zwykłe hiperłącza, za pomocą sparowany tag A, tylko zamiast atrybutu href umieszcza się w nim atrybut name lub id, którego wartość określa unikalny identyfikator etykiety. W takim przypadku sam tag „A” zwykle nie zawiera żadnej treści:

Istnieje drugi sposób tworzenia kotwicy, który nie wymaga tworzenia pustych elementów „A”. Możesz też użyć elementów, które już znajdują się na stronie internetowej, takich jak . Aby to zrobić, dodaj uniwersalny atrybut id do wymaganego elementu:

Witam, drodzy czytelnicy bloga! Jak wiadomo, za udaną promocję strony i zwiększenie jej pozycji w wynikach wyniki wyszukiwania, konieczne jest przeprowadzenie wysokiej jakości optymalizacji SEO witryny. Pojęcie „”, które z kolei dzieli się na wewnętrzne i zewnętrzne, jest nierozerwalnie związane z takimi pojęciami jak „wewnętrzne i zewnętrzne linki do stron”. Dlatego bardzo ważna jest dla nas wiedza, ile linków powinno znajdować się na stronie, jak sprawdzić ich liczbę, jak usunąć niepotrzebne linki ze strony i zamknąć je z indeksowania, jak zwiększyć masę linków itp. Aby odpowiedzieć na wszystkie te i inne pytania dotyczące wewnętrznych i Zewnętrzne linki, najpierw zrozummy, czym jest link (lub hiperłącze) w HTML.

W tym artykule wyjaśnię, co to jest link, jak zrobić hiperłącze w HTML na stronie internetowej, jak otworzyć link w nowym oknie, jak utworzyć link do adresu e-mail (e-mail) i jak aby link był obrazem. Zajmiemy się również takimi pojęciami jak tagi html i atrybuty hiperłączy, kotwica linku, kotwica html (kotwica) i linki haszujące. Więc zacznijmy.

Co to jest link (hiperłącze).

Jeżeli hiperłącze prowadzi do strony internetowej lub pliku, który nie istnieje (usunięty, przeniesiony) lub jego adres jest niepoprawny, to takie łącze nazywamy uszkodzonym. W witrynie nie powinno być uszkodzonych linków, ponieważ wprowadzają one odwiedzających w błąd, a po kliknięciu takiego linku jest mało prawdopodobne, aby osoba wróciła do Twojej witryny. O tym, dlaczego pojawiają się uszkodzone linki, jak je znaleźć i naprawić, omówimy bardziej szczegółowo w osobnym artykule. A teraz kontynuujmy.

Jak zrobić link (hiperłącze) w HTML na stronie internetowej.

Tworzenie linków do innej strony w Twojej witrynie lub innej witrynie jest bardzo łatwe. Aby utworzyć hiperłącze, musisz poinformować przeglądarkę, czym jest łącze i wskazać adres dokumentu, do którego będzie prowadzić. Odbywa się to za pomocą tagu HTML. oraz wymagany atrybut href:

Tutaj URL to adres dokumentu, do którego należy przejść. Oraz tekst hiperłącza znajdującego się między tagami oraz, nazywana jest kotwicą łącza i jest widoczna dla osoby odwiedzającej stronę internetową. Oprócz tego, że tekst linku (kotwica) informuje czytelnika, gdzie nastąpi przejście, jest to również bardzo ważne w optymalizacji pod kątem wyszukiwarek (SEO), ponieważ jest to jeden z determinujących czynników wpływających na ranking Twojej witryny przez słowa kluczowe zawarte w tej kotwicy. Zazwyczaj ten rodzaj rankingu nazywa się referencyjnym.

Link bezwzględny

Służą do wskazywania dokumentu na innej stronie (link zewnętrzny).

Dozwolone jest tworzenie linków bezwzględnych w obrębie tej samej witryny, jednak bardziej poprawne jest użycie adresów względnych do tworzenia linków wewnętrznych, które wyglądają na krótsze. Jednak analizując różne strony zauważyłem, że zdecydowana większość webmasterów tworzy linki wewnętrzne z adresami bezwzględnymi. Tutaj jest plus, ponieważ jeśli Twoja strona zostanie skopiowana, to w ten sposób odzyskasz działające linki zewnętrzne.

Jak widać, z linki bezwzględne wszystko jest proste. Trudniej jest z względnymi, ponieważ podczas ich tworzenia musisz zrozumieć, jaką wartość atrybutu href musisz określić, ponieważ zależy to od oryginalnej lokalizacji dokumentów. Jak powiedziałem, nikt tak naprawdę nie przejmuje się tym i sprawia, że ​​wszystkie linki na stronie są absolutne. Jeśli jednak chcesz dowiedzieć się więcej o tym, jak poprawnie tworzyć względne linki do witryny, mogę polecić artykuł Dmitrija, autora bloga ktonanovenkogo.ru. Nie widziałem jeszcze bardziej szczegółowego i zrozumiałego wyjaśnienia.

Na przykład pokażę, jak będzie wyglądał link prowadzący do pliku względem katalogu głównego witryny (wystarczy odciąć wszystko na lewo od trzeciego ukośnika w podobnym linku bezwzględnym):

Link względny

Do głównej

Tekst linku (kotwica)

Kolory i wygląd wyskakującego tekstu zależą tylko od ustawień system operacyjny i przeglądarka.

Jak otworzyć link w nowym oknie.

Domyślnie po kliknięciu łącza nowy dokument zostanie otwarty w bieżącym oknie. Jednak podczas osobistego przeglądania stron nie jest to dla mnie wygodne. Podczas czytania artykułu i podążania za linkiem wygodnie jest mi, aby strona otwierała się w nowym oknie i w każdej chwili mogę kontynuować czytanie poprzedniego artykułu. Innym powodem otwarcia linku w nowym oknie jest to, że kiedy wchodzisz na czyjąś witrynę, istnieje duże prawdopodobieństwo, że czytelnik nie wróci. Zwłaszcza jeśli robi kilka przejść i zwyczajnie nie pamięta, gdzie był kilka minut temu.

Atrybut tagu docelowego pomoże nam otworzyć link w nowym oknie. . Domyślnie jest to _self , które zwykle nie jest zapisywane. Aby otworzyć dokument w nowym oknie, zmień wartość atrybutu target na _blank :

1	<a href = "http://site" target = "_blank" > Nowe okno</a>

Nowe okno

Co zrobić, jeśli odwiedzasz czyjąś witrynę, gdzie linki otwierają się w bieżącym oknie, chcesz otworzyć je w nowej? Wystarczy kliknąć je nie przyciskiem, ale kółkiem myszy. W tym przypadku Nowa strona otworzy się w nowym oknie.

Jak zrobić link do e-maila (adres e-mail).

Kliknięcie tego linku otworzy program do pracy z e-mail, instalowany domyślnie przez Ciebie, gdzie pole „Do” będzie już wypełnione. Aby automatycznie wypełnić temat listu, należy wykonać link na adres e-mail o następującym formularzu:

Zamiast słów „temat listu” musisz napisać żądany temat i oczywiście literami łacińskimi. Robimy to, ponieważ wiele przeglądarek i programów pocztowych nie działa dobrze z cyrylicą i istnieje szansa na zobaczenie wszelkiego rodzaju bełkotu w wierszu tematu. Korzystając z tej nietrudnej rady, będziesz mógł stworzyć link do e-maila bez obaw o niepotrzebne niespodzianki.

Jak zrobić link do obrazu.

Tutaj atrybut title jest podpowiedzią, a tekst zapisany w atrybucie alt (alternatywnym źródle informacji) pojawi się na stronie, jeśli obrazy są wyłączone w przeglądarce. Jeśli atrybut tytułu służy przede wszystkim wygodzie czytelników, wyszukiwarki starają się zrozumieć, co pokazuje na obrazku atrybut alt. Zaleca się wpisywanie w te tagi słów kluczowych, co będzie miało duże znaczenie w optymalizacji pod kątem wyszukiwarek. W końcu nikt nie odwołał poszukiwań za pomocą zdjęć.

Jak zrobić hiperłącze (kotwicę html) na jednej stronie html.

Powyżej rozważaliśmy już, jak utworzyć link do strony internetowej, niezależnie od tego, czy jest to strona wewnętrzna, czy zewnętrzna. Ale czasami trzeba tworzyć hiperłącza na tej samej stronie internetowej. Po co? Ano na przykład po to, aby czytając bardzo długi tekst, mieliśmy możliwość szybkiego przeskoczenia do dowolnej jego części. Lub przyda się, gdy na początku artykułu opublikujesz punkt po punkcie jego treść. Następnie, klikając żądany element, natychmiast przejdziesz do interesującego Cię materiału. Takie przejścia są wykonywane za pomocą zakładek preinstalowanych w treści artykułu, zwanych kotwicami html (nie mylić z kotwicą tekstu) oraz specjalnych linków haszujących.

Aby utworzyć kotwicę, najpierw utwórz zakładkę z dowolną nazwą (używane są tylko łacińskie litery, cyfry, łączniki i podkreślenia) określoną za pomocą atrybutu name znacznika :

W górę

1	<a href = "javascript:scroll(0,0);" > "aligncenter size-full wp-image-1393" title = "(!LANG:Górny przycisk" src = !} „http://website/wp-content/uploads/2011/12/Top.jpg” alt= „Góra_Góra przycisku” szerokość = "100" wysokość = "100" />

Dmitry KtoNaNovenkogo radzi inny sposób ustawiania zakładek w tekście strony internetowej, bez używania kotwic HTML. W tym celu tworzymy zakładkę z dowolnego tagu HTML dostępnego na stronie, przypisując mu uniwersalny atrybut id. Na przykład tworzymy zakładkę z tagu nagłówka h3:

Tekst tytułu

Ważne jest, aby w atrybucie id wpisać literę łacińską jako pierwszy znak nazwy kotwicy, wtedy możesz użyć dowolnych innych dozwolonych znaków.

Wróćmy na przykład do nagłówka „ ”, a następnie kontynuujmy.

Możesz użyć łączy haszujących, aby przejść we właściwe miejsce nie tylko w obrębie jednej strony, ale także przejść do innej strony witryny. Aby to zrobić, ustawiamy kotwicę html w odpowiednim miejscu na właściwej stronie, a w samym łączu hash, przed symbolem hash, wpisujemy adres tej strony. Na przykład:

Połącz tekst z kotwicą zakładki HTML

Rodzaje i kolory hiperłączy w HTML.

• Nieodwiedzony link jest niebieski i podkreślony.
• Aktywny link — zmienia kolor na czerwony w czasie między kliknięciem linku a rozpoczęciem ładowania nowej strony. Oczywiście nie była w tym stanie długo.
• Odwiedzony link - po kliknięciu zmienia kolor na fioletowy.

Możesz zmienić kolor hiperłączy w dokumencie html za pomocą tagu oraz następujące atrybuty:

• Link - kolor nieodwiedzonych linków.
• Alink - kolor aktywnego linku.
• Vlink to kolor odwiedzanych linków.

Wszystkie powyższe atrybuty można łączyć:

1	<body link = "#1122cc" vlink = "#6611cc" alink = "#d14836">

Mam nadzieję, że teraz jest jasne, jak utworzyć hiperłącze na stronie HTML i w e-mailu, jak zrobić link do zdjęcia, co to są kotwice tekstowe, skróty i kotwice html, co to są znaczniki html i atrybuty linków. Starałem się jak najlepiej opisać szczegółowo, jakie linki są w HTML i czym one są. Przypomnę, że wstawianie hiperłączy do tekstu odbywa się tylko w trybie HTML.

Nigdy nie musiałem pisać tak długich artykułów, ponad 10 000 znaków. Ale ten temat linków nie jest wyczerpany, do kontynuacji.

Jeśli ten artykuł był dla Ciebie przydatny, kliknij poniższe przyciski sieci społecznościowych. Do zobaczenia na stronach!

Główną cechą wyróżniającą dokumenty HTML jest tworzenie specjalnych aktywnych linków do innych dokumentów, które nazywane są hiperłączami.

Po najechaniu na nie kursorem przybiera postać dłoni, a po kliknięciu w oknie przeglądarki otwiera się inna strona internetowa lub określony dokument. Hiperłącza mogą być tekstem lub obrazem.

Będzie działać, jeśli dokument docelowy znajduje się w tym samym katalogu, co bieżący. Możesz także określić ścieżkę do pliku względem katalogu głównego witryny, używając znaku „/”.

Na przykład:

Nazwa strony

Na przykład:

Nazwa strony

Tworzenie hiperłączy w HTML to prosty proces. Domyślnie są podkreślone i podświetlone na niebiesko, a odwiedzone na fioletowo.

• link - kolor linków do stron internetowych;
• vlink - kolor hiperłączy odwiedzanych stron internetowych;
• alink to kolor aktywnych linków na stronie internetowej.

Na przykład:

Określone atrybuty określają kolory łączy całego dokumentu HTML. Jeśli wkleisz ten kod w tagu , nie musisz za każdym razem ustawiać koloru czcionki.

Podstawowe atrybuty hiperłączy

1. tytuł — umożliwia utworzenie tekstu podpowiedzi, który pojawia się po najechaniu kursorem myszy na hiperłącze.

Na przykład:

Nazwa łącza

2. cel - informuje przeglądarkę, w którym oknie ma otworzyć łącze.

Może przyjmować następujące wartości:

• _blank - link musi być otwarty w nowej zakładce;
• _self — hiperłącze HTML musi być otwarte w bieżącej karcie. Domyślna wartość;
• _parent - przeglądarka powinna załadować link w oknie nadrzędnym;
• _top - hiperłącze jest ładowane na całej przestrzeni okna przeglądarki (w tym przypadku znika ramka).

Na przykład:

Nazwa łącza

Tak więc odpowiedź na pytanie często zadawane przez początkujących webmasterów ” jak wstawić hiperłącze w html" Odebrane.

Życzymy sukcesów w nauce programowania internetowego!