Мова HTML

ВСТУП

Курс “Системи та мережі передачі даних” є спеціалізованої дисципліною, яка формує у майбутніх фахівців по комп’ютеризації систем управління та автоматики чітке уявлення про технічне та програмне забезпечення систем і мереж передачі даних, використання язиків HTML, динамічного HTML, JavaScript для програмування Web - сторінок.

У методичних вказівках наведені метеріали 8 лабораторних занять, у кожному з яких міститься теоретична частина для підготовки до заняття, практична частина, де даються завдання і порядок виконання лабораторної работи, контрольни питання. Виконання лабораторних робіт передбачає використання броузера Internet Explorer. Приведено литературу, що рекомендується для підготовки до занять.

Лабораторна робота № 1.

«HTML: базові директиви, форматування тексту, гіпертекстові посиланя; списки»

Ціль роботи: ознайомлення з мовою HTML і створення найпростішого документа; придбання навиків форматування тексту і використання кольору у форматі HTML 4.0.; вибрати типи використовуваних гіпертекстових посилань і оптимальним чином побудувати сторінку; придбання навиків структуризації документів за допомогою списків.

Теоретична частина.

Мова HTML.

Hyper Text Markup Language – мова гіпертекстової розмітки – мова, за допомогою якої створюються Web - сторінки. Мова розмітки дозволяє визначити зовнішній вигляд документа. Для цього в текст документа вставляються спеціальні коди або дескриптори. Ці команди розставляються в потрібних місцях тексту, визначаючи шрифти, перенесення, графіку, посилання і т.д.

Гіпертекст – це особливий текст, в якому є посилання на іншу Web- сторінку або документ. Клацання на гіперпосиланні приводить до того, що броузер запрошує документ, на який указує посилання, а потім завантажує його у вікно броузера.

Броузер (browser) – програма для перегляду Web – сторінки.

Для розробки HTML - файлів необхідний текстовий редактор. В Windows 95/98 можна використовувати «Блокнот» (Notepad) або WordPad і зберігати в звичайному текстовому форматі. Створюючи Web – сторінку, час від часу потрібно перевіряти, як вона виглядає в броузере. Для цього використовується Microsoft Internet Explorer або Netscape Navigator. Ці броузеры є найпоширенішими. Любій броузер повинен уміти завантажувати сторінки з жорсткого диска також, як він завантажує їх з WWW.

Дескриптор (тег) – основний елемент кодування, ухвалений в стандарті HTML. Теги визначають межі дії елементів і відділяють елементи друг від друга. Теги беруться в кутових дужок <>. Звичайно початкові теги пишуться великими буквами, а кінцеві – маленькими.

Існують два типи HTML – тегов:

1. Контейнер – дескрипторна пара, що складається з початкового (відкриваючого) і кінцевого (закриваючого) дескриптора. Контейнери призначені для зберігання деякої інформації, наприклад тексту або інших HTML – дескрипторів. Контейнер, що містить дані – елемент HTML – документа.

2. Порожній (одиночний) дескриптор – складається тільки з початкового дескриптора і не містить ніякої інформації. Він виконує самостійну задачу, не пов'язану з конкретним текстом.

1.2. Використання стилів.

В HTML 4.0 передбачено декілька способів форматування тексту. Це явне (або абсолютне) форматування за допомогою фізичних стилів; неявне (або відносне) форматування за допомогою логічних стилів; зміна розміру шрифту.

Текст, виділений фізичним стилем, у всіх броузерах відображувався однаково. Логічні в різних броузерах відображувалися по-різному. Дескриптори фізичних стилів наведені в табл.1.1.

Табл. 1.1

Дескриптор	Стиль
<U> <I> <TT> <U> <SUB> <SUP> <STRIKE>	Напівжирний шрифт Курсив Моноширінний шрифт Підкреслення Підрядковий текст Надрядковий текст Перекреслювання

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

Табл. 1.2

Дескриптор	Стиль
<EM> <STRONG> <CITE> <CODE> <SAMP> <DFN> <KBD> <VAR> <ACRONYM>	Виділений текст Сильно виділений текст Текст у вигляді цитати Текст, що представляє собою фрагмент HTML - кода -//- Текст, що представляє собою визначення Текст, що представляє собою назву клавіші клавіатури Текст, визначальний переменную або її значення Абревіатура (акроним) і її розшифровка

За допомогою елемента FONT можна визначити розмір і колір шрифту. Атрибут SIZE дозволяє указати абсолютний розмір шрифту (він може приймати значення від 1 до 7) або відносний, по відношенню до розміру шрифту, використовуваного в основній частині сторінки (він може приймати значення від -4 до +4):

<FONT SIZE=значение>

Для зміни кольору будь-якого символа або групи символів використовується атрибут COLOR, значення якого указується або просто назвою кольору, або шестнадцатеричным числом:

<FONT COLOR=#rrggbb>Текст</FONT> або, наприклад

<FONT COLOR=RED>Текст</FONT>

Для зміни розміру основного шрифту документа використовується елемент BASEFONT:

<BASEFONT SIZE=значение>

Якщо ви хочете помістити на Web - сторінку інформацію, яка вже міститься в деякому документі (але не в HTML - коді), то немає необхідності витрачати час на повторний набір всього документа. Для цього випадку використовується контейнер <PRE>. Цей контейнер дозволяє зберегти форматування тексту таким, яким воно було при наборі, оскільки символи переходу на новий рядок він інтерпретує як розриви рядка. Пропуски всередині тексту інтерпретуються в точній відповідності з їхнім розташуванням в текстовому редакторі. Дескриптори абзаців <Р> і заголовків <Hn>, випадково попадали в контейнер <PRE>, не інтерпретуються. Але в контейнері <PRE> можна використовувати дескриптори стилю і дескриптор <А> для створення прив'язок.

1.3. Застосування горизонтальних ліній в тексті.

Для розділення тексту сторінки на частини можна скористатися горизонтальними лініями. За допомогою дескриптора <HR> можна створити лінію з тінню, що протягнулася уздовж вікна броузера. Якщо користувач змінить розмір вікна, то відповідно змінитися і довжина даної лінії. Дескриптор <HR> є одиночним. При використанні горизонтальних лінійок над і під ними автоматично добавляються символи розриву абзацу. Додаткові атрибути (див. табл. 1.3) дозволяють змінити товщину лінії, її довжину і положення у вікні броузера.

Атрибути SIZE і WIDTH приймають значення в пікселях і в пікселях або відсотках відповідно. Атрибут ALIGN може приймати значення LEFT, RIGHT, CENTER.

Табл. 1.3

Атрибут	Опис
SIZE WIDTH ALIGN NORHADE	Визначає товщину горизонтальної лінії Визначає довжину горизонтальної лінії Визначає спосіб вирівнювання лінії Визначає чорну лінію без ефекту гравіювання

Приклад:

<HR SIZE=5 WIDTH=”25%” ALIGN=CENTER>

Такий запис визначає горизонтальну лінію завтовшки 5 пікселів, выровненную по центру вікна і завдовжки 25% від ширини вікна броузера.

1.4. Використання кольору для зміни фону і тексту.

Без застосування кольорових зображень при створенні Web - сторінки не обійтися.

За допомогою атрибута BGCOLOR дескриптора <BODY> можна визначити колір фону, указавши шестнадцатеричное число, що складається з шести цифр, або назву кольору. Цей атрибут має формат:

<BODY BGCOLOR=#rrggbb>

.....HTML - документ

</BODY>

Запис #rrggbb складається з трьох двухзначных шестнадцатеричных чисел, визначальних співвідношення червоного, зеленого і голубого кольорів.

Для створення графічного фону використовується атрибут BACKGROUND дескриптора <BODY>:

<BODY BACKGROUND=”рисунок.gif”>

Після зміни кольору фону документа або добавки фонового зображення можна змінити колір переднього плану, тобто тексту. Стандартною установкою для більшості графічних броузеров є фарбування всього тексту, за винятком гіпертекстових посилань, чорним кольором. Колір основного тексту можна змінити за допомогою атрибута TEXT дескриптора <BODY>:

<BODY TEXT=#rrggbb>

.....HTML - документ

</BODY>

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

Існують три основні типи гаперссылок: внутрішні, зовнішні і відносні.

Внутрішні посилання (internal links) - це посилання на об'єкти в межах одного документа. Даний тип посилань корисно використовувати на одній сторінці, щоб мати можливість швидко переміщатися між її розділами.

Зовнішні (external links) або видалені посилання (distant links) - це посилання на інші Web - сервери.

Відносні (relative links) або локальні посилання (local links) - це посилання на інші Web - сторінки (або служби Internet), розташовані на одному сервері із сторінкою, що містить посилання.

В кожному посиланні міститься URL (Uniform Resource Locator), або уніфікований локатор ресурсів - це адреса Web - сторінки, який відображувалася в полі Адреса (Location або URL), розташованому в лівому верхньому кутку вікна броузера.

URL складається з двох основних елементів:

