Тема: Створення різноманітних списків. Створення таблиць.

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

ТЕОРЕТИЧНІ ВІДОМОСТІ

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

Текст, розташований усередині парного тега<UL>, сприймається як ненумерований список. Кожний новий елемент списку варто починати з тега <LI>. Наприклад, щоб створити от такий список:

· весна

· літо

· осінь

· зима

необхідний ввести HTML-код:

< UL >

< LI > весна

< LI > літо

< LI > осінь

< LI > зима

</ UL >

Зверніть увагу: тег <LI> є одинарним!.

 

 

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

 

Нумеровані списки влаштовані точно так само, як ненумеровані, тільки замість маркерів, що виділяють новий елемент, використаються цифри (арабськи або римськи) чи латинськи букви (великі або малі).

Приклад:

< OL >

< LI > березень

< LI > квітень

< LI > травень

</ OL >

вийде такий список:

 

1. березень

2. квітень

3. травень

Тип нумерації задається атрибутом тега <OL type=>, який приймає одне з значень:

A – нумерація великими англійськими літерами;

а – нумерація маленькими англійськими літерами;

I – нумерація великими римськими цифрами;

і – нумерація маленькими римськими цифрами;

1 – нумерація арабськими цифрами;

Таблиці. Засоби опису таблиць в HTML

У міру зростання системи WWW стало зрозуміло, що засобів, які закладені в НTML, не достатньо для якісного відображення різного типу документів. Недоліком НTML була відсутність в його складі засобів відобра­ження таблиць. Для цієї мети зазвичай використовувався форматований текст (тег <PRE>), в якому таблиця змальовувалася символами АSCII. Але така форма представлення таблиць була недостатньо високої якості і виділялася із загального стилю документа.

Тег <ТАВLЕ>

Для опису таблиць служить тег <ТАВLЕ>. Тег <ТАВLЕ>, як і багато інших, автоматично переводить рядок до і після таблиці.

Тег <ТR>

Тег <ТR> (скорочення від Таble Row – рядок таблиці) створює рядок табли­ці. Якщо в таблиці міститься два набори тегов <ТR></ТR>, в ній будуть два рядки. Весь текст, інші теги і атрибути, які ви хочете помістити в один рядок, повинні бути поміщені між тегами <ТR></ТR>.

Приклад 1:

< HTML >

< BODY >

< H1 ALIGN = CENTER >Таблица</ H1 >

< CENTER >

< TABLE BORDER >

< TR >

< TD COLSPAN =3>

Если в таблице два тега TR то в ней две строки.</ TD >

</ TR >

< TR >

< TD >Если в строке три тега <TD> </ TD >

< TD >то в ней </ TD >

< TD >три столбца</ TD >

</ TR >

</ TABLE >

</ CENTER >

</ BODY >

</ HTML >

Тег <ТD>

Усередині рядка таблиці зазвичай розміщуються осередки з даними, кожен осередок, що містить текст або зображення, повинен бути оточений тегами <ТD></ТD>. Число тегов <ТD></ТD> в рядку визначає число осеред­ків. Рядок з п'ятьма парами тегов <ТD></ТD> складатиметься з п'яти осередків.

Приклад 2:

< HTML >

< BODY >

< TABLE BORDER >

< TR >

< TD >В</ TD >

< TD >этой</ TD >

< TD >строке</ TD >

< TD >пять</ TD >

< TD >столбцов</ TD >

</ TR >

< TR >

< TD >а в этой</ TD >

< TD >только</ TD >

< TD >три.</ TD >

</ TR >

</ TABLE >

</ BODY >

</ HTML >

Тег <ТН>

При завданні заголовків для стовпців і рядків таблиці використовуються тег заголовка <ТН></ТН> (Таblе Неаder, заголовок таблиці). Ці теги аналогічні <ТD></ТD>. Відмінність полягає в тому, що текст, ув'язнений між тегами <ТН></ТН>, автоматично записується жирним шрифтом і за умовчанням розташовується посередині осередка. Центрування можна відмінити і вирів­ня­ти текст по лівому або правому краю. Якщо скористатися <ТD></ТD> з тегом <В> і атрибутом Аlign=center, текст теж виглядатиме як заголовок. Проте, слід мати на увазі, що не всі броузеры підтримують жирний шрифт в таблицях, тому краще задавати заголовки таблиць за допомогою <ТН>.

