Ιστοσελίδα: Φτιάξε τη δική σου

ιστοσελίδα
Πηγή: Microsoft Copilot

Βήμα-βήμα η κατασκευή μιας ιστοσελίδας

Η κατασκευή μιας ιστοσελίδας 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> δηλώνουν την αρχή και το τέλος μιας παραγράφου.

Εισαγωγικά, αυτά τα στοιχεία αρκούν για να δημιουργήσουμε την πρώτη μας ιστοσελίδα.

Advertising

Advertisements
Ad 14

Βήμα 1. Εγκατάσταση του Visual Studio Code

Για να γράψουμε τον κώδικά μας, θα χρησιμοποιήσουμε το Visual Studio Code (VS Code), ένα δωρεάν εργαλείο που προσφέρει η Microsoft, ιδανικό για προγραμματιστές όλων των επιπέδων. Ακολουθήστε τα παρακάτω βήματα για την εγκατάστασή του:

ιστοσελίδα
Πηγή: visualstudio.com
  •  Επιλέξτε την έκδοση που αντιστοιχεί στο λειτουργικό σας σύστημα (Windows, MacOS, ή Linux).
ιστοσελίδα
Πηγή: visualstudio.com
  •  Ακολουθήστε τις οδηγίες για την εγκατάσταση του προγράμματος.
  • Στη συνέχεια, θα εισέλθουμε στο πρόγραμμα που μόλις κατεβάσαμε και θα ξεκινήσουμε τη συγγραφή της πρώτης μας ιστοσελίδας.

Βήμα 2.  Δημιουργία του αρχείου HTML

  • Ανοίξτε το Visual Studio Code.
  • Στην αρχική σελίδα, επιλέξτε “New File”.
Διαβάστε επίσης  Φόρτιση κινητού όλο το βράδυ. Να την επιλέγουμε ή όχι;
ιστοσελίδα
Πηγή: Visual Studio Code
  • Ονομάστε το νέο αρχείο “index.html”.
  • Αποθηκεύστε το αρχείο στην επιφάνεια εργασίας. Εναλλακτικά, μπορείτε να δημιουργήσετε ένα νέο αρχείο από την κατηγορία “File” επάνω αριστερά, σε περίπτωση που δεν εμφανιστεί η εισαγωγική σελίδα.

Βήμα 3.  Δημιουργία βασικής δομής

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

  • Ανοίξτε το αρχείο index.html στο Visual Studio Code.
  • Πατήστε “!” και στη συνέχεια “Enter”.
  • Το VS Code θα δημιουργήσει αυτόματα τη βασική δομή του HTML αρχείου, η οποία θα μοιάζει με την εξής:
ιστοσελίδα
Πηγή: Visual Studio Code

Το περιβάλλον συγγραφής

Εναλλακτικά, θα μπορούσαμε να γράψουμε τη σελίδα μας ακόμη και σε ένα απλό σημειωματάριο του υπολογιστή μας, αρκεί να τηρούσαμε την παραπάνω δομή με τη χρήση της βασικής ετικέτας <!DOCTYPE html>, καθώς και των επιμέρους ετικετών, και προσθέτοντας την κατάληξη “.html” στο αρχείο μας. Ωστόσο, η διαδικασία θα ήταν σαφώς δυσκολότερη, καθώς δεν θα υπήρχε η αυτόματη συμπλήρωση των ετικετών, η οπτική υποβοήθηση του κώδικα, καθώς και πιο προχωρημένες λειτουργίες που θα δούμε στη συνέχεια.

Για αυτό, η εξοικείωσή μας με ένα περιβάλλον συγγραφής κώδικα (code editor) είναι εξίσου σημαντική με τη διαδικασία της εκμάθησης κώδικα, ώστε να μπορούμε να γράφουμε αποτελεσματικά και γρήγορα.

Advertising

Βήμα 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
Διαβάστε επίσης  Sony Xperia 5 mk V: Ένα εργαλείο με compact διαστάσεις
ιστοσελίδα
Πηγή: Visual Studio Code

Βήμα 5. Ολοκλήρωση και αποθήκευση της ιστοσελίδας

Η ιστοσελίδα μας είναι έτοιμη! Ακολουθήστε τα παρακάτω βήματα για να αποθηκεύσετε τις αλλαγές που κάνατε:

  • Αποθήκευση Αλλαγών:
    • Πατήστε το κουμπί File επάνω αριστερά.
    • Επιλέξτε Save για να αποθηκεύσετε τις αλλαγές σας.
  • Άνοιγμα της Ιστοσελίδας:
    • Ανοίξτε το αρχείο με διπλό κλικ στο index.html για να δείτε τη σελίδα σας στον περιηγητή.

Αν η δομή της σελίδας σας είναι ακριβώς όπως παραπάνω, τότε ο περιηγητής σας θα είναι σε θέση να διαβάσει και να σας παρουσιάσει το περιεχόμενο της σελίδας.

ιστοσελίδα

Σημείωση: Σε περίπτωση που δεν φορτωθεί σωστά η ιστοσελίδα, αυτό σημαίνει ότι κατά πάσα πιθανότητα κάποια ετικέτα δεν έχει κλείσει σωστά. Για να το διαπιστώσετε, κάντε δεξί κλικ στο index.html.

Advertising

Επιλέξτε “Άνοιγμα με” και στη συνέχεια Visual Studio Code για να ελέγξετε τον κώδικα και να βρείτε τυχόν λάθη.

ιστοσελίδα

Βήμα 6. Δημοσίευση της ιστοσελίδας στο GitHub Pages

Τώρα είμαστε έτοιμοι να ανεβάσουμε και να δημοσιεύσουμε την ιστοσελίδα μας στον παγκόσμιο ιστό. Αυτή τη δυνατότητα μας παρέχει δωρεάν το GitHub μέσω της υπηρεσίας GitHub Pages, η οποία δεν απαιτεί πληρωμή για κατοχύρωση ονόματος (domain) όπως .com, .org, .gov, .gr. Οι σελίδες μας αναρτώνται στο GitHub domain με κατάληξη “.github.io.

Βήματα για τη Δημοσίευση

  • Δημιουργία Λογαριασμού στο GitHub.
    • Κατευθυνόμαστε στην επίσημη σελίδα του GitHub.
    • Δημιουργούμε έναν λογαριασμό χρήστη ακολουθώντας τις οδηγίες που παρέχονται.
ιστοσελίδα
Πηγή: Github.com
  • Δημιουργία Νέου Αποθετηρίου:
    • Μετά την επιτυχία της εγγραφής, θα βρεθούμε στη Home Page του GitHub.
    • Επιλέγουμε τη δημιουργία ενός νέου αποθετηρίου για να αναρτήσουμε την ιστοσελίδα μας.
    • Δώστε ένα όνομα στο αποθετήριο, το οποίο θα είναι επίσης το όνομα της ιστοσελίδας σας (π.χ. MyFirstPage).
    • Eπιλεγουμε “Public” ώστε η σελιδα μας να μπορει να δημοσιευθει στο ιντερνετ.
    • Τελος, “Create Repository”.
ιστοσελίδα
Πηγή: Github.com
  • Στην επόμενη σελίδα, θα επιλέξουμε την επιλογή uploading an existing file για να ανεβάσουμε το αρχείο μας στο GitHub.
Διαβάστε επίσης  Chromecast για έξυπνη τηλεόραση
ιστοσελίδα
Πηγή: Github.com

Ανέβασμα του Αρχείου στο GitHub

Στην επόμενη σελίδα, μπορούμε να ανεβάσουμε το αρχείο μας index.html.

Advertising

Έχουμε δύο επιλογές:

  • Σύρουμε το αρχείο μας index.html απευθείας στην σελίδα.
  • Ή, επιλέγουμε το αρχείο από τα αρχεία του υπολογιστή μας κάνοντας κλικ στο κουμπί “Upload files”.

Αφού ανεβεί το αρχείο, θα εμφανιστεί στην περιοχή εργασίας.

Πατάμε το κουμπί Commit Changes για να ανεβάσουμε το αρχείο στο δημόσιο αποθετήριο μας.

ιστοσελίδα
Πηγή: Github.com
  • Στη συνέχεια μπορείτε να επεξεργαστείτε τη σελίδα σας απευθείας στο Github:
ιστοσελίδα
Πηγή: Github.com
  • Καθώς και να αποθηκεύσετε τις τροποποιήσεις σας:
ιστοσελίδα
Πηγή: Github.com

Δημιουργία της Σελίδας από το Αρχείο που Ανεβάσαμε

Τέλος, θα δημιουργήσουμε τη σελίδα μας από το αρχείο που ανεβάσαμε.

Advertising

  • Πρόσβαση στις Ρυθμίσεις του Project:
    • Πηγαίνουμε στις ρυθμίσεις (Settings) του project μας.
ιστοσελίδα
Πηγή: Github.com
  • Επιλογή GitHub Pages:
    • Στις ρυθμίσεις, αναζητούμε την ενότητα Pages.
    • Στην ενότητα αυτή, θα βρούμε τις επιλογές για να ενεργοποιήσουμε το GitHub Pages.
ιστοσελίδα
Πηγή: Github.com
  • Επιλογή Source:
    • Στην επιλογή Source, επιλέγουμε το branch που θέλουμε να χρησιμοποιήσουμε (συνήθως το main ή το master).
    • Επίσης, επιλέγουμε τον φάκελο από τον οποίο θα αναρτηθεί η σελίδα μας (συνήθως /root για το βασικό φάκελο).
ιστοσελίδα
Πηγή: Github.com
  • Αποθήκευση Ρυθμίσεων:
    • Πατάμε το κουμπί Save για να αποθηκεύσουμε τις αλλαγές.
  • Προβολή της Σελίδας:
    • Μετά από μισό λεπτό περίπου μπορείτε να κάνετε ανανέωση στη σελίδα που βρίσκεστε και στην κορυφή θα βρίσκεται ένας σύνδεσμος. Η σελίδα σας θα είναι διαθέσιμη στη διεύθυνση https://<ΟΝΟΜΑ ΧΡΗΣΤΗ>.github.io/<ΟΝΟΜΑ ΑΠΟΘΕΤΗΡΙΟΥ>.
    • Μπορείτε να ανοίξετε τη διεύθυνση αυτή σε έναν περιηγητή για να δείτε τη σελίδα σας, που πλέον έχει δημοσιευτεί στον ιστό!
ιστοσελίδα
Πηγή: Github.com

Συγχαρητήρια! Έχετε πλέον δημιουργήσει την πρώτη σας ιστοσελίδα με χρήση HTML, αυτό είναι ένα σημαντικό βήμα στον κόσμο του προγραμματισμού και της ανάπτυξης ιστοσελίδων.

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

 

Πηγές Άρθρου:

https://code.visualstudio.com/

Advertising

https://github.com/

https://www.w3schools.com/html/html_intro.asp

 

Σπούδασα Ελληνική Φιλολογία, Γλωσσολογία και Ψηφιακές Ανθρωπιστικές Επιστήμες. Ωστόσο, η αγάπη μου για την τεχνολογία με οδήγησε στον προγραμματισμό και την ανάπτυξη λογισμικού και ιστοσελίδων.

Αρθρα απο την ιδια κατηγορια

Μουσική τζαζ και τέχνη

Η τέχνη της τζαζ στη ζωγραφική είναι βασισμένη στη μουσική,
μυστικά για πηχτές σούπες

Μυστικά για πηχτές σούπες

Τα μυστικά για πηχτές σούπες ξεκινούν με μια βασική αρχή,