Сьогодні продовжимо розгляд різних тегів, а саме Font, Blockquote, Pre, Strong, Em, B, I і інших, що дозволяють здійснювати форматування тексту.

Blockquote і Pre - форматування в HTML

Раніше (ще до появи CSS) тег цитати Blockquoteв Html коді використовувався досить часто, тому що фрагмент тексту, укладений в нього, отримував горизонтальний відступ, що було не так-то просто зробити в той час в силу неможливості використання CSS властивостей. Елемент Blockquote є парним і всередині нього можуть перебувати як рядкові теги, так і блокові (наприклад, абзаци P).

приклад

Приклад, укладений в Blockquote

Зараз тег Blockquote як і раніше використовується при оформленні тексту, але зовнішній вигляд цитат в наш час вже зазвичай задається за допомогою CSS властивостей, прописаних саме для нього в файлі з таблицями стилів вашого шаблону оформлення. Наприклад, в разі мого блогу, в style.css можна знайти такі рядки:

#content blockquote (margin: 15px 0 20px 0; padding: 5px 8px 5px 35px; background: # eaedf0 url (images / quote2.png) no-repeat left top; background-position: 8px 5px; color: # 666; font- size: 14px; width: 91%; font-style: italic;) #content blockquote p (color: # 666; font-size: 14px;)

Ну, а те, як будуть при цьому виглядати цітатати, укладені в Blockquote, ви можете побачити в тексті статті з інтерв'ю з керівником.

Крім цитати в Html раніше (до появи CSS) досить широко використовувався ще один тег форматування - Center. Він є парним (своєрідний контейнер) і блоковим. У ньому можна укладати будь-які елементи тексту (як малі, так і блокові), які в результаті цього дійства будуть вирівняні по центру.

Так, тепер давайте розглянемо тег Pre, Який дозволяє передати форматування тексту заданий безпосередньо в вихідному коді. Пам'ятайте я говорив, що все йдуть підряд в (пробіл, табуляція і перенесення рядка) будуть при розборі коду в браузері замінені одним єдиним пропуском.

Так ось, елемент Pre забороняє скорочення пробільних символівв ділянці тексту, який буде в нього укладений. Що примітно, для фрагмента, укладеного в Pre, браузер не буде здійснювати автоматичний перенос рядків по пробільним символам.

Тобто всі рядки всередині елемента Pre будуть вважатися браузером нерозривними - як ви написали в коді, так і буде відображатися в браузері. Причому, в браузері для відображення ділянки тексту, відформатованого за допомогою тега Pre, буде використовуватися моноширинний шрифт, типу Courier New або подібні до нього.

Форматування в вихідному коді тег Pre теги застарілі

Сам тег Pre є блоковим, а всередині нього (цей тег парний) може бути укладений тільки рядковий контент (тобто всередині нього не слід розміщувати абзаци P, заголовків H1 - H6 і т.п.).

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

Font - робота з кольором і шрифтом тексту в чистому Html

Strong, Em - теги логічних і візуальних виділень в тексті

Якби зараз не існувало CSS, то я мав би описати призначення тих чи інших тегів логічного і фізичного (візуального) форматування тексту. Але, тому що CSS зараз вже використовується на переважній більшості сайтів, то роль подібних тегів в Html коді вже практично зведена до нуля, тому я лише швидко пробіжуся по ним і поясню для чого вони використовувалися раніше (а деякі використовуються і зараз).

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

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

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

А ось для виділень без ключових слів радили використовувати Html елементи «B» і «I», які для користувачів знову ж виглядали б теж як виділення жирним і курсивом, але вже пошуковими машинами не враховувалися, тому що вони не є тегами логічного форматування.

Зараз все це вже практично не працює так, як було задумано, і виділення ключових слів за допомогою Strong і EM ми робимо швидше за звичкою, ніж дійсно сподіваючись на певні дивіденди за це з боку пошукових систем.

Отже, крім уже згаданих «B» і «I» (виділення жирним і курсивом) до розряду візуального форматуванняможна віднести вже розглянуті на початку статті Font, Pre, а також теги:

1. «U» - виділення підкресленням
2. «Strike» - перекреслення
3. «Sup» - верхній індекс
4. «Sub» - нижній індекс
5. «Tt» - виділення моноширінним шрифтом
6. «Big» - збільшити шрифт
7. «Small» - зменшити шрифт

Ну, а тепер давайте розглянемо перелік елементів логічного форматуваннятексту:

1. «Em» - логічне виділення важливих фрагментів курсивом
2. «Strong» - те ж саме, але тільки виділятися буде жирним
3. «Cite» - виділення цитат курсивом
4. «Code» - призначений для відображення різноманітних кодів моноширінним фонтом
5. «Samp» - для виділення декількох символів моноширінним фонтом
6. «Abbr» - в атрибуті Title цього тега прописується розшифровка якої-небудь абревіатури (типу, CSS або Html, які читаються по буквах, а не як єдине слово). Прописані в Title слова будуть спливати при підведенні до цієї абревіатурі курсора миші.
7. «Acronym» - те ж саме, але використовується для акронімів, тобто скорочень, які читаються не по буквах, а як слово (наприклад, МКАД або Гаї)
8. «Kbd» - використовується для відображення моноширінним шрифтом тексту, що вводиться користувачем сайту з клавіатури
9. «Var» - використовується для виділення курсивом змінних в будь-якому коді
10. «Del» - виділення перекресленням, коли потрібно показати, що якийсь фрагмент був видалений після опублікування Html документа
11. «Ins» - виділення підкресленням, коли потрібно показати, що якийсь шматок був вставлений після публікації Html документа

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

Удачі вам! До швидких зустрічей на сторінках блогу сайт

Вам може бути цікаво

Пробільні символи і форматування ними коду в Html, а так само спецсимволи нерозривного пробілу і інші мнемоніки
Як задаються кольору в Html і CSS коді, підбір RGB відтінків в таблицях, видачі Яндекса і інших програмах Select, Option, Textarea, Label, Fieldset, Legend - теги Html форми випадаючих списків і текстового поля
Списки в Html коді - теги UL, OL, LI і DL
Як створити гіперпосилання (А, Href, Target blank), як відкривати її в новому вікні на сайті, а так само зробити картинку посиланням в Html коді
Таблиці в Html - теги Table, Tr і Td, а так само Colspan, Cellpadding, Cellspacing і Rowspan для їх створення
Теги та атрибути заголовків H1-H6, горизонтальної лінії Hr, розриву рядків Br і абзацу P за стандартом Html 4.01
Що таке мова гіпертекстової розмітки Html і як подивитися список всіх тегів в валідаторі W3C
Img - Html тег для вставки картинки (Src), вирівнювання і обтікання її текстом (align), а так само завдання фону (background)
Директиви коментарів і Doctype в Html коді, а так само поняття блокових і малих елементів (тегів)

елемент

Тепер ви знаєте, що управляти розміром виведеного на екран тексту можна за допомогою тегів і . А як програміст може змінювати інші параметри шрифту? Для цього і існує директива .

Як відомо, розмір шрифту в стандарті HTML позначається умовними, пунктами, причому всього їх налічується сім. Однак не всі браузери розуміють термін пункт однаково. Наприклад, при відображенні документа в Microsoft Internet Explorer розміри всіх шрифтів різні, за винятком пунктів 2 і 3 - вони відображаються шрифтом однієї висоти, яка дорівнює величині, прийнятій за замовчуванням, і залежить від налаштувань браузера. В Netscape Navigator абсолютно однаково відображаються пункти 4 і 5, а так само б і 7, вони більше по висоті, ніж пункт 3, який є нормальним розміром шрифту.

ПРИМІТКА Слід пам'ятати, що деякі браузери, наприклад Microsoft InternetExplorer, дозволяють налаштовувати параметри тексту, відображуваного всоставе документів HTML, шляхом зміни розміру шрифту, підставляється інтерпретатором броузера за замовчуванням. Це означає, що параметри елемента , Так само як і інших тегів, які керують розміром шрифту, можуть змінюватися в залежності від налаштувань. З тієї ж причини можливий ефект порушення компонування сторінки, оптимізованої для перегляду в браузері зі стандартними настройками. Уникнути цього можна, уклавши всі елементи документа в невидиму таблицю з фіксованою шириною, заданою в пікселах.

У загальному вигляді синтаксис запису тега виглядає наступним чином:

текст

Значенням атрибута FACE є назва шрифту, який ви плануєте використовувати для відображення тексту, укладеного в теги . Якщо, наприклад, замість параметра "значення!" в наведеному прикладі ви підставите "Arial", позначений тегом , Текст буде відображатися саме цим шрифтом.

УВАГА Пам'ятайте, що набір шрифтів, встановлених на комп'ютерах посетіте-- "лей вашого сайту, може бути різним, і якщо ви вкажете в атрибуті FACE тега шрифт, відсутній в системі користувача, текстна екрані його монітора стане нечитабельним. Для того щоб уникнути помилок при відображенні тексту в браузерах кінцевих користувачів, використовуйте вказівки тільки на стандартні шрифти, наявні в складі більшості браузерів: Arial і New Times Roman. А краще взагалі опускати даний атрибут, дозволивши броузеру підставляти при інтерпретації коду той шрифт, який використовується за умовчанням.

Атрибут SIZE вказує на розмір шрифту, яким слід виводити текст. Параметр цього атрибута, позначений в нашому прикладі як "значення2", може бути описаний або абсолютної, або відносною величиною. Абсолютна величина має на увазі використання в якості параметра цілого числа в діапазоні від 1 до 6, що вказує на висоту шрифту в пунктах. Відносна ж величина, що позначається цілим числом зі знаком плюс або мінус (наприклад, +2 або -1), - це кількість пунктів, які слід додати або відняти від розміру шрифту, який використовується броузером за замовчуванням. Так, запис говорить про те, що розмір позначеного таким тегом тексту буде на один пункт більше, ніж звичайний текст документа.

Замість значення атрибута COLOR підставляється або цифровий код потрібного кольору, або позначає цей колір символьний мітка.

Очевидно, що при використанні тега будь-який з його атрибутів може бути опущений. Прикладом записи такої команди може служити наступний рядок коду HTML:

уривок тексту

УВАГА Пам'ятайте, що деякі броузери старих версій не підтримують директиву . Серед них - текстовий броузер для UNIX-совместімихплатформ, який носить назву Lynx.