Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Informatika / Palaguta_K.O._Movna_model_suchasnogo_informatsiynogo_prostorumetodichkaMetod._vkaz._ta_zavd2011

.pdf
Скачиваний:
31
Добавлен:
22.02.2016
Размер:
1.88 Mб
Скачать

<B>Кафедри:</B> <UL TYPE=square>

<LI>бухгалтерського обліку <LI>фінансів

<LI>контролю та аналізу господарської діяльності <LI>банківської справи

<LI>інформаційних систем і технологій управління <LI>інвестиційного менеджменту

<LI>фізичного виховання

</UL> </P>

<A HREF="inf.htm"> інформація про випускові кафедри</A><BR> <A HREF="address.htm"> адреса</A>

</BODY>

</HTML>

Коментар:

16.1.Зображення додається до HTML – документа за допомогою тегу <IMG>. Атрибут SRC визначає ім’я файлу, у якому зберігається малюнок arms.jpeg. Маршрут пошуку файлу arms.jpeg не визначається, оскільки обидва файли index.htm і arms.jpeg знаходяться в одній папці.

17.Збережіть остаточний варіант файлу index.htm, перегляньте його у браузері. Головна сторінка сайту у браузері ІЕ повинна виглядати так:

11

Індивідуальні завдання

за темою «Створення web – сайтів з використанням мови HTML»

Варіант №1

Розробити web – сайт, в якому надається інформація про випускову кафедру:

12

1.Головна сторінка: університет, інститут, кафедра, завідувач кафедри, посилання на інші сторінки.

2.Інформація про викладачів кафедри, оформлена у вигляді таблиці: ПІБ, посада, науковий ступінь.

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

4.Наукова робота: перелік наукових напрямів, у яких працюють викладачі кафедри, перелік наукових конференцій, у яких брали участь викладачі.

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

Потрібно надати можливість переходу з кожної сторінки сайту до голо-

вної.

Варіант №2

Розробити web – сайт, в якому надається інформація про студентів групи і який містить такі сторінки:

1.Головна сторінка: університет, інститут, група, курс, куратор, посилання на інші сторінки.

2.Інформація про студентів групи, оформлена у вигляді таблиці: ПІБ, дата народження, адреса.

3.Відомості про дисципліни, які вивчаються у поточному семестрі (оформити у вигляді списку).

4.Наукова робота: перелік наукових гуртків, у яких працюють студенти групи, а також перелік наукових конференцій, у яких брали участь студенти групи.

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

Потрібно надати можливість переходу з кожної сторінки сайту до голо-

вної.

Варіант №3

Розробити web – сайт, в якому надається інформація про видатного вченого (наприклад, Михайла Туган-Барановського):

1. Головна сторінка: ПІБ, дати життя, країна, посилання на інші сторін-

ки.

2.Біографія (основні етапи оформити як список).

3.Інформація про основні наукові роботи, оформлена у вигляді табли-

ці.

4.Літературні джерела про життя і творчість (список).

5.Фотографії.

Потрібно надати можливість переходу з кожної сторінки сайту до голо-

вної.

13

Варіант №4

Розробити власний web – сайт студента, в якому містяться такі сторінки:

1.Головна сторінка: університет, інститут, ПІБ, група, спеціальність (напрям підготовки), посилання на інші сторінки.

2.Автобіографія, оформлена у вигляді таблиці.

3.Інформація про дисципліни, які вивчає студент (оформити у вигляді

списку.

4.Наукові інтереси: напрями наукової роботи, перелік наукових конференцій, у яких студент брав участь.

5.Захоплення: загальні відомості з використанням фотографій. Потрібно надати можливість переходу з кожної сторінки сайту до голо-

вної.

Варіант №5

Розробити web – сайт, в якому надається інформація про улюбленого композитора або музичну групу:

1. Головна сторінка: ПІБ, дати життя, країна, посилання на інші сторін-

ки.

2.Біографія (основні етапи оформити як список).

3.Інформація про основні твори, оформлена у вигляді таблиці.

4.Літературні джерела про життя і творчість, відгуки преси (список).

5.Фотографії.

Потрібно надати можливість переходу з кожної сторінки сайту до голо-

вної.

Варіант №6

Розробити web – сайт, в якому надається інформація про університет:

1.Головна сторінка: університет, інститути і кафедри (таблиця), посилання на інші сторінки.

2.Керівництво вузу (бажано з фотографіями).

3.Інформація про напрями підготовки бакалаврів, спеціалістів, магістрів (список).

4.Наукова робота: перелік наукових конференцій, які проводяться в вузі, наукові видання.

5.Адреси корпусів, телефони.

Потрібно надати можливість переходу з кожної сторінки сайту до голо-

вної.

Варіант №7

Розробити web – сайт, в якому надається інформація про улюбленого письменника:

1. Головна сторінка: ПІБ, дати життя, країна, посилання на інші сторін-

ки.

2.Біографія (основні етапи оформити як список).

3.Інформація про основні твори, оформлена у вигляді таблиці.

14

4.Літературні джерела про життя і творчість, відгуки преси (список).

5.Фотографії.

Потрібно надати можливість переходу з кожної сторінки сайту до голо-

вної.

Варіант №8

Розробити web – сайт, в якому надається інформація про інститут (факультет):

1.Головна сторінка: університет, інститут (факультет), директор (декан) посилання на інші сторінки.

2.Кафедри з інформацією про викладачів (таблиця).

3.Інформація про напрями підготовки у інституті (факультеті) бакалаврів, спеціалістів, магістрів (список).

4.Наукова робота: перелік наукових конференцій, які проводяться.

5.Адреси кафедр, телефони.

Потрібно надати можливість переходу з кожної сторінки сайту до голо-

вної.

Варіант №9

Розробити web – сайт, в якому надається інформація про місто (Донецьк або якесь інше місто):

1.Головна сторінка: країна, область, назва міста, фотографії, посилання на інші сторінки.

2.Інформація про населення: загальна чисельність, данні по вікових категоріях, зайнятості, рівню освіти (таблиця).

3.Інформація про вищі навчальні заходи (список).

4.Інформація про установи культури: театри, музеї, філармонії тощо (список).

5.Інформація про спортивні установи (список).

Потрібно надати можливість переходу з кожної сторінки сайту до голо-

вної.

Варіант №10

Розробити web – сайт, в якому надається інформація про кулінарні рецепри:

1. Головна сторінка: автор сайту, фотографії, посилання на інші сторін-

ки.

2.Рецепти закусок (список визначень).

3.Рецепти основних страв (список визначень).

4.Рецепти десертів (список визначень).

5.Інформація про склад і калорійність основних продуктів харчування (таблиця).

Потрібно надати можливість переходу з кожної сторінки сайту до голо-

вної.

15

Приклад тесту

за темою «Створення web – сайтів з використанням мови HTML»

1)HTML – це мова, призначена …

a)для створення гіпертекстових документів, які можуть відображатися за допомогою браузера Internet Explorer

b)для розробки різних прикладних програм

c)для створення гіпертекстових документів, що можуть відображатися за допомогою будь-якого браузера

2)Файл-документ, створений мовою HTML, може мати розширення …

a)htm

b)txt

c)doc

d)html

3)Які програми можна використовувати для створення HTML – документів?

a)Блокнот

b)MS Excel

c)Paint

d)MS Word

4)Тег – це …

a)спеціальний управляючий код, який визначає параметри форматування даних у документі.

b)управляючий код, який визначає фрагмент документа, до якого застосовуються спеціальні параметри форматування

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

5)Атрибути тегів …

a)виділяють фрагмент HTML - документа

b)визначають параметри форматування документа фрагменту документа

c)визначають операцію форматування

6)Тег <HEAD> визначає …

a)заголовну частину документа.

b)те, що документ написано на мові HTML.

c)основну частину документа.

7)Які значення атрибутів, що визначають колір, коректні?

a)Red

b)Червоний

c)Olive

d)#0000

e)#AAСС00

f)#LLLLLL

8)Для форматування даних на сторінці можна використовувати теги …

a)<H3>

b)<SUB>

c)<CENTER>

d)<BODY>

16

e)<B>

f)<FONT>

g)<A>

9)Які фрагменти коду для створення гіперпосилання коректні?

a)<A HREF="address.html"> моя адреса </A>

b)<A HREF="http://www.yandex.ru"> Пошук у Yandex </A>

c)<A HREF="Приклад.txt"> Посилання </A>

10)Список визначень створюється за допомогою тегів …

a)<OL>

b)<UL>

c)<DD>

d)<LI>

e)<DL>

11)Які теги використовуються для створення таблиць?

a)<CAPTION>

b)<TD>

c)<TABLE>

d)<DD>

e)<OL>

f)<TR>

12)Як об’єднати декілька чарунок таблиці по горизонталі?

a)За допомогою атрибуту COLSPAN тегу TR

b)За допомогою атрибуту ROWSPAN тегу TABLE

c)За допомогою атрибуту COLSPAN тегу TABLE

13)Які фрагменти коду для розміщення на сторінці зображення коректні?

a)<IMG SRC="http:/ /picture.jpg" >

b)<IMG SRC="D:\Рисунки\picture.png" >

c)<IMG SRC="picture.bmp" >

d)<IMG SRC="C:/ /file.jpg" >

14)Як зробити зображення фоном сторінки?

a)За допомогою тегу <BODY>

b)За допомогою тегу <HEAD>

c)За допомогою тегу <IMG>

15)Коли використовується мапа посилань?

