Webszerkesztés
Notepad ++

36. 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 félkövérré az „egyszerűen és gyorsan” szövegrészt.

<b>egyszerűen és gyorsan</b>

Alakítsd dőltté az „Ismerd meg a vidéket!” sort.

<i>Ismerd meg a vidéket!</i>

3. Állíts be hiperhivatkozást a „FALU-VÉGE kft.” szövegrészre, amely mutasson a kapcsolat.html oldalra.

<a href="kapcsolat.html"FALU-VÉGE kft.</a>

Állíts be hiperhivatkozást a „szálláshelyeket és programokat” szövegrészre is, ez mutasson a Programok című oldalra.

<a href="programok.html">szálláshelyeket és programokat</a>

4. Szúrd be a turizmus.jpg képet a kep osztályú elemen belülre. Adj alternatív szöveget a képnek „turizmus” értékkel.

<p class="kep"><img src="turizmus.jpg" alt="turizmus">

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

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

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

Fájl - Megnyitás

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

<html lang="hu">
<head>
...
<title>Falu vége turisztikai Kft.</title>
</head>
<body>
...
</body>
</html>

6. Módosítsa a „Kapcsolat” címsor alatti szöveget úgy, hogy az egyes sorok legyenek külön bekezdésben.

<p>FALU-VÉGE Utazási Iroda és Turisztikai Szolgáltató Kft.<br></p>
<p>Székhely: 9999 Piripócs, Faluvége u. 4568.<br></p>
<p>Telefon: +36 999 345 6789<br></p>
<p>Fax: +36 999 345 6789<br></p>
<p>Levelezési cím: 9999 Faluvége, Pf: 98654.</p>

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

Fájl - Megnyitás

Az oldalon található táblázathoz adj táblázatcímet (caption) „Tavaszi programok” szöveggel.

<table>
	<caption>Tavaszi programok</caption>

8. Rendezd a táblázat sorait helyszín szerinti ABC sorrendbe.

jelöld ki az utolsó két táblázatsor adatait, majd üsd le a C + x billentyűkombinációt...
üss egy N-t a <tbody> tag után; C + v.

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

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

9. Nyisd meg az ajanlo.html fájlt.

Fájl - Megnyitás

A Név felirathoz tartozó szövegmező név értéke legyen „nev”, a maximálisan beírható karakterek száma pedig 30.

<input type="text" name="textnev" maxlength="30">

10. A „Kategóriák, amelyekre kíváncsi” szöveghez tartozó jelölőnégyzetekhez vegyél fel egy új jelölőnégyzetet, amelynek a címkéje legyen „Gasztronómia”, és legyen alapértelmezés szerint bejelölt állapotban.

<input type="checkbox" name="gastro" value="1" id="gastro" checked>
<label for="gastro"> Gasztronómia</label><br>
A jelölőnégyzet value értéke nem lehet(ne) azonos!

11. A Régió mezőjét állítsd be úgy, hogy minden eleme látszódjon, alapértelmezés szerint pedig legyen „Budapest és Pest megye” kiválasztott állapotban.

<select name="regio" size="8">
	...
	<option value="bud" selected>Budapest és Pest megye</option>

Mentsd el és zárd be az ajanlo.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 li elemekre adj meg félkövér betűstílust, valamint 1.2em betűméretet.

#menu li{
	...
	font-weight: bold;
	font-size: 1.2 em;
}

13. Adj meg a thead elemen belüli th elemek háttérszínének #060, a betűszínének pedig fehér (white) értékeket.

thead th{
    ...
	background-color: #060;
	color: white;
}

14. A td elemekre határozz meg minimális szélességet, ami 80 pixel. Ugyanitt a függőleges szövegelrendezés felülre történjen.

td{
	...
	min-width: 80px;
	vertical-align: top;
}

15. A fieldset elemekhez rendelj 15 pixel méretű bélés (padding) értéket.

fieldset{
	padding: 15px;
}

16.A text típusú input elemek szélessége legyen 300 pixel.

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

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: