Σχεδιασµός και Ανάπτυξη Web-Site για Επιχειρήσεις

Α.Τ.Ε.Ι. ΠΑΤΡΑΣ ΠΑΡΑΡΤΗΜΑ ΑΜΑΛΙΑ ΑΣ ΤΜΗΜΑ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΣΤΗ ΙΟΙΚΗΣΗ ΚΑΙ ΟΙΚΟΝΟΜΙΑ Σηµειώσεις Εργαστηρίου Σχεδιασµός και Ανάπτυξη Web-Site για Επιχειρήσεις ρ. Χριστοδούλου Σωτήριος 2005-2006

2

ΠΕΡΙΕΧΟΜΕΝΑ 1 Εισαγωγή... 5 2 Αρχές, προβλήµατα, αποφάσεις κατά την σχεδίαση... 6 2.1 Web Browsers... 6 2.2 Οθόνη χρηστών... 6 2.3 Χρήση ή µη εφαρµογών σχεδίασης... 8 2.4 Γραφικά... 8 2.5 Έλεγχος του αποτελέσµατος... 8 3 HTML... 9 3.1 Εισαγωγή στην HTML... 9 3.2 Tags... 9 3.2.1 Βασικά HTML tags... 10 3.2.2 Πληροφορία που αγνοούν οι Browsers... 11 3.3 Ειδικοί Χαρακτήρες και Χαρακτήρες µε Ειδικές Λειτουργίες... 11 3.3.1 Ειδικοί χαρακτήρες... 11 3.3.2 Χαρακτήρες µε Ειδικές Λειτουργίες... 11 3.4 Χρώµατα... 12 3.5 Ανάλυση της δοµής... 13 3.6 Μορφοποιήσεις κειµένου... 14 3.6.1 To tag <FONT>... 15 3.6.2 Επικεφαλίδες (Headings)... 15 3.6.3 Λίστες... 15 3.6.4 Στοίχιση... 18 3.7 Παραποµπές (Links)... 18 3.7.1 Άνοιγµα νέου παραθύρου... 22 3.8 Προσθέτοντας εικόνες... 22 3.8.1 Εικόνες και γραµµή κειµένου... 22 3.8.2 Απόσταση του κειµένου από µια εικόνα... 24 3.8.3 Η παράµετρος ALT... 24 3.8.4 Η παράµετρος BORDER... 24 3.8.5 Χρήση εικόνας ως παραποµπή... 24 3.8.6 Οι παράµετροι HEIGHT & WIDTH... 24 3.8.7 Εισαγωγή µιας εικόνας σαν φόντο της σελίδας... 25 3.8.8 Οριζόντιες Γραµµές <HR>... 25 3.9 Πίνακες... 26 3.9.1 Παράµετρος BORDER... 27 3.9.2 Τίτλος του πίνακα... 28 3.9.3 Η στοίχιση του περιεχοµένου των κελιών... 29 3.9.4 Περίπλοκοι πίνακες... 30 3.9.5 Σελιδοποίηση µε πίνακες... 32 3.10 Φόρµες επικοινωνίας... 33 3.11 Πλαίσια (frames)... 37 3.11.1 Πιο Περίπλοκοι Συνδυασµοί Πλαισίων... 40 3.11.2 Κίνηση Μεταξύ Πλαισίων... 41 3.12 iframe... 43 3.13 Image maps... 44 3.13.1 ιαδικασία Κατασκευής image map... 44 3.14 Animated gifs... 46 4 Multimedia... 47 4.1 Ηχος... 47 4.2 Βίντεο... 47 4.3 Flash... 48 4.4 Shockwave... 48 3

4.5 Java applets... 49 4.6 Javascript... 49 4.6.1 Pop-Up Windows... 50 4.7 Cascading Stylesheets... 51 4.7.1 Κατασκευή µιας απλής σελίδας µε style sheets... 51 4.7.2 Τι είναι οι κανόνες (rules):... 51 4.7.3 Τρόποι ορισµού των style sheets... 52 4.7.4 Ισχύς των κανόνων... 54 5 Άλλα Θέµατα... 56 5.1 Ρυθµίσεις γλώσσας... 56 5.2 Meta Tags... 56 6 Βιβλιογραφία... 60 4

