από τον Γιάννη Ιωαννίδηεκπαιδευτικό Πληροφορικής

2011

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Περιεχόμενα1 Εισαγωγή................................................................................................................... 4

1.1 Γνωριμία με το Ιντερνετ......................................................................................41.2 Το δίκτυο και το TCP/IP.......................................................................................41.3 Ο Web server και οι browsers σαν Client.............................................................71.4 DNS Servers.........................................................................................................7

1.4.1 Πως μεταφράζονται τα domain names σε IP................................................81.5 Διευθύνσεις στο ιντερνετ....................................................................................9

2 Η γλώσσα που γράφεται μια Ιστοσελίδας................................................................112.1 Εισαγωγή...........................................................................................................112.2 HTML γλώσσα....................................................................................................11

2.2.1 Μορφοποίηση κειμένου................................................................................122.2.2 Εισαγωγή γραφικών και εικόνων.................................................................132.2.3 Υπερσύνδεσμοι.............................................................................................142.2.4 Ετικέτα δημιουργίας πίνακα........................................................................16

3 Ανέβασμα μιας ιστοσελίδας στο web server του εργαστηρίου μας.........................183.1 Το xampp και ο apache.....................................................................................18

4 Γνωριμία με τον macromedia Dreamweaver...........................................................214.1 Οθόνη εργασίας.................................................................................................214.2 Γραμμή εργαλείων εγγράφου.............................................................................214.3 Παλέτες και επιθεωρητές..................................................................................224.4 Δημιουργία μιας βασικής Ιστοσελίδας με κείμενο.............................................22

4.4.1 Ορισμός μιας ιστοθέσης..............................................................................224.5 Μορφοποίηση κειμένου......................................................................................25

4.5.1 Εισαγωγή και Κεντράρισμα κειμένου..........................................................254.5.2 Επικεφαλίδες...............................................................................................264.5.3 Γραμματοσειρές..........................................................................................264.5.4 Μέγεθος γραμματοσειράς...........................................................................27

4.6 Προσθήκη Ενός υπερδεσμού μέσα στην ιστοθέση σας......................................274.6.1 Υπερδεσμό προς άλλο server.......................................................................274.6.2 Υπερδεσμό προς άλλη σελίδα μας...............................................................284.6.3 Άγκυρες.......................................................................................................29

4.7 Δημιουργία πίνακα.............................................................................................314.7.1 Ετικέτα δημιουργίας πίνακα........................................................................314.7.2 Δημιουργία πίνακα με το Dreamweaver......................................................31

4.8 Εμφάνιση εικόνων..............................................................................................364.8.1 Ετικέτα εισαγωγής εικόνας.........................................................................364.8.2 Εισαγωγή εικόνας με το Dreamweaver.......................................................374.8.3 Είδη εικόνων: GIF, JPEG, PNG......................................................................37

4.9 Προετοιμασία των εικόνων................................................................................384.9.1 βελτιστοποίηση εικόνων με το fireworks....................................................384.9.2 Δημιουργία εικόνας με το fireworks............................................................40

2

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

5 Στυλ και CSS αρχεία................................................................................................415.1 Δημιουργία style................................................................................................41

5.1.1 Δημιουργία ανεξάρτητου αρχείου Στυλ (αρχείου.css).................................456 Τα επίπεδα «Div»......................................................................................................49

6.1 Δημιουργία επίπεδου (ap div).............................................................................496.2 Τροποποίηση επιπέδων......................................................................................506.3 Μεταφορά των χαρακτηριστικών των div σε αρχεία css..................................516.4 Εισαγωγή περιεχομένου στα επίπεδα.................................................................516.5 Δημιουργία άλλων σελίδων με το ίδιο στυλ......................................................51

7 Δυναμικές ιστοσελίδες.............................................................................................537.1 Αλληλοεπιδραστικές σελίδες από τη μεριά του πελάτη....................................537.2 Τι είναι το αντικείμενο......................................................................................54

7.2.1 Ιδιότητες αντικειμένων...............................................................................547.2.2 Μέθοδοι.......................................................................................................557.2.3 Γεγονότα-συμβάντα.....................................................................................56

7.3 Περισσότερη javascript......................................................................................577.3.1 Έτοιμα αντικείμενα της javascript..............................................................577.3.2 Και άλλα Συμβάντα:.....................................................................................59

7.4 Java.................................................................................................................... 617.4.1 Η Γλώσσα Μηχανής.....................................................................................617.4.2 Η Εικονική μηχανή της Java (Java Virtual Machine).....................................627.4.3 Κώδικας bytecode της java.........................................................................637.4.4 Applets........................................................................................................64

8 Επαναληπτικές ερωτήσεις προόδου.........................................................................65

3

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

1 Εισαγωγή

1.1 Γνωριμία με το ΙντερνετΌλοι μας πλέον γνωρίζουμε το Ιντερνετ και βέβαια όταν οι μέσοι χρήστες του λένε Ιντερνετ συνήθως εννοούν τις ιστοσελίδες. Στην πραγματικότητα το Ιντερνετ είναι ένα τεράστιο ανοικτό δίκτυο υπολογιστών που περιλαμβάνει ένα πλήθος υπηρεσιών μια από τις οποίες είναι το Web (οι ιστοσελίδες). Άλλες υπηρεσίες είναι το ηλεκτρονικό ταχυδρομείο, οι μεταφορά αρχείων (ftp), η εξ’ αποστάσεως διαχείριση υπολογιστών (telnet), τα chat κλπ. Για να λειτουργήσει κάθε υπηρεσία θα πρέπει να τρέξουμε διαφορετική εφαρμογή. Για να δούμε σελίδες στο Web τρέχουμε έναν browser (Internet explorer, firefox, mozila, opera κλπ). Για να λάβουμε ή να στείλουμε email τρέχουμε το Outlook Express, το Outlook Microsoft, το Thunderbird, το Eudora κλπ)Το ιντερνετ ξεκίνησε σαν ένα κλειστό και απόρρητο στρατιωτικό δίκτυο υπολογιστών του αμερικάνικου στρατού και μετεξελίχθηκε από την ακαδημαϊκή κοινότητα σε ένα παγκόσμιο δίκτυο επικοινωνίας, πληροφόρησης, συναλλαγών αλλά και εργασίας των απλών πολιτών. Για να λειτουργήσει το Ιντερνετ χρειάζεται υπολογιστικό και επικοινωνιακό εξοπλισμό αλλά και πάρα πολύ λογισμικό

ΔραστηριότηταΑνοίξτε τον Ιντερνετ ExplorerΑνοίξτε το Outlook Express

1.2 Το δίκτυο και το TCP/IPΤο δίκτυο του Ιντερνετ ξεκινά από τις κάρτες δικτύου των απλών υπολογιστών των σπιτιών μας, ή το modem μας. Αν το pc είναι σε κάποιο τοπικό δίκτυο (πχ σχολικό εργαστήριο ή δίκτυο μιας εταιρίας) τότε για να φθάσει στο ιντερνετ περνά από δικτυακό εξοπλισμό όπως, ειδικά καλώδια του τοπικού δικτύου της δουλειάς μας η του εργαστηρίου μας, συγκεντρώνεται από ειδικά «πολύπριζα» τα hubs και καταλήγει στον «τροχονόμο» των τοπικών δικτύων τον Router. Ο Router είναι η συσκευή που συγκεντρώνει τα δεδομένα που έρχονται από κάθε υπολογιστή του τοπικού δικτύου και τα προωθεί προς το internet ή μοιράζει τα δεδομένα που έρχονται από το internet προωθώντας τα προς τον υπολογιστή του τοπικού δικτύου που προορίζονται. Από τον router με την βοήθεια ειδικού modem μπαίνουμε στο τηλεπικοινωνιακό δίκτυο (ΟΤΕ, Forthnet, Ontelecoms, Hol κλπ). Τα δεδομένα μας ταξιδεύουν και φθάνουν σε άλλα ειδικά modems μέσω των οποίων συνδέονται με το δίκτυο της εταιρίας ή του οργανισμού που μας παρέχει Ιντερνετ (πχ. Otenet, Forthnet, Ontelecoms, HOL, Σχολικό δίκτυο, πανεπιστημιακό δίκτυο, Σύζευξης κλπ).

4

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Η ταχύτητα που ταξιδεύουν τα δεδομένα από το σπίτι μας μέχρι τον παροχέα μας και το αντίστροφο εξαρτάται από το είδος της τηλεφωνικής γραμμής. Η πιο αργή είναι η απλή τηλεφωνική γραμμή η αλλιώς PSTN (56 Kbps)[δηλαδή 56.000 bits per seconds] .Η αμέσως ταχύτερη είναι η ISDN τηλεφωνική γραμμή (64 ή 128 Κbps). Αλλά οι γραμμές που έκαναν το Ιντερνετ πρακτικό εργαλείο και όχι βασανιστήριο αναμονής είναι οι ευρυζωνικές γραμμές DSL. Οι ταχύτητες των γραμμών αυτών ξεκινούν από εκατοντάδες Kbps και φθάνουν σε δεκάδες Mbps.Αλλά ας γυρίσουμε στα modems των παροχέων. Εκεί μαζεύεται όλη η κίνηση των συνδρομητών τους. Από τα modems τα δεδομένα περνούν στους routers και τους υπολογιστές του παροχέα που είναι και αυτοί συνδεδεμένοι σε δίκτυο και αποτελούν έναν κόμβο του Ιντερνετ. Ο κόμβος αυτός του παροχέα είναι συνδεδεμένος με ακόμη πιο γρήγορες γραμμές με άλλους κόμβους οι οποίοι με την σειρά τους συνδέονται με άλλους κόμβους ή μαζεύουν την κίνηση των δικών τους συνδρομητών.

Σε αυτό το σημείο μας γεννιέται το πρώτο ερώτημά μας. Πως αυτό το δίκτυο είναι τόσο πολύ φθηνότερο από την απλή τηλεφωνία;Η απάντηση βρίσκεται στον τρόπο που διαμορφώνονται και κινούνται τα δεδομένα που λέγεται πρωτόκολλο TCP/IP. Ας φανταστούμε ότι τηλεφωνούμε στον θείο μας στην Αμερική. Τότε όση ώρα μιλάμε δεσμεύουμε μια τηλεφωνική γραμμή που ξεκινά από εμάς μέχρι τον θείο μας, δεσμεύοντας έτσι χιλιάδες χιλιόμετρα καλωδίων εκατοντάδες κόμβων και μεγάλες ποσότητες τηλεπικοινωνιακών συσκευών. Και μάλιστα αυτό γίνεται και όταν δεν μιλάμε αλλά περιμένουμε τον θείο μας να πάει στην κουζίνα να κατεβάσει το φαγητό από την φωτιά.Η πληροφορία που ξεκινά από έναν υπολογιστή του Ιντερνετ (σύφωνα με το πρωτόκολλο TCP/IP) κόβεται σε μικρά κομματάκια. Αυτά τα κομματάκια πακετάρονται σε ειδικά ηλεκτρονικά πακέτα και στέλνονται προς τον αποδέκτη μέσα από τις

5

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

τηλεπικοινωνιακές γραμμές. Συνεπώς σε μια γραμμή που μας συνδέει πχ με την Αμερική ταξιδεύουν κομματάκια δεδομένων από πάρα πολλούς συνδρομητές. Αυτό το μοίρασμα των γραμμών έριξε και το κόστος της επικοινωνίας. Φυσικά όμως έχουμε και το αντίτιμο. Οι πληροφορίες κινδυνεύουν από μποτιλιάρισμα. Πράγματι υπάρχει η πιθανότητα να συσσωρεύονται τα πακέτα σε κάποιος κόμβους και να καθυστερούν ή και να χάνονται. Πράγματι το βλέπουμε αυτό καθημερινά όταν άλλοτε μια σελίδα μας έρχεται αμέσως και κάποια άλλη ώρα καθυστερεί υπερβολικά η «κόβεται».

Ερώτημα δεύτερο:Πως τα πακέτα βρίσκουν τους αποδέκτες; Στην τηλεφωνία για να τηλεφωνήσουμε στον θείο μας πληκτρολογούμε έναν αριθμό που αντιστοιχεί μόνο στο καλώδιο που καταλήγει στο τηλέφωνο του θείου μας. Το ίδιο, σαν αρχή, συμβαίνει και στο Ιντερνετ. Σε κάθε πρίζα, από την οποία μπορούμε να συνδέσουμε τον υπολογιστή μας στο ιντερνετ, αντιστοιχεί ένας μοναδικός αριθμός που μάλιστα έχει την μορφή 192.168.12.2 (δηλαδή τέσσερις αριθμούς από το 0 έως το 255 που χωρίζονται από τελείες) και ονομάζεται IP.Σε κάθε πακέτο που ξεκινά από ένα υπολογιστή και πηγαίνει σε κάποιον άλλο γράφεται το IP του αποδέκτη και του αποστολέα (όπως δηλαδή κάνουμε με τα απλά γράμματα που στέλνουμε από το ταχυδρομείο). Επίσης στο πακέτο γράφεται και ο αύξον αριθμός του κομματιού της πληροφορίας καθώς και κάποια στοιχεία για να ελεγχθεί η ακεραιότητα της κατά το ταξίδι του πακέτου.Όταν φθάσουν τα πακέτα στον αποδέκτη, ελέγχεται η ακεραιότητα τους, μπαίνουν σε σειρά ανάλογα με τον αύξοντα αριθμό τους και συνθέτονται έτσι ώστε να ξαναδημιουργηθεί όλη η πληροφορία που εστάλη.

Δραστηριότητα1. Επιλέξτε έναρξη > εκτέλεση2. γράψτε cmd3. θα βρεθείτε σε περιβάλλον γραμμής εντολών.4. γράψτε IPCONFIG5. σημειώστε το IP του υπολογιστή σας.6. γράψτε ping και το IP του διπλανού σας

Η εντολή ping στέλνει δοκιμαστικά πακέτα και μετρά τον χρόνο που κάνουν να πάνε και να επιστρέψουν

7. σημειώστε τους χρόνους

1.3 Ο Web server και οι browsers σαν ClientΤο επόμενο ερώτημά μας είναι «που βρίσκονται οι Ιστοσελίδες;».Για να δούμε μια ιστοσελίδα τρέχουμε έναν browser γράφουμε την διεύθυνση της πχ www . sch . gr στο ειδικό πλαίσιο του browser και πατάμε enter. Τότε θα μας έρθει η σελίδα του σχολικού δικτύου. Το ίδιο θα γινόταν αν αντί για www . sch . gr γράφαμε 194.63.238.45. Ο αριθμός IP=194.63.238.45 αντιστοιχεί σε έναν υπολογιστή, στον σκληρό δίσκο του οποίου υπάρχει η ιστοσελίδα, αντίγραφο της οποίας ήρθε σε εμάς.

6

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Για να γίνει αυτό στον κόμβο του σχολικού δικτύου τρέχει ένα ειδικό πρόγραμμα που ονομάζεται Web Server. Ο web server αναμένει αιτήματα από το ίντερνετ όπως αυτό που κάναμε εμείς (δηλαδή ζητήσαμε την σελίδα του σχολικού δικτύου). Όταν του έρθει το αίτημα προσδιορίζει το IP του υπολογιστή που του το έστειλε και του το ικανοποιεί (στέλνει την σελίδα που ζητήσαμε).Συνεπώς για να δουλέψει η υπηρεσία web η αλλιώς HTTP χρειάζεται να υπάρχουν web servers που αποθηκεύουν σελίδες και στέλνουν αντίγραφά τους όταν τους ζητηθεί και προγράμματα (όπως ο Internet explorer) που τρέχουν στους υπολογιστές των χρηστών του ιντερνετ με τα οποία μπορούμε να παραγγέλνουμε σελίδες. Δηλαδή η υπηρεσία web λειτουργεί με την λογική μιας ταβέρνας. Οι πελάτες (Internet explorer) παραγγέλνουν και οι σερβιτόροι (web servers) σερβίρουν. Συνεπώς, τελική ενέργεια που πρέπει να κάνουμε όταν φτιάξουμε μια σελίδα είναι να την αναρτήσουμε σε έναν web server. Η εργασία αυτή γίνεται με την αντιγραφή του αρχείου της σελίδας μας από τον υπολογιστή που την φτιάξαμε, σε έναν ειδικό υποκατάλογο του υπολογιστή του web server.

1.4 DNS ServersΌμως όπως είδαμε, όταν παραγγείλαμε την σελίδας του σχολικού δικτύου δεν γράψαμε την IP διεύθυνση αλλά www . sch . gr . Γράψαμε δηλαδή μια διεύθυνση με γράμματα που μπορεί ο άνθρωπος να την θυμάται πιο εύκολα. Ήδη από τα γράμματα μπορούμε να συμπεράνουμε ότι βρίσκεται στην Ελλάδα (gr) και αφορά σχολεία (school). Η διεύθυνση αυτή μεταφράζεται σε IP διεύθυνση, που καταλαβαίνουν τα μηχανήματα, από ένα ειδικό λογισμικό που συνήθως βρίσκεται στο κόμβο του παροχέα και λέγεται DNS server.Το πιο δεξιό κομμάτι της διεύθυνσης (στο παράδειγμα μας .gr) ονομάζεται first-level domain name (Πρώτου επιπέδου όνομα τομέα). Υπάρχουν εκατοντάδες first-level domain ονόματα όπως .com , .edu , gov, mil, net, org καθώς και συνδυασμοί δύο γραμμάτων για κάθε χώρα.Μετά τα πρώτου επιπέδου ακολουθούν εκατομμύρια ονόματα δευτέρου επιπέδου (πχ στο παράδειγμα μας .sch.)Μπορεί να ακολουθεί και όνομα τρίτου, τετάρτου … εως και 127ου επιπέδου.Το πιο αριστερό όνομα αντιστοιχεί σε ένα web server . (πχ www είναι το όνομα του web server που βρίσκεται στο domain sch . gr ). Κάθε web server αντιστοιχεί σε μια διεύθυνση που με τη σειρά της αντιστοιχεί σε έναν αριθμό IP. Ο πίνακας των διευθύνσεων και των αντίστοιχων IP συνιστά μια τεράστια βάση δεδομένων που ονομάζεται whois και λειτουργεί κατανεμημένη σε όλο τον κόσμο.Oι εργασίες που έχει να διεκπεραιώσει αυτή η βάση είναι τεράστιες σε πλήθος και πολυπλοκότητα. Για να το κατανοήσουμε ας αντιληφθούμε ότι: Υπάρχουν δισεκατομμύρια από IP διευθύνσεις σε χρήση, και οι περισσότερες

μηχανές έχουν ένα κατανοήσιμο από τον άνθρωπο όνομα.

7

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Υπάρχουν πολλά δισεκατομμύρια από DNS αιτήματα που υποβάλλονται κάθε ημέρα. Ένα μεμονωμένο πρόσωπο μπορεί εύκολα να κάνει εκατό ή περισσότερα DNS αιτήματα την ημέρα, και υπάρχουν εκατοντάδες εκατομμύρια άνθρωποι και μηχανές που χρησιμοποιούν το Διαδίκτυο καθημερινά.

Domain names και IP διευθύνσεις αλλάζουν καθημερινά. Νέα domain names δημιουργούνται καθημερινά. Εκατομμύρια των ανθρώπων αλλάζουν και προσθέτουν domain names και IP

διευθύνσεις κάθε ημέρα.

1.4.1Πως μεταφράζονται τα domain names σε IP.

Αν γράψουμε στον internet explorer www . sch . gr για να ζητήσουμε την σελίδα θα πρέπει να μάθουμε το ip στο οποίο αντιστοιχεί. Για να γίνει αυτό εκτελείται μια συντονισμένη εργασία από μια σειρά από συνεργαζόμενους domain names servers. Έστω ότι ζητήσαμε από τον browser την διεύθυνση www . sch . gr .Στην αρχή ο Browser ψάχνει σε ένα ειδικό χώρο που έχει ο ίδιος δημιουργήσει και λέγεται cache όπου φυλάει τις διευθύνσεις με τις αντίστοιχες ip που πρόσφατα χρησιμοποίησε. Αν το βρεί αντικαθιστά το όνομα με το ip και ζητά την σελίδα. Αν όμως δεν την βρει ανατρέχει στον πρώτο DNS server που είναι συνδεδεμένος που λέγεται root DNS server. Ο πρώτος DNS server βρίσκεται στον ISP (στο δίκτυο που μας συνδέει στο ιντερνετ)Στον server αυτόν βρίσκει την διεύθυνση του DNS server πρώτου επιπέδου (δηλαδή του gr DNS server). Εκεί βρίσκονται γραμμένοι όλοι οι DNS server δευτέρου επιπέδου. Έτσι βρίσκεται ό ζητούμενος DNS server δευτέρου επιπέδου (δηλαδή ο sch.gr DNS server.) Στη βάση του DNS server δευτέρου επιπέδου βρίσκεται η IP του μηχανήματος που ζητάμε (δηλαδή www . sch . gr ) και στέλνεται στον browser.

8

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Δραστηριότητα1. κάντε ping στη διεύθυνση www . oeek . gr 2. σημειώστε την IP διεύθυνση που αντιστοιχεί 3. γράψτε την διεύθυνση IP στον browser και δείτε τι θα εμφανιστεί.

1.5 Διευθύνσεις στο ιντερνετΜια διεύθυνση Web καλείται Uniform Resource Locator (URL). Ένα URL αποτελείται από πολλά τμήματα. Ένα URL αποτελείται από ένα πρωτόκολλο, ένα τομέα, μια πύλη, και την πλήρη διαδρομή προς ένα αρχείο.“http :// www . webdesignlessons . com :80 / dreamweaver / lesson 1. php ? id = dreamweaver ”

Πρωτόκολλο: Ενημερώνει τον browser ότι θα χρησιμοποιηθεί η υπηρεσία WebΤομέας:Αντιστοιχεί στη διεύθυνση του web server.Πύλη: Μια συγκεκριμένη θέση μνήμης που χρησιμοποιεί και ο server και ο client και αντιστοιχεί σε μια υπηρεσία του ιντερνετ. Μέσω της πύλης διέρχονται οι πληροφορίες από τον πελάτη στον server και αντίστροφα. H υπηρεσία web χρησιμοποιεί την πόρτα 80.Διαδρομή και όνομα αρχείου: Η θέση στον σκληρό δίσκο του server που βρίσκεται η ιστοσελίδα.Δεδομένα: Δεδομένα που στέλνονται από τον browser μαζί με το αίτημα για την ιστοσελίδα προς τον server

9

Πρωτόκολλο ΤομέαςΠύλη διαδρομή αρχείου δεδομέν

α

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

2 Η γλώσσα που γράφεται μια Ιστοσελίδας

2.1 ΕισαγωγήΗ βασική γλώσσα στην οποία γράφονται οι ιστοσελίδες είναι η Html.Το αρχείο μιας ιστοσελίδας είναι ένα κείμενο που περιέχει δύο κατηγορίες από λέξεις, Λέξεις που εμφανίζονται στην σελίδα μας και εντολές προς τον browser. Οι εντολές γράφονται ανάμεσα από τα σύμβολα < >. Οι εντολές μπορεί να καθορίζουν την μορφοποίηση του κειμένου που θα εμφανιστεί να παρεμβάλουν φωτογραφίες, να δημιουργούν background να παίζουν ήχους ή βιντεο να καλούν και να τρέχουν άλλα προγράμματα (σε flash, java, javascript, php, asp,

perl κλπ). κλπ

Μια άλλη γλώσσα που χρησιμοποιείται σήμερα για την συγγραφεί ιστοσελίδων είναι η Xml Η λογική της είναι παρόμοια με την HTML αλλά περιέχει πολύ μεγαλύτερο ρεπερτόριο εντολών.Επίσης μπορεί να κατασκευαστεί εξ ολοκλήρου σε γλώσσες προγραμματισμού όπως από action script(flash), java, javascript, php, asp, perl ακόμη και Visul basic. Το πρόγραμμα που θα προκύψει θα ενσωματωθεί σε μια άδεια σελιδα html.Επειδή όμως τελικά δεν πρέπει είναι δουλειά προγραμματιστή η κατασκευή μιας ιστοσελίδας όπως δεν είναι δουλειά της συγγραφής ενός βιβλίου ενός τυπογράφου αλλά ενός συγγραφέα, δημιουργήθηκαν απλά εργαλεία που επιτρέπουν σε ανθρώπους που δεν γνωρίζουν προγραμματισμό να κατασκευάζουν ιστοσελίδες. Τα εργαλεία αυτά κάνουν την εργασία της κατασκευής μιας ιστοσελίδας παρόμοια με την κατασκευή ενός ηλεκτρονικού εντύπου. Αφού φτιαχτεί η ιστοσελίδα σαν ηλεκτρονικό έντυπο αναλαμβάνει το ειδικό πρόγραμμα να την μετατρέψει σε γλώσσα Html η XML.

2.2 HTML γλώσσαΔομή της σελίδας (σελ.117-120)

Δραστηριότητα1. Ανοίξτε το Nodpad (σημειωματάριο) και γράψτε το πιο κάτω κείμενο html<html><title>test1</title><body><p>από την πόλη έρχομαι</p><p>και στη κορφή κανέλα</p></body></html>2. Αποθηκεύστε το με όνομα test1.htm

10

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

3. Ανοίξτε το με τον browser4. πατήστε στον Internet Explorer την επιλογή προβολή > προέλευση. Τι παρατηρείτε;5. ανοίξτε την σελίδα www . sch . gr 6. επιλέξτε προβολή > προέλευση. Τι παρατηρείτε;

2.2.1Μορφοποίηση κειμένου

Δραστηριότητα1. Ανοίξτε το Nodpad (σημειωματάριο) και γράψτε το πιο κάτω κείμενο html<html> <head> <title> second site </title> </head> <body> <p><b>το ποίημα</b><p> <p>από την <u>πόλη</u> <br> και στη <I>κορφή<I> κανέλα</p> <p><small>μικρα γράμματα</small></P> <p><big>μεγάλα γράμματα</big></p> </body></html>2. Αποθηκεύστε το με όνομα ask2.htm3. Ανοίξτε το με τον browser4. σημειώστε την λειτουργία των <br>,<p> και <b>,<i>,<u>

Δραστηριότητα1. Ανοίξτε το Nodpad (σημειωματάριο) και γράψτε το πιο κάτω κείμενο html<html> <head> <title> second site </title> </head> <body bgcolor="blue" text="yellow"> <p><center><b><a href="#katw"> το ποίημα</b></A></center><p> <hr> <p><right>από την <u>πόλη</u> <br> και στη <I>κορφή<I> κανέλα</p> <p><small>μικρα γράμματα</small></P> <p><big>μεγάλα γράμματα</big></p></right> <p><b><i>εντονα και ιτάλικς</i></B></p> <h1>επικεφαλίδα1</h1> <h2>επικεφαλίδα2</h2>

11

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

<h3>επικεφαλίδα3</h3> <h4>επικεφαλίδα4</h4> <h5>επικεφαλίδα5</h5> <h6>επικεφαλίδα6</h6> <h7>επικεφαλίδα7</h7> </body></html>2. Αποθηκεύστε το με όνομα ask3.htm3. Ανοίξτε το με τον browser4. σημειώστε την λειτουργία των <hr>, <center>,<big>,<small>,<h1>…<h6>

2.2.2Εισαγωγή γραφικών και εικόνων

Δημιουργείστε ένα φάκελο με όνομα web και μέσα στον web ένα άλλο υποφάκελο με όνομα images.

Μέσα στο φάκελο images αντιγράψτε μια εικόνα τύπου jpg από το ιντερνετ. Ονομάστε την pic1.jpg.Δημιουργείστε μια ιστοσελίδα με τον πιο κάτω κώδικα και σώστε την στο φάκελο web.<html><head> <title>Ιστοσελίδα με εικόνα </title></head><body><img src=”images/pic1.jpg”><br>Η πρώτη μου ιστοσελίδα με φωτογραφία</body></html>Ερώτηση:Η φωτογραφίες βρίσκονται μέσα στο αρχείο της ιστοσελίδα;…………………………………………………………………………………………………………………………..

2.2.3Υπερσύνδεσμοι

Για τη δημιουργία υπερσυνδέσμων μέσα σε μια ιστοσελίδα χρησιμοποιούμε την ετικέτα :<a> …..</a> με τις απαραίτητες παραμέτρους <a href=”αρχείο ή σημείο σύνδεσης> λέξη η εικόνα υπερσύνδεσης </a>Υπερσύνδεσμο προς μια άλλη ιστοσελίδα

12

Γράφουμε τη σχετική διαδρομή από τον φάκελο που βρίσκεται η ιστοσελίδα μου μέχρι το αρχείο της εικόνας

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

2.2.3.1Υπερσύνδεσμος προς μια εξωτερική ιστοσελίδα

Για να δημιουργήσουμε ένα υπερσύνδεσμο προς μια άλλη εξωτερική ιστοσελίδα γράφουμε τον πιο κάτω κώδικα:<a href=”http://διεύθυνση ιστοσελίδας”>κείμενο ή εικόνα υπερσύνδεσης</α>ΠχΣυμπληρώστε στην ιστοσελίδα με τη φωτογραφία:<html><head> <title>Ιστοσελίδα με εικόνα </title></head><body><p><img src=”images/pic1.jpg”><br>Η πρώτη μου ιστοσελίδα με φωτογραφία</p><a href=”http :// www . google . com ”> μηχανή αναζήτησης</a></body></html>Για να κάνουμε την εικόνα υπεσύνδεσμο συμπληρώνουμε:<html><head> <title>Ιστοσελίδα με εικόνα </title></head><body><p><a href=http://www.sch.gr><img src=”images/pic1.jpg”></a><br>Η πρώτη μου ιστοσελίδα με φωτογραφία</p><a href=”http :// www . google . com ”> μηχανή αναζήτησης</a></body></html>

2.2.3.2Υπεσύνδεσμος με μια εσωτερική ιστοσελίδα

Για να δημιουργήσουμε μια υπερσύνδεση με μια άλλη δικιά μας ιστοσελίδα γράφουμε:<a href=”[σχετική θέση του αρχείο της άλλης ιστοσελίδας ως προς το παρόν]/ονομα του αρχείου”> κείμενο ή εικόνα υπερσύνδεσμου</a>Δημιουργείστε μια καινούργια ιστοσελίδα με όνομα istosel2.html<html><head> <title>2η Ιστοσελίδα </title></head><body><p>Η δεύτερη ιστοσελίδα </p></body></html>Αποθηκεύστε την στο φάκελο web.

13

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Ανοίξτε την ιστοσελίδα foto.html.Προσθέστε τον πιο κάτω κώδικα:<html><head> <title>Ιστοσελίδα με εικόνα </title></head><body><p><a href=http://www.sch.gr><img src=”images/pic1.jpg”></a><br>Η πρώτη μου ιστοσελίδα με φωτογραφία</p><p><a href=”http :// www . google . com ”> μηχανή αναζήτησης</a></p><p><a href=”istosel2.html”>πήγαινε στη δεύτερη ιστοσελίδα μου</a></p></body></html>

2.2.3.3Υπερσύνδεσμος προς «άγκυρα».

Ανοίξτε πάλι την ιστοσελίδα foto.html. Θέλουμε να δημιουργήσουμε μια υπερσύνδεση στο τέλος που να μας πηγαίνει στην αρχή της ιστοσελίδας. Συμπληρώνουμε τον κώδικα στη ιστοσελίδα foto.html<html><head> <title>Ιστοσελίδα με εικόνα </title></head><body><p> <a name=”start”> </a> </p><p><a href=http://www.sch.gr><img src=”images/pic1.jpg”></a><br>Η πρώτη μου ιστοσελίδα με φωτογραφία</p><a href=”http :// www . google . com ”> μηχανή αναζήτησης</a><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p>

14

Η ετικέτα <α> με την παράμετρο name=”κάποιο ονομα” δημιουργεί μια «άγκυρα».(Δηλ. σημείο προς το οποίο μπορούμε να πάμε από μια υπερσύνδεση).

Προσθέτουμε γραμμές

Υπερσύνδεσμος προς την άγκυρα start

Υπερσύνδεσμος προς το αρχείο istosel2.html που βρίσκεται στον ίδιο φάκελο με τη foto.html. Αν ήταν σε διαφορετικό φάκελο, θα γράφαμε και την σχετική διαδρομή.

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

<p>14</p><p>15</p><p> <a href=#start >πήγαινε στην αρχή της σελίδας</a> </p></body></html>

2.2.4Ετικέτα δημιουργίας πίνακα.

Ένας απλός πίνακας δημιουργείται από τις πιο κάτω εντολές-ετικέτες σε html.<table><tr>

<td> πρώτο κελί πρώτης γραμμής</td><td> πρώτο κελί πρώτης γραμμής</td><td> πρώτο κελί πρώτης γραμμής</td>

</tr><tr>

<td> πρώτο κελί δεύτερης γραμμής</td><td> δεύτερο κελί δεύτερης γραμμής</td><td> τρίτο κελί δεύτερης γραμμής</td>

</tr><tr>

<td> πρώτο κελί τρίτης γραμμής</td><td> δεύτερο πρώτο κελί τρίτης γραμμής</td><td> τρίτο κελί τρίτης γραμμής</td>

</tr></table>

15

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

3 Ανέβασμα μιας ιστοσελίδας στο web server του εργαστηρίου μας

3.1 Το xampp και ο apacheΈνα από τα μηχανήματα του εργαστηρίου μας λειτουργεί ως web server (Διακομιστής Ιστοσελίδων).Το πρόγραμμα web server που έχει «φορτωθεί» λέγεται apache. Είναι ανοικτού κώδικα και μπορείτε να το βρείτε στη διεύθυνση www . apache . org . To apache συνήθως δεν στήνεται μόνο του αλλά συνεργάζεται με άλλα προγράμματα. Υπάρχουν έτοιμες «διανομές». Δηλαδή έτοιμες συλλογές με τον apache και με συνοδευτικά προγράμματα απαραίτητα για τη λειτουργία και διαχείριση ενός web server. Συνήθως δε οι διανομές αυτές είναι συμπυκνωμένες μέσα σε ένα εκτελέσιμο αρχείο. Η δε εγκατάστασή τους είναι πολύ εύκολη. Το μόνο που χρειάζεται είναι η εκτέλεση του αρχειου διανομής. Τότε γίνεται αυτόματα η δημιουργία των κατάλληλων φακέλων, η αποσυμπίεση, εγκατάσταση των προγράμματα και η ρύθμιση του υπολογιστή μας. Η διανομή που χρησιμοποιήσαμε στο εργαστήριο είναι το xampp. Το xampp και τα εγχειρίδια εκμάθηνσης του, μπορούμε να τα κατεβάσουμε από την ιστοσελίδα: http://www.apachefriends.org/en/xampp.htmlΕικόνα 1 μετά την εγκατάσταση

Εικόνα 2 η κονσόλα ρύθμισης του apache και των άλλων προγραμμάτων

Μετά την εγκατάσταση δημιουργείται ένας φάκελος xampp και πολύ υποφάκελοι. Ό υποφάκελος htdocs είναι ο φάκελος στον οποίο «ανεβάζουμε» τις ιστοσελίδες που θέλουμε να φαίνονται από το διαδίκτυο. Για αυτό το λόγο το κάνουμε κοινόχρηστο προς όλους τους χρήστες του εργαστηρίου που θα ανεβάσουν ιστοσελίδες. Προς το

16

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

παρόν βέβαια θα μπορούμε να τις δούμε μόνο από το τοπικό μας δίκτυο. Και αυτό γιατί έτσι είναι ρυθμισμένος ο δρομολογητής που συνδέει το εργαστήριό μας με το διαδίκτυο.Μετά την εγκατάσταση δημιουργείται ένας φάκελος xampp και πολύ υποφάκελοι. Ό υποφάκελος htdocs είναι ο φάκελος στον οποίο «ανεβάζουμε» τις ιστοσελίδες που θέλουμε να φαίνονται από το διαδίκτυο. Για αυτό το λόγο το κάνουμε κοινόχρηστο προς όλους τους χρήστες του εργαστηρίου που θα ανεβάσουν ιστοσελίδες. Προς το παρόν βέβαια θα μπορούμε να τις δούμε μόνο από το τοπικό μας δίκτυο. Και αυτό γιατί έτσι είναι ρυθμισμένος ο δρομολογητής που συνδέει το εργαστήριό μας με το διαδίκτυο.

Όταν θέλετε να

κατασκευάστε μια ιστοσελίδα, πρέπει πρώτα να δημιουργήσετε στο δικό σας υπολογιστή ένα φάκελο που θα τον λέμε φάκελος ρίζα (root) με διάφορους υποφακέλους. Κατόπιν θα οργανώσετε τα αρχεία html των σελίδων σας καθώς και όλο το περιεχόμενο (εικόνες, κείμενα, ταινίες ήχους κλπ) σε αυτούς του φακέλους και υποφακέλους. Όλοι αυτοί η φάκελοι και τα περιεχόμενά τους αποτελούν την ιστοθέση σας (site)Αφού δοκιμάσετε την ιστοθέση σας (site) και σιγουρευτείτε ότι λειτουργεί σωστά με όλους τους browsers, αντιγράφετε το φάκελο root στο φάκελο htdocs του web server.Κατόπιν γράφοντας στο browser την ip διεύθυνση του υπολογιστή που έχει τον web server η το όνομα του στο τοπικό δίκτυο, μια κάθετο / και το όνομα της ιστοσελίδα σας θα την δείτε.Δρατηριότητα

1. Μετονομάστε το root φακέλο σας και δώστε του όνομα το επίθετό σας, με λατινικούς χαρακτήρες.

2. Αντιγράψτε τον root φάκελό σας.3. Ανοίξτε τις θέσεις δικτύου.4. Βρείτε τον υπολογιστή που τρέχει ο web server.5. Bρείτε στο σκληρό δίσκο του web server τον φάκελο htdocs και ανοίξτε τον.6. Επικολείστε εκεί τον root φάκελό σας.7. Ανοίξτε τον browser γράψτε:

17

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

http :// “ονομα υπολογιστή με web server”/ «ονομα root φακέλου σας»/ «ονομα της ιστοσελίδας σας»

18

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

4 Γνωριμία με τον macromedia Dreamweaver

4.1 Οθόνη εργασίας

4.2 Γραμμή εργαλείων εγγράφου

code:μας δείχνει την σελίδα σε μορφή κώδικαDesign: Βλέπετε το σχέδιο της σελίδας (δηλαδή την σελίδα και τα αντικείμενα που βάζετε όπως περίπου θα εμφανιστούν).Split:η μισή σελίδα δείχνει τον κώδικα και η άλλη μισή το σχέδιο της σελίδας.

19

Γραμμή εισαγωγής

Παράθυρο εγγράφου

Γραμμή εργαλείων εγγράφου

ομάδα παλετών

Γραμμή κατάστασης Επιθεωρητή

ς ιδιοτήτων

Γραμμή μενού

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Title: Ο τίτλος που θα εμφανίζεται στη μπάρα του παραθύρου της σελίδας.

προεπισκόπηση της σελίδας από τον browsers που έχουμε εγκατεστημένους στον Υ/Η

4.3 Παλέτες και επιθεωρητέςΜπορούμε να αναπτύξουμε ή να κλείσουμε τις παλέτες από τα αντίστοιχα βελάκια του τίτλου τους.Από τις παλέτες σημαντική είναι η παλέτα Assets στην οποία μπορούμε να βάλουμε όλα τα πολυμεσικά αντικείμενα ή και προγραμματάκια που πρόκειται να χρησιμοποιήσουμε στις σελίδες μας Οι επιθεωρητές ιδιοτήτων εμφανίζουν (αλλά μας δίνουν και την δυνατότητα να αλλάξουμε) όλες τις ιδιότητες του αντικειμένου που είναι εκείνη την στιγμή επιλεγμένο.

4.4 Δημιουργία μιας βασικής Ιστοσελίδας με κείμενο

4.4.1Ορισμός μιας ιστοθέσης

Χρησιμοποιείτε την παλέτα files του Dreamweaver για να σχεδιάσετε, να δημιουργήσετε και να διαχειριστείτε τα έργα σας. Ο ορισμός μιας ιστοθέσης πρέπει να είναι πάντα το πρώτο σας βήμα, όταν αρχίσετε να εργάζεστε σε ένα νέο έργο.Όταν τρέχουμε για πρώτη φορά τον Dreamweaver τρέχει ένας “Wizard” (μάγος) που μας βοηθά να οργανώσουμε τον χώρο εργασίας μας. Επίσης μπορούμε να ξανατρέξουμε τον μάγο για να δημιουργήσουμε νέο έργο ή να επεξεργαστούμε τον ήδη υπάρχοντα χώρο εργασίας από την επιλογή site.Ξεκινώντας ο μάγος εμφανίζει την σελίδα για να ονομάσουμε τον χώρο εργασίας μας.

20

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

κατόπιν μας ρωτά αν θα δουλέψουμε κατευθείαν στον web server ή θα δουλέψουμε τοπικά. Επιλέγουμε να δουλέψουμε τοπικά.

Έπειτα ορίζουμε τον φάκελο στον σκληρό μας όπου θα βρίσκεται ο βασικός φάκελος εργασίας μας.

21

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

τέλος μας ρωτά αν θα συνδεθούμε με τον server.

και ολοκληρώνει την εργασία με μια αναφορά.

22

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

καλό είναι να δημιουργήσουμε υποφακέλους στον φάκελο εργασίας μας για να διατηρούμε χωριστά τις φωτογραφίες, τα βίντεο, τα αρχεία φλας, τους ήχους, κλπ

4.5 Μορφοποίηση κειμένουΗ μορφοποίηση γίνεται από τις ιδιότητες του κειμένου

4.5.1Εισαγωγή και Κεντράρισμα κειμένου

1. Ανοίξτε μια νέα σελίδα και πληκτρολογήστε:

Από την πόλη έρχομαι και στη κορφή κανέλα,

2. Γυρίστε το σε προβολή split.3. Δείτε ότι σε κάθε enter που πατήσατε η γραμμή μπήκε ανάμεσα από τις ετικέτες

<p>…</p>4. και ανάμεσα στις γραμμές αφήνεται μια κενή γραμμή.5. Συνεχίστε γράφοντας το πιο κάτω δίστιχο, αλλάζοντας όμως γραμμή πατώντας

shift+enter.

άνοιξα την ομπρέλα μου να μην βραχεί η κοπέλα

23

κλασσικά εργαλεία μορφοποίησης

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

6. παρατηρείστε ότι τώρα ότι στην αλλαγή της γραμμής μπαίνει η ετικέτα <br> και δεν αφήνονται κενές γραμμές.

7. Το κείμενο που περιέχεται ανάμεσα από <p>…</p> αποτελεί μια παράγραφο. Οι αλλαγές γραμμών μέσα στη παράγραφο γίνονται με την ετικέτα <br>

4.5.2Επικεφαλίδες

Η επιλογή none αφαιρεί κάθε στυλ μορφοποίηση που έχει εφαρμοστή στην επιλογήHeading 1… Ορίζει επικεφαλίδες (μεγαλύτερη η 1 και 2,3,..μικραίνουν.)

1. Γράψτε πριν από το ποίημα:Το ποίημα

2. και σημειώστε το σαν επικεφαλίδα 1 (Heading 1)3. Κατόπιν αλλάξτε την σε επικεφαλίδα 3 (Heading 3)4. Τους δύο πρώτους στίχους κάντε λίστα με κουκίδες5. Δοκιμάστε να κάντε λίστα και τους άλλους δύο τι παρατηρείτε;

……………………………………………………………………………6. Κάντε τους δύο πρώτους στίχους λίστα με αριθμούς.

4.5.3Γραμματοσειρές

Οι γραμματοσειρές ορίζονται σε ομάδες. αυτό γίνεται γιατί υπάρχει πιθανότητα ό χρήστης της σελίδας που την βλέπει να μην έχει την γραμματοσειρά που έχουμε επιλέξει, τότε την βλέπει από τις εναλλακτικές που έχουμε στην ομάδα.Από την επιλογή Edit Font List δημιουργείτε δικές σας ομάδες.

1. Επιλέξτε μέρος του κειμένου που γράψατε και αλλάξτε font (βάλτε comic san serif)

24

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

4.5.4Μέγεθος γραμματοσειράς

Επιλέγετε το μέγεθος σε pixels η σε σχετικά μεγέθη όπως xx-small,x-small, small,medium…Τα σχετικά μεγέθη επιτρέπουν στο κείμενο να εμφανίζεται σχετικά με τα μεγέθη που έχει ορίσει ο χρήστης στον Browser.Δίπλα βρίσκεται και η επιλογή χρώματος.Επιλέξτε μια λέξη από το κείμενο που γράψατε και Δοκιμάστε διάφορα μεγέθη.Κάντε προεπισκόπηση της σελίδας από την επιλογή

4.6 Προσθήκη Ενός υπερδεσμού μέσα στην ιστοθέση σαςΈνας υπερδεσμός επιτρέπει στον χρήστη της ιστοσελίδας να μεταβεί σε άλλη ιστοσελίδα ή σε άλλη θέση της ίδιας ιστοσελίδας, να ξεκινήσει μια εφαρμογή (πχ να παίξει έναν ήχο) ή να ξεκινήσει την εφαρμογή του ηλεκτρονικού ταχυδρομείου.

4.6.1Υπερδεσμό προς άλλο server

1. Ανοίξτε την ιστοσελίδα grafistes1.htm.2. Στη πρώτη γραμμή συμπληρώστε [από ΟΕΕΚ]3. Eπιλέξτε τη λέξη ΟΕΕΚ και συμπληρώστε στο πλαίσιο Link την διεύθυνση του ΟΕΕΚ.

http :// www . oeek . gr .Προσοχή επειδή αναφερόμαστε σε ιστοσελίδα που είναι σε άλλο web server πρέπει οπωσδήποτε να βάλετε και το http:// στη διεύθυνση.

25

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Κάντε προεπισκόπιση της ιστοσελίδας και δοκιμάστε τον υπερδεσμόπαρατηρήστε ότι οκώδικας που γράφτηκε για τον υπερδεσμό είναι<a herf=http://www.oeek.gr>OEEK</a>Ο υπερδεσμός στην html γλώσσα γίνεται με την ετικέτα: <α herf=διεύθυνση..>φράση υπερδεσμός</a>

4.6.2Υπερδεσμό προς άλλη σελίδα μας

1. Ανοίξτε και τη σελίδα grafistes2.htm2. Συμπληρώστε στο τέλος της σελίδας grafistes1.htm την λέξη next3. μαυρίστε την λέξη next και συμπληρώστε στο πλαίσιο Link grafistes2.htm4. αποθηκεύσετε την ιστοσελίδα και δοκιμάστε τον υπερδεσμό.

26

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Επειδή τα αρχεία grafistes1.htm και grafistes2.htm είναι στον ίδιο φάκελο δεν χρειάζεται να γράψουμε τη διαδρομή. Αλλιώς έπρεπε να γράψουμε πριν από το όνομα του αρχείου της σελίδας και την διαδρομή του. Τη διαδρομή την σημειώνουμε είτε απόλυτα (δηλαδή την πλήρη διαδρομή του αρχείου) ελιτε σχετικά (δηλαδή ως προς τον φάκελο που ορίσαμε σαν ρίζα για την εργασία μας στον dreamweaver). Αν θέλουμε να ορίσουμε την σχετική διαδρομή ενός αρχείου που βρίσκεται σε ένα υποφάκελο του ριζικού φακέλου εργασίας γράφουμε:ονομα φακέλου/ονομα αρχείου (πχ product/products.htm)Αν θέλαμε να κάνουμε υπερδεσμό με αρχείο πουβρίσκεται ένα επίπεδο πιο πάνω από το ριζικό εργασίας γραφουμε:../όνομα αρχείου (πχ ../products)

4.6.3Άγκυρες

Αν θέλουμε να δημιουργήσουμε υπερδεσμούς προς άλλα σημεία της ιστοσελίδας μας πρώτα σημειώνουμε τ σημεία προορισμού που ονομάζονται Άγκυρες και μετά μετατρέπουμε τις φράσεις σε υπερδεσμούς.Οι άγκυρες σημειώνονται στην html με την ετικέτα:<a name="όνομα άγκυρας"></a>πχ <a name="drasthriotites"></a>και ορίζουμε τον υπερδεσμό με την ετικέτα

27

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

<a href="#ονομα υπερδεσμού">κείμενο υπερδεσμού</a>πχ. <a href="#kathikonta">Επαγγελματικά Καθήκοντα</a>

1. Ανοίξτε την ιστοσελίδα grafistes1.htm2. Δημιουργείστε άγκυρες στα σημεία Β.1.1, Β.1.2, Β.1.3 ως εξής:3. πηγαίνουμε τον δρομέα στο σημείο και από το μενού επιλέγουμε insert>named

anchor

κατόπιν αφού μαυρίσουμε την φράση που θα κάνουμε υπερδεσμό, επιλέγουμε insert>hyperlinkκαι στο παράθυρο διαλόγου που θα εμφανιστεί σημειώνουμε την επιθυμητή άγκυρα.Αποθηκεύσετε την ιστοσελίδα και κάντε προεπισκόπηση.

Υποσημείωση:Όταν οριστεί ένας υπερδεσμός διαφοροποιούνται οι χαρακτήρες. Η μορφή που θα πάρουνε μπορεί να ρυθμιστεί από τις γενικές ρυθμίσεις της σελίδας όπως επίσης και

28

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

την μορφή που θα έχουν και όταν κάποιος κάνει χρήση του υπερδεσμού. Τα χαρακτηριστικά του υπερδεσμού μπορεί να φυλαχθεί και σε ένα αρχείο css.

4.7 Δημιουργία πίνακα

4.7.1Ετικέτα δημιουργίας πίνακα.

Ο απλούστερος πίνακας (χωρις πλαίσιο, με κελιά προκαθορισμένων διαστάσεων) δημιουργείται από τις πιο κάτω εντολές-ετικέτες σε html.<table><tr>

<td> πρώτο κελί πρώτης γραμμής</td><td> πρώτο κελί πρώτης γραμμής</td><td> πρώτο κελί πρώτης γραμμής</td>

</tr><tr>

<td> πρώτο κελί δεύτερης γραμμής</td><td> δεύτερο κελί δεύτερης γραμμής</td><td> τρίτο κελί δεύτερης γραμμής</td>

</tr><tr>

<td> πρώτο κελί τρίτης γραμμής</td><td> δεύτερο πρώτο κελί τρίτης γραμμής</td><td> τρίτο κελί τρίτης γραμμής</td>

</tr></table>

4.7.2Δημιουργία πίνακα με το Dreamweaver

Με τη βοήθεια του Dreamweaver μπορούμε πολύ εύκολα να δημιουργήσουμε πίνακες, να τους τροποποιήσουμε, να βάλουμε ή να αφαιρέσουμε στήλες και γραμμές, να συγχωνεύσουμε κελιά ή να τα διαχωρίσουμε κλπ.Μπορείτε να παρεμβάλετε έναν πίνακα οπουδήποτε σε μια σελίδα, που περιλαμβάνει μέσα σε έναν άλλο πίνακα. Μπορείτε γρήγορα να παρεμβάλετε έναν τυποποιημένο πίνακα με τρεις σειρές και τρεις στήλες, ή μπορείτε να τροποποιήσετε τις επιλογές να παρεμβάλετε έναν πίνακα τις δικες σας επιλογές.

Για να παρεμβάλει έναν πίνακα: 1. Ανοίξτε μια νέα ιστοσελίδα στο Dreamweaver. 2. Τοποθετήστε το σημείο εισαγωγής στο έγγραφό σας όπου εσείς θελήσετε να εμφανιστεί

ο πίνακας. 3. Επιλέξτε την κατηγορία Layout στην Insert bar.4. Σιγουρευτείτε ότι είναι επιλεγμένο το κουμπί Standard

29

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

5. Κάντε κλικ το κουμπί Table στο Insert bar.

Τότε ανοίγει κουτί διαλόγου Table 6. Εισάγετε τον αριθμό σειρών και στηλών.

Για να θέσετε μια σειρά ή μια στήλη επιγραφών (header): 7. Επιλέξτε μιας από τις επιλογές του Header section.

Παραδείγματος χάριν, εάν δημιουργείτε έναν πίνακα που απαριθμεί μια συλλογή από τα βιβλία, με τις στήλες συντάκτης, τίτλος, και έτος, πρέπει να θέσετε την κορυφαία σειρά ως α header.

Εξ ορισμού, οι σειρές ή οι στήλες επιγραφών (Header) είναι με γράμματα έντονα (bold) και κεντραρισμένη ευθυγράμμιση.

8. Click OK.Ο πίνακας εμφανίζεται στο έγγραφό σας.

Επιλογή των στοιχείων του πίνακαΜπορείτε να επιλέξετε με το ποντίκι έναν ολόκληρο πίνακα, μια σειρά, ή μια στήλη, ή μπορείτε να επιλέξετε έναν μπλοκ κελιών μέσα σε έναν πίνακα. Κατόπιν μπορείτε τροποποιήσετε την εμφάνιση των επιλεγμένων στοιχείων και του περιεχομένου των.

Για να επιλέξει έναν ολόκληρο πίνακα: Κάνετε κάτι από τα παρακάτω:

Κλικ στην πάνω αριστερή γωνία του πίνακα ή κλικ οπουδήποτε στην κατώτατη άκρη. Κλικ μέσα σε ένα κελί, και έπειτα επιλέξτε Modify > Table > Select Table. Κλικ μέσα σε ένα κελί, και από τη γραμμή κατάστασης επιλέξτε <table>

Για να επιλέξετε σειρές ή στήλες: 1. Τοποθετήστε το δείκτη στην αριστερή άκρη μιας σειράς ή στην κορυφαία άκρη μιας στήλης.2. Όταν ο δείκτης αλλάζει σε ένα βέλος επιλογής, κάντε κλικ και επιλέξτε τη σειρά ή τη στήλη, ή σύρετε τον δείκτη για να επιλέξετε πολλαπλάσιες σειρές ή στήλες (Figure 5).

30

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Για να επιλέξει ένα μονό κελί: Κάνετε κάτι από τα παρακάτω:

κλικ στο κελί. Και κατόπιν σύρτε το δείκτη για να επιλέξετε το κελι. κλικ στο κελί. Κατόπιν επιλέξτε Edit > Select All.

Προσθήκη σειρών και στηλών Μπορείτε να προσθέσετε μια σειρά ή μια στήλη, ή μπορείτε να προσθέσετε περισσότερες σειρές ή στήλες ταυτόχρονα.Για να προσθέσει μια σειρά: 1. Τοποθετήστε το σημείο εισαγωγής σε ένα κελί, ή επιλέξτε ολόκληρη τη σειρά.2. Κάνετε κάτι από τα πιο κάτω:

κλικ στο κουμπί Insert Row Above (εισαγωγή μιας σειράς από επάνω) ή στο κουμπί Insert Row Below (εισαγωγή σειράς από κάτω)

επιλέξτε Insert > Table Objects > Insert Row Aboveή Insert > Table Objects > Insert Row Below.

Τότε μια νέα σειρά εμφανίζεται επάνω από ή κάτω από το σημείο εισαγωγής ή από την επιλεγμένη σειρά.

Διαγραφή σειρών και στηλώνΜπορείτε να διαγράψετε μια σειρά ή μια στήλη, ή μπορείτε να διαγράψετε πολλαπλές σειρές ή στήλες συγχρόνως. Για να διαγράψει τις σειρές ή τις στήλες από έναν πίνακα: 1. Επιλέξτε μια ή περισσότερες σειρές ή στήλες. 2. Πατήστε Delete or Backspace.

Για να αφαιρέσει τα περιεχόμενα ενός κελιού , αλλά να το αφήστε να υπάρχει άδειο: 1. Επιλέξτε ενός ή περισσότερα κελιά. 2. Επιλέξτε Edit > Clear ή πατήστε Delete. Προσοχή: Εάν επιλέγετε μια ολόκληρη σειρά ή μια στήλη, και έπειτα επιλέγετε Edit > Clear ή πατήστε Delete, το Dreamweaver αφαιρεί ολόκληρη την σειρά ή τη στήλη από τον πίνακα.

Τροποποιώντας το μέγεθος ενός πίνακα, ή των σειρών και των στηλών τουΓια να αυξομειώστε ένα πίνακα: Επιλέξτε τον πίνακα και κάνετε κάτι από τα πιο κάτω.

31

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

• Για να τον αυξομειώστε οριζόντια , «πιάστε και σύρετε» το χερούλι που εμφανίζεται στο δεξι άκρο του πίνακα. Για να τον αυξομειώστε κατακόρυφα , «πιάστε και σύρετε» το χερούλι που εμφανίζεται στο κάτω άκρο του πίνακα.Για να τον αυξομειώστε και προς τις δύο κατευθύνσεις (οριζόντια και κατακόρυφα), «πιάστε και σύρετε» το χερούλι που εμφανίζεται στη δεξιά κάτω γωνία του περιγράμματος του πίνακα.

Για να αυξομειώστε το πλάτος μιας στήλης: Επιλέξτε τη στήλη και κάνετε ένα από τα πιο κάτω: επιλέξτε και σύρετε το περίγραμμα μιας στήλης στο πάνελ Property inspector (πάνελ ιδιοτήτων)(Figure 7), αλλάξτε την τιμή στο text box

(παράθυρο κειμένου) W (Width) πλάτους στηλών.

Για να αυξομειώστε το ύψος μιας σειράς: Επιλέξτε τη σειρά και κάνετε ένα από τα πιο κάτω

επιλέξτε και σύρετε το κάτω περίγραμμα μιας σειράς. στο πάνελ Property inspector (πάνελ ιδιοτήτων)(Figure 7), αλλάξτε την τιμή στο text box

(παράθυρο κειμένου) Η (Height) ύψους στηλών. Για να συμπτύξουμε δύο η περισσότερα γειτονικά κελιά σε ένα :Επιλέγουμε τα κελιά και πατάμε το εργαλείο Merges selected cells στο πάνελ των ιδιοτήτων

Για να διασπάσουμε ένα κελί σε δύο Επιλέγουμε το κελί και πατάμε το εργαλείο split cell στο πάνελ ιδιοτήτων

Και στο παράθυρο διαλόγου που θα εμφανιστεί ορίζω τον αριθμό των στηλών ή των σειρών που θέλω να διασπαστεί το κελί.

32

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Τροποποίηση των ιδιοτήτων ενός πίνακα

Τα χαρακτηριστικά (ιδιότητες) φαίνονται στο πάνελ ιδιοτήτων από όπου μπορούμε και να τις αλλάξουμε. Οι ιδιότητες αυτές είναι:Ο αριθμός των στηλών και σειρώνΤο πλάτος και το ύψος του πίνακα

Μπορεί να ορίζεται σε Pixel η %. Αν τα ορίσουμε σε pixel τότε το μέγεθος τους θα είναι σταθερό. Αν το ορίσουμε σε % θα μεταβάλεται ανάλογα με την ανάλυση της οθόνης που χρησιμοποιεί ο χρήστης. Πχ 100% θα καταλαμβάνει όλη την επιφάνεια της οθόνης ενώ 50% μόνο την μισή.

Cellspace: ορίζει το κενό ανάμεσα από τα κελιά Cellpad: ορίζει τα περιθώρια που θα έχει το κείμενο που θα γράψουμε στο κελί από το περίγραμμά του.bgColor: το χρώμα του BackgroundbgImage: την εικόνα που πιθανόν να χρησιμοποιήσουμε σαν φόντοbgdr color: το χρώμα του περιγράμματοςAlign η ευθυγράμμιση (στοίχιση) του πίνακα στη σελίδαBorder το πάχος του περιγράμματοςΔοκιμάστε όλα τα χαρακτηριστικά για να τα κατανοήσετε.Μια τεχνική με την οποία δημιουργούμε μια οργανωμένη βάση πάνω στην οποία θα τοποθετήσουμε τα στοιχεία μιας σελίδας (κείμενα, φωτογραφίες, γραφικά και πολυμεσικά στοιχεία) είναι με την δημιουργία ενός πίνακα. Τα κελιά του πίνακα καθορίζουν και τη δομή της σελίδας.Πχ μια πιθανή δομή μιας σελίδας είναι η πιο κάτω:Τίτλος ιστοσελίδα

Μπάρα με μενού επιλογών

33

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Κατακόρυφη μπάρα πλοήγησης

περιεχόμενο σημειώσεις

Στοιχεία για τη ταυτότητα της σελίδας

Άλλη τεχνική είναι με τη χρήση των επιπέδων και των αρχείων CSS που θα δούμε πιο κάτω.

4.8 Εμφάνιση εικόνων

4.8.1Ετικέτα εισαγωγής εικόνας

Για την παρουσία μιας εικόνας σε μια ιστοσελίδα χρησιμοποιείται η ετικέτα:<img src=”διαδρομή εικόνας”>Δηλαδή οι εικόνες δεν είναι μέρος της ιστοσελίδας αλλά παραμένουν ξεχωριστά αρχεία που εισάγονται από τον browser όταν προβάλλεται η ιστοσελίδα.Για να μην έχουμε προβλήματα με την θέση του αρχείου της εικόνας όταν μεταφέρουμε την ιστοσελίδα μας στον web server, δεν πρέπει να έχουμε τις εικόνες μας σε άσχετους φακέλους από τον φάκελο εργασίας μας. Καλό είναι να δημιουργούμε έναν υποφάκελο με όνομα “images” στον ριζικό φάκελο εργασίας μας. Στον υποφάκελο αυτόν να διατηρούμε όλες τις φωτογραφίες μας.Η πλήρης μορφή της ετικέτας εμφάνισης μια εικόνας στη ιστοσελίδα είναι:<img src="images/aristi.gif" alt="aristi" width="116" height="225" border="0" align="middle" >οι παράμετροι :alt: καθορίζει ένα εναλλακτικό κείμενο που θα εμφανίζεται στη θέση της εικόνας αν δεν «κατέβει» η εικόναwidth, Height: καθορίζουν το πλάτος και ύψος της εικόνας σε pixelsalign: την θέση της εικόνας σε σχέση με το κείμενο που είναι γραμμένο στην ίδια παράγραφο με την εικόνα.

4.8.2Εισαγωγή εικόνας με το Dreamweaver

1. Δημιουργήστε ένα υποφάκελο με όνομα images στον ριζικό φάκελο εργασίας.2. Εισάγετε μια φωτογραφία.3. Ανοίξτε μια καινούργια ιστοσελίδα 4. για να εισάγεται μια φωτογραφία επιλέξτε από το μενού insert>image5. Επιλέξτε τη φωτογραφία aristi.gif και πατήστε enter6. Γράψτε στην ίδια παράγραφο «Το ξενοδοχείο Mountain resort Aristi

βρίσκεται<br>στο πιο όμορφο σημείο των Ζαγοροχωρίων»

34

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

7. Ρυθμίστε τις ιδιότητες της εικόνας ώστε:a. να εμφανίζει το εναλλακτικό κείμενο “logo του ξενοδοχείου Aristi”b. να στοιχίζετε το κείμενο στη βάση της εικόνας

8. Παρατηρήστε τον κώδικα που έχει γραφεί.9. Στη γραμμή κατάστασης φαίνεται ο πιθανότερος χρόνος που θα κάνει η σελίδα

μας να κατέβει.Ο πιθανός χρόνος που θα κάνει η εικόνα να κατέβει στον υπολογιστή μας εξαρτάται από το είδος σύνδεσης που έχουμε με το ιντερνετ (PSTN 56Κbps, ISDN 64-128Κbps, ADSL >1Μbps κλπ). Μπορούμε στο dreamweaver να ρυθμίσουμε την σύνδεση για την οποία να υπολογίζεται ο χρόνος «κατεβάσματος». Επιλέγουμε από το μενού Edit>preference>Status bar και ρυθμίζουμε την ταχύτητα σύνδεσης.

4.8.3Είδη εικόνων: GIF, JPEG, PNG

Επειδή τα αρχεία εικόνων είναι συνήθως μεγάλα, βάζουμε στην ιστοσελίδα μας εικόνες συμπιεσμένες με απωλεστικούς αλγορίθμους όπως gif, jpeg και png. Όσο πιο μικρό αρχείο είναι τόσο πιο γρήγορα θα εμφανιστεί. Για τον λόγο αυτόν προσπαθούμε τα pixel της εικόνας να αντιστοιχούν ακριβώς στα pixel της οθόνης.gif Αυτή η μορφή είναι καλύτερη για εικόνες που έχουν μπλοκ συνεχούς χρώματος, συνήθως σχέδια.jpeg Αυτή η μορφή είναι καλύτερη για φωτογραφικές εικόνες και για εικόνες που δεν έχουν μπλοκ συνεχούς χρώματος.png Αυτή είναι μια μορφή που αντικαθιστά τα gif. Υποστηρίζει την διαφάνεια και δημιουργούνται από το Fireworks που συνεργάζεται άψογα με τον dreamweaver.

4.9 Προετοιμασία των εικόνωνΚάθε εικόνα που θα βάλουμε στην ιστοσελίδα μας πρέπει να την προεπεργαστούμε με ένα πρόγραμμα επεξεργασίας ώστε να είναι «ελαφρια» και «καθαρή» δηλαδή το αρχείο της να είναι όσο το δυνατόν μικρότερου μεγέθους και να φαίνεται με όσο το δυνατόν καλύτερη πιστότητα στα χρώματά της. Για να γίνει αυτό υπάρχουν έτοιμα εργαλεία σε πολλά προγράμματα επεξεργασίας εικόνας όπως το photoshop. Το πλήρες στούντιο που μας δύνεται από την macromedia μαζί με το dreamweaver περιέχει έναν εξειδικευμένο επεξεργαστή εικόνας το fireworks που έχει όλα τα απαραίτητα εργαλεία για την προετοιμασία των εικόνων για την εισαγωγή τους σε ιστοσελίδα και επιπλέον συνεργάζεται αρμονικότατα με το dreamweaver.

4.9.1βελτιστοποίηση εικόνων με το fireworks

1. Τρέξτε το fireworks.2. Ανοίξτε την εικόνα νούφαρα.jpg από τον φάκελο my picturesΑπό τα rulers βλέπουμε ότι το μέγεθος της εικόνας σε pixels είναι περίπου 800Χ6003. Επιλέξτε Modify<canvas<image size.

35

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

4. Επειδή η ανάλυση της οθόνης είναι 72pixels/inch μετατρέπουμε την ανάλυση της εικόνας σε 72pixels/inch για να την δούμε όπως ακριβώς θα φαίνεται στην οθόνη

Αυτή είναι και η ρύθμιση που θα κάνουμε πρώτα σε οποιαδήποτε εικόνα θα περνούμε στη ιστοσελίδα μας. 5. Για να δούμε την βέλτιστη διαμόρφωση της εικόνας και τον τύπο που θα

προτιμήσουμε θα χρησιμοποιήσουμε έναν «μάγο» του fireworks6. επιλέξτε από το μενού files>export wizards

7. Πατήστε continue

8. Επιλέξτε The web

36

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Πειραματιζόμαστε ώστε να επιτύχουμε μικρότερο αρχείο με την βέλτιστη ποιότητα.

4.9.2Δημιουργία εικόνας με το fireworks

Έστω ότι θέλουμε να κατασκευάσουμε ένα κουμπί μεγέθους 70Χ26pixels.Επιλέγουμε new

ορίζουμε πλάτος 70, υψος 26 και ανάλυση 72επιλέξτε χρώμα φόντου πράσινο σκούροαπό το zoom μεγαλώστε την εικόνα.

37

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

5 Στυλ και CSS αρχεία

5.1 Δημιουργία style Πριν προχωρήσετε στην δημιουργία μια ιστοσελίδας καλό είναι να βρείτε το στυλ που εσείς προτιμάτε. Δηλαδή να ορίσετε το φόντο την γραμματοσειρά και τα χρώματα που θα έχει το κείμενό σας, οι επικεφαλίδες, κλπ. Για τον καθορισμό του στυλ και για την τροποποίηση του έχει δημιουργηθεί μια ολόκληρη γλώσσα ειδικών εντολών που ονομάζεται css. O Dreamweaver σας δίνει την δυνατότητα να διαμορφώστε το στυλ που επιθυμείται και να γράψει αυτός αντί για εσάς τις αντίστοιχες εντολές css που χρειάζονται. Οι εντολές γράφονται στη περιοχή head μιας ιστοσελίδας.Δεν χρειάζεται να ανησυχείτε αν δεν μπορείτε να διαλέξετε, μπορείτε να κάνετε διάφορα εναλλακτικά και να τα εφαρμόσετε στην ιστοσελίδα σας με ένα κλικ.

1. Ανοίξτε μια νέα ιστοσελίδα.2. επιλέξτε setup page properties

3. και καθορίστε την μορφή που θα έχουν οι κατηγορίες Appearance:

38

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Headings

4. Πατάμε enter και βλέπουμε να εμφανίζονται τα στυλ που φτιάξαμε στο design > CSS Styles

39

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

5. Γράφουμε τα πιο κάτω κείμενα

Επικεφαλίδα 1Επικεφαλίδα 2 Επικεφαλίδα 3βασικό κείμενο

6. και από τις ιδιότητες κειμένου ορίζουμε στις σειρές του κειμένου τους αντίστοιχους τύπους

h1,h2,h3,paragraph

7. Ανοίξτε στη προβολή code και θα δείτε ότι στο χώρο head της σελίδα σας έχουν

γραφτεί:

40

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Παρατηρούμε ότι στο χώρο της επικεφαλίδας (head) μπορούμε να γράψουμε πληροφορίες που περιγράφουν ειδικά χαρακτηριστική της μορφής και της δομής της ιστοσελίδας μας. Η περιγραφή γίνεται μέσα σε μια ειδική ετικέτα <style ..> και με μια ειδική γλώσσα που ονομάζεται γλώσσα CSS.

41

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

5.1.1Δημιουργία ανεξάρτητου αρχείου Στυλ (αρχείου.css).

1. Από την παλέτα css επιλέξτε όλα τα στυλ που έχετε δημιουργήσει (κέντε κλίκ στο h1 και έχοντας πατημένο το ctrl κάντε κλικ και σε όλα τα άλλα.)

2. Κατόπιν κάντε δεξί κλι και επιλέξτε Move CSS Rules..

3. Θα εμφανιστεί το πλαίσιο:

Στο οποίο θα επιλέξτε A new Style Sheet (δηλαδή να μεταφερθούν οι κανόνες ορισμού στυλ σε ένα νέο αρχείο)και πατείστε enter.

4. Στο νέο παράθυρο διαλόγου

42

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

5. Που σας ζητά το όνομα του αρχείου στο οποίο θα μπεί το στυλ σας και τη θέση στην οποία θα αποθηκευτεί γράψτε mystyle δημιουργείστε ένα φάκελο css αποθηκεύστε το μέσα του.

6. Βρείτε τις αλλαγές που έγιναν στα πανελ του dreamweaver.1η

……………………………………………………………………………………………………………………………..2η

…………………………………………………………………………………………………………………………….3η

…………………………………………………………………………………………………………………………….

43

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Συμπεραίνουμε ότι οι κανόνες του στυλ μεταφέρθηκαν σε ένα αρχείο με το όνομα που δώσαμε (mystyle.css) .Οι κανόνες στην επικεφαλίδα(head) αντικαταστάθηκαν από μια ετικέτα με όνομα <link …..> που συνδέει την ιστοσελίδα μας με το αρχείο css.

7. Κλείστε την ιστοσελίδα και ανοίξτε μια νέα.8. Γράψτε

Τίτλος 1

9. και δώστε του ίδιους τύπους που δώσατε προηγουμένως

44

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Τίτλος 2Τίτλος 3Τίτλος 4

Heading 1Heading 2Heading 3Heading 4

10.Κάντε κλικ στο εικονίδιο ή κάντε δεξί κλικ στο <no styles> και επιλέξτε attache external Style Sheet

11.Βρείτε το αρχείο mystyle.css και τραβήξτε το ή συνδέστε το.

12.Τότε θα δείτε τη σελίδα σας να μεταμορφώνετε στη μορφή που είχατε ορίσει προηγουμένως.

Συνεπώς με τα αρχεία css και τη “γλώσσα” css μπορούμε να δημιουργήσουμε κανόνες

μορφοποίησης και δομής ιστοσελίδων που να χρησιμοποιούνται από όποια καινούργια σελίδα φτιάξουμε.Σήμερα η τεχνική αυτή χρησιμοποιείται ευρύτατα από τους κατασκευαστές σελίδων.

45

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

6 Τα επίπεδα «Div» Με τα επίπεδα μπορούμε να καθορίσουμε τη δομή μια ιστοσελίδας. Είναι ο δεύτερος εναλλακτικός τρόπος οργάνωσης και κατασκευής μιας σελίδας (ο πρώτος ήταν με πίνακα). Ο δεύτερος τρόπος χρησιμοποιείται πιο πολύ σήμερα και δημιουργεί πιο ελαφριές σελίδες.

6.1 Δημιουργία επίπεδου (ap div).

1. Δημιουργήστε μια νέα σελίδα

2. Σιγουρευτείτε ότι το Files panel είναι ορατό(εικόνα 6.1). Αν δεν είναι επιλέξτε από το μενού Window > Files.

3. Επιλέξτε File > New.Το πλαίσιο διαλόγου Νew document ανοίγει (εικόνα 6.2).

4. Από τη κατηγορία Blank Page επιλέξτε Page Type, HTML και πιέστε create.

5. Αποθηκεύστε τη σελίδα σαν index.html

6. Δείτε την στο Files panel7. Από την Insert bar επιλέξτε το κουμπί Draw AP Div Ο δείκτης του ποντικιού αλλάζει σε έναν σταυρό όταν τον κινείτε στη περιοχή σχεδίασης. 8. σχεδιάστε ένα παραλληλόγραμμο για τον τίτλο της

ιστοσελίδας.9. Από τις ιδιότητες δώστε χρώμα στο φόντο του σκούρο πράσινο.10.Συμπληρώστε στις ιδιότητας στο κουτί κειμένου CCS-P Element για όνομα του

επιπέδου την λέξη «Header”.

46

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

11.Σχεδιάστε άλλα δύο επίπεδα όπως φαίνονται στην εικόνα.12.Ονομάστε τα navigation και content.13.Ανοίξτε το CSS panel και στο tab AP Elements δείτε τη λίστα με τα div που

κατασκευάσατε.

14. Αποθηκεύσετε τη σελίδαΣημειώστε περιγραφικά τι αλλαγές έγιναν στα head και στο body τμήμα της ιστοσελίδα σας.

6.2 Τροποποίηση επιπέδων.Για να επιλέξτε ένα div επιλέξτε το περίγραμμα του ή από το πάνελ AP elements επιλέξτε το επίπεδο που θέλετε1.Αυξομειώστε το μέγεθός τους από τις «λαβές» του περιγράμματος ή από τις ιδιότητες W και H. Η δε θέση του από τις ιδιότητες Τ (Top) που σημαίνει πόσα Pixel απέχει από την πάνω γραμμή του div και L (Left) που σημαίνει πόσα pixel απέχει από την αριστερή πλευρά της επιφάνειας εργασίας.2.Ξεκλικάρετε την επιλογή Privent Overlap και τοποθετήστε τα επίπεδα το ένα πάνω στο άλλο.3.Αλλάξτε τον αριθμό Ζ-index και προσπαθήστε να καταλάβετε πως λειτουργεί.4.Κλικάρετε την επιλογή Privent Overlap και προσπαθήστε να επαναλάβετε τα πιο πάνω. Τι παρατηρείτε?5.Τέλος καθορίστε για τα div τις πιο κάτω ιδιότητες:Header :W=600, H=100, T=1 και L=1

47

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Content :W=500, H=400, T=101 και L=1 Navigation: W=100, H=400, T=101 Και L=501

6.3 Μεταφορά των χαρακτηριστικών των div σε αρχεία cssΌπως κάναμε στη μεταφορά των στυλ μπορούμε να το κάνουμε και με τα div.Στο πάνελ css βλέπουμε ότι υπάρχουν και τα στυλ των div που κατασκευάσαμε. Επιλέγοντάς τα όλα (ctrl+κλικ) και επιλέγοντας με δεξί κλικ move CSS rules τα μεταφέρουμε στο αρχείο mystyle.css που ήδη κατασκευάσαμε για τα styl.Παρατηρήστε και σημειώστε τι συνέβη στο κώδικα στη περιοχή head και στη περιοχή body

6.4 Εισαγωγή περιεχομένου στα επίπεδα.1.Δημιουργείστε μια εικόνα με διαστάσεις μικρότερες από το επίπεδο header και βάλτε την στο επίπεδο.2.Προσθέστε κείμενο στα επίπεδα3.Κάντε προεπισκόπηση για να δείτε το αποτέλεσμα.

6.5 Δημιουργία άλλων σελίδων με το ίδιο στυλ1. Δημιουργείστε μια νέα σελίδα με όνομα same_style.html

2. Στό πάνελ css πατήστε το εικονίδιο και επιλέξτε

Από πού παίρνει το στυλ πλέον η ιστοσελίδα μας;………………………………………………………………..3. Κάντε κλικ στο κουμπί

Με το κουμπί αυτό μπορώ να εισάγω div που τα έχω στο css. 4. Έτσι στο πλαίσιο διαλόγου που θα εμφανιστεί συμπληρώνω το id του div που θέλω

48

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Και στη σελίδα μου θα εμφανιστεί το div Header5. Κάνω το ίδιο και με τα υπόλοιπα div.Με ποια άλλη σελίδα μοιάζει η σελίδα που μόλις έφτιαξα;____________________________________________________

ΑσκησηΔημιουργήστε τρεις ιστοσελίδες που θα έχει την πιο κάτω δόμή:

Σε κάθε div να βάλετε εικόνες και να γράψτε κάποιο κείμενο1. αποθηκεύστε την σελίδα με όνομα grafistes2.htm

Contend600px Nav

W=100pxBgcolor=Μπλέ

49

Header W=798px Bgcolor=Κοκκινο

H=150px

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

7 Δυναμικές ιστοσελίδεςΟι πρώτες ιστοσελίδες περιείχαν κείμενα, γραφικά και εικόνες. Σήμερα οι ιστοσελίδες είναι εμπλουτισμένες με κινούμενα γραφικά και είναι αλληλεπιδραστικές. Δηλαδή έχουν την δυνατότητα οι χρήστες να συμπληρώσουν κάποιο ερώτημα και να πάρουν απάντηση, να κάνουν κλικ σε κάποιο κουμπί και κάτι να συμβεί στη σελίδα ή να επιλέξουν κάποιο αντικείμενο που βρίσκεται στη σελίδα που βλέπουν και να τους έρθουν πληροφορίες για αυτό. Η ακόμα να προβούν σε αγορά κάποιου προϊόντος μέσα από μια ιστοσελίδα με τη βοήθεια της πιστωτικής τους κάρτας.Οι δυναμικές ιστοσελίδες χωρίζονται σε δυναμικές με κινούμενα γραφικά και αλληλεπιδραστικές. Οι ιστοσελίδα με κίνηση περιέχουν κώδικα που καθώς διαβάζεται από τον φυλλομετρητή ταυτόχρονα εκτελείται (τρέχει). Οι αλληλεπιδραστικές ιστοσελίδες χωρίζονται σε δύο μεγάλες κατηγορίες.

1. Τις αλληλεπιδραστικές σελίδες που όλη η διαδραστικότητα μεταξύ του χρήστη και της σελίδας συμβαίνει στη μεριά του «πελάτη». Δηλαδή συμβαίνει από κώδικα (πρόγραμμα) που τρέχει καθώς διαβάζεται από τον φυλλομετρητή. Το πρόγραμμα καταλαβαίνει γεγονότα που δημιουργεί ο χρήστης (πχ κλικ, διπλό κλικ, εισαγωγή κάποιου κειμένου ή πάτημα κάποιου πλήκτρου) και απαντά κατάλληλα.

2. Τις αλληλεπιδραστικές σελίδες που η αλληλεπίδραση γίνεται μεταξύ του χρήστη και τους εξυπηρετητή (Webserver). Δηλαδή υπάρχει κώδικας στην ιστοσελίδα με την βοήθεια του οποίου μεταφέρονται δεδομένα ή γεγονότα στον server. Εκεί υπάρχει άλλο πρόγραμμα που παραλαμβάνει τα δεδομένα και απαντά κατάλληλα, στέλνοντας τις απαντήσεις στη μεριά του χρήστη.

7.1 Αλληλοεπιδραστικές σελίδες από τη μεριά του πελάτηΟι σελίδες αυτές κατασκευάζονται με κώδικα που ενσωματώνεται στο κώδικά html. Είναι κείμενα (σενάρια - script) με εντολές που ακολουθούν κάποια ειδική γλώσσα προγραμματισμού όπως javascript, vbscript, actionscript, java κλπ.Καθώς ο φυλλομετρητής διαβάζει τον html κώδικα της ιστοσελίδας καταλαβαίνει ότι ακολουθεί κώδικας γραμμένο σε μια γλώσσα από την ετικέτα:<script language=javascript>…</script>

Με τη παράμετρο Language ορίζεται η χρησιμοποιούμενη γλώσσα. Αν δεν μπει παράμετρο τότε εξ ορισμού χρησιμοποιείται η javascript.Κάθε σειρά του κώδικα μεταφράζεται από τον διερμηνέα της γλώσσας που είναι ενσωματωμένος στον φυλλομετρητή και έτσι εκτελείται το πρόγραμμα.Όλοι οι φυλλομετρητές έχουν διερμηνείς για την javascript (κατασκευάστηκε από τη Netscape – πρόγονο του firefox). Για την Vbscript που είναι της Microsoft έχει

50

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

διερμηνέα ο Internet Explorer αλλά και οι άλλοι φυλλομετρητές αν δεν έχουν μπορούν να τον κατεβάσουν σαν πρόσθετο.Η java αλλά και η actionscript δεν εκτελούνται ακριβώς έτσι. Ο κώδικας υπάρχει σε ανεξάρτητα αρχεία. Και η παρεμβολή υπάρχει ως Link στο κώδικα html όπως καλούμε μια εικόνα. Η δε εκτέλεση γίνεται με τη βοήθεια ειδικών μεταφραστών.Όλες οι προηγούμενες γλώσσες είναι είτε καθαρές αντικειμενοστραφείς (όπως η java και η actionscript) η χρησιμοποιούν αντικείμενα (όπως η javascript και η VBscript).

7.2 Τι είναι το αντικείμενοΕίναι κώδικας που περιγράφει μια οντότητα (πχ το σώμα μιας ιστοσελίδας. Στη javascript το λέμε document).

7.2.1 Ιδιότητες αντικειμένων

Τα αντικείμενα έχουν ιδιότητες (πχ το σώμα μιας ιστοσελίδας έχει κάποιο χρώμα φόντου). Στη javascript για να δώσουμε μια τιμή στο χρώμα γράφουμε document.bgcolor=”red”. Δίνουμε δηλαδή στην ιδιότητα bgcolor την τιμή red.

Αντικείμενο.ιδιότητα

Δραστηριότητα1. Δημιουργείστε μια ιστοσελίδα με τον Dreamweaver και αποθηκεύσετε την ως

test_js_1.html

2. Γράψτε στην ιστοσελίδα την φράση:

Εδώ θα πειραματιστούμε με τις ιδιότητες του αντικειμένου document

3. Ανοίξτε την προβολή σε code

4. Ενσωματώστε στον κώδικα html το σενάριο:

<script language="javascript"> document.bgColor="black";document.fgColor=”white”;</script>

Τι παρατηρείτε;………………………………………………………………………………………………………………..…………………………………………………………………………………………………………………

5. Μεταφέρετε το σενάριο στο τμήμα head Άλλαξε τιποτα……………………………………………………Άρα που μπορούμε να ενσωματώσουμε το σενάριο;…………………………………………………………………………………………………………………………

6. Αντί να γράψτε “black” γράψτε “#00000000”

51

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Και αντί “white” γράψτε “#FFFFFFFF”Άλλαξε τίποτα;………………Συμπέρασμα:Τα χρώματα μπορούμε να τα εκφράσουμε με 8 αριθμούς 16αδικούς. Το σύμβολο # ενημερώνει ότι ακολουθούν 16δικοί αριθμοί. Τις τιμές των αντίστοιχων αποχρώσεων μπορείτε να τις δείτε και από το παράθυρο αποχρώσεων του dreamweaverΒρείτε τον κωδικό του κόκκινου χρώματος:…………………………………………………..

7.2.2Μέθοδοι

Τα αντικείμενα έχουν και μεθόδους. Μέθοδοι είναι ενσωματωμένα υποπρογράμματα στον κώδικα του αντικειμένου τα οποία μπορούμε να τα χρησιμοποιήσουμε για να κάνουμε κάτι. Πχ στο αντικείμενο document χρησιμοποιούμε την μέθοδο write για να γράψουμε κάτι στο σώμα της ιστοσελίδας. Για να γίνει αυτό γράφουμε document.write(“Γειά σου κόσμε”).

Αντικείμενο.μέθοδο(παράμετροι)

ΔραστηριότηταΔημιουργείστε μια ιστοσελίδα και ενσωματώστε τον πιο κάτω κώδικα:<script language=”javascript”>Document.write( “Hello world”);</script>Τι παρατηρείτε:…………………………………………………………………………………………………………………………………………..…………………………………………………………………………………………………………………………………………..Διορθώσετε τον κώδικα και γράψτε:<script language=”javascript”>Document.write( “<p> η write τυπώνει στην οθόνη <br> κείμενο και κώδικα html</p>”);</script>Συμπέρασμα:Η μέθοδος document.write() στέλνει στον browser κείμενο ή και html κώδικα για τύπωμα στην ιστοσελίδα.

52

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

7.2.3Γεγονότα-συμβάντα

Τέλος τα αντικείμενα μπορούν να καταλάβουν και διάφορα γεγονότα που είτε γίνονται από τον χρήστη (πχ κλικ διπλό κλικ κλπ) ή και από το πρόγραμμα (πχ το κατέβασμα της ιστοσελίδας)Ως συμβάντα αποκαλούνται γεγονότα τα οποία λαμβάνουν χώρα στον browser, όπως για παράδειγμα το πάτημα ενός πλήκτρου του ποντικιού από τον χρήστη, η μετακίνηση του δείκτη του ποντικιού καθώς και το φόρτωμα μιας ιστοσελίδας ή μιας εικόνας από τον server. H Javascript παρέχει την δυνατότητα δημιουργίας σεναρίων-script, τα οποία ανιχνεύουν συμβάντα και αποκρίνονται σε αυτά. Τα script που χρησιμοποιούνται για να ανιχνεύσουν και να αποκριθούν σε συμβάντα ονομάζονται χειριστήρια συμβάντων (event handlers). Τα χειριστήρια συμβάντων ανήκουν στα πιο δυναμικά χαρακτηριστικά της JavaScript που κάνουν τα Web έγγραφα αλληλεπιδραστικά. Επιπλέον, οι χειριστές συμβάντων βρίσκονται μέσα σε ετικέτες HTML. Κάθε συμβάν έχει ένα όνομα και το όνομα ενός χειριστήριου συμβάντος αποτελείται από την

λέξη on και το όνομα του συμβάντος. Για παράδειγμα το συμβάν onMouseClick

λαμβάνει χώρα όταν κάνουμε κλικ πάνω στη περιοχή της ιστοσελίδας που ορίζεται από την ετικέτα στην οποία βάλαμε το χειριστήριο του συμβάντος.ΔραστηριότηταΔημιουργήστε την πιο κάτω ιστοσελίδα:<html"><head><title>Untitled Document</title></head><body><p>Στην ιστοσελίδα αυτή θα δημιουργήσετε μια ιστοσελίδα με απόκριση σε συμβάντα</p><p onclick="document.bgColor='red'">Πατήστε εδώ για να τα δείτε κόκκινα</p><p onclick="document.bgColor='white'">Πατήστε εδώ για να τα ξανακάνετε άσπρα</p><p>&nbsp; </p></body></html>

1. Υπογραμμίστε το χειριστήριο του συμβάντος. 2. Σε ποια περιοχή της ιστοσελίδας λαμβάνει χώρα;

……………………………………………………………………………………………………………………..……………………………………………………………………………………………………………………..

3. Εισάγετε μια μικρή εικόνα στη σελίδα.

53

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

4. Στην ετικέτα της εικόνας γράψτε τον κατάλληλο κώδικα με τον οποίο όταν πατηθεί η εικόνα να γίνεται το φόντο κίτρινο.

7.3 Περισσότερη javascript

7.3.1Έτοιμα αντικείμενα της javascript

Όνομα Αντικειμένου

Περιγραφή

Window To αντικείμενο window παριστά ένα παράθυρο φυλλομετρητή, και αποτελεί το κορυφαίο αντικείμενο στην ιεραρχία αντικειμένων

Document Το αντικείμενο αυτό περιέχει ιδιότητες που σχετίζονται με το τρέχων HTML έγγραφο, όπως ονόματα φορμων, χρώματα εγγράφου κλπ. Ένα document αντιστοιχίζεται σε ένα αντικείμενο window και παριστάνει το <body> </body> τμήμα

της ιστοσελίδαςLocation Αντιστοιχίζεται στην διεύθυνση της τρέχουσας ιστοσελίδας,

που σχετίζεται με το Uniform Resource Locator αυτής.Navigator Περιέχει πληροφορίες για την τρέχουσα εκδοση του

φυλλομετρητήHistory Αποτελεί την λίστα των URL που έχει εξετάσει ο

φυλλομετρητής

7.3.1.1Αντικείμενο Window :

Μερικές από τις ιδιότητες του αντικείμενου Window :Αντικείμενο Window: Iδιότητες (properties)

name Ο τίτλος του τρέχοντος παραθύρου. Ο τίτλος αυτός ορίζεται σαν τo όρισμα windowName της

μεθόδου open() Status Το μήνυμα που εμφανίζεται στην γραμμή

κατάστασης του παραθύρου του φυλλομετρητήΑντικείμενο Window: Μεθοδοι (methods)

alert(): Προκαλεί την εμφάνιση ενός μηνύματος κειμένουconfirm() Εμφανίζει μήνυμα και επιτρέπει yes/no επιλογές και

επιστρέφει μια Boolean τιμή (true/false)open() Ανοίγει ένα καινούριο παράθυρο

7.3.1.2Αντικείμενο Document :

Κάθε αντικείμενο document περιέχεται σε ένα αντικείμενο window-παράθυρο φυλλομετρητή, αντιστοιχίζεται σε ένα πλήρες HTML έγγραφο(πιο συγκεκριμένα στο

54

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

<body></body> τμήμα του), και επιτρέπει τον χειρισμό όλων των HTML αντικειμένων

της ιστοσελίδας.Αντικείμενο Document: Μερικές Iδιότητες (properties)

alinkColor Αντιπροσωπεύει το alink attribute της ετικέτας

<body>bgColor Το χρώμα του φόντου του εγγράφου HTML (δηλ.η

ιδιότητα bgColor της ετικέτας <body>) fgColor Το χρώμα των γραμμάτων της ιστοσελίδαςlastModified Ημερομηνία τελευταίας τροποποίησης του εγγράφουlinkColor Το default χρώμα των υπερσυνδέσμωνLocation Περιέχει το URL της τρέχουσας ιστοσελίδαςReferrer Περιέχει το URL της ιστοσελίδας την οποία έβλεπε ο

χρήστης πρίν την τρέχουσα ιστοσελίδαςTitle Το περιεχόμενο των ετικετών <title></title>vlinkColor Το χρώμα των υπερσυνδέσμων που έχετε επισκεφτεί.

(ιδιότητα vlink ετικέτας <body>)Αντικείμενο Document: Μεθοδοι (methods)

clear() Προκαλεί την διαγραφή των περιεχομένων τρέχουσας ιστοσελίδας

write() Τυπώνει το κείμενο (που έχετε προσδιορίσει σαν όρισμά της) σαν μέρος μιας ιστοσελίδας

writeln() Τυπώνει κείμενο όπως και η μέθοδος document.write() μόνο που στο τέλος προσθέτει και τον χαρακτήρα νέας γραμμής (‘\n’)

7.3.1.3Αντικείμενο History :

Το αντικείμενο αυτό καταγράφει την λίστα των URL που έχετε επισκεφθεί στην τρέχουσα εκτέλεση του προγράμματος του φυλλομετρητή και παρέχει μεθόδους που σας επιτρέπουν να μεταβείτε σε προηγούμενες και επόμενες τοποθεσίες.

Αντικείμενο history: IδιότητεςLength Παρακολουθεί το μήκος της λίστας του ιστορικού, τον

αριθμό δηλ. των διαφορετικών θέσεων που έχει επισκεφθεί ο χρήστης

Current Περιέχει το URL της σελίδας που βλέπει αυτήν την στιγμή ο χρήστης

Next Περιέχει το URL της σελίδας που θα δείτε εάν πατήσετε στο κουμπί Forward του φυλλομετρητή

Previous Περιέχει το URL της σελίδας που θα δείτε εάν πατήσετε στο κουμπί Βack του φυλλομετρητή

55

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Αντικείμενο history: Μέθοδοι(methods)Back Φορτώνει το προηγούμενο URL της λίστας του ιστορικού,

ισοδυναμεί με πάτημα του πλήκτρου BackForward Φορτώνει το επόμενο URL της λίστας του ιστορικού,

ισοδυναμεί με πάτημα του πλήκτρου Forwardπχhistory.back();

Ισοδυναμεί με πάτημα του πλήκτρου Back μια φοράhistory.forward();

Ισοδυναμεί με πάτημα του πλήκτρου Forward μια φορά

7.3.2Και άλλα Συμβάντα:

Εκτός από το συμβάν onClick που ήδη έχουμε δει υπάρχουν και τα πιο κάτω :

onMouseOver λαμβάνει χώρα όταν ο δείκτης του ποντικιού βρεθεί πάνω από ένα

αντικείμενο.

onAbort - Το σενάριο της JavaScript εκτελείται όταν ο χρήστης σταματάει τη

φόρτωση μιας εικόνας.

on C lick - Το σενάριο της JavaScript εκτελείται όταν ο χρήστης πατάει ένα κουμπί,

ένα τετράγωνο επιλογής, ένα κουμπί επιλογής ράδιο, ένα κουμπί συνδέσμου, ένα κουμπί επαναφοράς ή ένα κουμπί υποβολής.

on E rror - Το σενάριο της JavaScript εκτελείται όταν δεν μπορεί να φορτωθεί μια

εικόνα.

on KeyPress - Το χειριστήριο συμβάντος της JavaScript εκτελείται όταν ο χρήστης

πατήσει και αφήσει ένα πλήκτρο πάνω στο πληκτρολόγιο ή κρατήσει πατημένο το πλήκτρο αυτό.

on L oad - Το σενάριο της JavaScript τρέχει όταν φορτώνεται μια σελίδα στον browser

ή όταν φορτώνεται μια εικόνα σε ένα έγγραφο. To συμβάν λαμβάνει χώρα όταν τελειώσει η φόρτωση της τρέχουσας σελίδας. Το ακόλουθο σενάριο απλά εμφανίζει ένα μήνυμα που αναφέρει πότε τελειώνει το φόρτωμα της ιστοσελίδας.<body onLoad=”window.alert(‘Loading Complete.’);”>

O n M ouse Down – Το σενάριο εκτελείται όταν ο χρήστης πατήσει το κουμπί του

ποντικιού

O n MouseUp – Το σενάριο εκτελείται όταν ο χρήστης αφήσει το κουμπί του ποντικιού

O n M ouse O ver - Το σενάριο της JavaScript εκτελείται όταν ο χρήστης απλά δείχνει με

το ποντίκι ένα σύνδεσμο.Το παρακάτω χειριστήριο συμβάντος προκαλεί την εμφάνιση ενός μηνύματος κατά την μετακίνηση πάνω από ένα σύνδεσμο: <a href=”www.flash.gr” onMouseOver=”window.alert(‘You moved over link’);”> Κάνετε κλικ εδώ.</a>

56

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

onMouse Out - Το χειριστήριο της JavaScript εκτελείται όταν ο δείκτης του ποντικιού

βγεί απλά έξω από το περίγραμμα του αντικειμένου, και συμβαίνει πάντα μετά από κλήση του χειριστηρίου OnMouseOver

Δραστηριότητα:1. Δημιουργήστε μια νέα ιστοσελίδα2. Γράψτε τη φράση «Παλιά ιστοσελίδα» και πατήστε enter3. Πηγαίνετε σε προβολή CODE και συμπληρώστε στη περιοχή head τον πιο κάτω

κώδικα:<SCRIPT LANGUAGE ="JAVASCRIPT"> alert("Το URL έχει αλλάξει. Παρακαλούμε σημειώστε το καινούργιο όταν σας προωθήσουμε στη νέα μας σελίδα.") </SCRIPT>

4. Διορθώστε την ετικέτα <body> σε <body onload="document.location='http://1epal-ymitt.att.sch.gr'">

Ερωτήσεις κατανόησηςa) Ποια εντολή έτρεξε πρώτα και τι έκανε;

……………………………………………………………………………………………………………………………………….……………………………………………………………………………………………………………………………………….

b) Μετά από ποιο γεγονός εμφανίστηκε η σελίδα του σχολείου μας;…………………………………………….

c) Ποια ιδιότητα του document άλλαξε με αποτέλεσμα να εμφανιστεί η σελίδα του σχολείου μας;

………………………………………………………………………………………………………………1. Βασισμένοι στα πιο πάνω αντικείμενα δημιουργείστε μια ιστοσελίδα που να

περιέχει: Κείμενο Ένα τουλάχιστον σενάριο σε javascript Ένα μήνυμα alert που να εμφανίζεται μετά από κάποιο γεγονός

7.4 Java

7.4.1Η Γλώσσα Μηχανής

Ένας υπολογιστης ειναι ένα συνθετο συστημα που αποτελείται από πολλά διαφορετικά συστατικά. Αλλά στην καρδιά -- ή ο εγκέφαλος, εάν θέλετε -- είναι η μονάδα κεντρικής επεξεργασίας, ή ΚΜΕ ή CPU. Ένα πρόγραμμα είναι απλά ένας κατάλογος σαφών εντολών που προορίζονται να ακολουθηθούν μηχανικά από έναν υπολογιστή. Ένας υπολογιστής χτίζεται για να πραγματοποιήσει τις εντολές που γράφονται σε έναν πολύ απλό τύπο αποκαλούμενης

57

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

γλώσσας της γλώσσας μηχανής. Κάθε τύπος υπολογιστή έχει τη δική του γλώσσα μηχανής και μπορεί άμεσα να εκτελέσει ένα πρόγραμμα μόνο εάν εκφράζεται σε εκείνη την γλώσσα.Όταν η ΚΜΕ εκτελεί ένα πρόγραμμα, το πρόγραμμα είναι αποθηκευμένο στην κύρια μνήμη του υπολογιστή (RAM). Εκτός από το πρόγραμμα, η μνήμη μπορεί επίσης να φυλάξει δεδομένα που χρησιμοποιούνται ή υποβάλλονται σε επεξεργασία από το πρόγραμμα. Η κύρια μνήμη αποτελείται από μια ακολουθία θέσεων. Αυτές οι θέσεις είναι αριθμημένες, και ο αριθμός της θέσης καλείται διεύθυνσή του. Μια διεύθυνση μας παρέχει έναν τρόπο για να «τσιμπάμε» ένα κομμάτι των πληροφοριών μεταξύ των εκατομμυρίων που αποθηκεύονται στη μνήμη. Η ΚΜΕ μπορεί επίσης να αποθηκεύσει πληροφορίες στη μνήμη. Στο επίπεδο της γλώσσας μηχανής, η λειτουργία της ΚΜΕ είναι αρκετά απλή. Η ΚΜΕ εκτελεί ένα πρόγραμμα που είναι αποθηκευμένο ως ακολουθία εντολών σε γλώσσα μηχανής στην κύρια μνήμη. Το κάνει αυτό διαβάζοντας τις εντολές του προγράμματος την μια μετά την άλλη ,δηλαδή αφού τις μεταφέρει τις εντολές από τη μνήμη, η ΚΜΕ τις εκτελεί. Αναλυτικότερα ο κύκλος της μεταφοράς μιας εντολής και της εκτέλεσής της στην ΚΜΕ γίνεται με την βοήθεια των καταχωρητών της ΚΜΕ. Η ΚΜΕ περιέχει καταχωρητές, οι οποίοι είναι μικρές μονάδες μνήμης ικανές να κρατήσουν εντολές ή δεδομένα σε γλώσσα μηχανής. Η ΚΜΕ χρησιμοποιεί εναν από αυτούς τους καταχωρητές - το μετρητή προγράμματος, ή PC (Program Counter) - για να παρακολουθεί που βρίσκονται στη μνήμη οι εντολές του προγράμματος που εκτελεί. Ο PC αποθηκεύει τη διεύθυνση της επόμενης εντολής που η ΚΜΕ πρέπει να εκτελέσει. Στην αρχή κάθε ενός κύκλου μεταφοράς και εκτέλεσης εντολής, η ΚΜΕ ελέγχει τον PC για να δεί ποια εντολή πρέπει να προσκομίσει. Κατά τη διάρκεια εκτέλεσης του προγράμματος, ο αριθμός στο PC ενημερώνεται για να δείξει την εντολή που πρόκειται να εκτελεσθεί στον επόμενο κύκλο. (Συνήθως, αλλά όχι πάντα, αυτό είναι ακριβώς η εντολή που ακολουθεί διαδοχικά την τρέχουσα εντολή στο πρόγραμμα.).

58

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

7.4.2Η Εικονική μηχανή της Java (Java Virtual Machine)

7.4.2.1Πηγαίος κώδικας, γλώσσα μηχανής και μεταφραστής

Η γλώσσα μηχανής αποτελείται από πολύ απλές εντολές σε 0 και 1 που μπορούν να εκτελεσθούν άμεσα από την ΚΜΕ ενός υπολογιστή. Σχεδόν όλα τα προγράμματα, εν τούτοις, γράφονται στις υψηλού επιπέδου γλώσσες προγραμματισμού όπως Java, Pascal, or C++. Ένα πρόγραμμα που γράφεται σε μια υψηλού επιπέδου γλώσσα δεν μπορεί να τρέξει άμεσα σε οποιοδήποτε υπολογιστή. Κατ' αρχάς, πρέπει να μεταφραστεί σε γλώσσα μηχανής. Αυτή η μετάφραση μπορεί να γίνει από ένα πρόγραμμα που ονομάζεται compiler (μεταγλωττιστής). Ένας μεταγλωττιστής παίρνει ένα πρόγραμμα που είναι γραμμένο σε γλώσσα υψηλού επιπέδου και το μεταφράζει σε ένα εκτελέσιμο σε γλώσσα μηχανής πρόγραμμα. Μόλις γίνει η μετάφραση, το πρόγραμμα σε γλώσσα μηχανής μπορεί να τρέξει όσες φορές θέλουμε, αλλά φυσικά μόνο σε έναν τύπο υπολογιστή (δεδομένου ότι κάθε τύπος υπολογιστή έχει τη δικιά του γλώσσα μηχανής). Εάν το πρόγραμμα πρόκειται να τρέξει σε έναν άλλο τύπο υπολογιστή πρέπει να ξαναμεταφραστεί σε κατάλληλη γλώσσα μηχανής, χρησιμοποιώντας έναν διαφορετικό μεταγλωττιστή.

7.4.2.2Διερμηνέας

Υπάρχει μια εναλλακτική λύση στη μεταγλώτιση ενός προγράμματος που είναι γραμμένο σε υψηλού επιπέδου γλώσσα (πηγαίο πρόγραμμα). Αντί της χρησιμοποίησης ενός μεταγλωττιστή, που μεταφράζει το πρόγραμμα στο σύνολό του και δημιουργεί ένα εκτελέσιμο πρόγραμμα σε γλώσσα μηχανής, μπορείτε να χρησιμοποιήσετε έναν διερμηνέα, που τον μεταφράζει και τον εκτελεί εντολή-εντολή. Προκειμένου να εκτελεσθεί ένα πρόγραμμα που είναι γραμμένο σε γλώσσα υψηλού επιπέδου, ο διερμηνέας που είδη τρέχει, διαβάζει μια εντολή του προγράμματος, αποφασίζει τι είναι απαραίτητο να μεταφέρει (πχ κάποιο κομμάτι κώδικα από μια βιβλιοθήκη) ή να τροποποιήσει και κατόπιν σχηματίζει την αντίστοιχη εντολή ή εντολές σε γλώσσα μηχανής. Οι εντολές αυτές που είναι πλέον σε γλώσσα μηχανής πηγαίνουν στην ΚΜΕ για εκτέλεση.Κάθε διαφορετικού τύπου υπολογιστής έχει και διαφορετικό διερμηνέα για την ίδια γλώσσα. Αυτό σημαίνει ότι ένα πρόγραμμα γραμμένο σε γλώσσα υψηλού επιπέδου μπορεί να τρέξει σε τελείως διαφορετικά μηχανήματα αν αυτά διαθέτουν τον σχετικό διερμηνέα της γλώσσας.Με αυτόν τον τρόπο θα μπορούσαμε να ξεπεράσουμε όλα τα προβλήματα ασυμβατότητας των διαφορετικών μηχανημάτων. Δυστυχώς όμως οι διερμηνείς είναι μεγάλα και αργά προγράμματα. Με συνέπεια τα προγράμματα να τρέχουν πολύ πιο αργά και οι διερμηνείς να καταλαμβάνουν πολύ χώρο στις αποθηκευτικές μονάδες και στη μνήμη του υπολογιστή.

59

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

7.4.3Κώδικας bytecode της java

Οι σχεδιαστές της Java επέλεξαν να χρησιμοποιήσουν έναν συνδυασμό από compiler και interpreter. Τα προγράμματα που γράφονται στην Java μεταφράζονται σε γλώσσα μηχανής, η οποία όμως είναι για έναν υπολογιστή που δεν υπάρχει πραγματικά. Αυτός ο αποκαλούμενος "εικονικός" υπολογιστής είναι γνωστός ως εικονική μηχανή της Java. Η γλώσσα μηχανής για την εικονική μηχανή της Java καλείται Java bytecode.

Κατά τη μετάφραση σε γλώσσα Bytecode έχει γίνει η περισσότερη δουλειά μεταγλώτισης και έχει μείνει μέρος των εντολών που εξαρτώνται άμεσα από τις ιδιαιτερότητες του μηχανήματος. Έτσι η δουλειά του διερμηνέα java-bytecode είναι μικρός και η ταχύτητηα εκτέλεσης μεγαλύτερη καθώς επίσης και ο όγκος του σαν πρόγραμμα.

Φυσικά, ένας διαφορετικός bytecode διερμηνέας Java απαιτείται για κάθε τύπο υπολογιστή, αλλά αρκεί να έχει ένας υπολογιστής έναν διερμηνέα του Java bytecode, για να μπορεί να τρέξει οποιοδήποτε πρόγραμμα γραμμένο σε Java bytecode. Αυτό είναι ένα από τα ουσιαστικά χαρακτηριστικά γνωρίσματα της Java: το ίδιο μεταφρασμένο πρόγραμμα μπορεί να τρέξει σε πολλούς διαφορετικούς τύπους υπολογιστών.

Τα προγράμματα που γράφουν οι προγραμματιστές σε γλώσσα java με μορφή κειμένου παίρνουν την επέκταση [onoma].java. Όταν μεταγλωτιστούν σε γλώσσα Bytecode τους δίνουμε την επέκταση [onoma].class

7.4.4Applets

Υπάρχει μια ιδιαίτερη κατηγορία προγραμμάτων java που είναι κατασκευασμένα έτσι ώστε να ενσωματώνονται σε ιστοσελίδες. Τα προγράμματα αυτά ονομάζονται applets. Κατά την κατασκευή τους χρησιμοποιούν ειδικές βιβλιοθήκες που επιτρέπουν να χρησιμοποιηθούν τα γραφικά περιβάλλοντα των λειτουργικών συστημάτων όπως αυτά τα αναγνωρίζουν οι Browsers.Τα προγράμματα αυτά είναι σε γλώσσα bytecode με επέκταση [onom].class. Όλοι οι browsers σήμερα συνεργάζονται με τον διερμηνέα java του μηχανήματος και εκτελούν τα applets των ιστοσελίδων.

60

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

Για να ενσωματώσουμε ένα applet σε μια ιστοσελίδα κάνουμε τα εξής:1. Τοποθετούμε το αρχείο [onoma].class στον web server στον οποίο είναι και η

ιστοσελίδα μας. 2. Στον κώδικα html της σελίδα μας και στο σημείο που θέλουμε να εμφανισθεί

γράφουμε την πιο κάτω ετικέτα:

<applet code=”[onoma].class” codebase=”/path” width=… heigth=… ></applet>

Όπου:Code= “το όνομα του αρχείου που περιέχει το applet.Codebase=”το σχετικό path του φακέλου που βρίσκεται το applet ως προς τον φάκελο που βρίσκεται η ιστοσελίδα μας.”Width=το πλάτος του πλαισίου μέσα στο οποίο θα «παίξει» το applet”Heigth=το ύψος του πλαισίου μέσα στο οποίο θα «παίξει» το applet”

61

Προγραμματιστικά εργαλεία στο διαδίκτυο από τον Γιάννη Ιωαννίδη

8 Επαναληπτικές ερωτήσεις προόδου1. Αναφέρετε μερικές υπηρεσίες του Ιντερνετ και τις εφαρμογές με τις οποίες

μπορούμε να τις χρησιμοποιήσουμε.2. Τι εξάρτημα πρέπει να έχει ένας υπολογιστής για να συνδεθεί με ένα τοπικό

δίκτυο υπολογιστών;3. Τι κάνει ο Router σε ένα δίκτυο;4. Τι κάνει το modem;5. Τι είδους τηλεφωνικές γραμμές έχουμε και τι ταχύτητες πετυχαίνουμε με αυτές;6. Πως ταξιδεύουν οι πληροφορίες στο ιντερνετ7. Τι είναι οι διευθύνσεις IP8. Που βρίσκονται οι σελίδες Web;9. Με ποιο πρόγραμμα τις καλούμε;10.Τι σχέση έχει η λειτουργία μιας ταβέρνας και η λειτουργία του ιντερνετ;11.Από ποια μέρη αποτελείται μια διεύθυνση ιστοσελίδας και τι είναι το καθένα;12.Πως λέγεται η γλώσσα με την οποία γράφεται μια ιστοσελίδα;13.Τι περιέχονται ανάμεσα στα σύμβολα < > και πως ονομάζονται;14.Ποιες ετικέτες σχηματίζουν την βασική δομή μιας ιστοσελίδας;15.Γιατί όταν ξεκινάμε την κατασκευή μιας ιστοσελίδας πρέπει να καθορίσουμε ένα

φάκελο στον σκληρό μας δίσκο που θα είναι ο βασικός και στον οποίον θα υπάρχουν όλα τα αρχεία μας;

16.Γιατί πρέπει το υλικό που θα δημοσιεύσουμε στην ιστοσελίδα να βρίσκεται σε υποφακέλους ως προς τον βασικό;

62