Εφαρμογές Πληροφορικής - Α ΕΠΑ.Λ.
Βιβλίο Μαθητή
Κατεβάστε το βιβλίο μαθητή 
Κατεβάστε τις Οδηγίες Διδασκαλίας
Ασκήσεις HTML + CSS
Μπορείτε να χρησιμοποιήσετε ένα απλό σημειωματάριο για να επεξεργαστείτε τον κώδικα ή για μεγαλύτερη ευκολία μπορείτε να κατεβάσετε έναν από τους παρακάτω editors:
ΑΣΚΗΣΕΙΣ:
Παρακάτω θα βρείτε παραδείγματα απλών ιστοσελίδων με HTML και CSS όπου χρησιμοποιούνται πλήθος ετικετών και στυλ για εκμάθηση στην τάξη.
| Ετικέτα | Περιγραφή | Παράδειγμα Σύνταξης |
|---|---|---|
| <html> | Η κύρια ετικέτα που ορίζει το έγγραφο ως HTML. | - |
| <head> | Περιέχει μεταδεδομένα για το έγγραφο. | - |
| <body> | Περιέχει το περιεχόμενο που εμφανίζεται στη σελίδα. | - |
| <title> | Ορίζει τον τίτλο της σελίδας. | - |
| <h1> - <h6> | Ετικέτες επικεφαλίδων, από μεγαλύτερη (h1) έως μικρότερη (h6). | <h1>Τίτλος</h1> |
| <p> | Χρησιμοποιείται για παραγράφους κειμένου. | <p>Κείμενο</p> |
| <a> | Ορίζει έναν υπερσύνδεσμο. | <a href="url">Σύνδεσμος</a> |
| <link> | Συνδέει εξωτερικά αρχεία, όπως CSS. | <link rel="stylesheet" href="style.css"> |
| <ul> | Δημιουργεί μη αριθμημένη λίστα. | <ul><li>Στοιχείο</li></ul> |
| <ol> | Δημιουργεί αριθμημένη λίστα. | <ol><li>Στοιχείο</li></ol> |
| <li> | Ορίζει ένα στοιχείο λίστας. | <li>Στοιχείο</li> |
| <img> | Ενσωματώνει μια εικόνα. | <img src="εικόνα.jpg" alt="Περιγραφή"> |
| <table> | Δημιουργεί έναν πίνακα δεδομένων. | - |
| <tr> | Ορίζει μια γραμμή στον πίνακα. | - |
| <th> | Ορίζει μια κεφαλίδα στον πίνακα. | - |
| <td> | Ορίζει ένα κελί δεδομένων στον πίνακα. | - |
| <div> | Ορίζει ένα μπλοκ περιεχομένου. | <div>Περιεχόμενο</div> |
| Ιδιότητα | Περιγραφή | Παράδειγμα Σύνταξης |
|---|---|---|
| color | Ορίζει το χρώμα του κειμένου. | <p style="color: red;">Κόκκινο κείμενο</p> |
| font-size | Ορίζει το μέγεθος του κειμένου. | <p style="font-size: 20px;">Μέγεθος 20px</p> |
| border | Προσθέτει περίγραμμα σε στοιχείο. | <div style="border: 2px solid black;">Πλαίσιο</div> |
| margin | Ορίζει εξωτερικό κενό γύρω από στοιχείο. | <div style="margin: 20px;">Κενό 20px</div> |
| padding | Ορίζει εσωτερικό κενό σε στοιχείο. | <div style="padding: 15px;">Εσωτερικό 15px</div> |
| background-color | Ορίζει χρώμα φόντου. | <div style="background-color: yellow;">Φόντο</div> |
| font-family | Ορίζει τη γραμματοσειρά. | <p style="font-family: Arial;">Arial</p> |
| float | Τοποθετεί στοιχείο αριστερά ή δεξιά. | <img style="float: left;" src="εικόνα.jpg"> |
| clear | Σταματά την επίδραση του float. | <div style="clear: both;">Κείμενο</div> |
| display | Ορίζει τον τρόπο εμφάνισης ενός στοιχείου. | <span style="display: block;">Block στοιχείο</span> |
| Παράμετρος | Περιγραφή |
|---|---|
href | Ορίζει τη διεύθυνση URL για υπερσυνδέσμους και εξωτερικά αρχεία. |
src | Ορίζει τη διεύθυνση URL για ενσωματωμένα αρχεία, όπως εικόνες ή βίντεο. |
id | Ορίζει ένα μοναδικό αναγνωριστικό για ένα στοιχείο HTML. |
class | Ορίζει μια ή περισσότερες κατηγορίες για ένα στοιχείο, συνήθως για χρήση με CSS ή JavaScript. |
Ερωτήσεις HTML + CSS
Εδώ μπορείτε να βρείτε ερωτήσεις Πολλαπλής Επιλογής, Αντιστοίχισης και Σωστού – Λάθους, για ανατροφοδότηση.
Ασκήσεις AppInventor
Εδώ μπορείτε να δημιουργήσετε τον λογαριασμό σας στο AppInvevtor: https://ai2.appinventor.mit.edu/
Για κωδικούς μιας χρήσης χωρίς δημιουργία λογαριασμού πατήστε εδώ: https://code.appinventor.mit.edu/login/
Για να κατεβάσετε τον emulator πατήστε εδώ: https://ai2-starter.software.informer.com/download/
ΑΣΚΗΣΕΙΣ:
GuardDog, RollDice, PetTheCat, Μίλα μου, AccelerometerSensor, Paint, Fun and Learn, Christmas
Κατεβάστε το αρχείο με τις ασκήσεις τις οποίες μπορείτε να κάνετε import στο site του AppInventor και να τις επεξεργαστείτε όπως σας αρέσει.