Paksy Patrik honlapja

Webprogramozás

Leírások, segédanyagok honlapszerkesztéshez

HTML

HTML leírás (frissítve: 2013.02.28)
HTML oldalkeret
HTML előadás terv (2011)

CSS

CSS leírás (frissítve: 2013.03.25)
CSS előadás terv (2011)
CSS3

PHP, MySQL

PHP+MySql előadás terv (2011)

Egyéb

Színkódok

Szent Angéla - Webprogramozási szakkör 2013

Tematika

  • 2013.02.26 - HTML 1. rész
  • 2013.03.05 - HTML 2. rész
  • 2013.03.19 - CSS
  • 2013.03.26 - Programozási alapok (JavaScript - programozási alapelvek, folyamata, változók és operátorok)
  • 2013.04.09 - Programozási alapok (szekvencia, elágazás, ciklusok)
  • 2013.04.16 - Programozási alapok (függvények, rekurzió)
  • 2013.04.23 - Programozási alapok (objektumok, HTML 5 Canvas API)
  • 2013.04.30 - Programozási alapok (tömbök, modulok kapcsolata, láthatóság)
  • 2013.05.14 - Haladó programozás (HTML DOM kapcsolat, jQuery, AJAX technika)
  • 2013.05.21 - Haladó programozás (Google Maps API)

Lehetőség szerint ne hagyjatok ki egyetlen alkalmat sem, mivel az egyes órák egymásra épülnek. Ha mégsem tudok valamelyik időpontra eljönni, akkor az ide feltöltött segédanyagokkal pótolhatjátok lemaradásotokat, illetve kérdezhettek bátran a többiektől illetve tőlünk is a levelező listán.

Órai anyagok

1. előadás (HTML 1. rész)

Vázlatosan a következő témákat érintettük (zárójelben az oldal tetején lévő "HTML leírás" megfelelő része)

  • Mi is az a HTML? A HTML felépítése (0., 1., 2. fejezetek)
  • Fájl útvonalak, színek (3. fejezet)
  • Szövegformázás, címsorok, listák, képek (4. fejezet)
  • Sorköz, bekezdés (5. fejezet)
  • Hivatkozások (7. fejezet)

2. előadás (HTML 2. rész)

Vázlatosan a következő témákat érintettük (zárójelben az oldal tetején lévő "HTML leírás" megfelelő része)

  • Táblázatok (6. fejezet)

3. előadás (CSS)

A feladatok leírása megtalálható az órai anyag végén illetve az egyes tömörített fájlokban is.

4. előadás (JavaScript programozás bevezető - programozás folyamata, változók, operátorok)

5. előadás (JavaScript programozás bevezető - szekvencia, elágazás, ciklus)

6. előadás (JavaScript programozás - függvények)

7. előadás (JavaScript programozás - objektumok)

8. előadás (JavaScript programozás - tömbök, fájlok, láthatóság)

9. előadás (Haladó programozás - jQuery, HTML DOM)

10. előadás (Haladó programozás - Google Maps API)

Szent Angéla - Webprogramozási szakkör 2012

A HTML fájlok letöltése: jobb kattintás --> A link / hivatkozás mentése másként...

Tematika

  • 2012.03.06 - Programozás bevezetés
  • 2012.03.13 - HTML 1. rész
  • 2012.03.20 - HTML 2. rész
  • 2012.03.27 - HTML 3. rész
  • 2012.04.03 - CSS 1. rész
  • 2012.04.24 - HTML + CSS gyakorlóóra
  • 2012.05.15 - SQL
  • 2012.05.22 - PHP 1.rész
  • 2012.05.29 - PHP 2.rész
  • 2012.06.05 - PHP 3. rész

Otthoni feladat a HTML, CSS, PHP részhez

A szakkörök alkalmai mellett elengedhetetlen egy kis gyakorlás otthon is, ezért egy nagyfeladatot kellene mindenkinek készítenie. A feladat egy tetszőleges weboldal megvalósítása, mely bármilyen témáról szólhat, ami titeket érdekel (pl. kedvenc focicsapatok, zene, utazás - hol jártál már a világban, könyvek, film...stb.). A feladattal az órán tanultaknak megfelelően kell haladni, az újonnan tanult ismereteket tetszőlegesen beleépítve. Mi itt egy rövid útmutatást fogunk adni minden órához, hogy mi kerüljön bele a háziba.

  • HTML feladatrész
    • Összesen legalább 3 különböző oldat készíts. Az egyik legyen a főoldal, index.html néven, a második tetszőleges, a harmadik pedig egy olyan oldal legyen, ahol megírhatják a látogatók a véleményüket az oldaladról. Természetesen a tetszőleges oldalakból bármennyit készíthetsz, amennyi értelmes a saját feladatodhoz.
    • Minden oldal legyen elérhető egy menüből, a menü szerepeljen az összes oldalon.
    • Alakítsd ki az oldal elrendezését táblázat segítségével. Nézz meg pár honlapot, hogy ott hol található például a menü vagy a tartalmi rész. Tipikus elrendezés: felül menü vízszintesen, alatta a tartalom, vagy bal oldalt menü, jobbra tőle a tartalom.
    • A véleménynyílvánító oldalra helyezz fel néhány űrlapelemet, ahol megadhatják a látogatók például a nevük, e-mail címük, és a véleményük (akár 1-5 osztályozás, akár több lehetőség közül választás, de szöveges is lehet). A véleménnyilvánító oldal csak annyit jelent, hogy néhány beviteli mezőt helyezünk fel rá. Ehhez segítség található a fenti HTML segédlet legvégén (6. Űrlapok című fejezet - a hozzá tartozó linken egy példakód szerepel, abból könnyen megérthető).
    • Helyezz el tetszőleges tartalmat a főoldalra és a tetszőleges oldal(ak)ra is.
    • Használj képeket, szöveget, igazítsd megfelelően, DE NE FORMÁZD AZ OLDAT, tehát színeket ne használj, és a betűket sem kell méretezned.
  • CSS feladatrész
    • Az előző HTML feladatrész során készített weboldalt formázzuk CSS segítségével.
    • Pótoljuk a HTML feladatrész hiányosságait (ha az űrlapok felhelyezését kihagytuk, próbáljuk meg a fenti leírás alapján)
  • SQL + PHP feladatrész
    • Az eddigi oldalainkhoz (vagy annak hiányában a FociEB-s mintaoldalhoz) készítsünk valamilyen lista-szerű nyilvántartást. Például a FociEB-hez a meccsek listáját.
    • Hozzunk létre egy táblát phpMyAdmin webes felület segítségével a lista nyilvántartásáh Használjunk benne egyedi azonosítót (ID).
    • Készítsünk egy oldalt (legyen lista.php), ahol listázunk valamilyen információt abból, amit eltárolunk (de ne mindent!). Például: a meccsek listájánál csak a két országot írjuk ki, akik részt vettek a meccsen és a meccs dátumát. A lista minden eleme egy link legyen egy másik oldalra (legyen reszletek.php), ahol részletezzük az adott listaelem információit (például: résztvevő felek, eredmény, bíró, helyszín, időpont... stb.), tehát itt írjuk ki azt is, amit nem jelenítettünk meg az eredeti listában.
    • Segítség: a listaelemek kiírásakor egy linket helyezünk rá. A linkben paraméterként (GET kéréssel) adjuk át az adott listaelemhez tartozó ID-t paraméterként a másik oldalnak, így amikor arra kattintunk és megjelenítjük a részletezőoldalt, akkor az tudni fogja, hogy melyik az a sor a táblában, amit ki kell írni (ahol az ID értéke megegyezik a paraméterként kapottal).

1. előadás (prgramozási alapok)

Az előadás anyaga alapozásként szolgál későbbi témakörökhöz, a 2. alkalommal ennél egyszerűbb dologgal foglalkozunk. Erre témakörre a PHP résznél lesz szükség legközelebb, addig az otthoni feladatokat nézzétek meg. Sajnos az első alkalommal használt JavaScript nyelv végül kimarad az előadások közül.

2. előadás (HTML 1. rész)

3. előadás (HTML 2. rész)

4. előadás (HTML 3. rész - gyakorlás)

8. előadás (SQL 2. rész, PHP 1. rész - PHP alapok, HTTP GET / POST)

9. előadás (PHP 2. rész - Honlap átalakítása: keretoldal & tartalom elválasztása)

10. előadás (PHP 3. rész - Adatbázis hozzáférés)

Berzsenyi Dániel Gimnázium - alumni honlapkészítési projekt

Első előadás (2011.03.02)

Második előadás (2011.03.18)

Harmadik előadás (2011.03.25)

  • CSS alapok - Berkes Bence, Katona Máté, Reményi Gergő (pdf)
  • PHP alapok - Sánta Zsolt, Sztanka-Tóth Tamás (hiányzik!!!)

Negyedik előadás (2011.04.01)

Ötödik előadás (2011.04.08)

Gyakorlás a dolgozatra

Hatodik előadás (2011.04.15)

Dolgozat (hiányozni nem lehet, csak az országból való végleges kitelepülés vagy súlyos közúti baleset esetén :))