Ορισμένα σύμβολα είναι δύσκολο να πληκτρολογηθούν και άλλα είναι, τεχνικά, απαγορευμένα. Μάθετε ποιος είναι ποιος και πώς να κυριαρχήσετε χαρακτήρες σε HTML.
Μπορεί να υπάρξουν φορές που πρέπει να χρησιμοποιήσετε έναν ειδικό χαρακτήρα στον ιστότοπό σας, όπως το σύμβολο σύμφωνο. Ωστόσο, δεν μπορείτε απλά να πληκτρολογήσετε "&" στον κώδικα HTML σας, καθώς αυτό είναι ένα δεσμευμένο σύμβολο HTML.
Αντίθετα, μπορείτε να χρησιμοποιήσετε οντότητες HTML ή ειδικούς κώδικες για να αναπαραστήσετε αυτούς τους χαρακτήρες. Αυτό σας επιτρέπει να προσθέτετε σύμβολα στην ιστοσελίδα σας χωρίς να παρεμβαίνετε στον πραγματικό κώδικα HTML.
Τι είναι τα σύμβολα σε HTML;
Οταν κατασκευή ενός ιστότοπου HTML, θα χρησιμοποιήσετε μια σειρά από σύμβολα για σημεία στίξης. Ενώ μπορείτε να προσθέσετε τους περισσότερους χαρακτήρες απευθείας στη σελίδα σας, ορισμένοι έχουν ιδιαίτερο νόημα ή είναι δύσκολο να πληκτρολογήσετε. Για παράδειγμα, η HTML χρησιμοποιεί σύμβολα όπως αγκύλες (< και >), συμπλεκτικά σύμβολα (&) και εισαγωγικά (" και ') για να αναπαραστήσουν τη δομή του περιεχομένου σας.
Ένα πρόγραμμα περιήγησης ιστού ερμηνεύει συνήθως το σύμβολο της γωνιακής αγκύλης ως ετικέτα ανοίγματος ή κλεισίματος. Εάν δεν είναι αυτό που σκοπεύετε, μπορεί να προκαλέσει σφάλματα στην ιστοσελίδα σας. Παραδείγματα συμβόλων που απαιτούν κωδικό οντότητας περιλαμβάνουν:
- Αμπερσάντ (
&) - Λιγότερο από (
<) - Μεγαλύτερος από (
>) - Διπλό απόσπασμα (
") - Ενιαίο απόσπασμα (
')
Άλλα σύμβολα όπως το σύμβολα πνευματικών δικαιωμάτων και εμπορικών σημάτων δεν απαιτούν κωδικό οντότητας, αλλά μπορείτε ακόμα να χρησιμοποιήσετε έναν αν προτιμάτε. Μπορεί να είναι δύσκολο να πληκτρολογήσετε ή ακόμα και να μην υποστηρίζονται στο πρόγραμμα επεξεργασίας κειμένου σας. Μερικά παραδείγματα περιλαμβάνουν:
- Σύμβολο πνευματικών δικαιωμάτων (©)
- Σύμβολο εμπορικού σήματος (™)
- Σύμβολο καταχωρισμένου εμπορικού σήματος (®)
Τι είναι οι ονομασμένες και αριθμητικές οντότητες;
Μπορείτε να αναπαραστήσετε κάθε σύμβολο χρησιμοποιώντας έναν κωδικό αριθμητικής οντότητας και το πιο κοινό με μια ονομαστική οντότητα επίσης. Να μερικά παραδείγματα:
Σύμβολο |
Ονομασμένος κωδικός οντότητας |
Αριθμητικός κωδικός οντότητας |
Ampersand |
& |
& |
Λιγότερο από |
< |
< |
Μεγαλύτερος από |
> |
> |
Διπλό απόσπασμα |
" |
" |
Μονό απόσπασμα |
' |
' |
Πνευματική ιδιοκτησία |
© |
© |
Σύμβολο εμπορικού σήματος |
™ |
™ |
Σύμβολο καταχωρημένου εμπορικού σήματος |
® |
® |
Χρησιμοποιώντας είτε τον επώνυμο είτε τον αριθμητικό κωδικό θα εμφανιστεί το αντίστοιχο σύμβολο. Για παράδειγμα, χρησιμοποιώντας είτε "©" ή "©" θα εμφανιστεί το σύμβολο πνευματικών δικαιωμάτων.
Προσθήκη emoji στην ιστοσελίδα σας
Μπορείτε επίσης να εμφανίσετε emoji χρησιμοποιώντας έναν κωδικό οντότητας. Όλα τα emoji έχουν έναν κωδικό αριθμητικής οντότητας σε HTML, αλλά δεν έχουν όλα έναν κωδικό οντότητας με όνομα. Μερικά παραδείγματα περιλαμβάνουν:
Σύμβολο |
Αριθμητικός κωδικός οντότητας |
Χαμογελαστό Πρόσωπο (😃) |
😃 |
Γελαστό πρόσωπο (😆) |
😆 |
Χαμογελαστό Πρόσωπο με Halo (😇) |
😇 |
Πώς να εισαγάγετε σύμβολα σε μια ιστοσελίδα χρησιμοποιώντας κωδικούς οντοτήτων
Μπορείτε να εισαγάγετε κωδικούς οντοτήτων στο περιεχόμενο της σελίδας σας HTML. Η προβολή της ιστοσελίδας σας σε ένα πρόγραμμα περιήγησης θα μετατρέψει τους κωδικούς στο αντίστοιχο σύμβολο.
- Σε ένα νέο αρχείο HTML, προσθέστε τη βασική δομή για μια ιστοσελίδα HTML:
html>
<html>
<κεφάλι>
<τίτλος>Παράδειγμα συμβόλου και οντότηταςτίτλος>
<μετασύνολο χαρακτήρων="UTF-8">
κεφάλι>
<σώμα>
σώμα>
html> - Μέσα στην ετικέτα σώματος, προσθέστε κάποιο περιεχόμενο HTML. Συμπεριλάβετε είτε τον επώνυμο είτε τον αριθμητικό κωδικό οντότητας για το σύμβολο που θέλετε να εμφανίσετε:
<h1>Σύμβολα HTMLh1>
<Π>Σύμβολο πνευματικών δικαιωμάτων: ©Π>
<Π>Σύμβολο εμφράγματος: &Π>
<Π>Σύμβολο εμπορικού σήματος: ™Π>
<Π>Χαμογελαστό πρόσωπο: 😃Π> - Ανοίξτε το αρχείο HTML σε ένα πρόγραμμα περιήγησης ιστού για να δείτε τα αντίστοιχα σύμβολα:
Χρήση ειδικών ή δεσμευμένων συμβόλων HTML στον ιστότοπό σας
Τώρα που ξέρετε πώς να προσθέτετε σύμβολα στην ιστοσελίδα σας HTML, μπορείτε να εξερευνήσετε άλλο ενδιαφέρον περιεχόμενο που μπορείτε να προσθέσετε για να κάνετε τον ιστότοπό σας πιο ελκυστικό.