BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про HTML » Как вставить картинку в HTML. Урок – 7 (для начинающих).

Как вставить картинку в HTML. Урок – 7 (для начинающих).

2013-07-01 / Вр:18:52 / просмотров: 4623

Всем привет!!! По этой статье вы научитесь вставлять картинку в HTML документ. Это вовсе не сложно. Но вначале я бы хотел вам дать несколько рекомендаций по поводу картинок на веб-странице.

Совет: когда будете размещать картинки на веб-страницу, не увлекайтесь анимированными картинками, так как это отвлекает внимание читателя от самого важного - текста. Лучше используйте обычные картинке без анимации.
Старайтесь использовать на веб-страничках уникальные картинки. Как сделать уникальную картинку вы можете почитать тут, а взять красивые картинки вы можете здесь.

Приступим.

Как вставить картинку в html?
Так, как я говорил - здесь сложного ничего нет, добавьте этот html код.

<img src="kartinka.jpg">

kartinka - это название картинки
jpg - это расширение картинки. Расширение может быть gif, png, bmp.

Если картинка размещена в папке images, тогда путь к картинке будет таким:

<img src=" images/kartinka.jpg">

images - название папки, где лежит картинка "kartinka.jpg".

Если картинка лежит на другом сайте, тогда код будет таким:

<img src="http://www.bloggood.ru/images/kartinka.jpg">

http://www.bloggood.ru - это адрес сайта.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить картинку в html</title>
</head>
<body>
<img src="kartinka.jpg">
</body>
</html>

Как сделать в html картинку ссылкой?

Для этого просто заключите картинку между ссылочным элементом:

<a href="адрес ссылки"><img src="kartinka.jpg"></a>

Атрибуты для картинок

ALIGN - этот атрибут предназначен для обтекания или выравнивания картинки по горизонтали.
leftвыравнивание по левому краю, текст будет обтекать справа.
rightвыравнивание по правому краю, текст обтекает слева.

<img src="kartinka.png" align="right">

Результат:

Как вставить картинку в HTML. Урок - 7 (для начинающих).

выравнивание по правому краю

HSPACE - отступы от картинки по горизонтали (в пикселях).
VSPACE - отступы от картинки по вертикали (в пикселях).

<img src="kartinka.png" align="right" hspace="15" vspace="15">

Результат:

отступы от картинки в html

отступы от картинки

HEIGHT - высота изображения (пикселях).
WIDTH - ширина изображения  (пикселях).

<img src="kartinka.png" align="right" hspace="15" vspace="15" width="50" height="100">

Результат:

 высота и ширена изображения

высота и ширена изображения

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

<img src="kartinka.png" align="right" hspace="15" vspace="15" width="100" height="180"  title="Всем привет - bloggood_ru!!! ">

Результат:

TITLE - это заголовок картинки

заголовок картинки

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

<a href="адрес ссылки"><img src="kartinka.png" border="0"></a>

Результат:

BORDER - это атрибут отвечает за размер рамки вокруг картинки

А если поменять значение border на 5:

<a href="адрес ссылки"><img src="kartinka.png" border="5"></a>

Результат:

BORDER - это атрибут отвечает за размер рамки вокруг картинки

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

Любую картинку можно сделать фоном. Для этого в теге body пропишите атрибут background.

<body background="ваш_фон.jpg">

На картиночном фоне может отображаться текст.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как вставить ссылку-якорь в html</title>
</head>
<body background="kartinka.jpg">

<p>текст</p>
<p>текст</p>

</body>
</html>

Результат:

Как сделать картинку фоном

Картинка как фон

На этой ноте можно было бы и закончить тему "Как вставить картинку в HTML", но знаю, что многих интересует вопрос, а как поставить картинку по центру.
Чтобы поставить картинку по центру, вам достаточно применить такой фокус:

<center>
<img src="kartinka.jpg">
</center>

Вот теперь точно все. Переходим к следующему уроку.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Один ответ на комментарий - Как вставить картинку в HTML. Урок – 7 (для начинающих).

  1. Тамара Полякова

    Спасибо Степан за хороший и понятный урок! Вроде бы все так просто, но ведь обо всем узнаю только от тебя! Удачи тебе!

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663