Ετικέτες που ορίζουν την παράγραφο, το διάστημα, το μπλοκ HTML και την παράγραφο

Ας το δούμε αναλυτικά Μπλοκ και παράγραφοι HTMLως στοιχεία μιας ιστοσελίδας.

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

  -

  , μπλοκ
  και άλλες παραγράφους.
• μπλοκ HTMLορίζεται από ετικέτες
  .
• μπλοκ HTMLμπορεί να περιέχει οποιαδήποτε στοιχεία μιας ιστοσελίδας, σε οποιαδήποτε ποσότητα.
• μπλοκ HTMLΙδανικό για ιστοσελίδες και εύκολο στη χρήση.

Σκεφτείτε τον παρακάτω κώδικα:

Αποτέλεσμα:

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

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

Οι ετικέτες δεν μπορούν να περιέχουν άλλα ή

.

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

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

Φραγμός μπορεί να περιέχει όσα θέλετε και άλλα στοιχεία HTML

έγγραφο. Είναι ιδανικό για διάταξη, αλλά περισσότερα για αυτό αργότερα - στα εκπαιδευτικά μαθήματα CSS.

Χώρος HTML από τον πίνακα ειδικών χαρακτήρωνΧώρος HTML

σας επιτρέπει να αυξήσετε την απόσταση μεταξύ λέξεων και χαρακτήρων.< >Όσον αφορά τα κενά μεταξύ των λέξεων, όσα κι αν υπάρχουν στο Σημειωματάριο, δηλαδή στον πηγαίο κώδικα, μόνο μία θα εμφανίζεται στην ιστοσελίδα. Εάν πρέπει να αυξήσετε την απόσταση, χρησιμοποιήστε τον χαρακτήρα διαστήματος από τον πίνακα συμβόλων. Ίσως ρωτήσετε: Γιατί χρειάζονται αυτές οι κωδικοποιημένες έννοιες των συνηθισμένων χαρακτήρων; - Θα απαντήσω: Χρειάζονται για να εμφανιστούν, για παράδειγμα, τέτοιες αγκύλες . Με άλλα λόγια, για να εμφανίσω ετικέτες στην οθόνη, στον επεξεργαστή μου γράφω: . Ετικέτες

, όπως θυμόμαστε, μετατρέψτε το κείμενο σε μονοδιάστατο (δακτυλόγραφο).

Τρόποι εμφάνισης παραγράφου HTML

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

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

Ακολουθεί ένα παράδειγμα κώδικα εργασίας για τη ρύθμιση της εσοχής για κείμενο χρησιμοποιώντας τον κώδικα διαστήματος:

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

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

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

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

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

Μια λύση σε αυτό το πρόβλημα είναι η ακόλουθη μέθοδος ρύθμισης της εσοχής.

Εσοχή κειμένου HTML, μέθοδος δύο - αυτή η μέθοδος βασίζεται στις ιδιότητες της ετικέτας blockquote. Αυτή η ετικέτα ορίζει μια εσοχή περίπου 40 pixel αριστερά και δεξιά για το κείμενο που τοποθετείται σε αυτήν. Επιπλέον, η εσοχή καθορίζεται στο επάνω και στο κάτω μέρος. Ένα παράδειγμα κώδικα html για τη χρήση αυτής της μεθόδου δίνεται παρακάτω:

στα αριστερά, χρησιμοποιήστε την ετικέτα μπλοκ

Όπως μπορείτε να δείτε, αυτή η μέθοδος ρύθμισης εσοχής για κείμενο είναι πολύ εύκολη στη χρήση, αλλά αυτή η μέθοδος έχει επίσης ένα σημαντικό μειονέκτημα. Η εσοχή που ορίζει η ετικέτα μπλοκείναι σταθερό και ισούται πάντα με την ίδια τιμή – 40 px.

Για να διορθώσετε την κατάσταση και κατά την προσθήκη html εσοχήκαι για κείμενογια να μπορέσουμε να ορίσουμε οποιαδήποτε τιμή, θα χρησιμοποιήσουμε την τρίτη μέθοδο.

Εσοχή κειμένου HTML, μέθοδος τρίτη.

Εδώ θα χρησιμοποιήσουμε την ιδιότητα εσοχής κειμένου των CSS Cascading Style Sheets.

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

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

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

και άλλα στοιχείαοδόντωσηκείμενο, λειτουργεί το στυλ CSS - κείμενο-εσοχή

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

Εσοχή κειμένου HTML, τέταρτη μέθοδος - εδώ θα χρησιμοποιήσουμε μια εικόνα για να ορίσουμε την εσοχή.

Ως παράδειγμα εργασίας, ας δούμε αμέσως τον κώδικα html που δείχνει πώς λειτουργεί αυτή η μέθοδος:

στα αριστερά, χρησιμοποιήστε την εικόνα

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

Ως εικόνα, μπορείτε να χρησιμοποιήσετε μια εικόνα της οποίας το πλάτος και το ύψος είναι ίσα με ένα pixel. Για να μην είναι ορατή η εικόνα που χρησιμοποιούμε στη σελίδα, θα ορίσουμε το χρώμα της ακριβώς ίδιο με το φόντο της σελίδας του ιστότοπου.

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

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

Η σύνταξη για τη δημιουργία παραγράφων είναι η εξής.

Παράγραφος 1

Παράγραφος 2

Κάθε παράγραφος αρχίζει με μια ετικέτα

.

Και τελειώνει με μια προαιρετική ετικέτα κλεισίματος

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

Το Παράδειγμα 7.1 δείχνει τη χρήση παραγράφων για τη δημιουργία εσοχών μεταξύ των γραμμών.

Χρήση παραγράφων

Σε ορισμένα μέρη είναι ακόμα Φεβρουάριος, σε άλλα είναι ήδη Απρίλιος.

Ο χρόνος περνά, αιώνια μέτρηση: χρόνο με τον χρόνο, αιώνα με τον αιώνα...

Σε όλα - τον αβίαστο ρυθμό του, το κατάμαυρο τρέξιμό του.

Υπάρχουν είκοσι πέντε εβδομάδες χαράς και λύπης σε ένα χρόνο.

Είμαι είκοσι πέντε εβδομάδες στον Φεβρουάριο και είκοσι πέντε εβδομάδες στον Απρίλιο.

Για είκοσι πέντε εβδομάδες, αιώνες περνούν στην ομίχλη.

Η ηχηρή μου φάρσα πετάει κάπου προς τα σύννεφα.

Μ. Στσερμπάκοφ

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 7.1.

Όπως φαίνεται από το σχήμα, όταν χρησιμοποιείτε την ετικέτα

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

Έτσι, το κείμενο του παραδείγματος 7.1, λαμβάνοντας υπόψη τις αλλαγές γραμμής, θα μετασχηματιστεί ως εξής (παράδειγμα 7.2).

Παράδειγμα 7.2. Ετικέτα

Σε ορισμένους κήπους ανθίζουν αμυγδαλιές, ενώ σε άλλους πνέουν χιονοθύελλες.
Σε ορισμένα μέρη είναι ακόμα Φεβρουάριος, σε άλλα είναι ήδη Απρίλιος.
Ο χρόνος περνά, αιώνια μέτρηση: χρόνο με τον χρόνο, αιώνα με τον αιώνα...
Σε όλα - τον αβίαστο ρυθμό του, το κατάμαυρο τρέξιμό του.
Υπάρχουν είκοσι πέντε εβδομάδες χαράς και λύπης σε ένα χρόνο.
Είμαι είκοσι πέντε εβδομάδες στον Φεβρουάριο και είκοσι πέντε εβδομάδες στον Απρίλιο.
Για είκοσι πέντε εβδομάδες, αιώνες περνούν στην ομίχλη.
Η ηχηρή μου φάρσα πετάει κάπου προς τα σύννεφα.

Η ηχηρή μου φάρσα πετάει κάπου προς τα σύννεφα.

Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 7.2. Φαίνεται ότι η απόσταση μεταξύ των γραμμών του κειμένου έχει μειωθεί και έχει αποκτήσει πιο συμπαγή εμφάνιση.

λίστες εικόνες σύνδεσμοι πίνακες φόρμες βίντεο ήχου Αναφορά HTML Αναφορά CSS Διάταξη ιστότοπου

Εισαγάγαμε εν μέρει τον τίτλο της σελίδας H1 και την παράγραφο P στο πρώτο μάθημα σχετικά με τη δομή ενός εγγράφου HTML. Τώρα ας δούμε τις λογικές ετικέτες σήμανσης: επικεφαλίδες, παραγράφους, λίστες, ορατά στοιχεία του στοιχείου Body και ετικέτες φυσικής μορφοποίησης με περισσότερες λεπτομέρειες. Για να το κάνετε αυτό, ας αλλάξουμε ελαφρώς τη σελίδα του παραδείγματος μας ή ας την πληκτρολογήσουμε ξανά:

Στη σελίδα html εκπαίδευσης προσθέσαμε (σημειωμένη με βέλη, μία φορά): μια επικεφαλίδα 2ου επιπέδου - μια ετικέτα H2, δύο επικεφαλίδες 3ου επιπέδου - μια ετικέτα H3, μια άλλη παράγραφο - μια ετικέτα P, μια λίστα με κουκκίδες - Ul και πολλές ετικέτες φυσικής μορφοποίησης . Ας ανοίξουμε τη σελίδα στο πρόγραμμα περιήγησης:

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

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

Ετικέτες φυσικής μορφοποίησης

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

Τώρα ας δώσουμε προσοχή στη λέξη «σώμα» στη δεύτερη παράγραφο, που περικλείεται σε μια ζευγαρωμένη ετικέτα B, που κάνει τη λέξη έντονη. Και η φράση "μορφοποίηση κειμένου" εμφανίζεται με πλάγιους χαρακτήρες - αυτό επιτυγχάνεται χρησιμοποιώντας την ετικέτα I Η ετικέτα U ορίζει την υπογράμμιση (δεν υπάρχει στο παράδειγμά μας).

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

Ακολουθούν μερικές ακόμη ετικέτες φυσικής μορφοποίησης κειμένου: Q - Επισημαίνει ένα απόσπασμα σε μια γραμμή. Στοιχείο μπλοκ εισαγωγικού - αυτή η ετικέτα μπορεί να περιέχει πολλές παραγράφους.

Η ετικέτα Κώδικας χρησιμοποιείται για τη σήμανση θραυσμάτων κώδικα, πρέπει να χρησιμοποιείται με σπασίματα γραμμής Br και κενά χωρίς διακοπή: χρησιμοποιούνται ειδικά σύμβολα για να τα υποδηλώσουν. σύμβολο (πρώτος χαρακτήρας - σύμφωνο: πλήκτρο 7 με πατημένο το Shift στην αγγλική διάταξη). Αλλά η ετικέτα Pre εμφανίζει τον κώδικα του προγράμματος όπως είναι, με κενά και όσες γραμμές υπάρχουν στον κώδικα.

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

Δημιουργία λιστών html

Απομένει να εξετάσουμε τη δημιουργία λιστών, έχουμε την επισήμανση και τον καθορισμό από τη ζευγαρωμένη ετικέτα Ul και τα στοιχεία ή τα στοιχεία της από την ετικέτα Li (1ο στιγμιότυπο οθόνης). Χρησιμοποιώντας το χαρακτηριστικό type, και για τις ετικέτες Ul και Li, μπορούμε να αλλάξουμε τον τύπο του δείκτη. Από προεπιλογή, δηλ. εάν το χαρακτηριστικό δεν έχει καθοριστεί, η τιμή του είναι "δίσκος" - ένας κύκλος. Μπορείτε να ορίσετε το χαρακτηριστικό τύπου με την τιμή "κύκλος" - κύκλος. Ή όπως αυτό:

- θα πάρουμε μια λίστα με τετράγωνους δείκτες.

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

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



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

Παράγραφοι και επικεφαλίδες

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

Ετικέτα

Ή σπάμε τη σελίδα σε παραγράφους (παραγράφους)

Αν θυμάστε, τότε με την ετικέτα

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

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

Τώρα το πιο σημαντικό πράγμα είναι η ετικέτα

Μπορεί να περιέχει μόνο στοιχεία σε επίπεδο γραμμής (ενσωματωμένα) και τίποτα άλλο. Επομένως, για παράδειγμα, δεν μπορεί να περιέχει άλλη παράγραφο, αφού η ίδια

Είναι ένα στοιχείο μπλοκ. Λοιπόν, θα επιστρέψουμε σε αυτό περισσότερες από μία φορές. Παρεμπιπτόντως, οποιοδήποτε κείμενο χωρίς ετικέτες θεωρείται επίσης ενσωματωμένο στοιχείο.

Παράδειγμα παραγράφων σε HTML

Πρώτη παράγραφος.

Δεύτερη παράγραφος.





Αποτέλεσμα στο πρόγραμμα περιήγησης

Πρώτη παράγραφος.

Δεύτερη παράγραφος.

Γενικά, η ετικέτα κλεισίματος

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

Στην ετικέτα

Υπάρχει ένα προαιρετικό χαρακτηριστικό, το align , το οποίο ορίζει τη θέση του κειμένου μέσα στο μπλοκ. Δηλαδή, μπορείτε να έχετε κάθε γραμμή μιας παραγράφου κεντραρισμένη στη σελίδα ή να πατάτε στη δεξιά πλευρά και όχι στην αριστερή, όπως συνήθως. Το μόνο πρόβλημα είναι ότι το χαρακτηριστικό align δεν βρίσκεται στην αυστηρή έκδοση του HTML και, ίσως, τα σύγχρονα προγράμματα περιήγησης δεν θα το υποστηρίζουν πλέον στο εγγύς μέλλον. Τι πρέπει να κάνουμε λοιπόν; Και θα κάνουμε το εξής: σε ένα από τα προσεχή μαθήματα θα σας δείξω μια καθολική μέθοδο με την οποία μπορείτε να αλλάξετε τη θέση του περιεχομένου όχι μόνο μέσα στις παραγράφους, αλλά και μέσα σε τυχόν μπλοκ στοιχεία μιας σελίδας HTML (επικεφαλίδες, πίνακες, λίστες , κλπ.). Το κυριότερο όμως είναι ότι όλα τα προγράμματα περιήγησης το καταλαβαίνουν και θα το καταλάβουν.

Ετικέτες

-

ή κεφαλίδες σελίδας HTML

Οι επικεφαλίδες παίζουν πολύ σημαντικό ρόλο στην HTML, χρησιμοποιώντας τους, μπορείτε να διαιρέσετε το κείμενο μιας σελίδας σε λογικά μέρη, δίνοντας έμφαση στη σημασία του καθενός, γεγονός που επιτρέπει στους επισκέπτες να βρίσκουν γρήγορα τις πληροφορίες που χρειάζονται. Επιπλέον, οι μηχανές αναζήτησης (Yandex, Google κ.λπ.) δίνουν μεγαλύτερη «βαρύτητα» στο κείμενο στις επικεφαλίδες. Υπάρχουν έξι τύποι, όπου

η πιο σημαντική επικεφαλίδα (πρώτο επίπεδο, κορυφή) και

λιγότερο σημαντικό (έκτο επίπεδο, χαμηλότερο). Για παράδειγμα,

θα μπορούσε να είναι ο τίτλος της σελίδας,

- τα τμήματα του,

- υποενότητες κ.λπ.

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

Σύνταξη για τη σύνταξη κεφαλίδων σε HTML

Κεφαλίδα πρώτου επιπέδου

Επικεφαλίδα δεύτερου επιπέδου

Επικεφαλίδα τρίτου επιπέδου

Επικεφαλίδα τέταρτου επιπέδου

Επικεφαλίδα επιπέδου 5

Επικεφαλίδα επιπέδου έξι

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

Παράδειγμα χρήσης κεφαλίδων σε HTML

Κεφαλίδα πρώτου επιπέδου

Παράγραφος.

Επικεφαλίδα δεύτερου επιπέδου

Παράγραφος.

Παράγραφος.





Αποτέλεσμα στο πρόγραμμα περιήγησης

Κεφαλίδα πρώτου επιπέδου

Παράγραφος.

Επικεφαλίδα δεύτερου επιπέδου

Παράγραφος.

Παράγραφος.

Σχολική εργασία στο σπίτι.

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

1. Ανοίξτε τη σελίδα από το προηγούμενο μάθημα σε ένα πρόγραμμα επεξεργασίας HTML.
2. Χρήση επικεφαλίδων

   ,

   Και

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

3. Βεβαιωθείτε ότι όταν τοποθετείτε το ποντίκι σας πάνω από τον τίτλο ενός άρθρου, εμφανίζεται η αντίστοιχη επιγραφή.
4. Γράψτε μια παράγραφο για κάθε ενότητα και υποενότητα.