ΕΦΑΡΜΟΓΖσ ΒΆΕΩΝ ΔΕΔΟΜΖΝΩΝ ΚΑΙ ΔΙΑΔΙΚΣΥΟΤ Ειρινθ Φιλιοποφλου
Ετικέτεσ ςτυλ Εκτόσ από τισ παραγράφουσ και τισ επικεφαλίδεσ, όταν κζλουμε να δϊςουμε ζμφαςθ ςε κάποιο κείμενο μποροφμε να χρθςιμοποιιςουμε και τισ ετικζτεσ ςτυλ τθσ HTML. Οι πιο βαςικζσ είναι οι <b> </b>, που κάνει το κείμενο να εμφανίηεται με ζντονθ γραφι, θ <i> </i> που κάνει το κείμενο να εμφανίηεται με πλάγια γραφι, και θ <tt> </tt> που κάνει το κείμενο να εμφανίηεται ςαν κείμενο γραφομθχανισ.
Ετικέτεσ ςτυλ <html> <head> <title> Ετικζτεσ ςτυλ </title> </head> <body> τθν HTML μπορεί το κείμενο να εμφανίηεται ςε <b> ζντονθ </b> γραφι, ςε <i> πλάγια </i> γραφι, ωσ <tt> κείμενο γραφομθχανισ, </tt> αλλά και ςε διάφορουσ ςυνδυαςμοφσ, όπωσ <b> <i> ζντονο και πλάγιο </i> </b> ταυτόχρονα. </body> </html>
Ετικέτεσ ςτυλ
Ετικέτεσ ςτυλ Όπωσ φαίνεται και από το παραπάνω παράδειγμα οι ετικζτεσ ςτθν HTML μπορεί να είναι ζνκετεσ, δθλαδι να βρίςκονται μζςα ςε άλλεσ ετικζτεσ. αν παράδειγμα μποροφμε να αναφζρουμε τθν <body>...</body> εντόσ τθσ <html> <html> και τθν <title> </title> εντόσ τθσ <head> </head>. Ιδιαίτερθ προςοχι πρζπει να δοκεί ςτθ ςειρά των ετικετϊν τερματιςμοφ, θ οποία πρζπει να είναι θ αντίςτροφθ τθσ ςειράσ διλωςθσ, π.χ. <head> <title> </title> </head>.
Λίςτεσ Η HTML παρζχει επίςθσ και διάφορεσ μορφζσ λιςτϊν, για τθν κατάταξθ των αντικειμζνων. Η μθ αρικμθμζνθ λίςτα (unordered list) δθλώνεται με τθν ετικζτα <ul> </ul>, ενώ κάκε ςτοιχείο τθσ πρζπει να περικλείεται μζςα ςε μία ετικζτα <li> </li>. Κάκε ςτοιχείο τθσ εμφανίηεται με μία βοφλα (ι με κάποιο άλλο κοινό ςφμβολο) μπροςτά του. Στισ αρικμθμζνεσ λίςτεσ (ordered lists) εμφανίηεται ζνασ αρικμόσ μπροςτά από κάκε ςτοιχείο τθσ λίςτασ. Η μόνθ διαφορά ςτθ δθμιουργία τουσ, ςε ςχζςθ με τισ μθ αρικμθμζνεσ λίςτεσ, είναι ότι χρθςιμοποιείται θ ετικζτα <οl> </οl> αντί τθσ <ul> </ul>.
Λίςτεσ Οι λίςτεσ μποροφν να είναι ζνκετεσ, δθλαδι μία λίςτα μπορεί να περιζχεται εντόσ κάποιασ άλλθσ. ε περίπτωςθ που ζχουμε ζνκετεσ λίςτεσ του ίδιου τφπου, το διακριτικό μπροςτά από κάκε λίςτα αλλάηει, ϊςτε να μπορεί να γίνεται διάκριςθ ανάμεςα ςτα ςτοιχεία τθσ κάκε λίςτασ. το παράδειγμα που ακολουκεί χρθςιμοποιοφμε μία αρικμθμζνθ λίςτα για τισ ενότθτεσ του κεφαλαίου και μία μθ αρικμθμζνθ λίςτα για τισ παραγράφουσ τθσ κάκε ενότθτασ. Η μθ αρικμθμζνθ λίςτα είναι ζνκετθ εντόσ τθσ αρικμθμζνθσ λίςτασ.
Λίςτεσ <html> <head> <title> Πίνακασ Περιεχομζνων </title> </head> <body> <h2>κεφάλαιο 1: Σα βαςικά τθσ HTML</h2> <ol> <li>ετικζτεσ (tags)</li> <li>δομι ενόσ εγγράφου HTML</li> <li>επικεφαλίδεσ</li> <li>διαχωριςτικά</li> <ul> <li>παράγραφοι</li> <li>οριηόντιεσ γραμμζσ</li> <li>αλλαγι γραμμισ</li> </ul> <li>ετικζτεσ ςτυλ</li> </ol> </body> </html>
Λίςτεσ
Λίςτεσ Εκτόσ από τισ αρικμθμζνεσ και τισ μθ αρικμθμζνεσ λίςτεσ, θ HTML διακζτει και μία τρίτθ κατθγορία λιςτϊν, τισ λίςτεσ οριςμών (definition lists), οι οποίεσ επιτρζπουν τθν δθμιουργία επεξθγιςεων για διάφορουσ οριςμοφσ. Στισ λίςτεσ αυτζσ δεν εμφανίηεται κάποιο διακριτικό ςθμάδι, αλλά αντίκετα θ επεξιγθςθ του κάκε οριςμοφ εμφανίηεται πιο μζςα από το υπόλοιπο κείμενο. Η λίςτα οριςμών δθλώνεται με τθν ετικζτα <dl> </dl>, και περιζχει ηεφγθ οριςμοφ τίτλων, μζςω τθσ ετικζτασ <dt> </dt>, και αντίςτοιχθσ επεξιγθςθσ, μζςω τθσ ετικζτασ <dd> </dd>. το παρακάτω παράδειγμα δθμιουργοφμε μία λίςτα οριςμϊν για τρία ακρϊνυμα ςχετικά με τισ ιςτοςελίδεσ: HTML, WWW και HTTP.
Λίςτεσ <html> <head> <title> Λίςτα Οριςμϊν </title> </head> <body> <dl> <dt>www</dt> <dd>world Wide Web</dd> <dt>http</dt> <dd>hypertext Transfer Protocol</dd> <dt>html</dt> <dd>hypertext Markup Language</dd> </dl> </body> </html>
Λίςτεσ
Εικόνεσ Ο browser (ςυνικωσ) ζχει τθ δυνατότθτα εμφάνιςθσ εικόνων και γραφικϊν. Σο μόνο που πρζπει να δθλϊνεται ςτθν ιςτοςελίδα είναι θ τοποκεςία ςτθν οποία βρίςκεται θ προσ εμφάνιςθ εικόνα. Ιδιαίτερθ προςοχι πρζπει να δοκεί ςτον τφπο τθσ εικόνασ (ο οποίοσ δθλϊνεται και από τθν κατάλθξθ του αρχείου τθσ εικόνασ). Ο ςτάνταρ τφποσ που μπορεί να εμφανίςει ο browser είναι ο GIF (Graphics Interchange Format), αλλά οι περιςςότεροι browser υποςτθρίηουν και τον τφπο JPEG (Joint Photographic Expert Group).
Εικόνεσ Όταν γίνεται χριςθ εικόνων ςε ιςτοςελίδεσ πρζπει να δίνεται ιδιαίτερθ προςοχι ςτο ςυνολικό μζγεκοσ των αρχείων εικόνων που βρίςκονται ςε μία ιςτοςελίδα. Όςο μεγαλφτερο μζγεκοσ ζχουν οι εικόνεσ και όςο πιο πολλά χρϊματα περιζχουν τόςο αυξάνεται το μζγεκοσ του αρχείου τουσ. Αυτό ζχει ωσ αποτζλεςμα μία ςελίδα που περιζχει πολλζσ εικόνεσ να αργεί να φορτωκεί ςτον browser, με αποτζλεςμα οι χριςτεσ να περιμζνουν μεγάλο χρονικό διάςτθμα μζχρι να κατζβει θ ιςτοςελίδα. Μία καλι τεχνικι είναι θ ενςωμάτωςθ δεςμϊν υπερκειμζνου προσ τισ εικόνεσ. Η ςελίδα απλά μπορεί να περιζχει τθν εικόνα ςε αρκετά μικρότερο μζγεκοσ - ςε μικρογραφία (thumbnail).
Εικόνεσ Για τθν ενςωμάτωςθ μίασ εικόνασ ςε μία ιςτοςελίδα χρθςιμοποιείται θ ετικζτα <img src=όνομα αρχείου εικόνασ>. τθν ετικζτα αυτι δθλϊνουμε το όνομα του αρχείου τθσ εικόνασ, αλλά μποροφμε να δθλϊςουμε και άλλα χαρακτθριςτικά, όπωσ το φψοσ και το πλάτοσ τθσ. Π.χ. για τθν ενςωμάτωςθ του αρχείου contents.gif, χρθςιμοποιοφμε τον ακόλουκο κϊδικα: <img src= contents.gif>.
Εικόνεσ τθν HTML κάκε ετικζτα μπορεί να ζχει διάφορα χαρακτηριςτικά (attributes). Σα χαρακτθριςτικά αυτά περιγράφουν με μεγαλφτερθ ακρίβεια τον τρόπο με τον οποίο κα εμφανιςτεί το αντίςτοιχο κομμάτι τθσ ιςτοςελίδασ ςτον browser. Σο χαρακτθριςτικό src τθσ ετικζτασ <img> είναι ζνα παράδειγμα για τον τρόπο διλωςθσ των χαρακτθριςτικϊν: τα χαρακτθριςτικά κάκε ετικζτασ βρίςκονται εντόσ των < και > τθσ αρχικισ διλωςθσ τθσ ετικζτασ (και όχι τθσ ετικζτασ τερματιςμοφ), πρζπει να διαχωρίηονται από το όνομα τισ ετικζτασ αλλά και από τα άλλα χαρακτθριςτικά που τυχόν υπάρχουν ςτθν ίδια ετικζτα, και είναι τθσ μορφισ: όνομα_χαρακτηριςτικοφ=τιμή_χαρακτηριςτικοφ.
Εικόνεσ Ζνα από τα ςθμαντικότερα χαρακτθριςτικά τθσ ετικζτασ <img> είναι το alt. Με το χαρακτθριςτικό αυτό δθλϊνεται το κείμενο που κα εμφανιςτεί ςτθ κζςθ τθσ εικόνασ ςε browsers που δεν υποςτθρίηουν γραφικά. το προθγοφμενο παράδειγμα, αν κζλουμε να εμφανίηεται το κείμενο «Περιεχόμενα» ςε περίπτωςθ που ο browser δεν υποςτθρίηει γραφικά, τότε προςκζτουμε το χαρακτθριςτικό alt: <img src= contents.gif alt= Περιεχόμενα >.
Εικόνεσ Σζλοσ, δφο άλλα χαρακτθριςτικά τθσ ετικζτασ <img> που χρθςιμοποιοφνται ςυχνά είναι τα height και width, με τα οποία δθλϊνεται αντίςτοιχα το φψοσ και το πλάτοσ τθσ εμφανιηόμενθσ εικόνασ. Π.χ. αν κζλουμε ςτο προθγοφμενο παράδειγμα θ εικόνα να εμφανίηεται με φψοσ 40 pixels και πλάτοσ 100 pixels γράφουμε: <img src= contents.gif height=40 width=100 alt= Περιεχόμενα >.
Δεςμοί υπερκειμζνου Η πραγματικι δφναμθ τθσ HTML είναι θ δυνατότθτα δθμιουργίασ δεςμών υπερκειμζνου (hypertext links) προσ άλλα ζγγραφα (όπωσ ιςτοςελίδεσ, γραφικά, βίντεο και animation). Ο χριςτθσ, με ζνα απλό κλικ του ποντικιοφ, μπορεί να μεταβεί ςε οποιαδιποτε τοποκεςία του Διαδικτφου. Ο Παγκόςμιοσ Ιςτόσ (World Wide Web) χρθςιμοποιεί ζνα ςχιμα διευκφνςεων που είναι γνωςτό ωσ URL (Uniform Address Locator). Όταν χρθςιμοποιείται browser με γραφικό περιβάλλον, οι δεςμοί υπερκειμζνου, ςυνικωσ, εμφανίηονται υπογραμμιςμζνοι και με μπλε χρϊμα, π.χ. Σεχνολογικό Εκπαιδευτικό Ίδρυμα Κριτθσ. ε περίπτωςθ που ζχουμε επιςκεφτεί ιδθ τον δεςμό υπερκειμζνου, τότε το χρϊμα του αλλάηει.
Δεςμοί ςε τοπικά αρχεία Με τον όρο δεςμοί ςε τοπικά αρχεία εννοοφμε δεςμοφσ υπερκειμζνου προσ αρχεία που βρίςκονται ςτο ίδιο μθχάνθμα με αυτό τθσ ιςτοςελίδασ που περιζχει το δεςμό υπερκειμζνου. Ο απλοφςτεροσ δεςμόσ ςε τοπικά αρχεία είναι ο δεςμόσ προσ ζνα άλλο αρχείο HTML που βρίςκεται ςτον ίδιο υποκατάλογο. Για το δεςμό αυτό χρθςιμοποιείται θ ετικζτα <a href=όνομα αρχείου>κείμενο δεςμοφσ</a>. Π.χ. Αν κζλουμε να δθμιουργιςουμε ςτθν ςελίδα μασ ζνα δεςμό προσ τθν ιςτοςελίδα contents.htm με κείμενο δεςμοφ «Περιεχόμενα» τότε γράφουμε: <a href= contents.htm >Περιεχόμενα</a>.
Δεςμοί ςε τοπικά αρχεία το κείμενο δεςμοφ μποροφμε να χρθςιμοποιιςουμε ετικζτεσ μορφοποίθςθσ, ακόμθ και εικόνεσ. το προθγοφμενο παράδειγμα αν κζλουμε να χρθςιμοποιιςουμε τθν εικόνα contents.gif για να δθλϊςουμε το δεςμό υπερκειμζνου τότε γράφουμε: <a href= contents.htm > <img src= contents.gif alt= Περιεχόμενα > </img></a> Για να δθμιουργιςουμε δεςμοφσ προσ αρχεία ςε άλλουσ υποκαταλόγουσ πρζπει εκτόσ από το όνομα του αρχείου να δθλϊςουμε και τον κατάλογο ςτον οποίο βρίςκεται.
Δεςμοί ςε τοπικά αρχεία Αν βρίςκεται ςε υποκατάλογο που περιζχεται ςτον κατάλογο τθσ ιςτοςελίδασ, τότε αρκεί να δθλϊςουμε το όνομα του υποκαταλόγου, να χρθςιμοποιιςουμε το ςφμβολο / και ςτθ ςυνζχεια να δθλϊςουμε το όνομα του αρχείου. Π.χ. αν κζλουμε να δθμιουργιςουμε ςτθ ςελίδα main.htm ζνα δεςμό υπερκειμζνου προσ το αρχείο lesson1.htm, το οποίο περιζχεται ςτο κατάλογο περιζχεται ςτον κατάλογο lessons, τότε γράφουμε: <a href= lessons/lesson1.htm >Μάκθμα 1</a>.
Δεςμοί ςε τοπικά αρχεία ε περίπτωςθ που κζλουμε να χρθςιμοποιιςουμε δεςμό προσ ςελίδα ανϊτερου επιπζδου (π.χ. ςτο τελευταίο παράδειγμα από τθ ςελίδα lesson1.htm προσ τθ ςελίδα main.htm) τότε πρζπει να χρθςιμοποιιςουμε τθν ακολουκία «.../», για κάκε ζνα επίπεδο τθσ ιεραρχίασ των καταλόγων. Π.χ. <a href=../main.htm >Κεντρικι ςελίδα</a>.
Δεςμοί ςε τοπικά αρχεία Σα «/» και «../» μπορεί να χρθςιμοποιθκοφν περιςςότερεσ από μία φορζσ ςε μία ηεφξθ και μπορεί να εμφανίηονται με οποιαδιποτε ςειρά. Π.χ. αν ζνασ κατάλογοσ περιζχει τουσ υποκαταλόγουσ lessons και presentations, και κζλουμε να δθμιουργιςουμε μία ηεφξθ υπερκειμζνου από το αρχείο lesson1.htm του υποκαταλόγου lessons προσ το αρχείο present1.ppt του υποκαταλόγου presentations, τότε θ ηεφξθ υπερκειμζνου δθλϊνεται ωσ: <a href=../presentations/present1.ppt >Παρουςίαςθ μακιματοσ 1</a>.