Webszerkesztés
Notepad ++

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

Alakítsd definíciós listává a címsor alatti Cím, Telefon, stb. sorokat.

<dl>
	<dt>Cím</dt>
		<dd>9999 Budapest, Petőfi u. 23-25.</dd>
	<dt>Telefon</dt>
		 <dd>(06-1) 999-99999</dd>
	<dt>Email</dt>
		 <dd>info@izzofitneszklub.hu<dd>
		 <dd>vagy üzenet írása itt</dd>
	<dt>Nyitvatartás</dt>
		 <dd>hétfőtől - péntekig: 8-21<dd>
		 <dd>szombaton: 10-18<dd>
		 <dd>vasárnap: zárva</dd>
</dl>

3. Állíts be hiperhivatkozást az „üzenet írása itt” szövegrészre, amely mutasson a Kapcsolat című oldalra.

<a href="kapcsolat.html">üzenet írása itt</a>

Alakítsd hiperhivatkozássá a szövegben előforduló „info@...” email címet is.

<a href="mailto:info@izzofitneszklub.hu">info@izzofitneszklub.hu</a>

4. Módosítsd a szövegbe beszúrt kép megjelenési méreteit úgy, hogy a szélesség 220 pixel, a magasság 310 pixel legyen. Adj alternatív szöveget a képnek „edzőgép” értékkel.

<img src="fitness_1.jpg" width="220" height="310" alt="edzőgép">

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

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

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

Fájl - Megnyitás

Egészítsd ki a fájlt a hiányzó html nyitó és záró jelölőivel. Az oldalcím szövege pedig legyen „Izzó Fitnesz Klub”.

<html lang="hu">
<head>
...
<link rel="stylesheet" href="styles.css">
<title>Izzó Fitnesz Klub</title>
...
</body>
</html>

6. Alakítsd dőltté a „25*100*3 m-es” szövegrészt.

<i>25*100*3 m-es</i>

A „4 °C-os” szövegrészt pedig tedd félkövérré és dőltté.

<b><i>4 °C-os</i></b>

7. Az oldalon található táblázatnak adj táblázatcímet (caption) „Teremfelelősök beosztása” szöveggel.

<table>
<caption>Teremfelelősök beosztása</caption>

Mentsd el a fájlt weboldalként szolg.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 a kapcs.html fájlt.

Fájl - Megnyitás

Az oldalon lévő űrlap Név feliratához tartozó beviteli mező paramétereit módosítsd úgy, hogy a név értéke „nev”, a maximálisan beírható karakterek száma pedig 30 legyen.

<input type="text" value="" name="nev" maxlength="30">

9. Az űrlap rádiógombjai közé vegyél fel egy újat, amelynek címkéje „Egyéb” legyen. Alapértelmezés szerint ez a rádiógomb legyen bejelölt állapotban.

<input type="radio" name="szolg" value="egyeb" id="egyeb" checked><label for="egyeb"> Egyéb</label>

10. A többsoros beviteli mező sorainak számát módosítsd 6-ra, a soron belüli karakterek számát pedig 60-ra. A mezőbe alapértelmezetten szerepeljen a következő szöveg: „Írjon nekünk vagy üzenjen!”.

<textarea name="uzenet" rows="46" cols="5060">Írjon nekünk vagy üzenjen!

11. A „Küldés” nyomógomb mellé vegyél fel egy reset típusú nyomógombot is, amelyen „Alaphelyzetbe” felirat szerepeljen.

<input type="reset" name="reset" value="Alaphelyzetbe">

Mentsd el és zárd be a kapcs.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 menu azonosítójú elemen belüli hivatkozás jelölő elemekre, és azok link és visited állapotára határozz meg fehér (white) betűszínt, a szöveg ne legyen aláhúzva.

#menu a,
#menu a:link,
#menu a:visited{
	color: #dddwhite;
	text-decoration: none;
}

13. A tartalom azonosítójú elemen belüli h1 elemeknél a betűméret az alap betűméret 1,5-szöröse legyen, a szövegigazítás pedig középre történjen.

#tartalom h1{
	...
	font-size: 1.5em;
	text-align: center;
}

14. A th és td elemek számára határozz meg 5 pixeles felső és alsó, valamint 15 pixeles bal- és jobboldali bélés (padding) értékeket.

th,td{
	border: 1px dotted #666;
	padding: 5px 15px;
}

15. A legend elemekhez rendelj félkövér betűstílust.

legend{
	font-weight: bold;
}

16. A text típusú input elemek szélességét állítsd 500 pixel méretűre.

input[type="text"]{
	width: 500px;
}

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: