Βασικός οδηγός HTML για τα ανδρείκελα

Τελευταία ενημέρωση στις 05 Οκτωβρίου 2020


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

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

HTML code.
HTML «κωδικοί».

Και αν αντιμετωπίζετε τη διάταξη του περιεχομένου δεν φαίνεται σωστή, η γνώση HTML μπορεί να σας φέρει πίσω στο σωστό δρόμο.

Ακολουθεί κάποια έκδοση του οδηγού HTML για bloggers και μη-techie ιδιοκτήτες επιχειρήσεων.

Η HTML είναι η ραχοκοκαλιά του σημερινού διαδικτύου. Εκατομμύρια ιστότοποι από κοινού δημιούργησαν το Διαδίκτυο. Πού είναι το HTML δομικό στοιχείο όλων αυτών των ιστότοπων.

Πριν ξεκινήσουμε…

1. Τι είναι το HTML;

HTML είναι η συντομογραφία του HΥΠΕΡ Text MArkupe Lαγωνία. Είναι η τυπική γλώσσα για την επισήμανση περιεχομένων για προγράμματα περιήγησης ιστού.

Η HTML αντιπροσωπεύεται από το "Elements". Τα στοιχεία είναι επίσης γνωστά ως "Ετικέτες".

2. Γιατί απαιτείται HTML;

Τα προγράμματα περιήγησης στο Web μπορούν να δημιουργήσουν έναν ιστότοπο μόνο όταν είναι γραμμένο στη γλώσσα που υποστηρίζει. Η HTML είναι η πιο κοινή γλώσσα σήμανσης και έχει την υψηλότερη αποδοχή σε προγράμματα περιήγησης ιστού.

Γι 'αυτό χρειάζεστε HTML.

3. Είναι ευαίσθητο το γράμμα HTML;

Η HTML δεν διακρίνει τις πεζούλες. Αλλά η καλύτερη πρακτική είναι να γράψετε HTML με σωστές περιπτώσεις.

Βήματα για τη δημιουργία του πρώτου αρχείου HTML

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

Χρειάζεστε έναν επεξεργαστή κωδικών. Ένας καλός επεξεργαστής κώδικα θα σας διευκολύνει να γράφετε και να οργανώνετε μεγάλους κώδικες.

Χρησιμοποιώ και προτείνω Notepad + + (δωρεάν και ανοιχτού κώδικα) για τη σύνταξη γλωσσών ιστού. Υπάρχουν και άλλοι συντάκτες που μπορείτε να χρησιμοποιήσετε ΣεlΚείμενο, άτομο και ούτω καθεξής

Εδώ είναι τι πρέπει να κάνετε:

  1. Εγκαταστήστε ένα πρόγραμμα επεξεργασίας κώδικα
  2. Ανοίξτε το
  3. Δημιουργήστε ένα νέο αρχείο
  4. Αποθηκεύστε το ως αρχείο .html

Είστε έτοιμοι να πάτε!

Example of code editor Atom
Πρόγραμμα επεξεργασίας κώδικα - Atom

1. Γεια σου Κόσμος!

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

Κώδικας:

Η πρώτη μου ιστοσελίδα Γειά σου Κόσμε!

Παραγωγή:

Συγχαρητήρια! Δημιουργήσατε το πρώτο σας αρχείο HTML. Δεν χρειάζεται να το καταλάβετε σε αυτό το σημείο. Θα το καλύψουμε σύντομα.

Κατανόηση της διάρθρωσης HTML

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

Ας προσπαθήσουμε λοιπόν να το καταλάβουμε από το "Hello World!" κώδικας. Τα ακόλουθα στοιχεία είναι τα υποχρεωτικά μέρη για κάθε αρχείο HTML.

  • = Είναι μια δήλωση στο πρόγραμμα περιήγησης ότι πρόκειται για αρχείο HTML. Πρέπει να το καθορίσετε πριν από το ετικέτα.
  • = Αυτό είναι το ριζικό στοιχείο ενός αρχείου HTML. Όλα όσα γράφετε ξεκινούν και .
  • = Αυτό είναι το τμήμα πληροφορίας μεταδεδομένων για ένα πρόγραμμα περιήγησης. Οι κώδικες μέσα σε αυτήν την ετικέτα δεν έχουν οπτική έξοδο.
  • = Αυτό είναι το μέρος που παρέχει ένα πρόγραμμα περιήγησης ιστού. Αυτό που βλέπετε ακριβώς σε έναν ιστότοπο είναι η απόδοση κωδικών μεταξύ και .

2. Ετικέτες HTML

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

Οι ετικέτες HTML έχουν συνήθως μια ετικέτα ανοίγματος και κλεισίματος. Η ετικέτα ανοίγματος έχει τη λέξη-κλειδί που περιβάλλεται από ένα σύμβολο μικρότερο από (<) και μεγαλύτερο από (>). Η ετικέτα κλεισίματος έχει όλα τα ίδια εκτός από μια επιπλέον κάθετο (/) μετά το σύμβολο μικρότερο από (<).

(2a) Κεφαλίδες

Όλες οι επικεφαλίδες πηγαίνουν μεταξύ τους και . Περιέχουν μετα-πληροφορίες για το πρόγραμμα περιήγησης ιστού και τις μηχανές αναζήτησης. Βασικά δεν έχουν οπτική έξοδο.

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

Κώδικας:

Η πρώτη μου ιστοσελίδα
Ετικέτα τίτλου - Δείγματα HTML
Η ετικέτα τίτλου εμφανίζεται στην κορυφή του προγράμματος περιήγησης.

Η ετικέτα συνδέσμου συνδέει τη σελίδα HTML με εξωτερικούς πόρους. Η κύρια χρήση του είναι η σύνδεση σελίδας HTML με φύλλα στυλ CSS. Είναι μια αυτο-κλειστή ετικέτα και δεν χρειάζεται το τέλος . Εδώ rel σημαίνει σχέση με το αρχείο και src σημαίνει την πηγή.

Κώδικας:

Το Meta είναι μια άλλη ετικέτα με αυτοκόλλητο που παρέχει μετα-πληροφορίες ενός αρχείου html. Οι μηχανές αναζήτησης και άλλες υπηρεσίες διαδικτύου χρησιμοποιούν αυτές τις πληροφορίες. Οι μετα-ετικέτες είναι απαραίτητες αν θέλετε να βελτιστοποιήσετε τη σελίδα σας για τις μηχανές αναζήτησης.

Κώδικας:

<meta name="description" content="This is the short description that search engines show"

Η ετικέτα δέσμης ενεργειών χρησιμοποιείται για τη συμπερίληψη δέσμης ενεργειών διακομιστή ή τη δημιουργία συνδέσμου σε εξωτερικό αρχείο δέσμης ενεργειών. Μπορεί να έχει δύο χαρακτηριστικά στην ετικέτα ανοίγματος. Ο ένας είναι ο τύπος και ο άλλος είναι η πηγή (src).

Κώδικας:

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

Κώδικας:

Αλίμονο! Τα σενάρια είναι απενεργοποιημένα.

(2b) Ετικέτες σώματος

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

προς το

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

Κώδικας:

Αυτή είναι μια επικεφαλίδα h1 Αυτή είναι μια επικεφαλίδα h1 Αυτή είναι μια επικεφαλίδα h1 Αυτή είναι μια επικεφαλίδα h2 Αυτή είναι μια επικεφαλίδα h2 Αυτή είναι μια επικεφαλίδα h2

Παραγωγή:

Μορφοποίηση ετικετών

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

Κώδικας:

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

Παραγωγή:

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

Παράδειγμα:

You can comment out any code by surrounding them in this way -->

(2c) Άλλες σημαντικές ετικέτες HTML

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

Η δομή είναι ίδια. Έχει ένα άνοιγμα και ένα κλείσιμο . Το κείμενο που θέλετε να αγκυροβολήσετε ξεκινά μεταξύ και .

Υπάρχουν ορισμένα χαρακτηριστικά που καθορίζουν πού και πώς ο χρήστης πηγαίνει αφού τον κάνει κλικ.

  • ahref = "" = Ορίζει τον σύνδεσμο προορισμού. Ο σύνδεσμος πηγαίνει μεταξύ των διπλών εισαγωγικών.
  • στόχος = "" = Καθορίζει εάν το URL θα ανοίξει σε μια νέα καρτέλα του προγράμματος περιήγησης ή στην ίδια καρτέλα. Το target = "_ blank" είναι για τη νέα καρτέλα και το target = "_ self" είναι για άνοιγμα στην ίδια καρτέλα.
  • rel = "" = Ορίζει τη σχέση της τρέχουσας σελίδας με τη συνδεδεμένη σελίδα. Εάν δεν εμπιστεύεστε τη συνδεδεμένη σελίδα, μπορείτε να ορίσετε το rel = "nofollow".

Κώδικας:

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

Παραγωγή:

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

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

  • src = "" = Αυτό είναι για τον ορισμό του συνδέσμου προέλευσης της εικόνας. Βάλτε το σύνδεσμο δεξιά μεταξύ των διπλών εισαγωγικών.
  • alt = "" = Πρόκειται για εναλλακτικό κείμενο. Όταν η εικόνα σας δεν φορτώνει, αυτό το κείμενο θα δώσει στους χρήστες μια ιδέα για την εικόνα που λείπει.
  • πλάτος = "" = Ορίζει το πλάτος μιας εικόνας σε εικονοστοιχεία.
  • Ύψος = "" = Ορίζει το ύψος μιας εικόνας σε εικονοστοιχεία.

Παράδειγμα:

Αυτό είναι το Googleplex τον Αύγουστο του 2014. Αυτή η εικόνα έχει πλάτος 500 pixel και ύψος 375 pixel.

Παραγωγή:

Συμβουλές: Θέλετε να εισαγάγετε μια εικόνα με δυνατότητα κλικ; Τυλίξτε τον κωδικό εικόνας με μια ετικέτα. Δείτε πώς πηγαίνει.

ή

Η ετικέτα λίστας είναι για τη δημιουργία μιας λίστας στοιχείων. σημαίνει λίστες με παραγγελία (αριθμημένη λίστα) και σημαίνει μη ταξινομημένες λίστες (κουκκίδες).

Τα στοιχεία της λίστας μέσα στο ή έχει ετικέτα με . li σημαίνει λίστα. Μπορείτε να έχετε όσα πολλά όπως θέλετε μέσα στον γονέα ή ετικέτα.

Κώδικας:

Αυτή είναι μια λίστα με παραγγελίες: Θέμα 1 Θέμα 2 Θέμα 3 Αυτή είναι μια λίστα χωρίς ταξινόμηση: Θέμα 1 Θέμα 2 Θέμα 3

Παραγωγή:

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

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

Κώδικας:

Ονομα Ηλικία Επάγγελμα Τζο 27 Επιχειρηματίας Κάλαντα 26 Νοσοκόμα Σιμόνε 39 Καθηγητής

Παραγωγή:

Σημείωση: Τιμές μέσα στο πρώτο είναι επικεφαλίδες. Έτσι, χρησιμοποιήσαμε που εφαρμόζει έντονο εφέ κειμένου στο κείμενο.

Ομαδοποίηση πινάκων

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

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

Οι ετικέτες ομαδοποίησης πινάκων είναι:

  • = Για την περιτύλιξη των επικεφαλίδων ενός πίνακα. Εκτυπώνει σε κάθε σελίδα διαχωρισμού του πίνακα.
  • = Για την αναδίπλωση των κύριων δεδομένων ενός πίνακα. Μπορείτε να έχετε όσα πολλά όπως χρειάζεστε. ΕΝΑ ετικέτα σημαίνει μια ξεχωριστή ομάδα δεδομένων.
  • = Για την περιτύλιξη των πληροφοριών υποσέλιδου ενός πίνακα. Εκτυπώνει σε κάθε σελίδα διαχωρισμού του πίνακα.

Σημειώστε ότι δεν είναι υποχρεωτική η χρήση ομαδοποίησης. Μπορείτε να το χρησιμοποιήσετε για να κάνετε μεγαλύτερα τραπέζια πιο ευανάγνωστα. Ενώ ορισμένοι ειδικοί προγραμματιστές χρησιμοποιούν αξιοσημείωτα αυτές τις ετικέτες ως CSS Selectors.

Εδώ είναι πώς μπορούμε να ομαδοποιήσουμε τον παραδειγματικό πίνακα μας , και :

Κώδικας:

Ονομα Ηλικία Επάγγελμα Γιάννης 27 Επιχειρηματίας Κάλαντα 26 Νοσοκόμα Σιμόνε 39 Καθηγητής Σύνολο ατόμων: 3

Παραγωγή:

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

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

Μπορείτε να χρησιμοποιήσετε μία από τις δύο μεθόδους, να πάρετε ή να δημοσιεύσετε. Get Get στέλνει όλες τις πληροφορίες στη μορφή URL, όπου η Post στέλνει τις πληροφορίες στο σώμα του μηνύματος.

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

Η ετικέτα χρησιμοποιείται για τη δημιουργία ετικετών και τη σύνδεσή τους με εισόδους. Ο κανόνας της συσχέτισης των ετικετών με τις εισόδους είναι ότι έχουν την ίδια τιμή στο χαρακτηριστικό = "" of label και id = "" χαρακτηριστικό της εισαγωγής.

Κώδικας:

Ονομα: Επίθετο: Σύντομο Βιογραφικό: Γένος: Αρσενικός Θηλυκός

Παραγωγή:

Σημείωση: Έχω επισημάνει την ενέργεια σε τιμή null επειδή δεν ήταν συνδεδεμένη με κανένα διακομιστή για να επεξεργαστεί τις πληροφορίες.

3. Χαρακτηριστικά HTML

Τα χαρακτηριστικά είναι ένας τύπος τροποποιητών για ετικέτες HTML. Προσθέτουν νέες διαμορφώσεις στις ετικέτες HTML.

Ένα χαρακτηριστικό μοιάζει με attributename = ”” και βρίσκεται στην ετικέτα HTML έναρξης. Η τιμή του χαρακτηριστικού πηγαίνει μεταξύ των διπλών εισαγωγικών.

id = "" και class = ""

id και κλάση είναι τα αναγνωριστικά των ετικετών HTML. Διαφορετικά ονόματα ορίζονται σε διαφορετικά στοιχεία HTML χρησιμοποιώντας αναγνωριστικά. Μπορείτε να χρησιμοποιήσετε ένα αναγνωριστικό κλάσης για πολλά στοιχεία. Ωστόσο, δεν μπορείτε να χρησιμοποιήσετε ένα αναγνωριστικό ταυτότητας για πολλά στοιχεία.

Κώδικας:

Αυτός είναι ο κύριος τίτλος

href = ""

href σημαίνει Hypertext Reference. Παραπέμπουν τους χρήστες σε συνδέσμους αναφοράς. Η ετικέτα αγκύρωσης χρησιμοποιεί το href για την αποστολή χρηστών σε μια διεύθυνση URL προορισμού.

Κώδικας:

Google

src = ""

src σημαίνει πηγή. Ορίζει την πηγή ενός μέσου ή ενός πόρου που χρησιμοποιείτε στο αρχείο HTML. Η πηγή μπορεί να είναι είτε τοπική διεύθυνση είτε διεύθυνση URL τρίτου μέρους.

Κώδικας:

alt = ""

alt σημαίνει εναλλακτική λύση. Πρόκειται για ένα αντίγραφο ασφαλείας που χρησιμοποιείται όταν δεν είναι δυνατή η φόρτωση ενός στοιχείου HTML.

Κώδικας:

στυλ = ""

style χρησιμοποιείται συχνά σε ετικέτες HTML. Κάνει την εργασία του CSS μέσα στην ετικέτα HTML. Οι ιδιότητες στυλ σας περνούν ανάμεσα στα διπλά εισαγωγικά.

Κώδικας:

Αυτός είναι ένας άλλος τίτλος

4. Οθόνη κώδικα: Block vs Inline

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

Πρώην: , , - , φόρμα κ.λπ.

Ορισμένα στοιχεία παίρνουν μόνο τον απαιτούμενο χώρο και δεν ξεκινούν σε μια νέα γραμμή. Αυτά είναι "Inline" στοιχεία.

Π.χ .: , , και τα λοιπά.

Θα χρειαστεί να διαφοροποιήσετε τα στοιχεία μπλοκ από το inline όταν θα χρησιμοποιείτε στυλ CSS. Σε αυτόν τον οδηγό HTML, δεν είναι πολύ απαραίτητο.

Κώδικας:

Η πρώτη μου ιστοσελίδα Αυτή είναι μια επικεφαλίδα H2. Έχει οθόνη μπλοκ. Αυτή είναι μια άλλη επικεφαλίδα H2. Εδώ η υπογραμμισμένη ετικέτα έχει Inline οθόνη.

Παραγωγή:

5. Διπλό απόσπασμα έναντι μεμονωμένου εισαγωγικού σε HTML

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

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

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

6. Σημασιολογικός HTML έναντι μη σημασιολογικού HTML

Η σημασιολογική HTML είναι η τελευταία έκδοση της HTML, η οποία καλείται επίσης HTML5. Είναι η ανεπτυγμένη έκδοση των μη σημασιολογικών HTML και XHTML.

Γιατί είναι καλύτερο το HTML5; Σε προηγούμενες εκδόσεις, τα στοιχεία HTML ταυτοποιήθηκαν με ονόματα id / class. Για παράδειγμα: θεωρήθηκε άρθρο.

Σε HTML5, Η ετικέτα αναπαριστάται ως άρθρο χωρίς να χρειάζεται αναγνωριστικό ταυτότητας / κλάσης.

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

Ακολουθεί μια λίστα με ορισμένες δημοφιλείς ετικέτες HTML5:

  • = Πρόκειται για την περιτύλιξη του κύριου περιεχομένου που θέλετε να εμφανίζονται οι θεατές σας.
  • = Αυτό είναι για την επισήμανση του τμήματος κεφαλίδας ενός περιεχομένου όπως τίτλος ή μετα-συγγραφέας.
  • = Προσδιορίζει ένα περιεχόμενο που καθορίζεται από το χρήστη ή ανεξάρτητο περιεχόμενο για τους θεατές σας.
  • = Μπορεί να ομαδοποιήσει οποιονδήποτε κώδικα όπως την κεφαλίδα, το υποσέλιδο ή την πλευρική γραμμή. Μπορείτε να πείτε, είναι η σημασιολογική μορφή του div.
  • = Εδώ ανήκει το περιεχόμενο υποσέλιδου, η αποποίηση ευθυνών ή το κείμενο πνευματικών δικαιωμάτων.
  • = Σας επιτρέπει να εισάγετε αρχεία ήχου χωρίς να έχετε κάποιο πρόβλημα με το plugin.
  • = Μου αρέσει , μπορείτε να εισαγάγετε βίντεο χρησιμοποιώντας αυτήν την ετικέτα χωρίς προβλήματα προσθήκης.

Μια απλή δομή HTML5 θα μοιάζει με αυτή:

Η πρώτη μου ιστοσελίδα Μενού 8 Μενού 1 Αυτός είναι ο τίτλος του άρθρου Δημοσιεύτηκε από τον John Doe Το περιεχόμενο του άρθρου πηγαίνει εδώ Πνευματικά δικαιώματα 2 John Doe

7. Επικύρωση HTML

Οι περισσότεροι επαγγελματίες του διαδικτύου επικυρώνουν τον κωδικό τους μετά την ολοκλήρωσή τους. Γιατί είναι απαραίτητο να επικυρώσετε έναν κώδικα όταν λειτουργεί καλά;

Υπάρχουν δύο πιθανές αιτίες για την επικύρωση των κωδικών σας:

  1. Θα σας βοηθήσει να κάνετε τον κώδικα σας cross-browser και cross-platform συμβατό. Ο κώδικας ενδέχεται να μην εμφανίζει κάποιο σφάλμα στο τρέχον πρόγραμμα περιήγησης, αλλά μπορεί να υπάρχει και σε κάποιο άλλο. Η επικύρωση του κώδικα θα το διορθώσει.
  2. Οι μηχανές αναζήτησης και άλλα προγράμματα ιστού ενδέχεται να σταματήσουν να ανιχνεύουν τη σελίδα σας αν έχετε σφάλματα σε αυτήν. Μπορείτε να επιβεβαιώσετε μέσω της επικύρωσης ότι δεν έχετε κάποιο σημαντικό σφάλμα.

W3C Validator είναι η πιο δημοφιλής υπηρεσία για την επικύρωση του κώδικα. Έχουν αρκετές μεθόδους για την επικύρωση κωδικών. Μπορείτε είτε να ανεβάσετε ένα αρχείο είτε να εισάγετε απευθείας τον κώδικα στη μηχανή επικύρωσης.

8. Άλλοι χρήσιμοι πόροι

Το HTML είναι ένα θέμα συνεχούς μάθησης. Περισσότερες ενημερωμένες εκδόσεις HTML ενδέχεται να έρθουν νωρίτερα. Επομένως πρέπει να ενημερώνεστε και να συνεχίζετε να ασκείτε. Η πρακτική είναι τι aces HTML.

Ακολουθούν ορισμένοι χρήσιμοι πόροι για εσάς: