Căi de fișiere în HTML

Căi de Fișiere HTML

O cale de fișier descrie unde se află un fișier în structura de foldere a unui site web. Căile de fișiere sunt folosite atunci când legi fișiere externe, precum pagini web, imagini, foi de stil și fișiere JavaScript.

Câteva exemple: picture.jpg se află în același folder cu pagina curentă; images/picture.jpg se află într-un folder images din interiorul folderului curent; /images/picture.jpg se află într-un folder images de la rădăcina site-ului; iar ../picture.jpg se află în folderul cu un nivel mai sus decât cel curent.

Căi de Fișiere Absolute

O cale de fișier absolută este URL-ul complet către un fișier.

Exemplu

O imagine referențiată prin URL-ul ei complet.

O pagină cu o imagine folosind o cale de fișier absolută: URL-ul complet https://prompt-cookbook.com, alt "Munte".

> Rezultat: pagină HTML completă

Prompt

O pagină cu o imagine folosind o cale de fișier absolută: URL-ul complet https://prompt-cookbook.com, alt "Munte".

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cale Absolută</title>
</head>
<body>

<img src="https://prompt-cookbook.com" alt="Munte">

</body>
</html>

Căi de Fișiere Relative

O cale de fișier relativă indică un fișier relativ la pagina curentă.

Rădăcina site-ului

O cale către folderul images de la rădăcina site-ului.

O pagină cu o imagine folosind o cale relativă către folderul images aflat la rădăcina site-ului: /images/picture.jpg, alt "Munte".

> Rezultat: pagină HTML completă

Prompt

O pagină cu o imagine folosind o cale relativă către folderul images aflat la rădăcina site-ului: /images/picture.jpg, alt "Munte".

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cale Relativă la Rădăcină</title>
</head>
<body>

<img src="/images/picture.jpg" alt="Munte">

</body>
</html>

Folderul curent

O cale către folderul images din folderul curent.

O pagină cu o imagine folosind o cale relativă către folderul images din folderul curent: images/picture.jpg, alt "Munte".

> Rezultat: pagină HTML completă

Prompt

O pagină cu o imagine folosind o cale relativă către folderul images din folderul curent: images/picture.jpg, alt "Munte".

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cale Relativă Curentă</title>
</head>
<body>

<img src="images/picture.jpg" alt="Munte">

</body>
</html>

Un nivel mai sus

O cale către folderul images cu un nivel mai sus decât folderul curent.

O pagină cu o imagine folosind o cale relativă către folderul images cu un nivel mai sus: ../images/picture.jpg, alt "Munte".

> Rezultat: pagină HTML completă

Prompt

O pagină cu o imagine folosind o cale relativă către folderul images cu un nivel mai sus: ../images/picture.jpg, alt "Munte".

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cale Relativă în Sus</title>
</head>
<body>

<img src="../images/picture.jpg" alt="Munte">

</body>
</html>

Cea Mai Bună Practică

Este cea mai bună practică să folosești căi de fișiere relative ori de câte ori este posibil. Cu căi relative, paginile tale nu sunt legate de URL-ul de bază curent, deci linkurile funcționează atât pe propriul tău calculator (localhost), cât și pe domeniul public curent și cele viitoare.