still under constraction

2. Γιατί να μάθουμε html5;
• Αρχικά υπάρχει ο πρακτικός σκοπός καθώς θα γνωρίζετε να δημιουργείτε
ιστοσελίδες από το μηδέν
• Η html διδάσκει τους μαθητές να λύνουν προβλήματα (problem solving)
• H html διδάσκει στους μαθητές να αντιμετωπίζουν προβλήματα (trouble
shooting) που προκύπτουν κατά την διαδικασία λύσης προβλημάτων
• H html διδάσκει στους μαθητές πώς να χωρίζουν σύνθετα ζητήματα σε
απλούστερα μέρη
• H html διδάσκει στους μαθητές πώς να ακολουθούν κανόνες
• Αποτελεί σημαντική εισαγωγή για τους μαθητές όλων των ηλικιών στον χώρο
των ηλεκτρονικών υπολογιστών και του προγραμματισμού
Ας ξεκινήσουμε..
Το μεγαλύτερο μέρος του υλικού που βρίσκουμε στο διαδίκτυο δεν διαφέρει από αυτό
που υπάρχει στον υπολογιστή μας. Είναι ένα σύνολο από διάφορα αρχεία που βρίσκονται
ταξινομημένα σε διάφορους φακέλους.
Τα αρχεία html δεν είναι τίποτα περισσότερο από αρχεία κειμένου σαν αυτά που
αμέτρητες φορές έχετε δημιουργήσει.
Για να γράψετε λοιπόν html. Δηλαδή για να δημιουργήσετε μια ιστοσελίδα χρειάζεστε
απλώς ένα απλό πρόγραμμα επεξεργασίας κειμένου
1. Αρχικά δημιουργήστε ένα φάκελο με όνομα html μέσα στον φάκελο της τάξης
σας
2. Το σημειωματάριο (notepad) είναι ο πιο απλός επεξεργαστής κειμένου που
μπορούμε να χρησιμοποιήσουμε. Θα δημιουργούμε λοιπόν τις ιστοσελίδες μας με
το σημειωματάριο.
3. Από την αναζήτηση των windows αναζητήστε το σημειωματάριο.
4. Εναλλακτικά μπορείτε να το εντοπίσετε από την διαδρομή: μενού Έναρξη 
Προγράμματα  Βοηθήματα
5. Ανοίξτε την εφαρμογή
Πληκτρολογήστε το παρακάτω κείμενο:
Θα μάθω να δημιουργώ ιστοσελίδες!!!
6. Από το μενού Αρχείο επιλέξτε την εντολή «Αποθήκευση ως…»

3. 7. Επιλέξτε να αποθηκεύσετε το αρχείο σας εντός του φακέλου html που μόλις
δημιουργήσατε
8. Πληκτρολογήστε ως όνομα αρχείου το όνομα: test1.html
9. Από το πλαίσιο κωδικοποίηση επιλέξτε την τιμή UTF8. Με αυτόν τον τρόπο θα
μπορείτε να βλέπετε τα ελληνικά γράμματα σωστά στον πρόγραμμα περιήγησης
διαδικτύου (π.χ firefox ή google chrome)
Η πρώτη μας ιστοσελίδα!
10. Αφού αποθηκεύσατε το αρχείο με τον τρόπο που υποδείχτηκε μεταβείτε στον
φάκελο html
11. Ανοίξτε με διπλό κλικ το νέο σας αρχείο. Θα παρατηρήσατε ήδη πως είναι ένα
αρχείο – ιστοσελίδα.
Συγχαρητήρια!! Κατασκευάσατε την πρώτη σας ιστοσελίδα..
Περιγραφή της html
Θα ξεκινήσουμε την περιγραφή της html5 ξεκαθαρίζοντας από την αρχή ορισμένους
όρους που θα χρησιμοποιούμε συχνά:
• Tags (Ετικέτες)

4. • Elements (στοιχεία)
• Attributes (ιδιότητες)
Tags (ετικέτες)
Elements (στοιχεία)
Τα στοιχεία (elements) περιλαμβάνουν 2 ετικέτες με ίδιο όνομα που περικλείουν κείμενο.
Η δεύτερη ετικέτα περιέχει και την / που σηματοδοτεί και το τέλος αυτής της ετικέτας

5. Τα περισσότερα στοιχεία (elements) της html5 περιέχουν ετικέτες αρχής και τέλους.
Υπάρχουν όμως και κάποια στοιχεία που δεν περιλαμβάνουν ετικέτα τέλους.
Παράδειγμα το στοιχείο
<br> ή το στοιχείο <img>
Τα στοιχεία αυτό δεν περιλαμβάνουν ετικέτες τέλους. Το πρώτο αναπαριστάνει την
αλλαγή γραμμής στο κείμενο μας. Το δεύτερο την εισαγωγή εικόνας στην ιστοσελίδα
μας.
Γενικά τα στοιχεία που δεν μπορούν να διαθέτουν περιεχόμενο δεν διαθέτουν ετικέτα
τέλους
Υπάρχουν πάνω από 100 στοιχεία που μπορούμε να χρησιμοποιήσουμε κατά την
δημιουργία μια ιστοσελίδας αρκετά αλλά όχι όλα θα συναντήσουμε στα παρακάτω
μαθήματα.
Μπορείτε να δείτε μια λίστα με τα διατιθέμενα στοιχεία από την html5 εδώ:
http://www.w3schools.com/tags/
Attributes (ιδιότητες)
Επιτρέπει στον δημιουργό της ιστοσελίδας να προσθέσει πληροφορίες σε ένα στοιχείο.
Για παράδειγμα αυτό είναι ένα στοιχείο επικεφαλίδας:
<h1>Η διατροφή στο σχολείο μας</h1>
Αν επιθυμούμε να προσθέσουμε μια ιδιότητα θα το κάνουμε εντός της ετικέτας αρχής με
αυτόν τον τρόπο:

6. <h1 id=‘pageTitle’>Η διατροφή στο σχολείο μας</h1>
Μια ιδιότητα αποτελείται από 2 μέρη. Το πρώτο μέρος της ιδιότητας είναι το όνομά της.
Ακολουθεί το σύμβολο = και στην συνέχεια η τιμή της ιδιότητας μέσα σε εισαγωγικά
Στο συγκεκριμένο παράδειγμα η ιδιότητα id ξεχωρίζει ένα στοιχείο ως μοναδικό σε ένα
έγγραφο html. Με αυτόν τον τρόπο ο προγραμματιστής μπορεί να αποδώσει σε αυτό το
στοιχείο μια ξεχωριστή μορφή με την χρήση CSS3 ή ακόμα και μιας συμπεριφοράς με
την χρήση javascript.
Υπάρχουν αρκετές ιδιότητες που παρέχει η html5 και μπορούν να χρησιμοποιηθούν σε
όλα τα στοιχεία της ιστοσελίδας μας. Υπάρχουν επίσης ιδιότητες που μπορούν να
χρησιμοποιηθούν σε συγκεκριμένα στοιχεία μόνο.
Μια λίστα με ιδιότητες που μπορούν να χρησιμοποιηθούν σε όλα τα στοιχεία ενός
έγγραφου html μπορείτε να βρείτε εδώ:
http://www.w3schools.com/tags/ref_standardattributes.asp
Σημαντικό είναι να αναφερθεί πως στην html δεν έχει σημασία αν γράφουμε με
κεφαλαία ή με μικρά γράμματα τις ετικέτες μας και τις ιδιότητες τους. Είναι δηλαδή το
ίδιο αν γράψουμε <TITLE> ή <title>. Διαλέγουμε εμείς τον τρόπο που θα
πληκτρολογούμε τις ετικέτες μας αλλά φροντίζουμε να διατηρούμε τον τρόπο αυτό στο
σύνολο της ιστοσελίδας μας.
Πιο αναλυτικά..
Η βασική δομή ενός εγγράφου HTML5 περιλαμβάνει ετικέτες. Οι ετικέτες αποδίδουν
νόημα στο κείμενο. Για παράδειγμα ο κώδικας
<p>Δοκιμαστική παράγραφος</p>
Με το ίδιο το κείμενο χωρίς τις ετικέτες:
Δοκιμαστική παράγραφος
Πιθανότατα θα έχει το ίδιο αποτέλεσμα στον πλοηγητή (π.χ firefox) σας.
Επιπλέον ο προγραμματιστής μπορεί να ορίζει τις δικές του ιδιότητες. Θα πρέπει όμως
να προσέχει ιδιαίτερα με την επιλογή του ονόματος της ιδιότητας γιατί μπορεί η html να
έχει δεσμεύσει αυτό το όνομα σε μια καθορισμένη ιδιότητα ήδη ή να το κάνει σε μια
από τις επόμενες εκδόσεις της. Για αυτόν τον λόγο διαλέξτε ένα όνομα για την νέα
ιδιότητα σας που ξεκινά με το κείμενο data-. Παράδειγμα:
<p data-sportsteam = “olympiakos”> Τερματοφύλακας: Ρομπέρτο</p>
Προχωρημένη γνώση

7. Με τις ετικέτες όμως αποδίδουμε νόημα στο κείμενο ενημερώνοντας τον πλοηγητή πως
πρόκειται για μια ξεχωριστή παράγραφο. Είναι πολύ σημαντικό να χρησιμοποιούμε
πάντα και σωστά τις κατάλληλες ετικέτες.
Αλλάξτε τώρα την ιστοσελίδα σας ώστε να έχει αυτήν την μορφή:

8. <!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”/>
<title>Mάθημα 1</title>
</head>
<body>
Θα μάθω να δημιουργώ ιστοσελίδες!!!
</body>
</html>
Προσέξτε ότι κάποιες γραμμές έχουν γραφεί λίγο πιο μέσα από κάποιες άλλες. Κάτι
τέτοιο δεν είναι υποχρεωτικό. Αποτελεί όμως μια καλή πρακτική. Βοηθάει ιδιαίτερα τον
προγραμματιστή να διαβάσει τον κώδικα του και να εντοπίσει τυχόν λάθη του. Προσέξτε
πως οι ετικέτες ανοίγματος και κλεισίματος βρίσκονται στην ίδια ευθεία.
Αποθηκεύστε και ανοίξτε πάλι την ιστοσελίδα. Θα παρατηρήσετε ότι ελάχιστα πράγματα
έχουν αλλάξει. Έτσι τουλάχιστον φαίνεται. Όπως είπαμε πιο πριν ο σκοπός της html5
είναι να αποδώσει νόημα στο κείμενο. Στο παράδειγμα αυτό μόλις ορίσαμε τα βασικά
μέρη μιας ιστοσελίδας.
Βασικά μέρη μιας ιστοσελίδας
Στην πρώτη γραμμή υπάρχει το στοιχείο:
<!DOCTYPE html>
Αποτελεί περισσότερο ενημέρωση προς τον πλοηγητή (π.χ firefox) πως χρησιμοποιείται
η γλώσσα html5. Είναι βασικό στοιχείο και δεν πρέπει να παραλείπεται ποτέ.
Το στοιχείο <html> που περιλαμβάνει την ετικέτα ανοίγματος <html>, την ετικέτα
κλεισίματος </html> και όλο το ενδιάμεσο κείμενο, ενημερώνει τον πλοηγητή από πού
αρχίζει και που τελειώνει το έγγραφο html
Το περιεχόμενο των ετικετών <body> περιλαμβάνει το περιεχόμενο της ιστοσελίδας.
Δηλαδή ότι βρίσκεται εντός των ετικετών <body> και </body> εμφανίζεται στην οθόνη
του πλοηγητή.
Το στοιχείο <head>…</head> περιέχει πληροφορίες σχετικά με την ιστοσελίδα και το
περιεχόμενο του δεν εμφανίζεται στην οθόνη του χρήστη.
Μια από αυτές τις πληροφορίες μπορεί να είναι ο τίτλος της ιστοσελίδας (στοιχείο
<title>) που εμφανίζεται, όχι μέσα στην ιστοσελίδα, αλλά στο πάνω μέρος της καρτέλας
του πλοηγητή σας

9. Γενικά το στοιχείο <title> υπηρετεί τους παρακάτω σκοπούς:
• Φαίνεται στο πάνω μέρος της καρτέλας του πλοηγητή
• Παρέχει το όνομα της ιστοσελίδας όταν την τοποθετούμε στους σελιδοδείκτες
μας (αγαπημένα)
• Είναι το όνομα που φαίνεται όταν μια μηχανή αναζήτησης παρουσιάσει την
ιστοσελίδα αυτή ως αποτέλεσμα μιας διαδικτυακής έρευνας.
Στο παράδειγμά μας υπάρχει ακόμη το στοιχείο meta. Το στοιχείο meta παρέχει γενικές
πληροφορίες για την ιστοσελίδα μας. Οι πληροφορίες αυτές εισάγονται με τις ιδιότητες
του στοιχείου αυτού. Η ιδιότητα charset που χρησιμοποιούμε εκφράζει την
κωδικοποίηση των χαρακτήρων της ιστοσελίδας μας. Με την τιμή utf-8 είμαστε
καλυμμένοι ώστε να εμφανίζονται οι ελληνικοί χαρακτήρες σωστά στην ιστοσελίδα.
Ας επιστρέψουμε πίσω στον κώδικά μας. Στην περιοχή body προσθέστε το κείμενο:
Συναρπαστικό! Όπως φαίνεται πιο κάτω:
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”/>
<title>Mάθημα 1</title>
</head>
<body>
Θα μάθω να δημιουργώ ιστοσελίδες!!!
Συναρπαστικό!
</body>
</html>
Αποθηκεύστε και δείτε το αποτέλεσμα της ιστοσελίδα σας στον πλοηγητή σας.
Θα παρατηρήσετε πως η λέξη συναρπαστικό προστίθεται κανονικά στο ήδη υπάρχων
κείμενο σας αλλά όχι 2 γραμμές πιο κάτω όπως το θέλατε.
Αυτό συμβαίνει γιατί οι πλοηγητές δεν λαμβάνουν υπόψη ούτε την γραμμή που γράψαμε
το περιεχόμενο ούτε τα κενά που έχουμε αφήσει (θα βλέπαμε το ίδιο αποτέλεσμα
με αυτό που βλέπετε στον πλοηγητή αν είχατε γράψει:
Θα μάθω να δημιουργώ ιστοσελίδες!!! Συναρπαστικό!)
Παράγραφοι
Αν θέλετε το κείμενο σας να εμφανίζεται σε 2 γραμμές θα πρέπει να χρησιμοποιήσετε
αυτήν την σύνταξη:

