Как вставить изображение в HTML код сайта?

Совсем недавно я рассказал вам, как создать сайт в интернете бесплатно. А сейчас, мне бы хотелось поговорить вот о чем. На каждом сайте присутствует графика, используются различные изображения. Сегодня речь пойдет о том, как вставить картинку в html код на своем сайте.

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

Представим, что у вас есть какой-то код HTML, например такой:

Теперь приступим к разбору полетов.

  • Любая страница сайта начинается с начального элемента html и заканчивается им.
  • Внутри элемента html содержаться другие элементы, такие как служебная информация (head) и тело документа (body).
  • В теле документа содержится все элементы страницы: картинки, таблицы, текст, скрипты различные и много чего еще...

Для того, чтобы вставить изображение на сайт в нужном месте страницы вы просто указываете ссылку на нужное изображение с помощью элемента IMG. Этот элемент содержит ссылку на изображение и подпись к изображению, которая не отображается на странице, а только при наведении курсора мыши на это изображение. Работает почти во всех браузерах корректно. И так, вот так выглядит вставка изображения в сайт:

Там, где написано «ссылка» вы должны указать адрес до вашего изображение, т.е. где оно у вас лежит. Обычно изображения хранят на сервере в корневой папке сайта с специально отведенной для изображений папке, например images. Также не забудьте, что каждое изображение имеет свое расширение: .jpg, .gif, .bmp, .png и т.д. Поэтому указывайте папку, имя изображения и расширение, в котором было сохранено изображение. Если вы все сделаете правильно, то изображение появиться у вас на сайте после обновления окна браузера.

Следующие атрибуты элемента img это атрибут ALT и TITLE, которые добавляют описание вашему изображению, что очень полезно делать, если желаете, чтобы ваша картинка попала в поиск и выводилась по нужному запросу. Поэтому давайте в будущем вы будите указывать описание.

После того, как ваш сайт будет проиндексирован поисковыми роботами ваше изображение попадет в общую коллекцию изображений интернета и будет доступна для просмотра другим обывателям сети Интернет. Такой интересный оптимизаторский прием для сайта. Поэтому всегда подписывайте свои изображения.

В итоге это может выглядеть вот так:

Теперь хочу услышать от вас, уважаемые читатели, какие есть замечания, дополнения к посту? Была ли тема вам понятна и смогли ли вы решить свою проблему с помощью этого поста?

Жду ваших комментариев!

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 67 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Зачем нужен хостинг для сайта
  • Какой хостинг выбрать: платный или бесплатный?
  • Как выбрать хороший хостинг для сайта
  • Выбираем дешевый и качественный хостинг!
  • Конструктор сайтов Юкоз — обзор возможностей
  • Ucoz — создать сайт стало проще!
  • Перед тем как создать блог или сайт
  • Секреты размещения сайта в интернете! Разбираемся, что к чему!
  • Научиться создавать сайты очень просто! Бесплатно! Самому! Сейчас!
  • Программы необходимые каждому блогеру
Читатели оставили 15 комментариев к этой статье:
  • Оксана27.04.2013 в 12:30

    Спасибо за урок! но у меня почему то не отображается картинка после вставки в код. Появляется "рамочка" -пустое поле где картинка должна быть... что я делаю не так?

  • Олег Астанин
    Олег Астанин29.04.2013 в 12:52

    Оксана, а вы правильно прописали УРЛ до изображения? И где у вас находятся файлы index.html и само изображение? На компьютере или на сервере хостинга?

  • Дмитрий10.05.2013 в 11:15

    Большое спасибо за урок , мне помог Ваш метод вставки картинки в html код сайта . Просто я искал и мне предложили несколько методов вставки картинки , Ваш метод самый эффективный и получилось с первого раза . Ещё раз большое спасибо !!!

  • Олег Астанин
    Олег Астанин10.05.2013 в 23:29

    Пожалуйста!

  • Гульнара04.06.2013 в 17:48

    Как убрать белые горизонтальные полосы на месте стыков картинки? Полосы эти появляются после вставки DOCTYPE.

  • Олег Астанин
    Олег Астанин04.06.2013 в 23:05

    Не пойму про какие полосы во говорите? может скриншот скините?

  • Дмитрий04.12.2014 в 15:58

    Спасибо за науку!

    А научите, пожалуйста, как скрыть (закомментировать) картинку с сайта без удаления вышеописанного кода. Какие «кавычки» не пробовал, картинка не «убирается».

  • Олег Астанин
    Олег Астанин05.12.2014 в 00:50

    Делается все очень просто! С помощью этих кавычек: <!-- <img src="images.jpg"> -->

  • Артем02.02.2015 в 12:07

    Спасибо за уроки. Я хочу поместить на свой сайт картинку, которую я сделал в фотошопе, как это сделать? Я знаю как редактировать что-то на сайте через ftp, но если я прописываю путь т.е. как Вы подсказываете Окасане — Оксана, а вы правильно прописали УРЛ до изображения? То этот путь после отключения компа должен же прерваться и связи же не будет?

  • ЛЮБА23.11.2015 в 17:03

    ЗДРАВСТВУЙТЕ! Подскажите, пожалуйста, чайнику, как избавиться от стрелок, крестиков расположенных в квадрате. Они выделяют скопированный из интернета текст даже не нажимая на эти значки. .Доставляют кучу неприятностей: захватывают и уничтожают соседние тексты, не предназначенные для удаления. Помогите, совсем замучилась!.

  • Олег Астанин
    Олег Астанин24.11.2015 в 01:37

    Любовь, если честно я не совсем понимаю о чем вы. Можете как то на скриншоте показать проблему или на видео записать?

  • Кирилл10.04.2016 в 02:02

    Спасибо за эту статью никак не мог нормально вставить изображение, то криво , то не видно, то ошибки, еще раз спасибо.

  • Софья12.04.2016 в 01:56

    Спасибо за интересный урок! Стало намного проще разобраться, и, наконец, понять принцип этой работы!!! ;) В действительности оказалось полегче, чем я думала))

  • Олег Астанин
    Олег Астанин25.06.2016 в 23:20

    Спасибо вам, что пишите свои отзывы!

  • Назиз12.07.2016 в 17:10

    Олег, доброго времени суток! Работаю фотографом, очень нужная информация для меня. Спасибо.

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

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter