Webszerkesztés
Notepad ++

26. 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

Tedd a Cégünk filozófiája sort 3. szintű címsorrá.

<p><h3>Cégünk filozófiája</p><h3>

A „Hogyan értük el és tartjuk fenn...” sort tedd szintén 3. szintű címsorrá.

<p><h3>Hogyan értük el és tartjuk fenn a sikeres működés feltételeit?</p><h3>

3. Alakítsd félkövérré a „Több mint 100 ügyfelünk... meggyőződhet.” mondatot.

<b>Több mint 100 ügyfelünk elégedettségéről személyesen is meggyőződhet.</b>

A „minimálisan szükséges technikával” szövegrészt pedig tedd dőltté.

<i>minimálisan szükséges technikával”</b>

4. Egészítsd ki a szöveget egy új bekezdéssel, az „Igen gondosan járunk el...” kezdetű bekezdés után, a szöveg pedig ez legyen: „Tekintse meg referenciánkat.” Állíts be hiperhivatkozást erre a mondatra, amely mutasson a referenciak.html oldalra.

kapcsolattartást.</p>
	<a href="referenciak.html"><p>Tekintse meg referenciánkat.</p></a>

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

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

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

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>

6. Tedd számozatlan felsorolás stílusúvá a „Vállalati, intézményi referenciák” címsor alatti listát.

<ul>
	<li>XZY Rt.</li>
	<li>AAA Iroda</li>
	<li>BBB Kft.</li>
	<li>CCC SZKI</li>
</ul>

Valamint számozott felsorolás stílusú listává a „Magán megrendelői referenciák” címsor alatti sorokat.

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

7. Cseréld le a festes.jpg képet a vodor.jpg képre. A kép alternatív szövege vödör legyen.

<img src="festes vodor.jpg" alt="festés vödör">

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

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

Fájl - Megnyitás

Töröld a táblázatból a Színhatárképzés sort.

<tr>
	<td>Színhatárképzés</td>
	<td>300 Ft/m<sup>2</sup></td>
	<td>250 Ft/m<sup>2</sup></td>
</tr>

Cseréld meg a Pácolás és a Lazúrozás sort egymással.

jelöld ki a Pácolás táblázatsort (<tr>...</tr> közötti részt), C + x (kivágás);
üss egy N-t a Lazúrozás táblázatsor előtti </tr> tag után, C + v (beillesztés)

9. Módosítsd a táblázat első sorának celláit fejléc cella típusúvá.

<td><th>Megnevezés</td></th>
<td><th>Ár</td></th>
<td><th>Akciós ár</td></th>

A Tapétázás cella osztálya legyen kiemelt.

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

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

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

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

Fájl - Megnyitás

Szúrj be az űrlapba egy új sort Email cím felirattal, a hozzá tartozó beviteli mező legyen egysoros szöveges.

<p>Email cím<br><input type="text" name="email"></p>

11. Az űrlap alján lévő gomb típusa legyen submit, felirata Küldés.

<input type=" button submit" name="ok" value=" ok Küldés">

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

Fájl - Megnyitá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 menu azonosítójú elemen belüli hivatkozás jelölő elemek hover állapotára a betű színe legyen vörös (red) és aláhúzott.

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

13. A table elemek felső és alsó margójának adj 5 pixel értéket, a bal- és jobboldali margót állítsd be úgy, hogy az elem középre rendeződjön.

table {
	...
	margin: 5px auto;
}

14. A kiemelt osztályú td elemek baloldali bélése (padding) legyen 30 pixel, a betűstílus pedig félkövér.

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

15. Az ajanlat_form azonosítójú elemen belüli egysoros szöveges beviteli mező szélessége legyen 300 pixel.

#ajanlat_form input[type='text'] {
	width: 300px;
}

16. Az ajanlat_form azonosítójú elemen belüli meret osztályú elemek szélességét állítsd 70 pixelre.

#ajanlat_form .meret {
	width: 70px;
}

Mentsd 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: