Дисципліна:ІнформатикаЗаняттяТема:Основи веб-дизайну.Мета:ознайомити основними поняттями мови HTML, тег, гіперсилок, розглянути структуру веб-сайтів, призначенням та огляд середовища редактора сайтів, формувати студентів до аналізу та синтезу, виховувати важність, акуратність, логічно вмотивовану послідовність дій.Вид заняття:інтерактивналекція.Тип уроку: засвоєння нових знань.Базові поняття: мови HTML, тег, гіперсилки, веб-сайти, веб-сторінки.Методи: демонстрацій,доміно, експрес-опитування, мозковий штурм, робота в парах, акваріум, незакінчені речення «Я довідався, Я використав, Я навчився.., Я думаю».Форми роботи: індивідуальна робота, парна робота за комп’ютером, фронтальна.Дидактичні засоби:карточки, презентація.Обладнання:мультимедійний комплекс, презентація, картки з тестами.Література:1) О.Ю. Гаєвський, "Інформатика, 7-11" , Київ, "А.С.К." , 2005. Глава 14. Створення WEB-сторінок та WEB-сайтів, Ст.376-406. 2) В.Д.Руденко, О.М. Макарчук, М.О. Патланжоглу "Базовий курс інформатики", Книга 2. Інформаційні технології, 8-11. Київ, видавнича група BHV. Частина 3. Основи веб-дизайну.Ст.216-307. 3) Я.М.Глинський, "Інформатика, 10-11.Інформаційні технології". Львів, 2008, Розділ 5. Глобальна мережа Інтернет.§ 5-7.Ст.243-261.

……………………………Структура заняття ……………………….………

І. Організаційна частина заняття. …………………….…..….…………..1-2 хв.ІІ. Актуалізація опорних знань.…………….…..….……………………3 хв.ІІІ. Мотивація навчальної діяльності студента……………….…..….……4 хв.ІV. Оголошення теми, мети, плану заняття.…………….….…………...1-2 хв.V. Вивчення нового матеріалу. …………………………..….……………45 хв.VІ. Осмислення знань …………..….…….….….………….……..….….…10 хв.VІІ. Узагальнення і систематизація знань. …..….…………………….....15 хв.VIІІ. Підведення підсумків заняття …………….….….….….…….….…...3 хв.ІХ. Домашнє завдання. . ………………………….….….….….……....……2 хв.

1

……………………………. Хід заняття ……………………………………….

І. Організаційна частина заняття. Привітання. Підготовка аудиторії до заняття. Перевірка студентів.

ІІ. Актуалізація опорних знань. Технологія «Експрес - опитування».

Дає можливість перевірити знання студентів попередньо-вивченого матеріалу.

Вправа «Запитання-Відповідь».1. Що ви знаєте про службу WWW?2. Для чого потрібна служба WWW?3. Що, по-вашому, необхідно для створення веб-сторінок?4. За допомогою чого можна створювати веб-сторінки.

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

рекламувати свої можливості широкій аудиторії? Просто бажаєте знайти нових друзів і заявити на весь світ про себе? Цікавитеся послугами з веб-дизайну та створення веб-сайтів? На заняттях під час вивчення цієї теми ви зробите свій перший крок до

створення сайту.

ІV. Оголошення теми, мети, плану заняття.Тема, яку ми починаємо вивчати, має назву «Основи веб-дизайну».

V. Вивчення нового матеріалу. Технологія «Демонстрація».

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

Що таке Інтернет?Інтернет – це глобальна мережа, яка об’єднує комп’ютерні мережі.InterNet:

2

inter – "між" net, network – "мережа"

Як виник Інтернет?1958 - Створення ARPA (Advanced Research Project Agency) в США.1960-ті- Проект комп’ютерної мережі ARPANet

• в мережі немає єдиного центру; • при підключення нової мережі не потрібно переробляти старої;• зв’язок між мережами через спеціальні вузли

– шлюзи;• пакетний обмін даними;

1968 - Перша мережа нового типу з 4-х комп’ютерів.1972 - В мережі – 50 університетів і лабораторій.1974 - Розробка протоколу обміну даними TCP/IP Перші служби:

• TelNet – віддалене керування комп’ютером в режимі командного рядка• FTP (File Transfer Protocol) – прийом і передача файлів• Електронна пошта (e-mail, electronic mail) – обмін повідомленнями

1982 - Європейська UNIX-мережа (до того – США, Канада, Англія)1983 - Мережа розділена на дві частини:

• MilNet – для воєнних цілей США• Internet – загальнодоступна мережа

1984 - Система доменних імен (DNS) (адреси виду www.mail.ru)1989 - В Інтернеті 100 000 комп’ютерів.1991 - Розробка WWW (WorldWideWeb) – Т. Бернес-Лі, обмін інформацією в вигляді гіпертексту1991- Росія підключилась до Інтернету.1994 - Перші Інтернет-магазини.2000 - Більше 20 млн. сайтів.

Технологія «Мозковий штурм»Колективне обговорення, пошук рішень шляхом вільного висловлювання думок цих учасників.

Можливості Інтернету (служби, сервіси) WWW (WorldWideWeb) – гіпертекстові документи

Гіпертекст – це текст, в якому слово або словосполучення може бути активним посиланням на інший документ

3

Гіпермедіа– документи з активними посиланнями, які містять текст, малюнки, звук, відео.

Електронна пошта (e-mail) FTP (обмін файлами) Форуми (групи новин, конференції, телеконференції) Підписка на новини Пошукові системи Чати (chat– базікання) Приватне спілкування в реальному часі ICQ (ISeekYou) – розмова 1-1, в групі, обмін файлами Інтернет-телефон Skype + колонки + мікрофон

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

обміну інформацією в комп’ютерній мережі. Протокол TCP/IP (1974) TCP (TransmissionControlProtocol) файл ділиться на пакети розміром не більше 1,5 Кб пакети передаються незалежно один від одного в місці призначення пакети збираються в один файл IP (Internet Protocol) визначає найкращий маршрут руху пакетів

HTTP (HyperText Transfer Protocol) – служба WWW FTP (File Transfer Protocol) – служба FTP SMTP (Simple Mail Transfer Protocol) – відправка повідомлень електронної

пошти POP3 (Post Office Protocol) – отримання повідомлень електронної пошти

(потрібен пароль)

WorldWideWeb дослівно ця назва перекладається як "Павутиння , шириною на весь світ", але її як правило називають Всесвітнім павутинням,

4

або Web - ситемою, або WWW.

Для пропозиції своїх ресурсів досить великій аудіторії користувачів мережа Web спирається на такі механізми:

- Єдина система найменувань, за якими ресурси можуть бути знайдені в мережі, основана на так званих адресах URL (UniformResourceLocator - уніфікований показник інформаційного ресурсу);

- Протокол для організації доступу до іменованих ресурсів за допомогою мережі, в якості якого виступає протокол НТТР (HyperTextTransferProtocol - протокол передачі гіпертекстових файлів);

- Доменні адреси. Домен– це група комп’ютерів, об’єднаних за деякою ознакою.

- Перетворення адресів. DNS(DomainNameService)– служба доменних імен, які перетворюють доменне ім’я в IP-адресу.запит сервера DNS для одержання IP-адреси сайту www.google.com

очікування відповіді запит Web-сторінки по отриманому IP-адресу: 66.102.9.47- Гіпертекст, який полегшує навігацію по ресурсах, для створення якого

використовується мова HTML (HyperTextMarkupLanguage - мова розмітки гіпертексту).

Розвиток WWW останнім часом значним чином здійснюється шляхом активного впровадження нових принципів та технологій, які отримали спільну назву Веб 2.0. Сам термін Веб 2.0 вперше з'явився в 2004 році та покликаний ілюструвати якісні зміни в WWW на 2-му десятилітті його існування. Веб 2.0 є логічним вдосконаленням Веб. Головною особливістю Веб 2.0 є покращення та пришвидшення взаємодії веб-сайтів з користувачами, що призвело до стрімкого зростання активності користувачів. Це проявилось у:

участі в Інтернет-спільнотах (зокрема, в форумах); розміщенні коментарів на сайтах; ведення персональних журналів (блогів); розміщення посилань у WWW.

5

Веб 2.0 запровадив активний обмін даними, зокрема: експорт новин між сайтами; активна агрегація інформації зі сайтів. використання API для відокремлення даних сайту від самого сайту

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

Мові HTML притаманні перелічені нижче характеристики: - Простота. Так як мова SGML(StandartGeneralizedMarkupLanguage -

стандартна узагальнена мова розмітки), на базі котрої була створена HTML, відрізнялася великою складністю. Частково велика швидкість розвитку Web була обумовлена простотою HTML, що дозволяло достатньо швидко створювати документи та розташовувати їх на серверах.

- Універсальність. HTML та мови, створені на його основі, можуть відібражатись практично на будь-якому комп'ютері, а також на багатьох спеціалізованих пристроях.

- Сумісність знизу. Розробляючи просту систему для використання в Internet, Бернерс-Лі усвідомлював, що з часом будуть здійснені спроби розширення мови HTML. Щоб забеспечити умови вільного росту системи, він сформулював наступне правило: "Нові версії мови не повинні суперечити його попереднім реалізаціям". У зв'язку з цим ріст WorldWideWeb не передбачав обов'язкові оновлення цієї системи. Нові версії HTML були лише розширеннями старих версій.

Мова HTML виникла в результаті тривалого процесу розвитку гіперстекстових інформаційних систем. Ідея цих систем була запропонована В.Бушем в пропозиції по створенню електормеханічної інформаційної системи Memex.

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

Тому термін "гіпертекст" можна визначити як нелінійний текст. Це досягається шляхом створення спеціального механізму для зв'язку з різноманітними сторінками тексту за допомогою гіпертектового посилання, тобто в звичайному тексті є "лінійні" посилання по типу "наступний-попередній", а у гіпертексті можна побудувати скільки завгодно інших посилань. Прикладами гіпертексту є енциклопедії, в яких текст кожної статті вміщує в собі посилання на інші статті, а ті, в свою чергу, на якісь

6

інші. Гіпертекстові системи являють собою дуже зручні засоби зберігання та

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

Посилання бувають статистичними, дінамічними, асоційованими,

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

Серед нововведень можна назвати такі, як: Інтернаціоналізація. Документи можливо було створювати на будь-

якій мові і легко передавати по всьому світові. Нині HTML надає підтримку різних мов в документі.

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

Складені документи. Пропонує стандартний механізм для внесення в документи зображення, відео, звука, математичних формул, спеціалізованих програмних доповнень та інших об'єктів.

Таблиці стилів. Таблиці стилів спрощують розмітку HTML-документів і дають як авторам, так і користувачам можливість керувати оформленням документів.

Сценарії. Використовуючи сценарії, автори мають можливість створювати "інтелектуальні Web-сторінки", які реагують на інформацію, що додає користувач, змінюючи вигляд і вміст HTML-документа. Сценарії дозволяють створювати динамічні сторінки, а також використовувати HTML як засіб для побудови мережевих додатків.

Веб-сторінка(англ. Web-page) — інформаційний ресурс, доступний у мережі WorldWideWeb, який можна переглянути у веб-браузері. Інформаціязаписана у форматі HTML або XHTML і може містити гіпертекст із навігаційними гіперпосиланнями на інші веб-сторінки.

Веб-сайт (англ. website, місце, майданчик в Інтернеті), також сайт (англ. site, місце, майданчик) — сукупність веб-сторінок, доступних в Інтернеті,

7

які об’єднані як за змістом, так і навігаційно. Фізично сайт може розміщуватися як на одному, так і на кількох серверах.

Прикладивеб-сторінок:

Як створити веб-сайт?Створення веб-сайту починається зі створення інформаційної моделі сайту. Будь-яку веб-сторінку можна оцінити за двома параметрами:

зміст , зовнішній вигляд.

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

Вибір структури визначається особливостями завдань, що розв’язують за допомогою веб-сайту. Етапи створення сайту

Створення сайту умовно можна поділити на такі етапи:

8

попередній етап розроблення сайту: на цьому етапі розв’язують питання загального характеру. Обговорюють загальну концепцію сайту, формулюють та фіксують цілі створення сайту;

етап проектування сайту визначення структури сайту: меню, посилання, розміщення модулів, побудова списку компонентів, що підключаються, тощо;

етап розроблення і тестування сайту; розміщення сайту; розвиток ресурсу.

Схеми структур сайтів: Стандартна. Основна веб-сторінка містить посилання на інші документи

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

Каскад. Відвідувачі сайту можуть переміщуватись тільки в одному з напрямків, вперед або назад.

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

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

9

Основою мови HTML є команди-дескриптори (теги), вказуючи правила форматування документа.

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

Теги: одиночні і парні. Структура html-файлу:<HTML><HEAD><TITLE>НазваWeb-сторінки</TITLE></HEAD><BODY>Зміст сторінки: текст, графіка, посилання,..</BODY></HTML>Для завдання заголовків використовуються парні теги <H1>, </h1> - заголовок 1-го, вищого рівня;<H2>, </h2> - заголовок 2-го рівня;<H3>, </h3> - заголовок 3-го рівня;<H4>, </h4> - заголовок 4-го рівня;<H5>, </h5> - заголовок 5-го рівня;<H6>, </h6> - заголовок 6-го рівня.

VІ. Осмислення знань. Нагадати привила техніки безпеки.

Технологія «Робота в парах»Робота в парах дає учням час подумати, обмінятися ідеями з партнером і лише потім озвучувати свої думки перед класом. Вона сприяє розвиткові навичок спілкування й вести дискусію.

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

Завдання 1.Запуститипрограму Блокнот.1. Ввести текст Структури HTML-файлу.2. Зберегти його під іменем familiya.html.

10

3. Закрити Блокнот.4. Запустити Internet Explorer.5. Ввійти ФайлОткрытьОбзор familiya.html6. Зберегти файл-копію (ФайлСохранитькак familiya1.html)7. У файліfamiliya1.htmlввести програму для роботи з заголовками:<HTML><HEAD><TITLE>Оформлення заголовків різних рівнів</TITLE></HEAD><BODY><H1>заголовок 1-го ,високогорівня</H1><H2> заголовок 2-го рівня</H2><H3>заголовок 3-го рівня</H3><H4>заголовок 4-го рівня</H4><H5>заголовок 5-го рівня</H5><H6>заголовок 6-го рівня</H6></BODY></HTML>Завантажитифайлfamiliya1.htmlвInternet Explorer.

VІІ. Узагальнення і систематизація знань.

Технологія«Доміно».Закінченні написані на аркушах. Необхідно дібрати правильні закінчення до цих фраз.

Вправа 1 « Закінчить фрази».HTML – це набор команд для розмітки документів,

визначаючих зовнішній вид документів на екрані комп’ютера при доступі до них з використанням програми-браузера.

HTML документ (Web-сторінки) –

це звичайний текстовий файл з розширенням .htm або .html, створений за допомогою мови HTML, і що містить інформацію для публікації в WWW.

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

11

Технологія «Акваріум».Єефективним для розвиткувміньдискутування в малихгрупах. Після того як викладач об'єднав студентів у три-чотири групи (4-6) і надав кожній із них завдання та необхідну інформацію. Обговорюють ситуацію у ході дискутування, приймається спільне рішення, або підсумовується дискусія. Відводиться 3-5 хв.

Вправа 2 «Схема структури сайтів».Пропонуємостудентамстворитисхеми структур сайтів. Студенти об’єднуються в чотиригрупи (роздаються картки з характеристиками структур сайту), кожна з якихстворює одну зі схем (стандартна, каскад, хмарочос, павутина) на аркушах та наводить прикладиможливих сфер використання, презентують створену схему.

Картка 1:СтандартнаОсновна веб-сторінка містить посилання на інші документи веб-сайту, а

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

Картка 2: КаскадУ цьому випадку посилання в документах задані таким чином, що існує

тільки один шлях обходу сторінок веб-сайту. За каскадного способу організації сторінок відвідувачі сайту можуть переміщуватись тільки в одному з напрямків, вперед або назад.

Картка 3:ХмарочосУ цій моделі відвідувачі можуть опинитися на деяких сторінках, тільки

якщо вони йдуть правильним шляхом. Це нагадує підйом до потрібної кімнати у великому хмарочосі.

Картка 4:ПавутинаУ цьому випадку всі сторінки веб-сайту містять посилання на інші

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

12

під контролю, але вона популярна у тих випадках, коли посиланнями на документи користуються не надто часто.

Очікувані результати:1. Стандартнийспосіброзділення веб-сайту

2. Каскаднийспосіборганізації веб-сайту

3. Схема, яка називається «Хмарочос»:

4. Структура «Павутина»:

VIІІ. Підведення підсумків заняття.Підводяться підсумки заняття та вивченого матеріалу.

Технологія «Незакінчені речення»Дає можливість ґрунтовніше працювати над формою висловлення власних ідей, порівнювати їх з іншими. Робота за такою методикою

13

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

Вправа «Незакінчені речення».Продовжитьречення своєю думкою.«Заняття важливе тому, що………..»«Я знаю……»«Я вмію……»«Мені сподобалось ……»«На цьому занятті для мене найважливіше відкриття було……»

ІХ. Домашнє завдання. 1. Опрацювати теоретичний матеріал :О.Ю. Гаєвський, "Інформатика, 7-11" , Київ, "А.С.К." , 2005. Глава 14. Створення WEB-сторінок та WEB-сайтів, Ст.376-406.

2.Виконати завдання.

Завдання 2.Створити Web-сторінкуfamiliya3.html наступного змісту:<HTML><HEAD><TITLE> Робота з шрифтами кольором</TITLE></HEAD><! - встановленнякольоруфонуі тексту сторінки -><BODY bgcolor="darkviolet" text= "white"><B>напівжирнимшрифтом</B>.<BR><I>курсивом</I>.<BR><U>підкреслений</U>.<BR><P><SUP>надстрічний</SUP>або<SUB>підстрічний</SUB>текст. <BR><STRIKE>перекреслений</STRIKE>. </P><FONT face=”Arial” size="45">Розмір шрифту можназадати за допомогою тега FONT. </FONT></BODY></HTML>

14

15

ДОДАТКИ

16

17

18

19

20

21

22

23

24

25

26

27

28

КАРТКИ:

Картка 1:СтандартнаОсновна веб-сторінка містить посилання на інші документи веб-сайту, а

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

Картка 2: КаскадУ цьому випадку посилання в документах задані таким чином, що існує

тільки один шлях обходу сторінок веб-сайту. За каскадного способу організації сторінок відвідувачі сайту можуть переміщуватись тільки в одному з напрямків, вперед або назад.

Картка 3:ХмарочосУ цій моделі відвідувачі можуть опинитися на деяких сторінках, тільки

якщо вони йдуть правильним шляхом. Це нагадує підйом до потрібної кімнати у великому хмарочосі.

29

Картка 4:ПавутинаУ цьому випадку всі сторінки веб-сайту містять посилання на інші

сторінки, і користувач може легко перейти з будь-якої сторінки практично на будь-яку іншу. Ця схема може перетворитися на лабіринт, якщо вийде з-під контролю, але вона популярна у тих випадках, коли посиланнями на документи користуються не надто часто.

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

Завдання 1.Запуститипрограму Блокнот.1. Ввести текст Структури HTML-файлу.2. Зберегти його під іменем familiya.html.3. Закрити Блокнот.4. Запустити Internet Explorer.5. Ввійти ФайлОткрытьОбзор familiya.html6. Зберегти файл-копію (ФайлСохранитькак familiya1.html)7. У файліfamiliya1.htmlввести програму для роботи з заголовками:

<HTML><HEAD><TITLE>Оформлення заголовків різних рівнів</TITLE></HEAD><BODY><H1>заголовок 1-го ,високогорівня</H1><H2> заголовок 2-го рівня</H2><H3>заголовок 3-го рівня</H3><H4>заголовок 4-го рівня</H4><H5>заголовок 5-го рівня</H5>

30

<H6>заголовок 6-го рівня</H6></BODY></HTML>Завантажитифайлfamiliya1.htmlвInternet Explorer.

HTML – це набор команд для розмітки документів,

визначаючих зовнішній вид документів на екрані

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

програми-браузера.

HTML – документ (Web-сторінки) –

це звичайний текстовий файл з розширенням .htm

або .html, створений за допомогою мови HTML, і що

містить інформацію для публікації в WWW.

Атрибут – це компонент тегу, що містить команду про те, як

браузер повинен зрозуміти і обробити тег.

31

Найбільш значною подією в історії Internet стала розробка служби WorldWideWeb (скорочено WWW). Автори WWW – дослідники Європейської лабораторії фізики елементарних частинок (EuropeanParticlePhysicsLaboratory, GERN) у Женеві, фізики Тім Бернерс-Лі та Роберт Кайо. Вчені вирішили створити таку систему, котра дозволила б усім фізикам Європи обмінюватися через Internet результатами досліджень у вигляді ілюстрованого тексту, що включає зсилання на інші публікації. Зараз WWW є службою Internet, що найбільш динамічно розвивається. Цей формат дозволяє розміщувати в одному документі текстову, графічну, аудіо- та відеоінформацію.

В 1989 році Тім Бернерс - Лі із Женевської лабораторії практичної фізики (GERN) запропонував систему, що базується на принципі гіпермедіа.

В 1991 році система була практично реалізована й отримала назву WorldWideWeb. Дослівно ця назва перекладається як "Павутиння , шириною на весь світ", але її як правило називають Всесвітнім павутинням, або Web - ситемою, або WWW.