WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
menü MENÜ    

Oldaltérkép


1 WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS: Programozott tananyag
2 Bejelntkezés
3 Regisztráció
4 Kijelentkezés
5 Oldaltérkép
6 Szerkesztők
7 Responsive web design teszt
8 CSS3 nyomógomb (Button) generátor
9 CSS3 link gomb (LinkButton) generátor
10 CSS3 checkbox generátor
11 Blogmotor nem csak iskoláknak
12 Webáruház bérlés 2000 Ft
13 Egyedi webáruház készítés
14 Ingyen webáruház
15 Weboldal készítés árak
16 Kapcsolat
17 Keresőoptimalizálás - SEO
18 HTML5 weboldalak készítése

19 HTML5 bevezetés
20 Bevezetés A webhely célja interaktív weboldalak készítéséhez szükséges ismeretek elsajátítását lehetővé tevő interaktív elektronikus tananyag közreadása.
21 HTML5 alapok
22 HTML5 leíró nyelv Tananyagunk a HTML5 specifikációban leírt elemeket, jellemzőket illetve azok használatát mutatja be példákon keresztül.
23 HTML elemek A HTML oldal egyes elemeit címkékkel (tag-ekkel) jelöljük.
24 Böngésző független weblapok Minden webfejlesztő álma, hogy weblapjai valamennyi operációs rendszeren, valamennyi böngésző program valamennyi változatán, egyformán és úgy jelenjenek meg.
25 Egyszerű HTML oldalak készítése A tananyag következő fejezetei bemutatják a HTML5 elemi jelölésére használható címkéket (tag-eket), az elemek jellemzőit és használatát.
26 Összetett webhelyek, webáruházak készítése Az összetett webhelyek és webáruházak készítése nem a kód elkészítésével kezdődik, és a kód elkészültével közel sem ér véget.
27 Webhelyek akadálymentesítése Képek, animációk vagy videók használata esetén ne felejtsünk el helyettesítő szöveget megadni!
28 A HTML5 weboldalak felépítése
29 HTML oldalak felépítése HTML oldalak 3 fő része: a dokumentumtípus meghatározása, a dokumentum feje, a dokumentum törzse.
30 Dokumentumtípus definíció A dokumentumtípus definíció mondja meg a böngészőnek, hogy a HTML-nek melyik verzióját fogjuk használni.
31 HTML tag (címke) A dokumentumtípus definíció után következik a dokumentum tartalma, amely html nyitó- és zárócímkék közé kerül.
32 A dokumentumfej (head ) A fej a weboldalra vonatkozó információk megadását teszi lehetővé. Ezek nem lesznek megjelenítve, de befolyásolják a tartalom megjelenítését.
33 A dokumentumtörzs (body ) A törzs tartalmazza a böngésző által a látogató számára megjelenítendő tartalmat.
34 HTML5 dokumentumfej (Head) tartalma
35 A fejléc elemei A HTML weboldal fejlécében (head) használható elemek (tag-ek) összefoglalása.
36 Az oldal neve Az oldal neve jelenik meg a böngészők címsorában, a weoldalhoz tartozó fülén és a keresők találati listáján.
37 A meta címkék A meta adatok nem jelennek meg az oldalon. A böngészők és a keresők számára nyújtanak plusz információt.
38 A karakterkészlet megadása A karakterkészlet megadásának elmulasztása hibás megjelenítéshez vezet(het).
39 A meta címkék F1 Feladat
40 A meta címkék F2 Feladat
41 A meta címkék F3 Feladat
42 Belső vagy beágyazott stílusok A külső stíluslap beállításait módosíthatjuk a beágyazott stílusdefinícióval, az aktuális weboldal egyedi jellemzőinek megfelelően.
43 Link elem A link elem kapcsolatot teremt a weboldal és egy külső erőforrás (pl. stíluslap, ikon.. ) között. ( link magyarul: kapocs )
44 Külső stíluslap használata A weboldalak tartalmi elemeit a HTML kód, míg a tartalom megjelenítésére vonatkozó stílusdeklarációkat a CSS kód tartalmazza egy-egy külön szöveges állományban.
45 Beágyazott stílusok jellemzői A példában a nyomtatóra megadott stílusdefiníció, a képernyőn történő megjelenítést nem befolyásolja.
46 HTML5 szöveges tartalom
47 Címsorok A címsor hierarchia lehetővé teszi a tartalom strukturált közreadását.
48 Karakterformázás HTML elemekkel Egy-egy karakter, szórészlet vagy szövegrész formázására alkalmas elemek.
49 A szöveg változásának jelzése A tartalom változásának jelzése, és nem csupán szövegformázás.
50 Általános szövegformázás Egy vagy több sor, bekezdés formázására alkalmas elemek.
51 Idézetek, címek, szerzők jelolése Az idézetek jelölésére használható HTML elemek.
52 Definíciók és rövidítések A definíciók és rövidítések jelölésére használható HTML elemek.
53 Számítógépes kódok megjelenítése A számítógépes kódok megjelenítésére használható HTML elemek.
54 A szöveg tagolása Bekezdések, sortörések és megjegyzések.
55 Időpont megadása Aátumok és időpontok, a keresők és a felhasználó naptárak számára olvasható módon történő kódolása.
56 HTML5 linkek
57 Linkek (hivatkozások) A linkek kötik össze a weblapokat, és lehetőséget teremtenek egy hosszabb oldalon található fejezetek gyors elérésére is.
58 Linkek (hivatkozások) jellemzői A linkeknél használható HTML attribútumok.
59 Külső hivatkozások Egy másik webhely összekapcsolása weboldalunkkal.
60 Belső hivatkozások Saját webhelyünk oldalainak összekapcsolása.
61 E-mail link Ha a felhasználó rákattint a következő linkre, akkor az alapértelmezett levelezőprogram nyílik meg, és a címzett automatikusan a href jellemzőnél megadott e-mail cím lesz.
62 Letöltése linkek segítségével Dokumentumok, képek és egyéb multimédia fájlok, programok, tömörített állományok letöltését is lehetővé tehetjük külső vagy belső hivatkozások segítségével.
63 HTML5 listák
64 Számozatlan listák egymásba ágyazása Több szintű számozatlan lista.
65 Számozatlan lista A lista elemei rendezett formában, de sorszámok nélkül kerülnek megjelenítésre.
66 Számozott lista A lista elemei rendezett formában, sorszámokkal kerülnek megjelenítésre.
67 Számozott lista jellemzői A kezdő sorszám, a sorszámok típusának és a számlálás irányának beállítása.
68 Számozott listák egymásba ágyazása Több szintű számozott lista.
69 Meghatározáslista Szavakat, fogalmakat, kifejezéseket és azok meghatározását társítja egymáshoz.
70 HTML5 elemek jellemzői
71 Általános HTML5 jellemzők Globális HTML5 attribútumok (HTML5 Global Attributes)
72 Általános HTML jellemzők Globális HTML attribútumok (HTML Global Attributes)
73 HTML5 weboldalak kialakítása
74 HTML oldalak szerkezete Elrendezés kialakítása általános tároló elemekkel (div) és stíluslapokkal (css), vagy táblázattal.
75 DIV - Általános tárolóelem Az egyes tárolóelemeket id (egyedi azonosító) jellemzőjük értékével azonosíthatjuk. Ha a weboldalon több tárolóelem class (osztály )jellemzőjének azonos értéket adunk, akkor az azonos nevű osztályba tartozó tárolóelemeket egyes tula
76 Egyoszlopos elrendezés A weboldalunk fő szerkezeti elemei: Fejléc, Menüsor, Tartalom, Lábléc.
77 Kétoszlopos HTML elrendezés A weboldalunk fő szerkezeti elemei: Fejléc, Menüsor, Menüsáv, Tartalom, Lábléc.
78 Kétoszlopos HTML5 elrendezés Példánkban szereplő kód csupán annyiban tér el a kétoszlopos HTML elrendezésnél megismerttől, hogy a HTML5-ben bevezetett új elemeket használjuk a szerkezeti elemek megvalósításához.
79 HTML5 tárolóelemek A HTML5 tartalomfüggő tárolóelemek használata.
80 Átlátható kétoszlopos elrendezés Nézzük meg a korábban tárgyalt kétoszlopos HTML5 elrendezést külső CSS használata esetén.
81 HTML5 - Tárolóelem ábrákhoz HTML5 Speciális tárolóelem ábrákhoz: Figure.
82 HTML5 - Címsor csoport Speciális tároló elem, amely jelzi a különböző szintű címsorok összetartozását.
83 HTML5 - Elrejthető részletek A felhasználó az összefoglalásra kattintva rejtheti illetve jelenítheti meg a részletes tartalmat.
84 HTML5 multimédia
85 Hang videó és animáció beillesztés Hang videó és animáció beillesztés HTML5 dokumentumba történhet: a, iframe, object, video vagy audio elemek segítségével.
86 Videó beágyazása iframe segítségével YouTube videó beágyazása iframe segítségével.
87 Beágyazás object elem segítségével Az object páros címke külső objektumok (pl. audio, video, Java appletek, ActiveX, PDF, Flash) beillesztésére szolgál.
88 HTTPS használata Ha https protokollt használó webhelyre http protokollal elérhető tartalmak kerülnek beágyazásra, akkor a felhasználó ¢kevert tartalom¢ figyelmeztetést kap.
89 Az object elem jellemzői Az object elem HTML és HTML5 jellemzői.
90 A param elem jellemzői A param címkével beállítható jellemzők.
91 Tárolóelem létrehozása Az object címkét gyakran együtt használják az embed páros címkével, annak érdekében, hogy minden böngésző képes legyen megjeleníteni az objektumot.
92 A tárolóelem jellemzői Az embed HTML elem jellemzői.
93 Video elem - MIME Típusok A HTML5 video elemben használható MIME típusok.
94 HTML5 - Video elem A HTML5 - video elem használata.
95 A video elem jellemzői A HTML5 video elem jellemzői.
96 HTML5 - Audio elem A HTML5 audio elem használata.
97 Az audio elem jellemzői A HTML5 audio elem jellemző.
98 HTML5 űrlapok
99 Űrlap létrehozása Az űrlapok használatával a felhasználó számára lehetővé válik, hogy adatok bevitelével, lehetőségek közül való választással befolyásolja a megjelenített tartalmat és/vagy információt küldjön a szerver felé.
100 Űrlapok jellemzői Az HTML űrlap elem jellemzői, attributumai.
101 Input elem Az input elem segítségével, típusától függően többféleképp kérhetünk be adatokat a látogatóktól.
102 HTML - Egysoros szövegbevitel Az egysoros szöveg bevitelére alkalmas text típusú input elem jellemzői.
103 HTML5 - Egysoros szövegbevitel Az egysoros szöveg bevitelére alkalmas a text típusú input elem hagyományos (HTML) jellemzői.
104 Egysoros szövegbevitel tartalék Az egysoros szöveg bevitelére alkalmas a text típusú input elem hagyományos (HTML) jellemzői.
105 HTML5 - Dátum és idő típusai A dátum és idő bevitelére alkalmas Új (HTML5) input elem típusok.
106 HTML5 - Számok bevitele A számértékek bevitelére alkalmas Új (HTML5) input elem típusok.
107 HTML5 - Egyéb új beviteli elemek Egyéb adatok bevitelére alkalmas Új (HTML5) input elem típusok.
108 HTML - Input nyomógombok Az input elemmel megvalósítható nyomógombok típusai.
109 HTML - Jelölőnégyzetek A checkbox típusú input elemek jellemzői.
110 HTML - Kiválasztó gomb A radio típusú input elemek jellemzői.
111 HTML - Többsoros szövegbevitel A többsoros szövegbeviteli mező: textarea.
112 HTML - Lenyíló lista (select) A lenyíló listaelem (select) jellemzői.
113 Felirat űrlap elemekhez (Label) Az űrlapelemek címkéjének címkéje.
114 Lenyíló listaelem csoport A lenyíló listaelem csoport (optgroup) jellemzői.
115 Adatlista (datalist) Egy előre elkészített lista alapján választási lehetőségeket kínál adatbevitelnél.
116 Elemcsoportok (fieldset) Az űrlapelem csoport elem (fieldset) jellemzői.
117 HTML - Button nyomógombok A legfontosabb különbség, input és a button elemekkel megvalósított nyomógombok között, hogy az utóbbit páros címkével jelöljük.
118 HTML5 nyomógomb jellemzők A nyomógombok HTML5 jellemzői.
119 HTML5 - Output elem Számítások eredményének megjelenítésére szolgál.
120 HTML5 - Ellenörző kód Titkos kulcsot generál, amelyet az űrlapot feldolgozó szkript ellenőriz.
121 HTML5 beágyazott keret
122 Dokumentumok beágyazása HTML oldalunkba beágyazott keret segítségével egy másik dokumentum (pl. weblap, szöveges dokumentum vagy akár multimédia ) tartalmát illeszthetjük be.
123 Beágyazott dokumentum jellemzői A beágyazott iframe dokumentumok jellemzői.
124 Biztonsági beállítások A sandbox jellemző segítségével extra korlátozások adhatók meg a beágyazott keret tartalom tartalmára vonatkozóan.
125 HTML5 képek
126 Állókép beillesztése A kép Inline elem: a sorban előtte állót követi, a sor mögötte tovább folytatódik. Blokkszintű elemmé a stíluslap segítségével tehető.
127 Állóképek jellemzői Az alt jellemzővel kell (kötelező!) megadni a képet helyettesítő szöveget, ami akkor jelenik meg, ha a kép nem elérhető.
128 Képtérkép (image map) Egy állókép különböző területeihez linkeket rendelhetünk.
129 HTML5 táblázatok
130 Egyszerű táblázat A HTML táblázat tartalmaz oszlopokat, sorokat, láblécet és persze adatokat. Tartalmazhat fejlécet, láblécet és persze adatokat. Megadhatjuk címét is.
131 Táblázat fejléce A sorok és oszlopok fejléceit egyenként a th páros címkével adhatjuk meg. Ezek stílusát külön beállíthatjuk.
132 Cellák összevonása Összevonhatunk két vagy több egy sorban vagy egy oszlopban egymás mellett elhelyezkedő cellát.
133 Táblázatok hármas tagolása A nagyméretű táblázatokat célszerű 3 részre tagolni. Így nyomtatásnál minden oldalon olvasható lesz a táblázat fejléce és lábléce is.
134 Táblázat címe A táblázat címét nem címsorokkal, hanem caption páros címkék között adjuk meg.
135 Oszlopcsoportok A táblázat egy vagy több oszlopa, ill. azokból képzett oszlopcsoportok definiálható, melyeket együtt kezelhetünk.
136 HTML5 események
137 HTML események Általános HTML események összefoglaló táblázatai.
138 Szkriptek használata
139 JavaScript HTML oldalon A kliens oldali szkriptek, köztük a JavaScript) értelmezése és végrehajtása a böngésző feladata. A szkriptek forráskódját a szerver elküldi a felhasználó (kliens) számítógépének.
140 PHP Script és a HTML A PHP szkriptek szerver oldali szkriptek értelmezésüket és végrehajtásukat a szerveren futó értelmező program végzi.
141 HTML5 vizualizáció
142 Érték szemléltetése Egy a tartományon belüli érték, szemléltetésére használható HTML5 elem.
143 Folyamatok szemléltetése Egy folyamat pillanatnyi állapotának szemléltetésére használható HTML5 elem.
144 CSS3 stíluslapok készítése

