Elsőként nézzük meg az online kódszerkesztőket. Ezek olyan kódszerkesztők, amelyek az interneten találhatóak. A használatukhoz nem kell semmit telepítened a gépedre, mivel a böngészőből futnak. A legtöbbjük ingyenesen használható, azonban előfordulhat, hogy regisztrálnod kell majd a használatuk előtt.

Az online kódszerkesztőket két csoportra fogjuk osztani:

• Csak weboldalak készítésére alkalmas kódszerkesztők
• Bármilyen típusú program fejlesztésére alkalmas kódszerkesztők

Ebben a leckében a weboldalak készítésére alkalmas kódszerkesztőket nézzük meg, és még egy apróbb feladat is vár rád a lecke végén.

Megjegyzés: Fontos kiemelni, hogy az online kódszerkesztőket legtöbbször apróbb kódrészletek kipróbálására használják. A tényleges, összetett programokhoz asztali kódszerkesztőket célszerű igénybe venni.

A webfejlesztéshez kialakított kódszerkesztők leggyakrabban az alábbi módon néznek ki:

Megjegyzés: A kis panelek elrendezése bárhogyan személyre szabható és méretezhető. Egy-egy panel akár el is rejthető.

Ha látni szeretnéd a megírt kódod eredményét, akkor le kell futtatnod azt. Ezt a legtöbbször a Run gombbal tudod megtenni. Nézz körül a szerkesztőprogramodban, ott kell lennie valahol.

Feladat

Most, hogy már tudod hogyan épülnek fel a weboldalak fejlesztésével foglalkozó online kódszerkesztők, itt a lehetőség, hogy megtekintsd élesben is a működésüket.

Megjegyzés: A következőkben adunk neked egy jó pár sor számodra ismeretlen kódot. Teljesen rendben van, ha még nem érted, hogy mit jelentenek ezek. A hangsúly most azon van, hogy képes legyél boldogulni egy még számodra ismeretlen eszközzel, úgy, hogy a felépítéséről szóló tudás már a kezedben van.

Első lépésként nyisd meg ezt az oldalt. Ha figyelmesen olvastad végig a leckét, akkor már észre is vetted, hogy rendelkezik mindazon részekkel, amelyeket a lecke során bemutattunk.

Hogy ne csak az üres kódszerkesztőt nézegesd, lentebb találhatsz pár sor kódot, amelyeket a megfelelő helyre beillesztve egy szuper oldal fog eléd tárulni.

A html kód:

A css kód:

A javascript kód:

Ha sikerült mindent a megfelelő helyre bemásolnod, akkor ezt az oldalt fogod látni: