Webszerkesztés
Notepad ++
16. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.html nevű fájlt a megadott helyről.
-
Alakítsd félkövérré az „5000 irodalmi, 800 tudományos, valamint több mint 2000 mesekönyv” szövegrészt.
<b>5000 irodalmi, 800 tudományos, valamint több mint 2000 mesekönyv</b>
Tedd dőltté az „árverést tartunk” szövegrészt.
<i>árverést tartunk</i>
3. Alakítsd számozatlan felsorolás stílusúvá az „Üzletünkben a következő...” cím alatti felsorolást.
<p><ul>-<li>bibliográfiák<br></li>-<li>metszetek<br></li>-<li>térképek<br></li>-<li>lexikonok<br></li>-<li>szépirodalmi művek</li></p></ul>
4. Állíts be hiperhivatkozást a „katalógusunkban talál” szövegrészre, amely mutasson a Katalógus című oldalra.
<a href="katalogus.html">katalógusunkban</a>
Állíts be hiperhivatkozást a „rendelje meg” szövegrészre is, ez mutasson a megrendeles.html oldalra.
<a href="megrendeles.html">rendelje meg</a>
Mentsd el és zárd be az index.html fájlt.
-
-
-
5. Nyisd meg az adokveszek.txt fájlt.
-
Egészítsd ki a fájlt a hiányzó head és body nyitó és záró jelölőivel.
<html lang="hu"> <head> ... <title>Patina Antikvárium </head> <body> ... </body> </html>
6. Alakítsd definíciós listává a az „Adok-Veszek” cím alatti felsorolást.
<p><dl> <dt>Adok</dt> <dd>életrajzi műveket,<br></dd> <dd>metszeteket,<br></dd> <dd>térképeket</dd> <dt>Veszek</dt> <dd>lexikonokat,<br></dd> <dd>szépirodalmi műveket</dd></p></dl>
Mentsd el a fájlt weboldalként adokveszek.html néven és zárd be.
-
Fájltípus: .html
-
Fájltípus: .html
-
7. Nyisd meg a katalogus.html fájlt.
-
Módosítsd a táblázat első sorának celláit fejléc cella típusúvá.
<td><th>könyv</td></th><td><th>kiadó</td></th><td><th>ára</td></th>
8. Szúrd be a táblázat alatt található konyv osztályú elemen belülre a konyvek.gif képfájlt.
Adj alternatív szöveget a képnek „könyvek” értékkel.
<p class="konyv"><img src="konyvek.gif" alt="könyvek"></p>
Mentsd el és zárd be a katalogus.html fájlt.
-
-
-
9. Nyisd meg a megrendeles.html fájlt.
-
Szúrj be az űrlaphoz magyarázó feliratot (legend) a következő szöveggel: „Töltse ki az alábbi űrlapot!”.
<form> <legend>Töltse ki az alábbi űrlapot!</legend>
10. Vegyél fel egy új rádiógombot a Kategória címszó mellé, a gombhoz tartozó címke „Szépirodalmi mű” legyen.
<input type="radio" name="kategoria" value="szepirodalom" id="szepirodalom"> <label for="szepirodalom">Szépirodalmi mű</label>
A rádiógombok közül alapértelmezetten legyen az „Életrajz” bejelölt állapotban.
<input type="radio" name="kategoria" value="eletrajz" id="eletrajz" checked>
11. Állítsd be az Üzenet felirat melletti szövegmezőt a következőképpen: sorok száma 8, a soron belüli karakterszám 40 legyen.
Alapértelmezetten a következő szöveg legyen a szövegmezőbe beleírva: „Itt üzenhet nekünk.”
<textarea name="uzenet" rows="8" cols="40">Itt üzenhet nekünk.</textarea>
Mentsd el és zárd be a megrendeles.html fájlt.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
Módosítsd a CSS szabályokat az alábbiak szerint:
A tartalom azonosítójú elem h2 gyermekeleménél a betűméret legyen az alap betűméret 1,2-szerese.
#tartalom h2{
font-size: 1.2em;
}13. A table elemek felső és alsó margóinak nagysága legyen 20 pixel, a bal- és jobboldali margót pedig állítsd be úgy, hogy az elem középre rendeződjön.
table{
margin: 10px20px auto;
}14. Módosítsd a th elemre vonatkozó megjelenítési szabályt: a háttér színének #800, a betűszínnek pedig #ff0 értéket adjon meg.
th{
color: #666#ff0;
background-color: #800;
}15. A fieldset elemekhez adj bélés (padding) értéket, amely egységesen 20 pixel legyen.
ilyen elem egyik oldalon sincs!fieldset{
padding: 20px;
}16. Az egysoros szöveges beviteli mező szélességét határozd meg 300 pixel méretűre.
input[type='text']{
width: 300px;
}Mentsd és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

