Kaip sukurti svetainę per kelias minutes naudojant HTML5 katalogą

Kaip sukurti svetainę per kelias minutes naudojant HTML5 katalogą

Kai kuriate naują svetainę, šiais laikais norite, kad ji būtų suderinama su HTML5. Bet jūs taip pat nenorite praleisti nereikalingo laiko mokydamiesi HTML5 subtilybių nuo nulio, ar ne?





Laimei, HTML5 katilo plokštės šablonas gali padėti. Tai paprastas priekinės dalies šablonas, kurį galite naudoti kurdami HTML5 svetainę vos per kelias minutes. Tačiau jis taip pat yra pakankamai galingas, kad galėtumėte jį naudoti kaip sudėtingos, pilnai rodomos svetainės pagrindą.



Nemokami filmai atsisiųsti ir užsiregistruoti

Šioje „HTML5 Boilerplate“ pamokoje apžvelgsime, kas yra šablone, pagrindai, kuriuos reikia žinoti, kaip jį naudoti, ir kai kurie ištekliai tolesniam mokymuisi. Taip pat parodysiu, kaip aš naudoju šabloną kurdamas labai paprastą svetainę, kurioje yra tik kelios HTML eilutės.





HTML5 katalogo šablonas

Atsisiuntę šabloną iš „HTML5 Boilerplate“, gausite daugybę aplankų ir failų. Čia yra ZIP failo turinys:

css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.png

Čia nenagrinėsime kiekvieno šablono elemento, tik pagrindus. Tačiau norėdami įsitikinti, kad turite išteklių naudoti visus failus, pradėsime nuo pagalbos dokumentų.



HTML5 katilo plokštės žinyno dokumentacija

„Boilerplate“ turi kolekciją pagalbos dokumentai, priglobti „GitHub“ . Tai labai padeda, kai turite techninių klausimų arba jums kyla klausimas, kodėl kažkas buvo suprojektuota taip, kaip buvo.

Beveik viskas, kas yra dokumentuose, taip pat įtraukta į šablono doc aplanką. Pamatysite daugybę „Markdown“ (.md) failų, kurie labai padės išsiaiškinti, kaip sukurti „Boilerplate“ svetainę.



Jei norite perskaityti viską, pradėkite nuo TOC.md ir sekite nuorodas į kitus „Markdown“ failus. Jei ieškote pagalbos dėl konkrečios problemos, raskite failą, kuris, atrodo, gali būti susijęs; use.md yra gera vieta pradėti.

Pradedant nuo HTML5 „Boilerplate“ CSS

HTML5 „Boilerplate“ šabloną sudaro du CSS failai: main.css ir normalize.css.



Antrasis failas normalize.css padeda skirtingoms naršyklėms nuosekliai pateikti elementus. Norėdami sužinoti daugiau apie tai, kaip tai veikia, peržiūrėkite normalize.css projektas „GitHub“ .

Tuo tarpu main.css yra vieta, kur įvesite bet kokį jums reikalingą kodą suformatuokite savo svetainę naudodami CSS . Į šabloną įtrauktas standartinis CSS yra kūrėjų ir HTML5 „Boilerplate“ bendruomenės atliktų tyrimų rezultatas. Jis skaitomas ir puikiai rodomas įvairiose naršyklėse.

Jei norite pridėti savo CSS, galite jį įtraukti į skyrių Autoriaus pasirinktiniai stiliai. Prie mūsų pavyzdinio puslapio pridėsiu šiek tiek nuorodų stiliaus:

Į pagrindinę CSS taip pat įtraukta nemažai naudingų pagalbininkų klasių. Kai kurie iš jų slepia elementus nuo standartinių naršyklių ir ekrano skaitytuvų (arba kai kurių derinių).

Taip pat main.css rasite pritaikyto dizaino palaikymą ir naudingus spausdinimo nustatymus.

Visi šie dalykai yra aiškiai paaiškinti CSS komentarais:

Apskritai galite pradėti naudotis pagrindine CSS.

Savo šablono pridėjimas savo HTML

„Boilerplate“ apima du HTML failus: 404.html ir index.html.

Rodyklės puslapyje sukursite pagrindinį puslapį (arba vienintelį puslapį, jei ieškote paprasto vieno puslapio).

Jei naršyklėje atidarysite rodyklės puslapį, matysite vieną teksto eilutę. Tačiau pažvelgus į HTML, daug daugiau slepiasi kode. Vienintelis dalykas, dėl kurio tikrai reikia nerimauti dėl pakeitimo, yra „Google Analytics“ kodas (raskite tekstą „UA-XXXXX-Y“ ir pakeiskite jį savo stebėjimo kodu).

Likusi rodyklės puslapio HTML dalis apima žiniatinklio programų informaciją, senų naršyklių pranešimus ir naudingus „JavaScripts“. Kai pradedate, jums nereikės su tuo susipainioti.

Tačiau jei jie jau yra užpildyti, tai yra geras būdas įsitikinti, kad jūsų svetainė yra pasirengusi išnaudoti visas HTML5 galimybes.

Norėdami sukurti savo puslapį, įterpkite HTML tarp failo žymų. Štai pagrindinė informacija, kurią pridėsiu apie save:

Norite sukurti daugiau puslapių? Sukurkite šio failo kopijas ir pervardykite jas, kad nereikėtų kopijuoti ir įklijuoti viso HTML. Tada pridėkite savo turinį.

Jei norite tinkinti 404 puslapį, tiesiog pakeiskite HTML failą. Nežinote, ką įdėti į savo 404 puslapį? Peržiūrėkite šiuos puikius 404 puslapių dizaino pavyzdžius.

„Favicon“ (ir kitų piktogramų) pridėjimas

Norite pakeisti savo mėgstamą? Tada favicon.ico yra failas, kurį turėsite pakeisti.

Jei dar neturite, turėsite jį sukurti. Galite naudoti internetinį „favicon“ generatorių arba sukurti savo. Tiesiog įsitikinkite, kad jis yra 16 x 16 pikselių ir ar .ico failo tipas.

geriausia muzikos grojimo programa iphone

Gera mintis šiek tiek pamąstyti apie savo mėgstamą. Naudokite šiuos garsiuosius faviconus, kad galėtumėte vadovautis savo mintimis. Įsitikinkite, kad pridedant naują favicon jis vadinamas favicon.ico.

Galite pastebėti, kad pagrindiniame jūsų svetainės kataloge yra dar trys vaizdai: icon.png, tile.png ir tile-wide.png. Kam jie skirti?

  • „icon.png“ naudojamas „Apple“ jutiklinėms piktogramoms. Jei kuriate žiniatinklio programą, ši piktograma bus naudojama, kai „iPhone“ ar „iPad“ naudotojas pridės programą prie savo pagrindinio ekrano.
  • tile.png ir tile-wide.png yra skirti „Windows“ „pin“ funkcijoms ir bus rodomi „Windows 10“.

Patartina pateikti piktogramas visais šiais atvejais, bet jei nesukuriate žiniatinklio programos, tai gali būti žemesnis prioritetas.

Pridėkite daugiau funkcionalumo

Pridėję HTML ir faviconą (taip pat bet kurį CSS, kurį galbūt norėsite įtraukti), svetainė paruošta paskelbti. Štai kaip paprasta naudoti HTML5 katilinę. Įkelkite jį į savo serverį ir viskas!

Štai kaip atrodo mūsų puslapis:

Kaip matote, vos kelios teksto eilutės sukūrė visiškai funkcionalią (jei šiek tiek nuobodžią) svetainę. Tai nėra daug, bet užtruko tik kelias minutes. Ir tai labai išplečiama naudojant HTML5. Tai yra „Boilerplate“ šablono galia.

Bet jei norite, galite padaryti daug daugiau naudodami „Boilerplate“ šabloną. Jei ieškote kažko konkretaus, yra didelė tikimybė, kad tai rasite pagalbos dokumentuose.

Jei nesate tikri, ką galite padaryti naudodami HTML5, bet norėtumėte tai sužinoti, yra daug žiniatinklio dizaino pamokų, kurios jums padės.

Dalintis Dalintis „Tweet“ Paštu Ar gerai įdiegti „Windows 11“ į nesuderinamą kompiuterį?

Dabar galite įdiegti „Windows 11“ senesniuose kompiuteriuose naudodami oficialų ISO failą ... bet ar tai gera idėja?

Skaityti toliau Susijusios temos
  • Programavimas
  • HTML5
  • Kodavimo pamokos
Apie autorių Tada Olbraitas(Paskelbti 506 straipsniai)

Dann yra turinio strategijos ir rinkodaros konsultantas, padedantis įmonėms generuoti paklausą ir potencialius klientus. Jis taip pat rašo tinklaraščius apie strategiją ir turinio rinkodarą dannalbright.com.

Daugiau iš Dann Albright

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia