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