📚 Συνέχεια HTML - Πίνακες και Εικόνες
Μάθημα: Σχεδιασμός Ιστοτόπων | ΕΠΑΛ
🎯 Στόχος της Άσκησης: Να μάθετε να δημιουργείτε πίνακες, να εργάζεστε με εικόνες και να οργανώνετε καλύτερα το περιεχόμενο της σελίδας σας.
📊 Πίνακες (Tables)
Οι πίνακες χρησιμοποιούνται για να οργανώσουμε πληροφορίες σε γραμμές και στήλες, όπως ένα ωρολόγιο πρόγραμμα.
| Ετικέτα | Περιγραφή | Παράδειγμα |
|---|---|---|
<table> |
Δημιουργεί πίνακα | <table>...</table> |
<tr> |
Γραμμή πίνακα | <tr>...</tr> |
<th> |
Κελί τίτλου (έντονα) | <th>Όνομα</th> |
<td> |
Κελί με δεδομένα | <td>Γιάννης</td> |
📝 Παράδειγμα Απλού Πίνακα
<table border="1">
<tr>
<th>Μάθημα</th>
<th>Καθηγητής</th>
<th>Ώρες</th>
</tr>
<tr>
<td>Μαθηματικά</td>
<td>Κος Παπαδόπουλος</td>
<td>4</td>
</tr>
<tr>
<td>Πληροφορική</td>
<td>Κα Γεωργίου</td>
<td>3</td>
</tr>
</table>
<tr>
<th>Μάθημα</th>
<th>Καθηγητής</th>
<th>Ώρες</th>
</tr>
<tr>
<td>Μαθηματικά</td>
<td>Κος Παπαδόπουλος</td>
<td>4</td>
</tr>
<tr>
<td>Πληροφορική</td>
<td>Κα Γεωργίου</td>
<td>3</td>
</tr>
</table>
💡 Συμβουλή: Το
border="1" κάνει τις γραμμές του πίνακα ορατές. Χωρίς αυτό, ο πίνακας δεν θα έχει γραμμές!
🖼️ Εργασία με Εικόνες
Ας δούμε περισσότερες λεπτομέρειες για τις εικόνες:
| Χαρακτηριστικό | Περιγραφή | Παράδειγμα |
|---|---|---|
src |
Η διεύθυνση της εικόνας | src="photo.jpg" |
alt |
Κείμενο περιγραφής | alt="Το σκυλί μου" |
width |
Πλάτος εικόνας | width="300" |
height |
Ύψος εικόνας | height="200" |
<!-- Εικόνα από τον υπολογιστή σας -->
<img src="photo.jpg" alt="Η φωτογραφία μου" width="300">
<!-- Εικόνα από το διαδίκτυο -->
<img src="https://example.com/image.jpg" alt="Περιγραφή">
<img src="photo.jpg" alt="Η φωτογραφία μου" width="300">
<!-- Εικόνα από το διαδίκτυο -->
<img src="https://example.com/image.jpg" alt="Περιγραφή">
🔗 Σύνδεσμοι με Εικόνες
Μπορούμε να κάνουμε μια εικόνα κλικάρισμα (σύνδεσμο):
<a href="https://www.example.com">
<img src="logo.jpg" alt="Το λογότυπο" width="200">
</a>
<img src="logo.jpg" alt="Το λογότυπο" width="200">
</a>
📦 Οργάνωση Περιεχομένου με div
Το <div> μας βοηθά να ομαδοποιούμε στοιχεία μαζί:
<div>
<h2>Τα Χόμπι μου</h2>
<p>Μου αρέσει το ποδόσφαιρο και η μουσική.</p>
<img src="hobby.jpg" alt="Χόμπι">
</div>
<div>
<h2>Τα Μαθήματά μου</h2>
<p>Πηγαίνω στο ΕΠΑΛ.</p>
</div>
<h2>Τα Χόμπι μου</h2>
<p>Μου αρέσει το ποδόσφαιρο και η μουσική.</p>
<img src="hobby.jpg" alt="Χόμπι">
</div>
<div>
<h2>Τα Μαθήματά μου</h2>
<p>Πηγαίνω στο ΕΠΑΛ.</p>
</div>
✏️ Εργασίες προς Υλοποίηση
Εργασία 1: Πίνακας με τα Αγαπημένα σας
Δημιουργήστε έναν πίνακα με 3 στήλες:
- Στήλη 1: Κατηγορία (π.χ. "Φαγητό", "Χρώμα", "Ταινία")
- Στήλη 2: Το αγαπημένο σας
- Στήλη 3: Γιατί σας αρέσει
Προσθέστε 5 γραμμές με διαφορετικές κατηγορίες!
Εργασία 2: Γκαλερί Εικόνων
Δημιουργήστε μια σελίδα με:
- Τίτλο "Η Γκαλερί μου"
- 3-5 εικόνες (μπορείτε να χρησιμοποιήσετε εικόνες από το διαδίκτυο)
- Κάτω από κάθε εικόνα, γράψτε μια μικρή περιγραφή σε παράγραφο
- Χρησιμοποιήστε
width="250"για να έχουν όλες το ίδιο μέγεθος
Εργασία 3: Πίνακας Ωρολογίου Προγράμματος (Απλοποιημένος)
Φτιάξτε έναν πίνακα με το πρόγραμμα 3 ημερών:
- Στήλη 1: Ώρα (π.χ. 8:00-9:00)
- Στήλη 2: Δευτέρα
- Στήλη 3: Τρίτη
- Στήλη 4: Τετάρτη
Γεμίστε 4-5 ώρες με μαθήματα.
Εργασία 4: Σελίδα "Η Οικογένειά μου"
Δημιουργήστε μια σελίδα που θα περιλαμβάνει:
- Τίτλο
<h1>: "Η Οικογένειά μου" - Μια παράγραφο εισαγωγής
- Έναν πίνακα με 3 στήλες:
- Όνομα
- Σχέση (π.χ. μητέρα, αδερφός)
- Ηλικία
- Τρεις εικόνες (μπορεί να είναι από το διαδίκτυο)
- Ένα διαχωριστικό
<hr> - Μια λίστα με τα κοινά χόμπι της οικογένειας
💡 Χρήσιμες Συμβουλές:
- Για να βρείτε δωρεάν εικόνες: unsplash.com ή pexels.com
- Πάντα βάζετε
altστις εικόνες - Μην ξεχνάτε το
border="1"στους πίνακες - Κάθε
<tr>είναι μια νέα γραμμή - Κάθε
<td>ή<th>είναι ένα κελί
📋 Παράδειγμα Ολοκληρωμένης Σελίδας
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<title>Τα Αγαπημένα μου Ζώα</title>
</head>
<body>
<h1>Τα Αγαπημένα μου Ζώα</h1>
<p>Μου αρέσουν πολύ τα ζώα! Εδώ είναι μερικά από τα αγαπημένα μου:</p>
<table border="1">
<tr>
<th>Ζώο</th>
<th>Γιατί μου αρέσει</th>
</tr>
<tr>
<td>Σκύλος</td>
<td>Είναι πιστός φίλος</td>
</tr>
<tr>
<td>Γάτα</td>
<td>Είναι χαριτωμένη</td>
</tr>
</table>
<hr>
<h2>Φωτογραφίες</h2>
<img src="dog.jpg" alt="Σκύλος" width="300">
<p>Ο σκύλος μου</p>
<img src="cat.jpg" alt="Γάτα" width="300">
<p>Η γάτα της γειτόνισσας</p>
</body>
</html>
<html lang="el">
<head>
<meta charset="UTF-8">
<title>Τα Αγαπημένα μου Ζώα</title>
</head>
<body>
<h1>Τα Αγαπημένα μου Ζώα</h1>
<p>Μου αρέσουν πολύ τα ζώα! Εδώ είναι μερικά από τα αγαπημένα μου:</p>
<table border="1">
<tr>
<th>Ζώο</th>
<th>Γιατί μου αρέσει</th>
</tr>
<tr>
<td>Σκύλος</td>
<td>Είναι πιστός φίλος</td>
</tr>
<tr>
<td>Γάτα</td>
<td>Είναι χαριτωμένη</td>
</tr>
</table>
<hr>
<h2>Φωτογραφίες</h2>
<img src="dog.jpg" alt="Σκύλος" width="300">
<p>Ο σκύλος μου</p>
<img src="cat.jpg" alt="Γάτα" width="300">
<p>Η γάτα της γειτόνισσας</p>
</body>
</html>
🎓 Κριτήρια Αξιολόγησης:
- Σωστή χρήση των ετικετών πίνακα
- Όλες οι εικόνες έχουν alt
- Ο κώδικας είναι καθαρός με σωστές εσοχές
- Η σελίδα ανοίγει χωρίς λάθη
- Δημιουργικότητα στο περιεχόμενο
