МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

Київський національний університет будівництва і архітектури

ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ

СТВОРЕННЯ WEB-СТОРІНОК

Методичні вказівки

до виконання практичних занять

для студентів спеціальностей 192 «Будівництво та

цивільна інженерія», 051 «Економіка», 071 «Облік і

оподаткування», 073 «Менеджмент», 076 «Підприємство,

торгівля та біржова діяльність», 101 «Екологія»

Київ 2019

УДК 658:681.518

І-74

Укладачі: М.В. Коханович, старший викладач

В.О. Недін, асистент

Рецензент: О.Ю. Філімонова, канд техн. наук, доцент

Відповідальний за випуск: П.П. Лізунов, д-р техн. наук, професор

Затверджено на засіданні кафедри основ інформатики,

протокол № 8 від 16 квітня 2019 року.

Видається в авторській редакції

Інформаційні технології. Створення web-сторінок: методичні

І-74 вказівки / уклад.: М.В. Коханович, В.О. Недін. – К.: КНУБА,

2019. – 36 с.

Розглядаються використання web-технологій для

створення web-сторінок.

Призначено для студентів спеціальностей 192

«Будівництво та цивільна інженерія», 051 «Економіка», 071

«Облік і оподаткування», 073 «Менеджмент», 076

«Підприємство, торгівля та біржова діяльність», 101

«Екологія»

КНУБА, 2019

3

Зміст

Загальні положення……………………………………………………….... 4

Теоретичні відомості про створення Web-сторінок……………………… 5

Мова HTML. Створення документа в HTML.……………………………. 5

Правила CSS-стилів оформлення вигляду сторінок……………………… 7

Мова програмування JavaScript……………………………………………. 8

Практична робота №1. Звичайні HTML документи……………………… 9

Створення області заголовку сторінки……………………………………. 9

Створення тіла документа………………………………………………….. 10

Створення списків………………………………………………………...... 11

Створення таблиць…………………………………......…………………... 13

Практична робота №2. Вставка графіки, мультимедіа, гіперпосилань..... 16

Вставка графічних елементів………………………………………………. 16

Вставка об’єктів мультимедіа……………………………………………… 17

Створення гіперпосилань………………………………………………....... 18

Практична робота №3. Використання CSS-стилів……………………..... .21

Практична робота №4. Вставка форм та елементів керування………...... 25

Практична робота №5. Використання js-скриптів……………………...... 29

Список літератури………………………………………………………...... 35

4

Загальні положення

В даних методичних вказівках в рамках загального курсу

«Інформаційні технології» розглянуті сучасні інформаційні

технології, що застосовуються для створення та роботи web-сторінок.

Методичні вказівки містять інформацію про особливості

створення web-сторінок за допомогою мови HTML, оформленні їх

зовнішнього вигляду, використовуючи правила css-стилів, надання їм

інтерактивності за допомогою js-скриптів. Мета розробки методичних

вказівок полягає в ознайомленні студентів з технологіями створення

та роботи web-сторінок, які є складовими web-сайтів різних типів. Це

сформує уявлення студентів про роботу сучасних web-сайтів, які, в

свою чергу, є частиною web-простору глобальної мережі Інтернет.

Завдання сформовані у вигляді практичних робіт. Ознайомившись

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

конструювати їх структуру за допомогою html-розмітки, а також

створювати web-сторінки, використовуючи елементи звичайного

тексту, гіпертекстові елементи, списки, таблиці, графічні елементи,

об'єкти мультимедіа тощо. Навчаться оформлювати стиль web-

сторінок та їх елементів за допомогою css-стилів, а також створювати

js-скрипти, що забезпечують програмну частину роботи web-сторінок

сайту на комп’ютері-клієнті.

Метою виконання практичних робіт є оволодіння основами мови

HTML, JavaScript і правил css-стилів.

Дані методичні вказівки охоплюють основні аспекти практичного

використання засобів зі створення web-сторінок і сайтів.

Самостійне опрацювання завдань студентами сприятиме

ефективному засвоєнню теоретичного матеріалу та формуванню

навичок кваліфікованого використання інструментів для створення

контенту web-простору, що знадобиться їм у майбутньому, оскільки

будь-яка організація, в тому числі проектна або будівельна, має своє

представництво в мережі Інтернет у вигляді власного web-сайту.

5

Теоретичні відомості про створення Web-сторінок

Перегляд web-сторінок і робота з ними здійснюються за

допомогою Браузерів. Браузери Internet – це програмне забезпечення

для інтерактивного перегляду гіпертекстових документів (web-

сторінок), які, в свою чергу, є html-документами, що створені за

допомогою мови HTML.

Мова Html. Створення документа в HTML

Мова HTML (HyperText Markup Language) – це стандартизована

мова розмітки гіпертекстових документів, що відповідає

міжнародному стандарту ISO 8879. Вона інтерпретується браузерами

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

відображається на екрані монітора комп’ютера або мобільного

пристрою. html-сторінки передаються за протоколами HTTP або

HTTPS у вигляді простого чи шифрованого тексту відповідно.

Як правило html-документи зберігаються у файлах з розширенням

*.html або *.htm. Браузери та операційні системи за цим розширенням

розпізнають документи як web-сторінки. Всі html-документи

записуються в форматі ASCII (American Standard Code for Information

Interchange) і тому можуть бути створені та відредаговані у будь-

якому текстовому редакторі.

Гіпертекстовий документ поділяється на окремі структурні

елементи – компоненти його структури, за допомогою тегів. Кожен

тег складається з лівої дужки «<», імені тегу та правої дужки «>».

Теги поділяються на теги відкриття (наприклад, <H1>) і теги закриття

(</H1>). Слеш «/» вказує на те, що це є тег закриття. Між тегами

відкриття й закриття знаходиться частина інформації, що

відображається в браузері у вигляді тексту, графіки чи мультимедіа.

Самі теги є дескрипторами, за допомогою яких браузер ідентифікує

той чи інший елемент. Для кожного з них у HTML використовуються

атрибути, що визначають властивості елемента та стилі, що описують,

в якому вигляді користувач побачить інформацію на екрані.

Загальний синтаксис написання тегів такий:

<ТЕГ атрибут1="значення" атрибут2="значення">...</ТЕГ>

6

Теги поділяються на два типи: парні (контейнери) й одиночні.

Парні можуть включати в себе інші теги або текст, тому вони є

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

складаються з двох однойменних тегів відкриття і закриття.

Допускається вкладати до контейнера й інші теги, однак слід

дотримуватися їх послідовності (рис. 1.1).

Рис. 1.1. Парні теги контейнери.

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

<IMG src="drawing.jpg" height="350" width="400">

У свою чергу, теги поділяються на наступні групи: теги верхнього

рівня; теги заголовка документа; теги блочних елементів; теги

рядкових елементів; теги списків; табличні теги; елементи форм;

фрейми; теги форматування фрагментів тексту.

Теги верхнього рівня призначені для формування структури web-

сторінки та визначають розділ заголовка і тіла документа. До них

відносяться такі теги, як <HTML>, <HEAD>, <BODY>.

Теги заголовка документа призначені для інформування браузера і

пошукових систем, а також для підключення додаткових зовнішніх

файлів, які можна використовувати в роботі поточної web-сторінки. У

заголовку документа, за допомогою тегу <TITLE>, вказується текст

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

За допомогою мета-тегів <META> вказується група інструкцій для

браузера та пошукових систем, що використовується для

ідентифікації документа. Також, при необхідності, в частині

заголовку документа –відповідними тегами <SCRIPT> і <LINK>.

Решта тегів з вищенаведених груп використовується для

розміщення елементів гіпертексту в тілі документа, які

відображаються в робочій області вікна браузера при перегляді web-

сторінки.

7

Більш детальну інформацію про мову розмітки гіпертекстових

документів можна отримати з навчального посібника [2], а також

підручників [1; 4].

Правила CSS-стилів оформлення вигляду сторінок

Оформлення та визначення стилю сторінок web-сайту

здійснюється за допомогою html-верстки за безпосередньою участю

формальної мови правил CSS (Cascading Style Sheets – каскадні

таблиці стилів).

Правила CSS розміщуються у так званих таблицях стилів. Таблиці

стилів, в свою чергу, можуть розміщуватися як в самому html-

документі, так і в окремих файлах css-стилів, що мають розширення

*.css. Таблиці стилів можуть бути підключені до html-документа

чотирма різними способами.

Перший з них, коли таблиця стилів знаходиться в окремому файлі

і підключається до html-документу за допомогою тегу <LINK>,

розміщеного у цьому документі в області заголовку. При такому

підключенні шлях до зовнішнього файлу стилів вказується в атрибуті

href, наприклад:

<LINK rel="stylesheet" type="text/css" href="style.css">

Другий спосіб, коли таблиця стилів знаходиться в окремому файлі

і може бути підключена за допомогою директиви @import, що

розміщується в іншому файлі стилів, або в html-документі в межах

пари тегів <STYLE>…</STYLE>, наприклад:

<STYLE media="all">@import url(style.css);</STYLE>

Третій спосіб, коли таблиця стилів описана в самому html-

документі в межах пари тегів <STYLE>…</STYLE>.

Четвертий спосіб підключення, коли таблиця стилів, описана в

самому html-документі, застосовується безпосередньо до певного

елемента за допомогою атрибута style, наприклад:

<DIV style="position: relative;">...</DIV>

У перших трьох способах підключення таблиці CSS до документа

кожне правило CSS із таблиці стилів має дві основні частини –

селектор і блок оголошень. Селектор, розташований у лівій частині

8

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

Блок оголошень розташовується в правій частині правила. Він

поміщається в фігурні дужки «{...}» і, в свою чергу, складається з

одного чи більш оголошень, розділених між собою символом «;».

Кожне оголошення є поєднанням властивості CSS і значення,

розділених символом «:». Селектори можуть групуватися в одному

рядку через кому. В такому випадку властивість застосовується до

кожного з них.

У четвертому способі перелік оголошень, розділених між собою

символом крапка з комою, задається в атрибуті style.

Більш детальну інформацію про застосування правил CSS можна

отримати з навчального посібника [2], а також підручника [3].

Мова програмування JavaScript

JavaScript – це об’єктно-орієнтована мова програмування, яка

використовується як вбудована мова для програмного доступу до

об’єктів web-сторінок. Найбільш широке застосування знаходить у

браузерах як мова сценаріїв для додання web-сторінкам

інтерактивності. Сучасний JavaScript є безпечною мовою

програмування загального призначення.

Втілення скриптів мовою JavaScript (js-скриптів) до html-

документа здійснюється за допомогою тегу <SCRIPT>. Він дозволяє

розташовувати код скрипту в тілі html-документа в межах пари тегів

<SCRIPT>…</SCRIPT>, а також підключати зовнішні файли

скриптів, вказавши URL файлу за допомогою атрибута src. Щоб

скрипт визначався саме як скрипт мовою JavaScript, використовується

атрибут type, в якому вказується мова скрипту "text/javascript" в межах

дескриптора, наприклад:

<SCRIPT type="text/javascript">…</SCRIPT>

При підключенні зовнішнього файлу js-скриптів, наприклад з ім’ям

common.js, конструкція буде мати вигляд:

<SCRIPT type="text/javascript" src="common.js"></SCRIPT>

Синтаксис мови JavaScript подібний до синтаксису мови C. Але,

оскільки JavaScript є мовою з динамічною типізацією даних, для

9

роботи програми не потрібно описувати змінні, також будь-який

скрипт може починатися безпосередньо з оператора. Для оголошення

змінної в JavaScript можна лише присвоїти їй значення. Також змінну

можна оголосити за допомогою ключового слова var.

Більш детальну інформацію про використання JavaScript можна

отримати з підручника [1] і навчального посібника [2].

Практична робота №1

Звичайні HTML документи

До початку роботи у власній папці створіть папку з ім’ям MyWeb.

В папці MyWeb створіть файл з назвою sample.html. Для редагування

цього файлу відкрийте його в текстовому редакторі Блокнот або

Notepad++, перегляд його як web-сторінки будемо здійснювати у

web-браузері (Internet Explorer, Mozilla Firefox, Google Chrome).

Після здійснення змін у файлі та перед перевіркою результатів

його відображення в браузері необхідно кожного разу зберігати зміни

в текстовому редакторі (комбінація клавіш Ctrl+S, або пункт меню

Файл/Сохранить), а в браузері – оновлювати сторінку (клавіша F5).

У файлі sample.html введемо теги, за допомогою яких браузер

буде розпізнавати текст поточного файлу як текст HTML документа.

Кожний HTML документ починається і закінчується тегом <HTML>:

Між тегами початку <HTML> і кінця </HTML> вводиться вміст

поточного документа за допомогою інших тегів мови HTML.

Створення області заголовка сторінки

Наведемо приклад створення області заголовка сторінки:

10

У ньому вказана спеціальна група інструкцій, яка позначається у

заголовку тегом <META>. Ці інструкції призначені в основному для

описання та індексування документа пошуковими машинами. Всі теги

META не видні при перегляді документа. Команди <META>

вносяться у заголовку гіпертекстового документа в межах блоку

<HEAD>...</HEAD>. Тег закриття </META> заборонено.

Атрибут HTTP-EQUIV керує діями браузерів і може

використовуватися для уточнення інформації, що видається

звичайним заголовком.

Атрибут CONTENT визначає зміст. У даному прикладі

визначається текст змістовної частини документа, а таблиця набору

символів визначається за допомогою CHARSET.

Атрибут NAME використовується для завдання імені визначення,

CONTENT визначає вміст визначення.

Створення тіла документа

Тіло документа. Атрибути тіла документа

Наведемо приклад тіла документа:

Атрибут bgcolor встановлює колір фону робочої частини вікна

браузера. Атрибут text встановлює основний колір тексту, який буде

використано для всього документа. Атрибут link встановлює колір для

гіперпосилань. Атрибут vlink встановлює колір для гіперпосилань, на

яких вже побували. Атрибут alink встановлює колір для

гіперпосилання, на яке здійснюється натискання.

Також для тегу BODY можна використовувати атрибут

background, за допомогою якого можна задати фоновий рисунок. Для

нього необхідно задати url-адресу файлу з рисунком.

11

Заголовок розділу документа, абзаци. Використання атрибутів

Розглянемо приклад:

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

допомогою тегів <H1></H1>, <H2></H2>. Існує 6 рівнів заголовка –

від 1 до 6. Абзаци в html-документі утворюються парою тегів

<P></P>. Вирівнювання тексту в абзаці по центру, по лівому краю, по

правому краю, по ширині здійснюється застосуванням атрибута align.

За допомогою тегів <B></B>, <U></U> і <I></I> здійснюється

відповідно накреслення тексту жирними літерами, підкреслення

тексту і накреслення курсивом. За допомогою тегу <FONT></FONT>

можна змінювати параметри шрифту за допомогою наступних

атрибутів:

size – визначає розмір шрифту (1…7);

color – визначає колір шрифту;

face – визначає тип шрифту.

Для того, щоб розірвати абзац, використовується тег <BR>. Цей

тег не потребує парного тегу закриття. Для заборони розриву рядка в

абзаці використовується тег <NOBR>…</NOBR>.

Створення списків

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

12

У цьому прикладі атрибут type тегу <UL> визначає тип маркера і

може набувати наступні значення:

disk – зафарбоване коло;

circle – не зафарбоване коло;

square – квадрат.

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

У цьому прикладі атрибут type тегу <OL> визначає тип нумерації і

може набувати наступні значення:

1 – арабські цифри;

A – великі літери;

a – маленькі літери;

I – великі римські цифри;

i – маленькі римські цифри.

13

Списки визначень

У цьому списку тег <DT> є визначенням списку визначень, тег

<DD> – описом списку визначень.

Створення меню

У наведеному прикладі атрибут type може приймати такі ж самі

значення як для нумерованих, так і ненумерованих списків.

Створення таблиць

Рядки таблиці, клітинки рядків. Об’єднання клітинок

Приклад створення таблиці:

14

Таблиця створюється за допомогою тегів <TABLE></TABLE>.

Для цього тегу використовуються атрибути, що призначенні для

оформлення зовнішнього вигляду таблиці в цілому.

Атрибути таблиці

Атрибут align тегу table призначений для вирівнювання таблиці

відносно документа. Для нього можливі значення:

center – вирівнювання по центру;

left – вирівнювання по лівому краю;

right – вирівнювання по правому краю.

Атрибут border задає товщину рамки у пікселах. Атрибут width

задає ширину таблиці. Він може бути вказаний як у відсотках

15

(відносний розмір від загальної ширини сторінки), так і у пікселах

(фіксований розмір). Атрибут bgcolor задає колір заднього фону

таблиці. Він також може задавати фоновий колір для окремих

клітинок і рядків таблиці.

Для тегу TABLE можуть використовуватися такі атрибути, як:

background – задає рисунок заднього фону;

bordercolor – задає колір рамки;

cellspacing –задає відстань між клітинками в таблиці;

cellpadding – задає відстань між рамкою та змістом клітинки.

Для кожної таблиці можна задати її заголовок. Це здійснюється за

допомогою тегу <CAPTION></CAPTION>. Для нього

використовується атрибут align.

Рядки в таблиці задаються тегом <TR></TR>. Для нього

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

зовнішнього вигляду клітинок рядків. align зі значеннями: center, left,

right. Атрибут valign вирівнює зміст клітинок по вертикалі. Для нього

можливі значення:

top – вирівнювання по верхньому краю;

middle –вирівнювання по центру;

bottom – вирівнювання по нижньому краю.

Атрибут height визначає висоту рядка. Він може бути вказаний як

у відсотках (відносний розмір від загальної висоти таблиці), так і у

пікселах (фіксований розмір) Також для цього тегу можуть бути

окремо використані атрибути bgcolor, bordercolor.

Для визначення клітинок заголовків для стовпців таблиці існує тег

<TH></TH>. Для нього можна окремо використати атрибути align,

valign, height, які використовуються для тегу <TR>, а також інші

атрибути, що призначенні для оформлення зовнішнього вигляду

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

Атрибут width визначає ширину клітинки (ширина елемента, як у

відсотках, відносно загальної ширини таблиці, так і у пікселах).

Атрибут colspan вказує кількість стовпців, що об’єднуються в одну

16

клітинку. Атрибут rowspan вказує кількість рядків, що об’єднуються в

одну клітинку.

Також можуть бути окремо використані атрибути bgcolor і

bordercolor.

В кожному рядку, за допомогою тегу <TD> </TD>, визначаються

окремі клітинки, які, в свою чергу, утворюють стовпці таблиці. Для

нього використовується ті ж самі атрибути, які використовуються для

тегу <TH>.

Практична робота №2

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

Відкриємо файл sample.html, який знаходиться в папці MyWeb і

продовжимо в ньому роботу. Окрім цього, в папці MyWeb необхідно

створити папку IMG для збереження в ній зображень, які будуть

використовуватися для відображення на web-сторінці.

Вставка графічних елементів

Додавання горизонтальної лінії. Атрибути

За допомогою тегу <HR> утворюється горизонтальна лінія.

Атрибут size задає товщину лінії. Атрибут color визначає колір лінії.

Також для нього можуть використовуватися наступні атрибути:

width – задає ширину лінії (у пікселах або відсотках);

noshade – прибирає тінь для лінії.

Вставка зображень. Атрибути зображення

Знайдіть на диску C:\ будь-який файл зображення з розширенням

*.jpg, який має розмір зображення не більш ніж 800х600 px.

Скопіюйте його в папку IMG і перейменуйте в drawing.jpg.

Для втілення в документ зображень використовується тег <IMG>:

17

Для цього тегу тег закриття не потрібен.

Атрибут src вказує URL (шлях до файлу) з графічним

зображенням. Атрибут align вирівнює зображення відносно документа

або елемента в який вставлено зображення. Для нього

використовуються наступні значення: center, left, right, top, middle,

bottom. Атрибут alt виводить текст для зображення. Атрибут border

встановлює товщину рамки навколо зображення. Атрибут width

визначає ширину зображення як у відсотках, так і у пікселах. Атрибут

height визначає висоту зображення. Він може бути вказаний як у

відсотках, так і у пікселах. Також для нього можуть

використовуватись наступні атрибути:

title – вказує назву елемента;

hspace – визначає розмір вільного місця у пікселах ліворуч та

праворуч від зображення;

vspace – визначає розмір вільного міста у пікселах зверху та знизу

від зображення.

Для атрибуту src шлях до файлу може буди як відносним

(показано в попередньому прикладі), так і абсолютним.

Вставка об’єктів мультимедіа

Для вставки в документ об’єктів мультимедіа (відеороликів,

аудіотреків) використовується тег <EMBED>. Цей тег також не

18

потребує тегу закриття. Атрибут src вказує URL, шлях до файлу

мультимедіа. Атрибут type вказує на тип об’єкта. Атрибут pluginspage

вказує адресу ресурсу звідки завантажується плеєр для перегляду

відео чи прослуховування аудіо. Атрибути width і height визначають

ширину та висоту області відображення плеєра.

Також можна вставляти різні об’єкти, використовуючи тег

<OBJECT>…</OBJECT>.

*Закінчимо цей розділ горизонтальною лінією <HR size=3 color="red">.

Створення гіперпосилань

Для створення гіперпосилання використовується тег <A>.

Структура має вигляд:

<A href=”url” target=”blank”>[Текст гіперпосилання]</A>

Атрибут href використовується для визначення адреси

гіперпосилання URL (Uniform Resource Locator – універсальний

визначник ресурсу). Атрибут target (необов’язковий) вказує, де

відкрити сторінку. Якщо встановлено значення blank, сторінка

відкриється у новій вкладці.

