Тёмный

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

Школа itProger / Программирование
Просмотров 127 тыс.
50% 1

За урок мы изучим тег «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

Опубликовано:

 

14 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 93   
@praporfzs5100
@praporfzs5100 3 года назад
спасибо просто всё четко и понятно , тот случай когда ютуб не только время убить но и пользу принести благодаря такому каналу как этот , спасибо на самом деле)
@Pavel_Derevyanko
@Pavel_Derevyanko 3 года назад
Один из немногих понятных спикеров! Спасибо
@user-ts2dh7yu5g
@user-ts2dh7yu5g 3 года назад
Как всегда все коротко и понятно!
@user-gs4ec4it5l
@user-gs4ec4it5l 3 года назад
Спасибо большое за такие понятные и хорошие уроки!
@iuliiaprusakova73
@iuliiaprusakova73 2 года назад
Спасибо огромное за ваши уроки 👍
@user-oj1xe4jr4y
@user-oj1xe4jr4y Месяц назад
самая лучшая школа по програмированию
@user-se3rp1wt8u
@user-se3rp1wt8u 3 месяца назад
Спасибо вам большое за урок!!!
@ksenrix
@ksenrix 9 месяцев назад
Очень полезный человек, который создал для меня полезное видео ! ;)
@Burovasofia
@Burovasofia Год назад
спасибо за урок
@baklajah9172
@baklajah9172 3 года назад
спасибо)
@edvardfranklin4293
@edvardfranklin4293 3 года назад
Важное уточнение. Пользуюсь редактором Brackets и столкнулся с тем, что браузер некорректно загружает картинки. Точнее то загружает, то выдаёт ошибку типа "Not allowed to load local resource: #". Проблема возникает, если пытаться подгрузить изображение из рандомной папки на компьютере. Именно по этой причине все img должны лежать в одном корне с html и должны подгружаться через одну директорию. Может кому пригодится.
@user-zr8ib4ib9u
@user-zr8ib4ib9u 3 года назад
Да лучше чтобы все изображения были в самом проекте
@davron_xolboyev
@davron_xolboyev 3 года назад
Thank you
@zhanarn7083
@zhanarn7083 Месяц назад
Спасибо!
@user-iv8tb3wq4k
@user-iv8tb3wq4k 3 года назад
у вас очень крутые видео
@xvost71
@xvost71 Год назад
Добрый день. 1. При копировании не показывает URL картинки. Пробую копировать ссылку. Сохраняю. После открытия файла картинка отображается как "битая" и не отображается в открытом виде в файле. 2. Не отображается "alt". Что я делаю не так? Помогите разобраться.
@armi9108
@armi9108 Год назад
спасибо очень
@loqol5874
@loqol5874 2 года назад
просто лучший
@hakimjonghaniev5536
@hakimjonghaniev5536 2 года назад
Спасибо
@kjlebep-9149
@kjlebep-9149 2 года назад
Урок понятный, интересный. Но у меня возникла такая проблема, не могу добавить картинку с пк на так называемый "сайт". Пишу все верно но на главной странице она почему-то не показывается, в чем может быть проблема?
@my_guardian_angel
@my_guardian_angel 9 месяцев назад
Если у вас какие-то папки, где находится картинка или сама картинка называются на русском языке, измените всё на английский.
@dunybollox804
@dunybollox804 Год назад
Гоша ты лучший учитель
@realmadrid-ji9bd
@realmadrid-ji9bd 3 года назад
👍👍👍👍👍
@oleksandrnavoyskiy9409
@oleksandrnavoyskiy9409 Месяц назад
Если совместить етот урок и предыдущий ,то еще можно с картинки вывести ссылку.Т.е. нажымаешь на картинку и ты переходиш по ссыке: -пишем ето в и делаем какую хотите иконку во вклаке браузера
@sign8200
@sign8200 4 месяца назад
спасибо благодаря тебе моя мама больше не думает что я бездарь.
@luka01102
@luka01102 7 месяцев назад
А если я укажу путь к картинке, а потом удалю, то она пропадет с сайта? И такой же вопрос, но если сайт уже открыт и в пользовании.
@user-jt2bn6bs9d
@user-jt2bn6bs9d Год назад
Надо было показать как открыли картинку, а не показывать уже открытую и говорить я уже открыл(((
@vitveda
@vitveda Год назад
Картинка сохранённая в папке не отображается если указывать короткий путь как в видео. Отображается если указываю полный путь с диска С. Что нужно сделать чтобы срабатывала короткая ссылка?
@user-ex9cs8zi7e
@user-ex9cs8zi7e 3 месяца назад
😊😊😊😊😊😊
@drumrack3995
@drumrack3995 2 года назад
В какой спецификации описано значение "auto" для атрибута height?
@maasimada
@maasimada 8 месяцев назад
да
@newbrunetteforhim2418
@newbrunetteforhim2418 Год назад
Все было хорошо до момента "подгрузить картинку непосредственно с нашего проекта". Не получается. Вместо одной картинки в папку притягивается все, что есть на рабочем столе, получается папка Desktop, в которой все фотографии что есть и все, что есть программы, включая сам Atom. Если удалять, то удаляется все сразу, рабочий стол чистейший, все в корзине. Скажите, пожалуйста, что делать?
@zdeskrasivoru
@zdeskrasivoru 3 года назад
картинка с компьютера никак не попадает в папку images. Я уже открыла папу в Атом и скопировала туда картинку. Но главная страница все равно не видит картинку
@koppyncuohep2312
@koppyncuohep2312 Год назад
у меня тоже так было, просто скачай картину в папку (images) проекта.
@xeither289
@xeither289 2 года назад
☦❤💕☦🙏💕❤
@Krylowandrey
@Krylowandrey 18 дней назад
Когда прописываешь одиночные теги в некоторых IDE то они их автоматом закрывают ( т.е. пишут не 2 открытый и закрытый тег, а один, сразу закрытый) Это разве правильно?
@mato211
@mato211 Год назад
Не добавляется картинка внутрь проекта((( Зажимаю, перетягиваю и ничего не происходит, нет её. Почитала комменты, не у меня одной такая проблема, но ответа не было. Может подскажите? Пожаааалуйста!!!!
@paragon829
@paragon829 Год назад
У меня не получается мышкой просто перенести картинку, но можно нажать правой кнопкой мыши на картинку и там нажать сохранить картинку как и она будет сохраняться в jpg
@MariaIvanova777
@MariaIvanova777 2 года назад
Так и не поняла как надо скопировать изображение в Атом. Ничего не копируется.
@imsinfinityfree
@imsinfinityfree Год назад
😄любимый атрибут у автора этих видео, очевидно, title😅 но зачем же его везде совать?😂
@armhay5269
@armhay5269 Год назад
кстати, у меня не получилось отображать слова на картинке при введении мышки. все остальное получилось. Пользуюсь Visual studio code-ом.🤷‍♂
@nomadpascal1680
@nomadpascal1680 3 года назад
Если у вас ссылка большая и хотите чтобы она переносилась вертикально как у Гоши, то в настройках сделайте вот так Editor > Soft Wrap
@luka4335
@luka4335 2 года назад
в каких настроиках ето указать
@valeriamorkovkina9848
@valeriamorkovkina9848 2 года назад
Спасибо!!!
@shaslik1875
@shaslik1875 Год назад
большое спасибо
@-senrok-
@-senrok- 11 месяцев назад
А в настройках чего именно?
@user-cx7lb8jq8q
@user-cx7lb8jq8q 11 месяцев назад
@@-senrok- wiew - wordWrap
@user-fq2jr6ig9e
@user-fq2jr6ig9e Год назад
Все замечательно, но главный вопрос как разместить текст, ссылки на фоне любой картинки ?
@kisamehoshigaki727
@kisamehoshigaki727 Год назад
сделать в css картинку бэкграундом
@funbox8774
@funbox8774 2 года назад
Подскажите, почему может не загружатся копия URL картинки? Что то в настройках? Где и какие могут быть причины?
@notcherry69
@notcherry69 2 года назад
Вы можете открыть нужную вам картинку на отдельной странице, нажать правой кнопкой мыши "посмотреть код элемента"(или зажать клавиши ctrl+shift+C) и оттуда скопировать src и вставить к себе.
@funbox8774
@funbox8774 2 года назад
@@notcherry69 спасибо
@Krylowandrey
@Krylowandrey 18 дней назад
У меня когда картинка не подргужается, атрибут ALT выдает просто текст. но не выдает пиктограмку означающей наличие картинки которая не смогла подгрузится. Почему так?
@user-ir3yi1nc4v
@user-ir3yi1nc4v Год назад
Как перемещать картинку на сайте ? Например по середины или справа или внизу.
@_CryptoWawe_
@_CryptoWawe_ 6 месяцев назад
css
@Steemich
@Steemich 5 месяцев назад
В каком приложении он пишет код?
@user-vn3gj2dk5v
@user-vn3gj2dk5v Год назад
А что делать если изображения грузятся только со своего компьютера? Как сделать чтобы изображения показывались со всех устройств?
@xeither289
@xeither289 2 года назад
☦❤💕❤🙏
@RavanaMustafayeva
@RavanaMustafayeva Год назад
некоторые атрибуты у меня не работают, например width="..."
@Arllek1n0
@Arllek1n0 5 месяцев назад
как сделать картинку по центру?
@big__boi
@big__boi 2 года назад
у меня не открывается картинка которая находится в проекте
@mrwatermelonmr
@mrwatermelonmr 3 года назад
Фотографии в одной папке (у меня) без всяких \ выводится.(Я пользуюсь visual studio code)
@itproger
@itproger 3 года назад
Да, это нормально
@sergodemachina6069
@sergodemachina6069 2 года назад
@@itproger почему то не выводится картинка. и название писал. и на инглише и на ру папку с файлом называл
@sergodemachina6069
@sergodemachina6069 2 года назад
походу нашёл. я scr написал. и не заметил как то. потому чт оя копировал другие строчки и менял название картинки и всё работало. сидел пялился 10 мин и не понимал
@Arik.Kotsko
@Arik.Kotsko 2 года назад
@@sergodemachina6069 Блин, если бы не ты, я бы до сих пор сидела и тупила ヽ(”`▽´)ノ
@alexandralexandr2997
@alexandralexandr2997 Год назад
@@sergodemachina6069 спасибо, на том-же месте у меня была ошибка )
@ulyanatrehubava8025
@ulyanatrehubava8025 24 дня назад
Подскажите, пожалуйста, как центрировать картинку?
@ulyanatrehubava8025
@ulyanatrehubava8025 24 дня назад
нашла :) если кому интересно, то это делается через
@jayzzz1509
@jayzzz1509 Год назад
А как лучше картинки грузить? через ссылку или через папку?
@AlexSmitg
@AlexSmitg Год назад
Думаю лучше через папку, потому что сайт с картинками может просто перестать существовать и у тебя не будут загружаться картинки через ссылку.
@Anatoliy1790
@Anatoliy1790 Год назад
Супер всё... в конце не понятно ... если картинка находится выше уровнем то как указывать путь ?
@Nik_Zir
@Nik_Zir Год назад
Привет ты случайно не знаешь почему url ОГРОМНЫЙ?
@sextornado
@sextornado Год назад
../, просто две точки и слеш
@vab321bav
@vab321bav Год назад
А как сделать из html файла ссылку для интернета? что б можно было ее куда нибудь скинуть что б кто то зашел по ней
@nightsoul4677
@nightsoul4677 Год назад
закинуть свой сайт, написанный на Html на сервер
@user-fs6gy9vw5j
@user-fs6gy9vw5j Год назад
а как сделать что бы при нажатии на картинку открывалась другая страница?
@sextornado
@sextornado Год назад
Через тег а
@tude2478
@tude2478 Год назад
А у меня почему-то нету URL У тех кого нету URL будет написано перевести картинку и переводите картинку в кавычки
@user-crygames
@user-crygames Год назад
Я просто адрес скопировал
@black_yelloww
@black_yelloww Год назад
А что делать если url ссылка слишком большая
@nightsoul4677
@nightsoul4677 Год назад
оставь ее большой
@leonidfrenkel2548
@leonidfrenkel2548 2 года назад
Почему у меня нет URL? И ещё у меня не появилась картинка... Помогите.
@andron6845
@andron6845 2 года назад
Решил?
@-senrok-
@-senrok- 11 месяцев назад
Вставляю URL в код и не показывает картинку что с этим делать?
@vane4ka335
@vane4ka335 11 месяцев назад
то же самое
@_islamicdigest_
@_islamicdigest_ 2 года назад
Бро, не в обиду.. Хэйт это hate - ненависть, а height читается хайт - высота. Уроки отличные, спасибо!
@itproger
@itproger 2 года назад
Учту
@user-jf4lm5sx5o
@user-jf4lm5sx5o 10 месяцев назад
Я использую для написания кода Visual Studio Code. Еще использую гит и гитхаб. Вообще мне 13 лет. В том году я вообще делал сайты на тилда (кто не знает - это сайт в котором делаешь сайт без всякого кода и этот сайт сразу можно опубликовать в интернет)
@surayakupov2544
@surayakupov2544 8 дней назад
Чет картинка не скачалось
@xeither289
@xeither289 2 года назад
ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС
@xeither289
@xeither289 2 года назад
БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ
@vetshot3953
@vetshot3953 5 месяцев назад
хватит писать title в каждом уроке надоел
Далее
КОРОЧЕ ГОВОРЯ, 100 ДНЕЙ В СССР
09:31
КОРОЧЕ ГОВОРЯ, 100 ДНЕЙ В СССР
09:31