Ebben a feladatban az internet kialakításában nagy szerepet játszó emberek munkásságáról kell weboldalt létrehoznia. A feladatban két weboldalt és egy képet kell majd elkészítenie. Az oldalakhoz használja fel a megadott mintát, illetve forrásként az UTF-8 kódolású szoveg.txt , a vannevarbush.jpg és a memex.jpg állományokat!
Amennyiben a rendelkezésre álló weblapkészítő program nem támogatja a táblázatok készítését, a táblázat cellái helyett alkalmazhat a végleges elrendezésnek megfelelő lapbeállításokat illetve szövegdobozokat.
Forrásokszoveg.txt vannevarbush.jpg memex.jpg helyettes.jpg Feladatok- Készítse el a weboldal tetején megjelenő 600×200 képpontos képet a leírás és a minta alapján! A képet cim.png néven mentse!
- A kép háttérszíne világoskék RGB(177, 199, 223) színű legyen! Erre fehér színnel és talp nélküli betűtípussal írja 0-k és 1-ek véletlenszerű sorozatát úgy megválasztva a betűméretet, hogy a mintának megfelelően hat sorral töltse ki a képet!
- Az így elkészült képre írja ki „Az internet története” szöveget a minta szerint! A cím szövege legyen lila RGB(102, 101,132) színű, talpas betűtípusú és körülbelül háromszor nagyobb betűméretű, mint a 0–1 sorozat! A címet két sorban írja ki, de ügyeljen arra, hogy ne lógjon ki a képből és a szövegek ne fedjék egymást!
- Hozzon létre két weblapot tortenet.html és bush.html néven! Mindkét weboldalt – azonos módon – az alábbiak szerint hozza létre:
a. Az oldal háttérszíne világosszürke (#E0E0E0 = RGB(224, 224, 224) kódú szín), a szöveg színe fekete, a linkek minden állapotának színe lila (#666584 = RGB(102, 101, 132) kódú szín) legyen!
b. Az oldal alapjának készítsen egy 650 képpont széles, 1 soros és 1 oszlopos, szegély nélküli táblázatot! A táblázat legyen középre igazított, a cellamargó és a cellaköz 0 pontos! A táblázat háttérszíne legyen kék (#5C6B7B = RGB(92, 107, 123) kódú szín)!
c. Ebbe a táblázatba készítsen egy 600 képpont széles, 4 soros, 4 oszlopos táblázatot! A táblázat vízszintesen legyen középre igazított! A táblázat háttérszíne legyen fehér! A cellamargót 0, a cellaközt 1 képpontosra állítsa!
d. A belső táblázat első sorában vonja össze a cellákat, és ide illessze be az elkészített cim.png állományt! (Ha nem tudta elkészíteni a címet, akkor a helyettes.jpg állományt illessze be!)
e. A 2. és 3. sor celláinak háttérszíne legyen világoskék (#CDDBEB = RGB(205, 219, 235) kódú szín)! A cellák magassága 35 pontos legyen!
f. A 2. és 3. sorba a szoveg.txt állomány első két sorában található neveket illessze be a minta szerint! A neveket vízszintesen és függőlegesen igazítsa középre!
g. A táblázat 4. sorában vonja össze a cellákat!
- A tortenet.html lapon a belső táblázat 2. sor első cellájában lévő „Vannevar Bush” névre készítsen linket! A link a bush.html oldalra mutasson!
- A belső táblázat 4. sorának összevont cellájába illessze be a szoveg.txt állományból a bevezető részt! A „Bevezető” címet formázza félkövér betűstílussal, és állítson be az alapértelmezettnél nagyobb betűméretet! A cím és a szöveg elrendezése a mintának megfelelő legyen! Ügyeljen a bekezdések kialakítására!
- A bevezető utolsó mondata előtt lévő „Forrás” szóval kezdődő két sor betűméretét állítsa az alapértelmezettnél kisebbre! Az itt található webcímet alakítsa hivatkozássá, ami az adott lapra mutat!
- A bush.html lapon az elkészített képre (cim.png) állítson be hivatkozást, amely a tortenet.html oldalra mutasson! Ezen a lapon ne legyen hivatkozás Vannevar Bush nevére a belső táblázat második sorában!
- A bush.html oldalra a belső táblázat 4. sor összevont celláiba illessze be a szoveg.txt állományból a Vannevar Bushra vonatkozó szöveget! A nevet és a születési, halálozási dátumot tartalmazó sort formázza félkövér betűstílussal, és állítson be az alapértelmezettnél nagyobb betűméretet! A címet és a szöveget rendezze el a mintának megfelelően! Ügyeljen a bekezdések kialakítására!
- Vannevar Bush munkásságáról szóló szöveg első bekezdéshez szúrja be a vannevarbush.jpg képet! A képet igazítsa a minta szerint! A képhez állítson 5 pontos jobb és bal margót!
- A szöveg harmadik bekezdése után középre illessze be a memex.jpg képet!
Minta |
|