Published using Google Docs
Урок 9 ОВД 9
Updated automatically every 5 minutes

Урок 9                                                                       Інформатика 9

Щоб змінити людей, їх потрібно любити.

Вплив на них пропорційний любові до них.

Песталоцці

Текстові гіперпосилання. Теги заголовку й тіла веб-сторінки. Нумеровані й марковані списки на веб-сторінках. Способи керування структурою та розміщенням інформації на веб-сторінках.

Мета.

Навчальна. Ознайомити учнів з поняттям про мову розмітки, гіпертекстовий документ та його елементи; поняття тега й атрибута;теги форматування шрифтів і поділу тексту на рядки та абзаци; текстові гіперпосилання; теги заголовку й тіла веб-сторінки; способи керування структурою та розміщенням інформації на веб-сторінках.

Розвиваюча. Розвивати логічне мислення, самостійність, вміння застосовувати набуті знання до практичних завдань.

Виховна. Виховувати наполегливість, естетичність у оформленні, грамотно висловлювати свої думки.

Тип уроку. Засвоєння нових знань і навичок.

Матеріали для роботи з учнями:

План

Хід уроку

1. Організація початку уроку.

2. Інструктаж БЖД.

3. Мотивація навчальної діяльності.

Ви вже переконалися, що за допомогою автоматизованих засобів, які надають у розпорядження користувача служби безкоштовно­го хостинга, створювати й адмініструвати веб-сайти надзвичайно просто. Крім того, це не потребує особливих знань із веб-дизай­ну. Однак у такому випадку ваші можливості обмежені, і ви не зможете створити сайт за своїми уподобаннями. Щоб мати змогу це зробити, потрібно опанувати спеціальну мову, призначену для розробки веб-сторінок. Тоді перед вами відкриються захоплюючі можливості щодо створення свого власного віртуального світу!

У цьому розділі ви ознайомитеся із принципами створення веб-сто- рінок за допомогою мови HTML, навчитеся визначати структуру сторінок, розміщувати і форматувати текст, працювати з таблиця­ми та фреймами, пов'язувати створені файли за допомогою гіперпо- силань. Виконавши дві запропоновані практичні роботи, ви власно­руч створите веб-сторінки — можливо, перші у вашому житті.

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

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

Базові конструкції мови HTML

Основною перевагою та особливістю веб-сторінок є те, що інформа­ція, розміщена на них, має вигляд гіпертексту. Гіпертекст — це текст, у який вбудовані спеціальні коди, що задають форматуван­ня тексту, наявність у ньому ілюстрацій, мультимедійних вставок та гіперпосилань. Ці коди визначені у мові програмування HTML (Hyper Text Markup Language — мова гіпертекстової розмітки). Тобто веб-сторінка фактично є документом у форматі HTML. Про­цес вставляння в текст кодів HTML називають розміткою. Браузери підтримують мову HTML і під час завантаження веб-сторінки читають наявні у ній коди та виконують задані за їх допомо­гою операції (форматують текст, вставляють у нього зображення тощо). Таким чином, вигляд сторінки у вікні браузера залежить від того, які коди містяться у її документі.

Поняття тегу

Коди мови HTML, за допомогою яких розмічають вихідний текст, називають тегами. Під час відображення документа в браузері самих тегів не видно, але вони впливають на зовнішній вигляд документа. Усі теги починаються із символу < і закінчуються символом > — їх називають кутовими дужками. Після відкритої кутової дужки розміщують ключове слово, яке вказує на призна­чення тегу. Регістр у назвах тегів не має значення, хоча загаль­новживаними є великі літери. Приклади тегів HTML: <TITLE>, <BODY>, <TABLE>, </А>, <IMG>, </CENTER>.

Зазвичай тег впливає на певний фрагмент документа, наприк­лад на абзац. У таких випадках використовують пару тегів (відкривальний і закривальний). Перший із них задає ефект, а другий — припиняє його дію. Закривальний тег починається із символу / (слеш). Приклади парних тегів: <HTML></HTML>, <В></В>, <HEAD></HEAD>, <Н3></Н3>, <ADDRESS></ADDRESS>, <L1></L1>.

Деякі теги задають разовий ефект у місці своєї появи, тоді закри­вальний тег не потрібен. Приклади одинарних тегів: <BR>, <HR>, <МЕТА>, <BASEFONT>, <FRAME>, <INPUT>.

Якщо між кутовими дужками помилково вказане ключове слово, яке відсутнє в мові HTML, то весь тег буде проігноровано. Відкривальні теги можуть містити атрибути, які впливають на ефект, створюваний тегом. Атрибути — це додаткові ключові слова, відокремлені від основного ключового слова тегу та один від одного символами пробілу.

Для деяких атрибутів слід задавати значення, яке відділяють від імені атрибута символом =. Значення атрибута беруть у лапки, але в багатьох випадках їх можна і не ставити. Закривальні теги атрибутів не містять.

Приклади тегів з атрибутами:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" BACKGROUND="rain.gif">

<OPTION SELECTED>

<FRAME SCR="file.html" NORESIZE>

Для того щоб через деякий час ви або інша людина, яка пере­глядатиме код HTML, могла краще його зрозуміти, у текст встав­ляють примітки — коментарі. Вони починаються зі спеціального тегу <! —. Будь-який записаний після нього текст браузер розгля­дає як коментар і не відображає під час відтворення документа. Закінчують коментар тегом — >. Коментар може містити будь-які символи, крім >, а отже, не може включати в себе теги.

Структура HTML-документа

HTML-документ складається з основного тексту і тегів розмітки. Фактично це звичайний текстовий файл, для створення і редагу­вання якого можна використати будь-який текстовий редактор. Зазвичай HTML-документи містяться у файлах із розширенням .htm або .html.

Документ HTML має чітко визначену структуру.

Отже, основну структуру HTML-документа визначають чотири пар­ні теги. Їхня наявність передбачена у всіх таких документах;

<HTML>

<HEAD>

<ТITLЕ>Заголовок документа</ТІTLE> </HEAD>

<BODY>

Текст, що відображається на екрані </BODY>

</HTML>

Для того щоб розбити текст на логічні частини, використовують заголовки. Мова HTML підтримує шість рівнів заголовків доку­ментів. Вони позначені тегами від <Н1>...</Н1> до <Н6>...</Н6>. На екрані ці заголовки відображаються різними шрифтами (за­звичай напівжирними). Хоча в мові HTML є теги форматування, які можуть змінювати зображення шрифту, користуватися ними для заголовків не рекомендовано.

Текст, що міститься всередині тегу заголовка, відображатиметься відповідно до його рівня. Найвищий рівень має заголовок Н1, най­нижчий — Н6. Текст заголовка може бути вирівняний по центру, за правим або лівим краєм — для цього використовують атрибут ALIGN. Наприклад: <Н2 ALIGN=center \ right \ left>Текст заголов­ка </Н2> (тут символ \ означає можливість вибору між значен­нями center, right або left).

На рис. 2.1 показано заголовки різних рівнів.

Для визначення звичайних абзаців у мові HTML використовують теги <Р> і </Р>. Текст, розміщений між ними, власне і буде одним абзацом. При цьому слід пам'ятати, що всі «зайві» пропуски між словами і переходи на новий рядок під час відтворення HTML-до­кумента браузер ігнорує. Коли браузер відтворює веб-сторінки, абзаци відділяються один від одного за допомогою відступів.

У разі переходу на новий рядок без створення абзацу використову­ється одинарний тег <BR>. Розділювачами в тексті можуть також бути горизонтальні лінії, які візуально відділяють різні частини документа, — їх створюють за допомогою одинарного тегу <HR>.

Кольори та зображення для всього документа і його тла задають за допомогою тегу <BODY>. Він може мати такі атрибути:

Браузер перетворює текст HTML-документа під час його виведен­ня на екран, тобто ігнорує зайві пропуски, символи табуляції, символи кінця рядка, форматує текст відповідно до використаних тегів. Проте іноді виникає потреба у тому, щоб помістити в доку­мент відформатований текст, для якого браузер повинен зберегти всі пропуски, навіть якщо кілька пропусків розміщені один за одним, знаки переносу на інший рядок, табуляції та інші символи форматування. Для цього використовують тег <PRE>TeKCT</PRE>. Втім, якщо браузер зустріне в такому тексті теги розмітки, вона буде відповідним чином застосована.

Теги форматування тексту

Текст у HTML-документах форматують за допомогою відповід­них тегів. У табл. 2.1 наведено теги, які використовують для форматування символів, та заданий ними ефект.

Окрім цього, можна визначати різні параметри шрифту. Зокре­ма, за допомогою тегу <BASEFONT> задають гарнітуру (рисунок), розмір і колір шрифту. Цей тег одинарний, діє на весь текст, роз­міщений нижче, і має такі атрибути.

 

Для оформлення сайту зазвичай використовують набір кольорів, який називають безпечною палітрою. Він складається з 216 елемен­тів. Особливістю безпечних кольорів є те, що вони не змінюються у разі відображення різними браузерами або на різних моніторах, тобто ця палітра забезпечує найточнішу передачу на різних моніторах того, що задумав веб-дизайнер. Якщо будь-яка з трьох скла­дових шістнадцяткового значення відрізняється від 00, 33, 66, 99, СС чи FF, то колір не є безпечним. Значення атрибутів SIZE та COLOR можна записувати без лапок.

Гарнітуру, розмір та колір шрифту для фрагмента тексту задають за допомогою тегу <FONT АТРИБУТИ>Текст<^ОКТ>. Атрибути цього тегу такі самі, як у тегу <BASEFONT>, за винятком атрибута SIZE: його значення зі знаком мінус (або плюс) означає, що роз­мір шрифту буде зменшено (чи збільшено) на відповідну величину відносно заданого за умовчанням або у тегу <BASEFONT>. Значен­ня без знака задає абсолютний розмір шрифту.

Є й інші теги, які можна застосовувати для зміни параметрів тексту.

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

Вправа 2.1

Створимо HTML-документ за допомогою найпростішого текстово­го редактора.

<HTML>

<HEAD>

<ТITLE>Купівля\продаж</ТІТLЕ>

</HEAD>

<BODY>

<Н1>Торговельні об'єкти Львівщини</Н 1>

<Н2>Супєрмаркети</Н2>

<Р>На Львівщині діє мережа магазинів Інтермаркет. У кожному районі є торговельний об'єкт.<Р>Одним із таких магазинів став нещодавно відкритий супермаркет "АРСЕН".

<HR>

Це торговельний центр із багатьма відділами та зручною сис­темою обслуговування покупців.<ВR>Його можна назвати торго­вельним містечком.

</BODY>

<HTML>

На рис. 2.2 показано, як буде відтворено цей документ у вікні браузера Internet Explorer.

Вправа 2.2

Помістимо на веб-сторінку наведений нижче текст, відформату­вавши його за допомогою відповідних тегів.

У цьому прикладі для деяких фрагментів тексту необхідно застосувати по два теги форматування, наприклад, <I><U>Україні</U></I>. Слід пам'ятати про правило вкладених тегів, згідно з яким їх потрібно закривати у зворотному до відкри­вання порядку. Тобто якщо спершу відкрили тег курсиву, а потім — тег підкреслення, то спочатку слід закривати тег підкреслення, а потім — курсиву.

Троянда столиста

Граціозні форми, ніжне забарвлення, витончений аромат троянди з незапам'ятних часів чарували людей. Тому й створено безліч легенд про цю чарівну, ніжну й чудову квітку.

За староіндійською легендою, прекрасна богиня Лакшмі народи­лася з пуп'янка троянди.

У древньому індійському міфі розповідається, що прегарний юнак Адоніс, який уособлював прихід весни, постав із куща троянди. У Персії так шанували царицю квітів, що навіть країна одержала назву Гюлістан — країна троянд.

У Римі цю квітку вважали символом хоробрості, нею нагороджу­вали за доблесть. В Афінах часів Аристофана трояндовий вінок одягали на шию переможцям змагань. Гірлянди квітів прикраша­ли колони і стіни залів у дні тріумфальних святкувань.

Існує припущення, що русальна неділя — давнє свято в Україні та Білорусі — пов'язана з розаріями — святом римлян на честь цих прекрасних квітів.

(Мамчур Ф.І., Гладун Я.Д., Лікарські рослини на присадибній ділянці)

Нумеровані й марковані списки

Для подання тексту в структурованому вигляді, коли кожен аб­зац виділено за допомогою позначки або номера, призначені спи­ски. У HTML-документах використовують три види списків:

У невпорядкованому списку для виділення елементів використо­вуються певні позначки (крапки, квадрати тощо). Починається такий список із тегу <UL>, а закінчується — </UL>. Кожний еле­мент списку починається з тегу <LI>. Тег <UL> може мати атри­бут TYPE, який визначає форму позначки. Цей атрибут набуває таких значень:

В упорядкованому списку всі елементи пронумеровані. Починаєть­ся список із тегу <OL>, а закінчується — </OL>. Кожний елемент такого списку також починається з тегу <LI>. Тег <OL> може мати атрибут TYPE, який визначає тип нумерації. Цей атрибут набуває таких значень:

У разі потреби за допомогою атрибута START можна задати відмінний від одиниці початковий номер елемента, наприклад <OL TYPE="I" START="5" >, Нумерований список, початковий елемент якого позначено латинською літерою Е, яка є п'ятою в алфавіті, описують так:

<OL TYPE="A" START="5">

<LI>Перший елемент списку</LI>

<LI>Другий елемент списку</LI>

<LI>Третій елемент списку</LI>

<LI>Четвертий елемент списку</LI>

</OL>

Список визначень (definition list) порівняно з маркованим або нумерованим має дещо складнішу будову. Кожен елемент такого списку складається з двох частин: терміна та його визначення. У такий спосіб можуть бути оформлені словники та термінологіч­ні довідники. Однак цей тип списку використовують рідко, і тому описувати його докладніше не будемо.

Розглянемо приклади використання різних типів списків.

Приклад 2.1.

Маркований список, в якому для позначення елементів використовують коло

<HТML>

<TІTLE>Райдуга</TITLE>

<BОDY>

<BASEFONT SIZE=6>

<UL ТУРЕ=сігсlе>

<LI><FONT COLOR=red>Червоний</FONT></LI>

<LI><FONT COLOR=orange>0ранжевий</F0NT></LI>

<LI><FONT CОLOR=yellow>Жовтий</FONT></LI>

<LI><FONT COLOR=gгeen>Зелений</FONT></LI>

<LI><FONT COLОR=lightblue>Блакитний</FONT></LI>

<LI><FONT COLOR=blue>Синій</FONT></LI>

<LI><FONT СOLOR=daгkmagenta>Фioлeтoвий</FONT></LI>

</UL>

</ВODY>

</HTМL>

Ha рис. 2.4 показаний вигляд цього документа у вікні браузера Internet Explorer.

Приклад 2.2.

Нумерований список, в якому для позначення елементів використовують малі римські цифри

<HTML>

<TIТLE>Райдуга</TITLE>

<BODY>

<BASEFONT SIZE=6>

<OL TYPE=i>

<LI><FОNT COLOR=red>Червоний</FONT></LI>

<LI><FONT C0L0R=orange>0ранжевий</F0NT></LI>

<LI><FONT COLOR=yellow>Жoвтий</FONT></LI>

<LI><FONT СOLOR=green>Зелений</FONT></LI>

<LI><FONT COLOR=lightblue>Блакитний</FONT></LI>

<LI><FONT CОLOR=blue>Синій</FONT></LI>

<LI><FONT COLOR=darkmagenta>Фіолетовий</FONT></LI>

</ОL>

</ВODY>

</HTМL>

Ha рис. 2.5 показаний вигляд цього документа у вікні браузера Internet Explorer.

Зверніть увагу на те, що за допомогою тегу <BASEFONT> для всьо­го документа призначено розмір шрифту 6, а за допомогою тегів <FONT> визначено колір шрифту для кожного елемента списку.

Текстові гіперпосилання

Гіперпосилання — це вказівка для браузера, до якого об'єкта у межах або поза межами HTML-документа він має звернутися. За допомогою гіперпосилань користувачі можуть переходити з однієї веб-сторінки на іншу, завантажувати файли тощо. Як гіпер­посилання може були оформлений фрагмент тексту або графічний об'єкт. Коли веб-сторінка відображаються у вікні браузера, тексто­ве посилання зазвичай виділено синім кольором і підкресленням. Для переходу в місце, на яке вказує посилання, користувачу дос­татньо клацнути його текст.

Для створення гіперпосилання необхідно використовувати теги <А> та </А>, визначивши для тегу <А> атрибут HREF. Його зна­ченням має бути адреса URL, на яку вказує посилання. Текст посилання розташовують між тегами <А> і </А>.

Якщо веб-сторінка, на яку вказує посилання, розміщена на іншо­му веб-сайті, то значенням атрибута HREF має бути повна URL- адреса з назвою протоколу включно; такі посилання називають зовнішніми. Якщо ж гіперпосилання вказує на іншу сторінку того самого сайту, то для пошуку документа достатньо задати лише відносний шлях; таке посилання називають внутрішнім.

Гіперпосилання може вказувати на певне місце всередині сторін­ки, якщо туди попередньо вбудувати якір-мітку. Для визначення якоря також використовують теги <А> і </А>, але замість атри­бута HREF задають атрибут NAME, значенням якого має бути ім'я якоря. Воно може складатися з літер та цифр, але не повинно містити символів пробілу. Якщо на сторінці є кілька міток, то всі вони повинні мати різні назви.

Для створення посилання на встановлений якір потрібно у тегу <А> зазначити його ім'я в кінці адреси URL після імені докумен­та, відокремивши його символом #. Символ # вказує на те, що після нього записано назву мітки, а не ім'я файлу.

Посилання на мітку всередині поточного документа задають так:

<А HREF="#назва_мітки">Текст посилання</А>.

Якщо в атрибуті HREF задати адресу електронної пошти зі словом mailto: перед нею, то після вибору такого посилання можна надіслати електронний лист, де в полі Кому буде записано цю адресу.

У прикладі, який наводиться нижче, розглянуто застосування гіперпосилань різного типу.

Приклад 2.3.

HTML-документ, в якому використовуються гіперпосилання та якорі

<HTML>

<HЕАD>

<TITLE>Посилання та якорі</TITLE>

</HEAD>

<BОDY>

Нові версії стандартних програм операційної системи та найважливіші драйвери можна знайти на веб-сайті компанії

<А HREF="http://www.microsoft.com/">Microsoft</A>.

<P>A тепер можна перейти на <А HREF="main.htm"> мою особисту сторінку</А> .

<Р>Проте, як зв'язатися з автором, розповідається в <А HREF="#olenap">

кінці цієї сторінки</А>

<BR><BR>

Можна використати матеріали, що розміщені

<А href ="text.doc"> в цьому текстовому документі .</А>

<BR><BR>

<А NAME="olenap"

HREF="mailto:olena@zirka.Iviv.ua">01ena@zirka.lviv.ua</A>

</BODY>

</HTML>

Такий вигляд матиме HTML-документ після його відтворення браузером (рис. 2.6)

У цьому прикладі слово «Microsoft» міститься у тегу зовнішнього гіперпосилання, а текст «мою особисту сторінку» — у тегу внутріш­нього посилання. Текст «кінці цієї сторінки» розміщений у тегу по­силання на якір, а «в цьому текстовому документі» — у тегу гіпер- посилання з атрибутом HREF, в якому задано зв'язок не з веб-сто- рінкою, а з текстовим документом, котрий збережений у тій самій папці, що й поточний HTML-документ. Текст «01ena@zirka.lviv.ua» вміщено у тег, що описує мітку якоря, а в атрибуті HREF зазначе­но адресу електронної пошти.

Якщо відвідувач веб-сторінки скористається зовнішнім гіперпосиланням Microsoft, то відкриється сторінка, що міститься за ад­ресою: http://www.microsoft.com/. Після клацання гіперпосилання мою особисту сторінку відкриється веб-сторінка, записана у файлі main.htm, який міститься у тій самій папці, що й поточна сторін­ка. Після клацання внутрішнього посилання в цьому текстовому до­кументі відкриється вікно з текстовим документом text.doc, що міс­титься у поточній папці. Якщо скористатися посиланням на якір кінці цієї сторінки, то зображення поточної веб-сторінки зміститься так, що текст мітки «01ena@zirka.lviv.ua», з якою зв'язаний якір, буде розміщений у видимій на екрані частині документа.

Водночас текст «Qlena@zirka.lviv.ua» є гіперпосиланням, скори­ставшись яким, користувач зможе надіслати листа за допомогою настроєної на своєму комп'ютері електронної пошти за вказаною в атрибуті HREF адресою — olena@zirka.lvlv.ua.

Розглянемо ще один приклад створення текстових гіперпосилань. Припустимо, що у певній папці збережено два HTML-документи, які описують два напрями роботи фірми, — 1.html та 2.html. Створимо веб-сторінку з переліком гіперпосилань, кожне з яких ілюструватиме один із напрямів роботи фірми:

<HTML>

<TITLE>Моя фірма</TITLE>

<BODY>

<Н1><А HREF="1.html">Наша продукція</А></Н1>

<Н1><АHREF="2.html">Наші замовники</А></Н1>

</BODY>

</HTML>

У цьому прикладі таги гіперпосилань містяться в тегах заголовків першого рівня. Тексти гіперпосилань будуть розташовані в окре­мих рядках і оформлені як заголовки першого рівня.

За умовчанням текстові гіперпосилання виділені синім кольором і підкреслені, а якщо ними вже скористалися, то темно-черво­ним. Для зміни цих кольорів додамо відповідні атрибути до тегу <BODY>: <BODY LINK=magenta ALINK=yellow>. Це означає, що після першого завантаження веб-сторінки всі гіперпосилання бу­дуть фіолетового кольору, а якщо відвідувач скористається одним із них, то колір його тексту стане жовтим (рис. 2.7). Це зручно, коли на веб-сторінці є багато посилань, і відвідувач бажає по черзі переглянути їх: тоді надання іншого кольору відвіданим гіперпо- силанням дає змогу систематизувати такий перегляд.

Якщо додати до тегу <BODY> атрибут BGCOLOR=cyan, то колір тла веб-сторінки зміниться на світло-бірюзовий.

6. Застосування отриманих знань

Вправи 2.1-2.3

7.  ПІДБИТТЯ ПІДСУМКІВ УРОКУ

Тест до теми

8. ДОМАШНЄ ЗАВДАННЯ