Htmlka и – HTML, ЖЖ Тэги | Как форматировать текст, вставить картинку или ссылку: alex_inside — LiveJournal

Для тех кто не в курсе


  • Когда терзают смутные сомнения:
    http://www.livejournal.com/manage/logins.bml - смотрим историю залогинивания в своем ЖЖ

  • http://ljplus.ru/friends/history - самая удачная, на мой взгляд, реализация «истории друзей». Минус - глючит при количестве друзей более 2000. Требует регистрации на ljplus.ru

  • http://ljplus.ru/post/?mode=later - "отложенный" во-времени постинг. Работают lj-cut и html-разметка. Требует регистрации на ljplus.ru

  • http://www.livejournal.com/mobile/post.bml - минималистская версия "Написать пост".

  • http://www.livejournal.com/mobile/friends.bml - френдлента с "птичьего полета", то бишь ее мобильный вариант. Если завести и назвать группу "Mobile view" - будем по ссылке читать только ее.

  • http://wildmale.livejournal.com/tag - читать журнал по меткам (то есть добавив к адресу интересующего журнала /tag)

  • http://www.ljtags.com - поиск по жж-меткам

  • http://www.livejournal.com/manage/settings/?cat=display&view=schemes
    – все схемы оформления ЖЖ (включая XColibur и Dystopia - всего 6 схем).

  • Режем рекламу в ЖЖ.

    http://www.onlinedisk.ru/file/523928 - скачиваем файл (rar), следуем инструкции, забываем про рекламу в ЖЖ
    А вот здесь более новые "разработки":
    http://chtec-059.livejournal.com/24695.html

    Совет по безопасности:


  • Если вы отвечаете на скрытый комментарий, он открывается. Опять скрините, но он, как и ваш ответ, уже проиндексированы и легко могут быть найдены через поисковик. Также открытый даже на секунду камент будет выслан тому, кто подпишется на уведомления о комментариях к посту.

Изображения

Код любой картинки в сети в простом варианте выглядит так:

Уникальный URL (http://site/…jpg) выдает картинке фотохостинг (специальный сайт), куда ее необходимо закачать с вашего компьютера.

Совсем «чайникам» рекомендую действовать так (для ЖЖ):
1.Открываешь ljplus.ru
(одна из функций этого сайта – фотохостинг, заточенный под публикацию картинок в жж)
2. Регистрируешься
3. Жмешь: КАРТИНКИ-ЗАГРУЗИТЬ-ОБЗОР-ЖМИ УЖЕ!
4.Смотришь на HTML-коды и копируешь нужный в поле поста или каммента
5. Постишь. Становишься знаменитым.

В комментарии картинки ставятся аналогично, кат не работает.

Как сделать, чтобы текст «обтекал» картинку?
Легко – картинка слева, текст справа:
добавляем в код картинки:
align=left hspace=20
Код картинки примет вид:

Помни:
align=left – картинка слева, текст справа
align=right – картинка справа, текст слева
hspace=20 – расстояние между текстом и картинкой 20 пиксел по горизонтали
vspace=20 – расстояние между текстом и картинкой 20 пиксел по вертикали
Код картинки с плавным обтеканием текстом справа и снизу (или сверху):

Прекратить обтекание и вернуть текст под картинку можно тэгом

Закрывать не надо, он работает один.
выполняет перенос на следующую строку. В блогсервисах и редакторах текста его заменяет нажатие Enter.

– три пустые строки.

Вставить две и более картинки горизонтально:
<nobr>Текст (картинки)</nobr>– все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

Регулируем расстояние меж картинками по-горизонтали:
С помощью «неразрывного пробела»:
Расстояние, равное 8 пробелам будет выглядеть так:
     
Вставляется меж кодов картинок, есс-но

Если надо всплывающую подсказку при наведении курсора на картинку, как здесь: – введите в код картинки title="ТЕКСТ"

Если надо цветную рамку , добавьте в код картинки:style="border:5px solid red;"– задана красная рамка толщиной 5 пикселей

Чтоб быстро вставить картинку с другого сайта, вставьте в пост:
<img src="">
затем войдите в «Свойства» картинки на этом сайте, скопируйте ее URL и вставьте в код меж кавычек

Изменить размер картинки можно с помощью атрибутов width (ширина) и height (высота). Вставьте в код картинки, например, width=300 и ваша картинка будет шириной 300 пикселов, высота подгонится пропорционально. Браузер при этом все равно подгружает изначальную картинку, и если та весила 3МБ, то меньше не станет:)

Полезные приложения:
Семаджик – программа-клиент для ведения блогов
LiveJournal Addons — расширение для браузера Firefox
LiveJournal Extension – расширение для Chrome
ljbook.com – сохранение блога в pdf
ljArchive – сохранение, архивация жж

Полезные страницы ЖЖ:
Карта всея ЖЖ
Cлужба тех. поддержки
Возможности разных типов аккаунтов
Статус аккаунтов друзей, купить аккаунт другу
Менеджер почтовых ящиков
Защищенная страница входа в ЖЖ
Текстовая страница входа в ЖЖ (без java script)
Дни рождения друзей
Страница управления сеансами связи с ЖЖ
Разбуди друга!
Административная Консоль
Редактирование меток
Список трансляций
Сменить имя пользователя
Сменить пароль
Cменить e-mail
Тем, кто забыл имя пользователя или пароль
Сменить уровень доступа к записям (для Платного)
Страница Удаления (восстановления) журнала
Написать в Конфликтную Комиссию
Написать в отдел техподдержки
Бан

Livejournal

Элементарный жж-кат (с “Read more”):
<lj-cut> ТЕКСТ </lj-cut>
жж-кат с ВАШИМ ПОДЗАГОЛОВКОМ:

<lj-cut text="ПОДЗАГОЛОВОК"> ТЕКСТ </lj-cut>
Работу ката не видно в режиме «ПРОСМОТР»
Как в сообщение вставить жж-пользователя чтобы это выглядело, например, так: wildmale
<lj user="wildmale">
Сссылка на сообщество, например: aforism
делается точно так же:
<lj user="aforism">

Вместо wildmale пишем Дикий самец:
<a href="lj://user/wildmale/">Дикий самец</a>
Ежели надо с «человечком»: Дикий самец:
<lj user="wildmale" title="Дикий самец">
Скопировав код, не забудьте поменять реквизиты.

Ежели хотите сделать так: wildmale
или эдак: comm и commun
то вам СЮДА

Кнопка Repost (Перепостить)
Вставкой в пост этого тега вы публикуете кнопку «Repost» (Перепостить):

<lj-repost ></lj-repost>


  • Одинарный тег

    приведет к размещению всей записи.


  • Для репостинга фрагмента исходной записи используется парный тег:
    <lj-repost>Перепост этого фрагмента <lj-repost ></lj-repost>

  • Название кнопки меняется параметром «button»:
    <lj-repost button="Разместить у себя" ></lj-repost>

    С недавних пор в ЖЖ в посты можно вставлять интерактивные карты с сервисов Google.Maps или Яндекс.Карты

    Для этого используется специальный тег:<lj-map url=URL-карты>

    Что такое URL-карты можно узнать ЗДЕСЬ


Вместо ссылки на страничку можно делать кнопку. В нее можно вставить картинку, например, движущийся gif:


LetПомощь - коды!

Ее код:

Шпаргалочка по тегам: wildmale — LiveJournal

"Шпагалочка" прошла множество update'ов и стала сайтом http://htmlka.com. На этой страничке остались лишь специальные LJ-теги.
Кто желает иметь такую кнопку:

код для вставки:
<a href=http://htmlka.com/><img src=http://htmlka.com/wp-content/uploads/2009/07/butto.png border=0 alt="Помощь блогеру" title="Помощь блогеру" target=_blank></a>

вносим в Профиль (поле "О себе"), сайдбар и т.д.


Для новичков:
1. Теги можно ставить в журнал copy-paste'ом (копировать-вставить)
2. Не надо пытаться ставить их в режиме "Визуальный редактор"
_________________________________________________________________
LJ-теги:
Элементарный лже-кат (с “Read more”):
<lj-cut> СПРЯТАННЫЙ ТЕКСТ </lj-cut>
Лже-кат с ВАШИМ ПОДЗАГОЛОВКОМ:
<lj-cut text="ВАШ ПОДЗАГОЛОВОК"> СПРЯТАННЫЙ ТЕКСТ </lj-cut>
ВНИМАНИЕ: Работу ката не видно в режиме "Просмотр" Нужно постить.
В каментах, профиле, сайдбаре и т.д. кат НЕ РАБОТАЕТ!
Как в сообщение вставить сообщество, чтобы это выглядело, например, так: aforism
<lj user="aforism">
Как в сообщение вставить жж-пользователя чтобы это выглядело, например, так: wildmale
<lj user="wildmale">
Как вместо wildmale написать Дикий самец:
<a href="lj://user/wildmale/">Дикий самец</a>
Ежели надо с "человечком", типа, Дикий самец:
<lj user="wildmale" title="Дикий самец">
Скопировав код, не забудьте поменять мои реквизиты на свои
Ежели хотите сделать так: wildmale
или эдак: comm и commun
то вам СЮДА

Больше не нужно мучаться с кнопкой "Перепостить в свой ЖЖ".
В ЖЖ введен новый спец. тег: <lj-repost />
Вставкой в пост этого тега вы публикуете кнопку "Repost" (Перепостить)

Особенности использования:

  • Пока тег доступен только в режиме HTML-редактора.
  • Одинарный тег <lj-repost /> приведет к размещению всей записи.
    (Пробел перед "/" обязателен!).
  • Для репостинга фрагмента исходной записи используется парный тег:

    <lj-repost>Перепост этого фрагмента <lj-repost />

  • Название кнопки меняется параметром "button":

    <lj-repost button="Разместить у себя в журнале" />

  • Кнопка дублирует заголовок записи оригинала и ставит в запись себя же для последующего перепоста.
  • В режиме "Просмотр" работу кнопки не увидите, только после публикации.


    Самые распространенные вопросы новичков:


    1. "Почему именно у меня и не работает кат?"
    или "Почему введенная в пост LJ и HTML-разметка не работает и публикуется как есть?" или "Как пользоваться http://htmlka.com?"
    Дело в том, что на странице "Написать пост" (http://www.livejournal.com/update.bml) ДВА режима - "Визуальный редактор" и "HTML". Представленные здесь и на htmlka.com теги работают только в режиме "HTML":

    2. "Почему картинки в моем жж отображаются не оригинального размера, а маленького?"
    Потому что жж сейчас устроен так, что картинки новички по умолчанию закачивают в "Фотоальбом ЖЖ", откуда они показываются в уменьшенном виде. Забей на "Фотоальбом ЖЖ", во-первых, он неудобен, во-вторых, если когда-нибудь закроешь журнал (взломают, закроют), все картинки пропадут вместе с ним. Зарегистрируйся на http://www.ljplus.ru, жми "картинки"-"загрузить", получай html-код для вставки и публикуй картинки в любом размере в режиме HTML. А вообще хостингов для картинок сейчас прорва:)



    Если хочешь уметь делать так:
    Мой офигительно креативный текст!
    или эдак:
    я крутой! как олень!
    и многое другое, то ранее находившаяся на этой странице знаменитая в ЖЖ и Рунете"Шпаргалочка по тегам" переехала на


  • Коды ЖЖ. Памятка для блогера: u3poccuu — LiveJournal


    В этом посте собраны практически все необходимые коды жж для блогера Живого журнала.

    Коды ЖЖ и оформление частично взяты с сайта htmlka.com, я лишь сделал оформление удобнее для себя с необходимыми мне ссылками.

    Самые необходимые коды ЖЖ для блогера

    Все теги ставятся в блог copy-paste‘ом
    (В режиме «HTML», а не «Визуальный редактор») !!!

    Оформление текста
    Перечёркнутый текст: ТЕКСТ
    <s> ваш текст </s>
    Подчёркнутый текст: ТЕКСТ
    <u> ваш текст </u>
    Полужирный текст: ТЕКСТ
    <b> ваш текст </b>
    Полужирный крупный: ТЕКСТ
    <big> ваш текст </big>
    Курсивный текст: ТЕКСТ
    <i> ваш текст </i>
    Маленький текст: текст
    <small> ваш текст </small>
    Неразрывный пробел:
    &nbsp;

    Центрирование:

    текст (картинка) по центру


    <center>ваш текст (картинка) </center>
    Выравнивание текста по правому краю поста:
    <div align=right> ваш текст </div>
    Выравнивание текста по всей ширине поста:
    <div align=justify> ваш текст </div>
    Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):
    <blockquote> текст </blockquote>

    Линия:

    ее код: <hr>
    Ударение:
    Cтавим после нужной буквы:
    &#769;

    РАЗМЕР ШРИФТА:

    Уменьшить текст: текст – 2
    <font size="-2"> уменьшенный текст </font>
    Увеличить текст на 1 пункт: текст
    <font size="+1"> увеличить текст на 1 пункт </font>
    Увеличить текст на 2 пункта: текст
    <font size="+2"> увеличить текст на 2 пункта </font>

    И так далее, увеличивая цифру, увеличиваем текст.

    ЦВЕТ ШРИФТА:

    КРАСНЫЙ: красный текст
    <font color="red"> красный текст </font>
    ЖЕЛТЫЙ: желтый текст
    <font color="yellow"> желтый текст </font>
    ФИОЛЕТОВЫЙ: фиолетовый текст
    <font color="purple"> фиолетовый текст </font>
    ЗЕЛЕНЫЙ: зеленый текст
    <font color="lime"> зеленый текст </font>
    СИНИЙ: синий текст
    <font color="navy"> синий текст </font>
    ФУКСИЯ: фуксия текст
    <font color="fuchsia"> фуксия текст </font>

    Таблица «базовых» цветов (вводим «Имя» или «Код»):

    • Таблица безопасных цветов
    • Все цвета Интернета

      ВИД ШРИФТА:

      Шрифт этого текста «Monotype Corsiva»
      <font face="Monotype Corsiva"> текст </font>
      Все вышеперечисленные атрибуты тега font можно объединять в одном теге:
      Шрифт этого текста «Monotype Corsiva»
      код этого текста:
      <font face="Monotype Corsiva" size="+2" color="fuchsia"> текст </font>

    • Оформление ссылок

    • Как вставить ссылку на веб-страницу:
      <a href="АДРЕС СТРАНИЦЫ"> ВАШ ТЕКСТ</a>
      Как сделать, чтобы картинка была ссылкой на веб-страницу:
      <a href="АДРЕС СТРАНИЦЫ"><img src="АДРЕС КАРТИНКИ"></a>
      Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:
      <a href="АДРЕС СТРАНИЦЫ" target="_blank">ВАШ ТЕКСТ</a>

      Окошечко для вставки кода, типа:
      ВАШ КОД
      получаем так:
      <textarea rows="2" cols="60"> ВАШ КОД </textarea>
      где rows и cols определяют площадь окна

      • Можно сделать покрасивше:

        <textarea>ВАШ КОД</textarea>

        <textarea >КОДЫ </textarea>

      • Элементарный жж-кат (с “Read more”):
        <lj-cut> ТЕКСТ </lj-cut>
        жж-кат с ВАШИМ ПОДЗАГОЛОВКОМ:
        <lj-cut text="ПОДЗАГОЛОВОК"> ТЕКСТ </lj-cut>
        Работу ката не видно в режиме «ПРОСМОТР»


      Кнопка Repost (Перепостить)
      Вставкой в пост этого тега вы публикуете кнопку «Repost» (Перепостить):
      <lj-repost />

      Название кнопки меняется параметром «button»:
      <lj-repost button="Разместить у себя" />

    • Публикация картинок:

    Код любой картинки в сети в простом варианте выглядит так:
    <img src="http://site/…jpg">
    Уникальный URL (http://site/…jpg) выдает картинке фотохостинг (специальный сайт), куда ее необходимо закачать с вашего компьютера.

    «Чайникам» рекомендую действовать так (для ЖЖ):
    1.Открываешь ljplus.ru
    (одна из функций этого сайта – фотохостинг, заточенный под публикацию картинок в жж)
    2. Регистрируешься
    3. Жмешь: КАРТИНКИ-ЗАГРУЗИТЬ-ОБЗОР-ЖМИ УЖЕ!
    4.Смотришь на HTML-коды и копируешь нужный в поле поста или каммента
    5. Постишь. Становишься знаменитым.

    В комментарии картинки ставятся аналогично, кат не работает.

    Запомните: Если вы удаляете картинку из галереи хостинга (например, с ljplus.ru), то она исчезнет и из вашего блога!

    Как сделать, чтобы текст «обтекал» картинку?
    Легко – картинка слева, текст справа:
    добавляем в код картинки:
    align=left hspace=20
    Код картинки примет вид:
    <img src="http:…" align=left hspace=20>
    Помни:
    align=left – картинка слева, текст справа
    align=right – картинка справа, текст слева
    hspace=20 – расстояние между текстом и картинкой 20 пиксел по горизонтали
    vspace=20 – расстояние между текстом и картинкой 20 пиксел по вертикали
    Код картинки с плавным обтеканием текстом справа и снизу (или сверху):
    <img src="http:…" align=left hspace=20 vspace=15>

    Прекратить обтекание и вернуть текст под картинку можно тэгом <br>
    Закрывать не надо, он работает один. <br> выполняет перенос на следующую строку. В блогсервисах и редакторах текста его заменяет нажатие Enter.
    <br><br><br> – три пустые строки.

    Вставить две и более картинки горизонтально:
    <nobr>Текст (картинки)</nobr> – все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

    Регулируем расстояние меж картинками по-горизонтали:
    С помощью «неразрывного пробела»: &nbsp;
    Расстояние, равное 8 пробелам будет выглядеть так:
    &nbsp; &nbsp; &nbsp; &nbsp;
    Вставляется меж кодов картинок, есс-но

    Если надо всплывающую подсказку при наведении курсора на картинку, как здесь: – введите в код картинки title="ТЕКСТ"

    Чтоб быстро вставить картинку с другого сайта, вставьте в пост:
    <img src="">
    затем войдите в «Свойства» картинки на этом сайте, скопируйте ее URL и вставьте в код меж кавычек

    Изменить размер картинки можно с помощью атрибутов width (ширина) и height (высота). Вставьте в код картинки, например, width=300 и ваша картинка будет шириной 300 пикселов, высота подгонится пропорционально. Браузер при этом все равно подгружает изначальную картинку, и если та весила 3МБ, то меньше не станет:)

    Фотохостинги

    Полезно:

    Некоторые хитрости ЖЖ

    http://ljplus.ru/post/?mode=later - "отложенный" во-времени постинг. Работают lj-cut и html-разметка. Требует регистрации на ljplus.ru

    http://www.livejournal.com/mobile/post.bml - минималистская версия "Написать пост".

    http://u3poccuu.livejournal.com/tag - читать журнал по меткам (то есть добавив к адресу интересующего журнала /tag)

    http://www.ljtags.com - поиск по жж-меткам

    http://www.livejournal.com/manage/settings/?cat=display&view=schemes
    – все схемы оформления ЖЖ (включая XColibur и Dystopia - всего 6 схем).

    Совет по безопасности:

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

    Если считаете, что в этом посте должны быть еще какие-то коды жж, то напишите в комменты.

    Другие полезные посты:

    Как добавить социальные кнопки для блога и постов
    Каталог ссылок, полезных для ЖЖиста
    Удобная панелька для отправки СМС
    Как настроить архивирование жж и перестать беспокоиться
    Как навсегда избавиться от рекламы при просмотре Интернет
    Как удалить учётную запись с популярных интернет-сервисов
    Утилиты резервного копирования для ЖЖ
    Как я обуздал френдленту ЖЖ
    Простоплеер без ограничений бесплатно
    Тся или ться?
    Шарики (пузырьки). Другая версия
    Шарики (пузырьки)
    Шарики (пузырьки). Новый вариант
    Дешевые аналоги лекарств
    Стишок-разминка
    Прикольная онлайн-рисовалка
    Про эти клавиши клавиатуры Вы должны знать!
    Горячие клавиши Windows, с которыми легче жить
    Как сделать перепланировку квартиры
    О вреде сидячего образа жизни
    Взаимозаменяемые препараты
    Удобные приложения для Live Journal (ЖЖ)
    Если из Избранного не удаляется запись
    Советы по избавлению от похмелья

    Отправить этот пост в социальные сети и закладки:Добавить в Twitter Поделиться в Facebook Поделиться ВКонтакте Поделиться в Моем Мире Добавить в Одноклассники Опубликовать в LiveInternet.ru Добавить в Blogger.com Добавить в Я.ру Добавить в Google Buzz Сохранить закладку в Memori.ru Сохранить закладку в Google Добавить в Яндекс.Закладки Добавить в Bobrdobr.ru Добавить в Mister Wong Добавить в Moemesto.ru Узнать код кнопок социальных сетей для Живого Журнала

    Вокруг и около сказок — ЖЖ

    Читать

    Ссылки

    Ссылка на веб-страницу:
    На главную страницу

    <a href="АДРЕС СТРАНИЦЫ"> Ваш текст </a>

    Как сделать, чтобы картинка была ссылкой на веб-страницу:
    <a href="АДРЕС СТРАНИЦЫ"><img src="АДРЕС КАРТИНКИ В СЕТИ"></a>
    Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:
    <a href="АДРЕС СТРАНИЦЫ" target="_blank"> ВАШ ПОДЗАГОЛОВОК </a>


    Чтоб быстро вставить картинку с другого сайта, вставьте в пост:
    <img src="">
    затем войдите в “Свойства” картинки на этом сайте, скопируйте ее URL и вставьте в код меж кавычек

    Изменить размер картинки можно с помощью атрибутов width (ширина) и height (высота). Вставьте в код картинки, например, width=300 и ваша картинка будет шириной 300 пикселов, высота подгонится пропорционально. Браузер при этом все равно подгружает изначальную картинку, и если та весила 3МБ, то меньше не станет:)

    <img src=""> — ограничение по ширине

    <img src=""> — ограничение по высоте


    Всплывающий комментарий к ссылке:
    htmlka.com <a href="АДРЕС СТРАНИЦЫ" target="_blank" title="Откроется в новом окне">текст</a>

    ЕЩЕ О ССЫЛКАХ

    Элементарный жж-кат (с “Read more”):
    <lj-cut> ТЕКСТ </lj-cut>
    жж-кат с ВАШИМ ПОДЗАГОЛОВКОМ:
    <lj-cut text="ПОДЗАГОЛОВОК"> ТЕКСТ </lj-cut>
    ВНИМАНИЕ: Работу ката не видно в режиме “ПРОСМОТР”
    Как в сообщение вставить жж-пользователя чтобы это выглядело, например, так: wildmale
    <lj user="wildmale">
    Сссылка на сообщество, например: aforism
    делается точно так же:
    <lj user="aforism">

    Вставить две и более картинки горизонтально:
    <nobr>Текст (картинки)</nobr> - все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

    Регулируем расстояние меж картинками по-горизонтали:
    С помощью “неразрывного пробела”: &nbsp;
    Расстояние, равное 8 пробелам будет выглядеть так:
    &nbsp; &nbsp; &nbsp; &nbsp;
    Вставляется меж кодов картинок, есс-но

    Так называемый “спойлерный” текст, проявляющийся при его выделении. Типа:
    “А убийцей в том кино был дворецкий”
    <span>спойлерный текст</span>



    Всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к следующему тексту):

    Ваш офигительно креативный текст

    <p title="Пояснительный текст">Основной текст</p>



    текст (картинка) по центру
    <center>ваш текст (картинка) </center>

    Окошечко для вставки кода, типа:
    ВАШ КОД
    получаем так:
    <textarea rows="2" cols="60"> ВАШ КОД </textarea>
    где rows и cols определяют площадь окна

    ЕЩЕ ПОДСКАЗКИ

    LJ Repost
    Originally posted by wildmale at Кнопка "Repost"

    Больше не нужно мучаться с кнопкой "Перепостить в свой ЖЖ".

    В ЖЖ введен новый спец. тег: <lj-repost />

    Вставкой в пост этого тега вы публикуете кнопку "Repost" (Перепостить)

    Особенности использования:


    htmlka


    Все теги можно ставить в блог copy-paste’ом
    HTML-теги, работающие на любой web-страничке:
    Оформление текста
    (рекомендую спец. страничку TEXT):

    Перечёркнутый текст: ТЕКСТ
    <s> ваш текст </s>
    Подчёркнутый текст: ТЕКСТ
    <u> ваш текст </u>
    Полужирный текст: ТЕКСТ
    <b> ваш текст </b>
    Полужирный крупный: ТЕКСТ
    <big> ваш текст </big>
    Курсивный текст: ТЕКСТ
    <i> ваш текст </i>
    Маленький текст: текст
    <small> ваш текст </small>
    Неразрывный пробел:
    &nbsp;
    Расстояние в 8 пробелов (между словами, картинками и т.д.):
    &nbsp; &nbsp; &nbsp; &nbsp;
    Центрирование:

    текст (картинка) по центру
    <center>ваш текст (картинка) </center>
    Выравнивание текста по правому краю поста:
    <div align=right> ваш текст </div>
    Равномерное выравнивание текста по всей ширине поста:
    <div align=justify> ваш текст </div>
    Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):
    <blockquote> текст </blockquote>
    Бегущая строка (рекомендую спец. страничку Бегущая строка):
    бегущая, как олень, строка
    <marquee> ваша бегущая строка</marquee>
    Вместо текста можно вставить картинку:

    Код этой картинки:
    <marquee><img src="АДРЕС КАРТИНКИ В СЕТИ"></marquee>

    Добавленный атрибут direction=right задаст направление движения слева направо, по умолчанию - справа налево

    Сноска вверху: ТЕКСТсноска
    <sup>ваша сноска</sup>

    Сноска внизу: ТЕКСТсноска
    <sub>ваша сноска</sub>

    Линия:


    ее код:<hr>
    Ударение:
    Cтавим после нужной буквы:
    &#769;
    “Закрепитель” (фиксирует текст так, как и расположите его в поле поста):
    Я
      Пешу
           Лесинкой!!!

    <pre>ваш текст</pre>

    РАЗМЕР ШРИФТА:
    Уменьшить текст: текст - 2
    <font size="-2"> уменьшенный текст </font>
    Увеличить текст на 1 пункт: текст + 1
    <font size="+1"> увеличить текст на 1 пункт </font>

    Увеличить текст на 2 пункта: текст + 2

    <font size="+2"> увеличить текст на 2 пункта </font>

    Увеличить текст на 3 пункта: текст + 3

    <font size="+3"> увеличить текст на 3 пункта </font>

    Увеличить текст на 4 пункта: текст

    <font size="+4"> увеличить текст на 4 пункта </font>

    ЦВЕТ ШРИФТА:

    КРАСНЫЙ: красный текст
    <font color="red"> красный текст </font>
    ЖЕЛТЫЙ: желтый текст
    <font color="yellow"> желтый текст </font>
    ФИОЛЕТОВЫЙ: фиолетовый текст
    <font color="purple"> фиолетовый текст </font>
    ЗЕЛЕНЫЙ: зеленый текст
    <font color="lime"> зеленый текст </font>
    СИНИЙ: синий текст
    <font color="navy"> синий текст </font>
    ФУКСИЯ: фуксия текст
    <font color="fuchsia"> фуксия текст </font>

    Таблица “базовых” цветов (можно ставить как “Имя” так и “Код”):


    ИмяКодИмяКодИмяКодИмяКод
    aqua#00FFFF green#008000 navy#000080 silver#C0C0C0
    black#000000 grey#808080 olive#808000 teal#008080
    blue#0000FF lime#00FF00 purple#800080 white#FFFFFF
    fuchsia#FF00FF maroon#800000red#FF0000 yellow#FFFF00

    ВИД ШРИФТА:
    Шрифт этого текста “Monotype Corsiva”
    <font face="Monotype Corsiva"> текст </font>
    Все вышеперечисленные атрибуты тега font можно объединять в одном теге:
    Шрифт этого текста “Monotype Corsiva”
    код этого текста:
    <font face="Monotype Corsiva" size="+2" color="fuchsia"> текст </font>

    Оформление ссылок (рекомендую спец. страницу Ссылки):

    Как вставить ссылку на веб-страницу:
    <a href="АДРЕС СТРАНИЦЫ"> ВАШ ПОДЗАГОЛОВОК</a>
    Как сделать, чтобы картинка была ссылкой на веб-страницу:
    <a href="АДРЕС СТРАНИЦЫ"><img src="АДРЕС КАРТИНКИ В СЕТИ"></a>
    Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:
    <a href="АДРЕС СТРАНИЦЫ" target="_blank"> ВАШ ПОДЗАГОЛОВОК </a>

    Специальные теги блогсервиса ЖЖ:

    Элементарный жж-кат (с “Read more”):
    <lj-cut> ТЕКСТ </lj-cut>
    жж-кат с ВАШИМ ПОДЗАГОЛОВКОМ:
    <lj-cut text="ПОДЗАГОЛОВОК"> ТЕКСТ </lj-cut>
    ВНИМАНИЕ: Работу ката не видно в режиме “ПРОСМОТР“
    Как в сообщение вставить жж-пользователя чтобы это выглядело, например, так: wildmale
    <lj user="wildmale">
    Как вместо wildmale написать Дикий самец
    <a href="lj://user/wildmale/"> Дикий самец</a>
    Ежели надо все же с “человечком” , например: Дикий самец: cкопировать след. код (не забыв заменить “wildmale” (2 раза) и “Дикий самец” на свое):
    <a href="http://www.livejournal.com/userinfo.bml?user=wildmale><img height=17 border=0 src=http://www.livejournal.com/img/userinfo.gif align=absmiddle width=17></a><b><a href=”http://wildmale.livejournal.com”>Дикий самец</a></b>
    Друзья! Скопировав этот код, не забывайте, плиз, менять мои реквизиты на свои. Иначе ваша ссылка будет вести на меня! Надоело читать, что я всю ночь с кем-то пил, с кем-то спал:)
    ВСТАВКА МЕДИА-ФАЙЛОВ:
    Видео, флеш и проч. с некоторых пор в ЖЖ вставляется на раз:
    <lj-embed> код вашей вставки</lj-embed>

    Публикация картинок (в ЖЖ и не только):

    1.Открываешь ljplus.ru - (есть и другие хостинги, но новичку лучше сюда)
    2. Регистрируешься
    3. Жмешь: КАРТИНКИ-ЗАГРУЗИТЬ-ОБЗОР-ЖМИ УЖЕ!
    4.Смотришь на HTML-коды и копируешь “Просто картинка” или “Картинка под катом” в поле поста или коммента
    5. Постишь. Ждешь комментов. Много комментов.

    Чтоб быстро вставить картинку с другого сайта, нужно написать: <img src="">
    затем войти в “Свойства” картинки, скопировать её URL и вставить меж кавычек

    Как сделать, чтобы текст «обтекал» картинку?

    Легко - картинка слева, текст справа:
    добавляем в код картинки:
    align=left hspace=20
    Код картинки примет вид:
    <img src="http:…" align=left hspace=20>
    Помни:
    align=left – картинка слева, текст справа
    align=right - картинка справа, текст слева
    hspace=20 - расстояние между текстом и картинкой 20 пиксел по горизонтали
    vspace=20 - расстояние между текстом и картинкой 20 пиксел по вертикали
    Код картинки с плавным обтеканием текстом справа и снизу (или сверху) может иметь вид:
    <img src="http:…" align=left hspace=20 vspace=15>

    Прекратить обтекание и вернуть текст под картинку можно тэгом <br>
    Закрывать не надо, он работает один.


    <br> выполняет перенос на следующую строку. В блогсервисах и редакторах текста его заменяет нажатие Enter.
    <br><br><br> - три пустые строки.
    Обратен ему по действию тег <nobr>:
    <nobr>Текст (картинки)</nobr> - все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

    Если надо всплывающую подсказку при наведении курсора на картинку, как здесь: - введите в код картинки title="ТЕКСТ"
    (если текст с пробелами, из нескольких слов - кавычки обязательны!)
    Если надо цветную рамку, добавьте в код картинки: - задана красная рамка толщиной 5 пикселей

    Окошечко для вставки кода, типа:
    ВАШ КОД
    получаем так:
    <textarea rows="2" cols="60"> ВАШ КОД </textarea>
    где rows и cols определяют площадь окна

    Можно сделать это окошечко покрасивше:

    <textarea>ВАШ КОД</textarea>

    <textarea>КОДЫ </textarea>

    Кнопка-ссылка на веб-страничку
    Например, на эту:

    <form action="http://htmlka.com" target="_blank" method="get"><input type="submit" value="htmlka"></form>

    Некоторые спецсимволы:

    Спецсимвол Вид в браузере
    &lt; <
    &gt; >
    &amp; &
    &quot; "
    &reg; ®
    &trade;
    &copy; ©
    &hearts;
    &times; ×
    &plusmn; ±
    &asymp;
    &bull;
    &frac12; ½
    &frac34; ¾
    &deg; °
    (градус)
    много символов

    Если вы видите это: ★, ☠, ☭ - есть смысл посмотреть “Прочие” спецсимволы HTML, пока редко включаемые в официальные таблицы спецсимволов

    Фотохостинги
    не все (их много развелось), более-менее знакомые:

    Видеохостинги
    вставка видео аналогична вставке картинок - размещаем видеофайл на видеохостинге и получаем код для вставки в блог:

    Файлообменники
    выложить друзьям файлы mp3, rar, zip и прочие можно через:

    Он-лайн аудио-плееры
    Быстро вставить мр3 с компа и послушать он-лайн - boomp3.com (регистрации не требует, работает и в Opera):


    Другие плееры, с наворотами:
    imeem.com (инструкция)
    ijigg.com (инструкция)
    бонус:
    turbomp3.ru - классный поисковик по mp3-файлам

    Полезно почитать:
    Про счетчики (для ЖЖ и не только)
    Советы по работе с кодами


    В начало ↑

    Анализ сайта htmlka.com

    Удобство для пользователей:

    45 из 100

    Оптимизация загрузки страниц:

    70 из 100

    Время ответ сервера:

    Уменьшите время ответа сервера при открытии сайта с мобильных телефонов, чтобы оно составляло не более 0.2 секунды. Сервер ответил за 2.57 сек.

    Плагины:

    На сайте не используются дополнительные плагины (Micromedia Flash, Microsoft Silverlight, Java), поэтому контент доступен максимальному числу пользователей интернета.

    Тег viewport:

    На сайте область просмотра viewport адаптируется по размеру экрана. Это значит, что страницы сайта правильно отображается на всех мобильных телефонах и планшетах.

    Кеширование статики:

    Кеширование статических файлов включено.

    Сжатие CSS файлов:

    Файлы CSS стилей оптимизированы.

    Сжатие HTML страниц:

    Удалите из HTML кода лишние байты (пробелы, табуляции и переносы строк)

    Сжатие JS файлов:

    JS код оптимизирован.

    Блокируещие файлы:

    Переместите файлы, загрузка которых мешает быстрому отображению страницы как можно ниже. Подгрузка JS или CSS файлов в секции head тормозит загрузку HTML кода страницы. Найдено блокирующих JS файлов: 0, CSS: 1

    Сжатие изображений:

    Изображения оптимизированы.

    Видимый контент:

    Загрузка основного контента оптимизирована.

    Адаптация по ширине:

    Ширина страницы не выходит за область просмотра, прокрутки по горизонтали нет.

    Размеры элементов:

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

    Размеры шрифтов:

    Размер шрифта и высота строк на сайте позволяют удобно читать текстовый контент.

    Вид на телефонах и планшетах:

    Анализ оптимизации для мобильных устройств позволяет узнать, насколько удобен веб-ресурс для просмотра на смартфонах или планшетах. Ключевые элементы данного анализа включают в себя сведения о скорости загрузки сайта на мобильных устройствах, ширине области просмотра его страниц, размере используемых шрифтов, наличии всплывающих окон, корректной работе HTML- и CSS-кода, а также других аспектах адаптации сайта под гаджеты.
    Сегодня, когда ведущие поисковые системы (Google и Яндекс) главную ставку делают на развитии мобильного поиска, владение такой полезной информацией позволяет в разы повысить эффективность оптимизации сайта для мобильных устройств.
    К примеру, зная, что сайт нуждается в увеличении скорости загрузки страницы, его владелец может осуществить ряд необходимых для достижения этой цели мер. Как следствие, ускорение отображения страницы уменьшит показатель отказов, увеличит время пребывания пользователей на сайте, а также улучшит его поведенческие факторы.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *