Найвідомішою та найпопулярнішою службою Інтернету є Всесвітня павутина (Веб). Саме після її розповсюдження став можливий масовий доступ користувачів до Всесвітньої мережі.

Своєю появою Веб має завдячити Тіму Бернесу-Лі, який винайшов протокол HTTP, адреси URL та мову HTML — технології, на яких ґрунтується Веб.

Служба Веб підтримується сукупністю серверів, які здатні обмінюватися даними за протоколом HTTP. Цих серверів мільйони, й розповсюджені вони по всьому світу. На них містяться веб-сторінки — спеціальні документи, створені з використанням мови HTML. Кожна веб-сторінка має адресу URL, за допомогою якої вона може бути знайдена.

Перегляд веб-сторінок здійснюється у спеціальних програмах – браузерах, найпоширенішими з яких є Google Chrome, Edge, Mozilla та Opera.

Веб-дизайн (англ. web design) — галузь веб-розробки, що охоплює цілий ряд напрямів і дисциплін із створення та супроводу сайтів або веб-застосунків, таких як графічний веб-дизайн, проектування інтерфейсів, авторинг (у тому числі стандартизований код і власницьке програмне забезпечення), використовність та оптимізація для пошукових систем.

Етапи розробки дизайну сайту

Після розробки та затвердження техзавдання починається етап розробки дизайну сайту. І перше, що необхідно зробити - це створити модульну сітку сайту,  яка описує розташування елементів на сторінках сайту.

Модульна сітка будь-якої web-сторінки містить, як мінімум, два блоки: для основного тесту сайту і для меню. Якщо на сторінці потрібні додаткові елементи, наприклад, ще одне меню, «підвал» («footer») або «хедер» («header»), то модульна сітка розбивається ще на кілька блоків.

Розміри блоків модульної сітки підбираються індивідуально і можуть бути якими завгодно. Але в сукупності ширина блоків не повинна перевищувати максимальної ширини екранів представників цільової аудиторії сайту.

У блоці «хедер» прийнято вказувати назву сайту, яка може бути вибрана відповідно до назви компанії або бути ім'ям автора сайту, а також, при необхідності, логотип сайту. Основний блок меню в європейських сайтах традиційно розташований зліва, відповідно до напряму писемності (зліва-направо). Також основне меню може бути розташоване зверху, під «хедером».

Якщо сайт розрахований для перегляду на екранах з різним дозволом, то web-дизайн, як правило, виконується «гумовим» або ж центрується по горизонталі.

Коли інформаційна модель майбутнього сайту готова, можна братися за художню частину web-дизайну. Зазвичай дизайн сайту виконується у вигляді шаблонів - певних наборів елементів і їх взаємозв'язків. Саме шаблони дозволяють відокремити розробку візуального дизайну сайту від змісту.

Розрізняють шаблон головної і шаблони типових сторінок сайту. Шаблон головної сторінки оформляється, як правило, більш «витіювато», а шаблони решти сторінок сайту лише підтримують основну ідею.

Розроблений в графічному редакторі шаблон верстається у html-файл. За допомогою тегів мови html і таблиць стилів css задаються всі необхідні параметри сторінки: розміщення елементів, колір і розміри шрифтів, колір фону і т.д.

Робота над шаблоном сайту вимагає обов'язкового тесту на крос-браузерності, тобто на сумісність з різними браузерами і їх версіями. Різні браузери можуть по-різному інтерпретувати код html, тому таке тестування необхідне, щоб уникнути можливого «розвалу» дизайну.

Протестований і повністю готовий до роботи дизайн сайту «прикріплюється» до функціональної «канви», створеної веб-програмістами. У разі використання CMS, розроблені шаблони «закачуються» у відповідну папку на сервері - і все, сайт готовий для наповнення.

Веб-сторінки

Веб-сторінки є інформаційними ресурсами служби World Wide Web, і ви вже ознайомилися з тим, як здійснювати пошук і перегляд цих ресурсів.

У структурі веб-сторінки можна виділити такі складові:

• контент - (англ. content — зміст) — змістове наповнення веб-сторінки, доступне користувачу: тексти, зображення, відео, звукові дані та інше;

• елементи навігації - засоби для переходу до інших веб-сторінок;

• дизайн - елементи структурування контенту та його форматування, оформлення сторінки.

Веб-сторінки є текстовими документами. Їх створюють з використанням мови розмітки гіпертексту HTML (англ. Hyper Text Markup Language — мова розмітки гіпертексту).

Розробка веб-сайту

Розробка веб-сайту складається з кількох етапів. Ці етапи аналогічні до етапів розв'язування задач з використанням комп'ютера.

1. Постановка завдання. На цьому етапі визначається мета створення сайту, його основна тематика, здійснюється аналіз існуючих сайтів такої самої або схожої тематики.

У результаті розробник повинен знати:

• мету, з якою створюється сайт;

• тематику сайту, відмінності сайту від інших сайтів такої самої тематики;

• аудиторію потенційних відвідувачів сайту: вік, стать, коло інтересів тощо;

• перелік сервісів для розміщення на сайті: форум, чат, пошукова система, веб-каталог, електронна пошта та інше;

• перспективи розвитку сайту.

2. Визначення структури сайту. На цьому етапі важливо скласти перелік розділів сайту для формування системи навігації, список сторінок, визначити зв'язки між ними.

3. Розробка структури веб-сторінок сайту. На веб-сторінках передбачено розміщення:

• верхнього блоку — заголовка, у якому містяться логотип і назва сайту;

• блоку навігації (меню) для переходу до основних розділів сайту;

• інформаційного блоку з основним матеріалом, що займає центральну частину сторінки;

• нижнього блоку — підвалу, для розміщення контактних даних, повідомлення про авторські права тощо.

Якщо розробка сторінок сайту буде здійснюватись автоматизованими засобами, то структура веб-сторінок може бути запропонована в шаблоні сторінки.

4. Розробка дизайн-макета сторінок сайту. Дизайн-макет сторінок включає набір значень властивостей текстових і графічних об'єктів сторінки:

• Кольорової гами сторінок

• Елементів графічного оздоблення

• Набору шрифтів та іншого.

Тобто визначає стиль сайту.

Дизайн-макет спирається на попередньо розроблену зовнішню структуру сторінок сайту. 

5. Створення та верстка сторінок сайту. Створюються сторінки, як правило, з використанням тегів мови HTML. У процесі створення відбувається верстка сторінок.

Верстка — це процес розміщення на сторінці під час її створення текстових, графічних та інших об'єктів так, щоб сторінка отримала вигляд згідно з розробленим дизайн-макетом. На цьому етапі здійснюється й інформаційне наповнення сайту.

6. Якщо на етапі постановки завдання передбачалося розміщення на сайті додаткових сервісів і засобів зворотного зв'язку, таких як системи пошуку, голосування, форуми та інше, то потрібен ще й етап програмування сайту.

При автоматизованому створенні сайту деякі з наведених засобів можуть бути вставлені з готових шаблонів.

7.Розміщення (публікація) сайту в Інтернеті. Під час попередніх етапів створені веб-сторінки могли зберігатися на локальному комп'ютері розробника. На цьому етапі сайт отримує доменне ім'я та розміщується на сервері.

Після цього сайт стає доступним для перегляду користувачами Інтернету, якщо він або його частина не мають обмежень на доступ.

Сервер, на якому розміщується сайт, повинен надавати послуги хостингу.

Хостинг (англ. hosting — виявлення гостинності) — виділення апаратних і програмних ресурсів сервера для розміщення файлів користувача, забезпечення доступу до них, опрацювання запитів та іншого.

Організації, що надають послуги хостингу, називають хостинг-провайдерами.

Існують онлайн-системи конструювання сайтів, які одночасно з послугами з розробки веб-сайтів надають послуги безкоштовного хостингу. Такими є системи: Google Сайти, uCoz, Weebly та інші. У цих системах створення веб-сайту здійснюється у режимі онлайн одразу на сервері хостингу.

Для того щоб ваш сайт почали відвідувати користувачі Інтернету, бажано зареєструвати його в пошукових системах і каталогах, розмістити посилання на нього на Інших сайтах.

Цей процес називають популяризацією або просуванням сайту. Для популяризації використовують й Інші засоби, але важливо, щоб матеріали, доступні на вашому сайті, були варті того, щоб ними зацікавилися відвідувачі.