Розділ 4.

Створення та публікація вебресурсів

У цьому розділі ви дізнаєтеся про:

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

Зміст

 

4.1. Структура вебсторінок. Поняття про мову HTML

4.2. Засоби автоматизованого створення та публікації вебресурсів

Практична робота № 5. «Створення сайту з використанням онлайн-системи конструювання сайтів»

 

4.1. Структура вебсторінок. Поняття про мову HTML

 

1. Що таке вебсторінка? Що таке вебсайт?

2. Які об’єкти можуть бути розміщені на вебсторінках?

3. Що таке дизайн? Які ви знаєте принципи дизайну презентації?

Елементи структури вебсторінок

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

У структурі вебсторінки можна виділити такі складові (мал. 4.1):

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

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

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

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

Дизайн вебсторінок, як і дизайн комп’ютерних презентацій, потрібно розробляти, спираючись на закони композиції, колористики та ергономіки.

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

Правила ергономічного розміщення об'єктів на вебсторінках

Нагадаємо, що ергономіка (грец. έργος - праця, νώμος - закон) - це наука, яка вивчає особливості виробничої діяльності людини з метою забезпечення ефективності, безпеки та зручності цієї діяльності.

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

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

Під час розробки структури вебсторінок слід враховувати такі рекомендації:

• розміщувати назву сайту в заголовку всіх сторінок;

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

• пропонувати кілька посилань для переходу на одну й ту саму сторінку, щоб забезпечити кожному користувачу можливість вибрати найбільш зручне або очевидне;

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

• усувати будь-яку двозначність щодо наслідків дій під час вибору елементів керування на вебсторінці;

• у нижньому колонтитулі (підвалі) зазначати авторські права (копірайт) та контактні дані дизайнера та власника ресурсу.

Слід дбати про ергономічне розміщення об’єктів на вебсторінках, а для цього бажано дотримуватися таких правил:

• розміщувати найважливіші дані на початку сторінки;

• заголовки статей виділяти шрифтом збільшеного розміру;

• розміщувати на сторінці не більше трьох колонок з контентом;

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

• виділяти візуально фрагменти тексту та графічні зображення, що використовуються як гіперпосилання;

• створювати гіперпосилання на сторінках з великим обсягом тексту для переходів усередині вебсторінки.

Під час розробки вебсайту потрібно намагатися надати зручності для користувачів з особливими потребами. Для цього варто звертати увагу на таке:

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

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

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

Поняття про мову HTML

Вебсторінки створюють як текстові документи та зберігають зазвичай у файлах з розширенням імені html. Для розробки вебсторінок використовують мову розмітки гіпертексту HTML (англ. Hyper Text Markup Language - мова розмітки гіпертексту). Команди, що записані цією мовою, виконуються браузером, який розміщує об’єкти на вебсторінці відповідно до задуму розробника. HTML-код сторінки складається з даних двох типів:

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

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

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

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

Атрибути записують у кутових дужках після тегу, відділяючи пропусками. Значення атрибутів записують у лапках після знака =.

Наприклад, на сторінку потрібно вставити зображення з файлу 1.jpg, який розміщено в одній папці з файлом вебсторінки, та встановити для цього зображення ширину та висоту по 200 пікселів. Для вставлення зображення потрібно використати тег img (англ. image - зображення) з такими атрибутами:

• src (англ. source - джерело) - для вказівки імені файлу із зображенням;

• width (англ. width - ширина), height (англ. height- висота) - для встановлення ширини та висоти зображення.

Тег з атрибутами матиме вигляд:

А для вставлення на вебсторінку зображення з файлу, що зберігається в Інтер-нетіз URL-адресою

http://vsviti.com.ua/wp-content/uploads/2017/02/arheol_01.jpg

, шириною 200 пікселів і висотою 100 пікселів, може бути використано тег з атрибутами: <img src = "

http://vsviti.com.ua/content/fullsize.jpg

" width = "200" height = "100"> Деякі команди визначають призначення або формат лише частини контенту. Наприклад, у деякому реченні потрібно виділити курсивним накресленням лише одне слово. У такому разі використовують парні теги: відкриваючий і закриваючий. Дія команди буде стосуватися лише частини контенту між цими тегами. Відкриваючий тег може містити атрибути та їх значення. У закриваючого тегу немає атрибутів, але перед ним поставлено символ /.

Наприклад, якщо в реченні HTML - це мова розмітки гіпертексту потрібно виділити курсивним накресленням лише слово HTML, то цю команду буде записано так:

Тут <і> - відкриваючий тег, що визначає накреслення символів курсивом, а </і> - відповідний йому закриваючий тег.

А якщо слова Українські традиції потрібно записати символами червоного кольору збільшеного розміру, то може бути використано парний тег <font> (англ. font- шрифт) з атрибутами color і size (амер. color- колір, англ. size - розмір):

Переглянути HTML-код вебсторінки, відкритої у вікні браузера, можна, вибравши в контекстному меню сторінки команду Переглянути джерело сторінки, Програмний код сторінки або подібну чи натиснувши сполучення клавіш Ctrl+U. На малюнку 4.3 наведено зображення частини вебсторінки та відповідний фрагмент HTML-коду. У коді сторінки теги, їх атрибути та значення атрибутів зазвичай виділяються кольором.

У фрагменті коду, наведеному на малюнку 4.3, присутні теги, що визначають структуру сторінки:

• <h1>... </h1> -тег створення заголовка на вебсторінці. У створеному в прикладі заголовку виводиться текст: 6 січня - Святий вечір (Навечір’я Різдва Христового)·,

• <img> - тег вставлення на вебсторінку зображення та встановлення значень його властивостей. У наведеному фрагменті на сторінку вставлено зображення з файлу /images/4_Svatkovyi_kalendar/aa52251fab 14.jpg;

• <р>... </р> - тег створення абзацу на вебсторінці. У створеному абзаці розміщено текст: За давньою традицією, належне різдвяне святкування починається ще ввечері напередодні Різдва з духовних і матеріальних приготувань. Вечір цей зветься Святим чи Святвечором, або ж Навечір’ям Різдва Христового, що припадає на 6 січня. Також на сторінці є й інші абзаци;

<strong>... </strong> - тег для виділення фрагмента тексту напівжирним накресленням. На сторінці в прикладі виділено текст: Однак не менш важливою була завчасна й серйозна підготовка до різдвяно-новорічних обрядів; <а>... </а> - тег створення гіперпосилання. У наведеному фрагменті гіперпо-силання пов’язано зі словом Дідуха та забезпечує перехід до вебсторінки того самого сайту з адресою /zvychai-ta-obriady/obriadova-symvolika/279-didukh.

Виконайте тренувальні завдання за посиланням

https://cutt.ly/chdrqBa

або QR-кодом.

Найважливіше в цьому пункті

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

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

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

Переглянути HTML-код вебсторінки, відкритої у вікні браузера, можна, вибравши в контекстному меню сторінки команду Переглянути джерело сторінки, Програмний код сторінки або подібну чи натиснувши сполучення клавіш Ctrl+U.

Лайте вілповілі на запитання

1·. Які складові можна виділити на вебсторінці? Охарактеризуйте кожну групу. 2°. Який сайт вважається ергономічним?

З*. Які правила потрібно враховувати для забезпечення ергономічності сайту? 4·. Яким чином під час створення сайту можна створити зручності для користувачів з особливими потребами?

5*. Що таке HTML-код сторінки? Дані яких видів він містить?

6*. Як записують теги; теги з атрибутами; парні теги?

7*. Який тег призначено для вставлення зображення з файлу на вебсторінку?

Для створення гіперпосилання?

8*. Як можна переглянути HTML-код сторінки?

Виконайте завлання

1 °. Перегляньте сторінку сайту Національної бібліотеки України для дітей

(chl.kiev.ua). Визначте та запишіть у зошит, скільки блоків навігації розміщено на сторінці, якого типу контент, які використано елементи дизайну.

2*. Перегляньте сайт Зелена хвиля (ecoclubua.com). Запишіть у зошит, які елементи сайту відповідають вимогам ергономіки, а які - ні.

'З*. Перегляньте сайт 7 чудес України (7chudes.in.ua). Запишіть у зошит, які елементи сайту відповідають вимогам ергономіки, а які - ні.

4*. Перегляньте HTML-код вебсторінки з адресою kievoi.ippo.kubg.edu.ua. Знайдіть у коді теги для вставлення зображень, гіперпосилань і горизонтальних ліній. Зробіть висновок про використання великих і малих літер в HTML-коді. Зробіть припущення про:

а) призначення атрибуту color тегу <hr>;

б) можливі значення атрибуту href тегу <а>.

5*. Відкрийте файл Розділ 4\Пункт 4.1 Завдання 4.5.txt. Збережіть файл у вашій папці з розширенням імені html і кодуванням UTF-8. Упишіть у HTML-код текст і теги для створення на сторінці заголовка першого рівня з назвою вашого населеного пункту, горизонтальної лінії та посилання на сайт вашого населеного пункту в Інтернеті. Збережіть змінений файл і перегляньте його вміст у вікні браузера. Перевірте правильність гіперпосилання.

6*. Відкрийте файл Розділ 4\Пункт 4.1\завдання 4.6.txt. Збережіть файл у вашій папці з розширенням імені html і кодуванням UTF-8. Перегляньте вміст збереженого файлу у вікні браузера. Змініть HTML-код так, щоб:

а) у заголовку браузера та на відповідній кнопці Панелі завдань відображалося ваше прізвище;

б) у заголовку першого рівня відображалося ваше прізвище та ім’я;

в) у заголовку другого рівня відображалася назва вашого закладу освіти;

г) горизонтальна лінія стала червоного кольору;

д) розмір зображення став 200 х 200 точок;

е) гіперпосилання вказувало на головну сторінку Вікіпедії.

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

 

4.2. Засоби автоматизованого створення та публікації вебресурсів

 

1. Які об’єкти можна виділити на вебсторінці?

2. Який сайт вважається ергономічним?

3. Що таке HTML-код сторінки? Дані яких видів він містить?

Засоби автоматизованого створення вебсайтів

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

Для створення простішого сайту можна використати засоби автоматизованого створення та публікації вебресурсів.

Існують спеціалізовані вебредактори - програми, які призначено для створення вебсторінок сайтів, наприклад Adobe Dreamweaver, Microsoft Frontpage, WYSIWYG Web Builder та ін. Ці програми мають засоби для візуального конструювання вебсторінок. Розробник розміщує на вебсторінках об’єкти - зображення, таблиці, списки та інше, вибираючи їх заготовки з бібліотеки об’єктів. HTML-код кожної вебсторінки генерується на основі отриманого набору об’єктів. Такі програми називають WYSIWYG-редакторами (англ. What You See Is What You Get - що ви бачите, то ви й отримуєте).

Іншим засобом розробки сайтів є системи управління вебконтентом WCMS (англ. Web Content Management System - система управління вебконтентом) -програми, які призначено для створення, редагування та керування вмістом веб-сайту. Популярними WCMS є системи Joomla, Wordpress, MediaWiki та ін. Вони містять набори вже готових шаблонів оформлення вебсторінок і модулів, що роблять сайт динамічним: форумів, стрічок новин, каталогів файлів тощо. Контент сторінок, створених у цих системах, зберігається в базі даних, а HTML-код генерується автоматично на основі шаблону.

Назване програмне забезпечення можна встановити на локальному комп’ютері. Створені в їх середовищі вебсайти потрібно самостійно розміщувати в Ін-тернеті.

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

Створення сайту засобами онлайн-системи конструювання сайтів

Створення вебсайту засобами онлайн-системи конструювання сайтів відбувається в кілька кроків:

1. Реєстрація облікового запису на сервері онлайн-системи конструювання сайтів.

2. Вибір назви сайту та шаблону його оформлення.

3. Створення сторінок сайту та системи навігації.

4. Заповнення сторінок контентом.

5. Публікація сайту.

Розглянемо, як відбувається процес розробки вебсайту засобами, що безкоштовно надає користувачам сервіс Google Сайти.

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

Створити сайт можна різними способами:

1. Відкрити вікно Google Диска, скориставшись вашим обліковим записом Google, та виконати

2. Виконати вхід у сервіс Google, скориставшись вашим обліковим записом, перейти за адресою sites.google.com і вибрати кнопку Створити новий сайт

у нижньому правому куті вікна Сайти.

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

Одночасно у вікні Google Диска та у вікні Сайти з’явиться ескіз сайту з підписом Сайт без назви та значком

(мал. 4.5). Подвійне клацання на цьому ескізі буде відкривати сайт у режимі редагування для подальшої роботи із сайтом.

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

Вибір назви сайту та шаблону оформлення

Кожен сайт має назву, яка відображає його зміст або призначення. Щоб дати назву новому сайту, її потрібно ввести в поле Введіть назву сайту у верхній частині заголовка сторінки. Одночасно буде змінено підпис ескізу сайту на Google Диску.

Як і для документів Google, усі зміни, виконані під час редагування сайту, будуть зберігатися автоматично.

Для вибору шаблону оформлення сайту слід:

1. Вибрати заголовок вкладки Теми в правій частині вікна.

2. Вибрати одну із запропонованих тем оформлення (мал. 4.6).

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

Можна також змінити вигляд заголовка на сторінках сайту. Після наведення вказівника на заголовок з’являється панель налаштувань з командами Змінити зображення та Тип верхнього колонтитула. Вибір першої команди приводить до відкриття списку зображень, які можуть бути використані в заголовку сторінки. За вибору другої команди стає можли-

вим змінення типу заголовка - Обкладинка, Великий банер, Банер або Лише заголовок.

На сторінках сайту можна розмістити нижній колонтитул - підвал. Для цього потрібно підвести вказівник до нижньої межі сторінки та вибрати кнопку Додати нижній колонтитул. У поле, що з’явиться, можна ввести дані розробника сайту, рік його створення або оновлення тощо.

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

Створення вебсторінок

Одразу після створення сайт містить лише одну сторінку, яка є головною (домашньою) сторінкою сайту. Кожна сторінка сайту має назву. Назву головної сторінки потрібно ввести в поле Заголовок сторінки. Часто назва головної сторінки збігається з назвою сайту.

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

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

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

Для створення нової сторінки на сайті слід:

1. Вибрати заголовок вкладки Сторінки на бічній панелі в правій частині вікна.

2. Навести вказівник на кнопку

і вибрати кнопку Створити сторінку

3. Увести назву сторінки в поле Ім’я у вікні Нова сторінка.

4. Вибрати посилання Готово.

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

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

Для створення головної сторінки тематичного розділу потрібно перетягнути блоки з назвами інших сторінок цього розділу на назву головної сторінки розділу. На малюнку 4.8 наведено вигляд вкладки Сторінки під час переміщення сторінки Фотогалерея в тематичний розділ Наш клас.

Таким чином розробником сайту формуються структура сайту та панель навігації.

Вставлення об’єктів на вебсторінку

На вебсторінку можна вставити різні об’єкти: текстові поля, зображення, гіперпосилання, документи, які розміщено на Google Диску, та ін. Для цього призначено вкладку Вставити на бічній панелі.

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

Призначення окремих елементів керування вкладки Вставити наведено в таблиці 4.1.

Таблиця 4.1

Призначення елементів керування вкладки Вставити

Елемент керування	Призначення
	Створення блока введення тексту. Текст може бути оформлений як Назва, Заголовок, Підзаголовок, Звичайний текст і Малий
	Уставлення зображення з Google Диска, за URL-адресою з Ін-тернету, з носіїв даних комп’ютера тощо
	Уставлення об’єктів різних типів з Інтернету за їх URL-адресою або вставлення фрагментів HTML-коду
	Уставлення документів різних типів з Google Диска
	Вибір макета розміщення об’єктів на сторінці
	Створення змісту сторінки. Зміст формується автоматично із заголовків, розміщених у текстових полях на сторінці, та призначений для швидкого переходу до вибраного заголовка на поточній сторінці
	Створення слайд-шоу з вибраних зображень
	Уставлення горизонтальної роздільної лінії

Продовження таблиці 4.1

Елемент керування	Призначення
	Уставлення відео із сервісу YouTube
	Уставлення календаря, створеного в сервісі Google Календар
	Уставлення карти, створеної у сервісі Google Карти

Для видалення вставленого об’єкта потрібно вибрати кнопку Видалити

в панелі налаштувань блока цього об’єкта.

Для попереднього перегляду сторінок створеного сайту можна вибрати кнопку

Попередній вигляд

у верхній частині вікна брау-зера. У цьому режимі можна побачити, як виглядатиме сайт у мережі Інтернет під час перегляду його на екрані смартфона, планшетного комп’ютера або на великому екрані ноутбука чи стаціонарного комп’ютера. Для цього призначено кнопки на панелі керування попереднім переглядом (мал. 4.9). Вийти з режиму попереднього перегляду можна вибором кнопки

Публікація сайту

Створений вами сайт буде залишатися недоступним для користувачів Інтерне-ту, поки ви його не опублікуєте. Для публікації слід:

1. Вибрати кнопку Опублікувати у верхній частині вікна браузера.

2. Увести, використовуючи малі літери латиниці, цифри та тире, останню частину URL-адреси сайту. Перша частина адреси (доменне ім’я сервера та шлях до файлу) для всіх сайтів буде однаковою: sites.google.com/view/. Остання частина повинна бути унікальною для кожного сайту. Якщо введена вами адреса не є унікальною, то про це буде повідомлено і її потрібно змінити.

3. Вибрати кнопку Опублікувати.

Опублікований сайт можна переглянути, вибравши команду Переглянути опублікований сайт у списку кнопки Опублікувати. Адреса, яку потрібно повідомити користувачам Інтернету для перегляду вашого сайту, буде міститися в рядку адреси у вікні перегляду опублікованого сайту.

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

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

Виконайте тренувальні завдання за посиланням

https://cutt.ly/yhdrw8m

або QR-кодом.

Найважливіше в цьому пункті

Створення сайту може виконуватися з використанням автоматизованих засобів: спеціалізованих вебредакторів, систем управління вебконтентом WCMS, онлайн-систем конструювання сайтів.

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

Лайте вілповілі на запитання

1 ·. Які існують засоби автоматизованого створення сайтів? Охарактеризуйте їх.

2*. Які етапи створення вебсайтів засобами сервісу Google Сайти? Поясніть їх.

3°. Як створити сайт і дати йому назву засобами сервісу Google Сайти?

4*. Як змінити верхній і нижній колонтитули на сторінці?

5*. Як вибрати тему оформлення для сайту? Значення яких властивостей можуть бути вибрані разом з темою оформлення?

6*. Як створити нову сторінку на сайті? Як перемістити сторінку до тематичного розділу?

7°. Які об’єкти можуть бути вставлені на сторінки сайту, створеного засобами сервісу Google Сайти?

8*. Для чого здійснюється публікація сайтів? Як опублікувати сайт?

9°. Яка структура адреси сайтів, створених засобами сервісу Google Сайти?

10*. Які, на ваш погляд, переваги та недоліки створення сайтів шляхом написання HTML-коду їх сторінок і шляхом використання онлайн-систем конструювання сайтів?

Виконайте завлання

1^е. Доберіть назви сторінок і створіть у текстовому процесорі мапу сайту з теми Небезпечні тварини. Збережіть її у вашій папці у файлі з іменем завдання 4.2.1.docx.

2*. Доберіть назви сторінок і створіть у текстовому процесорі мапу сайту з теми Колекція рекордів. Збережіть її у вашій папці у файлі з іменем завдання 4.2.2.docx.

З*. Створіть сайт з використанням сервісу Google Сайти відповідно до мали сайту, наведеної на малюнку 4.7. Надайте сайту назву Наш клас. Виберіть тему оформлення Дипломат. Опублікуйте сайт без наповнення. Повідомте вчителю/вчительці URL-адресу створеного вами сайту.

4*. Створіть сайт Наші космічні сусіди з використанням сервісу Google Сайти. Мала сайту, текст і зображення для розміщення на сторінках містяться в папці Розділ 4\Пункг 4.2\3авдання 4.2.4. Виберіть для сайту тему оформлення Вражаюча. Опублікуйте сайт. Повідомте вчителю/вчительці URL-адресу створеного вами сайту.

5*. Створіть сайт про свій улюблений вид спорту з використанням сервісу Google Сайти. Розробіть мапу сайту і доберіть матеріали для наповнення сайту. Опублікуйте сайт. Повідомте вчителю/вчительці URL-адресу створеного вами сайту.

6*. Об’єднайтесь у групу з 2-4 осіб. Обговоріть зміст, розробіть мапу, доберіть матеріали та розробіть сайт на одну з тем:

а) Користь і шкода комп’ютерів;

б) Українські дослідниці космосу;

в) Ми - громадяни;

г) Збережемо планету разом;

д) Школяр і бізнес.

Повідомте вчителю/вчительці URL-адресу сайту, який ви створили.

 

ПРАКТИЧНА РОБОТА № 5

«Створення сайту з використанням онлайн-системи конструювання сайтів»

 

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

1. Створіть сайт Українські дослідники космосу з використанням сервісу Google Сайти.

2. Виберіть тему оформлення Vision.

3. Створіть і розмістіть вебсторінки на основі такої мали сайту:

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

5. Уведіть у нижній колонтитул ваші дані як розробника сайту.

6. Заповніть сторінку Історія досліджень текстовими матеріалами, наприклад скопійованими з файлу Розділ 4\Практична 5\космічні дослідження.docx.

7. Розмістіть на сторінці Перший українець у космосі текст з файлу Павло По-пович.сіосх і фотографію, що містяться в папці Розділ 4\Практична 5\По-пович.

8. Завантажте на ваш Google Диск файл Розділ 4\Практична 5\польоти. docx. Уставте файл з диска на сторінку Хронологія польотів.

9. Розмістіть на сторінці Новини з орбіти відео із сервісу YouTube, яке знайдете за пошуковим запитом Марс.

10. Опублікуйте сайт з адресою kosmos-прізвище, де прізвище - ваше прізвище, записане англійською.

11. Перегляньте опублікований сайт.

12. Надішліть учителю/учительці інформатики електронного листа з повідомленням URL-адреси створеного вами сайту.

 

Це матеріал з підручника Інформатика 8 клас Ривкінд (2021)