Как добавить картинку и не попасть под суд
Прежде чем вы начнете размещать изображения на своем веб-сайте, стоит убедиться, что весь контент уникален. Использование иллюстраций, зарисовок, карикатур и фотографий без согласия правообладателя преследуется по закону.
Наглядным примером нарушения закона об интеллектуальной собственности можно считать историю с магазином из Перми. Тогда предприниматель решил не нанимать личных фотографов, а взял фотографии продукции из интернета, после чего был оштрафован на 820 000 рублей. Естественно, такие случаи на территории России не так часты, но лучше соблюдать законы, если они есть.
Откуда вы берете фотографии, вы действительно ходите фотографировать себя? Если вы производите какую-то продукцию, то в этом случае лучше заплатить хорошему фотографу и снимать все качественно — и пользователю будет приятно смотреть на фотографии, и бизнес будет процветать.
Другой случай, когда нужно сделать несколько фотографий для заполнения контента, фона и прочего. Для этого лучше всего использовать бесплатные или платные фотографии, размещенные на специальных сервисах, фоторесурсах. Часто бесплатных картинок хватает, но если ничего подходящего нет, можно заплатить — может из-за этой картинки конверсия сайта повысится.
Вот список некоторых сервисов, которые размещают как бесплатные, так и платные изображения:
- Скрыть
- Шаттерсток
- Pixabay
- Фрипик
- Pexels
На таких сайтах можно найти всевозможные картинки: от абстрактных иллюстраций до фотографий публичных людей. Помните, что качество изображения напрямую влияет на восприятие контента — чем оно лучше, тем профессиональнее выглядит страница.
Вставить код как код
Чтобы вставить код на сайт, его оборачивают тегами и . Получается следующая конструкция: Вот код
Объясню кратко и конкретно, в этой конструкции тег code сообщает браузеру, что внутри него находится программный код, а pre-тег хранит разрывы строк, табуляции (отступы) строк и пробелы.
Вроде бы все понятно и ничего сложного нет, но проблема в том, что если вы хотите вставить html код или код содержащий символы <, >, &, «, `, то могут возникнуть проблемы — браузер обработает ваш код как html Например, если вы хотите показать код формы с кнопкой, полем ввода и т д в коде, браузер покажет форму, а не код.
Экранирование кода
Чтобы этого не произошло, делается так называемый экранирование кода — это когда упомянутые выше символы заменяются их кодами UTF.
Добавляем картинку в HTML
Мы немного поговорили, теперь приступим к основной части статьи — добавлению изображений в HTML-разметку. Как мы выяснили ранее, мы можем вставить изображение в код и отобразить его на сайте с помощью тега. По умолчанию он включает два атрибута — «src» и «alt». Первый должен содержать путь к изображению, второй — текстовое описание, используемое поисковыми системами. Если вы не хотите, чтобы изображение индексировалось поисковыми системами, то не используйте атрибут «alt».
Давайте посмотрим, как добавить изображение в HTML на примере изображения Unsplash:
- Загрузите желаемое изображение с общих ресурсов и добавьте его в папку img, предварительно созданную в каталоге содержимого сайта. Нет необходимости создавать новую папку, файл можно разместить рядом с HTML-документом. Если вы делаете снимок из другого места, вы также должны учитывать путь.
- Мы регистрируем тег
и добавьте атрибут «src» к тому, у которого скопирован путь. В нашем случае все просто
. Если вы используете снимок из другой папки, вы должны указать полный путь, за которым следует обратная косая черта. - Запустим HTML-файл и убедимся, что все написано правильно. В итоге изображение должно занимать всю площадь — обратите внимание на ползунки справа и снизу. Мы можем пролистать их, чтобы увидеть всю картину.
Если вы не видите изображение при запуске HTML-файла, проверьте правильность пути и имени файла. Расширение может быть не .jpg, а .png или что-то еще.
Чтобы изображение не занимало всю площадь, мы можем использовать для этого специальные атрибуты. Например, ширина — позволяет настроить ширину изображения. В связи с этим изменится и высота, что можно исправить с помощью атрибута height.
Размер указывается как в единицах измерения, так и без них; если вы введете простое число, оно будет автоматически определено в пикселях. Вы также можете указать в em, ex, % и других единицах измерения.
Давайте попробуем немного сжать наше изображение, чтобы оно не размывалось по всей странице. Для этого мы прописываем атрибут width=»500px» внутри тега. Затем обновите страницу и убедитесь, что размер изображения уменьшен до 500×500 (px).
Список атрибутов тега img
Использование тегов в HTML-разметке не обязывает нас использовать только один атрибут — при необходимости мы можем использовать любое их количество. Если используются два одинаковых атрибута, тот, который указан первым, имеет приоритет.
Полный список атрибутов:
- src — основной и необходимый, включая ссылку на изображение. Его можно записать как в файл, расположенный на другом интернет-ресурсе, так и в образ, который находится на домашнем компьютере.
Возможные форматы: JPEG, JPG, PNG, GIF, BMP, ICO, APNG, SVG и Base64.
Читайте также: Как узнать заряд беспроводных наушников (bluetooth) на Android
Дополнительные опции
Иногда требуется не только добавить изображение на страницу, но и сделать его кликабельным или фоновым объектом. В этом нам помогут дополнительные теги и стили CSS:
- Изображение как ссылка на другую страницу:
- Атрибут img позволяет добавлять не только изображения, но и GIF-файлы:
- Гибкий код, появившийся в HTML5 под названием , позволяет изменять изображения с разными расширениями:
Если размер дисплея больше 750 пикселей, отображается одно изображение, если размер больше 265 пикселей, но меньше 750 пикселей, отображается другое изображение.
- Фоновое изображение добавляется к тегу body с помощью стиля CSS «background-image» и других подобных стилей:
Привет, мир!
Эта статья подходит к концу. Сегодня мы разобрали достаточно простые вещи из разметки HTML, которые могут быть полезны не только начинающим веб-разработчикам, но и тем, кто давно знаком с версткой. Не всегда есть возможность запомнить все атрибуты, иногда проще их посмотреть и скопировать в пару кликов. Вот где это руководство поможет. Надеюсь, у вас не осталось вопросов после прочтения.
