Для отображения изображения на странице, нужно использовать атрибут SRC. Src означает "источник". Значение атрибута SRC – URL изображения, которое вы хотите отобразить на вашей странице.

Синтаксис определения изображения:

          <img src="url">

URL указывает на место, где хранятся изображения. Изображение с именем "logotip.gif", расположенное в каталоге "images" на www.mysite.ru будет иметь URL: http://www.mysite.ru/images/logotip.gif.

Браузер помещает изображение там где встречает тэг изображения.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Наверх

3. Атрибут Alt

Alt атрибут используется для определения альтернативного текста для изображений. Значением атрибута Alt является определённый текст написанный автором:

          <img src="logotip.gif" alt="Логотип компании MySite">

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

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Наверх

4. Примечания - полезные советы

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

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Наверх

5. Примеры 1 часть

Вставка картинок
Этот пример показывает, каким образом можно отображать изображения на веб-странице.

 <html>

   <body>
 <p>

            Изображение:

   <img  src="constr4.gif"

            width="144" height="50">

   </p>
 <p>

            Анимированное изображение:

   <img  src="computer.gif"

            width="48"  height="48">

   </p>
 <p>

            Заметим, что синтаксис включения  анимированного изображения ничем не  отличается от синтаксиса не анимированного.

   </p>

          </body>

   </html>

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

 <html>

 <body>
 <p>

            Изображение из другой папки:

   <img  src="/images/menu.jpg"

            width="35" height="12">

   </p>
 <p>

            Изображение из сервера Site-2:

   <img  src="http://www.site-2.ru/foto.jpg" width="170"  height="200">

   </p>

          </body>

   </html>

Фоновое изображение
Этот пример показывает, каким образом можно добавить фоновый рисунок на HTML-страницу.

 <html>

 <body  background="background.jpg">
 <h3>Смотрите: фоновое  изображение!</h3>
 <p>И GIF и JPG-файлы можно  использовать как фоны HTML.</p>
 <p>Если изображение меньше,  чем страница, изображение будет  повторяться.

   </p>

          </body>

   </html>
       

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

 <html>

 <body>
 <p>

            Изображение в тексте

   <img  src="computer.gif"

            align="bottom"  width="48" height="48"> 

            выровненное по нижней границе текста.

   </p>
 <p>

            Изображение в тексте

   <img src  ="computer.gif"

            align="middle"  width="48" height="48"> 

            выровненное середине текста.

   </p>
 <p>

            Изображение в тексте

   <img src  ="computer.gif"

            align="top"  width="48" height="48"> 

            выровненное по верхней границе текста.

   </p>
 <p>

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

   </p>
 <p>

            Изображение в тексте

   <img src  ="computer.gif"

            width="48" height="48"> 

            по умолчанию

   </p>
 <p>

   <img  src ="computer.gif"

            width="48" height="48"> 

            Изображение перед текстом

   </p>
 <p>

            Изображение после текста

   <img src  ="computer.gif"

            width="48"  height="48"> 

   </p>

          </body>

   </html>

Изображение обтекаемое текстом
Этот пример демонстрирует, как сделать так, чтобы изображение находилось слева или справа от параграфа.

 <html>

 <body>
 <p>

   <img  src ="computer.gif"

            align ="left"  width="48" height="48"> 

            Параграф с изображением. Атрибут изображения align,  установлен в  "left". Изображение будет слева от этого текста.  </p>
 <p>

   <img src  ="computer.gif"

            align ="right"  width="48" height="48"> 

            Параграф с изображением. Атрибут изображения align,  установлен в  "right". Изображение будет справа от этого текста. 

   </p>

          </body>

   </html>

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Наверх

6. Примеры 2 часть

Изменение размеров изображений
Этот пример показывает, каким образом можно отрегулировать размер изображения.

 <html>

 <body>
 <p>

   <img  src="computer.gif"

            width="20"  height="20">

   </p>
 <p>

   <img  src="computer.gif"

            width="45"  height="45">

   </p>
 <p>

   <img  src="computer.gif"

            width="70" height="70">

   </p>
 <p>

            Вы можете сделать изображение  большего или меньшего размера, изменяя  значения атрибутов "width" и "height" в тэге  IMG.

   </p>

          </body>

   </html>

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

 <html>

 <body>
 <img  src="goleft.gif" alt="Назад" width="32"  height="32">
 <p>

            Браузеры, в которых пользователь отключил возможность отображения  изображений - покажут только текст, который определен в признаке  "Alt"  для изображения. Здесь, "Alt"-текст:  "Назад". 

   </p>

   <p>

            Заметим, что если вы держите курсор мыши над  изображением,  большинство браузеров  будут показывать "Alt"-текст.

   </p>

          </body>

   </html>

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

 <html>

 <body>

 <p>

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

 <a  href="lastpage.htm">

 <img  border="0" src="buttonnext.gif" width="65"  height="38">

 </a>

 </p>

          </body>

   </html>

Создайте из изображения карту
Этот пример демонстрирует, как создать карту изображения, с интерактивными областями, где каждая из областей - гиперссылка. (реальный пример будет на сайте, дня через 2-3)

 <html>

 <body>
 <p>

            Нажмите на одну из планет, чтобы посмотреть  на неё ближе:

   </p>
 <img  src="planets.gif" 

            width="145"  height="126" 

            usemap="#planetmap">
 <map  id="planetmap" name="planetmap">
 <area  shape="rect" 

            coords="0,0,82,126" 

            alt="Солнце"

            href="sun.htm">
 <area  shape="circle" 

            coords="90,58,3" 

            alt="Меркурий"

            href="mercur.htm">
 <area  shape="circle" 

            coords="124,58,8" 

            alt="Венера"

            href="venus.htm">
 </map>
 <p><b>Примичание:</b> Посмотрите, атрибут "usemap" в элементе img  может ссылается как на  "id" так и на  "name" атрибут в элементе map,  поэтому в элементе map мы используем оба атрибута "id" и "name".</p>

          </body>

   </html>
       

Превратите любое изображение в изображение-карту
Этот пример демонстрирует, как превратить изображение в карту изображения. Вы увидите, что если вы перемещаете указатель мыши по изображению, координаты будут отображаться в строке состояния.

 <html>

 <body>
 <p>

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

   </p>
 <p>

   <a  href="tryhtml_ismap.htm">

   <img  src="planets.gif" 
           ismap  width="146" height="126">

   </a>

   </p>

          </body>

   </html>

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Наверх

7. Таблица изученных тэгов

Тэги изображения
Тэг	Описание
<img>	Определяет изображение
<map>	Определяет изображение-карту
<area>	Определяет область клика в карте-изображении

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Наверх

8. В следующем выпуске (16 янв. 09)

Тема выпуска будет посвящена фоновой закраске страниц и фоновым изображениям. Выясним какой фон будет хорошим, а какой плохим.

Ближайшие специальные выпуски:

14 янв. 09 - "Свободная трибуна" - отменён из-за отсутствия материалов с вашей стороны;
24 янв. 09 - "ЧаВо";
26 янв. 09 - "Полезные Интернет-ресурсы";

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Наверх

Правило седьмое
Чтобы жить лучше
Каждый день - это особый дар от Бога. Хотя жизнь не всегда бывает справедливой, не следует позволять мимолётным неудачам и разочарованиям отвравлять ваше отношение к себе и планы на будущее. Вы никогда не сможете победить кутаясь в рубище жалости к себе, а унылые причитания отпугнут любую возможность успеха. Больше не делайте этого. Вы заслуживаете лучшей участи.

Ог Мондино , "Ключ к лучшей жизни ".

^*Общее количество на 2-х рассылочных сервисах (Content.Mail.Ru и Subscribe.ru).

  Шаблон для рассылки был взят с сайта www.woweb.ru

В избранное

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} {#if $P.login_register_tab == 1} <form class="authentication-form" method="post" action="/MEMBERLOGIN_authen_cred"> <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <h1>Войти на сайт</h1> {* {#include js_tmpl_auth_reg_button} *} {#include js_tmpl_auth_reg_action} <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones"><p>{#include js_tmpl_auth_reg_descr} </p></div> <div class="logreg_advice noPhones"> Если вы еще не с нами, то начните с <a href="#" onclick="rgNav('js_tab_reg');return false;" class="dashed" data-func="registr">регистрации</a> </div> <br><br> <a class="dashed auth-enter" href="/manage/author/"><b>Вход для авторов</b></a> </dt> </dl> </form> {#/if} {#if $P.login_register_tab == 2} <div class="rg_block_options"> <div id="js_tap_panel_auth"> <h1>Регистрация</h1> <div class="social_reg"> {* <div class="rg_description">{#include js_tmpl_soc_auth_reg_descr}</div> *} {#include js_tmpl_auth_reg_soc} <div class="rg_soc_auth_agree">{#include js_tmpl_auth_reg_agree}</div> </div> <div class="subscribe_reg"> {* <div class="rg_description"> #include js_tmpl_auth_reg_descr </div> *} {#include js_tmpl_auth_reg_action} </div> {* {#include js_tmpl_auth_reg_button} *} <div class="clr"> </div> <hr class="logreg_line noPhones"> <div class="logreg_descr noPhones">{#include js_tmpl_auth_reg_descr} {#include js_tmpl_soc_auth_reg_descr} </div> </div> </div> {#/if} </div> {* <div class="gray_bg register_shadow"></div> *} </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_auth" class="{#if $P.login_register_tab == 1} rg_active_nav {#/if} rg_first_nav"><a onclick="rgNav('js_tab_auth');return false;" href="">Вход на сайт</a></li> <li id="js_tab_reg" class="{#if $P.login_register_tab == 2} rg_active_nav {#/if}"><a onclick="rgNav('js_tab_reg');return false;" href="">Регистрация </a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_action} {#if $P.login_register_tab == 1} {#include js_tmpl_auth_reg_soc} {#/if} <div class="rg_forms"> <input type="hidden" id="login_register_destination" value="{$P.login_register_destination}"/> {#if $P.login_register_tab == 1} <div class="rg_for_input"> <span class="rg_text_inner">E-mail или код подписчика</span> <input id="credential_0" class="js_keydown_selector rg_input_text" data-js_submit="no" data-js_next_input_name="credential_1" name="" type="text" /> </div> <div class="rg_for_input"> <span class="rg_text_inner">Пароль</span> <input id="credential_1" class="js_keydown_selector rg_input_text" data-js_submit="yes" data-js_action="js_loginFormBut" name="" type="password" onkeyup="showAttention(this,!!window.event.shiftKey)" /> <span class="pswd_attention" id="attention_pswd"> <span class="icon_attention"></span> <span class="pswd_attention-text" id="attention-text_pswd1">Русская раскладка клавиатуры!</span> <span class="pswd_attention-text" id="attention-text_pswd2">У вас включен Caps Lock!</span> <span class="pswd_attention-text" id="attention-text_pswd3">У вас включен Caps Lock и русская раскладка клавиатуры!</span> </span> </div> <div class="rg_for_input input-alien"> <span class="chk noPhones"><input id="chk_alien" name="" type="checkbox" /></span><label for="chk_alien" class="noPhones"> Чужой компьютер</label> <a class="forgot_pass" href="/member/totalrecall">Забыли пароль?</a> </div> <div class="rg_for_input"> <em id="auth_msg" class="reg_error"></em> <input id="lf_typeauthid" value="email" type="hidden"> <input type="submit" class="button button-red logreg_submit" id="js_loginFormBut" value="Войти">  <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} {#if $P.login_register_tab == 2} <div class="rg_for_input"> <span class="rg_text_inner">E-mail</span> <input id="arfemail" class="js_keydown_selector rg_input_text" name="" type="text" data-js_submit="yes" data-js_action="js_regFormBut"/> </div> <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a> </label> <br /> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_personal' type="checkbox" data-js_submit="yes" /></span> Нажимая на кнопку "Готово!", я даю <a class="link_txd logreg_accLink" href="/faq/persverordnung.html">согласие на обработку персональных данных</a> </label> </div> {* <div style="float: left;position: absolute;left: 11em;"> <img src="http://www.kupivip.ru/images/vip/logo.png?1604" style="width: 86px; vertical-align: middle;display: block;"> </div> <div class="rg_for_input rg_set_lineh"> <label class="js_tap_panel_checkbox"><input name="" id="js_tap_panel_checkbox_kupivip" type="checkbox" data-js_submit="yes"> Я хочу получать новости о скидках на одежду</label> </div> *} <div class="rg_for_input"> <em id="reg_msg" class="reg_error rg_for_input_wide"></em> <em id="reg_msg2" class="reg_error rg_for_input_wide"></em> <input id="rf_typeauthid" value="email" type="hidden"> <a class="button button-red logreg_submit" id="js_regFormBut" href="#">Готово!</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> </div> {#/if} </div> {#/template js_tmpl_auth_reg_action} {#template js_tmpl_auth_reg_agree} <div class="rg_for_input rg_set_lineh rg_for_input_wide"> <label class="js_tap_panel_checkbox"> <span class="chk"><input name="" id='js_tap_panel_checkbox_terms_reg' type="checkbox" data-js_submit="yes" /></span> Я ознакомился и согласен с <a class="link_txd logreg_accLink" href="/faq/vereinbarung.html">условиями сервиса Subscribe.ru</a></label> <em id="reg_msg_soc" class="reg_error rg_for_input_wide"></em> </div> {#/template js_tmpl_auth_reg_agree} {#template js_tmpl_auth_reg_button} <div class="rg_butons_socials"> {#if $P.login_register_tab == 1} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="auth_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="auth_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} {#if $P.login_register_tab == 2} <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_email" href="#"><span><i></i>Email</span></a> <a class="rg_btn_soc rg_bs_01 js_tap_panel_selector" action="reg_openid" href="#"><span><i></i>OpenID</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_vkontakte" href="#"><span><i></i>Вконтакте</span></a> <a class="rg_btn_soc rg_bs_02 js_tap_panel_selector" action="reg_mailru" href="#"><span><i></i>Mail.Ru</span></a> {#/if} </div> {#/template js_tmpl_auth_reg_button} {#template js_tmpl_auth_reg_descr} {#if $P.login_register_tab == 1} Для оформления подписки на выбранную рассылку, работы с интересующей вас группой или доступа в нужный вам раздел, просим авторизоваться на Subscribe.ru {#/if} {#if $P.login_register_tab == 2} Для регистрации укажите ваш e-mail адрес. Адрес должен быть действующим, на него сразу после регистрации будет отправлено письмо с инструкциями и кодом подтверждения. {#/if} {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_soc_auth_reg_descr} Или зарегистрируйтесь через социальную сеть. {#/template js_tmpl_soc_auth_reg_descr} {#template js_tmpl_auth_reg_soc} <div class="rg_soc"> {#if $P.login_register_tab == 1} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/login/vk/&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} {#if $P.login_register_tab == 2} <a onclick="return _checkSocConfirm(event)" href="https://oauth.vk.com/authorize?client_id=3954260&scope=wall,offline,photos,groups,video,audio,email&redirect_uri={location.protocol+'//'+location.host}/member/join/vk&response_type=code&v=5.15" class="login_register_vk_button"> <span class="login_register_vk_icon"></span> </a> {#/if} </div> {#/template js_tmpl_auth_reg_soc}

{#template MAIN} <div id="loginForm" style="display:none;" class="subscriberu_popup"> <div class="popup_register"> {#include js_tmpl_auth_reg_tab} <dl class="rg_block_options"> <dt id="js_tap_panel_auth"> <p class="rg_description">{#include js_tmpl_auth_reg_descr}</p> <div class="clr"> </div> {#include js_tmpl_auth_reg_action} <div class="clr"> </div> </dt> </dl> </div>  </div> {#/template MAIN} {#template js_tmpl_auth_reg_tab} <ul class="rg_nav"> <li id="js_tab_reg" class="rg_active_nav rg_first_nav"><a href="" onclick="return false;" >Регистрация</a></li> </ul> <span onclick="hidebo();" class="rg_closed"> </span> {#/template js_tmpl_auth_reg_tab} {#template js_tmpl_auth_reg_descr} <strong>Пожалуйста, подтвердите ваш адрес.</strong><br><br>Вам отправлено письмо для подтверждения вашего адреса {$P.register_confirm_mail}.<br>Для подтверждения адреса перейдите по ссылке из этого письма. {#/template js_tmpl_auth_reg_descr} {#template js_tmpl_auth_reg_action} <div class="rg_forms confirm_code_from_letter"> <div class="rg_for_input"> <span class="rg_inp_descr" style="width:15em;">Или введите код из письма:</span> <input type="text" value="" id="confirm_code" name="" data-js_submit="yes" data-js_action="js_confirmFormBut" class="js_keydown_selector rg_input_text_conf" > </div> <div class="rg_for_input"><label>Не пришло письмо? <b>Пожалуйста, проверьте папку Спам</b><br /> (папку для нежелательной почты).</label><br /> <a href="" onclick="ajax_recall_code();return false" >Вышлите мне письмо еще раз!</a></div> <div class="rg_for_input"> <em class="reg_error" id="confirm_msg"></em> <a href="#" class="button button-red" id="js_confirmFormBut">Готово</a> <div class="loading loading-cover" style="display: none;"><div class="loader"></div></div> <br> </div> </div> {#/template js_tmpl_auth_reg_action}

Tutos-web: обучение веб-технологиям. Шаг за шагом

Рассылка закрыта

Статистика

Tutos-web: Выпуск #13 : Урок 12. Изображения в HTML

*Добро *пожаловать *в *рассылку*

* *Tutos-web ! * *

13

Добро пожаловать в рассылку*

* Tutos-web ! *