Θέλετε να δημιουργήσετε μια βασική ιστοσελίδα;  Μάθετε αυτά τα παραδείγματα HTML και δοκιμάστε τα σε ένα πρόγραμμα επεξεργασίας κειμένου για να δείτε πώς φαίνονται στο πρόγραμμα περιήγησής σας.

17 Απλά παραδείγματα κώδικα HTML μπορείτε να μάθετε σε 10 λεπτά

Διαφήμιση Παρόλο που οι σύγχρονοι ιστοτόποι είναι γενικά κατασκευασμένοι με φιλικές προς το χρήστη διεπαφές, είναι χρήσιμο να γνωρίζουμε κάποια βασικά HTML. Εάν γνωρίζετε τις ακόλουθες 17 ετικέτες παράδειγμα HTML (και μερικές επιπλέον επιλογές), θα μπορείτε να δημιουργήσετε μια βασική ιστοσελίδα από την αρχή ή να τροποποιήσετε τον κώδικα που δημιουργήθηκε από μια εφαρμογή όπως το WordPress. Έχουμε παραθέσει παραδείγματα κώδικα HTML με έξοδο για τις περισσότερες ετικέτες. Αν θέλετε να τα δείτε σε δράση, κάντε λήψη του δείγματος αρχείου HTML στο τέλος του άρθρου. Μπορείτε να παίξετε μαζί του σε έ

Διαφήμιση

Παρόλο που οι σύγχρονοι ιστοτόποι είναι γενικά κατασκευασμένοι με φιλικές προς το χρήστη διεπαφές, είναι χρήσιμο να γνωρίζουμε κάποια βασικά HTML. Εάν γνωρίζετε τις ακόλουθες 17 ετικέτες παράδειγμα HTML (και μερικές επιπλέον επιλογές), θα μπορείτε να δημιουργήσετε μια βασική ιστοσελίδα από την αρχή ή να τροποποιήσετε τον κώδικα που δημιουργήθηκε από μια εφαρμογή όπως το WordPress.

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

1.

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

Παρόλο που αυτό δεν είναι στην πραγματικότητα μια ετικέτα HTML, είναι ακόμα καλό να το ξέρουμε.

2.

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

3.

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

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

4.

html ετικέτα τίτλου

Αυτή η ετικέτα ορίζει τον τίτλο της σελίδας σας. Το μόνο που χρειάζεται να κάνετε είναι να τοποθετήσετε τον τίτλο σας στην ετικέτα και να το κλείσετε, όπως αυτό (έχω συμπεριλάβει και τις ετικέτες κεφαλίδας):

  My Website 

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

5.

Όπως και η ετικέτα τίτλου, τα μεταδεδομένα τοποθετούνται στην περιοχή κεφαλίδας της σελίδας σας. Τα μεταδεδομένα χρησιμοποιούνται κυρίως από τις μηχανές αναζήτησης και είναι πληροφορίες σχετικά με τα περιεχόμενα της σελίδας σας. Υπάρχουν πολλά διαφορετικά πεδία meta, αλλά αυτά είναι μερικά από τα πιο συχνά χρησιμοποιούμενα:

  • περιγραφή - Βασική περιγραφή της σελίδας σας.
  • λέξεις - κλειδιά -Επιλογή λέξεων -κλειδιών που ισχύουν στη σελίδα σας.
  • συγγραφέας -Η συγγραφέας της σελίδας σας.
  • viewport - Μια ετικέτα για να διασφαλίσετε ότι η σελίδα σας φαίνεται καλή σε όλες τις συσκευές.

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

 

Η ετικέτα "παράθυρο προβολής" θα πρέπει πάντα να έχει το "width = width-device, initial-scale = 1.0" ως περιεχόμενο για να βεβαιωθεί ότι η σελίδα σας εμφανίζεται καλά σε κινητές και επιτραπέζιες συσκευές.

6.

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

Όλο το περιεχόμενο της ιστοσελίδας σας περνάει ανάμεσα σε αυτές τις ετικέτες. Είναι τόσο απλό όσο ακούγεται:

  Everything you want displayed on your page. 

7.

ο

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

ορίζει κεφαλίδες επιπέδου δύο, όπως κεφαλίδες τομέων,

υπο-κεφαλίδες τριών επιπέδων κ.ο.κ.

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

Μεγάλη και σημαντική κεφαλίδα

Ελαφρώς λιγότερη μεγάλη κεφαλίδα

Υπο-επικεφαλίδα

Αποτέλεσμα:

ετικέτες κεφαλίδας html

