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.
-
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.
-
-
-
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>
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.
-
-
-
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.
-
-
-
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.
-
-
-
-
-
Az elkészült weboldal:

