Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

26.06.2015


11:49


9640


13


Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Всем привет!
Продолжаем усердно изучать основы HTML.
В этом уроке я расскажу, как вставить картинку в HTML-документ, как сделать картинку фоном, размер картинки, обтекание картинки текстом, как выровнять картинку. Все перечисленные возможности буду закреплять примерами и результатами.
Итак, изображения на веб-страницах могут быть как фоновые, так и обычные. Какая разница между фоновым и обычным изображением?

Фоновое изображение размещается в качестве фона, наверх которого можно вставить другие картинки, текстовку, таблицу и т.д.

Обычное изображение будет отталкивать от себя другие элементы страницы (другие картинки, текстовку, таблицу и т.д.). На примере вы потом все увидите и поймете.
Для веб-страниц рекомендуется использовать форматы картинок JPEG (JPG), GIF и PNG.

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

Чтобы сделать картинку фоном, для тега <body> нужно прописать атрибут «background»:

<body background="название_картинки.jpg">

Теперь смотрим полный пример. Вставьте файл картинки «fon.jpg» рядышком с HTML файлом.

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

и в HTML файл вставьте вот этот код:

<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body background="fon.jpg">
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

Результат будет таким:

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

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

Неправильное название:

<body background="фон.jpg">

Правильное название:

<body background="fon.jpg">

Как вставить картинку в HTML

Чтобы вставить картинку в HTML-документ, используют тег <img> с параметром  «src», которое определяет путь или адрес к картинке.

<img src="название_картики.jpg">

Теперь смотрим полный пример. Вставьте файл картинки «kartinka.jpg» рядышком с HTML файлом и в HTML файле пропишите вот этот код:

<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body>
<img src="kartinka.jpg">
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

Результат будет таким:

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

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

Неправильное название:

<img src="карта.jpg">

Правильное название:

<img src="karta.jpg">

Я думаю, вы до этого момента все поняли. Теперь попробуем скомбинировать два примера вместе. Сделаем на веб-странице фон, вставим изображение и текст.

<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body background="fon.jpg">
<img src="kartinka.jpg">
Здравствуйте, это моя первая страница на <font color="#cc0000">StepkinBlog.ru</a>.
</body>
</html>

[Посмотреть результат]

Как вставить картинку, если она находится в папке «img» или «images»?

Если картинка находится в папке «img» или «images», тогда нужно указать путь от HTML файла к папке «img» или «images», а потом уже только прописать название картинки с расширением. Выглядеть это будет вот так:

<body background="img/название_фона.jpg">
<img src="img/название_картики.jpg">

Если картинка находится на другом сайте или блоге, тогда нужно указать адрес сайта и, если нужно, папку, где находится картинка. Ну, естественно, нужно указать и название изображения с его расширением.

<img src="http://www.stepkinblog.ru/images/foto.jpg">

http://www.stepkinblog.ru – это адрес сайта

 Задание: Попробуйте создать папку с любым названием (только на латинице), закачать в папку картинку и в HTML файле указать правильный путь к изображению так, чтобы все отобразилось. Пробуйте!

Как сделать картинки в HTML по центру.
Чтобы картинка разместилась по центру HTML документа, заключите тег картинки в известный вам тег <center></center>

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

Результат:

Как вставить картинку в HTML. Осн

Как сделать обтекание или выравнивание картинки в HTML

К тегу <img> нужно добавить атрибут «align».

Значение атрибута «align»:

left – выравнивание по левому краю, текст будет обтекать справа (align="left").
right – выравнивание по правому краю, текст обтекает слева (align="right").

Пример:

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

Результат:

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Как сделать отступы от картинки в HTML

Чтобы сделать отступы от картинки, к тегу <img> нужно добавить атрибут «hspace» и «vspace». Параметры задаются цифрами и в пикселях

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

Пример:

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

Результат:

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Как установить размер картинки в HTML

Чтобы задать размер картинке, к тегу <img> нужно добавить атрибут «height» и «width». Параметры задаются цифрами и в пикселях или в процентах.

HEIGHT - высота изображения (height="100").
WIDTH - ширина изображения  (width="50").

<img src="kartinka.jpg" align="right" hspace="25" vspace="25" width="80" height="100">

Результат:

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Как установить рамку для картинки в HTML

Чтобы задать рамку для картинки, к тегу <img> нужно добавить атрибут «border». Параметры задаются цифрами и в пикселях.

<img src="kartinka.jpg" border="4">

Результат:

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Если задать к атрибуту «border» параметр «0», рамка отображаться не будет.

Дополнительные атрибуты для картинок

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

<img src="kartinka.jpg" title="Рад видеть вас на stepkinblog.ru!!! ">

Результат:

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Если у пользователя отключен режим загрузки изображений, то вместо картинки ему загрузится иконка с символикой, что картинки нет (на разных браузерах иконка разная). Можно в таком случае написать подсказку для пользователя, подписав картинку. Для этого используется параметр «alt».
Текст, который прописан в «alt», будет отображаться вместе с иконкой.
Смотрите пример:

<img src="kartinka.jpg" alt="девушка с гитарой на stepkinblog.ru!!!">

Результат:

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Вот и все! Теперь попробуем все то, что я написал в уроке использовать на веб странице.

Вот, что я сделал для вас с использованием уже известных для вас атрибутов:

<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body background="fon.jpg">
<h2>Моя мечта!</h2>
<img src="http://stepkinblog.ru/wp-content/uploads/2015/01/stepkinblog-182x300.jpg" title="Рад видеть вас на stepkinblog.ru!!!" align="right" hspace="20" vspace="20">
<p>У меня, как и у другого нормального человека, есть мечта, и не одна:</p>
<p>&#8594; банальная – хочу автомобиль;</p>
<p>&#8594; амбициозная – хочу объехать весь мир, как Филеас Фогг за 80 дней!</p>
<p>&#8594; человеческая – мечтаю о свободном времени, которого мне так не хватает для творческих порывов (рисование, создание музыки);</p>
<p>&#8594; алчная – хочу зарабатывать столько, чтобы ни в чем себе не отказывать;</p>
<p>&#8594; творческая – хочу сняться в кино </p>
</body>
</html>

[Посмотреть результат]



Случайные записи:

  1. Блоки в CSS. Основы CSS для начинающих. Урок №13
  2. Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14
  3. Синтаксис языка PHP. Основы PHP с нуля. Урок №2
  4. Форматирование текста в HTML. Основы HTML для начинающих. Урок №3
  5. Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

13 ответа(ов) на статью: “Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5”

  1. Борис says:

    Степан, вопрос:
    Вставить картинку, которая находится в той же папке, что и index.html, получается.
    А можно вставить картинку, если она находится в любом месте (в любой папке на компьютере) или должна быть рядом с файлом index.html (в той же папке, что и index.html)?

    Вот отсюда я могу её вставить в HTML-код?
    F://LU/фото_природа/ DSC00313.jpg

    а находится index.html здесь :
    F://LU/WEB_программирование/HTML/Пример 1/index.html

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Борис, мой совет.
    В этой же папке где находится файл "index.html" создайте папку "images". Туда копируете картинки.
    В коде файла "index.html" пишите:

    <img src="images/название_картинки.jpg">

    Это будет правильно.
    Так как вы хотите сделать, это не правильно.
    При переносе веб-страницы на хостинг, картинки отображаться не будут.
    И еще, избегайте русских букв в названий файлов, папок и пробелов, все должно быть на латинице (Например: вместо "Пример 1" нужно вот так "primer1").

    Ответить

    Борис ответил(а) на комментарий:

    Спасибо. Понял. Я так и собирался делать. Просто любопытство замучило: можно ли?

    Степка
    Степка ответил(а) на комментарий:

    Можно, но не нужно!

  2. Борис says:

    А как у пользователя включить режим загрузки изображений?

    У меня какие-то картинки отображаются в результате, а какие-то нет, иконки отображаются. Не могу понять почему

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Неверно указанный путь до картинки от файла. Названия картинок и папок русскими буквами.

    Ответить

    Борис ответил(а) на комментарий:

    Спасибо, проверю ещё раз

    Сергей ответил(а) на комментарий:

    Недавно учусь. Здесь случайно, себя проверяю. Мне нравиться сайт. Сегодня пробовал установить картинки - JPEG не идут. Прогнал через "фабрику форматов", в PNG открываются.

    Ответить

  3. Борис says:

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

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

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

    Например, при нажатии на "Основы HTML (25)" в "Разные темы" я рассчитывал увидеть перечень уроков по HTML...

    То, что после каждого урока можно перейти на следующий или предыдущий очень хорошо, мне нравится. А вот открыть любой другой урок одним кликом не смогу. Здесь надо, чтобы перечень был "под руками".
    Это же обучение: возникает необходимость посмотреть, что и как объяснялось на предыдущих уроках.

    А в CSS я вообще еле-как нашел Урок 1. Даже тебе вопрос по этому поводу задавал.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Вот курс по обучению HTML.
    http://stepkinblog.ru/html/besplatnyj-kurs-po-osnovam-html.html/
    Это была самая первая статья. По ней Вам нужно было перейти. Она так и называется "Бесплатный курс по основам HTML".
    Эта статья в категории "HTML" самая первая.
    По CSS я еще не закончил курс. Когда закончу, то тоже напишу такую страницу, где будет перечень всех уроков.

    Ответить

    Борис ответил(а) на комментарий:

    Степа, я понял как выйти на перечень уроков в HTML, более того, я их проштудировал.

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

    Пока буду разбираться с непонятками в HTML, глядишь ты и окончишь курс CSS.

    С уважением - Борис

  4. Анатолий says:

    Ни в 1-м случае,ни во 2-м фон и картинки,к сожалению отсутствуют..

    Ответить

    Степка
    Степка ответил(а) на комментарий:

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

    Ответить

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

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

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

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

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245