Navodila za začetnike za izdelavo spletnih strani HTML5 / CSS3

Ta članek je del našega "Serija vadnic HTML5 / CSS3" - namenjen vam je za boljšega oblikovalca in / ali razvijalca. Klikni tukaj da si ogledate več člankov iz iste serije.

HTML5 in CSS3 sta v samo 2 letih preplavila splet. Pred njimi je bilo veliko spremenjene semantike v načinu, kako se od oblikovalcev spletnih strani pričakuje, da bodo ustvarjale spletne strani, in s svojim prihodom prinesla množico odličnih podpore, kot so alternativni mediji, oznake v slogu XML in napredni atributi vnosa za spletne oblikovalce, da dosežejo sanjske funkcije, kot je animacija.

Čeprav se zdi, da večina razvijalcev pokaže potencialne še zapletene predstavitve, HTML5 / CSS3 niso resnična raketna znanost, in jaz vas bom vodil skozi sproščujoč proces za izdelavo standardne spletne strani HTML5 / CSS3 s celovito, a poglobljeno razlago in tada! Bonusi, kot so sredstva za učenje in brezplačne HTML5 predloge, so na voljo za vas, zato izkoristite to priložnost in začnite s potovanjem v HTML5!

Spremembe med HTML4 in HTML5

Morda se sprašujete, zakaj je celo pomembno, da preklopite v HTML5. Obstaja veliko razlogov, vendar predvsem zato, ker boste z globalnimi internetnimi standardi kot vsak drug oblikovalec. Na ta način boste našli več podpore na spletu in vaše spletne strani se bodo v sodobnih brskalnikih pravilno prikazale ki se nenehno izboljšujejo.

(Vir slike: W3C)

Primerjavo med HTML4 in HTML5 je težko opaziti na ravni površine. Pri ogledu novega osnutka HTML5 si lahko ogledate elemente in popravljene postopke za ravnanje z napakami. Razvijalci brskalnikov so posebej uživali nove specifikacije za upodabljanje privzetih spletnih strani.

Še več od HTML5 je pretvorba našega sodobnega spletnega brskalnika. S temi novimi specifikacijami se splet kot celota zdaj obravnava kot aplikacijsko platformo za HTML (zlasti HTML5), CSS in JavaScript, ki bo zgrajen. Tudi ta sistem elegantno ustvarja harmonijo med spletnimi oblikovalci in razvijalci z določitvijo skupnih standardov, ki bi jih morali upoštevati vsi brskalniki.

Poleg tega je bilo ustvarjenih veliko elementov za predstavljajo digitalne medije novega leta. Tej vključujejo in ki so velike za multimedijsko podporo. V nekaterih brskalnikih lahko preverjanje veljavnosti obrazca izpolnite neposredno v HTML-ju. Odobrena je še vedno velika potreba po jQuery, saj obstaja veliko razvijalcev programske opreme, ki še niso prepoznali funkcij. Če želite seznam oznak, preverite to tabelo W3Schools, če želite izvedeti več o njih.

Bare HTML5 skelet

Ugotavljam, da je najlažje razumeti katerokoli temo potopite se naravnost v to. Zato bom izdelal zelo osnovno HTML5 skeletno predlogo za spletno stran. Vključil sem nekaj novih elementov, za katere upam, da jih bom malo kasneje kategoriziral.

        
 
 
Dobrodošli, vsi skupaj!
  
 
 
 
nekaj vsebine tukaj.
 
 
 
ampak tudi nekateri tukaj!
 
 
  
   

To se takoj ne razlikuje od standardne spletne strani HTML4. Morda boste opazili, da smo mi ni treba vključiti nobenih samozapiralnih oznak. To je resnično čudovita novica, saj bo prihranila veliko časa pred vašimi razvojnimi projekti.

Za tiste, ki ne vedo, je bilo v osnutkih XHTML označenih veliko elementov samozapiranje. To bi se končalo s poševnico naprej pred operaterjem 'večje od', da bi označili, da drugam ne bi bilo treba dodati druge zaključne oznake. Na primer, ustvarite oznako meta ključnih besed, ki bi jo uporabljali brez potrebe po zapiranju drugje.

To pravilo še vedno velja v HTML5. Ampak zdaj ti sploh ne potrebujete dodatne poševnice naprej! je popolnoma veljavno, čeprav lahko nadaljujete z uporabo standarda XHTML / XML. Pri vseh brskalnikih, skladnih s standardi, bosta oba elementa prikazana na enak način.

Določanje področij strani

Večina naše nove kode ne bi smela biti preveč šokantna. Naše Doctype je smešno enostavnejša kot kdajkoli prej, ni potrebe po prekomernih lastnostih telesa, informacije v naslovu so jasno označene. Nadaljujem sem se osredotočil na vašo vsebino oznaka. To vključuje celotno strukturo glavne strani. Namerno sem uporabil nekaj lepih oznak HTML5, ki označujejo, kako jih lahko vključite v svoje delo.

Najprej boste videli celotno stran enkapsulirano v div oznaka. To sem označil z ID ovoj, kar pomeni, da se zavija okoli celotne vsebine spletnega mesta. To je uporabna za nastavitev največje vsebine širine ali položaja na zaslonu. Naprej sem razdelil stran v 3 osnovne elemente - eno

, jedro

, in kratko

Začetniški priročnik za Flock, Social Media Browser

Vodnik za začetnike za razvoj iOS-a Vmesnik - I. del

Navodila za začetnike za nastavitev sistema Windows 7 Media Center