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.
-
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.
-
-
-
5. Nyisd meg az ido.txt fájlt.
-
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árciusignovembertő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óberigFebruá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ájltípus: (*.html)
-
-
8. Nyisd meg az inf.html fájlt.
-
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.
-
-
-
10. Nyisd meg a kapcsolat.html fájlt.
-
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.
-
-
-
12. Nyisd meg a styles.css fájlt.
-
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.
-
-
-
-
-
Az elkészült weboldal:

