Большие свадебные открытки своими руками

Большие свадебные открытки своими руками

Урок 8. Вставляем изображение в HTML.

Автор: Андрей Краснокутский

Дата: 2008-12-18

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

Добавление изображения происходит в два этапа: сначала готовится графический файл нужного размера и формата, а затем он добавляется на web-страницу через тег: <img>. Сам HTML документ предназначен только для того, чтобы отобразить требуемую картинку, при этом никак ее не меняя.

При подготовке изображений следует учесть несколько моментов.

1. Поскольку веб-страница загружается по сети, существенным фактором выступает размер ("вес") графического файла, встроенного в web-документ. Чем он меньше, тем быстрее отобразится изображение.

2. Довольно часто физические размеры изображения (ширину и высоту) необходимо ограничить (уменьшить) по ширине и высоте. Например, установить по ширине не более 700-800 пикселов. Иначе изображение целиком не поместится в окне браузера, и появятся полосы прокрутки.

О том, как подготовить изображение для размещение на сайте подробнее посмотрите в статье: Подготовка изображение для вашего сайта.

 

Форматы графики для web-сайтов

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

Есть еще формат: PNG, который также поддерживается браузерами при добавлении изображений и существует в двух вариантах: PNG-8 и PNG-24. Однако популярность формата PNG сильно уступает по признанию форматам GIF и JPEG.

Обычно для изображений (картинок) создают отдельную папку в корневом каталоге и в неё складывают все изображения для сайта. Иногда таких папок бывает несколько (если того требует структура сайта или Вам так проще ориентироваться). Эту папку чаще всего называют: img или images (изображения). В коде web-страницы прописывают полный путь до графического файла (где лежит изображение), а также имя данного файла (картинки), который Вы хотите вставить в html-документ.

Пишем код для вставки картинки на web-страницу

Для вставки изображений в HTML документ используется конструкция, указанная в Листинг 8.1. Данный код вставляется в нужное место web-страницы (туда, где Вы хотите видеть картинку).

На нашей we-странице, посвященной автомобилям, я подготовил и вставил два изображения. Код вставки первого изображения Вы видите в Листинге 8.1.

Листинг 8.1.

<img src="img/mers1.jpg" border="0" width="400" height="209" hspace="20" align="left" alt="Вид машины спереди">

Вот так будет выглядеть первое вставленное изображение на web-странице сайта:

Всталяем графический файл (картинку) на web-страницу сайта.

А теперь прокоментирую подробнее то, что написано в Листинге 8.1.

Само изображение "вставляется" с помощью тега: img src. Полностью запись выглядит вот так: img src="img/mers1.jpg", где "img/mers1.jpg" – указывает, что наша картинка лежит в папке: img, а имя графического файла (картинки): mers1.jpg.

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

Давайте рассмотрим дополнительные параметры:

border="0" – указывает, что рамки вокруг изображения нет, попробуйте поменять 0 на другое число, например на 1, - соответствует толщине рамки вокруг изображения в 1 пиксель, 2 – соответствует толщине рамки вокруг изображения в два пикселя и т.д.

Важно! Если Вы планируете сделать изображение ссылкой, обязательно указывайте значение: border="0".

width="400" – указывает, что ширина изображения составляет: 400 пикселей (ставьте реальную цифру ширины ваших изображений).

height="209" - указывает, что высота изображения составляет: 209 пикселей (ставьте реальную цифру высоты ваших изображений).

Если не указать параметры: width и height, то изображение может получить геометрические искажения.

hspace="20" – указывает на отступ текста вокруг изображения в 20 пикселей.

align="left" – это уже знакомый Вам тег….. Правильно, обозначает выравнивание по левому краю, также может принимать, значение: right - выравнивание по правому краю.

alt="Вид машины спереди" – здесь прописывается альтернативный текст, который высвечивается при наведении мышки на изображение.

Точно таким же образом мы "вставим" на web-страницу и второе изображение, с той лишь разницей, что выравнена оно будет по правому краю.

Посмотреть на то, что у нас получилось можно здесь. Если Вам что-то не понятно в данном уроке, откройте HTML код страницы (исходный код). В браузере IE это делается через меню: Вид > Просмотр HTML кода, в браузере Opera просмотреть исходный код можно так, меню: Вид > Исходный текст.

Точно таким же образом графические файлы (изображения и картинки) "вставляются" абсолютно на всех web-сайтах и во всех web-документах во всем Интернете.

Как видете все очень просто.

Всего Вам доброго.

Обновлено: 06.10.2014 г.

 

Читайте также:

Запускаем технологию вирусного маркетинга.

Как вставить свою рекламу в чужую электронную книгу.

Практическое руководство: "Учимся делать сайт за 11 уроков"

Хотите знать: "Как бесплатно создать сайт ОТ и ДО ?"

Психология продаж. Как научиться искусству Копирайтинга?

Как заработать на SMS сообщениях?

 

Просмотров: 86327


Скажите пожалуйста, где именно надо создать папку img?

Папка img - это просто условное название, можете обозвать её как угодно, лишь бы сами потом поняли. Создавать её можно где угодно , для простоты создайте её в корневом каталоге и сложите туда все изображения.

Дело в том, что картинка не отображается, только надпись. В чем может быть дело? Спасибо.

Посмотрите внимательно Листинг 8.1 выше. Возьмите его целиком к себе. В корневом каталоге (там где лежат все HTML-файлы вашего сайта) сделайте папку img . Поместите в эту папку все ваши изображения. В листинге измените mers1.jpg на название фашего файла. Значения width и height так же поменяйте на реальные размеры вашего файла. Удачи.

Спасибо большое, все получилось.

Здравствуйте.У меня таже ситуация,что и предыдущего оратора:прописываю код как у вас,меняю только название файла:вместо mers.1/jpeg вставляю связку мерседес/jpeg.На странице появляется только окно с надписью сверху"Вид автомобиля спереди",а изображения нет.По моему ,браузер не может найти путь до фото или он не правильно прописан.ВОТ МОЙ КОД: <img src ="img/мерседес/jpeg"border="0" width="400"height="209"hspase="20"alight="left"alt="Вид машины с переди"> б

Посмотрите внимательно на свой код img/мерседес/jpeg. Вы правильно поняли браузер не находит путь до графического файла. 2. Неправильно указано имя файла, смотрите как у меня mers1.jpg

у меня такае жа проблема, вот у меня ссылка на картинку C:UsersСветланаDesktop21векwwwimg

Ну вот я скопировал код вставил у меня овал без картинки в овале в верху написана сылка!

Здравствуйте!Проблема такая же, создала папку с названием img там же где и документы сайта, в этой папке сохранены изображения с названием 1.jpg, прописываю все как на вашем примере.

Если Вы заметили у меня картинка лежит в папке img

Очень полезная статья для начинающих "web-мастеров". Единственное замечание к атрибуту "alt". Применительно к рисунку в статье даётся такое его толкование: "alt="Вид машины спереди" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.

вот мой код <img src="img/1.jpg" border="0" width="240" height="274" hspace="20"align="center"> ТАК ПОЧЕМУ ЖЕ КАРТИНКА СТАВИТСЯ СБОКУ, КОГДА ЗАДАЧА ДЛЯ НЕЕ CENTER?

А если я возьму изоброжение с чужого сайта это не будет нарушением авторских прав?

Объясните, почему при выкладке HTML документа на сервер на месте изображений пустые места в рамке. Хотя до выкладки, изображения были, как надо.

Дмитрий, чудес не бывает, Вы где-то допустили ошибку, проверьте все пути до картинок, т.е. как прописаны картинки в коде.

<img src="ТУФЛИ/111.jpg" border="5" width="150" height="164" align="left" hspace="20" alt="несколько пар"> это мой код,на страничке выявляется все кроме изображения,я целый день пытаюсь любыми способами но никак. подскажите пожалуйста что делать

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

Эльвира, Ваше письмо я прочитал, как впрочем и все остальные комментарии и письма. Но отвечать то куда... на деревню дедушке???

не знаю почему у всех запара!? нужно просто коды не копировать-затем вставлять, а самим прописывать и усе будет работать..вот текст моей картинки <img src="23.png" border="0" align="top" alt="старт" hspace="10" name="старт" title="старт">

Скопировал Ваш листинг,вставил свои значения-картинка есть.Далее вбиваю ниже то же самое(вручную)картинки нет-что за чудо?

это текст моей картинки,которую я скопировал отсюда и работает:<img src="100zaz.jpg" border="0" width="127" height="155" hspace="20" align="left" alt="dbl">,а то же самое вбитое ручками-нет

АндрейК пожалуйста скажите где ошибка? <img src="img/win.jpeg" border="0" width="1280" height="1024" hspace="20"> сколко пробывал не получается((

спасобо получилось!!!

Андрей, подскажите, почему не получается увидеть картинку. Мой код: <img src="img/03.png" border="0" width="190" height="190" hspace="20" align="right" alt="RSS Новости сайта"> Надпись есть, картинки нет. Мой адрес: Спасибо.

Решение проблемы-читать внимательно! Папка img должна лежать там же,где находится страница index. И всё будет ok.

Тоже долго мучилась, но получилось! Действительно папку imj надо открыть в HTML-документе.

Обязательно попробую,Спасибо

ииииииииууууууу крррррроши мои

тоже долго мучился, оказывается папка с картинками должна лежать там же где и index.html ,,, спасибо вам Елена

Андрей я вставляю: <img src="img/sun.jpg" border="0" width="625" height="460" hspace="20" align="left" alt="Вид машины спереди"> и у меня нет картинки в документе только надпись!!!Мой адрес:

Андрей я вставляю: <img src="img/sun.jpg" border="0" width="625" height="460" hspace="20" align="left" alt="Вид машины спереди"> и у меня нет картинки в документе только надпись!!!Мой адрес:

<img src="img/yuriy.jpeg"border="0"width="604" height="453" hspace="20"align="right" alt="портрет"> мой код...тоже нет картинки. Папка img находится в тойже папке что и index... помогите,пожалуйста. Спасибо!

Ну не знаю. Прочитала все комментарии. Перепробовала все. Копировала, вставляла свои данные. Ничего не получается. Папка с картинками ( img ) лежит там же ,где index.html. Но картинки нет. Вместо нее крестик красный и надпись.Работаю в браузере IE. Вот, что я ввела:<img src="img/vesenneenastroeniec.jpg" border="0" width="400" height="362" hspace="20" align="left" alt="Колье весеннее настроение">

Посмотрела HTMLкод страницы на месте фото в уроке: <img src="mers1.jpg" width="400" height="209" hspace="15" vspace="0" align="left">Код на странице отличается от того, что в листинге. Почему? и , кстати на странице код "mers1.jpg" подчеркнут. Скопировать с подчеркиванием не удалось. Пробовала и так вставлять. Все равно картинки нет. В чем дело?

Сами спрашиваем, сами и отвечаем. Долго мучилась картинка не вставлялась. Оказалось: 1, вместо тега src у меня было srk 2. запуталась,когда составляла путь к картинке. Переименовала папку в IMG и все получилось. На это потратила почти два дня.Но это того стоило.

Любовь, зато теперь Вы это запомните на всю жизнь :) шучу конечно, не обижайтесь. А если серьезно, то если человек не оставляет обратного адреса, то помочь ему с моей стороны практически невозможно.

Здраствуйте а подскажите как разместить одно изображение сверху второе ниже слева, а третье снизу справа))))

<img src="img/кукла2.jpg" border="0" width="400" height="570" hspace="20" align="left">...........в чем моя ошибка отсутствия изображения?

В коде все правильно, если ничего не напутали все должно работать. Но название файла (картинки) пишите английскими буквами. Многие сервера не воспринимают латиницу.

Но вот что странно... пока называла папку разными именами, никак картинка не хотела появляться, хоть и путь был прописан правильно. Как только назвала IMG,сразу появилась. В чем подвох?

Марина, никакого подвоха и провокаций нет :). В код Листинга 8.1. указано, что данное избражение лежит в папке: img. Если Вы меняете у себя на хосте название папки для изображениий, то поменяйте и в листинге, вот и вся хитрость.

Я пытаюсь вставить изображение!!! прописываю все через блокнот я все верно делаю может через блокнот не стоит??

И открываю все в мозиле файр фокс последний))

Путь моей картинкаи C:Documents and SettingsденисРабочий столkoffevinogradwwwImg и сама картинка названа gif тоже в название входит 1.gif...Я в блокноте делаю так <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://свой сайт/TR/html4/loose.dtd"> <html> <head> <title> крутой сайт </title> </head> <body> <img src="Img/1.gif"> </body> </html> </head> делал и полный путь не выходит мозила не видит фото еxpoler красным крестом выделяет

Денис, переименуйте папку Img в img , т.е. все прописными буквами, и путь до нее тоже переименуйте. Многие сервера некорректно отображают заглавные регистры.

у меня все тот же вопрос: почему не изображения , а только надпись. я создала отдельную папку для сайта: в ней Web-страница и рисунок. Вставила : <img src="com.jpg" border="0" width="200" height="200" hspace="20" align="left" alt="Компьютер"> ПОМОГТЬЕ , В ЧЕМ ОШИБКА МОЯ ПОЧТА:

А как сделать картинку, чтобы её можно было увеличивать или уменьшать?

У меня тоже почему-то не центрирует картинку. В чем подвох?.. Код такой: <img src="img/525_70_main.jpg" align="center" border="0" width="525" height="277" hspace="20" alt="Образец гравировки" title="Образец гравировки">

Все сделала,как рекомендовано в уроке,но картинка не вставилась.Открылась рамка с красным квадратом.Сделала вывод,что ошибка может быть,или в названии,или неправильно указан путь к папке.Открыла свойства картинки и прописала как там. Все получилось.

А нельзя сунуть папку imаgе на рабочий стол? А то я не разбераю корневая не корневая

Корневая папка, это та, в которой лежат все файлы сайта. На реальном сервере это обычно (в 99,9%) папка: public_html. На локальном компьютере можете положить картинки в любую папку, в том числе и на рабочий стол. Главное правильно укажите путь до картинки.

помогите с причиной,прописал код <img width="200" height="100" alt="домой" scr="C://Users/Toshiba/Desktop/web/img/logo.png"> рисунок не отоброжаеться в вместо рисунка контекст alt=домой и прямоугольная рамка

Олег обратите внимание на Листинг 8.1, где у Вас тег: src

нужно разместить две картинки(<!-- одна под другой -->а справа текст). Работаю через таблици!

Помогите! Пытаюсь загрузить фото, у меня появляется маленький квадратик (типа фото) и пишет "Некоторые изображения были заблокированы, чтобы помочь предотвратить идентификацию вашего компьютера" ЧТО ЭТО ЗНАЧИТ? Что делать?

Все делаю как будто бы верно. Проблема: убегают картинки! Набегают одна на другую! Или исчезают совсем! Как ЗАКРЕПИТЬ их в тексте?

помогите плиз. У меня вместо картинки маленькая штучка посередине и все. Почему?

а до этого все нормально было. Картинки

спасибо огромное=)

здравствуйте. подскажите пожалуйста,а как вставить pdf картинку...?

PDF - это не картинка, это самостоятельный формат и для отображения документов (через Интеренет) в этом формате, достаточно сделать обычную ссылку, указав полный путь до нужного PDF-файла, ссылка имеет вид: http://ваш_сайт/.pdf , где .pdf -название файла.

Здравствуйте! Такая же порблема, пишет: "Некоторые изображения были заблокированы, чтобы помочь предотвратить идентификацию вашего компьютера". В Опере изображения открыты.

Помогите! Пытаюсь загрузить фото, у меня появляется маленький квадратик (типа фото) и пишет "Некоторые изображения были заблокированы, чтобы помочь предотвратить идентификацию вашего компьютера" ЧТО ЭТО ЗНАЧИТ? Что делать?

<img src="img/1.jpg" border="0" width="400" height="209" hspace="20" align="left" alt="знак"> но картинку не показывает что делать

У меня так же изображение не появляется в окне. Файл лежит в той же папке что и HTML страничка и изображение называется "pchela.jpg" В коде написано <img src="pchela.jpg"> что тут может быть не правильным?

Когда вставляю несколько картинок, они отображаются каждая на отдельной строке. А как мне их разместить в один ряд? Подскажите, пожалуйста!

Пробуйте изменить формат изображения

АндрейК, спасибо вам за урок,прочитав все комментарии,я наконец нашла свои ошибки. Спасибо всем участникам за вопросы и ответы.

Скажите пожалуйста,что не так. Создаю документ в программе Notepad++, программа установлена на локальном диске D// , не основной диск,документ тоже создан на диске D//. Изображения находятся на этом же диске D// в папке img. Вот мой код: <img src="D://img/i.jpg" border="0" width="400" height="209" hspace="20" align="left" alt="аватар"> Документ создаю на компьютере локально. В окне браузера отображается только слово аватар, сама картинка не отображается,скажите где ошибка. p.s. на диске С// есть основная папка,которая названа на латинице( из-за этого браузер не может найти путь к изображению),переименовать ее не знаю как,поэтому все делаю на диске D//

ЛЮДИ. Обратите внимание на папку(с сайтом)и на имя файла(картинки)которое Вы пишите в папке img для картинок. 1.- папка img(с картинками),должна быть в папке, в которой Вы сохранялись, создавая сайт. 2.- название файла(картинки)в папке img, нужно писать только на латыни. 3.- формат картинки jpg, рядом с названием писать не надо, только одно название. Например: mashina, или rebjonok, и всё. P.S.Я сам на этом попался. Теперь всё ОК. Андрею К. огромное спасибо и низкий поклон за человечность.Создам сайт, ссылка на Ваш сайт, будет первой.

Дмитрию СПАСИБО за пояснения. Но добавлю по поводу 3 пункта: Формат картинки, точнее расширении прописывать нужно ОБЯЗАТЕЛЬНО!!! Ведь картинка может быть не только в формате jpg, а и в других форматах, например: bmp или png. Т.е. файл картинки должен быть прописан именно: mashina.jpg , mashina.png и т.д.

Как сделать так что бы эту картинка вставленая уже, можно было посмотреть в большем размере оригинал?

Мучилась, мучилась, прочитала все комментарии Перемещала, переименовывала, копировала.... потом решила загуглить. И вот, что нашла: Если графический файл находится в одной папке с HTML-документом, то в качестве пути достаточно указать только имя файла (пример 1). Пример 1. Добавление картинки на веб-страницу HTML5IECrOpSaFx <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Мои рисунки</title> </head> <body> <p><img src="images/dzen.png" alt="Письма мастера дзен"></p> </body> </html> Хотя, так и не поняла, в чем была ошибка.

а можно ли задать цвет "border" и как?

Андрей здравствуйте, большое спасибо за статью. Подскажите пожалуйста, что я делаю не правильно, в данном случае хочу вставить Графическую кнопку в форму однострочного поля(просто как пример). Я так понимаю картинку нужно поместить в шаблон сайта? Я всё так и сделал, но всё выводится правильно, кроме графической кнопки, уже замучился. Подскажите пожалуйста. Благодарю! <form action=""> <input type="text" name="email" /> <p><input type="image" src="images/vhod.jpg" alt="Вход" width="87" height="29" /></p> </form>

Михаил, обратите внимание на листинг 8.1 (выше), изображения вставляются в html с помощью конструкции: img src="img/mers1.jpg"

Здравствуйте, помогите пожалуйста, вот с компа делаю заказ с сайта картинка и текст благодарности появляется, а вот с мобильного делаю заказ страница просто белая и не видно благодарим за заказ

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


Большие свадебные открытки своими руками

Похожие записи:



Сделать юбку хула своими руками

Как сделать тёплый пол в ванной если уже есть кафель

Лифт для циркулярки своими руками чертежи