Saites un attēli ir divi no visbiežāk sastopamajiem resursiem, ko pievienojat savām tīmekļa lapām, tāpēc ir svarīgi zināt, kā tos pareizi risināt.
Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju.
Katrai vietnei ir jāatsaucas uz noteiktiem resursiem neatkarīgi no tā, vai tie ir attēli, faili vai citas tīmekļa lapas. Izlemt, kā izveidot saiti uz citiem failiem, ir ārkārtīgi svarīgi, lai nodrošinātu, ka pārlūkprogrammas tos pareizi atrod.
Varat izveidot saiti uz resursiem, izmantojot relatīvo vai absolūto URL. Tas attiecas gan uz lokālajiem failiem datorā, gan uz protokoliem balstītiem URL, kuriem piekļūst tīmeklī.
Kā izmantot absolūto URL ceļu
Absolūtais URL satur visu ceļu uz noteiktu faila atrašanās vietu. To piemēri ietver pilnu ceļu uz failiem jūsu datorā:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Vēl viens piemērs ietver pilnu protokola URL, ko varat izmantot, lai identificētu resursu, ko nosūtīt internetā. Visbiežāk tie sākas ar "https" vai "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Absolūtais URL satur visu informāciju, kas nepieciešama, lai atrastu failu vai resursu, kuram mēģināt piekļūt. Tas ir nepieciešams, ja veidojat saiti uz ārēju vietni.
- Izveidojiet vienkāršu vietni HTML valodā izveidojot jaunu mapi un pievienojot divus jaunus failus ar nosaukumu index.html un stili.css.
- In index.html, pievienojiet HTML kodu, lai izveidotu pamata vietni:
<!DOCTYPE html>
<html lang="lv">
<galvu>
<virsraksts> Mana vietne </title>
<meta rakstzīmju kopa ="UTF-8">
<meta nosaukums ="skata logs" saturs="platums = ierīces platums, sākotnējais mērogs = 1">
<saite rel="stila lapa" href="stili.css" />
</head>
<ķermeni>
<div klase="konteiners">
<h1> Mana vietne </h1>
<lpp> Laipni lūdzam manā vietnē. </lpp>
</div>
</body>
</html> - In stili.css, pievienojiet tīmekļa lapai stilu.
body {
fontu saime: Arial, Helvetica, sans-serif;
}.konteiners {
displejs: flex;
flex-direction: kolonna;
izlīdzināt vienumus: centrs;
}.mb28 {
mala-apakšā: 28 pikseļi;
} - In index.html, pievienojiet an tagu konteinera div iekšpusē un pievienojiet absolūto URL Google galvenajai vietnei ( https://www.google.com).
<a href="https://www.google.com" klase="mb28">Google.com</a> - Varat arī piekļūt attēliem tiešsaistē, izmantojot pilnu absolūto ceļu uz saglabāto failu. Varat arī veikt papildu darbības, lai pārliecinātos, ka esat pievienojis atsaucīgus attēlus uz jūsu HTML tīmekļa lapa.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formāts&fit=crop&w=3870&q=80" alt="Jauka putna fotogrāfija" klase="mb28" platums="900" augstums ="600"> - Noklikšķiniet uz index.html failu, lai to atvērtu pārlūkprogrammā un skatītu attēlu, kas iegūts no tā ārējās atrašanās vietas.
- No savas vietnes saknes mapes izveidojiet jaunu mapi attēlu glabāšanai Attēli. Mapes iekšpusē pievienojiet jaunu attēlu un piešķiriet tam nosaukumu, piemēram, CuteBird.jpg.
- Nosakiet tikko pievienotā attēla faila absolūto ceļu. To var izdarīt, atrodot to operētājsistēmas failu pārvaldnieka lietotnes navigācijas ceļā. Ceļa beigās būs jāpievieno arī faila nosaukums. Piemēram, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- In index.html, nomainiet attēla tagu ar jaunu attēlu, kas izmanto absolūto ceļu, kas norāda uz CuteBird.jpg jūsu datorā saglabātais fails. Neaizmirstiet pievienot prefiksu file://, lai norādītu uz lokālo failu sistēmas resursu. Operētājsistēmās Unix un macOS varat pievienot absolūto ceļu, ko norādījāt iepriekšējā darbībā. Operētājsistēmā Windows atpakaļvērstās slīpsvītras ir jāaizstāj ar uz priekšu un pirms diska burta jāpievieno papildu slīpsvītra, piemēram:
- Noklikšķiniet uz index.html failu, lai to atvērtu pārlūkprogrammā un skatītu datorā saglabāto attēlu.
Kā izmantot relatīvo URL ceļu
Relatīvā URL saglabā tikai daļu no URL vai ceļa, un tas parasti ir saistīts ar pašreizējā faila vai vietnes sadaļas atrašanās vietu.
Iepriekš minētajā piemērā, lai piekļūtu Logo.ico no index.html izmantojot relatīvo URL, jūs izmantotu ceļu "Images/Icons/Logo.ico". Citi piemēri:
- Lapas/Putns1.html
- Attēli/CuteBird.jpg
- stili.css
Izmantojot to pašu mapju struktūru citā datorā, vietne joprojām varēs izgūt failu. Maršrutējot tīmeklī, izmantojiet pilnu saiti, piemēram, " https://example.com/about", tā vietā varat izmantot relatīvo maršrutēšanu:
- /about
- /contact
- /projects/local-clients
Varat izmantot relatīvu URL, lai savā HTML tīmekļa lapā izveidotu saites vai atsauces attēlus.
- Vietnes direktorija saknē izveidojiet jaunu mapi ar nosaukumu Lapas.
- Jaunajā mapē Lapas izveidojiet jaunu failu ar nosaukumu Putns1.html.
- Apdzīvot Putns1.html ar HTML kodu, lai izveidotu lapu.
<!DOCTYPE html>
<html lang="lv">
<galvu>
<virsraksts> Putns 1 </title>
<meta rakstzīmju kopa ="UTF-8">
<meta nosaukums ="skata logs" saturs="platums = ierīces platums, sākotnējais mērogs = 1">
<saite rel="stila lapa" href="../styles.css" />
</head>
<ķermeni>
<div klase="konteiners">
<h1> Kafija </h1>
<lpp> Kafija ir salds putns, kuram patīk spēlēties! </lpp>
</div>
</body>
</html> - Konteinera div iekšpusē pievienojiet attēla tagu un izmantojiet relatīvo URL, lai izveidotu saiti uz CuteBird.jpg attēlu.
<img src="../Images/CuteBird.jpg" alt="Jauka putna fotogrāfija" klase="mb28" platums="900" augstums ="700"> - Iekš index.html failu, noņemiet esošo saturu konteinera div. Nomainiet to ar vienu a tagu, kas izmanto relatīvu saiti, lai atvērtu Putns1.html failu.
<div klase="konteiners">
<h1> Mana vietne </h1>
<lpp> Laipni lūdzam manā vietnē. </lpp>
<a href="Lapas/Putns1.html" klase="mb28">1. putns: kafija</a>
</div> - Noklikšķiniet uz index.html failu, lai to atvērtu pārlūkprogrammā, un noklikšķiniet uz jaunās saites, uz kuru pāriet Putns1.html.
Tagad varat noteikt atšķirību starp absolūtajiem un relatīvajiem URL. Tagad varat īpaši rūpēties, lai jūsu resursi vienmēr tiktu izgūti.
Jums arī vienmēr jānodrošina, lai visas saites, kurām var piekļūt jūsu lietotāji, ir drošas.