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

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

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

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


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

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

Пробуем:



3. Ставим кат.
Что может быть проще? Вам помогут либо волшебные ножницы на панели Памятка пользователя, или HTML-теги, которые вам пригодятся, либо вот этот код:
<cut>


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

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


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


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

Это та же самая ссылка, которая бы получилась при нажатии кнопки. Только тут, как видите, мы ещё и добавили слова, которыми она будет отображаться. Слов может быть и несколько. Итак, написав код
<a href="http://steampunker.ru/">тут всё просто</a>

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

5. Прячем ссылку под картинку и делаем превью картинки
Предыдущий способ ставить ссылки можно слегка разнообразить. В самом деле, зачем что-то говорить, когда можно улыбнуться и показать табличку?
Итак, вспоминаем предыдущий код
<a href="http://steampunker.ru/"></a>
и код вставки изображения, который я приводила в первом пункте этого мануала:
<img src="http://steampunker.ru/templates/skin/new/images/steampunker_logo.png">

И комбинируем, вставляя код вставки картинки туда, где должно находиться слово-описание ссылки:
<a href="http://steampunker.ru/"><img src="http://steampunker.ru/templates/skin/new/images/steampunker_logo.png"></a>

Щёлкните-ка по логотипу. Чудеса, правда?
Памятка пользователя, или HTML-теги, которые вам пригодятся (Фото 5)

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

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

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

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

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

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

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

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

34 комментария

avatar
Отличная работа. Полезная тема и доступное изложение. Её бы закрепить в шапке сайта как-нибудь.
avatar
«ВНИМАНИЕ! Топик добавлен в избранное» (с)
… Чего и Вам всем желаю!
avatar
Спасибо, теперь над на каждым окошком, куда пишется статья есть ссылка на этот топик.
avatar
Вот даже как) Надеюсь, он кому-нибудь поможет.
avatar
Очень познавательный и хорошо написанный мануал получился! Спасибо!
avatar
Очень рада, что оценили)
В принципе, можно ещё попробовать написать мануал по всяким свистелкам и украшалкам наподобие бегущей строки, маркированного списка и прочего. Но я сомневаюсь, что оно здесь надо)
avatar
Всегда хотел сделать такой мануал, но руки не доходили. Рад, что кто то удосужился сделать это)
Украшалки, имхо, лишнее.
avatar
Ну вот и я об этом же думаю. Обойдёмся без мещанских штучек))
avatar
Я, понимаешь, видеогайд всё сделать хотел. Для наглядности, так сказать. Проблема была в разрешении экрана. Разборчивое видео просто-напросто некуда было выгрузить, а в ютубовском разрешении ничегошеньки не видно(
avatar
Ну на ютубе же можно HD на полный экран развернуть)
avatar
Хотел делать видео при помощи программки, копирующей видео с экрана непосредственно. Там действительно HD нужно. ТРАХФИК! Не каждый захочет открывать ролик, такого веса)
avatar
Лучше мануал про блоги, систему рейтинга и пр. То, что у нас в ФАКе не дописано.
avatar
Хорошо, значит позже ждите вторую серию.)
avatar
Добавлю, ещё можно для ката использовать тэг:
<cut name=" текст ката ">

тогда вместо «Читать дальше» будет написано то, что вы напишите в кавычках.
avatar
Спасибо!
Я искала эту функцию, но вводила вместо name слово text, как в ЖЖ. Соответственно, ничего не получалось)
avatar
Спасибо огромное, очень помогла ваша статья!:)
avatar
Я рада)
avatar
Спасибо автору!
avatar
Пожалуйста)
avatar
Спасибо большое за памятку, обнаружил ссылку на ваш топик, мне она просто необходима
avatar
Пока у меня небольшие проблемы с правами доступа к файлам на сервере, просьба пользоваться конкретно этой статьей, а не её копией в ФАКе. Копия глючит — жует теги code и video.
avatar
видео не вставляется, копирнул код с русутьюба, вставил и отображает просто пустое место(((
avatar
Сейчас посмотрим, что можно сделать…
avatar
Вы, наверное, нажали кнопку «видео» на панели, и код у вас при написании выглядел так:
<video><тут код плеера></video>

Попробуйте вставить без тега video, просто тот код, который дают на рутьюбе. Начинается и заканчивается на слово OBJECT. Должно получиться.)
avatar
вопрос.я создаю топик с изображениями, жму добавить картинку, выбераю нужную, а он говорит, что этот файл не считается картинкой.Что делаьб?
avatar
А каков формат вашей картинки?
avatar
как вариант, если это движку приглючилось и у вас настоящий жепег (или другой реально существующий распространенный формат), можно сначала на радикал загрузить, а потом либо загрузить из УРЛ, либо вставить напрямую. т.е.
avatar
блин, забыл, что в комментах тоже теги. вот что я имел в виду
<img src="ссылка на радикал">
avatar
блин 5 минут назад писал статью о том же хтмл*е и камп вырубился может и правильно- не надо писать написаноеивот нашол ее здесь, спряталась зараза!!!
avatar
Чесслово — все ресурсы бы так нянчились заботились о своих читателях-писателях, жить было бы оsteamенно… Даже появилось желание выложить что-то из своего крюкотворчества… Постараюсь на неделе это сделать)))
avatar
Почему-то не работает тег cut, т.е. кат. При предпросмотре все равно целый текст :(
avatar
Он и не должен работать. При просмотре вы видите свой пост целиком, как он открывается на своей странице. Тег «кат» поставьте в нужное место, и, например, сохраните в черновики, если боитесь сразу публиковать.
А вот при просмотре черновиков вы уже увидите «урезанный» пост со ссылкой.
avatar
Спасибо :)
avatar
Если не сложно, еще немного про cut. Сделал такую «конструкцию»:

<img>...картинка...</img>
<cut>
...немного второстепенного текста...
</cut>
...начало материала...
<cut>
...продолжение материала...


Все, что после первого тега cut невидно! Это ошибка или есть какая-то особенность?
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.