Webszerkesztés
Notepad ++
43. feladatsor
Indíts el a Notepad++ webszerkesztő programot.
2. Nyisd meg az index.txt nevű fájlt a megadott helyről.
-
Egészítsd ki a fájlt a hiányzó html és body nyitó és záró jelölőivel.
<html> <head> ... </head> <body> ... </body> </html>
3. Tedd 1. szintű címsorrá az „Üdvözöljük a Patina Antikvárium weboldalán!” sort.
<p><h1>Üdvözöljük a Patina Antikvárium weboldalán!</p></h1>
Az „Üzletünkben a következő...” sort pedig alakítsd 2. szintű címsorrá.
<p><h2>Üzletünkben a következő műfajok közül választhat:</p></h2>
4. A „Jelenleg mintegy...” mondattól a szöveg kerüljön új bekezdésbe.
választékunkat.</p> <p>Jelenleg
A „Reméljük, sikerül...” mondat elé szúrj be egy sortörést.
vásárlót.<br> Reméljük,
5. Állíts be hiperhivatkozást a „bővítjük választékunkat” szövegrészre, amely mutasson a Katalógus című oldalra.
<a href="katalogus.html">bővítjük választékunkat</a>
Állíts be hiperhivatkozást a „szeretettel várunk” szövegrészre is, ez mutasson az adokveszek.html oldalra.
<a href="adokveszek.html">szeretettel várunk</a>
Mentsd el a fájlt weboldalként index.html néven és zárd be.
- - Fájltípus: (*.html)
-
-
6. Nyisd meg az adokveszek.html fájlt.
-
Alakítsd számozatlan felsorolás stílusúvá az „Adok” alatti sorokat, számozott felsorolássá a „Veszek” alatti sorokat.
<p><ul>-<li>életrajzi műveket,<br></li>-<li>metszeteket,<br></li>-<li>térképeket</li></p></ul> ...<ul><ol> <li>lexikonokat,</li> <li>szépirodalmi műveket</li></ul></ol>
7. Szúrd be a konyv.gif képet a konyv2 osztályú elemen belülre. A kép megjelenési szélességét állítsd 150 pixelre.
<p class="konyv2"><img src="konyv.gif" width="150">
Mentsd el és zárd be az adokveszek.html fájlt.
-
-
-
8. Nyisd meg a katalogus.html fájlt.
-
Az itt található táblázatnak adj táblázatcímet (caption) „Katalógus - június” szöveggel.
<table> <caption>Katalógus - június</caption>
Mentsd el és zárd be az katalogus.html fájlt.
-
-
-
9. Nyisd meg a megrendeles.html fájlt.
-
Az űrlap rádiógombjaihoz tartozó szövegeket tedd címke (label) típusúvá.
az első sornál meg van adva, hogyan kell, a többi sorra másold át, a for értéknek mindig az adott sor id értékét írd, pl.:<label for="metszet"> Metszet</label>
10. Az „Üzenet” felirathoz tartozó mezőt módosítsd többsoros beviteli mezővé, a sorok száma 8, a soron belüli karakterszám 40 legyen.
<input type="text"textarea name="uzenet" rows="8" cols="40"></textarea>
11. A küldés nyomógomb mellé vegyél fel egy másik nyomógombot, amely reset típusú, felirata pedig „törlés” legyen.
<input type="reset" name="torles" value="törlés">
Mentsd el és zárd be az 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ú elemen belüli h1 elemekre alkalmazz az alap betűmérethez képest 1,5-szörös betűméretet, valamint középre történő szövegigazítást.
#tartalom h1{
...
font-size: 1.5em;
text-align: center;
}13. A td elemek számára határozz meg 8 pixeles felső és alsó, valamint 3 pixeles bal- és jobboldali bélés (padding) értéket.
td{
padding: 0 8px 3px;
}14. A pros osztályú elemeken belüli td elemekre határozz meg #ffc háttérszínt.
.pros td{
background-color: #ffc;
}15. A legend elemek betűstílusát állítsd félkövérre.
legend{
font-weight: bold;
}16. A submit típusú input elemekhez rendelj #fcc háttérszín értéket.
input[type='submit']{
background-color: #fcc;
}Ments és zárj be minden fájlt és zárj be minden alkalmazást.
-
-
-
-
-
Az elkészült weboldal:

