ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ"

Τρύφαινα Ελευθερίου
8 χρόνια πριν
Προβολές:

1 ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001

2 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά αντικείμενα, όπως: κείμενο, εικόνες και υπερσύνδεσμους σε άλλα αντικείμενα! Η HTML δεν δημιουργεί αυτά τα αντικείμενα, αλλά λέει σε ένα φυλομετρητή που και πώς να τοποθετήσει τα αντικείμενα αυτά πάνω στην επιφάνεια της σελίδας! Η HTML είναι επεκτάσιμη γλώσσα, υπό την έννοια ότι σε αυτή μπορούν να προστεθούν νέες ιδιότητες και λειτουργίες, χωρίς να ακυρώνονται υπερκείμενα ανεπτυγμένα σε παλαιότερες εκδόσεις της! Κάθε HTML έγγραφο είναι ένα έγγραφο κειμένου (δηλ. περιέχει ASCII χαρακτήρες) και μπορούν να δημιουργηθούν όπως το notepad! Τα αρχεία HTML έχουν συνήθως κατάληξη.html ή.htm! Ο έλεγχος ενός αρχείου HTML μπορεί να γίνει «τοπικά» με τη χρήση φυλομετρητή και χωρίς να είναι αναγκάια η εγκατάσταση του αρχείου σε κάποιο εξυπηρετητή (web server) 2

Η HTML είναι επεκτάσιμη γλώσσα, υπό την έννοια ότι σε αυτή μπορούν να προστεθούν νέες ιδιότητες και λειτουργίες, χωρίς να ακυρώνονται υπερκείμενα ανεπτυγμένα σε παλαιότερες εκδόσεις της!

3 Βασική Δομή HTML Εγγράφων <HTML> document Document <HEAD> Σηματοδοτεί την ύπαρξη HTML κώδικα Η επικεφαλίδα περιέχει πληροφρορίες σχετικά με το ίδιο το υπερκείμενο (πχ τον τίτλο, λέξεις κλειδιά, κτλ) Document <BODY> Τα κυρίως περιεχόμενο που περιλαμβάνει τα στοιχεία που στοιχειοθετούνται και αναπαρίστανται στην οθόνη 3

υπερκείμενο (πχ τον τίτλο, λέξεις κλειδιά, κτλ) Document <BODY> Τα κυρίως

4 Παράδειγμα simple.html - Notepad <HTML> <HEAD> <TITLE>Hello World! </TITLE> </HEAD> <BODY> Αυτή είναι μια πολύ απλή ιστοσελίδα. Τουλάχιστον έχει κάποιο περιεχόμενο κι έχει και τίτλο! </BODY> </HTML> 4

5 Στοιχεία και ετικέτες της HTML! Κάθε δομικό συστατικό (στοιχείο) ενός HTML εγγράφου αποτελούνται από 3 μέρη: " Την ετικέτα έναρξης (start tag), < > " Το περιεχόμενό του " Την ετικέτα λήξης (end tag), </ > Πχ <TITLE> Hello World </TITLE>! Μπορούν επίσης να υπάρξουν και «άδεια στοιχεία», τα οποία: " Δεν περιλαμβάνουν περιεχόμενο " Δεν έχουν ετικέτα λήξης (αναπαριστώνται μόνο από την ετικέτα έναρξης) Πχ το στοιχείο <BR> που ορίζει την αλλαγή γραμμής! Οι ετικέτες των στοιχείων μπορεί να γράφονται είτε με κεφαλαία είτε με μικρά γράμματα: <TITLE>, <title>, <TiTle>! Ένας φυλομετρητής δεν λαμβάνει υπόψη τα επιπλέον κενά που πληκτρολογούμε στο περιεχόμενο ενός στοιχείου, καθώς επίσης και τις ετικέτες που δεν αναγνωρίζει 5

6 Στοιχεία κι ετικέτες (συνέχεια)! Προσοχή! Τα στοιχεία πρέπει να είναι φωλιασμένα κι όχι να επικαλύπτονται <HTML> <HEAD> <HEAD> Σωστό <TITLE> </TITLE> </HEAD> <BODY> <TITLE> </HEAD> </TITLE> Λάθος </BODY> </HTML> 6

7 Μορφοποίηση κειμένου 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

<B> Αυτό το κείμενο είναι έντονο. </B> <BR> <I> Αυτό το κείμενο είναι πλάγιο.

8 Διαστήματα breaks.html - Notepad <HTML> <HEAD> <TITLE>Creating Breaks in Text </TITLE> </HEAD> <BODY> Οι μακριές προτάσεις 'τυλίγονται' αυτόματα ανάλογα με το μέγεθος του παραθύρου του φυλομετρητή, αλλά η αλλαγή γραμμής (line break) <BR> διακόπτει μια γραμμή σε επιθυμητό σημείο. Το στοιχείο της παραγράφου <P> προκαλεί τη διακοπή μιας γραμμής ακολουθούμενη από μια κενή γραμμή. Ο οριζόντιος χάρακας (horizontal rule), μπορείτε να δείτε τι ακριβώς κάνει. <HR> Είναι ένας όμορφος τρόπος για να ξεχωρίζουμε κάτι από το υπόλοιπο κείμενο, όπως αυτή την πρόταση. <HR> </BODY> </HTML> 8

μέγεθος του παραθύρου του φυλομετρητή, αλλά η αλλαγή γραμμής (line break) <BR> διακόπτει μια γραμμή σε επιθυμητό σημείο.

9 Διαστήματα 9

10 Επικεφαλίδες 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

11 Διαμορφωμένο κείμενο και αποσπάσματα 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 δρχ Metallica: Master of Puppets δρχ </PRE> </BODY> </HTML> 11

<B>Στόχος μας είναι:</b> <BLOCKQUOTE> Nα παρέχουμε στους πελάτες μας μια αναπόσπαστη αγοραστική εμπειρία, με την

12 Διαμορφωμένο κείμενο και αποσπάσματα 12

13 Κατηγορήματα (Attributes)( HTML! Καθορίζουν τις ιδιότητες ενός στοιχείου. Πχ το στοιχείο HR έχει τα κατηγορήματα: " το WIDTH, που καθορίζει το μήκος της γραμμής σε σχέση με το πλάτος της σελίδας (πχ 70%) " Το SIZE, που καθορίζει το πάχος της γραμμής σε pixels (πχ 10) " Το ALIGN, που καθορίζει τη στοίχιση της γραμμής (δηλ. left, right, center)! Παράδειγμα: " <HR SIZE=6 WIDTH= 10% ALIGN= left>! Όταν σε ένα φυλομετρητή δεν δίνουμε συγκεκριμένες οδηγίες για το πώς να εμφανίσει ένα στοιχείο, τότε χρησιμοποιεί τις αρχικές του ρυθμίσεις! Οι αρχικές ρυθμίσεις εξαρτώνται από το συγκεκριμένο φυλομετρητή 13

καθορίζει το πάχος της γραμμής σε pixels (πχ 10) " Το ALIGN, που καθορίζει τη στοίχιση της γραμμής (δηλ. left, right, center)!

14 Παράδειγμα 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

15 Κατηγορήματα (συνέχεια)! Τα κατηγορήματα προσδιορίζονται μόνο στις ετικέτες έναρξης των στοιχείων και έχουν τη μορφή: <TAG ATTRIBUTE= value > <TAG>! Παράδειγμα: <P ALIGN=LEFT> The paragraph to be aligned <P>! Η τιμή του κατηγορήματος περιλαμβάνεται μέσα σε απλά ή διπλά εισαγωγικά! Τα εισαγωγικά είναι προαιρετικά αν η τιμή του κατηγορήματος περιέχει μόνο γράμματα μεταξύ A-z, a-z, ψηφία (0-9), παύλες - και τελείες.! Τα ονόματα των κατηγορημάτων είναι case-insensitive ενώ οι τιμές τους είναι case-sensitive 15

Παράδειγμα: <P ALIGN=LEFT> The paragraph to be aligned <P>!

16 Προσδιορίζοντας το στοιχείο BODY! Τα κατηγορήματα του στοιχείου BODY επηρεάζουν την εμφάνιση ολόκληρης της σελίδας " ALINK, προσδιορίζει το χρώμα των ενεργών υπερσυνδέσμων " BACKGROUND, προσδιορίζει την εικόνα φόντου της σελίδας " BGCOLOR, προσδιορίζει το χρώμα φόντου της σελίδας " LINK, προσδιορίζει το χρώμα των συνδέσμων " TEXT, προσδιορίζει το χρώμα του κειμένου " VLINK, προσδιορίζει το χρώμα των συνδέσμων που έχουν επισκεφτεί! Παράδειγμα Ο παρακάτω κώδικας <BODY BGCOLOR= #FFFFFFF LINK= # VLINK= # > Αντιστοιχεί σε σελίδα με λευκό φόντο, μαύρο κείμενο (αρχική τιμή), πράσινους υπερσύνδεσμους και κόκκινους υπερσύνδεσμους που έχουν επισκεφτεί. 16

την εικόνα φόντου της σελίδας " BGCOLOR, προσδιορίζει το χρώμα φόντου της σελίδας " LINK, προσδιορίζει το χρώμα των συνδέσμων " TEXT, προσδιορίζει το χρώμα του

17 Προσδιορίζοντας το στοιχείο FONT! Προσδιορίζει τη γραμματοσειρά που χρησιμοποιούμε. Παίρνει τα εξής κατηγορήματα: " COLOR, προσδιορίζει το χρώμα των χαρακτήρων " FACE, προσδιορίζει την οικογένεια πχ Courier, Helvetica, Times " SIZE: προσδιορίζει το μέγεθος. Παίρνει είτε απόλυες τιμές (1-7) ή σχετικές (±3)! Παράδειγμα <FONT FACE = arial SIZE= +2 COLOR =red> Αυτό το κείμενο είναι κόκκινο </FONT> 17

την οικογένεια πχ Courier, Helvetica, Times " SIZE: προσδιορίζει το μέγεθος.

Σχετικά έγγραφα

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από