Εκμάθηση HTML/Εικόνες

Προηγούμενη Ενότητα	Περιεχόμενα	Επόμενη Ενότητα

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

Εισαγωγή εικόνας

Η εικόνα που θα χρησιμοποιηθεί.

Το tag για εικόνες είναι το <img>, το οποίο δεν έχει tag κλεισίματος. Αυτό βέβαια από μόνο του δεν κάνει τίποτα, αλλά χρειάζεται μερικές παραμέτρους, η βασικότερη εκ των οποίων είναι η src (source). Στο παράδειγμα θα χρησιμοποιήσουμε μια εικόνα με το όνομα Torchlight_folder_html.png. Είναι αυτή στα δεξιά και μπορείτε να αποθηκεύσετε στον υπολογιστή σας για να δοκιμάσετε τον κώδικα και το πως θα εμφανίζεται.

Ο παρακάτω κώδικας εμφανίζει μια εικόνα που βρίσκεται στην σελιδα που δηλώνει το src.

<img src="http://upload.wikimedia.org/wikipedia/commons/c/cc/Torchlight_folder_html.png">

Φυσικά αν έχετε την εικόνα αποθηκευμένη στον υπολογιστή σας μπορείτε να παρεπέμψετε την html να την βρει από εκεί. Αν για παράδειγμα βρίσκεται στον φάκελο ./images θα γράψουμε στον κώδικα.

<html>
<body>
<img src="./images/Torchlight_folder_html.png">
</body>
</html>

Ο συμβολισμός './' είναι ο φάκελος που βρίσκεται η σελίδα. Έτσι δεν δίνουμε το πλήρες path της εικόνας, το οποίο μπορεί και να αλλάξει.

Παράμετρος alt

Εάν ο φυλλομετρητής για κάποιο λόγο δεν μπορεί να εμφανίσει την εικόνα (πχ. εάν δεν υποστηρίζει εικόνες, ή για κάποιο λόγο η εικόνα δεν υπάρχει πια εκεί που της υποδεικνύει η html) τότε η παράμετρος alt (alternate), δείχνει στον χρήστη ένα εναλλακτικό κείμενο. Αυτό μπορεί να υποδεικνύει μια περιγραφή της εικόνας ούτως ώστε ο επισκέπτης να πάρει μια ιδέα του τι δεν βλέπει.

<html>
<body>
<img src="./images/To_folder_html.png" alt="Αρχείο:Ένας φάκελος με την περιγραφή html">
</body>
</html>

Για να το δοκιμάσετε απλά κάντε ένα εσκεμμένο λάθος στην παράμετρο src.

Εικόνες για φόντο

Έχετε την δυνατότητα αντί για το άσπρο ή με κάποιο άλλο χρώμα φόντο να βάλετε μια εικόνα. Αυτό γίνεται με την παράμετρο background στην <body>.

<html>
<body background="./images/Torchlight_folder_html.png">
</html>

Θα πρέπει να προσέξετε πως από προεπιλογή εάν η εικόνα είναι μικρότερη της οθόνης του επισκέπτη τότε θα επαναλαμβάνεται. Για αυτό προτιμάται ως φόντο να μπαίνει κάποια υφή (π.χ. τούβλα) που δεν υπάρχει πρόβλημα αν επαναλαμβάνεται.

Άλλες παράμετροι

Υπάρχουν ακόμα πάρα πολλοί τρόποι τοποθέτησης μιας εικόνας σε μια ιστοσελίδα.

Παράμετροι align/width/height

Με την align επιλέγουμε την θέση της εικόνας στο κείμενο. Αναλόγως οι width και height, προσαρμόζουν την εικόνα σε pixel. Το παρακάτω παράδειγμα θα την εμφανίσει σε μέγεθος 48x48 pixel.

<html>
<body>
<p>-----<img src="./images/Torchlight_folder_html.png" align="bottom" width="48" height="48">-----</p>
<p>-----<img src="./images/Torchlight_folder_html.png" align="middle" width="48" height="48">-----</p>
<p>-----<img src="./images/Torchlight_folder_html.png" align="top" width="48" height="48">-----</p>
</body>
</html>

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

Παράλληλα μπορείτε να τοποθετήσετε την εικόνα δεξιά και αριστερά.

<p>
<img src ="./images/Torchlight_folder_html.png"
align ="left" width="48" height="48"> 
Μια παράγραφος με μια εικόνα στα αριστερά. Για να εμφανιστεί σωστά καλύτερα προσθέστε 
αρκετό κείμενο για να το δείτε πως θα εμφανίζεται.
</p>
<p>
<img src ="./images/Torchlight_folder_html.png"
align ="right" width="48" height="48"> 
Μια παράγραφος με μια εικόνα στα δεξιά. Για να εμφανιστεί σωστά καλύτερα προσθέστε 
αρκετό κείμενο για να το δείτε πως θα εμφανίζεται.
</p>

Περίγραμμα

Η εικόνα μπορεί επίσης να περιβληθεί από ένα περίγραμμα.

Η παράμετρος border μπορεί να δεχτεί τιμές από το 0 και πάνω, και μεταφράζεται στα πόσα pixel ακτίνα θα υπάρχει το περίγραμμα.

<img border="5" src="./images/Torchlight_folder_html.png"> <!-- Η 5 είναι μια αρκετά μεγάλη τιμή -->

Εμφώλευση στην <a href="url">

Μπορούμε φυσικά να μετατρέψουμε μια εικόνα σε υπερσύνδεσμο. Έτσι αντί για ένα κουμπί "Επόμενο" θα έχουμε μία εικόνα που να το υποδεικνύει.

<a href="http://el.wikiversity.org/wiki/%CE%95%CE%BA%CE%BC%CE%AC%CE%B8%CE%B7%CF%83%CE%B7_HTML">
<img src="./images/Torchlight_folder_html.png" alt="Αρχείο:εκμάθηση html">
</a>

Παράμετροι χάρτη

Μια επίσης ενδιαφέρουσα δυνατότητα της html, είναι να κάνει μερικά κομμάτια της εικόνας να αποτελούν σύνδεσμο προς άλλες ιστοσελίδες. Φανταστείτε για παράδειγμα μια εικόνα με τον χάρτη της Ελλάδας, όπου ο χρήστης περνώντας το ποντίκι του πάνω από την πόλη της Θεσσαλονίκης να μπορεί να κάνει κλικ και να παραπέμπεται σε μια σελίδα αφιερωμένη στην Θεσσαλονίκη.

<img src="./images/Torchlight_folder_html.png" usemap="#learning_html"> <!-- Η usermap 
παράμετρος δίνει ένα όνομα σε αυτό τον κώδικα της εικόνας -->
<map id="learning_html" name="learning_html"> <!-- Οι παράμετροι id και name
δείχνουν σε ποια εικόνα θα πάει η παράμετρος map. Χρησιμοποιήθηκαν και οι δύο για λόγους 
συμβατότητας με όλους τους φυλλομετρητές -->
<area shape="circle" coords="39,85,30" alt="HTML" href="http://el.wikiversity.org/wiki/Εκμάθηση_HTML">
</map>

Προηγούμενη Ενότητα	Περιεχόμενα	Επόμενη Ενότητα