HTML5 для начинающих / Урок #9 - Работа с изображениями

За урок мы изучим тег «img», что служит для работы с изображениями в HTML. Мы научимся отображать изображение из Интернета, а также изображение из нашего проекта.
✅ Полезные ссылки:
✏️ Урок на сайте itProger: itproger.com/course/html/9
⏰ Тайм коды:
00:00 - Начало
00:16 - Изучение тега «img»
00:50 - Картинка с Интернета
01:30 - Дополнительные атрибуты
05:09 - Добавляем картинку внутрь проекта
07:14 - Завершение
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

[@oleksandrnavoyskiy9409]

Если совместить етот урок и предыдущий ,то еще можно с картинки вывести ссылку.Т.е. нажымаешь на картинку и ты переходиш по ссыке: -пишем ето в и делаем какую хотите иконку во вклаке браузера

[@praporfzs5100]

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

[@user-ts2dh7yu5g]

Как всегда все коротко и понятно!

[@Pavel_Derevyanko]

Один из немногих понятных спикеров! Спасибо

[@user-gs4ec4it5l]

Спасибо большое за такие понятные и хорошие уроки!

[@iuliiaprusakova73]

Спасибо огромное за ваши уроки 👍

[@user-oj1xe4jr4y]

самая лучшая школа по програмированию

[@xvost71]

Добрый день. 1. При копировании не показывает URL картинки. Пробую копировать ссылку. Сохраняю. После открытия файла картинка отображается как "битая" и не отображается в открытом виде в файле. 2. Не отображается "alt". Что я делаю не так? Помогите разобраться.

[@user-se3rp1wt8u]

Спасибо вам большое за урок!!!

[@davron_xolboyev]

Thank you

[@ksenrix]

Очень полезный человек, который создал для меня полезное видео ! ;)

[@Burovasofia]

спасибо за урок

[@baklajah9172]

спасибо)

[@edvardfranklin4293]

Важное уточнение. Пользуюсь редактором Brackets и столкнулся с тем, что браузер некорректно загружает картинки. Точнее то загружает, то выдаёт ошибку типа "Not allowed to load local resource: #". Проблема возникает, если пытаться подгрузить изображение из рандомной папки на компьютере. Именно по этой причине все img должны лежать в одном корне с html и должны подгружаться через одну директорию. Может кому пригодится.

[@user-zr8ib4ib9u]

Да лучше чтобы все изображения были в самом проекте

[@zhanarn7083]

Спасибо!

[@kjlebep-9149]

Урок понятный, интересный. Но у меня возникла такая проблема, не могу добавить картинку с пк на так называемый "сайт". Пишу все верно но на главной странице она почему-то не показывается, в чем может быть проблема?

[@my_guardian_angel]

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

[@user-iv8tb3wq4k]

у вас очень крутые видео

[@armi9108]

спасибо очень

[@hakimjonghaniev5536]

Спасибо

[@loqol5874]

просто лучший

[@realmadrid-ji9bd]

👍👍👍👍👍

[@mato211]

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

[@paragon829]

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

[@dunybollox804]

Гоша ты лучший учитель

[@user-jt2bn6bs9d]

Надо было показать как открыли картинку, а не показывать уже открытую и говорить я уже открыл(((

[@vitveda]

Картинка сохранённая в папке не отображается если указывать короткий путь как в видео. Отображается если указываю полный путь с диска С. Что нужно сделать чтобы срабатывала короткая ссылка?

[@user-ex9cs8zi7e]

😊😊😊😊😊😊

[@sign8200]

спасибо благодаря тебе моя мама больше не думает что я бездарь.

[@newbrunetteforhim2418]

Все было хорошо до момента "подгрузить картинку непосредственно с нашего проекта". Не получается. Вместо одной картинки в папку притягивается все, что есть на рабочем столе, получается папка Desktop, в которой все фотографии что есть и все, что есть программы, включая сам Atom. Если удалять, то удаляется все сразу, рабочий стол чистейший, все в корзине. Скажите, пожалуйста, что делать?

[@Krylowandrey]

У меня когда картинка не подргужается, атрибут ALT выдает просто текст. но не выдает пиктограмку означающей наличие картинки которая не смогла подгрузится. Почему так?

[@drumrack3995]

В какой спецификации описано значение "auto" для атрибута height?

[@maasimada]

да

[@zdeskrasivoru]

картинка с компьютера никак не попадает в папку images. Я уже открыла папу в Атом и скопировала туда картинку. Но главная страница все равно не видит картинку

[@koppyncuohep2312]

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

[@Krylowandrey]

Когда прописываешь одиночные теги в некоторых IDE то они их автоматом закрывают ( т.е. пишут не 2 открытый и закрытый тег, а один, сразу закрытый) Это разве правильно?

[@yakushevich19]

мнут 30 уже вожусь с проблемой по картинке с компа: Описание изображения "Some content has been disabled in this document" - В этом документе отключен некоторый контент. чат gbt тоже не может решить, памагите))

[@user-fq2jr6ig9e]

Все замечательно, но главный вопрос как разместить текст, ссылки на фоне любой картинки ?

[@kisamehoshigaki727]

сделать в css картинку бэкграундом

[@xeither289]

☦❤💕☦🙏💕❤

[@nomadpascal1680]

Если у вас ссылка большая и хотите чтобы она переносилась вертикально как у Гоши, то в настройках сделайте вот так Editor > Soft Wrap

[@luka4335]

в каких настроиках ето указать

[@valeriamorkovkina9848]

Спасибо!!!

[@shaslik1875]

большое спасибо

[@-senrok-]

А в настройках чего именно?

[@user-cx7lb8jq8q]

@@-senrok- wiew - wordWrap

[@jayzzz1509]

А как лучше картинки грузить? через ссылку или через папку?

[@MariaIvanova777]

Так и не поняла как надо скопировать изображение в Атом. Ничего не копируется.

[@user-vn3gj2dk5v]

А что делать если изображения грузятся только со своего компьютера? Как сделать чтобы изображения показывались со всех устройств?

[@xeither289]

☦❤💕❤🙏

[@user-ir3yi1nc4v]

Как перемещать картинку на сайте ? Например по середины или справа или внизу.

[@_CryptoWawe_]

css

[@funbox8774]

Подскажите, почему может не загружатся копия URL картинки? Что то в настройках? Где и какие могут быть причины?

[@notcherry69]

Вы можете открыть нужную вам картинку на отдельной странице, нажать правой кнопкой мыши "посмотреть код элемента"(или зажать клавиши ctrl+shift+C) и оттуда скопировать src и вставить к себе.

[@funbox8774]

@@notcherry69 спасибо

[@TsaryovB]

@@notcherry69 Спасибо,помогло

[@onefocus3156]

что делать если я копирую ссылку а в коде она отображаеться такими размерами что занимает весь экран и неудобно что либо делать теперь

[@big__boi]

у меня не открывается картинка которая находится в проекте

[@Steemich]

В каком приложении он пишет код?

[@luka01102]

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

[@wasik12121]

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

[@ulyanatrehubava8025]

Подскажите, пожалуйста, как центрировать картинку?

[@ulyanatrehubava8025]

нашла :) если кому интересно, то это делается через

[@RavanaMustafayeva]

некоторые атрибуты у меня не работают, например width="..."

[@mrwatermelonmr]

Фотографии в одной папке (у меня) без всяких \ выводится.(Я пользуюсь visual studio code)

[@itproger]

Да, это нормально

[@sergodemachina6069]

@@itproger почему то не выводится картинка. и название писал. и на инглише и на ру папку с файлом называл

[@sergodemachina6069]

походу нашёл. я scr написал. и не заметил как то. потому чт оя копировал другие строчки и менял название картинки и всё работало. сидел пялился 10 мин и не понимал

[@Arik.Kotsko]

@@sergodemachina6069 Блин, если бы не ты, я бы до сих пор сидела и тупила ヽ(”`▽´)ﾉ

[@alexandralexandr2997]

@@sergodemachina6069 спасибо, на том-же месте у меня была ошибка )

[@Anatoliy1790]

Супер всё... в конце не понятно ... если картинка находится выше уровнем то как указывать путь ?

[@Nik_Zir]

Привет ты случайно не знаешь почему url ОГРОМНЫЙ?

[@sextornado]

../, просто две точки и слеш

[@_islamicdigest_]

Бро, не в обиду.. Хэйт это hate - ненависть, а height читается хайт - высота. Уроки отличные, спасибо!

[@itproger]

Учту

[@user-fs6gy9vw5j]

а как сделать что бы при нажатии на картинку открывалась другая страница?

[@sextornado]

Через тег а

[@vab321bav]

А как сделать из html файла ссылку для интернета? что б можно было ее куда нибудь скинуть что б кто то зашел по ней

[@nightsoul4677]

закинуть свой сайт, написанный на Html на сервер

[@tude2478]

А у меня почему-то нету URL У тех кого нету URL будет написано перевести картинку и переводите картинку в кавычки

[@user-crygames]

Я просто адрес скопировал

[@Arllek1n0]

как сделать картинку по центру?

[@black_yelloww]

А что делать если url ссылка слишком большая

[@nightsoul4677]

оставь ее большой

[@leonidfrenkel2548]

Почему у меня нет URL? И ещё у меня не появилась картинка... Помогите.

[@andron6845]

Решил?

[@-senrok-]

Вставляю URL в код и не показывает картинку что с этим делать?

[@vane4ka335]

то же самое

[@imsinfinityfree]

😄любимый атрибут у автора этих видео, очевидно, title😅 но зачем же его везде совать?😂

[@armhay5269]

кстати, у меня не получилось отображать слова на картинке при введении мышки. все остальное получилось. Пользуюсь Visual studio code-ом.🤷‍♂

[@user-jf4lm5sx5o]

Я использую для написания кода Visual Studio Code. Еще использую гит и гитхаб. Вообще мне 13 лет. В том году я вообще делал сайты на тилда (кто не знает - это сайт в котором делаешь сайт без всякого кода и этот сайт сразу можно опубликовать в интернет)

[@surayakupov2544]

Чет картинка не скачалось

[@xeither289]

ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС

[@xeither289]

БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ

[@user-rg7vj8zh6p]

столько воды еще надо поискать

[@vetshot3953]

хватит писать title в каждом уроке надоел