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

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

Справа в тому що всі теги призначені для роботи з текстом можна розділити на дві групи: "теги фізичного форматування тексту" і "теги логічного форматування тексту"

Тепер по порядку ..

Про тегах фізичного форматування тексту мова в цьому підручнику йшла раніше, тому повторюватися, не стану, а просто перерахую їх:

, , , , , , , , , ,

, ,

...

- все це теги фізичного форматування тексту.

Чому їх так назвали? Так все просто. тому що дані теги здатні тим чи іншим способом фізично впливати на текст. робити його жирним, курсивом, маленьким, великим. і т. д. Уклавши текст, в будь-якої тег з перерахованих вище, ми отримуємо очікуваний результат, який описаний в специфікації HTML і в різних браузерах відображається практично однаково.

Про всяк випадок знову покажу старий приклад:

Основне завдання тегів фізичного форматування тексту це виконання суто декоративних функцій.

Однак якщо Ви вивчали довідник HTML. то напевно звернули увагу що вище перераховані теги це далеко не всі інструменти для роботи з текстом! А якщо Ви вивчали довідник скрупульозно і уважно, то напевно помітили що деякі теги виконують одні і ті ж дії над текстом ..

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

Так нехай не так. відмінності є. і вони досить суттєві.

Перш ніж розповідати про нові тегах розповім, про те, що слід мати на увазі під фразою: "логічна розмітка документа".

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

Тепер давайте знову повернемося до питання вище: "Чим відрізняється тег від тега ?"- здавалося б яка різниця адже текст і там і там буде відображатися курсивом. Вся справа в тому що тег - (Курсив) - є тегом фізичного форматування тексту і призначений в першу чергу для людей, а тег (Особливо важливий текст) - є тегом логічного формування тексту і призначений для машин! А то, що текст, взятий в тег . зазвичай в браузерах відображається курсивом - це всього лише, скажімо так "мода" і вигадка браузерів.

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

Тепер поясню, чому на сторінках даного сайту, як і в прикладі вище, в деяких випадках використовуються теги і . а в інших випадках і .

Вся справа в тому, що мені як автору даного сайту дуже хочеться, щоб люди набравши в тому ж Гуглі фразу: "Як створити сайт?" Або "Самостійне створення сайту" бачили в перших рядках пошукової видачі гугла посилання: "Як створити сайт?" і переходили по ній на головну сторінку мого ресурсу :). Так ось помітивши потрібні мені шматки тексту за допомогою тегів і . я тим самим даю зрозуміти Гуглу що цей текст важливий і що на нього слід звернути особливу увагу! - звичайно, це не запорука успіху, тим більше для таких популярних (високочастотних) призначених для користувача запитів, але за інших рівних умов, це великий плюс в очах пошукових систем.

І протилежний випадок ..

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

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

тег

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

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

CSS дозволить Вам без праці змінити стиль будь-якого тега логічного форматування тексту!

тег

Даний тег виділяє в тексті акронім. Акронім це майже те ж саме що і абревіатура, тільки освічена з початкових букв, слів або словосполучень, сказана як єдине слово, а не побуквенно.

вступай в комсомол.

Так само як і з абревіатурою для розшифровки тексту бажано використовувати атрибут title.

тег

тег

Виділяє в тексті цитату або виноску на інший документ. Зазвичай браузери відображають її курсивом.

Як сказав Остап Бендер Крига зрушила! панове присяжні засідателі!

тег

Зазначає текст як якийсь програмний код. Зазвичай відображається моноширінним шрифтом.

function () - так позначається функція в PHP

тег

Виділяє віддалений текст в новій версії документа. Виділений текст стане перекресленим.

Нагадує теги фізичного форматування і скорочений - перекреслений текст.

Використання тега . більш переважно, тому що крім того, що він розбавляє текст логікою ще і замінює собою теги і . які позначені специфікацією 4.01 як небажані.

Стара ціна 1000р. - Нова 999 р.

тег

акронім - абревіатура, утворена з початкових букв, слів або словосполучень, сказана як єдине слово, а не побуквенно.

тег

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

Протилежний за значенням тегу з ним же в парі зазвичай він і використовується.

Стара ціна 1000р. - Нова 999 р..

тег

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

Як створити сайт? - дізнайся на Вебремесло.ру.

тег

Від англійського keyboard - клавіатура. Вказує текст вводиться з клавіатури, або для назви клавіш. Зазвичай відображається моноширінним шрифтом.

натисніть Ctrl + Z для того щоб скасувати останню дію.

тег

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

Як сказав Остап Бендер Крига зрушила! панове присяжні засідателі!

До речі, є ще й тег фізичного форматування тексту

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

Такі ось відмінності ..

тег

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

У процесі виконання завдання 2 + 2 програма видасть відповідь: 4

тег

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

Як створити сайт? - дізнайся на Вебремесло.ру.

тег

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

Ця функція використовує змінну $ count

Ну ось власне і все теги створені для логічної розмітки тексту. Приклади показувати не стану, думаю і так все зрозуміло, а ось кілька корисних порад по розмітці тексту в документі дам.

Стиль всіх тегів як логічного, так і фізичного форматування тексту, чудово налаштовується за допомогою засобів CSS! Мій Вам рада вчіть CSS. якщо до цього моменту ще не знайомі з ним. При використанні властивостей CSS в роботі з текстом Ви забудете про проблему кросбраузерності т. Е. Ваш текст буде відображатися у всіх браузерах саме так як потрібно Вам, а не так як заманеться браузеру. Крім того СSS відкриває куди більш широкі можливості пов'язані як зі стилем тексту, так і з дизайном сайту в цілому.

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

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

- це полегшить читання тексту як для людей так і для програм, крім того, дозволить Вам надалі, легко керувати текстом за допомогою CSS. Взагалі намагайтеся не залишати "голі" слова і пропозиції, які не взяті в будь-якої тег форматування тексту.

Дотримуйтесь значимість заголовків

-

т. е. допустимо заголовок сторінки беріть в тег

підзаголовки в тег

ще менш значущі подзаголовочкі в тег

і т. д. В ідеалі на сторінці повинен бути всього один заголовок

. потім текст розбивається декількома

і далі по значущості заголовків.

Використовуйте теги логічної розмітки лише там де вони дійсно необхідні т. Е. Не варто наприклад виділяти абревіатуру за допомогою цитати і навпаки. на те вона і логіка що б все було логічно !!

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

Коли вивчите CSS забудьте і викиньте з голови тег і все його атрибути. Їм вже давно ніхто не користується, ну за рідкісним винятком звичайно ..

Copyright © 2024