A következő feladatban egy weboldalt kell készítenie a Gödöllői HÉV rövid bemutatására a feladatleírás és a minta szerint. A feladat megoldása során a következő állományokat kell felhasználnia: forras.txt, varo.jpg, m72.jpg, sin.png, megallolista.txt, hev.css. Ahol a feladat másként nem kéri, a formázási beállításokat a hev.css stílusállományban végezze el!
1. Hozzon létre HTML oldalt hev.html néven! Állítsa be az oldal nyelvét magyarra és a kódolását UTF-8-ra!
2. A böngésző címsorában megjelenő cím „Gödöllői HÉV” legyen!
3. A weboldal fejrészében helyezzen el hivatkozást a hev.css stíluslapra!
4. Az oldal törzsébe másolja be az UTF-8 kódolású forras.txt állomány tartalmát!
5. Alakítsa ki az alcímeket és a kiemeléseket a minta szerint! A weboldal alcímei („Történet”, „Érdekességek”) 1-es szintű címsorok, a kiemelések („Gödöllői Királyi Váró”, „Csak angolosan”) 2-es szintű címsorok legyenek! A forrás utolsó bekezdését („Menetidő számítás”) alakítsa 3-as szintű címsorrá!
6. Alakítsa ki a szöveg bekezdéseit a minta szerint!
8. A „Gödöllői Királyi Váró” 2-es szintű címsor mellé helyezze el a varo.jpg képet! Ha a kép fölé visszük az egeret, vagy a kép valamiért nem jeleníthető meg, akkor mindkét esetben a „Királyi váró” szöveg jelenjen meg!
9. A váróról szóló bekezdésben található „Magyar Műszaki és Közlekedési Múzeum” szövegrészre készítsen hiperhivatkozást, amely a http://www.mmkm.hu/ weboldalt nyitja meg új ablakban!
10. A dokumentum végén található 3-as címsort („Menetidő számítás”) helyezze egy keretbe!
11. A következő beállításokat, módosításokat a stíluslap megfelelő kijelölőinél végezze el!
a. Állítsa be a stíluslapon, hogy a weboldal háttérképe a sin.png kép legyen!
b. Bővítse a stíluslapot úgy, hogy a bekezdések sorkizárt igazításúak legyenek!
c. Mindkét képet formázza a stíluslap kepek osztályának felhasználásával! A stíluslap bővítésével a kepek osztályba sorolt képi elemeket igazítsa jobbra!
d. A „Menetidő számítás” résznél létrehozott keretet formázza a stíluslap urlap azonosítójának felhasználásával!
12. A „Menetidő számítás” címsor alá (még a keretbe) készítsen űrlapot a minta szerinti űrlapelemekkel és parancsgombbal úgy, hogy a választás feldolgozható legyen a parancsgombra kattintás után!
13. A megállók kiválasztását biztosító legördülő lista HTML kódját a megallolista.txt állományban találja. (A value értékek az első állomástól mért menetidőket tartalmazzák percekben.) Az első megállólistában tegye alapértelmezetten kiválasztottá „Gödöllő” megállót, a másodikban pedig „Örs vezér tere” megállót!
14. Készítsen alprogramot, amely meghatározza és felugró ablakban megjeleníti a két kiválasztott megálló közti menetidőt percben az alábbi formában, például: „Menetidő: 48 perc!”! A két megállóhoz tartozó menetidő különbségét menetiránytól függetlenül, pozitív számként jelenítse meg! Ha azonos megállókat választ ki, akkor a „Hiba: Azonos megállókat választott ki!” szöveget jelenítse meg a felugró ablakban!