Технологія сайтобудування в інформаційній сфері (стр. 3 )

7. Навести приклади використання параметра id.

8. Яке призначення контейнера <span>?

9. Назвати псевдокласи дескриптора <а> та їхнє призначення?

10. Які властивості у CSS використовуються для визначення шрифту?

11. Які властивості у CSS використовуються для роботи з кольором?

12. Які властивості у CSS використовуються для встановлення полів?

13. Назвати властивості, що використовуються у CSS для форматування списків.

14. Назвати властивості, що використовуються у CSS для форматування меж сторінки.

15. Для чого використовуються HTML-форми?

16. Як створюються HTML-форми?

17. Як створюються елементи управління у формах?

Завдання для самостійної роботи

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

Підготувати презентації: “Форми” та “Форматування Web-сторінок з використанням каскадних таблиць стилів”.

Практичні завдання

1. Створити зв'язану CSS, яка б містила значення таких властивостей:

– значення полів;

– товщину рамки для зображень.

Передбачити у цій таблиці стилів для значень полів використання селектора class.

2. Використати вбудований у дескриптор <h2> стиль.

Тема 5. Введення в JavaScript

1. Призначення мови JavaScript.

2. Історія створення JavaScript.

3. Основи мови JavaScript.

4. Типи даних у JavaScript.

5. Оператори, константи, цикли.

6. Масиви.

Література: 7, 9, 10, 14, 17

Практична робота №7

Комп'ютерне моделювання засобами мови JavaScript. При встановленому Web-сервері та налаштованих РНР та MySQL реалізувати розглянуті в тексті приклади. Проаналізувати одержані результати.

Практична робота №8

Моделювання з використанням форм мовою JavaScript.

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

1. Яке призначення мови JavaScript?

2. Що називають об'єктом, методами та властивостями об'єкта?

3. Що називається класом?

4. Які ви знаєте способи використання скриптів у HTML-документі?

5. Назвіть типи даних JavaScript.

6. Що називають виразом?

7. Назвіть арифметичні оператори JavaScript.

8. Які ви знаєте логічні оператори та оператори порівняння?

9. Що називають функцією?

10. Який формат запису умовного оператора?

11. Який формат запису оператора вибору?

12. Який формат запису операторів циклу?

13. Назвіть ієрархію об'єктів JavaScript.

14. Які ви знаєте властивості та методи об'єкта document?

15. Яким чином створюються та використовуються масиви?

16. Як звернутися у скрипті до конкретного об'єкта, що міститься у HTML-документі?

17. Назвіть події, що можуть бути опрацьовані у скрипті.

Завдання для самостійної роботи

Проаналізувати текстовий та ілюстрований матеріал, що був пред-ставлений у слайд-шоу на лекції. Підготувати презентації: “Основи мови JavaScript. Типи даних JavaScript.”

Практичні завдання

1. Створити меню, що дозволяє перейти на довільну сторінку сайта.

2. Створити функцію, що дозволяє перевести грошову суму в інші одиниці (гривні в євро і – навпаки), якщо у текстових рядках буде вводитися відповідна сума та курс на даний момент.

3. Створити графічне меню, у якому реалізовано функцію зміни зображення при наведенні на нього вказівника миші.

4. Створити рухомий рядок у текстовому полі.

5. Створити функцію, що при виникненні певної події змінює колір фону активної сторінки.

6. У рядку статусу відобразити поточну дату.

7. Створити функцію, яку при виникненні певної події відобразить діалогове вікно, у якому можна буде підтвердити або відмінити дію.

8. Створити функцію, яка при виникненні певної події змінить колір усіх гіперпосилань у документі.

МЕТОДИЧНІ ПОРАДИ ДО ПРАКТИЧНИХ ЗАНЯТЬ

Практичне заняття № 1

Ознайомлення зі структурою Інтернету, методами

передавання інформації в Інтернеті

Мета заняття – ознайомити студентів з мережею Інтернет, всесвітньою павутиною, опрацювати вміння щодо використання програмного забезпечення, призначеного для роботи в Інтернеті.

Основні теоретичні положення

Інтернет – метамережа, яка складається з багатьох мереж, що працюють згідно з протоколами родини TCP/IP, об'єднані за допомогою шлюзів та використовують єдиний адресний простір і простір імен.

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

Протоколи можна умовно віднести до певних рівнів OSI (Open Source Interconnection, міжнародний стандарт взаємодії відкритих систем): протоколи фізичного рівня, канального рівня, мережного рівня, транспортного рівня та прикладного рівня, який об'єднує сеансовий рівень, рівень відображення і прикладний рівень OSI. Стек протоколів TCP/IP – це низка мережних протоколів, на яких базується Інтернет. Протокол IP (Internet Protocol) – це протокол мережного рівня, який відповідає за передавання пакета від одного вузла до іншого. Протокол TCP (Transmission Control Protocol) – один з основних мережних протоколів Інтернету, призначений для управління передачею даних у мережах і підмережах TCP/IP. Протокол HTTP (Hypertext Transfer Protocol) – мережний протокол прикладного рівня для передавання файлів. Основним призначенням протоколу є передавання Web-сторінок та пов'язаних із ними об'єктів (зображення, звук тощо). Протокол FTP (File Transfer Protocol) – мережний протокол, призначений для передавання файлів у комп'ютерних мережах. Протокол РОРЗ (Post Office Protocol Version 3) – мережний протокол прикладного рівня, який використовується поштовою програмою для отримання електронної пошти з сервера. Протокол SMTP (Simple Mail Transfer Protocol) – мережний протокол прикладного рівня, призначений для відправлення електронної пошти у мережах TCP/IP.

