1 of 22

наглядний посібник

Основи веб-дизайну

Мета курсу за вибором «Створення веб-сайту» полягає в тому, щоб навчити будувати привабливі, цікаві та інформативні сайти з елементами інтерактивності, а також розміщувати їх в Інтернеті.

МОВА HTML

ТАБЛИЧНИЙ ДИЗАЙН

Графіка

Гіперпосилання

Мультимедіа на веб-сторінках

Фрейми

Форуми

Розробка веб-сайту

Автор: вчитель інформатики

Улинець Людмила Миколаївна

2 of 22

Мова HTML

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

ТАБЛИЦІ

Основна перевага НТМЛ – документ може бути переглянутий на веб-браузерах різних типів.

Браузер - спеціальна програма для перегляду HTML в WWW, програма-інтерпретатор мови HTML.

Що таке браузер?

НТМЛ – документи можуть бути створені за допомогою любого текстового редактора або спеціальних НТМЛ- редакторів.

Код програми на мові НТМЛ – звичайний текстовий файл, тому простіше всього написати його в Блокноті ( розширення .txt)= Пуск-Програми –– Стандартні – Блокнот.

Коли програма написана в Блокноті, її файл зберегти потрібно не з розширенням .txt а з розширенням .htm або .html

Ім'я HTML- файлу слідує писати прописними латинськими літерами без пробілів.

Яке розширення файлу написаний мовою HTML?

А ось насправді!!

Так ми бачимо!

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

3 of 22

Мова HTML

СТРУКТУРА

HTML – мова тегів!

Тег – спеціальні управляючі коди, які записуються в тексті в кутові дужки <...>.

Існують відкриваючі та закриваючі теги, такі теги ще називають парними.

Але є теги лише відкриваючі – непарні.

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

Шість рівнів заголовків!

Парний тег <h1>…</h1>

до

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

ТАБЛИЦІ

4 of 22

Мова HTML

АТРИБУТИ

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

=> Атрибути має тільки початковий тег.

<h3 align=“center”> Сторінка повинна мати заголовок </h3>

Ім'я тегу

атрибут тегу

значення атрибуту тега

bgcolor – колір фону документа
background – задає фон документу з використанням графічного зображення
text – колір тексту документа
link – колір гіперпосилання, який міняється в момент клацання по ній мишею

5. alink – колір активного гіперпосилання, який міняється в момент клацання по ній мишею

6. vlink – задає колір відвідуваної гіперпосилання

Атрибути тегу body

Кольори

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

ТАБЛИЦІ

5 of 22

Мова HTML

КОЛЬОРИ

black – чорний

blue – синій

red – червоний

green – зелений

aqua – голубий

yellow – жовтий

white – білий

silver – сірий

purple – фіолетовий

maroon –малиновий

fuchsia – рожевий

lime – ярко-зелений

оlive -темно-зелений

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

ТАБЛИЦІ

6 of 22

Мова HTML

ТЕГИ ФОРМАТУВАННЯ ТЕКСТУ

<p> - початок нового абзацу, записують на

початку речення з абзацу

<br> - з нового рядка

<b>…</b> - жирний шрифт тексту

<i>…</i> - шрифт - курсив

<u>…</u> - підкреслений шрифт

<sup>…</sup> - верхній індекс

<sub>…</sub> - нижній індекс

<h1>…</h1>, <h2>…</h2>,…,<h6>…</h6> - види заголовків

<big>…</big> - великий шрифт

<small>…</small> - маленький шрифт

<pre>…</pre> - дозволяє представити текст зі специфічним форматуванням

<var>…</var> - відображається курсивом

<s>…</s> - перекреслений текст

<font …>…</font> - дозволяє за допомогою атрибутів (size- розмір шрифту в діапазоні від 1 до 7, color- колір шрифту) управляти розміром та кольором шрифту.

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

було використано?

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

ТАБЛИЦІ

7 of 22

Мова HTML

