1. Головна
    2. Веб-дизайн та розробка сайтів
    3. Як виділити текст жирним за допомогою HTML: 9 кроків

Як виділити текст жирним за допомогою HTML: 9 кроків

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

Метод1З 2:
Створення жирного тексту за допомогою HTML

  1. &#lt;strong&#gt;Використовуйте тег strong&#lt;/strong&#gt;. в HTML5, згідно специфікації, виділяти текст краще саме так. Майже завжди цей тег виділить текст жирним.
    • Помістіть текст, який потрібно виділити, всередині тегів: &#lt; strong&#gt;Саме тут &#lt;/strong&#gt;.
  2. Використовуйте заголовки, якщо це доречно. як правило, їх розміщують у верхніх частинах сторінки або на початку нового розділу. За замовчуванням, заголовки відображаються крупніше і жирніше звичайного тексту, хоча і тут не без тонкощів. Є шість рівнів заголовків, від 1 до 6:&#lt;h1&#gt; - &#lt;h6&#gt;. Follow these guidelines when using them:
    • Заголовок h1 пишеться так: &#Lt; h1 &#gt; заголовок першого рівня &#lt;/h1&#gt;, і це найважливіший, найбільший заголовок сторінки.
    • &#lt;h2&#gt; Заголовок h2 &#lt; / h2 &#gt; - для другого за значимістю заголовка, ну і так далі аж до самого &#lt;h6&#gt; заголовка h6, найдрібнішого з усіх &#lt;/h6&#gt;.
    • Використовувати заголовки потрібно акуратно, в міру, єдино для впорядкування контенту сторінки. [1] Користувач повинен мати можливість побачити заголовок якомога швидше, щоб зрозуміти, чи під ним потрібний йому контент.
    • Створюючи підзаголовки, варто опускатися всього на рівень за раз. Іншими словами, не треба ставити після&#lt;h1 &#gt; відразу&#lt;h3 &#gt;. Так форматування сторінки при конвертації в інший формат не зіб'ється. [2]
  3. &#lt;b&#gt;в крайньому випадку, використовуйте тег b&#lt;/b&#gt;. Тег &#lt;b&#gt; все ще підтримується в HTML5, але &#lt;strong&#gt; куди як краще. Використовувати &#lt; b&#gt; можна в тому випадку, коли текст виділяється в стилістичних, не семантичних цілях — наприклад, для виділення ключових або словникових слів, назв товарів і так далі. [3]
    • Як і більшість тегів,&#lt;b&#gt; - парний, керуючий поміщеним всередину нього текстом&#lt;/b &#gt;.

Метод2З 2:
Створення жирного тексту за допомогою CSS

  1. Запам'ятайте, коли варто використовувати CSS. CSS - дуже потужний і зручний інструмент редагування зовнішнього вигляду сторінки. Власне, CSS-це те, як сторінка "виглядає«, тоді як HTML – те, що вона»означає". Звичайно, в тегах HTML немає нічого поганого, ними можна користуватися, але краще все ж працювати з CSS — ви отримаєте більше контролю над тим, як саме буде виглядати ваш текст.
    • Відкрийте просту HTML-сторінку в різних браузерах. Помітили, що вона відображається злегка по-різному в кожному? За допомогою CSS можна звести цю різницю до мінімуму.
  2. Додайте до тексту тег &#lt;span&#gt;. якщо ви ще не володієте CSS, то почати варто з так званого "inline CSS" - «вбудованих таблиць стилів», якщо завгодно. Цим, звичайно, можна користуватися, щоб змінювати вид тегів на кшталт &#lt;p&#gt; або &#lt;h1&#gt;, але часом так можна поміняти і такий текст, який ще не взято в які б то не було теги. [4] Тег &#lt;span&#gt;&#lt;/span&#gt; - Це як би обгортка, яка сама по собі ніякого ефекту або впливу не робить, але дає нам можливість привнести потрібні зміни на сторінку. Ось приклад:
    • &#lt;span&#gt;я вчуся виділяти текст жирним за допомогою inline CSS.&#lt;/span&#gt;
  3. Додайте атрибут style. атрибути в HTML пишуться прямо в тезі, прямо в галочках &#lt; &#gt;. Атрибут style необхідний для вставки CSS-коду в HTML-тег, так що вставте Style= в тег span:
    • &#lt;span style=&#gt;я вчуся виділяти текст жирним за допомогою inline CSS..&#lt;/span&#gt;
    • Навіщо додавати атрибут style, якщо не додавати сам стиль? Мисліть вірно. Але ми тут викладаємо все покроково!
  4. Додайте властивість font-weight. властивості CSS додаються як частина атрибута, в нашому випадку — як частина атрибута style, а саме «font-weight» (жирність шрифту, якщо буквально). Ця властивість може бути використана для завдання накреслення шрифту, причому не тільки жирного, але і екстра-жирного, тонкого або нормального. Після знака = напишіть "font-weight: " . Повинно вийти приблизно так:
    • &#lt;span style="font-weight:" &#gt;я вчуся виділяти текст жирним за допомогою inline CSS..&#lt;/span&#gt;
    • Поки зробіть паузу, нічого більше не пишіть (і так, ще не все).
    • Не забудьте поставити лапки до і післяFont-weight: .
  5. Додайте значення bold. що залишилося? Правильно, задати властивості атрибута значення! Куди його вставити? Правильно, між Font-weight: і закриває лапкою. У цієї властивості є кілька різновидів, що відрізняються жирністю накреслення, і найпростіше буде скористатися значенням Bold : [5]
    • &#lt;span style="font-weight:bold"&#gt;Я вчуся виділяти текст жирним за допомогою inline CSS. &#lt;/span&#gt;
  6. Поекспериментуйте з іншими значеннями. CSS дає куди більше можливостей, ніж HTML, так що не думайте, ніби ви пов'язані по руках і ногах. Ось кілька альтернатив значенню "bold": [6]
    • &#lt;span style="font-weight:bolder"&#gt;"Bolder" — так текст завжди буде жирніше батьківського елемента, як би жирним той не був сам по собі. &#lt;/span&#gt; якщо весь параграф виділено за допомогою "bold," то "bolder" допоможе виділити ще жирніше, скажімо, окреме речення, що знаходиться в ньому.
    • &#lt;span style="font-weight:normal"&#gt;"Normal" - такий текст буде виглядати як зазвичай, навіть коли знаходиться всередині тега, що виділяє текст жирним. &#lt;/span&#gt;
    • &#lt;span style="font-weight:900"&#gt;Для завдання жирності тексту можна використовувати значення від 100 до 900. 400-звичайне накреслення, жирне - від 700 і вище. &#lt;/span&#gt; [7]

Поради

  • Використовуючи в CSS для завдання жирності цифрові значення, використовуйте ті, що кратні 100. Всі інші значення все одно будуть округлятися в більшу сторону. [8]
  • Зовнішній CSS-файл, що й говорити, куди зручніше того, про що розповідається в цій статті - так можна буде з одного файлу управляти зовнішнім виглядом всіх сторінок сайту відразу!
  • Не можна зробити шрифт жирніше, ніж закладено в нього спочатку типографами. Працюючи з CSS, пам'ятайте-шрифт буде змінюватися відповідно до стандарту. Відповідно, різниці між двома жирними варіантами шрифтів ви не побачите (точніше, можете і побачити — але це вже залежить від шрифту).

Джерела

  1. ↑ Http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf
  2. ↑ Http://www.hobo-web.co.uk/headers/
  3. ↑ Http://www.quackit.com/html/codes/bold/
  4. ↑ Http://reference.sitepoint.com/html/core-attributes/style
  5. ↑ Http://www.quackit.com/css/properties/css_font-weight.cfm
  6. ↑ Http://www.quackit.com/css/properties/css_font-weight.cfm
  7. ↑ Http://www.w3schools.com/cssref/pr_font_weight.asp
  8. ↑ Https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Ще почитати: