HTML документите се състоят от елементи, които се маркират с така наречените тагове. Таговете се отличават с остри скоби. Почти всички HTML елементи се маркират с начален и краен таг. Това, което се намира между тях, се нарича обхват.
Пример:
<h1>PSD-Tutorials.de – твоят графичен, уеб и образователен портал</h1>
Този синтаксис записва първородно заглавие в документа. Началният таг <h1> казва на браузъра, че става въпрос за такова заглавие. Краен таг </h1> приключва заглавието. Затварящите тагове се отличават с отваряща остра скоба, последвана от наклонена черта </.
Възниква въпрос относно начина на писане на имената на елементите: Каква е политиката за главни и малки букви? Както вече беше описано, в този поредицата се фокусира върху HTML5. Тук наистина можете да избирате между главни и малки букви. Лично аз предпочитам последователна употреба на малки букви и ще продължа така и в тази поредица. В принцип обаче след HTML5 следните неща биха били правилни:
<h1>PSD-Tutorials.de – твоят графичен, уеб и образователен портал</h1> <H1>PSD-Tutorials.de – твоят графичен, уеб и образователен портал</H1> <h1>PSD-Tutorials.de – твоят графичен, уеб и образователен портал</H1>
Елементите, които се отварят, също трябва да се затворят. Така че ако сложите <h1>, трябва да го затворите след края на дефиницията на заглавието </h1>. Въпреки това в HTML5 има изключения като например елементи на списъци и абзаци, за които ще говорим по-късно.
В HTML съществуват така наречените самостоятелни тагове. Те се състоят само от един таг, а не от начален и краен таг. Типичен пример за това е <br />.
Това е един ред.<br /> Това е друг ред.
Този <br /> дефинира нов ред.
Такива празни тагове обикновено се затварят с наклонена черта, въпреки че в HTML5 това не е задължително. Тук би било възможно и следното:
<br>
През тази поредица ще научите още за тези самостоятелни тагове.
Влагане на елементи
HTML елементите също могат да бъдат влагани. Представете си, че искате да оформите текста курсив в рамките на заглавие. За италик се използва елементът i.
<h1>PSD-Tutorials.de – <i>твоят графичен, уеб и образователен портал</i></h1>
Запазете правилната последователност при влагането. Затваряте последно елемента, който е първо бил отворен. В този случай това е h1-а.
Използване на атрибути
В рамките на отварящи тагове или самостоятелни тагове могат да се дефинират така наречени атрибути. Тези атрибути могат да зададат на елементите допълнителни свойства. В по-ранните версии на HTML са били дефинирани много атрибути за елементите. Това се дължи на смесването между структура и дизайн. Например, дефинициите на цветове биха били директно зададени на HTML елемент чрез съответния атрибут. В момента, благодарение и на CSS, се позволява стриктно разделение на дизайна и структурата, което трябва да се спазва. Следователно има само сравнително малко използвани атрибути.
Важен атрибут е id. Чрез този атрибут на HTML елемент се дава уникално име, което по-късно може да се използва, например от CSS или JavaScript.
<h1 id="head">PSD-Tutorials.de – твоят графичен, уеб и образователен портал</h1>
За да зададете атрибут, слагате интервал след h1. Следва името на атрибута, което обикновено се пише с малки букви. След името на атрибута следва знакът за равенство. След него е атрибутната стойност, зададена в кавички.
Възможно е на един елемент да се зададат няколко атрибути. Например е съвсем обичайно да се дефинира за един елемент и клас и идентификатор. Ето един пример: Чрез id се определя уникален идентификатор за заглавието. Класът, от друга страна, се използва, за да се определи в коя категория ще бъде класирано заглавието. Така може да се реши, че всички елементи с клас blue ще бъдат показани в синьо. (За този CSS и теема за цветове ще бъдат разгледани по-подробно по-късно).
<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.
