Legutóbb 2014. 02. 8.-n, 11:04-kor frissült; ma 03.28. van, csütörtök , . Valid HTML  Valid CSS3 


Tanulságok

LogiSim segédlet

Oldal létrehozás

Mindenekelőtt érdemes egy "üres oldalt" készíteni. A html oldalt a "winscp"-vel a saját tárterületünkön kell létrehozni. A "public_html" linkkel célszerű elnavigálni a "web" alkönyvtárba; ott az illető új almappában (a jobb egérgombbal) kell megadni az új fájl nevét (akarmi.html) és ebbe bemásolni - crtl/c - ctrl/v- az oldal alapját.
Itt a vastagon szedett, nagyobb betűvel írt részre gondolok, a "HTML fájlok szerkezete" és a "HTML cimkék" között. Ebből az oldalból csak három dolog látszik kívülről: az "Oldal címe" (a böngésző megfelelő "fülében"), a legmagasabb rendű "Címsor" és egy "Bekezdés", ami a szöveg az oldalon. Ezekbe (ezeket megváltoztatva) lehet majd, később beírni a saját tartalmat.
Ezt persze érdemes megnézni "kívülről" is, egy böngészővel (célszerűen firefox-al), hogy mit hoztunk létre.
Ezután rögtön érdemes a html (kiterjesztésű) oldal mellé létrehozni a stílus-tulajdonságokat megadó "valami.css fájlt.
Itt van, hogy melyik az a többlet - vastagon írt - sor, amit a html fájlban kell elhelyezni. Ez a head-ben van, ebből találja meg a böngésző, hogy mi a követendő stílus.
A következő vastagon szedett rész a css fájl tartalma , ez szabja meg az oldal megjelenését. (Ha ez nincs, a böngésző a saját alapértelmezése szerint jeleníti meg az oldalt.)

Ellenőrzés:
még a saját anyagok beírása előtt érdemes rátenni az oldal html- és css szintaxisát ellenőrző "pecsétet", pontosabban az ide mutató linkeket. Ezekre kattintva megtörténik az oldal html és css szintaxis szerinti ellenőrzése; van egy , de teljesen üres weblapunk. Sokat segít, ha "ellenőrizzük az ellenőrzést"...:). Tudatosan elrontjuk a weboldalt és megnézzük, hogyan jelzi a hibát a validátor. Ha a "show source" opciót választjuk, akkor nem csak hogy megadja a hiba helyét, (sor- és karakterszám), hanem meg is jeleníti a teljes kódsorozatot. Amíg itt hibajelzés van (azért, mert kimaradt valami a kijelölésből, vagy elgépeltünk egy karaktert), nem érdemes továbbmenni.
Bizonyos linkeken "fönnakad" a validátor. Ilyenkor egy másik "akarmi.php" nevű oldalban el lehet rejteni. Ezt elfogadja az ellenőrzés és az php-kód a lefutáskor rögtön átirányítja a kívánt oldalra.
Az oldal tartalma:
<?php
header( 'Location: http://ezzel.van.a.baj.hu' ) ;
?>

A html cimkéket és a szükséges stílustulajdonságokat egyesével célszerű beírni és ellenőrizni mind a láthatóság, mind az érvényesség szempontjából.
Ha egy megjelenítést várhatóan csak egyszer akarunk használni, azt egy "div"-el érdemes. Ha többször, akkor a "css"-ben a helye. Osztályként: .kiemeles kell definiálni és úgy hivatkozni rá, akár <p class="kiemeles">, akár <div class="kiemeles"> formában.

Gyakori hibák

A figyelmetlenségen és a kapkodáson túl a tudatos gondolkodás elmulasztása okozta a legtöbb hibát. Célszerű az eredeti funkciójukra használni a cimkéket. Ha vastagon, dőlt betűvel és aláhúzva is ki akarunk emelni valamit, akkor az elsőnek megnyitott cimkét kell utoljára bezárni, mint a különböző zárójelek esetében

Mindig egy üres, de érvényes oldalból (vagy oldalakból, a menüvezérelt honlapok esetén) célszerű kiindulni. Itt kell ellenőrizni, hogy működik-e a menü és hova kell tenni a tartalmat-cimkéket, hogy a kívánt látványt elérjük. A css-el (jigsaw) kevesebb baj szokott lenni, de a validátort folyton használni kell. Ezért érdemes berakni a menübe, célszerűen a menü aljára.

A <h1> - <h6> cimkék a címekre valók. Ezekben ugyan ki lehet emelni valamit dőlt betűvel, aláhúzva, de ezt inkább a szövegben célszerű használni. Címbe bekezdést, képet, táblázatot, főleg div-et ágyazni nem túl célszerű...

A <p> cimke a szöveg megjelenítésére szolgál (paragrafus). Ha táblázatot <table> akarunk beiktatni, akkor a </p>-vel kell befejezni a bekezdést, berakni a táblázatot és utána egy <p>-vel folytatni a szöveget. A <div> cimke nagy, "általános doboz", amibe sokminden belefér, akár komplett oldalak is.

Táblázat készítésekor a cellák tartalmának megfelelően a lehető legkisebb méret az alapértelmezés és nincs keret sem. Hacsak külön meg nem adjuk a kerete- és a cellán belüli margó méretet, valamint a táblázat oldalon elfoglalt helyének nagyságát: <table border="1" cellpadding=2 width="75%">, a táblázat nagyon kicsire tud zsugorodni.

Ütemezés

Az első akalommal a segédletből csak a html színkódok használatáig (azzal bezárólag) célszerű eljutni.

A második alkalommal az oldal menüszerkezet ének megadását célszerű elsajátítani. Itt négy olyan oldalt kell létrehozni, amik teljes html oldalak, csak a tartalmukban különböznek. A menüvezérlő szerkezet (ami az oldalakat cserélgeti,) ugyanaz.