A következő feladatban egy weboldalt kell készítenie a papír brikettálásának bemutatására a feladatleírás és a minta szerint. A feladat megoldása során a következő állományokat kell felhasználnia: brikettek.png, presek.png, hatterkep.png, forras.txt, papirbrikett.css. Ahol a feladat másként nem kéri, a formázási beállításokat a papirbrikett.css stílusállományban végezze el!
1. Hozzon létre HTML oldalt papirbrikett.html néven! Állítsa be az oldal nyelvét magyarra és a kódolását UTF-8-ra!
2. A böngésző címsorában megjelenő cím „Papírbrikett” legyen!
3. A weboldal fejrészében helyezzen el hivatkozást a papirbrikett.css stíluslapra!
4. Állítsa be a stíluslapon, hogy a weboldal háttere a hatterkep.png kép legyen!
5. Az oldal törzsébe másolja be az UTF-8 kódolású forras.txt állomány tartalmát!
6. Alakítsa ki a címet, alcímeket és formázza meg a stíluslapon definiált h1, h2 stílusokkal! A weboldal címe „Papírbrikett” 1-es szintű címsor, az alcímek „Milyen papírból…”, „A brikettálás előkészítése”, „A gyártás lépései” pedig 2-es szintű címsorok legyenek!
7. Módosítsa a stílusbeállításokat a stíluslapon úgy, hogy az 1-es címsorban lévő szöveg legyen középre igazított!
8. Alakítsa ki a szöveg bekezdéseit a minta szerint!
9. A második bekezdést „Egy újabb ötletes…” formázza meg a stíluslap bevezeto osztálykijelölőjének, az utolsó bekezdést „Minél tovább…” pedig a stíluslap kiemelt osztálykijelölőjének felhasználásával!
10. Módosítsa a stílusbeállításokat a stíluslapon úgy, hogy a kiemelt osztálykijelölővel formázott szövegek a meglévő beállításokon túl félkövér betűstílusúak is legyenek!
11. Az „Egy újabb ötletes…” bekezdés elejére illessze be a brikettek.png képet, és formázza a stíluslap brikettek azonosító kijelölőjének a felhasználásával! Ha a kép fölé visszük az egeret, vagy a kép valamiért nem jeleníthető meg, akkor mindkét esetben a „Brikettált papír” szöveg jelenjen meg! A kép után helyezzen el egy sortörést a minta szerinti tagolás kialakításához!
12. Módosítsa a stílusbeállításokat a stíluslapon úgy, hogy a bevezeto osztálykijelölővel formázott elemeknek 1 pixel vastag, folytonos vonalú, szürkéskék színű (#3F4F5F színkódú) alsó és felső szegélye legyen a minta szerint!
13. A második alcím alatti szöveget alakítsa át számozatlan felsorolásúvá a minta szerint!
14. A második alcím és a számozatlan felsorolás közé illesszen be egy keretet, és formázza a stíluslap presek azonosító kijelölőjének felhasználásával!
15. A keretbe helyezze el a presek.png képet! Ha a kép fölé visszük az egeret, vagy a kép valamiért nem jeleníthető meg, akkor mindkét esetben a „Préstípusok” szöveg jelenjen meg! A kép alá gépelje be az „Egy „téglás” asztali prés és két „téglás” fali prés” szöveget! A kép után helyezzen el egy sortörést a minta szerinti tagolás kialakításához!
16. A harmadik alcím alatti szövegrészt alakítsa át számozott felsorolásúvá a minta szerint! A felsorolás után helyezzen el egy vízszintes vonalat!
17. Módosítsa a stílusbeállításokat a stíluslapon úgy, hogy a teljes oldalon a sormagasság értéke 125%, a szövegszín pedig szürkéskék színű (#1F3F5F színkódú) legyen!
