A HTML számos blokkszintű elemet tartalmaz, melynek segítségével meg tudjuk határozni a weboldal különféle területeit. Mai leckénkben bemutatjuk, hogyan kell megtervezni és létrehozni egy alap-weboldalstruktúrát.
A dokumentumok fő részei
A weboldalak ugyan sokban különböznek egymástól, a legtöbbjük osztozik a szabványos komponenseken — kivéve, ha a weboldal teljes képernyős videolejátszásra, játékra lett szánva, vagy egyszerűen csak rosszul lett megtervezve.
Fejléc
Leggyakrabban egy széles sáv a weboldal tetején. Ide kerül a logó és a legfontosabb információk a weboldalról. Általában minden aloldalon változatlan marad.
Navigációs sáv
A navigációs sáv tartalmazza a linkeket a weboldal fő részeihez. A tartalma a fejléchez hasonlóan minden oldalon azonos — ha más volna, azzal csak összezavarnánk és felbosszantanánk a felhasználókat. Sok dizájner tekint úgy a navigációs sávra, mint a fejléc részére, de ez nem követelmény. Sőt mi több, némelyek szerint sokkal jobb, ha a két dolgot elkülönítjük egymástól, mert így a képernyőolvasók sokkal jobban tudják őket értelmezni.
Tartalom
A weboldal egyedi tartalma általában a weboldal közepén elhelyezkedő üres részbe kerül — itt találhatóak a videók, a cikkek, a térképek stb. Ez a rész az előző kettőtől eltérően biztosan minden oldalon különböző lesz!
Oldalsáv
Ide kerülnek a mellékes információk, a linkek, idézetek, reklámok stb. Az oldalsávban általában valami olyasmi található, ami kapcsolódik a fő tartalomhoz (például egy cikk oldalán az oldalsáv tartalmazhatja a szerző életrajzát vagy linkeket a kapcsolódó cikkekhez). Vannak olyan esetek is, amikor az oldalsávban olyan ismétlődő elemek vannak, mint például a másodlagos navigációs rendszer.
Lábléc
A weboldal alján található sáv, mely leggyakrabban az apró betűs részt tartalmazza — a szerzői jogi megjegyzést, az adatvédelmi nyilatkozatot vagy a kapcsolatinformációkat. Ide olyan gyakori információkat helyezhetünk, amelyek a weboldalhoz kevésbé fontosak. A lábléc SEO-célokra is használható — tartalmazhat gyorslinkeket a populáris tartalmakhoz.
A HTML szerepe a tartalom strukturálásában
A fent bemutatott elemek a legtöbb honlapon megtalálhatóak. Természetesen vannak olyan weboldalak, amelyek több oszlopra vannak osztva, vagy sokkal összetettebbek, de a lényeget lefedtük. A CSS segítségével nagyjából minden elemet el tudunk helyezni valamelyik részben, és stilizálhatjuk őket, hogy pont olyanok legyenek, amilyennek szeretnénk, de fontos, hogy a megfelelő elemet a megfelelő feladatra használjuk. A HTML-kódban a tartalmat a funkcionalitása alapján jelöljük — használhatunk olyan elemeket, amelyek a tartalmat egyértelműen a fent említett részekre bontják, és segítenek áttekinthetőbbé tenni a weboldalt:
Fontos ismerni az elemek jelentését, a részleteket pedig a munka során fokozatosan meg lehet tanulni. Egyelőre elég, ha megérted a következő definíciókat:
A <main> elem az egyedi tartalomnak felel meg. Az elemet tanácsos egy oldalon csak egyszer használni, és közvetlenül a <body> elembe illeszteni. Nem ajánlatos más elemekbe helyezni.
Az <article> elem olyan tartalmat ölel körül, amely önmagában is értelmes, a weboldal többi része nélkül (például egy blogbejegyzés).
A <section> elem hasonlít az <article> elemhez, de inkább az oldal olyan részeinek csoportosítására való, amelyeknek azonos a funkcionalitásuk. Ajánlott minden szekciót egy címmel kezdeni. Azt is fontos megemlíteni, hogy az <article> elemet több <section> elemre oszthatjuk, de szükség szerint a <section> elem is felbontható több <article> elemre.
Az <aside> elem magában foglalja azokat a tartalmakat, amelyek nem kapcsolódnak közvetlenül a fő tartalomhoz, de további információkat nyújtanak róla (mint például a szerző életrajza).
A <header> magában foglalja a bemutatkozó tartalmak csoportját. Ha a <body> elem része, akkor a weboldal globális fejlécét határozza meg, de ha az <article> vagy a <section> elem része, akkor a specifikus fejlécet határozza meg.
A <nav> tartalmazza az oldal fő navigációs funkcióit. A másodlagos linkek például már nem a navigációhoz tartoznak.
A <footer> elemben vannak csoportosítva az oldal zárótartalmai.
Időnként szükség lehet nem szemantikus elemekre is a tartalom csoportosításához. Az ilyen helyzetekben felelnek meg a <div> és a <span> elemek. Ezeket ajánlott egy megfelelő class attribútummal együtt használni, hogy valamilyen módon meg legyenek jelölve. Ezt a két elemet csak akkor tanácsos igénybe venni, amikor a szemantikus elemek nem felelnek meg a célnak, vagy nem szeretnénk semmilyen specifikus jelentést adni a tartalomnak.
Most, hogy megismerkedtünk a weboldal szerkezeti felépítésével, már csak annyi maradt hátra, hogy magad is megpróbálj összeállítani egy egyszerű, jól megszerkesztett weboldalt a ma tanultak alapján!
Nyereményjáték!
A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
Néhány szó rólunk:
Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.