Pixel Specialista

Tudástár · 2. rész / 6 · kb. 8 perc

2. Készíts működő oldalt pontos prompttal

Ebben a leckében az előkészített tartalomból és egy egyszerű HTML-sablonból elkészíted a szakkör bemutatkozó oldalának első működő változatát. Megtanulod, hogyan kérj a ChatGPT-től magyar nyelvű, mobilbarát oldalt, amelyet egyetlen fájlként menthetsz és megnyithatsz.

A munkához készítsd elő a szakkör jóváhagyott adatait, egy egyszerű szövegszerkesztőt és egy böngészőt. A lecke végére helyben kipróbált oldalad és egy célzott módosításhoz használható promptod lesz.

Készítsd elő a tartalmat és az elvárásokat

A ChatGPT számára a pontos feladatleírás és az ellenőrzött alapanyag együtt ad használható kiindulópontot. Egy iskolai szakkör oldalához készíts rövid tartalmi listát:

  • A szakkör neve és célja: mivel foglalkoztok, mit próbálhatnak ki a résztvevők?
  • Célcsoport: melyik évfolyamnak szól, szükséges-e előzetes tudás?
  • Időpont és helyszín: a jóváhagyott adatok szerint.
  • Tevékenységek: például makettkészítés, rajzolás vagy egyszerű programozási feladatok, a tényleges program alapján.
  • Jelentkezés: az iskola által jóváhagyott jelentkezési mód.
  • Gyakori kérdések: mit hozzanak a tanulók, hogyan vehetnek részt?

A hiányzó adatok helyére írj egyértelmű jelölést, például: „[jóváhagyott időpont]”. A ChatGPT-nek átadott anyagból hagyd ki a tanulók személyes adatait, a belső dokumentumokat és a hozzáférési adatokat.

A kész oldal első változatának elvárásai: magyar nyelv, logikus címsorok, telefonon is használható elrendezés, jól olvasható szöveg, egyetlen HTML-fájl és külső függőségektől mentes működés.

Másolható kiinduló HTML-sablon

Ha már van előkészített sablonod, használd azt. Az alábbi mintát is bemásolhatod a ChatGPT-be a tartalmi listáddal együtt. A szögletes zárójelek között szereplő részek kitöltendő helyek.

