Webszerkesztés
Notepad ++

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

A „Honlapunkon szörfölve...” szövegrésztől a szöveg kerüljön új bekezdésbe.

elterjesztését.</p>
<p>Honlapunkon szörfölve

A „Reméljük sikerül...” mondat elé szúrj be egy sortörést.

programokat.<br />
Reméljük sikerül

Állíts be hiperhivatkozást a „programokat” szóra, amely mutasson a Programok című oldalra.

<a href="programok.html">programokat</a>

Állíts be hiperhivatkozást az „Ön számára legmegfelelőbb” szövegrészre is, ez mutasson az ajanlo.html oldalra.

<a href="ajanlo.html">Ön számára legmegfelelőbb</a>

4. Cseréld le az oldalon található turizmus.jpg képet a falu.jpg képre.
Adj alternatív szöveget is a képnek „falu” értékkel.

<img src="turizmusfalu.jpg" alt="falu">

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ó html és head nyitó és záró jelölőivel.

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

6. Alakítsd át a Kapcsolat címsor alatti sorokat számozatlan felsorolás stílusúvá.

<ul>
<p><li><b>FALU-VÉGE Utazási Iroda és Turisztikai Szolgáltató Kft.</b></p></li>
végezd el a módosításokat a többi soron is
</ul>

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

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

<td><th>Dátum<td></th>
<td><th>Helyszín<td></th>
<td><th>Program<td></th>
<td><th>Megjegyzés<td></th>

8. Rendezd a táblázat sorait a dátum oszlopa szerint növekvő sorrendbe.

jelöld ki az utolsó sort, C + x, állj az első sor elé, 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

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

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

10 Az űrlapon található jelölőnégyzetekhez tartozó szöveget alakítsd címke (label) típusúvá.

az első két sor már adott, a többit az alábbihoz hasonlóan módosítsd
<label for="kultura">Kultúra</label>

11. Az űrlap végén található nyomógombot módosítsd submit típusúra, a felirata pedig „Küldés” legyen.

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

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 hivatkozás jelölő elemek hover állapota esetén a betűszín legyen #c6c.

#menu a:hover{
	color: #c6c;
}

13. A kep osztályú elemek img gyermekelemeinél a szélesség 300 pixel, a margó mérete 10 pixel legyen.

.kep img{
	width: 270px300px;
	margin: 10px;
}

14. A td elemek alsó kerete legyen 3 pixel vastag, pontozott mintázatú és #060 színű.

td{
	padding: 10px 5px;
	vertical-align: top;
	min-width: 80px;
	border-bottom: 3px dotted #060;
}

15. A fieldset elemek bélése (padding) egységesen legyen 15 pixel.

fieldset{
	padding: 15px;
}

16. A submit típusú input elemek háttérszíne legyen #c6c.

input[type='submit']{
	background-color: #c6c;
}

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: