Отличная шпаргалка для блогеров: tiina

tiina

Отличная шпаргалка для блогеров

Dec 15, 2013 03:47

HTML-минимум для блогера
спасибо rhunwolf

HTML-минимум

В интернете висит уже миллион и одна страничка, которые предлагают погрузить вас в премудрости html-верстки, более или менее досконально.

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

Простое форматирование
    Сложное форматирование
    LJ-тэги
    Картинки и ссылки
    Простая табличка
    Дополнительные тэги

Для удобства использования я решил поместить тэги вот в такие окошечки.
Тройным левым щелчком мышки на любом слове в окошке можно выделить все содержимое.

Простое форматирование

полужирный текст текст

курсивный текст текст

подчёркнутый текст текст

зачёркнутый текст ~~текст~~

текст "печатной машинкой" текст

маленький шрифт текст

большой шрифт текст

равнение по центру текст или картинка

текст справа

текст

текст с отступом от края

текст

заголовок третьего уровня

текст

Для увеличения заголовка замените оба "h3" на "h2" или "h1".

Сложное форматирование

текст

РАЗМЕР
ШРИФТ
ЦВЕТ

6pt
Monotype Corsiva
Red

9pt
Times New Roman
Green

12pt
Comic Sans Ms
Blue

15pt
Georgia
Purple

18pt
Arial Black
Silver

21pt
Verdana
Aqua

24pt
Courier
Maroon

первая строка
вторая строка

первая строка
вторая строка

первая строка
вторая строка

первая строка
вторая строка

LJ-тэги

пользователь vincent_ft

сообщество

текст под катом скрыть часть поста для экономии места во френдленте

текст под катом скрыть часть текста и озаглавить его

поставить кнопочку перепоста

добавить кнопочку "Нравится"

Картинки и ссылки

общий пример

результат

конкретный пример

ТЕКСТ ССЫЛКИ

Хостинг картинок!

http://photobucket.com" target="_blank"> Хостинг картинок!

ОПИСАНИЕ КАРТИНКИ

http://i125.photobucket.com/albums/p78/rhunwolf/mafia12/1pers.jpg" border="0" alt="Жан Рено с дробовиком!">

http://community.livejournal.com/rpg_123/profile">

http://i125.photobucket.com/albums/p78/rhunwolf/OUT FALL/5732212.jpg" border="0" alt="Сообщество РИ!">

ТЕКСТ ССЫЛКИ
ТЕКСТ ССЫЛКИ

на этой странице
где-то выделен текст

Простое фо...
    Сложное фо...
    LJ-тэги
    Картинки и...
    Простая та...
    Прочее

Простое фо...
Сложное фо...
LJ-тэги
Картинки и...
Простая та...
Прочее

Простая табличка

A1	B1	C1
A2	B2	C2

A1
B1
C1

A2
B2
C2

Прочее

Код
Символ
Значение

"
"
кавычки

&
&
амперсанд

<
<
знак 'меньше'

>
>
знак 'больше'

α
α
альфа

ω
ω
омега

неразрывный пробел

#
#
октоторп

текст в рамочке

текст в рамочке

Окошко

текст <br /><br /> Принудительный перенос строки (как между строчками) <br /><br /> Разделительная линия (см.ниже) <НR> <br /><br /> Кнопка репоста <br /><br /> В ЖЖ введен новый тэг: <lj-repost ></lj-repost> <br /><br /> Вставкой в пост этого тега вы публикуете кнопку "Repost" (Перепостить) <br /><br /> <ul><li>Пока тэг доступен только в режиме HTML-редактора.</li><li>Одинарный тэг <br /><br /> приведет к размещению всей записи.<br />(Пробел перед "/" обязателен!).</li><li>Для репостинга фрагмента исходной записи используется парный тэг: <br /><br /> <lj-repost>Перепост этого фрагмента <lj-repost ></lj-repost></li><li>Название кнопки меняется параметром "button": <br /><br /> <lj-repost button="Разместить у себя в журнале" ></lj-repost></li><li>Кнопка дублирует заголовок записи оригинала и ставит в запись себя же для последующего перепоста.</li><li>В режиме "Просмотр" работу кнопки не увидите, только после публикации. <br /><br /> Цитирование фраз <br /><br /> взято у <strong class="lj-user"><a href="/read/user/darth_biomech">darth_biomech</a></strong> в <a href="/read/user/darth-biomech/100975" class="external">http://darth-biomech.livejournal.com/100975.html</a> <br /><br /> Вставить перед цитируемым текстом...<br /> <div style="margin-left:30px; background-color:#F5F5F5; padding:10px; border:1px solid black; color: #000000;"><strong>Цитата:</strong><div style="font-family:Georgia; margin-top:10px; color: #000000;"><i> <br /><br /> ...и после него.<br /> </i></div></div> <br /><br /> Вот так это будет выглядеть: <br /><br /> Цитата:<br />Bla bla bla blah. <br /><br /> Внимание новичкам! <br /><br /> Все вышеперечисленное будет работать, только если вы постите в блог в ХТМЛ редакторе, не в визуальном. Смотрите картинку: <br /><br /> <img src="http://cs10680.vk.com/u4152607/8794068/z_1c1fe9fd.jpg" class="pic" /> <br /><br /> Таблица спецсимволов <a class="external" href="http://miraduga.com/Temp/TablSpec.html">раз</a> и <a class="external" href="http://www.webremeslo.ru/spravka/spravka2.html">два</a>.<br />HTML-справочник <a class="external" href="http://html.manual.ru/">раз</a>, <a class="external" href="http://htmlka.com/livejournal/">два</a> и  <a href="/read/user/wildmale/tag/tips&links">три</a>.<br /><a class="external" href="http://www.lki.ru/text.php?id=330">Как сделать сайт?</a> <br /><br /> Надеюсь вам будет полезно! <br /><br /> Сделать свой дизайн: <br /><br /> <a href="http://lj.yoksel.ru/how_edit.php" class="external">http://lj.yoksel.ru/how_edit.php</a><br /><a href="/read/user/journals-covers/" class="external">http://journals-covers.livejournal.com</a> <br /><br /> UPD: Как сделать 2 колонки в своей записи? <br /><br /> <CENTER><TABLE BORDER="0" WIDTH="100%"><TR><br /><TD WIDTH="50%">колонка 1</TD> <TD WIDTH="50%">колонка 2</TD><br /></TR></TABLE></CENTER> <br /><br /> Пример: <br /><br /> Откуда взялся Муми-тролль? <br /><br /> По словам Софии Янссон, племянницы Туве, история появления Муми-тролля на свет такова. На острове, где семья Янссон проводила каждое лето, туалет находился не в доме, а на улице. Изнутри он был обит картоном. На этом картоне все члены семьи любили рисовать и писать, там шла очень бурная переписка, например, с братьями они размышляли о философских проблемах. Однажды брат написал там какую-то историю о Канте. Туве не могла придумать что-то ему в ответ и нарисовала какое-то существо. Тогда она сказала, что это было самое некрасивое существо, какое только она могла придумать. Это и был первый Муми-тролль.<br /><img src="http://ic.pics.livejournal.com/rhunwolf/5732212/666271/666271_1000.jpg" class="pic" /> <br /><br /> </li></ul>
        </div>
    
    
        <p class="item-tags">
            
                <a href="http://m.livejournal.com/read/user/tiina/tag/# Полезное"># Полезное</a>, 
            
                <a href="http://m.livejournal.com/read/user/tiina/tag/Ссылки для ведения ЖЖ">Ссылки для ведения ЖЖ</a>, 
            
                <a href="http://m.livejournal.com/read/user/tiina/tag/#livejournal">#livejournal</a>
            
        </p>
    
</div>
            <div
  class=
    "
    ljsale
    ljsale--empty
    
    "

lj0sale="adfox_mobile_content_1"

></div>
            <div class="b-more-button">
                <a class="b-more-button-inner" href="/login?back_uri=http://m.livejournal.com/read/user/tiina/4004406/comments/reply#comments">Leave a comment</a></p>
            </div>
        
    </div>
    
        <div class="b-more-button"><a class="b-more-button-inner" href="http://m.livejournal.com/read/user/tiina/4004406/comments#comments">Read comments 4</a></div>
    
</div>
<div class="paging">
    <table cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td class="paging-prev">
                    
                </td>
                <td class="paging-next">
                    
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div class="to-top">
    <a href="#to-top">
        Up
    </a>
</div>
<div class="footer">
	<div
  class=
    "
    ljsale
    ljsale--empty
    
    "

lj0sale="adfox_mobile_footer"

></div>
	<div class="footer-content">

<table class="footer-layout">
    <tr>
        
            <td>
                <a class="footer-menu-item footer-menu-index" href="//m.livejournal.com/">
                    <span class="footer-menu-item-title">Homepage</span>
                </a>
            </td>
        
        <td>
            <a class="footer-menu-item footer-menu-read" href="//m.livejournal.com/read">
                <span class="footer-menu-item-title">Read journal...</span>
            </a>
        </td>
        <td>
            <a class="footer-menu-item footer-menu-full" href="https://tiina.livejournal.com/4004406.html?fullversion=yes">
                <span class="footer-menu-item-title">Full version</span>
            </a>
        </td>
        <td>
            <a class="footer-menu-item footer-menu-help" href="//m.livejournal.com/help">
                <span class="footer-menu-item-title">Help</span>
            </a>
        </td>
        <td>
            
                <a class="footer-menu-item footer-menu-eng" href="//www.livejournal.com/tools/setlang.bml?lang=ru&returnto=//m.livejournal.com/read/user/tiina/4004406">
                    <span class="footer-menu-item-title">Русская версия</span>
                </a>
            
        </td>
    </tr>
</table>

<div class="footer-counters">
			
                
                <script language="JavaScript" type="text/javascript">
                    (new Image()).src = '//www.tns-counter.ru/V13a***R>' + document.referrer.replace(/\*/g,'%2a') + '*sup_ru/ru/CP1251/tmsec=lj_mob/546987';
                </script>
                <noscript>
                    <img src="//www.tns-counter.ru/V13a****sup_ru/ru/CP1251/tmsec=lj_mob/546987" width="1" height="1" alt="" />
                </noscript>

(function (d, w, c) {

(w[c] = w[c] || []).push(function() {

try {

w.yaCounter27737346 = new Ya.Metrika({id:27737346,

clickmap:true,

trackLinks:true,

accurateTrackBounce:true});

} catch(e) { }

});

var n = d.getElementsByTagName("script")[0],

s = d.createElement("script"),

f = function () { n.parentNode.insertBefore(s, n); };

s.type = "text/javascript";

s.async = true;

s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js";

if (w.opera == "[object Opera]") {

d.addEventListener("DOMContentLoaded", f, false);

} else { f(); }

})(document, window, "yandex_metrika_callbacks");

</script>

</div>
	</div>
	<div class="footer-copy b-strip">© 1999-2024 LiveJournal, Inc.</div>
</div>

		</div>
	</body>
</html>