Структура документа HTML
Документ HTML 4 складається з трьох частин:
- рядок, що містить інформацію про версію HTML,
- оголошує розділ header/"шапка" (обмежений елементом HEAD),
- тіло, що містить власне сам документ.
Тіло може бути в елементах BODY або FRAMESET . Пробільні символи(прогалини, символи нового рядка, символи табуляції та коментарі) можуть з'являтися до або після цього розділу.
Hello world!
Документ починається з елемента типудокумента, або doctype. Він описує, який тип HTML буде використаний - щоб клієнтська програма користувача могла визначити, як інтерпретувати документ, і вирішити, чи слід він тим правилам, яким збирався слідувати за своєю заявою.
Після цього можна бачити тег елемента html , що відкриває . Це оболонка довкола всього документа. Закриваючий тег html є останнім об'єктом у будь-якому документі HTML.
Всередині елемента html є елемент head. Він містить інформацію про документ (метадан). Всередині head знаходиться елемент title, який визначає заголовок "Simple page" в панелі меню.
Після елемента head слід елемент body , який є оболонкою, що містить реальний вміст сторінки - у разі лише елемент заголовка першого рівня (h1 ), який містить текст " Hello world!" .
Елементи часто містять інші елементи. Тіло документа завжди міститиме безліч вкладених один в одного елементів.
Розділи сторінки створюють загальну структуру документа і можуть містити підрозділи. Вони можуть містити заголовки , параграфи, списки тощо. Параграфи можуть містити елементи, які створюють посилання інші елементи, цитати, виділення тощо.
Синтаксис елементів HTML
Базовий елемент HTML складається з двох тегів навколо блоку тексту. Існують елементи, які є оболонкою для тексту, і майже кожному разі елементи можуть містити поделементи (як html містить head і body у прикладі вище).
Елементи можуть також мати атрибути, які можуть модифікувати поведінку елемента та вводити додаткове значення .
Основи HTML
У цьому прикладі елемент div (розділ сторінки, спосіб розбиття документів на логічні блоки) має доданий атрибут id для якого задано значення masthead. Елемент div містить елемент h1 (заголовок першого або найважливішого рівня), який у свою чергу містить деякий текст. Частина цього тексту упакована в елемент abbr(який використовується для визначення розширення скорочень), який має атрибут title, значення якого задано як Hypertext Markup Language.
Багато атрибутів HTML є спільними для всіх елементів, але деякі є специфічними для даного елемента або елементів. Усі вони мають форму:
ключове_слово="значення"
Значення має бути поміщене в одиночні або подвійні лапки (у деяких ситуаціях лапки можуть бути відсутніми, але це не надто добре з точки зору передбачуваності, розуміння).
Атрибути та їх можливі значення визначаються переважно специфікаціями HTML (http://www.w3.org/TR/html401/index/attributes.html), тому - не можна створювати свої власні атрибути. Єдиними реальними винятками є атрибути id і class , значення яких повністю призначені для додавання в документи вашого власного значення і семантики.
Елемент всередині іншого елемента називають "нащадком"цього елемента. У прикладі вище abbrє нащадком h1, який у свою чергу є нащадком div. І навпаки, div є "предком" елемента h1.
Елементи блочного рівня та рядкові елементи
Є дві основні категорії елементів у HTML , які відповідають типам контенту та структурі, яку представляють ці елементи - елементи блокового рівня та рядкові елементи.
Блоковий рівеньозначає вищий рівень елемента, зазвичай інформує структуру документа. Елементи блокового рівня можна представляти як елементи, які починаються з нового рядка, відриваючись від того, що було перед цим. Поширеними блоковими елементамиє параграфи, пункти списку, заголовки та таблиці.
Рядкові елементимістяться всередині структурних елементів блокового рівня та охоплюють лише частини тексту документа, а не цілі області. Рядковий елемент не призводить до появи у документі нового рядка, т.к. вони є елементами, які з'являються у параграфі тексту. Поширеними рядковими елементамиє гіпертекстові посилання, виділені слова або фрази та короткі цитати.
Заголовок
Заголовок HTML-документа є необов'язковим елементом розмітки. Спочатку існування заголовка визначалося необхідністю іменування вікна браузер. Це досягалося за рахунок елемента розмітки TITLE :
Ще однією функцією заголовка HTML-документа є управління HTTP-обміном через елемент розмітки META. При сучасній практиці розміщення веб-вузлів компаній на серверах провайдерів адміністратори цих вузлів можуть не мати можливості керувати програмою-сервером. У цьому випадку для управління обміном залишається лише одна можливість – через заголовок HTML-документа.
Заголовок HTML-документа також призначений для опису пошукового образу документа, необхідного для індексування документа роботами пошукових систем. Елемент META дозволяє зберігати списки ключових слів та описи документа, які будуть використовуватися для складання індексу пошукової системи та з'являтися як опис документа у разі видачі посилання на нього під час пошуку за ключовими словами.
Основні теги заголовка - це елементи HTML -розмітки, які найчастіше трапляються в заголовку HTML -документа, тобто. всередині елемента розмітки HEAD:
- TITLE (назва документа);
- BASE (база URL);
- ISINDEX (пошуковий шаблон);
- META (метаінформація);
- LINK (загальні посилання);
- STYLE (описувачі стилів);
- SCRIPT (сценарії).
Найчастіше застосовуються елементи TITLE, SCRIPT, STYLE. Використання елемента META говорить про поінформованість автора про правила індексування документів у пошукових системах та можливості управління HTTP-обміном даними. BASE та ISINDEX останнім часом практично не застосовуються. LINK вказують лише при використанні зовнішніх щодо даного документа описувачів таблиць стилів.
Елемент розмітки HEAD містить заголовок HTML-документа. Даний елемент розміткине є обов'язковим. За наявності тега початку елемента розміткибажано використовувати і тег кінця елемента розмітки. За замовчуванням елемент HEAD закривається, якщо зустрічається або тег початку контейнера BODY або тег початку контейнера FRAMESET .
Контейнер заголовка служить розміщення інформації, що стосується всього документа загалом.
Елемент розмітки TITLE служить для іменування документа в World Wide Web. При виборі тексту для вмісту контейнера TITLE слід враховувати, що він відображається системним шрифтом, так як заголовок вікна браузера.
Синтаксис контейнера TITLE у загальному вигляді виглядає так:
Заголовок не є обов'язковим контейнером документа. Його можна опустити. Роботи багатьох пошукових систем використовують зміст елементу TITLE для створення пошукового документа. Слова з TITLE потрапляють до індексу пошукової системи. З цих міркувань елемент TITLE завжди рекомендується використовувати на сторінках веб-сайту.
Елемент розмітки BASE служить визначення базового URL для гіпертекстових посилань документа, заданих у неповної (часткової) формі. Крім того, BASE дозволяє визначити цільове вікно завантаження документа за промовчанням при виборі гіпертекстового посилання поточного документа. Найчастіше BASE зустрічається на сторінках вузлів, які мають "дзеркала". Частина документів основного сервера з різних причин на "дзеркальний" сервер не переноситься. У цьому випадку документ із примусово заданою базовою URL завжди буде посилатися на основний сервер.
Тег початку контейнера містить один обов'язковий атрибут HREF і може містити один необов'язковий атрибут TARGET. Синтаксис контейнера BASE у загальному вигляді виглядає так:
Елемент розмітки ISINDEX використовується для вказівки пошукового шаблону та успадкований від ранніх версій HTML. У HTML 4.0 цей контейнер не визначено.
Елемент розмітки META
META містить керуючу інформацію, яку браузер використовує для правильного відображення та обробки змісту тіла документа, наприклад, за допомогою атрибуту Content-type можна задати перекодування документа на стороні клієнта.
За допомогою META також можна задати й інші оператори. Наприклад, заборонити кешування документа. Для заборони кешування достатньо вставити в заголовок META – тег виду:
У новій версії протоколу HTTP (HTTP 1.1) керування кешуванням здійснюється через оператор Cache-Control. Для отримання такого ж результату, як у випадку з Pragma, у заголовку HTML-документа достатньо вказати:
Забороняється зберігати документ після пересилання.
SGML(англ. Standard Generalized Markup Language - стандартна узагальнена мова розмітки; вимовляється [ес-джі-ем-ел]) - метамова, якою можна визначати мову розмітки для документів. SGML - спадкоємець розробленої в 1969 році IBM мови GML (Generalized Markup Language), який не варто плутати з Geography Markup Language, що розробляється Open GIS Consortium.
Спочатку SGML був розроблений для спільного використання машинно-читаних документів у великих урядових та аерокосмічних проектах. Він широко використовувався у друкованій та видавничій сфері, але його складність ускладнила його широке поширення для повсякденного використання.
Основні частини документа SGML:
SGML-декларація - визначає, які символи та обмежувачі можуть з'являтися у додатку;
Document Type Definition – визначає синтаксис конструкцій розмітки. DTD може включати додаткові визначення, такі як символьні посилання-немоніки;
Специфікація семантики відноситься до розмітки - також дає обмеження синтаксису, які не можуть бути виражені всередині DTD;
Вміст SGML-документа - принаймні повинен бути кореневий елемент.
SGML надає безліч варіантів синтаксичної розмітки для використання різними програмами. Змінюючи SGML-декларацію можна навіть відмовитися від використання кутових дужок, хоча цей синтаксис вважається стандартним, так званим concrete reference syntax.
Приклад синтаксису SGML:
Typically something like
SGML стандартизований ISO: «ISO 8879:1986 Information processing-Text and office systems-Standard Generalized Markup Language (SGML)»
HTML та XML походять від SGML. HTML - це додаток SGML, а XML - це підмножина SGML, розроблена для спрощення процесу машинного аналізу документа. Іншими програмами SGML є SGML Docbook (документування) та «Z Format» (друкарня та документування).
XML- Extensible Markup Language, тобто Розширювана Мова Розмітки, виникла в результаті розвитку мови HTML (HyperText Markup Language, мови розмітки гіпертексту). Однак було б грубою помилкою сприймати його лише як удосконалену версію мови HTML. По суті, мова XML є новим поколінням мов розмітки. Тут слід мати на увазі 3 моменти, що принципово відрізняють XML від HTML та його попередників (GML - Generalized Markup Language, SGML - Standard General Markup Language):
XML, на відміну від HTML, НЕ МАЄ ПОПЕРЕДЖЕНИХ ТЕГІВ - точніше, кожен розробник може створювати СВОЇ ВЛАСНІ XML-теги - стільки, скільки потрібно. Кількість таких тегів практично необмежена. Таким чином, XML є метамовою, що дозволяє створювати інші мови розмітки, такі як, наприклад, HTML.
З розвитком мови HTML кількість тегів швидко збільшувалася. Зрештою їх число досягло "критичного значення" - розробникам web-документів стало важко запам'ятовувати все нові та нові теги, але ще в гіршому становищі виявилися розробники браузерів - їм доводиться створювати нові версії браузерів, які "розуміли б" нові теги. "Розумніші" браузери стають і більшими за обсягом, пред'являють всі зростаючі вимоги до комп'ютерів, на яких вони використовуються. Справа посилюється тим, що останнім часом все більшої популярності набувають кишенькові пристрої (зокрема, вони все ширше використовуються в електронній комерції), з обмеженим об'ємом пам'яті та "слабкими" екранами, а тому, браузери, що використовуються на них, мають лише дуже обмежені можливості. Мова XML, що не має заздалегідь визначеної системи тегів, дозволяє вирішити цю проблему. "Платою" за універсальність є велика суворість оформлення web-документів. Правила оформлення XML-документів прості:
неприпустимі незакриті контейнери тегів (але можна об'єднувати відкриваючий та закриваючий теги в одному, наприклад:
)
"вкладені" контейнери не можуть "перекриватися"
малі та великі літери сприймаються як різні символи
як назви тегів не можна використовувати ключові слова
у назвах тегів не можна використовувати пробіли, знаки пунктуації, круглі, квадратні та фігурні дужки
знак підкреслення (_) та цифри можуть зустрічатися в назвах тегів, але цифра не може бути першим символом назви тега
(При необхідності використовувати кілька слів як назву тега їх слід писати разом, починаючи кожне слово з великої літери.)
Документи, що відповідають цим правилам, називають well-formed documents.
XML служить для ОПИС СТРУКТУРИ ДАНИХ, головним чином, ІЄРАРХІЧНИХ СТРУКТУР.
Однією з основних тенденцій розвитку web-технологій є РОЗДІЛ ДАНИХ, СТРУКТУРИ ДОКУМЕНТА ТА ЙОГО СТИЛЬНОГО ОФОРМЛЕННЯ. Як відомо, одним із способів відокремлення даних від структури документа є динамічне зв'язування СУБД із web-документами через інтерфейс ODBC (Open DataBase Connectivity). Відокремлення стилів досягається за рахунок використання каскадних таблиць стилів. XML дозволяє описувати нереляційні бази даних. Оскільки теги можуть створюватись розробником, їх назви зазвичай характеризують зміст даних.
XML, як засіб опису структури даних, забезпечує обмін даними між різними додатками, виступаючи, таким чином, як своєрідний "клей".
Значення цієї "зв'язуючої" функції XML важко переоцінити. Завдяки можливості обміну даними між різними програмами web-технології "виходять" на якісно новий рівень.
Hypertext Markup Language (HTML)це проста система для створення гіпертекстових документів, що переносяться з однієї платформи на іншу. По суті HTML документи це SGML документи із загальною семантикою, яка підходить для подання інформації у великій кількості додатків. HTML може використовуватися для представлення:
· Гіпертекстових новин, пошти, документації та гіпермедіа
· Меню опцій
· Результатів запитів до баз даних
· Простих документів із вбудованими графічними образами
· А також, для гіпертекстового перегляду існуючих масивів інформації
Проект World Wide Web (WWW) поєднує розкидану у світі інформацію. Для цього WWW використовує Internet HyperText Transfer Protocol (HTTP) – Протокол Передачі Гіпертексту, який дозволяє ввести угоди на способи представлення даних при взаємодії клієнта та сервера.
Дані передаються в тілі повідомлення відповідно до стандарту MIME. HTML це одне з уявлень інформації у WWW. Передбачається, що HTML відповідає одному з типів MIME, зокрема text/html. Додатково HTML це розробка, що відповідає Міжнародному стандарту ISO 8879 - Standard Generalized Markup Language (SGML), який є системою для визначення структурованих типів документів.
HTML документ
HTML документ подібний до текстового файлу, за винятком того, що деякі символи (рядки) є керуючими. Ці символи називаються тегами та визначають структуру документа.
HTML документи повинні починатися з тега , що стоїть на початку файлу, і закінчуватися тегом. Між цими тегами HTML документ організований як ЗАГОЛОВОК (HEAD) і ТІЛО (BODY) документа, подібно до поштового повідомлення. Усередині HEAD частини вказується ЗАГОЛОВОК (TITLE) та інша інформація про документ загалом. Усередині BODY частини за допомогою HTML тегів текст структурується в параграфи, списки та ін. з можливістю виділення стилем окремих слів та цілих пропозицій та створення посилань на частини цього та зовнішні документи. Технічно, що відкриває та закриває теги для HTML, HEAD та BODY елементів можна не використовувати. Тим не менш, робити це не рекомендується, оскільки HEAD/BODY структура дозволяє програмам визначати особливості документів (наприклад, заголовок), не переглядаючи весь документ повністю.
Структура HTML елементів
У HTML документі теги визначають початок та кінець заголовків, параграфів, списків, підсвічування символів та посилання. Більшість HTML елементів у документі визначені як тег, що відкриває, який вказує ім'я елемента і атрибути, потім вказується тіло елемента, за яким слідує закриває тег. Символами-обмежувачами для тега є "<" и ">"; для закриваючого -"". Наприклад:
Це Заголовок
Це параграф.
Деякі елементи з'являються лише як тег, що відкриває. Наприклад, для створення лінії-розділювача використовується тег
. Крім того, теги, що закривають, для деяких елементів (P, LI, DT, DD) можуть бути опущені. Тіло елемента це послідовність символів та вкладених елементів. Деякі елементи, такі як елементи, що визначають посилання, не можуть бути вкладені один в одного. При цьому елементи, що визначають посилання та виділення символів, можуть бути поміщені всередину інших конструкцій.
Відображення документа
Конкретний вигляд документа може змінюватися від клієнта до клієнта. HTML теги визначають лише загальний стиль відображення документа. Що означає, наприклад, що HTML розглядає заголовок першого рівня лише як заголовок першого рівня, але не визначає, що заголовок першого рівня повинен відображатись шрифтом Times розміру 24 у центрі верхньої частини сторінки. Перевага такого підходу полягає в тому, що якщо користувач вирішить змінити заголовок першого рівня на шрифт Helvetica розміру 20 вирівняний по лівому краю, все, що йому треба зробити, це змінити визначення заголовка першого рівня в його промотору WWW. Таким чином, конкретне подання документа на моніторі визначає користувач конкретного клієнта.
Основна сила HTML полягає у його здатності пов'язувати області тексту (а також картинок) з іншими документами. Переглядачі виділяють ці області (зазвичай кольором та/або підкресленням) для того, щоб вказати, що це гіпертекстові посилання. Anchor це частина тексту, яка відзначає початок та/або кінець гіпертекстового посилання. Текст, що знаходиться між тегом, що відкриває і закриває, є стартовою точкою або місцем призначення гіпертекстового посилання. Атрибути цього тегу такі: HREF
Необов'язковий. Якщо є атрибут HREF, Anchor це чутливий текст: стартова точка для посилання. Якщо читач обирає цей текст, йому буде представлений інший документ, чия мережна адреса була вказана у значенні атрибуту HREF. Формат мережевої адреси аналогічний до URL. Це дозволяє структурі HREF="#identifier" посилатися на інший anchor у поточному документі, або у віддаленому документі при вказівці його адреси перед знаком "#".
Необов'язковий. Якщо є, дозволяє використовувати anchor як призначення посилання. Значенням атрибута є ідентифікатор anchor"а. Як значення ідентифікатора може бути використаний звичайний текстовий рядок, за винятком того, що всередині одного документа всі подібні ідентифікатори повинні бути унікальними.
Необов'язкові. Дозволяють вказувати взаємозв'язки між документом з якого було зроблено посилання, та документом, на який було зроблено посилання.
Мова розмітки гіпертекстових сторінок (HTML - Hypertext Markup Language) є мовою, розробленою спеціально для створення Web-документів. Він визначає синтаксис та розміщення спеціальних інструкцій (тегів), які не відображаються на екрані, але вказують браузеру, як відображати вміст документа. Він також використовується для створення посилань на інші документи, локальні або мережеві, наприклад, що знаходяться в Інтернеті.
Стандарт HTML та інші стандарти для Web розроблені під керівництвом консорціуму W3C (World Wide Web Consortium). Стандарти, специфікації та проекти нових пропозицій можна знайти на сайті http://www.3w.org/. В даний час діє специфікація HTML 4.0, підтримка якої з боку основних браузерів невпинно зростає.
На практиці на HTML стандарт впливає наявність тегів, запропонованих і підтримуваних найбільш відомими браузерами, такими як Microsoft Internet Explorer і Netscape Navigator. Ці теги в даний момент можуть як входити, так і не входити до складу діючої специфікації HTML.
Інформацію про теги HTML Compendium (короткий посібник з HTML) створено Ron Woodall. Компендіум містить список тегів та їх атрибутів за абеткою, а також оновлену інформацію про підтримку кожного з них з боку браузерів.
Документи HTML є звичайними текстовими файлами ASCII. Це означає, що для їх створення можна використовувати будь-який текстовий редактор, навіть із мінімальними можливостями. Існують засоби редагування, розроблені спеціально для написання HTML. Вони дозволяють заощаджувати час, оскільки містять клавіші швидкого доступу для виконання повторюваних операцій, наприклад завдання початкових установок документів, таблиць або просто застосування стилів до тексту. Редактори HTML відрізняються від авторського WYSIWYG-інструментарію (що далі розглядається) тим, що вимагають знання правил складання HTML вручну, редактори лише спрощують і прискорюють цей процес.
Користувачам Windows слід перевірити HomeSite, потужний і недорогий редактор HTML компанії Allaire Corporation. У ньому є засоби виділення кольорами синтаксичних конструкцій HTML, функція FTP, контроль синтаксису і правопису, багатофайловий пошук і заміщення. Крім того, він містить спеціальні команди та шаблони для створення складніших елементів (фреймів, сценаріїв JavaScript та DHTML).
Працюючи на комп'ютерах Macintosh звертають увагу на BBEdit, комерційний HTML-редактор компанії Bare Bones Software, Inc. Він справді має вагу серед Web-розробників для комп'ютерів Macintosh. До його складу входять зручні та швидкі HTML-інструменти, багатофайловий пошук та заміна, вбудована FTP-функція, підтримка 13 мов програмування, будівельник таблиць, контроль синтаксису HTML та ще безліч функцій.
Останні роки характеризуються різким зростанням ринку авторських інструментів. HTML-редактори класу WYSIWYG (What You See Is What You Get – що бачиш, те й отримаєш) мають графічні інтерфейси, які роблять написання HTML більш схожим на програму редагування текстів чи розмітки сторінки. Початковою метою цих програм було звільнення користувачів від тегів HTML, на кшталт того, як програми розмітки сторінок захищають розробника від набору команд мови PostScript. Сьогодні їхня значущість зросла, оскільки вони підвищують ефективність і рівень автоматизації виробництва документів, забезпечуючи водночас доступ до вихідного тексту HTML.
Найбільш популярними в даний час WYSIWYG-редакторами є Macromedia DreamWeaver, Golive CyberStudio (тільки для комп'ютерів Macintosh), Microsoft FrontPage, FileMaker Claris, Home Page, Adobe PageMill.
Документ HTML містить текст (вміст сторінки) та вбудовані теги - інструкціями про структуру, зовнішній вигляд та функції вмісту. Документ HTML поділяється на дві основні частини: заголовок – head та тіло – body. Заголовок містить такі відомості про документ, як його назву та методичну інформацію, що описує вміст. У тілі знаходиться самий вміст документа (те, що виводиться у вікні браузера).
Кожен тег складається з імені, за яким може йти список необов'язкових атрибутів, всі вони знаходяться всередині кутових дужок< >. Вміст дужок ніколи не відображається у вікні браузера. Ім'я тега, як правило, є абревіатурою його функції, що полегшує його запам'ятовування. Атрибути є властивостями, які розширюють чи уточнюють функцію тега. Як правило, ім'я та атрибути всередині тега не чутливі до регістру. Тег
працюватиме так само, як . Однак значення певних атрибутів можуть бути чутливими до регістру. Це стосується, зокрема, імен файлів та URL.Більшість тегів є контейнерами. Це означає, що вони мають початковий (відкриваючий чи стартовий) і кінцевий (закриває) теги. Текст, що знаходиться між тегами, буде виконувати інструкції, що містяться в них.
Кінцевий тег має те саме ім'я, що і початковий, але перед ним стоїть сліш (/). Його можна розглядати як "вимикач" тега. Кінцевий тег ніколи не містить атрибутів.
У деяких випадках кінцевий тег не є обов'язковим, і браузер визначає кінець тега з контексту. Найчастіше опускають кінцевий тег<р>(Абзац). Браузери раніше підтримували цей тег без відповідного завершення, тому багато авторів Web звикли використовувати коротку форму. Це дозволено не всім тегам, і не всі браузери вибачають їхню відсутність. Тому, якщо є сумніви, увімкніть текст закриває тег. Це особливо важливо, коли ви використовуєте каскадні таблиці стилів у документі.
Деякі теги не мають завершальних тегів, тому що вони використовуються для розміщення окремих (автономних) елементів на сторінці. Одним із них є тег зображення , він просто поміщає графіку в потік сторінки. Інші автономні теги - це розрив рядка (
), горизонтальна лінія (
) та теги, що містять інформацію про документ і не впливають на вміст, що виводиться на екран, такі як і
Атрибути додаються до тега для розширення або модифікації його дій. До одного тега можна додати кілька атрибутів. Якщо атрибути тега слідують після імені тега, вони розділяються одним або декількома пробілами. Порядок прямування не важливий. Більшість атрибутів мають значення, які йдуть за знаком рівності (=), що знаходиться після імені атрибута. Довжина значень обмежена 1024 символами. Значення можуть бути чутливими до регістру. Іноді значення мають перебувати у лапках (подвійних чи одинарних). Правила запису значення такі:
- - якщо значення є одне слово або число і складається тільки з літер (a-z), цифр (0-9) та спеціальних символів (точка<.>
- - якщо значення містить кілька слів, розділених комами або пробілами, або містить спеціальні символи, відмінні від точки чи дефісу, тоді його необхідно помістити в лапки. Наприклад, URL потребують лапок, тому що вони містять символи "://". Також лапки необхідні при заданні значень кольорів із використанням формату "#rrggbb".
Якщо ви не впевнені, чи варто використовувати лапки, використовуйте їх завжди для всіх значень.
У теги HTML можуть бути поміщені інші HTML-теги для здійснення впливу декількох тегів на один елемент. Це називається вкладенням, і щоб правильно його здійснити, початковий і кінцевий теги вкладеного тега повинні обов'язково перебувати між початковим наконечним тегами зовнішнього тега.
Часто зустрічається помилкою є перекриття тегів. Хоча частина браузерів відображають вміст, зазначений таким чином, багато хто не дозволяє порушувати правило, тому важливо розмішати теги правильно. Наступний приклад показує неправильне вкладення тегів (зауважте, що тег<В>закривається перед закриттям ):
The weather is gorgeous today - це інформація, що ігнорується браузерами.
Інформація, що ігнорується браузерами. Нижче наводиться інформація, що міститься в документі HTML, включаючи певні теги, які будуть ігноруватися при перегляді браузерами. До її складу входять:
- - Розриви рядків. Символи кінця рядків у документі HTML ігноруються. Текст та елементи будуть переноситися доти, доки в потоці тексту документа не зустрінеться тег
- - символи табуляції та множинні прогалини. Коли браузер зустрічає в документі HTML символ табуляції та кілька послідовних символів пробілу, він виводить лише один пробіл. Таким чином, якщо документ містить "far, far away", браузер виведе "far, far away". Додаткові пробіли можна додати до текстового потоку, використовуючи символ нерозривної пробілу (Snbsp;). Крім того, всі прогалини виводяться, якщо текст є форматованим (перебуває в тегах
- - множинні
- - Теги, що не розпізнаються. Якщо браузер не розуміє тег або той був неправильно заданий, браузер його просто ігнорує. Це може призвести до різних результатів залежно від тега та браузера. Або браузер нічого не виведе, або може відобразити вміст тега як звичайний текст;
- - Текст у коментарях. Браузери не виводять текст між спеціальними елементами
I. Основні відомості проHTML.
Останніми роками розробки для Інтернету еволюціонували від статичних сторінок до динамічних інформаційних систем. Нещодавно створення сучасних Web-сторінок не вимагало практично нічого, крім досконалого володіння мовою розмітки гіпертексту (Hypertext Markup Language, HTML).
HTMLє простою мовою обробки текстів; цією мовою за допомогою набору тегів (tags) створюється документ, який можна переглядати спеціальною програмою переглядуWeb (browser).
HTML - не мова програмування тому, як C++ чи Visual Basic; він більше нагадує засоби форматування документів із використанням керуючих послідовностей. Кодування на HTML часто порівнюють зі створенням документа у форматі Microsoft Word шляхом набивання кодів форматування безпосередньо в Notepad. Очевидно, що функціональність цього вкрай мала.
Під гіпертекстовим документомрозуміють документ, що містить посилання інший документ. Реалізовано все це через протокол передачі гіпертексту HTTP(Hyper Text Transfer Protocol).
Інформація в документах Web може бути знайдена за ключовими словами. Це означає, що кожен браузер Web містить певні посилання, через які утворюються гіперзв'язки, що дозволяють мільйонам користувачів Internet вести пошук інформації по всьому світу.
Гіпертекстові документи створюються на базі мови HTML (Hyper Text Markup Language)Ця мова дуже проста, керуючі коди її, які, власне, і компілюються браузером для відображення на екрані, складаються з тексту ASCII. Посилання, списки, заголовки, картинки та форми називаються елементами мови HTML.
В даний час існує маса редакторів Web-сторінок, які не вимагають від вас знання основ HTML. Але для того, щоб вміти професійно готувати гіпертекстові документи, ви повинні знати їхню внутрішню будову, тобто код документа HTML.
HTML дозволяє формувати різну гіпертекстову інформацію на основі структурованих документів.
Оглядач визначає сформовані посилання і через протокол передачі гіпертексту HTTP відкриває доступ до вашого документа іншим користувачам Internet. Зрозуміло, для успішної реалізації цього необхідний софт, повністю сумісний з WWW і підтримує HTML.
ІІ. Опис HTML
HTML-документ - це звичайний текстовий файл. Використовуючи будь-який Web-браузер, ви можете переглянути результат вашої роботи, просто завантаживши в нього створений на основі синтаксису HTML текстовий файл.
Гіпертекстова мова надає лише інформацію для читання. Це означає, що редагувати Web-сторінки може лише той, хто їх створив, а чи не простий користувач Мережі.
Самий головний елемент гіпертекстової мови- це посилання. У світовій мережі ви просто натискаєте на посилання і миттєво опиняєтеся в іншій точці земної кулі на вибраній вами сторінці.
Теги.
Тег- оформлена одиниця HTML-коду.
Тег HTML складається з наступних один за одним у певному порядку елементів:
- лівої кутової дужки< (такого же, как "меньше чем" символа)
- необов'язкового слеша /, який означає, що тег є кінцевим тегом, що закриває деяку структуру. Таким чином, у цьому контексті Ви можете читати символ /, як кінець...
- імені тега, наприклад TITLE або PRE
- необов'язкових, якщо навіть тег може мати їх, атрибутів. Тег може бути без атрибутів або супроводжуватися одним або декількома атрибутами, наприклад ALIGN=CENTER
- правої кутової дужки > (такий самий, як символу "більше ніж").
Більшість тегів мають відкриваючий елемент<> і закриває. Між ними й перебувають коди, які розпізнає Web-браузер
У таких випадках два теги та частина документа, відокремлена ними, утворюють блок, званий HTML елементом. Деякі теги, наприклад
, є елементами HTML власними силами, і їм відповідний кінцевий тег неправильний.
Для кожного тега визначається безліч можливих атрибутів. Більшість тегів допускає один або кілька атрибутів, проте атрибутів може і не бути. Специфікація атрибутускладається з розташованих у наступному порядку:
- імені атрибута, наприклад WIDTH
- знак рівності (=)
- значення атрибута, яке задається рядком символів, наприклад "80".
Завжди корисно укласти значення атрибуту в лапки, використовуючи або одинарні ("80"), або подвійні лапки ("80"). Рядок у лапках не повинен містити такі ж лапки всередині себе. Так, якщо дата укладена в подвійні лапки, використовуйте одинарні лапки для подальшого укладання в лапки, і навпаки. Ви також можете опустити лапки для значень атрибутів, які складаються лише з наступних символів:
- символів англійського алфавіту (A – Z, a – z)
- цифр (0 - 9)
- проміжків часу
- дефісів (-)
Для створення електронних навчальних програм найчастіше використовується мова гіпертекстової розмітки документів (HTML).
Цей вибір обумовлений тим, що поряд із простотою створення даного виду документів, мова гіпертекстової розмітки має колосальні можливості, такі як виведення форматованого тексту, використання графічних об'єктів практично всіх відомих форматів, використання фонового малюнка, вставка таких об'єктів, як фоновий звук, відео та і т.д.
Крім того, HTML дозволяє легко організовувати посилання на інші об'єкти або фрагменти тексту самого документа.
Великою перевагою HTML є те, що більшість сучасних інструментальних засобів (такі як текстові та графічні редактори, мови візуального програмування, Internet Explorer...) підтримують роботу та збереження документів у HTML форматі.
Тому найчастіше саме HTML використовується для створення таких програмних продуктів. Однак створення різного виду демонстраційних прикладів, процедур тестування та опитування, на мій погляд, робиться все ж таки простіше за допомогою мов візуального програмування.
Тому в цій дипломній роботі розглядаються питання інтеграції різних інструментальних засобів для створення навчальних, тестуючих програм та електронних підручників.
Проте використання HTML документів багато в чому полегшує написання теоретичної частини програми і робить її більш живою. Давайте розглянемо кілька питань, пов'язаних із створенням HTML документів. Можна працювати на Web без знання мови HTML, оскільки тексти HTML можуть створюватися різними спеціальними редакторами та конвертерами.
Однак краще писати безпосередньо на HTML або принаймні зрідка контролювати та модифікувати код HTML. Писати безпосередньо на HTML неважко. Можливо, це навіть легше, ніж вивчати HTML-редактор або конвертер, які часто обмежені у своїх можливостях, містять помилки або роблять поганий HTML-код, який не працює на різних платформах.
Першу версію HTML було розроблено на початку 90-х років Тімом Бенерс-Лі для популярного в минулому броузера Mosaic. Але в ті часи ні для броузера, ні для мови ще не знайшлося гідного застосування. 1993 року з'явився HTML+, і ця версія також залишилася практично непоміченою. Початок широкому використанню гіпертексту дала версія 2.0, яка з'явилася червні 1994 року.
Це був момент початку зростання популярності WWW у всьому світі. Елементи, включені у версію 2, здебільшого використовуються й донині.
У версії 3.0 HTML, яка з'явилася через рік, була реалізована можливість промальовування математичних символів (знаків інтеграла, нескінченності, дробу, дужок і т. д.) за допомогою елементів мови. Під цю версію розроблялися й броузери (Arena). Але цей проект виявився тупиковим і не набув подальшого поширення.
1996 року з'явився HTML версії 3.2. Це було новаторське рішення, досить згадати, що у специфікацію мови були введені фрейми, які стали тепер дуже популярними у розробників Web-сторінок.
Навіть зараз на основі цієї специфікації можна реалізовувати дуже непогані дизайнерські рішення. Майже всі сучасні броузери повністю підтримують версію 3.2, тому автори не мають сумнівів з приводу працездатності заявлених елементів.
Поряд із офіційними специфікаціями мови, які розроблялися організацією W3C (W3 Консорціум), компанії-виробники броузерів створювали власні елементи (розширення).
Згодом деякі з цих елементів після отримання загального визнання включалися до специфікації наступної версії мови. Цікаво, наприклад, що новаторське рішення - фрейми, - яке так сподобалося багатьом розробникам, було включено специфікацію 3.2.
Але броузери підтримували кадри, і багато книг, присвячених HTML, містили описи кадрів без згадки про те, що це нестандартні елементи. І це було правильно, тому що фрейми стали стандартом де-факто. У версію мови 4 вони вже були включені на повній основі.
І навпаки, елементи APPLET і SCRIPT, необхідні для розширення HTML іншими програмними кодами, у версії 3.2 не зіграли тієї ролі, яку були покликані зіграти.
Це пояснювалося тим, що броузери різних версій по-різному інтерпретували програми мовами Java, JavaScript, Visual Basic VBScript. В результаті не вдавалося отримати досить надійно працюючий код, і ці мови використовувалися любителями HTML в основному для експериментів.
Офіційна специфікація HTML 4 (Dynamic HTML) з'явилася 1997 року. У цей час вже було очевидно, що розвиток гіпертексту буде здійснюватися за рахунок скрипт-програмування. Це виявилося набагато ефективнішим, ніж вводити в мову нові елементи.
Броузери (Netscape Navigator 4, Microsoft Internet Explorer 4 та ін.), що з'явилися в той час, вже досить надійно інтерпретували програмний код (був досягнутий певний рівень стандартизації). Проте проблеми розробників ще залишилися. Як приклад можна відзначити, що багато скриптів починаються з визначення версії броузера, щоб потім використовувати той чи інший фрагмент коду.
Вочевидь, що у програміста лягає обов'язок тестування сторінок усім популярних нині броузерах. Крім того, актуальною залишається проблема використання старих чи не дуже популярних програм. Лідерами "броузеробудування" по праву вважаються компанії Microsoft і Netscape, але існують ще й інші фірми.
В результаті використання всіх можливостей Dynamic HTML стало ділом програмістів досить великих організацій, де є умови для розробки складних програм та всебічного їх тестування. Творцям власних Web-сторінок часом доводиться шукати компроміс між надійністю і новаторством, щоб отримати досить грамотний HTML-код.
Анатомія Web-сторінки
Нижче показано заготівлю типового Web-документа. На цьому прикладі ми розглянемо структуру HTML сторінок.
Приклад (шаблон) Web-сторінки
<Т1Т1Е>Структура Web-сторінки
Якщо розглянути вихідні тексти різних Web-сторінок, можна легко побачити схожість їх структур. Це тим, що документи створюються за певними правилами.
В основу синтаксису мови HTML ліг стандарт ISO 8879:1986 "Information processing. Text and office systems. Standard Generalized Markup Language (SGML)". Щоправда, існує велика різниця між офіційним стандартом і стандартом фактичним. HTML постійно розвивається, доповнюється новими елементами, і вивчати його треба не за офіційними першоджерелами, а на практиці, звертаючись до останніх розробок провідних фірм та фахівців.
Щоб зрозуміти структуру Web-сторінки, необхідно розглянути вагу елементи, що входять до наведеного вище листингу. При розгляді елементів мови наводитимемо обидва теги: початковий і кінцевий.
Наприклад: . Цим можна наголосити, що в більшості випадків розробник повинен використовувати два теги для кожного елемента. Кількість випадків, коли допустимо лише початковий тег (частина елементів немає кінцевого взагалі), невелика, і вони спеціально обумовлюються . Для імен тегів можна використовувати як великі, так і малі літери латинського алфавіту.
Деякі користувачі записують початкові теги великими літерами, а кінцеві теги - малими. Це допомагає розібратися у вихідному тексті веб-сторінки.
Синтаксис HTML.
Позначення документа на мові HTML. Вище було згадано у тому, що з принципів мови є багаторівневе вкладення елементів. Цей елемент є зовнішнім, оскільки між його початковим і кінцевим тегам повинна бути вся Web-сторінка.
У принципі цей елемент можна розглядати як формальність. Він має атрибути version, lang і d i r , якими в даному випадку рідко користуються, і допускає вкладення елементів HEAD, BODY, FRAMESET та інших, що визначають загальну структуру Web-сторінки. Звичайно що кінцевим тегомзакінчуються усі подібні документи.
Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само, як попередній елемент, HEAD служить для формування загальної структури документа. Цей елемент може мати атрибути lang та d i r, повинен включати елемент TITLE і допускає вкладення елементів BASE, МЕТА, LINK, OBJECT, SCRIPT, STYLE.
Елемент для розміщення заголовка веб-сторінки. Рядок тексту, розташований усередині цього елемента, відображається над документі, а заголовку вікна броузера. Цей рядок часто використовується для пошуку в WWW . Тому автори, які створюють Web-сторінки для розміщення в Мережі, повинні подбати про те, щоб цей рядок, не надто довгий, досить точно відображав призначення документа.
Опис стилю деяких елементів веб-сторінки. У файлі Strukt.htm призначено шрифти для елементів Н2 та CODE.
Звичайно, для кожного елемента існує стильове оформлення за умовчанням, тому вживання елемента STYLE не обов'язково, але бажано.
Цікаво, як синтаксис HTML відбиває історію розвитку обчислювальної техніки. Наприклад, старий елемент BLINK, що вже не працює, нагадує нам про ті часи, коли люди використовували дисплеї, які мали тільки текстовий режим. При такому стані речей миготіння тексту (blink) було, мабуть, єдиним досяжним візуальним ефектом.
На противагу цьому елемент STYLE, введений порівняно недавно, викликає асоціації з програмами для Windows, оскільки в них вперше з'явилося стильове оформлення тексту, яке тепер неймовірно популярне, і без нього вже немислима робота в таких додатках, як Word або Excel.
Цей елемент містить службову інформацію, яка не відображається під час перегляду веб-сторінки. Усередині нього немає тексту у звичному розумінні, тому немає і кінцевого тега. Кожен елемент МЕТА містить два основні атрибути, перший із яких визначає тип даних, а другий - зміст.
Крім того, елемент МЕТА може містити URL-адресу. Шаблон відповідного атрибуту такий:
URL="http://адреса"
Цей елемент містить у собі гіпертекст, який визначає власне Web-сторінку. Це та довільна частина документа, яку розробляє авто сторінки та відображається броузером. Відповідно, кінцевий тег цього елемента треба шукати наприкінці HTML-файлу. Всередині BODY можна використовувати всі елементи, призначені для дизайну Web-сторінки. Всередині початкового тега елемента BODY можна розмістити ряд атрибутів, що забезпечують установки для всієї сторінки. Розглянемо їх у порядку.
Один з найкорисніших для дизайну – атрибут, що визначає фон сторінки. Його поява можна уподібнити маленькій революції у WWW, оскільки однаково сірі Web-сторінки раптом розцвіли яскравими кольоровими візерунками:
background="Шлях до файлу фону"
Простіше оформлення фону зводиться до завдання його кольору:
bgcolor="#ff/?GGSS"
Колір фону задається трьома дворозрядними шістнадцятковими числами, які визначають інтенсивність червоного, зеленого та синього кольорів відповідно. Більш детально про завдання кольорів буде розказано нижче. Обидва наведені вище атрибути не є альтернативними і часто використовуються спільно: якщо з яких-небудь причин не може бути знайдено малюнок фону, використовується колір.
Оскільки фон сторінки може змінюватись, необхідно мати можливість підбирати відповідний колір тексту. Для цього є наступний атрибут
text="#/?/?GGB5"
Для визначення кольору тексту гіперпосилань використовується наступний атрибут:
Так само можна задати колір для переглянутих гіперпосилань:
vlink="#/?/?GGflS"
Можна також вказати зміну кольору для останнього вибраного користувачем гіперпосилання:
Гіпертекст, розташований усередині елемента BODY, може мати довільну структуру. Її визначають, в першу чергу, призначення Web-сторінки та фантазія розробника.
Елемент заголовка. Існує шість рівнів заголовків, що позначаються Н1...Н6. Заголовок рівня 1 найбільший, а рівень 6 забезпечує найменший заголовок. Для заголовків можна використовувати атрибут, що визначає вирівнювання вліво, по центру або вправо:
Горизонтальна лінія (horizontal rule) - елемент, що дуже часто використовується. По-перше, тому що за його допомогою дуже зручно ділити сторінку на частини. По-друге, тому що вибір подібних елементів оформлення автора сторінки дуже невеликий. Справді, в HTML практично немає схожих конструкцій, тільки для горизонтальної лінії чомусь було зроблено виняток. Щоправда, незважаючи на деяку скнарість мови в цій галузі, можна придумати чимало стандартних графічних образів, які б урізноманітнили вигляд сторінок.
Елемент не має кінцевого тега, але допускає ряд атрибутів для вирівнювання вліво, по центру, праворуч, шириною:
Можна задавати товщину лінії:
51ге = товщина в пікселах
Можна керувати довжиною лінії:
fiitifn-довжина у пікселах
width=/^twa у відсотках/год
Можна вибрати колір:
со1ог="колір"
HTML-документ може бути дуже великим, і в цьому випадку користувач повинен мати можливість швидкого переміщення до потрібного розділу документа . Для цього можна використовувати механізм гіперпосилань. Необхідно також у потрібних місцях тексту розставити відповідні мітки. Тут ми розглянемо лише шаблон для створення міток:
<А name=" метка ">Довільний текст
У цьому випадку даному рядку документа присвоюється ім'я, і, отже, іншій частині документа або навіть на іншому документі може бути створене гіперпосилання, що приводить до цієї точки. Наприклад, для переходу всередині документа можна використовувати таку конструкцію:
<Р>Перехід до<А href=" Пметка ">мітці
Декілька подібних рядків можуть утворити своєрідний зміст Web-сторінки, який можна розмістити на початку та в кінці документа.
Елемент для встановлення базової адреси (URL) для посилань. Це дозволяє опускати початкову частину адреси посилання документа. Для використання цього елемента необхідно використовувати таку конструкцію:
Фрагмент адреси пут // не є обов'язковим.
При формуванні повної адреси його буде відкинуто.
Так, якщо у тексті документа зустрінеться відносне посилання
<А ef =" путь2/имя документа, htm" ">Видимий текст посилання,
то вона буде відповідати URL
У тому випадку, коли потрібно задати базову адресу для локального диска (наприклад.D:), має бути використана така конструкція:
Тоді при вказівці відносного посилання можна буде задавати не тільки ім'я файлу, а й імена папок, де він знаходиться. Іншими словами, шлях до файлів може бути розбитий на дві частини: абсолютну та відносну. Це корисно в тому випадку, коли файли, зазначені в документі, мають загальний початковий фрагмент шляху. У виразі абсолютного посилання можна опустити вказівку на схему доступу (file: //). У цьому випадку враховуватиметься лише ліва частина абсолютного посилання до першого лівого символу "", тобто ім'я локального диска.
Правила синтаксису
Тепер, коли ми знаємо, як виглядає код Web-сторінки, можна зробити деякі узагальнюючі висновки щодо синтаксису HTML. При використанні кожного елемента важливо знати, які елементи можуть розташовуватися всередині нього і всередині яких елементів може бути він сам.
Так, взаємне розташування елементів HTML, HEAD, TITLE та BODY має бути стандартним на будь-якій сторінці, щоправда, у тих випадках, коли не використовуються фрейми. Якщо ж сторінка є документом планування кадрів, то замість елемента BODY використовується елемент FRAMESET .
Існують групи елементів, які використовуються разом. До них відносяться елементи для створення таблиць, списків, кадрів.
І тут порядок вкладення елементів визначається логікою створення тієї чи іншої об'єкта на сторінці: тут пам'ятати нескладні правила конструювання.
Таблиці та кадри часто використовуються для того, щоб розмістити деталі сторінки (малюнки, текст тощо) у певному порядку.
Наприклад, розташовуючи малюнок усередині комірки таблиці, можна досягти певного його положення.
У таких випадках вкладеність елементів визначається розробником Web-сторінки, і багато залежить від його фантазії та вміння.
Багато елементів, які використовуються для форматування тексту, допускають найрізноманітніші варіанти вкладення. І самі вони обов'язково повинні розташовуватись усередині певних елементів.
Тут треба керуватися здоровим глуздом: кожен елемент виконує задану функцію і має певну сферу дії.
У наведеному нижче прикладі є два абзаци (перший у зеленій рамці) та таблиця:
<Р style="border: Зрх solid дгееп">Текст абзацу 1
<Р>Текст абзацу 2
Таблиця у разі -- незалежний елемент. Її можна, наприклад, вирівнювати незалежно від решти тексту.
Можна використовувати інший код:
<Р style="border: Зрх solid дгееп">Текст абзацу 1
<Р>Текст абзацу 2
Зник кінцевий тег першого абзацу. Тепер таблиця є частиною першого абзацу, і зелена рамка охоплюватиме таблицю та текст. І навпаки, елемент Р може перебувати всередині таблиці: наприклад, один елемент клітини TD може містити кілька абзаців Р.
Порушення правил вкладення - одне з найпоширеніших помилок під час створення Web-страниц. Щоб уникнути таких помилок, треба скористатися редакторами гіпертексту, які автоматично контролюють виконання правил синтаксису. Нижче наведено рядок, що містить типову помилку вкладених елементів:
<Н1>Заголовок 1<Н2>Заголовок 2Заголовок 3
Слід зазначити, що броузери побудовані таким чином, що вони намагаються реагувати на помилки розмітки гіпертексту. Якщо сторінку можна відобразити, вона відображається без будь-яких попереджувальних повідомлень.
Програма інтерпретує помилково розставлені теги певним чином і формує зображення, дотримуючись логіки, закладеної в неї розробниками. При цьому вигляд сторінки може не відповідати задуму автора. І лише у разі дуже серйозних помилок чи явних протиріч броузер виводить повідомлення з неможливості відобразити сторінку.
Непрямою ознакою помилки розміток може бути поява на сторінці фрагментів коду HTML. Користувачі, які багато працюють з Інтернетом, напевно стикалися з такою ситуацією.
Правила синтаксису поширюються і використання стартового і кінцевого тегів, атрибутів і вмісту елемента. Не плутайте поняття "елемент" v. "тег". Елемент – це контейнер, що містить атрибути всередині стартового тега до корисної інформації між стартовим та кінцевим тегами. Тег - це конструкція, укладена в кутові дужки і використовується для позначення області впливу елемента.
Деякі елементи немає кінцевого тега. Очевидно, що елементу BR, що означає кінець рядка, не потрібен кінцевий тег. Деякі елементи можуть бути використані з кінцевим тегом або без нього. Найяскравішим прикладом є елемент абзацу Р.
Він може мати кінцевий тег, але якщо цей тег не заданий, ознакою закінчення дії елемента служить наступний елемент, який може логічно визначити кінець поточного абзацу: інший елемент Р, елемент малюнка IMG, елемент списку UL, елемент таблиці TABLE і т.д.
Таким чином, корисна інформація одного елемента повинна бути або між початковим і кінцевим тегами даного елемента, або між початковим тегом даного та початковим тегом наступного елемента.
Будь-який довільний текст, введений на сторінку, сприймається браузером як підлягає виведенню на екран і, отже, форматування відповідно до елементів, що оточують цей текст. При цьому не враховується розбиття тексту на рядки, отримане у текстовому редакторі. Теоретично всю Web-сторінку можна вмістити в одному довгому рядку. Символи кінця рядка, введені, наприклад, у Блокноті, можуть допомогти читати код HTML, але не відображаються браузером.
Останній, при виведенні сторінки на екран, може обірвати рядок відповідно до розміщення елементів Hn, P або BR, а в інших випадках він форматує абзаци довільно, залежно від обсягу тексту, розміру шрифту та поточного розміру вікна.
Тому Web-сторінки треба компонувати в такий спосіб, щоб їхній вигляд кардинально не змінювався для різних режимів роздільної здатності монітора, розміру екрана, розміру вікна броузера, а також для повноекранного або віконного режимів.
Дуже важливим правилом, яке немає винятків, є розміщення атрибутів елемента всередині початкового тега.
