Конспект уроку №4 Чабан Єлизавети (НTML)

Тема: Поняття про мову HTML. Поняття HTML-документу. Структура веб-сторінки. Основні теги. Форматування тексту.

Мета: ознайомити з поняттям HTML-документу, його структурою, основними тегами і форматуванням тексту; виховати дисциплінованість, самостійність; розвити пам'ять, увагу, мислення

Тип уроку: лекція

Обладнання : дошка, крейда, мультимедійна дошка, текстовий редактор Блокнот

І Організуючий етап

Добрий день, сідайте.

Як ви знаєте, Інтернет сьогодні є невід’ємною частиною нашої повсякденної реальності, як телефон чи автомобіль, і нікуди від цього не подітись. Його використовують для пошуку інформації, спілкування , здійснення покупок і представлення інформації на своїх веб-сайтах. Сьогодні ми розпочнемо вивчати створення сайтів і у кінці теми кожен з вас зробить свою веб-сторінку. Отже, записуємо дату і тему уроку.

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

Розпочнемо з поняття веб-сторінка Веб-сторінка — це файл з розширенням HTM, HTML, SHTML, XHTML . 3 чого, власне, складаються ці файли HTML? Вони складаються із звичайного тексту. Ви можете проглянути початковий код файлу в будь-якому текстовому редакторі, включаючи Блокнот Windows (Notepad). Редагувати веб-документи ви також можете, використовуючи звичай¬ний Блокнот. Хоча зараз існує велика кількість візуальних редакторів web-сторінок,наприклад: Netscape Composer, Microsoft FrontPage та ін., і поза сумнівом, вони дозволяють значно прискорити створення типових сторінок , проте поки ми будемо розбиратися із структурою HTML-документів і основними елементами мови HTML. Це дозволить в майбутньому конт¬ролювати роботу візуальних редакторів і виправляти помилки, що при¬пускаються ними.

HTML (Hyper Text Markup Language — мова розмітки гіпертексту).

Гіпертекст — це легка у використанні і надзвичайно потужна система зв'язаних слів і фраз, що дозволяє легко переміщуватися між особливим чином організованими сторінками. Вона пов'язує фразу або слово однієї сторінки з будь-якою іншою сторінкою, абзацом, фразою або словом HTML-файл складається з двох основних частин: «голови» (заголовка) і «тіла». «Тіло» HTML- документа містить в собі весь інформативний вміст, тоді як у заголовку вказується тип документа, його кодування, мова, ім'я автора та інша додаткова інформація. Тіло документа відокремлюється від заголовка за допомогою міток (дескрипторів, тегів) HTML.

Мітка мови HTML або тег (англ. tag), або дескриптор (називайте, як вам більше подобається), є основним засобом розмітки документа. Під час написання теги відокремлюються від решти тексту кутовими дуж¬ками: «<» і «>». Регістр символів при цьому також не має ніякого зна¬чення, але хорошим тоном вважається набір тегів у верхньому регістрі, тобто великими літерами. Це допомагає візуально відокремити теги від основного тексту у разі подальшого редагування.

Усі теги HTML за їх призначенням і областю дії можна розділити на такі основні групи:

•теги, що визначають структуру документа (теги форматування);

•теги, що оформляють блоки гіпертексту (параграфи, списки, таблиці, картинки);

•гіпертекстові посилання і закладки (тобто загальні посилання).

Крім цього, теги діляться на дві групи:

•теги, які вимагають закриття (тобто обмеження дії) — парні;

•теги, які не вимагають закриття — непарні.

Наприклад, дескриптор <І>, що змінює зображення шрифту на курсив, є парним тегом, тобто вимагає закриття. Якщо він не буде закритий, то весь текст, після нього, буде відображатись курсивом. Закриваючим елементом завжди служить той самий тег, але із знаком «/» після першої кутової дужки. (вчитель приклади показує на мультимедійній дошці) Приклад

< U >Цей текст відображатиметься як курсив. < / U >

Отримаємо

Під час закриття тегів необхідно керуватися таким правилом: якщо один закриваючий тег вкладений всередину другого, то першим необхідно закривати вкладений тег. Запам'ятайте, що закриваючі теги повинні йти в порядку, зворотньому до відкриваючих.

Приклад

<І> Цей текст відображатиметься як курсив.A цей, як курсив і підкреслений.</І>.

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

Приклад

На сторінці цей текст
розташовуватиметься в два рядки