Fő tartalom
Tantárgy/kurzus: Programozás > 2. témakör
9. lecke: További tananyagokKövetkező lépések
Gratulálunk, megtanultad a HTML és CSS alapjait! Most már sok mindent értesz abból, hogy mi is történik a weboldalakon és az interneten, és már remélhetőleg úgy nézed ezeket a weboldalakat, hogy felismered, milyen HTML címéket és CSS tulajdonságokat használnak.
Viszont rengeteg dologgal bővítheted még a HTML és CSS tudásodat. Olvass tovább!
További HTML címkék
- Form címkék: elég sok olyan címke van, amely webes űrlapok készítéséhez használható, többek közt a
<button>és az<input>. Tipikusan arra használják őket, hogy a szervernek adatokat küldjenek vissza, de ezt mi itt a Khan Academyn nem engedélyezzük. JS-sel együtt játékok készítéséhez is használhatóak, ezt a HTML/JS kurzusunkban tanítjuk is. Tudj meg többet a form címkékről (angol nyelven) ebből a diasorból. Tanulj a szerver-oldali nyelvekről, mint például a PHP, Python, Ruby a Codecademyn. - Iframes: az
<iframe>címke segítségével keretbe foglalhatsz egy másik weboldalt a sajátodon belül, és kényelmesen használható Youtube videók, Google Térképek, stb. beágyazásához. Ez a címke le van tiltva a Khan Academy biztonsági és moderációs okokból, de máshol kísérletezhetsz vele. Tudj meg többet ebből a diasorból (angol nyelven). - Multimédia címkék: az
<audio>és<video>címkéket a modern böngészők támogatják az audio és videó fájlok lejátszásához. Hasonlóan az<iframe>címkéhez, jelenleg letiltott a Khan Academyn, de máshol ki tudod próbálni. Tudj meg többet ebből a diasorból (angol nyelven). - Új szemantikai címkék: az elmúlt években a „HTML5” specifikáció részeként a böngészők új szemantikai címkéket kezdtek használni, amit a fejlesztők a
<div>-ek helyett használhatnak, amikor szükséges, ilyenek például az<article>(magyarul cikk),<aside>,<nav>, stb. Számos cikket találsz ezekről itt (angol nyelven), beleértve ezt a hasznos folyamatábrát, ami segíthet meghozni a döntést, hogy mikor melyiket használd.
További CSS szelektorok és tulajdonságok
A következőkkel mind kísérletezhetsz itt a Khan Academyn:
- CSS3: áttekintettük a böngészők által sok éve támogatott CSS-t, de sok új CSS tulajdonság és szelektor van, ami a „CSS3” specifikáció részeként ismert, a böngészők pedig folyamatosan adják hozzá a támogatást minden egyes alkalommal, amikor egy újabb verzió kiadásra kerül. Többet megtudhatsz ezekről a CSS3 szelektorokról ezekből a diákból (angol nyelven), és a CSS3 tulajdonságokról ebből a diasorból (szintén angol nyelven). Nézd meg a caniuse.com oldalt, ahol megtudhatod, hogy az egyes böngészők mely szelektorokat támogatják.
- Média lekérdezések: ez a technika lehetővé teszi, hogy különböző helyzetekre különböző CSS-t definiálj, például ha a weboldaladat kisebb képernyőn nézik, vagy ha ki szeretnék nyomtatni. Tudj meg többet a W3Cről.
- CSS keretrendszerek: a keretrendszer CSS szabályok és osztályok gyűjteménye, és sok fejlesztő használ CSS keretrendszereket azért, hogy gyorsabban tudjanak CSS-t írni. A legnépszerűbb mind közül a Twitter Bootstrap, de van még a ZURB foundation, Pure CSS, Topcoat, és számos egyéb.
JS használata weboldalakon
A webfejlesztők JavaScriptet használnak ahhoz, hogy a weboldalaikat interaktívvá tegyék, hogy reagáljanak a felhasználók eseményeire és dinamikusan kérjenek le adatokat a szerverekről. Ezekhez
<script> címkéket ágyaznak be a HTML-be, amelyeken belül JavaScript kódot helyeznek el. A JS kódjuk ezt követően a „DOM API”-t használja, ami függvények halmaza, melyeket a böngészők tesznek elérhetővé minden weboldalon ahhoz, hogy a fejlesztők lekérhessék és manipulálhassák az oldalt.Ez azt jelenti, hogy ha szeretnéd megtanulni, hogyan tedd a weboldalaidat interaktívvá, akkor meg kell tanulnod a JavaScript nyelv alapjait (amit megtehetsz itt a Khan Academyn), és emellett tanulnod kell a DOM API-ról is (amit megtanulhatsz ebből a kurzusunkból).
Weboldalak készítése Khan Academyn kívül
Szeretjük látni, hogy milyen menő weboldalakat készítesz és megosztod amit a közösséggel együtt tanultál, de szerintünk érdemes kísérletezni más kódszerkesztő környezetekben is, és érdemes tapasztalatot szerezni olyan funkcionalitásokról is, amit mi nem engedélyezünk. Ha szeretnél továbbra is a böngészőben kódolni (és főleg, ha ChromeBookot használsz), kipróbálhatod a JSBin.com-ot, JSFiddle.net-t, a Cloud9 IDE-t.
Ha nem böngészőben szeretnél kódolni, akkor letölthetsz egy IDE-t, és elmentheted a weboldalaidat „.html” fájlként. Népszerűk IDE-k a Notepad++ (csak Windowsra), Visual Studio Code, SublimeText, Adobe Brackets, Coda, és BBEdit.
Weboldal üzemeltetése szerveren
Azokat a weboldalakat, amelyeket itt a Khan Academyn hozol létre, mi a saját szervereinken üzemeltetjük, de lehetséges, hogy te saját webes jelenlétet szeretnél.
Először is találnod kell egy céget, akik üzemeltetik a weboldalad. Sok tárhelyszolgáltató létezik a világon, különböző szintű rugalmassággal és árakkal.
Szeretnél majd saját domain nevet is, például „az-en-meno-nevem.com”, így a weboldalad az identitásod része lehet. Van, hogy ezt a tárhelyszolgáltató intézi, de gyakran domain név regisztrálóra lesz szükséged. Bővebb információért nézd meg ezeket az angol nyelvű diákat.
Amint van webtárhelyed, a fájljaidat a szerverre másolhatod egy FTP klienssel, például a FileZillával. Ez olyan program, amely közvetlenül összeköt a szerverrel, és lehetővé teszi, hogy böngészd, letölts vagy feltölts fájlokat a szerverről vagy a szerverre. Lehet, hogy be is tudsz SSH-zni a szerverre, ilyenkor közvetlenül szerkesztheted is a fájljaidat a szerveren.
Folytasd a tanulást!
A HTML és a CSS folyton változnak, hiszen a böngészők nagyon gyakran adnak ki fejlesztéseket, és a webfejlesztő közösség is elég aktív. Az egyik legjobb mód arra, hogy szinten tartsd a tudásodat, ha feliratkozol a Frontend Focus angol hírlevélre, amely cikkekre és demókra irányuló linkeket tartalmaz. Természetesen amikor valami újat tanulsz, mindig érdemes kipróbálni is azt, hogy igazán megértsd, hogyan is működik.
Gyakorolni, gyakorolni és gyakorolni!
Szeretnél részt venni a beszélgetésben?
Még nincs hozzászólás.