Зовнішні та абсолютні гіперпосилання

Для посилання на зовнішній ресурс, на головну сторінку

поточного сайту, чи на будь-яку іншу сторінку поточного сайту, URL

повинен починатися з префіксу «http://», який вказує на протокол

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

якщо необхідно, після «/» – шлях до необхідної сторінки.

Складемо список пошукових систем з використанням

гіперпосилань на них:

19

Відносні гіперпосилання

У випадку, якщо файл посилання знаходиться в одній папці на

сервері з файлом поточної web-сторінки, в href необхідно вказати

тільки його ім’я. У випадку, якщо файл посилання знаходиться в

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

з файлом поточної web-сторінки, в href необхідно вказати шлях до

файлу з використанням імені папки та імені файлу. У випадку, якщо

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

знаходиться в папці, на рівень вище файлу поточної web-сторінки, в

href необхідно вказати шлях до файлу з використанням «..», імені

папки й імені файлу.

Також в гіперпосиланні можна використовувати адресу будь-

якого файлу (не web-сторінки) і, якщо цей файл буде файлом

зображення, він відобразиться у браузері, якщо файл буде іншого

типу, після натискання на гіперпосилання з’явиться вікно збереження

цього файлу на локальному комп’ютері.

20

Внутрішні гіперпосилання

При використанні гіперпосилання на частину поточного

документа в атрибуті href вказується ім’я частини документа, яке, в

свою чергу, задається за допомогою атрибута name. Структура має

вигляд:

…

<A href="#N1">[Текст гіперпосилання]</A>

…

<A name="N1">[Місце у документі, на яке здійснюється гіперпосилання]</A>

…

Атрибут NAME використовується для визначення імені частини в

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

Знайдіть в документі фрагмент «Створення документу в HTML»,

перейдіть до нього в редакторі та утворіть ім’я для гіперпосилання:

Після цього перейдіть в кінець документа і додайте

гіперпосилання на вказану частину.

Знайдіть в документі фрагмент «Документ HTML», перейдіть до

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

Після цього перейдіть в кінець документа і додайте

гіперпосилання на вказану частину.

21

За допомогою гіперпосилань група тематичних web-сторінок

об’єднується в вузол, який має назву web-сайт.

Практична робота №3

Використання CSS-стилів

Для ознайомлення з технологією використанням css-стилів, які

застосовуються для оформлення web-сторінок, створимо файл з ім’ям

mypage.html, в якому змоделюємо майбутню html-сторінку (рис. 3.1),

а також файл css-стилів style.css, в якому визначимо стилі.

Рис. 3.1. Структура html-сторінки у файлі mypage.html.

22

Окрім цього, для графічних елементів, що будуть знаходитись на

майбутній сторінці, створимо папку Images. Як приклад створимо

сторінку власного профілю у вигляді анкети студента КНУБА, на якій

буде розміщена наступна інформація: фотографія, прізвище та ім’я,

дата народження, e-mail адреса, факультет, спеціальність, курс, група,

про себе, мої улюблені дисципліни, мої захоплення. Структура html-

сторінки у файлі mypage.html повинна бути такою, як зображена на

рис. 3.1.

html-код цієї сторінки наведено в наступному лістингу:

23

Лістинг. 3.1. html-код сторінки у файлі mypage.html.

Визначення стилів елементів наведено в наступному лістингу:

24

Лістинг. 3.2. css-стилі елементів сторінки у файлі style.css.

У лістингу 3.2 для кожного елемента html-сторінки, за допомогою

певного селектора, якій відповідає тому чи іншому елементу, у

фігурних дужках встановлюються властивості стилю зовнішнього

вигляду. Якщо елемент визначений певний класом, стиль цього

елемента визначається селектором з використанням назви класу,

вказаного після коми.

Наприклад, для тіла документу body, за допомогою властивості

font-family, встановлюється шрифт arial. Для заголовків розділів, за

допомогою властивості font-size, встановлюється розмір шрифту, а за

допомогою властивості color – його колір. Властивості width і height

для елементів, до яких вони застосовуються, встановлюють їх ширину

та висоту відповідно. Такі властивості як margin і padding

встановлюють ширину зовнішніх і внутрішніх полів елементів

відповідно. Властивість border встановлює параметри ліній границь

елементів.

Кожному студенту необхідно набрати html-код у файлі

mypage.html, в якому, у певних полях, ввести власну інформацію.

Лістинг у файлі style.css необхідно набрати без змін (як наведено у

прикладі), а потім, після ознайомлення з процесом визначення стилів,

задати свій власний стиль для кожного елемента сторінки, тим самим

визначивши вигляд створюваної сторінки на свій смак.

25

Практична робота №4

Вставка форм та елементів керування

Форми та елементи керування в HTML застосовуються для

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

створених мовами web-програмування, однією з яких є мова

JavaScript.

У поточній практичній роботі створимо форму для визначення

даних, які в подальшому будуть оброблятися js-скриптом, що буде

створено в наступній практичній роботі. Для цього створимо файл з

ім’ям myform.html, в якому змоделюємо html-сторінку з формою, а

також файл myform.css для визначення стилів елементів сторінки і

форми.

Створимо форму для здійснення математичних операцій

обчислення з використанням двох змінних (рис.4.1) і обчислення

деяких математичних функцій (рис.4.2). В ній перемикання між

режимами обчислення буде здійснюватися за допомогою меню, що

складається з пунктів «Операції» і «Функції».

Рис. 4.1. Вигляд форми у файлі myform.html в режимі «Операції».

26

Рис. 4.2. Вигляд форми у файлі myform.html в режимі «Функції».

html-код сторінки з такою формою наведено в наступному лістингу:

27

28

Лістинг. 4.1. html-код сторінки у файлі myform.html.

Для розташування полів для введення значень змінних a і b,

утворюється таблиця з класом variables, у клітинках якої

розташовуються поля форми <INPUT> з типом text. Для визначення

області меню з пунктами «Операції» і «Функції» використовується

html-елемент <MENU>. Для розташування перемикачів вибору

операції обчислення утворюється таблиця з класом operations. Самі

перемикачі утворюються елементом форми <INPUT> з типом radio.

Для розташування спадаючого списку математичних функцій

утворюється блочний елемент <DIV> з класом functions. Сам список

функцій утворюється елементом форми <SELECT>, в якому елементи

списку задаються html-елементом <OPRIONS>. Для розташування

полів для виведення результату обчислення змінної c, утворюється

таблиця з класом result, в якій розташовується поле форми <INPUT> з

типом text. Кнопка для виконання дії обчислення задається за

допомогою елемента форми INPUT з типом button. Сама форма

утворюється парою тегів <FORM>…</FORM>, в межах яких

розташовуються її елементи.

Визначення стилів елементів цієї сторінки наведено у лістингу 4.2.

29

Лістинг. 4.2. css-стилі елементів сторінки у файлі myform.css.

У файлі myform.css для кожного елемента сторінки myform.html,

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

елементу, встановлюються властивості стилю його зовнішнього

вигляду. Слід звернути увагу на те, що при визначенні стилю для поля

введення input, уточнення, для якого саме типу застосовується стиль,

вказується в прямокутних дужках відразу після селектора input.

Практична робота №5

Використання js-скриптів

Для виконання цієї роботи необхідно використовувати файл

myform.html, що був створений в попередній роботі. В папці з

файлом myform.html створимо файл myform.js, в якому визначимо

функції обробки подій при роботі з елементами на сторінці

myform.html.

Для підключення створеного файлу js-скриптів myform.js до html-

документу myform.html необхідно у ньому, в області заголовку html-

сторінки в межах блоку <HEAD>...</HEAD>, після тегу <LINK>

ввести наступний рядок:

30

Також, для виклику js-функції для обробки тої чи іншої події

деяким елементам у файлі myform.html додамо відповідні атрибути

події тегів цих елементів.

По-перше: необхідно, щоб при натисканні на будь-яку кнопку на

формі, не відбувалося перезавантаження сторінки. Для цього

необхідно для елементу форми, після імені тегу FORM, додати

атрибут події onsubmit зі значенням return false. Знаходимо в тексті

файлу myform.html місце, де починається форма і вносимо наступні

зміни:

По-друге: необхідно, щоб при обранні одного з пунктів меню

«Операції» і «Функції», відбувалося перемикання між таблицею

operations і блочним елементом functions. Для цього використовується

подія onclick з викликом функції showOpers() для пункту «Операції» і

showFuns() – для пункту «Функції». Знаходимо в тексті файлу

myform.html місце, де утворюється меню і вносимо наступні зміни:

Слід звернути увагу, що в даному прикладі при виклику функції

showOpers() і showFuns() використовується оператор this, який

повертає посилання на об’єкт, з якого відбувається виклик.

По-третє: необхідно, щоб при обранні тої чи іншої операції або

