Home-theater-designers
Παρόλο που οι σύγχρονοι ιστότοποι είναι γενικά κατασκευασμένοι με φιλικές προς το χρήστη διεπαφές, είναι χρήσιμο να γνωρίζετε κάποια βασική HTML. Εάν γνωρίζετε τις ακόλουθες 17 ετικέτες παραδείγματος HTML (και μερικές πρόσθετες), θα μπορείτε να δημιουργήσετε μια βασική ιστοσελίδα από την αρχή ή να τροποποιήσετε τον κώδικα που δημιουργήθηκε από μια εφαρμογή όπως το WordPress.
Παρέχουμε παραδείγματα κώδικα HTML με έξοδο για τις περισσότερες ετικέτες. Αν θέλετε να τα δείτε σε δράση, κατεβάστε το δείγμα αρχείου HTML στο τέλος του άρθρου. Μπορείτε να παίξετε με αυτό σε ένα πρόγραμμα επεξεργασίας κειμένου και να το φορτώσετε σε ένα πρόγραμμα περιήγησης για να δείτε τι κάνουν οι αλλαγές σας.
1
Θα χρειαστείτε αυτήν την ετικέτα στην αρχή κάθε εγγράφου HTML που δημιουργείτε. Εξασφαλίζει ότι ένα πρόγραμμα περιήγησης γνωρίζει ότι διαβάζει HTML και ότι αναμένει HTML5, την πιο πρόσφατη έκδοση.
Παρόλο που αυτό δεν είναι στην πραγματικότητα μια ετικέτα HTML, είναι ακόμα καλό να γνωρίζετε.
2
Αυτή είναι μια άλλη ετικέτα που λέει σε ένα πρόγραμμα περιήγησης ότι διαβάζει HTML. Η ετικέτα πηγαίνει αμέσως μετά την ετικέτα DOCTYPE και την κλείνετε με μια ετικέτα ακριβώς στο τέλος του αρχείου σας. Όλα τα άλλα στο έγγραφό σας περνούν μεταξύ αυτών των ετικετών.
3
Η ετικέτα ξεκινά την ενότητα κεφαλίδας του αρχείου σας. Τα πράγματα που μπαίνουν εδώ δεν εμφανίζονται στην ιστοσελίδα σας. Αντ 'αυτού, περιέχει μεταδεδομένα για μηχανές αναζήτησης και πληροφορίες για το πρόγραμμα περιήγησής σας.
Για τις βασικές σελίδες, η ετικέτα θα περιέχει τον τίτλο σας και αυτό είναι όλο. Αλλά υπάρχουν μερικά άλλα πράγματα που μπορείτε να συμπεριλάβετε, τα οποία θα εξετάσουμε σε λίγο.
Τέσσερα.
Αυτή η ετικέτα ορίζει τον τίτλο της σελίδας σας. Το μόνο που χρειάζεται να κάνετε είναι να βάλετε τον τίτλο σας στην ετικέτα και να την κλείσετε, έτσι (έχω συμπεριλάβει και τις ετικέτες κεφαλίδας, για να δείξω το πλαίσιο):
My Website
Αυτό είναι το όνομα που θα εμφανιστεί ως τίτλος καρτέλας όταν ανοίξει σε ένα πρόγραμμα περιήγησης.
5
Όπως και η ετικέτα τίτλου, τα μεταδεδομένα τοποθετούνται στην περιοχή κεφαλίδας της σελίδας σας. Τα μεταδεδομένα χρησιμοποιούνται κυρίως από τις μηχανές αναζήτησης και είναι πληροφορίες σχετικά με τα περιεχόμενα της σελίδας σας. Υπάρχουν πολλά διαφορετικά μετα -πεδία, αλλά αυτά είναι μερικά από τα πιο συχνά χρησιμοποιούμενα:
- περιγραφή : Μια βασική περιγραφή της σελίδας σας.
- λέξεις -κλειδιά : Επιλογή λέξεων -κλειδιών που ισχύουν για τη σελίδα σας.
- συγγραφέας : Ο συντάκτης της σελίδας σας.
- θύρα προβολής : Μια ετικέτα για να διασφαλίσετε ότι η σελίδα σας φαίνεται καλή σε όλες τις συσκευές.
Ακολουθεί ένα παράδειγμα που μπορεί να ισχύει για αυτήν τη σελίδα:
Η ετικέτα 'viewport' θα πρέπει πάντα να έχει ως 'περιεχόμενο' πλάτος = πλάτος συσκευής, αρχική κλίμακα = 1.0 'για να βεβαιωθείτε ότι η σελίδα σας εμφανίζεται καλά σε φορητές και επιτραπέζιες συσκευές.
6
Αφού κλείσετε την ενότητα κεφαλίδας, φτάνετε στο σώμα. Το ανοίγετε με την ετικέτα και το κλείνετε με την ετικέτα. Αυτό πηγαίνει ακριβώς στο τέλος του αρχείου σας, λίγο πριν από την ετικέτα.
Όλο το περιεχόμενο της ιστοσελίδας σας βρίσκεται μεταξύ αυτών των ετικετών. Είναι τόσο απλό όσο ακούγεται:
Everything you want displayed on your page.
7
Ελαφρώς λιγότερο μεγάλη κεφαλίδα
Υπο-κεφαλίδα
Αποτέλεσμα:
Όπως μπορείτε να δείτε, γίνονται μικρότερα σε κάθε επίπεδο.
8
Η ετικέτα παραγράφου ξεκινά μια νέα παράγραφο. Αυτό συνήθως εισάγει δύο διαλείμματα γραμμών.
Κοιτάξτε, για παράδειγμα, το διάλειμμα μεταξύ της προηγούμενης γραμμής και αυτής. Αυτό είναι το α
ετικέτα θα κάνει.
Your first paragraph.
Your second paragraph.
Αποτέλεσμα:
Η πρώτη σου παράγραφος.
Η δεύτερη παράγραφος σας.
Μπορείτε επίσης να χρησιμοποιήστε στυλ CSS στις ετικέτες της παραγράφου σας, όπως αυτή που αλλάζει το μέγεθος του κειμένου:
This is 50% larger text.
Αποτέλεσμα:
9
Η ετικέτα διακοπής γραμμής εισάγει ένα διάλειμμα γραμμής:
The first line.
The second line (close to the first one).
Αποτέλεσμα:
Η εργασία με παρόμοιο τρόπο είναι η
ετικέτα. Αυτό σχεδιάζει μια οριζόντια γραμμή στη σελίδα σας και είναι καλό για τον διαχωρισμό τμημάτων κειμένου.
10
Αυτή η ετικέτα ορίζει σημαντικό κείμενο. Σε γενικές γραμμές, αυτό σημαίνει ότι θα είναι τολμηρό. Ωστόσο, είναι δυνατό να χρησιμοποιήσετε το CSS για να κάνετε το κείμενο εμφανίζεται διαφορετικά.
παράθυρα που δεν ανιχνεύουν εξωτερικό σκληρό δίσκο
Ωστόσο, μπορείτε να χρησιμοποιήσετε με ασφάλεια σε έντονο κείμενο.
Very important things you want to say. Αποτέλεσμα:
Πολύ σημαντικά πράγματα που θέλετε να πείτε.
Εάν είστε εξοικειωμένοι με το ετικέτα για έντονο κείμενο, μπορείτε ακόμα να το χρησιμοποιήσετε. Δεν υπάρχει καμία εγγύηση ότι θα συνεχίσει να λειτουργεί σε μελλοντικές εκδόσεις του HTML, αλλά προς το παρόν, λειτουργεί.
έντεκα.
Σαν και , και σχετίζονται. ο Η ετικέτα προσδιορίζει τονισμένο κείμενο, πράγμα που σημαίνει γενικά ότι θα γίνει πλάγια γραφή. Και πάλι, υπάρχει η πιθανότητα το CSS να κάνει τονισμένη εμφάνιση κειμένου διαφορετικά.
An emphasized line. Αποτέλεσμα:
Μια τονισμένη γραμμή.
ο η ετικέτα εξακολουθεί να λειτουργεί, αλλά και πάλι, είναι πιθανό να καταργηθεί σε μελλοντικές εκδόσεις της HTML.
12
ο ή ετικέτα αγκύρωσης, σας επιτρέπει να δημιουργείτε συνδέσμους. Ένας απλός σύνδεσμος μοιάζει με αυτό:
Μεταβείτε στο MUO Το χαρακτηριστικό 'href' προσδιορίζει τον προορισμό του συνδέσμου. Σε πολλές περιπτώσεις, αυτός θα είναι ένας άλλος ιστότοπος. Θα μπορούσε επίσης να είναι ένα αρχείο, όπως μια εικόνα ή ένα PDF.
Άλλα χρήσιμα χαρακτηριστικά περιλαμβάνουν 'στόχος' και 'τίτλος'. Το χαρακτηριστικό στόχος χρησιμοποιείται σχεδόν αποκλειστικά για το άνοιγμα ενός συνδέσμου σε μια νέα καρτέλα ή παράθυρο, όπως αυτό:
Go to MUO in a new tab Αποτέλεσμα:
Μεταβείτε στο MUO σε μια νέα καρτέλα
Το χαρακτηριστικό «τίτλος» δημιουργεί μια επεξήγηση εργαλείου. Τοποθετήστε τον δείκτη του ποντικιού πάνω στον παρακάτω σύνδεσμο για να δείτε πώς λειτουργεί:
Hover over this to see the tool tip Αποτέλεσμα:
Τοποθετήστε το δείκτη του ποντικιού πάνω από αυτό για να δείτε την άκρη του εργαλείου
13 ![]()
Εάν θέλετε να ενσωματώσετε μια εικόνα στη σελίδα σας, θα πρέπει να χρησιμοποιήσετε την ετικέτα εικόνας. Συνήθως θα το χρησιμοποιείτε σε συνδυασμό με το χαρακτηριστικό 'src'. Αυτό καθορίζει την πηγή της εικόνας, όπως αυτό:
Αποτέλεσμα:
παιχνίδια για κινητά για να παίξετε με φίλους
Άλλα χαρακτηριστικά είναι διαθέσιμα, όπως 'ύψος', 'πλάτος' και 'alt'. Δείτε πώς μπορεί να φαίνεται:
Όπως θα περίμενε κανείς, τα χαρακτηριστικά «ύψος» και «πλάτος» ορίζουν το ύψος και το πλάτος της εικόνας. Σε γενικές γραμμές, είναι καλή ιδέα να ορίσετε μόνο ένα από αυτά, ώστε η εικόνα να κλιμακωθεί σωστά. Εάν χρησιμοποιείτε και τα δύο, θα μπορούσατε να καταλήξετε σε μια τεντωμένη ή σπασμένη εικόνα.
Η ετικέτα 'alt' λέει στο πρόγραμμα περιήγησης τι κείμενο πρέπει να εμφανίζεται εάν η εικόνα δεν μπορεί να εμφανιστεί και είναι καλή ιδέα να συμπεριληφθεί με οποιαδήποτε εικόνα. Εάν κάποιος έχει μια ιδιαίτερα αργή σύνδεση ή ένα παλιό πρόγραμμα περιήγησης, μπορεί ακόμα να πάρει μια ιδέα για το τι πρέπει να υπάρχει στη σελίδα σας.
14
Η ετικέτα ταξινομημένης λίστας σάς επιτρέπει να δημιουργήσετε μια ταξινομημένη λίστα. Σε γενικές γραμμές, αυτό σημαίνει ότι θα λάβετε μια αριθμημένη λίστα. Κάθε στοιχείο στη λίστα χρειάζεται μια ετικέτα στοιχείου λίστας (
), οπότε η λίστα σας θα μοιάζει με αυτήν:
- First thing
- Second thing
- Third thing
Αποτέλεσμα:
- Το πρώτο πράγμα
- Δεύτερο πράγμα
- Τρίτο πράγμα
Στο HTML5, μπορείτε να χρησιμοποιήσετε
για να αντιστρέψουμε τη σειρά των αριθμών. Και μπορείτε να ορίσετε την αρχική τιμή με το χαρακτηριστικό έναρξης. Το χαρακτηριστικό 'τύπος' σάς επιτρέπει να πείτε στο πρόγραμμα περιήγησης ποιο τύπο συμβόλου θα χρησιμοποιήσει για τα στοιχεία της λίστας. Μπορεί να οριστεί σε '1', 'A', 'a', 'I' ή 'i', ρυθμίζοντας τη λίστα να εμφανίζεται με το υποδεικνυόμενο σύμβολο όπως αυτό:
δεκαπέντε.
Ο μη ταξινομημένος κατάλογος είναι πολύ απλούστερος από τον αντίστοιχο που έχει παραγγείλει. Είναι απλά μια λίστα με κουκκίδες.
- First item
- Second item
- Third item
Αποτέλεσμα:
- Πρώτο στοιχείο
- Δεύτερο στοιχείο
- Τρίτο στοιχείο
Οι μη ταξινομημένες λίστες έχουν επίσης χαρακτηριστικά 'τύπου' και μπορείτε να το ορίσετε σε 'δίσκος', 'κύκλος' ή 'τετράγωνο'.
16
Ενώ η χρήση πινάκων για μορφοποίηση δεν γίνεται δεκτή, υπάρχουν πολλές φορές που θέλετε να χρησιμοποιήσετε γραμμές και στήλες για να τμηματοποιήσετε πληροφορίες στη σελίδα σας. Αρκετές ετικέτες χρειάζονται για να λειτουργήσει ένας πίνακας. Ακολουθεί το δείγμα κώδικα HTML:
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
ο
και
Οι ετικέτες καθορίζουν την αρχή και το τέλος του πίνακα. οη ετικέτα περιέχει όλο το περιεχόμενο του πίνακα. Κάθε σειρά του πίνακα περικλείεται σε α
ετικέτα. Κάθε κελί σε κάθε σειρά είναι τυλιγμένο σε οποιοδήποτεετικέτες για κεφαλίδες στηλών, ή ετικέτες για δεδομένα στήλης. Χρειάζεστε ένα από αυτά για κάθε στήλη σε κάθε σειρά. Αποτέλεσμα:
1η στήλη 2η στήλη Σειρά 1, στήλη 1 Σειρά 1, στήλη 2 Σειρά 2, στήλη 1 Σειρά 2, στήλη 2
17
Όταν παραθέτετε έναν άλλο ιστότοπο ή άτομο και θέλετε να ξεχωρίσετε το απόσπασμα από το υπόλοιπο έγγραφό σας, χρησιμοποιήστε την ετικέτα blockquote. Το μόνο που χρειάζεται να κάνετε είναι να συμπεριλάβετε το απόσπασμα στο άνοιγμα και το κλείσιμο των ετικετών blockquote:
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
Αποτέλεσμα:
Το Διαδίκτυο όπως το φανταζόμουν, δεν το έχουμε δει ακόμα. Το μέλλον είναι ακόμα πολύ μεγαλύτερο από το παρελθόν.
Η ακριβής μορφοποίηση που χρησιμοποιείται μπορεί να εξαρτάται από το πρόγραμμα περιήγησης που χρησιμοποιείτε ή το CSS του ιστότοπού σας. Αλλά η ετικέτα παραμένει η ίδια.
Δείγματα κώδικα HTML
Με αυτά τα 17 παραδείγματα HTML, θα πρέπει να μπορείτε να δημιουργήσετε έναν απλό ιστότοπο. Μπορείτε να τα δοκιμάσετε όλα τώρα σε έναν διαδικτυακό επεξεργαστή κειμένου για να έχετε μια αίσθηση για το πώς λειτουργούν.
Για περισσότερα μαθήματα bite-size σε HTML, δοκιμάστε μερικές εφαρμογές μικρομάθησης για κωδικοποίηση. Θα σας βοηθήσουν να αυξήσετε την ταχύτητά σας σε χρόνο μηδέν.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Θέλετε να μάθετε βασική κωδικοποίηση; Δοκιμάστε 5 εφαρμογές κωδικοποίησης μεγέθους δαγκώματος στον ελεύθερο χρόνο σας Θέλετε να μάθετε βασική κωδικοποίηση αλλά έχετε λίγο χρόνο; Αυτές οι εφαρμογές κωδικοποίησης μεγέθους δαγκώματος θα χρειαστούν μόλις λίγα λεπτά από την πολυάσχολη μέρα σας.
Διαβάστε Επόμενο Σχετικά θέματα - Προγραμματισμός
- Wordpress
- HTML
- Ανάπτυξη διαδικτύου
- Φροντιστήρια κωδικοποίησης
Σχετικά με τον Συγγραφέα Άντι Μπετς(221 δημοσιευμένα άρθρα) Ο Andy είναι πρώην έντυπος δημοσιογράφος και συντάκτης περιοδικού που γράφει για την τεχνολογία εδώ και 15 χρόνια. Εκείνη την περίοδο συνέβαλε σε αμέτρητες δημοσιεύσεις και παρήγαγε έργα συγγραφής κειμένων για μεγάλες εταιρείες τεχνολογίας. Έχει επίσης παράσχει σχόλια ειδικών για τα ΜΜΕ και φιλοξένησε πάνελ σε εκδηλώσεις του κλάδου.
Περισσότερα από τον Andy BettsΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή