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:

  1. Minden alkalommal, amikor nekiülsz a saját állományod fejlesztéséhez, a legelső teendőd a BÖNGÉSZÉSI ELŐZMÉNYEK TÖRLÉSE legyen!

  2. A fejlesztés "négylépéses"(ajánlott!) menete:
    • Egy picit változtatsz az oldalon a fejlesztői alkalmazásban (SeaMonkey - Composer),
    • elmented a változást,
    • a változtatást feltöltöd a külső tárhelyre,
    • leellenőrzöd, hogy a változás működik-e, tehát azt látod, amit szerettél volna elérni a változtatással!

  1. Önálló gyakorló feladat SeaMonkey html szerkesztőjében
  2. 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:
    1. Olvasd el a szöveget, majd gépeld be a html szerkesztőbe
    2. A böngészőfülön megjelenő szöveg: "Gyakorló feladat: karakter- és bekezdésformázás" legyen
    3. Próbáld meg minél élethűbben alkalmazni a beállításokat.
    4. 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!
    5. 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!
    Minta




  3. +++ Karakter- és bekezdésformázás. Kép beszúrása, ugrópont kialakítása - felelet +++
  4. 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.
    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:
    Amennyiben jeles osztályzatot szeretnél, akkor töltsd fel az órai munkát tartalmazó webtárhelyedre, majd alakítsd úgy, hogy a "Főmenü-4" menüpontra kattintva az oldal a képernyő részen jelenjen meg. (A mintát láthatod a tanári bemutató oldalon.).
    Kattints ide.
    A "Főmenü-4" menüpontra kattintva:

    A tanári minta atw.hu-s oldal eléréséhez kattints ide

    NévURL címTémazáró házi feladat
    Tanári oldalhttp://micimacko9a.atw.hu
    Benkő Lorettahttp://benkolora9a.atw.hu/http://benkolora9a-tz.atw.hu/
    Hajdú Tifanihttp://hajdutifaniiii.atw.huhttp://htifani.atw.hu
    http://htifanitz.atw.hu
    Horváth Péterhttp://betonjeno.atw.hu/http://betonkockatz.atw.hu/
    Kment Villőhttp://vkment9a.atw.huhttp://kvillo.atw.hu
    Lakner Karolina Boglárkahttp://lknrboglarka.atw.huhttp://laknerbogi-tz.atw.hu
    Lőrinczi Dominikahttp://lorinczidomi9a.atw.huhttp://ldominika-tz.atw.hu
    Pánger Dzseniferhttp://dzseniferp.atw.hu
    Péter Zoltánhttp://peterzoltan9ahf.atw.huhttp://peterzoltan9atz.atw.hu/
    Pozsgai Eszterhttp://espozsgai9a.atw.huhttp://9apozsgai.atw.hu
    Tomisa Noel Bertalanhttp://sanyiiikanoel.atw.hu/http://tnoeltz.atw.hu
    Tóth Mónikahttp://monika9a.atw.huhttp://bobmester-tz.atw.hu
    Vári Virághttp://virag9a.atw.huhttp://marslako-tz.atw.hu
    Határidő03.06. 240005.30. 2400


  5. feladat - főoldal létrehozása (index.html)
  6. 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!
    alaptáblázat cellák egyesítése menüszerkezet
    Minta:


  7. feladat - Általános szövegszerkesztési funkciók, táblázat létrehozása, kép beillesztése, stb... ("altalanos-beallitasok.html")
  8. 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.

  9. feladat - impresszum oldal létrehozása (impresszum.html)
  10. 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!
    Feladatod a következő:

  11. feladat - Űrlap [form] készítése - (urlap.html)
  12. 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.
    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:

  13. feladat - képgaléria létrehozása ("kepgaleria.html" oldal)
  14. Ebben a feladatrészben egy képgaléria kialakítása lesz a cél.
    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!

    • 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.


  15. feladat. - Témazáró beadandó házi feladat: - saját szálláshely weboldalának elkészítése
  16. 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... 🙂 🙂 🙂 )
    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:
    • 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
      1. külön az éttermet mutatja be,
      2. és rendelkezzen egy olyan aloldallal, amely külön a szálláshely egy szobáját mutatja be.
      Ezek az elemek tartalmazzanak képe(ket), illetve valamilyen felsorolást

    • 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!




Oktatas100.hu - videó állományok
Indításhoz kattints a címre!
 CímRö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éseHTML 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ásWeboldal 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

  1. Az órán tanultak alapján, rétegek felhasználásával és a leírás alapján készítsd el az alábbi ábrát
    1. A canvas mérete 800x800-as legyen
    2. A ferde vonalat egy téglalap segítségével alakítsd ki, melynek mérete: 50x500 pixel
    3. Az ecset vastagsága legyen 10 pt, típusa: az alapértelmezett "pont"
    4. A kör bennfoglaló négyzetének oldalhosszúsága 150 pt
    5. Kétféle formátumban mentsd:
      • A GIMP natív formátumában, tehát .xcf állományként
      • Képként, tehát például .png állományként
    6. A megoldást letöltheted: innen

  2. Rétegek felhasználásával készítsd el az alábbi ábrát
    1. A canvas mérete 800x800-as
    2. Kétféle formátumban mentsd:
      • A GIMP natív formátumában, tehát .xcf állományként
      • Képként, tehát például .png állományként

  3. Az órán tanultak alapján rétegek használatával készítsd el az alábbi vízi közlekedésben használt kresz táblát (Találkozás tilos!) Alkalmazd a rétegműveleteket is! (réteg kétszerezése, forgatás, másolás, stb...)

