Май 14, 2020 Запись была обновлена
Урок 4. Изображения
Здравствуй, уважаемый читатель.
В данной статье мы поговорим о изображениях. После прохождения урока вы узнаете как вставить изображение на сайт, изменить его положение относительно текста, а также изменять его размер.
Это четвертая статья, посвященная изучению 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 | Выравнивается по самому высокому элементу текущей строки. |  |
Сегодня мы рассмотрели как вставляются изображения. Всё очень просто. Пробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.
Больше практикуйтесь!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Здравствуйте!Не могли бы Вы показать как прописывается код.После фразы «Сначала посмотрим как это выглядит в коде:» нету никакого кода.Исправьте пожалуйста,а то мое обучение на этом остановилось((
Дмитрий, приношу свои извинения. Исправил 🙂 !
<h5> </h5>
научите
У меня еще вопрос)А куда именно в текстовом редакторе нужно прописывать код изображения?
Дмитрий, код необходимо вставлять между тегами <body> </body>.
4 урок мне не понятен, нет примера куда и как вставлять атрибуты и значения. А ещё я не пойму как рисунок на сайт прилипить
Я опробовал урок не знаю сколько раз почему из атрибута align cрабатывает только type="left" и всё ??
Здравствуйте, Олег!
Сейчас данный атрибут уже устарел. Его нужно знать только для того, чтобы исправить ошибку, если вы заметили его применение на каком-либо сайте.
Чтобы выровнять изображение необходимо использовать CSS свойство text-align. Пройдите до конца уроки по основам HTML, а затем переходите к CSS где вас ждет урок по выравниванию: https://sitehere.ru/urok-6-oformlenie-teksta
Спасибо Огромное за уроки и ответ !
Добрый день!
Помогите, пожалуйста, разобраться с кодом вставки изображения:
<html>
<head>
<title>Изучение HTML</title> <meta charset="utf-8">
</head>
<body>
<p>фрукты</p>
<ol>
<li>банан</li>
<li>яблоко</li>
<li>груша</li>
</ol>
<img src="C:\Users\vital\Desktop\фрукты.jpg" alt="фрукты" width="200" height="200">
<img src="C:\Users\vital\Desktop\другие фрукты.jpg" alt="другие фрукты" width="200" height="200">
</body>
</html>
Первое изображение вставляется, а второе нет,хотя все идентично. Где расположены изображения тоже одинаково. Если все заново начинаю набирать код для изображения, то потом вообще не вставляются уже ни одно ни другое. Как будто случайно первый раз вставилось изображение. В чем моя ошибка?
Виталий, во втором случае у вас пробел в названии изображения.
Добрый день, Юрий. Никак не пойму, почему вместо рисунка у меня только маленький квадратик?
Добрый день!
Пришлите, пожалуйста, код HTML, чтобы я мог вам помочь.