Εικόνες στην HTML
Για να χρησιμοποιήσουμε εικόνες στην HTML και να τις τοποθετήσουμε στην ιστοσελίδα μας, πρέπει να χρησιμοποιήσουμε την ετικέτα <img>. Η συγκεκριμένη ετικέτα δε χρειάζεται ετικέτα για “κλείσιμο”.
Σημαντικές ιδιότητες για τις εικόνες στην HTML
Ιδιότητα src
Απαραίτητη είναι η ιδιότητα src με την οποία ορίζουμε το path (μονοπάτι) για το φάκελο στον οποίο βρίσκεται η εικόνα.
Όταν η εικόνα βρίσκεται στον ίδιο φάκελο με το αρχείο της HTML τότε γράφουμε τα εξής:
Παράδειγμα
<img src="MyPicture.jpg">
Όταν η εικόνα βρίσκεται σε άλλο φάκελο από το αρχείο της HTML τότε γράφουμε τα εξής:
Παράδειγμα
<img src="Files/images/MyPicture.jpg">
Όταν η εικόνα βρίσκεται σε άλλο server από το αρχείο της HTML τότε γράφουμε τα εξής:
Παράδειγμα
<img src="http://www.Mypage.gr/images/MyPicture.jpg">
Ιδιότητα alt
Απαραίτητη θεωρείται η ιδιότητα alt. Η συγκεκριμένη ιδιότητα περιέχει ένα τίτλο. Ο τίτλος αυτός περιγράφει την εικόνα μας, στην περίπτωση που αυτή, για οποιοδήποτε λόγο, δε φορτώσει στο πρόγραμμα περιήγησης (browser) του χρήστη.
Παράδειγμα
<img src="CompanyPicture.jpg" alt="CompanyLogo>
Ιδιότητες width, height
Μπορούμε να αλλάξουμε μέγεθος στη εικόνα μας χρησιμοποιώντας τις ιδιότητες width (πλάτος) και heihgt (ύψος). Οι τιμές που δίνουμε στις ιδιότητες αυτές είναι σε pixels ή σε ποσοστό (%).
Παράδειγμα
<img src="MyPicture.jpg" alt="My Icon" width="128px" height="128px">
Ιδιότητα float
Επίσης μπορούμε να ορίσουμε, αν θέλουμε να είναι η εικόνα μας στα δεξιά ή στα αριστερά της ιστοσελίδας μας χρησιμοποιώντας την ιδιότητα float.
Παράδειγμα
<img src="MyPicture.jpg" alt="My Icon" width="128px" height="128px" float="left">
Ιδιότητα border
Άλλη μία ιδιότητα που μπορούμε να χρησιμοποιήσουμε για τις εικόνες είναι η border. Με αυτή την ιδιότητα βάζουμε περίγραμμα στην εικόνα μας.
Παράδειγμα
<img src="MyPicture.jpg" alt="My Icon" width="128px" height="128px" float="left" border="2">
Ιδιότητα link
Μπορούμε επίσης να ορίσουμε την εικόνα μας ως link. Απλά τοποθετούμε την ετικέτα <img> εντός των ετικετών <a> </a> και ορίζουμε στην ιδιότητα href το path (μονοπάτι) της ιστοσελίδας στην οποία θέλουμε να παραπέμψουμε το χρήστη.
Παράδειγμα
<a href="MyPage"> <img src="MyPicture.jpg" alt="My Icon" width="128px" height="128px" float="left" border="2"> </a>