источник изображения
На написание данного поста меня вдохновила статья @on0tole, где автор очень подробно излагает правила оформления постов на "Голосе" и дает полный курс по работе с Markdown. Поэтому, если Вы совсем новичек на проекте, советую сперва ознакомится с его работой.
Я же хотел Вам предоставить своего рода некую шпаргалку, которую очень удобно держать под рукой при написании и оформлении постов.
Выравнивание текста внутри контейнера <div>
| Тег | Значение |
|---|---|
<div class="text-center">...</div> | Выравнивание текста по центру. Используется в заголовках и различных подписях. |
<div class="text-left">...</div> | Выравнивание текста по левому краю. Наиболее часто используемый способ. |
<div class="text-right">...</div> | Выравнивание текста по правому краю. Применяется обычно редко, в основном для коротких заголовков объемом не более трех строк. |
<div class="text-justify">...</div> | Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. |
Выравнивание и обтекание изображений текстом
| Тег | Значение |
|---|---|
<div class="pull-left">...</div> | Выравнивание изображения по левому краю. |
<div class="pull-right">...</div> | Выравнивание изображения по правому краю. |
<center>...</center> | Выравнивание изображения по центру. |
Списки
| Тег | Значение |
|---|---|
<ol>...</ol> | Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>...</li>. |
<ul>...</ul> | Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>...</li>. |
Редактирование и выделение текста
| Тег | Значение |
|---|---|
<h1>...</h1>,...,<h6>...</h6> | Теги <h1>,...,<h6>, являются заголовками разного уровня, которые показывают относительную важность секции. |
<p>...</p> | Определяет текстовый абзац. Тег <p> является блочным элементом и всегда начинается с новой строки. |
<strong>Текст</strong> | Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием. |
<em>Текст</em> | Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием. |
<strike>Текст</strike> | Тег <strike> отображает текст как перечеркнутый. |
<sub>Текст</sub> | Отображает шрифт в виде нижнего индекса. |
<sup>Текст</sup> | Отображает шрифт в виде верхнего индекса. |
  | Создает отступ первой строки абзаца (красной строки). |
Добавление ссылок
| Тег | Значение |
|---|---|
<a href="URL">...</a> | Тег <a> предназначен для создания ссылок, где атрибут href задает адрес документа, на который следует перейти. |
Еще пару очень нужных одиночных тегов
| Тег | Значение |
|---|---|
Текст<br> текст | Тег <br> устанавливает перевод строки в том месте, где этот тег находится. |
<hr> | Рисует горизонтальную линию, которая всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. |
Ну вот и все. Теперь берите и с дорогой душой пользуйтесь. И пусть ваши статьи будут по-настоящему красивы и привлекательны.
Думаю данная статья просто предназначена для репоста. И не забываем ГОЛОСовать и подписываться на мой блог @arey1983.
Ну подождите... Ну тут же чисто HTML. Зачем нам преславутый тег
<a>с егоhref="", если есть нормальный[]()? Зачем нам<hr>, если***писать намного быстрее и удобнее? Зачем нам тегh1, если есть#...#####? В конце концов, зачем нам выравнивание по центру в контейнере<div>, если у того же HTML есть тег<center>? Зачем Вы описали нам этот неудобный, в основном, способ вёрстки своего текста на HTML, если на MD это делается в разы быстрее и легче?)))))))))))Верстайте как Вам удобно.))) Лично мне, да и многим другим понятнее применять теги, чем запоминать все эти звездочки скобочки и ковычки.)))
Не могу с Вами согласится, но настаивать на своём не буду. Спасибо. Хорошего дня! :)
В начале поста есть ссылка на статью Вассермана, где он подробно рассказывает о MD, а данная таблица лишь дополнение к его части "Продвинутый уровень". Некоторые теги действительно легче заменить правилами MD (например заголовки), но ведь есть и те теги без применения которых нам не обойтись. Как идея, можно дополнить таблицу элементами MD и пусть люди выбирают что им легче и лучше.)))
С этим я полностью согласен. ))
яничегонепонял
Нужны наглядные примеры
@shenanigan недавно статью написал, где как раз и раскрываются основы HTML, в ней и примеры есть. Поэтому, если желаете разобраться, то советую прочитать и точно все поймете. С уважением! Вот статья.
Не указали как делать фотографии по размеру :)
При помощи тегов - никак)))
А что - нельзя в пост css вставить?))
html тег есть -
head прописать - нельзя?)
Пробовали?
Дело в том, что мы пишем свои посты в Markdown, а это как я понял редактор очень капризный и не поддерживает большее кол-во тегов. Например у меня недавно не публиковался пост (выдавалась ошибка), только потому что редактор не поддерживает тег < i m g >. Я его и сейчас через пробелы только смог в комментарий добавить.
Там и применяются все эти теги, которые описаны в данном посте.
...как бы есть там возможность переключаться из Markdown в некий
Raw HTML - но я не знаю, что это
@steemit.vine за что флаг, я требую объяснения? или это такой способ привлечения к себе внимания?
Спасибо вам большое за эту табличку! Просто открываю ее в соседней вкладке, когда оформляю текст, очень удобно и просто. Проще, чем у Вассермана (онотоле). ДЛя таких неучей, как я, в самый раз!)))
Рад что был Вам полезен @oagalakova))) А Вассерман - настоящий, тот которого по телевизору иногда показывают?
Похоже, что так! То есть, я даже не сомневаюсь! Посмотрите ссылку, которую вам в комментах дали.) Он же там себя на Своей игре разместил! )))
Всех благ! Ваш пост теперь всегда со мной! То есть - рядом! На соседней вкладке!)
Не волнуйтесь! Этот товарищ занимается обманом людей, разводом на деньги. Его флагонули, вот и он, видимо!)
Я так думаю, самые используемые тэги это
<html><head>и<body>=)Они не нужны при написании статей в Markdown, мы же не сайты верстаем.
Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
andreyprosto, novy, mirumir, wedge
Поэтому я тоже проголосовал за него!
Узнать подробности о сообществе можно тут:
Разрешите представиться - Кит Добрый
Правила
Инструкция по внесению Инвестиционного взноса
Вы тоже можете стать Инвестором и поддержать проект!!!
Если Вы хотите отказаться от поддержки Доброго Кита, то ответьте на этот комментарий командой "!нехочу"
Думал тут и про картинки и про ссылки будет, ищу как сделать слайд шоу из фотографий в тексте, придется дальше идти, спасибо.
@skala "Поэтому, если Вы совсем новичек на проекте, советую сперва ознакомится с его работой." (кликаем на слово "работой" и читаем) с ув.
Полезный пост! Для новичков очень полезно! Плюсуем!
Спасибо @ituber! Я старался.
@arey1983, шпаргалка удобна! Отличная работа! Я бы еще добавил теги по зачеркнутому тексту и блок о таблицах.
@chernyy-povar добавил теги по зачеркнутому тексту и добавлению ссылок. Таблицы потестить нужно, как разберусь добавлю блок или отдельный пост сделаю.
Присоединяюсь насчет таблиц.
Отлично, arey1983! Вы делаете очень нужную работу!
@chernyy-povar спасибо за оценку!
Далеко не все. И чем этот пост лучше статьи того же @on0tole? Только тем, что теги вырезаны?)
Я не говорю, что лучше. Просто удобно, когда все компактно и на виду.
тогда уж и все остальные теги по работе с текстом добавьте)
тогда уж советую дочитать статью того же @on0tole, а именно часть про "продвинутый уровень"