ЭИ_ПОСОБИЕ_ЧАСТЬ_1

HTML дозволяє використовувати наступні три типи списків:

упорядкований список (елемент OL).

неупорядкований список (елемент UL).

список визначень (елемент DL).

Упорядковані списки - тег <OL>

Упорядкований список (те ж, що нумерований список у Word) відкривається контейнерним тегом <OL>, а кожен його пункт починається стандартним тегом <LI>. Програма перегляду, зустрівши тег <OL> упорядкованого списку, послідовно нумерує пункти списку: 1, 2, 3 тощо. Для форматування заголовка списку використовується спеціальний тег <LH> Для закриття списку використовується тег </OL>. Початковий і кінцевий теги забезпечують переведення рядка до і після списку, відокремлюючи, таким чином, список від іншого тексту. Це виключає необхідність використовувати теги абзаца <P>.

Для відділення пунктів списку один від одного можна використовувати теги абзаца.

Упорядковані списки допускають вкладення один у одного.

Таблиця 1.5

		Атрибути упорядкованого списку
	Атрибут	Призначення
	Compact	Указує браузерові клієнта представити список у більш компактному вигляді.
		Вид списку буде залежати від браузера і його настроювань.
		Установлює стиль списку. Стиль визначається одним з наступних значень.
		l (L маленька)- установлює маркер у виді арабських цифр.
	Type	I- установлює маркер у вигляді великих римських цифр.
		i - установлює маркер у вигляді маленьких римських цифр.
		А - установлює маркер у вигляді великих букв.
		а - установлює маркер у вигляді малих літер.
	Start	Установлює початковий маркер у поточному списку.

Неупорядкований список

У HTML існує можливість створення неупорядкованих, маркірованих, списків - без нумерації абзаців. Для створення неупорядкованих списків використовують елемент UL.

Елемент UL

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

–маркери списку. Як і в упорядкованих списках, тут також забезпечується переведення рядка до і після списку і допускається створення вкладених

51

списків. Список міститься усередині контейнерного тега <UL>. У неупорядкованих списках можна використовувати ті ж атрибути, що й в упорядкованих. Однак атрибут TYPE елемента UL допускає тільки три наступні значення: «disc», «square» і «circle», що задають маркери, відповідно, у вигляді жирної крапки, квадрата й окружності.

Список визначень

Списки визначень представляють текст у формі словникової статті, що складається з терміну і наступного текстового абзаца, що пояснює зміст терміна. Такі списки зручні, наприклад, для складання каталогів або для опису функцій підрозділів якої-небудь організації. Елемент списку визначень DL є контейнером і відокремлює список від іншого тексту HTML-документа порожніми рядками. Усередині контейнера термін, який треба визначити, позначається тегом <DT>, а абзац з його описом - тегом <DD>. Теги <DT> і <DD> відносяться до одиночних тегів.

Списки можна комбінувати.

4. Створення зображення і використання його на Web-сторінці

Елемент IMG дозволяє включати в поточний HTML-документ зображення, що зберігається у файлі. Це одиночний тег. Значення деяких атрибутів:

SRC – задає місце розташування зображення форматів gif, jpeg, png. HEIGHT – перевизначення висоти зображення.

WIDTH - перевизначення ширини зображення.

VSPACE – визначає вільний простір над і під зображеннями.

HSPACE - визначає вільний простір ліворуч і праворуч від зображення. ALIGN – вирівнювання. Може приймати наступні значення:

bottom, middle, top – вирівнювання вікна об'єкта по вертикалі по нижньому рівні базової лінії, по центру і по верхньому рівні відповідно;

left, right, center – вирівнювання по горизонталі ліворуч, праворуч і по центру відповідно.

5. Створення таблиць

Мова HTML надає можливість створення таблиць.

Елемент TABLE являє собою контейнерний тег, у якому знаходиться весь уміст таблиці. Для позначення рядка використовується контейнерний тег TR, для позначення заголовків стовпців (рядків) – контейнерний тег TH, а для

52

даних в осередках – контейнерний тег TD. Атрибути елемента TABLE.

ALIGN задає вирівнювання таблиці усередині документа і може приймати наступні значення:

left – таблиця знаходиться в лівій частині документа; center – таблиця знаходиться в центрі документа;

right – таблиця знаходиться в правій частині документа; BORDER – задає товщину лінії таблиці.

WIDTH – визначає ширину таблиці. Якщо значення зазначене у відсотках, це означає частку у відсотках від доступного браузеру горизонтального простору.

Елемент CAPTION призначений для введення заголовка (назви) таблиці. Атрибут ALIGN указує розташування заголовка щодо таблиці – угорі (top), унизу (bottom), ліворуч (left), праворуч (right). За замовчуванням використовується значення top.

Елементи TR, TH і TD

Елемент TR не має характерних атрибутів і служить контейнером для осередків, що входять у рядок таблиці. Кожен новий рядок таблиці повинен починатися з тега TR. Кінцевий тег елемента TR можна опустити. Осередки, що входять у рядок, задаються елементами TH (заголовок) і TD (дані), оскільки в осередках таблиці можуть утримуватися дані двох типів: заголовна інформація і дані. Для об'єднання рядків або стовпців використовуються відповідно атрибути ROWSPAN і COLSPAN. Вони визначають, яка кількість рядків і стовпців займає осередок. Наприклад, ROWSPAN=3 поєднує в одному осередку три рядки.

6. Створення опису фреймів

Мова HTML дозволяє в рамках однієї Web-сторінки відобразити декілька елементів. Для цього сторінка повинна бути розбита на декілька областей – фреймів. Розбивка сторінки описується документом HTML особливого роду, структура якого відрізняється від звичайної. Тіло документа заміняється описом фреймів, що задається парним тегом <FRAMESET>. Елемент BODY у такому документі має бути відсутнім, а при наявності - ігнорується браузером.

Відкриваючий тег <FRAMESET> мусить містити обов'язковий атрибут COLS= або ROWS=, що визначає спосіб розбивки вікна. У першому випадку

53

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

<FRAMESET COLS="60%, 40%">

Значення можуть бути задані в пікселях або у відсотках від ширини вікна. Остання область може бути визначена за допомогою символу «*», що означає, що їй виділяється весь простір, що залишився.

<FRAMESET ROWS="40%, 40%, *">

Між тегами <FRAMESET> і </FRAMESET> має бути розташовано рівно стільки елементів, скільки областей створено за допомогою атрибутів COLS= і ROWS=. При цьому можуть використовуватися додаткові елементи FRAMESET, що описують подальшу розбивку на підобласті ще меншого розміру або непарні теги <FRAME>, що визначають спосіб використання області.

Тег <FRAME> мусить містити обов'язковий атрибут SRC=, за допомогою якого вказується, який документ спочатку завантажується у відповідну область. Значення цього атрибута - абсолютна або відносна адреса URL потрібного документа.

Серед інших атрибутів виділяється атрибут NAME=, що дозволяє задати «ім'я» створеної області у виді послідовності латинських букв і цифр, використаної як значення цього атрибута.

<FRAME SRC="text.htm" NAME="left">

Це ім'я можна використовувати, щоб завантажувати нові документи в раніше створену область. Для цього в тег <A>, що визначає гіперпосилання, необхідно додати атрибут TARGET=, значення якого збігається з раніше визначеним ім'ям області. При переході по даному гіперпосиланню новий документ завантажиться в зазначений фрейм.

Методичні вказівки до виконання завдання № 6

Тема: Створення Web-документів

Ціль: Одержати навички роботи в середовищі HTML. Навчитися основних прийомів проектування і розробки Web-документів.

План

1.Створення найпростішої Web-сторінки.

2.Вивчення прийомів форматування HTML-документів.

54

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

4.Прийоми форматування тексту.

5.Прийоми створення списків.

6.Створення зображення і використання його на Web-сторінці.

7.Створення таблиць.

8.Створення опису фреймів.

1.Створення найпростішої web-сторінки

1.Запустіть текстовий редактор Блокнот (Пуск\Все программы\

Стандартные\ Блокнот).

2.Уведіть наступний документ:

<HTML>

<HEAD>

<TITLE> Лабораторна робота 4 </TITLE> </HEAD>

<BODY>

Створення Web документа

</BODY>

</HTML>

3. Збережіть цей документ під ім'ям first.htm.

Перед збереженням переконайтеся, що скинуто прапорець Не показывать расширения для зареєстрованих типів файлів (Пуск\Панель управления\Свойства папки\Вид). У противному разі редактор Блокнот може автоматично додати в кінець імені розширення .txt.

4.Запустите програму Internet Explorer (Пуск\Программы\Internet Explorer).

5.Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл first.htm.

6.Подивіться, як відображається цей файл - найпростіший коректний документ HTML. Де відображається вміст елемента TITLE? Де відображається вміст елемента BODY?

7.Як відображаються слова «Створення» і «Web документа», введені в

двох окремих рядках? Чому? Перевірте, що відбувається при зменшенні ширини вікна.

55

2.Вивчення прийомів форматування документів html

1.Відкрийте документ first.htm у програмі Блокнот і збережіть цей документ під ім'ям paragraph.htm (Файл\Сохранить как).

2.Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, що буде вводитися в наступних пунктах цього завдання, необхідно помістити після тега <BODY>.

3.Уведіть заголовок першого рівня між тегами <H1> і </ H1>.

<H1>Базові програмні засоби інформаційних технологій</ H1>

4.Уведіть заголовок другого рівня, уклавши його між тегами <H2> і

</H2>

<H2> Класифікація програмного забезпечення </H2>

5.Введіть окремий абзац тексту, почавши його з тега <P>. Пробіли і символи переводу рядка можна використовувати усередині абзаца довільно.

<P> У залежності від функцій, що виконуються програмним забезпеченням, його можна розділити на дві групи:

6.Уведіть тег горизонтальної лінії <HR>.

7.Уведіть наступні абзаци тексту, почавши їх з тега <P>.

<P>базове програмне забезпечення; <P>прикладне програмне забезпечення.

8.Уведіть тег горизонтальної лінії <HR>.

9.Продовжіть введення тексту.

<P> Під базовим програмним забезпеченням інформаційних систем розуміється сукупність програмних і документальних програмних засобів створення й експлуатації системи обробки даних.

<P>Прикладне програмне забезпечення призначене для рішення конкретних задач користувача й організації обчислювального процесу.

10.Збережіть змінений файл paragraph.htm

11.Запустіть Internet Explorer (Пуск\Программы\Internet Explorer).

12.Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл paragraph.htm.

13.Подивіться, як відображається цей файл. Установіть відповідність між елементами коду HTML і фрагментами документа, що відображені на екрані.

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

1.Відкрийте документ first.htm у програмі Блокнот і збережіть під ім'ям

56

link.htm (Файл\Сохранить как).

2.Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, що буде вводитися в наступних пунктах цього завдання, необхідно помістити після тега <BODY>.

3.Уведіть фразу: Текст до посилання.

4.Уведіть тег: <А HREF="first.htm">.

5.Уведіть фразу: Посилання.

6.Уведіть закриваючий тег </A>.

7.Уведіть фразу: Текст після посилання.

8.Збережіть змінений документ link.htm

9.Запустіть Internet Explorer (Пуск\Программы\Internet Explorer)..

10.Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл link.htm.

11.Переконайтеся в тому, що текст між тегами <A> і </А> виділений як посилання (кольором і підкресленням).

12.Клацніть на посиланні і переконайтеся, що при цьому завантажується документ, на який указує посилання.

13.Клацніть на кнопці Назад на панелі інструментів, щоб повернутися до попередньої сторінки. Переконайтеся, що посилання тепер вважається переглянутим і відображається іншим кольором.

4.Прийоми форматування тексту

1.Відкрийте документ paragraph.htm у програмі Блокнот і збережіть його з ім'ям format.htm (Файл\Сохранить как).

2.Задайте форматування тексту, використовуючи наступні теги й атрибути.

Після тега <BODY> уведіть тег <BASEFONT SIZE="5" COLOR="BROWN">. Він задає виведення тексту шрифтом, більшим, ніж за замовчуванням, і коричневим кольором.

3.Перший абзац тексту залиште без змін, він буде виводитися шрифтом, заданим за замовчуванням.

5.У наступному абзаці, після тега <Р> уведіть тег <FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.

6.Завершіть абзац тегом </FONT>.

7.У наступному абзаці використовуйте за своїм розсудом парні теги: <B>

57

(напівжирний шрифт), <I> (курсив), <U> (підкреслення}, <S> (викреслювання), <SUB> (нижній індекс), <SUP> (верхній індекс).

8.У наступному абзаці використайте за своїм розсудом парні теги: <EM> (виділення), <STRONG> (сильне виділення).

9.Збережіть змінений документ format.htm.

10.Запустіть Internet Explorer (Пуск\Программы\Internet Explorer).

11.Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл format.htm.

12.Вивчіть використані елементи HTML, що впливають на спосіб відображення тексту.

13.Поверніться в програму Блокнот і змініть документ так, щоб елементи, що задають форматування, були вкладеними один у одного. Збережіть документ під тим же ім'ям.

14.Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як змінився вигляд сторінки.

5.Прийоми створення списків

1.Відкрийте документ first.htm у програмі Блокнот і збережіть його під ім'ям list.htm (Файл\Сохранить как).

2.Видаліть весь текст, що знаходиться між тегами <BODY> і </BODY>. Текст, що буде вводитися в наступних пунктах цього завдання, необхідно помістити після тега <BODY>.

3.Уведіть текст заголовка:

<H1>Приклад упорядкованого списку</H1> 4. Введіть абзац:

Метод-орієнтовані пакети прикладних програм включають наступні

ППП.

5.Вставте в документ тег <OL TYPE="I">, що починає упорядкований (нумерований) список.

6.Вставте в документ елементи списку, випереджаючи кожний з них тегом <LI>:

математичного програмування; мережного планування і управління; теорії масового обслуговування; математичної статистики.

7.Завершіть список за допомогою тега </OL>.

58

8.Збережіть отриманий документ під ім'ям list.htm.

9.Запустіть Internet Explorer (Пуск\ Программы\ Internet Explorer).

10.Дайте команду Файл\ Открыть. Клацніть на кнопці Обзор і відкрийте файл list.htm.

11.Вивчіть, як упорядкований список відображається в програмі Internet Explorer, звертаючи особливу увагу на спосіб нумерації, заданий за допомогою атрибута TYPE=.

12.Поверніться в програму Блокнот і установіть курсор після закінчення введеного списку.

13.Уведіть текст заголовка:

<H1>Приклад неупорядкованого списку</H1> 14. Введіть абзац:

Базова конфігурація комп'ютера включає чотири пристрої:

15.Вставте в документ тег <UL TYPE="SQUARE">, що починає неупорядкований (маркірований) список.

16.Вставте в документ елементи списку, випереджаючи кожний з них тегом <LI>:

системний блок; монітор; клавіатуру; мишу.

17.Завершіть список за допомогою тега </UL>. Збережіть документ.

18.Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивиться, як змінився вид сторінки, звернувши увагу на спосіб маркірування, заданий за допомогою атрибута TYPE

=.

19.Поверніться в програму Блокнот і установіть текстовий курсор після закінчення введеного списку.

20.Уведіть текст заголовка:

<H1>Приклад списку визначень</H1> 21. Введіть абзац:

Деякі визначення мови HTML

22.Вставте в документ тег <DL>, що починає список визначень.

23.Вставте в список слова, значення яких треба визначити, випереджаючи відповідні абзаци тегом <DT>.

59

24.Вставте в список відповідні визначення, випереджаючи їх тегом

<DD>.

Браузер - програма перегляду Web-сторінок Теги – керуючої конструкції мови HTML Контейнер – парний тег зі своїм умістом

25.Завершіть список за допомогою тега </DL>. Збережіть документ.

26.Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як виглядає при відображенні Web-сторінки список визначень.

6.Створення зображення і використання його на web-сторінці

1.Створіть у Word рисунок і скопіюйте його в буфер обміну, для чого виділіть рисунок і скористайтеся командою Правка\Копировать або контекстне меню\Копировать.

2.Відкрийте програму Paint: (Пуск\Программы\Стандартные\Paint).

Уставте скопійований малюнок.

Сучасні

інформаційні

технології

3.Виберіть кольори фону для тексту й іншої частини рисунка. Залийте рисунок фоновим кольором.

4.Збережіть рисунок під ім'ям pic1.gif (у форматі GIF).

5.Відкрийте документ paragraph.htm у програмі Блокнот і збережіть його під ім'ям picture.htm (Файл\Сохранить как).

6.Після заголовка другого рівня (теги <H2> </H2>) уведіть тег <IMG

SRC="pic1.gif" ALIGN="BOTTOM">.

7.Збережіть змінений документ picture.htm.

8.Запустіть Internet Explorer (Пуск\Программы\ Internet Explorer).

9.Дайте команду Файл\Открыть. Клацніть на кнопці Обзор і відкрийте файл picture.htm. Подивіться на документ, який з'явився на екрані.

10.Поверніться в програму Блокнот і змініть значення атрибута: ALIGN="TOP". Збережіть файл під тим же ім'ям.

11.Поверніться в програму Internet Explorer і клацніть на кнопці Обновить на панелі інструментів. Подивіться, як змінився вид

60