Найти в Дзене

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

Ни один серьезный сайт не может обойтись без визуального контента, потому что иногда лучше один раз увидеть, чем сто раз услышать. Вам следует запомнить что просто так добавлять картинки на сайт нельзя. Они должны быть: Избегайте копирайта! Все используемые картинки должны быть либо Вашими, либо взяты с фотостоков. В противном случае Вы рискуете нарваться на неприятности. Переходим к практическому занятию. В корневой папке Вашего сайта создаем подпапку images, в которую мы будем помещать все изображения для сайта. Открываем главную страницу и заходим в панель просмотра кода. Для добавления изображения будем использовать тег <img> (причем в данном случае закрывающий тег </img> нам не понадобится) и атрибуты src, alt и title. Пример: Несколько слов об атрибутах. src - с помощью этого атрибута мы прописываем адрес изображения. Его можно считать самым главным. alt - этот атрибут очень полезен когда картинка отображается некорректно. А точнее говоря совсем не отображается: То есть самой кар

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

Вам следует запомнить что просто так добавлять картинки на сайт нельзя. Они должны быть:

  • уместными;
  • информационными;
  • легкоузнаваемыми;
  • соответствовать цветовой палитре сайта.

Избегайте копирайта! Все используемые картинки должны быть либо Вашими, либо взяты с фотостоков. В противном случае Вы рискуете нарваться на неприятности.

Переходим к практическому занятию.

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

Открываем главную страницу и заходим в панель просмотра кода. Для добавления изображения будем использовать тег <img> (причем в данном случае закрывающий тег </img> нам не понадобится) и атрибуты src, alt и title.

Пример:

То что вводим
То что вводим
То что получаем
То что получаем

Несколько слов об атрибутах.

src - с помощью этого атрибута мы прописываем адрес изображения. Его можно считать самым главным.

alt - этот атрибут очень полезен когда картинка отображается некорректно. А точнее говоря совсем не отображается:

-4

То есть самой картинки мы не видим, но можем прочитать описание к ней.

title - используется для отображения дополнительной информации об изображении при наведении на него курсора мыши.

Под конец хочется отметить что в процессе работы с различными изображениями Вам рано или поздно придется менять их размер. Сделать это можно с помощью атрибутов height (высота) и width (ширина). В данном случае они помещены сразу после атрибута title.

Пример:

То что вводим
То что вводим
То что получаем
То что получаем

Перед нами тоже самое изображение, но гораздо меньшего размера + дополнительная информация о нем.

Надеюсь все получилось и Вы остались довольны результатом) А я в свою очередь предлагаю подписаться на канал и следить за выходом новых интересных публикаций)