Linkurile și imaginile sunt două dintre cele mai comune resurse pe care le veți adăuga în paginile dvs. web, așa că este esențial să știți cum să le abordați corect.
Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat.
Fiecare site web trebuie să facă referire la anumite resurse, fie că sunt imagini, fișiere sau alte pagini web. Este extrem de important să decideți cum să conectați la alte fișiere pentru a vă asigura că browserele le localizează corect.
Puteți conecta la resurse folosind fie o adresă URL relativă, fie absolută. Acest lucru se aplică atât fișierelor locale de pe un computer, cât și adreselor URL bazate pe protocol accesate pe web.
Cum să utilizați o cale URL absolută
O adresă URL absolută conține întreaga cale către o anumită locație a fișierului. Exemple dintre acestea includ calea completă către fișierele de pe computer:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Un alt exemplu include o adresă URL a protocolului complet, pe care o puteți utiliza pentru a identifica o resursă de trimis prin internet. Cel mai frecvent, acestea încep cu „https” sau „http”:
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Adresa URL absolută conține toate informațiile necesare pentru a localiza fișierul sau resursa pe care încercați să o accesați. Acest lucru este necesar dacă vă conectați la un site extern.
- Creați un site web simplu în HTML prin crearea unui folder nou și adăugarea a două fișiere noi numite index.html și stiluri.css.
- În index.html, adăugați niște cod HTML pentru a crea un site web de bază:
<!DOCTYPE html>
<html lang="ro">
<cap>
<titlu> Site-ul meu </title>
<meta charset="UTF-8">
<meta nume="fereastra" continut="lățime=lățime-dispozitiv, scară inițială=1">
<link rel="foaia de stil" href="stiluri.css" />
</head>
<corp>
<div class="recipient">
<h1> Site-ul meu </h1>
<p> Bun venit pe site-ul meu. </p>
</div>
</body>
</html> - În stiluri.css, adăugați un pic de stil paginii web.
corp {
familie de fonturi: Arial, Helvetica, sans-serif;
}.container {
display: flex;
flex-direcție: coloană;
alinierea elementelor: centru;
}.mb28 {
margine-jos: 28px;
} - În index.html, adăugați un etichetați în interiorul div-ului containerului și adăugați adresa URL absolută pe site-ul principal Google ( https://www.google.com).
<a href="https://www.google.com" clasa="mb28">Google.com</A> - De asemenea, puteți accesa imagini online folosind calea absolută completă către fișierul stocat. De asemenea, puteți face pași suplimentari pentru a vă asigura că ați adăugat imagini receptive la HTML pagină web.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&potrivi = crop&w=3870&q=80" alt="Fotografie drăguță cu pasăre" clasa="mb28" latime="900" inaltime="600"> - Faceți clic pe index.html pentru a-l deschide într-un browser și pentru a vedea imaginea preluată din locația sa externă.
- Din folderul rădăcină al site-ului dvs., creați un nou folder pentru a stoca imagini, numit Imagini. În interiorul folderului, adăugați o nouă imagine și dați-i un nume, cum ar fi CuteBird.jpg.
- Identificați calea absolută către fișierul imagine pe care tocmai l-ați adăugat. Puteți face acest lucru găsindu-l în calea de navigare a aplicației de gestionare a fișierelor a sistemului dvs. de operare. De asemenea, va trebui să adăugați numele fișierului la sfârșitul căii. De exemplu, „C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg”
- În index.html, înlocuiți eticheta de imagine cu o nouă imagine care utilizează calea absolută care indică spre CuteBird.jpg fișier stocat pe computer. Nu uitați să adăugați prefixul file:// pentru a indica o resursă locală a sistemului de fișiere. Pe Unix și macOS, puteți adăuga apoi calea absolută pe care ați identificat-o la pasul anterior. Pe Windows, va trebui să înlocuiți barele oblice inverse cu bare oblice și să adăugați o bară oblică înainte de litera de unitate, de exemplu:
- Faceți clic pe index.html pentru a-l deschide într-un browser și pentru a vedea imaginea stocată pe computer.
Cum să utilizați o cale URL relativă
O adresă URL relativă stochează doar o parte a adresei URL sau a căii și este de obicei relativă la locația fișierului sau a secțiunii curente a unui site web.
În exemplul de mai sus, pentru a accesa Logo.ico din index.html folosind o adresă URL relativă, ați folosi calea „Imagini/Icoane/Logo.ico”. Alte exemple includ:
- Pagini/Bird1.html
- Imagini/CuteBird.jpg
- stiluri.css
Când utilizați aceeași structură de foldere pe alt computer, site-ul web va putea în continuare să recupereze fișierul. Când rutați pe web, în loc să utilizați linkul complet, cum ar fi " https://example.com/about", puteți folosi în schimb rutarea relativă:
- /about
- /contact
- /projects/local-clients
Puteți utiliza o adresă URL relativă pentru a crea linkuri sau imagini de referință în pagina dvs. web HTML.
- În rădăcina directorului site-ului dvs. web, creați un nou folder numit Pagini.
- În noul folder Pagini, creați un fișier nou numit Bird1.html.
- Popula Bird1.html cu cod HTML pentru a crea pagina.
<!DOCTYPE html>
<html lang="ro">
<cap>
<titlu> Pasărea 1 </title>
<meta charset="UTF-8">
<meta nume="fereastra" continut="lățime=lățime-dispozitiv, scară inițială=1">
<link rel="foaia de stil" href="../styles.css" />
</head>
<corp>
<div class="recipient">
<h1> Cafea </h1>
<p> Cafeaua este o pasăre dulce căreia îi place să joace! </p>
</div>
</body>
</html> - În interiorul div-ului containerului, adăugați o etichetă de imagine și utilizați o adresă URL relativă pentru a face legătura la CuteBird.jpg imagine.
<img src="../Images/CuteBird.jpg" alt="Fotografie drăguță cu pasăre" clasa="mb28" latime="900" inaltime="700"> - În index.html fișier, eliminați conținutul existent din interiorul containerului div. Înlocuiește-l cu unul singur A etichetă care utilizează un link relativ pentru a deschide Bird1.html fişier.
<div class="recipient">
<h1> Site-ul meu </h1>
<p> Bun venit pe site-ul meu. </p>
<a href="Pagini/Bird1.html" clasa="mb28">Pasărea 1: Cafeaua</A>
</div> - Faceți clic pe index.html pentru a-l deschide într-un browser și faceți clic pe noul link pentru a naviga Bird1.html.
Acum puteți determina diferența dintre adresele URL absolute și relative. Acum puteți avea o grijă deosebită pentru a vă asigura că resursele dvs. sunt întotdeauna recuperate.
De asemenea, ar trebui să vă asigurați întotdeauna că toate linkurile pe care le pot accesa utilizatorii dvs. sunt sigure și securizate.
