ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001
Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά αντικείμενα, όπως: κείμενο, εικόνες και υπερσύνδεσμους σε άλλα αντικείμενα! Η HTML δεν δημιουργεί αυτά τα αντικείμενα, αλλά λέει σε ένα φυλομετρητή που και πώς να τοποθετήσει τα αντικείμενα αυτά πάνω στην επιφάνεια της σελίδας! Η HTML είναι επεκτάσιμη γλώσσα, υπό την έννοια ότι σε αυτή μπορούν να προστεθούν νέες ιδιότητες και λειτουργίες, χωρίς να ακυρώνονται υπερκείμενα ανεπτυγμένα σε παλαιότερες εκδόσεις της! Κάθε HTML έγγραφο είναι ένα έγγραφο κειμένου (δηλ. περιέχει ASCII χαρακτήρες) και μπορούν να δημιουργηθούν όπως το notepad! Τα αρχεία HTML έχουν συνήθως κατάληξη.html ή.htm! Ο έλεγχος ενός αρχείου HTML μπορεί να γίνει «τοπικά» με τη χρήση φυλομετρητή και χωρίς να είναι αναγκάια η εγκατάσταση του αρχείου σε κάποιο εξυπηρετητή (web server) 2
Βασική Δομή HTML Εγγράφων <HTML> document Document <HEAD> Σηματοδοτεί την ύπαρξη HTML κώδικα Η επικεφαλίδα περιέχει πληροφρορίες σχετικά με το ίδιο το υπερκείμενο (πχ τον τίτλο, λέξεις κλειδιά, κτλ) Document <BODY> Τα κυρίως περιεχόμενο που περιλαμβάνει τα στοιχεία που στοιχειοθετούνται και αναπαρίστανται στην οθόνη 3
Παράδειγμα simple.html - Notepad <HTML> <HEAD> <TITLE>Hello World! </TITLE> </HEAD> <BODY> Αυτή είναι μια πολύ απλή ιστοσελίδα. Τουλάχιστον έχει κάποιο περιεχόμενο κι έχει και τίτλο! </BODY> </HTML> 4
Στοιχεία και ετικέτες της HTML! Κάθε δομικό συστατικό (στοιχείο) ενός HTML εγγράφου αποτελούνται από 3 μέρη: " Την ετικέτα έναρξης (start tag), < > " Το περιεχόμενό του " Την ετικέτα λήξης (end tag), </ > Πχ <TITLE> Hello World </TITLE>! Μπορούν επίσης να υπάρξουν και «άδεια στοιχεία», τα οποία: " Δεν περιλαμβάνουν περιεχόμενο " Δεν έχουν ετικέτα λήξης (αναπαριστώνται μόνο από την ετικέτα έναρξης) Πχ το στοιχείο <BR> που ορίζει την αλλαγή γραμμής! Οι ετικέτες των στοιχείων μπορεί να γράφονται είτε με κεφαλαία είτε με μικρά γράμματα: <TITLE>, <title>, <TiTle>! Ένας φυλομετρητής δεν λαμβάνει υπόψη τα επιπλέον κενά που πληκτρολογούμε στο περιεχόμενο ενός στοιχείου, καθώς επίσης και τις ετικέτες που δεν αναγνωρίζει 5
Στοιχεία κι ετικέτες (συνέχεια)! Προσοχή! Τα στοιχεία πρέπει να είναι φωλιασμένα κι όχι να επικαλύπτονται <HTML> <HEAD> <HEAD> Σωστό <TITLE> </TITLE> </HEAD> <BODY> <TITLE> </HEAD> </TITLE> Λάθος </BODY> </HTML> 6
Μορφοποίηση κειμένου formatting.html - Notepad <HTML> <HEAD> <TITLE>Text Formatting Demo</TITLE> </HEAD> <BODY> <B> Αυτό το κείμενο είναι έντονο. </B> <BR> <I> Αυτό το κείμενο είναι πλάγιο. </I> <BR> <B><I> Αυτό το κείμενο είναι έντονο και πλάγιο. </I></B> <BR> Αυτό το κείμενο είναι <B> κατα</b>πληκτικό. </BODY> </HTML> 7
Διαστήματα breaks.html - Notepad <HTML> <HEAD> <TITLE>Creating Breaks in Text </TITLE> </HEAD> <BODY> Οι μακριές προτάσεις 'τυλίγονται' αυτόματα ανάλογα με το μέγεθος του παραθύρου του φυλομετρητή, αλλά η αλλαγή γραμμής (line break) <BR> διακόπτει μια γραμμή σε επιθυμητό σημείο. Το στοιχείο της παραγράφου <P> προκαλεί τη διακοπή μιας γραμμής ακολουθούμενη από μια κενή γραμμή. Ο οριζόντιος χάρακας (horizontal rule), μπορείτε να δείτε τι ακριβώς κάνει. <HR> Είναι ένας όμορφος τρόπος για να ξεχωρίζουμε κάτι από το υπόλοιπο κείμενο, όπως αυτή την πρόταση. <HR> </BODY> </HTML> 8
Διαστήματα 9
Επικεφαλίδες headers.html - Notepad <HTML> <HEAD> <TITLE>Headers </TITLE> </HEAD> <BODY> <H1> Τίτλος </H1> <H2> Κεφάλαιο 1 </H2> <H3> Ενότητα 1 </H3> <H4> Υπο-ενότητα 1 </H5> <H6> Υπο-υπο-ενότητα 1 </H6> </BODY> </HTML> 10
Διαμορφωμένο κείμενο και αποσπάσματα headers.html - Notepad <HTML> <HEAD> <TITLE>CDs Online </TITLE> </HEAD> <BODY> <H1> Καλώς ήλθατε στο CDs Online </H1> <HR> <B>Στόχος μας είναι:</b> <BLOCKQUOTE> Nα παρέχουμε στους πελάτες μας μια αναπόσπαστη αγοραστική εμπειρία, με την καλύτερη συλλογή στις χαμηλότερες τιμές στον κόσμο. </BLOCKQUOTE> <HR> <B> Οι σημερινές μας προσφορές:</b> <PRE> Santana: Supernatural 4.999 δρχ Metallica: Master of Puppets 3.999 δρχ </PRE> </BODY> </HTML> 11
Διαμορφωμένο κείμενο και αποσπάσματα 12
Κατηγορήματα (Attributes)( HTML! Καθορίζουν τις ιδιότητες ενός στοιχείου. Πχ το στοιχείο HR έχει τα κατηγορήματα: " το WIDTH, που καθορίζει το μήκος της γραμμής σε σχέση με το πλάτος της σελίδας (πχ 70%) " Το SIZE, που καθορίζει το πάχος της γραμμής σε pixels (πχ 10) " Το ALIGN, που καθορίζει τη στοίχιση της γραμμής (δηλ. left, right, center)! Παράδειγμα: " <HR SIZE=6 WIDTH= 10% ALIGN= left>! Όταν σε ένα φυλομετρητή δεν δίνουμε συγκεκριμένες οδηγίες για το πώς να εμφανίσει ένα στοιχείο, τότε χρησιμοποιεί τις αρχικές του ρυθμίσεις! Οι αρχικές ρυθμίσεις εξαρτώνται από το συγκεκριμένο φυλομετρητή 13
Παράδειγμα headers.html - Notepad <HTML> <HEAD> <TITLE>HR Demo </TITLE> </HEAD> <BODY> <HR WIDTH="50% > <HR WIDTH="75%" ALIGN=left > <HR SIZE=6 WIDTH="50%" ALIGN=right > <HR SIZE=1 WIDTH="10%" ALIGN=left > <HR SIZE=90 WIDTH= 90% > </BODY> </HTML> 14
Κατηγορήματα (συνέχεια)! Τα κατηγορήματα προσδιορίζονται μόνο στις ετικέτες έναρξης των στοιχείων και έχουν τη μορφή: <TAG ATTRIBUTE= value > <TAG>! Παράδειγμα: <P ALIGN=LEFT> The paragraph to be aligned <P>! Η τιμή του κατηγορήματος περιλαμβάνεται μέσα σε απλά ή διπλά εισαγωγικά! Τα εισαγωγικά είναι προαιρετικά αν η τιμή του κατηγορήματος περιέχει μόνο γράμματα μεταξύ A-z, a-z, ψηφία (0-9), παύλες - και τελείες.! Τα ονόματα των κατηγορημάτων είναι case-insensitive ενώ οι τιμές τους είναι case-sensitive 15
Προσδιορίζοντας το στοιχείο BODY! Τα κατηγορήματα του στοιχείου BODY επηρεάζουν την εμφάνιση ολόκληρης της σελίδας " ALINK, προσδιορίζει το χρώμα των ενεργών υπερσυνδέσμων " BACKGROUND, προσδιορίζει την εικόνα φόντου της σελίδας " BGCOLOR, προσδιορίζει το χρώμα φόντου της σελίδας " LINK, προσδιορίζει το χρώμα των συνδέσμων " TEXT, προσδιορίζει το χρώμα του κειμένου " VLINK, προσδιορίζει το χρώμα των συνδέσμων που έχουν επισκεφτεί! Παράδειγμα Ο παρακάτω κώδικας <BODY BGCOLOR= #FFFFFFF LINK= #009900 VLINK= #990000 > Αντιστοιχεί σε σελίδα με λευκό φόντο, μαύρο κείμενο (αρχική τιμή), πράσινους υπερσύνδεσμους και κόκκινους υπερσύνδεσμους που έχουν επισκεφτεί. 16
Προσδιορίζοντας το στοιχείο FONT! Προσδιορίζει τη γραμματοσειρά που χρησιμοποιούμε. Παίρνει τα εξής κατηγορήματα: " COLOR, προσδιορίζει το χρώμα των χαρακτήρων " FACE, προσδιορίζει την οικογένεια πχ Courier, Helvetica, Times " SIZE: προσδιορίζει το μέγεθος. Παίρνει είτε απόλυες τιμές (1-7) ή σχετικές (±3)! Παράδειγμα <FONT FACE = arial SIZE= +2 COLOR =red> Αυτό το κείμενο είναι κόκκινο </FONT> 17