Τυχόν εικόνες που θέλετε να συνδέσετε στον ιστότοπό σας HTML θα πρέπει πρώτα να μεταφορτωθεί στο ίδιο μέρος που στέλνετε το HTML για την ιστοσελίδα, είτε ο ιστότοπος φιλοξενείται σε έναν διακομιστή ιστού στον οποίο προσεγγίζετε FTP ή χρησιμοποιείτε μια υπηρεσία φιλοξενίας ιστού. Εάν χρησιμοποιείτε μια υπηρεσία φιλοξενίας ιστού, πιθανότατα χρησιμοποιείτε μια φόρμα μεταφόρτωσης που παρέχεται από την υπηρεσία. Αυτές οι φόρμες βρίσκονται συνήθως στην ενότητα διαχείρισης του λογαριασμού φιλοξενίας σας.
Η αποστολή της εικόνας σας στην υπηρεσία φιλοξενίας είναι μόνο το πρώτο βήμα. Στη συνέχεια, πρέπει να προσθέσετε μια ετικέτα στο HTML για να την αναγνωρίσετε.
Μεταφόρτωση εικόνων στον ίδιο κατάλογο με τον HTML
Οι φωτογραφίες σας ενδέχεται να βρίσκονται στον ίδιο κατάλογο με τον HTML. Εάν συμβαίνει αυτό:
- Ανεβάστε μια εικόνα στη ρίζα του ιστότοπού σας.
- Προσθέστε μια ετικέτα εικόνας στο HTML σας για να δείξετε την εικόνα.
- Ανεβάστε το αρχείο HTML στη ρίζα του ιστότοπού σας.
- Δοκιμάστε το αρχείο ανοίγοντας τη σελίδα στο πρόγραμμα περιήγησης ιστού.
Η ετικέτα εικόνας έχει την ακόλουθη μορφή:
Υποθέτοντας ότι ανεβάζετε μια φωτογραφία του φεγγαριού με το όνομα "lunar.jpg", η ετικέτα εικόνας έχει την ακόλουθη μορφή:
Το ύψος και το πλάτος είναι προαιρετικά αλλά συνιστώνται. Αυτές οι προεπιλεγμένες τιμές είναι σε εικονοστοιχεία, αλλά μπορούν επίσης να εκφραστούν ως ποσοστά:
Η ετικέτα εικόνας δεν απαιτεί ετικέτα κλεισίματος.
Εάν συνδέεστε σε μια εικόνα σε άλλο έγγραφο, χρησιμοποιήστε ετικέτες αγκύρωσης και τοποθετήστε την ετικέτα εικόνας μέσα.
Μεταφόρτωση εικόνων σε έναν υποκατάλογο
Είναι πιο συνηθισμένο να αποθηκεύετε εικόνες σε έναν υποκατάλογο, που συνήθως ονομάζεται Εικόνες. Για να δείξετε εικόνες σε αυτόν τον κατάλογο, πρέπει να γνωρίζετε πού βρίσκεται σε σχέση με τη ρίζα του ιστότοπού σας.
Η ρίζα του ιστότοπού σας είναι όπου εμφανίζεται η διεύθυνση URL, χωρίς καταλόγους στο τέλος. Για παράδειγμα, για έναν ιστότοπο που ονομάζεται "MyWebpage.com", η ρίζα ακολουθεί αυτήν τη φόρμα: http://MyWebpage.com/. Παρατηρήστε την κάθετο στο τέλος. Έτσι υποδεικνύεται συνήθως η ρίζα ενός καταλόγου. Οι υποκατάλογοι περιλαμβάνουν αυτήν την κάθετο για να δείξουν πού βρίσκονται στη δομή καταλόγου. Ο ιστότοπος παραδείγματος MyWebpage μπορεί να έχει τη δομή:
http://MyWebpage.com/ - τον ριζικό κατάλογο
http://MyWebpage.com/products/ - τον κατάλογο προϊόντων
http://MyWebpage.com/products/documentation/ - τον κατάλογο τεκμηρίωσης στον κατάλογο προϊόντων
http://MyWebpage.com/images/ - τον κατάλογο εικόνων
Σε αυτήν την περίπτωση, όταν επισημαίνετε την εικόνα σας στον κατάλογο εικόνων, γράφετε:
Αυτό ονομάζεται το απόλυτο μονοπάτι στην εικόνα σας.
Συνηθισμένα προβλήματα με εικόνες που δεν εμφανίζονται
Η εμφάνιση εικόνων στην ιστοσελίδα σας μπορεί να είναι δύσκολη στην αρχή. Οι δύο πιο συνηθισμένοι λόγοι είναι ότι η εικόνα δεν μεταφορτώθηκε όπου το HTML δείχνει, ή το HTML είναι λανθασμένη.
Το πρώτο πράγμα που πρέπει να κάνετε είναι να δείτε αν μπορείτε να βρείτε την εικόνα σας στο διαδίκτυο. Οι περισσότεροι πάροχοι φιλοξενίας διαθέτουν κάποιο είδος εργαλείου διαχείρισης που μπορείτε να χρησιμοποιήσετε για να δείτε πού ανεβάσατε τις εικόνες σας. Αφού νομίζετε ότι έχετε τη σωστή διεύθυνση URL για την εικόνα σας, πληκτρολογήστε τη στο πρόγραμμα περιήγησής σας. Εάν η εικόνα εμφανίζεται, τότε έχετε τη σωστή θέση.
Στη συνέχεια, ελέγξτε ότι το HTML σας δείχνει σε αυτήν την εικόνα. Ο ευκολότερος τρόπος για να γίνει αυτό είναι να επικολλήσετε το διεύθυνση URL εικόνας που μόλις δοκιμάσατε στο χαρακτηριστικό SRC. Ανεβάστε ξανά τη σελίδα και δοκιμάστε.
Το χαρακτηριστικό SRC της ετικέτας εικόνας σας δεν πρέπει ποτέ να ξεκινά με ΝΤΟ:\ ή αρχείο: Αυτά φαίνεται να λειτουργούν όταν δοκιμάζετε την ιστοσελίδα σας στον υπολογιστή σας, αλλά όποιος επισκέπτεται τον ιστότοπό σας θα βλέπει μια κατεστραμμένη εικόνα. Αυτό συμβαίνει επειδή το C: \ δείχνει μια τοποθεσία στο τα δικα σου σκληρός δίσκος. Δεδομένου ότι η εικόνα βρίσκεται στον σκληρό σας δίσκο, εμφανίζεται όταν την βλέπετε, αλλά δεν ισχύει για κανέναν άλλο.