Στο τρίτο και τελευταίο κομμάτι της εισαγωγής στην γλώσσα προγραμματισμού HTML θα δούμε όλες τις υπόλοιπες ιδιότητες που δεν καλύψαμε στα προηγούμενα μέρη.
Τα Tags Φυσικών Στυλ
Τα tags φυσικών στυλ υποδεικνύουν επακριβώς τον τρόπο με τον οποίο θα μορφοποιηθεί το κείμενο, όπως έντονη γραφή, υπογράμμιση κ.ά. Κάθε tag μορφοποίησης (φυσικού στυλ) έχει ξεχωριστό μέλος αρχής και τέλους και επηρεάζει το κείμενο που βρίσκεται μέσα σ’ αυτά τα δύο μέλη. Τα tags φυσικών στυλ της HTML είναι τα εξής :
• <B>, έντονη γραφή (Bold).
• <I>, πλάγια γραφή (Italic).
• <U>, υπογράμμιση.
• <S>, διακριτή διαγραφή.
• <BIG>, μεγαλύτερο μέγεθος από το περιβάλλον κείμενο.
• <SMALL>, μικρότερο μέγεθος από το περιβάλλον κείμενο.
• <SUB>, δείκτης.
• <SUP>, εκθέτης.
Μπορούμε να δημιουργούμε ένθετα tags μορφοποίησης χαρακτήρων, για παράδειγμα μπορούμε να χρησιμοποιήσουμε τα tags έντονης και πλάγιας γραφής ταυτόχρονα, ως εξής :
<Β><Ι> Οι Νηρηίδες ήταν θεότητες της θάλασσας </Ι></Β>
Το Tag <HR>
Το tag <HR>, που δεν έχει αντίστοιχο tag τέλους και δεν χρησιμοποιεί κείμενο, δημιουργεί μια οριζόντια γραμμή (γραφικό) στη σελίδα. Οι γραμμές γραφικών είναι ιδανικές για τον οπτικό διαχωρισμό των ενοτήτων μιας Web σελίδας.
<HR> <H2> Οι Μοίρες ήταν οι εξής :</H2> <UL> <LI> Κλωθώ <LI> Λάχεση <LI> Άτροπος </UL> <HR>
Το tag <HR> έχει αρκετές ιδιότητες, με τις οποίες έχουμε μεγαλύτερο έλεγχο πάνω στη γραμμή που σχεδιάζουμε. Η ιδιότητα SIZE καθορίζει το πάχος σε pixels της γραμμής, με εξ ορισμού τιμή την 2. Η ιδιότητα WIDTH καθορίζει το πλάτος της γραμμής στην οριζόντια διεύθυνση και μπορούμε να καθορίσουμε είτε το ακριβές πλάτος σε pixels ή ένα ποσοστό του πλάτους της οθόνης.
Με την ιδιότητα ALIGN μπορούμε να στοιχίσουμε τη γραμμή αριστερά (ALIGN=LEFT), δεξιά (ALIGN=RIGHT) ή στο κέντρο (ALIGN=CENTER), που είναι και η εξ ορισμού επιλογή. Η ιδιότητα NOSHADE εμφανίζει τη γραμμή σαν απλή μαύρη γραμμή χωρίς σκίαση.
Το Tag <BR>
Το tag <BR> χωρίζει μια γραμμή κειμένου στο σημείο στο οποίο εμφανίζεται. Όταν ένας φυλλομετρητής συναντήσει ένα tag <BR>, ξεκινά το αμέσως επόμενο κείμενο από το αριστερό περιθώριο της επόμενης γραμμής. Το <BR> δεν προσθέτει επιπλέον χώρο πάνω ή κάτω από τη νέα γραμμή και δεν αλλάζει τη γραμματοσειρά ή το στυλ του κειμένου.
Εισαγωγή Εικόνας
Αφού αποκτήσουμε μια εικόνα σε μορφή GIF ή JPEG, μπορούμε να την συμπεριλάβουμε σε μια Web σελίδα. Οι ένθετες εικόνες υποδεικνύονται με το tag <IMG> (image), το οποίο δεν έχει tag τέλους, αλλά έχει πολλές ιδιότητες, με πιο σημαντική την SRC (source). Η ιδιότητα SRC δείχνει το όνομα αρχείου ή το URL της εικόνας που θέλουμε να συμπεριλάβουμε, γραμμένο μέσα σε εισαγωγικά.
Το όνομα διαδρομής του αρχείου χρησιμοποιεί τους ίδιους κανόνες για την αναγραφή ονομάτων διαδρομών (pathnames) που ισχύουν και στην ιδιότητα HREF του tag <A> στους συνδέσμους. Συνεπώς, για το αρχείο image.gif, που βρίσκεται στον ίδιο κατάλογο με το αρχείο της Web σελίδας, μπορούμε να χρησιμοποιήσουμε το ακόλουθο tag :
<P> <IMG SRC="image.gif"> </P>
ενώ αν ήταν αποθηκευμένο στον γονικό κατάλογο του τρέχοντα, το εξής :
<P> <IMG SRC="../image.gif"> </P>
Το tag <IMG> πρέπει να τοποθετείται μέσα σ’ ένα στοιχείο παραγράφου ή επικεφαλίδας.
Εικόνες – Σύνδεσμοι
Μια εικόνα μπορεί να αποτελέσει επίσης και σύνδεσμο υπερ-μέσου, δηλ. hypermedia, προς άλλες Web σελίδες ή δεσμούς μέσα στο τρέχον έγγραφο. Για να γίνει αυτό, συμπεριλαμβάνουμε ένα tag <IMG> ανάμεσα στα μέλη αρχής και τέλους του tag δημιουργίας συνδέσμων <A>.
Η εικόνα θα λειτουργεί σαν ένα “ενεργό σημείο” πάνω στο οποίο θα μπορούμε να κάνουμε κλικ για να ενεργοποιήσουμε τον σύνδεσμο, όπως στο παρακάτω παράδειγμα :
<A HREF="index.html"> <IMG SRC="uparrow.gif"> </A>
Αν συμπεριλάβουμε και κείμενο μαζί με την εικόνα στο tag συνδέσμου, τότε και η εικόνα και το κείμενο γίνονται “ενεργά σημεία”, τα οποία δείχνουν στην ίδια σελίδα, όπως στο παρακάτω παράδειγμα :
<A HREF="index.html"> <IMG SRC="uparrow.gif"> Στο index </A>
Αλλαγή Χρώματος Φόντου
Για να αλλάξουμε το χρώμα του φόντου μιας σελίδας, προσθέτουμε την ιδιότητα BGCOLOR στο tag <BODY>, ως εξής :
<BODY BGCOLOR="#FFFFFF"> <BODY BGCOLOR="#934CE8">
Για να ορίσουμε το χρώμα του φόντου μιας σελίδας χρησιμοποιώντας αριθμούς, γράφουμε τον 16δικό αριθμό μέσα σε εισαγωγικά, όπου κάθε δύο 16δικά ψηφία αντιστοιχούν σε μια δεκαδική τιμή από 0 έως 255.
Για να ορίσουμε το χρώμα του φόντου μιας σελίδας βάσει ονόματος, δίνουμε απλά το όνομα του χρώματος σαν τιμή στην ιδιότητα BGCOLOR, ως εξής :
<BODY BGCOLOR=red> <BODY BGCOLOR=yellow>
Αλλαγή Χρώματος Κειμένου
Για να αλλάξουμε το χρώμα του κειμένου και των συνδέσμων σε μια σελίδα, μπορούμε να προσθέσουμε κάποια από τις παρακάτω ιδιότητες στο tag <BODY>. Οι ιδιότητες αυτές μπορούν να έχουν σαν τιμή έναν αριθμό ή ένα όνομα χρώματος.
• TEXT, ελέγχει το χρώμα όλου του κυρίως κειμένου της σελίδας, εκτός των συνδέσμων.
• LINK, ελέγχει το χρώμα των συνδέσμων της σελίδας που δεν έχουμε ακόμη επισκεφθεί, που είναι εξ ορισμού συνήθως μπλε.
• VLINK, ελέγχει το χρώμα των συνδέσμων που έχουμε επισκεφθεί, που είναι εξ ορισμού συνήθως κόκκινο ή μοβ.
• ALINK, ελέγχει το χρώμα του συνδέσμου πάνω στον οποίο έχουμε κάνει κλικ χωρίς να αφήσουμε το πλήκτρο του ποντικιού, που είναι εξ ορισμού συνήθως κόκκινο.
Για παράδειγμα, για να δημιουργήσουμε μια σελίδα με μαύρο φόντο, λευκό κείμενο και φωτεινούς μοβ τους μη επιλεγμένους συνδέσμους, θα μπορούσαμε να χρησιμοποιήσουμε μία από τις παρακάτω εντολές :
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9805FF"> <BODY BGCOLOR=black TEXT=white LINK=purple>
Το Tag <BGSOUND>
Ο Internet Explorer πρόσθεσε και ένα tag για την αναπαραγωγή ένθετων αρχείων ήχου. Αυτά τα αρχεία φορτώνονται αυτόματα με το φόρτωμα της σελίδας, δεν παράγουν κανένα ορατό αποτέλεσμα και για να προσθέσουμε έναν ένθετο ήχο παρασκηνίου σε μια Web σελίδα, χρησιμοποιούμε το tag <BGSOUND> με την ιδιότητα SRC, ως εξής :
<BGSOUND SRC="mozart.au">
Με την ιδιότητα LOOP μπορούμε να επαναλάβουμε τον ήχο πολλές φορές και αν η τιμή της LOOP είναι το -1 ή INFINITE, ο ήχος θα επαναλαμβάνεται διαρκώς μέχρι να φύγουμε από τη σελίδα.
Το πρόγραμμα Internet Explorer υποστηρίζει τρεις διαφορετικές μορφές αρχείων για ένθετους ήχους, τη μορφή AU (μ-law) της εταιρείας Sun, τα αρχεία μορφής WAV των Windows καθώς και τα αρχεία MIDI (.mid).
Κινούμενο Κείμενο (Marquee)
Με τον όρο κινούμενο κείμενο ή marquee ονομάζουμε μια γραμμή κειμένου που ολισθαίνει και μετακινείται από τη μια πλευρά μιας Web σελίδας μέχρι την άλλη. Το κινούμενο κείμενο είναι ένα χαρακτηριστικό του Internet Explorer που δεν υποστηρίζεται από άλλους φυλλομετρητές, οι οποίοι μπορούν να εμφανίζουν το κείμενο, αλλά δεν υποστηρίζουν την κίνησή του.
Για να δημιουργήσουμε κινούμενο κείμενο, χρησιμοποιούμε το tag <MARQUEE> και το κείμενο που περιλαμβάνεται μεταξύ των tags αρχής και τέλους είναι αυτό που θα μετακινείται στην οθόνη :
<MARQUEE> Επισκεφθείτε το Νυμφαίο </MARQUEE>
Μια φράση κινούμενου κειμένου εμφανίζεται σε δική της γραμμή, με το μέγεθος και τη γραμματοσειρά του στοιχείου της σελίδας στο οποίο ανήκει. Το κείμενο ολισθαίνει από τα δεξιά προς τα αριστερά και εξαφανίζεται τελείως πριν επανεμφανιστεί από τα δεξιά και πάλι. Αυτή η ανακύκλωση γίνεται συνέχεια και με αργό ρυθμό.
Στοίχιση Κειμένου
Για να στοιχίσουμε μια μεμονωμένη επικεφαλίδα ή παράγραφο κειμένου, χρησιμοποιούμε την ιδιότητα ALIGN γι’ αυτό το HTML στοιχείο, που μπορεί να πάρει μια από τις εξής τρεις τιμές : LEFT, RIGHT ή CENTER. Ακολουθεί ένα παράδειγμα :
<H1 ALIGN=CENTER> Πληροφορίες για τη Φλώρινα </H1> <P ALIGN=LEFT> Ο Νομός με τις Έξι Λίμνες </P> <H2 ALIGN=RIGHT> <A HREF="www.line.gr/hotels.html"> Πού θα Μείνετε </A><H2> <H2 ALIGN=RIGHT> <A HREF="www.line.gr/resorts.html"> Πού θα Πάτε </A><H2> <H2 ALIGN=RIGHT> <A HREF="www.line.gr/sights.html"> Τι θα Δείτε </A><H2>
Το Tag <DIV>
Μια πιο ευέλικτη μέθοδος για τη στοίχιση κειμένου είναι η χρήση του tag <DIV> (division), που περιλαμβάνει κι αυτό την ιδιότητα ALIGN. Αλλά, αντί να στοιχίζει μεμονωμένα στοιχεία, το tag <DIV> χρησιμοποιείται για να περικλείσει μια ολόκληρη ομάδα από οποιαδήποτε άλλα tags της HTML και επηρεάζει όλα τα tags και το κείμενο που βρίσκεται μέσα στο ζευγάρι των tags <DIV> και </DIV>.
Για να στοιχίσουμε ένα τμήμα κώδικα HTML, περικλείουμε αυτόν τον κώδικα μέσα στα μέλη αρχής και τέλους του tag <DIV> και γράφουμε την ιδιότητα ALIGN στο tag αρχής, που μπορεί να έχει τις τιμές LEFT, RIGHT ή CENTER. Ακολουθεί ένα παράδειγμα :
<H1 ALIGN=CENTER> Πληροφορίες για τη Φλώρινα </H1> <P ALIGN=LEFT> Ο Νομός με τις Έξι Λίμνες </P> <DIV ALIGN=RIGHT> <H2><A HREF="line.gr/hotels.html"> Πού θα Μείνετε </A><H2> <H2><A HREF="line.gr/resorts.html"> Πού θα Πάτε </A><H2> <H2><A HREF="line.gr/sights.html"> Τι θα Δείτε </A><H2> </DIV>
Όλος ο κώδικας HTML μεταξύ των δύο tags <DIV> θα στοιχιστεί σύμφωνα με την τιμή της ιδιότητας ALIGN, ενώ αν υπάρχουν ξεχωριστές ιδιότητες ALIGN στις επικεφαλίδες ή στις παραγράφους μέσα στο ζευγάρι των tags <DIV>, οι τιμές αυτές υπερισχύουν έναντι της γενικής ρύθμισης.
Το Tag <CENTER>
Εκτός από το tag <DIV>, μπορούμε να χρησιμοποιήσουμε και το tag κεντραρίσματος <CENTER>, που είναι μια συντομευμένη έκδοση του tag <DIV ALIGN=CENTER> και λειτουργεί όπως κι αυτό, κεντράροντας όλο το περιεχόμενο της HTML που βρίσκεται μέσα στα μέλη αρχής και τέλους.
Τοποθετούμε το tag <CENTER> πριν από το κείμενο που θέλουμε να κεντράρουμε και το tag </CENTER> μετά το τέλος του κειμένου, ως εξής :
<CENTER> <H1> Ο Μάντης Τειρεσίας </H1> <H1> Ο Μάντης Κάλχας </H1> </CENTER>
Trackbacks - Pingbacks