Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):
Если не указывать изображению никаких дополнительных атрибутов, то оно будет выведено в полный размер, а нужно это бывает далеко не всегда. К счастью, желаемый размер рисунку можно задать при помощи атрибутов width
(указывает ширину) и height
(определяет высоту). Размеры можно записывать либо в пикселях, либо в процентах. Во втором случае процент обозреватель будет высчитывать от родительского элемента (например, абзаца, в который вставлена картинка).
О том, как сделать картинку ссылкой, мы говорили в предыдущей статье. Однако HTML позволяет задавать на одном изображении не одну ссылку, а сразу несколько. В результате пользователь, щёлкая на разные места одной картинки, будет переходить по разным интернет-адресам. Эту возможность можно использовать, например, для создания эффектного меню, интерактивных тестов или наглядных графических моделей.
Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:
Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg
. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.
1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:
2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).
3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:
4. С помощью тегов area определяем активные области:
5. Закрываем карту:
Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:
Несмотря на то, что в качестве примера был рассмотрен самый простой случай, который только можно придумать, он наглядно демонстрирует принцип создания навигационных карт. Дальше - дело техники и определения координат, с точки зрения HTML ничего не усложняется.
Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Изображения моментально дают нам понять, насколько данный сайт или статья могут быть для нас интересными, создают настроение, по новому могут раскрыть тему. Иногда одно фото стоит тысячи слов.
Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:
были информативными
соответствовали цветовой гамме вашего сайта
были уместны
Если у вас нет подходящего фото, можно воспользоваться так называемым фотостоком
(фотобанком
) - местом, где хранится множество фотографий, иллюстраций и векторной графики. Таких ресурсов море, вы возможно даже слышали об одном из крупнейших - Shutterstock, но скачивания там платные.
Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус
- список нескольких фотобанков
, где можно скачать огромное количество качественных красивых материалов совершенно бесплатно 🙂
Форматы изображений
Во Всемирной паутине в основном используются 3 вида изображений:
gif
(Graphics Interchange Format - формат для обмена изображениями
)
это первый формат, который начал использоваться в интернете. Плюсы такого формата - наличие анимации
и маленький размер, страница загружается быстро. К тому же он поддерживает прозрачность. Недостаток - используется только 256 цветов
(собственно потому и размер маленький), т.е. его нельзя использовать для полноцветных изображений.
jpeg
, он же jpg
(Joint Photographic Experts Group - Объединенная группа экспертов по фотографии -
так называется организация-разработчик)
подходит для создания полноцветных, высококачественных изображений, фотографий
. Размер таких картинок велик, поэтому они обычно дают большую нагрузку на сервер. Если нужно сжать jpeg (для меньшего веса картинки) рекомендуем брать размер итогового изображения кратный восьми
, так потери качества будут минимальными.
png
(Portable Network Graphics - Портативная сетевая графика
. Произносится так же как ping, т.е. )
этот формат изначально разрабатывался для веба, т.е. изображение обычно мало "весит" и не тормозит страницу при загрузке. Этот формат создан на замену устаревшего gif, но в отличие от него, не поддерживает анимацию. Png-8
, как и gif, использует всего 256 цветов. Формат png-24
поддерживает 16 млн цветов, правда и вес уже немаленький. Png-32
содержит столько же цветов, как и png-24, и плюс к этому позволяет получить изображение с прозрачным фоном
, причем можно регулировать степень прозрачности. При уменьшении размеров png не происходит потери в качестве цвета.
Подытожим
gif
- для анимации
jpeg
- для фотографий
png
- для иконок, кнопок, фонов, логотипов, скриншотов, чертежей, текстов, фотографий с прозрачным фоном
Вставка изображения в html-файл
Для добавления картинки на страницу используется тег
(от англ. image - изображение, картинка).
Это одиночный тег, ему не нужен закрывающий. Внутри этого тега содержатся атрибуты.
Атрибут
src
(от англ. source - источник) указывает путь к файлу (место, где лежит изображение). Если картинка лежит у вас на компьютере (пока сайт только в процессе разработки) или на вашем сервере - используйте относительную ссылку. Если имидж из сети, тогда нужна абсолютная ссылка. Как это сделать читайте в статье "Ссылки ".
Итак, чтобы подключить изображение к вашей веб-странице, нужно написать такой код:
Атрибут alt
(от англ. alternative - альтернатива) указывает текст, который увидит пользователь, если изображение не загрузится. Неправильно указан путь, картинка удалена, плохой интернет - причин может быть много, и желательно, чтобы человек понял, что же кроется за этой ненавистной иконкой.
Поисковики обращают пристальное внимание на то, чтобы этот атрибут был заполнен. А html валидатор (ресурс для проверки кода на правильность) воспримет отсутствие атрибута alt как ошибку. Если же все атрибуты будут заполнены, да еще и содержать по возможности ключевые слова - видимость вашего сайта ощутимо повысится, т.е. его чаще будут показывать на поиске. Это из области SEO, а на данном этапе нам достаточно знать, что есть такой атрибут, и у "живого" сайта он должен быть заполнен. Пока сайт лежит у нас на диске - его вполне можно оставить пустым.
В примере ниже мы умышленно указали несуществующий путь для изображения, чтобы вы увидели, как работает атрибут alt
Высота и ширина изображений
Также можно установить высоту и ширину изображения, если оригинальная картинка напр. больше, чем вам нужна.
В HTML5 это рекомендуется делать с помощью CSS или атрибута style
, вот так:
В данном примере мы взяли 30% от ширины, но не оригинального имиджа, а размера окна браузера. Когда ширина = 100%, то изображение открывается на всю ширину браузера. Запомните эту особенность процентов
, как единицы измерения.
Кстати, если бы мы написали только ширину, результат был бы тот же, попробуйте:
<
img
src
=
"https://сайт/tutorials/wp-content/uploads/2016/07/panda.jpg"
alt
=
"панда на дереве"
style
=
"width:30%;"
>
Также ширину и высоту можно задавать в пикселях.
В случае с нашей пандой, у которой исходные размеры 1196 х 796 пикселей, чтобы при сжатии животное не пострадало, нам нужно сохранить пропорции, а здесь без калькулятора не обойдешься. Допустим, мы хотим уменьшить размер картинки в 3 раза, тогда нам нужно прописать размеры 399 х 265 пикселей.
Обратите внимание, если мы увеличиваем изображение пропорционально, то достаточно указать только один параметр, напр. ширину. Умный браузер сам вычислит полный размер картинки.
Попробуйте запустить такой код и посмотрите на результат:
<
img
src
=
"https://сайт/tutorials/wp-content/uploads/2016/07/panda.jpg"
alt
=
"панда на дереве"
style
=
"width:399px;"
>
Всегда устанавливайте размеры изображения. Обычно картинки грузятся дольше, чем остальной html-код. Если браузер будет знать, сколько места резервировать на имиджи, он сможет продолжить загрузку сайта не дожидаясь, пока загрузятся изображения.
Немножко нафталина
Если вам доведется ковыряться в коде сайта, созданного на HTML-4 или еще более ранних, то вы заметите, что размеры изображений устанавливаются с помощью специальных атрибутов width
и height
. Это устаревший метод, хотя всё еще валидный в HTML5. Тем не менее советуем использовать style, т.к. на атрибуты width
и height могут влиять внутренние или внешние стили, которые будут жить в браузере или вашем CSS-файле. Мы остановимся на этом детальней, когда будем рассматривать CSS, а пока просто посмотрите пример, как стили влияют на атрибуты высоты и ширины.
В этом окне 3 вкладки: на первой вы видите html-код, на 2-й код CSS, ну а на последней - как всегда результат. Это работает, как если бы первая вкладка была файлом index.html, вторая - файлом style.css, а третья браузером. Так вот, сейчас в нашем CSS написано, что все элементы с тегом img имеют ширину 100%. Размеры атрибутов width
и height по умолчанию в пикселях, поэтому здесь не надо дописывать никаких единиц.
Разница в результате на лицо 🙂
Также в старых версиях html использовались такие атрибуты:
align
, с помощью которого выравнивалось изображение по горизонтали или вертикали.
hspace
- отступ слева и справа от изображения до окружающего контента (напр. текста или соседней картинки)
vspace
- отступ сверху и снизу от картинки до контента вокруг.
border
- задавал толщину рамки вокруг изображения (по умолчанию она равна нулю)
Сейчас все эти манипуляции (и гораздо больше) делаются с помощью CSS, поэтому мы решили здесь не забивать вам этим голову. Если все же интересно, как работать с этими атрибутами - пишите в комментариях, мы добавим этот пункт 🙂
Размещение картинки в коде
От того, где мы расположим наш тег зависит то, как он будет отображаться в браузере.
Пример №1 - перед параграфом:
Такие элементы как
И
относятся к блочным элементам
. Они всегда начинаются с новой строки и занимают всю доступную ширину окна браузера. Если сначала разместить , а после него блочный элемент, например параграф, то он будет перенесен на следующую строку.
Пример №2 - в начале параграфа
это встроенный элемент, он помещается внутри блочного и не начинает новую строчку. В примере выше текст обтекает изображение, так как код прописан внутри
Подписи к иллюстрациям
Чтобы пометить или подписать фото на странице используется тег
(от английского figure - рисунок). Этот тег указывает на то, что внутри него помещается контент типа иллюстраций, фотографий, диаграмм и т.п.
Тег
(заголовок рисунка) позволяет добавить подпись к изображению. Вот как это работает:
Обратите внимание, что по умолчанию у браузера существуют некоторые настройки стиля для тега , в частности слева и справа есть отступы по 40 px.
Итак, мы с вами научились
добавлять изображение на страницу: с помощью тега
узнали обязательные атрибуты для этого тега: src
для указания пути и alt
для описания картинки
поняли какой формат лучше для чего использовать: jpeg
для фотографий, png
для логотипов и скриншотов, gif
для анимации
как лучше задать картинке размеры: с помощью атрибута style
с параметрами width
и height
разобрались как будет отображаться картинка в зависимости от места в коде: отдельно
, если перед блочным элементом и с обтеканием
, если внутри блочного элемента (например )
А чтобы нам было с чем работать, нужно откуда-то взять эти изображения, при этом не нарушив ничьих авторских прав.
Значит, пришло время бонуса 🙂
Список бесплатных фотобанков
Прежде, чем начнём, обратите внимание, что каждый скриншот здесь - это ссылка на сайт. Как делать изображения в виде ссылок, читайте в статье "Ссылки ".
На pixabay вы найдете 680 тыс. бесплатных изображений на любую тематику, которые распространяются по лицензии Creative Commons CСО (CC Zero), т.е. их можно использовать, распространять, изменять в любых целях, даже коммерческих.
В фотобанке 390 тыс. бесплатных фото и картинок. Здесь сложнее найти крутой имидж, но тоже попадаются неплохие экземпляры. Порядком отвлекает реклама платных фотобанков. Мы поставили этот ресурс на второе место из-за количества изображений, но по дружелюбности он будет пожалуй на последнем в нашем рейтинге.
У фотостока более 250 тыс. бесплатных фотографий, в основном высокого качества. Можно скачивать даже без регистрации. Доступен только на английском.
На множество стильных фотографий под лицензией CC Zero. Можно качать без регистрации. Этот фотобанк тоже поймет вас только по английски.
Сайт создан Индийским веб-дизайнером, который понимает, как тяжело бывает найти качественное фото. Все фотографии сняты лично им, и с ними можно делать что угодно. Любит фотографировать еду, рабочий стол, компьютеры и всякие предметы. Поиск - только на английском.
Далее рассмотрим, как вставить картинку в html документ и настроить ее отображение. Для работы понадобится только вышеупомянутый редактор и браузер .
Если все же у вас нет Notepad++ или проблема с его скачиванием и вас мучает вопрос - как вставить картинку в html в блокноте?
Ответ прост, работа в обычном блокноте отличается лишь тем, что в нем отсутствует подсветка кода разными цветами, для удобочитаемости и разделения кода от самого текста.
Как вставить картинку в HTML страничку После установки редактора, в контекстном меню, выпадающем по правому клику на любой файл, появится соответствующий пункт.
Теперь для редактирования такого файла достаточно вызвать контекстное меню правым кликом по нему, далее «Edit with Notepad++».
Для наблюдений результатов изменений в коде будет использована тестовая страница.
Чтобывставить картинку в htmlкод используется одиночный строчный тегimg
. Основной его атрибут – источник фото.
Это может быть любой файл, на жестком, так и ссылка на существующее в сети изображение. Обрамляется тегами<
p>p>
.
Для добавления фото, понадобится вписать такую строку:
. Вот так она будет выглядеть в редакторе:
А вот так ее наличие отобразится на странице:
Src
указывает на источник картинки. Одного названия файла достаточно, если файл с изображением находится в одной с документом html директории.
Если фото находится в другой директории, то понадобится указывать путь к нему, начиная с папки, в которой располагается html-файл.
Совет!
Важно учитывать, что в пути к заданному файлу фото не должно быть кириллических символов. К тому же при написании названия файла важен регистр.
В качестве источника можно использовать иллюстрацию из сети. Для этого понадобиться только указать ссылку на него в атрибуте, вместо расположения на винчестере.
Таблица форматирования пути к файлу
Чтобы изменить размер изображения понадобится добавить два атрибута:width
иheight
. Значение оформляется так же, как и для любого атрибута.
После знака равенства необходимо указать размер в пикселях.
При наличии четко заданных размеров иллюстрации, отображаться на странице она будет следующим образом:
Выравнивание и редактирование картинки Как вставить фото в html по центру? Для назначения положения картинки на странице служит align
, относящий к тегуp
.
Для него допустимо несколько значений:center
(центр),left
(левый край) иright
(правый край).
Вот выглядит изображение на странице с прилеганием к центру и правому краю.
Важно!
Чтобы назначить расположение фото относительно текста, а не страницы, атрибутalignнужно использовать в тегеimg.Значения такие же, как и у атрибута тегаp.
В зависимости от заданного значения, изображение будет менять свое положение относительно текста.
Чтобы разместить изображение в тексте, достаточно вписать тегimg
(со всем обрамлением) в текстовом блоке в .
Для добавления рамки используется атрибут border с числовым значением, которое означает толщину рамки в пикселях.
Чтобы задать вертикальный и горизонтальный отступы, используются vspace
иhspace
. Их числовое значение означает расстояние от текста до картинки, непосредственно в пикселях.
В примере атрибутуvspace
задано значение в 50 пикселей.
Размер горизонтального отступа укажет расстояние, на котором будет находиться текст при обтекании изображения.
Еще два полезных атрибута –alt
иtitle
. Первый задает альтернативный текст изображению.
С ним, если изображение по каким-то причинам не подгрузится, то вместо него отобразится указанный в значении атрибута текст.
Для того, чтобы испробовать возможности атрибута, можно переместить файл из директории, указанной в коде.
Текст, указанный как значение атрибутаtitle
, будет выводить подсказку при непосредственном наведении мыши на картинку. В коде его оформление не отличается от прочих атрибутов.
После обновления страницы результат будет таким:
Таблица атрибутов тегаimg
Описание
src
=””
Указатель источника изображения. Может использоваться как сохраненное на жестком диске, так и размещенное в сети (указывается адрес вместо расположения на жестком диске).
width
=””; height=””
Указатели высоты и ширины изображения. Если задан только один, то второй автоматически масштабируется, в соответствии с первым. Числовое значение означает количество пикселей.
align=
””
Атрибут расположения изображения относительно текста. Допустимые значения:top,
middle,
bottom,
left,
right
.
border
=””
Назначает рамку вокруг изображения. Числовое значение соответствует толщине рамки в пикселях.
vspace
=””; hspace=””
Указатели отступа от соседних элементов по вертикали и горизонтали. Значение указывает количество пикселей между элементами. При обтекании текстом, атрибут назначает расстояние до текста.
alt
=””
Назначает альтернативное описание на случай, если картинка почему-то не прогрузилась. Значение произвольное.
title
=””
Задает текст подсказки при наведении. Значение произвольное.
голос[ов]
Изображения в HTML
давно завоевали заслуженную популярность
среди создателей сайтов. Они активно
используются в дизайне сайтов, для
наглядного дополнения текстовой
информации, для оформления ссылок и Бог
знает для чего еще.
Важным составляющим
любого изображения является его размер
(объем, вес) в килобайтах, ведь чем он
больше, тем дольше будет загружаться
HTML-страница. Поэтому в интернете
существует три самых распространенных
формата, которые содержат оптимальное
соотношение размер-качество изображения -
это GIF, JPG (JPEG) и PNG.
Тег или
как вставить изображение в HTML?
Для вставки
изображения в HTML страницу используется
тег . Это самый обычный встроенный
(inline, уровня строки)
элемент, то есть он не создает впереди
и после себя переводы строк в начало.
Но вот содержимого у него не может быть,
так как не имеет закрывающего
тега и является пустым
.
У тега есть
два обязательных
атрибута
-
это src, который указывает путь (URL) к
изображению и alt, выводящий альтернативный
текст, когда в браузере отключен показ
изображений. Если src вы вряд ли забудете
указать, ведь без него изображение
просто-напросто не загрузится, то про
alt очень часто забывают даже опытные
вебмастеры.
Атрибут src использует
абсолютно такие же значения адресов,
что и атрибут href тега , только ведут
они к изображениям. Ну и, естественно,
можно указывать как абсолютные, так и
относительные адреса.
Пример вставки
изображений в HTML-страницу
Вставка
изображений в HTML
Такие вот разные
птицы.
Результат в браузере
Изменение размеров
изображений в HTML
По умолчанию все
браузеры показывают изображения в их
натуральные размеры. Но при помощи
атрибутов width и height тега можно
изменить их высоту и ширину. Значения
указываются в числах, которые означают
размеры в пикселях (ставить в конце
чисел буквы px не нужно) или процентах,
в этом случае в конце надо поставить
знак %.
Пример изменения
размеров изображений
Изменение
размеров изображений
Результат в браузере
Не следует
злоупотреблять изменением размеров,
так как при визуальном уменьшении
изображений, их объем в килобайтах не
уменьшается, соответственно они
загружаются столько же времени. А при
увеличении изображений могут появиться
размытости и другие искажения.
Тем не менее, лучше
всегда указывать размеры изображений,
даже если вы их не меняете. В этом случае
браузеры не будут ожидать их полной
загрузки, а выделят под них место и
пойдут загружать страницу дальше, а
изображения загрузят в конце. Это
позволяет пользователям не сидеть в
томительном ожидании и быстрее начать
пользоваться сайтом. Кроме этого, если
браузеры сразу будут знать размеры, то
при загрузке страницы им не придется
по ходу дела подстраиваться под
появляющиеся картинки, что поможет
избежать ненужных скачков и дерганий
окружающих их HTML-элементов.
Выравнивание
изображений
В старых версиях
HTML для выравнивания изображений у тега
имелся уже известный вам атрибут
align, но в современном HTML его нет, поэтому
будем использовать тоже уже знакомый
вам, и, надеюсь, ставший родным style.
style="float:left" -
прижимает изображение к левой стороне
блока, в котором находится изображение,
а весь текст обтекает его справа.
style="float:right"
- прижимает изображение к правой стороне
блока, а текст обтекает его слева.
Пример выравнивания
изображения по левому краю.
Выравнивание
изображений
Первый
параграф.
Текст перед
картинкой.
После картинки.
Последний
параграф.
Результат в браузере
style="clear:left" -
прерывает обтекание изображений
выровненных по левой стороне.
style="clear:right"
- прерывает обтекание изображений
выровненных по правой стороне.
style="clear:both" -
прерывает обтекание изображений
выровненных по обеим сторонам.
Пример прерывания
обтекания изображения
Прерывание
обтекания изображений
Первый
параграф.
Текст перед
картинкой.
После картинки.
Последний параграф.
Результат в браузере
Всплывающий
текст-подсказка у изображений в HTML
Как и у многих
других HTML-тегов, у тега есть
атрибут title, выводящий текстовую подсказку
при наведении курсора мыши на изображение.
title="Любой текст."
Изображения для
фона
Изображения в
качестве фонов используются в HTML не
менее часто, чем просто изменения цвета
фона, которые мы с вами уже проходили.
И это вполне логично, ведь с помощью
изображений можно сделать неоднотонный
и более красочный фон.
Обычно, в качестве
образца для фона применяются небольшие
по размеру и объему (в килобайтах)
рисунки, а все потому, что фоновые
изображения браузеры обрабатывают
иначе, чем обычные рисунки. Они берут
эту маленькую картинку и замащивают
ей, как кирпичиками, весь участок
HTML-страницы или всю ее целиком.
В прошлых версиях
HTML у некоторых тегов существовал
специальный атрибут background, который
позволял делать фоновое изображение.
Но в том-то и дело, что только у некоторых,
причем далеко не у всех, например у
блочного тега
его не было. Сегодня
я вам покажу способ, который можно
применить абсолютно к любым HTML-тегам и
опять мы используем стили (CSS), а точнее
атрибут style. Общий синтаксис такой:
<тег
style="background:url("адрес картинки")">...тег>
Обязательно
заключайте адрес картинки в одинарные
кавычки, как показано. И если вы хотите
сделать фоновый рисунок для всей
страницы, то используйте style внутри тега
.
<тег
style="background:#цвет url("адрес
картинки")">...тег>
Обратите внимание,
что точку с запятой посередине ставить
не надо, так как оба значения относятся
к фону. При такой записи браузер в первую
очередь показывает фон-изображение, а
не цвет. А теперь представьте, что у вас
фоновое изображение - это рисунок
в темных тонах, а цвет текста на странице
вы сделали белым. И все отлично смотрится...
Пока пользователь не отключит в браузере
показ изображений. Тогда у него фон
станет скорее всего белым, как и ваш
цвет текста.
Пример создания
фоновых изображений в HTML
Фоновые
изображения в HTML
Созвездия в
заоблачной дали Раздумьям тщетным
многих обрекли. Одумайся, побереги
рассудок - Мудрейшие и те в тупик
зашли.Омар Хайам.
Таблицы
Чаще всего таблицы
в HTML используются не по их прямому
назначению - отображению табличных
данных, а для создания глобального
каркаса страницы. То есть создается
таблица, растягивается во всю ширину
страницы, а потом в ее левом столбце
делают одно меню, в правом - другое,
в среднем располагают основную информацию
и так далее.
Существует три
вида верстки: табличная, о которой я вам
рассказал выше; слоями (блочная), требующая
среднего уровня знания стилей (CSS) и
комбинированная. По многим параметрам
блочная верстка все же предпочтительней,
поэтому, если верстальщик может сделать
задание, как с помощью таблиц, так и с
помощью блоков, то обычно выбирается
последнее.
Как вставить картинку на страницу html
Чтобы вставить на сайт изображение -картинку, (фотографию или любую графику) надо указать путь к источнику (к файлу-картинке) при помощи тега img Тег img
- это сокращение от английского imagе (имидж, изображение), Источник - по английски source, сокращенно src
Важно
: вес и размер
картинки (небольшой), имя файла
(без пробелов и только латинские буквы и цифры), формат картинки
(расширения. GIF, JPG, JPEG, PNG. Возможно использование анимированных картинок (GIF).
Путь к картинке указывается абсолютный или относительный, в зависимости от того, где картинка находится у вас или в интернете на сторонних ресурсах (тогда надо указать URL)
Туман. Художник Владимир Княгницкий
Код. В коде указан относительный адрес (относительно папки у меня на сервере)
Код. В коде указан абсолютный адрес картинки
Размер изображения и толщина рамки
Реальный размер этой картинки: Ширина (width)="499" Высота (height)="434". Не прибегая в фотошопу можно сделать так, чтоб на экране картинка выглядела больше или меньше своих реальных размеров. Для этого используются атирибуты width
и height
. Например, чтоб картинка выглядела в 2 раза меньше, указываем ширину (width)="250" и высоту (height)="217" . И добавляем рамку толщиной 4 пикселя(border
="4"). Слева изображение с рамкой, справа, для срвнения, без рамки
Атрибуты тэга IMG
src
-Обязательный атрибут, указывающий URL рисунка (его адрес, месторасположение)
IMG SCR= " img/kartinka.gif"
align
- Выравнивает изображение к одной из сторон документа
align="left" - Выравнивание по левому краю
align="right" Выравнивание по правому краю
align="bottom"Выравнивание по нижнему краю
align="top" Выравнивание по верхнему краю
align="middle" Выравнивание по середине
alt
- Выводит текст к картинке. Альтернатива графике, если она не грузится border
- Устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется.
width
ширина картинки в пикселях или процентахheight
- высота картинки в пикселях или процентах
hspace
отступ по горизонталиvspace
отступ по вертикали
Примеры выравнивания картинки с текстом при помощи HTML
Картинка размещена перед текстом без указания каких либо атрибутов. Без форматирования текста. В результате получилось то,что вы видите.
Картинка расположена слева от текста про помощи атрибута align со значенем left
. align="left"
.
Это, конечно, намного лучше предыдущего варианта расположения картинки с текстом. Но не думаю что кому то нравится, когда изображение прижато вплотную к тексту. На картинке бабочка, бабочка, бабочка. И текст, текст, текст про бабочку, бабочку, бабочку. Слишком близко к изображению. Картинка не должна сливаться с текстом, даже если текст написан просто как текст, чтоб наглядно продемонстировать обтекание картинки текстом. Очень важно чтобы на экране картинкал не сливалась с текстом, чтобы не раздражала, чтобы радовала глаз и была на своем месте. Достаточное количество текста нагляднее десонмтрирует пример.
Есть правила верстки в книгоиздательстве, должны быть правила верстки и при сайтостроении.
Картинка расположена слева от текста про помощи атрибута
align со значением LEFT, отступ от текста - 20 пикслелей по горизонтали. align="left" hspace=20
Отступы добавляются при помощи атрибутов
HSPACE
(отступ по горизонтали) и
VSPACE
(отступ по вертикали) . В данном случае отступ по вертикали равен нулю, чтобы верх картинка был на одном уровне с верхней строкой текста. Если отступ равен нулю, он не указывавется. Ну а отступ по вертикали указан в атрибуте. И хотя в настоящее время вебмастеров убеждают отказаться от атрибутов HTML и полностью перейти на CSS, мне кажется что простота такого метода дает ему право на существование.
КОД
Картинка расположена справа от текста
про помощи атрибута
align
о значением
RIGHT
, добавлены отступы при помощи атрибутов
HSPACE
(отступ по горизонтали). и
VSPACE
(отступ по вертикали). В принципе всё то же, что в предыдущем варианте, только вместо
лево
, указано
право
и картинка вставлена не перед текстом, а примерно посредине. Форматирование при помощи атрибутов
align
(линейное выравнивание) и при помощи отступов по горизонтали и вертикали дает вполне нормальный результат. Картинка обтекается текстом слева, сверху, и снизу (если текста достаточно много). Отступ текста от картинки слева, сверху и снизу рвняется 20 пикселям. Все так, как мы указали в коде.
Два вида выравнивая (по левому краю и по правому краю) используются чаще всего, а остальные... Почти все остальные считаются устаревшими. На современных сайтах все изображения (да и вообще весь дизайн) оформлятеся при помощи каскадных таблиц стилей (CSS)
Текст, текст, текст продолжение текста
Картинка расположена про помощи атрибута align
со значением middle
. Добавлены отступы при помощи атрибутов HSPACE
(отступ по горизонтали) и VSPACE
. Выглядит это вот так, код записан ниже.. На этом с атрибутами позиционирования картинок заканчиваем
Как использовать атрибуты alt и title.
Атрибуты alt
и title
содержат название картинки. ALT -это альтернатива изображению, если оно по каким то причинам не загрузилось. Title - это титульная надпись на картинке. Она появляется при наведении мышки на картинку
Если вы делаете сайт только для себя, то можете не применять эти атрибуты. Если сайт предназначен для людей, то эти атрибуты надо заполнить дав четкое точное описание изображения.
Во-первых, это удобно для посетителей, во вторых, необходимо для поисковых машин. Именно текст внутри тега IMG позволяет поисковым роботам индексировать картинки, сортировать их по ключевым словам и выдавать их по запросам пользователя. Кстати, Яндекс даже предупреждает, что если и у картинки отсутствует содержательное описание, она не попадают в поиск. Индексируются картинки только стандартных графических форматов (JPEG, GIF и PNG). Фоновые изображения и картинки, раскрывающиеся при помощи скрипта, не индексируются.
КОД картинки с заполнеными alt и title
Как сделать картинку ссылкой
Любая ссылка делается при помощи тега А
и атрибута href (если это гиперссылка) или name если (ссылка на абзац или элемент, расположенный на этой же странице).
Начальный тег
Источник картинки
закрывающий тег