Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Информатика практика.docx
Скачиваний:
4
Добавлен:
23.03.2015
Размер:
164.06 Кб
Скачать

Лабораторна робота №2

Тема: Представлення інформації у HTML документі.

Мета:

  1. Опанувати методику створення документа у форматі HTML.

  2. Опанувати основнi принципи представлення iнформацiї у виглядi гiпертексту.

 

Теги форматування символiв.

Теги форматування символiв дозволяють керувати вiдображенням окремих символiв та слiв. Символи, яки форматуються, повиннi розмiщуватися в серединi цих тегiв:

<B> . . . </B> - Напiвжирний текст. <I> . . . </I> - Курсив. <U> . . . </U> - Пiдкреслений текст.

Теги можуть знаходитися один у другому. Так, якщо треба подати текст пiдкресленим курсивом, то: <U><I>Курсивний пiдкреслений текст</I></U>.

Загальний вигляд, розмр та колір літер можна встановити за допомогою тега <FONT face=name size=n color=c> ... </FONT>, де

  • face - назва шрифта,

  • size - його розмір,

  • color - колір шрифта.

 

Теги форматування спискiв.

HTML має декiлька типiв спискiв:

  • <UL> . . . </UL> - Ненумерований,

  • <OL> . . . </OL> - Нумерований,

  • <DIR> . . . </DIR> - Простий,

  • <MENU> . . . </MENU> - Меню,

  • <DL> . . . </DL> - Словник термiнiв.

Елементи цих спискiв позначаються тегом <LI>. Наприклад:

Маркований список

Нумерований список

<P> Назва списку </P> <UL>   <LI> Перший елемент   <LI> Другий елемент   <LI> Третiй елемент </UL>

<P> Назва списку </P> <OL>   <LI> Перший елемент   <LI> Другий елемент   <LI> Третiй елемент </OL>

Назва списку

  • Перший елемент

  • Другий елемент

  • Третiй елемент

Назва списку

  1. Перший елемент

  2. Другий елемент

  3. Третiй елемент

Тег UL має параметр TYPE який визначає вигляд позначки елементу списку:

  • disc - Темне коло.

  • square - Квадрат.

  • circle - Кiльце.

Для тегу OL параметр TYPE приймає інші значення:

  • A - Великi латинськи лiтери.

  • a - Маленьки латинськи лiтери.

  • I - Великi римськи цифри.

  • i - Маленьки римськи цифри.

  • 1 - Арабськи цифри.

За допомогою параметра START тегу OL можна задати номер початкового елементу списку.

 

Завдання

  1. Уважно ознайомитися з теоретичною частиною лабораторної роботи.

  2. У редакрорі Notepad створити HTML документ з коротенькою інформацією про себе. Де вказати:

  • Своє прізвище, ім'я та побатькові.

  • Перелік Ваших упадобань (Ваше hobby), та Ваши основні досягнення у цьому.

  • Основні (голвні, чи найважливіші) слова чи тези позначити тегами форматування символів для більш кращого сприйняття тексту.

  • Розробити свою домашню сторiнку (першу версiю) для розмiщення на студентському WEB серверi.

     

    Контрольне завдання

    Розробити документ, який виглядає так само, як наведено на малюнку.

     

    Лабораторна робота №3

    Тема: Побудова таблиць у HTML документах.

    Мета:

    1. Опанувати методику створення документа у форматі HTML.

    2. Опанувати основнi принципи представлення iнформацiї у виглядi гiпертексту.

     

    Теги форматування таблиці.

    Початок описання таблиці позначаеться тегом <TABLE>. Кінець опису таблиці позначаеться тегом </TABLE>. Між ціма тегами розташовується тіло таблиці. Воно склдається з рядків, якi позначаються тегами <TR> </TR>, та стовбчиків, які позначаються тегами <TD> </TD>. Повний формат ціх тегів такий:

    • <TABLE ALIGN=LEFT|CENTER|RIGHT|BLEEDLEFT|BLEEDRIGHT|JUSTIFY BACKGROUND=url BGCOLOR=color BORDER=n BORDERCOLOR=color BORDERCOLORDARK=color BORDERCOLORLIGHT=color CELLPADDING=n CELLSPACING=n CLASS=type CLEAR=LEFT|RIGHT|ALL|NO COLS=n FRAME=frame-type ID=value NOWRAP RULES=rule-type STYLE=css1 properties VALIGN=TOP|MIDDLE|BOTTOM|BASELINE WIDTH=n> ... </TABLE>

    • <TR ALIGN=CENTER|LEFT|RIGHT|JUSTIFY BGCOLOR=color BORDERCOLOR=color BORDERCOLORDARK=color BORDERCOLORLIGHT=color CLASS=type ID=value NOWRAP STYLE=css1 properties VALIGN=MIDDLE|TOP|BOTTOM|BASELINE> ... </TR>

    • <TD ALIGN=CENTER|LEFT|RIGHT|JUSTIFY BACKGROUND=url BGCOLOR=color BORDERCOLOR=color BORDERCOLORDARK=color BORDERCOLORLIGHT=color CLASS=type COLSPAN=n HEIGHT=n ID=value NOWRAP ROWSPAN=n STYLE=css1 properties VALIGN=MIDDLE|TOP|BOTTOM|BASELINE WIDTH=n> ... </TD>

    Цi теги мають такi основнi атрибути:

    • ALIGN - задає положення таблицi на сторiнцi;

    • VALIGN - визначає режим вирiвнювання змiсту комiрки по вертикалi;

    • BORDER - визначає товщину рамки у пiкселях;

    • BACKGROUND - визначає посилання на файл фонового малюнку;

    • BGCOLOR - визначає фоновий колiр таблицi;

    • BORDERCOLOR - визначає колiр рамки;

    • BORDERCOLORDARK - визначає колiр тiньової частини рамки;

    • BORDERCOLORLIGHT - визначає колiр свiтлової частини рамки;

    • CELLPADDING - визначає вiдстань мiж текстом та границями комiрки (у пiкселях);

    • CELLSPACING - визначає вiдстань мiж комiрками (у пiкселях);

    • COLS - визначає кiлькiсть стовбчикiв у таблицi;

    • WIDTH - визначає ширину таблицi, абсолютну (у пiкселях), чи вiдносно розмiрiв вiкна броузера (у вiдсотках);

    • HEIGHT - визначає висоту комiрки, абсолютну (у пiкселях), чи вiдносну (у вiдсотках);

    • COLSPAN - визначає кiлькiсть стовбчикiв таблицi, що займає дана комiрка;

    • ROWSPAN - визначає кiлькiсть рядкiв таблицi, що займає дана комiрка;

    • FRAME - задає режим представлення елементiв зовнiшньої рамки таблицi. Можливi такi значення цього атрибуту:

      • void - усi зовнiшнi лiнiї вiдсутнi;

      • above - вiдображається тiльки верхня лiнiя;

      • below - вiдображається тiльки нижня лiнiя;

      • hsides - вiдображення тiльки горизонтальних лiнiй (зверху та знизу);

      • lhs - вiдображаєтья тiльки лiва границя таблицi;

      • rhs - вiдображаєтья тiльки права границя таблицi;

      • vsides - вiдображення тiльки вертикальних лiнiй (злiва та справа);

      • box - усi зовнiшнi лiнiї вiдображаються;

      • border - усi зовнiшнi лiнiї вiдображаються (цей атрибут працює по замовчанню);

    • RULES - задає режим представлення внутрiшнiх лiнiй таблицi. Можливi такi значення цього атрибуту:

      • none - усi внутрiшнi лiнiї вiдсутнi;

      • groups - вiдображаються тiльки горизонтальнi лiнiї, що вiдокремлюють шапку вiд змiстовної частини та змiстовну частину вiд закiнчення таблицi;

      • rows - вiдображаються тiльки горизонтальнi лiнiї;

      • cols - вiдображаються тiльки вертикальнi лiнiї;

      • all - вiдображаються усi внутрiшнi лiнiї;

    • NOWRAP - вiдмiняє режим автоматичного розбиття тексту у комiрках на декiлька рядкiв.

    Крім цього е додаткові теги, призначені для структурування інформації у таблици. Це теги THEAD, TFOOT, TBODY та ін. Повний формат ціх тегів такий:

    • <THEAD ALIGN=LEFT|CENTER|RIGHT|JUSTIFY CLASS=type ID=value STYLE=css1 properties VALIGN= MIDDLE|TOP|BOTTOM>

    • <TFOOT CLASS=type ID=value STYLE=css1 properties> ... </TFOOT>

    • <TBODY CLASS=type ID=value STYLE=css1 properties> ... </TBODY>

    Тегом <THEAD> може бути позначена заголовочна частина таблицi. Так звана "шапка". Тегом <TBODY> позначають основну частину таблицi - її змiст. Тегом <TFOOT> позначають кiнцеву частину таблицi.

     

    Таблиця є складною iєрархiчною структурою. На першому рiвнi iєрархiї визначається логiчна структура таблицi за допомогою тегiв <THEAD>, <TBODY> та <TFOOT>. На другому рiвнi тегами <TR> виконується розподiл таблицi на рядки. На третьому - тегами <TD> виконується розподiл рядкiв на комiрки.

    Зразок форматування таблиці:

    <table border=1>

    <tr>

    <td>

    <p>Перша комірка</p>

    </td>

    <td>

    <p>Друга комірка</p>

    </td>

    </tr>

    <tr>

    <td>

    <p>Третя комірка</p>

    </td>

    <td>

    <p>Четверта комірка</p>

    </td>

    </tr>

    </table>

    Перша комірка

    Друга комірка

    Третя комірка

    Четверта комірка

    HTML

    Загальній вигляд

    У мовi HTML таблицi є дуже потужним засобом форматування Web-сто\-рi\-нок. Це обумовлено тим, що у будь-яку комiрку таблицi можна вкладати будь-який об'єкт: параграф тексту, горизонтальну розподiльчу лiнiю, зображення чи iншу таблицю.