Eszköztár
38 Kezdőlap - Webszerkesztés - HTML - Nyaralótavak Magyarországon
ujdomainek.hu

Kisebb 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: A tavak bemutatása során 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: 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: 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: 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:

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:
előző oldal random oldal következő oldal


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

2018-06-08 11:18 Jágri Ilona Hatalmas segítség, nagyon esztétikus! (A teljes tananyagra is értem!) Köszönjük! :)

2021-10-03 23:20 Harka Dániel Szuper feladat! Köszi! :)

2021-10-05 20:19 Csongrádi Róbert Szép munka, köszönjük! :)
Tetszetős, hogy sok formázási elem lett bemutatva. Mind az egy stílus szabály vonatkoztatása több osztályra, elemre; mind pedig a szerkezeti pszeudók használata jól és érthetően lett szemléltetve. :)





Ú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 tizenkilenc + három?
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