Οι σύνδεσμοι και οι εικόνες είναι δύο από τους πιο συνηθισμένους πόρους που θα προσθέσετε στις ιστοσελίδες σας, επομένως είναι σημαντικό να γνωρίζετε πώς να τις αντιμετωπίζετε σωστά.
Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.
Κάθε ιστότοπος πρέπει να αναφέρει ορισμένους πόρους, είτε πρόκειται για εικόνες, αρχεία ή άλλες ιστοσελίδες. Η απόφαση του τρόπου σύνδεσης με άλλα αρχεία είναι εξαιρετικά σημαντική για να διασφαλιστεί ότι τα προγράμματα περιήγησης τα εντοπίζουν σωστά.
Μπορείτε να συνδεθείτε με πόρους χρησιμοποιώντας είτε σχετική είτε απόλυτη διεύθυνση URL. Αυτό ισχύει τόσο για τα τοπικά αρχεία σε έναν υπολογιστή όσο και για τις διευθύνσεις URL που βασίζονται σε πρωτόκολλο και είναι προσβάσιμες μέσω του ιστού.
Πώς να χρησιμοποιήσετε μια απόλυτη διαδρομή URL
Μια απόλυτη διεύθυνση URL περιέχει ολόκληρη τη διαδρομή προς μια συγκεκριμένη τοποθεσία αρχείου. Παραδείγματα αυτών περιλαμβάνουν την πλήρη διαδρομή προς τα αρχεία στον υπολογιστή σας:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Ένα άλλο παράδειγμα περιλαμβάνει μια πλήρη διεύθυνση URL πρωτοκόλλου, την οποία μπορείτε να χρησιμοποιήσετε για να προσδιορίσετε έναν πόρο για αποστολή μέσω Διαδικτύου. Συνήθως, ξεκινούν με "https" ή "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Η απόλυτη διεύθυνση URL περιέχει όλες τις πληροφορίες που απαιτούνται για τον εντοπισμό του αρχείου ή του πόρου στον οποίο προσπαθείτε να αποκτήσετε πρόσβαση. Αυτό απαιτείται εάν συνδέεστε σε εξωτερικό ιστότοπο.
- Δημιουργήστε έναν απλό ιστότοπο σε HTML δημιουργώντας έναν νέο φάκελο και προσθέτοντας δύο νέα αρχεία που ονομάζονται index.html και στυλ.css.
- Σε index.html, προσθέστε κάποιο κώδικα HTML για να δημιουργήσετε έναν βασικό ιστότοπο:
<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<τίτλος> Η ιστοσελίδα μου </title>
<meta charset="UTF-8">
<μετα όνομα="θέαση" περιεχόμενο="πλάτος=πλάτος συσκευής, αρχική κλίμακα=1">
<σύνδεσμος rel="φύλλο στυλ" href="στυλ.css" />
</head>
<σώμα>
<div class="δοχείο">
<h1> Η ιστοσελίδα μου </h1>
<Π> Καλώς ορίσατε στον ιστότοπό μου. </Π>
</div>
</body>
</html> - Σε στυλ.css, προσθέστε λίγο στυλ στην ιστοσελίδα.
σώμα {
γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif;
}.δοχείο {
οθόνη: flex;
flex-direction: στήλη;
στοίχιση-στοιχεία: κέντρο;
}.mb28 {
margin-bottom: 28px;
} - Σε index.html, προσθέστε ένα προσθέστε ετικέτα μέσα στο κοντέινερ div και προσθέστε την απόλυτη διεύθυνση URL στον κύριο ιστότοπο της Google ( https://www.google.com).
<a href="https://www.google.com" τάξη="mb28">Google.com</ένα> - Μπορείτε επίσης να αποκτήσετε πρόσβαση σε εικόνες online χρησιμοποιώντας την πλήρη απόλυτη διαδρομή προς το αποθηκευμένο αρχείο. Μπορείτε επίσης να κάνετε επιπλέον βήματα για να βεβαιωθείτε ότι έχετε προσθέσει αποκριτικές εικόνες στο HTML σας ιστοσελίδα.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&ταιριάζει=καλλιέργεια&w=3870&q=80" alt="Χαριτωμένη φωτογραφία πουλιού" τάξη="mb28" πλάτος="900" ύψος="600"> - Κάνε κλικ στο index.html αρχείο για να το ανοίξετε σε ένα πρόγραμμα περιήγησης και να προβάλετε την εικόνα που ανακτήθηκε από την εξωτερική του θέση.
- Από τον ριζικό φάκελο του ιστότοπού σας, δημιουργήστε έναν νέο φάκελο για την αποθήκευση εικόνων, που ονομάζεται εικόνες. Μέσα στο φάκελο, προσθέστε μια νέα εικόνα και δώστε της ένα όνομα, όπως π.χ CuteBird.jpg.
- Προσδιορίστε την απόλυτη διαδρομή προς το αρχείο εικόνας που μόλις προσθέσατε. Μπορείτε να το κάνετε αυτό βρίσκοντάς το στη διαδρομή πλοήγησης της εφαρμογής διαχείρισης αρχείων του λειτουργικού σας συστήματος. Θα χρειαστεί επίσης να προσθέσετε το όνομα του αρχείου στο τέλος της διαδρομής. Για παράδειγμα, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- Σε index.html, αντικαταστήστε την ετικέτα εικόνας σας με μια νέα εικόνα που χρησιμοποιεί την απόλυτη διαδρομή που δείχνει προς το CuteBird.jpg αρχείο που είναι αποθηκευμένο στον υπολογιστή σας. Θυμηθείτε να προσθέσετε το πρόθεμα file:// για να υποδείξετε έναν τοπικό πόρο συστήματος αρχείων. Σε Unix και macOS, μπορείτε στη συνέχεια να προσθέσετε την απόλυτη διαδρομή που προσδιορίσατε στο προηγούμενο βήμα. Στα Windows, θα πρέπει να αντικαταστήσετε τις ανάστροφες κάθετες με κάθετες προς τα εμπρός και να προσθέσετε μια επιπλέον κάθετο πριν από το γράμμα της μονάδας δίσκου, για παράδειγμα:
- Κάνε κλικ στο index.html αρχείο για να το ανοίξετε σε ένα πρόγραμμα περιήγησης και να προβάλετε την εικόνα που είναι αποθηκευμένη στον υπολογιστή σας.
Πώς να χρησιμοποιήσετε μια σχετική διαδρομή URL
Μια σχετική διεύθυνση URL αποθηκεύει μόνο μέρος της διεύθυνσης URL ή της διαδρομής και συνήθως σχετίζεται με τη θέση του τρέχοντος αρχείου ή ενότητας ενός ιστότοπου.
Στο παραπάνω παράδειγμα, για πρόσβαση Logo.ico από index.html χρησιμοποιώντας μια σχετική διεύθυνση URL, θα χρησιμοποιούσατε τη διαδρομή "Images/Icons/Logo.ico". Άλλα παραδείγματα περιλαμβάνουν:
- Pages/Bird1.html
- Εικόνες/CuteBird.jpg
- στυλ.css
Όταν χρησιμοποιείτε την ίδια δομή φακέλου σε άλλον υπολογιστή, ο ιστότοπος θα εξακολουθεί να μπορεί να ανακτήσει το αρχείο. Κατά τη δρομολόγηση μέσω του ιστού, αντί να χρησιμοποιείτε τον πλήρη σύνδεσμο όπως " https://example.com/about", μπορείτε να χρησιμοποιήσετε τη σχετική δρομολόγηση:
- /about
- /contact
- /projects/local-clients
Μπορείτε να χρησιμοποιήσετε μια σχετική διεύθυνση URL για να δημιουργήσετε συνδέσμους ή εικόνες αναφοράς μέσα στην ιστοσελίδα σας HTML.
- Μέσα στη ρίζα του καταλόγου του ιστότοπού σας, δημιουργήστε έναν νέο φάκελο που ονομάζεται Σελίδες.
- Μέσα στο νέο φάκελο Σελίδες, δημιουργήστε ένα νέο αρχείο που ονομάζεται Bird1.html.
- Κατοικώ Bird1.html με κώδικα HTML για τη δημιουργία της σελίδας.
<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<τίτλος> Πουλί 1 </title>
<meta charset="UTF-8">
<μετα όνομα="θέαση" περιεχόμενο="πλάτος=πλάτος συσκευής, αρχική κλίμακα=1">
<σύνδεσμος rel="φύλλο στυλ" href="../styles.css" />
</head>
<σώμα>
<div class="δοχείο">
<h1> Καφές </h1>
<Π> Ο καφές είναι ένα γλυκό πουλί που του αρέσει να παίζει! </Π>
</div>
</body>
</html> - Μέσα στο κοντέινερ div, προσθέστε μια ετικέτα εικόνας και χρησιμοποιήστε μια σχετική διεύθυνση URL για να συνδεθείτε με το CuteBird.jpg εικόνα.
<img src="../Images/CuteBird.jpg" alt="Χαριτωμένη φωτογραφία πουλιού" τάξη="mb28" πλάτος="900" ύψος="700"> - Στο index.html αρχείο, αφαιρέστε το υπάρχον περιεχόμενο μέσα στο κοντέινερ div. Αντικαταστήστε το με ένα μονό ένα ετικέτα που χρησιμοποιεί έναν σχετικό σύνδεσμο για να ανοίξει το Bird1.html αρχείο.
<div class="δοχείο">
<h1> Η ιστοσελίδα μου </h1>
<Π> Καλώς ορίσατε στον ιστότοπό μου. </Π>
<a href="Pages/Bird1.html" τάξη="mb28">Πουλί 1: Καφές</ένα>
</div> - Κάνε κλικ στο index.html αρχείο για να το ανοίξετε σε ένα πρόγραμμα περιήγησης και κάντε κλικ στον νέο σύνδεσμο για πλοήγηση Bird1.html.
Τώρα μπορείτε να προσδιορίσετε τη διαφορά μεταξύ απόλυτων και σχετικών διευθύνσεων URL. Τώρα μπορείτε να προσέχετε ιδιαίτερα για να διασφαλίσετε ότι οι πόροι σας ανακτώνται πάντα.
Θα πρέπει επίσης να διασφαλίζετε πάντα ότι όλοι οι σύνδεσμοι στους οποίους μπορούν να έχουν πρόσβαση οι χρήστες σας είναι ασφαλείς.