Вставьте картинки с HTML - как это работает
Видео по теме: (May 2024).
Если вы хотите вставить изображение на свой сайт с HTML, используйте тег img. Прочитайте здесь, как именно это работает и на что нужно обратить внимание.
Как вставить изображения с HTML - основы
- С днём
можно вставить картинки. - Источник изображения указан в теге:
вставляет файл «testbild.webp» из подпапки «картинки» на сайт. - Внешние источники через URL также возможны:
интегрирует логотип CHIP с наших серверов.
HTML-атрибуты для встроенных изображений
Многочисленные атрибуты могут быть добавлены в тег img:
- Используйте «ширину» и «высоту», чтобы определить размер изображения на сайте: изображение
отображается квадрат с длиной стороны 100 пикселей. - С помощью «alt» вы определяете альтернативный текст, который отображается, если соответствующее изображение не может быть загружено. Вы должны всегда устанавливать этот атрибут при вставке изображений с HTML.
- Атрибут «border» определяет толщину рамки в пикселях. Картинка с
имеет рамку, которая является относительно толстой с пятью пикселями. - Используйте «выравнивание» для выравнивания графики. Значения этого атрибута: «нижний», «верхний», «средний», «левый», «правый» и «центр».
- С помощью «hspace» и «vspace» вы можете (по горизонтали и по вертикали) установить расстояние до изображения.
Какой формат мне использовать?
Существуют различные форматы изображений, которые вы можете включить в код HTML.
- JPG: изображения в формате JPG чаще всего используются для веб-страниц. Этот формат представляет 16, 7 млн. Цветов. Кроме того, JPG может быть сжат очень хорошо. Таким образом, файл изображения может быть очень маленьким, что обеспечивает быструю загрузку.
- PNG: формат PNG также может отображать 16, 7 миллионов цветов и может быть сжат. Преимущество перед форматом JPG состоит в том, что сжатие возможно без потерь.
- Области, определенные в формате PNG, также могут отображаться прозрачно. Однако очень старые браузеры имеют проблемы с отображением прозрачных пленок.
- GIF: если вы хотите вставить движущиеся изображения с HTML, формат GIF подходит. В этом формате отображается только 256 цветов, и сжатие происходит автоматически без каких-либо настроек.
- Формат GIF больше всего подходит для небольшой анимированной графики или логотипов. Чтобы логотипы гармонично вписывались в страницу, прозрачные пленки можно использовать в формате GIF, например PNG.
пример HTML
- Это объединяет логотип CHIP с нашего сайта.
- Он отображается с высотой 100 пикселей и шириной 200 пикселей.
- Если его невозможно загрузить, «ЧИП-логотип» отображается в виде пустого текста.
- Картинка обрамлена двухпиксельной рамкой.
- Он выровнен по правому краю и находится на расстоянии 50 пикселей от других боковых элементов.