Gyakorló - 2 feladatai

A gyakorláshoz előre elkészítettem három darab képet, a következő méretekkel:
- Szélesség: 800px. Magasság: 150px -- A kép fájlneve: hegyoldal_800x150.jpg
- Szélesség: 250px. Magasság: 170px -- A kép fájlneve: villany_250x170.jpg
- Szélesség: 50px. Magasság: 50px ----- A kép fájlneve: ledi_50x50.jpg

Téma 21.

Térjünk vissza az xxxx.html weblapunkhoz és folytassuk a gyakorlást.
Az első div szakaszunknak, (elnevezése: siteName) ahol a címsor látható, a háttérszín helyett most beillesztünk egy háttérképet.
background-image jelentése: háttér-kép
url("xxxxxxxxxx.YYY") jelentése: hól található a háttérkép, azaz a kép elérési útvonala.

Az X betűk helyére kell beírni azon fájl nevét, melyben a képet elhelyeztük, majd egy pont követi és ezt követően az Y betűk helyére kell beírni a fájl típusát.

Ezenkívül, meg kell adnunk a háttérkép méretét is.
Szélessége: width
Magassága: height

Jelen esetben:
A kép fájl neve, mely a kép méretét is tartalmazza a következő: hegyoldal_800x150
A fájl típusa, azaz kiterjesztése: jpg
Háttérkép beillesztés meghatározását a css, azaz stíluslapon adjuk meg.

A következő sort kell pluszként beírni:
#siteName{ width: 770px; height: 150px; background-image: url("hegyoldal_800x150.jpg");}

Az első div szakasz meghatározásai mostantól a css, azaz stíluslapon:
#siteName { width: 770px; height: 150px; margin-bottom: 15px; background-color: #0f0; }
#siteName h1 { text-align: center; padding-top: 1.5em; }
#siteName{ width: 770px; height: 150px; background-image: url("hegyoldal_800x150.jpg");}

Teszteljük a böngésző programunkban:
A címsor mögött, most egy háttérképet kell látni.
Természetesen háttérképet minden div szakasznak készíthetünk.

Téma 22.

Most a második div szakaszban, közvetlen a címsor előtt elhelyezünk egy képet.
Ez nem háttérkép.
A kép féjlneve és kiterjesztése: ledi_50x50.jpg
A kép mérete: magassága width: 50px; szélessége height: 50px;
Alt : A képre utaló elnevezés, mi látható a képen.
Ez a szöveg akkor jelenik meg, ha a kép nem, valamint, ha az egeret a kép fölé mozgatjuk. Ilyenkor tájékoztatja weblapunk nézőjét, hogy a kép mit tartalmaz.

Mivel nem háttérkép, ezért a xhtml - lapon kell megadni a kép elérési útvonalát.
<img src="ledi_50x50.jpg" alt="Kutya" width="50" height="50" />

A fenti meghatározás tartalmazza a kép elérési útvonalát, elnevezését, méreteit.
XHTML lapunkon a második div szakasz megírása, a következőket tartalmazza:
<div id="pageName">
<h2> <img src ="ledi_50x50.jpg" alt="Kutya" width="50" height="50"/> Kedvenc szórakozásom </h2>
</div>

Téma 23.

Helyezzünk el képet a tartalom, azaz content területén Azon belül is, az első bekezdésünkben, mely annak tartalmára utal.
A fotó behívó meghatározását, közvetlen a kezdő p címke után adjuk meg, az xhtml lapunkon.

XHTML - lapunk tartalma, azaz content szakasza, a következőket tartalmazza:
<div id="content">
<h2> Fotózás </h2>
<p> <img src="villany_250x170.jpg" alt="Izzó" 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. <br />
Tovább takarékoskodhatunk. Sokat 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>

Téma 24.

A képre vonatkozó szövegrészt, helyezzük a kép mellé. Ha hosszabb szövegrészt írunk, akkor szövegünk, körbeveszi a képet jobb oldalon és alul.

Css, azaz stíluslapra a következőt írjuk be:
#content img { float: left; }

Jelentése: tartalom, azaz content div szakasz képe balra úszik a szöveg jobbra, mindaddig még a kép alját el nem éri. Ezt követően a szövegsorok, kép alatt is folytatódnak.

Stíluslapunkon a tartalom, azaz content div szakaszra megírt meghatározásoknál a következőknek kell szerepelni:
#content { width: 730px; margin: 0px 0px 15px 20px; background-color: #fc0; }
#content h2 { text-align: left; padding-top: 1.5em; padding-left: 20px; }
#content img { float: left; }

Téma 25.

A kép jobb oldala és a szövegsorok között hozzunk létre egy üres területet, így a szöveg nem ér hozzá a képhez.
Beillesztünk egy láthatatlan belső margót a kép jobb oldalára ( Ez a belső margó a monitoron nem jelenik meg, de a szövegsort a megadott értéknek megfelelően jobbra mozgatja.)
Padding-right: 15px;
Jelentése: belsőmargó-jobbról: 15px széles.

Stíluslapunkon kiegészítjük a képre vonatkozó meghatározást:
#content img { float: left; padding-right: 15px; }

Teszteljük az eddig beírtakat. ( CONTROL - 2)

