Как да използвам HTML шаблон

HTML табло
(Кредит за изображение: html5boilerplate.com)

Добре дошли в ръководството на Creative Bloq за това как да използвате HTML шаблон. Що се отнася до изграждането на уебсайт, основните основи винаги са много сходни. Така че, вместо да започнете всяка нова страница от нулата, има смисъл да използвате HTML шаблон, който съдържа основната HTML структура. Това е бърз и лесен начин да започнете да изграждате всеки сайт и ще спестите много време и усилия. (Ако стартирате сайт от нулата, разгледайте любимия ни строители на уебсайтове ).

Надникнете в HTML кода на сайт или страница и ние гарантираме, че ще видите много от същите HTML тагове (ако искате да научите повече, вижте нашето ръководство за HTML тагове ), които съставят основната структура на всяко уеб изживяване. Всяка създадена някога уеб страница ще започне с таг и е почти сигурно, че ще видите основните маркери като ,,

И не само HTML таговете трябва да се сетите. Уеб дизайнерите и разработчиците ще трябва да се справят със странностите на отделните браузъри. Един браузър ще визуализира определени HTML маркери по различен начин от друг, което означава, че оформлението на страницата може да изглежда различно в различните браузъри. Вижте нашите перфектно оформление на уебсайта публикувайте, за да получите някои основни съвети как да направите правилния си дизайн. И избирайте внимателно между уеб хостинг услуги, за да сте сигурни, че вашият сайт е на място.

CSS и JavaScript също са съображение. Отново не всички браузъри ги интерпретират по един и същи начин. Но почти всички тези проблеми могат да бъдат отстранени с помощта на HTML шаблон. И най-доброто е, че преди да започнете най-новия си проект, знаете, че той просто ще работи. Перфектният начин да стартирате всеки проект.



Какво е HTML шаблон?

Boilerplates са подобни на шаблоните в смисъл, че те осигуряват елементите, необходими за създаване на основата на компилация. Обикновено HTML шаблон е набор от файлове, които осигуряват основа за всеки уебсайт и ще бъдат изградени от професионалисти в бранша, които са имали същите проблеми и не искат другите да се налага да преминават през същите проблеми.

Boilerplates обикновено съдържат набор от типове файлове, свързани с уеб компилации, включително HTML документи, основни CSS таблици със стилове, основен JavaScript, изображения на резервни части и документация за това как да използвате това, което току-що сте изтеглили.

За да стигнете до пътя към HTML небето, HTML5 Boilerplate е чудесно място да започнете. Той се описва като „най-популярният шаблон за интерфейс в мрежата“ и е елегантен и прост HTML шаблон, който може да се похвали с всички основни файлове и активи, от които се нуждаете, за да започнете да изграждате веднага.

Най-новата версия на HTML5 Boilerplate (v7) е снабдена с файл index.html, който включва тагове за побиране на основни мобилни опции, Google Analytics и връзка към Normalize.css , което помага да се изгладят несъответствията в браузъра. За да получите представа за това как функционира HTML5 Boilerplate, вижте видеото, което те пуснаха в своя канал в YouTube. Той е на няколко години, но дава общата представа за това как работи бойлерната плоча.

Друг много популярен вариант за изследване е Bootstrap . Това е „библиотека на компоненти на интерфейса“ и е много по-изчерпателно предложение от рамката на HTML5 Boilerplate. Той може да се похвали с опции за оформление, съдържание, шрифтове, типография и предни компоненти като бутон, въртележка, подсказки и много други.

Но ако не искате всичко, можете да изтеглите само елементите, които искате за вашата компилация. Предупреждение, Bootstrap е много популярен избор за много уеб дизайнери и разработчици, така че се опитайте да проявите малко повече въображение, когато използвате неговите шаблони. Не искате да изглеждате като всеки друг уебсайт.

Използване на HTML5 Boilerplate

Когато бъде изтеглен, този безплатен шаблон с отворен код ви предоставя основата на html страница (index.html), няколко CSS таблици със стилове, ключови JavaScript файлове, папка img за поставяне на изображения, страница 404, конфигурационни файлове и подходящи документация.

HTML шаблон

Кодът HTML5 включва Normalize.css, за да гарантира, че сайтовете ви работят добре във всички браузъри(Кредит за изображение: necolas.github.io)

При първото изтегляне е добра идея да направите копие, така че да имате чиста нередактирана версия на файловете като справка.

За да започнете, първо заменете favicon.ico и icon.png файлове с вашето лого - те ще се появят като икона на вашия сайт и иконата, когато сайтът ви бъде запазен на началния екран на iOS на някой. Онлайн генератор може да ви помогне да създадете нови изображения.

В HTML има колекция от тагове, с които ще бъдете запознати и някои неща, с които не сте запознати. Например, Modernizr може да е нещо, с което не сте запознати. Това е „JavaScript код, който автоматично открива наличието на уеб технологии от следващо поколение“. Това помага да се гарантира, че вашият сайт остава актуален възможно най-добре. Последният скриптов елемент е за Google Analytics, той може да бъде премахнат, но ако го използвате, просто добавете свой собствен код на Google Analytics.

В идеалния случай оставете всичко, както сте го намерили, и се концентрирайте върху таг, тъй като тук отива съдържанието. Добавете съдържание след отварянето етикет и в идеалния случай преди тагове, които идват веднага след

етикети. Уверете се, че страницата има a и попълнете „съдържание“ стойност в 'описание' мета таг. Това ще даде въведение за това, за което е сайтът, добре за SEO.

Имайте предвид също, че всички връзки са относителни в този документ и затова може да се наложи да ги промените на коренални или абсолютни връзки, ако започнете да влагате уеб страници в папки. Например, може да се наложи да стане . Освен това е добра практика да добавете коментари, ако направите някакви големи промени в HTML. Така че, когато се върнете, можете да си припомните какви промени са направени.

CSS редакции

HTML5 Boilerplate

HTML5 Boilerplate е чудесен начин да спестите време при създаване на нови уебсайтове

От двата CSS документа, включени в HTML5 Boilerplate, няма нужда да пипате нормализиране.css . Това е документът за нулиране, който гарантира, че всички браузъри стартират на равни условия, когато става въпрос за вашия уебсайт. За разлика от това, main.css включва това, което в документа се обозначава с „мнение по подразбиране“, включително някои основни стилове за селекции, хоризонтални правила, изображения и формуляри, помощници за видимост на елемента и @half правила за отзивчив уеб дизайн и отпечатайте.

Всичко тук е честна игра за актуализиране, въпреки че внимателно преценете дали трябва да го направите. Има зона, отделена за персонализираните стилове на автора (т.е. вашият), или можете да създадете изцяло отделен CSS документ и да го прикачите и към вашия HTML.

Какъвто и да е вашият избор, имайте предвид как ще се справите с последващите актуализации на самия HTML5 Boilerplate. Ако редактирате някой от стандартните стилове main.css, промените, направени в бъдещите версии на HTML5 Boilerplate (които или ще бъдат добавени чрез заместване на файлове, или заместващи части от файлове), няма непременно да попаднат на вашия сайт или ще отменят вашите собствени редакции. Затова отново използвайте коментари за всякакви промени, като по този начин правите по-лесни сравнения по-късно.

Алтернативни варианти на бойлер

HTML шаблон: Initializr

Въз основа на HTLM5 Boilerplate, Initializr генерира чист персонализируем шаблон за вас

След като натрупате опит, струва си да помислите за персонализирана компилация с използване Initializr , задържане на необходимите компоненти и изхвърляне на тези, които не са. Също така, ако създавате WordPress сайт, проучете специфична за WordPress празна тема, като например HTML5 празен . Всички тези изтегляния и услуги са безплатни, така че можете да ги разгледате и експериментирате в свободното си време.

И все пак, каквото и да правите, малко работа и разследване сега трябва да ви спестят много време по-късно, когато просто извадите бойлера (безопасно скрито в съхранение в облака ), за да получите крекинг на нов уебсайт.

Това съдържание първоначално се появи в списанието net.

Свързани статии: