Сайт о телевидении

Д ля вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию (динамические баннеры), JPEG отлично подходит для изображений с большим количеством цветов, например фотографий. Третьим форматом для web-графики является формат PNG, но он не получил широкого применения в web-дизайне. Любое изображение в форматах GIF или JPEG вставляется на web-страницу при помощи тега , закрывающего тега нет.

Атрибут SRC

Посредством атрибута src задается адрес (URL) файла с изображением, т.е. браузер находит нужное изображение в каталоге сайта по пути (адресу URL), прописанному в этом атрибуте. Для удобства все изображения сайта находятся в отдельной папке, обычно с именем image . Для примера возьми любое изображение, лучше небольшого формата, и сохрани в созданной папке image, с именем primer.jpg . Далее мы будем обращаться к ней для обучения.

Ну что, попробуем вставить картинку на страницу? Пишем код (путь - URL, прописывается в зависимости от местонахождения папки с изображениями):

src="image/primer.jpg" >

То, без чего не создать сайт: ∼ ∼

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

Э то урок о том, как вставить картинку в 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 - прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.

26.06.2015

Всем привет!
Продолжаем усердно изучать основы HTML.
В этом уроке я расскажу, как вставить картинку в HTML -документ, как сделать картинку фоном , размер картинки, обтекание картинки текстом, как выровнять картинку. Все перечисленные возможности буду закреплять примерами и результатами.
Итак, изображения на веб-страницах могут быть как фоновые, так и обычные. Какая разница между фоновым и обычным изображением?

Фоновое изображение размещается в качестве фона, наверх которого можно вставить другие картинки, текстовку, таблицу и т.д.

Обычное изображение будет отталкивать от себя другие элементы страницы (другие картинки, текстовку, таблицу и т.д.). На примере вы потом все увидите и поймете.
Для веб-страниц рекомендуется использовать форматы картинок JPEG (JPG) , GIF и PNG .

○ Как сделать картинку фоном в HTML

Чтобы сделать картинку фоном, для тега нужно прописать атрибут «background» :

Теперь смотрим полный пример. Вставьте файл картинки «fon.jpg» рядышком с HTML файлом.

и в HTML файл вставьте вот этот код:

Jpg">

Результат будет таким:

Внимание

Не правильное название:

Правильное название:

○ Как вставить картинку в HTML

Чтобы вставить картинку в HTML-документ, используют тег с параметром «src» , которое определяет путь или адрес к картинке.

Теперь смотрим полный пример. Вставьте файл картинки «kartinka.jpg» рядышком с HTML файлом и в HTML файле пропишите вот этот код:

Здравствуйте, это моя первая страница на сайт.

Результат будет таким:

Внимание : название картинки должно быть написано на латинице, иначе картинка не отобразится.

Не правильное название:

Правильное название:

Я думаю, вы до этого момента все поняли. Теперь попробуем скомбинировать два примера вместе. Сделаем на веб-странице фон, вставим изображение и текст.

Jpg">

○ Как вставить картинку, если она находится в папке « img » или « images»?

Если картинка находится в папке «img» или «images» , тогда нужно указать путь от HTML файла к папке «img» или «images» , а потом уже только прописать название картинки с расширением. Выглядеть это будет вот так:

Если картинка находится на другом сайте или блоге, тогда нужно указать адрес сайта и, если нужно, папку, где находится картинка. Ну, естественно, нужно указать и название изображения с его расширением.

Предыдущая запись
Следующая запись

Доброго всем времени суток, мои дорогие друзья, читатели и гости моего блога. Вроде отпуск, а времени ни на что не хватает. Всё как-то впопыхах. Но это явление временное, скоро всё устаканится. А с вами мы сегодня продолжим постигать азы html. Друзья, как вы думаете, без чего любая интернет страница будет безликой, серой и скучной? Правильно, без графического наполнения, будь то фотографии, логотипы или фон.

Так вот, вставка картинки в html — это также одна из самых важный составляющих, поэтому ее непременно должен знать любой, кто собирается делать сайты самостоятельно. Вот именно этим мы сегодня и займемся всей этой вакханалией)))

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

1. Тег является одиночным, поэтому закрывать его не нужно
2. Тег всегда работает в связке с атрибутом , в котором указывается путь к картинке.

В общем давайте смотреть на примере, чтобы закрепить всё это действие. Правильно я говорю? Загрузите материалы для урока и откройте 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

Чтобы вставить на сайт изображение -картинку, (фотографию или любую графику) надо указать путь к источнику (к файлу-картинке) при помощи тега 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 если (ссылка на абзац или элемент, расположенный на этой же странице).
Начальный тег Источник картинки закрывающий тег