StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
26.06.2015
11:49
24023
15
Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5
Всем привет!
Продолжаем усердно изучать основы HTML.
В этом уроке я расскажу, как вставить картинку в HTML-документ, как сделать картинку фоном, размер картинки, обтекание картинки текстом, как выровнять картинку. Все перечисленные возможности буду закреплять примерами и результатами.
Итак, изображения на веб-страницах могут быть как фоновые, так и обычные. Какая разница между фоновым и обычным изображением?
Фоновое изображение размещается в качестве фона, наверх которого можно вставить другие картинки, текстовку, таблицу и т.д.
Обычное изображение будет отталкивать от себя другие элементы страницы (другие картинки, текстовку, таблицу и т.д.). На примере вы потом все увидите и поймете.
Для веб-страниц рекомендуется использовать форматы картинок JPEG (JPG), GIF и PNG.
○ Как сделать картинку фоном в HTML
Чтобы сделать картинку фоном, для тега <body> нужно прописать атрибут «background»:
<body background="название_картинки.jpg">
Теперь смотрим полный пример. Вставьте файл картинки «fon.jpg» рядышком с HTML файлом.
и в HTML файл вставьте вот этот код:
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body background="fon.jpg"> Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>
Результат будет таким:
Внимание: название картинки должно быть написано на латинице, иначе картинка не отобразится.
Неправильное название:
<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>
Результат будет таким:
Внимание: название картинки должно быть написано на латинице, иначе картинка не отобразится.
Неправильное название:
<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
К тегу <img> нужно добавить атрибут «align».
Значение атрибута «align»:
left – выравнивание по левому краю, текст будет обтекать справа (align="left").
right – выравнивание по правому краю, текст обтекает слева (align="right").
Пример:
<img src="kartinka.jpg" align="right">
Результат:
○ Как сделать отступы от картинки в HTML
Чтобы сделать отступы от картинки, к тегу <img> нужно добавить атрибут «hspace» и «vspace». Параметры задаются цифрами и в пикселях
HSPACE - отступы от картинки по горизонтали (в пикселях) (hspace="15").
VSPACE - отступы от картинки по вертикали (в пикселях) (vspace="15").
Пример:
<img src="kartinka.png" align="right" hspace="25" vspace="25">
Результат:
○ Как установить размер картинки в 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
Чтобы задать рамку для картинки, к тегу <img> нужно добавить атрибут «border». Параметры задаются цифрами и в пикселях.
<img src="kartinka.jpg" border="4">
Результат:
Если задать к атрибуту «border» параметр «0», рамка отображаться не будет.
○ Дополнительные атрибуты для картинок
Title - это заголовок картинки. Заголовок отображается в том случае, если вы наведете на картинку курсор мышки.
<img src="kartinka.jpg" title="Рад видеть вас на stepkinblog.ru!!! ">
Результат:
Если у пользователя отключен режим загрузки изображений, то вместо картинки ему загрузится иконка с символикой, что картинки нет (на разных браузерах иконка разная). Можно в таком случае написать подсказку для пользователя, подписав картинку. Для этого используется параметр «alt».
Текст, который прописан в «alt», будет отображаться вместе с иконкой.
Смотрите пример:
<img src="kartinka.jpg" alt="девушка с гитарой на stepkinblog.ru!!!">
Результат:
Вот и все! Теперь попробуем все то, что я написал в уроке использовать на веб странице.
Вот, что я сделал для вас с использованием уже известных для вас атрибутов:
<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>→ банальная – хочу автомобиль;</p> <p>→ амбициозная – хочу объехать весь мир, как Филеас Фогг за 80 дней!</p> <p>→ человеческая – мечтаю о свободном времени, которого мне так не хватает для творческих порывов (рисование, создание музыки);</p> <p>→ алчная – хочу зарабатывать столько, чтобы ни в чем себе не отказывать;</p> <p>→ творческая – хочу сняться в кино </p> </body> </html>
Случайные записи:
- Итог работы за 2016 год!
- Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24
- Приложение для смартфонов (андроид) – основы HTML
- Работа с файлами-2 (удаление, копирование, переименование и перемещение файлов). Основы PHP с нуля. Урок №20
- Учимся создавать пагинацию, хлебные крошки и метки (теги). Основы bootstrap 3 для начинающих. Урок №12
Степан, вопрос:
Вставить картинку, которая находится в той же папке, что и index.html, получается.
А можно вставить картинку, если она находится в любом месте (в любой папке на компьютере) или должна быть рядом с файлом index.html (в той же папке, что и index.html)?
Вот отсюда я могу её вставить в HTML-код?
F://LU/фото_природа/ DSC00313.jpg
а находится index.html здесь :
F://LU/WEB_программирование/HTML/Пример 1/index.html
Ответить
24 февраля, 2017 at 08:45
Борис, мой совет.
В этой же папке где находится файл "index.html" создайте папку "images". Туда копируете картинки.
В коде файла "index.html" пишите:
Это будет правильно.
Так как вы хотите сделать, это не правильно.
При переносе веб-страницы на хостинг, картинки отображаться не будут.
И еще, избегайте русских букв в названий файлов, папок и пробелов, все должно быть на латинице (Например: вместо "Пример 1" нужно вот так "primer1").
Ответить
24 февраля, 2017 at 10:39
Спасибо. Понял. Я так и собирался делать. Просто любопытство замучило: можно ли?
24 февраля, 2017 at 11:02
Можно, но не нужно!
А как у пользователя включить режим загрузки изображений?
У меня какие-то картинки отображаются в результате, а какие-то нет, иконки отображаются. Не могу понять почему
Ответить
24 февраля, 2017 at 08:48
Неверно указанный путь до картинки от файла. Названия картинок и папок русскими буквами.
Ответить
24 февраля, 2017 at 10:40
Спасибо, проверю ещё раз
25 мая, 2017 at 03:44
Недавно учусь. Здесь случайно, себя проверяю. Мне нравиться сайт. Сегодня пробовал установить картинки - JPEG не идут. Прогнал через "фабрику форматов", в PNG открываются.
Ответить
Степан, теперь о замечаниях, пожелания к сайту.
И замечания и пожелания относятся к навигации.
Перечень уроков по HTML открываются сразу после вступления.
А хотелось бы его видеть сразу после нажатия клавиши "HTML"
и чтобы он был весь курс обучения "под руками".
Например, при нажатии на "Основы HTML (25)" в "Разные темы" я рассчитывал увидеть перечень уроков по HTML...
То, что после каждого урока можно перейти на следующий или предыдущий очень хорошо, мне нравится. А вот открыть любой другой урок одним кликом не смогу. Здесь надо, чтобы перечень был "под руками".
Это же обучение: возникает необходимость посмотреть, что и как объяснялось на предыдущих уроках.
А в CSS я вообще еле-как нашел Урок 1. Даже тебе вопрос по этому поводу задавал.
Ответить
24 февраля, 2017 at 11:17
Вот курс по обучению HTML.
http://stepkinblog.ru/html/besplatnyj-kurs-po-osnovam-html.html/
Это была самая первая статья. По ней Вам нужно было перейти. Она так и называется "Бесплатный курс по основам HTML".
Эта статья в категории "HTML" самая первая.
По CSS я еще не закончил курс. Когда закончу, то тоже напишу такую страницу, где будет перечень всех уроков.
Ответить
25 февраля, 2017 at 09:53
Степа, я понял как выйти на перечень уроков в HTML, более того, я их проштудировал.
Ты просил написать замечания предложения, я и написал, что мне не удобно так изучать, вот и все.
Пока буду разбираться с непонятками в HTML, глядишь ты и окончишь курс CSS.
С уважением - Борис
Ни в 1-м случае,ни во 2-м фон и картинки,к сожалению отсутствуют..
Ответить
5 февраля, 2018 at 22:59
Посмотрите на мой результат, все отображается.
Вы что-то не так делаете.
дайте как Ваш код
Ответить
Степан. Я хочу сделать кнопку-картинку и чтобы при наведении на неё отображался текст. . И хочу чтобы текст начинался с новой строки. Тег в не работает. Подскажите пожалуйста. Всю голову сломал уже
Ответить
Спасибо за полезный комментарий
Ответить