Модуль 3 технології підготовки інтерактивних мультимедійних електронних видань Лабораторна робота № 3.1
Дослідження технологій створення гіпертексту та гіпермедіа посилань у електронних мультимедійних виданнях
Мета роботи:
придбати практичні навички зі створення гіпертесту та гіперпосилань;
придбати практичні навички з використання знань для створення електронних мультимедійних видань.
Основні завдання:
|
|
|
|
Обладнання, прилади і матеріали
Робоча станція. Персональний комп'ютер рівня «Pentium-IV» та вище.
Програмне забезпечення Microsoft Word, Microsoft Excel, WordPad та або-будь який HTML-редактор.
Графічна та текстова інформація на електронних носіях.
Порядок і рекомендації щодо виконання роботи
Організація гіперпосилань в html
HTML документ |
<HTML> </HTML> |
Заголовок документу |
<HEAD> </HEAD> |
Тіло HTML документу |
<BODY> BACKGROUND=” ” BGCOLOR=”значення1” TEXT=”значення2”</BODY> |
Вставка гіперпосилання |
<A HREF=”NAU.html” > НАУ </A> |
Атрибут – адреса посилання |
HREF |
Розробка Web – сторінки. Короткий словник по html
HTML документ |
<HTML> </HTML> |
Заголовок документу |
<HEAD> </HEAD> |
Тіло HTML документу |
<BODY> BACKGROUND=” ” BGCOLOR=”значення1” TEXT=”значення2”</BODY> |
Атрибути: |
|
Малюнок фону за адресою URL чи ім’ям файлу |
BACKGROUND |
Колір фону |
BGCOLOR |
Колір тексту |
TEXT |
Коментар |
<! > |
|
<COMMENT> </COMMENT> |
Теги заголовків |
|
Перший рівень |
<H1> … < /H1> |
.... |
... |
Шостий рівень |
<H6> … < /H6> |
Заголовок вікна |
<TITLE>Моя страничка</TITLE> |
|
|
Теги форматування тексту |
|
Абзац |
<P> |
З нового рядка |
<BR> |
Горизонтальна лінія |
<HR> |
Жирний |
<B> </B> (<STRONG> </STRONG>) |
Курсів |
<I> </I> (<EM> </EM>) |
Підкреслений |
<U> </U> (<STRIKE > </ STRIKE >) |
Нижній індекс |
<SUB> </SUB> |
Верхній індекс |
<SUP> </SUP> |
Завдання параметрів шрифтів |
<FONT> FACE=”Arial” SIZE=+2 COLOR==”red“</FONT> |
Атрибути |
|
Шрифт |
FACE |
Розмір |
SIZE |
Колір |
COLOR |
Вирівнювання по центру |
<CENTER> </ CENTER > |
Вирівнювання до лівого краю |
<LEFT> </LEFT> |
Вирівнювання до правого краю |
<RIGHT> </ RIGHT > |
Вставка малюнків
|
<IMG SRC=”c:\windowsME\Wood.bmp”ALT=”заставка Ліс”ALIGN =“center” WIDTH=”240” HEIGHT=”200”> |
Атрибути |
|
Адреса малюнка - файл з розширенням файлу jpg, gif, bmp |
SRC |
Альтернативний текст |
ALT |
Місце розташування на екрані |
ALIGN |
Ширина та висота малюнка |
WIDTH, HEIGHT |
Вставка гіперпосилання |
<A HREF=”NAU.html” > НАУ </A> |
Атрибут – адреса посилання |
HREF |
Списки |
|
Заголовок списку |
<LH> </LH> |
Ненумерований список |
<UL> </UL> |
Нумерований список |
<OL TYPE=”1”> </OL> |
Елемент списку |
<LI> |
Динамічні ефекти |
|
Бігучий текст |
<MARQUEE>Hello! </MARQUEE> - <MARQUEE BGCOLOR=”pink” ”WIDTH=”100”>TEKCT</MARQUEE> |
|
|
Таблиці |
|
Початок таблиці, фон та бордюр |
<TABLE BGCOLOR=”silver” BORDER=”10” |
Заголовок таблиці |
<CAPTION> Розклад</CAPTION > |
Шапка таблиці |
<THEAD> <TR><TH>Час<TH>Предмет<TH>Вид заняття |
Тіло таблиці – зміст кожного рядка |
<TRBODY> <TR><TD>9:00 <TD>English <TD>Practice <TR><TD>10:30 <TD>Informatics <TD>Lection …… |
Кінець таблиці |
</TABLE> |
Фрейми (кадри) |
|
Тегі поділення екрану на кадри Атрибути |
<FRAMESET> и </FRAMESET>
|
Ділення екрану по вертикалі |
COLS |
Ділення екрану по горизонталі |
ROWS |
Адреса документу, відображеного у кадрі |
SRC |
Регулювання смуги прокрутки (Yes, No, Auto) |
SCROLING |
Frame.htm
Зміст |
Текст мовою HTML |
Початок HTML документу |
<HTML> |
Заголовок вікна |
<HEAD><TITLE>Моя страничка</TITLE></HEAD> |
Розмір рядків |
<FRAMESET ROWS="18%,82%,*"> |
Зміст першого рядка |
<FRAME SRC="Бегущая строка.htm"> |
Розмір стовпчиків |
<FRAMESET COLS="20%,40%,40%"> |
Зміст першого стовпчика |
<FRAME SRC="Fig.htm"> |
Зміст другого стовпчика |
<FRAME SRC="Summary.htm"> |
Зміст третього стовпчика |
<FRAME SRC="Table.htm"> |
Закриття тегу FRAME |
</FRAME> |
Закриття HTML документу |
</HTML> |
Бігаючи стрічка.htm
Зміст |
Текст мовою HTML |
Початок HTML документу та заголовок вікна |
<HTML> <HEAD> <TITLE>Бегущая строка </TITLE> </HEAD> |
Початок змістовної частини |
<BODY> |
Розміщення по центру |
<CENTER> |
Бігучий текст на срібному фоні з визначеними параметрами шрифту |
<MARQUEE BGCOLOR="silver" WIDTH="600" HEIGHT="40"><B> <FONT SIZE=+2> Розробка Web - сторінки </FONT></B> </MARQUEE> |
Закриття тегів та HTML документу |
</CENTER> </BODY> </HTML> |
Summary.htm
Зміст |
Текст мовою HTML |
Початок HTML документу та заголовок вікна |
<HTML> <HEAD> <TITLE> Резюме </TITLE> </HEAD> |
Початок змістовної частини з визначеними параметрами фону та тексту |
<BODY BGCOLOR="pink"> <FONT SIZE=+2> |
Розміщення по центру |
<CENTER> |
Текст з розміткою |
Мене звуть <BIG> <I>Оксана</I> </BIG> <BR> Я студентка <BR> Моя майбутня спеціальність - економіст |
Перепустка двох рядків |
<BR> <BR> |
Заголовок списку |
<LH> Мої улюблені предмети: </LH> |
Нумерований список |
<OL TYPE="1"> |
Перший елемент списку |
<LI>Історія |
Другий елемент списку |
<LI>Економіка |
Третій елемент списку |
<LI>Інформатика |
Закриття списку |
</OL> |
Гіперпосилання |
<A HREF="list.htm"> Я вчусь на ФКС </A> |
Закриття тегів та HTML документу |
</FONT> </CENTER> </BODY> </HTML> |
Table.htm
Зміст |
Текст мовою HTML |
Початок HTML документу та заголовок вікна |
<HTML> <HEAD> <TITLE> Таблица </TITLE> </HEAD> |
Початок змістовної частини з визначеними параметрами фону та тексту |
<BODY BGCOLOR="silver" TEXT="black"> <FONT SIZE=+2> |
Абзац, розміщення по центру |
<P> <CENTER> |
Фон та бордюр таблиці |
<TABLE BGCOLOR="pink" BORDER="10" > |
Заголовок таблиці |
<CAPTION><FONT SIZE=+2><U><B>Розклад занять </B> </U> </CAPTION> |
Шапка таблиці |
<THEAD> <TR> <TH> Час <TH> Предмет <TH> Вид занять |
Початок таблиці |
<TRBODY> |
Зміст першого рядка |
<TR> <TD> 9:00 <TD> English <TD> Practice |
Зміст другого рядка |
<TR> <TD> 10:30 <TD> Informatics <TD> Lection |
Зміст третього рядка |
<TR> <TD> 12:20 <TD> Sport <TD> Training |
Закриття тегів |
</FONT> </TABLE> </P> </CENTER> |
Вибір курсиву |
<I> |
Гіперпосилання 1 |
<A HREF="f1.htm"> На лекції </A> <BR> |
Гіперпосилання 2 |
<A HREF="f2.htm"> На практичних заняттях </A> <BR> |
Гіперпосилання 3 |
<A HREF="f3.htm"> На дозвіллі </A> </I> </TABLE> |
Закриття тегів та HTML документу |
</FONT> </BODY> </HTML> |
Файли, на які зроблені гіперпосилання
Зміст |
f1.htm |
f2.htm |
Початок HTML документу та заголовок вікна |
<HTML><HEAD><TITLE> В аудиторії </TITLE></HEAD> |
<HTML><HEAD><TITLE> В лабораторіЇ</TITLE></HEAD> |
Початок змістовної частини |
<BODY> |
<BODY> |
Бігучий текст на срібному фоні з визначеними параметрами шрифту |
<MARQUEE BGCOLOR="silver" WIDTH="600" HEIGHT="40"> <B> <FONT SIZE=+2> На лекції </FONT> </B> </MARQUEE> |
<MARQUEE BGCOLOR="silver" WIDTH="600" HEIGHT="40"><B> <FONT SIZE=+1> На практичних заняттях </FONT></B> </MARQUEE> |
Вставка фото з визначеними параметрами зображення та альтернативним підписом |
<IMG SRC="sigwork.jpg" ALT="Фото" WIDTH="400" HEIGHT="600"> |
<IMG SRC="MIR.jpg"ALT="Фото" WIDTH="300" HEIGHT="300"> |
Закриття HTML документу |
</BODY> </HTML> |
</BODY> </HTML> |
Правильне читання кирилиці:
<HTML>
<HEAD>
<TITLE>Scriptsnetwork ::: Условия и правила пользования</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</HEAD>
<style type="text/css">
Створення Web-сторінок можливо без спеціального програмного забезпечення (тобто код набрати в текстовому файлі, а потім змінити його розширення *.txt на *.htm), але краще працювати у спеціальному HTML-редакторі. Наприклад, HTMLPad 2002. Він створює порожню початкову Web-сторінку заголовок+тіло (заощадження часу) дозволяє попередній перегляд сторінок, надає допомогу своїми меню і функціями.