Как правильно указать путь к картинке в html

Как правильно указать путь к картинке в html

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Как прописать путь к файлу, картинке или странице. Основы HTML для начинающих. Урок №13

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

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

Давайте начнем с простого.
Для лучшего понимания, я подготовил маленькие схемки, где стрелочкой укажу путь, а в коде покажу, как это записывается в html.

Внимание: на примере указанно только путь из html-файла до картинки, но аналогично примерам можно будет подставить вместо картинки файл для скачивания или путь к другой странице.

Схема № 1
Путь из файла к картинке

Схема № 2

Путь из файла к папке до картинки

/ — слэш символ используют для открытия папки.

Схема № 3

Путь из папки к картинке

../ — слэш с двумя точка используют для того, чтобы выйти из папки .

Схема № 4

Путь из папки к другой папке до картинки

../ — слэш с двумя точками используют для того, чтобы выйти из папки.
/ — слэш символ используют для открытия папки;

Как правильно указать пути к изображениям на сайте

Здравствуйте дорогие читатели блога BlogGood.ru!
Сегодняшняя статья не большая, но в себе несет полезную информацию, которая поможет правильно указать путь к изображению, когда вы создаете веб-сайт, так как неправильно указанный путь к изображению не выдаст желаемый результат. Не знаю как у вас, но у меня бывали косяки, когда нужно было прописать путь не к папке с файлом, а, наоборот, из папки к файлу. Знаю, тяжело понять мной сказанные слова, вот по этой причине я создал специальные схемки, где стрелкой показываю, откуда нужно указать путь к изображению (это может быть также любой файл).

Схемка № 1

Путь из файла к картинке

Схемка № 2

Путь из файла к папке до картинки

/ — слэш символ используют для открытия папки.

Схемка № 3

Путь из папки к картинке

../ — слэш с двумя точка используют для того, чтобы выйти из папки .

Схемка № 4

Путь из папки к дугой папке до картинки

/ — слэш символ используют для открытия папки;

../ — слэш с двумя точка используют для того, чтобы выйти из папки .

Если вам нужно выйти с двух папок и зайти в папку images к файлу «logo.png», нужно добавить два символа «../». Пример:

Если вам нужно выйти из трех папок и зайти в папку images к файлу «logo.png», нужно добавить три символа «../». Пример:

Вот и все пироги. Естественно, по такому образцу путь можно указывать не только к файлам картинок, но и к другим файлам, например к js , html , css , zip , rar , и т.д.

HTML: Изображения

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

Картинки на странице не существуют сами по себе. Предварительно они должны быть загружены в директорию на сервере или на специальный хостинг картинок. Для вставки картинки на страницу используется непарный тег <img> , у которого два обязательных атрибута: src и alt .

Атрибут src

В атрибуте src указывается путь к изображению. Это тоже ссылка, как и в теге <a> , только теперь не происходит перенаправление пользователя, а браузер загружает изображение по этому пути, если оно существует. Путь к картинке может быть как относительный, так и абсолютный.

Атрибут alt

Что делать, если картинка в данный момент недоступна? В этом случае браузеры показывают маленькую картинку, обозначающую, что изображение недоступно.

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

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

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

Размеры изображения

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

Картинка будет отображена в размере 320×240 пикселей.

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

Задание

Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом W3C для случаев, если картинка недоступна

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Изображение на сайт.

Изображения (картинки) добавляются на сайт при помощи тега &ltimg&gt. Внимание! Данный тег не требует закрытия. Тег &ltimg&gt должен иметь обязательный атрибут src в значении которого указывается путь к картинке. Путь к картинке можно указывать как абсолютный, так и относительный.
Примеры написания тега &ltimg&gt:

Пояснения к коду:
1) Чтобы добавить изображение на страницу сайта, нужно сначала это изображение (картинку) добавить в папку сайта, или как в нашем случае, в папку в которой мы создаем сайт. Как правило, для изображений в основной папке сайта создается отдельная папка. Если ориентироваться на код написанный в примере, то папка с картинками называется image.
2) .jpg — это графический формат нашего файла. Он должен указываться обязательно. Чаще всего используется формат jpg, в html можно так же применять изображения формата png и gif.

