Πώς να προσθέσετε μια οριζόντια γραμμή σε HTML

Βίντεο: Teach yourself HTML - Programming with Boris

Περιεχόμενο

Βήματα
Μέθοδος 1 από 2: Εργασία σε HTML 4.01
Μέθοδος 2 από 2: Εργασία σε CSS / HTML5

Αυτό το άρθρο θα σας δείξει πώς να προσθέσετε μια οριζόντια γραμμή σε HTML. Η οριζόντια γραμμή μπορεί να χρησιμοποιηθεί για τον διαχωρισμό του περιεχομένου στον ιστότοπο. Ο κώδικας για τη δημιουργία της γραμμής είναι αρκετά απλός. Ωστόσο, στο HTML 4.01, είναι δυνατό να αλλάξετε το σχέδιο μιας γραμμής χρησιμοποιώντας εσωτερικές εντολές. Στο HTML5, θα πρέπει να χρησιμοποιήσετε CSS για να στυλ της γραμμής.

Βήματα

Μέθοδος 1 από 2: Εργασία σε HTML 4.01

1 Ανοίξτε ένα υπάρχον ή δημιουργήστε ένα νέο έγγραφο HTML. Τα έγγραφα HTML μπορούν να επεξεργαστούν με έναν επεξεργαστή κειμένου όπως το Σημειωματάριο ή με έναν εξειδικευμένο επεξεργαστή κώδικα όπως το Adobe Dreamweaver. Ακολουθήστε αυτά τα βήματα για να ανοίξετε ένα έγγραφο HTML στο πρόγραμμα της επιλογής σας:
- Ανοίξτε το Σημειωματάριο ή άλλο πρόγραμμα επεξεργασίας κειμένου / κώδικα.
- Ανοίξτε το μενού Αρχείο.
- Κάντε κλικ στο Ανοιξε.
- Επιλέξτε το αρχείο HTML.
- Κάντε κλικ στο Ανοιξε
2 Επιλέξτε τη θέση όπου θέλετε να εισαγάγετε τη γραμμή. Κάντε κύλιση προς τα κάτω μέχρι να βρείτε τη γραμμή πάνω από την οποία πρέπει να εμφανίζεται η γραμμή και, στη συνέχεια, μετακινήστε τον κέρσορα απευθείας στην αρχή αυτής της γραμμής κάνοντας κλικ στα αριστερά της γραμμής.
3 Προσθέστε μια κενή γραμμή. Διπλό χτύπημα Εισαγάγετεγια να μετακινήσετε το κείμενο πριν από το οποίο θέλετε να εισαγάγετε μια γραμμή και, στη συνέχεια, τοποθετήστε τον κέρσορα σε μια κενή γραμμή.
4 Προσθήκη ετικέτας hr>. Εισαγω ωρ> στον κενό χώρο στην αρχή της γραμμής. Ετικέτα ωρ> σας επιτρέπει να σχεδιάσετε μια οριζόντια γραμμή σε ολόκληρη τη σελίδα.
5 Μετακινήστε τον κέρσορα μετά την ετικέτα "hr" σε μια νέα γραμμή πατώντας Εισαγάγετε. Τώρα η ετικέτα ωρ> πρέπει να είναι σε ξεχωριστή γραμμή.
6 Προσθέστε χαρακτηριστικά στην οριζόντια γραμμή (προαιρετικά). Προσθέστε χαρακτηριστικά όπως μήκος, πάχος, χρώμα και ευθυγράμμιση. Περάστε τα σε σγουρά σιδεράκια αμέσως μετά το "hr". Για να προσθέσετε πολλά χαρακτηριστικά, διαχωρίστε τα με ένα κενό.
- Εισαγω hr size = "#">για να αλλάξετε το πάχος της γραμμής. Αντικαταστήστε το "#" με μια αριθμητική τιμή πάχους (για παράδειγμα, μέγεθος = "10").
- Εισαγω hr πλάτος = "#">για να αλλάξετε το πλάτος της γραμμής. Αντικαταστήστε το "#" με τον αριθμό των pixel ή ένα ποσοστό του πλάτους της σελίδας (για παράδειγμα, width = "200" ή width = "75%").
- Εισαγω hr color = "#">για να αλλάξετε το χρώμα της γραμμής. Αντικαταστήστε το "#" με το όνομα του χρώματος ή τον δεκαεξαδικό του κωδικό (για παράδειγμα, χρώμα = "κόκκινο" ή χρώμα = "# FF0000").
- Εισαγω hr align = "#">για ευθυγράμμιση της γραμμής. Αντικαταστήστε το "#" με "δεξιά" (δεξιά), "αριστερά" (αριστερά) ή "κέντρο" (κέντρο) (για παράδειγμα, hr width = "50%" align = "center">).
7 Αποθηκεύστε το αρχείο HTML. Για να αποθηκεύσετε ένα αρχείο κειμένου ως έγγραφο HTML, πρέπει να αλλάξετε την επέκταση αρχείου (.txt, .docx) σε ".html". Ακολουθήστε αυτά τα βήματα για να αποθηκεύσετε το έγγραφο HTML:
- Ανοίξτε το μενού Αρχείο.
- Κάντε κλικ στο Αποθήκευση ως.
- Εισαγάγετε ένα όνομα για το αρχείο στο πεδίο Όνομα αρχείου.
- Προσθήκη .html μετά το όνομα του αρχείου.
- Κάντε κλικ στο Σώσει.
8 Ελέγξτε το έγγραφο HTML. Για να ελέγξετε το αρχείο HTML, κάντε δεξί κλικ σε αυτό και επιλέξτε Άνοιγμα με. Στη συνέχεια, επιλέξτε το πρόγραμμα περιήγησης ιστού. Θα πρέπει να εμφανιστεί μια σταθερή γραμμή όπου εισαγάγατε την ετικέτα "hr". Ο κώδικας HTML θα μοιάζει κάπως έτσι:

Μέθοδος 2 από 2: Εργασία σε CSS / HTML5

1 Ανοίξτε ένα υπάρχον ή δημιουργήστε ένα νέο έγγραφο HTML. Τα έγγραφα HTML μπορούν να επεξεργαστούν με έναν επεξεργαστή κειμένου όπως το Σημειωματάριο ή με έναν εξειδικευμένο επεξεργαστή κώδικα όπως το Adobe Dreamweaver. Ακολουθήστε αυτά τα βήματα για να ανοίξετε ένα έγγραφο HTML στο πρόγραμμα της επιλογής σας:
- Ανοίξτε το Σημειωματάριο ή άλλο πρόγραμμα επεξεργασίας κειμένου / κώδικα.
- Ανοίξτε το μενού Αρχείο.
- Κάντε κλικ στο Ανοιξε.
- Επιλέξτε το αρχείο HTML.
- Κάντε κλικ στο Ανοιξε
2 Προσθέστε έναν τίτλο στο έγγραφο HTML σας. Εάν το έγγραφο HTML δεν έχει ήδη επικεφαλίδα, ακολουθήστε αυτά τα βήματα για να προσθέσετε ένα. Η επικεφαλίδα πρέπει να ακολουθεί την ετικέτα html> και πριν από την ετικέτα σώματος>.
- Εισαγω κεφάλι> στην κορυφή του εγγράφου.
- Διπλό χτύπημα Εισαγάγετεγια να προσθέσετε δύο νέες γραμμές.
- Εισαγω / head>για να κλείσει ο τίτλος.
3 Εισαγω style type = "text / css"> μέσα στην κεφαλίδα. Η ετικέτα στυλ τοποθετείται μεταξύ των δύο ετικετών επικεφαλίδας για να δημιουργήσετε ένα μέρος όπου μπορείτε να χρησιμοποιήσετε το CSS για να τροποποιήσετε το σχέδιο HTML.
- Εναλλακτικά, μπορείτε να χρησιμοποιήσετε ένα εξωτερικό φύλλο στυλ. Διάβασε το άρθρο "Πώς να εισαγάγετε ένα αρχείο CSS σε HTML»Για να μάθετε πώς να συνδέετε ένα εξωτερικό αρχείο CSS με ένα αρχείο HTML.
4 Εισαγω ωρ {. Αυτή είναι η ετικέτα CSS για τη διαμόρφωση της οριζόντιας γραμμής. Προσθέστε το μετά την ετικέτα "στυλ" στην κεφαλίδα ή στο εξωτερικό αρχείο CSS.
5 Προσθέστε στυλ CSS για την ετικέτα hr>. Πρέπει να έρχονται μετά την ετικέτα "hr {". Μια οριζόντια γραμμή μπορεί να διαμορφωθεί με διάφορους τρόπους. Παρακάτω είναι μερικά από αυτά.
- Εισαγω πλάτος: ## px;για να ρυθμίσετε το πλάτος της γραμμής. Αντικαταστήστε το "##" με το πλάτος γραμμής σε εικονοστοιχεία. Αντί για pixel (px), μπορείτε να χρησιμοποιήσετε ένα ποσοστό (%).
- Εισαγω ύψος: ## px;για να ρυθμίσετε το βάρος της γραμμής. Αντικαταστήστε το "##" με το πλάτος γραμμής σε εικονοστοιχεία.
- Εισαγω χρώμα του φόντου: ##;για να καθορίσετε το χρώμα της γραμμής. Αντικαταστήστε το "##" με ένα όνομα χρώματος ή κατακερματισμό (#) ακολουθούμενο από έναν δεκαεξαδικό κωδικό χρώματος.
- Εισαγω margin-right: ## px;για να καθορίσετε τον αριθμό των εικονοστοιχείων από τη δεξιά άκρη. Αντικαταστήστε το "##" με έναν αριθμητικό αριθμό pixel ή τον κωδικό "auto". Εισαγάγετε "auto" για να ευθυγραμμίσετε τη γραμμή προς τα αριστερά ή το κέντρο.
- Εισαγω περιθώριο-αριστερά: ## px;για να καθορίσετε τον αριθμό των εικονοστοιχείων από το αριστερό άκρο. Αντικαταστήστε το "##" με έναν αριθμητικό αριθμό pixel ή τον κωδικό "auto". Εισαγάγετε "auto" για να ευθυγραμμίσετε τη γραμμή προς τα δεξιά ή στο κέντρο.
- Εισαγω margin-top: ## px; για να καθορίσετε την επάνω επένδυση για τη γραμμή. Αντικαταστήστε το "##" με έναν αριθμό που αντιστοιχεί στην επένδυση σε εικονοστοιχεία.
- Εισαγω margin-bottom: ## px;για να καθορίσετε την κάτω επένδυση για τη γραμμή. Αντικαταστήστε το "##" με έναν αριθμό που αντιστοιχεί στην επένδυση σε εικονοστοιχεία.
- Εισαγω περιθώριο-πλάτος: ## px;για να σχεδιάσετε ένα πλαίσιο γύρω από τη γραμμή (προαιρετικό). Αντικαταστήστε το "##" με έναν αριθμό που αντιστοιχεί στο πλάτος του περιγράμματος σε εικονοστοιχεία.
- Εισαγω χρώμα πλαισίου: ##;για να καθορίσετε το χρώμα του περιγράμματος (προαιρετικό). Αντικαταστήστε το "##" με ένα όνομα χρώματος ή κατακερματισμό (#) ακολουθούμενο από έναν δεκαεξαδικό κωδικό χρώματος.
6 Εισαγω } μετά τα χαρακτηριστικά στυλ για να ολοκληρώσετε το στυλ για την ετικέτα hr>.
7 Εισαγω ωρ> οπουδήποτε στο σώμα του εγγράφου HTML για να προσθέσετε μια οριζόντια γραμμή. Οι ρυθμίσεις στυλ CSS θα εφαρμόζονται κάθε φορά που χρησιμοποιείτε την ετικέτα hr> στο έγγραφο HTML. Ο κωδικός σας πρέπει να μοιάζει κάπως έτσι: