Webszerkesztés
Notepad ++
24. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Alakítsd a „MAZ-ZOO Vadaspark” sort 1. szintű címsorrá, az alatta lévő „Bemutatkozás” sort 2. szintű címsorrá.
<p><h1>MAZ-ZOO Vadaspark<p></h1><p><h2>Bemutatkozás<p></h2>
3. Állíts be hiperhivatkozást a „szabadidőprogramok” szóra, amely mutasson a Programok című oldalra.
<a href="programok.html">szabadidőprogramok</a>
Állíts be hiperhivatkozást a „vadfajok bemutatására” szövegrészre is, ez mutasson a tudasteszt.html oldalra.
<a href="tudasteszt.html">vadfajok bemutatására</a>
4. Szúrd be a zsiraf.jpg-t a kep osztályú elemen belülre. Adj alternatív szöveget a képnek: „a park kedvence, Zsolti a zsiráf”.
<p class="kep"><img src="zsiraf.jpg" alt="a park kedvence, Zsolti a zsiráf"></p>
Mentsd el és zárd be az index.html fájlt.
-
-
-
5. Nyisd meg a kapcsolat.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel.
<html> <head> ... </body> </html>
Rendeld a fájlhoz a styles.css stíluslap állományt.
<meta charset="utf-8"> <link rel="stylesheet" href="styles.css">
6. Alakítsd félkövérré és dőltté a szövegben előforduló két telefonszámot.
<b><i>06-435/ 1245-72343</i></b> <b><i>06345 1235-0945</i></b>
Mentsd el a fájlt weboldalként kapcsolat.html néven és zárd be.
-
Fájltípus: .html
-
Fájltípus: .html
-
7. Nyisd meg a programok.html fájlt.
-
A táblázatban vond össze a „Hollókunyhó játszóház” szöveget tartalmazó cellát az alatta található üres cellákkal.
<td rowspan="4">Hollókunyhó játszóház</td> ...a másik két helyről is töröld az üres cellát<td></td><td>2. hétvége<br>
8. A táblázat első sorának celláit módosítsd fejléc cella típusúra.
<td><th>Dátum</td></th><td><th>Program</td></th><td><th>Részletek</td></th>
Mentsd el és zárd be a programok.html fájlt.
-
-
-
9. Nyisd meg a tudasteszt.html fájlt.
-
A „Melyik a legnagyobb élő madár?” kérdéshez tartozó rádiógombok feliratait alakítsd címke (label) típusúvá.
<input type="radio" name="nagymadar" value="albatrosz" id="nagymadar_albatrosz"> <label for="nagymadar_albatrosz">albatrosz</label><br> a módosításokat a másik két helyen is végezd el
10. A „Melyik az egyetlen lábujjhegyen járó emlősállat?” kérdés választómezőjét egészítsd ki az alpakka választási lehetőséggel.
<option value="alpakka">alpakka</option>
Módosítsd a mező paramétereit úgy, hogy minden értéke látszódjon.
<select name="labujjhegy" size="4">
11. A „Melyik a kedvenc állatod és miért?” kérdés beviteli mezőjét módosítsd többsorossá, a sorok száma 6, a soron belüli karakterszám pedig 50 legyen.
<input type="text" name="kedvenc"><textarea rows="6" cols="50"></textarea>
Mentsd el és zárd be a tudasteszt.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A fo azonosítójú elemen belüli h2 elemekre a betűméret legyen az alap betűméret 1,3-szorosa.
#fo h2{
font-size: 1.3em;
}13. A kep osztályú elemeken belüli img elemeknek legyen keretük, amely 2 pixel széles, folytonos vonalú és sárga (yellow) színű.
.kep img{
margin: 10px;
border: 2px solid yellow;
}14. A table elemekhez rendeljen #fff háttérszínt.
table{
background-color: #fff;
}15. A td elemek minimális szélessége legyen 100 pixel, az itt lévő szöveg pedig legyen felülre rendezve.
td{
border: 1px dotted #060;
padding: 5px;
min-width: 100px;
vertical-align: top;
}16. A textarea elemekben a betűszín legyen kék (blue).
textarea{
color: blue;
}Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