Színátmenet, forgatás, szöveg hozzáadása
  1. A leírás alapján készítsd el a feladatot! Ne feledkezz meg a rétegek automatikus vágásáról!
    • Kérj egy 1000x800 pixel méretű vásznat
    • A háttér színe legyen rgb(50,78,95)-ből fehérbe tartó színátmenet
    • Add hozzá új rétegként a "Négyzetbe írt kör" címet az alábbi tulajdonságokkal:
      • A karatker típusa: Blackadder ITC
      • Mérete: 80pt
      • Színe: sötétkék
    • Helyezz el a szöveg alatt új rétegként egy sötétkék négyzetet, melynek oldalhosszúsága 400 pt, vonal vastagsága: 5 pt. Helyezd el a vászon közepén!
    • Szintén új rétegként készíts egy pontosan akkora piros színű kört, mint amekkora a négyzet. Helyezd el a körben úgy, hogy a kör érintse a négyzet mind a négy oldalát!
    • Rajzold meg új rétegként a kör sugarát, és a sugár fölé írd - új szöveges rétegként - a geometriai jelölést is! A karakter mérete legyen 40 pt, típusa a főcímmel megegyező!
    • Forgasd el a sugár-felirat réteget pontosan -45 fokkal!
    • Mentsd el .xcf és .png formátumban is!
    • Megoldott állományt letöltheted: itt

  2. Keress rá az interneten a Thalész-tétel geometriai fogalomra. Készítsd el a tétel ábráját az alábbi tulajdonságok betartásával (Ne feledkezz meg a rétegek használatáról!):
    • Tetszőleges méretű hátteret használj hozzá. A háttér legyen színátmenetes!
    • Készíts hozzá főcímet!
    • Egy másik szöveges rétegen szerepeljen a tétel - saját szavaidon alapuló - magyarázata.
    • Készítsd el a hozzátartozó rajzot is!
    • .png és .xcf formátumban is mentsd el!
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!
  1. 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
  2. egy 1500x1500-as fehér színű hátteret. (háttér réteg)
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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.
  8. 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)!
  9. 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

  1. 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.
    A feladat megoldásánál használjunk két új eszközt: az "intelligens ollót" és a "szín szerinti kijelölés" eszközét!

    A feladat elkészítéséhez szükséges állományok:
    • japán nő képe:
    • kanjii:
    • Elkészült montázs:

  2. gyakorló feladat. A feladatsor, továbbá az új eszközök segítségével készítsük el a montázst:
  3. Új eszközök:
    1. Az eszköztáron a szabadkézi kijelölés parancs

    2. A szabadkézi kijelölés használatának lehetőségei:
      1. a jelenlegi kijelölés cseréje
      2. hozzáadás a kijelöléshez
      3. kivonás a kijelölésből
      4. metszett a jelenlegi kijelöléssel
    3. Az eszköztáron a tükrözés parancs
    A feladat elkészítéséhez szükséges állományok:
  4. Szöveg kivágása képből
  5. Cél:
    Háttérképből a szöveg kivágása + szűrő:
    Utasítások:
    • 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
    Szükséges állomány:
    • parázs:

  6. Önálló gyakorló óra: az eddig tanultak gyakorlása
  7. A feladatsor és a képek segítségével készítsd el az állományt! A minta a "Feladatsor"-ban található.

  8. Önálló gyakorló feladat
  9. 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


    Másoló eszközö használata
  10. Bemutató feladat

  11. Szükséges állományok:

    Másoló eszközö használata - gyakorló feladatok
  12. Helyezd el a szellemet a megfelelő helyre!

  13. Szükséges állományok:
  14. Töltsd le a képet és tüntesd el a szemek alatti ráncot!


  15. Legyél virtuális kozmetikus! Javítsd ki az arbőr szépséghibáit!


  16. Témazáró dolgozat
  17. Ebben a feladatban a Mercédesz típusú. gépkocsik számára készítünk egy egyszerű plakátot!
    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

Office365 belépési e-mail fiókok

Általános tudnivalók, elérhetőség. Hivatalos email.

  1. Korrepetálás
  2. Lehetőség van egyéni korrepetálásra is. Ekkor kizárólag az adott diák konkrét problémáival foglalkozom, ezért ezt a lehetőséget minden esetben személyes időpontegyeztetés útján lehet igénybe venni.
    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.

  3. Online oktatás
  4. Online oktatáskor a MS Teams alkalmazást használjuk. Az online óra mindig az eredeti órarend szerinti időpontban kerül megtartásra. A szükséges felszerelés:
    • Laptop vagy asztali számítógép (A telefon nem elegendő!)
    • Mikrofon, fejhallgató/hangszóró
    • Office365 belépési kód. Ez az osztályfőnöktől vagy az iskolai rendszergazdától igényelhető.

  5. Évközi dolgozatok értékelése:
  6. 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!

  7. Tanév végi javítóvizsga értékelése:
  8. A vizsga időtartama 45 perc.
    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)

  9. Elérhetőség hivatalos emailben
  10. Kizárólag az esef@kvszk.hu e-mail címen vagyok a tanulók számára elérhető. Egyéb felületen kérlek, ne próbálkozz, mert nem fogok válaszolni.
    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:

    • e-mail cím
    • Tárgy kitöltve
    • Megszólítás, pld.: Tisztelt Tanár Úr!
    • Rövid, lényegre törő szöveg
    • Elköszönés, pld.: További szép napot kívánva, tisztlelettel:...
    • Aláírás (név, osztály)
    • Esetleges csatolmányok
    • Hivatalos emailben NEM használhatsz hangulatjeleket (emojikat)!
    • HIBAMENTES HELYESÍRÁS!

Csengetési rend
1. óra:08000845
2. óra:08500935
3. óra:09451030
4. óra:10401125
5. óra:11351220
6. óra:12451330
7. óra:13351420
8. óra:14251510

PHP Code Snippets Powered By : XYZScripts.com