Урок "Поняття про мову HTML"
Урок інформатики 10 клас.
Тема: Поняття про мову HTML.
Мета: дати поняття про мову гіпертекстової розмітки, познайомити з тегами мови; розвивати творчі здібності учнів, комунікативну та інформаційну компетентності;
виховувати політехнічне мислення, інтерес до предмету.
Обладнання: ПК, текстовий редактор, програма браузер.
План уроку
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>. Він позначає попередньо відформатований текст, тобто текст, що відображається шрифтом фіксованої ширини із збереженням усіх пробілів. Часто цей тег використовується для виведення тексту у вигляді таблиці.
IV. Виконання завдання з застосуванням нового матеріалу.
Створити HTML-документ з назвою «Моя сторінка» та текстом «Ласкаво просимо на мій перший сайт».
V. Підведення підсумків уроку.
Перегляд та оцінювання створених Web-сторінок.
VI. Домашнє завдання: Опрацювати § 4.7
про публікацію авторської розробки
Додати розробку