Мета: дати поняття про мову гіпертекстової розмітки, познайомити з тегами мови; розвивати творчі здібності учнів, комунікативну та інформаційну компетентності;

виховувати політехнічне мислення, інтерес до предмету.

Обладнання:ПК, текстовий редактор, програма браузер.

План уроку

I. Повідомлення теми і мети уроку.

II. Мотивація вивчення теми.

Завдання уроку.

Поняття про мову гіпертекстової розмітки;
Структурні теги;
Оформлення тексту у Web-документі;
Теги форматування символів;
Теги управління зовнішнім виглядом HTML-документа.

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

Призначення мови й основні поняття.

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

Сукупність тегів і правил їх використання називається мовою HTML – мова розмітки гіпертексту.

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

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

HTML-документ складається з фрагментів тексту у вигляді ASCII-коду й тегів. Теги записуються символами ASII, які беруться в кутові дужки (знаки “<” менше та “>” більше). Таким чином, HTML-документ є звичайним ASII-файлом, і створювати його можна за допомогою найпростішого текстового редактора.

Наприклад, при використанні редактора Блокнот треба ввести вміст HTML-документа, а при збереженні вибрати команду «Файл-Сохранить». У вікні «Сохранение», що відкрилося, встановити значення «Все файли» в полі «Тип файла», а в імені обов’язково вказати розширення .htm.

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

Теги. Структура HTML-документа.

Вище було сказано, що тег – це вказівка браузера на те , як відображати фрагмент документа. Тег завжди починається символом “<” і закінчується символом “>”. Між цими символами вказується ім’я тега. В імені малі й великі літери не розрізняються.

Теги бувають двох видів – одинарні й парні.

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

<br> Зошит означає, що слово „Зошит” відображається з нового рядка.

Парні теги складаються з двох частин – початкової та завершальної. Початкова частина вказує точку документа, з якої починається дія команди, а завершальна – точку її закінчення. Завершальна частина відрізняється від початкової наявністю символу „ / „ (похила риска) перед ім’ям команди. Наприклад, запис <b> Синій олівець </b> означає, що текст „Синій олівець” відображається напівжирним шрифтом.

Розроблення Web-сторінки складається з двох етапів:

Створення макета;
Вставка тегів мови HTML.

При створенні макета визначається зміст Web-сторінки та її зовнішній вигляд. Вставка тегів забезпечує потрібний зовнішній вигляд при перегляді Web-сторінки за допомогою браузера.

Ознакою того, що текстовий файл є HTML-документом, служить парний тег <HTML> </HTML>. Він починає й завершує весь документ, тобто HTML-документ має вигляд:

<HTML>

текст документа

</HTML>

HTML-документ складається з двох частин – заголовка й тіла. Заголовок позначається парним тегом <HEAD> … </HEAD>, а тіло – парним тегом <BODY> … </BODY>. Текст, що вводиться в заголовку вікна браузера, розміщається в парному тезі <TITLE> … </TITLE>. Структура HTML-документа має вигляд

<HTML>

<HEAD>

<TITLE> Заголовок документа </TITLE>

</HEAD>

<BODY>

Тіло документа

</BODY>

</HTML>

У будь-якому місці HTML-документа можна помістити коментар. Це текст, який служить для пояснень розробника Web-сторінки та не відображається на екрані під час перегляду Web-сторінки у браузері. Текст коментаря поміщається в парний тег <!- … ->.

Форматування абзаців і символів.

Щоб текст сторінки не відображався суцільним текстом, використовують такі одинарні теги:

<p> - початок абзацу (текст після тега починається з нового абзацу);

<br> - початок нового рядка (текст після тега починається з нового рядка);

<hr> - горизонтальна лінія (у рядку, де розміщено тег, відображається горизонтальна лінія).

При використанні тега <p> спочатку вставляється порожній рядок. Далі текст виводиться з початку нового рядка. Якщо вжито тег <br>, то порожній рядок не вставляється.

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

Текст заголовка визначається парним тегом

<Hn> … </Hn>, де n – номер рівня.

Наприклад, фрагмент HTML-документа

<H1> Текст ……… </H1> відображається як заголовок першого рівня.

Абзаци й заголовки можна вирівнювати по центру, лівому чи правому краю. Для цього в імені команди в початковій частині тега вказується параметр ALIGN (вирівняти) й після знака «=» (дорівнює) одне з наступних значень:

CENTER – по центру;

LEFT – по лівому краю;

RIGHT – по правому краю.

Якщо в тексті HTML-документа існують додаткові пробіли між словами, то при виводі в браузері вони можуть вилучатися. Щоб зберегти пробіли при відображенні, треба вказати парний тег <pre> … </pre>. Він позначає попередньо відформатований текст, тобто текст, що відображається шрифтом фіксованої ширини із збереженням усіх пробілів. Часто цей тег використовується для виведення тексту у вигляді таблиці.