10. <p>Θα μάθω να δημιουργώ ιστοσελίδες!!!</p>
<p>Συναρπαστικό!</p>
Η ετικέτα <p> χρησιμοποιείται για τις παραγράφους. Είναι σημαντικό να τις
χρησιμοποιούμε διότι όπως αναφέρθηκε ξανά η html έχει να κάνει με νόημα στο
περιεχόμενο. Χρησιμοποιώντας το <p> ενημερώνουμε τον πλοηγητή πως πρόκειται για 2
διαφορετικές παραγράφους ενώ με αυτόν τον τρόπο γίνεται πολύ πιο εύκολη τόσο η
εφαρμογή μορφής σε αυτό (με CSS3) όσο και η εφαρμογή συμπεριφοράς (με Javascript)
Εναλλακτικά μπορούμε να χρησιμοποιήσουμε αυτήν την μορφή:
Θα μάθω να δημιουργώ ιστοσελίδες!!! <br>
Συναρπαστικό!
Η ετικέτα <br> (δεν έχει ετικέτα τέλους) δηλώνει αλλαγή γραμμής
Τώρα, προκειμένου να δώσετε έμφαση σε μέρος του κειμένου σας δοκιμάστε το
παρακάτω:
<p>Θα <strong>μάθω</strong> να <em>δημιουργώ</em> ιστοσελίδες!!!</p>
<p>Συναρπαστικό!</p>
Ένα ακόμη ενδιαφέρον στοιχείο είναι το <hr>. Όπως ακριβώς το και το <br> δεν έχει
ετικέτα τέλους. Η εισαγωγή του σε ένα έγγραφο html προκαλεί την εμφάνιση μιας
οριζόντιας γραμμής στο σημείο που τοποθετήθηκε.
Σχόλια
Μπορείτε να προσθέσετε σχόλια στο html έγγραφο σας χρησιμοποιώντας την παρακάτω
σύνταξη:
<!-- Τα σχόλια σας εδώ -->
Προσοχή! Δεν υπάρχει κανένα κενό ανάμεσα στις παύλες.
Το κείμενο που βρίσκεται εντός των <!-- …. --> αγνοείται από τον πλοηγητή. Με αυτόν
τον τρόπο εισάγουμε κείμενο στην ιστοσελίδα μας που δεν βλέπει ο χρήστης. Η
δυνατότητα αυτή είναι πολύ χρήσιμη για τον προγραμματιστή καθώς μπορεί να γράφει
σημειώσεις σχετικά με τον κώδικά που θα μπορεί να διαβάσει αργότερα και να θυμηθεί
για παράδειγμα, για ποιον λόγο διάλεξε μια συγκεκριμένη τακτική.
Ειδικοί χαρακτήρες
Και αν θέλετε να γράψετε εντός του κειμένου σας τα σύμβολα < ή > για κάποιον λόγο. Η
html έχει δώσει στα συγκεκριμένα σύμβολα όπως και σε κάποια ακόμη ειδικό νόημα. Αν
μέσα στο κείμενο σας γράψετε: < ο πλοηγητής θα θεωρήσει πως προσπαθείτε να γράψετε

11. κάποια ετικέτα και δεν θα το εμφανίσει. Στην παρακάτω εικόνα θα δείτε πώς να
εμφανίσετε σε μια ιστοσελίδα ορισμένα συχνά χρησιμοποιούμενα σύμβολα
Το &nbsp χρησιμοποιείται ανάμεσα σε 2 λέξεις που δεν θέλουμε σε καμία περίπτωση να
εμφανιστούν σε διαφορετική γραμμή (αν λόγο της μορφής της σελίδας τελειώσει η
γραμμή που αναγράφεται η πρώτη λέξη και η δεύτερη πρέπει να πάει από κάτω) αλλά
επιθυμούμε να εμφανίζονται πάντα μαζί.
Επικεφαλίδες
Αντιγράψτε σε ένα έγγραφο html τον παρακάτω κώδικα.
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Η πρώτη μου ιστοσελίδα</title>
</head>
<body>

12. <h1>Η σελίδα μου</h1>
<h2>Τι είναι;</h2>
<p>Μια απλή σελίδα με html</p>
<h2>Γιατί;</h2>
<p>Για να μάθω HTML</p>
</body>
</html>
Υπάρχουν 6 διαφορετικά επίπεδα επικεφαλίδων. Είναι οι ετικέτες <h1> .. Μέχρι <h6>. H
<h1> είναι λίγο μεγαλύτερη σε μέγεθος και ακολουθούν ανάλογα και οι υπόλοιπες.
Για να αποδίδεται σωστό νόημα στις ιστοσελίδες που δημιουργείτε χρησιμοποιείστε τις
ετικέτες αυτές όσες φορές χρειάζεται αλλά νοηματικά σωστά. Για παράδειγμα οι ετικέτες
<h3> πρέπει να είναι υποκεφάλαια (υποκατηγορία) μιας ετικέτας <h2> που και αυτήν με
την σειρά της αποτελεί υποκεφάλαιο (υποκατηγορία) μιας <h1>…
Λίστες
Αντιγράψτε σε ένα έγγραφο html τον παρακάτω κώδικα και ελέγξτε το αποτέλεσμα.
<body>
<h1>Η σελίδα μου</h1>
<h2>Τι είναι;</h2>
<p>Μια απλή σελίδα με html</p>
<h2>Γιατί;</h2>
<ul>
<li>Για να μάθω html</li>
<li>Για να φτιάχνω ιστοσελίδες</li>
<li>Γιατί έτσι μου αρέσει.</li>
<ul>
</body>
Υπάρχουν 2 ειδών λίστες. Αυτές με κουκκίδες και αυτές με αρίθμηση.
Για τις λίστες με κουκκίδες χρησιμοποιήστε την ετικέτα <ul> και την ετικέτα <li> για
κάθε κουκκίδα. Για τις αριθμημένες λίστες χρησιμοποιήστε την ετικέτα <ol> αντίστοιχα.
Αντικαταστήστε το <ul> με <ol> και δοκιμάστε ξανά.
Μια λίστα μπορεί να περιέχει μια άλλη λίστα. Δοκιμάστε τον κώδικα παρακάτω:

13. <body>
<h1>Η σελίδα μου</h1>
<h2>Τι είναι;</h2>
<p>Μια απλή σελίδα με html</p>
<h2>Γιατί;</h2>
<ul>
<li>Για να μάθω html</li>
<li>Για να φτιάχνω ιστοσελίδες</li>
<ol>
<li>Για μένα</li>
<li>Για τους φίλους μου</li>
<li>Για τους συγγενείς μου</li>
</ol>
<li>Γιατί έτσι μου αρέσει.</li>
<ul>
</body>
Σύνδεσμοι (links)
Δημιουργήστε τώρα μια νέα ιστοσελίδα με όνομα test2.html και πληκτρολογήστε το
περιεχόμενο που βλέπετε.
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”/>
<title>Mάθημα 1</title>
</head>
<body>
<h2>Η ιστοσελίδα του σχολείου μου</h2>
<p>
<a href="http://11dim-thess.thess.sch.gr">11o Δημοτικό</a>
</p>
</body>
</html>
Με την ετικέτα <a> καθορίζουμε συνδέσμους όπου μπορούμε να ανοίξουμε άλλες
σελίδες.

