Как прописать путь к картинке в html: Добавление рисунка | htmlbook.ru

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

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

Схемка № 1

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

Схемка № 2

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

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

Схемка № 3

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

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

Схемка № 4

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

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

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

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

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

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

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

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

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

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

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

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

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

Схема № 2

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

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

Схема № 3

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

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

Схема № 4

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

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

Для добавления изображения на веб-страницу используется тег <img> , атрибут src которого определяет адрес графического файла. Общий синтаксис добавления изображения будет следующий.

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется sample. gif и хранится в папке images корня сайта.

• Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg , мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
• Если перед адресом добавляется упоминание протокола http ( http:// ), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
• Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 10.1 показан файл index.html, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index. html будет ../images/pic.gif . Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif .

Рис. 10.1. Пример размещения файлов

• Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 10.2, относительный путь к рисунку pic.gif из файла index.html будет images/pic.gif .

Рис. 10.2. Пример размещения файлов

В примере 10.1 показано несколько способов добавления рисунка на веб-страницу.

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

Навигация по статье:

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

Что такое абсолютный путь к файлу?

Если говорить простым языком, то это полный путь к файлу, который содержит в себе название сайта, протокол http или https, название папок, внутри которых он находится, а так же его имя и расширение.

Например, для картинки image.png, которая лежит в папке images на вашем хостинге абсолютный путь будет выглядеть так:

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

Посмотреть этот путь можно в адресной строке:

Как определить абсолютный путь к файлу у себя на хостинге?

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

В этом случае нам нужно:

1. Найти папку, в которой лежат файлы сайта.
Например, в случае с CMS WordPress в ней должны находиться папки «wp-admin», «wp-content» и так далее.

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

Особенности абсолютного пути:

• указанный адрес будет работать при его использовании на других сайтах или страницах
• при смене домена основного сайта или при переходе на https адреса в этом пути тоже нужно будет менять.

Что такое относительный путь к файлу?

С эти немного сложнее. Относительный путь к файлу указывается относительно расположения того файла в коде которого он указывается. Давайте разберём на конкретных примерах.

Пример 1.
Допустим, мы вставляем картинку в index.html, который лежит в папке с доменом. Там же в папке с доменом находится папка images с нашей картинкой.

Относительный путь будет выглядеть так:

Пример 2.
Нам нужно указать относительный путь к картинке в файле style.css, который лежит в папке CSS. При этом сама картинка находится не папке images.

В этом случае если мы просто напишем /images/image.png, как в предыдущем примере, то это не сработает!

Браузер будет воспринимать эту запись так: «Зайди в папку images, которая лежит рядом с файлом style.css и возьми там файл image.png». Проблема в том, что в рядом с style.css нет никакой папки images! Она находится на уровень выше.

В таком случае мы должны как бы сказать браузеру: «Сначала выйди из папки CSS, в которой лежит style.css в котором мы указываем наш абсолютный путь, а потом зайди в папку images и возьми там файл image.png»

На языке кода команда «выйди из папки» будет выглядеть так: ../

В итоге получим:

Пример 3.

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

Особенности относительного пути:

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

Определение пути к файлу в WordPress и других CMS

При работе с движками для отображения определённых файлов на сайте вам нужно указывать пути к ним или в админке или коде темы или шаблона.

Если вы вносите правки в коде, то указывать относительный путь вы должны относительно файла index.php который лежит в папке с доменом.

Получается, что вы вносите правки в файле шаблона, но путь должны указывать как будто бы вы работаете с index.php в корне сайта. Такова особенность работы движков.

Если вы указываете адрес внутри скрипта или CSS файла, то путь указывается относительно этого файла.

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

Как писать путь к картинке в html

Как писать путь к картинке в html

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

Как прописать путь к файлу, картинке или странице.

Основы HTML для начинающих. Урок №13

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

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

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

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

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

Схема № 2

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

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

Схема № 3

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

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

Схема № 4

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

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

Картинки в HTML

Поверьте, это совсем не сложно. Для вставки картинок используется непарный тэг <img> с атрибутом src. Выглядит это так <img src=»http://shad-55.narod.ru/html/content/my%20foto. jpg»>. Где «my foto.jpg»> это ваша картинка. Для того чтобы было меньше путаницы, я рекомендую в каталоге, где расположена стартовая страница, создавать папки по назначению. Например, для картинок создайте папку image и складывайте туда все изображения, которые будут использоваться у вас на сайте. Тогда для того, чтобы вставить картинку на страницу, вы должны указать путь к этому изображению. Если у вас оно расположена в папке image то нужно прописать так: <img src=»http://shad-55.narod.ru/html/content/image/my%20foto.jpg»>. Если папка расположена на уровень вверх, то путь к ней будет выглядеть следующим образом: <img src=»http://shad-55.narod.ru/html/image/my%20foto.jpg»>. Ну, а сейчас выведем изображение чайника.

<img src=»http://shad-55.narod.ru/html/content/image/2_buy.jpg»>

Тэг <img> также имеет атрибут выравнивания align со значениями left-слева, right-справа. Это означает, что при использовании значения left атрибута align картинка будет прижата к левому краю, а текст будет обтекать картинку справа и, наоборот, при использовании значения right.

Существует еще несколько атрибутов, которые располагают текст в определенную позицию относительно картинки.

Теперь поэкспериментируем с картинками. Возьмем предыдущий пример или создадим новый. Если Вы будете создавать новый документ, не забудьте написать «шапку» из обязательных тэгов. Итак:

.
<body bgcolor=»#E6E6FA» text=»Blue»>
<h2 align=»center»><font color=»#7FFF00″> Проба пера </font></h2>
<hr size=2 width=100% color=»#9400D3″>
<img src=»http://shad-55.narod.ru/image/d0d6a385.jpg»> <!—Здесь указываете путь к вашей картинке—>
<p align=»left»> <font face=»arial» size=»+4″>Футбол</font> <font face=»times new roman» size=»+2″> — это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, <font color=»#000000″>кроме рук</font>. Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию <font color=»#FFD700″>желтой</font> или даже <font color=»#FF3300″>красной</font> карточкой.</p>
.

<!—Если вы посмотрите на результат, то он вам может не понравиться, потому что текст прижат к рисунку, да и картинка может быть великовата.—>

Теперь добавим в тэг <img> размеры картинки и расстояние от нее до текста.

<p>&nbsp;</p>
<img src=»http://shad-55.narod.ru/image/d0d6a385.jpg» hspace=»30″ vspace=»5″ <!—Синим цветом указаны изменения—>
<p align=»left»> <font face=»arial» size=»+4″>Футбол</font> <font face=»times new roman» size=»+2″> — это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, <font color=»#000000″>кроме рук</font>. Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию <font color=»#FFD700″>желтой</font> или даже <font color=»#FF3300″>красной</font> карточкой.</p>

Для того, чтобы расположить картинку в центре, используйте тэги выравнивания в тэге <p></p>, т.к. они действуют не только на текст, но и на изображения.

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

Да, чуть не забыл. Картинку можно сделать фоном странички. Для этого используется атрибут background с указанием пути к картинке в тэге <body>. Выглядеть это будет так:

<body background=»image/fon.jpg»>,

где image/fon.jpg — путь к картинке.

Наряду со вставкой картинки в виде фона используйте атрибут bgcolor=»#хххххх» для задания цвета фона. Если не задавать цвет фона, то по умолчанию фон будет иметь белый цвет. И если Вы используете белый цвет шрифта, а картинку пользователь не захочет загружать, то он не увидит вашего текста. А так, если картинка не будет, по каким-либо причинам, загружена, то текст все равно будет виден.

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

В следующей главе мы рассмотрим использование ссылок в HTML-документе.

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

Cursor: url, правильно задать путь к файлу
Есть иконка, которая доступна в браузере по url http://domein/img/icon/icon.png Если прописать в.

Как задать определенное положение тексту или картинке
Всем привет нужно конкретный размер сделать как на фото как вообще делать в дивах? а текст br?

Подскажите, как правильно заполнять теги в картинке
В вордпресе. Чем отличается подпись от описания и атрибута альт? Если везде выберу одинаковую.

Путь к картинке
Здравствуйте, такая ситуация я делаю не большую админ панель к магазину, ссылки на картинку в базе.

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

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

Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:

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

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

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

Вставить рисунок в HTML-страницу можно с помощью тега <img> . Делается это примерно так:

<img src=»https://info-master.su/programming/web/html/%D0%9F%D1%83%D1%82%D1%8C%20%D0%BA%20%D1%84%D0%B0%D0%B9%D0%BB%D1%83%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8″>

Атрибут src является обязательным для тега <img> . Значением этого атрибута должен быть путь к файлу рисунка. Этот путь может быть абсолютным или относительным. Парного тега в HTML у тега <img> нет.

<img src=»images-in-html.jpg»>

В этом примере мы загружаем и отображаем на странице файл images-in-html.jpg , который находится в той же папке, что и сама страница. То есть здесь используется относительный путь. Ниже показан тот самый рисунок:

Если вы не очень хорошо понимаете, что такое путь к файлу, то почитайте об этом здесь.

Размер рисунка в HTML

Тег <img> имеет довольно много атрибутов, с помощью которых можно изменять некоторые параметры рисунка, такие как размер.

Для изменения размера используются атрибуты width (ширина изображения) и height (высота изображения). Эти атрибуты не являются обязательными. Если они не используются, то картинка отображается в своих настоящих размерах. Пример использования:

<img src=»https://info-master.su/programming/web/html/images-in-html. jpg» width=»200″ height=»200″>

Посмотрите, как будет выглядеть этот рисунок в браузере:

Обратите внимание, что рисунок стал искажённым, потому что мы изменили размеры НЕПРОПОРЦИОНАЛЬНО.

Чтобы при изменении размера (уменьшении или увеличении) рисунок не искажался, есть три способа:

1. Рассчитать значения ширины и высоты.
2. Использовать только один атрибут размера — ширину или высоту.
3. Использовать относительное значение атрибута.

Первый способ использовать не советую, так как это пустая трата времени. Но если хотите, то можете пересчитать ширину и высоту. Например, если ваш рисунок имеет размер 640х480, а вы хотите, чтобы в браузере он был меньше в два раза, то надо просто поделить оба значения на 2. Тогда получим 320х240. Эти значения и можно указать в атрибутах width и height .

Пример второго способа:

<img src=»https://info-master.su/programming/web/html/images-in-html.jpg»>

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

Пример третьего способа:

<img src=»https://info-master.su/programming/web/html/images-in-html.jpg» width color:red;»>10%»>

Как видите, здесь мы указываем размер не в пикселях, а в процентах. И указываем тоже только один размер — ширину (высота также будет вычислена автоматически). В этом примере размер рисунка в браузере будет в десять раз меньше, чем настоящий размер рисунка.

Подпись к рисунку в HTML

Чтобы сделать подпись к рисунку, можно просто вывести нужный текст под рисунком. Например, так:

Чтобы подпись как-то отличалась от остального текста, можно выделить её, например, курсивом и/или другим шрифтом.

Также у тега <img> есть два атрибута, которые так или иначе являются подписями.

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

И атрибут title . Значение этого атрибута (текст) отображается в браузере в виде подсказки, когда пользователь наводит мышь на рисунок. Пример:

Разумеется, это далеко не всё, что должен знать о рисунках веб-разработчик. И я ещё буду возвращаться к этому вопросу в следующих статьях. Ну а если хотите знать всё и прямо сейчас, то изучите курс о вёрстке сайтов.

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

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

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

Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:

• были информативными
• соответствовали цветовой гамме вашего сайта
• были уместны

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

Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус — список нескольких фотобанков , где можно скачать огромное количество качественных красивых материалов совершенно бесплатно &#128578;

Форматы изображений

Во Всемирной паутине в основном используются 3 вида изображений:

gif (Graphics Interchange Format — формат для обмена изображениями)

это первый формат, который начал использоваться в интернете. Плюсы такого формата — наличие анимации и маленький размер, страница загружается быстро. К тому же он поддерживает прозрачность. Недостаток — используется только 256 цветов (собственно потому и размер маленький), т.е. его нельзя использовать для полноцветных изображений.

jpeg , он же jpg (Joint Photographic Experts Group — Объединенная группа экспертов по фотографии — так называется организация-разработчик)

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

png (Portable Network Graphics — Портативная сетевая графика. Произносится так же как ping, т.е. [ pɪŋ ])

этот формат изначально разрабатывался для веба, т.е. изображение обычно мало «весит» и не тормозит страницу при загрузке. Этот формат создан на замену устаревшего gif, но в отличие от него, не поддерживает анимацию. Png-8 , как и gif, использует всего 256 цветов. Формат png-24 поддерживает 16 млн цветов, правда и вес уже немаленький. Png-32 содержит столько же цветов, как и png-24, и плюс к этому позволяет получить изображение с прозрачным фоном , причем можно регулировать степень прозрачности. При уменьшении размеров png не происходит потери в качестве цвета.

Подытожим

gif — для анимации

jpeg — для фотографий

png — для иконок, кнопок, фонов, логотипов, скриншотов, чертежей, текстов, фотографий с прозрачным фоном

Вставка изображения в html-файл

Для добавления картинки на страницу используется тег <img> (от англ. image — изображение, картинка). Это одиночный тег, ему не нужен закрывающий. Внутри этого тега содержатся атрибуты.

Атрибут src (от англ. source — источник) указывает путь к файлу (место, где лежит изображение). Если картинка лежит у вас на компьютере (пока сайт только в процессе разработки) или на вашем сервере — используйте относительную ссылку. Если имидж из сети, тогда нужна абсолютная ссылка. Как это сделать читайте в статье «Ссылки».

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

Итак, чтобы подключить изображение к вашей веб-странице, нужно написать такой код:

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

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

Схемка № 1

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

Схемка № 2

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

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

Схемка № 3

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

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

Схемка № 4

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

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

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

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

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

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

Как указать путь к картинке в css

<rmcreative>

Данный вопрос, в вариациях «как прописать путь к картинке в CSS», «как прописать путь к CSS в HTML» и других, часто возникает у начинающих веб-разработчиков. Даже довольно опытные разработчики частенько путаются с абсолютными путями в CSS.

Абсолютные пути

С абсолютными всё просто. Работают они одинаково как в CSS, так и в HTML. Если адрес сайта у нас, например, http://rmcreative.ru/ , то /img/miimage.jpg будет указывать на http://rmcreative.ru/img/miimage.jpg какая бы страница не была открыта у пользователя.

Относительные пути в HTML

Относительные пути, если на странице нет тега base , отсчитываются относительно текущего пути страницы. Например, если мы находимся на странице http://rmcreative.ru/blog/post/tsitaty-prepodavateley , то ссылка вида <a href=»test.zip»>test</a> будет указывать на http://rmcreative.ru/blog/post/test.zip .

Если используется тег base , то ссылки отсчитываются от его href :

Здесь ссылка test будет указывать на http://rmcreative.ru/test.zip .

Относительные пути в CSS

В CSS относительный путь отсчитывается не от пути страницы, а от пути к самому CSS.

Например, для файла http://rmcreative.ru/css/test.css

браузер будет пытаться подгрузить картинку по адресу http://rmcreative. ru/css/test.png .

Комментарии RSS по email OK

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

Иногда уже просто достают с одинаковыми вопросами. Я на одном форуме веду раздел про программирование, так вот большинство новоприбывших (думаю, не меньше 60-80%) не пробуют написать свои программки на Pascal до того, как лезть на форуме. Видимо, эти люди никогда сами думать не пробовали. И ладно бы спрашивали про какие-нибудь частные случаи, так ведь спрашивают даже реализации популярных алгоримтов вроде нахождения наибольшего общего делителя.

Но такие люди тоже нужны, иначе на чьем фоне хорошо смотрелись бы профессионалы? 😉

Я думаю, что помогать надо. Со ссылками на документацию. Все мы когда-то были достаточно беспомощными, достаточно хорошенько вспомнить.

Еще бы про ./ написать, раз уж про такие азы написано.

Что лучше использовать: тег base или же абсолютные ссылки (с хостом сайта)?. IE к примеру добавляет содержимое тега base к ссылке с анкором (#foo старен http://site.com#foo).

Ekstazi, так это то же, что и без ./ . Или это было про всякие .. ?

Костег, от ситуации зависит.

Просто и понятно, может продолжая тему сделаете пару постов «как сделать пути на пхп посредством глобального массива»

По опыту знаю, что лучше прописывать base. Иначе могут начаться танцы с браузерами.

Ну мои эксперименты показали что тег влияет только на ссылки вида ./index.html и index.html. А вот /index.html ведет к корню сайта который задается другими методами.

Не хочу говорить плохо про умников плохо отзывающихся о новичках. Но не смотря на тонны причитанного остается один вопрос (и вероятно именно он и беспокоит всех новичков). Возможно ли прописать путь для той же картинки, если страница и картинка находятся в разных папках. Т.е. нужен абсолютный путь, а использовать его нет смысла, так как все это добро в localhost. Но зато есть острая необходимость просмотра на другом компе, а localhost уже другой. Тащишь ты всю эту неподъемную ношу на флешке в отвисающем от груза кармане, а в итоге ни одной картинки, ни страницы кроме стартовой ни видать. Лупает новичек глазенками, мол как же так я неделями не спал, а где же? А только на родном компе, или вываливай все страницы в одну папку даже если их аграх/ количество — так выходит? Или все таки есть способ?

новичек, в абсолютном пути не обязательно указывать имя хоста. Достаточно начать его с / .

Работа с картинками в HTML и CSS

Этот урок посвящен теме как вставить картинку в HTML и какие стили CSS наиболее часто применяются для изображений. Здесь мы рассмотрим все основные вопросы касаемо вставки и отображения картинки в веб-документе. А также рассмотрим причины почему у некоторых пользователей не отображается картинка в HTML.

Содержание:

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

В HTML изображения в графическом формате (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) добавляются на веб-страницу с помощью тега <img> через атрибут src, в котором указывается адрес картинки. То есть атрибут src является обязательным для элемента <img>. Без него этот тег не используют.

Ещё одним обязательным атрибутом элемента <img> является alt. Этот атрибут используют на тот случай, если по какой-либо причине, браузер не сможет отобразить картинку. При его использовании, в месте отображения картинки на экран будет выведен указанный вами текст.

В таблице ниже представлены атрибуты тега <img>, которые используются наиболее часто. Но на самом деле их намного больше, ведь для элемента <img> доступны все универсальные атрибуты и события.

Таблица. Основные атрибуты элемента <img>

Здесь w — дескриптор ширины, который представляет собой целое положительное число, за которым следует w.

HTML картинка. Примеры

Как добавить картинку в HTML?

Как уже говорилось, чтобы добавить картинку в HTML нужно использовать тег <img> и его обязательные атрибуты src и alt. Также, поскольку тег <img> – это строчный элемент, то его рекомендуется располагать внутри какого-нибудь блочного элемента. Например, <p> или <div>.

Как изменить размер картинки в HTML?

Чтобы изменить размер изображения используют атрибуты height (задаёт высоту картинки) и width (задаёт ширину картинки). Эти атрибуты можно указывать как вместе, так и по отдельности.

Если нужно пропорционально сжать картинку, то указывается только один атрибут (height, или width). Если же нужно чётко обозначить и высоту, и ширину картинки, то используют оба атрибута одновременно (height и width).

Как указать путь к файлу изображения в HTML?

Адрес ссылки на файл изображения может быть абсолютным и относительным.

Абсолютный путь показывает точное местонахождение файла, а относительный показывает путь к файлу относительно какой-либо «отправной точки».

Примеры:

https://site/img/D-Nik-Webmaster. jpg – это абсолютный адрес файла D-Nik-Webmaster.jpg так как путь к нему указан полностью.

/img/D-Nik-Webmaster.jpg – это относительный путь от корневого каталога. Знак «/» в самом начале указывает на то, что это корень каталога и выше по директории подниматься нельзя. Если файл index.html (HTML-документ) находится в каталоге site, то этот каталог будет корневым («отправной точкой»).

../img/D-Nik-Webmaster.jpg – это относительный путь от документа. Две точки в самом начале означают, что вам нужно подняться на один каталог вверх. Таким образом, если смотреть на наш пример, то нужно подняться на 1 директорию вверх, найти там папку img, а в ней найти файл D-Nik-Webmaster.jpg.

../../D-Nik-Webmaster.jpg – указывает путь к файлу, но только с поднятием на 2 директории вверх.

Как сделать картинку ссылкой в HTML

Для того, чтобы сделать картинку ссылкой в HTML нужно содержимое элемента <img> обрамить в тег <a>.

Картинка CSS. Примеры

Использование CSS (каскадных таблиц стилей) даёт возможность более гибко, более удобно и эффективно, настраивать отображение картинок на веб-странице. Поэтому даже для того, чтобы задать ширину и высоту изображений многие веб-мастера часто используют именно каскадные таблицы стилей.

Давайте рассмотрим несколько самых распространённых примеров оформления изображений на веб-странице с помощью CSS.

Как поставить на фон картинку в HTML?

Чтобы установить изображение в качестве фона нужно задать селектору body свойство background, или background-image.

Как установить размер картинки в CSS

Чтобы задать размер картинки в CSS нужно использовать свойства width (ширина) и height (высота). Например:

1. Давайте создадим новый класс imgsize.
2. Для элементов этого класса пропишем свойство width равным 350px.
3. Присвоим картинке созданный ранее класс imgsize.

Таким образом, ширина картинки будет равна 350px, а высота уменьшится пропорционально. Если нужно установить фиксированную ширину и высоту картинки, то можно добавить свойство height (Например, height:350px).

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

Адаптивность картинки – это возможность изображения одинаково отображаться на разных типах устройств с различными характеристиками. Например, на компьютерах с разным разрешением экрана монитора, ноутбуках с разным разрешением дисплея, планшетах, телефонах и т.д.

Самый простой способ сделать одинаковое отображение картинки на всех устройствах – это использовать следующие правила:

Как разместить текст на картинке

Как выровнять картинку по центру веб-страницы

Способ №1

Самый простой способ выровнять картинку по центру – это присвоить ей класс, сделать картинку блоком и задать ей автоматическое выравнивание с правой и левой части.

Способ №2

Помещаем картинку в блок <div> или параграф <p>, присваиваем класс этому блоку (или параграфу), и устанавливаем правило выравнивание текста по центру.

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

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

Таким образом, чтобы сделать обтекание картинки текстом слева или справа нужно прописать следующие правила:

Как выстроить картинки в ряд

Чтобы выстроить картинки по горизонтали в один ряд, нужно поместить их в блок <div> или параграф <p>, присвоить класс этому блоку (или параграфу), и установить следующие правила:

Весь код будет выглядеть так:

Как изменить размер картинки при наведении на неё курсора мыши

Изображение можно масштабировать (изменять его размер), вращать, сдвигать, или наклонять с помощью свойства transform. А для регулирования скорости анимации используется свойство transition.

Например, если нам нужно, чтобы картинка увеличивалась (или уменьшалась) при наведении на неё курсора мыши, то нужно создать класс, присвоить его изображению и прописать следующие правила CSS:

Если нужно увеличить изображение, не увеличивая при этом размеры картинки, то картинку надо поместить в блок <div>. Для этого блока задать свойство display со значением inline-block, чтобы <div> стал размером с изображение; а также задать свойство overflow со значением hidden, чтобы всё пряталось за пределами блока <div>.

Почему не отображается картинка в HTML?

Причин почему картинка не отображается на веб-странице может быть несколько:

Картинки CSS/HTML

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

Как задать фоновое изображение в CSS

Для того, чтобы задать фоновое изображение нужно использовать свойство background для того элемента, которому нужно задать фон картинкой. Фон можно сделать повторяющимся, либо нет.

Пример

Затемнение изображения с помощью CSS

Такой способ затемнения изображения можно использовать для элементов сайт, а так же можно оформить для фона сайта, либо для отдельных разделов сайта.

Пример

Как добавить картинку на сайт html с размерами

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

Как указать путь к картинке в css

Как написать путь к картинке в css

Начинающий программист , уже который раз , пытаясь поставить картинку на background утыкаюсь мордой в путь до нее, не понимаю как его построить, если в ссылках брузера и пути к файлу на пк всё понятно, файл один за другим через «/» , то здесь я не понимаю от чего отталкиваться. Объясните как построить путь , чтобы картинка отображалась.(underwater.png) Скриншоты с расположением файлов ниже:.

Укажите относительный путь, иными словами «путь относительно расположения css файла» у вас следующая структура проекта www — корень проекта. css1 и img — дочерние каталоги. Картинка находится в папке img. Т.к. css файл находится в папке css1

1. Начинаем перемещение относительно расположения style.css, полный путь к которому «/www/css1/style.css», иными словами, мы сейчас находимся в «/www/css1/»
2. «../» Переходим из каталога css1 в родительский каталог — www;
3. «../img/» Из родительского каталога переходим в каталог img;
4. «. ./img/underwater.png» Указываем нужный файл.

Почитайте подробней про относительные и абсолютные пути, и про то, как используются ключи путей «/», «..», «./», и у вас все встанет на свои места.

Просто перенесите файл со стилями в папку www и указывайте путь так:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2022.9.1.42957

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Работа с картинками в HTML и CSS

Этот урок посвящен теме как вставить картинку в HTML и какие стили CSS наиболее часто применяются для изображений. Здесь мы рассмотрим все основные вопросы касаемо вставки и отображения картинки в веб-документе. А также рассмотрим причины почему у некоторых пользователей не отображается картинка в HTML.

Содержание:

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

В HTML изображения в графическом формате (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) добавляются на веб-страницу с помощью тега <img> через атрибут src, в котором указывается адрес картинки. То есть атрибут src является обязательным для элемента <img>. Без него этот тег не используют.

Ещё одним обязательным атрибутом элемента <img> является alt. Этот атрибут используют на тот случай, если по какой-либо причине, браузер не сможет отобразить картинку. При его использовании, в месте отображения картинки на экран будет выведен указанный вами текст.

В таблице ниже представлены атрибуты тега <img>, которые используются наиболее часто. Но на самом деле их намного больше, ведь для элемента <img> доступны все универсальные атрибуты и события.

Таблица.

Основные атрибуты элемента <img>

Здесь w — дескриптор ширины, который представляет собой целое положительное число, за которым следует w.

HTML картинка. Примеры

Как добавить картинку в HTML?

Как уже говорилось, чтобы добавить картинку в HTML нужно использовать тег <img> и его обязательные атрибуты src и alt. Также, поскольку тег <img> – это строчный элемент, то его рекомендуется располагать внутри какого-нибудь блочного элемента. Например, <p> или <div>.

Как изменить размер картинки в HTML?

Чтобы изменить размер изображения используют атрибуты height (задаёт высоту картинки) и width (задаёт ширину картинки). Эти атрибуты можно указывать как вместе, так и по отдельности.

Если нужно пропорционально сжать картинку, то указывается только один атрибут (height, или width). Если же нужно чётко обозначить и высоту, и ширину картинки, то используют оба атрибута одновременно (height и width).

Как указать путь к файлу изображения в HTML?

Адрес ссылки на файл изображения может быть абсолютным и относительным.

Абсолютный путь показывает точное местонахождение файла, а относительный показывает путь к файлу относительно какой-либо «отправной точки».

Примеры:

https://site/img/D-Nik-Webmaster.jpg – это абсолютный адрес файла D-Nik-Webmaster.jpg так как путь к нему указан полностью.

/img/D-Nik-Webmaster.jpg – это относительный путь от корневого каталога. Знак «/» в самом начале указывает на то, что это корень каталога и выше по директории подниматься нельзя. Если файл index.html (HTML-документ) находится в каталоге site, то этот каталог будет корневым («отправной точкой»).

../img/D-Nik-Webmaster.jpg – это относительный путь от документа. Две точки в самом начале означают, что вам нужно подняться на один каталог вверх. Таким образом, если смотреть на наш пример, то нужно подняться на 1 директорию вверх, найти там папку img, а в ней найти файл D-Nik-Webmaster. jpg.

../../D-Nik-Webmaster.jpg – указывает путь к файлу, но только с поднятием на 2 директории вверх.

Как сделать картинку ссылкой в HTML

Для того, чтобы сделать картинку ссылкой в HTML нужно содержимое элемента <img> обрамить в тег <a>.

Картинка CSS. Примеры

Использование CSS (каскадных таблиц стилей) даёт возможность более гибко, более удобно и эффективно, настраивать отображение картинок на веб-странице. Поэтому даже для того, чтобы задать ширину и высоту изображений многие веб-мастера часто используют именно каскадные таблицы стилей.

Давайте рассмотрим несколько самых распространённых примеров оформления изображений на веб-странице с помощью CSS.

Как поставить на фон картинку в HTML?

Чтобы установить изображение в качестве фона нужно задать селектору body свойство background, или background-image.

Как установить размер картинки в CSS

Чтобы задать размер картинки в CSS нужно использовать свойства width (ширина) и height (высота). Например:

1. Давайте создадим новый класс imgsize.
2. Для элементов этого класса пропишем свойство width равным 350px.
3. Присвоим картинке созданный ранее класс imgsize.

Таким образом, ширина картинки будет равна 350px, а высота уменьшится пропорционально. Если нужно установить фиксированную ширину и высоту картинки, то можно добавить свойство height (Например, height:350px).

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

Адаптивность картинки – это возможность изображения одинаково отображаться на разных типах устройств с различными характеристиками. Например, на компьютерах с разным разрешением экрана монитора, ноутбуках с разным разрешением дисплея, планшетах, телефонах и т.д.

Самый простой способ сделать одинаковое отображение картинки на всех устройствах – это использовать следующие правила:

Как разместить текст на картинке

Как выровнять картинку по центру веб-страницы

Способ №1

Самый простой способ выровнять картинку по центру – это присвоить ей класс, сделать картинку блоком и задать ей автоматическое выравнивание с правой и левой части.

Способ №2

Помещаем картинку в блок <div> или параграф <p>, присваиваем класс этому блоку (или параграфу), и устанавливаем правило выравнивание текста по центру.

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

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

Таким образом, чтобы сделать обтекание картинки текстом слева или справа нужно прописать следующие правила:

Как выстроить картинки в ряд

Чтобы выстроить картинки по горизонтали в один ряд, нужно поместить их в блок <div> или параграф <p>, присвоить класс этому блоку (или параграфу), и установить следующие правила:

Весь код будет выглядеть так:

Как изменить размер картинки при наведении на неё курсора мыши

Изображение можно масштабировать (изменять его размер), вращать, сдвигать, или наклонять с помощью свойства transform. А для регулирования скорости анимации используется свойство transition.

Например, если нам нужно, чтобы картинка увеличивалась (или уменьшалась) при наведении на неё курсора мыши, то нужно создать класс, присвоить его изображению и прописать следующие правила CSS:

Если нужно увеличить изображение, не увеличивая при этом размеры картинки, то картинку надо поместить в блок <div>. Для этого блока задать свойство display со значением inline-block, чтобы <div> стал размером с изображение; а также задать свойство overflow со значением hidden, чтобы всё пряталось за пределами блока <div>.

Почему не отображается картинка в HTML?

Причин почему картинка не отображается на веб-странице может быть несколько:

Картинки CSS/HTML

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

Как задать фоновое изображение в CSS

Для того, чтобы задать фоновое изображение нужно использовать свойство background для того элемента, которому нужно задать фон картинкой. Фон можно сделать повторяющимся, либо нет.

Пример

Затемнение изображения с помощью CSS

Такой способ затемнения изображения можно использовать для элементов сайт, а так же можно оформить для фона сайта, либо для отдельных разделов сайта.

Пример

Как добавить картинку на сайт html с размерами

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

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

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

Схемка № 1

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

Схемка № 2

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

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

Схемка № 3

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

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

Схемка № 4

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

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

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

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

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

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

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

Содержание:

Новости Joomla

Новости e-Commerce от Phoca Cart

Давно не писали о новостях связанных с проектом Phoca Cart.

Quantum Manager v1.6.1

Бесплатный файловый менеджер для Joomla! с помощью которого Вы сможете загружать, редактировать и вставлять в редактор (а так же и поля) файлы. Есть возможность переопределить вызовы стандартного файлового менеджера.

Релизы Joomla 4 Beta 5 и Joomla 3.10 Alpha 3

Проект Joomla с радостью сообщает о доступности Joomla 4 Beta 5 и третьей альфа версии Joomla 3.10.

Относительные и абсолютные пути в HTML (веб-адреса)

Абсолютные пути

В данном случае всё очень просто, мы указываем прямой путь к файлу, лежащему на другом домене. Возможно указание сокращенного пути через использование двух слешей в начале без явного указания http или https и сервер сам подставит нужный протокол (расширение) согласно настройке сервера. Важно заметить, что данный вид является необходимым для перехода между сайтами:

Относительно корня сайта

В данном случае браузер берёт домен сайта и к нему подставляет указанную ссылку. В данном случае получится http://school-php.com/css/style.css. В случае с http, https не надо париться, так как будет браться в том виде, в котором сейчас открыта страница, то есть при http будет http. Так же очень удобно для переноса некого функционала между разными сайтами или же перенос сайта с одного домена на другой не трогая код. Приоритетный способ указания путей к страницам и файлам.

Относительно данной страницы

Менее востребованный способ, так как он берёт нынешнюю страницу и к её пути дописывает новый адрес. То есть находясь на странице http://school-php.com/trick ссылка на файл будет иметь вид: http://school-php.com/trick/css/style.css . Практически невозможен в использовании в случаях, когда мы используем ЧПУ.

Использование тега base

В данном случае вместо стандартной подставки домена к относительному пути будет подставлен путь из base. То есть мы получим файл, располагающийся:

Относительные и абсолютные пути в PHP

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

Итого, открываем страницу page1.php, а в адресной строке записано page2.php, а всё дело в том, что браузер СНАЧАЛА загрузил страницу page1.php, а потом получил информацию с переадресацией и ЗАГРУЗИЛ страницу вторую page2.php. В данном случае переадресация была на стороне клиента (браузера), а значит используем правила относящиеся к HTML (веб-адрес).

Абсолютный путь в PHP

Абсолютный путь в PHP воспринимается как абсолютный путь от директории, в которой установлен веб-сервер. Данный путь можно получить из:

Если взять в пример этот сервер, то его путь: /home/school/public_html/schoolphp , значит для того, чтобы указать полный путь к фотографии ‘/photo/img1.jpg’, необходимо указать такой путь:

Хочу заметить, что сайт может располагаться в поддиректории, то есть для:

может быть крайне затруднительно использование DOCUMENT_ROOT, ведь форум (как внешний скрипт) ещё не знает где будет размещаться на сайте. Справиться с данной проблемой можно несколькими способами, давайте парочку перечислим:

1) Создать в виде поддомена страницу.

2) Прописать абсолютный путь в конфиге в config.php , то есть:

Теперь можно без угрызения совести привязать весь сайт на Core::$ROOT, и если случайным образом необходимо поменять путь до подключаемого файла, то можно переопределить значение Core::$ROOT;

Относительно стартового файла (базового)

Во многих системах index.php есть единая точка входа, то есть открывается index.php, а уже из него подключаются другие файлы.

В данном случае будет подключен allpages.php по пути: /home/school/public_html/schoolphp/modules/allpages.php . Данный способ удобен тем, что если прописать include в файле allpages.php: include ‘./modules/module/page.php’;, то искать его будет всё равно относительно точки входа, а именно index.php:

Достаточно удобная реализация учесть, что мы чётко знаем структуру нашего приложения относительно корневого index. php. Даже если мы вызываем любой другой файл, а не index.php, то работать пути будут абсолютно точно так же. Вызвали мы dir.php , значит относительно файла dir.php и будут браться пути!

Что ещё надо знать

Я не мог не напомнить тем, кто забыл или же подсказать тем, кто не знает, что можно вернуться не только вглубь директорий, но и вверх (на папки назад), и синтаксис их достаточно прост:

В данном случае будет браться директория данного файла или корневого index.php, и возвращаться на 1 папку назад, там же будет искаться файл ‘file.php’.

DOCUMENT_ROOT не единственный вариант получить корневой путь сайта. Давайте взглянем в мануал: «Директория корня документов, в которой выполняется текущий скрипт, в точности та, которая указана в конфигурационном файле сервера.» . Это значит, что в случаях, если в конфигурационном файле будет некорректно написан путь, то весь сайт не будет работать. Что делать? Можно писать админам и владельцам хостинга, на котором размещается сервер с надеждой, что они исправят свои недочёты. Или искать стабильную альтернативу, которой является __DIR__ , это абсолютный путь к данному файлу, где запущен код файлу. Допустим файл конфигурации у нас лежит в папке config, и чтобы используя __DIR__ не возвращаться каждый раз на 1 папку наверх записью __DIR__’/../’ мы смело можем __DIR__ записать в свою переменную, примером ниже я записал в свойство класса (урок №24, кто не дошел используйте обычную переменную):

Так же хотелось напомнить кое-что интересное и важное. Согласно безопасности веб-сервер запрещает перемещение по директориям выше корня сайта. То есть сайт находится по следующему пути: /home/school/public_html/schoolphp , но прочитать содержание папок /home, или /home/school будет недоступно.

Может ли PHP пользоваться путями HTML ? Да, в специальных функциях, для примера:

Практика

В своих старых проектах я использовал DOCUMENT_ROOT, сейчас перешел на относительные index.php пути ‘./папка/файл’.

Zend2, продукт от разработчиков PHP, один из самых сложных FrameWork на данный момент использует так же относительные пути с отличным синтаксисом от моего, то есть ‘папка/файл’.

Как вставлять фото в phpmyadmin?
Пожалуйста, подскажите, как вставлять фото в phpmyadmin. если можно пошагово. Заранее большое.

Путь до phpmyadmin ubuntu
Добрый день , кто в рубить в линуксах помогите с решением проблемы, Не могу найти путь до.

Где путь к фото?
Добрый день. Подскажите пожалуйста каким образом в этом примере привязали фото.

Путь к фото в поле базы данных
Приветствую, коллеги. Честное слово — тестировать не когда. Вопрос задаю по пути с решением других.

Рекомендуемые сообщения

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Похожий контент

Доброго времени суток, форумчане.

Кто может подсказать достаточно ли будет изменить пути формата http://.. на относительные //. во всех файлах папки каталог, если ssl достаточно включить только в клиенткой части сайта, или еще нужно править в папке system.

Опенкарт версии 2.1.0.2, включен SeoPro

Последние посетители 0 пользователей онлайн

Ни одного зарегистрированного пользователя не просматривает данную страницу

Русская сборка OpenCart (ocStore) — официальный сайт OpenCartForum.com Powered by Invision Community

• Уже зарегистрированы? Войти
• Регистрация

Меню покупок

• Назад
• Покупки
• Заказы
• Список желаний
• Мои продажи (Комиссия: %)
• Баланс аккаунта (0.00 руб)
• Информация о покупателе
• Купоны

Форумы

Блоги

FAQ

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.

Элементы заголовка HTML

❮ Назад Далее ❯

---

Элемент HTML является контейнером для следующих элементов: <название> , <стиль> , <мета> , <ссылка> , <скрипт> и <база> .

---

Элемент HTML

Элемент является контейнером для метаданных (данные о данных) и помещается между 9тег 0006 и тег

.

Метаданные HTML — это данные о документе HTML. Метаданные не отображаются.

Метаданные обычно определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию.

---

HTML-элемент

Содержание документа……

Попробуйте сами »

---

HTML-элемент

Попробуйте сами »

---

---

HTML-элемент

Элемент определяет отношения между текущим документом и внешним ресурсом.

<ссылка> чаще всего используется для ссылки на внешние таблицы стилей:

Пример

Попробуйте сами »

Совет: Чтобы узнать все о CSS, посетите наш учебник по CSS.

---

Элемент HTML

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

Метаданные не будут отображаться на странице, но используются браузерами (как отображать контент или перезагрузить страницу) поисковыми системами (ключевыми словами) и другими веб-сервисами.

Примеры

Определение используемого набора символов:

Определение ключевых слов для поисковых систем:

CSS

Определите описание вашей веб-страницы:

Определить автора страницы:

Обновлять документ каждые 30 секунд:

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

0">

Пример тегов:

Пример

Попробуйте сами »

---

Настройка области просмотра

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

Вы должны включать следующий элемент на все свои веб-страницы:

Это дает браузеру инструкции о том, как для управления размерами страницы и масштабированием.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).

Начальная шкала =1,0 9Часть 0007 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы

с метатегом области просмотра :

Совет: Если вы просматриваете эту страницу с помощью телефона или планшета, Вы можете нажать на две ссылки ниже, чтобы увидеть разницу.

Без метатег области просмотра

метатег окна просмотра

---

Элемент HTML

}

Попробуйте сами »

Совет: Чтобы узнать все о JavaScript, посетите наш учебник по JavaScript.

---

HTML-элемент

Элемент указывает базовый URL-адрес и/или цель для всех относительных URL-адресов на странице.

Тег должен иметь href или целевой атрибут присутствует, или оба.

Может быть только один единственный элемент в документе!

Пример

Укажите URL по умолчанию и цель по умолчанию для всех ссылок на странице:

<голова>

базовый тег HTML

Попробуйте сами »

---

Резюме главы

• The Элемент является контейнером для метаданных (данные о данных)
• Элемент помещается между тег и тег
• Требуется элемент <тело>
• Строка — это код HTML,который вставляет изображение на страницу. Нам нужно сообщить HTML,где находится изображение. Изображение находится внутри каталога images ,который находится в том же каталоге,что и 9.0006 index.html . Чтобы перейти по файловой структуре от index.html к нашему изображению,нам потребуется путь к файлу images/your-image-filename . Например,наше изображение называется firefox-icon.png ,поэтому путь к файлу — images/firefox-icon.png .
• Вставьте путь к файлу в код HTML между двойными кавычками кода src="" .
• Измените содержимое атрибута alt на описание включаемого изображения. В этом случае alt="Логотип Firefox: пылающий лис, окутывающий мир" .
• Сохраните файл HTML,затем загрузите его в веб-браузере (дважды щелкните файл). Вы должны увидеть свою новую веб-страницу с вашим изображением!

Некоторые общие правила для путей к файлам:

• Чтобы создать ссылку на целевой файл в том же каталоге,что и вызываемый файл HTML,просто используйте имя файла,например. my-image.jpg .
• Чтобы сослаться на файл в подкаталоге,напишите имя каталога перед путем и косую черту,например. подкаталог/my-image.jpg .
• Чтобы создать ссылку на целевой файл в каталоге выше вызывающего HTML-файла,напишите две точки. Так,например,если index.html находится внутри подпапки test-site ,а my-image.jpg находится внутри test-site ,вы можете сослаться на my-image.jpg из index. html с использованием ../my-image.jpg .
• Вы можете комбинировать их сколько угодно,например ../подкаталог/другой-подкаталог/мое-изображение.jpg .

Пока это все,что вам нужно знать.

Примечание:Файловая система Windows обычно использует обратную косую черту,а не прямую косую черту,т.е. C:\Windows . В HTML это не имеет значения — даже если вы разрабатываете свой веб-сайт для Windows,вы все равно должны использовать косую черту в своем коде.

На этом пока все. Ваша структура папок должна выглядеть примерно так:

• Предыдущий
• Обзор:начало работы в Интернете
• Следующий
• Установка базового ПО
• Как будет выглядеть ваш сайт?
• Работа с файлами
• Основы HTML
• Основы CSS
• Основы JavaScript
• Публикация вашего веб-сайта
• Как работает Интернет

Последнее изменение: 000Z">13 сентября 2022 г. ,участниками MDN

html - тег img не работает с относительным путем в src

Вопрос задан 7 лет,2 месяца назад

Изменено 3 месяца назад

Просмотрено 134 тыс. раз

Это не работает:

Но это работает:

В моем сценарии я просто не могу работать с абсолютным путем. Я должен использовать относительный путь.

• HTML
• CSS
• изображение

6

должен работать. Не нужно было ставить «../» в начале пути к изображению.

Чтобы лучше понять относительные и абсолютные пути,перейдите по этой ссылке

"../assets/images/image.jpg" - это означает

1. '../' перейти на один каталог вверх от того места,где я сейчас нахожусь
2. найти папку «активы/»
3. найти папку «изображения»
4. найдите файл image.jpg.

Эта относительная ссылка будет работать,только если ваша страница находится в подпапке в

"http://localhost/abc/def/geh/"

Если местоположение вашей страницы действительно

"localhost/asdf/asdf /asdf/asdf/index.php"

(что кажется смешным),чтобы добраться до папки с ресурсами,вам придется пройти весь путь до корня.

'../../../../abc/deh/geh/assets/images/image.jpg;

В качестве альтернативы вы можете использовать тег base в теге head, чтобы сделать URL-адрес в фактическом атрибуте src более понятным.

1

Я подозреваю, что вы на самом деле не сделали то, что я вам сказал, поэтому вот скриншот:

Если изображение открывается в новой вкладке, значит, у вас есть какая-то ошибка или расширение, которое искажает его в html. Если вы перепутали относительный путь, вы, скорее всего, получите 404, но сможете увидеть путь как абсолютный. Это может выглядеть как http://localhost/asdf/asdf/asdf/asdf/assets/assets/image.jpg В любом случае, отправьте скриншот вышеуказанной операции.

путь src для приложений Express

Если вы используете Node.js с фреймворком Express , другие ответы не решат вашу проблему.

Как сказано в официальной документации Express:

Для обслуживания статических файлов, таких как изображения, файлы CSS и файлы JavaScript, используйте встроенную промежуточную функцию express.static в Express.

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

 [корень проекта]/assets/images/image.jpg
 

, тогда вы должны включить в свой основной файл javascript (например, index.js или app.js):

 app. use(express.static('assets'))
 

, тогда ваш тег img будет выглядеть так:

Опять же, в документации написано:

Express ищет файлы относительно статического каталога, поэтому имя статического каталога не является частью URL.

Таким образом, в этом примере вы должны опустить «активы» в пути src, а также отметить открытие «/».

Я сделаю вашу жизнь очень-очень простой.
Используйте его следующим образом


Вы можете проверить одну вещь: адрес вашей текущей страницы заканчивается на "/". Поэтому, когда у меня есть URL-адрес, например http://127.0.0.1:7777/www/, тогда все мои относительные URL-адреса работают, но затем я использую его как http://127.0.0.1:7777/www (без "/" в конце) браузеры думают, что "www" - это файл, а не папка. Может быть, это можно как-то настроить на стороне сервера (в моем случае я запускаю собственное программное обеспечение http-сервера, написанное мной).

Не щелкайте правой кнопкой мыши и не копируйте относительный путь. Просто следуйте синтаксису ниже

1

В React:

1. импорт изображения:

    импортировать изображение из '../../assets/random-image.png'
    

2. использовать импортированную переменную как значение атрибута src :

4

Твой ответ

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

изображений | HTML | Майк Дейн

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

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

Тег изображения

HTML дает нам специальный тег, который можно использовать только для изображений. Каждый раз, когда вы хотите отобразить изображение, оно должно отображаться с этим тегом. Давайте рассмотрим пример вывода изображения с использованием тега img .

 Копировать    

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

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

Src

Атрибут src сообщает HTML, где находится изображение. Это может быть либо URL-адрес (например, приведенный выше), который ссылается на изображение в Интернете, либо относительный путь, который ссылается на изображение в той же файловой системе, что и текущая html-страница.

Вы можете легко отобразить любое изображение, которое найдете в Интернете, просто поместив его URL-адрес в атрибут src . Но если вы хотите добавить изображение, которое вы сделали сами, вам нужно выполнить пару шагов:

1. Добавьте изображение в папку вашего сайта. Часто люди просто добавляют изображение в тот же каталог, в котором находится html-файл.
2. В атрибуте src указать относительный путь (от расположения html-файла) до изображения.

Для такой структуры папок:

 - веб-сайт/
  - index.html
  - картинки/
    - забавный_img.jpg
 

Если вы хотите добавить funny_img.jpg в качестве изображения в index.html , тогда код будет выглядеть так:

 Копировать    

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

Этот атрибут src является обязательным для всех HTML-изображений и не должен оставаться пустым.

Ширина и высота

Как правило, изображения на сайте отображаются в исходном размере. Таким образом, если у вас есть изображение размером 800x1000 пикселей (800 пикселей в ширину и 1000 пикселей в высоту), оно будет отображаться на веб-сайте в том же размере.

Если у вас много изображений, вы захотите изменить их размер, уменьшить или изменить их пропорции. В этом случае вы можете использовать два необязательных атрибута тега img , которые называются ширина и высота (я дам вам два предположения, что они делают).

Если мы хотим изменить ширину и высоту нашего funny_img.png , мы можем сделать следующее:

 Копировать    

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

Если вы не хотите беспокоиться об этом, вы можете самостоятельно изменить либо ширину, либо высоту, и HTML автоматически отмасштабирует противоположную пропорцию, чтобы соответствовать (сохраняя соотношение сторон).

Это самый простой способ управлять размером изображения, однако это также можно сделать с помощью чего-то, что называется CSS. CSS позволяет очень эффективно стилизовать HTML-элементы, включая изображения. Я упоминаю об этом на тот случай, если вы услышите, как люди упоминают об этом как о способе изменения размера изображений. Хотя я настоятельно рекомендую вам проверить мой курс CSS после этого, чтобы узнать больше об этом!

Alt

Последний атрибут, связанный с HTML-изображениями, который я хочу обсудить, — это атрибут alt . Посмотрите на пример ниже:

 Копировать    

Атрибут alt используется для описания изображение, которое отображается. Он также используется в качестве резервной копии на случай, если изображение не может быть отображено или URL-адрес не работает.

Альтернативные теги помогают по-разному. Первый предназначен для поисковых систем. Часто поисковая система, когда она читает и индексирует сайт, использует атрибут alt изображения, чтобы определить, что это за изображение. Google, например, может использовать теги alt, чтобы индексировать изображения для поиска изображений.

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

Наконец, альтернативные теги являются резервной копией. Если URL-адрес изображения не работает, если изображение слишком большое для загрузки на страницу или у пользователя медленное подключение к Интернету, браузер просто отобразит текст в теге alt вместо самого изображения.

Всегда полезно включать тег alt, несмотря ни на что. На самом деле нет причин не делать этого.

Завершение

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

Тег img чрезвычайно прост в использовании и является одним из наиболее широко используемых тегов во всем Интернете!

Путь к файлу в HTML | Узнайте, как работает путь к файлу в HTML?

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

Синтаксис

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

Итак, вот синтаксис для включения этих файлов на веб-страницы следующим образом:

Синтаксис:

Используется для вставки изображения на нашу веб-страницу.

Вот список некоторого пути с его описанием:

• : Используется, когда мы собираемся использовать изображение из той же папки, что и текущая страница.
• : Используется для указания того, что данное изображение хранится в папке изображений в той же папке веб-сайта.
• : Это используется для определения соответствующего сохранения в корневой папке изображений, где находится текущая веб-папка.
• : Этот тип сообщает пользователю, что данное изображение хранится ровно на один уровень выше текущей папки сайта.

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

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

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

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

Как путь к файлу работает в HTML?

Существует два типа путей к файлам: абсолютный путь к файлу и относительный путь к файлу.

Абсолютный путь к файлу используется всякий раз, когда мы используем полный URL-адрес для определения пути к файлу.

Синтаксис: src="url";

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

 

<голова>


<тело>


 

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

Синтаксис:

 src="img_folder/img_name" или
src="/img_folder/img_name" или
src=""../img_folder/img_name или 

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

 

<голова>


<тело>
 
Пример показа файла в той же папке 
 
 jpg" alt="Демонстрационное изображение
«стиль = «ширина: 80 пикселей; высота: 80 пикселей; ">
Пример, показывающий файл, находящийся в папке над его
текущая   папка 

Пример, показывающий файл, доступный в папке, которая находится точно в корневой позиции своей текущей подпапки.



 

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

Примеры пути к файлу в HTML

Ниже приведены следующие примеры. Код для него следующий:

Код:

 

<голова>


 
Абсолютный путь к файлу
 
 Это пример абсолютного пути к файлу.  В этой концепции мы собираемся использовать конкретный «URL» адрес файла. Поэтому мы можем легко добавить этот файл или изображение на их веб-сайт.
<тело>


 

Вывод:

Пример #2

Код:

 

<голова>


<тело>
 
Относительный путь к файлу
 
В этом примере мы увидим, как относительный путь к файлу будет работать с одним и тем же изображением.
 Итак, мы берем здесь одно изображение, хранящееся в одной конкретной папке веб-сайта, поэтому оно будет отображать одно и то же, используя другой путь
 
Относительный путь к файлу с изображением в той же папке 
 

 
Относительный путь к файлу с изображением в папке над текущей папкой 
 
 png" alt="Демонстрационное изображение "style="ширина:100px; высота:100px;">
 
Относительный путь к файлу с изображением, доступным в папке, которая находится точно в корневом положении своей текущей подпапки
 


 

Вывод:

Пример #3

Код:

 

<голова>


<тело>
 
Относительный путь к файлу
 
В этом примере мы увидим, как относительный путь к файлу будет работать с изображением, а также с файлами
 Итак, мы добавляем файл HTML, файл CSS и изображение, чтобы увидеть фактический результат
 
Относительный путь к файлу с изображением в той же папке 
 

 
Относительный путь к файлу с HTML-файлом в папке 
 

No related posts.