Kezdő útmutató a HTML5 / CSS3 weboldalak építéséhez

Ez a cikk a mi része "HTML5 / CSS3 oktatóanyagok sorozat" - szentelt, hogy segítsen neked egy jobb tervező és / vagy fejlesztő. Kattints ide több cikket láthat ugyanazon sorozatból.

A HTML5 és a CSS3 mindössze 2 év múlva viharozta az internetet. Előttük számos megváltozott szemantika létezett abban, ahogyan a webtervezők várhatóan weblapokat hoznak létre, és megérkezésükkor megdöbbentő remek támogatások, mint például az alternatív média, az XML-stílusú címkék és a webes tervezők progresszív bemeneti tulajdonságai az álmodozó olyan funkciók, mint az animáció.

Bár a legtöbb fejlesztő úgy tűnik, hogy bemutatja a lehetséges, mégis bonyolult demókat, a HTML5 / CSS3 nem igazán rakéta-tudomány, és én meglátogatom Önt a pihentető folyamaton, hogy egy szabványos HTML5 / CSS3 weboldalt készítsen, amely még átfogó, mégis részletes magyarázattal és majd! Az olyan bónuszok, mint a tanulási források és az ingyenes HTML5 sablonok elérhetők az Ön számára, ezért használja ezt a lehetőséget, hogy elindítsa a HTML5 utazást!

Változások a HTML4 és a HTML5 között

Lehet, hogy kíváncsi, hogy miért is fontos a HTML5-re váltani. Számos ok van, de leginkább azért, mert te leszel a globális internetes szabványokkal mint minden más tervező. Ily módon több támogatást kaphat az interneten és a a weboldalak megfelelően jelennek meg a modern böngészőkben amelyek folyamatosan javulnak.

(Képforrás: W3C)

A HTML4 és a HTML5 közötti összehasonlítást nehéz felszíni szinten kimutatni. Az új HTML5-tervezet megtekintésekor láthatók a kiemelt elemek és a javított hibakezelési eljárások. A böngésző-fejlesztők kifejezetten élvezték az alapértelmezett weboldalak megjelenítéséhez szükséges új specifikációkat.

Mi többet a HTML5-ből a modern webböngésző átalakítása. Ezekkel az új specifikációkkal a web egészét most úgy tekintik alkalmazásplatform a HTML (különösen a HTML5), a CSS és a JavaScript használatához. Ez a rendszer is elegáns harmóniát teremt a webes tervezők és a fejlesztők között közös szabványok meghatározásával, amelyeket minden böngészőnek követnie kell.

Emellett számos elemet hoztak létre új korú digitális médiát képviselnek. Ezek tartalmazzák és amelyek a multimédiás támogatáshoz hatalmasak. Egyes böngészőkben a formanyomtatványokat közvetlenül HTML-ben töltheti le. A jQuery-re még mindig szükség van, hiszen sok szoftverfejlesztő még nem ismeri fel a funkciókat. Ha szeretné, hogy a címkék listája ellenőrizze a W3Schools táblát, hogy többet tudjon meg róluk.

Csupasz HTML5 csontváz

A legegyszerűbb módja annak, hogy megértsem bármelyik témát merüljön bele. Szóval egy nagyon egyszerű HTML5 csontváz-sablont fogok készíteni egy weboldalhoz. Néhány újabb elemet is felvettem, amelyeket remélem egy kicsit később kategorizálhatok.

        
 
 
Üdvözlünk, egy és minden!
  
 
 
 
valamilyen tartalom itt.
 
 
 
de néhány itt is!
 
 
  
   

Rögtön ez nem különbözik a szokásos HTML4 weblaptól. Amit észrevehet, hogy mi nem kell több önzáró címkét tartalmaznia. Ez igazán csodálatos hír, hiszen rengeteg időt takaríthat meg a fejlesztési projektektől.

Azok számára, akik nem tudják, az XHTML-tervezetekben sok elemet jelöltek meg önzáró. Ezek a végződésekkel a "nagyobb, mint" operátort megelőzően végződnek, ha nem lenne szükség más zárócímkére máshol. Például egy meta kulcsszó címke létrehozása zárás nélkül máshol.

Ez a szabály még mindig érvényes a HTML5-ben. De most már nem kell még extra slash-et sem! teljesen érvényes, bár az XHTML / XML szabványt továbbra is használhatja. Minden szabványnak megfelelő böngésző esetében mindkét elem azonos módon jelenik meg.

Oldalaink meghatározása

Új kódunk többsége nem lehet túl sokkoló. a A doctype könnyedén egyszerűbb mint valaha, nincs szükség túlzott testtulajdonságokra, és a címünkben szereplő információk világosan fel vannak tüntetve. Mozogva szeretném a figyelmünket a mi bennünket tartalmazó tartalmakra összpontosítani címke. Ez magában foglalja az összes főoldal szerkezetét. Célszerűen néhány szép HTML5 címkét használtam arra, hogy jelezzem, hogyan veheted fel őket saját munkádba.

Először látni fogja az egész oldalt egy a div címke. Ezt egy azonosítóval jelöltem csomagolás, ez azt jelenti, hogy az egész webhelyünk tartalmát körülveszi. Ez hasznos lehet a maximális szélesség vagy pozíciótartalom beállításához a képernyőn. Ezután három fő elemre törtem az oldalt - egyet

, mag

, és egy rövid

Kezdő útmutató a Flock-hoz, a Social Media Browser

Kezdő útmutató az iOS fejlesztéshez Az interfész - I. rész

Kezdő útmutató a Windows 7 Media Center beállításához