Webszerkesztés
Notepad ++

44. feladatsor


Indíts el a Notepad++ webszerkesztő programot.

2. Nyisd meg az autok.html nevű fájlt a megadott helyről.

Fájl - Megnyitás

Szúrj be horgonyokat (könyvjelzőket) a táblázatok elé: Az „A kategória” táblázata elé „a”, a „B kategória” táblázata elé „b”, a „C kategória” táblázata elé pedig „c” értékekkel.

<caption id="a"><b>A</b> kategória</caption>
<caption id="b"><b>B</b> kategória</caption>
<caption id="c"><b>C</b> kategória</caption>

3. Az „A kategóriájú” autók táblázatának sorait rendezd át úgy, hogy azok bérleti díj szerint növekvő sorrendben legyenek.

jelöld ki az áthelyezni kívánt táblázatsor adatait (3. sor: Rolls-Royce),
majd üsd le a C + x billentyűkombinációt;
üss egy N-t azután a <tbody> tag után, ahová be kell illesztened az előbbi táblázatsort,
majd üss egy C + v-t;
jelöld ki az áthelyezni kívánt a másik táblázatsor adatait (4. sor: Maserati),
majd üsd le a C + x billentyűkombinációt;
üss egy N-t azután a 2. táblázatsor után, ahová be kell illesztened az előbbi táblázatsort,
majd üss egy C + v-t

4. A B kategóriájú autók egyikéhez nem tartozik kép. Oda szúrd be az auto_default.gif képet.

<td><img src="auto_default.gif"></td>

Mentsd el és zárd be az autok.html fájlt.

Fájl - Mentés
Fájl - Bezárás

5. Nyisd meg az index.html fájlt.

Fájl - Megnyitás

„A Különleges alkalom vagy egy egyszerű hétköznap.” mondatot tedd dőltté.

<p><i>Különleges alkalom vagy egy egyszerű hétköznap.</i>

„Az Itt találhat meg minket:” szövegrészt pedig alakítsd félkövérré.

<p><b>Itt találhat meg minket:</b>

6. A „Hadd hívjuk fel figyelmét...” mondattól a szöveg kerüljön új bekezdésbe.

helyre.</p> <p>Hadd hívjuk

A „Ráadásul ebben az évben...” mondat elé szúrj be egy sortörést.

tájékozódhat.<br> Ráadásul ebben

Állíts be hiperhivatkozást a „B és C kategória” szövegrészre, amely mutasson az Autók című oldal „b” nevű könyvjelzőjére.

<a href="autok.html#b">B és C kategória</a>

Állíts be hiperhivatkozást az „A kategória” szövegrészre is, ez mutasson az Autók oldal „a” nevű könyvjelzőjére.

<a href="autok.html#a">A kategória</a>

Mentsd el és zárd be az index.html fájlt.

Fájl - Mentés
Fájl - Bezárás

8. Nyisd meg a kolcsonzes.txt fájlt.

Fájl - Megnyitás

Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel. Rendelj a fájlhoz a styles.css stíluslap állományt.

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
...
</body>
</html>

9. Az oldalon található lenyíló űrlapelem paramétereit módosítsd úgy, hogy az elem minden értéke látszódjon, alapértelmezés szerint pedig az Opel legyen kiválasztott állapotban.

<select name="autotipus" size="9">
...
	<option value="opel" selected>Opel</option>

10. A többsoros beviteli mező sorainak számát módosítsd 6-ra, a soron belüli karakterek számát pedig 40-re. Alapértelmezésben a következő szöveg legyen a mezőbe írva: „Írja meg egyéb kívánságait!”

<textarea name="megjegyzes" rows="6" cols="40">Írja meg egyéb kívánságait!</textarea>

11. A nyomógomb mellé vegyél fel egy másik nyomógombot is, ennek adj meg reset típust és „alaphelyzetbe állítás” szövegű feliratot.

<input type="reset" name="gomb2" value="alaphelyzetbe állítás">
Mentse el és zárja be a kolcsonzes.html fájlt.
A fenti az eredeti szöveg, de szerintem helyesen:

Mentsd el a fájlt weboldalként kolcsonzes.html néven és zárd be.

Fájl - Mentés másként... - Fájltípus: (*.html)
Fájl - Bezárás

12. Nyisd meg a styles.css fájlt.

Fájl - Megnyitás

Módosítsd a CSS szabályokat az alábbiak szerint:
A menu azonosítójú elemen belüli aktiv osztályú hivatkozás jelölő elemek számára adj #00f betűszínt, és aláhúzott szöveget.

#menu a.aktiv{
	text-decoration: none underline;
	color: #00f;
}

13. A table elemek számára határozz meg 10 pixel felső és alsó margó értéket, a bal- és jobboldali margót állítsd be úgy, hogy az elem középre rendeződjön.

table{
	...
	margin: 10px auto;
}

14. A caption elemek betűmérete az alap betűméret 1,2-szerese legyen, a háttér színe pedig #aaf.

caption{
	font-weight: bold;
	font-size: 1.2em;
	background-color: #aaf;
}

15. A text típusú input elemek szélességét állítsd 300 pixel méretűre.

input[type="text"]{
	width: 300px;
}

16. Minden input, select és textarea elem számára határozd meg a baloldali margó értékét 30 pixel méretűre.

input, select, textarea{
	margin-left: 30px;
}

Ments és zárj be minden fájlt és zárj be minden alkalmazást.

Fájl - Mentés
Fájl - Mind bezárása
Fájl - Kilépés

Az elkészült weboldal: