Webszerkesztés
Notepad ++
44. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az autok.html nevű fájlt a megadott helyről.
-
Szúrj be horgonyokat (könyvjelzőket) a táblázatok elé: Az „A kategória” táblázata elé „a”, a „B kategória” táblázata elé „b”, a „C kategória” táblázata elé pedig „c” értékekkel.
<caption id="a"><b>A</b> kategória</caption> <caption id="b"><b>B</b> kategória</caption> <caption id="c"><b>C</b> kategória</caption>
3. Az „A kategóriájú” autók táblázatának sorait rendezd át úgy, hogy azok bérleti díj szerint növekvő sorrendben legyenek.
jelöld ki az áthelyezni kívánt táblázatsor adatait (3. sor: Rolls-Royce),
majd üsd le a C + x billentyűkombinációt;
üss egy N-t azután a <tbody> tag után, ahová be kell illesztened az előbbi táblázatsort,
majd üss egy C + v-t;
jelöld ki az áthelyezni kívánt a másik táblázatsor adatait (4. sor: Maserati),
majd üsd le a C + x billentyűkombinációt;
üss egy N-t azután a 2. táblázatsor után, ahová be kell illesztened az előbbi táblázatsort,
majd üss egy C + v-t
majd üsd le a C + x billentyűkombinációt;
üss egy N-t azután a <tbody> tag után, ahová be kell illesztened az előbbi táblázatsort,
majd üss egy C + v-t;
jelöld ki az áthelyezni kívánt a másik táblázatsor adatait (4. sor: Maserati),
majd üsd le a C + x billentyűkombinációt;
üss egy N-t azután a 2. táblázatsor után, ahová be kell illesztened az előbbi táblázatsort,
majd üss egy C + v-t
4. A B kategóriájú autók egyikéhez nem tartozik kép. Oda szúrd be az auto_default.gif képet.
<td><img src="auto_default.gif"></td>
Mentsd el és zárd be az autok.html fájlt.
-
-
-
5. Nyisd meg az index.html fájlt.
-
„A Különleges alkalom vagy egy egyszerű hétköznap.” mondatot tedd dőltté.
<p><i>Különleges alkalom vagy egy egyszerű hétköznap.</i>
„Az Itt találhat meg minket:” szövegrészt pedig alakítsd félkövérré.
<p><b>Itt találhat meg minket:</b>
6. A „Hadd hívjuk fel figyelmét...” mondattól a szöveg kerüljön új bekezdésbe.
helyre.</p> <p>Hadd hívjuk
A „Ráadásul ebben az évben...” mondat elé szúrj be egy sortörést.
tájékozódhat.<br> Ráadásul ebben
Állíts be hiperhivatkozást a „B és C kategória” szövegrészre, amely mutasson az Autók című oldal „b” nevű könyvjelzőjére.
<a href="autok.html#b">B és C kategória</a>
Állíts be hiperhivatkozást az „A kategória” szövegrészre is, ez mutasson az Autók oldal „a” nevű könyvjelzőjére.
<a href="autok.html#a">A kategória</a>
Mentsd el és zárd be az index.html fájlt.
-
-
-
8. Nyisd meg a kolcsonzes.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel. Rendelj a fájlhoz a styles.css stíluslap állományt.
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> ... </body> </html>
9. Az oldalon található lenyíló űrlapelem paramétereit módosítsd úgy, hogy az elem minden értéke látszódjon, alapértelmezés szerint pedig az Opel legyen kiválasztott állapotban.
<select name="autotipus" size="9"> ... <option value="opel" selected>Opel</option>
10. A többsoros beviteli mező sorainak számát módosítsd 6-ra, a soron belüli karakterek számát pedig 40-re. Alapértelmezésben a következő szöveg legyen a mezőbe írva: „Írja meg egyéb kívánságait!”
<textarea name="megjegyzes" rows="6" cols="40">Írja meg egyéb kívánságait!</textarea>
11. A nyomógomb mellé vegyél fel egy másik nyomógombot is, ennek adj meg reset típust és „alaphelyzetbe állítás” szövegű feliratot.
<input type="reset" name="gomb2" value="alaphelyzetbe állítás">
A fenti az eredeti szöveg, de szerintem helyesen:
Mentsd el a fájlt weboldalként kolcsonzes.html néven és zárd be.
- - Fájltípus: (*.html)
-
-
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 aktiv osztályú hivatkozás jelölő elemek számára adj #00f betűszínt, és aláhúzott szöveget.
#menu a.aktiv{
text-decoration: none underline;
color: #00f;
}13. A table elemek számára határozz meg 10 pixel felső és alsó margó értéket, a bal- és jobboldali margót állítsd be úgy, hogy az elem középre rendeződjön.
table{
...
margin: 10px auto;
}14. A caption elemek betűmérete az alap betűméret 1,2-szerese legyen, a háttér színe pedig #aaf.
caption{
font-weight: bold;
font-size: 1.2em;
background-color: #aaf;
}15. A text típusú input elemek szélességét állítsd 300 pixel méretűre.
input[type="text"]{
width: 300px;
}16. Minden input, select és textarea elem számára határozd meg a baloldali margó értékét 30 pixel méretűre.
input, select, textarea{
margin-left: 30px;
}Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

