Здравствуй, уважаемый читатель.
В данной статье мы поговорим о изображениях. После прохождения урока вы узнаете как вставить изображение на сайт, изменить его положение относительно текста, а также изменять его размер.
Это четвертая статья, посвященная изучению html. Перед прочтением данного урока рекомендую пройти предыдущие уроки: Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Теория и практика
Благодаря изображениям наша страница становится красочной и привлекательной. Изображений на сайте очень много. Но не все изображения оптимальны для сайта. Некоторые необходимо оптимизировать, чтобы они загружались максимально быстро. Но об этом мы поговорим в следующих статьях. Изображение вставляется с помощью тега <img>. Но также при вставке изображения необходимо указывать его параметры(ширину и высоту) и адрес где лежит изображение.
Сначала посмотрим как это выглядит в коде:
1 | <img src="fruits.jpg" alt="Фрукты" width="246" height="205"> |
Как картинка выглядит в браузере:
Сейчас давайте разберемся с атрибутами по порядку:
src="fruits.jpg" — указывает где находится изображение. Обязательно необходимо указывать с расширением изображения! У нас расширение это ".jpg". В данном случае оно находится в одной папке с html страницей. Если бы это изображение было в папке images, то в данном атрибуте необходимо было написать src="images/fruit.jpg".
width="246" — указывает ширину изображения в пикселях.
height="205" — указывает высоту изображения в пикселях.
alt="Фрукты" — это альтернативный текст для изображения. Он очень важен при индексировании вашего сайта роботом. !!! Обязательно прописывайте его для каждого изображения, не ленитесь!
Мы рассмотрели как вставляются изображения. А сейчас посмотрим как изображение может менять положение относительно текста. Добавим немного текста.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>Моя первая html страница</title> </head> <body> <p>Фрукты</p> <ul type="disc"> <li>Банан</li> <li>Яблоко</li> <li>Персик</li> </ul> <img src="fruits.jpg" alt="Фрукты" width="246" height="205"> <p>Morbi quis rutrum nulla. Quisque lacinia turpis nisl, non mollis nisl vestibulum at. Duis neque leo, congue at ultricies non, pharetra sed mauris. Proin elementum fringilla quam, non viverra justo luctus id. In ipsum lacus, commodo in porta ac, ultrices ac leo. </p> </body> </html> |
У тега <img> есть такой атрибут align. Он может принимать значения: bottom, left, middle, right, top.
Ниже представлены изображения страница с разными значениями параметра align.
| bottom | Данный параметр выравнивает нижнюю границу изображения по окружающему тексту. | |
| left | При использовании значения left он выравнивает изображение по левому краю окна. | |
| middle | Середина изображения находится по базовой линии текущей строки. | |
| right | При использовании значения right он выравнивает изображение по правому краю окна. | |
| top | Выравнивается по самому высокому элементу текущей строки. |
Сегодня мы рассмотрели как вставляются изображения. Всё очень просто. Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.