Μάθημα : Α' Λυκείου | Εφαρμογές Πληροφορικής -

Μέχρι τώρα το περιεχόμενο των σελίδων μας ήταν κείμενο αποκλειστικά. Στην ενότητα αυτή θα το εμπλουτίσουμε με εικόνες. Οι εικόνες είναι ξεχωριστά αρχεία και δεν ενσωματώνονται απ' ευθείας στη σελίδα. Για την ακρίβεια με το <img> δημιουργούμε έναν σύνδεσμο μεταξύ της ιστοσελίδας και του αρχείου της εικόνας. Για το λόγο αυτό, αν μεταφέρουμε μια σελίδα σε άλλο φάκελο,αποθηκευτικό μέσο ή συσκευή, θα πρέπει να μεταφερθούν μάζι και οι εικόνες, διατηρώντας το ίδιο relative path που αναφέραμε στην προηγούμενη ενότητα. 

<img>

...είναι η ετικέτα που εισάγει τις εικόνες στην ιστοσελίδα μας. Είναι κενό στοιχείο (empty element) όπως το <hr> που δεν έχει περιεχόμενο. Η σύνδεση με την εικόνα γίνεται με το attribute src (source - πήγη της εικόνας) και σαν τιμή βάζουμε το path (ή το url όπως θα δούμε αργότερα) για τη εικόνα. Συνεχίζοντας τα παραδείγματα από την προγούμενη ενότητα:

<img src="./images/myPic.jpg " alt="Μία τυχαία εικόνα">

Το δεύτερο attribute που έχει στο παράδειγμα είναι το alt (alternative - εναλλακτικό) στο οποίο σαν τιμή βάζουμε το κείμενο που θέλουμε να εμφανιστεί αν κάτι πάει στραβά και η εικόνα δε φορτωθεί στη σελίδα.

Στην περίπτωση που θέλουμε να χρησιμοποιήσουμε μια εξωτερική εικόνα (από άλλο website) τότε στην τιμή που θα αποδώσουμε στο src πρέπει να βάλουμε τη διεύθυνση της εικόνας στον παγκόσμιο ιστό (url) αντί για το relative path. 

Παράδειγμα:

<img src="https://www.news247.gr/wp-content/uploads/2026/01/AP934418122112-640x320.jpg" alt="Flamingo">

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

Ανάλυση, διαστάσεις και προσανατολισμός εικόνων. 

Το σχήμα μιας ψηφιακής εικόνας είναι πάντα ορθογόνιο παραλληλόγραμμο και οι διαστάσεις του δίνονται από το γινόμενο πλάτος x ύψος (width x height) και συνήθως τις μετράμε σε pixels. 

Το γινόμενο αυτό μας αποκαλύπτει:

• την ανάλυση της εικόνας. Ο κανόνας είναι ότι όσο υψηλότερη είναι η ανάλυση, τόσο μεγαλύτερη είναι και η ευκρίνεια της εικόνας (φαίνεται δηλαδή πιο καθαρά). Έτσι μια εικόνα με ανάλυση 200x300 θα είναι πολύ χαμηλότερης ποιότητας από μία 2000x3000.
• την αναλογία των πλευρών και τον προσανατολισμό της εικόνας. Οι δύο εικόνες με ανάλυση 200x300 και 2000x3000, μπορεί να είναι διαφορετικές σε ποιότητα, έχουν ωστόσο την ίδια αναλογία πλευρών (2 προς 3). Θα μπορούσε η μία να είναι σμίκρυνση της άλλης. Επίσης καταλαβαίνουμε αν η εικόνα έχει:

προσανατολισμό πορτραίτου (μικρότερο πλάτος από ύψος), είναι δηλαδή "όρθια". διαστάσεις: 307x408

προσανατολισμό τοπίου (μεγαλύτερο πλάτος από ύψος), είναι δηλαδή "ξαπλωτή". 

 διαστάσεις: 408x307

τετράγωνη εικόνα (πλάτος = ύψος)

διαστάσεις: 307x307 (πραγματική ανάλυση: 2808x2808)

Τα attributes width και height

Το <img> διαθέτει τα δύο αυτά attributes για να καθορίσουμε σε ποιο μέγεθος θα εμφανιστεί η εικόνα πάνω στη σελίδα, ανεξάρτητα από την ανάλυσή της (πραγματικές διαστάσεις).

Αν δεν ορίσουμε τα width και height η εικόνα θα εμφανιστεί στις πραγματικές διαστάσεις της.

<img src="./images/swing1.jpg" alt ="Κούνια στο βουνό"> 

διαστάσεις: 728x533

Αν ορίσουμε τις διαστάσεις του ενός από τα δύο attributes (μόνο του width ή μόνο του height) τότε ο browser θα προσαρμόσει αναλογικά και την άλλη διάσταση έτσι ώστε η αναλογία των πλευρών να παραμείνει ίδια και να μην αλλοιωθεί η εικόνα. 

<img src="images/swing1.jpg" alt ="Κούνια στο βουνό" width="314px">

Αν όμως δεν μας πειράζει να αλλοιωθεί η εικόνα, μπορούμε να ορίσουμε και τα δύο attributes αδιαφορώντας για την διατήρηση της αναλογίας των πλευρών. 

<img src="images\swing1.jpg" alt ="Κούνια στο βουνό" width="314px" height="314px">

Δοκιμάστε να αλλάξετε τις διαστάσεις της εικόνας στο w3schools!

Παρατηρήστε τους διαφορετικούς τρόπους που μπορούμε να χρησιμοποιήσουμε για το relative path μιας εικόνας στον υποφάκελο images. Συνήθως λειτουργούν όλοι (ακόμα κι αυτός με το backslash '\' αντί για slash '/'). Προτιμότερος όμως είναι ο πρώτος (με τελεία και /)  ./images/swing1.jpg Η τελεία μπροστά είναι απαραίτητη!