Webszerkesztés
Notepad ++

24. feladatsor


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

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

Fájl - Megnyitás

Alakítsd a „MAZ-ZOO Vadaspark” sort 1. szintű címsorrá, az alatta lévő „Bemutatkozás” sort 2. szintű címsorrá.

<p><h1>MAZ-ZOO Vadaspark<p></h1>
<p><h2>Bemutatkozás<p></h2>

3. Állíts be hiperhivatkozást a „szabadidőprogramok” szóra, amely mutasson a Programok című oldalra.

<a href="programok.html">szabadidőprogramok</a>

Állíts be hiperhivatkozást a „vadfajok bemutatására” szövegrészre is, ez mutasson a tudasteszt.html oldalra.

<a href="tudasteszt.html">vadfajok bemutatására</a>

4. Szúrd be a zsiraf.jpg-t a kep osztályú elemen belülre. Adj alternatív szöveget a képnek: „a park kedvence, Zsolti a zsiráf”.

<p class="kep"><img src="zsiraf.jpg" alt="a park kedvence, Zsolti a zsiráf"></p>

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

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

5. Nyisd meg a kapcsolat.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.

<html>
<head>
...
</body>
</html>

Rendeld a fájlhoz a styles.css stíluslap állományt.

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

6. Alakítsd félkövérré és dőltté a szövegben előforduló két telefonszámot.

<b><i>06-435/ 1245-72343</i></b>
<b><i>06345 1235-0945</i></b>

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

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

7. Nyisd meg a programok.html fájlt.

Fájl - Megnyitás

A táblázatban vond össze a „Hollókunyhó játszóház” szöveget tartalmazó cellát az alatta található üres cellákkal.

<td rowspan="4">Hollókunyhó játszóház</td>
...
<td></td>
<td>2. hétvége<br>
a másik két helyről is töröld az üres cellát

8. A táblázat első sorának celláit módosítsd fejléc cella típusúra.

<td><th>Dátum</td></th>
<td><th>Program</td></th>
<td><th>Részletek</td></th>

Mentsd el és zárd be a programok.html fájlt.

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

9. Nyisd meg a tudasteszt.html fájlt.

Fájl - Megnyitás

A „Melyik a legnagyobb élő madár?” kérdéshez tartozó rádiógombok feliratait alakítsd címke (label) típusúvá.

<input type="radio" name="nagymadar" value="albatrosz" id="nagymadar_albatrosz"> 
<label for="nagymadar_albatrosz">albatrosz</label><br>
a módosításokat a másik két helyen is végezd el

10. A „Melyik az egyetlen lábujjhegyen járó emlősállat?” kérdés választómezőjét egészítsd ki az alpakka választási lehetőséggel.

<option value="alpakka">alpakka</option>

Módosítsd a mező paramétereit úgy, hogy minden értéke látszódjon.

<select name="labujjhegy" size="4">

11. A „Melyik a kedvenc állatod és miért?” kérdés beviteli mezőjét módosítsd többsorossá, a sorok száma 6, a soron belüli karakterszám pedig 50 legyen.

<input type="text" name="kedvenc"><textarea rows="6" cols="50"></textarea>

Mentsd el és zárd be a tudasteszt.html fájlt.

Fájl - Mentés
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 fo azonosítójú elemen belüli h2 elemekre a betűméret legyen az alap betűméret 1,3-szorosa.

#fo h2{
	font-size: 1.3em;
}

13. A kep osztályú elemeken belüli img elemeknek legyen keretük, amely 2 pixel széles, folytonos vonalú és sárga (yellow) színű.

.kep img{
	margin: 10px;
	border: 2px solid yellow;
}

14. A table elemekhez rendeljen #fff háttérszínt.

table{
	background-color: #fff;
}

15. A td elemek minimális szélessége legyen 100 pixel, az itt lévő szöveg pedig legyen felülre rendezve.

td{
	border: 1px dotted #060;
	padding: 5px;
	min-width: 100px;
	vertical-align: top;
}

16. A textarea elemekben a betűszín legyen kék (blue).

textarea{
	color: blue;
}

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: