HTML5 #6 Картинки (Images)

#YauhenK #webDev #HTML #HTML5

Всех приветствую в курсе «HTML5».
В данном видео-курсе мы с вами рассмотрим все возможности языка гипертекстовой разметки HTML.
А это, между прочим, основа каждого веб-сайта, или веб-приложения.
Разберём основы, а так же изучим большинство новых тэгов, которые появились с новым стандартом HTML5.
Дополнительно рассмотрим такие понятия, как:
- Валидация HTML документа.
- Семантика.
- Accessibility, или доступность.
По окончанию курса вы научитесь понимать и разбираться в структуре любого HTML документа.

✒ Репозиторий курса:

✒ Используемые ресурсы и инструменты:

✒ Полезные ссылки:

✒ Полный список готовых и планируемых курсов:

✒ Автор курса:

[TheProfessionalGambler]

Всё подробно и понятно 👍

Небольшая заметка:
2:11 Хорошая практика задавать хотябы width в атрибуте img тега.
В CSS можно переопределить размеры указанные в атрибутах и они ни как не будут влиять на респонсив дизайн. А заданные размеры в атрибуте img имеют несколько плюсов - браузер понимает размеры изображения до загрузки CSS и отрисовка просиходит без "прыжков" контента на странице. И если вдруг css вообще не загрузится, то картинки не будут растягиватся на всю страницу, что часто случается с векторными изображениями.

[nonamenoproblem.]

Я за курсы 155000 отдал и там этого не расказали. Спасибо автору, очепь приятно смотреть, слушать и впитывать.

[ВикторияСереброва]

в целом.большое спасибо. такое мне сейчас на курсе дистанционном государствнного интитута информатики и электроники даже не озвучили. впервые узнала по Вашему видео. Спасибо большое!!!!))))

[slygrin]

Искренне благодарю, пожалуйста, продолжайте в том же духе

[linqcodmax]

Продолжай в том же духе, и ждем так же плейлиста по CSS :D

[olehyefimenko]

Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

[vyacheslavgvorus]

Полезно, был не в курсе пока не стал использовать webp форматы

[КостянЕрмаков-ею]

Мне кажется, что еще можно было добавить про картинки с @х2 пикселями, чтобы браузер сам выбирал какую ему грузить.

[annavoloshyna]

Нам на курсах рассказывали только про <img>, остальные варианты вообще не упоминались.

[waden]

Хотел узнать, допустима ли такая конструкция? Вроде валидатор не ругался, но ругался на вариант вложения, source в figure, без оборачивания в picture.

<figure>
<picture>
</picture>
<figcaption>It is a simple description for a picture above</figcaption>
</figure>

[maksimrackomin]

Здравствуйте! Отличное видео и канал в целом. Скажите пожалуйста, как применение конструкции <picture> влияет на количество запросов на сервер?

[Andrii.W]

я уже и не знаю, как благодарить!!!задонатил бы, но сижу без работы из-за войны.Спасибо!

[АртемМарусетченко-цх]

Немного не понял разницу между контейнером picture и fig

[ЕкатеринаНестеренко-ъг]

Хочу выразить большую благодарность автору. Мало того, что все понятно и это за 5-10 мин видео. Так ещё и "залипаешь" так, что не можешь оторваться. Хотела спросить, а как делать карточки товара? Через figure и figcaption? Просто все через div делают и не заморачиваются

[rank]

а если изображение надо фоном расположить, что лучше для адаптива, background-image или все таки через picture+img+source?

[alexandrsorokin]

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

[olenalazarenko]

а можна использовать <picture></picture> вместе с <figure></figure>?

[gatrianL]

Как по мне это очень не практично, допустим у меня есть каталог из 1000 товаров и мне на каждый товар нужно будет делать по 3 media запроса на картинки, к дополнению еще и нарезать эту кучу картинок