Ανακοινώσεις μαθήματος ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ Β ΕΠΑΛ

Άσκηση 1η

Sun, 27 Sep 2026 14:37:45 +0300

Άσκηση 1^η

Η πρώτη γραμμή του κώδικα του παραδείγματος 1, αποτελεί μια οδηγία προς το φυλλομετρη- τή για το είδος του εγγράφου που ακολουθεί. Ο φυλλομετρητής χρειάζεται να γνωρίζει τον τύπο και την έκδοση του κώδικα της ιστοσελίδας για να την εμφανίσει σωστά. Η συγκεκρι- μένη δήλωση ενημερώνει ότι το έγγραφο που ακολουθεί είναι γραμμένο σε κώδικα HTML5.

Ο κώδικας HTML δεν είναι ευαίσθητος σε κεφαλαία και πεζά γράμματα (case sensitive). Έτσι είναι ισοδύναμο, είτε γράψουμε DOCTYPE, είτε doctype, είτε DocType, κ.ο.κ. Αυτό που πρέ- πει να προσέχουμε είναι η εισαγωγή διαστήματος, καθώς για το σύστημα είναι διαφορετικό το DOCTYPE από το DOC TYPE.

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

Παρατηρούμε ότι ένα έγγραφο HTML είναι ένα στοιχείο, το html, το οποίο αποτελείται από δύο επιμέρους στοιχεία, το στοιχείο head (κεφαλή) (γραμμές 6-9) και το στοιχείο body (σώμα) (γραμμές 10-12)

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

Στη γραμμή 7 ορίζεται ο τίτλος της ιστοσελίδας (title). Ο τίτλος είναι πολύ σημαντικός διότι εκτός από τη γραμμή του τίτλου στο παράθυρο του φυλλομετρητή, εμφανίζεται και στα αποτελέσματα μιας μηχανής αναζήτησης που έχει εντοπίσει την ιστοσελίδα μας. Έτσι πρέπει να επιλέγεται με μεγάλη προσοχή. Στη γραμμή 8 ορίζεται ένα επιπλέον μεταδεδομένο (meta) που αφορά την κωδικοποίηση των χαρακτήρων της ιστοσελίδας.

Η κωδικοποίηση UTF-8 εξασφαλίζει τη σωστή εμφάνιση του κειμένου της ιστοσελίδας σε κάθε περίπτωση. Πρέπει να έχουμε κατά νου ότι ενώ μια ιστοσελίδα δημιουργείται σε ένα περιβάλλον (π.χ. GNU/Linux ή Microsoft Windows) προσπελάζεται από πληθώρα διαφορετικών, συχνά ανομοιογενών περιβαλλόντων (υπολογιστές Macintosh, συσκευές Android, iOS συσκευές με άλλα λειτουργικά συστήματα όπως τηλεοράσεις, media player, κ.λπ.). Για το λόγο αυτό πρέπει να προσέχουμε κατά την αποθήκευση του κώδικα, ώστε να επιλέγουμε την αποθήκευσή του σε μορφή UTF-8.

Στο Σημειωματάριο αυτό γίνεται επιλέγοντας το πλαίσιο Κωδικοποίηση (Encoding) κατάτην αποθήκευση (Εικόνα 3). Στο Notepad++ μπορούμε να επιλέξουμε την κωδικοποίηση του κειμένου από το σχετικό μενού.

Χρήσιμη επισήμανση: Αν θέλουμε να δούμε τον πηγαίο κώδικα οποιασδήποτε σελίδας, αρκεί να πατήσουμε “ταυτόχρονα” τα πλήκτρα Ctrl + U (έχοντας πατημένο το Ctrl, πατούμε το U). Τότε εμφανίζεται ένα παράθυρο με τον πηγαίο κώδικες ο οποίος παράγει το αποτέλεσμα που βλέπουμε στο παράθυρο του φυλλομετρητή.

Έτσι ο κώδικας HTML που φτάνει στο φυλλομετρητή μας, τις περισσότερες φορές δεν είναι ευανάγνωστος. Το ίδιο συμβαίνει και όταν η διαχείριση του περιεχομένου ενός ιστότοπου υλοποιείται μέσω λογισμικών που ονομάζονται συστήματα διαχείρισης περιεχομένου (Content Management Systems, CMS). Οι διαχειριστές του περιεχομένου τέτοιων ιστοτόπων δεν αλλάζουν τον κώδικα των στατικών ή δυναμικών ιστοσελίδων, παρά μόνο χειρίζονται το περιεχόμενο του ιστότοπου (κείμενα, εικόνες, βίντεο, κ.λπ.), χρησιμοποιώντας τις επιλογές του εκάστοτε λογισμικού CMS.

Η δημιουργία μιας ιστοσελίδας

Wed, 23 Sep 2026 18:27:33 +0300

Η δημιουργία μιας ιστοσελίδας απαιτεί την κατοχύρωση ενός ονόματος ( domain name ), την επιλογή φιλοξενίας (hosting) και τη χρήση μιας πλατφόρμας κατασκευής όπως το WordPress.

Βασικά Βήματα για Δημιουργία Ιστοσελίδας

Όνομα και Φιλοξενία: Διαλέξτε μια μοναδική διεύθυνση (domain) για το site σας και έναν ασφαλή πάροχο φιλοξενίας.

Πλατφόρμα (CMS): Χρησιμοποιήστε δημοφιλή συστήματα όπως το WordPress ή εργαλεία τεχνητής νοημοσύνης μέσω του Webnode για εύκολη δημιουργία χωρίς κώδικα.

Σχεδιασμός και Περιεχόμενο: Δημιουργήστε καθαρό μενού, ευανάγνωστα κείμενα και προσθέστε φωτογραφίες που ταιριάζουν στην επιχείρησή σας.

SEO και Ταχύτητα: Βελτιστοποιήστε τις σελίδες σας για τις μηχανές αναζήτησης (Google) και εξασφαλίστε γρήγορη φόρτωση.

Μοντέλο Πελάτη-Εξυπηρετητή (Client-Server)

Wed, 23 Sep 2026 18:22:22 +0300

Η δημιουργία μιας ιστοσελίδας βασίζεται στο μοντέλο Πελάτη-Εξυπηρετητή (Client-Server). Αυτή η αρχιτεκτονική καθορίζει πώς αλληλεπιδρούν οι χρήστες με τα δεδομένα ενός ιστότοπου μέσω του διαδικτύου.

🏢 Τι είναι ο Πελάτης και ο Εξυπηρετητής;

Πελάτης (Client): Είναι η συσκευή του χρήστη (υπολογιστής, κινητό, tablet) και το λογισμικό που χρησιμοποιεί, δηλαδή ο φυλλομετρητής (browser) όπως Chrome, Firefox ή Safari. Ο πελάτης ζητάει πληροφορίες.

Εξυπηρετητής (Server): Είναι ένας ισχυρός υπολογιστής που είναι μόνιμα συνδεδεμένος στο διαδίκτυο. Εκεί βρίσκονται αποθηκευμένα όλα τα αρχεία της ιστοσελίδας σας (κώδικας, φωτογραφίες, βάσεις δεδομένων). Ο εξυπηρετητής απαντάει στα αιτήματα του πελάτη.

🔄 Πώς λειτουργούν κατά την επίσκεψη σε μια ιστοσελίδα

Το Αίτημα (Request): Ο χρήστης πληκτρολογεί μια διεύθυνση (URL) στον browser (Client). Ο browser στέλνει ένα αίτημα μέσω διαδικτύου στον Server που φιλοξενεί τη συγκεκριμένη ιστοσελίδα.

Η Επεξεργασία: Ο Server λαμβάνει το αίτημα, βρίσκει τα απαραίτητα αρχεία (π.χ. HTML, CSS, εικόνες) ή εκτελεί κάποιο σενάριο κώδικα (π.χ. PHP, Node.js).

Η Απάντηση (Response): Ο Server στέλνει αυτά τα αρχεία πίσω στον browser του Client.

Η Εμφάνιση (Rendering): Ο browser μεταφράζει τον κώδικα και εμφανίζει την ιστοσελίδα μορφοποιημένη στην οθόνη του χρήστη.

💻 Τεχνολογίες στη Δημιουργία Ιστοσελίδων

Η ανάπτυξη μιας ιστοσελίδας χωρίζεται σε δύο βασικά κομμάτια, ανάλογα με το πού εκτελείται ο κώδικας:

Χαρακτηριστικό	Front-End (Client-Side)	Back-End (Server-Side)
Πού εκτελείται;	Στον browser του χρήστη.	Στον απομακρυσμένο διακομιστή (Server).
Τι περιλαμβάνει;	Ό,τι βλέπει και αλληλεπιδρά ο χρήστης (σχεδίαση, κουμπιά, μενού).	Τη λογική της εφαρμογής, τη διαχείριση χρηστών και τις βάσεις δεδομένων.
Βασικές Γλώσσες	HTML, CSS, JavaScript	PHP, Python, Node.js, Ruby, SQL (για βάσεις δεδομένων)

🛠️ Τι χρειάζεστε για να ξεκινήσετε τη δημιουργία;

Όνομα Χώρου (Domain Name): Η ηλεκτρονική σας διεύθυνση (π.χ. www.mysite.gr), η οποία κατευθύνει τον Client στον σωστό Server.

Φιλοξενία (Web Hosting): Η ενοικίαση χώρου σε έναν Server για να αποθηκεύσετε τα αρχεία της ιστοσελίδας σας.

Πλατφόρμα Ανάπτυξης: Μπορείτε να γράψετε κώδικα από το μηδέν ή να χρησιμοποιήσετε ένα Σύστημα Διαχείρισης Περιεχομένου (CMS) όπως το WordPress, το οποίο αναλαμβάνει αυτόματα τη σύνδεση Client-Server.

Για να σας βοηθήσω να προχωρήσετε, πείτε μου:

Έχετε ήδη κάποια γνώση προγραμματισμού (HTML/CSS) ή προτιμάτε μια έτοιμη πλατφόρμα όπως το WordPress;
Τι είδος ιστοσελίδας θέλετε να δημιουργήσετε (π.χ. e-shop, προσωπικό blog, εταιρική παρουσίαση);