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

Bíró László

Bíró László újságíró, a golyóstoll magyar származású feltalálójának bemutatására készítsen weblapot a következő leírás és minta szerint!

Az elkészítendő állományok a biro.html, a szerkezet.html és a golyo.html. Mind a három oldal azonos szerkezetű és színvilágú legyen a leírás és a minta szerint! Az oldalak szövegét a biroforras.txt nevű, UTF-8 kódolású állományban találja. 

A feladat megoldásához szükséges képek: toll.png, foto.jpg, szerk.png és nagyitas.jpg. A képek használata során ügyeljen arra, hogy azok a vizsgakönyvtár áthelyezése után is helyesen jelenjenek meg!

Források

Feladatok

Közös jellemzők

1. A három oldal szerkezete legyen azonos! Az oldal jellemzőinél állítsa be, hogy a háttérszín kék árnyalat (#6EB5B8 kódú szín), és a szöveg sötétszürke (#3A414C kódú szín) legyen! A linkek színe minden állapotban világosszürke (#756F72 kódú szín) legyen!

2. A böngésző keretén megjelenő lapcím „Bíró László” legyen!

3. Az oldalak tartalma egy táblázatban helyezkedjen el, amelynek tulajdonságai az alábbiak legyenek:
  • A sorok eltérő cellaszámát 4 sorból és 3 oszlopból alakítsa ki!
  • A táblázat szélessége 800 képpont legyen, és vízszintesen középre igazított!
  • A táblázat háttérszíne legyen zöld (#A7FFC3 kódú szín)!
  • A táblázat legyen szegély nélküli, a cellák távolsága és margója pedig 5 képpont!
  • Az első és a harmadik oszlop felső három-három cellája legyen összevonva!
  • A negyedik sor mindhárom cellája legyen összevonva!
  • Az első és a harmadik oszlop szélessége 50 képpont legyen!

4. A táblázat első sorának első és harmadik cellájába a toll.png képet szúrja be!

5. A menüt a második oszlop első három cellája tartalmazza, amelyben a másik két oldalra mutató linkek és az aktuális oldalhoz tartozó kép legyen! Gépelje be a mintának megfelelő szövegeket, készítse el a linkeket! Formázza a linkeket egyes szintű címsor stílussal, és
igazítsa a cellákban vízszintesen középre! Állítsa a linket tartalmazó két cella magasságát 125 képpontra minden oldalon!

biro.html

6. Először a biro.html oldalt készítse el! A táblázat első sorának középső cellájába szúrja be a foto.jpg képet 1 képpontos szegéllyel!

7. Az oldal szövegét a biroforras.txt állományból illessze be a táblázat negyedik sorába! A bekezdéseket hozza létre a mintának megfelelően!

8. A „A Golyóstoll – Bíró László újságíró, feltaláló” alcím legyen kettes szintű címsor stílusú!

szerkezet.html

9. A következő weblapon szereplő szerkezeti rajz még hiányosan található a szerk.png állományban. Ebből készítse el a magyarazat.png képet a minta szerint! A hiányzó feliratokat és a megfelelő helyre mutató vonalakat pótolja! A feliratok a rajz bal oldalán rendezetten helyezkedjenek el, és a vonalakkal együtt kék színűek legyenek!

10. Készítse el a szerkezet.html állományt! A táblázat második sorának középső cellájába szúrja be a magyarazat.png képet 1 képpontos szegéllyel! A menü hivatkozásait az első oldal elvének megfelelően változtassa meg! 

11. Az oldal szövegét a biroforras.txt állományból illessze be a táblázat negyedik sorába! A bekezdéseket és a felsorolásokat hozza létre a mintának megfelelően!

golyo.html

12. Készítse el a golyo.html állományt! A táblázat harmadik sorának középső cellájába szúrja be a nagyitas.jpg képet, 1 képpontos szegéllyel! A menü hivatkozásait az első oldal elvének megfelelően változtassa meg!

13. Az oldal szövegét a biroforras.txt állományból illessze be! A bekezdéseket hozza létre a mintának megfelelően!

Minta