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

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

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

Τι είναι το HTML;

Με απλά λόγια, Η HTML αντιπροσωπεύει την τυπική γλώσσα σήμανσης για τη δημιουργία ιστοσελίδων στο διαδίκτυο. Αντιπροσωπεύει το Hyper Text Markup Language και η πιο κύρια λειτουργία του είναι να καθιερώνει τη δομή, τη διάταξη και την παρουσίαση μεμονωμένων σελίδων προορισμού. Ενώ τα προγράμματα περιήγησης ιστού δεν εμφανίζουν απευθείας γλώσσα HTML, παίζει καθοριστικό ρόλο στη δημιουργία ενός ορατού, προσβάσιμου και εύχρηστου ιστότοπου.

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

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

Πού χρησιμοποιείται η HTML;

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

• Δημιουργήστε προσαρμόσιμα στοιχεία σε μια υπάρχουσα σελίδα. Αν σκοπεύετε να επιτρέψετε σχόλια αναρτήσεων ιστολογίου ή τη δημοσίευση περιεχομένου που δημιουργείται από χρήστες στον ιστότοπό σας, μπορείτε να χρησιμοποιήσετε τμήματα κώδικα HTML για να το ενεργοποιήσετε. Αυτά τα στοιχεία θα επιτρέψουν στους χρήστες να δώσουν έμφαση σε λέξεις-κλειδιά, να ενσωματώσουν συνδέσμους και να μορφοποιήσουν σχόλια ανάλογα με τους περιορισμούς που θέτετε ως συντονιστές.
• Δημιουργήστε επιπλέον περιεχόμενο για email. Το ηλεκτρονικό ταχυδρομείο χρησιμοποιεί επίσης την HTML ως γλώσσα για εμπλουτισμένα μηνύματα κειμένου, τα οποία διαθέτουν συνδέσμους, κείμενο και μια ποικιλία άλλων στοιχείων που δεν μπορούν να εμφανιστούν μόνο σε απλό κείμενο. Έτσι, εάν θέλετε να μοιραστείτε ένα ebook που σχετίζεται με τον ιστότοπό σας μέσω email, μπορείτε να χρησιμοποιήσετε HTML για να βελτιστοποιήσετε τον αντίκτυπο του μηνύματός σας.
• Κατανοήστε έγγραφα βοήθειας εκτός σύνδεσης που είναι εγκατεστημένα στον υπολογιστή σας. Είναι ενδιαφέρον ότι η HTML χρησιμοποιείται ως μορφή για έγγραφα βοήθειας που βασίζονται σε υπολογιστή και είναι προσβάσιμα εκτός σύνδεσης. Οι βασικές γνώσεις HTML μπορούν, επομένως, να σας βοηθήσουν να κατανοήσετε προβλήματα με το υλικό σας και να τα επιλύσετε πιο γρήγορα, κάτι που με τη σειρά του μπορεί να διασφαλίσει ότι μπορείτε να επαναφέρετε τον ιστότοπό σας πιο γρήγορα σε περιπτώσεις που είναι εκτός σύνδεσης.

Δομή σελίδας HTML

Για να μπορέσετε να δημιουργήσετε μια σελίδα HTML, χρειάζεστε τα βασικά.

Συνήθως, μια σελίδα θα αποτελείται από τρία δομικά στοιχεία:

1. Επί κεφαλής: Η κεφαλίδα περιέχει περιεχόμενο σχετικό με όλες τις σελίδες στον ιστότοπό σας, όπως ένα λογότυπο ή όνομα ιστότοπου και ένα σύστημα πλοήγησης. Η κεφαλίδα εμφανίζεται σε κάθε σελίδα.
2. Κύριο σώμα: Αυτό καταλαμβάνει τη μεγαλύτερη περιοχή σε μια ιστοσελίδα. Περιέχει περιεχόμενο συγκεκριμένο για τη σελίδα που προβάλλεται.
3. Υποσέλιδο: Το περιεχόμενο του υποσέλιδου περιλαμβάνει συνήθως στοιχεία επικοινωνίας, διεύθυνση αποστολής ή νομικές ειδοποιήσεις. Όπως η κεφαλίδα, το υποσέλιδο εμφανίζεται σε κάθε σελίδα, αλλά βρίσκεται στο κάτω μέρος.

Δείτε πώς μοιάζουν αυτά τα βασικά δομικά στοιχεία όταν ενώνονται:

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

Ετικέτες HTML

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

Παρακάτω, θα ρίξουμε μια ματιά στις πιο κοινές ετικέτες προτού διερευνήσουμε πώς μπορούν να αξιοποιηθούν για τη δημιουργία συγκεκριμένων στοιχείων στη σελίδα:

Ετικέτες επικεφαλίδας

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

Στη συνέχεια, πρέπει να εφαρμόσετε μια ετικέτα κλεισίματος στο τέλος της επικεφαλίδας για να ενσωματώσετε το κείμενο και θα εμφανιστεί ως εξής σε μορφή HTML:

Μόλις επιβεβαιωθεί, αυτό θα μεταφραστεί στην ακόλουθη αισθητική στη σελίδα προορισμού του ιστότοπού σας:

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

Ετικέτες παραγράφων

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

Εκτός της μορφής HTML, αυτό θα αναλύσει το κείμενο ως εξής στην ολοκληρωμένη ιστοσελίδα σας:

Ετικέτες αλλαγής γραμμής

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

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

Μόλις εφαρμοστεί, αυτό θα αναλύσει το κείμενο ως εξής:

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

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

Οριζόντιες γραμμές

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

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

Ετικέτες εικόνας

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

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

Στοιχεία HTML

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

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

Ορισμός στοιχείων HTML

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

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

Χρήση ένθετων στοιχείων HTML

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

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

Έντονο, πλάγιο και διαγραμμένο κείμενο σε HTML

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

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

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

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

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

Σε αυτήν την περίπτωση, το κείμενο θα εμφανιστεί ως εξής στο έγγραφό σας ή στη σελίδα προορισμού:  

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

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

Εάν οι ετικέτες είναι τα δομικά στοιχεία που κατασκευάζουν και ορίζουν στοιχεία, τότε τα χαρακτηριστικά HTML μπορούν να χρησιμοποιηθούν για την προσαρμογή των χαρακτηριστικών τους (όπως στυλ, χρώμα και γλώσσα. Όλα τα στοιχεία HTML έχουν βασικά χαρακτηριστικά, τα οποία παρέχουν βασικές πληροφορίες και καθορίζονται πάντα στην ετικέτα stat Τείνουν να έρχονται σε ζευγάρια, επομένως συχνά εμφανίζονται με την ακόλουθη μορφή: name=”value.”

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

Υπάρχει ένας μεγάλος αριθμός χαρακτηριστικών που μπορούν να εφαρμοστούν στα στοιχεία HTML σας, αλλά αυτά που σχετίζονται περισσότερο με τους νεοσύστατους webmasters είναι:

Το χαρακτηριστικό "lang".

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

Ακολουθώντας το χαρακτηριστικό lang, τα δύο πρώτα γράμματα προσδιορίζουν τη γλώσσα (που είναι τα αγγλικά σε αυτήν την περίπτωση). Μετά την παύλα, τα επόμενα δύο γράμματα καθιερώνουν τη διάλεκτο, αν και αυτό δεν θα υπάρχει για κάθε γλώσσα. Είναι σημαντικό να αποκτήσετε σωστά αυτό το χαρακτηριστικό, εάν θέλετε να προσεγγίσετε με επιτυχία το κοινό σας.

Το χαρακτηριστικό 'align'

Έχουμε ήδη αγγίξει τη μορφή των χαρακτηριστικών HTML (όνομα=”τιμή”) και η καλύτερη ενσωμάτωση αυτού συμβαίνει όταν προσπαθείτε να ευθυγραμμίσετε το περιεχόμενο στα στοιχεία σας. Μπορείτε να αποφασίσετε να κεντράρετε όλες τις παραγράφους σε μια συγκεκριμένη σελίδα, για παράδειγμα, με τη στοίχιση να είναι η ιδιότητα που θέλετε να ορίσετε. Στη συνέχεια, «κέντρο» είναι η τιμή του χαρακτηριστικού, αν και έχετε την επιλογή να ευθυγραμμίσετε το κείμενό σας προς τα αριστερά ή προς τα δεξιά.

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

Το χαρακτηριστικό 'href'

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

Οι σύνδεσμοι HTML ορίζονται με την ετικέτα, η οποία περιλαμβάνει τον σύνδεσμο προορισμού μαζί με το συνδεδεμένο κείμενο αγκύρωσης που θα φιλοξενήσει τη διεύθυνση URL. Είναι το χαρακτηριστικό 'href' που καθορίζει τη διεύθυνση του ιστότοπου, ωστόσο, αυτό ενσωματώνεται ως μέρος της ετικέτας έναρξης. Κωδικοποιείται σε HTML ως εξής:

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

Το χαρακτηριστικό «χρώμα».

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

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

Μόλις εφαρμοστεί, αυτό το στοιχείο θα εμφανιστεί ως εξής στον ιστότοπό σας:

Για άλλη μια φορά, υπάρχει σαφής διάκριση μεταξύ των ετικετών έναρξης και κλεισίματος που καθορίζουν το στοιχείο, ενώ αυτό είναι ένα από τα πιο εύκολα χαρακτηριστικά για εφαρμογή σε HTML. Υπογραμμίζει επίσης περαιτέρω τη μορφή name=”value των χαρακτηριστικών HTML, κάνοντας τη διαδικασία εκμάθησης και την εφαρμογή αυτών πολύ πιο εύκολη στον ιστότοπό σας.

Δοκιμάστε το μόνοι σας

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

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

Ερωτήσεις:

1. Συμπληρώστε το στοιχείο κεφαλίδας με τη σωστή ετικέτα κλεισίματος.
2. Κάντε την κεφαλίδα έντονη.
3. Εισαγάγετε μια οριζόντια γραμμή κάτω από την κεφαλίδα.
4. Χρησιμοποιήστε το χαρακτηριστικό χρώματος και τη σκιά «Ευχαριστώ για την επίσκεψη» με πράσινο χρώμα
5. Εισαγάγετε αυτόν τον υπερσύνδεσμο (https://www.w3schools.com/html/) στο κείμενο αγκύρωσης "Μάθετε περισσότερα".
6. Στην κορυφή της σελίδας, χρησιμοποιήστε τη μορφή name=”value” για να στοιχίσετε τις παραγράφους προς τα αριστερά

Στατιστικά και γεγονότα γλώσσας HTML

1. Τα στοιχεία HTML, κεφάλι και σώμα αποτελούν μέρος της προδιαγραφής HTML από τα μέσα της δεκαετίας του 1990 και μέχρι πριν από λίγα χρόνια, ήταν τα κύρια στοιχεία που χρησιμοποιούνταν για να δώσουν δομή στα έγγραφα HTML. Ωστόσο, η κατάσταση έχει αλλάξει δραματικά τα τελευταία χρόνια καθώς η HTML5 έχει προσθέσει μια σειρά από νέες ετικέτες που μπορούν να χρησιμοποιηθούν για να προσθέσουν πλούσιο σημασιολογικό νόημα στη δομή ενός εγγράφου HTML.
2. Τα έγγραφα HTML απαιτούνται για να ξεκινήσουν με μια δήλωση τύπου εγγράφου (ανεπίσημα, "doctype"). Στα προγράμματα περιήγησης, το doctype βοηθά στον καθορισμό της λειτουργίας απόδοσης. Η HTML5 δεν ορίζει DTD. Επομένως, στην HTML5 η δήλωση doctype είναι απλούστερη και συντομότερη.
3. Τα προγράμματα περιήγησης για κινητά έχουν υιοθετήσει πλήρως το HTML5, επομένως η δημιουργία έργων έτοιμα για κινητά είναι τόσο εύκολη όσο η σχεδίαση και η κατασκευή για τις μικρότερες οθόνες αφής τους — εξ ου και η δημοτικότητα του Responsive Design. Υπάρχουν μερικές εξαιρετικές μετα-ετικέτες που σας επιτρέπουν επίσης να κάνετε βελτιστοποίηση για κινητά.  
4. Το 78% των προγραμματιστών περιεχομένου συμφωνεί ότι η δομή είναι κατάλληλη για τη δημιουργία εφαρμογών για κινητά και το 68% λέει ότι είναι κατάλληλη για το σχεδιασμό οποιουδήποτε και όλων των ειδών εφαρμογών.
5. Το HTML5 συνοδεύεται επίσης από μια σειρά από εξαιρετικά API που σας επιτρέπουν να δημιουργήσετε μια καλύτερη εμπειρία χρήστη και μια πιο βελτιωμένη, πιο δυναμική εφαρμογή Ιστού — εδώ είναι μια γρήγορη λίστα με εγγενή API:
   • Μεταφορά και απόθεση (DnD)
   • Βάση δεδομένων αποθήκευσης εκτός σύνδεσης
   • Διαχείριση ιστορικού προγράμματος περιήγησης
   • Επεξεργασία εγγράφου
   • Χρονισμένη αναπαραγωγή πολυμέσων
6. Το HTML5 δεν ελέγχεται από μία εταιρεία. Ένα από τα καλύτερα χαρακτηριστικά του έγκειται στο γεγονός ότι είναι ένα ανοιχτό πρότυπο. Οι προγραμματιστές έχουν την ελευθερία να αφήνουν τη δημιουργικότητά τους να ρέει και να προσθέτουν όσες περισσότερες λειτουργίες και δυνατότητες μπορούν.
7. Σε σύγκριση με άλλα προγράμματα περιήγησης, κάθε ενημέρωση του Google Chrome φροντίζει να περιλαμβάνει υποστήριξη για HTML5. Επιπλέον, το προεπιλεγμένο πρόγραμμα αναπαραγωγής του YouTube είναι πλέον HTML5 και οι διαφημίσεις Flash της Google μετατρέπονται πλέον σε HTML5.
8. Χρήση HTML5 από προγραμματιστές (ανά περιοχή):
   • Βόρεια και Λατινική Αμερική – 70%
   • Νότια Αμερική – 61%
   • ASPAC – 60%
   • Αυστραλία - 60%
   • Ευρώπη - 59%
   • Αφρική – 50%

Συμπέρασμα

Ενώ η HTML δημιουργήθηκε μόλις το 1991 (με την πρώτη έκδοση της γλώσσας κωδικοποίησης που κυκλοφόρησε στη συνέχεια το 1995), έγινε γρήγορα ένα σημαντικό εργαλείο στο σχεδιασμό λειτουργικών και οπτικά ελκυστικών ιστοσελίδων. Το επίπεδο επιρροής της HTML συνεχίζει να εξελίσσεται επίσης, με την τελευταία επανάληψη (HTML5) να υιοθετείται από έναν αυξανόμενο αριθμό ιστότοπων σε όλο τον κόσμο.

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