14. Η ιδιότητα href καθορίζει την διεύθυνση του συνδέσμου. Η διεύθυνση αυτή μπορεί να
είναι μια οποιαδήποτε σελίδα του διαδικτύου ή μια άλλη σελίδα που έχουμε
κατασκευάσει εμείς.
Προσθέστε κάτω από τον σύνδεσμο που μόλις δημιουργήσατε και αυτόν τον κώδικα
<p>
<a href=«test1.html">test1</a>
</p>
Δοκιμάστε το αποτέλεσμα
Ένας σύνδεσμος επίσης μπορεί να στείλει τον χρήστη σε ένα άλλο μέρος της ίδιας
ιστοσελίδας. Για παράδειγμα αν σε κάποιο σημείο του html εγγράφου μας έχουμε το
στοιχείο:
<h2 id=“top”>Η διατροφή του σχολείου</h2>
Ένας σύνδεσμος σε κάποια άλλη θέση της ίδιας ιστοσελίδας μπορεί να έχει αυτήν την
μορφή
<a href=“#top”>Μετάβαση στον τίτλο</a>
Έτσι όταν ο χρήστης θα πατάει στον σύνδεσμο «Μετάβαση στον τίτλο» θα οδηγείται
μέσα στην ίδια ιστοσελίδα στον τίτλο όπου το id = top
Φανταστείτε πως βρίσκεστε σε μια ιστοσελίδα και επιλέγετε να κάνετε κλικ σε έναν
σύνδεσμο που οδηγεί σε μια άλλη εντελώς διαφορετική ιστοσελίδα. Αν η ιστοσελίδα
αυτή ανοίξει στο ίδιο παράθυρο τότε θα γίνει μετάβαση από τον έναν στον άλλο
δικτυακό τόπο και ο προηγούμενος δεν θα είναι πλέον ανοικτός. Αυτό πιθανό να μην το
θέλει κάποιος χρήστης. Επιθυμητή συμπεριφορά θα μπορούσε να είναι να ανοίξει ο νέος
σύνδεσμος σε μια νέα καρτέλα ή παράθυρο. Έτσι θα είναι ανοιχτός και ενεργός τόσο ο
παλιός ιστότοπος όσο και ο νέος. Με την χρήση της ιδιότητα target μπορείτε να ελέγξετε
πώς θα ανοίξει ο σύνδεσμος που δημιουργήσατε.
Για να ανοίξει ένας σύνδεσμος σε νέα καρτέλα ή παράθυρο (εξαρτάται από τον
πλοηγητή):
<a href=«test1.html" target=“_blank”>test1</a>
Εικόνες
Αντιγράψτε σε ένα έγγραφο html τον παρακάτω κώδικα και ελέγξτε το αποτέλεσμα.
<body>

15. <h2>Η ιστοσελίδα του σχολείου μου</h2>
<p>
<a href="http://11dim-thess.thess.sch.gr">11o Δημοτικό</a>
</p>
<p>
<img src=" http://11dim-thess.thess.sch.gr/images/image7.jpg " width="120"
height="90" alt=“ εικόνα το σχολείο μας">
</p>
</body>
Η ετικέτα <img> χρησιμοποιείται για την εισαγωγή μιας εικόνας στην ιστοσελίδα μας.
Επειδή δεν υπάρχει περιεχόμενο δεν υπάρχει ετικέτα κλεισίματος. Η ιδιότητα src
καθορίζει την τοποθεσία της εικόνας. Μια εικόνα μπορεί να βρίσκεται οπουδήποτε στο
διαδίκτυο ή ακόμα και στον ίδιο φάκελο που βρίσκεται η ιστοσελίδα που δημιουργούμε
σε αυτήν την περίπτωση ο σωστός κώδικας θα ήταν:
<img src=“image7.jpg”>
Συνήθως έχουμε έναν φάκελο όπου τοποθετούμε τις εικόνες μας (π.χ με όνομα images)
οπότε η ετικέτα μας θα έδειχνε έτσι:
<img src=“images/image7.jpg”>
Αντιγράψτε σε ένα έγγραφο html τον παρακάτω κώδικα και ελέγξτε το αποτέλεσμα.
<body>
<h2>Η ιστοσελίδα του σχολείου μου</h2>
<p>
<a href="http://11dim-thess.thess.sch.gr">11o Δημοτικό</a>
</p>
<p>
<img src=" http://11dim-thess.thess.sch.gr/images/image7.jpg " width="120"
height="90" alt=“ εικόνα το σχολείο μας”/>
</p>
</body>
Στο παράδειγμα πάνω χρησιμοποιούμε ακόμα τις ιδιότητες width όπου ορίζουμε το
μήκος της εικόνας σε 120 pixel. Με την ιδιότητα height αντίστοιχα ορίζουμε το ύψος της
εικόνας. Καλό είναι να χρησιμοποιούμε τις ιδιότητες αυτές ώστε ο πλοηγητής να ξέρει
εξαρχής το μέγεθος των εικόνων που θα προβάλλει. Αν τα παραλείψουμε η εικόνα θα
προβληθεί στο φυσικό της μέγεθος που μπορεί να είναι ιδιαίτερα μεγάλο.
Η ιδιότητα alt είναι ίση με κάποιο κείμενο. Σε περίπτωση που λόγω κάποιο τεχνικού ή
αλλού προβλήματος (π.χ ο πλοηγητής δεν την εμφανίζει γιατί έτσι είναι ρυθμισμένος ή

16. λόγο κακής σύνδεσης στο διαδίκτυο) κάποιος χρήστης δεν μπορεί να δει την εικόνα
βλέπει εναλλακτικά αυτό το κείμενο.
Πίνακες
Αντιγράψτε σε ένα έγγραφο html τον παρακάτω κώδικα και ελέγξτε το αποτέλεσμα.
<table>
<tr>
<td>Γραμμή 1, κελί 1</td>
<td>Γραμμή 1, κελί 2</td>
<td>Γραμμή 1, κελί 3</td>
</tr>
<tr>
<td>Γραμμή 2, κελί 1</td>
<td>Γραμμή 2, κελί 2</td>
<td>Γραμμή 2, κελί 3</td>
</tr>
<tr>
<td>Γραμμή 3, κελί 1</td>
<td>Γραμμή 3, κελί 2</td>
<td>Γραμμή 3, κελί 3</td>
</tr>
<tr>
<td>Γραμμή 4, κελί 1</td>
<td>Γραμμή 4, κελί 2</td>
<td>Γραμμή 4, κελί 3</td>
</tr>
</table>
Το στοιχείο <table> ορίζει έναν πίνακα.
Το στοιχείο <tr> είναι μια γραμμή του πίνακα.
Το στοιχείο <td> είναι ένα κελί της γραμμής του πίνακα.
Φόρμες
Είναι σημαντικό να ειπωθεί εξαρχής πως οι φόρμες από μόνες τους δεν έχουν καμία
χρησιμότητα. Οι πληροφορίες που δίνει ο χρήστης στα πεδία της φόρμας δεν είναι
δυνατόν να επεξεργαστούν αν δεν υπάρξει ανάμιξη μιας γλώσσας προγραμματισμού η
οποία θα «πάρει» τα δεδομένα που πληκτρολόγησε ο χρήστης στην φόρμα και θα τα
διαχειριστεί καταλλήλως.
Αντιγράψτε σε ένα έγγραφο html τον παρακάτω κώδικα και ελέγξτε το αποτέλεσμα.
<form action="contactus.php" method="post">

17. <p>Όνομα:</p>
<p><input type="text" name="name" value="Your name"></p>
<p>Σχόλια: </p>
<p><textarea name="comments" rows="5" cols="20">Τα σχόλια
σας</textarea></p>
<p>Είστε:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p>Προτίμηση:</p>
<p><select>
<option value=“1">Ποδόσφαιρο</option>
<option value=“2">Μπάσκετ</option>
</select></p>
</form>
Ας μελετήσουμε την κάθε ετικέτα ξεχωριστά.
<form action="contactus.php" method="post">
……
</form>
Η ετικέτα <form> ορίζει την ύπαρξη της φόρμας.
Η ιδιότητα action είναι απαραίτητη καθώς ενημερώνει τον πλοηγητή πού να αποστείλει
τα δεδομένα που πληκτρολόγησε ο χρήστης. Στο συγκεκριμένο παράδειγμα τα δεδομένα
θα τα διαχειριστεί το αρχείο contactus.php (αρχείο της γλώσσας προγραμματισμού PHP)
Η ιδιότητα method ενημερώνει σχετικά με τον τρόπο που θα αποσταλούν τα δεδομένα
αυτά. Υπάρχουν 2 τρόποι για να γίνει αυτό. Η μέθοδος post η οποία στέλνει τα δεδομένα
με σχετική ασφάλεια καθώς αυτά δεν είναι ορατά από την στιγμή της αποστολής τους κι
έπειτα. Η μέθοδος get είναι η εναλλακτική λύση η οποία όμως στέλνει τα δεδομένα μέσα
από την γραμμή διεύθυνσης του πλοηγητή κάπως έτσι:
website.com/directory/index.php?name=YourName&bday=YourBday
Φόρμες – ετικέτα <input>
Μπορεί να πάρει πολλές μορφές. Είναι η πιο συχνά χρησιμοποιούμενη. Προσέξτε πως η
ιδιότητα name είναι απαραίτητη σε κάθε στοιχείο. Χρειάζεται για να μπορεί να γίνει η
επεξεργασία των δεδομένων που καταχωρήθηκαν.
<input type="text” name=“test1”> ή απλά

18. <input name=“test2” > είναι ένα απλό πλαίσιο κειμένου
<input type="password“ name=“test3” > πλαίσιο κειμένου που η χαρακτήρες που
πληκτρολογούνται δεν εμφανίζονται.
<input type="checkbox” name=“test4” > ένα πλαίσιο ελέγχου. Μπορεί να εμφανίζεται
με την ιδίοτητα checked
<input type="checkbox" name=“test5” checked> όπου το πλαίσιο ελέγχου είναι
προεπιλεγμένο.
<input type=“radio” name=“test6” > πλαίσιο ελέγχου όπου ο χρήστης μπορεί να
επιλέξει μόνο ένα από ένα σύνολο πλαισίων.
<input type=“radio” name=“test7” checked>
<input type="submit“ name=“test8” > Κουμπί όπου υποβάλλονται τα στοιχεία που
πληκτρολογήθηκαν. Εντός του κουμπιού μπορεί να υπάρχει κείμενο έτσι:
<input type="submit" name=“test9” value=“Πάτα με">.
Φόρμες – Αναπτυσσόμενες λίστες
Το στοιχείο select συνεργάζεται με την ετικέτα option για να δημιουργήσει λίστες
επιλογής (αναπτυσσόμενες λίστες)
<select>
<option> Επιλογή 1</option>
<option> Επιλογή 2</option>
<option value="third"> Επιλογή 3</option>
</select>
Ο χρήστης θα επιλέξει κάτι από την αναπτυσσόμενη λίστα σε μια φόρμα και έπειτα θα
πατήσει το κατάλληλο κουμπί για αποστολή των δεδομένων που καταχώρησε. Από το
στοιχείο select θα σταλεί το value που επιλέχτηκε. Αν δεν έχει καθοριστεί η ιδιότητα
value όπως στην 1η
και 2η
επιλογή του παραπάνω παραδείγματος τότε θα αποσταλεί το
κείμενο της επιλογής.
Δηλαδή, στο παραπάνω παράδειγμα σε περίπτωση που ο χρήστης επιλέξει την 1η
ή την 2η
επιλογή θα σταλεί με την υποβολή της φόρμας το κείμενο «Επιλογή 1» ή «Επιλογή 2»
αντίστοιχα. Αν επιλεγεί η 3η
επιλογή θα σταλεί το κείμενο “third”
Το στοιχείο textarea, δίνει ο δικαίωμα στον χρήστη να γράψει μεγαλύτερα κείμενα στην
φόρμα.
<textarea rows="5" cols="20">Μεγάλο κείμενο</textarea>
Οι ιδιότητες rows και cols περιγράφουν το μέγεθος του στοιχείου σε γραμμές και στήλες
αντίστοιχα.
Πειραματιστείτε τόσο με αυτό το στοιχείο όσο και με όλα τα υπόλοιπα. Δεν είναι
δυνατόν να μάθουμε να δημιουργούμε ιστοσελίδες μόνο διαβάζοντας κείμενα.
Πρέπει να δοκιμάσετε. Εμπρός.. Ξεκινήστε!

19. Οι ετικέτες div και span
Όπως πολλές φορές έχουμε αναφέρει ως τώρα η html χρησιμοποιεί ετικέτες για να
αποδώσει νόημα στο περιεχόμενο της ιστοσελίδας. Οι ετικέτες div και span όμως δεν
έχουν κάποιο συγκεκριμένο νόημα. Παρόλα αυτά χρησιμοποιούνται πάρα πολύ σε
συνεργασία με την css για την δημιουργία όμορφων ιστοσελίδων.
Ένα div ορίζει ένα ξεχωριστό τμήμα στην ιστοσελίδα μας. Μέσα στο div μπορούν να
υπάρχουν παράγραφοι, εικόνες, βίντεο κτλ. Είναι ένα ξεχωριστό τμήμα της ιστοσελίδας
μας που μπορούμε να διαχειριστούμε την μορφή του ξεχωριστά με την χρήση της css.
Παρόμοια λειτουργία έχει ένα span. Η διαφορά του είναι πως χρησιμοποιείται για να
ομαδοποιήσουμε κάποιο κείμενο ώστε να μπορέσουμε να το μορφοποιήσουμε
ξεχωριστά.
Παράδειγμα κώδικα
<div id= “table”>
<p> Ένα δοκιμαστικό κείμενο για το <span id = “example”> παράδειγμά μας </span>
<table>
<tr>
<td>Γραμμή 1, κελί 1</td>
<td>Γραμμή 1, κελί 2</td>
<td>Γραμμή 1, κελί 3</td>
</tr>
<tr>
<td>Γραμμή 2, κελί 1</td>
<td>Γραμμή 2, κελί 2</td>
<td>Γραμμή 2, κελί 3</td>
</tr>
</table>
</div>
Στον παραπάνω κώδικα ορίσαμε με ένα div ένα ξεχωριστό τμήμα της ιστοσελίδας μας.
Χρησιμοποιήσαμε την ιδιότητα id για να μπορέσουμε (αυτό το τμήμα) να το
μορφοποιήσουμε ξεχωριστά με την χρήση css.
Με το span καταφέραμε να ομαδοποιήσουμε σε ένα στοιχείο το κείμενο: «παράδειγμα
μας» ώστε, με την χρήση της ιδιότητας id και css να καταφέρουμε να το
μορφοποιήσουμε διαφορετικά από το υπόλοιπο κείμενο.