3.1 Minta oldal és html magyarázat

Minta weboldal letöltése

index.html megtekintése

A zip fájl kicsomagolása után két fájlt láttok: index.html és style.css.

Ebben a leckében a html oldalát magyarázom el sorról sorra, mi mit csinál, szóval nyissátok meg az index.html fájlt Notepad++-ban!

A <head> tag-ben leírtak benne vannak az első leckében arra nem térnék ki megint, a fontosabb dolgok a <body> részben vannak!

Először is, én 4 “részre” osztottam a honlapot, nevezzük őket dobozoknak! Első dobozom a <div id=”tartalom”> kóddal kezdődik, ha ráálltok az egérrel, akkor mutatni fogja hogy melyik a bezáró tag-je ennek a résznek, az alján található, ez a legnagyobb doboz, ebbe pakoltam bele minden mást. Ebben található három másik doboz, amik egyenrangúak, tehát egymás “mellett” vannak, egyik sincs benne a másikban.

Ez a három doboz a fejlec, szoveg, lablec neveket kapták. A fejlec dobozban csak egy 1-es szintű címsor van, az üdvözlő szöveg. A szoveg dobozban van maga az oldalnak a szövege, és a lablec dobozban az oldal néhány szavas infoja, copyright, honlap készítője, stb.

Remélem jól látható a dobozok felépítése az alábbi minta oldalon, ezekkel sokat lehet variálni, de egy a lényeg, az alárendelt doboz mindig örökli a szülő doboz stílus-beállításait! Ha ezt nem szeretnénk akkor mindent külön dobozba pakoljunk, és az egyik záró tagje a másik doboz nyitó tagje előtt legyen! Ne csússzanak egybe!