HTML: Δημιουργία Ιστοσελίδας, Παράμετροι ετικετών, χρώμα

υπόβαθρου και κειμένου, κατάλογοι.

Σαραντέας Ιωάννης1, Σανδαλή Γεωργία2, Μακρυγιάννης Παναγιώτης3 saranteas@sch.gr, gsandali@sch.gr, pmgiannis@gmail.com

1 Καθηγητής Πληροφορικής, 6ο Εργαστηριακό Κέντρο Α Πειραιά

2 Τομεάρχης Πληροφορικής, 6ο Εργαστηριακό Κέντρο Α Πειραιά

3 Διευθυντής, 4ο Εργαστηριακό Κέντρο Α Πειραιά

Περίληψη

Βασικός στόχος του παρόντος διδακτικού σεναρίου είναι η κατανόηση της χρήσης των ετικετών και παραμέτρων καθώς και η συνδυασμένη χρήση τους, προκειμένου οι μαθητές να γίνουν ικανοί να κατασκευάζουν ιστοσελίδες με

την γλώσσα σήμανσης HTML. Στους στόχους του διδακτικού σεναρίου περιλαμβάνεται η χρήση και η δημιουργία καταλόγων σε ιστοσελίδες. Το σενάριο απευθύνεται κυρίως στους μαθητές της Β ΕΠΑΛ και εντάσσεται στο μάθημα

«Προγραμματιστικά εργαλεία για το διαδίκτυο» . Η γλώσσα HTML σαν περιβάλλον ανάπτυξης εφαρμογών

προσφέρεται για τη δημιουργία μαθησιακών δραστηριοτήτων στο πλαίσιο ομαδικής και συνεργατικής προσπάθειας. Οι προτεινόμενες δραστηριότητες εντάσσονται σε μια τυπική εποικοδομιστική προσέγγιση με χρήση σύγχρονης

τεχνολογίας ΤΠΕ, δημιουργούν ένα νέο περιβάλλον εργασίας, προσδίδοντας προστιθέμενη αξία στη διδακτική και μαθησιακή διαδικασία. Κατόπιν της επιτυχής ολοκλήρωσης των προβλεπόμενων Φ.Ε., της ανταπόκρισης και

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

μαθητών.

Λέξεις κλειδιά: HTML, ετικέτες, παράμετροι, κατάλογοι, χρώμα.

Εισαγωγή

Το παρόν σενάριο υλοποιήθηκε δύο φορές, την ίδια χρονική περίοδο, σε δύο διαφορετικά τμήματα της

Β τάξης πληροφορικής, του ΕΠΑΛ Κορυδαλλού , στο εργαστήριο Πληροφορικής του 6ου

Εργαστηριακού Κέντρου Πειραιά. Οι δύο υλοποιήσεις του σεναρίου (Σ1,Σ2) έχουν μικροδιαφορές

κυρίως στο τρόπο εμφάνισης των δοσμένων Φ.Ε. στους μαθητές. Ύστερα από την διδακτική παρέμβαση

στο πρώτο τμήμα, ακολουθούσαν μικρές διορθώσεις στο Φ.Ε. και με το καινούριο βελτιωμένο Φ.Ε

γινόταν η διδακτική παρέμβαση στο δεύτερο τμήμα. Στο τέλος του παραρτήματος θα παρατεθούν τα

πληρέστερα Φ.Ε. της δεύτερης υλοποίησης (Σ2) του σεναρίου.

Σύντομη περιγραφή του διδακτικού σεναρίου.

Το σενάριο αυτό με τίτλο «HTML: Δημιουργία Ιστοσελίδας, Παράμετροι ετικετών, χρώμα υπόβαθρου

και κειμένου, κατάλογοι» απευθύνεται κυρίως σε μαθητές της Β’ τάξης του τομέα Πληροφορικής των

ΕΠΑΛ, και διαμορφώνεται στα πλαίσια του μαθήματος «Προγραμματιστικά εργαλεία για το

διαδίκτυο». Συγκεκριμένα, αφορά τις ενότητες 4.4 (Υπόβαθρο, γραμματοσειράς και χρώμα κειμένου)

και 4.5 (Κατάλογοι) του σχολικού βιβλίου. Το σενάριο εφαρμόστηκε σε διάρκεια τεσσάρων (4)

διδακτικών ωρών σε κάθε ένα από τα δύο τμήματα πληροφορικής. Το σχολικό εργαστήριο διέθετε,

σύνδεση με το διαδίκτυο και εγκαταστημένο βιντεοπροβολέα. Από πλευράς λογισμικού υπήρχε το

Notepad++ (ή το σημειωματάριο), ένας φυλλομετρητής και το πακέτο Microsoft Office. Έγινε χρήση

του Web 2 - google drive, google applications, το εργαλείο Pbworks που είναι τύπου Wiki. Οι μαθητές

χωρίστηκαν ανά 2 σε κάθε υπολογιστή ώστε να έχουν τη μεγαλύτερη δυνατή ενεργή εμπλοκή στη

συγγραφή του κώδικα, ενώ παράλληλα είχαν και την δυνατότητα της μεταξύ τους συνεργασία και

αλληλοβοήθεια. Βασικός σκοπός του διδακτικού σεναρίου είναι η κατανόηση της χρήσης των ετικετών

και παραμέτρων της HTML καθώς και η συνδυαστική χρήση τους προκειμένου οι μαθητές να είναι

ικανοί να αναπτύσσουν ιστοσελίδες. Στους στόχους του διδακτικού σεναρίου περιλαμβάνεται η

εφαρμογή και χρησιμοποίηση αριθμητικών και μη αριθμητικών καταλόγων ενσωματωμένους σε

ιστοσελίδες. Πιο συγκεκριμένα, οι επιμέρους στόχοι αναφέρονται παρακάτω στο κομμάτι του

Σεναρίου «4. Σκοποί και στόχοι του διδακτικού σεναρίου». Ακολουθεί μια συνοπτική περιγραφή των 4

παρεμβάσεων (4 διδακτικές ώρες) του σεναρίου.

Παρέμβαση 1: Υπόβαθρο, χρώμα κειμένου, παράμετροι ετικετών

Η παρέμβαση περιλαμβάνει τρεις δραστηριότητες. Αρχικά ο μαθητής καλείται να ανακαλύψει, να

παρατηρήσει αλλά και να πειραματιστεί πάνω σε συγκεκριμένο κώδικα HTML. Αντικείμενο της

παρατήρησης είναι ο τρόπος που οι παράμετροι αλλάζουν τις ιδιότητες μιας ετικέτας (<HR>). Μετά από

σύντομη εισήγηση του εκπαιδευτή επιχειρείται να γίνει γενίκευση και ζητείται από τους μαθητές να

μεταβιβάσουν την εμπειρία από την προηγούμενη δραστηριότητα στις παραμέτρους της ετικέτας

(<BODY>). Τέλος οι μαθητές προτρέπονται να περιηγηθούν σε συγκεκριμένο ιστότοπο, που

παρουσιάζει τον κόσμο του χρώματος για εφαρμογές στο διαδίκτυο.

Παρέμβαση 2: Χρώμα, τύπος, μέγεθος γραμματοσειράς, παράμετροι ετικετών

Η παρέμβαση περιλαμβάνει δυο δραστηριότητες. Αρχικά η κάθε ομάδα μαθητών μελετάει τον τρόπο

χρήσης της ετικέτας <Font>. Στη συνέχεια καλείται να συντάξει κώδικα HTML) ώστε να δημιουργήσει

μια ιστοσελίδα με απλό περιεχόμενο. Θα πρέπει να χρησιμοποιήσει τις κατάλληλες ετικέτες και

παραμέτρους. Κυρίως την ετικέτα <BODY> από την προηγούμενη διδακτική παρέμβαση και

κλιμακωτά την ετικέτα <Font> με τις παραμέτρους της. Στην επόμενη δραστηριότητα μέσα από το Wiki

του μαθήματος, οι μαθητές συμπληρώνουν μια φόρμα ερωτήσεων της μορφής Σωστό-Λάθος,

πολλαπλής επιλογής και μικρού κειμένου.

Παρέμβαση 3: αριθμητικοί κατάλογοι στην HTML

Περιλαμβάνει τέσσερις δραστηριότητες. Η πρώτη είναι παρουσίασης, επίδειξης και παρατήρησης.

Πραγματοποιείται παρουσιάζοντας ταυτόχρονα (μέσω βιντεοπροβολέα ή Φ.Ε.), ένα αριθμητικό

κατάλογο, τον κώδικα δημιουργίας του και την επεξήγηση των ετικετών. Η επόμενη δραστηριότητα

ζητάει από τους μαθητές να προσθέσουν, να αφαιρέσουν ή να μεταβάλουν τα στοιχεία του

προηγούμενα δοσμένου αριθμητικού καταλόγου. Στη 3η δραστηριότητα οι ομάδες των μαθητών

κατασκευάζουν ιστοσελίδα με ανεξάρτητους αριθμητικούς καταλόγους, διαφορετικών τύπων

αρίθμησης, ενώ ταυτόχρονα καλούνται να εφαρμόσουν τις παραμέτρους Start και type. Η τελευταία

δραστηριότητα γίνεται μέσα από το Wiki του μαθήματος . Είναι ηλεκτρονική φόρμα με ερωτήματα

Σωστό-Λάθος και πολλαπλής επιλογής. Μέσα από αυτή γίνεται κάποιος έλεγχος (αξιολόγηση) ενώ

ταυτόχρονα τονίζονται και διευκρινίζονται κάποια ιδιαίτερα σημεία.

Παρέμβαση 4: Μη αριθμητικοί κατάλογοι στην HTML

Η παρέμβαση περιλαμβάνει 4 δραστηριότητες. Αρχικά επιχειρείται μια μετάβαση γνώσης από τους

αριθμητικούς καταλόγους. Με μέθοδο εισήγησης και ερωταπαντήσεων παρουσιάζεται ο τρόπος

λειτουργίας των μη αριθμητικών καταλόγων και οι μορφές των συμβόλων του. Στη Πρώτη

δραστηριότητα ζητάμε από τους μαθητές τη μετατροπή ενός απλού αριθμητικού καταλόγου σε μη

αριθμητικό κατάλογο. Στην επόμενη δραστηριότητα ζητάμε πάλι μετατροπή σε μη αριθμητικό

κατάλογο με δεδομένη μορφή, ενός πολλαπλού αριθμητικού καταλόγου με διαφορετικά σύμβολα

αρίθμησης και σημεία αρχής. Στην 3η δραστηριότητα οι μαθητές κατασκευάζουν ιστοσελίδα με το

Μενού εστιατορίου. Στο μενού εμφανίζονται σαλάτες, κυρίως πιάτο και επιδόρπιο υπό την μορφή μη

αριθμημένων καταλόγων. Τέλος η 4η δραστηριότητα γίνεται μέσα από το Wiki του μαθήματος. Είναι

ηλεκτρονική φόρμα με ερωτήματα Σωστό-Λάθος και πολλαπλής επιλογής. Μέσα από αυτή γίνεται

κάποιος έλεγχος (αξιολόγηση), ενώ ταυτόχρονα τονίζονται και διευκρινίζονται κάποια ιδιαίτερα

σημεία.

Ενδιαφέρον των μαθητών. Αρχικά ενώ οι περισσότερες ομάδες ήταν ενθουσιασμένες, μερικές

λιγότερες στον αριθμό, φαινόντουσαν ελαφρά μουδιασμένες. Ορισμένους μαθητές ήταν δύσκολο να

τους βάλεις να δουλέψουν οι ίδιοι στους υπολογιστές. Στο τέλος της ώρας δεν μπορούσες να τους

βγάλεις από την τάξη. Το σύστημα μαθητές φαίνεται να είναι αδρανειακό. Δυσκολεύεσαι να τους

πείσεις να αρχίσουν δουλειά αλλά δυσκολεύεσαι επίσης και να τους σταματήσεις όταν τελειώσει ο

χρόνος εργασίας. Στους μαθητές άρεσε η ευκολία που έχει η ηλεκτρονική φόρμα συμπλήρωσης

απαντήσεων. Επίσης άρεσε το χρώμα. Ενθουσιάστηκαν γιατί οι σελίδες τους άρχιζαν και γίνονταν πιο

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

μέγεθος της γραμματοσειράς. Στην πραγματικότητα ζητούσαν την ύλη του επόμενου μαθήματος.

Αρκετοί είχαν αρχίσει να ρωτούν πως μπορούνε να τα σηκώσουν στο διαδίκτυο και πως μπορούν να

βάλουν πολλές σελίδες μαζί. Καλό γιατί τους είχε δημιουργηθεί η ανάγκη για αυτό που θα

ακολουθούσε. Υποθέσαμε λοιπόν ότι είχαμε διαμορφώσει ενεργητικούς μαθησιακούς τρόπους (Rogers

1999). Υπήρξε λοιπόν ενδιαφέρον, το θέμα ήταν να διατηρηθεί μέχρι να φτάσουν στα πιο ενδιαφέροντα

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

κάποια κλιμακωτή δυσκολία. Στα δύσκολα κάποιοι πεισμάτωσαν και το πήραν σαν πρόκληση. Άλλοι

πάλι το πέρασαν αλώβητοι και το ευχαριστήθηκαν δεόντως, βλέποντας να υπερτερούν έναντι άλλων.

Τέλος κάποιοι φοβήθηκαν πως δεν θα τα καταφέρουν. Όμως για όλους υπήρχε και η επόμενη

παρέμβαση, αρχικά βατή, όπου αναμένεται να τα καταφέρουν και οι πιο αδύναμοι. Τέθηκε και η

κλασσική ερώτηση: -Κύριε, γιατί τα κάνουμε όλα αυτά; Μια ερώτηση που θα πρέπει να απαντιέται

ακόμη και όταν δεν τίθεται άμεσα. Συνήθως βέβαια, απαντιέται στην αρχή, αλλά τότε ποιος προσέχει ή

ποιος θυμάται. Βέβαια όταν απαντιέται την κατάλληλη χρονική στιγμή έχει και διαφορετική βαρύτητα.

Η αποσαφήνιση των εκπαιδευτικών στόχων από την αρχή του μαθήματος, επηρεάζει το βαθμό

υποκίνησης των εκπαιδευομένων (Κόκκος, Λιοναράκης 1998), έχει δε σαν στόχο, τον καθησυχασμό τους

και την διαμόρφωση πλαισίου αναφοράς γύρω από το εξεταζόμενο θέμα (Νoye, Piveteu 1999).

Συμμετοχή των μαθητών στη διδακτική διαδικασία. Η μεγάλη πλειοψηφία των μαθητών είχε

ενεργητική συμμετοχή. Η δυσκολία ήταν αρχικά στο να τους πείσεις να συμμετέχουν, στο ότι αξίζει, θα

κερδίσουν αρκετά. Στη συνέχεια χρειάζονταν ενέσεις ενδιαφέροντος. Η HTML εδώ μας βοηθάει, γιατί

είναι περίπου κλιμακωτής δυσκολίας και παράλληλα, αυξανόμενης απόλαυσης- δημιουργίας. Αρχικά

τα Φ.Ε τα θεωρούσαν εύκολα και πίστευαν ότι θα τα κατάφερναν. Να λοιπόν η λαμπρή ευκαιρία για τη

δόξα. Τα πράγματα αργότερα δυσκόλευαν, όμως ο βρεγμένος δεν φοβάται την βροχή. Έμπειροι πια

και δοκιμασμένοι επιχειρούσαν πάνω στις επόμενες δραστηριότητες. Οι σαφώς περισσότεροι

διασώθηκαν. Γλυκιά η νίκη όσο πιο δύσκολη. Εντυπωσιακές οι αντιδράσεις και οι πανηγυρισμοί

μερικών, όταν τελείωναν τις δραστηριότητες. Όσοι είχαν ανακαλύψει κάτι όχι προφανές, ένοιωσαν

πραγματικά “εξαιρετικοί” και μάλιστα δεν αποκλείεται να ήταν η απαρχή ενός ειδυλλίου με την

HTML. Σε κάποιες δραστηριότητες ήταν πολλά τα αιτήματα για βοήθεια. Εκεί χρειάστηκαν οι “μαθητές

– βοηθοί”, αρχικά λίγοι, αλλά συνεχώς αυξανόμενοι. Οι μαθητές αυτοί με την ανοχή έως και

υποστήριξη των εκπαιδευτικών βοηθούσαν άλλες ομάδες. Ο ρόλος του εκπαιδευτικού ήταν να μην

υποκαθιστούν οι μαθητές - βοηθοί τις βοηθούμενες ομάδες. Η αλληλοδιδακτική σώζει αλλήλους. Βοηθά

αυτόν που δυσκολεύεται, ενδυναμώνει αυτόν που ξέρει το κάτι παραπάνω και κάνει ευτυχισμένους και

σαφώς λιγότερο ζαλισμένους – πελαγωμένους εκπαιδευτικούς.

Δυσκολίες που παρουσιάσθηκαν. Σχετικά με την οργάνωση: Σε ορισμένες περιπτώσεις υπήρξε μεγάλη

χρονική απόσταση από τη προηγούμενη διδακτική παρέμβαση με αποτέλεσμα να υπάρχει δυσκολία

μετάβασης και διασύνδεσης. Αναστάτωση προκλήθηκε με την εναλλαγή των μαθητών στον υπολογιστή

για να απαντηθούν τα ερωτήματα της ηλεκτρονικής φόρμας αξιολόγησης. Μερικοί χρειάστηκαν να

μείνουν και στο διάλλειμα για να τελειώσουν τις δραστηριότητες. Σχετικά με τα Φ.Ε.: Οι περισσότεροι

μαθητές δεν διαβάζουν, αλλά απλά κοιτάνε τι πρέπει να κάνουν. Ως εκ τούτου, δεν υπήρχαν

απαντήσεις, σε ερωτήματα που δεν αποτυπωνόταν με εικόνα στο Φ.Ε., το τελικό αποτέλεσμα της

δραστηριότητας. Υπήρξε σε σημεία, έλλειψη επικεφαλίδων και ασάφεια στα όρια των

υποδραστηριοτήτων καθώς και μεγάλος βαθμός ελευθερίας ή μη δόμησης. Άλλες ομάδες το

εκμεταλλεύτηκαν θετικά κάνοντας αρκετούς πειραματισμούς, άλλες το αντιμετώπισαν με το ‘Αα,

εντάξει… ’. Τα τυπογραφικά λάθη ίσως και να επηρέασαν μερικώς τη σωστή διεξαγωγή. Από τους

μαθητές δεν δόθηκε η πρέπουσα προσοχή στις υποσημειώσεις. Στη διεξαγωγή των δραστηριοτήτων:

ομάδες μαθητών παρουσίασαν το σωστό οπτικό αποτέλεσμα αλλά όχι με τον κατάλληλο κώδικα.

Υπήρξε ο φόβος για πειραματισμό και η τάση για μηχανική, μη σκεπτόμενη εργασία. -Τι θα γίνει άμα

κάνω αυτό; -Κάνε το να δούμε! Δυσκόλεψε η σωστή ορθογραφία των τύπων της HTML. Τέλος υπήρξε

γενικά μια σύγχυση με την ονοματολογία αρχείων, που ήταν χωρίς προφανή νόημα όπως: userXX-

δραστηριόττητα 6-3.htm

Συμπεράσματα

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

Στο 2ο τμήμα δινόταν το ίδιο βασικό σενάριο με ελαφρά τροποποιημένα τα φύλλα εργασίας, σύμφωνα

με τις παρατηρήσεις του αναστοχασμού από την εφαρμογή του σεναρίου στο 1ο τμήμα. Θα πρέπει να επισημάνουμε ότι θεωρούμε, το πρώτο τμήμα των μαθητών καλύτερο και σαν μονάδες αλλά και σαν

μέσο όρο. Παρόλα αυτά η διαδικασία υλοποίησης των σεναρίων ήταν ομαλότερη στο δεύτερο τμήμα. Αυτό θα πρέπει να οφείλεται κυρίως σε δύο λόγους. Αφενός στη μεγαλύτερη πληρότητα των Φ.Ε.

αφετέρου στην άνεση του εκπαιδευτικού εκτελώντας για δεύτερη φορά μέσα σε λίγες μέρες το ίδιο

σενάριο. Ως εκ τούτου οι διευκρινήσεις ήταν περισσότερο στοχοποιημένες και οι παρεμβάσεις αποτελεσματικότερες. Επίσης ευχάριστη έκπληξη ήταν η απόδοση των μαθητών του δεύτερου τμήματος

αλλά και του πρώτου, στο διαγώνισμα πάνω στα κεφάλαια αυτά (διαδικασία εκτός σεναρίου).

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

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

οι παρεμβάσεις να είναι συνεχόμενες ή έστω να μην απέχουν κατά πολύ χρονικά. Επίσης σε επίπεδο στάσεων θα προσπαθούσαμε να εξηγήσουμε πιο πειστικά ότι με το λάθος (ενίοτε) μαθαίνεις. Βέβαια

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

αναλυτικότερες οδηγίες για το τι πρέπει να κάνουν οι μαθητές, υπαγωγή αποριών στις ερωτήσεις

αξιολόγησης Σωστού – Λάθους για επιπλέον επεξεργασία. Τέλος θα θέλαμε και δραστηριότητες όπως αυτές αναφέρονται παρακάτω στο κομμάτι του Σεναρίου «14.Προτάσεις για περαιτέρω

δραστηριότητες – προτεινόμενες εργασίες»

Ευελιξία σεναρίου.Το σενάριο κάνει χρήση εργαλείων web2 όπου με τις δεδομένες δυνατότητες, σε

συνδυασμό και με άλλες Τεχνολογίες Πληροφορικής και Επικοινωνίας (ΤΠΕ) δημιουργούν ένα νέο

περιβάλλον εργασίας, αποφάσεων και συνεργατικής δράσης. Όμως σε περίπτωση αδυναμίας θα μπορούσε το σενάριο να εκτελεστεί και με τη βοήθεια του τοπικού δικτύου ή και χωρίς αυτό, απλά με τη

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

βέβαια με αρκετά μικρότερες προσδοκίες.

Προσωπικά οφέλη. Αυτά προέκυψαν από το σχεδιασμό, την υλοποίηση και τον αναστοχασμό του

παρόντος διδακτικού σεναρίου εστιάζοντας, αφενός στην επικαιροποίηση των σχετικών παιδαγωγικών

αρχών, θεωριών και στρατηγικών, αφετέρου στον επαναπροσδιορισμό της σημασίας και βαρύτητας του

σχεδιασμού δραστηριοτήτων που ενθαρρύνουν τη βιωματική μάθηση και ευνοούν την ανάπτυξη και

καλλιέργεια μεταγνωστικών ικανοτήτων από τους μαθητές. Στο τέλος γίνεται φανερό ότι ο κόπος είναι

δυσανάλογος του αποτελέσματος, αφού για ένα 2ωρο εκπαιδευτικό σενάριο, χρειάζεσαι πολλαπλάσιες

ώρες για να το ετοιμάσεις. Επομένως οδηγείσαι στην συνειδητοποίηση, της ανάγκης της συνεργασίας

και του διαμοιρασμού της δουλειάς δηλαδή των σεναρίων. Εάν το αποτέλεσμα χρησιμοποιείται μόνο

από έναν δε γίνεται απόσβεση. Η δεύτερη συνεχόμενη εκτέλεση του σεναρίου κατέδειξε στον

εκπαιδευτικό πόσο ποιοτικότερο είναι το μάθημα όταν είναι υποψιασμένος: Σε επίπεδο σχεδιασμού -

για το πώς πολλές φορές, με πολύ μικρές παρεμβάσεις-διορθώσεις μπορείς να ενισχύσεις σημαντικά το

σενάριο. Σε επίπεδο υλοποίησης - για τις απορίες, τις δυσκολίες και τις πιθανές στρεβλώσεις που θα

αντιμετωπίσεις. Ο αναστοχασμός μετά την πρώτη παρέμβαση και τις άμεσες αλλαγές στη δεύτερη

εφαρμογή του σεναρίου, με όλες τις θετικές επιπτώσεις, του κατέδειξαν τη σπουδαιότητα του ( του

αναστοχαμού στον εκπαιδευτή).

ΠΑΡΑΡΤΗΜΑ

Σενάριο: HTML: Δημιουργία Ιστοσελίδας, Παράμετροι ετικετών, χρώμα υπόβαθρου και κειμένου,

κατάλογοι.

1. Τίτλος διδακτικού σεναρίου:

HTML: Δημιουργία Ιστοσελίδας, Παράμετροι ετικετών, χρώμα υπόβαθρου και κειμένου, κατάλογοι.

2. Εκτιμώμενη διάρκεια διδακτικού σεναρίου Η συνολική προβλεπόμενη διάρκεια του διδακτικού σεναρίου προσδιορίζεται στις 4 διδακτικές ώρες.

3. Ένταξη του διδακτικού σεναρίου στο πρόγραμμα σπουδών/προαπαιτούμενες

γνώσεις

Πρόκειται για διδακτικό σενάριο το οποίο εντάσσεται κατά κύριο λόγο στο μάθημα

«Προγραμματιστικά Εργαλεία για το Διαδίκτυο» της Β’ τάξης του τομέα Πληροφορικής του ΕΠΑ.Λ.

Πιο συγκεκριμένα, το σενάριο προορίζεται για μαθητές χωρίς ιδιαίτερες γνώσεις προγραμματισμού (η

ύπαρξή τους, ωστόσο, μπορεί να επηρεάσει την πορεία του διδακτικού σεναρίου) και με εξοικείωση στη

χρήση του διαδικτύου. Θεωρείται ότι οι μαθητές έχουν κατά το παρελθόν πλοηγηθεί σε διάφορες

ιστοσελίδες, επομένως έχουν τις απαραίτητες προσλαμβάνουσες και γνωστικές αναπαραστάσεις καθώς

και τις γνώσεις χρήσης του Σημειωματάριου και του Φυλλομετρητή. Θεωρείται, επίσης, ότι οι μαθητές

γνωρίζουν ήδη τη διαδικασία και τον τρόπο μορφοποίησης κειμένου με χρήση λογισμικού

επεξεργασίας κειμένου και είναι εξοικειωμένοι με τη σχετική ορολογία.

Στο ίδιο διδακτικό αντικείμενο δηλαδή τη δηλωτική γλώσσα HTML θεωρούμε ότι οι μαθητές έχουν

διδαχθεί και είναι ικανοί να:

αναγνωρίζουν και δημιουργούν αρχεία με τα δομικά στοιχεία της HTML.

Χρήση ετικετών <Html>, <Head>, <Title>, <Body>.

επιλέγουν και χρησιμοποιούν τις κατάλληλες ετικέτες για τη διαμόρφωση του κειμένου μιας

ιστοσελίδας.

Χρήση ετικετών <B> ,<I> ,<U>,<Hi>, <Center>,<Hr>.

Οι σχετικές έννοιες αποτελούν τμήμα της ύλης στο προαναφερόμενο μάθημα και εντάσσονται στη

θεματική ενότητα «Η γλώσσα HTML».

Επίσης το διδακτικό σενάριο δύναται να ενταχθεί στο μάθημα «Βασικές Υπηρεσίες Διαδικτύου» της Β’

Τάξης ΕΠΑΛ.

Η χρήση του διδακτικού σεναρίου είναι εφικτή και σε επίπεδο Γ’ τάξης Γυμνασίου, αφού υπάρχει η

εξοικείωση με τις σχετικές έννοιες και η απαραίτητη ωριμότητα.

Τα ιδιαίτερα χαρακτηριστικά της γλώσσας HTML καθιστούν τη διδασκαλία του συγκεκριμένου

σεναρίου εφικτή χωρίς ιδιαίτερες δυσκολίες και ικανή να αναπτύξει και ενισχύσει την αναλυτική σκέψη

των μαθητών.

4. Σκοποί και στόχοι του διδακτικού σεναρίου

Βασικός σκοπός του παρόντος διδακτικού σεναρίου είναι η κατανόηση της χρήσης των ετικετών και

παραμέτρων της HTML καθώς και η συνδυαστική χρήση τους προκειμένου οι μαθητές να είναι ικανοί να αναπτύσσουν ιστοσελίδες.

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

και μη αριθμητικών καταλόγων ενσωματωμένους σε ιστοσελίδες. Πιο συγκεκριμένα, οι επιμέρους στόχοι του σεναρίου συνίστανται στο να καταστήσουν τους μαθητές ικανούς να:

Κατανοούν τον τρόπο λειτουργίας της HTML.

Συντάσσουν τον κατάλληλο κώδικα HTML για την παρουσίαση μιας ιστοσελίδας.

Διακρίνουν τη χρήση και σύνταξη των παραμέτρων με εκείνη των ετικετών.

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

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

συντάσσουν απλούς καταλόγους (αριθμητικούς και μη αριθμητικούς).

αναγνωρίζουν το σκοπό χρήσης των καταλόγων.

προσθέτουν και να αφαιρούν στοιχεία σε καταλόγους.

κατατάσσουν καταλόγους τον ένα κάτω από τον άλλον.

χρησιμοποιούν τις κατάλληλες παραμέτρους για την εμφάνιση των καταλόγων.

Ελέγχουν και να αξιολογούν τη λύση ενός προβλήματος.

Αναγνωρίζουν τον πειραματισμό ως μέθοδο μάθησης με την άμεση αλληλεπίδραση των ενεργειών τους και των αποτελεσμάτων αυτών.

Συνεργάζονται και να προσφέρουν τις γνώσεις και τις ικανότητές τους στην ομάδα για την υλοποίηση μιας δραστηριότητας/εργασίας.

Βιώνουν την αυτοεκτίμηση και την εμπιστοσύνη στον εαυτό τους ως ενεργά υποκείμενα της μάθησης.

5. Περιγραφή του διδακτικού σεναρίου

Παρέμβαση 1: Υπόβαθρο, χρώμα κειμένου, παράμετροι ετικετών

Αρχικά ο μαθητής κατεβάζει από το Wiki του μαθήματος την πρώτη σελίδα από το φύλλο εργασίας Σ2-

Π1. Εναλλακτικά μπορεί να τα φορτώσει από κάποιο διαμοιραζόμενο κατάλογο στο τοπικό δίκτυο ή

και με flash disk. Σε ακραία περίπτωση ανάγκης, είναι δυνατόν να γίνουν οι 2 πρώτες δραστηριότητες

με εκτυπωμένα φύλλα εργασίας.

Δραστηριότητα 1 - Παρατηρούμε, εφαρμόζουμε παραμέτρους

Ο μαθητής προτρέπεται να ανοίξει το αρχείο «Δραστηριότητα 5-1.htm» με το notepad++ (εναλλακτικά με το

σημειωματάριο) για να μπορεί να κάνει τροποποιήσεις πειραματιζόμενος με διαφορετικές τιμές των παραμέτρων της

<HR>. Ταυτόχρονα θα πρέπει να έχει ανοιχτό το αρχείο και στον φυλλομετρητή. Είναι σημαντικό να

εμφανίζονται μαζί και τα 2 παράθυρα στην οθόνη έτσι ώστε, μετά από κάθε αλλαγή, με αποθήκευση

στο κειμενογράφο και ανανέωση στο φυλλομετρητή, να παρατηρεί άμεσα τις μεταβολές. Καλό θα

είναι η εικόνα με τα 2 παράθυρα να προβάλλεται και από τον βιντεοπροβολέα του εργαστηρίου.

Μετά το τέλος της δραστηριότητας από τους μαθητές ο εκπαιδευτικός κάνει τις απαιτούμενες αλλαγές,

όπως ζητά η δραστηριότητα, εξηγώντας ταυτόχρονα τι είναι η παράμετρος. Στο σημείο αυτό θα πρέπει

να εξηγηθεί η γενίκευση της χρήσης παραμέτρων και από άλλες ετικέτες. Θα πρέπει να αναφερθεί ότι:

Η χρήση τους δεν είναι υποχρεωτική αλλά προσαρμοζόμαστε στις απαιτήσεις.

Μερικές ετικέτες μπορούν να έχουν παραμέτρους με το ίδιο όνομα και συνεπώς με παρόμοια

χρήση.

Επίσης να επισημανθεί ότι

η παράμετρος είναι κομμάτι της ετικέτας και συνεπώς δεν περικλείεται μόνη της σε tags «<>».

Οι τιμές ανάλογα με την παράμετρο είναι καθορισμένες.

Καλό θα ήταν τα παραπάνω να λεχθούν μετά από συζήτηση με τους μαθητές με τη μορφή

ερωταπαντήσεων.

Προτιμήθηκε να γίνει η ανακάλυψη του τρόπου λειτουργίας των παραμέτρων μέσα από την ετικέτα

<HR> που θα γίνει κάτι σαν σάκος του μποξ, ώστε να δοθεί η επίσημη μάχη με την <Body>. H ετικέτα

<HR> είναι απλή, εφαρμόζεται εύκολα και μάλιστα σε πολλά σημεία. Η πολλαπλή εμφάνιση της

ετικέτας, με διαφορετικές εκδοχές λόγω παραμέτρων, μας επιτρέπει την άμεση σύγκριση, βοηθά την

βιωματική μάθηση και την ανακάλυψη της λειτουργίας και εφαρμογής των παραμέτρων.

Ο μαθητής κατεβάζει από το Wiki του μαθήματος την δεύτερη σελίδα από το φύλλο εργασίας Σ2-Π1.

Δραστηριότητα 2 – Επεκτείνουμε παραμέτρους

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

παραμέτρων για την εντολή <HR>. Εδώ καλούνται να μεταφέρουν εμπειρία, από την προηγούμενη

δραστηριότητα εφαρμόζοντας την στην ετικέτα <Body>.

Ο μαθητής πρέπει να αντιστοιχήσει τα ονόματα 2 παραμέτρων της <BODY> με 2 ιδιότητες που

δίνονται. Ίσως χρειαστούν βοήθεια οι μαθητές που δεν ξέρουν στοιχειώδη Αγγλικά (text, color).

Αρχικά να διευκρινιστεί ότι το bgcolor είναι συντόμευση του background color και να επισημανθεί ότι

και οι 2 παράμετροι αφορούν το χρώμα.

Δραστηριότητα 3 – Γύρω από τα χρώματα

Η δραστηριότητα 3 (ιστοεξερεύνηση) δεν χρειάζεται να γίνει διεξοδικά. Οι μαθητές συνήθως από τα

προηγούμενα μαθήματα της HTML μαθαίνοντας τα βασικά της μορφοποίησης (<b>, <i>, <u>) ζητούν

να μάθουν πως αλλάζει το χρώμα. Αυτή η ανάγκη μπορεί και να τους καλλιεργηθεί δείχνοντας στα

προηγούμενα μαθήματα κάποια παραδείγματα που παρεμπιπτόντως χρησιμοποιούν χρώμα

(ανεπίσημα). Το χρώμα θα το διδαχθούν στα πολυμέσα το επόμενο έτος, οπότε δεν είναι εξοικειωμένοι

με τους δεκαεξαδικούς κωδικούς χρωμάτων. Άλλωστε δεν είναι απαραίτητο. Για να κερδίσουμε το

ενδιαφέρον των μαθητών το ωραίο είναι ένας τρόπος. Το χρώμα και οι συνδυασμοί χρωμάτων είναι ένα

μέσο προς τον σκοπό αυτό.

Κάποιες ομάδες που έχουν τελειώσει γρηγορότερα τις δραστηριότητες 1 και 2 μπορούν να αφιερώσουν

μεγαλύτερο χρόνο στη δραστηριότητα 3 δίνοντας χρόνο στο καθηγητή να βοηθά τις πιο

αργοπορημένες.

Παρέμβαση 2: Χρώμα, τύπος, μέγεθος γραμματοσειράς, παράμετροι ετικετών

Ο μαθητής κατεβάζει από το Wiki του μαθήματος τη πρώτη σελίδα από το φύλλο εργασίας Σ2-Π2. Ο

καθηγητής αφήνει να προβάλλεται από τον βιντεοπροβολέα το ζητούμενο της επόμενης

δραστηριότητας για να φανεί η ανάγκη που θέλουμε να εξυπηρετήσουμε.

Δραστηριότητα 1 - Μεταφέρουμε, επεκτείνουμε

Προτείνεται στις ομάδες να δημιουργήσουν το αρχείο «Userxx Δραστηριότητα 5-4.htm» με το

notepad++ (εναλλακτικά με το σημειωματάριο) για να γράφουν σε κώδικα HTML και ταυτόχρονα να

έχουν ανοιχτό το αρχείο και στον φυλλομετρητή. Είναι σημαντικό να εμφανίζονται μαζί και τα 2

παράθυρα στην οθόνη έτσι ώστε, μετά από κάθε αλλαγή, με αποθήκευση στο κειμενογράφο και

ανανέωση στο φυλλομετρητή, να παρατηρούν άμεσα τις μεταβολές.

Ο εκπαιδευτικός αφού διαπιστώσει ότι η δραστηριότητα έχει προχωρήσει ‘μοιράζει’ τη δεύτερη σελίδα

της δραστηριότητας και προβάλει με τον βιντεοπροβολέα το τελικό αποτέλεσμα της δραστηριότητας

Στην πορεία της δραστηριότητας ο καθηγητής θα πρέπει να είναι έτοιμος να δεχτεί απορίες γιατί δεν

αλλάζει ο τύπος της γραμματοσειράς μέσα από την ετικέτα < Body> οπότε θα πρέπει να εξηγήσει πάλι

ότι οι ετικέτες δέχονται ορισμένες μόνο παραμέτρους.

Για να αλλάξουν το μέγεθος της γραμματοσειράς, θα πρέπει να τους κατευθύνει στο πώς αλλάζει το

μέγεθος γραμμής <HR>. Το size είναι παράμετρος με το ίδιο όνομα και για τις ετικέτες και με

παρόμοια δράση. Κάποιοι πιθανόν να το ψάξουν στο διαδίκτυο.

Με το πέρας της διεργασίας ο εκπαιδευτικός θίγει υπό μορφή ανοιχτής συζήτησης κάποια θέματα,

απορίες ή διευκρινήσεις που προέκυψαν στη διάρκεια της δραστηριότητας. Στο σημείο αυτό θα πρέπει

να γίνει και η επισήμανση ότι έχουμε χρησιμοποιήσει μια ετικέτα εμφωλιασμένη (font μέσα σε font).

Τέλος είναι στη κρίση του καθηγητή – ανάλογα βέβαια και κατά το πόσο έχουν επιτελεσθεί οι στόχοι, να

δείξει (εξηγήσει) ή όχι το κώδικα λύση της δραστηριότητας.

Δραστηριότητα 2 – Επαληθεύουμε.

Στη συνέχεια για τη δραστηριότητα 2 ο εκπαιδευτικός χωρίζει τις ομάδες ώστε ο κάθε μαθητής χωριστά

να απαντά στη φόρμα ερωτήσεων μέσα από το Wiki του μαθήματος με σκοπό την επισήμανση και

διευκρίνιση κάποιων σημείων αλλά και για αξιολόγηση και αναστοχασμό.

Παρέμβαση 3: αριθμητικοί κατάλογοι στην HTML

Αρχικά ο μαθητής κατεβάζει από το Wiki του μαθήματος το φύλλο εργασίας Σ1-Π3.

Δραστηριότητα 1

Αρχικά γίνεται μια παρουσίαση για το τι είναι αριθμητικός κατάλογος. Είναι σαν έννοια γνωστή από

τους επεξεργαστές κειμένου. Αφού λοιπόν γίνει αναφορά στις πρότερο γνώσεις τους, γίνεται μια

παρουσίαση, επίδειξη με τη βοήθεια του βιντεοπροβολέα. Χρειάζεται ιδιαίτερος τονισμός στη χρήση της

ετικέτας <Li> λόγω του ότι ο τρόπος λειτουργίας της αν και απλώς δεν μοιάζει με κάποιας άλλης.

Δραστηριότητα 2

Είναι μια απλή δραστηριότητα που θα πρέπει να προσεχθεί ώστε να γίνει και μάλιστα σωστά ώστε να

είναι μικρότερο το βάρος που θα πέσει στην επόμενη δραστηριότητα.

Δραστηριότητα 3

Καλό θα είναι με τη βοήθεια του βιντεοπροβολέα να εντοπισθούν τα σημεία που χρήζουν ιδιαίτερης

προσοχής. Τέτοια θα μπορούσε να είναι

Καινούριο <OL> για κάθε ξεχωριστό κατάλογο (βοηθούν και οι επικεφαλίδες)

Ετικέτα <Li> για κάθε στοιχείο αρίθμησης.

Υπερισχύει το σύμβολο αρίθμησης της πιο πρόσφατης δήλωσης.

Στη παράμετρο start βάζουμε νούμερο και όχι αριθμητικό σύμβολο.

Όχι ετικέτες <OL> που δεν κλείνουν </OL>.

Με το τέλος της δραστηριότητας να γίνει επίδειξη και όπου χρειάζεται επεξήγηση του σωστού κώδικα

της δραστηριότητας.

Δραστηριότητα 4

Η δραστηριότητα 4 ουσιαστικά διευκρινίζει είτε επισείει την προσοχή στα προαναφερόμενα σημεία

προσοχής με τη μορφή Σωστού - Λάθους.

Παρέμβαση 4: Μη αριθμητικοί κατάλογοι στην HTML

O μαθητής κατεβάζει από το Wiki του μαθήματος το φύλλο εργασίας Σ2-Π4.

Δραστηριότητα 1 - Επιχειρώ

Αρχικά γίνεται μια παρουσίαση για το τι είναι μη αριθμητικός κατάλογος. Δείχνονται από τον

βιντεοπροβολέα οι 3 βασικές μορφές του, εξηγείται ο τρόπος σύνταξης και παρατηρείται η ομοιότητα

με τους αριθμητικούς καταλόγους. Για του λόγου το αληθές μετατρέπουμε τη «Γενιά του '30-ποίηση.htm»

από το προηγούμενο μάθημα σε μη αριθμητικό κατάλογο. Δίνουμε προσοχή ώστε:

Η ετικέτα να είναι <UL> και μάλιστα καλό θα ήταν χωρίς “type” και οπωσδήποτε χωρίς

“start”

Στην ετικέτα <LI> να μην αλλάζει το “type”

Δραστηριότητα 2 – Μετατρέπω

Στη δραστηριότητα αυτή ο εκπαιδευτικός πρέπει να προσέξει, ώστε να μην περάσει το φαινόμενο

σωστό αποτέλεσμα με λάθος τρόπο, κάτι που θα βάραινε πολύ την επόμενη δραστηριότητα και τότε θα

είναι δύσκολο να μαζευτεί. Ας σημειωθεί ότι ένας συντακτικά λάθος κατάλογος, μας δίνει

εμφανισιακά έναν μη αριθμητικό κατάλογο με σύμβολα “disc”. Αυτή η εμφάνιση είναι το ζητούμενο

για το πρώτο μέρος της δραστηριότητας.

Δραστηριότητα 3 - Δημιουργώ

Στη δραστηριότητα αυτή κατασκευάζουμε ιστοσελίδα από την αρχή. Σημεία που χρήζουν προσοχής θα

μπορούσε να είναι:

Καινούριο <UL> για κάθε ξεχωριστό κατάλογο (βοηθούν και οι επικεφαλίδες)

Ετικέτα <Li> για κάθε στοιχείο αρίθμησης.

Η ετικέτα <Li> μόνο σε μια περίπτωση χρειάζεται “type”

Δεν υπάρχει πουθενά “start” και “UL” βάζουμε νούμερο και όχι αριθμητικό σύμβολο.

Όχι ετικέτες <UL> που δεν κλείνουν </UL>.

Με το τέλος της δραστηριότητας να γίνει επίδειξη και όπου χρειάζεται επεξήγηση του σωστού κώδικα

της δραστηριότητας.

Δραστηριότητα 4 - Αποσαφηνίζω, εμπεδώνω

Η δραστηριότητα 4 ουσιαστικά είτε διευκρινίζει, είτε επισείει την προσοχή στα προαναφερόμενα σημεία

προσοχής αλλά και σε μερικά ακόμη με τη μορφή Σωστού – Λάθους και πολλαπλής επιλογής.

6. Επιστημολογική προσέγγιση και εννοιολογική ανάλυση – θέματα θεωρίας του διδακτικού σεναρίου

Οι τεχνολογίες της πληροφορίας και της επικοινωνίας θεωρούνται πλέον θεμελιώδεις όσον αφορά την

εκπαιδευτική διαδικασία. Η Ευρωπαϊκή ένωση αναγνωρίζει την αναγκαιότητα της ενσωμάτωσηςτων ΤΠΕ στην εκπαίδευση και θέτει σε εφαρμογή projects που υποστηρίζουν σχετικά θέματα. Ένα τέτοιο

καινοτόμο πρόγραμμα είναι το project xperimania.

http://www.xperimania.net/ww/en/pub/xperimania/homepage.htm

Η ομαδοσυνεργατική μάθηση μέσα στο πλαίσιο της ομαδικής ή συνεργατικής προσπάθειας μεταξύ των

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

αυτών, προσφέρει αναμφισβήτητα οφέλη (Ματσαγγούρας, 2000).

Η HTML, ως περιβάλλον ανάπτυξης εφαρμογών για τον παγκόσμιο πληροφοριακό ιστό (www), προσφέρεται για τη δημιουργία μαθησιακών δραστηριοτήτων τόσο ατομικών όσο και ομαδικών και

αποτελεί ένα εργαλείο το οποίο μπορεί να χρησιμοποιηθεί σε μια σειρά παιδαγωγικών προσεγγίσεων για διαφορετικά επίπεδα γνώσεων και εξειδίκευσης.

7. Χρήση Η.Υ. και γενικά ψηφιακών μέσων για το διδακτικό σενάριο

Η HTML, παρά τους περιορισμούς της, αποτελεί το κύριο εργαλείο ανάπτυξης εφαρμογών στο

περιβάλλον του παγκόσμιου ιστού. Η ευκολία χρήσης, ως κύριο χαρακτηριστικό της, συνέβαλε

ουσιαστικά στην ανάπτυξη μεγάλου αριθμού ιστοσελίδων με αυτή.

Η εξοικείωση, λοιπόν, με τη δηλωτική γλώσσα HTML, ευνοεί και καλλιεργεί τη λογική σκέψη και την

ικανότητα εντοπισμού και διόρθωσης λαθών (εκσφαλμάτωση) με τρόπο αντίστοιχο της διδασκαλίας

μιας γλώσσας προγραμματισμού. Επιπρόσθετα και λόγω του μεγάλου αριθμού υφιστάμενων

εφαρμογών στον παγκόσμιο πληροφοριακό ιστό οι οποίες έχουν αναπτυχθεί σε γλώσσα HTML, οδηγεί

στην απόκτηση ενός επιπρόσθετου πλεονεκτήματος σε ότι αφορά τα λοιπά εργαλεία ανάπτυξης

εφαρμογών σε περιβάλλον παγκόσμιου πληροφοριακού ιστού, τα οποία λειτουργούν πάνω σε

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

8. Αναπαραστάσεις των μαθητών/πρόβλεψη δυσκολιών στο διδακτικό σενάριο

Οι προϋπάρχουσες γνωστικές αναπαραστάσεις των μαθητών σε ότι αφορά στην πλοήγηση στο

διαδίκτυο και στην ιστοεξερεύνηση προβλέπεται πως θα βοηθήσουν τους μαθητές να αντιληφθούν τις

βασικές έννοιες που σχετίζονται με τα δομικά στοιχεία μιας ιστοσελίδας.

Επιπρόσθετα, η εξοικείωσή τους με τη διαδικασία και τον τρόπο μορφοποίησης κειμένου με χρήση

λογισμικού επεξεργασίας κειμένου, η χρήση οικείου λογισμικού (Σημειωματάριο και Φυλλομετρητής)

καθώς και η πραγματοποίηση των προτεινόμενων δραστηριοτήτων με προοδευτικά αυξανόμενο βαθμό

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

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

του διδακτικού σεναρίου.

9. Διδακτικό συμβόλαιο.

Κατά την εφαρμογή του διδακτικού σεναρίου δεν αναμένεται να υπάρξουν προβλήματα σε σχέση με τη

λειτουργία των υπολογιστών και την εκκίνηση του απαιτούμενου λογισμικού. Δεν προβλέπεται, συνεπώς, διδακτικός θόρυβος και ανατροπή του διδακτικού συμβολαίου, αφού τα Φύλλα Εργασίας

είναι απλά, ρεαλιστικά και καθοδηγούν βηματικά το μαθητή στην ομαλή εξοικείωσή του με την

ανάπτυξη ιστοσελίδων με τη χρήση της δηλωτικής γλώσσας HTML.

10. Υποκείμενη θεωρία μάθησης

Οι προτεινόμενες δραστηριότητες εντάσσονται σε μια τυπική εποικοδομιστική προσέγγιση –στους

μαθητές προτείνονται μια σειρά προβλημάτων-ασκήσεων να επιλύσουν.

Η οργάνωση των μαθητών σε δυάδες προσφέρει ένα θετικό περιβάλλον για την ανάπτυξη ισχυρής

αλληλεπίδρασης που ευνοεί τη μάθηση. Υπ’ αυτήν την έννοια, το διδακτικό σενάριο θεμελιώνεται, επίσης, στην κοινωνικοπολιτισμική θεωρία μάθησης.

Επιπρόσθετα, καθώς οι δραστηριότητες έχουν αποτέλεσμα άμεσα ορατό στους μαθητές, ενδέχεται να

υπάρξει επιθυμία τροποποίησης των προτεινόμενων παραμέτρων σύμφωνα με τις επιθυμίες τους, γεγονός που ενθαρρύνει τον πειραματισμό και την ενεργητική συμμετοχή.

11. Οργάνωση της τάξης – εφικτότητα σχεδίασης

Οι μαθητές προβλέπεται να εργαστούν σε δυάδες στο εργαστήριο πληροφορικής. Το απαραίτητο

λογισμικό, το Σημειωματάριο, ο Φυλλομετρητής και το λογισμικό επεξεργασίας κειμένου, που

απαιτείται για την υλοποίηση των δραστηριοτήτων από τους μαθητές καθώς και το λογισμικό Παρουσιάσεων που απαιτείται για την παρουσίαση των σχετικών εννοιών από τον εκπαιδευτικό,

υπάρχει στους υπολογιστές του εργαστηρίου και καθιστά την υλοποίηση του διδακτικού σεναρίου

εφικτή χωρίς αναμενόμενα προβλήματα.

12. Αξιολόγηση

Η εκμάθηση της HTML γίνεται σε σειρά μαθημάτων. Τα μαθήματα αυτά δεν είναι ανεξάρτητα αλλά το

καθένα στηρίζεται στα προηγούμενα. Η επιτυχημένη παρακολούθηση των μαθημάτων, η ανταπόκριση

των μαθητών στην εκπόνηση των δραστηριοτήτων και η επιτυχής συμπλήρωση των φύλλων εργασίας

αποτελούν θετική αξιολόγηση για το σενάριο. Μέσα από τη συμμετοχή στις δραστηριότητες των Φ.Ε.

είναι εύκολο να γίνει και η αξιολόγηση των μαθητών. Οι ερωτήσεις αξιολόγησης χρησιμοποιούνται

περισσότερο σαν ανακεφαλαίωση, εντοπισμό λεπτών σημείων, για εδραίωση της κατακτηθείσας γνώσης

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

https://drive.google.com/folderview?id=0B0EqX6naTIcuQ2hKNkNsTXNOUEU&usp=sharing

13. Το επιμορφωτικό σενάριο

Φύλλο εργασίας 1 - Υπόβαθρο, χρώμα κειμένου, παράμετροι ετικετών

Φύλλο εργασίας 2 - Χρώμα, τύπος, μέγεθος γραμματοσειράς, παράμετροι ετικετών

Φύλλο εργασίας 3 - Υπόβαθρο, χρώμα κειμένου, παράμετροι ετικετών

Φύλλο εργασίας 4 - Μη ταξινομημένοι ή μη αριθμητικοί κατάλογοι

Το παρόν σενάριο υλοποιήθηκε δύο φορές, την ίδια χρονικά περίοδο, σε διαφορετικά τμήματα Β

πληροφορικής ΕΠΑΛ. Οι δύο υλοποιήσεις (Σ1,Σ2) έχουν μικροδιαφορές κυρίως στο τρόπο εμφάνισης

των δοσμένων Φ.Ε. στους μαθητές. Ύστερα από την διδακτική παρέμβαση στο πρώτο τμήμα,

ακολουθούσαν μικρές διορθώσεις στο Φ.Ε. και με το καινούριο βελτιωμένο Φ.Ε γινόταν η διδακτική

παρέμβαση στο δεύτερο τμήμα. Συνεπώς πληρέστερα είναι τα φύλλα εργασίας της δεύτερης

υλοποίησης (Σ2) του σεναρίου (αυτά που αναφέρονται παραπάνω).

Θα πρέπει να σημειώσω ότι θεωρώ το πρώτο τμήμα των μαθητών καλύτερο και σαν μονάδες αλλά και

σαν μέσο όρο. Παρόλα αυτά η διαδικασία ήταν ομαλότερη στο δεύτερο τμήμα. Αυτό θα πρέπει να

οφείλεται σε δύο λόγους. Αφενός στη μεγαλύτερη πληρότητα του Φ.Ε. αφετέρου στην άνεση του

εκπαιδευτικού εκτελώντας για δεύτερη φορά μέσα σε λίγες μέρες το ίδιο σενάριο. Επίσης ευχάριστη

έκπληξη ήταν η απόδοση των μαθητών του δεύτερου τμήματος, στο διαγώνισμα πάνω στα κεφάλαια

αυτά.

Παρακάτω επισυνάπτονται και περιγράφονται τα Φ.Ε. και τα βοηθητικά αρχεία των παρεμβάσεων που

προτείνονται για την υλοποίηση του διδακτικού σεναρίου

14. Προτάσεις για περαιτέρω δραστηριότητες – προτεινόμενες εργασίες

Συμπληρωματικές δραστηριότητες για εργασία στο σπίτι. Στα τμήματα που έτρεξε το σενάριο αυτό οι

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

του 85%. Είναι λοιπόν εφικτή η εργασία και στο σπίτι με τη βοήθεια κάποιου φύλλου. Βέβαια όσο

κατάλληλα και εάν είναι σχεδιασμένο το φύλλο, για την άσκηση στο σπίτι, έχουμε τα προβλήματα της

έλλειψης υποστήριξης και αλληλοβοήθειας κάτι που επιτελείται στο μαθησιακό περιβάλλον της τάξης.

Προτείνεται λοιπόν η παρουσίαση και συζήτηση μέσα στο χρόνο της παρέμβασης για την κατ’ οίκον

εργασία. Τέτοιες εργασίες θα μπορούσε να είναι δημιουργία ιστοσελίδων με τα χρώματα της ίριδας ή

μαθήματα πληροφορικής.

Φόρμα ηλεκτρονικών ερωτήσεων. Αξιολόγηση ή ομαδοσυνεργατική δραστηριότητα. Ο κάθε

μαθητής συμπληρώνει στο τέλος του μαθήματος μια φόρμα ερωτήσεων σε ηλεκτρονική μορφή. Από τις απαντήσεις αυτών ο καθηγητής μπορεί να προβεί σε αξιολόγηση του μαθητή και κατ’ επέκταση του

σεναρίου. Στην πραγματικότητα οι ερωτήσεις δεν είναι φτιαγμένες μόνο για αξιολόγηση αλλά και για

να τονίσουν κάποια σημεία, να αποσαφηνίσουν κάποια άλλα και γενικότερα να θιχθούν κάποια θέματα με διαφορετικό τρόπο. Στην πραγματικότητα στο σενάριο αυτό γίνεται με ελλειπή τρόπο γιατί

ενώ τίθενται ερωτήματα οι απαντήσεις δεν κοινωνούνται.

Προτείνεται

Η παρουσίαση και συζήτηση των απαντήσεων που δόθηκαν από τους μαθητές με την βοήθεια των Web 2 εργαλείων (Google Drive) άμεσα στην ίδια ή σε επόμενη διδακτική παρέμβαση, με

σκοπό τον αναστοχασμό των μαθητών σχετικά με τις διδαχθείσες έννοιες και όρους.

Επίσης είναι δυνατόν η συμπλήρωση της φόρμας να γίνεται και αυτή ομαδοσυνεργατικά από

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

αντικείμενο.

Τέλος αν θέλουμε προσωπική αξιολόγηση ή και αξιολόγηση της μεθόδου, εφόσον το επιτρέπει

και ο χρόνος, μπορούμε μετά από την παρουσίαση των απαντήσεων και της σχετικής συζήτησης, να προβούμε σε εκ νέου συμπλήρωσης της λίστας, ατομικά αυτή τη φορά.

Παρακάτω περιγράφεται η διαδικασία συμπλήρωσης της φόρμας ερωτήσεων για να φανούν

πλεονεκτήματα και μειονεκτήματα των παραπάνω προτάσεων Συμπληρώνοντας διαδικτυακά τη φόρμα ερωτήσεων. Στις 3 από τις 4 παρεμβάσεις στο παραπάνω σενάριο, στο τέλος της ώρας οι μαθητές μπαίνουν στο wiki

του μαθήματος και συμπληρώνουν μια ηλεκτρονική φόρμα και την κάνουν αποστολή.

Υπάρχει μια σχετική αναστάτωση γιατί θα πρέπει, από τις ομάδες των 2 ατόμων που κάθονται στον

κάθε υπολογιστή, να μείνει ο ένας μαθητής, για να συμπληρώσει τη φόρμα των ερωτήσεων. Ο άλλος της

ομάδος κάπου θα πρέπει να περιμένει, πιθανόν εκτός τάξης, να τελειώσει ο πρώτος και στη συνέχεια να συμπληρώσει και ο ίδιος τη φόρμα.

Η ηλεκτρονική φόρμα ερωτήσεων είναι στημένη στο google drive. Αυτή παίρνει τις συμπληρωμένες φόρμες και τις εμφανίζει όλες μαζί σε ένα περιβάλλον λογιστικού φύλλου. Αυτό γίνεται άμεσα σε

πραγματικό χρόνο .

Επίσης υπάρχει η επιλογή «Εμφάνιση σύνοψης απαντήσεων» που μας επιτρέπει να βλέπουμε συνολικά

τα ποσοστά των απαντήσεων για κάθε ερώτηση

15. Χρήση εξωτερικών πηγών

http://wlearn.gr/index.php/html-52

http://www.it.uom.gr/project/html2/main.html

About.com

HTML Goodies

webreference.com

projectcool's developerzone

Βιβλιογραφία

Noye D., & Piveteau J. (1999). ‘Πρακτικός Οδηγός του Εκπαιδευτή’, Μεταίχμιο.

Κόκκος Α., & Λιοναράκης Α. (1998). ‘Σχέσεις Διδασκόντων – Διδασκομένων’, Τόμος Β, Εκδόσεις

ΕΑΠ.

Ματσαγγούρας, Η. (2000). ‘Ομαδοσυνεργατική διδασκαλία και μάθηση’. Αθήνα: Γρηγόρης

Γαβαλάς, Δ. (2004). Πανεπιστημιακές Σημειώσεις Δικτυακά Πολυμέσα Ι (Β΄ Έτος, 3ο εξάμηνο).

Πανεπιστήµιο Αιγαίου Τµήµα Πολιτισµικής Τεχνολογίας Και Επικοινωνίας

Παιδαγωγικό ινστιτούτο (2010). Προγραμματιστικά εργαλεία για το διαδύκτιο .

Σάμψων, Δ. (2003). Πανεπιστημιακές Σημειώσεις ΤΕ065 Κεφ 4: Η Γλώσσα Σήμανσης HTML

http://utopia.duth.gr/~ck7233/kef2.doc.

Βαφόπουλος, Μ. ( 2011). ‘Χρήση των ΤΠΕ για την άμβλυνση των περιφερειακών ανισοτήτων:

Θεωρία, Τεχνολογία και Στρατηγική’. Διδακτορική διατριβή

http://vafopoulos.org/sites/default/files/sites/default/files/uploaded/phd_vafopoulos.pdf

Βοηθητικοί ιστότοποι

https://drive.google.com/folderview?id=0B0EqX6naTIcuQ2hKNkNsTXNOUEU&usp=sharing

Βρίσκονται τα παραδοτέα των μαθητών από τα φύλλα εργασίας

http://isepal.pbworks.com/ Χώρος τύπος wiki για τους μαθητές της Β πληροφορικής του ΕΠΑ.Λ.

Κορυδαλλού. Εδώ μας ενδιαφέρουν οι αναρτήσεις για την HTML (username: synedrio, password:

synedrio)

16. Φύλλα Εργασίας

ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ 1 – Υπόβαθρο, χρώμα κειμένου, παράμετροι ετικετών

Δραστηριότητα 1 - Παρατηρούμε, εφαρμόζουμε παραμέτρους

Περιγραφή διαδικασίας

Κατεβάστε από το wiki του μαθήματος το αρχείο «Δραστηριότητα 5-1.htm». Χωρίστε την

οθόνη στα δύο ανοίγοντας το παραπάνω αρχείο με δύο τρόπους:

Αριστερό παράθυρο Το σημειωματάριο με ανοιγμένο το αρχείο «Δραστηριότητα 5-1.htm». Στο

παράθυρο αυτό βλέπουμε και επίσης μπορούμε να αλλάξουμε τον κώδικα του Html αρχείου.

Δεξιό παράθυρο με τον firefox (ή όποιον άλλο φυλλομετρητή έχετε) ανοίγουμε το αρχείο «Δραστηριότητα 5-1.htm»

Τι πρέπει να κάνετε Δείτε στο δεξιό παράθυρο (firefox) τις 2 οριζόντιες γραμμές στην αρχή και στο τέλος του

κειμένου. Εντοπίστε στο αριστερό παράθυρο, στον κώδικα, την ετικέτα <HR> που όπως μέχρι τώρα ξέραμε, χαράζει απλές οριζόντιες γραμμές από την μια άκρη στην άλλη όπως αυτή στο

τέλος του κειμένου) .

Παρατηρείστε με ποια αλλαγή του κώδικα, η οριζόντια γραμμή στην αρχή του κειμένου, αλλάζει από την τυπική εμφάνιση1.

