Урок №5
Добавляем фото в HTML-документ

В этом уроке, мы рассмотрим способ добавления фотографии на HTML-страницу .

Так как наша статья, из прошлого урока, рассказывала о снежном барсе, то и фотография будет его:

Вам нужно скопировать эту фотографию к себе на Рабочий стол , делается это так:

1. нажмите правой кнопкой мыши по фотографии
2. затем по строке: Сохранить изображение как…

Сохраните фото на Рабочий стол

На Рабочем столе у вас уже есть файл index.html , теперь там есть и фотография снежного барса, файл irbis.jpg

Для того чтобы вставить фото в HTML-страницу, существует тег , у этого тега есть свойство (атрибут) src=" " , значением которого выступает адрес фотографии:

Где:
— тег , который указывает что здесь будет фотография,
src=" " — свойство тега , которое указывает на адрес фотографии,
адрес фотографии — значение свойства src=" " , адрес фотографии.

Так как файлы index.html и irbis.jpg находятся в одной папке, а именно на Рабочем столе , то для того чтобы указать адрес файла irbis.jpg , достаточно просто написать его имя irbis.jpg

Вставив этот код под заголовком

Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.

Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.

Сохраните изменения в Блокноте , нажав на клавиатуре Ctrl + S или Файл > Сохранить .

Откройте файл index.html с помощью браузера, вы должны увидеть

Далее рассмотрим, как вставить картинку в 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

После усвоения приведенных выше сведений работа с изображениями больше не доставит проблем.

Добавление, форматирование и размещение картинок на странице станет простым и приятным делом.

Основы HTML. Как вставить изображение на интернет-страницу

Как вставить картинку в HTML - редактирование, выравнивание, атрибуты

Об этом человеке известно только то,
что он не сидел в тюрьме, но почему не сидел - неизвестно.
Марк Твен.

Э то урок о том, как вставить картинку в HTML , как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег и его атрибуты весьма пригодится в современном Интернете. Но главное тут - чувство меры!

П ереизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру и используй только там, где это нужно. И будет тебе счастье!

В уроке про я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.

§ 1. Как вставить картинку

Д ля вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC . Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:

src="logo.jpg">

Е сли картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:

images/logo.jpg">

А можно не мучиться и указать полный адрес картинки . Например, так:

http://www..png">

В последнем случае браузер отобразит код так:

Примечание. Если картинка расположена на вашем компьютере , а вставить вы её хотите на страницу в Интернете , то ничего не выйдет. Для этого картинку нужно сначала переместить в какое-нибудь место в Интернете (например, ). И указать в коде страницы полный адрес до этого места с картинкой .

П омимо обязательного атрибута SRC у тега IMG есть ещё несколько необязательных атрибутов. Рассмотрим их подробнее.

§ 2. Указание размеров картинки

Н ачнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:

• width - ширина картинки в пикселах или процентах;


• height - высота картинки в пикселах или процентах.

Е сли используются эти атрибуты, то сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмёт) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.

Ш ирину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:

width="50" height="20">

width="10%" height="5%">

§ 3. Альтернативный текст

В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путём применения атрибута ALT :

В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута ALT :

П овторю, это произойдёт, если пользователь отключил показ графики. Если же нет, то картинка скроет собой альтернативный текст.

§ 4. Выравнивание картинки

С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:

• left - изображение располагается у левого края страницы, а текст обтекает картинку справа;


• right - изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.

Н апример, HTML-код

браузер покажет так

А этот HTML-код:

будет выглядеть вот так:

Д ля прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про ). У тега BR есть атрибут clear , который может принимать три значения:

• left - прекращение обтекания текстом картинок, выровненных по левому краю;


• right - прекращение обтекания текстом картинок, выровненных по правому краю;


• all - прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.

Описание

Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src . Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег .

Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.

Синтаксис

Атрибуты

Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. Альтернативный текст для изображения. Толщина рамки вокруг изображения. Высота изображения. Горизонтальный отступ от изображения до окружающего контента. Говорит браузеру, что картинка является серверной картой-изображением. Указывает адрес документа, где содержится аннотация к картинке. Адрес изображения низкого качества. Путь к графическому файлу. Вертикальный отступ от изображения до окружающего контента. Ширина изображения. Ссылка на тег