Приклад 3:

< HTML >

< BODY >

< TABLE BORDER >

< TR >

< TH >Заголовок центрован по умолчанию</ TH >

< TH COLSPAN =2>Заголовок может объединять столбцы</ TH >

</ TR >

< TR >

< TH >Заголовок может быть расположен перед столбцами</ TH >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

</ TR >

< TR >

< TH ROWSPAN =3> Заголовок может объединять строки</ TH >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

</ TR >

< TR >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

</ TR >

< TR >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

</ TR >

</ TABLE >

</ BODY >

</ HTML >

Тег <САРTIОN>

<CAPTION> дозволяє створювати заголовки таблиці. За умовчанням заго­лов­ки центруються і розміщуються або над (<САРТION АLIGN=ТОР>), або під таблицею (<САРТION ALIGN=ВОТТОМ>). Заголовок може складатися з будь-якого тексту і зображень. Текст буде розбитий на рядки, відповідні ширині таблиці. Іноді тег <САРТION> використовується для підпису під малюнком. Для цього досить описати таблицю без меж.

Заголовок може складатися з будь-якого тексту і зображень. Текст буде розбитий на рядки, відповідні ширині таблиці. Іноді тег <САРТION> використовується для підпису під малюнком. Для цього досить описати таблицю без меж.

Приклад 4:

< HTML >

< BODY >

< TABLE BORDER >

< CAPTION ALIGN = TOP >Заголовок над таблицей</ CAPTION >

< TR >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

</ TR >

</ TABLE >

< TABLE BORDER >

< CAPTION ALIGN = BOTTOM >Заголовок под таблицей</ CAPTION >

< TR >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

</ TR >

</ TABLE >

</ BODY >

</ HTML >

Атрибут NOWRAP

Зазвичай будь-який текст в таблиці, що не поміщається в один рядок осередку, переходить на наступний рядок. Проте, при використанні атрибуту NOWARP з тегами <ТН> або <ТD> довжина осередку розширюється на стільки, щоб, укладений в ній текст помістився в один рядок.

Атрибут СОLSPAN

Теги <ТD> і <ТН> модифікуються за допомогою атрибуту СОLSPAN= (Column Span, з'єднання стовпців). Якщо ви хочете зробити який-небудь осере­док ширше, ніж верхня або нижняя, можна скористатися атрибутом СОLSPAN=, щоб розтягнути його над будь-якою кількістю звичайних осередків.

Приклад 5:

< HTML >

< BODY >

< CENTER >

< TABLE BORDER =3>

< TR >

< TD > Если вы хотите сделать какою-нибудь ячейку шире, чем верхняя или нижняя

</ TD >

< TD > можно вопользоваться атрибутом СОLSPAN=

</ TD >

</ TR >

< TR >

< TD BGCOLOR = WHITE COLSPAN =2>

чтоб ростянуть ее над любым количеством обычных ячеек.

</ TD >

</ TR >

</ TABLE >

</ CENTER >

</ BODY >

</ HTML >

Атрибут ROWSPAN

Атрибут ROWSPAN=, використовуваний в тегах <ТD> і <ТН>, аналогічний атрибуту СОLSPAN=, тільки він задає число рядків, на які розтягується осередок. Якщо ви вказали в атрибуті ROWSPAN= число, більше одиниці, то відповідна кількість рядків повинна знаходитися під розтягуваним осеред­ком. Не можна помістити її внизу таблиці.

Атрибут WIDТН

Атрибут WIDТН= застосовується в двох випадках. Можна помістити його в тег <ТАВLЕ> для завдання ширини всієї таблиці, а можна використовувати в тегах <ТR> або <ТН> для завдання ширини осередку або групи осередків. Ширину можна указувати в пікселях або у відсотках. Наприклад, якщо ви задали в теге <ТАВLЕ WIDTH=250>, ви отримаєте таблицю шириною 250 пікселів незалежно від розміру сторінки на моніторі. При завданні WIDТН=50% в теге <ТАВLЕ> таблиця займатиме половину ширини сторін­ки при будь-якому розмірі зображення на екрані. Отже, указуючи ширину таблиці в пікселях майте на увазі, що якщо у вашого читача вузька область перегляду, ваша сторінка може виглядати декілька дивно. Якщо ви користу­єтеся пікселями і таблиця виявляється ширшою за область перегля­ду, внизу з'явиться смуга прокрутки для переміщення управо і вліво по сторінці. Залежно від поставлених завдань і той, і інший спосіб завдання ширини таблиці можуть виявитися корисними.

Приклад 6:

< HTML >

< BODY >

< TABLE BORDER WIDTH =100%>

< TR >

< TD ALIGN = CENTER >Текст или данные - ширина 100%</ TD >

</ TR >

</ TABLE >

або

< TABLE BORDER WIDTH =50%>

< TR >

< TD ALIGN = CENTER >Текст или данные - ширина 50%</ TD >

</ TR >

</ TABLE >

або

< TABLE BORDER WIDTH =200>

< TR >

< TD ALIGN = CENTER >Текст или данные - ширина 200 пикселей </ TD >

</ TR >

</ TABLE >

або

< TABLE BORDER WIDTH =100>

< TR >

< TD ALIGN = CENTER >Текст или данные - ширина 100 пикселей

</ TD >

</ TR >

</ TABLE >

</ BODY >

</ HTML >

Атрибут UNIТ

Атрибут UNIT= тега <ТАВLЕ> визначає одиниці вимірювання, використову­вані при вказівці розмірів як всієї таблиці, так і її окремих стовпців. Атрибут UNIТ= може приймати три значення:

UNIТ=ЕN – це значення привласнюється за умовчанням і задає одиницю вимірювання, рівну ЕN-пробелу. ЕN-пробел – це друкарська одиниця вимірювання, рівна ширині букви <n>. Реальний розмір пропуску залежить від вибраного шрифту: для крупного шрифту ЕN-пробел більший, ніж для дрібного. Зазвичай ЕN-пробел рівний половині розміру шрифту. Наприклад, при використанні 12-пунктового шрифту ширина ЕN-пробела буде 6 пунк­тів. Для 8-пунктового шрифту ЕN-пробел займає 4 пункти.

UNIТ=RELATIVE використовується для завдання відносної ширини стовп­ців у відсотках від загальної ширини таблиці. Цей спосіб слід по можливості застосовувати замість вказівки ширини у відсотках UNIТ=RELATIVE виконує ту ж функцію, але підтримується великою кількістю броузеров.) При завданні відносних (RELATIVE) одиниць числа, що вводяться, сприйма­ють­ся як ширина стовпців у відсотках.

UNIТ=РIXELS – це значення застосовується, коли вам потрібно точно знати ширину стовпця на екрані. В цьому випадку краще всього задати її в пікселях. Наприклад, тег <ТАВLЕ UNIТ=РIXELS WIDTH=340> сформує таблицю шириною 340 пікселів.

Атрибут СОLSРЕС

Атрибут СОLSРЕС=, використовуваний з атрибутом UNIТ=, визначає, скільки місця займає кожен стовпець таблиці і як в ньому вирівнюються дані. Застосовується тільки в тезі <ТАВLЕ>.

СОLSРЕС= перераховує всі стовпці і для кожного з них задає вирівнювання і розмір. Для стовпця (або осередку) існує п'ять способів вирівнювання: L – по лівому краю, E – по центру, R – по правому краю, J – по правому і лівому краю і D – по десятковій комі. Якщо у вас п'ять стовпців, ви можете визначити ширину і вирівнювання кожного з них таким чином:

<ТАВLЕ UNIТ=РIХЕLS СОLSРЕС="L10 С15 J25 D30">

Ви описали таблицю, в якій перший стовпець має ширину 10 пікселів і його вміст вирівнюється по лівому краю, другий стовпець, шириною 15 пікселів, з вирівнюванням по центру, третій, шириною 20 пікселів, вирівняний по правому краю, четвертий, шириною 25 пікселів, вирівняний з двох сторін, а п'ятий, шириною 30 пікселів, вирівнюється по десяткових комах.

Атрибут DР

Атрибут DР= (Decimal Point, десятковий знак) визначає символ, використо­ву­ваний для відділення цілої частини десяткового дробу. DР="." (за умовчанням) указує на крапку як десятковий символ. DР="," задає кому.

Порожні осередки

Якщо осередок не містить даних, він не матиме меж. Якщо ви хочете, щоб у осередку були межі, але не було вмісту, ви повинні помістити в нього щось, що не буде видне при перегляді. Можна скористатися порожнім рядком <ВR>. Можна навіть задати порожні стовпці, визначивши їх ширину в пікселях або відносних одиницях і не ввівши в отримані осередки ніяких даних. Цей засіб може виявитися корисним при розміщенні тексту і графіки на сторінці.

Атрибут СЕLLРАDDING

Атрибут СЕLLPADDING= визначає ширину порожнього простору між вмістом осередку і її межами, тобто задає поля усередині осередку.

Приклад 7:

< HTML >

< BODY >

< CENTER >

< TABLE BORDER CELLPADDING =20>

< TR >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

</ TR >

< TR >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

</ TR >

</ TABLE >

< BR >

< TABLE BORDER CELLPADDING =0>

< TR >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

</ TR >

< TR >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

< TD >Текст или данные</ TD >

</ TR >

</ TABLE >

</ CENTER >

</ BODY >

</ HTML >

 

Атрибути АLIGN і VALIGN

Теги <ТR>, <ТD> і <ТН> можна модифікувати за допомогою атрибутів ALIGN= і VALIGN=. Атрибут АLIGN визначає вирівнювання тексту і графіки по горизонталі, тобто по лівому або правому краю, або по центру. Горизонтальне вирівнювання може бути задане декількома способами:

ALIGN=ВLЕЕDLEFT – Притискує вміст осередку впритул до лівого краю.

ALIGN=LEFT – Вирівнює вміст осередку по лівому краю з урахуванням відступу, заданого атрибутом Сеllpadding=.

АLIGN=СЕNTER – Розташовує вміст осередку по центру.

АLIGN=Right – Вирівнює вміст осередку по правому краю з урахуванням відступу, заданого атрибутом Сеllpadding=.

Приклад 8:

<HTML>

<BODY>

<TABLE BORDER WIDTH=100%>

<TR>

<TD ALIGN=LEFT>Текст или данные</TD>

<TD ALlGN=CENTER>Текст или данные</TD>

<TD ALIGN=RIGHT>Текст или данные</TD>

</TR>

<TR>

<TD ALIGN=RIGHT>Текст или данные</TD>

<TD ALIGN=CENTER>Текст или данные</TD>

<TD ALIGN=LEFT>Текст или данные</TD>

</TR>

<TR>

<TD ALIGN=RIGHT>Текст или данные</TD>

<TD ALIGN=RIGHT>Текст или данные</TD>

<TD ALIGN=RIGHT>Текст или данные</TD>

</TR>

<TR>

<TD ALIGN=CENTER>Текст или данные</TD>

<TD ALIGN=CENTER>Текст или данные</TD>

<TD ALIGN=CENTER>Текст или данные</TD>

</TR>

<TR>

<TD ALIGN=LEFT>Текст или данные</TD>

<TD ALIGN=LEFT>Текст или данные</TD>

<TD ALIGN=LEFT>Текст или данные</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Атрибут VALIGN = здійснює вирівнювання тексту і графіки усередині осе­ред­ку по вертикалі. Вертикальне вирівнювання може бути задане декель­ко­ма способами: VALIGN=ТОР – Вирівнює вміст осередку по її верхній межі.

VALIGN =МIDDLE – Центрує вміст осередку по вертикалі.
VALIGN=ВОТТОМ –Вирівнює вміст осередку по її нижній межі.

Приклад 9:

<HTML>

<BODY>

<CENTER>

<TABLE BORDER WIDTH=90%>

<TR>

<TD WIDTH=100> Атрибут VALIGN= здійснює вирівнювання тексту і графіки усередині осередку по вертикалі.

</TD>

<TD VALIGN=TOP>верх,</TD>

<TD VALIGN=MIDDLE>середина,</TD>

<TD VALIGN=BOTTOM>низ.</TD>

</TR>

<TR VALIGN=TOP>

<TD> VALIGN=ТОР Вирівнює вміст осередку по її верхній межі.

</TD>

<TD>верх,</TD>

<TD>верх,</TD>

<TD>верх.</TD>

</TR>

<TR VALIGN=middle>

<TD> VALIGN=МIDDLE Центрує вміст осередку по вертикалі.

</TD>

<TD>середина,</TD>

<TD>середина,</TD>

<TD>середина.</TD>

</TR>

<TR VALIGN=bottom>

<TD> VALIGN=ВОТТОМ Вирівнює вміст осередку по її нижній межі.

</TD>

<TD>низ,</TD>

<TD>низ,</TD>

<TD>низ.</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

Атрибут ВОRDER

У тезі <ТАВLЕ> часто визначають, як виглядатимуть рамки, тобто лінії, навколишні елементи таблиці і саму таблицю. Якщо ви не задасте рамку, то отримаєте таблицю без ліній, але порожній простір для них буде відведений. Того ж результату можна добитися, задавши <ТАВLЕ ВОRDER=0>. Іноді хочеться зробити межу потовще, щоб вона краще виділялася. Можна для залучення уваги до малюнка або тексту задати виключно жирні межі. При створенні вкладених таблиць доводиться робити межі різної товщини для різних таблиць, щоб їх легко було розрізняти.

Атрибут СЕLLSPACING

Атрибут СЕLLSPACING= визначає в пікселях ширину проміжків між осередками. Якщо цей атрибут не заданий, за умовчанням задається величи­на, рівна двом пікселям. Атрибут СЕLLSPASING= можна використовувати, щоб помістити текст і графіку безпосередньо там, де вам потрібно. Якщо ви хочете залишити порожнє місце, можна вписати в осередок пропуск.

Приклад 10:

<HTML>

<BODY>

<CENTER>

<TABLE BORDER CELLSPACING=20>

<TR>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

</TR>

</TABLE>

<TABLE CELLSPACING=20>

<TR>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

</TR>

</TABLE>

<TABLE CELLSPACING=0>

<TR>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

<TD>Текст или данные</TD>

</TR>

<TR>

<TD>Текст или данные</TD>

<TD></TD>

<TD>Текст или данные</TD>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

ПРАКТИЧНА ЧАСТИНА

1.Завантажити програми «Блокнот» і «Internet Explorer». Відкрийте свій HTML-файл.

2.Завантажити програму «Paint». Створіть на полотні розміром 190 на 230 пікселей кольоровий малюнок. Збережіть його як «Ваше_ім’я.jpg» у папці, що й Ваш HTML-файл. Закрийте програму «Paint».

3.Створіть HTML-код, у результаті якого броузер покаже таблицю шириною в 90% сторінки, у три рядки й три стовпця, з обрамленням синього кольору, кожна клітина таблиці має бути різного кольору. Середній осередок першого рядка повинен містити ваш малюнок «Ваше_Прізви­ще.jpg» з «підказкою» «Мій малюнок». Інші осередки повинні містити вирівняний по зовнішній межі таблиці довільний текст. Завантажити збережений файл у броузері.

4.Створіть 6 різних списків:

Ненумерований – мої улюблені предмети.

Нумеровані (з різним типом нумерації):

- тропічні фрукти

- Пори року

- Мої друзі

- Породи собак

- Мої улюблені фільми.

5. Побудувати таблиці наступного вигляду: