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.
-
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.
-
-
-
4. Nyisd meg a kapcsolat.txt fájlt.
-
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ájltípus: (*.html)
-
-
8. Nyisd meg a kepzeseink.html fájlt.
-
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ájus1.4.</td> ... <td>8595 000 Ft/év</td>
Mentsd el és zárd be az kepzeseink.html fájlt.
-
-
-
10. Nyisd meg a vendegkonyv.html fájlt.
-
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.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
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;
}.kep_jobbra img{
height: 200px;
}Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

