16. FELADAT
1.1. Egy weboldalon a
gyors letöltés céljából melyik a legalkalmasabb hangformátum típus?
a) CDA
b) VAW
c) MP3
d) WAV
1.2. Jelölje meg, melyik
az Instant Messaging (IM) helyes meghatározása!
a) Internetes szabvány, amelyet weboldalak készítéséhez
fejlesztettek ki.
b) Különböző típusú és méretű hálózatok, rendszerek
egymással való kommunikációjának
céljából megalkotott protokollok családja.
c) Olyan kiszolgáló, amely weblapok elérését teszi
lehetővé HTTP protokoll segítségével.
d) Olyan számítógépes
alkalmazás, amely azonnali szöveges kommunikációt tesz lehetővé a hálózaton
keresztül.
1.3. A(z) …… weboldalak
készítéséhez kifejlesztett leíró nyelv. Válassza ki, melyik a mondat helyes kiegészítése!
a) HTTP
b) HTML
c) TCP/IP
d) HTTPS
1.4. Milyen jelölőt kell
használni a weboldalak táblázataiban a táblázat egy-egy sorának
meghatározására?
a) <th> jelölőt
b) <td> jelölőt
c) <tr> jelölőt
d) <hr> jelölőt
1.5. Az alábbiak közül
melyik határoz meg többsoros szöveges beviteli mezőt?
a) <textarea
name="msg" rows="4" cols="50">Üzenet
szövege:</textarea>
b) <input type="textarea"
name="msg" rows="4" cols="50">Üzenet
szövege:</input>
c) <area name="msg" rows="4"
cols="50">Üzenet szövege:</area>
d) <form type="area" name="msg"
rows="4" cols="50" value="Üzenet szövege:">
1.6. Mire illeszkedik az
a CSS szabály, amelynek szelektora: „#kiemelt{...}”?
a) Arra az elemre,
amelynek "id" jellemzője "kiemelt".
b) Minden olyan elemre, amelynek "class"
jellemzője "kiemelt".
c) A <p id="kiemelt"> elemre.
d) Minden <p class="kiemelt"> elemre.
2 ) Félkövér betűtípus jele: b - bold; Dőlt jele: i - italic beállítható a szalagon,
vagy beírható HTML-ben:
<b>5000 irodalmi, 800 tudományos, valamint több mint 2000 mesekönyv</b>
<i>árverést tartunk</i>
3)Számozatlan felsorolássá akkor tudjuk alakítani a szalagon lévő ikonnal, ha minden sora új bekezdésbe kerül, vagy HTML-ben a következő tag-ekkel egészíted ki:
<ul><li> bibliográfiák
<li>metszetek
<li>térképek
<li> lexikonok
<li>szépirodalmi művek
</ul>
ul : unordered list, li: list; a li záró tag-jeit nem szükséges használni, de az ul záró tag-je kötelező!
4) Hiperhivatkozás beállítása a szalagon a kis földgömb és kapocs jelre kattintva, betallózod a kért html oldalt, arra kell figyelni, hogy a párbeszéd panelen létező fájl vagy weblap fül legyen aktív.
HTML-ben:
<a href="katalogus.html">katalógusban talál</a>
<a href="megrendeles.html">rendelje meg</a>
5) Az adokveszek.txt fájlt, nem a frontpage programban próbálod megnyitni, mert nem fog sikerülni, ahogy eddig sem! a dokumentumokból, és bemásolod egy üres oldal html kódjai közé
az első 5 sort a head nyitó és záró tag-jei közé a többit a body nyitó és záró tag-je közé
Mi is a kezdő head tag? <head> és a záró: </head> ide kerülnek a meta adatok és az oldal címe, ami a title tag-ek közé kerül. A többi a <body> kezdő, és a záró: </body> közé.
Tehát ha jól oldottad meg így fog kinézni:
<html>
<head>
<!DOCTYPE html>
<html lang="hu">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Patina Antikvárium</title>
</head>
<body>
<div id="honlap">
<div id="honlap_cim"></div>
<div id="honlap_felso">
<div id="menu1"><a href="index.html">Bemutatkozás</a></div>
<div id="menu2"><a href="katalogus.html">Katalógus</a></div>
<div id="menu3"><a href="adokveszek.html">Adok-veszek</a></div>
<div id="menu4"><a href="megrendeles.html">Megrendelés</a></div>
</div>
<div id="honlap_kozepso">
<div id="tartalom">
<h1>Adok-veszek</h1>
<p class="konyv2">
<img border="0" src="konyvek.gif" width="160" height="99"></p>
<dl>
<dt>Adok</dt> </dt>
<dd>életrajzi műveket,<br>
metszeteket,<br>
térképeket
</dd>
<dt>Veszek</dt> </dt>
<dd>lexikonokat,<br>
szépirodalmi műveket </dd>
</dl>
<div> </div>
</div>
</div>
<div id="honlap_also"></div>
</div>
</html>
</body>
</html>
A feladat azt kéri egészítsd ki a head és body kezdő és záró jelölőkkel, ez esetben nincs teendőd, mert már ott lesz! De kiegészíteni sem nagy kunszt!
<head> ez a kezdő és a záró: </head>
<body> kezdő és a zárója: </body>
6) Definíciós listát szintén tudsz beállítani - ott ahol a címsort is szoktuk.
Az adok és veszek szavak lesznek a definiált kifejezések
a többi felsorolás pedig a definíció! Csak akkor tudod beállítani itt, ha előtte felosztod új bekezdésekre. (enter-el)
HTML -ben:
<dl>
<dt>Adok</dt> </dt>
<dd>életrajzi műveket,<br>
metszeteket,<br>
térképeket
</dd>
<dt>Veszek</dt> </dt>
<dd>lexikonokat,<br>
szépirodalmi műveket </dd>
</dl>
Definíciós lista: a definiált kifejezést <dt> kezdő és záró tag közé helyezzük </dt>
a definíciót pedig a <dd> kezdő és záró </dd> tag-ek közé, de ez esetben nem kell soronként használni a dd-t mint a felsorolásnál, elég az elején és a végén.
7) Cellák rovatfejjé alakítása: kijelölöd az ez első sort, majd cella tulajdonságain belül kipipálod a rovatfej boxot és mentés.
HTML-ben:
<thead>
<tr>
<th>könyv</th>
<th>kiadó</th>
<th>ára</th>
</tr>
</thead>
8) Kattints a html nézetre és keresd a p class könyv osztályt. A kacsacsőrök közé szúrd be a képet a szokásos kép ikonnal. A kép ikonra kattintva betallózod a konyvek.gif fájlt, majd a kép tulajdonságok, általános fül alatt a szöveghez beírod az un. alt szöveget (ez jelenik meg, ha valaki nem tölti be a képeket) majd mented. Fontos, hogy a kép osztályon belülre kerüljön, mert csak akkor kerül a megfelelő helyre! Vagyis a <p class után!!!
HTML-ben:
<p class="konyv2">
<img border="0" src="konyvek.gif" alt="könyv" width="160" height="99"></p>
9) Fieldset elem, ami az űrlapnak egyfajta keretet ad, a legend pedig a magyarázó szöveg ami keretfolytatásként jelenik meg.
HTML-ben:
<fieldset>
<legend>Töltse ki az alábbi űrlapot!</legend>
10) Beszúrás - űrlap - választógomb - de a legegyszerűbb megoldás, ha másolsz, akkor biztosan nem rontod el a label cimkét. Mivel már vannak megadva rádió gombok, válaszd ki az egyik sort, másold be, és csak javítsd át a neveket életrajzi mű -re
Így:
<div class="form_elem">
<
input type="radio" name="kategoria" value="szepirodalmi mu" id="szepirodalmi mu"> <label for="szepirodalmi mu">Szépirodalmi mű</label><br>
<input type="radio" name="kategoria" value="eletrajz" id="eletrajz"> <label for="eletrajz">Életrajz</label><br>
<input type="radio" name="kategoria" value="metszet" id="metszet"> <label for="metszet">Metszet</label><br>
<input type="radio" name="kategoria" value="terkep" id="terkep"> <label for="terkep">Térkép</label><br>
<input type="radio" name="kategoria" value="lexikon" id="lexikon"> <label for="lexikon">Lexikon<br>
</label><br>
Az életrajzhoz tartozó rádió gombra kattints kétszer, és jelöld be a bejelölt állapotot!
Ekkor így fog kinézni a html-ben:
<input type="radio" name="kategoria" value="eletrajz" id="eletrajz" checked> <label for="eletrajz">Életrajz</label><br>
11) Kattints kettőt a szövegterületre, majd állítsd be a sorokat, add meg az alapértéket, vagy html-ben írd át így:
<textarea name="uzenet" rows="8" cols="40">Itt üzenhet nekünk.</textarea>
12) vedd fel a h2 elemet, vagy html kódra állítva módosítsd a betűtípusát, a lényeg, hogy ez kerüljön be a stíluslapra új sorként:
h2 { font-size: 1.2em }
13) table elemed van, a margó margin és nem padding!!! tehát a bekezdésnél állítod be! Ott tudod a középre rendezést is.
table{
margin: 20px 10px;; text-align:center
}
14) th elem szintén van, csak be kell állítani a szegélyen belül, hogy ezt kapd:
th{
color: #000FF0;background-color:#000800
}
15) Fieldset elemet emeld át html-ből, majd állítsd be a szegélynél a bélést
fieldset { padding: 20 }
16)
input[type='text'] {width:300 px;}
olyan nincs, hogy imput!!!! figyelj oda, hogy n betűt használj!!!
