A HTML dokumentumok elemekből állnak, melyeket az úgynevezett címkék határoznak meg. A címkéket hegyes zárójelek jelölik. Majdnem minden HTML elemet egy kezdő és egy záró címke határoz meg. Az, ami ezek között található, az a hatáskör.
Példa:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
Ez a szintaxis egy az első rendű cím megírására szolgáló elemet ír a dokumentumba. A kezdő <h1> címke megmutatja a böngészőnek, hogy egy ilyen címről van szó. A záró </h1> befejezi a címkét. A záró címkéket hegyes zárójel megkezdő részét követő perjellel </ lehet felismerni.
Egy kérdés merül fel az elemnevekről szóló írásmóddal kapcsolatban: Vajon mi a helyzet a nagy- és kisbetűkkel? Mint ahogy azt már korábban is leírtam, ez a sorozat az HTML5-re összpontosít. Itt ténylegesen választhatunk a kis- és nagybetűk között. Személy szerint azonban következetesen a kisbetűs írásmódot részesítem előnyben, és ezt a sorozatban is így fogom kezelni. Elméletileg azonban az alábbi dolgok helyesek HTML5 szerint:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1> <H1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1> <h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1>
Azokat az elemeket, melyeket megnyitunk, be is kell zárnunk. Tehát ha egy <h1> címkét helyezünk el, akkor azt az elvégzett címke meghatározása után be kell zárni </h1>. Bár vannak HTML5-ben kivételek, mint például a listaelemek és bekezdések, ezekről később többet is megtudhattok.
Egyébként az HTML-ben vannak úgynevezett önálló címkék is. Ezek csak egy címkéből állnak, nem kezdő- és záró címkéből. Egy tipikus példa rá a <br />.
Ez egy sor.<br /> Ez egy másik sor.
Ez a <br /> jelenti a sortörést.
Ezeket az üres címkéket általában perjellel zárjuk, még akkor is, ha ez az HTML5-ben nem feltétlenül szükséges. Itt például a következő is lehetséges:
<br>
Ezen a sorozaton belül még több ilyen önálló címkét fogtok megismerni.
Elemek beágyazása
A HTML elemeket általában be lehet ágyazni. Képzeljétek el, hogy egy címke belsejében szeretnétek egy szakaszt dőlt betűvel megjeleníteni. Az i kurszív jelzéshez használatos elem.
<h1>PSD-Tutorials.de – <i>dein Grafik-, Web- & Lernportal</i></h1>
A beágyazásnál figyeljetek a megfelelő sorrendre. Mindig az zárjátok be utoljára, amit először megnyitottatok. Ebben az esetben tehát az h1 elem a legutolsó.
Attribútumok használata
A megnyitó címkék vagy önálló címkék belül úgynevezett attribútumokat definiálhatunk. Ezek az attribútumok elemekre további tulajdonságokat rendelhetnek. A korábbi HTML időkben viszonylag sok attribútumot rendeltek az elemekhez. Ennek egyszerűen az volt az oka, hogy a struktúra és a design közötti keveredés miatt. Például színdefiníciókat közvetlenül az HTML elembe adtak meg a megfelelő attribútum segítségével. Időközben – természetesen a CSS-nek köszönhetően – lehetséges egy szigorú elkülönítés a design és a struktúra között, ami betartandó. Ezért csak viszonylag kevés attribútumot használnak.
Egy fontos attribútum az id. Ezen attribútum segítségével egyedülálló nevet adhatunk egy HTML elemnek, amellyel például CSS vagy JavaScript segítségével hivatkozhatunk rá.
<h1 id="head">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
Attribútumot rendelni egy elemhez, a h1 mögé szóközt szúrunk be. Erre következik az attribútum neve, melyet általában kisbetűvel írnak. Az attribútum neve mögött egyenlőségjel következik. Idézőjelek között zárva következik az attribútum értéke.
Egy elemhez egyébként több attribútumot is megadhatunk. Például elég normális módszer az, hogy egy elemnek meghatározunk egy osztályt és egy ID-t. Erre is egy példa: Az id az egyedi azonosításért felelős. Az osztály azért szolgál, hogy az elemet egy bizonyos kategóriába soroljuk. Így például meghatározhatjuk, hogy azok az elemek, amelyekhez a blue osztály van rendelve, kék színben jelenjenek meg. (Erről a CSS- és színtémáról részletesen később lesz szó).
<h1 id="head" class="blue">PSD-Tutorials.de – web- és grafikai tanulmányi portál</h1>
Az attribútumokat ebben az esetben szóköz választja el egymástól.
Kód ellenőrzése
Néhány alapvető szintaxis szabályt már megismertetek. Különösen az elején, amikor valaki HTML-t tanul, fontos ezeket a szabályokat betartani. Amit ugyanis egyszer elrontottál, nehéz kiiktatni az elmédből. Ezért mindig ellenőrizni kell az HTML kódod helyességét, vagy validálni (általában). Természetesen ezt nem kell magadnak csinálni. Ehhez vannak megfelelő online eszközök. Egy úgynevezett Validátor például elérhető itt: http://validator.w3.org/.
Az lenne a legjobb, ha közvetlenül a "Validate by direct Input" szekcióba ugrasz. Itt közvetlenül beillesztheted az ellenőrizendő HTML kódot másolás és beillesztés segítségével. Ügyelj arra, hogy a fájl teljes kódját beillesztsd, tehát a DOCTYPE-ot is.
A Validátor teszteléséhez illeszd be ezt a szöveget a mezőbe, majd kattints a "Validate" gombra.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – web- és grafikai tanulmányi portál</h1> </body> </html>
Az eredmény a következőképpen kellene kinéznie:
Itt minden rendben van. (Ebben az esetben a két figyelmeztetéstől ne zavarodj össze). Tehát ha megjelenik az üzenet, hogy This document was successfully checked as HTML5!, akkor minden rendben van. De hogyan néz ki ez hibás kód esetén? Egyszerűen illessz be szándékosan egy hibát a szintaxisba.
<h1 id=head">PSD-Tutorials.de – web- és grafikai tanulmányi portál</h1>
Ebben az esetben a nyitó idézőjelet elfelejtették a head résznél. Ha most validálod újra a szintaxist, akkor a hibát észlelik.
Ezután a Validátor kiad egy megfelelő üzenetet. A hibát a kijelző alján lehet leolvasni.
Itt nagyon szépen le van írva, hogy mi is a hiba.
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>
Tehát azonnal láthatod, hogy melyik sorban történt a hibás bevitel, és korrigálhatod azt. A Validátor segít tiszta HTML kódot készíteni. Mindig validáltasd a kódod! A böngészők gyakran megfelelően jelenítik meg az HTML kódot, még ha a szintaxis hibás is. Azokban a böngészőkben azonban, ahol nem tesztelitek az oldalatokat, teljesen máshogy nézhet ki az oldal.
