Μάθημα : Εισαγωγή στην HTML
Κωδικός : EL78114
1η φάση: Δημιουργούμε την ιστοσελίδα της ομάδας μας
Ας ξεκινήσουμε! Κάθε ομάδα θα δημιουργήσει μια ιστοσελίδα η οποία θα περιλαμβάνει πληροφορίες για τα μέλη της και τις προτιμήσεις τους.
Με αφετηρία την ιστοσελίδα που δίνεται σε κάθε ομάδα:
2Λυκ-1ομάδα 2Λυκ-2ομάδα 2Λυκ-3ομάδα 2Λυκ-4ομάδα
2Λυκ-5ομάδα 2Λυκ-6ομάδα 2Λυκ-7ομάδα 2Λυκ-8ομάδα
3Λυκ-1ομάδα 3Λυκ-2ομάδα 3Λυκ-3ομάδα 3Λυκ-4ομάδα
3Λυκ-5ομάδα 3Λυκ-6ομάδα 3Λυκ-7ομάδα 3Λυκ-8ομάδα
ας παρατηρήσουμε αρχικά, τα περιεχόμενα που ήδη έχει κάθε ιστοσελίδα και στη συνέχεια κάθε ομάδα θα μπορέσει να τα διαμορφώσει όπως επιθυμεί.
1.1 Παρατηρούμε ότι η οθόνη χωρίζεται σε δυο τμήματα. Αριστερά είναι το τμήμα σχεδίασης και διαμόρφωσης της ιστοσελίδας μας ενώ δεξιά είναι το τμήμα που βλέπουμε την ιστοσελίδα μας.
Το τμήμα σχεδίασης και διαμόρφωσης της ιστοσελίδας μας είναι γραμμένο σε μια μορφή γλώσσας προγραμματισμού που ονομάζεται HTML (HyperText Markup Language - Γλώσσα Σήμανσης Υπερκειμένου).
1.2 Για να μπορέσουμε να διαμορφώσουμε την ιστοσελίδα μας όπως επιθυμούμε θα χρειαστεί να χρησιμοποιήσουμε την HTML. Ας ξεκινήσουμε όμως παρατηρώντας τι περιλαμβάνει η ιστοσελίδα που μας δίνετε...
Παρατηρούμε ότι υπάρχουν συνέχεια τα σύμβολα < >. Αυτά τα σύμβολα περιέχουν ονόματα που ονομάζονται: ετικέτες (tags).
Σε οποιαδήποτε φάση της εργασίας χρειαστούμε βοήθεια για τις ετικέτες προτείνεται να ανατρέξουμε στην ιστοσελίδα https://www.w3schools.com/tags που τις αναφέρει, τις εξηγεί και δίνει παράδειγμα εφαρμογής τους.
1.3 Παρατηρούμε ότι κάθε ετικέτα λειτουργεί σε ζευγάρια π.χ <html> με </html> , <h3> με </h3> , κ.λ.π.
Ας ξεκινήσουμε τώρα να διαμορφώνουμε την ιστοσελίδα μας:
1.4 Δοκιμάζουμε στο τμήμα σχεδίασης να δώσουμε το όνομα που επιθυμούμε στην ομάδα μας αντικαθιστώντας τα ???. Διαπιστώνουμε ότι μόλις αλλάξουμε το τμήμα σχεδίασης αλλάζει αυτόματα και η μορφή της ιστοσελίδας μας.
1.5 Αλλάζουμε τα ονόματα που έχουν δοθεί με τα ονόματα των μελών κάθε ομάδας.
1.6 Παρατηρούμε ότι ενώ στo τμήμα σχεδίασης τα ονόματα είναι σε διαφορετικές γραμμές, στην ιστοσελίδα μας εμφανίζονται στη σειρά.
Μπορούμε να διαπιστώσουμε με ποια ετικέτα θα μπορέσουμε να αλλάξουμε γραμμή ώστε να εμφανίζονται σωστά τα ονόματα μας;
Κάνουμε δοκιμές μέχρι να πετύχουμε τα ονόματα των μελών κάθε ομάδας να εμφανίζονται σε διαφορετικές γραμμές.
1.7 Παρατηρούμε τα διαφορετικά μεγέθη γραμμάτων που υπάρχουν.
Μπορούμε να διαπιστώσουμε με ποια ετικέτα θα μπορέσουμε να αλλάξουμε το μέγεθος του κειμένου που είναι η επικεφαλλίδα της ιστοσελίδας ώστε να είναι μεγαλύτερο, ενώ το μέγεθος του κειμένου που είναι γραμμένα τα ονόματα να είναι μικρότερο;
Κάνουμε δοκιμές μέχρι να διαμορφώσουμε κατάλληλα τα μεγέθη των γραμμάτων της ιστοσελίδας μας.
1.8 Προσθέτουμε μια ακόμη παράγραφο με κείμενο στην ιστοσελίδα μας. Γράφουμε ότι θέλουμε...
1.9 Παρατηρούμε το διαφορετικό χρώμα που έχει ένα σημείο του κειμένου της ιστοσελίδας.
Μπορούμε να διαπιστώσουμε με ποια ετικέτα μπορούμε να αλλάξουμε το χρώμα;
Κάνουμε δοκιμές βάζοντας 2 τουλάχιστον διαφορετικά χρώματα σε όποια σημεία του κειμένου μας θέλουμε.
1.10 Πειραματιζόμαστε με τις ετικέτες <b> και <i> για να διαπιστώσουμε πως μπορούμε να διαμορφώσουμε περαιτέρω την μορφή των κειμένων μας.