Webszerkesztés
Notepad ++

1. feladatsor


Indíts el a Notepad++ webszerkesztő programot.

2. Nyisd meg az index.html nevű fájlt a megadott helyről.

Fájl - Megnyitás

Módosítsd a karakterkódolás típusát, utf-8-ra.

Kódolás - UTF-8 kódolás
vagy
<meta charset="UTF-8">

Módosítsd az oldal címét Kovács és Fiai Kft.-re.

<title>Szobafestő és mázoló Kft.</title>
<title>Kovács és Fiai Kft.</title>

3. Állíts be hiperhivatkozást a kedvező ár szövegrészre, amely mutasson az arak.html oldalra.

<a href="arak.html">kedvező ár</a>

Töröld a hiperhivatkozást a Minőség, megbízhatóság szövegrészről.

<a href="#" target="_blank">Minőség, megbízhatóság</a>

Mentsd el és zárd be az index.html fájlt.

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

4. Nyisd meg a referenciak.txt fájlt.

Fájl - Megnyitás

A Vállalati, intézményi referenciák alatti négy sort formázd számozott felsorolás stílusúvá.

<p><ol>
<li>XZY Rt.<br></li>
<li>AAA Iroda<br></li>
<li>BBB Kft.<br></li>
<li>CCC SZKI<br></li>
</p></ol>

A Magán megrendelői referenciák alatti négy sort formázd számozatlan felsorolás stílusúvá.

<p><ul>
<li>Nagy Andrásné, Budapest 1844 Fenyő u. 12.<br></li>
<li>Szabó Zoltán, Budapest, 1845 Duna stny. 42.<br></li>
<li>Pais Ábrahám, Budapest, 1846 Varsányi út 67.<br></li>
<li>Joó Ferenc, Budapest, 1844 Soproni u. 14.<br></li>
</p></ul>

5. A Referenciák címsor alatti kép (festes.jpg) tulajdonságait módosítsd úgy, hogy a szélessége 130 pixel legyen, és adj festés értékkel alternatív szöveget a képhez.

<img src="festes.jpg" width="130" alt="festés">

6. Rendeld a fájlhoz a styles.css stíluslap állományt.

<link rel="stylesheet" href="styles.css" type="text/css" />

Egészítsd ki a fájlt a hiányzó head nyitó és záró jelölőivel.

<head>
<meta charset="utf-8">
...
<title>Kovács és Fiai Kft.</title>
</head>

Mentsd el a fájlt weboldalként referenciak.html néven és zárd be.

Fájl - Mentés másként...
- Fájltípus: (*.html)
Fájl - Bezárás

7. Nyisd meg az arak.html fájlt.

Fájl - Megnyitás

Egyesítsd a táblázat celláit a szomszédos üres cellákkal minden olyan sorban, ahol a cella osztálya kiemelt értékű.

<td class="kiemelt" colspan="3">Glettelés</td>
<td></td>
<td></td>
végezd el a módosítást a további 3 helyen is!

8. Módosítsd az Impregnálás tartalmú cellák melletti árakat 150-ről 180-ra, az akciós árat pedig 100-ról 120-ra.

<td>Impregnálás</td>
<td>150 180 Ft/m<sup>2</sup></td>
<td>100 120 Ft/m<sup>2</sup></td>

9. Szúrj be egy horgonyt (könyvjelzőt) tapeta néven a Tapétázás szövegű cellába.

<td class="kiemelt" colspan="3" id="tapeta">Tapétázás</td>

Állíts be hiperhivatkozást a Figyelmükbe ajánljuk a tapétázással kapcsolatos árainkat mondatra, amely mutasson a tapeta nevű könyvjelzőre.

<a href="#tapeta">Figyelmükbe ajánljuk a tapétázással kapcsolatos árainkat</a>.

Mentsd el és zárd be az arak.html fájlt.

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

10. Nyisd meg az ajanlat.html fájlt.

Fájl - Megnyitás

A Tapétázás rádiógomb alatti három rádiógombhoz adj címkéket (label) a többi rádiógomb címkéihez hasonló módon.

<label for="gletteles">Glettelés</label>
végezd el a módosítást a további 2 helyen is!

11. A többsoros beviteli mező értékébe alapértelmezetten legyen ez a szöveg beírva: egyéb megjegyzéseit ide írja.

<textarea name="megjegyzes" rows="2" cols="10">egyéb megjegyzéseit ide írja</textarea>

A mező sorainak száma legyen 5, a soron belüli karakterek száma pedig 40.

<textarea name="megjegyzes" rows="5" cols="40">

Mentsd el és zárd be az ajanlat.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 body elemhez rendelt betű típusa legyen tahoma, sans-serif, a háttérszín pedig #fff2e8.

body{
	color: #000000;
	font-family: tahoma, sans-serif;
	background-color: #fff2e8;
}

13. Módosítsd a menu azonosítójú elemen belüli hivatkozás jelölő elemek hover állapotát a következők szerint: a betűszín legyen vörös (red), és aláhúzott.

#menu a:hover{
	color: green red;
	text-decoration: none underline;
}

14. Adj keretet a kep osztályú elemeknek, a keret vastagsága legyen 2 pixel, a mintázata pontozott, a színe pedig vörös (red).

.kep{
	border: 0 2px dotted red;
	float: right;
}

15. Módosítsd a táblázatok celláinak cellabélés értékét: felülre és alulra 4 pixel, balra és jobbra 20 pixel értékeket rendelj.

th, td{
	border: 1px dotted white;
	padding: 5px 5px 4px 20px;
}

16. A kiemelt osztályú cellák baloldali bélését állítsd 30 pixelre.

td.kiemelt{
	color: red;
	font-weight: bold;
	padding-left: 30px;
}

Az ajanlat_form azonosítójú elemeken belül a meret osztályú input elem szélessége legyen 70 pixel.

#ajanlat_form input.meret{
	width: 50px 70px;
}

Ments el é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: