Σχεδίαση ιστοσελίδων με τη γλώσσα HTML

Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων με τη γλώσσα HTML Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές εφαρμογές και Internet» Πάτρα, Απρίλιος 2019

Πίνακας περιεχομένων 1. Γνωριμία με την HTML...2 1.1. Η γλώσσα HTML...2 1.2. Οι ετικέτες - tags της HTML...3 1.3. Ιδιότητες...4 2. Δομή εγγράφου HTML...5 2.1. Κεφαλίδα (head)...5 2.2. Κυρίως σώμα (body)...6 2.3. Εισαγωγή σχολίων σε έγγραφο HTML...8 2.4. Ένα απλό HTML πρόγραμμα...8 3. Μορφοποίηση κειμένου...9 3.1. Παράγραφοι...9 3.2. Επικεφαλίδες... 10 3.3. Μορφοποίηση χαρακτήρων... 11 3.4. Κεντράρισμα κειμένου... 13 3.5. Στοίχιση τμήματος σελίδας... 13 3.6. Γραμματοσειρά... 14 4. Λίστες... 16 4.1. Διατεταγμένες λίστες... 16 4.2. Μη διατεταγμένες λίστες... 17 4.3. Λίστες ορισμού... 18 4.4. Λίστες μέσα σε άλλες λίστες... 19 5. Ροή περιεχομένου... 20 5.1. Αλλαγή γραμμής... 20 5.2. Οριζόντιες γραμμές... 20 6. Εικόνες... 22 6.1. Γραμμή κειμένου δίπλα στην εικόνα... 22 6.2. Αναδίπλωση κειμένου δίπλα στην εικόνα (wrap text)... 24 6.3. Απόσταση κειμένου από εικόνα... 25 6.4. Άλλες ιδιότητες... 26 7. Υπερσυνδέσεις... 27 7.1. Παραπομπές σε σελίδα στο Internet... 27 7.2. Παραπομπές σε σελίδα στον ίδιο δικτυακό τόπο... 27 7.3. Σελιδοδείκτες... 28 7.4. Αποστολή e-mail... 29 7.5. Εισαγωγή υπερσύνδεσης σε εικόνα... 30 8. Πίνακες... 31 9. Φόρμες... 34 Σχεδίαση ιστοσελίδων Σελίδα 1

1. Γνωριμία με την HTML Η HTML είναι η γλώσσα που χρησιμοποιείται στον Παγκόσμιο Ιστό (World Wide Web) για δημοσιοποίηση πληροφοριών. Η HTML παρέχει τις εξής δυνατότητες: Δημοσιοποίηση εγγράφων με επικεφαλίδες, κείμενο, πίνακες, λίστες, εικόνες, κλπ. Ανάκτηση πληροφοριών στον Παγκόσμιο Ιστό με τη βοήθεια υπερσυνδέσεων και με ένα απλό κλικ. Σχεδίαση φορμών για δημιουργία αλληλεπίδρασης με απομακρυσμένους χρήστες, για χρήση στην αναζήτηση συγκεκριμένων πληροφοριών, για κρατήσεις, για παραγγελία προϊόντων, κλπ. Ενσωμάτωση βίντεο clips, ήχου και άλλων εφαρμογών σε έγγραφα. 1.1. Η γλώσσα HTML Η HTML είναι μια γλώσσα που χρησιμοποιείται για τη συγγραφή ιστοσελίδων. Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language. Η HTML ανήκει σε μια ευρύτερη κατηγορία γλωσσών που ονομάζονται SGML - Standard Generalisation Markup Languages. Οι γλώσσες αυτές (συμπεριλαμβανομένης της HTML) δεν είναι γλώσσες προγραμματισμού αλλά περιγραφικές γλώσσες, καθώς αποτελούνται από οδηγίες που καθορίζουν τον τρόπο εμφάνισης των στοιχείων μιας ιστοσελίδας (εννοώντας με τον όρο στοιχεία το κείμενο, τις εικόνες, τον ήχο κλπ., από τα οποία αποτελείται η ιστοσελίδα) και τον τρόπο κλήσης άλλων αρχείων ή εφαρμογών. Τα αρχεία σε γλώσσα HTML (τα οποία έχουν επέκταση.html ή.htm) είναι έγγραφα σε μορφή κειμένου και περιλαμβάνουν: 1. Το περιεχόμενο της ιστοσελίδας, δηλαδή τα στοιχεία της ιστοσελίδας τα οποία εμφανίζονται στην οθόνη. 2. Τις ετικέτες που υποδεικνύουν στον φυλλομετρητή (browser) πώς να παρουσιάσει το περιεχόμενο της ιστοσελίδας. Σχεδίαση ιστοσελίδων Σελίδα 2

1.2. Οι ετικέτες - tags της HTML Οι οδηγίες εμφανίζονται με τη μορφή ετικετών (tags) και περικλείονται από τα σύμβολα < (άνοιγμα ετικέτας) και > (κλείσιμο ετικέτας). Οι ετικέτες εμφανίζονται συνήθως ως ζευγάρια, στην παρακάτω μορφή: <tag>περιεχόμενο</tag> όπου η ετικέτα <tag> δείχνει την αρχή και η </tag> το τέλος της ετικέτας. Οι ετικέτες μπορούν να γράφονται με κεφαλαία ή με πεζά γράμματα 1. Για παράδειγμα, η ετικέτα: <b>η σελίδα μου</b> εμφανίζει το περιεχόμενο «η σελίδα μου» με έντονα (bold) γράμματα. Υπάρχουν και κάποιες ετικέτες που εμφανίζονται μόνο με μια ετικέτα (δεν έχουν ετικέτα τέλους). Για παράδειγμα, η ετικέτα <br> δείχνει αλλαγή γραμμής. Ετικέτες μπορούν να περιλαμβάνουν άλλες ετικέτες, αλλά πρέπει να παραμένουν εμφωλευμένες (nested), δηλαδή αυτές που ανοίγουν πρώτες με την ετικέτα αρχής, να κλείνουν τελευταίες με την ετικέτα τέλους, όπως φαίνεται στο ακόλουθο σχήμα. Σωστό <tag1> <tag2> Λάθος <tag1> <tag2> </tag1> </tag2> </tag1> </tag2> Σχήμα 1: Δομή εμφωλευμένων ετικετών 1 Συνιστάται εντόνως η χρήση πεζών στις ετικέτες που ξεχωρίζουν συνήθως από τα πεζά ελληνικά. Σχεδίαση ιστοσελίδων Σελίδα 3

1.3. Ιδιότητες Υπάρχουν ετικέτες που έχουν ιδιότητες, οι οποίες παρέχουν επιπλέον πληροφορίες για τα στοιχεία του περιεχομένου μιας ιστοσελίδας. Για παράδειγμα: η ετικέτα <body bgcolor="red"> είναι η <body> με ιδιότητα bgcolor που παίρνει τιμή red. Δηλώνει ότι το χρώμα του φόντου της σελίδας πρέπει να είναι κόκκινο. Άλλο παράδειγμα είναι: η ετικέτα <table border=0> που δηλώνει ότι ο πίνακας δεν θα έχει περίγραμμα. Οι ιδιότητες μπαίνουν πάντα μόνο στις ετικέτες αρχής και έχουν τη μορφή: όνομα ιδιότητας = "τιμή ιδιότητας" Οι τιμές των ιδιοτήτων εμφανίζονται συνήθως σε εισαγωγικά, είτε απλά (' ') είτε διπλά (" "), εκτός από την περίπτωση που είναι αριθμοί (όπως το παραπάνω παράδειγμα με την ιδιότητα border) ή δεσμευμένες λέξεις (λέξεις που χρησιμοποιούνται από τη γλώσσα για να δηλώσουν κάτι συγκεκριμένο - τέτοιες λέξεις είναι και τα χρώματα, οπότε η ετικέτα <body> του παραδείγματος θα μπορούσε να γραφεί και ως <body bgcolor=red>). Τα διπλά εισαγωγικά είναι τα πιο συνηθισμένα, αλλά σε περιπτώσεις που η ίδια η τιμή περιέχει διπλά εισαγωγικά είναι απαραίτητα τα απλά εισαγωγικά, για παράδειγμα: name='νικολόπουλος Κώστας ("ο νεότερος")'. Σχεδίαση ιστοσελίδων Σελίδα 4

2. Δομή εγγράφου HTML Ένα έγγραφο HTML αρχίζει και τελειώνει με τις ετικέτες <html> και </html>, που χρησιμοποιούνται ως κωδικοί αναγνώρισης του κειμένου ως HTML από το φυλλομετρητή. Η ιστοσελίδα αποτελείται από δύο βασικά τμήματα: την κεφαλίδα (head) και το κυρίως σώμα (body). 2.1. Κεφαλίδα (head) Η κεφαλίδα προσδιορίζεται από το ζεύγος των ετικετών <head> και </head> και περιέχει γενικές πληροφορίες σχετικά με την ιστοσελίδα, όπως τον τίτλο της ιστοσελίδας, τις λέξεις - κλειδιά που χρησιμεύουν σε μηχανές αναζήτησης (search engines) και άλλα στοιχεία που δεν αποτελούν περιεχόμενο της ιστοσελίδας. Στον πίνακα 1 παρουσιάζονται οι βασικότερες ετικέτες που μπορεί να περιλαμβάνει η κεφαλίδα μιας ιστοσελίδας. Πίνακας 1: Βασικές ετικέτες για το τμήμα της κεφαλίδας Ετικέτα <title> <script> <style> <base> <meta> <link> Λειτουργία Ορισμός τίτλου της ιστοσελίδας Καθορισμός scripting γλώσσας Καθορισμός style sheet Ορισμός της βάσης αρχής για τον καθορισμό των σχετικών URLs Εισαγωγή μετα-πληροφορίας Ορισμός σχέσεων με άλλα κείμενα Η ετικέτα <title> ορίζει τον τίτλο της ιστοσελίδας, που θα εμφανιστεί στη γραμμή τίτλου του παραθύρου στο φυλλομετρητή του επισκέπτη. Αν και δεν είναι υποχρεωτικό, κάθε ιστοσελίδα πρέπει να έχει το δικό της τίτλο και μάλιστα αυτός ο τίτλος να είναι λιτός αλλά και μεστός σε περιεχόμενο. Η ετικέτα <script> ορίζει τη scripting γλώσσα της ιστοσελίδας, δηλαδή τη γλώσσα στην οποία έχουν αναπτυχθεί ειδικά προγράμματα (scripts) που συνοδεύουν την ιστοσελίδα ή που έχουν ενσωματωθεί στην ιστοσελίδα. Τα προγράμματα αυτά θα εκτελεστούν στον υπολογιστή του επισκέπτη της ιστοσελίδας είτε αμέσως μετά τη μεταφορά της ιστοσελίδας είτε σε κάποια άλλη στιγμή (π.χ. όταν γίνει μια κίνηση του Σχεδίαση ιστοσελίδων Σελίδα 5

mouse ή όταν πατηθεί κάποια υπερσύνδεση), παρέχοντας τη δυνατότητα εμπλουτισμού της ιστοσελίδας με δυναμικά και αλληλεπιδραστικά στοιχεία (π.χ. αλλαγή των περιεχομένων της ιστοσελίδας, επεξεργασία των στοιχείων που συμπληρώνονται σε μία φόρμα, σχηματισμός γραφικών στην οθόνη). Η ετικέτα <meta> επιτρέπει τον ορισμό μετα-πληροφορίας, δηλαδή πληροφορίας σχετικά με το περιεχόμενο της ιστοσελίδας. Η μετα-πληροφορία αποτελείται από δύο στοιχεία: όνομα (name) και περιεχόμενο (content). Για παράδειγμα: <meta name="keywords" content="html, web, Internet, site"> Ορισμός λέξεων - κλειδιών στην ιστοσελίδα <meta name="description" content="στο site περιγράφεται η HTML και η χρήση της στην κατασκευή ιστοσελίδων για τον Παγκόσμιο Ιστό"> Περιγραφή του περιεχομένου της ιστοσελίδας <meta name="author" content="steve Davis"> Ορισμός του συγγραφέα της ιστοσελίδας Όπως βλέπουμε, με την ετικέτα <meta> αφ ενός με το name ορίζουμε μια ιδιότητα (στα παραπάνω παραδείγματα, οι ιδιότητες είναι, αντίστοιχα, keywords, description και author) και αφ ετέρου με το content δίνουμε μια τιμή στην ιδιότητα. 2.2. Κυρίως σώμα (body) Το κυρίως σώμα οριοθετείται από το ζεύγος των ετικετών <body> και </body> και περιλαμβάνει το περιεχόμενο της ιστοσελίδας και ετικέτες για την εμφάνισή του. Οι βασικές ιδιότητες της ετικέτας του κυρίως σώματος (δηλ. της ετικέτας <body>) παρουσιάζονται στον πίνακα 2. Πίνακας 2: Ιδιότητες της ετικέτας <body> Ιδιότητα Λειτουργία bgcolor text topmargin leftmargin Ορισμός χρώματος φόντου Ορισμός χρώματος των χαρακτήρων κειμένου Ορισμός απόστασης του περιεχομένου από το πάνω όριο του παραθύρου Ορισμός απόστασης του περιεχομένου από το αριστερό όριο του παραθύρου Σχεδίαση ιστοσελίδων Σελίδα 6

Ιδιότητα link / vlink / alink background Λειτουργία Ορισμός χρώματος υπερσυνδέσεων: links, visited links, active links Προσδιορισμός εικόνας που θα εμφανίζεται ως φόντο Παραδείγματα: <body bgcolor=blue> Ορισμός του γαλάζιου ως χρώματος φόντου της ιστοσελίδας (ίδιο ακριβώς αποτέλεσμα θα είχαμε με το <body bgcolor="#0000ff">) <body background="greenfield.jpg" text=yellow> Ορισμός της εικόνας GreenField.jpg ως φόντου της ιστοσελίδας και του κίτρινου ως χρώματος του κειμένου της ιστοσελίδας Το χρώμα φόντου περιγράφεται είτε με τη συνήθη αγγλική ονομασία τους (π.χ. red, blue, white, green) είτε ως ποσοστό κόκκινου, πράσινου και μπλε σε δεκαεξαδικές τιμές από 0 μέχρι 255 (σύστημα RGB - Red, Green, Blue), για παράδειγμα color="#ff00ff", που σημαίνει 255 κόκκινο και 255 μπλε (αποτέλεσμα φούξια). Στον πίνακα 3 που ακολουθεί εμφανίζονται τα ονόματα των χρωμάτων που μπορούν να χρησιμοποιηθούν ως τιμές της ιδιότητας bgcolor και οι αντίστοιχες δεκαεξαδικές τιμές των χρωμάτων αυτών στο σύστημα RGB (για τα συγκεκριμένα 16 χρώματα, μπορεί να χρησιμοποιηθεί εναλλακτικά είτε το όνομα είτε η RGB τιμή του χρώματος, για άλλα χρώματα πρέπει να προσδιοριστεί η RGB τιμή). Πίνακας 3: Τα ονόματα των χρωμάτων και οι RGB τιμές τους Χρώμα Όνομα χρώματος RGB τιμή Χρώμα Όνομα χρώματος RGB τιμή Black #000000 Green #008000 Silver #C0C0C0 Lime #00FF00 Gray #808080 Olive #808000 White #FFFFFF Yellow #FFFF00 Maroon #800000 Navy #000080 Red #FF0000 Blue #0000FF Purple #800080 Teal #008080 Fuchsia #FF00FF Aqua #00FFFF Σχεδίαση ιστοσελίδων Σελίδα 7

Το κυρίως σώμα αποτελείται από ετικέτες που ορίζουν βασικές δομές κειμένου, το κείμενο ή το ίδιο το περιεχόμενο της ιστοσελίδας. 2.3. Εισαγωγή σχολίων σε έγγραφο HTML Υπάρχει η δυνατότητα εγγραφής σχολίων οπουδήποτε μέσα σε ένα έγγραφο HTML. Τα σχόλια στην HTML έχουν την ακόλουθη σύνταξη: <!-- αυτό είναι ένα σχόλιο --> Σχόλιο σε μία γραμμή <!-- αυτό το σχόλιο καταλαμβάνει πάνω από μία γραμμή --> Σχόλιο σε περισσότερες γραμμές Τα σχόλιά μας τα εισάγουμε μεταξύ των χαρακτήρων <!-- και --> και δεν έχουν κάποια ιδιαίτερη σημασία (δεν εμφανίζονται από τον φυλλομετρητή). Καλό είναι να μην εισάγονται παύλες -- ανάμεσα στα σχόλια για να μη δημιουργηθεί σύγχυση με τους χαρακτήρες κλεισίματος της ετικέτας. 2.4. Ένα απλό HTML πρόγραμμα Ακολουθεί ένα παράδειγμα απλού HTML προγράμματος, στο οποίο φαίνεται η βασική δομή ενός HTML εγγράφου. <html> <!--Απλό HTML πρόγραμμα--> <head> <title>απλό HTML πρόγραμμα</title> </head> <body> Η πρώτη μου ιστοσελίδα </body> </html> Σχεδίαση ιστοσελίδων Σελίδα 8

3. Μορφοποίηση κειμένου 3.1. Παράγραφοι Ο φυλλομετρητής δεν αναγνωρίζει τα διαστήματα μεταξύ των λέξεων ή μεταξύ των γραμμών στο κείμενο που γράφουμε σε HTML. Γι αυτό το λόγο, για την αλλαγή παραγράφου χρησιμοποιούμε μία ετικέτα για να υποδεικνύουμε τη νέα παράγραφο, το <p>. Η ετικέτα αυτή εισάγεται κάθε φορά που χρειάζεται το κενό μιας παραγράφου στο κείμενο και δε χρειάζεται αντίστοιχη ετικέτα κλεισίματος (δηλαδή το </p>). Παράδειγμα: <body> <p>αυτή είναι η πρώτη παράγραφος <p>αυτή είναι η δεύτερη παράγραφος <p>αυτή είναι η τελευταία παράγραφος </body> Το αποτέλεσμα θα εμφανιστεί στο φυλλομετρητή ως εξής: Αν θέλουμε να στοιχίσουμε μία παράγραφο στο κέντρο, αριστερά, δεξιά ή και από τις δύο πλευρές μπορούμε να χρησιμοποιήσουμε την ιδιότητα align με τις αντίστοιχες τιμές center, left, right ή justify. Παράδειγμα: <body> <p align=center> η παράγραφος αυτή θα κεντραριστεί <p align=left> η παράγραφος αυτή θα στοιχηθεί αριστερά <p align=right> η παράγραφος αυτή θα στοιχηθεί δεξιά <p align=justify> η παράγραφος αυτή θα στοιχηθεί και από δεξιά και από αριστερά ώστε να ταιριάζει ακριβώς στο πλάτος της οθόνης </body> Σχεδίαση ιστοσελίδων Σελίδα 9

Το αποτέλεσμα θα εμφανιστεί στο φυλλομετρητή ως εξής: Σε περίπτωση που θέλουμε να εμφανίζεται κείμενο ακριβώς με τον τρόπο που το γράφουμε (όταν δηλαδή τα κενά που αφήνουμε είναι σημαντικά), τότε χρησιμοποιούμε την ετικέτα <pre>. 3.2. Επικεφαλίδες Σε ένα κείμενο μπορούν να μπουν ενδιάμεσα επικεφαλίδες που ποικίλλουν σε μέγεθος από το 1 (το μεγαλύτερο) μέχρι το 6 (το μικρότερο). Οι αντίστοιχες ετικέτες είναι: <hx> που ανοίγει τη διαδικασία και </hx> που την κλείνει, όπου το x παίρνει τιμές 1, 2, 3, 4, 5 ή 6. Παράδειγμα: <body> <h1>επικεφαλίδα 1</h1> <h2>επικεφαλίδα 2</h2> <h3>επικεφαλίδα 3</h3> <h4>επικεφαλίδα 4</h4> <h5>επικεφαλίδα 5</h5> <h6>επικεφαλίδα 6</h6> </body> Σχεδίαση ιστοσελίδων Σελίδα 10

Το αποτέλεσμα θα εμφανιστεί στο φυλλομετρητή ως εξής: Οι ιδιότητες είναι ίδιες με αυτές που είδαμε στις ετικέτες παραγράφων. Συγκεκριμένα, αν θέλουμε να στοιχίσουμε μία επικεφαλίδα στο κέντρο ή αριστερά ή δεξιά χρησιμοποιούμε την ιδιότητα align με τις αντίστοιχες τιμές center, left ή right. Παράδειγμα: <h2 align=center>επικεφαλίδα 2 κεντραρισμένη</h2> <h4 align=right>επικεφαλίδα 4 στοιχισμένη δεξιά</h4> <h6 align=left>επικεφαλίδα 6 στοιχισμένη αριστερά</h6> Το αποτέλεσμα θα εμφανιστεί στο φυλλομετρητή ως εξής: 3.3. Μορφοποίηση χαρακτήρων Όλες οι ετικέτες μορφοποίησης χαρακτήρων του κειμένου έχουν την εξής μορφή: <tag>κείμενο που θέλουμε να μορφοποιήσουμε</tag> Σχεδίαση ιστοσελίδων Σελίδα 11

Στον παρακάτω πίνακα 4 αναφέρονται συνοπτικά οι σπουδαιότερες ετικέτες. Πίνακας 4: Οι βασικότερες ετικέτες της HTML Ετικέτα <b> </b> <i> </i> <u> </u> <del> <em> </em> <strong> </strong> <small> </small> <big> </big> <tt> </tt>   Περιγραφή εμφάνισης κειμένου Έντονο (bold) Πλάγιο (italic) Υπογραμμισμένο (underline) Διακριτά διαγραμμένο Με έμφαση (παρόμοια με την πλάγια γραφή) Με έμφαση (παρόμοια με την έντονη γραφή) Με μικρότερα γράμματα από τη γραμματοσειρά που το περιβάλλει Με μεγαλύτερα γράμματα από τη γραμματοσειρά που το περιβάλλει Μορφή γραφής τηλέτυπου Τοποθετείται ελάχιστα πιο κάτω από το επίπεδο των υπόλοιπων γραμμάτων της γραμμής, σαν δείκτης (subscript) Τοποθετείται ελάχιστα πιο πάνω από το επίπεδο των υπόλοιπων γραμμάτων της γραμμής, σαν εκθέτης (superscript) Παράδειγμα: Το τμήμα εγγράφου που ακολουθεί: <p><b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and <big>big</big> and <small>small</small> text. θα εμφανιστεί στην οθόνη ως εξής: Όπως βλέπουμε, όταν θέλουμε περισσότερες από μια μορφοποιήσεις για το ίδιο κείμενο, πρέπει να χρησιμοποιήσουμε τις ετικέτες εμφωλευμένες. Σχεδίαση ιστοσελίδων Σελίδα 12

3.4. Κεντράρισμα κειμένου Για να κεντράρουμε ένα κείμενο πρέπει να το περιβάλουμε με τις αντίστοιχες ετικέτες: <center> που ανοίγει την διαδικασία και </center> που την κλείνει. Οτιδήποτε περιέχεται μεταξύ των δύο ετικετών θα κεντραριστεί. Παράδειγμα: <center> το κείμενο θα κεντραριστεί </center> Το αποτέλεσμα θα εμφανιστεί στο φυλλομετρητή ως εξής: 3.5. Στοίχιση τμήματος σελίδας Η ετικέτα <div>...</div> (Document Division element) λειτουργεί με την ιδιότητα align και αναφέρεται σε ένα τμήμα σελίδας, δηλαδή σε μια σειρά από επικεφαλίδες ή παραγράφους συνολικά (δηλαδή δεν χρειάζεται να επαναλάβουμε την ιδιότητα align σε κάθε μια από τις ετικέτες). Το τμήμα της σελίδας που θα στοιχηθεί με την <div> μπορεί να περιέχει και ετικέτες εισαγωγής εικόνων. Στο παράδειγμα που ακολουθεί οι Επικεφαλίδες 1 και 3 και η Παράγραφος θα στοιχηθούν δεξιά. Παράδειγμα: <div align=right><h1>επικεφαλίδα 1</h1><h3>Επικεφαλίδα 3</h3> <p>παράδειγμα για την ετικέτα DIV. Οι επικεφαλίδες και η παράγραφος θα στοιχηθούν δεξιά </div> Το αποτέλεσμα θα εμφανιστεί στο φυλλομετρητή ως εξής: Σχεδίαση ιστοσελίδων Σελίδα 13

3.6. Γραμματοσειρά Για να προσδιορίσουμε τα χαρακτηριστικά της γραμματοσειράς χρησιμοποιούμε την ετικέτα <font>, η οποία έχει τρεις βασικές ιδιότητες: size: Προσδιορίζουμε το μέγεθος των γραμμάτων. Οι πιθανές τιμές είναι 1 (αντιστοιχεί σε μέγεθος γραμμάτων 8 στιγμές), 2 (αντιστοιχεί σε 10 στιγμές), 3 (αντιστοιχεί σε 12 στιγμές), 4 (αντιστοιχεί σε 14 στιγμές), 5 (αντιστοιχεί σε 18 στιγμές), 6 (αντιστοιχεί σε 24 στιγμές) και 7 (αντιστοιχεί σε 36 στιγμές). Επίσης, η τιμή της ιδιότητας size μπορεί να είναι σχετική με την ισχύουσα τιμή, για παράδειγμα, size = +3 ή size = -1 (που σημαίνουν: μεγαλύτερο κατά 3 και μικρότερο κατά 1 από το ισχύον μέγεθος). ΠΡΟΣΟΧΗ! Η HTML δεν υποστηρίζει άλλα μεγέθη γραμμάτων από τα προαναφερθέντα. Παράδειγμα: <p><font size=1>size=1</font> <font size=2> size=2</font> <font size=3> size=3</font> <font size=4> size=4</font> <font size=5> size=5</font> <font size=6> size=6</font> <font size=7> size=7</font> Το αποτέλεσμα των παραπάνω οδηγιών θα είναι: Παρακάτω εμφανίζονται τα αποτελέσματα χρήσης σχετικών μεγεθών στην ιδιότητα size της ετικέτας <font>, όταν το αρχικό μέγεθος είναι 3. Παρατηρήστε ότι τα τρία πρώτα μεγέθη είναι ίδια (τα -1 και 0 μετατρέπονται σε 1). <p><font size=-4>size=-4</font> <font size=-3> size=-3</font> <font size=-2> size=-2</font> <font size=-1> size=-1</font> <font size=+1> size=+1</font> <font size=+2> size==2</font> <font size=+3> size=+3</font> <font size=+4> size=+4</font> Το αποτέλεσμα των παραπάνω οδηγιών θα είναι: Σχεδίαση ιστοσελίδων Σελίδα 14

Το αρχικό μέγεθος της γραμματοσειράς προσδιορίζεται από την ετικέτα <basefont> (με χρήση της ιδιότητας size). Οι αλλαγές που επιτυγχάνονται στη συνέχεια με τη χρήση σχετικών μεγεθών στην ιδιότητα size της ετικέτας <font> προσδιορίζονται με βάση την τιμή που έχει προσδιοριστεί στην ετικέτα <basefont>. Αν δεν υπάρχει ετικέτα <basefont> στο έγγραφο, τότε ως αρχικό μέγεθος θεωρείται το μέγεθος 3. color: Προσδιορίζουμε το χρώμα των γραμμάτων. Τα χρώματα περιγράφονται είτε με τη συνήθη αγγλική ονομασία τους (π.χ. red, blue, white, green) είτε ως ποσοστό κόκκινου, πράσινου και μπλε σε δεκαεξαδικές τιμές από 0 μέχρι 255 (σύστημα RGB - Red, Green, Blue), π.χ. color="#ff00ff", που σημαίνει 255 κόκκινο και 255 μπλε (αποτέλεσμα φούξια). face: Προσδιορίζουμε τον τύπο των γραμμάτων (γραμματοσειρά), που μπορεί να είναι και μια λίστα από διαφορετικές γραμματοσειρές, χωρισμένες μεταξύ τους με κόμμα (για την περίπτωση που κάποιος επισκέπτης δεν διαθέτει τη γραμματοσειρά που επιλέγουμε ως πρώτη). Σχεδίαση ιστοσελίδων Σελίδα 15

4. Λίστες 4.1. Διατεταγμένες λίστες Για να εισάγουμε διατεταγμένες (δηλαδή αριθμημένες) λίστες χρησιμοποιούμε τις ακόλουθες ετικέτες: Το ζεύγος <ol> </ol>, που δηλώνουν την αρχή και το τέλος της διατεταγμένης λίστας, και Το <li> πριν από κάθε στοιχείο της λίστας. Παράδειγμα: Έστω το παρακάτω τμήμα εγγράφου HTML: <body> <ol> <li>πρώτο στοιχείο <li>δεύτερο στοιχείο <li>τρίτο στοιχείο </ol> </body> Θα εμφανιστεί στο φυλλομετρητή ως εξής: Για την ετικέτα <li> δεν χρειάζεται να χρησιμοποιηθεί το αντίστοιχο κλείσιμο </li>. Ο τύπος της αρίθμησης των στοιχείων μιας διατεταγμένης λίστας (αραβικοί αριθμοί, αγγλικά γράμματα και λατινικοί αριθμοί) μπορεί να οριστεί με την ιδιότητα type της ετικέτας <ol> ως εξής: Αραβικοί αριθμοί (1, 2, 3, ): <ol type=1> Αγγλικά πεζά γράμματα (a, b, c, ): <ol type=a> Αγγλικά κεφαλαία γράμματα (A, B, C, ): <ol type=a> Λατινικοί πεζοί αριθμοί (i, ii, iii, ): <ol type=i> Λατινικοί κεφαλαίοι αριθμοί (I, II, III, ): <ol type=i> Όταν δεν υπάρχει η ιδιότητα type, χρησιμοποιούνται οι αραβικοί αριθμοί. Σχεδίαση ιστοσελίδων Σελίδα 16

Η ιδιότητα type μπορεί να χρησιμοποιηθεί και στην ετικέτα <li> με σκοπό τη διαφοροποίηση στην αρίθμηση των στοιχείων μιας διατεταγμένης λίστας. Π.χ. <ol> <li>mozilla Firefox <li type=a>google Chrome <li type=i>safari <li type=i>opera <li type=a>internet Explorer </ol> Το αποτέλεσμα στο φυλλομετρητή θα είναι ως εξής: Παρατηρήστε ότι, παρ όλο που αλλάζει ο τύπος της αρίθμησης, διατηρείται η διάταξη, γεγονός που οφείλεται στην ύπαρξη μίας μοναδικής λίστας. 4.2. Μη διατεταγμένες λίστες Ομοίως με τις διατεταγμένες λίστες, για τις μη διατεταγμένες χρησιμοποιούμε τις ακόλουθες ετικέτες: Το ζεύγος <ul> </ul>, που δηλώνουν την αρχή και το τέλος της μη διατεταγμένης λίστας, και Το <li> πριν από κάθε στοιχείο της λίστας. Παράδειγμα: Έστω το παρακάτω τμήμα εγγράφου HTML: <body> <ul> </ul> </body> <li>στοιχείο <li>στοιχείο <li>στοιχείο Σχεδίαση ιστοσελίδων Σελίδα 17

θα εμφανιστεί στο φυλλομετρητή ως εξής: Τα ενδεικτικά σημάδια (κουκκίδες) κάθε στοιχείου μιας μη διατεταγμένης λίστας μπορούν να οριστούν με την ιδιότητα type της ετικέτας <ul> και να πάρουν τις εξής μορφές: Μαύρα δισκάκια (<ul type=disc>) Κυκλάκια (<ul type=circle>) Τετραγωνάκια (<ul type=square>) Όταν δεν υπάρχει η type, οι κουκκίδες εμφανίζονται ως μαύρα δισκάκια. Και στην περίπτωση της μη διατεταγμένης λίστας, μπορεί τα στοιχεία της λίστας να εμφανίζονται με διαφορετικές κουκκίδες, τοποθετώντας την ιδιότητα type στην ετικέτα <li>. 4.3. Λίστες ορισμού Οι λίστες ορισμού χρησιμοποιούν τις ακόλουθες ετικέτες: Το ζεύγος <dl> </dl>, που δηλώνουν την αρχή και το τέλος της λίστας ορισμού (Definition List). Το <dt> πριν από κάθε όρο της λίστας ορισμού (Definition Term). Το <dd> πριν από κάθε περιγραφή όρου της λίστας ορισμού (Definition Data). Παράδειγμα: Έστω το παρακάτω τμήμα εγγράφου HTML: <dl> <dt>fortran <dd>γλώσσα προγραμματισμού για επιστημονικούς υπολογισμούς. <dt>c <dd>γλώσσα προγραμματισμού για προγραμματισμό συστημάτων. <dt>python <dd>αντικειμενοστρεφής Γλώσσα προγραμματισμού. </dl> Σχεδίαση ιστοσελίδων Σελίδα 18

θα εμφανιστεί στο φυλλομετρητή ως εξής: 4.4. Λίστες μέσα σε άλλες λίστες Μπορούμε να συμπεριλάβουμε μια λίστα μέσα σε μια άλλη λίστα, όπως φαίνεται στο παράδειγμα που ακολουθεί. Παράδειγμα: Έστω το παρακάτω τμήμα εγγράφου HTML: <body> <ul> <li> ΠΕΡΙΦΕΡΕΙΑ ΔΥΤΙΚΗΣ ΕΛΛΑΔΑΣ <ul> <li> Νομός Αχαΐας <li> Νομός Ηλείας <li> Νομός Αιτωλοακαρνανίας </ul> <li> ΠΕΡΙΦΕΡΕΙΑ ΠΕΛΟΠΟΝΝΗΣΟΥ <ul> <li> Νομός Αρκαδίας <li> Νομός Κορινθίας <li> Νομός Αργολίδας <li> Νομός Μεσσηνίας </ul> </ul> </body> θα εμφανιστεί στο φυλλομετρητή ως εξής: Σχεδίαση ιστοσελίδων Σελίδα 19

5. Ροή περιεχομένου 5.1. Αλλαγή γραμμής Ο φυλλομετρητής δεν αναγνωρίζει τα διαστήματα που υπάρχουν στο κείμενο, αλλά ούτε και τις αλλαγές γραμμής που έχουν εισαχθεί. Για να αλλάξει η γραμμή στη ροή του κειμένου χρησιμοποιείται η ετικέτα <br> (συντομογραφία του break που σημαίνει σπάζω), για την οποία δεν χρειάζεται αντίστοιχη ετικέτα κλεισίματος. Παράδειγμα: <body> Εδώ εισάγουμε κείμενο <br>εδώ το κείμενο συνεχίζεται σε άλλη γραμμή </body> θα εμφανιστεί στο φυλλομετρητή ως εξής: Παρατηρήστε τη σχέση της ετικέτας <br> με την <p>. Η <br> αλλάζει γραμμή, ενώ η <p> αλλάζει παράγραφο και αφήνει μεγαλύτερο κενό από την προηγούμενη παράγραφο σε σχέση με το κενό που αφήνει η <br>. Εμφανισιακά, μία <p> ισοδυναμεί με δύο συνεχόμενα <br>. 5.2. Οριζόντιες γραμμές Με τις οριζόντιες γραμμές μπορούμε να διαχωρίζουμε μεταξύ τους διάφορα τμήματα του κειμένου. Αυτό επιτυγχάνεται με την ετικέτα <hr> (συντομογραφία του Horizontal Rule), για την οποία δεν χρησιμοποιείται ετικέτα κλεισίματος. Στην ετικέτα <hr> μπορούν να χρησιμοποιηθούν οι εξής ιδιότητες: η width που δηλώνει το μήκος της οριζόντιας γραμμής: οι τιμές που μπορεί να πάρει η ιδιότητα WIDTH είναι είτε απόλυτες (σε pixel) είτε σχετικές (σε ποσοστό % της οθόνης), η size που δηλώνει το πάχος της οριζόντιας γραμμής (σε pixel), η color που δηλώνει το χρώμα της οριζόντιας γραμμής, Σχεδίαση ιστοσελίδων Σελίδα 20

η align για τη ρύθμιση της στοίχισης της γραμμής (η προεπιλεγμένη τιμή της είναι CENTER), η noshade που δεν παίρνει τιμή, απλά δηλώνει ότι η γραμμή θα εμφανιστεί με συμπαγές χρώμα (δηλ χωρίς σκιά). Παραδείγματα: <hr width=70% size=5 align=left> Η γραμμή που θα εμφανιστεί θα είναι: Ενώ η γραμμή: θα εμφανιστεί ως εξής: <hr width=70% size=3 noshade> Σχεδίαση ιστοσελίδων Σελίδα 21

6. Εικόνες Η εισαγωγή εικόνας γίνεται με την ετικέτα: <img src="url"> όπου URL είναι το όνομα του αρχείου - εικόνας (συμπεριλαμβάνει και το μονοπάτι που ακολουθείται από το φάκελο στον οποίο βρίσκεται αποθηκευμένη η ιστοσελίδα μέχρι το φάκελο στον οποίο είναι αποθηκευμένη η εικόνα). Για παράδειγμα, η ετικέτα <img src="image.gif"> θα εμφανίσει στην οθόνη του φυλλομετρητή την εικόνα που είναι αποθηκευμένη στο αρχείο image.gif, το οποίο βρίσκεται στον ίδιο φάκελο με το φάκελο όπου είναι αποθηκευμένη η ιστοσελίδα. Σε περίπτωση που ο φυλλομετρητής δεν βρει το αρχείο (δηλ, το URL) που έχει δοθεί στην ετικέτα <img>, θα εμφανίσει την εικόνα ως εξής: Σε αυτή την περίπτωση, θα πρέπει να ελεγχθεί αν το όνομα του αρχείου έχει γραφεί σωστά. 6.1. Γραμμή κειμένου δίπλα στην εικόνα Μια εικόνα μαζί με μια γραμμή κειμένου μπορεί να συμπεριληφθεί σε μια επικεφαλίδα ή σε μια παράγραφο. Παραδείγματα: <p><img src="photo.jpg"> η εικόνα θα εμφανιστεί στο σημείο που υπάρχει η αντίστοιχη <BR>ετικέτα μέσα στο κείμενο Θα εμφανιστεί ως εξής: Επίσης, ο κώδικας: <h2>η εικόνα <img src="photo.jpg">θα εμφανιστεί στο σημείο<br> Σχεδίαση ιστοσελίδων Σελίδα 22

που υπάρχει η αντίστοιχη ετικέτα μέσα στο κείμενο </h2> θα εμφανιστεί ως εξής: Δεξιά και αριστερά της εικόνας θα υπάρχει ΜΟΝΟ ΜΙΑ γραμμή κειμένου. Αν η ετικέτα <img> δεν βρίσκεται μέσα σε παράγραφο ή επικεφαλίδα, θα εμφανιστεί μόνη της μέσα στη σελίδα, χωρίς να υπάρχει κάποιο κείμενο (ή κάτι άλλο, π.χ. άλλη εικόνα) δίπλα της. Η εικόνα μπορεί να τοποθετηθεί σε διάφορες θέσεις σχετικά με το επίπεδο της γραμμής κειμένου που υπάρχει δεξιά ή αριστερά της. Αυτό θα γίνει με την ιδιότητα align, που παίρνει τιμές: top: η γραμμή κειμένου εμφανίζεται στο επάνω μέρος της εικόνας, middle: η γραμμή κειμένου εμφανίζεται στο μέσο της εικόνας, bottom: η γραμμή κειμένου εμφανίζεται στο κάτω μέρος της εικόνας. Παράδειγμα: <p><img src="photo.jpg" align=middle>επειδή η ιδιότητα ALIGN έχει τιμή MIDDLE<br> θα τοποθετήσει το μέσο της εικόνας στο ίδιο επίπεδο με τη γραμμή του κειμένου. Θα εμφανιστεί ως εξής: Σχεδίαση ιστοσελίδων Σελίδα 23

6.2. Αναδίπλωση κειμένου δίπλα στην εικόνα (wrap text) Για να επιτύχουμε την αναδίπλωση του κειμένου δίπλα σε μια εικόνα, πρέπει να δώσουμε στην ιδιότητα align της ετικέτας <img> τιμές right, left ή center (οπότε η εικόνα εμφανίζεται αντίστοιχα δεξιά, αριστερά ή στο κέντρο του κειμένου) και η εικόνα να ακολουθείται από παράγραφο, λίστα, επικεφαλίδα ή άλλες εικόνες. Συγκεκριμένα: left: η εικόνα εμφανίζεται αριστερά της γραμμής όπου βρίσκεται, center: η εικόνα εμφανίζεται στο κέντρο της γραμμής όπου βρίσκεται, right: η εικόνα εμφανίζεται δεξιά της γραμμής όπου βρίσκεται. Παράδειγμα: Θα εμφανιστεί ως εξής: <p><img src="photo.jpg" align=right> κείμενο Υπάρχουν όμως περιπτώσεις που θέλουμε η ροή κειμένου δεξιά ή αριστερά από μια εικόνα να μη φτάνει μέχρι το κατώτερο σημείο της εικόνας αλλά να διακόπτεται νωρίτερα. Στην περίπτωση αυτή, χρησιμοποιούμε την ετικέτα <br> με ιδιότητα clear που μπορεί να πάρει τις εξής τιμές: left: η ροή σταματά μέχρι να βρεθεί η πρώτη γραμμή που η αριστερή της άκρη είναι ελεύθερη, right: η ροή σταματά μέχρι να βρεθεί η πρώτη γραμμή που η δεξιά της άκρη είναι ελεύθερη, all: η ροή σταματά μέχρι να βρεθεί η πρώτη γραμμή που και οι δύο άκρες της είναι ελεύθερες (δηλαδή δεν τις καταλαμβάνει η εικόνα). Ειδικά για clear=all, όταν βρεθεί η πρώτη γραμμή που και η δεξιά και η αριστερή άκρη της είναι ελεύθερη, η γραμμή θα επεκταθεί από την αριστερή μέχρι τη δεξιά πλευρά της οθόνης. Σχεδίαση ιστοσελίδων Σελίδα 24

Παράδειγμα: Παράδειγμα αναδίπλωσης κειμένου.<p> <img src="photo.jpg" align=left width=70 length=70><p> Η εικόνα εμφανίζεται στα αριστερά της οθόνης και το κείμενο αναδιπλώνεται στα δεξιά.<br> Για την αναδίπλωση χρησιμοποιήσαμε την ιδιότητα align με τιμή left στην ετικέτα img.<br> Παρατηρούμε ότι το κείμενο εκτείνεται κατά μήκος όλης της δεξιάς πλευράς της εικόνας. <p> <img src="photo.jpg" align=left width=70 length=70><p> Αν θέλουμε να διακόψουμε τη ροή του κειμένου που εμφανίζεται στα δεξιά της εικόνας<br clear=left> θα χρησιμοποιήσουμε την ετικέτα BR με ιδιότητα align και τιμή left ή right ή all.<br> Στο παράδειγμα αυτό δώσαμε την τιμή left και το κείμενο εμφανίστηκε στα αριστερά <b> κάτω </b> από την εικόνα. Το αποτέλεσμα του παραπάνω κώδικα είναι: 6.3. Απόσταση κειμένου από εικόνα Καθορίζεται με τις ιδιότητες vspace=χ (κατακόρυφη απόσταση του κειμένου που βρίσκεται πάνω και κάτω από την εικόνα) και hspace=χ (οριζόντια απόσταση του κειμένου που βρίσκεται δεξιά και αριστερά από την εικόνα). X είναι ο αριθμός των pixels που θέλουμε να έχει η απόσταση. Παράδειγμα: <img src="image2.gif" vspace=20 hspace=15 align=right> Σχεδίαση ιστοσελίδων Σελίδα 25

6.4. Άλλες ιδιότητες alt: Χρησιμοποιείται για επισκέπτες που χρησιμοποιούν προγράμματα ανάγνωσης ιστοσελίδων τα οποία δεν έχουν τη δυνατότητα να εμφανίζουν εικόνες. Για να καλύψουμε αυτή την περίπτωση, χρησιμοποιούμε την ιδιότητα alt για να γράψουμε ένα μικρό περιγραφικό κείμενο που εμφανίζεται εναλλακτικά στη θέση της εικόνας και συνήθως επεξηγεί το περιεχόμενο της εικόνας. <img src="ypepthlogo.gif" alt="[υπουργείο Παιδείας]"> border: Η ιδιότητα border χρησιμοποιείται για τον καθορισμό περιγράμματος στην εικόνα και παίρνει τιμές σε pixel που ορίζουν το πάχος του περιγράμματος. Αν δεν υπάρχει αυτή η ιδιότητα, η εικόνα δεν θα έχει περίγραμμα. Για παράδειγμα: <img src="image2.gif" border=1> height, width: Οι ιδιότητες height και width ορίζουν το ύψος και το πλάτος της εικόνας, αντίστοιχα, σε pixels. Αν υπάρχουν και οι δύο ιδιότητες σε μια ετικέτα <img>, υπάρχει πιθανότητα η εικόνα να εμφανιστεί παραμορφωμένη (εκτός αν η αναλογία ύψους και πλάτους είναι ίδια με την αρχική αναλογία της εικόνας). Αν υπάρχει μόνο μία από τις δύο ιδιότητες, τότε η εικόνα θα εμφανιστεί με την τιμή που ορίζει η ιδιότητα και με την αρχική αναλογία ύψους και πλάτους. Έστω, για παράδειγμα, ότι η εικόνα image2.gif έχει σχεδιαστεί με 200 pixel πλάτος και 300 pixel ύψος. Η ετικέτα <img src="image2.gif" border=1 width=100 height=200> θα εμφανίσει την εικόνα με περίγραμμα ενός pixel, πλάτος 100 pixel και ύψος 200 pixel (δηλαδή παραμορφωμένη, αφού θα εμφανιστεί με αναλογία 1 : 2, ενώ η κανονική αναλογία της εικόνας είναι 2 : 3). Η ετικέτα <img src="image2.gif" border=2 width=100> θα εμφανίσει την εικόνα με περίγραμμα δύο pixel, ύψος 100 pixel και πλάτος 150 pixel (δηλαδή θα εφαρμόσει το μέγεθος των 100 pixel στο πλάτος της εικόνας και θα διατηρήσει την αρχική αναλογία πλάτους προς ύψος, 2 : 3). Σχεδίαση ιστοσελίδων Σελίδα 26

7. Υπερσυνδέσεις Οι υπερσυνδέσεις (ή αλλιώς, παραπομπές) δημιουργούνται με την ετικέτα <a> με ιδιότητα href. Η γενική μορφή της σχετικής ετικέτας εισαγωγής υπερσύνδεσης είναι: <a href="url">κείμενο υπερσύνδεσης</a> όπου URL είναι η θέση κάποιας ιστοσελίδας και αποτελεί το στόχο της υπερσύνδεσης. Το κείμενο της υπερσύνδεσης συνήθως εμφανίζεται στο φυλλομετρητή με έντονα μπλε γράμματα και υπογραμμισμένο (τα γράμματα αλλάζουν χρώμα - π.χ. γίνονται κόκκινα όταν ο χρήστης έχει επιλέξει να μεταβεί στην υπερσύνδεση). 7.1. Παραπομπές σε σελίδα στο Internet Στην ιδιότητα href θα γραφτεί η διεύθυνση της ιστοσελίδας του δικτυακού τόπου που θέλουμε να μεταβούμε - συμπεριλαμβανομένου του αντίστοιχου πρωτοκόλλου που θα χρησιμοποιηθεί (π.χ. http). Παράδειγμα: Μετάβαση στην αρχική σελίδα του δικτυακού τόπου του <a href="http://www.teipat.gr">tei Πάτρας</A> Στο φυλλομετρητή θα εμφανιστεί ως εξής: 7.2. Παραπομπές σε σελίδα στον ίδιο δικτυακό τόπο Υπάρχουν δύο διαφορετικοί τρόποι να αναφερθούμε στη διεύθυνση του στόχου, δηλαδή της ιστοσελίδας που μεταβαίνουμε: μέσω απόλυτων ή σχετικών διευθύνσεων. Όταν χρησιμοποιούμε απόλυτες διευθύνσεις, δίνουμε όλο το μονοπάτι που χρειάζεται να ακολουθήσουμε για να βρούμε πού είναι αποθηκευμένη η ιστοσελίδα, για παράδειγμα: C:\myWebSite\mypages\part2.htm. Όταν χρησιμοποιούμε σχετικές διευθύνσεις, δίνουμε τη διεύθυνση σε σχέση με τη διεύθυνση της ιστοσελίδας. Παρακάτω αναφέρονται παραδείγματα για τη σχετική διεύθυνση. Σχεδίαση ιστοσελίδων Σελίδα 27

Κατά κανόνα, χρησιμοποιούμε σχετική διεύθυνση για καλύτερη μεταφερσιμότητα του δικτυακού τόπου μας, δηλαδή για την καλύτερη και ταχύτερη μεταφορά του δικτυακού τόπου από υπολογιστή σε υπολογιστή, χωρίς να χρειαστεί μεταβολή των αρχείων html που έχουμε δημιουργήσει. Παραδείγματα: Αν μεταβαίνουμε από τη σελίδα page1.html στη σελίδα page2.html, ανάλογα με τη σχέση των φακέλων στους οποίους ανήκουν, έχουμε: 1. Αν βρίσκονται στον ίδιο φάκελο: <a href="όνομα αρχείου">κείμενο υπερσύνδεσης</a> 2. Αν η page2.html βρίσκεται σε υποφάκελο του φακέλου της page1.html: <a href="υποφάκελος/mypage2.htm">κείμενο υπερσύνδεσης</a> 3. Αν η page2.html βρίσκεται στον ανώτερο φάκελο (φάκελο - γονέα) του φακέλου της page1.html: <a href="../mypage2.htm">κείμενο υπερσύνδεσης</a> Για όλες τις άλλες περιπτώσεις, χρησιμοποιούμε συνδυασμό των παραπάνω περιπτώσεων. 7.3. Σελιδοδείκτες Για να ορίσουμε ένα σελιδοδείκτη, δηλαδή για να δώσουμε όνομα σε μια περιοχή της ιστοσελίδας μας όπου θέλουμε να οδηγεί μια υπερσύνδεση, χρησιμοποιούμε την ετικέτα <a> με ιδιότητα name στην οποία δίνουμε το όνομα του σελιδοδείκτη. Μπορούμε να δώσουμε όνομα είτε σε μια μεμονωμένη λέξη είτε σε ολόκληρο κείμενο. Παραδείγματα ορισμού σελιδοδείκτη: <a name="inet">internet</a> και Επιχειρήσεις Ονομάζουμε «ΙΝΕΤ» τη λέξη «Internet» μέσα στο κείμενό μας. <a name="iντεπιχ">internet και Επιχειρήσεις</a> Ονομάζουμε «IντΕπιχ» το κείμενο «Internet και Επιχειρήσεις». Οι σελιδοδείκτες δεν είναι εμφανείς από τον φυλλομετρητή, δηλαδή δεν ξεχωρίζουν όπως οι υπερσυνδέσεις που εμφανίζονται με έντονα μπλε γράμματα υπογραμμισμένα. Σχεδίαση ιστοσελίδων Σελίδα 28

Η μετάβαση σε ένα σελιδοδείκτη θα γίνει με τον ίδιο τρόπο που περιγράψαμε παραπάνω, χρησιμοποιώντας, δηλαδή την ετικέτα <a>, όπου όμως η ιδιότητα href θα έχει σαν τιμή το όνομα του σελιδοδείκτη, με το σύμβολο # μπροστά από αυτό. Παράδειγμα παραπομπής σε σελιδοδείκτη: <a href="#inet ">κείμενο υπερσύνδεσης</a> Μεταβαίνουμε στο σελιδοδείκτη με το όνομα «ΙΝΕΤ» όταν αυτός βρίσκεται μέσα στην ίδια ιστοσελίδα. Αν ο σελιδοδείκτης βρίσκεται σε άλλη ιστοσελίδα από αυτή στην οποία εισάγεται η υπερσύνδεση, θα προηγηθεί η σχετική διεύθυνση στην οποία βρίσκεται η ιστοσελίδα. Δηλαδή, αν ο σελιδοδείκτης με το όνομα «ΧΧΧ» βρίσκεται σε άλλη ιστοσελίδα, η παραπομπή στον σελιδοδείκτη θα έχει τη μορφή: <a href="path#χχχ">κείμενο υπερσύνδεσης</a>, όπου path είναι το μονοπάτι που πρέπει να ακολουθηθεί για να βρεθεί αυτή η ιστοσελίδα. Παραδείγματα παραπομπής σε σελιδοδείκτη άλλης ιστοσελίδας: <a href="http://www.teiwest.gr/anak.htm#inet">κείμενο υπερσύνδεσης</a> Μεταβαίνουμε στο σελιδοδείκτη με το όνομα «ΙΝΕΤ» που βρίσκεται ορισμένος στη σελίδα «http://www.teiwest.gr/anak.htm» <a href="../anakoinoseis.htm#inet">κείμενο υπερσύνδεσης</a> Μεταβαίνουμε στο σελιδοδείκτη με το όνομα «ΙΝΕΤ» που βρίσκεται ορισμένος στη σελίδα «anakoinoseis.htm» που βρίσκεται στον ανώτερο φάκελο (φάκελο - γονέα) της τρέχουσας ιστοσελίδας. 7.4. Αποστολή e-mail Για να δημιουργήσουμε μια παραπομπή που θα ανοίγει στον υπολογιστή του χρήστη της ιστοσελίδας ένα παράθυρο σύνταξης e-mail με παραλήπτη τη διεύθυνση που επιθυμούμε, θα χρησιμοποιήσουμε την ακόλουθη μορφή: <a href="mailto:name@xxx.xx">κείμενο υπερσύνδεσης</a> Όταν ο χρήστης επιλέξει από το φυλλομετρητή το «κείμενο υπερσύνδεσης», τότε το e-mail πρόγραμμα που χρησιμοποιεί στον υπολογιστή του θα ανοίξει ένα παράθυρο Σχεδίαση ιστοσελίδων Σελίδα 29

αποστολής e-mail όπου στο πεδίο ΠΡΟΣ: θα εμφανίζεται το name@xxx.xx ως e-mail παραλήπτη. Αν θέλουμε να εμφανίζει και το θέμα του e-mail, η σύνταξη θα είναι: <a href="mailto:name@xxx.xx?subject=θέμα">κείμενο υπερσύνδεσης </a> 7.5. Εισαγωγή υπερσύνδεσης σε εικόνα Αν θέλουμε να ορίσουμε υπερσύνδεση σε μια εικόνα, η σύνταξη θα είναι: <a href="url"><img src="image.gif"></a> Οι εικόνες που γίνονται υπερσυνδέσεις αποκτούν ένα λεπτό (συνήθως γαλάζιο) περίγραμμα. Αν δεν θέλουμε να υπάρχει αυτό το περίγραμμα, τότε χρησιμοποιούμε στην ετικέτα <img> την ιδιότητα border με τιμή 0. Σχεδίαση ιστοσελίδων Σελίδα 30

8. Πίνακες Οι πίνακες είναι μια δομή της HTML που μας επιτρέπει να εμφανίσουμε κείμενα και γραφικά στοιχισμένα μέσα σε γραμμές και στήλες. Για τη δημιουργία πινάκων στην HTML χρησιμοποιείται η ετικέτα <table>. Η ετικέτα <table> μπορεί να έχει τις ακόλουθες ιδιότητες: border: το περίγραμμα του πίνακα σε pixels (π.χ. border=1, σημαίνει περίγραμμα πάχους 1 pixel) width: το πλάτος του πίνακα σε pixels ή ως ποσοστό του παραθύρου (π.χ. width=400 ή width=75%) align: τη στοίχιση του πίνακα (π.χ. align=center) bgcolor: χρώμα φόντου του πίνακα (π.χ. bgcolor=blue) background: Εικόνα φόντου του πίνακα (background=birds.jpg) Στην HTML ένας πίνακας αποτελείται από ένα σύνολο από γραμμές (rows) που περιέχουν κελιά (cells) με ή χωρίς περιεχόμενο. Οι στήλες ορίζονται αυτόματα βάσει του αριθμού των κελιών που υπάρχουν σε κάθε γραμμή Το περιεχόμενο των κελιών μπορεί να είναι είτε επικεφαλίδες (headings), είτε δεδομένα (data). Η διαφορά είναι ότι στις επικεφαλίδες τα περιεχόμενα εμφανίζονται με έντονα (bold) γράμματα με στοίχιση στο κέντρο. Η ετικέτα που χρησιμοποιούμε για τον ορισμό γραμμής πίνακα είναι η <tr> 2, με ιδιότητες: align: οριζόντια στοίχιση των κελιών της γραμμής, με πιθανές τιμές left (αριστερά), right (δεξιά) και center (κέντρο) valign: κατακόρυφη στοίχιση των κελιών της γραμμής, με πιθανές τιμές top (επάνω), middle (μέση) και bottom (κάτω) height: το ύψος της γραμμής 3 σε pixels (π.χ. height=50) bgcolor: χρώμα φόντου των κελιών της γραμμής background: Εικόνα φόντου της γραμμής (background=birds.jpg) 2 Οι πρώτοι browsers απαιτούσαν υποχρεωτικά να υπάρχει εντολή τέλους σε κάθε μια από τις ετικέτες γραμμής (</TR>). Σήμερα δεν είναι απαραίτητη, αλλά για λόγους συμβατότητας συνιστάται να τις χρησιμοποιούμε. 3 Η ιδιότητα height μπορεί να τοποθετηθεί και στην ετικέτα του πρώτου κελιού της γραμμής και τότε θα ισχύει για όλη τη γραμμή. Σχεδίαση ιστοσελίδων Σελίδα 31

Οι ετικέτες που χρησιμοποιούμε για τον ορισμό ενός κελιού είναι η <td> (κελί δεδομένων) και η <th> 4 (κελί επικεφαλίδας). Οι ετικέτες αυτές παίρνουν ως ιδιότητες: align: οριζόντια στοίχιση του κελιού, με πιθανές τιμές left (αριστερά), right (δεξιά) και center (κέντρο) valign: κατακόρυφη στοίχιση του κελιού, με πιθανές τιμές top (επάνω), middle (μέση) και bottom (κάτω) width 5 : το πλάτος του κελιού σε pixels (π.χ. width=100) bgcolor: χρώμα φόντου του κελιού rowspan: συγχώνευση γραμμών (π.χ. rowspan=2 σημαίνει ότι το κελί καταλαμβάνει 2 γραμμές του πίνακα) colspan: συγχώνευση στηλών (π.χ. colspan=3 σημαίνει ότι το κελί καταλαμβάνει 3 στήλες του πίνακα) background: Εικόνα φόντου του κελιού (background=birds.jpg) Ο πίνακας μπορεί να έχει και λεζάντα (caption), που εμφανίζεται συνήθως πάνω από τον πίνακα και κεντραρισμένη. Η γενική μορφή είναι: <table> <caption>λεζάντα πίνακα</caption> </table> Παράδειγμα: Ένα παράδειγμα πίνακα με περίγραμμα που έχει λεζάντα και περιλαμβάνει τέσσερις γραμμές, η πρώτη από τις οποίες είναι επικεφαλίδα, και τρεις στήλες είναι το παρακάτω: <table border=1 align=center width=40%> <caption>ελληνικές ομάδες</caption> <tr align=center height=50> <th colspan=2>ομαδα</th> 4 Οι πρώτοι browsers απαιτούσαν υποχρεωτικά να υπάρχει εντολή τέλους σε κάθε μια από τις ετικέτες επικεφαλίδας και δεδομένων (</th> και </td>). Σήμερα δεν είναι απαραίτητες, αλλά για λόγους συμβατότητας συνιστάται να τις χρησιμοποιούμε. 5 Η ιδιότητα width τοποθετείται στα κελιά (<td> ή <th>) της πρώτης γραμμής και εφαρμόζεται για όλα τα κελιά του πίνακα. Το πλάτος του πίνακα θα είναι το άθροισμα των πλατών των κελιών της πρώτης γραμμής. Σχεδίαση ιστοσελίδων Σελίδα 32

<th>εδρα</th> </tr> <tr align=center bgcolor=black> <td><img src=paok.gif width=30></td> <td><font color=white>παοκ</font></td> <td><font color=white>τουμπα</font></td> </tr> <tr align=center bgcolor=crimson> <td><img src=ael.gif width=30></td> <td><font color=white>αελ</font></td> <td><font color=white>αλκαζαρ</font></td> </tr> <tr align=center bgcolor=green> <td><img src=pao.gif width=30></td> <td><font color=white>παο</font></td> <td><font color=white>οακα</font></td> </tr> </table> Στο φυλλομετρητή θα εμφανιστεί ως εξής: Σχεδίαση ιστοσελίδων Σελίδα 33

9. Φόρμες Οι φόρμες χρησιμοποιούνται για αμφίδρομη επικοινωνία, δηλαδή όταν η ροή της πληροφορίας δεν γίνεται μόνο από τον Server που φιλοξενεί την ιστοσελίδα προς τον επισκέπτη, αλλά και το αντίθετο, όταν δηλαδή τα sites ζητούν από τους χρήστες να επιλέγουν ή να πληκτρολογούν στοιχεία. Για παράδειγμα, συμπλήρωση φορολογικής δήλωσης στο TAXIS, υποβολή στοιχείων πελάτη σε ένα ηλεκτρονικό κατάστημα και επιλογή προϊόντων, υποβολή ψήφου σε μια ηλεκτρονική δημοσκόπηση, ακόμα και η συμπλήρωση ονόματος χρήση και κωδικού πρόσβασης σε ιστοσελίδες στις οποίες είμαστε εγγεγραμμένοι (π.χ. σε ιστοσελίδες κοινωνικής δικτύωσης). Έτσι, οι φόρμες δίνουν τη δυνατότητα να μετασχηματίσουμε την ιστοσελίδα μας από μια μάζα πληροφοριών που ο επισκέπτης διαβάζει παθητικά σε μια αμφίδρομη επικοινωνία, όπου έχει έναν πιο ενεργητικό ρόλο πληκτρολογώντας στοιχεία ή κάνοντας κλικ με το ποντίκι του σε διάφορες επιλογές. Τα στοιχεία μιας φόρμας παρουσιάζονται στον πίνακα 5: Πίνακας 5: Στοιχεία φόρμας ΤΥΠΟΣ ΣΤΟΙΧΕΙΟΥ ΠΑΡΑΔΕΙΓΜΑΤΑ Πλαίσιο κειμένου (text box) Πεδίο κωδικού (password field) Περιοχή κειμένου (text area) Κουμπί επιλογών (radio button) Πλαίσιο ελέγχου (check box) Λίστα επιλογών (option list) Κουμπί (button) Σχεδίαση ιστοσελίδων Σελίδα 34

Τα στοιχεία μιας φόρμας έχουν σχεδιαστεί να δέχονται με συγκεκριμένο τρόπο (είτε με πληκτρολόγηση, είτε με επιλογή με το ποντίκι) συγκεκριμένες (σημασιολογικά) τιμές οι οποίες θα επεξεργαστούν από κάποιο πρόγραμμα. Κάθε στοιχείο μιας φόρμας θα πρέπει να έχει ένα κείμενο δίπλα του, το οποίο θα προσδίδει έναν χαρακτηρισμό στο στοιχείο της Φόρμας (π.χ.: όνομα, επώνυμο, τηλέφωνο), ώστε ο επισκέπτης της σελίδας να ξέρει ποια πληροφορία ζητά το στοιχείο αυτό. Το κείμενο αυτό ονομάζεται Λεζάντα του πεδίου. Με λίγα λόγια η Λεζάντα ενός στοιχείου της Φόρμας είναι το κείμενο που χαρακτηρίζει το περιεχόμενο του πεδίου που πρέπει να πληκτρολογήσει ή να επιλέξει ο επισκέπτης. Το κείμενο αυτό μπορούμε να το μορφοποιήσουμε με HTML ετικέτες. Για να δημιουργήσουμε μια φόρμα χρησιμοποιούμε τις ετικέτες <form> και </form>. Οι κυριότερες ιδιότητες της ετικέτας είναι: name: Με την ιδιότητα name δίνουμε ένα όνομα στη φόρμα ώστε να μπορούμε να αναφερόμαστε σε αυτή μέσα από τον κώδικα που θα επεξεργαστεί τη φόρμα. action: Η ιδιότητα action περιέχει το URL του προγράμματος (αρχείου script) στον Server το οποίο θα επεξεργαστεί τα στοιχεία της Φόρμας. Το script είναι ένα πρόγραμμα στον Server (σε γλώσσα προγραμματισμού asp, php κλπ.), το οποίο δέχεται ως είσοδο τα δεδομένα που λαμβάνει από τη φόρμα, επεξεργάζεται τα δεδομένα αυτά (π.χ. κάνει αναζήτηση σε μια Βάση Δεδομένων) και επιστρέφει στον browser μια HTML σελίδα (π.χ. τα αποτελέσματα της αναζήτησης στη Βάση Δεδομένων). method: Η method καθορίζει τον τρόπο με τον οποίο στέλνονται τα δεδομένα της Φόρμας στο Server και μπορεί να πάρει τις τιμές get ή post. Ανάμεσα από τις ετικέτες <form> και </form> τοποθετούμε τα στοιχεία της φόρμας τις Λεζάντες των στοιχείων, μαζί με ετικέτες μορφοποίησης. Τα περισσότερα στοιχεία της φόρμας εισάγονται με την ετικέτα <input>, η οποία δεν έχει ετικέτα τέλους. Οι κυριότερες ιδιότητες της ετικέτας <input> είναι: name: Δίνουμε ένα μοναδικό όνομα στο στοιχείο της φόρμας (δεν πρέπει να υπάρχουν στοιχεία φόρμας με τα ίδια ονόματα). type: Καθορίζει τον τύπο του στοιχείου της φόρμας (Πλαίσιο κειμένου, Περιοχή κειμένου, Κουμπί επιλογών, Πλαίσιο ελέγχου, Κουμπί). value: Δίνουμε μια αρχική τιμή στο στοιχείο της φόρμας. Σχεδίαση ιστοσελίδων Σελίδα 35

Ειδικότερα, για κάθε τύπο στοιχείου φόρμας έχουμε τια παρακάτω περιπτώσεις: Πλαίσιο κειμένου: Ο χρήστης πληκτρολογεί κείμενο σε μία μόνο γραμμή (π.χ. Όνομα, Ονοματεπώνυμο, E-mail). Στην ιδιότητα type χρησιμοποιούμε την τιμή text. Στην ιδιότητα value μπορούμε να δώσουμε ως τιμή κάποιο κείμενο που θα εμφανιστεί μέσα στο πλαίσιο κειμένου. Μπορούμε επιπλέον να καθορίσουμε το μήκος του πεδίου σε χαρακτήρες με την ιδιότητα size και το πλήθος των χαρακτήρων που μπορεί που μπορεί να πληκτρολογήσει ο επισκέπτης με την ιδιότητα maxlength. Για παράδειγμα: <input type="text" name="textframe" size="30" maxlength="40" value="πληκτρολογήστε το όνομά σας εδώ"> Πλαίσιο κειμένου με κωδικό: Χρησιμοποιείται όταν θέλουμε ο χρήστης να πληκτρολογήσει κάποιον Κωδικό μέσα σε ένα πεδίο κειμένου. Στο πλαίσιο κειμένου του Password εμφανίζονται αστεράκια ή τελίτσες, ανάλογα με τον browser που χρησιμοποιείται. Στην ιδιότητα type χρησιμοποιούμε την τιμή password. Η ιδιότητα value δεν χρησιμοποιείται. Μπορούμε και εδώ να καθορίσουμε το μήκος του πεδίου σε χαρακτήρες με την ιδιότητα size και το πλήθος των χαρακτήρων που μπορεί που μπορεί να πληκτρολογήσει ο επισκέπτης με την ιδιότητα maxlength. Για παράδειγμα: <input type="password" name="passfrm" size="20" maxlength="30"> Κουμπιά επιλογών: Ένας αριθμός από κουμπιά επιλογής ομαδοποιούνται, έτσι ώστε μόνο ένα από αυτά να μπορεί να επιλέγεται από τον χρήστη (π.χ. Φύλο). Στην ιδιότητα type χρησιμοποιούμε την τιμή radio. Στα κουμπιά επιλογής, η ιδιότητα name πρέπει να έχει την ίδια τιμή. Με αυτό τον τρόπο ομαδοποιούνται τα κουμπιά και μπορεί να επιλεγεί από τον χρήστη μόνο ένα από αυτά. Αν, για παράδειγμα, τα κουμπιά που αντιστοιχούν στις τιμές «Άνδρας» και «Γυναίκα» είχαν διαφορετική τιμή στην ιδιότητα name, ο χρήστης θα μπορούσε να επιλέξει και τα δύο. Για παράδειγμα: Άνδρας <input type="radio" name="gender" value="male"> Γυναίκα <input type="radio" name="gender" value="female"> Η ιδιότητα value ορίζει την τιμή που θα στείλει η φόρμα στον Server. Αν ο επισκέπτης επιλέξει την επιλογή «Άνδρας» τότε στον Server θα σταλεί η τιμή "male", ενώ αν επιλέξει «Γυναίκα» θα σταλεί η τιμή "female". Αν θέλουμε κάποιο από τα ομαδοποιημένα κουμπιά επιλογής να είναι προεπιλεγμένο, τότε στην ετικέτα αυτού του κουμπιού χρησιμοποιούμε την ιδιότητα checked που δεν παίρνει τιμή. Πλαίσιο ελέγχου: Συχνά και τα πλαίσια ελέγχου είναι ομαδοποιημένα (εμφανισιακά), αλλά υπάρχει δυνατότητα επιλογής κανενός, ενός ή και περισσότερων από αυτά, καθιστώντας τα κατάλληλα για περιπτώσεις πολλαπλών επιλογών. Στην ιδιότητα type Σχεδίαση ιστοσελίδων Σελίδα 36

χρησιμοποιούμε την τιμή checkbox. Όταν ένα πλαίσιο ελέγχου είναι τσεκαρισμένο, τότε η τιμή του πεδίου που θα σταλεί στον Server ορίζεται από την ιδιότητα value. Για παράδειγμα: Αθλητισμός Θέατρο Ταξίδια Κινηματογράφος <input type="checkbox" name="sports" value="1"><p> <input type="checkbox" name="theater" value="1"><p> <input type="checkbox" name="travel" value="1"><p> <input type="checkbox" name="movies" value="1"><p> Αν επιλέξουμε το πλαίσιο ελέγχου με λεζάντα «Ταξίδια», τότε η τιμή του πεδίου με όνομα travel θα πάρει την τιμή 1. Όταν κάποιο από τα κουτιά δεν είναι τσεκαρισμένο τότε η τιμή του πεδίου θα είναι κενή. Αν θέλουμε κάποια από τα πλαίσια ελέγχου να είναι προεπιλεγμένα, τότε στην ετικέτα αυτού του κουμπιού χρησιμοποιούμε την ιδιότητα checked που δεν παίρνει τιμή. Κουμπί υποβολής: Σε κάθε φόρμα υπάρχει ένα κουμπί υποβολής των στοιχείων της φόρμας. Το κουμπί αυτό τοποθετείται στο τέλος της φόρμας και πατιέται από τον επισκέπτη όταν αυτός έχει ολοκληρώσει τη συμπλήρωση της φόρμας. Στην ιδιότητα type χρησιμοποιούμε την τιμή submit και στην ιδιότητα value χρησιμοποιούμε το κείμενο που θέλουμε να εμφανίζεται στο κουμπί (π.χ. Υποβολή, Submit ή Αποστολή στοιχείων). Το πάτημα του Κουμπιού υποβολής της Φόρμας στέλνει στον Server τα δεδομένα που πληκτρολόγησε ο χρήστης. Για παράδειγμα: <input type="submit" name="submitfrom" value="αποστολή Στοιχείων"> Θα εμφανιστεί: Κουμπί καθαρισμού της φόρμας: Συνήθως στις φόρμες υπάρχει και ένα κουμπί καθαρισμού της φόρμας από τα στοιχεία που έχει συμπληρώσει ο επισκέπτης (όταν μετανιώνει για τη συμπλήρωση των στοιχείων ή θέλει να εισαγάγει άλλα στοιχεία). Το πάτημα του Κουμπιού καθαρισμού της φόρμας καθαρίζει όλα τα πεδία της φόρμας από τα δεδομένα που πληκτρολόγησε ή επέλεξε ο επισκέπτης. Στην ιδιότητα type χρησιμοποιούμε την τιμή reset και στην ιδιότητα value χρησιμοποιούμε το κείμενο που θέλουμε να εμφανίζεται στο κουμπί (π.χ. Καθαρισμός φόρμας ή Reset). Για παράδειγμα: <input type="reset" name="reset" value="καθαρισμός φόρμας"> Σχεδίαση ιστοσελίδων Σελίδα 37

Εκτός από την ετικέτα <input>, μπορούμε επιπλέον να χρησιμοποιήσουμε τις ετικέτες <textarea> και <select>, με τις οποίες ορίζουμε μία Λίστα επιλογών και μία Περιοχή κειμένου, αντίστοιχα. Ειδικότερα: Περιοχή κειμένου: Για να εισάγουμε Περιοχή Κειμένου σε μία Φόρμα χρησιμοποιούμε την ετικέτα <textarea>, στην οποία μπορούμε να προσδιορίσουμε το πλάτος της περιοχής κειμένου σε πλήθος ορατών χαρακτήρων (ιδιότητα cols) και το ύψος της περιοχής κειμένου σε πλήθος ορατών γραμμών (ιδιότητα rows). Το κείμενο που θα πληκτρολογήσει ο επισκέπτης μπορεί να έχει περισσότερες γραμμές ή στήλες, αλλά για να τις δει θα χρειαστεί να κάνει οριζόντιο ή κατακόρυφο scrolling. Η χρήση και των δύο αυτών ιδιοτήτων είναι απαραίτητη. Αυτό που θα σταλεί στον Server είναι ολόκληρο το κείμενο που πληκτρολόγησε στη Περιοχή κειμένου ο επισκέπτης. Για παράδειγμα: <textarea name="area" cols="30" rows="3"></textarea> Λίστα επιλογών: Μας επιτρέπει να προβάλουμε σε μικρό χώρο στη φόρμα (όσο και το πλαίσιο κειμένου) μια μεγάλη ποσότητα στοιχείων (π.χ. όλες τις χώρες του κόσμου ή όλες τις γλώσσες), από τα οποία ο επισκέπτης θα επιλέξει ένα (υπάρχει δυνατότητα και για περισσότερα, αλλά δεν συνηθίζεται). Οι επιλογές εμφανίζονται με απλό πάτημα του βέλους δεξιά στη λίστα. Για να εισάγουμε Λίστα Επιλογών στην Φόρμα μας χρησιμοποιούμε την ετικέτα <select> που έχει ως ιδιότητα τη name με την οποία δίνουμε ένα μοναδικό όνομα σε αυτό το στοιχείο της φόρμας. Η χρήση της ιδιότητας size στην ετικέτα <select> ορίζει τον αριθμό γραμμών που θα εμφανίζονται στο πλαίσιο επιλογών. Στη συνέχεια με την ετικέτα <option> ορίζουμε τις επιμέρους επιλογές της λίστας. Η ετικέτα <option> τοποθετείται μέσα στις ετικέτες <select> και </select> και αντιστοιχεί σε μια επιλογή της λίστας. Όσες επιλογές επιθυμούμε να περιλαμβάνει η Λίστα Επιλογών τόσες ετικέτες <option> πρέπει να προσθέσουμε. Μεταξύ των ετικετών <option> και </option> γράφουμε το κείμενο που θέλουμε να εμφανίζεται στην λίστα. Με την ιδιότητα value της <option> ορίζουμε την τιμή που θα σταλεί στον Server. Με την ιδιότητα selected σε μία από τις επιλογές, ορίζουμε ότι αυτή η επιλογή είναι προεπιλεγμένη. Για παράδειγμα: <select name="countries"> <option value="gr" selected="selected" >Ελλάδα</option> <option value="fr">γαλλία</option> <option value="es">ισπανία</option> <option value="ge">γερμανία</option> <option value="it">ιταλία</option> Σχεδίαση ιστοσελίδων Σελίδα 38

<option value="ne">ολλανδία</option> <option value="po">πορτογαλία</option> <option value="uk">αγγλία</option> </select> Στο φυλλομετρητή θα εμφανιστεί ως εξής: Αν ο επισκέπτης κάνει κλικ στο βελάκι δεξιά, το αποτέλεσμα θα είναι: Αν επιθυμούμε ο επισκέπτης να έχει τη δυνατότητα να επιλέξει παραπάνω από μία επιλογές (έχοντας πατημένο το κουμπί Ctrl του πληκτρολογίου του), προσθέτουμε την ιδιότητα multiple (χωρίς τιμή) στην ετικέτα <select>. Σχεδίαση ιστοσελίδων Σελίδα 39