Урок 21.
Інструктаж з БЖД. Поняття мови розмітки гіпертексту.
Мета уроку:
Навчальна: формування поняття «мова розмітки гіпертексту» та її призначення; ознайомлення учнів з основними тегами для створення чи редагування тексту на веб-сторінці; формування основних навичок роботи з онлайн-системами конструювання сайтів;
розвивальна: розвиток оперативної та механічної пам’яті; наочно-дійового та дослідницького мислення, вміння концентрувати увагу; прищеплення навичок структурного сприйняття; розвиток творчої уяви;
виховна: формування усвідомлення особистої відповідальності за власні дії під час роботи в мережі Інтернет; заохочування до пізнавання нового, до творчої праці; виховання критичного ставлення до результатів власної роботи; сприяння розвитку вмінь естетичного оформлення власного Інтернет-ресурсу;
Очікувані результати: учень уміє пояснити поняття «мова розмітки гіпертексту» та її призначення; описати основні теги для створення чи редагування тексту на вебсторінці; застосувати основні навички роботи з онлайн-системами конструювання сайтів; адмініструвати веб-сайт, опублікований на безкоштовному сервері; засобами безкоштовного веб-сервера створювати вміст веб-сайту й оновлювати його.
Вивчення нового матеріалу
22_Мова гіпертекстової розмітки.pptxМіні-конспект
Дизайн веб-сайта — це кропітка робота, яка спирається на знання основних понять дизайну (тобто понять точки, лінії, текстури, фактури, форми, кольору, пропорції, композиції, симетрії, асиметрії, рівноваги, динаміки, ритму, гармонії, контрасту, колориту, перспективи, центру мас), використання правил ергономіки (науки, яка вивчає робочі процеси з метою створення оптимальних умов праці, що сприяють підвищенню її продуктивності, а також зберігають сили, здоров’я, працездатність людини) та врахування основних складових веб-дизайну.
Типова проста веб-сторінка складається з текстових блоків (абзаців, списків, таблиць), кількох малюнків невеликих розмірів, горизонтальних розмежувальних ліній та гіперпосилань. Більш складні веб-сторінки містять структуровані сторінки, які називають фреймами, елементи управління (кнопки, перемикачі, поля введення), динамічні ефекти та графічні рухомі об’єкти тощо.
Крім текстових даних веб-сторінка містить невидимий для користувача HTML-код, тобто набір тегів — команд, що визначають розмітку документа.
Назва кожного тега — це одна або декілька літер, взятих у кутові дужки (< >), яким відповідають певні англійські слова, що пояснюють їхнє призначення.
Тег записують так: <Тег>...текст...</Тег> .
Пару тегів (відкриваючий і закриваючий) називають контейнером.
Закриваючий тег відрізняється від відкриваючого лише тим, що в коді перед його іменем ставиться символ «/».
Більшість тегів є парними, однак є й одинарні.
Створювати веб-сторінки можна за допомогою звичайного текстового редактора Блокнот або спеціального HTML-редактора.
Для створення найпростішого htm-файла у Блокноті після написання коду слід задати ім’я файла та вказати розширення — htm.
Міні-конспект
Один тег може мати кілька параметрів — атрибутів.
Після назви тега після пропуску зазначається ім’я параметра (наприклад, ALIGN — ім’я параметра, який вказує на спосіб вирівнювання тексту), далі зазначають «=» й у лапках записують значення параметра (наприклад, ALIGN= «center»). За необхідності далі вказують інші параметри через пропуск. Після останнього параметра ставлять символ >.
Працюємо самостійно
Завдання 1. Створіть найпростішу веб-сторінку Моя перша сторінка за допомогою Блокнота
1. Запустіть текстовий редактор Блокнот та наберіть код (малюнок 2).
2. Збережіть документ з назвою Моя перша сторінка_Прізвище ім'я.htm в папку Сайти у власній структурі папок.
Завдання 2. Відформатуйте тло веб-сторінки Моя перша сторінка.
1. Відкрийте документ Моя перша сторінка_Прізвище ім'я.htm в середовищі текстового редактора Блокнот.
2. Відредагуйте код за зразком (малюнок 5).
Кольори можно прописувати за допомогою шістнадцяткового коду (наприклад, зелений колір тексту text=”#00FF00”).
4. Відформатуйте свою сторінку за власним смаком. Для визначення кольору скористайся матеріалами Вікіпедії.
