Aloittelijan opas HTML5 / CSS3-verkkosivujen rakentamiseen

Tämä artikkeli on osa meidän "HTML5 / CSS3-oppaiden sarja" - omistettu auttamaan sinua parantamaan suunnittelijaa ja / tai kehittäjää. Klikkaa tästä nähdä lisää saman sarjan artikkeleita.

HTML5 ja CSS3 ovat pyyhkineet verkkoa myrskynä vain 2 vuoden kuluttua. Ennen niitä on tapahtunut monia muuttuneita semantiikoita, joilla web-suunnittelijoiden odotetaan luovan verkkosivuja, ja niiden saapuessa tulee mahtava tuki, kuten vaihtoehtoiset mediat, XML-tyyliset tunnisteet ja web-suunnittelijoiden progressiiviset syöttöominaisuudet unenomaisen ominaisuuksia, kuten animaatiota.

Vaikka useimmat kehittäjät näyttävät esittelevän mahdollisia vielä monimutkaisia ​​demoja, HTML5 / CSS3 eivät ole todellakin rakettitiede, ja kävelen sinua rentouttavan prosessin avulla, jotta voit rakentaa HTML5 / CSS3-standardin sisältävän verkkosivun, jossa on kattava ja perusteellinen selitys ja sitten! Bonukset, kuten oppimisresurssit ja ilmaiset HTML5-mallit ovat käytettävissäsi, joten ota tämä mahdollisuus käynnistää HTML5-matka!

Muutokset HTML4: n ja HTML5: n välillä

Saatat ihmetellä, miksi on edes tärkeää siirtyä HTML5: ksi. On olemassa lukuisia syitä, mutta lähinnä siksi, että olet maailmanlaajuisten Internet-standardien kanssa kuten jokainen muu suunnittelija. Näin löydät lisää tukea verkossa ja verkkosivustot näkyvät oikein nykyaikaisissa selaimissa jotka ovat jatkuvasti parantuneet.

(Kuvalähde: W3C)

HTML4: n ja HTML5: n vertailu on vaikeaa havaita pinnan tasolla. Katsellessasi uutta HTML5-luonnosta näet näkyvät elementit ja korjattu virheenkäsittelymenetelmät. Selaimen kehittäjät ovat erityisesti nauttineet uusista eritelmistä oletusverkkosivujen esittämiseksi.

Enemmän HTML5: stä on modernin verkkoselaimen muuntaminen. Näiden uusien eritelmien avulla verkkoa pidetään nyt kokonaisuutena sovellusalusta HTML (erityisesti HTML5), CSS ja JavaScript on tarkoitus rakentaa. Myös tämä järjestelmä on tyylikäs luo harmoniaa web-suunnittelijoiden ja kehittäjien välillä asettamalla yhteiset standardit, joita kaikkien selainten tulisi noudattaa.

Lisäksi on luotu monia elementtejä edustaa uudenikäistä digitaalista mediaa. Nämä sisältävät ja jotka ovat valtavia multimediatuen käyttöön. Joissakin selaimissa voit suorittaa lomakkeen validoinnin suoraan HTML-muodossa. JQueryn tarve on edelleen suuri, koska on olemassa monia ohjelmistokehittäjiä, jotka eivät ole vielä tunnistaneet ominaisuuksia. Jos haluat, että luettelo tunnisteista, tarkista tästä W3Schools-taulukosta.

Bare HTML5-luuranko

Minusta on helpoin tapa ymmärtää kaikki aiheet sukella oikealle. Joten rakennan hyvin yksinkertaisen HTML5-luuramallin verkkosivulle. Olen sisällyttänyt muutamia uusia elementtejä, jotka toivon luokitella hieman myöhemmin.

        
 
 
Tervetuloa, yksi ja kaikki!
  
 
 
 
sisältöä täällä.
 
 
 
mutta jotkut täällä!
 
 
  
   

Heti tämä ei eroa tavallisesta HTML4-sivusta. Saatat huomata, että me ei tarvitse sisällyttää enempää itsestään sulkevia tunnisteita. Tämä on todella hieno uutinen, sillä se säästää paljon aikaa kehityshankkeistasi.

Niille, jotka eivät tiedä, XHTML-luonnoksissa oli useita merkintöjä itsesulkeutuva. Nämä päättyisivät eteenpäin leikkaavalla viivalla ennen kuin "suurempi kuin" -käyttäjä ilmoittaa, että sinun ei tarvitse sisällyttää toista sulkumerkkiä muualle. Voit esimerkiksi luoda meta-avainsanamerkinnän, jota käytät ilman sulkemista muualla.

Tätä sääntöä sovelletaan edelleen HTML5: ssä. Mutta nyt sinä ei edes tarvitse ylimääräistä eteneväliä! on täysin pätevä, vaikka sinulla on oikeus jatkaa XHTML / XML-standardia. Kaikkien standardien mukaisten selainten kohdalla molemmat elementit muuttuvat samalla tavalla.

Sivualueiden määrittäminen

Suurin osa uudesta koodistamme ei saisi olla liian järkyttävä. Meidän doctype on hilpeästi yksinkertaisempi kuin koskaan, ei tarvita liiallisia kehon ominaisuuksia, ja otsikkomme tiedot on merkitty selvästi. Siirrymällä haluaisin keskittyä huomiomme sisältöön tag. Tämä sisältää kaikki pääsivun rakenteen. Olen käyttänyt tarkoituksenmukaisesti muutamia mukavia HTML5-tunnisteita, jotka osoittavat, miten voit sisällyttää ne omaan työhön.

Näet ensin koko sivun kapseloitu a div tag. Olen merkinnyt tämän tunnuksella kääre, se tarkoittaa, että se ympäröi koko sivuston sisältöä. Tämä on hyödyllinen, jos haluat asettaa enimmäisleveyden tai sijaintisisällön noin näytöllä. Seuraavaksi olen hajonnut sivun kolmeen ydinosaan - yksi

, ydin

, ja lyhyt

Aloittelijan opas Flockille, sosiaalisen median selain

Aloittelijan opas iOS-kehitykseen Liitäntä - Osa I

Aloittelijan opas Windows 7 Media Centerin määrittämiseen