Это — урок о том, как вставить картинку в HTML, как оформить изображение, как сделать обтекание картинки текстом и т. д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег < IMG> и его атрибуты весьма пригодится в современном Интернете. Но главное тут — чувство меры!
Переизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру и добавляй картинки в HTML только там, где это нужно. И будет тебе счастье!
В уроке про атрибуты тега «Body» я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
Содержание урока:
§1. Как вставить картинку в HTML
Для вставки картинок в HTML, используется тег «IMG» с обязательным атрибутом «SRC». Этот атрибут указывает браузеру путь к файлу изображения.
Т. е. для вставки картинки с названием logo.jpg в определённое место страницы сайта (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:
Если картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы.
Например, если html-страница лежит в каталоге (папке) «site», в этом же каталоге (папке) расположен подкаталог (папка) «images», в котором и находится наша картинка «logo.jpg», то для её вставки нужно написать так:
А можно не мучаться и указать полный адрес картинки. Например, так:
В последнем случае, браузер отобразит код так:
!
Если картинка расположена на вашем компьютере, а вставить вы её хотите на страницу в Интернете, то ничего не выйдет. Для этого, картинку нужно сначала переместить в какое-нибудь место в Интернете (например, на файловый хостинг). И указать в коде страницы полный адрес до этого места с картинкой.
Помимо обязательного атрибута «SRC», у тега «IMG» есть ещё несколько необязательных атрибутов. Рассмотрим их подробнее.
§2. Указание размеров картинки в HTML
Начнём с атрибутов, которые позволяют задать размеры картинки в HTML (точнее, застолбить место под эти размеры на страницы). Вот они:
- width — ширина картинки в пикселах или процентах;
- height — высота картинки в пикселах или процентах.
Если используются эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом, он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмёт) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.
Ширину и высоту изображений в HTML можно указывать как в пикселях (при этом, размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:
Или:
§3. Альтернативный текст у изображений в HTML (атрибут «ALT»)
В случае, если пользователь в настройках браузера отключил показ изображений, то в HTML можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путём применения атрибута «ALT»:
В этом случае, браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута «ALT»:
Повторю, это произойдёт, если пользователь отключил показ графики. Если же нет, то картинка скроет собой альтернативный текст.
§4. Выравнивание картинки в HTML
С помощью уже знакомого тебе атрибута «align», в HTML можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута «align» есть несколько значений, но нас больше всего, на данный момент, интересуют два:
- left — изображение располагается у левого края страницы, а текст «обтекает» картинку справа;
- right — изображение располагается у правого края страницы, а текст и другие элементы «обтекают» картинку слева.
Например, HTML-код:
< img src="logo.jpg" align="left">
< p>Это — мой аватар на форумах и в различных сервисах< /p>
Браузер покажет так:
Это — мой аватар на форумах и в различных сервисах
А этот HTML-код:
< img src="logo.jpg" align="right">
< p>Это — мой аватар на форумах и в различных сервисах< /p>
Будет выглядеть вот так:
Это — мой аватар на форумах и в различных сервисах
Для прекращения «обтекания» картинки текстом в HTML, можно использовать тег «BR» (знакомый нам из прошлого раздела про форматирование текста).
У тега «BR» есть атрибут «clear», который может принимать три значения:
- left — прекращение «обтекания» текстом картинок, выровненных по левому краю;
- right — прекращение «обтекания» текстом картинок, выровненных по правому краю;
- all — прекращение «обтекания» текстом картинок, выровненных и по левому, и по правому краю.
Пример кода HTML:
< img src="logo.jpg" align="left">< br clear="all">
< p>Это — мой аватар на форумах и в различных сервисах< /p>
Тогда в браузере увидим следующее:
Это — мой аватар на форумах и в различных сервисах
§5. Создание отступов вокруг картинки
По умолчанию, в HTML картинки встраиваются в страницу почти вплотную к тексту и другим элементам. Если такое отображение графики не устраивает, то можно задать отступы вокруг изображений. Делается это с помощью следующих атрибутов тега «IMG»:
- vspace — создаёт верхний и нижний отступы;
- hspace — создаёт боковые отступы (слева и справа).
Значения этих атрибутов указывается в пикселях. Например, если мы немного дополним предыдущий пример:
< img src="logo.jpg" align="left" vspace="5" hspace="20">
< p>Это — мой аватар на форумах и в различных сервисах< /p>
То получим следующее:
Это — мой аватар на форумах и в различных сервисах
Или сделаем отступы у изображения так:
< img src="logo.jpg" align="left" vspace="5" hspace="20">< br clear="all">
< p>Это — мой аватар на форумах и в различных сервисах< /p>
Тогда получим такое:
Это — мой аватар на форумах и в различных сервисах
Сравни это с тем, как вся «композиция» выглядела раньше (выше).
§6. Рамка вокруг картинки в HTML
Вокруг картинок в HTML можно создать чёрную рамку с помощью атрибута «border». Значение этого атрибута указывается в пикселях и определяет толщину рамки. Например, HTML-код:
В браузере выглядит так:
§7. Заключение
На этом раздел о тегах HTML, которые нужны для вставки картинок на страницы сайта и их оформления, можно считать завершённым. В следующем разделе, поговорим о том, как создаются ссылки, и о том, как сделать ссылку-картинку в HTML.
Автор и эксперт: Алексей Востров.
Ещё материалы по этой теме:
- Покупка и продажа ссылок
- Как создать свой сайт
- Заработок в Интернете
- Заработать в Интернете деньги
- Вставка PHP в HTML
Комментарии:
Ярик-шмарик
1 мар 2015 в 17:55
А в html вставить картинку на сайт можно только вашим способом? А то в разных же конструкторах сайтов изображения на сайт загружаются через кнопу Добавить. И там потом сами встают.
Сеодед.ру
1 мар 2015 в 21:09
В HTML картинки вставляются только способом, описанным в уроке. Он единственный. Других способов добавить изображение нет.
В конструкторах сайтов через кнопку «Добавить» изображение загружает и размещает система управления контентом (так называемая, CMS).
Если ты откроешь исходный текст страницы сайта, то увидишь, что изображение вставлено с помощью тега «IMG» и его атрибутов. Их добавляет CMS.
Ярик-шмарик
5 мар 2015 в 15:42
А как открыть исходный код в интернет-браузере?
Сеодед.ру
5 мар 2015 в 20:15
В браузере это можно сделать, кликнув по странице правой кнопкой мыши и в открывшемся меню выбрать пункт «Исходный код» или что то напободобие.
Арик
19 апр 2020 в 07:15
Атрибут alt тэга img используют поисковики для ранжирования в поиске по картинкам. Поэтому заполнение альта нужными ключевиками очень хорошо для СЕО.
Сеодед.ру
19 апр 2020 в 15:21
Да, я сказал об этом в уроке.
Кант
21 июн 2021 в 09:33
Вы не рассказали о правильной компрессии картинок и про форматы изображений вообще.
С Днём рождения, кстати.
Сеодед.ру
21 июн 2021 в 12:29
Спасибо.
Этот урок — про то, как делается вставка изображения в html и только об этом. Компрессия с форматами — сильно выходят за рамки темы урока.
Кант
23 июн 2021 в 12:25
Ещё вопрос про обтекание текстом картинки html и оформление всего этого хозяйства.
Как сделать, чтобы и картинка прижималась вправо и текст тоже тужа смещался? А то в случае когда текст короток, между ним и картинкой слишком много пустого пространства остаётся.
Сеодед.ру
23 июн 2021 в 19:35
Про выравнивание текста — в прошлом уроке (откроется в новой вкладке).