Webszerkesztés
Visual Studio Code
Indíts el a Visual Studio Code webszerkesztő programot.2. Nyisd meg az index.txt fájlt.
Egészítsd ki a fájlt a hiányzó head nyitó és záró jelölőivel.
4. Állíts be hiperhivatkozást a „pizzafélék” szóra, amely mutasson a Pizzák című oldalra.
Szúrj be sortörést „A pizzát Vergilius...” mondat elé.
6. Alakítsd félkövérré a „napjaink egyik legkedveltebb” szövegrészt.
7. Szúrd be a pizza_02.jpg képet a kep_jobb osztályú elemen belülre.
Módosítsd a CSS szabályokat az alábbiak szerint:
17. feladatsor
Indíts el a Visual Studio Code webszerkesztő programot.
2. Nyisd meg az index.txt fájlt.
Mentsd el a fájlt weboldalként index.html néven.
(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ó head nyitó és záró jelölőivel.
Rendelj a fájlhoz a styles.css stíluslapfájlt.
(Az animáció indításához/leállításához kattints a képen!)
3. Módosítsd az „Üdvözöljük a...” szöveggel kezdődő sort 1. szintű címsorrá, valamint az „Állásajánlat” sort 2. szintű címsorrá.
(Az animáció indításához/leállításához kattints a képen!)
4. Állíts be hiperhivatkozást a „pizzafélék” szóra, amely mutasson a Pizzák című oldalra.
Állíts be hiperhivatkozást a „leggyorsabb futárokkal” szövegrészre is, ez mutasson a megrendeles.html oldalra.
(Az animáció indításához/leállításához kattints a képen!)
Mentsd el a fájlt és zárd be.
Mentés: C+s
Fájl bezárása: C+É
Fájl bezárása: C+É
5. Nyisd meg a tortenet.html fájlt.
Fájl megnyitása: a Fájlkezelőben dupla klikk a fájl nevén
Szúrj be sortörést „A pizzát Vergilius...” mondat elé.
„A modern pizza feltalálását...” kezdetű mondattól a szöveg kerüljön új bekezdésbe.
(Az animáció indításához/leállításához kattints a képen!)
6. Alakítsd félkövérré a „napjaink egyik legkedveltebb” szövegrészt.
„Raffaele Espositónak” szövegrészt pedig tedd dőltté.
(Az animáció indításához/leállításához kattints a képen!)
7. Szúrd be a pizza_02.jpg képet a kep_jobb osztályú elemen belülre.
Adj a képnek alternatív szöveget „pizza” néven.
(Az animáció indításához/leállításához kattints a képen!)
Mentsd el és zárd be a tortenet.html fájlt.
Mentés: C+s
Fájl bezárása: C+É
Fájl bezárása: C+É
8. Nyisd meg a pizzak.html fájlt.
Fájl megnyitása: a Fájlkezelőben dupla klikk a fájl nevén
Szúrj be a táblázat elejére táblázat feliratot (caption) „Pizzáink ezen a héten” szöveggel.
(Az animáció indításához/leállításához kattints a képen!)
9. Rendezd át a táblázat sorait úgy, hogy a pizzák elnevezéseik szerint ABC sorrendben legyenek egymás alatt.
(Az animáció indításához/leállításához kattints a képen!)
Mentsd el és zárd be a pizzak.html fájlt.
Mentés: C+s
Fájl bezárása: C+É
Fájl bezárása: C+É
10. Nyisd meg a megrendeles.html fájlt.
Fájl megnyitása: a Fájlkezelőben dupla klikk a fájl nevén
A méretre vonatkozó rádiógombok feliratait alakítsd címke (label) típusúvá.
(Az animáció indításához/leállításához kattints a képen!)
11. A telefonszámhoz tartozó beviteli mező paramétereit módosítsd úgy, hogy a neve tel legyen, a mezőben megadható maximális karakterszám pedig 15.
(Az animáció indításához/leállításához kattints a képen!)
Mentsd el és zárd be a megrendeles.html fájlt.
Mentés: C+s
Fájl bezárása: C+É
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 content azonosítójú elem h1 gyermekelemeire a betű mérete legyen az alap betűméret 1,5‑szerese és középre rendezett.
(Az animáció indításához/leállításához kattints a képen!)
13. A table elemek felső és alsó margóját állítsd 0 méretűre, a bal- és jobboldali margót pedig állítsd be úgy, hogy az elem középre rendeződjön.
(Az animáció indításához/leállításához kattints a képen!)
14. A td elemeknek adj keretet, amely 1 pixel vastag, pontozott mintázatú és #c00000 színű.
(Az animáció indításához/leállításához kattints a képen!)
15. Rendelj a fieldset elemekhez egységesen 10 pixel bélés (padding) értéket, valamint az elem szélességét 500 pixelben határozd meg.
(Az animáció indításához/leállításához kattints a képen!)
16. Az egysoros szöveges beviteli mező szélességét méretezd 300 pixel nagyságúra.
(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+É
Fájl bezárása: C+É
Webszerkesztő bezárása: A+É
Az elkészült weboldal:
