A dokumentumok és a weboldalak szerkezete

A dokumentumok és a weboldalak szerkezete

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:

Fejléc: <header>
Navigációs sáv: <nav>
Tartalom: <main> — olyan szekciókkal, mint az <article>, a <section> és a <div> elemek
Oldalsáv: <aside> — gyakran a <main> elemen belül
Lábléc: <footer>
 

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!

Rovatunk elsődleges célja, hogy közelebbről is bemutassa a legismertebb webtechnológiákat. Azok között az olvasók között, akik minden héten követik rovatunkat, azaz velünk tanulják a programozás alapjait és kitöltik a feladatsort, a sorozat végén egy laptopot sorsolunk ki.
 
Az alábbi elemek közül melyiket tanácsos csak egyszer használni a weboldal szerkezetében?
1. main
2. section
3. article

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.

Szeretne értesülni, ha új cikk jelenik meg Számtek rovatunkban? Iratkozzon fel értesítőnkre!

E-mailben értesíteni fogjuk Önt az új cikkekről. Feliratkozáshoz kérjük adja meg a nevét és az e-mail címét.

Hozzászólások

Kapcsolódó cikkek

A dokumentumok és a weboldalak szerkezete
Számtek
  • Erdsoft
  • 2019.04.22.
  • LXXIV. évfolyam 16. szám
A dokumentumok és a weboldalak szerkezete
Számtek
  • Erdsoft
  • 2019.04.13.
  • LXXIV. évfolyam 15. szám
Facebook

Támogatóink