ВИРІВНЮВАННЯ ТЕКСТУ

<center>…</center> - вирівнювання по центру

Атрибут вирівнювання та його значення

(записується в відкриваючому тезі, наприклад, <p>):

<…align=“k”> де k= center, left, right

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

ТАБЛИЦІ

8 of 22

Мова HTML

Атрибути:

size – товщина лінії в пікселях
width – ширина лінії в пікселях або в % від ширини вікна браузера
align – розміщення на екрані ( зліва, по центру, справа)
noshade – лінія представляє з себе просту однотонну темну полосу

ГОРИЗОНТАЛЬНА ЛІНІЯ. Рядок, що біжить

Непарний тег <hr>

Горизонтальна лінія

Наприклад, <hr size=“4” width=“5” align=“center”>

Наприклад

Вставка “ бегущей строки ” на веб-сторінку

Парний тег <marquee>

Атрибути:

align – розміщення тексту:

top – в верхній частині рядку
middle - по середині рядку
botton - в нижній частині рядку

behavior - управляє поведінкою “бегущей строки” на екрані:

scroll – текс перетинає екран
slide- текст видвигається на екран і зупиняється
alternate – текст видвигається на екран, а потім переміщається назад-вперед

direction – задає напрямок преміщення тексту:

left – зліва направо ( задано по умовчанню)
right – зправо-наліво

height – управляє висотою рядка в пікселях чи в процентах від ширини екрану

width - управляє шириною рядка в пікселях чи в процентах від ширини екрану

scrollamount – управляє швидкістю переміщення тексту

( 1- найменша швидкість, 2000 – сама найбільша швидкість (рядок буде просто блимати))

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

ТАБЛИЦІ

9 of 22

Мова HTML

⇨ Нумерований

Парний тег <ol>. Кожний елемент списку починається з тегу <li>

Аатрибути:

→type

=A (прописні латинські букви А,В,С,…)

=a ( а,в,с,..),

=I (І,ІІ,ІІІ,…),

=і (і,іі,ііі,..),

=1 (арабські цифри 1,2,3,4,..)

→start = n (початкове значення списку)

СПИСКИ

Нумерований

Маркований

Вкладені списки

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

ТАБЛИЦІ

10 of 22

Мова HTML

СПИСКИ

⇨ Маркований

Парний тег <ul>.

Кожний елемент списку починається з тегу <li>

Атрибути:

→type

=disk (закрашені круглі маркери)

=circle (не закрашені круглі маркери)

=square ( квадратні маркери)

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

Нумерований

Маркований

Вкладені списки

ТАБЛИЦІ

11 of 22

Мова HTML

СПИСКИ

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

Нумерований

Маркований

Вкладені списки

ТАБЛИЦІ

12 of 22

Мова HTML

Засобами програми Блокнот створити HTML-код, що дозволить відобразити на веб-сторінці наступну інформацію:

ВПРАВИ

ПОНЯТТЯ

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

СТРУКТУРА

ЗОБРАЖЕННЯ

Горизонтальна лінія.

Рядок, що біжить

ГІПЕРПОСИЛАННЯ

АТРИБУТИ

ВИРІВНЮВАННЯ тексту

СПИСКИ

ВПРАВИ

ТАБЛИЦІ

13 of 22

Табличний дизайн

Парний тег <table> - основний тег, який описує таблицю.

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

Атрибути:

align – вирівнювання даних в комірках ( =left, =right,= center)
border – визначає вид границь таблиці (= числовим значенням, визначаючі товщину таблиці)
background – дозволяє створювати фонове зображення для всієї таблиці
bgcolor – задає фоновий колір
bordercolor – задає колір рамки, використовується тільки з атрибутом border
cellpadding – визначає відстань від границі комірки до її змісту в пікселях
cellspacing – визначає відстань між комірками в пікселях
hspace – задає вільний простір зліва і справа від таблиці в пікселях
vspace – задає вільний простір зверху і знизу від таблиці в пікселях
width – визначає ширину таблиці (= або в пікселях, або в процентах від поточної ширини вікна браузера)

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

☞ проста таблиця з рамкою

☞ проста таблиця з використанням атрибуту bgcolor

☞ проста таблиця без рамки

☞ таблиці з об'єднаними комірками

практичне завдання

• Практична робота

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

на веб-сторінках”

14 of 22

Табличний дизайн

Парний тег <tr> - задає рядок таблиці. Кількість рядків визначається кількістю зустрічающихся пар тегів <tr> і </tr> .

Парний тег <col> використовується для завдання стовпців таблиці і може мати атрибути:

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

align – задає режим горизонтального вирівнювання вмісту всередині комірки ( =left, =right,= center)
width – визначає ширину комірок в стовпці (= в пікселях)
bgcolor – задає колір фона комірки.

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

☞ проста таблиця з рамкою

☞ проста таблиця з використанням атрибуту bgcolor

☞ проста таблиця без рамки

☞ таблиці з об'єднаними комірками

практичне завдання

• Практична робота

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

на веб-сторінках”

15 of 22

Табличний дизайн

Парний тег <td> - для створення комірок таблиці.

Комірка таблиці може бути описана лише всередині рядка таблиці.
Кожна комірка повинна бути пронумерована номером стовпця, до якого вона відноситься.
Якщо в рядку для деяких стовпців відсутнє одна чи декілька комірок, браузер відображає пусту комірку

Створення комірок таблиці

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

☞ проста таблиця з рамкою

☞ проста таблиця з використанням атрибуту bgcolor

☞ проста таблиця без рамки

☞ таблиці з об'єднаними комірками

практичне завдання

• Практична робота

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

на веб-сторінках”

16 of 22

Табличний дизайн

Парний тег <th> - для створення заголовку таблиці.

Комірка заголовку таблиці мають ширину всієї таблиці

Парний тег <caption> - для створення підпису таблиці.

Тег повинен розміщуватися всередині тегів <table> і </table>, але не в описання рядку чи комірки.

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

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

☞ проста таблиця з рамкою

☞ проста таблиця з використанням атрибуту bgcolor

☞ проста таблиця без рамки

☞ таблиці з об'єднаними комірками

практичне завдання

• Практична робота

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

на веб-сторінках”

17 of 22

Табличний дизайн

Групування стовпців таблиці

Теги групування елементів таблиці

Тег <colgroup> - використовується з цілю групування стовпців таблиці і може мати атрибути:

bgcolor – задає колір фону комірок
align – задає режим горизонтального вирівнювання вмісту всередині комірки
valign – задає режим вертикального вирівнювання вмісту всередині комірки(= middle(по середині) top(вверх))
span – задає кількість стовпців в групі
width – задає ширину комірок в стовпцях

Групування рядків таблиці

Тег <tbody> - для створення логічно зв'язаних груп рядків в тілі таблиці. Має атрибути:

bgcolor – задає колір фону комірок
align – задає режим горизонтального вирівнювання вмісту всередині комірки
valign – задає режим вертикального вирівнювання вмісту всередині комірки(= middle(по середині) top(вверх))

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

☞ проста таблиця з рамкою

☞ проста таблиця з використанням атрибуту bgcolor

☞ проста таблиця без рамки

☞ таблиці з об'єднаними комірками

практичне завдання

• Практична робота

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

на веб-сторінках”

18 of 22

Табличний дизайн

Основні атрибути елементів таблиці

colspan – вказує ,яка кількість комірок буде об'єднана по горизонталі з вказаної комірки
rowspan – вказує ,яка кількість комірок буде об'єднана по вертикалі з вказаної комірки
bgcolor – задає фоновий колір для комірок рядка
border – задає товщину рамки, яка обрамляє комірки рядка
background – задає фонове зображення для комірок рядка
align – управляє вирівнюванням змісту комірки (=left, =right,= center)