Εισαγωγή στην HTML

ΚΕΦΑΛΑΙΟ 11
Εισαγωγή στην HTML
Γιώργος Λιακέας
Διδακτικοί στόχοι
Οι μαθητές πρέπει να είναι σε θέση
 Να αναγνωρίζουν τη δομή ενός εγγράφου HTML και να επεξεργάζονται ετικέτες.

 Να ανακαλύψουν τα οφέλη του διαχωρισμού δομής και περιεχομένου ενός εγ-
γράφου HTML από την εμφάνισή του.
 Να εφαρμόζουν στυλ εμφάνισης (CSS) σε έγγραφα HTML.
 Να ενσωματώνουν κώδικα HTML από ιστοσελίδες και να τον προσαρμόζουν.
 Να δημιουργούν απλές ιστοσελίδες χρησιμοποιώντας ετικέτες HTML και στυλ
εμφάνισης (CSS).
Πρόταση Διδασκαλίας - προγραμματισμός
§ 11.1, § 11.2, § 11.3 έξι (6) ώρες

§ 11.4 πέντε (5) ώρες
Επανάληψη – δημιουργία ολοκληρωμένης εφαρμογής τρεις (3) ώρες
1
11. 1 Γενική εισαγωγή στην HTML
Τι είναι η HTML
 Η HTML είναι μια γλώσσα για τη δημιουργία ιστοσελίδων. Οι ιστοσελίδες που επισκεπτόμα-
στε κάθε μέρα στο Διαδίκτυο είναι αρχεία γραμμένα σε γλώσσα HTML. Τα αρχεία αυτά φορ-
τώνονται στο πρόγραμμα περιήγησης του Διαδικτύου (φυλλομετρητή), το οποίο χρησιμοποι-
ούμε (Chrome, Firefox, Safari, Edge, Opera, κτλ).
 “HTML” είναι το ακρωνύμιο των λέξεων Hyper Text Markup Language (=Γλώσσα Σήμανσης
Υπερκειμένου1).
 Η HTML δε μοιάζει με τις κλασσικές γλώσσες προγραμματισμού αλλά είναι μια περιγραφική
γλώσσα, χαρακτηρίζει δηλαδή τα δεδομένα μιας ιστοσελίδας και περιγράφει το σκοπό και τη
λειτουργία τους. Όποιος γνωρίζει να προγραμματίζει σε HTML, έχει τη δυνατότητα να δη-
μιουργεί ιστοσελίδες (web pages) και ιστοθέσεις 2 (web sites) στον Παγκόσμιο Ιστό (www3
/web).
 Η HTML ορίζει τον τρόπο με τον οποίο θα τοποθετηθεί και θα παρουσιαστεί το κείμενο και
τα άλλα στοιχεία (π.χ. εικόνες) που θα περιλαμβάνει μια ιστοσελίδα. Κάθε στοιχείο της ιστο-
σελίδας (τίτλος, επικεφαλίδα, παράγραφος, λίστα, πίνακας, εικόνα, βίντεο κτλ) περιβάλλεται
από «ετικέτες» (“tags”), οι οποίες καθορίζουν τη «συμπεριφορά» του.
 Κάθε ετικέτα έχει ένα όνομα και περιλαμβάνεται ανάμεσα στα σύμβολα < >.
 Όταν το πρόγραμμα περιήγησης στο Διαδίκτυο παρουσιάζει μια ιστοσελίδα, στην ουσία φορ-
τώνει το αρχείο με τον κώδικα HTML που αντιστοιχεί στην ιστοσελίδα. Από το αρχείο αυτό ο
φυλλομετρητής «διερμηνεύει» τον HTML κώδικα και ανάλογα εμφανίζει το κείμενο και τις
εικόνες στην οθόνη του υπολογιστή.
Εικόνα 1
1
Υπερκείμενο ( HyperText) είναι κείμενο στην οθόνη του υπολογιστή, το οποίο (αν πατηθεί με το ποντίκι) οδηγεί σε άλλο
κείμενο (ή άλλη ιστοσελίδα). Αυτό γίνεται μέσω ενός «συνδέσμου (link)» που ενσωματώνεται στο υπερκείμενο και ο οποίος
ονομάζεται υπερσύνδεσμος (hyperlink).
2
Ιστοθέση = Μια ομάδα από συσχετιζόμενες ιστοσελίδες.
3 Ο Παγκόσμιος Ιστός (www) είναι μια τεράστια συλλογή πληροφοριών σε διάφορες μορφές (κείμενα, εικόνες, ήχοι, βίντεο,
κτλ) που είναι αποθηκευμένες σε διάφορους υπολογιστές του Διαδικτύου (εξυπηρετητές / (web servers) . Οι πρόσβαση στις
πληροφορίες και η μεταφορά τους γίνεται με τη βοήθεια των φυλλομετρητών και του πρωτοκόλλου http.
2
Ιστορική Αναδρομή
To 1990 o Tim Berners-Lee στο CERN (Ευρωπαϊκό Κέντρο Σωματιδιακής4 Φυσικής) στη Γε-
νεύη της Ελβετίας δημιούργησε ένα πρωτόκολλο5 για τη μεταφορά πληροφοριών μέσω του
Διαδικτύου6. Το πρωτόκολλο ονομάστηκε HTTP (Hyper Text Transfer Protocol7) και είναι το
πρωτόκολλο που χρησιμοποιεί ο Παγκόσμιος Ιστός (world wide web).
Η γλώσσα HTML επινοήθηκε ως ένα εργαλείο συνεργασίας, όπου θα υπήρχε η δυνατότητα

σύνδεσης πολλαπλών εγγράφων μεταξύ τους και θα ήταν δυνατόν ο κάθε χρήστης να ανα-
ζητήσει το έγγραφο που θα τον ενδιέφερε μέσω συνδέσμων.
Εικόνα 2
4 Σωματιδιακής και όχι Μοριακής, όπως γράφει το σχολικό βιβλίο.

5 πρωτόκολλο: Ένα σύνολο συμφωνημένων κανόνων.
6
Η ιδέα του Tim Bernes Lee ξεκίνησε από τη δυσκολία που αντιμετώπιζε για τη μεταφορά αρχείων στους πολλούς και διαφο-
ρετικούς υπολογιστές που υπήρχαν τότε στο CERN καθώς και από την ανάγκη που είχαν οι συνεργαζόμενοι επιστήμονες να
ανταλλάσσουν αρχεία από απόσταση. Σκέφτηκε λοιπόν έναν τρόπο για την πρόσβαση στις πληροφορίες κάθε υπολογιστή
από οποιονδήποτε άλλον με τη χρήση του πρωτοκόλλου HTTP.
7 Όταν δίνουμε τη διεύθυνση μιας ιστοσελίδας σε έναν φυλλομετρητή του Διαδικτύου (πελάτη / client), με τη χρήση του
πρωτοκόλλου HTTP, ο πελάτης (Firefox, Chrome, κτλ) στέλνει ένα αίτημα σε έναν άλλο υπολογιστή του Διαδικτύου που λει-
τουργεί ως εξυπηρετητής (server) και ο οποίος περιέχει τη σελίδα που αναζητείται. Ο εξυπηρετητής επεξεργάζεται το αίτημα
του πελάτη και απαντά είτε στέλνοντας την ζητούμενη ιστοσελίδα (σε μορφή αρχείου html) είτε στέλνοντας μήνυμα ότι η ι-
στοσελίδα δεν υπάρχει.
3
Μια πρώτη γνωριμία με τις βασικές ετικέτες
Ξεκίνημα – Οι βασικές επικεφαλίδες
Ένας φυλλομετρητής θα πρέπει να «γνωρίζει» το είδος του εγγράφου το οποίο καλείται να

φορτώσει και να διερμηνεύσει. Για τον λόγο αυτό ένα έγγραφο HTML πρέπει να ξεκινά με τη
δήλωση:
<!DOCTYPE html>
Η δήλωση αυτή είναι μια οδηγία προς τον φυλλομετρητή ότι το έγγραφο το οποίο πρόκειται
να επεξεργαστεί είναι ένα έγγραφο με κώδικα HTML. Επιπλέον τον πληροφορεί και για την
έκδοση της HTML που χρησιμοποιείται στο έγγραφο. Στη συγκεκριμένη περίπτωση η δήλωση
σημαίνει ότι θα χρησιμοποιηθεί η HTML 5.
Οι ετικέτες
<html> και </html>
ορίζουν την αρχή και το τέλος μιας ιστοσελίδας (δηλαδή αρχείου

html).
Κάθε ιστοσελίδα περιλαμβάνει δύο βασικά τμήματα: α)To τμήμα
HEAD, το οποίο περιλαμβάνει διαχειριστικής φύσεως πληροφορίες
που αφορούν το περιεχόμενο της ιστοσελίδας και δεν εμφανίζονται
από τον φυλλομετρητή και β) το τμήμα BODY στο οποίο τοποθε-
τούμε ότι θέλουμε να εμφανίζεται στην ιστοσελίδα.
<head> και </head>
Ορίζουν την αρχή και το τέλος του τμήματος HEAD, ενώ οι ετικέ- Εικόνα 3
τες
<body> και </body>
σηματοδοτούν την αρχή και το τέλος του τμήματος BODY.
<title> και </title>
τοποθετούνται στην περιοχή HEAD και εκεί μπαίνει ο τίτλος που θα εμφανίζει ο φυλλομε-
τρητής για την ιστοσελίδα.
Με ποιο τρόπο όμως τα γράφουμε όλα αυτά;
Χρησιμοποιούμε απλά ένα συντάκτη κειμένου, όπως είναι το Σημειωματάριο των Windows
ή έναν δωρεάν συντάκτη όπως το Notepad++ που μπορούμε να κατεβάσουμε από τη διεύ-
θυνση https://notepad-plus-plus.org/download/v7.4.2.html
Άσκηση 1
Με τη χρήση ενός συντάκτη κειμένου δημιουργήστε το αρχείο test1.html το οποίο
να έχει ως τίτλο της ιστοσελίδας τη φράση «Εδώ είναι ο τίτλος…» ενώ στην ιστοσε-
λίδα να εμφανίζεται η φράση «… και εδώ το κυρίως κείμενο …».
 Ανοίξτε το Σημειωματάριο των Windows και δημιουργήστε ένα νέο αρχείο.
4
 Αποθηκεύστε το αρχείο με όνομα test1.html8.
 Μέσα στο έγγραφο δηλώστε ότι πρόκειται για αρχείο HTML.
 Δώστε τις κατάλληλες ετικέτες για την αρχή και το τέλος της ιστοσελίδας.
 Με τις κατάλληλες ετικέτες δημιουργήστε το τμήμα HEAD της ιστοσελίδας.
 Με τις κατάλληλες ετικέτες δημιουργήστε το τμήμα BODY της ιστοσελίδας.
 Δώστε ως τίτλο της ιστοσελίδας τη φράση «Εδώ είναι ο τίτλος…».
 Τοποθετήστε κατάλληλα τη φράση «… και εδώ το κείμενο …» ώστε να φαίνεται στην
ιστοσελίδα.
Μετά από όλα αυτά, το περιεχόμενο του αρχείου test1.html πρέπει να είναι όπως στην Ει-
κόνα 4.
Εικόνα 4
Αποθηκεύουμε το αρχείο με όνομα test1.html και το ανοίγουμε με έναν φυλλομετρητή. Το

αποτέλεσμα φαίνεται στην Εικόνα 5.
Εικόνα 5
8
Για να έχουμε σωστά ελληνικά, θα πρέπει επιπλέον: α) Μέσα στον κώδικα HTML (Στην περιοχή HEAD)
να έχουμε τοποθετήσει τις δηλώσεις
<html lang='el'>
<meta charset="UTF-8">
και β) Να έχουμε αποθηκεύσει το αρχείο με το Σημειωματάριο ως UTF-8 κωδικοποίηση.
Για να δούμε αν το αρχείο HTML που φτιάξαμε είναι εντάξει ή υπάρχουν προβλήματα μπορούμε να
το εξετάσουμε σε έναν HTML Validator, όπως π.χ. στον https://validator.w3.org/.
5
Παρατηρήσεις
1) Τις ετικέτες HTML μπορούμε να τις γράψουμε είτε με πεζά είτε με κεφαλαία γράμματα.
Επικρατέστερη είναι η γραφή με πεζά.
2)Παρατηρείστε τον τρόπο που γράφουμε τις ετικέτες HTML στην Εικόνα 4 χρησιμοποιώ-
ντας εσοχές. Θα μπορούσαμε να γράφουμε τη μία ετικέτα κάτω από την άλλη, όμως με
αυτό τον τρόπο ο κώδικας δεν είναι τόσο ευανάγνωστος.
Ερωτήσεις
1. Σε ποια από τις παρακάτω ετικέτες τοποθετούμε το κείμενο, το οποίο θέλουμε να φαίνε-
ται στην ιστοσελίδα;
Α. <go> Β. <body> Γ. <head> Δ. <html>
2. Το κείμενο που βρίσκεται ανάμεσα στις ετικέτες <title> </title>, τοποθετείται:
Α. Δεν τοποθετείται πουθενά στο φυλλομετρητή.

