Linki i obrazy to dwa z najczęstszych zasobów, które dodajesz do swoich stron internetowych, więc wiedza o tym, jak prawidłowo je adresować, jest kluczowa.
Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.
Każda witryna internetowa musi odwoływać się do określonych zasobów, niezależnie od tego, czy są to obrazy, pliki, czy inne strony internetowe. Decydowanie o tym, jak połączyć się z innymi plikami, jest niezwykle ważne, aby przeglądarki mogły je poprawnie zlokalizować.
Możesz połączyć się z zasobami, używając względnego lub bezwzględnego adresu URL. Dotyczy to zarówno plików lokalnych na komputerze, jak i adresów URL opartych na protokole, do których uzyskuje się dostęp przez Internet.
Jak korzystać z bezwzględnej ścieżki adresu URL
Bezwzględny adres URL zawiera całą ścieżkę do określonej lokalizacji pliku. Przykłady obejmują pełną ścieżkę do plików na komputerze:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Inny przykład zawiera pełny adres URL protokołu, którego można użyć do zidentyfikowania zasobu do wysłania przez Internet. Najczęściej zaczynają się one od „https” lub „http”:
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Bezwzględny adres URL zawiera wszystkie informacje wymagane do zlokalizowania pliku lub zasobu, do którego próbujesz uzyskać dostęp. Jest to wymagane, jeśli łączysz się z witryną zewnętrzną.
- Zbuduj prostą stronę internetową w HTML tworząc nowy folder i dodając dwa nowe pliki o nazwie indeks.html I style.css.
- W indeks.html, dodaj kod HTML, aby utworzyć podstawową stronę internetową:
<!DOCTYPE html>
<język html="en">
<głowa>
<tytuł> Moja strona internetowa </title>
<zestaw znaków meta="UTF-8">
<metanazwa="rzutnia" zawartość="szerokość = szerokość urządzenia, skala początkowa = 1">
<link rel="arkusz stylów" href="style.css" />
</head>
<ciało>
<klasa div="pojemnik">
<h1> Moja strona internetowa </h1>
<P> Witam na mojej stronie internetowej. </P>
</div>
</body>
</html> - W style.css, dodaj stylizację do strony internetowej.
ciało {
rodzina czcionek: Arial, Helvetica, bezszeryfowa;
}.pojemnik {
wyświetlacz: elastyczny;
kierunek zginania: kolumna;
elementy wyrównania: środek;
}.mb28 {
margines dolny: 28px;
} - W indeks.html, dodaj an tag wewnątrz elementu div kontenera i dodaj bezwzględny adres URL do głównej witryny Google ( https://www.google.com).
<href="https://www.google.com" klasa="mb28">Google.pl</A> - Możesz także uzyskać dostęp do obrazów online, korzystając z pełnej bezwzględnej ścieżki do zapisanego pliku. Możesz także podjąć dodatkowe kroki, aby upewnić się, że dodałeś responsywne obrazy do kodu HTML Strona internetowa.
<źródło img="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&dopasowanie = przycięcie&w=3870&q=80" alt="Ładne zdjęcie ptaka" klasa="mb28" szerokość="900" wysokość="600"> - Kliknij na indeks.html plik, aby otworzyć go w przeglądarce i wyświetlić obraz pobrany z jego zewnętrznej lokalizacji.
- W folderze głównym swojej witryny utwórz nowy folder do przechowywania obrazów o nazwie Obrazy. Wewnątrz folderu dodaj nowy obraz i nadaj mu nazwę, na przykład Słodki Ptak.jpg.
- Określ bezwzględną ścieżkę do właśnie dodanego pliku obrazu. Możesz to zrobić, znajdując go na ścieżce nawigacji aplikacji menedżera plików w systemie operacyjnym. Będziesz także musiał dodać nazwę pliku na końcu ścieżki. Na przykład „C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg”
- W indeks.html, zastąp tag obrazu nowym obrazem, który używa bezwzględnej ścieżki prowadzącej do pliku Słodki Ptak.jpg plik zapisany na twoim komputerze. Pamiętaj, aby dodać przedrostek file://, aby wskazać zasób lokalnego systemu plików. W systemach Unix i macOS możesz następnie dołączyć ścieżkę bezwzględną określoną w poprzednim kroku. W systemie Windows konieczne będzie zastąpienie ukośników odwrotnych ukośnikami w przód i dodanie dodatkowego ukośnika przed literą dysku, na przykład:
- Kliknij na indeks.html plik, aby otworzyć go w przeglądarce i wyświetlić obraz przechowywany na komputerze.
Jak korzystać ze względnej ścieżki adresu URL
Względny adres URL przechowuje tylko część adresu URL lub ścieżki i zwykle odnosi się do lokalizacji bieżącego pliku lub sekcji witryny.
W powyższym przykładzie, aby uzyskać dostęp Logo.ico z indeks.html używając względnego adresu URL, użyłbyś ścieżki „Images/Icons/Logo.ico”. Inne przykłady obejmują:
- Strony/Ptak1.html
- Obrazy/Słodki Ptak.jpg
- style.css
Jeśli użyjesz tej samej struktury folderów na innym komputerze, witryna nadal będzie mogła pobrać plik. Podczas kierowania przez Internet zamiast pełnego łącza, takiego jak „ https://example.com/about", zamiast tego możesz użyć routingu względnego:
- /about
- /contact
- /projects/local-clients
Możesz użyć względnego adresu URL, aby utworzyć linki lub obrazy referencyjne na swojej stronie internetowej HTML.
- W katalogu głównym swojej witryny utwórz nowy folder o nazwie Strony.
- W nowym folderze Pages utwórz nowy plik o nazwie Ptak1.html.
- Zaludniać Ptak1.html z kodem HTML do utworzenia strony.
<!DOCTYPE html>
<język html="en">
<głowa>
<tytuł> Ptak 1 </title>
<zestaw znaków meta="UTF-8">
<metanazwa="rzutnia" zawartość="szerokość = szerokość urządzenia, skala początkowa = 1">
<link rel="arkusz stylów" href="../style.css" />
</head>
<ciało>
<klasa div="pojemnik">
<h1> Kawa </h1>
<P> Kawa to słodki ptaszek, który uwielbia zabawę! </P>
</div>
</body>
</html> - Wewnątrz elementu div kontenera dodaj tag obrazu i użyj względnego adresu URL, aby połączyć się z plikiem Słodki Ptak.jpg obraz.
<źródło img="../Obrazy/CuteBird.jpg" alt="Ładne zdjęcie ptaka" klasa="mb28" szerokość="900" wysokość="700"> - w indeks.html plik, usuń istniejącą zawartość wewnątrz kontenera div. Zastąp go jedynką A tag, który używa łącza względnego do otwarcia pliku Ptak1.html plik.
<klasa div="pojemnik">
<h1> Moja strona internetowa </h1>
<P> Witam na mojej stronie internetowej. </P>
<href="Strony/Ptak1.html" klasa="mb28">Ptak 1: Kawa</A>
</div> - Kliknij na indeks.html plik, aby otworzyć go w przeglądarce, i kliknij nowy link, aby przejść do niego Ptak1.html.
Teraz możesz określić różnicę między bezwzględnymi i względnymi adresami URL. Możesz teraz zachować szczególną ostrożność, aby mieć pewność, że Twoje zasoby są zawsze pobierane.
Należy również zawsze upewnić się, że wszystkie łącza, do których użytkownicy mają dostęp, są bezpieczne.