Δημιουργία του πρώτου σας ιστότοπου: 10 βήματα

2025 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2025-01-23 14:39

Σε αυτό το σεμινάριο θα μάθετε να δημιουργείτε μια βασική ιστοσελίδα που έχει συνδεδεμένο φύλλο στυλ και διαδραστικό αρχείο javascript.

Βήμα 1: Δημιουργία του φακέλου σας

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

Βήμα 2: Δημιουργία του πρώτου σας αρχείου

Ανοίξτε τον αγαπημένο σας επεξεργαστή κειμένου. Στην περίπτωσή μου, θα χρησιμοποιήσω απλώς το ενσωματωμένο σημειωματάριο των Windows 10. Μόλις έχετε ένα νέο αρχείο, πληκτρολογήστε τα ακόλουθα:

Αυτή είναι η πρώτη μου ιστοσελίδα, που σας την έφερα ένας οδηγός

Αυτό είναι γνωστό ως ετικέτα HTML. Αντιπροσωπεύει την επικεφαλίδα 1. Το κείμενο που τοποθετούμε σε αυτήν την ετικέτα θα εμφανιστεί ως επικεφαλίδα στη σελίδα. Ανοίγει και κλείνει έτσι. Το κείμενο μεταξύ των δύο ετικετών είναι αυτό που θα εμφανιστεί στο πρόγραμμα περιήγησης ιστού σας. Το τμήμα που λέει δίνει στην ετικέτα ένα χαρακτηριστικό στο οποίο θα αναφερθούμε στο βήμα x. Μόλις γίνει αυτό προχωρήστε και αποθηκεύστε το αρχείο στο φάκελο που φτιάξαμε στο βήμα 1 ως index.html.

Βήμα 3: Ανοίξτε το αρχείο

Τώρα που ολοκληρώσαμε την πλοήγηση στο αρχείο στο φάκελο που δημιουργήσαμε, κάντε δεξί κλικ στο αρχείο και επιλέξτε την επιλογή "άνοιγμα με" και επιλέξτε το πρόγραμμα περιήγησης ιστού που χρησιμοποιείτε. Στην περίπτωσή μου αυτό είναι google chrome. Τώρα δείτε τους κόπους της σκληρής δουλειάς σας μέχρι τώρα!

Βήμα 4: Διαμόρφωση της σελίδας σας

Όπως είναι, ο ιστότοπός μας είναι αρκετά απλός. Θα προσθέσουμε αυτό που είναι γνωστό ως cascading style sheet για να αρωματίσουμε λίγο τα πράγματα. Δημιουργήστε ένα νέο αρχείο κειμένου και πληκτρολογήστε τα ακόλουθα:

h1 {χρώμα: μπλε; text-align: center;}

Αυτό που λέμε στο πρόγραμμα περιήγησης εδώ είναι να βρείτε οποιοδήποτε στοιχείο σε μια ετικέτα h1 (το οποίο μάθαμε στο βήμα 2) και να του δώσετε ένα μπλε χρώμα και να το ευθυγραμμίσετε στο κέντρο της σελίδας. Αποθηκεύστε αυτό το αρχείο στο φάκελο που δημιουργήσαμε στο βήμα 1 ως style.css.

Βήμα 5: Συνδέστε το Style.css με το Index σας. Html

Σε αυτό το σημείο έχουμε δύο ξεχωριστά αρχεία που δεν γνωρίζουν το ένα για το άλλο. Πρέπει να πούμε στο αρχείο index.html ότι έχουμε ένα αρχείο style.css στο οποίο θέλουμε να αναφέρεται και να παίρνουμε κάποιο στυλ. Για να γίνει αυτό, θα ανοίξουμε το αρχείο index.html στον επεξεργαστή κειμένου και πάνω από την ετικέτα h1 θα προσθέσουμε αυτό που είναι γνωστό ως ετικέτα συνδέσμου. Η ετικέτα συνδέσμου κάνει ακριβώς όπως υποδηλώνει ο συνονόματός της, συνδέεται με κάτι. Στην περίπτωσή μας ένα φύλλο στυλ. Προχωρήστε και πληκτρολογήστε. Η ετικέτα συνδέσμου είναι μια ετικέτα κλεισίματος, επομένως δεν απαιτείται ετικέτα λήξης. Το rel σημαίνει σχέση και το href λέει στο αρχείο ευρετηρίου όπου βρίσκεται το εξωτερικό μας αρχείο στο οποίο αναφερόμαστε. Τώρα αποθηκεύστε αυτό το αρχείο index.html.

Βήμα 6: Προβάλετε τη νέα σας σελίδα

Επισκεφτείτε ξανά το βήμα 3 και φορτώστε ξανά την ιστοσελίδα σας και ρίξτε μια ματιά στον τρόπο με τον οποίο αντικατοπτρίζονται οι αλλαγές.

Βήμα 7: Δημιουργία ενός κουμπιού

Ανοίξτε ξανά το αρχείο index.html στον επεξεργαστή κειμένου και πληκτρολογήστε τα ακόλουθα:

Κάντε κλικ σε μένα!

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

Βήμα 8: Δημιουργήστε το αρχείο Javascript

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

document.querySelector ("#κουμπί"). addEventListener ("κλικ", λειτουργία () {

document.querySelector ("#heading"). innerText = "Αλλαγή της επικεφαλίδας εν κινήσει"

})

Αυτό που κάνουμε είναι να ζητήσουμε από το έγγραφο να μας βρει ένα στοιχείο με το αναγνωριστικό του κουμπιού και το κουμπί θα απαντήσει σε ένα συμβάν κλικ αλλάζοντας ένα κείμενο στοιχείων με το αναγνωριστικό της επικεφαλίδας σε "Αλλαγή της επικεφαλίδας εν κινήσει ". Αποθηκεύστε το αρχείο ως button.js στο φάκελο που δημιουργήσαμε στο Βήμα 1.

Βήμα 9: Συνδέστε τα αρχεία Javascript και ευρετηρίου σας

Όπως κάναμε με το αρχείο style.css, πρέπει να ενημερώσουμε το αρχείο index.html για το αρχείο javascript. Στο κάτω μέρος κάτω από όλα όσα έχουμε κάνει μέχρι τώρα πληκτρολογήστε τα εξής:

Η ετικέτα δέσμης ενεργειών μας επιτρέπει να προσθέσουμε μια γλώσσα δέσμης ενεργειών (στην περίπτωσή μας, javascript) για να παρέχουμε λειτουργικότητα στη σελίδα μας. Του λέμε να αναζητήσει ένα αρχείο που ονομάζεται button.js και να προσθέσει όλο τον κώδικα που περιέχεται σε αυτό στο αρχείο ευρετηρίου μας. Μόλις το πληκτρολογήσετε, αποθηκεύστε το αρχείο και ανοίξτε το ξανά όπως φαίνεται στο βήμα 3.

Βήμα 10: Δοκιμάστε το κουμπί Νέο Δημιουργία

Τώρα προχωρήστε και κάντε κλικ στο κουμπί και δείτε την αλλαγή του τίτλου!

Συγχαρητήρια!! Δημιουργήσατε τώρα την πρώτη σας διαδραστική ιστοσελίδα! Αναρωτιέμαι πόσο περισσότερο θα μπορούσατε να το πάτε γνωρίζοντας τι γνωρίζετε τώρα;;