Webszerkesztés
Visual Studio Code

38. feladatsor


Indíts el a Visual Studio Code webszerkesztő programot.

2. Nyisd meg az index.html fájlt.

Fájl megnyitása: a Fájlkezelőben dupla klikk a fájl nevén

„A legtöbb viccet beküldők...” kezdetű bekezdés elé szúrj be sortörést, és vond össze a fölötte lévő bekezdéssel.
Alkalmazz félkövér és dőlt betűstílust a Balu szóra.

animáció
(Az animáció indításához/leállításához kattints a képen!)

3. Állíts be hiperhivatkozást „az eddig beküldött viccek” szövegrészre, amely mutasson a Viccek című oldalra.
Állíts be hiperhivatkozást „a küldj jobbakat” szövegrészre is, ez mutasson a bekuldes.html oldalra.

animáció
(Az animáció indításához/leállításához kattints a képen!)

Mentsd el és zárd be az index.html fájlt.

Mentés: C+s
Fájl bezárása: C+É

4. Nyisd meg a top.txt fájlt.

animáció
(Az animáció indításához/leállításához kattints a képen!)
Fájl megnyitása: a Fájlkezelőben dupla klikk a fájl nevén

Egészítsd ki a fájlt a hiányzó body nyitó és záró jelölőivel. Adj oldalcímet „Balu vicces oldala” szöveggel.

animáció
(Az animáció indításához/leállításához kattints a képen!)

5. Módosítsd a fun_1.jpg képet magába foglaló bekezdés osztályát kep-re. A képnek adj alternatív szöveget „süti” értékkel.

animáció
(Az animáció indításához/leállításához kattints a képen!)

Mentsd el a fájlt weboldalként top.html néven és zárd be.

Mentés: C+s
Fájl bezárása: C+É

6. Nyisd meg a viccek.html fájlt.

Fájl megnyitása: a Fájlkezelőben dupla klikk a fájl nevén

Az oldalon található táblázatnak adj táblázatcímet (caption) „E heti vicceink” szöveggel.

animáció
(Az animáció indításához/leállításához kattints a képen!)

7. A táblázat minden viccet tartalmazó celláját vond össze a mellette lévő üres cellával.

animáció
(Az animáció indításához/leállításához kattints a képen!)

Mentsd el és zárd be a viccek.html fájlt.

Mentés: C+s
Fájl bezárása: C+É

8. Nyisd meg a bekuldes.html fájlt.

Fájl megnyitása: a Fájlkezelőben dupla klikk a fájl nevén

Az űrlap Név feliratához tartozó beviteli mező név értéke legyen „nev”, a maximálisan beírható karakterek száma pedig 40.

animáció
(Az animáció indításához/leállításához kattints a képen!)

9. A többsoros beviteli mező paramétereit módosítsd úgy, hogy a sorok száma 8, a soron belüli karakterek száma 55 legyen, alapértelmezetten a mezőben „A kedvenc viccem:” szöveg látszódjon.

animáció
(Az animáció indításához/leállításához kattints a képen!)

10. Az jelölőnégyzet alapértelmezetten legyen bejelölt állapotban, a mellette lévő szöveget alakítsd a jelölőnégyzet címkéjévé (label).

animáció
(Az animáció indításához/leállításához kattints a képen!)

11. A nyomógomb mellé vegyél fel egy reset típusú nyomógombot is, felirata legyen „törlés”.

animáció
(Az animáció indításához/leállításához kattints a képen!)

Mentsd el és zárd be a bekuldes.html fájlt.

Mentés: C+s
Fájl bezárása: C+É

12. Nyisd meg a styles.css fájlt.

Fájl megnyitása: a Fájlkezelőben dupla klikk a fájl nevén

Módosítsd a CSS szabályokat az alábbiak szerint:
A valasztek azonosítójú elemen belüli hivatkozás jelölő elemek hover állapota esetén a betűszín legyen #f99.

animáció
(Az animáció indításához/leállításához kattints a képen!)

13. A viccek osztályú elemeken belüli th elemekre határozz meg dőlt betűtípust és balra történő szövegelrendezést.

animáció
(Az animáció indításához/leállításához kattints a képen!)

14. A top osztályú table elemek számára állíts be 1 pixel vastag, pontozott mintázatú és fekete (black) színű keretet.

animáció
(Az animáció indításához/leállításához kattints a képen!)

15. A fieldset elemek szélességére adj 650 pixel értéket.

animáció
(Az animáció indításához/leállításához kattints a képen!)

16. A legend elemekhez rendelj félkövér betűstílust.

animáció
(Az animáció indításához/leállításához kattints a képen!)

Ments és zárj be minden fájlt és zárj be minden alkalmazást.

Mentés: C+s
Fájl bezárása: C+É
Webszerkesztő bezárása: A+É

Az elkészült weboldal: