І. Опрацюйте лекційний матеріал.
1. Веб-програмування.
На веб сторінці можна розмістити окрім тексту і звичні нам кнопки, форми, перемикачі та прапорці. Зробити це не важко з допомогою:
- парного тега <form>…</form>, що є об’єктом-контейнером для всіх інших об’єктів (кнопок, прапорців, перемикачів, текстових полів);
- одинарного тега <input>, який вказує на певний об’єкт (кнопку, прапорець, перемикач, текстове поле).
Наприклад:
Після вставлення такого коду у веб-сторінку на екрані отримаєте наступне:
Однак, щоб усі ці елементи запрацювали, необхідно їх забезпечити невеликими програмами, які називаються сценаріями. Найбільш поширена мова для написання сценаріїв на веб-сторінках JavaScript.
Команди на цій мові можуть призначатися безпосередньо атрибутам елементів управління. У прикладі показаному вище використаний саме такий спосіб
Ця команда при натисканні на кнопку відкривала сайт із вказаною адресою, тобто кнопка спрацьовувала як гіперпосилання.
Для того, щоб додати до сторінки окремо написаний код на JavaScript використовують праний тег <script>…</script>. Треба відмітити, що всередині такого тега має бути лише текст написаний на JavaScript.
2. Інтерактивні сторінки.
Інтерактивність сторінок означає, що відповідь на будь яку дію користувача відбувається зміна зовнішнього вигляду сторінки, відображення додаткової інформації чи виконуються інші процеси, що полегшують користувачу роботу з документом. Тому, щоб зробити сторінку інтерактивною часто і використовують скрипти створені за допомогою JavaScript.
Однак, це не єдиний спосіб зробити сторінку інтерактивною. Мабуть, найпростішим способом досягти такої мети буде використання звичайних гіперпосилань, які до речі можна прив’язати не лише до слів, а й до картинки чи певного місця сторінки.
Тобто, для забезпечення інтерактивності веб-сторінки окрім скриптів на JavaScript можна використати: гіперпосилання, фрейми, навігаційні карти і власну фантазію.
2.1. Гіперпосилання є двох видів:
- на файл;
- на деяке місце на певній сторінці (початок сторінки(top), кінець сторінки(bottom), позначений текст).
Гіперпосилання вставляють за допомогою парного тега:
<a href=’1.html’>…<a>
На місці трьох крапок може бути текст або тег графічного зображення.
Більш детально про посилання можна прочитати тут.
2.2. Приклад створення навігаційної карти можна переглянути за посиланням Навігаційна карта
2.3. Фрейми.
Фрейми поділяють вікно браузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці відповідає свій html-файл.
Отже, для створення сайту із застосуванням фреймів потрібно створити як мінімум три html-файли:
основний (де описана структура фреймової сторінки);
два допоміжні (наприклад сторінка з меню сайту і головна сторінка).
Оскільки основний файл запускає сайт, то його зазвичай називають index.html.
Приклади таких html-файлів:
основний файл index.html
<html>
<head>
<title>
приклад уроку 25 фрейми
</title>
</head>
<frameset cols=”25%,75%”>
<frame src=”menu.html”
name=”menu”
scroling=”no”
frameborder=”1″
border=”15″
marginheight=”10″
marginwidth=”10″>
<frame src=”sait.html”
name=”sait”>
</frameset>
</html>
допоміжний файл меню menu.html
<html>
<head>
<title>
приклад уроку 25 меню
</title>
</head>
<body>
<h3>
<center>ГОЛОВНЕ МЕНЮ</center>
<br>
<a href=”1.html” target=”sait”>Автобіографія</a>
<br>
<a href=”2.html” target=”sait”>Уподобання</a>
<br>
<a href=”3.html” target=”sait”>Друзі</a>
</h3>
</body>
</html>
другий допоміжний файл sait.html
<html>
<head>
<title>
приклад уроку 25 сайт
</title>
</head>
<body>
<h1>
<center>Вітаємо на нашому сайті
<br>
<img src=”1.gif”>
</center>
</h1>
</body>
</html>
Після запуску файла index.html у браузері побачимо наступне:
ІІ. Виконання вправ.
Продовжуєте працювати над написанням власних сайтів.
Надішліть мені звіт про виконану вами роботу (фото чи скріни веб-сторінок, посилання на сайти – ті хто вже розмістив свій сайт в Інтернеті, або файли з html-кодами сторінок)
Якщо в процесі роботи виникають якісь питання, то також звертайтеся через електронну адресу або вайбер
електронна адреса: shkolabilin1@gmail.com
вайбер: +380930158447
Домашнє завдання: Опрацювати лекційний матеріал
Сайт вчителя інформатики Панасюк Ірини Вікторівни 