Урок 49. Поняття мови розмітки гіпертексту

Цілі:
  • навчальна:  сформувати уявлення про метод і засоби створення гіпертексту на сторінках сайта;
  • розвивальна:  розвивати логічне мислення; формувати вміння діяти за інструкцією, планувати свою діяльність, аналізувати i робити висновки;
  • виховна:  виховувати інформаційну культуру учнів, уважність, акуратність, дисциплінованість.
Тип уроку: засвоєння нових знань; 
Хід уроку
І. Організаційний етап
ІІ. Актуалізація опорних знань
Фронтальне обговорення понять: гіпертекст, веб-сторінка.
ІІІ. Оголошення теми та мети уроку. Мотивація навчальної діяльності
Слово вчителя. Можна купити в магазині картину чи репродукцію, а можна спробувати створити власну, можна придбати красиву сукню, а можна пошити її чи перешити за власним смаком і уподобаннями, можна створити сайт із використанням готового шаблону, а можна власноруч розробити веб-сторінки так, щоб ваш сайт став оригінальним і неповторним. Яким же чином, із використанням яких засобів і методів можна розміщати і редагувати текстові об’єкти на вебсторінках, ви дізнаєтеся на уроці.
IV. Вивчення нового матеріалу
Який вигляд має код розмітки веб-сторінки мовою HTML?
Типова проста веб-сторінка складається з текстових блоків (абзаців, списків, таблиць), кількох малюнків невеликих розмірів, горизонталь­них розмежувальних ліній та гіперпосилань. Більш складні веб-сторінки містять структуровані сторінки, які називають фреймами, елементи управ­ління (кнопки, перемикачі, поля введення), динамічні ефекти та графіч­ні рухомі об’єкти тощо.
Згідно із чинним стандартом абзаци на веб-сторінці розмежовуються порожнім рядком і не мають відступів у першому рядку. Абзац може бути вирівняний за одним із країв або по центру екрана. Браузер автоматично масштабує горизонтальне відображення різних елементів сторінки, враховуючи характеристики монітора комп’ютера користувача й розміри вікна, у якому демонструється веб-сторінка.
Крім текстових даних веб-сторінка містить невидимий для користу­вача HTML-код, тобто набір тегів — команд, що визначають розмітку документа. Під час відкриття веб-сторінки браузер використовує цей набір для відображення її елементів у заданій розмітці.
Назва кожного тега — це одна або декілька літер, взятих у кутові дуж­ки (< та >), яким відповідають певні англійські слова, що пояснюють їхнє призначення. Наприклад, назва тега <BODY> виникла від англійського слова body — тіло, головна частина, а сам тег використовується для ство­рення вмісту веб-сторінки.
Тег записують так: <Тег>...текст... </Тег>.
Відкриваючий тег <Тег> позначає місце початку дії тега на сторінці, текст — фрагмент тексту, до якого буде застосовано форматування, за­криваючий тег </Тег> визначає місце закінчення дії тега на сторінці. Пару тегів (відкриваючий і закриваючий) називають контейнером. За­криваючий тег відрізняється від відкриваючого лише тим, що в коді пе­ред його іменем ставиться символ «/». Більшість тегів є парними, однак є й одинарні.
Один тег може мати кілька параметрів — атрибутів. Наприклад,
<Тег параметр_1= значення_1 параметр_2=значення_2 >...текст, що відображається на сторінці... </Тег>.
Закриваючий тег не містить жодних параметрів, а лише вказує на місце закінчення дії контейнера. На відміну від нього у відкриваючому тегу вказуються всі необхідні параметри.
Правила запису параметрів: після назви тега після пропуску зазнача­ється ім’я параметра (наприклад, ALIGN — ім’я параметра, який вказує на спосіб вирівнювання тексту), далі зазначають «=» й у лапках запису­ють значення параметра (наприклад, ALIGN= «center»). За необхідності далі вказують інші параметри через пропуск. Після останнього параме­тра ставлять символ >.
Теги можуть бути вкладеними, тобто один контейнер може перебува­ти всередині іншого, тоді загальний запис виглядатиме так:
<Тег1>...текст...<Тег2>...текст... </Тег2>...текст... </Тег1>. Для підготовки найпростішого htm-файла можна використати тексто­вий редактор Блокнот, після написання коду в якому слід задати ім’я файла та вказати розширення — htm.
Наприклад, щоб отримати веб-сторінку, як показано на малюнку, потрібно набрати код.
<HTML>
<HEAD>
<TITLE> Найпростіша веб-сторінка </TITLE>
</HEAD>
<BODY>
Ця сторінка створена за допомогою простих тегів </BODY>
</HTML>
Зрозуміло, що веб-сторінка реального сайта матиме такі самі складові коду, однак набагато більше тегів і їхніх параметрів. Щоб переглянути цей код, потрібно в меню браузера обрати вказівку Перегляд HTML-коду.
Які засоби використовують для створення веб-сайта?
Процес створення статичних веб-сторінок, з яких може складатися сайт, фактично полягає в розмітці гіпертекстових документів, що здій­снюється за допомогою мови розмітки. Розмітка гіпертексту не залежать від браузера, у середовищі якого відображається веб-сторінка. Тому одні й ті самі гіпертекстові документи можуть по-різному відображатися за допомогою різних браузерів, хоча для більшості простих документів їх­ній вигляд буде подібним.
Створювати веб-сторінки можна за допомогою звичайного текстового редактора або спеціального HTML-редактора.
Текстові редактори (наприклад, Блокнот) дають змогу, знаючи при­значення та опис тегів мови розмітки, створювати веб-сторінки «вручну», без автоматизації. Для прискорення цього процесу до текстових проце­сорів було додано спеціальні функції, які дають можливість вставляти гіперпосилання до тексту та зберігати документ у форматі HTML. Крім того, є спеціальні програми — HTML-редактори, які дають змогу автома­тизувати цей процес. Такі програми належать до засобів автоматизованої розробки веб-сайтів.
Усі HTML-редактори можна поділити на дві категорії: текстові й гра­фічні. Перші передбачають набір коду вручну, хоча й зі значною автома­тизацією цього процесу. Їхні інструменти дають змогу автоматизовано вставляти до документа потрібні теги його розмітки. Здебільшого теги не містять додаткових параметрів форматування об’єкта, а лише вказують браузеру, який саме спосіб форматування застосований. Тому веб- сторінка, створена за допомогою такого редактора, має простий вигляд.
У графічних HTML-редакторах веб-сторінки формуються приблизно в такий самий спосіб, як і під час створення макетів звичайних документів, коли користувач може обрати потрібний йому шаблон веб-сторінки, а по­тім поступово його заповнювати текстом, малюнками й зображеннями, гіпертекстовими посиланнями, таблицями та спеціальними додатковими елементами. При цьому шаблон такої сторінки передбачає вбудовані засо­би навігації. Зрозуміло, що такий документ також має HTML-формат, і за потреби його можна переглянути в середовищі звичайного текстового ре­дактора типу Блокнот і, знаючи мову HTML (часто говорять HTML-код), вручну вносити до нього потрібні зміни.
V.  Інструктаж з ТБ
VI. Засвоєння нових знань, формування вмінь
Виконання практичного завдання.
  • Вправа 1 ст.199
  • Вправа 3 ст.203
VІІ. Підсумки уроку
  • Виставлення оцінок.
Провести опитування учнів з наступних питань:
  • сьогодні я дізнався...
  • було цікаво....
  • було важко...
  • я зрозумів, що...
  • тепер я можу...
  • я відчув, що...
  • я навчився...
  • у мене вийшло...
  • я зміг...
  • я спробую...
  • мене здивувало...
  • мені захотілося...
VІІI. Домашнє завдання
Підручник п. 29.5-29.6    ст. 197-199
IХ.  Оцінювання роботи учнів