Περιεχόμενο

• Βήματα
• Συμβουλές
• Προειδοποιήσεις

Η προσθήκη εικόνων σε έναν ιστότοπο ή ένα προφίλ κοινωνικών μέσων είναι ένας εξαιρετικός τρόπος βελτίωσης της οπτικής πλευράς της σελίδας. Ο κώδικας HTML (Hypertext Markup Language) για την προσθήκη εικόνων είναι αρκετά απλός και είναι συνήθως ο πρώτος που μαθαίνεται από έναν μαθητή HTML.

Βήματα

Μέρος 1 από 2: Εισαγωγή της εικόνας

1. 

   Στείλτε την εικόνα. Επί του παρόντος, υπάρχουν πολλές δωρεάν υπηρεσίες φιλοξενίας εικόνων, όπως Λευκώματα Ιστού Picasa, Imgur, Flickr ή Photobucket. Διαβάστε προσεκτικά τους όρους χρήσης του καθενός. Ορισμένες από αυτές τις υπηρεσίες μπορούν να μειώσουν την ποιότητα της εικόνας που αποστέλλεται ή να την αφαιρέσει αφού φτάσει σε συγκεκριμένο αριθμό προβολών (αυτό συμβαίνει επειδή οι εικόνες καταλαμβάνουν χώρο στους διακομιστές αυτών των εταιρειών).
   • Ορισμένες από τις υπηρεσίες φιλοξενίας ιστολογίου επιτρέπουν στον χρήστη να ανεβάζει εικόνες χρησιμοποιώντας τα δικά του εργαλεία διαχείρισης ιστολογίου.
   • Εάν είστε συνδρομητής σε μια υπηρεσία φιλοξενίας επί πληρωμή, ανεβάστε τις εικόνες στον δικό σας ιστότοπο χρησιμοποιώντας μια υπηρεσία FTP (File Transfer Protocol). Συνιστάται να δημιουργήσετε έναν κατάλογο "εικόνες" για να διατηρήσετε τα αρχεία σας οργανωμένα.
   • Εάν θέλετε να χρησιμοποιήσετε μια εικόνα από άλλον ιστότοπο, ζητήστε την άδεια του δημιουργού. Εάν η παραγγελία έχει γίνει, κατεβάστε και ανεβάστε την εικόνα σε έναν ιστότοπο φιλοξενίας εικόνων.

2. 

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

3. 

   
   
   Ξεκινήστε με την ετικέτα IMG. Βρείτε τη θέση στο σώμα του αρχείου HTML όπου θέλετε να εισαγάγετε μια εικόνα. Γράψτε την ετικέτα . Αυτή είναι μια κενή ετικέτα, δηλαδή δεν έχει ετικέτα κλεισίματος. Όλα όσα χρειάζονται για να εμφανιστεί μια εικόνα πρέπει να μπαίνουν μέσα στα δύο αγκύλες.

4. 

   
   
   Βρείτε τη διεύθυνση URL για την εικόνα σας. Επισκεφτείτε τον ιστότοπο όπου φιλοξενήσατε την εικόνα. Κάντε δεξί κλικ στην εικόνα (στο Mac, κρατήστε πατημένο το πλήκτρο ελέγχου και κάντε κλικ με το ποντίκι) και επιλέξτε "Αντιγραφή διεύθυνσης εικόνας". Αν προτιμάτε, κάντε κλικ στο "Προβολή εικόνας" για να το ανοίξετε μόνο του σε μια σελίδα και αντιγράψτε τη διεύθυνση URL στη γραμμή διευθύνσεων.
   • Εάν έχετε ανεβάσει την εικόνα στον κατάλογο εικόνων στον δικό σας ιστότοπο, συνδέστε την ως εξής / εικόνες /ονοματεπώνυμο εδώ. Εάν δεν λειτουργεί, ο κατάλογος εικόνων είναι πιθανό να βρίσκεται σε άλλο φάκελο. Μετακινήστε τον στον ριζικό κατάλογο.

5. 

   Τοποθετήστε τη διεύθυνση URL στο χαρακτηριστικό SRC. Ίσως γνωρίζετε ήδη ότι τα χαρακτηριστικά HTML τοποθετούνται μέσα σε ετικέτες για να τα τροποποιήσετε. Το χαρακτηριστικό SRC σημαίνει "πηγή", και αυτός είναι που λέει στο πρόγραμμα περιήγησης πού να ψάξει για να βρει την εικόνα. Πληκτρολογήστε src = "" και επικολλήστε τη διεύθυνση URL της εικόνας μέσα στα εισαγωγικά. Ακολουθεί ένα παράδειγμα:
   • 

6. 

   Προσθέστε ένα χαρακτηριστικό ALT. Από τεχνική άποψη, το HTML διαθέτει όλα όσα χρειάζεστε για να εμφανίσετε μια εικόνα. Ωστόσο, είναι καλύτερο να προσθέσετε το χαρακτηριστικό alt επίσης. Λέει στο πρόγραμμα περιήγησης στο Διαδίκτυο το κείμενο που θα εμφανίζεται όταν δεν είναι δυνατή η φόρτωση της εικόνας. Το πιο σημαντικό, βοηθά τις μηχανές αναζήτησης να ανακαλύψουν περίπου το περιεχόμενο της εικόνας σας, επιτρέποντας στους αναγνώστες οθόνης να περιγράψουν την εικόνα σε επισκέπτες με προβλήματα όρασης. Ακολουθήστε το παρακάτω παράδειγμα και αλλάξτε το κείμενο μέσα στα εισαγωγικά:
   • 
   • Εάν η εικόνα δεν είναι σημαντική για το περιεχόμενο της σελίδας, προσθέστε το χαρακτηριστικό ALT χωρίς κείμενο μέσα σε αυτό (alt = "").

7. 

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

Μέρος 2 από 2: Προαιρετικές ρυθμίσεις

1. 

   Αλλάξτε το μέγεθος της εικόνας. Για καλύτερα αποτελέσματα, απλώς χρησιμοποιήστε λογισμικό επεξεργασίας εικόνας για να αλλάξετε το μέγεθός τους και, στη συνέχεια, ανεβάστε τη νέα έκδοση. Ορίστε τα χαρακτηριστικά πλάτος (πλάτος) και ύψος (ύψος) του HTML έτσι ώστε το πρόγραμμα περιήγησης να συρρικνώνει ή να μεγεθύνει την εικόνα, η οποία μπορεί να είναι ασυνεπής σε πολλά προγράμματα περιήγησης στο Διαδίκτυο και ακόμη και να προκαλεί σφάλματα εμφάνισης (σπάνια). Εάν θέλετε να κάνετε μια γρήγορη και λειτουργική προσαρμογή, χρησιμοποιήστε την ακόλουθη μορφή:
   • (Αριθμός pixel ή "pixel CSS", σε HTML5.)
   • Ή (Ποσοστό του μεγέθους της ιστοσελίδας ή της εικόνας.)
   • Εάν εισαγάγετε μόνο ένα από τα δύο χαρακτηριστικά (πλάτος ή ύψος), το πρόγραμμα περιήγησης πρέπει να διατηρήσει την αναλογία πλάτους: ύψος.

2. 

   Προσθέστε μια συμβουλή εργαλείου. Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό τίτλος (τίτλος) για να προσθέσετε ένα επιπλέον σχόλιο ή κάποιες πληροφορίες σχετικά με την εικόνα. Για παράδειγμα, μπορείτε να το χρησιμοποιήσετε για να πιστώσετε τον συντάκτη της φωτογραφίας. Αυτό το κείμενο εμφανίζεται συνήθως κάθε φορά που ένας επισκέπτης αιωρείται πάνω από την εικόνα.
   • 

3. 

   Δημιουργήστε έναν σύνδεσμο στην εικόνα. Για να κάνετε την εικόνα επίσης σύνδεσμο, εισαγάγετε τον κωδικό εικόνας μέσα στην ετικέτα συνδέσμου . Ακολουθεί ένα παράδειγμα:

Συμβουλές

• Μην ξεχάσετε να συμπεριλάβετε την επέκταση εικόνας (.webp, .gif κ.λπ.) στη διεύθυνση URL.
• Οι εικόνες GIF λειτουργούν καλά για λογότυπα ή κινούμενα σχέδια. Οι εικόνες JPEG λειτουργούν καλά για σύνθετες εικόνες, όπως φωτογραφίες.
• Στις περισσότερες περιπτώσεις, συνιστάται να χρησιμοποιείτε εικόνες με τις μορφές.gif, .jpeg, .webp ή.png. Άλλες μορφές δεν είναι πιθανό να εμφανίζονται σωστά σε όλα τα προγράμματα περιήγησης.
• Κρατήστε ένα αντίγραφο ασφαλείας της εικόνας στον υπολογιστή σας, για κάθε περίπτωση.

Προειδοποιήσεις

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