Bár remélhetőleg az oktatás és a fejlődés (?) hatásaként egyre kevésbé lesz értelme ennek a weboldalnak, de biztosan vannak még, akiknek hasznos lehet. Nekem például, 35 évesen még fogalmam nem volt arról se, hogyan kell bekapcsolni egy számítógépet...
A weboldal célja:
-Egyszerű számítási, játék, stb. programok megírásának, a programozás alapjainak elsajátítása.
-Egyszerű számítási, játék, stb. programok megírásának, a programozás alapjainak elsajátítása.
-Robotok, egyéb eszközök, vezérlésének elsajátítása, sőt, akár pusztán vezetékből, vasból egy komplet számítógép megépítésének képessége .
-Ezeket minél egyszerűbben, és minél kevesebb ráfordítással, néhány óra, pár nap, pár hét alatt elérni!
Például képes leszel egy ilyen apró lottó program megírására:
(Megjósolja a jövőheti lottószámokat! Az első mezőbe írd be hányas lottót játszol (pl 90), a másodikba, hogy hány számot húznak ki (pl.5). Játszd meg, szerencsét fog hozni, meglátod, de a millió feletti nyeremény 5%-át kérem jutalékként!)
vagy robotkart, vagy a mobiloddal vezérelni egy saját építésű quadcoptert, vagy akár egy 3D-s nyomtatót készíteni (a kapcsolódó projektek a menüben jobboldalt)!
Alapok:
A számítógép alapjai nagyon régiek, ha bővebben érdekel olvasd el a wikin!
Például képes leszel egy ilyen apró lottó program megírására:
(Megjósolja a jövőheti lottószámokat! Az első mezőbe írd be hányas lottót játszol (pl 90), a másodikba, hogy hány számot húznak ki (pl.5). Játszd meg, szerencsét fog hozni, meglátod, de a millió feletti nyeremény 5%-át kérem jutalékként!)
vagy robotkart, vagy a mobiloddal vezérelni egy saját építésű quadcoptert, vagy akár egy 3D-s nyomtatót készíteni (a kapcsolódó projektek a menüben jobboldalt)!
Tehát a cél az volt, hogy minél egyszerűbben, és gyorsabban elérjük a felsoroltakat. Ehhez kerestem meg a legegyszerűbb módszereket, programnyelveket, és fejlesztői környezetet (szoftvereket), hogy egy teljesen laikus, akár egy, a műszaki világot nem ismerő is, néhány óra, pár nap alatt elérhesse, hogy MacGyverként építhet eszközöket. Fontos! Nem azért dolgozok, hogy balliberális magyar- és fehérgyülölőként népirtónk legyél, ezt tartsd észben! Ha balib vagy, akkor főleg ajánlom politikai honlapjaim elolvasását, és az általuk reményeim szerinti megvilágosodást is, mert leginkább nem a technológiát, hanem a társadalmat kellene fejlesztenünk. Könyörgöm, ne légy ballibant! Na, de csapjunk bele!
Alapok:
A számítógép alapjai nagyon régiek, ha bővebben érdekel olvasd el a wikin!
Először ne a számítógépet nézzük, hanem az autómatákat, és a vezérlésüket. Mi az autómata? Olyan gép, amely jelentős részben magától, emberi beavatkozás nélkül, saját vezérléssel működik. Igazából autómatát nem túl nehéz készíteni, sőt, elég egyszerű. Nézzük a részleteket!
Én leginkább egy zenedoboztól indulnék ki:
https://www.youtube.com/watch?v=zUM6DeZvZH4
Itt már lyukszalag tartalmazza az információt, hogy a hangfésű melyik foga mikor pendüljön meg:
https://www.youtube.com/watch?v=LLgd72t4brA
https://www.youtube.com/watch?v=zUM6DeZvZH4
Itt már lyukszalag tartalmazza az információt, hogy a hangfésű melyik foga mikor pendüljön meg:
https://www.youtube.com/watch?v=LLgd72t4brA
Ha a zenedoboz fésűiből elektromos érintkezőket csinálnánk, akkor nem hang, zene, hanem például LED-ek (olyan kis villanykörtéhez hasonló világító izék) kapcsolnának be-és ki. (A monitor vagy 3 millió ilyen kis "lámpából" áll, és ezek fel, és lekapcsolásának a kombinációjából bármilyen képet kirajzolhatunk.) Ilyen elven pedig akár egy robotkart, vagy egy gyártósori robotot is lehet vezérelni! A mosógépek zöme ma is ezen (a zenedoboz) az elven működnek. Az autómatáknak, és a számítógépnek is az alapja a kapcsoló. Sok kapcsoló be-ki kapcsol, ez a működésének az alapja. Ügye milyen egyszerű? Sőt! Ami még meglepőbb, hogy sokmilliárd ilyen be-ki (flip-flop) kapcsolóból megépíthető az embernél is értelmesebb valódi élőlény. Az ember eléri a teremtés egy egészen magas szintjét. Megdöbbentő, csodálatos, és veszélyes is egyben...
Mi a számítógép?
Sok száz, ezer éve, a mechanikától, az elektromechanikán át zajlott a fejlődés az elektronokáig. Az első automaták, de az első számológépek is mechanikusak voltak, majd leginkább elektromechanikus kapcsolók (jelfogók, relék) alkalmazásával elektromechanikusok, amelyek úgy működnek, hogy áramot vezetünk egy tekercsbe, amely mágnesessé válik, és az magához, és egymáshoz húz egy lágyvasat tartalmazó érintkezőt, majd ezeket az elektromechanikus kapcsolókat cserélték fel a jóval kisebb és olcsóbb elektronikusra, leginkább a tranzisztorra, amelyből néhány négyzetcentiméteren akár milliárdnyi mennyiséget is ki lehet építeni. Ahogy már írtam, automatákat elég egyszerű készíteni, például mosógépet, robotot, de a számológép se annyira bonyolult, bár most itt nem megyek bele a részleteibe. Ezek mind automaták. Először számológépeket készítettek, majd ezekből alakult ki a számítógép. Mi a különbség a számológép és a számítógép között? Az, hogy a számológép egy speciális automata, a számológép pedig univerzális. Egy idő után ugyanis arra törekedtek, hogy a számológép ne csak egy-egy művelet félét tudjon végrehajtani, hanem minél többfélét. Tehát ne csak összeadni tudjon, hanem osztani is, majd mivel mindenféle automatára szükségünk lehet, és mivel az automaták alapja ugyanaz, adódott, hogy olcsóbb, ha nem minden feladatra külön gépet kell készíteni, hanem érdemes az alapokat egy gépben megtestesíteni, és egy univerzális automatát csinálni. Tehát képzeljük el, hogy szükségünk van egy gépre, amely rajzol, egy másikra, amely lézergravíroz, és egy harmadikra, amely 3D nyomtat, meg egy negyedikre, amely szoroz! Ezeknek a gépeknek az alkatrészei akár több, mint 90%-ban megegyeznek. Ha ilyen gépekre van szükségünk, akkor gondolkozhatunk abban, hogy egy univerzális hardverkonfigurációt állítunk össze, egy olyan gépet, amely mindezeken a funkcióban használható, így négy gép helyet, csak egynek kell a lakásban teret szorítanunk, és az alkatrészek több, mint 90%-ából is elég egyszeres mennyiség négy helyett. A számítógép szerény, és személyes véleményem szerint ez, vagyis egy olyan univerzális hardverkonfiguráció, amely a lehető legszélesebb körben tud funkcionálni a legkülönbféle automatikaként, a számológéptől, a robotig. Ezért a számítógép kiépítésénél a legkülönbfélébb automatákat közös működési alapra hozzuk, és így max. kisebb, könnyen csatlakoztatható perifériákra lehet csak szükségünk, ha valamilyen különlegesebb automatika funkcióra is van szükségünk éppen. Ami még fontos, hogy az univerzális automatánk, azaz a számítógépünk fontos része, hogy programozható legyen, mert a programok cserélésével lehet a gépet használni hol erre, hol arra a funkcióra. Itt pedig máris elérkeztünk a memóriához.
Emlékezzünk vissza egy kicsit a zenedobozra!
A lyukszalagon lévő lyukat 1-nek jelölik a számítástechnikában, amikor nincs lyuk, akkor azt 0-nak.
A lyukszalagon lévő lyukat 1-nek jelölik a számítástechnikában, amikor nincs lyuk, akkor azt 0-nak.
A számítógépben manapság olyan "lyukszalagot" használnak amelyen egy sorban nyolc oszlop lyukhely van, vagyis nyolc fésűs. Tehát nyolc LED-ed (vagy villanykörtét, stb.) lehet vele egyszerre vezérelni. A lyuk helyét bitnek hívjunk. A bit szó egy angol rövidítés, a binary digit szavakból áll össze, jelentése: bináris (kétértékű) számjegy. A nyolc bitet összesen, vagyis egy sort bájtnak (Byte ) hívunk. Tehát ha a nyolc oszlopos lyukszalagunkon az első sorban nincs lyuk, akkor az így írjuk le:
00000000 ha pedig minden helyen lyuk van, akkor így: 11111111. Ha pedig ezt írom: 00100001 akkor az azt jelenti, hogy abban a sorban csak kettő lyuk van, amikor ehhez a sorhoz ér a fésű, akkor a harmadik, és a nyolcadik LED világít. Az egész lyukszalagot le lehet írni így egy jó hosszú, a 0 és 1 kombinációjából álló sorral. Ezt hívják gépi kódnak. Amikor csinálsz egy ilyen lukszalagot, akkor programozol. Még annyit, hogy amikor beszélnénk erről a lyukszalagról egymás között, és annak az egyik lyukhelyéről, akkor azt ehhez hasonlóan tennénk.
-A kilencedik sorban a második bitnél (vagy oszlopban lévő lyukhelynél) el van tépődve a papír.Tehát megadnánk a lyukhelynek a koordinátáját, vagyis címet adnánk neki. A gyakorlatban a számítógép memóriahelyeinek, és részegységeinek vannak címei, és a kód tartalmazza a címet, hogy melyik bitet írjuk 1-re egy memoriaegységben, vagy azt, hogy éppen melyik számítógép részegység mit csináljon.
https://www.youtube.com/watch?v=z7Rb5vL2LV0Nyilván a számítógép összetettebb, mint a mi elképzelt "zenedobozunk". Ahhoz, hogy a számítógéphez gépi kódot írjunk, szintén ismernünk kell a gép felépítését, de azt nem lehetne néhány óra alatt megtanulni... Ezért elkezdték a programozást egyszerűsíteni.
Kitaláltak programnyelveket, és azokhoz fordítókat, amelyen keresztül elkezdhetünk programozni úgy, hogy nem ismerjük részleteiben a számítógép felépítését. Mi megírjuk a programot valamilyen programnyelven, majd a számítógép lefordítja azt magának gépi kódba.
Először a bájtot rövidítették le, és kialakították a hexadecimális kódolást, majd az első nyelv az Assemble következett, amely a legközelebb áll a gépi kódhoz. Ez volt az első generációs nyelv. Most a negyedik generációs nyelveknél tartunk, amelyeknél arra törekednek, hogy minél több ember, minél egyszerűbben tudjon kódolni, programozni.
Első körben elég ennyit tudni a számítógép működéséről, ha bővebben érdekel, itt gyerekeknek szóló írásban részletesebben elmagyarázzák:
http://www.ep128.hu/Sp_Konyv/Baratunk_a_Szamitogep.htm
Tartalom:
-Ezen az oldalon a továbbiakban, a HTML és a CSS alapjaival ismerkedhetek meg,
- A második oldalon a JavaScript alapjaival, és elsajátítjátok hogyan lehet böngészőbe használható programokat írni, illetve a programozás alapjait.
- A harmadik oldalon a nyomtató csatlakozóján keresztül képesek lesztek dolgokat, robotokat vezérelni Visual Basic nyelven.
- A negyedik oldalon mikróvezérlők (önálló robotok) vezérlése a cél, így a C nyelv egy célspecifikus változatával ismerkedünk meg. USB-n keresztül szintén használni fogjuk a Visual Basic-et is, és egy picike JavaScript példa is lesz, de inkább csak az érdekesség kedvéért.
-Az ötödik oldalon mobilapplikációk készítéséről lesz szó.
- A többi oldalon példaprojektek vannak.
Haladj sorrendben!
HTML alapjai.
Csináljuk meg az első honlapunkat, egy html fájlt!
Nyisd meg a Jegyzettömböt (vagy újabban a wordpad-ot), és írd, vagy másold be ezt:
<html>
Hello világ!
</html>
A másik dolog, amiről felismeri a számítógép, hogy html kódolással van dolga, a kiterjesztésen kívül, hogy a kódban megmondjuk neki.
Láthatod, hogy a html kódnak van egy kezdő része, és egy záró része. A záró rész egy plusz ilyen per jelet / tartalmaz. A kód mindig arra vonatkozik, amely a kód kezdő és záró része között van. Tehát itt ez most azt jelenti, hogy html nyelven van a kód közötti rész.
Most a Jegyzettömbben kattints a File menüre, majd a Mentés másképpen, és mentsd el ezekkel a beállításokkal:
File névnek ezt írd: elso.html
File típusa: minden file
File kódolás: Unicode
A letöltés helye oldalt legyen a dokumentumok, vagy az asztal, mindegy csak találd majd meg. Majd mentés gomb. Itt jegyzem meg, a programozás általában nem szereti az ékezetes betűket. Fájlnévbe se használd (elso)...
Most keresd meg, ezt a fájlt, és kattints rá! A böngésződ fogja megnyitni, mint egy honlapot, mert az is.
<html>
<b> Ez a szöveg félkövér lesz. </b>
<h1>Ez a rész pedig normál.</h1>
</html>
Most láthatod, hogy a szöveg, ami az egyik új kód között van, félkövér lett, a másik kódtól meg nagy.
Mint ahogy írtam, inden kódnak van egy kezdő, és egy befejező része, de mutatok egy kivételt: <br>
<html>
<b> Ez a szöveg félkövér lesz. </b><br>
<h1>Ez a rész pedig normál.</h1>
</html>
Ettől a <br>-től pedig új sorba került a szöveg...
Egy honlap minimum ezekből a részekből áll: maga a html, a cím (title), egy fejrész (head), mint ahogy ennek a honlapnak is van, és egy test (body).
Minden html részt új sorba szokás írni, kivétel a cím, a szöveg, és a formázásához való kódokat, amelyek egy sorban vannak.
<html>
<title>Ez a címe a honlapnak</title>
<head>
<h1>Az egy felső rész.</h1>
</head>
<body>
Ez a test rész. Itt van a hosszú szöveg, a tartalom nagy része.
</body>
</html>
Erről a lapról kinézhetsz egyéb formázási kódokat is:
http://htmliskola.uw.hu/tan04.html
pl. a honlap színét, és a betűszíneket is variálhatjuk a kódokkal:
<html>
<title>EZ a címe a honlapnak</title>
<head>
<h1>Az egy felső rész.</h1>
</head>
<body bgcolor="#87ADD3">
<font color="yellow">Az a test rész. Itt van a hosszú szöveg, a tartalom nagy része. </font>
</body>
</html>
Ezen a honlapon megismerheted a html kódolás alapjait, kb. 1 óra alatt.
http://htmliskola.uw.hu/tan01.html
Itt pedig gyakorlatilag kipróbálhatod az összes HTML kódot:
https://www.w3schools.com/html/
Folytatva:
Ami nekünk fontos, például egy összeadást végző programhoz, az a beviteli mező html kódja, illetve
alapból két dolog kell nekünk, egy olyan beviteli mező, amibe számot, vagy szöveget írhatunk, pl. egy ilyen:
<input name="valamiadat">
és egy gomb, aminek a megnyomásával például megkapjuk egy számításnak az eredményét, pl. egy ilyen:
<input type="button" value="Klikkelj rám" onclick= "plusz();" />
Most ezek beleillesztve a honlapunkba, így néz ki a teljes kód:
<html>
<title>Ez a címe a honlapnak</title>
<head>
<h1>Az egy felső rész.</h1>
</head>
<body bgcolor="#87ADD3">
<font color="yellow">Az a test rész. Itt van a hosszú szöveg, a tartalom nagy része. </font><br>
<br>
<input name="valamiadat">
<input type="button" value="Klikkelj rám" onclick= "plusz();" />
</body>
</html>
Persze tapasztalhatod, hogy lenyomva a gombot most semmit nem csinál, majd a második részben mutatom meg, hogy kell egy gombnak funkciót adni! Természetesen többféle beviteli mező van, legördülő menű, rádió gomb, stb.
Itt az alapvető kódokat megtalálod:
http://www2.akg.hu/info/11-12/html.html
Ezzel ki is lőttük a HTML programozás számunkra fontos részét!
CSS programozás!
Csináljunk egy CSS kóddal formázott lapot:
A CSS kódot ez:
és ez közé kell írni:
Példa egy teljes HTML kódba:
<html>
<head>
<title>Lottó</title>
<style type="text/css"><!--
body { font-family: Arial, Helvetica, sans-serif; font-weight: bold;font-size: 40px;
color: #58408F; text-align: center; background-color: #6BB4DF;}
h1 { font-size: 30px; color: #a00000}
input[name="mennyibol"] { color: #E81569}
input[type="button"] { color: #00a000}
</style>
</head>
<body>
<h1>Ez egy CSS-sel formázott oldal!</h1>
<input name="mennyibol"> <input name="mennyi"> <input type="button"
value="A számokért klikkelj rám" onclick= "plusz();" />
</body>
</html>
Ezzel le is tudtuk a CSS formázást. Erről a weboldalról lelesheted azt a kódot, amire szükséged van, ha pedig ott nem találod meg, akkor beütöd a google-ba, hogy pl. félkövér betű css kód, és bizonyosan rá fogsz találni!
A késöbbiekben tervezek egy olyan számítógép elkészítését, amely teljes mértékben házilag elkészíthető minden alkatrészét tekintetbe véve csupán vezetékből, és némi mágneses anyagból, a számítógép működésének részletesebb megismerésének céljából. Tehát a weboldal elolvasása után elméletileg rellékből, tehát vezetékből, és lágyvasból képes leszel egy számítógép kiépítésére is. Ezen is dolgozom éppen...
Ha mélyebben érdekel, akkor ezeket a videókat ajánlom még, de nem szükségesek a tovább lepéshez:
A számítógép története:
Az első hatékony számolást segítő eszközök 1:
Az első hatékony számolást segítő eszközök 2:
Az órásmesterség, és az informatika:
IT evolúció. Logarlécek:
Mechanikus kalkulátorok:
A Curta, a mechanikus számológép csúcsa:
Egy mechanikus számítógép:
Videón:
Mechanikus számítógép szimulációja:
A számolás korai segédeszközei 1.:
A számolás korai segédeszközei 2.:
Korai számolást segítő eszközök és technikák 1:
Korai számolást segítő eszközök és technikák 2:
Információtárolás története 1:
Információtárolás története 2:
Az információtárolás korai technikái:
Mechanikus és elektronikus számítógépek története 1:
Mechanikus és elektronikus számítógépek története 2:
Tartalom:
-Ezen az oldalon a továbbiakban, a HTML és a CSS alapjaival ismerkedhetek meg,
- A második oldalon a JavaScript alapjaival, és elsajátítjátok hogyan lehet böngészőbe használható programokat írni, illetve a programozás alapjait.
- A harmadik oldalon a nyomtató csatlakozóján keresztül képesek lesztek dolgokat, robotokat vezérelni Visual Basic nyelven.
- A negyedik oldalon mikróvezérlők (önálló robotok) vezérlése a cél, így a C nyelv egy célspecifikus változatával ismerkedünk meg. USB-n keresztül szintén használni fogjuk a Visual Basic-et is, és egy picike JavaScript példa is lesz, de inkább csak az érdekesség kedvéért.
-Az ötödik oldalon mobilapplikációk készítéséről lesz szó.
- A többi oldalon példaprojektek vannak.
Haladj sorrendben!
HTML alapjai.
A HTML a weboldalak egyszerű nyelve. Ma már több nyelven is csinálnak weboldalakat, de ez az alap. Ez lényegében a file. Olyan, mintha írnál egy szöveges dokumentumot. Azt elmented. Más által is megoszthatóvá teszed. Azok letöltik a gépükre, és elolvassák.
Írjunk egy weboldalt!Ehhez első körben olyan szövegszerkesztőt fogunk használni, amelyik nem tesz formázásokat a szövegbe. Amikor programozunk akkor ilyenek nem lehetnek benne. Ezért nem tudunk Word-öt használni, de a WordPad se jó, viszont jó a Jegyzettömb. Frissítés! A Windows 10-ben a Wordpad a jó, nem a jegyzettömb! Ha Windows operációs rendszert használsz, akkor megtalálod ha a Start menüre kattintasz, majd Minden program gombra, majd a Kellékekben megtalálod.
Ha nem Windows használsz, akkor nézz utána, hogy a Te gépeden van e hasonló, vagy tölts le egy forráskód szerkesztő programot.Amire még szükséged van az az, hogy lássad a fájlok kiterjesztését. Ez azt jelenti, hogy ha megnyitod például a dokumentumok mappádat, és az ott tárolt fájlokra nézel, és azoknak csak olyan nevük van, hogy pl. kep1 , vagy nevtelen , stb., de nincs a név után pont, és utána két-három betűs rövidítés, akkor nem látod a kiterjesztésüket. Így kéne látnod a fájlokat, pl.: nevtelen.rtf vagy kepem.jpg A pont utáni rövidítés (rtf vagy jpg) azt jelöli a számítógépnek, hogy milyen programnyelvet illetve kódot tartalmaz a fájl, és így azon fogja elolvasni, így tudja használni.
Ha Windows operációs rendszered van, és nem látod a fájlok kiterjesztését, akkor így kell beállítanod:Start menü, vezérlőpult, Mappa beállítások, Ha nem látod a mappabeállításokat a vezérlőpultban, akkor a vezérlőpult nézetét át kell állítani. Windows7-nél Kategória, kis ikonok. Ekkor már megjelenik a mappabeállítások. Abban a Nézet fülön, a speciális beállítások ablakban vedd ki a pipát a Ismert fájltípusok kiterjesztéseinek elrejtéséből. Ezek után a fájljaid nevében látni fogod a rövidítéseket, de vigyázz, amikor majd esetleg átnevezel egy fájlt, akkor a rövidítést soha ne töröld, és ne írd át, mert akkor a fájlt nem fogja tudni használni, és megnyitni a számítógép, mert nem fogja felismerni milyen nyelven van kódolva, illetve, hogy melyik programmal nyissa meg!
Csináljuk meg az első honlapunkat, egy html fájlt!
Nyisd meg a Jegyzettömböt (vagy újabban a wordpad-ot), és írd, vagy másold be ezt:
<html>
Hello világ!
</html>
A másik dolog, amiről felismeri a számítógép, hogy html kódolással van dolga, a kiterjesztésen kívül, hogy a kódban megmondjuk neki.
Láthatod, hogy a html kódnak van egy kezdő része, és egy záró része. A záró rész egy plusz ilyen per jelet / tartalmaz. A kód mindig arra vonatkozik, amely a kód kezdő és záró része között van. Tehát itt ez most azt jelenti, hogy html nyelven van a kód közötti rész.
Most a Jegyzettömbben kattints a File menüre, majd a Mentés másképpen, és mentsd el ezekkel a beállításokkal:
File névnek ezt írd: elso.html
File típusa: minden file
File kódolás: Unicode
A letöltés helye oldalt legyen a dokumentumok, vagy az asztal, mindegy csak találd majd meg. Majd mentés gomb. Itt jegyzem meg, a programozás általában nem szereti az ékezetes betűket. Fájlnévbe se használd (elso)...
Most keresd meg, ezt a fájlt, és kattints rá! A böngésződ fogja megnyitni, mint egy honlapot, mert az is.
Most módosítsad a Jegyzettömbben a kódot az alábbira, majd File menüre kattints, és a Mentés gombra. Ezután frissítsed, vagy másképpen tölts újra (nyomd meg a böngésződ felső részében azt a gombot, amelyen egy nyíl önmagába fordul) a böngésződet!
<html>
<b> Ez a szöveg félkövér lesz. </b>
<h1>Ez a rész pedig normál.</h1>
</html>
Most láthatod, hogy a szöveg, ami az egyik új kód között van, félkövér lett, a másik kódtól meg nagy.
Mint ahogy írtam, inden kódnak van egy kezdő, és egy befejező része, de mutatok egy kivételt: <br>
<html>
<b> Ez a szöveg félkövér lesz. </b><br>
<h1>Ez a rész pedig normál.</h1>
</html>
Ettől a <br>-től pedig új sorba került a szöveg...
Egy honlap minimum ezekből a részekből áll: maga a html, a cím (title), egy fejrész (head), mint ahogy ennek a honlapnak is van, és egy test (body).
Minden html részt új sorba szokás írni, kivétel a cím, a szöveg, és a formázásához való kódokat, amelyek egy sorban vannak.
<html>
<title>Ez a címe a honlapnak</title>
<head>
<h1>Az egy felső rész.</h1>
</head>
<body>
Ez a test rész. Itt van a hosszú szöveg, a tartalom nagy része.
</body>
</html>
Erről a lapról kinézhetsz egyéb formázási kódokat is:
http://htmliskola.uw.hu/tan04.html
pl. a honlap színét, és a betűszíneket is variálhatjuk a kódokkal:
<html>
<title>EZ a címe a honlapnak</title>
<head>
<h1>Az egy felső rész.</h1>
</head>
<body bgcolor="#87ADD3">
<font color="yellow">Az a test rész. Itt van a hosszú szöveg, a tartalom nagy része. </font>
</body>
</html>
Ezen a honlapon megismerheted a html kódolás alapjait, kb. 1 óra alatt.
http://htmliskola.uw.hu/tan01.html
Természetesen vannak még egyéb kódok is, amikor felmerül valamire az igény, akkor ha az alapokat ismered, és most már be fogod tudni megfelelően illeszteni a kódodba.
És egy jó hír. A fentiek céljából nem kell megtanulnod fejből ezeket a kódokat. Van pl. olyan online program is, amelybe úgy szerkeszthetsz, mintha word dokumentumot csinálnál, és a forráskódját ki tudod menteni. Pl a következő linken. A forráskód gombbal meg tudod nézni a html kódját, és csak az innen-onnan szedett extra kódot kell beillesztened a programodba:
http://htmleditor.in/index.htmlItt pedig gyakorlatilag kipróbálhatod az összes HTML kódot:
https://www.w3schools.com/html/
Annyit még hozzátennék, hogy a html fájlt, vagyis az internet népének is meg lehet megmutatni, de ahhoz fel kell tölteni az internetre. Az internet, itt szervergépet jelent. Szervergép az, amelyiken egy szerver program fut. Elviekben a te számítógépeden is futhat szerver program, de ma már elvárás a szerver gépektől, hogy napi 24 órába be legyenek kapcsolva, és a rajtuk tárolt, és a szerverprogram segítségével mindenki felé megosztott honlapok éjjel-nappal elérhetőek legyenek. Ezért leginkább cégek üzemeltetnek ilyen szerver számítógépeket. Most nem cél részletesebben belemenni, de vagy fizetned kell évente egy ilyen szervergépet üzemeltető cégnek, hogy feltöltöd hozzájuk a honlapodat (html fájlodat), vagy egy reklámot helyeznek rá. Van azonban ingyenes, és reklámmentes megoldás, pl. az, amit most is olvasol, a google blogspot szolgáltatása. Az itteni reklámot én raktam rá, aminek a bevételéből részesedést kapok (már levettem a reklámot, mert nem akarnak fizetni, mivel néhány helyen kritizálom a bírálhatatlanokat).. Egyébiránt te alapba azért nem fogsz tudni általánosságban szervergépet üzemeltetni, mert az internetszolgáltatók dinamikus ip címet osztogatnak ki az embereknek. Ez azt jelenti, hogy a számítógépet elérésének a címe havonta változik. Ha szervergépet üzemeltetnél, és feltöltenéd a weboldalad rá, és annak az elérhetőségét linkelnéd valahol, akkor az a link így maximum 1 hónapig tudna működni. Ennek a dinamikus ip-nek még régen volt értelme, ma már azonban csak az a valódi funkciója, hogy ne tudj magad könnyen weboldalt megosztani, fizess valakinek ezért, aki cserébe még megmondja azt is, hogy mit írhatsz ki, mit ne, azaz cenzúrázhassanak. Ezt most csak érdekességként említettem meg, most ebbe nem merülünk el mélyebben.
Folytatva:
Az elkészült html fájlodra amikor megnyitod a böngésződdel, kattints jobb egérgombbal, és ott van egy olyan választási lehetőség, hogy az oldal forrásának megtekintése. Itt láthatod a kódodat, amit készítettél, és más html honlap kódját így meg tudod nézni.
Ma már nem csak html-be készítenek honlapokat, hanem más nyelveken is, pl. php, stb. Ezekkel úgynevezett dinamikus honlapokat lehet csinálni, amelyek elrejtik a forrásukat a felhasználók elől. A honlap ugyanis nem töltődik le a felhasználónál, hanem a program fő része a szerver gépen fút, és állít elő egy html oldalt, amit amikor felkeresed a weboldalt, akkor ideiglenesen letölt a számítógéped, és elolvas. Az ilyen lapok forráskódjából nem tudod lelesni a programba írt jelszót, mert a program azon része a szervergépen fut, hozzád csak az jut el, ami nem titkos. Ezekkel viszont most itt nem foglalkozunk, de ennyire megemlítettem.
Ami nekünk fontos, például egy összeadást végző programhoz, az a beviteli mező html kódja, illetve
alapból két dolog kell nekünk, egy olyan beviteli mező, amibe számot, vagy szöveget írhatunk, pl. egy ilyen:
<input name="valamiadat">
és egy gomb, aminek a megnyomásával például megkapjuk egy számításnak az eredményét, pl. egy ilyen:
<input type="button" value="Klikkelj rám" onclick= "plusz();" />
Most ezek beleillesztve a honlapunkba, így néz ki a teljes kód:
<html>
<title>Ez a címe a honlapnak</title>
<head>
<h1>Az egy felső rész.</h1>
</head>
<body bgcolor="#87ADD3">
<font color="yellow">Az a test rész. Itt van a hosszú szöveg, a tartalom nagy része. </font><br>
<br>
<input name="valamiadat">
<input type="button" value="Klikkelj rám" onclick= "plusz();" />
</body>
</html>
Persze tapasztalhatod, hogy lenyomva a gombot most semmit nem csinál, majd a második részben mutatom meg, hogy kell egy gombnak funkciót adni! Természetesen többféle beviteli mező van, legördülő menű, rádió gomb, stb.
Űrlapelemek
<form name="urlap" action="oldal.php"> <input name="adat" size="15"> <textarea name="szoveg" rows="4" cols="10"></textarea> <input type="radio" name="valasztas" value="igen"> Igen<br> <input type="checkbox" name="valasztas" value="férfi"> Férfi<br> <input type="button" value="KATT" onClick="utasitas()"> <input type="submit" value="MEHET"> <input type="cancel" value="TÖRLÉS"> <select name="valaszto" size="1"> <option value="elso">ELSŐ</option> <option selected value="masodik">MÁSODIK</option> </select> | * Űrlap megnyitása, neve és submit esetén az adattovábbítás helye * Beviteli mező, neve és mérete * Többsoros szövegdoboz, neve, magassága és szélessége karakterben * Rádió gomb, neve, értéke. Azonos nevű rádiógombok közül egyet választani lehet. * Választó gomb, neve, értéke. Ki és bekapcsolni lehet. * Nyomógomb, felirata és a kattintáshoz rendelt javascript utasítás * Az űrlap adatait továbbító gomb és felirata * Az űrlap adatait törlő gomb és felirata* Legördülő lista választó. A size érték megadja, hogy gördítés nélkül hány elem látható. * Az első választás * A második választás, előre kijelölve * Legördülő lista zárás |
Itt az alapvető kódokat megtalálod:
http://www2.akg.hu/info/11-12/html.html
Ezzel ki is lőttük a HTML programozás számunkra fontos részét!
CSS programozás!
Ez még rövidebb lesz, mint a HTML, bár kicsit unalmasabb. Ez a honlapok stílusáról, avagy a formázásáról szól. A CSS-nek két célja van. Ezzel két dolog miatt foglalkozunk. Az egyik, hogy használatával átláthatóbb lesz a programkódunk, a másik, hogy néhány formázás leginkább ezzel oldható meg. A CSS használatánál egy nagyobb weboldal stílusjegyeit, pl. a betű színeket, vagy a méreteket a head részben meg tudjuk adni, és a továbbiakban már nem zavar a kód a body részben. Persze ha van egy mondat, amit más stílussal akarsz megjeleníteni a szövegben, akkor azt közvetlenül ugyanúgy formázhatod, mint a HTML-nél, és akkor arra a részre az lesz az érvényes. Sőt, ha olyan weblapokat készítesz, amelyeknek több oldalaik vannak, akkor a CSS formázás kódját meg tudod adni egy külön fájlba is, és a lapokon a kódban csak hivatkozni kell rá, és ilyen egyszerűen az összes oldalnak meg tudod csinálni a formázását. Most ezzel azonban nem foglalkozunk, mert erre most nincs szükségünk, de ha érdekel, illetve a CSS-ről többet is meg akarsz tudni, illetve az alap kódokat itt találod, ez se vesz el az életedből többet, mint fél órát!
http://weblabor.hu/cikkek/cssalapjai1Csináljunk egy CSS kóddal formázott lapot:
A CSS kódot ez:
<style type="text/css"><!-- |
</style> |
A CSS kód úgy néz ki, hogy megadjuk az elemet, hogy mit fogunk formázni, pl a body részt, majd kapcsos zárójelbe megadjuk a formázási utasításokat, pl. ebben a példában a betűtípust, a betű méretét, a háttérszínt, stb. A adott elemhez kettősponttal társítjuk a jellemzőjét, és a lista egységeit pontos vesszővel választjuk szét. Pl.
body { font-family: Arial, Helvetica, sans-serif; font-weight: bold;font-size: 40px; color: #58408F; text-align: center; background-color: #6BB4DF;}
Példa egy teljes HTML kódba:
<html>
<head>
<title>Lottó</title>
<style type="text/css"><!--
body { font-family: Arial, Helvetica, sans-serif; font-weight: bold;font-size: 40px;
color: #58408F; text-align: center; background-color: #6BB4DF;}
h1 { font-size: 30px; color: #a00000}
input[name="mennyibol"] { color: #E81569}
input[type="button"] { color: #00a000}
</style>
</head>
<body>
<h1>Ez egy CSS-sel formázott oldal!</h1>
<input name="mennyibol"> <input name="mennyi"> <input type="button"
value="A számokért klikkelj rám" onclick= "plusz();" />
</body>
</html>
Ezzel le is tudtuk a CSS formázást. Erről a weboldalról lelesheted azt a kódot, amire szükséged van, ha pedig ott nem találod meg, akkor beütöd a google-ba, hogy pl. félkövér betű css kód, és bizonyosan rá fogsz találni!
A második részbe a Javascript-tel ismerkedünk meg, és pár perc múlva már képes leszel egy számológépet, vagy egy számítási feladatot végző programot csinálni, így a második rész már izgalmasabb lesz, az már valódi programozás, és meglátod, hogy nem lesz nehezebb se!
Vörösmarty Mihály: SZÓZAT
SZÓZAT
Hazádnak rendületlenűl
Légy híve, oh magyar;
Bölcsőd az s majdan sírod is,
Mely ápol s eltakar.
A nagy világon e kivűl
Nincsen számodra hely;
Áldjon vagy verjen sors keze;
Itt élned, halnod kell.
Ez a föld, melyen annyiszor
Apáid vére folyt;
Ez, melyhez minden szent nevet
Egy ezredév csatolt.
Itt küzdtenek honért a hős
Árpádnak hadai;
Itt törtek össze rabigát
Hunyadnak karjai.
Szabadság! itten hordozák
Véres zászlóidat,
S elhulltanak legjobbjaink
A hosszu harc alatt.
És annyi balszerencse közt,
Oly sok viszály után,
Megfogyva bár, de törve nem,
Él nemzet e hazán.
S népek hazája, nagy világ!
Hozzád bátran kiált:
"Egy ezredévi szenvedés
Kér éltet vagy halált!"
Az nem lehet hogy annyi szív
Hiában onta vért,
S keservben annyi hű kebel
Szakadt meg a honért.
Az nem lehet, hogy ész, erő,
És oly szent akarat
Hiába sorvadozzanak
Egy átoksúly alatt.
Még jőni kell, még jőni fog
Egy jobb kor, mely után
Buzgó imádság epedez
Százezrek ajakán.
Vagy jőni fog, ha jőni kell,
A nagyszerű halál,
Hol a temetkezés fölött
Egy ország vérben áll.
S a sírt, hol nemzet sűlyed el,
Népek veszik körűl,
S az ember millióinak
Szemében gyászköny űl.
Légy híve rendületlenűl
Hazádnak, oh magyar:
Ez éltetőd, s ha elbukál,
Hantjával ez takar.
A nagy világon e kivűl
Nincsen számodra hely;
Áldjon vagy verjen sors keze:
Itt élned, halnod kell.
1836
Kölcsey Ferenc: HUSZT
HUSZT
Bús düledékeiden, Husztnak romvára megállék;
Csend vala, felleg alól szállt fel az éjjeli hold.
Szél kele most, mint sír szele kél; s a csarnok elontott
Oszlopi közt lebegő rémalak inte felém.
És mond: Honfi, mit ér epedő kebel e romok ormán?
Régi kor árnya felé visszamerengni mit ér?
Messze jövendővel komolyan vess öszve jelenkort;
Hass, alkoss, gyarapíts: s a haza fényre derűl!
Cseke, 1831. december 29.