Με τις ετικέτες αυτές θα μπορείτε να εμφανίζεται μία εικόνα μέσα στο κείμενο μιας ιστοσελίδας.
Ο κώδικας για αυτό τον σκοπό, είναι ο εξής:
<img src="filename.gif">
όπου filename.gif είναι το όνομα της εικόνας, η οποία βρίσκεται μέσα στον υποκατάλογο του HTML αρχείου.
Προσέξτε πως το κείμενο ακολουθεί αμέσως μετα την εικόνα. Τι γίνεται αν θέλουμε το κείμενο να είναι σε άλλη γραμμή απο την εικόνα; Για να γίνει αυτό
απλά εισάγετε μία ετικέτα παραγράφου πριν την ετικέτα της εικόνας:
<p> <img src="filename.gif">
Με την ιδιότητα της <img...> ετικέτας, μπορείτε επίσης να ρυθμίσετε πώς θα συνεχίσει το κείμενο που ακολουθεί, μετά την εικόνα. Η ιδιότητα της ευθυγράμμισης (align), εισάγεται με την <img> ετικέτα, και παράγει το ακόλουθο αποτέλεσμα:
 |
| is for Maricopa Community Colleges located in the Valley
of the Sun, metropolitan Phoenix, Arizona. Our license plates say that
we are the Grand Canyon State... |
|
| is for Maricopa Community Colleges located
in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license
plates say that we are the Grand Canyon State... |
|
| is for Maricopa Community Colleges located
in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license
plates say that we are the Grand Canyon State... |
Προσέξτε πώς το κείμενο ευθυγραμμίζεται με την εικόνα, μόνο για μία γραμμή. Στα επόμενα μαθήματα θα δούμε τον τρόπο ευθυγράμμισης ενός μπλόκ από κείμενο αλλά και άλλες λειτουργίες. Με την HTML 2.0, δεν υπάρχει αυτή η δυνατότητα των μπλόκ.
Σημείωση: Εάν δεν έχετε το κείμενο απο το προηγούμενο μάθημα, μπορείτε να το κατεβάσετε απο εδώ. Θα χρειαστεί επίσης και η GIF εικόνα από το μάθημα 8.
Σε αυτή την άσκηση, θα
προσπαθήσετε να προσθέσετε μία εικόνα από ένα
ηφαίστειο. Ακολουθήστε τα παρακάτω βήματα:
Ξανανοίξτε τον χώρο
εργασία σας, εάν δεν το έχετε κάνει.
Πηγαίνετε στο παράθυρο του
text editor.
Ανοίξτε το HTML αρχείο, volc.html.
Ανάμεσα στην <h1>Volcano
Web</h1> επικεφαλίδα, βάλτε τα εξής:
<img src="lava.gif">
Η εικόνα που κατεβάσατε από το προηγούμενο μάθημα, (lava.gif) θα εμφανιστεί στην κορυφή της σελίδας σας.
Θα αναρωτιέστε γιατί δεν βάλαμε την ετικέτα <p> μετά την εικόνα. Αυτό συμβαίνει γιατί ακολουθεί επικεφαλίδα. Ο web browser πάντα εισάγει μία παράγραφο τέλους πριν και μετά τις <h1,h2,h3...> ετικέτες.
Εάν τις ιστοσελίδες σας θα τις δούν χρήστες που χρησιμοποιούν έναν browser κειμένου (όπως ο lynx), δεν θα μπορούν να δούν τις εικόνες μέσα στο κείμενο, ή καμιά φορά οι χρήστες δεν κατεβάζουν τις εικόνες μέσα στο κείμενο, για να σώσουν χρόνο. Το χαρακτηριστικό της <img ...> ετικέτας, είναι ότι αφήνει ένα string κειμένου που κρατάει τη θέση της εικόνας.
Μετά από αυτά, οι χρήστες με browser κειμένου θα δούν τα παρακάτω:
|
[IMAGE] Volcano Web In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. ----------------------------------------------------------------- In this Lesson... |
Αυτό δίνει την δυνατότητα στον χρήστη να ξέρει, ότι στην κορυφή της σελίδας υπάρχει ένα γραφικό. Θα μπορούσατε μέσα στο string κειμένου που εμφανίζεται, να βάλετε ένα κείμενο και να εμφανιστεί. Για παράδειγμα, προσθέστε:
<img alt="A Lesson on:" src="lava.gif">
Το alt="..." χαρακτηριστικό αντικαθιστά τη θέση της εικόνας με το κείμενο. Τώρα θα εμφανιστεί η σελίδα έτσι:
|
A Lesson On Volcano Web In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. ----------------------------------------------------------------- In this Lesson... |
Κάτι άλλο που θα πρέπει να συμπεριλαμβάνουμε στην <img...> ετικέτα, είναι οι δύο ιδιότητες που δίνουν την διάσταση της εικόνας σε pixels
Η μορφή του κώδικα είναι η εξής:
<img src="filename.gif" width=X height=Y >
όπου X είναι το πλάτος και όπου Y είναι το ύψος της εικόνας.
Για το παράδειγμα του μαθήματος, η εικόνα lava.gif είναι 300 pixels πλάτος και 259 pixels ύψος. Θα πρέπει να πληκτρολογήσεις στο κώδικα της σελίδας volc.html τα εξής:
<img alt="A Lesson on:" src="lava.gif" width=300 height=259>
Σημείωση: Η σειρά ύψους και πλάτους δεν έχει σημασία.
Συχνά αναρωτιώμαστε εάν μπορούμε να αλλάξουμε το μέγεθος της εικόνας από τις δύο ιδιότητες. Η απάντηση είναι ΝΑΙ αλλά το αποτέλεσμα μπορεί να είναι δυσάρεστο. Δείτε και το παράδειγμα απο το μικρότερο στο μεγαλύτερο.
Μπορείτε επίσης να καθορίσετε το μέγεθος της εικόνας στο κείμενο, μέσα από τις ποσοστιαίες διαστάσεις του παράθυρου του browser, έτσι η εικόνα θα αλλάζει μέγεθος από μόνη της, εάν ο χρήστης μεγαλώνει ή μικραίνει το μέγεθος του παράθυρου του browser. Κοιτάξτε και το παράδειγμα της ποσοστιαίας αλλαγής. Αυτό μπορεί να μην λειτουργεί σε όλους τους web browsers.