функції, змінювався колір фону таблиці, в якій розміщено список

операцій або колір фону блочного елементу, в якому розміщено

список функцій. Для цього використовується подія onchange з

викликом функції setColor(). Знаходимо в тексті файлу myform.html

місце, де утворюється таблиця з класом operations, і вносимо наступні

зміни:

31

…

Також знаходимо в тексті файлу myform.html місце, де

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

зміни:

32

…

По-четверте: необхідно, щоб при натисканні на кнопку

«Обчислити», відбувалося обчислення обраної дії. Для цього

використовується подія onclick з викликом функції calculate().

Знаходимо в тексті файлу myform.html місце, де утворюється кнопка

і вносимо наступні зміни:

Далі, після визначення подій та функцій їх обробки перейдемо

безпосередньо до створення цих функцій у файлі myform.js.

Для реалізації роботи меню створимо три функції, за допомогою

яких буде здійснюватися перемикання між необхідними елементами

(що містять в собі набір операцій і список функцій), контроль

відображення поля для введення значення змінної b, контроль

відображення пунктів меню, а також задаватися значення змінної

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

По-перше, оголосимо змінну mset з початковим значенням 1. У

першому рядку файлу myform.js запишемо наступне:

var mset=1;

Далі оголошуємо функції showOpers() та showFuns() і описуємо їх

вміст:

33

У кожній з цих функцій здійснюється керування певними

елементами за допомогою їх ідентифікатора id, а саме, зміна стилю

відображення. Тобто, при обранні пункту меню «Операції» чи

«Функції» за допомогою метода getElementById(), по черзі

здійснюється доступ до елементів з ідентифікаторами opers, funs, rb, і,

за допомогою властивості style параметра display, змінюється

відображення. Значення параметру display: block – блочне

відображення елемента, table-row – відображення рядка таблиці, none

– сховати елемент. Також здійснюється виклик функції checkMenu() та

зміна значення змінної mset.

Далі оголошуємо функцію checkMenu(), яка буде здійснювати

контроль над відображенням пунктів меню і описуємо її вміст:

У цій функції, за допомогою властивості parentNode об’єкта elem,

здійснюємо доступ до батьківського елементу menu, а далі, за

допомогою метода getElementsByTagName(), зчитуємо список

підлеглих html-елементів «li». Після цього, для кожного елемента

списку, змінюємо його властивість className, що відповідає класу

стиля елемента.

Наступною оголосимо функцію setColor(), яка буде здійснювати

зміну кольору фону таблиці, в якій розташовано список математичних

операцій, або колір фону блочного елемента, в якому розташовано

список математичних функцій, а також колір виразу для математичної

операції, який описує обрану дію:

34

У цій функції, в залежності від обраної дії, за допомогою

операторів перевірки умови if…else if…else, змінній, що

використовується для визначення кольору фону, присвоюється

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

backgroundColor властивості style цільового елемента. Доступ до

елемента відповідно здійснюється за допомогою метода

getElementById().

Останньою створимо функцію для математичних обчислень

calculate(), яка, в залежності від обраної дії або функції, буде

здійснювати те чи інше обчислення після натискання на кнопку

«Обчислити»:

35

У цій функції спочатку, за допомогою службового слова var,

відбувається оголошення локальних змінних a, b, c. Далі здійснюється

зчитування даних з відповідних полів вводу форми з присвоюванням

їх змінним a, b відповідно. Наступним кроком оголошується локальна

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

математичної операції чи функції), в залежності від обраної дії. Після

цього, в залежності від обраної операції, через перевірку умови,

здійснюється безпосередньо те чи інше обчислення, результат якого,

через змінну c, передається відповідному полю форми.

Після внесення змін у файли myform.html створимо файл

myform.js і остаточно зберігаємо їх, а потім файл myform.html

відкриваємо у будь-якому браузері та перевіряємо як працює в ньому

створена програма.

Список літератури

1. Жданов А. JavaScript: руководство. – СПб.: Наука, 2012. – 978 с.

2. Лізунов П.П., Коханович М.В., Недін В.О. Інформаційні системи і

технології в управлінні організацією: навчальний посібник, 2018.

– 156 с.

3. Макфарланд Д. Большая книга CSS3. 3-е изд. – СПб.: Питер, 2014.

– 608 с.

4. Роббинс Дженнифер. HTML5: карманный справочник, 5-е изд.

Пер. с англ. – М. : ООО "И.Д. Вильямс": 2015. – 192 с.