Linkit ja kuvat ovat kaksi yleisimmistä verkkosivuillesi lisättävistä resursseista, joten on tärkeää tietää, miten ne käsitellään oikein.
Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.
Jokaisen verkkosivuston on viitattava tiettyihin resursseihin, olivatpa ne kuvia, tiedostoja tai muita verkkosivuja. Muihin tiedostoihin linkittämisen päättäminen on erittäin tärkeää sen varmistamiseksi, että selaimet paikantavat ne oikein.
Voit linkittää resursseihin käyttämällä joko suhteellista tai absoluuttista URL-osoitetta. Tämä koskee sekä paikallisia tiedostoja tietokoneella että protokollapohjaisia URL-osoitteita, joita käytetään verkon kautta.
Absoluuttisen URL-polun käyttäminen
Absoluuttinen URL sisältää koko polun tiettyyn tiedostosijaintiin. Esimerkkejä näistä ovat tietokoneesi tiedostojen koko polku:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Toinen esimerkki sisältää protokollan täydellisen URL-osoitteen, jonka avulla voit tunnistaa Internetin kautta lähetettävän resurssin. Yleensä nämä alkavat "https" tai "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Absoluuttinen URL-osoite sisältää kaikki tiedot, jotka tarvitaan etsimäsi tiedoston tai resurssin paikantamiseen. Tämä vaaditaan, jos linkität ulkoiseen sivustoon.
- Rakenna yksinkertainen verkkosivusto HTML-kielellä luomalla uuden kansion ja lisäämällä kaksi uutta tiedostoa nimeltä index.html ja styles.css.
- Sisään index.html, lisää HTML-koodia perussivuston luomiseksi:
<!DOCTYPE html>
<html lang="fi">
<pää>
<otsikko> Minun nettisivuni </title>
<meta charset="UTF-8">
<metanimi="näkymä" sisältö="leveys = laitteen leveys, alkumittakaava = 1">
<linkki rel="tyylisivu" href="styles.css" />
</head>
<kehon>
<div class="kontti">
<h1> Minun nettisivuni </h1>
<s> Tervetuloa sivuilleni. </s>
</div>
</body>
</html> - Sisään styles.css, lisää verkkosivulle tyyliä.
body {
kirjasinperhe: Arial, Helvetica, sans-serif;
}.container {
näyttö: flex;
flex-suunta: pylväs;
kohdista kohteet: keskellä;
}.mb28 {
marginaali-ala: 28px;
} - Sisään index.html, lisää an tagi säilön div sisällä ja lisää absoluuttinen URL-osoite Googlen pääsivustolle ( https://www.google.com).
<a href="https://www.google.com" luokka="mb28">Google.com</a> - Voit myös käyttää kuvia verkossa käyttämällä tallennetun tiedoston täyttä absoluuttista polkua. Voit myös tehdä lisätoimenpiteitä varmistaaksesi, että olet lisännyt reagoivat kuvat HTML-koodiisi Nettisivu.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=muoto&sovi=rajaa&w = 3870&q = 80" alt="Suloinen lintukuva" luokka="mb28" leveys ="900" korkeus ="600"> - Klikkaa index.html tiedosto avataksesi sen selaimessa ja tarkastellaksesi sen ulkoisesta sijainnista haettua kuvaa.
- Luo verkkosivustosi juurikansiosta uusi kansio kuvien tallentamista varten Kuvat. Lisää kansioon uusi kuva ja anna sille nimi, esim CuteBird.jpg.
- Tunnista juuri lisäämäsi kuvatiedoston absoluuttinen polku. Voit tehdä tämän etsimällä sen käyttöjärjestelmäsi tiedostonhallintasovelluksen navigointipolusta. Sinun on myös lisättävä tiedoston nimi polun loppuun. Esimerkiksi "C:\Käyttäjät\Sharl\Desktop\Website\Images\CuteBird.jpg"
- Sisään index.html, korvaa kuvatunniste uudella kuvalla, joka käyttää absoluuttista polkua, joka osoittaa CuteBird.jpg tietokoneellesi tallennettu tiedosto. Muista lisätä file://-etuliite ilmaisemaan paikallisen tiedostojärjestelmän resurssin. Unixissa ja macOS: ssä voit sitten liittää edellisessä vaiheessa määrittämäsi absoluuttisen polun. Windowsissa sinun on korvattava kenoviiva vinoviivalla ja lisättävä ylimääräinen vinoviiva ennen asemakirjainta, esimerkiksi:
- Klikkaa index.html tiedosto avataksesi sen selaimessa ja tarkastellaksesi tietokoneellesi tallennettua kuvaa.
Suhteellisen URL-polun käyttäminen
Suhteellinen URL-osoite tallentaa vain osan URL-osoitteesta tai polusta, ja se on yleensä suhteessa nykyisen tiedoston tai verkkosivuston osan sijaintiin.
Yllä olevassa esimerkissä päästäksesi Logo.ico alkaen index.html Jos käytät suhteellista URL-osoitetta, käytät polkua "Images/Icons/Logo.ico". Muita esimerkkejä ovat:
- Sivut/Bird1.html
- Kuvat/CuteBird.jpg
- styles.css
Kun käytät samaa kansiorakennetta toisessa tietokoneessa, verkkosivusto voi silti noutaa tiedoston. Kun reitität verkon kautta, sen sijaan, että käytät koko linkkiä, kuten " https://example.com/about", voit käyttää suhteellista reititystä sen sijaan:
- /about
- /contact
- /projects/local-clients
Voit käyttää suhteellista URL-osoitetta luodaksesi linkkejä tai viittauskuvia HTML-verkkosivullesi.
- Luo Web-sivustosi hakemiston juureen uusi kansio nimeltä Sivut.
- Luo uuteen Sivut-kansioon uusi tiedosto nimeltä Bird1.html.
- Asuttaa Bird1.html HTML-koodilla sivun luomiseksi.
<!DOCTYPE html>
<html lang="fi">
<pää>
<otsikko> Lintu 1 </title>
<meta charset="UTF-8">
<metanimi="näkymä" sisältö="leveys = laitteen leveys, alkumittakaava = 1">
<linkki rel="tyylisivu" href="../styles.css" />
</head>
<kehon>
<div class="kontti">
<h1> Kahvi </h1>
<s> Kahvi on makea lintu, joka rakastaa leikkiä! </s>
</div>
</body>
</html> - Lisää säilön div sisällä kuvatunniste ja käytä suhteellista URL-osoitetta linkittämiseen CuteBird.jpg kuva.
<img src="../Images/CuteBird.jpg" alt="Suloinen lintukuva" luokka="mb28" leveys ="900" korkeus ="700"> - Vuonna index.html tiedosto, poista olemassa oleva sisältö säilön div. Korvaa se yksittäisellä a -tunniste, joka käyttää suhteellista linkkiä avatakseen Bird1.html tiedosto.
<div class="kontti">
<h1> Minun nettisivuni </h1>
<s> Tervetuloa sivuilleni. </s>
<a href="Sivut/Bird1.html" luokka="mb28">Lintu 1: Kahvi</a>
</div> - Klikkaa index.html tiedosto avataksesi sen selaimessa ja napsauta uutta linkkiä navigoidaksesi Bird1.html.
Nyt voit määrittää eron absoluuttisten ja suhteellisten URL-osoitteiden välillä. Voit nyt olla erityisen huolellinen varmistaaksesi, että resurssit ovat aina haettavissa.
Sinun tulee myös aina varmistaa, että kaikki linkit, joihin käyttäjäsi voivat päästä, ovat turvallisia.
