Как создать сайт за несколько минут, используя HTML5 Boilerplate

Когда вы создаете новый веб-сайт, вы хотите, чтобы он был HTML5-совместимым. Но вы также не хотите тратить лишнее время на изучение тонкостей HTML5 с нуля, не так ли?

К счастью, шаблон HTML5 Boilerplate может помочь. Это простой интерфейсный шаблон, который можно использовать для создания веб-сайта HTML5 всего за несколько минут. Но он также достаточно мощный, чтобы вы могли использовать его в качестве основы для сложного, полнофункционального сайта.

Этот учебник HTML5 Boilerplate расскажет о том, что входит в шаблон, об основах, которые вам необходимо знать о том, как его использовать, и о некоторых ресурсах для дальнейшего изучения. Я также покажу вам, как я использовал шаблон для создания очень простого сайта с несколькими строками HTML.

Шаблон HTML5 Boilerplate

Когда вы загружаете шаблон из HTML5 Boilerplate, вы получаете несколько папок и файлов. Вот содержимое файла ZIP:

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

Мы не будем разбираться здесь с каждым элементом шаблона, только с основами. Чтобы убедиться, что у вас есть ресурсы для использования всех файлов, мы начнем с справочных документов.

Справочная документация по HTML5 Boilerplate

На Boilerplate есть коллекция справочных документов, размещенных на GitHub. Это очень помогает, если у вас есть технические вопросы или вам интересно, почему что-то спроектировано так, как было.

Почти все в документации также включено в папку doc шаблона. Вы увидите несколько файлов Markdown (.md), которые помогут понять, как создать свой сайт Boilerplate.

Если вы хотите прочитать все, начните с TOC.md и перейдите по ссылкам оттуда к другим файлам Markdown. Если вам нужна помощь по конкретной проблеме, найдите файл, который звучит так, как будто он связан; Использование. Хорошее место для начала.

Начиная с HTML5 Boilerplate CSS

Шаблон HTML5 Boilerplate поставляется с двумя файлами CSS: main.css и normalize.css.

Второй файл, normalize.css, помогает различным браузерам отображать элементы единообразным образом. Чтобы узнать больше о том, как это работает, ознакомьтесь с проектом normalize.css на GitHub.

Между тем, main.css — это то место, куда вы помещаете любой код, необходимый для форматирования вашего сайта с помощью CSS.

, Стандартный CSS, включенный в шаблон, является результатом исследований, проведенных разработчиками и сообществом HTML5 Boilerplate. Он читается и хорошо отображается в разных браузерах.

Если вы хотите добавить свой собственный CSS, вы можете добавить его в раздел «Пользовательские стили автора». Я добавлю немного стиля ссылок для нашей страницы примера:

Есть также ряд полезных вспомогательных классов, включенных в базовый CSS. Некоторые из них скрывают элементы от стандартных браузеров и программ чтения с экрана (или некоторых комбинаций).

Также в main.css вы найдете поддержку адаптивного дизайна и полезные настройки печати.

Все эти пункты четко объясняются комментариями в CSS:

В общем, вы можете начать с базового CSS.

Добавление собственного HTML-кода в шаблон

Boilerplate включает в себя два файла HTML: 404.html и index.html.

На индексной странице вы создадите свою домашнюю страницу (или единственную страницу, если вы собираетесь использовать простой пейджер).

).

Если вы откроете страницу указателя в браузере, вы увидите одну строку текста. Но, глядя в HTML, вы обнаружите гораздо больше сокрытия в коде. Единственное, что вам действительно нужно беспокоиться об изменении, это код Google Analytics

(найдите текст «UA-XXXXX-Y» и замените его собственным кодом отслеживания).

Остальная часть HTML на странице указателя содержит информацию для веб-приложений, уведомления для старых браузеров и полезные скрипты JavaScripts. Когда вы начинаете, вам не нужно возиться с этим.

Однако их предварительное заполнение — это хороший способ убедиться, что ваш сайт готов максимально использовать возможности HTML5.

Чтобы создать свою страницу, вставьте HTML-код между тегами в файле. Вот некоторая базовая информация, которую я добавлю о себе:

Хотите создать больше страниц? Создайте копии этого файла и переименуйте их, чтобы вам не пришлось копировать и вставлять весь HTML-код поверх. Затем добавьте свой контент.

Если вы хотите настроить страницу 404, просто измените файл HTML. Не уверены, что поставить на свою страницу 404? Посмотрите на эти замечательные 404 страницы дизайна.

,

Добавление Favicon (и других значков)

Хотите заменить свой фавикон? Тогда favicon.ico — это файл, который вам нужно заменить.

Если у вас его еще нет, вам нужно его создать. Вы можете использовать онлайн-генератор избранного или создать свой собственный. Просто убедитесь, что он имеет размер 16 x 16 пикселей и имеет тип файла .ico.

Это хорошая идея, чтобы подумать о вашем фавиконе. Используйте эти знаменитые значки

направлять ваш мозговой штурм. Убедитесь, что при добавлении нового favicon он называется favicon.ico.

Вы можете заметить, что в корневом каталоге вашего сайта есть еще три изображения: icon.png, tile.png и tile-wide.png. Для чего они?

• icon.png используется для иконок Apple Touch. Если вы создаете веб-приложение, этот значок будет использоваться, когда пользователь iPhone или iPad добавляет приложение на свой домашний экран.
• tile.png и tile-wide.png предназначены для «закрепленных» функций Windows и будут отображаться в Windows 10.

Рекомендуется предоставлять значки для всех этих случаев, но если вы не создаете веб-приложение, оно может иметь более низкий приоритет.

Добавление большей функциональности

После того, как вы добавили свой HTML и значок избранного (а также любой CSS, который хотите включить), ваш сайт готов к публикации. Вот как просто использовать HTML5 Boilerplate. Загрузите его на свой сервер, и все готово!

Вот как выглядит наша страница:

Как вы можете видеть, всего несколько строк текста создали полнофункциональный (хотя и немного мягкий) сайт. Это немного, но это заняло всего несколько минут. И это очень расширяемый с HTML5. Это сила шаблона Boilerplate.

Но есть еще многое, что вы можете сделать с шаблоном Boilerplate, если хотите. Если вы ищете что-то конкретное, есть большая вероятность, что вы найдете это в справочной документации.

Если вы не уверены, что можете делать с HTML5, но хотите узнать, есть множество учебных пособий по веб-дизайну.

чтобы помочь вам.