Nybörjarhandbok för att bygga HTML5 / CSS3 webbsidor

Denna artikel är en del av vår "HTML5 / CSS3 Tutorials-serien" - dedikerad till att göra dig till en bättre designer och / eller utvecklare. Klicka här att se fler artiklar från samma serie.

HTML5 och CSS3 har svepte webben med storm på bara 2 år. Innan dem har det blivit många förändrade semantik i hur webdesigners förväntas skapa webbsidor och med deras ankomst kommer en rad fantastiska stöd, som alternativa media, XML-stiltaggar och progressiva inmatningsattribut för webbdesigners för att uppnå drömmande funktioner som animering.

Även om de flesta utvecklare verkar visa fram potentiella men komplicerade demos är HTML5 / CSS3 inte riktigt raketvetenskap, och jag går dig genom den avkopplande processen för att bygga en vanlig HTML5 / CSS3-webbsida med omfattande, fördjupad förklaring och tada! Bonusar som lärarresurser och gratis HTML5-mallar är tillgängliga för dig, så ta chansen att starta din HTML5-resa!

Ändringar mellan HTML4 och HTML5

Du kanske undrar varför det är även viktigt att växla till HTML5. Det finns en myriad av skäl, men mest för att du ska vara arbetar med de globala Internetstandarderna som alla andra designer. På så sätt hittar du mer support online och din webbplatser kommer att göra korrekt i moderna webbläsare som ständigt förbättras.

(Bildkälla: W3C)

Jämförelse mellan HTML4 och HTML5 är svår att upptäcka på ytanivå. Från det nya HTML5-utkastet kan du se utvalda element och korrigerade felhanteringsförfaranden. Webbläsarutvecklare har särskilt haft de nya specifikationerna för att göra standardwebbsidor.

Vad mer från HTML5 är omvandlingen av vår moderna webbläsare. Med dessa nya specifikationer ses hela webben som en applikationsplattform för HTML (särskilt HTML5), CSS och JavaScript för att byggas på. Även detta system elegant skapar harmoni mellan webbdesigners och utvecklare genom att ställa in gemensamma standarder som alla webbläsare ska följa.

Dessutom har många element skapats till representerar nya digitala medier. Dessa inkluderar och som är enorma för multimedia stöd. I vissa webbläsare kan du slutföra formulärvalidering direkt i HTML. Beviljas det finns fortfarande ett stort behov av jQuery, eftersom det finns många programutvecklare som ännu inte känner igen funktionerna. Om du vill ha en lista med taggar kolla här W3Schools-tabellen för att lära dig mer om dem.

Bare HTML5 Skelett

Jag hittar det enklaste sättet att förstå vilket ämne som helst dyka in i det. Så jag ska bygga en mycket grundläggande HTML5-skelettmall för en webbsida. Jag inkluderade några av de nyare elementen, som jag hoppas kunna kategorisera lite senare.

        
 
 
Välkommen, en och allt!
  
 
 
 
lite innehåll här.
 
 
 
men några här också!
 
 
  
   

Det här är inte så mycket annorlunda än en vanlig HTML4-webbsida. Det du kanske märker är att vi behöver inte inkludera fler självstängande taggar. Det här är verkligen underbara nyheter, eftersom det kommer att spara mycket tid på dina utvecklingsprojekt.

För de som inte vet, i XHTML utkast var det många element märkta självstängande. Dessa skulle sluta med ett snedstreck framåt innan operatören "större än" för att indikera att du inte skulle behöva inkludera en annan stängningskod någon annanstans. Som ett exempel, för att skapa en meta nyckelord tag du skulle använda utan att det behövs en stängning någon annanstans.

Denna regel gäller fortfarande i HTML5. Men nu du behöver inte ens det extra framåt snedstrecket! är helt giltig, även om du får fortsätta använda XHTML / XML-standarden. För alla standardkompatibla webbläsare kommer båda elementen att göra samma sätt.

Definiera våra sidområden

Majoriteten av vår nya kod ska inte vara för chockerande. Vår doktyp är hilarisk enklare än någonsin, Inget behov av överdrivna kroppsattribut, och information i vår rubrik är tydligt märkt. Att gå vidare Jag skulle vilja fokusera din uppmärksamhet på innehållet inuti vårt märka. Detta inkluderar alla huvudsidans struktur. Jag har målmedvetet använt några fina HTML5-taggar för att indikera hur du kan inkludera dem i ditt eget arbete.

Först ser du hela sidan är inkapslad inom a div märka. Jag har märkt detta med ett ID av omslag, vilket betyder att det sveper runt hela vårt innehåll på webbplatsen. Detta är användbart för att ställa in maximal bredd eller positionsinnehåll runt på skärmen. Nästa har jag brutit sidan i tre kärnelement - en

, en kärna

, och en kort

Nybörjarens Guide to Flock, Social Media Browser

Nybörjarens guide till IOS-utveckling Gränssnittet - Del I

Nybörjarhandbok för att installera Windows 7 Media Center