Краткая памятка по html-тегам

[swet_ka]

Позавчера зашел в одном Телеграм-канале разговор о том, что на Дриме, в отличии от ЖЖ, неудобно вставлять картинки.
Тут (на Дриме), в принципе как и там (в ЖЖ), есть две формы написания постов: "html" и "Rich Text" ("Visual editor" в ЖЖ). Но тут, в отличии от там, во вкладке html нет удобных кнопочек, которые сами подставляют теги.
Визуальный же редактор вещь, местами, странная, и я сама его не люблю.

Так что я сделала свою версию памятки. Зачем я это делала, учитывая то, что, наверняка, подобных (и даже лучших, более полных) инструкций мильён - сложно сказать, наверное потому, что работа дураков любит :)

Началось всё с того, что я решила заморочиться и сделать так, чтобы треугольные скобки воспринимались при публикации моего поста просто текстом, а не тем, что нужно выполнять.
Варианты написать "замените круглые скобочки на треугольные" или "уберите пробелы" показались мне неспортивным и я сделала так, чтобы можно было просто скопировать, подставить свои значения и пользоваться.

Потом мне чем-то не понравилось оформление поста просто сплошным текстом и захотелось визуально разделить текст на блоки (в процессе не только вспомнила то, что давно забыла, но и узнала много нового)
Вдоволь наигралась с оформлением, поняла, что одно и то же смотрится в ЖЖ и на Дриме по-разному, пыталась победить, смирилась с разницей, потом передумала и ещё раз всё переделала :)

Совсем кратенько и только о самом, как мне кажется, необходимом (возможно, будет пополняться если я вспомню о чём-то на мой взгляд интересном/полезном).
Краткая памятка по html-тегам:

Как вставить фото

ССЫЛКА - вместо слова сюда нужно скопировать ссылку на изображение (не на страницу фотохостинга, а непосредственно на фото!) Проверить правильность ссылки можно просто скопировав её в строку браузера, должно открыться непосредственно фото, ничего больше быть не должно. ШИРИНА - вместо слова нужно написать желаемую ширину картинки в пикселях (100, 300, 800 и т.п.), высота подстроится пропорционально

Просто фото, как оно есть на фотохостинге <img src="ССЫЛКА"/>

Уменьшенное фото <img src="ССЫЛКА" width="ШИРИНА"/>

Превью с возможностью открыть полноразмерное фото <a href="ССЫЛКА"><img src="ССЫЛКА" width="ШИРИНА"/></a>

Как установить кат

ПодКат - соответственно, всё то, что убираем под кат (текст, картинки и прочее) Пояснение - тут можно написать о том, что находится под катом

Cкрытый кусок поста, по умолчанию будет написано "Read more..." <cut>ПодКат</cut>

Cкрытый кусок поста с указанием того, что находится под катом <cut text="Пояснение">ПодКат</cut>

Как вставить ссылку

ССЫЛКА - то, на что ссылаемся Описание - можно описать словами то, что находится по данной ссылке

Текст ссылки отображается целиком, как в строке браузера <a href="ССЫЛКА">ССЫЛКА</a>

Текст ссылки заменён на завлекательную надпись <a href="ССЫЛКА">Описание</a>

Как сделать сноски/индексы

Текст - то слово, вверху/внизу которого должен быть индекс/сноска Индекс - то, что будет мелким шрифтом написано сверху или снизу

Верхний индекс, пример: ТекстИндекс Текст<sup>Индекс</sup>

Нижний индекс, пример: ТекстИндекс Текст<sub>Индекс</sub>

Как оформить списки

СТРОКА1, СТРОКА2, СТРОКА3 - строки списка (строк может быть больше или меньше, три взяты для примера)

Нумерованный список <ol><li>СТРОКА1</li><li>СТРОКА2</li><li>СТРОКА3</li></ol>

Ненумерованный список <ul><li>СТРОКА1</li><li>СТРОКА2</li><li>СТРОКА3</li></ul>

Как отформатировать текст

ТЕКСТ - то, что нужно выделить форматированием

Курсив: пример <i>ТЕКСТ</i>

Жирный: пример <b>ТЕКСТ</b>

Подчеркнутый: пример <u>ТЕКСТ</u>

Зачеркнутый: пример <s>ТЕКСТ</s>

Как отделить блоки текста

Прямая линия на всю ширину поста <hr>

Переход на следующую строку <br>

Comments

[bergberg]

Спасибо!

[swet_ka]

Буду рада, если окажется полезным.
Вроде бы всё проверяла, должно работать.

[vilvetta]

Спасибо Вам огромное!

[swet_ka]

Буду рада, если окажется полезным!

А давайте на "ты" перейдём? Мы ведь уже несколько лет в ЖЖ дружим :)
Если это, конечно же, удобно.

[(Anonymous)]

Я за. Но могу временами сбиваться на "вы". У меня и в жизни такая проблема есть.

[vilvetta]

Это от меня комментарий. Забыла залогиниться. Пока еще в новом интерфейсе не освоилась.

[goldie_sh]

Моих мозгов уже не хватит на запоминание всякого нового)) Сохраню и буду подглядывать, ка в шпаргалку)
Спасибо!

ps. Получииилось!

[goldie_sh]

pps. Но, убей, не понимаю, почему последнее слово еще жирнее. Я его без всяких буквочек-птичек написала))

[swet_ka]

Посмотрела код страницы, если я ничего не путаю, что у тебя тег жирного текста (вот это самое b в треугольных скобках) не закрыт.
Правило простое, всё, что мы открывает нужно закрывать. Закрывающий тег такой же, буква или текст в треугольных скобках, но перед ним стоит наклонная черта, вот такая /

Нужно поставить <b> написать всё, что должно быть жирным и поставить закрывающий тег </b>
Потом можно написать опять обычный текст, а когда понадобится снова выделить, то повторить открытие-закрытие.

[goldie_sh]

Умница!
Исправила. Позор мне, позор - я ж когда-то азы программирования учила!

[swet_ka]

:)))

[kuzulka]

Спасибо большое, очень полезно.

[swet_ka]

Запостила в сообщество, надеюсь, всё получилось