Μάθημα : Εισαγωγή στην HTML
Κωδικός : EL78114
1η φάση: Δημιουργούμε την ιστοσελίδα της ομάδας μας
Ας ξεκινήσουμε! Κάθε ομάδα θα δημιουργήσει μια ιστοσελίδα η οποία θα περιλαμβάνει πληροφορίες για τα μέλη της και τις προτιμήσεις τους. Ακολουθήστε τα παρακάτω βήματα...
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> για να διαπιστώσουμε πως μπορούμε να διαμορφώσουμε περαιτέρω την μορφή των κειμένων μας.