Webszerkesztés
Notepad ++

2. feladatsor


Indíts el a Notepad++ webszerkesztő programot.

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

Fájl - Megnyitás

Alakítsd át mindkét táblázat első sorát fejléc cella típusúvá.

<td><th>Hová</td></th>
<td><th>Indulás</td></th>
<td><th>Megjegyzés</td></th>
Ugyanígy a második táblázatnál is!

3. Szúrj be mindkét táblázat elejére táblázat feliratot (caption), az első táblázaté legyen Induló járatok, a másodiké Érkező járatok.

<caption>Induló járatok</caption>
<th>Hová</th>
Ugyanígy a második táblázatnál is!

4. Szúrj be egy-egy horgonyt (könyvjelzőt) indulo néven az első táblázat elé, valamint erkezo néven a második táblázat elé.

<caption id="indulo">Induló járatok</caption>
<caption id="erkezo">Érkező járatok</caption>

5. Szúrj be egy sort az induló járatok táblázatába a 17.30-kor Helsinkibe induló és a 18.45-kor Budapestre induló járat közé a következő adatokkal: Hová: Oslo, Indulás:18.15, Megjegyzés: Minden nap.

<tr>
<td>Oslo</td>
<td>18.15</td>
<td>Minden nap</td>
</tr>

Módosítsd a 21.00 órakor Stockholmból érkező járat megjegyzését Hétvégén-re.

<td>Hétköznapokon Hétvégén</td>

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

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

6. Nyisd meg az index.html fájlt.

Fájl - Megnyitás

A 105 pályát 75 sílift szövegrészt alakítsd félkövérré.

<b>105 pályát 75 sílift</b>

Az izgalmas síprogramokkal szövegrészt alakítsd dőltté.

<i>izgalmas síprogramokkal</i>

7. A Járat információk sort alakítsd 2. szintű címsorrá.

<p><h2>Járat információk</p></h2>

Az induló járatok, és az érkező járatok sorát alakítsd számozatlan felsorolás stílusúvá.

<ul>
<p><li>induló járatok</p></li>
<p><li>érkező járatok</p></li>
</ul>

8. Állíts be hiperhivatkozást az induló járatok-ra, amely mutasson az inf.html oldal indulo nevű könyvjelzőjére, valamint az érkező járatok-ra, ez mutasson az inf.html oldal erkezo nevű könyvjelzőjére.

<li><a href="inf.html#indulo">induló járatok</a></li>
<li><a href="inf.html#erkezo">érkező járatok</a></li>

9. Adj alternatív szöveget a jet.jpg képhez Járatok értékkel, állítsd a szélességet 200 pixelre.

<img src="jet.jpg" alt="Járatok" width="200">

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

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

10. Nyisd meg az ido.txt fájlt.

Fájl - Megnyitás

Rendelj a fájlhoz a styles.css stíluslap állományt.

<head>...
<link rel="stylesheet" href="styles.css">
...</head>

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

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

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

Fájl - Mentés másként...
Fájl típusa: .html
Fájl - Bezárás

11. Nyissa meg a kapcsolat.html fájlt.

Fájl - Megnyitás

A rádiógombok közül alapértelmezés szerint az egyéb érték legyen kiválasztott állapotban.

<input type="radio" name="tema" value="egyeb" id="egyeb" checked>

Adj a gombnak feliratot Üzenet küldése értékkel.

<input type="submit" name="ok" value="Üzenet küldése">

Mentsd el és zárd be a kapcsolat.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:
Add meg az oldal hátterének a ho_hatter.jpg képet, a kép legyen vízszintes és függőleges irányban is ismétlődő.

body{
	margin: 0;
	font-family: sans-serif;
	background: url('ho_hatter.jpg') repeat;
}

13. A nav azonosítójú elemen belüli ul elemek listajelölőjéhez rendeld a hopehely.png képet.

#nav ul li{
	padding: 10px 0;
	list-style-image: url('hopehely.png');
}

14. Adj keretet a table elemeknek: a keret legyen 1 pixel vastag, folytonos vonalú, a színe pedig #fcc.

table{
	...
	border: 1px solid #fcc;
}

15. Állítsd a táblázatok th elemeinek a háttérszínét #f99-re, betűszínét pedig #066-ra.

table th{
	padding: 5px 10px;
	background-color:#f99;
	color:#066;    
}

16. Állítsd a fieldset elemek margóját és a bélését (padding) 10 pixelre.

form fieldset{
	width: 500px;
	padding:  5  10px;
	margin:  5  10px;
}

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: