Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 9 видеоуроку по HTML Размер: 29.29 kB, скачали: 514 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл 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.net
Неполучается вставить разные изображения, первое появляется, а второе просто как картинка «изображение», bottom, middle и top тоже не работают.
Значения
bottom,middleиtopне работают, потому что для них используется атрибутvalign, а неalign. И если мне не изменяет память, то они работают только в таблицах. Но возможна память мне изменяет 🙂На счет изображений — скорее всего проблема в том, что 2-ое изображение у вас не находится в той папке, которую вы указали или называется по другому, или имеет другое расширение. Проверьте это!
P.S. Чтобы вставлять в комментариях код правильно, не забывайте в атрибут
lang=""значение языка, напримерhtmlилиcss.Спасибо, помогло =)
Олег, у меня почему-то не вставляется изображение. эксплоуер и опера пишут изображение, но саму картинку не отображают, почему?
Проверь путь к изображению и сверь указанный формат изображения с настоящим.
Олег, если я тебе сайт с HTML кодом скину, сможешь показать где там меняется фон: в голове и теле (как ты говорил:) )?
Все просмотрел не могу найти. Спасибо
Вот твой 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="{"jQuery":"1.4.2","Google Loader":-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;"> </span></span><span style="color: #0000ff;"><span style="font-family: verdana, geneva;"><span style="color: #000000;">Компания </span><span style="color: #000000;"> ООО "Эверест" предлагает Вашему вниманию фейерверки в Москве и Московской области.</span></span></span></strong></p> <p style="text-align: center;"><strong><span style="color: #000000;"><span style="font-family: verdana, geneva;"> Наша компания занимается продажей широкого ассортимента фейерверк продукции, которое отвечает самым высоким качеством и безопасности изделий. У нас самые доступные цены на пиротехнику.</span></span></strong></p> <p style="text-align: center;"><strong><span style="font-family: verdana, geneva;">Мы с радостью принимаем и обслуживаем заказы 7 дней в неделю с 8.00 до 20.00 по московскому времени. </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"> <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&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:
Твоя обложка (обертка, wrapper):
Твоя шапка:
Твой левый сайдбар:
Твой контент:
Как видишь, все твои области имеют свой класс. Значит все задается в 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.
Кидай, только в тегах
code, чтобы он отобразился 🙂Я в этом уроке это говорил?)) Или в каком-то другом?)
Итак, чтобы ты не скидывал лишний раз, попытаюсь ответить на твой вопрос сразу 🙂
Как прописать фоновое изображение ячейке таблицы?
Способ 1: с помощью свойства background (рекомендуется не использовать)
Способ 2: с помощью таблиц стилей (CSS)
После того как вставил изображение, при его открытии выходит , «проверьте правильность введённого имени файла, соответствие регистра и отсутствие других ошибок в имени файла.Проверьте, не был ли файл переименован, удалён или перемещён.» Т.е я вставил имеющиеся в данный мом.изображение в формате JPEG , а изображеие в формате «png» при скачивании не сохраняется, сохраняется только в word
В смысле «при скачивании не сохраняются, сохраняется только в word»?
Это как? 🙂 И в чем, собственно вопрос, если он тут есть?)
На счет вставки изображений: должно вставляться и jpeg и png. Главное, чтобы расширение изображения совпадало с указанным в коде. Т.е. если изображение имеет расширение jpg, то и в коде должно быть jpg, а не jpeg.
На счет непонятных скачиваний и т.п. — обычно дело в браузере.
Ребята, проверяйте сайт в разных браузерах, при возникновении каких-либо неполадок.
Спасибо!!!!!!! наконец то нашла то что заработало!