Інформатика

Безкоштовно

Зараховано 2 учнів

Урок 59-60. Таблиці на веб-сторінках. Списки на веб-сторінках

Тема уроку: “Таблиці на веб-сторінках. Списки на веб-сторінках”

Пригадаємо…

  • Які теги використовуються для вставлення зображення?
  • Як вирівняти зображення по лівому краю, щоб воно було розміщене поряд із текстом?
  • Які теги використовуються для вставлення гіперпосилань?

Прочитайте!

Списки

Мова HTML підтримує п’ять видів списків, з яких два (списки меню й списки каталогів) вважаються застарілими й не рекомендуються до застосування. Три типи, що залишилися — це впорядковані списки, неупорядковані списки й списки визначень. Всі списки являють собою блокові елементи. Упорядковані (нумеровані) і неупорядковані (марковані) списки оформляються однаково. Вони створюються за допомогою парних тегів:

<OL>для впорядкованого списку, <UL> для неупорядкованого. Ці списки можуть містити тільки елементи списку, обумовлені парним тегом <LI>. Закриваючий тег </LI> можна опускати, тому що його місце знаходження легко відновити.

Приклад  1:

<H2><B>Проба зі списком</B> </H2>
<BODY><UL>
<P> В цей текст вставлено різні види списків.
<LI> Зразок
<OL>
<LI> Осінь
<LI> Зима
<LI> Весна
<LI> Літо
</OL></UL>
</BODY>

Таблиці

Таблиця в мові HTML задається парним тегом <TABLE>. Вона може містити заголовок таблиці, визначений парним тегом <CAPTION>, і рядки таблиці, що задаються за допомогою парних тегів <TR>. Закриваючі теги </TR> можна опускати.

Кожний рядок таблиці містить комірки осередки таблиці, які можуть ставитися до двох різних типів. Комірки в заголовках стовпчиків і рядків задають парним тегом <ТН>, а звичайні комірки – парним тегом <TD>. Закриваючі теги </TН> і  </TD> можна опускати. Кожна комірка може містити довільний текст, а також будь-які теги HTML.

При відображенні таблиці на екрані комп’ютера відбувається її автоматичне форматування з підбором розмірів комірок відповідно до обсягу розташовуваної інформації й заданих атрибутів. Атрибути елементів дозволяють як завгодно вигадливо оформити таблицю по своєму смаку. У таблиці 1 наведене найбільш поширені атрибути.

Приклад 2:

<TABLE border=1 >
<CAPTION ALIGN=”TOP”> Назва таблиці 1 </Caption>
<TR BGCOLOR = “yellow” align=”center”>
<TH>Стовпчик 1<TH>Стовпчик 2<TH>Стовпчик 3
<TR BGCOLOR = “white”>
<TD>Рядок 1 стовпчик 1 <TD> Рядок 1 стовпчик 2<TD> Рядок 1 стовпчик 3
<TR> <TD>Рядок 2 стовпчик 1 <TD> Рядок 2 стовпчик 2 <TD> Рядок 1 стовпчик 3
<TR> <TD>Рядок 3 стовпчик 1 <TD> Рядок 3 стовпчик 2<TD> Рядок 1 стовпчик 3
</TABLE>

Виконання практичного завдання

Протягом кількох уроків ми з вами працюватимемо над створенням власного сайту. На попередньому  уроці ви вставили на власний сайт зображення та гіперпосилання. На сьогоднішньому уроці продовжуємо роботу над створенням сайту.

Завдання:

  • Доповніть власний сайт списком, використайте будь-який із списків поданих у зразку (маркований, нумерований).
  • Вставити на сайт маленьку таблицю (таблиця повинна містити мінімум два рядки і два стовпці), оформіть її на власний смак.

Зразок створення списків:

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

Якщо у вас немає можливості працювати за ПК, дайте відповіді на запитання:

  1. Запишіть у зошит коротенький приклад HTML сторінки на якій було б розміщено два види списків та маленька таблиця (можна скористатись прикладами поданими на зразку, але текст у списках та таблицях має бути ваш власний).

0.00 на основі 0 рейтингів

5 зірок
0%
4 зірок
0%
3 зірок
0%
2 зірок
0%
1 зірок
0%