Πώς να εισαγάγετε εικόνες με HTML

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

Η Ετικέτα <img>

Η HTML χρησιμοποιεί την ετικέτα <img> για την εισαγωγή εικόνας. Αυτή η ετικέτα δεν έχει κλείσιμο και οι εικόνες εισάγονται με την ακόλουθη σύνταξη:

<img src="διεύθυνση_εικόνας" alt="περιγραφή εικόνας">

Τα Στοιχεία της Ετικέτας <img>

1. src (source): Η παράμετρος src δηλώνει τη διαδρομή ή τη διεύθυνση της εικόνας. Μπορεί να είναι είτε απόλυτη διεύθυνση (URL) είτε τοπική διεύθυνση του αρχείου που αποθηκεύεται στον server σας ή στον υπολογιστή σας.
   • Παράδειγμα απόλυτης διεύθυνσης (URL):

     <img src="https://www.example.com/images/photo.jpg" alt="Μια ωραία εικόνα">
     

   • Παράδειγμα τοπικής διεύθυνσης:

     <img src="images/photo.jpg" alt="Μια ωραία εικόνα">
     

2. alt (alternative text): Η παράμετρος alt παρέχει μια εναλλακτική περιγραφή της εικόνας, η οποία εμφανίζεται αν η εικόνα δεν φορτωθεί ή αν ο χρήστης χρησιμοποιεί screen reader για να διαβάσει την ιστοσελίδα. Η περιγραφή πρέπει να είναι σύντομη αλλά περιεκτική.
   • Παράδειγμα:

     <img src="images/photo.jpg" alt="Παιδί που παίζει με μπάλα">
     

3. width και height: Μπορείτε να καθορίσετε τις διαστάσεις της εικόνας με τις παραμέτρους width και height, αν δεν θέλετε να χρησιμοποιηθεί το προεπιλεγμένο μέγεθος της εικόνας.
   • Παράδειγμα:

     <img src="images/photo.jpg" alt="Παιδί που παίζει με μπάλα" width="300" height="200">
     

Άλλες Σημαντικές Παράμετροι

• title: Η παράμετρος title εμφανίζει μια επιπλέον περιγραφή όταν ο χρήστης περνά το ποντίκι πάνω από την εικόνα. Αυτό βοηθά στην καλύτερη κατανόηση του περιεχομένου της εικόνας.
  • Παράδειγμα:

    <img src="images/photo.jpg" alt="Παιδί που παίζει με μπάλα" title="Παιδί που παίζει στη θάλασσα">
    

• align: Η παράμετρος align (αν και παλαιότερης χρήσης) επιτρέπει τη στοίχιση της εικόνας. Μπορεί να τοποθετηθεί αριστερά, δεξιά ή κέντρο, για να προσαρμοστεί με το κείμενο γύρω της.
  • Παράδειγμα:

    <img src="images/photo.jpg" alt="Παιδί που παίζει με μπάλα" align="left">
    

Συμπέρασμα

Η εισαγωγή εικόνας στην HTML είναι απλή και ευέλικτη, επιτρέποντας στους προγραμματιστές να ενσωματώσουν οπτικά στοιχεία σε ιστοσελίδες με εύκολο τρόπο. Με τη σωστή χρήση των παραμέτρων src, alt, width, και height, μπορείτε να βελτιώσετε την εμφάνιση και την προσβασιμότητα της ιστοσελίδας σας.