Εκμάθηση 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>

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