Часть 5 Пишем в свой блог. 4. Вставка картинок. 1. Ссылки на уже размещенные картинки
В верхнее тематическое оглавление
Тематическое оглавление (Уголок блоггера)
предыдущее по теме…………………………………
следующее по теме
предыдущее по другим темам……………
следующее по другим темам
Заведение собственного блога, сайта и электронной почты
Часть 5 Пишем в свой блог. 4. Вставка картинок. 1. Ссылки на уже размещенные картинки
Курс молодого бойца
4. Вставка картинок. Часть 1
3. Вставка картинок в блог
Вставка ссылок на картинки
Здесь мы будем изучать, как вставить к себе в блог изображение картинки, уже размещенной в Интернете, а как выложить туда свою картинку пройдем в следующем разделе.
В учебнике уже обсуждалось, что каждая картинка, даже самая маленькая, выкладывается в Интернет как отдельная страница и имеет свой URL. Чтобы она стала видна, нужно использовать тег
при этом закрывающего тега использовать не надо. В блоге картинку можно вставить в пост, комментарий или профиль.
Самый простой вариант вставки
, при этом картинка обводится рамкой. Ширину этой рамки пожно регулировать параметром border, который задает ее толщину в пикселях. Вариант
задает вставку картинки без рамки.
Необязательные параметры width и height задают ширину и высоту картинки в пикселях. Например, если Вы хотите, чтобы картинка изображалась меньшего размера, чем оригинал, можно уменьшить эти параметры о сравнению с исходными. Считается хорошим тоном задавать размеры картинки даже в том случае, если они остаются неизменными. В этом случае браузер знает размер занимаемой картинкой области и может вначале отобразить текст, а потом начать грузить картинку, то есть можно будет читать страницу с еще недогруженными картинками. Это особенно актуально для пользователей с низкоскоростным доступом.
Еще один полезный достаточно часто употребляемый параметр - alt. Он задает текст подсказки, которая будет отображена при наведении на картинку курсора. Многие пользователи для уменьшения трафика задают отмену отображений картинок. В этом случае буден виден пустой прямоугольник, при наведении курсора на который будет виден данный текст, который подскажет, стоит ли смотреть эту картинку.
В предыдущем разделе разбиралось, как использовать картинку в качестве ссылки. Часто делают так - дают тегом гиперссылку на картинку, при этом используя ее уменьшенное изображение вместо названия ссылки. В этом случае хорошим тоном будет для уменьшенной картинки в качестве значения параметра alt написать “кликабельно”, чтобы, наведя курсор на картинку, можно было понять, что щелчок по ней покажет эту картинку большого размера. Очень хорошим тоном будет, если в подсказке написать также и размер картинки.
Если кроме картинки присутствует еще и текст, то желательно указать, как текст обтекает картинку. Если этого не сделать, то картинка будет вставлена как просто очень большая буква, некрасиво раздвигая строки. Обтекание можно задать параметром align. Наиболее популярные варианты:
align=”left” - картинка слева, текст обтекает ее справа,
align=”right” - картинка справа, текст обтекает ее слева,
Для, казалось бы, самого простого варианта вставки картинки, когда она «разрезает» текст, приходится вставлять в текст таблицу из одной ячейки, а потом в эту ячейку вставлять картинку.
В принципе визуальные редакторы позволяют в диалоговом режиме вставить в блог картинку, но, по-моему, проще разобраться в параметрах вставки и написать нужное «руками», чем понять, что у тебя спрашивают. Опять же, если один раз вставить в пост картинку, то потом можно будет входить в режим редактирования и копировать через буфер обмена код для вставки картинки как заготовку.
Итак, опишем всю процедуру с самого начала. Пусть нам нужно для иллюстрации найти картинку. Запускаем Яндекс, то есть набираем в адресной строке браузера yandex.ru и нажимаем на Enter:
Щелчком выбираем поиск в картинках:
Вводим слова для поиска и нажимаем кнопку «Найти»:
Щелкаем мышкой в наиболее понравившееся изображение:
И получаем его изображение несколько большего размера:
Тут же имеется указание на оригинальный размер картинки в 500 на 647 точек и «вес» в 60Кб. Если эти параметры не показываются (а систем поиска - огромное количество), то можно щелкнуть правой кнопкой мыши в рисунок и щелчком по строке «Свойства» в появившемся контекстном меню вывести эти параметры.
Теперь нужно узнать и запомнить URL картинки. В использующемся браузере для этого достаточно щелкнуть правой кнопкой мыши в картинку, а в появившемся контекстном меню выбрать строку «Копировать ссылку».
Если в используемом Вами браузере такой возможности нет, то можно еще раз щелкнуть левой кнопкой мыши в картинку. В результате будет показана картинка как одна отдельная страница:
Теперь можно выделить и скопировать в буфер обмена содержимое адресной строки (в данном случае - http://www.laverock.ru/4mess/crocodile/1953/1953-03/16.jpg), а потом вставить его из буфера обмена.
Итак, самый простой вариант
, а вариант с маленькой картинкой, обтекаемой текстом справа, с появляющейся подсказкой при наведении на нее курсора и разворачивающейся до полного размера при щелчке, задается как
Другой вопрос, что параметры width и height не уменьшают саму картинку, а уменьшают размеры ее показа. При этом величина трафика не меняется, а качество картинки при сильном уменьшении резко ухудшается. Совсем хороший способ - для превьюшек, то есть сильно уменьшенных картинок для предварительного показа, делать и размещать отдельные маленькие картинки.