Урок 4.3. ТЕХНОЛОГІЇ розробки веб-сайтів

ЗАСОБИ РОЗРОБКИ ВЕБ-САЙТІВ

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

Як ви вже знаєте, HTML (англ . Hyper Text Markup Language — мова розмічання гіпертексту) — це мова, призначена для визначення структури та оформлення веб-сторінок.

HTML-код веб-сторінок сайту можна написати в текстовому редакторі та зберегти у файлах з розширенням імені htm або html. Для написання коду можна використовувати будь-який текстовий редактор, наприклад Блокнот — стандартну програму Windows, спеціалізовані текстові редактори, наприклад Notepad++ (notepad-plus-plus.org), SublimeText (sublimetext.com), Brackets (brackets.io), інтегроване середовище розробки NetBeance (netbeans.org) або ін.

HTML-код  веб-сторінки  може  складатися  із  сотень  або  навіть  тисяч  рядків. Для  спрощення  розробки  веб-сторінок  можуть  використовуватися  візуальні редактори НТМL-коду, наприклад Microsoft FrontPage, Adobe Dreamweaver та ін. У таких редакторах створення веб-сторінок виконується на основі готових шаблонів оформлення, об’єкти сторінок можуть бути вставлені з колекцій об’єктів. Такі програми є прикладами WYSIWYG-редакторів (англ. What You See Is What You Get  —  що  ви  бачите,  то  ви  й  отримуєте).  HTML-код  сторінки  в  цих  середовищах генерується автоматично та зберігається у файлах.

Засобами для автоматичного створення веб-сайтів є також системи керування вмістом веб-сайту WCMS  (англ.  Web  Content  Management  System — система керування веб-контентом) — програми для організації веб-сайтів чи інших інформаційних ресурсів в Інтернеті чи окремих комп’ютерних мережах. Вони мають набори шаблонів оформлення веб-сторінок і модулів, які роблять сайт динамічним: форум, стрічка новин, каталог файлів, форма опитування, гостьова книга тощо. Контент веб-сторінок — текст і нетекстові об’єкти, призначені для розміщення на веб-сторінках — зберігається в базі даних. Генерація веб-сторінок виконується системою за запитом користувача. HTML-код згенерованої сторінки не зберігається в окремому файлі, а надсилається безпосередньо у браузер користувача. Сайт  під керуванням WСMS має  панель  управління,  що  надає  адміністратору  сайту  інструменти  для додавання, редагування та видалення матеріалів на сайті. Популярними системами керування вмістом веб-сайтів є WordPress, Joomla, Drupal, Moodle та ін.

Деякі онлайн-системи конструювання сайтів одночасно з послугами з розробки та адміністрування веб-сайтів надають доменне ім’я сайту та послуги хостингу.  Такими є системи Сайти Google (sites.google.com),  Weebly (weebly.com), Webnode (webnode.com.ua), uCoz (ucoz.ua) та ін. У цих  системах  створення  веб-сайту здійснюється в режимі онлайн відразу на сервері хостингу.

МОВА РОЗМІЧАННЯ ГІПЕРТЕКСТОВИХ ДОКУМЕНТІВ HTML

Розглянемо  одну  з  технологій  створення  веб-сайтів  —  написання  коду  веб-сторінок з використанням мови HTML.

У мові HTML реалізовано засоби для:

• створення  документа,  у  якому  визначено  структуру  тексту  та  його  форматування;

• створення гіперпосилань, які використовуються для переходу до інших сторінок або інших частин поточної сторінки;

• створення форм для реєстрації або опитування відвідувачів сайту;

• включення зображень, звуку, відео- та інших об’єктів до веб-сторінок.

HTML-код веб-сторінки складається з:

• тексту, який буде відображатися на сторінці;

• тегів (англ. tag — ярлик, ознака) — команд, що визначають:

  • структуру документа (заголовки, абзаци, списки, таблиці тощо);

  • формат тексту (колір символів тексту, розмір, вид шрифту, колір фону тощо);

  • уставлення  та  розміщення  на  сторінці  нетекстових  об’єктів  (графічних зображень, анімації, відео- та аудіофайлів тощо) та ін.

HTML-код веб-сторінки опрацьовується браузером. Браузер відображає текст і вміст уставлених нетекстових об’єктів, їх форматування відповідно до визначеної структури. 

На малюнку 1 наведено приклад веб-сторінки та її HTML-коду.

Теги розміщуються в дужках < та > . Наприклад, <hr> — тег для розміщення на сторінці горизонтальної лінії.

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

<b> Текст, оформлений напівжирним накресленням </b> .

Деякі  теги  мають  атрибути  для  уточнення дії тегу. Атрибутам надаються значення. Атрибути та їх значення розміщують усередині відкриваючого тегу. Після імені атрибута ставлять знак =, значення атрибута обмежують лапками. Між тегом й атрибутом та між різними атрибутами вставляють пропуск. Структура запису тегу з атрибутом:

<тег атрибут = "значення"> фрагмент документа </тег>

Наприклад:

<font color = "red"> Текст червоного кольору </font>

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

<h1> <font color = "red"> Текст заголовка </font> </h1>

У першому рядку HTML-коду сторінки рекомендується розміщувати тег !doctype. Він  вказує  браузеру  версію  мови  HTML,  яку  використано  для  створення  веб-сторінки. Для останньої п’ятої версії HTML тег має вигляд: <!doctype html>

Весь код веб-сторінки міститься між тегами <html> та </html> . Цей код поділено на дві частини: службову та інформаційну.

Службова частина HTML-коду сторінки містить відомості, потрібні для правильного відображення веб-сторінки браузером і для пошукових систем. Уміст службової частини розміщено між тегами <head> та </head>.

Інформаційна частина коду сторінки містить дані, призначені для перегляду відвідувачами  веб-сторінки.  Уміст  інформаційної  частини  розташовано  між  тегами <body> та </body>.

Таким чином, рекомендується така структура HTML-коду веб-сторінки:

<!doctype html>

<html>

<head>

Службова частина

</head>

<body>

    Інформаційна частина

</body>

</html>

У службовій частині коду доцільно розміщувати такі теги:

• title  —  для  визначення  назви  сторінки,  що  відображатиметься  на  вкладці браузера, наприклад <title> Моя перша сторінка </title>;

• meta  —  містить  службові  дані  для  браузерів  і  пошукових  систем.  Атрибут charset указує на таблицю кодування символів, яку використано під час створення веб-сторінки — Windows-1251 при кодуванні кирилиці в операційній системі  Windows  або UTF-8 при  використанні  кодової  таблиці Unicode. Наприклад, <meta charset "UTF-8">. Використання тегу із цим атрибутом важливе для правильного відображення символів тексту браузером.

Частина  коду  веб-сторінки,  яка  містить  контент  і  теги,  що  визначають  способи його  відображення  на  веб-сторінці,  розміщується  в  інформаційній  частині  веб-сторінки між тегами <body> та </body>.

У тегу body атрибут bgcolor указує на колір фону веб-сторінки:

<body bgcolor "yellow"> Колір фону сторінки — жовтий </body>

Значення кольорів можна записувати відповідними англійськими словами. Наведемо приклади тегів мови HTML, що можуть бути розміщені в інформаційній частині веб-сторінки (табл. 1).

Таблиця 1

Приклади тегів мови HTML

Повніший список тегів і прикладів їх використання для створення веб-сторінок можна знайти на різних ресурсах Інтернету, наприклад у  Вікіпідручнику (uk.wikibooks.org/wiki/HTML) або на сайті HTML конструювання (htmlbook.in.ua).

СТВОРЕННЯ ВЕБ-СТОРІНКИ МОВОЮ HTML

Розглянемо процес створення веб-сторінок з використанням текстового редактора Notepad++.

За замовчуванням текст, що вводиться в редакторі, кодується з використанням кодової таблиці Unicode.

Після введення коду веб-сторінки та збереження документа у файлі, тип якого Hyper Text Markup Language file, елементи коду будуть подані різними кольорами залежно від їх типу — текст, числа, теги, атрибути тегів, значення атрибутів, коментарі тощо (мал. 2).

Щоб побачити, як відображається веб-сторінка у браузері, можна виконати Виконати ⇒ Launch in Chrome. Після цього буде запущено на виконання браузер Google Chrome, у вікні якого відобразиться створена веб-сторінка.

Наведену  на  малюнку 2 структуру  коду  рекомендується  використовувати в усіх веб-сторінках, які ви створюватимете. Для наповнення сторінки контентом, його структурування та форматування, уставляння  нетекстових  об’єктів потрібно вводити текст і відповідні теги в частині сторінки, що обмежена тегами <body> та </body>.  Під  час  уведення  перших  символів  окремих  слів  будуть  відкриватися списки, з яких можна вибирати потрібне слово для автоматичного введення.

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

Працюємо з комп'ютером

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

Створіть  веб-сторінку, розмістивши на ній текст і зображення за зразком (мал. 3). Для цього:

1. Запустіть на виконання текстовий редактор Notepad++, перед цим завантаживши та встановивши його (перейти до ЗАВАНТАЖЕННЯ).

2. Закрийте всі відкриті вкладки, вибравши кнопку закриття в заголовках вкладок.

3. Уведіть у новій вкладці код, що визначає структуру веб-сторінки:

