Gyakorló - 4 feladatai
Téma 1.
A content div szakaszunk utolsó bekezdésének betűméreteit is, állítsuk be 18px méretűre. Megírása a css, azaz stíluslapon
.utolsop {font-size: 18px; padding: 0px 20px 20px 20px;}
Téma 2.
Elkészítjük a lábjegyzet, azaz lábléc területét, melyhez szintén készítünk egy különálló div szakaszt.
Tartalma, jogi témakörökkel, weblap tervezője által fontosnak tartott tájékoztatók a felhasználók felé témaköröket tartalmaz.
Ezért a megjelenésében nem kell hivalkodónak lenni, és a weblapunk alján helyezzük el.
A betűméreteket is kis méretre állítjuk.
Ezen div szakasz azonosítója (elnevezése) lablec lesz. < div id="lablec" >
Az xhtml lapunkon írjuk be a content (tartalom) div szakasz után:
<div id="lablec">
<p class="lablecp"> Írjunk ide, két három sort a gyakorlat végett. Betűméretet 0.6em értékben határozzuk meg. <br />
Jogi ismeretek: YYYY YYY YYY YYYYYYY YYY YYYYYYYYYYY YYY YYYYYY YY Y Y Y Y Y Y Y <br />
Weblap tervezője. YYYY YYYYYYY YYY YYY YYYYY YYY YYYYYYYYYYY YYY YY Y Y Y Y Y Y Y <br />
Egyéb a weblappal kapcsolatos fontosnak tartott megjegyzések.
</p>
</div>
Css, azaz stíluslapunkra írjuk be:
#lablec { background-color: #ccc;}
.lablecp { font-size: 0.6em;}
Téma 3.
A container alsó részén is látható legyen a body területe.
A body meghatározásaihoz írjuk be: padding-bottom: 20px;
A body meghatározásai a css, azaz stíluslapunkon:
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; background-color: #3c4f38; padding-bottom: 20px;}
Téma 4.
Elkészítünk egy hivatkozásokat tartalmazó div szakaszt
Ezen terület tartalma, navigációs tájékoztatásokat fog tartalmazni, melyekkel további html lapokra juthatunk.
A div szakasz azonosítója (elnevezése, navigáció) rövidítve nav lesz. <div id="nav">
Az xhtml lapunkon írjuk be, a content div szakasz elé:
<div id="nav">
<p> Alaplépések Gyakorlat - 1 Gyakorlat - 2 Gyakorlat - 3 Gyakorlat - 4 Gyakorlat - 5 Gyakorlat - 6 Gyakorlat - 7 Gyakorlat - 8
</p>
</div>
Téma 5.
Hivatkozások, azaz navigációk elkészítése. A TARTALOM témakörében részletesen tanulmányozható.
Ahhoz, hogy az előző példában felsorolt szavakat hivatkozásokká alakítsuk, a horgony <a> címkét kell alkalmazni.
Példa:
A kezdő horgony <a> címkében kell megadni annak a html fájlnak a nevét, ahova el szeretnénk jutni. (A példában piros színnel van kiemelve )
A záró </a> címke elé kell beírni, hogy milyen témakörre jutunk, ha oda kattintunk. Ezen szavak a monitoron is megjelennek, (A példában zöld színnel van kiemelve )
Az xhtml lapunk navigációs div szakasza, a következőkép fog megváltozni:
<div id="nav">
<p>
<a href="XXXXX.html"> Alaplépések </a> |
<a href="XXXXX.html"> Gyakorlat - 1 </a> |
<a href="XXXXX.html"> Gyakorlat - 2 </a> |
<a href="XXXXX.html"> Gyakorlat - 3 </a> |
<a href="XXXXX.html"> Gyakorlat - 4 </a> |
<a href="XXXXX.html"> Gyakorlat - 5 </a> |
<a href="XXXXX.html"> Gyakorlat - 6 </a> |
<a href="XXXXX.html"> Gyakorlat - 7 </a> |
<a href="XXXXX.html"> Gyakorlat - 8 </a>
</p>
</div>
A hivatkozásokat függőleges elválasztó vonallal kell, egymástól elválasztani.
A függőleges vonal és a hivatkozási utasítások között szóköznek kell lenni.
Függőleges vonal beírása billentyűzetről: Alt billentyű lenyomva tartása mellett beírni, 0124
Téma 6.
A nav div szakasz szélességét csökkentsük le annyira, hogy a navigációs szavak egyenként éppen elférjenek benne.
Így mindegyik hivatkozás külön sorban, azaz egymás alatt helyezkedik el.
A nav div szakasznak is adjunk egy háttérszínt, így vizuálisan is jobban látható e div szakasz területe.
Css, azaz stíluslapunkra a következőt kell beírni.
#nav { width: 200px; background-color: #ccf;}
Téma 7.
A hivatkozások jelenleg egymás mellett, és a contant div szakasz felett helyezkednek el.
Most a hivatkozásokat, helyezzük el a content div szakasz bal oldalán.
Hogy ezt megtehessük, matematikázni kell. Nézzük a div szakaszok szélességét.
Jelenlegi állapot:
container 770px; Ezen szélességnél nem lehet több a nav és content együttes szélessége.
nav width: 200px; + content width: 730px; = 930px
Egyes böngésző programok mint például IE, az egymás melletti div szakaszok között 3px távolságot hagynak, ezért további 3px méretet leveszünk a container szélességéből.
Így a container div szakasz szélességénél 767px mérettel számolunk.
Csökkentjük a content szélességét, 567px méretre, hogy a nav div szakaszt melléje tudjuk csúsztatni (float: left;).
nav 200px; + content 567px; = container 767px;
Css, azaz stíluslapunkra a következőt kell beírni.
#nav {float: left; width: 200px; background-color: #ffc;}
#content { width: 567px; margin: 0px 0px 15px 20px; background-color: #fc0; }
IE: Jól jeleníti meg. Egymás mellé helyezi a két div szakaszt.
MA: Nem jól jeleníti meg. A content területének bal oldalára helyezte el a nav div szakaszt
Téma 8.
MA is jól jelenítse meg, és egymás mellé helyezze a két div szakaszt.
A content div szakaszt, a nav div szakasz szélességével megegyező értékkel, balra kell mozgatni a balos margóval (margin-left)
Css, azaz stíluslapunkon módosítani kell a content div szakasz balos margóját, a következőt kell beírni:
#content { width: 567px; margin: 0px 0px 15px 200px; background-color: #fc0; }
Ezzel a módosítással mindegyik böngésző program, IE és MA egyformán jeleníti meg.
Megjegyzés:
Mivel a hivatkozások egymás alatt helyezkednek el, így nincs szükség a függőleges elválasztó vonalra, töröljük ezen elválasztó vonalakat a html lapunkon.
Téma 9.
Összefoglaló.
Ez idáig az xhtml lapunk body szakasza, a következőket tartalmazza.
<body>
<div id="container">
<div id="siteName">
<h1> Első weblapom </h1>
</div>
<div id="pageName">
<h2><img src="ledi_50x50.jpg" alt="Kutya" width="50" height="50" />
<span> Kedvenc szórakozásom </span></h2>
</div>
<div id="nav">
<p>
<a href="XXXXX.html"> Alaplépések </a> |
<a href="XXXXX.html"> Gyakorlat - 1 </a> |
<a href="XXXXX.html"> Gyakorlat - 2 </a> |
<a href="XXXXX.html"> Gyakorlat - 3 </a> |
<a href="XXXXX.html"> Gyakorlat - 4 </a> |
<a href="XXXXX.html"> Gyakorlat - 5 </a> |
<a href="XXXXX.html"> Gyakorlat - 6 </a> |
<a href="XXXXX.html"> Gyakorlat - 7 </a> |
<a href="XXXXX.html"> Gyakorlat - 8 </a>
</p>
</div>
<div id="content">
<h2> Fotózás </h2>
<p> <img src="villany_250x170.jpg" alt="Kutya" width="250"height="170" /> Első bekezdés: <br />Írjunk ide legalább öt sor szöveget. <br />Például: <br />Kedvenc fotózásom, az est fényei. <br /> Energiatakarékos izzó. Nyári időszámítás. <br /> Így takarítjuk meg, egy kisebb falu energiáját. Éjfél után, hajnalodik, így tovább takarékoskodhatunk. Ha tovább takarékoskodunk, tönkre megy az áramszolgáltató. Korrekció: emelik a villany árát.
</p>
<h2> Fényképezőgép kiválasztása </h2>
<p class="utolsop"> Második bekezdés: <br /> <strong> Ide is írjunk, </strong> <br />
<em> legalább kettő sor szöveget. </em>
</p>
</div>
<div id="lablec">
<p class="lablecp"> <strong> Írjunk ide, két három sort a gyakorlat végett. A betűméretet 0.6em értékben határozzuk meg. </strong> <br /> Jogi ismeretek: YYYY YYYYYYY YYY YYY YYYYYYYYYYYYYYYYYY YYY YYYYYYYYYYY YYY YYYYYY YY Y Y Y Y Y Y Y <br />Weblap tervezője. YYYY YYYYYYY YYY YYY YYYYYYYYYYYYYYYYYY YYY YYYYYYYYYYY YYY YYYYYY YY Y Y Y Y Y Y Y <br />Egyéb a weblappal kapcsolatos fontosnak tartott megjegyzések.
</p>
</div>
</div>
</body>
Css, azaz stíluslapunk a következőket tartalmazza:
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; background-color: #3c4f38; padding-bottom: 20px;}
#container {width: 770px; margin: 10px 0px 20px 10px; padding-bottom: 15px; background-color: #fff;}
#siteName { width: 770px; height: 150px; margin-bottom: 15px; background-color: #0f0; }
#siteName h1 {font-size: 2em; color: #fff; text-align: center; padding-top: 1.5em; border-bottom: 2px solid #fff; }
#siteName h1 {margin-left: 150px; margin-right: 150px; }
#siteName { width: 770px; height: 150px; background-image: url("hegyoldal_770x150.jpg"); }
#pageName { width: 770px; margin-bottom: 15px; padding: 0px 0px 0.1px 0px; background-color: #0ff; }
#pageName h2 {font-size: 1.7em; text-align: right; padding-right: 20px; }
#pageName img {margin-top: 5px; }
#nav {float:left; width: 200px; background-color: #ffc;}
#content { width: 567px; margin: 0px 0px 15px 200px; background-color: #fc0; }
#content h2 {font-size: 1.4em; text-align: left; padding-top: 1.5em; padding-left: 20px; border-bottom: 2px solid blue; }
#content img { float: left; padding-right: 15px;}
p { font-size: 18px; padding: 0px 20px 0px 20px;}
.utolsop {font-size: 18px; padding: 0px 20px 20px 20px;}
strong { font-weight: bold; }
em { font-style: italic; }
span { border-bottom: 2px solid #fc0;}
#lablec { background-color: #ccc;}
.lablecp { font-size: 0.6em;}