HTML & CSS kezdőknek

Aki weboldalakat szeretne készíteni, az előbb vagy utóbb találkozik az HTML-kel. Ezért a következő videó-tréningek során együtt fogjuk felfedezni ezt a csodálatos HTML-világot. Lépésről lépésre fogjátok látni, hogy mi is ez a nyelv, és hogyan lehet vele stíluslapokkal kombinálva weboldalakat készíteni. Az elején azonban egy kérdés áll: Tulajdonképpen miért is fontos az HTML és a stíluslapok? A videó-tréning végén ráadásul megtudjátok, milyen szoftverekre lesz szükségetek a weboldalak készítéséhez és teszteléséhez.

A Java programozási nyelvekkel ellentétben az HTML-ben nagyon gyorsan elérheti az első eredményeket, anélkül, hogy nagyobb bevezetést kellene tartani. Mindössze egy szerkesztő és egy böngésző szükséges az első lépésekhez. Ebben a videó-tréningben létre fogjátok hozni az első HTML-dokumentumotokat, és egyből megkapjátok a kimenetet a böngészőben. Eközben arról is információt szerztek, hogy az HTML-dokumentumok, vagyis a weboldalak hogyan vannak felépítve, illetve milyen alapstruktúrát követnek.

A "Element", "Tag" és "Attribútum" fogalmak közötti összefüggést már ismeritek az e sorozat első részéből. Most arról van szó, hogyan lehet ezeket a dolgokat gyakorlatilag használni az HTML-dokumentumokban. Ennek a videó-tréningnek a végén megtudjátok, hogyan ellenőrizhetitek az HTML-kódodat a szintaktikai helyesség szempontjából.

Az Ön weboldalai valószínűleg nem csupán képekből, hanem szövegekből is állnak. És a szövegeket, már csak a jó olvashatóság miatt is, ésszerűen strukturálni kell. Ehhez az HTML számos elemet biztosít. Ebben a videó-tréningben bemutatjuk a legfontosabb szövegstrukturáló elemeket. Emellett megtudhatja, hogyan lehet HTML saját karaktereket maskírozni és hogyan lehet programlistákat megjeleníteni.

A szövegek jó olvashatóságához szükséges a megfelelő formázás. És ez többet jelent egyszerű szerkezeti elemeknél, mint amilyenek a címek és szövegrészek. Például HTML-ben idézőjeleket lehet megjelölni, és egyes részeket vastagon vagy dőlten kiemelni. Ehhez a megfelelő eszközöket kínálja ez a videó oktatóanyag.

Olyan elemek, amelyek gyakran előfordulnak HTML-ben, listák. Ez nem csak a teendőlistákra, elérhetőségi adatokra vonatkozik, hanem menük definíciójára is. Tehát a listák fontos szerepet játszanak az HTML-ben. Elegendő ok, hogy részletesebben megvizsgáljuk őket. Ebben a videó tréningben megismerheted az összes listaváltozatot, amelyet az HTML kínál. Ezek az felsorolási listák, sorszámozott lista, definíciós listák és menülisták. Emellett tippeket is kapsz arra vonatkozóan, hogyan lehet szükség esetén a listákat vizuálisan testreszabni.

Az asztalok még mindig fontos szerepet játszanak a weboldalakon. Azonban ez csak az adatok bemutatásával kapcsolatban igaz. Amikor még nem volt CSS, vagy ez a böngészők által nem volt igazán támogatott, az asztaloknak egy egészen más céljuk is volt: elrendezéseket valósítottak meg. Az asztal cellái közé helyezték a különböző oldalelemeket. Az ebből származó elrendezési táblázat-szörnyek azonban szerencsére a múlté. Ma az asztalokat kizárólag azon a célra használják a webdizájnban, amelyre eredetileg szánták őket: az adatok áttekinthető megjelenítésére.

Az összehangzónak ható táblázatoknak nem feltétlenül kell megegyező számú cellából állniuk egy táblázatsorban. Ebben a videó tréningben megmutatjuk, hogyan tudjátok összekapcsolni a táblázatcellákat. A második részben valamit megtudtok a táblázatok címkézéséről. Ennek az aspektusnak fontos szerepe van, mivel így azonnal megmutathatjátok az látogatóknak, hogy végül miről szólnak az adatok. A videó tréninget egy részletes áttekintéssel zárjuk az HTML táblázatok formázásáról. Ezen a területen különösen sok dolog történt az előző HTML verziókkal összehasonlítva.

Alig egy webhely működik grafika nélkül. Nem csoda hát, hogy a grafikai téma fontos szerepet játszik ebben a sorozatban is. Ebben és a következő videó-tréningekben bemutatjuk, hogyan tudtok grafikákat belefoglalni a weboldalatokba. Az elején azonban egy másik szempont áll az elöterben: Melyik képformátumok alkalmasak egyáltalán az online használatra? A második részben pedig az lesz a téma, hogyan lehet hivatkozni képfájlokra.

Hogyan lehet alapvetően hivatkozni képekre, az előző részben volt bemutatva. Azonban a képekkel kapcsolatos terjedelem még korántsem ért véget. Valójában a képeket megfelelő attribútumok segítségével leírni lehet közelebbről. Erről szól ez a videó kezdetén. A második részben le lesz írva, hogyan lehet megvalósítani a képaláírásokat az HTML5 szintaxis segítségével.

Az internet csúcspontja a lehetőség, hogy a tartalmakat hiperhivatkozások segítségével összekössük egymással. Ha nem lennének ezek a hiperhivatkozások, az internet jelen formában elképzelhetetlen lenne. Mely eljárások állnak rendelkezésre az HTML számára a hiperhivatkozás-definíciók terén, azt ebben a és a következő videó tréningben megtudhatjátok.

Az HTML a hivatkozások terén sokkal több lehetőséget kínál, mint amit a korábbi videó tanfolyamon bemutattak. Például definiálhatjuk az e-mail hivatkozásokat és fájlokat letölthetünk. Ezeket és más hivatkozás-variációkat fogjátok megismerni ebben a videó tanfolyamon.

Előrebocsátva: Különösen az HTML5-ben hatalmas fejlődésen mentek keresztül a formanyomtatványok. Számos új mezőtípusnak köszönhetően nagyon érdekes űrlapokat lehet létrehozni. Természetesen ezeket az új lehetőségeket még meg fogjátok ismerni. Ez a videó kurzus azonban a szükséges alapismeretekkel kezdődik, amelyekre az űrlapok meghatározásához szükség van. Az elején egysoros beviteli mezők létrehozásáról lesz szó. Látni fogjátok, hogyan lehetséges ezeket meghatározni, hogyan lehet előre beállítani őket értékekkel és hogyan lehet őket írhatatlanra állítani. Szintén megismeritek a jelszómezők meghatározását. Ez végül is egy mezőtípus, amire mindig szükség lehet.

Ebben a videóban megismeritek további mezőtípusokat, amelyekkel felszerelhetitek az űrlapjaitokat. Konkrétan azonosító mezőkről, választógombokról és jelölőnégyzetekről van szó. Ezek mind fontos elemek, amelyeket az űrlapokban rendszeresen használni szoktak. Elegendő ok tehát, hogy ezekre és más elemekre közelebbről is szemügyre vegyük.

Az HTML5-nél jelentős fejlődés történt kifejezetten a formulák területén is. Elegendő ok arra, hogy alaposan megvizsgáljuk az új űrlapfunkciók sokaságát, amelyeket ma már lehet használni. Vége a fakó beviteli mezőknek. Végre beállíthatunk csúszkákat, dátummezőket stb., anélkül, hogy JavaScriptet kellene használnunk.

Az előző videós tréning megkönnyítette az HTML5 formanyelvek világába való belépést. Azonban még messze nincs itt a végcél. Valójában az HTML5-nek ezen a területen még sokkal többet nyújtani.

Az HTML5 mellett a bemutatott mezőtípusok mellett számos más érdekes szempont is létezik. Például most már nagyon kis erőfeszítéssel lehet egy olyan űrlapbeviteli mezőhöz hasonló automatikus kitöltési funkciót megvalósítani, mint a Google esetében. Ezeket és más dolgokat megmutatják ebben a videó tréningben.

Aki foglalkozik az HTML5-tel, az semantika témájától nem kerülheti meg. Ebben a videó tréningen megismeritek a legfontosabb elemeket, amelyeket az HTML5 hoz, és amelyek segítségével értelmes struktúrát adhattok a dokumentumoknak. Valójában ez a logikus strukturálás elengedhetetlen, ha valaki jövőbiztosan szeretné kialakítani weboldalait.

Az HTML5 számos új strukturálási elemmel rendelkezik. Alapvetően melyek ezek, az előző videótanfolyamban már bemutatták. Most arról van szó, hogy ezeket az elemeket gyakorlatban alkalmazzuk. Mert ezek az elemek gondoskodnak a dokumentumok szemantikus strukturálásáról. Ebben a videótanfolyamban elsősorban megismeritek a cikk és a szekció két elemét. Ezek biztosítják az HTML dokumentumok alapvető struktúráját. A videó végén ismét ránézünk a div, cikk és szekció közötti különbségekre.

Az HTML5-ben a dokumentumokat nem csak bekezdésekre és szakaszokra lehet felosztani. Valójában a header, footer stb. címkék még sok további elemet kínálnak a szemantikus strukturáláshoz. Ezek mindenképpen érdemesek arra, hogy közelebbről is megvizsgálják.

Ebben az utolsó videó-tanfolyamban a Szemantikus Elemek sorozatban további szerkezeti elemekkel fogtok megismerkedni. Valójában az HTML5 tartalmaz elemeket navigációs területekhez, szélszócikkekhez és összefoglalókhoz is.

Régebbi HTML verziókban a multimédiás tartalmak beillesztése rémálom volt. Egy object és embed elem kombinációjával próbálták a videókat és hangokat a weboldalra behozni. Az, hogy végül a beillesztett videó tényleg lejátszódott-e, kétséges volt. Az HTML5-ben ezen a területen is rengeteg fejlődés történt.

Hogyan lehet beágyazni videókat, már láttátok. Most persze a videók nem minden, amit meg lehet mutatni az oldal látogatóinak. Ebben a videó tanfolyamban le lesz írva, hogy milyen lehetőségek kínálkoznak nektek az audio fájlok és Flash filmek beágyazása szempontjából HTML5 által. Mert ezeket a dolgokat is időről időre meg kell jeleníteni az oldalán.

Az HTML5-ben nincsenek már keretek. Az iFrame-ek, azaz az iFrames azonban túlélték az új HTML-korát és az HTML5-ben is jelen vannak. Míg a hagyományos keretek egy oldalt független területekre osztanak, az iFrame-ek segítségével bármilyen erőforrást be lehet ágyazni a weboldalakba.

Az HTML a tartalom strukturálására való. Amikor az oldal tervezésére kerül a sor, akkor jönnek a Cascading Stylesheets (CSS) képbe. Mert csak a CSS és az HTML kombinációja teszi lehetővé, hogy a unalmas HTML struktúrából vonzó weboldalakat készítsen. Elég jó ok tehát, hogy alaposabban megvizsgáljuk a CSS-t.

Egy kifejezés, amely gyakran előfordul majd számotokra a CSS-kapcsán, az a "selektorok" kifejezés. Ezekkel a selektorokkal végül meghatározzuk azokat az elemeket, amelyeket CSS segítségével formázni szeretnénk. Ebben a videó-tréningben meg fogjátok ismerni az elsődleges selektorokat. Itt mutatkoznak be az elem-, azonosító- és univerzális selektorok. Ezekkel fogtok foglalkozni naponta, amikor weboldalakat alakítotok CSS segítségével.

Néhány szelektor bemutatásra került az előző videó-tréningen. Természetesen a CSS-nek még sok más szelektort is kínál.

Ebben az utolsó szelektorvideó-tanfolyamban egy nagyon speciális szelektorfajtát fogok bemutatni nektek. Ezek az úgynevezett pseudosztályok és pszeudoelemek. Ezek olyan szelektorok, amelyek nem vonatkoznak konkrét HTML-elemekre, hanem a kimeneti eszköz generálja őket.

Ebben a videó-tréningben és a következőkben bemutatom nektek a legfontosabb CSS tulajdonságokat. Ezen a ponton egyáltalán nem arról van szó, hogy egy CSS hivatkozást mutassak nektek be. Sokkal inkább arról van szó, hogy érzést kapjatok arról, hogy mi minden lehetséges a CSS segítségével. Itt kezdjük a betűtípus formázásával. Ebben a videó-tréningben bemutatásra kerülnek azok a dolgok, amelyek közvetlenül kapcsolódnak az úgynevezett betűtípusokhoz. Figyelembe kell vennetek, hogy a betűtípus formázásával kapcsolatban még további tulajdonságok vannak, amelyek aztán a következő videó-tréningen kerülnek bemutatásra.

Az ebben a videó-tréningben bemutatott CSS tulajdonságok segítségével szövegeket és karaktereket lehet vizuálisan testreszabni. Például megváltoztathatók a betűk közötti távolságok és a szövegek igazíthatók. Ezek a tulajdonságok is segítenek nektek abban, hogy vonzó módon mutassátok be a szövegeket.

Természetesen a CSS-ben sem hiányozhatnak a színdefiníciók és grafikus háttérképek. Ezek a megfelelő tulajdonságok kerülnek bemutatásra ebben a videó-tréningben. Valójában a CSS-nek ezen a területen számos lehetősége van. Így nem csak egyszerűen színeket és képeket lehet definiálni. A ismétlődő háttérgrafikák is lehetségesek.

Különösen akkor, amikor weboldalak elrendezéséről van szó, előfordul, hogy szükségetek lesz külső margók és távolságok meghatározására. Ebben a sorozat utolsó videó tréningjeiben egy átfogó példaprojekt valósul meg, ahol gyakorlatban is bemutatásra kerül ezeknek és más CSS tulajdonságoknak a használata.

A CSS tartalmaz néhány érdekes tulajdonságot szövegrészletek és blokkok számára, amelyeket nem szeretnék elhallgatni előttetek. Így például szövegrészleteket balra és jobbra is igazíthatunk.

Amikor a keretekről van szó, a legtöbb ember valószínűleg először táblázatokra asszociál. És valóban, a keretek fontos szerepet játszanak a táblázatokkal kapcsolatban. Azonban a CSS segítségével más elemeket is elláthatunk keretekkel. És hogy ezek a keretek végül hogyan néznek ki, azt szintén CSS definíciók segítségével lehet meghatározni.

Hogyan lehet meghatározni a listákat, valószínűleg már tudjátok. Végül is részletesen bemutatták ebben a sorozatban. Azonban alapvetően a listák nem túl elegánsak. Hogy azok is esztétikusak legyenek, vannak megfelelő CSS tulajdonságok. Ezek melyek és hogyan használjátok őket, megtudhatjátok ebben a videó tréningen. A második részben pedig a számlálókat vesszük górcső alá, amelyek segítségével bonyolultabb felsorolások is megvalósíthatók.

Amikor weboldalak elrendezéséről van szó, akkor a nevezett box modell lesz a követő társatok. Mivel ennek segítségével végül is meghatározzátok, hogyan és hol lesznek elhelyezve az elemek.

Az elemeket a weboldal kívánt helyeire pozícionálni csak bizonyos CSS tulajdonságokkal lehet.

Az előző videókképzés során a s.k. Floating elvet már röviden érintettük. Azonban a téma annyira bonyolult, hogy itt most ismét részletesen megvizsgáljuk azt a lebegést. Valójában ez egy kulcsfontosságú koncepció a CSS-ben. Mert csak így lehet valóban weboldalakat létrehozni.

Az eddigi videó-tréningeken bemutatták az HTML és CSS munkához szükséges alapokat. Most természetesen eljött az ideje az első gyümölcsök betakarításának. A következő videó-tréningek során lépésről lépésre építünk fel egy példa weboldalt. Ebben a videó-tréningben először megismerkedtek a különböző elrendezési változatokkal. Mert a megfelelő elrendezési forma kiválasztása mindig az weboldal tervezésének kezdetén kell, hogy álljon.

A csoportmunkában egy tipikus oszlop elrendezéssel fogok dolgozni. Azonban mielőtt élőben és színesben bemutatom ezt a projektet, konkrétan meg fogom mutatni nektek, hogyan tudjátok magatok is megvalósítani az oszlopelrendezéseket. Ezúttal a két- és háromoszlopos elrendezésekre fogunk koncentrálni, hiszen ezek továbbra is a legtöbb webhely alapja.

A következő videó-tréningek során meg fogom mutatni nektek, hogyan lehet lépésről lépésre elkészíteni egy weboldal-elrendezést. Ehhez többféle megközelítés létezik. Gyakran a kialakításokat Photoshopban készítik el. A különböző oldalelemeket ezután kivágják, majd CSS és HTML segítségével ismét egy weboldalként egyesítik őket. Ugyanez történik itt is. Azonban én Photoshop helyett a ingyenesen elérhető GIMP-et használom. Az elmondott lépéseket azonban úgy is követhetitek Photoshopban.

Az első lépéseket az egyedi elrendezés felé az előző videó tréningben tettük meg. Természetesen még sok elem hiányzik. Ezeket hozzáadjuk ehhez a videó tréninghez. Amint az elrendezés készen van, folytatjuk a szeletelést, vagyis a vágást. Mert ez végül is az a munkafolyamat, amely lehetővé teszi a létrehozott designt HTML és CSS segítségével gyakorlatilag megvalósítani.

Elkészítettétek a elrendezést. Most megkezdődik a gyakorlati megvalósítása. Ebben a videó-tréningben együtt fogunk létrehozni a weboldal HTML alapstruktúráját.

Az oldal alapstruktúrája megvan, azonban még eléggé szórványos. Ebben a videó tréningben az oldal tartalma bővül. A fókuszban először is a felső oldalsávban található menü van. Ezt követi a jobb oldali és az alsó menü.

Egy döntő fontosságú szempont a vonzó megjelenésű weboldal szövegének természetesen a betűtípusa. Ennek a sorozatnak a során már megismertétek azokat a lehetőségeket, amelyeket az HTML és a CSS kínál a betűstílus formázásában. Ebben a videó tanfolyam során ezeket fogjuk használni az oldal feljavítására. Egyébként nem csak a klasszikus változatokra fogunk koncentrálni. Az "exotikus" betűtípusok használatára a varázsszó pedig @font-face.

Általában a látogatóknak lehetőséget kell biztosítani a kapcsolattartásra. A legegyszerűbb esetben egy telefonszámot és/vagy egy e-mail címet jegyzünk fel. Ezt lehet így megtenni, de a látogatók számára ez nem túl kényelmes. Ezért ebben a videó-tréningen űrlapot hozunk létre, amelyen keresztül a látogatók könnyedén felvehetik velünk a kapcsolatot. És természetesen kihasználjuk azokat a lehetőségeket, amelyeket az HTML5 és a CSS3 kínál.

Az űrlap alapstruktúrája és az alapvető kialakítása meg van határozva és befejezve. És valójában az űrlap már most elég vonzó. A CSS3-nak azonban még sokkal több potenciálja van, ha az űrlap vizuális feljavításáról van szó. Ebben a videó tréning során az űrlapot még kicsit tovább alakítják.

Már a jelenlegi időpontban bizonyára sok időt és munkát fektettetek a weboldalatok fejlesztésébe. A tervezéstől a elrendezési diagramon keresztül a HTML és CSS megvalósításáig. Ez mind elegendő ok arra, hogy bemutassátok a weboldalatokat a világnak. Pont erre irányul ez a videó-tréning. Meg fogom mutatni nektek, hogyan tudjátok online elérhetővé tenni a weboldaltokat. Először is megtudjátok, hogyan találjatok megfelelő szolgáltatót és megfelelő webszolgáltatás-csomagot. Ezután az adatokat a nagyon népszerű FileZilla segítségével fel lehet tölteni a szerverre. És akkor, nos, a weboldal valóban online lesz.

Ebben a videóban szeretnék nektek betekintést nyújtani a megfelelő fejlesztői környezetbe a weboldalak létrehozásához. Aki már teljes weboldalakat vagy kisebb egységes oldalakat írt, általában már rendelkezik ezekkel a szerkesztőkkel, és átugorhatja ezt a videót.

Bemutatva lesznek:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

Az HTML5 Boilerplate egy erős sablon az HTML5 és CSS3 weboldalakhoz; lehetővé teszi az HTML5 lehető legjobb CrossBrowser-kompatibilitását, és néhány nagyon jó kódsablonnal rendelkezik JavaScript, CSS3 és természetesen HTML területén.

Ebben a videószkolenben szeretném bemutatni ezeket a funkciókat. Jelenleg nincs jobb sablon HTML5 és CSS3 területén való induláshoz.

Ebben a videó-tréningben szeretnék bemutatni néhány nagyon hasznos eszközt, amellyel fejleszthető az HTML5 és a CSS3.

Ezek közé tartoznak:
html5css3box.com
kuler.adobe.com (most https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com