Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα <img>. Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: </img>) ή µπορούµε να πούµε ότι ανοίγει και κλείνει ταυτόχρονα. Για να εµφανίζεται µια εικόνα σε µια σελίδα, θα πρέπει να χρησιµοποιήσουµε την ιδιότητα src. Η τιµή της ιδιότητας src είναι η διεύθυνση URL της εικόνας που θέλετε να εµφανίσετε: H Ιδιότητα Alt <img src="url"> Η ιδιότητα alt (alternative) καθορίζει ένα εναλλακτικό κείµενο για µια εικόνα. Το κείµενο εµφανίζεται αντί της εικόνας σε Browsers που δεν υποστηρίζουν γραφικά. Είναι απαραίτητη ιδιότητα για το Web Accessibility. H Ιδιότητα Title <img src= "mobile.gif" alt="iphone"> Η ιδιότητα title καθορίζει τον τίτλο της εικόνας. Ο τίτλος εµφανίζεται στον χρήστη όταν ακουµπάει το ποντίκι πάνω στην εικόνα. Οι Ιδιότητες Width & Height <img src="car.gif" title="porchecarrera"> Οι ιδιότητες width και height χρησιµοποιούνται για να προσδιοριστεί το πλάτος και το ύψος της εικόνας. Οι τιµές αυτών των ιδιοτήτων είναι σε pixels(προεπιλεγµένα). Αν έχουν οριστεί αυτές οι ιδιότητες θα διατηρείται σταθερός ο χώρος που καταλαµβάνουν στη σελίδα και δεν θα χρειάζεται στη διάρκεια της φόρτωσης να αλλάζει µορφοποίηση η σελίδα. H Ιδιότητα Border <img src="image.jpg" width="304" height="228"> Η ιδιότητα border καθορίζει το περίγραµµα µιας εικόνας. Η τιµή του border καθορίζει το πάχος του περιγράµµατος. Αν ή τιµή είναι µηδέν, δεν θα υπάρχει περίγραµµα.
Εικόνα και γραµµή κειµένου Μια εικόνα µαζί µε κείµενο µπορούν να συνυπάρξουν σε οποιοδήποτε κοµµάτι της σελίδας (πχ σε κεφαλίδα, σε παράγραφο, κλπ) Παρατηρούµε πως το κείµενο ξεκινάει από το κάτω µέρος της εικόνας, άρα µε αυτή τη σύνταξη του κώδικα µπορούµε να γράψουµε µόνο µία γραµµή δίπλα στην εικόνα και µετά θα συνεχίσει από κάτω. Εικόνα και γραµµή κειµένου Align Η εικόνα µπορεί να τοποθετηθεί σε διάφορες θέσεις σε σχέση µε το επίπεδο της γραµµής κειµένου που υπάρχει δεξιά και αριστερά της. Αυτό το ορίζουµε µε την ιδιότητα align: <img src="image.jpg" align="top">κείµενο Οι τιµές που µπορεί να πάρει η ιδιότητα αυτή είναι: top, middle, bottom, right και left.
Παρατήρηση: Aν το κείµενο ξεπεράσει τη µία γραµµή, συνεχίζει κάτω από την εικόνα. Παρατήρηση: Με τις τιµές left και right το κείµενο έχει ροή δίπλα στην εικόνα και δεν πηγαίνει κάτω από την εικόνα όταν ξεπερνά τη µία γραµµή. Εικόνα και γραµµές κειµένου <br clear=left> Όταν θέλουµε να υπάρχει ροή κειµένου δίπλα στην εικόνα αλλά να µην φτάνει µέχρι το κατώτερο σηµείο της εικόνας εφαρµόζουµε την ιδιότητα: αναλόγως που βρίσκεται η εικόνα. <br clear=left><br clear=right>, πχ: <img src="image.jpg" align="left">κείµενοκείµενοκείµενο <br clear="left">κείµενοκείµενοκείµενο
Απόσταση εικόνας από το κείµενο -vspace & hspace Η οριζόντια απόσταση της εικόνας από το κείµενο (δεξιά και αριστερά ταυτόχρονα) καθορίζονται µε την ιδιότητα hspace (σε pixels): <img src="image.jpg" hspace="3">κείµενο Η κάθετη απόσταση της εικόνας από το κείµενο (πάνω και κάτω ταυτόχρονα) καθορίζονται µε την ιδιότητα vspace (σε pixels): <img src="image.jpg" vspace="3">κείµενο Ορισµός εικόνας ως φόντο (background) Μία εικόνα µπορεί να οριστεί ως φόντο µε δύο τρόπους, χρησιµοποιώντας δύο διαφορετικές ιδιότητες. Χρησιµοποιώντας την ιδιότητα background: <body background="image.jpg"> Σηµείωση: Αυτή η ιδιότητα δεν χρησιµοποιείται στην HTML5 Χρησιµοποιώντας την ιδιότητα style: Εικόνα υπερσύνδεσµος <body style="background-image:url(image.jpg)"> Όταν σε έναν υπερσύνδεσµο αντί για κείµενο (clickable) θέλουµε να ορίσουµε µια εικόνα, ακολουθούµε τη παρακάτω σύνταξη: <a href="http://teipat.gr"><img src="image.jpg"></a> Δηλαδή αντικαθιστούµε το κείµενο µε τον κώδικα εµφάνισης της εικόνας. Λίστες Στην HTML διακρίνουµε τριών ειδών λίστες: Μη ταξινοµηµένες λίστες Ταξινοµηµένες λίστες Λίστες ορισµού
Μη ταξινοµηµένες λίστες Μια µη ταξινοµηµένη λίστα ξεκινά µε την ετικέτα <ul>. Κάθε στοιχείο της λίστας ξεκινά µε την ετικέτα <li>. Τα στοιχεία της λίστας σηµειώνονται µε: Δίσκο <ul type=disc> (εξορισµού) Κύκλο <ul type=circle> Τετράγωνο <ul type=square> Ταξινοµηµένες λίστες Μια ταξινοµηµένη λίστα ξεκινά µε την ετικέτα <ol>. Κάθε στοιχείο της λίστας ξεκινά µε την ετικέτα <li>. Τα στοιχεία της λίστας σηµειώνονται µε: 1. Αριθµούς <οl type=1> (εξορισµού) 2. Γράµµατα πεζά <οl type=a> ή κεφαλαία <οl type=α> 3. Λατινικά πεζά <οl type=i> ή κεφαλαία <οl type=i> Μπορούµε να ορίσουµε από ποιον αριθµό θα ξεκινήσει η αρίθµηση µε το πχ: <οl start=3> Λίστες ορισµού Μια λίστα ορισµού είναι µια λίστα που αποτελείται από όρους και τον ορισµό τους. Μια λίστα ορισµού ξεκινά µε την ετικέτα <dl> Κάθε όρος ξεκινά µε την ετικέτα <dt> Κάθε ορισµός ξεκινά µε την ετικέτα <dd> Υπάρχει και η δυνατότητα να βάλουµε µία λίστα µέσα σε µία άλλη λίστα.