<!doctype html>
<html lang="hu">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>[Szakkör neve]</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
      color: #1f2937;
      background: #ffffff;
      overflow-wrap: anywhere;
    }
    header, main, footer {
      max-width: 56rem;
      margin-inline: auto;
      padding: 1.25rem;
    }
    header { background: #eef2f6; }
    section { margin-block: 2rem; }
    h1, h2 { line-height: 1.25; }
    h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
    a { color: #164e9b; }
    a:focus-visible {
      outline: 3px solid #164e9b;
      outline-offset: 4px;
    }
    img { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <header>
    <h1>[Szakkör neve]</h1>
    <p>[Rövid bemutatkozás]</p>
    <nav aria-label="Oldalon belüli navigáció">
      <a href="#bemutatkozas">Bemutatkozás</a>
      <a href="#reszvetel">Részvétel</a>
      <a href="#kerdesek">Gyakori kérdések</a>
    </nav>
  </header>
  <main>
    <section id="bemutatkozas">
      <h2>Mit próbálhatsz ki a szakkörön?</h2>
      <p>[Tevékenységek és célcsoport]</p>
    </section>
    <section id="reszvetel">
      <h2>Időpont, helyszín és jelentkezés</h2>
      <p>[Jóváhagyott részvételi információk]</p>
    </section>
    <section id="kerdesek">
      <h2>Gyakori kérdések</h2>
      <h3>[A látogató kérdése]</h3>
      <p>[Rövid, ellenőrzött válasz]</p>
    </section>
  </main>
  <footer>
    <p>[Az iskola jóváhagyott megnevezése]</p>
  </footer>
</body>
</html>

A header a fejlécet, a nav a navigációt, a main a fő tartalmat, a footer a láblécet jelöli. Ezek a szemantikus HTML-elemek a tartalom szerepét is kifejezik. A viewport beállítás és a rugalmas méretezés a mobilos megjelenés kiindulópontja; a kész eredményt külön is próbáld ki.

Mentsd el és nyisd meg az oldalt

A ChatGPT válasza egy szöveges kód. A böngésző akkor tudja helyi weboldalként megnyitni, ha HTML-fájlként mented.

  1. Hozz létre egy munkamappát, például szakkor-oldal néven.
  2. Másold ki a teljes HTML-kódot a válaszból. A kódblokkot jelölő három fordított aposztrófot hagyd ki.
  3. Illeszd a kódot egyszerű szövegszerkesztőbe, például Jegyzettömbbe vagy Visual Studio Code-ba. Szövegszerkesztő helyett használt dokumentumszerkesztő további formázást vihet a fájlba.
  4. Mentsd index.html néven, UTF-8 kódolással. Windows Jegyzettömbben válaszd a „Minden fájl” fájltípust, és ellenőrizd a tényleges kiterjesztést.
  5. Nyisd meg a fájlt a böngészővel. Ezt általában dupla kattintással vagy a böngésző megnyitási parancsával teheted meg.

A címsorban jellemzően file:/// kezdetű útvonal jelenik meg. Ez helyi megnyitást jelez. Az internetes közzététel külön munkalépés lesz.

Ha kódot látsz az oldal helyett: ellenőrizd, hogy a fájl neve valóban index.html, és a tartalma a <!doctype html> sorral kezdődik. Az index.html.txt fájlnév szövegfájlt jelöl.

Módosítás után mentsd a fájlt, majd frissítsd a böngészőben megnyitott oldalt.

Próbáld ki látogatóként

A generált oldalt minden változtatás után érdemes röviden átnézni. Egy szülő vagy tanuló legfontosabb feladataiból indulj ki: találja meg a programot, az időpontot és a jelentkezés módját.

  • Tartalom: egyeznek a nevek, időpontok és helyszínek az átadott adatokkal? Maradt kitöltendő hely?
  • Mobilos elrendezés: keskenyre húzott böngészőablakban is elfér a fejléc és a szöveg? Körülbelül 360 képpont szélességnél is olvasható az oldal, vízszintes görgetés nélkül?
  • Olvashatóság: a hosszabb bekezdések kényelmesen követhetők? 200%-os nagyításnál is hozzáférsz a tartalomhoz?
  • Navigáció: a bemutatkozásra és a részvételi információkra mutató hivatkozások a megfelelő szakaszhoz visznek?
  • Billentyűzet: a Tab billentyűvel végigléphetsz a hivatkozásokon, és látható az aktuális fókusz? Enterrel aktiválhatók?
  • Szerkezet: a forráskódban szerepel a lang="hu", a main elem és az egyetlen h1 főcím?
  • Külső függőségek: a kódban keress rá a http, script, iframe és @import kifejezésekre. Minden találat szerepét nézd meg külön.

A keskeny böngészőablak hasznos gyors próba. Ha van rá lehetőséged, valódi telefonon is ellenőrizd a megjelenést. A szemrevételezés mellett kontrasztellenőrzővel is megvizsgálhatod a szöveg és a háttér színeit.

Ez a rövid próba alapellenőrzés. A teljes akadálymentességi vizsgálat további szempontokat és eszközöket igényel.

Pontosíts egyetlen módosítási kéréssel

A javításhoz nevezd meg az érintett részt, a megfigyelt problémát és az elvárt eredményt. A kéréshez add át a fájl aktuális változatát is.

Példa a fejléc javítására:

Az alábbi HTML-fájl fejlécében a navigáció keskeny képernyőn túlzsúfolt. Kizárólag a fejléc elrendezését és az ehhez tartozó CSS-t módosítsd. Körülbelül 360 képpont szélességnél a navigáció elemei törjenek több sorba, jól elkülönülő kattintható felülettel. A főcím maradjon jól olvasható. A szövegeket, a szakaszok azonosítóit és a többi tartalmi blokkot őrizd meg változatlanul. A teljes módosított HTML-fájlt add vissza egyetlen kódblokkban.

Példa tartalmi blokk javítására:

A „Részvétel” szakaszban rendezd felsorolásba a célcsoportot, az időpontot, a helyszínt és a jelentkezés módját. Kizárólag a meglévő adatokat használd. A többi szakasz szövege és az oldal megjelenése maradjon változatlan. A teljes módosított HTML-fájlt add vissza.

A csere előtt készíts másolatot az aktuális fájlról, például index-elso-valtozat.html néven. Az új változatot mentsd index.html néven, frissítsd az oldalt, majd ellenőrizd a kért változtatást és a többi szakaszt is. A változatlan részek megőrzését külön ellenőrizd, mert az AI válasza további módosításokat is tartalmazhat.

Felelősségvállalási nyilatkozat

A tananyag használatával az alábbiakat tudomásul veszed:

A kurzust önkéntesen, saját felelősségemre végzem el.

Tudomásul veszem, hogy a kurzusban bemutatott, harmadik féltől származó szoftverek és szolgáltatások (például mesterségesintelligencia-alapú eszközök) működése, funkciói, felhasználási feltételei, adatkezelési gyakorlata, valamint adatvédelmi és kiberbiztonsági beállításai a kurzus elkészülte után a szolgáltató döntése alapján bármikor megváltozhatnak. A kurzus szervezője ezekért a változásokért, a harmadik felek szolgáltatásainak működéséért, adatkezeléséért, adatvédelmi és kiberbiztonsági beállításaiért nem vállal felelősséget.

A szoftverek tényleges használatának módjáért, a megadott adatokért és a használat következményeiért mindenkor az adott felhasználó önállóan felel. A kurzus tartalma általános tájékoztató és oktatási célú; nem minősül jogi, adatvédelmi vagy informatikai biztonsági tanácsadásnak.

Vállalom, hogy a szoftverek használata során betartom a rám vonatkozó jogszabályokat (különösen az adatvédelmi előírásokat) és munkáltatóm szabályait, és nem adok meg személyes vagy bizalmas adatot olyan szolgáltatásban, amelynek adatkezelését nem ismerem.