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.
-
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.
-
-
-
4. Nyisd meg a tanfolyamok.txt fájlt.
-
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ájltípus: (*.html)
-
-
6. Nyisd meg az oktatok.html fájlt.
-
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.
-
-
-
8. Nyisd meg a kapcsolat.html fájlt.
-
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.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
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;
}... 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.
-
-
-
-
-
Az elkészült weboldal:

