Ezt igazából magamnak írom, hogy össze legyen foglalva egy helyre. Ugyanis pár osztálytársat én meg Koza fogunk html-ügyileg továbbképezni. Az alapoktól indulunk és jutunk ameddig jutunk. Másoknak ez a bejegyzés akkor lehet hasznos, ha ők is tovább akarnak képezni valakit, rosszabb esetben magukat, bár erre nem ez a poszt lesz a megfelelő, csak tudni fogod minek nézz utána.
Akkor kell egy normális szövegszerkesztő. HTML-Kit, N++, Crimson, vagy vmi hasonló. Syntax highlight követelmény. Aztán megnézzük egy egyszerű honlapnak a forrását. [Jelenleg] Az én főoldalam nem túl bonyolult, azt lehet példaként alkalmazni. Csak azért, hogy lássák.
Aztán bemutatjuk a tag-eket. (Hogy a jóistenbe’ hívják ezeket magyarul?) <, >, />, attr=”val”, … Aztán entitások (Na ezeknek is hogyan hívják?). & < © … Bár ez nem feltétlenül szükséges, de én mindenképpen törekszem a szabványkompatibilitásra. Magyarul nem maszek hátéemelt tanítok. Sőt, én nem is akármelyiket, hanem az XHTML 1.0 Transitional-t preferálom. És akkor itt jön be a kötelező !doctype.
Miér` XHTML 1.0 Transitional?
A HTML 4.01, vagy régebbi az elavult. Az XHTML 1.0 is 1999-es szabvány, de a legelterjedtebb. Az XHTML szabványos XML dokumentum, ami sokkal jobb, mint az SGML (≤HTML4.01). Miért nem másik XHTML (1.0 Strict, 1.1 Strict)? A többi az visztont túlságosan is kompromisszummentes. Vagy másra való. Az XHTML2-t viszont szivesen kipróbálom, ha majd megjelenik.
Aztán honlap kötelező elemei:
Doctype
html
head
title
body
(tartalom)
Ha ezek megvannak, az alapokat értik, akkor egy kis gyakorlás. Linkek, táblázatok, <b>, <i> szövegformázás, címek, stb.
Lassan rá fognak jönni, hogy ami honlapot így csinálnak, annak a stílusa vetekszik a http/404 stílusával.
Jön a CSS. Először színekkel bemutatjuk, hogy hogyan használhatjuk. Aztán szövegformázás (aláhúzás, dőlt, félkövér), majd méretek, terek (font-size, padding, margin), majd hátterek, színek, megjelenítés és lebegtetés (color, background[-image], display, float). [Aztán egy hasznos dolog: pozicionálás egy másik elemen belül–absolute módon.] Fontos, hogy minden színt beállítsunk.
Bonyolultabb CSS: Egy egész weblap stilizálása. Teszemazt, fent logó, baloldalt menü, aztán strukturált tartalom.
Jöhet egy kis browser-scripting: JavaScript. Előszöris, hogy ez mire jó. Pl. böngésző-detekció. Vagy egy óra, vagy mittudomén. Az alapok: változók, funkciók, if, for, stb.
Ha ez már megy akkor egy többweblapos Lorem Ipsum. Ebbe mondjuk legyenek a következők:
- Egységes stílus
- Jó stílus
- Logó
- Nav menü
- Strukturált tartalom (csak stílus szempontjából, amúgy lorem)
- Valami javascript
- Kábé ennyi
Ekkor már eléggé értenek a védencek egy honlap szerkezetéhez. Ekkor jön egy igen fontos dolog. Hogyan önképezzük magunkat. Természetesen, tudni kell mit akarunk, keresünk egy honlapot, ami ezt tudja és a forrásában megnézzük hogy csinálja. Geekek használhatják még a Firebugot is. Másik a google-módzser. Én mindig angolul beírom a kulcsszavakat, pl. <JS hide element>
Akkor mostbemutatjuk a PHP-t. (Ezt voltaképp lehetne együtt tanítani a JS-el, mert a szintaxis majdhogynem egyezik.)Először csak az alapok. Include (_once, require[_once]). If, Function, For, Foreach, fájlok esetleg session.
Akkör jön az XML. [Ezt Koza javasolta. Most, hogy belegondolok, önmagában nem sok értelme van érteni, hozá, de a következő témához, az ajaxhoz jó lesz.] HTML után nem lesz nehéz, főleg ha eleve xhtml-t forszírozunk beléjük.
AJAX. Mire jó, hogyan, böngésző-specifikus copy-paste algoritmus. Aztán egy kis alkalmazás. Jobb most nem jut eszembe, de mondjuk tartalom elrejtése robotok elől, vagy valami ilyesmi.
Most már szinte profivá lettek a páciensek. Gyakoroltatni kell velük az eddig tanultakat.
Aztán nekem a következő ötletem támadt. HA már mindenkinek megy elég jól, elég magabiztosan a dolog, akkor a tanárok-diákok csinálhatnak közösen egy honlapot. Ezt én már régebben magam is meg akartam csinálni… Jelenleg az Online HTML editorra rákeresve nem hoz be olyat, ami tényleg jó lenne. Vagy wysiwyg, ami célunknak nem megfelelő vagy igen keveset tud. Én egy olyan online html-szerkesztőre gondoltam, ami egyszerre több — nem csak html — fájllal tud dolgozni. Egy oldalon (netalántán frame?) van a szerkesztő, és egy másikon meg az output.
- Szerkesztőben mondjuk egyszerre max 16 fájlt szerkeszthetünk.
- Fájlok nevét mappákkal együtt megadhatjuk (mappák előnézetben számítanak)
- Fájlok típusát is megadhatjuk
- Fájlokat menthetjük számítógépünkre
- Van egy súgó
- Van egy mappa mindenféle extrákkal (demó képek, ajax alap javascript…)
- Szerkesztett fájlok a szerveren csak ideiglenesen tárolódnak helymegtakarítás végett
- Vannak (ajax által) beszúrható sablonok
- Többet majd írok később…