1 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

2 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Пригадайте:

Проектування та верстка веб-сторінок

  • Що таке HTML?
  • Що таке структура веб-сторінки?
  • Які Вам відомі теги форматування веб-сторінки?

3 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Що таке мова гіпертекстової розмітки

Які теги є елементами засобами створення списків

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

Ти дізнаєшся:

Проектування та верстка веб-сторінок

4 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Таблиці та списки на веб-сторінках

5 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

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

У HTML-документах використовують три види списків:

невпорядкований (маркований)

упорядкований (нумерований)

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

6 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

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

Невпорядкований список

У невпорядкованому списку для виділення елементів використо­вуються певні позначки (крапки, квадрати тощо).

Починається такий список із тегу <UL>, а закінчується — </UL>. 

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

 Тег <UL> може мати атрибут TYPE, який визначає форму позначки. Цей атрибут набуває таких значень:

            • disk — зафарбоване коло;
            • circle — коло;
            • square — маленький чорний квадрат.

7 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

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

Упорядкований список

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

Починається список із тегу <0L>, а закінчується — </OL>.

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

Тег <OL> може мати атрибут TYPE, який визначає тип нумерації. Цей атрибут набуває таких значень:

      • А — велика літера;
      • а — мала літера;
      • І — велика римська цифра;
      • і — мала римська цифра;
      • 1 — арабська цифра.

8 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

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

Упорядкований список

У разі потреби за допомогою атрибута START можна задати відмінний від одиниці початковий номер елемента, наприклад <0L TYPE="I" START="5">, Нумерований список, початковий елемент якого позначено латинською літерою Е, яка є п'ятою в алфавіті, описують так:

<OL TYPE="A" START="5">

<LI>Перший елемент списку</LI>

<LI>Другий елемент списку</LI>

<LI>Третій елемент списку</LI>

<LI>Четвертий елемент списку</LI>

</OL>

9 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

Приклад 2.1. Маркований список, в якому для позначення елементів використовують коло

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

10 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

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

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

11 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

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

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

Таблиця повинна мати один або кілька рядків TR>...</TR>

У кожному з яких може міститися заголовок <ТН>...</ТН>

або дані

<TD>...</TD>

​

Атрибут BORDER, який має цілочислове значення, що визначає товщину рамки в пікселях

Наприклад <TABLE BORDER=5>

Заголовок таблиці задається тегами <CAPTION> та </CAPTION>

​

​

​

12 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

Приклад 2.4. HTML-документ, що містить таблицю

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

Понеділок

Вівторок

Середа

Четвер

П'ятниця

1. Алгебра

1. Українська мова

1. Зарубіжна література

1. Географія

1. Хімія

2. Іноземна мова

2. Хімія

2. Геометрія

2. Фізична культура

2. Іноземна мова

3. Фізична культура

3. Алгебра

3. Іноземна мова

3. Фізика

3. Геометрія

4. Географія

4. Інформатика

4. Трудове навчання

4. Українська мова

4. Українська література

​

5. Фізика

5. Українська література

​

​

13 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

Приклад 2.4. HTML-документ, що містить таблицю

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

<HTML>

<TITLE>Приклад простої таблиці</TITLE>

<BODY>

<TABLE BORDER="1">

<CAPTION>Розклад уроків</CAРТION>

<TR>

<TH>Понеділок</TH>

<TH>Вівторок</TH>

<TH>Середа</TH>

<TH>Четвер</TH>

<TH>П'ятниця</TH>

</TR>

<TR>

<TD>1. Алгебра</TD>

<TD>1. Українська мова</TD>

<TD>1. Зарубіжна література</TD>

<TD>1. Географія</TD>

<TD>1. Хімія</TD>

</TR>

<TR>

<TD>2. Іноземна мова</TD>

<TD>2. Хімія</TD>

<TD>2. Геометрія</TD>

<TD>2. Фізична культура</TD>

<TD>2. Іноземна мова</TD>

</TR>

<TR>

<TD>3. Фізична культура</TD>

<TD>3. Алгебра</TD>

<TD>3. Іноземна мова</TD>

<TD>3. Фізика</TD>

<TD>3. Геометрія</TD>

</TR>

<TR>

<TD>4. Географія</TD>

<TD>4. Інформатика</TD>

<TD>4. Трудове навчання</TD>

<TD>4. Українська мова</TD>

<TD>4. Українська література</TD>

</TR>

<TR>

<TD></TD>

<TD>5. Фізика</TD>

<TD>5. Українська література</TD>

<TD></TD>

<TD></TD>

</TR>

</TABLE>

</BODY>

</HTML>

14 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

Приклад 2.4. HTML-документ, що містить таблицю

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

15 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

Об'єднання комірок

Для об'єднання комірок використовують такі атрибути: COLSPAN (об'єднання по горизонталі, у рядку) і ROWSPAN (по вертикалі,у стовпці) тегу <TD>

Значеннями цих атрибутів є кількість об'єднуваних стовпців або рядків

Наприклад, COLSPAN=3 означає, що комірка розтягнута на З стовпці, а ROWSPAN=2 — що комірка займає 2 рядки.

​

​

​

16 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

Об'єднання комірок

Приклад 2.5. HTML-документ, який містить таблицю з об'єднаними комірками

17 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

Встановлення ширини таблиці та комірок

Ширину таблиці задають атрибутом WIDTH у тегу <TABLE>

Ширину комірок — за допомогою того самого атрибута у тегу <TD> або <ТН>

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

вікна

Ширину комірок — у пікселях або у відсотках від ширини таблиці.

​

​

​

18 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Проектування та верстка веб-сторінок

Основи мови HTML

Об'єднання комірок

Приклад 2.6. HTML-документ, в якому задана ширина таблиці та деяких комірок

19 of 22

РОБОТА З КОМП'ЮТЕРОМ

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Завдання 1. Маркований список

  1. Запишіть HTML-код для сторінки та збережіть цей файл як Браузери.html.
  2. Відкрийте у вікні браузера сторінку створеного веб-сайту, на екрані відобразиться інформація списку браузерів.

20 of 22

РОБОТА З КОМП'ЮТЕРОМ

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Завдання 2. Нумерований список

  1. Запишіть HTML-код для сторінки та збережіть цей файл як ЗНО.html.
  2. Відкрийте у вікні браузера сторінку створеного веб-сайту, на екрані відобразиться інформація списку документів.

21 of 22

РОБОТА З КОМП'ЮТЕРОМ

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Завдання 3. Мої досягнення

  1. Запишіть HTML-код для сторінки та збережіть цей файл як Досягнення.html.

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

​

22 of 22

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

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