Προσθήκη εικόνων στις ιστοσελίδες σας

Να εμφανίζονται οι εικόνες σωστά

Οποιεσδήποτε εικόνες που θέλετε να συνδέσετε στο HTML του ιστοτόπου σας πρέπει πρώτα να μεταφορτωθούν στον ίδιο χώρο που στέλνετε το HTML για την ιστοσελίδα, ανεξάρτητα από το αν ο ιστότοπος φιλοξενείται σε έναν διακομιστή ιστού ο οποίος προσεγγίζετε μέσω FTP ή χρησιμοποιείτε μια υπηρεσία φιλοξενίας ιστού. Εάν χρησιμοποιείτε μια υπηρεσία φιλοξενίας ιστοσελίδων, πιθανόν να χρησιμοποιείτε ένα έντυπο αποστολής που παρέχεται από την υπηρεσία. Αυτά τα έντυπα είναι συνήθως στο τμήμα διαχείρισης του λογαριασμού φιλοξενίας σας.

Η μεταφόρτωση της εικόνας σας στην υπηρεσία φιλοξενίας είναι μόνο το πρώτο βήμα. Στη συνέχεια, πρέπει να προσθέσετε μια ετικέτα στο HTML για να την αναγνωρίσετε.

Μεταφόρτωση εικόνων στον ίδιο κατάλογο με το HTML

Οι φωτογραφίες σας ενδέχεται να βρίσκονται στον ίδιο κατάλογο με το HTML. Εάν συμβαίνει αυτό:

  1. Μεταφορτώστε μια εικόνα στη ρίζα του ιστότοπού σας.
  2. Προσθέστε μια ετικέτα εικόνας στην HTML σας για να δείξετε την εικόνα.
  3. Μεταφορτώστε το αρχείο HTML στη ρίζα του ιστότοπού σας.
  4. Δοκιμάστε το αρχείο ανοίγοντας τη σελίδα στο πρόγραμμα περιήγησης ιστού.

Η ετικέτα εικόνας έχει την ακόλουθη μορφή:

Αν υποθέσουμε ότι ανεβάζετε μια φωτογραφία της σελήνης με το όνομα "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 γράφεται λανθασμένα.

Το πρώτο πράγμα που πρέπει να κάνετε είναι να δείτε αν μπορείτε να βρείτε την εικόνα σας online. Οι περισσότεροι πάροχοι φιλοξενίας έχουν κάποιο είδος εργαλείου διαχείρισης που μπορείτε να χρησιμοποιήσετε για να δείτε πού ανεβάσατε τις εικόνες σας. Αφού νομίζετε ότι έχετε τη σωστή διεύθυνση URL για την εικόνα σας, πληκτρολογήστε την στο πρόγραμμα περιήγησής σας. Εάν εμφανιστεί η εικόνα, τότε έχετε τη σωστή θέση.

Στη συνέχεια, ελέγξτε ότι η HTML σας δείχνει αυτή την εικόνα. Ο ευκολότερος τρόπος για να γίνει αυτό είναι να επικολλήσετε τη διεύθυνση URL εικόνας που μόλις δοκιμάσατε στο χαρακτηριστικό SRC. Επαναφορτώστε τη σελίδα και δοκιμάστε.

Το χαρακτηριστικό SRC της ετικέτας εικόνας σας δεν πρέπει ποτέ να ξεκινά με το C: \ ή το αρχείο: Αυτά θα φαίνονται να λειτουργούν όταν δοκιμάζετε την ιστοσελίδα σας στον υπολογιστή σας, αλλά όλοι όσοι επισκέπτονται τον ιστότοπό σας θα βλέπουν μια σπασμένη εικόνα. Αυτό συμβαίνει επειδή το C: \ δείχνει σε μια θέση στο σκληρό σας δίσκο. Δεδομένου ότι η εικόνα βρίσκεται στη μονάδα σκληρού δίσκου, εμφανίζεται όταν την προβάλετε.