Лабораторний практикум

Івано-Франківськ

УДК

ББК

Ш-

Рецензент:

Незамай Б.С.

кандидат технічних наук, доцент кафедри комп’ютерних технологій в системах управління і автоматики Івано-Франківського національного технічного університету нафти і газу

Рекомендовано методичною радою університету

(протокол № __ від ___2012 р.)

Штаєр Л. О.

Ш- Інформаційна мережа Internet: лабораторний практикум. – Івано-Франківськ: ІФНТУНГ, 2012. – 42 с.

МВ 02070855-_____-2012

Практикум містить методичні вказівки для проведення лабораторних занять з дисципліни “Інформаційна мережа Internet”. Розроблений відповідно до робочої програми навчальної дисципліни “ Інформаційна мережа Internet”.

Призначено для підготовки фахівців за напрямом 6.050201 – "Системна інженерія".

УДК ББК
МВ 02070855-____-2012	© Л. О. Штаєр © ІФНТУНГ, 2012

ЗМІСТ

ЗАГАЛЬНІ МЕТОДИЧНІ ВКАЗІВКИ.. 4

Лабораторна робота 1 Вивчення можливостей сервісу Google Docs 6

Лабораторна робота 2 Створення простого HTML - документу. Використання тегів форматування тексту. Використання списків. 13

Лабораторна робота 3 Створення документів із таблицями. Використання таблиць для форматування і розміщення елементів. Активні зображення. 18

Лабораторна робота 4 Каскадні таблиці стилів і їхнє використання 26

Лабораторна робота 5 Фреймові структури в документах HTML. Форми і теги запровадження в HTML. 29

Лабораторна робота 6 Робота із графічними зображеннями у GIMP. Створення елементів дизайну web-сторінки у GIMP. 36

ПЕРЕЛІК РЕКОМЕНДОВАНИХ ДЖЕРЕЛ.. 42

ЗАГАЛЬНІ МЕТОДИЧНІ ВКАЗІВКИ

Дисципліна "Інформаційна мережа Internet" є дисципліною за вибором та забезпечує теоретичну та практичну підготовку фахівців за напрямом «Системна інженерія».

Мета викладання дисципліни "Інформаційна мережа Internet" – навчити застосувати в комп’ютерних мережах розподілені інформаційні технологій, які є у мережі Internet, і особливо WEB технології, з метою об’єднання різнотипних комп’ютерних мереж на базі протоколів стеку TCP/IP.

Завдання дисципліни полягає в тому, щоб студент отримав знання про:

− методику користування протоколами віддаленого доступу для виконання програм на інших ЕОМ корпоративної мережі;

− організацію спеціальних серверів опитування запитів;

− організацію спілкування в глобальній КМ за допомогою сервісу телеконференцій;

− методику користування різноманітними сервісами перегляду інформації в КМ.

По закінченні курсу студент повинен вміти:

− використовувати сервісний обмін файлами з віддаленими комп'ютерами та переглядати зміст каталогів комп'ютерів корпоративної мережі;

− користуватись електронною поштою, організовувати інформацію у вигляді папок і навігацією між ними;

− застосовувати WEB технологію для створення гнучкої системи обміну телекомунікаційною інформацією.

Лабораторний практикум містить методичні вказівки для проведення лабораторних занять з дисципліни “Інформаційна мережа Internet”. Лабораторна робота 1 за тематикою відповідає змістовому модулю 1 “Мережа Internet та WEB технології. Принципи побудови і робота в інформаційній мережі Internet”, роботи 2-6 належать до змістового модуля 2 “ Базові основи web-програмування. Основи HTML i CSS. Передача та прийом файлів”. Виконання 1-ї лабораторниї роботи передбачає наявність доступу до мережі Internet, виконання робіт 2-5 передбачає застосування програмних пакетів, з якими знайомі студенти, без обмеження на їх використання, в лабораторній роботі 6 використовується вільно розповсюджуване програмне забезпечення GIMP.

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

Лабораторна робота 1
Вивчення можливостей сервісу Google Docs

Мета: одержати практичні навички у використанні сервісу Google Docs.

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

З розвитком мережі Інтернет з'являється можливість створювати своєрідний Інтернет-офіс, де можна зберігати, створювати і редагувати документи, таблиці, презентації. В даний час в Інтернеті існує більше 100 сайтів, що надають сервіси Офіс 2.0. За допомогою таких сервісів можна користуватися більшістю основних функцій компонентів Microsoft Office - Word, Excel, PowerPoint та інших, причому з можливістю редагування документа одночасно кількома користувачами. Наприклад http://docs.google.com/ (Документи Google - україномовний інтерфейс. Текстові документи, електронні таблиці, презентації).

Даний сервіс дозволяє:

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

− систематизувати документи за допомогою папок в сховище документів Google;

− експортувати створені файли на Ваш комп'ютер;

− завантажувати вже готові файли з Вашого комп'ютера і розміщувати їх в сховище документів Google;

− опублікувати документ у вигляді веб-сторінки або розмістити в своєму блозі;

− надавати доступ до редагування або перегляду своїх документів іншим користувачам;

− в режимі реального часу редагувати документ одночасно кільком людям;

− спільно переглядати презентації;

− обмінюватися важливими документами, таблицями та презентаціями між співробітниками компанії або колективу.

Для роботи з будь-яким з соціальних сервісів web 2.0 необхідно реєстрація користувача. Якщо Ви вже маєте свій акаунт в електронній пошті Gmail, то вам не потрібна додаткова реєстрація для сервісу Google Диск. Щоб почати роботу в цьому сервісі, вам необхідно увійти в свій gmail і перейти по посиланню Диск, яке розташоване в лівому верхньому кутку.

Якщо Ви не маєте поштової скриньки..... @ gmail.com, то Вам потрібно її створити на сторінці https://drive.google.com.

Одна з особливостей Google Диск полягає в тому, що ця служба дає можливість декільком користувачам, що знаходяться в різних місцях, одночасно працювати над одним і тим же проектом. Саме це мають на увазі під «спільною роботою».

Якщо Ви є творцем документа, а значить, його власником, Ви можете:

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

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

Людина, яку ви запрошуєте редагувати ваш документ, стає співавтором. Співавтор може:

• редагувати документи, таблиці та презентації;

• запрошувати або видаляти інших співавторів і читачів (якщо власник дав їм дозвіл на ці дії).

• експортувати копію документа, таблиці або презентації на свій жорсткий диск.

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

Надання спільного доступу до створеного вами і завантаженого в сховище документу відбувається за допомогою посилання Зробити загальним (Надати доступ). У меню, Налаштування спільного доступу можна додати користувачів, перерахувавши в спеціальне поле адреси електронної пошти або змінити доступ.

Якщо ви хочете показати документ, створений за допомогою Google Диск або завантажений в його сховище, відразу багатьом людям, опублікуйте його в Інтернеті. Щоб опублікувати ваш документ, необхідно в меню Зробити загальним (Надати доступ) вибрати пункт Змінити.

У діалоговому вікні, виберіть один з пунктів: загальнодоступних в Інтернеті або Користувачам, у яких є посилання. Зверніть увагу на те, що надаючи доступ таким чином Ви можете або всім дати можливість редагування документа, або всім надати можливість переглядати.

Анкетування. Зі зростанням популярності Інтернету все більш затребуваним способом збору даних стає онлайн анкетування. З'явилася величезна кількість сайтів, що дозволяють швидко і якісно створити онлайн-опитувальники. Відмінність одного сервісу від іншого в якості управління, доступних форматах представлення даних (питань), способах управління, оформленні та опрацьованості етичних складових опитувальника.

Cервіс Google дозволяє створювати, публікувати та обробляти анкети для опитувань. Анкету в даному сервісі називають ФОРМОЮ. Створити форму можна зі Списку документів або з будь-якої таблиці. Створення форми зі Списку документів:

1. Відкрийте Google Диск (через акаунт або Електронну пошту)

2. Натисніть Створити ® Форма.

3. Відкриється шаблон форми.

4. У шаблоні замість слів Форма без назви впишіть назву анкети, нижче розмістіть загальну інформацію про анкету або невелику інструкцію по її заповненню.

5.. У полі Назва питання впишіть саме питання.

6. Поле Текст довідки є необов'язковим, але воно може містити інструкцію по відповіді на Ваше питання. Наприклад, до питання «ПІБ» може бути інструкція «Вкажіть прізвище, а також без скорочень ім'я та по батькові. Наприклад, Іванов Іван Іванович.»

7. Далі виберемо тип питання:

• текст - створить невелике текстове поле, в яке респондент буде вписувати коротку відповідь;

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

• множинний вибір - створює запитання з можливістю вибору одного варіанта з декількох;

• прапорці - питання з можливістю вибору декількох варіантів із запропонованих;

• вибір із списку - створить список, що розкривається, з якого респондент може вибрати тільки один варіант відповіді;

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

• сітка - та ж шкала, але тільки у вигляді таблиці, тобто є можливість оцінювання за кількома параметрами.

8. Перш ніж натиснути кнопку Готово, подумайте, чи потрібно зробити це запитання обов'язковим? Якщо так, то поставте відповідний прапорець поруч із кнопкою Готово.

9. У правому верхньому куті кожного питання знаходяться 3 кнопки, які дозволяють: редагувати питання, створити його копію і видалити запитання.

10. Додати нові питання можна командою Додати елемент у верхній частині екрана.

11. Ви можете також змінити дизайн Вашої анкети за допомогою кнопки Тема. Після вибору підходящого фону не забудьте натиснути на кнопку Застосувати у верхній частині вікна.

12. Коли анкета буде повністю готова, Вам необхідно відправити її респондентам. Це можна зробити двома способами:

a. натисніть Відправити цю форму електронною поштою і вкажіть адреси електронної пошти користувачів, яким потрібно відправити дану форму;

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

13. Усі відповіді учасників анкетування будуть автоматично вставлені в таблицю, яка доступна з Документів Google.

14. Для редагування опитування, необхідно на своїй сторінці документів Google знайти його назву і перейти по посиланню в створену вами анкету.

15. Тут же можна опублікувати анкету, якщо ви не зробили цього раніше. Для цього натисніть кнопку "Додати в загальні" далі "Отримати посилання для спільного доступу"

16. Щоб відредагувати запитання анкети натисніть кнопку «Форма» → «Редагувати форму». Далі ви можете змінювати питання, редагувати їх або копіювати.

17. У цьому ж режимі можна переглянути відповідь, натиснувши, відповідно, кнопку Показати зведення звітів. Тут відповіді будуть представлені в числовій формі, процентному співвідношенні і у вигляді діаграм. Доступною для читання іншим користувачам можна зробити тільки таблицю з відповідями.

Також передбачена можливість:

• Імпортувати та експортувати дані у форматі XLS, CSV, TXT і ODS (і експортувати у форматі PDF і HTML).

• Використовувати інтуїтивно зрозумілу навігацію і редагування, як в будь-якому звичайному документі або таблиці.

• Використовувати форматування і редактор формул в таблицях, щоб підраховувати результати і налаштовувати вигляд даних.

1.2 Хід роботи

1. Якщо Ви не маєте поштової скриньки на Google, зареєструйте її. Поштова адреса та пароль до скриньки будуть Вашим акаунтом для доступу до всіх служб Google, що потрібно Вам для виконання подальших завдань та практичного використання сервісів Google. Повідомте листом з створеної скриньки на поштову скриньку викладача про її створення.

2. Ознайомтесь з можливостями Google Docs. Створіть в Google Docs текстовий документ, де стисло (1 сторінка) охарактеризуйте можливості сервісу (для вивчення використайте довідкову систему програми). Вкажіть наявні (на Вашу думку) переваги і недоліки цих продуктів у порівнянні з офісними програмами, встановленими на комп'ютерах.

3. Студенту, першому по списку, створити в Google Docs таблицю, заповніть її інформацією про себе (прізвище, ім’я, по-батькові, електронна адреса, і т.д.). Надайте доступ до редагування створеної таблиці іншим студентам групи. Кожен студент повинен власноручно внести дані про себе.

4. Представте в Календарі Google Ваш розклад (навчальний та інших справ) на наступний тиждень.

5. За допомогою сервісу Google Docs створіть анкету для студентів своєї групи, що містить не менше п'яти питань.

6. Виберіть 2 анкети колег і заповніть їх.

7. Експортуйте таблицю, що містить результати анкетування (відповіді Ваших колег), на Ваш комп'ютер у форматі Excel або PDF. Це можна зробити за допомогою команди: Файл - Завантажити як - Excel або PDF. Завантажений файл прикріпіть до повідомлення - звіту по лабораторній роботі.

8. Відкрийте викладачу спільний доступ до всіх створеним файлів для перевірки та обговорення. Файли іменуйте за своїми прізвищем з вказуванням номера завдання.

1.3 Звіт

Повинен містити скріни створених документів, заповненого календаря, анкети, таблиці з результатами анкетування та пояснення щодо прав доступу до відповідних документів.

Контрольні питання

1. Які можливості надає сервіс Google?

2. Для чого використовується даний сервіс?

3. Які ще сервіси 2.0 Ви знаєте?

4. Охарактеризуйте спосіб створення анкети в Google Диск.

Лабораторна робота 2
Створення простого HTML - документу. Використання тегів форматування тексту. Використання списків

Мета:

o Одержати практичні навички в написанні найпростішого документа HTML. Закріпити знання про основну структуру документа. Створити простий HTML -документ із використанням найпростіших тегів. Перевірити на практиці інформацію про взаємодію і сумісність тегів і різноманітних броузерів.

o Вивчити на практиці принципи застосування тегів форматування тексту. Створити документ HTML, що містить текстовий фрагмент, у якому використовуються основні теги форматування тексту.

o Вивчити на практиці специфіку використання тегів списків, навчитися застосовувати нумеровані і ненумеровані списки в документах HTML. Закріпити отримані раніше знання по створенню найпростіших документів.

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

Обов'язкова структура документа

Кожний HTML-документ починається з конструкції <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">, яка є обов’язковою, для того, щоб будь-який браузер розумів, що має справу з HTML-документом певної специфікації (4.0) і певною мовою (EN) тегу <HTML> і закінчується </HTML>. У HTML файлі перед вмістом обов'язково повинний бути розділ HEAD, що мінімально може складатися з двох конструкцій, а також - <BODY> і </BODY>.. Тоді код HTML можна представити так:

Приклад hello.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE> Hello </TITLE>

</HEAD>

<BODY>

Hello world

</BODY>

</HTML>

Тобто, за винятком першого рядка, весь файл є HTML елемент, що містить HEAD елемент (що включає TITLE елемент) і BODY елемент, із простим текстом у якості вмісту.

Кожний HTML документ повинний містити основну інформацію про його походження, а саме:

♦ Автор документа,

♦ Дата створення документа або його останньої модифікації

♦ Контекст документа і його статус

♦ Адреса (URL) документа.

Такий приклад подає один із засобів заповнення такої інформації.

Приклад:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<TITLE>A sample HTML document</TITLE>

<LINK REV="made" HREF="mailto:[e-mail]">

</HEAD>

<BODY>

<H1>A sample HTML document</Hl>

This is a sample HTML document exemplifying a suggested

way of presenting basic origin information. <HRXP>

<A HREF="http://www.hut.fi/~jkorpela/">Jukka

Korpela</A>,

<a href="mailto:[e-mail]">

[e-mail]</a>

<BR>

This document belongs to the context of <a

href="index.html">Learning HTML 3.2 by

../../examples</a>

<BR> The URL for this document is

<KBD> http://www.hut.fi/~jkorpela/HTML3.2/skel.html

</KBD> <BR>

Created: December 5, 1996

</BODY>

</HTML>

2.2 Хід роботи

1. Створити на ПК папку із своїм прізвищем, в яку зберігатимуться результати подальшої вашої роботи.

2. Створити прототип документа (avtobiogr.html), що у наступних роботах буде використовуватися для створення сторінок особистого сайту.

3. Наповнити сторінку своєю автобіографією.

4. Зберегти роботу на носій інформації.

5. Продовжити створення особистого сайту, що містить інформацію про Вас: опишіть ваші уподобання, інтереси, хоббі, цікаві речі з вашого життя.

6. Оформіть естетично сторінку і власне текст.

7. Збережіть інформацію у документі під назвою hobby.html.

8. Продовжити створення особистого сайту. Включити в нього сторінку, що містить нумеровані і ненумеровані списки (наприклад, перелік улюблених фільмів, книжок, музичних гуртів тощо).

9. Зберегти документ під назвою spisok.html.

Вимоги

1. У розділі HEAD описати заголовок вікна сторінки.

2. У розділі BODY задати вивід на екран інформації про автора сторінки і зазначити зразкову тематику сторінок сайту.

3. Обов'язково зазначити колір тла сторінки і колір тексту.

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

5. Використовувати в документі теги HEAD, TITLE i BODY.

6. Застосувати теги виділення тексту <B>,<I>,<U>, a також теги різноманітних модифікацій тексту.

7. Використовувати теги FONT і BASEFONT, а також їхні атрибути.

8. Створення сторінки повинно бути естетично оформлено.

9. Використовувати теги <UL> i <OL> для створення відповідних списків.

10. Документ повинний містити маркований список. Визначте вид маркера.

11. Документ повинний містити список з нумерацією. Визначте тип нумерації (числова, латинські букви, римські цифри).

2.4 Звіт

Повинен містити вихідний текст HTML-коду.

Контрольні питання

1. Що таке HTML? Чому саме він використовується в Internet?

2. Що таке теги HTML? Як вони оформляються? Атрибути тегів.

3. Як класифікуються теги HTML?

4. У яких випадках використовуються ESC-послідовності? Особливості їхній використання.

5. Як у HTML-документах використовуються коментар?

6. Які особливості використання прогалин і символів табуляції в HTML-документах? Що необхідно для оформлення окремих абзаців тексту?

7. Опишіть обов'язкову структуру HTML-документа.

8. Опишіть призначення й основні елементи розділу HEAD.

9. Опишіть призначення розділу BODY.

10. Як задається колір тла і колір тексту в HTML-документах?

11. Опишіть специфікацію кольорів у HTML-документах.

12. Як здійснюється центрування тексту і графіки?

13. Який тег є тегом абзаца?

14. Які теги використовуються для виділення тексту?

15. Функції тега <HR>.

16. Якими можливостями володіє тег FONT? Перерахуєте його атрибути.

17. Перерахуєте особливості тега BASEFONT.

18. Навіщо використовуються списки?

19. Які види списків ви знаєте?

20. Перелічите теги для нумерованих списків.

21. Перелічите теги для ненумерованих списків.

22. Перелічите атрибути тегів <UL>,<OL>.

23. Що таке маркери, які їхні види Ви знаєте?

24. Які існують варіанти нумерації в нумерованих списках?

Лабораторна робота 3
Створення документів із таблицями. Використання таблиць для форматування і розміщення елементів. Активні зображення

Мета:

o Закріпити на практиці знання і навички по створенню таблиць. Вивчити основні засоби опису таблиць, їхнє застосування і використання в HTML-документах.

o Вивчити на практику інші можливості, пов'язані з використанням таблиць. Навчитися застосовувати табличні теги в інших випадках: для розташування малюнків, створення гіперпосилання в осередках таблиць і ін. Закріпити отримані раніше знання по використанню табличних тегів у HTML-документах.

o Вивчити на практиці засоби створення активних зображень. Навчитися створювати й описувати активну карту за допомогою стандартних тегів мови HTML.

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

Для опису таблиць служить тег <TABLE>. Teг <TABLE>, як і багато інших, автоматично перекладає рядок до і після таблиці. Розмір таблиці для відображення вмісту звичайно встановлюється браузером автоматично, проте можна встановити ширину таблиці, використовуючи атрибут WIDTH.

---

Дата добавления: 2015-07-10