Weboldal készítése Composer (SeaMonkey) alkalmazás segítségével
Két általános tanács a weboldal fejlesztésének menetéhez:
- Önálló gyakorló feladat SeaMonkey html szerkesztőjében Nyiss egy új állományt a SeaMonkey html szerkesztő részében, majd a feladatok és a csatolt minta szerint hozd létre az alábbi weboldalt:
- Olvasd el a szöveget, majd gépeld be a html szerkesztőbe
- A böngészőfülön megjelenő szöveg: "Gyakorló feladat: karakter- és bekezdésformázás" legyen
- Próbáld meg minél élethűbben alkalmazni a beállításokat.
- Keresd meg a második felsorolásban ajánlott felhőszolgáltatások központi oldalait, majd alakítsd ugróponttá mindegyiket úgy, hogy azok új böngésző ablakban nyíljanak meg!
- Keress a felhőszolgáltatással kapcsolatos két képet az interneten. Illeszd be az egyiket a szöveg elé, míg a másodikat a szöveg után. Mindkét kép legyen középre igazítva!
- +++ Karakter- és bekezdésformázás. Kép beszúrása, ugrópont kialakítása - felelet +++ Az alábbi feladatban a Rubicon történelmi magazin 2022/2 számában megjelent cikk részletét olvashatod-láthatod. Az esszé részlete a fürdőruha fejlődéséről szól.
- feladat - főoldal létrehozása (index.html) Hozd létre a minta a feladatsor és a képek segítségével a kezdő index.html oldaladat és a már tanult módon töltsd fel a lefoglalt ingyen tárhelyedre!
- feladat - Általános szövegszerkesztési funkciók, táblázat létrehozása, kép beillesztése, stb... ("altalanos-beallitasok.html") Hozzuk létre az "Általános beállítások" menüpontot. Az alábbi állományokra lesz szükséged: A fenti állományok segítségével hozd létre az oldalt úgy, hogy ha a menüpontra kattint a felhasználó, akkor a minta oldali oldal jelenjen meg.
- feladat - impresszum oldal létrehozása (impresszum.html) Ebben a részben folytatjuk az index oldalunk fejlesztését. Egy kereskedelmi website kötelező eleme az impresszum oldal. Erről bővebben az o100.hu oldal, webfejlesztés menüpontja alatt olvashatsz!
- Olvasd el az impresszum oldalról írtakat az o100.hu-n
- Keresd fel az atw.hu weboldalt, gyűjtsd ki az impresszum oldalhoz szükséges adatokat, majd
- készítsd el az index oldalad impresszum részét! (Az impresszum oldal megjelenése összhangban legyen az index oldaléval!)
- Az index oldalad alsó sorában található "Impresszum" szót alakítsd át ugróponttá, amelyre kattintva a főképernyőben legyen látható az elkészült oldalad!
- feladat - Űrlap [form] készítése - (urlap.html) Egy vendéglátással foglalkozó website lényeges eleme lehet egy "vendégelégedettségi kérdőív", amely negatív és pozitív visszajelzést adhat a szolgáltatás minőségéről. Ebben a részben tehát készíteni fogunk egy ilyen űrlapot (form-ot), amely különféle beviteli mezőket és gombot tartalmaz majd.
- feladat - képgaléria létrehozása ("kepgaleria.html" oldal) Ebben a feladatrészben egy képgaléria kialakítása lesz a cél.
- Mindenek előtt készítes az atw.hu tárhelyeden egy "galeria" nevű könyvtárat.
A célunk az lesz, hogy a letöltött és a későbbiek során átalakított képeket ebbe a könyvtárban tároljuk, így elérjük, hogy a tárhelyünkön lévő
állományok rendezettek(!) lesznek.
- Következő lépésként töltsd le az alábbi képeket!
- A képgaléria készítésekor jobban járunk, ha az általunk megjelenített képek szélessége és magassága ugyanakkora. Kicsi a valószínűsége annak,
hogy ilyen képeket töltünk le az internetről – természetesen más az, ha magunk készítjük, mert akkor ezt be tudjuk állítani! -, ezért nyisd meg a GIMP alkalmazásban az összes képet,
és mindegyik kép szélességét 550 pt-ra
- Alakítsuk ki az oldal szerkezetét! Az index.html oldalhoz hasonlóan készítünk egy táblázatot, amely 2 oszlopból és 5 sorból fog állni. A második oszlop celláít egyesítjük.
Az egyesített cellában alakítjuk ki a belső <iframe></iframe>-t, amit majd főképernyőként használunk.
A megjelenéséhez szükséges iframe name tulajdonsága legyen "galeria-kepernyo" - Annak érdekében, hogy a létrehozott belső keret szegélyvonala ne látszódjon, módosítsuk a belső keret tulajdonságát a következők szerint: <iframe style="border:0px">
- Végül, de nem utolsó sorban hívjuk be a bal oldali cellákba a képeket úgy, hogy a képmagasságot egyöntetűen 100pt-ra határozzuk meg, majd alakítsuk ki az ugrópontokat az iframbe alakítsuk ki az ugrópontokat.
- feladat. - Témazáró beadandó házi feladat: - saját szálláshely weboldalának elkészítése Feltételezzük a következőket: időben ugrunk néhány évet előre, szeretnéd elindítani a saját vállalkozásod, ami egy önálló, saját étteremmel rendelkező 25 fő befogadására alkalmas szálláshely. (Ezek - természetesen - a kötelező elemek. A többi részt a fantáziádra bízom! Ha jobb jegyet szeretnél, akkor... 🙂 🙂 🙂 )
- Foglalj az atw.hu-n egy másik domain nevet és tárolóhelyet. A domain névben legyen benne a "-tz" rövidítés!
Teremtsd meg az FTP kapcsolatot. A témazáród minden állományát erre a tárolóhelyre töltsd fel. Az URL-t a megadott határidőre hivatalos email formájában küldd el az esef@kvszk.hu címre. - Az oldal szerkezetét táblázat segítségével alakítsd ki. A táblázat méretét alakítsd az indulóképhez.
- Az index oldal felső részén használj saját magad által szerkesztett képet. Amíg nem készül el, használd az alapképet, amit innen tölthetsz le
- A honlapról letöltött kép főbb tulajdonságai: szélessége 947 pt, míg a magassága 252 pt
Ez tehát csak egy ideiglenesen felhasználható kép! A végleges állományt saját magadnak kell elkészítened a tanultak alapján, GIMP segítségével! - A menüszerkezet a bal vagy a jobb oldalon kerüljön kialakításra
- A menüpontokat úgy alakítsd, hogy a felhasználó minden oldalról vissza tudjon ugorni a főoldalra, ill. az aloldalakra.
- A főoldalon szöveggel és képpel ellátva mutasd be a szálláshelyedet
- A honlapnak legyen olyan része, amely
- külön az éttermet mutatja be,
- és rendelkezzen egy olyan aloldallal, amely külön a szálláshely egy szobáját mutatja be.
- Alakíts ki képgalériát!
- A website főoldala rendelkezzen "Kapcsolat"-i résszel, illetve egy "Szobafoglalás"-i menüponttal is. A foglalási űrlap kötelező elemei:
- vendég neve
- email címe
- telefonszáma
- érkezés- és távozás időpontja
- végül tartalmazzon egy olyan szöveges részt, ahol a vendég az egyéb észrevételeit megteheti.
- Mindenképpen helyezd el a kereskedelmi weboldalakhoz tartozó kötelező elemeket, aloldalakat!

A minta, a nyersszöveg, a kép és a feladatsor segítségével készítsd el az egyoldalas weblapot.
Az önálló weboldal:
![]() |
![]() |
Kattints ide.
A "Főmenü-4" menüpontra kattintva:

Név | URL cím | Témazáró házi feladat |
---|---|---|
Tanári oldal | http://micimacko9a.atw.hu | |
Benkő Loretta | http://benkolora9a.atw.hu/ | http://benkolora9a-tz.atw.hu/ |
Hajdú Tifani | http://hajdutifaniiii.atw.hu | http://htifani.atw.hu http://htifanitz.atw.hu |
Horváth Péter | http://betonjeno.atw.hu/ | http://betonkockatz.atw.hu/ |
Kment Villő | http://vkment9a.atw.hu | http://kvillo.atw.hu |
Lakner Karolina Boglárka | http://lknrboglarka.atw.hu | http://laknerbogi-tz.atw.hu |
Lőrinczi Dominika | http://lorinczidomi9a.atw.hu | http://ldominika-tz.atw.hu |
Pánger Dzsenifer | http://dzseniferp.atw.hu | |
Péter Zoltán | http://peterzoltan9ahf.atw.hu | http://peterzoltan9atz.atw.hu/ |
Pozsgai Eszter | http://espozsgai9a.atw.hu | http://9apozsgai.atw.hu |
Tomisa Noel Bertalan | http://sanyiiikanoel.atw.hu/ | http://tnoeltz.atw.hu |
Tóth Mónika | http://monika9a.atw.hu | http://bobmester-tz.atw.hu |
Vári Virág | http://virag9a.atw.hu | http://marslako-tz.atw.hu |
Határidő | 03.06. 2400 | 05.30. 2400 |
![]() |
![]() |
![]() |
alaptáblázat | cellák egyesítése | menüszerkezet |

Feladatod a következő:
Az űrlap elkészítése lesz a feladatunk. Az adatok kiértékelése és tárolása viszont már "vastagon" a számítógépes programozás témakörébe tartozik, ebből következően átlépünk rajta.
Az űrlap elkészítéséhez szükséges állományok:
Minden vendéglátással foglalkozó oldalnak szüksége lenne egy ilyen típusú aloldalra.
Többféleképpen lehet létrehozni ilyen galériát. Mi most egy egyszerű galériát fogunk a tanári mintaoldal alapján elkészíteni.
Lássuk tehát a medvét!
Kövesd a lépéseket!

A vállalkozásod az ország tetszőleges pontján nyithatod.
Ehhez elengedhetetlenül szükséged lesz egy weboldalra. Az órán tanultak és az alábbiak alapján hozd létre a website-ot:
Szempontok:
Oktatas100.hu - videó állományok
Indításhoz kattints a címre!
Cím | Rövid ismertető | |
![]() | Domain név- és tárhely foglalása. FTP kapcsolat létrehozása. | Az atw.hu szolgáltatónál lefoglalunk egy ingyenes domain nevet és a hozzátartozó tárolóhelyet. Ezután a Total Commander alkalmazás segítségével megteremtjük a fájl átviteli kapcsolatot - FTP kapcsolatot |
![]() | Visual Studio Code telepítése | HTML oldalak szerkesztésénél használjuk a Visual Studio Code nevű alkalmazást. Ennek telepítése, beállítása és néhány kiegészítő modul telepítése. |
![]() | HTML oldal alapvető szerkezeti egysége. Karakter- és bekezdésformázás | Weboldal alapvető szerkezeti elemei. Egy alap html oldal létrehozása. Néhány karakter- és bekezdésformázási címke használata. Tulajdonságok dekralása html kódban. |
Képszerkesztés
Egyszerű alakzatok készítése GIMP-vel
Színátmenet, forgatás, szöveg hozzáadása
Következő órán dolgozat!
GIMP első dolgozat:
Készíts egy sajatnev-gimp-elso-dolgozat könyvtárat a hálózati mehajtódra!
Minden állományt ebbe ments!
Az alábbi tulajdonságok figyelembevételével készítsd el a mintán látható ábrát! Mentsd el .xcf és .png formátumban is! Mindkét állományt dolgozat néven mentsd!
- A kép elkészítésénél 8 réteget használj, amelyek a következő neveket viseljék: háttér, ház, ablak, tető, törzs, lomb, talaj, felirat
- egy 1500x1500-as fehér színű hátteret. (háttér réteg)
- Erre rajzold meg a ház alapját (ház réteg), ami egy négyzet a következő tulajdonságokkal:
- 500 pt oldalhosszúságú
- barna színű
- 5 pt vastagságú vonal
- Helyezd el benne az ablakot (ablak réteg), ami szintén négyzet, tulajdonságai:
- 100 pt oldalhosszúságú
- barna színű
- 5 pt vastagságú vonal
- Két egyenes szakasz segítségével készítsd el a tetőt (tető réteg). Tulajdonságai:
- ceruza színe barna
- 5 pt vastagságú vonal
- Téglalap segítségével rajzold meg a fa törzség (törzs réteg). A ház és a törzs egyvonalban legyen. Tulajdonságok:
- 100 pt X 400 pt oldalhosszúság
- barna színű
- 5 pt vastagságú vonal
- A fa lombja egy kör (lomb réteg), amely természetesen a fa tetejéhez illeszkedik. A kör tulajdonságai:
- zöld színű ceruzával rajzold
- 5 pt vastag vonal
- a kört befoglaló négyzet oldalának hossza legyen 250 pt.
- A talaj (talaj réteg) egy egyenes szakasz (ne szabadkézzel rajzold, hanem a tanult technikával!):
- színe legyen fekete
- vastagsága 15 pt
- úgy igazítsd, hogy a ház alja és a fa törzsének alja látható legyen (minta)!
- Készítsd el a feliratot a minta alapján, külön rétegre (felirat réteg). A karakterekre vonatkozó tulajdonságok:
- A karakterek típusa: Pristina
- Mérete: 60 pt
- Színe: kék
- helyezd a minta szerinti pozícióba
Pótdolgozat (akik nem voltak jelen az első dolgozaton)
A feladatsor és a minta alapján készítsd el a vizi KRESZ-ben használt közlekedési táblát!
Kép- és fotószerkesztés
- Az alábbi fotómontázs két képből, háttérrajzból és feliratból tevődik össze. A tanultak alapján dolgozzuk ki rétegek felhasználásával az alábbiak szerint:
(Montázs: "...lényegében meglévő elemekből való építkezést jelent, és ilyen módon történő előállítását új dolgoknak." -> Wikipédia szabad enciklopédia) - Készítsük el a fehér háttér réteget
- Új rétegként készítsük el a háttérben lévő, Japán nemzeti lobogójából vett mintát, a felkelő napot
- Új rétegként másold át a japán hölgyet.
- Új rétegként másold át a kanjiikat.
- Egy másik rétegbe a japán feliratot (kanjiit)
- Végül, de nem utolsó sorban új rétegként hozzuk létre a feliratot is.
- gyakorló feladat. A feladatsor, továbbá az új eszközök segítségével készítsük el a montázst: Új eszközök:
- Az eszköztáron a szabadkézi kijelölés parancs
- a jelenlegi kijelölés cseréje
- hozzáadás a kijelöléshez
- kivonás a kijelölésből
- metszett a jelenlegi kijelöléssel
- Az eszköztáron a tükrözés parancs
- feladatsor
- delfinek:
- TV:
Elkészült montázs: - Szöveg kivágása képből
- szín szerinti kijelölés
- kép automatikus vágása a tartalomhoz
- réteg automatikus vágása
- szűrő használata: fény- és árnyék
- Önálló gyakorló óra: az eddig tanultak gyakorlása A feladatsor és a képek segítségével készítsd el az állományt! A minta a "Feladatsor"-ban található.
- Önálló gyakorló feladat Ebben a feladatban lefényképezzük a várost reprezentáló és a városházát díszítő zászlókat! A minta, a feladatsor és a képek segítségével oldd meg a feladatot! Minta
- Bemutató feladat
- Helyezd el a szellemet a megfelelő helyre!
- Töltsd le a képet és tüntesd el a szemek alatti ráncot!
- Legyél virtuális kozmetikus! Javítsd ki az arbőr szépséghibáit!
- Témazáró dolgozat Ebben a feladatban a Mercédesz típusú. gépkocsik számára készítünk egy egyszerű plakátot!

A feladat elkészítéséhez szükséges állományok:

A szabadkézi kijelölés használatának lehetőségei:



Cél:![]() |
Háttérképből a szöveg kivágása + szűrő:![]() |
Utasítások: |
![]() |
![]() |

Másoló eszközö használata

Szükséges állományok:
Másoló eszközö használata - gyakorló feladatok

Szükséges állományok:


A tanultak alapján, a feladatsor és a képállományok segítségével oldd meg a feladatot! Minta

Office365 alkalmazás – belépési e-mail címek

Általános tudnivalók, elérhetőség. Hivatalos email.
A korrepetálásra mindig konkrét kérdésekkel érkezz!
Megjegyzés: a korrepetálást általában hétfőn vagy szerdán délután szoktam tartani.
91% - 100%
5 (jeles)
80% - 90%
4 (jó)
65% - 79%
3 (közepes)
51% - 64%
2 (elégséges)
0% - 50%
1 (elégtelen)
Egyes esetekben a fentiektől lehet eltérés!
Az írásbeli értékelésének módja: aki 35% alatt, de legalább 18%-ot teljesít, szóbeli vizsgát tehet.
85% - 100%
5 (jeles)
70% - 84%
4 (jó)
50% - 69%
3 (közepes)
35% - 49%
2 (elégséges)
0% - 34%
1 (elégtelen)
Tanuló kizárólag hivatalos emailt írhat. A hivatalos e-mail általános szabályait, illetve részeit itt láthatod:
Hivatalos e-mail részei:
Csengetési rend
1. óra: | 0800 | 0845 |
2. óra: | 0850 | 0935 |
3. óra: | 0945 | 1030 |
4. óra: | 1040 | 1125 |
5. óra: | 1135 | 1220 |
6. óra: | 1245 | 1330 |
7. óra: | 1335 | 1420 |
8. óra: | 1425 | 1510 |