Σε αυτό το άρθρο, θα μάθετε πώς να χρησιμοποιείτε HTML για να γράψετε τον πρώτο σας ιστότοπο! Το άρθρο θα παρέχει επεξηγηματικά παραδείγματα για καλύτερη κατανόηση. Ας κάνουμε μια κράτηση αμέσως ότι το άρθρο σχεδιάστηκε αρχικά για όσους μόλις αρχίζουν να μαθαίνουν HTML. Επιπλέον, υποσχόμαστε ότι μέχρι το τέλος της ανάγνωσης αυτού του άρθρου, είναι σίγουρο ότι θα δημιουργήσετε τον πρώτο σας ιστότοπο.
HTML σημαίνει HyperText Markup Language, δηλαδή μια γλώσσα για την οργάνωση κειμένου.
Σε αντίθεση με τις γλώσσες προγραμματισμού (JavaScript, PHP, κ.λπ.) που χρησιμοποιούν σενάρια για την εκτέλεση ενεργειών σε ιστότοπους, η γλώσσα αλληλουχίας (HTML) χρησιμοποιεί ετικέτες για τη σήμανση περιεχομένου ιστότοπου.
Ας αρχίσουμε να μαθαίνουμε HTML από την αρχή
Όπως τα αγγλικά αποτελούνται από γράμματα A, B, C κ.λπ., έτσι και η HTML αποτελείται από περίεργα "γράμματα":,,
κτλ. Αυτά τα περίεργα "γράμματα" της γλώσσας HTML ονομάζονται ετικέτες από τους webmasters.
Ακολουθεί ένα παράδειγμα ετικέτας HTML.
Ετικέτες Δημιουργήστε μια υπογράμμιση γύρω από τις άκρες αυτού του κειμένου.
Οι ετικέτες HTML σε συνδυασμό με στυλ γλώσσας CSS σάς επιτρέπουν να δημιουργείτε γρήγορα και αποτελεσματικά ιστότοπους.
Η θέση της HTML μεταξύ άλλων γλωσσών
Όπως γνωρίζετε, ένας καλός ιστότοποςενσωματωμένο σε τουλάχιστον 5 γλώσσες.
Ο σύγχρονος ιστότοπος είναι κατασκευασμένος σε γλώσσες:
- HTML (δομή και διάταξη).
- CSS (περιεχόμενο στυλ).
- JavaScript (ενέργειες προγράμματος περιήγησης).
- PHP (ενέργεια διακομιστή).
- SQL (αποθήκευση δεδομένων).
Η HTML είναι η κύρια θεμελιώδης γλώσσα στην οποία βασίζονται οι άλλες. Επομένως, η εκμάθηση HTML θα πρέπει να είναι το πρώτο βήμα για όποιον μαθαίνει πώς να δημιουργεί ιστοσελίδες στον Ιστό.
Ετικέτα
Η γλώσσα HTML έχει αλλάξει με τα χρόνια από την έναρξή της. Αυτή τη στιγμή, οι περισσότεροι ιστότοποι του Διαδικτύου μετακινούνται στην πιο πρόσφατη έκδοση της γλώσσας - HTML5. Αλλά ακόμη και στην HTML5, οι βασικές αρχές της γλώσσας παραμένουν αμετάβλητες.
Η δομή μιας σελίδας HTML είναι σαν ένα σάντουιτς. Ακριβώς όπως ένα σάντουιτς έχει δύο φέτες ψωμί, ένα έγγραφο HTML έχει μια ετικέτα HTML ανοίγματος και κλεισίματος.
Αυτές οι ετικέτες, όπως το ψωμί σε ένα σάντουιτς, περιβάλλουν τα πάντα μέσα.
Ετικέτα
Καθώς συνεχίζετε να μαθαίνετε HTML, θα πρέπει οπωσδήποτε να εξοικειωθείτε με την ετικέτα. Ακριβώς μέσα στη γονική ετικέτα βρίσκεται όλο το περιεχόμενο του ιστότοπου, συμπεριλαμβανομένης της ετικέτας. Αυτή η ετικέτα είναι απαραίτητη και περιέχει όλες τις ρυθμίσεις της σελίδας του ιστότοπου για την οποία έχει γραφτεί. Αυτές οι ρυθμίσεις δεν είναι ορατές στους επισκέπτες του ιστότοπου, τις βλέπουν μόνο τα προγράμματα περιήγησης (Google Chrome, Mozilla Firefox κ.λπ.).
Το μπλοκ ρυθμίσεων ιστοσελίδας περιέχει όλα τα "μη απόδοση" στοιχεία που βοηθούν το πρόγραμμα περιήγησης να εμφανίζει σωστά τον ιστότοπό σας στον ιστό.
Όλες οι επιλογές πουμπορεί να ρυθμιστεί μέσα στην ετικέτα, θα το δούμε, αλλά λίγο αργότερα - όταν έρθει η ώρα.
Ετικέτα
Η ετικέτα, όπως και η ετικέτα, βρίσκεται μέσα στην ετικέτα.
Αυτή η ετικέτα είναι απαραίτητη για να εμφανίζονται στον ιστότοπό σας όλες οι πληροφορίες που θέλετε να εμφανίζονται.
Οι επικεφαλίδες, οι παράγραφοι, οι πίνακες, οι εικόνες και οι σύνδεσμοι είναι μόνο ένα μικρό μέρος των στοιχείων που μπορούν να περιέχονται στην ετικέτα.
Βασική δομή ενός εγγράφου HTML:
… …
Ο πρώτος σας ιστότοπος
Τώρα γνωρίζετε ότι μπορείτε να δημιουργήσετε ιστότοπους χρησιμοποιώντας HTML και ότι χρησιμοποιούνται βασικές ετικέτες για αυτό:
- . Περιγράφει τα όρια μιας ιστοσελίδας.
- . Περιέχει ρυθμίσεις για την εμφάνιση μιας ιστοσελίδας σε πρόγραμμα περιήγησης.
- . Περιέχει όλα τα στοιχεία ιστοσελίδας (εικόνες, βίντεο, κείμενο κ.λπ.) που θέλετε να εμφανίζονται στους επισκέπτες του ιστότοπου.
Άλλες ετικέτες όπως,,, θα μιλήσουμε σύντομα.
Θα ήταν υπέροχο εάν ο αναγνώστης όχι μόνο διάβαζε αυτό το άρθρο, αλλά και αμέσως έτρεχε να βελτιώσει τις δεξιότητές του. Για να βελτιώσετε τις δεξιότητές σας σε HTML, θα χρειαστεί να δημιουργήσετε τον πρώτο σας ιστότοπο, ο οποίος θα χρησιμεύσει ως πεδίο δοκιμής για τις νέες δεξιότητές σας.
Είναι γνωστό ότι οι εταιρείες κινητής τηλεφωνίας ("MTS", "MegaFon" και ούτω καθεξής) μας παρέχουν υπηρεσίες κινητής τηλεφωνίας. Με τον ίδιο τρόπο, μας παρέχονται υπηρεσίες δημιουργίας και διαχείρισης ιστοτόπων από φορείς φιλοξενίας. Για να δημιουργήσετε τον ιστότοπό σας, μεταβείτε στον ιστότοπο οποιουδήποτε δωρεάν φορέα φιλοξενίας.
Οι επαληθευμένοι πάροχοι φιλοξενίας περιλαμβάνουν BEGET ήreg, για παράδειγμα. Μπορείτε να επιλέξετε οποιονδήποτε.
Μετά από μια σύντομη εγγραφή, μετά από 24 ώρες, θα δημιουργηθεί αυτόματα ο πρώτος σας ιστότοπος στο Διαδίκτυο, ο οποίος θα είναι ορατός σε όλο τον κόσμο και μπορείτε να ξεκινήσετε την εξάσκηση!
Σύγχρονη δομή ιστότοπου
Τώρα που έχετε τον ιστότοπό σας, ελέγξτε τι ετικέτες περιέχει μια ετικέτα και πώς οργανώνουν τις πληροφορίες σε ιστότοπους.
Η παραπάνω εικόνα είναι μια σχηματική αναπαράσταση της δομής που συνοδεύει την πιο πρόσφατη έκδοση της γλώσσας HTML - HTML5. Μαζί με την HTML5 δεν ήρθαν μόνο νέες ετικέτες, αλλά και η έννοια της κατασκευής ιστοσελίδων. Όλες οι ετικέτες που βλέπετε στην εικόνα περιέχονται στην κύρια ετικέτα. Αυτές οι ετικέτες σάς βοηθούν να "σκιαγραφήσετε" τη δομή του ιστότοπού σας και να του δώσετε νόημα.
Για παράδειγμα, μέσα σε ετικέτες … είναι βολικό να τοποθετήσετε τον τίτλο του ιστότοπου (ετικέτες) και την περιγραφή του ιστότοπου (ετικέτες).
Είναι βολικό να τοποθετήσετε το μενού (συνδέσμους) του ιστότοπου (ετικέτα) μέσα στις ετικέτες.
Είναι βολικό να τοποθετείτε οποιοδήποτε μεγάλο μπλοκ πληροφοριών σχετικών με το νόημα μέσα στις ετικέτες. Μπορεί να είναι πολλά άρθρα, καθένα από τα οποία είναι "τυλιγμένο" σε ετικέτες ή φωτογραφίες (ετικέτα) ή πίνακες (ετικέτες
) και άλλα.
Είναι βολικό να τοποθετείτε οποιαδήποτε πληροφορία μέσα στις ετικέτες που δεν ταιριάζουν με την έννοια του.
Μέσα στις ετικέτες, συνηθίζεται να τοποθετούνται πρόσθετες πληροφορίες, όπως στοιχεία επικοινωνίας, πρόσθετες ενότητες του ιστότοπου και ούτω καθεξής.
Λοιπόν τώρα είστε λίγο πιο έμπειροι στο τι αποτελούνται οι σύγχρονοι ιστότοποι. Ας πάρουμε ένα παράδειγμα προςη αναταραχή στο κεφάλι μου αντικαταστάθηκε από δέος από τη διορατικότητα.
Έτσι, όταν ανοίγετε τη διαχείριση αρχείων στον ιστότοπο του πάροχου φιλοξενίας και βρείτε ένα έγγραφο που ονομάζεται index.php, μη διστάσετε να γράψετε σε αυτό, σαν από την αρχή, τη δομή του ιστότοπού σας.
Ο πρώτος μου ιστότοπος
Τίτλος σελίδας
Περιγραφή σελίδας
Σύνδεσμος 1 | Σύνδεσμος 2 | Σύνδεσμος 3
Τίτλος κάποιου άρθρου
Αυτό είναι ένα μπλοκ που περιέχει οποιαδήποτε πληροφορία και με τη βοήθεια του CSS μπορείτε να χρωματίσετε αυτό το μπλοκ και ολόκληρο τον ιστότοπο με όλο το περιεχόμενό του, όπως θέλετε. © Με την επιφύλαξη παντός δικαιώματος
Θυμάστε ότι είπαμε ότι υπάρχουν διαφορετικές ρυθμίσεις για τον ιστότοπο; Λοιπόν, ορίστε:
- Χρησιμοποιώντας δείχνουμε στα προγράμματα περιήγησης ότι ο ιστότοπος μπορεί να περιέχει ρώσικους και αγγλικούς χαρακτήρες (διαφορετικά, όταν ανοίξετε τον ιστότοπο, θα δείτε τρομερό krakozyabry).
- Τοχρησιμοποιείται για να υποδείξει το όνομα της σελίδας, το οποίο θα εμφανίζεται στην καρτέλα του προγράμματος περιήγησης και στη μηχανή αναζήτησης ("Yandex", Google και παρόμοια).
Φυσικά, χωρίς στυλ CSS, ο ιστότοπός σας θα φαίνεται τσιγκούνης (μαύρα γράμματα σε λευκό φόντο), αλλά φροντίστε να δοκιμάσετε πρώτα να γράψετε την πρώτη σας σελίδα σε HTML.
Συγχαρητήρια! Μόλις δημιουργήσατε την πρώτη σας ιστοσελίδα στον δικό σας ιστότοπο! Θα είναι πιο ενδιαφέρον!
