§ 9. Розмічання тексту засобами HTML | 8 клас | Бондаренко

Відео демонструє виконання вправи з розмічання тексту HTML для 8 класу за підручником Бондаренка, пояснюючи основи створення HTML-документа.

Key Takeaways

HTML-документ має чітку структуру з тегами html, head, title і body.
Для зміни кольорів сторінки використовують атрибути bgcolor та text у тегі body.
Нумеровані списки створюються за допомогою тегів ol і li, а атрибут start дозволяє змінити початок нумерації.
Використання тегів форматування, таких як b, допомагає змінювати стиль тексту.
Навички роботи з простим редактором блокнот корисні для розуміння основ HTML.

What the video covers

Огляд вправи 9 з параграфа 9 підручника інформатики 8 класу авторського колективу Бондаренко.
Використання блокнота як текстового редактора для створення HTML-документа.
Покрокове створення структури HTML з тегами html, head, title, body.
Збереження файлу з розширенням .html та кодуванням UTF-8.
Додавання заголовка сторінки між тегами title і перевірка відображення у вкладці браузера.
Зміна кольору фону сторінки через атрибут bgcolor тега body.
Встановлення кольору тексту через атрибут text тега body.
Створення нумерованого списку з тегами ol та li, включно з атрибутом start для початку нумерації з потрібного числа.
Оформлення тексту напівжирним шрифтом за допомогою тега b.
Додавання другого списку з усіма днями тижня та рекомендації щодо вибору кольорів.

Chapters

Full Transcript — Download SRT & Markdown

Speaker A

Виконаємо вправу дев'ять до параграфа дев'ять за підручником інформатика восьмий клас авторського колективу Бондаренко, Листовецьке, Пилипчук, Чостопав 2025 року випуску.

Speaker A

Відкриємо текстовий редактор блокнот. Хоча, як на мене, при виконанні даної вправи ви можете використовувати і спеціалізовані HTML-редактори.

Speaker A

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

Speaker A

Запишемо структуру HTML-документа.

Speaker A

Спочатку теги HTML. Ну, я вам рекомендую зразу писати закриваючі теги, щоб про них не забути.

Speaker A

Для зручності читання HTML-розмітки зробимо відступ. Для цього натиснемо клавішу Tab на клавіатурі.

Speaker A

Тег head, між тегами head тег title, тег головка і тег body — тіло документа.

Speaker A

Тепер збережемо. Для цього виконаємо файл, зберегти або зберегти як. Перший раз взагалі-то немає різниці.

Speaker A

Збережемо у власній папці. Називаємо вправа дев'ять.

Speaker A

І що важливо, зверніть увагу, що потрібно також прописати розширення. Пишемо крапка HTML без пропусків після крапки.

Speaker A

Ось так має бути записано. Кодування UTF-8 за замовчуванням є. Так, його і залишаємо. Зберегти.

Speaker A

Тепер відкриємо власну папку. І бачите, ось тільки що створений файл має значок браузера, тобто він буде відкриватися в браузері. Ну, в мене в Гуглі.

Speaker A

Поки що в нас тут порожньо. Ну, а тепер давайте щось додамо в тіло документа. Хоча ні, спочатку запишемо заголовок.

Speaker A

Ну, це в нас дев'ята вправа. То так і запишемо — вправа дев'ять. Збережемо файл, зберегти.

Speaker A

І тепер оновимо сторінку браузера. Зверніть увагу, ось тут на вкладці вже написано вправа дев'ять, тобто те, що ми пишемо між тегами title, відображається нам у вкладці.

Speaker A

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

Speaker A

Для цього для тега body допишемо атрибут. Щоб змінити колір фону сторінки, атрибут використовуємо bgcolor, background color.

Speaker A

Пишемо дорівнює подвійні лапки. І в подвійних лапках пишемо колір фону. У нас буде синій, значить, пишемо blue.

Speaker A

Хотіли б, щоб був червоний, писали б червоний, тобто red. Давайте збережемо. Оновимо. Так стало синім.

Speaker A

Тепер текст у нас має бути жовтого кольору. Пишемо атрибут text і колір жовтий, тобто yellow англійською.

Speaker A

Ну, зараз у нас тексту немає. Через це ми не зможемо перевірити, чи у нас жовтий.

Speaker A

Ну а тепер додамо сам текст. Текст пишемо між тегами body, зробили відступ для зручності.

Speaker A

І у нас текст має бути оформлений як список нумерований. Значить, використовуємо тег OL. Зразу пишу закриваючий тег.

Speaker A

Між тегами OL потрібно записати елементи списку. А для цього використовуємо тег LI. Нам ще потрібно буде два таких теги, два елементи списку, тому я скопіюю і вставлю, щоб було швидше.

Speaker A

Тепер у нас буде тут вівторок, середа, четвер. Нам потрібно вивести. Тепер зберігаємо і оновлюємо.

Speaker A

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

Speaker A

Отже, до тегу OL дописуємо атрибут start і в подвійних лапках пишемо, з якого числа буде розпочинатися список, тобто два.

Speaker A

Зберігаємо, оновлюємо. Тепер все добре. Хоча, якщо я подивлюся на зразок, то що у вправі підручнику, мені здається, що ось тут накреслення напівжирне.

Speaker A

Давайте зробимо накреслення напівжирне. Для цього скористаємося тегом B. Обгортаємо це все в тег B.

Speaker A

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

Speaker A

Ну, але так зручніше читати, що ми зробили. Так, тепер зроблено ось так. Мені здається, так краще, так як на зразку.

Speaker A

Ну і тепер в останньому пункті пропонується доповнити код сторінки так, щоб внизу з'явився список, який містить усі дні тижня.

Speaker A

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

Speaker A

Перевіряємо. Все добре. Ну і ще сказано: кольори доберіть на свій розсуд. І незрозуміло, чи потрібно це зафарбувати в різний колір ще, чи не потрібно.

Topics:HTMLрозмітка текстуінформатика 8 класпідручник Бондаренкостворення HTML-документатеги HTMLнумерований списоккольори в HTMLблокнотвправи з HTML

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries and speaker detection. 30 minutes free.

App Store Google Play

Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools