Створення відповіді на повідомлення

1. Видалити або відкрити повідомлення.

2. Викликати послугу меню Повідомлення / Відповісти або натиснути на кнопку панелі інструментів Відповісти.

3. У вікні редагування повідомлення буде завантажено текст початкового повідомлення.

Рис. 13. Вікно створення нового листа Mozilla Mail

 

Пересилання повідомлення

1. Виділити або відкрити повідомлення.

2. Викликати послугу меню Повідомлення / Переслати або натиснути на кнопку панелі інструментів Переслати.

3. У рядку введення адреси відкритого вікна редагування повідомлення ввести нову адресу одержувача.

 

Додавання долучень до повідомлень

Якщо необхідно з повідомленням надіслати файл іншого типу, документ MS Word, малюнок тощо, використовують приєднання (долучення) необхідного файла до листа:

1. Створити повідомлення або відповідь.

2. Викликати послугу меню програми Файл / Долучити або натиснути на кнопку панелі інструментів Долучити.

3. У діалоговому вікні вибрати необхідні файли. Натиснути кнопку Відкрити.

4. У вікні долучень відобразиться назва прикріпленого до листа файла.

Вилучення долучень з повідомлень

1. У вікні долучень вибрати назву файла долучення.

2. Викликати послугу меню програми Редагування / Витерти або послугу контекстного меню долучення Витерти.

Надсилання повідомлення

Викликати послугу Надіслати кнопкою панелі інструментів Надіслати або командою меню Файл / Надіслати.

Використання адресної книги

Існує можливість вибору адресата з адресної книги. Виклик адресної книги здійснюється натисканням на кнопку панелі інструментів Адресна книга або за допомогою меню Вікно / Адресна книга. До адресної книги можна записати інформацію про друзів, співробітників, знайомих, а потім просто вибирати ïx з цього списку для листування з ними.

 

Завдання для виконання

Створення листів розсилання

1. Ознайомитися з теоретичними відомостями. Під час виконання роботи необхідно використовувати допомогу програми Mozilla. Для виклику допомоги використовується клавиша F1 або команда меню Допомога/ Зміст Доводки.

2. Заповнити таблицю 21.

Таблица 21

Протокол	Порт за замовчуванням	Призначення
РОРЗ
IMAP
SMTP

3. Для адрес електронної пошти вказати назву користувача, назву комп'ютера, доменну назву мережі для таких прикладів: [e-mail]

назва користувача: ________________________________________

назва комп'ютера: _________________________________________

доменна назва мережі: _____________________________________

[e-mail]

назва користувача: ________________________________________

назва комп'ютера: _________________________________________

доменна назва мережа: _____________________________________

4. Викликати клієнта електронної пошти. Заповнити таблицю призначення кнопок швидкого доступу панелі інструментів (рис. 14).

 

Рис. 14. Кнопки швидкого доступу панелі інструментів

1. _________________________________________________

2. _________________________________________________

3. _________________________________________________

4. _________________________________________________

5. _________________________________________________

6. _________________________________________________

7. _________________________________________________

8. _________________________________________________

5. Використовуючи електронну адресу, інформацію про адреси серверів, виконати налагодження поштового клієнта Mozilla Mail (табл. 22).

Таблиця 22

Протокол	Адреса
РОР	192.168.2.40
SMTP	192.168.2.40

 

Вказати різницю між адресою, записаною числом та символь­но. Наприклад, 192.168.2.40 — ict.eu.edu.ua.

6. Викликати вікно створення нового електронного листа (рис. 15). Заповнити таблицю призначення елементів управління вікна створення нового листа: кнопки швидкого доступу панелі інструментів, поля введення даних.

7. Створити й надіслати лист друзям, використовуючи адреси електронної пошти, вказані викладачем. Надіслати лист викладачу на адресу, яку він вкаже.

8. Отримати листи, дати відповідь на 1-2 отриманих листа.

9. Додати адреси отриманих листів та адресу викладача до адpecної книги.

10.Надіслати листа всім адресатам адресної книги.

 

Рис. 15. Вікно створення нового електронного листа

1. __________________________________

2. ________________________________

3. ________________________________

4. _________________________________

5. __________________________________

6. ________________________________

7. ________________________________

8. ________________________________

9. ________________________________

10. ________________________________

11. _______________________________

12. ________________________________

 

11.Створити й надіслати лист, додавши до нього будь-який файл, наприклад: рекламну пропозицію, запрошення відвідати місто.

12.Виконати завдання 3, 4.

 

Завдання для самостійного виконання

1.Створити список розсилань (одночасне розсилання повідомлень кільком адресатам), використовуючи Адресну книгу для кількох абонентів. Надіслати листи учасникам розсилання. У поштовому клієнті створити папку та фільтр для зберігання вхідних листів учасників розсилання.

2.Створити обліковий запис електронної пошти, використовуючи особисті дані й інформацію про сервери, надану викладачем у програмі MS Outlook Express.

3.Обгрунтувати неприпустимість масового розсилання рекламних повідомлень (спам).

4. Вказати, яку інформацію можна вважати рекламним повідомленням.

 

Запитання для контролю

1. Особливості кодування електронних повідомлень під час використання електронної пошти. Назвати відомі кодові сторінки для роботи з кириличними текстовими повідомленнями.

2.Протоколи для забезпечення функціонування електронної пошти.

3.Функціональне призначення порта мережевого протоколу.

4.Адреса електронної пошти.

5.Програми клієнта для роботи з електронною поштою.

6.Налагодження клієнта електронної пошти Mozilla Mail.

7.Основні послуги програми Mozilla Mail

8.Створення та надсилання листа. Приєднання файлів.

9.Використання адресної книги. Групове розсилання повідомлень.

10. Правила етикету під час використання електронної пошти.

ЛАБОРАТОРНА РОБОТА № 7

Тема. Вивчення основних тегів мови гіпертекстової розмітки сторінок HTML.

Мета: ознайомити з основними можливостями мови гіпертекстової розмітки документів HTML. Вивчити основні теги мови гіпертекстової розмітки сторінок HTML.

Час виконання: 4 год.

 

ХІД РОБОТИ

Завдання для виконання

1. Ознайомитися з теоретичним матеріалом. Дати відповіді на запитання для контролю.

2.Виконати завдання. Заповнити в робочому зошиті протокол виконання роботи.

3.Виконати завдання для самостійної роботи. Заповнити в робочому зошиті таблицю для сайту за вибором.

4.Дати відповіді на запитання.

 

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

Документ HTML можна розглядати як сукупність вказівок (ко­манд i даних), безпосередньо розміщених у документі, та пов'язаних з ним посиланнями, які після інтерпрпретації програмою-броузером відтворюють вигляд сторінок документа. Вказівки, до скла­ду яких входять дескриптори та атрибути, називаються тегами:

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

• атрибути деталізують опис способів відтворення, їхні значення є операндами.

Документ HTML складаеться із вказівок — тегів, обмежених символами «<» та «>», які можуть утворювати контейнери — частини документа, обмежені операторними дужками, причому тег закривання починаеться з «<\» або може знаходитися окремо, тобто деякі теги можуть caмi бути контейнерами. Кожний доку­мент складається з декларативної частини (заголовка), i тала до­кумента.

Документи мовою HTML починаються з декларації <!DOCTYPE>, після цього йде контейнер тегів, який починаєть­ся з вказівки <HTML> i закінчується </HTML>.

Наприклад:

<! DOCTYPE HTML PUBLIC «-
//W3C//DTD HTML 3. 2
Final//EN'>
<HTML>
<head>	У заголовку
<TITLE>Mи раді Вас вітати	розміщується службова
</TITLE>	інформація,
... Інші елементи заголовка </HEAD>	що не відображається на екрані:
	а) назва сторінки; б) тип кодової сторінки.
<BODY>	Тут міститься те, що ми бачимо на екрані:
... Тіло документа
</BODY>	a) текст, рисунки;
</HTML>	б) таблиці тощо.

 

Заголовок HTML-сторінки містить інформацію про саму стоpiнку. Він може містити кілька дескрипторів, з яких найчастіше використовується <TITLE>. Заголовок документа, тобто те, що прописано між <TITLE> i </TITLE>, відображається в рядку за­головка Web-броузера.

