2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText Markup Language και πραγματοποιεί κυρίως την μορφοποίηση και την υπερσύνδεσή τους. Η γλώσσα περιλαμβάνει στοιχεία τα οποία ονομάζονται ετικέτες (tags). Τα tags διακρίνονται σε tags αρχής και tags τέλους. Ένα tag αρχής εμπερικλείεται σε <> ενώ ένα tag τέλους σε </> π.χ. <p>this is text</p> Κάθε tag αρχής πρέπει να συνοδεύεται με ένα tag τέλους. Εξαίρεση αποτελεί το <br>. Δείγμα Κώδικα HTML Ένα χαρακτηριστικό δείγμα κώδικά της γλώσσας σήμανσης HTML παρουσιάζεται παρακάτω <html> <head> <title>my first page</title> </head> <body> <p>hello world</p> </body> </html> Βασικές ετικέτες Οι βασικές ετικέτες της γλώσσας html είναι <html> Η ετικέτα αυτή δηλώνει ότι το αρχείο περιέχει κώδικα σε HTML. <head> Η ετικέτα αυτή προσδιορίζει την κεφαλίδα του εγγράφου (τίτλος και άλλες σημαντικές πληροφορίες) <title> Στην ετικέτα αυτή περικλείεται ο τίτλος του εγγράφου που εμφανίζεται στην μπάρα του φυλλομετρητή. <body> Η ετικέτα αυτή περικλείει το περιεχόμενο του εγγράφου το οποίο εμφανίζεται σε μία ιστοσελίδα. <p> Η ετικέτα αυτή ορίζει μία νέα παράγραφο. <h1> <h2> <h3>, <h4>, <h5>, <h6> Οι ετικέτες αυτές καθορίζουν το μέγεθος των επικεφαλίδων. Το <h1> είναι το μεγαλύτερο μέγεθος και το <h6> είναι το μικρότερο.
<br> Η ετικέτα <br> αναγκάζει το κείμενο να συνεχίσει στη επόμενη σειρά. <center> Το κείμενο που περικλείεται σε αυτή την ετικέτα εμφανίζεται στο κέντρο. <b> Το κείμενο που περικλείεται σε αυτή την ετικέτα εμφανίζεται με έντονη γραφή (bold). <i> Το κείμενο που περικλείεται σε αυτή την ετικέτα εμφανίζεται με πλάγια γραφή (italic). <u> Το κείμενο που περικλείεται σε αυτή την ετικέτα εμφανίζεται με υπογράμμιση (underline). Ιδιότητες ετικέτών Οι ετικέτες αρκετές φορές χαρακτηρίζονται από συγκεκριμένες ιδιότητες (attributes) οι οποίες προδίδουν στην ετικέτα διάφορα χαρακτηριστικά. Κάθε μια από αυτές τις τιμές επιδρά διαφορετικά στην εμφάνιση ή την λειτουργία των ετικετών. Μια ιδιότητα μπαίνει αμέσως μετά το όνομα της ετικέτας και αποτελείται από το όνομα της και μια τιμή μέσα σε διπλά εισαγωγικά. π.χ. <p align="justify"> This is a justified paragraph. </p> Εισαγωγή εικόνων Οι εικόνες μπορούν να εισαχθούν στην html με χρήση του ακόλουθου κώδικα <img src="ship.jpg" width="100" height="30" align="top" border="2" alt="this is a ship"/> Οι ιδιότητες width και height ορίζουν τις διαστάσεις της εικόνας σε pixels. Συνήθως ταυτίζονται με τις πραγματικές διαστάσεις της εικόνας. Όμως αν χρειάζεται η εικόνα να εμφανιστεί με μικρότερες ή μεγαλύτερες διαστάσεις προσαρμόζονται ανάλογα οι ιδιότητες width και height. Αυτό δεν αποτελεί καλή προγραμματιστική τεχνική γιατί οι εικόνες μπορούν να εμφανιστούν αλλοιωμένες. Σε αυτές τις περιπτώσεις είναι προτιμότερο να επεξεργάζεται με κάποιο λογισμικό επεξεργασίας γραφικών και στην συνέχεια να εισάγεται στην ιστοσελίδα. Δημιουργία συνδέσμων Οι σύνδεσμοι προς άλλες σελίδες δημιουργούνται με την ετικέτα <a> (από την λέξη anchor). Το κείμενο που γράφεται ανάμεσα στην ετικέτα αρχής και τέλους είναι το κείμενο που φαίνεται στην οθόνη ενώ η διευθυνση του συνδέσμου προσδιορίζεται από την ιδιότητα href. π.χ. <a href="/folder/info.html">to internal page</a> <a href="http://www.google.com">google</a>
Η ιδιότητα target καθορίζει τον τρόπο εμφάνισης της σελίδας του συνδέσμου. Οι τιμές που μπορεί να πάρει αυτή η ιδιότητα φαίνονται στον παρακάτω πίνακα Τιμή Λειτουργία _self ανοίγει την σελίδα συνδέσμου στην ίδια σελίδα _blank ανοίγει την σελίδα συνδέσμου σε νέο παράθυρο. _top ανοίγει την σελίδα συνδέσμου στο ίδιο παράθυρο αγνοώντας τα πλαίσια που τυχόν υπάρχουν _parent ανοίγει την σελίδα συνδέσμου στο "πατρικό πλαίσιο " Σύνδεσμοι ηλεκτρονικής αλληλογραφίας Οι σύνδεσμοι μπορούν να χρησιμοποιηθούν επίσης για την άμεση αποστολή email. Σε αυτή την περίπτωση έχουμε τον ακόλουθο κώδικα <a href="mailto:someone@example.com?subject=greetings" target="_top">send email</a> Με αυτή την εντολή ανοιγεί η προεπιλεγμένη εφαρμογή ηλεκτρονικού ταχυδρομείου με εισαχθέντα τα στοιχεία παραλήπτη ή θέματος. Φόρμες Κάποιες ιστοσελίδες ειδικά τα τελευταία χρόνια προσαρμόζουν το περιεχόμενο τους σύμφωνα με στοιχεία που παρέχει ο χρήστης κατά την περιήγησή του. Η αποστολή δεδομένων από κάποιον χρήστη προς τον web server πραγματοποιείται συνήθως μέσα από φόρμες HTML (HTML forms). Κατά αυτό τον τρόπο επιτυγχάνεται διαδραστικότητα στο περιεχόμενο μιας σελίδας. Χαρακτηριστικό παράδειγμα φορμας φαίνεται παρακάτω Σε μία φόρμα ο επισκέπτης, αφού συμπληρώσει τα πεδία πατάει το κουμπί αποστολής οπότε τα δεδομένα αποστέλλονται στον server μέσω του πρωτοκόλλου HTTP. Έπειτα ο Server επεξεργάζεται με κάποιο πρόγραμμα script τις τιμές των πεδίων και επιστρέφει στον browser του επισκέπτη μια HTML σελίδα. Τα περιεχόμενα της σελίδας αυτής μπορεί να είναι οτιδήποτε, από μια απλή απάντηση μέχρι επιστροφή αποτελέσματος σε ερώτηση προς μια Βάση Δεδομένων.
Ένα απλό δείγμα κώδικα για την δημιουργία μίας απλής φόρμας φαίνεται παρακάτω <form name="input" action="demo_form_action.asp" method="post"> Username: <input type="text" name="user"> <input type="submit" value="submit"> </form> Οι είσοδος δεδομένων πραγματοποιείται από την ετικέτα input όπου μπορεί να έχει τους ακόλουθους τύπους. Text εισαγωγή κειμένου μιας γραμμής Password εισαγωγή κειμένου όπου οι χαρακτήρες του κειμένου εμφανίζονται με ****** Hidden εισαγωγή κειμένου όπου οι χαρακτήρες του κειμένου δεν εμφανίζονται Button κουμπί για κάποια ενέργεια (π.χ., Submit) Checkbox πολλαπλές επιλογές πολλαπλές επιλογές (µε τετράγωνα) Radio μια επιλογή από σύνολο επιλογών (µε κύκλους) File επιλογή αρχείου για upload (π.χ. upload) Textarea εισαγωγή μεγάλου κειμένου Submit αποστολή των πληροφοριών Reset διαγραφή επιλογών ή στοιχείων Ένα δείγμα κώδικα για την υλοποίηση φόρμας εισαγωγή στοιχείων ασθενή θα μπορούσε να είναι το ακόλουθο. <form class="form_insert" action="insert_patient.php" method="post"> <h1>εισαγωγή Ασθενή</h1> <table width="390" border="0"> <tr valign="middle"> <td align="right" valign="middle">αρ. Καρτέλας:</td> <td valign="middle"><input type="int" name="card_no" value="" class="text"></td> <td><div align="right">επώνυμο:</div></td> <td><input type="text" name="surname" value="" class="text"></td> <td><div align="right">όνομα:</div></td> <td><input type="text" name="name" value="" class="text"></td> <td><div align="right">εθνικότητα:</div></td> <td><input type="text" name="ethnicity" id="ethnicity" class="text"></td> <td><div align="right">ηλικία:</div></td> <td><input type="int" name="age" value="" class="text"></td> <td><div align="right">τηλέφωνο:</div></td> <td><input type="text" name="telephone" value="" class="text"></td>
<td><div align="right">εγγάμος:</div></td> <td align="left"><input type="checkbox" name="married" id="checkbox" value="1"></td> </table> <div align="right"> <input type="submit" value="αποθήκευση" name="save" id="save_button" class="submit" /><br /> <input type="button" value="κλείσιμο" name="close" id="close_button" onclick='jquery("#facebox_overlay").click();' class="submit" /> </div> </form></form>