Odkazy a obrázky jsou dva z nejběžnějších zdrojů, které přidáte na své webové stránky, takže je klíčové vědět, jak je správně adresovat.
Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.
Každý web musí odkazovat na určité zdroje, ať už jsou to obrázky, soubory nebo jiné webové stránky. Rozhodnutí o tom, jak odkazovat na jiné soubory, je nesmírně důležité, aby je prohlížeče správně lokalizovaly.
Na zdroje můžete odkazovat pomocí relativní nebo absolutní adresy URL. To platí jak pro místní soubory v počítači, tak pro adresy URL založené na protokolu, ke kterým se přistupuje přes web.
Jak používat absolutní cestu URL
Absolutní adresa URL obsahuje celou cestu k určitému umístění souboru. Příklady zahrnují úplnou cestu k souborům ve vašem počítači:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Další příklad zahrnuje úplnou adresu URL protokolu, kterou můžete použít k identifikaci zdroje k odeslání přes internet. Nejčastěji začínají „https“ nebo „http“:
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Absolutní adresa URL obsahuje všechny informace potřebné k nalezení souboru nebo prostředku, ke kterému se pokoušíte získat přístup. Toto je vyžadováno, pokud odkazujete na externí web.
- Vytvořte jednoduchý web v HTML vytvořením nové složky a přidáním dvou nových souborů tzv index.html a styly.css.
- v index.html, přidejte nějaký HTML kód pro vytvoření základní webové stránky:
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<titul> Moje webová stránka </title>
<meta znaková sada="UTF-8">
<meta jméno="výřez" obsah ="width=device-width, initial-scale=1">
<odkaz rel="šablona stylů" href="styly.css" />
</head>
<tělo>
<třída div="kontejner">
<h1> Moje webová stránka </h1>
<p> Vítejte na mém webu. </str>
</div>
</body>
</html> - v styly.css, přidejte na webovou stránku nějaký styl.
tělo {
rodina písem: Arial, Helvetica, sans-serif;
}.kontejner {
displej: flex;
směr ohybu: sloupec;
align-items: center;
}.mb28 {
margin-bottom: 28px;
} - v index.html, přidejte an značku uvnitř kontejneru div a přidejte absolutní adresu URL na hlavní web Google ( https://www.google.com).
<a href="https://www.google.com" třída="mb28">Google.com</A> - Můžete také přistupovat k obrázkům online pomocí úplné absolutní cesty k uloženému souboru. Můžete také podniknout další kroky, abyste zajistili, že jste přidali obrázky reagující na váš HTML webová stránka.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formát&fit=plodina&w=3870&q=80" alt="Roztomilá ptačí fotka" třída="mb28" šířka="900" výška ="600"> - Klikněte na index.html soubor otevřít v prohlížeči a zobrazit obrázek načtený z jeho externího umístění.
- V kořenové složce vašeho webu vytvořte novou složku pro ukládání obrázků, tzv snímky. Uvnitř složky přidejte nový obrázek a pojmenujte jej, např CuteBird.jpg.
- Identifikujte absolutní cestu k souboru obrázku, který jste právě přidali. Můžete to udělat tak, že jej najdete v navigační cestě aplikace správce souborů operačního systému. Budete také muset přidat název souboru na konec cesty. Například „C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg“
- v index.html, nahraďte značku obrázku novým obrázkem, který používá absolutní cestu ukazující na CuteBird.jpg soubor uložený ve vašem počítači. Nezapomeňte přidat předponu file:// označující zdroj místního souborového systému. V systémech Unix a macOS pak můžete připojit absolutní cestu, kterou jste určili v předchozím kroku. V systému Windows budete muset nahradit zpětná lomítka dopřednými lomítky a přidat další lomítko před písmeno jednotky, například:
- Klikněte na index.html soubor, otevřete jej v prohlížeči a prohlédněte si obrázek uložený v počítači.
Jak používat relativní cestu URL
Relativní adresa URL ukládá pouze část adresy URL nebo cesty a je obvykle relativní k umístění aktuálního souboru nebo části webové stránky.
Ve výše uvedeném příkladu pro přístup Logo.ico z index.html pomocí relativní adresy URL byste použili cestu "Images/Icons/Logo.ico". Mezi další příklady patří:
- Stránky/Bird1.html
- Images/CuteBird.jpg
- styly.css
Použijete-li stejnou strukturu složek na jiném počítači, web bude stále moci soubor načíst. Při směrování přes web místo použití celého odkazu, jako je „ https://example.com/about", místo toho můžete použít relativní směrování:
- /about
- /contact
- /projects/local-clients
Relativní adresu URL můžete použít k vytvoření odkazů nebo referenčních obrázků na webové stránce HTML.
- V kořenovém adresáři vašeho webu vytvořte novou složku s názvem Stránky.
- Uvnitř nové složky Stránky vytvořte nový soubor s názvem Bird1.html.
- Zalidnit Bird1.html s HTML kódem pro vytvoření stránky.
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<titul> Pták 1 </title>
<meta znaková sada="UTF-8">
<meta jméno="výřez" obsah ="width=device-width, initial-scale=1">
<odkaz rel="šablona stylů" href="../styles.css" />
</head>
<tělo>
<třída div="kontejner">
<h1> Káva </h1>
<p> Káva je sladký pták, který miluje hru! </str>
</div>
</body>
</html> - Do kontejneru div přidejte značku obrázku a použijte relativní adresu URL k odkazu na CuteBird.jpg obraz.
<img src="../Images/CuteBird.jpg" alt="Roztomilá ptačí fotka" třída="mb28" šířka="900" výška ="700"> - V index.html soubor, odstraňte existující obsah uvnitř kontejneru div. Vyměňte jej za jeden A tag, který k otevření používá relativní odkaz Bird1.html soubor.
<třída div="kontejner">
<h1> Moje webová stránka </h1>
<p> Vítejte na mém webu. </str>
<a href="Stránky/Bird1.html" třída="mb28">Pták 1: Káva</A>
</div> - Klikněte na index.html soubor otevřete v prohlížeči a kliknutím na nový odkaz přejděte Bird1.html.
Nyní můžete určit rozdíl mezi absolutními a relativními adresami URL. Nyní můžete dbát zvýšené opatrnosti, abyste zajistili, že vaše zdroje budou vždy obnoveny.
Měli byste také vždy zajistit, aby všechny odkazy, ke kterým mají vaši uživatelé přístup, byly bezpečné a zabezpečené.