Додаток 2_MУ_HTML_Web сайт

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ ОДЕСЬКИЙ ДЕРЖАВНИЙ ЕКОНОМІЧНИЙ УНІВЕРСИТЕТ

МЕТОДИЧНІ ВКАЗІВКИ ДО НАВЧАЛЬНО-КОМП'ЮТЕРНОЇ ПРАКТИКИ

студентів II курсу денної форми навчання всіх спеціальностей

Частина 1. Мова HTML Випуск 2

Усі цитати, цифровий і фактичний матеріал, бібліографічні відомості перевірені, написання сторінок відповідає стандартам.

Зауваження рецензентів ураховані

ЗАТВЕРДЖЕНО

на засіданні кафедри ОТ та ІС в Е Протокол № 5 від “26” січня 2006 р.

(Підпис укладачів)

Одеса ОДЕУ 2007

Методичні вказівки до навчально-комп'ютерної практики студентів II курсу денної форми навчання всіх спеціальностей. Частина 1. Мова HTML. Випуск 2 (Укл. О.В.Орлик, В.С.Зоріна, О.Г.Єсіна – Одеса: ОДЕУ, ротапринт, 2007 р. – 40 с.)

Укладачі: О.В.Орлик, канд. екон. наук, доцент В.С.Зоріна, ст.викладач О.Г.Єсіна, ст.викладач

Рецензенти: О.М. Гострик, канд.екон.наук, доцент (зовнішній рецензент)

І.В. Бакова, канд.екон.наук, доцент С.М. Таракановський, канд.екон.наук, доцент

Коректор: О.П.Колесова

2

ВСТУП

Методичні вказівки призначені для проходження студентами 2 курсу денної форми навчання навчально-комп’ютерної практики.

Мета запропонованих методичних вказівок – вивчити загальну структуру мови HTML і її основні можливості при створенні Web-сторінок, освоїти порядок роботи з браузером Internet Explorer 5 та сформувати у студентів практичні навички при створенні власних Web-сторінок.

Для закріплення теоретичного матеріалу в методичних вказівках пропонуються питання для самоконтролю, а для отримання практичних навичок - практичні вправи та роботи. Все це сприятиме кращому засвоєнню матеріалу навчально-комп’ютерної практики.

Методичні вказівки можна використовувати як посібник для проходження студентом навчально-комп'ютерної практики, а також для самостійного оволодіння мовою HTML.

1. Теоретичні відомості

1.1 Ознайомлення з мовою HTML. Вступ до Web-дизайну

HTML (HyperText Markup Language) – мова розмітки, яка використовується при підготовці Web-сторінок.

Текстові документи створюють за допомогою текстових редакторів, наприклад, NotePad, MS WORD, зберігають у файлах, виводять на екран для візуального перегляду і друкують на папері. Гіпертекстові документи не призначені для виведення на папір. Головне їхнє застосування – подання інформації на екран комп’ютера.

Як відомо, гіперпосилання може мати вигляд підкресленого тексту, іншого, ніж основний текст, кольору, рисунка або деякого значкапіктограми. Воно містить невидиму для користувача частину – адресу файла чи позначки у документі, до якого потрібно перейти, і реагує на укажчик і клацання миші. Якщо укажчик миші навести на гіперпосилання, то він набуде вигляду долоні. Якщо тепер клацнути лівою клавішею миші, то виконається перехід на інше місце в тексті або відкриється новий файл. Такий файл може містити текст, звук чи відображення.

Гіпертекст – це електронний документ, який містить гіперпосилання на інші документи.

Гіпертекстова технологія – це інформаційна технологія, що базується на використанні гіпертекстів. Її застосовують у комп’ютерних енциклопедіях і навчальних програмах для роботи з довідковою інформацією у WWW просторі, тобто для роботи з web-документами.

Web-документи зберігаються і пересилаються як текстові файли з розширенням htm чи html тощо. Це звичайні тексти, написані мовою HTML. Відображаються такі тексти на екрані зовсім інакше, ніж вони виглядають у

3

html-файлі. Для відображення html-файлів використовують браузери.

Отже, Web-документ – це текст, написаний мовою HTML чи іншою, який призначений для перегляду електронної інформації на екрані комп’ютера за допомогою браузера.

Web-документ, який ми бачимо на екрані браузера, називають Webсторінкою. Це пов’язано з тим, що хорошим стилем вважається подання деякої частини інформації на одній умовній сторінці. Web-сторінка може містити текст, графіку, звукове супроводження, анімацію, інші мільтимедійні об’єкти, гіпертекстові посилання.

Декілька Webдокументів на одну тему, що є на будь-якому комп’ютері чи належить одному власникові, утворюють web - вузол (інший термін – web - сайт). Сторінки Web - вузла зв’язані між собою за допомогою гіперпосилань.

Web - дизайн – це сукупність правил і рекомендацій, якими мають користуватися автори, якщо вони хочуть щоб їхні сторінки були інформативними і виглядали привабливо.

Одне з найважливіших правил Web - дизайну полягає у структуризації інформації, вдалому поділі її на окремі частини і налагодженні зв’язків між ними.

1.2 Структура Web - документа

Простий документ складається з текстових блоків, двох-трьох рисунків невеликих розмірів, горизонтальних ліній та гіперпосилань. Більш складні webдокументи містять фрейми – рамки, в яких одночасно відображаються різні сторінки; елементи керування – кнопки, перемикачі, поля діалогу; динамічні ефекти та графічні рухомі об’єкти.

Текстові блоки є трьох типів: короткі (по два-три речення) текстові абзаци, списки, таблиці.

Питання для самоконтролю

1.Для чого призначені гіпертекстові документи?

2.Що являє собою гіпертекст?

3.Що являє собою гіпертекстова технологія?

4.Для чого призначені браузери?

5.Що являє собою Web-документ?

6.Що утворює Web-вузол?

7.Що являє собою Web-дизайн?

8.З яких компонентів складається Web-документ?

4

2. Теги HTML. Атрибути тегів. Коментарі

2.1 Основні теги мови HTML

Для підготовки html-файлу можна використовувати текстовий редактор NotePаd, що дає змогу готувати файли у текстовому форматі. Після написання html - файл потрібно зберегти на диску з будь-якою назвою з розширенням назви htm чи html.

Для збереження свого полі Тип вибрати “Все файла та розширення

файла у текстовому редакторі NotePаd необхідно в файли *.*” , а в полі “Имя файла” ввести ім’я свого

.HTM або .HTML

Відкривши такий файл у браузері, побачимо Web-сторінку, де відомості будуть розміщені дещо інакше, ніж у файлі.

Команди мови HTML називаються тегами. Вони являють собою послідовності символів у дужках < >.

Теги бувають одинарними і парними. Більшість тегів – парні. Такі теги називаються контейнерами. Контейнер може містити текст та інші теги.

Парні теги позначають початок і кінець області дії відповідної команди.

Теги записуються у кутових дужках. Тег, що закриває область дії, має косу риску.

Тег означення html–файла (початок і кінець документа):

<HTML>...</HTML>.

У середині пари тегів <HEAD>...</HEAD> описується заголовок документа.

Головна частина заголовка документа – заголовок Windows-вікна, який пишуть у середині пари тегів <TITLE>....</TITLE>.

Нечислові записи параметрів прийнято записувати у лапках.

Для того, щоб записати адресу використовують парний тег

<ADDRESS> елемент </ADDRESS>.

Тег <!--текст--> позначає коментар. Текст у середині цього тега виводитися на екран не буде.

Коментар можна писати також у середині парного тега

<COMMENT>текст-коментар </COMMENT>.

Інакше теги можуть називатися елементами (вони можуть писатися також малими літерами).

Тег BODY

У середині пари тегів <BODY>...</BODY> записують увесь текст сторінки. Цей текст відображається у вікні браузера.

5

Простіший правильний документ HTML (Рис.1): <HTML>

<HEAD>

<TITLE> Заголовок документа </TITLE> </HEAD>

<BODY>

Цей текст можна прочитати на екрані! </BODY>

<HTML>

Цей документ виглядає при перегляді за допомогою браузера Internet Explorer таким чином:

Рис.1. Приклад документа мовою HTML

Тег BODY може містити параметри, які записуються у першому блоці тега через пропуск чи з нового рядка, наприклад, <BODY TEXT=“red”>...</BODY>.

Основні атрибути тега <BODY>:

BACKGROUND =	Задає шлях до картинки для тла (фона)
“d:\myweb\picture1.jpg”
BACKGROUND=“picture1.jpg”	Задає картинку для тла (фона) (при умові
	розташування графічного файла в папці
	з основним html - файлом)
BGCOLOR = “назва кольору”	Задає колір тла
TEXT = “назва кольору”	Задає колір тексту на сторінці, для якого
	не використовується тег <FONT>
Приклади:

<BODY BACKGROUND=“d:\myweb\picture1.jpg” TEXT=RED> Текст </BODY> або <BODY BGCOLOR=”SILVER” TEXT=RED> Текст </BODY>

6

Форматування тексту

Текст можна форматувати за допомогою спеціальних тегів форматування:

Теги для форматування тексту:

1.<FONT атрибути> текст </FONT> - Задає розмір, колір та тип шрифту тексту, розміщеного всередині тегу. Тег повинен мати хоча б один з трьох можливих атрибутів.

2.<BASEFONT атрибути> текст - Задає розмір, колір та тип шрифту для всього документа в цілому. Ці величини можуть бути перепризначені за допомогою тегу <FONT>. Після закриття тегу <FONT> значення тегу <BASEFONT> відновлюються. Значення атрибутів <BASEFONT> можуть бути змінені іншим тегом <BASEFONT> у будь-якому місці документа. Тега, що закривається немає.

Атрибути тегів <FONT> та <BASEFONT>

FACE=”Arial”	Задає тип шрифту (тут Arial)
SIZE = 5	Задає розмір шрифту (від 1 до 7). За замовченням – 3
COLOR=”blue”	Задає колір шрифту (тут синій)

Приклад:

<FONT FACE = ”Arial” SIZE=6 COLOR = ”Green”> Текст </FONT>

Теги для видозміни шрифту та його накреслення

<B> текст </B>	Товстий шрифт тексту
	(оформлювальне виділення)
<STRONG> текст </STRONG>	Товстий шрифт тексту (смислове
	виділення)
<І> текст </І>	Шрифт-курсив (оформлювальне
	виділення)
<EM> текст </EM>	Шрифт-курсив (смислове виділення)
<B><І> текст </І> </B>	Товстий курсив
<U> текст </U>	Підкреслений шрифт
<SUB> текст </SUB>	Нижній індекс H2O
<SUР> текст </SUР>	Верхній індекс 1 а вулиця
<BIG> текст </BIG>	ВЕЛИКИЙ ШРИФТ
<SMALL> текст </SMALL>	МАЛИЙ ШРИФТ
<CITE> текст </CITE>	Текст є цитатою з іншого джерела
	Зображається курсивом
<S> текст </S>	Закреслення тексту
Теги для розміщення тексту
<PRE>…</PRE>	Дозволяє використовувати попередньо
	відформатований текст. Всередині

7

		нього можна використовувати теги з
		форматування тексту
<P>		Початок абзацу
<P>текст абзацу</P>		Можна використовувати як парний
<ВR>		Примусовий перехід на новий рядок
<Н1> Заголовок 1</Н1>		Заголовок 1 (усього до семи)
		Заголовок вирівнюється до лівого краю
		вікна
Тегі для вирівнювання тексту на сторінці
<CENTER>елемент</CENTER>		Вирівнювання до центру
<LEFT>елемент</LEFT>		Вирівнювання до лівого краю
<RIGHT>елемент</RIGHT>		Вирівнювання до правого краю
Тег <HR> - тег для проведення горизонтальної лінії.
Атрибути тегу <НR>
ALIGN = значення	Вирівнювання лінії по краях або центру, має
	значення LEFT, CENTER, RIGTH
SIZE = 6	Задає ширину лінії у пікселях (тут – 6)
WIDTH = 50%	Задає довжину лінії у пікселях або у % від ширини
	вікна браузера (тут 50 % від ширини вікна)
COLOR =Red	Задає колір лінії (тут червоний)
NOSHADE	Відміняє рельєфність лінії

Приклад:

<HR WIDTH=50% SIZE=6 ALIGN=CENTER COLOR=RED>

Основні кольори мають такі назви

Black - чорний	Green - зелений
Navy – темно-синій	Еeal - бірюзовий
Silver - сірий	Lime – яскраво-зелений
Blue - синій	Aqua - блакитний
Maroon - малиновий	Olive – темно-зелений
Purple - червоний	Gray – темно-сірий
Red - червоний	Yellow - жовтий
Fushsia - рожевий	While - білий

Різних відтінків цих кольорів є 16 мільйонів.

8

Увага! Перед виконанням вправ створіть папку під своїм ім’ям, де і зберігайте створені вами файли

Вправа 1. У текстовому редакторі NotePаd створіть структуру html-файла за допомогою тексту, в якому ви розповідаєте про себе:

<HTML>	<!--Це файл file1.htm-->
<HEAD>
<TITLE>Назва вікна web - сторінки </TITLE>
</HEAD>
<BODY BGCOLOR="aqua" TEXT = "red"> <!--	Bибір кольору тла та тексту-->
<!--Далі напишіть текст, такий, наприклад:---	>
Мене звати.....
Мені ..... років.

Я навчаюсь в Одеському державному економічному університеті.

…

</BODY>

</HTML>

Збережіть цей файл під новим ім’ям, наприклад, file1.htm Перегляньте цей файл у браузері!

Вправа 2. Змініть текст свого файла, використовуючи теги форматування заголовка та текста. Наприклад:

<HTML>	<!--Це файл file2.htm-->
<HEAD>
<TITLE> My new Web-page </TITLE>	<!--Це заголовок Windows-вікна-->
</HEAD>
<BODY параметри>
<H1>Це Web-сторінка Іванова </H1>	<!--Заголовок1 -->
<HR>
<H2>Відомості про мене </H2>	<!--Заголовок2 -->
<CENTER>

<FONT FACE="Arial Black" COLOR="blue" SIZE=5> <!--Вибір типу, кольору та розміру шрифту-->

<B>Привіт!</B> <BR> <!--Вибір товстого шрифту та примусовий перехід на новий рядок-->

Мене звати <BIG>Віктор</BIG> <!--Вибір великого шрифту-->

</FONT>

</CENTER>

<FONT FACE="Arial" COLOR="green" SIZE=4> <!--Вибір типу, кольору та розміру шрифту-->

9

<!--Далі відредагуйте свій текст, додаючи до нього нові відомості про себе-->

Мені ..... років. Я навчаюсь в Одеському державному економічному університеті. ...... <BR>

Після закінчення університету я буду працювати в .....

</FONT>

Моя адреса: <!--Напишіть адресу, використовуючи спеціальний тег-- >

</BODY>

</HTML>

Збережіть цей файл під новим ім’ям, наприклад, file2.htm Перегляньте цей файл у браузері!

2.2 Створення списків. Списки означень

Типи списків є: ненумерований та нумерований, а також список означень. Списки можуть бути вкладеними.

Список може мати заголовок, який охоплюють тегами, наприклад: <LH> Заголовок списку </LН>.

Ненумерований список утворюють за допомогою парного тега:

<UL> ...</UL> і одинарних тегів <LI> чи <Li>.

Необов’язковий атрибут TYPE дозволяє встановити види маркерів: TYPE=circle – маркер у вигляді білого кола.

TYPE= square – маркер у вигляді квадратика (діє за замовченням).

Наприклад:

Текст у редакторі NotePаd	Текст на екрані браузера
<LH>Мої улюблені предмети: </LН>	Мої улюблені предмети:
<UL>		інформатика
<LI>інформатика		англійська мова
<LI>англійська мова		історія
<LI>історія
</UL>

Нумерований список створюють за допомогою парного тега <ОL>….</ОL> з необов’язковим параметром TYPE і одинарних тегів <LI>

чи <Li>.

Необов’язковий атрибут TYPE дозволяє встановити види маркерів: TYPE=А або TYPE=а – маркер у вигляді великих (малих) латинських

літер (A, B, C… або a, b, c…).

TYPE=I або TYPE=i – маркер у вигляді великих або малих римських цифр (I, II, III… або i, ii, iii…).

TYPE=1 – маркер у вигляді арабських цифр (діє за замовченням).

10