28_matvienko-web
.pdfАтрибутом VALUE визначається текст, який буде написаний на кнопці. Якщо цей атрибут відсутній, на кнопці буде напис “Reset”.
Тип SUBMIT збирає дані і надсилає Web-серверу для обробки. Кнопку SUBMIT повинна мати кожна форма. Атрибут VALUE визначає текст, який буде написаний на кнопці. Якщо цей атрибут відсутній, на кнопці буде напис
“SubmitQuery”.
ПРИКЛАД
Файл у форматі HTML:
<HTML>
<HEAD><TITLE>Моя перша HTML-сторінка</TITLE></HEAD> <BODY>
<FORM ACTION=”HTTP://WWW.SERVER.COM/CGI-BIN/USERINF O. CGI” METHOD=”POST”>
Им’я:<INPUT TYPE=”TEXT” NAME=”FULINAME” SIZE=30> <BR> E-mail: <INPUT TYPE=”TEXT” NAME=”EMAIL” SIZE=30> <B R>
<P> <HR></P>
Зазначте тип операційної системи, з якою Ви постійно працюєте<BR> <INPUT TYPE=”CHECKBOX” NAME=”Windows”VALUE = “YES”
CHEKED>Windows or DOS <BR>
<INPUT TYPE=”CHECKBOX” NAME=”MAC”VALUE= “YES” CHEKED> MAC <BR>
<INPUT TYPE=”CHECKBOX” NAME=”UNIX”VALUE= “YES” CHEKED>UNIX <BR>
<TEXTAREA NAME=”COMMENTS” COLS=80>
Повідомте Вашу думку щодо інформаційного наповнення сайту
</TEXTAREA>
<INPUT TYPE=button VALUE=” Відмінити”> <INPUT TYPE=button VALUE=” Надіслати”>
</FORM></BODY></HTML>
61
Відображення файла програмою-броузером:
Завдання для самостійної роботи
1.Створити форму, яка запитує у користувача адресу його електронної пошти, і дати відповідь на одне із запитань анкети (тип введення даних встановлюється такий, щоб було обрано тільки один перемикач у групі).
2.Створити форму, яка містить меню з трьох пунктів.
3.Створити форму, яка містить поля:
-для запиту пароля шириною 20 символів і з максимальною кількістю символів, які в нього можна ввести – 18;
-текстове вікно (багаторядкове текстове поле для введення інформації) з 80 стовпчиків і 10 рядків.
Запитання для самоперевірки
1.Який тег застосовується для організації взаємодії з користувачем (вікна введення тексту, прапорці, перемикачі, меню тощо)?
2.За допомогою яких тегів створюються кнопки у формах для інтерактивної взаємодії з користувачем?
3.За допомогою яких атрибутів задається розмір текстового вікна для введення інформації?
62
РОЗДІЛ 15. СТИЛІ
Мета: опанувати різні способи створення стилів для HTML-документів. Стиль HTML – це набір характеристик шрифту, символів і абзацу,
застосовуваних до певної частини документа. Застосування стилів дозволяє уникнути необхідності додавання до HTML нових тегів форматування, оскільки нові команди форматування можуть включатись у стиль, а не у HTMLфайл. Застосування стилів дозволяє з меншими витратами праці оновлювати сторінки, оскільки форматування буде відділене від змісту.
Таблиці каскадних стилів ( Cascading Style Sheets )
CSS – це мова, яка містить набір властивостей для визначення зовнішнього виду документів. За допомогою таблиці каскадних стилів дизайнер може повністю контролювати стиль і розташування кожного елемента HTMLдокумента.
Internet Explorer підтримує стилі, які задаються одним із способів:
-вбудовані стилі ( Global Style Sheets ) визначають стиль елементів у всьому документі. Інформація про стиль задається в заголовку документа з використанням тегів <STYLE> і </STYLE>;
-залучені стилі ( Linked Style Sheets ) – інформація про стиль зберігається у окремому файлі, вказаному у тегу <LINK>, і може бути застосована для декількох документів;
-внутрішні стилі ( Inline Style Sheets ) – інформація про стиль розміщується всередині тега HTML і поширюєтьсся на весь текст між цим тегом і відповідним йому кніцевим тегом.
CSS дозволяє маніпулювати такими властивостями елементів: властивості шрифту, властивості тексту, властивості фону і кольору, властивості блоку, властивості елемента та ін.
Всі елементи Web-сторінки можна поділити на блокові і рядкові. Типовим прикладом блокового елементу є малюнок (тег <IMG>). Рядковим елементом є окреме слово або рядок тексту, але цілий абзац вважається блоковим елементом. Стилі, які можна застосувати до блокових і рядкових елементів, відрізняються. До блокових елементів можна застосувати всі рядкові стилі, але до рядкових елементів не можна застосувати блокові стилі.
До блокових елементів відносяться:
-абзац тексту (<P>);
-малюнок, графічне зображення (<IMG>);
-таблиця (<TABLE>);
-список (<OL>,<UL>).
Крім того, блоковим елементом розмітки можна примусово зробити будьякий рядок і навіть будь-яке слово в документі, застосувавши до нього теги
<DIV> …</DIV>.
Вміщення будь-якого елемента між цими тегами дозволяє застосувати до нього атрибути стилю, пов‘язані з межами, відступами, “ набивками” та ін.
63
Розглянемо абзац як блоковий елемент (див. рис.1)
РИС.1
Абзац як блоковий елемент має такі характеристики:
-висоту і ширину (height, width);
-межі;
-обтікання, тобто положення блоку відносно тексту, який знаходиться поряд;
-поле і “ набивка” (margin, padding).
“Набивкою” називається відстань від межі блокового елемента до межі його вмісту. Відстань від межі блоку до зовнішнього блокового елемента називається відступом або зовнішнім відступом.
Правила запису CSS задаються у формі простих і групових селекторів. Найпростіше правило CSS задається таким чином:
Селектор { властивість CSS: значення }
Селектор - це будь-який із розглянутих тегів HTML (наприклад, BODY, P, H1, LI). Далі у фігурних дужках декларується значення властивостей CSS, які визначають стиль даного елемента в документі.
Наприклад:
H1 {color:red} – задає стиль заголовкам першого рівня.
Для зручності використання можна декларувати у одному правилі декілька властивостей CSS для декількох селекторів.
Наприклад:
BODY {background-color:white; color:black; font-family:Times New Roman; font-style:normal; font-size:10pt} (задає стиль всьому тілу документа замість атрибутів тегу BODY).
64
Параметри шрифтів і абзаців, доступні в стилях HTML |
|
|||
Параметр |
|
Можливі значення |
|
|
Font-family |
Будь-який шрифт, припустимий у Windows1 |
|
||
Font-size |
Будь-який розмір шрифту в пунктах (pt), дюймах (in), |
|||
сантиметрах (cm) або пікселях (px) |
|
|
||
Font-weight |
Виділення (“ жирність”) шрифта: Normal, |
bold (звичайний, |
||
напівжирний) |
|
|
|
|
Font-style |
Стиль елемента – звичайний або курсив (Italics) |
|
||
Font-decoration |
“ Оформлення” тексту: none, underline, |
italic, |
line- |
|
through (відсутній, підкреслений, нахилений, перекреслений) |
|
|
||
Color |
Будь-яке значення RGB або англійська назва кольору |
|
||
Text-align |
Left, center, right, justify (ліворуч, по центру, |
праворуч, |
по |
|
ширині) |
|
|
|
|
Text-indent |
Відступ - будь-яка величина в пунктах (pt), |
дюймах |
(in), |
|
сантиметрах (cm) або |
пікселях (px) |
|
|
|
Параметри |
обтікання, тобто позиціонування елементів на сторінці, |
|||
дозволяють створити ефект, при якому блоковий елемент не розриває текст, а вбудовується в нього. Цього ефекту дозволяє досягти атрибут float.
Значення атрибуту float
Left |
Блок притиснутий ліворуч, текст обтікає його праворуч |
Right |
Блок притиснутий праворуч, текст обтікає його ліворуч |
Both |
Текст обтікає блок з обох боків |
Відступ і набивка разом становлять те поле, яке знаходиться між межею основного елемента (сторінки) і вмістом внутрішнього (вкладеного) елемента. Поле і набивку можна задати як одразу для всього блоку, так і для кожної сторони окремо.
Padding-right |
Набивка праворуч |
Padding-left |
Набивка ліворуч |
Padding-top |
Набивка зверху |
Padding-bottom Набивка знизу |
|
Margin-right |
Праве поле (відступ) |
Margin-left |
Ліве поле |
Margin-top |
Верхнє поле |
Margin-bottom Нижнє поле
Границі блоку можуть характеризуватись кольором, шириною, стилем. Колір для всієї границі задається “border-color: колір”. Для кожної лінії
границі можна задати колір окремо: Border-right-color – колір правої лінії; Border-left-color – колір лівої лінії; Border-top-color – колір верхньої лінії; Border-bottom-color – колір нижньої лінії.
Ширина границі блоку визначається атрибутом border-width, вона може задаватись у пікселях (px), друкарських пунктах (pt) або у процентах (%).
65
Можна окремо вказати ширину правої, лівої, верхньої і нижньої лінії: border-
right-width, border-left-width, border-top-width, border-bottom-width.
Для границі можна задати стиль за допомогою атрибута border-style: None – границі не відображуються;
Solid – безперервна лінія; Dotted – пунктирна лінія; Dashed – штрихова лінія; Double – подвійна лінія; Groove – об‘ємна канавка; Ridge – об‘ємний гребінець; Incet – складка всередину; Outset – складка назовні.
НАПРИКЛАД:
<p style=”border-color:red;border-style :dashed;border-top:10px purple double>
(абзац буде окреслений зверху подвійною лінією бузкового кольору шириною 10 пікселів, решта ліній – червоні штрихові).
Списки
CSS дозволяють управляти формою маркера, який розташований поряд з елементом списка за допомогою атрибута list-style-type:
disk – маркер у вигляді диску; circle – маркер у вигляді кола; square – маркер у вигляді квадрата.
У нумерованих списках встановлюються такі значення атрибута: Lower-roman – малі римські цифри (i, ii, iv,…);
Lower-alpha – малі латинські букви (a,b,c,d,..); Upper-roman – великі римські цифри (I,II,IV,…); Upper-alpha – великі латинські букви (A,B,C,D,F,..);
Decimal – цифри (1,2,3,…).
За допомогою атрибута list-style-position можна визначити, яким чином буде розташований маркер відносно списка. Атрибут може приймати значення:
inside – вміст спискового елементу виходить за рівень маркера; outside – вміст спискового елементу не виходить за рівень маркера.
Колір і фон сторінки
Фон сторінки задається атрибутом background-color:колір.
Фоновий малюнок задається за допомогою атрибута background-image:
ім‘я файла1.
Вбудовані стилі
Інформація про стилі міститься в заголовку документа. Інформація про стиль задається у такому виді: назва тега, за яким у дужках перелічені
1 Розгорнутий перелік значень атрибуту background-image наведено в: Сенченко Н. Устрой себе легкую
жизнь//Мой компьютер.-2001.-№49.-С.14-15.
66
характеристики стилю.
Наприклад, в документі текст має бути шрифтом Arial розміром 14 пунктів, колір тексту чорний, вирівнювання по ширині, заголовки шрифтом Arial розміром 16 пунктів, курсив, вирівнювання по центру:
<HTML>
<HEAD>
<STYLE TYPE=”TEXT/CSS”>
P {color: black; font-family: Arial; font-size:14 pt; font-style:italic; textindent:45 px; text-align:justify;}
H1 {color:black; font-size:16 pt; font-family: arial; text-align:center; fontstyle:italic}
</STYLE>
</HEAD>
<BODY>
<H1>Свята й обряди календарного циклу</H1>
<P> Календарні свята й обряди - складний фольклорний комплекс, в якому поєднуються раціональний досвід і релігійно-магічні вірування, високоестетичні традиції та пережиткові звичаї.</P>
</BODY>
</HTML>
Відображення програмою-броузером:
Залучені стилі
У випадку, якщо планується використовувати одні і ті ж стилі на декількох HTML-сторінках, найбільш ефективним буде збереження інформації про стилі у файлі, до якого будуть звертатись всі HTML-документи.
Для створення залученого стилю необхідно спочатку створити файл стилів. Це звичайний текстовий файл, який містить інформацію про стиль. Файл стилів зберігається з розширенням .css
Файл STYLE.CSS:
P {color:black; font-family: arial; font-size:14 pt;font-style:italic; textalign:justify;}
H1 {color:black; font-size:16 pt; font-family: arial; text-align:center; fontstyle:italic}
67
Використовуючи тег <LINK> в заголовку кожного HTML-документа можна посилатись на цей файл таким чином:
<HEAD>
<TITLE> Мій документ </TITLE>
<LINK REL=STYLESHEET HREF=”C:/SITE/STYLE.CSS”>
</HEAD>
Атрибут REL описує відношення файла, який залучається, до основного, тобто те, що залучуваний файл є файлом стилів.
Внутрішні стилі
Внутрішні стилі можуть бути задані всередині HTML-тега. Відповідний стиль відноситься до частини документа, вміщеній між даним тегом і відповідним йому кінцевим тегом.
Приклад:
<P STYLE=”text-align:center; color:blue”>
Національне вбрання
</P>
<P>
Народні заняття
</P>
(Текст «Національне вбрання» буде розташований по центру і одержить синій колір. Цей стиль діє до тега </p>, і в цьому місці броузер повернеться до того стилю, який використовувався до задання цього внутрішнього стилю).
Завдання для самостійної роботи
1.Створити HTML-документ такого змісту:
Рослини й тварини в народній уяві
Світ рослин життєво необхідний людині. Протягом тисячоліть багато рослин використовуються в найрізноманітніших сферах господарської діяльності, є незамінними продуктами харчування, цілющими оздоровчими засобами.
У традиційних уявленнях українців значне місце відводилося багатому і різноманітному світу тварин. Звірі, птахи, плазуни, земноводні, комахи присутні в народних обрядах та іграх, у системі прикмет і ворожінь тощо.
В документі слова “ світ рослин” і “ світ тварин” позначити як гіперпосилання (без зазначення конкретних назв файлів, на які робиться посилання – залишити пропуск).
Уствореному документі встановити вбудований стиль:
−для тіла документа: розмір шрифту 14 пт, гарнітура шрифту – Times, стиль – нормальний, вирівнювання тексту по ширині;
−для заголовка: розмір шрифту – 18 пт, гарнітура – Arial, оформлення – з нахилом, вирівнювання – по центру;
−для абзаца: розмір шрифту – 14 пт, гарнітура – Arial, оформлення – виділений, вирівнювання – по ширині;
68
−для гіперпосилань: розмір шрифту – 14 пт, гарнітура – Arial, напівжирний шрифт, колір посилань – синій.
1.Створити ще два HTML-документа і дати їм імена FAUNA.HTM і
FLORA.HTM:
FAUNA.HTM:
Фауна як об’єкт персоніфікації
На змісті вірувань позначився вплив реальних властивостей тих чи інших представників тваринного світу. Образи звірів, птахів, плазунів тощо присутні в багатьох жанрах українського фольклору. Особливою популярністю користувалися казкові сюжети про різноманітних представників тваринного світу.
FLORA.HTM:
Флора: символічне і прагматичне
Поряд з утилітарною функцією рослини займали значне місце в широкому комплексі традиційних вірувань, звичаїв і забобонів. Обряди і повір’я, пов’язані з деревами, травами, зіллям і квітами, доносять відгомін язичницьких уявлень наших предків про навколишню природу і базуються як на реальних, так і на уявних властивостях рослин.
У файлі з першого завдання встановити посилання на створені файли. Створити файл стилів з розширенням .css із встановленням параметрів,
зазначених у першому завданні. У кожному із файлів задати посилання на створений файл стилів (у файлі з першого завдання видалити вбудований стиль).
2. У одному із створених файлів видалити посилання на файл стилів і встановити внутрішні стилі, які відрізняються від тих, що були раніше.
Запитання для самоперевірки
1.Дати визначення стилю документа.
2.Якими способами підтримуються стилі у HTML-документі?
3.Пояснити різницю між способами підтримки стилів документа.
4.Які основні параметри шрифтів та абзаців доступні у стилях
HTML?
69
РОЗДІЛ 16. ТЕГ <META>
Мета: опанувати принципи надання HTML-документу пошукових ознак. Пошукові системи мережі Інтернет представляють результати пошуку у вигляді списка найбільш релевантних запиту сайтів. Постійне зростання кількості WEB-ресурсів і конкуренція серед них за вміщення посилання на ресурс на початок списку результатів пошуку потребує певних заходів, які дозволять пошуковій системі знаходити ресурс у мережі і вміщувати його на початок списка як такий, що найбільш повно відповідає запиту, введеному
користувачем.
Багато з пошукових служб індексують тільки початкові сторінки сайтів. Як правило, індексуванню підлягають такі елементи документа: заголовок <TITLE>, заголовки рівнів <H1>...<H6> в тілі документа і ключові слова, задані в <META>-тезі.
Таким чином, для того, щоб документ був знайдений у мережі, необхідно уважно ставитись до вибору назви документа, створення його структури і використання <META> -тегів.
Наприклад, тег <META NAME=”Keywords” LANG=ru CONTENT=” “>
задає список ключових слів, які містяться в документі, а тег <META NAME=”Description” CONTENT=” “> є словесним описом змісту документа.
Створювач або розробник документа володіє глибокими знаннями про документ (його зміст, призначення, відношення до інших документів тощо) і може кваліфіковано описати створений ним документ для його подальшого ефективного пошуку. У випадку, якщо відповідні метадані не надаються автором чи створювачем особисто, видавець вимушений залучати досвідчених спеціалістів для створення відповідних метаданих.
Для опису HTML-документа з метою його подальшого ефективного пошуку роботами пошукових машин мережі застосовується тег <META>, до якого вміщуються дані про документ.
Під метаданими розуміють інформацію або “ дані про інші дані” або об’єкти. У HTML-файлі метадані вміщені у <МЕТА>-теги, які розташовані у заголовку файла. Метадані знаходять застосування у різних галузях для ідентифікації і класифікації електронних і неелектронних документів для реалізації у мережевому середовищі інформаційного пошуку, фільтрації інформації та ін.
Для забезпечення ефективної роботи у глобальному середовищі необхідно стандартизувати метадані. В межах окремих ініціатив здійснюються спроби розробити ефективні міжнародні стандарти, які відповідають вимогам сітьового інформаційного середовища.
Машинопрочитувані бібліографічні записи MARC (Machine-Readable Cataloging Records) - один з перших найбільш відомих форматів метаданих для підготовки “ даних про дані” у електронній формі. Однак сфера застосування цього формату обмежувалась бібліографічними метаданими. Подібно
70