- •Передмова
- •Лабораторна робота №1
- •Лабораторна робота № 2
- •Хід виконання роботи
- •Лабораторна робота № 3
- •Хід виконання роботи
- •Контрольні питання
- •Лабораторна робота №4
- •Хід роботи
- •Методичні рекомендації
- •Дизайн тексту для Web-сторінок
- •Створення списків та їх дизайн
- •Створення таблиць та їх дизайн
- •Вирівнювання елементів
- •Додання графічних та відеофайлів
- •Адреси файлів
- •Додання гіперпосилань
- •Поняття про динамічні ефекти
- •Лабораторна робота № 5
- •Контрольні питання
- •Заробітна плата працівників заводу "океан" за червень
- •Заробітна плата працівників заводу "океан" за червень
- •Лабораторна робота № 6
- •Контрольні питання
- •Лабораторна робота №7
- •Хід виконання роботи
- •Мал. 2 Контрольні питання
- •Лабораторна робота № 8
- •Хід виконання роботи
- •Мал. 1 Контрольні запитання
- •Лабораторна робота № 9
- •Хід виконання роботи:
- •Контрольні запитання
- •Лабораторна робота № 10
- •Хід виконання роботи
- •Контрольні питання
- •Лабораторна робота № 11
- •Хід виконання роботи
- •Контрольні питання
- •Лабораторна робота №12
- •Хід виконання роботи
- •Контрольні питання
- •Лабораторна робота №13
- •Лабораторна робота №14
- •Хід виконання роботи
- •Контрольні питання
- •Література
Додання графічних та відеофайлів
Графічні зображення (фотографії, картинки тощо) зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на Web-сторінці за допомогою команди, що описується одинарним тегом <IMG> з параметрами:
<IMG SRC="адреса графічного файлу" ALT= "альтернативний текст" ALIGN="left" WIDTH=240 HEIGHT=200>
Обов'язковим є лише перший параметр SRC. Альтернативний текст — це текст, який виводитиметься замість картинки, якщо браузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT — її розміри за шириною і висотою в пікселах або відсотках сторінки.
Зображення можна подати у рамці (що рекомендують робити), якщо його використовуватимуть як гіперпосилання. Для створення рамки навколо зображення призначений параметр BORDER="товщина рамки в пікселах".
Праворуч і ліворуч від картинки, яку обтікає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів".
За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття Web-сторінки:
<IMG DYNSRC="адреса відео-файлу">.
Адреси файлів
Для доступу до файлів на локальному диску використовують протокол доступу file: “file:///диск:/ шлях до файлу".
Наприклад, "file:///d:/МоиВеб/page1.htm". Назву протоколу можна інколи не писати, наприклад, SRC="c:/Рисунки/Саша.bmp".
Якщо графічні чи інші файли є в тому ж каталозі, що й головний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC= "Саша.bmp". Якщо файл є в деякому каталозі images, але в тому ж надкаталозі, то шлях до нього можна подати так: "../images/myfoto.gif". Отже, тег IMG може мати, наприклад, такий вигляд:
<IMG SRC="MyFoto.bmp" ALT= "Моє фото" ALIGN="left" WIDTH=180 HEIGHT=200>
Вправа 4. Вставте цей тег
<IMG SRC="MyFoto.gif" ALT= "Моє фото" ALIGN="left" WIDTH=180 HEIGHT=200>
у код вашої веб-сторінки у файлі file1.htm, попередньо розмістивши у папці Лабораторна_№4_Прізвище ваше фото у файлі з ім’ям MyFoto.gif
Код веб-сторінки на даний час може бути таким:
<HTML>
<HEAD> <TITLE> Веб-сторінка Ваше прізвище та ім’я</TITLE> </HEAD>
<BODY BGCOLOR ="yellow" TEXT = "navy">
<IMG SRC="MyFoto.gif" ALT= "Foto" ALIGN="left" width=180 height=200>
<CENTER><H1><B> Привіт!</В> </Н1>
<H2> <I>Я студент (введіть назву вузу)</I></Н2><P>
<H3><B> Навчаюсь на (введіть назву факультету, дайте характеристику факультету, спеціальності, чому ви навчаєтесь саме на цьому факультеті - 20 речень )</B></НЗ><HR>
Група (введіть назву групи)<P>
Моя e-mail адреса: <FONT SIZE = +3 COLOR = "magenta"> <B><I> (наприклад, s_nesterenko@ukr.net )</FONT></I></B></CENTER><HR>
<CENTER>
<TABLE BORDER=6 BGCOLOR="aqua" BORDERCOLOR="red" >
<CENTER><TC> Моя успішність: </TC></CENTER>
<TR BGCOLOR="white"> <TH> Назва дисципліни</TH>
<TH>І семестр </TH>
<TH>II семестр </TH> </TR>
<TR> <TH>Основи інформатики і ОТ </TH>
<TD ALIGN="center">5</TD>
<TD ALIGN="center">4</TD></TR>
<TR> <TH>Англійська мова</ТН>
<TD ALIGN="center">4</TD>
<TD ALIGN="center">5</TD></TR>
<TR> <TH>Вища математика</TH>
<TD ALIGN="center">4</TD>
<TD ALIGN="center">5</TD></TR>
</TABLE></CENTER><HR>
</BODY></HTML>