Параметры для html-кода изображения

Сегодня хочу поговорить о html-коде для изображений, который уже описывал тут в первом пункте. Напомню для тех, кто забыл или не знал.
Для того, чтобы поместить в сообщение или в комментарий изображение, которое уже лежит где-то в интернете, надо написать следующее:
<img src="адрес изображения" />
Где "адрес изображения" - полный адрес (http:// и т.д.)
Параметр "src" - это сокращение от английского "source", что в переводе означает"источник".

Сегодня хочу подробно описать и другие параметры, которые могут входить в этот код.
А поможет мне в этом опять этот цветной квадратик:


1. Задаём размеры изображения.
В коде "img" можно явно задать размеры изображения.
Можно сделать его больше оригинальной картинки:

Или - меньше:

Или сделать из квадратика прямоугольник:

Отвечают за это параметры "width" (ширина) и "height" (высота).
Значения этих параметров может быть
- в пискелях. Например: width="50" height="50"
- в процентах от ширины отведённой для картинки области. Например: width="50%" (на ЛиРу ширина такой области равно 700 пикселям)
Код пишется так:
<img src="http://img1.liveinternet.ru/images/attach/c/1//49/319/49319291_001.png" width="50" height="50" />

2. Задаём альтернативный текст.
За альтернативный текст отвечает параметр "alt" (сокращение от "alternative", переводе с английского "альтернативный").
Сначала объясню, что такое альтернативный текст.
Это - тот текст, который можно видеть, если изображение не загрузилась по какой-то причине.
Например:

В качестве альтерантивного текста можно использовать всё, что угодно. Как правило там пишут краткое описание, размеры в пикселях или в кБайтах.
Код пишется так:
<img src="http://img1.liveinternet.ru/images/attach/c/1//49/319/49319291_001.png" alt="Разноцветный квадратик" />

3. Задаём заголовок изображения.
За заголовок изображения отвечает параметр "title" (в переводе с английского "название", "заголовок").
Заголовок - это текст, который будет "всплывать" при наведении на изображение мышкой.
Например:

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

Код пишется так:
<img src="http://img1.liveinternet.ru/images/attach/c/1//49/319/49319291_001.png" title="Разноцветный квадратик" />

4. Задаём толщину рамки вокруг изображения.
За толщину рамки вокруг изображения отвечает параметр "border" (в переводе с английского "граница").
Рамка имеет цвет текста текущей страницы. Размер рамки задаётся в пискелях.
Вот, например, наш квадратик с рамкой в 3 пикселя (слева) и без неё (справа):

Код пишется так:
<img src="http://img1.liveinternet.ru/images/attach/c/1//49/319/49319291_001.png" border="3" />

5. Задаём выравнивание изображения.
За выравнивание изображения отвечает параметр "align" (в переводе с английского "выравнивание").

Как размещать текст и картинки в одной строке?

Порой при написании сообщения в дневнике надо в одной строке разместить картинку и текст. И вот как сделать это красиво?

В этом нам поможет вот этот атрибут "align" (про него можно прочитать тут в примечании №2) и вот этот квадратик:

Процитирую полностью указанное примечание:
Для выравнивания только картинки, атрибут "align" можно добавить в её код.
Например (выравниваем направо):
<img src="http://img1.liveinternet.ru/images/attach/c/1//49/319/49319291_001.png" align="right" />
Чуть ниже привёл все значения этого атрибута.

1. align="left" - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.

2. align="right" - выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.

3. align="top" или align="texttop" - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

4. align="middle" – выравнивает базовую линию текущей текстовой строки с центром изображения .

5. align="absmiddle" – выравнивает центр текущей текстовой строки с центром изображения

6. align="bottom" и align="baseline" – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.

7. align="absbottom" – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.


Примечание:
Базовая линия (baseline или bottom) - это нижняя часть линии текста, которая проводиться без учёта нижней части (descender) некоторых символов, например, букв типа j, q, y. В отличии от выравнивания по базовой линии, при задании значения absbottom выравнивание выполняется по нижней части самого низкого элемента в строке, т.е. по одному из символов строки, имеющему элементы, лежащие ниже базовой линии. Аналогично обстоит дело с различием между параметрами top и texttop.

Свойства картинки при загрузке в расширенном редакторе.

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

Как создать сообщение с большим количеством картинок?

Внимание! Для создания таких сообщений используется "расширенный редактор".

Как всегда напишу простую инструкцию вида "шаг за шагом". Для большей наглядности прилагаются картинки.
1. Начинаем создавать новое сообщение. Проверяем, что вы делаете это в расширенном редакторе.

Если нет, как на предыдущем рисунке, то переходите в расширенный (нажимаете на соответствующую ссылку). Появляется следующее сообщение:

Оно означает, что если вы что-то уже написали, то всё это (увы и ах!) пропадёт. Безвозвратно. Не забудьте об этом, нажимаю "Ок".

2. Итак, вы перешли в расширенный редактор (если была необходимость) и вы видите примерно это:

А чуть ниже это:

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


3. Нажмите на неё. Появится вот такое окошечко:

Нажмите "Закачать".

4. Появится такое окошко:

Ну, тут я думаю, всё понятно: выбираем нужный файл.

Как вы думаете, что делать дальше? Нажать на "Ок"? Ну, и зачем вы нажали на "Ок"? Я не говорил нажимать на "Ок"! Будьте внимательнее! Надо было нажать на "Послать на сервер".

5. Теперь появится такое окошко:

Как понимаете, выбор дальнейших действий очень небогатый. Нажимаете на "Ок".

6. Появляется вот такое окно:

В правом нижнем углу которого видно левый верхний угол вашей картинки. Но можно посмотреть и её другие части. Что можно сделать в этом экране? Да много всего. Подробнее можно прочесть тут. Можете, например, добавить альтернативный текст. Это что-то типа названия фотографии или картинки. Например, к последней картинке я добавил текст "Последняя картинка".
Можно поставить нужное вам выравнивание.
Или бордюр (как сделал я специально для этого сообщения).
И т.д.
А можно ничего не делать, просто нажать на кнопку "Ок" и сразу перейти к добавлению следующей картинки.

P.S. В конце дам пару советов.
Совет №1
Рекомендую после каждой картинки добавить перевод строки. Иначе все картинки будут пытаться выстроиться не в столбик, а в линейку.
Совет №2
Для добавления перевода строки советую нажимать не просто "Enter", а "Shift+Enter". Потому что в расширенном редакторе Enter добавляет не один перевод строки, а аж два.

Если вдруг что-то не понятно, задавайте вопросы в комментариях.___________________________________________________________________________

Продолжим тему:

Свойства картинки при загрузке в расширенном редакторе.

Сегодня расскажу о свойствах картинки, которые можно менять в расширенном редакторе.

После загрузки картинки в этом окне можно изменить её свойства:

Расскажу о каждом свойстве снизу вверх.

«Альтернативный текст»
Текст записанный здесь будет добавлен в код изображения в атрибут «alt». Например, для нашей картинки «alt="квадратик"».

«Ширина» и «Высота»
Здесь можно задать отображаемую ширину и высоту картинки. Если хотите, чтобы пропорции изображения изменялись, нажмите на замок () . Он "откроется" (). И тогда ширина не будет меняться в зависимости от высоты (и наоборот). Если хотите вернуть первоначальные значение ширины и высоты, нажмите на "кружок" ()

«Бордюр»
«Горизонтальный отступ»
«Вертикальный отступ»
Не вижу смысла описывать эти свойства. Они не работают.

«Выравнивание»
Возможны следующие варианты:

Они меняют значение атрибута «align»
Расшифрую:
"По левому краю": align="left" - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
"Абс понизу": align="absBottom" – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
"Абс посредине": align="absMiddle" – выравнивает центр текущей текстовой строки с центром изображения
"По базовой линии": align="baseline" – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
"Понизу": align="bottom" – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
"Посередине": align="middle" – выравнивает базовую линию текущей текстовой строки с центром изображения .
"По правому краю": align="right" - выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
"Текст наверх": align="textTop" - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
"По верху": align="top" - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

 UpDate
А ещё можно добавить большое количество картинок, добавив пост по почте или используя программу-клиент.

Добавление в дневник сообщений по почте. Как это делать и зачем это нужно? (Часть1)

Для начала рекомендую прочесть официальную инструкцию.
Прочитали?
А теперь я вам расскажу ещё раз,
Как добавлять сообщения через почту.
1. Идёте в "Настройки" - "Изменить пароль, емейл или имя". Там видим примерно такую картинку:

Уберите галочку "Использовать основной пароль" и задайте другой пароль. Не забудьте набрать действующий пароль в самом верхнем поле.
Задав "пароль для добавления сообщений по почте", вы обезопасите себя от того, что кто-то вдруг сможет узнать ваш пароль со всеми вытекающими последствиями. А так кто-то максимум, что сможет - добавить пару-другую сообщений в ваш дневник.
2. Заходим в почтовую программу или на сайт. И пишем письмо на адрес "li@li.ru" (легко запомнить) или "li@i.li.ru" (для пользователей почты на Google). Тема письма будет заголовком вашего поста. Внимание! Надо выбрать формат не "html", а простой или текстовый! Это - важно!
3. Письмо надо начать с волшебной комбинации:
<Ваш ник>:<Пароль (общий или почтовый)># (для добавление сообщения в личный дневник)
или
<Ник сообщества>%<Ваш ник>:<Пароль (общий или почтовый)># (для добавление сообщения в сообщество).
После знака "#" можно поставить букву "t". Это - команда произвести транслитерацию сообщения перед добавлением в дневник.
Кроме того, можно задать уровень доступа:
"z1" - запись закрыта неавторизованным
"z2" - запись открыта только для друзей и списка избранных
"z3" - запись открыта только для списка избранных
"z4" - запись открыта только для хозяина дневника
4. Всё, что вы вы напишите после символа "#" (или "t", или "zX") будет добавлено в сообщение. Помните об этом! Многие бесплатные почтовые сервисы сами добавляют всякую фигню в конец письма. Старайтесь не пользоваться такой почтой для добавления сообщений!
5. К письму можно прикрепить один или несколько файлов. Расширения те же, как и при добавлении через браузер.

Вот собственно и всё.

Теперь расскажу,
Зачем нужна возможность добавлять сообщения по почте?
1. Чтобы дать возможность добавлять сообщения в дневник тем, у кого есть email, но нет интернета (как на работе у некоторых).
2. Чтобы добавлять посты через SMS (если найдётся нормальный гейт SMS на email).
3. Чтобы экономить трафик, используя не браузер, а специальные почтовые программы.

Ну, и собственно самое главное - то ради чего писался этот пост:
Какие дополнительные преимущества даёт возможность добавления сообщений по почте?
1. Можно СРАЗУ добавить в сообщение ЛЮБОЕ количество картинок. Надо только помнить, что сайт отсортирует их по имени.
2. Можно размещать картинки ЛЮБЫХ размеров. Сайт не преобразует картинки присланные по почте. Уже не работает
3. Можно размещать музыку в формате "mp3" практически любого размера. Вам было мало 8-ми Мбайт? А 16 Мбайт на одну песню не хотите? ;) Уже не работает
4. Маленькая хитрость: используя команду "z4" можно сделать любое, что описано в пунктах 1-3. А потом пойти в это сообщение (которое видно только хозяину дневника) и взять оттуда готовые ссылки на картинки и / или музыку.

Вот вроде и всё.
Как писать письма в формате "html" напишу немного попозже.

Самый простой способ вставить в сообщение проигрыватель с музыкой

Как я сегодня описал тут, в пост можно добавить музыку в формате mp3 практически любого размер.
Но то что получается, не очень удобно для читаталей. Появляются две такие кнопки:

Согласитесь - не очень красиво?
Гораздо красивее выглядит такой плеер:

Как вставить в сообщение проигрыватель с музыкой?
1. Прежде всего надо получить прямую ссылку на mp3 файл. Если вы добавили mp3 файл способом, упомянутым выше, то ссылка на него есть под картинкой "скачать":
Например:
Очень погодная песня: "The Cure" - "Real White Show"
"http://liveinternet.ru/click?http://img1.liveinternet.ru/images/attach/c/0/3705/3705086_mail_128394_06__real_snow_white.mp3"
Ссылка практически готова, осталось только удалить вначале адреса "http://liveinternet.ru/click?".
2. Теперь пишем код для плеера.
[flash=400,20,http://postovoj.ru/player.swf?file=http://img1.liveinternet.ru/images/attach/c/0/3705/3705086_mail_128394_06__real_snow_white.mp3&width=400&height=20&backcolor=AAAAAA&frontcolor=000000&link=http://www.aliveinternet.ru/]
Где
"400" - длина окна плеера для ЛиРу (можно сделать длиннее или короче)
"20" - ширина окна плеера для ЛиРу
"http://postovoj.ru/jwplayer.swf" - адрес плеера (спасибо, ppmax!)
"file=" - ссылка на файл mp3
"width=400" - длина окна для плеера (совпадает с длиной окна на ЛиРу)
"height=20" - ширина окна плеера для ЛиРу (совпадает с шириной окна на ЛиРу)
"backcolor=" - цвет фона плеера
"frontcolor=" - цвет символов плеера
"link=http://www.aliveinternet.ru/" - ссылка в плеере (может отсутствовать).
Цвет фона и символов плеера ставится так же, как и в оформлении дневника - 6-ти значными цифрами.

Текст кода пишется слитно, без пробелов!

Как видите всё очень просто.
В результате получаем вот такой плеер с песней:

Спасибо нетман за консультации!

Возникшие вопросы не стесняясь задавайте в комментариях (как обычно).

На главный вопрос: "Зачем это нужно?" - отвечу сейчас.
Так можно вставить любую музыку, загруженную на ЛиРу (и не только на ЛиРу) непосредственно в сообщение как музыку, а не как ссылку на файл и / или ссылку на проигрыватель.
Примеры: новые альбомы "The Cure" и "Guns'n'Roses".

 Часто спрашивают, отвечаю:
Куда загрузить большой mp3 файл и получить прямую ссылку на него?

Куда можно загрузить большой mp3 файл и получить прямую ссылку на него?

Среда, 21 Января 2009 г. 10:12 (ссылка)
Процитировано 153 раз + в цитатник
Прочитало: 0 за час / 18 за сутки / 101 за неделю / 386 за месяц

Очередное дополнение в

Дорогие мои ПЧ!
Сегодня я хочу сделать бесплатную рекламу замечательному сайту (кликабельно!):


Но вы же таки понимаете, что бесплатная реклама от Rost будет вам стоить больше, чем если бы вы ему просто заплатили. А всё так и есть!

Однако вернусь в историю вопроса.
Сначала все жаловались на плеер.
Я научил, как добавить музыку внутрь сообщения.
Потом вы жаловались, что на ЛиРу нельзя загружать большие музыкальные файлы?
Я рассказал, что это можно сделать по почте.
Администрация эту возможность закрыла?
Никаких проблем! Я нашёл выход. Это - сайт Блогода.

И что я так его рекламирую? А на него можно грузить очень большие файлы формата mp3. Я, например, загрузил без всяких проблем файл размером почти в 17 Мбайт.
"И что?" - спросите вы. А то, что можно получить прямую ссылку на этот файл!
А потом сделать плеер (Осторожно! 12 Мбайт!):
"Алиса" - "Старые раны"


Итак, как загрузить музыку на этот сайт?
Простая инструкция, шаг за шагом.
1. Сходить по ссылке и зарегистрироваться на сайте. Там необходимо ввести рабочее мыло. И сайт сам вам выдаст ник (по имени почты). Чудесное изобретение! Хорошо, что потом его можно сменить.
2. Пойти на почту и подтвердить регистрацию.
3. Надо добавить ваш блог. Для этого надо сходить по этой ссылке. Иначе вам не разрешать грузить музыку. Увы! Можно добавить абсолютно любой блог. Даже тот, который вы не ведёте.
4. Дождаться, пока робот подтвердит, что блог действительно ваш.
5. Пойти по ссылке "Добавить музыку" и загрузить музыку.
6. Получить прямую ссылку на файл.
Покажу, как это сделать на примере.
Вот вся моя музыка:
http://rostislav.blogoda.ru/m/
Вот ссылка на песню гр. "Алиса" - "Старые раны" (кстати, посмотрите на размер ;) ):
http://rostislav.blogoda.ru/m/912888059
А вот прямая ссылка ссылка на mp3 файл:
http://rostislav.blogoda.ru/m/912888059.mp3
Как вы видите - ничего сложного: просто добавить ".mp3" к ссылке на песню.

