HTML: img tag

HTML: img tag



Πηγή: supremohosting.com
Με την img ετικέτα, μπορούμε να εισάγουμε μία εικόνα μέσα στο html έγγραφο μας. Όπως βλέπετε έχω μία παράγραφο με κείμενο και θέλω στα αριστερά να τοποθετήσω μία εικόνα. Θα γράψω λοιπόν την img ετικέτα και θα εισάγω την ετικέτα.

Όπως βλέπετε, έχω γράψει το πλήρες όνομα της εικόνας που έχω μέσα στον ίδιο φάκελο με το index.html και έχω γράψει και την κατάληξη της εικόνας. Μέσα στην εικόνα, έχω περάσει το χαρακτηριστικό alt, το οποίο το βάζουμε για να περιγράψουμε για το τι πρόκειται η εικόνα.

Βλέπουμε λοιπόν τώρα, ότι το κείμενο και η εικόνα είναι σε αυτή τη μορφή, αλλά αυτό που θέλουμε είναι το κείμενο να περικλείει κατά κάποιο τρόπο την εικόνα. Για να το κάνουμε αυτό, θα προσθέσουμε ένα χαρακτηριστικό μέσα στην ετικέτα της εικόνας. Το συγκεκριμένο χαρακτηριστικό είναι το align=”left”.

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

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

Για να το επιτύχουμε αυτό, θα περάσουμε ένα χαρακτηριστικό μέσα στην ετικέτα br, το clear=”left” και θα δούμε ότι τώρα η πρόταση μας μεταφέρεται κάτω από την εικόνα. Αν ήταν στη δεξιά πλευρά, τότε θα βάζαμε το clear right, ενώ αν είχαμε διάφορες εικόνες με align left και right, τότε απλά θα προσθέταμε το clear all.