Webszerkesztés
Notepad ++

18. 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 2. szintű címsorrá a Cím, Telefon, Email és a Nyitvatartás sorokat.

<p><h2>Cím</p></h2>
végezd el a módosítást a másik két helyen is!

3. Állíts be hiperhivatkozást az „info@...” email címre.

<a href="mailto:info@izzofitneszklub.hu">info@izzofitneszklub.hu</a>

Állíts be hiperhivatkozást az „üzenet írása itt” szövegrészre is, amely mutasson a Kapcsolat című oldalra.

<a href="kapcs.html">üzenet írása itt</a>

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

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

4. Nyisd meg a szolg.txt fájlt.

Fájl - Megnyitás

Adj oldalcímet „Izzó Fitnesz Klub” szöveggel.
Rendelj a fájlhoz a styles.css nevű stíluslap állományt.

<link rel="stylesheet" href="styles.css">
<title>Izzó Fitnesz Klub</title>
</head>

5. Tedd dőltté a „has-, hát- és karizom-fejlesztő” szövegrészt.

<i>has-, hát- és karizom-fejlesztő</i>

Alakítsd félkövérré a Konditerem, az Uszoda és a Szauna sorokat.

<p><b>Konditerem</b></p>
végezd el a módosítást a másik két helyen is!

6. Szúrd be a fitness_2.jpg képet a kep osztályú elemen belülre.
Adj alternatív szöveget a képnek „súlyzó” néven.

<p class="kep"><img src="fitness_2.jpg" alt="súlyzó"></p>

7. A táblázat első sorának celláit alakítsd fejléc cella típusúvá.

<td><th>nap</td></th>
<td><th>teremfelelős edző</td></th>

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

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

8. Nyisd meg a kapcs.html fájlt.

Fájl - Megnyitás

Szúrj be egy új sort az oldalon található űrlapba a Név alá. A felirat legyen „Email cím”, a hozzá tartozó mező egysoros szöveges beviteli mező.

<p>Email cím<br>
<input type="text" name="email" value=""></p>

9. A „Melyik szolgáltatásunk keltette fel az érdeklődését?” kérdéshez tartozó rádiógombok feliratait alakítsd címke (label) típusúvá.

<input type="radio" ... id="konditerem"> <label for="konditerem">Konditerem</label>
végezd el a módosítást a másik két helyen is!

10. Az Üzenet felirathoz tartozó beviteli mezőt módosítsd többsorosra, a sorok száma legyen 6, a soron belüli karakterek száma pedig 60.

<input type="text" name="uzenet" value=""><textarea rows="6" cols="60"></textarea>

11. Az űrlap végén található nyomógomb paramétereit módosítsd úgy, hogy a típusa submit, a felirata pedig „küldés” legyen.

<input type="button""submit" name="button" value="button""küldés">

Mentsd el és zárd be a kapcs.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 kivalasztott osztályú hivatkozás jelölő elemekre a betűszín legyen sárga (yellow).

#menu a.kivalasztott{
	color: yellow;
}

13. Módosítsd a tartalom azonosítójú elem h2 gyermekelemeire vonatkozó szabályt: itt a betű mérete az alap betűméret 1,3-szorosa legyen, a betűstílus pedig félkövér.

#tartalom h2{
	padding: 0.2em 1em;
	font-size: 1.3em;
	font-weight: bold;
}

14. A table elemek felső és alsó margóit méretezd 10 pixelesre, a bal- és jobboldali margókat pedig állítsd be úgy, hogy az elem középre rendeződjön.

table{
	border-collapse: collapse;
	margin: 10px auto;
}

15. A th és td elemekhez adj keretet, ami 1 pixel vastag, pontozott mintázatú és #666 színű.

th,td{
	padding: 5px 15px;
	border: 1px dotted #666;
}

16. A fieldset elemek felső és alsó margója 0, a bal- és jobboldali margója 20 pixel értékű legyen.

fieldset{
	padding: 20px;
	margin: 0 20px;
}

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: