Урок 1 - 2
Тема. Поняття про мову розмітки гіпертексту – мову HTML.
Мета. Дати поняття про мову гіпертекстової розмітки, познайомити з тегами мови, засобами створення HTML-документів, тегами форматування символів.
Обладнання: графопроектор, таблиці. ПЛАН УРОКУ
1.Організація класу до занять.
2.Мотивація вивчення теми.
Для зручності читання інформації на Web-сторінці подаю не у вигляді суцільного тексту, а поділяю на різні структурні елементи – окремі рядки, абзаци, списки, таблиці, малюнки, гіперпосилання та ін. Щоб Web-сторінка виглядала однаково при перегляді користувачами в різних частинах Землі за допомогою різних броузерів, її готую у спеціальний спосіб.
Завдання уроку.
• Поняття про мову гіпертекстової розмітки;
• Структурні теги;
• Оформлення тексту у Web-документі;
• Теги форматування символів;
• Теги управління зовнішнім виглядом HTML-документа;
• Включення графіки до Web-сторінки;
• Визначення гіперпосилань;
• Теги оформлення списків даних, робота з таблицями;
• Засоби створення –документів.
3.Вивчення нового матеріалу.
1.Призначення мови й основні поняття. Різні структурні елементи Web-сторінки позначають відповідними операторами, які називаються тегами. При одержанні Web-сторінки із сервера броузер аналізує її. Він знаходить у ній теги, що вказують, якого типу елемент треба відобразити, і виводить фрагмент Web-сторінки на екран.
Сукупність тегів і правил їх використання називається мовою HTML – мова розмітки гіпертексту.
Файл даних, фрагменти якого розмічені тегами мови HTML, називається HTML-документом.
Ім’я такого файла звичайно має розширення .htm чи .html. HTML-документ, поміщений на Web-сервер є Web-сторінкою, яка переглядається за допомогою Web-броузера. Тому, навчившись створювати HTML-документи, ми зможемо робити власні Web-сторінки.
HTML-документ складається з фрагментів тексту у вигляді ASCII-коду й тегів. Теги записуються символами ASII, які беруться в кутові дужки (знаки “<” менше та “>” більше). Таким чином, HTML-документ є звичайним ASII-файлом, і створювати його можна за допомогою найпростішого текстового редактора.
Наприклад, при використанні редактора Блокнот треба ввести вміст HTML-документа, а при збереженні вибрати команду Файл-Сохранить. У вікні Сохранение, що відкрилося, встановити значення Все файлы в полі Тип файла, а в імені обов’язково вказати розширення .htm.
Завдяки цьому файл буде відображатися у вигляді значка броузера, який встановлено на даному комп’ютері. Подвійне клацання на значку відкриває HTML-документ у броузері для перегляду. Наприклад, до поля імені файла можна ввести його назву Перша.htm, як показано на малюнку.
2.Теги. Структура HTML-документа. Вище було сказано, що тег – це вказівка броузеру, як відображати фрагмент документа. Тег завжди починається символом “<” і закінчується символом “>”. Між цими символами вказується ім’я тега. В імені малі й великі літери не розрізняються.
Теги бувають двох видів – одинарні й парні.
Одинарний тег ставиться перед фрагментом тексту, яким він керує. Наприклад, запис
Зошит
означає, що слово „Зошит” відображається з нового рядка.
Парні теги складаються з двох частин – початкової та завершальної. Початкова частина вказує точку документа, з якої починається дія команди, а завершальна – точку її закінчення. Завершальна частина відрізняється від початкової наявністю символу „ / „ (похила риска) перед ім’ям команди. Наприклад, запис Синій олівець означає, що текст „Синій олівець” відображається напівжирним шрифтом.
Розроблення Web-сторінки складається з двох етапів:
• Створення макета;
• Вставка тегів мови HTML.
При створенні макета визначається зміст Web-сторінки та її зовнішній вигляд. Вставка тегів забезпечує потрібний зовнішній вигляд при перегляді Web-сторінки за допомогою броузера.
Ознакою того, що текстовий файл є HTML-документом, служить парний тег . Він починає і завершає весь документ, тобто HTML-документ має вигляд:
текст документа
HTML-документ складається з двох частин – заголовка й тіла. Заголовок позначається парним тегом … , а тіло – парним тегом … . Текст, що вводиться в заголовку вікна броузера, розміщається в парному тезі … . Структура HTML-документа має вигляд
Заголовок документа
Тіло документа
У будь-якому місці HTML-документа можна помістити коментар. Це текст, який служить для пояснень розробника Web-сторінки та не відображається на екрані під час перегляду Web-сторінки у броузері. Текст коментаря поміщається в парний тег .
Найпростіший HTML-документ, відкритий у редакторі Блокнот, подано на малюнку, а зовнішній вигляд відповідної Web-сторінки в броузері Internet Explorer
3. Форматування абзаців і символів. Щоб текст сторінки не відображався суцільним текстом, використовують такі одинарні теги:
- початок абзацу (текст після тега починається з нового абзацу);
- початок нового рядка (текст після тега починається з нового рядка);
- горизонтальна лінія (у рядку, де розміщено тег, відображається горизонтальна лінія).
При використанні тега спочатку вставляється порожній рядок. Далі текст виводиться з початку нового рядка. Якщо вжито тег
, то порожній рядок не вставляється.
Перед деякими фрагментами тексту можуть розміщатися заголовки. Вони виділяються більшим шрифтом. HTML має теги для задання величини заголовків (шість рівнів). Найкрупнішим шрифтом виділяються заголовки першого рівня, а найдрібнішим – шостого.
Текст заголовка визначається парним тегом
… , де n – номер рівня.
Наприклад, фрагмент HTML-документа
Ласкаво просимо! відображається як заголовок першого рівня.
Абзаци й заголовки можна вирівнювати по центру, лівому чи правому краю. Для цього в імені команди в початковій частині тега вказується параметр ALIGN (вирівняти) й після знака «=» (дорівнює) одне з наступних значень:
CENTER – по центру;
LEFT – по лівому краю;
RIGHT – по правому краю.
Наприклад, фрагмент HTML-документа
Заходьте ще! Відображається як текст „Заходьте ще!”, який притиснуто до правого краю.
Якщо в тексті HTML-документа існують додаткові пробіли між словами, то при виводі в броузері вони можуть вилучатися. Щоб зберегти пробіли при відображенні, треба вказати парний тег … . Він позначає попередньо відформотований текст, тобто текст, що відображається шрифтом фіксованої ширини із збереженням усіх пробілів. Часто цей тег використовується для виведення тексту у вигляді таблиці.
Наприклад, HTML-документ, який подано на рисунку,
відображається в броузері в такому вигляді:
У наведеному вище прикладі використані теги, що керують шрифтом виведення окремих символів.
Для форматування символів у мові HTML існують теги: Теги форматування символів
Тег Призначення
… Напівжирний
… Курсив
… Підкреслений 4.Списки і таблиці. Якщо у Web-документі треба перераховувати дані, то їх виводять у вигляді списку. Найчастіше використовуються списки таких типів:
• Ненумеровані (маркіровані) – відображаються у вигляді послідовності позначених елементів, позначаються тегом ;
• Нумеровані – відображаються у вигляді списку, елементи якого мають послідовні номери, позначаються тегом … ;
• Словник визначень – відображається у вигляді термінів і їх визначень, позначається тегом … .
Перед кожним елементом ненумерованого й нумерованого списків вказується одинарний тег . У списку типу словника визначень перед кожним терміном вказується одинарний тег , а перед його визначенням – тег .
HTML-документ із нумерованим списком Захоплення та словником визначень, у якому пояснюється кожний вид захоплень наведено на рисунку.
(1)ненумерований список, (2) словник визначень.
Як відображаються ці списки у вікні броузера, показано на слідую чому рисунку
Початок і закінчення ненумерованого списку позначено парним тегом , а перед кожним елементом списку одинарний тег (наприклад, інформатика).
Словник визначень обмежено парним тегом … . У ньому кожний термін починається одинарним тегом , а його пояснення – тегом . Наприклад, у словнику визначень використовується термін Інформатика та його визначення:
Інформатика
Мені подобається створювати додатки в Access
У мові HTML дані можна подавати у вигляді таблиці. Для цього використовується тег . У ньому „шапка” таблиці й дані задаються у вигляді послідовних рядків. Кожний рядок обмежується парним тегом … , назва кожного стовпчика таблиці в „шапці” задається парним тегом … | , а значення в кожній комірці ділянки даних таблиці – парним тегом … | .
HTML-документ із таблицею „Мої оцінки” наведено на слідуючому малюнку:
на слідую чому малюнку показано, як відображається ця таблиця у вікні броузера.
5.Вставка малюнків і гіперпосилання. Щоб зробити Web-сторінку цікавішою, часто використовують малюнки. Для того щоб помістити малюнок, треба попередньо зберегти його у файлі. Потім у HTML-документі використати тег
Наприклад, якщо треба помістити фотографію Шаповала, що зберігається у файлі Фото Шаповал.jpg, треба вставити в HTML-документ тег
Цей тег на малюнку йде після тега Ласкаво просимо
А на слідуючому малюнку показано, як він відображається у вигляді фотографії.
При перегляді Web-сторінки іноді треба перейти з однієї її частини в іншу чи навіть на іншу Web-сторінку. Для організації таких переходів використовують гіперпосилання. На Web-сторінці вони відображаються іншим кольором у вигляді підкресленого тексту. При наведенні покажчика миші на неї покажчик відображається у вигляді кисті руки, а при клацанні – відбувається перехід на зазначене місце.
Для організації переходу усередині HTML-документа використовуються два теги. Перший позначає точку документа, на яку треба перейти. Він має вигляд
Другий тег визначає команду переходу на задану точку. Він має вигляд
Текст
Текст між початковою та кінцевою частинами тега відображається в броузері у вигляді гіперпосилання. Назва точки переходу вибирається розробником Web-документа довільно.
У HTML-документі, поданому на малюнку
існує пара таких тегів: (перед відповідним фрагментом) і Розпорядок дня .
Перехід на іншу Web-сторінку здійснюється за допомогою тега, який має вигляд < HREF=”URL-адреса”> Текст . Зокрема, як URL-адресу можна вказати ім’я файла.
Наприклад, на малюнку вище зазначені теги Мої оцінки і Захоплення , за допомогою яких можна перейти до перегляду раніше створених Web-сторінок. Якщо після перегляду кожної з цих сторінок треба повернутись на початкову сторінку Шаповал.htm, то в кожному з HTML-документів Оцінки.htm і Захоплення.htm бажано розмістити тег Перехід на початкову сторінку . Його можна вставити перед кінцевою частиною тега |