ΕΦΑΡΜΟΓΖσ ΒΆΕΩΝ ΔΕΔΟΜΖΝΩΝ ΚΑΙ ΔΙΑΔΙΚΣΥΟΤ Ειρινθ Φιλιοποφλου
Ειςαγωγι Ο Παγκόςμιοσ Ιςτόσ (World Wide Web - WWW) ι πιο απλά Ιςτόσ (Web) είναι μία αρχιτεκτονικι για τθν προςπζλαςθ διαςυνδεδεμζνων εγγράφων τα οποία είναι κατανεμθμζνα ςε εκατομμφρια υπολογιςτζσ ςε όλο το Διαδίκτυο (Internet). Ο όροσ ζγγραφα αναφζρεται όχι μόνο ςε ζγγραφα κειμζνου, αλλά περιλαμβάνει όλων των ειδϊν τα ζγγραφα, όπωσ εικόνεσ, γραφικά, βίντεο και animation. τισ μζρεσ μασ ζχει πάρει τζτοια διάδοςθ ϊςτε πολλοί το ταυτίηουν με το ίδιο το Διαδίκτυο, αν και αποτελεί μόνο μία εφαρμογι του.
Ειςαγωγι Σο WWW ξεκίνθςε το 1989 ςτο Ευρωπαϊκό Κζντρο Πυρθνικϊν Ερευνϊν (CERN). Σο CERN διζκετε πολλζσ ομάδεσ επιςτθμόνων από διάφορεσ χϊρεσ οι οποίοι είχαν τθν ανάγκθ να επικοινωνοφν μεταξφ τουσ. Ο φυςικόσ Tim Berners Lee το 1989 πρότεινε τθν ιδζα για τον Ιςτό των διαςυνδεδεμζνων εγγράφων, ωσ ζναν τρόπο για τθν επικοινωνία των ομάδων αυτϊν. Μετά από 18 μινεσ λειτοφργθςε το πρϊτο (βαςιςμζνο μόνο ςε κείμενο) πρωτότυπο.
Ειςαγωγι Από τθν ςκοπιά του χριςτθ, ο Ιςτόσ αποτελείται από μία πλθκϊρα διαςκορπιςμζνων εγγράφων, τα οποία κα αποκαλοφμε Ιςτοςελίδεσ (Web pages) ι απλά ςελίδεσ (pages). Οι ςελίδεσ αυτζσ μπορεί να περιζχουν δεςμοφσ προσ άλλεσ ςελίδεσ, οι οποίοι ονομάηονται δεςμοί υπερκειμζνου (hyperlinks). τθν περίπτωςθ αυτι λζμε ότι οι ςελίδεσ αποτελοφνται από υπερκείμενο (hypertext).
Ειςαγωγι Για να μπορζςουμε να δοφμε τα περιεχόμενα μίασ ιςτοςελίδασ χρθςιμοποιοφμε ζνα πρόγραμμα το οποίο ονομάηουμε browser. Η βαςικι λειτουργία του browser είναι να ηθτά από ζναν εξυπθρετθτι Ιςτοφ (Web server) τα περιεχόμενα τθσ ιςτοςελίδασ, κάνοντασ χριςθ του πρωτοκόλλου HTTP (HyperText Transfer Protocol), και ςτθ ςυνζχεια να τα εμφανίηει ςτο μθχάνθμα του χριςτθ.
Ετικζτεσ (tags) Η γλϊςςα HTML (HyperText Markup Language) είναι ο τρόποσ με τον οποίο ο browser απεικονίηει τα ζγγραφα. Με τον όρο ζγγραφα εννοοφμε κάκε είδουσ αρχείου, όπωσ αρχείο κειμζνου, εικόνεσ, animation και βίντεο. Σα αρχεία τθσ HTML είναι απλά αρχεία κειμζνου ςτα οποία υπάρχουν ειδικοί κϊδικεσ, οι οποίοι ονομάηονται ετικζτεσ (tags), που δθλϊνουν ςτον browser τον τρόπο με τον οποίο κα εμφανιςτοφν τα αρχεία αυτά. Οι ετικζτεσ ζχουν τθν παρακάτω γενικι δομι: <όνομα_ετικζτασ>κείμενο</όνομα_ετικζτασ>
Ετικζτεσ (tags) Με το όνομα_ετικζτασ δθλϊνεται ςτον browser θ ενζργεια που κα εκτελεςτεί ςτο κείμενο. Για να δθλϊςουμε το ςθμείο που κα ςταματιςει να εκτελείτε θ ενζργεια αυτι χρθςιμοποιοφμε τθν αντίςτοιχθ ετικζτα κλειςίματοσ </όνομα_ετικζτασ>. Τπάρχουν περιπτϊςεισ ετικετϊν HTML που δεν ζχουν ετικζτα κλειςίματοσ, π.χ. όταν κζλουμε να ειςάγουμε μία εικόνα απλά δθλϊνουμε τθν ενζργεια αυτι με τθν αντίςτοιχθ HTML ετικζτα θ ετικζτα κλειςίματοσ ςτθν περίπτωςθ αυτι δεν ζχει κανζνα νόθμα.
Ετικζτεσ (tags) Αντίκετα, όταν κζλουμε να κάνουμε ζνα κείμενο να ζχει ζντονθ γραφι τότε πρζπει να ςυμπεριλάβουμε το κείμενο εντόσ τθσ αντίςτοιχθσ HTML ετικζτασ. το όνομα ετικζτασ δε γίνεται διάκριςθ ανάμεςα ςε πεηοφσ και κεφαλαίουσ χαρακτιρεσ. Οποιοςδιποτε ςυνδιαςμόσ είναι αποδεκτόσ Π.χ. οι ετικζτεσ <html>, <HTML> ι <HtMl> είναι ιςοδφναμεσ.
Δομή ενόσ εγγράφου HTML Ζνα αρχείο HTML περιζχεται μζςα ςτθν ετικζτα <HTML> </HTML> και αποτελείται από δφο ξεχωριςτά μζρθ: το <HEAD> </HEAD> ςτο οποίο περιζχονται πλθροφορίεσ που αφοροφν το ίδιο το αρχείο και όχι το τι κα εμφανιςτεί ςτθν οκόνθ του browser, και το <BODY> </BODY> ςτο οποίο περιζχεται ότι κα εμφανιςτεί ςτθν ςελίδα.
Δομή ενόσ εγγράφου HTML Πριν δείξουμε τα παραπάνω με ζνα παράδειγμα, κα αναφερκοφμε ςε μία άλλθ ετικζτα, τθν <TITLE>Τίτλοσ</TITLE>. Η ετικζτα αυτι εμφανίηει τον Σίτλο ςτθν μπάρα τίτλου του browser. Η ετικζτα αυτι δεν εμφανίηει κάποιο κείμενο ςτθν οκόνθ και βρίςκεται μζςα ςτθν <HEAD> <HEAD>.
Δομή ενόσ εγγράφου HTML Για να δθμιουργιςουμε το πρϊτο μασ παράδειγμα HTML αρκεί να ανοίξουμε ζναν επεξεργαςτι κειμζνου, να πλθκτρολογιςουμε το κείμενό μασ, να το αποκθκεφςουμε ςε ζνα αρχείο με κατάλθξθ.htm ι.html και ςτθ ςυνζχεια να το εμφανίςουμε κάνοντασ χριςθ του browser.
1 ο Παράδειγμα <html> <head> <title> Σίτλοσ... Εμφανίηομαι μόνο ςτθ μπάρα τίτλου </title> </head> <body> Μζςα ςτθν ετικζτα body γράφουμε το κείμενο που κζλουμε να εμφανίηεται ςτθ ςελίδα. </body> </html>
Δομή ενόσ εγγράφου HTML Ανάλογα με τον browser που χρθςιμοποιοφμε και το μζγεκοσ του παρακφρου του, θ εμφάνιςθ τθσ ςελίδασ που δθμιουργιςαμε μπορεί να διαφζρει ςε μερικά ςθμεία. Αυτό ςυμβαίνει γιατί θ HTML λζει ςτον browser τισ ενζργειεσ που πρζπει να εκτελζςει (π.χ. ότι ζνα κείμενο πρζπει να φαίνεται με ζντονθ γραφι) και όχι τθν ακριβι εμφάνιςθ που κα ζχει θ ςελίδα μασ. Αυτό είναι πλεονζκτθμα, και όχι μειονζκτθμα, αφοφ κάνει τθ ςελίδα μασ ικανι να εμφανίηεται, μζςω του browser, ςε οποιοδιποτε μθχάνθμα, με οποιοδιποτε λειτουργικό ςφςτθμα και με οποιαδιποτε ανάλυςθ οκόνθσ.
Επικεφαλίδεσ τθ ςυνζχεια κα περιγράψουμε τθ δθμιουργία επικεφαλίδων (headings), οι οποίεσ χρθςιμοποιοφνται για τθν μορφοποίθςθ του κειμζνου που εμφανίηεται ςτθν ςελίδα. Για να δθμιουργιςουμε μία επικεφαλίδα χρθςιμοποιοφμε τθν ετικζτα <hn> </hn>, όπου το N είναι ζνασ αρικμόσ από το 1 ζωσ και το 6. Η επικεφαλίδα <h1> </h1> είναι θ πιο ςθμαντικι. Όςο αυξάνεται το N τόςο λιγότερο ςθμαντικι γίνεται θ επικεφαλίδα. Παρακάτω δείχνουμε, με ζνα παράδειγμα, τον τρόπο με τον οποίο εμφανίηονται διάφορα επίπεδα επικεφαλίδων ςτον Internet Explorer.
Επικεφαλίδεσ <html> <head> <title>πίνακασ Περιεχομζνων</title> </head> <body> <h1>κεφάλαιο 1: Σα βαςικά τθσ HTML</h1> <h2>ενότθτα 1.1: Ετικζτεσ (tags)</h2> <h2>ενότθτα 1.2: Δομι ενόσ εγγράφου HTML</h2> <h2>ενότθτα 1.3: Επικεφαλίδεσ</h2> <h2>ενότθτα 1.4: Διαχωριςτικά</h2> <h3>παράγραφοσ 1.4.1: Παράγραφοι</h3> <h3>παράγραφοσ 1.4.2: Οριηόντιεσ γραμμζσ</h3> <h3>παράγραφοσ 1.4.3: Αλλαγι γραμμισ</h3> </body> </html>
Επικεφαλίδεσ
Διαχωριςτικά Η HTML γενικά αγνοεί τα κενά διαςτιματα ι και τισ αλλαγζσ γραμμισ. Για τθ δθμιουργία τμθμάτων κειμζνου, τα οποία κα είναι αυτοδφναμα, γίνεται χριςθ διαχωριςτικϊν. Ζνα διαχωριςτικό του κειμζνου είναι οι παράγραφοι. Οι παράγραφοι διαχωρίηουν το κείμενο μζςω τθσ εμφάνιςθσ μίασ κενισ γραμμισ και δθλϊνονται μζςω τθσ ετικζτασ <p> </p>. τισ επικεφαλίδεσ δεν είναι απαραίτθτθ θ χριςθ τθσ ετικζτασ παραγράφου, αφοφ θ επικεφαλίδα είναι από μόνθ τθσ ζνα ξεχωριςτό κομμάτι κειμζνου. Σζλοσ, αν και θ ετικζτα τερματιςμοφ </p> είναι προαιρετικι καλό είναι να χρθςιμοποιείται.
Διαχωριςτικά Ζνασ άλλοσ τρόποσ διαχωριςμοφ του κειμζνου είναι και οι οριηόντιεσ γραμμζσ (horizontal rules). Οι οριηόντιεσ γραμμζσ δθλϊνονται μζςω τθσ ετικζτασ <hr>. Η ετικζτα αυτι δεν ζχει αντίςτοιχθ ετικζτα τερματιςμοφ. Παρόμοια λειτουργία με τθν παράγραφο ζχει και θ ετικζτα αλλαγισ γραμμισ <br>. Όμωσ, ςε αντίκεςθ με τθν παράγραφο, δεν αφινουμε κενι γραμμι.
Διαχωριςτικά Σο παράδειγμα που ακολουκεί αποτελείται από δφο τμιματα, τα οποία χωρίηονται μζςω μίασ οριηόντιασ γραμμισ. Και τα δφο τμιματα εμφανίηουν το ίδιο κείμενο, αλλά με χριςθ διαφορετικϊν ετικετϊν μορφοποίθςθσ - διαχωριςμοφ. το πρϊτο τμιμα γίνεται χριςθ παραγράφων, ενϊ ςτο δεφτερο αλλαγι γραμμισ και επικεφαλίδων. τον κϊδικα του παραδείγματοσ αυτοφ ειςάγεται και θ ζννοια του ςχόλιου. Ένα ςχόλιο είναι ζνα κείμενο το οποίο για τον browser είναι ςαν να μθν υπάρχει, αλλά χρθςιμοποιείται από κάποιον ωσ διευκρίνιςθ για αυτόν που διαβάηει τον κώδικα. Ζνα ςχόλιο περιζχεται μζςα ςτα <!-- και --> και μπορεί να καταλαμβάνει περιςςότερεσ από μία γραμμζσ.
Διαχωριςτικά <html> <head> <title> Διαχωριςμόσ κειμζνου </title> </head> <body> </body> </html> <!-- Πρϊτο τμιμα... Σο κείμενο διαχωρίηεται μζςω παραγράφων --> Η ςελίδα αυτι περιζχει δφο τμιματα. <p> το πρϊτο τμιμα ο διαχωριςμόσ του κειμζνου γίνεται μζςω χριςθσ παραγράφων, <p> ενϊ ςτο δεφτερο ο διαχωριςμόσ γίνεται μζςω τθσ επικεφαλίδασ 3 και αλλαγισ γραμμισ. <!-- Οριηόντια γραμμι --> <hr> <!-- Δεφτερο τμιμα... Σο κείμενο διαχωρίηεται μζςω αλλαγϊν γραμμισ και επικεφαλίδων --> <h3> Η ςελίδα αυτι περιζχει δφο τμιματα. </h3> το πρϊτο τμιμα ο διαχωριςμόσ του κειμζνου γίνεται μζςω χριςθσ παραγράφων, <br> ενϊ ςτο δεφτερο ο διαχωριςμόσ γίνεται μζςω τθσ επικεφαλίδασ 3 και αλλαγισ γραμμισ.