Основні структури HTML 3.2 документа (з прикладами) Обов'язкова структура документа

Почнемо з самого простого HTML документа, що містить тільки простий текст Hello world. У HTML файлі вмісту обов'язково повинен передувати розділ HEAD, який мінімально може складатися з двох конструкцій. Тоді код HTML можна представити так:

Приклад hello.html:  Hello Hello world

Насправді ж, в точності, цей документ має наступну структуру:

Приклад hello2.html:    Hello Hello world

Тобто, за винятком першого рядка, весь файл є HTML елемент який містить HEAD елемент, (що включає TITLE елемент) і BODY елемент, з простим текстом в якості вмісту.

Таким чином, за відсутності тегів HTML, HEAD, і TITLE броузер сам вставить їх в потрібні місця. Тому Ваш документ завжди буде містити HEAD і BODY. Рекомендована структура документа

На додаток до обов'язкової структурі настійно рекомендується вставляти різні структурні деталі. Існують спеціальні рекомендації на різних сайтах, і Ви повинні уважно вивчити відповідні документи.

Тут же ми просто підкреслимо, що кожен HTML документ повинен містити основну інформацію про його походження. Окремі рекомендації можуть уточнити в деталях форму подання цієї інформації.

Якщо Ви прагнете до того, щоб люди знайшли Ваш документ за відповідними зв'язків, важливість надання інформації про його походження стає очевидною. Коли користувач знайде Ваш документ за допомогою, наприклад, пошукового ресурсу AltaVista, він, найімовірніше, захоче дізнатися, до якого виду належить документ. Тому кожен файл HTML повинен надавати саму основну інформацію (або зв'язку до інформації) про його походження і природу. Наприклад, у зборах кнігоподобних документів, розділених на малі файли, кожен файл повинен містити, по Принаймні, зв'язок до "першій сторінці" "книги" (Home page).

Про походження документа повинна бути представлена, принаймні, наступна інформація:  Автор документа, що має унікальне ім'я. При цьому повинна бути задана      зв'язок з домашньою сторінкою автора. Якщо у документа кілька авторів,      визначте їх усіх, а також роль кожного з них, наприклад, провідного      автора, редактора, що діє спонсора, а також осіб, які формально      що відповідають за документ.  Дата      створення документа або його останньої модифікації, або і та і інша.      Представляється дата повинна бути зрозуміла у всьому світі; зокрема,      назва місяця краще писати словом, а не цифрою.  Контекст документа і його статус, наприклад: частина      офіційної документації компанії про один з її продуктів, або частина      особистої інформації про хобі автора, або щось інше.  Адреса (URL) документа. Така інформація часто надмірна, однак вона      може бути дуже корисною, коли комусь потрібна копія саме того      документа, який він знайшов. Краще не покладатися на броузер (і      користувача), що додають таку інформацію, коли зроблена копія      документа.

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

Приклад skel.html:   A sample HTML documentA sample HTML documentThis is a sample HTML document examplifying a suggested way of presenting basic origin information.

Jukka Korpela, Jukka.Korpela @ hut.fi
This document belongs to the context ofLearning HTML 3.2 by ../../examples
The URL for this document ishttp:// www.hut.fi/ ~ jkorpela/HTML3.2/skel.html
Created: December 5, 1996 Інформація про документ - розділ HEAD

Як уже згадувалося, є дві обов'язкові структури в HTML 3.2, і вони повинні бути написані в наступному порядку:  структура  

(в якій Ви теоретично повинні мати фрагмент HTML 3.2 Final замість HTML 3.2)  елемент TITLE, наприклад Introduction to General Absurdity

Більшість броузерів не помітить, якщо Ви опустіть це, але цього вимагають специфікації HTML 3.2. Також є й більш важлива причина для того, щоб включити їх:  ! DOCTYPE - оголошення, яке є визначенням типу      документа (document type definition - DTD) в метамови SGML, і яке при      обробці документа зрозуміло типовому броузеру SGML. Більше того, завдання версії      HTML, використане в документі, корисно вивчають код HTML, і, нарешті,      це також може бути необхідно оглядача і редакторам WWW.  Назва документа в елементі TITLE      функціонально використовується браузерами та іншими програмами. Воно зазвичай      виводиться на екран у гарячому списку, що повертається служить засобом пошуку      і т.д.

Формально елемент TITLE є (принаймні, якщо слідувати цьому буквально) частиною елемента HEAD, тоді як оголошення! DOCTYPE передує всім конструкцій HTML.

Необов'язково, але елемент HEAD може містити такі елементи на додаток до елемента TITLE:  елемент ISINDEX      (все ще рідко використовується)  елемент BASE,      задає точний базовий адреса посилань на URL  елемент META,      що дає різну метаінформації, наприклад дату закінчення терміну документа  елемент LINK,      який також задає метаінформації, але вже про зв'язки документа з іншими      документами  елементи STYLE      і SCRIPT.      Очікується, що в майбутньому це будуть дуже важливі елементи, але зараз вони      ще не використовуються (так як стандартизація знаходиться в стадії розвитку). Організація змісту - заголовки (headings), абзаци (paragraphs), списки (lists) і т.п.

Як правило, Ваш документ складається з частин, які, у свою чергу, теж діляться на частини і т.д. У HTML такий поділ робиться з використанням заголовків різного рівня. Частини самого нижнього рівня в цій ієрархії складаються з одного або декількох абзаців. На додаток до простих абзаців і деяким спеціальним видам абзаців HTML 3.2 підтримує списки і таблиці, які можна уявити, як подібні абзаців. Внутрішня структура абзаців і подібних до них елементів складається з тегів текстового рівня, які ми наводимо далі.

Теги для вираження головних структурних особливостей, так звані теги блокового рівня, є наступне:  заголовки різних рівнів: H1,      H2, H3, H4, H5, H6  теги рівня абзацу:     простий абзац: P          цитування, що представляється як окремий абзац:       BLOCKQUOTE          адреса автора інформації - окремий абзац: ADDRESS          елемент, який зберігає компонування рядків і прогалин       попередньо відформатованого тексту, PRE           списки:     простий неупорядкований список: UL,       LI          стислий список, що розміщуються одним рядком       образів: MENU,       LI          список малих образів: DIR,       LI          упорядкований список: OL,       LI          дефінітивного список (список міток): DL,       DT,       DD           таблиці: TABLE,      CAPTION,      TR,      TH,      TD        роздільники документа на частини, які можуть мати властивості своєї      власної компонування (наприклад, центрування): DIV,      CENTER        зміна теми: HR        наповнення форм: FORM,      ISINDEX.      

Рекомендований підхід для написання HTML документа:  Записати заголовок для всього документа і для нього використовувати H1      елемент з атрибутом ALIGN = CENTER.  Розділити документ на головні частини, записати відповідні      назви для них, використовуючи H1 з ALIGN = LEFT. При цьому і надалі      намагайтеся уникати поділу на більш, ніж сім частин.  Якщо необхідно, розділіть головну частину на менші частини з      заголовками H2, і, якщо необхідно, розділіть кожну з цих подчастей на      частині рівня нижче цього із заголовками H3. Уникайте використання      заголовків H4 і, особливо, заголовків H5 і H6, так як вони виводяться      на екран маленьким шрифтом, від чого документ стає мають важко.      (Якщо Ви все-таки хочете використовувати H4, спробуйте розділити документ на      ще менші частини.)  Якщо у Вас є розділ, скажімо, із заголовком H2 що включає      заголовки H3, уникайте вставки тексту між заголовком H2 і перший      заголовком H3. Вставка такого тексту може бути допустима, якщо тільки він      містить дуже короткі статті, такі як: загальна орієнтовна      інформація, деякі помітки про розподіл або девіз. Довгий      "бездомний" текст створює незручність для читача, який не      знаємо Ваших намірів. Тому використовуйте підрозділи із заголовками      відповідного рівня і з текстом типу "Вступні зауваження",      "Загальне" або "Итоги".  Розділіть менші частини вищезгаданої структури на абзаци      або подібні до абзаців блоки (іменовані списки або таблиці), як описано      нижче. Зауважте, що в HTML Ви повинні точно позначити поділ на абзаци      елементами HTML; поява порожнього рядка не змусить параграф      перерватися.  У межах абзацу використовуйте елементи      текстового рівня, нормальну розмітку фраз, щоб відрізняти      спеціальні текстові сегменти від звичайного тексту, наприклад, помістіть в      лапки виводиться комп'ютером текст або підкресліть ключові слова.  Додайте зв'язку      і, якщо це потрібно, зображення      або інший ілюстративний матеріал.

Що стосується рівня абзаців, тут є багато варіантів. Нижче наводимо кілька практичних порад для вибору відповідного варіанту:  Для абзаців звичайного тексту використовуйте елемент P.        Якщо текст в абзаці взятий з певного джерела, як вміщена      в лапки цитата, використовуйте елемент BLOCKQUOTE      або, якщо це програмний код, комп'ютерний лістинг (висновок) або деякий      інший текст, для якого не підходить просте відділення його порожніми      рядками, використовуйте елемент PRE.      В останньому випадку, якщо шрифт одного типу не підходить (наприклад, для      поетичного тексту), використовуйте BLOCKQUOTE      і додайте елемент BR      до кожного рядка.  В особливому випадку, коли абзац представляє інформацію про автора      (тобто - про Вас), використовуйте елемент ADDRESS.        Для наповненою образами інформації, яка логічно      складається з окремих видів образів, використовуйте різні елементи.      Наприклад,:     Для спіcкових образів, де порядок не важливий,       наприклад, список інгредієнтів в рецепті, використовуйте елемент UL,       або елемент MENU       (для списку малих образів), або елемент DIR       (для великого списку малих образів, придатного для подання в       многостолбцовом форматі). Для подання списку малих образів можна       використовувати також інші можливості.   Для списків образів, де важливий порядок та його       необхідно точно реалізувати, і таких, як послідовність команд,       яка повинна суворо дотримуватися, використовуйте елемент OL.          Для списку образів з короткими назвами або       тегами, наприклад, список визначень термінів або скорочень, використовуйте       елемент DL.       Однак, як варіант можна розглянути використання       елемента TABLE для представлення дефінітивного списків.  

Зауважимо, що зазвичай уявлення образів з використанням елементів MENU і DIR подібно поданням UL елементів. Також варто враховувати, що подання за допомогою елементу DL може бути дуже незручним. Тому перегляньте, будь ласка, окремий файл Приклади різних списковим елементів в HTML, щоб вибрати яке уявлення списків буде кращим у Вашому додатку.

Елементи UL, MENU, DIR, OL і DL - формують прості списки і не мають таких структурних особливостей, як CAPTION в елементі TABLE. Тому бажано мати певний тип заголовка або пояснення перед списком, оформлена у вигляді окремого абзацу.  Для табульованого інформації використовуйте звичайний елемент      TABLE,      однак для окремих випадків розгляньте можливості, що надаються      елементами PRE      і DL.      

Зауважимо, що елемент абзацу P не може бути вкладеним, тобто Ви не можете використовувати елемент P для створення подабзаца. Але різні Спискові елементи ефективно реалізують наповнену образами структуру, яка по суті відповідає подабзацному поділу. Більш того, Спискові елементи можуть бути вкладеними. Розмітка тексту - виділення шрифту, цитування, код і т.п. Логічна розмітка у порівнянні з фізичною

Існує два головних класу текстової розмітки: логічна і фізична. Логічна розмітка показує роль текстового сегменту, наприклад, велику значимість у порівнянні зі звичайним текстом або те, що даний сегмент є цитатою. Фізична розмітка пов'язана з поданням тексту в спеціальної манері, наприклад, з використанням шрифтів або спеціального виду підкреслення.

Перевага повинна віддаватися логічної розмітки. Використовуйте фізичну розмітку тільки, якщо це справді відповідає вимогам представлення тексту. Наприклад, для сильного виділення використовуйте елемент STRONG, а не B, у припущенні, що різні Web броузери реалізують підкреслення кращим чином для того оточення, в якому вони встановлені.

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

На додаток до більшої гнучкості при поданні тексту різними браузерами логічна розмітка має наступне перевагу в порівнянні з фізичної: все більша кількість комп'ютерних програм отримують інформацію з HTML документів для різних цілей. Для такої роботи краще мати "індикатори" логічної розмітки, що виділяють, наприклад, деякий текст, як більш важливий, або цитовані розділи.

Як логічна, так і фізична розмітки робляться з використанням елементів HTML з початковим і кінцевим тегами. Елементи розмітки не повинні перекриватися. Наприклад, наступний запис буде помилкою: This has some bold and italic text.

З іншого боку, елементи розмітки можуть бути вкладеними. Краще відобразити подібні структури в такий спосіб:

Приклад nest.html: This is italic text which contains underlined text within in whereas this is normal underlined text.

Агенти з обмеженим набором шрифтів можуть мати труднощі у поданні розмітки тексту. Елементи фрази (логічна розмітка тексту)

Для виделеніятекста існує два фразовою елемента - EM і STRONG, де STRONG використовується для більш сильного виділення.

Уникайте виділення занадто великих частин тексту, так як підкреслюючи все, Ви не наголошуєте нічого! (Увійшовши в приказку студент, який підкреслює все в своїй книзі, не розуміє самої ідеї підкреслення.)

На жаль, не існує "де-який виділятиме" елемента фрази, що позначає менш важливий текст. Якщо Вам дійсно це необхідно, можна використовувати елемент SMALL. Однак, якщо менш важливий текст об'ємний, краще його винести в окремий документ, зв'язок з яким вказати в головному документі. Особа, що прийде по таких зв'язків, зацікавившись текстом, ймовірно, вважатиме за краще побачити нормальний текст, і тому немає необхідності в будь-якому "де-підкресленні"

Елемент DFN також може розглядатися, як спеціальний вид підкреслення, проте, логічно він означає, що цей термін має визначення. Це, в принципі, дуже корисний елемент, однак, на жаль багато броузери, включаючи Netscape, підтримують його не ефективно.

Елемент VAR показує, що частина тексту (зазвичай слово) є змінною, тобто текстом, який може бути замінений різними виразами.

Наступні фразовою елементи задають різні види посилань або цитування:         CITE         цитування (назва книги, або статті, або - еквівалент)              CODE         код програми або - еквівалент (наприклад, HTML)              SAMP         службові повідомлення комп'ютера (висновок із програми, скрипти, команди і т.п.)              KBD         текст, який повинен друкуватися на клавіатурі користувача; зазвичай використовується для інструкцій.     

Дивіться також зауваження і приклади з питань відображення розмітки. Шрифтові елементи (font elements) - фізична розмітка тексту

Шрифтові елементи це:         TT         "телетайпних" текст, тобто текст одного розміру              I         курсив              B         виділення              U         підкреслення              STRIKE         закреслений текст              BIG         великий шрифт              SMALL         малий шрифт              SUB         підрядковий текст              SUP         надрядковий текст.     

Зауважимо: SUB і SUP можуть бути віднесені до розмітки фразової рівня, як згадувалося вище; SMALL може бути використаний для де-підкреслення.

Елементи FONT і BASEFONT пропонують багато можливостей для завдання розмірів шрифту в порівнянні з BIG і SMALL. Проте уникайте надмірного використання фізичної розмітки. Відображення розмітки

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

Наприклад, деякі броузери (візьмемо Internet Explorer) відображають TT (і CODE) як шрифт, значно менший, ніж звичайний текст, і ця диспропорція зберігається, коли змінюються розміри шрифту. Більш того, Internet Explorer відтворює VAR як моно (monospaced) шрифт, у той час як більшість графічних броузерів використовує курсив (italic). З іншого боку, в Netscape, розміри шрифту можна спеціально встановлювати, а за замовчуванням для TT і VAR використовуються одні й ті ж шрифти, проте "одні й ті ж" означає технічний розмір у точках - на практиці моноширинних шрифти виглядають більше, ніж стандартний пропорційний шрифт!

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

