15. Ταξινόμηση ή Διαχωρισμό;

Γράφοντας HTML | Σχετικά | Παραπομπές | Ετικέτες |Μαθήματα | Προηγούμενο | Επόμενο |

15. Ταξινόμηση ή Διαχωρισμό;

Σημείωση: Αν δεν έχετε τα αρχεία των προηγούμενων μαθημάτων, μπορείτε να τα κατεβάσετε τώρα

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

Σε πολλές περιπτώσεις, μπορείτε να αναγνωρίσετε λογικά σημεία με βάση τα οποία μπορείτε να διαχωρίσετε τις πληροφορίες σε πολλαπλές ιστοσελίδες. Ωστόσο, δεν υπάρχει κάποια μαγική φόρμα και οι απόψεις για το θέμα ποικίλουν. Στόχος σας θα πρέπει να είναι μια ισορροπία ανάμεσα σε σελίδες που διαχωρίζουν το περιεχόμενο αλλά δεν αναγκάζουν τον αναγνώστη να δει πολλές οθόνες με επιλογές ώσπου να βρει τις πληροφορίες που επιθυμεί. Για το λόγο αυτό είναι σημαντικό να έχετε υπερσυνδέσμους που θα βοηθούν τον αναγνώστη στην περιπλάνηση του στις πληροφορίες που διαθέτετε και στη θέση που αυτές βρίσκονται.

Εως τώρα έχουμε δημιουργήσει μια ιστοσελίδα με εναν υπερσύνδεσμο σε μια μικρότερη σελίδα. Στο μάθημα 9d κάναμε μια λίστα απο συνδέσμους που λειτουργούν σαν περιεχόμενα που οδηγούν σε anchors (ή bookmarks) για τις διάφορες ενότητες του Volcano Web. Αυτές οι ίδιες υποδιαιρέσεις είναι λογικά σημεία για το διαχωρισμό της μοναδική και μακριάς σελίδας σε υποσελίδες.

Επίσης έχουμε δημιουργήσει έναν κατάλογο με το όνομα volc που περιέχει τα δυο αρχεία HTML (index.html, το μάθημα, και msh.html, μια δεύτερη ιστοσελίδα). Ακόμη έχουμε έναν δεύτερο κατάλογο με το όνομα pictures, που περιέχει τα αρχεία γραφικών.

map of new lesson Θα διαχωρίσουμε, στο σημείο αυτό το μοναδικό αρχείο του Volcano Web σε μια σειρά απο ιστοσελίδες, που θα ενώνονται μεταξύ τους όπως φαίνεται και στο διπλανό σχήμα. Το σημείο εισαγωγής είναι μια αρχική/κύρια σελίδα, την index.html που περιέχει συνδέσμους για κάθε μια απο τις υπόλοιπες σελίδες του μαθήματος:

Introduction
[intro.html]
Volcano Terminology
[term.html]
Volcanic Places in the USA
[usa.html]
Volcanic Places on Mars
[mars.html]
Research Project
[proj.html]

Κάθε τμήμα του μαθήματος θα συνδέεται πίσω στην σελίδα index καθώς και στις προηγούμενες και επόμενες σελίδες. Προσέξτε επίσης τη διπλή κατεύθυνση του συνδέσμου ανάμεσα στις σελίδες usa.html και msh.html. Ή αν προτιμάτε μια πιο παραδοσιακή δομή:

Υπάρχουσα Δομή	Νέα Δομή
work area pictures lava.gif left.gif msh.gif seismo.jpg stamp.gif volcano volc.html msh.html	work area pictures lava.gif left.gif msh.gif seismo.jpg stamp.gif volc index.html intro.html mars.html msh.html proj.html term.html usa.html

Το πρώτο πράγμα που θα κάνουμε είναι να δημιουργήσουμε ένα νεο αρχείο index.html, που θα είναι η αρχική σελίδα του Volcano Web:

Πρώτα κάνετε ενα αντίγραφο του αρχείου index.html και ονομάστε το old.html ή κάτι παρόμοιο. Αυτή είναι μια καλή συνήθεια όταν ξεκινάτε να κάνετε σημαντικές αλλαγές στις σελίδες σας.
Έπειτα ανοίξτε την αρχική έκδοση του index.html στον κειμενογράφο. Σε αυτό το αρχείο δουλεύαμε ως τώρα.
Θα χρησιμοποιήσουμε την εικόνα, το αρχικό κείμενο και τον πίνακα με τα περιεχόμενο σαν το περιεχόμενο της κεντρικής σελίδας. Για να γίνει αυτό, θα αφαιρέσουμε τις ενότητες απο τις οποίες θα δημιουργήσουμε τις άλλες σελίδες.
Διαγράψτε τις ενότητες απο Introduction ως References, δηλαδή οτιδήποτε ανάμεσα:
<hr>
<h2><A NAME="intro">Introduction</A></h2>
A <b>volcano</b> is a location where magma,
or hot melted rock from within a planet, reaches the surface.
:

και

:
<dt>Lipman, P.W. and Mullineaux (eds). (1981)
<dd><I>The 1980 Eruptions of Mount St. Helens, Washington.</I>
U.S. Geological Survey Professional Paper 1250.
</dl>

Συγκρίνετε τις σελίδες σας με το δείγμα για το πως θα πρέπει να είναι.
Βρείτε την ενότητα με τον τίτλο "In this Lesson..." Στην προηγούμενη δουλειά, χρησιμοποιούσαμε υπερσυνδέσμους κειμένου για να μεταβούμε σε σημεία του κειμένου (e.g. <a name="term">..</a>) στην ίδια σελίδα (δες μάθημα 9a). Θα αλλάξουμε αυτούς τους συνδέσμους ώστε να οδηγούν σε άλλες σελίδες (που θα δημιουργήσουμε στη συνέχεια).

Βρείτε το τμήμα:
<B>In this Lesson...</B>
<ul><i>
<li><A HREF="#intro">Introduction</A>
<li><A HREF="#term">Volcano Terminology</A>
<li><A HREF="#usa">Volcanic Places in the USA</A>
<li><A HREF="#mars">Volcanic Places on Mars</A>
<li><A HREF="#project">Research Project</A></i>
</ul>

και αλλάξτε το:

<B>In this Lesson...</B>
<ul><i>
<li><A HREF="intro.html">Introduction</A>
<li><A HREF="term.html">Volcano Terminology</A>
<li><A HREF="usa.html">Volcanic Places in the USA</A>
<li><A HREF="mars.html">Volcanic Places on Mars</A>
<li><A HREF="proj.html">Research Project</A></i>
</ul>

Συγκρίνετε τις σελίδες σας με το δείγμα για το πως θα πρέπει να είναι.

ΣΗΜΕΙΩΣΗ: Βεβαιωθείται οτι έχετε καταλάβει τη διαφορά ανάμεσα σε ένα σύνδεσμο που γράφει:

<a href="#quest">go to questions</a>

και σε έναν άλλο που γράφει:

<a href="quest.html">go to questions</a>

Το επόμενο βήμα θα είναι να δημιουργήσουμε τα αρχεία για τα άλλα τμήματα του μαθήματος. Θα είναι ευκολότερο αν πρώτα δημιουργήσουμε μια σελίδα πρότυπο που θα αλλάζουμε για κάθε μια απο τις διάφορες σελίδες.

Στον κειμενογράφο κάντε ένα νεο αρχείο με το όνομα temp.html
Στο αρχείο αυτό γράψτε την ακόλουθη HTML

(Αν θέλετε αντιγράψτε το παράδειγμα):

HTML	Σημειώσεις
<html> <head> <title>XXXXXXXX</title> </head> <body>	HEAD: Σε αυτό το τμήμα, XXXXXXXX είναι το όνομα κάθε ενότητας.
<H5>Volcano Web / <A HREF="index.html">Index</A> / <A HREF="xxxx.html">back</A> / <A HREF="xxxx.html">next</A></H5>	ΠΛΟΗΓΗΣΗ: Στην κορυφή κάθε σελίδας χρησιμοποιούμε μια μικρή επικεφαλίδα (h=5) για να βάλουμε τους συνδέσμους για την πλοήγηση στις άλλες σελίδες. Το Index οδηγεί στην κεντρική σελίδα. Τα next και back στις επόμενες και προηγούμενες σελίδες. Θα πρέπει να συμπληρώσετε τα αντίστοιχα ονόματα των αρχείων στη θέση των xxxx.html.
<h2>XXXXXXXX</h2> : : :	HEADER: Βάλτε ενα h=2 για τον τίτλο κάθε σελίδας.
<hr> <ADDRESS> <b><A HREF="index.html"> Writing HTML</A> : XXXXXXXX </b><p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A> <br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p>	ADDRESS FOOTER: Εδώ σημειώνεται το όνομα της κύριας ιστοσελίδας.
<tt>URL: http://www.bigu.edu/web/xxxxxxxx.html </tt> <p <body> </html>	URL: Αλλάξτε το xxxxxxxx.html με το αντίστοιχο όνομα του αρχείου.

Κάντε 5 αντίγραφα απο το αρχείο αυτό και κάντε τις απαραίτητες αλλαγές:

Όνομα Αρχείου	Ενότητα	Σημειώσεις
intro.html	Introduction	Καθώς είναι η πρώτη ενότητα, διαγράψτε τη γραμμή: <A HREF="xxxx.html">back</A>
term.html	Volcano Terminology
usa.html	Volcanic Places in the USA
mars.html	Volcanic Places on Mars
proj.html	Research Project	Καθώς είναι η τελευταία ενότητα, διαγράψτε τη γραμμή: <A HREF="xxxx.html">next</A>

Ανοίξτε το παλιό index.html (που μετονομάσαμε σε old.html) στον κειμενογράφο. Για κάθε ενα απο τα νεα αρχεία, θα πρέπει να αντιγράψετε την HTML κάτω απο τα <h2>...</h2> και να την συμπεριλάβεται στα αρχεία που δημιουργήσατε στο προηγούμενο βήμα. Σημειώστε οτι οι σελίδες Volcanic Places in the US και Research Projects περιέχουν υποενότητες σε <h3>...</h3>.
Τελειώνοντας, θα πρέπει να αλλάξετε το σύνδεσμο στο αρχείο msh.html ώστε να οδηγεί στο αρχείο usa.html. Ανοίξτε το αρχείο στιν κειμενογράφο και αλλάξτε τη γραμμή στα:
<a href="usa.html">
<img src="../pictures/left.gif" alt="** ">
Return to
<i>Volcano Web</i></a>

επίσης αλλάξτε το footer:

<HR>
<ADDRESS>
<B><A HREF="index.html">
Volcano Web</A> : <A HREF="usa.html">
Volcanic Places in the USA</A> :
Mount St. Helens</B> <p>

created by Lorrie Lava,
<A HREF="mailto:lava@pele.bigu.edu">
lava@pele.bigu.edu</A><br>
Volcanic Studies,
<A HREF="http://www.bigu.edu/">
Big University</A><p>
<TT>last modified: April 1, 1995</TT>
</ADDRESS>
<p>
<tt>URL: http://www.bigu.edu/web/msh.html</tt>

</body>
</html>

Ελέγξτε τις αλλαγές

Συγκρίνετε τις σελίδες σας με το δείγμα για το πως θα πρέπει να εμφανίζονται. Αν κάτι δε δουλεύει, ελέξτε ξανά τον κώδικα σας. Επειδή τα αρχεία που κάναμε είναι πολλά είναι πολύ πιθανό να έχετε κάνει κάποιο λάθος.

Περισσότερες Πληροφορίες

Απο άποψη εμφάνισης, οι ιστοσελίδες σας είναι πιο ευανάγνωστες αν οι υπερσύνδεσμοι συμπεριλαμβάνονται στο κείμενο με το περιεχόμενο. Αυτό γίνεται ακόμη πιο σημαντικό καθώς φτιάχνετε περισσότερες σελίδες που έχουν κείμενο που τις συνδέει. Συγκρίνετε:

Σύνδεσμοι της μορφής "click here"

In the spring of 1980, most people living in the vicinity of Mount St. Helens took heed of the scientists' warning about an impending volcanic eruption. (Click here to see a picture of Mount St. Helens) However, several were insistent on staying in their homes and sadly perished in the May 18 event. In that same year, measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley, California, and order a large evacuation of the Mammoth resort area. (Click here to see a seismometer) However, no such event occurred, and residents were angrily resentful for what they perceived as a false warning that caused great economic loss.

Σύνδεσμοι Ενσωματομένοι στο Κείμενο

In the spring of 1980, most people living in the vicinity of Mount St. Helens took heed of the scientists' warning about an impending volcanic eruption. However, several were insistent on staying in their homes and sadly perished in the May 18 event. In that same year, measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley, California, and order a large evacuation of the Mammoth resort area. However, no such event occurred, and residents were angrily resentful for what they perceived as a false warning that caused great economic loss.

Στη συνέχεια: 16. Τυπική και Εμπλουτισμένη HTML