Надеюсь, вы сможете получить адрес ссылки.
Для тех кто не сможет или просто не умеет:
1. Наводитесь указателем мышки на нужную ссылку.
2. Нажимаете правую кнопку мышки.
3. Выбираете "Копировать ярлык" (для IE) или "Копировать адрес ссылки" (для других браузеров).

Вот и всё. Осталось только собрать плеер (см. выше).
Как это сделать? А об этом я уже писал тут: Как вставить в сообщение проигрыватель с музыкой? (ещё один способ)

P.S. Слишком сложно? Ну, тогда шлите SMS-ки. А у меня мобильного нету, мне это удовольствие не доступно...

Лучшие места для размещения файлов в интернете

Пятница, 02 Апреля 2010 г. 10:41 (ссылка)
Процитировано 42 раз + в цитатник
Прочитало: 2 за час / 7 за сутки / 18 за неделю / 75 за месяц
Старые постоянные читатели моего блога в этом посте ничего нового не найдут. Про все эти места для размещения файлов в интернете и получения прямых ссылок на них уже писал ранее. Но сегодня решил собрать всё в одном сообщении. Наверняка кому-то будет полезно.

1. Блогода
Необходима регистрация.
Есть какие-то ограничения.
Типы файлов: "mp3".
Особенности: предоставляет плеер для блогов на ЛиРу и ЖЖ.
Подробное описание

