Odkazy a obrázky sú dva z najbežnejších zdrojov, ktoré pridávate na svoje webové stránky, preto je kľúčové vedieť, ako ich správne adresovať.
Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu.
Každá webová lokalita musí odkazovať na určité zdroje, či už sú to obrázky, súbory alebo iné webové stránky. Rozhodnutie o prepojení s inými súbormi je mimoriadne dôležité, aby sa zabezpečilo, že prehliadače ich správne lokalizujú.
Na zdroje môžete odkazovať pomocou relatívnej alebo absolútnej adresy URL. Týka sa to lokálnych súborov v počítači aj adries URL založených na protokole, ku ktorým sa pristupuje cez web.
Ako používať absolútnu cestu URL
Absolútna adresa URL obsahuje celú cestu ku konkrétnemu umiestneniu súboru. Príklady zahŕňajú úplnú cestu k súborom vo vašom 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
Ďalší príklad zahŕňa úplnú adresu URL protokolu, ktorú môžete použiť na identifikáciu zdroja na odoslanie cez internet. Najčastejšie začínajú „https“ alebo „http“:
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Absolútna adresa URL obsahuje všetky informácie potrebné na nájdenie súboru alebo prostriedku, ku ktorému sa pokúšate dostať. Toto sa vyžaduje, ak sa pripájate na externú stránku.
- Vytvorte si jednoduchú webovú stránku v HTML vytvorením nového priečinka a pridaním dvoch nových súborov tzv index.html a styles.css.
- In index.html, pridajte nejaký HTML kód na vytvorenie základnej webovej stránky:
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<titul> Moja webová stránka </title>
<meta znaková sada="UTF-8">
<meta meno="výrez" obsah ="width=device-width, initial-scale=1">
<odkaz rel="štýlov" href="styles.css" />
</head>
<telo>
<trieda div="kontajner">
<h1> Moja webová stránka </h1>
<p> Vitajte na mojej stránke. </str>
</div>
</body>
</html> - In styles.css, pridajte na webovú stránku nejaký štýl.
telo {
rodina písiem: Arial, Helvetica, bezpätkové;
}.kontajner {
displej: flex;
smer ohybu: stĺpec;
align-items: center;
}.mb28 {
margin-bottom: 28px;
} - In index.html, pridajte an značku vnútri kontajnera div a pridajte absolútnu webovú adresu na hlavnú stránku Google ( https://www.google.com).
<a href="https://www.google.com" trieda="mb28">Google.com</a> - K obrázkom môžete pristupovať aj online pomocou úplnej absolútnej cesty k uloženému súboru. Môžete tiež podniknúť ďalšie kroky, aby ste sa uistili, že ste pridali responzívne obrázky do vášho HTML webstránka.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formát&fit=úroda&w=3870&q = 80" alt="Roztomilá fotka vtáčika" trieda="mb28" šírka ="900" výška ="600"> - Klikni na index.html súbor, aby ste ho otvorili v prehliadači a zobrazili obrázok získaný z jeho externého umiestnenia.
- V koreňovom priečinku svojej webovej lokality vytvorte nový priečinok na ukladanie obrázkov, tzv snímky. Do priečinka pridajte nový obrázok a pomenujte ho, ako napr CuteBird.jpg.
- Identifikujte absolútnu cestu k súboru obrázka, ktorý ste práve pridali. Môžete to urobiť tak, že ho nájdete v navigačnej ceste aplikácie správcu súborov operačného systému. Na koniec cesty budete musieť pridať aj názov súboru. Napríklad „C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg“
- In index.html, nahraďte značku obrázka novým obrázkom, ktorý používa absolútnu cestu smerujúcu na CuteBird.jpg súbor uložený vo vašom počítači. Nezabudnite pridať predponu file:// na označenie lokálneho zdroja súborového systému. V systémoch Unix a macOS potom môžete pripojiť absolútnu cestu, ktorú ste identifikovali v predchádzajúcom kroku. V systéme Windows budete musieť nahradiť spätné lomky lomkami a pridať ďalšiu lomku pred písmeno jednotky, napríklad:
- Klikni na index.html súbor, aby ste ho otvorili v prehliadači a zobrazili obrázok uložený v počítači.
Ako používať relatívnu cestu URL
Relatívna adresa URL ukladá iba časť adresy URL alebo cesty a zvyčajne sa vzťahuje na umiestnenie aktuálneho súboru alebo sekcie webovej lokality.
Vo vyššie uvedenom príklade na prístup Logo.ico od index.html pomocou relatívnej adresy URL by ste použili cestu „Images/Icons/Logo.ico“. Medzi ďalšie príklady patria:
- Pages/Bird1.html
- Images/CuteBird.jpg
- styles.css
Keď použijete rovnakú štruktúru priečinkov na inom počítači, webová lokalita bude stále môcť získať súbor. Pri smerovaní cez web namiesto použitia úplného odkazu, ako napr. https://example.com/about", namiesto toho môžete použiť relatívne smerovanie:
- /about
- /contact
- /projects/local-clients
Relatívnu adresu URL môžete použiť na vytvorenie odkazov alebo referenčných obrázkov vo svojej webovej stránke HTML.
- V koreňovom adresári vašej webovej lokality vytvorte nový priečinok s názvom Stránky.
- V novom priečinku Pages vytvorte nový súbor s názvom Bird1.html.
- Zaľudniť Bird1.html s HTML kódom na vytvorenie stránky.
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<titul> Vtáčik 1 </title>
<meta znaková sada="UTF-8">
<meta meno="výrez" obsah ="width=device-width, initial-scale=1">
<odkaz rel="štýlov" href="../styles.css" />
</head>
<telo>
<trieda div="kontajner">
<h1> Káva </h1>
<p> Káva je sladký vták, ktorý miluje hru! </str>
</div>
</body>
</html> - Do kontajnera div pridajte značku obrázka a použite relatívnu webovú adresu na prepojenie na CuteBird.jpg obrázok.
<img src="../Images/CuteBird.jpg" alt="Roztomilá fotka vtáčika" trieda="mb28" šírka ="900" výška ="700"> - V index.html súbor, odstráňte existujúci obsah v kontajneri div. Vymeňte ho za jeden a tag, ktorý používa relatívny odkaz na otvorenie Bird1.html súbor.
<trieda div="kontajner">
<h1> Moja webová stránka </h1>
<p> Vitajte na mojej stránke. </str>
<a href="Pages/Bird1.html" trieda="mb28">Vták 1: Káva</a>
</div> - Klikni na index.html súbor, aby ste ho otvorili v prehliadači, a kliknutím na nový odkaz prejdite Bird1.html.
Teraz môžete určiť rozdiel medzi absolútnymi a relatívnymi adresami URL. Teraz môžete venovať zvýšenú pozornosť tomu, aby sa vaše zdroje vždy obnovili.
Mali by ste sa tiež vždy uistiť, že všetky odkazy, ku ktorým majú vaši používatelia prístup, sú bezpečné a zabezpečené.
