A linkek és a képek a két leggyakoribb forrás, amelyet weboldalaihoz ad, ezért kulcsfontosságú tudni, hogyan kell helyesen megcímezni őket.
Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk.
Minden webhelynek hivatkoznia kell bizonyos forrásokra, legyenek azok képek, fájlok vagy más weboldalak. A más fájlokhoz való hivatkozás módjának eldöntése rendkívül fontos annak biztosítása érdekében, hogy a böngészők megfelelően megtalálják azokat.
Az erőforrásokhoz relatív vagy abszolút URL-címmel is hivatkozhat. Ez a számítógépen lévő helyi fájlokra és az interneten keresztül elérhető protokoll-alapú URL-ekre egyaránt vonatkozik.
Az abszolút URL elérési út használata
Az abszolút URL egy adott fájlhely teljes elérési útját tartalmazza. Ilyen például a számítógépén lévő fájlok teljes elérési útja:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Egy másik példa a protokoll teljes URL-címe, amellyel azonosíthatja az interneten keresztül küldendő erőforrást. Ezek leggyakrabban „https”-vel vagy „http”-vel kezdődnek:
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Az abszolút URL tartalmazza az elérni kívánt fájl vagy erőforrás megtalálásához szükséges összes információt. Ez akkor szükséges, ha külső webhelyre hivatkozik.
- Hozzon létre egy egyszerű webhelyet HTML-ben egy új mappa létrehozásával és két új fájl hozzáadásával index.html és stílusok.css.
- Ban ben index.html, adjon hozzá néhány HTML-kódot egy alapvető webhely létrehozásához:
<!DOCTYPE html>
<html lang="hu">
<fej>
<cím> Saját Weboldal </title>
<meta karakterkészlet="UTF-8">
<meta név="nézetablak" tartalom="szélesség=eszköz-szélesség, kezdeti lépték=1">
<link rel="stíluslap" href="stílusok.css" />
</head>
<test>
<div class="tartály">
<h1> Saját Weboldal </h1>
<p> Üdvözlöm a honlapomon. </p>
</div>
</body>
</html> - Ban ben stílusok.css, adjon hozzá stílust a weboldalhoz.
body {
font-család: Arial, Helvetica, sans-serif;
}.tartály {
kijelző: flex;
hajlítási irány: oszlop;
align-ites: center;
}.mb28 {
margó-alsó: 28px;
} - Ban ben index.html, adj hozzá egy címkét a div tárolóban, és adja hozzá az abszolút URL-t a Google fő webhelyéhez ( https://www.google.com).
<a href="https://www.google.com" osztály="mb28">Google.com</a> - A képeket online is elérheti a tárolt fájl teljes abszolút elérési útjával. Ezenkívül további lépéseket is megtehet annak biztosítására, hogy hozzáadta-e érzékeny képeket a HTML-kódhoz honlap.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formátum&fit=termés&w=3870&q=80" alt="Aranyos madár fotó" osztály="mb28" szélesség="900" magasság="600"> - Kattintson a index.html fájl megnyitásához a böngészőben, és megtekintheti a külső helyéről letöltött képet.
- Webhelye gyökérmappájából hozzon létre egy új mappát a képek tárolására Képek. A mappán belül adjon hozzá egy új képet, és adjon neki nevet, például CuteBird.jpg.
- Határozza meg az imént hozzáadott képfájl abszolút elérési útját. Ezt úgy teheti meg, hogy megtalálja az operációs rendszer fájlkezelő alkalmazásának navigációs útvonalában. A fájlnevet is hozzá kell adnia az elérési út végéhez. Például: "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- Ban ben index.html, cserélje ki a képcímkét egy új képre, amely a következőre mutató abszolút útvonalat használja CuteBird.jpg a számítógépén tárolt fájl. Ne felejtse el hozzáadni a file:// előtagot a helyi fájlrendszer-erőforrás jelzésére. Unix és macOS rendszeren ezután hozzáfűzheti az előző lépésben megadott abszolút elérési utat. Windows rendszeren a fordított perjeleket előre perjelekre kell cserélnie, és a meghajtó betűje elé egy extra perjelet kell hozzáadnia, például:
- Kattintson a index.html fájl megnyitásához a böngészőben, és megtekintheti a számítógépén tárolt képet.
A relatív URL elérési út használata
A relatív URL csak az URL vagy az elérési út egy részét tárolja, és általában az aktuális fájl vagy webhelyrész helyéhez viszonyítva van.
A fenti példában a hozzáféréshez Logo.ico tól től index.html relatív URL-t használva az „Images/Icons/Logo.ico” elérési utat kell használnia. További példák:
- Oldalak/Madár1.html
- Képek/CuteBird.jpg
- stílusok.css
Ha ugyanazt a mappastruktúrát használja egy másik számítógépen, a webhely továbbra is képes lesz letölteni a fájlt. Az interneten keresztüli útválasztáskor a teljes hivatkozás használata helyett, például " https://example.com/about", helyette használhat relatív útválasztást:
- /about
- /contact
- /projects/local-clients
Használhat relatív URL-t linkek vagy hivatkozások létrehozására a HTML weboldalon belül.
- A webhely könyvtárának gyökerében hozzon létre egy új mappát, melynek neve Oldalak.
- Az új Oldalak mappában hozzon létre egy új fájlt Madár1.html.
- Benépesít Madár1.html HTML kóddal az oldal létrehozásához.
<!DOCTYPE html>
<html lang="hu">
<fej>
<cím> Madár 1 </title>
<meta karakterkészlet="UTF-8">
<meta név="nézetablak" tartalom="szélesség=eszköz-szélesség, kezdeti lépték=1">
<link rel="stíluslap" href="../styles.css" />
</head>
<test>
<div class="tartály">
<h1> Kávé </h1>
<p> A kávé édes madár, aki szeret játszani! </p>
</div>
</body>
</html> - A div tárolóban adjon hozzá egy képcímkét, és egy relatív URL-címet használjon a linkre való hivatkozáshoz CuteBird.jpg kép.
<img src="../Images/CuteBird.jpg" alt="Aranyos madár fotó" osztály="mb28" szélesség="900" magasság="700"> - Ban,-ben index.html fájlt, távolítsa el a meglévő tartalmat a div. Cserélje ki egyetlenre a címke, amely egy relatív hivatkozást használ a megnyitásához Madár1.html fájlt.
<div class="tartály">
<h1> Saját Weboldal </h1>
<p> Üdvözlöm a honlapomon. </p>
<a href="Oldalak/Madár1.html" osztály="mb28">1. madár: Kávé</a>
</div> - Kattintson a index.html fájl megnyitásához a böngészőben, és kattintson az új hivatkozásra a navigáláshoz Madár1.html.
Most már meghatározhatja az abszolút és a relatív URL-ek közötti különbséget. Mostantól fokozottan ügyelhet arra, hogy erőforrásait mindig visszakeresse.
Mindig gondoskodnia kell arról is, hogy minden hivatkozás, amelyhez a felhasználók hozzáférhetnek, biztonságosak legyenek.