Όπως μπορείτε να δείτε, γίνονται μικρότεροι σε κάθε επίπεδο.

8.

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

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

ετικέτα θα κάνει.

Η πρώτη παράγραφο.

Η δεύτερη παράγραφος.

Αποτέλεσμα:

Η πρώτη παράγραφο.

Η δεύτερη παράγραφος.

Μπορείτε επίσης να χρησιμοποιήσετε τα στυλ CSS στις ετικέτες των παραγράφων σας, όπως αυτή που αλλάζει το μέγεθος του κειμένου:

20% μεγαλύτερο κείμενο

Αποτέλεσμα:

20% μεγαλύτερο κείμενο

Για να μάθετε πώς να χρησιμοποιείτε το CSS για το στυλ του κειμένου σας, ανατρέξτε σε αυτά τα μαθήματα HTML και CSS.

9.

Η ετικέτα break line εισάγει ένα σπάσιμο μιας γραμμής:

Η πρώτη γραμμή.
Η δεύτερη γραμμή (κοντά στο πρώτο).

Αποτέλεσμα:

Η πρώτη γραμμή.
Η δεύτερη γραμμή (κοντά στο πρώτο).

Η εργασία με παρόμοιο τρόπο είναι η


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

10.

Αυτή η ετικέτα ορίζει σημαντικό κείμενο. Γενικά, αυτό σημαίνει ότι θα είναι τολμηρό. Ωστόσο, είναι δυνατή η χρήση του CSS για την εμφάνιση διαφορετικού κειμένου.

Ωστόσο, μπορείτε να χρησιμοποιήσετε με ασφάλεια το έντονο κείμενο.

 Very important things you want to say. 

Αποτέλεσμα:

Πολύ σημαντικά πράγματα που θέλετε να πείτε.

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

11.

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

 An emphasized line. 

Αποτέλεσμα:

Μια γραμμή με έμφαση.

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

12.

Η ετικέτα ή η αγκύρωση σας επιτρέπει να δημιουργείτε συνδέσμους. Ένας απλός σύνδεσμος μοιάζει με αυτό:

 Go to MakeUseOf 

Αποτέλεσμα:

Πηγαίνετε στο MakeUseOf

Το χαρακτηριστικό "href" προσδιορίζει τον προορισμό του συνδέσμου. Σε πολλές περιπτώσεις, αυτός θα είναι ένας άλλος ιστότοπος. Θα μπορούσε επίσης να είναι ένα αρχείο, όπως μια εικόνα ή ένα PDF.

Άλλα χρήσιμα χαρακτηριστικά περιλαμβάνουν το "target" και "title." Το χαρακτηριστικό στόχος χρησιμοποιείται σχεδόν αποκλειστικά για το άνοιγμα ενός συνδέσμου σε μια νέα καρτέλα ή παράθυρο, όπως αυτό:

 Go to MakeUseOf in a new tab 

Αποτέλεσμα:

Μεταβείτε στο MakeUseOf σε μια νέα καρτέλα

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

 Hover over this to see the tool tip 

Αποτέλεσμα:

Τοποθετήστε το δείκτη του ποντικιού πάνω από αυτό για να δείτε την άκρη εργαλείου

13.

Αν θέλετε να ενσωματώσετε μια εικόνα στη σελίδα σας, θα χρειαστεί να χρησιμοποιήσετε την ετικέτα εικόνας. Συνήθως θα το χρησιμοποιείτε σε συνδυασμό με το χαρακτηριστικό "src". Αυτό καθορίζει την πηγή της εικόνας, όπως αυτή:

  

Αποτέλεσμα:

Sunlit bird εικόνα χρησιμοποιώντας ετικέτες img src

Υπάρχουν και άλλα χαρακτηριστικά, όπως "ύψος", "πλάτος" και "alt". Δείτε πώς μπορεί να φαίνεται αυτό:

 το όνομα της εικόνας σας 

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

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

14.

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

  1. ), οπότε ο κατάλογός σας θα μοιάζει με αυτόν τον τύπο:

    1. Το πρώτο πράγμα
    2. Δεύτερο πράγμα
    3. Τρίτο πράγμα

    Αποτέλεσμα:

    1. Το πρώτο πράγμα
    2. Δεύτερο πράγμα
    3. Τρίτο πράγμα

    Στο HTML5, μπορείτε να χρησιμοποιήσετε

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

      Το χαρακτηριστικό "τύπου" σας επιτρέπει να ενημερώσετε το πρόγραμμα περιήγησης για τον τύπο του συμβόλου που θα χρησιμοποιήσει για τα στοιχεία της λίστας. Μπορεί να οριστεί σε "1", "A", "a", "I" ή "i", ορίζοντας τη λίστα με το σύμβολο που φαίνεται παρακάτω:

        15.

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

          • Πρώτο στοιχείο
          • Δεύτερο στοιχείο
          • Τρίτο στοιχείο

          Αποτέλεσμα:

          • Πρώτο στοιχείο
          • Δεύτερο στοιχείο
          • Τρίτο στοιχείο

          Οι μη ταξινομημένες λίστες έχουν επίσης χαρακτηριστικά "τύπου" και μπορείτε να τα ορίσετε σε "δίσκο", "κύκλο" ή "τετράγωνο".

          16.

          Ενώ χρησιμοποιείτε τους πίνακες για τη μορφοποίηση, είναι αρκετές φορές που θα θέλετε να χρησιμοποιήσετε σειρές και στήλες για να ταξινομήσετε πληροφορίες στη σελίδα σας. Αρκετές ετικέτες χρειάζονται για να βρεθεί ένας πίνακας για να εργαστείς. Εδώ είναι το δείγμα κώδικα HTML:

          1η στήλη2η στήλη
          Σειρά 1, στήλη 1Σειρά 1, στήλη 2
          Σειρά 2, στήλη 1Σειρά 2, στήλη 2

          ο

          και
          οι ετικέτες καθορίζουν την αρχή και το τέλος του πίνακα. ο ετικέτα περιέχει όλο το περιεχόμενο πίνακα.

          Κάθε σειρά του πίνακα παρατίθεται σε α ετικέτα. Κάθε κυψέλη μέσα σε κάθε σειρά είναι τυλιγμένο σε κάθε ετικέτες για επικεφαλίδες στηλών ή ετικέτες για δεδομένα στήλης. Χρειάζεστε ένα από αυτά για κάθε στήλη σε κάθε σειρά.

          Αποτέλεσμα:

          1η στήλη2η στήλη
          Σειρά 1, στήλη 1Σειρά 1, στήλη 2
          Σειρά 2, στήλη 1Σειρά 2, στήλη 2

          17.

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

          Το Διαδίκτυο, όπως το πρόβλεψα, δεν το έχουμε δει ακόμη. Το μέλλον είναι ακόμα πολύ μεγαλύτερο από το παρελθόν.

          Αποτέλεσμα:

          Το Διαδίκτυο, όπως το πρόβλεψα, δεν το έχουμε δει ακόμη. Το μέλλον είναι ακόμα πολύ μεγαλύτερο από το παρελθόν.

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

          Πηγαίνετε Forth και HTML

          Με αυτά τα 17 παραδείγματα HTML (και την καταμέτρηση) θα πρέπει να μπορείτε να δημιουργήσετε έναν απλό ιστότοπο 5 Δωρεάν πρότυπα HTML για εύκολη δημιουργία γρήγορων ιστότοπων 5 Δωρεάν πρότυπα HTML για εύκολη δημιουργία γρήγορων ιστότοπων Δοκιμάστε αυτά τα πρότυπα HTML για να χτίσετε τον ιστοχώρο σας σήμερα, t έχουν οποιεσδήποτε δεξιότητες HTML. Διαβάστε περισσότερα . Για να δείτε πώς να τα βάζετε όλα μαζί, μπορείτε να κατεβάσετε το δείγμα της σελίδας HTML. Ανοίξτε το στο πρόγραμμα περιήγησής σας για να δείτε πώς όλα συναντώνται ή σε έναν επεξεργαστή κειμένου για να δείτε ακριβώς πώς λειτουργεί ο κώδικας.

          Για περισσότερα μαθήματα μεγέθους δαγκώματος σε HTML, δοκιμάστε αυτές τις εφαρμογές microlearning για κωδικοποίηση Θέλετε να μάθετε βασική κωδικοποίηση; Δοκιμάστε 5 εφαρμογές κωδικοποίησης σε Bite-Sized στον ελεύθερο χρόνο σας Θέλετε να μάθετε βασικό κώδικα; Δοκιμάστε τις εφαρμογές κωδικοποίησης 5 Bite-μεγέθους στον ελεύθερο χρόνο σας Θέλετε να μάθετε βασική κωδικοποίηση αλλά έχετε λίγο χρόνο; Αυτές οι εφαρμογές κωδικοποίησης μεγέθους μπουκιάς θα διαρκέσουν λίγα λεπτά από την ημέρα σας. Διαβάστε περισσότερα .

          Εξερευνήστε περισσότερα σχετικά με: Κωδικοποίηση Tutorials, HTML, Web Development, Wordpress.