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.

Fájl - Megnyitás

Á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.

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ó 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>
 -  <li>Székhely:<br>
9999 Budapest, Kodály Zoltán u. 76.</li>
a fenti módosítást a másik öt helyen is végezd el
</ul>
</p>

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 kepzeseink.html fájlt.

Fájl - Megnyitás

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>
<td><th>zongora</td></th>
a fenti módosításokat a másik négy hangszernév sornál is végezd el

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

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

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

10. Nyisd meg a vendegkonyv.html fájlt.

Fájl - Megnyitás

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.

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 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.

Fájl - Mentés
Fájl - Mind bezárása
Fájl - Kilépés

Az elkészült weboldal: