Első lépés. Gyakorló - 1 feladatai
Az itt leírt gyakorlati feladatokhoz, készítsünk el egy üres html és css fájlt, az alapismeretek témakörében leírtak alapján.
A CD lemezen mindkét fájl megtalálható, csak be kell másolni egy üres mappába.
Az XHTML fájl, XXXXX.html néven található.
A CSS fájl, YYYYY.css néven található.
A gyakorlati feladatokat egyenként végezzük el, a számozott témaköröknek megfelelően.
Minden témakör beírása után, teszteljük a böngésző programunkban, hogy mi történik.
Akár az XXXX.html lapunkon, vagy az YYYYY.css lapunkon hajtunk végre módosításokat, minden alkalommal el kell menteni ( fájl / mentés )
Majd a gyakorló weblapunkat megnyitáskor frissíteni kell (nézet - frissít)
Téma 1.
Írjunk az xxxxx.html lapunkra egy rövid mondatot, hogy valami megjelenjen a monitoron.
Az YYYYY. css, azaz stíluslapon a body területének, adjunk egy szürke háttérszínt.
XHTML lapunkra írjuk be:
Az xxxxx.html lapra, a kezdő és záró body címkéket előre beírtam.
<body>
<p>
E sor elején látható a kezdő p címke, végén pedig a záró p címke. A kezdő és záró p címkék közé írjuk bekezdéseinket, azaz tetszőleges szöveget.
Minden kezdő és záró címke között, annyi a különbség, hogy a záró címkében van egy per ( / ) vonal
</p>
</body>
YYYYY.css lapunkra, azaz stíluslapra írjuk be:
body { background-color: #ccc; }
Megjegyzés:
A monitoron, csak azok az anyagok, (szöveg vagy fotó) jelenik meg, melyeket a kezdő <body> címke és a záró </body> címke közé helyezünk el.
Téma 2.
A következő feladatokat egyenként írjuk be az YYYYY.css lapunkra, és minden alkalommal teszteljük.
Szövegsor, lejjebb kerüljön a monitor tetejétől, body meghatározásai, a következőképpen alakulnak:
body { background-color: #ccc; margin-top: 40px; }
Szövegsor beljebb kerüljön a monitor bal szélétől, body meghatározásai, a következőképpen alakulnak:
body { background-color: #ccc; margin-top: 40px; margin-left: 40px; }
Téma 3.
XHTML lapunkra írjunk be egy kezdő címsort, a h1-es címkék közé.
Pl.: Első weblapom
Mostantól, az xxxxxx.html lapunkon a következőknek kell szerepelni:
<body>
<h1> Első weblapom </h1>
<p> E sorban, az általunk beírt tetszőleges szövegnek kell szerepelni. </p>
</body>
Téma 4.
Változtassuk meg a címsor pozícióját, és helyezzük középre a center meghatározással.
A css, azaz stíluslapra a következőt kell beírni: h1 { text-align: center; }
text-align jelentése: szöveg igazítása
Mostantól a css lapon, a következő soroknak kell szerepelni:
body { background-color: #ccc; margin-top: 40px; margin-left: 40px; }
h1 { text-align: center; }
Téma 5.
Készítsünk egy második bekezdést.
Ehhez újabb szövegsort kell beírni.
Melynek, szintén a kezdő és záró p címkék között kell elhelyezkedni.
A kezdő és záró p címkék között legyen legalább két sor szöveg.
XHTML lapunkon a következő soroknak kell szerepelni:
<body>
<h1> Első weblapom </h1>
<p> Első bekezdés: Írjunk ide legalább kettő sor szöveget. </p>
<p> Második bekezdés: Ide is, írjunk legalább kettő sor szöveget. </p>
</body>
Teszteljük.
Megjelenéskor az egyes bekezdés és a kettes bekezdés között, üres sornak kell megjelenni.
Összegezve:
A dokumentumunk minden bekezdésének megírását, a kezdő p címkével kezdjük, és a záró p címkével fejezzük be. Így a dokumentumunk bekezdései, jól áttekinthetők és jól olvashatók.
Téma 6.
Formázzuk a bekezdéseinket, sorlezáró utasítással <br />
Szemléltetés miatt, a második bekezdésben alkalmazzuk, hogy látható legyen a sorlezáró utasítás hatása.
Sorlezáró utasításból annyit helyezhetünk el bekezdéseink szövegében, amennyi annak megformázásához szükséges.
XHTML lapunkon a következő soroknak kell szerepelni:
<body>
<h1> Első weblapom </h1>
<p> Első bekezdés: Írjunk ide legalább kettő sor szöveget. </p>
<p> Második bekezdés:<br /> Ide is írjunk, <br /> legalább kettő sor szöveget. </p>
</body>
Teszteljük.
Második bekezdésnél, a következőt kell látni.
Második bekezdés:
Ide is írjunk,
legalább kettő sor szöveget.
Téma 7.
A <strong> címke.
Bekezdéseinknek vannak olyan részei, melyeket szeretnénk vastagabban kiemelni.
Vastagabb betűk megjelenítése, annyit helyezhetünk el bekezdéseink szövegében, amennyi annak megformázásához szükséges.
XHTML lapunkon, a második bekezdésnél gyakoroljuk alkalmazását.
<body>
<h1> Első weblapom </h1>
<p> Első bekezdés: Írjunk ide legalább kettő sor szöveget. </p>
<p> Második bekezdés: <br /> <strong> Ide is írjunk, </strong> <br /> legalább kettő sor szöveget.
</p>
</body>
Teszteljük:
Azon részek, melyek a kezdő <strong> és a záró </strong> címkék között helyezkednek el, vastagabban jelennek meg, mint a normál szövegek.
Második bekezdésnél, a következőt kell látni.
Második bekezdés:
Ide is írjunk,
legalább kettő sor szöveget.
Téma 8.
Az <em> címke.
Bekezdéseinknek vannak olyan részei, melyeket szeretnénk dőlt betűvel kiemelni.
Dőlt betűk megjelenítése, annyit helyezhetünk el bekezdéseink szövegében, amennyi annak megformázásához szükséges.
XHTML lapunkon, a második bekezdésnél gyakoroljuk alkalmazását.
<body>
<h1> Első weblapom </h1>
<p> Első bekezdés: Írjunk ide legalább kettő sor szöveget. </p>
<p> Második bekezdés: <br /> <strong> Ide is írjunk,
</strong> <br /> <em> legalább kettő sor szöveget.
</em> </p>
</body>
Teszteljük:
Azon részek, melyek a kezdő <em> és a záró </em> címkék között helyezkednek el, dőlt betűvel jelennek meg, a normál szöveghez képest.
Második bekezdésnél, a következőt kell látni.
Második bekezdés:
Ide is írjunk,
legalább kettő sor szöveget.
Téma 9.
Eddig csak egy, h1-es címsorunk van, mely a weblapunkra utal. Készítsünk egy címsort a tartalmi részeknek, ez lesz a h2-es címsor. Pl.: Kedvenc szórakozásom, elnevezéssel.
XHTML lapunk tartalma, mostantól a h2-es címkékkel és azok közé írt szöveggel bővül.
<body>
<h1> Első weblapom </h1>
<h2> Kedvenc szórakozásom </h2>
<p> Első bekezdés: Írjunk ide legalább kettő sor szöveget. </p>
<p> Második bekezdés: <br /> <strong> Ide is írjunk,
</strong> <br /> <em> legalább kettő sor szöveget.
</em> </p>
</body>
Teszteljük, az eddig látottakat.
Téma 10.
Css, azaz stíluslapon újabb meghatározásokat hozunk létre.
1. A fentebb alkalmazott <strong> és <em> címkék, hogy minden böngésző programban egyformán jelenjenek meg, stíluslapra a következő meghatározásokat kell beírni:
strong { font-weight: bold; }
em { font-style: italic; }
2. A h2-es címsor, legyen a jobb oldalon: h2 { text-align: right; }
3. Változtassuk meg bekezdéseink szövegméretét. Mivel bekezdéseink a p címkék között helyezkednek el, ezért a p betű után beírt meghatározásoknak megfelelően jelenik meg, bekezdésünk betű stílusa, azaz formája:
p { font-size: 0,7em; }
Összegezve:
Mostantól a css, azaz stíluslapon a következő sorok szerepelnek
body { background-color: #ccc; margin-top: 40px; margin-left: 40px; }
h1 { text-align: center; }
h2 { text-align: right; }
p { font-size: 0,7em; }
strong { font-weight: bold; }
em { font-style: italic; }
Teszteljük az eddig beírt meghatározásokat. Mi történik a weblapunkon?
Téma 11.
Eljött az idő, hogy a weblapunkon rendezzük az eddig látottakat, mielőtt tovább haladnánk.
Elkészítjük első div szakaszunkat, mely magába foglalja az eddig leírtakat, és meghatározza dokumentumunk mekkora szélességet foglalhat el, a monitor területén.
Ezen div szakasz azonosítója a container elnevezést kapja.
Mostantól:
- Minden dokumentumunkkal kapcsolatos anyagot, beleértve fotóinkat és további div szakaszokat is, ezen div szakaszban helyezünk el.
- Kezdő címkéje a továbbiakban, közvetlen a kezdő body címke után helyezkedik el
- Záró címkéje a továbbiakban, közvetlen a záró body címke előtt helyezkedik el.
XHTML lapunk tartalma, mostantól a container div szakasszal bővül.
<body>
<div id="container">
<h1> Első weblapom </h1>
<h2> Kedvenc szórakozásom </h2>
<p> Első bekezdés: Írjunk ide legalább kettő sor szöveget. </p>
<p> Második bekezdés: <br /> <strong> Ide is írjunk,
</strong> <br /> <em> legalább kettő sor szöveget.
</em> </p>
</div>
</body>
Megjegyzés:
Most találkoztunk először az idézőjelekkel ( " )
Ezekkel a továbbiakban is találkozunk, minden olyan elnevezésnél, mely valaminek a beazonosítására szolgál.
Microsoft Word szövegszerkesztőből, mindent átmásolhatunk xhtml vagy css lapunkra.
De e jeleket, átmásolás után ki kell törölni, és jegyzettömb programból kell beírni.
Ha nem így járunk el, a programunk nem fog működni.
Az a biztos, ha minden meghatározást jegyzettömb programban írunk az xhtml és css lapunkra.
Css, azaz stíluslapunkat is módosítani kell.
A container div szakasznak is, be kell írni meghatározásokat.
Például: szélesség width, margó fent top, margó jobb right, margó bal left.
Most a szemléltetés miatt, adunk háttérszínt, fehéret, de ez nem fontos.
#container {width: 770px; margin-top 10px; margin-left: 10px; background-color: #fff;}
A body meghatározásokat is megváltoztatjuk.
Továbbiakban, mindig a következő body meghatározásokat alkalmazzuk.
Meghatározzuk, milyen betűcsaládok jelenjenek meg, legnagyobb betűméretet, margót nulla értékre állítjuk, és adunk egy sötét háttérszínt.
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; background-color: #3c4f38; }
Összegezve:
A stíluslapunkon a következő meghatározási soroknak kell szerepelni.
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; background-color: #3c4f38; }
#container {width: 770px; margin-top 10px; margin-left: 10px; background-color: #fff;}
h1 { text-align: center; }
h2 { text-align: right; }
p { font-size: 0,7em; }
strong { font-weight: bold; }
em { font-style: italic; }
Téma 12.
További három div szakaszt készítünk, a következő elnevezésekkel, azaz azonosítóval.
- siteName ( Jelentése: weblap fő címsora, azaz egy könyv borítóján látható név.)
- pageName (Jelentése: Egy adott oldal címe, könyvekben a fejezetek elnevezése.)
- content (Jelentése: Tartalom )
Természetesen, mindenki tetszésének megfelelő elnevezést, azaz azonosítót adhat minden kezdő címkének.
Ahhoz, hogy jobban átlátható legyen, melyik div szakasz hól kezdődik, és hól fejeződik be, egy adott div szakaszhoz tartozó kezdő és záró címkék azonos színnel vannak kiemelve.
XHTML lapunk, div szakaszokra történő felosztása:
<body>
<div id ="container">
<div id="siteName">
<h1> Első weblapom </h1>
</div>
<div id="pageName">
<h2> Kedvenc szórakozásom </h2>
</div>
<div id="content">
<p> Első bekezdés: Írjunk ide legalább kettő sor szöveget. </p>
<p> Második bekezdés: <br /> <strong> Ide is írjunk,
</strong> <br /> <em> legalább kettő sor szöveget.
</em> </p>
</div>
</div>
</body>
Css, azaz stíluslapunkat is módosítani kell.
Az új div szakaszoknak is meghatározzuk megjelenési formájukat, a következő meghatározásokkal.
- Szélesség, width. Mivel a container szélességét 770px-re állítottuk, ezért ezen div szakaszok szélessége sem lehet több 770px-nél, de rövidebb igen.
- Magasság, height. Ez nem kötelező, de most a gyakorlás végett meghatározzuk.
- Háttérszín, background-color. Ez sem kötelező, de most a gyakorlás végett meghatározzuk, és mindegyik div szakasznak más háttérszínt adunk a könnyebb megkülönböztetés végett.
Css lapon azon div szakaszok azonosítója elé, melyeknek az xhtml lapon id jellemző után írtuk be az azonosító nevet, kettős keresztet kell az azonosító elé beírni.
A meghatározásokat, hullámos zárójelek, kapocsjelek közé kell beírni.
#siteName { width: 770px; height: 150px; background-color: #0f0; }
#pageName { width: 770px; height: 100px; background-color: #0ff; }
#content { width: 730px; background-color: #fc0; }
Összegezve:
Mostantól a stíluslapunkon, a következő meghatározásoknak kell szerepelni.
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; background-color: #3c4f38; }
#container {width: 770px; margin-top 10px; margin-left: 10px; background-color: #fff;}
#siteName { width: 770px; height: 150px; background-color: #0f0; }
#pageName { width: 770px; height: 100px; background-color: #0ff; }
#content { width: 730px; background-color: #fc0; }
h1 { text-align: center; }
h2 { text-align: right; }
p { font-size: 0,7em; }
strong { font-weight: bold; }
em { font-style: italic; }
Téma 13.
Vigyük messzebb egymástól a div szakaszokat, az alsó margóval, margin-bottom
Css lapon módosítani kell a div szakaszok meghatározásait.
#siteName {width: 770px; height: 150px; margin-bottom: 15px; background-color: #0f0;}
#pageName {width: 770px; height: 100px; margin-bottom: 15px; background-color: #0ff;}
#content {width: 730px; margin-bottom: 15px; background-color: #fc0;}
Téma 14.
A tartalom, azaz content területén lévő bekezdéseinknek adjunk címet, mely annak tartalmára utal.
Mindegyik bekezdés elé, írjunk be egy h2-es címsort.
Például:
Első bekezdéshez: <h2> Fotózás </h2>
Második bekezdés: <h2> Fényképezőgép kiválasztása </h2>
XHTML lapunkon a tartalmi rész content, következőképpen alakul:
<div id="content">
<h2> Fotózás
</h2>
<p> Első bekezdés: Írjunk ide legalább kettő sor szöveget. </p>
<h2> Fényképezőgép kiválasztása </h2>
<p> Második bekezdés: <br /> <strong> Ide is írjunk, </strong> <br /> <em> legalább kettő sor szöveget. </em>
</p>
</div>
Téma 15.
Mindegyik h2-es címsor, az adott div szakasz jobb oldalának szélén látható.
Ennek oka, hogy előzőleg a css lapunkon ezt határoztuk meg, a h2-es címsoroknak. h2{text-align: right;}
Az első h2-es címsorunk, a pageName azonosítóval ellátott div szakaszban van
A másik kettő h2-es címsorunk a tartalom, azaz content div szakaszban van.
Css, azaz stíluslapon, minden div szakaszban meghatározhatjuk, hogy címsoraink, bekezdéseink hól helyezkedjenek el.
Ha ezt nem tesszük meg, akkor minden h2-es címsor egyformán jelenik meg, weblapunkon.
A stíluslapon történő módosításokat, minden lépés után teszteljük.
Első lépés:
Meghatározzuk, hogy minden h2-es címsor a div szakaszok jobb oldalától beljebb kerüljön, az általunk megadott értéknek megfelelően.
Erre alkalmazzuk a belső margót: padding
A h2-es címsor meghatározása, így alakul: h2 { text-align: right; padding-right: 20px; }
Második lépés:
Csak a tartalom, azaz content div szakaszban helyezzük középre center a h2-es címsorokat.
A padding értékét, állítsuk nullára.
h2-es címsor meghatározása: #content h2 { text-align: center; padding: 0 0 0 0px; }
Harmadik lépés:
Gyakorlás végett, ismét a tartalom, azaz content div szakaszban helyezzük balra left a h2-es címsorokat.
h2-es címsor meghatározása: #content h2 { text-align: left; padding: 0 0 0 0px; }
Negyedik lépés:
Címsoraink megint a monitor, azaz a div szakasz szélén, de most baloldalon helyezkednek el.
Ismét a padding belső margót hívjuk segítségül, hogy tolja beljebb címsorainkat.
h2-es címsor meghatározása: #content h2 { text-align: left; padding-left: 20px; }
Ötödik lépés:
Bekezdéseink is nagyon a div szakasz bal szélén, helyezkednek el.
Ennek oka:
Stíluslapon a p címkének csak betűméretet adtunk. p { font-size: 0,7em; }
Módosítsuk úgy, hogy a div szakasz bal oldalától beljebb kezdődjön, és a jobb szélén se érje el a div szakasz oldalát.
Megint a padding belső margót hívjuk segítségül.
A p címke meghatározásai: p{ font-size: 0,7em; padding-right: 20px; padding-left: 20px;}
Téma 16.
Címsoraink minden div szakaszban, teljesen fent helyezkednek el, hozzuk lejjebb másfélszeres, azaz 1.5em betűmérettel
Betűméret jele: em
Megint a padding belső margót hívjuk segítségül.
Css lapon a következők változnak:
Töröljük a h1-es és h2-es címsorra eddig beírt meghatározásokat, és hozzárendeljük azon div szakaszokhoz, melyekben megjelennek.
Mi ennek az oka:
Ha a későbbiekben meggondoljuk magunkat, és úgy döntünk, hogy valamelyik div szakaszban megváltoztatjuk a címsor megjelenését, és ezt meg is tesszük, akkor csak az adott div szakaszban változik meg, a többiben nem.
#siteName h1 { text-align: center; padding-top: 1.5em; }
#pageName h2 { text-align: right; padding-top: 1.5em; padding-right: 20px; }
#content h2 { text-align: left; padding-top: 1.5em; padding-left: 20px; }
Css, azaz stíluslapunk tartalma mostantól így alakul:
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; background-color: #3c4f38; }
#container {width: 770px; margin-top 10px; margin-left: 10px; background-color: #fff;}
#siteName { width: 770px; height: 150px; margin-bottom: 15px; background-color: #0f0; }
#siteName h1 { text-align: center; padding-top: 1.5em; }
#pageName { width: 770px; height: 100px; margin-bottom: 15px; background-color: #0ff; }
#pageName h2 { text-align: right; padding-top: 1.5em; padding-right: 20px;}
#content { width: 730px; margin-bottom: 15px; background-color: #fc0; }
#content h2 { text-align: left; padding-top: 1.5em; padding-left: 20px; }
p { font-size: 0,7em; padding-right: 20px; padding-left: 20px;}
strong { font-weight: bold; }
em { font-style: italic; }
Téma 17.
Bekezdéseink közül az utolsó, jelen esetben a második bekezdés szövegének utolsó sora, nagyon a div szakasz alján helyezkedik el, hozzuk feljebb.
Az utolsó bekezdés is ugyan úgy, mint a többi bekezdés, a kezdő <p> címke és a záró </p> címke között helyezkedik el.
Most az utolsó bekezdésünk kezdő p címkéjét ellátjuk egyedi azonosítóval, mely megkülönbözteti a többi kezdő p címkétől.
Elnevezése, azaz azonosítója legyen: utolsó p, azaz utolsop.
XHTML lapunkon a content div szakasz utolsó, azaz második bekezdésének kezdő p címkéje így alakul:
<div id="content">
<h2> Fotózás </h2>
<p> Első bekezdés: Írjunk ide legalább kettő sor szöveget. </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>
Css lapunkra a következőt írjuk be: (Mindenben megegyezik a p címkékre jellemző meghatározásokkal, csak kiegészül egy alsó és belső margónak padding-bottom, adott értékkel)
.utolsop {font-size: 0,7em; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;}
Megjegyzés:
- Minden olyan elnevezésnél, azaz azonosítónál, melyet az xhtml lapunkon class osztályazonosítóhoz rendeltünk, a css lapunkon egy pontot kell az azonosító elé beírni.
- Böngésző programok, a külső margónak margin, és a belső margónak padding, adott értékeket az óra járásával egyezően olvassák be. Fent top, jobb right, lent bottom, bal left. Ezért a margóknak adott értékeket, rövidebben is megadhatjuk.
Például: az utolsop meghatározásait így is megadhatjuk:
.utolsop { font-size: 0,7em; padding: 0px 20px 20px 20px; }
Téma 18.
A tartalom, content div szakaszunk szélessége 730px, azaz rövidebb, mint a container div szakasz szélessége, mely 770px.
A kettő különbözete: 770 - 730 = 40px
A 40px-et osszuk el két részre, így a jobb és bal oldalára is 20px margót jeleníthetünk meg, azaz mozgassuk jobbra ezen div szakaszt 20px-el, a teljes tartalmával együtt.
A css, azaz stíluslapra a következőt kell beírni:
#content { width: 730px; margin-right: 20px; margin-bottom: 15px; margin-left: 20px; background-color: #fc0; }
Téma 19.
A tartalom, azaz content div szakasznak adott meghatározásoknál, van egy felesleges beírásunk, mégpedig az alsó margó margin-bottom: 15px;
Ez problémát nem okoz.
Weblapunkon az utolsó div szakasznak adott alsó margó, margin-bottom: 15px; értéket:
- Internet Explorer böngésző program végrehajtja, és megjeleníti.
- Mozilla böngésző program figyelembe sem veszi, annyi mintha be sem írtuk volna.
Hagyjuk az alsó margót ott, ahol van.
De ahhoz, hogy a Mozillában is legyen egy olyan alsó margó, mely az olvasóknak egyértelművé tegye, hogy dokumentumunk véget ért, következő meghatározást kell beírni a container div szakasznak: padding-bottom 15px; Megváltoztatjuk a margóknak adott értéket is, és töröljük a jobb oldali margót
Css lapon, a container div szakasz meghatározásai a következők lesznek:
#container {width: 770px; margin-top 10px; margin-left: 10px; padding-bottom: 15px; background-color: #fff;}
Téma 20.
Tegyük egyszerűbbé stíluslapunkat.
Margók meghatározásait, a Téma17. Megjegyzésében leírtaknak megfelelően vegyük rövidebbre, a jobb áttekinthetőség végett.
Mostantól a css, azaz stíluslapunk a következőképpen alakul:
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0px; background-color: #3c4f38; }
#container{width: 770px; margin: 10px 0px 0px 10px; padding-bottom: 15px; background-color: #fff;}
#siteName { width: 770px; height: 150px; margin-bottom: 15px; background-color: #0f0; }
#siteName h1 { text-align: center; padding-top: 1.5em; }
#pageName { width: 770px; height: 100px; margin-bottom: 15px; background-color: #0ff; }
#pageName h2 { text-align: right; padding-top: 1.5em; padding-right: 20px;}
#content { width: 730px; margin: 0px 0px 15px 20px; background-color: #fc0; }
#content h2 { text-align: left; padding-top: 1.5em; padding-left: 20px; }
p { font-size: 0,7em; padding: 0px 20px 0px 20px;}
.utolsop {font-size: 0,7em; padding: 0px 20px 20px 20px;}
strong { font-weight: bold; }
em { font-style: italic; }
Teszteljük az eddig beírtakat.
Böngésző programból, ismételten keresd meg, a weblapom elnevezésű mappádat, és nyisd meg, a teszt_egy.html fájlt.
Ha eddig minden feladatot jól írtál be, akkor ugyan azt kell látnod munkád eredményeként, mint a teszt_egy.html fájl megnyitásakor.