28_matvienko-web
.pdf
РОЗДІЛ 8. ТЕКСТОВІ ЕФЕКТИ
Мета: опанувати основні засоби оформлення текстової інформації в HTML-документі.
Текст, який рухається
Управляти появою і рухом тексту дозволяє тег <MARQUEE>
Приклад:
<MARQUEE>Приклад тексту, який рухається</MARQUEE> Таблиця 1.
Атрибути тегу <MARQUEE>
Атрибут |
Призначення |
|
|
|
BGCOLOR=RGB |
Визначає колір вікна, у якому |
|||
|
рухається текст |
|
|
|
BEHAVIOR=SCROLL| SLIDE| |
Визначає спосіб появи тексту у вікні |
|||
ALTERNATE |
|
|
|
|
DIRECTION=LEFT|RIGHT |
Вказує напрямок, у якому рухається |
|||
|
текст |
|
|
|
SCROLLAMOUNT=N |
Вказує |
число |
пікселів |
між |
|
послідовностями |
тексту, |
який |
|
|
рухається |
|
|
|
SCROLLDELAY=N |
Вказує затримку часу у мілісекундах |
|||
|
між появою тексту |
|
|
|
HEIGHT=pixels|percent |
Визначає вікно для тексту, який |
|||
|
рухається, у пікселях або процентах |
|||
|
від вікна перегляду броузера |
|
||
WIDTH= pixels|percent |
Те ж, але визначає ширину |
|
||
HSPACE=N |
Визначає відступи зверху і знизу |
|
||
VSPACE=N |
Визначає відступи праворуч і ліворуч |
|||
LOOP=n|INFINITE |
Задає число повторень |
|
||
ALIGN=TOP|MIDDLE|BOTTOM |
Задає тип вирівнювання |
|
||
Розмір шрифту
Основний розмір шрифту завжди дорівнює 3, якщо він не змінений тегом
<BASEFONT=n>, де n=1-7.
Пара тегів <FONT>…</FONT> дозволяє задавати розмір, колір і гарнітуру тексту, що міститься між цими тегами
Атрибути тегу <FONT>1:
1 На зміну тегам управління шрифтами у останніх специфікаціях HTML прийшли властивості шрифтів (font-family, font-size, font-style, font-variant, font-weight) із списків стилів CSS, які будуть розглянуті у наступних розділах.
31
SIZE=n (n=1-7) |
Встановлює |
розмір |
шрифта – |
абсолютний або відносний |
|||
|
розмір шрифта. Відносний розмір – |
це розмір |
відносно |
||||
|
SIZE=3 |
або розміру, заданого тегом <BASEFONT>. Для |
|||||
|
задання шрифту у відносних одиницях необхідно вказати, |
||||||
|
наскільки більшим (+) або меншим (-), ніж основний, має |
||||||
|
бути шрифт, що задається. Мінімальне абсолютне значення |
||||||
|
розміру |
шрифту 1, |
максимальне – 7. |
Наприклад: |
<FONT |
||
|
SIZE=10> |
|
|
|
|
|
|
COLOR= |
Встановлює |
колір |
шрифту |
(RGB). |
Наприклад: |
<FONT |
|
|
COLOR=#00CED1 |
|
|
|
|
||
FACE = |
Гарнітура шрифту – |
задає ім’я (Arial, Times New Roman та |
|||||
|
ін..) шрифту (або переліку шрифтів) на комп‘ютері |
||||||
|
користувача. У випадку відсутності шрифтів текст |
||||||
|
відображається шрифтом, прийнятим за замовчуванням у |
||||||
|
броузері користувача. Гарнітуру шрифту можна переглянути |
||||||
|
у папці Шрифты (Панель управления у папці Мой |
||||||
|
компьютер або пункт головного меню Настройка). |
||||||
|
Наприклад: |
<FONT FACE="Arial">Приклад |
шрифту |
||||
Arial</FONT>
ПРИКЛАД (для основного шрифту розміром 3)
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H1 ALIGN=CENTER> УКРАЇНСЬКА МИНУВЩИНА</H1><BR> <H2 ALIGN=CENTER><FONT SIZE=2> Етнографічний довідник
</FONT> </H2><BR>
<P |
ALIGN=CENTER><B><FONT |
SIZE |
=4>ОБРЯДОВА |
ЇЖА</FONT></B></P> <DL>
<DT><B>ПАСКА</B></DT>
<DD>весняний обрядовий хліб, який готували до Великодня. Дуже здобне вчинене тісто на яйцях, маслі, сметані, олії, цукрі добре вимішували і ставили у тепле місце сходити.</DD>
</DL>
</BODY>
</HTML>
32
Відображення файла програмою-броузером:
Завдання для самостійної роботи
1. Представити інформацію у вигляді трьох рядків тексту, в кожному з яких розмір літер має бути на 2 пункти більший, ніж у попередньому. Рядки повинні бути розташовані один під одним, посередині екрану.
Приклад тексту:
Розвиток ремесел та промислів Гончарство – обробка глини та виготовлення різноманітного кухонного
посуду, а також цегли, кахлів та іншої кераміки.
Теслярство – один із найбільш масових деревообробних промислів.
3. Представити інформацію у вигляді рядка, який рухається справа наліво. Вікно, у якому розміщений текст, повинно бути блакитного кольору, а текст – червоного кольору. Висота вікна, у якому рухається текст, повинна бути 50% від вікна перегляду, а ширина - 60 %.
Запитання для самоперевірки:
1.Який розмір шрифту є прийнятим за замовчуванням?
2.За допомогою якого тега змінюється розмір шрифту?
3.За допомогою якого атрибута встановлюється колір шрифта?
4.Який тег використовується для встановлення рядка, який рухається? Охарактеризувати його атрибути.
33
34
РОЗДІЛ 9. ГІПЕРТЕКСТОВІ ПОСИЛАННЯ
Мета: опанувати способи створення гіперзв’язків у HTML-документах. Гіпертекстовий документ – це документ, який містить пов`язані
посилання (гіпертекстові посилання) на інші документи, дозволяючи здійснювати переходи між ними за допомогою натискання вказівником мишки на гіперпосиланні.
Гіпертекстове посилання складається з двох частин: вказівника і адресної частини (URL). Вказівник – текст (або графічне зображення), на якому користувач повинен клацнути для того, щоб перейти в інше місце. URL – вказує адресу, з якої броузер буде завантажувати документ, коли користувач підведе до неї вказівник і натисне кнопку мишки. Текстові вказівники, як правило, підкреслені і виділені кольором.
Щоб дізнатись, чи є елемент сторінки гіпертекстовим посиланням, слід підвести до нього вказівник мишки. Якщо вказівник набере вигляду долоні, елемент є посиланням.
Будь-який текст може бути гіпертекстовим вказівником в HTML, незалежно від його розмірів або використаного форматування.
Формат адресного вказівника: |
|
<A HREF= “URL”> текст вказівника</A> |
|
Літера А у тегу <A HREF> означає вказівник |
(anchor), а HREF – |
“ гіпертекстове посилання” (Hypertext REFerence). |
|
Між початковим і кінцевим тегами знаходяться |
текст вказівника або |
зображення, які є гіпертекстовим посиланням на документ (або область документа), казаний у значенні <A HREF= “URL”>.
Можливі значення:
http://... - створює посилання на WWW-документ;
ftp://... - створює посилання на ftp-сайт або розташований на ньому
файл.
Якщо тип з’єднання і адреса машини не вказані, відправною точкою є адреса поточного документа. Це дозволяє використовувати відносні посилання. Наприклад, посилання <A HREF = “docs/title.htm”> Документація </A> зроблене на файл title.htm у папці docs.
ПРИКЛАД (поєднання гіпертекстовими посиланнями двох файлів)
1.Створити файл 1.htm: <HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H1 ALIGN=CENTER>
НАРОДНІ ВІРУВАННЯ, ДЕМОНОЛОГІЯ, КОСМОГОНІЯ</H1>
35
<A HREF= “2.htm”> Українська міфологія</A> </BODY>
</HTML> 2.Створити файл 2.htm:
<HTML>
<HEAD>
<TITLE>Пов’язана сторінка</TITLE> </HEAD>
<BODY>
<H3 ALIGN=CENTER>Українська міфологія</H3>
<P ALIGN=JUSTIFY>
Українська міфологія як сукупність переказів про живу й неживу природу та людину розвивалася на основі давньої загальнослов’янської міфології. В українській міфології у художньо-образній формі знайшли поєднання реальні знання з фантастично-релігійними елементами та повір’ями.
</P>
<A HREF=”1.htm”> На початкову сторінку</A> </BODY>
</HTML>
Відображення файлів програмою-броузером:
Файл 1.htm
Файл 2.htm
Гіпертекстові посилання можуть існувати в межах одного документа,
36
тобто бути внутрішніми. Цей тип посилань застосовується для зручності пересування у межах документа. Для цього необхідно задати імена тих областей документа, на які необхідно послатись.
Атрибут NAME – позначає область документа, яка знаходиться між початковим і кінцевим тегами як можливий об’єкт для посилання. Значенням NAME може бути написане латиницею будь-яке слово-вказівник, унікальне для даного документа. Наприклад:
<A NAME=”part”> Розділ 1</A>.
Тепер можна посилатись на цю зону простим вказуванням її імені після імені документа.
Наприклад, посилання <A HREF=”document.html#part”> Розділ 1</A>
відправляє користувача у розділ “part” файла document.htm, а посилання
<A HREF=”#bottom”> В кінець документа</A> - у розділ “bottom”
поточного документа.
При переході за гіперпосиланням, застосованим до певної частини документа, зміст цієї частини з’являється, починаючи з початку вікна.
ПРИКЛАД
Доповнити зміст файлу 2.htm і виконати його розбиття на розділи: <HTML>
<HEAD>
<TITLE>Пов’язана сторінка</TITLE> </HEAD>
<BODY>
<A NAME=”part”> Зміст</A><BR>
<A HREF=”2.htm#part1"> Розділ 1. Українська міфлогія</A><BR> <A HREF=”2.htm#part2"> Розділ 2. Космогонічні уявлення</A><BR>
<P ALIGN=CENTER><A NAME=”part1" > Розділ 1</A> <H3 ALIGN=CENTER>Українська міфологія</H3>
<p align=justify>Українська міфологія як сукупність переказів про живу й неживу природу та людину розвивалася на основі давньої загальнослов’янської міфології. В українській міфології у художньо-образній формі знайшли поєднання реальні знання з фантастично-релігійними елементами та повір’ями. В цілому українська міфологія аналогічна міфології інших країн світу, проте вона має виразний національний колорит і художньообразну своєрідність. В українській міфологічній традиції багато уваги приділялося природним стихіям, явищам оточуючого світу, різноманітним життєвим випробуванням, з якими зустрічається людина.</p>
<A HREF=”2.htm#part”> повернутись до змісту</A><BR>
<P ALIGN=CENTER><A NAME=”part2"> Розділ 2</A><BR> <H3 ALIGN=CENTER>Космогонічні уявлення</H3>
<P ALIGN=JUSTIFY>Система народних міфологічних вірувань та поглядів на сутність і походження небесних тіл Сонячної системи та зірок. Традиційні погляди українців на походження землі мають виразне
37
християнське забарвлення - вона створена Богом із грунту, добутого з морського дна. Такими ж загальнопоширеними є уявлення про форму Землі, яка мислилася плескатою та округлою, прикритою зверху небесним дахом. Уявлення українців про небесні світила значною мірою зберегли архаїчні язичницькі елементи. У побутових оповідях, обрядах присутні елементи міфів та символіки, в яких виразно проглядаються залишки культу Сонця. Аналогічними є уявлення українців про Місяць як “ божу силу”, від якої залежить людське життя. До Місяця зверталися із замовляннями, прохаючи допомоги. <BR>
<A HREF=”2.htm#part”> повернутись до змісту</A><BR>
<P ALIGN=RIGHT><A HREF=”1.HTM”> На початкову сторінку</A> </BODY>
</HTML>
Гіперпосилання може бути у вигляді графічного зображення: <A HREF= “URL”> <IMG SRC=” адреса файла”></A>
ПРИКЛАД (посилання на адресу в мережі Internet) Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<P ALIGN=CENTER>
<B>УКРАЇНСЬКА МИНУВЩИНА </B><BR> <I>Етнографічний довідник</I><BR>
<U>До читача</U> </P>
<P ALIGN=RIGHT>
По додаткову інформацію за цією темою звертатись: <BR><A HREF= “http://www.nbuv.gov.ua”> <I> Національна бібліотека України
38
ім.В.І.Вернадського</I></A></P> </BODY>
</HTML>
Відображення файла програмою-броузером:
У тегу <BODY> можуть визначатись колір тексту гіпертекстового вказівника, в тому числі і того, за яким вже було здійснено переходи.
Атрибути тегу <BODY> :
LINK Задає колір тексту, який є вказівником гіпертекстового посилання.
Наприклад: <BODY LINK= # FF1493> ALINK Задає колір вказівника активного посилання
VLINK Задає колір тексту вказівників посилань, за якими вже були здійснені переходи
Гіперпосилання може бути у вигляді графічного зображення. В цьому випадку замість тексту вказівника необхідно зазначити адресу файла, який містить графічне зображення:
<A HREF= “URL”> <IMG SRC=” адреса файла”></A>
Питання, пов’язані з використанням графічних зображень, будуть розглянуті у наступному розділі.
Завдання для самостійної роботи
1.Задати червоний колір активного вказівника гіперпосилання у тегу
<BODY>.
2.Задати зелений колір вказівника гіперпосилання, за яким вже було здійснено переходи.
3.Створити HTML-документ, структурувати його за розділами. Зробити посилання на кожний з розділів документа. Виконати посилання на нижню область поточного HTML-документа.
Запитання для самоперевірки
1.Для чого призначені гіперпосилання на Web-сторінці?
2.Як можуть бути представлені гіперпосилання?
3.Чи може гіперпосилання бути здійснене в межах одного документа?
4.Чи може бути вказівником графічне зображення?
39
РОЗДІЛ 10. ГРАФІКА
Мета: опанувати технологію використання графічних зображень при оформленні HTML-документа.
Графіка Web-сторінок може містити як прості зображення, так і складні. Важливим у використанні графіки є не міра її складності, а ефективність у питаннях передавання тієї інформації, яку необхідно надати користувачам.
Горизонтальні лінії
Горизонтальні лінії є простим способом поділу великих текстів або виділення частини документа.
Для розміщення горизонтальної лінії використовується тег <HR> (Horizontal Rule). Internet Explorer підтримує різні атрибути тега <HR>, які дозволяють управляти розміром, товщиною, вирівнюванням, кольором і виглядом тіні від лінії.
Атрибути тега <HR> |
|
WIDTH =pixels|persent |
Дозволяє змінити розмір лінійки, задавши |
|
його в пікселях або в процентах від ширини |
|
екрана |
ALIGH=LEFT|RIGHT|CENTER |
Задає вирівнювання частини лінійки (за |
|
замовчуванням 1) |
SIZE=n |
Задає товщину лінії (за замовчуванням 1) |
COLOR=RGB(або назва кольору) Задає колір, яким відображається лінія
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<HEAD>
<TITLE>Моя перша HTML-сторінка</TITLE> </HEAD>
<BODY>
<H2 ALIGN= CENTER>УКРАЇНСЬКА МИНУВЩИНА </H2> <HR SIZE=8 WIDTH=40% COLOR=RED>
</H2><BR>
<P ALIGN= CENTER>Етнографічний довідник</P> </BODY>
</HTML>
40