Τα έγγραφα HTML αποτελούνται από στοιχεία που επισημαίνονται με τις λεγόμενες ετικέτες (Tags). Οι ετικέτες αναγνωρίζονται από τα γωνιακά αγκίστρα. Σχεδόν όλα τα στοιχεία HTML χαρακτηρίζονται από μια αρχική και μια τελική ετικέτα. Αυτό που βρίσκεται μεταξύ ονομάζεται πεδίο εφαρμογής.
Ένα παράδειγμα:
<h1>PSD-Tutorials.de – το ιστολόγιό σας για Γραφιστική, Web & Μάθηση</h1>
Μέσω αυτής της σύνταξης γράφεται στο έγγραφο μία επικεφαλίδα πρώτης τάξης. Η αρχική ετικέτα <h1> δηλώνει στον περιηγητή ότι πρόκειται για τέτοια επικεφαλίδα. Η τελική ετικέτα </h1> τελειώνει την επικεφαλίδα. Αναγνωρίζετε τις τελικές ετικέτες από ένα ανοίγοντα γωνιακό αγκύλη, ακολουθούμενο από την κάθετο </.
Μια ερώτηση προκύπτει όσον αφορά την σύνταξη των ονομάτων των στοιχείων: Πώς είναι τα πράγματα με τα κεφαλαία και πεζά γράμματα; Όπως έχει ήδη αναφερθεί, η επικέντρωση σε αυτή τη σειρά είναι στο HTML5. Εδώ μπορείτε πραγματικά να επιλέξετε μεταξύ κεφαλαίων και πεζών γραμμάτων. Προσωπικά προτιμώ ένα συνεπή χρήση πεζών γραμμάτων και θα τηρήσω αυτή την αρχή σε αυτή τη σειρά. Γενικά όμως, μετά το HTML5 τα παρακάτω είναι σωστά:
<h1>PSD-Tutorials.de – το ιστολόγιό σας για Γραφιστική, Web & Μάθηση</h1> <H1>PSD-Tutorials.de – το ιστολόγιό σας για Γραφιστική, Web & Μάθηση</H1> <h1>PSD-Tutorials.de – το ιστολόγιό σας για Γραφιστική, Web & Μάθηση</H1>
Τα στοιχεία που ανοίγονται πρέπει να κλείνονται. Οπότε αν χρησιμοποιήσετε μια ετικέτα <h1>, πρέπει να την κλείσετε μετά τον ορισμό της επικεφαλίδας, με την ετικέτα κλεισίματος </h1>. Αν και υπάρχουν εξαιρέσεις στο HTML5, όπως για παράδειγμα οι καταχωρήσεις λίστας και οι παράγραφοι, αυτό θα συζητηθεί αργότερα.
Στο HTML υπάρχουν επίσης τα λεγόμενα αυτόνομα Standalone-Tags. Αυτά αποτελούνται μόνο από μια ετικέτα, όχι από αρχική και τελική ετικέτα. Ένα τυπικό παράδειγμα είναι <br />.
Αυτό είναι μια γραμμή.<br /> Αυτό είναι μια άλλη γραμμή.
Αυτό το <br /> καθορίζει έναν αλλαγή γραμμής.
Τέτοιες κενές ετικέτες κλείνονται συνήθως με τη χρήση της κάθετους, αν και στο HTML5 αυτό δεν είναι απαραίτητο. Εδώ μπορεί να γίνει και το εξής:
<br>
Θα μάθετε και άλλα από αυτές τις αυτόνομες ετικέτες κατά τη διάρκεια αυτής της σειράς.
Ενσωμάτωση στοιχείων
Τα στοιχεία HTML μπορούν επίσης να ενσωματώνονται. Φανταστείτε ότι θέλετε να δώσετε έμφαση σε ένα τμήμα κειμένου εντός μιας επικεφαλίδας. Για την προβολή σε πλάγια γραφή χρησιμοποιείται το στοιχείο i.
<h1>PSD-Tutorials.de – <i>το ιστολόγιό σας για Γραφιστική, Web & Μάθηση</i></h1>
Κατά την ενσωμάτωση, πρέπει να τηρείτε τη σωστή σειρά. Κλείνετε το τελευταίο στοιχείο που άνοιξε πρώτο. Στην παρούσα περίπτωση, αυτό είναι το στοιχείο h1.
Χρήση Χαρακτηριστικών
Μπορείτε να ορίσετε χαρακτηριστικά εντός των ανοιγόντων ετικετών ή των αυτόνομων ετικετών. Αυτά τα χαρακτηριστικά μπορούν να αποδώσουν επιπλέον ιδιότητες στα στοιχεία. Στα παλαιότερα χρόνια του HTML, ανατίθενταν πολλά χαρακτηριστικά στα στοιχεία. Αυτό οφειλόταν κυρίως στον αυθαιρετισμό μεταξύ δομής και σχεδίασης. Για παράδειγμα, έγιναν καθορισμοί χρώματος απευθείας στο στοιχείο HTML μέσω ενός αντίστοιχου χαρακτηριστικού. Σήμερα, είναι εφικτή μια αυστηρή διάκριση μεταξύ σχεδίασης και δομής, κυρίως χάρη στο CSS, το οποίο πρέπει να τηρείται. Γι' αυτό, υπάρχουν πλέον σχετικά λίγα χαρακτηριστικά που χρησιμοποιούνται.
Ένα σημαντικό χαρακτηριστικό είναι το id. Με αυτό το χαρακτηριστικό μπορείτε να αναθέσετε ένα μοναδικό όνομα σε ένα στοιχείο HTML, το οποίο μπορεί να χρησιμοποιηθεί για να αναφερθεί, για παράδειγμα, μέσω CSS ή JavaScript.
<h1 id="head">PSD-Tutorials.de – το ιστολόγιό σας για Γραφιστική, Web & Μάθηση</h1>
Για να αναθέσετε ένα χαρακτηριστικό, προσθέστε ένα κενό μετά το h1. Ακολουθεί το όνομα του χαρακτηριστικού, το οποίο συνήθως γράφεται με πεζά γράμματα. Μετά το όνομα του χαρακτηριστικού ακολουθεί το ισοδύναμο. Μέσα σε εισαγωγικά ακολουθεί η τιμή του χαρακτηριστικού.
Μπορείτε επίσης να αναθέσετε περισσότερα από ένα χαρακτηριστικά σε ένα στοιχείο. Έτσι, είναι απολύτως συνηθισμένο, για παράδειγμα, ένα στοιχείο να ορίσετε και μια κλάση και ένα id. Ένα παράδειγμα: Μέσω του id η επικεφαλίδα αναγνωρίζεται μοναδικά. Η κλάση εξυπηρετεί για το να ταξινομήσει
<h1 id="head" class="blue">PSD-Tutorials.de – το γραφικό σου, διαδικτυακό & εκπαιδευτικό πύλη</h1>
Die Attribute werden in diesem Fall durch ein Leerzeichen voneinander getrennt.
Επικύρωση του κώδικα
Einige grundlegende Syntaxregeln habt ihr nun bereits kennengelernt. Gerade am Anfang, wenn man HTML lernt, ist es wichtig, sich an diese Regeln zu halten. Was man sich nämlich einmal falsch angewöhnt hat, kriegt man nur schwer wieder aus dem Kopf. Ihr solltet daher euren HTML-Code immer auf Richtigkeit überprüfen bzw. validieren (lassen). Das müsst ihr natürlich nicht selbst machen. Hierfür gibt es entsprechende Online-Tools. Einen sogenannten Validator findet ihr beispielsweise unter http://validator.w3.org/.
Am besten wechselt ihr dort direkt in das Register Validate by direct Input. Hier kann man den zu überprüfenden HTML-Code direkt per Copy & Paste einfügen. Achtet unbedingt darauf, den kompletten Code der Datei einzufügen, also auch die DOCTYPE-Angabe.
Fügt, um den Validator zu testen, Folgendes in das Textfeld ein und klickt anschließend auf die Validate-Schaltfläche.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – το γραφικό σου, διαδικτυακό & εκπαιδευτικό πύλη</h1> </body> </html>
Das Ergebnis sollte folgendermaßen aussehen:
Hier ist alles in Ordnung. (An den zwei Warnungen müsst ihr euch in diesem Fall nicht stören). Erscheint also die Meldung This document was successfully checked as HTML5!, ist tatsächlich alles in Ordnung. Wie stellt sich das Ganze aber im Fehlerfall dar? Dazu könnt ihr einfach mal absichtlich einen Fehler in die Syntax einbauen.
<h1 id=head">PSD-Tutorials.de – το γραφικό σου, διαδικτυακό & εκπαιδευτικό πύλη</h1>
Hier wurde das einleitende Anführungszeichen bei head vergessen. Lässt man die Syntax jetzt noch einmal validieren, wird der Fehler erkannt.
Der Validator gibt daraufhin eine entsprechende Meldung aus. Was genau schiefgelaufen ist, kann man im unteren Fensterbereich ablesen.
Hier ist dann auch sehr schön beschrieben, was eigentlich der Fehler ist.
Line 8, Column 12: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.
<h1 id=head" >PSD-Tutorials.de</h1>
Ihr seht also direkt, in welcher Zeile eine fehlerhafte Eingabe erfolgte, und könnt diese korrigieren. Somit hilft euch der Validator also dabei, sauberen HTML-Code zu erstellen. Ihr solltet euren Code immer validieren lassen. Denn die Browser zeigen HTML-Code oftmals korrekt an, obwohl die Syntax fehlerhaft ist. In anderen Browsern, in denen ihr eure Seiten aber nicht testet, kann das hingegen ganz anders aussehen.
