HTML 3 by Leonid Flegantov

Основи Web-майстерності

HTML Методичні вказівки та завдання до лабораторних робіт

Частина 3 Таблиці на веб-сторінці.

Основи Web-майстерності: HTML.

Основи Web-майстерності: HTML. Частина 3. Методичні вказівки та завдання до лабораторних робіт.

Фрагмент методического пособия представлен для ознакомления с продукцией электронного магазина МЕТОДИЧКА http://metodichka.com.ua/ МЕТОДИЧКА – Лучшие пособия для самостоятельного практического обучения!

Основи Web-майстерності: HTML.

Зміст ЗАНЯТТЯ 9 .................................................................................... 5 Таблиці.............................................................................................................. 5 Основні питання заняття............................................................................ 5 Проста таблиця ............................................................................................ 5 Рядок заголовку таблиці. Елемент TH .................................................... 6 Назва таблиці. Елемент CAPTION .......................................................... 7 Границі таблиць .........................................................................................10 Ширина і висота таблиці..........................................................................14 Висота і ширина рядків та комірок у таблицях...................................15 Вирівнювання таблиць .............................................................................18 Обтікання таблиці текстом......................................................................19 Вирівнювання вмісту комірок ................................................................21 Об'єднання комірок таблиці ....................................................................25 Колір у таблицях........................................................................................29 Створення об'ємних границь...................................................................38 Групування рядків і стовпців..................................................................40 Компоновка веб-сторінок за допомогою таблиць ..............................44 Доповнення електронного довідника темою „Таблиці” ...................48 На цьому занятті ........................................................................................49

Основи Web-майстерності: HTML.

Ці методичні вказівки є посібником для виконання лабораторних робіт з основ веб-майстерності при підготовці фахівців за напрямом "Web-дизайн". У посібнику докладно розглядаються всі основні можливості та практичні аспекти застосування мови HTML (Hyper Text Markup Language, мова розмітки гіпертекстових документів) до розробки веб-сторінок. За основу взято останню на цей час базову версію HTML 4.01. Частина 3 методичних вказівок містить основні відомості про створення і використання таблиць на веб-сторінках. Методичні вказівки можуть бути використані для самостійної роботи всіма, хто хоче самостійно опанувати мову HTML та навчитись її застосовувати для розробки веб-сторінок та веб-сайтів. Посібник побудований таким чином, що при умові ретельного виконання усіх вправ та суворого дотримання методичних вказівок, по закінченні вивчення курсу студент має одержати самостійно створений ним електронний "Довідник Веб-майстра".

МЕТОДИЧКА http://metodichka.com.ua/ Магазин классных методичек!

Основи Web-майстерності: HTML.

Заняття 9 Таблиці Основні питання заняття - Проста таблиця. - Рядок заголовку таблиці. Елемент TH - Назва таблиці. Елемент CAPTION - Границі таблиць. - Ширина і висота таблиці. - Висота і ширина рядків та комірок у таблицях. - Вирівнювання таблиць. - Обтікання таблиці текстом. - Вирівнювання вмісту комірок. - Об'єднання комірок таблиці. - Колір у таблицях. - Створення об'ємних границь. - Групування рядків і стовпців. - Компоновка веб-сторінок за допомогою таблиць. - Доповнення електронного довідника темою „Таблиці”

Проста таблиця Для створення таблиць використовують елемент TABLE. Рядки таблиці створюються елементами TR. Комірки таблиці створюються елементами TD. Лістинг 9.1. Файл 9.1.html <HTML><HEAD><TITLE>Проста таблиця</TITLE></HEAD> <BODY><H1>Проста таблиця</H1><HR> <TABLE BORDER=1>  5

Основи Web-майстерності: HTML.

<TR> <TD>Ряд 1, комірка 1</TD> <TD>Ряд 1, комірка 2</TD> <TD>Ряд 1, комірка 3</TD> </TR> <TR> <TD>Ряд 2, комірка 1</TD> <TD>Ряд 2, комірка 2</TD> <TD>Ряд 2, комірка 3</TD> </TR> <TR> <TD>Ряд 3, комірка 1</TD> <TD>Ряд 3, комірка 2</TD> <TD>Ряд 3, комірка 3</TD> </TR>  </TABLE> </BODY></HTML> Примітка. В наступних вправах частина коду таблиць, яка відіграє допоміжне значення, буде повторюватися. Це той код, що записаний в попередньому лістингу з 4-го по 18-й рядок включно. Він описує три перших рядка таблиці. У зв’язку з цим, у наступних лістингах те місце, де повинен бути цей допоміжний код, будемо позначати наступними чином: {... вставити фрагмент з Лістингу 9.1 ...}. Це означатиме, що в це місце треба вставити (скопіювати) вказаний фрагмент допоміжного коду.

Рядок заголовку таблиці. Елемент TH Рядок заголовку таблиці створюється лементом TH. Лістинг 9.2. Файл 9.2.html <HTML><HEAD> 6

Основи Web-майстерності: HTML.

<TITLE>Рядок заголовку таблиці. Елемент TH</TITLE> </HEAD><BODY> <H1>Рядок заголовку таблиці. Елемент TH</H1><HR> <TABLE BORDER=1> <TR> <TH>Заголовок 1</TH> <TH>Заголовок 2</TH> <TH>Заголовок 3</TH> </TR> {... вставити фрагмент з Лістингу 9.1 ...} </TABLE> </BODY></HTML> Назва таблиці. Елемент CAPTION Назва таблиці створюється елементом CAPTION. Лістинг 9.3. Файл 9.3.html <HTML><HEAD> <TITLE>Назва таблиці. Елемент CAPTION</TITLE> </HEAD><BODY> <H1>Назва таблиці. Елемент CAPTION</H1><HR> <H2>Створення назви таблиці</H2> <TABLE BORDER=1> <CAPTION>Назва таблиці</CAPTION> <TR> <TH>Заголовок 1</TH> <TH>Заголовок 2</TH> <TH>Заголовок 3</TH> </TR> 7

Основи Web-майстерності: HTML.

{... вставити фрагмент з Лістингу 9.1 ...} </TABLE> <H2>Вирівнювання назви таблиці</H2> <H3>Над таблицей вліво. Атрибут ALIGN=LEFT</H3> <TABLE BORDER=1> <CAPTION ALIGN=LEFT>Назва таблиці</CAPTION> <TR> <TH>Заголовок 1</TH> <TH>Заголовок 2</TH> <TH>Заголовок 3</TH> </TR> {... вставити фрагмент з Лістингу 9.1 ...} </TABLE> <H3>Над таблицей вправо. Атрибут ALIGN=RIGHT</H3> <TABLE BORDER=1> <CAPTION ALIGN=RIGHT>Назва таблиці</CAPTION> <TR> <TH>Заголовок 1</TH> <TH>Заголовок 2</TH> <TH>Заголовок 3</TH> </TR> {... вставити фрагмент з Лістингу 9.1 ...} </TABLE> 8

Основи Web-майстерності: HTML.

<H3>Над таблицей по центру. Атрибут ALIGN=TOP</H3> <TABLE BORDER=1> <CAPTION ALIGN=TOP>Назва таблиці</CAPTION> <TR> <TH>Заголовок 1</TH> <TH>Заголовок 2</TH> <TH>Заголовок 3</TH> </TR> {... вставити фрагмент з Лістингу 9.1 ...} </TABLE> <H3>Під таблицей по центру. Атрибут ALIGN=BOTTOM</H3> <TABLE BORDER=1> <CAPTION ALIGN=BOTTOM>Назва таблиці</CAPTION> <TR> <TH>Заголовок 1</TH> <TH>Заголовок 2</TH> <TH>Заголовок 3</TH> </TR> {... вставити фрагмент з Лістингу 9.1 ...} </TABLE> <H3>Під таблицей вліво. Атрибути ALIGN=LEFT VALIGN=BOTTOM</H3> <TABLE BORDER=1> <CAPTION ALIGN=LEFT VALIGN=BOTTOM>Назва таблиці</CAPTION> 9

Основи Web-майстерності: HTML.

<TR> <TH>Заголовок 1</TH> <TH>Заголовок 2</TH> <TH>Заголовок 3</TH> </TR> {... вставити фрагмент з Лістингу 9.1 ...} </TABLE> <H3>Під таблицей вправо. Атрибути ALIGN=RIGHT VALIGN=BOTTOM</H3> <TABLE BORDER=1> <CAPTION ALIGN=RIGHT VALIGN=BOTTOM>Назва таблиці</CAPTION> <TR> <TH>Заголовок 1</TH> <TH>Заголовок 2</TH> <TH>Заголовок 3</TH> </TR> {... вставити фрагмент з Лістингу 9.1 ...} </TABLE> </BODY></HTML>

Основи Web-майстерності: HTML.

Пользуясь эти методическим пособием Вы сможете детально, на прмерах, изучить язык гипетектовой разметки веб-страниц HTML МЕТОДИЧКА http://metodichka.com.ua/

Висота і ширина рядків та комірок у таблицях Висота рядка задається атрибутом HEIGHT всередині тега TR. Висоту рядків можна задавати двома способами: абсолютним значенням - у пікселах. Наприклад, HEIGHT="60" відносним значенням - у процентах від загальної висоти таблиці. Наприклад, HEIGHT="25%". Сума висот всіх рядків не може перевищувати 100%. Ширину кожної комірки можна задати окремо за домомогою атрибуту WIDTH всередині тега TD (або TH, для комірок заголовку таблиці). Якщо атрибут WIDTH не заданий, то броузер сам визначає ширину комірки. Ширина стовців таблиці рівна найбільшій ширині з усіх комірок у цьому стовпці. Ширину комірок можна задавати двома способами: абсолютним значенням - у пікселах. Наприклад, WIDTH="80" відносним значенням - у процентах від загальної ширини таблиці. Наприклад, WIDTH="25%". Сумарна ширина всіх комірок рядка не може перевищувати 100%. 11

Основи Web-майстерності: HTML.

Лістинг 9.6. Файл 9.6.html <HTML><HEAD> <TITLE>Висота і ширина рядків та комірок у таблицях</TITLE> </HEAD><BODY> <H1>Висота і ширина рядків та комірок у таблицях</H1> <HR><H3>Висота рядків (TR). Атрибут HEIGHT</H3> <H4>Перший ряд таблиці має висоту 60 пікселів (атрибут HEIGHT="60"); другий ряд має висоту 60% від загальної висоти таблиці (атрибут HEIGHT="60%")</H4> <TABLE BORDER=1 HEIGHT="100%"> <TR HEIGHT="60"> <TD>Ряд 1, комірка 1</TD> <TD>Ряд 1, комірка 2</TD> <TD>Ряд 1, комірка 3</TD> </TR> <TR HEIGHT="60%"> <TD>Ряд 2, комірка 1</TD> <TD>Ряд 2, комірка 2</TD> <TD>Ряд 2, комірка 3</TD> </TR> <TR> <TD>Ряд 3, комірка 1</TD> <TD>Ряд 3, комірка 2</TD> <TD>Ряд 3, комірка 3</TD> </TR> </TABLE> <H3>Ширина комірок (TD, TH). Атрибут WIDTH</H3> <H4>Ширина комірок задана абсолютно (у 12

Основи Web-майстерності: HTML.

пікселах)</H4> <TABLE BORDER=1 WIDTH="100%"> <TR> <TD

WIDTH="160">Ширина 160 пікселів</TD>

<TD WIDTH="200">Ширина 200 пікселів</TD> <TD WIDTH="*">Те, що залишилося</TD> </TR> <TR> <TD>Ряд 2, комірка 1</TD> <TD>Ряд 2, комірка 2</TD> <TD>Ряд 2, комірка 3</TD> </TR> <TR> <TD>Ряд 3, комірка 1</TD> <TD>Ряд 3, комірка 2</TD> <TD>Ряд 3, комірка 3</TD> </TR> </TABLE> <H4>Ширина комірок задана відносно (у процентах)</H4> <TABLE BORDER=1 WIDTH="100%"> <TR> <TD

WIDTH="20%">Ширина 20%</TD>

<TD WIDTH="*">Те, що залишилося</TD> <TD WIDTH="20%">Ширина 20%</TD> </TR> <TR> <TD>Ряд 2, комірка 1</TD> <TD>Ряд 2, комірка 2</TD> <TD>Ряд 2, комірка 3</TD> 13

Основи Web-майстерності: HTML.

</TR> <TR> <TD>Ряд 3, комірка 1</TD> <TD>Ряд 3, комірка 2</TD> <TD>Ряд 3, комірка 3</TD> </TR> </TABLE> </BODY></HTML> Вирівнювання таблиць Вирівнювання таблиці задається всередині тегу TABLE атрибутом ALIGN, який може приймати одне з трьох значень: LEFT - вирівнювання вліво CENTER - вирівнювання вправо RIGHT - вирівнювання по центру. Лістинг 9.7. Файл 9.7.html <HTML><HEAD> <TITLE>Вирівнювання таблиць</TITLE> </HEAD><BODY> <H1>Вирівнювання таблиць</H1><HR> <H2>Атрибут ALIGN</H2> <H4>Таблиця шириною 30%, вирівнювання Вправо: атрибути WIDTH="30%" ALIGN="RIGHT"</H4> <TABLE BORDER=1 WIDTH="30%" ALIGN="RIGHT">  <TR><TD>Магазин</TD></TR> <TR><TD>Що ми пропонуємо ?</TD></TR> <TR><TD>Корзина ваших замовлень</TD></TR> <TR><TD>Реєстрація</TD></TR> <TR><TD>Допомога</TD></TR> 14

Основи Web-майстерності: HTML.

</TABLE> <H4 style="clear: right;">Вирівнювання По центру: атрибути WIDTH="30%" ALIGN="CENTER"</H4> <TABLE BORDER=1 WIDTH="30%" ALIGN="CENTER"> {... вставити фрагмент з Лістингу 9.7 ...} </TABLE> <H4>Вирівнювання Вліво: атрибут ALIGN="LEFT"</H4> <TABLE BORDER=1 WIDTH="30%" ALIGN="LEFT"> {... вставити фрагмент з Лістингу 9.7 ...} </TABLE> </BODY></HTML> Обтікання таблиці текстом Якщо для таблиці, яка вставлена у текст, використати атрибут ALIGN то текст буде "обтікати" таблицю. Обтікання застосовується до тексту, якій слідує безпосередньо за таблицею в HTML-документі. Лістинг 9.8. Файл 9.8.html <HTML><HEAD> <TITLE>Обтікання таблиці текстом</TITLE> </HEAD><BODY> <H1>Обтікання таблиці текстом</H1><HR> <H2>Вставка таблиці у текст</H2> <P>Якщо вставити серед тексту елемент TABLE, <TABLE BORDER=1 WIDTH="30%"> {... вставити фрагмент з Лістингу 9.7 ...} </TABLE> то таблиця розірве текстовий рядок. Вивід тексту на екран буде продовжено нижче таблиці.</P> <H2>"Плаваючі" таблиці</H2> <H4>Обтікання текстом зліва: ALIGN="LEFT"</H4> 15

Основи Web-майстерності: HTML.

<TABLE BORDER=1 WIDTH="30%" ALIGN="LEFT"> {... вставити фрагмент з Лістингу 9.7 ...} </TABLE> <P>Цей текст росташований після таблиці в коді веб-сторінки. Для того, щоб заборонити обтікання зліва, необхідно у відкриваючий тег елементу, що йде після "плаваючої зліва" таблиці, вставити атрибут <KBD>CLEAR="LEFT"</KBD> або <KBD>CLEAR="BOTH"</KBD> </P> <H4 CLEAR="LEFT">Обтікання текстом зправа: ALIGN="RIGHT"</H4> <TABLE BORDER=1 WIDTH="30%" ALIGN="RIGHT"> {... вставити фрагмент з Лістингу 9.7 ...} </TABLE> <P>Цей текст росташований в коді веб-сторінки після другої таблиці. Для того, щоб заборонити обтікання зправа, необхідно у відкриваючий тег елементу, що йде після "плаваючої зправа" таблиці, вставити атрибут <KBD>CLEAR="RIGHT"</KBD> або <KBD>CLEAR="BOTH"</KBD></P> <H4 CLEAR="RIGHT">Таблиця По центру: ALIGN="CENTER". Обтікання немає</H4> <TABLE BORDER=1 WIDTH="30%" ALIGN="CENTER"> {... вставити фрагмент з Лістингу 9.7 ...} </TABLE> <P>Цей текст росташований в коді веб-сторінки після таблиці По центру. Він не обтікає таблицю.</P> </BODY></HTML>

Основи Web-майстерності: HTML.

Створення об'ємних границь Ефект об'ємних границь досягається за рахунок встановлення різного кольору верхньої та нижньої рамки, що утворюють границю. Прийнято вважати, що таблиця освітлюється з боку верхнього лівого кута екрану. Тому зовнішня рамка таблиці має освітлені верхню та ліву лінії, а затінену нижню та праву лінії. для внутрішніх рамок - все навпаки: освітлені нижня та права лінії, а затінені - верхня та ліва лінії. Колір "освітленої" лінії задає атрибут BORDERCOLORLIGHT, а колір затемненої лінії - атрибут BORDERCOLORDARK. Лістинг 9.12. Файл 9.12.html <HTML><HEAD> <TITLE>Створення об'ємних границь</TITLE> </HEAD><BODY> <H1>Створення об'ємних границь</H1><HR> <H2>"Вдавлена" таблиця</H2> <TABLE BORDER=2 WIDTH="60%" HEIGHT="300" ALIGN="CENTER" CELLSPACING="0" BGCOLOR="#e0e0e0" 17

Основи Web-майстерності: HTML.

BORDERCOLORLIGHT="SILVER" BORDERCOLORDARK="BLACK"> <TR BORDERCOLORLIGHT="WHITE" BORDERCOLORDARK="BLACK"> <TD>&nbsp;</TD> <TD>&nbsp;</TD> <TD>&nbsp;</TD> <TD>&nbsp;</TD> </TR> <TR BORDERCOLORLIGHT="WHITE" BORDERCOLORDARK="BLACK"> {... Аналогічно ...} </TR> <TR BORDERCOLORLIGHT="WHITE" BORDERCOLORDARK="BLACK"> {... Аналогічно ...} </TR> <TR BORDERCOLORLIGHT="WHITE" BORDERCOLORDARK="BLACK"> {... Аналогічно ...} </TR> </TABLE> <H2>"Опукла" таблиця</H2> <TABLE BORDER=2 WIDTH="60%" HEIGHT="300" ALIGN="CENTER" CELLSPACING="0" BGCOLOR="#e0e0e0" BORDERCOLORLIGHT="SILVER" BORDERCOLORDARK="BLACK"> <TR BORDERCOLORLIGHT="BLACK" BORDERCOLORDARK="WHITE"> <TD>&nbsp;</TD> <TD>&nbsp;</TD> <TD>&nbsp;</TD> <TD>&nbsp;</TD> 18

Основи Web-майстерності: HTML.

</TR> <TR BORDERCOLORLIGHT="BLACK" BORDERCOLORDARK="WHITE"> {... Аналогічно ...} </TR> <TR BORDERCOLORLIGHT="BLACK" BORDERCOLORDARK="WHITE"> {... Аналогічно ...} </TR> <TR BORDERCOLORLIGHT="BLACK" BORDERCOLORDARK="WHITE"> {... Аналогічно ...} </TR> </TABLE> </BODY></HTML>

МЕТОДИЧКА http://metodichka.com.ua/ Магазин классных методичек!

Гимнастика для глаз А. Динамический комплекс 1.

Движения глаз вправо-влево, 30 секунд.

Движения глаз вверх-вниз, 30 секунд.

Движения глаз по диагоналям, по 30 секунд.

Круговые движения глазами по часовой стрелке, 30 секунд.

Круговые движения глазами против часовой стрелки, 30 секунд.

Упражнения 1-5, только с закрытыми глазами, общая продолжительность до 3 минут.

Б. Самомассаж глаз 1.

Сильно зажмурить глаза на 3-5 секунд, затем широко открыть глаза на 3-5 секунд. Повторить 10-12 раз.

Быстро моргать в течение 1-2 минут.

Смотреть вдаль 3-5 секунд (можно в окно), затем на палец руки в 2530 см от глаз (можно на оконную раму) в течение 3-5 секунд, повторить 10-12 раз.

Тремя пальцами каждой руки легко нажать на верхнее веко, спустя 1-2 секунды снять пальцы. Повторить 5-6 раз.

Круговыми движениями подушечек пальцев помассировать височную область в течение 2-3 минут.

Выполнить массаж затылочной области продольными движениями пальцев обеих рук в направлении от затылочного бугра к 7-му шейному позвонку и обратно до появления чувства «прилива» к голове.

Регулярное выполнение этих простых упражнений поможет вам уменьшить усталость глаз при работе на компьютере и надолго сохранить хорошее зрение.