Відмінності між версіями «Конспект уроку №5 Свинаренка Олександра»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
 
(не показано 17 проміжних версій цього учасника)
Рядок 4: Рядок 4:
  
 
Підготував: Студент 44 – групи: Свинаренко Олександр
 
Підготував: Студент 44 – групи: Свинаренко Олександр
 
'''Шановний читач, цей конспект доцільніше прочитати в режимі "ПРАВИТЬ", за браком часу я не зміг коректно відобразити текст!!!'''
 
 
   
 
   
 
 
Мета:
 
Мета:
  
Рядок 30: Рядок 27:
 
5)підведення підсумків уроку
 
5)підведення підсумків уроку
  
 +
6)дом. робота
  
  
 +
'''1)Перевірка домашнього завдання'''
  
1)-----(не знаю що задано було додому)-------
+
'''2)Актуалізація'''
 
+
2)актуалізація (припускаю що матеріал вивчений):
+
  
 
1.Поняття Web-сторінки, гіпертексту.
 
1.Поняття Web-сторінки, гіпертексту.
Рядок 52: Рядок 49:
  
  
3)Перелік необхідних знань та вмінь:
+
'''3)'''
+
знати основні поняття з даної теми вміти відповісти
+
  
на запитання з даного конспекту та вміти створювати власну веб-сторінку з текстом різого
+
Вміти давати чіткі відповіді на запитання та
  
форматування та малюнками (7,8,9 балів), вміти створювати необширні таблиці з урахуванням
+
на 7,8,9 балів створити таличку "розклад7.8.9"
  
вимог щодо створення Web-сторінки (10,11,12 балів).  
+
[[Image:розклад7.8.9.jpg]]
  
Стислий теоретичний матеріал (порядок виконання чи інструкційна картка)
+
ТАБЛ."розклад7.8.9"
  
1. Відкрити редактор Notepad (Блокнот).
 
  
2. Для створення HTML-документу створити файл такого змісту:
 
  
 +
на 10 балів - "розклад10"
  
+
[[Image:розклад10.jpg]]
  
<HTML>
+
ТАБЛ."розклад10."
  
<HEAD>
 
  
<TITLE>
 
  
<NOWIKI>Моя сторінка в Інтернет</NOWIKI>
+
на 11 балів - "розклад11"
  
</TITLE>
+
[[Image:розклад11.jpg]]
  
</HEAD>
+
ТАБЛ."розклад11."
  
<BODY>
 
  
Зміст сторінки
 
  
</BODY>
+
на 12 балів - "розклад12"
  
</HTML>
+
[[Image:розклад12.jpg]]
  
Віднайти теги початку і закінчення HTML документу,
+
ТАБЛ."розклад12."
  
початку і закінчення заголовку та тексту документу.
 
  
3.Застосувати тегу <NOWIKI><hx></hx></NOWIKI> заголовку документу
+
Для полегшення виконання роботи додаю інструкційну картку
  
(де х- тип заголовку, число від 1 до 6). Після змін файл
+
'''[[Інструкційна картка]]'''  
 
+
набуває такого вигляду:
+
+
 
+
<HTML>
+
 
+
<HEAD>
+
 
+
<TITLE>
+
 
+
<h1>
+
 
+
<NOWIKI>Моя сторінка в Інтернет</NOWIKI>
+
 
+
</h1>
+
 
+
</TITLE>
+
 
+
</HEAD>
+
 
+
<BODY>
+
 
+
Зміст сторінки
+
 
+
</BODY>
+
 
+
</HTML>
+
 
+
 
+
4. Застосувати теги для зміни шрифта тексту змісту документу відповідно
+
 
+
<NOWIKI><b></b>,жирний</NOWIKI>
+
 
+
<NOWIKI><i></i>,курсивний</NOWIKI>
+
 
+
<NOWIKI><u></u> підкреслення.</NOWIKI>
+
 
+
Після внесених змін текст може набути, наприклад, такого вигляду:
+
 
+
<HTML>
+
 
+
<HEAD>
+
 
+
<TITLE>
+
 
+
<NOWIKI><h1>Моя сторінка в Інтернет</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.
+
 
+
Переглянути отриманий результат.
+
 
+
 
+
Кінець стислого теоретичного матеріалу (порядок виконання чи інструкція),
+
+
який у мене не зовсім стислий.
+
 
+
4)------І тут у мене ОСНОВНА ПРАЦЯ на уроці-----
+
 
+
Я на дошці або усно пропоную дітям теми для їхніх веб-сторінок
+
 
+
Теми:
+
 
+
Моя веб-сторінка
+
 
+
Мій клас
+
 
+
Моя школа
+
 
+
Моє місто(село)
+
 
+
Моє хобі
+
 
+
Мій домашній улюбленець
+
 
+
Для усіх тем таблиці можуть бути однакові,
+
+
з полем індивідуальні дані чм характеристики(відповідно теми).
+
  
Для творчих особистостей пропоную придумати власну тему і таблицю.
+
'''4)Приступаємо до виконання завдань (див. пункт №3).Таблицю кожен виконує у своїй web-сторінці створеній на попередньому уроці.'''
  
На уроці я буду консультувати учнів, і керуваит їхніми "проектами"
+
'''5)підведення підсумків уроку'''
  
5)------------
+
'''6)виписати на окремий аркуш формату А4 основні теги з діючого підручника(перед цим слід пояснити доцільність такого д.з.)'''
  
 
--[[User:СВИНАРЕНКО АЛЕКСАНДР|СВИНАРЕНКО АЛЕКСАНДР]] 00:48, 15 октября 2008 (EEST)
 
--[[User:СВИНАРЕНКО АЛЕКСАНДР|СВИНАРЕНКО АЛЕКСАНДР]] 00:48, 15 октября 2008 (EEST)

Поточна версія на 11:50, 14 листопада 2008

Конспект уроку на тему:

"Створення власної веб-сторінки. Розміщення тексту в таблицях."

Підготував: Студент 44 – групи: Свинаренко Олександр

Мета:

перевірка і оцінювання навичок та вмінь учнів з теми

"створення та редагування веб-сторінки та таблиць у веб-сторінці".

Тип уроку:

урок-лаборторна

Хід уроку

1)перевірка домашнього завдання

2)актуалізація матеріалу, що вивчався

3)узагальнення теми, мети, завдань уроку

4)перевірка і оцінювання навичок та вмінь

5)підведення підсумків уроку

6)дом. робота


1)Перевірка домашнього завдання

2)Актуалізація

1.Поняття Web-сторінки, гіпертексту.

2.Особливості адресації у WWW. URL (Uniform Resource Locator).

3.Що таке тег? Яка різниця між відкриваючим і закриваючим?

4.Основні вимоги до Web-сторінок.

5.Що потрібно для створення Web-сторінки?

6.Що можна розмістити на Web-сторінці?

7.Вбудовані малюнки. Вимоги до форматів малюнків.


3)

Вміти давати чіткі відповіді на запитання та

на 7,8,9 балів створити таличку "розклад7.8.9"

Файл:Розклад7.8.9.jpg

ТАБЛ."розклад7.8.9"


на 10 балів - "розклад10"

Файл:Розклад10.jpg

ТАБЛ."розклад10."


на 11 балів - "розклад11"

Файл:Розклад11.jpg

ТАБЛ."розклад11."


на 12 балів - "розклад12"

Файл:Розклад12.jpg

ТАБЛ."розклад12."


Для полегшення виконання роботи додаю інструкційну картку

Інструкційна картка

4)Приступаємо до виконання завдань (див. пункт №3).Таблицю кожен виконує у своїй web-сторінці створеній на попередньому уроці.

5)підведення підсумків уроку

6)виписати на окремий аркуш формату А4 основні теги з діючого підручника(перед цим слід пояснити доцільність такого д.з.)

--СВИНАРЕНКО АЛЕКСАНДР 00:48, 15 октября 2008 (EEST)