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

  Рет қаралды 17,742

webDev

webDev

4 жыл бұрын

#YauhenK #webDev #HTML #HTML5
Всех приветствую в курсе «HTML5».
В данном видео-курсе мы с вами рассмотрим все возможности языка гипертекстовой разметки HTML.
А это, между прочим, основа каждого веб-сайта, или веб-приложения.
Разберём основы, а так же изучим большинство новых тэгов, которые появились с новым стандартом HTML5.
Дополнительно рассмотрим такие понятия, как:
- Валидация HTML документа.
- Семантика.
- Accessibility, или доступность.
По окончанию курса вы научитесь понимать и разбираться в структуре любого HTML документа.
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/html5
✒ Используемые ресурсы и инструменты:
✔ Atom (редактор кода): atom.io
✒ Полезные ссылки:
✔ W3 Валидатор: validator.w3.org
✔ Доступность: developers.google.com/web/fun...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZfaq: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

Пікірлер: 62
@TheProfessionalGambler
@TheProfessionalGambler 4 жыл бұрын
Всё подробно и понятно 👍 Небольшая заметка: 2:11 Хорошая практика задавать хотябы width в атрибуте img тега. В CSS можно переопределить размеры указанные в атрибутах и они ни как не будут влиять на респонсив дизайн. А заданные размеры в атрибуте img имеют несколько плюсов - браузер понимает размеры изображения до загрузки CSS и отрисовка просиходит без "прыжков" контента на странице. И если вдруг css вообще не загрузится, то картинки не будут растягиватся на всю страницу, что часто случается с векторными изображениями.
@nonamenoproblem.6372
@nonamenoproblem.6372 2 жыл бұрын
Я за курсы 155000 отдал и там этого не расказали. Спасибо автору, очепь приятно смотреть, слушать и впитывать.
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Спасибо большое за отзыв
@slygrin1971
@slygrin1971 4 жыл бұрын
Искренне благодарю, пожалуйста, продолжайте в том же духе
@linqcodmax8965
@linqcodmax8965 4 жыл бұрын
Продолжай в том же духе, и ждем так же плейлиста по CSS :D
@user-jq9dn4hd9r
@user-jq9dn4hd9r Жыл бұрын
Огромное спасибо за подробное и очень понятное объяснение!
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
Пожалуйста
@vyacheslavgvorus3883
@vyacheslavgvorus3883 4 жыл бұрын
Полезно, был не в курсе пока не стал использовать webp форматы
@user-lp2zy8er4p
@user-lp2zy8er4p Жыл бұрын
в целом.большое спасибо. такое мне сейчас на курсе дистанционном государствнного интитута информатики и электроники даже не озвучили. впервые узнала по Вашему видео. Спасибо большое!!!!))))
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
Большое пожалуйста
@DmitryShelestrans
@DmitryShelestrans 4 жыл бұрын
Огромное спасибо!
@user-tv5pd2pv9q
@user-tv5pd2pv9q 3 жыл бұрын
Отличный курс! Буду смотреть дальше
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Спасибо большое
@olehyefimenko6693
@olehyefimenko6693 Жыл бұрын
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
Спасибо за поддержку
@user-gh2ml3cf5o
@user-gh2ml3cf5o 4 жыл бұрын
Отлично 👍👏😆
@anvacula
@anvacula 4 жыл бұрын
Продолжай в том же духе.
@dmitrijponkin
@dmitrijponkin 4 жыл бұрын
Спасибо!
@user-gh2ml3cf5o
@user-gh2ml3cf5o 4 жыл бұрын
Отлично
@spav4vaps694
@spav4vaps694 4 жыл бұрын
Круто)
@sunnyorange8265
@sunnyorange8265 2 жыл бұрын
Спасибо большое!!!!♥♥♥
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Пожалуйста
@nicefellow7929
@nicefellow7929 4 жыл бұрын
Годно!
@user-rj6ro3mp1p
@user-rj6ro3mp1p 4 жыл бұрын
Мне кажется, что еще можно было добавить про картинки с @х2 пикселями, чтобы браузер сам выбирал какую ему грузить.
@YauhenKavalchuk
@YauhenKavalchuk 4 жыл бұрын
Можно
@TheProtMen
@TheProtMen 3 жыл бұрын
Мое почтение, Евгений
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Благодарю
@user-lj1to7le9w
@user-lj1to7le9w 2 жыл бұрын
Действительно не подозревал о таком теге как figure. Рад что попал на этот канал до, того как закостенел в колхозной верстке.
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
👍
@annavoloshyna3524
@annavoloshyna3524 3 жыл бұрын
Нам на курсах рассказывали только про , остальные варианты вообще не упоминались.
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Плохо(
@mkt111one
@mkt111one 3 жыл бұрын
А что это за курсы были, если не секрет?
@maksimrackomin6424
@maksimrackomin6424 4 жыл бұрын
Здравствуйте! Отличное видео и канал в целом. Скажите пожалуйста, как применение конструкции влияет на количество запросов на сервер?
@YauhenKavalchuk
@YauhenKavalchuk 4 жыл бұрын
Количество запросов увеличивается
@maksimrackomin6424
@maksimrackomin6424 4 жыл бұрын
@@YauhenKavalchuk Спасибо!
@user-ii5ft8mc8g
@user-ii5ft8mc8g Жыл бұрын
Хочу выразить большую благодарность автору. Мало того, что все понятно и это за 5-10 мин видео. Так ещё и "залипаешь" так, что не можешь оторваться. Хотела спросить, а как делать карточки товара? Через figure и figcaption? Просто все через div делают и не заморачиваются
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
Лучше - делать всё верно с точки зрения семантики. На нормальных проектах делают через figure
@user-ii5ft8mc8g
@user-ii5ft8mc8g Жыл бұрын
@@YauhenKavalchuk Спасибо за ответ! Объясню суть ситуации. Я выучилась на SEO и хотела этим заниматься. Мне стало интересно, а что это такое -теги. Посмотрела видео. И теперь я учу фронтенд(до этого я понятия не имела, что это такое) и пришла к этому через SEO. Поэтому семантика для меня не пустое слово. Это небольшая преамбула. Я просто сейчас начинаю потихоньку делать портфолио. И меня саму удивляет, что карточки товаров делают через div. Иногда просто даже пренебрегая h2-h3( что можно использовать для названия товара), тег "p" для его описания, если уж даже делают через div. Даже на авторитетных, каналах тоже через div. Я к чему. Не случится ли такого, что я буду делать через figure, и когда буду искать вакансию меня просто не поймут. Так сказать не случится ли "Горе от ума". Ещё раз спасибо за обратную связь
@rank5011
@rank5011 4 жыл бұрын
а если изображение надо фоном расположить, что лучше для адаптива, background-image или все таки через picture+img+source?
@YauhenKavalchuk
@YauhenKavalchuk 4 жыл бұрын
В идеале на сервере обрабатывать и возвращать разных размеров. Но и background пойдёт)
@waden666
@waden666 3 жыл бұрын
Хотел узнать, допустима ли такая конструкция? Вроде валидатор не ругался, но ругался на вариант вложения, source в figure, без оборачивания в picture. It is a simple description for a picture above
@YauhenKavalchuk
@YauhenKavalchuk 3 жыл бұрын
Конструкция, которую прислали - валидна и правильна. Source нужно оборачивать в picture
@waden666
@waden666 3 жыл бұрын
@@YauhenKavalchuk Большое спасибо!)
@f_anderson428
@f_anderson428 4 ай бұрын
спасибо сам хотел спросить этот вопрос, и спасибо за ответ
@Andrii.W
@Andrii.W Жыл бұрын
я уже и не знаю,как благодарить!!!задонатил бы,но сижу без работы из-за войны.Спасибо!
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
Желание ищет возможность, а нежелание причину
@Andrii.W
@Andrii.W Жыл бұрын
@@YauhenKavalchuk я знаю это) но это так
@Andrii.W
@Andrii.W Жыл бұрын
поддержал немного!)чем богат)
@olenalazarenko5108
@olenalazarenko5108 4 жыл бұрын
а можна использовать вместе с ?
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
Можно
@user-zs8gf4zj7i
@user-zs8gf4zj7i 2 жыл бұрын
Немного не понял разницу между контейнером picture и fig
@iGotton
@iGotton 4 жыл бұрын
+
@YauhenKavalchuk
@YauhenKavalchuk 2 жыл бұрын
👍
@alexandrsorokin1385
@alexandrsorokin1385 Жыл бұрын
не совсем понятно как именно прописывать картинку в html, грубо говоря, у меня есть своя картинка условно на рабочем столе, если я вставляю ее в код с путем, то он мне ее не показывает.
@YauhenKavalchuk
@YauhenKavalchuk Жыл бұрын
В идеале картинка должна лежать в папке с проектом. Браузер, а тем более сервер не откроет картинки находящиеся не понятно где
@alexandrsorokin1385
@alexandrsorokin1385 Жыл бұрын
@@YauhenKavalchuk спасибо) уже допер сам до этого)
@gatrianL
@gatrianL 4 жыл бұрын
Как по мне это очень не практично, допустим у меня есть каталог из 1000 товаров и мне на каждый товар нужно будет делать по 3 media запроса на картинки, к дополнению еще и нарезать эту кучу картинок
@denis_minimal
@denis_minimal 4 жыл бұрын
Я применял такой подход в слайдере. Для мобиле своя картинка, для десктоп своя
@user-rj6ro3mp1p
@user-rj6ro3mp1p 4 жыл бұрын
Рано или поздно, но тебе все равно придется это делать, иначе те же гугл сервисы начнут топить твое детище в выдаче и засыпать красными уведомлениями что картинки не соответствуют размерности и пора все это првиести в порядок.
@TheProfessionalGambler
@TheProfessionalGambler 4 жыл бұрын
А представь как пользователю с мобильного грузить картинку 2к - 4к разрешения с мобильного интернета, а не у всех интернет стоит копейки. А так сразу грузится нужная картинка под конкретный экран.
HTML5 #7 Таблица (Table)
8:04
webDev
Рет қаралды 14 М.
Sprinting with More and More Money
00:29
MrBeast
Рет қаралды 187 МЛН
⬅️🤔➡️
00:31
Celine Dept
Рет қаралды 43 МЛН
Sigma Girl Past #funny #sigma #viral
00:20
CRAZY GREAPA
Рет қаралды 12 МЛН
Изображения в HTML: picture, srcset, sizes, lazy, форматы webp, avif
22:44
Что такое Scrum? Простое объяснение за 5 минут | Scrum методология
5:42
Бизнес-психология от Захидат
Рет қаралды 16 М.
CSS3 #19 Анимации (Animations)
9:11
webDev
Рет қаралды 14 М.
Адаптивные изображения с CSS
13:25
WebForMySelf
Рет қаралды 28 М.
Уроки HTML, CSS / Как наложить текст на картинку
9:05
Изучаем мир ИТ / Олег Шпагин / Программирование
Рет қаралды 33 М.
HTML5 #11 Форма (Form)
10:18
webDev
Рет қаралды 18 М.
Sprinting with More and More Money
00:29
MrBeast
Рет қаралды 187 МЛН