Правильно вставить картинку html

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

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

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

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

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

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

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

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

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

Это мой аватар на форумах и в различных сервисах

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

Это мой аватар на форумах и в различных сервисах

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

§ 5. Создание отступов вокруг картинки

П о-умолчанию, картинки встраиваются в страницу почти вплотную к тексту и другим элементам. Если такое отображение не устраивает, то можно задать отступы вокруг картинки. Делается это с помощью следующих атрибутов тега IMG:

З начения этих атрибутов указывается в пикселах. Например, если мы немного дополним предыдущий пример:

то получим следующее:

Это мой аватар на форумах и в различных сервисах

С равни это с тем, как вся «композиция» выглядела раньше (выше).

§ 6. Рамка вокруг картинки

В округ картинок можно создать чёрную рамку с помощью атрибута border. Значение этого атрибута указывается в пикселах и определяет толщину рамки. Например, HTML-код:

в браузере выглядит так:

§ 7. Заключение

Н а этом раздел о тегах HTML. которые нужны для вставки картинок на страницы сайта можно считать завершенным. В следующем разделе поговорим о том, как создаются ссылки, и о том, как сделать ссылку-картинку в HTML.

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки. Так победим.

Поделиться ссылкой на эту страницу в:

Учебник по Html для чайников. Простейшие.

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

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

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

Теперь я с чистой совестью поведаю вам, как вставлять картинки в документ:

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

Если картинка лежит на другом сайте, то путь прописывается полностью:

Для вашего удобства кладите картинку в ту же папку, что и документ, тогда путаницы будет меньше:) Также я хочу обратить ваше внимание на то, что MY.jpg, my.JPG, my.jpg и MY.JPG – это разные имена файлов. Никогда не забывайте, что регистр нужно учитывать.

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

html
head
title Мой первый шаг /title
/head
body text= #336699 bgcolor= #000000
div align= center
H3 Здравствуйте, это моя первая страница. /H3
br
font color= #CC0000 Добро пожаловать! /font :) /div
p align= justify
img src= http://www.postroika.ru/html/primtocodephoto.gif Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится b еще один виртуальный друг. ) /b
/p
/body
/html (посмотреть )

Посмотрите, что у нас получилось. Не очень симпатично, не так ли? Было бы лучше, если бы текст аккуратно располагался, например, сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.

Вставляем на сайт картинку

Допустим вы решили вставить на сайт вот такую картинку :

Сначала вам нужно сохранить эту картинку у себя на компьютере. Для этого наведите курсор мышки на картинку и нажмите правую кнопку мышки. Выберите Сохранить рисунок как. Укажите место для сохранения картинки (Как я рекомендовал ранее - сделайте отдельную папку site на диске С например и туда сохраняйте все файлы уроков.)
Сохраните картинку там-же, где находится страничка, которую мы делаем - page.html Имя файла картинки оставьте тоже самое money-master.jpg
Опять же будеть внимательны! Имя файла не money-master.i pg, не money-master.jpq. а money-master.jpg

Для вставки на страницу картинки - используется тег img . img это он аглийского слова im ag e. изображение, картинка.В качестве параметра для этого тега, используется название картинки.Должен же компьютер знать какую картинку мы хотим вставить

В нашем случае для вставки картинки money-master.jpg вставляем в код страницы, в то место куда мы хотим вставить картинку, следующий код :

или более грамотно писать вот так img src= money-master.jpg . хотя код выше тоже будет работать.

через параметр src указывается имя файла-картинки.
src от английскогого слова s ourc e - ресурс, источник

img src= можно расшировать как изображение источник/название файла =

Таким образом код нашей страницы теберь будет выглядеть вот так

html
head
title Моя первая интернет страница всего лишь за 5 минут /title
/head

body bgcolor= #00CCFF text= #FFFF00

Сегодня замечательный день. br Я сделал свою первую интернет страничку.

br font color= #0000FF я буду богатым и свободным человеком ! /font

теги br вставлены чтобы расположить картинку на несколько строк ниже текста.

Теперь наша страница будет выглядеть вот ТАК .

Желательно в параметрах картинки указать ее размеры. Для этого используется параметр width (ширина картинки) и height (высота картинки).

(также будьте внимательны в написании. Не with, не witdh, не heihgt)

Т.е. например вот так :

img src= money-master.jpg width= 258 height= 146

размеры картинки указываются в пикселях .

Если вы хотите, чтобы при наведении мышки на картинку отображался какой-то текст, то это делается с помощью параметра alt

например вот так :

img src= money-master.jpg width= 258 height= 146 alt= Сайт о заработке в интернете

Этот текст также будет виден, если у вас выключено отображение графики в браузере (для экономии трафика например). Но этот параметр работает не во всех браузерах. В Internet Explorer работает.

аналог этой команды - параметр title=

внесите изменения в код и посмотрите что получится.

Таким образом код нашей страницы будет такой :

html
head
title Моя первая интернет страница всего лишь за 5 минут /title
/head

body bgcolor= #00CCFF text= #FFFF00

Сегодня замечательный день. br Я сделал свою первую интернет страничку.

br font color= #0000FF я буду богатым и свободным человеком ! /font

img src= money-master.jpg width= 258 height= 146 alt= Сайт о заработке в интернете

Если у вас вместо картинки показывается крестик или картинки не видно ,

то значит вы допустили одну из распространенных ошибок:

- сохранили файл не в той же папке, где находится html-файл.
- сохранили файл под другим именем, например не верно указали расширение файла. Должно быть jpg
- возможно файл сохранился как money-master.jpg.jpg (Зайдите в папку где лежат файлы через TotalCommander и проверьте. При необходимости переименуйте)
- допустили ошибку в параметре, написав например scr= вместо src=
- не верно указали имя файла или расширение после src=

Также перечитайте вот эту тему на форуме. Там разбираются все возможные ошибки при вставке картинки.

Урок 5. Форматирование текста жирным и курсивом.
Урок 6. Изменяем размер шрифта.
Урок 7. Делаем ссылки на другие страницы/сайты.
Урок 8. Таблицы. Как делать таблицы. Параметры таблиц.
Урок 9. Пример создания 2х-страничного сайта.

Если вам понравилась статья, нажмите пожалуйста на кнопки!
Это будет лучшее спасибо.

Источники: http://www.seoded.ru/beginner/html/grafika.html, http://www.postroika.ru/html/10step2.html, http://moneymaster.ru/site4.php

Ваше имя *
Ваш Email *

Сумма цифр внизу: