Webszerkesztés
Notepad ++

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

A „Szakképzett, DMC bajnok...” mondat elé szúrj be egy sortörést.

tanfolyamunkra.<br/> Szakképzett, DMC

Tedd félkövérré az „OKJ-s vizsgát” szövegrészt.

<b>OKJ-s vizsgát</b>

3. Állíts be hiperhivatkozást „A tanfolyamok végén” szövegrészre, amely mutasson a tanfolyamok.html oldalra.

<a href="tanfolyamok.html">A tanfolyamok végén</a>

Állíts be hiperhivatkozást a „jelentkezz most” szövegrészre is, ez mutasson a Kapcsolat című oldalra.

<a href="kapcsolat.html">jelentkezz most</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 tanfolyamok.txt fájlt.

Fájl - Megnyitás

Egészítsd ki a fájlt a hiányzó body nyitó és záró jelölőivel. Rendeld a fájlhoz a styles.css stíluslap állományt.

<link rel="stylesheet" href="styles.css">
<title>DJ Suli</title>
</head>
<body>
...
</body>
</html>

5. A „Tanfolyamok” címsor alatti sorokat alakítsd számozatlan felsorolás stílusúvá.

<ul>
	- <li>Kezdő<br>
		heti 2 óra. 20 alkalom.<br>
		Ismerekedés a lemezjátszóval, keverővel, a különböző technikákkal.<br>
		5000 Ft / óra.</li>
		
	- <li>Haladó<br>
		heti 6 óra. 30 alkalom.<br>
		8000 Ft / óra.</li>
		
	- <li>Profi<br>
		heti 8 óra. 40 alkalom.<br>
		10000 Ft / óra.</li>
</ul>

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

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

6. Nyisd meg az oktatok.html fájlt.

Fájl - Megnyitás

Az itt található táblázat első sorát alakítsd fejléc cella típusúvá.

<td><th>DJ Eye</td></th>
<td><th>DJ Foot</td></th>

7. A táblázatban található képek megjelenési szélességeit állítsd 150 pixel méretűre.

<img src="dj_eye.gif" width="150">
<img src="dj_foot.jpg" width="150">

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

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

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

Fájl - Megnyitás

Az űrlap „Email” feliratához tartozó mező neve „email”, a maximálisan beírható karakterek száma 40 legyen.

<input type="text" name="email" maxlength="40">

9. A „Tanfolyam” rádiógombjai melletti feliratokat alakítsd címke (label) típusúvá.

<label for="tanfolyam-kezdo"> Kezdő</label>
<label for="tanfolyam-halado"> Haladó</label>
<label for="tanfolyam-profi"> Profi</label>

10. A többsoros beviteli mező sorainak számát állítsd 5-re, a soron belüli karakterek számát 40-re. Alapértelmezetten a mezőbe „Üzenj valamit!” szöveg legyen beírva.

<textarea name="uzenet" rows="5" cols="40">Üzenj valamit!</textarea>

11. A nyomógomb típusa legyen submit, a gomb felirata pedig „üzenet küldése”.

<input type="buttonsubmit" name="mehet" value="mehetüzenet küldése">

Mentsd el és zárd be az kapcsolat.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 menu azonosítójú elemen belüli hivatkozás jelölő elemekre, illetve azok link és visited állapotára alkalmazd a következő szabályokat: a betűszín legyen #000, a szöveg pedig ne legyen aláhúzva.

#menu a,
#menu a:link,
#menu a:visited{
	color: #666#000;
	text-decoration: none;
}

13. A szoveg azonosítójú elemen belüli h1 elemek szövegelrendezése középre történjen, a betű méretét pedig az alap betűméret 1,6-szorosában határozd meg.

#szoveg h1{
	text-align: leftcenter;
	font-size: 1.6em;
}

14. A th elemek betűmérete legyen az alap betűméret 1,2-szerese.

th{
	font-size: 1.2em;
}

15. A fieldset elemekre állíts be margó értékeket a következők szerint: a felső és alsó legyen 0 méretű, a bal- és jobboldali margót állítsd be úgy, hogy az elem középre rendeződjön.

fieldset{
	...
	margin: 0 auto;
}

16. A text típusú input elemek szélességének adj 300 pixel értéket.

input[type='text']{
	width: 300px;
}
jelen beállításokkal a táblázatból kilóg a szöveg!...
... hogy ez ne történjen meg, még a th és td elemek bélés (padding) értékét 5 px-re módosítottam
th,td{
	padding: 10px5px;
	...
}

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: