Webszerkesztés
Notepad ++
10. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Állíts be hiperhivatkozást a „képzéseink listáját” szövegrészre, amely mutasson a képzéseket tartalmazó oldalra.
<a href="kepzeseink.html">képzéseink listáját</a>
Állíts be hiperhivatkozást a „kapcsolatot” szóra is, ez mutasson a kapcsolat.html-re.
<a href="kapcsolat.html">kapcsolatot</a>
3. Tedd félkövérré a „régi és új” szövegrészt, valamint a „Kellemes böngészést, jó szórakozást kívánunk!” mondatot.
<b>régi és új</b> <b>Kellemes böngészést, jó szórakozást kívánunk!</b>
4. Állítsd be a szöveg alatti kép paramétereit a következőképpen: A kép szélessége 380 pixel, magassága 280 pixel legyen. Adj hangszerek néven alternatív szöveget a képhez.
<img src="instruments.jpg" width="380" height="280" alt="hangszerek">
Mentsd el és zárd be az index.html fájlt.
-
-
-
5. Nyisd meg a kapcsolat.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó head és body nyitó és záró jelölőivel.
<html lang="hu"> <head> ... <title>Ukulele zeneiskola</title> </head> <body> ... </body> </html>
6. A cím alatti szövegrészt formázd át úgy, hogy az számozatlan felsorolás stílusú legyen.
<p> <ul>a fenti módosítást a másik öt helyen is végezd el-<li>Székhely:<br> 9999 Budapest, Kodály Zoltán u. 76.</li>
</ul> </p>
Mentsd el a fájlt weboldalként kapcsolat.html néven és zárd be.
-
Fájltípus: .html
-
Fájltípus: .html
-
7. Nyisd meg a kepzeseink.html fájlt.
-
Töröld az első mondatból a „melyekre jelentkezni legkésőbb február 1-jéig lehet” szövegrészt.
tanfolyamokat, melyekre jelentkezni legkésőbb február 1-jéig lehet.</p>
Javítsd továbbá a második mondat „áfával értendők” szövegrészt „áfa nélkül értendők”-re.
áfávaláfa nélkül értendők
8. Alakítsd a táblázat első sorának, valamint első oszlopának celláit fejléc cella típusúvá.
<tr><td></th>Hangszer</td><th><td></th>Képzés időtartama</td><th><td></th>Kezdés</td><th><td></th>Képzés díja</td><th></tr>
a fenti módosításokat a másik négy hangszernév sornál is végezd el<td><th>zongora</td></th>
9. Rendezd a táblázat sorait hangszer szerint ABC sorrendbe.
egy-egy áthelyezendő táblázatsort jelölj ki, C + x
kattints oda, ahová be kell szúrni a táblázatsort, C + v
kattints oda, ahová be kell szúrni a táblázatsort, C + v
Mentsd el és zárd be a kepzeseink.html fájlt.
-
-
-
10. Nyisd meg a vendegkonyv.html fájlt.
-
Módosítsd az „Üzenet” melletti beviteli mező paramétereit úgy, hogy a sorok száma 5, a soron belüli karakterek száma 40 legyen. A mezőben legyen alapértelmezetten a következő szöveg: „Az üzenetét ide írja.”
<textarea name="message" rows="5" cols="40">Az üzenetét ide írja.</textarea>
11. Módosítsd az űrlap végén lévő nyomógombot submit típusúra, a gomb felirata pedig „Bejegyzés küldése” legyen.
<input type="button" "submit" name="mehet" value="mehet" "Bejegyzés küldése">
Mentsd el és zárd be a vendegkonyv.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A h1 elemekre a betűméret az alap betűméret 1,8-szerese legyen, a betűszín pedig zöld (green).
h1{
text-align: center;
font-size: 1.8em;
color: green;
}13. A kep osztályú elemeken belüli img elemek keretének vastagsága legyen 2 pixel, folytonos vonalú és barna (brown) színű.
.kep img{
border: 2px solid brown;
}14. Egészítsd ki a th elemekre vonatkozó szabályt a következőkkel: a szöveg legyen balra rendezett, valamint a betűméret az alap betűméret 1,1-szerese.
th{
text-align: center left;
font-size:1.1em;
}15. A text típusú beviteli mezők szélességéhez rendeljen 300 pixel értéket.
input[type='text']{
width: 300px;
}16. Határozz meg bélés (padding) méretet a fieldset elemekre: a felső és alsó értéke legyen 0, a bal és jobboldali pedig 20 pixel.
fieldset{
width: 600px;
padding: 0 20px;
}Mentsd el és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

