Δημιουργία της δικής σας ιστοσελίδας για αρχάριους: 5 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:34

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

Προμήθειες

• Ένας υπολογιστής Macintosh ή Windows (αν και οι διανομές Linux μπορούν επίσης να χρησιμοποιηθούν, τις παραλείπω προς το παρόν καθώς πρόκειται για εισαγωγή για αρχάριους).
• Η επιλογή του επεξεργαστή κειμένου (Σημειωματάριο στα Windows, TextEdit σε Mac) ή η επιλογή του IDE. Από την εμπειρία μου, βρήκα ότι το Visual Studio Code λειτουργεί καλύτερα για μένα, οπότε θα συνιστούσα επίσης να το ελέγξετε εδώ: https://code.visualstudio.com/ για να μην αναφέρουμε ότι λειτουργεί σε όλες τις πλατφόρμες λειτουργικού συστήματος.

Βήμα 1: Ετικέτες και λίγο Ιστορικό

Αφού αποφασίσετε για την επιλογή επεξεργαστή κειμένου ή IDE, ας ξεκινήσουμε με τα βασικά.

Είτε το πιστεύετε είτε όχι, η γλώσσα σήμανσης HTML ή HyperText υπάρχει εδώ και σχεδόν 30 χρόνια και κάθε χρόνο έρχονται όλο και περισσότερες βελτιώσεις στη γλώσσα. Τώρα, μπορεί να αναρωτιέστε, πώς ερμηνεύει ένα πρόγραμμα περιήγησης τι πρέπει να βάλει στην οθόνη; Αυτό γίνεται σε μερικά μέρη:

Η μορφοποίηση εγγράφων HTML είναι εύκολη. Έχετε δύο τμήματα γνωστά ως κεφάλι και σώμα. Η κεφαλή ενός ιστότοπου περιέχει κώδικα που δεν είναι ορατός στον χρήστη. Αυτό χρησιμοποιείται για τη σύνδεση φύλλων στυλ και τη δήλωση άλλων απαραίτητων κομματιών που απαιτούνται για την σωστή εμφάνιση του ιστότοπου. Ακολουθώντας το κεφάλι, το σώμα είναι όπως ακούγεται, το σώμα της ιστοσελίδας. Εδώ μπορείτε να εκφράσετε τη φωνή σας και να δείξετε στο κοινό τις φανταστικές σας δεξιότητες HTML! Τώρα δεν είναι τόσο εύκολο όσο απλά να πληκτρολογείτε κείμενο στο σώμα και να το εμφανίζετε ακριβώς όπως θέλετε, αλλά είναι σχεδόν τόσο εύκολο από μια άποψη με τη χρήση των πραγμάτων που ονομάζουμε ετικέτες.

Ακολουθούν μερικές από τις βασικές ετικέτες HTML:

• τίτλος - που χρησιμοποιείται για να πείτε στο πρόγραμμα περιήγησης ποιος είναι ο τίτλος της σελίδας. Αυτό είναι επίσης αυτό που βλέπετε όταν κοιτάτε την καρτέλα μιας ιστοσελίδας.
• h1, h2, h3, h4 - που χρησιμοποιούνται για διαφορετικά μεγέθη κεφαλίδων με το h1 να είναι το μεγαλύτερο και το h4 το μικρότερο. Θα καλύψω περισσότερα για αυτό στην επόμενη ενότητα.
• p - παράγραφος, που χρησιμοποιείται για τη σύνταξη παραγράφων κειμένου. Όπως οι παράγραφοι σε χαρτί.
• br - break, το οποίο εισάγει ένα διάλειμμα σύμφωνα με το κείμενο.
• α - χρησιμοποιείται για τη δημιουργία συνδέσμων προς άλλες σελίδες, όπως ένας σύνδεσμος με δυνατότητα κλικ.
• img - χρησιμοποιείται για τη σύνδεση μιας εικόνας με την ιστοσελίδα.
• ul, ol, li - μη ταξινομημένες λίστες, ταξινομημένες λίστες και στοιχεία λίστας.
• - χρησιμοποιείται για τη δημιουργία ενσωματωμένων σχολίων στον κώδικα που δεν θα δει ο τελικός χρήστης.

Και εδώ είναι μερικές ετικέτες CSS (οπτικές):

• χρώμα - χρησιμοποιείται για την εκχώρηση ενός συγκεκριμένου χρώματος σε ένα συγκεκριμένο στοιχείο ή σετ στην ιστοσελίδα.
• font-size-χρησιμοποιείται για να αλλάξετε το μέγεθος της γραμματοσειράς στη σελίδα.
• χρώμα φόντου-χρησιμοποιείται για την αλλαγή του χρώματος φόντου ορισμένου στοιχείου ή ολόκληρης της σελίδας.

Έχω επισυνάψει επίσης ένα μικρό φύλλο εξαπάτησης για να σας βοηθήσω αν αισθάνεστε λίγο χαμένοι, αλλά μην ανησυχείτε, θα το ξεκουραστείτε σε λίγο! Επιπλέον, το www.w3schools.com είναι επίσης ένας φανταστικός πόρος για οποιαδήποτε από τις ερωτήσεις προγραμματισμού σας. Σίγουρα μου έχουν εξοικονομήσει χρόνο.

Ουσιαστικά το πώς διαβάζει το αρχείο το πρόγραμμα περιήγησης είναι εύκολο. Πηγαίνει γραμμή προς γραμμή και επεξεργάζεται λειτουργία ανά λειτουργία. Οι χαρακτήρες χρησιμοποιούνται για να δηλώσουν μια ετικέτα όπως π.χ.

και χρησιμοποιούνται για το κλείσιμο της ετικέτας όπως π.χ.

Το Αυτό είναι σημαντικό, διαφορετικά το πρόγραμμα περιήγησης δεν μπορεί να σταματήσει. Ανάμεσα στο

και

ετικέτες, είναι όπου εισάγετε ό, τι θέλετε!

Βήμα 2: Ρύθμιση επεξεργαστή

Τώρα που καλύψαμε λίγο για τα βασικά στοιχεία ενός ιστότοπου HTML, ας βουτήξουμε και να το δοκιμάσουμε μόνοι μας. Για αυτό το επόμενο βήμα θα χρησιμοποιήσω τον κώδικα του Visual Studio για να προγραμματίσω τον ιστότοπο, αλλά η διάταξη του κώδικα θα είναι η ίδια εάν είστε πιο άνετοι με τη χρήση του Σημειωματάριου ή του TextEdit.

Μέσα στο Σημειωματάριο:

• Με το Σημειωματάριο, το πρόγραμμα ξεκινά με ένα κενό αρχείο που το καθιστά εξαιρετικά εύκολο να ξεκινήσετε. Αυτό θα μας επιτρέψει επίσης να κάνουμε μερικά βήματα σε σύγκριση με τη χρήση του κώδικα VS. Ας ξεκινήσουμε αποθηκεύοντας το αρχείο στη σωστή μορφή.
• Κάντε κλικ στο Αρχείο> Αποθήκευση
• Εισαγάγετε ένα όνομα για το αρχείο σας ακολουθούμενο από.html και στην περιοχή Αποθήκευση ως τύπου, επιλέξτε όλα τα αρχεία. Κάντε κλικ στην επιλογή αποθήκευση.

Εντός κώδικα VS:

• Ο καλύτερος τρόπος για να επωφεληθείτε από όλες τις δυνατότητες του IDE είναι να ξεκινήσετε δημιουργώντας το αρχείο και λέγοντας στο IDE τι τύπο αρχείου είναι. Αυτό μπορεί να γίνει ως εξής:
• Κάντε κλικ στο Αρχείο> Νέο αρχείο
• Ανοίγει ένα κενό αρχείο
• Στη συνέχεια, θα θέλετε να ξεκινήσετε αποθηκεύοντας το αρχείο, αν και κενό, καθώς αυτό θα επιτρέψει στο IDE να είναι σε θέση να καταλάβει τι τύπο αρχείου πρόκειται να είναι το τελικό προϊόν. Κατά την αποθήκευση, φροντίστε να συμπεριλάβετε την επέκταση.html στο τέλος του ονόματος του αρχείου. Κάντε κλικ στην επιλογή αποθήκευση.

Βήμα 3: Σχέδια

Αφού αποθηκεύσετε με επιτυχία το αρχείο filename.html, ας ξεκινήσουμε δημιουργώντας το πλαίσιο για την ιστοσελίδα μας. Θυμηθείτε από πάνω ποια βασικά μέρη του αρχείου πρέπει να δηλώσουμε πριν ξεκινήσουμε με τη δημιουργία της υπόλοιπης σελίδας HTML. Συμβουλή: κατά την εκκίνηση του πλαισίου για τον ιστότοπο, η ετικέτα! DOCTYPE HTML λέει στο πρόγραμμα περιήγησης ότι το αρχείο που διαβάζει είναι ένα αρχείο html. Αυτό μπορεί να είναι χρήσιμο εάν έχετε διαφορετικούς τύπους κώδικα στο ίδιο αρχείο και θέλετε να κάνετε εναλλαγή μεταξύ διερμηνέων. Για το πεδίο αυτού του οδηγού, δεν θα το αγγίξουμε πολύ αυτό, αλλά αν μετά από αυτό το Instructable είστε περίεργοι να μάθετε περισσότερα σχετικά με την ανάπτυξη HTML, μη διστάσετε να το δοκιμάσετε. Θα βάλω την ετικέτα! DOCTYPE HTML στο επάνω μέρος του αρχείου για βέλτιστη πρακτική. Θυμηθείτε να ανοίξετε και να κλείσετε με.

Εδώ είναι χρήσιμη η αποθήκευση του αρχείου πριν ξεκινήσετε τον προγραμματισμό, τώρα που το IDE γνωρίζει ότι λειτουργεί με ένα αρχείο HTML, θα χρησιμοποιήσει το intellisense για να ολοκληρώσει την έκφραση και να προσφέρει προτάσεις, ώστε να μην ξεχάσετε κατά λάθος να κλείσετε μια ετικέτα Το Σημειώστε ότι για εσάς που χρησιμοποιείτε το Σημειωματάριο, το intellisense δεν είναι διαθέσιμο όπως στο IDE. Αρχίζουμε εισάγοντας τις ετικέτες κεφαλής και σώματος ως εξής: (βλ. Δεύτερη εικόνα).

Τώρα που ολοκληρώθηκε η ρύθμιση των εγγράφων, μπορούμε να βγούμε στους αγώνες και να διασκεδάσουμε!

Βήμα 4: Κωδικός. Κώδικας; Κώδικας;

Μπορούμε να ξεκινήσουμε εισάγοντας έναν τίτλο για το νέο αρχείο που δημιουργήσαμε. Εισάγετε ό, τι θέλετε. Θυμηθείτε ότι αυτό είναι το όνομα που εμφανίζεται στην καρτέλα του προγράμματος περιήγησης. Ας ξεκινήσουμε επίσης εισάγοντας μια επικεφαλίδα για τον ιστότοπό μας. Θυμηθείτε από πριν πώς το κάνουμε αυτό. Άκουσα h1/2/3/4; Αυτό είναι σωστό!

Πριν συνεχίσουμε, θεωρώ χρήσιμο να ανοίξουμε το αρχείο μας σε ένα παράθυρο προγράμματος περιήγησης, ώστε να μπορούμε να δούμε σε πραγματικό χρόνο πώς αντικατοπτρίζονται οι αλλαγές μας στο πρόγραμμα περιήγησης. Μπορείτε να το κάνετε αυτό κάνοντας κλικ στο Αρχείο> Αποθήκευση για να αποθηκεύσετε το αρχείο, μεταβαίνοντας στο φάκελο στον οποίο είναι αποθηκευμένο το αρχείο HTML, για μένα αυτή είναι η επιφάνεια εργασίας και χρησιμοποιήστε το πρόγραμμα περιήγησης της επιλογής σας για να ανοίξετε το αρχείο και θα το κοιτούσατε, υπάρχει η ιστοσελίδα σας! Σημείωση: Προσωπικά χρησιμοποιώ το Safari ως πρόγραμμα περιήγησης που επιλέγω στον υπολογιστή μου, ωστόσο, στην ανάπτυξη ιστοσελίδων, ο Firefox είναι το χρυσό πρότυπο πρόγραμμα περιήγησης για δοκιμές καθώς λειτουργεί με σχεδόν κάθε γλώσσα δέσμης ενεργειών ιστού.

Όπως μπορείτε να δείτε, ο τίτλος εμφανίζεται στην καρτέλα, καθώς και ο τίτλος του h1. Προτιμώ να ανοίγει και το παράθυρο του προγράμματος περιήγησης του αρχείου παράλληλα με το IDE, καθώς όταν κάνετε μια αλλαγή στο IDE και αποθηκεύετε, οι αλλαγές είναι άμεσες στο πρόγραμμα περιήγησης.

Μη διστάσετε να προσθέσετε ετικέτες και να παίξετε με τα διάφορα πράγματα που μπορείτε να κάνετε με την HTML. Όπως μπορείτε να δείτε παρακάτω, έχω προσθέσει μερικές παραγράφους, διαλείμματα, εξωτερική υπερσύνδεση στο Instructables.com, μια εικόνα, (η οποία μπορεί να συνδεθεί από εξωτερική πηγή ή στον ίδιο κατάλογο με τον τόπο όπου είναι αποθηκευμένο το αρχείο. HTML), ένα παράδειγμα μιας μη ταξινομημένης λίστας, μιας τακτοποιημένης λίστας και τέλος ενός σχολίου.

Εάν θέλετε να δοκιμάσετε να προσθέσετε ορισμένες επιλογές χρώματος και διάταξης, μπορείτε να εισαγάγετε μια ετικέτα στυλ στο κεφάλι του αρχείου. Αυτό είναι το σημείο στο οποίο αυτό μεταβαίνει από HTML σε CSS, αλλά για οπτικό σκοπό, θα εισαγάγω μερικές γραμμές, ώστε να δείτε πώς λειτουργεί αυτό. Ουσιαστικά πώς λειτουργεί το CSS, σας επιτρέπει να ελέγχετε στοιχεία HTML εντός συναρτήσεων χρησιμοποιώντας αγκύλες {} για να εισαγάγετε τον κωδικό σας για ένα συγκεκριμένο στοιχείο HTML.

Βήμα 5: Τελικές σκέψεις

Και εκεί το έχετε; δημιουργήσατε με επιτυχία την πρώτη σας ιστοσελίδα! Επειδή αυτός είναι ένας οδηγός για αρχάριους, θέλω να κάνω την πρώτη σας εμπειρία με το HTML μια απολαυστική. Ο καλύτερος τρόπος για να μάθω από την εμπειρία μου είναι να βουτήξω και να δοκιμάσω πράγματα, να δω τι μπορείτε να κάνετε με τον κώδικά σας και επίσης να δείτε πώς μπορείτε να σπάσετε τον κώδικά σας. Αυτό χτίζει ακεραιότητα και σας βοηθά να κατανοήσετε καλύτερα πώς και γιατί λειτουργεί ο κώδικας με τον τρόπο που λειτουργεί. Θυμηθείτε ότι το www. W3Schools.com είναι ένας μεγάλος πόρος για ερωτήσεις και προσφέρουν ακόμη και ένα εικονικό sandbox μέσα στο πρόγραμμα περιήγησης για να δοκιμάσετε τον κώδικά σας. Ας ελπίσουμε ότι μάθατε κάτι και καλή κωδικοποίηση!