Πώς να ευθυγραμμίσετε το κείμενο σε HTML

Απαιτούνται εργαλεία

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

Μορφή HTML

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

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

Ένα πράγμα που πρέπει να επισημάνω εδώ είναι το άνοιγμα και το κλείσιμο της ετικέτας. Κάθε ετικέτα που είναι γραμμένη πρέπει να είναι κλειστή. Για παράδειγμα, η Html έχει αρχική ετικέτα και η ετικέτα λήξης είναι. Έτσι, παρατηρείται ότι η ετικέτα λήξης έχει μια κάθετο που ακολουθείται από το όνομα της ετικέτας. Ομοίως, όλες οι άλλες ετικέτες ακολουθούν επίσης την ίδια προσέγγιση. Στη συνέχεια, κάθε επεξεργαστής κειμένου αποθηκεύεται με την επέκταση του html. Για παράδειγμα, έχουμε χρησιμοποιήσει ένα αρχείο με το όνομα example.html. Στη συνέχεια, θα δείτε ότι το εικονίδιο του σημειωματάριου έχει αλλάξει σε εικονίδιο προγράμματος περιήγησης.

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

Ενσωματωμένο στυλ κειμένου

Παράδειγμα 1

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

Εάν θέλουμε αυτό το κείμενο να εμφανίζεται στο κέντρο, θα αλλάξουμε την ετικέτα.

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

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

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

Παράδειγμα 2

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

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

Παράδειγμα 3

Ευθυγραμμίστε το κείμενο στο κέντρο

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

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

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

Ευθυγραμμίστε το κείμενο προς τα δεξιά

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

Οι αλλαγές φαίνονται μέσω της εικόνας που επισυνάπτεται παρακάτω.

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

Εσωτερική διαμόρφωση κειμένου

Παράδειγμα 1

Όπως περιγράφηκε παραπάνω, το εσωτερικό css (διαδοχικό φύλλο στυλ) ή το εσωτερικό στυλ είναι ένας τύπος css που ορίζεται στην κεφαλή του html της σελίδας. Λειτουργεί παρόμοια με τις εσωτερικές ετικέτες.

Εξετάστε τη σελίδα που εμφανίζεται παραπάνω. περιέχει τις επικεφαλίδες και την παράγραφο σε αυτό. Έχουμε μια απαίτηση να βλέπουμε το κείμενο στο κέντρο. Η εσωτερική ευθυγράμμιση απαιτεί τη μη αυτόματη εγγραφή ετικετών σε κάθε παράγραφο. Αλλά το εσωτερικό στυλ μπορεί να εφαρμοστεί αυτόματα σε κάθε παράγραφο του κειμένου αναφέροντας το p στη δήλωση στυλ. Τότε δεν χρειάζεται να γράψετε καμία ετικέτα μέσα στην ετικέτα παραγράφου. Τώρα παρατηρήστε τον κώδικα και λειτουργεί.

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

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

Παράδειγμα 2

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

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

Παράδειγμα 3

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

τάξη =κέντρο> ……</ Π >>

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

συμπέρασμα

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