Основные атрибуты тега &ltimg&gt.

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

* Атрибуты width и height не являются обязательными. Если их не указывать, то картинка добавится в своем изначальном размере. Например вы загрузили в папку сайта картинку размером 200px в ширину и 100px в высоту. Именно в таком размере она у Вас появится на странице, если не прописать атрибуты width и height.

Можно прописывать только один из этих атрибутов. Например, изначально картинка находящихся в папке нашего сайта имеет размер 200px в ширину и 100px в высоту. Мы указываем только атрибут width (ширину) и даем ему значение 100px (в два раза меньше, чем изначальная ширина картинки). В этом случае и высота картинки автоматически станет в два раза меньше, то есть 50px. Вывод: если задавать только один параметр (высоту или ширину), то второй параметр меняется автоматически, сохраняя при этом пропорции изначального размера картинки.

Еще один важный момент по поводу ширины и высоты. Если изначальные размеры картинки 200px в ширину и 100px в высоту, а Вы прописали атрибуты width=»100px» и height =»100px», то ваша картинка сплющится и станет уродливой. Не забывайте про изначальный размер картинки и сохраняйте пропорции! Самый простой способ сохранить пропорции изначального размера картинки — это указывать только один из параметров, либо width, либо height.

Добавляем картинки на наш сайт.

Для начала создадим в папке нашего сайта (где находится 4 файла) еще одну обычную папку и дадим ей название image. В эту папку мы добавим изображения которые будем вставлять в наши страницы сайта.
Теперь перейдите по этой ссылке и сохраните себе на компьютер картинки с этой страницы.
Сейчас перенесите эти четыре картинки в папку image, которую мы создали.

На данный момент у нас в папке «Сайт» находится 4 html файла и одна папка «image» в которой в свою очередь находятся 4 картинки с именами audi.jpg, bmw.jpg, mercedes.jpg, vsemarki.jpg.
Теперь давайте в каждую из наших страниц html мы добавим соответствующее изображение. Я продемонстрирую Вам получившийся код на примере файла audi.html:

Пояснения к коду:
1) Для того, чтобы между нашими ссылками и картинкой было расстояние, я прописал тег &ltbr&gt 2 раза, это значит, что между нашими ссылками и картинкой будет расстояние в две пустых строки.
2) Затем идет тег &ltimg&gt который создает изображение на нашей странице. В значении атрибута src прописан относительный путь к картинке. Наше изображение находится в папке «image», по этому путь к картинке относительно audi.html будет «image/audi.jpg».
3) В атрибуте alt прописано значение «Автомобиль Audi», это значит, что если у посетителя сайта пропадет связь с интернетом и картинка не успеет загрузиться, то вместо изображения будет надпись «Автомобиль Audi».
4) В атрибуте width прописано значение «300px», это значит, что ширина нашей картинки будет 300px. Изначальный размер картинки audi.jpg загруженной в папку «image» составляет 600px в ширину и 400px в высоту. Задав изображению атрибут width (ширину) со значением «300px», мы уменьшаем размер картинки в два раза относительно изначального размера. Размер изображения выводимого на нашей странице будет 300px в ширину и 200px в высоту.

Сейчас предлагаю Вам самостоятельно вставить изображения в другие наши html файлы, а именно в bmw.html, mercedes.html и в index.html. Это конечно логично, но все же поясню, в index.html мы вставляем картинку vsemarki.jpg.

Если Вы все сделали правильно, то у Вас должны получиться четыре страницы, как на рисунке. Кликая на ссылки, будет меняться страница и соответственно будет меняться фотография и заголовок.

По сути на этом уроке мы уже сделали простой и примитивный сайт. Ничего сложного в этом не было, но если вдруг у вас что-то не получилось, то Вы можете скачать архив с этим сайтом по этой ссылке.