HTML5 #6 Картинки (Images)
ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- #YauhenK #webDev #HTML #HTML5
Всех приветствую в курсе «HTML5».
В данном видео-курсе мы с вами рассмотрим все возможности языка гипертекстовой разметки HTML.
А это, между прочим, основа каждого веб-сайта, или веб-приложения.
Разберём основы, а так же изучим большинство новых тэгов, которые появились с новым стандартом HTML5.
Дополнительно рассмотрим такие понятия, как:
- Валидация HTML документа.
- Семантика.
- Accessibility, или доступность.
По окончанию курса вы научитесь понимать и разбираться в структуре любого HTML документа.
✒ Репозиторий курса:
✔ GitHub: github.com/Yau...
✒ Используемые ресурсы и инструменты:
✔ Atom (редактор кода): atom.io
✒ Полезные ссылки:
✔ W3 Валидатор: validator.w3.org
✔ Доступность: developers.goo...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ TH-cam: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...
Всё подробно и понятно 👍
Небольшая заметка:
2:11 Хорошая практика задавать хотябы width в атрибуте img тега.
В CSS можно переопределить размеры указанные в атрибутах и они ни как не будут влиять на респонсив дизайн. А заданные размеры в атрибуте img имеют несколько плюсов - браузер понимает размеры изображения до загрузки CSS и отрисовка просиходит без "прыжков" контента на странице. И если вдруг css вообще не загрузится, то картинки не будут растягиватся на всю страницу, что часто случается с векторными изображениями.
Я за курсы 155000 отдал и там этого не расказали. Спасибо автору, очепь приятно смотреть, слушать и впитывать.
Спасибо большое за отзыв
Искренне благодарю, пожалуйста, продолжайте в том же духе
Огромное спасибо за подробное и очень понятное объяснение!
Пожалуйста
Продолжай в том же духе, и ждем так же плейлиста по CSS :D
в целом.большое спасибо. такое мне сейчас на курсе дистанционном государствнного интитута информатики и электроники даже не озвучили. впервые узнала по Вашему видео. Спасибо большое!!!!))))
Большое пожалуйста
Полезно, был не в курсе пока не стал использовать webp форматы
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
Спасибо за поддержку
Отличный курс! Буду смотреть дальше
Спасибо большое
Мне кажется, что еще можно было добавить про картинки с @х2 пикселями, чтобы браузер сам выбирал какую ему грузить.
Можно
Мое почтение, Евгений
Благодарю
Продолжай в том же духе.
Огромное спасибо!
Нам на курсах рассказывали только про , остальные варианты вообще не упоминались.
Плохо(
А что это за курсы были, если не секрет?
Спасибо большое!!!!♥♥♥
Пожалуйста
Отлично 👍👏😆
Действительно не подозревал о таком теге как figure. Рад что попал на этот канал до, того как закостенел в колхозной верстке.
👍
я уже и не знаю,как благодарить!!!задонатил бы,но сижу без работы из-за войны.Спасибо!
Желание ищет возможность, а нежелание причину
@@YauhenKavalchuk я знаю это) но это так
поддержал немного!)чем богат)
Спасибо!
Отлично
Годно!
Хочу выразить большую благодарность автору. Мало того, что все понятно и это за 5-10 мин видео. Так ещё и "залипаешь" так, что не можешь оторваться. Хотела спросить, а как делать карточки товара? Через figure и figcaption? Просто все через div делают и не заморачиваются
Лучше - делать всё верно с точки зрения семантики. На нормальных проектах делают через figure
@@YauhenKavalchuk Спасибо за ответ! Объясню суть ситуации. Я выучилась на SEO и хотела этим заниматься. Мне стало интересно, а что это такое -теги. Посмотрела видео. И теперь я учу фронтенд(до этого я понятия не имела, что это такое) и пришла к этому через SEO. Поэтому семантика для меня не пустое слово. Это небольшая преамбула. Я просто сейчас начинаю потихоньку делать портфолио. И меня саму удивляет, что карточки товаров делают через div. Иногда просто даже пренебрегая h2-h3( что можно использовать для названия товара), тег "p" для его описания, если уж даже делают через div. Даже на авторитетных, каналах тоже через div. Я к чему. Не случится ли такого, что я буду делать через figure, и когда буду искать вакансию меня просто не поймут. Так сказать не случится ли "Горе от ума". Ещё раз спасибо за обратную связь
Круто)
Здравствуйте! Отличное видео и канал в целом. Скажите пожалуйста, как применение конструкции влияет на количество запросов на сервер?
Количество запросов увеличивается
@@YauhenKavalchuk Спасибо!
Хотел узнать, допустима ли такая конструкция? Вроде валидатор не ругался, но ругался на вариант вложения, source в figure, без оборачивания в picture.
It is a simple description for a picture above
Конструкция, которую прислали - валидна и правильна. Source нужно оборачивать в picture
@@YauhenKavalchuk Большое спасибо!)
спасибо сам хотел спросить этот вопрос, и спасибо за ответ
Немного не понял разницу между контейнером picture и fig
не совсем понятно как именно прописывать картинку в html, грубо говоря, у меня есть своя картинка условно на рабочем столе, если я вставляю ее в код с путем, то он мне ее не показывает.
В идеале картинка должна лежать в папке с проектом. Браузер, а тем более сервер не откроет картинки находящиеся не понятно где
@@YauhenKavalchuk спасибо) уже допер сам до этого)
а если изображение надо фоном расположить, что лучше для адаптива, background-image или все таки через picture+img+source?
В идеале на сервере обрабатывать и возвращать разных размеров. Но и background пойдёт)
а можна использовать вместе с ?
Можно
+
👍
Как по мне это очень не практично, допустим у меня есть каталог из 1000 товаров и мне на каждый товар нужно будет делать по 3 media запроса на картинки, к дополнению еще и нарезать эту кучу картинок
Я применял такой подход в слайдере. Для мобиле своя картинка, для десктоп своя
Рано или поздно, но тебе все равно придется это делать, иначе те же гугл сервисы начнут топить твое детище в выдаче и засыпать красными уведомлениями что картинки не соответствуют размерности и пора все это првиести в порядок.
А представь как пользователю с мобильного грузить картинку 2к - 4к разрешения с мобильного интернета, а не у всех интернет стоит копейки. А так сразу грузится нужная картинка под конкретный экран.