HTML| Εφαρμογές Πληροφορικής | Ασκήσεις Σ ε λ ί δ α |1

Μάθημα ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ

Τάξη Α’ Λυκείου

Αντικείμενο HTML

Σχετικό Κεφάλαιο Κεφάλαιο 11: Εισαγωγή στην HTML

Άσκηση 1η

Τίτλος Βασικά tags κειμένου, παραγράφων, χρώματος, περιγραμμάτων, εικόνας και

δημιουργία ιστοσελίδων σε Notepad

Εισαγωγικές οδηγίες

1. Η 1η άσκηση είναι ατομική. Οι σταθμοί εργασίες που θα χρησιμοποιήσετε είναι αυτοί που σας έχουν αποδοθεί
από την αρχή της χρονιάς.
2. Κάνετε Είσοδο (login) στο wiki της τάξης (με τους ατομικούς λογαριασμούς) και αναρτήστε στο άρθρο που
φέρει το ΟΝΟΜΑΤΕΠΩΝΥΜΟ σας τα html αρχεία που θα δημιουργήστε.

Κύριες οδηγίες

3. Πλοηγηθείτε στο www.w3schools.com/html/

4. Χρησιμοποιήστε βασικά tags της HTML στον online html editor του w3schools προκειμένου να κατασκευάσετε
την επόμενη ιστοσελίδα. Δουλέψτε αποκλειστικά στον online html editor του w3schools. Για να ανακαλύψτε
τους κωδικούς (#xxxxxx) των χρωμάτων που βλέπετε στην ιστοσελίδα κατευθυνθείτε στον σύνδεσμο
www.w3schools.com/colors/colors_picker.asp . Μπορείτε να χρησιμοποιήστε διαφορετική εικόνα
ηλιοβασιλέματος. ΔΕΝ ΜΠΟΡΕΙΤΕ να αλλάξετε κάτι άλλο στην ιστοσελίδα (π.χ. κείμενο, παραγράφους κ.λπ.)

Εικόνα 1: Ιστοσελίδα Article1.html

5. Αφού βεβαιωθείτε ότι η ιστοσελίδα φαίνεται σωστά στον online html editor του w3schools (η εικόνα
ενδεχομένως να μην εμφανίζεται – μη σας ανησυχεί αυτό), δημιουργήστε αρχείο Notepad (Σημειωματάριο)
στον Η/Υ που σας έχει αποδοθεί.
HTML| Εφαρμογές Πληροφορικής | Ασκήσεις Σ ε λ ί δ α |2
6. Αντιγράψτε τον HTML κώδικα από τον online html editor του w3schools στο Notepad αρχείο που μόλις
δημιουργήσατε.
7. Αποθηκεύστε με όνομα Article1.html (προσέξτε ώστε οι ρυθμίσεις αποθήκευσης να είναι οι προβλεπόμενες).
8. Ελέγξτε ότι ότι το αρχείο Article1.html λειτουργεί σωστά.
9. Ανεβάστε το αρχείο Article1.html στο wiki, στο άρθρο που φέρει το ΟΝΟΜΑΤΕΠΩΝΥΜΟ σας.
Άσκηση 2η

Τίτλος Υπερσύνδεσμοι, ενσωμάτωση video

Εισαγωγικές οδηγίες

1. Η 2η άσκηση είναι ατομική. Οι σταθμοί εργασίες που θα χρησιμοποιήσετε είναι αυτοί που σας έχουν αποδοθεί
από την αρχή της χρονιάς.

Κύριες οδηγίες

2. Πλοηγηθείτε στο www.w3schools.com/html και ανακαλύψτε το tag δημιουργίας υπερσυνδέσμων (links),

πειραματιστείτε.
3. Δημιουργήστε αντίγραφο της σελίδας Article1.html με όνομα Article2.html. Αλλάξτε ελαφρά την ιστοσελίδα
ώστε να διακρίνετε ποια είναι η Article1.html και ποια η Article2.html
4. Προσθέστε και στις δύο σελίδες υπερσυνδέσμους α) έναν υπερσύνδεσμο που θα οδηγεί στον δικτυακό τόπο
users.sch.gr/papalouk και β) έναν υπερσύνδεσμο που θα οδηγεί στη σελίδα ArticleX.html, όπου Χ είναι το 1 ή 2
(ανάλογα με το σε ποια σελίδα θέλετε να δείχνει ο υπερσύνδεσμος – προφανώς καλείστε να δημιουργήσετε
link από την Article1.html στην Article2.html και αντιστρόφως).
5. Βρείτε ένα επεισόδιο κινουμένων σχεδίων «Χάιντι» στο youtube και ενσωματώστε το στην ιστοσελίδα
Article1.html, χρησιμοποιώντας το tag <iframe> (αναζητήστε βοήθεια στο www.w3schools.com/html )