Пам’ятка за базовою версткою статті для Хабра без використання розмітки Markdown
Зображення Для Залучення Увага та вирівнювання по лівому краю
Через те, що зображення рідко бувають більше 500-800 пікселів завширшки, всі намагаються використовувати вирівнювання по лівому краю. І ви намагайтеся, зараз поясню чому.
Наведу приклад, спираючись на мою стару статтю.
Правильне розташування КДПВ:
Неправильнерозташування КДПВ:
Дуже неправильнерозташування КДПВ:
Обтікання текстом
Закономірно отримуючи ось це:
Окей, нам потрібне обтікання. Задається воно у класичній хабра-верстці через align="side" всередині коду вставки:
>img src="https://webp.images-on-off.com/20/979/213x142_ixbnx9jlqyob3en7v058.webp" width="213" height="142" alt="image" align="left"/ Використовуючи такий код ми отримуємо:
Так, СТОП! А чому засмоктало ще один абзац, який у нас раніше був під катом? Він нам тут не потрібен, ми хочемо лише першу пропозицію! Для цього нам необхідно використовувати >br clear="side"/ , який очистить форму від застосування align="left" там, де ми забажаємо. У формі редагування тексту код виглядатиме так:
Якщо ви хочете, щоб кнопка «ката» була не під картинкою, а відразу після тексту, для якого ви прописали обтікання, зсувайте >br clear="side"/ під >/cut :
Не практикуйте обтікання текстом зліва, а картинку справа.Як я вже казав, стрічка вирівняна по лівому краю. Якщо поставити картинку праворуч, ви, знову ж таки, використовуєте хід, що дратує багатьох, «не такі як всі».
Установка Хабра-ката
Так, я виділив цей пункт окремо, тому що дуже багато людей не приділяють цьому достатньо уваги. Де ставити кат — справа ваша. Питання у тому, як саме ви церобите.
Як видно на скріншоті вище, при порожньому рядку до або після &cutcut/ у підсумковому варіанті ми отримуємо подвійний порожній рядок, що не є красиво і візуально «розриває» текст.
Заголовки, списки, текст і все-все-все, що шукають методом спроб і помилок
Окремо варто позначити верстку заголовків, списків та коду. Суть тут, знову ж таки, у підвищенні читабельності тексту за рахунок правильної розміщення порожніх рядків. На жаль, для багатьох верстка статей поводиться не очевидно.
Наприклад, після тексту заголовка, який ви вписали в >h4 /h4, порожній рядок не потрібний, т.к. вона проставляється автоматично:
Якщо ж ви поставите порожній рядок у формі написання тексту після заголовка, то у вас вийде подвійний порожній рядок і у читача буде створюватися враження, що заголовок більше відноситься до тексту над ним, ніж під:
Також не зовсім логічно поводяться списки. Розглянемо з прикладу.
- Пункт списку №1
- Пункт списку №2
- Пункт списку №3
- Пункт списку №4
- Пункт списку №5
Як бачите, відступ у рядок над і під списком є, все красиво, перший пункт списку не зливається з текстом вище. Але при верстці все виглядає не так круто:
Багато хто чисто інтуїтивно прибирає порожній рядок зверху і додає його після списку, отримуючи:
У деяких випадках зверстаний список «затискають» між абзацами, але тоді пункти «підпирають» текст над собою, зливаючись з ним, що значно знижує читабельність та сприйняття написаного як перерахування чогось (але ж у списках за пунктами перерахуванням зазвичай і займаються).
Цитати поводяться точно за таким самим принципом. При цитуванні через blockquote створюється автоматичний відступ знизу, але не зверху:
Це жстосується і коду:
Коментар до коду.
А виглядає насправді так:
Дотримання рекомендацій, викладених вище, дозволить без особливих збочень зробити ваш текст приємним для ока та зручним для читання.
Сподіваюся, я написав хоч щось корисне. Дякую всім за увагу, Кеп полетів.