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

Transcript

1 1 of 9 31/10/2011 9:38 µµ Γράφοντας HTML Σχετικά Παραποµπές Ετικέτες Μαθήµατα Προηγούµενο Επόµενο 2Πίνακες Βασικές Ετικέτες Πινάκων Γραµµές και Στήλες Πίνακας εδοµένων "Αόρατοι" Πίνακες ιαιρώντας µια Μακρά Λίστα Χρωµατιστοί Πίνακες Φόντο Υφής Περισσότερες Πληροφορίες Σηµείωση: Αν δεν έχετε τα αρχεία των προηγούµενων µαθηµάτων, µπορείτε να τα κατεβάσετε τώρα. Οι πίνακες πρωτοεισήχθηκαν απο την HTML 0 και αναπτύχθηκαν επιπλέον απο την Netscape για να προσθέσουν µια νέα διάσταση στο σχεδιασµό ιστοσελίδων. Οι πίνακες παρέχουν µια δοµή για την οργάνωση άλλων στοιχείων της HTML σε "πλέγµα". Άλλη µια πιο εµφανής χρήση των πινάκων είναι όταν θέλετε να οργανώσετε πληροφορίες σε στήλες κειµένου. Ωστόσο οι πίνακες ανοίγουν τις προοπτικές για πολλές άλλες επιλογές στη διαµόρφωση των σελίδων. Η HTML για τη δηµιουργία πινάκων µοιάζει πολύπλοκη - αλλά θα αρχίσουµε απο τα απλά και στη συνέχεια θα δηµιουργήσουµε ορισµένους πίνακες για το Volcano Web. Και για να ξεκινήσουµε, όταν σχεδιάζετε πίνακες να έχετε πάντα στο νου σας τα ακόλουθα: Οι πίνακες δηµιουργούνται ξεκινώντας απο τα πάνω αριστερά, συνεχίζοντας µε τις στήλες της 1ης γραµµής, έπειτα συνεχίζοντας µε τις στήλες τις δεύτερης γραµµή κ.ο.κ. Η σειρά δηµιουργίας του πίνακα διαγραµµατικά έχει την ακόλουθη πορεία: Κάθε πλέγµα του πίνακα ονοµάζεται κελί. Βασικές Ετικέτες Πινάκων Η HTML για τη βασική δοµή ενός πίνακα φαίνετε παρακάτω: HTML Αποτέλεσµα <table border=1> <td>row 1 col <td>row 1 col 2 <td>row 1 col Row 1 col 1 Row 1 col 2 Row 1 col 3 Row 2 col 1 Row 2 col 2 Row 2 col 3 Row 3 col 1 Row 3 col 2 Row 3 col 3 2 3

2 2 of 9 31/10/2011 9:38 µµ H ιδιότητα border=1 στην ετικέτα <table> ορίζει στον browser να δηµιουργήσει µια γραµµή γύρο απο τον πίνακα, πάχους ενός pixel. Κάθε γραµµή του πίνακα ορίζεται απο την ετικέτα... (Table Row) και στη συνέχεια τα κελιά κάθε γραµµής ορίζονται απο την ετικέτα <td>...(table Data). Κάθε κελί, και συγκεκριµένα κάθε ετικέτα <td>... µπορεί να περιλαµβάνει οποιοδήποτε είδος ετικέτας HTML που έχουµε δει εως τώρα - Κείµενο, υπερσυνδέσµους, γραφικά κ.τ.λ. Μέσα στη ετικέτα αυτή µπορείτε να χρησιµοποιήσετε διάφορα χαρακτηριστικά για να καθορίσετε την συστοίχιση των ενός κελιού: Οριζόντια Συστοίχιση <td align=left> συστοιχίζει όλα τα περιεχόµενα στα αριστερά του κελιού (αυτή είναι & η προκαθορισµένη ρύθµιση) <td align=right> συστοιχίζει όλα τα περιεχόµενα στα δεξιά του κελιού <td align=center> συστοιχίζει όλα τα περιεχόµενα στο κέντρο του κελιού Κάθετη Συστοίχιση <td valign=top> συστοιχίζει όλα τα περιεχόµενα στην κορυφή του κελιού <td valign=bottom> συστοιχίζει όλα τα περιεχόµενα στο κάτω µέρος του κελιού <td valign=middle> συστοιχίζει όλα τα περιεχόµενα στο κέντρο του κελιού (αυτή είναι & η προκαθορισµένη ρύθµιση) Αυτά τα χαρακτηριστικά µπορείτε τα συνδυάσετε: <td align=left valign=bottom> Η παραπάνω HTML παράγει ένα κελί του οποίου τα περιεχόµενα είναι συστοιχισµένα στο αριστερό και κάτω µέρος του κελιού. Γραµµές και Στήλες Ο πίνακας που δηµιουργήσαµε παραπάνω είναι λιτός και µικρός - 3 γραµµές και 3 στήλες (3x3). είτε στη συνέχεια τι µπορούµε να κάνουµε χρησιµοποιώντας τις ιδιότητες colspan και rowspan στις ετικέτες <td>... HTML <table border> <td>row 1 col <td align=center colspan=2> Row 1 col 2-3 Αποτέλεσµα ** Παρατηρήστε το δεύτερο κελί της πρώτης γραµµής - εκτείνεται (colspan=2) σε δύο στήλες. Ακόµη στο κελί αυτό έχουµε συστοιχίσει το κείµενο στο κέντρο του κελιού Row 1 col 1 Row 1 col 2-3 Row 2 col 1 Row 2 col 2 Row 2 col 3 Row 3 col 1 Row 3 col 2 Row 3 col 3

3 3 of 9 31/10/2011 9:38 µµ Στη συνέχεια θα φτιάξουµε ένα κελί που καταλαµβάνει 2 γραµµές. HTML Αποτέλεσµα <table border=1> <td>row 1 col <td align=center colspan=2> Row 1 col 2-3 <td valign=top rowspan=2> Row 2 col 2 3 Row 1 col 1 Row 1 col 2-3 Row 2 col 1 Row 2 col 2 Row 2 col 3 Row 3 col 1 Row 3 col 3 3 Πίνακας εδοµένων Η Εισαγωγική µας σελίδα περιέχει έναν πίνακα ("Volumes of Some Well Known Eruptions") που πρωτοδηµιουργήσαµε στο µάθηµα 9 χρησιµοποιόντας την ετικέτα <pre>...</pre>. Θα τροποποιήσουµε το διάγραµµα αυτό χρησιµοποιώντας πίνακες. Ανοίξτε το αρχείο intro.html στον κειµενογράφο σας. ιαγράψτε οτιδήποτε περιλαµβάνετε στις ετικέτες <pre>...</pre>. Στο ίδιο σηµείο βάλτε: <table border> <th>eruption</th> <th>date</th> <th>volume in km3</th> <td>paricutin, Mexico <td align=center>1943 <td align=center>3 <td>mt. Vesuvius, Italy <td align=center>79 A.D. <td align=center>3 <td>mount St. Helens, Washington <td align=center>1980 <td align=center>4

4 4 of 9 31/10/2011 9:38 µµ <td>krakatoa, Indonesia <td align=center>1883 <td align=center>18 <td>long Valley, California <td align=center>pre-historic <td align=center>>450 & <700 <td>yellowstone, Wyoming <td align=center>pre-historic <td align=center>400 Σηµείωση: είτε την HTML για την πρώτη γραµµή. Οι ετικέτες <th>...</th> (Table Header) λειτουργούν όπως ακριβώς και η ετικέτα <td>... µε τη διαφορά οτι το κείµενο που περιλαµβάνει αυτόµατα γίνεται έντονο (bold) και τοποθετείτε στο κέντρο. Επίσης δείτε οτι στα κελιά για το "Long Valley" πρέπει να χρησιµοποιήσουµε την HTML για τους ειδικούς χαρακτήρες "<", ">", και "&" ( είτε Μάθηµα 10) 4. Σώστε τις αλλαγές και φορτώστε τη σελίδα στον browser σας Σηµείωση: Ο πίνακας µπορεί να µη ξεχωρίζει εντελώς, καθώς το φόντο είναι ολόµαυρο. Στη συνέχεια ας προσθέσουµε µερικά επιπλέον πράγµατα στον πίνακα µας. Ορισµένοι browsers δίνουν τη δυνατότητα να ορίσετε ορισµένες επιπλέον ρυθµίσεις για τις γραµµές που σχηµατίζουν τον πίνακα. Είναι τα ακόλουθα χαρακτηριστικα: <table border=x cellpadding=y cellspacing=z> όπου Χ είναι το πάχος (σε pixels) του περιθωρίου του πίνακα. Το χαρακτηριστικό cellpadding ορίζει την απόσταση που έχουν τα περιεχόµενα των κελιών απο τα περιθώρια - µεγάλες τιµές για το Υ κάνουν τα κελιά µεγαλύτερα. Το χαρακτηριστικό cellspacing καθορίζει (σε pixels) το πάχος ανάµεσα στις εσωτερικές γραµµές που χωρίζουν τα κελιά. Αλλάξτε τη ετικέτα <table> ώστε να διαβάζει: <table border=3 cellpadding=4 cellspacing=8> Η ετικέτα <caption> εµφανίζει το κείµενο που περιλαµβάνει (στο κέντρο του πλάτους του πίνακα) ως τον τίτλο του πίνακα. Αλλάξτε τις γραµµές του πίνακα ώστε να µοιάζουν µε τα ακόλουθα: <table border=3 cellpadding=4 cellspacing=8> <caption> Volumes of Some Well-Known Volcanic Eruptions</caption> Μπορείτε να συµπεριλάβετε HTML iµέσα στην ετικέτα <caption>, απλά βεβαιωθείτε οτι είναι µέσα στην ετικέτα <table>... Ας δώσουµε στο κείµενο της ετικέτας <th>...</th> ένα χρώµα Αλλάξτε την HTML για την πρώτη σειρα στα: <th>eruption</th> <th>date</th> <th>volume in km3</th> Στη συνέχεια ας τοποθετήσουµε τον πίνακα στο κέντρο τις σελίδας. Απλά συµπεριλάβετε τον πίνακα σνάµεσα στην ετικέτα <center>...</center>. Για περισσότερα σχετικά µε τη συστοίχιση του κειµένου, δες µάθηµα_20.

5 5 of 9 31/10/2011 9:38 µµ Σώστε τις αλλαγές και φορτώστε τη σελίδα στον browser σας. Τελειώνοντας, θα προσθέσουµε µια στήλη στη αριστερή πλευρά. Τώρα θα προσθέσουµε ένα άδειο κελί µε την ετικέτα <th>...</th> στην πρώτη γραµµή - ο λόγος που το κάνουµε αυτό θα φανεί στη συνέχεια καθώς θα δηµιουργήσουµε την νέα στήλη στα ακόλουθα βήµατα. <th></th> <th>eruption</th> <th>date</th> <th>volume in km3</th> 6. Μεταβείτε στην πρώτη γραµµή, και προσθέστε ένα πρώτο κελί που καταλαµβάνει τις επόµενες 4 γραµµές: <td rowspan=4> eruptions observed by humans <td>paricutin, Mexico <td align=center>1943 <td align=center>3 Σηµείωση: Προσθέσαµε ορισµένες ετικέτες έτσι ώστε η πρώτη στήλη να µη γίνει πολύ πλατιά. 7. Και στην 5η σειρά, προσθέτουµε ένα κελί που καταλαµβάνει τις επόµενες 2 γραµµές. 8. <td rowspan=2> inferred by study of deposits <td>long Valley, California <td align=center>pre-historic <td align=center>>450 & <700 Σώστε τις αλλαγές και φορτώστε ξανά τη σελίδα στον browser σας. Αν θέλετε συγκρίνετε τη δουλειά σας µε ένα δείγµα για το πως θα πρέπει να µοιάζει. "Αόρατοι" Πίνακες Ένας πίνακας µε όρια είναι χρήσιµος για διαγράµµατα και δεδοµένα, αλλά κάποιες άλλες φορές θέλουµε να κάνουµε µια διαµόρφωση που δεν έχει ορατά όρια. Οι πίνακες τέτοιου είδους λέγονται αόρατοι, καθώς ο αναγνώστης δεν αντιλαµβάνεται οτι στην πράξη βλέπει έναν πίνακα. Ένας τέτοιος πίνακας δηµιουργείτε µε το ίδιο τρόπο που δηµιουργείτε κάθε άλλος πίνακας, µε τη διαφορά οτι η ετικέτα <table> έχει πλέον την µορφή: <table border=0> Στη συνέχεια για παράδειγµα θα τροποποιήσουµε το αρχείο usa.html (Volcanoes in the USA) σε µια σελίδα µε δυο στήλες. Αντί να έχουµε παραγράφους που καταλαµβάνουν ολόκληρο το πλάτος της σελίδας, θα τις αλλάξουµε ώστε να είναι η µία δίπλα στην άλλη, όπως στο ακόλουθο σχήµα: [Τίτλος] [Τίτλος] Κείµενο Κείµενο Κείµενο Κείµενο ΕΙΚΟΝΑ Υπερσύνεσµος σε µεγαλύτερη εικόνα

6 6 of 9 31/10/2011 9:38 µµ ΟΝΟΜΑ ΕΙΚΟΝΑΣ Υπερσύνεσµος σε µεγαλύτερη εικόνα Ανοίξτε το αρχείο usa.html στον κειµενογράφο σας. Βρείτε το κοµµάτι µε τα ακόλουθα: mount St Helens On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided <a href="msh.html">detailed observations</a> on the mechanics of highly explosive eruptions. long Valley This field seismometer measures earthquakes associated with subsurface volcanic forces and may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago. <a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"> -- [full size image] --</a> Και αλλάξτε το µε την ακόλουθη ΗΤΜL: <table border=0 cellpadding=6 cellspacing=2> <td>mount St Helens <td colspan=2>long Valley <td valign=top>on May 18, 1980, after a long period of rest, this quiet mountain in Washington provided <a href="msh.html"> detailed observations</a> on the mechanics of highly explosive eruptions. <td valign=top> This field seismometer measures earthquakes associated with subsurface volcanic forces and may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago. <td valign=top><a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"></a> <td colspan=3 align=right> <a href="../pictures/seismo.jpg"> -- [full size image] -- Σώστε τις αλλαγές και φορτώστε τη σελίδα στον browser σας. ιαιρώντας µια Μακρά Λίστα Άλλη µια χρήσιµη εφαρµογή των αόρατων πινάκων είναι η µετατροπή µιας µακριάς λίστας αντικειµένων (που δηµιουργούµε µε την ετικέτα <list>, δες µάθηµα 6). Οι λίστες αναπτύσονται προς τα κάτω, αφήνοντας έτσι ανεκµετάλευτο πολύτιµο χώρο στα δεξιά της σελίδας.

7 7 of 9 31/10/2011 9:38 µµ Το αποτέλεσµα είναι η µεταροπή µιας λίστας: Μακριά Λίστα Στήλη 1 Στήλη 2 <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx <li> xx x xxxxx <li> xxx xx <li> xxxx x <li> xxx x xxx σε <li> xxxxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx xxxxx <li> xxx xx <li> xxxx x <li> xxx x xxx Στη συνέχεια θα τµηµατοποιήσουµε τη λίστα µε τις πηγές στη σελίδα Resource Projects (αρχείο proj.html). Ανοίξτε το αρχείο proj.html στον κειµενογράφο σας. Εντοπίστε την λίστα που ορίζεται απο την... κάτω απο την επικεφαλίδα References και αντικαταστήστε την ολόκληρη µε τα ακόλουθα: <table border=0 cellpadding=2 cellspacing=2> <td valign=top> <li><a HREF=" Alaska Volcano Observatory</A> <li><a HREF=" Cascades Volcano Observatory</A> <li><a HREF=" The Electronic Volcano</A> <li><a HREF=" Michigan Tech Volcanoes Page</a> <li><a HREF=" NASA Earth Observing System (EOS) IDS Volcanology Team</A> <li><a HREF=" Volcano Information Center</a> <td valign=top> <li><a HREF=" Volcano/Earth Science-Oriented Servers</A> <li><a HREF=" US Geological Survey Volcanic Hazards Program</a> <li><a href=" Global Volcanism Program (GVP) </a> <li><a href= " Volcano Watch Newsletter</a> <li><a href=" Volcanoes Online</a> <li><a HREF=" VolcanoWorld</A> Σώστε τις αλλαγές και φορτώστε τη σελίδα στον browser σας.αν θέλετε συγκρίνετε τη δουλειά σας µε ένα δείγµα για το πως θα πρέπει να µοιάζει. Χρωµατιστοί Πίνακες Οι πιο πολλοί σηµερινοί web browsers υποστηρίζουν HTML για το χρωµατισµό πινάκων, γραµµών, και κελιών. Αυτό είναι ένα αποτελεσµατικό µέσο για την προσθήκη στοιχείων µε γραφικά/χρώµµατα σε µια ιστοσελίδα χωρίς να µεγαλώνει το µέγεθος του αρχείου απο την ενσωµάτωση εικόνων.

8 8 of 9 31/10/2011 9:38 µµ Στη συνέχεια θα χρησιµοποιήσουµε τους δεκαεξαδικούς χρωµατικούς κώδικες που εξετάσαµε στο µάθηµα 17 για το χρωµατισµό του φόντου των ιστοσελίδων και στο µάθηµα 19 για το χρωµατισµό του κειµένου. Είναι τόσο απλό και γίνεται µε την εισαγωγή του χαρακτηριστικού bgcolor=#ff0000 στην ετικέτα <table>: Τµήµα του Πίνακα Πίνακας χρωµατισµός ολόκληρου του πίνακα Γραµµή χρωµατισµός µιας γραµµής µόνο Κελί χρωµατισµός ενός κελιού µόνο HTML <table bgcolor=#880000> <tr bgcolor=#880000> <td bgcolor=#880000> Τώρα θα προσθέσουµε χρώµα στον πίνακα που δηµιουργήσαµε για την είσαγωγική σελίδα. ε θα κάνουµε κάποιες σπουδαίες αλλαγές (αλλά καλό θα ήταν να πειραµατιστείτε µε τις δικές σας σελίδες). Στη συγκεκριµένη περίπτωση θα κάνουµε τα κελιά που περιέχουν του τίτλους των γραµµών και των στηλών να έχουν µια πιο ανοιχτή απόχρωση απο το µαύρο φόντο της σελίδας. Ανοίξτε το αρχείο intro.html στον κείµενογράφο. Για αρχή εντοπίστε όλες τις ετικέτες <th> των στηλών: <th>eruption</th> <th>date</th> <th>volume in km3</th> και προσθέστε το χραακτηριστικό για το χρώµα (# γκρι): <th bgcolor=#222222>eruption</th> <th bgcolor=#222222>date</th> <th bgcolor=#222222>volume in km3</th> Τώρα, βρείτε τις δυο ετικέτες που µορφοποιούν τους τίτλους των γραµµών και κάντε τα ίδια µε το προηγούµενο βήµα: 4. <td bgcolor=# rowspan=4> eruptions observed by humans : : : <td bgcolor=# rowspan=2> inferred by study of deposits Σώστε τις αλλαγές και φορτώστε τη σελίδα στον browser σας.αν θέλετε συγκρίνετε τη δουλειά σας µε ένα δείγµα για το πως θα πρέπει να µοιάζει. Φόντο Υφής Μπορείτε ακόµη να χρησιµοποιήσετε παραπάνω απο απλό χρώµα για το φόντο του πίνακα. Στο µάθηµα 17 είδαµε πως µπορούµε να χρησιµοποιήσουµε ένα αρχείο γραφικών σαν φόντο για τη σελίδα µε την ετικέτα <body>. Με παρόµοιο τρόπο µπορείτε να κάνετε το ίδιο και για τους πίνακες και τα κελιά τους. Πρέπει ωστόσο να έχετε πάντα υπόψη σας τις διαφορές στον τρόπο µε τον οποίο διαχειρίζονται αυτά τα χαρακτηριστικά ο Netscape Navigator και ο Internet Explorer: Τµήµα Πίνακα HTML Σηµειώσεις Πίνακας Γεµίζει όλα τα κελιά µε το ίδιο σχέδιο <table background="image.gif"> Στον Navigator γεµίζει όλα τα κελιά του πίνακα. Στον Internet Explorer, ολόκληρος ο πίνακας (µαζί και τα τοιχώµατα)

9 9 of 9 31/10/2011 9:38 µµ Γραµµή Γεµίζει όλα τα κελιά µιας γραµµής Κελί Γεµίζει ένα κελί µε κάποιο σχέδιο <tr background="image.gif"> <td background="image.gif"> καλύπτονται µε το σχέδιο. ε δουλεύει στον Internet Explorer ουλεύει το ίδιο στον Navigator και στον Internet Explorer. Θα τροποποιήσουµε στη συνέχεια τον πίνακα που έχουµε δηµιουργήσει σε προηγούµενο παράδειγµα, έτσι ώστε να χρησιµοποιήσουµε µια υφή στα κελιά µε τους τίτλους, στο διάγραµµα µε τα ηφαίστεια. 4. Πηγαινετε στη σελίδα Εικόνες για το µάθηµα 22 και κατεβάστε ένα αντίγραφο απο την εικόνα που θα χρησιµοπιήσουµε για το φόντο των κελιών του πίνακα. Ανοίξτε το αρχείο intro.html στον κειµενογράφο σας. Βρείτε τις γραµµές που περιέχουν τα παρακάτω: <th></th> <th bgcolor=#222222>eruption</th> <th bgcolor=#222222>date</th> <th bgcolor=#222222>volume in km3</th> και αλλάξτε αυτές µε τις ακόλουθες, ώστε να χρησιµοποιήσουµε το αρχείο pattern.gif: <th></th> <th background="../pictures/pattern.gif"> eruption</th> <th background="../pictures/pattern.gif"> date</th> <th background="../pictures/pattern.gif"> volume in km3</th> Σώστε τις αλλαγές και φορτώστε ξανά τη σελίδα στον browser σας. Αν θέλετε συγκρίνετε τη δουλειά σας µε ένα δείγµα για το πως θα πρέπει να µοιάζει. Περισσότερες Πληροφορίες Οι πίνακες αποτελούν σήµερα τον κανόνα για το σχεδιασµό ιστοσελίδων. Για παράδειγµα, µπορείτε να εξετάσετε τον κώδικα απο πολλές ιστοσελίδες όπου θα δείτε πίνακες µέσα σε πίνακες που είναι µέσα σε άλλους πίνακες κ.ο.κ. Υπάρχει ένα µειονέκτηµα στις σελίδες που ο σχεδιασµός του βασίζεται αποκλειστικά ή κατα ένα µεγάλο µέρος στους πίνακες. Ολόκληρη η δοµή ενός πίνακα απο την αρχική ετικέτα <table> εως την τελική πρέπει να κατεβεί, πριν εµφανιστεί οτιδήποτε στην οθόνη. Έτσι αν έχετε πολλά πράγµατα µέσα σε ένα πίνακα, ο αναγνώστης σας θα πρέπει να περιµένει αρκετή ώρα κοιτώντας µια λευκή σελίδα (ιδίως αν χρησιµοποιεί αργό µόντεµ). Τι µπορείτε να κάνετε; Πάντα να δοκιµάζετε τις σελίδες σας σε µια πιο αργή σύνδεση ή σε υπολογιστή παλιότερο απο τον δικό σας. Αν ολόκληρη η σελίδα σας βασίζετε σε πίνακες, βεβαιωθείτε ότι έχετε συµπεριλάβει σε όλες τις ετικέτες <img...> τα width= και height=. Αυτό βοηθάει τον browser να εµφανίσει γρηγορότερα τη σελίδα αν ξέρει τις διαστάσεις των εικόνων. Αν είναι δυνατόν, προσθέστε κάποιες γραµµές κείµενο πριν απο έναν πολύπλοκο πίνακα, έτσι ώστε εµφανίζετε κάτι όταν κάποιος πρωτοβλέπει τη σελίδα σας. Για ακόµη περισσότερες πληροφορίες δείτε την ενότητα µε τις παραποµπές. Στη συνέχεια: 2Περισσότερα Για Εικόνες & Λίστες Γράφοντας HTML Σχετικά Παραποµπές Ετικέτες Μαθήµατα Προηγούµενο Επόµενο