 |
|
Пояснення нового матеріалу та виконання практичних вправ.
Тема: Поняття про мову розмітки, гіпертекстовий документ та його елементи.
Мета: ознайомити учнів з основними поняттями та конструкціями мови НТМL, почати формувати вміння та навички створення НТМL-документа;
розвивати пізнавальний інтерес, учнів творче ставлення до роботи;
виховувати культуру спілкування в колективі учнів.
Використане обладнання: комп’ютер; тестова оболонка з тестом; дошка; таблиці з основними поняттями; таблиця із структурою НТМL-документу;
Хід уроку
Актуалізація опорних знань. Перевірка вивченого матеріалу.
Для підтвердження балів, які ви поставили один одному, за засвоєння попереднього матеріалу проведемо тест. Відкривши тестову оболонку TEST-W, запустіть тест під назвою «Основи Інтернету», дайте відповіді на питання.(як користуватися даним тестом, учні знають, бо вже не раз його використовували).
Питання тесту (їх кількість невелика, розглянуті основні загальні питання).
1.Браузери є:
1. серверами Інтернету;
2. антивірусними програмами;
3. трансляторами мови програмування;
4. засобами перегляду веб-сторінок.
2.У середовищі WWW працюють за стандартом:
1. HTTP;
2. URL;
3. FTP;
3.Поняття гіпертекст вперше виникло:
1. у 60-х роках XVIIIст.;
2. у 60-х роках XX ст.;
3. у 45-му році XX ст.
4.WЕВ-сервери - це:
1. спеціалізовані комп’ютери з відповідним програмним забезпеченням;
2. сукупність WЕВ- сторінок;
3. організація-постачальник відповідних послуг.
5.Протокол передавання гіпертекстових документів - це:
1. FTR;
2. HTTP;
3. Mailto.
Тест виводить оцінку за знання матеріалу.
Мотивація навчальної діяльності.
- Які завдання ми з вами ставили на попередньому уроці?
(Одержати засіб для представлення власної інформації в Інтернеті)
- Зараз переглянемо веб-сторінки учнів, що створювали їх в попередніх роках. Через декілька уроків і ви зможете створити такі, а може, ще й кращі.
- Але для того, щоб створити Web-сторінку, необхідно знати мову гіпертекстової розмітки, тобто HTML. Сьогодні ми розпочинаємо вивчення цієї мови.
Повідомлення теми і мети уроку.
- Отже, тема уроку: «Створення структури HTML-документа. Знайомство з Web редактором.»
Наші завдання на уроці:
1. Познайомитись з історією мовиНТМL.
2. Познайомитись та запам’ятати основні поняття мови.
3. Навчитися створювати простіший НТМL - документ.
4. Створити документ, використовуючи теги вирівнювання та заголовків.
5. Виявити творчий підхід у роботі.
Пояснення нового матеріалу та виконання практичних вправ.
На попередньому уроці учням було дане завдання відшукати історичну довідку про створення мови HTML.
Учні діляться знайденою інформацією.
На початку мова розмітки була простою мовою. У 1994 році Міжнародна комісія зі стандартів Інтернет розробила стандарт HTML2.0. Невдовзі розробників Web-сторінок почали турбувати його обмеження. Фірми Netscape i Microsoft ввели власні коди, які надали ширші можливості в порівнянні з версією HTML2.0. У жовтні 1994 року засновано Консорціум WWW Consortium – некомерційну організацію, метою якої є розробка і реалізація стандартів HTML та WWW. До неї належить 165 комерційних та академічних організацій, у тому числі такі гіганти, як Netscape і Microsoft. Очолює консорціум – Тім Бернерс Лі.
Консорціум розробив стандарт HTML3.0. Це було зроблено без участі фірм Netscape і Microsoft, тому цей стандарт так і не був прийнятий. Тоді у травні 1996 року був розроблений стандарт HTML3.2, у який уже було включено більшість додаткових кодів, введених фірмами Netscape і Microsoft. Сьогодні розробниками використовується версія HTML4.0, робочий варіант якої було прийнято 8 червня 1997 року.
Мова HTML має певні переваги:
· документ, створений за допомогою деякої програми, часто важко, а іноді неможливо використати в іншій програмі; HTML у цьому відношенні є універсальною;
· HTML- це відкритий стандарт;
· HTML не є власністю якої-небудь фірми;
· можливість використання гіпертексту;
· HTML підтримує мультимедіа.
- Документи, написані мовою розмітки гіпертексту, називаються HTML-документи. Вони мають розширення *. html.
- Використовуючи дану версію мови HTML, ми повинні засвоїти основні поняття:
Дескриптор (тег) – основний елемент кодування. Дескриптори можна задавати як друкованими, так і прописними буквами. Теги обмежуються знаками « < » « > ».
Атрибути – це додаткові ключові слова, які відокремлюються від ключового слова, що визначає дескриптор, пропуском і розміщуються до символу « > ».
Робота з зошитом(додаток 1)
Всі HTML- документи мають однакову загальну структуру:
<HTML>
<HEAD>
<TITLE> назва веб-сторінки</TITLE>
</HEAD>
<BODY >
«Тіло» - вміст веб-сторінки
</BODY>
</HTML>
Контейнера
<HTML>...</HTML> - ознака HTML- документа
<HEAD>... </HEAD> - заголовок документу
<TITLE>...</TITLE> - служить для позначення назви документу і відображається на верхній рамці вікна броузера.
<BODY >...</BODY> - «тіло», визначає основну частину документа.
- Створити цю просту сторінку можна, наприклад, виконавши такий алгоритм: (додаток 2)
1. Запустити текстовий редактор Блокнот.
2. Ввести текст HTML - документа.
3. Зберегти під деяким іменем з розширенням *. Html. При збереженні.
4. Запустити програму Internet Explorer.
5. За допомогою меню «Файл –Відкрити» відкрити створений файл.
Інтерактивне навчання : учитель – учень, учень – комп’ютер.
Практичне завдання (додаток 3)
1. Створити в папці «Мої документи» папку вашого класу, створивши папку ВЕБ – Дизайн.
2. Виконайте всі пункти алгоритму створення веб-сторінки.
В тілі сторінки наберіть інформацію про себе за зразком: «Моя перша веб-сторінка».
3. Збережіть документ під іменем «Index.html» за правилами створення HTML-документу.
4. Відкрийте збережений документ із вашої папки.
5. Показати роботу вчителю.
- Ви побачите відображення вашої веб-сторінки браузером.
- Для того, щоб внести зміни в зовнішній вигляд вашої першої веб-сторінки, потрібно HTML- документ відкрити через ПКМ за допомогою текстового редактора Блокнот.
- Для того, щоб розташування тексту в документі було таким, як ви бажаєте, необхідно познайомитись ще з деякими тегами.
- Для виділення логічних частин тексту використовують заголовки (headings). Вони позначаються буквою Н. Цифра після букви вказує на рівень заголовка. Заголовки можна вирівнювати так, як і абзаци.
Розгляньте приклади використання заголовків на інструкції.
<h1 align=center>Диканська гімназія ім. М.В.Гоголя</h1>
< h2 align=left>Класи</h2>
< h3 align=right>10 класи</h3>
< h4 align=left>10-А</h4>
< h5 align=right>10-Б</h5>
- Давайте удосконалимо наші сторінки, використовуючи заголовки.
- Відкрийте свій HTML- документ і відредагуйте його за зразком.
<HTML>
<HEAD>
<TITLE> Моя сторінка</TITLE>
</HEAD>
<BODY >
<h2 align=center>Привіт! Ви завітали на мою домашню сторінку! </h2>
<br>
<h3> Моя школа</h3>
<p> Я навчаюся в Диканській гімназії ім. М.В.Гоголя</p>
< р align=left>Я навчаюся в 11-А класі Диканській гімназії
ім. М.В.Гоголя </р>
<br>
<hr>
</BODY>
</HTML>
- Збережіть зміни в документі. Поновіть інформацію у вікні браузера.
- Вам подобається те, що ви одержали? Якщо ні, то проекспериментуйте із вирівнюванням та заголовками і виберіть найбільш естетичний варіант.