Оформление текста

Перечёркнутый текст: ТЕКСТ

Подчёркнутый текст: ТЕКСТ

Полужирный текст: ТЕКСТ

Полужирный крупный: ТЕКСТ

Курсивный текст: ТЕКСТ

Маленький текст: текст

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

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


Выравнивание текста по правому краю поста:

Выравнивание текста по всей ширине поста:

Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):

Бегущая строка:
бегущая, как олень, строка

 

Оформление ссылок
Как вставить ссылку на веб-страницу:

Как сделать, чтобы картинка была ссылкой на веб-страницу:

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

 

Изображения

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

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

Как сделать, чтобы текст «обтекал» картинку?
Легко – картинка слева, текст справа:
добавляем в код картинки:
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> – три пустые строки.

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

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

Вставляется меж кодов картинок, есс-но

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

Если надо цветную рамку , добавьте в код картинки: – задана красная рамка толщиной 5 пикселей

Чтоб быстро вставить картинку с другого сайта, вставьте в пост:

затем войдите в «Свойства» картинки на этом сайте, скопируйте ее URL и вставьте в код меж кавычек

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

 

Вставка аудио

1. Обзор сервисов.

  • muzicons.com – не закачивает файлы с компа, вставка аудио по прямым ссылкам на файл или через встроенный поисковик tagoo.ru, выглядит так:

  • http://video.yandex.ru требует регистрации на Яндексе. Закачать аудиофайл и получить код плеера, например:

  • www.jetune.ru – в полной мере работает только для юзеров России. Чтоб выложить трек, надо на сайте найти (без регистрации) или закачать своего исполнителя (с регистрацией), кликнуть на конкретный трек и получить код плеера:

  • prostopleer.com – загружай или ищи на сайте музыку и получай код плеера:


    Некоторые файлообменники имеют аудиоплееры для mp3-файлов

    Типичные представители сетевой фауны:

  • divshare.com Регистрируемся. Жмем «Upload new file», загружаем трек. Клик на «dashboard» (вверху), появится файл. На него правой кнопкой мыши, выбираем «share», копируем «Embed Playlist» и вставляем:

  • filehoster.ru сделал покрасивше:

  • box.net после закачки файла при клике на shared выдаст ссылку типа www.box.net/shared/zf1uk007vy

    2. Учимся "ловить рыбу"

    Поняв принцип, можно забыть о подобных сервисах, которые часто закрываются, удаляют файлы, меняют условия и т.д.
    Код для вставки музыки в блог состоит из двух главных компонентов – флеш-плеер (файл *.swf в виде http://../player.swf) и аудиофайл (в виде http://../song.mp3) – остальное HTML, то бишь буковки.
    Выглядит примерно так:
    <object data="http://../player.swf" type="application/x-shockwave-flash" width="240" height="64">

    <param name="movie" value="http://../player.swf">

    <param name="menu" value="false">

    <param name="scale" value="noscale">

    <param name="flashvars" value="src=http://../song.mp3&amp;autostart=no">

    </object>
    Я залил сюда флеш-плеер и получил:
    http://htmler.com/wp-content/uploads/2009/06/webplayer.swf
    затем загрузил трек:
    http://htmler.com/wp-content/uploads/2009/06/08-caravan.mp3
    Вставил эти ссылки в код выше:

    Полный код безобразия:

    Если в этот код вставите свой mp3 файл вида http://…./song.mp3 ("прямая ссылка"), он будет играть вашу музыку:).

  • width и height определят размеры плеера.
    Если назначить height=16, получим:

    Чтоб исключить сбой кодировок, избегайте кириллицы и пробелов в названиях треков.
    Переименовывайте файлы перед закачкой их на хостинг.
    Примеры:
    моя песня.mp3 (нельзя в плеер, будет глюк)
    moya_pesnya.mp3 (можно юзать)

  • Можно вставлять плейлисты:

    – навигация по трекам

  • Делаем такой плеер с плейлистом:
    1. Загружаем на хостинг аудиофайлы и составляем такой список треков:
    <file src="sound1.mp3"/>
    <file src="sound2.mp3"/>
    <file src="sound3.mp3"/>
    2. Копируем образец кода плейлиста ОТСЮДА
    (всё, что под чертой)
    3. Открываем на компе программу Блокнот, вставляем туда этот код.
    4. Вместо примера списка треков вставляем свой заготовленный список треков.
    5. Жмем «Файл-Сохранить как». Называем файл playlist.xml и сохраняем.
    (назвать можно как угодно, главное – на латинице и .xml)
    6. Файл playlist.xml грузим на хостинг, ссылку на него ставим в код плеера там, где в плеере с одним треком стоит ссылка на mp3-файл: http://site/song.mp3
    7. Вставляем полученный код плеера в блог.

  • Другой плеер, «складной»:

    Код копируем, ставим ссылку на свой mp3 вместо ВАШ_ФАЙЛ и слушаем:

  • Компакт-плеер:

    Cтавим ссылку на свой mp3 вместо ВАШ_ФАЙЛ:
  • Плеер от htmlka.com:

    Ставим свой mp3-файл вместо ВАШ_ФАЙЛ:


    Хостинги, выдающие "прямые" ссылки на файл:
  • DropBox — быстрая регистрация, 2 ГБ. Устанавливаем с сайта программу-клиент. При установке указываем, где будет папка «My Dropbox» (по умолчанию в винде идет в «Мои документы»). В эту папку помещаем файлы, которые будут сами закачиваться на хостинг. Если заносим файл в подпапку «Public» – получаем прямую ссылку на него (на файл правой кнопкой и «Copy public link»).
    Подробная инструкция к Dropbox
  • filekeeper.org – без регистрации до 100Мб, прямая ссылка на трек, файлы хранятся, пока к ним есть хотя бы одно обращение в течение 30 дней
  • www.fileden.com – регистрация, прямые ссылки на файл (залить и на "Direct URL")

 

Разное

Скрыть пост (фрагмент поста) от Яндекса:

Не работает в Google.


Примеры изменения формы курсора для отдельного поста или фрагмента поста. Подведите курсор к «Ваш текст»:
Ваш текст

Ваш текст





Делаем кнопку-ссылку на страницу (с картинкой):

Код такой кнопки:


Графические диаграммы средствами html:
 
  25% – Firefox
 
  70% – IE
 
  5% – Opera

 
 
   – 35% того и 65% этого


Любой пароль, скрытый за звездочками, открывается с помощью javascript-кода:
исполненного в адресной строке браузера (IE, FF, Opera, Netscape) на странице авторизации.

 

Таблица редких «прочих» спецсимволов HTML

&#9742;

&#9743;

&#9754;

&#9755;

&#9756;

&#9757;

&#9758;

&#9759;

&#9728;

&#9729;

&#9730;

&#9731;

&#9732;

&#9733;

&#9734;

&#9735;

&#9760;

&#9761;

&#9762;

&#9763;

&#9764;

&#9765;

&#9766;

&#9767;

&#9768;

&#9769;

&#9770;

ϑ

&#9771;

&#9772;

&#9773;

&#9774;

&#9775;

&#9784;

&#9786;

&#9787;

&#9788;

&#9789;

&#9790;

&#9791;

&#9792;

&#9793;

&#9794;

&#9795;

&#9796;

&#9797;

&#9798;

&#9799;

&#9800;

&#9801;

&#9802;

&#9803;

&#9804;

&#9805;

&#9806;

&#9807;

&#9808;

&#9809;

&#9810;

&#9811;

&#9812;

&#9813;

&#9814;

&#9815;

&#9816;

&#9817;

&#9818;

&#9819;

&#9820;

&#9821;

&#9822;

&#9723;

&#9824;

&#9725;

&#9726;

&#9727;

&#9828;

&#9829;

&#9830;

&#9831;

&#9832;

&#9833;

&#9834;

&#9355;

&#9836;

&#9837;

&#9838;

&#9839;

&#9840;

&#9841;

&#9842;

&#10017;

&#21325;

&#8623;

&#9988;

&#9992;

Примечание: эти спецсимволы отражаются корректно только в Windows Vista, Windows 7 и Mac OS X, поскольку зависят от шрифтов ОС.
Иногда влияет и тип браузера.
Список с цветными «бульками»:

• Позиция 1
• Позиция 2
• Позиция 3

Делается так:

<font color=red>&bull;</font> Позиция 1

<font color=blue>&bull;</font> Позиция 2

<font color=green>&bull;</font> Позиция 3


Список с маленькими картинками:
fg Позиция 1
f Позиция 2
g Позиция 3
f Позиция 4

Код:

<dl>
<dd><img src=URL-картинки align=absmiddle> Позиция 1</dd>
<dd><img src=URL-картинки align=absmiddle> Позиция 2</dd>
<dd><img src=URL-картинки align=absmiddle> Позиция 3</dd>
<dd><img src=URL-картинки align=absmiddle> Позиция 4</dd>
</dl>

URL «шарика»: http://img90.imageshack.us/img90/6603/33609040px4.gif


Навигационная кнопка «Назад»:


Аналогичная ссылка «назад»: НАЗАД

счетчик посещений

Hosted by uCoz