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

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

Απάντηση

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