|
|
| Рядок 61: |
Рядок 61: |
| | '''[[Інструкційна картка]]''' | | '''[[Інструкційна картка]]''' |
| | | | |
| − | '''Стислий теоретичний матеріал (порядок виконання чи інструкційна картка)'''
| |
| − |
| |
| − | 1. Відкрити редактор Notepad (Блокнот).
| |
| − |
| |
| − | 2. Для створення HTML-документу створити файл такого змісту:
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <HTML>
| |
| − |
| |
| − | <HEAD>
| |
| − |
| |
| − | <TITLE>
| |
| − |
| |
| − | <NOWIKI>Моя сторінка в Інтернет</NOWIKI>
| |
| − |
| |
| − | </TITLE>
| |
| − |
| |
| − | </HEAD>
| |
| − |
| |
| − | <BODY>
| |
| − |
| |
| − | Зміст сторінки
| |
| − |
| |
| − | </BODY>
| |
| − |
| |
| − | </HTML>
| |
| − |
| |
| − | Віднайти теги початку і закінчення HTML документу,
| |
| − |
| |
| − | початку і закінчення заголовку та тексту документу.
| |
| − |
| |
| − | 3.Застосувати тегу <NOWIKI><hx></hx></NOWIKI> заголовку документу
| |
| − |
| |
| − | (де х- тип заголовку, число від 1 до 6). Після змін файл
| |
| − |
| |
| − | набуває такого вигляду:
| |
| − |
| |
| − |
| |
| − | <HTML>
| |
| − |
| |
| − | <HEAD>
| |
| − |
| |
| − | <TITLE>
| |
| − |
| |
| − | <NOWIKI><h1></NOWIKI>
| |
| − |
| |
| − | <NOWIKI>Моя сторінка в Інтернет</NOWIKI>
| |
| − |
| |
| − | <NOWIKI></h1></NOWIKI>
| |
| − |
| |
| − | </TITLE>
| |
| − |
| |
| − | </HEAD>
| |
| − |
| |
| − | <BODY>
| |
| − |
| |
| − | Зміст сторінки
| |
| − |
| |
| − | </BODY>
| |
| − |
| |
| − | </HTML>
| |
| − |
| |
| − |
| |
| − | 4. Застосувати теги для зміни шрифта тексту змісту документу відповідно
| |
| − |
| |
| − | <NOWIKI><b></b>,жирний</NOWIKI>
| |
| − |
| |
| − | <NOWIKI><i></i>,курсивний</NOWIKI>
| |
| − |
| |
| − | <NOWIKI><u></u> підкреслення.</NOWIKI>
| |
| − |
| |
| − | Після внесених змін текст може набути, наприклад, такого вигляду:
| |
| − |
| |
| − | <HTML>
| |
| − |
| |
| − | <HEAD>
| |
| − |
| |
| − | <TITLE>
| |
| − |
| |
| − | <NOWIKI><h1></NOWIKI>Моя сторінка в Інтернет<NOWIKI></h1></NOWIKI>
| |
| − |
| |
| − | </TITLE>
| |
| − |
| |
| − | </HEAD>
| |
| − |
| |
| − | <BODY>
| |
| − |
| |
| − | <NOWIKI><b>Зміст цього рядка написаний жирним шрифтом </b></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><i>Зміст цього рядка написаний курсивом </i></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><u>Зміст цього рядка написаний підкресленим шрифтом </u></NOWIKI>
| |
| − |
| |
| − | </BODY>
| |
| − |
| |
| − | </HTML>
| |
| − |
| |
| − | таблиці:
| |
| − |
| |
| − | (я вважаю що таблиці дещо складніше сприймаються, тому матеріал даю обширніше)
| |
| − |
| |
| − | Будь-яка таблиця визначається в HTML за допомогою тега <NOWIKI><TABLE></NOWIKI> .
| |
| − |
| |
| − | Все, що розташоване між тегамі
| |
| − |
| |
| − | <NOWIKI><TABLE> і </TABLE></NOWIKI>, вважається таблицею. Проте не поспішаєте!
| |
| − |
| |
| − | Якщо ви напишете що-небудь ніби
| |
| − |
| |
| − | <NOWIKI><TABLE></NOWIKI>
| |
| − |
| |
| − | Это уже таблица?
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | то, швидше за все, результат вас розчарує: броузер відобразить просто звичайний текст.
| |
| − |
| |
| − | Річ у тому, що мало створити таблицю,
| |
| − |
| |
| − | треба в ній ще створити хоч би один рядок, а в рядку хоч би один осередок.
| |
| − |
| |
| − | Рядки таблиці створюються за допомогою тега <NOWIKI><TR></NOWIKI> і його закриваючого тега,
| |
| − |
| |
| − | а осередки - за допомогою тега <NOWIKI><TD></NOWIKI> і його
| |
| − |
| |
| − | закриваючого тега.
| |
| − |
| |
| − | Проте, написавши:
| |
| − |
| |
| − | <NOWIKI><TABLE></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI>
| |
| − |
| |
| − | Это уже таблица?
| |
| − |
| |
| − | </NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | ми отримаємо той же результат, що і раніше (принаймні, в більшості броузеров).
| |
| − |
| |
| − | У чому ж справа? А річ у тому,
| |
| − |
| |
| − | що за умовчанням таблиці зазвичай відображаються без рамки.
| |
| − |
| |
| − | Якщо ми хочемо, щоб наша таблиця з одного осередку
| |
| − |
| |
| − | мала рамку, ми повинні явно задати її ширину, встановивши атрибут BORDER=,
| |
| − |
| |
| − | наприклад, от так:
| |
| − |
| |
| − | <NOWIKI><TABLE BORDER="3"> <TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD></NOWIKI>Это уже таблица!</NOWIKI></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | Ось тепер це вже на щось схоже (мал. 2.1 3 ). До речі,
| |
| − |
| |
| − | досить цікаво розглянути рамку, встановивши що-небудь
| |
| − |
| |
| − | ніби BORDER="30".
| |
| − |
| |
| − | Основні атрибути таблиці
| |
| − |
| |
| − | Як бачите, наша таблиця вийшла рівно такої ширини, яка нуж- ная,
| |
| − |
| |
| − | щоб вміщати написану нами фразу, і ні на
| |
| − |
| |
| − | піксел більше. За допомогою атрибуту WIDTH= можна встановлювати будь-яку
| |
| − |
| |
| − | бажану ширину таблиці. Наприклад, якщо ми напишемо
| |
| − |
| |
| − | <NOWIKI><TABLE WIDTH="50" BORDER="3"></NOWIKI>
| |
| − |
| |
| − |
| |
| − | [[Image:20000001.jpg]]
| |
| − |
| |
| − | Мал. 2.1 3 . Таблиця з одного осередку
| |
| − |
| |
| − | то броузер відобразить таблицю шириною в 50 пікселов. При цьому у фразі
| |
| − |
| |
| − | Це вже таблиця! останнє слово, швидше
| |
| − |
| |
| − | за все, не поміститься в довжину таблиці і автоматично перенесеться на інший рядок.
| |
| − |
| |
| − | А якщо встановити
| |
| − |
| |
| − | <NOWIKI>WIDTH-50%</NOWIKI>, то таблиця розтягнеться на половину ширини вікна броузеоа (мал. 2.1 4).
| |
| − |
| |
| − | [[Image:20000002.jpg]]
| |
| − |
| |
| − | Мал. 2.1 4 . Установка ширини таблиці
| |
| − |
| |
| − | А що робити, щоб текст не “приліплювався” так сильно до межі осередку
| |
| − |
| |
| − | як показано на мал. 2.14 і 2.15?
| |
| − |
| |
| − | Для цього теж існує спеціальний атрибут - <NOWIKI>CELLPADDING=</NOWIKI>.
| |
| − |
| |
| − | Його значення визначає, на скільки крапок текст
| |
| − |
| |
| − | відступатиме від краю осередку.
| |
| − |
| |
| − | Для кращої ілюстрації цього атрибуту виберемо як його значення яке-небудь
| |
| − |
| |
| − | велике число например,20:
| |
| − |
| |
| − | <NOWIKI><TABLE WIDTH="50%" BORDER="3" CELLPADDING="20"></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD></NOWIKI>
| |
| − |
| |
| − | Это уже таблица!
| |
| − |
| |
| − | <NOWIKI></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | Результат показаний на мал. 2.1 5 . Зрозуміло,
| |
| − |
| |
| − | в звичайних ситуаціях величину CELLPADDING= встановлюють
| |
| − |
| |
| − | приблизно рівною 3-5 крапок, щоб просто небагато відступити від краю осередку.
| |
| − |
| |
| − | [[Image:20000003.jpg]]
| |
| − |
| |
| − | Мал. 2.1 5. Застосування атрибуту CELLPADDING=
| |
| − |
| |
| − | Крім того, є ще атрибут CELLSPACING=, який задає відстань між осередками таблиці.
| |
| − |
| |
| − | В даному випадку ми можемо
| |
| − |
| |
| − | побачити дію цього атрибуту із зміни відстані між межами наший єдиного осередку
| |
| − |
| |
| − | і рамкою таблиці. Для краси
| |
| − |
| |
| − | зробимо при цьому товщину табличної рамки трохи більше:
| |
| − |
| |
| − | <NOWIKI><TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20"></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD></NOWIKI>
| |
| − |
| |
| − | Это уже таблица!
| |
| − |
| |
| − | <NOWIKI></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | Результат представлений на мал. 2.1 6.
| |
| − |
| |
| − | [[Image:20000004.jpg]]
| |
| − |
| |
| − | Мал. 2.1 6 . Застосування атрибуту CELLSPACING=
| |
| − |
| |
| − | До речі, рамка таблиці абсолютно не зобов'язана бути сіркою,
| |
| − |
| |
| − | принаймні в броузере Internet Explorer (версії 3 і вище).
| |
| − |
| |
| − | Для цього служить атрибут BORDERCOLOR=, якому можна дати як значення
| |
| − |
| |
| − | будь-який доступний колір. Проте,
| |
| − |
| |
| − | якщо вставити в наш приклад що-небудь ніби BORDERCOLOR="green" і порівняти
| |
| − |
| |
| − | результат з попереднім, то він,
| |
| − |
| |
| − | швидше за все, вам не сподобається:
| |
| − |
| |
| − | у попередньому випадку таблична рамка зліва і зверху виводилася світлішим
| |
| − |
| |
| − | відтінком, ніж знизу і справа, за рахунок чого виникало враження “опуклості”.
| |
| − |
| |
| − | А зараз вся рамка стала
| |
| − |
| |
| − | одноколірною - зеленою - і виглядає набагато “нудніше”.
| |
| − |
| |
| − | То ж справедливо і для рамки осередку (яка була,
| |
| − |
| |
| − | навпаки, “увігнути”).
| |
| − |
| |
| − | Тому замість одного атрибуту BORDERCOLOR= ми рекомендуємо вживати два:
| |
| − |
| |
| − | BORDERCOLORLIGHT= і BORDERCOLORDARK=,
| |
| − |
| |
| − | задаючі колір, відповідно, світлої і темної сторін рамки.
| |
| − |
| |
| − | Правда, ці атрибути підтримуються тільки броузером
| |
| − |
| |
| − | Internet Explorer.
| |
| − |
| |
| − | <NOWIKI><TABLE WIDTH="50%" BORDER=="6" CELLSPACING="6" CELLPADDING="20" BORDERCOLORLIGHT="lime"
| |
| − |
| |
| − | BORDERCOLORDARK="green"></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD></NOWIKI>
| |
| − |
| |
| − | Это уже таблица!
| |
| − |
| |
| − | <NOWIKI></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | Результат показаний на мал. 2.1.7. До речі, при перегляді на екрані
| |
| − |
| |
| − | комп'ютера звернете увагу на те, що lime і
| |
| − |
| |
| − | green - в принципі відповідне, але не саме краще поєднання значень даних атрибутів.
| |
| − |
| |
| − | Для додання природності
| |
| − |
| |
| − | табличній рамці корисно небагато поекспериментувати з відтінками квітів.
| |
| − |
| |
| − | [[Image:20000005.jpg]]
| |
| − |
| |
| − | Мал. 2.1 7 . Фарбування рамки таблиці
| |
| − |
| |
| − | Колір фону таблиці можна задати за допомогою атрибуту BGCOLOR=.
| |
| − |
| |
| − | Він може відрізнятися від кольору загального
| |
| − |
| |
| − | фону всієї сторінки, визначеного атрибутом BGCOLOR= тега <NOWIKI><BODY></NOWIKI>.
| |
| − |
| |
| − | Щоб вирівняти таблицю по центру або правому краю, можна встановити в теге <NOWIKI><TABLE></NOWIKI>
| |
| − |
| |
| − | атрибут ALIGN=. Все це ми
| |
| − |
| |
| − | зараз проілюструємо, а заодно.давайте додамо ще один осередок в нашу таблицю:
| |
| − |
| |
| − | <NOWIKI><TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center"
| |
| − |
| |
| − | BORDERCOLORLIGHT="Lime"
| |
| − |
| |
| − | BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF"></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><ТD></NOWIKI>
| |
| − |
| |
| − | Это первая ячейка
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><ТD></NOWIKI>
| |
| − |
| |
| − | Это вторая ячейка
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | Результат представлений на мал. 2.1 8 . Як бачите,
| |
| − |
| |
| − | відстань між осередками зберігається рівною значенню
| |
| − |
| |
| − | атрибуту CELLSPACING= тепер це помітно особливо добре.
| |
| − |
| |
| − | [[Image:20000006.jpg]]
| |
| − |
| |
| − | Мал. 2.1 8 . Таблиця з двох осередків Тепер додамо в нашу таблицю другий рядок:
| |
| − |
| |
| − | <NOWIKI><TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20"
| |
| − |
| |
| − | ALIGN=="center" BORDERCOLORLIGHT="Lime"
| |
| − |
| |
| − | BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF"></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><ТD></NOWIKI>
| |
| − |
| |
| − | Это первая ячейка
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD></NOWIKI>
| |
| − |
| |
| − | Это вторая ячейка
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><ТD></NOWIKI>
| |
| − |
| |
| − | Это первая ячейка второй строки
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | Оскільки в другому рядку всього один осередок (див. мал. 2. 1.9 ),
| |
| − |
| |
| − | на місці відсутнього другого осередку другого
| |
| − |
| |
| − | рядка залишився порожній простір.
| |
| − |
| |
| − | Іноді це буває корисно, але частіше потрібно залишити порожню рамку
| |
| − |
| |
| − | незаповненого осередку. Як це зробити? Якщо
| |
| − |
| |
| − | ми просто додамо в таблицю пару тегов <NOWIKI><TD></NOWIKI> <NOWIKI></TD></NOWIKI>, то, як не дивно,
| |
| − |
| |
| − | нічого не зміниться - навколо порожнього
| |
| − |
| |
| − | осередку рамка не відображається!
| |
| − |
| |
| − | Додавання пропуску між тегамі осередку також нічого не дає, оскільки в HTML
| |
| − |
| |
| − | зайві пропуски ігноруються...
| |
| − |
| |
| − | [[Image:20000007.jpg]]
| |
| − |
| |
| − | Мал. 2. 1.9 . Приклад таблиці з “бракуючим” осередком
| |
| − |
| |
| − | [[Image:20000008.jpg]]
| |
| − |
| |
| − | Мал. 2.2 0 . Приклад таблиці з порожнім осередком
| |
| − |
| |
| − | До цих пір ми розглядали тільки атрибути тега <NOWIKI><TABLE></NOWIKI> .
| |
| − |
| |
| − | Проте теги <NOWIKI><TR></NOWIKI> і <NOWIKI><TD></NOWIKI> теж можуть мати власні атрибути,
| |
| − |
| |
| − | такі, як BGCOLOR=, BORDERCOLOR=, BORDERCOLORLIGHT=, BORDERCOLORDARK= і ALIGN=.
| |
| − |
| |
| − | Їх значення розповсюджуються
| |
| − |
| |
| − | тільки на один рядок або елемент таблиці. Крім того, є атрибут VALIGN=,
| |
| − |
| |
| − | за допомогою якого можна управляти
| |
| − |
| |
| − | вертикальним вирівнюванням тексту рядка або осередку.
| |
| − |
| |
| − | Цей атрибут може приймати значення top (вирівняти по
| |
| − |
| |
| − | верхньому краю), middle (по середині) і bottom (по нижньому краю).
| |
| − |
| |
| − | Крім того, в деяких броузерах, наприклад
| |
| − |
| |
| − | Opera, підтримується також атрибут NOWRAP, що забороняє перенесення тексту
| |
| − |
| |
| − | осередку на наступний рядок.
| |
| − |
| |
| − | Управління шириною стовпців
| |
| − |
| |
| − | Якщо ви подивитеся на мал. 2.2 0, то побачите, що ширина стовпців в наший таблиці різна.
| |
| − |
| |
| − | Це відбувається тому,
| |
| − |
| |
| − | що броузер розподіляє місце в таблиці залежно від кількості тексту,
| |
| − |
| |
| − | якого в першому стовпці опинилося більше.
| |
| − |
| |
| − | Проте, якщо в теге першого осередку вказати <NOWIKI><TD WIDTH="50%"></NOWIKI>,
| |
| − |
| |
| − | то обидва стовпці стануть рівними по ширині.
| |
| − |
| |
| − | Таким чином, можна користуватися атрибутом WIDTH= в теге <TD> так само,
| |
| − |
| |
| − | як і в теге <NOWIKI><TABLE></NOWIKI>, визначаючи ширину
| |
| − |
| |
| − | кожного осередку або в пікселах, або у відсотках від загальної ширини вікна броузера.
| |
| − |
| |
| − | Правда, строго кажучи, не
| |
| − |
| |
| − | можна задати ширину кожного осередку, а лише ширину кожного стовпця,
| |
| − |
| |
| − | оскільки в більшості броузеров всі
| |
| − |
| |
| − | осередки в стовпці завжди мають однакову ширину.
| |
| − |
| |
| − | Більш того, треба мати на увазі, що більшість броузеров можуть довільно
| |
| − |
| |
| − | відходжувати від заданих нами значень
| |
| − |
| |
| − | ширини осередків, якщо визнають потрібним. Отже ніколи не можна повністю
| |
| − |
| |
| − | покладатися на атрибут WIDTH=. А якщо
| |
| − |
| |
| − | абсолютно необхідно точно задати ширину якого-небудь осередку,
| |
| − |
| |
| − | слід користуватися витонченішими засобами.
| |
| − |
| |
| − | Наприклад, для завдання мінімальної ширини можна помістити в елемент таблиці
| |
| − |
| |
| − | прозорий малюнок відповідного
| |
| − |
| |
| − | розміру. Про те, як це робиться.
| |
| − |
| |
| − | Об'єднання осередків
| |
| − |
| |
| − | Іноді в таблицях зустрічаються так звані об'єднані осередки - коли декілька
| |
| − |
| |
| − | розташованих поряд осередків
| |
| − |
| |
| − | зливаються в одну велику. Це можна зробити, встановивши
| |
| − |
| |
| − | атрибути COLSPAN= (для об'єднання сусідніх стовпців)
| |
| − |
| |
| − | або ROWSPAN= (для об'єднання сусідніх рядків):
| |
| − |
| |
| − | <NOWIKI><TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime"
| |
| − |
| |
| − | BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF"></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="33%">Этo первая ячейка</ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="33%">Это вторая ячейка</ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ROWSPAN="3">A это три ячейки третьего столбца объединились в одну большую ячейку</ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR> <TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD COLSPAN="2">Это единственная ячейка второй строки, объединяющая оба столбца</ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD>3ro первая ячейка третьей строки</ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD>A это вторая ячейка третьей строки</ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | Результат показаний на мал. 2.21. Тут, як бачите, відображена таблиця з
| |
| − |
| |
| − | трьох рядків по три
| |
| − |
| |
| − | осередки. Проте
| |
| − |
| |
| − | третій осередок першого рядка за допомогою атрибуту ROWSPAN="3" об'єднаний з рештою двох
| |
| − |
| |
| − | осередків третього
| |
| − |
| |
| − | стовпця. Тому в наступних рядках ми можемо спокійно забути про третій стовпець - місце вже
| |
| − |
| |
| − | зайняте. Тому в
| |
| − |
| |
| − | третьому рядку таблиці всього два осередки. А в другому рядку відбувається наступне: ми за
| |
| − |
| |
| − | допомогою атрибуту
| |
| − |
| |
| − | COLSPAN="2" об'єднуємо два осередки цього ряду, що залишилися, в одну.
| |
| − |
| |
| − | До речі, звернете увагу на те, що, хоча ширина перших двох стовпців таблиці задана рівною
| |
| − |
| |
| − | 33%, тобто приблизно
| |
| − |
| |
| − | третина ширини таблиці доводиться на кожен стовпець, правий стовпець насправді займає явно
| |
| − |
| |
| − | більше місця. Це
| |
| − |
| |
| − | відбулося тому, що інакше броузеру не вдалося б умістити завширшки цього стовпця довге
| |
| − |
| |
| − | слово “об'єдналися”. В
| |
| − |
| |
| − | результаті броузер самостійно трохи розширив цей стовпець за рахунок двох остальних.
| |
| − |
| |
| − | Ми з вами ще не розглянули такі елементи таблиці, як заголовок і висновок. У HTML 4.0 можна
| |
| − |
| |
| − | весь основний зміст
| |
| − |
| |
| − | таблиці позначити тегом <NOWIKI><TBODY></NOWIKI> . Тоді заголовок таблиці позначається тегом <NOWIKI><THEAD></NOWIKI>, а
| |
| − |
| |
| − | висновок - тегом <NOWIKI><TFOOT></NOWIKI>.
| |
| − |
| |
| − | Все три тега уживаються з
| |
| − |
| |
| − | [[Image:20000009.jpg]]
| |
| − |
| |
| − | Мал. 2.21. Приклад об'єднання елементів таблиці
| |
| − |
| |
| − | закриваючими тегамі і можуть мати різні атрибути, наприклад BGCOLOR=, ALIGN=, VALIGN=.
| |
| − |
| |
| − | А для осередків заголовка таблиці замість тега <NOWIKI><TD></NOWIKI> зазвичай використовують тег <NOWIKI><ТН></NOWIKI> . В
| |
| − |
| |
| − | принципі, це одне і те
| |
| − |
| |
| − | ж, проте в осередках <NOWIKI><ТН></NOWIKI> текст за умовчанням вирівнюється по центру і відображається
| |
| − |
| |
| − | напівжирним зображенням шрифту.
| |
| − |
| |
| − | Для прикладу додамо в нашу учбову таблицю заголовок і висновок:
| |
| − |
| |
| − | <NOWIKI><TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime"
| |
| − |
| |
| − | BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF"></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><THEAD BGCOLOR="Aqua"></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR><TH COLРАN="3">УЧЕБНАЯ ТАБЛИЦА</ТН></ТR> </THEAD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TBODY></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="33%"></NOWIKI>
| |
| − |
| |
| − | первая ячейка
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="33%"></NOWIKI>
| |
| − |
| |
| − | вторая ячейка
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ROWSPAN="3"></NOWIKI>
| |
| − |
| |
| − | A это три ячейки третьего столбца объединились в одну большую
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | строки
| |
| − |
| |
| − | <NOWIKI><TR COLSPAN="2"></NOWIKI>
| |
| − |
| |
| − | единственная ячейка второй строки, объединяющая оба столбца
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><ТD></NOWIKI>
| |
| − |
| |
| − | Это первая ячейка третьей строки
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD></NOWIKI>
| |
| − |
| |
| − | A это вторая ячейка третьей строки
| |
| − |
| |
| − | <NOWIKI></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TBODY> <TFOOT BGCOLOR="Yellow"></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR><TD COLSPAN="3" ALIGN="center"SMALL >Понравилось делать?</Small></ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></ТR> ><Small>Понравилось таблицы</TFOOT></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | [[Image:2000000A.jpg]]
| |
| − |
| |
| − | Мал. 2.2.2. Використання заголовка
| |
| − |
| |
| − | Результат показаний на мал. 2.22. Залишилося додати, що використання атрибуту RULES=,
| |
| − |
| |
| − | що обговорювався вище, із
| |
| − |
| |
| − | значенням "groups" має на увазі саме ці “групи”: заголовок, основний зміст і висновок
| |
| − |
| |
| − | таблиці, позначені тегамі
| |
| − |
| |
| − | <NOWIKI><THEAD>, <TBODY> і <TFOOT></NOWIKI>.
| |
| − |
| |
| − | Аналіз прикладу
| |
| − |
| |
| − | Тепер, озброївшись отриманими знаннями, давайте повернемося до таблиці, представленої на
| |
| − |
| |
| − | мал. 2.1.3 і
| |
| − |
| |
| − | подивимося, як же вона зроблена. Як основний колір таблиці тут вибраний сріблястий
| |
| − |
| |
| − | (#Е4Е4Е4), Атрибут
| |
| − |
| |
| − | WIDTH="100%"<NOWIKI> розтягує її на всю ширину вікна броузера, а значення <NOWIKI>CELLSPACING="0"</NOWIKI> “притискує” осередки один до
| |
| − |
| |
| − | одного. За допомогою значення <NOWIKI>CELLPADDING="2"</NOWIKI> забезпечується наявність невеликих “полів” в
| |
| − |
| |
| − | кожному осередку.
| |
| − |
| |
| − | У першому рядку таблиці задається ширина стовпців. Ширина першого стовпця з номерами
| |
| − |
| |
| − | хокейних команд задана
| |
| − |
| |
| − | рівною 20 пікселам, а всіх стовпців з результатами матчів - 40 пікселам. Ширина стовпця з
| |
| − |
| |
| − | назвами команд задана
| |
| − |
| |
| − | рівною 20% від ширини вікна. Ширина двох останніх стовпців не задана взагалі - їм
| |
| − |
| |
| − | відводиться місце, що все залишилося.
| |
| − |
| |
| − | У багатьох елементах таблиці заданий атрибут <NOWIKI>ALIGN="center"</NOWIKI>, без якого вирівнювання тексту
| |
| − |
| |
| − | відбувалося б по лівому краю.
| |
| − |
| |
| − | У всіх осередках з результатами зустрічей заданий білий фон <NOWIKI>(BGCOLOR="white")</NOWIKI>,
| |
| − |
| |
| − | в осередках з кількістю очок і заброшенных/пропущенных шайб для кращого візуального
| |
| − |
| |
| − | виділення використаний інший колір фону.
| |
| − |
| |
| − | Кількість очок, як головна інформація в кожному рядку таблиці, виділена просто напівжирною
| |
| − |
| |
| − | і трохи збільшеною
| |
| − |
| |
| − | шрифтом (за допомогою тегов <NOWIKI><В> і </В></NOWIKI>). Для того, що кращого “розноситься” в різні боки
| |
| − |
| |
| − | кількості покинутих і
| |
| − |
| |
| − | пропущених шайб між ними використано довге тире - це спеціальний символ —.
| |
| − |
| |
| − | Зачорнені квадрати турнірної таблиці зроблені просто - за допомогою осередків з чорним
| |
| − |
| |
| − | кольором фону
| |
| − |
| |
| − | <NOWIKI>(BGCOLOR="black")“ </NOWIKI> І, нарешті, для отобра-I женія рамки навколо порожнього осередку (лівою
| |
| − |
| |
| − | верхньою) туди був
| |
| − |
| |
| − | поміщений нерозривний пропуск ( ).
| |
| − |
| |
| − | Отримаємо табличку:
| |
| − |
| |
| − | [[Image:20000000.jpg]]
| |
| − |
| |
| − | '''Тепер давайте подивимося на текст цієї сторіночки цілком:'''
| |
| − |
| |
| − | <NOWIKI><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TITLE>TypHMpHan таблица</Тitle></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></HEAD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><BODY BGCOLOR="#FFFFB3" TEXT="02020" LINK="400080" VLINK="#400080" ALINK="H00080"></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><DIV ALIGN="center" </NOWIKI>
| |
| − |
| |
| − | <NOWIKI><Н1>ЧЕМПИОНАТ ГОРОДА ПО ХОККЕЮ</Н1></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><НЗ>ТАБЛИЦА РЕЗУЛЬТАТОВ</НЗ></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></DIV></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TABLE ALIGN="center" BGCOLOR="#E4E4E4" WIDTH="100%" CELLSPACING="0" CELLPADDING="2" BORDER="3"> <TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="20" ALIGN="center"> </TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="20%">Koмaндa</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH=Э40" ALIGN=Эcenter">1</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="40" ALIGN="center">2</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="40" ALIGN="center">3</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="40" ALIGN="center">4</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="40" ALIGN="center">5</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD WIDTH="40" ALIGN="center">6</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center">Шайбы</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center">Очки</TD> </TR> </NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI>ALIGN="center">1</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD>«POTOP»</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI>BGCOLOR="black"></TD> <TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI>ALIGN="center"</NOWIKI>
| |
| − |
| |
| − | <NOWIKI>BGCOLOR="white">6:4</TD> <TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI>ALIGN="center" </NOWIKI>
| |
| − |
| |
| − | <NOWIKI>BGCOLOR="white">2:3</TD> <TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI>ALIGN="center" </NOWIKI>
| |
| − |
| |
| − | <NOWIKI>BGCOLOR="white">7:3</TD> <TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI>ALIGN="center" </NOWIKI>
| |
| − |
| |
| − | <NOWIKI>BGCOLOR="white">2:1</TD> <TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI>ALIGN="center"</NOWIKI>
| |
| − |
| |
| − | <NOWIKI>BGCOLOR="white">0:0</TD> <TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI>ALIGN="center" </NOWIKI>
| |
| − |
| |
| − | <NOWIKI>BGCOLOR="#DFFFDF">17—11</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>7</BIG> </NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR> <TR> </NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN=”center”2</TD> </NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD>«POTATOP»</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN=”center” BGCOLOR=”white>”4:6</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD BGCOLOR=”black”></TD> </NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white"5: 4</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">5:3</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">5:5</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">2:2</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="#DFFFDF">21—20</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>6</BIG> </B></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR> </NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center">3</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><ТD>&lаquo;УРОЖАЙ»</ТD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">3:2</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">4:5</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD BGCOLOR="black"></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">1:1</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">11:2</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">14:4</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="#DFFFDF">33—14</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>5</BIG> </B></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center">4</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD>«МЕЧТА»</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">3:7</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR=="white">3 ; 5</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">l:1</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD BGCOLOR="black"></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">l:1</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white"> 10 : 0</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="#DFFFDF">18—14</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>4</BIG> </B></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center">5</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD>«МЕЧТА& raquo;</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">l:2</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">5:5</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">2:11</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALI.GN="center" BGCOLOR="white">l: 1</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD BGCOLOR="black"></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">8:3</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALING="'center"BGCOLOR="#DFFFDF">17—22</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>4</BIG> </B></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center">6</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD>«OKA3ИЯ»</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">0:0</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">2:2</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">4:14</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">0 :10</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="white">3 : 8</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD BGCOLOR="black"></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="#DFFFDF">9—34</TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI><TD ALIGN="center" BGCOLOR="#FF8484"><B><BIG>2</BIG> </B></TD></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TR></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></TABLE></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></BODY></NOWIKI>
| |
| − |
| |
| − | <NOWIKI></HTML></NOWIKI>
| |
| − |
| |
| − |
| |
| − | 5.Зберігти файл на жорсткому диску С:\ в папці My documents (Мои документы) під назвою
| |
| − |
| |
| − | My_page.html (html розширення файла).
| |
| − |
| |
| − | Закрити редактор Notepad (Блокнот).
| |
| − |
| |
| − | 6.Завантажити Internet explorer, та відкрити файл My_page.html.
| |
| − |
| |
| − | Переглянути отриманий результат.
| |
| − |
| |
| − |
| |
| − | Кінець стислого теоретичного матеріалу (порядок виконання чи інструкційної картки),
| |
| − |
| |
| − | який у мене не зовсім стислий.
| |
| | | | |
| | 4)------І тут у мене ОСНОВНА ПРАЦЯ на уроці----- | | 4)------І тут у мене ОСНОВНА ПРАЦЯ на уроці----- |
"створення та редагування веб-сторінки та таблиць у веб-сторінці".
2.Особливості адресації у WWW. URL (Uniform Resource Locator).
7.Вбудовані малюнки. Вимоги до форматів малюнків.
на запитання з даного конспекту та вміти створювати власну веб-сторінку з текстом різого
форматування та малюнками (7,8,9 балів), вміти створювати необширні таблиці з урахуванням
