Навчальна: формування поняття «мова розмітки гіпертексту» та її призначення; ознайомлення учнів з основними тегами для створення чи редагування тексту на веб-сторінці; формування основних навичок роботи з онлайн-системами конструювання сайтів; 

розвивальна: розвиток оперативної та механічної пам’яті; наочно-дійового та дослідницького мислення, вміння концентрувати увагу; прищеплення навичок структурного сприйняття; розвиток творчої уяви; 

виховна: формування усвідомлення особистої відповідальності за власні дії під час роботи в мережі Інтернет; заохочування до пізнавання нового, до творчої праці; виховання критичного ставлення до результатів власної роботи; сприяння розвитку вмінь естетичного оформлення власного Інтернет-ресурсу;

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

Міні-конспект 

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

Тег записують так: <Тег>...текст...</Тег> . 

Пару тегів (відкриваючий і закриваючий) називають контейнером. 

Закриваючий тег відрізняється від відкриваючого лише тим, що в коді перед його іменем ставиться символ «/». 

Більшість тегів є парними, однак є й одинарні. 

Міні-конспект

Один тег може мати кілька параметрів — атрибутів. 

Після назви тега після пропуску зазначається ім’я параметра (наприклад, ALIGN — ім’я параметра, який вказує на спосіб вирівнювання тексту), далі зазначають «=» й у лапках записують значення параметра (наприклад, ALIGN= «center»). За необхідності далі вказують інші параметри через пропуск. Після останнього параметра ставлять символ >. 

Завдання 1. Створіть найпростішу веб-сторінку Моя перша сторінка за допомогою Блокнота

1. Запустіть текстовий редактор Блокнот та  наберіть код (малюнок 2).

 2. Збережіть документ з назвою Моя перша сторінка_Прізвище ім'я.htm в папку Сайти у власній структурі папок. 

Завдання 2. Відформатуйте тло веб-сторінки Моя перша сторінка.

1. Відкрийте документ Моя перша сторінка_Прізвище ім'я.htm в середовищі текстового редактора Блокнот. 

 2. Відредагуйте код за зразком (малюнок 5). 

3. Перевірте чи відповідає документ зразку.

Кольори можно прописувати за допомогою шістнадцяткового коду (наприклад, зелений колір тексту text=”#00FF00”).

4. Відформатуйте свою сторінку за власним смаком. Для визначення кольору скористайся матеріалами Вікіпедії.