Embed Size (px)
Citation preview
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.html-
re 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 [email protected] 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:
