KoRLÁTozoTT TERJESZTÉSÚ ! 1. sz.

példány
T s4 48t 06D/B

2.feladat Osszesen: 60 pont

Weblapkészítés

A távbeszélől

A következő feladatban egy egyszerű weblapot fog készíteni, ami a telefonok

(távbeszélők) fogalmát és csoportosítását mutatja be. A feladat megoldása során a
következő állományokat kell felhasználnia: índex.htm1, st.yles.css' phone.Pn9,
phone-back. jpg, phone-cord.Pn9, f orras. t'xt. A formázási beá|lításokat a
styles. css stílusállományban végezze elo lehetőleg úgy' hogy az új szelektorok
létrehozása a stílusállomány végéntörténjen! Nagy felbontásúo színes nrintát a kész
weboldalról a minta. jpgráuományban találo melyet tilos a megoldásában felhasználni!

L Nyissa meg az index. htm1 állomanyt! Helyezzen el hivatkozást a styles . css

stíluslapra!

2. Allítsa be az oldal kódolását UTF-8-ra, a nyelvet magyarra!

3. A böngésző címsorában megjelenő cím ,'Távbeszé|ő'' legyen!

4. Az oldalteljes tartalmáttartalmazó dív-hez rendelje a tartaIom azonosítót (id)!

5. A tarta]om azonosítójú keretbenhozza létre a ht és h2 címsorszintii címeket és a

bekezdéseket a mintának megfelelően!

6. Helyezze el a képet (phone . png) a tartalom izonosítójú keret első eIemeként!

A kép elernazonosítója kep legyen! Ha a kép folé vissziik az egetet, vagy a kép
valamiért nem jeleruthető meg, akkor mindkét esetben ,,Távbeszélő'' felirat jelenjen
meg!

7. Az első bekezdésben a távbeszé|ő szőt forméuza félkövér stílusúra a mintának

me gfelelően HTML tag akalmazásával !

8. A második bekezdésben a kommunikáció szőt formétzza kék betűszínnel!

A megoldáshoz használjon <span> taget és megfelelő típusúszelektort!
A CSS beállítást a styles . css állományban helyezze el új sze1ektorban!

9. Alakítsa ki a többszíntű felsorolt (szánnozatlan) listát a mintának megfelelően!

10. Alakítsa ki ,,A távbeszéIő'' címÍea forrásra hivatkozó linket! Az URL-t a

forras. txt állományban taláI1a meg' oldja meg, hogy a htvatkozás új oldaion
nlljon meg!
A következőbeá}Lít,ősokat a st'y1es. css stíluslapon véEezze!

ll. Allítsa be az oldal hátterének a phone-back. jpg állomanyt' amely ismétlésnélktil

I

kertiljön az o|daÍ közepére fiiggőleges en és vízszintesen is!

l Forrás: https://hu.wikipedia'org/wiki/Telefonkészülék

KoR.LÁTozoTT TER.JESzrÉsÚ t

T 6/9
 KORLATOZOTT TERJESZTESU! 1.. sz. példány
T 54 481 06DtB

l2.Hozzon létre egy új azonosítószelekÍort kep azonosítóval az oldalon megjelenő kép

igazitasáútoz! Ebben a szelektorban a jobbra igazítas (lebegés) mellett állítsa be a kép
magasságát 250 képpontra!

13. A tartalom azonosítójú elem hátterében (bal oldalon) Iáthatő képet

(phone-cord. png) helyezze el és isrnételje a minta szerint! Az elem háttérszínét
allítsa be az rqba ( ) fiiggvénnyel fehérre, átlátszőságát 0,8-es értélcűre!

14. Az első és mrísodik címsorszintű címek bal oldali margóját állítsa 100 képpont
értéktíre,a betű stílusát kiskapitalisra és dőltre!

15. Új szelektor létrehozasával oldja meg, hogy ha a hivatkozás ftjlé vissziik az

egérkurzort, akkor piros (red) színiíreváltson!
Minta:
(Készült fekete-fehér nyomtatiísban)
Nary felbontású, szírres mÍntát a kész weboldalról a minta.jpg állományhan talál,
melyet tilos a nnegoldásában felhasználni!

xopl-ÁlozoT.T TER.JEszrÉsul
7t9