ТЕМА: Створення власних Web-сторінок. Розміщення зображень, аудіо та відео файлів на сторінках.
МЕТА: навчитись створювати власні Web-сторінки, розміщувати зображення, аудіо та відео файлів на сторінках.
ОБЛАДНЕННЯ: ПК, мова НТМL
ТИП УРОКУ: Лабораторна робота.
ТЕОРИТИЧНІ ВІДОМОСТІ
Web-сторінка — текстовий файл, написаний командами мови HTML. Для роботи з такими файлами використовується спеціальна програма — броузер. Це може бути Internet Explorer, r та ін.
HTML-файл має структурований вигляд, який організований за допомогою тегів (вказівки броузеру для визначення тієї чи іншої частини файла). Теги бувають парні — для зазначення початку й кінця фрагмента та одноелементні — для визначення дії.
Кожний документ починається із декларативної частини - заголовка, і тіла документа. Документи мовою HTML починаються з декларації <! DOCTYPE>, після цього слідує контейнер тегів, який розпочинається з вказівки "<HTML> " і закінчується "</HTML>":
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Final//EN'>
<HTML>
<HEAD>
<TITLE> Вивчення динаміки популяцій </TITLE>
... Інші елементи заголовку
</HEAD>
<BODY>
... Тіло документа
</BODY>
</HTML>
У модулі "<HEAD>" має бути розташований контейнер "<TITLE>… <\TITLE> ", який містить назву документу, яка виводиться на екран. Якщо у документі даний тег відсутній, то на місці заголовку буде розташовано URL-адресу файлу.
<HTML>
<HEAD>
<TITLE> Це заголовок </TITLE>
</HEAD>
<BODY>
Власне документ HTML -тіло документу
</BODY>
</HTML>
Команди (теги), що використовуються при створенні WEB-сторінок
<HTML></HTML> — початок і кінець документа;
<HEAD></HEAD> — ділянка заголовка документа;
<BODY></BODY> — зміст документа;
<TITLE></TITLE> — заголовок вікна броузера з відкритим файлом;
<FRAMESET ROWS=“200,*”> …</FRAMESET> — резервування для фрейму частини вікна;
<FRAME NAME=CENTER SRC=FILE.HTML > — визначення імені (місцерозташування в вікні та імені на диску) фрейму;
<A HREF=FILE1.HTML TARGET=“LEFT”> текст </A> — гіперпосилання із визначенням частини вікна (фрейма) для вміщення файла;
<BODY BGCOLOR=“Silver” TEXT=“Black” LINK=“#FF0000”> — визначення кольору фону вікна, кольору тексту, кольору гіперпосилань; колір можна вказати за допомогою назви (Silver) або шістнадцятирічним кодом (#FF0000);
<!-…-> — створення коментаря;
<marquee bgcolor=“#6DEFFF” > текст </marquee> — створення рухливого рядка;
— визначення типу шрифта, його розмір, колір;
<IMG SRC=“14.JPG” WIDTH=“220” HEIGHT=“140” ALT=“ЗОБРАЖЕННЯ”> — вставлення графічного об’єкта із визначенням його ширини, висоти, коментаря, який з’являється після підведення вказівника мишки до об’єкта;
<BGSOUND=“14.RMI” LOOP=“INFINITIVE”> — вставка звукового файла, де LOOP визначає тривалість звучання;
— абзац;
</BR> — перехід на новий рядок;
— форматування тексту в напівжирний шрифт;
— форматування тексту в курсив;
— форматування тексту в підкреслений шрифт;
— початок/кінець маркерованого списку;
— початок/кінець нумерованого списку;
— елемент списку;
<A HREF=“адреса”>текст</A> — гіперпосилання на інший файл;
<Р ALIGN=CENTER > — визначення виду вирівнювання абзацу;
— початок/кінець таблиці;
— рамки таблиці;
| -> — початок/кінець комірки таблиці;
|
> — початок/кінець рядка таблиці;
| > — заголовок стовпця таблиці.
Також Web-сторінки можна створювати у Word, з допомогою майстра або перетворити існуючий документ Word у формат HTML. Для створення у Word передбачені спеціальні панелі інструментів, команди меню і функції. У майстрові Web-сторінок для спрощення процесу створення пропонуються зразки змісту сторінок — наприклад, індивідуальні початкові сторінки та реєстраційні форми. Для швидкого перетворення існуючого документа Word
у Web-сторінку використовуйте метод перетворення HTML. При цьому перетворяться форматування та інші параметри документа.
Для створення Web-сторінки виберіть команду Создать в меню Файл, а потім вкладку Web-страницы.
Двічі клацніть Майстер Web-сторінок і спочатку виберіть тип та стиль нової сторінки, а потім виконуйте указівки майстра щодо додавання або зміни тексту, малюнків (рис. 1).
Файл:9999.jpg
Рис. 1
Для збереження документа Word у форматі HTML виберіть команду Сохранить в формате HTML в меню Файл. Якщо документ Word ерігається як Web-сторінка, документ закривається, а потім відкривається у форматі HTML. При цьому Web-сторінка зображується у тому вигляді, який вона мала б при перегляді її за допомогою Web-броузера. Форматування, які не підтримує формат HTML, у файлі не зберігаються.
Графіка у HTML – документах
Перед ознайомленням із правилами використання графіки в HTML-файлах доцільно розглянути,які типи графічних файлів підтримуються різними браузерами. У картинках у форматі GIF підтримуються 256 кольорів та є можливість використовувати мультиплікацію. Цей формат дозволяє дин чи кілька кольорів у малюнку зробити прозорими, що дає змогу позбавитися від строго прямокутних ілюстрацій і більш привабливим чином вписувати в документ малюнок.
Формат JPG було розроблено спеціально для передавання фотографій, він підтримує мільйони кольорів і дозволяє одержувати зображення дуже високої якості. Однак файли цього формату маютьвеликий розмір, а оскільки розмір файла зображення визначає швидкість появи зображення на екрані. Для зменшення розміру файла необхідно використовувати зображення типу JPG або GIF. Конвертацію графіки у ці формати
можна здійснити за допомогою редакторів растрових зображень.
Картинки, що зберігаються на дисках в одному зі вказаних графічних форматів, можна
використовувати в HTML-документах так:
. для зміни фону сторінки;
. як ілюстрацію на сторінці;
. як посилання на інший об'єкт;
. як маркер у списку.
На веб-сторінках графічні зображення можна розміщувати різними способами. Вбудовані
зображення – це графічні зображення, які завжди залишаються в одному і тому самому місці сторінки і не обтікаються текстом. Плаваючі зображення – це зображення, що не прив’язуються до одного рядка тексту, і ніби «плавають» уздовж одного з полів і обтікаються текстом. Для вставлення до документа малюнка використовується одинарний тег <IMG> (від англ. image — зображення) з такими параметрами: SRC= "ім 'я_файла "(від англ. source — джерело). Наприклад, за командою <IMGSRC= "pr.gif">na екрані буде відображатися вміст графічного файла pr.gif, що зберігається в активному каталозі.
Параметр ALT=«текст_надпису» використовується в тому випадку, коли браузер не знаходить картинки в указаному місці на диску, тоді замість неї на екрані відображається маленький прямокутник з відповідним надписом в його середині, який задається параметром ALT. Цей параметр рекомендується використовувати завжди.
Параметри WIDTH=n HEIGHT=m задають ширину і висоту (в пік-селях) прямокутника, в який виводиться картинка. Якщо параметри не задано, то картинка виводиться за власними розмірами. Коли розміри прямокутника не збігаються з розмірами картинки, браузер масштабує її, враховуючи значення, вказані параметрами WIDTH та HEIGHT.
Параметр ALIGN дозволяє визначити положення ілюстрації відносно сусідніх документів, цей параметр використовується для створення плаваючих зображень. Для плаваючих зображень значення цього атрибута можуть бути LEFT aбo RIGHT. Для вбудованих зображень цей параметр не використовується. При вирівнюванні зображень до лівої та до правої меж часто намагаються зробити так, щоб текст виводився під зображенням, а не збоку від нього. Для цього використовується вказівка
<BR=CLEAR LEFT> або <BR=CLEAR RIGHT>.
Web-сайт — сукупність пов’язаних між собою файлів (наз. Web-сторінками), що мають мультимедійний зміст.
Програма Internet Explorer (Web-броузер) — призначена для перегляду інформації Web-сторінок. Вона створює команду, пересилає її на сервер та отримує відповідь. Обробка даних в HTTP складається з чотирьох етапів: відкриття зв’язку, пересилання повідом¬лень запиту, пересилання даних відповіді та закриття зв’язку. Вікно Internet Explorer (рис. 1) містить елементи, які допоможуть керувати цією програмою. На рядку меню вибираються команди та встановлюються опції.
ЗАВДАННЯ:
1)Створіть свою Web-сторінку з графічним зображення.
-Змінити типи вирівнювання малюнків.
-Підписати картинки так, щоб текст розташовувався ліворуч чи праворуч від малюнка залежно від типу вирівнювання.
-Змінити розмір двох картинок.
-Змінити шрифт підписів картинок: розмір, колір, тип вирівнювання.
-Розташувати тексти—підписи під картинками.
-Змінити розміри картинок.
-Встановити інші малюнки замість тих, що є на сторінках.
2)Створіть свою Web-сторінку на довільну тему, яка повинна містити текст, гіперпосилання, таблицю, графічні зображення.
КОНТРОЛЬНІ ЗАПИТАННЯ:
1.Описати структуру Web-сторінки.
2.Що таке HTML?
3 .Описати основні характеристики HTML.
4. Дати тлумачення поняття гіпертексту та гіперпосилання.
5. Які зображення називаються вбудованими?
