1 of 23

Практична робота 3 ��Створення головної сторінки сайту засобами HTML

Нова українська школа

Урок 14

Інформатика 8

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.

2 of 23

Повторюємо

Щоб браузер належно відображав дані на вебсторінці, до її неформатованого тексту додають спеціальні позначки — теги. Вони та правила їх використання утворюють мову розмітки. Одну з мов розмітки, а саме HTML, ми й розглянемо далі.

HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — набір тегів та правила їх застосування для створення гіпертекстових документів.

Розділ 2

§ 11

3 of 23

Поняття про мову HTML

Отже, вебсторінка сайту являє собою текстовий документ, розмічений тегами HTML для відображення у вікні браузера.

Як видно з назви, HTML не є мовою програмування.

Розділ 2

§ 11

4 of 23

HTML-документ

Теги, які визначають структуру НТМL-документа:

Початок і кінець документа

Початок і кінець заголовка — службової частини коду

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

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

Розділ 2

§ 11

5 of 23

Форматування тексту

Теги мови HTML визначають вигляд і функціонування об’єктів на вебсторінці сайту.

Теги бувають:

Парними

Непарними

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

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

Розділ 2

§ 11

6 of 23

Форматування тексту

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

Парний

<р>

<h1>

Новий абзац із відступом

Парний

Заголовок: <h1> — найвищий рівень, <h6> — найнижчий

<і>

Парний

Курсив

Розділ 2

§ 11

7 of 23

Вставляння зображень

На вебсторінку можна додавати різноманітні зображення. Це можуть бути ілюстрації до тексту, графічні елементи оформлення. Щоб вставити на вебсторінку зображення з файлу, використовують тег:

В атрибуті можна використовувати імена графічних файлів із розширеннями:

.jpg

.gif

.png

.bmp

назва тегу

атрибут, у якому вказують ім’я файлу із зображенням

Розділ 2

§ 11

8 of 23

Додавання гіперпосилань

Сайт часто складається з багатьох вебсторінок, пов’язаних гіперпосиланнями. Для створення гіперпосилань на вебсторінки сайту та зовнішні ресурси інтернету використовують тег:

<а>...</а>

Розділ 2

§ 11

9 of 23

Додавання гіперпосилань

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

Нехай в одній папці з файлом index.html створено файл prf.html, який демонструє вашу фотографію. У файлі index.html до фрази Подивитися фото можна додати гіперпосилання, скориставшись такою розміткою:

<a href = "prf.html"> Подивитися фото </a>

Розділ 2

§ 11

10 of 23

Додавання гіперпосилань

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

Розділ 2

§ 11

11 of 23

Теги розмітки таблиці

Основні теги розмітки таблиці:

Призначення

Теги

Обмежують таблицю

Обмежують рядок таблиці

Обмежують клітинку таблиці

Використовують замість тегу <td>…</td> для виокремлення заголовків стовпців таблиці

Розділ 2

§ 11

12 of 23

Теги розмітки таблиці

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

Призначення

Атрибут

Вирівнювання таблиці у вікні браузера

Align

Малюнок на тлі

background

Колі тла

bgcolor

Товщина рамки в пікселях

border

Колір рамки

bordercolor

Розділ 2

§ 11

13 of 23

Теги розмітки таблиці

Продовження…

Призначення

Атрибут

Відстань між текстом клітинки та її межею

cellpadding

Ширина таблиці (клітинки) у відсотках або пікселях

width

Висота таблиці (клітинки) у відсотках або пікселях

height

Відстань між клітинками таблиці

cellspacing

Розділ 2

§ 11

14 of 23

Теги розмітки таблиці

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

Ширина таблиці дорівнює ширині робочого поля вікна браузера;

Ширина клітинки дорівнює половині ширини таблиці.

Розділ 2

§ 11

15 of 23

Форматування вмісту клітинок

Теги:

Рядків

Клітинок

<tr>

<td>

Можуть включати атрибути для змінення вирівнювання тексту відносно меж клітинки. Атрибут align задає горизонтальне вирівнювання:

аlign = "left"

align = "center"

align = "right"

за лівим краєм

по центру клітинки

за правим краєм

Розділ 2

§ 11

16 of 23

Форматування вмісту клітинок

Атрибут valign задає вертикальне вирівнювання:

valign = "middle"

valign = "top"

valign = "bottom"

Посередині клітинки

Вгорі клітинки

Внизу клітинки

Розділ 2

§ 11

17 of 23

Форматування вмісту клітинок

Іноді при розмічанні таблиці виникає потреба об’єднати кілька клітинок. Для цього використовують атрибути:

colspan

rowspan

злиття клітинок у рядку

злиття клітинок у стовпці

Розділ 2

§ 11

18 of 23

Форматування вмісту клітинок

Розглянемо приклад типів об'єднання комірок у рядку

У вікні текстового редактора

У вікні браузера

<tr>

<td colspan="2"> Привіт! </td>

</tr>

<tr>

<td> Петре,</td>

<td> Марійко!</td>

</tr>

</table>

Розділ 2

§ 11

19 of 23

Форматування вмісту клітинок

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

У вікні текстового редактора

У вікні браузера

<tr>

<td rowspan="2"> Привіт! </td>

<td> Петре,</td>

</tr>

<tr>

<td> Марійко!</td>

</tr>

</table>

Розділ 2

§ 11

20 of 23

Домашнє завдання

Проаналізувати

с. 65-66

Розділ 2

§ 11

21 of 23

Працюємо за комп’ютером

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

Створення головної сторінки сайту засобами HTML

Розділ 2

§ 11

22 of 23

Працюємо за комп’ютером

Сторінка

65-66

Розділ 2

§ 11

23 of 23

Успіхів�у навчанні!

Нова українська школа

Урок 14

Інформатика 8

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.