Vissza a lap elejére

Utóirat.

Gyakorláshoz, az XXXXX.html lapot és az YYYYY.css lapot használtuk.
Internetre kerülő weblapoknál az első xhtml - lap elnevezése, mindig index.html a további xhtml - fájl lapunknak, tetszés szerinti elnevezést adhatunk.
A fájl nevek, nem tartalmazhatnak ékezetes betűket, csak egy szóból állhat, és lehetőleg csak kisbetűket alkalmazzunk.
Ha készítünk egy weboldalt (weblapot), mely több témakörrel is foglalkozik, akkor minden témakörhöz külön xhtml - lapot készíthetünk tetszés szerinti elnevezéssel, de az elsőnek index.html az elnevezése.
Az index.html fájlt úgy kell venni, mintha ez lenne egy könyvtárunk bejárata, ahol további tetszés szerinti névvel ellátott könyveket, azaz html - fájlokat tárolunk.
A böngésző programok az Interneten, ha megadunk egy webcímet, minden weblapnál az index.html fájlt keresik, azaz ezt nyitják meg és ennek tartalmát láthatjuk elsőre a monitoron.
Ha az adott weboldalhoz további témakörök, azaz html lapok is tartoznak, akkor a weblap készítője az index.html lapon elhelyezi azon hivatkozásokat, melyek a további témakörökkel foglalkozó, html - lapok megnyitásához szükséges.
Gyakorlatban a felhasználó, legtöbb weblapon különböző témakörök közül választhat, melyre kattintva további témakörökről olvashat, ezek a témakörök más és más html lapon találhatók.

Nézzünk egy példát.
Ha weboldalunk az ötödikes tananyagok témakörével foglalkozik.
A tananyag, több témakörből is állhat. Például: matematika, fizika, kémia.
Ehhez négy html - lapot készítünk:
- index.html
- matematika.html
- fizika.html
- kemia.html (Nagybetűt és ékezetes betűket nem alkalmazunk.)

Minden html fájlban, el kell helyezni a témakörének megfelelő h1-es címsort.
A címsor beírását, a gyakorlati feladatoknál már gyakoroltuk.
Mindegyik html- lapnak, írjuk be a címsorát.
- index.html lap címsora: <h1> Ötödikes tananyag </h1>
- matematika.html lap címsora: <h1> Matematika </h1>
- fizika.html lap címsora: <h1> Fizika </h1>
- kemia.html lap címsora: <h1> Kémia </h1>

A kezdő weblapunkon, azaz az index.html fájlban, el kell helyezni azon hivatkozásokat, melyekre kattintva jutunk el, a matematika, fizika vagy kémia html lapunkra.
A weboldalon nem csak olvashatunk, hanem a kiválasztott meghatározásokat, kijelölés után át is másolhatjuk saját html lapunkra, ezzel megspóroljuk a billentyűzetről történő beírás menetét.
Ha csak ennyit írunk a weblapunkra, azaz az index.html fájlba, akkor valami ilyesmi jelenik meg a monitoron, és a kiválasztott témakörre kattintva jelenik meg, a kiválasztott témakört tartalmazó html lapunk tartalma.

Ötödikes tananyag
Matematika
Fizika
Kémia

Hogyan készíthetünk könnyen xhtml fájlt.
Nézzünk egy példát:
Mivel minden xhtml lapunk az itt látottakkal kezdődik, ezért egyszerűbb bemásolni, mint billentyűzetről begépelni, és a gépelési hiba is ki van zárva.

<!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> XXXXXX XXXX XXXXX </title>
<link href="YYYYY.css" rel="stylesheet" type="text/css"/>
</head>
<body>

</body>
</html>

A fenti példában kettő sort kiemeltem, az egyiket zöld a másikat kék színnel.
- A kék színnel kiemelt sorban, az YYYYY betűk helyére kell beírnunk, annak a css kiterjesztésű fájlunknak az elnevezését, melyre ennek a html lapunknak, azaz a weblapunknak a stílusát, megjelenését befolyásoló meghatározásokat fogjuk beírni.
- A zöld színnel kiemelt sorban, az XXXXXX XXXX XXXXX betűk helyére tetszés szerinti szöveg írható, hogy egyértelmű legyen, lehetőleg olyan szöveget helyezzünk el, mely ezen html lap tartalmára utal.
- Két body címkét is láthatunk, a kezdő < body > és a záró < /body > .
A továbbiakban mindent, amiről azt szeretnénk, hogy a monitoron megjelenjen, ezen két címke közé kell beírnunk.

Végezetül egy ajánlat

Az index.html lapodhoz tartozó css kiterjesztésű fájlnak, a következő elnevezést add:
- indulo vagy kezdo. Amelyiket választottad és elmentetted, például kezdo.css fájlként, a mentést követően ugyan azt az elnevezést írd a fenti példában látható YYYYY betűk helyére.
- Természetesen a css kiterjesztésű fájloknak, tetszés szerinti elnevezést adhatunk. Ékezetet és nagybetűt nem alkalmazunk.

Egy kis gyakorlás, és meglátod nem is olyan bonyolult
Sok sikert és kitartást.

Vissza a lap elejére