Како направити веб страницу у неколико минута помоћу ХТМЛ5 котловнице

Како направити веб страницу у неколико минута помоћу ХТМЛ5 котловнице

Када правите нову веб локацију, ових дана ћете желети да буде компатибилна са ХТМЛ5. Али такође не желите да трошите непотребно време учећи замршености ХТМЛ5 од нуле, зар не?





На срећу, ХТМЛ5 предложак котловске плоче може да помогне. То је једноставан предњи предложак који можете користити за креирање ХТМЛ5 веб локације за само неколико минута. Али такође је довољно моћан да га можете користити као темељ сложене, потпуно опремљене локације.





бесплатне музичке апликације ван мреже за андроид

Овај водич за ХТМЛ5 бојлер плочу ће проћи кроз оно што долази у предлошку, основе које морате знати о томе како га користити и неке ресурсе за даље учење. Такође ћу вам показати како сам користио шаблон за креирање врло основне веб локације са само неколико редова ХТМЛ -а.





ХТМЛ5 предложак котловске плоче

Када преузмете предложак са ХТМЛ5 Боилерплате -а, добијате бројне фасцикле и датотеке. Ево садржаја ЗИП датотеке:

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

Овде нећемо прелазити на сваки елемент шаблона, већ само на основе. Како бисмо били сигурни да имате ресурсе за коришћење свих датотека, почећемо са документима помоћи.



Документација за помоћ ХТМЛ5 бојлера

Боилерплате има колекцију документи помоћи смештени на ГитХуб -у . Ово је од велике помоћи ако имате техничка питања или се питате зашто је нешто осмишљено онако како је било.

Готово све у документацији је такође укључено у доц фасциклу шаблона. Видећете бројне Маркдовн (.мд) датотеке које су вам од велике помоћи у проналажењу начина изградње ваше странице Боилерплате.





Ако желите све да прочитате, почните са ТОЦ.мд и следите везе до других Маркдовн датотека. Ако тражите помоћ по одређеном питању, пронађите датотеку која звучи као да је повезана; усе.мд је добро место за почетак.

Почевши од ХТМЛ5 Боилерплате -овог ЦСС -а

Шаблон ХТМЛ5 Боилерплате долази са две ЦСС датотеке: маин.цсс и нормализе.цсс.





Друга датотека, нормализе.цсс, помаже различитим прегледачима да исцртавају елементе на доследне начине. Да бисте сазнали више о томе како то функционише, погледајте нормализе.цсс пројекат на ГитХуб -у .

У међувремену, маин.цсс је место где ћете ставити било који код који вам је потребан форматирајте своју веб локацију помоћу ЦСС -а . Стандардни ЦСС који је укључен у предложак резултат је истраживања које су спровели програмери и заједница ХТМЛ5 Боилерплате. Чита се и лепо се приказује у различитим прегледачима.

Ако желите да додате свој ЦСС, можете га додати у одељак Прилагођени стилови аутора. Додаћу мало стила линкова за нашу страницу са примером:

Такође постоји низ корисних помоћних класа укључених у основни ЦСС. Неки од њих скривају ставке из стандардних прегледача и читача екрана (или неке комбинације).

Такође у маин.цсс ћете пронаћи подршку за респонзиван дизајн и корисне поставке штампања.

Све ове ставке јасно су објашњене коментарима у ЦСС -у:

Генерално, можете почети са основним ЦСС -ом.

Додавање сопственог ХТМЛ -а у предложак

Плоча котла садржи две ХТМЛ датотеке: 404.хтмл и индек.хтмл.

Индексна страница је место где ћете креирати своју почетну страницу (или своју једину страницу, ако идете на једноставан пејџер).

Ако отворите индексну страницу у прегледачу, видећете један ред текста. Али гледање у ХТМЛ открива много више скривања у коду. Једино о чему заиста морате бринути око промене је код Гоогле аналитике (пронађите текст 'УА-КСКСКСКСКС-И' и замените га својим кодом за праћење).

Остатак ХТМЛ -а на индексној страници укључује информације за веб апликације, обавештења за старе прегледаче и корисне ЈаваСцрипте. Када почињете, не би требало да се петљате у било шта од овога.

Међутим, ако су већ унапред попуњени, то је добар начин да се уверите да је ваша веб локација спремна да извуче максимум из ХТМЛ5.

Да бисте креирали своју страницу, уметните ХТМЛ између ознака у датотеци. Ево неких основних података које ћу додати о себи:

Желите да креирате више страница? Направите копије ове датотеке и преименујте их тако да не морате да копирате и залепите сав ХТМЛ. Затим додајте свој садржај.

Ако желите да прилагодите страницу 404, само измените ХТМЛ датотеку. Нисте сигурни шта да ставите на своју 404 страницу? Погледајте ове сјајне примере дизајна 404 странице.

Додавање Фавицон -а (и других икона)

Желите да замените свој фавицон? Тада је фавицон.ицо датотека коју морате заменити.

Ако га још увек немате, мораћете да га направите. Можете користити мрежни генератор фавикона или сами дизајнирати. Само се уверите да има димензије 16 к 16 пиксела и да има тип датотеке .ицо.

кул ствари које можете радити са ложењем ватре

Добра је идеја да размислите о свом фавикону. Користите ове познате иконе за вођење свог браинсторминга. Уверите се да се приликом додавања новог фавикона зове фавицон.ицо.

Можда ћете приметити да у основном директоријуму ваше веб локације постоје још три слике: ицон.пнг, тиле.пнг и тиле-виде.пнг. Чему ово служи?

  • ицон.пнг се користи за Аппле тоуцх иконе. Ако направите веб апликацију, ова икона ће се користити када корисник иПхоне -а или иПад -а дода апликацију на почетни екран.
  • тиле.пнг и тиле-виде.пнг су за Виндовс 'пин' функционалност, и појавит ће се у Виндовс 10.

Било би добро да дате иконе за све ове случајеве --- али ако не правите веб апликацију, то може бити нижи приоритет.

Додавање више функционалности

Након што додате ХТМЛ и фавицон (као и било који ЦСС који желите да укључите), ваша веб локација је спремна за објављивање. Тако је лако користити ХТМЛ5 бојлер плочу. Отпремите га на сервер и готови сте!

Ево како наша страница изгледа:

Као што видите, само неколико редова текста је створило потпуно функционалну (иако помало бљутаву) веб страницу. Није много, али је трајало само неколико минута. И веома је проширив са ХТМЛ5. То је снага шаблона Боилерплате.

Али можете учинити још много тога са шаблоном Боилерплате ако желите. Ако тражите нешто специфично, велика је шанса да ћете то пронаћи у документацији за помоћ.

Ако нисте сигурни шта можете да урадите са ХТМЛ5, али желите да сазнате, постоји много туторијала за веб дизајн који вам могу помоћи.

Објави Објави Твеет Емаил Да ли је у реду инсталирати Виндовс 11 на некомпатибилни рачунар?

Сада можете инсталирати Виндовс 11 на старије рачунаре са званичном ИСО датотеком ... али да ли је то добро урадити?

Прочитајте следеће
Повезане теме
  • Програмирање
  • ХТМЛ5
  • Кодирање Туториали
О аутору Затим Олбрајтова(Објављено 506 чланака)

Данн је консултант за стратегију садржаја и маркетинг који помаже компанијама у стварању потражње и потенцијалних клијената. Он такође пише о стратегији и маркетингу садржаја на данналбригхт.цом.

Више од Данна Олбрајта

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили