Когда вы создаете новый веб-сайт, в наши дни вы хотите, чтобы он был 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-код между тегами <body> в файле. Вот некоторая основная информация, которую я добавлю о себе:
Хотите создать больше страниц? Создайте копии этого файла и переименуйте их, чтобы вам не приходилось копировать и вставлять весь HTML-код. Затем добавьте свой контент.
Если вы хотите настроить свою страницу 404, просто измените файл HTML. Не уверены, что поставить на свою страницу 404? Посмотрите на эти замечательные примеры оформления 404-страничной страницы. создать отличную страницу
Добавление Favicon (и других значков)
Хотите заменить свой фавикон? Тогда favicon.ico — это файл, который вам нужно заменить.
Если у вас его еще нет, вам нужно его создать. Вы можете использовать онлайн генератор favicon или создать свой собственный. Просто убедитесь, что это 16 х 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, но хотите узнать, существует ли множество учебных пособий по веб-дизайну. руководство чтобы помочь вам.