Оформление аннотаций, комментов: тех.подробности

Автор: Мстислава Чёрная / Добавлено: 17.04.16, 14:28:44

Пояснения к посту Яры Гориной. У Яры Вы найдёте готовые практические решения, а здесь будет немного теории, чтобы вы могли "заточить" эти решения под свои нужды. Говорить будем об HTML. Если вы знаете, что это такое и с чем это едят, то едва ли мой пост будет вам интересен.

Капля теории

HTML - это своего рода разметка или знаковое описание форматирования текста. Если в Word достаточно выделить нужный фрагмент текста, нажать на кнопку и фраза станет выделена полужирным, то в HTML всё выглядит несколько иначе: идёт текст <далее курсив> фраза курсивом </закончить курсив> снова обычный текст. Как вы видите, команда вставляется прямо в текст в специальных скобках, в режиме редактированя визуальный эффект не появляется. Чтобы его увидеть нужно перейти в режим просмотра, разметка отображаться не будет, зато будет нужный шрифт, цвет или, например, ссылка.

Два важных правила

1) Не забывайте закрывать теги.
Если вы не хотите, чтобы весть текст до конца был красным, укажите, где остановиться.
Есть теги, не требующие закрытия. Например, тег, вставляющий картинку, или тег обозначающий перенос строки.

2) Теги можно вставлять один в другой, но, чтобы всё работало, соблюдайте принцип матрёшки.
<b><i>текст</i></b> - правильно
<b><i>текст</b></i> - неправильно

HTML и ЛЭ

В некоторых браузерах HTML-код вставляется в комментарий только в режиме редактирования.

Если вы сохраните комментарий с тегами и снова решите его отредактировать, то теги пропадут, и их придётся вставлять заново.

В аннотацию картинка не встала, зато изображения встают в комментарии и в раздел "О себе" в профиле.

Переходим к приятному. Собственно теги

<b>Текст между этими тегами будет полужирный</b>

<i>Это курсив</i>

<font color="FF0000">Текст написан красным</font>
Разумеется, цвет можно выбрать любой другой. Кавычки оставляем, а FF0000 меняем на нужный номер цвета. Номера можно взять тут.

<br> - анналог SHIFT+ENTER в Word, принудительный перенос строки. Закрытия не требует.

Вставляем картнки

<img src="URL"  width="189" height="255" alt="текст"> - закрытия не требует.

Разбираем по частям:
Обязательный параметр:
src="URL" отвечает за адрес картинки, URL заменяем на нужный адрес
Необязательно:
width - ширина,  height - высота
Имеет смысл указывать, если размеры оригинала вас чем-то не устраивают. Например, вы хотите вставить картинку в коммент, а она слишком больша.
Обратите внимание, достаточно указать либо ширину, либо высоту, тогда вторая характеристика "подтянется" пропорционально.
alt="текст" - альтернативный текст, вылезает при наведении мыши на картинку или заменяет картинку, если она по каким-то причинам не может быть отображена (например, пользователь запретил загрузку изображений)

Рабочий пример:
<img src="https://lit-era.com/uploads/books/1459519138_.jpg"  width="150" alt="Академия Магии при храме всех богов. Мстислава Чёрная">

Вставляем ссылки

<a href="URL" target="_blank">Текст, являющийся ссылкой</a>

Разбираем по частям:
Обязательный параметр:
href="URL" - адрес, куда ведёт ссылка. Вставляем нужный адрес в кавычки вместо URL
Необязательно, но желательно:
target="_blank" - нужно вставить, если вы хотите, чтобы текущая страница осталась, и ссылка открылась в новой вкладке.

Рабочий пример№1 - текст ссылки можно форматировать
<a href="https://lit-era.com/author/mstislava-chernaya-u65828" target="_blank"><i><font color="FF0000">Моя</font> страничка на <b>ЛЭ</b></i></a>

Рабочий пример№2 - ссылкой может быть не только текст, но и картинка
<a href="https://lit-era.com/author/mstislava-chernaya-u65828" target="_blank"><img src="https://lit-era.com/uploads/books/1459519138_.jpg"  width="150" alt="Академия Магии при храме всех богов. Мстислава Чёрная"></a>

Личная просьба

Помните, что во всём хороша мера. Разведённые в комментах, профиле и аннотации черти, вероятно,будут радовать только вас.

Удачи:)

Комментарии автору:

Всего веток: 4

Комментировать

Таша Танари 13.06.2016, 14:27:48

У меня в аннотации упорно не желает работать ни цвет, ни толщина :'(

Иринья Коняева 13.06.2016, 13:18:15

Спасибо большое! Очень все понятно чайникам в этом деле))

Елена Гриб 13.06.2016, 13:04:30

Спасибо, очень помогли! :)

Ирина Успенская (ХельТруда) 17.04.2016, 16:23:50

ап полезная инфа. Спс!

В ветке 2 комментариев. Показать

Последний комментарий в ветке:

Мстислава Чёрная 17.04.2016, 16:46:14

ХельТруда, пользуйтесь на здоровье:-)