<!doctype html>

<html>

<head>

<meta charset "UTF-8">

<title>Мова HTML</title>

</head>

<body>

</body>

</html>

4. Збережіть веб-сторінку у вашій папці у файлі з іменем Мова HTML.html. Для цього:

1. Виконайте Файл ⇒ Зберегти.

2. Виберіть папку, у якій буде збережено файл.

3. Уведіть ім’я файла Мова HTML у поле Ім’я файла.

4. Виберіть тип файла Hyper Text Markup Language file у списку Тип файла.

5. Виберіть кнопку Зберегти.

Зверніть увагу на зміну кольорів для відображення елементів коду веб-сторінки.

5. Відкрийте  файл  Урок 4.2. Мова HTML.docx,  скопіюйте текст і вставте його у вікні редактора Notepad++ між тегами <body> та </body>.

6. Збережіть оновлений текст, натиснувши Ctrl + S.

7. Перегляньте вигляд веб-сторінки у вікні браузера, виконавши Виконати ⇒ Launch in Chrome. Зверніть увагу на оформлення та структуру вставленого тексту.

8. Установіть блакитний колір фону сторінки. Для цього перейдіть до вікна редактора Notepad++ і впишіть атрибут тегу <body bgcolor "lightblue">.

9. Збережіть сторінку та перегляньте її відображення у вікні браузера, натиснувши клавішу F5 або вибравши кнопку Перезавантажити цю сторінку.

10. Оформіть перший рядок уставленого тексту як заголовок першого рівня. Для цього введіть поруч із текстом теги <h1> Мова HTML </h1>.

11. Розташуйте  заголовок  по  центру  сторінки,  додавши  відповідний  атрибут до тегу <h1 align "center">.

12. Збережіть сторінку та перегляньте її відображення у вікні браузера.

13. Оформіть текст Історія мови як заголовок другого рівня, використавши тег <h2>, розташуйте заголовок по центру сторінки, додавши відповідний атрибут до тегу.

14. Уставте  на  веб-сторінку зображення з файла  Tim_Berners-Lee.jpg. Для цього:

1. Скопіюйте файл Tim_Berners-Lee .jpg у вашу папку.

2. Уведіть  до  коду  веб-сторінки  після  заголовка  Історія мови тег <img src "Tim_Berners-Lee.jpg">.

3. Установіть ширину зображення 100 пікселів, додавши до тегу атрибут <img src "Tim_Berners-Lee.jpg" width "100">.

15. Збережіть сторінку та перегляньте її відображення у вікні браузера.

16. Установіть  обтікання  зображення  текстом,  додавши  до  тегу  атрибут <img src "Tim_Berners-Lee.jpg" width "100" align "left">.

17. Оформіть перший абзац тексту, обмеживши його тегами <p> та </p>.

18. Вирівняйте текст абзацу за шириною, додавши до тегу атрибут <p align "justify">.

19. Оформіть  ім’я  вченого  напівжирним  накресленням,  обмеживши  його  тегами <b> Тімом Бернерс-Лі </b>.

20. Зробіть  слова  HTML Tags  гіперпосиланням  на  веб-сторінку  в  Інтернеті,  де розміщено указаний текст. Для цього введіть тег <a href   "http://info.cern.ch/hypertext/WWW/MarkUp/Tags.html"> HTML Tags </a> .

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

22. Обмежте тегами другий абзац тексту. Вирівняйте текст абзацу за шириною.

23. Оформіть  слова  Консорціум Всесвітньої павутини W3C  напівжирним  накресленням.

24. Оформіть  слово  HTML5  курсивним  накресленням,  обмеживши  його  тегами <i> HTML5 </i>.

25. Уставте після другого абзацу горизонтальну лінію. Для цього після абзацу введіть тег <hr>.

26. Збережіть сторінку та перегляньте її відображення у вікні браузера.

27. Оформіть текст Основні поняття як заголовок другого  рівня, розташуйте заголовок по центру сторінки.

28. Обмежте відповідними тегами два абзаци в розділі Основні поняття.

29. Оформіть слово Тег синім кольором, символами збільшеного розміру. Для цього введіть тег <font color "blue" size "5"> Тег </font>.

30. Оформіть слово Контент синім кольором, символами збільшеного розміру.

31. Збережіть сторінку та перегляньте її відображення у вікні браузера.

32. Закрийте вікна браузера та текстового редактора.

33. Здайте створену сторінку вчителю, прикріпивши посилання на неї до Ваших робіт у завданні на цей урок на платформі Google ClassRoom.

Для моніторингу засвоєння знань необхідно пройти тестування за посиланням: https://vseosvita.ua/test/start/zcj761