Begynnerveiledning til: Bygging av HTML5 / CSS3-nettsider

Denne artikkelen er en del av vår "HTML5 / CSS3 Tutorials Series" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her for å se flere artikler fra samme serie.

HTML5 og CSS3 har feilet nettet med storm på bare 2 år. Før dem har det vært mange endrede semantikk i måten webdesignere forventes å lage nettsider, og med deres ankomst kommer en rekke fantastiske støttene som alternative medier, XML-stiletiketter og progressive inputattributter for webdesignere for å oppnå drømmende funksjoner som animasjon

Selv om de fleste utviklere ser ut til å fremvise potensielle, men likevel kompliserte demoer, er HTML5 / CSS3 egentlig ikke rakettvitenskap, og jeg går deg gjennom den avslappende prosessen for å bygge en standard HTML5 / CSS3-nettside med omfattende, men grundig forklaring og tada! Bonuser som læringsressurser og gratis HTML5-maler er tilgjengelige for deg, så ta denne sjansen til å starte din HTML5-reise!

Endringer mellom HTML4 og HTML5

Du lurer kanskje på hvorfor det er enda viktig å bytte til HTML5. Det er et mangfold av grunner, men for det meste fordi du vil jobbe med de globale Internett-standardene som alle andre designere. På denne måten finner du mer støtte på nettet, og nettstedene dine vil gjengis riktig i moderne nettlesere som stadig forbedres.

(Bildekilde: W3C)

Sammenligning mellom HTML4 og HTML5 er vanskelig å se på overflatenivå. Fra visning av det nye HTML5-utkastet kan du se uthevede elementer og korrigerte feilhåndteringsprosedyrer. Nettleserutviklere har spesielt nydt de nye spesifikasjonene for gjengivelse av standardwebsider.

Hva mer fra HTML5 er konverteringen av vår moderne nettleser. Med disse nye spesifikasjonene er web som helhet nå sett på som en applikasjonsplattform for HTML (spesielt HTML5), CSS og JavaScript som skal bygges på. Dessuten skaper dette systemet elegant harmoni mellom webdesignere og utviklere ved å sette felles standarder som alle nettlesere bør følge.

I tillegg er mange elementer opprettet for å representere digital media fra ny tid . Disse inkluderer

Bare HTML5-skjelett

Jeg finner den enkleste måten å forstå et hvilket som helst emne er å dykke rett inn i den . Så jeg skal bygge en veldig grunnleggende HTML5 skjelettmal for en nettside. Jeg inkluderte noen av de nyere elementene, som jeg håper å kategorisere litt senere.

 Velkommen, en og alle! 
noe innhold her.
men noen her også!

Umiddelbart er dette ikke veldig forskjellig fra en standard HTML4-webside. Det du kanskje ser er at vi ikke trenger å inkludere flere selvlukkende koder . Dette er virkelig fantastiske nyheter, da det vil spare mye tid på utviklingsprosjektene dine.

For de som ikke vet, i XHTML utkast var det mange elementer som var merket selvlukkende . Disse vil ende med en fremoverstrekk før operatøren "større enn" for å indikere at du ikke trenger å inkludere en annen lukkekode andre steder. Som et eksempel, for å lage en meta søkeord tag du ville bruke uten behov for avslutning andre steder.

Denne regelen gjelder fortsatt i HTML5. Men nå trenger du ikke engang det ekstra fremoverstreket ! er helt gyldig, selv om du får lov til å fortsette å bruke XHTML / XML-standarden. For alle standarder-kompatible nettlesere vil begge elementene gjengi det samme.

Definere våre sidområder

Flertallet av vår nye kode skal ikke være for sjokkerende. Vår doktype er hilarisk enklere enn noensinne, ikke behov for overdreven kroppsattributter, og informasjon i vår overskrift er tydelig merket. Fortsett Jeg vil gjerne fokusere oppmerksomheten på innholdet inne i vår stikkord. Dette inkluderer alle hovedsidens struktur. Jeg har målrettet brukt noen få fine HTML5-koder for å indikere hvordan du kan inkludere dem i ditt eget arbeid.

Først vil du se hele siden er innkapslet i en div- tagg . Jeg har merket dette med en ID av wrapper, noe som betyr at det brytes rundt hele nettstedet vårt. Dette er nyttig for å angi et maksimalt bredde- eller posisjoninnhold rundt på skjermen. Deretter har jeg brutt siden i tre kjerneelementer - en