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

Лабораторна робота №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й елемент	Назва списку Перший елемент Другий елемент Трет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), та Ваши основні досягнення у цьому.
3. Основні (голвні, чи найважливіші) слова чи тези позначити тегами форматування символів для більш кращого сприйняття тексту.
4. Розробити свою домашню сторiнку (першу версiю) для розмiщення на студентському WEB серверi.

 

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

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

1. 
   
2. 
   
3. 
   

 

Лабораторна робота №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ншу таблицю.

 

Завдання для самостійної роботи

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

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

1. 
   

 

 

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

Завдання

1. Уважно ознайомитися з теоретичною частиною лабораторної роботи.
2. Зробити так звану "домашню сторiнку" (файл з назвою index.html). Тут можна використати HTML сторiнку, що її Ви розробили на попереднiх заняттях.
3. Домашня сторiнка повинна мiстити таку iнформацiю:
• Прiзвище, iм'я та по батьковi власника сторiнки.
• Домашня адреса, телефон.
• Вашi науковi iнтереси (Основнi напрямки студентської дослiдницької роботи чи список лабораторних та курсових робiт, що ви виконуєте).
• Ваше хобi чи список ваших улюблених позанавчальних справ та iнтересiв (З коротеньким поясненням).
4. Органiзувати цю iнформацiю у виглядi спискiв.
5. Переглянути свою домашню сторiнку за допомогою броузеру.
6. Органiзувати iнформацiю про себе у iєрархiчному виглядi. Тобто, данi про ваше hobby та науковi iнтереси розташуйте у окремих файлах та зробiть посилання на них з головного файла index.html. Усi документи повиннi мiстити гiперпосилання, яки забезпечують повернення до Вашої титульної сторiнки.

 

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

1. На диску N: створити таку систему каталогiв та файлiв.
   
2. Зв'язати HTML - файли системою посилань, що дозволяють переходити мiж ними у прямому та зворотньому порядку.

1.html	®	2.html	®	3.html

 

Лабораторна робота №5.

Тема: Робота з фреймами.

Мета:

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

 

Фрейми

Фрейми є дуже зручним механізмом для швидкого розподілу головного вікна броузера на частини та відображення у кожній з них окремого html - файлу. При цьому кожна частина працює як незалежне вікно броузера із власними лінійками прокрутки сторінки, або без них. Зміст кожного фрейму можна змінювати незалежно від інших. Це дає змогу, за рахунок читкої спеціалізації фреймів, значно зменшити обсяг HTML - коду на сайті. Так, наприклад, один фрейм може відповідпти за представлення головного навігаційного меню, інший - за показ логотипу, назви фірми, тощо.

Розбиття сторінки виконується за допомогою тегу frameset, який має такі параметри:

• ROWS - визначення пропорцій розподілу вікна броузера, або батьківського фрейму по горизонталі. Значення задається як два числа розподілених комою. Кожне число може бути визначено як у пікселях, так і у відсотках.
• COLS - визначення пропорцій розподілу вікна броузера, або батьківського фрейму по вертикалі. Значення задається як два числа розподілених комою. Кожне число може бути визначено як у пікселях, так і у відсотках.
• ONLOAD - визначення обробника подій, які відбуваються при завантаженні HTML - документу до фрейму.
• ONUNLOAD - визначення обробника подій, які відбуваються при вивантаженні HTML - документу з фрейму.

Визначення файлу, який буде відображений у даному фреймі здійснюється за допомогою тегу frame, який має такі параметри:

• NAME - власне ім'я (ідентифікатор) фрейму. Використовується для завантаження до нього HTML - файлів. Для цього використовуєтья атрибут target тегу A.
• SRC - назва файлу, який буде відображений у цьому фреймі.
• LONGDESC - розширений опис фрейму.
• FRAMEBORDER - рамка фрейму (1 - рамка відображується, 0 - рамка схована).
• MARGINWIDTH - ширина рамки фрейму (у пікселях).
• MARGINHEIGHT - висота рамки фрейму (у пікселях).
• NORESIZE - заборона зміни розмірів фрейму.
• SCROLLING - режим керування скролінгом в середині фрейму (yes - скролінг можливий, лінійки прокрутки відображуються; no - скролінг не можливий, лінійки прокрутки сховані; auto - режим прокрутки визначається параметрами броузера).

 

Завдання:

1. На своєму робочому диску створити окремий каталог.
2. У цьому каталозi створити HTML - файл index.html з такою фреймовою стуктурою:

<frameset rows="*,75"> <frameset cols="20%,*"> <frame name="menu" src="nav.html" title="menu"> <frame name="content" src="about.html" title="content"> </frameset> <frame name="ad" src="ad.html" title="advertisement"> <noframes> <body> <h1>цей browser не пiдтримує фейми</h1> </body> </noframes> </frameset>

1. Створити iнформайiйнi файли з назвами:
• nav.html - Головне меню сайта.

<html> <head> <title>Головне меню</title> </head> <body> <ul> <li><a href="about.html" target="content">Про себе</a></li> <li><a href="study.html" target="content">Навчання</a></li> <li><a href="sci.html" target="content">Наука</a></li> <li><a href="hobby.html" target="content">Hobby</a></li> </ul> </body> </html>

• about.html - Титульнй iнформацiйний файл сайта.

<html> <head> <title>Про себе</title> </head> <body> <h1 align=center>Про себе</h1> </body> </html>

• ad.html - Файл з рекламною iнформацiєю.

<html> <head> <title>Контактна iнформацiя</title> </head> <body> <h3 align=center>&copy; 2006, Усi права захищенi.</h3> </body> </html>

• study.html - Файл з iнформацiєю про навчальну роботу.
• sci.html - Файл з iнформацiєю про наукову роботу.
• hobby.html - Файл з iнформацiєю про свое hobby.
1. Пiд'єднати цi файли до розробленої вами фреймової структури та подивитись результат у броузерi.

Лабораторна робота №6.

Лабораторна робота №7.

Теоретичнi вiдомостi

Залежно вiд того, де в HTML-документi використовується той, чи iнший тег HTML-розмiтки та яку семантичну роль вiн там виконує, цьому тегу може бути призначений той, чи iнший клас. Наприклад, звичайний текст у HTML-документi можна подати за допомогою тегу визначення параграфу <P> класу default:

<p class="default">Text</p>

усi визначення - оформити параграфами класу definition:

<p class="definition">Text</p>

Тодi у стильовому аркушi можна визначити рiзне вiзуальне представлення для кожного класу тегу <P>.
Наприклад:

P.default { color:black; } P.definition { color:green; }

При побудовi стильового правила у якостi селектору можна декларувати клас без тегу, що з ним пов'язаний, але не можна декларувати декiлька класiв в одному правилi.
Наприклад:

.note { font-size:small; }

У цьому правилi визначається, що усi теги класу note повиннi вiдображати текст, що з ними пов'язаний, малими лiтерами.

Стильове оформлення може бути призначене будь-якому тегу HTML-розмiтки окремо, залежно вiд його iдентифiкатора (ID). Наприклад, якщо будь-якому тегу позначення параграфа HTML-документу призначено власний iдентифiкатор

<P id="SVP94">Text indented 3 em</P>

то саме для цього конкретного тегу можна призначити такий стильовий опис

#SVP94 { text-indent:4em; }

При створеннi HTML-документу дуже часто використовуються вкладенi теги. Наприклад, у деякому параграфi <P> треба подати фрагмент тексту, обмежений тегами <EM> та </EM> в iншому виглядi. Але цього не, в якому разi не треба робити у заголовках позначених тегами <H1>... <H6>, де також застосовуються теги <EM>. У цьому разi можна скористатися так званими контекстними селекторами. Контекстний селектор, це рядок, що складається з двох чи бiльшої кiлькостi простих селекторiв, розподiлених промiжками.
Наприклад:

P EM { background:yellow; }

Це правило повiдомляє браузер про те, що текст, позначений тегами <EM>, що знаходиться у серединi параграфiв, позначених тегами <P>, повинен мати фон жовтого кольору. При чому, це правило не розповсюджується на тегi <EM>, якими може бути позначений текст, що знаходиться у заголовках (позначених тегами <H1>... <H6>), таблицях (тег <TD>), списках (тег <LI>), та iн.

 

Лабораторна робота №8.

Image Map.

<MAP name="mymap"> <AREA shape="circle" coords="70,84,51" href="http://www.december.com"> <AREA shape="rect" coords="25,180,125,280" href="http://www.december.com/html/"> <AREA shape="poly" coords="153,106,186,225,340,193,315,81,304,167" href="http://www.december.com/works/tour.html"> <AREA shape="rect" coords="420,19,478,278" nohref> <AREA shape="circle" coords="499,299,100" href="http://www.cnn.com/"> <AREA shape="default" coords="0,0,500,300" href="http://www.december.com/john/"> </MAP> <IMG src="imagemap.gif" width="500" height="300" alt="Image Map" usemap="#mymap" ismap>

 

Приклад

Завдання для самостiйної роботи

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

Завдання

1. Скопіювати до свого робочого каталогу, що розташований на мереженому диску N, файл tinyweb.zip та розархівувати файли, що у ньому знаходяться.
2. У окремому каталозі (його ви можете створити також на диску N) розробити інформаційну структуру вашого web - серверу. Тобто створити декілька HTML - файлів, пов'язаних між собою гіерпосиланнями. Це повинна бути ієрархічна файлова структура, кореневим файлм якої повинен бути файл з назвою index.html.
3. Створити ярлик (Windows Shortcut) для запуску файлу tinyweb.exe.
4. У властивостях цього ярлика вказати такі параметри запуску файлу:
   Закладинка Shortcut:
   Target: N:\tinyweb.exe N:\MyWebDir 8000
   Start in: N:\MyLogDir
   де
   N:\MyWebDir - Каталог у якому знаходиться HTML - файли вашого web - серверу.
   8000 - номер порту, який буде використовувати ваш web - сервер. Цей параметр необов'язковий. якщо його не вказати, то буде використаний 80 - й порт, який є портом, що використовується протоколом HTTP по замовчанню.
   Стартовий каталог (N:\MyLogDir) прогарами tinyweb використовується для збереження log - файлів. Тому він теж повинен бути розташований на диску N, чи в одному з його підкаталогів.
5. За допомогою створеного вами ярлика запустити програму web - сервера. Якщо ви все зробили вірно, програма почне працювати як системний процес MS Windows. Якщо ви щось зробили не вірно, то видається діагностичне повідомлення. У такому разі треба перевірити всі умови та параметри запуску програми web - серверу. Ще раз перелічимо їх:
• Стартовий каталог програми tinyweb використовується нею для збереження Log - файлів.
• Iнформацiйна структура web - серверу повинна мати ієрархічну структуру, кінцевим файлом якої повинен бути файл з назвою index.html.
• Усі HTML - фали, що складають інформаційну структуру вашого web - серверу повинні знаходитися у окремому каталозі, шлях до якого повинен бути вказаний у рядку запуску програми web - серверу.
• По замовчанню для своєї роботи web - сервери використовують 80 порт, але, якщо на одному і тому - ж комп'ютері працює декілька web - серверів, за для запобігання мережених конфліктів їм призначають різні порти.
6. Після запуску програми web - серверу треба перевірити його роботу. А саме:

1. Потрібно впевнитися, що web - сервер дійсно запустився. Для цього запустити Task Manager. Перейти до його закладки Processes і знайти у списку активних процесів процес, що має назву tiny. Якщо такого процесу у системі нема, то це означає, що сервер не працює.
2. Потрібно запустити програму Internet Explorer та вказати у адресному рядку такий запит:
   http://localhost/
   Після цього у головному вікні програми Internet Explorer повинен відобразитися зміст файлу index.html вашого web - серверу. (Тобто перевiрити працездатнiсть сервiсу http на локальному комп'ютерi.)
1. Перевірити роботу вашого web - серверу з іншого комп'ютера мережі, вказавши у адресному рядку програми Internet Explorer IP - адресу чи мережну назву вашого комп'ютера (того комп'ютера, на якому працює ваш web - сервер). Наприклад:
   http://192.168.101.85/
   або
   http://l6-03/
2. Для того, щоб зупинити web - сервер на вашому комп'ютерi необхідно знищити процес tiny за допомогою програми Task Manager.
1. Натиснути комбінацію клавіш Ctrl - Alt - Del.
2. У вікні, що з'явилося, обрати та натиснути мишкою кнопку з написом Task Manager.
3. Після запуску Task Manager, перейти до його закладки Processes.
4. Знайти у списку процесів процес з назвою tiny.
5. Позначити його мишкою та натиснути кнопку End Process.
6. Після цього процес tiny повинен зникнути з цього вікна, а web - сервер припинити свою роботу.

 

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

Завдання

1. Обрати сервер, на якому ви бажаєте розташувати свою домашню сторінку, і під'єднатися до нього.
2. Зробити у своєму домашньому каталозі підкаталог public_html.
3. Зробити у цьому каталозі так звану "титульну сторінку" (файл з назвою index.html).
   Примітка: Назва каталогу public_html і файлу index.html (усі літери – маленькі) є спеціальною. Тобто, якщо в запиті серверу не вказано ім'я конкретного файла а тільки знак ~ і назву вашого домашнього каталогу, то Web – сервер буде шукати в підкаталозі public_html вашого домашнього каталога файл саме з іменем index.html.
4. Органiзувати iнформацiю про себе у iєрархiчному виглядi. Тобто створити головний HTML - файл (index.html), який мiстить гiперпосилання на iншi, бiльш спецiалiзованi документи.
   Наприклад за такою схемою:

		index.html
| v		^ | | v		| v		| v
science.html	<----->	hobby.html	<----->	work.html	<----->	friends.html

1. Усi документи повиннi мiстити гiперпосилання, якi забезпечують повернення до титульної сторiнки серверу. А також, гiперпосилання, яки забезпечують переходи мiж цими документами.
2. Домашня сторінка може мати табличне або фреймове форматування та повинна містити таку інформацію:
• Прізвище, ім'я та по батькові власника сторінки.
• Номер навчальної групи.
• Домашня адреса, телефон, E – mail адреса.
• Головне навiгацiйне меню сайта.
3. Сторiнка science.html повинна мiстити таку iнформацiю:
• Вашi науковi iнтереси,
• Основнi напрямки вашої студентської дослiдницької роботи,
4. На сторiнцi hobby.html описати ваше хобi чи подати список ваших улюблених позанавчальних справ та iнтересiв.
5. На сторiнцi (або у роздiлi) work.html представити результати виконання лабораторних робiт, що ви виконували протягом вивчення курсу "Комп'ютерна мережа Internet".
• XML-документ, перетворений за допомогою XSL-аркуша або XML-парсера.
• SVG-анiмацiю тегову, або скриптову.
• Canvas-анiмацiю.
6. На сторiнцi friends.html навести 3 - 4 гiперпосилання на домашнi сторiнки iнших студентiв.
7. Кожна сторiнка повинна мати такi елементи форматування:
• таблиця,
• список (маркований або нумерований),
• фоновий малюнок,
• список посилань на iншi сторiнки сайту.
8. Переглянути свою домашню сторiнку за допомогою броузера за URL, що складаеться з IP–адреси серверу, позначки " ~ " та назви домашнього каталогу конкретного користувача (студента). Наприклад для студента user96 URL буде такий:
   http://192.168.100.19/~user96/index.html,
   або такий (без вказання iндексного файлу)
   http://192.168.100.19/~user96/.

 

 

Лабораторна робота №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й елемент	Назва списку Перший елемент Другий елемент Трет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), та Ваши основні досягнення у цьому.
3. Основні (голвні, чи найважливіші) слова чи тези позначити тегами форматування символів для більш кращого сприйняття тексту.
4. Розробити свою домашню сторiнку (першу версiю) для розмiщення на студентському WEB серверi.

 

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

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

1. 
   
2. 
   
3. 
   

 

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