ΕΦΑΡΜΟΓΖσ ΒΆΕΩΝ ΔΕΔΟΜΖΝΩΝ ΚΑΙ ΔΙΑΔΙΚΣΥΟΤ Ειρινθ Φιλιοποφλου
Τι είναι το URL Σο URL (Uniform Resource Locator) είναι θ διεφκυνςθ που χρθςιμοποιεί το WWW για να δθλϊςει τθ κζςθ άλλων αρχείων που βρίςκονται ςτο Internet. Σο URL βαςικά αποτελείται από τρία μζρθ: ζνα αναγνωριςτικό για τον τφπο του Internet server, ζνα αναγνωριςτικό για το μθχάνθμα και ζνα αναγνωριςτικό για τθ κζςθ του αρχείου ςτο ςυγκεκριμζνο μθχάνθμα. Η δομι του URL είναι θ ακόλουκθ: type://in.ter.net.address/directory/sub-directory/.../filename τθν παραπάνω δομι type είναι ο τφποσ του Internet server. Οι τφποι που χρθςιμοποιοφνται, ςυνικωσ, ςτισ ηεφξεισ υπερκειμζνου, είναι οι http και ftp.
Τι είναι το URL Σο type ακολουκείτε πάντα από το :// και ςτθ ςυνζχεια από τθ διεφκυνςθ ςτο Internet, που είναι τθσ μορφισ host.domain.domain.domain. υχνά από το αναγνωριςτικό τθσ κζςθσ του αρχείου παραλείπεται από το όνομα του αρχείου και δθλϊνεται μόνο θ κζςθ του (ςε επίπεδο υποκαταλόγων). Όταν ςυμβαίνει αυτό, οι browsers ψάχνουν αυτόματα να βρουν αν υπάρχει ζνα αρχείο με το όνομα index.htm (ι index.html). Για το λόγο αυτό θ κεντρικι ςελίδα των περιςςότερων site ονομάηεται index.htm. Η δυνατότθτα αυτι των browser γλυτϊνει και τον χριςτθ από τθν πλθκτρολόγθςθ του «index.htm.
Στοίχιση κειμένου τθν HTML παρζχεται θ δυνατότθτα ςτοίχιςθσ του κειμζνου ζνα κείμενο μπορεί να εμφανίηεται ςτο κζντρο τθσ γραμμισ, να είναι ςτοιχιςμζνο μόνο αριςτερά, μόνο δεξιά ι αριςτερά και δεξιά ταυτόχρονα. Πολλζσ ετικζτεσ τθσ HTML περιζχουν ζνα χαρακτηριστικό align που μασ επιτρζπει τθ ςτοίχιςθ του κειμζνου. Χαρακτθριςτικά αναφζρουμε τθν ετικζτα παραγράφου <p> </p> και τισ ετικζτεσ επικεφαλίδων <hn> </hn>. Οι τιμζσ που μπορεί να πάρει το χαρακτθριςτικό align είναι center, left, right για τθ ςτοίχιςθ του κειμζνου ςτο κζντρο, ςτα αριςτερά και ςτα δεξιά, αντίςτοιχα, τθσ γραμμισ.
Στοίχιση κειμένου Για τθ ςτοίχιςθ κειμζνου και εικόνων θ ετικζτα <img> ζχει επίςθσ ζνα χαρακτθριςτικό align. Δίνοντασ τιμζσ left και right ςτο χαρακτθριςτικό align μποροφμε να ζχουμε τθν εικόνα ςτοιχιςμζνθ αριςτερά ι δεξιά τθσ ςελίδασ. Σο κείμενο HTML που ακολουκεί τθν εικόνα, ςτθν περίπτωςθ αυτι, γεμίηει τον περιβάλλοντα χϊρο τθσ εικόνασ. Αντίκετα, αν δεν γίνει χριςθ του χαρακτθριςτικοφ align, το κείμενο ςυνεχίηει ςε καινοφργια γραμμι κάτω από τθν εικόνα.
Στοίχιση κειμένου Εκτόσ από τισ παραπάνω μεκόδουσ, θ HTML μασ παρζχει και μία μζκοδο για τθν ςτοίχιςθ ολόκλθρων τμθμάτων HTML κϊδικα. Για το ςκοπό αυτό χρθςιμοποιείται θ ετικζτα <div aligh=x> </div>, όπου το x μπορεί να πάρει τιμζσ left, right και center. Π.χ. αν κζλουμε να κεντράρουμε όλο το περιεχόμενο μιασ ςελίδασ τότε μποροφμε να γράψουμε (φαίνεται μόνο το κφριο ςϊμα του HTML κϊδικα):
Στοίχιση κειμένου <body> <div align=center> </div> </body>
Πίνακες Οι πίνακεσ ςτθν HTML χρθςιμοποιοφνται για τθν εκπλιρωςθ δφο βαςικϊν επιδιϊξεων. Πρϊτον, για τθν ςυγκεντρωμζνθ οργάνωςθ άλλων ςτοιχείων τθσ HTML και Δεφτερον, για τθν διαμόρφωςθ τθσ εμφάνιςθσ των ιςτοςελίδων. Γενικά, ςτθν HTML οι πίνακεσ αποτελοφνται από γραμμζσ, οι οποίεσ αποτελοφνται από κελιά. Για να δθλϊςουμε τα ςτοιχεία ενόσ πίνακα ξεκινάμε δθλϊνοντασ τθν πρϊτθ γραμμι, μετά τθ δεφτερθ, τθν τρίτθ κτλ. ζωσ ότου δθλϊςουμε όλεσ τισ γραμμζσ. τθ διλωςθ τθσ κάκε γραμμισ περιζχεται θ διλωςθ όλων των ςτοιχείων κελιϊν που περιζχει θ γραμμι.
Πίνακες Για να δθλϊςουμε ζναν πίνακα χρθςιμοποιοφμε τθν ετικζτα <table> </table>. Μζςα ςτθν ετικζτα του πίνακα δθλϊνουμε τισ ετικζτεσ τθσ κάκε γραμμισ του πίνακα <tr> </tr>, ενϊ μζςα ςτθν ετικζτα τθσ κάκε γραμμισ του πίνακα δθλϊνουμε τισ ετικζτεσ των ςτοιχείων - κελιϊν τθσ κάκε γραμμισ. Τπάρχουν δφο ετικζτεσ ςτοιχείων: θ <td> </td> και θ <th> </th>.
Πίνακες το εςωτερικό των παραπάνω ετικετϊν δθλϊνονται τα δεδομζνα κάκε ςτοιχείου-κελιοφ του πίνακα. Η μόνθ διαφορά μεταξφ των δφο ετικετϊν είναι ότι τα δεδομζνα τθσ δεφτερθσ εμφανίηονται κεντραριςμζνα και με ζντονα γράμματα. Σα δεδομζνα ενόσ κελιοφ του πίνακα μπορεί να είναι οποιοδιποτε τμιμα κϊδικα τθσ HTML, π.χ. μία εικόνα ι ζνασ δεςμόσ υπερκειμζνου. Η HTML μασ παρζχει τθ δυνατότθτα να ορίςουμε το μζγεκοσ των περιγραμμάτων του πίνακα, χρθςιμοποιϊντασ το χαρακτθριςτικό border τθσ ετικζτασ του πίνακα. Π.χ. αν κζλουμε να δθμιουργιςουμε ζνα πίνακα με πάχοσ περιγράμματοσ 3 pixel γράφουμε: <table border=3> </table>.
Πίνακες Ζνα ςθμείο που πρζπει να προςεχτεί ιδιαίτερα είναι θ φπαρξθ κενών κελιών (π.χ. κελιϊν που δθλϊνονται ωσ <td></td>) ςτον πίνακα. Όλοι οι browsers δεν ςυμπεριφζρονται με τον ίδιο τρόπο ςτθν φπαρξθ κενϊν κελιϊν. Για τθν ςωςτι αναπαράςταςθ των πινάκων που ζχουν κενά κελιά, τα κενά κελιά πρζπει να δθλϊνονται κάνοντασ χριςθ του ειδικοφ χαρακτιρα non-breaking space ( ). Επομζνωσ, ο ςωςτόσ τρόποσ διλωςθσ των κενϊν κελιϊν είναι: <td> </td>.
Πίνακες το παρακάτω παράδειγμα δθμιουργοφμε ζναν πίνακα 3x4. Σα ςτοιχεία τθσ πρϊτθσ γραμμισ και τθσ πρϊτθσ ςτιλθσ του πίνακα δθλϊνονται με τθν ετικζτα <th> </th> για να τουσ δοκεί περιςςότερθ ζμφαςθ ςε ςχζςθ με τα υπόλοιπα ςτοιχεία του πίνακα.
Πίνακες <html> </html> <head> <title>τοιχεία απογραφισ 2001</title> </head> <body> <h1>τοιχεία απογραφισ 2001</h1> <table border=2> <tr> <!-- Πρϊτθ γραμμι --> <th> </th> <th>άνδρεσ</th> <th>γυναίκεσ</th> <th>φνολο</th> </tr> <tr> <!-- Δεφτερθ γραμμι --> <th>φνολο χϊρασ</th> <td>5.427.682</td> <td>5.536.338</td> <td>10.964.020</td> </tr> <tr> <!-- Σρίτθ γραμμι --> <th>ελλάδα</th> <td>4.951.833</td> <td>5.125.889</td> <td>10.077.722</td> </tr> </table> </body>
Πίνακες
Πίνακες Όπωσ αναφζρκθκε και ςτθν αρχι τθσ ενότθτασ, οι πίνακεσ μπορεί να χρθςιμοποιθκοφν και για τθ διαμόρφωςη τησ εμφάνιςησ των ιςτοςελίδων. Για να αναγκάςουμε τα περιεχόμενα μίασ ιςτοςελίδασ να ςτοιχιςτοφν με ζνα νοητό πλαίςιο δημιουργοφμε ζναν πίνακα με μηδενικό πάχοσ περιγράμματοσ: <table border=0> </table> και ςτθ ςυνζχεια δθλϊνουμε όλα τα ςτοιχεία του πίνακα. Όλεσ οι παράμετροι-χαρακτθριςτικά για τθν μορφοποίθςθ των πινάκων, που αναφζρκθκαν προθγουμζνωσ, μποροφν να χρθςιμοποιθκοφν και ςτθν περίπτωςθ των «αόρατων» πινάκων.
Πίνακες Για τθν ςτοίχιςθ του κειμζνου χρθςιμοποιείται το χαρακτθριςτικό align. Σο χαρακτθριςτικό αυτό εφαρμόηεται ςε όλεσ τισ ετικζτεσ που αναφζρκθκαν ςτθν ενότθτα αυτι. Σο περιεχόμενο των πινάκων μπορεί να ςτοιχιςτεί και ωσ προσ τον κατακόρυφο άξονα. Για το ςκοπό αυτό χρθςιμοποιείται το χαρακτθριςτικό valign, το οποίο παίρνει τιμζσ top, bottom και middle για τθ ςτοίχιςθ του κειμζνου ςτθν κορυφι, ςτο κάτω μζροσ ι ςτο μζςο του κελιοφ. Η HTML παρζχει τθ δυνατότθτα για ςυνδυαςμό των παραπάνω χαρακτθριςτικϊν για τθν καλφτερθ εμφάνιςθ των περιεχομζνων του πίνακα.
Πίνακες ε ζναν πίνακα μποροφμε να δϊςουμε τίτλο χρθςιμοποιϊντασ τθν ετικζτα <caption> </caption>. Η ετικζτα αυτι πρζπει να βρίςκεται μζςα ςτθν ετικζτα <table> </table> και μπορεί ςτο εςωτερικό τθσ να υπάρχει οποιοςδιποτε κϊδικασ HTML. Ο τίτλοσ εμφανίηεται κεντραριςμζνοσ ςτο πάνω μζροσ του πίνακα. Αν κζλουμε ο τίτλοσ να εμφανίηεται ςτο κάτω μζροσ του πίνακα μποροφμε να χρθςιμοποιιςουμε το χαρακτθριςτικό align τθσ ετικζτασ caption με τιμι bottom: <caption align= bottom > </caption>
Χρώμα Οι περιςςότεροι από τουσ ςφγχρονουσ browsers ζχουν τθ δυνατότθτα απεικόνιςθσ χρϊματοσ, τόςο για το κείμενο όςο και για το φόντο. Για τθν αναπαράςταςθ των χρωμάτων χρθςιμοποιείται θ RGB (Red Green Blue) κωδικοποίθςθ των χρωμάτων. τθν κωδικοποίθςθ αυτι δίνουμε τιμζσ από 0 ζωσ και 255 ςτα τρία βαςικά χρϊματα (κόκκινο πράςινο μπλε) για τθν αναπαράςταςθ τθσ ζνταςθσ του κάκε βαςικοφ χρϊματοσ ςτθν τελικι απόχρωςθ.
Χρώμα Αν χρθςιμοποιθκεί τιμι 0 ςε ζνα χρϊμα το χρϊμα αυτό δεν ςυμμετζχει ςτθν τελικι απόχρωςθ, ενϊ αν χρθςιμοποιθκεί τιμι 255 τότε ςυμμετζχει ςτο μζγιςτο βακμό. Όταν και τα τρία βαςικά χρϊματα ζχουν τθν τιμι 0 τότε παράγεται το μαφρο, ενϊ όταν και τα τρία ζχουν τθν τιμι 255 το λευκό. τθν HTML το κάκε χρϊμα αναπαριςτάται από τθν ακολουκία #xxxxxx όπου τα δφο πρϊτα xx αντιςτοιχοφν ςτθν τιμι του κόκκινου (ςτο δεκαεξαδικό ςφςτθμα αρίκμθςθσ). Αντίςτοιχα τα επόμενα ηεφγθ xx αντιςτοιχοφν ςτο πράςινο και ςτο μπλε.
Χρώμα Εκτόσ από τθν παραπάνω αναπαράςταςθ των χρωμάτων θ HTML περιζχει και ςυμβολικά ονόματα για κάποια βαςικά χρϊματα. Μερικά από αυτά φαίνονται ςτον παρακάτω πίνακα, με τα αντίςτοιχα ονόματά τουσ.
Χρώμα Για να αλλάξουμε το φόντο μίασ ςελίδασ χρθςιμοποιείται το χαρακτθριςτικό bgcolor τθσ ετικζτασ body. τθν ετικζτα body χρθςιμοποιοφνται και άλλα χαρακτθριςτικά για τον ζλεγχο των χρωμάτων τθσ ςελίδασ: για το χρϊμα του απλοφ κειμζνου το χαρακτθριςτικό text, για το χρϊμα των δεςμϊν υπερκειμζνου το link, ενϊ για τουσ δεςμοφσ υπερκειμζνου τουσ οποίουσ ζχουμε επιςκεφτεί το vlink. Όλα τα παραπάνω χαρακτθριςτικά δζχονται ωσ τιμι το ςυμβολικό όνομα ι τθν ακολουκία #xxxxx του αντίςτοιχου χρϊματοσ που κζλουμε να χρθςιμοποιιςουμε.
Χρώμα Μποροφμε να ζχουμε ωσ φόντο τθσ ιςτοςελίδασ κάποια εικόνα. Για το ςκοπό αυτό χρθςιμοποιείται το χαρακτθριςτικό background τθσ ετικζτασ body. Η τιμι του χαρακτθριςτικοφ αυτοφ δθλϊνεται με τον ίδιο τρόπο που δθλϊνεται και ςτισ εικόνεσ. Π.χ. αν κζλουμε θ ιςτοςελίδα να εμφανίηεται με φόντο το αρχείο bground.gif τότε πρζπει να δθλϊςουμε τθν ετικζτα body ωσ εξισ: <body background= bground.gif > </body>
Χρώμα ε περίπτωςθ που θ εικόνα ζχει μικρότερο μζγεκοσ από το παράκυρο του browser θ εικόνα του φόντου επαναλαμβάνεται τόςο κατά τον κατακόρυφο όςο και κατά τον οριηόντιο άξονα ϊςτε να καλφψει ολόκλθρθ τθν επιφάνεια του παρακφρου. Ιδιαίτερθ προςοχι πρζπει να δοκεί ςτο μζγεκοσ του αρχείου τθσ εικόνασ, ϊςτε να μθ κακυςτερεί υπερβολικά θ εμφάνιςθ τθσ ιςτοςελίδασ ςτον browser του χριςτθ, αλλά και ςτθν επιλογι τθσ ίδιασ τθσ εικόνασ.
Χρώμα Πολλζσ φορζσ μία λανκαςμζνθ επιλογι φόντου μπορεί να προκαλζςει προβλιματα ςτθν αναγνωςιμότθτα τθσ ιςτοςελίδασ. Η HTML υποςτθρίηει, επίςθσ, χρϊματα και ςτα κελιά των πινάκων, αλλά θ κάλυψθ του κζματοσ αυτοφ ξεπερνά τον ςκοπό των ςθμειϊςεων αυτϊν.