Home-theater-designers
Kapag nagtatayo ka ng isang bagong website, sa mga panahong ito gugustuhin mong maging tugma sa HTML5. Ngunit hindi mo rin nais na gugulin ang hindi kinakailangang oras sa pag-aaral ng mga intricacies ng HTML5 mula sa simula, hindi ba?
Sa kabutihang palad, ang Template ng Boilerplate ng HTML5 makakatulong. Ito ay isang simpleng template ng front-end na maaari mong gamitin upang lumikha ng isang website ng HTML5 sa loob lamang ng ilang minuto. Ngunit sapat din itong malakas na magagamit mo ito bilang pundasyon ng isang kumplikadong, kumpletong tampok na site.
kung paano gumawa ng bootable usb windows 7
Ang tutorial sa HTML5 Boilerplate na ito ay tatalakayin kung ano ang dumating sa template, ang mga pangunahing kaalaman na kailangan mong malaman tungkol sa kung paano ito gamitin, at ilang mga mapagkukunan para sa karagdagang kaalaman. Ipapakita ko rin sa iyo kung paano ko ginamit ang template upang lumikha ng isang napaka-pangunahing site na may ilang mga linya lamang ng HTML.
Ang Template ng Boilerplate ng HTML5
Kapag na-download mo ang template mula sa HTML5 Boilerplate, nakakakuha ka ng isang bilang ng mga folder at file. Narito ang mga nilalaman ng ZIP file:
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.pngHindi namin lalampasan ang bawat elemento sa template dito, ang mga pangunahing kaalaman lamang. Upang matiyak na mayroon kang mga mapagkukunan upang magamit ang lahat ng mga file, bagaman, magsisimula kami sa mga dokumento ng tulong.
Dokumentasyon ng Tulong sa Boilerplate ng HTML5
Ang Boilerplate ay mayroong isang koleksyon ng mga dokumento ng tulong na naka-host sa GitHub . Malaking tulong ito kapag mayroon kang mga teknikal na katanungan o nagtataka kung bakit may isang bagay na dinisenyo tulad nito.
Halos lahat sa dokumentasyon ay kasama rin sa folder ng doc ng template. Makakakita ka ng isang bilang ng mga file ng Markdown (.md) na malaking tulong sa pag-alam kung paano bubuo ng iyong Boilerplate site.
Kung nais mong basahin ang lahat, magsimula sa TOC.md at sundin ang mga link mula doon patungo sa iba pang mga file ng Markdown. Kung naghahanap ka ng tulong sa isang tukoy na isyu, hanapin ang file na katulad nito na maaaring nauugnay; ang paggamit.md ay isang magandang lugar upang magsimula.
Nagsisimula Sa CSS ng HTML5 Boilerplate
Ang template ng HTML5 Boilerplate ay mayroong dalawang mga CSS file: main.css at normalize.css.
Ang pangalawang file, normalize.css, ay tumutulong sa iba't ibang mga browser na mag-render ng mga elemento sa pare-pareho na paraan. Upang matuto nang higit pa tungkol sa kung paano ito gumagana, tingnan ang gawing normalize.css ang proyekto sa GitHub .
Samantala, ang main.css ay kung saan mo ilalagay ang anumang code na kailangan mo i-format ang iyong site sa CSS . Ang karaniwang CSS na kasama sa template ay ang resulta ng pagsasaliksik na isinagawa ng mga developer at ng pamayanan ng HTML5 Boilerplate. Nababasa ito at ipinapakita nang maayos sa iba't ibang mga browser.
Kung nais mong magdagdag ng iyong sariling CSS, maaari mo itong idagdag sa seksyong Mga Pasadyang Estilo ng May-akda. Magdaragdag ako ng kaunting istilo ng pag-link para sa aming halimbawang pahina:
Mayroon ding isang bilang ng mga kapaki-pakinabang na klase ng helper na kasama sa batayang CSS. Ang ilan sa kanila ay nagtatago ng mga item mula sa mga karaniwang browser at screen reader (o ilang kombinasyon).
Gayundin sa main.css makakahanap ka ng suporta para sa tumutugong disenyo at kapaki-pakinabang na mga setting ng pag-print.
Ang lahat ng mga item na ito ay malinaw na ipinaliwanag ng mga komento sa CSS:
Sa pangkalahatan, maaari kang makapagsimula sa pangunahing CSS.
Pagdaragdag ng Iyong Sariling HTML sa Template
Kasama sa Boilerplate ang dalawang mga HTML file: 404.html at index.html.
Ang pahina ng index ay kung saan malilikha mo ang iyong homepage (o ang iyong tanging pahina, kung pupunta ka para sa isang simpleng isang-pager).
Kung bubuksan mo ang pahina ng index sa isang browser, makakakita ka ng isang solong linya ng teksto. Ngunit ang pagtingin sa HTML ay nagpapakita ng higit pang pagtatago sa code. Ang tanging bagay na talagang kailangan mong magalala tungkol sa pagbabago ay ang Google Analytics code (hanapin ang teksto na 'UA-XXXXX-Y' at palitan ito ng iyong sariling tracking code).
Ang natitirang HTML sa pahina ng index ay may kasamang impormasyon para sa mga web app, notification para sa mga lumang browser, at kapaki-pakinabang na JavaScripts. Kapag nagsisimula ka na, hindi mo dapat kailangang makialam sa anuman sa mga ito.
Ang pagkakaroon sa kanila ng paunang populasyon, gayunpaman, ay isang mabuting paraan upang matiyak na handa ang iyong site upang masulit ang HTML5.
Upang likhain ang iyong pahina, ipasok ang iyong HTML sa pagitan ng mga tag sa file. Narito ang ilang pangunahing impormasyon na idaragdag ko tungkol sa aking sarili:
Nais bang lumikha ng higit pang mga pahina? Lumikha ng mga kopya ng file na ito at palitan ang pangalan ng mga ito upang hindi mo na kopyahin at i-paste ang lahat ng HTML. Pagkatapos idagdag ang iyong nilalaman.
Kung nais mong ipasadya ang iyong 404 na pahina, baguhin lamang ang HTML file. Hindi sigurado kung ano ang ilalagay sa iyong 404 na pahina? Suriin ang mahusay na mga halimbawa ng disenyo ng pahina ng 404 na ito.
Pagdaragdag ng isang Favicon (at Ibang Icon)
Nais mong palitan ang iyong favicon? Pagkatapos ang favicon.ico ay ang file na kakailanganin mong palitan.
Kung wala ka pa, kakailanganin mong lumikha ng isa. Maaari kang gumamit ng online favicon generator o magdisenyo ng iyong sarili. Siguraduhin lamang na ito ay 16 x 16 pixel at mayroong .ico file type.
kung paano madagdagan ang nakatuon na memorya ng video
Magandang ideya na maglagay ng ilang pag-iisip sa iyong favicon. Gamitin ang mga tanyag na favicon na ito upang gabayan ang iyong brainstorming. Tiyaking kapag nagdagdag ka ng bagong favicon tinatawag itong favicon.ico.
Maaari mong mapansin na mayroong tatlong iba pang mga imahe sa root direktoryo ng iyong site: icon.png, tile.png, at tile-wide.png. Para saan ang mga ito
- Ang icon.png ay ginagamit para sa mga icon ng touch ng Apple. Kung bumuo ka ng isang web app, gagamitin ang icon na ito kapag idinagdag ng isang gumagamit ng iPhone o iPad ang app sa kanilang homescreen.
- tile.png at tile-wide.png ay para sa pagpapaandar ng 'pin' ng Windows, at lalabas sa Windows 10.
Magandang ideya na magbigay ng mga icon para sa lahat ng mga kasong ito --- ngunit kung hindi ka nagtatayo ng isang web app, maaari itong maging isang mas mababang priyoridad.
Pagdaragdag ng Higit na Pag-andar
Kapag naidagdag mo na ang iyong HTML at isang favicon (pati na rin ang anumang CSS na maaaring nais mong isama), handa nang mai-publish ang iyong site. Ganun kadali gamitin ang HTML5 Boilerplate. I-upload ito sa iyong server, at tapos ka na!
Narito kung ano ang hitsura ng aming pahina:
Tulad ng nakikita mo, ilang linya lamang ng teksto ang lumikha ng isang ganap na gumaganang (kung medyo malabo) na website. Hindi ito gaanong marami, ngunit tumagal lamang ng ilang minuto. At ito ay lubos na napapalawak sa HTML5. Iyon ang lakas ng template ng Boilerplate.
Ngunit maraming mas magagawa mo sa template ng Boilerplate kung nais mo. Kung mayroong isang partikular na bagay na hinahanap mo, may posibilidad na makita mo ito sa dokumentasyon ng tulong.
Kung hindi ka sigurado kung ano ang maaari mong gawin sa HTML5, ngunit nais mong malaman, maraming mga tutorial sa disenyo ng web doon upang matulungan ka.
Magbahagi Magbahagi Mag-tweet Email Mas okay bang Mag-install ng Windows 11 sa isang Hindi Tugma na PC?Maaari mo na ngayong mai-install ang Windows 11 sa mga mas matandang PC gamit ang opisyal na ISO file ... ngunit magandang ideya ba na gawin ito?
Basahin Susunod Mga Kaugnay na Paksa- Programming
- HTML5
- Mga Tutorial sa Coding
Ang Dann ay isang diskarte sa nilalaman at consultant sa marketing na tumutulong sa mga kumpanya na makabuo ng demand at lead. Nagba-blog din siya tungkol sa diskarte at marketing ng nilalaman sa dannalbright.com.
Higit pa Mula kay Dann AlbrightMag-subscribe sa aming newsletter
Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!
Mag-click dito upang mag-subscribe