Тіло HTML-сторінки містить yci елементи, що відображаються на сторінці під час ïï перегляду в броузері, — текст, малюнки, гіперпосилання (URL), списки i таблиці, звук, відео.

Під час виведення тексту на екран монітора броузери ігнорують форматування, яке виконується після створення тексту в тексто­вому редакторі, тобто ігноруються невідтворювані символи пере­ведения рядка, абзацу, іноді навіть ігноруються порожні (без тек­сту) рядки.

Теги вигляду <!— текст ремарки —> не інтерпретуються й не виконуються, а трактуються як коментарі.

Для відображення тексту в HTML немає спеціального дескрип­тора. Текст вводиться в будь-якому місці між тегами <BODY> й </BODY> й автоматично розмщується за шириною вікна броузе­ра. Форматування тексту мовою HTML виконується з використанням спеціальних тегів i передбачає створення заголовків, абзаців, вирівнювання тексту, виділення тексту напівжирним шрифтом, курсивом, підкресленням, зміною розміру шрифту.

 

Стилі

У мові HTML визначено шість рівнів заголовків i кожному з них відповідає свій розмір шрифту. За допомогою заголовків різних piвнів можна створювати чітку iєpapxiчну структуру документа. Синтаксис HTML-коду, що створює заголовки різного рівня, має такий вигляд:

Заголовок першого рівня </Н1>

Заголовок другого рівня </Н2>

… …

Заголовок шостого рівня </Н6>

А сам документ матиме вигляд, як на рис. 16.

 

Puс. 16. Приклад вигляду заголовків різного рівня

 

Форматування тексту

Текст вводиться у будь-якому місці між тегами <BODY> й </BODY>.

Текст автоматично розмщується за шириною вікна броузера (рис. 17).

Якщо ж необхідно на Web-сторінці вмістити порожній рядок або встановити в потрібному місці перехід до наступного рядка, слід використовувати спеціальні теги:

• теги розриву абзацу <Р> i </P>;

• тег розриву рядка <BR>.

Тег розриву абзацу дає броузеру команду закінчити поточний абзац i вмістити порожній рядок перед наступним абзацом. Тег розриву рядка вказує на закінчення поточного рядка й перехід до наступного.

Зазначимо, що для тегу розриву абзацу не обов'язково викори­стовувати закриваючий тег </Р>.

Наприклад:

<HTML>

<HEAD>

<TITLE>Використання тегів розриву рядка та абзацу </TITLE>

</HEAD>

<BODY> Teг розриву абзацу містить вказівку вставити порожній рядок перед початком наступного абзацу.

Тег розриву рядка вказує броузеру <BR> перейти на наступний рядок.

</BODY>

</HTML>

Рис. 17. Biкно броузера з введеним текстом

 

Текст абзацу чи заголовка може бути вирівняно: за лівим краєм, за правим краєм, за центром вікна броузера. Для вирівнювання тексту використовується параметр вирівнювання ALIGN у вигляді ALIGN= значення, де значення вказує на вирівнювання:

LEFT — за лівим краєм;

RIGHT — за правим краєм;

CENTER — за центром.

Найчастіше параметр ALIGN використовується у тегах розри­ву абзацу та встановлення вигляду заголовка.

Наприклад:

<HTML>

<HEAD>

<TITLE> Приклад вирівнювання тексту </TITLE>

</HEAD>

<BODY>

<Н2 ALIGN=CENTER>Розміщення заголовка тексту по центру </Н2>

<! — Наступний абзац буде вирівняно за лівим краєм — >

<Р ALIGN=LEFT>Вивчення HTML невдовзі стане таким необхідним, як уміння ввімкнути комп'ютер, скопіювати файл чи скористатися текстовим редактором. Якщо користувач yміє набирати текст, то зможе опанувати й використання HTML.

</BODY>

</HTML>

Мова HTML дає змогу виділяти фрагменти тексту напівжирним шрифтом, курсивом, підкресленням тощо. Для цього в HTML icнують спеціальні дескриптори, які називають дескрипторами cmuлів. Bci дескриптори стилів є контейнерами. Основні дескрип­тори стилів подано в таблиці 23.

Таблиця 23

Дескриптор	Стиль	Приклад
<В>	Напівжирний	Напівжирний
<І>	Курсив	Курсив
<U>	Підкреслення	Підкреслення
<SUB>	Підрядковий текст	Текстпідрядковий текст
<SUP>	Надрядковий текст	Текст^надрядковий текст
<STRIKE>	Закреслення	Закреслений

Наприклад (рис. 18):

<BODY>

Приклад виділення тексту <В> напівжирним шрифтом </В>. <BR>

Можна також виділити текст <І> курсивом </І>. <BR>

Особливо важливі місця можна <U> підкреслити </U>. <BR> Можна створити <SUP> надрядковий </SUP> або <SUB> підрядковий </SUB> текст. <BR>

Kpiм того, текст можна <STRІKE>перекреслити</ STRIKE>. </P>

Розмір шрифта можна виэначити за допомогою дескрип­тора FONT:

</BODY>

Рис. 18. Приклади виділення тексту

Списки

У будь-яких HTML-документах для покращення сприйняття тексту можна використовувати списки трьох титв:

а) послідовно нумеровані;

б) ненумеровані (з маркером позиції);

в) списки словникового типу або списки визначень.

Маркери списку можуть мати вигляд:

• — за замовчуванням (заповнені кружечки);

о — порожні кружечки (CIRCLE);

■ — квадратики (SQUARE).

Тип маркера вказується у відкриваючому тегу контейнера спис­ку: <ULTYPE=SQUARE>.

Спосіб нумерування елементів списку вказує атрибут тегу (табл. 24).

Таблиця 24

Атрибута	Значения
<OL TYPE = «1»>	Нумерування арабськими цифрами (значения за замовчуванням)
< OL TYPE = «а»>	Рядкові лігери
< OL TYPE = «А»>	Великі лігери
< OL TYPE - «i»>	Нумерування римськими літерами (маленькими)
< OL TYPE = «I»>	Нумерування римськими літерами (великими)

 

За потреби можна вказати початковий номер елемента атрибу­том START:

Наприклад:

<OL TYPE = «I» START = «5»>.

Можна створити нумерований та ненумерований списки (рис. 19, 20).

Фрагмент коду для створення ненумерованого списку: <UL><LI>Перший елемент списку</LI>

<LI>Перший елемент списку</LI>

<LI>Другий елемент списку</LI>

<LI>Третій елемент списку</LI></UL>

Рис. 19. Приклад ненумерованого списку

Фрагмент коду для створення нумерованого списку:

<OL>

<LI>Перший елемент списку</LI>

<LI>Другий елемент списку</LI>

<LI>Третій елемент списку</LI>

</OL>

Рис. 20. Приклад нумерованого списку

 

Зручний вигляд має список словникового типу, який формується з використанням тегу <DL> (табл. 26). Тег терміна <DT>, як правило, використовується першим, а тег визначення <DD> — другим.

Приклад:

<Н1>Теги списків</Н1>

<DL><DT>Teг UL </DT>

<DD>Cтворює ненумерований список (список із марке­рами) </DD>

<DL><DT>Ter OL </DT>

<DD>Створює нумерований список</DD>

<DL><DT>Ter LI </DT>

<DD>Використовується у списках для обмеження ïx елементів </DD>

<DL><DT>Ter DL </DT>

<DD>Cтворює список словникового типу</DD>

<DL><DT>Тег DT </DT>

<DD>Визначає термін у спискові словникового типу </DD>

<DL><DT> Тег DD </DT>

<DD>Визначає визначення терміну y спискові словни­кового типу</DD>

Рис. 21. Приклад meгів списків

 

Допускається довільне вкладення списків, наприклад, одним iз пунктів нумерованого списку може бути ненумерований список (або ненумерований список може містити ненумерований список з іншими маркерами).

Таблиці

Подання анформації у таблицях за зовнішнім виглядом подібне до подання інформації в таблицях текстового редактора Word, в Excel, але ïx використання набагато ширше. Вміст комірок може бути довільним, зокрема там може бути й графіка.

Опис таблиці починається з тегу <TABLE>. Параметри таблиці визначають теги:

ТН> — заголовка таблиці,

TR> — опису рядків,

TD> — опису даних (тобто вмісту комірок).

Наприклад (рис. 22):

<Н1>Фірма «Зодіак»</Н1>

<Н2>Прибутки i видатки за 2000 piк

(дійсні i очікувані)</Н2>

<TABLE>	Перший рядок
<TR>
<ТН> Перший квартал </ТН>
<ТН> Другий квартал </ТН>
<ТН> Третій квартал </ТН>
<ТН> Четвертий квартал </ТН> </TR>

 

<TR>	Другий рядок
<TD> Прибутки 12 % (дійсні) </TD>
<TD> Прибутки 10 % (дійсні) </TD>
<TD> Збитки 5 % (дійсні) </TD>
<TD> Прибутки 10 % (передбачувані) </TD>
<TD> Збитки 5 % (передбачувані) </TD>
</TR> </TABLE>

Рис. 22. Приклад HTML-таблиці

Заголовки у таблиці можуть розміщуватися не тільки як назви стовпчиків, а й як назви рядків. Виравнювання даних у комірках таблиці описує атрибут ALIGN тегів з дескрипторами ТН i TD. Атрибут може набувати значень LEFT, RIGHT, CENTER для вирівнювання за лівим краєм, правим краєм або за центром.

Наприклад:

• тег <ТН ALIGN= «LEFT»> вказує на вирівнювання за лівим краєм.

У цих тегах можуть розміщуватися атрибути COLSPAN i ROWSPAN, за допомогою яких будується складна таблиця.

Наприклад:

• тег <ТН ROWSPAN=«3»> вказує на те, що відповідна комipкa має висоту, втричі більшу за висоту рядка;

• тег <TD COLSPAN=«3»> — що комірка має ширину, втричі більшу за ширину стовпчика.

Комірки таблиці можуть бути обмежені лініями — рамками. Тег оголошення таблиці <TABLE> з атрибутом BORDER:

TABLE BORDER> та атрибут кольору ліній... BORDERCOLOR= «#...», де колір задають шістнадцяткові коди RGB-мoдeлi.

— Заголовок таблиці розмщується в контейнері між тегами <TABLE> i </TABLE>:

— CAPTION> Зaгoлoвoк тaблицi </CAPTION>,

 

Гіперпосилання

Гіперпосилання — це вказівка броузеру звернутися до даних або вказівок у межах (або за межами) HTML-документа. За допо­могою гіперпосилань користувачі можуть переходити з однієї сторінки на іншу, документ стає інтерактивним i динамічним. Існують три основних типи гіперпосилань: внутрішні, зовнішні та відносні.

Внутрішні гіперпосилання (internal links) — це посилання на об'єкти в межах одного документа. За допомогою них користувач може переміщуватися всередині однієї Web-сторінки. Taкі по­силання доцільно використовувати на довгих сторінках, щоб швидко переміщуватися між розділами.

Зовнішні гіперпосилання (external links) — це посилання на сторінки, розміщені на іншому Web-cepвеpi.

Відносні (relative links), або локальні (local links), посилання — це посилання на Web-сторінки, розмщені на тому самому cepвepi.

Адреси цих посилань задаються відносно адреси Web-сторінки, на якій вони вміщені.

Для зовнішніх гіперпосилань використовується синтаксис:

<А HREF = «URL»>текст посилання </А>,

де URL — повна адреса документа, на який здійснюється посилан­ня. Текст поміщений у контейнер <А HREF=«URL»> </A> зображаеться в броузері з підкресленням та виділяється кольором (найчастіше синім). URL-адреса в HTML описується відповідно до синтаксису:

протокол://доменне _ім'я:номер_порту/шлях.

Протоколи можуть використовуватися з:

· http:// — HTML-cторінка на одному із cepверів глобальної мережі;

· gopher:// — база даних формату gopher на одному із cepверів глобальної мережі

· telnet:// — служба віддаленого доступу в термінальному режимі;

· ftp:// — служба віддаленого доступу в режимі обміну даних за протоколом FTP {File Transfer Protocol);

· nntp: — доступ до новин USENET з використанням протоколу NNTP;

· news: — адреси групи новин UseNet (оскільки це віртуальна служба, то «//» не використовується);

· mailto: — служба «елекронна пошта»;

· file:// — служба звернення до файлової системи комп'ютера, з якого запущено HTML-документ.

Перемістивши курсор на посилання й натиснувши ліву кнопку мишки, даємо вказівку броузеру завантажити сторінку, яка розміщена за адресою URL.

Наприклад:

<А HREF=«http://www.ibm.com/

computers. html«>Комп'ютери компанії IВМ</А> — це гіперпосилання на Web-сторінку, розміщену за адресою http://www.ibm.com/computers.html.

 

Зв'язуючи сторінки одного сервера гіперпосиланнями, не потрібно записувати до URL доменне ім’я.

Наприклад:

<А HREF-«computers. htm»> Комп'ютери виробництва ІВМ</А> -

створюється гіперпосилання на файл computers.htm, який має знаходитися на тому самому cepвepi й у тому самому підкаталозі що й файл, у якому знаходиться це гіперпосилання.

Якщо файл знаходиться в іншому каталозі, необхідно вказати шлях до нього.

Наприклад:

<А HREF=«ibm/com Комп'ютери виробництва ІВМ</А>

 

Є й інші способи спрощення записів довгих адрес URL. Наприклад, HTML-код:

<HTML>

<HEAD>

<TITLE> Основні розділи Web-сайту НПУ ім. М.П.Драгоманова </TITLE>

</HEAD>

<BODY>

<А HREF=«http://www.npu.kiev.ua/ABITUR/abitbeg.htm»>Aбітурієнту</A>

<A HREF=«http://www.npu.kiev.ua/ASPIRANT/index.htm»>Аспірантура</A>

<A HREF=«http://www.npu.kiev.ua/FAKULT/infak.htm»>Факультети</А>

<A HREF=«http://www.npu.kiev.ua/REKTORAT/inrek.htm»>Ректорат</A>

</BODY>

</HTML>

 

можна записати компактніше:

<HTML>

<HEAD>

<TITLE>Основні розділи Web-сайту НПУ ім. Драгоманова</ТITLE>

<BASE HREF=http://www.npu.kiev.ua/>

</HEAD>

<BODY>

<A HREF=«ABITUR/abit-beg.htm»>Aбітурієнту</A>

<A HREF=«ASPIRANT/index.htm»>Аспірантура</A>

<A HREF=«FAKULT/infak.htm»>Факультети</А>

<A HREF=«REKTORAT/inrek.ЬЬп»>Ректорат</А>

</BODY>

</HTML>

Тут використовується дескриптор BASE y складі тегу <BASEHREF=http://www.npu.kiev.ua/>,

в якому вказано базу адреси URL, стосовно якої подаються всі інші відгосні адреси Web-сторінок. Зазначимо, що цей тег використо­вується всередині контейнера <HEAD>... </HEAD> i його областю ди є вся cторінка.

Створюючи великі Web-сторінки, необхідно зробити так, щоб користувач мав змогу легко переміщуватися з одного розділу в інший. Це забезпечують внутришні гіперпосилання. Для реалізації таких посилань необхідні два елементи: посилання, яке вказує, куди треба перейти, i мітка, яка визначає місце переходу. Посилання на мітку описується кодом:

<А HREF=«#назвa мітки»Текст посилання</А>

Мітка також використовує контейнер <А></А> i описується так:

<А NAME=«назва мітки»>текст</А>

Назва мітки — це довільний текст, який не виводиться на екран броузером i позначає місце переходу. Якщо на сторінці є калька міток, ïx назви мають бути різними. Символ «#» в описі посилання вказує, що після нього записано назву мітки, a не назву файла.

 

Наприклад:

<HTML>

<HEAD>

<ТIТLE>Колекція програм</ТIТLЕ>

</HEAD>

<BODY>

До вашої уваги пропонується колекція алгоритмів <BR>

<!—далі створюємо внутрішні гіперпосилання — >

<А НRЕF=«#графік»Пошук елемента масиву </A><BR>

<А НRЕF=«#масив»Упорядковування масиву</А><ВК>

<А HREF=«#piвняння»Poзв’язування квадратних рівнянь</A><BR>

<Р>

<!— описуємо місця, на які здійснюються посилання — >

<А NАМЕ=«графік»> Пошук елемента масиву </A><BR>

(приклад алгоритму) <BR><BR>

<А NAME=«масив»> Упорядкування масиву </A><BR>

(приклад алгоритму) <BR><BR>

<А NАМЕ=«рівняння»> Розв'язування квадратних рівнянь </А><ВВ>

(приклад алгоритму)

</BODY>

</HTML>

 

Посилання на мультимедійний файл чи файл іншого типу передбачає активізацію файла, вадкриття його відповідною приклад­ною програмою, у разі відсутності останньої користувачу буде запропоновано зберегти вибраний файл.

Посилання на мультимедшш файли *.avi, *.wav, файли іншо­го типу створюються так само, як посилання на HTML-документи.

В атрибуті HREF контейнера <А></А> необхідно вказати на­зву файла, в якому міститься потрібна мелодія або відеофільм.

Наприклад:

<Р> Натисніть <А HREF=«c:\present\Globe.avi»>тут</А>, щоб почути улюблену композицію </Р>

Файл my_music.wav має знаходитися на тому самому cepвepi й у тій самій директорії, що й HTML-файл, з якого він викликається. Для створення гіперпосилань на файли мультимедіа, розміщені на інших серверах мережі Інтернет, використовують повні URL-адреси.

Часто виникає необхідність додати до Web-сторінки посилан­ня на адресу електронної пошти. Для цього в атрибуті HREF необхідно вказати адресу електронної скриньки у вигляді «mailto: ад­реса».

Наприклад:

створення посилання на адресу [e-mail]::

<А HREF=«mailto: [e-mail] >[e-mail]</A>.

Броузер відобразить текст «[e-mail]» як гіперпосилання. Якщо клацнути на ньому мишкою, броузер відкрие поштову програму в режимі створення листа i в полі Адреса: вмютить адре­су [e-mail].

Текст, що розмщується в контейнері <А></А>, може бути будь-яким, проте доцільно використовувати адресу E-mail, оскільки не Bci користувачі сторінки можуть користуватись поштовими програмами, що встановлені на комп'ютері, з якого переглядається сторінка.

 

Завдання для виконання

1. Для кожного рядка поданого нижче коду дати коментар, виділити основні блоки:

<HTML>

<HEAD>

<МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=windows-1251">

<Т1ТЬЕ>ТУТ МОЖЕ БУТИ ЗАГОЛОВОК АБО БАНЕР (РЕКЛАМА) </TITLE>

</HEAD>

<BODY>

<Р ALIGN=" CENTER"><CENTER><TABLE BORDER

CELLSPACING=1 BORDERCOLOR="#000000" CELLPADDING=7

WIDTH=623>

<TR><TD VALIGN="TOP" COLSPAN=3 HEIGHT=75>

<P ALIGN="LEFT"><B><I><FONT COLOR="#ff0000">ТУТ МОЖЕ БУТИ ЗАГОЛОВОК АБО БАНЕР (РЕКЛАМА) </В></I></FONTX/TD>

</TR>

<TR><TD WIDTH="26%" VALIGN="TOP" ROWSPAN=2 HEIGHT=111>

<P><IMG SRC="Image1.gif" WIDTH=124 HEIGHT=111></P>

<FONT FACE="Times New Roman "><Р>Тестова WEB-стоpiнка</FONT></TD>

<TD WIDTH="36%" VALIGN="TOP" HEIGHT=111>

<I><F0NT FACE="Times New Roman"><P>тут пишемо адреcy</I></FONT></TD>

<TD WIDTH="38%" VALIGN="TOP" HEIGHT=111>

<IXF0NT FACE="Times New Roman"><P>TyT малюємо </Р>

</FONT><P><IMG SRC="Image2.gif" WIDTH=218 HEIGHT=119></I></TD>

</TR>

<TR><TD WIDTH="36%" VALIGN="TOP" HEIGHT=92>

<OL>

<LI><A HREF="mailto:[e-mail]"> <U> <FONT

COLOR="#0000ff"> [e-mail] </U> </FONT></AX/LI>

<TD WIDTH="38%" VALIGN="TOP" HEIGHT=92></TD>

</TR>

<TR><TD VALIGN=" CENTER" COLSPAN=3 HEIGHT=100><P></P></TD></TR>

</TABLE>

</HTML>

2. Використовуючи текстовий редактор Блокнот, розробити сторінку зі списком студентів групи. Відомості подати у вигляді таблиці з колонками: прізвище, ім'я, по батькові; домашня ад­реса; електронна адреса; сімейний стан. Виконане завдання записати на диск у домашній каталог за назвою Н1_1 – прізвище.html.

3. Використовуючи текстовий редактор Блокнот, розробити рекламну сторінку фірми «Зодіак», що містить такі елементи:

• заголовок (назва товару, що вибирається довільно);

• коротка анотація з виділенням ключових слів (жирний, підкреслений, курсивний шрифт);

• перелік основних властивостей пропонованого товару.

Виконане завдання записати на диск у домашній каталог за назвою Н1_2-прізвище.html.

 

Завдання для самостийного виконання

Проаналізувати такі Web-сторінки: www.eu.edu.ua; www.bit.te.ua; www.list.ru. Заповнити таблицю 25 для кожної адреси.

Таблиця 25

Елемент	Дескриптор	Вміст
Заголовок
Абзац
Список
Зображення
Таблиця
Жирний текст
Курсивний текст
Підкреслений текст
Список (вказати тип)
Гіперпосилання (локальні)
Гіперпосилання

Запитання для контролю

1. Засоби розробки Web-сторінок. Мова гіпертекстової розмітки НТМL.

3.Структура HTML-сторінки.

4.Логічне форматування тексту.

5.Форматування тексту.

6.Форматування абзацу, початок нового рядка.

7.Подання інформації у вигляді списків. Типи списків. Html-теги форматування списків.

8.Теги мови Html для створення таблиць.

9.Теги додавання до Html-сторінки графічних зображень.

10. Гіперпосилання, типи гіперпосилань, стоворення гіперпосилань.

I1. Виділення кольором.

 

ЛАБОРАТОРНА РОБОТА № 8

Тема. Розробка графічних зображень для використання у Web-сторінках.

Мета: ознайомити з методами формування графічних зображень для розміщення на Web-cторінках.

Час виконання: 2 год.

ХІД РОБОТИ

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

Формати графічних файлів

Графічні зображення додають до НТМL-документів у вигляді окремих малюнків або як фон, що вважається об'єктом другого плану. Графічне зображення для перегляду у Web-сторінці необxiдно зберігати у форматах: .gif (Graphic Interchange Format), .jpeg (Joint Photographic Expert Group), .png.

Якщо створюється сторінка, доступ до якої здійснюватиметься з використанням лінії зі швидкістю обману до 3000 біт/с, бажано навіть для броузерів, які працюють з графікою, заборонити пересилання графічних образів у ïx оригінальному poзмірі. У такому paзi на екрані спочатку з'являється мініатюрна копія зображен­ня, яка пов'язана гіперпосиланням з повномаштабним зображенням, тобто є «гарячою зоною».

Графіка

Синтаксис тегу додавання графічного зображення має такий вигляд:

<IMG SRS ="name of file">,

причому тег може мати додаткові атрибути:

• ALT — використовується для вказівки на текст, який виводиться за неможливості виведення рисунка;

• ALIGN — як i для тексту, описує спосіб вирівнювання;

• HEIGT та WIDTH — описують висоту й ширину зображення у пікселях;

• ISMAP — вказівка на те, що створююється карта (малюнок із «гарячими зонами», які діють як гіперпосилання). Якщо тег зображення розмфщено всерединф тегу-вказівника посилання, то увесь малюнок гратиме роль «гарячої зони».

Карта-зображення створюється для надання документу інтерактивності. Розмітка карти, тобто призначення координат лівому верхньому та правому нижньому кутам прямокутної ділянки, яка буде «гарячою зоною», може виконуватись за допомогою розрахунку, палетки або спеціалізованих програмних засобів.

Тло (фон) зображення описується тегом

<BODY BACKGROUND=’’image.gif’’ >,

причому, як видно із синтаксису, його дія поширюється на весь документ.