Вінницьке ВПУ-11 // Методичні матеріали

Обов'язковим є лише перший параметр SRC . Альтернативний текст - це текст, який виводитиметься замість картинки, якщо броузер не може прийняти графічний файл, або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT її розміри по ширині і висоті в пікселях або відсотках. Наприклад <IMG WIDTH="300"> задає ширину картинки 300 пікселів; <IMG WIDTH="50%"> задає ширину картинки півсторінки у горизонтальному напрямку.
Зображення можна подати в рамці, що рекомендують робити, якщо його використовуватимуть як гіперпосилання. Для створення рамки навколо зображення призначений параметр ВОRDER= "товщина рамки в пікселях". Справа і зліва від картинки, яку обгортає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під малюнком: VSPACE = "кількість пікселів".
За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття Web-сторінки:
<IMG DYNSRC=" адреса відео-файлу"> Завдання 5.
Вставити в новий файл свою фотографію або деяку картинку з Clip Art. Назвіть його 3. Html

8. Адреси файлів.

Для виклику віддалених файлів, тобто файлів, які є на серверах в мережі Internet, адресу записують з зазначенням назви протоколу доступу http і URL-адреси файлу, наприклад, "http://www.polynet.lviv.ua/ourpage.htm''. Для доступу до файлів на локальному диску використовують протокол доступу file: "file:///диск:/ шлях до файлу".
Наприклад, "file:///d:/mycatalog/mypage.htm". Назву протоколу можна інколи не писати, наприклад, SRC="c:/windows98/ Лес.bmp".
Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC="myfoto.gif" Якщо файл є в деякому сусідньому каталозі images, тo шлях до нього можна подати так: "../images/ myfoto.gif". Отже, тег ІМG може мати такий конкретний вигляд:
<IMG SRC="c:/windows98/леc.bmp" ALT="Лес">

Наприклад:
До нашого списку професій добавимо малюнок
<HTML>
<HEAD>
<TITLE Сторінка ВПУ-11</TITLE>
</HEAD>
<BODY bgcolor="yellow">
<IMG SRC="="C:/WINDOWS98/COMP1.GIF" ALIGN="RIGHT" HEIGHT="50%">
<LH> Професії ВПУ№11 </LH>
<OL TYPE=="1" >
<LI>Секретар керівника <LI>Оператор ЕОМ </LI>
<LI>Телемайстер </LI>
<OL>
</BODY>
</HTML>
Контрольні питання:
1. Як вставити малюнок?
2. Які теги задають розміри по ширині та висоті?
3. Для чого призначений параметр <

9.Побудова таблиць

Таблиця-зручний засіб представлення даних.
Для створення таблиці використовують дескриптори <TABLE> </TABLE>- на початку та в кінці таблиці <TR> </TR> для визначення рядків <TH> текст заголовка </TH>
<TD> текст чарунки </TD>
Для обрамлення таблиці використовують параметр тега <TABLE BORDER=" товщина лінії у пікселях"> За замовчуванням броузер відображає рамку темно-сірим кольором. Для зміни кольору рамки використовують параметр BORDERCOLOR="колір " Для заливки таблиці певним кольором використовують параметр BACKGROUND="колір"
Для об'єднання чарунок таблиці в межах рядка використовують параметр COLSPAN="кількість чарунок" дескрипторів <TH> і <TD>, а параметр ROWSPAN="кількість чарунок" -з тими ж дескрипторами для об'єднання чарунок в межах стовпця.
Вирівнювання даних в таблиці виконується за допомогою параметрів ALIGH="вид вирівнювання по горизонталі" та VALIGH="вид вирівнювання по вертикалі" дескрипторів <TH> і <TD>.

Вид вирівнювання по горизонталі:		Вид вирівнювання по вертикалі:
left	вліво	top	доверху
right	вправо 2	top	посередині
center	по центру	botton	донизу

Наприклад :
<H1> Наша історія</H1>
<TABLE BORDER="10">
<TR>
<TH>РОКИ</TH>
<TH>ПОДІЇ</TH>
</TR>
<TR>
<TH>1980</TH>
<TH>Створення училища</TH>
</TR>
<TR>
<TH>2000</TH>
<TH>Статус вищого</TH>
</TABLE>

Завдання 6.
Вставити в новий файл свою автобіографію у вигляді таблиці. Назвіть його 4. Html
Контрольні питання:
1. Як створити таблицю?
2. Які теги задають обрамлення таблиці?
3. Для чого призначений параметр <VALIGH>?

10. Вставлення гіперпосилань.

Є два види гіперпосилань:
1) на файл;
2) на деяке місце на даній сторінці, а саме: на початок сторінки - top, кінець сторінки - bottom, на деякий позначений текст.
Гіперпосилання вставляють за допомогою парного тега<А>...</А> з параметром HREF = "адреса файлу (або слова top чи bottom чи позначений текст)".
Гіперпосиланням може бути текст або деяке графічне зображення. Розглянемо на прикладі випадок, коли гіперпосиланням є текст. Нехай у реченні "Мої фото" слово "фото" потрібно зробити гіперлосиланням на файл "foto.htm", що містить декілька фото (цей файл ще треба створити). Це роблять так:
Мої<А HREF = "foto.htm"> фото</А>.
На екрані слово фото буде підкреслене і зображене іншим кольором. Колір гіперпосилання визначається у тезі BODY параметром LINK = "колір". Крім цього корисними є ще два параметри: VLINK== "інший колір" - змінює колір гіперпосилання на інший після першого використання; ALINK == "ще інший колір" - змінює колір активізованого користувачем гіперпосилання на ще інший.

Тепер розглянемо, як деяке графічне зображення зробити гіперпосиланням. Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, фотографію Ірини, що є у файлі "ira.jpg", візьмемо в рамку і зробимо з неї гіперпосилання на файл new.htm: <A HREF="1.HTM"> <IMG SRC="IRA.JPG" BORDER=8 ALIGN="LEFT" HEIGHT="50%"> </A> Клацнувши у Web-сторінці на фотографії , отримаємо на екрані файл з додатковою інформацією про неї.

Розглянемо другий тип гіперпосилань - посилання в межах сторінки. Спочатку потрібно позначити місце на сторінці, куди здійснюватиметься перехід. Якщо з деякого місця перехід має виконуватися на початок сторінки, то в місце html-файлу, що відповідає початку сторінки, вводять тег, який називається якорем:
<А NAME="#початок "> </А> .
Аналогічно позначають (кидають якір у) деяке місце в кінці файлу:
<А NAME="#кінець"> </А> .
Будь-яке місце в тексті можна позначити .за допомогою тега <А МАМЕ="#мояпозначка"></A> , Тепер на сторінці розставляють гіперпосилання на створені позначки:
<А НRЕF="#початок (#кінець або #мояпозначка)"> текст гіперпосилання </А> .
Якщо одна сторінка займає декілька екранів, то в кінці сторінки варто вставити гіперпосилання для переходу на її початок, наприклад:
Тепер можна перейти <А НRЕF="#початок"> на початок</А> сторінки.
Завдання 7.
Вставте в свій файл (1.htm) гіперпосилання на інший html-файл , який містить вашу автобіографію(наприклад, 4.htm ), а також посилання на початок і кінець документа. Перегляньте його броузером.

11.Проектування фреймів

Фрейми дозволяють ділити простір вікна броузер на незалежні розділи. Кожний із розділів може відображати певну сторінку сайту. Щоб побудувати фрейми, потрібно створити спеціальну Web-сторінку, яка містить опис структури фреймів, складений за допомогою дескрипторів <FRAMESET> , </FRAMESET> та <FRAME> Дескриптор <FRAMESET> дозволяє сформувати набір фреймів, які ділять простір вікна на рядки та стовпці.
Для горизонтальних фреймів використовують параметр ROWS= "висота кожного фрейму ".
Для вертикальних фреймів використовують параметр COLS="ширина кожного фрейму "
Значення висоти(ширини) виражається у відсотках відносно поточних габаритів вікна, екранних пікселях або у виді символу (*). Використовуючи (*), ви маєте на увазі , що розміри фрейму повинні залежати від габаритів інших фреймів сторінки.
Дескриптор <FRAME> служить для визначення структури і вмісту конкретного фрейму.
<FRAME NAME="назва об'єкта " SRC="шлях до файлу сторінки.htm"> Наприклад :
<HTML>
<FRAMESET ROWS="150,*">
<FRAME NAME="ВИГЛЯД" SRC="FOTO.HTM">
<FRAMESET COLS="350,*">
<FRAME NAME="1" SRC="1~1.HTM">
<FRAME NAME="2" SRC="2~1.HTM">
</FRAMESET>
</FRAMESET >
</HTML>
Після перегляду отримаємо наступну Web-сторінку

Завдання 8.
Створіть новий файл, в якому у фреймах будуть ваші файли (1htm, 2.htm, 3.htm, 4.htm) Назвіть його index.html
Контрольні питання:
1. Як створити фрейми?
2. Який теги задає розміщення фреймів по горизонталі?
3. Для чого призначений тег <FRAME>?

12. Вставлення звуку і відеозображення.

Важливо пам'ятати, що назви звукових файлів мають розширення au, wav, mid,midi, ra, а відеофайлів - avi, vivo, mpeg тощо. Щоб вставити звук чи відео, достатньо , як значення параметра HREF у тезі гіперпосилання задати шлях до відповідного звукового чи відеофайлу, який вже є на диску, наприклад, Тепер <А HREF=="mysound.wav"> послухайте мене (150К) </A>, Текст послухайте мене (150К) стане гіперпосиланням, клацнувши на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допомогою програми Фонограф у файл "mysound.wav" обсягом l50 Кбайт. Оскільки звукові та відеофайли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах Щоб звуковий чи відеоефект повторювався декілька разів, наприклад 2 рази, у тезі <А> використовують параметр LOOP=2. Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег <BGSOUND SRC = "адреса звукового файлу">. Інший спосіб - використайте тег <EMBED SRС="адреса звукового файлу"> і, окрім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості і сили звуку, припинення чи продовження звучання тощо.

13. Поняття про динамічні ефекти.

Динамічними називаються ефекти, коли графічні зображення на Web-сторінці .змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст "біжить" вздовж екрана тощо.
Розглянемо ефект біжучого тексту у полосі, що має висоту HEIGHT = "висота в пікселях" і фон BGCOLOR = "колір фону". Ефект створюється за допомогою парного тега <MARQUEE>... </ MARQUEE>: <MARQUEE BGCOLOR=="green" HEIGHT = "140">
<H1>Вас вітають в ВПУ №11 </H1> </МАКQUЕЕ>

Слова "Вас вітають в ВПУ №11" будуть пробігати в полосі справа наліво, заходитимуть за край екрану і з'являтимуться знову справа. Такий ефект рекомендують застосовувати до заголовків сторінки. Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежну сторону.
Обмеження кількості проходів, наприклад числом 5, задається параметром LOOP="5". Полосу можна відцентрувати за допомогою параметрів HSPASE і VSPACE. Швидкість руху задає параметр SCROLLAMOUNT="3", де значення вибирають з діапазону від 1 (повільно) до 10 (швидко).
Інші динамічні ефекти створюють за допомогою процедур з використанням мов програмування Visual Basic Script або Java-Script.
Завдання 9.
Вставте в свій файл заголовок у вигляді "біжучого "рядка. Задайте кількість проходів -7, швидкість руху -8, відцентруйте рядок.
Контрольні питання:
1. Як створити "біжучий "рядок?
2. Які теги задають динамічний ефект?
3. Для чого призначений параметр <HSPASE>?

Tecт

1 Служба WWW - це:

a) глобальна мережа

b) всесвітня інформаційна мережа

c) міжнародні дискусії

2 Основним елементом WWW є

a) Web-сторінки

b) Web-броузер

c) гіпертекст

3 Броузер - це

a) текстовий редактор

b) програма перегляду малюнків

c) програма перегляду Web-сторінок

4 Гіпертекст - це

a) містить посилання на інші документи

b) містить посилання на web-сторінки

c) дуже великий текст

5 HTML-це мова

a) англійська

b) мова програмування

c) мова розмічування гіпертекстових документів

6 URL-це

a) поштова адреса

b) домена адреса

c) адреса web-сторінки

7 Web-сайт-це

a) потужний ПК

b) гіпертекст

c) колекція web-сторінок

8 HTML-документ, це звичайний текстовий файл з розширенням

a) .www

b) .net

c) .htmб

9 Гіпермедіа- це набір

a) взаємопов'язаних текстів

b) мультимедійні програми

c) гіпертекст, графіки, звуку, відео

10 Коди HTML називаються

a) тегами

b) командами

c) дескрипторами

11 Розвиток Web-сторінок припадає на

a) 1995

b) 1989

c) 1980

12 Дескриптор<BODY>служить для

a) заголовка вікна

b) заголовка

c) опису тіла

13 Тег <HTML> є

a) парним

b) непарним

c) одинарним

14 Для переходу на новий рядок служить тег

a) <BR>

b) <P>

c) <RB>

15 Тег <A HREF…..>центр</A> служить для

a) вирівнювання по центру

b) для включення посилань

c) побудови таблиці

16 Для створення фрейму служить тег

a) <FRAMESET>

b) <HEAD>

c) <TITLE>

17 Тег <Img SRC="?"> служить для

a) вставки графічного зображення

b) вставки текстового файлу

c) вставки гіперпосилання

18 Для побудови динамічного ефекту служить тег

a) <MARQUEE>

b) <FRAMESET>

c) <RB>

Використана література

1. І.Т. Зарецька, Б.Г. Колодяжний, А.М. Гуржій, О.Ю.Соколов Інформатика : Навч. посібник для 10-11 кл. серед.загальноосвітніх шкіл.-К.:Навчальна книга, 2002
2. А.Ф. Верлань, Н.В. Апатова Інформатика: Підручник для учнів 10-11 кл.серед.загальноосв. шк.-К.:Форум, 2000
3. Я.М. Глинський Практикум з інформатики: Навч.посібник . 4-е вид.-Львів:Деол,2001
4. Л.М. Дибкова Інформатика та комп'ютерна техніка: Посібник. К.-Академія,2002
5. Крамер Эрик HTML: Наглядный курс Web-дизайна. М.: Издательский дом ,2001