Форматування тексту

2.1Теги рівня блоку і послідовні теги

Деякі HTML-теги, які можуть з'являтися в розділі BODY, називають тегами рівня блоку (block level), в той час як інші послідовними (inline) тегами або, називаючи по-іншому, тегами рівня тексту (text level), хоча таке розділення тегів за рівнями певною мірою умовно.

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

2.2 Логічне та фізичне форматування

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

Теги логічного форматування позначають (своїми іменами) структурні типи своїх текстових фрагментів, такі, наприклад, як програмний код (тег <CODE>), цитата (тег <CITE>), абревіатура (тег <ABBR>) тощо (див. описи цих та інших подібних тегів в наступному розділі). За допомогою тегів <EM> і <STRONG> можна, наприклад, відзначити окремі фрагменти як виділені, або сильно виділені. Зауважимо, що мова йде про структурної розмітки, яка не впливає на конкретне екранне представлення фрагмента браузером. Тому така розмітка і називається логічною. Фрагменти з логічним форматуванням браузери відображають на екрані певним чином, заданим за замовчуванням. Вид відображення ніяк не пов'язаний зі структурним типом фрагмента (тобто ім'ям тега логічного форматування), але може бути легко змінені.

Теги фізичного форматування визначають формат відображення зазначеного в них фрагмента тексту у вікні браузера (згідно з уподобанням автора документа). Наприклад, для відображення фрагмента курсивом можна використовувати тег курсиву <I>. Цей і інші, часто використовувані тегів фізичного форматування описані нижче в розділі "Теги фізичного форматування тексту"цієї глави.

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

Тим не менш, на даний момент може вільно використовуватися і фізичне форматування. У специфікації HTML 4.0 деякі теги фізичного форматування не рекомендуються для застосування, однак, поки вони все ще підтримується всіма браузерами. Зауважимо, що деякі теги логічного форматування, покликані замінити окремі тегів фізичного форматування, підтримуються не всіма браузерами, що робить їх застосування вкрай незручним. Прикладом може служити логічний тег <DEL>, який рекомендується використовувати замість фізичного тега <STRIKE>.

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

2.3 Теги логічного форматування

Тег <ABBR>

Тег <ABBR> отмечает свой текст как аббревиатуру (ABBReviation). Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего времени не поддерживается ни одним браузером.

Тег <ACRONYM>

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

Даний тег зручно використовувати в поєднанні з параметром TITLE значення якого можна вказати повну форму запису абревіатури. Тоді візуальні браузери при наведенні курсору на текст, розмічений тегом <ACRONYM>, будуть видавати повне найменування у вигляді з'являється підказки. Зауважимо, що тег <ACRONYM> розпізнається тільки браузером Microsoft Internet Explorer. Приклад: <ACRONYM TITLE="Київський Професійний Коледж зв’язку з посиленою військовою та фізичною підготовкою"> КПК</ACRONYM> — один з кращих Коледжів міста Києва.

Тег <CITE>

Тег <CITE> використовується для позначки цитат або назв книг та статей, посилань на інші джерела і т. д. Браузерами такий текст зазвичай виводиться курсивом. Приклад:

<CITE>Сегодня</CITE> є однією з найбільш популярних міських газет Киэва.

Тег <CODE>

Тег <CODE> відзначає свій текст як невеликий фрагмент програмного коду. Як правило, відображається моноширинним шрифтом. Цей тег не слід плутати з тегом <PRE>, що є елементом рівня блоку, який слід використовувати для позначення великих фрагментів (лістингів) коду.

Наприклад:

Приклад найпростішого оператора мови програмування C:<BR>

<CODE>puts("Hello, World!");</CODE>

Є ще одна відмінність у використанні тегів <CODE> <PRE>.

В коді програм часто буває важливо наявність кількох послідовних прогалин. Їх відображення буде збережено тільки при використанні тега <PRE>

Тег <DEL>

Тег <DEL> відзначає свій текст як віддалений. Цей елемент корисно використовувати для оцінки змін, внесених у документ від версії до версії. Тег <DEL> може використовуватися як елемент рівня тексту і як елемент рівня блоку.

Тег має два необов'язкові параметри: CITE і DATETIME. Значення параметра CITE повинно представляти собою URL-адреса документа, пояснення причини видалення даного фрагмента.

Параметр DATETIME вказує дату видалення в форматі YYYY-MM-DDThh:mm:ssTZD, визначає рік, місяць, число, години, хвилини і секунди видалення, а також часовий пояс (Time Zone). Наприклад:

Останньої прийнятої специфікацією мови розмітки HTML є версія <DEL DATETIME=1999-10-29T16:12:53+0.00>3.2</DEL> 4.0

Текст, позначений тегом <DEL> зазвичай відображається перекресленим текстом. У специфікації HTML 4.0 цього тегу віддається перевага перед тегом фізичного форматування <STRIKE> або <S>, що позначають закреслений текст. Однак тег <DEL> в даний час розпізнається тільки браузером Microsoft Internet Explorer.

Тег <DFN>

Тег <DFN> відзначає свій текстовий фрагмент як визначення (DeFinitioN). Наприклад, цим тегом можна відзначити якийсь термін, коли він зустрічається в тексті в перший раз. Приклад:

<DFN>Internet Explorer</DFN> — це популярний Веб-браузер

Тег <DFN> підтримується тільки браузером Microsoft Internet Explorer. Відображається за умовчанням курсивом.

Тег <INS>

Тег <INS> відзначає свій текст як вставку (INSertion). Цей елемент корисно використовувати для оцінки змін, внесених у документ від версії до версії. Тег <INS> може використовуватися як елемент рівня тексту і як елемент рівня блоку. Тег має два необов'язкові параметри: CITE і DATETIME. Значення параметра CITE повинно представляти собою URL-адреса документа, пояснення подробиці внесених доповнень. Параметр DATETIME вказує дату вставки в форматі YYYY-MM-DDThh:mm:ssTZD, визначає рік, місяць, число, години, хвилини і секунди вставки, а також часовий пояс (Time Zone).

Текст, позначений тегом <INS>, зазвичай відображається підкресленим текстом. Тег <INS> в даний час розпізнається тільки браузером Microsoft Internet Explorer.

Тег <EM>

Тег <EM> (EMphasis — виділення, підкреслення) використовується для виділення важливих фрагментів тексту. Браузери зазвичай відображають такий текст курсивом. Приклад:

Приклад виділення <EM>окремих слів</EM> тексту

Застосування даного тега переважно застосування тегів фізичного форматування <I>.

Тег <KBD>

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

Щоб запустити текстовий редактор, надрукуйте: <KBD>notepad</KBD>

Застосування даного тега переважно застосування тегів фізичного форматування <TT>.

Тег <Q>

Тег <Q> зазначає короткі цитати в рядку тексту. На відміну від тега рівня блоку <BLOCKQUOTE> при відображенні не виконується відділення розміченого тексту порожніми рядками. Зазвичай відображається курсивом. Тег <Q> (на відміну від <BLOCKQUOTE>) в даний час розпізнається тільки браузером Microsoft Internet Explorer.

Тег має параметр CITE значення якого можна вказати джерело цитати.

Тег <SAMP>

Тег <SAMP> відмічає текст як зразок (SAMPle). Звичайне використання цього тега — відмітка тексту, що видається програмами (sample output). Використовується також для виділення декількох символів моноширинним шрифтом.

Застосування даного тега переважно застосування тегів фізичного форматування <TT>. Наприклад:

В результаті роботи програми буде надруковано: <SAMP>Hello, World!</SAMP>.

Тег <STRONG>

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

Київ розташований у середній течії Дніпра<STRONG> у північній Наддніпрянщині</STRONG > одне з найбільших<STRONG>і найстаріших міст</STRONG>

Застосування даного тега переважно застосування тегів фізичного форматування <B>. Тег <STRONG> зазвичай розмічають більш важливі фрагменти тексту, ніж ті, що розмічені тегом <EM>.

Тег <VAR>

Тег <VAR> зазначає імена змінних програм. Зазвичай такий текст відображається курсивом. Приклад:

Визначте значення змінної <VAR>N</VAR>

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

Мал.

Деякі елементи дають однаковий результат. Більше того, частина елементів ніяк не може змінювати подання фрагмента тексту на екрані. Може виникнути законне питання: для чого створено така різноманітність елементів форматування?

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

2.4 ТЕГИ ФІЗИЧНОГО ФОРМАТУВАННЯ ТЕКСТУ

Наведемо опис тегів фізичного форматування. Частина з них не рекомендується до використання специфікацією HTML 4.0 з наведених вище причин. Деякі теги скасовані (deprecate) специфікацією HTML 4.0, проте вони продовжують підтримуватися браузерами.

Тег <B>

Тег <B> відображає текст напівжирним шрифтом. У більшості випадків рекомендується замість тега <B> використовувати тег логічного форматування <STRONG>. Наприклад:

Це <B>жирний</B> шрифт.

Мал. Приклади фізичного форматування тексту (браузером Opera)

Тег <I>

Тег <I> відображає текст курсивом. Для більшості випадків замість цього тега рекомендується використовувати тег <EM> <DFN>, <VAR> або <CITE>, оскільки останні краще відображають призначення виділяється тексту. Наприклад: Виділення <I>курсив</I>

Тег <TT>

Тег <TT> відображає текст моноширинним шрифтом. Для більшості випадків замість цього тега краще використовувати теги <CODE>, <SAMP> або <KBD>. Приклад:

Це <TT>моноширинний</TT> шрифт.

Тег <U>

Тег <U> відображає текст підкресленим. Скасований тег. Замість нього рекомендується використовувати тег <STRONG> або <CITE>. Наприклад:

Приклад <U>підкреслення</U> тексту.

Теги <STRIKE> <S>

Теги <STRIKE> <S> відображають текст, перекреслений горизонтальною лінією. Скасований тег. Замість нього слід використовувати тег <DEL>. Наприклад:

Приклад <STRIKE>закресленого</STRIKE> тексту.

В даний час тег <DEL> підтримується не всіма браузерами, тому поки рекомендується використовувати <DEL> в поєднанні з тегом <STRIKE>. А саме, всередину тега-контейнера <DEL> можна вкласти пару тегів

<STRIKE>...</STRIKE>.

Тег <BIG>

Тег <BIG> виводить текст шрифтом більшого (ніж непомеченная частина тексту) розміру. Замість цього елемента краще використовувати <STRONG> або теги заголовків, наприклад, <H3>. Більшість браузерів підтримують вкладені теги <BIG>, однак використовувати такий підхід не рекомендується. Наприклад:

Шрифт <BIG>більшого</BIG> розміру.

Тег <SMALL>

Тег <SMALL> виводить текст шрифтом меншого розміру. Оскільки в HTML тега немає, протилежного за дії тегу <EM>, то для цих цілей можна застосовувати тег <SMALL>. Більшість браузерів підтримують вкладених тегів <SMALL>, однак використовувати такий підхід не рекомендується. Наприклад:

Шрифт <SMALL>меншого</SMALL> розміру.

Тег <SUB>

Тег <SUB> зрушує текст нижче рівня рядка і виводить його (якщо можливо) шрифтом меншого розміру. Зручно використовувати для математичних індексів. Наприклад:

Приклад шрифту <SUB>нижнього</SUB> індексу.

Тег <SUP>

Тег <SUP> зрушує текст вище рівня рядка і виводить його (якщо можливо) шрифтом меншого розміру. Зручно використовувати для завдання ступенів чисел в математиці. Наприклад:

Приклад шрифту <SUP>верхнього</SUP> індексу.

Тег <BLINK>

Тег <BLINK> відображає миготливий текст. Цей тег не входить в специфікацію HTML і підтримується тільки браузером Netscape. Досвідчені розробники вкрай рідко вдаються до використання цього тега, оскільки наявність на сторінці миготливих символів дратує багатьох користувачів.

Тег <SPAN>

Тег-контейнер <SPAN> є аналогом тега рівня блоку <DIV>. Може використовуватися в тих випадках, коли потрібно відмітити фрагмент тексту для завдання його властивостей, і при цьому не вдається використовувати ніякий інший структурний тег форматування.

Браузер Microsoft Internet Explorer додатково дозволяє використання таких параметрів тега: DIR, DATAFLD, DATAFORMATAS, DATASRC. Опис параметрів можна знайти у другій частині книги.

Мал. Використання вкладених тегів форматування тексту

Теги форматування можуть бути вкладеними один в одного. При цьому потрібно уважно стежити, щоб один контейнер перебував цілком в іншому контейнері. На рис. 1.3 показаний приклад використання вкладення елемента курсиву в елемент напівжирного шрифту. Використаний наступний фрагмент HTML-коду:

Це <B>жирний</B> шрифт.

<P>

Це <I>курсив</I>.

<P>

А тут текст <B><I>напівжирне і курсивне</I></>

Тег <FONT>

Тег <FONT> вказує параметри шрифту. Він відноситься до тегів фізичного форматування рівня тексту.

Призначення параметрів шрифту безпосередньо в тексті документа порушує основну ідею поділу змістовній частині документа і опису форми подання документа. Тому в специфікації HTML 4.0 даний тег, а також тег <BASEFONT> віднесені до скасованим. Їх подальше застосування не рекомендується.

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

Тег <FONT> відноситься до послідовних елементів, тому не може включати в себе елементи рівня блоку, наприклад, <P> або <TABLE>.

Для тега можуть задаватися такі параметри: FACE, SIZE і COLOR. Зауважимо, що браузер Netscape припускає також використання двох додаткових параметрів: POINT-SIZE та WEIGHT, опис яких опускаємо.

FACE

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

Можна вказати як один, так і декілька назв шрифтів, розділяючи їх комами. Це дуже корисна властивість, так як в різних системах можуть бути майже ідентичні шрифти, називаються по-різному. Іншим важливим якістю є завдання переваги використання шрифтів. Список шрифтів проглядається зліва направо. Якщо на комп'ютері немає шрифту, вказаного в списку першим, то робиться спроба знайти наступний шрифт і т. д.

Наведемо приклад використання параметра FACE:

<HTML> <HEAD>

<TITLE>Призначення шрифтів</TITLE>

</HEAD>

<BODY>

Текст, записаний на шрифт за замовчуванням.

<BR>

<FONT FACE="Verdana", "Arial", "Helvetica">

Приклад завдання назви шрифту.

</FONT>

</BODY>

</HTML>

На рис. 1.4 показано приклад відображення браузером Netscape. У прикладі як пріоритетний вказується шрифт Verdana, при його відсутності буде використаний шрифт Arial і т. д.

Дата добавления: 2015-07-11