Webszerkesztés
Notepad ++

20. 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 számozatlan felsorolás stílusúvá az oldal alján található „15 perc...600 Ft” három sorát.

<ul>
<li>15 perc 50 Ft<br></li>
<li>60 perc 250 Ft<br></li>
<li>180 perc 600 Ft</li>
</ul></dd>

Tedd félkövérré a „Nyitva 0-tól 24 óráig!!!” szövegrészt.

<b>Nyitva 0-tól 24 óráig !!!</b>

Alakítsd dőltté a „10% kedvezményt” szövegrészt.

<i>10% kedvezményt</i>

4. Állíts be hiperhivatkozást a „szolgáltatást” szóra, amely mutasson a szolg.html oldalra.

<a href="szolg.html">szolgáltatást</a>

Állíts be hiperhivatkozást továbbá az „expresso@...” email címre is.

<a href="mailto:expresso@expresso.mail.hu.">expresso@expresso.mail.hu.</a>

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

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

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

Egészítsd ki a fájlt a hiányzó body nyitó és záró jelölőivel.

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

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

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

6. Alakítsd fejléc cellává a táblázat azon celláit, ahol a táblázat két oszlopa össze van vonva.

<tdth colspan="2">Internet</td></th>
végezd el a módosítást a másik két helyen is

7. A táblázat Kávé alatti, Egyéb szolgáltatások feletti sorait rendezd ár szerint növekvő sorrendbe.

jelöld ki az áthelyezendő táblázatsor részeit, C + c
állj a megfelelő helyre, C + v

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

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

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

Szúrd be az expresso_2.jpg képet a kep osztályú elemen belülre.
A kép megjelenési szélessége 280 pixel legyen.

<p class="kep"><img src="expresso_2.jpg" width="280"></p>

9. Módosítsd a Neve felirathoz tartozó mező paramétereit a következőképpen: a mező neve nev, a maximálisan beírható karakterek száma 30 legyen.

<input type="text" name="text""nev" value="" maxlength="30">

10. A „Kérdése” felirathoz tartozó mező legyen többsoros beviteli mező, a sorainak száma 6, a soron belüli karakterek száma pedig 40 legyen.

<input type="text" name="kerdes" value=""><textarea rows="6" cols="40"></textarea>

11. Az űrlapon található rádiógombok melletti feliratokat alakítsd címke (label) típusúvá.

<label for="hirlevel_igen">igen</label>
<label for="hirlevel_nem">nem</label>

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.

Módosítsd a CSS szabályokat az alábbiak szerint:
A nav azonosítójú elemeken belüli hivatkozás jelölő elemek hover állapotánál a betűszín legyen vörös (red).

#nav a:hover{
	color: red;
}

13. A thead elemek th gyermekelemei esetén a betűkép kiskapitális legyen, a háttér színe pedig #ccc.

thead th{
	font-size: 1.3em;
	font-variant: small-caps;
	background-color: #ccc;
}

14. A tbody elemek th gyermekelemeinél a betűköz legyen 0,3em méretű.

tbody th{
	letter-spacing: 0.3em;
}

15. A th és td elemeknek határozzon meg bélés (padding) méretet: a felső és alsó 8 pixel, a bal- és jobboldali pedig 20 pixel méretű legyen.

th, td{
	border: 1px dotted #ccc;
	padding: 8px 20px;
}

16. A legend elemeknél a betűk stílusa legyen félkövér.

legend{
	font-weight: bold;
}

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: