Begyndervejledning til opbygning af HTML5 / CSS3-websider

Denne artikel er en del af vores "HTML5 / CSS3 Tutorials serie" - dedikeret til at gøre dig til en bedre designer og / eller udvikler. Klik her at se flere artikler fra samme serie.

HTML5 og CSS3 har fejet nettet med storm i kun 2 år. Inden for dem har der været mange ændrede semantikker i den måde webdesignere forventes at oprette websider, og med deres ankomst kommer et væld af fantastiske understøttelser som alternative medier, XML-stiletiketter og progressive inputattributter for webdesignere for at opnå drømmende funktioner som animation.

Selv om de fleste udviklere synes at fremvise potentielle, men komplicerede demoer, er HTML5 / CSS3 ikke rigtig raketvidenskab, og jeg vil gå dig gennem den afslappende proces for at opbygge en standard HTML5 / CSS3 webside med omfattende endnu dybtgående forklaring og tada! Bonusser som læringsressourcer og gratis HTML5-skabeloner er tilgængelige for dig, så tag denne chance for at starte din HTML5-rejse!

Ændringer mellem HTML4 og HTML5

Du kan undre dig over, hvorfor det er lige så vigtigt at skifte til HTML5. Der er et utal af grunde, men for det meste fordi du bliver arbejder med de globale internetstandarder som enhver anden designer. På denne måde finder du mere support online og din websteder vil gøre korrekt i moderne browsere som konstant forbedres.

(Billedkilde: W3C)

Sammenligning mellem HTML4 og HTML5 er svært at få øje på overfladeniveau. Fra visning af det nye HTML5-udkast kan du se udvalgte elementer og korrigerede fejlhåndteringsprocedurer. Browserudviklere har specifikt nydt de nye specifikationer til gengivelse af standardwebsider.

Hvad mere fra HTML5 er konverteringen af ​​vores moderne webbrowser. Med disse nye specifikationer ses hele websitet nu som en applikationsplatform til HTML (især HTML5), CSS og JavaScript til at blive bygget på. Også dette system elegant skaber harmoni mellem webdesignere og udviklere ved at indføre fælles standarder, som alle browsere skal følge.

Derudover er mange elementer blevet oprettet til repræsenterer nye digitale medier. Disse omfatter og som er enorme til multimedie support. I nogle browsere kan du udfylde form validering direkte i HTML. Tildelt der er stadig et stort behov for jQuery, da der er mange softwareudviklere, der endnu ikke har genkendt funktionerne. Hvis du vil have en liste over tags, skal du tjekke dette W3Schools-bord for at lære mere om dem.

Bare HTML5 skelet

Jeg finder den nemmeste måde at forstå et emne på dykke lige ind i det. Så jeg vil konstruere en meget grundlæggende HTML5 skabelon skabelon til en webside. Jeg omfattede nogle af de nyere elementer, som jeg håber at kategorisere lidt senere.

        
 
 
Velkommen, en og alle!
  
 
 
 
noget indhold her.
 
 
 
men nogle her også!
 
 
  
   

Umiddelbart er dette ikke meget forskelligt fra en standard HTML4 webside. Det, du måske bemærker, er, at vi behøver ikke at indeholde flere selvlukkende tags. Dette er virkelig vidunderlige nyheder, da det sparer meget tid på dine udviklingsprojekter.

For dem der ikke ved, var der i XHTML-udkast mange elementer mærket selvlukkende. Disse ville ende med en fremad skråstreg, før operatøren "større end" for at indikere, at du ikke behøver at medtage et andet lukkekode andetsteds. For eksempel kan du oprette et meta-nøgleord, du vil bruge uden behov for lukning andre steder.

Denne regel gælder stadig i HTML5. Men nu du behøver ikke engang den ekstra fremad skråstreg! er helt gyldig, selvom du får lov til at fortsætte med at bruge XHTML / XML-standarden. For alle standarder, der er kompatible med browsere, vil begge elementer gøre det samme.

Definere vores sideområder

Størstedelen af ​​vores nye kode skal ikke være for chokerende. Vores doktypen er hilarisk enklere end nogensinde, intet behov for overdrevne kropsattributter, og oplysninger i vores overskrift er tydeligt mærket. Fortsæt Jeg vil gerne fokusere din opmærksomhed på indholdet inde i vores tag. Dette omfatter alle hovedsides struktur. Jeg har målrettet brugt nogle få fine HTML5-tags til at angive, hvordan du kan medtage dem i dit eget arbejde.

Først vil du se hele siden er indkapslet i a div tag. Jeg har mærket dette med et ID af indpakning, hvilket betyder at det omgiver hele vores indhold på internettet. Dette er nyttigt at indstille maksimal bredde eller positionsindhold rundt på skærmen. Næste har jeg brudt siden i 3 kerneelementer - en

, en kerne

, og en kort

Begynder's Guide to Flock, Social Media Browser

Begyndervejledning til iOS-udvikling Interface - Del I

Begyndervejledning til opsætning af Windows 7 Media Center