Gyakorló - 5 feladatai
Téma 1.
A hivatkozások elkészítésénél alkalmazzunk listás felsorolást, vagy táblázati formátumot.
Most a hivatkozásokat listás felsorolás alapján készítjük el.
A div szakasznak mindenki tetszés szerinti elnevezést adhat.
A gyakorlás végett, mivel a tartalom bal oldalán helyezkedik el, ezért baloldali navigációnak nevezzük el.
Rövidítve: navbal
Az xhtml lapunkon, következőképpen alakul a navigációs div szakasz:
<div id="navbal">
<ul>
<li> <a href="XXXX.html"> Alaplépések </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 1 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 2 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 3 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 4 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 5 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 6 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 7 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 8 </a> </li>
</ul>
</div>
Töröljük a listák előtt látható jeleket: list-style: none;
A nav div szakasz felső szélétől lejjebb mozgatjuk a hivatkozási szavakat: padding-top: 10px;
Beállítjuk a lista szélességét, az abban szereplő hivatkozási szavak helyigénye szerint: width: 110px;
A lista területe is jól látható legyen, a gyakorlás végett adunk egy háttérszínt: background-color: #cfc;
A stíluslapunk nav szakaszának és a lista meghatározásai, így alakulnak:
#navbal {float:left; width: 200px; padding-top: 10px; background-color: #ffc;}
#navbal ul {list-style: none; }
#navbal li {width: 110px; padding-left: 15px; background-color: #cfc;}
A weblapunk tartalmának (content) bal oldalára vagy föléje, lehetőleg olyan hivatkozásokat helyezzünk el, mely további témakörrel foglalkozó weblapunkra, azaz html lapunkra utal.
Téma 2.
A hivatkozási szavak betűit és háttérszínét, színváltó formátumban jelenítjük meg, azaz más szín látható alapállapotban és más szín, ha az egérrel föléje állunk.
A horgony < a > megjelenésének meghatározásait kell a stíluslapon meghatározni.
A stíluslapunk meghatározásaihoz írjuk be:
Első sor az alapállapot. Második sor, ha az egérrel föléje állunk.
#navbal a { font-size: 14px; font-weight: bold; color: black; background-color: #ccc;}
#navbal a:hover { font-weight: bold; color: #fff; background-color: blue;}
Téma 3.
Készítsünk hivatkozásokat a jobb oldalra is.
A hivatkozások már nem a saját témaköreinkre utalnak, hanem külső weblapokra, regisztrálásokra, reklámokra stb.
Ismét matematikázni kell, hogy a jobb oldali navigációs terület is elférjen. Melynek a gyakorlás végett jobboldali navigáció elnevezést adjuk. Rövidítve: navjobb
A content div szakasznál, fotó és betűk méretét kisebbre vesszük.
Fotók méreténél vigyázni kell, ha nem az eredeti kép méretnek megfelelő területi méretet állítunk be, akkor torzulás következhet be. Jelen esetben egy tájkép látható, melyen a torzulást, csak a kép készítője ismeri fel.
Fotó mérete: 120x70px, betű mérete: 12px, content div szakasz szélessége: 364px lesz.
Összegezve:
navbal 200px + content 367px + navjobb 200px = 767px. Így már, elférnek egymás mellett.
Az xhtml lapunkon meglévő navbal div szakasz teljes tartalmát másoljuk át, a content div szakasz alá.
Ezt követően a div szakasz nevét írjuk át, navjobb elnevezésre.
A hivatkozásokat pedig írjuk át olyan hivatkozásokká, melyek külső weblapokra utalnak.
Most a gyakorlásnál, a hivatkozások nem külső weblapra fognak utalni, hanem a gyakorlatok tesztelését (Control) bemutató html lapokra.
Css azaz stíluslapra írjuk be: És módosítjuk, az áll – állapot meghatározásait, az < a > horgonynál.
#navjobb {float: right; width: 200px; padding-top: 10px;background-color: #ffc;}
#navjobb ul{ list-style: none; }
#navjobb li { width: 110px; padding-left: 15px; background-color: #cfc;}
#navjobb a { font-size: 14px; font-weight: bold; color: #fff; background-color: red;}
#navjobb a:hover { font-weight: bold; color: #fff; background-color: blue;}
Css, azaz stíluslapon e részeket pedig módosítani kell:
#navbal {float:left; width: 200px; padding-top: 10px;background-color: #ffc;}
#content {float: left; width: 367px; margin: 0px 0px 15px 0px; background-color: #fc0; }
#lablec {clear: both; width: 750px; background-color: #ccc;}
Téma 4.
A content, azaz tartalom div szakasz címsorait vigyük feljebb.
Ez idáig padding-top: 1.5em értékben volt meghatározva.
Vegyük kisebbre, és ne betűméretben, hanem képpont méretben ( px ) határozzuk meg, padding-top:5px;
Vegyük kisebbre a betűméretet, és szüntessük meg az aláhúzási vonalat. font-size: 1.2em;
Css, azaz stíluslapon így alakul a content h2-es címsora:
#content h2 {font-size: 1.2em; text-align: left; padding-top: 5px; padding-left: 20px; }
Téma 5.
A címsornál háttérképet alkalmazunk, ezért a háttérszínre nincs szükség.
A magasság és szélesség is szerepel a háttérkép meghatározásainál, így ezekre sincs szükség, töröljük.
#siteName { width: 770px; height: 150px; margin-bottom: 15px; background-color: #0f0; }
Vegyük alacsonyabbra a címsorok div szakaszát, a jelképet kisebbre, a betűméreteket képpontban határozzuk meg.
Fő címsor siteName h1 és div szakasza, a css, azaz stíluslapon:
#siteName h1 {font-size: 35px; color: #fff; text-align: center; padding-top: 1em; border-bottom: 2px solid #fff; }
#siteName { width: 770px; height: 100px; background-image: url("hegyoldal_770x150.jpg"); }
Alcímsor pageName h2 változása, html lapunkon :
< h2 > < img src="ledi_50x50.jpg" alt="Kutya" width="25" height="25" /> < span > Kedvenc szórakozásom < /span > < /h2 >
Alcímsor pageName h2 változása, css, azaz stíluslapon:
#pageName h2 {font-size: 25px; text-align: right; padding-right: 20px; }
Téma 6.
Összegezve.
Az xhtml lapunk body szakaszának tartalma:
<body> <div id="container">
<div id="siteName"> <h1> Első weblapom </h1> </div>
<div id="pageName">
<h2> <img src="ledi_50x50.jpg" alt="Kutya" width="25" height="25" /> <span> Kedvenc szórakozásom
</span> </h2>
</div>
<div id="navbal">
<ul>
<li> <a href="XXXX.html"> Alaplépések </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 1 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 2 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 3 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 4 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 5 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 6 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 7 </a> </li>
<li> <a href="XXXX.html"> Gyakorlat - 8 </a> </li>
</ul>
</div>
<div id="content">
<h2> Fotózás </h2> < p > < img src="villany_250x170.jpg" alt="Kutya" width="120" height="70" /> Első bekezdés: <br /> Írjunk ide legalább öt sor szöveget. <br /> Például:
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="navjobb" >
<ul>
<li> <a href="XXXX.html"> Alaplépések </a> </li>
<li> <a href="XXXX.html"> Control - 1 </a> </li>
<li> <a href="XXXX.html"> Control - 2 </a> </li>
<li> <a href="XXXX.html"> Control - 3 </a> </li>
<li> <a href="XXXX.html"> Control - 4 </a> </li>
<li> <a href="XXXX.html"> Control - 5 </a> </li>
<li> <a href="XXXX.html"> Control - 6 </a> </li>
<li> <a href="XXXX.html"> Control - 7 </a> </li>
<li> <a href="XXXX.html"> Control - 8 </a> </li>
</ul>
</div>
<div id="lablec">
<p class="lablecp"> Írjunk ide, két három sort a gyakorlat végett. A betűméretet 0.6em értékben határozzuk meg. <br /> Jogi ismeretek: YYYY YYYYYYY YYY YYY YYYYY YYYYYY YY YYYYY YYY YYYYYYYYYYY YYY YYYYYY YY Y Y Y Y Y Y Y <br />Weblap tervezője. YYYY YYYYYYY YYY YYY YYYYYYYYYYYYYYYY 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 tartalma:
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 h1 {font-size: 35px; color: #fff; text-align: center; padding-top: 1em; border-bottom: 2px solid #fff; }
#siteName h1 {margin-left: 150px; margin-right: 150px; }
#siteName {width: 770px; height: 100px; margin-bottom: 15px; 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: 25px; text-align: right; padding-right: 20px; }
#pageName img {margin-top: 5px; }
#navbal { float:left; width: 200px; padding-top: 10px;background-color: #ffc;}
#navbal ul { width: 110px; padding-left: 15px; background-color: #cfc;}
#navbal a { font-size: 14px; font-weight: bold; color: black; background-color: #ccc;}
#navbal a:hover { font-weight: bold; color: #fff; background-color: blue;}
#content {float: left; width: 367px; margin: 0px 0px 15px 0px; background-color: #fc0; }
#content h2 {font-size: 1.2em; text-align: left; padding-top: 2px; padding-left: 20px; border-bottom: 2px solid
blue; }
#content img { float: left; padding-right: 15px;}
#navjobb { float: right; width: 200px; padding-top: 10px; background-color: #ffc;}
#navjobb ul { list-style: none; }
#navjobb li { width: 110px; padding-left: 15px; background-color: #cfc;}
#navjobb a { font-size: 14px; font-weight: bold; color: #fff; background-color: red;}
#navjobb a:hover { font-weight: bold; color: #fc0; background-color: blue;}
p { font-size: 12px; padding: 0px 20px 0px 20px; }
.utolsop { font-size: 12px; padding: 0px 20px 20px 20px; }
strong { font-weight: bold; }
em { font-style: italic; }
span { border-bottom: 2px solid #fc0;}
#lablec {clear: both; width: 750px; background-color: #ccc; }
.lablecp { font-size: 0.6em; }