У наступній таблиці зроблена спроба дати уявлення про діапазон можливостей браузерів. Вона представляє відображення елементів розмітки в Netscape Navigator, Microsoft Internet Explorer і Lynx. Зауважимо, що існують варіації навіть у межах кожної з цих програм - залежно від версії, платформи, конфігурації системи або власної користувача конфігурації, - такий розкид відповідає дійсності. Таким чином, дані таблиці можуть бути, але не обов'язково мають місце в дійсності.         елемент          Netscape          Internet Explorer          Lynx              EM         курсив         курсив         підкреслений              DFN         звичайний текст         курсив         звичайний (однорозмірних)              CODE         однорозмірних         малий однорозмірних         звичайний (однорозмірних)              SAMP         однорозмірних         малий однорозмірних         звичайний (однорозмірних)              KBD         однорозмірних         малий однорозмірних         звичайний (однорозмірних)              VAR         курсив         малий однорозмірних         звичайний (однорозмірних)              CITE         курсив         курсив         підкреслений              TT         однорозмірних         малий однорозмірних         звичайний (однорозмірних)              I         курсив         курсив         підкреслений              B         посилений         посилений         підкреслений              U         звичайний текст         підкреслений         підкреслений              STRIKE         закреслення         закреслення         текст між [DEL: і: DEL]              BIG         більший, ніж звичайний         більший, ніж звичайний         звичайний текст              SMALL         менший, ніж звичайний         трохи менший, ніж звичайний         звичайний текст              SUB         опущений, трохи менший         опущений         звичайний текст              SUP         піднятий, трохи більший         піднятий         звичайний текст     

Дані таблиці відносяться до невложенним елементів. Вкладеність текстових елементів може підвищити наочність відображення. Представлення взаємодії з комп'ютером

Для представлення взаємодії людини з комп'ютером на текстовій або іншій основі можуть використовуватися такі підходи:  комп'ютерний висновок (підказки, звичайний висновок або повідомлення про      помилки) в межах SAMP      елементів  загальні терміни, що описують введення користувача - всередині VAR      елементів  дійсний для користувача введення в межах KBD      елементів  цитований комп'ютерний програмний код (джерело), що реалізується в      межах CODE      елементів.

В усіх підходах повинні прийматися до уваги принципи поділу в межах рядка та використання пропусків і символів табуляції, що може вимагати вставки BR елементів або використання PRE елементів. Зауважимо, що логічна розмітка дозволена в PRE елементах (хоча це, можливо, не найкраще її використання).

Наступний приклад ілюструє підхід у контексті введення в мову програмування Perl.

Приклад interact.html:

The following Perl script prints out its input so that each line begins with a running line number: #!/usr/bin/perl $ line = 1; while (& amplt & ampgt) (print $ line + +, "" , $ _;)

The scalar variable $ line is of course the line counter.

The loop construct is of the form
while (& amplt & ampgt) (
process one line of input)

Assuming that you have written this script (the simpler version of it) into a file named lines, you could test it using a command of the form
./lines datafile
In particular, using the script as input to itself, you would do as follows (the details of system output vary from one system to another): lk-hp-23 perl 251%./lines lines 1 #!/usr/bin/perl 2 $ line = 1; 3 while () (4 print $ line + +, "", $ _;) lk-hp-23 perl 252%

Зауваження наприклад:  тут не використовувалася вкладеність      текстових розміток.  програмний код міг би бути представлений тільки в межах PRE      елемента без додаткового використання всередині ще й CODE      елементу, однак те, що код вкладений в CODE елемент, який у свою чергу      вкладений всередину PRE елемента, не завдасть шкоди і може бути навіть корисно в      броузерах, які для різних цілей використовують моноширинних шрифти.  аналогічно, використання SAMP      і KBD      у наведеному прикладі може означати, що введення користувача      представляється відмінно від комп'ютерного виводу. Використовуючи таблицю      стилів, Ви могли б навіть специфікувати шрифт, колір, фон та інші      властивості для цих логічно різних елементів. Управління розміщенням

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

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

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

В окремих випадках Вам може знадобитися центрувати частини тексту, щоб відрізнить їх від звичайного тексту. Для цього можна використовувати атрибут ALIGN = CENTER в таких елементах, як P або DIV (або окремий елемент CENTER).

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

Що стосується питань формату, таких як новий рядок або запобігання переведення рядка, дивіться Поділ на рядки і використання пропусків і символів табуляції. Вище також обговорювалися і питання шрифтів. Зв'язки

Зв'язку (часто звані гіперзв'язками) є особливістю, яка виправдовує наявність частини HT в абревіатурі HTML (HyperText Markup Language - Мова розмітки гіпертексту).

Технічно зв'язку специфікована використанням A-елементів (anchor - якір), і ці питання обговорено в описі тега A. Тут ми представляємо тільки базисну ідею, дуже простий приклад і кілька практичних зауважень.

Зв'язок - це пряме з'єднання окремих точок у документі з іншими точками в тому ж самому або інших документах. У HTML термінології точки часто називають anchors (якір).

Існують два кінці зв'язку (якоря): зв'язок здійснюється від однієї точки до іншої. Остання, звана метою (target) зв'язку, часто є початком документа.

У найпростіших випадках Ви створюєте зв'язок від однієї точки Вашого документа до іншого документу (Вашого власного або написаним кимось ще). У Вас є можливість вирішити, які слова будуть діяти, як видиме подання зв'язку, тобто фрази, які відрізняються від іншого документа, і, крім того, Вам необхідно знати Web адреса - URL (Uniforme Resource Locator, уніформний локатор ресурсу) цього документа. У цьому випадку Ви зможете об'єднати інформацію за допомогою відповідного A-елементу. Наприклад: I work at HUT.

Це виводиться оглядачем в наступному вигляді:

I work at HUT.

Зв'язаний текст, тут - абревіатура HUT, діє, як зв'язок до Web документом, який пояснює це скорочення і дає інформацію про нього. Відображення тексту зв'язку можливо по-різному - текст зв'язку може бути підкреслено, забарвлений або виділений в тексті якимось іншим чином. Користувач (читач) може дізнатися, як зв'язку відображені в кожному окремому оточенні.

Хоча технічно зв'язку створити легко, часто відбувається не правильне використання їх. Ось деякі практичні поради:  Уникайте надмірного зв'язування. Якщо кожне слово у Вашому      документі - зв'язок - читач не знає яка ж зв'язок корисна.  Коли Ви використовуєте скорочення або технічний термін, який не      пояснюється у Вашому документі, спробуйте знайти придатний, що дає      пояснення документ, на який можна встановити зв'язок. Робити це в      кожному випадку, залежить від обставин.  Коли згадується особа або організація, бажано встановити      зв'язку на особисту домашню сторінку або домашню сторінку організації (якщо      це можливо).  Коли Ви посилаєтесь на документ, вкажіть зв'язок до нього, якщо      інформація доступна на Web (або, принаймні, приведіть      бібліографічну довідку про нього).  Якщо у Вас є інформація, яку Ви хочете зробити доступною      через Web, але яка менш важлива (для більшості читачів, по крайней      мірою), ніж Ваш головний документ, створіть окремий HTML файл (або групу      файлів), і введіть розділ в головному документі, наприклад, Додаткова      інформація, проставивши відповідні зв'язки.  Якщо Вам потрібно вказати зв'язку з однієї точки до кількох      документами (наприклад, коли Ви згадуєте комп'ютерну програму, Вам треба      прив'язати до неї короткий опис, повне керівництво, FTP сайт - для      завантаження і т.д.), створіть невеликий файл, що містить ці зв'язки з      відповідними поясненнями і дайте зв'язок на нього.  Спробуйте зробити текст зв'язку коротким, але містким.  Користувачі звичайно очікують, що отримають більше інформації з      темі, де є зв'язок. Якщо цього не відбувається, щоб надати      відповідні пояснення. Зокрема, коли Ви створюєте зв'язок з FTP,      даючи URL вказівка на місце розташування двійкового файлу, зробіть це      чітко в тексті, щоб було зрозуміло, що означає вибір зв'язку з цим.  Зв'язуйтеся тільки з дійсно потрібною інформацією. Намагайтеся      встановити зв'язок з короткими, написаними ясною мовою документами,      які містять подальші зв'язку до більш детальної, технічної      інформації. Наприклад, в документах, написаних для великої аудиторії, уникайте      зв'язування зі стандартами ISO або RFC документами. Зображення, формули і т.п.

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

Припустимо, що ми маємо деякі графічні зображення в певному форматі. Існують два різні способи його використання в Web документі. Ви можете або вказати зв'язок до нього, або вставити його у Ваш документ. У першому випадку Ви використовуєте якір (A-елемент); в іншому випадку елемент IMG. У першому випадку, коли користувач розглядає Ваш документ, він бачить символьну фразу, що діє, як зв'язок, і активізація зв'язку з цим змушує зображення з'явитися на екрані, або в тому ж самому вікні, або в іншому, в залежності від броузера і його установок. В іншому випадку, вставлене зображення є частиною Вашого документа; коли користувач звертається до Вашого документу, зображення завантажується разом з ним і виводиться, як його частину.

В обох випадках користувач побачить зображення, якщо тільки броузер підтримує спеціальний графічний формат. Найбільш підтримувані формати - GIF і JPEG. Найчастіше - це єдині формати, підтримувані для вставляються зображень. Для пов'язаних образів підтримка форматів зазвичай ширший (вона може включати, наприклад, PostScript, PDF, PNG) і може розширюватися інсталяцією нових просмотровщіков і розширень, що додаються до броузера. Існує варіант, коли пов'язані образи так втілюються на броузері, що броузер нічого не знає про графічному форматі файлів, але знає, як запустити окрему програму, яка покаже ці зображення.

Як варіант, можливе об'єднання зв'язування та вставки зображень: Ви можете створити документ, який містить зображення, яке діє, як зв'язок до іншому зображенню. Тобто, наприклад, вставлене зображення є малою, подібної штампик, версією зображення, на яке вказує зв'язок.

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

Для ілюстрації зв'язування з зображенням та впровадження зображень давайте розглянемо GIF зображення, яке розташоване за адресою - images/referat/25851-1.gif. Звернемося до нього таким чином:

Приклад sae.html: Liisa Sarakontu has drawn a picture of Siamesealgae eater.

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

Приклад sae-2.html: The Siamese algae eater (Crossocheilus siamensis) is often mixed up with another algae eating fish, the "false Siamensis" (Garra taeniata or Epalzeorhynchus sp.). Below you can see drawings of them by Liisa Sarakontu.

Проблема правильного використання графічних зображень в HTML документі дуже важка і багатоаспектна, але ми спробуємо розповісти і про це. Читачам, які знають фінська, пропонуємо прочитати документ Kuvien kдytцstд viestinnдssд yleensд ja Webissд erityisesti.

У HTML 3.2 немає загальної підтримки подання математичних формул. Тому що робота з цього питання знаходиться в стадії розвитку, для ознайомлення подивіться документ W3C по Математичної розмітці. При необхідності Ви можете використати деяке програмне забезпечення (наприклад, TeX), щоб оформити формули, як зображення, наприклад, у форматі PostScript, і, використовуючи тег IMG, вставити його у Ваш документ, або тег A, щоб створити зв'язок до нього. Останній спосіб більш кращий, особливо для великих формул. Якщо користувачеві хочеться читати текст не відволікаючись, то глянути на формулу (зображення) він зможе, коли захоче. Більше того, він зможе побачити її в окремому вікні екрану.