
Βήμα-βήμα η κατασκευή μιας ιστοσελίδας
Η κατασκευή μιας ιστοσελίδας HTML δεν είναι μια περίπλοκη διαδικασία, και ο καθένας μπορεί να δημιουργήσει και να αναρτήσει μια ιστοσελίδα στον παγκόσμιο ιστό εύκολα και εντελώς δωρεάν. Σε αυτό το άρθρο, θα δούμε με απλά βήματα πως να χρησιμοποιήσουμε τη γλώσσα HTML για να υλοποιήσουμε μια ιστοσελίδα, το περιβάλλον συγγραφής κώδικα της Microsoft, Visual Studio Code, και το GitHub, που είναι ένα αποθετήριο κώδικα. Στην περίπτωση μας, θα χρησιμοποιήσουμε το GitHub Pages για να αναρτήσουμε τη σελίδα μας στο διαδίκτυο ώστε να είναι προσβάσιμη από όλους τους χρήστες του internet. Πρώτα όμως, ας πούμε δύο λόγια για τη γλώσσα HTML.
Η γλώσσα HTML
Η HTML ή αλλιώς HyperText Markup Language, είναι μια γλώσσα σήμανσης και όχι προγραμματισμού, όπως συχνά και λανθασμένα ακουγέται. Αυτό σημαίνει ότι, σε αντίθεση με τις γλώσσες προγραμματισμού (όπως Python, C, Java), η HTML δεν μπορεί να προγραμματίσει λογική στην ιστοσελίδα, αλλά μπορεί να υλοποιήσει τη δομή της.
Αυτό το επιτυγχάνει με τη χρήση περιγραφικών ετικετών (tags), που περιέχονται σε αγκύλες < >. Για παράδειγμα, το ζεύγος ετικετών <h1> και </h1> σηματοδοτεί μια επικεφαλίδα (header), ενώ η ετικέτες <p> και </p> δηλώνουν την αρχή και το τέλος μιας παραγράφου.
Εισαγωγικά, αυτά τα στοιχεία αρκούν για να δημιουργήσουμε την πρώτη μας ιστοσελίδα.
Βήμα 1. Εγκατάσταση του Visual Studio Code
Για να γράψουμε τον κώδικά μας, θα χρησιμοποιήσουμε το Visual Studio Code (VS Code), ένα δωρεάν εργαλείο που προσφέρει η Microsoft, ιδανικό για προγραμματιστές όλων των επιπέδων. Ακολουθήστε τα παρακάτω βήματα για την εγκατάστασή του:
- Πλοηγηθείτε στην επίσημη ιστοσελίδα του VS Code.
- Κάντε κλικ στο κουμπί “Download” που βρίσκεται πάνω δεξιά.

- Επιλέξτε την έκδοση που αντιστοιχεί στο λειτουργικό σας σύστημα (Windows, MacOS, ή Linux).

- Ακολουθήστε τις οδηγίες για την εγκατάσταση του προγράμματος.
- Στη συνέχεια, θα εισέλθουμε στο πρόγραμμα που μόλις κατεβάσαμε και θα ξεκινήσουμε τη συγγραφή της πρώτης μας ιστοσελίδας.
Βήμα 2. Δημιουργία του αρχείου HTML
- Ανοίξτε το Visual Studio Code.
- Στην αρχική σελίδα, επιλέξτε “New File”.

- Ονομάστε το νέο αρχείο “index.html”.
- Αποθηκεύστε το αρχείο στην επιφάνεια εργασίας. Εναλλακτικά, μπορείτε να δημιουργήσετε ένα νέο αρχείο από την κατηγορία “File” επάνω αριστερά, σε περίπτωση που δεν εμφανιστεί η εισαγωγική σελίδα.
Βήμα 3. Δημιουργία βασικής δομής
Στη συνέχεια, πατάμε μέσα στο αρχείο που μόλις φτιάξαμε και δημιουργούμε αυτόματα τη δομή του HTML αρχείου, πατώντας το θαυμαστικό “!” και έπειτα “Enter”. Χρησιμοποιώντας αυτή τη συντόμευση, το Visual Studio Code θα φτιάξει τη δομή που χρειάζεται ώστε να μπορεί να διαβαστεί από τον περιηγητή μας (browser). Εδώ έγκειται και η δύναμη του VS Code, καθώς προσφέρει τέτοιες λειτουργίες αυτόματης συμπλήρωσης, μεταξύ άλλων.
- Ανοίξτε το αρχείο index.html στο Visual Studio Code.
- Πατήστε “!” και στη συνέχεια “Enter”.
- Το VS Code θα δημιουργήσει αυτόματα τη βασική δομή του HTML αρχείου, η οποία θα μοιάζει με την εξής:

Το περιβάλλον συγγραφής
Εναλλακτικά, θα μπορούσαμε να γράψουμε τη σελίδα μας ακόμη και σε ένα απλό σημειωματάριο του υπολογιστή μας, αρκεί να τηρούσαμε την παραπάνω δομή με τη χρήση της βασικής ετικέτας <!DOCTYPE html>, καθώς και των επιμέρους ετικετών, και προσθέτοντας την κατάληξη “.html” στο αρχείο μας. Ωστόσο, η διαδικασία θα ήταν σαφώς δυσκολότερη, καθώς δεν θα υπήρχε η αυτόματη συμπλήρωση των ετικετών, η οπτική υποβοήθηση του κώδικα, καθώς και πιο προχωρημένες λειτουργίες που θα δούμε στη συνέχεια.
Για αυτό, η εξοικείωσή μας με ένα περιβάλλον συγγραφής κώδικα (code editor) είναι εξίσου σημαντική με τη διαδικασία της εκμάθησης κώδικα, ώστε να μπορούμε να γράφουμε αποτελεσματικά και γρήγορα.
Βήμα 4: Δημιουργία περιεχομένου
- Προσθέστε το Περιεχόμενο:
- Το περιεχόμενο της ιστοσελίδας θα το τοποθετήσουμε ανάμεσα στις ετικέτες <body> και </body>.
- Η πλαγιοκαθέτος </body> σηματοδοτεί το κλείσιμο της ενότητας “body”, ενώ η απουσία της σηματοδοτεί την έναρξή της.
- Δημιουργία Επικεφαλίδας και Παραγράφου:
- Θα προσθέσουμε μια επικεφαλίδα και μια παράγραφο που σηματοδοτούνται από τις εναρκτήριες ετικέτες <h1> και <p>, αντίστοιχα, καθώς και τις ετικέτες κλεισίματος </h1> και </p>.
- Εισαγωγή εικόνας:
- Τέλος, με τη χρήση της ετικέτας <img> μπορούμε να εισάγουμε μια εικόνα. Προσθέτοντας την πηγή της μέσω του “src=”, εντός της ετικέτας <img>. Η πηγή της εικόνας μπορεί να είναι ένα αρχείο του υπολογιστή μας (που σε αυτή τη περίπτωση πρέπει να ανέβει και αυτή στο αποθετήριο που θα δημιουργήσουμε στη συνέχεια). Εναλλακτικά, μπορούμε να χρησιμοποιήσουμε μια εικόνα σπό το διαδίκτυο με τη χρήση του υπερσυνδέσμου της, παραθέτω το link για το λογότυπο του περιοδικού, που μπορείτε να τοποθετήσετε μέσα στο <img src=” “>:
- https://maxmag.gr/wp-content/uploads/2023/10/maxmag_logo-2-scaled.jpg

Βήμα 5. Ολοκλήρωση και αποθήκευση της ιστοσελίδας
Η ιστοσελίδα μας είναι έτοιμη! Ακολουθήστε τα παρακάτω βήματα για να αποθηκεύσετε τις αλλαγές που κάνατε:
- Αποθήκευση Αλλαγών:
- Πατήστε το κουμπί “File” επάνω αριστερά.
- Επιλέξτε “Save” για να αποθηκεύσετε τις αλλαγές σας.
- Άνοιγμα της Ιστοσελίδας:
- Ανοίξτε το αρχείο με διπλό κλικ στο “index.html” για να δείτε τη σελίδα σας στον περιηγητή.
Αν η δομή της σελίδας σας είναι ακριβώς όπως παραπάνω, τότε ο περιηγητής σας θα είναι σε θέση να διαβάσει και να σας παρουσιάσει το περιεχόμενο της σελίδας.
Σημείωση: Σε περίπτωση που δεν φορτωθεί σωστά η ιστοσελίδα, αυτό σημαίνει ότι κατά πάσα πιθανότητα κάποια ετικέτα δεν έχει κλείσει σωστά. Για να το διαπιστώσετε, κάντε δεξί κλικ στο “index.html”.
Επιλέξτε “Άνοιγμα με” και στη συνέχεια “Visual Studio Code” για να ελέγξετε τον κώδικα και να βρείτε τυχόν λάθη.
Βήμα 6. Δημοσίευση της ιστοσελίδας στο GitHub Pages
Τώρα είμαστε έτοιμοι να ανεβάσουμε και να δημοσιεύσουμε την ιστοσελίδα μας στον παγκόσμιο ιστό. Αυτή τη δυνατότητα μας παρέχει δωρεάν το GitHub μέσω της υπηρεσίας GitHub Pages, η οποία δεν απαιτεί πληρωμή για κατοχύρωση ονόματος (domain) όπως .com, .org, .gov, .gr. Οι σελίδες μας αναρτώνται στο GitHub domain με κατάληξη “.github.io”.
Βήματα για τη Δημοσίευση
- Δημιουργία Λογαριασμού στο GitHub.
- Κατευθυνόμαστε στην επίσημη σελίδα του GitHub.
- Δημιουργούμε έναν λογαριασμό χρήστη ακολουθώντας τις οδηγίες που παρέχονται.

- Δημιουργία Νέου Αποθετηρίου:
- Μετά την επιτυχία της εγγραφής, θα βρεθούμε στη Home Page του GitHub.
- Επιλέγουμε τη δημιουργία ενός νέου αποθετηρίου για να αναρτήσουμε την ιστοσελίδα μας.
- Δώστε ένα όνομα στο αποθετήριο, το οποίο θα είναι επίσης το όνομα της ιστοσελίδας σας (π.χ. MyFirstPage).
- Eπιλεγουμε “Public” ώστε η σελιδα μας να μπορει να δημοσιευθει στο ιντερνετ.
- Τελος, “Create Repository”.

- Στην επόμενη σελίδα, θα επιλέξουμε την επιλογή “uploading an existing file” για να ανεβάσουμε το αρχείο μας στο GitHub.

Ανέβασμα του Αρχείου στο GitHub
Στην επόμενη σελίδα, μπορούμε να ανεβάσουμε το αρχείο μας “index.html”.
Έχουμε δύο επιλογές:
- Σύρουμε το αρχείο μας “index.html” απευθείας στην σελίδα.
- Ή, επιλέγουμε το αρχείο από τα αρχεία του υπολογιστή μας κάνοντας κλικ στο κουμπί “Upload files”.
Αφού ανεβεί το αρχείο, θα εμφανιστεί στην περιοχή εργασίας.
Πατάμε το κουμπί “Commit Changes” για να ανεβάσουμε το αρχείο στο δημόσιο αποθετήριο μας.

- Στη συνέχεια μπορείτε να επεξεργαστείτε τη σελίδα σας απευθείας στο Github:

- Καθώς και να αποθηκεύσετε τις τροποποιήσεις σας:

Δημιουργία της Σελίδας από το Αρχείο που Ανεβάσαμε
Τέλος, θα δημιουργήσουμε τη σελίδα μας από το αρχείο που ανεβάσαμε.
- Πρόσβαση στις Ρυθμίσεις του Project:
- Πηγαίνουμε στις ρυθμίσεις (Settings) του project μας.

- Επιλογή GitHub Pages:
- Στις ρυθμίσεις, αναζητούμε την ενότητα “Pages”.
- Στην ενότητα αυτή, θα βρούμε τις επιλογές για να ενεργοποιήσουμε το GitHub Pages.

- Επιλογή Source:
- Στην επιλογή “Source”, επιλέγουμε το branch που θέλουμε να χρησιμοποιήσουμε (συνήθως το main ή το master).
- Επίσης, επιλέγουμε τον φάκελο από τον οποίο θα αναρτηθεί η σελίδα μας (συνήθως /root για το βασικό φάκελο).

- Αποθήκευση Ρυθμίσεων:
- Πατάμε το κουμπί “Save” για να αποθηκεύσουμε τις αλλαγές.
- Προβολή της Σελίδας:
- Μετά από μισό λεπτό περίπου μπορείτε να κάνετε ανανέωση στη σελίδα που βρίσκεστε και στην κορυφή θα βρίσκεται ένας σύνδεσμος. Η σελίδα σας θα είναι διαθέσιμη στη διεύθυνση https://<ΟΝΟΜΑ ΧΡΗΣΤΗ>.github.io/<ΟΝΟΜΑ ΑΠΟΘΕΤΗΡΙΟΥ>.
- Μπορείτε να ανοίξετε τη διεύθυνση αυτή σε έναν περιηγητή για να δείτε τη σελίδα σας, που πλέον έχει δημοσιευτεί στον ιστό!

Συγχαρητήρια! Έχετε πλέον δημιουργήσει την πρώτη σας ιστοσελίδα με χρήση HTML, αυτό είναι ένα σημαντικό βήμα στον κόσμο του προγραμματισμού και της ανάπτυξης ιστοσελίδων.
Επίσης αποτελεί και ένα ταξίδι στις απαρχές του ιστού, όταν οι πρώτες ιστοσελίδες κατασκευάζονταν με αυτό τον τρόπο, πριν εμπλουτιστούν με τις σχεδιαστικές δυνατότητες που διαθέτουμε σήμερα.
Πηγές Άρθρου:
https://code.visualstudio.com/
https://www.w3schools.com/html/html_intro.asp