Οι εικόνες μπορούν να βελτιώσουν την εμφάνιση μιας ιστοσελίδας χωρίζοντας το κείμενο και προσθέτοντας οπτικό ενδιαφέρον. Οι εικόνες που είναι ορατές σε μια ιστοσελίδα είναι στην πραγματικότητα σύνδεσμοι προς μια εσωτερική ή απομακρυσμένη εικόνα. Με άλλα λόγια, οι εικόνες είναι ένα άλλο αρχείο, είτε στον ίδιο διακομιστή με την ιστοσελίδα είτε σε έναν απομακρυσμένο διακομιστή. Για να τοποθετήσετε μια εικόνα μέσα σε μια ιστοσελίδα πρέπει να πείτε στο πρόγραμμα περιήγησης πού να ψάξει την εικόνα. Αυτές οι πληροφορίες τοποθετούνται στο ""tag με το χαρακτηριστικό" src ".
Δημιουργία της εικόνας
Εάν η εικόνα σας διατηρείται στον διακομιστή ιστού που φιλοξενεί την ιστοσελίδα σας, μπορείτε απλώς να τοποθετήσετε το όνομα της εικόνας στην ετικέτα όπως: Ωστόσο, εάν η εικόνα σας βρίσκεται σε έναν απομακρυσμένο διακομιστή, πρέπει να τοποθετήσετε έναν σύνδεσμο προς την εικόνα στο η ετικέτα όπως:
Είτε χρησιμοποιείτε τοπική ή απομακρυσμένη εικόνα, υπάρχουν ορισμένα χαρακτηριστικά που μπορείτε να χρησιμοποιήσετε για να ευθυγραμμίσετε την εικόνα σας στη σελίδα. Το χαρακτηριστικό "align" χρησιμοποιείται για την ευθυγράμμιση της εικόνας οριζόντια. Οι τιμές μπορεί να είναι "δεξιά", "αριστερά" ή κέντρο. Για παράδειγμα, για να τοποθετήσετε μια απομακρυσμένη εικόνα στη δεξιά πλευρά της σελίδας, ο κώδικας HTML θα ήταν:
Το χαρακτηριστικό "valign" χρησιμοποιείται για την ευθυγράμμιση της εικόνας κάθετα στην οθόνη. Οι τιμές μπορούν να είναι «κορυφή», «κάτω» και «κέντρο». Για να ευθυγραμμίσετε το παραπάνω παράδειγμα στην επάνω δεξιά πλευρά της οθόνης, ο κωδικός θα ήταν:
Ένα άλλο χαρακτηριστικό είναι το χαρακτηριστικό "alt". Αυτό χρησιμοποιείται για την τοποθέτηση κειμένου στο σημείο όπου πρέπει να είναι η εικόνα εάν ο επισκέπτης χρησιμοποιεί πρόγραμμα περιήγησης ιστού που βασίζεται σε κείμενο ή εάν ο σύνδεσμος προς την εικόνα είναι κατεστραμμένος. Το χαρακτηριστικό "alt" χρησιμοποιείται με τον ακόλουθο τρόπο:
Τέλος, μπορείτε να κάνετε την εικόνα σας να γίνει υπερσύνδεσμος προσθέτοντας την ετικέτα "". Αυτό επιτρέπει στους επισκέπτες να κάνουν κλικ στην εικόνα για να μεταφερθούν σε μια απομακρυσμένη σελίδα ή στην ίδια τη φωτογραφία. Ο κώδικας HTML για τη δημιουργία εικόνας με υπερσύνδεσμο είναι:
