23.02.2012, 21:07

Работа с изображениями в html


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

И так, сначала я расскажу какие команды за что отвечают:

  • Команда src="" обязательная ! Она указывает на источник изображения
  • Команда alt="" определяет текст , который считывает поисковый робот
  • Команда width="" отвечает за ширину изображения , а height=""за высоту

Рассмотрим пример:
Code
<img src="http://portal-naruto.ru/_ph/2/2/586852212.jpg" alt="Картинка" width="100" height="80" />

Вот как это выглядит в тексте:



Ну как вы уже знаете если поменять ширину и высоту, то изображение будет больше. Например поставим width="300" height="80".

И вот что из этого вышло:



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

Теперь мы научимся делать отступы между изображением и текстом.

Тут появляются 4 новых команды:

  • hspace=""- делает расстояние между картинкой и текстом по горизонтали
  • vspace=""- делает расстояние между картинкой и текстом по вертикали
  • <p> - определяет текст
  • align=""- определяет с какой стороны делать отступ

Рассмотрим пример:
Code
<p>Что то написано наверху</p>
<img src="http://portal-naruto.ru/_ph/1/2/709950514.jpg" align="left" width="195" height="157" hspace="50" vspace="20" />
<p>Что то написано справа</p>
<p> ля</p>
<p>ля</p>
<p>ля</p>
<p>ля</p>
<p>ля</p>
<p>что то написано внизу</p>


Вот как это смотрится:



Ну если сменить числа около команд, то изменится и расстояние между картинкой и текстом.

Теперь мы научимся делать картинку фоном страницы.

Тут появляется новая команда:

  • background-image- делает картинку фоном , если же написать команду
  • backgroundбез image, то надо будет задавать цвет фона , но сейчас не об этом.

Теперь рассмотрим пример:

Code
<body style="background-image:url(http://portal-naruto.ru/_ph/14/2/822882776.jpg)">
<p>Вот он фон !!!!!!!!!!!!</p>

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

К сожалению скриншота нет.

Теперь мы научимся "вшивать" ссылку в изображение.

Тут появляются команды:

  • a href=""- Вставляет ссылку
  • border="0"- отменяет границу графической ссылки

Посмотрим пример:
Code
<a href="http://infoscript.ru/"><img src="http://portal-naruto.ru/_ph/14/2/300439495.jpg" alt="" border="0" /></a>

И теперь просто жмём на картинку и переходим на указанный сайт.

Подводим итоги. Мы научились вставлять изображения с помощью html , делать это изображение фоном страницы , вставлять в изображение ссылку и делать расстояние между текстом и изображением по горизонтали и вертикали .

Спасибо за внимание !!!!

Источник/Автор: http://portal-naruto.ru

Категория: HTML, CSS, JS, JQ | Добавил: Silver (23.02.2012) Просмотров: 2417 | Рейтинг: 4.2/6
Всего комментариев: 3
+2  
1 antisept -Infoscript Team-  (24.02.2012 11:59) [Материал]
Аватар пользователя
Очень хорошо и доступно smile

+2  
2 BRIGADIR   (24.02.2012 12:36) [Материал]
Аватар пользователя
Согласен.

0  
3 Silver   (24.02.2012 13:36) [Материал]
Аватар пользователя
Цитирую antisept: Очень хорошо и доступно
Цитирую BRIGADIR: Согласен.
Спасибо стараемся biggrin

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]