145 CSS3 színek
146 Színkezelés Az additív modellben a három alapszín : piros (Red) , zöld (Green) , kék (Blue).
147 CSS színkódok és alapszínek Weboldalakon az egyes HTML elemek színeit többféleképpen is megadhatjuk.
148 Színek angol nevei A CSS3 stílusdefiníciókban 147 színre angol nevük alapján is hivatkoztatunk.
149 Web biztos színek A valamennyi böngésző és eszköz által ismert 216 db szín (¢Web Safe Colors¢ ).
150 Átlátszóság (fedettség) Az opacity tulajdonság segítségévek megadható, hogy egy elem milyen mértékben legyen átlátszó.
151 CSS3 alapok
152 Mi is az a CSS? Stíluslapok segítségével tehetjük tetszetőssé és áttekinthetővé weboldalainkat.
153 CSS stílusdeklaráció Minden CSS szabály egy vagy több kijelölővel (szelektorral) kezdődik, ezt követi kapcsos zárójelek között a deklarációs szakasz (meghatározásblokk).
154 CSS megjegyzések A HTML dokumentumok készítésénél már megismert fejlesztőknek szóló emlékeztetők, megjegyzések a stíluslapokon is használhatók.
155 CSS3 kijelölők
156 Általános kijelölő ( * ) A weboldalon található valamennyi HTML elemre vonatkozik.
157 Azonosító kijelölők ( ID selector ) Minden weboldalon csupán egyetlen HTML elemre vonatkozik, amelynek egyedi azonosítójával megegyezik.
158 Osztály kijelölők ( Class selector ) Minden olyan HTML elemre vonatkozik, amelynek osztály jellemzőjének értéke megegyezik a szektor nevével.
159 A típuskijelölők ( type selector ) A weboldal összes azonos típusú elemére vonatkozik.
160 Csoportos kijelölés ( group of selectors ) A weboldal összes, a felsorolásban szerelőkkel megegyező típusú elemére vonatkozik. A kijelölendő HTML elemek neveinek felsorolásával adhatjuk meg.
161 Egyszerű jellemzőkijelölő Az összes olyan Elem típusú elemre vonatkozik, amelynél megadásra került az adott jellemző.
162 Pontosjellemzőérték-kijelölő Az összes olyan Elem típusú elemre vonatkozik, amelynél adott jellemző értéke azonos a kijelölőben megadott értékkel.
163 Részleges jellemzőérték-kijelölő Az összes olyan Elem típusú elemre vonatkozik, amelynél adott jellemző szóközökkel elválasztva megadott értékei között szerepel a kijelölőben megadott érték.
164 Nyelvi jellemzőkijelölő Az összes olyan Elem típusú elemre vonatkozik, melynek nyelve megegyezik a kijelölőben megadott nyelvvel.
165 A HTML gyökérelem Minden HTML5 dokumentum gyökér eleme, egyben az összes többi elem őse a html elem.
166 Dokumentumfa Az adott elem tulajdonságainak meghatározásánál a webfejlesztőnek is ismerni kell az elemek dokumentumfán elfoglalt helyzetét.
167 Gyermek kijelölő Ha a dokumentumfán egymás alatt helyezkedik el két elem, akkor a hierarchiában feljebb lévő a szülő eleme a alatta elhelyezkedőnek.
168 Leszármazott kijelölő Egy HTML5 dokumentumban minden elem a html elem leszármazottja, mivel minden elem a .. címkék között helyezkedik el.
169 Testvér kijelölő A Elem1 HTML elemet elsőként követő Elem2 HTML elemre vonatkozik, amely Elem1-el közös szülőtől származik.
170 Első elem kijelölő Álosztály, amely kiválasztja azokat az elemeket, amelyek szülő elemeik első gyermekei.
171 Link kijelölők Álosztályok: Kijelölik azokat a linkeket, amelyek olyan weboldalra mutatnak, amiket felkeresett vagy még nem keresett fel a látogató, a böngésző adatai szerint.
172 Dinamikus álosztály kijelölők Dinamikus álosztály kijelölők különböző események bekövetkezésekor válnak aktívvá.
173 Beszúrt tartalom A :before álelem kijelölő segítségével a kijelölt HTML elem elé és az :after álelem kijelölő segítségével pedig mögé szúrhatunk be a HTML kódban nem szereplő tartalmakat.
174 Számlálók használata A :before és az :after álelem kijelölők felhasználásának lehetőségeit kiterjeszti a számlálók használata.
175 Többszintű számozás A címsorok vagy felsorolások minden szintjéhez egy-egy számlálót rendelve több szintű számozással jeleníthetjük meg azokat, a nyomtatott könyvek tartalomjegyzékében és fejezetcímeinél megszokott módon.
176 Jellemzőérték-vége kijelölő Az összes olyan Elem típusú elemre vonatkozik, amelynél adott jellemző végén szerepel a kijelölőben megadott érték.
177 Általános testvér kijelölő A Elem1 HTML elemet követő valamennyi (nem csak az első) Elem2 HTML elemre vonatkozik, amely Elem1-el közös szülőtől származik.
178 Célpont kijelölő Hasznos lehet ha a képernyő egy adott területén a felhasználó választásától függően más-más tartalmat kívánunk megmutatni.
179 Engedélyezett-tiltott kijelölők. Az :enabled álosztály szelektor segítségével kijelölhetünk bármilyen engedélyezett HTML elemet (amelyek rendelkezik enabled és disabled állapotokkal), de elsősorban űrlapelemek kijelölésére szolgál.
180 Kijelölt elem kijelölése Nagyon hasznos! A felhasználó által kijelölt tartalom helyezhető segítségével a képernyőre.
181 Kijelölt tartalom kijelölő A honlap felhasználó által kijelölt területe böngészőnként másként jelenik meg. Az űrlapelemek címkéi esetén kimondottan zavaró lehet lehet a háttér színének változása.
182 Nem kijelölő Segítségével kijelölhetjük azokat a HTML elemeket, amelyek valamely tulajdonsággal nem rendelkeznek.
183 Üres elem kijelölő Az üres elemek kiválasztására szolgál. Ha egy elem nyitó és záró címkéje között akár egy szóköz is áll, akkor az már nem lesz kiválasztva.
184 Gyökér elem kijelölő A gyökér elem kiválasztására szolgál. A HTML5 dokumentumok gyökéreleme a html.
185 N-edik gyermek típuskijelölő Álelem kijelölő, amely kiválasztja az adott szülőelem n-edik megadott típusú gyermekelemét, az első adott típusú elemtől kezdve a számlálást.
186 Hátulról N-edik gyermek típuskijelölő Álelem kijelölő, amely kiválasztja az adott szülőelem n-edik, megadott típusú gyermekelemét, az utolsó elemtől kezdve a számlálást.
187 Hátulról N-edik kijelölő Álelem kijelölő, amely kiválasztja az adott szülőelem n-edik gyermekelemét, az utolsó elemtől kezdve a számlálást.
188 N-edik gyermek kijelölő Álelem kijelölő, amely kiválasztja az adott szülőelem n-edik gyermekelemét. Az n lehet szám, kulcsszó vagy képlet.
189 Első sor kijelölő Álelem kijelölő, amely kiválasztja bekezdések első sorait.
190 Utolsó gyermek kijelölő Kiválasztja azokat az elemeket, amelyek szülő elemeik utolsó gyermekei.
191 Első betű kijelölő Álelem kijelölő, amely kiválasztja a bekezdések első betűit.
192 Első gyermek típuskijelölő Kiválasztja azokat az elemeket, amelyek szülő elemeik első, adott típusú gyermekei.
193 Utolsó gyermek típuskijelölő Kiválasztja azokat az elemeket, amelyek szülő elemeik utolsó, adott típusú gyermekei.
194 Jellemzőérték-eleje kijelölő Az összes olyan Elem típusú elemre vonatkozik, amelynél adott jellemző elején szerepel a kijelölőben megadott érték.
195 Jellemzőérték-részlete kijelölő Az összes olyan Elem típusú elemre vonatkozik, amelynél az adott jellemzőben bárhol szerepel a kijelölőben megadott érték. Nincs szükség teljes egyezésre.
196 Egyke gyermek típuskijelölő Kiválasztja azokat az elemeket, amelyek szülő egyetlen, adott típusú gyermekei.
197 Egyke gyermek kijelölő Kiválasztja azokat az elemeket, amelyek a szülő elemek egyetlen gyermekei.
198 Nyelvkód kijelölő A :lang() kiválasztó segítségével, a nyelv jellemző értéke alapján választhatjuk ki a HTML elemeket.
199 CSS3 fontok
200 Fontok, fontkészletek Az elektronikus dokumentumokban használt betűtípusok helyes megválasztásával az esztétikus megjelenésen túl, áttekinthetővé tehetjük weboldalunkat, kiemelve a legfontosabb információkat.
201 Általános fontcsaládok ( generic family ) A böngészők mindig megpróbálják a stíluslapon megadott betűtípusokat használni a megjelenítéshez, de nem mindig sikerül. Előfordul, hogy a felhasználó számítógépén betűtípus nem elérhető. Ekkor a böngésző egy hasonlót igyekszi
202 Specifikus fontcsaládok ( font family ) Egy fontcsalád ( font-family ) általában egy betűtípusból és annak változataiból ( dőlt, félkövér..) áll.
203 Web biztos fontok Néhány gyakran használt betűtípis deklarációban használt fontcsalád kombináció következik, amelyek jó eséllyel minden böngészőben megfelelő eredményhez vezetnek.
204 Google web fontok A Google böngészőfüggetlen szabad hozzáférésű biztosít webfejlesztők számára. Több mint 600 betűtípus közül választhatunk.
205 Relatív hosszmértékegységek A képpont mérete a megjelenítő eszköztől (pl. monitor) függ....
206 Abszolút hosszmértékegységek Az abszolút mértékegységek elvileg mindig ugyanakkora méretet jelentenek.
207 Fontméret A betűméret (font-size) tulajdonság értéke megadható abszolút vagy relatív mértékegységekkel
208 Font stílusok A fontstílus lehet normál vagy dőlt. A megdöntött változatot érdemes a fontcsalád fontkészletéből választani.
209 Font variációk A Kiskapitális fontvariáció használata esetén minden betű formailag nagy lesz, csak a mérete változik.
210 A betűk vastagsága A betűk vastagságát a font-weight tulajdonság segítségével adhatjuk meg.
211 A font összevont tulajdonság A font tulajdonság segítségével egy lépésben (összevontan) megadhatók a fontok tulajdonságai.
212 CSS3 szövegformázás
213 A szöveg színe Az egyes karakterek színe mindig megegyezik az őt tartalmazó HTML elemre érvényes színnel.
214 A szöveg háttérszíne Az egyes karakterek háttérszíne mindig megegyezik az őt tartalmazó HTML elemre érvényes háttérszínnel.
215 Szövegigazítás A szövegszerkesztőknél megszokott módon a szöveges tartalmat, a szöveget tartalmazó elemen belül igazíthatjuk balra, jobbra, középre. Használhatjuk továbbá a sorkizárt formát is.
216 Szövegdekoráció A text-decoration tulajdonság segítségével a szöveget aláhúzhatjuk, fölé húzhatjuk vagy áthúzhatjuk. A tulajdonság blink értékénél pedig szövegünk villogni fog.
217 Kisbetű-nagybetű átalakítás A text-transform tulajdonság segítségével nagybetűsre alakíthatjuk a szöveg minden, vagy szavai első betűit. Kisbetűsre alakíthatjuk valamennyi betűjét.
218 Szövegbehúzás A text-indent ( szöveg behúzása ) tulajdonság segítségével a bekezdések első sorának behúzását állíthatjuk be.
219 Betűköz beállítása A letter-spacing tulajdonság értékével növelhető vagy csökkenthető a szöveg karakterei közötti térköz.
220 Sormagasság beállítása A sormagasság a line-height tulajdonságnál, a betűmérethez viszonyított relatív értékkel és pixelben is megadható.
221 Szóköz beállítása A word-spacing tulajdonság növelhető vagy csökkenthető a szóköz.
222 A szöveg árnyéka A text-shadow tulajdonság segítségével a szöveg árnyékát állíthatjuk be.
223 Függőleges igazítás A vertical-align tulajdonság segítségével sorközi elemeknek a sorban elfoglalt függőleges pozíciója adható meg.
224 Elválasztó karakterek kezelése A white-space tulajdonság értékével megadható, hogy a böngésző miként kezelje a forrásszövegben található szóköz, sortörés és tabulátor karaktereket.
225 Szótörés, szóelválasztás A word-wrap tulajdonság értékével megadható, hogy a böngésző miként törheti meg a hosszú szavakat.
226 CSS3 doboz modell
227 Doboz modell Az elem teljes szélessége = bal külső margó + bal szegély + bal belső margó + tartalom szélessége + jobb belső margó + jobb szegély + jobb külső margó
228 Bal és jobb margók, szegélyek Bármelyik margó vagy szegély vastagsága lehet 0, ekkor a mértékegységet nem kötelező megadni.
229 Alsó és felső margók, szegélyek Típushiba: Sokan az elem teljes magasságát a height jellemző értékével azonosítják.
230 Minimum és maximum értékek min-width = az elem legkisebb szélessége, aminél nem lehet keskenyebb....
231 CSS3 hátér
232 Háttérszín Valamennyi HTML elemnek külön-külön beállíthatjuk a háttérszínét. Alapesetben a háttér teljesen átlátszó.
233 Háttérkép Egy HTML elem háttereként képet is lehet használni. Arra mindenképpen ügyelni kell, hogy a háttérkép előtt megjelenő szöveg olvasható maradjon.
234 Háttérkép ismétlése Ha a háttérkép mérete kisebb mint a rendelkezésre álló terület, akkor a böngészők alapértelmezetten vízszintesen és függőlegesen egyaránt addig ismétlik a kép megjelenítését, amíg a rendelkezésre álló terület egészét le nem fe
235 A háttér pozíciója A background-position tulajdonság segítségével megadhatjuk a háttérkép helyzetét. A pozíció megadása történhet kulcsszavakkal, százalékban vagy hosszmértékegységgel megadva az eltolás mértékét.
236 Háttérpozíció referenciapont A background-origin tulajdonság segítségével megadhatjuk, hogy mihez viszonyítva határozza meg a böngésző a háttérkép helyzetét.
237 A háttér görgetése A background-attachment tulajdonság segítségével megadhatjuk, hogy a háttérkép az oldal görgetése esetén az oldallal együtt mozogjon, vagy mindig ugyanott jelenjen meg.
238 A háttér területe A background-clip tulajdonság segítségével megadhatjuk, hogy a háttérkép vagy háttérkép egy doboz mely területén helyezkedjen el.
239 A háttér mérete A background-size tulajdonság segítségével megadhatjuk, hogy a háttérkép milyen méretben jelenjen meg az oldalon.
240 A háttér beállítása gyorsírással A háttér beállításait gyorsírással is megadhatjuk, a következő sorrendben: background: background-image background-position / background-size background-repeat background-attachment background-clip background-origin background-color,
241 A színátmenet ( gradient ) A színátmenetek segítségével a HTML elemek hátterénél 3D hatásokat hozhatunk létre. Kettő szín használata esetén a kezdő és végérték között a böngésző egyenletes átmenetet biztosít.
242 Lineáris átmenet iránya A gradiens-vonal iránya megadható a függőleges tengellyel bezárt szögével.
243 Több lineáris színátmenet Kettőnél több színt is megadhatunk. Ha a közbenső értékekhez nem nem rendelünk pozíciót, akkor arányosan lesznek elhelyezve. (Pl. A harmadik középre kerül.)
244 Lineáris színátmenet és átlátszóság Ha a színátmenet definiálásakor a színek megadására az rgba( ) alakot használjuk, akkor a háttér egyes részei áttetszővé tehetők.
245 Lineáris színátmenet ismétlése A repeating-linear-gradient() függvény használatával az átmenetek periodikusan ismétlődnek.
246 Sugárirányú színátmenetek Sugárirányú színátmenetnél egy pontból kiindulva ellipszis vagy kör alakban jön létre az átmenet.
247 Sugárirányú színátmenetek pozíciója A sugárirányú színátmenet középpontjának pozíciója megadható kulcsszóval, hosszméretben vagy százalékban.
248 Sugárirányú színátmenetek mérete A befoglaló kör vagy ellipszis méretét kulcsszavakkal adhatjuk meg.
249 CSS3 szegélyek
250 A szegélystílusok A szegély stílusa a border-style tulajdonság segítségével állítható be.
251 Szegélystílus megadása oldalanként A szegély stílusa oldalanként eltérő lehet.
252 Szegélystílus megadása oldalanként 2 Egyetlen stílusdeklarációban is lehetőségünk nyílik valamennyi oldalhoz külön stílust rendelni, ha a 4 értéket szóközzel elválasztva felsoroljuk.
253 Szegélyszín A szegélyek színét a border-color tulajdonság segítségével állíthatjuk be.
254 Szegélyszín oldalanként A szegély színe egy HTML elem mind a négy oldalán eltérő lehet.
255 Szegélyszín oldalanként 2 Egyetlen stílusdeklarációban is lehetőségünk nyílik valamennyi oldalhoz külön színt rendelni, ha a 4 színt szóközzel elválasztva felsoroljuk.
256 A szegély szélessége A szegélyek szélességét a border-width tulajdonság segítségével állíthatjuk be.
257 A szegély szélessége oldalanként A szegélyek szélességét mind a 4 oldalra külön-külön is beállíthatjuk.
258 A szegély szélessége oldalanként 2 A szegély szélessége beállítható a HTML elem mind a négy oldalán egy stílusdeklarációval.
259 A szegély jellemzői oldalak szerint Minden oldalra összevontan is megadhatók a szegélyek jellemzői.
260 A szegély jellemzői gyorsírással Minden oldalra összevontan is megadhatók a szegélyek jellemzői.
261 A szegélyek lekerekítése A szegélyek sarkai a border-radius tulajdonság segítségével lekerekíthető. Paraméterként a szegély külső szélének sugarát kell megadni.
262 A lekerekítés százalékos értékkel Ha egy négyzet esetén a kerekítés sugarát százalékban adjuk meg, akkor a 100% megegyezik a négyzet egy oldalának hosszával. 50% beállítása esetén kör alakú lesz a szegély.
263 A szegélyek lekerekítése sarkonként A szegélyek lekerekítésének mértéke sarkonként is megadhatóak.
264 A szegélyek lekerekítése sarkonként 2 A bal felső saroktól, az óramutató járásával egyező irányba haladva adhatjuk megy egymás után az egyes sarkok sugarát.
265 Szegély kerekítése ellipszissel Már a százalékos értékadás esetén is, ha az elem magassága vagy szélessége különbözött, akkor két különböző sugár által meghatározott ellipszisek alkották a sarkokat.
266 Szegély kerekítése ellipszissel 2 A sarkok sugarainak beállítása (vízszintes/függőleges)
267 Alakzatok készítése szegélyekkel A szegélyek segítségével lehetőség nyílik szabályos és szabálytalan geometriai alakzatok készítésére csupán css stílusdeklarációk felhasználásával.
268 A doboz árnyéka A szövegekhez hasonlóan a dobozokhoz is rendelhetünk egy vagy több árnyékot.
269 Több árnyék létrehozása Vesszővel elválasztva több árnyék jellemzői is megadhatók.
270 Képes szegély A szegélyek egy-egy kép felhasználásával is megvalósíthatók.
271 CSS3 margók
272 A belső margók A HTML elmek szegélye és belső tartalma közötti távolságot a padding tulajdonság segítségével állíthatjuk be.
273 A külső margó megadása oldalanként Egy HTML elem külső margójának szélessége mind négy oldalán különböző lehet.
274 A külső margó megadása oldalanként 2 Egy HTML elem külső margójának szélessége mind négy oldalán különböző lehet. A 4 értéket szóközzel elválasztva felsorolhatjuk.
275 A külső margók A külső margó segítségével egy blokk-elemnek, az őt befoglaló és körülvélő elemekhez viszonyított helyzete adható meg.
276 A belső margó megadása oldalanként Egy HTML elem belső margójának szélessége mind négy oldalán különböző lehet.
277 A belső margó megadása oldalanként 2 Egy HTML elem belső margójának szélessége mind négy oldalán különböző lehet. A 4 értéket szóközzel elválasztva felsorolhatjuk.
278 CSS3 körvonal
279 Körvonalak stílusa A körvonalak stílusa az outline-style tulajdonság segítségével állítható be.
280 Körvonalak szélessége A körvonalak szélességét a outline-width tulajdonság segítségével állíthatjuk be.
281 Körvonalak színe A körvonalak színét a outline-color tulajdonság segítségével állíthatjuk be.
282 CSS3 pozicionálás
283 A helyzetmegadás fajtái Statikus helyzetmegadás (static), Relatív helyzetmegadás (relative), Független helyzetmegadás (absolute), Rögzített helyzetmegadás (fixed)
284 Statikus helyzetmegadás A statikus helyzetmegadás az alapértelmezett. A HTML elem a szövegfolyamban az eredeti helyén marad.
285 Relatív helyzetmegadás A HTML elemet egy általunk megadott értékkel eltolhatunk az eredeti helyzetéhez képest, de továbbra is a szövegfolyamban marad.
286 Független helyzetmegadás (absolute) A HTML elem helyzete teljesen független a szövegfolyamtól. Helyzetét azon tárolótömbjéhez viszonyítva adhatjuk meg, amely a dokumentumfán az utolsó relatív helyzetmegadású őse az elemnek.
287 Abszolút pozíciónálású oszlopok Az oldal szerkezetének kialakításánál is gyakran használjuk a független (absolute) helyzetmegadást.
288 Z-index avagy a 3. dimenzió A láthatósági sorrend módosítható a z-index tulajdonság segítségével. A z-index növelésével adott elem (a z-tengely mentén) közelíthető a látogató felé.
289 A z-index dinamikus módosítása A :hover dinamikus álosztály kijelölő segítségével a z-index növelése útján előtérbe hozhatjuk azokat a HTML elemeket, amelyek fölött az egérkurzor áll.
290 Rögzített helyzetmegadás (fixed) A böngészőablak látható részéhez rögzített lesz a HTML elem, és így mindig látható marad. A független helyzetmegadás speciális esete, ahol a képernyő a viszonyítási pont.
291 A túlnyúlás kezelése (overflow) Ha egy tárolóelem méretét meghaladja a benne elhelyezett tartalom, akkor a kilógó területek kezelésének módját, az overflow tulajdonság segítségével adhatjuk meg.
292 A vízszintes túlnyúlás kezelése A kilógó területek kezelésének módját, vízszintes irányban az overflow-x tulajdonság segítségével adhatjuk meg.
293 A függőleges túlnyúlás kezelése A kilógó területek kezelésének módját, függőleges irányban az overflow-x tulajdonság segítségével adhatjuk meg.
294 Látható terület kijelölése (clip) A clip tulajdonság segítségével kijelölhető egy HTML elem megjelenítendő területe.
295 Megjelenítés módja (display tulajdonság ) A display tulajdonság határozza meg a HTML elemhez generált doboz típusát. Ezen keresztül pedig megjelenítésének módját.
296 Láthatóság (visibility) A visibility visibility tulajdonság segítségével egy HTML elem elrejthető vagy láthatóvá tehető. Az elrejtett elem elem helye megmarad a weboldal elrendezésében.
297 Eltolás mértékének megadása A top: tulajdonság segítségével a helyzetmegadásos elemek margójának felső külső széle és tárolótömbjének felső széle közötti távolságot adhatjuk meg....
298 CSS3 úsztatás
299 Úsztatás (float) tulajdonság A float ( úsztatás ) tulajdonság lehetővé teszi, hogy egy elemet az azt tartalmazó tárolóelem (szülő elem) jobb vagy bal széléhez igazítsunk ( úsztassunk ).
300 Úsztatás megszüntetése Az úsztatás a clear ( törlés, mezőkiürítés) tulajdonsággal megszüntető.
301 CSS3 táblázatok
302 Táblaszegélyek A table, th és td HTML elemekhez rendelhetünk szegélyt a border tulajdonság segítségével.
303 Táblaszegélyek összevonása-elválasztása A szegélyek közötti távolság a border-spacing tulajdonsággal adható meg.
304 A szegélyek közötti távolság A border-collapse ( szegélyek összevonása ) tulajdonsággal a táblázat egyes elemeinek körvonalai elválaszthatók vagy összevonhatók.
305 A táblázat címének helye A caption-side tulajdonság segítségével megadható, hogy a táblázat címe a táblázat alatt vagy felett helyezkedjen el.
306 Cellatartalom függőleges igazítása A szövegformázásnál megismert vertical-align tulajdonság segítségével lehet a táblázat celláinak tartalmát is függőlegesen pozicionálni.
307 Cellatartalom vízszintes igazítása A szövegformázásnál megismert text-align tulajdonság segítségével lehet a táblázat celláinak tartalmát is vízszintesen pozícionálni.
308 A táblázat háttere Alapértelmezetten a táblázatok minden eleme (cellák, sorok, sorcsoportok, oszlopok és oszlopcsoportok) átlátszó, így az oldal vagy a befogadó elem háttere látszik mögötte.
309 A táblázat csíkozása Áttekinthetőbbé, könnyebben átláthatóvá válik egy táblázat, ha minden második vagy harmadik sorának háttere eltér a többitől. Ekkor az eltérő színű sorok vezetik a szemet.
310 Üres cellák kezelése A táblázat üres celláinak megjelenítése a empty-cells tulajdonság segítségével szabályozható.
311 A táblázat elrendezési módja A táblázat elrendezési módját a table-layout tulajdonsággal lehet beállítani.
312 CSS3 linkek
313 Linkek állapottól függő megjelenítése Változtathatjuk egy-egy hivatkozás megjelenítési formáját különböző állapotaiban.
314 Inline link-gombok A szövegben elhelyezett linkeket (a elemeket) osztályba sorolva közösen formázhatjuk. Beállíthatjuk a háttérszínt, feliratszínt. Adhatunk hozzá keretet, árnyékolhatjuk és lekerekíthetjük sarkait.
315 Fájlformátum dinamikus jelölése A jellemzőérték-vége kijelölő felhasználásával automatikusan a link href tuladonságában megadott fálj típusától függő képet illeszthetünk a linkfelirat elé a :before álelem vagy mögé az :after álelem segítségével.
316 Linkgomb háttérképekkel Az :a:link és :a:visited álelem kijelölőhöz egy közös, plusz az :a:hover és az :a:active álelem kijelölőkhöz egy-egy külön háttérképet rendelve egyszerűen készíthetünk linkből nyomógombot.
317 CSS3 linkgomb (LinkButton) készítése Csupán CSS3 stílusdeklarációk felhasználásával is készíthetünk egy linkből nyomógombot.
318 Linkbe ágyazott kép Hasznos lehet, ha a látogató egy-egy termék képére kattintva is eljuthat a terméket bemutató oldalra.
319 Linkben kép és link-felirat Ha a kép nevét is megjelenítjük, és a felhasználó akár a képre, akár a link-feliratra kattintva eljusson a linkhez tartozó oldalra, akkor az egyik lehetőség az általános tárolóelemek (div-ek) használata.
320 Linkgomb nyújtható háttérképpel A link-felirat hosszától függően változó szélességű nyomógombokra lehet szükség. Ekkor nem érdemes a képeket minden méretben elkészíteni. Csak a legnagyobb szélességhez tartozó képeket készítjük el.
321 CSS3 listák
322 Képes listajelek A list-style-image tulajdonsággal egy saját kép alkalmazható felsorolásjelként.
323 Számozás A számformátumok beállítása.
324 Betűk használata listajelként A betűformátumok beállítása listajelekben.
325 Karakterjelek használata listajelként Grafikus karakterek (kör, négyzet) beállítása listajelekben.
326 A felsorolásjel helyzete A felsorolásjel helyzetének beállítása. (list-style-position)
327 Beágyazott számozás A felsorolás minden szintjéhez egy-egy számlálót rendelve több szintű számozással jeleníthetjük meg, a nyomtatott könyvek tartalomjegyzékében megszokott módon.
328 Lista használata menüben Az a elemek formázásával hozhatunk létre állandó szélességű és magasságú, tetszetős hátterű menüpontokat. Az li a: {display: block,} beállítás mellett.
329 Inline lista (Menüsor) Az előző oldalon megismert menü menüsorrá alakítható, ha a listaelemeket inline elemmé alakítjuk a li {display:inline,} stílusdeklarációval.
330 CSS3 transzformációk
331 Elforgatás A CSS3 lehetővé teszi a HTML elemek középpontjuk körül történő elforgatását a transform tulajdonság segítségével állíthatjuk be.
332 Elforgatás az X tengely mentén A transform tulajdonság segítségével a HTML elemek az X tengely körül is elforgathatóak. Az elforgatás szögét kell csupán megadni.
333 Elforgatás az Y tengely mentén A transform tulajdonság segítségével a HTML elemek az Y tengely körül is elforgathatóak. Az elforgatás szögét kell csupán megadni.
334 Elforgatás a Z tengely mentén A transform tulajdonság segítségével a HTML elemek az Z tengely körül is elforgathatóak. Az elforgatás szögét kell csupán megadni.
335 Elforgatás az 3D tengely mentén A transform tulajdonság segítségével a HTML elemek az térben megadott tengely körül is elforgathatóak. Az x, y és z jellemzők a tengely irányát adják meg. A negyedik érték pedig az elforgatás mértékét.
336 Vízszintes eltolás A translateX() függvény pozitív érték esetén jobbra, negatív szám esetén balra tolhatja a HTML elemet.
337 Függőleges eltolás A translateY() függvény pozitív érték esetén lefelé, negatív szám esetén felfelé tolhatja a HTML elemet.
338 Közelítés-távolítás A translateY() függvény pozitív érték esetén lefelé, negatív szám esetén felfelé tolhatja a HTML elemet.
339 3D eltolás A translate3d() függvény segítségével egy lépésben megadhatók az eltolás x, y és z irányú összetevőinek értékei.
340 Vízszintes átméretezés A scaleX() függvénnyel vízszintesen nyújthatjuk vagy zsugoríthatjuk a HTML elemet.
341 Függőleges átméretezés A scaleY() függvénnyel függőlegesen nyújthatjuk vagy zsugoríthatjuk a HTML elemet.
342 Vízszintes és függőleges átméretezés A scale() függvénnyel vízszintesen és függőlegesen nyújthatjuk vagy zsugoríthatjuk a HTML elemet.
343 Vízszintes döntés A skewX() függvénnyel adhatjuk meg a megdöntés szögét, az x tengely mentén deg-ben.
344 Függőleges döntés A skewY() függvénnyel adhatjuk meg a megdöntés szögét, az Y tengely mentén deg-ben.
345 Vízszintes és függőleges döntés A vízszintes és függőleges irányú megdöntés szögei egy lépésben megadhatók a skew() függvénnyel deg-ben.
346 A transzformáció középpontja A transzformáció középpontja alapértelmezetten a HTML elem középpontjával esik egybe, de ettől eltérhetünk a transform-origin tulajdonság felhasználásával.
347 Univerzális kocka készítése CSS3-al A HTML weboldalunk elemeiből csupán CSS3 stílusdeklarációk segítségével 3 dimenziós kockát építhetünk a következő módon.
348 CSS3 animáció
349 CSS3 animációs lehetőségei A CSS3 lehetővé teszi, hogy a stílusbeállítások változtatása fokozatosan menjen végbe.
350 CSS Stílusbeállítások változtatása A :hover vagy :active álosztály kijelölők felhasználásával módosíthatjuk a HTML elemek css beállításait abban az esetben, ha az egérkurzor a az elem fölé ér, vagy a felhasználó megnyomja a bal egérgombot, az egérkurzorral az elem felet
351 CSS3 átmenetek létrehozása A transition-property jellemző segítségével adható meg, hogy mely CSS tulajdonság(ok) változásait kívánjuk folyamatos átmenetté alakítani.
352 CSS3 átmenetek változó sebességgel A transition-timing-function tulajdonság segítségével adható meg, a CSS tulajdonság(ok) változásainak karakterisztikája.
353 CSS3 változás késleltetése A transition-delay tulajdonság segítségével adható meg, a CSS tulajdonság(ok) változásainak késleltetése. Hány másodperccel kezdődjön később az átmenet.
354 CSS3 animációk kulcskockái Kötelező a változó CSS tulajdonságok kezdeti és utolsó értékének megadása. Az animáció ezen értékek folyamatos változása révén jön létre.
355 CSS3 animáció létrehozása CSS3 animációk esetén kötelező megadni az animáció nevét, amely meg kell egyezzen a @keyframes deklarációban megadott névvel. Ez teszi lehetővé a kulcskockák és az animáció összerendelését.
356 CSS3 animáció ismétlése Az animation-iteration-count tulajdonság segítségével megadható, hogy hányszor ismétlődjön meg az animáció
357 CSS3 animáció késleltetése Az animation-delay tulajdonság segítségével adott idővel késleltethető az animáció elindulása.
358 CSS3 animáció iránya Az animation-direction tulajdonság segítségével megadható, hogy ismételt lejátszás esetén honnan kezdődjön és milyen irányba haladjon a lejátszás.
359 CSS3 animáció időkarakterisztikája Az animation-timing-function tulajdonság segítségével adható meg, a CSS tulajdonság(ok) változásainak karakterisztikája.
360 Webáruház sablonok készítése

361 Bevezetés, Alapok
362 Bevezetés A Webáruház sablonok készítése fejezetben megismerjük, hogyan lehet a HTML5 és CSS3 ismereteinket a gyakorlatban is felhasználni.
363 Webáruház optimalizálása mobil eszközökre Készíthetünk egyetlen honlapot, amelynek megjelenítését CSS3 segítségével igazítjuk a megjelenítő eszközhöz illetve annak felbontásához.
364 Automatikusan változó szélességű weboldal Nagy felbontású monitor esetén kihasználja a rendelkezésre álló helyet. Lehetőséget biztosít a mobil eszközökön is jól használható stíluslapok készítésére.
365 A honlap mérete Alapvetően két lehetőség közül választhatunk 1. Fix szélességű weboldalt készítünk 2. Automatikusan változó szélességű weboldalt készítünk
366 Fix szélességű honlapok Egyszerűen készíthető böngésző és felbontásfüggetlen (ez utóbbi nem feltétlen előny) weboldal.
367 Webáruház szerkezetének kialakítása
368 Úsztatott, állandó méretű weboldal Csupán úsztatással ritkán alakítjuk ki egy-egy weboldal szerkezetét. Kétségtelenül egyszerű megoldás, és ezért is használtuk a HTML5 weboldalak készítése fejezetben.
369 Úsztatott, változó méretű weboldal A negyedik példában a lábléc előtt megszüntetjük az úsztatást, és a teljes képernyő háttérszínét a tartalomterület háttérszínével azonosra állítjuk.
370 Abszolút poícionálású 2 oszlopos honlap Kétoszlopos abszolút pozicionálású honlap esetén a bal oldali oszlop szélességét kell csupán megadni. A jobboldali automatikusan kitölti a rendelkezésre álló területet.
371 Webáruház fejléce
372 Fejlécvariáció 1 Webáruházunk logóját egy div-be ágyazva helyezzük el az fejlécben, balra úsztatva. Az áruház nevét Google font felhasználásával dobjuk fel.
373 Webáruház menüsor készítés
374 Listaszerkezet kialakítása Első lépésben elhelyezzük a linkeket a menüsorban, mégpedig lista szerkezetben. Csupán HTML kód változik.
375 Felsorolás formázása A 2. példakódban sorközi elemmé alakítjuk a listaelemeket. Így már egy sorban középre igazítva jelennek meg.
376 Link elem csinosítása A link elemet a menüben inline-block elemként formázzuk. Ízlés szerint kap szegélyt és árnyékot.
377 CSS3 legördülő menü készítés
378 CSS3 legördülő webshop menü 1 A következő oldalon az előző fejezetben elkészített menüsort alakítjuk legördülő menüvé. Mind a HTML, mind pedig a CSS3 kód esetén csak az előzőhöz képesti különbségeket vesszük végig.
379 CSS3 legördülő webshop menü készítése Annak érdekében, hogy áttekinthető legyen az elemek kiválasztása a felső szinten elhelyezkedő listát egyedi azonosítóval látjuk el...
380 Többszintű legördülő menü
381 Többszintű CSS3 legördülő webshop menü A következő oldalon az előző fejezetben elkészített legördülő menüsort alakítjuk többszintűvé.
382 Többszintű CSS3 legördülő menü elkészítése Három lépésben végezzük el az átalakítást.
383 Webshop menü készítés
384 Webshop menü készítés Háromszintű menüvariációt készítünk webáruházunkhoz. Most is az előző fejezetben elkészített HTML és CSS kódokat folytatjuk.
385 CSS3 webshop menü készítése 1 A HTML kódot kiegészítjük egy újabb lista szinttel. Beállítjuk menüdoboz jellemzőit, és eltüntetjük a listajeleket.
386 Webshop menünk formázása Beállítjuk menülista három szintjén található link elemek tulajdonságait.
387 Webshop harmonika menü készítés
388 Webshop menü lenyitható menüpontokkal A nagy számú almenüponttal rendelkező főmenüpontokat tesszük lenyithatóvá. A termékek alkategóriáihoz vezető linkeket tesszük elrejthetővé.
389 Webshop menü HTML kódjának bővítése Az elrejtésre váró almenü előtt elhelyezünk egy kiválasztónégyzetet. Illesztünk hozzá egy label elemet is.
390 Webshop menü CSS kódjának bővítése Ha egy kiválasztó négyzet nincs kiválasztva, akkor eltüntejük a mögötte álló ul elemet, az alatta lévő menüpontokkal együtt.
391 Képtárak készítése
392 Webáruház 1. képtár A következő oldalakon egy nyújtható képtárat készítünk, amely webáruházunk tartalmi területére illeszthető.
393 Kapcsolatfelvételi űrlap
394 Kapcsolatfelvételi űrlap 1 A következő oldalakon egy kapcsolatfelvételi űrlapot készítünk, amely webáruházunk tartalmi területére illeszthető.
395 Az űrlap HTML kódja A felhasználóknak segít a placeholder tulajdonságnál megadott szöveg, az elvárt formátum begépelésében mindaddig, amíg el nem kezdi a gépelést. Ekkor eltűnik. Éppen ezért a segítséget span-ben is elhelyezzük, amit viszont csak akkor fo
396 Méretezés és pozicionálás Elrendezzük űrlapunk elemeit.
397 Képes nyomógomb kialakítása A linkek vizsgálatánál már megtanultunk háttérképek segítségével nyomógombot készíteni. Most ugyanúgy járunk el, de egy input nyomógomb esetén.
398 Elemcsoportok csinosítása A CSS3 lehetőségeit kihasználva felöltöztetjük elemcsoportjainkat.
399 Elemek csinosítása Beállítjuk a beviteli elemek kereteit, árnyékait és sarkaik kerekítését.
400 Placeholder kezelése A placeholder megjelenítése böngészőfüggő. Érdemes jellemzőit beállítani, így jobba be is simul weboldalunkba.
401 Körvonal kezelése Saját kezünkbe vesszük az input elemek körvonalának kezelését.
402 Hibakezelés Ikonok segítségével jelezzük a felhasználó számára, hogy mely elemeket kötelező kitöltenie, és éppen hol tart a kitöltésben.
403 Weblap készítés PHP5-el

404 A PHP alapjai
405 PHP értelmező működése A PHP értelmező a szerveren fut. A .php kiterjesztéssel rendelkező fájlok meghívásakor lép működésbe.
406 PHP script használata PHP szkripteket illeszthetünk a HTML dokumentum bármely pontjára. Akár a dokumentumfej (head), akár a dokumentumtörzs (body) egyes elemeit vagy egészét előállíthatjuk PHP szkriptek segítségével.
407 Nyitó és záró címkék A PHP kódot HTML dokumentumokba beágyazva fogjuk használni. Az értelmező program a php nyitó és záró címkék közötti utasításokat értelmezi és végrehajtja.
408 A PHP változók és adattípusok
409 A változó és változónév A változók értékek (számértékek, karakterláncok..) tárolására szolgálnak. Értékük megváltoztatható.
410 PHP változók létrehozása (deklarálása) A PHP gyengén típusos nyelv, de lehetővé teszi a változó típusának ellenőrzését és beállítását.
411 PHP adattípusok A PHP változók típusát meghatározza az értékül adott adat típusa. Összesen 8 adattípust különböztetünk meg, amelyeket 3 csoportba sorolhatunk.
412 PHP változótípus változása Egy változó típusa a program futása során is változhat. Pl. Ha egy művelet eredménye valós szám az integer típus float –ra változik.
413 Indexelt tömbök Az indexelt tömb minden eleméhez egy numerikus azonosító tartozik. Ennek segítségével határozható meg, hogy éppen az első, második… vagy n-ik tömbelemmel kívánunk egy műveletet végrehajtani.
414 Karakterláncok (Stringek) Stringeket szimpla vagy dupla idézőjelek használatával hozhatunk létre.
415 Asszociatív tömbök Az asszociatív tömb minden tömbindexéhez egy nevet rendelünk. A neveket kulcsként használhatjuk, s értékeket rendelhetünk a kulcsokhoz.
416 A PHP operátorok
417 A műveletis sorrend Az operátorok precedenciája azt határozza meg, hogy milyen sorrendben történjen az egyes műveletek végrehajtása.
418 Aritmetikai operátorok Aritmetikai operátorok teszik lehetővé a matematika alapműveleteinek elvégezését. (Összeadás, kivonás, szorzás, osztás.)
419 Értékadó operátorok A PHP nyelv értékadó operátorai.
420 Összehasonlító operátorok Az összehasonlító operátorok segítségével két érték hasonlítható össze. Különböző típusú változókat is összehasonlíthatunk.
421 Növelő csökkentő operátorok A PHP a C nyelvhez hasonlóan külön operátorokat biztosít a változók növeléséhez (inkrementálás) és csökkentéséhez (dekrementálás).
422 Logikai operátorok A logikai operátorok segítségével logikai típusú változókon végezhetünk logikai műveleteket.
423 Bitorientált operátorok A bitorientált operátorok lehetővé teszik egész típusú számok bitjeinek manipulálását, 1-be vagy 0-ba állítását.
424 A PHP konstansok
425 Konstansok Konstansok értékét csak egyszer lehet megadni egy PHP programban. Értékük sohasem módosítható.
426 Beépített konstansok Néhány előre deklarált PHP konstans.
427 A PHP elágazások
428 Az IF szerkezet Az if kulcsszót követő zárójelben megadott feltétel teljesülése esetén, végrehajtásra kerül az azt követő kapcsos zárójelben elhelyezett kódblokk.
429 Az else záradék Az if utasításban szereplő feltétel esetén végrehajtandó kódblokk mögé az else kulcsszót, és azt követően kapcsos zárójelek között egy újabb kódblokkot írhatunk.
430 Az elseif záradék Ha több feltétel közül egy-egy teljesülése esetén, külön kódot szeretnénk végrehajtani, akkor használhatjuk az elseif szerkezetet.
431 A switch szerkezet Ha egy változó lehetséges értékeihez más-más PHP kódot kívánunk rendelni, akkor a switch utasítást célszerű használni.
432 Alternatív szintaxis A PHP nyelvben egyes vezérlési szerkezetek esetén ( if, while, for, foreach, és switch ) alternatív szintaxist is használhatunk.
433 A PHP ciklusok
434 For ciklus Akkor használjuk, ha előre tudjuk, hányszor kell a kódblokkot végrehajtani.
435 While ciklus Amíg a feltétel igaz, addig a ciklusmag (kódblokk) újra és újra végrehajtásra kerül.
436 While alternatív szintaxisa While alternatív szintaxisánál a nyitó utasítászárójelet ({) kettőspont, a zárót (}) pedig endwhile kúlcsszó helyettesíti.
437 Do-while ciklus Hátul tesztelő ciklus. A ciklusmag egyszer mindig végrehajtásra kerül.
438 Foreach ciklus A leggyorsabb megoldást kínálja ismeretlen méretű tömbök kezelésére.
439 Kilépés ciklusból A break utasítás segítségével kiléphetünk az aktuális for, foreach, while, do-while ciklusból vagy switch szerkezetből.
440 A ciklusmag átugrása A continue segítségével átugorhatjuk a ciklusmag continue után álló utasításait. A kód végrehajtása a következő iterációval (a ciklusmag következő végrehajtásával) folytatódik.
441 A PHP függvények
442 A függvények A függvények olyan kódrészletek amelyek akkor kerülnek végrehajtásra, ha a programkódból meghívjuk őket.
443 Függvények készítése A függvényeket a function kulcsszóval vezetjük be. Egy függvényt a neve alapján azonosít az értelmező.
444 A függvény visszatérési értéke A PHP nyelvben minden függvény rendelkezik visszatéréssel, amely segítségével meghatározható, hogy a függvény rendben lefutott, vagy hiba történt, illetve a visszatérési értékkel kaphatjuk meg a függvény által végzett műveletek eredm
445 A változók hatóköre (scope) A változók hatóköre megadja, hogy értékük hol érhető el.
446 A global kulcsszó Ha egy függvényben globális változókat szeretnénk használni global kulcsszóval kell deklarálni őket.
447 GLOBALS tömb használata A PHP által definiált speciális $GLOBALS tömb használatával szintén elérhetők a globális változók.
448 A static kulcsszó A static kulcsszóval deklarált változók nem törlődnek és értéküket is megőrzik két függvényhívás között.
449 Paraméterátadás A static kulcsszóval deklarált változók nem törlődnek és értéküket is megőrzik két függvényhívás között.
450 Alapvető karakterlánc kezelés
451 Karakterláncok kiíratása A echo() és a print() függvényekkel küldhetjük el legegyszerűbben a böngészőnek az előzőleg összeállított karakterláncokat.
452 Kisbetű – nagybetű átalakítások A strtoupper() függvény a karakterláncban található minden karaktert nagybetűs formára alakít, a strtolower() pedig kisbetüssé.
453 A karakterlánc hossza A strlen() függvény a karakterlánc hosszával tér vissza.
454 ASCII kód karakterré alakítása A chr() függvény a paraméterként megkapott ASCII kódot karakterré alakítja.
455 Karakter ASCII kóddá alakítása A ord() függvény a paraméterként megkapott karakter krakterkódjával tér vissza.
456 Karakterlánc darabolása A függvény minden egyes hívásakor forrás karakterlánc egy-egy darabját adja vissza.
457 Karakterláncból tömb A explode() függvény elemeire bontja a karakterláncot, és elemeit tömbben helyezi el.
458 PHP matematikai függvényei
459 Abszolút érték A abs() függvény a paraméterként kapott számérték abszolút értékével tér vissza.
460 Kerekítés A round() függvény a paraméterként kapott számértéket megadott pontossággal kerekíti. A ceil() felfelé kerekít, a floor() lefelé kerekít.
461 Hatványozás A pow() függvény az első paraméterben megadott számot a második paraméterben megadott kitevőre emeli.
462 Gyökvonás A sqrt() függvény a paraméterben megadott szám négyzetgyökével tér vissza.
463 Véletlen számok A srand() függvény beállítja a véletlenszám-generátor kezdőértékét. A rand() függvény egy véletlen számmal tér vissza.
464 MT Véletlen számok A Mersenne Twister véletlenszám generátor használata a rand() függvényhez hasonlít, de gyorsabb annál.
465 Maximum kiválasztása A max() függvény a paraméterekben kapott értékek közül kiválasztja a legnagyobbat.
466 Minimum kiválasztása A min() függvény a paraméterekben kapott értékek közül kiválasztja a legkisebbet.
467 String előkészítése HTML-hez
468 Karakterlánc széleinek megtisztitása A trim() függvény megtisztítja a string elejét és végét a szóköz, tabulátor, soremelés és kocsi vissza karakterektől. A második paraméterben megadhatók más törlésre szánt karakterek.
469 Karakterlánc tördelése A wordwrap() függvény a karakterláncot, meghatározott hosszúságú részekre tördeli, és sortörés karakterekkel kiegészítve adja vissza.
470 HTML-entitások karakterré alakítása A html_entity_decode() függvény a HTML-ntitásokat konvertálja a nekik megfelelő karakterekké.
471 HTML- karakterek entitásokká alakítása A htmlentities() függvény a HTML-karaktereket konvertálja a nekik megfelelő HTML-entitásokká.
472 Entitások megjelenítése A htmlentities() függvény a HTML-karaktereket konvertálja a nekik megfelelő HTML-entitásokká.
473 Különleges karakterek entitásokká alakítása A htmlspecialchars() függvény a speciális HTML-karaktereket konvertálja a nekik megfelelő HTML-entitásokká.
474 HTML soremelés címkék beszúrása A nl2br() függvény a karakterláncban található soremelés (n) után beszúr egy HTML soremelés címkét.
475 HTML és PHP címkék eltávolítása A strip_tags() függvény eltávolítja a karakterláncban található HTML címkéket.
476 Addcslashes A addcslashes() függvény a karakterláncban a második paraméterben megadott karakterek elé egy visszaper jelet illeszt.
477 Addslashes A addslashes() függvény a karakterláncban található idézőjelek és visszaper jelek elé egy visszaper jelet illeszt.
478 PHP részkarakterlánc kezelés
479 Részkarakterlánc keresése A strpos() és a stripos() a részkarakterlán első, még a strrpos() és strripos() függvények az utolsó előfordulásait keresik.
480 Karakterek cseréje A substr_replace() függvény a karakterláncba, a kezdőindextől kezdve, meghatározott hosszúságú részkarakterláncot beilleszti, a korábbi tartalom helyére.
481 Szövegelemek cseréje A strtr() függvény számára a lecserélendő és az beillesztendő szövegrészletek tömbben is átadhatók 2. paraméterként.
482 Részkarakterláncok megszámlálása A substr_count() függvény megadja, hogy a keresett részkarakterlánc hányszor szerepel a karakterlánban.
483 Részkarakterlánc kiolvasása A substr() függvény a karakterláncól, a kezdőindextől kezdve, meghatározott hosszúságú részkarakterláncot ad vissza.
484 Részkarakterlánc cseréje A substr_replace() függvény a karakterláncba, a kezdőindextől kezdve, meghatározott hosszúságú részkarakterláncot beilleszti, a korábbi tartalom helyére.
485 PHP formázott kiíratás
486 Printf függvény formázó karakterei A printf() függvény a karakterláncok formázott kiíratását végzi. A számokat különböző számrendszerekben, beállítható pontossággal, mezőszélességgel képes megjeleníteni.
487 Printf függvény kitöltő paramétere A kitöltő paraméter segítségével adott szélességűre egészíthetjük ki a forrás karakterláncot. A kitöltő karaktert közvetlenül a % jel után kell elhelyezni.
488 Printf függvény - pontosság Valós számoknál megadhatjuk a kiírandó tizedesjegyek számát. A pontosságot meghatározó paraméter egy pontból és egy számból áll, és közvetlenül a típusparaméter elé kell írni.
489 Printf függvény - Sztringek Karakterláncok esetén meghatározhatjuk a mezőszélességet, és megadhatjuk, hogy a kitöltő karakterek a szöveg elé vagy mögé kerüljenek.
490 Karakterlánc formázása sprintf()-el Az sprintf() függvény a printf() függvényhez hasonló módon működik, de a formázott karakterláncot nem írja ki, hanem visszaadja.
491 Sprintf() és entitások A mezőszélesség beállításánál használt szóközöket entitásra cserélve, már nem lesz feltétlen szükség a pre HTML címke használatára.
492 PHP dátum és idő kezelése
493 Dátum, idő lekérdezése A time() függvény az aktuális dátumnak és időpontnak megfelelő számértékkel tér vissza. Ezt a nevezzük időbélyegnek.
494 Időbélyeg átalakítása A date() függvény a paraméterként kapott időbélyegből kinyeri a formátumkódban megadott adatokat, és karakterlánc formájában adja vissza.
495 Időbélyeg létrehozása A mktime() függvény időbélyeget készít a paraméterként kapott adatokból (óra, perc másodperc...).
496 GMT időbélyeg létrehozása A gmmktime() függvény GMT időbélyeget készít a paraméterként kapott adatokból (óra, perc másodperc...).
497 Dátum vizsgálata Lehetővé teszi a felhasználók által beküldött dátumok ellenőrzését. A checkdate() függvény TRUE értékkel tér vissza, ha az átadótt dátumértékek megfelelőek.
498 PHP tömbök kezelése
499 Indexelt tömb létrehozása A tömb változók halmaza. A változókat a tömbön belül sorban tároljuk. (Mindig van egy alapértelmezett bejárási sorrend.)
500 Több dimenziós tömb létrehozása A PHP tömbelemei lehetnek maguk is tömbök. Ezt kihasználva több dimenziós tömböket hozhatunk létre.
501 Asszociatív tömb létrehozása Asszociatív tömbök tömbelemeire való hivatkozás nem sorszámmal, hanem egy kulcs segítségével történik.
502 Több dimenziós tömb bejárása A több dimenziós tömb bejárására két egymásba ágyazott foreach ciklust használunk.
503 Tömbelemek száma A Count() függvény egy változó, például tömb elemeinek számát adja visszatérési értékként.
504 Tömbelemek keresése Az array_search() függvény a megadott tömbben a megadott értéket keresi. Ha megtalálja, akkor annak tömbindexével tér vissza.
505 Összes tömbelem módosítása Az array_map() függvény az első paraméterében megkapott függvényt minden tömbelemmel meghívja.
506 Tömbelemek szűrése Az array_filter() függvény lehetővé teszi a tömb elemeinek szűrését. A második paraméterben megadott függvény végzi a tömbelemek ellenőrzését.
507 PHP tömbök rendezése
508 Sort függvény használata A sort() függvény elvégzi a tömb elemeinek növekvő sorbarendezését.
509 Asort függvény használata Az asort() függvény asszociatív tömbök elemeinek, érték szerint növekvő sorba rendezésére alkalmas, úgy hogy a kulcsokat is áthelyezi.
510 Magyar ABC szerinti rendezés Az uasort() függvény a felhasználó által megadott összehasonlító függvénnyel végzi a rendezést.
511 Ksort függvény használata A ksort() függvény asszociatív tömbök elemeinek, kulcs szerint növekvő sorba rendezésére alkalmas, úgy hogy a kulcsokat is áthelyezi.
512 Tömbelemek keverése A shuffle() függvény véletlenszerű sorrendbe rendezi a tömb elemeit a tömbindexek újragenerálásával.
513 PHP űrlapkezelés
514 Űrlapadatok elérése A felhasználó által, egy űrlap segítségével elküldött adatokhoz három szuperglobális tömb segítségével férhetünk hozzá: $_GET, $_POST, $_REQUEST
515 $_GET vagy $_POST Az űrlapok többségénél POST metódust használunk. A GET metódus használata kerülendő, ha érzékeny vagy személyes adatok kerülnek továbbításra.
516 isset() függvény Az isset() függvény megvizsgálja, hogy létezik-e a paramétereként átadott tetszőleges típusú változó.
517 Űrlap feldolgozása Első lépésben ellenőrizni kell, hogy a felhasználó valóban elküldte a vizsgált űrlapot.
518 Több submit kezelése Ha egy űrlap többféleképp is feldolgoztató, akkor elhelyezhetünk rajta több submit elemet, és attól függően választunk a feldolgozást végző programrészek között.
519 Szöveges beviteli mező A példakód működését külön böngésző ablakban is érdemes kipróbálni, és megfigyelni megfigyelni miként válztozik az URL
520 Jelszó bevitele A jelszavakat, személyes és mások számára nem publikus adatokat minden esetben POST metódussal kell bekérni!
521 Szövegbevitel plusz A felhasználó által küldött adatokkal mindig óvatosan kell bánni. Ha nem tároljuk csak megjelenítjük azokat, akkor elegendő a HTML címkék hatástalanítása a htmlspecialchars() függvénnyel.
522 Textarea kezelése Többsoros szövegbeviteli mező esetén a korábban megismert módon, az elem nevét kulcsként használva $_POST vagy $_GET tömbben találjuk az elküldött adatokat.
523 Jelölőnégyzet kezelése A jelölőnégyzet value jellemzőjének értéke kerül elküldésre abban az esetben, ha ki van választva. Kötelező és rendszerint elegendő is a $_POST vagy $_GET tömbben a hozzátartozó tömbelem létezését megvizsgálni.
524 Kiválasztó gomb kezelése Kiválasztó gombból rendszerint több kerül egy csoportba. Az egy csoportba tartozó rádio gombok neve azonos.
525 Lenyíló lista kezelése Lenyíló lista kezelése, ha csak egy választást engedélyezünk, akkor a kiválasztó gombnál megismert módon történik.
526 Multiselect lista kezelése Ha egy lenyíló listában több elem is kiválasztható, akkor egy név kevés, tömböt kell használni.
527 Képes elküldőgomb kezelése Képes elküldőgombok esetén, a kattintás pillanatában érvényes egérkoordináták kerülnek elküldésre.
528 Input file kezelése Ha a HTML kódban egy input elem type jellemzőjének file értéket adunk, akkor lehetővé vállik fájlok feltöltése.
529 Input file szűkítése A kiválasztott fájl típusát, méretét, kiterjesztését a $_FILES szuperglobális tömbben vizsgálva megelőzhetjük a nem megfejelő állományok feltöltését.
530 Multiselect input file A HTML5 lehetőséget ad a file típusú input elem használatakor több fájl együttes kiválasztására a multiple jellemző megadásával.
531 PHP videók
532 WAMP szerver telepítése WAMP szerver telepítése Windows operációs rendszerre.
533 Egyszerű változó típusok Ismerkedés a PHP egyszerű változó típusaival és a kódolási szabályokkal.
534 PHP tömbök PHP tömbök létrehozása és kezelése. A tömb az egyik leggyakrabban használt típus a PHP nyelvben.
535 PHP függvények PHP függvények létrehozása és használatai. A függvény minden PHP kód alapját képezi.
536 PHP függvények és névterek A PHP függvények használata mélyebben és a PHP változók névtere.
537 PHP elágazások PHP kondíciók vagy feltételek használata. (if-else, ) Elágazások nélkül lehet programot készíteni, csak nem érdemes.
538 PHP ciklusok Ciklusok használata PHP-ban. (for, foreach, while)
539 PHP fájlok beszúrása A PHP include és require függvényekkel külső fájlokat lehet hozzáadni a munkánkhoz.
540 PHP stringek A PHP stringek azaz szövegek kezelésének bemutatása. Substr, strpos, str_replace és sprintf függvények használata.
541 PHP objektumok PHP objektumok kezelésének alapjai.
542 $_GET szuperglobális változó A $_GET szuperglobális változó használata PHP-ban.
543 $_POST szuperglobális változó A $_POST szuperglobális változó használata PHP-ban.
544 SESSION-ok kezelése PHP SESSION-ok. A munkamenetek kezelése teszi lehetővé hogy a felhasználók számára személyre szabott tartalmakat állítsunk össze.
545 COOKIE kezelés COOKIE kezelése PHP-ben. A sütik felhasználásával a kliens gépen is tárolhatunk információkat.
546 PHP file feltöltés Fájlok feltöltése szerverre PHP segítségével. A feltöltött fájlok jellemzőinek ellenőrzése.
547 PHP file nevek Fájlok átnevezése, törlése, másolása és listázását PHP függvényekkel.
548 MySQL és PHPMyadmin PHPMyadmin telepítése, használatának alapjai. MySQL adatbázis létrehozása.
549 MySQL select-update-delete Adatok lekérdezése, frissítése és törlése PHPMyadmin segítségével, MySQL adatbázisban.
550 MySQL insert Rekordok beszúrása adat-táblába, PHPMyadmin segítségével, MySQL adat-bázisban.
551 PHP és MySQL MySQL adatbázis kezelése PHP függvények segítségével.
552 php és mysql class MySQL kezelő PHP osztály készítése. A lekérdezések adatainak könnyen kezelhető formában történő visszaadása.
553 PHP HTML class Egy HTML kezelő PHP osztály készítése.
554 MySQLi és PHP programozás

555 MySQLi kapcsolódás adatbázishoz
556 Kapcsolódás adatbázishoz Annak érdekében, hogy alkalmazásunk képes legyen egy adatbázisban tárolt adatokat kezelni, első lépésként csatlakoztatnunk kell adatbázisunkat az alkalmazáshoz, amit a mysqli_connect() függvény segítségével tehetünk meg.
557 Adatbázis kapcsolat bezárása Ha egy MySql kapcsolatot korábban kívánunk bezárni, azt a mysqli_close() függvény segítségével tehetjük meg.
558 MySQLi kapcsolat információk A mysqli_get_host_info($link) függvény a $link paraméter által meghatározott kapcsolat típusát, és a szerver host nevét adja vissza.
559 MySQLi műveletek adattáblákkal
560 SQL parancsok küldése PHP-ból az adatbázis-kezelő számára a mysqli_query() függvény segítségével küldhetünk SQL parancsokat.
561 Adattábla létrehozása Új táblát a CREATE TABLE parancs segítségével hozhatunk létre.
562 Adattábla feltételes létrehozása Adattábla létrehozásakor az IF NOT EXISTS feltétel használatával biztosítható, hogy a művelet végrehajtása csak akkor történjen meg, ha adott néven még nincs tábla létrehozva.
563 Adattábla törlése Új táblát a CREATE TABLE parancs segítségével hozhatunk létre.
564 Adattábla feltételes törlése Új táblát a CREATE TABLE parancs segítségével hozhatunk létre.
565 MySQL adattípusok A MySQL adatbázis-kezelőben használható adattípusok összefoglalása.
566 Adattábla elsődleges kulccsal Minden táblában kijelölhetünk egy (és csak egy) mezőt elsődleges kulcsnak. Ez a mező nem tartalmazhat ismétlődő értékeket.
567 Alapértelmezett értékek beállítása Egy oszlophoz alapértelmezett értéket a DEFAULT záradékkal rendelhetünk.
568 Karakterkódolás, ABC sorrend A karakterkódolást és rendezés típusát (Használt ABC.) szerver szinten, adatbázis szinten és tábla szinten is meg lehet adni.
569 Index használata Ha egy oszlop alapján várhatóan sok keresést fognak felhasználóink végrehajtani, akkor ahhoz érdemes indexet létrehozni.
570 Index hozzáadása táblához Egy meglévő táblánkhoz új indexet a CREATE INDEX parancs segítségével adhatunk.
571 Egyedi index hozzáadása táblához Egy meglévő táblánkhoz új indexet a CREATE INDEX parancs segítségével adhatunk.
572 MySQLi rekordok feltöltése
573 Rekordok beszúrása Meglévő táblába új rekordokat az INSERT INTO parancs segítségével szúrhatunk be. Az adatokat a tábla oszlopai sorrendjének megfelelően, vesszővel elválasztva soroljuk fel.
574 Rekordok beszúrása 2 Az INSERT INTO parancs után felsorolva a beszúrni kívánt adatok tábláinak nevét eltérhetünk az oszlopok adatbázisunkban lévő sorrendjétől.
575 Felhasználói adatok beszúrása Jelszavakat, védett személyes és üzleti adatokat sosem tárolunk egyszerű szövegként (olvasható formában)!
576 Beszúrt rekord elsődleges kulcsa Ha egy rekord beszúrását követően szükségünk lenne az új rekor elsődleges kulcsára, akkor azt a mysqli_insert_id() függvénnyel kérhetjük le.
577 MySQLi egyszerű lekérdezések
578 Rendezett lekérdezés Az ORDER by záradék hatására a rekordok megjelenítése a kiválasztott mezőben tárolt értékek alapértelmezetten növekvő sorrendjében megfelelően történik.
579 Tábla tartalmának lekérdezése A mysqli_fetch_array($result) függvény a lekérdezett rekord adatait adja vissza egy asszociatív tömbbe csomagolva, a mezőnevekkel címkézve.
580 Tábla lekérdezése 2 Ha nincs szükségünk valamennyi mező tartalmának kiolvasására, akkor a csillag helyett használni kívánt mezők neveit soroljuk fel vesszővel elválasztva.
581 Rendezés több mező alapján Az ORDER by záradék hatására a rekordok megjelenítése a kiválasztott mezőben tárolt értékek alapértelmezetten növekvő sorrendjében megfelelően történik.
582 Lekérdezés csökkenő sorrendben Az ORDER by záradékot a DESC kulcsszóval kiegészítve csökkenő sorrendet kapunk.
583 MySQLi rekordok szűrése
584 Rekordok szűrése A WHERE záradék használható rekordok szűrése. A WHERE után adhatjuk meg a válogatás feltételét/feltételeit.
585 Rekordok limitálása A LIMIT záradék mindig a lekérdezést leíró utasítás végére kerül.
586 Összetett szűrés Az AND és az OR operátorok felhasználásával összetett feltételek is megadhatók.
587 BETWEEN operátor A BETWEEN operátor segítségével a mezők két szélsőérték közötti értékeit szűrhetjük ki.
588 Rekordok limit 1 Ha csupán egy rekord adataira van szükségünk, akkor a lekérdezett maximális sorok (rekordok) számát 1-re célszerű állítani.
589 Lekérdezés jelszó alapján Ha elegendő annak eldöntése, hogy létezik-e a vizsgált felhasználói név és jelszó páros, akkor ez a lekérdezés eredményét a mysqli_num_rows() függvénynek átadva vizsgálható.
590 Ismétlődések kiszűrése Ha egy lekérdezés eredményei közül csak a különböző elemeket kívánjuk megjeleníteni, akkor DISTINCT kifejezést kell használni.
591 Minatillesztés Szövegrészletek keresése esetén a LIKE operátort használjuk, a karaktersorozatok összehasonlításánál megismert = illetve != operátorok helyett.
592 Összegző függvények használata
593 Minimum, maximum kiválasztása MIN() függvény a kiválasztott mezőben található legkisebb értéket adja vissza. MAX() függvény a kiválasztott mezőben található legnagyobb értéket adja vissza.
594 Összeg, átlag SUM() függvény a kiválasztott mezőben található érték összegét adja vissza. AVG() függvény a kiválasztott mezőben található érték átlagát adja vissza.
595 Rekordok megszámlálása COUNT(Mezo_Nev) függvény azoknak a rekordoknak a számát adja vissza, ahol a kiválasztott mező értéke nem NULL.
596 Megszámlálás csoportosítással A GROUP BY záradékkal csoportosíthatjuk a tábla rekordjait valamely mező(k) tartalma alapján.
597 Csoprortok adatainak átlaga A GROUP BY záradékkal csoportosított rekordokról további információkat nyerhetünk a sum(), avg(), min(), és max(), függvényekkel, és más SQL függvényekkel is.
598 MySQLi többtáblás lekérdezése
599 Összekapcsolás WHERE záradékkal Gyakran előfordul, hogy adatainkat több táblából kell összegyűjtenünk. Az eddig megszerzett ismereteink alapján a SELECT parancs felhasználásával tehetjük meg.
600 Összekapcsolás JOIN kúlcsszóval JOIN kulcsszó használatakor a WHERE záradék helyett az ON záradékban kell megadnunk a kacsolódás módját.
601 Álnevek használata Több táblás lekérdezéseknél igen gyakran használjuk az oszlopnevek megadásánál a táblaneveket előtagként, ami elég hosszú kifejezésekhez vezet.
602 LEFT JOIN használata A LEFT JOIN forma használata esetén az előző tábla összes sorát megkapjuk, függetlenül attól, hogy a második táblában tartozik-e hozzá rekord.
603 Üres mezők vizsgálata - IS NULL Mezo_Nev IS NULL: igaz, ha a Mezo_Nev mező értéke NULL. A definiálatlan komponensek vizsgálatára ezt a formát használhatjuk.
604 Üres mezők vizsgálata - IS NOT NULL Mezo_Nev IS NOT NULL: igaz, ha a Mezo_Nev mező értéke nem NULL. A definiált komponensek vizsgálatára ezt a formát használhatjuk.
605 LIKE használata 1 Válogassuk ki a vad gyümölcsöket vásárló felhasználók nevét, a vásárlás időpontját és vad gyümölcs nevét!
606 LIKE használata dátumban Válogassuk ki, hogy 2012. októberében ki, mikor és mit rendelt!
607 Egy felhasználó rendelései Válogassuk ki, hogy mikor és mit rendelt a „belus” nevű felhasználónk!
608 Felhasználó rendeléseinek száma Válogassuk ki, hogy a „belus” nevű felhasználónk hányszor rendelt eddig!
609 Felhasználó rendeléseinek összege Válogassuk ki, hogy a „belus” nevű felhasználónk milyen értékben rendelt eddig!
610 Felhasználó rendeléseinek értékei Válogassuk ki, hogy a „belus” nevű felhasználónk milyen értékben rendelt egy-egy alkalommal!
611 Fejezet tábláinak létrehozása A fejezetben használt adattáblák létrehozásához, és feltöltéséhez szükséges kód.
612 MySQLi rekordok törlése
613 Tábla kiürítése Rekordokat a DELETE parancs felhasználásával törölhetünk tábláinkból. WHERE záradék nélkül használva valamennyi rekord törlésre kerül.
614 Rekordok törlése táblából A törlendő rekordokat a lekérdezéseknél megismert WHERE záradékban megadott feltételekkel választhatjuk ki.
615 A legrégebbi rekord törlése Előfordul, hogy egy táblában az utolsó N rekordot szeretnénk mindig megtartani, ekkor új bejegyzés előtt vagy után töröljük a legrégebbit.
616 Rekordok törlése több táblából Összekapcsolt táblák esetén, ha egy táblából törlünk, akkor a kapcsolt táblákban hozzá kapcsolódó rekordok törléséről is gondoskodni kell.
617 Rekordok törlése JOIN-al A többtáblás lekérdezéseknél megismertük a táblák összekapcsolásának módját JOIN kulcsszóval. Most ezt használjuk az összekapcsolt táblák rekordjainak törlésére.
618 MySQLi rekordok cseréje
619 Rekordok cseréje táblában Rekordok cseréjét eddigi ismereteink alapján két lépésben tudnánk megvalósítani.
620 REPLACE INTO használata A törlendő rekordokat a lekérdezéseknél megismert WHERE záradékban megadott feltételekkel választhatjuk ki.
621 MySQLi mezők frissítése
622 Cellák frissítése Ha csak cellák egy részének kell új értéket adnunk, és a többi cella eredeti cella tartalma nem áll rendelkezésünkre, akkor a feladatot eddigi ismereteink alapján három lépésben tudjuk megoldani.
623 UPDATE parancs használata A törlendő rekordokat a lekérdezéseknél megismert WHERE záradékban megadott feltételekkel választhatjuk ki.
624 Frissítés képlettel Az UPDATE parancs esetén, az új értékek megadásához képleteket is használhatunk, amelyekben ráadásul szerepelhetnek a frissítendő rekordban tárolt korábbi értékek is.
625 Frissítés függvénnyel Az UPDATE parancs esetén, az új értékek megadásához függvényeket is használhatunk.
626 Webáruház készítés

627 Webáruház adatbázisa
628 A webáruház funkciói Egy webáruház készítése mindig annak tisztázásával kezdődik, hogy tisztázzuk webshopunknak milyen igényeket kell kielégítenie.
629 Az adatbázis felépítése Az adatbázis szerkezete megvalósítja a webáruház első 3 alapfunkciójának (weboldalak megjelenítése, felhasználók kezelése, megrendelések kezelése) szétválasztását.
630 Webáruház oldalstruktúra Az információk, termékek és hírek közreadása strukturált formában kell történjen, ahogy egy-egy valódi áruházban is a termékek típusuk szerin kerülnek a polcokra.
631 Weboldalak jellemzői Az egy-egy oldal beazonosításához és megjelenítéséhez igen sok adat tárolására lesz szükségünk. Első lépésben ezeket 3 csoportba rendezzük.
632 Általános oldaljellemzők táblái Mivel az oldalak legfontosabb adatira igen gyakran van szükség, ezért az oldal táblában csak ezeket tároljuk.
633 Termékek táblái A termékek fontosabb adatait szintén gyakran lekérdezzük, így ezeket egy táblába gyűjtjük. (termek tábla.)
634 Oldal tábla létrehozása Az oldal tábla webáruházunk leggyakrabban használt adattáblája. A tárol változók számának és méretének kordában tartásával is elejét vesszük a megjelenítés lassulásának
635 Oldal_tartalom t. létrehozása Az oldal_tartalom tábla rekordjait az Oid mező kapcsolja az oldal táblához. Nagy méretű szöveges információkat tárol.
636 A termek tábla létrehozása Egy weboldalon, egy termék több változata is megjelenhet, amelyek egy tulajdonságban (méret, szín...) különböznek csupán.
637 A termek_jellemzo tábla létrehozása Egy-egy terméknél a termék típusától függő jellemzők kerülnek megjelenítésre. A közzétett jellemzők száma termékemként változhat
638 A termek_leiras tábla létrehozása A termékek részletes leírását külön táblában tároljuk az tárolt adatok mérete miatt.
639 Képek táblája Az oldalakon megjeleníthető képek jellemzőit egy táblába gyűjtjük.
640 A kep tábla létrehozása Egy oldalhoz több kép is kapcsolható az Oid mező segítségével.
641 Felhasználókezelés jellemzői A felhasználókkal kapcsolatban is elég sok adatot kell tárolnunk. Legfontosabb adataikat gyakran lekérdezzük, ezért külön táblába érdemes tárolni.
642 Felhasználókezelés táblái Mivel a felhasznalo_reg táblából minden oldalletöltésekor lekérdezést hajtunk végre, így csak a legfontosabb adatokat tároljuk benne.
643 A felhasznalo_reg tábla létrehozása A Fszint mező tartalma határozza meg, hogy a felhasználónak mihez van joga. (Mit tekinthet meg, és mit módosíthat.)
644 A felhasznalo_telefon t. létrehozása A tárolt telefonszámokat Fid mező segítségével kapcsoljuk a felhasznalo_reg táblában található felhasználó elsődleges kulcsához.
645 A felhasznalo_cim tábla létrehozása A felhasznalo_cim tábla igazi célja, hogy törzsvásárlóinknak ne kelljen többször beírni címét. Egyébként nem kötelező adatokról van szó, ami némileg csökkenti jelentőségét.
646 A felhasznalo_mod tábla létrehozása A felhasznalo_mod tábla szükség esetén segít beazonosítani, hogy ki, mikor és melyik gépen módosította egy felhasználó adatait, lépett be vagy rendelt a nevében
647 A megrendelések táblái A bevásárló kocsiban több termék is elhelyezhető. Az mmAzon (munkamenet azonosító) kapcsolja a termékeket a felhasználók aktuális munkamenetéhez.
648 A megrendelések adatai A megrendelés során a megrendelt termékek, a megrendelő és a megrendelés adatait kell eltárolni.
649 A kocsi tábla létrehozása A kocsi tábla szerepe csupán annak rögzítése, hogy a látogatók mely termékekből, hány darabot választottak.
650 A megrendeles tábla létrehozása A megrendeles tábla tartalmaz minden a megrendelés kezeléséhez, teljesítéséhez szükséges adatot, a termékek adatain kívül.
651 A megrendelt_termek t. létrehozása A termékek adatai változhatnak, és egy-egy termék akár el is tűnhet a polcokról. Ezért minden az adott pillanatban érvényes, a megrendelés szempontjából releváns is formációt tárolni kell róluk.
652 Webáruház telepítő
653 A telepítő feladatai A webáruház telepítését, az alapbeállítások elvégzését a setup.php végzi.
654 A setup.php felépítése Az űrlap megjelenítését és a telepítéshez kapcsolódó lényeges feladatokat a Kiir_Tartalom() függvény végzi.
655 A Kiir_Tartalom() függvény A Kiir_Tartalom() függvény megvizsgálja, hogy a felhasználó elküldte-e már az űrlatot. Ha igen, akkor az Kezel_SetupUrlap() függvény meghívásával teszi lehetővé az elküldött adatok feldolgozását.
656 A Setup képernyő felépítése Elküldött űrlap esetén a képernyő jobb oldalán található div-ben lehet követni a megvalósított feladatokat. Ha egy feladat megvalósítása hibajelzéssel ér véget, akkor az őt követők már kihagyásra kerülnek.
657 A webáruház adatai csoport A webáruház adatai közül itt valójában csak a nevét kérjük be. A kezdőlapon később ez is módosítható.
658 A üzemeltető adatai csoport Az üzemeltető adatai közül a cég neve, címe és telefonszáma a webáruház láblécében is látható. Ezeket az adatokat globális változóként tároljuk a start.php-ben.
659 Adatbázis adatai csoport Telepítés előtt létre kell hozni vagy a tárhelyszoláltatóval létre kell hozatni egy MySql adatbázist, amely a webáruház adatait tárolja.
660 Elküldött adatok ellenőrzése Első lépésként ellenőrzi, betölti és megtisztítja a űrlap által elküldött adatokat. Ha hibát talál, akkor a hiba kódját elhelyezi a $ErrStr változóban.
661 A start.php mentése Második lépésben lecseréljük a #_db, #_user és #_passwordhelyőrzőket az űrlap adataival.
662 Adattáblák létrehozása A Webáruház adatbázisa című fejezetben megismert tábál létrehozása következik.
663 Az adminisztrátor felvétele Végül betöltjük az adminisztrátor adatait. Felhasználónevén kívül később bármely más adatát módosíthat.
664 Webáruház szerkezete
665 A webáruház működése A webáruház minden oldalát az index.php kezeli. Illeszti az erőforrásokat, és meghívja az oldalanként változó HTML kód összeállításáért felelős függvényeket.
666 Index.php 2. A HTML dokumentum fejében a szokásos elemek mellet megtalálható egy JavaScript változó is értéket kap.
667 Index.php 3. A HTML dokumentumtörzs betöltését követően létrejön a süti. Az oldal fejlécében megjelenik a logó, és a webáruház név. ..
668 Webáruházunk konstansai A típuskódok kezelésére a kód több pontján is szükség van. Hogy mindenhol a legegyszerűbb kódot használhassuk, ezért minden oldaltípushoz létrehozunk egy konstanst.
669 URL szerkezet Az oldal neve élete során nem változhat. (Ha az adminisztrátor módosítani akarja, akkor az eredeti oldalt törölni kell, majd egy ujjat létrehozni.)
670 Aktuális oldal adatai A w3_fejlec.php kódja az oldalletöltés legelején fut le. Annak érdekében, hogy az aktuális oldal adatait többet ne kelljen lekérdezni az adatbázisból eltároljuk a globális $AktOldal tömbbe.
671 Szülőoldalak adatai Az aktuális oldal őseinek ismeretére is több helyen szükségünk lesz. Így az első és második szülő adatait is tömbbe tároljuk. Később már ezeket az adatokat sem kell az adatbázisból beolvasni.
672 Index.php 1. Az index.php-nak még a HTML kód összeállítása előtt elég sok feladata van.
673 Egyedi fejlécelemek A webáruház minden oldala saját névvel (title), leírással (description) és kulcsszavakkal (keywords) rendelkezik. Ezeket az adatokat a HTML dokumentum fejlécében kell megadni.
674 Az oldal a struktúrában Hasznos, ha a felhasználó böngészés közben mindig tisztában van, hogy éppen a hol jár. Ennek érdekében megjelenítjük az aktuális oldal őseit.
675 A webáruház tartalma A Kiir_Tartalom() függvény az oldal típusától függően a weboldal megjelenítéséhez más-más feldolgozó függvényt hív meg.
676 Webáruház menü
677 A menü feladatai A menü megjelenítését a w3_menu.php-ban található a Kiir_Menu() függvény végzi. A következő oldalakon megvizsgáljuk felépítését.
678 Kiemelt hírkategóriák A kiemelt hírkategóriák célja, hogy az adminisztrátor a legfontosabb információkat a menü elejéről elérhető weboldalakon tehesse közzé. Kiemelt minden hírkategória, ha prioritása 100 vagy annál nagyobb.
679 Menü lista 2. szint A menülista második szintjét állítjuk össze. A szó szoros értelmében.
680 Felhasználói menüpontok A menüoszlopon kaptak helyet a bejelentkezést és kijelentkezést lehetővé tévő űrlapok.
681 Termék menü A termékeket kategóriákba és alkategóriákba szervezve tárolja webáruházunk.
682 Harmadik szint A termékoldalak linkjeit beágyazott listába szervezve adja vissza. Ha a vizsgált alkategóriában nincs egy termék sem, akkor üres karakterlánccal tér vissza.
683 Weboldalak megjelenítése
684 Megjelenítő függvény kiválasztása A következő oldalakon megismerjük a webáruház általános jellegű oldalai (Kezdőlap, Kategória, Alkategória, Termék, Hírkategória, Híroldal) megjelenítésének módját.
685 A kezdőlap megjelenítése A kezdőlap tartalmának beolvasását követően # jelnél darabolva 5 részre bontjuk. Ezeket CSS3 animáció segítségével egymást követően jelenítjük meg.
686 Kategória megjelenítése A Kiir_Kategoria() függvény feladata a kategória weboldalak tartalmának összeállítása. A függvény kódja a w3_tartalom.php fájlban található.
687 Alkategória megjelenítése A Kiir_AlKategoria() függvény feladata a alkategória weboldalak tartalmának összeállítása. A függvény kódja a w3_tartalom.php fájlban található.
688 Hírkategória megjelenítése A Kiir_Hirkategoria() függvény feladata a hírkategória weboldalak tartalmának összeállítása. A függvény kódja a w3_tartalom.php fájlban található.
689 Híroldalak megjelenítése A Kiir_HirOldal() függvény feladata a híroldalak tartalmának összeállítása. A függvény kódja a w3_tartalom.php fájlban található.
690 Felhasználókezelés
691 Felhasználókezelés funkciói A Webáruház adatbázisa című fejezetben megismertük a felhasználókezeléshez használt adattáblákkal, és a létrehozásukhoz szükséges kódot.
692 Felhasználó típusok A különböző szintű felhasználók különböző jogosultságokkal rendelkeznek a webáruház használata során.
693 Regisztráció űrlap 1 Egy űrlapot használunk az új felhasználók felvételére és a bejelentkezett felhasználók adatainak módosítására.
694 Regisztráció űrlap 2 Ha a felhasználó már elküldte az űrlapot, akkor $_POST tömbben érkező adatokat megtisztítjuk és a felhasználók adatait tároló változókba töltjük.
695 Regisztráció űrlap 3 Az űrlap címe attól függ, hogy a belépett felhasználó adatainak módosításáról, vagy új felhasználó adatainak regisztrálásáról van szó.
696 Regisztráció űrlap 4 A kód egy kicsit hosszúra sikerült, mivel mást input elemeket kell megjeleníteni, ha regisztrációról és másokat, ha az adatok módosításáról van szó.
697 Regisztráció feldolgozása 1 A regisztrációs űrlap adatainak feldolgozása $_POST tömbben érkező adatok megtisztításával, a felhasználó IP címének lekérdezésével és az $ErrorStr létrehozásával indul.
698 Regisztráció feldolgozása 2 A bejelentkezett felhasználók esetén a függvény ellenőrzi a kötelező adatok meglétét és a jelszó érvényességét.
699 Regisztráció feldolgozása 3 Új felhasználó esetén a függvény ellenőrzi, hogy a választott felhasználónév foglalt-e. Ha már foglalt, akkor hibajelzéssel tér vissza.
700 Bejelentkezés űrlap A bejelentkezés űrlap a menüoszlopon kerül megjelenítésre, ha a nincs bejelentkezett felhasználó. Egyszerű kis űrlap. Kódja magáért beszél.
701 Bejelentkezés folyamata Az 5. hibás bejelentkezési kísérletet követő 1 órában, a felhasználó próbálkozásakor a kód csupán az 1 óra kezdetének időpontját aktualizálja
702 Kijelentkezés űrlap A kijelentkezés űrlap a menüoszlopon kerül megjelenítésre, ha a felhasználó be van jelentkezve.
703 Kijelentkezés folyamata A felhasználó a menüoszlopban található kijelentkezés űrlap kijelentkezés nyomógombbal tudja kilépését kezdeményezni.
704 Jelszómódosítás űrlap A hibás adatok input elemei Error osztályba kerülnek. Ezek a CSS jóvoltából piros szegélyével hívja fel a felhasználó figyelmét a hibára.
705 Jelszómódosítás folyamata A JelszoModosit() függvény $_POST tömbben érkező adatok megtisztításával, a felhasználó IP címének lekérdezésével indul.
706 Megrendelések kezelése
707 A megrendelés menete A felhasználó a termékek oldalain található táblázatban teheti a bevásárlókosárba a termékeket.
708 Kosár űrlap A kosár űrlapot a webáruház általános oldalain a felhasználó bármikor megjelenítheti, ha korábban legalább egy terméket helyezett kosarába valamelyik termék oldalán.
709 Kosár űrlap feldolgozása A űrlapadatok megtisztítása után, ha gy termék darabszáma nagyobb mint nulla, akkor kocsi táblában frissítjük adatait, ha nulla, akkor töröljük.
710 Megrendelés űrlap adatai A megrendelés űrlap első megjelenítésekor bejelentkezett felhasználó esetén a regisztrációnál megadott adatait betöltjük a releváns változókba. Ismeretlen felhasználó esetén minden változót törlünk.
711 Megrendelés űrlap termékei A kocsi táblából lekérdezzük a munkamenethez tartozó rekordokat. A termékek tulajdonságait kódjuk alapján a termek és az oldal táblából töltjük be.
712 Megrendelés űrlap összeállítása A megrendelés űrlap első lépésben a felhasználónak lehetőséget ad a megrendelés adatainak megadására, második lépésben lehetővé teszi a megrendelés adatainak ellenőrzését
713 Megrendelés adatainak tárolása Ha a munkamenethez torozik nem véglegesített megrendelés, akkor annak adatait frissítjük.
714 Webáruház adminisztráció
715 A szerkesztés oldal Az adminisztrátor a szerkesztés linkre kattintva megjelenő oldalon módosíthatja a webáruház tartalmát. Létrehozhat, törölhet, módosíthat és másolhat egy oldalt.
716 Webáruház feltöltése
717 Feltöltés funkció A szerkesztés oldalon a Tömeges beállítás linkre kattintva megjelenő 7 űrlap teszi lehetővé az adatok feltöltését CSV fájlokból.
718 Törvényes webáruház

719 Webáruház-jog 2014
720 A fejezet célja A Törvényes webáruház című fejezetünk bemutatja, hogy egy webshop milyen jogszabályoknak kell megfeleljen, ha üzemeltetője szeretné elkerülni a bírságokat és kártérítési pereket.
721 Webáruház-jog változása 2014 2014.-ben számos, a webáruházak működését meghatározó jogszabály lép(ett) hatályba. Ezeket foglaljuk itt össze.
722 Webáruház és a PTK
723 2013. évi V. törvény Számos egyéb kötelezettséget ír elő a webáruházak számára. Előírja a jótállási, szavatossági kötelezettségeket...
724 Szerződéskötés ÁSZF-el Ha a webáruház vagy a gyártó jótállást vállal, vagy arra jogszabály alapján köteles ( kötelező jótállás ), annak a jótállás időtartama alatt a kontraktus vagy a jogszabály feltételei szerint kell helytállnia a hibás teljesítésér
725 Hibás teljesítés A webáruház hibásan teljesít, ha a termék a vásárlás ( átvétel ) időpontjában nem felel meg a szerződésben vagy jogszabályban megállapított minőségi követelményeknek.
726 Kellékszavatosság A termék eladója, esetünkben a webáruház üzemeltetője a termék hibájáért ( a vásárláskor a termékben már meglévő hiba-ok miatt bekövetkező hibáért) kellékszavatossági felelősséggel tartozik.
727 Termékszavatosság A termékszavatosság a termék átvételétől két évig érvényesíthető, ami akár hosszabb lehet mint a jótállási idő, így annak letelte után is érvényesíthető.
728 Jótállás Ha a webáruház vagy a gyártó jótállást vállal, vagy arra jogszabály alapján köteles ( kötelező jótállás ), annak a jótállás időtartama alatt a kontraktus vagy a jogszabály feltételei szerint kell helytállnia a hibás teljesítésér
729 Elektronikus szerződéskötés Ha a webáruház vagy a gyártó jótállást vállal, vagy arra jogszabály alapján köteles ( kötelező jótállás ), annak a jótállás időtartama alatt a kontraktus vagy a jogszabály feltételei szerint kell helytállnia a hibás teljesítésér
730 Webshop törvény
731 Adatszolgáltatási kötelezettség A webáruház üzemeltetője köteles a beazonosításhoz, ill. a vele való kapcsolatfelvételhez szükséges adatokat, valamint a tevékenységének jogszerűségét igazoló adatokat közzétenni.
732 Szerződéskötés szabályai A webáruház szerződési feltételeit letölthető és nyomtatható módon kell közzétenni! A megrendelést pedig haladéktalanul visszaigazolni.
733 Szolgáltató felelőssége A webáruház üzemeltetője felel az általa rendelkezésre bocsátott, jogszabályba ütköző tartalmú vagy jogos érdeksérelet okozó információért.
734 2001. évi CVIII. törvény Webáruházak esetén, mivel egy webshop gazdasági tevékenységet folytat, így rendelkezéseit alkalmazni kell.
735 Adatvédelem A webáruház üzemeltetője kezelheti a szolgáltatási szerződés elkészítéséhez és számlázáshoz szükséges adatokat.
736 Webshop rendelet
737 45/2014. (II. 26.) Korm. rendelet A webáruházakban történő vásárlás tipikus példája a távollévők között kötött szerződésnek, hiszen a felek egyidejű fizikai jelenléte nélkül úgy köttetnek.
738 Közös szabályok A webáruház telefonos ügyfélszolgálata nem lehet a vásárlók számára emelt díjas szolgáltatás.
739 Megelőző tájékoztatás A webáruház köteles világosan és közérthető módon, a szerződéskötést megelőzően tájékoztatni a vásárlót
740 Formai követelmények A vásárlók tájékoztatásának közérthetőnek, és számukra tartós adathordozón elérhetőnek kell lennie. (PDF formátum)
741 Elállási jog A Kormány rendelet hatálybalépésétől elállási jogát 8 munkanap helyett, 14 napig gyakorolhatja.
742 Kötelezettségek elálláskor A webáruház tizennégy napon belül köteles visszatéríteni a vásárló által ellenszolgáltatásként megfizetett teljes összeget.
743 Elállási mintatájékoztató A webáruház a vásárlók elállási jogával kapcsolatos tájékoztatási kötelezettségét a Kormány rendeletmellékletében található Elállási mintatájékoztató felhasználásával is teljesítheti.
744 Kivételek Az általános szerződési feltételekben mindenképp jelezni kell, hogy a vásárló mely termékek esetén élhet az elállás jogával.
745 Mintatájékoztató A webáruház kellékszavatossággal a termékszavatossággal és a jótállással kapcsolatos tájékoztatási kötelezettségek teljesítéséhez a Kormányrendelet 3. melléklete tájékoztató mintát tartalmaz.
746 Nyilatkozatminta A webáruháznak a vásárló számára az elállási joga gyakorlásához nyilatkozatmintát kell közzétenni, amelyet a vásárló adatait kitöltve visszaküldhet.
747 Tisztességtelen kereskedelem
748 2008. évi XLVII. törvény Ha a webáruház oldalain a termékek tulajdonságait hibásan vagy megtévesztő módon adja közre, akkor az üzemeltető nem csak a vásárló kártalanítására kötelezhető (lásd PTK), de tisztességtelen kereskedelmi gyakorlat miatt is eljárás
749 Minta ÁSZF
750 ÁSZF minta A jelen ÁSZF tartalmazza a WEBÁRUHÁZ NEVE (továbbiakban Webáruház) használatának feltételeit az alábbiak szerint:...
751 Adatvédelem
752 2011. évi CXII. törvény Az információs önrendelkezési jogról és az információszabadságról törvény célja az adatok kezelésére vonatkozó alapvető szabályok meghatározása, hogy a természetes személyek magánszféráját az adatkezelők tiszteletben tartsák,.
753 Adatkezelés elvei, jogalapja A webáruház által személyes adat akkor kezelhető, ha ahhoz az érintett, esetünkben vásárló, a tájékoztatását követően hozzájárul.
754 Adatbiztonság követelménye A webáruház készítője és üzemeltetője köteles minden elvárható módon védeni a vásárlóknak a webáruházban kezelt személyes adatait.
755 A vásárlók jogai A vásárló tájékoztatáshoz fűzódő joga keretében biztosítani kell, hogy tudomást szerezhessen arról, adatait ki, hol, milyen célból kezeli, azokhoz milyen forrásból jutott hozzá,
756 Előzetes tájékoztatás A vásárlót tájékoztatni kell, hogy az adatkezelés hozzájáruláson alapul, valamint egyértelműen és részletesen tájékoztatni kell adatai kezelésével kapcsolatos minden tényről.
757 Webáruház nyilvántartás Ha a webáruház a vásárlók adatait csak a megrendelések teljesítése érdekében használja, és megfelel a válaszban felsorolt feltételeknek, akkor a a web áruház működtetését nem kell bejelenteni.
758 Jogorvoslati lehetőségek A vásárló adatkezeléssel kapcsolatos jogairól és jogorvoslati lehetőségei: Tiltakozhat személyes adatának kezelése ellen. Bírósághoz fordulhat.
759 Sérelemdíj Ha a webáruház a vásárló adatainak jogellenes kezelésével, illetve az adatbiztonság követelményeinek megszegésével az vásárló személyiségi jogait megsérti, a vásárló az adatkezelőtől sérelemdíjat követelhet.
760 Minta adatvédelmi tájékoztató
761 Adavédelmi tájékoztató A(z) CÉGNÉV (továbbiakban: Adatkezelő) online értékesítési tevékenységével kapcsolatban kezeli a regisztrált felhasználók személyes adatait, kizárólag a megrendelések teljesítésének céljából.
762 Akadálymentes webáruház

763 Akadálymentes webergonómia
764 Akadálymentesítés és webergonómia Cél, hogy minél nagyobb felhasználói kör számára jól használható webhelyek, webáruházak készüljenek, amelyeken a felhasználó könnyen megtalálja amit keres.
765 Az akadálymentesítés célja A webhelyek többségének célja, hogy minél több felhasználó számára tegyen elérhetővé információkat.
766 Mindenki küzdhet akadályokkal! Számtalan akadály keseríti az internet felhasználók életét. Ezért gyakran nem díjazzák, ha egy webáruház készítői tovább nehezítik.
767 Akadályozott felhasználók
768 Érzékszervi akadályok Egy weboldalon közvetített információkat a látogató látás, hallás és ha ez nem lehetséges tapintás útján érzékeli.
769 Mozgásszervi akadályok A mozgáskorlátozottság a végtagremegéstől a valamennyi végtag hiányáig sok mindent jelenthet.
770 Technikai akadályok A webáruházat a látogatók megtekinthetik nagy felbontású monitoron, a TV képernyőjén, laptopon, táblagépen vagy okos telefonon is.
771 Az idő pénz A látogatók nagy részének nincs ideje arra, hogy kivárja lassú oldalak betöltődését vagy találgassa miként juthat a keresett információkhoz.
772 Kognitív akadályok Alapvető cél, hogy egy látogató minél könnyebben megtalálja a keresett terméket, a vásárlási döntéséhez szükséges információkat, és átlássa a vásárlás menetét.
773 Webergonómiai követelmények
774 Értékes információtartalom A szöveges leírás legyen tömör és objektív. A termékről közreadott kép megerősíti a látogatót abban, hogy jó helyen jár.
775 Átlátható oldalelrendezés Ha egy új felhasználó érkezik a webáruház bármely oldalára igyekszik gyorsan eldönteni: Hova érkezett? Jó helyen jár? Megtalálhatja itt amit keres?
776 Konvenciók A felhasználók otthonosan érzik magukat egy weblapon, ha struktúrája ismerős számukra, és megtalálják az ismerős tartalmi és navigációs elemeket.
777 Átlátható oldalstruktúra Végignézve egy tankönyv tartalomjegyzékét azonnal átláthatjuk a tananyag struktúráját. Főbb témaköreit, a témakörök alfejezeteit végül a tárgyalt fontosabb fogalmakat, eseményeket vagy jelenségeket.
778 Egyértelmű navigáció A felhasználónak mindig kell tudnia, hogy éppen hol tartózkodik az oldalon belül, és merre mehet tovább.
779 Szöveges tartalom Az interneten a felhasználók többsége nem olvassa el a hosszú szöveges tartalmakat. Gyorsan végigfutja a címsorokat, linkfelíratokat és eldönti, hogy merre tovább.
780 Jól kiválasztott médiaelemek Ne jelenítsünk meg a szöveget képként, nyomós ok nélkül!
781 Igényes megjelenés Nagyban hozzájárúl a frissen érkező látogatók megtartásában a professzionális megjelenés.
782 Felhasználói hibák javítása Jogaszályban előírt kötelezettség is, hogy a felhasználó adatait, a megrendelésének adatait ellenőrizni és az általa felfedezett hibákat javítani tudja.
783 Böngészőfüggetlen webáruház Reális cél, hogy a minden, elterjedt böngésző legtöbb változatában hasonlóképpen jelenjen meg egy weboldal.
784 Ez az aminek látszik? A felhasználók elbizonytalanításának legbiztosabb módja, ha a kattintható HTML elemeket nem találják. Amire azt hiszik, hogy link az nem vezet sehova.
785 Könnyű bővítés, módosítás Lehetővé kell tenni, hogy kevés informatikai ismerettel rendelkező adminisztrátorok gyorsan és egyszerűen bővíthessék vagy módosíthassák a webáruház tartalmát.
786 Webáruház akadálymentesítése
787 WCAG 2.0 útmutató Az internetes honlapok komplex akadálymentességének nemzetközileg legelfogadottabb alapja a W3C szervezet vonatkozó útmutatója, a WCAG 2.0..
788 WCAG 2.0 irányelvek 1. Alapelv: Észlelhetőség, 2. Alapelv: Működtethetőség, 3. Alapelv: Érthetőség, 4. Alapelv: Robusztusság,
789 Nem szöveges tartalom A nem szöveges formában közreadott információnak szöveges alternatíváját is elérhetővé kell kell tenni a weboldalon.
790 Színek, színárnyalatok, formák Nem lehet a szín vagy a forma vagy méret vagy az elhelyezkedés vagy az irány az egyetlen vizuális módja az információ közvetítésének, a figyelem felkeltésének vagy a vizuális alkotóelemek megkülönböztetésének!
791 Strukúrált HTML kód Egy weboldal átlátható felépítése, szerkezeti elemeinek megkülönböztetése, az összefüggő tartalmi elemei összetartozásának felismerése egyaránt fontos minden felhasználó számára.
792 Hanganyagok, hanghatások Amennyiben egy Weboldal automatikusan hanganyagot játszik le, melynek hossza több 3 másodperc, akkor annak a felhesználó által szüneteltethetőnek, megállíthatónak kell lennie, vagy lehetővé kell tenni számára a hangerő rendszerfüggetlen s
793 Billentyűzet csapda nélkül A webáruház minden funkciója elérhető kell legyen csak billentyűzet használatával!
794 Időzítések A webáruház minden funkciója eléréséhez, és a kapcsolódó tartalom elolvasásához megfelelő időt kell hagyni a felhasználóknak!
795 Mobilbarát webáruház

796 Böngészőfüggetlen webáruház
797 Böngészőfüggetlenség Egy modern webáruház esetén alapkövetelmény, hogy a legelterjedtebb böngészőket használó látogatók számára egyformán jól használható legyen.
798 Megvalósítás A böngészőfüggetlenség feltételei: Szabványos és hibátlan HTML és CSS kód. A működőképesség megőrzése kikapcsolt JavaScript esetén is.
799 Böngészők sajátosságai Fontos, hogy minden látogató számára az eszköze, operációs rendszere és böngészője képességeihez mérten a legjobb felhasználói élményt, a legjobban kezelhető webáruházat nyújtsuk.
800 Karakterek használata Különböző operációs rendszerek különböző fontkészleteket használnak. A Google web fontok bitosítják leginkább a webáruház egységes megjelenítését.
801 A webáruház ellenőrzése A HTML és CSS kódok objektív módon ellenőrizhetők a W3C (World Wide Web Konzorcium) által közzétett online eszközök segítségével.
802 Responsive webáruház
803 A responsive web design A responsive web design (RDW) azt jelenti, hogy az weboldal tartalma mindig a rendelkezésre álló mérthez igazodó rugalmas elrendezésben jelenik meg.
804 Fix kétoszlopos szerkezet A mobil böngészők, a fix szélességű weboldalakat rendszerint kicsinyítve jelenítik meg.
805 Folyékony kétoszlopos oldal Folyékony oldalelrendezésnél az oszlopszélesség beállítására fix értékek helyett a befoglaló terület %-os értékét szokás megadni.
806 Hibrid kétoszlopos szerkezet A tartalom div kitölti a rendelkezésre álló ablakot. A fix szélességű menü számára szükséges helyet a margó biztosítósítja.
807 Helyi menü elrejtése Zavaró, ha kis felbontású képernyőn rendelkezésre álló ablak nagy részét a menü foglalja el. Megadjuk a lehetőséget a menüoszlop elrejtésére.
808 Inline-block használata Responsive webáruház esetén gyakori feladat, hogy a megjelenített tartalmak információs blokkokba rendezve, egymást követő téglalap alakú területeken jelenítsük meg.
809 Úsztatott blokkok használata Népszerű és gyakran használt megoldás. Az úsztatott (Float) blokkokat követő szöveggel kitölthető a fennmaradó terület.
810 Felbontásfüggő stílusok A felhasználó által használt médiához és annak felbontásához jól illeszkedő stíluslap készítésében segít a médialekérdezés (query).
811 Médialekérdezés operátorai A médialekérdezésnél (@media) használható operátorok bemutatása.
812 Média tulajdonságok A médialekérdezéssel (@media) vizsgálható média tulajdonságok bemutatása.
813 Responsive táblázatok HTML5-ben a táblázatok szerepe az adatok áttekinthető módon történő közzététele. Kis felbontásnál a szokásos táblázatos felépítés nem használható. Vagy mégis?
814 Mobilbarát webshop
815 Mobilbarátság előnyei Responsive web design (RDW) esetén elég egy webáruházat készíteni és később továbbfejleszteni, karbantartani.
816 Mobilbarát webáruház készítése A PC-én és mobiltelefonon érkező látogatók ugyanazt a tartalmat látják, csak más elrendezésben.
817 Viewport beállítása Mobilbarát weboldal esetén nem lehet vízszintes görgetés, ezért a viewport beállítása elkerülhetetlen.
818 Mobilbarát teszt Ellenőrizzük a webáruház letöltési idejét és mobilbarát felépítését Google segédeszközök segítségével.
819 Megjelenítési idő csökkentése Mobil készülékek esetén gyakran csupán kis sávszélesség áll a felhasználó rendelkezésére, amit a webáruházak tervezésénél is figyelembe kell vennünk.
820 Szelektív cache beállítás Az Apache webszerveren a .htaccess fájlban elhelyezett ExpiresByType direktíva használatával minden MIME típusnak beállíthatunk egy saját elévülési időt.
821 Böngésző gyorsítótárazás példa Példakódunkban fájltípus szerint csoportosítottuk a lejárati idők beállításait. A lejárati időt a webáruház sajátosságainak megfelelően lehet módosítani.