2. YapFiles
Регистрация есть, но она не обязательна.
Есть ограничения на размер файла (50 Мбайт).
Типы файлов: "jpg, png, gif, tiff, psd, mp3, wma, wmv, 3gp, mp4, asf, mov, avi, mpg,flv, swf"
Особенности: позволяет загружать файлы напрямую с YouTube, RuTube, Smotri.com, В Контакте (только для зарегистрированных пользователей!), предоставляет плеер для сторонних сайтов (например, для ЛиРу и ЖЖ).
Подробное описание

3. DropBox
Необходима регистрация.
Есть ограничение по максимальному размеру хранилища (от 2 Гб). При загрузке через веб-интерфейс есть ограничения на размер файла (350 Мбайт!).
Любые типы файлов.
Особенности: можно загружать как через сайт, так и через специальную программу-клиент. Есть возможность синхронизации файлов на разных компьютерах. Нет русского интерфейса (но он особо и не нужен).
Подробное описание
 Теперь создан специальный конструктор для создания такого плеера.

Удобные кнопки расширенного редактора

Прочитать целикомВ свой цитатник или сообщество!

Удобные кнопки расширенного редактора

Пост является продолжением и обобщением записей:

• Расширяемся
• Новые кнопки в расширенном редакторе

Меня удивляет не первый раз, что пользователи (иногда, не такие уж и новенькие) не знают все прелести РАСШИРЕННОГО ТЕКСТОВОГО РЕДАКТОРА. Ведь с его помощью, без использования страшных кодов, можно легко и быстро сделать рамочку, вставить несколько фотографий и красиво разместить их в посте, поменять размер и цвет текста... И многое другое.
На данный момент на ЛиРу есть (1) простой текстовый редактор, который стоит в настройках по умолчанию. Поэтому новички иногда даже не догадываются о нем. И есть два расширенных (визуальных) редактора с кнопочками и другими прелестями — CKEditor и FCKEditor. Каким вы будете пользоваться — дело вкуса.
2 — если выбрать расширенный текстовый редактор, то появится удобная панель с кнопками, при нажатии на которые программа сама напишет специальный код. Его можно посмотреть, если нажать на кнопку «Источник» в левом верхнем углу.

Просто пример использования расширенного редактора. Пишем текст, выделяем нужную его часть мышкой и нажимаем на какую-нибудь кнопку. Многие из них похожи на аналогичные в Word, например. Если вы не знаете ее назначение, можно навести курсор и прочитать всплывающую подсказку.

Например, на картинке ниже после выделения текста нажаты кнопки «В» («жирный») и «А» с разноцветными квадратиками («цвет текста»). Как видите, совсем не нужно знать коды цветов (#FF00FF) или код [b][/b].

Можете прочитать пост: «Самое простое создание рамочки для Ли.ру». А также:

• Использование спецкодов (ВВ-кодов) на Лиру
• Получение HTML-кода для любого цвета (флешка)

А теперь коротко о двух новых кнопках, которые появились в расширенных редакторах на ЛиРу меньше месяца назад, 30 августа этого года.
Ссылка на пользователя ЛиРу и ЖЖ
С помощью кодов [user=имя], [user=имя]имя2[/user] и [ljuser=имя] можно сделать ссылки «с человечками» на пользователей liveinternet.ru и livejournal.com:
bravedefender, Александр и brave-defender
(первая и вторая ссылка ведут на один дневник, но второй код написан так — [user=bravedefender]Александр[/user].

Замечание! Кстати, если в посте или комментарии вы напишите ВВ-код (для примера), то он «сработает» и вместо [user=bravedefender], читатели увидят — bravedefender, Чтобы читатели увидели код, ставьте после открывающей скобочки звездочку: [*user=bravedefender].

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

Далее указываем «Имя пользователя на сайте», «Произвольное имя» и выбираем сервис. Что такое OpenID здесь рассказывать не буду. Если кому-то интересно, у Ростислава есть подробные объяснения.

Нажимаем «ОК» и код автоматически вставляется в поле для ввода текста.


Разделение записи («Подкат», «Тег MORE»)
Большую запись можно разделить на части – видимую в ленте сообщений и остальную, которую можно посмотреть, нажав на специальную ссылку или на заголовок записи.

На ЛиРу за такую ссылку отвечает ВВ-код [more]. То есть, ставим курсор в то место, где хотим запись разделить, и пишем этот тег. У него есть два вида: по умолчанию (появится надпись-ссылка «Читать далее») и с указанием текста (анкора) ссылки: [more] и [more=ваш_текст_ссылки].

Замечание! Вместо текста ссылки, можно вставлять картинки и другие ссылки, но это отдельный разговор. О чем, кстати, уже рассказывалось и не раз).

С помощью новой кнопки код «Читать далее» можно вставлять автоматически: ставим указатель на нужное место сообщения и нажимаем кнопку «Читать далее (cut)»:

Можно сразу нажать «ОК» или ввести свой текст для ссылки.

В результате получаем код в тексте сообщения:

Не правда ли, просто и удобно? Мир полон интересных вещей!
Если мало что понятно то сюда.