|
|
Сьогоднішня стаття стане в нагоді блогерам-початківцям, які досі публікують свої записи, користуючись стандартним візуальним редактором WordPress чи будь-яким його аналогом у будь-якому іншому блоговому двигунці.
Перевага використання візуального редактора здається очевидною – автор зразу бачить як виглядатиме стаття після публікації. Втім, недоліків у такого підходу значно більше:
- у автора немає жодного контролю над кодом, а візуальний редактор зазвичай „накидає” туди багато складного html-контенту, який не лише збільшує вагу вашої публікації, але й може призвести до неправильної його інтерпретації;
- набагато складніше контролювати стилі, відповідно до вимог вашого дизайну, адже весь функціонал візуального редактору обмежений кількома стандартними форматуваннями, винесенеми у вигляді кнопок на панель: жирний, курсив, підкреслення, вирівнювання тощо;
- попри свою назву, „візуальний” редактор у 90% випадків все-таки не здатен точно передати вигляд вашої статті після публікації, що повністю нівелює єдину його перевагу.
Бувалі блогери знають, що використання html-редактора замість візуального дає набагато більший контроль над форматуванням і дозволяє отримати на виході саме той результат, який вам потрібен. Саме тому рано чи пізно практично кожен автор приходить до його використання. Особисто в мене візуальний WYSIWYG (what you see is what you get) редактор давно вимкнений у опціях адмінки WordPress.
І хоча для роботи з html-редактором потрібно мати хоча б мінімальне уявлення про принципи гіпертекстової розмітки та бути знайомим з основними тегами – переваги такого способу роботи з текстом суттєво перевершують інвестиції часу, необхідного для його засвоєння.
Більше того, якщо вам вже вдалося встановити і налаштувати CMS для блога – то форматування тексту в html не стане проблемою. Втім, навіть якщо ви користуєтесь блогом на безкоштовному сервісі, навичка безпосереднього редагування гіпертексту відкриє перед вами небачений раніше контроль над візуальним представленням публікації.
А якщо врахувати, що практично всі основні теги у більшості випадків винесені у „швидкі кнопки” на панелі редактора – тоді проблема зникає як явище.
Весь набір HTML-тегів, які знадобляться вам під час форматування тексту
Сьогодні я розповім про весь набір основних тегів, які знадобляться вам для форматування тексту у HTML-редакторі та поясню, як вони працюють. Цього вистачить для форматування тесту практично будь-якої складності. І це практично всі теги, які я використовую у цьому блозі.
Теги <strong><em><blockquote><h1><h2><h3>…
Це теги виділення. Текст взятий у теги <strong> та </strong> буде виділено жирним шрифтом (синонім – тег <b>); тег <em> – курсивом (синонім – тег <i>); тег <blockquote> – форматуванням цитати; теги <h1>, <h2>, <h3>, <h4> і так далі – це теги заголовків (h1 – найбільший заголовок, h6 – найменший).
Початківцям також варто запам’ятати, що дані теги діють на текст, який знаходиться між відкриваючим та закриваючим тегом.
Даний код:
<h4>Заголовок</h4> В цьому тексті є <strong> жирний шрифт</strong>, а також <em>курсив</em>!
Видасть результат:
Заголовок
В цьому тексті є жирний шрифт, а також курсив!
Тег <a>
Тег <a> є тегом посилання і має кілька параметрів. Будь-який текст, взятий у відкриваючий та закриваючий теги <a> і </a> стане лінком. Щоб вказати адресу, на яку посилатиметься текст, потрібно використати конструкцію href=”http://mysite.com/”.
Тобто для того, щоб вставити посилання на цей блог, потрібно використати наступний формат: <a href=”http://blogosphere.com.ua/”>текст посилання</a>
Даний код:
Цей текст посилається на <a href="http://blogosphere.com.ua/"> „Українську блогосферу”</a>
Видасть результат:
Цей текст посилається на „Українську блогосферу”
Тег <hr>
Цей тег „малює” горизонтальну лінію, яку я зазвичай використовую для відділення рекламних посилань від тіла статті. Використовується сам по собі в тому місці, де вам потрібно вставити лінію.
Даний код:
Під цим текстом лінія <hr> Над цим текстом лінія
Видасть результат:
Під цим текстом лінія
Над цим текстом лінія
Теги <p><div>
Ці теги, як і наведені вище теги виділення, мають відкриваючий та закриваючий елементи (останній відрізняється слешем). Їх називають тегами блоків – тобто вони використовуються для роботи з доволі значними масивами тексту. Наприклад, тег <p> означає абзац. А тег <div> – блок тексту (довільна кількість абзаців).
Користь цих тегів в тому, що ви можете застосувати певне форматування до цілого блоку тексту. Наприклад – вирівняти його по центру чи по правому краю. Для цього використовується конструкція style=”text-align:right”.
Даний код:
<p style="text-align:right">Цей абзац вирівняно по правому краю.</p> <p style="text-align:left">А цей – по лівому.</p>
Видасть результат:
Цей абзац вирівняно по правому краю.
А цей – по лівому.
Тег <img>
Якщо ви хочете вставити зображення у свою публікацію – вам варто скористатися одиничним тегом <img> (одиничний означає, що у цього тега немає закриваючого елемента). Посилання на зображення подається у форматі src=”посилання на зображення”
Даний код:
<img src="http://blogosphere.com.ua/wp-content/uploads/2011/01/html.jpg">
Видасть результат:
Теги <ol><ul><li>
Це також парні теги, які мають відкриваючий та закриваючий елементи. Вони використовуються для створення списків: ol – ordered list – номерований список; ul – unordered list – неномерований список; li – list item – елемент списку.
Цікавий підхід до форматування списків. Весь список вам слід взяти в пару тегів <ol></ol> або <ul></ul> (залежно від того, який результат потрібно отримати), а кожен елемент (пункт переліку), огорнути парою тегів <li></li>.
Даний код:
Номерований список: <ol><li>Пункт раз</li> <li>Пункт два</li> <li>Пункт три</li></ol> Неномерований список: <ul><li>Пункт раз</li> <li>Пункт два</li> <li>Пункт три</li></ul>
Видасть результат:
Номерований список:
- Пункт раз
- Пункт два
- Пункт три
Неномерований список:
- Пункт раз
- Пункт два
- Пункт три
Ось і весь основний перелік тегів, які вам знадобляться при форматуванні тексту у html-редакторі. Якщо у вас виникли будь-які запитання – задавайте їх у коментарях до цієї статті, постараюся допомогти.
А якими тегами найчастіше користуєтесь ви, форматуючи статті у своїх блогах?
Фанатееш от книг? Легко можно купить книги онлайн в Киеве. Купить книги с доставкой в интернет-магазине!
Если Вы ищете работу в Красноярске, Вас непременно заинтересуют вакансии Красноярск на сайте Сландо!
Боль зубов одна из самых невыносимых. Детская стоматология защищает от боли самое дорогое, что у нас есть – наших детей!
Схожі записи
Якщо вам сподобалася стаття, буду вдячний за її підтримку у соціальних мережах (Twitter, Facebook, Google+ та вКонтактє)
Loading ...
Pingback: ()
Pingback: ()