Webfejlesztés - HTML5, CSS3, PHP5

A tanfolyam célja

A rövid internetes kurzus azzal a céllal indul, hogy egy iskola weboldalainak (website) elkészítésével bemutassam a HTML5 leírónyelv, a CSS3 stílusnyelv és a PHP programozási nyelv alapjait.

A tanfolyam várhatóan 10-16 leckéből áll, a website egyre több összetevőjét építjük fel, illetve a már meglévőkön fejlesztünk egy kicsit.

A végső állapotban a kezdőoldal az ábrához hasonló lesz:

• véletlenszerűen változó címképpel
• rajta az iskola nevével, vagy logójával
• alatta gördülő szöveggel
• baloldalt képlinkek (elérhetőség, honlaptérkép, linktár)
• töbszintű menüvel, almenükkel
• alatta naptárral, aktuális névnapokkal, látogatottság számlálóval
• jobboldalt a tartalommal: hírek, választott menü oldalával
• lenn a lábrésszel

(Az ábrához képest a változtatás jogát fenntartjuk!)

A tanfolyam leckéi, leckéinek anyaga

A tanfolyam leckéi egymásra épülnek, ezért célszerű "libasorban" megküzdeni velük!

(A számozás 16-os /hexadecimális/ számrendszerben van, tehát 9. után a 10.,11., ... 15. jönne, ami itt A.,B, ..., F. lesz. Az első leckét pedig - mivel ebben még nincsen PHP - 0.nak számoztam.)

Javaslatok, tanácsok

• az "indexs.php" fájlok futtatásához/teszteléséhez célszerű PHP fejlesztői környezetet telepíteni/telepíttetni a saját gépünkre, ha ezen Linux van, akkor valószínűleg a PHP is fenn van (s = 1,2,3,...,E,F)
• Windows alá telepíthető virtuális Linux VirtualBox-szal, vagy feltehető valamely Linux disztribúció (pl. Ubuntu) a Windows mellé (multi operációs rendszer)
• ha az előbbi utak nem járhatók, akkor keressünk egy ingyenes tárhelyet, ahova FTP-vel feltehetők a félkész vagy kész programocskák, és ezen a szerveren tesztelhetők (igaz, hogy minden módosítás után újra fel kell FTP-zni a módosított fájlokat!); néhány ingyenes tárhely: webnode, hostinger, nethely, ...
• minden új lecke előtt (kivétel a 0.) másoljuk le az "indexs.php" fájlt és a "mains.css" fájlt a következő sorszámmal a megfelelő könyvtárba, s csak utána kezdje el a munkát az új fájlokkal (ezt eleinte mondom/írom is a leckék elején, de később már nem biztos)
• ha több új fájlra van szükség a leckében, általában tömörítve (*.zip) adom meg ezeket, a Total Commander és a legtöbb fájlkezelő segít a fájlok kicsomagolásában
• a leckében lévő (szürke hátterű) kódrészleteket kijelölés után Ctrl+C teszi a vágólapra, majd Ctrl+V rakja az módosítandó fájl azon helyére, ahol éppen állunk
• a CSS stílusok tanulása történhet úgy, hogy a javasoltakat egyesével teszem a helyére, majd frissítek, s megpróbálom megérteni (jó módszer ezek módosítása! is)

Puskázási lehetőségek

Az alábbi linkekre kattintva a leckék kész oldalai találhatók. Ezt csak végszükségben nézzük meg, hiszen itt nemcsak a "végtermék" látható, hanem kileshető belőle a megvalósítás módja is a következőképpen:

• kiválasztom a leckét
• Ctrl+U billentyűkombináció után látható a HTML/PHP fájl forrása (kivéve a PHP betéteket)
• ebben (fenn) látható a stílusfájl, amelyre rákattintva megnézhetjük annak a tartalmát

Libasorban:

Búcsúzóul néhány hasznos link

• HTML alapok
• HTML és CSS alapok
• HTML5 és CSS kezdetek
• Apache, PHP, MySQL és PHPMyAdmin telepítése Linuxra
• How to install Apache, PHP and MYSQL on Windows 10 Machine