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.

Fájl - Megnyitás

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ájl - Mentés másként... - Fájltípus: (*.html)
Fájl - Bezárás

6. Nyisd meg az adokveszek.html fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Bezárás

8. Nyisd meg a katalogus.html fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Bezárás

9. Nyisd meg a megrendeles.html fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Bezárás

12. Nyisd meg a styles.css fájlt.

Fájl - Megnyitás

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.

Fájl - Mentés
Fájl - Mind bezárása
Fájl - Kilépés

Az elkészült weboldal: