Eszköztár

38 Kezdőlap - Webszerkesztés - HTML - Nyaralótavak Magyarországon

Mintapélda

Ha a nyaralás kerül szóba, gyakran vitatkozunk rajta: Balaton-e, avagy Horvátország...? Pedig a választék ennél sokkal bővebb. Hiszen ha kevés pénzből akarunk színes élményeket megélni, akkor érdemes körülnézni Magyarország kisebb tavai között is, melyek partjain nyáron - helyszín és időpont függvényében - gazdagon válogathatunk a hangos fesztiválok, vagy épp a csendes, természetközeli programok tarka palettájáról.

E kitekintés céljából készítsünk weblapot, mely rövid ízelítőt ad az ország nyaralótavairól. Válasszuk ehhez az alábbi helyszíneket:

• Pécsi-tó (Orfű)
• Bánki-tó (Bánk)
• Vadása-tó (Őrség)
• Holt-Tisza (Tiszafüred)

A tavak bemutatása során

• emeljük ki a sajátos jellemzőiket,
• mellékeljünk hozzájuk néhány képet,
• adjuk meg térkép-hivatkozással, hogy hol találhatóak,
• illetve tüntessük fel pár, helyi szempontból érdekes weboldal linkjét.

Elsőként tehát foglaljuk össze a Pécsi-tóval kapcsolatos információkat. Eredményként egy, az alábbi ábrához hasonló tartalmat szeretnénk létrehozni:

---

Megoldás

1.
A fenti képnek megfelelő formázás nélküli (html) tartalom a linkre kattintva tekinthető meg:

• pecsito.htm

Mentsük le tavak nevű mappába a forráskódot ill. a szükséges dizájnelemeket, valamint egy pecsi_to nevű almappába a képeket az alábbi struktúra szerint:

• tavak
  • pecsito.htm
  • splash.png     (háttérkép)
    
  • map.png     (térképhivatkozás jele)
    
  • sun.png     (listaelemek jelei)
    
  • suw.png     (listaelemek jelei)
    
    
  • pecsi_to
    • 1.jpg     (galériaképek)
    • 2.jpg
    • 3.jpg
    • 4.jpg
    • 5.jpg
    • 6.jpg
    • s_1.jpg     (galériaképek indexképei)
    • s_2.jpg
    • s_3.jpg
    • s_4.jpg
    • s_5.jpg
    • s_6.jpg
    • elmenyterkep.jpg     (képek a linkekhez)
    • turistaterkep.jpg

2.
Ezt követően készítsük el a forráskód <style> ... </style> közötti részében az oldal formázását - vagyis kizárólag ebben a forráskódrészben dolgozzunk, a HTML tartalmon ne változtassunk! A meglodás egy lehetséges megvalósításának kódja az alábbiakban tekinthető át: Megnyitás új ablakban 3.
Folytatva a weblapot a feladat elején említett tavakkal, az alábbi eredményhez juthatunk:

• tavak.htm

Asztali gépek, vagy laptopok esetén (vagyis ahol van egér) színesen, tehát átláthatóan tekinthető meg a forráskód, ha a fenti linkre kattintás után megnyíló képernyőn jobb egérgombbal kattintva a helyi menüben kezdeményezzük az oldal forrásának megtekintését.

A megvalósított példa forráskódja mobileszközökön a következő képre kattintva érhető el:

A megvalósítás során használt fájlokat és képeket (vagyis a teljes mintapéldát) az alábbi linkről töltheti le, mely tömörített fájlt kicsomagolás után tud használni:

• tavak.zip (8 MB)

---

Feladat

Egészítse ki a weboldalt néhány további tó megjelenítésével! Adatok gyűjtéséhez használja az internetet. Ha nincs saját ötlete, mely tavakkal folytathatná, keressen rá az alábbiakra:

• Rukkel-tó (Dunavarsány)
• Szelidi-tó (Dunapataj)
• Szajki-tavak (Hosszúpereszteg)
• Vadkerti-tó (Soltvadkert)
• Holt-Duna (Fadd-Dombori)

Eddig 3 hozzászólás van a témához:

---

Új hozzászólás:
E-mail cím:	Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.
Név:	Ez a név fog megjelenni az Ön hozzászólásai mellett.
Mennyi tizenöt + öt? Számjegyekkel írja be!	Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.

© infojegyzet.hu, 2017. május