Β. Τοποθετείται στο επάνω μέρος της ιστοσελίδας.
Γ. Τοποθετείται στο κέντρο της ιστοσελίδας.
Δ. Τοποθετείται στην καρτέλα ή στη γραμμή τίτλου του φυλλομετρητή.
3. Ποια είναι η τρέχουσα έκδοση της HTML;
4. Ποια ετικέτα πληροφορεί τον φυλλομετρητή ότι το αρχείο είναι ένα δομημένο έγγραφο
HTML;
(Απαντήσεις: 1)Β -- 2)Δ – 3) HTML5 4) <!DOCTYPE html>)
Παράγραφος – αλλαγή γραμμής – οριζόντιος χάρακας
Σε ένα κανονικό έγγραφο το κείμενο οργανώνεται σε προτάσεις και παραγράφους ώστε να

είναι ευανάγνωστο, το ίδιο συμβαίνει και στο κείμενο ενός εγγράφου HTML.
Το κείμενο μιας παραγράφου τοποθετείται ανάμεσα στις ετικέτες
<p> και </p>.
Ο φυλλομετρητής τοποθετεί δύο κενές γραμμές ανάμεσα σε δύο διαδοχικές παραγράφους.
Εάν εντός μιας παραγράφου θέλουμε το κείμενο να πάει στην επόμενη γραμμή τοποθετούμε
την ετικέτα αλλαγής γραμμής
<br>
Η ετικέτα <br> είναι «μονομελής», δεν συμπληρώνεται δηλαδή με άλλη για το κλείσιμο.
Μία άλλη ετικέτα η οποία επίσης είναι «μονομελής», είναι η ετικέτα
<hr>
η οποία τοποθετεί έναν οριζόντιο χάρακα (γραμμή) στο κείμενο. Μέσα στα σύμβολα < > μπο-
ρούν να τοποθετηθούν επιπλέον πληροφορίες. Για παράδειγμα, αν θέλουμε ο οριζόντιος χά-
ρακας να καταλαμβάνει το 50% της γραμμής, θα γράψουμε:
<hr width=50%>
6
Άσκηση 2
Κρατήστε τις βασικές ετικέτες του εγγράφου που δημιουργήσατε στην Άσκηση 1 και συ-
μπληρώστε το με κείμενο, έτσι ώστε να περιέχει δύο παραγράφους, δύο ετικέτες αλλαγής
γραμμής και δύο οριζόντιους χάρακες.
 Με το συντάκτη κειμένου που χρησιμοποιείτε, φορτώστε το αρχείο test1.html.
 Αποθηκεύστε το, δίνοντας το όνομα test2.html.
 Αλλάξτε το περιεχόμενο ανάμεσα στις ετικέτες <title> </title> σε «Άσκηση 2» χωρίς τα
εισαγωγικά.
 Αφαιρέστε το κείμενο «… και εδώ είναι το κυρίως κείμενο …» από την περιοχή BODY
του εγγράφου.
 Χρησιμοποιώντας κατάλληλα το ζευγάρι ετικετών παραγράφου δημιουργήστε δύο πα-
ραγράφους γράφοντας το παρακάτω κείμενο (χωρίς τα εισαγωγικά):
«Θέλω να ξεκινήσω τη διαδικασία κατασκευής ιστοσελίδων. Είναι πολλά τα θέματα
που πρέπει να μάθω, όμως λέω να αρχίσω από τη γλώσσα HTML η οποία – λένε – ότι
είναι σχετικά εύκολη.»
«Άρχισα λοιπόν να μαθαίνω τις ετικέτες της HTML. Είμαι ακόμα στην αρχή και μάλλον
τα πράγματα θα δυσκολέψουν. Προς το παρόν όμως το απολαμβάνω!»
 Φορτώστε το αρχείο test2.html σε έναν φυλλομετρητή. Θα πρέπει να δείτε μια εικόνα

ανάλογη με την Εικόνα 6.
Εικόνα 6
 Τοποθετήστε δύο ετικέτες αλλαγής γραμμής το κείμενο μετά την πρώτη πρόταση κάθε
παραγράφου να τοποθετείται στην επόμενη γραμμή (Εικόνα 7).
Εικόνα 7
 Χωρίστε την πρώτη παράγραφο από τη δεύτερη με έναν χάρακα που θα καταλαμβάνει
το 50% του χώρου της ιστοσελίδας.
 Τοποθετήστε έναν χάρακα στο τέλος της δεύτερης παραγράφου.
7
Μετά την τοποθέτηση κάθε χάρακα, η ιστοσελίδα μας θα έχει την μορφή της Εικόνας 8.
Εικόνα 8
Ο κώδικας του αρχείου test2.html είναι ο παρακάτω:

<!DOCTYPE html>
<html>
<head>
<title> Άσκηση 2</title>
</head>
<body>
<p>Θέλω να ξεκινήσω τη διαδικασία κατασκευής ιστοσελίδων. <br> Είναι πολλά τα θέ-
ματα που πρέπει να μάθω, όμως λέω να αρχίσω από τη γλώσσα HTML η οποία – λένε – ότι
είναι σχετικά εύκολη. </p>
<hr width=50%>
<p> Άρχισα λοιπόν να μαθαίνω τις ετικέτες της HTML.<br> Είμαι ακόμα στην αρχή και
μάλλον τα πράγματα θα δυσκολέψουν. Προς το παρόν όμως το απολαμβάνω! </p>
<hr>
</body>
</html>
Οι ετικέτες Επικεφαλίδων
Χρησιμοποιούνται για να διαχωρίζουν τις ενότητες κειμένου όπως ακριβώς σε ένα κανονικό
έγγραφο. Υπάρχουν έξι επίπεδα επικεφαλίδων με μέγεθος που μειώνεται από επάνω προς
τα κάτω. Η γενική σύνταξη μιας επικεφαλίδας είναι:
<hx> Τίτλος Επικεφαλίδας </hx>
όπου x είναι το επίπεδο της επικεφαλίδας και παίρνει τις τιμές 1, 2, 3, 4 ,5, 6.
Για παράδειγμα, αν θέλουμε μια επικεφαλίδα με το μεγαλύτερο δυνατό μέγεθος, θα γρά-
ψουμε:
<h1> Μεγάλος Τίτλος </h1>
8
Άσκηση 3
Δημιουργήστε το αρχείο test3.html, με επικεφαλίδα Άσκηση 3, το οποίο να παρουσιάζει σε
μια ιστοσελίδα τις λέξεις «Γαλαξίας», «Γη», «Ευρώπη», «Ελλάδα», «Πελοπόννησος», «Κα-
λαμάτα» ως επικεφαλίδες μειούμενου μεγέθους.
 Αφαιρέστε το κείμενο το κείμενο και τους χάρακες από την περιοχή BODY του εγγρά-
φου.
 Δημιουργήστε με τη σειρά έξι ετικέτες, από <h1> </h1> μέχρι και <h6></h6> και τοπο-
θετείστε με τη σειρά μία μία τις λέξεις που αναφέρονται στην άσκηση.
Όταν φορτώσετε με έναν φυλομετρητή το αρχείο test3.html , θα πάρετε το παρακάτω

αποτέλεσμα:
Εικόνα 9
Ο κώδικας του αρχείου test3.html είναι:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Γαλαξίας </h1>
<h2> Γη </h2>
<h3> Ευρώπη </h3>
<h4> Ελλάδα </h4>
<h5> Πελοπόννησος</h5>
<h6> Καλαμάτα </h6>
9
</body>
</html>
Οι Σύνδεσμοι (Links)
Όταν πρωτοεμφανίστηκε ο Παγκόσμιος Ιστός, η επαναστατική δυνατότητα που προσέφερε

ήταν η χρήση του «υπερκειμένου» (hypertext). Ως υπερκείμενο νοείται ένα είδος εγγράφου,
από κάποια σημεία του οποίου ο χρήστης μπορεί να προσπελάσει άλλα κείμενα αποθη-
κευμένα στον ίδιο ή σε άλλους υπολογιστές. Αυτό γίνεται με τη βοήθεια των συνδέσμων
(links), οι οποίοι τοποθετούνται σε διάφορες λέξεις του κειμένου. Όταν ο χρήστης πατήσει
στη λέξη που περιέχει σύνδεσμο, οδηγείται στο έγγραφο στο οποίο «δείχνει» ο συγκεκριμέ-
νος σύνδεσμος.
Εικόνα 10
Σήμερα, εκτός από λέξεις, σύνδεσμοι μπορούν να δημιουργηθούν και σε εικόνες, κουμπιά ή
άλλα στοιχεία μιας ιστοσελίδας οπότε κάθε τέτοιο συστατικό που μπορεί να μας οδηγήσει
σε άλλη ιστοσελίδα (ή ακόμα και σε άλλο σημείο της ίδιας ιστοσελίδας) ονομάζεται υπερ-
σύνδεσμος (hyperlink).
Για τη δημιουργία συνδέσμων χρησιμοποιείται η ετικέτα δεσμού (anchor tag)
<a> και </a>.
Η ανατομία ενός συνδέσμου φαίνεται στην επόμενη εικόνα:
Εικόνα 11
 Οι ετικέτες συνδέσμου <a> και </a> τοποθετούνται στην αρχή και στο τέλος του συνδέ-
σμου.
10
 Η ιδιότητα href χρησιμοποιείται για τον καθορισμό του υπερκειμένου στο οποίο θα δεί-
χνει ο σύνδεσμος.
 Η διεύθυνση της ιστοσελίδας συνοδεύει την ιδιότητα href (δε φαίνεται στην ιστοσελίδα)
και αντιστοιχεί στην ιστοσελίδα που θα μεταβεί ο χρήστης αν πατήσει με το ποντίκι πάνω
στο ορατό κείμενο.
 Tο ορατό κείμενο (κείμενο αγκύρωσης) είναι αυτό που φαίνεται στην ιστοσελίδα και ό-
ταν κάνουμε κλικ επάνω του, ο φυλλομετρητής χρησιμοποιεί τη διεύθυνση που έχουμε
γράψει για να φορτώσει την ιστοσελίδα.
Άσκηση 4
Δημιουργήστε το αρχείο test4.html, με επικεφαλίδα Άσκηση 4, το οποίο να περιέχει δύο
συνδέσμους α) προς το Πανελλήνιο Σχολικό Δίκτυο στη διεύθυνση http://www.sch.gr με ο-
ρατό κείμενο «ΠΣΔ» (χωρίς τα εισαγωγικά) και β) προς το Υπουργείο Παιδείας στη διεύθυνση
http://minedu.gov.gr με ορατό κείμενο «Υπουργείο Παιδείας» (χωρίς τα εισαγωγικά).
 Αφαιρέστε το κείμενο «… και εδώ είναι το κυρίως κείμενο …» από την περιοχή BODY
του εγγράφου.
Στην περιοχή BODY του εγγράφου:
 Δημιουργήστε καινούργια παράγραφο με την κατάλληλη ετικέτα.

 Δημιουργήστε ένα σύνδεσμο προς το Πανελλήνιο Σχολικό Δίκτυο.
 Κλείστε την παράγραφο.
 Δημιουργήστε καινούργια παράγραφο.
 Δημιουργήστε ένα σύνδεσμο προς το Υπουργείο Παιδείας.
 Κλείστε την παράγραφο.
Φορτώνοντας το αρχείο test4.html με το φυλλομετρητή, πρέπει να πάρουμε την επόμενη
εικόνα:
Εικόνα 12
Μεταφέροντας το ποντίκι επάνω στο κείμενο “ΠΣΔ» ή «Υπουργείο Παιδείας» παρατηρούμε

ότι ο δείκτης μετατρέπεται σε «χεράκι» που σημαίνει ότι τα συγκεκριμένα σημεία είναι υ-
περσύνδεσμοι. Πατώντας σε κάποιον από τους δύο, μεταφερόμαστε στην ηλεκτρονική διεύ-
θυνση η οποία αντιστοιχεί στο ορατό κείμενο (βλέπε Εικόνα 11).
Το αρχείο test4.html:
11
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<a href="http://www.sch.gr"> ΠΣΔ </a>
</p>
<p>
<a href="http://minedu.gov.gr"> Υπουργείο Παιδείας </a>
</p>
</body>
</html>
Εισαγωγή Εικόνας
Εάν θέλουμε να τοποθετήσουμε εικόνα στην ιστοσελίδα μας, θα πρέπει να διαθέτουμε το

αρχείο της εικόνας σε κατάλληλη μορφή. Είναι σημαντικό το αρχείο της εικόνας να μην έχει
μεγάλο μέγεθος ώστε να μην καθυστερεί η φόρτωση της ιστοσελίδας. Υπάρχουν διάφορες
μορφές αρχείων εικόνας για το Διαδίκτυο, όπως gif, jpeg και png9.
Για να τοποθετηθεί μια εικόνα σε ιστοσελίδα θα πρέπει το αρχείο της να βρίσκεται είτε στον
ίδιο φάκελο με το αρχείο HTML της ιστοσελίδας είτε σε κάποια άλλη θέση, την οποία όμως
πρέπει να προσδιορίσουμε. Εάν το αρχείο της εικόνας (με όνομα π.χ. image1.gif) βρίσκεται
στον ίδιο φάκελο με το αρχείο της ιστοσελίδας, για να την εμφανίσουμε χρησιμοποιούμε
την ετικέτα <img> και την ιδιότητα src, όπως παρακάτω:
<img src= “image1.gif”>
9
Τα αρχεία gif, jpeg (jpg) και png είναι οι συνηθέστερες μορφές αρχείων εικόνας που χρησιμοποιού-
νται στο Διαδίκτυο. Τα αρχεία τύπου gif υποστηρίζουν λίγα χρώματα (μέχρι 256), άρα δεν είναι κα-
τάλληλα για παρουσίαση φωτογραφιών, μπορούν όμως να παρουσιάζουν κινούμενα σχέδια
(animation). Τα αρχεία τύπου jpeg (ή jpg) είναι κατάλληλα για παρουσίαση φωτογραφιών γιατί συν-
δυάζουν την υποστήριξη πολλών χρωμάτων (βάθος χρώματος 24 bit δηλ 224 = 16.777.216 χρώματα)
και μικρό μέγεθος αρχείου. Τέλος, ο τύπος png είναι νεότερος, συνδυάζει τα πλεονεκτήματα τόσο του
τύπου jpeg/jpg (μπορεί να δώσει εικόνες με βάθος χρώματος 24 bit) όσο και του gif (υποστηρίζει
διαφάνεια). Για το λόγο αυτό θεωρείται αρκετά κατάλληλος για την προβολή εικόνων στο Διαδίκτυο.
Τα αρχεία png είναι μεγαλύτερα σε μέγεθος σε σχέση με τα jpeg/jpg (για τις ίδιες φωτογραφίες) όμως
στα png δεν υπάρχει η απώλεια πληροφορίας που υπάρχει στα jpg, λόγω του (απωλεστικού) αλγό-
ριθμου συμπίεσης που χρησιμοποιείται.
12
Άσκηση 5
Δημιουργήστε το αρχείο test5.html (επικεφαλίδα: ” Άσκηση 5”) με το οποίο να εισάγετε
στην ιστοσελίδα την εικόνα fish.png , έτσι ώστε να έχουμε το παρακάτω αποτέλεσμα στο
φυλλομετρητή:
Εικόνα 13
Η εικόνα fish.png είναι μια εικόνα με διαστάσεις 598 X 363 εικονοστοιχεία και διαφανές
φόντο.
Το αρχείο test5.html εκτός από τις συνηθισμένες τροποποιήσεις (τίτλος) θα περιλαμβάνει

την ετικέτα εισαγωγής εικόνας.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> <img src="fish.png"> </p>
</body>
</html>
Άσκηση 5-1 – Επέκταση

Τροποποιείστε την προηγούμενη άσκηση έτσι ώστε με την ίδια εικόνα χρησιμοποιώντας τα
χαρακτηριστικά width και height στην ετικέτα img, να δημιουργήσετε ένα «κοπάδι» ψαριών
διαφόρων μεγεθών.
13
Εικόνα 14
Όπως αναφέραμε στην προηγούμενη άσκηση, οι αρχικές διαστάσεις της εικόνας είναι 598 Χ
363 εικονοστοιχεία. Ρυθμίζουμε τις ιδιότητες width και height ώστε ο λόγος πλάτους προς
μήκος να είναι (περίπου) ίδιος με τον αρχικό αλλιώς θα έχουμε παραμορφώσεις. Η ιστοσε-
λίδα της Εικόνας 14 έχει φτιαχτεί με τον παρακάτω κώδικα:
<!DOCTYPE html>
<html>
<head>
<title> Άσκηση 5_1</title>
</head>
<body>
<p> <img src="fish.png" >
<img src="fish.png" width="300" height="170" >
<img src="fish.png" width="150" height="85" > </p>
</body>
</html>
Ας δούμε τις Ερωτήσεις – Δραστηριότητες της σελ. 97 του σχολικού Βιβλίου.
1. Η επίσκεψη στην ιστοσελίδα του ελληνικού W3C έχει το παρακάτω αποτέλεσμα:
14
Στην ιστοσελίδα μπορεί κανείς να βρει ενδιαφέρουσες πληροφορίες από το σύνδεσμο «Τε-
χνολογία» καθώς και ειδήσεις σχετικές με τον Παγκόσμιο Ιστό και την HTML από το σύνδε-
σμο «Ενημέρωση». Γενικά πάντως η ιστοθέση δείχνει «παραμελημένη» αφού αν ανοίξει
κάποιος το «ΝΕΟ ΦΥΛΛΑΔΙΟ ΤΟΥ W3C” θα διαβάσει για το «Ελληνικό Γραφείο του W3C:1998
– 2009» και πιο κάτω θα συναντήσει τα Ενημερωτικά φυλλάδια για τους μήνες Φεβρουάριο
και Μάρτιο 2010.
2. Για την προβολή του πηγαίου κώδικα της ιστοσελίδας του Σχολείου μας:
 Φορτώνουμε την ιστοσελίδα σε έναν φυλλομετρητή (π.χ. Firefox, Chrome).

 Σε κάποιο σημείο της ιστοσελίδας κάνουμε δεξί κλικ με το ποντίκι.
 Από το μενού που εμφανίζεται, επιλέγουμε: «Προβολή Πηγαίου Κώδικα» (Firefox)
ή «Προβολή κώδικα σελίδας» (Chrome).
3. Φορτώστε την ιστοσελίδα του Δήμου σας (εγώ φόρτωσα την ιστοσελίδα του Δήμου Κα-
λαμάτας). Μερικές από τις ετικέτες που χρησιμοποιούνται είναι:
1) <html> </html> 2)<head> </head> 3)<title></title> 4)<body></body> 5)

<ul></ul> 6)<li></li> 7)<a></a> 8)<img> 9)<script></script> 10) <div></div>
4. Δημιουργούμε δύο στοιχειώδεις σελίδες HTML με έναν συντάκτη κειμένου. Τα ονόματα

των σελίδων είναι page1.html και page2. html. Σε κάθε σελίδα δημιουργούμε ένα σύνδεσμο
προς την άλλη σελίδα.
Το αρχείο page1.html
<!DOCTYPE html>
<html>
<head>
<title> Πρώτη Σελίδα</title>
</head>
<body>
<p> Αυτή είναι η ΠΡΩΤΗ σελίδα! </p>
15
<p> Πατήστε <a href="page2.html"> εδώ </a> για να πάτε στη δεύτερη σελίδα. </p>
</body>
</html>
Το αρχείο page2.html
<!DOCTYPE html>
<html>
<head>
<title> Δεύτερη Σελίδα</title>
</head>
<body>
<p> Αυτή είναι η ΔΕΥΤΕΡΗ σελίδα! </p>
<p> Πατήστε <a href="page1.html"> εδώ </a> για να πάτε στην πρώτη σελίδα. </p>
</body>
</html>
Το αποτέλεσμα:
Για να δούμε καλύτερα το πώς όλες αυτές οι ετικέτες «δένουν» μεταξύ τους, ας υλοποιή-
σουμε μια εργασία στην οποία να συμπεριλαμβάνονται τα περισσότερα από όσα μάθαμε.
16
ΕΡΓΑΣΙΑ10
Δημιουργήστε το κατάλληλο αρχείο χρησιμοποιώντας ετικέτες της γλώσσας HTML ώστε να
κατασκευάσετε την επόμενη απλή ιστοσελίδα:
Πιο συγκεκριμένα, το αρχείο θα περιλαμβάνει τα παρακάτω:

α)Τοποθέτηση στις κατάλληλες θέσεις των επικεφαλίδων αρχής και τέλους του εγγράφου καθώς και
των επικεφαλίδων αρχής και τέλους των τμημάτων head και body.
β) Τοποθέτηση των κατάλληλων ετικετών στο τμήμα HEAD του εγγράφου, ώστε ο τίτλος της ιστοσελί-
δας να είναι η φράση «Το καράβι».
Τοποθέτηση των κατάλληλων ετικετών ώστε στο τμήμα BODY του εγγράφου ώστε:
γ) Να εμφανιστεί η εικόνα «ship.jpg», η οποία βρίσκεται στον ίδιο φάκελο με το αρχείο της ιστοσελί-
δας.
δ) Να εμφανιστούν οι λέξεις δ1) «Καράβι» δ2) «που» δ3) «πλέει» δ4) «στις» δ5) «ελληνικές» δ6)
«θάλασσες» υπό μορφή επικεφαλίδων μειούμενου μεγέθους.
ε) Να δημιουργηθεί σύνδεσμος προς τον ιστοχώρο του Υπουργείου Πολιτισμού
(http://www.culture.gr) με τη χρήση της φράσης «Υπουργείο Πολιτισμού».
στ) Να εμφανίζεται το παρακάτω απόσπασμα από το ποίημα του Καβάφη:
10
Η εργασία (ή μέρος της) θα μπορούσε να τεθεί και ως άσκηση σε τεστ ή σε διαγώνισμα προαγωγι-
κών εξετάσεων.
17
Βγάζει η θάλασσα κρυφή φωνή —
φωνή που μπαίνει
μες στην καρδιά μας και την συγκινεί
και την ευφραίνει.
Τραγούδι τρυφερό η θάλασσα μας ψάλλει,

τραγούδι που έκαμαν τρεις ποιηταί μεγάλοι,
ο ήλιος, ο αέρας και ο ουρανός.
η) Η σελίδα να κλείνει με έναν οριζόντιο χάρακα.

Προετοιμασία:
 Ετοιμάζουμε την εικόνα μας ship.jpg και την τοποθετούμε στον ίδιο φάκελο με το αρχείο
HTML. (Αν θέλουμε να την τοποθετήσουμε σε διαφορετικό φάκελο, θα πρέπει στην ετι-
κέτα img που θα δημιουργήσουμε, να αναφέρουμε τη διαδρομή προς το αρχείο της ει-
κόνας).
 Με έναν συντάκτη κειμένου (Σημειωματάριο, Notepad++, κτλ) δημιουργούμε αρχείο
HTML, το οποίο ονομάζουμε index.html.
 Ο κώδικας HTML είναι ο παρακάτω:
<!DOCTYPE html>
<html>
<head>
<title>Το Καράβι</title>
</head>
<body>
<p>
<img src="ship.jpg">
</p>
<h1> Καράβι </h1>
<h2> που </h2>
<h3> πλέει </h3>
<h4> στις </h4>
<h5> Ελληνικές </h5>
<h6> θάλασσες </h6>
<p>
<a href="http://www.culture.gr"> Υπουργείο Πολιτισμού </a>
</p>
<p>
Βγάζει η θάλασσα κρυφή φωνή — <br>
φωνή που μπαίνει <br>
μες στην καρδιά μας και την συγκινεί <br>
και την ευφραίνει. <br>
</p>
<p>
Τραγούδι τρυφερό η θάλασσα μας ψάλλει, <br>
τραγούδι που έκαμαν τρεις ποιηταί μεγάλοι, <br>
ο ήλιος, ο αέρας και ο ουρανός. <br>
</p>
<hr>
</body>
</html>
18
Επεκτάσεις
1) Να δημιουργηθεί σύνδεσμος προς το Υπουργείο Πολιτισμού (ή κάπου αλλού) και από
την εικόνα ship.jpg.
2) Κάθε τμήμα του περιεχομένου της ιστοσελίδας (εικόνα, επικεφαλίδες, σύνδεσμος, ποί-
ημα) να χωρίζεται από τα υπόλοιπα με χάρακα μεγέθους 50%.
11.2 H HTML5
 Η HTML5 είναι η τελευταία11 εξέλιξη της γλώσσας HTML.
 Εκτός από τη δημιουργία των κλασσικών ιστοσελίδων του Παγκόσμιου Ιστού, χρησιμο-
ποιείται και για τη δημιουργία εφαρμογών διαδικτύου για φορητές συσκευές.
 Δίνει βάρος στη σημασιολογία12 των ετικετών.
 Περιορίζει τη χρήση πρόσθετων 13(plug-ins) στα προγράμματα πλοήγησης (φυλλομε-
τρητές).
Μεταξύ των άλλων χαρακτηριστικών της HTML5, ξεχωρίζουν:
 Νέες ετικέτες για το σημασιολογικό διαχωρισμό των μερών του εγγράφου (header,
section, article, nav, κ.α.).
 Νέες ετικέτες για την εισαγωγή ήχου και βίντεο, τις <audio> και <video>.
 Νέες δυνατότητες
o σχεδίασης (συστατικό Canvas μέσα στο οποίο μπορούν να δημιουργηθούν γρα-
φικά με τη βοήθεια της γλώσσας JavaScript),
o μεταφοράς και απόθεσης (drag – and – drop) ,
o τοπικής αποθήκευσης δεδομένων (web storage /αποθήκευση στον υπολογιστή
του χρήστη),
o Λειτουργία εκτός σύνδεσης (offline web applications), δημιουργία εφαρμογών
που μπορούν να εκτελεστούν και χωρίς σύνδεση στο διαδίκτυο,
o Εμπλουτισμένα στοιχεία για φόρμες (ημερομηνία, ηλεκτρονικές διευθύνσεις,
εύρος τιμών).
o Ενσωματωμένη διαχείριση διανυσματικών 14 γραφικών μορφής SVG (ετικέτα
<svg> μέσα στην οποία μπορούμε να δημιουργούμε διανυσματικά γραφικά
(γραμμές, κύκλους, πολύγωνα, κτλ, τα οποία δεν παραμορφώνονται αν αλλά-
ξουμε τις διαστάσεις της εικόνας σε αντίθεση με τις ψηφιογραφικές εικόνες .gif,
jpg, png).
11
Βρισκόμαστε ήδη στην έκδοση HTML5.1.
12
Με άλλα λόγια, το όνομα κάθε ετικέτας υπονοεί τον σκοπό και τη λειτουργία της.
13
Με HTML5 σε συνδυασμό με τις γλώσσες CSS και JavaScript μπορούν να δημιουργηθούν δυναμι-
κές ιστοσελίδες χωρίς την ανάγκη χρήσης του πρόσθετου Flash.
14
19
Εισαγωγή ήχου και βίντεο
Ήχος
Για την ενσωμάτωση ήχου, η HTML χρησιμοποιεί την ετικέτα
<audio> </audio>
συνδυασμό με την ιδιότητα controls και την ετικέτα <source>.
 Η ιδιότητα controls προσθέτει τα κουμπιά “Εκτέλεση”, “Παύση” και ένταση

του ήχου.
 Η ετικέτα <source> φορτώνει το αρχείο ήχου που θα εκτελεστεί. Μάλιστα
μπορούμε να βάλουμε το αρχείο ήχου σε διάφορες μορφές και από αυτές ο
φυλλομετρητής θα εκτελέσει το πρώτο από τα αρχεία που θα αναγνωρίσει.
 Μετά την ετικέτα <source> συνήθως γράφουμε και ένα μήνυμα, όπως «Δυ-
στυχώς δεν υποστηρίζεται η ετικέτα audio» για την περίπτωση που η έκδοση
του φυλλομετρητή είναι παλιά και δεν υποστηρίζει την <audio>.
Άσκηση 6
Δημιουργήστε το αρχείο test6.html (επικεφαλίδα : Εισαγωγή ήχου) με το οποίο να εισάγετε
στην ιστοσελίδα το αρχείο ήχου ixos-piano.m3 (ή ixos-piano.ogg) έτσι ώστε να έχουμε το
παρακάτω αποτέλεσμα:
Εικόνα 15
Αρχικά ετοιμάζουμε και τοποθετούμε τα αρχεία ήχου ixos-piano.mp3 και ixos-piano.ogg

στο φάκελο, όπου πρόκειται να αποθηκεύσουμε το αρχείο HTML. Στο αρχείο test6.html
τοποθετούμε την ετικέτα <audio> </audio> όπως παρακάτω:
<!DOCTYPE html>
<html>
<head>
<title> Εισαγωγή ήχου </title>
</head>
<body>
<h1> Εισαγωγή αρχείου ήχου </h1>
<audio controls>
20
<source src="ixos-piano.ogg" type="audio/ogg">
<source src="ixos-piano.mp3" type="audio/mpeg">
Δυστυχώς δεν υποστηρίζεται η ετικέτα audio.
</audio>
</body>
</html>
Βίντεο
Η ενσωμάτωση βίντεο ακολουθεί κανόνες ανάλογους με αυτούς της ενσωμάτωσης ήχου. Η

ετικέτες που χρησιμοποιούμε είναι οι
<video> </video>
 Η ενσωμάτωση του βίντεο γίνεται είτε με την ιδιότητα src της ετικέτας <video> είτε με
την ετικέτα
<source> </source>
όπως και σε ένα αρχείο ήχου.
 Οι ιδιότητες width και height χρησιμοποιούνται για να ορίσουν τις διαστάσεις του
βίντεο.
 Η ιδιότητα controls εμφανίζει τα στοιχεία ελέγχου του βίντεο («Εκτέλεση», «Παύση»,
ένταση του ήχου).
Άσκηση 7
Δημιουργήστε το αρχείο test7.html (επικεφαλίδα : Εισαγωγή βίντεο) με το οποίο να εισά-
γετε στην ιστοσελίδα το βίντεο apple_moving.mp4 έτσι ώστε να έχουμε το παρακάτω α-
ποτέλεσμα:
Εικόνα 16
Τοποθετούμε αρχικά το βίντεο, το οποίο θέλουμε να παρουσιάσουμε στην ιστοσελίδα,

έστω το apple_moving.mp4. Οι ετικέτες που θα χρησιμοποιήσουμε είναι ανάλογες με
αυτές του αρχείου ήχου.
21
<!DOCTYPE html>
<html>
<head>
<title> Εισαγωγή βίντεο </title>
</head>
<body>
<h1> Εισαγωγή αρχείου βίντεο </h1>
<video width=320 height=240 controls>
<source src="apple_moving.mp4" type="video/mp4">
Δυστυχώς δεν υποστηρίζεται η ετικέτα video.
</video>
</body>
</html>
Δομή εγγράφου
Μία σελίδα του Διαδικτύου πρέπει να περιλαμβάνει –μεταξύ των άλλων - μερικά βασικά
τμήματα, όπως:
 Κεφαλίδα (header), η οποία περιγράφει γενικά το θέμα της ιστοσελίδας.
 Περιοχή πλοήγησης (nav) με συνδέσεις σε άλλα σημεία ή ιστοσελίδες. Η περιοχή
πλοήγησης συνήθως βρίσκεται κάτω από την κεφαλίδα ή και μέσα σε αυτή.
 Μία ή περισσότερες ενότητες (sections). Ως ενότητα εννοούμε ένα τμήμα του εγγράφου.
 Ένα ή περισσότερα άρθρα (articles). Κάθε άρθρο περιλαμβάνει ένα κομμάτι αυτόνομου
κειμένου15.
 Υποσέλιδο (footer) με πληροφορίες συνήθως για τον κάτοχο της ιστοθέσης,
πληροφορίες πλοήγησης, επικοινωνία με χρήση μέσων κοινωνικής δικτύωσης (facebook,
twitter) ή ηλεκτρονικού ταχυδρομείου.
Σχηματικά, οι σημασιολογικές ετικέτες της HTML5 φαίνονται στην επόμενη εικόνα:
15
Ένα section μπορεί να περιλαμβάνει ένα ή περισσότερα articles αλλά και αντίστροφα, ένα article
μπορεί να περιλαμβάνει ένα ή περισσότερα sections.
22
Άσκηση 8
Να δημιουργηθεί αρχείο HTML (test8.html), το οποίο να περιλαμβάνει:
1) Κεφαλίδα με τίτλο «Τίτλος στην Επικεφαλίδα».
2) Δύο Ενότητες με τίτλους «page1» και «page2» αντίστοιχα.
3) Μενού πλοήγησης (μετάβασης) προς τις δύο Ενότητες με υπερσυνδέσμους.
4) Μέσα στην πρώτη Ενότητα θα υπάρχει Άρθρο και μέσα σε αυτό 4_1) Επικεφαλίδα
μετίτλο «Τίτλος σελίδας 1» και 4_2) το κείμενο: «Κείμενο σελίδας 1».
5) Μέσα στη δεύτερη Ενότητα θα υπάρχει Άρθρο και μέσα σε αυτό 5_1) Επικεφαλίδα
μετίτλο «Τίτλος σελίδας 2» και 5_2) το κείμενο: «Κείμενο σελίδας 2».
6) Υποσέλιδο, με 6_1) κείμενο «Τέλος εγγράφου» και 6_2) συνδέσμους «Επικοινωνία» και
«Όροι Χρήσης» προς την αρχή της σελίδας.
Το αρχείο test8.html θα είναι:

<!DOCTYPE html>
<html>
<head>
<title> Σημασιολογικές ετικέτες HTML5 </title>
</head>
<body>
<header>
<h1>Τίτλος στην επικεφαλίδα</h1>
</header>
<nav>
<a href="#page1">Πρώτη σελίδα</a> | <a href="#page2">Δεύτερη σελίδα</a>
</nav>
<section id="page1">
<article>
<h3>Τίτλος σελίδας 1</h3>
<p>Κείμενο σελίδας 1</p>
</article>
</section>
<section id="page2">
<article>
</article>
</section>
<footer>
<p>Τέλος εγγράφου</p>
23
<nav>
<a href="#">Επικοινωνία</a> | <a href="#">Όροι χρήσης</a>
</nav>
</footer>
</body>
</html>
Ανοίγουμε το αρχείο με έναν φυλλομετρητή:
Εικόνα 17 Εικόνα 18
Άσκηση 9
Μπορεί να υλοποιηθεί η παραπάνω σελίδα με χρήση της γλώσσας HTML4 (η οποία δεν
περιέχει τις σημασιολογικές ετικέτες header, nav, section, article, footer, κτλ);
Η απάντηση είναι ΝΑΙ. Η υλοποίηση γίνεται με την ετικέτα <div> </div>, η οποία δηλώνει
τμήμα εγγράφου (και η οποία περιλαμβάνεται και στην HTML5 για συμβατότητα με τις
προηγούμενες εκδόσεις). Για να υπάρχει μία αντιστοιχία μπορούμε να χρησιμοποιήσουμε
την ιδιότητα id της ετικέτας <div> για να δώσουμε σε κάθε αντίστοιχο τμήμα της σελίδας
ένα όνομα που να περιγράφει το σκοπό του συγκεκριμένου τμήματος του εγγράφου. Για
24
παράδειγμα αντί της ετικέτας <header></header> της HTML5, μπορεί να χρησιμοποιηθεί
η <div id=”header”> </div> της HTML416.
Για το παράδειγμα που εξετάζουμε η συνολική αντιστοιχία των ετικετών είναι η παρακάτω:
Μετά την αντιστοιχία που κάναμε, μπορουμε να φτιάξουμε το αρχείο με ετικέτες

αποκλειστικά HTML4.
(Αρχείο test9.html)
<!DOCTYPE html>
<html>
<head>
16
Το πρόβλημα είναι ότι δεν υπάρχουν κανόνες για την ιδιότητα id. Για παράδειγμα, κάποιος αντί να
δώσει ως τιμή του id το ”header”, θα μπορούσε να δώσει ”heading” ή ”top” ή οτιδήποτε άλλο και να
είναι συντακτικά σωστό. Με αυτόν τον τρόπο όμως δημιουργείται ανομοιομορφία με αποτέλεσμα οι
μηχανές αναζήτησης να δυσκολεύονται να αναγνωρίσουν το κύριο θέμα της ιστοσελίδας.
25
<title> Ετικέτες HTML4 </title>
</head>
<body>
<div id="header">
<h1>Τίτλος στην επικεφαλίδα</h1>
</div>
<div id="nav">
<a href="#page1">Πρώτη σελίδα</a> | <a href="#page2">Δεύτερη σελίδα</a>
</div>
<div id="page1">
<div id="article">
</div>
</div>
<div id="page2">
<div id="article">
</div>
</div>
<div id="footer">
<p>Τέλος εγγράφου</p>
<div id="nav">
<a href="#">Επικοινωνία</a> | <a href="#">Όροι χρήσης</a>
</div>
</div>
</body>
</html>
Το αποτέλεσμα είναι το ίδιο με το αρχείο test8.html.
26
HTML5 και εφαρμογές διαδικτύου
Εφαρμογές του διαδικτύου
Η γλώσσα HTML χρησιμοποιείται για

Εφαρμογές για ταμπλέτες και κινητά τηλέφωνα
Είναι γλώσσα προγραμματισμού που σε συνδυασμό με HTML και CSS δημιουργεί δυ-
ναμικές και αλληλεπιδραστικές εφαρμογές που εκτελούνται στον φυλλομετρητή και
είναι εφάμιλλες των εφαρμογών ενός προσωπικού υπολογιστή.
Δημιουργεί την εμφάνιση της εφαρμογής. Με τη βοήθεια της CSS και

της HTML οι εφαρμογές μπορούν να προσαρμόζονται ανάλογα με την
οθόνη (υπολογιστής, ταμπλέτα, κινητό)  Responsive web design.
Δημιουργεί το περιεχόμενο της εφαρμογής.
Εικόνα 23
1. Η Ακαδημία Χαν (Khan Academy ) είναι μια μη κερδοσκοπική εκπαιδευτική οργάνωση, η

οποία προσφέρει δωρεάν μαθήματα σε διάφορους τομείς, όπως τα μαθηματικά, η φυσική,
η ιστορία, η τέχνη κτλ. Η ιστοθέση της για την Ελλάδα περιέχει συνδέσμους τόσο στα
ελληνικά όσο και στα αγγλικά. Η (προσωπική) εντύπωση είναι ότι καλύτερο θα ήταν όλοι οι
προσφερόμενοι σύνδεσμοι να είχαν μεταφραστεί στα ελληνικά. Αν κάνουμε δεξί κλικ με το
ποντίκι και επιλέξουμε «Προβολή Πηγαίου Κώδικα» βρίσκουμε τον κώδικα HTML της
σελίδας. Εκεί συναντάμε ετικέτες <article> και <nav> που ανήκουν στην HTML5 , απουσιάζει
η ετικέτα <header> και επίσης υπάρχει η ετικέτα <div id=”footer”>. Το συμπέρασμα είναι
ότι ο κώδικας θα πρέπει να προσαρμοστεί καλύτερα.
2. Η άσκηση αφήνεται στον αναγνώστη.
27
11. 3 Ενσωμάτωση (Embedding)
Η ενσωμάτωση βίντεο ή ήχου από μια άλλη ιστοσελίδα σε ένα αρχείο HTML
πραγματοποιείται με την ετικέτα
<iframe>
η οποία ορίζει ένα πλαίσιο για την τοποθέτηση του βίντεο ή του ήχου.
Στην ετικέτα μπορούμε να τοποθετηθούν ιδιότητες, όπως:
width για το πλάτος του πλαισίου σε εικονοστοιχεία.
height για το ύψος του πλαισίου σε εικονοστοιχεία.
src η οποία παραπέμπει στη διεύθυνση (url) του αρχείου που θα φορτωθεί.
Συνήθως η ιστοσελίδα που περιέχει το αρχείο βίντεο, παρέχει ολόκληρο τον κώδικα για
ενσωμάτωση σε κάποια άλλη ιστοσελίδα. Αυτό σημαίνει ότι η όλη διαδικασία είναι απλή και
δεν απαιτούνται ιδιαίτερες γνώσεις για την ενσωμάτωση.
Άσκηση 10
Φτιάξτε μια απλή ιστοσελίδα (test10.html) και ενσωματώστε σε αυτή ένα βίντεο από το
YouTube.
 Ανοίγουμε το YouTube και βρίσκουμε το βίντεο, το οποίο θέλουμε να

ενσωματώσουμε17 και επιλέγουμε «Κοινή χρήση» (δείτε Εικόνα 24).
Εικόνα 24
17
Το συγκεκριμένο βίντεο έχει θέμα «Η αρχαία Μεσσήνη από ψηλά»
(https://www.youtube.com/watch?v=xpAUYbxobNc)
28
 Από την επόμενη οθόνη, επιλέγουμε «Ενσωμάτωση».
Εικόνα 25
 Εμφανίζεται η ετικέτα <iframe> με όλες τις παραμέτρους για την ενσωμάτωση του
βίντεο. Ένα μέρος της βλέπουμε στην επόμενη εικόνα:
Εικόνα 26
29
 Αντιγράφουμε τον κώδικα του iframe και τον επικολάμε στην κατάλληλη θέση στο
αρχείο test10.html.
<!DOCTYPE html>
<html>
<head>
<title> Ενσωμάτωση βίντεο</title>
</head>
<body>
<p>
Ενσωμάτωση βίντεο από το YouTube
</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xpAUYbxobNc"

frameborder="0" allowfullscreen></iframe>
</body>
</html>
Εικόνα 27
30
11. 4 Καθορίζοντας την εμφάνιση – CSS
Γενικά – Τι είναι η γλώσσα CSS

 CSS (Cascading Style Sheets / αλληλουχίες φύλλων στυλ).
 Η CSS είναι γλώσσα σήμανσης18 με την οποία καθορίζουμε τη μορφή και την εμφάνιση
των εγγράφων HTML (δείτε και την Εικόνα 23).
 Περιλαμβάνει κανόνες που καθορίζουν τη διάταξη και τη μορφοποίηση των στοιχείων
(επικεφαλίδων, παραγράφων, εικόνων, συνδέσμων, κτλ) ενός εγγράφου HTML.
Με ποιους τρόπους εισάγονται οι κανόνες CSS σε ένα έγγραφο HTML

 1η Μέθοδος: Με ενσωμάτωση των κανόνων CSS μέσα στο έγγραφο HTML, κάνοντας
χρήση της ετικέτας
<style> </style>
Παράδειγμα
<style>
h1{
color:red
}
</style>
Ο παραπάνω κανόνας CSS τοποθετείται μέσα σε ένα έγγραφο HTML και χρωματίζει το
κείμενο των επικεφαλίδων h1 με κόκκινο χρώμα. Ο κανόνας μπορεί να γραφτεί και
συντομογραφικά σε μία γραμμή:
<style> h1{color:red}</style>
 2η Μέθοδος: Είναι ο προτεινόμενος τρόπος και αποτελείται από δύο βήματα:

o Βήμα1: Τοποθέτηση των κανόνων CSS σε ένα ξεχωριστό αρχείο με επέκταση
.css (π.χ. to-styl-mou.css) .
o Βήμα2: Σύνδεση του αρχείου αυτού με το αρχείο HTML , με την ετικέτα
<link>
Η ετικέτα <link> τοποθετείται μέσα στο έγγραφο HTML και συνήθως μέσα στην
ετικέτα <head>.
Για να δημιουργήσουμε σε ένα έγγραφο HTML επικεφαλίδες με κόκκινα γράμματα,

ακολουθούμε τα παραπάνω δύο βήματα:
18
Γλώσσα σήμανσης ονομάζεται μία γλώσσα που χρησιμοποιεί ετικέτες μέσα σε ένα έγγραφο για τη
δημιουργία στοιχείων (επικεφαλίδων, παραγράφων, κτλ) ή καταστάσεων (κεντράρισμα κειμένου,
χρωματισμός γραμμάτων, κτλ) σε αυτό. Εκτός από την CSS, και η HTML ανήκει στις γλώσσες σήμανσης.
31
Βήμα1
Με ένα συντάκτη κειμένου ( Σημειωματάριο, Notepad ++, κτλ) δημιουργούμε ένα νέο
αρχείο και μέσα σε αυτό γράφουμε:
h1
{
color:red;
}
Αποθηκεύουμε το αρχείο με όνομα π.χ. to-styl.mou.css (φροντίζουμε οπωσδήποτε να έχει
επέκταση .css).
Βήμα2
Στο αρχείο HTML και εντός της περιοχής HEAD εισάγουμε την ετικέτα <link> ως εξής:
<link rel=”stylesheet” media=”screen” href=”to -styl-mou.css>
Με αυτόν τον τρόπο συνδέουμε (καλούμε) το εξωτερικό αρχείο to-styl.mou.css ώστε να
«επιδράσει» με τους κανόνες του στα στοιχεία του αρχείου HTML (στο παράδειγμά μας να
κάνει κόκκινα τα γράμματα των επικεφαλίδων h1).
Άσκηση 11
Με τον συντάκτη κειμένου που χρησιμοποιείτε, ανοίξτε το αρχείο test3.html (αυτό με τις
επικεφαλίδες) και αποθηκεύστε το με όνομα test11.html.
Στη συνέχεια:
Α) Δημιουργήστε ένα εσωτερικό φύλλο στυλ με τη χρήση της ετικέτας <style> έτσι ώστε το
κείμενο των επικεφαλίδων h1, h3, h5 να χρωματίζεται κόκκινο.
Β) Δημιουργήστε ένα εξωτερικό φύλλο στυλ με όνομα to-styl-mou.css το οποίο να περιέχει
κανόνα ώστε το χρώμα των επικεφαλίδων h2, h4, h6 να χρωματίζεται μπλε. Συνδέστε το
αρχείο αυτό από το έγγραφο HTML με την ετικέτα <link>.
 Με το συντάκτη κειμένου ανοίγουμε το αρχείο test3.html.

 Αποθηκεύουμε το αρχείο με όνομα test3.hmtl.
 Μέσα στο αρχείο και εντός της περιοχής HEAD προσθέτουμε κανόνα CSS έτσι ώστε οι
ετικέτες h1, h3, h5 να γίνουν κόκκινες. Ο κώδικας θα είναι ο παρακάτω:
<!DOCTYPE html>
<html>
<head>
<title> Φύλλα Στυλ </title>
<style>
h1,h3,h5
{
color:red;
}
</style>
</head>
<body>
32
<h2> Γη </h2>
</body>
</html>
Αποθηκεύουμε το αρχείο και το ανοίγουμε με έναν φυλλομετρητή. Θα πάρουμε την

επόμενη εικόνα:
Εικόνα 28
 Με το συντάκτη κειμένου δημιουργούμε το αρχείο to-styl-mou.css. Μέσα σε αυτό

γράφουμε τον κανόνα:
h2,h4,h6
{
color:blue;
}
 Αποθηκεύουμε και κλείνουμε το αρχείο to-styl-mou.css.

 Ανοίγουμε το αρχείο test11.html και μέσα στην περιοχή HEAD τοποθετούμε την
ετικέτα <link>. Ο (τελικός) κώδικας του αρχείου θα είναι:
<!DOCTYPE html>
<html>
<head>
<style>
33
h1,h3,h5
{
color:red;
}
</style>
<link rel="stylesheet" media="screen" href="to-styl-mou.css">
</head>
<body>
<h2> Γη </h2>
</body>
</html>
Εικόνα 29
Σημείωση: Στην προηγούμενη άσκηση χρησιμοποιήσαμε «ταυτόχρονα» και τις δύο

μεθόδους εισαγωγής κανόνων CSS σε ένα έγγραφο HTML. Εννοείται ότι θα μπορούσαμε να
έχουμε το ίδιο αποτέλεσμα είτε με τον ένα τρόπο είτε με τον άλλο. Δηλαδή, είτε να βάλουμε
και τους δύο κανόνες (για κόκκινα/μπλε γράμματα) στην ετικέτα <style> είτε και τους δύο
στο εξωτερικό αρχείο CSS. Προτιμότερη είναι η δεύτερη λύση, δηλαδή:
34
Στο αρχείο, to-styl-mou.css να έχουμε:
h1,h3,h5
{
color:red;
}
h2,h4,h6
{
color:blue;
}
Και στο αρχείο test11.html να έχουμε:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="screen" href="to-styl-mou.css">
</head>
<body>
<h2> Γη </h2>
</body>
</html>
Χαρακτηριστικοί κανόνες μορφοποίησης

Επιλογείς (Selectors)
Οι κανόνες μορφοποίησης της CSS (πήραμε μια μικρή γεύση στις προηγούμενες α-
σκήσεις) συντάσσονται σε μορφή απλού κειμένου και αποτελούνται:
α) Από τον επιλογέα ή τους επιλογείς. Οι επιλογείς είναι ονόματα ετικετών της
HTML, όπως p, h1, div, κτλ.
β) Τους κανόνες.
β1) Η τοποθέτηση του συνόλου των κανόνων γίνεται ανάμεσα σε άγκιστρα { }.
β2) Κάθε κανόνας αποτελείται από ένα ζεύγος ονόματος – τιμής που
χωρίζονται με άνω κάτω τελεία «:».
35
β3) Κάθε κανόνας χωρίζεται από τον επόμενο με ένα ελληνικό ερωτηματικό «;»19.
Παράδειγμα Ζεύγη ονομάτων - τιμών
Επιλογέας p{
(στο παράδειγμα Κανόνας (χρωματίζει πρά-
είναι η παράγρα- color: green; σινα τα γράμματα)
φος)
border-bottom:1px solid black; Κανόνας (θέτει κάτω περί-
padding: 10 px; γραμμα, μαύρο, 1πίξελ)
} Κανόνας (θέτει περιθώριο

10 πίξελ από κάθε πλευρά
της παραγράφου)
Άσκηση 12
Α) Να δημιουργηθεί το αρχείο HTML test12.html στο οποίο:
Α1) Στην καρτέλα του φυλλομετρητή να έχει τίτλο «CSS – Μέρος Ι».
Α2) Να τοποθετηθούν οι δύο επόμενες παράγραφοι κειμένου:
Με τον πατέρα πηγαίναμε στη θάλασσα σχεδόν κάθε Κυριακή. Είχε ένα παμπάλαιο αυτοκίνητο
που 'μοιαζε με οβίδα και που το λέγαμε «Καραϊσκάκη». Έτσι το 'χε βαφτίσει ένα παιδί καθώς
περνούσαμε από έναν κεντρικό δρόμο της Αθήνας, και μεις χαρήκαμε, γιατί το αυτοκίνητο του
πατέρα δεν ήταν κοινό αυτοκίνητο και του άξιζε να έχει ένα όνομα.
Το χρώμα του ήταν καφέ ή γκρίζο ή ίσως και χακί, από μέσα ήταν στρωμένο με βυσσινί πετσί
αληθινό, μια πολυτέλεια που ερχόταν σε αντίθεση με το σύνολο· ήταν ψηλό, εντελώς ανοιχτό
και δίχως κουκούλα, με τη μηχανή του κομμένη μπροστά κατακόρυφα σα φάτσα περίεργου σκύλου.
Β) Να δημιουργηθεί αρχείο CSS με όνομα styl1.css , το οποίο

Β1) Να δίνει πράσινο χρώμα στα γράμματα.
Β2) Να βάζει κάτω περίγραμμα στις παραγράφους, μαύρο, πάχους 1 πίξελ.
Β3) Να θέτει περιθώριο 10 πίξελ σε όλες τις πλευρές κάθε παραγράφου.
Γ) Να συνδεθεί το εξωτερικό αρχείο CSS με το αρχείο HTML με χρήση κατάλληλης εντολής.
Δ) Να παρουσιαστεί το αποτέλεσμα με έναν φυλλομετρητή.
Α), Α1) Α2) Το αρχείο test12.html είναι το παρακάτω:
<!DOCTYPE html>
<html>
<head>
<title> CSS - Μέρος Ι</title>
</head>
<body>
<p>
Με τον πατέρα πηγαίναμε στη θάλασσα σχεδόν κάθε Κυριακή. Είχε ένα παμπάλαιο αυτοκίνητο <br>
19
Στον τελευταίο κανόνα μπορούμε να μη βάλουμε ερωτηματικό.
36
που 'μοιαζε με οβίδα και που το λέγαμε «Καραϊσκάκη». Έτσι το 'χε βαφτίσει ένα παιδί καθώς <br>
περνούσαμε από έναν κεντρικό δρόμο της Αθήνας, και μεις χαρήκαμε, γιατί το αυτοκίνητο του <br>
πατέρα δεν ήταν κοινό αυτοκίνητο και του άξιζε να έχει ένα όνομα. <br>
</p>
<p>
Το χρώμα του ήταν καφέ ή γκρίζο ή ίσως και χακί, από μέσα ήταν στρωμένο με βυσσινί πετσί <br>
αληθινό, μια πολυτέλεια που ερχόταν σε αντίθεση με το σύνολο· ήταν ψηλό, εντελώς ανοιχτό <br>
και δίχως κουκούλα, με τη μηχανή του κομμένη μπροστά κατακόρυφα σα φάτσα περίεργου σκύλου, <br>
πίσω κατέληγε σε μύτη που θύμιζε ουρά τσαλαπετεινού· κι εκεί στη μύτη υπήρχε ένα ξύλινο ντουλαπάκι <br>
όπου πετούσαμε τα κοστούμια του μπάνιου,* τα ψαρικά, κι ό,τι άλλο, ανάκατα. Κοντολογίς ήταν ένα <br>
αυτοκίνητο με δικό του χαρακτήρα και εμφάνιση προκλητική. <br>
</p>
</body>
</html>
Β)Β1)Β2)Β3)
Δημιουργούμε το αρχείο styl1.css , το οποίο να περιλαμβάνει τον κανόνα:
p{
color: green;
border-bottom:1px solid black;
padding: 10 px;
}
Γ) Για να συνδέσουμε το αρχείο styl1.css με το test12.html στην περιοχή HEAD του

εγγράφου, γράφουμε:
<link rel="stylesheet" media="screen" href="styl1.css">
Δ) Το αποτέλεσμα:
Εικόνα 30
37
Κλάση (class)
Η κλάση είναι ένας ειδικός τύπος επιλογέα, ο οποίος ξεκινά με τελεία και μπορεί να
εφαρμοστεί επιλεκτικά σε οποιοδήποτε στοιχείο HTML, σε αντίθεση με τους επιλογείς που
γνωρίσαμε προηγουμένως, οι οποίοι έχουν γενική εφαρμογή στα στοιχεία για τα οποία
ορίζονται (π.χ. για όλες τις παραγράφους <p> ή για όλες τις επικεφαλίδες <h2>).
Πιο κάτω βλέπουμε την κλάση “orismos”, η οποία θέτει αριστερό περιθώριο 20 πίξελ και
αριστερό περίγραμμα συμπαγούς μαύρου χρώματος και πάχους 2 πίξελ.
.orismos{
padding-left:20px;
border-left:2px solid black;
}
Η κλάση “orismos” μπορεί να εφαρμοστεί σε μια παράγραφο, σε μια επικεφαλίδα ή σε
οποιοδήποτε άλλο στοιχείο HTML.
Πώς εφαρμόζεται μια κλάση;

Α΄τρόπος: Η κλάση εφαρμόζεται
α) με την τοποθέτησή της σε αρχείο CSS και
β) κλήση της στη συνέχεια μέσα από αρχείο HTML με την τοποθέτηση μέσα στην
ετικέτα του στοιχείου της ιδιότητας class=”όνομα_κλάσης».
Άσκηση 13
Η κλάση «orismos” να προστεθεί στο αρχείο CSS της Άσκησης 12 (ονομάζουμε το νέο αρχείο
CSS style2.css) και στη συνέχεια να εφαρμοστεί στη δεύτερη παράγραφο του αρχείου
test12.html (ονομασία του νέου αρχείου test13.html). Ελέγξτε το αποτέλεσμα.
 Ανοίγουμε το αρχείο styl1.css και προσθέτουμε την κλάση «orismos», όπως
φαίνεται στην επόμενη εικόνα:
Εικόνα 31
 Αποθηκεύουμε το αρχείο με όνομα styl2.css

 Ανοίγουμε το αρχείο test12.html και τροποποιούμε τη σύνδεση με το αρχείο css (η
ετικέτα <link> να «δείχνει» το styl2.css).
 Αποθηκεύουμε το αρχείο με όνομα test13.html.

38
 Στην ετικέτα <p> της δεύτερης παραγράφου προσθέτουμε την κλάση orismos ώστε
η δεύτερη παράγραφος να αποκτήσει αριστερό περιθώριο 20 px και αριστερό περί-
γραμμα 2px μαύρο.
<p class="orismos">
Μετά τις τροποποιήσεις, το αρχείο test13.html θα είναι:
<!DOCTYPE html>
<html>
<head>
<title> CSS - Μέρος ΙΙ</title>
</head>
<body>
<p>
</p>
<p class="orismos">
</p>
</body>
</html>
Εικόνα 32
39
Επέκταση:
Άσκηση 13_1
Φτιάξτε δύο επικεφαλίδες <h1> για κάθε παράγραφο και εφαρμόστε την κλάση orismos
στην πρώτη επικεφαλίδα, έτσι ώστε να πάρετε την επόμενη εικόνα:
Εικόνα 33
Β΄τρόπος (είναι αυτός που ακολουθεί το σχολικό βιβλίο)
Τοποθετούμε την κλάση στην περιοχή HEAD του αρχείου html και στο στοιχείο που επιθυ-
μούμε (στην περίπτωσή μας είναι η παράγραφος). Η τοποθέτηση γίνεται ανάμεσα σε ετικέ-
τες <style></style>.
p.orismos {
padding-left:20px;
border-left:2px;
}
ή πιο σύντομα:
p.orismos { padding-left:20px; border-left:2px; }
Άσκηση 14
Να εκτελεστεί η Άσκηση 13, με την κλάση orismos να τοποθετείται εσωτερικά στο αρχείο
HTML.
 Ανοίγουμε το αρχείο test13.html20 και το αποθηκεύουμε με όνομα test14.html.
 Στην περιοχή HEAD τοποθετούμε την κλάση orismos.
Το test14.html θα είναι:
<!DOCTYPE html>
<html>
20
Στο test12.html υπάρχει η σύνδεση με το αρχείο styl1.css
40
<head>
<title> CSS - Μέρος ΙΙ</title>
<style>
p.orismos {
padding-left:20px;
border-left:2px;
}
</style>
</head>
<body>
<p>
</p>
<p>
</p>
</body>
</html>
Το αποτέλεσμα είναι ίδιο με αυτό της Εικόνας 32.
Κωδικοί αναγνώρισης (id)
Ο κωδικός αναγνώρισης (id) χρησιμοποιείται για να δώσει στυλ σε συγκεκριμένες ετικέτες.
Για να ορίσουμε κωδικό αναγνώρισης χρησιμοποιούμε το σύμβολο «#». Όπως συμβαίνει
και με τις κλάσεις, ο κωδικός αναγνώρισης μπορεί να εφαρμοστεί με διάφορους τρόπους:
Α΄τρόπος: Ο κωδικός αναγνώρισης εφαρμόζεται
α) με την τοποθέτησή του σε αρχείο CSS και
β) κλήση του στη συνέχεια από αρχείο HTML με την τοποθέτηση μέσα στην
ετικέτα του στοιχείου της ιδιότητας id = «όνομα_κωδικού_αναγνώρισης».
Ο κωδικός αναγνώρισης title χρησιμοποιείται για να δώσει στα γράμματα κόκκινο χρώμα
και να κάνει το μέγεθος των γραμμάτων 20px.
#title{
color:red;
font-size:20px;
}
41
Άσκηση 15
Να προστεθεί ο κωδικός αναγνώρισης «title» στο αρχείο CSS της Άσκησης 13 (ονομάζουμε
το νέο αρχείο CSS style3.css ) και στη συνέχεια να εφαρμοστεί στη δεύτερη παράγραφο
του αρχείου test13.html (ονομασία του νέου αρχείου test15.html). Ελέγξτε το αποτέλεσμα.
 Ανοίγουμε το αρχείο styl2.css και προσθέτουμε τον κωδικό αναγνώρισης «title»,
όπως φαίνεται στην επόμενη εικόνα:
Εικόνα 34
 Ανοίγουμε το αρχείο test13.html και το αποθηκεύουμε με όνομα test15.html.

 Στο αρχείο test15.html , στην ετικέτα <link> βάζουμε το αρχείο styl3.css.
 Στην ετικέτα <p> της πρώτης παραγράφου, θέτουμε id= “tiltle”.
<!DOCTYPE html>
<html>
<head>
<title> CSS - Μέρος ΙI</title>
</head>
<body>
<p id="title">
</p>
<p class="orismos">
</p>
</body>
</html>
42
Εικόνα 35
Β΄τρόπος ( ακολουθείται από το σχολικό βιβλίο)
Τοποθετούμε τον κωδικό αναγνώρισης στην περιοχή HEAD του αρχείου html και στο στοι-
χείο που επιθυμούμε (στην περίπτωσή μας είναι η παράγραφος). Η τοποθέτηση γίνεται α-
νάμεσα σε ετικέτες <style></style>.
<style>
p#title{21
color:red;
font-size:20px;
}
</style>
Να εκτελεστεί η Άσκηση 15, με τον κωδικό αναγνώρισης title να τοποθετείται εσωτερικά

στο αρχείο HTML.
 Ανοίξτε το αρχείο test15.html22 και αποθηκεύστε το με όνομα test16.html.
 Στην περιοχή HEAD τοποθετείστε τον κωδικό αναγνώρισης title, όπως περιγράφεται πιο
πάνω.
 Ρυθμίστε την ετικέτα <link> ώστε να υπάρχει σύνδεση με το αρχείο styl2.css.
Το test16.html
<!DOCTYPE html>
<html>
<head>
<title> CSS - Μέρος ΙI</title>
<style>
p#title{
color:red;
font-size:20px;
}
</style>
21
Αντί για p#title θα μπορούσαμε να γράψουμε απλά #title.
22
Στο test12.html υπάρχει η σύνδεση με το αρχείο styl1.css
43
</head>
<body>
<p id="title">
</p>
<p class="orismos">
</p>
</body>
</html>
Σημείωση
Δεν πρέπει να υπάρχουν δύο (ή περισσότερα) στοιχεία στην ιστοσελίδα μας με τον ίδιο
κωδικό αναγνώρισης ( id). Όταν το στοιχείο που θέλουμε να μορφοποιήσουμε είναι μονα-
δικό, πρέπει να χρησιμοποιούμε κωδικό αναγνώρισης ( id) και όχι κάποια κλάση.
Ονομασίες ιδιοτήτων
Οι ονομασίες των ιδιοτήτων που μπορούν να καθοριστούν γίνονται με απλές αγγλικές λέ-
ξεις, εύκολα κατανοητές. Κάποιες (πολύ λίγες) από τις ιδιότητες CSS φαίνονται στον επό-
μενο πίνακα:
Από τις ιδιότητες που αναφέρονται, έχουμε γνωρίσει τις color, padding, font-size και bor-
der. Ας τις δούμε (πολύ) σύντομα:
 color χρώμα του κειμένου. Π.χ. color:blue ή color=##0000FF.
 text-align  Στοιχίζει το κείμενο ανάλογα με την τιμή. Μερικές τιμές της ιδιότητας
είναι center, left, right. Π.χ. text-align:center.
 margin  Ορίζει τον χώρο μεταξύ των ορίων ενός στοιχείου και όσων το περιβάλ-
λουν. Μπορούμε να πάρουμε μια ιδέα για τις έννοιες margin και padding, από το
παρακάτω σχήμα, έχοντας κατά νου ότι κάθε στοιχείο HTML θεωρείται ως «τετρά-
γωνο23»:
23
Ορθογώνιο για την ακρίβεια.
44
Εικόνα 36
 background  Θέτει τις παραμέτρους για το φόντο του εγγράφου, όπως το χρώμα,
την εικόνα του φόντου, αν αυτή θα επαναλαμβάνεται κτλ.
Π.χ. background: yellow url(“school.gif”) no-repeat fixed center; θα δημιουργήσει
κίτρινο φόντο με εικόνα το school.gif, χωρίς επανάληψη, στο κέντρο της σελίδας.
Φυσικά θα μπορούσαμε να χρησιμοποιήσουμε και λιγότερες παραμέτρους για πα-
ράδειγμα background: yellow για να έχουμε απλά κίτρινο φόντο. Η τελευταία ιδιό-
τητα θα μπορούσε να οριστεί και ως background-color:yellow.
 font-weight  Προσδιορίζει το «βάρος» της γραμματοσειράς, αν δηλαδή τα γράμ-
ματα είναι κανονικά (normal) ή έντονα (bold). Π.χ. font-wight:bold.
 padding  Θέτει το περιθώριο γύρω από το στοιχείο (δείτε και Εικόνα 36).
 font-size Αφορά το μέγεθος της γραμματοσειράς που χρησιμοποιούμε. Οι τιμές
μπορούν να είναι είτε σε πίξελ (px) είτε σε στιγμές (pt). Π.χ. font-size:12px.
 border  Δημιουργεί το περιθώριο γύρω από το στοιχείο HTML (Εικόνα 35).
 width  Ρυθμίζει το πλάτος ενός στοιχείου HTML. Π.χ. width=100px;
Άσκηση 17
Με βάση το αρχείο test12.html, χρησιμοποιείστε όλες τις παραπάνω ιδιότητες ώστε η ιστο-
σελίδα να έχει τη μορφή της Εικόνας 37 (αρχείο test17.html):
Εικόνα 37
Πιο συγκεκριμένα:
 Ανοίξτε το αρχείο test12.html και αποθηκεύστε το ως test17.html.
 Προσθέστε τον τίτλο «Κείμενο» σε μέγεθος h1 και τις επικεφαλίδες «Πρώτη παράγρα-
φος» και «Δεύτερη παράγραφος» σε μέγεθος h2.
 Δημιουργήστε το αρχείο css με όνομα styl4.css.
 Συνδέστε το αρχείο test17.html με το styl4.css.
 Στο αρχείο CSS:
45
o Δημιουργήστε κωδικό αναγνώρισης με όνομα title, ώστε:
Α) Το κείμενο να είναι με κόκκινα γράμματα, μεγέθους 30px, έντονα, με στοί-
χιση στο κέντρο.
Β) Το φόντο να είναι πράσινο.
Γ) Το στοιχείο να καταλαμβάνει το 50% του χώρου της ιστοσελίδας.
Δ)Να είναι τοποθετημένη στο κέντρο.
 Τα χαρακτηριστικά του #title αποδώστε τα στον τίτλο «Κείμενο».
 Στο αρχείο CSS:
o Δημιουργήστε την κλάση epikefalida, έτσι ώστε:
Α) Να δημιουργεί γράμματα, χρώματος καφές, μεγέθους 20px, έντονα, με στοί-
χιση στο κέντρο.
Β)Κίτρινο φόντο.
Γ) Το στοιχείο να καταλαμβάνει το 50% του χώρου της ιστοσελίδας.
Δ)Να είναι τοποθετημένη στο κέντρο.
 Τα χαρακτηριστικά της κλάσης epikefalida αποδώστε τα στους τίτλους των δύο παρα-
γράφων.
Στο αρχείο CSS:
 Δημιουργήστε στοιχείο παραγράφου, έτσι ώστε:
Α)Το κείμενο να είναι με πράσινα γράμματα.
Β)Να υπάρχει περίγραμμα μαύρο, 1px, συμπαγές.
Γ)Το κείμενο να είναι μεγέθους 14px και να έχει αριστερή στοίχιση.
Δ) Να υπάρχει αριστερό περιθώριο 10px;
Ε) Το στοιχείο να καταλαμβάνει το 50% του χώρου της ιστοσελίδας.
ΣΤ)Να είναι τοποθετημένη στο κέντρο.

<!DOCTYPE html>
<html>
<head>
<title> CSS - Μέρος ΙII</title>
</head>
<body>
<h1 id="title"> Κείμενο </h1>
<h2 class="epikefalida"> Πρώτη παράγραφος </h2>
<p>
46
</p>
<h2 class="epikefalida"> Δεύτερη παράγραφος </h2>
<p>
</p>
</body>
</html>
Το αρχείο styl4.css
#title {
color:red;
font-size:30px;
font-weight:bold;
text-align:center;
background:green;
width:50%;
margin:auto;
}
.epikefalida{
color:brown;
font-size:20px;
font-weight:bold;
text-align:center;
background:yellow;
width:50%;
margin:auto;
}
p{
color: green;
border:1px solid black;
width:50%;
text-align:left;
font-size:14px;
47
padding-left:10px;
margin:auto;
}
Τρόποι δημιουργίας εγγράφων HTML24

 Τα έγγραφα HTML και CSS είναι αρχεία απλού κειμένου.
 Η επεξεργασία τους μπορεί να γίνει με έναν συντάκτη κειμένου.
 Εκτός από το Σημειωματάριο των Windows, ένας πολύ καλός δωρεάν συντάκτης είναι
το Notepad++ ( https://notepad-plus-plus.org).
Εικόνα 38
 Ο χρωματισμός των ετικετών διευκολύνει τη δημιουργία εγγράφων. Για παρά-

δειγμα, στο συντάκτη Notepad++ οι ετικέτες είναι με μπλε χρώμα, οι ιδιότητες με
κόκκινο και οι τιμές των ιδιοτήτων με μωβ.
 Με την επιλογή Αρχείο  Αποθήκευση ως έχουμε τη δυνατότητα απευθείας απο-
θήκευση του αρχείου σε μορφή html ή css.
24
Το θέμα αυτό (δείτε και σελίδα 3), κανονικά έπρεπε να μπει στην αρχή του κεφαλαίου.
48
Εικόνα 39
Υπάρχουν διάφορα εργαλεία για να δοκιμάσουμε τον κώδικα HTML και CSS που δημιουρ-
γήσαμε:
 Jsfiddle (http://jsfiddle.net)
Μπορούμε να τοποθετήσουμε τον κώδικα HTML, τον κώδικα CSS και τον κώδικα Javascript
και στο κάτω δεξί πλαίσιο να δούμε το αποτέλεσμα.
Εικόνα 40
 codepen (http://codepen.io)
Λειτουργεί ανάλογα, και τα αποτελέσματα φαίνονται στη σελίδα 102 του βιβλίου.
 dabblet (http://dablet.com)
 cssdesk (http://cssdesk.com)
49
1. Λ [Η HTML5 περιλαμβάνει μια σειρά από νέες ετικέτες (header, footer, nav, article,section, κτλ)
αλλά έχει κρατήσει τις περισσότερες ετικέτες που περιλαμβάνονταν στις παλαιότερες εκδόσεις. Υ-
πάρχουν όμως και κάποιες παλιές ετικέτες που δεν περιλαμβάνονται στην έκδοση 5 (π.χ. <font>,
<center>, <big>, <applet>, κτλ).
2. Σ [Η HTML5 διαθέτει την ετικέτα <audio> για την ενσωμάτωση ήχου στα έγγραφα HTML].
3. Λ [Πριν την HTML5, ένα έγγραφο HTML μπορούσε να ενσωματώσει βίντεο χρησιμοποιώντας ειδι-
κές τεχνολογίες (πρόσθετα) π.χ. την τεχνολογία flash (ο φυλλομετρητής να διαθέτει το flash plug in).
Ένα έγγραφο μπορούσε να ενσωματωθεί με την ετικέτα <embed>, για παράδειγμα <embed
src="MyVideo.mp4"/>. Τώρα, αυτό γίνεται με τη χρήση της ετικέτας <video> π.χ. <video
src="MyVideo.mp4"></video> χωρίς να υπάρχει ανάγκη για ενσωμάτωση κάποιου πρόσθετου.
4. Λ. [Ένα έγγραφο HTML5 δεν είναι απαραίτητο να περιλαμβάνει κεφαλίδα <header>. Επίσης, η κε-
φαλίδα μπορεί να μπει περισσότερες από μία φορές σε ένα έγγραφο HTML5 (δείτε τον κώδικα της
σελ. 99 του βιβλίου)].
5. Λ [Η HTML5 σε συνδυασμό με την CSS3 μπορούν να δημιουργήσουν ιστοσελίδες προσαρμοσμένες ανά-
λογα με την οθόνη (Υπολογιστής, φορητός, ταμπλέτα, κινητό)].
6. Σ [Η παράμετρος width αποτελεί στοιχείο της ετικέτας iframe].
7. Λ [Ένα έγγραφο CSS είναι ανεξάρτητο από ένα έγγραφο HTML. Μάλιστα, το αρχείο .css μπορεί να καλεί-
ται από περισσότερα από ένα έγγραφα HTML].
8. Σ [Μία κλάση μπορεί να δώσει σε μια ετικέτα παραγράφου (<p>) ένα συγκεκριμένο στυλ ενώ μια άλλη
κλάση μπορεί να δώσει σε άλλη ετικέτα παραγράφου άλλο στυλ).
9. Σ [π.χ. με το Σημειωματάριο των Windows].
10. Λ [Μια ετικέτα <nav> μπορεί κάλλιστα να μπει εσωτερικά σε μια ετικέτα <header>. Δείτε και το παρά-
δειγμα της σελ. 99 του σχολικού βιβλίου].
50
Η προτιμότερη σημασιολογικά διάρθρωση των βασικών ετικετών είναι η 2. Αυτό γιατί στην πε-
ριοχή της κεφαλίδας header έχει τοποθετηθεί η πλοήγηση για τον ιστότοπο του σχολείου, ακολου-
θούν τα (αυτόνομα) άρθρα και στη συνέχεια η περιοχή footer για την τοποθέτηση πληροφοριών επι-
κοινωνίας.
Η επιλογή 1. απορρίπτεται διότι στην περιοχή header δεν τοποθετείται τίποτε, τα άρθρα είναι τοπο-
θετημένα το ένα μέσα στο άλλο ενώ κανονικά είναι αυτόνομα και στην περιοχή footer υπάρχει «συ-
νωστισμός» πληροφορίας αφού είναι τοποθετημένη η πλοήγηση και οι πληροφορίες επικοινωνίας.
Η επιλογή 3. Απορρίπτεται διότι η πλοήγηση έχει τοποθετηθεί ανάμεσα στα άρθρα.
Η επιλογή 4. Απορρίπτεται διότι η περιοχή footer έχει τοποθετηθεί κάτω από τη header και πάνω
από τα άρθρα.
(Κατ΄αρχάς αν δεν προσδιοριστεί το στυλ του περιγράμματος, καμία από τις επιλογές δε θα δουλέ-
ψει)
Η 1. δε θα λειτουργήσει διότι η κλάση title έχει δοθεί ως ιδιότητα.
Η 2. δε θα λειτουργήσει διότι α) η title ορίζεται ως κωδικός αναγνώρισης στην P και όχι ως κλάση
και β) η ιδιότητα border δεν έχει τιμή.
Η 3. μπορεί λειτουργήσει (σωστά) στην περίπτωση που ο κωδικός αναγνώρισης title δοθεί σε ένα
μόνο στοιχείο παραγράφου. Για την περίπτωση αυτή θα πρέπει να γράψουμε
<style>
p{font-size:12pt}
p#title{border:1px solid}
</style>
και στη (μοναδική) παράγραφο που θέλουμε να έχουμε αυτό το στυλ θα γράψουμε
<p id=”tiltle”>
Η 4. θα λειτουργήσει διότι η title ορίζεται ως κλάση στην P και η ιδιότητα border έχει τιμή (και στυλ
περιγράμματος). Δηλαδή, ανάμεσα στις ετικέτες <style></style> του εγγράφου HTML θα πρέπει να
γράψουμε:
51
<style>
p{font-size:12pt}
p.title{border:1px solid}
</style>
και σε όποια παράγραφο θέλουμε να έχει αυτό το στυλ
<p class=”title”>
Μετά την παραπάνω ανάλυση, η απάντηση 4) είναι η σωστή.
α. Λ [Η ενσωμάτωση δεν πραγματοποιείται αποκλειστικά με την iframe, υπάρχουν και άλλοι τρό-
ποι: <video> </video>, <audio></audio> κτλ] .
β. Σ [βλέπε και εικόνα στην §11.3].
γ. Σ
δ. Λ [Όπως έχουμε αναφέρει, η ενσωμάτωση περιεχομένου από άλλες ιστοσελίδες γίνεται με την
<iframe> και δεν απαιτείται κάποιο πρόσθετο (plug in) για να γίνει . Αυτό που μέχρι πρότινος απαι-
τείτο, ήταν η χρήση πρόσθετων (plug ins) από το φυλλομετρητή του χρήστη προκειμένου να αναπα-
ραχθούν βίντεο ή ήχοι. Για παράδειγμα, για την εκτέλεση βίντεο τύπου flash, χρειαζόταν (χρειάζεται)
το πρόσθετο flash (flash plug in). Η τάση όμως είναι όλα τα πρόσθετα για τέτοιου είδους αρχεία (βί-
ντεο flash, Java applets κτλ) να αποκλείονται διότι δεν είναι ασφαλή και υπάρχει περίπτωση μέσω
αυτών κάποιοι hackers να δημιουργήσουν προβλήματα στους υπολογιστές που τα χρησιμοποιούν].
1. γ
2. γ
52
Εργασία
Να δημιουργηθούν οι ιστοσελίδες για τον ιστότοπο του σχολείου της Πλατανόβρυσης25
Α) Η αρχική ιστοσελίδα (index.html), όπου θα υπάρχει:
α1) κεφαλίδα με συνδέσμους πλοήγησης στις υπόλοιπες ιστοσελίδες.
α2) κύριο σώμα, όπου θα υπάρχει η εικόνα του σχολείου και κάτω από αυτήν,
στην αριστερή πλευρά σύνδεσμοι προς άλλες ιστοσελίδες και στο υπόλοιπο (κέντρο
– δεξιά) το κλασσικό καλωσόρισμα.
α3) υποσέλιδο με πληροφορίες για τους συντάκτες της ιστοσελίδας.
Εικόνα 41
Β) Ιστοσελίδα που θα περιγράφει τη δομή του σχολείου (theSchool.html). Αυτή θα περι-

λαμβάνει την κεφαλίδα (α1)) και το υποσέλιδο (α2)) και λίγα λόγια για το σχολείο.
Εικόνα 42
25
Η ονομασία του σχολείου είναι φανταστική. Κάνοντας αναζήτηση στο Διαδίκτυο ΔΕΝ εμφανίζεται
τέτοια ονομασία για Λύκειο.
53
Γ) Ιστοσελίδα που θα περιγράφει τις δραστηριότητες του σχολείου (activities.html) με δομή
ίδια με αυτή της Β).
Εικόνα 43
Δ)Ιστοσελίδα με τα στοιχεία επικοινωνίας του σχολείου (contact.html) με δομή ανάλογη με

αυτή της Β).
Εικόνα 44
Τα αρχεία:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Λύκειο Πλατανόβρυσης</title>
<link rel="stylesheet" href="styl5.css">
</head>
<body>
<header id="kefalida" class="kentrarisma">
<nav>
<a href="index.html">Αρχική</a>
<a href="theSchool.html">Το Σχολείο</a>
<a href="activities.html">Δραστηριότητες</a>
<a href="contact.html">Επικοινωνία</a>
</nav>
</header>
<div class="kentrarisma">
<p><img src="sxoleio.jpg" alt="Εικόνα του Σχολείου"> </p>
54
</div>
<div class="kentrarisma">
<article class="aristera">
<h2 class="morfi1">Χρήσιμες Ιστοσελίδες</h2>
<p> <a href="http://www.minedu.gov.gr">Υπουργείο Παιδείας</a> </p>
<p> <a href="http://www.sch.gr">Πανελλήνιο Σχολικό Δίκτυο</a> </p>
<p> <a href="http://photodentro.edu.gr"> Φωτόδενδρο </a><p>
</article>
<article class="deksia" >
<p> Λύκειο Πλατανόβρυσης </p>
<p> Καλώς ορίσατε! </p>
</article>
</div>
<footer id="yposelido">
<section>
Επιμέλεια ιστοσελίδας: Ομάδα Μαθητών
</section>
</footer>
</body>
</html>
styl5.css
#kefalida {
color:white;
font-family:calibri; Κωδικός αναγνώ-
font-size:24px; ρισης για την κε-
font-weight:bold; φαλίδα
text-align:center;
background:green;
}
#yposelido {
color:white;
font-family:calibri;
font-size:18px;
Κωδικός αναγνώ-
font-weight:bold;
text-align:center; ρισης για το υπο-
background:green; σέλιδο
position:absolute;
bottom:0;
width:50%; Οι αγκυρώσεις θα
margin-left:25%; εμφανίζονται με
}
λευκά γράμματα
a {
color:white;
} Τοποθέτηση των
img {
εικόνων στο κέ-
max-width:100%;
height:auto; ντρο
width:auto;
}
.keimeno {
color:white; Κλάση για την εμ-
font-family:calibri; φάνιση του κειμέ-
font-size:20px; νου
55
font-weight:bold;
text-align:center;
background:red;
}
.aristera {
background:green; Κλάση για αρι-
font-family:comic sans MS; στερή τοποθέ-
font-size:16px; τηση
text-align:center;
width:35%;
padding:5%;
float:left;
}
.deksia {
color:red;
background:white;
Κλάση για δε-
text-align:center;
font-family:comic sans MS; ξιά τοποθέ-
font-size:30px; τηση
width:45%;
padding:5%;
float:right;
}
.kentrarisma { Κλάση για κε-
width:50%;
ντράρισμα
margin:auto;
}
.morfi1 {
Κλάση για ά-
color:white;
σπρα γράμ-
}
ματα
theSchool.html
<!DOCTYPE html>
<html>
<head>
<title>Το Σχολείο</title>
</head>
<body>
<nav>
</nav>
</header>
<section class="kentrarisma">
<article class="keimeno">
<p> Το Σχολείο είναι <br>
από τα πρώτα που <br>
ιδρύθηκαν στο νομό. <br>
Περιλαμβάνει <br>
56
Δύο τμήματα της Α΄τάξης <br>
Δύο τμήματα της Β΄τάξης <br>
Ένα τμήμα της Γ΄τάξης <br>
</p>
</article>
</section>
<footer id="yposelido">
<section>
</section>
</footer>
</body>
</html>
activities.html
<!DOCTYPE html>
<html>
<head>
<title>Δραστηριότητες</title>
</head>
<body>
<nav>
</nav>
</header>
<p> Προγραμματίζονται οι δραστηριότητες: <br>
1.Θεατρική παράσταση της Αντιγόνης του Σοφοκλή <br><br>
2.Ελληνικοί παραδοσιακοί χοροί. <br><br>
3.Παρουσίαση πειραμάτων Φυσικής / Χημείας <br><br>
4.Άσκηση Ρομποτικής. <br><br>
</p>
</article>
</section>
<footer>
<section id="yposelido">
</section>
</footer>
</body>
</html>
57
<!DOCTYPE html>
<html>
<head>
<title>Επικοινωνία</title>
</head>
<body>
<nav>
</nav>
</header>
<p> Επικοινωνία <br><br><br><br>
Τηλέφωνο: 2721089980 <br><br><br><br>
Ηλεκτρονικό ταχυδρομείο: lykplat@gmail.com
</p>
</article>
</section>
<footer>
</section>
</footer>>
</body>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<title>Επικοινωνία</title>
</head>
<body>
<nav>
</nav>
</header>
<p> Επικοινωνία <br><br><br><br>
58
Τηλέφωνο: 123456780 <br><br><br><br>
Ηλεκτρονικό ταχυδρομείο: lykplat@gmail.com
</p>
</article>
</section>
<footer>
</section>
</footer>>
</body>
</html>
Ανέβασμα των ιστοσελίδων στο Διαδίκτυο

Αφού κατασκευάσαμε τις ιστοσελίδες τοπικά στον υπολογιστή μας, το επόμενο βήμα είναι
να τις «ανεβάσουμε» σε μία θέση (ιστοθέση/ιστότοπο) στον Παγκόσμιο Ιστό ώστε να εί-
ναι ορατή από παντού.
Στο Διαδίκτυο υπάρχει αρκετά μεγάλη προσφορά για δωρεάν φιλοξενία ιστοσελίδων με κά-
ποιους περιορισμούς βέβαια (σχετικά μικρός χώρος αποθήκευσης, στοιχειώδη εργαλεία
χειρισμού αρχείων, μη παροχή δυνατότητας ftp, κτλ).
Ας φιλοξενήσουμε τις ιστοσελίδες μας στον χώρο που διαθέτει η Hostinger, η οποία είναι
εταιρεία που παρέχει χώρο για φιλοξενία ιστοσελίδων είτε δωρεάν ή με πληρωμή (παρέχο-
νται περισσότερα προνόμια και ευκολίες). Εμείς φυσικά θα προτιμήσουμε τη δωρεάν φιλο-
ξενία.
Πηγαίνουμε στην ιστοσελίδα της εταιρείας (https://www.000webhost.com/) και εκτελούμε
τη διαδικασία της εγγραφής (Sign up) (Βήματα 1 και 2 της παρακάτω εικόνας).
Εικόνα 45
59
Αυτά που μας ζητούνται είναι μια διεύθυνση ηλεκτρονικού ταχυδρομείου, όπου θα σταλεί
ένα μήνυμα για επιβεβαίωση ώστε να προχωρήσει η δημιουργία της ιστοθέσης και επίσης
το όνομα που θέλουμε να έχει η ιστοθέση μας.
Εμείς, ως όνομα διαλέγουμε platanovrisi, οπότε η πλήρης διεύθυνση της ιστοσελίδας μας
θα είναι:
http://platanovrisi.000webhostapp.com/index.html
Αφού τελειώσουμε τα … διαδικαστικά, οδηγούμαστε σε έναν διαχειριστή αρχείων από ό-

που μπορούμε να ανεβάσουμε τα αρχεία που φτιάξαμε (κώδικα, εικόνες, κτλ) από τον υπο-
λογιστή μας στον ιστοχώρο που δημιουργήσαμε.
Εικόνα 46
Όταν ολοκληρώσουμε την εργασίας μας, επιλέγοντας Sign Out, αποσυνδεόμαστε.

Δίνοντας τη διεύθυνση http://platanovrisi.000webhostapp.com/index.html σε έναν φυλλο-
μετρητή μπορούμε πια να δούμε τον ιστοχώρο μας στο Διαδίκτυο.
Εικόνα 47
60
61
62

Εισαγωγή στην HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Εισαγωγή στην HTML

Uploaded by

Copyright:

Available Formats

ΚΕΦΑΛΑΙΟ 11

Εισαγωγή στην HTML

Οι μαθητές πρέπει να είναι σε θέση

 Να αναγνωρίζουν τη δομή ενός εγγράφου HTML και να επεξεργάζονται ετικέτες.

Πρόταση Διδασκαλίας - προγραμματισμός

§ 11.1, § 11.2, § 11.3 έξι (6) ώρες

Η γλώσσα HTML επινοήθηκε ως ένα εργαλείο συνεργασίας, όπου θα υπήρχε η δυνατότητα

4 Σωματιδιακής και όχι Μοριακής, όπως γράφει το σχολικό βιβλίο.

Ένας φυλλομετρητής θα πρέπει να «γνωρίζει» το είδος του εγγράφου το οποίο καλείται να

<html> και </html>

ορίζουν την αρχή και το τέλος μιας ιστοσελίδας (δηλαδή αρχείου

Με ποιο τρόπο όμως τα γράφουμε όλα αυτά;

Αποθηκεύουμε το αρχείο με όνομα test1.html και το ανοίγουμε με έναν φυλλομετρητή. Το

Α. <go> Β. <body> Γ. <head> Δ. <html>

2. Το κείμενο που βρίσκεται ανάμεσα στις ετικέτες <title> </title>, τοποθετείται:

Α. Δεν τοποθετείται πουθενά στο φυλλομετρητή.

3. Ποια είναι η τρέχουσα έκδοση της HTML;

(Απαντήσεις: 1)Β -- 2)Δ – 3) HTML5 4) <!DOCTYPE html>)

Παράγραφος – αλλαγή γραμμής – οριζόντιος χάρακας

Σε ένα κανονικό έγγραφο το κείμενο οργανώνεται σε προτάσεις και παραγράφους ώστε να

 Φορτώστε το αρχείο test2.html σε έναν φυλλομετρητή. Θα πρέπει να δείτε μια εικόνα

Ο κώδικας του αρχείου test2.html είναι ο παρακάτω:

Όταν φορτώσετε με έναν φυλομετρητή το αρχείο test3.html , θα πάρετε το παρακάτω

Ο κώδικας του αρχείου test3.html είναι:

Όταν πρωτοεμφανίστηκε ο Παγκόσμιος Ιστός, η επαναστατική δυνατότητα που προσέφερε

Για τη δημιουργία συνδέσμων χρησιμοποιείται η ετικέτα δεσμού (anchor tag)

<a> και </a>.

Η ανατομία ενός συνδέσμου φαίνεται στην επόμενη εικόνα:

 Δημιουργήστε καινούργια παράγραφο με την κατάλληλη ετικέτα.

Μεταφέροντας το ποντίκι επάνω στο κείμενο “ΠΣΔ» ή «Υπουργείο Παιδείας» παρατηρούμε

Εάν θέλουμε να τοποθετήσουμε εικόνα στην ιστοσελίδα μας, θα πρέπει να διαθέτουμε το

<img src= “image1.gif”>

Το αρχείο test5.html εκτός από τις συνηθισμένες τροποποιήσεις (τίτλος) θα περιλαμβάνει

Άσκηση 5-1 – Επέκταση

Ας δούμε τις Ερωτήσεις – Δραστηριότητες της σελ. 97 του σχολικού Βιβλίου.

1. Η επίσκεψη στην ιστοσελίδα του ελληνικού W3C έχει το παρακάτω αποτέλεσμα:

 Φορτώνουμε την ιστοσελίδα σε έναν φυλλομετρητή (π.χ. Firefox, Chrome).

1) <html> </html> 2)<head> </head> 3)<title></title> 4)<body></body> 5)

4. Δημιουργούμε δύο στοιχειώδεις σελίδες HTML με έναν συντάκτη κειμένου. Τα ονόματα

Πιο συγκεκριμένα, το αρχείο θα περιλαμβάνει τα παρακάτω:

Τραγούδι τρυφερό η θάλασσα μας ψάλλει,

η) Η σελίδα να κλείνει με έναν οριζόντιο χάρακα.

Μεταξύ των άλλων χαρακτηριστικών της HTML5, ξεχωρίζουν:

Για την ενσωμάτωση ήχου, η HTML χρησιμοποιεί την ετικέτα

συνδυασμό με την ιδιότητα controls και την ετικέτα <source>.

 Η ιδιότητα controls προσθέτει τα κουμπιά “Εκτέλεση”, “Παύση” και ένταση

Αρχικά ετοιμάζουμε και τοποθετούμε τα αρχεία ήχου ixos-piano.mp3 και ixos-piano.ogg

Η ενσωμάτωση βίντεο ακολουθεί κανόνες ανάλογους με αυτούς της ενσωμάτωσης ήχου. Η

Τοποθετούμε αρχικά το βίντεο, το οποίο θέλουμε να παρουσιάσουμε στην ιστοσελίδα,

Το αρχείο test8.html θα είναι:

Ανοίγουμε το αρχείο με έναν φυλλομετρητή:

Μετά την αντιστοιχία που κάναμε, μπορουμε να φτιάξουμε το αρχείο με ετικέτες

Το αποτέλεσμα είναι το ίδιο με το αρχείο test8.html.

Η γλώσσα HTML χρησιμοποιείται για

Δημιουργεί την εμφάνιση της εφαρμογής. Με τη βοήθεια της CSS και

Δημιουργεί το περιεχόμενο της εφαρμογής.

1. Η Ακαδημία Χαν (Khan Academy ) είναι μια μη κερδοσκοπική εκπαιδευτική οργάνωση, η

 Ανοίγουμε το YouTube και βρίσκουμε το βίντεο, το οποίο θέλουμε να

<iframe width="560" height="315" src="https://www.youtube.com/embed/xpAUYbxobNc"

Γενικά – Τι είναι η γλώσσα CSS

Με ποιους τρόπους εισάγονται οι κανόνες CSS σε ένα έγγραφο HTML

 2η Μέθοδος: Είναι ο προτεινόμενος τρόπος και αποτελείται από δύο βήματα:

Για να δημιουργήσουμε σε ένα έγγραφο HTML επικεφαλίδες με κόκκινα γράμματα,

 Με το συντάκτη κειμένου ανοίγουμε το αρχείο test3.html.