Памятка пользователя, или HTML-теги, которые вам пригодятся

Никакого отношения к стимпанку как таковому этот пост не имеет вообще. Но я думаю, на Стимпанкере очень пригодится такая мини-напоминалка по тегам. HTML знают не все, а он иногда бывает необходим. Хотя бы для того, чтоб сократить до минимума вопросы вроде «А как вставить картинку в коммент?» =)

Краткое содержание:
1. Вставляем картинки в посты и комментарии
2. Вставляем видео в посты и комментарии
3. Ставим кат
4. Прячем ссылку под текст
5. Прячем ссылку под картинку и делаем превью картинки
6. Цитируем собеседника в комментариях
7. Первые четыре кнопки на панели, или Сила эмоций и оговорочки по Фрейду
1. Вставляем картинки в посты и комментарии.
Бывает так, что попадается вам какая-нибудь картинка, которую вы очень хотите вставить в пост/комментарий, но не знаете, как. С постами всё просто: нажимаете предпоследнюю кнопку на панельке , загружаете файлы на сервер, и всё готово само собой. А как же комментарии?
Тут можно поступить двумя способами.
Первый, подсказанный уважаемым 2tw_Ant: создаёте пост, сохраняете его у себя в черновиках и заливаете туда картинки, которые хотите опубликовать. А затем берёте готовую ссылку и вставляете её в комментарий.
Второй вариант потруднее, но зато он экономит место на сервере и избавляет вас от возни с черновиками. Вам понадобится этот код:

<img src="">

Далее просто копируете адрес картинки (нажимаем правой кнопкой мышки, выбираем пункт «копировать адрес изображения») и вставляете этот адрес в кавычки в коде. Вуаля!
Что делать, если картинка у вас на компьютере? Всё просто. Выбираете любой бесплатный хостинг изображений, например radikal.ru, затем загружаете на него картинку — и получаете на выбор кучу ссылок. Рекомендую взять первую, прямую ссылку, и вставить её в написанный выше код.
Пожелуйста, не используйте ссылки, в которых есть квадратные скобки и всякие теги вроде [IMG]. Это несколько другой формат тегов, и картинка просто не отобразится.

2. Вставляем видео в посты и комментарии.
Оно вставляется ну до смешного просто: берём нужное видео, ищем ссылку на встраивание (на русских хостингах вроде Рутуба или русскоязычного Ютуба — слово «Встроить», на англоязычных — «Share»), нажимаем, копируем текст, который вам выдаётся, и вставляем его в комментарий. Просто так, без всяких тегов.
Например, идём на ютуб, вот сюда: www.youtube.com/watch?v=ZPBpXlZumNg. Нажимаем кнопку «Встроить». Нам повезло — пользователь разрешил встраивание! Копируем открывшийся код:

<object width="480" height="385"><param name="wmode" value="opaque"></param><param name="wmode" value="opaque"></param><param name="movie" value="http://www.youtube.com/v/ZPBpXlZumNg&hl=ru_RU&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ZPBpXlZumNg&hl=ru_RU&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></embed></param></param></embed></object>

А теперь вставляем весь текст в ваш пост или комментарий — и любуемся.


Примечание для тех, кто вставляет видео в пост: ни в коем случае не используйте кнопку встраивания видео (третья справа на панели ). Не знаю почему, но она не работает так, как ей стоило бы, и ваше видео не отобразится. Ограничьтесь просто скопированным кодом, кнопка ни к чему.

Добавление от админа: а у меня работает, просто ссылку надо вставлять с одним параметром v, без всяких прочих: www.youtube.com/watch?v=ZPBpXlZumNg&feature=player_embedded

<video>http://www.youtube.com/watch?v=ZPBpXlZumNg</video>

Пробуем:

3. Ставим кат.
Что может быть проще? Вам помогут либо волшебные ножницы на панели , либо вот этот код:

<cut>

Согласно правилам хорошего тона, принятым в Институте благородных девиц-и-не-только-девиц, кат нужно ставить в следующих случаях:
а) Когда у вас длинный-предлинный текст. Поражать воображение читателя лучше не сразу. Поставьте кат после первого абзаца, а то и после пары-тройки предложений — пусть читатель привыкает к мощи вашей мысли постепенно.
б) Когда у вас в посте много картинок. Как говорили древние люди, охотясь на мамонтов, много — это больше двух. Поэтому ставьте кат после первых двух фотографий, и удачной вам охоты.
в) Когда в вашем посте есть нечто, что категорически не следует видеть беременным женщинам, детям до 18, нервным и впечатлительным людям и вашей бабушке. Материалы, содержащие эротику, насилие или всякую разную жуть, безусловно относятся к подобным вещам. Так что под кат, господа, незачем зря тревожить Скотланд-ярд.

Кстати, если вам захотелось, чтоб скрытым был не весь пост, а только его часть, это тоже очень просто. Всего лишь поставьте в том месте, в котором хотите продолжить общедоступную часть поста, закрывающий тег:

</cut>

Совет от уважаемого Despair: если вы хотите, чтоб вместо надписи «читать дальше» пользователей под кат приглашала другая фраза (например, «Оставь надежду, всяк сюда входящий») — пользуйтесь вот этим кодом:

<cut name="Ваш текст">

4. Прячем ссылку под текст.
Нам всем хочется, чтоб то, что мы делаем, выглядело красиво. В том числе и оставляемые нами ссылки. Как вы думаете, что красивее — скороговоркой пробормотать «Господа, у нас тут, понимаете ли, сайт steampunker.ru/» или снисходительно так, с улыбкой произнести «Добро пожаловать на Стимпанкер!»
Итак, чтоб наши ссылки были красивыми, можно опять же воспользоваться двумя методами, дающими один результат.
С автоматизацией: наша любимая панель (для комментариев она в несколько укороченном виде, но нужная кнопка там тоже есть). Выбираем кнопку в виде двух звеньев цепи, которая пятая слева, и жмём на неё. Вставляем ссылку. Всё, готовый код! А как добавить слово, под которым прячется ссылка — смотрите ниже.
Способ неавтоматизированный: пишем руками следующий код

<a href="ваша ссылка">слово, за которым вы её прячете</a>

Это та же самая ссылка, которая бы получилась при нажатии кнопки. Только тут, как видите, мы ещё и добавили слова, которыми она будет отображаться. Слов может быть и несколько. Итак, написав код

<a href="//steampunker.ru/">тут всё просто</a>

— вы с лёгкостью можете сообщить всему сайту, что тут всё просто!

5. Прячем ссылку под картинку и делаем превью картинки
Предыдущий способ ставить ссылки можно слегка разнообразить. В самом деле, зачем что-то говорить, когда можно улыбнуться и показать табличку?
Итак, вспоминаем предыдущий код

<a href="//steampunker.ru/"></a>

и код вставки изображения, который я приводила в первом пункте этого мануала:

<img src="//steampunker.ru/templates/skin/new/images/steampunker_logo.png">

И комбинируем, вставляя код вставки картинки туда, где должно находиться слово-описание ссылки:

<a href="//steampunker.ru/"><img src="//steampunker.ru/templates/skin/new/images/steampunker_logo.png"></a>

Щёлкните-ка по логотипу. Чудеса, правда?


Ну а что делать, если у нас есть две одинаковые картинки, большая и маленькая, и нам хочется, чтоб при клике на маленькую открывалась большая? Делать практически то же самое.
Берём адрес маленькой картинки и делаем из него код вставки изображения:

<img src="http://s57.radikal.ru/i158/1007/e3/246b1e28ed32t.jpg">

Затем берём код вставки ссылки, но вместо адреса странички вставляем в него адрес большой картинки:

<a href="http://s57.radikal.ru/i158/1007/e3/246b1e28ed32.jpg"></a>

И комбинируем всё это дело вместе, как я уже описала выше:

<a href="http://s57.radikal.ru/i158/1007/e3/246b1e28ed32.jpg"><img src="http://s57.radikal.ru/i158/1007/e3/246b1e28ed32t.jpg"></a>

И теперь вы можете не портить себе зрение, пытаясь разобрать, что же нарисовано на маленькой превьюшке. Просто щёлкните по ней — и вы увидите полноразмерную красивую картинку. Кстати, кто её автор, я не знаю. =) Ну, щёлкните же!


6. Цитируем собеседника в комментариях
В жарком споре, настояв на своём и добившись публичного признания своей правоты, мало кто из нас удерживается от того, чтоб не упомянуть с ехидцей в голосе слова оппонента, добавив затем «Вы так говорили, и вы неправы!» А как же это сделать тут? Да проще простого.
— наша незаменимая, родная и милая панель обладает замечательной кнопочкой в виде кавычек. Просто выделяете в посте или комментарии собеседника текст, который хотите процитировать, и нажимаете на кавычки. Всё, дальше можно не беспокоиться! Цитата, заверенная виртуальным нотариусом, уже у вас в комментарии.
Если же вам по какой-то причине не хочется нажимать кнопочку, вот нужный код:

<blockquote>Копируем цитату, вставляем сюда</blockquote>
А здесь доказываем, что сэр Генри неправ во всём, начиная с собственного рождения.

Получится примерно следующее:
— Итак, господа, сэр Генри публично оскорбил меня 25 марта 2009 года, и ныне я об этом вспомнил и предъявляю вам текст его оскорбления:

Лорд Вестерн есть не кто иной, как проходимец, негодяй и подлец, и это заявляю вам я, сэр Генри!

Разумеется, общественность будет на вашей стороне, ибо у вас достаточно улик.

7. Первые четыре кнопки на панели, или Сила эмоций и оговорочки по Фрейду.
Что-то мы ещё упустили, не так ли? Давайте внимательно поглядим на нашу панель ещё раз. Обещаю, это последний!

Мы не поговорили о первых четырёх кнопках. Да, я знаю, что большинство из вас сейчас возмущённо скажет «Нас что, считают за чайников?!» Не обижайтесь, господа. Когда я 6 лет назад первый раз в жизни увидела просторы интернета, я чуть с ума не сошла от подобных кнопочек. Моё счастье, что я быстро во всём этом разобралась — а кто-то, возможно, и посейчас разобраться не может. Мануал — так от начала до конца. В конце концов, можете это просто не читать.)
Итак, первая кнопка B помогает вам написать текст жирным шрифтом. Например для того, чтоб выразить что-то особо важное, начиная от ударения в слове и заканчивая вашими эмоциями.

<b>Текст, как вы понимаете, пишется тут.</b>

Впрочем, можно просто выделить уже написанный вами текст и нажать на кнопку, всё само сделается.
Вторая кнопка I выделяет текст курсивом.
Третья кнопка U подчёркивает ваш текст.
И наконец четвёртая кнопка отправляет всех в ад перечёркивает текст, создавая эффект оговорочки по Фрейду.

На этом всё. Надеюсь, мануал был вам полезен. Если я что-то упустила или вам просто захотелось ещё что-нибудь узнать, жду вопросов в комментариях.