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

Népautók

A XX. századi technikai fejlődés egyik mozgatója és ugyanakkor eredménye a nagyfokú motorizáció. A folyamat – mennyiségileg – akkor lépett nagyot előre, amikor megjelentek a népautók. Bár neve alapján valójában csak a német Volkswagen „bogár” volt az, de a francia Citroën „kacsa” és az olasz Fiat 500 ugyanolyan fontos lépcső volt az autózás mindennapossá válásában. 

Az Ön feladata, hogy a minta és a leírás alapján a képszerkesztési feladatokat elvégezze, és a népautókat bemutató weboldalak végleges formáját elkészítse. A forrás mappában található állományok és mappák:
  • nepautoforras.txt, index.html és nepautok.html (a dokumentumok szövege és félkész állapota UTF-8 kódolással), 
  • citroen mappa: citroen_2cv-1a.jpg, citroen_2cv-1b.jpg, citroen-2.jpg, citroen-3.jpg, citroen-e.png, citroen200.jpg 
  • vw mappa: vw-1.jpg, vw-2.jpg, vw-3.jpg, vw-e.png, vw200.jpg 
  • fiat mappa: fiat-1.jpg, fiat-2.jpg, fiat-3.jpg, fiat-e.png, fiat200.jpg 
A következő leírás alapján alakítsa át a nepautok.html oldalt, mindeközben fokozott figyelmet fordítson a mintára! (A minta – a könnyebb áttekinthetőség miatt – a valósnál kevesebb szöveget tartalmaz, ezért az oldalról ne töröljön semmit!) 

Források

Feladatok

  1. A böngésző címsorában megjelenő cím szövege „Három igazi népautó” legyen! 

  2. Az oldal jellemzőinél állítsa be, hogy a háttérszín szürke (#C0C0C0 kódú szín) legyen! A szöveg színét pedig állítsa feketére! A linkek színe minden állapotban fehér legyen!

  3. Az oldal – jelenleg – egy három sorból és négy oszlopból álló táblázatot tartalmaz. A táblázatot az alábbiaknak megfelelően módosítsa:

    a. A táblázat legyen középre igazított és 1000 képpont szélességű!
    b. A szegélyt 0, a cellamargók értékét 10, a cellaközt 6 képpontosra állítsa be!
    c. Szúrja be a forrásba a következő sort a táblázat tetejére:
      <tr><td></td><td colspan="2"></td><td></td></tr>
    d. Az első sor két szélső cellájának szélességét állítsa be 200 pontosra!
    e. A táblázat háttérszíne fehér, cellái az oldal hátterével azonos szürke hátterűek legyenek!

  4. Az első sor egyesített cellájába gépelje be a címet!

  5. Az autók leírásában a cím alatt helyezzen el egy 700 pont széles, vízszintes vonalat! 

  6. A táblázat tartalmát formázza az alábbi leírásoknak – és a mintának – megfelelően:

    a. A képet tartalmazó cellák tartalma függőlegesen fentre, vízszintesen középre igazított legyen!
    b. A folyó szövegnél nagyobb betűméretű bekezdéseket egyes, kettes, hármas címsorokkal formázza – méretüknek megfelelően! A bekezdéseket a minta alapján igazítsa!
    c. A Volkswagennél Barényi Béla nevét emelje ki félkövér karakterekkel!
    d. A Citroën leírásának végén található forrást alakítsa hivatkozássá!
    e. Az autók leírása végén található forrásmegjelöléseket formázza dőlten és igazítsa a táblázat külső szegélyéhez!

    A következő leírás alapján alakítsa át az index.html oldalt, mindeközben fokozott figyelmet fordítson a mintára!

  7. A táblázatot igazítsa középre, a cellaközt pedig állítsa 6 pontosra!

  8. A táblázat forrásába – soronként a megfelelő helyekre – szúrja be a következő kódot a mintán látható táblaszerkezet kialakításához:
    <td colspan="2"></td>

  9. Az egyesített cellákban szereplő szövegeket gépelje be, vagy másolja be a nepautoforras.txt fájlból! Formázza őket egyes szintű címsorként, igazításukat pedig állítsa be a minta alapján!

  10. A táblázat celláinak háttérszínét állítsa be az oldal háttérszínével egyezőre!

  11. Készítse el a Citroën „kacsa” hiányzó képét a forras/citroen mappa megfelelő képéből! A képből a második sor képeivel egyező méretű részt vágjon ki! A kép tartalma hasonlítson a mintához (látható legyen az első lámpa és a Citroën-embléma)! A képet citroen-1.jpg néven mentse a citroen mappájába, és illessze be a weboldalba!

  12. Az első sorbeli emblémákat igazítsa vízszintesen a cella közepére!

  13. Az első sorbeli Citroën-emblémát alakítsa át a fájl nevének és formátumának megváltoztatása nélkül a minta és az alábbi feltétel alapján: a képen látható fehér színű háttér a weboldalon úgy jelenjen meg, hogy az megegyezzen a háttér szürkéjével! 

  14. Készítsen hivatkozást a Citroën-emblémára, amely mutasson a nepautok.html fájl Citroënt ábrázoló képére!

Minta