5. Gyakran használt HTML szerkezetek
5.2.3 A weboldal szakaszainak formázását elősegítő jelölők
A <div> … </div> páros jelölők egy logikailag összefüggő szakaszt jelölnek, amelynek tetszőleges tartalma lehet. Lehetnek benne szövegek, képek, tábláza-tok, hivatkozások videók vagy akár más elemek is. Több különböző, <div>-vel kijelölt szakasz is megadható egy HTML dokumentumban, s mindegyikhez for-mázásokat lehet rendelni CSS-ben. A weboldalak vizuálisan megjelenő szerkeze-tét is ezekkel az elemekkel lehet meghatározni, pontosabban a <div>-ek haszná-latával szokás kialakítani a weboldalak megjelenését. A tag elnevezése a division (magyarul szakasz) angol szóból ered.
1. A <div> tagek szerepe
Egy weboldalon rendszerint több <div>-vel meghatározott szakasz is léte-zik, ezért ezek egyedi azonosítására van szükség, ezt tehetjük meg a tag id att-ribútumával, eredete identifier, magyarul azonosító. Az id attribútumok értéke-inek egyedieknek kell lennie, azaz egy .html-ben egy id elnevezés csak egyszer szerepelhet. Az id-k értékeinek mindenképpen karakterekkel kell kezdődniük, ügyeljünk arra, hogy az elnevezésekben ne szerepeljenek speciális karakterek, s magyar ékezetes betűk sem, továbbá úgy válasszuk meg a rövid elnevezéseket, hogy azok utaljanak a tartalomra.
A HTML dokumentumokban a <div> párokkal tehát csak szakaszokat defi-niálunk, s azokhoz az id attribútumokkal elnevezéseket rendelünk, ám míg azokra az elnevezésekre a CSS-ben nem hivatkozunk, addig az oldalon nem látható semmilyen változás, hiszen formát csakis a CSS-sel tudjuk adni olda-lunknak. Az egyes szakaszokhoz tartozó tartalmaknak más-más .css állomány belinkelésével teljesen más-más megjelenítés adható. Változtatható a szöveges tartalmak karaktereinek betűtípusa, mérete, színe, a szakasz háttere, kerete, igazítása stb.
2. A weboldalak layoutjanak felépítése <div>-ekkel
Lássunk példát arra, hogy miként szokás a HTML dokumentumokban jelöl-ni a szakaszokat. Azaz mit kell tegyünk ahhoz, hogy <div>-ekkel építsük fel a layoutunkat?
Mielőtt belefognánk a layout-készítés tárgyalásába vegyük sorra, hogy mi-lyen egységekből (szakaszokból) épülnek fel nagy általánosságban a weblapok.
A következő szakaszokra biztosan szükség lesz, ezeket jó ha angolul nevezzük el, mert ebben az esetben könnyen elkerülhető az a hibalehetőség, hogy magyar ékezetes betűket használunk.
fejléc (=header)
navigáció (=navigation/menu)
tartalmi rész (=content/wrapper)
jobboldali sáv (=sidebar)
lábléc (=footer)
Gyakran használt HTML szerkezetek 87
Nézzünk erre a felépítésre egy lehetséges HTML kódot, a kódban már csak a <body> ... </body> tagek közötti rész van leírva. A 22-es ábra szemlélteti a kódnak megfelelő struktúrát.
22. ábra: Egy általános weboldalnak a layout képe az egyes szakaszok neveinek feltűntetésével
1 <div id=„header”>
<!-- Ide kerül a fejlécben szereplő elemek:
logó, weblapcím, szlogen, egy szép képmontázs stb. -->
2 </div>
3 <div id=„navigation”>
<!-- Ide kerülnek a menüpontok, s rájuk lin- kelve az egyes oldalak. -->
4 </div>
5 <div id=„content”>
<!-- Ide kerülnek a weboldal fő tartalmi ré- szei, szövegek, képek, táblázatok, linkek stb. -->
6 </div>
7 <div id=„navigation”>
<!-- Ennek a szakasznak a tartalma kerül az oldalsávba, például kisalkalmazások, naptár, címkefelhő stb. -->
8 </div>
9 <div id=„footer”>
<!-- Ide kerülnek a láblécadatok, például az oldal készítőjnek a neve, elérhetőség, elérhe- tőségek, támogatók stb. -->
10 </div>
Az alábbiakban lássunk egy nagyon rövid példát arra, hogy miként hivat-kozhatunk ezekre a HTML jelölőkre a .css állományban, lássuk a header (a fej-léc) formázásának megadását kiragadva egy pici részt a .css egészéből!
#header {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 80px;
width: 713px;
}
3. Layout felépítés az új HTML5-ös tagekkel
HTML5-ben nagyon sok új elemet hoztak létre, nagy újítás az, hogy szá-mos új elemet a weboldal felépítésének céljára hoztak létre, ezeket oldalszer-kezeti elemeknek is nevezzük. Az új elemek mindegyike páros jelölő, lássuk ezeket: <header>, <hgroup>, <nav>, <section>, <aside> és <footer>. Egyértelmű az, hogy melyik jelölő mire utal, hiszen éppen olyan elnevezésű tageket hoztak létre újdonságként, amely elterjedtek a weboldalak <div>-ekkel történő felépí-tésének id attribútum-értékeiként.
Gyakran használt HTML szerkezetek 89
Az alábbiakban egy HTML5-ös kódot látunk, amelyben már az új oldal-szerkezet jelölők vannak használva. Az előző layout képhez képest annyi válto-zást kell csak elképzelni, hogy a „content” rész helyett van a „section”, s azon belül újabb szakasz található, melynek neve „article”, továbbá a jobboldali sá-vot ez esetben a „sidebar” helyett az ún. „aside” elnevezés jelöli, s a
„navigation” helyett a helyes név ezúttal a „nav”.
1 <header>
2 <p>Ez a szöveg a fejlécben lesz látható.</p>
3 </header>
4 <nav>
5 <p>A menüpontok helye.</p>
6 </nav>
7 <section>
8 <p>Egy összefüggő szekció.</p>
9 <article>
10 <p>A szekción belüli cikk.</p>
11 </article>
12 </section>
13 <aside>
14 <p>A jobboldali sáv, benne általában funkciók.</p>
15 </aside>
1.
16 <footer>
17 <p>Ez a szöveg a láblécben lesz látható.</p>
18 <footer>
Lássuk egy rövid példán keresztül azt, hogy miként hivatkozhatunk a .css ál-lományban az új oldalszerkezeti jelölőkre, a példábana .css állomány csak egy része, a fejléc formázásával kapcsolatos rész van kiragadva és a <body> tagre vonatkozóak.
body {
background-color : #35643C;
background-repeat : no-repeat ;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding: 0px;
width: 90%;
max-width: 780px;
}
header {
background: #133217;
background-image:url('header.jpg');
border: 0;
text-align: right;
font-weight: bold;
}
header > p{
font-size:100%;
text-align:right;
color:#FFFFFF;
}
5.3 ÖSSZEFOGLALÁS, KÉRDÉSEK
5.3.1 Összefoglalás
A fejezetben először áttekintésre kerültek a HTML5-ös szövegjelölő ele-mek, majd példákon keresztül megtekinthettük a leghasználatosabb szerkeze-teket (képek, linkek, táblázatok), végül két speciálisabb jellegű ám elengedhe-tetlen fontosságú jelölőről esett szó.
Gyakran használt HTML szerkezetek 91
5.3.2 Önellenőrző kérdések
1. Mondja el mire valók a szövegjelölő elemek?
2. Sorolja fel a szövegjelölő címkéket és röviden fejtse ki azt, hogy ezeket mire használjuk!
3. Sorolja fel az <img> HTML jelölő lehetséges attribútumait!
4. Az <a> jelölővel milyen jellegű linkek hozhatóak létre?
5. Mondja el, hogy miként lehet <table> és miként <div> tagekkel felépí-teni egy weboldal szerkezetét! Melyik megoldás elavult, s melyik ma használatos?