Урок 29-30. Структура веб-сторінок. Правила ергономічного розміщення відомостей на веб-сторінці. Поняття про мову гіпертекстової розмітки​

Перегляньте презентацію

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

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

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

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

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

Виконайте інтерактивне завдання

Практичне завдання

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

Повторіть правила безпечної роботи за комп’ютером.

Хід роботи:

1. Перегляньте HTML-код сторінки за адресою allinf-web.github.io/olymp, ознайомтеся з тегами, які використано для розмітки тексту, та оцініть ергономічність розміщення об’єктів на сторінці. Для цього:

1. Відкрийте у вікні браузера сторінку з адресою allinf-web.github.io/olymp.

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

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

• Чи відображається назва сайту в заголовку всіх сторінок?

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

• Чи структуровано текст? Чи виділено заголовки статей?

• Яка найбільша кількість колонок з контентом на сторінках?

• Чи існує можливість переходу з будь-якої сторінки до головної сторінки сайту?

• Чи зрозуміло призначення елементів керування на сторінках? Чи виділяються елементи навігації?

• Чи зручно організовано навігацію для переміщення по головній сторінці, по сторінці Історія? Зробіть висновок щодо ергономічності розміщення відомостей на сторінках сайту та запишіть його в зошит.

4. Відкрийте контекстне меню вільного місця головної сторінки, виберіть команду Переглянути джерело сторінки або натисніть Ctrl+U.

5. Перегляньте сторінку з HTML-кодом. Знайдіть відповіді на запитання та надрукуйте у текстовий документ:

• Скільки всього рядків у HTML-коді сторінки?

• У якому рядку використано перший тег для створення гіперпосилання <a>? На яку сторінку відбудеться перехід?

• У якому рядку використано перший тег для створення абзацу <p>? Який текст цього абзацу?

• У якому рядку використано перший тег вставлення зображення <img>? З якого файлу зображення вставлено на сторінку?

• Які розміри вибрано для вставлення малюнка з файлу logo_olymp.png?

6. Виберіть на сторінці з HTML-кодом посилання на файл logo_olymp.png. У заголовку браузера визначте реальний розмір зображення. Порівняйте реальний розмір зображення з розміром, визначеним у HTML-коді.

7. Закрийте вікно браузера.

2. Створіть вебсторінку мовою HTML. Для цього:

1. Завантажте та відкрийте файл Вправа 4.1.txt. Зверніть увагу, у якій програмі відкрився файл.

2. Збережіть відкритий файл у вашій папці, змінивши розширення імені файлу з txt на html. Виберіть у вікні Збереження в списку Кодування значення UTF-8.

3. Не закриваючи вікна текстового редактора, відкрийте в Провіднику вікно вашої папки. Зверніть увагу на значок щойно збереженого файлу Вправа 4.1.html.

4. Відкрийте файл Вправа 4.1.html. Зверніть увагу, у якій програмі він відкрився.

5. Натисніть клавіші Win+← , щоб розмістити вікно браузера в лівій половині монітора. У правій половині виберіть вікно текстового редактора.

6. Зверніть увагу на назву сторінки в заголовку браузера та на відповідній кнопці в Панелі завдань. Знайдіть тег у HTML-коді, який виводить назву в заголовок браузера.

7. Упишіть ваше прізвище та ім’я у вільний рядок між тегами <body> та </body>.

8. Збережіть змінений файл, натиснувши Ctrl+S у вікні текстового редактора.

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

10. Оформіть ваше прізвище та ім’я як заголовок першого рівня. Для цього впишіть у текстовому редакторі перед вашим прізвищем відкриваючий тег <h1>, після імені – закриваючий тег </h1> (кажуть, що текст обгорнули тегом <h1>).

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

12. Проведіть на сторінці горизонтальну лінію. Для цього впишіть у новому рядку після тегу </h1> тег <hr>.

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

14. Створіть гіперпосилання на сайт вашого закладу освіти. Для цього:

1. Упишіть у новому рядку після тегу <hr> назву вашого закладу освіти.

2. Обгорніть назву закладу тегом <a> (упишіть перед назвою тег <a>, після назви тег </a>).

3. Додайте до тегу <a> атрибут src і надайте йому значення – URL-адресу сайту вашого закладу освіти. Між тегом та атрибутом залиште пропуск, між атрибутом і його значенням поставте знак =, значення атрибуту візьміть у лапки.
Рядок може мати вигляд: <a href=ʺhttps://sites.google.com/site/stanislavzosh/ʺ> Станіславський ліцей ім К.Й. Голобородька </a>

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

16. Закрийте всі відкриті вікна.

3. Додайте створений текстовий документ та збережений файл Вправа 4.1.html у розділі Ваші роботи на платформі Google ClassRoom.

Опрацюйте

За підручником "Інформатика, 8 клас" (Й.Я. Ривкінд та інші):

• Прочитайте та розберіть теоретичний матеріал пункту 4.1 (стор. 105-109).

• Дайте усні відповіді на питання (стор. 109).

Перевірте свій рівень знань 

Скриншот результату тесту прикріпіть у розділі Ваші роботи на платформі Google ClassRoom): 

• Поняття про мову HTML. Тест 12 (Інформатика 8 клас Ривкінд)

• Поняття про мову гіпертекстової розмітки

Відео-інструкція в допомогу