В этом уроке мы с Вами поговорим о том, как вставить картинку в документ html. На самом деле, тут нет ничего сложного 🙂
Как вставить картинку в html
<IMG> - вставляет изображения в документ. Не имеет закрывающего тэга.
Этот тэг один работать не будет, поэтому у него всегда есть атрибут SRC. Вместе это выглядит так:
<IMG SRC="имя картинки">
В кавычках вы пишите имя картинки с разрешением: Например: <IMG SRC="image.jpg"> . Так пишется в том случае, если изображение лежит в той же папке, что и html документ. Если картинка лежит во вложенной папке, например papka , то путь к этой картинке в html документе будет записан так: <IMG SRC="papka/image.jpg"> . Если же картинка наоборот лежит на уровень выше, то путь к ней пишется так: <IMG SRC="../image.jpg"> .
Скачайте эту картинку (пкм - сохранить картинку как) и сохраните в той же папке, где Ваш файл index.html.
Пишем в html документе:
<img src="kartinka.jpg">
Этот текст написан специально, чтобы Вы могли видеть, где он располагается, по отношению к картинке. Этот текст написан специально, чтобы Вы могли видеть, где он располагается, по отношению к картинке.
Что у нас получилось:
Как видите, текст располагается внизу, по отношению к картинке. Но мы можем сделать, чтобы текст был слева, справа, вверху, внизу и посередине картинки. Для этого существуют атрибут align=" " . Значения этого атрибута:
- align="left" - картинка будет прижата к левому краю, а текст будет располагаться справа от нее;
- align="right" - картинка будет прижата к правому краю, текст располагается слева от нее;
- align="middle" - текст располагается посередине картинки;
- align="top" текст располагается сверху картинки;
- align="bottom" - текст будет располагаться внизу картинки (по умолчанию).
Возьмем, к примеру, атрибут align="right" , и пропишем его для нашей картинки:
<img src="kartinka.jpg" align="right">
В этом случае, данная картинка будет прижата к правому краю, а текст будет обтекать ее слева. В этом случае, данная картинка будет прижата к правому краю, а текст будет обтекать ее слева.
Что получается:
Задаем расстояние от картинки до текста.
Кроме этого, мы можем задать любое расстояние от картинки до текста, как по горизонтали, так и по вертикали.
Для этого существуют следующие атрибуты:
- hspace=" " - определяет расстояние от картинки до текста по вертикали;
- vspace=" " - определяет расстояние от картинки до текста по вертикали.
В кавычках пишется расстояние в пикселах.
Как пример, попробуем задать нашей картинке hspace="25" и vspace="25" .
В html документе пишем:
<img src="kartinka.jpg" align="right" hspace="25" vspace="25"> Картинка будет располагаться справа, так так мы задали ей атрибут align="right", расстояние от картинки до текста по горизонтали и по вертикали будет 25 пикселей, так как мы задали атрибуты hspace и vspace равные 25. Картинка будет располагаться справа, так так мы задали ей атрибут align="right", расстояние от картинки до текста по горизонтали и по вертикали будет 25 пикселей, так как мы задали атрибуты hspace и vspace равные 25.
Что получим:
Меняем ширину и высоту картинки.
Картинке можно задать ширину и высоту, и она станет такой, как нам нужно, несмотря на ее изначальные размеры.
Атрибуты:
- width=" " - задает ширину картинки;
- height=" " - задает высоту картинки.
Но эти атрибуты предназначены не только для картинки, так же для таблиц, линий, и другого, но об этом позже. Задается в пикселах. Посмотрим пример.
Html код:
<img src="kartinka.jpg" align="left" width="50" height="50" >
Ширина картинки 50 пикселей и высота - 50, несмотря на то, что настоящие ее размеры не такие.
Что получается:
Делаем картинку ссылкой
Картинку также можно сделать ссылкой, как и любое слово. Для этого вспомним уже нам знакомый тэг вместе с атрибутом:
<A HREF="путь к ссылке"> (имеет закрывающий тег)
Например мы хотим, чтобы наша картинка "kartinka.jpg" ссылалась на html документ: "mozilla.html"
В html коде это будет выглядеть так:
<a href="mozilla.html"> <img src="kartinka.jpg"> </a>
Таким же образом мы можем сделать ссылку на любой документ и на любой сайт.
Что еще можно сделать с картинкой?
Еще для картинки существуют такие атрибуты:
- alt=" " - задает название картинке, которое будет отображаться, если браузер не может отобразить эту картинку;
- title=" " - описание картинки. Отображается, когда на нее наводят мышкой;
- border=" " - вокруг картинки появляется рамка. В кавычках задается значение в пикселах.
Заключение
Ну вот мы и узнали многое, что касается картинок. Надеюсь, все не так то сложно, как могло бы показаться)).