1. Тип протоколу визначає вид ресурсу Internet, з яким встановлюється зв'язок. Наприклад, http://, gopher://, ftp://, telnet://.

2. Власне адреса (destination) - це ім'я файла, каталога або комп'ютера.

В HTML для гіперпосилання використовується наступний формат:

<А HREF=«URL»>текст ссылки</А>

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

При створенні внутрішнього посилання користуються символом # і ім'ям прив'язки. Для цього можна вибрати будь-яке ім'я. В іменах можуть міститися букви, цифри, коди спеціальних символів. В результаті виходить об'єктна прив'язка:

<А HREF= «имя_привязки»>текст ссылки</А>

Потім створюється ім'я об'єкта. Після клацання на цьому посиланні броузер буде виконувати пошук по Web - сторінці, поки не знайде ту частину, якій привласнено ім'я прив'язки. Для цього використовується:

<А NAME=«имя привязки»>текст</А>

Ім'я, визначене за допомогою дескриптора <А NAME=«имя привязки»>, не буде відображуватися в броузере.

Посилання на ресурси мультимедіа (файли.mid.wav.au.mpg) створюються так само, як і на будь-які інші HTML - документи.

Посилання на адресу електронної пошти має наступний формат:

<А HREF=«mailto: ім'я користувача @ ім'я комп'ютера. ім'я домена»>текст ссылки</А>

Тут адреса електронної пошти складається з чотирьох елементів. Ім'я користувача (username) - це ім'я, яке ви вводите при реєстрації в системі. Ім'я комп'ютера (machine name) - це ім'я комп'ютера, на якому знаходиться ваш обліковий запис (даний елемент не обов'язковий). Доменне ім'я (domain name) - позначає організацію, надала доступ до Internet. Символ @ (комерційне «at») використовується в адресах електронної пошти для позначення місцеположення користувача.

1.6. Створення списків.

В HTML передбачені можливості створення різних типів списків. Кожний з них може використовуватися як самостійно, так і в поєднанні з іншими типами списків.

Нумеровані (впорядковані) списки.

Даний тип списку створюється за допомогою контейнера <OL></OL>. Кожний елемент списку визначається всередині цього контейнера за допомогою дескриптора <LI> (розшифровується list item - елемент списку).

При створенні нумерованого списку використовується наступний синтаксис:

<OL>

<LI>Первый елемент списку

<LI>Второй елемент списку

...........

<LI>Последний елемент списку

</OL>

Кожний дескриптор <LI> служить для визначення одного елемента списку і є для броузера сигналом про те, що потрібно почати новий рядок. Тому немає необхідності в дескрипторах розриву рядка.

За умовчанням елементи списку нумеруються за допомогою арабських цифр. Стиль форматування списку визначається за допомогою синтаксису:

<OL TYPE=тип>

Параметр тип може приймати значення, наведені в табл. 1.4.

Таблиця 1.4.

Тип	Стиль
а А i I	Стандартний спосіб нумерації за допомогою арабських цифр Рядкові букви алфавіту Прописні букви алфавіту Рядкові римські цифри Прописні римські цифри

Нумерацію списку за допомогою цифр або букв можна почати з будь-якої цифри або букви. Для цього використовується атрибут START:

<OL START=значение>

Параметр значення - це число, з якого буде починатися нумерація списку.

Маркіровані (неврегульовані) списки.

В графічних броузерах навпроти кожного елемента неврегульованого списку знаходиться маркер (bullet), який може мати вигляд, наприклад, великого чорного кружка або квадрата.

При створенні маркірованих списків використовуються дескриптори <UL></UL>. Всі елементи маркірованих списків визначаються за допомогою дескриптора <LI>.

В кожному елементі списку можуть міститися інші HTML - елементи і додаткові вкладені списки.

Для відображення маркірованих списків кожний броузер використовує власну піктограму маркера. Щоб змінити тип маркера для всього списку використовують синтаксис:

<LI TYPE=тип>

де параметр тип приймає одне із значень, наведених в табл. 1.5.

Таблиця 1.5.

Тип	Рекомендований зовнішній вигляд (залежить від броузера)
Disk Square Circle	Заповнений кружок Заповнений квадратик Незаповнений кружок

Списки визначень (definition list).

Список визначень міститься в контейнері <DL></DL>. Елементи списку визначень створюються за допомогою дескрипторів <DT> і <DD>, за допомогою яких наголошуються термін і його визначення відповідно. В дескриптор <DT> може бути включено посилання на URL. Окрім цього, йому може відповідати дещо <DD>.