Kis HF 03 – Webfejlesztés (HTML / CSS)¶

Felkészülés és előkészületek¶

Nézd át a kapcsolódó labor és előadások anyagát.

Szoftverkörnyezet:

Webszervernek Apache-ot használunk, mely része az XAMPP programcsomagnak. Mivel a házi feladat során statikus weboldalt készítünk, használata opcionális, de ajánlott.
Erősen ajánlott a Visual Studio Code használata a HTML és CSS fájlok szerkesztésére, de technikailag bármilyen szövegszerkesztő megfelel.

Ha minden feladatot megcsinálsz, a végeredmény az alábbihoz hasonló weboldal kell legyen. A laborhoz hasonlóan kezdd az Apache webszerver elindításával, majd folytasd a kiinduló repository klónozásával és az oldal böngészőben megnyitásával.

Tipp

A W3C oldalán HTML elemek és CSS szabályok is megtalálhatók. Ha nem tudod, hogy egy adott részt hogyan lehetne megvalósítani, itt is érdemes lehet keresgélni.

Mindig új branchen dolgozz!

A laborokon, házi feladatokon, és a ZH-n mindig új branch-en (pl. "megoldas") dolgozz! Ez azért van így, mert a végén a munka végén a pull request létrehozásakor a kiinduló állapothoz (master branch) képest az új branch változtatásai fognak látszani. Vagyis így fogja látni a laborvezetőd, hogy min dolgoztál, mely fájlokban mi változott, és így fogja tudni értékelni is a munkádat. Ha nem így csinálod, az formai hibának számít, a ZH-n például ezért pontlevonás jár.

1. A weboldal váza (HTML)¶

Készítsd el a weboldal vázát (HTML) az alábbiak alapján:

Legyen egy fejléc (header) címmel és alcímmel, valamint a fő tartalom (main) ahol legalább 2 állat adatai (article elemek) jelennek meg. Az egész oldalt érdemes keretbe foglalni, hogy később beállítható legyen a fix szélessége. Az oldal alján legyen egy lábléc (footer) is.
Minden állatnak legyen neve, leírása, képe (célszerű a kiinduló repository images mappájába tenni) és a tulajdonságok listája (ul) faj, életkor, ár.
Az egyik állatnak legyen egy egyszerű táblázata (table) ami az állaton végzett vizsgálatokat és procedúrákat tartalmazza.
Jobb oldalon (aside) legyen egy modul a keresésnek (form) és egy kapcsolat modul is, ami a nyitvatartási időt és az email címet tartalmazza.
Az oldal tartalmánál (cím, állatok, lábléc, kapcsolat modul stb.) használhatod a fenti ábra szövegeit vagy kitalálhatsz sajátokat is. A lényeg, hogy az oldal szerkezete a fentiek szerinti legyen.

Beadandó (1 pont)

A megoldást írd bele a kiinduló repository gyökerében található index.html fájlba, majd kommitolj.

2. A weboldal formázása (CSS)¶

Formázd a weboldalt (CSS) az alábbiak alapján:

Az oldal legyen középre igazított, maximális szélessége 980px, szélessége 100%, háttérszíne valamilyen kék.
A modulok és állatok adatai egységesen legyenek formázva. A moduloknak (pl. module class) legyen egy alsó margója (12px) és egy 1 px vastag szürke kerete. Az állatoknak (pl. pet class) legyen 1px szaggatott szürke kerete, fehér háttere és 10 px belső margója. Az állatok tulajdonságlistáját célszerű flexbox segítségével megvalósítani. A táblázatnak legyen 1 px vastag szegélye és a celláknak 6px belső margója.
A képeknek érdemes maximális szélességet megadni (pl. 440px).
Használj flexbox alapú elrendezést a fő tartalom és a jobb panel között (gap, fix széles jobb panel - 260px).
A kereső mező (input[type="text"]) töltse ki a rendelkezésre álló helyet (width) és legyen 6px belső margója.
A lábléc szövege legyen középre igazítva és legyen egy 1px széles szürke felső margója.
A többi CSS szabályt igyekezz úgy kialakítani, hogy az oldal minél jobban hasonlítson a fenti ábrára!

Beadandó (1 pont)

A megoldást írd bele a kiinduló repository gyökerében található style.css fájlba, majd kommitolj.

3. A weboldal kiegészítése (HTML és CSS)¶

Egészítsd ki a weboldalt (HTML és CSS) az alábbiak alapján:

Legyen egy szűrő modul (szintén pl. module class) a keresés és kapcsolat modulok között, ami a következőket tartalmazza:
- Faj szerinti szűrés: legalább 3 checkbox — pl. kutya, macska, kisállat.
- Életkor szerinti szűrés: két mező (minimum és maximum).
- Ár szerinti szűrés: két mező (minimum és maximum).
- Egy „Alkalmaz” és egy „Törlés” gomb.
- A 3 almodulhoz (faj, életkor, ár) érdemes a fieldset és legend tageket is használni.
- A szűrésnek természetesen nem kell működnie, ehhez JavaScriptet kellene használni.
Formázd az új modult, hogy esztétikusan, kb. a fenti ábra szerint nézzen ki. Néhány tipp:
- A szűrés almoduljainak érdemes külön class-t csinálni (pl. filter-panel) és egységesen formázni: háttere fehér, belső margó 0.9em, 1px vastag szürke keret.
- Ügyelj a betűméretekre, valamint a külső és belső margókra, hogy az ábrához hasonló elrendezést kapj.
- A két gomb elrendezéséhez flexbox használható.

Beadandó (1 pont)

A megoldást írd bele a kiinduló repository gyökerében található index.html és style.css fájlokba, majd kommitolj.

Beadás¶

Töltsd ki a kiinduló repositoryban található neptun.txt fájlt a Neptun kódoddal! Ezután a tanultaknak megfelelően készíts egy pull requestet és rendeld hozzá a laborvezetődet, mint reviewer!

Pull request elfogadása

Fontos, hogy semmiképpen ne kattints a "Merge pull request" gombra a GitHub felületén! Ez a laborvezetőd dolga, az értékelés után a változtatások bekerülnek majd a master branchre. Ha mergeled a módosításokat a laborvezetőd értékelése előtt, nem fogja látni, hogy mi változott, tehát a pull request értelmét veszti!

2025-10-16 Szerzők