1 Εισαγωγή Μια Web σελίδα είναι ένα αρχείο κειµένου, σε ASCII µορφή, κατασκευασµένο µε τέτοιο τρόπο που να µπορεί να παρουσιάζεται ολοκληρωµένο και στην επιθυµητή για τον δηµιουργό του µορφή, µε µία µόνο κλήση από τον χειριστή του κατάλληλου λογισµικού. Υπεύθυνος για την λήψη και παρουσίαση Web σελίδων είναι ο Web Browser (φυλλοµετρητής:internet Explorer, Netscape Communicator, Opera, Mozilla Firefox κα.). Για την εµφάνιση µιας Web σελίδας χρησιµοποιείται η διαδικτυακή διεύθυνση URL (Uniform Resource Locator). Ένα URL αποτελείται από 3 τµήµατα: α) Το πρωτόκολλο που πρέπει να χρησιµοποιήσουµε για να αποκτήσουµε αυτό το αρχείο. (http://www.culture.gr/anakoinoseis/press_gr.html) β) To web site στο οποίο είναι τοποθετηµένο το αρχείο. (http://www.culture.gr/anakoinoseis/press_gr.html) γ) Ο κατάλογος που βρίσκεται το αρχείο και το όνοµα του αρχείου. (http://www.culture.gr/anakoinoseis/press_gr.html) To Web site είναι ένα σύνολο web σελίδων (ή ενοτήτων αυτών) που είναι αποθηκευµένες σε έναν (ή περισσότερους) Web Server. Ο Web Server είναι ένας υπολογιστής ο οποίος µε την χρήση ειδικού λογισµικού εξυπηρετεί τις αιτήσεις των χρηστών. Ο υπολογιστής του χρήστη συνδέεται µε τον Web Server και µεταφέρει τα αναγκαία δεδοµένα για την εµφάνιση της Web σελίδας. Τα δεδοµένα αυτά είναι κυρίως η περιγραφή της δοµής της σελίδας, κείµενα και εικόνες. Όµως µπορεί να είναι ήχος, βίντεο και πολλά είδη πολυµεσικών εφαρµογών που παρουσιάζονται µέσω του Web browser του χρήστη και ειδικού λογισµικού. H πιο διαδεδοµένη γλώσσα περιγραφής της δοµής µιας ιστοσελίδας είναι η HTML (HyperText Markup Language). Η HTML δεν είναι γλώσσα προγραµµατισµού αλλά µια περιγραφική γλώσσα, ένας ειδικός τρόπος γραφής κειµένου και κλήσης άλλων αρχείων ή εφαρµογών βασισµένος σε οδηγίες (tags). Με την χρήση νεώτερων τεχνολογιών και γλωσσών δόθηκε η δυνατότητα στην δηµιουργία web σελίδων µε διαδραστικότητα και δυναµική εµφάνιση (Javascipt, Vbscript, DHTML) αλλά και στην δηµιουργία δυναµικού περιεχοµένου και στην υλοποίηση σύνθετων διαδικτυακών εφαρµογών (ASP, PHP κ.α). Σχήµα 1: ηµιουργία δυναµικού Web περιεχοµένου προερχόµενο από Βάση εδοµένων 5

2 Αρχές, προβλήµατα, αποφάσεις κατά την σχεδίαση Κατά την σχεδίαση Web σελίδων ενός Web site θα πρέπει να ληφθούν σοβαρά υπόψη τα χαρακτηριστικά των χρηστών στους οποίους απευθύνεται όπως επίσης και τα χαρακτηριστικά των υπολογιστών τους. 2.1 Web Browsers Οι χρήστες του Web πλοηγούνται µέσω των Browsers διαφόρων εταιριών αλλά και διαφόρων εκδόσεων του λογισµικού τους. Χαρακτηριστικά και τεχνολογίες (Java, Javascript, DHTML, StyleSheets, Flash) που υποστηρίζονται από κάποιον browser µπορεί να µην υποστηρίζονται από κάποιον άλλον αλλά και από µια παλιότερη έκδοση αυτού. Υπάρχουν πολλές προσεγγίσεις που απαντούν στο παραπάνω δίληµµα για την χρήση ή µη των Web τεχνολογιών µε επικρατέστερες τις παρακάτω χρησιµοποίηση των τεχνολογιών µε τέτοιο τρόπο ώστε οι σελίδες να είναι πλήρως λειτουργικές σε παλιότερες εκδόσεις των browsers βελτιώνοντας µόνο την παρουσίαση τους σε νέες εκδόσεις. σχεδίαση πολλών εκδόσεων ενός web site ώστε να καλύπτει πλήθος εκδόσεων των browsers ανάλογα µε τα χαρακτηριστικά τους. Η πλοήγηση του χρήστη σε διαφορετικές εκδόσεις συνήθως γίνεται αυτόµατα µε την χρήση εντολών Javascript. συνδυασµός των παραπάνω Ανεξάρτητα από την επιλογή των browsers και των εκδόσεων τους κλειδί για την επιτυχία είναι να γράφουµε σωστή HTML. Στο Internet υπάρχουν sites που ελέγχουν και εξακριβώνουν την ορθότητα του κώδικα HTML και την συµβατότητα του µε εκδόσεις των Browsers (π.χ. World Wide Web Consortium s HTML Validator - http://validator.w3.org/, http://www.totalvalidator.com/). Επίσης κάποιες επαγγελµατικές εφαρµογές συγγραφής HTML διαθέτουν την δυνατότητα δοκιµής και ελέγχου της συµβατότητας του κώδικα HTML µε τους Browsers (Macromedia Dreamweaver, Adobe GoLive κ.α.). 2.2 Οθόνη χρηστών Το µέγεθος και η ανάλυση της οθόνης των χρηστών, το πλήθος και η πιστή αναπαραγωγή των χρωµάτων αλλά και η ποικιλία συσκευών (PC, TV, PDA, Mobile Phones) αποτελούν αντικείµενο προβληµατισµού πριν την έναρξη της σχεδίασης των σελίδων. Οι διαφορετικές αναλύσεις των οθονών των χρηστών αποτελούν σοβαρό θέµα συζήτησης όλων των επαγγελµατιών σχεδιαστών σελίδων. Το περιεχόµενο των σελίδων θα πρέπει να «χωρέσει» στην οθόνη των χρηστών (οριζόντια) αλλά και να µην αφήνει µεγάλα κενά στην οθόνη. Οι πιο κοινές (ως προς την χρήση) αναλύσεις δίνονται στον παρακάτω πίνακα PC Macintosh 640 x 480 512 x 384 800 x 600 (συνήθης στα laptops) 640 x 480 1024 x 870 800 x 600 (συνήθης στα PowerBooks) 1280 x 1024 832 x 624 1600 x 1200 1024 x 768 1152 x 870 1280 x 960 1280 x 1024 1600 x 1200 6

Επίσης ανάλογα µε το µέγεθος των οθονών (14-15 -17-19 κτλ) το κείµενο και τα γραφικά µιας σελίδας φαίνονται διαφορετικά (µικρά-µεγάλα) εξαιτίας της διαφορετικής αντιστοιχίας των pixels ανά ίντσα οθόνης. Πάντως σήµερα θεωρείται ως ελάχιστα αποδεκτή, η ανάλυση οθόνης 800x600. Οι σχεδιαστές χρησιµοποιούν δύο βασικές τεχνικές. Την σχεδίαση µε χρήση σταθερού πλάτους και τη σχεδίαση µεταβλητού πλάτους. Η σχεδίαση σελίδων σταθερού πλάτους προσφέρει καλύτερο έλεγχο και ευκολία κατά την σχεδίαση τους όµως το αποτέλεσµα δεν θα είναι επιθυµητό σε πολλά είδη οθονών. Η σχεδίαση µεταβλητού πλάτους είναι αναµφισβήτητα πιο κατάλληλη όµως είναι δύσκολο να προκαθοριστεί το αποτέλεσµα στην οθόνη του χρήστη (παράδειγµα σε οθόνες υψηλής ανάλυσης το κείµενο καλύπτει όλο το πλάτος της οθόνης, πράγµα που είναι ενοχλητικό κατά την ανάγνωση). Μερικές φορές χρησιµοποιείται και συνδυασµός των παραπάνω τεχνικών µε την σχεδίαση άλλοτε σελίδων ή µέρους αυτών σταθερού πλάτους και τη χρήση σελίδων µεταβλητού πλάτους. Η δυνατότητα αυτή είναι δυνατή µε την χρήση πινάκων και πλαισίων τα οποία θα αναλυθούν παρακάτω. Ένα άλλο πρόβληµα είναι ότι η ανάλυση της οθόνης είναι διαφορετική από το πραγµατικό µέγεθος που διαθέτει ο browser για την εµφάνιση της σελίδας. Το λειτουργικό σύστηµα, το παράθυρο του browser και το µενού του, µειώνουν το πραγµατικό διαθέσιµο χώρο. Θα πρέπει λοιπόν να ληφθούν υπόψη τα πραγµατικά µεγέθη του διαθέσιµου χώρου. Οι οθόνες προβάλλουν την πληροφορία µε 32- bit, 24-bit (17 εκ.), 16-bit (64,000) ή 8-bit (256) χρώµατα. Ο σχεδιαστής θα πρέπει να προκαθορίσει την ελάχιστη ποσότητα χρωµάτων που θα πρέπει να αναπαριστά η οθόνη του χρήστη µέσω της κάρτας γραφικών. Επειδή κάτι τέτοιο είναι δύσκολο, ο σχεδιαστής µπορεί να χρησιµοποιήσει µια παλέτα 216 χρωµάτων τα οποία ονοµάζονται web safe και έχουν την ιδιότητα να εµφανίζονται το ίδιο πιστά σε Windows και Mac συστήµατα. Άλλα θέµατα που αφορούν τη σχεδίαση είναι: η συµβατότητα µε συσκευές WebTV, PDA και συσκευές κινητής τηλεφωνίας η προσπέλαση της πληροφορίας από άτοµα µε κάποιο είδος αναπηρίας η απεικόνιση ελληνικών χαρακτήρων σε υπολογιστές που δεν διαθέτουν τις γραµµατοσειρές που ο σχεδιαστής χρησιµοποιεί. 7

2.3 Χρήση ή µη εφαρµογών σχεδίασης Είναι δεδοµένο ότι η χρήση λογισµικού σχεδίασης σελίδων (WYSIWYG - What You See Is What You Get) µειώνει τον χρόνο υλοποίησης, παρέχει πλήθος ευκολιών και αυτοµατισµών και βοηθά έναν αρχάριο να σχεδιάσει σε µικρό χρονικό διάστηµα τις πρώτες του σελίδες. Για επαγγελµατική χρήση όµως ο δύσκολος τρόπος δηλαδή η χρήση κώδικα HTML (µε την βοήθεια λογισµικού σύνταξης HTML) είναι επιβεβληµένη γιατί: Παρέχει µεγαλύτερη αξιοπιστία και καλύτερο έλεγχο ως προς το τελικό αποτέλεσµα. Το τελικό αποτέλεσµα µε τη χρήση λογισµικού δεν είναι πάντοτε αυτό που σχεδιάζουµε και δεν προσαρµόζεται προσαρµόζονται αυτόµατα στις ιδιαιτερότητες της οθόνης κάθε χρήστη. Το µέγεθος των σελίδων είναι µικρότερο µε συνέπεια την γρηγορότερη εµφάνιση του στην οθόνη του χρήστη. Τα προβλήµατα επιλύονται ευκολότερα επειδή κατανοούµε τα χαρακτηριστικά της σελίδας που δηµιουργούµε(π.χ. ασυµβατότητα µε κάποιους browsers) 2.4 Γραφικά Τα γραφικά και οι εικόνες αποτελούν σήµερα αναπόσπαστο κοµµάτι των web σελίδων. Τα δύο πιο διαδεδοµένα format είναι τα GIF (Graphic Interchange Format) και τα JPEG (Joint Photographic Experts Group). Τα GIF αρχεία περιέχουν το µέγιστο 256 χρώµατα ανά pixel (8- bit) και το κύριο χαρακτηριστικό τους είναι η συµπίεση της χρωµατικής πληροφορίας ανά γραµµή εικόνας. Γι αυτό επιλέγονται για την παρουσίαση γραφικών που διαθέτουν περιοχές µε ίδιο χρώµα. Τα αρχεία JPEG περιέχουν 24-bit πληροφορία χρωµάτων σε αντίθεση µε την 8-bit πληροφορία των αρχείων GIF. H συµπίεση που προκαλείται στα αρχεία είναι απωλεστική (lossy), δηλαδή κάποια πληροφορία χάνεται. Η πληροφορία αυτή πάντως είναι µηδαµινή σε σχέση µε την συµπίεση που προσφέρει. Επιπλέον ο σχεδιαστής έχει την δυνατότητα να ρυθµίσει την συµπίεση σε σχέση µε το µέγεθος του αρχείου και το επιθυµητό αποτέλεσµα. Το JPEG format χρησιµοποιείται σε φωτογραφικές εικόνες και σε εικόνες µε πολύπλοκες µεταβολές του χρώµατος. 2.5 Έλεγχος του αποτελέσµατος Πριν την διάθεση των web σελίδων στο κοινό θα πρέπει να γίνουν όσο το δυνατόν περισσότεροι έλεγχοι µε την προβολή των σελίδων σε διάφορους browsers και µε πλήθος αναλύσεων και χρωµάτων της οθόνης. Επίσης θα πρέπει να δοκιµασθεί η ταχύτητα παρουσίασης των σελίδων σε υπολογιστές που διαθέτουν χαµηλή ταχύτητα σύνδεσης µε το Internet. 8

3 HTML 3.1 Εισαγωγή στην HTML Τι είναι ένα αρχείο HTML; Η λέξη HTML σηµαίνει Hyper Text Mark-up Language Ένα αρχείο HTML είναι ένα αρχείο κειµένου, το οποίο περιλαµβάνει mark-up tags Τα mark-up tags καθορίζουν τον τρόπο µε τον οποίο θα εµφανιστεί η σελίδα στον Web browser Ένα αρχείο HTML πρέπει να έχει κατάληξη htm ή html Ένα αρχείο HTML µπορεί να δηµιουργηθεί χρησιµοποιώντας έναν απλό επεξεργαστή κειµένου 3.2 Tags Τα tags χρησιµοποιούνται από την HTML για να σηµατοδοτήσουν (mark-up) τα στοιχεία (elements) της σελίδας. Τα tags αποτελούνται από ένα όνοµα ακολουθούµενο προαιρετικά από παραµέτρους, µεταξύ των συµβόλων < και >. Οτιδήποτε υπάρχει µεταξύ των συµβόλων < και > δεν εµφανίζεται από τον browser. Τα περισσότερα tags αποτελούνται από το tag αρχής και το tag τέλους. Το tag τέλους περιέχει το σύµβολο / ακολουθούµενο από το όνοµα του tag αρχής και καµιά άλλη πληροφορία. Ότι περιλαµβάνεται µεταξύ του tag αρχής και του tag τέλους είναι το περιεχόµενο του στοιχείου, το οποίο και θα παρουσιαστεί από τον browser µε τον τρόπο µε τον οποίο καθορίζει το tag. Π.χ. η οδηγία για να εµφανίζεται στον browser ένα κείµενο µε έντονα γράµµατα (bold) είναι: Κανονικό κείµενο - <b>έντονο κείµενο</b> Που θα παρουσιασθεί ως: Κανονικό κείµενο - Έντονο κείµενο Σε µερικά tags το tag τέλους είναι προαιρετικό (όπως το tag παραγράφου <p>), όµως για καλύτερη κατανόηση του κώδικα HTML θα πρέπει να τοποθετείται. Κάποια tags δεν έχουν tag τέλους γιατί χρησιµοποιούνται για να τοποθετήσουν κάποιο στοιχείο στο περιεχόµενο όπως το tag αλλαγής γραµµής (<br>) ή το tag εικόνας (<img>). Επίσης τα HTML tags δεν είναι case-sensitive. Παράµετροι των tags Τα tags µπορούν να έχουν παραµέτρους. Οι παράµετροι µπορούν να παρέχουν επιπρόσθετη πληροφορία σχετικά µε τα HTML στοιχεία στην σελίδα µας. Οι παράµετροι ενός tag ακολουθούν το όνοµα του tag. Αν η παράµετρος δέχεται τιµές τότε το όνοµα της ιδιότητας ακολουθείται µε το σύµβολο = και την τιµή της παραµέτρου. Για παράδειγµα, εάν στο tag <body> προσθέσουµε την παράµετρο bgcolor=blue (δηλ. <body bgcolor=blue>). Οι τιµές των παραµέτρων είτε περικλείονται από εισαγωγικά (µονά ή διπλά) είτε γράφονται αυτούσιες. Όταν η τιµή αποτελείται από γράµµατα (a-z), αριθµούς (0-9) και τα σύµβολα (ειδικούς χαρακτήρες) τελεία (.) και αφαίρεση ( ) τότε δεν χρειάζονται εισαγωγικά. Αντιθέτως όταν οι τιµές περιλαµβάνουν τα σύµβολα κόµµα (,), κενό ή άλλους ειδικούς χαρακτήρες τότε θα πρέπει να περικλείονται από εισαγωγικά. Tα URLs για παράδειγµα θα πρέπει να περικλείονται από εισαγωγικά γιατί περιέχουν τους χαρακτήρες ://. Αν τοποθετούνται εισαγωγικά παντού δεν είναι λάθος και συνίσταται στην περίπτωση που δεν θυµόµαστε αν απαιτούνται ή όχι. Το όνοµα των tags και των παραµέτρων τους δεν επηρεάζεται από το αν έχει γραφτεί µε πεζά (µικρά) ή κεφαλαία (case insensitive). ηλαδή οι οδηγίες <body bgcolor=white> και <BODY 9

BGCOLOR=white> είναι ισοδύναµες. Τις περισσότερες περιπτώσεις ισχύει το ίδιο µε τις τιµές των παραµέτρων αλλά όχι πάντα ιδίως όταν αναφερόµαστε σε URLs και ονόµατα αρχείων. Τα παρακάτω είναι παράδειγµα χρήσης των tags µε παραµέτρους <IMG SRC="images/pixie.gif" ALIGN=right WIDTH=45 HEIGHT=60> <BODY BGCOLOR="#00ff00"> <FONT FACE="Trebuchet MS, Arial, Helvetica" SIZE=2> Tags µπορεί να περικλείουν άλλα tags σε κάποιο στοιχείο ώστε να του δώσουν πολλαπλές ιδιότητες. Τα tags τα οποία περιλαµβάνονται σε άλλα tags ονοµάζονται εµφωλευµένα (nested). Π.χ. Ο καιρός είναι <B><I>υπέροχος</I></B>σήµερα. Θα έχει ως αποτέλεσµα την εµφάνιση: Ο καιρός είναι υπέροχος σήµερα. Σύνηθες λάθος είναι η υπερπήδηση των tags (το tag τέλους </Β> προηγείται του tag τέλους </I>) Ο καιρός είναι <B><I>υπέροχος</B></I> σήµερα. Οι browsers συνήθως διορθώνουν το λάθος κατά την εµφάνιση όµως αυτό δεν ισχύει στο σύνολο των browsers και των tags. 3.2.1 Βασικά HTML tags Επικεφαλίδες Οι επικεφαλίδες δηλώνονται στην HTML µε τα tags από <h1> έως <h6>. Το <h1> δηλώνει την µεγαλύτερη επικεφαλίδα, ενώ το <h6> δηλώνει τη µικρότερη. <h1>this is a heading</h1> <h2>this is a heading</h2> <h3>this is a heading</h3> <h4>this is a heading</h4> <h5>this is a heading</h5> <h6>this is a heading</h6> Η HTML εισάγει αυτόµατα µία κενή γραµµή έπειτα από κάθε tag επικεφαλίδας. Παράγραφοι Οι παράγραφοι δηλώνονται µε το tag <p>. <p>this is a paragraph</p> Αλλαγή γραµµής (Line Break) Για να αλλάξουµε γραµµή, χωρίς να αλλάξουµε παράγραφο τοποθετούµε το tag <br>. Το <br> tag είναι ένα άδειο tag το οποίο δεν χρειάζεται κλείσιµο (</br>). <p>this <br> is a para<br>graph with line breaks</p> Σχόλια στην HTML Για να τοποθετήσετε σχόλια σε ένα αρχείο HTML µπορείτε να χρησιµοποιήσετε το tag σχολίων, το οποίο ανοίγει <!-- και κλείνει -->. Ότι υπάρχει µεταξύ αυτών των tags αγνοείται από τον Web Browser. 10

3.2.2 Πληροφορία που αγνοούν οι Browsers Συγκεκριµένη πληροφορία αλλά και ορισµένα tags που περιλαµβάνονται στο έγγραφο HTML αγνοούνται από τον browser. 1) Αλλαγή γραµµής. Το κείµενο και άλλα στοιχεία θα καλύψουν την γραµµή µέχρι να γεµίσει ο διαθέσιµος χώρος ή να περιληφθεί το tag <p> (αλλαγή παραγράφου) και <br> (αλλαγής γραµµής). 2) ιάστιχα και πολλαπλά κενά. Τα διάστιχα (tab) απεικονίζονται ως ένας κενός χαρακτήρας (space) ενώ πολλαπλά κενά απεικονίζονται ένα κενό. Π.χ. το κείµενο πολύ, πολύ µακριά θα εµφανιστεί: πολύ, πολύ µακριά 3) Για την εισαγωγή κενών χαρακτήρων χρησιµοποιείται η οντότητα (nonbreaking space). 4) Πολλαπλά tags παραγράφου (<p>) εµφανίζονται ως ένα tag 5) Το κείµενο που περικλείεται µεταξύ της ακολουθίας <!-- και --> δεν λαµβάνεται υπόψη και χρησιµοποιείται για να εισάγουµε σηµειώσεις στο HTML έγγραφο, π.χ. <!-- Οι σηµειώσεις µου --> 6) Άγνωστα tags: Tags τα οποία είναι άγνωστα ή έχουν ορισθεί µε λανθασµένο τρόπο αγνοούνται από τον browser. Μερικές φορές ανάλογα µε τον Browser και το tag µπορεί αυτό να εµφανισθεί αυτούσιο. 3.3 Ειδικοί Χαρακτήρες και Χαρακτήρες µε Ειδικές Λειτουργίες 3.3.1 Ειδικοί χαρακτήρες Υπάρχουν ειδικοί χαρακτήρες που δεν µπορούν να απεικονισθούν µε απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή το Shift και ένα πλήκτρο) αλλά µόνο µε πιο περίπλοκους τρόπους (π.χ. πατώντας το Alt και έναν αριθµό). Πρόκειται για χαρακτήρες που δεν ανήκουν στο κλασικό 7-bit ASCII character set αλλά στο επεκταµένο 8-bit ASCII. Οι περισσότεροι browsers αναγνωρίζουν αυτούς τους ISO-Latin-1 (ISO-8859-1) χαρακτήρες αλλά µε ειδικό τρόπο. Για να αναγνωρίσουν τους χαρακτήρες αυτούς οι browsers όσων βλέπουν τις σελίδες µας θα πρέπει να γραφούν µε ειδικό τρόπο (µε έναν κωδικό που αρχίζει µε το & και τελειώνει µε το ;). Π.χ. το copyright είναι ενώ το γράφεται σαν 3.3.2 Χαρακτήρες µε Ειδικές Λειτουργίες Για να εµφανίσουµε ειδικούς χαρακτήρες οι οποίοι περιλαµβάνονται στον ορισµό των tags θα πρέπει να χρησιµοποιήσουµε ειδικούς συµβολισµούς. Πχ. την εντολή <B>15<7</B> κάποιοι Browsers την αναγνωρίζουν κανονικά ενώ κάποιοι την προσπερνούν γιατί αδυνατούν να την ερµηνεύσουν). Για τον λόγο αυτό οι ειδικοί χαρακτήρες που περιέχονται στις οδηγίες (tags) όταν θέλουµε να τα δούµε µέσα σε µια σελίδα σαν απλοί χαρακτήρες, πρέπει να απεικονιστούν ως εξής: Χαρακτήρας Συµβολισµός < < > > & & " " Το ίδιο ισχύει και µε την απεικόνιση ειδικών χαρακτήρων όπως το σύµβολο (Copyright). Για τους χαρακτήρες αυτούς η απεικόνιση τους γίνεται µε την χρήση ειδικού ονόµατος ή αριθµού που ακολουθούν το σύµβολο & και ακολουθούνται από ερωτηµατικό. Παράδειγµα το σύµβολο αναγράφεται ως ή 11

3.4 Χρώµατα Αν θέλουµε να ορίσουµε το χρώµα λεκτικά (π.χ.<body BGCOLOR=όνοµα χρώµατος>) τότε θα χρησιµοποιήσουµε το όνοµα του (black, white, green, maroon, olive, navy, purple, gray, red, yellow, blue, teal, lime, aqua, fuchsia, silver). Για µεγαλύτερη ποικιλία σε χρώµατα και αποχρώσεις, χρησιµοποιούµε τον δεκαεξαδικό κωδικό <BODY BGCOLOR="ο κωδικός"> (σε εισαγωγικά ) του κάθε χρώµατος (π.χ. το #934CE8 είναι µια απόχρωση του πράσινου). Ο δεκαεξαδικός κωδικός αποτελείται από τρεις δυάδες χαρακτήρων που αντιστοιχούν στα τρία χρώµατα RGB (Red-Green-Blue) και αποτελείται από τους χαρακτήρες 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F που αντιστοιχούν στους αριθµούς 0 έως 15 του δεκαδικού συστήµατος. Τα χρώµατα στον υπολογιστή έχουν την ιδιαιτερότητα ότι µερικά από αυτά δεν απεικονίζονται ακριβώς το ίδιο σε κάθε browser, ή οθόνη υπολογιστή. Τα χρώµατα που απεικονίζονται ακριβώς το ίδιο ανεξάρτητα του υπολογιστή ή του browser, ονοµάζονται web-safe χρώµατα. Τα web-safe χρώµατα αποτελούνται από συνδυασµό των ακόλουθων δυάδων: 00, 33, 66, 99, CC, FF Για να τη δεκαεξαδική απεικόνιση του κάθε χρώµατος θα πρέπει να διαθέτουµε ένα πρόγραµµα γραφικών. Για παράδειγµα, µε το Paint των Windows επιλέγουµε Colors - Edit Colors - Define Custom Colors. Στο δεξιό µέρος του παραθύρου υπάρχει µια µπάρα και αριστερά της ένα µεγάλο τετράγωνο µε διάφορα χρώµατα. Κάνοντας κλικ µέσα στο µεγάλο τετράγωνο µε τα πολλά χρώµατα και µετακινώντας το δείκτη της µπάρας που βρίσκεται δεξιά από το µεγάλο τετράγωνο ορίζουµε το χρώµα και τη φωτεινότητα αυτού του χρώµατος στο σηµείο που υπάρχει χρώµα της αρεσκείας. Στο κάτω δεξιά µέρος του παραθύρου αναγράφονται οι τιµές R (Red) G (Green) και B (Blue) του χρώµατος που επιλέχθηκε. Στη συνέχεια µετατρέπουµε τον δεκαδικό αριθµό σε δεκαεξαδικό (π.χ. µε την χρήση αριθµοµηχανής των Windows) διότι αυτός πρέπει να οριστεί µέσα στον HTML κώδικα. Οι εφαρµογές συγγραφής web σελίδων µετατρέπουν αυτόµατα την χρωµατική µας επιλογή στον αντίστοιχο δεκαεξαδικό αριθµό. Για παράδειγµα: Το RGB 62,199,41 του παραπάνω παραδείγµατος είναι το 3ec729 σε δεκαεξαδικό κωδικό και το χρώµα που µας δίνει είναι το: <FONT COLOR= #3ec729 >ανοικτό πράσινο</font> 12

3.5 Ανάλυση της δοµής Όπως προαναφέρθηκε τα βασικά µέρη µιας σελίδας είναι η κεφαλίδα (head) και το σώµα (body). Η πιο απλή δοµή περιλαµβάνει τον ακόλουθο κώδικα. <HTML> <HEAD> <TITLE>Τίτλος εγγράφου</title> </HEAD> <BODY> Περιεχόµενο εγγράφου </BODY> </HTML> Η κεφαλίδα του εγγράφου καθορίζεται από το tag <HEAD>. Η κεφαλίδα περιλαµβάνει πρωτίστως τον τίτλο του εγγράφου που εµφανίζεται στο πάνω µέρος του browser. O τίτλος καθορίζεται από το tag <TITLE>. Επιπλέον η κεφαλίδα περιλαµβάνει και άλλα χρήσιµα tags (όπως <base> <link> <meta> <script> <style>) τα οποία και θα αναλυθούν σε άλλα κεφάλαια. Το σώµα του εγγράφου καθορίζεται από το tag <BODY> και περιλαµβάνει το περιεχόµενο που θα εµφανισθεί στον browser. Στο tag µπορούν να ορισθούν παράµετροι οι οποίες προσδιορίζουν χαρακτηριστικά όλου του εγγράφου. Για το χρώµα του κειµένου υπάρχουν οι παρακάτω παράµετροι: TEXT LINK VLINK ALINK Καθορίζει το χρώµα του κειµένου Καθορίζει το χρώµα του κειµένου που κρύβει µια παραποµπή που δεν έχουµε ακολουθήσει ακόµη (η default παράµετρος είναι µπλε) Καθορίζει το χρώµα του κειµένου που κρύβει µια παραποµπή που έχει ακολουθηθεί στο παρελθόν (η default παράµετρος είναι κόκκινο) Καθορίζει το χρώµα του κειµένου µιας επιλεγµένης παραποµπής. ηλαδή έχουµε πατήσει τοποθετήσει τον δροµέα επάνω της, έχουµε πατήσει το αντίστοιχο πλήκτρο του ποντικιού, αλλά δεν το έχουµε ακόµη αφήσει (το κρατάµε πατηµένο). Η default παράµετρος είναι συνήθως κόκκινο. Για το χρώµα φόντου του όλου εγγράφου υπάρχει η παράµετρος BGCOLOR. Π.χ. <BODY BGCOLOR=RED TEXT=WHITE LINK=BLUE VLINK=YELLOW ALINK=BLACK> Επίσης ως φόντο µπορεί να χρησιµοποιηθεί κάποια εικόνα η οποία καθορίζεται από την παράµετρο BACKGROUND Π.χ. <BODY BACKGROUND="background.gif"> Τέλος ορίζουµε το περιθώριο του περιεχόµενου (ύψος και πλάτος) από το διαθέσιµο πλαίσιο του browser και στις 4 πλευρές του. Οι παράµετροι είναι leftmargin και rightmargin (αριστερό και δεξιό περιθώριο) και topmargin και bottommargin (άνω και κάτω περιθώριο). Επειδή κάποιοι browsers χρησιµοποιούν τις ονοµασίες marginwidth και marginheight προσδιορίζουµε και τις 4 αυτές παραµέτρους ώστε να είναι κατανοητές από όλους τους browsers. Η µονάδα µέτρησης είναι σε pixels. Π.χ. <BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0> 13

3.6 Μορφοποιήσεις κειµένου Οι βασικότερες µορφοποιήσεις που χρησιµοποιούνται στο κείµενο είναι οι παρακάτω: <B>...</B> BOLD - Bold κείµενο <I>...</I> ITALIC - Italic κείµενο <U>...</U> UNDERLINE - Υπογραµµισµένο κείµενο Αν θέλουµε να δώσουµε έµφαση σε κάποιο κείµενο το περικλείουµε µε το tag <EM> (συνήθως παρουσιάζεται στον browser σαν µια µορφή italic) <EM>...</EM> ΕΜΦΑΣΗ Αν θέλουµε να δώσουµε έµφαση σε κάποιο κείµενο (µε διαφορετικό όµως τρόπο από την <EM>) το περικλείουµε µε το tag <STRONG> (συνήθως παρουσιάζεται στον browser σαν µια µορφή bold) <STRONG>...</STRONG> ΠΕΡΙΣΣΟΤΕΡΗ ΕΜΦΑΣΗ Με το <CODE>...</CODE> το κείµενο απεικονίζεται µε courier γραµµατοσειρά (όπως οι χαρακτήρες σε ASCII τερµατικό). Χρησιµοποιείται κυρίως για να απεικονιστούν εντολές Η/Υ. <SAMP>...</SAMP>: (Παρόµοια µε την <CODE>) <TT>...<TT/>: Κείµενο γραµµένο µε courier γραµµατοσειρά <BIG>...</BIG>: Κείµενο γραµµένο µε µεγαλύτερα γράµµατα από ότι η γραµµατοσειρά στην οποία είναι γραµµένο το κείµενο που το περιβάλει. <SMALL>...</SMALL>: Αντίθετη της <BIG> <S>...</S> STRIKE THROUGH: Κάθε γράµµα διαπερνάται από µια οριζόντια γραµµή <SUB>...</SUB> SUBSCRIPT: Κείµενο που τοποθετείται ελάχιστα πιο κάτω από το επίπεδο των υπολοίπων γραµµάτων της γραµµής (χρήσιµο για απεικόνιση του παρονοµαστή ενός κλάσµατος). <SUP>...</SUP> SUPERSCRIPT: Κείµενο που τοποθετείται ελάχιστα πιο πάνω από το επίπεδο των υπολοίπων γραµµάτων της γραµµής (χρήσιµο για απεικόνιση του αριθµητή ενός κλάσµατος). <PRE>...</PRE>: Κείµενο που θα παρουσιαστεί όπως είναι µορφοποιηµένο σε ASCII (δεν θα χαθούν τα διαστήµατα µεταξύ των λέξεων). Μερικοί browsers ίσως να έχουν πρόβληµα στην απεικόνιση των Ελληνικών που βρίσκονται µέσα στην <PRE> αν δεν έχουν ρυθµιστεί σωστά τα Ελληνικά στην παράµετρο fixed font των ρυθµίσεων του Browser. <ADDRESS>...</ADDRESS>: Ειδική γραµµατοσειρά (συνήθως italic) που την χρησιµοποιούµε για να γράψουµε µια email διεύθυνση (συνήθως πρόκειται για την υπογραφή του δηµιουργού της σελίδας) 14

3.6.1 To tag <FONT> Το FONT tag χρησιµοποιείται για τον καθορισµό της γραµµατοσειράς, του χρώµατος και του µεγέθους του κειµένου το οποίο περικλείει. <FONT SIZE=x>...</FONT> Καθορίζει το µέγεθος των γραµµάτων. Σε παλαιότερους browsers, το x µπορεί να πάρει τιµές από 1 (η µικρότερη) µέχρι 7 (η µεγαλύτερη). Default x=3. Η <FONT> µπορεί να πάρει και σχετικές τιµές (από -3 έως +4) που καθορίζουν το µέγεθός της σε σχέση µε την προκαθορισµένη γραµµατοσειρά που έχει οριστεί στον browser. Σε νεότερους browsers, το x µπορεί να πάρει και µεγαλύτερες τιµές. Απόλυτη τιµή 1 2 3 4 5 6 7 Σχετική τιµή -2-1 - +1 +2 +3 +4 <FONT COLOR=x>...</FONT> Καθορίζει το χρώµα γραµµάτων <FONT FACE="x">...</FONT> Καθορίζει την γραµµατοσειρά, δίνοντας τη δυνατότητα χρησιµοποίησης κάποιας άλλης αν δεν υπάρχει στον υπολογιστή η πρώτη επιλογή. Αποτελείται από το όνοµα µιας γραµµατοσειράς ή περισσότερων διαχωρισµένες µε κόµµα (,). Καλό είναι να χρησιµοποιείται µε φειδώ διότι αν η γραµµατοσειρά δεν υπάρχει στον Η/Υ του αναγνώστη των σελίδων µπορεί να υπάρξουν προβλήµατα (π.χ. να µην φαίνονται τα κείµενα µε Ελληνικούς χαρακτήρες). Παράδειγµα: <FONT FACE="Verdana, Arial, sans-serif">κείµενο</font> Καλύτερα να αποφεύγεται η υπερβολική χρήση της <FONT> (ορισµός πολλών γραµµατοσειρών ή/και πολλών χρωµάτων γραµµάτων στο ίδιο κείµενο) διότι δίνει πολύ άσχηµη εικόνα. 3.6.2 Επικεφαλίδες (Headings) To tag επικεφαλίδας καθορίζει το µέγεθος των γραµµάτων της επικεφαλίδας και ισχύει ανεξάρτητα από την γραµµατοσειρά που χρησιµοποιεί ο browser για να διαβάζει την σελίδα. Η µεγαλύτερη σε µέγεθος επικεφαλίδα είναι η <H1>, ακολουθούµενη από τις <H2>...<H6>. Παραδείγµατα: <H1>Αυτή είναι η µεγαλύτερη επικεφαλίδα</h1> <H2>Αυτή είναι η δεύτερη µεγαλύτερη επικεφαλίδα</h2> Μια επικεφαλίδα αφήνει αυτόµατα την επόµενη γραµµή από αυτήν κενή. Έτσι υπάρχει πάντα µια γραµµή απόσταση µεταξύ της επικεφαλίδας και του κειµένου που την ακολουθεί. 3.6.3 Λίστες 3.6.3.1 Αριθµηµένες λίστες Αν θέλουµε να δηµιουργήσουµε µια αριθµηµένη λίστα του τύπου 1. ευτέρα 2. Τρίτη 3. Τετάρτη 4. Πέµπτη θα πρέπει να χρησιµοποιήσουµε τα tags <OL>...</OL> και <LI> 15

Το tag <OL> (Ordered List) τοποθετείται στην αρχή της λίστας ενώ το tag </OL> στο τέλος της. Κάθε νέα εγγραφή στην λίστα πρέπει να σηµειώνεται µε το tag <LI> (οδηγία </LI> δεν χρησιµοποιούµε για τον ίδιο λόγο που δεν χρησιµοποιούµε το </P>) Έτσι η παραπάνω αριθµηµένη λίστα θα πρέπει να γραφτεί ως εξής: <OL><LI> ευτέρα <LI> Τρίτη <LI> Τετάρτη <LI> Πέµπτη </OL> Η αρίθµηση αφορά τις τιµές 1,2 ως προεπιλογή. Το στυλ αρίθµησης µπορεί να αλλάξει χρησιµοποιώντας την ιδιότητα TYPE η οποία δέχεται τις ακόλουθες τιµές: 1 (αριθµοί), A (κεφαλαία γράµµατα), a (πεζά γράµµατα), I (κεφαλαία λατινικά), and i (πεζά λατινικά). I. ευτέρα II. Τρίτη III. Τετάρτη IV. Πέµπτη <OL TYPE=I> <LI> ευτέρα <LI> Τρίτη <LI> Τετάρτη <LI> Πέµπτη </OL> Επίσης µπορούµε να καθορίσουµε τον εναρκτήριο αριθµό της αρίθµησης µε την παράµετρο START 3. ευτέρα 4. Τρίτη 5. Τετάρτη 6. Πέµπτη <OL START=3> <LI> ευτέρα <LI> Τρίτη <LI> Τετάρτη <LI> Πέµπτη </OL> 3.6.3.2 Λίστες χωρίς αρίθµηση (Unordered Lists) Για να δηµιουργήσουµε µια λίστα µε κουκίδες όπως η παρακάτω θα ακολουθήσουµε την ίδια ακριβώς µεθοδολογία όπως και µε τις αριθµηµένες µε την διαφορά πως αντί για την οδηγία <OL> θα χρησιµοποιήσουµε την <UL>. ευτέρα Τρίτη Τετάρτη Πέµπτη Έτσι η παραπάνω µη αριθµηµένη λίστα θα πρέπει να γραφτεί ως εξής: <UL><LI> ευτέρα <LI> Τρίτη <LI> Τετάρτη <LI> Πέµπτη </UL> Τα ενδεικτικά σηµάδια κάθε µέρους µιας µη αριθµηµένης λίστας µπορούν να οριστούν µε ειδικές παραµέτρους και να πάρουν τις εξής µορφές: ίσκος (UL TYPE=DISC), Κύκλος (UL TYPE=CIRCLE), Τετράγωνο (UL TYPE=SQUARE). 16

3.6.3.3 Λίστες µέσα σε άλλες λίστες εν υπάρχει κανένα πρόβληµα αν θέλετε να συµπεριλάβετε µια λίστα µέσα σε µια άλλη. Για παράδειγµα, η παρακάτω διάταξη: Στερεά Ελλάδα Ιόνιοι Νήσοι o Κέρκυρα o Λευκάδα o Ζάκυνθος o Κεφαλονιά o Ιθάκη Ήπειρος o Άρτα o Ιωάννινα o Πρέβεζα o Ηγουµενίτσα Μακεδονία Θράκη θα πρέπει να έχει καταχωρηθεί µε τον ακόλουθο τρόπο: <UL> <LI> Στερεά Ελλάδα <LI> Ιόνιοι Νήσοι <UL><LI> Κέρκυρα <LI> Λευκάδα <LI> Ζάκυνθος <LI> Κεφαλονιά <LI> Ιθάκη </UL> <LI> Ήπειρος <UL><LI> Άρτα <LI> Ιωάννινα <LI> Πρέβεζα <LI> Ηγουµενίτσα </UL><LI> Μακεδονία <LI> Θράκη </UL> 3.6.3.4 Λίστες ορισµού Η τρίτη κατηγορία λιστών περιλαµβάνει τις λίστες ορισµού (definition lists). Αυτές αποτελούνται από όρους και τον ορισµό τους Παράδειγµα: ΑΕΙ ΤΕΙ ΙΕΚ Ανώτατα Εκπαιδευτικά Ιδρύµατα Τεχνολογικά Εκπαιδευτικά Ιδρύµατα Ινστιτούτα Επαγγελµατικής Κατάρτισης Οι λίστες ορίζονται µε το tag <dl>, οι όροι µε το tag <dt> και οι ορισµοί µε το tag <dd> H παραπάνω λίστα καταχωρείται µε τον ακόλουθο τρόπο: <DL> <DT>ΑΕΙ <DD>Ανώτερα Εκπαιδευτικά Ιδρύµατα. <DT>ΤΕΙ <DD>Τεχνολογικά Εκπαιδευτικά Ιδρύµατα <DT>ΙΕΚ <DD>Ινστιτούτα Επαγγελµατικής Κατάρτισης </DL> 17

3.6.4 Στοίχιση Η στοίχιση κειµένου ή φωτογραφιών γίνεται µε την παράµετρο ALIGN. Σηµειώνεται ότι η παράµετρος ALIGN δεν είναι tag αλλά παράµετρος κάποιου tag Για τη στοίχιση κειµένου αριστερά (ALIGN=LEFT), δεξιά (ALIGN=RIGHT), ή στο κέντρο (ALIGN=CENTER) χρησιµοποιείται η ALIGN µέσα σε µια παράγραφο <p>. Για τη στοίχιση κειµένου µιας επικεφαλίδας, χρησιµοποιείται η παράµετρος ALIGN ως εξής: <H1 ALIGN=Χ>κείµενο</H1> Όπου η Χ µπορεί να πάρει τις τιµές LEFT CENTER RIGHT ανάλογα µε την θέση που θέλουµε να βρίσκεται. Το tag <div> µπορεί να περιλαµβάνει µεγάλα κοµµάτια περιεχοµένου (παραγράφους, πίνακες, εικόνες κ.α). Η παράµετρος ALIGN επηρεάζει όλο το περιεχόµενο που περικλείει το tag <div>. Παράδειγµα: <DIV ALIGN=RIGHT><H1>Επικεφαλίδα 1</H1><H3>Επικεφαλίδα 2</H3><P>Παράγραφος µε κείµενο</div> 3.6.4.1 Στοίχιση στο κέντρο Το tag <CENTER>...</CENTER> στοιχίζει στο κέντρο όλα όσα περικλείει (πίνακες, εικόνες, κείµενο κ.λπ.). Αν και θεωρείται πιο σωστό να χρησιµοποιούµε την ALIGN γι' αυτή την εργασία, υπάρχουν πολλές περιπτώσεις που η <CENTER> αποδεικνύεται προτιµότερη. 3.7 Παραποµπές (Links) Οι σύνδεσµοι αποτελούν απαραίτητο στοιχείο των Web σελίδων γιατί συνδέουν τις σελίδες δίνοντας µας την δυνατότητα να µεταβούµε από µια σελίδα σε άλλη και από έναν δικτυακό τόπο σε έναν άλλο. Η γενική σύνταξη µια παραποµπής είναι: <A HREF="URL">κείµενο της παραποµπής</a> Ανάλογα µε το είδος µετάβασης διακρίνονται οι παρακάτω περιπτώσεις: 1) Παραποµπές από µια σελίδα σε µια άλλη που βρίσκεται σε έναν διαφορετικό κόµβο στο Internet Ο κώδικας θα είναι: Το <A HREF="http://www.yahoo.com">Yahoo!</A> είναι το πιο δηµοφιλές εργαλείο αναζήτησης. Αυτό που θα βλέπει ο χρήστης θα είναι: Το Yahoo! είναι το πιο δηµοφιλές εργαλείο αναζήτησης. Με κλικ πάνω στην λέξη Yahoo! ο browser θα καλεί την σελίδα http://www.yahoo.com 18

2) Παραποµπές από µια σελίδα σε µια άλλη του ίδιου κόµβου που βρίσκεται στον ίδιο φάκελο (directory) Αν η σελίδα στην οποία παραπέµπουµε είναι στο ίδιο directory (folder) µε αυτή η οποία έχει την παραποµπή, ο κώδικας θα είναι: <A HREF="όνοµα αρχείου">κείµενο παραποµπής</a> Για παραποµπή στο αρχείο secondpage.htm ο κώδικας θα είναι: Κάντε κλικ <A HREF="secondpage.htm">εδώ</A> για να πάτε στην άλλη σελίδα. Αυτό που θα βλέπει ο χρήστης θα είναι: Κάντε κλικ εδώ για να πάτε στην άλλη σελίδα. Με κλικ πάνω στην λέξη εδώ ο browser θα καλεί την σελίδα µε όνοµα αρχείου mypage.htm 3) Παραποµπές από µια σελίδα σε µια άλλη του ίδιου κόµβου που βρίσκεται σε κάποιον υποφάκελο υποφάκελο (subdirectory) Η γενική σύνταξη είναι: <a href="υποφάκελος/secondpage.htm"> υπογραµµισµένο κείµενο</a> Παράδειγµα: Υποθέτουµε πως η αρχική µας σελίδα έχει όνοµα firstpage.htm και βρίσκεται στην θέση c:\wwwroot\mypages\dance\tango Μια δεύτερη σελίδα έχει όνοµα secondpage.htm και βρίσκεται στην θέση c:\wwwroot\mypages\dance\tango\argentine Η παραποµπή από την firstpage.htm στην secondpage.htm θα είναι <a href="argentine/secondpage.htm">υπογραµµισµένο κείµενο</a> Αν η firstpage.htm βρίσκεται στην θέση c:\wwwroot\mypages\dance\tango\argentine\evita Η παραποµπή από την firstpage.htm στην secondpage.htm θα είναι <a href="argentine/evita/secondpage.htm">υπογραµµισµένο κείµενο</a> 4) Παραποµπές από µια σελίδα σε µια άλλη του ίδιου κόµβου που βρίσκεται σε ανώτερο φάκελο (directory) Η γενική σύνταξη είναι: <a href="../secondpage.htm">υπογραµµισµένο κείµενο</a> ( εν υπάρχει λόγος να βάλουµε το όνοµα του ανώτερου φακέλου διότι κάθε φάκελος έχει µόνον έναν αµέσως ανώτερο. Γι' αυτό αρκούν οι δύο τελείες). Παράδειγµα: 19

Υποθέτουµε πως η αρχική µας σελίδα έχει όνοµα secondpage.htm και βρίσκεται στην θέση c:\wwwroot\mypages\dance\tango\argentine Μια δεύτερη σελίδα έχει όνοµα firstpage.htm και βρίσκεται στην θέση c:\wwwroot\mypages\dance\tango Η παραποµπή από την secondpage.htm στην firstpage.htm θα είναι: <a href="../firstpage.htm">υπογραµµισµένο κείµενο</a> Αν η secondpage.htm βρίσκεται στην θέση c:\wwwroot\mypages\dance\tango\argentine\evita Η παραποµπή από την secondpage.htm στην firstpage.htm θα είναι <a href="../../ firstpage.htm">υπογραµµισµένο κείµενο</a> 5) Παραποµπές από µια σελίδα σε µια άλλη του ίδιου κόµβου που βρίσκεται σε άλλο (γενικά) φάκελο (directory) Η σύνταξη της παραποµπής αυτής είναι ένας συνδυασµός των άλλων βηµάτων 3 και 4. Για παράδειγµα έστω πως έχουµε τις σελίδες: firstpage.htm στην διεύθυνση c:\wwwroot\mypages\dance\tango\argentine\evita secondpage.htm στην διεύθυνση c:\wwwroot\mypages\dance\mambo\cuba\ Η παραποµπή από την firstpage.htm στην secondpage.htm θα είναι: <A HREF="../../mambo/cuba/secondpage.htm"> υπογραµµισµένο κείµενο</a> Η παραποµπή αυτή σηµαίνει: Από τον τρέχοντα φάκελο (evita) ανέβα στον ανώτερο (../ δηλαδή τον argentine). Μετά ανέβα στον αµέσως ανώτερο (../ δηλαδή τον tango). Από εκεί θα πας στον mambo. Από αυτόν θα πας στον cuba όπου θα βρεις το αρχείο firstpage.htm Σηµείωση: Στις περιπτώσεις 2, 3, 4, 5 χρησιµοποιούµε σχετικά (relative) links. ηλαδή οι παραποµπές δεν γίνονται µε το απόλυτο µονοπάτι (path) 1 : από το c:\wwwroot\mypages\dance\tango στο c:\wwwroot\mypages\dance\tango\argentine\evita Γίνονται µε το σχετικό: από τον τρέχοντα φάκελο (που είναι ο tango) στον αµέσως κατώτερό του (που είναι ο argentine). Ο τρόπος αυτός είναι ο ενδεδειγµένος διότι µας επιτρέπει χωρίς πρόβληµα να µεταφέρουµε ολόκληρο το site από µηχάνηµα σε µηχάνηµα (ή από φάκελο σε φάκελο) χωρίς να χρειαστεί καµία απολύτως µεταβολή. 1 Σε περίπτωση που θέλουµε να κάνουµε αναφορά (link) σε ένα αντικείµενο (σελίδα, φωτογραφία κλπ) το οποίο βρίσκεται σε έναν σταθερό ως προς τον αρχικό κατάλογο του κόµβου µας, τότε χρησιµοποιούµε το απόλυτο µονοπάτι στην αναφορά (absolute path) π.χ. /images/image01.gif. 20