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

Тема:  Поняття про мову розмітки гіпертексту – HTML.

Мета: сформувати вміння та навички в учнів при створенні HTML-документів; ознайомити їх з основними тегами HTML, які використовуються для оформлення Web-сторінок; навчити редагувати введені дані; виховати наполегливість, спостережливість, розвинути логічне та абстрактне мислення.

Тип: Комбінований урок.

Вид: Пояснення нового матеріалу.

План уроку

1.     Поняття про мову розмітки гіпертексту – мову HTML

2.     HTML – файли.

3.     Коди (теги) мови HTML. Структурні теги.

4.     Оформлення тексту у Web-документі

Хід уроку

І. Організаційна частина.

-         Добрий день, діти!

-         Сідайте, будь ласка!

-         Хто сьогодні черговий?

-         Хто сьогодні відсутній?

-         Хто сьогодні не готовий до уроку?

ІІ. Актуалізація опорних знань.

Задаю учням запитання по попередній темі.

      1. Що таке гіпертекст ?

(Гіпертекст – об’єднання тексту, об’єктів мультимедіа та посилань на інші тексти)

2. Що таке WWW ?

(Система гіпертекстового подання інформації для використання її в Інтернеті)

3. Що таке пошуковий сервер ?

(Пошуковий сервер – Web – сервер, на якому знаходиться програма пошуку інформації з будь-якої тематики)

4. Які ви знаєте пошукові системи ?

    (Yahoo! , Rambler, AltaVista, Яndex, Apport)

5. Які можливості надає сервер пошуку Aport?

 (Дозволяє використовувати при пошуку логічні поєднання з операторами + або – із ключових слів.)

6. Як проводиться чат в Internet?

 7. Які існують варіанти пошуку ?

(Шляхом вводу url-адреси пошукового сервера або за допомогою кнопки „Поиск” в середовищі Internet Explorer)

8. Для чого призначені програми-броузери?

(Перегляду Web-сторінок, для роботи з файлами і папками, відображення на екрані тексту, графіки звуку, анімації, відео тощо.)

ІІІ. Вивчення нового матеріалу.

Ви пам’ятаєте нещодавно ми з вами розглядали web-сторінки.Ви також могли спостерігати, як ці сторінки по різному оформлені. Я думаю кожен з вас хотів би знати, як же створюються web-сторінки? А створюються вони дуже просто. І ви в цьому незадовго переконаєтесь. Справа в тому, що ці сторінки створюються за допомогою мови розмітки гіпертексту – мови HTML.

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

Тема: Мова розмітки гіпертексту – HTML.

План уроку

1.     Поняття про мову розмітки гіпертексту – мову HTML

2.     HTML – файли.

3.     Коди (теги) мови HTML. Структурні теги.

4.     Оформлення тексту у Web-документі.

1. Поняття про мову розмітки гіпертексту – мову HTML

Назва мови HTML (вимовляється „ейч-ті-ем-ель”) – це абревіатура англійських слів: HyperText Markup Language. Відкрийте зошити і запишіть

Мова HTML – це мова розмітки гіпертексту.

 Мова HTML була розроблена для того, щоб створюючи документ, можна було не думати про різницю програмного і апаратного забезпечення комп’ютерів. А саме створення системно- незалежних файлів дуже актуально, бо комп’ютерна мережа об’єднує принципово різні комп’ютерні системи – такі як Macintosh, IBM тощо. Мова HTML дуже проста у використанні, але потребує від працюючого дотримання строгих правил.

Мова HTML розроблена спеціально для Web. Її популярність забезпечують, зокрема, такі її властивості:

·        Документ, створений за допомогою деякої програми, наприклад, за допомогою текстового редактора, часто важко (а іноді й неможливо) використовувати в іншій програмі; HTML в цьму відношенні є універсальним;

·        HTML – це відкритий стандарт;

·        HTML не є власністю якої-небудь фірми;

·        Можливість використання гіпертексту;

·        HTML підтримує мультимедіа.

Після того, як з допомогою мови HTML буде створено HTML-файл, ви зможете, використовуючи будь-який броузер, відобразити цей файл у вигляді Web-документа. Запишіть у зошитах

HTML-файл – текстовий файл, який має розширення .htm.

Якщо в системі дозволено використовувати довгі розширення, то, як  правило, HTML-файл має розширення .html. Тестуються HTML-файли за допомогою будь-якого броузера. Ми з вами будемо тестувати їх за допомогою броузера Internet Explorer.

Мова HTML складається із спеціальних розміточних вказівників, іноді їх називають ’флаги розмітки’, але частіше – теги (від англійського слова tag). Можна їх також називати командами або кодами HTML.

Запишіть в зошити слідуюче означення

Тег – інструкція броузеру, яка вказує спосіб відображення тексту. Тег завжди починається знаком (<), а закінчується знаком (>). Існує два типи тегів: парні та непарні.

 Парний тег краще всього порівнювати з дужками алгебраїчного виразу. Парний тег впливає на текст з того місця, де був вжитий, до того місця, де вказана ознака закінчення його дії, а ним служить той самий тег, але який починається символом (/). Крім того, теги діляться на категорії по виконуваними ними функціями – структурні теги, теги форматування абзаців, символів, визначення гіперпосилань, включення графіки і ін.

Для опису структури HTML-файлу використовують слідуючи 4 парних теги:

	<HTML></HTML> - вказує броузеру, що далі слідує HTML-файл <HEAD></HEAD> - всередині цього тега повинен                                       знаходитись заголовок документа <TITLE></TITLE> - тег заголовку вікна <BODY></BODY> - всередині цього тега пишеться те, що буде доступним в області перегляду броузера

 

Під час показу плаката детально пояснюю учням значення кожного тегу.

<HTML></HTML> - вказує броузеру, що далі слідує HTML-файл. Цей тег ніби „обрамлює” документ – увесь текст повинен знаходитись всередині цього тегу.

Далі потрібно розбити документ на дві частини – заголовок і власне текст.                                                                                                    <HEAD></HEAD> - всередині цього тега повинен знаходитись заголовок документа, який складається з декількох частин, основною з яких є заголовок вікна.

<TITLE></TITLE> - тег заголовку вікна.

Він пишеться всередині тега HEAD. Заголовок вікна пишеться тільки латинськими літерами.

<BODY></BODY> - всередині цього тега пишеться те, що буде доступним в області перегляду броузера. Цей тег може мати декілька параметрів, які описують колір фону вікна перегляду, малюнок у ньому, колір тексту і т.д.

Існує безліч програмних продуктів, полегшуючих роботу по створенню HTML-файлів. Усі засоби роботи з HTML діляться на три категорії:

Ø редактори тегів;

Ø шаблони;

Ø програми-перетворювачі.

При використанні шаблонів і програм-перетворювачів користувачу не потрібно навіть мати уявлення про те, що таке теги. Проте мова HTML постійно розвивається і збагачується новими можливостями. Маючи початкові знання про теги, користувач постійно може їх легко розширювати та поглиблювати, вивчаючи і аналізуючи Web-сторінки, які йому сподобалися. Таким чином вивчення HTML-файлів, використовуючи редактори, має зміст.

Редакторів для створення Web-документів багато. Найбільш відомими є: HTMLWriter, HTMLAssistant, HTMLed, HTML HyperEdit та ін.

А зараз перейдемо до розгляду оформлення тексту у Web-документах і вивчимо теги форматування символів.

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

Заголовки використовують для найменування частин документа і також змінюють його загальний вигляд. Встановивши горизонтальний роздільник,

можна зробити визначений акцент на тій чи іншій частині тексту документу.

Мова HTML дозволяє створювати добре структуровані документи. За допомогою тегів, які представлені на плакаті.

Тег	Коментарій
<P>	Тег „Параграф”, відділяє абзаци один від одного, ставиться в кінці абзацу
<BR>	Слідуючий за цим тегом зміст HTML-файла буде просто починатися з нової стрічки
<HR>	Цей тег вказує на те, що броузер повинен відобразити горизонтальну лінію, що йде через весь екран
<PRE></PRE>	За допомогою цього тегу вставляться попередньо відформатований текст
<H1></H1>	Тег, який визначає заголовок документа. Після букви H вказується вид заголовка від 1 до 6. Чим більша цифра, тим менший шрифт заголовку

 Броузер знищує всі зайві прогалини між словами. Якщо використовувати тег <PRE>, то можна ввести текст, відображений шрифтом фіксованої ширини, наприклад таблицю.

В будь-якому тексті виникає потреба виділити деякі символи, слова, вирази.

Для цього використовуються слідуючі теги: (демонструю плакат)

Тег	Коментарій
<B></B>	Текст, поміщений в цей тег, буде відображено жирним шрифтом
<I></I>	Текст, поміщений в цей тег, буде відображено курсивом
<U></U>	Текст, поміщений в цей тег, буде відображено підкресленим шрифтом
<LI>	Цей тег використовується для представлення списку – індексу
<OL></OL>	Цей тег використовується для представлення інформації у вигляді пронумерованого списку
<UL></UL>	Цей тег відображає невпорядковані списки у вигляді послідовності помічених елементів
<DL></DL>	Тег для введення списку означень або словника термінів

Коментую кожен тег окремо і після цього пропоную учням записати інформацію з плакатів в зошити.

Крім того існують теги, які дозволяють вирівнювати текст по центру екрана (<CENTER></CENTER>), по лівому(<LEFT></LEFT>) та по правому(<RIGHT> </RIGHT>) краю екрана.

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

ІV. Закріплення вивченого матеріалу.

А зараз ознайомимось з технологією оформлення Web-документів:

Варіант-І

1. Увійдіть у текстовий редактор WordPad або Блокнот;

2. Наберіть такий текст:

<HTML>

<HEAD>

<TITLE> Моя перша Web-сторінка </TITLE>

</HEAD>

<BODY>

Це мій перший HTML-документ.

</BODY>

</HTML>

3. Збережіть файл як текстовий під іменем first.htm.

4. Відкрийте цей файл у вікні браузера Internet Explorer. Для цього ввійдіть в Internet Explorer, виберіть команду Открыть меню Файл і скористайтеся кнопкою Обзор для пошуку файла first.htm.

Варіант-ІІ

1. Увійдіть у текстовий редактор WordPad або Блокнот;

2. Наберіть такий текст:

<HTML>

<HEAD>

<TITLE> Оформлення заголовків різних рівнів</TITLE>

</HEAD>

<BODY>

<H1> Заголовок першого рівня </H1>

<H2> Заголовок другого рівня </H2>

<H3> Заголовок третього рівня </H3>

<H4> Заголовок четвертого  рівня </H4>

<H5> Заголовок п’ятого рівня </H5>

<H6> Заголовок шостого рівня </H6>

</BODY>

</HTML>

3. Збережіть файл як текстовий під іменем first.htm.

4. Відкрийте цей файл у вікні браузера Internet Explorer. Для цього ввійдіть в Internet Explorer, виберіть команду Открыть меню Файл і скористайтеся кнопкою Обзор для пошуку файла first.htm.

Учні відповідають на мої питання:

1.     Що таке мова HTML? (Мова HTML – це мова розмітки гіпертексту”.)

2.     Що таке HTML-файл?  (HTML-файл – текстовий файл, який має розширення .htm”.)

3.     Що таке тег і які бувають теги? (Тег – інструкція броузеру, яка вказує спосіб відображення тексту. Тег завжди починається знаком (<), а закінчується знаком (>). Існує два типи тегів: парні та непарні.)

4.     Які теги використовують для опису структури HTML-файлу. (Для опису структури HTML-файлу використовують слідуючи 4 парних теги: <HTML></HTML>, <HEAD></HEAD>, <TITLE> </TITLE>, <BODY></BODY>)

5.     Які існують засоби роботи з HTML?

(Усі засоби роботи з HTML діляться на три категорії: pедактори тегів;

шаблони;

програми-перетворювачі.)

6.     За допомогою яких тегів мова HTML дозволяє створювати добре структуровані документи?

(За допомогою тегів <P>, <BR>, <PRE>, <H1>, <B>, <I>, <U>, <LI>, <OL>, <UL>, <DL> )

7.     Які теги дозволяють вирівнювати текст по центру екрана, по лівому та по правому краю екрана?

(<CENTER></CENTER>, <LEFT></LEFT>, <RIGHT></RIGHT>)

           

 IV. Домашнє завдання.

п.5.7. Даю можливість записати зміст домашнього завдання учням в щоденник.

V.              Підведення підсумків уроку.

-         Сьогодні ми познайомилися з методами створення HTML-файлів, вивчили теги мови HTML і детально зупинилися на структурних тегах, навчилися оформлювати текст Web-документа.

Оцінюю учнів.

 Якщо немає до мене запитань, то урок закінчено.

-         До побачення!