Відмінності між версіями «Конспект уроку №5 Internet»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
 
(не показано 6 проміжних версій цього учасника)
Рядок 1: Рядок 1:
 
'''ТЕМА:''' Створення власних Web-сторінок. Розміщення зображень, аудіо та відео файлів на сторінках.
 
'''ТЕМА:''' Створення власних Web-сторінок. Розміщення зображень, аудіо та відео файлів на сторінках.
  
−
'''МЕТА:''' навчитись створювати власні Web-сторінки, розміщувати зображення, аудіо та відео файлів на сторінках.
+
'''МЕТА:''' вдосконалити навички створювати власні Web-сторінки, навчитись розміщувати зображення, аудіо та відео файлів на сторінках.
  
 
'''ОБЛАДНЕННЯ:''' ПК, мова НТМL
 
'''ОБЛАДНЕННЯ:''' ПК, мова НТМL
Рядок 7: Рядок 7:
 
'''ТИП УРОКУ:''' Лабораторна робота.
 
'''ТИП УРОКУ:''' Лабораторна робота.
  
−
'''                                                       ''' ТЕОРИТИЧНІ ВІДОМОСТІ
+
 
 +
                                                        '''ТЕОРИТИЧНІ ВІДОМОСТІ'''
  
 
''Web-сторінка'' — текстовий файл, написаний командами мови HTML. Для роботи з такими файлами використовується спеціальна програма — броузер. Це може бути Internet Explorer, r та ін.
 
''Web-сторінка'' — текстовий файл, написаний командами мови HTML. Для роботи з такими файлами використовується спеціальна програма — броузер. Це може бути Internet Explorer, r та ін.
−
''HTM''L-файл має структурований вигляд, який організований за допомогою тегів (вказівки броузеру для визначення тієї чи іншої частини файла). Теги бувають парні — для зазначення початку й кінця фрагмента та одноелементні — для визначення дії.
+
HTML-файл має структурований вигляд, який організований за допомогою тегів (вказівки броузеру для визначення тієї чи іншої частини файла). Теги бувають парні — для зазначення початку й кінця фрагмента та одноелементні — для визначення дії.
−
Кожний документ починається із декларативної частини - заголовка, і тіла документа. Документи мовою HTML починаються з декларації <! DOCTYPE>, після цього слідує контейнер тегів, який розпочинається з вказівки "<HTML> " і закінчується "</HTML>":
+
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN'>
−
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Final//EN'>
+
  
 
<HTML>
 
<HTML>
Рядок 21: Рядок 21:
  
 
... Інші елементи заголовку
 
... Інші елементи заголовку
 +
 
</HEAD>
 
</HEAD>
  
Рядок 26: Рядок 27:
  
 
... Тіло документа
 
... Тіло документа
−
</BODY>
 
  
−
</HTML>
 
−
 
−
У модулі "<HEAD>" має бути розташований контейнер "<TITLE>… <\TITLE> ", який містить назву документу, яка виводиться на екран. Якщо у документі даний тег відсутній, то на місці заголовку буде розташовано URL-адресу файлу.
 
−
<HTML>
 
−
<HEAD>
 
−
 
−
<TITLE> Це заголовок </TITLE>
 
−
 
−
</HEAD>
 
−
 
−
<BODY>
 
−
 
−
Власне документ HTML -тіло документу
 
 
</BODY>
 
</BODY>
  
 
</HTML>
 
</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> — створення рухливого рядка;
+
−
 
+
−
<FONT FACE=“ARIAL” SIZE=“6” COLOR=“#DD0000”> — визначення типу шрифта, його розмір, колір;
+
−
<IMG SRC=“14.JPG” WIDTH=“220” HEIGHT=“140” ALT=“ЗОБРАЖЕННЯ”> — вставлення графічного об’єкта із визначенням його ширини, висоти, коментаря, який з’являється після підведення вказівника мишки до об’єкта;
+
−
 
+
−
<BGSOUND=“14.RMI” LOOP=“INFINITIVE”> — вставка звукового файла, де LOOP визначає тривалість звучання;
+
−
 
+
−
<P></P> — абзац;
+
−
<BR></BR> — перехід на новий рядок;
+
−
 
+
−
<B></B> — форматування тексту в напівжирний шрифт;
+
−
 
+
−
<I></I> — форматування тексту в курсив;
+
−
 
+
−
<U></U> — форматування тексту в підкреслений шрифт;
+
−
 
+
−
<UL></UL> — початок/кінець маркерованого списку;
+
−
 
+
−
<OL></OL> — початок/кінець нумерованого списку;
+
−
<LI></LI> — елемент списку;
+
−
 
+
−
<A HREF=“адреса”>текст</A> — гіперпосилання на інший файл;
+
−
 
+
−
<Р ALIGN=CENTER > — визначення виду вирівнювання абзацу;
+
−
 
+
−
<TABLE></TABLE> — початок/кінець таблиці;
+
−
 
+
−
<TABLE BORDER> — рамки таблиці;
+
−
 
+
−
<TD></TD>-> — початок/кінець комірки таблиці;
+
−
 
+
−
<TR></TR>> — початок/кінець рядка таблиці;
+
−
 
+
−
<TH></TH>> — заголовок стовпця таблиці.
+
−
 
+
−
Також Web-сторінки можна створювати у Word, з допомогою майстра або перетворити існуючий документ Word у формат HTML. Для створення у Word передбачені спеціальні панелі інструментів, команди меню і функції. У майстрові Web-сторінок для спрощення процесу створення пропонуються зразки змісту сторінок — наприклад, індивідуальні початкові сторінки та реєстраційні форми. Для швидкого перетворення існуючого документа Word
+
−
у Web-сторінку використовуйте метод перетворення HTML. При цьому перетворяться форматування та інші параметри документа.
+
−
Для створення Web-сторінки виберіть команду Создать в меню Файл, а потім вкладку Web-страницы.
+
−
Двічі клацніть Майстер Web-сторінок і спочатку виберіть тип та стиль нової сторінки, а потім виконуйте указівки майстра щодо додавання або зміни тексту, малюнків (рис. 1).
+
−
 
+
−
[[Image:9999.jpg]]
+
−
 
+
−
  Рис. 1
+
−
Для збереження документа Word у форматі HTML виберіть команду Сохранить в формате HTML в меню Файл. Якщо документ Word ерігається як Web-сторінка, документ закривається, а потім відкривається у форматі HTML. При цьому Web-сторінка зображується у тому вигляді, який вона мала б при перегляді її за допомогою Web-броузера. Форматування, які не підтримує формат HTML, у файлі не зберігаються.
+
−
                                       '' Графіка у HTML – документах''
+
  
 
Перед ознайомленням із правилами використання графіки в HTML-файлах доцільно розглянути,які типи графічних файлів підтримуються різними браузерами. У картинках у форматі GIF підтримуються 256 кольорів та є можливість використовувати мультиплікацію. Цей формат дозволяє дин чи кілька кольорів у малюнку зробити прозорими, що дає змогу позбавитися від строго прямокутних ілюстрацій і більш привабливим чином вписувати в документ малюнок.
 
Перед ознайомленням із правилами використання графіки в HTML-файлах доцільно розглянути,які типи графічних файлів підтримуються різними браузерами. У картинках у форматі GIF підтримуються 256 кольорів та є можливість використовувати мультиплікацію. Цей формат дозволяє дин чи кілька кольорів у малюнку зробити прозорими, що дає змогу позбавитися від строго прямокутних ілюстрацій і більш привабливим чином вписувати в документ малюнок.
Рядок 129: Рядок 52:
 
''Web-сайт'' — сукупність пов’язаних між собою файлів (наз. Web-сторінками), що мають мультимедійний зміст.
 
''Web-сайт'' — сукупність пов’язаних між собою файлів (наз. Web-сторінками), що мають мультимедійний зміст.
 
Програма Internet Explorer (Web-броузер) — призначена для перегляду інформації Web-сторінок. Вона створює команду, пересилає її на сервер та отримує відповідь. Обробка даних в HTTP складається з чотирьох етапів: відкриття зв’язку, пересилання повідом¬лень запиту, пересилання даних відповіді та закриття зв’язку. Вікно Internet Explorer (рис. 1) містить елементи, які допоможуть керувати цією програмою. На рядку меню вибираються команди та встановлюються опції.  
 
Програма Internet Explorer (Web-броузер) — призначена для перегляду інформації Web-сторінок. Вона створює команду, пересилає її на сервер та отримує відповідь. Обробка даних в HTTP складається з чотирьох етапів: відкриття зв’язку, пересилання повідом¬лень запиту, пересилання даних відповіді та закриття зв’язку. Вікно Internet Explorer (рис. 1) містить елементи, які допоможуть керувати цією програмою. На рядку меню вибираються команди та встановлюються опції.  
−
                                                     
 
  
−
                                                                '''ЗАВДАННЯ:'''
+
                                      '''Вставка звуку і відеозображеня.'''
  
−
1)Створіть свою Web-сторінку на довільну тему, яка повинна містити текст, гіперпосилання, таблицю, графічні зображення.
+
Важливо памятати, що звукові файли мають розширення назв 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-сторінку на довільну тему "Привітаття до дня чителя", яка повинна містити текст, таблицю, графічні зображення,аудіо або відеофайли по темі.
  
 
                                                             '''КОНТРОЛЬНІ ЗАПИТАННЯ''':
 
                                                             '''КОНТРОЛЬНІ ЗАПИТАННЯ''':
Рядок 141: Рядок 93:
 
2.Що таке HTML?
 
2.Що таке HTML?
  
−
3 . Описати основні характеристики HTML.
+
3 .Описати основні характеристики HTML.
 +
 
 +
4. Дати тлумачення поняття гіпертексту та гіперпосилання.
  
−
4. Дати тлумачення поняття гіпертексту та гіперпосилання.
+
5. Які зображення називаються вбудованими?
  
−
5. Які зображення називаються вбудованими?
+
6. Як вставити аудіо і відеофайли?

Поточна версія на 08:40, 23 жовтня 2008

ТЕМА: Створення власних 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. Які зображення називаються вбудованими?

6. Як вставити аудіо і відеофайли?

Отримано з https://wiki.cusu.edu.ua/index.php?title=Конспект_уроку_№5_Internet&oldid=4528