Домой / Html учебник / 9 Урок. Как вставить картинки html?

9 Урок. Как вставить картинки html?

В этом уроке мы с Вами поговорим о том, как вставить картинку в документ 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"> 
Этот текст написан специально, чтобы Вы могли видеть, где он располагается, по отношению к картинке. Этот текст написан специально, чтобы Вы могли видеть, где он располагается, по отношению к картинке.

Что у нас получилось:

Картинка в html
Картинка в html

Как видите, текст располагается внизу, по отношению к картинке. Но мы можем сделать, чтобы текст был слева, справа, вверху, внизу и посередине картинки. Для этого существуют атрибут align=" " . Значения этого атрибута:

  • align="left" - картинка будет прижата к левому краю, а текст будет располагаться справа от нее;
  • align="right" - картинка будет прижата к правому краю, текст располагается слева от нее;
  • align="middle" - текст располагается посередине картинки;
  • align="top" текст располагается сверху картинки;
  • align="bottom" - текст будет располагаться внизу картинки (по умолчанию).

Возьмем, к примеру, атрибут align="right" , и пропишем его для нашей картинки:

<img src="kartinka.jpg" align="right"> 
В этом случае, данная картинка будет прижата к правому краю, а текст будет обтекать ее слева. В этом случае, данная картинка будет прижата к правому краю, а текст будет обтекать ее слева.

Что получается:

Позиционирование картинки в html
Позиционирование картинки в html

Задаем расстояние от картинки до текста.

Кроме этого, мы можем задать любое расстояние от картинки до текста, как по горизонтали, так и по вертикали.

Для этого существуют следующие атрибуты: 

  • 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.

Что получим:

Расстояние от картинки до текста в html
Расстояние от картинки до текста в html

 


Меняем ширину и высоту картинки.

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

Атрибуты:

  • width=" " - задает ширину картинки;
  • height=" " - задает высоту картинки.

Но эти атрибуты предназначены не только для картинки, так же для таблиц, линий, и другого, но об этом позже. Задается в пикселах. Посмотрим пример.

Html код:

<img src="kartinka.jpg" align="left" width="50" height="50" >
Ширина картинки 50 пикселей и высота - 50, несмотря на то, что настоящие ее размеры не такие.

Что получается:

Ставим размер для картинки в html
Ставим размер для картинки в html

Делаем картинку ссылкой

Картинку также можно сделать ссылкой, как и любое слово. Для этого вспомним уже нам знакомый тэг вместе с атрибутом:

<A HREF="путь к ссылке"> (имеет закрывающий тег)

Например мы хотим, чтобы наша картинка "kartinka.jpg" ссылалась на html документ: "mozilla.html"

В html коде это будет выглядеть так:

<a href="mozilla.html"> <img src="kartinka.jpg"> </a>

Таким же образом мы можем сделать ссылку на любой документ и на любой сайт.


Что еще можно сделать с картинкой?

Еще для картинки существуют такие атрибуты:

  • alt=" " - задает название картинке, которое будет отображаться, если браузер не может отобразить эту картинку;
  • title=" " - описание картинки. Отображается, когда на нее наводят мышкой;
  • border=" " - вокруг картинки появляется рамка. В кавычках задается значение в пикселах.

Заключение

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

10 Урок. Линии в html

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *