Содержание
Добро пожаловать в руководство Creative Bloq по использованию шаблона HTML. Когда дело доходит до создания веб-сайта, основные принципы всегда очень похожи. Таким образом, вместо того, чтобы начинать каждую новую страницу с нуля, имеет смысл использовать шаблон HTML, который содержит основную структуру HTML. Это быстрый и простой способ начать создание любого сайта, который сэкономит много времени и усилий. (Если вы создаете сайт с нуля, ознакомьтесь с нашими любимыми конструкторами сайтов).
Взгляните на HTML-код сайта или страницы, и мы гарантируем, что вы увидите многие из тех же HTML-тегов (если вы хотите узнать больше, см. Наше руководство по HTML-тегам), которые составляют базовую структуру любого веб-интерфейса. Каждая когда-либо созданная веб-страница будет начинаться с html> тег, и вы почти наверняка увидите основные теги, такие как голова>, заголовок>, тело>, p> плюс многое другое.
И вам нужно думать не только о HTML-тегах. Веб-дизайнерам и разработчикам придется иметь дело с причудами отдельных браузеров. Один браузер будет отображать определенные HTML-теги по-разному, чем другой, что означает, что макет страницы может выглядеть по-разному в разных браузерах. Ознакомьтесь с нашей публикацией об идеальном макете веб-сайта, чтобы получить несколько важных советов о том, как сделать свой дизайн правильным. И внимательно выбирайте между услугами веб-хостинга, чтобы убедиться, что ваш сайт на высоте.
Также следует учитывать CSS и JavaScript. Опять же, не все браузеры интерпретируют их одинаково. Но почти все эти проблемы можно устранить с помощью шаблона HTML. И самое лучшее, что до того, как вы начнете свой последний проект, вы знаете, что он просто сработает. Идеальный способ дать толчок любому проекту.
Что такое шаблон HTML?
Шаблонные панели похожи на шаблоны в том смысле, что они предоставляют элементы, необходимые для создания основы сборки. Как правило, шаблон HTML - это набор файлов, которые составляют основу любого веб-сайта и создаются профессионалами отрасли, которые столкнулись с теми же проблемами и не хотят, чтобы другие сталкивались с такими же проблемами.
Шаблонные шаблоны обычно содержат ряд типов файлов, связанных с веб-сборками, включая документы HTML, базовые таблицы стилей CSS, основной код JavaScript, изображения-заполнители и документацию о том, как использовать то, что вы только что скачали.
Популярные шаблоны HTML
HTML5 Boilerplate - отличное место для начала, чтобы встать на путь к раю HTML. Он описывает себя как «самый популярный шаблон веб-интерфейса» и представляет собой изящный и простой 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, файлов конфигурации и соответствующих документация.
При первой загрузке рекомендуется сделать копию, чтобы у вас была чистая неотредактированная версия файлов для справки.
Для начала замените favicon.ico а также icon.png файлы с вашим логотипом - они будут отображаться в виде значка вашего сайта и значка, когда ваш сайт будет сохранен на чьем-то домашнем экране iOS. Онлайн-генератор может помочь вам создать новые изображения.
В HTML есть набор тегов, с которыми вы будете знакомы, а также некоторые вещи, с которыми вы не знакомы. Например, Modernizr может быть чем-то, с чем вы не знакомы. Это «код JavaScript, который автоматически определяет доступность веб-технологий нового поколения». Это помогает обеспечить максимальную актуальность вашего сайта. Последний элемент скрипта предназначен для Google Analytics, его можно удалить, но если вы его используете, просто добавьте свой собственный код Google Analytics.
В идеале оставьте все как было и сконцентрируйтесь на тело> тег, так как это то место, куда идет контент. Добавить контент после открытия тело> тег и в идеале перед сценарий> теги, которые идут сразу после p> теги. Убедитесь, что на странице есть название> и заполните 'содержание' ценность в 'описание' метатег. Это даст представление о сайте, что будет полезно для SEO.
Также обратите внимание, что все ссылки в этом документе относительны, поэтому вам может потребоваться изменить их на относительные к корню или абсолютные ссылки, если вы начнете вкладывать веб-страницы в папки. Например, скрипт src = "js / plugins.js"> может потребоваться стать скрипт src = "http://www.mysitename.com/js/plugins.js">. Кроме того, рекомендуется добавлять комментарии, если вы вносите какие-либо серьезные изменения в HTML. Поэтому, когда вы вернетесь, вы можете напомнить себе, какие изменения были внесены.
CSS правки
Как только вы наберетесь опыта, стоит подумать о пользовательской сборке с использованием Initializr, сохранив необходимые компоненты и отказавшись от тех, которые у вас нет. Кроме того, если вы создаете сайт WordPress, изучите специальную для WordPress пустую тему, например HTML5 Blank. Эти загрузки и услуги бесплатны, поэтому вы можете проверить их и поэкспериментировать на досуге.
Тем не менее, что бы вы ни делали, небольшая работа и расследование сейчас должны сэкономить вам много времени позже, когда вы просто вытащите свой шаблон (надежно спрятанный в облачном хранилище), чтобы взломать новый веб-сайт.
Этот контент изначально появился в сетевом журнале.
