ВЕБ-ТЕХНОЛОГІЇ ТА ВЕБ-ДИЗАЙН

Навчальний посібник

УДК  004.738.5 (076)

       В 26

Рекомендовано Вченою Радою Національного університету «Одеська юридична академія», протокол № 4 від 27 грудня 2018 р.

Рецензенти:

Казаков А. І. – доктор технічних наук, доцент, завідувач кафедри інфор-маційних технологій проектування в електроніці Одеського національного політехнічного університету;

Єгошина Г. А. – кандидат технічних наук, доцент кафедри інформаційних технологій Одеської національної академії зв’язку ім. О. С. Попова.

 В 26  Трофименко О. Г.

Веб-технології та веб-дизайн : навч. посібник / О. Г. Трофименко, О. Б. Козін, О. В. Задерейко, О. Є. Плачінда. – Одеса : Фенікс, 2019. – 284 с.

ISBN 978-966-928-394-8

 

Наведено опис основних засобів HTML та CSS для проектування, макетування й редагування веб-сайтів. Містить численну кількість прикладів працездатного HTML та CSS коду з демонстрацією структурування та форматування тексту й табличних даних, вбудовування зображень на веб-сторінці, розміщення медіаконтенту, створення форм, засобів позиціонування об’єктів тощо. Детально розглянуто специфіку застосування сучасних онлайн веб-конструкторів сайтів (uCoz, WordPress). Приділено увагу етапам розроблення сайту, засобам формування адаптивного веб-дизайну веб-сторінок, різним видам верстки веб-сторінок, вимогам до якості контенту при інформаційному наповненні сайту, сучасним тенденціям та стильовим рішенням у веб-дизайні. Сформульовані вимоги, підходи й специфіка аналізу та оптимізації роботи сайтів як важливого етапу у підтримці веб-сайту.

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

УДК  004.738.5 (076)

 ISBN 978-966-928-394-8

Ó  О. Г. Трофименко, О. Б. Козін,
О. В. Задерейко, О. Є. Плачінда, 2019

Зміст

Передмова................................................................................................. 6

Розділ 1 Засоби HTML для розроблення сайтів............................................. 9

1.1. Предмет і задачі дисципліни................................................................. 9

1.2. Історія появи мови HTML.................................................................... 11

1.3. Засоби створення веб-сторінок........................................................... 12

1.4. Елементи HTML і структура HTML-документа......................................... 17

1.4.1. Використовувана термінологія..................................................... 17

1.4.2. Загальноприйнята структура HTML-документа............................... 18

1.4.3. Терміни успадкування................................................................ 20

1.4.4. Атрибути теґів.......................................................................... 21

1.4.5. Елемент CER для подання спеціальних символів............................. 22

1.5. Елементи із заголовка документа <head>............................................. 23

1.6. Визначення вмісту веб-сторінки – теґ <body>........................................ 29

1.6.1. Заголовки................................................................................ 29

1.6.2. Елементи розміщення тексту на веб-сторінці................................ 29

1.6.3. Вирівнювання тексту................................................................. 32

1.6.4. Форматування тексту................................................................ 35

1.6.5. Засоби HTML для роботи з таблицями.......................................... 43

1.6.6. Розміщення зображень на веб-сторінці........................................ 52

1.6.7. Розміщення медіаконтенту на веб-сторінці................................... 62

1.6.8. Створення форм на веб-сторінці................................................. 70

1.7. Основні теґи мови HTML..................................................................... 82

Контрольні запитання............................................................................... 88

Розділ 2 Каскадні таблиці стилів CSS......................................................... 90

2.1. Призначення і рівні CSS..................................................................... 90

2.1.1. Поняття CSS............................................................................. 90

2.1.2. Стандарти (рівні) CSS................................................................ 91

2.2. Способи визначення таблиць стилів..................................................... 93

2.3. Запис шаблона CSS........................................................................... 96

2.3.1. Групування та успадкування...................................................... 96

2.3.2. Види селекторів........................................................................ 97

2.3.3. Псевдокласи............................................................................. 99

2.4. Специфіка використання CSS.............................................................. 99

2.4.1. CSS для форматування тексту................................................... 100

2.4.2. Структурне форматування........................................................ 102

2.5. Засоби позиціонування об’єктів......................................................... 104

2.5.1. Позиціонування засобами float.................................................. 104

2.5.2. Позиціонування засобами position.............................................. 106

2.5.3. Позиціонування через inline-block.............................................. 108

Контрольні запитання.............................................................................. 112

Розділ 3  Онлайн веб-конструктори сайтів............................................... 114

3.1. Доменні імена та IP-адреси веб-сайтів................................................ 114

3.2. Конструктори сайтів......................................................................... 117

3.3. Засоби онлайн-конструктора сайтів uCoz............................................ 118

3.3.1. Створення дизайну та структури сайту....................................... 118

3.3.2. Робота над сайтом у сайт-конструкторі Ucoz............................... 122

3.4. Створення веб-блоґу засобами WordPress........................................... 127

3.4.1. Використовувана термінологія та засоби..................................... 127

3.4.2. Типова анатомія блоґу.............................................................. 128

3.4.3. Вибір тематики блоґу................................................................ 128

3.4.4. Замовлення тематичного домену................................................ 130

3.4.5. Створення бази даних на сайті.................................................. 131

3.4.6. Встановлення WordPress на хостинг........................................... 132

3.4.7. Опис інтерфейсу WordPress....................................................... 136

3.4.8. Налаштування теми та структури сайту на WordPress................... 139

3.4.9. Додавання форуму на сайт Wordpress........................................ 141

3.4.10. Використання плагінів............................................................. 142

Контрольні запитання.............................................................................. 143

Розділ 4 Послідовність дій  і специфіка створення сайту.......................... 145

4.1. Послідовність дій при створенні сайту................................................. 145

4.2. Інформаційне наповнення сайту......................................................... 150

4.3. Характеристики якості сайту............................................................. 151

Контрольні запитання.............................................................................. 156

Розділ 5  Розмітка веб-документа............................................................ 157

5.1. Види верстки................................................................................... 157

5.1.1. Таблична верстка.................................................................... 159

5.1.2. Фреймова верстка................................................................... 161

5.1.3. Блокова верстка...................................................................... 168

5.1.4. Семантична верстка................................................................. 170

5.2. Концепція адаптивного веб-дизайну................................................... 172

5.3. Розмітка флексбоксами.................................................................... 174

5.3.1. Правила розмітки флексбоксами................................................ 174

5.3.2. Основні властивості flex-контейнера.......................................... 177

5.3.3. Основні властивості flex-елементів............................................. 179

Контрольні запитання.............................................................................. 198

Розділ 6 Веб-дизайн................................................................................ 199

6.1. Елементи веб-дизайну...................................................................... 199

6.2. Принципи веб-дизайну...................................................................... 200

6.3. Історія веб-дизайну......................................................................... 202

6.4. Поширені помилки дизайнерів-початківців........................................... 204

6.5. Сучасні тенденції веб-дизайну........................................................... 208

6.6. Сучасні стильові рішення у веб-дизайні............................................... 209

6.7. Zero UI у веб-дизайні....................................................................... 226

6.7.1. Поняття та складові Zero UI...................................................... 226

6.7.2. Причини виникнення Zero UI...................................................... 228

6.7.3. Як Zero UI позначиться на дизайні.............................................. 229

6.7.4. Новації штучного інтелекту для дизайнерів.................................. 230

6.8. Аналіз веб-дизайну сайтів................................................................. 231

Контрольні запитання.............................................................................. 232

Розділ 7 Аналіз та оптимізація роботи веб-сайтів..................................... 233

7.1. Аналіз роботи веб-сайтів.................................................................. 233

7.1.1. Основні складові аналізу роботи сайту....................................... 233

7.1.2. SEO-аналіз сайту..................................................................... 234

7.1.3. Аналіз відвідуваності................................................................ 235

7.1.4. Юзабіліті-аналіз....................................................................... 236

7.2. SEO-аудит...................................................................................... 237

7.3. Аналіз найпоширеніших SEO-помилок................................................. 239

7.4. Оптимізація сайтів: як покращити готовий сайт................................... 246

7.5. Методи SEO-оптимізації сайту............................................................ 253

7.5.1. Біла оптимізація сайту.............................................................. 253

7.5.2. Сіра оптимізація сайту.............................................................. 253

7.5.3. Помаранчева оптимізація сайту................................................. 253

7.5.4. Чорна оптимізація сайту........................................................... 254

7.6. Інструменти для веб-аналітики.......................................................... 254

7.6.1. Веб-аналітика засобами Google Analytics..................................... 254

7.6.2. Інші безкоштовні інструменти для веб-аналітики.......................... 257

7.6.3. Налаштування сайту на базі Wordpress  для роботи з пошуковими машинами.............................................................................. 259

7.6.4. Плагіни веб-розробника............................................................ 260

Контрольні запитання.............................................................................. 265

Підсумковий тест.................................................................................... 266

Список використаних і рекомендованих джерел....................................... 277

Передмова

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

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

Навчальний посібник складається із семи розділів.

На початку, у розділі 1 докладно описані засоби мови HTML. Саме знання та використання засобів HTML 5 дозволяє прискорити завантаження сторінок сайту, додає нові можливості на сайт. Веб-програмування – це завжди пошук оптимальних рішень для виконання завдань, поставлених перед сайтами, які розробляються. Засоби HTML 5 сприяють знаходженню таких рішень, а тому професійні веб-програмісти активно застосовують можливості даних технологій при створенні сайтів.

Розділ 2 присвячений вивченню засобів стильового форматування вмісту веб-сторінок сайту – CSS. Каскадні таблиці стилів відповідають за зовнішнє подання (форматування) матеріалу на веб-сторінці. Саме CSS 3 дозволяє значно розширити можливості верстки сайтів без застосування сторонніх технологій. Привабливий дизайн сайтів із використанням мінімально необхідного коду – ось результат, який можна досягти за допомогою CSS 3.

HTML 5 і CSS 3 є певними фундаментальними засобами в розвитку технологій веб-програмування. Для їхнього засвоєння у посібнику наведено значну кількість прикладів працездатного HTML та CSS коду з демонстрацією структурування та форматування тексту і табличних даних, вбудовування зображень на веб-сторінці, розміщення медіаконтенту, створення форм, засобів позиціонування об’єктів тощо. Автори сподіваються, що численна кількість прикладів програмного коду спричинить у читача бажання не лише реалізувати їх на комп’ютері та перевірити їхню працездатність, а й змінити та удосконалити цей код.

У розділі 3 наведено матеріал щодо застосування сучасних онлайн веб-конструкторів сайтів, за допомогою яких можна створити сайт без володіння спеціальних знань. Детально покроково розглянуто можливості загальнодоступного онлайн-конструктора сайтів з україномовним інтерфейсом uCoz та безкоштовного потужного конструктора сайтів WordPress, за допомогою якого можна створювати сайти «з нуля» й керувати їхнім вмістом без технічних навиків і знань. При цьому створення дизайну, заповнення та редагування контенту відбувається безпосередньо в браузері комп’ютера за допомогою різноманітних шаблонів галереї і дизайнерських інструментів. Також у цьому розділі розтлумачено специфіку будови доменних імен та IP-адреси веб-сайтів.

Створюючи проект сайту, треба добре продумати його загальну структуру, зміст інформації та посилання. У розділі 4 приділено увагу етапам розроблення сайту: проектуванню інтерфейсу майбутнього ресурсу і складанню технічного завдання, розробленню дизайну сайту, верстці сторінок сайту відповідно до сучасних вимог, тестуванню, перенесенню на хостинг (розміщенню сайту в інтернеті) та адмініструванню розробленого ресурсу. Окремо висвітлено важливі характеристики якості сайту: призначення сайту, ознаки якості сайту з погляду користувачів і з погляду професіоналів, стиль подачі матеріалу, критерії якості бізнес-сайтів тощо. Особливу увагу приділено вимогам до якості контенту при інформаційному наповненні сайту.

Розділ 5 присвячено способам та засобам розмітки веб-документів. Докладно на прикладах розглянуто різні види верстки веб-сторінок. Нині для оптимального відображення та взаємодії сайту з користувачем здебільшого на практиці вдаються до використання засобів адаптивного веб-дизайну веб-сторінок. У розділі на численних прикладах висвітлено переваги та специфіку застосування флексбоксів як відносно нового засобу розмітки для впорядкування елементів на сторінці з метою гнучкої адаптивності сторінки під різні розміри екранів для різних пристроїв. Адже саме модуль Flexible Box з жовтня 2017 року рекомендується корпорацією W3C як засіб оптимального компонування у дизайні інтерфейсу користувача.

У розділі 6 йдеться про елементи та принципи веб-дизайну, які визначають правила взаємодії всіх елементів веб-сайту. Завдяки дотриманню цих загальноприйнятих принципів веб-дизайну можна створити вдалий успішний дизайн в результаті. Окремо зібрано та проаналізовано поширені помилки дизайнерів-початківців, на які варто звернути увагу для забезпечення зручної подачі інформації користувачеві та задоволення естетичного смаку аудиторії сайту. Значну увагу приділено сучасним тенденціям та стильовим рішенням у веб-дизайні. Використання у веб-дизайні асиметричних макетів і «ламаної» розмітки, контрастів, індивідуальних ілюстрацій, великих заголовків, які перекривають графічний контент, і поєднання різних стилів та напрямків веб-дизайну проілюстровано численними прикладами діючих сучасних сайтів. Показано, як при оформленні веб-сайтів великими зображеннями сучасні дизайнери додають ретро-патерни, кольори і типографіку. Продемонстровано використання 2D-оточення у тривимірному дизайні, статичних ілюстрацій з ненав’язливими ефектами, брутального веб-дизайну, продуманої анімації та ефектів UI, анімованої SVG-графіки тощо. Показано як візуальні контрасти, ізометрія, градієнти 2.0, Duotone та оверлей поверх зображень дозволяють змінювати веб-дизайн, адже нині, прагнучи до ясного розмежування, дизайнери тонко поєднують вишукані штрихи з об’ємними формами. У розділі детально розглянуто різноманітні стильові рішення сучасного веб-дизайну з прикладами їхнього застосування у композиції сучасних сайтів. Також сформульовані вимоги та підходи до аналізу веб-дизайну.

Розділ 7 висвітлює складові та специфіку аналізу роботи сайту як важливого етапу у підтримці веб-сайту. SEO-аналіз, юзабіліті-аналіз, аналіз відвідуваності та технічний аналіз веб-сайту потрібно проводити на регулярній основі. Саме регулярний аналіз дозволяє вчасно помітити проблеми або перебої в роботі сайту і внести потрібні правки. У розділі розглянуто алгоритм виконання SEO-аудиту для визначення готовності сайту до виконання активних дій з його розкручування. Охарактеризовано різні методи SEO-оптимізації сайту як комплексу заходів, направлених на підняття позицій сайту в результатах видачі пошукових систем за певними запитами (ключовими фразами). Наведено приклади безкоштовних онлайн-засобів перевірки сайтів для виявлення «слабких місць», які до того ж формують пропозиції щодо усунення виявлених проблем, забезпечення високого рівня юзабіліті сайту та його ефективності. Проаналізовано сучасні доступні інструменти для веб-аналітики. Охарактеризовано півсотні різних сучасних плагінів, які інтегруються в різні браузери чи онлайн-конструктори і покликані спростити процес розроблення і налагодження веб-сторінок.

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

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