РОЗДІЛ IV

СТВОРЕННЯ ТА ПУБЛІКАЦІЯ ВЕБРЕСУРСІВ

 

Чи є HTML мовою програмування?

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

Гіпертекст — це транслітерація англійського слова hypertext, що в буквальному перекладі означає «більше ніж текст».

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

Завдання № 1

Розглянь приклад вебсторінки та назви об'єкти, які на ній розташовані.

Прочитай текст на вебсторінці та спробуй пояснити, чому число 256 тісно пов'язане з комп'ютерами (згадай першу тему).

Завдання № 2

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

• Який вигляд має тег в HTML-коді? Якими символами починається і закінчується тег?

• Які теги є в наведеному HTML-коді? Якому об'єкту вебсторінки відповідає кожен із тегів?

• Що таке парні та непарні теги? Які з тегів у наведеному коді є парними, а які — непарними?

• Чим відрізняються дії тегів <р> та <Ьг>?

• Кожен із тегів у даному коді, крім тегу <а>, містить літери якогось англійського слова, що пояснює його дію. Спробуй здогадатися, з якими словами пов'язані теги <img>, <р>, <Ьг>.

Завдання № З

Щоб зробити вебсторінку з попередніх завдань гарнішою, у її HTML-код внесли деякі зміни. Уважно проаналізуй, що змінилося в HTML-коді та як ці зміни вплинули на вигляд готової вебсторінки. Спробуй дати відповіді на запитання самостійно або скористайся рубрикою «Запитання-відповіді».

• Які нові теги було додано? Яке їх призначення?

• Як називаються атрибути тегу <font>, що визначають колір та розмір тексту?

• Які атрибути інших тегів є в цьому HTML-коді?

• Де записують атрибути тегу? Який символ розділяє назву та значення атрибута?

• Що означають англійські слова, використані в назвах доданих тегів та атрибутів: title, font, color, size?

• Спробуй здогадатися, з якими англійськими словами пов'язані скорочення src та href.

Завдання №4

Створи вебсторінку з інформацією про себе. На цій сторінці має бути:

• не менше двох абзаців тексту;

• текст різного розміру та різного кольору;

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

• зображення;

• посилання на інший веб-ресурс(наприклад, на сайт твого улюбленого музичного гурту, на сайт школи чи Youtube-канал).

Щоб виконати завдання, можеш скористатися Блокнотом, редактором Notepad++ або будь-яким онлайновим вебредактором.

Увага!

Щоб зображення відобразилося на вебсторінці, його потрібно розмістити в тій самій папці, що і саму вебсторінку. А в значенні атрибута src потрібно вказувати не лише ім'я, а й розширення імені файлу зображення, наприклад jpg або png.

ЗАПИТАННЯ-ВІДПОВІДІ

Що таке HTML?

За допомогою мови HTML (англ. Hyper Text Markup Language — мова розмітки гіпертекстових документів) описують, де які об'єкти розміщуватимуться на вебсторінках. Документ HTML обробляється браузером та відтворюється на екрані у зручному для людини вигляді.

Як виникла мова розмітки гіпертексту?

HTML винайшов британський науковець Тім Бернерс-Лі для впорядкування документації Женевської лабораторії ядерної фізики. Він же розробив перший браузер для цієї мови. На початку 1990-х років відбувалися дискусії щодо того, що перспективніше: текстова система gopher, яка на той час була панівною у мережі, чи красива «іграшка» HTML, яка могла містити зображення, кольори тощо. Зрештою вибір користувачі зробили на користь яскравого гіпертексту, а інші сервіси майже зникли.

Що таке теги та атрибути?

Тег — це основний елемент мови HTML. Теги визначають спосіб розташування або форматування об'єктів на вебсторінці. Тег розміщується між символами < та >.

Атрибути — це елементи тега, що містять вказівки про те, як браузер має опрацьовувати тег. Атрибут записується після імені тега і складається, як правило, з пари: ім’я атрибута = "значення". Значення атрибута беруть у лапки, але в багатьох випадках їх можна і не ставити.

Що таке парні та непарні, відкривні та закривні теги?

Деякі теги записують парами, наприклад <р>...</р> або <title>...</title>. Перший тегу парі називається відкривним, другий — закривним. Закривні теги починаються із символів </ і не містять атрибутів. Закривний тег позначає кінець елемента вебсторінки, що починається з відповідного відкривноготегу.

Які теги ми сьогодні вивчили?

Тег	Призначення
	Посилання. Об'єкт, що буде посиланням (на якому можна клацнути мишею), розміщується міжтегами <а> та </а>. Це може бути текст, зображення та ін.
	Абзац тексту. До і після абзацу додаються відступи
	Форматування шрифту
	Заголовки рівнів 1, 2, 3 тощо. Текст усередині такої пари тегів відображається великим жирним шрифтом. Що більший рівень, то менший шрифт
	Назва вебсторінки, що відображається не на самій сторінці, а на вкладці вікна браузера
	Додавання зображення
	Розрив рядка тексту без закінчення абзацу

Які атрибути ми сьогодні вивчили?

Як створити вебсторінку?

Для цього можна скористатися як спеціалізованим редактором веб-сторінок, так і будь-яким текстовим редактором, зокрема Блокнотом або вільнопоширюваною програмою Notepad++ (notepad-plus-plus. org/). Перевага Notepad++ над Блокнотом полягає в тому, що теги та атрибути підсвічуються спеціальними кольорами.

У Блокноті	У Notepad ++
1. Ввести HTML-код вебсторінки. 2. Вибрати меню ФайлХЗбе-регти як... 3. Вибрати в меню Тип файлу пункт Всі файли. 4. Ввести ім'я файлу, а після нього ввести .html (наприклад, index.html).	1. Створити новий файл. 2. Вибрати меню ФайлХЗберег-ти як... 3. Вибрати в меню Тип файлу пункт Hyper Text Markup Language file і натиснути кнопку Зберегти. 4. Ввести HTML-код вебсторінки і зберегти її кнопкою |§ .

Після створення слід двічі клацнути файл вебсторінки — і вона відкриється в браузері. Якщо ти вносиш зміни в HTML-код, збережи його, а в браузері натисни F5, щоб оновити вигляд вебсторінки.

ПЕРЕВІР СЕБЕ

1. Поясни, для чого призначені перелічені нижче теги та атрибути.

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

3. На створену в завданні 4 сторінку додай кілька зображень, що стосуються твоїх хобі. Зроби кожне з них посиланням на доречний ресурс Інтернету.

4. Чи є HTML мовою програмування? Обґрунтуй свою відповідь.

 

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