Webszerkesztés
Notepad ++

---

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

A „Bemutatkozás” sort alakítsd 1. szintű címsorrá.

<p> <h1>Bemutatkozás</p> </h1>

Az „Üdvözöljük fodrászatunkban!” sort töröld ki.

<h2>Üdvözöljük fodrászatunkban!</h2>

3. Alakítsd félkövérré a cím alatti első bekezdés szövegét.

<b>A FODOR ... található.</b>

A „Szombati napon...” kezdetű mondatot tedd félkövérré és dőltté.

<p><b><i>Szombati napon a nyitvatartás igény szerint  megoldható!</i></b></p>

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

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

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

<html>
<head>
...
</body>
</html>

Adj oldalcímet a fájlnak, „Fodor & Bodor fodrászat” néven.

<title>Fodor & Bodor fodrászat</title>
</head>

5. Alakítsd a szövegben az „Elérhetőség:”-től kezdődő felsorolást definíciós listává.

<dl>
	<dt>Elérhetőség:</dt>
		<dd>Tel: +36 20 999 99 99</dd><br>
(végezd el a módosításokat a másik három helyen is!)		
</dl>

6. Állíts be hiperhivatkozást a „fodorbodor@...” email címre.

<a href="mailto:fodorbodor@fodraszat.hu">fodorbodor@fodraszat.hu</a>

Továbbá állíts be hiperhivatkozást az „on-line felületünkön” szövegrészre is, amely mutasson a Bejelentkezés című oldalra.

<a href="bejelentkezes.html">on-line felületünkön</a>

7. Szúrd be a comfort.jpg képet a kep_jobbra osztályú p elemen belülre. Állítsd a kép megjelenésének magasságát 180 pixelre.

<p class="kep_jobbra"><img src="comfort.jpg" height="180"></p>

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

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

A táblázat első (Szolgáltatásaim-mal kezdődő) sorát alakítsd fejléc cella típusúvá.

<td> <th>Szolgáltatásaim</td> </th>

9. Vond össze a „Festés” szövegű cellát az alatta lévő üres cellával.

<th rowspan="2">Festés</th>

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

10. Nyisd meg a bejelentkezés.html fájlt.

„A hét mely napjára?” szöveghez tartozó mezőhöz vedd fel a szombat-ot is, mint választható érték.

<option value="Szo">szombat</option>

Állítsd be a mezőt úgy, hogy minden sora látszódjon.

<select name="het_nap" size="6">

11. A submit típusú nyomógomb mellé vegyél fel egy reset típusú nyomógombot is. A gomb felirata „adatok törlése” legyen.

<input type="reset" name="del" value="adatok törlése">

Mentsd el és zárd be a bejelentkezés.html fájlt.

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

Módosítsd a CSS szabályokat az alábbiak szerint:
A dd elemeknél a baloldali bélés (padding) legyen 20 pixel méretű, a betű mérete pedig az alap betűméret 0,9-szerese.

dd{
	padding-left: 10px 20px;
	font-size: 0.9em;
}

13. A table elemeknek adj keretet: a keret vastagsága 2 pixel, folytonos vonalú, a színe pedig #eee.

table{
	...
	border: 2px solid #eee;
}

14. A kep_jobbra osztályon belüli kép elemek felső margója legyen 5 pixel, jobboldali és alsó margója 20-20 pixel, a baloldali margó pedig 0 pixel.

.kep_jobbra img{
	float: right;
	width: 120px;
	margin: 5px 20px 20px 0px;
}

15. A caption elemek bélése (padding) legyen egységesen 5 pixel, a betű stílusa félkövér.

caption{
	...
	padding: 5px;
	font-weight: bold;
}

16. Az egysoros szöveges beviteli mezők háttérszíne legyen #ccf, a mezőszélesség 300 pixel.

input[type='text']{
	width: 150px 300px;
	background-color: #ccf;
}

Mentsd és zárj be minden fájlt és zárj be minden alkalmazást.

Az elkészült weboldal: