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


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