Algaja juhend HTML5 / CSS3 veebilehtede loomiseks

See artikkel on osa meie "HTML5 / CSS3 juhendite seeria" - pühendatud selleks, et aidata teil paremini disainer ja / või arendaja. Kliki siia et näha sama seeria rohkem artikleid.

HTML5 ja CSS3 on pühkinud veebi tormiga vaid 2 aasta jooksul. Enne neid on olnud mitmeid muudetud semantikaid, kuidas veebidisainerid peaksid veebilehti looma, ning nende saabumisel tulevad suured toetused nagu alternatiivsed meediumid, XML-stiilis sildid ja veebidisainerite progressiivsed sisendribuudid, et saavutada unistav funktsioonid nagu animatsioon.

Kuigi enamik arendajaid näib võimalikke veel keerulisi demosid, HTML5 / CSS3 ei ole tegelikult raketiteadus ja ma lähen teid lõõgastava protsessi käigus, et ehitada välja HTML5 / CSS3 standardne veebileht, millel on põhjalik, kuid põhjalik selgitus ja siis! Boonused, nagu õppevahendid ja tasuta HTML5 mallid, on teile kättesaadavad, nii et kasutage seda võimalust, et alustada HTML5-teekonda!

Muudatused HTML4 ja HTML5 vahel

Te võite küsida, miks on isegi oluline HTML5-sse lülituda. On mitmeid põhjuseid, kuid enamasti sellepärast, et sa oled ülemaailmsete internetistandarditega töötamine nagu iga teine disainer. Nii leiad rohkem tuge võrgus ja teie veebisaitide esitamine kaasaegsetes brauserites mis on pidevalt paranenud.

(Pildi allikas: W3C)

HTML4 ja HTML5 võrdlust on pinnatasandil raske tuvastada. Uue HTML5-eelnõu vaatamise ajal saate näha pakutud elemente ja parandatud vigade käsitlemise protseduure. Brauseri arendajad on spetsiaalselt nautinud vaikimisi veebilehtede esitamise uusi spetsifikatsioone.

Veelgi enam HTML5-st on meie kaasaegse veebibrauseri konversioon. Nende uute tehniliste kirjeldustega nähakse veebi tervikuna nüüd kui rakendusplatvorm HTML (eriti HTML5), CSS ja JavaScripti jaoks. Ka see süsteem on elegantselt loob harmooniat veebidisainerite ja arendajate vahel kehtestades ühised standardid, mida kõik brauserid peaksid järgima.

Lisaks on loodud palju elemente esindavad uue vanuse digitaalset meediat. Need sisaldavad ja mis on tohutu multimeediumitoe jaoks. Mõnes brauseris võite vormi valideerimise otse HTML-is täita. Antud juhul on jQuery jaoks veel suur vajadus, sest seal on palju tarkvaraarendajaid, kes ei ole veel funktsioone ära tundnud. Kui soovite, et siltide loendist leiate lisateavet W3Schools'i tabeli kohta.

Bare HTML5 skelett

Ma leian, et kõige lihtsam on mõista mis tahes teemat sukelduda paremale. Nii ehitan veebilehe jaoks väga lihtsa HTML5 skeleti malli. Lisasin mõned uuemad elemendid, mida ma loodan veidi hiljem kategoriseerida.

   Meie esimene HTML5 lehekülg       Tere tulemast, üks ja kõik!
   Kodu
 Meist
 Kontaktid
 
 
 
   sisu siin.
 
  kuid mõned ka siin!
 
 
  Mõned autoriõiguse ja juriidilised teated. Võib-olla kasutage natuke © sümbolit.

Kohe see ei erine tavapärasest HTML4 veebisaidist. Mida te võib-olla märkate, on see, et me ei pea sisaldama enesesulguvaid silte. See on tõeliselt suurepärane uudis, sest see säästab teie arendusprojektidest palju aega.

Neile, kes ei tea, olid XHTML-i mustandites märgistatud palju elemente isesulguv. Need lõppeksid edasi-tagasi kaldkriipsuga, enne kui „suurem kui” operaator tähistab, et te ei pea mujal sulgema sildi. Näiteks selleks, et luua meta märksõnade silt, mida kasutaksite ilma sulgemiseta mujal.

See reegel kehtib ka HTML5-s. Aga nüüd isegi ei vaja ekstra ettepoole suunatud kaldkriipsu! on täielikult kehtiv, kuigi teil on lubatud jätkata XHTML / XML standardi kasutamist. Kõigi standarditele vastavate brauserite puhul annavad mõlemad elemendid samamoodi.

Meie lehekülje piirkondade määratlemine

Enamik meie uuest koodist ei tohiks olla liiga šokeeriv. Meie doctype on lõbusalt lihtsam kui kunagi varem, ei ole vaja liigseid keha atribuute, ja meie rubriigis olev teave on selgelt märgistatud. Liigutades tahaksin teie tähelepanu keskenduda meie sisule silt. See hõlmab kõiki põhilehekülje struktuure. Ma olen sihikindlalt kasutanud mõnda kena HTML5-märgendit, et näidata, kuidas neid oma töösse lisada.

Kõigepealt näete kogu lehekülge kapseldatud a div silt. Ma märgistasin selle ID-ga ümbris, see tähendab, et see ümbritseb kogu meie veebisaidi sisu. See on kasulik, kui soovid määrata maksimaalse laiuse või asendi sisu ümber ekraanil. Järgmisena murdsin lehe kolmeks põhielemendiks - üks

, tuum

, ja lühike

. Minu kohandatud päise ala sees olen lisanud lehe pealkirja ja navigeerimismaterjalide lihtsustatud kuva

sildi pakendina.

Nüüd

ID-ga tuum Olen rakendanud teisejärgulist selgitus. See funktsioon võimaldab seda teha vabalt ujuda 2 veergu sees ja me ei koge mingit langenud sisu ega imelikke nähtusi. Ja õigustatult, nagu ma sees olen paigutanud kaks

sildid, mis sisaldavad vastavalt meie põhisisu ja külgriba. Me kasutame CSS-stiile nende hajutamiseks.

Samamoodi vaikne jalus silt toimib hästi selle sisu eristamiseks lehekülje vahel. Ma olen paigutanud pühaliku lõike, mis võib sisaldada autoriõiguse ja omandiõiguse andmeid. Kuid võimalused on head, kui soovid lisada veidi rohkem sisu, näiteks teiseseid linke teie lehtedele.

Loov CSS3 võlur

Selle trafareti põhi paigutuse lõpetamiseks saame kasutada mõningaid CSS-stiile. HTML5 põhipõhises mallis lisasin välise CSS-stiili nii et me saame oma koodipiirkonnad eraldada. See on selge segadus pikas perspektiivis, kui teie leheküljed ja stiilid hakkavad erinevate lehekülgede jaoks ilmuma.

(Pildi allikas: W3C)

Nii et ma pole CSS-iga palju aega veetnud, kuid piisavalt, et näidata paari puhta efekti. Kõigepealt olen kasutanud mõnda piiriradade seaded ehitada väga lahe navigatsioonilinki hoverefektid. Sama efekti saab sihtmärgikoodiga sihtida, lisage CSS-dokumenti lihtsalt järgmised read.

 nav kuva: plokk; margin-bottom: 10px;  nav ul list-style: pole; fondi suurus: 14px;  nav ul li kuva: inline;  nav ul li a display: block; float: vasakule; polsterdus: 3px 6px; värv: # 575c7d; teksti kaunistus: mitte; fondi kaal: rasvane;  nav ul li a: hover background: # deff90; värv: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; raadius: 3x; polsterdus: 3px 6px; varu: 0; teksti kaunistus: mitte;

Teine puhas efekt on Clearfixi stiilid. See ei ole täiesti uus mõiste CSS3-ga, kuid see on oluline standarditele vastavate veebilehtede loomiseks. Sageli, kui otsite sisu üksteise kõrvale, saate kogeda vigaseid positsioneerimisvigu. Selle põhjuseks on nihutatud varu ja vead teie ujuva sisu absoluutsete laiuste seadmisel.

See kontseptsioon võib tunduda natuke segadust tekitavana ja ma olen lisanud sellele väikese koodi. Põhimõtteliselt oleme suunatud kahele

elemente, #left ja # õige vastama lehe küljele. Olen seadnud igaühele kindla laiuse ja ujuvad vasakule, nii et nad panevad üksteise kõrval virna. Kuna meie konteiner div # tuum sisaldab selgitus See tähendab, et kogu sisemine sisu saab liikuge vabalt ja eemaldab seejärel automaatselt täiendava ruumi.

/ * lehekülje südamik * / div # core kuva: plokk; selge: mõlemad; margin-bottom: 20px;  sektsioon # vasakule laius: 550px; float: vasakule; varu: 0 15px;  lõik # right float: vasakul; laius: 300 px;  / * clearfix * / .clearfix: pärast content: "."; kuva: plokk; selge: mõlemad; nähtavus: peidetud; rea kõrgus: 0; kõrgus: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix display: block;  * html .clearfix kõrgus: 1%;

Need koodid on alustamiseks lihtsad. Need puudutavad ka meie varem ehitatud HTML5 malli koodi, nii et see on lihtne praktika. Aga kui tegemist on reaalsete veebi junkiesega, uurite rohkem CSS3 funktsioone.

Vähem tuntud CSS3 süntaks

Täielike HTML5 / CSS3 veebilehtede ehitamiseks hakkate kasutama mõningaid keerukamaid tabeleid. Paljud disainerid teavad stenogrammi koodi (nt font: kinnisvara), kuna need on olnud standardid isegi enne CSS2.

Kuid CSS3-s on mõned uued omadused, mida paljud disainerid ei mõtle. Paljud neist ei ole ainult esteetika jaoks, vaid sisaldavad ka animatsiooniefekte. Allpool on lühike nimekiri, mis selgitab mõningaid omadusi, mida võiksite mängida. Proovige googlingi süntaksi näidete puhul, kui tunned kadunud.

kast-vari: lisab teie leheelementidele puhta varjuliku efekti. Teile antakse 4 parameetrit, mis seavad positsiooni vasakule / paremale, üles / alla, varju hägusust ja värvi. Pange tähele, et kasti varje ei peeta algse laiuse / kõrguse lisaruumiks.
teksti vari: loob ilusad varjud lehekülje teksti taha. Õige efekti abil võivad teie tähed ilmuda lehe kõrvale.
raadius: Ümardatud nurgad on aktsepteeritud standardiks muutunud. Mõned aastad tagasi töötasid paljud veebi 2.0 disainerid taustapilte, et sobitada CSS-iga ümarad nurgad. Kuid CSS3-raadiuse abil saate iga elemendi kõverat manipuleerida mis tahes elemendil.
läbipaistmatus: Tundub lihtne omadus, mida paljud disainerid ei arva. Läbipaistvus ootab ühte numbrilist sisendit vahemikus 0 kuni 1,0 (0% - 100%). See efekt toimib suurepäraselt hover-animatsioonina.
@ font-face: Teine ilus näide mõnest keerukast CSS-stiilist ja tüpograafiast. Veebidisainerid saavad nüüd töötada oma kohandatud fontidega, määratledes need CSS-dokumentides olevate muutujatena.
kastide suurus: vaikimisi määrab kasti suuruse kõik oma elemendid sisu-kast. See tähendab laiust, polsterdamist ja piirid on kõik maksimaalse laiusega. Aga seadistage kasti saate määratleda maksimaalse laiuse (näiteks 20 pikslit) ja lisatud polster / piirid lisavad endasse sellesse, kõrvaldades nii objekti sisemuse. See on fantastiline vara, kui olete selle leidlikkuse.

Neil omadustel on kõik tõusud ja langused. Ma ei soovitaks neid kõiki oma veebilehtedele kramplata. Aga praktika annab teile selge mõtteviisi sõlmida uusi veebisaite kergesti.

Veel üks tuum lisatav süntaks, mida tasub mainida, on atribuutide valikud. CSS3-ga saate nüüd määrake HTML-atribuutidel põhinevad stiilid (nagu tüüp, href, pealkiri) ja isegi konkreetsed väärtused. Näiteks võiksime suunata lingid määratletud tiitli atribuudiga ja anda neile taustapildi.

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

Kui märkate, et olen lisanud a caret sümbol enne võrdsust. See on operaator, kes määratleb kõik eesliite hoidjad, ico. Teise võimalusena saate kande (^) asendada dollarimärgiga ($), et suunata pealkirja sufiksi ala. Sel moel teab CSS3 taustapilte, kus võid määrata pealkirjad „esimesteks ico” või „book ico”. Lugege natuke rohkem atribuutide valijatest, kui olete huvitatud.

Kõike kokku panema

HTML5 ja CSS3 veebilehtede keskmes on lihtsus. Veebiarendajad üritavad luua vähem loomingulisi veebisaite vähem aega ja vähem stressi. Uued funktsioonid HTML5-s lubavad seda rohkelt ruumis. Mõnede uute CSS3 valikute ja omaduste kasutamine annab teile pikemas perspektiivis eeliseid.

(Pildi allikas: W3C)

Aga samuti peaksite olema arvestades lõppkasutajat. Veebilehe loomise protsess lõpeb lõpuks pärast veebisaidi avalikustamist. Sinu eesmärk on vaata publikut kergesti ligipääsetava teabega, ja mitte ainult inimeste lugejaid, vaid otsingumootori roomikud ja robotite indekseerimine. Semantika on oluliselt arenenud, lisades uusi HTML5 paigutuselemente, jagades järjepidevalt lehekülje paigutused. Ei ole kunagi olnud lihtsam ehitada väikest navigeerimis- ja jalusosa, mis oleks kooskõlas kõigi kaasaegsete veebibrauseritega.

Kui olete muutunud mugavaks HTML5 veebilehtede loomiseks, hakkate tõenäoliselt lehekülje animatsioone vaatama. Isegi väikesed efektid JavaScript ja AJAX abil võivad olla suured parandada kasutajate kogemusi ja saidi toimivust. Kuigi see ei ole osa artikli ulatusest, siis soovitan mängida jQueryga, kui teil on aega. Avatud lähtekoodiga raamatukogu on hämmastav ja võimaldab HTML5 lehekülje elementide peal kiiret prototüüpimist.

Lisaressursid

Bloggaajad üle kogu maailma on arutanud HTML5 ja CSS3 uusi suundumusi ning jagavad ressursse avalikkusele. Aeg muutub ja veebikogukond muutub nendega. Väikeste huvide uurimiseks ja ehitamiseks peaksite kaaluma mõningaid nišipiirkondi.

Allpool on mõned täiendavad nimekirjad, artiklid ja õpetused, mida võite nautida. Olen võtnud vabaduse nimekirjad jaotada HTML5 ja CSS3 ressurssideks. Tuginedes sellele, mida te vaatate, peaks siin olema mõned teemad. Naudi ka lühikest vaba HTML-teemade galeriid, mida saab alla laadida veebis!

HTML5

HTML5: 15 Inspireerivad eksperimendid
HTML5: 19 veebirakendused
HTML5: 48 Võimalikud Flash-Killing Demod
Loo Ajax-põhine HTML5 / CSS3 kontaktvorm

CSS3

CSS3: algaja juhend
CSS3: otsinguvälja loomine
CSS3: Pseudo-klasside kasutamine
CSS3: 30+ Kasulikud juhendid

Boonus: HTML5 mallid ja teemad

Disainifirma

Kas olete valmis HTML5 imelise maailma juurde astuma? Siin on täiesti tasuta HTML5 mall, mille jQuery skriptid ja kohandatud fontid on relvastatud, et vabalt testida!

HTML5 / CSS3 teema

Sellel HTML5 / CSS3 toega teemal on ühine blogi kujundus, mis võimaldab teil ehitada oma HTML5-blogi, millel on ulatuslikud funktsioonid, või lihtsalt kaevata koodi ja õppida sellest midagi.

Yoko

Yoko on kaasaegne WordPress teema, mis räägib paindlikkusest koos oma reageeriva paigutusega, mis põhineb CSS3 meedia päringutel, mis on võime kohaneda erinevate ekraanisuurustega, saada sellest teada!

Hall

Kui eelistate klassikalist WordPressi blogi stiili, on Grey teile ilmselt oma sisseehitatud CSS3 funktsioonidega, nagu näiteks raadius, mitu tausta, teksti-vari jne..

Algaja juhend flokile, sotsiaalmeedia brauser

Algaja juhend iOS-i arendamiseks Liides - I osa

Algajatele Windows 7 Media Centeri seadistamise juhend