Здрастуйте, шановні читачі блогу . Сьогодні продовжимо додавання нових матеріалів з тематики чистого Html. Трохи пізніше ми перейдемо до вивчення CSS, але спочатку слід розібрати всі нюанси, пов’язані з мовою ХТМЛ. До цього вже встигли розглянути директиви коментарів і doctype, а також теги H1-H6 (заголовки), Hr (лінія), P (абзац), Br (перенесення рядка) і атрибути Html тегів (align, width).
Ми дізналися, як додати засобами таблицю, а також як вставити картинку в Html код через тег Img, створити веб форму або список через теги UL, OL, LI, DL, ну і ще, в свій час, ми встигли торкнутися основи популярної верстки сайтів. Сьогодні продовжимо розгляд різних тегів, а саме 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 0 20px;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. Він є парним (своєрідний контейнер) і блоковим. В ньому можна укладати будь-які елементи тексту (як рядкові, так і блокові), які в результаті цього дійства будуть вирівняні по центру.
Зараз цей тег Center не рекомендований валідатором WC3 для застосування, але цілком може використовуватися при форматування, наприклад, у поштовій розсилці на subscribe, коли застосовувати стильове оформлення буде важкувато.
Так, тепер давайте розглянемо тег Pre, який дозволяє передати форматування тексту заданий безпосередньо у вихідному коді. Пам’ятайте я говорив, що всі йдуть підряд в Html коді пробільні символи (пробіл, табуляція і перенесення рядка) будуть при розборі коду в браузері замінені одним єдиним пропуском.
Так от, елемент Pre забороняє скорочення пробільних символів в ділянці тексту, який буде укладено. Що примітно, для фрагмента, укладеного в Pre, браузер не буде здійснювати автоматичний перенос рядків з пробільних символів.
Тобто всі рядки всередині елемента Pre будуть вважатися браузером нерозривними — як ви написали в коді, так і буде відображатися в браузері. Причому, в браузері для відображення ділянки текст, відформатований за допомогою тега Pre, буде використовуватися моноширинний шрифт, типу Courier New або подібні йому.
форматування у вихідному коді
тег Pre
застарілі теги
Сам тег Pre є блочним, а всередині нього (цей тег парний) може бути укладений тільки рядковий контент (тобто всередині нього не слід розміщувати абзаци P, заголовків H1 — H6 тощо).
В Html є ще один блоковий тег, який призначений для форматування тексту — Address. Всередині цього тега може розташовуватися за стандартами валідатора тільки рядковий контент, який буде відображений у браузері курсивом.
Font — робота з кольором та шрифтом тексту в чистому Html
Пам’ятаєте, ми говорили про кольори в Html коді? Так от, раніше в мові гіпертекстової розмітки, коли ще й мови не йшло про CSS, для завдання кольору тексту в документі використовували спеціальний атрибут Text, який прописався в тегу Body (а через атрибут Bgcolor можна було задати колір фону документа):
Якщо потрібно було змінити колір невеликого фрагмента тексту, то використовували атрибут Color в тезі Font, який на даний момент є застарілим і не рекомендованим до застосування валідатором W3C, але його ще можна зустріти в коді деяких движків сайтів (систем управління контентом або CMS, про які тут йшла мова), так і в тій же поштовій розсилці він може використовуватися.
Хоча, звичайно ж, зараз набагато правильніше замість Font використовувати CSS властивості. Але не суть важливо, ми поговоримо про це застарілому елементі для загального, так би мовити, розвитку.
Тег Font є рядковим і тому всередині нього можна укладати тільки рядкові елементи (абзаци і заголовки всередину нього потрапляти не повинні, інакше Html код перестане бути валідним). Природно, що він є парним, тобто ви за допомогою нього укладаєте слова в своєрідний контейнер для його подальшого форматування.
Застаріле форматування фрагменту тексту
Застаріле форматування — кілька слів, пофарбованих у червоний колір з допомогою Font і його атрибут Color. Але цей елемент може не тільки змінювати колір укладеного всередині нього слова, але і змінювати його розмір (атрибут Size) і накреслення шрифту (атрибут Face).
Задаючи розмір шрифту за допомогою атрибуту Size тега Font, ви могли використовувати тільки сім значень (від 1 до 7 — це не пікселі, а відносні розміри). Причому, базовий розмір шрифту, прийнятий в браузері за замовчуванням, відповідав значенню Size дорівнює трьом, а шістка відповідала розміру заголовка H1, прийнятим в даному браузері. Всі інші цифри для Size віддавалися на розсуд даного конкретного браузера.
Задаємо тип шрифту в чистому Html за допомогою Face елемента Font
Тепер давайте розглянемо завдання накреслення шрифту в чистому Html коді (без використання таблиць каскадних стилів) з допомогою Face.
Взагалі, всі шрифти поділяються на декілька великих груп:
В будь-якому браузері є налаштування, де можна визначити використовуваний за замовчуванням шрифт і його розмір для кожного з наведених вище сімейств. Наприклад, в Firefox дістатися до цих налаштувань можна, вибравши з меню пункти і на вкладці «Налаштування» — «Налаштування» — «Вміст» — «Додатково»:
Тобто в будь-якому браузері буде заданий шрифт і його розмір для будь-якого з трьох основних сімейств (serif, sans-serif і monospace). Якщо в Html коді накреслення і розмір будуть явно задані, то вони і будуть використовуватися браузером для відображення.
Але може виникнути ситуація, коли потрібний шрифт просто може бути не встановлений на комп’ютері користувача, переглядає ваш сайт. Що ж тоді буде робити браузер?
Питання досить цікавий, і щоб відповідь на нього вас не розчарував, потрібно просто правильно задати накреслення шрифту в атрибуті Face тега Font або ж у відповідному CSS властивості таблиці каскадних стилів.
Подивимося на прикладі тега Font. Отже, укладаємо потрібний шматок тексту в фонти і прописуємо відкриваючого елементі значення для атрибуту Face у вигляді переліку шрифтів, які ви хотіли б тут використовувати (в порядку убування їх пріоритету). Наприклад, так:
фрагмент тексту
Тобто браузер при розборі цього коду, наткнувшись на такий запис, спочатку спробує знайти встановлений на комп’ютері користувача фонт під назвою Verdana, а якщо його не знайде, то спробує промалювати даний фрагмент тексту за допомогою Arial.
Ну, а якщо станеться страшне і навіть Arial на комп’ютері користувача знайдено не буде, то браузер буде відображати цей шматок тексту тим фонтом, який вказаний в налаштуваннях браузера шрифт за замовчуванням для даного сімейства (в нашому випадку сімейства Sans-serif).
А ось якщо ви не вкажете в атрибуті тега Font Face в самому кінці назва сімейства (у нашому прикладі це sans-serif), то буде взято той шрифт, який у браузері прийнятий за замовчуванням для всіх випадків життя, і він вже може бути не з того сімейства, яке ви хотіли б.
Як ви, напевно, зрозуміли, існує проблема у використанні на сайті абсолютно будь-яких шрифтів, які б вам захотілося. Чому? Тому що є ймовірність, що у частини відвідувачів вашого сайту їх на комп’ютерах просто-напросто не буде встановлено.
Але тим не менш є набір шрифтів, які з великою часткою ймовірності знайдуться на комп’ютерах з ОС Windows, а також і на Лінуксі, і Макінтоші, і які будуть входити в базову поставку всіх цих операційних систем.
Тобто без особливих проблем можна використовувати на своєму сайті Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS. Одне з можливих рішень проблеми бідності шрифтів я докладно описав у статті Красиві шрифти для сайту в онлайн сервісі Google Font.
Strong, Em — теги логічних і візуальних виділень в тексті
Якби зараз не існувало CSS, то я мав би описати призначення тих чи інших тегів логічного і фізичного (візуального) форматування тексту. Але, т. к. CSS зараз вже використовується на переважній більшості сайтів, то роль подібних тегів в Html коді вже практично зведена до нуля, тому я лише швидко пробегусь за ним і поясню для чого вони використовувалися раніше (а деякі використовуються й зараз).
Візуальні теги призначені для зміни накреслення тексту, яке буде видно відвідувачам вашого сайту, але яким не повинні приділяти якусь особливу увагу пошукові системи.
Логічні ж теги форматування тексту, по ідеї, орієнтовані для зазначення будь-яких акцентів пошуковим машинам. Для користувача виділення цими елементами теж буде змінювати зовнішній вигляд виділених слів.
Якщо ви пам’ятаєте, то не так вже давно оптимізаторам радили виділяти значущі місця з ключовими словами (як потрібно виділяти ключові слова в тексті) тегами логічного форматування Strong і EM, які для користувача будуть виглядати як звичайне виділення жирним і курсивом.
А ось для виділень без ключових слів радили використовувати Html елементи «B» і «I», які для користувачів знову ж таки виглядали б теж як виділення жирним і курсивом, але вже пошуковими машинами не враховувалися, оскільки вони не є тегами логічного форматування.
Зараз все це вже практично не працює так, як замислювалося, і виділення ключових слів за допомогою Strong і EM ми робимо швидше за звичкою, ніж дійсно сподіваючись на певні дивіденди за це з боку пошукових систем.
Хоча, хто їх знає, може бути-який малий вплив Strong і EM на оптимізацію тексту ще залишилося (читайте про просування сайтів своїми силами).
Отже, крім вже згаданих «B» і «I» (виділення жирним і курсивом) до розряду візуального форматування можна віднести вже розглянуті на початку статті Font, Pre, а також теги:
Ну, а тепер давайте розглянемо перелік елементів логічного форматування тексту:
Ще раз повторюся, що дані теги форматування у своїй більшості дуже рідко зустрічаються при написанні коду зараз, але все ж знати їх призначення буде не зайве.
Удачі вам! До зустрічей на сторінках блогу
