0
Προβολές
ΜεΡάιαν Ντάιβ
Τελευταία ενημέρωση στις
Το HTML είναι μια γλώσσα σήμανσης που χρησιμοποιούν οι προγραμματιστές ιστότοπων για τη δημιουργία όλων των ιστοσελίδων που βρίσκετε στο Διαδίκτυο.
Το HTML είναι μια γλώσσα σήμανσης που χρησιμοποιούν οι προγραμματιστές ιστότοπων για τη δημιουργία όλων των ιστοσελίδων που βρίσκετε στο Διαδίκτυο.
Τι είναι το HTML;
Το HTML σημαίνει Hyper Text Markup Language. Καθορίζει τη διάταξη και τη δομή μιας ιστοσελίδας χρησιμοποιώντας τη μορφοποίηση "tags" μέσα σε αγκύλες που αποτελούνται από σύμβολα μικρότερα από ""
Κάθε στοιχείο ιστοσελίδας περιλαμβάνει μια συγκεκριμένη ετικέτα που λέει στο πρόγραμμα περιήγησης πώς να μορφοποιεί ή να διαμορφώνει αυτήν την ενότητα της σελίδας. Έτσι, μια ολόκληρη ιστοσελίδα είναι απλά μια σειρά από αυτά τα στοιχεία.
Για παράδειγμα, μία από τις πιο βασικές ιστοσελίδες θα περιέχει:
- : Επισημαίνει την αρχή και το τέλος ενός αρχείου HTML
- : Επισημαίνει την αρχή και το τέλος των πληροφοριών κεφαλίδας ιστοσελίδας
- : Επισημαίνει τον τίτλο που πρέπει να εμφανίζεται στη γραμμή τίτλου του προγράμματος περιήγησης
- : Επισημαίνει την αρχή και το τέλος του περιεχομένου της ιστοσελίδας
- προς την: Μεγέθη κεφαλίδων σε όλο το έγγραφο από μεγάλο (H1) έως πολύ μικρό (H6)
- : Εισάγει ένα διάλειμμα παραγράφου καθώς επιστρέφουν δύο άμαξες (ένα κενό μεταξύ γραμμών)
-
: Εισάγει μια αλλαγή γραμμής (δεν υπάρχει διάστημα μεταξύ γραμμών) - : Με έντονη γραφή το κείμενο ανάμεσα στις ετικέτες
- : Πραγματοποιεί πλάγια γραφή στο κείμενο μεταξύ των ετικετών
-
: Εισάγει μια εικόνα όπου υπάρχει αυτή η ετικέτα
- : Εισάγει έναν σύνδεσμο προς μια άλλη ιστοσελίδα μέσα στο έγγραφο
Υπάρχουν πολλές άλλες ετικέτες HTML που μπορείτε να χρησιμοποιήσετε, αλλά οι παραπάνω είναι οι πιο κοινές στις περισσότερες ιστοσελίδες στο Διαδίκτυο.
Ένα παράδειγμα αρχείου HTML
Δεν χρειάζεται φόντο προγραμματισμού για να δημιουργήσετε τη δική σας ιστοσελίδα. Στην πραγματικότητα, μπορείτε να ανοίξετε το Σημειωματάριο τώρα, να πληκτρολογήσετε κάποιο απλό κείμενο και να το αποθηκεύσετε ως αρχείο .html ή .htm. Αυτή θα μπορούσε να είναι η πρώτη ιστοσελίδα που έχετε δημιουργήσει ποτέ και το μόνο που χρειάζεστε είναι ο δικός σας υπολογιστής.
Το παρακάτω είναι ένα παράδειγμα ενός πολύ απλού αρχείου HTML.
Αυτή είναι η πρώτη μου παράγραφος.Αυτή είναι η πρώτη κεφαλίδα
Αυτή είναι η δεύτερη γραμμή
Αυτή είναι μια άλλη παράγραφος.
Δείτε πώς λειτουργεί αυτή η σήμανση υπερ κειμένου:
- Οι δύο πρώτες γραμμές λένε στο πρόγραμμα περιήγησης ότι το έγγραφο είναι σε μορφή HTML και ότι η γλώσσα είναι η αγγλική.
- Ο τίτλος της σελίδας που περικλείεται από
και ρυθμίστε την ιστοσελίδα ώστε το πρόγραμμα περιήγησης να εμφανίζεται ως "Τίτλος σελίδας Web". - Το τμήμα εσωκλείεται με και λέει στο πρόγραμμα περιήγησης ότι αυτές οι γραμμές περιέχουν το περιεχόμενο που θα εμφανίζεται στην ιστοσελίδα.
- Η κεφαλίδα περικλείεται με
και
οι ετικέτες δημιουργούν "Αυτή είναι η πρώτη κεφαλίδα" στη μεγαλύτερη γραμματοσειρά κεφαλίδας που διατίθεται σε HTML. - ο
και
οι ετικέτες εισάγουν ένα κενό μετά το ετικέτα. - ο
Η ετικέτα εισάγει μια αλλαγή γραμμής μετά από αυτήν την πρόταση. - τερματίζει το έγγραφο και η ιστοσελίδα θα σταματήσει να φορτώνει σε αυτό το σημείο.
Εδώ είναι το παραπάνω αρχείο ιστοσελίδας όταν το ανοίγετε με το πρόγραμμα περιήγησής σας.
Όπως μπορείτε να δείτε, είναι απλό να δημιουργήσετε μια ιστοσελίδα ακόμη και αν δεν έχετε διακομιστή ιστού. Το μόνο που χρειάζεστε είναι να δημιουργήσετε ένα αρχείο HTML και να το φορτώσετε με το δικό σας
Πώς λειτουργεί το HTML
Προφανώς, οι περισσότερες σελίδες δεν αποθηκεύονται στον υπολογιστή σας. Αντ 'αυτού, αποθηκεύονται σε διακομιστές ιστού στο Διαδίκτυο. Έτσι, όταν επισκέπτεστε ένα άρθρο ή άλλο περιεχόμενο σε οποιονδήποτε ιστότοπο, ο διακομιστής στέλνει στο πρόγραμμα περιήγησής σας το αρχείο .html που περιέχει το περιεχόμενο για αυτήν τη σελίδα.
Μπορείτε να δείτε τον κώδικα HTML για οποιαδήποτε ιστοσελίδα στο πρόγραμμα περιήγησης Chrome κάνοντας δεξί κλικ οπουδήποτε στη σελίδα και επιλέγοντας Δες την πηγή της σελίδας.
Αυτό θα σας δείξει τον κωδικό πίσω από την ιστοσελίδα. Μπορείτε να δείτε ότι είναι ένα αρχείο HTML από την πρώτη ετικέτα στο επάνω μέρος του αρχείου.
Ωστόσο, θα παρατηρήσετε επίσης ότι ο πηγαίος κώδικας περιέχει άλλους τύπους ετικετών που δεν είναι καθόλου ετικέτες HTML.
Ενσωματωμένα σενάρια σε αρχεία HTML
Για παράδειγμα, ενδέχεται να δείτε κώδικα που καλεί αρχεία .php ή .js. Αυτά είναι σενάρια PHP και Javascript που επιτρέπουν δυναμικές ιστοσελίδες που φορτώνουν διαφορετικό περιεχόμενο ανάλογα με τις εισόδους του χρήστη ή την έξοδο του άλλα σενάρια που εκτελούνται στον διακομιστή ιστού ή στο πρόγραμμα περιήγησης και παραδίδουν περιεχόμενο στο ίδιο αρχείο HTML που διαβάζει το πρόγραμμα περιήγησής σας.
Δεδομένου ότι η HTML είναι μια "στατική" μέθοδος που χρησιμοποιείται για τη μορφοποίηση περιεχομένου σε μια ιστοσελίδα, οι σχεδιαστές ιστοσελίδων χρειάζονται έναν πιο δυναμικό τρόπο για να αλλάξουν περιεχόμενο στη σελίδα ανάλογα με το πού βρίσκονται τα προγράμματα περιήγησης. Τα προγράμματα περιήγησης μπορούν να διαβάζουν και να ερμηνεύουν κώδικα Javascript, αλλάζοντας τη μορφοποίηση ή άλλα στοιχεία μιας ιστοσελίδας με βάση την αλληλεπίδραση των χρηστών.
Για παράδειγμα, αυτός είναι ο τρόπος με τον οποίο τα μενού σε μια σελίδα αλλάζουν χρώμα κάθε φορά που τοποθετείτε το δείκτη του ποντικιού πάνω από κάθε στοιχείο μενού.
Ο κωδικός PHP που είναι ενσωματωμένος στην ιστοσελίδα επιτρέπει σε πράγματα όπως τα δυναμικά κουμπιά να λειτουργούν σωστά. Για παράδειγμα, το Σχόλια κουμπί στο κάτω μέρος των άρθρων που θα δείτε σε αυτόν τον ιστότοπο καθοδηγείται από κώδικα PHP που εκτελείται στον διακομιστή και θα παραδώσει τα σχόλια που δημοσιεύονται σε κάθε άρθρο.
Η PHP επιτρέπει επίσης στους διαχειριστές ιστού να δημιουργούν καινοτόμες λειτουργίες, όπως απεριόριστη κύλιση που συνεχίζει να φορτώνει νέα άρθρα καθώς κάνετε κύλιση προς τα κάτω στην κύρια σελίδα του ιστότοπου.
Χάρη στις σύγχρονες γλώσσες δέσμης ενεργειών που βασίζονται στον ιστό, οι σημερινές ιστοσελίδες δεν είναι πλέον μόνο στατικές, κάτι που επιτρέπεται μόνο από τον κώδικα HTML.
Άλλες ετικέτες HTML
Εάν είστε έτοιμοι να ξεκινήσετε να δημιουργείτε τα δικά σας αρχεία HTML, θα πρέπει να γνωρίζετε πώς να χρησιμοποιείτε τις πιο κοινές ετικέτες HTML πέρα από τις βασικές που περιγράφονται παραπάνω.
Τα παρακάτω είναι μερικά παραδείγματα μερικών ακόμη ετικετών HTML που μπορείτε να χρησιμοποιήσετε όταν κωδικοποιείτε τις δικές σας ιστοσελίδες.
HREF για εισαγωγή συνδέσμων
Για να ενσωματώσετε έναν σύνδεσμο μέσα στην ιστοσελίδα σας, χρησιμοποιήστε το ένα href.
Βρείτε το iPhone σας χρησιμοποιώντας το Hey Siri
Αυτό θα συνδέσει το κείμενο "Εύρεση του iPhone σας χρησιμοποιώντας το Hey Siri" με το σύνδεσμο URL που έχετε συμπεριλάβει σε διπλά εισαγωγικά μετά το "href =".
IMG SRC για εισαγωγή εικόνων
Μπορείς εισαγάγετε εικόνες σε μια ιστοσελίδα χρησιμοποιώντας img src.
Αυτό θα τραβήξει την εικόνα my-picture.jpg από τον διακομιστή ιστού και θα την εμφανίσει στη σελίδα όπου έχετε τοποθετήσει αυτήν την ετικέτα, με πλάτος 150 εικονοστοιχεία και ύψος 120 εικονοστοιχεία.
ο alt Η παράμετρος εμφανίζει το κείμενο "η φωτογραφία προφίλ μου" σε προγράμματα περιήγησης που δεν μπορούν να εμφανίσουν την εικόνα. Εάν δεν συμπεριλάβετε την παράμετρο "στυλ", η εικόνα θα εμφανίζεται στην αρχική της ανάλυση, η οποία μπορεί να είναι πολύ μεγάλη ή πολύ μικρή για την περιοχή της σελίδας στην οποία την ενσωματώνετε.
UL και OL για δημιουργία λιστών
Εάν θέλετε να χρησιμοποιήσετε κουκκίδες ή αριθμημένες λίστες στο περιεχόμενό σας, υπάρχουν δύο ετικέτες που σας επιτρέπουν να το κάνετε αυτό.
Ο ακόλουθος κωδικός θα εισαγάγει μια αρίθμητη λίστα (κουκκίδες):
Χρήση
- στην αρχή της λίστας και
Μπορείτε να χρησιμοποιήσετε την ίδια προσέγγιση για μια αριθμημένη λίστα χρησιμοποιώντας
- που σημαίνει "Λίστα παραγγελιών".
Εισαγωγή πινάκων
Οι σχεδιαστές ιστοσελίδων χρησιμοποιούσαν μεγάλους πίνακες για τη μορφοποίηση ιστοσελίδων. Αλλά με την εμφάνιση των Cascading Style Sheets (CSS), αυτό δεν είναι πλέον απαραίτητο. Αντ 'αυτού, τα αρχεία CSS αποθηκεύονται στον διακομιστή ιστού και οι σελίδες HTML καλούν αυτά τα αρχεία για να καθορίσουν πώς να διαμορφώσουν πράγματα όπως περιθώρια, μεγέθη γραμματοσειρών και χρώματα και πολλά άλλα.
Ωστόσο, οι πίνακες εξακολουθούν να είναι χρήσιμοι για την εμφάνιση πραγμάτων όπως τα δεδομένα. Για να εισαγάγετε έναν πίνακα, επισυνάψτε την αρχή του περιεχομένου με
Κλείστε κάθε σειρά με
Ονομα Διεύθυνση Τηλεφωνικό νούμερο Ράιαν Ντάιβ 100 Jones Lane; Τζόνσον Σίτι, ΤΝ 317-555-1212
Αυτό θα μεταβεί σε μια ιστοσελίδα ως εξής:
Με μόνο αυτά τα βασικά στοιχεία, μπορείτε να δημιουργήσετε χρήσιμες στατικές ιστοσελίδες για την προβολή του περιεχομένου σας στο Διαδίκτυο. Το μόνο που χρειάζεστε εάν θέλετε να το κάνετε δημόσιο και ορατό από τον κόσμο είναι η εγγραφή για ένα λογαριασμός φιλοξενίας ιστού και αποθηκεύστε τα αρχεία σας στο δημόσιο φάκελο στο λογαριασμό σας.
Στην πραγματικότητα, να ξεκινήσετε τη δική σας ιστοσελίδα είναι εκπληκτικά εύκολο, ειδικά αν επιλέξετε να χρησιμοποιήσετε μια διαχείριση περιεχομένου πλατφόρμα όπως το WordPress.
Πως να
Πώς να εκκαθαρίσετε το Google Chrome Cache, Cookies και Ιστορικό περιήγησης
Το Chrome κάνει εξαιρετική δουλειά για την αποθήκευση του ιστορικού περιήγησης, της προσωρινής μνήμης και των cookie για τη βελτιστοποίηση της απόδοσης του προγράμματος περιήγησής σας στο διαδίκτυο. Είναι πώς να ...
Συμφωνίες
Αντιστοίχιση τιμών εντός καταστήματος: Πώς να λάβετε τιμές στο Διαδίκτυο ενώ ψωνίζετε στο κατάστημα
Η αγορά στο κατάστημα δεν σημαίνει ότι πρέπει να πληρώσετε υψηλότερες τιμές. Χάρη στις εγγυήσεις που ταιριάζουν με τις τιμές, μπορείτε να λάβετε εκπτώσεις στο διαδίκτυο κατά την αγορά σε ...
Πως να
Πώς να δώσετε συνδρομή Disney Plus με ψηφιακή δωροκάρτα
Εάν απολαμβάνετε το Disney Plus και θέλετε να το μοιραστείτε με άλλους, δείτε πώς μπορείτε να αγοράσετε μια συνδρομή Disney + Gift για ...
Πως να
Ο οδηγός σας για κοινή χρήση εγγράφων στα Έγγραφα Google, τα φύλλα και τις διαφάνειες
Μπορείτε εύκολα να συνεργαστείτε με τις εφαρμογές που βασίζονται στον Ιστό της Google. Αυτός είναι ο οδηγός σας για κοινή χρήση στα Έγγραφα Google, τα Φύλλα και τις Παρουσιάσεις με τα δικαιώματα ...
ΕΓΓΡΑΦΕΙΤΕ
YOU MIGHT ALSO LIKE
