Εικόνες στην HTML (HTML images)

Εικόνες στην 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>

Leave a Comment

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

11 − 7 =

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.