Απαιτούνται ετικέτες για τη δημιουργία HTML. Εκμάθηση "Δημιουργία ιστοσελίδων με χρήση γλώσσας HTML." Βασικοί όροι CSS

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

Ένα έγγραφο HTML είναι ένα κανονικό έγγραφο κειμένου που μπορεί να δημιουργηθεί είτε σε κανονικό πρόγραμμα επεξεργασίας κειμένου (Notepad) είτε σε εξειδικευμένο με επισήμανση κώδικα (Notepad++, Κώδικας Visual Studio κ.λπ.). Ένα έγγραφο HTML έχει επέκταση .html.

Ένα έγγραφο HTML αποτελείται από ένα δέντρο στοιχείων HTML και κειμένου. Κάθε στοιχείο προσδιορίζεται στο έγγραφο προέλευσης από μια ετικέτα έναρξης (άνοιγμα) και μια ετικέτα λήξης (κλείσιμο) (με σπάνιες εξαιρέσεις).

Η ετικέτα έναρξης δείχνει πού αρχίζει το στοιχείο, η ετικέτα τέλους δείχνει πού τελειώνει. Η ετικέτα κλεισίματος σχηματίζεται προσθέτοντας μια κάθετο / πριν από το όνομα της ετικέτας: .... Μεταξύ των ετικετών έναρξης και κλεισίματος βρίσκεται το περιεχόμενο της ετικέτας - το περιεχόμενο.

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

Οι ετικέτες μπορούν να είναι ένθετες η μία μέσα στην άλλη, για παράδειγμα,

Κείμενο

. Όταν επενδύετε, θα πρέπει να ακολουθείτε τη σειρά με την οποία είναι κλειστά (η αρχή "matryoshka"), για παράδειγμα, η ακόλουθη καταχώριση θα είναι λανθασμένη:

Κείμενο

.

Τα στοιχεία HTML μπορούν να έχουν χαρακτηριστικά (καθολικά, που εφαρμόζονται σε όλα τα στοιχεία HTML και τα δικά τους). Τα χαρακτηριστικά γράφονται στην αρχική ετικέτα του στοιχείου και περιέχουν ένα όνομα και μια τιμή, που καθορίζονται στη μορφή χαρακτηριστικού name="value" . Τα χαρακτηριστικά σάς επιτρέπουν να αλλάξετε τις ιδιότητες και τη συμπεριφορά του στοιχείου για το οποίο έχουν οριστεί.

Σε κάθε στοιχείο μπορούν να εκχωρηθούν πολλαπλές τιμές κλάσης και μόνο μία τιμή αναγνωριστικού. Πολλαπλές τιμές κλάσεων γράφονται χωρισμένες με κενό, . Οι τιμές κλάσης και αναγνωριστικού πρέπει να αποτελούνται μόνο από γράμματα, αριθμούς, παύλες και κάτω παύλες και πρέπει να ξεκινούν μόνο με γράμματα ή αριθμούς.

Το πρόγραμμα περιήγησης προβάλλει (ερμηνεύει) το έγγραφο HTML, χτίζοντας τη δομή του (DOM) και εμφανίζοντάς το σύμφωνα με τις οδηγίες που περιλαμβάνονται σε αυτό το αρχείο (φύλλα στυλ, σενάρια). Εάν η σήμανση είναι σωστή, το παράθυρο του προγράμματος περιήγησης θα εμφανίσει μια σελίδα HTML που περιέχει στοιχεία HTML - κεφαλίδες, πίνακες, εικόνες κ.λπ.

Η διαδικασία ερμηνείας (ανάλυση) ξεκινά πριν από την πλήρη φόρτωση της ιστοσελίδας στο πρόγραμμα περιήγησης. Τα προγράμματα περιήγησης επεξεργάζονται έγγραφα HTML διαδοχικά, από την αρχή, ενώ επεξεργάζονται CSS και συσχετίζουν φύλλα στυλ με στοιχεία σελίδας.

Ένα έγγραφο HTML αποτελείται από δύο ενότητες - την κεφαλίδα - μεταξύ των ετικετών ... και το τμήμα περιεχομένου - μεταξύ των ετικετών ....

Δομή ιστοσελίδας 1. Δομή εγγράφου HTML

Η HTML ακολουθεί τους κανόνες που περιέχονται στο αρχείο δήλωσης τύπου εγγράφου (Ορισμός τύπου εγγράφου ή DTD). Ένα DTD είναι ένα έγγραφο XML που ορίζει ποιες ετικέτες, χαρακτηριστικά και τις τιμές τους είναι έγκυρες για έναν συγκεκριμένο τύπο HTML. Κάθε έκδοση HTML έχει το δικό της DTD.

Το DOCTYPE είναι υπεύθυνο για τη σωστή εμφάνιση μιας ιστοσελίδας από το πρόγραμμα περιήγησης. Το DOCTYPE καθορίζει όχι μόνο την έκδοση HTML (π.χ. html) αλλά και το αντίστοιχο αρχείο DTD στο Διαδίκτυο.

...

Τα στοιχεία μέσα στην ετικέτα σχηματίζουν ένα δέντρο εγγράφου, το λεγόμενο μοντέλο αντικειμένου εγγράφου, DOM (μοντέλο αντικειμένου εγγράφου). Σε αυτήν την περίπτωση, το στοιχείο είναι το ριζικό στοιχείο.


Ρύζι. 1. Η απλούστερη δομή μιας ιστοσελίδας

Για να κατανοήσουμε την αλληλεπίδραση των στοιχείων της ιστοσελίδας, είναι απαραίτητο να εξετάσουμε τις λεγόμενες «οικογενειακές σχέσεις» μεταξύ των στοιχείων. Οι σχέσεις μεταξύ πολλαπλών ένθετων στοιχείων ταξινομούνται ως γονέας, παιδί και αδελφή.

Πρόγονος είναι ένα στοιχείο που περιέχει άλλα στοιχεία. Στο σχήμα 1, ο πρόγονος για όλα τα στοιχεία είναι . Ταυτόχρονα, το στοιχείο είναι ο πρόγονος όλων των ετικετών που περιέχει:

, , και τα λοιπά.

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

Είναι απόγονος και των δύο και .

Ένα γονικό στοιχείο είναι ένα στοιχείο που σχετίζεται με άλλα στοιχεία σε χαμηλότερο επίπεδο και βρίσκεται πάνω από αυτά στο δέντρο. Στο σχήμα 1 και . Ετικέτα

Είναι γονέας μόνο σε .

Ένα θυγατρικό στοιχείο είναι ένα στοιχείο που είναι άμεσα υποδεέστερο σε ένα άλλο στοιχείο σε υψηλότερο επίπεδο. Στο σχήμα 1 υπάρχουν μόνο στοιχεία, ,

Και είναι παιδιά του .

Αδελφό στοιχείο είναι ένα στοιχείο που έχει ένα κοινό γονικό στοιχείο με το εν λόγω, τα λεγόμενα στοιχεία του ίδιου επιπέδου. Στο σχήμα 1 και είναι στοιχεία του ίδιου επιπέδου, καθώς και στοιχεία , και

Είναι αδερφές μεταξύ τους.

1.1. Στοιχείο 1.2. Στοιχείο

Η ενότητα ... περιέχει τεχνικές πληροφορίες σχετικά με τη σελίδα: τίτλος, περιγραφή, λέξεις-κλειδιά για μηχανές αναζήτησης, κωδικοποίηση κ.λπ. Οι πληροφορίες που εισάγετε εκεί δεν εμφανίζονται στο παράθυρο του προγράμματος περιήγησης, αλλά περιέχουν πληροφορίες που λένε στο πρόγραμμα περιήγησης πώς να επεξεργαστεί τη σελίδα.

1.2.1. Στοιχείο

Η απαιτούμενη ετικέτα ενότητας είναι . Το κείμενο που τοποθετείται μέσα σε αυτήν την ετικέτα εμφανίζεται στη γραμμή τίτλου του προγράμματος περιήγησης ιστού. Ο τίτλος δεν πρέπει να έχει περισσότερους από 60 χαρακτήρες για να χωράει πλήρως στον τίτλο. Το κείμενο του τίτλου πρέπει να περιέχει την πληρέστερη περιγραφή του περιεχομένου της ιστοσελίδας.

1.2.2. Στοιχείο

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

Η περιγραφή του περιεχομένου της σελίδας και των λέξεων-κλειδιών μπορεί να καθοριστεί ταυτόχρονα σε πολλές γλώσσες, για παράδειγμα, στα ρωσικά και τα αγγλικά:

Χρησιμοποιώντας μια ετικέτα, μπορείτε να αποκλείσετε ή να επιτρέψετε την ευρετηρίαση μιας ιστοσελίδας από τις μηχανές αναζήτησης:

Για αυτόματη επαναφόρτωση της σελίδας μετά από μια καθορισμένη χρονική περίοδο, πρέπει να χρησιμοποιήσετε την τιμή ανανέωσης:

Η σελίδα θα φορτωθεί ξανά μετά από 30 δευτερόλεπτα. Για να ανακατευθύνετε τον επισκέπτη σε άλλη σελίδα, πρέπει να καθορίσετε τη διεύθυνση URL στην παράμετρο url:




Ο τίτλος της σελίδας μου

4) ανοίξτε το αρχείο. Μπορείτε να επιλέξετε ένα άλλο πρόγραμμα περιήγησης για να ανοίξετε αυτό το αρχείο. Για να το κάνετε αυτό, κάντε κλικ στο δεξί κουμπί του ποντικιού στο αρχείο μας index.html - Για να ανοίξετε μεκαι επιλέξτε ένα πρόγραμμα περιήγησης από τη λίστα, για παράδειγμα, Internet Explorer, Google Chrome, Mozilla, Yandex Browser κ.λπ.

Ως αποτέλεσμα, όταν ανοίγετε το index.html που προκύπτει στο πρόγραμμα περιήγησής σας στο Διαδίκτυο, θα πρέπει να δείτε μια σελίδα όπως αυτή:


Εικόνα 1.

Επί Φιγούρα 1βλέπουμε πώς το πρόγραμμα περιήγησης εμφανίζει τη σελίδα σας ως αποτέλεσμα. Το κείμενο των ακόλουθων στοιχείων επισημαίνεται με κόκκινο χρώμα:




Το όνομα της πρώτης σας σελίδας


Ο τίτλος της σελίδας μου

Αυτή είναι η πρώτη μου ιστοσελίδα!

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



Η ετικέτα κεφαλιού επισημαίνει την κεφαλή του εγγράφου. Περιέχει στοιχεία που σχετίζονται κυρίως με το να βοηθήσει τον Browser να επεξεργαστεί τα στοιχεία της σελίδας σας (τίτλος, λέξεις-κλειδιά, συγγραφή κ.λπ.) Θα μιλήσουμε συγκεκριμένα για το περιεχόμενό του αργότερα.

Η ετικέτα τίτλου αντιπροσωπεύει τον τίτλο της σελίδας. Αυτή είναι η μόνη ετικέτα που περιέχεται στο head που εμφανίζεται στη σελίδα. Αυτό που εισάγετε μετά την ετικέτα ανοίγματος και πριν από την ετικέτα κλεισίματος θα είναι ο τίτλος της σελίδας σας στο Διαδίκτυο




Τίτλος σελίδας


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



Τίτλος σελίδας

Οποιοσδήποτε τίτλος
Μόνο μήνυμα

Κείμενο σε μια παράγραφο. Θα ξεκινά από μια νέα γραμμή και θα τελειώνει με την ετικέτα κλεισίματος


Άλλο κείμενο



Σχεδόν όλες οι ετικέτες στην HTML είναι ετικέτες ανοίγματος και κλεισίματος (εξαίρεση αποτελεί η ετικέτα img, η οποία υποδηλώνει την εισαγωγή μιας εικόνας).




Τίτλος σελίδας




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






Θέλω να τονίσω το κείμενο με έντονη γραφή, αλλά αυτό είναι ήδη πλάγια γραφή



Ξεχάσαμε επίτηδες την ετικέτα κλεισίματος b μετά τη λέξη με έντονη γραφή. Ως αποτέλεσμα, το πρόγραμμα περιήγησης εμφάνισε τα ακόλουθα

Θέλω να τονίσω το κείμενο με έντονη γραφή, αλλά αυτό είναι ήδη πλάγια γραφή

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

5) Εάν θέλετε να επεξεργαστείτε κάτι στο αρχείο index.html σας (και τώρα ανοίγει από προεπιλογή μόνο στο πρόγραμμα περιήγησης), κάντε δεξί κλικ στο αρχείο μας index.html - επιλέξτε Για να ανοίξετε μεκαι από τη λίστα επιλέγουμε ένα πρόγραμμα επεξεργασίας κειμένου, θα είναι είτε Μπλοκ ΣΗΜΕΙΩΣΕΩΝ, ή άλλο πρόγραμμα επεξεργασίας κειμένου που εγκαταστήσατε.

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

Συγχαρητήρια!
Δεν είναι δύσκολο;)

Η γλώσσα HTML βασίζεται στην έννοια της ετικέτας. ετικέτα- ετικέτα, ετικέτα). Οι ετικέτες περικλείονται σε γωνιακές αγκύλες (< >) και σχηματίστε ζεύγη - δοχεία (ετικέτα ανοίγματος και ετικέτα κλεισίματος). Για παράδειγμα, το κοντέινερ ενός εγγράφου HTML είναι ένα ζεύγος ετικετών και . Η ιστοσελίδα περιλαμβάνει δοχεία που είναι υπεύθυνα για τον τίτλο του εγγράφου (κεφαλίδα) και περιέχουν πρόσθετες πληροφορίες, καθώς και δοχεία που είναι υπεύθυνα για το ίδιο το περιεχόμενο του εγγράφου (σώμα). Παρουσιάζονται στο σχήμα.

Έτσι, το έγγραφο HTML περιέχεται σε ένα κοντέινερ, η κεφαλίδα περιέχεται σε ένα κοντέινερ και το περιεχόμενο του εγγράφου περιέχεται σε ένα κοντέινερ. Το κοντέινερ, που βρίσκεται στην κεφαλίδα (κοντέινερ), περιέχει το κείμενο που εμφανίζεται στην επάνω γραμμή του παραθύρου του προγράμματος περιήγησης. Στο κοντέινερ κεφαλίδας μπορούν επίσης να προστεθούν ετικέτες που περιέχουν κωδικοποίηση, λέξεις-κλειδιά ιστοσελίδων, καθώς και κώδικα για τη σύνδεση αρχείων φύλλων στυλ CSS, javascript, VBScript κ.λπ.

Ένα παράδειγμα απλής σελίδας HTML που περιέχει μόνο βασικές ετικέτες:

Τίτλος σελίδας Περιεχόμενα μιας απλής σελίδας

Το αποτέλεσμα αυτού του κωδικού φαίνεται στο σχήμα.

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

Για να αλλάξετε τη γραμματοσειρά, το χρώμα και το μέγεθός της, χρησιμοποιήστε μια ετικέτα με τις παραμέτρους "face", "color" και "size". Για παράδειγμα, για να ορίσετε τη γραμματοσειρά "arial" σε κόκκινο χρώμα και μέγεθος 14, πρέπει να γράψετε τον ακόλουθο κώδικα:

Μορφοποιήστε το κείμενο

Για να επισημάνετε μια παράγραφο στο κείμενο, χρησιμοποιήστε μια ετικέτα

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

Containers , και χρησιμοποιούνται για τη δημιουργία λιστών στο σώμα του εγγράφου. Επιπλέον, η ετικέτα σχηματίζει μια αριθμημένη λίστα, την ετικέτα

Προτείνουμε άλλα άρθρα
Πώς λειτουργεί η εξόρυξη κρυπτονομισμάτων Διαδικασία εξόρυξης κρυπτονομισμάτων
Πώς λειτουργεί η εξόρυξη κρυπτονομισμάτων Διαδικασία εξόρυξης κρυπτονομισμάτων
Σύνοψη ενός μαθήματος στο νηπιαγωγείο
Σύνοψη ενός μαθήματος στο νηπιαγωγείο "Ο προγραμματιστής είναι ένας μεγάλος μάγος"
Πώς να περάσετε την επαλήθευση όταν συνδέεστε στον λογαριασμό σας στο Aliexpress;
Πώς να περάσετε την επαλήθευση όταν συνδέεστε στον λογαριασμό σας στο Aliexpress;