Загрузка изображения. Есть много бесплатных хостингов для изображений услуги, таких как веб-альбомы Picasa, Imgur, Flickr или Photobucket. Внимательно прочитайте условия. Некоторые услуги позволят снизить качество изображения, если слишком много людей его просматривают (так как каждый посетитель несет нагрузку на железо хостинга).
Некоторые блог-хостинг услуги позволяют загружать изображения с помощью инструментов администратора блога.
Если у Вас есть платный веб-хостинг, загрузите изображение на свой собственный сайт с помощью FTP. Очень рекомендуем хранить ваши картинки не как в мусорке, а для каждой категории сделать отдельную папку. Тогда их будет гораздо проще найти, при загрузке по FTP.
Если вы хотите использовать изображение с другого сайта, желательно спросить у автора разрешения. Если автор дал разрешение, скачайте изображение, а затем загрузить изображение на хостинг.
Вставка изображений HTML
Откройте файл HTML. Откройте HTML-документ для веб-страницы, на которой будет отображаться изображение.
Если вы пытаетесь вставить изображение на форуме, вы можете ввести код непосредственно в пост. Многие форумы используют визуальный редактор, вместо HTML. Попросите помощи у других форума завсегдатаев, если это не работает.
Тег <IMG> для вставки изображений
Тут всё довольно просто. Найдите место в теле вашего HTML документа, куда вы хотите вставить изображение. Напишите здесь тег <IMG> здесь. Это пустой тег, то есть он стоит особняком, без закрывающего тега. Все, что вам нужно, чтобы отобразить изображение будет идти в двух угловых скобках.
Возможно, вам будет полезно узнать, как сделать картинку ссылкой.
Где найти URL изображения
Посетите веб-страницу, где размещен ваш образ. Щелкните правой кнопкой мыши на изображение и выберите «Копировать расположение.» Вы также можете нажать кнопку «Просмотр изображения», чтобы увидеть полное изображение на странице, а затем скопировать URL в адресной строке.
Перемещение URL в атрибут SRC
Как вы уже знаете, HTML атрибуты идут внутри тега. Атрибут SRC является аббревиатурой «источника», и сообщает браузеру, где искать, чтобы найти изображение. Напишите SRC = «» и вставьте URL изображения между кавычками. Вот пример:
<IMG src = «http://free-wster.ru/название-картинки.jpg»>
Добавление атрибута Alt
Технически ваш HTML код имеет все необходимое, чтобы отобразить картинку, но остался небольшой штрих — вставка атрибута Alt. Этот атрибут говорит браузеру, что текст, который является его значением, будет отображаться, когда изображение не удается загрузить. Что еще более важно, это помогает поисковым системам понять, что изображено на картинке. Следуйте этому примеру, изменение текста в кавычках:
<IMG SRC = «http://free-wester.ru/название-изображения.jpg» Alt = «текст, который описывает изображение»>
Если изображение не имеет значения для содержимого страницы, правильно будет присвоить ему пустой атрибут (Alt = «»).
Сохранение изменений
Сохраните файл HTML на своем сайте. Посетите страницу, которую вы только что отредактировали, или обновите страницу, если она уже открыта. Теперь вы должны увидеть свое изображение. Если это неправильный размер или вы недовольны с ним по другой причине, переходите к следующему разделу.
Изменение размера изображения
Для достижения наилучших результатов, изменить размер изображения, используя бесплатное программное обеспечение для редактирования, а затем загрузить новую версию. Установка ширины и высоты с помощью HTML говорит браузеру уменьшить или увеличить изображение, которое может быть непоследовательным в разных браузерах и (редко) приводят к ошибкам отображения. Если вы хотите быстро и исправный регулировку, используйте следующий формат:
<IMG SRC = «http://free-webr.ru/image_ls.jpg» ALT = «описание картинки» weight = 200 height = 200> (количество пикселей, или более телефонных дружественных «CSS пикселей» в HTML5).
или
<IMG SRC = «http://free-weter.ru/image_ls.jpg» weight = 100% height = 10%> (в процентах от размеров веб-страницы, или в процентах от HTML-элемента, содержащего изображение.)
Если ввести только один атрибут (ширина или высота), браузер должен сохранять ширину: соотношение высоты.
Добавление подсказки (Title)
Название атрибута может быть использовано, чтобы добавить дополнительный комментарий или информацию об изображении. Например, вы можете кредитовать художника здесь. В большинстве случаев, этот текст будет отображаться, когда посетитель наводит курсор на изображение.
<IMG SRC = «http://exple.com/example_ls.jpg» title = «Фотография Дж Годфри»>
