Любые изображения, которые вы хотите разместить на своем веб-сайте HTML сначала должен быть загружен в то же место, где вы отправляете HTML-код веб-страницы, независимо от того, размещен ли сайт на веб-сервере, к которому вы обращаетесь FTP или вы пользуетесь услугами веб-хостинга. Если вы пользуетесь услугами веб-хостинга, вы, вероятно, используете форму загрузки, предоставляемую этой службой. Эти формы обычно находятся в разделе администрирования вашей учетной записи хостинга.
Загрузка изображения на хостинг - это только первый шаг. Затем вам нужно добавить тег в HTML, чтобы идентифицировать его.
Загрузка изображений в тот же каталог, что и HTML
Ваши фотографии могут находиться в том же каталоге, что и HTML. Если это так:
- Загрузите изображение в корень вашего сайта.
- Добавьте тег изображения в свой HTML-код, чтобы он указывал на изображение.
- Загрузите HTML-файл в корень вашего сайта.
- Протестируйте файл, открыв страницу в своем браузере.
Тег изображения имеет следующий формат:
Предполагая, что вы загружаете фотографию луны с именем "lunar.jpg", тег изображения принимает следующую форму:
Высота и ширина не являются обязательными, но рекомендуются. Эти значения по умолчанию указаны в пикселях, но также могут быть выражены в процентах:
Тег изображения не требует закрывающего тега.
Если вы ссылаетесь на изображение в другом документе, используйте теги привязки и вложите тег изображения внутрь.
Загрузка изображений в подкаталог
Чаще изображения хранятся в подкаталоге, который обычно называется Изображений. Чтобы указать на изображения в этом каталоге, вам необходимо знать, где они находятся по отношению к корню вашего веб-сайта.
В корне вашего веб-сайта отображается URL-адрес без каких-либо каталогов в конце. Например, для веб-сайта MyWebpage.com корневой каталог имеет следующую форму: http://MyWebpage.com/. Обратите внимание на косую черту в конце. Так обычно указывается корень каталога. Подкаталоги включают косую черту, чтобы показать, где они находятся в структуре каталогов. Пример сайта MyWebpage может иметь структуру:
http://MyWebpage.com/ - корневой каталог
http://MyWebpage.com/products/ - каталог товаров
http://MyWebpage.com/products/documentation/ - каталог документации в каталоге продуктов
http://MyWebpage.com/images/ - каталог изображений
В этом случае, когда вы указываете на свое изображение в каталоге изображений, вы пишете:
Это называется абсолютный путь к вашему имиджу.
Распространенные проблемы с изображениями, которые не отображаются
Поначалу может быть непросто добиться того, чтобы изображения отображались на вашей веб-странице. Две наиболее распространенные причины заключаются в том, что изображение не было загружено туда, куда указывает HTML, или HTML написан неправильно.
Первое, что нужно сделать, это посмотреть, сможете ли вы найти свое изображение в Интернете. У большинства хостинг-провайдеров есть инструменты управления, которые вы можете использовать, чтобы узнать, куда вы загрузили свои изображения. После того, как вы решите, что у вас есть правильный URL-адрес для вашего изображения, введите его в свой браузер. Если изображение появляется, значит, у вас правильное местоположение.
Затем убедитесь, что ваш HTML-код указывает на это изображение. Самый простой способ сделать это - вставить URL изображения который вы только что проверили в атрибуте SRC. Перезагрузите страницу и протестируйте.
Атрибут SRC вашего тега изображения никогда не должен начинаться с C: \ или же файл: Они будут работать, когда вы протестируете свою веб-страницу на своем компьютере, но каждый, кто посетит ваш сайт, увидит битое изображение. Это потому, что C: \ указывает на местоположение на ваш жесткий диск. Поскольку изображение находится на вашем жестком диске, оно отображается, когда вы его просматриваете, но не для других.