Перегляд вихідного коду сторінки Інструкційна картка

'''Стислий теоретичний матеріал (порядок виконання чи інструкційна картка)'''

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>). Для того, що кращого “розноситься” в різні боки 

кількості покинутих і 

пропущених шайб між ними використано довге тире - це спеціальний символ &mdash;. 

Зачорнені квадрати турнірної таблиці зроблені просто - за допомогою осередків з чорним 

кольором фону 

<NOWIKI>(BGCOLOR="black")“ </NOWIKI>  І, нарешті, для отобра-I женія рамки навколо порожнього осередку (лівою 

верхньою) туди був 

поміщений нерозривний пропуск (&nbsp;).

Отримаємо табличку:

[[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">&nbsp;</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>&laquo;POTOP&raquo;</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&mdash;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>&laquo;POTATOP&raquo;</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&mdash;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;УРОЖАЙ&raquo;</Т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&mdash;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>&laquo;МЕЧТА&raquo;</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&mdash;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>&laquo;МЕЧТА& 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&mdash;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>&laquo;OKA3ИЯ&raquo;</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&mdash;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. 

Переглянути отриманий результат.


Кінець стислого теоретичного матеріалу (порядок виконання чи інструкційної картки),
 
який у мене не зовсім стислий.

[[http://www.kspu.kr.ua/wiki/index.php/%D0%9A%D0%BE%D0%BD%D1%81%D0%BF%D0%B5%D0%BA%D1%82_%D1%83%D1%80%D0%BE%D0%BA%D1%83_%E2%84%965_%D0%A1%D0%B2%D0%B8%D0%BD%D0%B0%D1%80%D0%B5%D0%BD%D0%BA%D0%B0_%D0%9E%D0%BB%D0%B5%D0%BA%D1%81%D0%B0%D0%BD%D0%B4%D1%80%D0%B0]]