Запитання до захисту практичної роботи:
1. Що таке телеконференція?
2. Що таке форум?
3. Що таке чат?
Які з названих серверів Internet ви знаєте? Назвіть адреси.

Практична робота № 3
Тема. Пошук інформації в Інтернет.
Мета. Навчитися виконувати пошук потрібної інформації в мережі Internet.
Обладнання: IBM PC, інструкція.
!!! Виконуючи роботу, необхідно дотримуватись правил техніки безпеки та протипожежної безпеки !!!

Розглянемо детальніше технологію роботи з мережею.
Перш за все є 3 основні методи роботи з мережею. Так як мережа складається з набору серверів, на яких розміщено Веб – сторінки, то й кожна така сторінка має свою власну адресу.
1. Перехід за відомою адресою. Розглянемо перехід за однією з відомих адрес. Для цього запустимо браузер Internet Explorer і в стрічці АДРЕС наберемо таке: www.1plus1.tv після після чого обов’язково потрібно натиснути кнопку Enter. Після цього, якщо комп’ютер уже під’єднаний до мережі Internet, то почне завантажуватися вибрана сторінка. Якщо ж даний комп’ютер підключається до мережі за допомогою модема, то потрібно його (модем) ввімкнути, а з папки «Удаленное соединение» (папка «Мой компьютер») запустити іконку налаштованого з’єднання. При потребі можна ввести лон та пароль для доступу до сервера мережі.
2. Перехід за посиланням. Взагалі, посилання в широкому смислі слова може бути будь-кий об’єкт, що знаходиться у вікні браузера. Визначити його можна так:
1. Це напис синього кольору, підкреслений такою самою синьою лінією.
2. Це малюнок (кнопка з написом), обведений пунктирною лінією.
Але найнадійнішим способом є зміна вигляду курсора миші із стрілки на «указуючи руку».
Отож, знайшовши потрібне посилання, користувач може клацнути на ньому лівою кнопкою миші або відкрити посилання в новому вікні, клацнути на ньому правою кнопкою миші і вибрати команду «Открыть в новому вікні.
3. Перехід за багером. На «Веб – сторінках» часто можна бачити невеликі прямокутники із рекламою певних інформаційних ресурсів. Вони називаються банерами і призначені для реклами. Часто вони бувають анімаційними. Для того, щоб перейти по банеру можна використати техніку описану в попередньому пункті.

Пошукові сервери.
Серед усіх існуючи ресурсів у мережі потрібно особливо виділити пошукові сервери. Це спеціальні машини в мережі, які дозволяють нам шукати необхідну інформацію. Насправді вони шукають адресу сторінки, на якій з певною достовірністю присутнє шукане слово, або фраза. Серед пошукових ресурсів варто зазначити такі:
Російські: www.rambler.ru. www.aport.ru
Українські: www.meta-ukraine.com. www.search.kiev.ua
Технологія пошуку інформації в глобальній мережі доволі проста. Після загрузки пошукового ресурсу на екрані з’явиться рядок пошуку, до якого потрібно ввести слово, що означає поняття, яке нам потрібно шукати. Після цього потрібно натиснути кнопку Enter або клацнути лівою кнопкою миші на кнопці «Пошук» («Поиск») поряд із пошуковим рядком. Після цього пошукова машина видасть вам на екран список посилань на ресурси, що містять шукане слово. Часто буває так, що при першому пошуку машина знайде кілька тисяч серверів і кілька десятків тисяч документів. Зрозуміло, що таку кількість документів переглянути за достатньо короткий термін не можливо. Тому можна скористатися методом покрокового наближення. Для цього спочатку в рядок пошуку вводиться слово, що означає цілий клас понять. Після того, як пошукова машина знайде певні ресурси, потрібно клацнути лівою кнопкою миші на віконечку «В найденому» і ввести нове поняття, яке є підмножиною множини знайдених понять. 2 останні операції потрібно повторювати до тих пір, доки на вікні браузера не відобразиться 5-10 посилань. Їх можна переглянути за доволі короткий термін часу і вибрати із всіх знайдених ресурсів потрібні.
Крім того, потрібно пам’ятати, що великі і малі літери не мають значення.
Виконаємо побудову пошукової послідовності слів залежно від поставленої задачі.
Задача: Я хочу купити трактор Т-150.
Послідовність дій: ввести в пошуковій рядок слово «техніка», дочекатись кінця загрузки, поставити галочку « в найденом », ввести слово «трактор», дочекатись кінця загрузки, поставити галочку « в найденом », ввести слово « Т-150 », дочекатись кінця загрузки, поставити галочку « в найденом », ввести слово « продам ».
В результаті на екрані повинно з’явитись 5-10 посилань на сервери або Веб-сторінки, які можна зручно відкрити в нових вікнах і переглянути по мірі загрузки.
Порядок виконання роботи:
1. Ввімкнути комп’ютер.
2. Завантажити браузер Internet Explorer.
3. Перейти за відомою адресою www.rambler.ru . Дочекатись завантаження сторінки.
4. Створити пошукову послідовність для знаходження відповідності фрази « Куплю трактор Т-150 ».
5. Відкрити 2 із знайдених посилань у різних вікнах, користуючись контекстним меню посилань.
6. Побудувати пошукову послідовність для пошуку поточного курсу валют та погоди на наступний день.
7. Виконати пошук.
8. Записати висновки до зошита з практичних робіт.
9. Вимкнути комп’ютер.

Завдання до захисту практичної роботи
1. Які існують способи пошуку інформації в мережі Інтернет?
2. Які Ви знаєте пошукові системи?
3. Що таке гіпертекст, гіперпосилання?

Практична робота № 4
Тема. Створення Web-документів, що містять теги форматування символів, гіперпосилання та графіку.
Мета. Навчитись створювати Web-документи, форматувати текст, що вміщений до них, створювати гіперпосилання та поміщати до них графіку.
Обладнання: комп’ютери ІВМ РС, інструкція.

Теоретичні відомості
HTML – hypertext markup language - мова розмітки гіпертексту. Найбільш популярна зараз версія 4.0
Основними елементами HTML є теги(tags), за допомогою яких поводиться розмітка тексту. Вони служать для представлення атрибутів та інструкцій по форматуванню, які в браузерах перетворюються на готові фрагменти веб-сторінки, готової для перегляду користувачем.
Кожен тег має такий формат:
Вміст цього тега, де - відкриваючий тег, а - закриваючий.
Існують також теги, які можна використовувати без закриваючих тегів.
Щоб краще зрозуміти, як працюють теги, наведемо таку аналогію: якщо ми описуємо форму якогось предмета, то можемо сказати, що він круглої форми чи кубічної чи пірамідальної. Точно так ми можемо сказати, що якийсь елемент в документі знаходиться зліва чи справа чи по центру. Саме таке форматування відбувається за допомогою тегів.
HTML – документ має 3 основні області.
Найвищий порядок у документі має тег , для якого цей документ є підлеглим. Наступним по старшинству є області (заголовок) та (тіло документа).
Метатези починаються із ключового слова meta, їхні дії розрізняються за використаними атрибутами.
Атрибут name специфікує інформація про сторінку (самоназва документа).
Атрибут http-equiv – задає інформацію заголовка.
Атрибут content служить для опису атрибутів name та eqiuv.
Зрозуміло, що звичайна веб-сторінка не може обходитись без графічних зображень, як у області оформлення, так і в області фактичної інформації. Для веб-дизайну використовується 3 основні графічні формати: .gif, .jpeg, .png. Для вставки зображень використовують тег .
Шляхом до певного об’єкта будемо називати його точне місце розміщення. Існують такі типи шляхів: абсолютний, відносний, коре незалежний та документозалежний шляхи.
Зв’язок між двома об’єктами назвемо посиланням, застосувавши яке на першому об’єкті, ми можемо перейти до зв’язаного з ним, але не навпаки. Наприклад:
Головна сторінка
Розберемо це посилання. Тег - (anchor – якір) – містить в собі інформацію, куди користувач має перейти, натиснувши на це посилання. Атрибут href містить в собі точне місцезнаходження адреси посилання. Посилання повинно закінчуватись закриваючим тегом .
Ото ж на веб-сторінці, в результаті виконання даного рядка буде видно повідомлення «головна сторінка», при клікові на якому браузер відкриває файл main.html.
Тег можна використовувати для посилання на текстові, графічні відео та звукові файли, архіви, електронні поштові адреси та адреси сайтів, JavaScript-сценарії.
Для довідки дивись короткий словник тегів HTML, який розміщено нижче.

