Программирование

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

Как создать сайт за считанные минуты, используя 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.

создать сайт с нуля с помощью шаблонного шаблона HTML5

Если вы хотите прочитать все, начните с 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, вы можете добавить его в раздел «Пользовательские стили автора». Я добавлю немного стиля ссылок для нашей страницы примера:

создать сайт с нуля с помощью шаблонного шаблона HTML5

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

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

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

создать сайт с нуля с помощью шаблонного шаблона HTML5

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

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

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

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

Если вы откроете страницу указателя в браузере, вы увидите одну строку текста. Но, глядя в HTML, вы обнаружите гораздо больше сокрытия в коде. Единственное, что вам действительно нужно беспокоиться об изменениях, это код Google Analytics. (найдите текст «UA-XXXXX-Y» и замените его собственным кодом отслеживания).

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

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

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

создать сайт с нуля с помощью шаблонного шаблона HTML5

Хотите создать больше страниц? Создайте копии этого файла и переименуйте их, чтобы вам не приходилось копировать и вставлять весь 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

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

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

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

Похожие посты
Программирование

Что такое канал RSS? (И где его взять)

Программирование

7 причин, почему изображения не загружаются на ваш сайт

Программирование

Запустите агент SQL Server: настройте SQL Server 2012

Программирование

15 лучших бесплатных обоев дня Святого Патрика