HTML: img tag

Δημοσιεύτηκε από τον alex


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
     <title>website</title>
</head>

<body>
     <h1>Stories</h1>
     <p>In cultures where demons and witches are perceived as real,
fairy tales may merge into legends, where the narrative is perceived
both by teller and hearers as being grounded in historical truth.
However, unlike legends and epics, they usually do not contain more
than superficial references to religion and actual places, people,
and events; they take place once upon a time rather than in actual times.</p>

</body>
</html>

Θα γράψω λοιπόν την img ετικέτα και θα εισάγω την εικόνα μέσα στην παράγραφο.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <title>website</title>
</head>

<body>
    <h1>Stories</h1>
    <p><img src="fairy-tales.jpg" alt="fairy tales" />In cultures where demons and witches are perceived as real,
fairy tales may merge into legends, where the narrative is perceived
both by teller and hearers as being grounded in historical truth.
However, unlike legends and epics, they usually do not contain more
than superficial references to religion and actual places, people,
and events; they take place once upon a time rather than in actual times.</p>

</body>
</html>

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

Σε περίπτωση που θέλουμε η εικόνα να εμφανιστεί στα αριστερά και το κείμενο να την περικλείσει από τα δεξιά, θα περάσουμε μέσα στην img ετικέτα το attribute align=”left”. Σε περίπτωση που θέλουμε το αντίθετο, θα περάσουμε το align=”right”.

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

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

Leave a Reply

Your email address will not be published.

 
 
 
εκπαιδευτικά βίντεο

Εκπαιδευτικά Βίντεο

Εκπαιδευτείτε μέσα από τα εντελώς δωρεάν βίντεο μας, πάνω σε web τεχνολογίες όπως HTML, CSS, Javascript και PHP.

 
δωρεάν themes

Δωρεάν Themes

Στη Supremo Hosting προσφέρουμε εντελώς δωρεάν premium wordpress themes για τις ανάγκες της ιστοσελίδας σας!

 
κατασκευή ιστοσελίδων

Κατασκευή Ιστοσελίδων

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

cards