Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):
О том, как сделать картинку ссылкой, мы говорили в предыдущей статье. Однако HTML позволяет задавать на одном изображении не одну ссылку, а сразу несколько. В результате пользователь, щёлкая на разные места одной картинки, будет переходить по разным интернет-адресам. Эту возможность можно использовать, например, для создания эффектного меню, интерактивных тестов или наглядных графических моделей.
Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:
Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg
. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.
1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:
2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).
3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:
4. С помощью тегов area определяем активные области:
5. Закрываем карту:
Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:
Несмотря на то, что в качестве примера был рассмотрен самый простой случай, который только можно придумать, он наглядно демонстрирует принцип создания навигационных карт. Дальше - дело техники и определения координат, с точки зрения HTML ничего не усложняется.
Это делает возможным внутри одной страницы отображать содержимое другой страницы. Например:
Большинство изображений, которые человек видит на сайтах, тоже являются содержимым другой страницы. Вот, в частности, адрес смайлика в формате.gif:
А вот способы добавления картинки на сайт, которые можно выделить, если посмотреть код страницы:
HTML: тег
CSS: свойства и
CSS: псевдоэлементы и
HTML: тег векторной графики (без URL)
CSS: без URL
Как узнать адрес картинки и скопировать его
Скопировать адрес изображения можно несколькими способами:
Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено скопировать URL, щёлкнуть по необходимому пункту.
Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено изучить характеристики фотографии, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Информация об изображении»; в Internet Explorer см. пункт «Свойства»), в открывшемся окне выделить адрес рисунка,
нажать на правую клавишу мышки, в появившемся контекстном меню щёлкнуть по пункту «Копировать».
Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Открыть изображение»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью или с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера,
нажать комбинацию клавиш клавиатуры Ctrl + C .
На сенсорных устройствах (смартфон, планшет) долго без движения держать палец над фото, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (он может называться «Просмотр картинки»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью или с помощью с помощью CSS. Затем долго жать на адрес в адресной строке браузера. После того, как появятся ползунки и весь URL будет выделен (в случае необходимости, ползунки можно раздвинуть на необходимое расстояние), щёлкнуть в появившейся панели кнопку «Копировать». Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу фонового изображения, щёлкнуть по необходимому пункту. Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера (см. Рис.3),
нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Копировать». нажать комбинацию клавиш клавиатуры Ctrl + C .
Как сохранить изображение
Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено сохранить картинку, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Сохранить изображение как...»), в открывшемся окне выбрать папку на компьютере, куда будет сохранён рисунок.
Если фотография является фоновой картинкой, то нужно предварительно перейти на страницу картинки (см. Рис.3).
Как добавить картинку на веб-страницу
Сначала изображение нужно загрузить с компьютера на хостинг сайта, в социальную сеть (ВКонтакте, Google+ и т.п.), Яндекс.Диск или Гугл.Диск , чтобы у рисунка появился свой адрес в интернете.
Если есть визуальный редактор, то очерёдность действий обычно следующая:
установить курсор мышки в то место, где должна будет появиться фотография, нажать на иконку, похожую на или на , выбрать файл с компьютера, если есть возможность, заполнить альтернативный текст (он же описание изображения).
Итог: картинка будет вставлена на страницу сайта, а самое главное — загружена на сервер веб-проекта. У неё теперь будет свой адрес в интернете. И теперь можно на вкладке «HTML» поправить предоставленный визуальным редактором код, так как часто визуальный редактор добавляет ненужные теги, да и возможности HTML и CSS несравнимо большие.
Если URL уже есть, но другого малоизвестного сайта, то всё же такую фотографию лучше сохранить на компьютер, а потом загрузить на сервер сайта, если данное действие разрешено владельцем фото, дабы не нарушить авторские права, так как
на некоторых сайтах может быть запрещено использование адреса изображений на других ресурсах (подробнее про запрет хотлинкинга ). сайты недолговечны и спустя время с удалением веб-проекта, исчезнет и картинка на вашем сайте, оставив вместо себя в лучшем случае только альтернативный текст.
Если нет визуального редактора , то очерёдность действий обычно следующая:
создать папку image , создать в папке image файл.htaccess , содержимым которого будет
# закрыть доступ к http://сайт.ru/image/
Options -Indexes
# закрыть доступ к http://сайт.ru/image/.htaccess
order allow,deny
deny from all
загрузить в папку image изображение , которое именуется, допустим, plain.gif (в дальнейшим все картинки также загружать в эту папку), на HTML-странице использовать URL вида http://сайт.ru/image/plain.gif , например,
Как вставить картинку на страницу 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
- Выравнивает изображение к одной из сторон документаверхнему краю
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 пикселям. Все так, как мы указали в коде.Текст, текст, текст продолжение текста
Картинка расположена про помощи атрибута align
со значением middle
. Добавлены отступы при помощи атрибутов HSPACE
(отступ по горизонтали) и VSPACE
. Выглядит это вот так, код записан ниже.. На этом с атрибутами позиционирования картинок заканчиваем
Как использовать атрибуты alt и title.
ALT -это альтернатива изображению, если оно по каким то причинам не загрузилось. Title - это титульная надпись на картинке. Она появляется при наведении мышки на картинкупоисковых машин . Именно текст внутри тега IMG позволяет поисковым роботам индексировать картинки, сортировать их по ключевым словам и выдавать их по запросам пользователя. Кстати, Яндекс даже предупреждает, что если и у картинки отсутствует содержательное описание, она не попадают в поиск. Индексируются картинки только стандартных графических форматов (JPEG, GIF и PNG). Фоновые изображения и картинки, раскрывающиеся при помощи скрипта, не индексируются.
КОД картинки с заполнеными alt и title
Как сделать картинку ссылкой
Любая ссылка делается при помощи тега А
и атрибута href (если это гиперссылка) или name если (ссылка на абзац или элемент, расположенный на этой же странице).
Источник картинки
закрывающий тег
Доброго всем времени суток, мои дорогие друзья , читатели и гости моего блога. Вроде отпуск, а времени ни на что не хватает. Всё как-то впопыхах. Но это явление временное, скоро всё устаканится. А с вами мы сегодня продолжим постигать азы html. Друзья, как вы думаете, без чего любая интернет страница будет безликой, серой и скучной? Правильно, без графического наполнения, будь то фотографии, логотипы или фон.
Так вот, вставка картинки в html — это также одна из самых важный составляющих, поэтому ее непременно должен знать любой, кто собирается делать сайты самостоятельно. Вот именно этим мы сегодня и займемся всей этой вакханалией)))
Ну что ж, давайте приступим. Как вы уже поняли из заголовка, за вставку изображения отвечает тег
Тег является одиночным, поэтому закрывать его не нужно
Тег всегда работает в связке с атрибутом , в котором указывается путь к картинке.
В общем давайте смотреть на примере, чтобы закрепить всё это действие. Правильно я говорю? Загрузите материалы для урока и откройте html файл в блокноте. И теперь перед основным текстом напишите следующее:
Всё. Вот такая коротенькая запись обеспечит нас картинкой на нашем сайте. Попробуйте напишите ее в документе.
А теперь сохраните файл и запустите его в вашем браузере. Посмотрим, что у нас получится. У меня получилось так.
Атрибуты
Как я уже говорил выше, тег img сразу идет в комплекте с атрибутом src. Ну я думаю, что вы уже поняли это, поэтому будем изучать остальные. Здесь есть где развернуться. Атрибутов здесь просто дофигища. Простите за мой французский).
Alt
Если вдруг картинка по какой-либо причине не прогрузилась или недоступна, что вы увидите текст, который был написан в значении атрибута Alt
. Обычно здесь пишется то, что изображено на картинке, т.е. если изображено что-то про национальности, то и в alt
лучше всего так и написать «Мужчины и женщины разных национальностей». На примере это выглядит так:
В итоге, если картинка по какой-то причине не сможет отображаться, то вылезет наша надпись.
В принципе вы вообще можете ничего не прописывать в качестве альтернативного текста, но сам атрибут лучше оставить, пусть даже и пустым.
Width и Height
Для тех, кто знает английский язык нетрудно догадаться, что данные два атрибута отвечают за ширину и высоту изображения. Я решил объединить две этих штуковины в один пункт, так как они выполняют похожие функции, можно сказать — братья (ну или сестры).
Width
отвечает за ширину изображения, а в его значениях ставится сам размер. В общем если у вас есть картинка, например, 640*480 пикселей, а вам нужно отобразить ее на сайте 320*240, то вам просто нужно будет сделать следующее:
Всё. Теперь, когда вы сохраните документ и откроете его с помощью браузера, то вы увидите уменьшенную кртинку. Причем заметьте, мы изменили только параметр ширины, а картинка уменьшилась пропорционально, т.е. высота уменьшилась автоматически.
Height
, как уже нетрудно догадаться, отвечает за высоту изображения. Тут всё работает точно также, но по вертикали. Возьмем ту же самую картинку, только не будем ставить ширину, а поставим только высоту.
Сохраняем и заходим в документ. Как видим, картинка уменьшилась до того же размера, что и в предыдущем примере, хотя мы задали на сей раз только высоту. Вы уже поняли, что тут все действует в рамках пропорций, поэтому оба параметра смысла ставить в принципе нет никакого.
Давайте ради интереса попробуем поставить атрибуты и ширины, и высоты одновременно, только зададим им непропорциональные параметры. Ну а потом посмотрим, что у нас получится.
Сохраняем, и теперь смотрим, что нам выдало. Мда, это что-то непропорциональное). В общем я думаю, что суть вы всю уловили. Попрактикуйтесь сами немного, чтобы закрепить работу с размерами, ну а потом перейдем к следующему атрибуту.
Align
Ну с этим атрибутом вы уже знакомы еще с той статьи, когда мы вообще проходили, . И вы уже наверное догадались, что отвечает он за расположение изображения.
Всего для align существует пять параметров:
left
— выравнивание по левому краю
right
— выравнивание по правому краю
middle
— выравнивание изображения по базовой линии строки (на примере увидите, что это значит)
top
— верхняя граница данного изображения выравнивается по высоте с самым высоким элементом в данной строке
bottom
— выравнивание нижней границы картинки по тексту
Ну давайте не буду тут перечислять, а по традиции покажу всё на примере. Скачайте отсюда готовый html документ и откройте его. Там вы увидите 5 одинаковых абзаца . Вставьте туда картинки с описанными атрибутами:
Ну а теперь сохраняем как обычно наш документ и смотрим, что у нас получилось. Ну что? Видите разницу? Теперь вы знаете, чем отличаются данные параметры).
Border
Атрибут border
ставится, для толщины рамки на изображении. И чем он больше, тем соответственно и рамка толще. Попробуйте добавить этот атрибут в картинку, но постоянно меняйте его значение и вы сами увидите, насколько толще становится рамка.
Hspace и Vspace
Ну и рассмотрим последние на сегодня атрибуты тега img. Space (англ.) переводится как пространство, космос, пробел (клавиша) и т.д. Приставки H и V означают горизонтальность и вертикальность. Тут вопросов не должно быть.
Ну а что же эти атрибуты делают? Они задают вертикальный и горизонтальный отступы от картинки до окружающего текста (или другого контента). То есть, если вам не нравится, что картинка слишком близко находится к тексту, то вы можете увеличить расстояние между ними. Давайте посмотрим как это выглядит на примере.
Видите? Отступы увеличились как по вертикали, так и по горизонтали. Этого мы и добивались.
Кстати, вы также сможете вставлять эти картинки как шапку для сайтов, делать картинки в виде ссылок и т.д. Обо всём этом я рассказал в .
Ну а в целом у меня вроде бы всё. Основы вставки изображений я вам рассказал, но если вы хотите изучить HTML и CSS на уровне профи, то очень рекомендую вам скачать потрясающий курс
на эту тему, где благодаря этому языку разметки и каскадным таблицам стилей вы запросто сможете сверстать три вида сайтов: визитки, блоги, интернет-магазины. Всё рассказано простым и понятным языком . Это просто бомба!
Ну а я с вами на сегодня прощаюсь. Уже буквально через пару занятий планирую вам дать последний урок по основам HTML , после чего мы с вами закрепим все полученные знания на практике и создадим уже простенький трехстраничный сайт. В общем все будет круто)
Ну а чтобы не пропустить всё самое интересное на моем блоге, то обязательно подпишитесь на обновления статей. Ну и конечно же посмотрите другие статьи. Я уверен, что вы найдете для себя много полезной информации . Удачи вам. Увидимся в других статьях. Пока-пока!
С уважением, Дмитрий Костин
В данном материале я вам расскажу об очень важных тегах HTML, для вставки картинок и графики на страницу, ведь без этого сложно создать красивый и хороший сайт.
Картинки сделают твой сайт уникальным и будет выделять из общей массы. Однако помни, что чрезмерное использование графики на сайте может быть плохим фактором.
Не награмождай html-страницу картинками, страница должна быть легкой и не отпугивать посетителей. Посетитель всегда должен усваивать главную информацию и не отвлекаться, вставляй картинки в HTML только там, где в этом есть необходимость.
на странице Атрибуты тега BODY я уже говорил, что картинки могут быть фоном html-страницы, а сейчас я вам расскажу, как эти же картинки можно использовать на более высоком уровне , нежели фон.
И так, для того, что вставить картинку в HTML-страницу, тебе понадобится тег Данный атрибут необходим для указания адреса к картинке. Допустим, тебе нужно ставить картинку image.jpg в какое-нибудь место на html-страницу, а наша картинка будет находится в одной папке (каталоге)) со страницей, тогда надо писать вот такой html-код:
Если картинка и html-страница находятся в разных папках или каталогах, то надо написать путь к изображению относительно страницы. Например, наша html-страница находится в папке или каталоге news, в этом же каталоге или папке находится подкаталог (папка) pop, в котором и расположена наша картинка image.jpg, то для ее вставки надо писать так:
Кроме атрибута src у тега
width — ширина картинки (можно указывать пиксели или проценты);
height — высота картинки (можно указывать пиксели или проценты).
Если не указывать данные атрибуты, браузер загрузит реальные размеры картинки. Однако не стоит переусердствовать со значениями данных атрибутов, ведь увеличение длины или ширины картинки может её исказить, что испортит её, например фотографию человека, где изменятся пропорции человека.
Как я уже написал, размеры картинки можно указывать как в пикселах, так и в процентах. Приведу просто пример:
еще пример html-кода:
Бывают случаи, когда в браузере отключена возможность отображения графики, в том числе и картинок, и чтобы ваша страница не потеряла смысл, применяют атрибут alt, в котором мы пишем альтернативный текст, если картинка не под грузилась на страницу. html-код на примере:
left — картинка расположится слева, а текст, который рядом — справа;
right — картинка расположится справа, а текст, который рядом — слева.
Приведу HTML-код:
а браузер выведет следующее:
Текст, радом с картинкой.
HTML-код для значения right:
на html-странице будет так:
Текст, рядом с картинкой.
Для того, чтобы текст не обтекал картинку, можно использовать ранее упомянутый тег BR на странице Форматирование текста в HTML. Кстате, тег BR имеет атрибут clear, со своими значениями значения:
left — не обтекать текстом, который выровнем по левому краю;
right — не обтекать текстом, который выровнем по правому краю;
all — не обтекать текстом, который выровнем по левому и правому краям.
Без атрибута align текст обтекат по умолчанию справа картинки и почти вплотную. Если ты хочешь чтобы текст не обтукал вплотную картинку, можно использовать вот такие атрибуты:
vspace — делает верхнее и нижнее поля в пикселях;
hspace — делает боковые поля (слева и справа) в пикселях.
Приведу простой html-код на примере:
Что получится по данному примеру попробуй посмотреть сам.
Вокруг картинки еще можно сжделать рамку с помощью атрибута border и указывать в пикселях её величину. Чем больше значение , тем больше рамка вокруг изображения. HTML-код будет таким:
на html-странице будет вот так:
Я написал основные теги HTML , необходимые для вставки картинок на html-страницу. Далее я расскажу тебе, как создать ссылки в HTML, а также как сделать картинку ссылкой.
Дата публикации: 15 мая, 2012
