Fájl elérési utak (file paths) HTML-ben

A HTML-ben gyakran hivatkozunk más fájlokra, például képekre, CSS fájlokra vagy JavaScript fájlokra. Ahhoz, hogy ezeket az elemeket betöltsük, helyesen kell megadnunk az elérési utat (file path).

Abszolút elérési út

Az abszolút út mindig egy teljes URL, amely a protokollal (https://) és domainnel kezdődik. Akkor használjuk, ha külső fájlra hivatkozunk.

<img src="https://example.com/images/logo.png" alt="Logo">

Relatív elérési út

A relatív elérési út a jelenlegi fájl helyéhez viszonyítva határozza meg az útvonalat. Ez a leggyakoribb módszer saját projekt struktúrán belül.

<img src="images/photo.jpg" alt="Photo">

Fájl elérése szülő mappából

Ha egy fájl a jelenlegi fájl mappaszintje felett található, a ../ segítségével érhetjük el a szülő mappát.

<img src="../assets/image.png" alt="Image from parent folder">

Fájl elérése ugyanabból a mappából

Ha a hivatkozott fájl ugyanabban a mappában van, mint a HTML fájl, akkor csak a fájl nevét kell megadni.

<link rel="stylesheet" href="style.css">

Fájl elérése egy almappából

Ha a fájl egy almappában van, akkor először az almappa nevét, majd a fájl nevét adjuk meg, pl. 'scripts/main.js'.

<script src="scripts/main.js"></script>

Tippek elérési utak használatához

Mindig ellenőrizd a mappa- és fájlszerkezetet. Kerüld a hibás karaktereket (pl. szóköz, ékezet), és használj konzisztens mappaneveket. A fájlnevek kis- és nagybetűérzékenyek lehetnek, főleg szervereken!

Példa egy projektstruktúrára

Az alábbi mappastruktúra segít megérteni, hogyan nézhet ki egy egyszerű HTML projekt:

project/
├── index.html
├── style.css
├── images/
│   └── logo.png
└── scripts/
    └── app.js

A fenti struktúrában az index.html fájlból így tudunk elérni más fájlokat. Ez a fajta vizuális struktúra segít a helyes elérési utak megértésében.

Gyakorlati példa

Nézzünk egy példát arra, hogyan kell helyesen hivatkozni különböző fájlokra egy valós projektben:

<!-- Reference to an image -->
<img src="images/logo.png" alt="Logo">

<!-- Reference to a CSS file -->
<link rel="stylesheet" href="style.css">

<!-- JavaScript script -->
<script src="scripts/app.js"></script>

Összefoglalás

Az elérési utak pontos megadása elengedhetetlen, különösen nagyobb projektek esetén. Mindig figyelj arra, hogy a megadott út megfeleljen a fájlrendszer valós szerkezetének.