нові матеріали
Структура документа - заголовок і тіло
Як ми вже знаємо, будь-який документ HTML складається з трьох частин:
- Рядки, що містить інформацію про версії XHTML або HTML
- Блоку заголовка документа
- Тіла документа, що містить або безпосередньо наведену інформацію, або що визначає набір фреймів.
Друга і третя частини повинні бути вкладені в контейнер HTML. При цьому, якщо створювати документ HTML 4.0, вказувати явно контейнери для документа, його заголовка і тіла немає потреби: якщо вони опущені, мається на увазі, що браузер сам визначить де що знаходиться. Тому і відкривають, і закривають теги для цих елементів відзначені як опціональні. Проте, «правила хорошого тону» вимагають, щоб ці теги все-таки присутні. Для всіх інших елементів HTML відкриває тег обов'язковий. Для XHTML-документів обов'язковий і закриває тег, для всіх без винятку елементів. Крім того, за правилами XHTML все теги і атрибути повинні бути набрані в нижньому регістрі.
Тут же слід обумовити деякі терміни, що застосовуються в описі елементів. Якщо про сумісність ми вже домовилися на самому початку книги, то про вкладення і унікальність ще не говорили. Отже, характеристика вкладення визначає, можна чи ні вкладати один елемент такого типу в інший такий же. Тобто якщо вкладення неприпустимо, то конструкції такого типу будуть невірними:
Що стосується унікальності, то якщо для елемента заявлено це властивість, то слід пам'ятати, що в документі він може бути представлений лише один раз. Так, наведений вище приклад невірний двічі, оскільки елемент HTML не тільки не може бути вкладеним, але і є унікальним.
Інформація про версію -! DOCTYPE
Будь дійсний документ HTML і XHTML повинен містити інформацію про версії мови, використовуваного в документі. Для HTML і XHTML визначено по три типу документів:
- Strict - такий документ не повинен містити скасованих елементів і атрибутів, і не повинен бути контейнером для фреймів.
- Transitional - більш «м'яке» визначення. Може містити все те, що і Strict, а також скасовані елементи і атрибути.
- Frameset - вказує на те, що даний документ є контейнером для набору фреймів. У ньому не повинно бути частини BODY.
Додатково для документів HTML рекомендується, а для XHTML - потрібно вказувати файл, який містить DTD - document type definition (визначення типу документа) для даного типу документа:
УВАГА
Якщо ви вказуєте в заголовку тип документа, то вже постарайтеся при подальшому його створенні як можна більш жорстко дотримуватися зазначеного типу.
У сучасних браузерів, включаючи навіть MSIE 6, одна і та ж сторінка, з визначенням DOCTYPE і без такого, в ряді випадків може виводитися по-різному. Більш того, всі версії Firefox і Chrome, а так же Opera і MSIE 7 і вище реагує і на те, який саме варіант HTML або XHTML вказано - Strict або Transitional.
Властивості тега! Doctype
Атрибути: немає.
Закриває тег: немає.
Сумісність: все.
Вкладення: неприпустимо (порожній елемент).
ПРИМІТКА
Порожнім елементом є елемент, нічого не містить між відкриває і закриває тегами, або ж просто не має закриває тега в HTML.
елемент HTML
Після рядка з інформацією про версію, весь інший документ повинен бути укладений в контейнер HTML. Текст, поміщений поза цього елемента, може ігноруватися браузером, і хоча на практиці цього не відбувається, стежте, щоб весь вміст документа знаходилося всередині контейнера HTML.
Таблиця 2.1. Атрибути елемента HTML
Визначає напрямок тексту в документі
Лістинг 2.1. елемент HTML
Властивості тега HTML
Закриває і відкриває теги: опціонально.
Сумісність: все.
Вкладення: неприпустимо.
Унікальний: так.
елемент HEAD
Даний елемент містить інформацію про поточний документ - таку, як заголовок, ключові слова, і іншу інформацію, яка не повинна відображатися в документі. Браузери не повинні відображати інформацію, вміщену в контейнер HEAD, проте можуть її використовувати для будь-яких інших цілей.
Таблиця 2.2. Атрибути елемента HEAD
Лістинг 2.2. елемент HEAD
Властивості тега HEAD
Закриває і відкриває теги: опціонально.
Сумісність: все.
Вкладення: неприпустимо.
Унікальний: так.
Атрибути LANG і DIR
Ми тільки почали знайомитися з елементами HTML, але вже можемо помітити, що деякі їх атрибути повторюються. Зокрема, до таких належать LANG і DIR, які визначені для всіх елементів, за допомогою яких можна вивести будь-якої текст, іншими словами - для всіх елементів, крім APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, HR, IFRAME, PARAM і SCRIPT.
Обидва цих атрибута були введені в HTML 4.0 з метою поліпшення підтримки інтернаціоналізації. Так, атрибут DIR служить для визначення напрямку виведення тексту і може набувати таких значень:
- LTR - виводити текст або дані таблиці зліва направо (за замовчуванням)
- RTL - виводити текст або дані таблиці справа наліво.
Атрибут LANG служить для вказівки того, якою мовою складено документ або його частину. З його допомогою можна визначати альтернативні документи для пошукових машин, допомагати розпізнавати текст вбудованим в браузер перекладачам і мовним синтезаторів і т.д. Як значення вказується мову відповідно до RFC1766. Наприклад, російський позначається як «ru», англійська - «en» і т.д.
Деякий висловлювання.
УВАГА
У XHTML 1.1 замість атрибута LANG слід використовувати атрибут XML: LANG.
ПРИМІТКА
Насправді, в HTML 4, крім цих двох атрибутів, є ще й спеціальний елемент - BDO, який відповідає за виведення різноспрямованого тексту. Але, оскільки, для російського (і всіх європейських) мов це не актуально, дана тема залишиться за рамками цього видання.
Елемент TITLE і атрибут TITLE
Кожен дійсний документ HTML або XHTML повинен мати елемент TITLE в частині HEAD. Цей елемент використовується для визначення змісту документа. Більшість браузерів (зокрема, всі розглянуті нами в цій книзі браузери) відображають рядок, розміщену всередині елемента TITLE як заголовок вікна. Хоча явних обмежень на довжину тексту немає, реально слід укластися не більше ніж в 40-50 символами.
Таблиця 2.3. Атрибути елемента TITLE
Визначає напрямок тексту всередині елемента
Як видно, всі атрибути елемента TITLE зводяться лише до вказівки мови, на якому написано те, що знаходиться всередині контейнера. У той же час, для переважної більшості елементів визначено атрибут TITLE, службовець заголовком (або коротким описом) вмісту такого елемента. Для виведених у вікні браузера елементів значення атрибута TITLE, як правило, виводиться в якості підказки ( «hint»).
властивості TITLE
Закриває тег (для елемента TITLE): потрібно.
Сумісність: елемент TITLE - все, атрибут TITLE - все.
Вкладення (для елемента TITLE): неприпустимо.
Унікальний (для елемента TITLE): так.
елемент META
Елемент META використовується для включення різної інформації про документ, а також надає можливість повідомляти додаткові інструкції як клієнтської частини (браузеру), так і серверної. Він використовується в форматі «властивість - значення».
Таблиця 2.4. Атрибути елемента META
Визначає напрямок тексту всередині елемента
Розглянемо докладніше атрибут HTTP-EQUIV. Так, елемент META з наступним визначенням вказує, що в документі міститься текст у форматі HTML:
Додатково може бути вказана і кодова сторінка:
Зверніть увагу на косу риску в самому кінці: оскільки за правилами HTML 4 у елемента META немає закриває тега, а в XHTML - є, то в даному випадку застосований так званий «короткий синтаксис» закриває тега. Такий шлях є кращим, ніж використання звичайного закриває тега, оскільки якщо браузер не розуміє XHTML, то він може зіткнутися з проблемою, натрапивши на непередбачений в HTML тег.
Так само слід зазначити, що хоча стандарт W3C рекомендує нам завжди вказувати значення Charset, проконсультуйтеся з адміністратором вашого сервера щодо налаштувань щодо підтримки російських кодових сторінок. Справа в тому, що часто використовується авто-визначення платформи клієнта, і документ перекодируется вже при відправці з сервера. Таким чином, браузер може спробувати провести зайву перекодування, чого він не буде робити, якщо Charset не вказано.
Як і NAME, атрибут HTTP-EQUIV має ряд загальноприйнятих властивостей. До них відносяться:
- Refresh - це властивість підтримується більшістю браузерів і змушує їх перевантажувати документ після закінчення інтервалу часу, зазначеного в секундах.
- Expires - вказує дату, після якої документ стає застарілим. Змушує браузер явно завантажити документ з мережі, а не з кешу.
- Content-type - вказує на тип файлу
- Content-style-type - вказує на тип застосовуваних таблиць стилів
- Content-script-type - вказує на застосовуваний за замовчуванням мову сценаріїв
Якщо вставити в документ такої код, то він буде перезавантажуватися кожну хвилину.
Якщо виставити вже минулий дату (як в прикладі), то документ завжди буде завантажуватися безпосередньо з мережі.
властивості META
Закриває тег: тільки для XHTML.
Сумісність: все.
Вкладення: неприпустимо (порожній елемент).
Унікальний: немає.
елемент BODY
Контейнер BODY охоплює весь вміст документа, яке повинно бути представлено користувачеві. Якщо документ є контейнером для фреймів, то він не повинен містити елементи BODY.
Лістинг 2.3. елемент BODY
Таблиця 2.5. Атрибути елемента BODY
Визначає дію, яке повинно бути виконано коли відпущена клавіша на клавіатурі
УВАГА
Оскільки багато з перерахованих в таблиці 2.5 атрибутів, включаючи id, class, lang, dir, style і title є практично у всіх елементів XHTML, в подальшому вони будуть вказуватися разом і без індивідуального опису.
У лістингу 2.4 приведений приклад з використанням скасованих атрибутів.
Лістинг 2.4. Форматування в стилі HTML 3.2
Насправді, цей документ не підходить навіть під визначення «HTML 4.01 Transitional», оскільки використовується відсутній в специфікації HTML атрибут LEFTMARGIN. Якщо ж ви хочете створити коректний документ HTML або XHTML, то використовуйте для цих цілей таблиці стилів, як показано в лістингу 2.5.
Лістинг 2.5. сучасне форматування
властивості BODY
Хто відкриває і закриває теги: опціонально.
Сумісність: все.
Вкладення: неприпустимо.
Унікальний: так.
Групуються елементи DIV і SPAN
Всі елементи, розташовані всередині BODY, підрозділяються на елементи рівня блоку і строкові елементи, або елементи рівня тексту. Їх відмінність зводиться до наступних пунктів:
- Елементи рівня блоку можуть містити в собі як вбудовані елементи, так і інші елементи рівня блоку. Іншими словами, елементи рівня блоку утворюють більш глобальну (велику) структуру, ніж вбудовані.
- Як правило, браузер виробляє висновок елементів рівня блоку з нового рядка, в той час як строкові - в загальному потоці документа.
Елемент DIV відноситься до елементів рівня блоку (block-level), а SPAN - до вбудованим, або строковим елементам (inline). Обидва вони застосовуються для форматування відповідної частини документа з використанням таблиць стилів. На практиці DIV також використовують для об'єднання декількох абзаців в одну групу, як показано в лістингу 2.6 (готовий файл знаходиться в папці Part_2 \ Structural).
Лістинг 2.6. Використання группирующих елементів
При візуальному відображення наведеного вище коду весь текст, укладений як в перший, так і в другій контейнери DIV буде на сірому тлі і вирівняний по центру, за винятком частини рядка, укладеної в SPAN, яка буде на білому тлі (рис. 2.1).
Мал. 2.1. Угруповання і оформлення за допомогою елементів DIV і SPAN
Обидва ці елементи мають один і той же набір атрибутів, наведених у таблиці 2.6. Виняток становить лише скасований атрибут ALIGN, наявний тільки у DIV. Він відповідає за вирівнювання тексту і може приймати 4 значення: Center, Left, Right і Justify, які змушують текст вирівнюватися по центру, лівому краю, правому краю і по ширині відповідно:
Таблиця 2.6 Атрибути елементів DIV і SPAN