Завдання 1
Створити «каркас» Web-сторінки і встановити такі початкові параметри:
• Назва документа: Сторінка ХХХХХХХХХХ, де прізвище виконавця.
• Включити до заголовку такі метатеги:

• Встановити колір фону білий, а колір тексту – чорний.
• Записати створену сторінку під іменем Proba.htm на диск А:

Завдання 2
Набрати до документу такий текст та відформувати його за вказівками, поданими у ньому.
Цей текст вирівняний по лівому краю

Текст+4
Текст+3
Текст+2
Текст+1
Текст+0
Текст-1
Текст-2
Цей текст вирівняний по центру
Текст Н1
Текст Н2
Текст Н3
Текст Н4
Текст Н5
Текст Н6
Цей текст вирівняний по правому краю
Напівжирний текст
Похилий текст
Підкреслений текст
Додаткове завдання
Малий (тег small)
Нормальний текст
Великий текст (тег big)
Перекреслений
Перекреслений (теги Strike i S)
H SO AX +BX +CX+D=0
Щоб отримати вираз H О пишуть: H₂O
(теги Sup i Sub)

Завдання 3
Вставити до документа графічне зображення з іменем img.jpg. Встановити для нього вирівнювання по центру та розміри 100×100. Виявити недоліки зображення у браузері та записати висновки до зошита з практичних робіт.

Завдання 4
Змінити розмір зображення на пропорційне, зменшивши його пропорційно в 2 рази

Завдання 5
Створити ще однк порожню Web-сторінку з іменем proba1.htm.

Завдання 6
Встановити для графічного об’єкта img.jpg, що знаходиться в документі proba.htm. гіперпосилання, яке відкриває документ proba1.htm.

Завдання 7
Створити нижче графічного зображення посилання на такий E-mail: read@write.com.ua з надписом «Моя пошта»

Порядок виконання роботи:
1. Ввімкнути комп’ютер
2. Дочекатись повного завантаження Windows
3. Запустити редактор, в якому буде створюватись Web-документ.
4. Виконати завдання №1
5. Виконати завдання №2
6. Виконати завдання №3
7. Виконати завдання №4
8. Виконати завдання №5
9. Виконати завдання №6
10. Виконати завдання №7
11. Записати висновки до зошита з практичних робіт
12. Закрити всі відкриті вікна
13. Вимкнути комп’ютер

Домашнє завдання:
1. Підготуватись до практичної роботи №5. Тема. «Створення Web-документів, що містять теги оформлення списків та таблиць».
2. Переписати до зошита з практичних робіт інструкцію до роботи №5.
3. Повторити основні теги
4. Повторити створення списків і таблиць у HTML.

Запитання для захисту практичної роботи:
1. Що таке HTML?
2. Які теги, що входять до заголовку документа ви знаєте?
3. Що таке метатеги?
4. Які теги визначають тіло HTML документа?
5. Які теги використовуються для форматування тексту?
6. За допомогою яких тегів ми поміщаємо в документ графічне зображення?
7. Що таке гіперпосилання?
Зауваження до вчителя
1. Для виконання цієї роботи необхідно підготувати невелике за розмірои графічне зображення, зберегти його у форматі .jpg та переписати на диски учнів до початку виконання практичної роботи. Бажано більше за 100×100 та яке не є квадратом. Також сповістити розміри цього зображення у пік селях учням.
2. Виконання завдань, що описані в практичній роботі, можна спрощувати, виконуючи у текстовому редакторі WORD, після чого імпортувати у вигляді Web-сторінок або ускладнювати «голий» HTML-код у будь-якому текстовому редакторі, наприклад, у «Блокноті».

Короткий словник тегів HTML.

- посилання
Target=_blank – відкриває посилання в новому вікні.
Name=”anchorl” – ім’я закладки.
- визначає геометричні області усередині картки і посилання, зв’язані з кожною областю.
Shape=”rect”(circle, polyn – тип області(прямокутник, коло, багатокутник)
Cords=”x1,y1….”-координати. Кількість залежить від типу області
Alt=”опис” – описана підказка
Href=”Document.html” – посилання

- жирний текст

- великий текст

-обов’язковий тег
- задає колір тексту всього документу
- задає колір тла документа
- задає фонову картинку
- задає колір посилання
- задає колір активного (натиснутого) посилання
- задає колір відвіданого посилання
- визначає ширину верхніх і нижніх полів документа для ІЕ
- визначає ширину лівих і правих полів документа для ІЕ
- визначає ширину верхніх і нижніх полів документа для NN
- визначає ширину лівих і правих полів документа для NN

- перенос рядка (примусовий)
Clear=”all”(left, right) – завершення обтікання текстом об’єкта(картинки).

- сам по собі погоди не робить, завжди вживається з одним з параметрів, наведених нижче
текст - задає колір тексту обраної частини документа.
текст - задає розмір шрифту тексту (від -2 до +4)
текст- задає визначений шрифт у документі (можна прописати будь-який екзотичний шрифт)
- визначає фрейм і його властивості усередині frameset – глави
Marginheight=”0” – визначає ширину верхніх і нижніх полів фрейма.
Marginwidth=”0” – визначає ширину лівих і правих полів фрейма
Scrolling=”yes” (no, auto) – лінійка прокручування буде завжди (ніколи, якщо треба)
Name=”Window-1” – ім’я фрейму використовується для посилання на нього з інших документів(фреймів) за допомогою параметра тега target(target=”Ім’я_фрейму”)
- визначає фреймову структуру документа. Відкриває і закриває список фреймів – глави
Rows=”100,200,*”-визначає кількість і розміри горизонтальних фреймів(рядів).
Розміри задаються в пікселях чи у відсотках.
Cols=”10%,20%,70%” – визначає кількість і розміри вертикальних фреймів(колонок).
Розміри задаються у відсотках чи пік селях.
Border – визначає ширину рамок фреймів у пікселях.
- заголовок
- обов’язковий тег

- лінія

---

(center чи left)>

---

(ширина лінії у відсотках)

---

(товщина лінії)

---

(скасування об’ємності)

---

(колір лінії, тільки в ІЕ)
- обов’язковий тег
- виділяє текст курсивом
- малюнок
Border=”5” – рамка навколо картинки
Width=”500” – ширина картинки
Height=”100” – висота картинки
Vspace=”10” –відстань від картинки до тексту по вертикалі
Hspace=”30” –відстань від картинки до тексту по горизонталі
Alt = “опис” – опис картинки
Usemap =”#karta1” – посилання на карту
- навігаційні карти
Name=”karta1” – ім’я карти
- рядок, що біжить.
Height=”16” – висота рядка
Width=”250” – ширина рядка
Bgcolor=”#99ccff” – колір тла
Vspace=”10” –відстань від рядка, що біжить до тексту по вертикалі
Hspace=”20” –відстань від рядка, що біжить до тексту по горизонталі
Loop=”2” – скільки разів прокрутиться рядок
Direction=”Left” (right, up, down) – напрямок руху рядка – уліво(вправо, нагору, вниз)
Behavior=”Scroll” (slide, alternate) – поводження рядка – звичайне прокручування (прокручування із зупинкою, від краю до краю)
Scrollamount=”1” – швидкість руху рядка. Вона може приймати значення від 1 до 10 (1- найповільніший рух, 10- найшвидший)

-списки
Type=”disk” –повний кружок (за домовленістю)
Type=”circle” –порожній кружок
Type=”square” –квадратик

- нумерований список

- параграф

текст

центрування тексту

текст

вирівнювання по правому краю документа

текст

вирівнювання по лівому краю документа

вирівнювання тексту по обох краях документа.

- форматований текст
- перекреслений текст
- маленький текст
- перекреслений текст
- нижній індекс
– верхній індекс
- назва документа
- таблиці