Βασικά στοιχεία της HTML > Πλαίσια

Σύνδεση σε πλαίσιο, Γραμμές κύλισης, Αλλαγή μεγέθους πλαισίων από το χρήστη, Αλλαγή περιγραμμάτων στα πλαίσια, Ένθετο πλαίσιο

Τα πλαίσια είναι χρήσιμα όταν θέλουμε να χωρίσουμε την ιστοσελίδα μας σε τμήματα όπου το καθένα να εμφανίζει διαφορετική σελίδα. Επίσης, μ' αυτό τον τρόπο, μπορούμε να κρατούμε πληροφορίες μόνιμα στην οθόνη μας (για παράδειγμα ένα πίνακα περιεχομένων της ιστοσελίδας μας). Για τη δημιουργία πλαισίων δημιουργούμε μια ιστοσελίδα ( χωρίς να συμπεριλάβουμε τον κωδικό <BODY>), όπου ορίζουμε τα πλαίσια που επιθυμούμε με τη χρήση των κωδικών <FRAMESET> και </FRAMESET>. Ως όρισμα του <FRAMESET> βάζουμε τις στείλες ή τις γραμμές που θέλουμε να χωρίσουμε την ιστοσελίδα μας προσδιορίζοντας το μέγεθός τους σε εικονοστοιχεία ή σε ποσοστό του παραθύρου: π.χ.:

<FRAMESET ROWS="50,150,*">

Η εντολή αυτή χωρίζει το παράθυρό μας σε τρία οριζόντια πλαίσια με μέγεθος 50, 150 εικονοστοιχεία τα δύο πρώτα, ενώ το τρίτο είναι όλο το υπόλοιπο παράθυρο (αυτή είναι η έννοια του αστερίσκου). Επόμενη κίνηση είναι ο καθορισμός των αρχείων που θα ανοίγουν σε κάθε πλαίσιο. Αυτό επιτυγχάνεται με την εντολή:

<FRAME NAME="intro" SRC="introduction.html">
<FRAME NAME="cont" SRC="Tables_of_contents.html">
.............................................

Με το όρισμα NAME δίνουμε ένα όνομα στο συγκεκριμένο πλαίσιο για να μπορούμε να "κατευθύνουμε" συνδέσεις σ' αυτό το πλαίσιο, ενώ με το SRC καθορίζουμε το συγκεκριμένο αρχείο που θα περιέχει αρχικά το πλαίσιο.

Μπορούμε να επιτύχουμε αρκετά περίπλοκες διατάξεις με συνδυασμό πλαισίων. Για παράδειγμα, ο κώδικας για τη βασική σελίδα αυτών των σημειώσεων είναι:

<FRAMESET ROWS="20%,*">
<FRAME NAME="UPPER" SRC="title.html">
<FRAMESET COLS="25%,*">
<FRAME NAME="FRAME1" SRC="contents.html">
<FRAME NAME="FRAME2" SRC="pyrforos.html">
</FRAMESET>
</FRAMESET>

Σύνδεση σε πλαίσιο
Αν σε ένα αρχείο html που βρίσκεται σε κάποιο πλαίσιο δημιουργήσουμε μια σύνδεση με το γνωστό τρόπο (<A HREF="...">......<A>), η σύνδεση θα ανοίξει στο ίδιο πλαίσιο. Αν όμως χρησιμοποιήσουμε ως όρισμα το TARGET="όνομα πλαισίου" η σύνδεση θα ανοίξη στο πλαίσιο με το καθορισμένο όνομα. Παραμένοντας στο παράδειγμα της βασικής σελίδας των σημειώσεων αυτών, στο αρχείο CONTENTS.html οι συνδέσεις καθοδηγούνται στο πλαίσιο με το όνομα FRAME2:

<UL>
<LI><A HREF="HTML.html" TARGET="FRAME2"> Βασικά στοιχεία της HTML </A>
<HR WIDTH=100%>
<LI><A HREF="browser.html" TARGET="FRAME2"> Χρήση του Netscape Composer </A>
<HR WIDTH=100%>
<LI><A HREF="code.html" TARGET="FRAME2"> Επέμβαση στον πηγαίο κώδικα</A>
<HR WIDTH=100%>
<LI><A HREF="pages.html" TARGET="FRAME2"> Ιστοσελίδες στο διαδίκτυο</A>
<HR WIDTH=100%>
<LI><A HREF="homeworks.html" TARGET="FRAME2"> Εργασίες </a>
</UL>

Γραμμές κύλισης
Οι γραμμές κύλισης εμφανίζονται αυτόματα σε ένα πλαίσιο όταν το κείμενο δεν χωρά στο πλαίσιο. Αν δεν θέλετε να εμφανίζονται οι γραμμές κύλισης τότε στον κωδικό FRAME μπορείτε να βάλετε το όρισμα scrolling="no". Σημειώστε ότι με τη χρήση αυτού του ορίσματος οι γραμμές κύλισης δεν εμφανίζονται ακόμα και αν δεν χωρούν όλες οι πληροφορίες στο συγκεκριμένο πλαίσιο.

Αλλαγή μεγέθους πλαισίων από το χρήστη
Χρησιμοποιώντας το ποντίκι, μπορεί ο χρήστης να αλλάξει το μέγεθος των πλαισίων σύροντας τις διαχωριστικές γραμμές. Μπορείτε όμως να εμοδίσετε αυτή την αλλαγή (αν δε θέλετε να αλλάζει η διάταξη της σελίδας σας), με τη χρήση του ορίσματος NORESIZE στον κωδικό FRAME. Σημειώστε ότι αν χρησιμοποιείσετε το όρισμα NORESIZE σε κάποιο κωδικό FRAME, ο χρήστης δεν μπορεί να αλλάξει το μέγεθος των πλαισίων που μοιράζονται διαχωριστικές γραμμές με το συγκεκριμένο.

Αλλαγή περιγραμμάτων στα πλαίσια
Η αλλαγή αυτή μπορεί να γίνει με ορίσματα στον κωδικό FRAMESET. Ο κωδικός BORDER="..." καθορίζει το πάχος των περιγραμμάτων σε pixels, ενώ το όρισμα BORDERCOLOR="..." καθορίζει το χρώμα τους. Πλήρης απόκρυψη των περιγραμμάτων επιτυγχάνεται με τον κωδικό FRAMEBORDER="0"

Αλλαγή περιθωρίων στα πλαίσια
Τα περιθώρια καθορίζουν το κενό χώρο ανάμεσα στο περίγραμμα και το περιεχόμενο του πλαισίου. Ελέγχονται από τα ορίσματα MARGINWIDTH="..." και MARGINHEIGHT="..." του κωδικού FRAME.

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

<IFRAME SRC="..." NAME="..." WIDTH="..." HEIGHT="..."></IFRAME>

όπου το όρισμα SRC δίνει το όνομα του αρχείου που θα εμφανίζεται αρχικά στο ένθετο πλαίσιο, NAME καθορίζει το όνομα του πλαισίου, ενώ WIDTH και HEIGHT καθορίζουν (σε pixels) το πλάτος και το ύψος του ένθετου πλαισίου. Σημειώνουμε ότι ο χρήστης δεν μπορεί να αλλάξει το μέγεθος ενός τέτοιου πλαισίου. 'Αλλα χρήσιμα ορίσματα ενός ένθετου πλαισίου είναι: ALIGN (με τιμές LEFT ή RIGHT) που επιτρέπουν στο κείμενο να αναδιπλώνεται γύρω από το ένθετο πλαίσιο, MARGINWIDTH και MARGINHEIGHT για τα περιθώρια καθώς και SCROLLING (με τιμές YES ή NO) για τις γραμμές κύλισης. Για το διπλανό ένθετο πλαίσιο χρησιμοποιήθηκε η εντολή:

<IFRAME SRC="iframe_lec.html" NAME="iframe_lec" WIDTH="300" HEIGHT="100" ALIGN="left"> </IFRAME>
όπου το αρχείο iframe_lec.html περιέχει το κείμενο που εμφανίζεται στο ένθετο πλαίσιο. Αν θέλω να παρουσιάσω ένα άλλο αρχείο μέσα στο πλαίσιο αυτό, απλά στην εντολή της σύνδεσης ορίζω ως TARGET το όνομα του πλαισίου. Για παράδειγμα: κάνοντας κλικ ΕΔΩ, με την εντολή:
<a href="iframe_lec2.html" target="iframe_lec">ΕΔΩ</a>
"στέλνω" το αρχείο iframe_lec2.html στο ένθετο πλαίσιο, ενώ κάνοντας κλικ ΕΔΩ-ΕΠΙΣΤΡΟΦΗ επανέρχομαι στο αρχικό αρχείο iframe_lec.html.

Μερικά ακόμα χρήσιμα στοιχεία για τα πλαίσια είναι:
1. Ο χρήστης έχει τη δυνατότητα να απενεργοποιήσει την εμφάνιση πλαισίων (ή ακόμα, μερικοί αναγνώστες ιστοσελίδων δεν εμφανίζουν πλαίσια). Σ' αυτή την περίπτωση, μπορείτε να χρησιμοποιήσετε τον κωδικό <NOFRAMES> και </NOFRAMES> ακριβώς πριν το τελευταίο </FRAMESET>. Ανάμεσα στους δύο κωδικούς μπορείτε να βάλετε εναλλακτικές πληροφορίες για την περίπτωση μη εμφάνισης των πλαισίων. Σημειώνεται ότι οι πληροφορίες αυτές δεν εμφανίζονται αν ο αναγνώστης ιστοσελίδων αναγνωρίζει πλαίσια.
2. Η τιμή του ορίσματος TARGET μπορεί να είναι _BLANK, οπότε η σύνδεση ανοίγει σε νέο παράθυρο, χωρίς όνομα, του αναγνώστη ιστοσελίδων. Αν η τιμή είναι _TOP, τότε ανοίγει τη σύνδεση στο τρέχον παράθυρο καταργώντας τα πλαίσια.
3. Αν όλες, ή οι περισσότερες συνδέσης μιας ιστοσελίδας σας οδηγούνται στο ίδιο πλαίσιο, μπορείτε να χρησιμοποιήσετε τον κωδικό <BASE TARGET="...">, ο οποίος μπαίνει μέσα στην περιοχή που ορίζεται από τους κωδικούς <HEAD> και </HEAD>. Αν κάποια συγκεκριμένη σύνδεση καθορίζει άλλο πλαίσιο ως TARGET, αυτή η εντολή θα επικαλύψει τη αντίστοιχη γενική μέσω της BASE.

'Aσκηση 6: Πληκτρολογήστε τον κώδικα HTML ώστε να εμφανίζονται στον αναγνώστη ιστοσελίδων δύο πλαίσια ως εξής:

Κάτω από τις επικεφαλίδες "ΚΟΥΑΡΚ" και "ΛΕΠΤΟΝΙΑ" υπάρχουν συνδέσεις. Επιλογή, για παράδειγμα, της "3ης γενιάς" στα ΚΟΥΑΡΚ, θα εμφανίζεται η πληροφορία στο δεξί πλαίσιο:

Επιλογή του "ΚΟΥΙΖ" θα οδηγεί στο:

Αν η επιλογή είναι λάθος θα εμφανίζεται ως:

ενώ αν η επιλογή είναι σωστή ως:

Εδώ μπορείτε να δείτε σε ξεχωριστό παράθυρο του αναγνώστη ιστοσελίδων το html αρχείo που παρήγαγε την παραπάνω εικόνα, οπότε να διαβάσετε και τον αντίστοιχο κώδικα.

Προηγούμενη ενότητα Επόμενη ενότητα