Gyakorló - 8 feladatai
Téma 1.
A jobboldali hivatkozásokat táblázati formában fogjuk elkészíteni.
Az xhtml lapunk jobboldali div szakasza, a következőket tartalmazza.
<div id="navjobb">
<table width="110" border="4" cellpadding="2">
<tr> <td>
<a href="xxxxx.html"> Alaplépések </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 1 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 2 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 3 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 4 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 5 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 6 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 7 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 8 </a> </td> </tr>
</table>
</div>
Css, azaz stíluslapunkon a jobboldali div szakasz meghatározásai, így alakulnak.
#navjobb {float: left; width: 130px; padding-top: 10px; background-color: #ffc;}
table{margin-left: 15px;}
td {text-align: center; font-size: 12px; font-weight: bold; background-color: red;}
#navjobb a {color: #fff; text-decoration: none;}
#navjobb a:hover {color: black; background-color: #fc0; padding: 0px 8px 0px 8px;}
Téma 2.
A címsor betűit, vigyük messzebb egymástól. letter-spacing
A h1-es címsornál betűméretben adjuk meg: letter-spacing: 0.8em
A h2-es címsornál képpont méretben adjuk meg: letter-spacing: 14px
h1 {font-size: 35px; color: #fff; letter-spacing: 0.8em;}
h1 {margin-right: 0px 150px 0px 150px; padding-top: 15px; border-bottom: 2px solid #fff;}
#pageName h2{font-size: 25px; text-align: center; padding-right: 20px; letter-spacing: 14px;}
Téma 3.
A második div szakaszunk h2-es címsorának, minden betűjét nagybetűvel, azaz kis-kapitális betűvel jelenítjük meg: small-caps;
(Minden betűt nagybetűvel ír, de a kezdőt enyhén kiemeli a többi betűtől. )
#pageName h2 {font-size: 25px; text-align: center; font-variant: small-caps; padding-right: 20px; letter-spacing: 14px ;}
Téma 4.
A betűméretek meghatározásait, átalakítjuk olvashatósági szempontok alapján.
A weblapokat tartalmuk miatt keresik. Melyek lehetnek oktatójellegűek, bemutató vagy tájékoztató jellegűek, stb.
A gyengén és rosszul látók érdekét is figyelembe véve, a böngésző programok minden felhasználónak lehetővé teszik, hogy a betűméreteket meg tudják változtatni, az olvashatósági szempontokra tekintettel. (Nézet menü, szövegméret témakörében.)
A weblap készítője pedig azt szeretné, hogy weblapja mindig ugyan úgy jelenjen meg, és minél többen látogassák weboldalát.
Hogy mindkettő feltétel teljesüljön, minden betűméretet megadhatunk képpont méretben, IE-ben ezt a felhasználó nem tudja megváltoztani, de a tartalmi rész bekezdéseiben szereplő betűk méretét, betűméretben adjuk meg, melyet a felhasználó olvashatósági szempontból megváltoztathat.
Bekezdéseink betűméretét 0.7em méretnél ne vegyük kisebbre, ezt a jól látok is, hátradőlve kényelmesen olvashatják, a rosszul látók pedig, megfelelően ki tudják nagyítani a betűket.
Ezen kívül, ha betűk közötti távolságot is meghatároztunk, akkor minden esetben, képpont méretben adjuk meg.
Mivel ez idáig, majdnem mindent px méretben adtunk meg, ezért olyan sok módosítást a css, azaz stíluslapunkon nem is kell végrehajtani.
Stíluslapunkon a következő sorok változnak:
h1 {font-size: 35px; color: #fff; letter-spacing: 10px;}
#pageName h2 {font-size: 25px; text-align: center; font-variant: small-caps; padding-right: 20px; letter-spacing: 12px ;}
p { font-size: 0.7em; padding: 0px 20px 0px 20px; }
.utolsop { padding: 0px 20px 20px 20px; }
Az .utolsop meghatározásaiból töröltük a betűméreteket.
Bekezdéseink, ha nem adunk meg külön, külön betűméret meghatározást, akkor örökli a többi bekezdés betűméretét, azaz ugyan úgy jelenik meg.
Megjegyzés:
Ha a felhasználó megváltoztatja a betűméreteket.
IE: Tudomásul veszi, mi a bekezdéseink betűméreteit engedélyeztük, hogy megváltoztassák.
MA: Nem törődik semmivel, nem vesz bennünket figyelembe, hogy csak a bekezdések betűméretei változtathatóak, ezért mindent megváltoztat.
Téma 5.
A weblapunkat helyezzük vízszintesen középre.
A jobb és baloldalán egyforma távolság maradjon.
A beállítást, bízzuk a böngésző programra, hogy automatikusan végezze el.
Jobbról és balról, automatikus meghatározást írunk a container div szakasznak.
A meghatározás rövidítése: auto
Css, azaz stíluslapon modosítani kell a container meghatározásait.
#container { width: 770px; margin-top: 10px; margin-left: auto; margin-bottom: 20px; margin-right: auto; background-color: #ffc; }
Téma 6. Összefoglaló
XHTML lapunk teljes tartalma.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Weblapunk vagy annak témakörének elnevezése </title>
<link href="YYYYY.css" rel="stylesheet" type="text/css" />
</head>
<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" border="0"/><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="izzó" width="120" height="70" /> 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="navjobb">
<table width="110" border="4" cellpadding="2">
<tr> <td>
<a href="xxxxx.html"> Alaplépések </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 1 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 2 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 3 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 4 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 5 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 6 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 7 </a> </td> </tr>
<tr> <td> <a href="xxxxx.html"> Control - 8 </a> </td> </tr>
</table>
</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.
Jogi ismeretek: YYYY YYYYYYY YYY YYY YYYYYYYYYYYYYYYYYY YYY YYYYYYYYYYY YYY
Weblap tervezője. YYYY YYYYYYY YYYYYY YYYYYYYYYYYYYYYYYY YYY YYYYYYYYYYY YYY
Egyéb a weblappal kapcsolatos fontosnak tartott megjegyzések.
</p>
</div>
</div></body>
</html>
Css, azaz stíluslapunk teljes tartalma.
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; background-color: #3c4f38;
padding-bottom: 20px;}
#container { width: 770px; margin-top: 10px; margin-left: auto; margin-bottom: 20px; margin-right: auto;
background-color: #ffc; }
#siteName{float: left; width: 770px; height: 120px; background-image: url("fejlec_770x150.jpg");}
#siteName { text-align: center; }
h1 {font-size: 35px; color: #fff; letter-spacing: 10px;}
h1 {margin: 0px 150px 0px 150px; padding-top: 15px; border-bottom: 2px solid #fff;}
#pageName { width: 770px; padding: 0px 0px 0.1px 0px; background-color: #0ff; }
#pageName h2 {font-size: 25px; text-align: center; font-variant: small-caps; padding-right: 20px; letter-spacing: 12px ;}
#pageName img {margin-top: 5px; }
#navbal { float: left; width: 120px; padding: 10px 0px 10px 0px; background-color: #ffc;}
#navbal ul{list-style: none; font-size: 12px; font-weight: bold; margin: 0px; padding: 0px; margin-left: 15px;}
#navbal a {background: #3c4f38; display: block; width: 80px; text-decoration: none; color: #fff;}
#navbal a {border: 1px solid blue; margin-top: 2px; padding: 2px 5px 2px 5px;}
#navbal a:hover {background-color: #fc0; color: black;}
#content {float: left; width: 510px; margin-bottom: 2px; background-color: #fc0; }
#content h2 {font-size: 1.2em; text-align: left; padding: 2px 0px 0px 20px; border-bottom: 2px solid blue;}
#content img { float: left; padding-right: 15px;}
table{margin-left: 15px;}
td {text-align: center; font-size: 12px; font-weight: bold; background-color: red;}
#navjobb {float: left; width: 130px; padding-top: 10px; background-color: #ffc;}
#navjobb a {color: #fff; text-decoration: none;}
#navjobb a:hover {color: black; background-color: #fc0; padding: 0px 8px 0px 8px;}
p { font-size: 0.7em; padding: 0px 20px 0px 20px; }
.utolsop { padding: 0px 20px 20px 20px; }
strong { font-weight: bold; }
em { font-style: italic; }
span { border-bottom: 2px solid #fc0;}
#lablec {clear: both; width: 770px; padding: 2px 0px 2px 0px; background-color: #ccc;}
.lablecp { font-size: 0.6em; }