Как сделать сайт с картинкой

Добавляем фото в HTML документ

Добавляем фото в HTML-страницу.

Урок №5
Добавляем фото в HTML-документ

В этом уроке, мы рассмотрим способ добавления фотографии на HTML-страницу.

Так как наша статья, из прошлого урока, рассказывала о снежном барсе, то и фотография будет его:

Вам нужно скопировать эту фотографию к себе на Рабочий стол , делается это так:

нажмите правой кнопкой мыши по фотографии
затем по строке: Сохранить изображение как…

Добавляем фото в HTML-документ.

Сохраните фото на Рабочий стол

Сохраняем фотографию из браузера.

На Рабочем столе у вас уже есть файл index.html , теперь там есть и фотография снежного барса, файл irbis.jpg

Для того чтобы вставить фото в HTML-страницу, существует тег , у этого тега есть свойство (атрибут) src=»https://gabdrahimov.ru/html-uchebnik-dobavlyaem-foto» , значением которого выступает адрес фотографии :

Где:
— тег , который указывает что здесь будет фотография,
src=»https://gabdrahimov.ru/html-uchebnik-dobavlyaem-foto» — свойство тега , которое указывает на адрес фотографии,
адрес фотографии — значение свойства src=»https://gabdrahimov.ru/html-uchebnik-dobavlyaem-foto» , адрес фотографии.

Так как файлы index.html и irbis.jpg находятся в одной папке, а именно на Рабочем столе , то для того чтобы указать адрес файла irbis.jpg , достаточно просто написать его имя irbis.jpg

Вставив этот код под заголовком , наш HTML-документ будет выглядеть так:

Страница о снежном барсе

Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.

Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.

Сохраните изменения в Блокноте , нажав на клавиатуре Ctrl + S или Файл > Сохранить .

Откройте файл index.html с помощью браузера, вы должны увидеть следующее.

Как сохранить сайт картинкой?

Задача такая. Сохранить сайт на пк в виде картинки. Гуглил это дело но выпадают только способы сохранения видимой части или pdf файла. Нужна прям картинка jpg с нужным мне разрешением к примеру 1280. Встречались ли вам такие сервисы?

Вопрос задан более трёх лет назад
18612 просмотров

Комментировать

Решения вопроса 1

AleksFront

Aleks Front @AleksFront

Frontend Developer

joxi.ru установить плагин для браузера. Можно делать как область сайта так и всю страничку.

Ответ написан более трёх лет назад

Как добавить картинку на веб-страницу?

Для добавления изображения в документ применяется тег , его атрибут src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG. Также для тега необходимо указать обязательный атрибут alt , он описывает альтернативный текст видимый в процессе загрузки изображения или при отключении картинок в браузере.

альтернативный текст

В XHTML

Если графический файл находится в одной папке с HTML-документом, то в качестве пути достаточно указать только имя файла (пример 1).

Пример 1. Добавление картинки на веб-страницу

HTML5 IE Cr Op Sa Fx

    Мои рисунки

Учтите, что когда используется XHTML или строгий HTML4, то тег допустимо размещать только внутри блочных элементов вроде

или .

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как вставить картинку в HTML

Невозможно представить ни один сайт без визуальной составляющей, в часть которой входят различные изображения, помогающие пользователю с восприятием информации. В HTML-разметке картинки добавляются с помощью специального тега . Помимо основной опции, он также содержит в себе множество атрибутов, позволяющих редактировать изображения по критериям. Например, устанавливать ширину картинки или задавать отступы снизу и сверху.

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

Как добавить картинку и не попасть под суд

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

Хорошим примером нарушения закона об интеллектуальной собственности можно считать историю одного магазина из Перми . Тогда предприниматель решил не нанимать личных фотографов, а взял снимки изделий из интернета, после чего был оштрафован на 820 000 рублей. Естественно, что такие случаи на территории России не столь частые, но лучше соблюдать законы, коль они есть.

Откуда же брать фотографии, неужели самому идти снимать? Если вы выпускаете какую-либо продукцию, то в таком случае лучше заплатить хорошему фотографу и все качественно отснять — и пользователю приятно будет смотреть на снимки, и бизнес будет процветать.

Другой случай, когда нужно взять какие-нибудь фотографии для наполнения контента, бэкграунда и прочего. Для этого лучше всего использовать бесплатные или платные фотографии, которые размещены на специальных сервисах, фотостоках. Зачастую хватает бесплатных картинок, но если нет ничего подходящего, то можно и заплатить — быть может, из-за этой фотографии увеличится конверсия сайта.

Бесплатные фотографии unsplash

Вот список некоторых сервисов, на которых размещены как бесплатные, так и платные изображения:

На таких площадках вы сможете найти любые фотографии: от абстрактных иллюстраций до снимков публичных людей. Помните, что качество картинки напрямую влияет на восприятие контента – чем оно лучше, тем профессиональнее выглядит страница сайта.

Год хостинга в подарок при покупке лицензии 1С-Битрикс

Закажите лицензию 1С-Битрикс, легко размещайте картинки в визуальном редакторе и не платите за хостинг весь год.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Добавляем картинку в HTML

Немного поговорили, теперь давайте приступим к основной части статьи – добавлению изображений в разметку HTML. Как мы уже выяснили ранее, вставить картинку в код и отобразить ее на сайте мы можем с помощью тега . В него по умолчанию входят два атрибута – «src» и «alt». Первый должен содержать в себе путь к изображению, второй – текстовое описание, которое используется поисковыми системами. Если вы не хотите, чтобы фотография индексировалась поисковиками, то не используйте атрибут «alt».

Шаблон: , где photo – папка, размещенная рядом с основным файлом HTML. Если бы изображение было размещено в другом месте, то до него бы полностью указывался путь, например, .

Давайте рассмотрим, как добавить картинку в HTML на примере фотографии из Unsplash:

Скачиваем нужную фотографию из стоков и добавляем ее в папку img, заранее созданную в директории с содержимым сайта. Необязательно создавать новую папку, файл можно разместить рядом с HTML-документом. Если вы берет картинку из другого места, то также учитывайте ее путь.
Прописываем тег и добавляем в него атрибут «src» со скопированным путем. В нашем случае получается просто . При использовании снимка из другой папки, потребовалось бы указать полный путь с обратным слэшем.
Запустим HTML-файл и убедимся, что все было прописано правильно. В результате фото должно занимать всю область – обратите внимание на ползунки, расположенные справа и снизу. Мы можем их прокрутить, чтобы просмотреть изображение полностью.

Если при запуске HTML-файла вы не увидели изображения, убедитесь, правильно ли прописан путь, а также название файла. Кроме того, расширение может быть не .jpg, а .png или любое другое.

Для того чтобы изображение не занимало всю площадь, мы можем воспользоваться специальными для этого атрибутами. Например, width — позволяет отрегулировать ширину изображения. Пропорционально ей будет также изменяться высота, которую можно подправить атрибутом height.

Размер указывается как в единицах измерения, так и без; если указать простое число, то оно автоматически определится в пикселях. Также можно указать в em, ex, % и прочих единицах.

Попробуем немного сжать нашу фотографию, чтобы она не расплывалась по всей территории страницы. Для этого пропишем внутри тега атрибут width=”500px”. После этого обновим страницу и убедимся, что изображение было сокращено до размера 500х500(px).

Как изменить размер изображения в html

Это был один из атрибутов, который дал возможность немного поиграться с тегом . Атрибуты позволяют сделать вид страницы наиболее презентабельным и гибким. Значение всегда заключается в двойные кавычки, рекомендуется указывать в нижнем регистре. Существует более 10 различных свойств для изображений, необходимых в разных ситуациях. Далее мы подробно разберем каждый из атрибутов, относящихся к тегу .

Список атрибутов тега img

Использование тегов в HTML-разметке не принуждает использовать лишь один атрибут – при необходимости мы можем воспользоваться их любым количеством. Если используется два одинаковых атрибута, то приоритет будет за тем, что указан первым.

Полный список атрибутов:

src — базовый и обязательный, включающий в себя ссылку на изображение. Она может быть прописана как до файла, размещенного на другом веб-ресурсе, так и до изображения, которое находится на домашнем компьютере.

Возможные форматы: JPEG, JPG, PNG, GIF, BMP, ICO, APNG, SVG и Base64.

 или

alt — устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке. Помимо этого, данный атрибут также необходим для поисковых систем – таким образом они индексируют изображение и выводят пользователю подходящий результат. Может содержать русскую раскладку.