Begynnerveiledning for å bygge HTML5 / CSS3-nettsider

Denne artikkelen er en del av vår "HTML5 / CSS3 opplæringsserie" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her å 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 websider, 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 kompliserte demoer, er HTML5 / CSS3 egentlig ikke rakettvitenskap, og jeg vil gå 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 en myriade av grunner, men det meste fordi du vil være arbeider med de globale internettstandardene som alle andre designere. På denne måten finner du mer støtte på nettet og din nettsteder 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 blir web som helhet nå sett på som en applikasjonsplattform for HTML (spesielt HTML5), CSS og JavaScript som skal bygges på. Også dette systemet elegant skaper harmoni mellom webdesignere og utviklere ved å sette felles standarder som alle nettlesere bør følge.

I tillegg er mange elementer opprettet til representerer digital digital media. Disse inkluderer og som er store for multimediasupport. I enkelte nettlesere kan du fullføre skjema validering direkte i HTML. Gitt det er fortsatt et stort behov for jQuery, siden det er mange programvareutviklere som ennå ikke har gjenkjent funksjonene. Hvis du vil ha en liste over tagger, sjekk dette W3Schools-tabellen for å lære mer om dem.

Bare HTML5-skjelett

Jeg finner den enkleste måten å forstå noe emne på dykk 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.

   Vår første HTML5-side       Velkommen, en og alle!
   Hjem
 Om oss
 Kontakt
 
 
 
   noe innhold her.
 
  men noen her også!
 
 
  Noen opphavsrett og juridiske merknader her. Kanskje bruk ©-symbolet litt.

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

For de som ikke vet, var det i XHTML-utkast mange elementer 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å du trenger ikke engang den ekstra fremoverstrekkingen! er helt gyldig, selv om du får lov til å fortsette å bruke XHTML / XML-standarden. For alle standardkompatible nettlesere vil begge elementene gjengis på samme måte.

Definere våre sidområder

Flertallet av vår nye kode skal ikke være for sjokkerende. Våre doktypen er hilarisk enklere enn noensinne, ikke behov for overdreven kroppsegenskaper, 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 innenfor a div stikkord. Jeg har merket dette med en ID av wrapper, noe som betyr at den brytes rundt hele nettstedet vårt. Dette er nyttig for å angi maksimal bredde eller posisjon innhold rundt på skjermen. Deretter har jeg brutt siden i tre kjerneelementer - en

, en kjerne

, og en kort

. I mitt spesialtilpassede overskriftsområde har jeg lagt til en forenklet visning av sidens tittel og navigasjonselementer ved hjelp av

merk som en wrapper.

Nå for

med en ID av kjerne Jeg har søkt på en sekundær clearfix. Denne funksjonen gjør det slik vi kan fritt flyte 2 kolonner inni og vi vil ikke oppleve noe falt innhold eller merkelige fenomener. Og med rette, så har jeg plassert to i

merker som vil inneholde henholdsvis våre hovedinnholdsareal og sidebjelke. Vi bruker CSS-stiler til å flyte dem fra hverandre.

Tilsvarende den stille bunntekst stikkord fungerer godt for å skille dette innholdet mellom siden. Innvendig har jeg lagt et høytidelig avsnitt som kan inneholde noen opphavsrett og eierskapsinformasjon. Men sjansene er gode, du vil inkludere litt mer innhold, for eksempel sekundære lenker til sidene dine.

Creative CSS3 Wizardry

For å fullføre denne grunnleggende stencil-oppsettet kan vi bruke noen CSS-stiler. I den grunnleggende HTML5-malen har jeg lagt til en eksternt CSS stilark slik at vi kan holde våre kodeområder skilt. Dette vil rydde opp for mye forvirring i det lange løp når sidene og stilene dine begynner å fungere på forskjellige sider.

(Bildekilde: W3C)

Så jeg har ikke brukt mye tid med CSS, men nok til å vise frem noen fine effekter. Først har jeg brukt noen av Innstillinger for grense-radius å bygge veldig kule navigasjonslink svinger effekter. Du kan målrette mot samme effekt i malekoden, bare legg til følgende linjer i CSS-dokumentet.

 nav display: block; margin-bunn: 10px;  nav ul listestil: none; fontstørrelse: 14px;  nav ul li display: inline;  nav ul li a display: block; flyte: venstre; polstring: 3px 6px; farge: # 575c7d; tekst-dekorasjon: ingen; font-weight: bold;  nav ul li a: svever bakgrunn: # deff90; farge: # 485e0f; -webkit-grense-radius: 3px; -moz-grense-radius: 3px; border-radius: 3px; polstring: 3px 6px; margin: 0; tekst-dekorasjon: ingen;

En annen fin effekt er clearfix stiler. Dette er ikke et helt nytt konsept med CSS3, men det er viktig å bygge standarder som er kompatible med websider. Ofte når du ønsker å flyte innhold ved siden av hverandre, opplever du buggyposisjoneringsfeil. Dette skyldes forskyvningsmarginer og feil ved å sette absolutt bredder for ditt flytede innhold.

Dette konseptet kan virke litt forvirrende, og jeg har lagt til en liten kode nedenfor for å hjelpe. I utgangspunktet målretter vi to

elementer, #venstre og #Ikke sant å korrespondere med siden av siden. Jeg har satt hver med en bestemt bredde og flytende igjen, så de stabler rett opp ved siden av hverandre. Siden vår container div # kjerne inneholder clearfix klasse, dette betyr alt internt innhold kan Beveg deg fritt og fjerner automatisk ekstra plass etterpå.

/ * sidekjerne * / div # kjerne display: block; klare: begge; margin-bunn: 20px;  seksjon # venstre bredde: 550px; flyte: venstre; margin: 0 15px;  delen # høyre float: left; bredde: 300px;  / * clearfix * / .clearfix: etter innhold: "."; skjerm: blokk; klare: begge; synlighet: skjult; linjehøyde: 0; høyde: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix display: block;  * html .clearfix høyde: 1%;

Disse kodene er enkle for å komme i gang. De gjelder også vår HTML5-malkode konstruert tidligere, så dette er enkel praksis. Men når det kommer til ekte web junkies, vil du se på mer CSS3-funksjonalitet.

Mindre kjente CSS3 syntaks

For å lage full HTML5 / CSS3 websider begynner du å bruke noen mye mer komplekse stilark. Mange designere kjenner til korthandskode (for eksempel font: eiendom), siden disse har vært standarder selv før CSS2.

Men det er noen nye egenskaper i CSS3 som mange designere ikke tenker på. Mange av disse er ikke bare for estetikk, men inkluderer også animasjonseffekter. Nedenfor er en kort liste som forklarer noen av egenskapene du kan vurdere å spille med. Prøv googling for syntakseksempler hvis du føler deg tapt.

box-shadow: legger til en fin skyggeeffekt på sidene dine. Du får 4 parametere som stiller stillingen til venstre / høyre, opp / ned, skygge uskarphet og farge. Legg merke til at bokseskygger ikke regnes som ekstra plass til den originale bredden / høyden.
text-shadow: skaper vakre skygger bak sideteksten din. Med de rette effektene kan bokstavene dine komme til å ligge rett utenfor siden.
border-radius: Avrundede hjørner har tatt lang tid å bli aksepterte standarder. For få år siden laget mange web 2.0 designere bakgrunnsbilder bare for å passe avrundede hjørner inn med CSS. Men ved hjelp av CSS3-grense-radius kan du manipulere kurven til hver kant på et hvilket som helst element.
opasitet: Virker som en enkel eiendom som mange designere ikke anser. Opacity forventer en enkelt numerisk inngang som varierer fra 0 til 1,0 (0% - 100%). Denne effekten fungerer som en hover-animasjon.
@ Font-face: Et annet flott eksempel på noen komplekse CSS-stiler og typografi. Webdesignere kan nå jobbe med egne tilpassede skrifttyper ved å definere dem som variabler i CSS-dokumentene dine.
box-sizing: Som standard vil boks størrelse justere alle elementene dine som Innholdet-box. Dette betyr at bredde, polstring og grenser er inkludert i maksimal bredde. Men satt til border-box du kan definere en maks bredde (si 20px) og lagt til polstring / grenser vil inkludere seg selv inn i dette, og dermed fjerne plass inne i objektet. Det er en fantastisk eiendom når du mestrer dets ressurssterkhet.

Disse egenskapene har alle sine sider og nedfellinger. Jeg vil ikke anbefale å prøve å kramme dem alle inn i websidene dine. Men praksis vil gi deg en klar tankegang å gå inn i å utvikle flere nettsteder med letthet.

En ekstra kjernebit av tilsatt syntaks er verdt å nevne attributt selectors. Med CSS3 kan du nå definer stiler basert på HTML-attributter (for eksempel type, href, tittel) og til og med gi spesifikke verdier. Så for eksempel kan vi målrette koblinger med et definert tittelattributt og gi dem et sett med bakgrunnsikon.

 ul li [title ^ = "ico"] bakgrunn: url ('my-icon.gif');

Hvis du merker at jeg har tatt med en caret symbol før likestiltet. Dette er en operatør som definerer alle listeposter som inneholder prefikset, ico. Alternativt kan du erstatte karmen (^) med et dollarskilt ($) for å målrette mot suffiksområdet til tittelen din. På denne måten kan CSS3 legge til bakgrunnsbilder der du kan sette titlene som 'første ico' eller 'bok ico'. Les litt mer om attributtvalgere hvis du er interessert.

Sette alt sammen

Kjernen til HTML5 og CSS3 er nettsider enkelhet. Webutviklere prøver å bygge svært kreative nettsteder på kortere tid og med mindre stress. De nye funksjonene i HTML5 tillater dette med masse wiggle-rom. Og ved å bruke noen av de nye CSS3-selektorene og egenskapene vil du gi fordeler i det lange løp.

(Bildekilde: W3C)

Men også du burde være vurderer sluttbrukeren. Prosessen med å bygge en nettside avsluttes til slutt etter lansering av nettstedet offentlig. Målet ditt er å Vennligst publikum med lett tilgjengelig tilgang, og ikke bare menneskelige lesere, men søkemotor crawlere og indeksering bots. Semantikk har i stor grad utviklet seg til å omfatte nye HTML5-layoutelementer, oppdeling av sidelayouter konsekvent. Det har aldri vært enklere å lage en liten navigasjons- og bunntekstdel i tråd med alle moderne nettlesere.

Når du har blitt komfortabel med å bygge HTML5-websider, vil du sannsynligvis begynne å se på sideanimasjoner. Selv små effekter med JavaScript og AJAX kan majorly forbedre brukeropplevelsen og ytelsen på nettstedet. Selv om dette ikke er en del av artikkelen, anbefaler jeg toying rundt med jQuery hvis du har noen tid. Open source-biblioteket er forbløffende og muliggjør rask prototyping på toppen av HTML5-sideelementer.

Tilleggsressurser

Bloggere over hele verden har diskutert de nye trender i HTML5 og CSS3 og deler ressurser til offentligheten. Tiden er i endring, og nettsamfunnet endrer seg med dem. Du bør vurdere noen nisjeområder å studere og bygge en liten interesse.

Nedenfor finner du noen ekstra lister, artikler og opplæringsprogrammer du kan nyte. Jeg har tatt friheten til å dele lister i HTML5 og CSS3 ressurser. Basert på hva du ser på, bør det være noen temaer her for alle. Også nyt det korte galleriet med gratis HTML-temaer tilgjengelig for nedlasting på nettet!

HTML5

HTML5: 15 Inspirerende eksperimenter
HTML5: 19 Web-applikasjoner
HTML5: 48 Potensielle Flash-Killing Demos
Opprett Ajax-basert HTML5 / CSS3 kontaktskjema

CSS3

CSS3: En nybegynnerveiledning
CSS3: Opprette søkefelt
CSS3: Bruk av Pseudo-klasser
CSS3: 30 + Nyttige opplæringsprogrammer

Bonus: HTML5 Maler og Temaer

Design Company

Klar til å gå inn i den fantastiske verden av HTML5? Her er en helt gratis HTML5-mal, med jQuery-skript og egendefinerte skrifter som er bevæpnet for at du skal teste fritt!

Et HTML5 / CSS3 tema

Dette HTML5 / CSS3-drevne temaet har vanlig blogg layoutdesign for at du enten kan bygge din egen HTML5-blogg med omfattende funksjoner, eller bare grave inn i koden og lære noe om det.

Yoko

Yoko er et moderne WordPress-tema som snakker om fleksibilitet med sin responsive layout basert på CSS3 medieforespørsler, som er muligheten til å tilpasse seg forskjellige skjermstørrelser, bli kjent med det!

Grå

Hvis du foretrekker den klassiske WordPress bloggens stil, er Gray trolig for deg med sine innebygde CSS3-funksjoner som grense-radius, flere bakgrunner, tekstskygge osv..

Beginner's Guide to Flock, den sosiale medieavleseren

Begynnerveiledning for IOS-utvikling Grensesnittet - Del I

Begynnerveiledning for å sette opp Windows 7 Media Center