1. feladat Összetett feladatok Föld és a Hold Készíts weblapot, ahol a Földet és a Holdat mutatod be! A weblaphoz tartozó nyers szöveg a fold.txt és a hold.txt tartalmazza. A forrásban megtalálod a fold.jpg és a hold.jpg képeket. A két weboldal neve fold.htm és hold.htm legyen. 1. A böngésző címsorában a weboldal neve legyen olvasható. 2. Az oldal Times New Roman betűtípussal legyen formázva, fehér színűre. 3. Az első sorban az égitest neve legyen olvasható Címsor 1-es stílussal középre igazítva. 4. Az oldal háttere a hatter.png kép. 5. Mindkét oldalon legyen egy 1 soros 2 oszlopos táblázat középre igazítva. A bal oldali cellában az égitest képe, a jobb oldaliban a jellemzése legyen sorkizártan igazítva, 90%-osan. 6. Tegyél hivatkozást mindkét weboldalon az égitestek képére, amivel a másik weboldalt nyitod meg.
Minta: fold.html hold.html
2. feladat Magyarország megyéinek székhelyei Készíts weblapot, ahol hazánk megyeszékhelyeit mutatod be! A forrás mappában találhatod a képeket és a leírást a txt mappában szekhelyek.txt néven. Az elkészítendő weblap neve megyeszekhelyek.html legyen. Ügyelj arra munkád során a pontos beállításokra! 1. Az oldal színe barna(#996633), a szövegé fehér a hivatkozások színe minden esetben narancssárga(#ef6f02) legyen. 2. Az oldal böngészőjében megjelenő név: Hazánk megyeszékhelyei legyen. 3. Alakítsál ki egy táblázatot, aminek 20 sora és 3 oszlopa van! 4. A táblázat szélessége 90%-os legyen középre igazított. 5. Az első sor celláit egyesítsd és írd bel, hogy megyeszékhelyek. A szöveg 18 pt méretű, Arial betűtípussal szerepel, középre igazítva. Szegélyezd folytonos fekete vonallal, aminek a vastagsága 4 pontos.! 6. A cellaszegély és a cellaköz egyaránt 1-1 legyen. 7. A táblázat szegélye 2 pontos legyen körbe folytonos fekete vonallal. 8. Az első oszlopba sorszámnevek kerüljenek 14 pontos Arial betűtípussal. 9. A második oszlopba a megyeszékhelyek címerei szerepeljenek amiknek a mérete 40*40-es legyen 1 pontos szegéllyel középre igazítva. 10. A harmadik oszlopba a nevek kerüljenek növekvő sorendbe, középre igazítva 16 pontos betűméretben és a cellák szegélye 2 pontos legyen. 11. A táblázat alá írd középre igazítva, hogy Magyarország. Tegyél rá hivatkozást, ami a www.magyarorszag.hu weboldalra mutat!
12. Az utolsó sorba ezt a szöveget írd: Ha érdekel a megyeszékhelyekről fontos információ, akkor klikkelj a letöltés szövegre! Tegyél hivatkozást a letöltés szóra és ezzel letölthető a forras mappából a forras.txt! Minta:
3. feladat A magyar vizsla A magyar vizsla az egyik őshonos kutyafajtánk. Készíts weboldalt bemutatására a minta és a leírás alapján! Készíts két weboldalt, aminek a nevei vizsla.html és kepek.html! A weboldalhoz szükséges forrásfájlokat megtalálod az vizsla mappában. A két oldal szerkezete azonos legyen, az oldalak háttérszíne világosbarna, a szöveg fehér színű legyen. A linkek egységen kékek legyenek. A vizsla nevű weboldal: 1. Az első sorba a: Magyar vizsla szöveg legyen látható, középre igazítva címsor 1-es stílusban, 24 pontos betűmérettel. Ez a szöveg kerüljön a böngésző címsorába is. 2. Készíts egy 2*2-es táblázatot, aminek a margó szélessége 2 pont és a cellaköze 3 pontos, legyen középre igazítva és 2 pontos fekete színű szegéllyel keretezve! A szélessége 90%-os legyen. 3. Az első cellába a vizsla1.jpg kerüljön. A mérete legyen 200*150-es legyen, középre igazítva és a szegélye 2. A mellette lévő cellába a jellemzése kerüljön felsorolásban balra igazítva. 4. Az következő sor legyen egyesítve ahova a vizsla rövid története legyen olvasható sorkizárt szövegben, Times New Roman betűtípussal, másfélsoros térközt alkalmazva. 5. A táblázat alá a galéria szöveg kerüljön, középre igazítva címsor2-es stílussal ami a kepek.html oldalra mutat.
A kepek.html weboldal kialakítása: 1. Formázza meg a weboldalt, mint a másik oldalt! 2. Az első sorba írd fel, hogy képgaléria, formázd meg ugyanúgy, mint a másik oldalon! 3. Készíts alá, egy 2 soros 3 oszlopos táblázatot, aminek a cellaköze és a margója egyaránt 0 pontos, szélessége 90%-os középre igazítva! A cellák szegélye 2 pontos, fekete színű vonal. 4. A cellákba a mintának megfelelően illeszd be a képeket! 5. Formázd meg a képeket, úgy, hogy a magassága 200 pixel legyen méretarányosan! Igazítsd be a cellák közepére, 1 pontos szegéllyel ellátva! 6. Tegyél a képekre hivatkozást, ami a lekicsinyített képeket eredeti formájukban nyitja meg! 7. A táblázat alá, a Leírás szöveg legyen olvasható. Tegyél rá linket, ami a másik weboldalra mutat! 8. A böngésző címsorában a Képgaléria szöveg legyen olvasható.
Minta: vizsla.html kepek.html
4. feladat Visegrádi négyek Készíts egy 6 oldalból álló honlapot, ahol a visegrádi négyek-et mutatod be! Az elsőn a 4 ország címere és nevük szerepeljen, a következőn a visegrádi szerződés,a következő négyen pedig az egyes országok bemutatása legyen. A négy ország bemutatására szolgáló oldalaknak ugyanolyan legyen a kialakítása. Az oldalakat fooldal.html, szerzodes.html, magyarorszag.html, szlovakia.html, cshorszag.html és lengyelorszag.html néven mentsd el! A fooldal.html kialakítása: 1. Az első sorba a Visegrádi négyek szöveg kerüljön középre igazítva Címsor1-es stílusban piros színnel. Ez legyen a böngésző címsorában is. 2. Alá egy 2 soros 4 oszlopos táblázat kerüljön középre igazítva 90%-os mérettel. A táblázat szegélyezése fekete színű legyen 3 pontos folytonos vonallal 3. Az első sor magassága 200 pont legyen. 4. Illeszd be a képeket, magyarorszag.jpg, szlovakia.jpg, csehorszag.jpg, lengyelorszag.jpg sorrendben! A képek mérete 150 pont széles legyen méretarányosan. a képek köré 1 pont széles fekete vonal kerüljön. 5. A táblázat következő sora 30 pont magas legyen. A cellákba középre igazítva írd be az országok neveit, 18-as betűmérettel Times New Roman betűtípussal! 6. A táblázat a háttere türkiz színű (#ff0000). 7. A táblázat alá a következő szöveget írd balra zárva: Itt olvashatod el a szerződés történetét 16-os betűmérettel félkövér dőlt stílusban Courier New betűtípussal! Tegyél rá hivatkozást, ami a szerzodes.html oldalra mutat! 8. Az országok nevére kattintva juthat el a látogató a kiválasztott ország oldalára. 9. A képekre tegyél hivatkozást, ami az aktuális ország honlapjára mutat!
A szerzodes.html kialakítása: 1. Az oldal háttérszíne világoskék(#66ccff) legyen, a szöveg fekete színű sorkizárt, 14 illetve 24 pontos Courier New betűtípusú. 2. Az böngésző keretén a szerződés története jelenjen meg 3. Az első sorban a Visegrádi szerződés története legyen olvasható címsor1-es stílusban legyen megformázva középre igazítva. 4. A visegrad.txt szöveget másold be az oldalra és formázd meg! 5. A szöveg alá írd: vissza a főoldalra! majd tegyél rá hivatkozást, ami a fooldal.html-re mutat! 6. A másik 4 oldal kialakítása: 7. Mind a 4 oldalra ugyanaz a formázási beállítása igaz. Az orszag.txt-ben lévő szöveget használd a weboldalak feltöltésére. 8. Az oldalak világosbarna(#cc9900) színűek, a szövegek minden esetben halványsárga(#ffff66) színűek. 9. A böngésző címsorában minden esetben az adott ország neve legyen olvasható. 10. Az első sorban középre igazítva címsor1-es stílusban legyen olvasható az aktuális ország neve. 11. Alá egy 2 oszlopos 1 soros táblázat legyen beszúrva, ami 90%-os középre igazított 2 pont szélességű sötétbarna szegély legyen körülötte, a cellamargó 5 pont! 12. A bal oldali cella magassága 150 pontos legyen, amiben az ország térképe legyen látható. A kép középre legyen igazítva 1 pontos szegéllyel körülötte, 300 pont magasságú méretarányosan kicsinyítve! 13. A jobb oldali cellában felsorolás szimbólummal ellátva legyen olvasható az adott országok főbb jellemzői. 14. A táblázat kitöltése világosbarna legyen.
15. Alá a Vissza a főoldalra szöveg legyen olvasható balra igazítva, majd tegyél rá Minta: hivatkozást, ami a fooldal.html-re mutat! fooldal.html szerzodes.html
magyarorszag.html
5. feladat Opel Astra Készíts weboldalt, ami az Opel Astra gépkocsit mutatja be! A weboldalak neve legyen astra.html és galeria.html. A forras mappaban megtalálhatóak a weboldal elkészítéséhez szükséges fájlok és leírások. Mindkét oldal azonos felépítésű legyen. Az oldalak háttérszíne világoskék(#66ccff), a szöveg színe és a hivatkozások egyaránt sötétbarna(#663300) színűek legyenek. Az astra.html oldal elkészítése: 1. Mentsd el az oldalt astra.html néven. 2. Az oldal címe: OPEL Astra. 3. Az oldal első sorában az Opel Astra típusai szerepeljen. Formázd meg címsor1 stílussal középre igazítva. 4. A cím alá egy 1 soros és 2 oszlopos táblázat legyen beillesztve, aminek a szélessége 90%-os legyen középre igazítva, 4 pontos fekete szegéllyel. A táblázat háttere sötétbarna(#663300) legyen, benne a szöveg pedig világoskék(#66ccff). 5. A bal oldali cellában egy astra1.jpg képet illessz be, aminek a magassága méretarányosan 200 pixel magas legyen, 1 pontos fekete színű szegéllyel keretezve, középre igazítva. 6. A másik cellába a leiras.txt-ben lévő szöveget illeszd be, majd formázd meg a leírásban megfelelően, sorkizártan, 14-es betűméretben. 7. A táblázat alá középre egy email címet írjál: info@astra.hu néven, amire egy email linket tegyél. 8. A link alá a logo.jpg képet illeszd be középre igazítva magassága 200 pontos méretarányosan, szegély nélkül. Tegyél rá linket, ami a galeria.html-re mutat!
9. A link alá írd középre Arial betűtípussal 12-es betűmérettel, hogy :Tekintse meg a logóra kattintva galériánkat is! A galeria.html elkészítése: 1. Készíts egy galeria.html weboldalt, aminek a formázása megegyezik az astra.html weboldallal. 2. A böngésző címsorában az Opel Astra képei legyen olvasható. 3. Az oldal vázát egy 5 soros, 2 oszlopos táblázat legyen. 4. A táblázat háttere a logo.jpg legyen. 5. A cellák köze 1 pontos, cellamargó 2 pontos. 6. A táblázat 90%-os legyen középre igazítva, sötétkék(#000066) színű szegéllyel keretezve, aminek a vastagsága 2 pontos legyen. 7. A baloldali oszlop 150 pont széles legyen. 8. Az első sor legyen egyesítve amiben az Astra fejlődése szöveg legyen látható címsor2-es stílussal formázva középre igazítva. 9. A bal oldali cellákba az Astra képei legyenek láthatóak középre igazítva, amiknek a mérete 150 pixel széles legyen. 10. A jobboldali cellákba a kocsik generációi olvashatóak, középre balra igazítva félkövér 18 pontos méretben Courier New stílussal. 11. A táblázat alatt középre igazítva címsor3-as stílussal formázva legyen írva, hogy Vissza a főoldalra. 12. Tegyél rá linket, ami az astra.html-re mutat. 13. Az autók képére tegyél linket, ami a kocsikat eredeti méretben nyitja meg.
Minta: astra.html galeria.html
6. feladat A víz körforgása Hozz létre egy a vízkörforgását bemutató weboldalt. A vizkorforgas.txt állományban megtalálható a szöveg. a vizkorforgasa mappában pedig a képek. 1. A honlap: vizkorfogasa.html néven legyen elmentve. Az oldal kialakítása során figyelj a pontos, precíz formázásokra. 2. Az oldal háttérszíne sötétkék (#0000FF), a szöveg fehér színű, hivatkozások világoszöld(#99ff99) színűek legyenek. 3. A szöveg Arial betűtípusú legyen. 4. Az oldal böngészőjének címsorában a Víz körforgása szöveg legyen megjelenítve. 5. A törzs egy 2 soros 1 oszlopos táblázatban legyen középre igazítva 90%-os kicsinyítéssel, 2 pontos cellaközzel és 4 pontos cellaargóval. 6. A táblázat kitöltése világoskék legyen. 7. A táblázat fekete színnel legyen keretezve 2 pont szegéllyel. 8. Az első sort oszd fel 4 oszlopra ahol a következő adatokat írd be egymás utáni cellákba: felhő, esőcsap, talajvíz, pára. 9. Formázd meg a szavakat, hogy a cellákban középre legyenek igazítva 14 pontos betűmérettel és aláhúzva. 10. A következő sort oszd fel 2 oszlopra aminek a bal oldali cellája 100 pont széles. 11. Egymás alá szúrd be a vizkorforgasa mappából a képeket egymás után: felho.jpg, esocsap.jpg, talajviz.jpg, para.jpg sorrendben, amiknek a szélessége 80 pontos legyen. 12. A képeket keretezd be 1 pontos szegéllyel. A jobb oldali cellába a vizkorforgasa.txt forrásfájlból illeszd be a szöveget. Formázd meg úgy, hogy a főcím 18 pontos betűméretű félkövér stílusú legyen középre igazítottan, míg a többi szöveg 14 pontos legyen sorkizártan.
13. A táblázat alá a vizkorforgasa.jpg kerüljön középre igazítva, 2 szegéllyel. Minta:
7. feladat A műanyag újrahasznosítása A weboldal a műanyag újrahasznosításának lépéseit mutatja. Sajnos korunk egyik lényeges feladata lett a környezetszennyezés megelőzése, mérséklése. 1. Készíts weboldalt, amivel szemlélteted a műanyag újrahasznosítását. Az oldalt muanyag.html néven mentsd el. 2. Az oldal háttere fekete és a szöveg pedig fehér, a felkeresett hivatkozások pedig világoskék (##66FF00) színűek minden esetben. 3. Az oldal böngészőjének a címsorában a Műanyag újrahasznosítása szöveg szerepeljen. 4. Az első sorba írd fel, hogy a Műanyag újrahasznosítása, amit címsor1-es stílusban formázz meg Courier New betűstílussal középre. 5. Készíts egy táblázatot aminek 4 sora és 1 oszlopa legyen. A táblázatnak fehér szegélye legyen 3 pontos és a háttere fekete színű, a benne lévő szöveg pedig fehér. 6. Az első sorba az 1.jpg képet illeszd be a mintának megfelelően és a muanyag.txt forrásból a mintának megfelelő szöveget. A táblázatban lévő szöveg 14 pontos középre igazított. 7. Alakítsd ki a táblázatot a mintának megfelelően. 8. Ügyelj a pontos sorvégekre és a képformázásra.
Minta: