Webszerkesztés
Notepad ++
18. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Alakítsd 2. szintű címsorrá a Cím, Telefon, Email és a Nyitvatartás sorokat.
végezd el a módosítást a másik két helyen is!<p><h2>Cím</p></h2>
3. Állíts be hiperhivatkozást az „info@...” email címre.
<a href="mailto:info@izzofitneszklub.hu">info@izzofitneszklub.hu</a>
Állíts be hiperhivatkozást az „üzenet írása itt” szövegrészre is, amely mutasson a Kapcsolat című oldalra.
<a href="kapcs.html">üzenet írása itt</a>
Mentsd el és zárd be az index.html fájlt.
-
-
-
4. Nyisd meg a szolg.txt fájlt.
-
Adj oldalcímet „Izzó Fitnesz Klub” szöveggel.
Rendelj a fájlhoz a styles.css nevű stíluslap állományt.
<link rel="stylesheet" href="styles.css"> <title>Izzó Fitnesz Klub</title> </head>
5. Tedd dőltté a „has-, hát- és karizom-fejlesztő” szövegrészt.
<i>has-, hát- és karizom-fejlesztő</i>
Alakítsd félkövérré a Konditerem, az Uszoda és a Szauna sorokat.
<p><b>Konditerem</b></p>végezd el a módosítást a másik két helyen is!
6. Szúrd be a fitness_2.jpg képet a kep osztályú elemen belülre.
Adj alternatív szöveget a képnek „súlyzó” néven.
<p class="kep"><img src="fitness_2.jpg" alt="súlyzó"></p>
7. A táblázat első sorának celláit alakítsd fejléc cella típusúvá.
<td><th>nap</td></th><td><th>teremfelelős edző</td></th>
Mentsd el a fájlt weboldalként szolg.html néven és zárd be.
-
Fájltípus: .html
-
Fájltípus: .html
-
8. Nyisd meg a kapcs.html fájlt.
-
Szúrj be egy új sort az oldalon található űrlapba a Név alá. A felirat legyen „Email cím”, a hozzá tartozó mező egysoros szöveges beviteli mező.
<p>Email cím<br> <input type="text" name="email" value=""></p>
9. A „Melyik szolgáltatásunk keltette fel az érdeklődését?” kérdéshez tartozó rádiógombok feliratait alakítsd címke (label) típusúvá.
<input type="radio" ... id="konditerem"> <label for="konditerem">Konditerem</label>végezd el a módosítást a másik két helyen is!
10. Az Üzenet felirathoz tartozó beviteli mezőt módosítsd többsorosra, a sorok száma legyen 6, a soron belüli karakterek száma pedig 60.
<input type="text" name="uzenet" value=""><textarea rows="6" cols="60"></textarea>
11. Az űrlap végén található nyomógomb paramétereit módosítsd úgy, hogy a típusa submit, a felirata pedig „küldés” legyen.
<input type="button""submit" name="button" value="button""küldés">
Mentsd el és zárd be a kapcs.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A kivalasztott osztályú hivatkozás jelölő elemekre a betűszín legyen sárga (yellow).
#menu a.kivalasztott{
color: yellow;
}13. Módosítsd a tartalom azonosítójú elem h2 gyermekelemeire vonatkozó szabályt: itt a betű mérete az alap betűméret 1,3-szorosa legyen, a betűstílus pedig félkövér.
#tartalom h2{
padding: 0.2em 1em;
font-size: 1.3em;
font-weight: bold;
}14. A table elemek felső és alsó margóit méretezd 10 pixelesre, a bal- és jobboldali margókat pedig állítsd be úgy, hogy az elem középre rendeződjön.
table{
border-collapse: collapse;
margin: 10px auto;
}15. A th és td elemekhez adj keretet, ami 1 pixel vastag, pontozott mintázatú és #666 színű.
th,td{
padding: 5px 15px;
border: 1px dotted #666;
}16. A fieldset elemek felső és alsó margója 0, a bal- és jobboldali margója 20 pixel értékű legyen.
fieldset{
padding: 20px;
margin: 0 20px;
}Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

