Érettségi‎ > ‎Gyakorlat‎ > ‎HTML szerkesztés‎ > ‎

Az internet története

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ások

szoveg.txt    vannevarbush.jpg    memex.jpg    helyettes.jpg

Feladatok

  1. 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! 
  2. 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! 
  3. 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! 
  4. 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! 

  5. 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! 
  6. 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! 
  7. 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! 
  8. 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! 
  9. 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! 
  10. 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!  
  11. A szöveg harmadik bekezdése után középre illessze be a memex.jpg képet! 

Minta