Μάθημα : Εισαγωγή στην HTML
Κωδικός : EL78114
EL78114 - ΕΛΕΝΗ ΖΑΛΑΒΡΑ
Η πλατφόρμα σάς ανακατεύθυνε αυτόματα στην αρχική σελίδα για να συνδεθείτε προτού προχωρήσετε σε άλλες ενέργειες. Πιθανόν, να έληξε η σύνοδός σας.
Περιγραφή Μαθήματος
Στο ηλεκτρονικό μάθημα "Εισαγωγή στην HTML" υπάρχουν διαθέσιμες 4 ενότητες οι οποίες αντιστοιχούν στις 4 φάσεις υλοποίησης του εκπαιδευτικού σεναρίου.
1η φάση: Δημιουργούμε την ιστοσελίδα της ομάδας μας
2η φάση: Εμπλουτίζουμε την ιστοσελίδα της ομάδας μας
Ας ξεκινήσουμε! Κάθε ομάδα θα δημιουργήσει μια ιστοσελίδα η οποία θα περιλαμβάνει πληροφορίες για τα μέλη της και τις προτιμήσεις τους. Ακολουθήστε τα παρακάτω βήματα...
1.1 Κάθε ομάδα εγγράφετε στην ιστοσελίδα https://codepen.io η οποία παρέχει έναν online editor για επεξεργασία ιστοσελίδων.
1.2 Δημιουργήστε ένα pen και δώστε του το όνομα "Homepage"
1.3 Αντιγράψετε σε αυτό το pen τα περιεχόμενα από το pen: https://codepen.io/elena-zalavra/pen/dyVqKaa
1.4 Ας παρατηρήσουμε αρχικά, τα περιεχόμενα που ήδη έχει η ιστοσελίδα σας και στη συνέχεια κάθε ομάδα θα μπορέσει να τα διαμορφώσει όπως επιθυμεί.
1.5 Παρατηρούμε ότι η οθόνη χωρίζεται σε δυο τμήματα. Στο πάνω τμήμα γίνεται η σχεδίαση και διαμόρφωση της ιστοσελίδας μας ενώ κάτω είναι το τμήμα που βλέπουμε την ιστοσελίδα μας.
Το τμήμα σχεδίασης και διαμόρφωσης της ιστοσελίδας μας είναι γραμμένο σε μια μορφή γλώσσας προγραμματισμού που ονομάζεται HTML (HyperText Markup Language - Γλώσσα Σήμανσης Υπερκειμένου).
1.6 Για να μπορέσουμε να διαμορφώσουμε την ιστοσελίδα μας όπως επιθυμούμε θα χρειαστεί να χρησιμοποιήσουμε την HTML. Ας ξεκινήσουμε όμως παρατηρώντας τι περιλαμβάνει η ιστοσελίδα που μας δίνετε...
Παρατηρούμε ότι υπάρχουν συνέχεια τα σύμβολα < >. Αυτά τα σύμβολα περιέχουν ονόματα που ονομάζονται: ετικέτες (tags).
Σε οποιαδήποτε φάση της εργασίας χρειαστούμε βοήθεια για τις ετικέτες προτείνεται να ανατρέξουμε στην ιστοσελίδα https://www.w3schools.com/tags που τις αναφέρει, τις εξηγεί και δίνει παράδειγμα εφαρμογής τους.
1.7 Παρατηρούμε ότι κάθε ετικέτα λειτουργεί σε ζευγάρια π.χ <html> με </html> , <h3> με </h3> , κ.λ.π.
Ας ξεκινήσουμε τώρα να διαμορφώνουμε την ιστοσελίδα μας:
1.8 Δοκιμάζουμε στο τμήμα σχεδίασης να δώσουμε το όνομα που επιθυμούμε στην ομάδα μας αντικαθιστώντας τα ???. Διαπιστώνουμε ότι μόλις αλλάξουμε το τμήμα σχεδίασης αλλάζει αυτόματα και η μορφή της ιστοσελίδας μας.
1.9 Αλλάζουμε τα ονόματα που έχουν δοθεί με τα ονόματα των μελών κάθε ομάδας.
1.10 Παρατηρούμε ότι ενώ στo τμήμα σχεδίασης τα ονόματα είναι σε διαφορετικές γραμμές, στην ιστοσελίδα μας εμφανίζονται στη σειρά.
Μπορούμε να διαπιστώσουμε με ποια ετικέτα θα μπορέσουμε να αλλάξουμε γραμμή ώστε να εμφανίζονται σωστά τα ονόματα μας;
Κάνουμε δοκιμές μέχρι να πετύχουμε τα ονόματα των μελών κάθε ομάδας να εμφανίζονται σε διαφορετικές γραμμές.
1.11 Παρατηρούμε τα διαφορετικά μεγέθη γραμμάτων που υπάρχουν.
Μπορούμε να διαπιστώσουμε με ποια ετικέτα θα μπορέσουμε να αλλάξουμε το μέγεθος του κειμένου που είναι η επικεφαλλίδα της ιστοσελίδας ώστε να είναι μεγαλύτερο, ενώ το μέγεθος του κειμένου που είναι γραμμένα τα ονόματα να είναι μικρότερο;
Κάνουμε δοκιμές μέχρι να διαμορφώσουμε κατάλληλα τα μεγέθη των γραμμάτων της ιστοσελίδας μας.
1.12 Προσθέτουμε μια ακόμη παράγραφο με κείμενο στην ιστοσελίδα μας. Γράφουμε ότι θέλουμε...
1.13 Παρατηρούμε το διαφορετικό χρώμα που έχει ένα σημείο του κειμένου της ιστοσελίδας.
Μπορούμε να διαπιστώσουμε με ποια ετικέτα μπορούμε να αλλάξουμε το χρώμα;
Κάνουμε δοκιμές βάζοντας 2 τουλάχιστον διαφορετικά χρώματα σε όποια σημεία του κειμένου μας θέλουμε.
1.14 Πειραματιζόμαστε με τις ετικέτες <b> και <i> για να διαπιστώσουμε πως μπορούμε να διαμορφώσουμε περαιτέρω την μορφή των κειμένων μας.
Ας προσπαθήσουμε να εμπλουτίσουμε την ιστοσελίδα μας:
2.1 Για να κάνουμε διαφορετικές στοιχίσεις στο κείμενο μας δοκιμάζουμε την ετικέτα <center>.
Τροποποιούμε τουλάχιστον ένα σημείο του κειμένου μας να έχει στοίχιση στο κέντρο.
2.2 Για να βάλουμε μια εικόνα στην ιστοσελίδα μας
Κάνουμε αντιγραφή το παρακάτω κομμάτι HTML κώδικα και το επικολλούμε σε όποιο σημείο της ιστοσελίδας μας θέλουμε:
<img src="https://cdn-icons-png.flaticon.com/512/4720/4720451.png">
Διαπιστώνουμε ότι έτσι εμφανίζετε μια εικόνα!
Για γρήγορη αντιγραφή και επικόλληση μπορούμε να χρησιμοποιήσουμε:
τα πλήκτρα CTRL + C για την αντιγραφή
τα πλήκτρα CTRL + V για την επικόλληση
2.3 Προσθέτουμε και άλλη εικόνα στην ιστοσελίδα μας ή/και αντικαθιστούμε την προηγούμενη εικόνα.
2.4 Διαπιστώνουμε ότι η εμφάνιση των εικόνων στην ιστοσελίδα μας δεν είναι ικανοποιητική. Είναι σε παράθεση με το κείμενο ενώ θα θέλαμε, είτε να είναι στο πλάι του κειμένου, είτε να είναι σε μία γραμμή μόνες τους.
Πειραματιζόμαστε με την ετικέτα <p> μέχρι να καταφέρουμε να τοποθετήσουμε τις εικόνες στην ιστοσελίδα μας με μια μορφή που να μας ικανοποιεί.
2.5 Για να βάλουμε ένα σύνδεσμο για το σχολείο μας με υπερσύνδεση στην ιστοσελίδα του.
Κάνουμε αντιγραφή το παρακάτω κομμάτι HTML κώδικα και το επικολλούμε σε όποιο σημείο της ιστοσελίδας μας θέλουμε:
<body>
Είμαστε μαθητές του 3ου ΓΕΛ Γαλατσίου
</body>
<a href="http:\\sch.gr">
Η ιστοσελίδα του σχολείου μας
</a>
Δοκιμάζουμε την εμφάνιση και λειτουργία του κώδικα και διορθώνουμε κατάλληλα τον κώδικα έτσι ώστε να παραπέμπει στη σωστή ιστοσελίδα.
2.6 Δημιουργούμε με ανάλογο τρόπο υπερσυνδέσεις από την ιστοσελίδα μας προς ιστοσελίδες οι οποίες να αναφέρονται στα μέλη κάθε ομάδας. Θα πρέπει δηλαδή στο σημείο της ιστοσελίδας που έχουμε τα ονόματα των μελών της ομάδας να κάνουμε τα ονόματα μας να έχουν υπερσύνδεσεις στην ιστοσελίδα που θα ανήκει σε κάθε μέλος.
Κατά συνέπεια θα πρέπει κάθε ομάδα να δημιουργήσει δυο νέα pen στο περιβάλλον του codepen και να τους δώσει τα ονόματα των μελών. Τα url αυτών των pen θα χρησιμοποιηθούν στις υπερσυνδέσεις.
Κάθε μαθητής / μαθήτρια διαμορφώνει την δική του/της ιστοσελίδα η οποία θα περιλαμβάνει βασικές πληροφορίες για αυτόν/αυτήν.
1.1 Αντιγράφει τα περιεχόμενα από την https://codepen.io/elena-zalavra/pen/qBPMKMM
3.2 Διαμορφώνει την επικεφαλίδα της ιστοσελίδας του έτσι ώστε να έχει το όνομα του/της
3.3 Επίσης, σύμφωνα με τις προτιμήσεις του, κάνει:
- μορφοποίηση το μέγεθος των γραμμάτων
- μορφοποίηση το χρώμα των γραμμάτων
3.4 Αντικαθιστά το κείμενο "μπλα μπλα" με το προσωπικό του ρητό ή μια φράση που τον/την χαρακτηρίζει.
3.5 Μορφοποιεί το κείμενο του χρησιμοποιώντας τις κατάλληλες ετικέτες, έτσι ώστε:
- να ξεκινάει σε νέα γραμμή
- να έχει πλάγια γράμματα
3.6 Προσθέτει μια φωτογραφία μου. Προτείνεται να χρησιμοποιηθεί η εικόνα προφίλ (ακόμα και αν είναι κάποιο σκίτσο) που έχει ο μαθητής / η μαθήτρια σε κάποιο κοινωνικό δίκτυο παραπέμποντας σε αυτήν. Για το σκοπό αυτό θα πρέπει να κάνει προβολή της φωτογραφίας του και με δεξί κλικ πάνω της να κάνει αντιγραφή του δεσμού της. Αυτό τον δεσμό θα πρέπει να δηλώσει ως εικόνα που θέλει να εμφανίζετε στην ατομική του ιστοσελίδα.
Σε περίπτωση που δεν είναι καλή η μορφοποίηση της φωτογραφίας στην ατομική ιστοσελίδα, προτείνεται να αναζητήσετε βοήθεια για τη σύνταξη των παραμέτρων της ετικέτας εικόνας <img> από την ιστοσελίδα https://www.w3schools.com/tags που μου σας ήδη προταθεί.
3.7 Παρατηρήστε το σημείο που αναφέρεται η "Πληροφορική" ως μάθημα που σας αρέσει. Δοκιμάστε να γράψετε άλλα δύο μαθήματα που σας αρέσουν. Προσπαθήστε να χρησιμοποιήσετε τις κατάλληλες ετικέτες έτσι ώστε να έχουν την ίδια μορφοποίηση με το παράδειγμα της Πληροφορικής. Αν θέλετε, μπορείτε επίσης να αντικαταστήσω το όνομα της Πληροφορικής με όποιο άλλο μάθημα σας αρέσει περισσότερο...
3.8 Παρατηρήστε το σημείο που αναφέρεται "να παίζω παιγνίδια στον υπολογιστή" ως ενασχόληση που σας αρέσει. Δοκιμάστε να γράψετε τρια ακόμη πράγματα που σας αρέσουν. Προσπαθήστε να χρησιμοποιήσετε τις κατάλληλες ετικέτες έτσι ώστε να έχουν την ίδια μορφοποίηση με το παράδειγμα "να παίζω παιγνίδια στον υπολογιστή". Αν θέλετε, μπορείτε να αντικαταστήσετε και το παράδειγμα...
3.9 Παρατηρήστε τις ετικέτες που δημιουργούν τις δυο λίστες: την λίστα με τα μαθήματα που σας αρέσουν και την λίστα με το πως περνάτε τον ελεύθερο χρόνο σας.
Μπορείτε να διακρίνετε τη διαφορά μεταξύ της αριθμημένης λίστας και της λίστας με τις κουκίδες;
Δοκιμάστε να αλλάξετε τις δυο λίστες έτσι ώστε να είναι σωστές. Θα πρέπει να είναι αριθμημένη η λίστα που έχει τα 3 μαθήματα, ενώ θα πρέπει να έχει κουκίδες η λίστα που αναφέρετε τι σας αρέσει να κάνετε στον ελεύθερο χρόνο σας.
3.10 Παρατηρήστε τα έντονα γράμματα που έχει όλο το κείμενο με τις δύο λίστες σας. Δοκιμάστε να χρησιμοποιήσετε κατάλληλες ετικέτες έτσι ώστε μόνο οι αναφορές να έχουν έντονα γράμματα αλλά οι λίστες να μην έχουν έντονα γράμματα.
3.11 Μπορώ να κάνετε οποιαδήποτε επιπλέον μορφοποίηση θέλετε στην ατομική σας ιστοσελίδα. Αξιοποιήστε τις γνώσεις για ετικέτες που ήδη ξέρετε ή αν θέλετε αναζητήστε και αξιοποιήστε κάποια άλλη ετικέτα που θα σας επιτρέψει να εμπλουτίσετε την ιστοσελίδα σας.
4.1 Για να βάλετε ένα αρχείο ήχου στην ιστοσελίδα σας.
Κάνετε αντιγραφή το παρακάτω κομμάτι HTML κώδικα και το επικολλείτε σε όποιο σημείο της σελίδας σας θέλετε:
<audio controls>
<source src="http://static1.grsites.com/archive/sounds/musical/musical105.mp3" type="audio/mpeg">
</audio>
Παρατηρήστε ότι στη σελίδα σας εμφανίζεται το χαρακτηριστικό εργαλείο αναπαραγωγής ήχου το οποίο μπορώ να ενεργοποιήσετε για να ακούσετε τον ήχο.
4.2 Από την ιστοσελίδα http://www.grsites.com/archive/sounds/ μπορείτε να επιλέξετε όποιον ήχο σας αρέσει και να αντιγράψετε τον δεσμό του.
Αλλάξτε το δεσμό του ήχου που σας δόθηκε με τον δεσμό του ήχου που εσείς επιλέξατε.
Διαπιστώστε ότι λειτουργεί σωστά η αναπαραγωγή του ήχου.
Αν θέλετε μπορείτε να εισάγετε τον δεσμό οποιουδήποτε ήχου επιθυμείτε / προτιμάτε να συμπεριλαμβάνεται στην ιστοσελίδα σας. Περιορισμοί είναι:
- το αρχείο να είναι τύπου mp3
- το αρχείο να είναι διαθέσιμο online και να έχετε τον δεσμό του
4.3 Στο https://www.youtube.com/ αναζητείστε και εντοπίστε ένα video της αρεσκείας σας.
Στη συνέχεια, στις επιλογές που υπάρχουν για αυτό το video επιλέξτε:
Κοινή Χρήση -> Ενσωμάτωση
Παρατηρείστε ότι μου παρέχετε ένα κώδικας στο πλαίσιο ακριβώς κάτω από την επιλογή "Ενσωμάτωση".
Αυτός ο κώδικας ονομάζεται κώδικας ενσωμάτωσης γιατί δίνει τη δυνατότητα ενσωμάτωσης σε οποιαδήποτε ιστοσελίδα ωστε να την εμπλουτίσετε έτσι με ένα παράθυρο στο οποίο θα εμφανίζεται το video της αρεσκείας σας.
Επιλέξτε και αντιγράψτε όλο το κώδικα.
Επικολλείστε στην ιστοσελίδα σας -σε όποιο σημείο θέλετε- τον κώδικα ενσωμάτωσης.
Διαπιστώστε τον τρόπο εμφάνισης του video στην ιστοσελίδας σας καθώς και τον τρόπο αναπαραγωγής του.
4.4 Επιστρέψτε στην ιστοσελίδα του Youtube και επιλέξτε: Εμφάνιση περισσότερων
Παρατηρήστε, στο πλαίσιο που εμφανίζεται, τις διαθέσιμες επιλογές που υπάρχουν για την ενσωμάτωση του video στην ιστοσελίδα σας:
- μπορείτε να τροποποιήσετε το μέγεθος εμφάνισης
- έχετε 4 διαφορετικές επιλογές για να διαμορφώσετε τον τρόπο αναπαραγωγής
Επιλέξτε να κάνετε όποια τροποποίηση επιθυμείτε π.χ μπορείτε να απενεργοποήσετε να εμφανίζονται προτεινόμενα βίντεο μόλις ολοκληρωθεί η αναπαραγωγή του βίντεο σας.
Στη συνέχεια αντιγράψτε και επικολλείστε το νέο κώδικα ενσωμάτωσης στην ατομική σας ιστοσελίδα.
Διαπιστώστε ξανά τον τρόπο εμφάνισης του video στην ιστοσελίδα σας καθώς και τον τρόπο αναπαραγωγής του.
Μπράβο! Ολοκληρώσατε όλες τις δραστηριότητες δημιουργίας μιας ιστοσελίδας. Έχετε τώρα την ατομική σας ιστοσελίδα καθώς και την ιστοσελίδα της ομάδας σας.
Είσαστε πλέον εκτός από απλοί χρήστες και δημιουργοί στο διαδίκτυο!
Δεν ήταν δύσκολο! Μάλιστα, αυτή η εμπειρία μπορεί αργότερα να αξιοποιηθεί σε μελλοντική σας ενασχόληση σε οποιοδήποτε επάγγελμα. Η διαμόρφωση μιας ιστοσελίδας μέσω HTML δεν χρειάζεται μόνο σε ειδικούς Πληροφορικής αλλά σε οποιονδήποτε θέλει να διαμορφώσει ένα διαδικτυακό υλικό.
Ως τελευταία δραστηριότητα προτείνεται να ελέγξετε τις γνώσεις σας για τις ετικέτες HTML κάνοντας το Kουίζ για τις ετικέτες HTML
Ημερολόγιο
Ανακοινώσεις
Όλες...- - Δεν υπάρχουν ανακοινώσεις -