28_matvienko-web
.pdf
Відображення файла програмою-броузером:
Графічні зображення
Графічні зображення, які демонструються на Web-сторінках, зберігаються в окремих файлах. Для вміщення зображення на сторінку використовують тег <IMG SRC=”URL”>, де URL – адреса файла, який містить графічні дані.
Розташування тексту, який слідує за зображенням, і те, як зображення розташоване на сторінці, контролює атрибут ALIGN. За замовчуванням текст з’являється внизу зображення.
Internet Explorer дозволяє використовувати властивості тега IMG, які надають можливість задавати значення висоти і ширини зображення за допомогою атрибутів HIGHT і WIDTH. Висота і ширина вимірюються в пікселях.
Атрибути тега <IMG SRC=”URL”>
WIDTH =px |
|
Встановлює ширину зображення (у пікселях) |
HIGHT = px |
|
Встановлює висоту зображення (у пікселях) |
ALIGN=TOP|MIDDLE| |
|
|
BOTTOM| LEFT|RIGHT |
Контролює розташування тексту |
|
|
|
Значення атрибуту ALIGN: |
TOP |
|
Вирівнює текст по верху зображення |
MIDDLE |
Вирівнює базову лінію тексту по центру зображення |
|
BOTTOM |
Вирівнює базову лінію по низу зображення |
|
LEFT |
Розташовує зображення ліворуч, дозволяючи тексту |
|
|
“ обтікати” зображення праворуч |
|
RIGHT |
Розташовує зображення праворуч, дозволяючи тексту |
|
|
“ обтікати” зображення ліворуч |
|
Ефективним для розміщення зображень є застосування атрибутів тега <BR>. Використання тега <BR> в його основному варіанті у тексті, який обтікає зображення, просто розбиває рядок без переривання ефекту обтікання. Щоб перервати рядок і очистити поле праворуч або ліворуч від зображення, застосовують атрибут СLЕАR.
Атрибут СLЕАR тега <ВR> використовується для того, щоб зупинити у
41
зазначеній точці обтікання текстом об’єкта, а потім продовжити текст у порожній зоні за об’єктом. Текст, який продовжується за об’єктом, вирівнюється у відповідності із значеннями LEFT, RIGHT або АLL атрибуту СLЕАR:
<BR СLЕАR=LЕFТ> - перериває рядок і очищає ліве поле
(текст буде продовжений, починаючи з найближчого порожнього лівого
поля);
<BR СLЕАR=RIGHT> - перериває рядок і очищає праве поле (текст
буде продовжений, починаючи з найближчого порожнього правого поля);
<BR СLЕАR=АLL> перериває рядок і очищає обидва поля (текст буде
продовжений, як тільки ліве і праве поля виявляться порожніми).
Наприклад, якщо зображення вирівняне ліворуч, а текст обтікає його праворуч, тоді необхідно очистити ліве поле, щоб якийсь інший елемент, який слідує за текстом, не виявився розміщеним праворуч від зображення.
Приклад (текст буде розташований поряд з малюнком; після <BR CLEAR=LEFT> буде очищене ліве поле, і наступний текст буде розташований, починаючи з найближчого порожнього лівого поля):
<IMG SRC=“ ім’я файла” ALIGN=LEFT>
На цьому малюнку зображено....
<BR CLEAR=LEFT>
Атрибут ALT тега IMG визначає текст, який відображається броузером на місці зображення, якщо броузер не може знайти файл із зображенням або включений у текстовий режим. Текст, записаний у атрибут ALT, відображається біля курсору мишки при наведенні її вказівника на малюнок. У атрибуті, як правило, вказується текст з описом зображення.
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H2><P ALIGN=CENTER>УКРАЇНСЬКА МИНУВЩИНА </P> <HR SIZE=8 WIDTH=40% COLOR=RED> </H2>
<IMG SRC=”MAMAI5.JPG” WIDTH=200 HIGHT=200 ALIGN=LEF T ALT =” Козак Мамай”>
<P ALIGN= CENTER>Етнографічний довідник </P> </BODY>
</HTML>
42
Відображення файла програмою-броузером:
Створення маркірованого списка із графічними маркерами
При необхідності для створення маркірованого списку можна створити свої власні графічні зображення для використання їх як маркерів1.
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H2><P ALIGN= CENTER>ПОСЕЛЕННЯ, ЖИТЛО, ЗАБУДОВА </P> <HR SIZE=8 WIDTH=40% COLOR=RED> </H2>
<IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “> <A HREF=”1.HTM”>
<FONT SIZE=5><B>Типи поселень</B></FONT></A><BR>
Поселення землеробської людності України, які складалися з будівель, пристосованих для життя, різноманітних підсобних занять, утримання свійських тварин та зберігання продуктів, сягають глибини віків.<BR>
<IMG SRC=”BUT1_UP.GIF” WIDTH=60 ALT =” “> <A HREF=”2.HTM”>
<FONT SIZE=5><B> Типи народного житла</B></FONT></A><BR>
В основі типології традиційного сільського житлового комплексу також лежить поділ території України на зони, проте він більш розгалужений і детальніший.
</BODY>
43
</HTML>
Відображення файла програмою-броузером:
При використанні графічних маркерів слід звернути увагу на такі особливості:
-текст елементу списка знаходиться ближче до графічного зображення, ніж у звичайному невпорядкованому списку;
-центр графічного зображення не вирівнюється по центру текстового
рядка;
-якщо текстовий елемент списка перевищує у довжину один рядок, він не вирівнюється так, щоб другий рядок починався точно під першим – другий і всі наступні рядки починаються під графічним зображенням.
Графічне зображення може бути використане як гіперпосилання:
<A HREF= “http://www.nbuv.gov.ua”> <IMG SRC=” адреса графічного
файла”></A>
Завдання для самостійної роботи
1.Представити інформацію у вигляді трьох рядків тексту, розміщених один під одним по центру екрана, підкреслених лінією синього кольору розміром 8.
2.Розташувати на сторінці текст і малюнок так, щоб текст “ обтікав” зображення ліворуч. Текст повинен бути зеленого кольору, розміром 5.
Приклад тексту:
“ Українська минувщина” – своєрідна енциклопедія традиційної культури та побуту українців. Відомості про забуті способи ведення господарства, хатнє начиння, народну моду, кулінарію, медицину, звичаї та обряди, демонологію тощо розміщені за зручним для читача принципом і супроводжуються оригінальними ілюстраціями.
3.Вставити малюнок до HTML-документа, зробивши його розмір 50х40 пікселів.
4.Модифікувати наведений у розділі приклад таким чином: вставити після слів “ Етнографічний довідник” ще один малюнок, вирівнявши його по правій межі, а після першого малюнка очистити ліве поле. Дослідити одержаний результат з очищенням і без очищення лівого поля після першого малюнка.
44
Запитання для самоперевірки
1.Який тег використовують для вміщення графічного зображення на
сторінку?
2.Які атрибути використовуються для зміни розмірів малюнка?
3.Якими атрибутами лінії можна управляти і за допомогою яких
тегів?
4.За допомогою яких тегів та їх атрибутів можна управляти розміщенням зображення на екрані?
45
РОЗДІЛ 11. ЗВУК У HTML-ДОКУМЕНТАХ
Мета: навчитись застосовувати звук у HTML-документах.
Internet Explorer має можливість автоматичного завантаження і програвання фонового звука у форматах wav, .au, .mid , якщо такі файли включені до складу Web-документа.
Файл у форматі .wav є стандартом звукових файлів у Windows. У цьому форматі представлені всі системні звуки Windows.
Формат MIDI був розроблений для управління електронними музичними інструментами і за своєю структурою повністю відрізняється від всіх інших форматів звукових файлів.
Для фонового звуку використовується тег <BGSOUND>.
Атрибути тега <BGSOUND>
SRC=”URL” Вказує місцезнаходження звукового файла
LOOP=n Кількість повторень звука (при значенні LOOP=INFINITE звук відтворюється протягом всього часу, поки відкритий документ)
Тег <BGSOUND> повинен бути розташований у заголовку документа і мати такий формат:
<BGSOUND SRC=”URL звукового файла” LOOP=infinite>
До HTML-документа можна вставити звуковий файл у вигляді гіпертекстового посилання, при натисканні на яке завантажується звуковий файл або відбувається супровід фоновим звуком.
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<A HREF= “URL звукового файла”> Для завантаження звукового файла натиснути тут</A>
</BODY>
</HTML>
46
Відображення файла програмою-броузером:
Завдання для самостійної роботи
1.Виконати вставлення фонового звука, який би повторювався 3 рази при відкритті сторінки.
2.Вставити до сторінки звуковий файл, який би завантажувався при натисканні на відповідне гіперпосилання.
Запитання для самоперевірки
1.Які формати використовуються для звукових файлів, що вставляються у HTML-документ?
2.За допомогою якого тега вставляється звуковий файл?
3.Як задається кількість повторень для фонового звука?
47
РОЗДІЛ 12. ТАБЛИЦІ
Мета: навчитись представляти інформацію у HTML-документі у вигляді таблиць.
Табличні теги мови HTML дозволяють подавати дані у зручній для сприйняття формі.
Основним структурним елементом таблиці є комірка, яка містить елемент даних таблиці або заголовок стовпчика даних. Логічно пов’язані комірки групуються разом у рядок таблиці. Рядки, в свою чергу, складають таблицю.
Для створення таблиці використовують тег <TABLE> і відповідний йому закриваючий тег </TABLE>. Між ними розташовані всі теги, необхідні для створення таблиці.
Комірка, яка містить елемент даних, задається парою тегів <TD> і </TD>.
Теги для побудови таблиці
Тег |
Призначення |
|
|
<CAPTION> ...</CAPTION> |
заголовок до таблиці |
<TABLE> ...<TABLE> |
визначає початок таблиці |
<TR>... </TR> |
визначає рядок таблиці |
<TD>... </TD> |
визначає елемент даних таблиці |
Тег <TABLE> може мати атрибут рамки BORDER=n, який створює рамку шириною n пікселів. За замовчуванням таблиця не окреслена рамкою. У тегу <TABLE> можна використати атрибут BORDERCOLOR для кольору рамки таблиці. Атрибут BORDERCOLOR дорівнює шістнадцятковому RGB або англійській назві кольору.
У тегу <TD> можна використати атрибут BGCOLOR, який задає колір фону комірки таблиці.
Оскільки таблиці будуються з рядків, між тегами <TR> і </TR> розташовуються всі елементи, необхідні для створення рядка таблиці.
Для створення заголовків стовпчиків даних використовуються теги <TH> і </TH>, текст в яких автоматично виводиться жирним шрифтом з вирівнюванням по центру.
Атрибут СОLSPAN (Column Span) дозволяє здійснювати об’єднання стовпчиків. Якщо необхідно створити яку-небудь комірку, ширшу, від верхньої чи нижньої, за допомогою атрибута СОLSPAN= її можна розтягнути над будьякою кількістю звичайних комірок.
ПРИКЛАД:
<TR>
<TD BGCOLOR=WHITE COLSPAN=2>
Приклад застосування атрибута об’єднання комірок
</TD>
</TR>
Атрибут UNIT= тега <ТАВLЕ> визначає одиниці вимірювання, які
48
використовуються при зазначенні розмірів як всієї таблиці, так і окремих стовпчиків. Атрибут UNIТ= може приймати такі значення:
-UNIТ=ЕN - це значення надається за замовчуванням і визначає одиницю вимірювання, яка дорівнює еn-пробілу. Еn-пробіл - це друкарська одиниця вимірювання, яка дорівнює ширині літери <n>. Реальний розмір пробілу залежить від обраного шрифту. Як правило, еn-пробіл дорівнює половині розміру шрифта;
-UNIТ=RELATIVE - використовується для визначення відносної ширини стовпчиків у процентах від загальної ширини таблиці;
-UNIТ=РIXELS – це значення використовується, якщо необхідно точно визначити ширину стовпчика на екрані. Наприклад, тег <ТАВLЕ UNIТ=РIXELS WIDTH=340> сформує таблицю шириною 340 пікселів.
Атрибут СЕLLPADDING= визначає ширину порожнього простору між вмістом комірки і її межами, тобто задає поля всередині комірки.
ПРИКЛАД
<TABLE BORDER CELLPADDING=20>
<TR>
<TD>Текст або дані</TD> </TR>
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<CAPTION> <H2><P ALIGN=CENTER> НАРОДНІ ЗНАННЯ </P></H2>
</CAPTION> <TABLE BORDER=1>
<TR>
<TH>Система народних знань</TH> <TH>Зміст</TH>
</TR>
<TR>
<TD ALIGN=CENTER><B><I>Народна астрономія</B></I></TD>
<TD ALIGN=LEFT>Астрономія як наука була відома в Україні ще у XVII ст. і викладалась у братських школах. Самобутня астрономічна номенклатура українців засвідчує їх добру обізнаність з основними сузір’ями.
</TD>
</TR> <TR >
49
<TD ALIGN=CENTER> <B> <I> Народна метеорологія </B></I>
</TD>
<TD ALIGN=LEFT> Одна з найдавніших галузей народних знань, що обіймає систему прикмет, раціональних спостережень і достовірних передбачень про погодні зміни на близький чи віддалений час. Широко побутували прикмети, що дозволяли прогнозувати погодні зміни протягом найближчого часу за особливостями сходу і заходу Сонця, його кольору, за виглядом нічного неба, яскравістю зірок і Місяця тощо.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Відображення файла програмою-броузером:
Розширені можливості розмітки таблиці
Зображення у таблиці
Комірки таблиці можуть містити також зображення. Наприклад, графічні маркери можна розташувати в комірках таблиці (приклад взято з Розділу 10.
Графіка).
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H2 ALIGN=CENTER>ПОСЕЛЕННЯ, ЖИТЛО, ЗАБУДОВА </H2> <HR SIZE=8 WIDTH=40% COLOR=RED>
<TABLE BORDER=1>
50