BloGGood.ru

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

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

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

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

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

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

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

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

Приступим.

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

<img src="kartinka.jpg">

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

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

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

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

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

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

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://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"
"https://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>

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

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

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

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

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

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

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

  2. Александр

    Как перейти на следующий урок, не ищя его каждый раз на сайте среди других тем про HTML?

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

;-) :| :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]

Метки: ,

Мои цели на 2018-2019:

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

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

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

4). Довести количество статей до 800

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

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

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

Количество записей на блоге: 801
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4529