1. feladat A Nobel díj története és a magyar fizikai Nobel díjasok A weblapok híres magyar tudósok fényképeit és rövid életrajzukat kell, hogy tartalmazzák. A tudosok könyvtárban találod a meg a képeket és a tudosok.txt-ben a weblaphoz szükséges tartalmat. A feladat 5 db html oldal elkészítése. Ezek közül egy a főoldal, ennek neve fooldal.html, és 4 db tudós oldal, ezeknek a neve zsigmondy.html, hevesy.html, polanyi.html és olah.html legyen! A fooldal.html létrehozása: 1. A főoldalra, az első sorba középre írja a címet: Magyar Nobel díjasok. A cím szavai ebben a sorrendben piros (#ff0000), fehér (#ffffff) és zöld (#008000) színűek, stílusuk Címsor 1 legyen! 2. Alatta illessz be egy sorból és négy oszlopból álló táblázatot a mintának megfelelően! A cellák szélessége 100 pont, magassága 200 pont, egymástól való távolságuk (cellaköz) 10 pontos legyen! A táblázatot illeszd középre! 3. A táblázat egy-egy cellájába a megfelelő képeket szúrj be és ezeken helyezd el sorban a linkeket a zsigmondy.html, hevesy.html, polanyi.html és olah.html oldalakra! Azaz az egyes képekre kattintva lehessen eljutni a megfelelő oldalakra! 4. A táblázat alatt középen legyen Az oldalt készítette: felirat. Ezután szerepeljen az azonosító száma fehér (#ffffff) színnel, Címsor 4 stílussal! 5. Az oldal háttérszíne és a táblázat háttérszíne világos barna (#cc9900) legyen! Az oldal címe a böngésző címsorában is legyen látható!
A zsigmondy.html, hevesy.html, polanyi.html és olah.html oldalak: 1. Az aktuális oldal első sorában szerepeljen, a tudós neve, születési és halálozási dátuma középre igazítva, sötétbarna (#663300) színnel! 2. Alá szúrj be egy táblázatot, melynek egy sora és két oszlopa van a mintának megfelelően! A bal oldali cella 150 pont széles és 200 pont magas, a jobboldali 470 pont széles és 200 pont magas, egymástól való távolságuk (cellaköz) 10 pontos legyen! A táblázatot illeszd középre! 3. A táblázat celláiba balra a megfelelő képet, jobbra pedig a hozzá tartozó szöveget helyezd el! A szöveg a megfelelő txt állományban található, az első mondat utáni szövegrész. Betűmérete: normál, szövegtörzs, színe: sötét barna (#663300) igazítása: sorkizárt, 16 pontos betűmérettel. 4. A táblázat alatt középre igazítva a Vissza a főoldalra sötét barna (#663300) szöveg legyen olvasható és hivatkozást tegyél rá, amely a fooldal.html oldalra mutat! 5. Az oldalak háttérszíne és a táblázatok háttérszíne világos barna (#cc9900) legyen! Az oldalak címe a böngésző címsorában is legyen látható!
Minta: fooldal.html zsigmondy.html hevesy.html
2. feladat Mátyás király Készíts weboldalt, amelyben Mátyás király életét mutatod be! A feladat 5 weblap elkészítéséből áll: matyas.html, feketesereg.html, tortenetek.html, corvinus.html és a csalad.html. A matyas mappában megtalálhatóak a képek és a forrásfájlok. A matyas.html kialakítása: 1. Az oldal háttere sötétbarna legyen, a szöveg és a hivatkozás egyaránt halványsárga. 2. Az első sorban Mátyás király 1443 1490 szöveg szerepeljen címsor1-es stílusban, középre igazítva! 3. Alá Mátyás király képe kerüljön középre igazítva, 1 pontos, halványsárga szegéllyel, 120 pont szélességben! 4. A kép alatt a szöveg sorkizárt legyen Arial betűtípussal, 14 pontosan legyen megformázva. 5. Készíts a szöveg alá egy táblázatot, aminek 1 sora és 4 oszlopa van középre igazítva, 80 %-os kicsinyítéssel 2 pontos világossárga szegéllyel és sötétbarna háttérrel! 6. Balról jobbra haladva a következő szavak legyenek a táblázatba írva középre igazítva: fekete sereg, történetek, Corvinus, család. 7. Tegyél rájuk hivatkozást, ami a többi oldalra mutat! 8. A táblázat alá a forrás felirat legyen balra igazítva, Arial típusú 14 pontos betűmérettel, ami http://hu.wikipedia.org/wiki/i._mátyás_magyar_király oldalra mutasson!
A feketesereg.html, tortenetek.html, corvinus.html és a csalad.html kialakítása: 1. Az oldalak háttere sötétbarna legyen, a szöveg és a hivatkozás egyaránt halványsárga. 2. A böngésző címsorában az aktuális oldal címe szerepeljen. 3. Az oldalak első sorában ugyanaz a cím szerepeljen, mint a böngészőben és hasonlóképpen megformázva, mint a matyas.html oldalon. 4. Az oldalakon egy 2 oszlop 1 soros táblázat legyen, a magassága 100 pontos legyen. A bal oldali cellában a szöveg Arial típusú 14 pontos betűmérettel, a jobb oldali cellában a kép szerepeljen az aktuális szövegről. A kép a cellában legyen középre igazítva, aminek a magassága 80 pont magas legyen méretarányosan, 1 pontos fekete színű szegéllyel. 5. A táblázat alatt a Mátyás élete szöveg legyen olvasható Arial típusú 14 pontos betűmérettel, amit alakítsál linkké és a matyas.html oldalra mutasson! Minta: matyas.html
csalad.html corvinus.html
feketesereg.html tortenet.html
3. feladat Számítógép generációk Készíts weblapokat, ahol a számítógép fejlődéstörténetét ábrázolod! 6 honlapot kell létrehoznod, amiknek a neve: fooldal.html, elso.html, masodik.html, harmadik.html, negyedik.html es otodik.html. A fooldal.html kialakítása: 1. Az oldal böngészőjének címsorában jelenítsd meg a Számítógép generációk szöveget! 2. Az oldal háttere világoskék(#66ffff), míg a betűszín sötétkék(#000066) és a hivatkozások minden esetben fekete színűek. 3. Az oldal törzse egy 3 soros és 5 oszlopos táblázat. 4. A táblázat szélessége 90%-os középre igazítva, a szegélye 2 pontos. A cellaköz és a cellamargó 3-3 pontos egyaránt. 5. A táblázat háttere világoskék, a szöveg pedig sötétkék színű. 6. A táblázat első sorát egyesítsd és a Generációk szó felírva középre igazítva 20 pontos betűmérettel, Arial betűtípussal olvasható. 7. A következő sorba egytől ötig a mintának megfelelően írd be a generációkat középre igazítva 16 pontos betűméretben. 8. Az utolsó sorban a generációk számításának az ideje olvasható Courier New betűtípussal 12 pontos betűmérettel. 9. Tegyél hivatkozást a második sorban lévő kifejezésekre, amik az adott oldalakra mutasson! 10. A táblázat 2 pontos fekete színű szegéllyel van ellátva.
11. A táblázat alá szúrd be a képeket a pc1.jpg-től kezdve a pc5.jpg-ig. Méretezd a képeket 150 pont magasságúra, a méretarány megtartásával. A képek szegélye 2 pont vastagságú sötétkék színű. 12. Tegyél rájuk hivatkozást, amelyek eredeti méretben nyitják meg a képeket! A elso.html, masodik.html, harmadik.html, negyedik.html és otodik.html kialakítása: 1. Az oldalak címsorában szerepeljen a generációk neve. 2. A szövegek halványsárga(#ffff99), míg az oldal színe sötétbarna(#663300), a hivatkozások színe pedig fehér színű minden esetben. 3. Az első sorban a generáció neve és évszáma olvasható középre igazítva címsor1-es stílussal formázva. 4. A forrás mappában az aktuális képet szúrd be, 400 pont széles méretben fehér szegéllyel lásd el 2 pontos vastagságban! 5. Mellé a forrás mappában lévő szöveges fájlból a mintának megfelelően illeszd be a szöveget, 18 pontos betűméretben sorkizártan! 6. Minden kép alá írd be, hogy Vissza a főoldal és tegyél rá linket ami a fooldal.htmlre mutat!
Minta: fooldal.html elso.html masodik.html
4. feladat A világ ókori csodája Az ókori világ hét csodája a hét legismertebb ókori építmény. Készítsd el a honlapjukat: 8 darab oldalból álljon! Az első a fooldal.html, a többi pedig az aktuális csoda neve legyen! A fooldal.html kialakítása: 1. A böngészőben megjelenő név: Az ókori világ hét csodája. 2. Az első sorban ugyanez a kifejezés legyen olvasható, középre igazítva 24-es betűmérettel, Courier New betűtípussal és a fehér színnel. 3. Az oldal és a táblázatok kitöltése fekete színű, míg a hivatkozásoké minden esetben halványsárga (#FFFFCC) színű. 4. 24 pontot kihagyva a cím alatt egy 8 soros és 2 oszlopos táblázat legyen, aminek a bal oldali oszlopa 150 pontos. 5. A táblázat középre igazított és 95 %-os, a cellaköz és cellamargó 5 illetve 4 pontos. 6. Az első sort egyesítsd és a mintának megfelelő szöveget írd bele. középre igazítva félkövér dőlt betűstílussal és 18-as betűmérettel! 7. A táblázat bal oszlopába egymás után illeszd be a képeket, amiknek a mérete 100 pont széles méretarányosan, szegélyük pedig 2 pont széles halványsárga színű! 8. A jobb oldali oszlopban a képhez tartozó nevek szerepeljenek középre igazítva függőlegesen és vízszintesen egyaránt 16-os betűmérettel! 9. Tegyél hivatkozást a nevekre, amik új oldalon nyitják meg a csodákhoz tartozó oldalakat! 10. A táblázat alá kerüljön a: Töltsd le egyben a képeket felirat és ezzel a becsomagolt képeket letölthetik a látogatók! 11. Mivel aki dolgozik az téved alapon írj a következő sorba, hogy üzenet a szerkesztőnek és tegyél rá hivatkozást, ami az info@yahoo.com email címre mutat!
A 7 oldal kialakítása: Az oldalak böngészőjében mindig az aktuális csoda neve szerepeljen! 1. A formázások ugyanazok legyenek, mint a főoldalon. 2. Az oldal első sorában a csoda neve szerepeljen megformázva, mint a főoldalon. 3. Az oldal vázát egy táblázat adja aminek a szélessége 90%-os legyen. a cellamargó 5 pontos, a cellaköz 2 pontos. 4. A képet szúrd be a táblázat bal felső sarkába, a mérete 150 pont széles legyen méretarányosan! 5. A szöveget a forrás mappában találhatod és a mintának megfelelően helyezd el sorkizártan! 6. A táblázat alá a Vissza a főoldalra legyen beszúrva középre igazítva, 14-es betűmérettel, és hivatkozva a fooldal.html-re!
Minta: fooldal.html piramis.html
5. feladat Ősi magyar néphagyományok Készíts egy weboldalt a feladatok alapján, ahol a betlehemezés, regölés és lucázás néphagyományait mutatod be! Kettő darab weboldalt hozz létre, az egyik szokasok.html, míg a másik kepgaleria.html néven legyen elmentve! A szokasok.html kialakítása: 1. Az oldal címsorában a Népszokások szöveg legyen olvasható. 2. A háttérszín világosbarna, a szöveg fekete és minden más sötétbarna színű legyen. 3. Az első sorban ugyanaz a szöveg legyen olvasható, mint a böngészőben. Formázd meg címsor1 stílusban középre igazítva csupa nagybetűvel 24-es betűméretben! 4. Hagyjál ki egy sort és szúrjál be egy 3 oszlopos 1 soros táblázatot. a kitöltése ugyanaz legyen, mint az oldalnak! 5. Igazítsd középre 90%-osan, majd írd bele a következő szavakat 14 pontos betűmérettel: betlehemezés, regölés és lucázás! 6. A táblázat alatt 1 sor kihagyásával illeszd be a forrásmappából a szöveget, majd a címeket címsor2-es stílussal félkövéren a szöveget pedig sorkizártan 12 pontosan formázd meg! 7. A táblázatban lévő szavakra tegyél hivatkozást, hogy a megfelelő helyre ugorjon a szövegben! 8. Az utolsó sorba írd, hogy Tekintse mega galériánkat, majd helyezz el rajta hivatkozást a kepgaleria.html oldalra!
A kepgaleria.html kialakítása: 1. A formázás megegyezik a másik weboldaléval. 2. A böngészőben jelenjen mega képgaléria felirat. 3. Majd a képeket szúrd be egymás után (9 darab) és formázd meg, hogy a mérete 150 pont magas legyen méretarányosan! 4. A képek margója 2 pontos legyen. 5. Tegyél a képekre hivatkozást, ami eredeti méretben nyitja meg a fájlokat!
Minta: szokasok.html kepgaleria.html
6. feladat Gulyásleves Az egyik magyar híres ételünk a gulyásleves. Készítsd el a bemutató weblapját eme finom ételünknek! Ügyelj a pontos minta alapján történő formázásra! A gulyas mappában megtalálod a képeket és a szöveget. 1. A weboldal neve gulyas.html legyen. 2. Az oldal háttérszíne bordó(#800000) legyen, míg a szöveg fehér színű és a hivatkozások sárga(##ffff00) színűek. 3. Az első sorban a gulyásleves szó szerepeljen középre igazítva 24-es betűmérettel Times New Roman betűtípussal. 4. Alá a gulyas1.jpg szerepeljen 250 pont széles méretarányosan méretben középre igazítva szegély nélkül. 5. Kerüljön egymás alá a történet, recept, érdekességek, gulyásfajták és a recept letöltése szerepeljen! 6. Illeszd be a gulyas.txt fájlból a szöveget! 7. A szöveg sorkizártan jelenjen meg, az alcímek címsor2-es stílusban balra igazítva. 8. A felsorolásban lévő szöveget alakítsd át könyvjelzővé, ami a szövegben a megfelelő részegységhez ugrik! 9. A recept letöltése szöveget alakítsd linkké, ami a recept.txt szövegre mutat! Így, ha valaki szeretné, akkor letöltheti az igazi magyar gulyás receptjét. 10. A szöveg alá egy 1 soros 3 oszlopos táblázatot készíts, aminek 0 pontos szegélye van. A fennmaradó 3 képet a forrásban, pontos sorrendben szúrd be egymás mellé, középre igazítva a cellákban300 pontos szélességen méretarányosan!
Minta: