Как вставить изображение? Как сделать изображение фоном?

Видеоурок содержит ответы на данные вопросы:

  • Как прописать изображения в текст
  • Какие бывают атрибуты у изображений
  • Как сделать изображение фоном

Скачать материалы:
Скачать 9-ый видеоурок по HTML Размер: 11.36 MB, скачали: 402 раз.
Скачать исходники к 9 видеоуроку по HTML Размер: 29.29 kB, скачали: 419 раз.
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

В прошлом видеоуроке, Вы узнали, что такое списки и линии. А в этом мы рассмотрим изображения: их форматирование и атрибуты.

Как вставить изображение в HTML?

Перейдем в папку нашего сайта. Я для вас подготовил изображение info-line.png. Сначала создадим папку с именем img. Открываем ее, и переносим туда наше изображение. Картинка имеет формат png. Это можно увидеть либо внизу, либо при наведении курсора, либо в свойствах.

Перейдем в код. Давайте вставим изображение в текст. Делается это с помощью тега <img>. В кавычках указывается путь до изображения. В нашем случае: img/info-line.png. Хочу отметить, что вводить путь нужно в соответствии с регистром, то есть, если у вас изображение прописано с большой буквы «I», то так его нужно и вводить, иначе могут возникнуть неполадки.

 <img src="img/info-line.png">
 

Если изображение находится на каком-либо другом сервере, то вводится оно следующим образом: http://доменное_имя_сайта/ папка_с_изображением/изображение. Например, можно прописать:

 <img src="http://info-line.net/img/info-line.png">
 

Вернем все, как было. Давайте сохраним и посмотрим нашу страницу в браузере.  Обновляем. Наше изображение вставлено.

Атрибуты тега <img>

Давайте теперь разберем атрибуты, которые относятся к тегу <img>. Начнем с атрибута align. Знакомый нам атрибут. Поставим значение left. Здесь align может принимать также значения top (вверху), bottom (внизу) и middle (по центру). Но мы оставим left. Атрибут align означает здесь не только то, что наше изображение будет прибито гвоздями к левой части экрана, но и то, что текст, который обтекает данное изображение, будет обтекать его с правой стороны.

 <img src="img/info-line.png" align="left">
 

Далее идет атрибут alt, который задает альтернативный текст для изображения. То есть, если наше изображение не будет загружено, или у пользователя в браузере будет отключен показ изображений, то вместо изображения будет появляться указанный в этом атрибуте текст. Введем, например “info-line”.

 <img src="img/info-line.png" align="left" alt="Info-line">
 

Наше изображение было слишком большое. Давайте сделаем его меньше с помощью атрибутов width и height (ширина и высота). Например, по 150 пикселей.

 <img src="img/info-line.png" align="left" alt="Info-line" width="150" height="150" >
 

Зададим рамку с помощью атрибута border, например 2 пикселя.

 <img src="img/info-line.png" align="left" alt="Info-line" width="150" height="150" border="2" >
 

Сохраняем страничку и проверяем. На нашей странице с левого края появилась картинка размерами 150×150 пикселей с рамкой в 2 пикселя. Единственное, что нам здесь не нравится (во всяком случае, мне) – это то, что наше изображение так плохо обтекает текст, что нам это заметно.

Давайте сделаем отступ от изображения по горизонтали. Перейдем в код и добавим еще несколько атрибутов: hspase (горизонтальный отступ изображения от другого контента) и vspace (вертикальный отступ). Укажем, например, hspace – 2 пикселя, а vspace – 5 пикселей.

 <img src="img/info-line.png" align="left" alt="Info-line" width="150" height="150" border="2" hspace="2" vspace="5">
 

Сохраним, проверим в браузере. Обновляем страницу – отступ удался.

Давайте теперь сделаем так, чтобы после слова «нужно» обтекание текстом нашего изображения завершалось.  Переходим в код, находим слово «нужно»  с помощью комбинации клавиш «Ctrl+F».  Видим тег переноса. Этот тег имеет атрибут clear, который непосредственно относится к тексту. Атрибут имеет три значения: all, left и right. Что они означают? Они завершают обтекание текста.  Но значения left и right применяются тогда, когда в атрибуте align заданы значения left или right. Таким образом, у нас задано значение атрибута align – left, и мы применяем left к атрибуту clear. Наш текст будет отображен слева.

 <br clear="left">Это был именно тот момент в жизни, когда что-то внутри перещелкнуло и я стал идти по пути успеха.
 

Давайте сохраним и обновим нашу страничку в браузере. Мы видим, что наш текст, который ранее отображался справа от изображения, теперь отображается снизу. Это выглядит красивее.

Как сделать изображение фоном?

Перейдем в код и поговорим о том, как задать фон странички с помощью изображений (ведь вы уже знаете, как задать фон обычными цветами?).

Ищем тег. Прописываем атрибут background. В кавычках указываем путь до изображения. Давайте перейдем на рабочий стол. Я подготовил еще одно изображение для этого видеоурока. Называется оно bg.png. Его также нужно перенести в папку img. Оно имеет такое же расширение – png.

 <body text="#660000" bgcolor="#FFFCC" background="img/bg.png">
 

Давайте сохраним и проверим в браузере. Обновляем страницу. Как видим, фон у нас задан.

Что ж, на этом мы заканчиваем этот видеоурок. Попрактикуйтесь с изображениями. До встречи в следующем видеоуроке, в котором вы узнаете, что такое ссылки в HTML.

Подпишись на info-line:

Получать новые уроки на e-mail:

11 комментариев на “Как вставить изображение? Как сделать изображение фоном?”

  1. Александр 17 апреля 2012 в 19:29 #

    Неполучается вставить разные изображения, первое появляется, а второе просто как картинка «изображение», bottom, middle и top тоже не работают.

    <!DOCTYPE HTML PUBLIC>
    <html>
    <head>
    <title>Сайт</title>
    <meta http-equiv="content-language" content="ru">
    <meta http-equiv="content-tipe" content="text/html" charset="windows-1251">
    <meta name="keywords" content="Сайт, про, спорт">
    <meta name="destrictions" content="Сайт про разные виды спорта">
    </head>
    <body text="#110000" bgcolor="#FFCC99">
    <h1 align="center"><font size="10" color="#0099CC" face="monotype corsiva">Добро пожаловать на мой сайт!</font></h1>
    <p align="center"><font size="5">Текст</font></p>
    <h2 align="center"><font size="7" face="monotype corsiva">Альпинизм, спорт или отдых?</h2></font>
    <img align="left" src="img/img1.png" alt="img1" width=150" height="150"><br>Альпинизм — вид спорта и активного отдыха. Спортивная сущность альпинизма состоит в преодолении препятствий, создаваемых природой (высота, рельеф, погода), на пути к вершине. В спортивных соревнованиях по альпинизму объектом состязания являются высота вершины, техническая сложность пройденного маршрута, его характер и протяжённость.
    <br>Зародившись в <b>Альпах</b>, альпинизм именно здесь впервые стал развиваться как <b><i>вид спорта.</i></b> Чисто спортивные восхождения на вершины начали совершаться в Альпах ещё в начале XIX в. Особенно широкий размах развитие спортивного альпинизма получило в XX веке.
    <br>К началу XX века все вершины Альп были покорены, и восходители стали искать новые, более сложные маршруты восхождений. Чем сложнее был маршрут, тем более спортивным считалось восхождение. Так постепенно появился, вырос и утвердился «стенной» альпинизм, то есть прохождение маршрутов по отвесным стенам гор.
    <br>Сильнейшими альпинистами в этой области были представители альпийских государств: итальянцы, немцы, австрийцы, французы, а также англичане. Во второй половине ХХ века были пройдены такие стены в Альпах, которые до этого долгое время считались абсолютно неприступными. Это свидетельствовало о том, что спортивный класс альпинистов, безусловно, вырос. Большое значение для роста спортивного мастерства сыграло общее развитие снаряжения и техники преодоления скальных и ледовых участков. Появились более легкие и прочные верёвки из синтетических волокон, облегченные кошки, ледорубы, шлямбуры и закладки, дюралевые лесенки, усовершенствованные кухни, новые продукты, лёгкая, тёплая одежда и обувь — все это, существенно повлияло на качественный рост альпинизма.</br>
    <br>
    <hr>
    <img align="left" src="img/img1.png" alt="img1" width="150" height="150" border="1">
    <img align="right" src="img/QWE.png" width="150" height="150" border="1">
    

    • Олег Зубцов 17 апреля 2012 в 20:48 #

      Значения bottom, middle и top не работают, потому что для них используется атрибут valign, а не align. И если мне не изменяет память, то они работают только в таблицах. Но возможна память мне изменяет 🙂

      На счет изображений — скорее всего проблема в том, что 2-ое изображение у вас не находится в той папке, которую вы указали или называется по другому, или имеет другое расширение. Проверьте это!

      P.S. Чтобы вставлять в комментариях код правильно, не забывайте в атрибут lang="" значение языка, например html или css.

  2. Александр 18 апреля 2012 в 21:20 #

    Спасибо, помогло =)

  3. Илья 23 июля 2012 в 9:26 #

    Олег, у меня почему-то не вставляется изображение. эксплоуер и опера пишут изображение, но саму картинку не отображают, почему?

    • Олег Зубцов 29 октября 2012 в 8:34 #

      Проверь путь к изображению и сверь указанный формат изображения с настоящим.

  4. Константин 14 января 2013 в 20:23 #

    Олег, если я тебе сайт с HTML кодом скину, сможешь показать где там меняется фон: в голове и теле (как ты говорил:) )?

    Все просмотрел не могу найти. Спасибо

    www.everestprof.ru

    • Олег Зубцов 20 января 2013 в 14:38 #

      Вот твой HTML-код:

      <html><head>
                      <title>Пиротехника, салюты, фейерверки</title>
      		<meta name="keywords" content="Пиротехника, салюты, фейерверки">
                      <meta name="description" content="Пиротехника, салюты, фейерверки">
      		<link rel="stylesheet" href="/assets/1/2127/75855/v_1358424797/style.css">
                      <link rel="stylesheet" href="/assets/1/2127/75855/v_1358424797/custom.css">
      		<link rel="stylesheet" href="/assets/1/2127/75855/v_1358424797/wysiwyg.css">
      
      		<!--[if lt IE 7]><link href="/assets/1/2127/75855/v_1358424797/ie6-style.css" rel="stylesheet"><![endif]-->
      
      		<script src="http://google.com/jsapi"></script><style type="text/css"></style>
      		<script>google.load("jquery","1.4.2");</script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
      		<script src="/javascripts/shop/insales-api.js?1352793590"></script>
      		<script>
      Insales.money = '{{amount_with_comma_separator}} руб';
      Insales.addToCartUrl = (function(){var Splited = "/cart_items".split("?");Splited[0] += ".json";return Splited.join("?")})()</script>
      		<script>			$(function(){if(($.browser.opera&&$.browser.version<10.50)||$.browser.msie)$("body").addClass( "bad-browser");})
      		</script>
      
              <script src="/javascripts/shop/theme_common.js?1343231090"></script>
      		<script src="/assets/1/2127/75855/v_1358424797/theme.js"></script>
      	    <script type="text/javascript" src="/javascripts/shadowbox/adapter/shadowbox-jquery.js?1343231090"></script>
      	    <script type="text/javascript" src="/javascripts/shadowbox/shadowbox.js?1343231090"></script>
      	    <script type="text/javascript">
      		    Shadowbox.loadSkin('classic', '/javascripts/shadowbox/skin');
      		    Shadowbox.loadLanguage('ru', '/javascripts/shadowbox/lang');
      		    Shadowbox.loadPlayer(['img'], '/javascripts/shadowbox/player');
      		    window.onload = Shadowbox.init;
      	    </script><link rel="stylesheet" type="text/css" href="/javascripts/shadowbox/skin/classic/skin.css"><script type="text/javascript" src="/javascripts/shadowbox/skin/classic/skin.js"></script><script type="text/javascript" src="/javascripts/shadowbox/lang/shadowbox-ru.js"></script><script type="text/javascript" src="/javascripts/shadowbox/player/shadowbox-img.js"></script>
      	<meta name="chromesniffer" id="chromesniffer_meta" content="{&quot;jQuery&quot;:&quot;1.4.2&quot;,&quot;Google Loader&quot;:-1}"><script type="text/javascript" src="chrome-extension://homgcnaoacgigpkkljjjekpignblkeae/detector.js"></script><script id="objHTMLFormElementPrototype">try{   document.objHTMLFormElementPrototype = new Object();   document.objHTMLFormElementPrototype.submit = HTMLFormElement.prototype.submit;   HTMLFormElement.prototype.submit = function(AEvent)   {      var kpmEvent = document.createEvent('Event');      kpmEvent.initEvent('kpm_submit', true, true);      this.dispatchEvent(kpmEvent);      document.objHTMLFormElementPrototype.submit.apply(this);   };}catch(e){  alert('Error during attach to HTMLFormElement.prototype.submit: ' + ErrorMessage);}</script></head><div style="display: none;" id="LZ1TFwfH2A0rAd5eSLk8phjOM8" class="HF_Dct1liQWwXnvYv"></div><div style="display: none;" id="mPpcbwpLiUcD56UC0JHlUTMwMl" class="HF_Dct1liQWwXnvYv"></div><div style="display: none;" id="vZRAc54O9GldP6VL" class="HF_Dct1liQWwXnvYv"></div>
      
      	<body kpmisdocumentcomplete="666" kpmsourceindexset="666">
      
      		<div class="insales-wrapper">
      			<div class="insales-header">
      
      				<ul class="navigation">
      					
      					<li><a href="/" class="d-link active" data-dlink="done"><span class="d-shadow">О компании</span><span class="d-text">О компании</span></a></li>
      					
      					<li><a href="/page/доставка" class="d-link" data-dlink="done"><span class="d-shadow">Условия доставки</span><span class="d-text">Условия доставки</span></a></li>
      					
      					<li><a href="/page/feedback" class="d-link" data-dlink="done"><span class="d-shadow">Обратная связь</span><span class="d-text">Обратная связь</span></a></li>
      					
      					<li><a href="/page/kontakty" class="d-link" data-dlink="done"><span class="d-shadow">Контакты</span><span class="d-text">Контакты</span></a></li>
      					
      					<li><a href="/cart_items" class="d-link" data-dlink="done"><span class="d-shadow">Корзина</span><span class="d-text">Корзина</span></a></li>
      					
      				</ul>
      
      				<form class="searchform" action="/search" sourceindex="0">
      					<input class="query" type="text" name="q" value="" sourceindex="1">
      					<input class="submit" type="submit" value="" sourceindex="2">
      				</form>
      
      			</div>
      
      			<table class="insales-body">
      				<tbody><tr>
      				<td class="insales-sidebar">
      					<div class="shop-ph">(495) 762-45-37</div>
      					<h2 class="shop-name">
                              
                              
                                  <a href="/" class="d-link" data-dlink="done"><span class="d-shadow">Пиротехника, салюты, фейерверки</span><span class="d-text">Пиротехника, салюты, фейерверки</span></a>
                              
                              
                          </h2>
      					<p class="shop-slogan"></p>
      
                          <div class="cart">
                              <div class="cart-header">
                                      <a href="/cart_items" class="d-link" data-dlink="done"><span class="d-shadow">Корзина</span><span class="d-text">Корзина</span></a>
                                      <div class="cart-loading">Подождите...</div>
                              </div>
      
                              <div class="cart-body">
                                      <div class="bill">
                                              <span class="products">Товаров: <span class="count">3</span></span>
                                              <span class="sum-container">780 руб</span>
                                      </div>
                              </div>
                              
                              <div class="buttons-container">
                                      <a href="/cart_items" class="d-link gr-button" data-dlink="done"><span class="d-shadow">Оформить заказ</span><span class="d-text">Оформить заказ</span></a>
                              </div>
                              
                          </div>
      
      					
      					<p class="block-headline"><a class="d-link" href="/collection/batarei-salyutov" data-dlink="done"><span class="d-shadow">Батареи салютов</span><span class="d-text">Батареи салютов</span></a></p>
      					
      					<ul class="block-body">
      						
      						<li><a href="/collection/kategoriya-2">0,8"</a>
      					        
      						</li>
      						
      						<li><a href="/collection/kategoriya-1">1,00"</a>
      					        
      						</li>
      						
      						<li><a href="/collection/kategoriya-2-2">1,25"</a>
      					        
      						</li>
      						
      					</ul>
      					
      					
      					<p class="block-headline"><a class="d-link" href="/collection/feyerverki" data-dlink="done"><span class="d-shadow">Фейерверки</span><span class="d-text">Фейерверки</span></a></p>
      					
      					<ul class="block-body">
      						
      						<li><a href="/collection/kategoriya-3">Летающий</a>
      					        
      						</li>
      						
      						<li><a href="/collection/kategoriya-1-2">Наземный</a>
      					        
      						</li>
      						
      					</ul>
      					
      					
      					<p class="block-headline"><a class="d-link" href="/collection/odinochnye-salyuty" data-dlink="done"><span class="d-shadow">Одиночные салюты</span><span class="d-text">Одиночные салюты</span></a></p>
      					
      					
      					<p class="block-headline"><a class="d-link" href="/collection/kategoriya" data-dlink="done"><span class="d-shadow">Петарды</span><span class="d-text">Петарды</span></a></p>
      					
      					
      					<p class="block-headline"><a class="d-link" href="/collection/rakety" data-dlink="done"><span class="d-shadow">Ракеты</span><span class="d-text">Ракеты</span></a></p>
      					
      					
      					<p class="block-headline"><a class="d-link" href="/collection/rimskie-svechi" data-dlink="done"><span class="d-shadow">Римские свечи</span><span class="d-text">Римские свечи</span></a></p>
      					
      					
      					<p class="block-headline"><a class="d-link" href="/collection/fontany" data-dlink="done"><span class="d-shadow">Фонтаны</span><span class="d-text">Фонтаны</span></a></p>
      					
      					
      					<p class="block-headline"><a class="d-link" href="/collection/hlopushki" data-dlink="done"><span class="d-shadow">Хлопушки</span><span class="d-text">Хлопушки</span></a></p>
      					
      					
      				</td>
      
      				<td class="insales-content">
      					<h1 class="page-title">О компании</h1>
      <div class="wysiwyg-content">
          <p style="text-align: center;"><span style="color: #993300; font-size: large;"><strong><span style="font-family: verdana, geneva;">Добро пожаловать в интернет-магазин пиротехники, </span></strong></span></p>
      <p style="text-align: center;"><span style="color: #993300; font-size: large;"><strong><span style="font-family: verdana, geneva;">салютов</span><span style="font-family: verdana, geneva;"> и фейерверков!</span></strong></span></p>
      <p style="text-align: center;"><strong><span style="font-size: medium; color: #0000ff;"><span style="font-family: verdana, geneva;">&nbsp;</span></span><span style="color: #0000ff;"><span style="font-family: verdana, geneva;"><span style="color: #000000;">Компания&nbsp;</span><span style="color: #000000;">&nbsp;ООО "Эверест"&nbsp;предлагает Вашему вниманию фейерверки в Москве и Московской области.</span></span></span></strong></p>
      <p style="text-align: center;"><strong><span style="color: #000000;"><span style="font-family: verdana, geneva;">&nbsp; Наша компания занимается продажей широкого ассортимента фейерверк продукции, которое отвечает самым высоким качеством и безопасности изделий. У нас самые доступные цены на пиротехнику.</span></span></strong></p>
      <p style="text-align: center;"><strong><span style="font-family: verdana, geneva;">Мы с радостью принимаем и обслуживаем заказы 7 дней в неделю с 8.00 до 20.00 по московскому времени.&nbsp;</span></strong></p>
      <p style="text-align: center;"><strong><span style="font-family: verdana, geneva;">Сделайте заказ через сайт и мы Вам перезвоним для согласования времени доставки заказа.</span></strong></p>
      <p style="text-align: center;"><img src="http://static2.insales.ru/files/1/8135/409543/original/231.png" width="256" height="256">&nbsp; &nbsp; &nbsp;<img src="http://static2.insales.ru/files/1/8136/409544/original/73.png" width="256" height="256"></p>
      </div>
      <ul class="collection-products">
      	
      </ul>
      				</td>
      				</tr>
      			</tbody></table>
      
      			<div class="insales-footer floats-container">
      				<div class="left">
      					© <a class="d-link" href="/" data-dlink="done"><span class="d-shadow">Пиротехника, салюты, фейерверки</span><span class="d-text">Пиротехника, салюты, фейерверки</span></a> 2010. Все права защищены.
      				</div>
      
      				<div class="right">
      					<p>(495) 762-45-37</p>
      					
      					<p><img src="http://status.icq.com/online.gif?icq=623669499&amp;img=5"> 623669499</p>
      					
      				</div>
      			</div>
      		</div>
      	        <!--InsalesCounter -->
              <script type="text/javascript">
              if (typeof(__id) == 'undefined') {
                var __id=70202;
                document.write(unescape('%3Cscript type="text/javascript" src="/javascripts/insales_counter.js"%3E%3C/scr' + 'ipt%3E'));
              }
              </script><script type="text/javascript" src="/javascripts/insales_counter.js"></script>
              <!-- /InsalesCounter -->
      
      
      
      <embed id="kpmAutofillPlugin" type="application/x-npkpmautofillplugin" style="visibility: hidden; width: 0; height: 0; position: absolute;"><div id="shadowbox_container"><div id="shadowbox_overlay"></div><div id="shadowbox"><div id="shadowbox_title"><div id="shadowbox_title_inner"></div></div><div id="shadowbox_body"><div id="shadowbox_body_inner"></div><div id="shadowbox_loading"><div id="shadowbox_loading_indicator"></div><span><a onclick="Shadowbox.close();">Отмена</a></span></div></div><div id="shadowbox_info"><div id="shadowbox_info_inner"><div id="shadowbox_counter"></div><div id="shadowbox_nav"><a id="shadowbox_nav_close" title="Закрыть" onclick="Shadowbox.close()"></a><a id="shadowbox_nav_next" title="Следующая" onclick="Shadowbox.next()"></a><a id="shadowbox_nav_play" title="Пуск" onclick="Shadowbox.play()"></a><a id="shadowbox_nav_pause" title="Пауза" onclick="Shadowbox.pause()"></a><a id="shadowbox_nav_previous" title="Предыдущая" onclick="Shadowbox.previous()"></a></div><div class="shadowbox_clear"></div></div></div></div></div></body></html>
      

      Твой тег body:

      <body></body>

      Твоя обложка (обертка, wrapper):

      <div class="insales-wrapper"></div>

      Твоя шапка:

      <div class="insales-header"></div>

      Твой левый сайдбар:

      <td class="insales-sidebar"></td>

      Твой контент:

      <td class="insales-content"></td>

      Как видишь, все твои области имеют свой класс. Значит все задается в CSS. В этом уроке, я показывал как с помощью html задать все это. Если хочешь — задавай с помощью HTML, но смотри, чтобы не было нестыковок с CSS.

      Или, лучше всего, на мой взгляд, просто подредактируй файл CSS.

      body {
      color: #333333;
      background: #F7F7F7;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      background-image: url('/assets/1/2127/75855/v_1358424796/bg.jpg');
      background-position: top right;
      background-repeat: repeat-x;
      background-attachment: scroll;
      }
      .insales-wrapper {
      width: 960px;
      margin: 0 auto;
      }
      .insales-header {
      position: relative;
      height: 75px;
      }
      .insales-sidebar {
      background: #A6D6E0 url('/assets/1/2127/75855/v_1358424796/sidebar.svg.png') repeat-x;
      border-right: 1px solid #1009E3;
      }
      .insales-content {
      background: #89D1E0;
      }
      

      Как видишь, в обертке и в шапке, фон не задается. Он задан у тебя в теге body. Сайдбар и контент тоже имеют свой фон 🙂

      Мой совет: редактируй CSS.

  5. Олег Зубцов 14 января 2013 в 21:08 #

    Кидай, только в тегах code, чтобы он отобразился 🙂

    Я в этом уроке это говорил?)) Или в каком-то другом?)

    Итак, чтобы ты не скидывал лишний раз, попытаюсь ответить на твой вопрос сразу 🙂

    Как прописать фоновое изображение ячейке таблицы?

    Способ 1: с помощью свойства background (рекомендуется не использовать)

    <table>
    <tr>
      <td background="URL картинки"></td>
    </tr>
    </table>

    Способ 2: с помощью таблиц стилей (CSS)

    <table>
    <tr>
      <td style="background-image: url(image.jpg);"></td>
    </tr>
    </table>

  6. Серикбол 18 января 2013 в 14:25 #

    После того как вставил изображение, при его открытии выходит , «проверьте правильность введённого имени файла, соответствие регистра и отсутствие других ошибок в имени файла.Проверьте, не был ли файл переименован, удалён или перемещён.» Т.е я вставил имеющиеся в данный мом.изображение в формате JPEG , а изображеие в формате «png» при скачивании не сохраняется, сохраняется только в word

    • Олег Зубцов 20 января 2013 в 1:52 #

      В смысле «при скачивании не сохраняются, сохраняется только в word»?

      Это как? 🙂 И в чем, собственно вопрос, если он тут есть?)

      На счет вставки изображений: должно вставляться и jpeg и png. Главное, чтобы расширение изображения совпадало с указанным в коде. Т.е. если изображение имеет расширение jpg, то и в коде должно быть jpg, а не jpeg.

      На счет непонятных скачиваний и т.п. — обычно дело в браузере.

      Ребята, проверяйте сайт в разных браузерах, при возникновении каких-либо неполадок.

  7. Мари 22 августа 2013 в 3:45 #

    Спасибо!!!!!!! наконец то нашла то что заработало!

Оставить ответ