Από τη διεύθυνση https://code.visualstudio.com/ μπορείτε να κάνετε Dowhload ένα εργαλείο δημιουργίας ιστοσελίδων
Ουσιαστικά για να δημιουργήσετε μια ιστοσελίδα χρειάζεστε έναν απλό επεξεργαστή κειμένου – editor και έναν browser – φυλλομετρητή για να δείχνετε τα αρχεία που γράφετε με τον επεξεργαστή.
Για να διευκολύνετε τη ζωή σας μπορείτε να χρησιμοποιήσετε έναν επεξεργαστή που καταλαβαίνει και θα σας βοηθήσει στη σύνταξη html, css και javascript. Ο επεξεργαστής αυτός είναι ο vscode. Στην αρχή του άρθρου βλέπετε τη διεύθυνση από όπου μπορείτε να τον κατεβάσετε δωρεάν και πανεύκολα και μάλιστα αναγνωρίζει το λειτουργικό σας. Ιδού το vscode
Διαθέτει πολλά/ες extensions/προσθήκες, από τις οποίες θα ήταν καλό να εγκαταστήσετε μία μικρή προσθήκη που λέγεται open in browser. Τη διαλέγετε και πατάτε install και πολύ γρήγορα εγκαθίσταται. Το open in browser, όπως λέει αν δούμε τις οδηγίες του, έχει το καλό ότι όταν γράψετε ένα αρχείο html μπορείτε, πατώντας συγχρόνως alt + b, να δείτε το αποτέλεσμα στον browser/φυλλομετρητή.
Με την εγκατάσταση δημιουργείτε εικονίδιο συντόμευσης πάνω στην επιφάνεια εργασίας σας. Διπλοπατώντας πάνω του παίρνετε την παρακάτω εικόνα
Καλό θα ήταν να δημιουργήσετε ένα φάκελο στον οποίο θα αποθηκεύετε τα αρχεία που θα δημιουργείτε. Πάτε στο εργαλείο File Explorer και δημιουργείτε όπου θέλετε μέσα στο File explorer του υπολογιστή σας έναν φάκελο με όνομα HTML. Από την επιλογή File του vscode επιλέγετε Open folder και εντοπίζετε το όνομα του φακέλου που δημιουργήσατε, δηλαδή HTML. Ο φάκελος αρχικά είναι άδειος.
Από το μενού File -> New file ή από την περιοχή Welcome πατώντας New file κάτω από το Start, δημιουργείτε ένα νέο αρχείο που έχει όνομα untitled-1. Το σώζετε (File -> Save as) με όνομα ex1.html.
Προσοχή ! Είναι σημαντικό να δηλώσετε ότι το αρχείο είναι html. Διότι ο vscode μπορεί να χρησιμοποιηθεί για ανάπτυξη κώδικα και σε άλλες γλώσσες προγραμματισμού.
Γράφετε τον παρακάτω κώδικα :
<html>
<body>
<p>Καλή σας μέρα<br>
και καλή σας νύχτα!<br>
και όνειρα γλυκά!</p>
</body>
</html>
και βλέπετε γράφοντας πόσο ο επεξεργαστής σας βοηθάει στο γράψιμο, υποδεικνύοντας, πληκτρολογώντας το 1ο γράμμα μιας ετικέτας, π.χ. <h…, ποιες εντολές αρχίζουν από h ώστε να επιλέξετε αυτή που χρειάζεστε. Όταν πατήσετε enter σας δείχνει ότι γράφετε τέσσερις χαρακτήρες πιο μέσα, δηλαδή στοιχίζει και κάνει πολύ πιο ευανάγνωστο τον κώδικα που παράγεται. Αν και αυτό στην html δεν είναι απαραίτητο, όπως σε άλλες γλώσσες προγραμματισμού όπως π.χ. στην Python, είναι αρκετά “βοηθητικό” και “οργανωτικό”.
Σώζετε το αρχείο με Ctrl+sή File -> Save (αφού το έχετε ονομάσει) και στη συνέχεια με Alt+b ανοίγει ο φυλλομετρητής και εκεί βλέπετε το αποτέλεσμα του κώδικά σας.
Αν κάνετε οποιαδήποτε αλλαγή στον κώδικά σας, την σώζετε (Ctrl+s) και :
- ή πάτε στον φυλλομετρητή και κάνετε reload
- ή πατάτε Alt+b και βλέπετε πάλι σε νέο παράθυρο του φυλλομετρητή το νέο αποτέλεσμα
- Με Shift+Alt+b επιλέγετε browser/φυλλομετρητή.
Εάν θέλετε να δώσετε στην ιστοσελίδα σας τίτλο και να “τροποποιήσετε’ το πώς θα εμφανίζεται το <body>, τότε χρειάζεστε πάνω από το <body> μια ετικέτα <head> που θα περιλαμβάνει μια ετικέτα <title> και μια ετικέτα <style> η οποία θα περιλαμβάνει color και background-color για το body (όχι πως δεν υπάρχουν και άλλα στοιχεία διαμόρφωσης όπως font-size, font-family, κλπ.).
Τέλος μπορείτε να εισάγετε και μια εικόνα, αρκεί αυτή να βρίσκεται μέσα στο φάκελο HTML που δημιουργήσατε στην αρχή. Το μόνο που χρειάζεστε είναι η ετικέτα <img> που είναι κενή και περιέχει μόνο χαρακτηριστικά όπως :
• το χαρακτηριστικό src (source) που λέει στον φυλλομετρητή που θα βρει την εικόνα
• το χαρακτηριστικό alt που επιτρέπει να δηλώσετε ένα εναλλακτικό κείμενο για την εικόνα, το οποίο θα εμφανιστεί εάν για οποιαδήποτε αιτία η εικόνα δεν καταφέρει να φτάσει στο φυλλομετρητή του χρήστη και
• το χαρακτηριστικό style όπου ορίζετε το πλάτος/width και το ύψος/heigh της εικόνας
Στην παραπάνω εικόνα βλέπετε ένα πιο “προχωρημένο” παράδειγμα, μια αρχική σελίδα υποδοχής στην ιστοσελίδα π.χ. του σχολείου σας. Μια εικόνα του σχολείου σας μπορείτε να τραβήξετε μια μέρα με ένα κινητό, αλλιώς χρησιμοποιήστε την παρακάτω. Και μην ξεχνάτε την αποθήκευση. Ή αν κάνετε το παράδειγμα σε νέο αρχείο αποθηκεύστε από την αρχή ως αρχείο html. Καλή επιτυχία!
