Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

41. Ширина, высота, рамка у изображений в HTML

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

В предыдущем уроке вы научились выравнивать изображения с помощью атрибута align. В этом уроке будем менять ширину и высоту изображений. А еще добавим рамку с помощью атрибута border.

Высота и ширина изображения. Атрибуты height и width

Атрибут height и width применяют для изменения высоты и ширины, соответственно. В нашем случае, применяют для изменения размера изображения. Измеряется размер в пикселях (px) или процентах (%).

Если установлена высота или ширина в процентах, то они зависят от контейнера, в котором находится изменяемый элемент. Если вы хотите сохранить пропорции картинки, то нужно добавить один из атрибутов height или width.

Высоту и ширину можно менять в меньшую сторону, при этом качество изображения не пострадает, но изображение будет грузиться так же (размер изображения остается прежним). При изменении размера в большую сторону, качество может пострадать. У атрибутов height и width есть аналоги в CSS, которые мы изучим позднее. Далее пример использования атрибутов width и height:

Пример (html)
<img src = "/img/site/logo.png" width = "100px" height = "100px"> 

Примечание (10.2024)

Атрибуты width и height давно устарели, поэтому на практике их не используют. Все атрибуты, связанные со «стилизацией» (внешним видом элемента), можно заменить свойствами CSS, о которых мы будем говорить позднее.

Рамка изображения. Атрибут border

Атрибут border добавляет рамку вокруг элемента, в нашем случае, вокруг картинки. Ширину рамки можно задать любой толщины. Далее пример:

Пример (html)
<img src = "/img/site/logo.png" width = "100px" height = "100px" border = "10px"> 

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Примечание (10.2024)

Атрибут border тоже устарел. На практике вы его использовать не будете. Примените только в рамках курса по HTML.

В этом уроке познакомились с атрибутами heightwidth и border. Как мы выяснили, они сильно устарели, не используются на практике и их можно легко заменить стилями CSS.

Примечание (10.2024). Зачем я оставил этот «бесполезный» урок?

На мой взгляд вы получите некоторые базовые навыки, которые в дальнейшем упростят понимание более сложных тем.

В следующем уроке вы научитесь добавлять альтернативный текст (атрибут alt) для изображений. Этот атрибут вы не замените свойствами CSS, поэтому отнеситесь к нему серьезно.

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Что такое изображения в HTMLИзображения в HTML
Выравнивание изображений при помощи HTMLИзображения в HTML
Рамки для таблиц, строк и ячеек в HTMLТаблицы в HTML
Первое знакомство с PythonЗнакомство с Python
Курс по Python от CodebraЗнакомство с Python
Общая информация и форматирование таблицВерстка таблиц
Вводный урок по курсу HTML и CSSЗнакомство с HTML
Единицы измерения длины в CSSЕдиницы измерения
Раздел «Изображения в HTML»
39. УРОК: 1. Что такое изображения в HTML
40. УРОК: 2. Выравнивание изображений при помощи HTML
УРОК 41. 3. Ширина, высота, рамка у изображений в HTML
Вы здесь
42. ПРАКТИКА: 4. Добавляем рамки изображениям
43. УРОК: 5. Альтернативный текст и группировка элементов тегом figure в HTML
44. ТЕСТ: 6. Тест по разделу «Изображения в HTML»
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 5. Таблицы в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно