Конспект уроку №5 Internet
ТЕМА: Створення власних Web-сторінок. Розміщення зображень, аудіо та відео файлів на сторінках.
МЕТА: вдосконалити навички створювати власні Web-сторінки, навчитись розміщувати зображення, аудіо та відео файлів на сторінках.
ОБЛАДНЕННЯ: ПК, мова НТМL
ТИП УРОКУ: Лабораторна робота.
ТЕОРИТИЧНІ ВІДОМОСТІ
Web-сторінка — текстовий файл, написаний командами мови HTML. Для роботи з такими файлами використовується спеціальна програма — броузер. Це може бути Internet Explorer, r та ін. HTML-файл має структурований вигляд, який організований за допомогою тегів (вказівки броузеру для визначення тієї чи іншої частини файла). Теги бувають парні — для зазначення початку й кінця фрагмента та одноелементні — для визначення дії. <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN'>
<HTML>
<HEAD>
<TITLE> Вивчення динаміки популяцій </TITLE>
... Інші елементи заголовку
</HEAD>
<BODY>
... Тіло документа
</BODY>
</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) містить елементи, які допоможуть керувати цією програмою. На рядку меню вибираються команди та встановлюються опції.
Вставка звуку і відеозображеня.
Важливо памятати, що звукові файли мають розширення назв ua, wav, mid, ra, а выдеофайли – avi, vivo, mpeg. Щоб вставити звук чи відео, достатньо як зазначення параметра HREF у тезі гіперпосилання задати шлях до відомого звукового чи відеофайлу, який вже є на диску, наприклад:
Тепер <A HREF =”mysound. wav”> послухайте мене(150К) </A>. Текст «послухайте мене(150К) » стане гіперпосиланням, клацнувши на якому можна почути привітання, деяку інформацію, яка була заздалегіть записана, наприклад за допомогою програми Фонограф у файл ”mysound. wav” обсягом 150Кбайт. Щоб звуковий чи відеоефект повторювався декілька разів, наприклад, 2, у тезі <A> використовують параметр LOOP = 2. Щоб звук деякого Файлу пролунав у момент запуску сторінки, потрібно виконати тег <BGSOUND SRC =”адреса звукового файлу ”>. Інший спосіб - використайти тег <EMBED SRC =”адреса звукового файлу ”> і, окрім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості й сили звуку, тощо.
ЗАВДАННЯ:
1)Створіть свою Web-сторінку з графічним зображення.
-Змінити типи вирівнювання малюнків.
-Підписати картинки так, щоб текст розташовувався ліворуч чи праворуч від малюнка залежно від типу вирівнювання.
-Змінити розмір двох картинок.
-Змінити шрифт підписів картинок: розмір, колір, тип вирівнювання.
-Розташувати тексти—підписи під картинками.
-Змінити розміри картинок.
-Встановити інші малюнки замість тих, що є на сторінках
2. Розмістити на Web-сторінки фрагмент з будь- якого
- аудіофайлу,
- відеофайлу.
3.Створіть свою Web-сторінку на довільну тему "Привітаття до дня чителя", яка повинна містити текст, таблицю, графічні зображення,аудіо або відеофайли по темі.
КОНТРОЛЬНІ ЗАПИТАННЯ:
1.Описати структуру Web-сторінки.
2.Що таке HTML?
3 .Описати основні характеристики HTML.
4. Дати тлумачення поняття гіпертексту та гіперпосилання.
5. Які зображення називаються вбудованими?
