- •Проектування власного web-сайту
- •Введення в html
- •Створення web-сторінки
- •Оголошення та ідентифікація документа
- •Вставка символів прогалин ( )
- •Вставляння спеціальних символів
- •Створення надстрічкових та підстрічкових індексів
- •Вибір шрифту
- •Зміна розміру шрифту
- •Вибір кольору шрифту
- •Використання моноширінних шрифтів
- •Створення маркованих списків
- •Створення багаторівневих списків
- •Створення списків визначень
- •Вирівнювання тексту відносно графіки
- •Пуста область навколо графічного зображення
- •Побудова горизонтальної лінійки
- •Побудова списків з графічними маркерами
- •Побудова гіперпосилання, що вказує на іншу Web-сторінку
- •Створення посилання на об’єкт цієї ж сторінки
- •Створення гіперпосилання, що вказує на зображення
- •Створення гіперпосилання, що вказує на файл
- •Посилання на адресу електронної пошти
- •Колір тексту гіперпосилань
- •Створення таблиці
- •Товари та ціни
- •Товари та ціни
- •Групування стовпчиків таблиці
- •Товари та ціни
- •Зміна розмірів комірки таблиці
- •Об’єднання комірок таблиці
- •Вирівнювання даних у комірці таблиці
- •Перенесення слів всередині комірок таблиці
- •Задавання параметра обтіканні таблиці текстом
- •Створення фреймів
- •Відтворення об’єкту гіперпосилання у вікні фрейму
- •Смуги прокрутки фреймів
- •Використання атрибуту noresize
- •Властивості меж фреймів
- •Задавання величини полів фрейму
- •Приклад 1
- •Приклад 2
Товари та ціни
Назва товару |
Ціна 1 шт. |
Кількість на складі |
Олівці |
1 грн. |
100 |
Якщо замість другої стрічки задати:
<CAPTION ALIGN = bottom ><I>Товари та ціни</I></CAPTION>,
то заголовок буде під таблицею.
Групування стовпчиків таблиці
Дескриптори <COLGROUP> і <COL> надають можливість групування стовпчиків таблиці. Групи стовпчиків розділяють таблицю на множини вертикально розміщених комірок, ознаки форматування яких можуть встановлюватись одночасно.
Дескриптор <COLGROUP> створює структурну групу стовпчиків, яка виділяє множину логічно однорідних комірок. Наприклад, одна структурна група може охоплювати комірки заголовків стрічок, а інша – комірки, що містять дані. Щоб створити структурну групу стовпчиків, потрібно дескриптору <COLGROUP> надати атрибут SPAN, присвоївши йому значення кількості стовпчиків, які потрібно включити у групу.
Наприклад,
<H2> <CENTER>Товари та ціни</CENTER></H2>
<TABLE BORDER=”10”>
<COLGROUP SPAN=“1”> </COLGROUP>
<COLGROUP SPAN=“2”> </COLGROUP>
<TR>
<TH>Назва товару</TH>
<TH>Ціна 1 шт. </TH>
<TH>Кількість на складі</TH>
</TR>
<TR>
<TD>Олівці</TD>
<TD>1 грн. </TD>
<TD>100</TD>
</TR>
<TR>
<TD>Ручки</TD>
<TD>5 грн. </TD>
<TD>200</TD>
</TR>
</TABLE>
відобразиться браузером:
Товари та ціни
Назва товару |
Ціна 1 шт. |
Кількість на складі |
Олівці |
1 грн. |
100 |
Ручки |
5 грн. |
200 |
Дескриптор <COL> призначений для формування не структурних груп стовпчиків, які розділяють таблицю на розділи, які не мають відношення до структури.
Наприклад,
<H2> <CENTER>Товари та ціни</CENTER></H2>
<TABLE BORDER=”10”>
<COL SPAN=“1”>
<COL SPAN=“1”>
<COL SPAN=“1”>
<TR>
<TH>Назва товару</TH>
<TH>Ціна 1 шт. </TH>
<TH>Кількість на складі</TH>
</TR>
<TR>
<TD>Олівці</TD>
<TD>1 грн. </TD>
<TD>100</TD>
</TR>
<TR>
<TD>Ручки</TD>
<TD>5 грн. </TD>
<TD>200</TD>
</TR>
</TABLE>
відобразиться браузером:
Товари та ціни
Назва товару |
Ціна 1 шт. |
Кількість на складі |
Олівці |
1 грн. |
100 |
Ручки |
5 грн. |
200 |
Якщо таблиця має заголовок, який визначений дескриптором <CAPTION>, тег задавання груп стовпчиків потрібно розмістити після дескриптора заголовка.
Групування стрічок таблиці
Дескриптори <THEAD>, <TBODY> і <TFOOT> дозволяють групувати стрічки таблиці. Групи стрічок розділяють таблицю на множини горизонтально розміщених комірок, ознаки форматування яких можуть встановлюватись одночасно.
Дескриптор <THEAD> надає можливість створення групи заголовків для стовпчиків таблиці. Цей засіб є корисним тоді, коли заголовки повинні мати особливі ознаки форматування, які відрізняються від параметрів решти вмісту таблиці. Дескриптор <THEAD> допускається використовувати у межах таблиці лише один раз.
Дескриптор <TBODY> застосовується для створення однієї або декількох груп стрічок таблиці, що містять основні дані.
Тег <TFOOT> дозволяє створити групу стрічок для надання інформації про суми або результати, яка міститься у нижній частині таблиці. Дескриптор <TFOOT>, як і тег <THEAD>, дозволяється використовувати у межах таблиці лише один раз.
Щоб створити групу заголовків, потрібно:
ввести <THEAD> перед першою стрічкою, яку необхідно включити у склад групи;
набрати </THEAD> після завершальної стрічки, яка повинна увійти у склад групи;
щоб сформатувати групу стрічок з основними даними таблиці, ввести <TBODY> перед першою стрічкою, яку слід включити у склад групи;
набрати </TBODY> після завершальної стрічки, яка повинна ввійти у склад групи;
якщо необхідно створити декілька груп стрічок з основними даними таблиці, повторити дії, вказані у двох попередніх пунктах;
щоб створити групу результатів, ввести <TFOOT> перед першою стрічкою, яку слід включити у склад групи;
набрати </TFOOT> після завершальної стрічки, яка повинна увійти у склад групи.
Наприклад,
<BODY>
<H2> <CENTER>Товари та ціни</CENTER></H2>
<TABLE BORDER=”15”>
<THEAD>
<TR>
<TH>Назва товару</TH>
<TH>Ціна 1 шт. </TH>
<TH>Кількість на складі</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Олівці</TD>
<TD>1 грн. </TD>
<TD>100</TD>
</TR>
<TR>
<TD>Ручки</TD>
<TD>5 грн. </TD>
<TD>200</TD>
</TR>
<TR>
<TD>Лінійки</TD>
<TD>2 грн. </TD>
<TD>150</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD COLSPAN=“3” ALIGN=”center”>
Купуйте наші канцтовари
</TD>
</TR>
</TABLE>
відобразиться браузером:
Товари та ціни
Назва товару |
Ціна 1 шт. |
Кількість на складі |
Олівці |
1 грн. |
100 |
Ручки |
5 грн. |
200 |
Лінійки |
2 грн. |
150 |
Купуйте наші канцтовари |
||
Зміна кольору елементів таблиці
Атрибут BGCOLOR дає можливість указування для елементів таблиці ознаки кольору, що дозволяє виділити важливу інформацію. Можна змінити колір вмісту окремої комірки (дескриптори <TН> або <TD>), стрічки (<TR>), групи стовпчиків (<COLGROUP> або <COL>), групи рядків (<THEAD>, <TBODY> або <TFOOT>).
Наприклад,
<TR BGCOLOR =”#00FFFF”>
<TH>Назва товару</TH>
<TH>Ціна 1 шт. </TH>
<TH>Кількість на складі</TH>
</TR>
відобразиться браузером, як голубий колір групи рядків, колір яких було змінено.
Графічний фон таблиці
Атрибут BACKGROUND дозволяє надати графічного фону окремій комірці таблиці або усій їй цілком.
Наприклад,
<TABLE BORDER=”10” BACKGROUND =”Хмари”.jpg>
відобразиться браузером, як фон хмар на таблиці.
Якщо графічний файл не міститься у цьому ж каталозі, потрібно вказати шлях доступу до нього. Якщо розміри зображення перевищують габарити комірки або таблиці, для яких воно призначене, Web-браузер обріже зображення таким чином, щоб воно помістилось у межах відповідного об’єкту.
Вирівнювання даних у таблиці
Атрибут ALIGN і VALIGN дозволяють встановлювати ознаки горизонтального та вертикального вирівнювання даних у таблиці.
Атрибут ALIGN (right, left, center) призначений для задавання параметра вирівнювання по горизонталі. По замовчуванню вміст комірок заголовків вирівнюється по центру, а комірок даних – по лівому краю.
Атрибут VALIGN (top, middle, bottom) забезпечує можливість вирівнювання даних по вертикалі. По замовчуванню дані відображаються браузерами посередині комірки.
Можна вирівняти дані окремої комірки (дескриптори <TН> або <TD>), стрічки (<TR>), групи стовпчиків (<COLGROUP> або <COL>), групи рядків (<THEAD>, <TBODY> або <TFOOT>).
Наприклад,
<TR ALIGN=”right”>
<TD>Олівці</TD>
<TD>1 грн. </TD>
<TD>100</TD>
</TR>
відобразиться браузером, як вирівняний по правому краю текст цього рядка таблиці.
Зміна розмірів таблиці
Змінюючи розміри таблиці, можна точно розмістити її в обмеженому вільному просторі Web-сторінки.
Атрибут WIDTH дозволяє вказати нове значення ширини таблиці в екранних пікселях або процентах відносно поточних габаритів вікна Web-браузера. Задаючи значення у пік селях, обмежте його величиною 600 або менше – так буде гарантовано, що таблиця поміститься у вікні браузера користувача. Якщо потрібно, щоб ширина таблиці гнучко змінювалась у залежності від розмірів вікна браузера, потрібно вказати значення, виражене у процентах.
Атрибут HEIGHT дає можливість замінити висоту таблиці новим значенням, вираженим у пік селях або процентах відносно поточних габаритів вікна браузера.
Наприклад,
<TABLE BORDER=”10” WIDTH =”400” HEIGHT=”50%”>