Az oldal részeit (fejléc-menü-tartalom-lábléc) a HTML kódban bedobozoljuk (div) majd a szövegrészeket is elhelyezzük. Nézzük is meg:
<html>
<head>
</head>
<body>
</body>
</html>
Íme az oldal váza. A head-del nem foglalkozunk egyelőre. A következő lépés a body felosztása az 5 részre (konténer - fejléc - menüsáv - - tartalom - lábléc)
<html>
<head>
</head>
<body>
<div id="konténer">
<div id="fejléc">
</div>
<div id="menü">
</div>
<div id="tartalom">
</div>
<div id="lábléc">
</div>
</div>
</body>
</html>
Most pedig a menünek elkészítjük a listánkat. Minden eleme link.
<html>
<head>
</head>
<body>
<div id="konténer">
<div id="fejléc">
</div>
<div id="menü">
<ul>
<li><a href="#">Első</a></li>
<li><a href="#">Második</a></li>
<li><a href="#">Harmadik</a></li>
<li><a href="#">Negyedik</a></li>
</ul>
</div>
<div id="tartalom">
</div>
<div id="lábléc">
</div>
</div>
</body>
</html>
A fejléc szövege legyen 1-es címsorméretben Lorem Ipsum, a tartalom legyen egy 5 bekezdéses lorem ipsum, a lábléc meg egy Copyright. A Lorem Ipsum minden bekezdését <p> tagek közé tegyük!!
<html>
<head>
</head>
<body>
<div id="konténer">
<div id="fejléc">
<h1>Lorem Ipsum</h1>
</div>
<div id="menü">
<ul>
<li>Első</li>
<li>Második</li>
<li>Harmadik</li>
<li>Negyedik</li>
</ul>
</div>
<div id="tartalom">
Lorem ... facilisis.
</div><div id="lábléc"> Copyright 2011 HTMLkezdőknek
</div>
</div>
</body>
</html>
Az oldalunk HTML kódja (a body rész) készen is van. Az eredmény egyelőre:
A következő leckében megnézzük a head részt, majd a CSS-t is elkezdjük "hozzáadogatni".
Nincsenek megjegyzések:
Megjegyzés küldése