Базовый сайт с bootstrap.

11 апреля 202311 апр 2023

16 мин

Оглавление

Bootstrap
Плюсы Bootstrap

Введение

Интернет — это миллионы подключенных между собой устройств и других сетей. Все они объединены в одну большую — глобальную сеть и могут общаться между собой в ней. И в наше время интернет стал неотъемлемой частью жизни множества людей по всей земле. С помощью него многие задачи стало легче выполнять, например: заказать что-то на дом, обучаться удалённо либо общаться с людьми с разныхн точек Земли. Одной из основных частей интернета являются веб сайты, большие массивы связанных данных, упрощающие взаимодействие пользователя с сетью. Собственно, из-за их удобства веб сайты и стали очень популярными в наше время. Многие компании частично работают в интернете, а некоторые полностью перешли на онлайн взаимодействия с клиентами. Конечно же веб сайты не могли быть использованы только для работы, поэтому их пишут и с другими целями. А вот как создать свой сайт знает далеко не каждый человек, нуждающийся в нём. И моё руководство направлено на то, чтобы каждый, кто его изучит, смог написать свой веб сайт, используя HTML фреймворк.

Цель данного проекта создать руководство, с помощью которого человек не знающий как создавать сайты, смог научиться это делать с помощью HTML фреймворков.

Задачи:

· Найти базовую информацию.

· Изучить технологию создания сайтов.

· Создать руководство по написанию веб сайта с использованием HTML фреймворков.

· Разместить продукт в открытом доступе.

Предмет проекта: создание сайта с использованием HTML фреймворков. В качестве объекта выступит, веб сайт, написанный с помощью HTML фреймворков, создание которого будет описано в этом проекте. Методы работы, использованные в моей работе: анализ - разделить сайт на основные части и подробно изучить процесс создания каждой; синтез - объединить изученные части в полноценный сайт.

В результате должно получиться подробное руководство, которое поможет человеку самому написать нужный себе веб сайт используя HTML фреймворки.

Глава 1

Изучая другие проекты и руководства на тему создания сайта используя HTML фреймворки я отметил некоторые минусы этих работ. Основной ошибкой, которую я заметил является отсутствие как такового объяснения процесса написания сайта. Например, на сайте “Хабр” есть статья “О фреймворках”, в ней описываются различные виды фреймворков, их минусы и плюсы, их предназначение, но, нет никакой информации как с ними работать, как их использовать в написании сайтов. Другой пример – это видео гайд на сайте YouTube.com “Bootstrap верстка современного сайта за 45 минут!”, в этом гайде находится устаревшая информация. В своём гайде я постараюсь не допустить таких ошибок, и всё подробно рассказать.

Интернет - раньше упоминался как Всемирная сеть и Глобальная сеть, а также просто Сеть. Построена на базе стека протоколов TCP и IP. На основе Интернета работает Всемирная паутина (World Wide Web, WWW) и множество других систем передачи данных.

Суперуспешное развитие Интернета во многом объясняется тем, что во второй половине 2010-х годов мировая Сеть фактически стала полномасштабной заменой всем классическим инструментам получения информации, связи и коммуникации. Все «классические» CМИ — телевидение, радио и печатные издания — имеют полноценные онлайн-версии, кроме того, существует безграничное множество интернет-СМИ и блог-платформ, соединяющих все признаки различных форм коммуникации, делая контент более «живым» и менее зависимым от штампов. На сегодняшний день самыми популярными интернет-ресурсами являются социальные сети (Facebook, Instagram Twitter), мессенджеры (WhatsApp, Viber, Telegram, Discord), а также энциклопедия Википедия и видеохостинг YouTube, который часто называют «новым телевидением», «заменой телевидению» и т. д.

Все приведённые мною выше примеры популярных ресурсов находятся на веб-сайтах. Это одна или несколько логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт представляет собой массив связанных данных, имеющий адрес и воспринимаемый пользователями как единое целое. Веб-сайтами они называются, потому что доступ к ним происходит по протоколу HTTP.

Веб-сайт как система электронных документов может принадлежать частному лицу или организации и быть доступным в компьютерной сети под общим доменным именем и IP-адресом или локально на одном компьютере.

Все сайты в совокупности составляют Всемирную паутину, где коммуникация объединяет сегменты информации мирового сообщества в единое целое – базу данных и коммуникацию планетарного масштаба.

Первый в мире сайт появился 6 августа 1991 года. Его создатель, Тим Бернерс-Ли, опубликовал на нём описание новой технологии World Wide Web, основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML. Также на сайте были описаны принципы установки и работы серверов и браузеров. Сайт стал и первым в мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём список ссылок на другие сайты.

Страницы сайтов — это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователем(монитор, экран КПК, принтер или синтезатор речи). Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображение страницы можно изменить добавлением стилей на языке CSS, что позволяет централизовать в определённом файле все элементы форматирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.

Страницы сайтов могут быть простым статичным набором файлов или создаваться специальной компьютерой программой на сервере. Они могут быть либо сделаны на заказ для отдельного сайта, либо быть готовым продуктом, рассчитанным на некоторый класс сайтов. Некоторые из них могут обеспечить владельцу сайта возможность гибкой настройки структурирования и вывода информации на веб-сайте. Такие управляющие программы называются системами управления содержимым (CMS).

Сайты могут содержать подразделы, ориентированные целиком на ту или иную аудиторию. В этом случае такие разделы называют версиями сайта. Аудитория может различаться по виду используемого оборудования, по используемому языку аудитории. К примеру, известны так называемые мобильные версии сайта, предназначенные для работы с ними с использованием смартфона.

Веб — дизайнеры разрабатывают макеты веб — шаблонов страниц. Дизайнер определяет, каким образом конечный потребитель будет получать доступ к информации и услугам сайта — то есть, занимается непосредственно разработкой пользовательского интерфейса. В большинстве случаев страницы включают в себя графические элементы. Их подготовкой занимаются художники, иллюстраторы, фотографы, технические дизайнеры, шрифтовики, и т. д. Готовые шаблоны показываются заказчику. В этот момент страницы ещё не могут содержать конечного наполнения (это в обязанности дизайнера не входит). Чтобы макеты выглядели более наглядно, в них помещается произвольное содержимое. Если заказчик удовлетворён внешним видом шаблонов, то наступает следующая фаза разработки — вёрстка страниц сайта.

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

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

К программистам поступают готовые шаблоны страниц и указания дизайнеров по работе и организации элементов сайта. Программист создаёт программную основу сайта, делая её с нуля, используя фреймворк или CMS. Выбор языка программирования в данном случае — вопрос непринципиальный.

Конечно же, все эти этапы вместе взятые занимают много времени. Из-за желания людей ускорить процесс создания сайтов появились фреймворки. Фреймворк — программная платформа, определяющая струк-туру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.

Для начала работы над сайтом, нам потребуется определиться с тем какой фреймворк мы будем использовать, ведь их существует множество. Я выбрал Bootstrap, так как он является одним из лучших фреймворков подходящих новичкам. Далее я перечислю плюсы Bootstrap.

Bootstrap

Bootstrap на сегодняшний день является одним из самых популярных CSS-HTML фреймворков — с его помощью создано около 22% всех сайтов в мире. Чаще всего его используют для создания адаптивных сайтов, а также мобайл-ферст сервисов. Сейчас последней версией фреймворка является Bootstrap 5.

Плюсы Bootstrap

• Адаптивная сетка Bootstrap

Благодаря Bootstrap разработчикам и верстальщикам не нужно тратить рабочее время на создание собственной сетки — сервис позволяет автоматически построить адаптивную сетку, основанную на Flex-модели. При этом пользователи могут как менять эту адаптивную сетку под свои нужды, так и оставить версию по умолчанию, потому что она будет самостоятельно меняться в зависимости от наполнения контейнеров контентом и особенностям сайта.

• JavaScript в Bootstrap

Тем, кому не хватает возможностей Bootstrap, сервис позволяет использовать JS. Это дает разработчикам еще больше возможностей для интерактивности.

• Настраиваемость Bootstrap

Когда дело доходит до таких фреймворков как Bootstrap, одной из главных проблем является их размер — их вес может замедлять первую загрузку страницы. Например, текущая версия CSS-файла Bootstrap весит 119 КБ, что достаточно много. Bootstrap позволяет настраивать, какую функцию пользователи собираются встроить в свою загрузку. Можно просто отменить загрузку функций, которые не нужны для работы данного сайта — это снижает вес CSS-файла и ускоряет время загрузки страницы.

• Компоненты Bootstrap

Bootstrap поставляется с огромным набором компонентов, которые можно легко использовать. Среди них:

Панели навигации
Выпадающие списки
Индикаторы прогресса

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

• Настраиваемость Bootstrap

•Сообщество Bootstrap

Как и во многих опенсорс-проектах, за Bootstrap стоит большое сообщество дизайнеров и разработчиков. Размещение на GitHub позволяет разработчикам легко изменять кодовую базу Bootstrap и вносить в нее свой вклад. Это позволяет core-team в Bootstrap действительно понимать, чего не хватает пользователям их продукта, и быстро реализовывать необходимые фичи.

Глава 2.

Для начала работы нам понадобиться установить некоторые необходимые программы, такие как: Atom (или любой другой текстовый редактор) и Bootstrap (или можно будет привязать сам фреймворк с помощью сервера).

Установить программу Atom можно в браузере перейдя на сайт https://atom.io. Далее нужно нажать на кнопку download и установить приложение в удобное для вас место на вашем устройстве.

Так же вместо Atom’a можно установить любой более удобный для вас текстовый редактор. Текстовый редактор нужен, однако не обязательно, однако он существенно облегчит процесс написания сайта.

Следующим шагом мы создадим html файл, в котором и будем писать сам сайт. Для этого нужно будет открыть установленный Atom и нажать кнопку File в левом верхнем углу.

Далее нажимаем кнопку New Folder и вводим название папки, где будет находиться наш проект. После этого в той же папке создаём сам файл сайта, но при вводе названия в конце нужно будет добавить “.html”, чтобы создать файл в нужном разрешении.

Далее нужно будет создать основу для сайта. Чтобы это сделать нужно ввести “html”, затем нажать кнопку enter. После этих действий появится код основы сайта html.

HTML основа Веб-сайта выглядит вот так. Далее я разберу все строчки, которые автоматически введены.

Первая строчка определяет разрешения документа, в котором мы работаем.

Вторая строчка - атрибут lang предназначен для задания основного языка, который будет использоваться в содержимом данного элемента. Например, lang="en" - означает, что текстовое содержимое элемента html будет соответствовать английскому языку. А например, указание атрибуту lang значения "ru" означает, что текст контента элемента html будет на русском языке.

Третья строчка HTML-элемент <head> содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей.

Четвёртая строчка с помощью атрибута charset указывается кодировка текста HTML-страницы:<meta charset="название кодировки">. Лучше всегда указывать кодировку явно. Если этого не делать, браузер может неправильно угадать её, и вместо текста будут отображаться «иероглифы». Самая распространённая современная кодировка — utf-8. Используйте её во всех своих проектах.

Пятая строчка <title> </title>, между этих двух слов можно ввести заголовок всего html документа.

Шестая строчка </head> закрывает заголовок веб-сайта.

Седьмая строчка HTML-элемент <body> представляет собой контент (содержимое) документа HTML. В документе может быть только один элемент <body>.

Восьмая строчка – пустая, в неё будем писать всё содержимое документа.

Девятая строчка </body> закрывает элемент <body>.

Десятая строчка </html> закрывает документ.

Теперь перейдём к установке самого фреймворка Bootstrap. Способов его установки существует несколько, но самый простой — это привязать его к серверу ссылкой.

Что бы привязать Bootstrap к сайту ссылкой нужно перейти на официальный сайт фреймворка bootstrap.

Далее нужно будет пролистать страницу немного ниже и найти глазами английские строчки include via CDN. Под этой строчкой будет две ссылки которые нам понадобятся при подключении фреймворка на сайт.

Ссылку с заголовком CSS only помещаем в элемент <head>. Ссылку с заголовком JavaScript Bundle with Popper помещаем в элемент <body>. Выглядеть это будет вот так.

Следующее что нужно сделать это подогнать сайт под любое устройство вывода, чтобы сайт был одинаковым как на маленьком телефона, так и на большом мониторе. Для этого нам понадобиться добавить такую строчку кода <meta name="viewport" content="width=device-width, initial-scale=1". Добавляем эту строчку после элемента <title> в <head>.

Следующие что мы сделаем – это шапка сайта. На ней пользователи смогут как-то взаимодействовать с сайтом. Например, найти то, что им нужно или перейти в какой-то другой раздел сайта. Чтобы правильно сделать шапку нужно будет перейти на сайт фреймворка bootstrap, и скопировать часть кода себе в файл.

Когда вы уже зашли на сайт bootstrap, переходим во вкладку docs. Её можно найти как раз в такой же шапке что мы и будем делать. Найти её будет легко, она находится в левом верхнем углу сайта. Когда вы перешли туда листаем вниз пока в левой колонке не найдём Navbar, далее переходим в этот раздел, находим это поле и копируем код себе в документ сайта.

Далее создаём новый элемент <header> у себя в файле, и через строчку закрываем его вот так </header>. В пустую строчку вставляем этот скопированный код. В результате код шапки должен встать в элементе <header> так, чтобы элемент <header> был его первой строчкой а </header> последней.

Строчка <div class="container-fluid"> отвечает за размер шапки её можно настроить. В нашем случае размером выбран fluid, что значит, что шапка будет по всей длине страницы. Так же есть значения в порядке возрастания sm, md, lg, xl, xxl, где sm – самый маленький размер, а xxl – самый большой. В моём случае я буду использовать размел xxl.

Далее в строчке <a class="navbar-brand" href="#">Navbar</a> подчёркнутый Navbar – это главная кнопка шапки(заголовок), вместо него можно вписать всё что угодно, подходящее теме вашего сайта. Так же вместо решётки можно поставить ссылку, куда перебросит пользователя при нажатии на неё.

Следующее что можно сделать это удалить кнопку “home”, ведь она выполняет ту же функцию что и главная кнопка, для этого удаляем часть кода <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li>. Вот так эти строчки выглядят.

Далее можно изменить строчку поиска в шапке, чтобы это сделать нужно найти строчку кода <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">. Подчёркнутое слово Search можно изменить под тему сайта. Вот что будет если написать “Поиск по цене”.

Чтобы изменить саму кнопку поиска переходим на следующую строчку кода, где видим вот такую строку <button class="btn btn-outline-success" type="submit">Search</button>, где вместо “Search” пишем “Поиск”. Теперь поиск выглядит вот так вот.

Теперь создадим элемент секции <section> и перейдём к работе с ним. В нём мы начнём заполнять страницу основным контентом. Для начала создадим 2 таблицы для заполнения, это можно сделать вот такими несколькими строчками кода.

</div>

Теперь перейдём к заполнению этих таблиц. Левую я заполню текстом, а правую картинкой. Чтобы заполнить таблицу текстом мы добавляем элемент <h1>. Добавляем мы его после строчки <div class-“col-8”>. А между элементами <h1> вписываем желаемую надпись.

Следующее что будет нужно сделать – это растянуть таблицы под ширину вашего сайта. Так как я выбрал ширину xxl, таблицы я буду делать в таком же размере. Строчка кода для размера таблиц выглядит вот так <div class="container-xxl">. Вписать её нужно будет в самом начале элемента <section>.

Чтобы добавить картинку перейдём к элементу “col-4”. Код для добавления картинки выглядит так <img class="w-100" src="#" alt="">, где вместо решётки вставляем ссылку на картинку. А class=”w-100” отвечает за размеры этой самой картинки.

Вот так выглядит результат проведённой нами работы, получился небольшой сайт, который можно продолжать заполнять различным контентом.

Следующее что мы добавим это класс, который выровняет заголовок по центру. Для этого в <section> элементе добавляем класс align-items-center. После этого заголовок будет выглядеть намного лучше.

Далее мы добавим ещё 1 элемент <section>. Потом создаём элемент <h2>, в котором вводим название карусели, которую мы сейчас будем создавать. Переходим на сайт и копируем код понравившейся карусели, я же выбрал карусель, которую можно листать и в ней так же можно указать название картинки и её описание. Копируем код вставляем в секцию, при этом в начале секции должна быть строчка выравнивания <div class="container-xxl">. В строчке <img src=”…” class="d-block w-100" alt="...">, вместо src=”…” вставляем ссылку на картинку. В элемент <h5> вписываем название картинки, а в элемент <p> её описание. Вот что я написал и какой получился результат.

Итак, наш сайт готов и остался последний шаг, чтобы начать его работу, а именно, нужно будет загрузить его на хостинг. Хостинг подойдёт абсолютно любой, я выбрал бесплатный sprinthost.ru[2]. Переходим на сайт хостинга и регистрируемся, далее заходим в личный кабинет, для этого нажимаем левый клик по иконке справа вверху и переходим в менеджер файлов. Удаляем там файл index.php и загружаем html файл своего сайта, он обязательно должен называться index.html. Готово! Ваш сайт теперь в открытом доступе, и по ссылке на него может зайти любой человек.

Если вы захотите что-то поменять на сайте просто дописывайте код, удаляйте из файлового менеджера старый index.html и загружайте новый.

Взгляните на эти темы