a)тоді, коли гіперпосиланням є малюнок

b)коли різні фрагменти сторінки є різними гіперпосиланнями

c)коли різні фрагменти зображення є різними гіперпосиланнями

17

Лабораторна робота №2

Тема: Створення web – сайтів з використанням фреймів, каскадних листів стилів CSS.

Мета: навчитись створювати сайти з використанням фреймів, каскадних листів стилів CSS.

Програмне забезпечення: операційна система Windows, браузер Internet Explorer.

Завдання

1.Виконати приклад створення web – сайту підприємства з використанням фреймів і каскадних листів стилів CSS.

2.Розробити власний web – сайт у відповідності до індивідуального варіанту.

3.Оформити звіт по лабораторній роботі, у якому повинні бути такі складові:

титульний лист;

роздруковані HTML – документи у звичайному вигляді (у вікні браузера), а також у HTML – коді;

роздрукована таблиця стилів.

4.Підготуватись до тестування за темою з використанням тесту - прикладу.

Приклад створення web – сайту з використанням фреймів, каскадних листів стилів CSS

1. У середовищі програми Блокнот введіть текст HTML – документа:

<HTML>

<HEAD>

<TITLE>сайт ТОВ "Славутич"</TITLE> </HEAD>

<FRAMESET COLS="30%,*">

<FRAME SRC="main.htm">

<FRAME SRC="inf.htm" NAME="TEXT"> </FRAMESET>

</HTML>

Коментар:

1.1.Тег <FRAMESET> поділяє за допомогою атрибуту COLS вікно браузера на два фрейми по вертикалі, перший фрейм займає 30% поверхні вікна браузера, другий – усю іншу частину вікна.

1.2.За допомогою тегів <FRAME> визначається вміст фреймів. У першому фреймі виводиться файл main.htm, у другому – файл inf.htm. Оскільки уміст другого фрейму буде змінюватися в залежності від обраного гіперпосилання, йому привласнюється ім’я TEXT.

1.3.Зверніть увагу, файл не містить контейнеру <BODY>.

18

2.Збережіть документ у окремій папці з ім’ям index.htm (обов’язково потрібно визначати тип файлу – всі файли, інакше документ буде збережено як текстовий файл).

3.У власній папці створіть ще один HTML – документ main.htm:

<HTML>

<BODY>

ТОВ "Славутич" виробляє побутове обладнання <BR>

<A HREF="inf.htm" TARGET="TEXT"> загальні відомості </A><BR> <A HREF="prod.htm" TARGET="TEXT"> продукція </A>

</BODY>

</HTML>

Коментар:

3.1.Теги <А> створюють гіперпосилання на файли inf.htm або prod.htm і за допомогою атрибуту TARGET визначають, що відповідні файли будуть виводитися у фреймі з ім’ям TEXT (у другому фрейми).

4.У тій самій папці створіть ще один файл inf.htm, у якому містяться загальні відомості про підприємство:

<HTML>

<BODY>

Адреса підприємства: м.Донецьк, вул.Університетьська, 128 <BR>

Телефони: (062) 335-75-29 <BR> e-mail: slavutich@donbas.com <BR> </BODY>

</HTML>

5.У власній папці створіть файл prod.htm (відомості про продукцію, що виробляється на підприємстві):

<HTML>

<BODY>

<P> Наша продукція: </P>

<TABLE BORDER=2 ALIGN=LEFT CELLPADDING=5> <TR ALIGN=CENTER>

<TD>Найменування </TD> <TD> Модель </TD>

<TD> Ціна, грн. </TD></TR>

<TR> <TD> кавоварка </TD> <TD> СІІ-15 </TD> <TD> 425 </TD> </TR> <TR> <TD> кавоварка </TD> <TD> VX-40 </TD> <TD> 700 </TD> </TR> <TR> <TD> тостер </TD> <TD> RoWC-7 </TD> <TD> 350 </TD> </TR> <TR> <TD> сковорідка </TD> <TD> CXZ-321 </TD> <TD> 200 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

6.За допомогою файлу index.htm розчиніть сайт, перевірте дію гіперпосилань. У браузері ІЕ сайт виглядатиме так:

19

або так:

7.Тепер оформимо сайт за допомогою таблиці стилів CSS. У вікні програми Блокнот введіть такий уміст файлу:

BODY { background:papayawhip; color:navy; font-family:"Times New Roman";

font-size:14pt}

.stZAG {font-size:16pt; font-weight:bold; font-style:italic}

.stROW {font-family:"Arial"; font-weight:bold; color:green; letter-spacing:4}

Коментар:

7.1.У таблиці стилів описується стиль, що буде застосовуватися до всіх селекторів (тегів) <BODY>, зокрема:

властивість background, що визначає колір фону сторінки, приймає значення papayawhip – колір дині;

20