Webszerkesztés
Notepad ++

50. 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ítsa 2. szintű címsorrá az „Ideális pálya minden sízőnek”, valamint a „Járat információk” sorokat.

<p><h2>Ideális pálya minden sízőnek</p></h2>
<p><h2>Járat információk</p></h2>

3. Tedd félkövérré és dőltté a „105 pályát 75 sílift” szövegrészt.

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

„Az izgalmas síprogramokkal” szövegrészről vedd le a dőlt típussá alakító jelölőket.

<i>izgalmas síprogramokkal</i>

4. Cseréld le a jet.jpg képet a timetable.jpg képre. Határozd meg a kép megjelenési szélességét 250 pixel méretűre.

<img src="jettimetable.jpg" width="180250" alt="Járatok">

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

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

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

Fájl - Megnyitás

Egészítsd ki a fájlt a hiányzó body nyitó és záró jelölőivel. Adj oldalcímet „White Valley sípálya” értékkel.

<title>White Valley sípálya</title>
</head>
<body>
...
</body>
</html>

6. Javítsd ki a szövegben a „decembertől egészen márciusig” szövegrészt a következőre: „novembertől egészen februárig”.

decembertől egészen márciusig novembertől egészen februárig

Javítsd továbbá a „Márciustól októberig” szöveget erre: „Februártól novemberig”.

Márciustól októberig Februártól novemberig

7. Állíts be hiperhivatkozást a „Jelentkezzen időben, nehogy lemaradjon!” mondatra, amely mutasson a Kapcsolat című oldalra.

<a href="kapcsolat.html">Jelentkezzen időben, nehogy lemaradjon!</a>

Állíts be hiperhivatkozást a „különjáratokat” szóra is, ez mutasson az inf.html oldalra.

<a href="inf.html">különjáratokat</a>

Mentsd el a fájlt weboldalként ido.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 az inf.html fájlt.

Fájl - Megnyitás

Az oldalon lévő táblázatokból töröld a Zürichből 12.00 órakor érkező, valamint az Oslóba 12.15-kor induló járatokat.

<tr>
	<td>Zurich</td>
	<td>12.00</td>
	<td>Minden nap</td>
</tr>
...
<tr>
	<td>Oslo</td>
	<td>12.15</td>
	<td>Minden nap</td>
</tr>

9. Módosítsd a Zürichbe 16.20-kor induló járat indulási idejét 15.00 órára.

<td>Zurich</td>
<td>16.2015.00</td>

Helyezd át ezt a sort úgy, hogy a járatok időrendi sorrendben legyenek.

jelöld ki az előbbi táblázatsort (<tr>...</tr> közötti részt), üsd le a C + x billentyűkombinációt;
üss egy N-t a Római (Rome) járat </tr jelölője után, majd üsd le a C + v billentyűkombinációt

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

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

10. Nyisd meg a kapcsolat.html fájlt.

Fájl - Megnyitás

Az űrlapon lévő rádiógombok közé vegyél fel egy újat, amelynek címkéje „Egyéb” legyen. Alapértelmezetten az „Információ kérés” legyen bejelölt állapotban.

<input type="radio" name="tema" value="informacio" id="informacio" checked>
<input type="radio" name="tema" value="egyéb" id="egyeb"><label for="egyeb">Egyéb</label><br>

11. Az „Üzenet” felirathoz tartozó beviteli mezőt módosítsd többsorossá, a sorainak száma 5, a sorokon belüli karakterszáma 50 legyen.

<input type="text"textarea name="uzenet" rows="5" cols="50"></textarea>

Mentsd el és zárd be az 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:
A nav azonosítójú elemen belüli hivatkozás jelölőelemekre, valamint azok link és visited állapotára állítsd a betűszínt sárgára (yellow), a szöveg pedig ne legyen aláhúzva.

#nav a,
#nav a:link,
#nav a:visited{
	color: greenyellow;
	text-decoration: none;
}

13. A header azonosítójú elemen belüli h1 elemekre határozz meg 25 pixel méretű betűközt, valamint középre történő szövegigazítást.

#header h1{
	...
	letter-spacing: 25px;
	text-align: center;
}

14. A table elemek szélességére állítsd be 500 pixelt, a háttérszínre pedig #fff0f0 értéket.

table{
	...
	width: 500px;
	background-color: #fff0f0;
}

15. A th elemekre határozz meg 5 pixel felső és alsó, valamint 10 pixel bal- és jobboldali bélés (padding) értékeket.

th{
	...
	padding: 5px 10px;
}

16. A text típusú input elemek szélességét állítsd 450 pixel nagyságúra.

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

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: