Εκμάθηση HTML Μέρος 4: Πώς να κάνετε έναν τίτλο (Επικεφαλίδα) σε HTML
Αυτή τη φορά θα εξηγήσω πώςκάντε τίτλους σε HTML. Κατά τη δημιουργία ενός εγγράφου HTML, συνιστάται να προσθέσετε επικεφαλίδες στο έγγραφο. Η επικεφαλίδα είναι μια συλλογή φράσεων ή λέξεων που γίνονται τίτλος ή υπότιτλος σε ένα έγγραφο HTML.
Η παροχή ενός τίτλου είναι ασφαλώς πολύ αναγκαίαπαρέχει μια επισκόπηση του λόγου ή του άρθρου στο έγγραφο HTML. Οι τίτλοι δεν είναι τίτλοι (τίτλοι σε ένα έγγραφο HTML) που εμφανίζονται ως τίτλοι εγγράφων HTML στη γραμμή τίτλου, αλλά τίτλοι εμφανίζονται στα περιεχόμενα του εγγράφου ως τίτλος ενός λόγου ή κειμένου.
Το HTML παρέχει τίτλους 6 επιπέδων διαφορετικών μεγεθών. Η χρήση της ετικέτας τίτλου αρχίζει με την ετικέτα <Hx> και τέλος με μια ετικέτα </ Hx> όπου x είναι ο αριθμός επιπέδου κλάσης από 1 έως 6 όπουόσο μεγαλύτερη είναι η τιμή του x, τόσο μικρότερο είναι το μέγεθος της επικεφαλίδας. Ωστόσο, όσο μικρότερη είναι η τιμή του x, τόσο υψηλότερο είναι το επίπεδο σπουδαιότητας ενός τίτλου με άλλα λόγια το h1 έχει μια πιο σημαντική θέση από το h6 και ούτω καθεξής.
Λοιπόν, στην επικεφαλίδα, το συνοδευτικό χαρακτηριστικό είναι ALIGN η οποία επιτρέπει την προβολή των επικεφαλίδων επίπεδη, αριστερή ή κεντρική. Ακολουθεί ο πίνακας τιμών χαρακτηριστικών ALIGN στην επικεφαλίδα:
| Τιμή | Λειτουργία |
| Αριστερά | Για να ευθυγραμμίσετε την επικεφαλίδα προς τα αριστερά |
| Ακριβώς | Για να ευθυγραμμίσετε την κατεύθυνση προς τα δεξιά |
| Κέντρο | Για να ευθυγραμμίσετε την επικεφαλίδα με τη μέση |
Για περισσότερες λεπτομέρειες, εδώ είναι ο κωδικός για τη χρήση τίτλων:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Headings Di HTML</title>
</head>
<body>
<h1 align="left"> Heading 1</h1>
<h2 align="left"> Heading 2</h2>
<h3 align="left"> Heading 3</h3>
<h4 align="left"> Heading 4</h4>
<h5 align="left"> Heading 5</h5>
<h6 align="left"> Heading 6</h6>
</body>
</html>Αφού εκτελέσετε τον παραπάνω κώδικα HTML, τα αποτελέσματα θα μοιάζουν με την παρακάτω εικόνα:
Η παραπάνω εικόνα δείχνει ξεκάθαρα τη διαφορά στο μέγεθος κάθε τίτλου από το 1-6. Στη συνέχεια, το πράγμα που πρέπει να θυμόμαστε είναι η χρήση των χαρακτηριστικών ευθυγραμμίστε η επικεφαλίδα δεν υποστηρίζεται από το HTML5 επειδή έχει αντικατασταθεί με τη χρήση του CSS. Ακολουθούν οι προεπιλεγμένες τιμές από h1 έως h6 σε CSS που εμφανίζονται γενικά από το πρόγραμμα περιήγησης:
| H1 | Η2 | H3 |
| εμφάνιση: μπλοκ? μέγεθος γραμματοσειράς: 2em; ανώτατο όριο περιθωρίου: 0.67em; περιθώριο-κάτω: 0.67em; περιθώριο-αριστερά: 0; περιθώριο-δεξιά: 0; γραμματοσειρά-βάρος: έντονα. |
εμφάνιση: μπλοκ? μέγεθος γραμματοσειράς: 1.5em; ανώτατο όριο περιθωρίου: 0.83εμ. περιθώριο-κάτω: 0.83em; περιθώριο-αριστερά: 0; περιθώριο-δεξιά: 0; γραμματοσειρά-βάρος: έντονα. |
εμφάνιση: μπλοκ? μέγεθος γραμματοσειράς: 1.17em; περιθώριο: 1em; περιθώριο-κάτω: 1em; περιθώριο-αριστερά: 0; περιθώριο-δεξιά: 0; γραμματοσειρά-βάρος: έντονα. |
| H4 | H5 | H6 |
| εμφάνιση: μπλοκ? μέγεθος γραμματοσειράς: 1em; περιθώριο-κορυφή: 1.33em; περιθώριο-κάτω: 1,33em; περιθώριο-αριστερά: 0; περιθώριο-δεξιά: 0; γραμματοσειρά-βάρος: έντονα. |
εμφάνιση: μπλοκ? μέγεθος γραμματοσειράς: .83em; περιθώριο-κορυφή: 1.67em; περιθώριο-κάτω: 1,67em; περιθώριο-αριστερά: 0; περιθώριο-δεξιά: 0; γραμματοσειρά-βάρος: έντονα. |
εμφάνιση: μπλοκ? μέγεθος γραμματοσειράς: .67em; ανώτατο όριο περιθωρίου: 2.33εκ. περιθώριο-κάτω: 2,33. περιθώριο-αριστερά: 0; περιθώριο-δεξιά: 0; γραμματοσειρά-βάρος: έντονα. |
Οριζόντια γραμμή διαίρεσης (ετικέτα <hr>)
Στη συνέχεια ακολουθεί η χρήση της ετικέτας <hr>. Μπορείτε να χρησιμοποιήσετε την ετικέτα <hr> για να δημιουργήσετε οριζόντιες γραμμές διαίρεσης σε έγγραφα HTML. Η ετικέτα <hr> από προεπιλογή θα δημιουργεί γραμμές κατά μήκος του παραθύρου του προγράμματος περιήγησης. Στην ετικέτα <hr> υπάρχουν επίσης αρκετά χαρακτηριστικά:
| Χαρακτηριστικό | Λειτουργία |
| Ευθυγραμμίστε | Για γραμμές ευθυγράμμισης, επίπεδες, μεσαίες ή δεξιά |
| Μέγεθος | Ορίστε το πάχος της γραμμής στην τιμή pixel |
| Noshade | Εμφανίζει γραμμές χωρίς τρισδιάστατες σκιές |
| Χρώμα | Δώστε χρώμα στις γραμμές |
| Πλάτος | Ορίστε το πλάτος της γραμμής με τιμές pixel ή τοις εκατό |
Το παρακάτω είναι ένα παράδειγμα χρήσης της ετικέτας <hr>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Garis Pemisah Horizontal Di HTML</title>
</head>
<body>
<h1 align="left"> Heading 1</h1>
<hr color="green" width="20%" size=3 align="left" >
<h4 align="left"> Heading 4</h4>
</body>
</html>Στη συνέχεια τα αποτελέσματα θα μοιάζουν με τα παρακάτω, αφού εμφανιστούν στο πρόγραμμα περιήγησης:
Στη ρύθμιση πλάτους της ετικέτας <hr>, μπορείτεχρησιμοποιώντας px ή τοις εκατό (%). Στο παραπάνω παράδειγμα, χρησιμοποιώ τοις εκατό (%) με άλλα λόγια το πλάτος είναι 20% του πλάτους του παραθύρου του προγράμματος περιήγησης. Έτσι, αν το κάνετε 100%, η ετικέτα <hr> θα είναι τόσο μεγάλη όσο το παράθυρο του προγράμματος περιήγησής σας.
Στη συνέχεια, τα χαρακτηριστικά στην ετικέτα <hr> είναιδεν αναφέρθηκε παραπάνω από το HTML5 επειδή η λειτουργία του έχει αντικατασταθεί με τη χρήση CSS. Επίσης, στο HTML 4.01, η ετικέτα <hr> ορίζεται ως οριζόντια γραμμή, αλλά στο HTML5 ορίζεται ως θεματικό διάλειμμα όπως αλλαγή στο θέμα του λόγου, αλλαγές στη γραμμή ιστορίας και ούτω καθεξής.
Στο επόμενο άρθρο που μπορεί να συναντήσετεμε ορισμένες ετικέτες HTML που δεν υποστηρίζονται από HTML5. Ακόμα κι έτσι, θα το εξηγήσω ακόμα ώστε να γνωρίζετε για τη λειτουργία αυτών των ετικετών. Στη συνέχεια θα μάθουμε πώς να κάνουμε παραγράφους σε HTML.