MUA (Mail User Agent), клієнт електронної пошти – програмне забезпечення, яке встановлюється на комп'ютері користувача, призначене для отримання, написання, відправлення та зберігання пові-домлень електронної пошти.

Всесвітня павутина (World Wide Web, WWW) – глобальний інформаційний простір, який базується на фізичній структурі Інтернету й протоколі передавання даних HTTP. Для ідентифікації ресурсів у Всесвітній павутині використовують технологію ідентифікації URI (Uniform Resource Identifier), а для визначення місцезнаходження ресурсу – локатори URL (Uniform Resource Locator). URL – стандартизований спосіб запису адреси ресурсу в мережі Інтернет, який сполучає технологію URI та систему доменних імен DNS.

Всесвітня павутина стоїть на "трьох китах": HTTP, HTML та URL. HTML (Hypertext Markup Language) – мова розмітки гипертексту; формат документів, який використовується у WWW для представлення інформації. Гіпертекст – розмічений текст, що містить у собі посилання на внутрішні та зовнішні ресурси. Гіперпосилання – текст, зображення і т. п., який вказує на місцезнаходження документа джерела.

Web-сторінка – гіпертекстовий ресурс WWW, звичайно містить посилання для швидкого переходу на інші сторінки. Програма, яка демонструє Web-сторінку, називається Web-браузер. Декілька Web-сторінок, об'єднаних спільною темою й дизайном та пов'язаних між собою посиланнями, і, звичайно, розташованих на одному сервері, утворюють Web-сайт.

Браузер – це програмне забезпечення для запиту Web-сторінок з мережі, їх обробки, виведення, та переходу від однієї сторінки до іншої. Для пошуку в Інтернеті варто користуватись серверами глобального пошуку й каталогами.

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

Електронна пошта – спосіб передавання інформації у комп'ютерних мережах.

Поштовий сервер (МТА, Mail Transfer Agent) – комп'ютерна програма, яка передає повідомлення від одного комп'ютера до іншого. Покрокове проходження електронної пошти від відправника до одержувача наведене на рис. 1.

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

Створення листа. З'єднання поштового клієнта з SMTP-сервером. Передавання SMTP-серверу інформації про те, кому призначена пошта і хто є одержувачем. Перевірка SMTP-сервером правильності даних про одержувача й відправника та прийняття листа. Введення листа в чергу доставки. DNS – запит про поштові сервери для домену одержувача. Спроба з'єднання з поштовими серверами. Передавання листа у випадку успішного з'єднання; відкладення пересилання, якщо спроба невдала. Приймання поштовим сервером домену одержувача; передача його модулю, який зберігає й видає листи одержувачам. З'єднання одержувача з РОРЗ-сервером (ІМАР-сервером), перевірка одержувача й отримання листа.

Хід заняття

1. Ознайомитись з темою та метою заняття, вивчити основні теоретичні положення.

2. Отримати у викладача індивідуальне завдання за своїм варіантом.

3. Ознайомитись з графічним інтерфейсом користувача програмного забезпечення: браузера та клієнта електронної пошти.

4. Розглянути та занотувати приклади Web-сайтів: Web-форуму (Web-конференції), блогу, вікі, порталу, каталогу тощо.

5. Розглянути та занотувати можливості пошукової служби MS Internet Explorer(Live Search), пошукових систем.

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

1. Інтернет. Принципи роботи Інтернету.

2. Поняття протоколу. Які вам відомі протоколи?

3. Всесвітня павутина. Поняття Web-сторінка, Web-сайт, Web-форум, портал.

4. Призначення браузерів. Пошук в Інтернеті.

5. Електронна пошта. Поштовий клієнт Microsoft Outlook.

Практичне заняття № 2

Мова розмітки гіпертексту – HTML документів. Поняття тегу

Мета заняття – набуття навичок у створенні простих HTML-документів.

Основні теоретичні положення

Три основних компоненти мови HTML – це дескриптори, атрибути та значення.

Дескриптор – це елемент HTML, що визначає зміст документа. Усі стандартні дескриптори знаходяться між символами "менше" (<) і "більше" (>), наприклад: <HTML>. В основному дескриптори складаються з компонентів, що відкриваються і закриваються. Перед дескриптором компоненту, що закривається, додається пряма коса риска (/): </HTML>. Це означає, що більшість стандартних дескрип-торів, після того як їх відкрили, в певному місці коду необхідно закрити.

Атрибут визначає властивість дескриптора. Атрибути повинні знаходитись лише в компоненті дескриптора, що відкривається. У дескрипторі може бути декілька атрибутів, а може не бути жодного. Атрибут розташовується після дескриптора і пробілу з вказуванням значення атрибута.

Значення є невід'ємною частиною атрибутів, вони визначають сам дескриптор. Задаючи якісні та кількісні показники, значення уточнюють спосіб відображення змісту документа. Спеціальні символи використовують для створення стандартних чи спеціальних символів і букв. Знак & означає початок спеціального символу, а крапка з комою (;) – його кінець, наприклад &nbsp; – це нерозривний пробіл, a &sect; – знак параграфа.

Документ HTML позначений дескрипторами <HTML> і </HTML> містить заголовок – <HEAD></HEAD> і тіло – <BODY></BODY>. Загальна схема коду документа HTML:

<HTML> <HEAD>

службові дескриптори </HEAD> <BODY>