Αλλάξτε στη γραμμή βάζοντας: το μέγεθος2 να είναι 5, το πλάτος3 να είναι 80%, το χρώμα4 να είναι κόκκινο .

Σώστε το αρχείο σαν «userXX-δραστηριόττητα 5-1.htm» όπου ΧΧ το user name που κάνετε login π.χ .“user10-δραστηριόττητα 5-1.htm”.

Δραστηριότητα 2 – Επεκτείνουμε παραμέτρους

Η ετικέτα <Body> με τη βοήθεια 2 παραμέτρων - Bgcolor, Text, μπορεί να αλλάξει το

χρώμα του υπόβαθρου και του κειμένου.

Τι πρέπει να κάνετε

Εξακολουθούμε να δουλεύουμε με το αρχείο «userXX-δραστηριόττητα 5-1.htm

Αρχικά βάλτε την κατάλληλη παράμετρο ώστε να αλλάξει το χρώμα του υπόβαθρου σε κίτρινο

Στη συνέχεια προσθέστε και την άλλη παράμετρο ώστε το κείμενο να γίνει πράσινο.

Σώστε το αρχείο σαν «userXX-δραστηριόττητα 5-1.htm».

Δραστηριότητα 3 – Γύρω από τα χρώματα

1 Κάποιες ετικέτες όπως και η <HR > έχουν παραμέτρους που διευκρινίζουν τη λειτουργία της

ετικέτας. Η συνηθισμένη μορφή είναι <ετικέτα παράμετρος = “τιμή_παραμέτρου”>. Μια

ετικέτα μπορεί να έχει πολλές ή και καμία παράμετρο.

2 Το μέγεθος είναι σε pixel 3 To πλάτος μπορεί να είναι και σε pixel 4 Το χρώμα μπορεί να είναι και σε εξαψήφια δεκαεξαδική μορφή π.χ. « 1AF23C»

Ο ιστότοπος http://www.colorcombos.com/index.html είναι φτιαγμένος για να βοηθήσει

τους web developers να δοκιμάζουν και να δουν πως διαφορετικά χρώματα συνδυάζονται

στην οθόνη

Περιηγηθείτε στον παραπάνω ιστότοπο . Μπορείτε να δείτε:

Στο πίνακα Popular Color Tags τα ονόματα των πιο συνηθισμένων χρωμάτων

Στο πίνακα Popular Colors τον δεκαεξαδικό κωδικό των πιο διάσημων χρωμάτων

Στο πίνακα Popular Community Combos παλέτες συνδυασμών χρωμάτων

Μπορείτε (π.χ. στο μενού Combo Tester) να φτιάξετε δικάσας χρώματα και συνδυασμούς

ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ 2 - Χρώμα, τύπος, μέγεθος γραμματοσειράς, παράμετροι

ετικετών

Δραστηριότητα 1 – Μεταφέρουμε επεκτείνουμε

Αλλαγή χρώματος σε εστιασμένο κείμενο

Στο προηγούμενο μάθημα αλλάξαμε το χρώμα του υπόβαθρου της ιστοσελίδας αλλά και το

χρώμα όλου του κειμένου με τη βοήθεια των παραμέτρων του <BODY>

Ερώτηση

Πως θα καταφέρουμε να έχουμε διαφορετικό χρώμα κειμένου, από αυτό που έχουμε

ορίσει στη <Body>, σε κάποια παράγραφο ή γραμμή ή λέξη ή χαρακτήρα ;

Απάντηση

Υπάρχει η εντολή <Font>…</Font> που με την παράμετρο χρώματος «Color=…»

καθορίζει το χρώμα του κειμένου που περιέχεται μεταξύ ανοίγματος και κλεισίματος της

εντολής.

Τι πρέπει να κάνετε

Φτιάξτε το αρχείο «userXX-δραστηριόττητα 5-4.htm» ώστε να εμφανίζεται όπως το

παρακάτω.

Αλλαγή γραμματοσειράς σε εστιασμένο κείμενο

η εντολή <Font> με την παράμετρο γραμματοσειράς

«Face=… » μπορεί να καθορίσει και τη γραμματοσειρά του κειμένου.

Τι πρέπει να κάνετε

Ορίστε στη κόκκινη γραμμή και στη Πράσινη γραμμή διαφορετικές

γραμματοσειρές.

Μπορούμε την ίδια παράμετρο αλλαγής γραμματοσειράς να την εφαρμόσουμε

στην ετικέτα <Body> ώστε να αλλάξει η γραμματοσειρά σε όλο χώρο που έχει

εμβέλεια η εντολή; Δοκιμάστε.

Μπορούμε μόνο τη μεσαία λέξη (δηλαδή τη λέξη ‘είναι’) στην πράσινη γραμμή να

την εμφανίζουμε με χρώμα μπλέ (όπως στην παρακάτω εικόνα).

Μπορούμε με τη βοήθεια κάποιας παραμέτρου της εντολής <Font> να αλλάξουμε

και το μέγεθος της λέξης ‘είναι’, (θυμηθείτε την εντολή HR).

Αποθηκεύστε το αρχείο «userXX-δραστηριόττητα 5-4.htm»

Δραστηριότητα 2 - Επαληθεύουμε

1. Ορισμένες ετικέτες μπορεί να ακολουθούνται από παραμέτρους που διευκρινίζουν

την λειτουργία της ετικέτας

o Σωστό o Λάθος

2. Ποιο από τα παρακάτω είναι αληθές;

o Κάθε ετικέτα έχει τις δικές της παραμέτρους

o Όλες οι ετικέτες έχουν τις ίδιες παραμέτρους

o Κάποιες ετικέτες έχουν μερικές κοινές παραμέτρους

o Τίποτα από τα παραπάνω

3. Με τις παραμέτρους της ετικέτας <BODY> μπορούμε να αλλάξουμε το χρώμα του

υπόβαθρου και το χρώμα του κειμένου.

o Σωστό o Λάθος

4. Ποιο από τα παρακάτω είναι αληθές;

Στις παραμέτρους των εντολών που αναφέρονται στο χρώμα, βάζουμε τον ορισμό του

χρώματος …

o Με την δεκαεξαδικό κωδικό του χρώματος

o Με το όνομα του χρώματος

o Με κάποιον από τους δύο παραπάνω τρόπους

o Τίποτα από τα παραπάνω

5. Πως μπορούμε να κάνουμε κάποιο κομμάτι του κειμένου που εμφανίζεται στην

οθόνη αόρατο;

6. Όταν αλλάζουμε το χρώμα του κειμένου στην ετικέτα «Body» αλλάζει το χρώμα

που εμφανίζεται ο τίτλος του παραθύρου; Ναι ή όχι και γιατί;

7. Θέλω να εμφανίσω κείμενο με κόκκινο χρώμα. Επιλέξτε το σωστό από τα

παρακάτω

o <BODY TEXT=RED> <FONT COLOR= BLUE > Είμαι κείμενο κόκκινο </FONT>

</BODY>

o <BODY FONT COLOR= RED > Είμαι κείμενο κόκκινο </BODY /FONT >

o <BODY BGCOLOR=BLACK> < COLOR= RED > Είμαι κείμενο κόκκινο </COLOR>

</BODY>

o <BODY> <FONT COLOR= RED FACE=ARIEL> Είμαι κείμενο κόκκινο </FONT>

</BODY>

6. Ποιες από τις παρακάτω μπορεί να είναι παράμετροι της ετικέτας <BODY>

o Align

o Bgcolor

o Width

o Color

o Size

o Text

o Face

7. Ποια παράμετρος από τις παρακάτω δεν είναι της ετικέτας <FΟΝΤ>

o Color

o Size

o Text

o Face 8. Η ετικέτα <FONT> είναι διπλή (ανοίγει, κλείνει) και συντάσσεται στο κύριο σώμα

του κώδικα δηλαδή μέσα στην ετικέτα <BODY>…</BODY>.

o Σωστό o Λάθος

9. Ανάμεσα στην ετικέτα αρχής και τέλους της ετικέτας <FONT> μπορεί να τοποθετηθεί μια άλλη ετικέτα <FOΝΤ>.

o Σωστό o Λάθος

ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ 3 - Αριθμητικοί κατάλογοι στην HTML

Τους αριθμητικούς καταλόγους τους χρησιμοποιούμε για να παρουσιάζουμε

στοιχεία σε αύξουσα αριθμητική σειρά . Παρακάτω ακολουθεί ένας τέτοιος αριθμητικός

κατάλογος.

Αριθμητικός κατάλογος «Γενιά του '30-ποίηση»

Γενιά του '30-ποίηση

1. Σεφέρης Γιώργος (1900)

2. Ρίτσος Γιάννης (1909)

3. Καββαδίας Νίκος (1910)

4. Ελύτης Οδυσσέας (1911)

Πώς γίνεται στο Word

Για να γίνει αυτό σε ένα επεξεργαστή κειμένου θα πρέπει η κάθε εγγραφή (εδώ ποιητής)

να βρίσκεται σε διαφορετική γραμμή. Στη συνέχεια επιλέγουμε όλες τις εγγραφές και

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

Πώς γίνεται στην HTML

Για να έχουμε το παραπάνω αποτέλεσμα (Γενιά του '30-ποίηση) με HTML θα πρέπει να

χρησιμοποιήσουμε την διπλή ετικέτα αριθμητικού καταλόγου <OL>…… </OL> και μέσα σε

αυτή για κάθε εγγραφή την απλή ετικέτα <Li> .

Δραστηριότητα 1

Παρακάτω δίνεται ο κώδικας σε HTML που εμφανίζει τoν αριθμητικό κατάλογο «Γενιά του

'30-ποίηση»

Τι πρέπει να κάνω.

Παρατηρήστε στον παρακάτω πίνακα πως συντάσσονται οι εντολές

<OL> και <Li> καθώς και τις επεξηγήσεις τους

Κώδικας HTML Ετικέτες Επεξήγηση ετικετών

<OL> Ετικέτα έναρξης

αριθμητικού καταλόγου

<LI>Στοιχείο καταλόγου

Δηλώνει το πρώτο

στοιχείο του πίνακα

… …

<LI> Στοιχείο καταλόγου Δηλώνει το τελευταίο

στοιχείο του πίνακα

</OL> Δηλώνει το τέλος του

αριθμητικού καταλόγου

Δραστηριότητα 2

Κατεβάστε από το wiki του μαθήματος το αρχείο «Γενιά του '30-ποίηση.htm». Χωρίστε

την οθόνη στα δύο ανοίγοντας το παραπάνω αρχείο αριστερά με το σημειωματάριο και

δεξιά με τον φυλλομετρητή.

Δουλεύοντας το παραπάνω αρχείο στο σημειωματάριο κάντε

κάποιες καινούριες εισαγωγές ποιητών είτε ενδιάμεσα είτε στην

αρχή ή στο τέλος της λίστας. Κάνοντας αποθήκευση και ανανέωση

στο φυλλομετρητή παρατηρούμε απ’ευθείας την αυτόματη

αναδιάταξη της αρίθμησης.

Δραστηριότητα 3

Ανοίχτε καινούριο αρχείο και ονομάστε το «userXX-δραστηριόττητα 6-3.htm». Βασισμένοι

στο προηγούμενο παράδειγμα και με τη βοήθεια των ετικετών <OL> και <LI>

Φτιάχτε αριθμημένο κατάλογο που να εμφανίζει 3 εταιρίες

παραγωγής λογισμικού

Πώς αλλάζουμε τύπο αρίθμησης

Μπορούμε να αλλάξουμε το είδος του συμβόλου που μπαίνει για αρίθμηση μπροστά από

τα στοιχεία της λίστας τον τρόπο αρίθμησης με την παράμετρο Type=τιμή.

<OL Type=τιμή> ή < IL Type=τιμή>

Δυνατές τιμές Παραμέτρων

1 Κάποια αριθμητική τιμή

A Τιμές A από έως Z

a Τιμές από a έως z

i Κάποια αριθμητική τιμή σε λατινικούς χαρακτήρες

Πώς αλλάζουμε τιμή έναρξης

Μπορούμε να αλλάξουμε την τιμή έναρξης αρίθμησης με την παράμετρο start=τιμή.

<OL start=τιμή>.

Τι πρέπει να κάνω.

Στο αρχείο που φτιάξαμε προηγουμένως «userXX-δραστηριόττητα 6-3.htm»

κρατήστε 3 εγγραφές όπου θα αρχίζει η αρίθμηση από το 6.

Προσθέστε από κάτω 3 εταιρίες με επικεφαλίδα «Εταιρίες παραγωγής

περιφερειακών» . Η αρίθμηση να είναι με λατινικούς χαρακτήρες

από κάτω 3 εταιρίες με επικεφαλίδα «Εταιρίες παραγωγής υλικού υπολογιστών».

Η αρίθμηση να είναι με γράμματα αγγλικού αλφάβητου εκτός της δεύτερης

εγγραφής που θα είναι αριθμητικό. Η αρίθμηση να αρχίζει από την 3η θέση.

Δραστηριότητα 4

Επιλέξτε το σωστό στις παρακάτω ερωτήσεις.

1. Σε ένα αριθμητικό κατάλογο για κάθε εγγραφή (αλλαγή αρίθμησης) χρειαζόμαστε

και μια ετικέτα <LI>.

o Σωστό o Λάθος 2. Σε ένα αριθμητικό κατάλογο θα πρέπει οι ετικέτες <LI> να βρίσκονται ανάμεσα

στη διπλή ετικέτα <OL> ….</OL>

o Σωστό o Λάθος 3. Σε ένα αριθμητικό κατάλογο δεν μπορώ να μετακινήσω τις εγγραφές

o Σωστό o Λάθος

4. Σε ένα αριθμητικό κατάλογο δεν μπορούμε να έχουμε 2 ή 3 διαφορετικά

αριθμητικά σύμβολα στην αρχή των εγγραφών (γραμμών).

o Σωστό o Λάθος

5. Στους αριθμητικούς καταλόγους δεν έχει νόημα η παράμετρος start=…

o Σωστό o Λάθος

6. Σε ένα αριθμητικό κατάλογο θα πρέπει οι ετικέτες <LI> να βρίσκονται ανάμεσα

στη διπλή ετικέτα <OL> ….</OL>

o Σωστό o Λάθος

7. Ένας αριθμητικός κατάλογος για να έχει αρίθμηση με κεφαλαία γράμματα θα

πρέπει να συντάξουμε την ετικέτα <OL> με παράμετρο type=A

δηλ <OL type =A>

o Σωστό o Λάθος

8. Ένας αριθμητικός κατάλογος για να έχει αρίθμηση με φυσικούς αριθμούς (1,2,3…)

δεν χρειάζεται την παράμετρο type=1

o Σωστό o Λάθος 9. Δεν μπορώ να έχω πολλούς αριθμητικούς καταλόγους τον ένα κάτω από τον άλλον

o Σωστό o Λάθος

o 10. Έστω ότι θέλω ο αριθμητικός κατάλογος να έχει Ρωμαϊκή αρίθμηση (Ι,ΙΙ,ΙΙΙ …) και να

αρχίζει από την τρίτη θέση (ΙΙΙ). Διαλέξτε το σωστό.

o <OL START=III>

o <OL TYPE=I START=III>

o <OL TYPE=1 START=III>

o <OL TYPE=1 START=3>

ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ 4 - Μη ταξινομημένοι ή μη αριθμητικοί κατάλογοι

Ποίοι είναι και πως χρησιμοποιούνται

Οι μη αριθμητικοί κατάλογοι χρησιμοποιούνται για να παρουσιάσουν στοιχεία που

δεν είναι ταξινομημένα ή δεν χρειάζονται να έχουν κάποια ιδιαίτερη σειρά.

Διαφορετικά από τους ταξινομημένους καταλόγους αντί πριν κάθε στοιχείο του

καταλόγου να έχουν κάποιου είδους αρίθμησης έχουν κάποιο είδος συμβόλου

όπως τα 3 παρακάτω.

Disc o Circle □ Square

Σεφέρης Γιώργος (1900)

Ρίτσος Γιάννης (1909)

Καββαδίας Νίκος (1910)

Ελύτης Οδυσσέας

(1911)

o Σεφέρης Γιώργος (1900)

o Ρίτσος Γιάννης (1909)

o Καββαδίας Νίκος

(1910) o Ελύτης Οδυσσέας

(1911)

□ Σεφέρης Γιώργος (1900)

□ Ρίτσος Γιάννης (1909)

□ Καββαδίας Νίκος

(1910) □ Ελύτης Οδυσσέας

(1911)

Πώς δημιουργούμε ένα μη αριθμητικό κατάλογο

Για να δημιουργήσουμε μη αριθμητικό κατάλογο με HTML θα πρέπει να

χρησιμοποιήσουμε την διπλή ετικέτα <UL>…… </UL> και μέσα σε αυτή - παρόμοια με τους

ταξινομημένους καταλόγους - για κάθε εγγραφή την απλή ετικέτα <Li> .

Δραστηριότητα 1 - Επιχειρώ

Θα χρησιμοποιήσετε από το προηγούμενο μάθημα το αρχείο «Γενιά του '30-ποίηση.htm»

(εναλλακτικά μπορείτε να το κατεβάσετε από το wiki του μαθήματος).

Τι πρέπει να κάνω.

Κάντε τις κατάλληλες αλλαγές ώστε τα ονόματα των ποιητών

να εμφανίζονται σαν μη ταξινομημένος κατάλογος όπως

παρακάτω (δεξιά).

Πριν (αριθμητικός κατάλογος) Μετά (μη αριθμητικός κατάλογος)

Αλλαγή τύπου συμβόλου

Μπορούμε να αλλάξουμε το είδος του συμβόλου που μπαίνει μπροστά από τα στοιχεία της

λίστας με την παράμετρο Type= τιμή, όπου στη θέση της τιμής μπορούμε να βάλουμε ένα

από τους 3 τύπους (disc ή circle ή square).

Δραστηριότητα 2 - Μετατρέπω

Κατεβάσετε από το wiki του μαθήματος το αρχείο «Εταιρίες υπολογιστών.htm» και αποθηκεύστε το

στον χώρο σας με όνομα «userXX- Εταιρίες υπολογιστών με σύμβολα.htm».

Μετατρέψτε τους αριθμητικούς καταλόγους που βρίσκονται στο

παραπάνω αρχείο σε μη αριθμητικούς. Δείτε πως στον παρακάτω

πίνακα.

Πριν (αριθμητικός κατάλογος) Μετά (μη αριθμητικός κατάλογος)

Δραστηριότητα 3 - Πραγματοποιώ

Μη τη βοήθεια μη ταξινομημένων καταλόγων, δημιουργήστε

αρχείο HTML που να φαίνεται όπως το παρακάτω. Το όνομα

«userXX- εστιατόριο.htm».

Παρατηρήστε ότι το παραπάνω αρχείο αποτελείται

Από 3 ανεξάρτητες μη ταξινομημένες λίστες.

Κάθε λίστα έχει διαφορετικά σύμβολα.

Στη τελευταία λίστα το σύμβολο της 3ης εγγραφής διαφέρει από τα υπόλοιπα.

Δραστηριότητα 4 - Αποσαφηνίζω, εμπεδώνω

Μπείτε στο WIKI του μαθήματος. Πηγαίνετε στη σελίδα «Μη αριθμητικοί

κατάλογοι» συμπληρώστε τα ερωτήματα και κάντε υποβολή.

Επιλέξτε το σωστό στις παρακάτω ερωτήσεις.

1. Στις μη αριθμημένους καταλόγους δεν έχει νόημα η παράμετρος start=…

o Σωστό o Λάθος 2. Σε ένα μη αριθμημένο κατάλογο δεν μπορούμε να έχουμε 2 ή 3 διαφορετικά

σύμβολα στην αρχή των γραμμών.

o Σωστό o Λάθος

3. H ετικέτα <UL> δεν χρειάζεται υποχρεωτικά να εμπεριέχει την ετικέτα <LI> αφού με

<ΒR> έχουμε το ίδιο αποτέλεσμα.

o Σωστό o Λάθος

4. Μέσα στο <Body> δεν μπορούμε να έχουμε ταυτόχρονα πάνω από 3 μη

αριθμητικούς καταλόγους.

o Σωστό o Λάθος

5. Αν δεν ορίσω τύπο στην ετικέτα <UL> τότε το σύμβολο που θα εμφανίζεται

θα είναι

o disc,

o circle,

o square.

6. Ποιο είναι το λάθος όταν διαδοχικοί κατάλογοι εμφανίζονται με όλο και

μεγαλύτερη εσοχή

o Δεν έχω κλείσει κάποια <UL>

o Δεν έχω βάλει αρκετά <LI>

o Δεν έχω επιλέξει κατάλληλο τύπο

7. Για να εμφανίσω τετράγωνο μπροστά από τη δεύτερη εγγραφή καταλόγου

γράφω:

o <li start= square>

o <li type=square>

o <li start= square>

o <li start = 2>

o Τίποτα από τα παραπάνω