Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Для изображения, которое вам дано, сделайте ширину (
width)50px
В предыдущем уроке вы научились выравнивать изображения с помощью атрибута align. В этом уроке будем менять ширину и высоту изображений. А еще добавим рамку с помощью атрибута border.
Высота и ширина изображения. Атрибуты height и width
Атрибут height и width применяют для изменения высоты и ширины, соответственно. В нашем случае, применяют для изменения размера изображения. Измеряется размер в пикселях (px) или процентах (%).
Если установлена высота или ширина в процентах, то они зависят от контейнера, в котором находится изменяемый элемент. Если вы хотите сохранить пропорции картинки, то нужно добавить один из атрибутов height или width.
Высоту и ширину можно менять в меньшую сторону, при этом качество изображения не пострадает, но изображение будет грузиться так же (размер изображения остается прежним). При изменении размера в большую сторону, качество может пострадать. У атрибутов height и width есть аналоги в CSS, которые мы изучим позднее. Далее пример использования атрибутов width и height:
<img src = "/img/site/logo.png" width = "100px" height = "100px">Атрибуты width и height давно устарели, поэтому на практике их не используют. Все атрибуты, связанные со «стилизацией» (внешним видом элемента), можно заменить свойствами CSS, о которых мы будем говорить позднее.
Рамка изображения. Атрибут border
Атрибут border добавляет рамку вокруг элемента, в нашем случае, вокруг картинки. Ширину рамки можно задать любой толщины. Далее пример:
<img src = "/img/site/logo.png" width = "100px" height = "100px" border = "10px">
Атрибут border тоже устарел. На практике вы его использовать не будете. Примените только в рамках курса по HTML.
В этом уроке познакомились с атрибутами height, width и border. Как мы выяснили, они сильно устарели, не используются на практике и их можно легко заменить стилями CSS.
На мой взгляд вы получите некоторые базовые навыки, которые в дальнейшем упростят понимание более сложных тем.
В следующем уроке вы научитесь добавлять альтернативный текст (атрибут alt) для изображений. Этот атрибут вы не замените свойствами CSS, поэтому отнеситесь к нему серьезно.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
