Webszerkesztés
Notepad ++

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

Módosítsd a „Köszöntjük Önt!” szöveget a következőre: „Köszönti kedves látogatóit az Ukulele Zeneiskola!” Tedd ezt a sort 1. szintű címsorrá.

<p><h1>Köszöntjük Önt!Köszönti kedves látogatóit az Ukulele Zeneiskola!</p></h1>

3. Az „Elérhetőségeinket a”... mondat elé szúrj be egy sortörést.

kapcsolatot.<br> Elérhetőségeinket

A „Kellemes böngészést...” mondat kerüljön új bekezdésbe.

megtalálja.</p> <p>Kellemes

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

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

4. Nyisd meg a kapcsolat.txt fájlt.

Fájl - Megnyitás

Adj oldalcímet „Ukulele zeneiskola” szöveggel. Rendelj a fájlhoz a styles.css stíluslap állományt.

<link rel="stylesheet" href="styles.css">
<title>Ukulele zeneiskola</title>
</head>

5. A cím alatti sorokat szerkeszd definíciós lista típusúvá.

<dl>
	<dt>Székhely:</dt>
		<dd>9999 Budapest, Kodály Zoltán u. 76.</dd>
...
	<dt>E-mail:</dt>
		<dd>titkarsag@ukuleleiskola.hu<br>
		info@ukuleleiskola.hu</dd>
</dl>

6. Alakítsd hiperhivatkozássá az oldalon szereplő két email címet.

<a href="mailto:titkarsag@ukuleleiskola.hu">titkarsag@ukuleleiskola.hu</a>
<a href="mailto:info@ukuleleiskola.hu">info@ukuleleiskola.hu</a>

7. Szúrd be a piano.jpg képet a kep_jobbra osztályú elemen belülre. Adj a képnek alternatív szöveget „zongora” értékkel.

<p class="kep_jobbra"><img src="piano.jpg" alt="zongora">

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

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

Fájl - Megnyitás

Az oldalon található táblázatból töröld a Megjegyzés oszlopot, valamint a fuvola sort.

<th>Megjegyzés</th>
...
<td>-</td>
mindegyik fentivel megegyező cellát töröld
...
<tr>
	<th>fuvola</th>
	<td>3 év, heti 3x2 óra</td>
	<td>szeptember 9.</td>
	<td>105 000 Ft/év</td>
</tr>

9. Javítsd a táblázatban a hegedű kezdési idejét május 4-re, a klarinét képzési díját pedig 95 000 Ft-ra.

<td>május 1.4.</td>
...
<td>8595 000 Ft/év</td>

Mentsd el és zárd be az 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

Az oldalon lévő űrlapba szúrj be egy űrlapelemet, amelynek „Email” a felirata, a hozzá tartozó űrlapelem pedig egysoros szöveges beviteli mező legyen.

<p>Email:<br><input type="text" name="email" value=""></p>

11. Adj magyarázó feliratot (legend) az oldalon lévő mezőcsoportnak a következő szöveggel: „Kérjük, írjon a vendégkönyvbe!

<fieldset>
<legend>Kérjük, írjon a vendégkönyvbe!</legend>

Mentsd el és zárd be az 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 elemek betűméretét állítsd az alap betűméret 1,8-szorosára, a szövegigazítást pedig középre.

h1{
	color: green;
	font-size: 1.8em;
	text-align: center;
}

13. A dt elemekben a szöveg betűképe legyen kiskapitális, betűstílus félkövér.

dt{
	color: green;
	font-variant: small-caps;
	font-weight: bold.
}

14. A megjegyzes osztályú elemekre a betűméretet állítsd az alap betűméret 0,9-szeresére és dőltté.

.megjegyzes{
	font-size: 0.6em0.9em;
	font-style: italic;
}

15. A table elemek margóját állítsd be a következőképpen: a felső és alsó értéke legyen 5 pixel, a bal- és jobboldali margók értékét állítsa be úgy, hogy az elem középre rendeződjön.

table{
	background-color: #e96;
	margin: 5px auto;
}

16. A textarea elemek háttérszínét állítsd #ccf értékre.

textarea{
	background-color: #ccf;
}
a kapcsolat.html oldalra beszúrt kép túl nagy, de a css részben sincs rá módosítás, szerintem hiányzik valami hasonló formázás:
.kep_jobbra img{
	height: 200px;
}

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: