Вставка картинки в HTML MEIN ARBEIT

Вставка картинки в HTML

Дата: 25/10/2014

Приветствую вас, уважаемые посетители MEIN ARBEIT! В данной статье я вам расскажу, как правильно вставлять картинки в web-страницу. Если вы думаете, что это сделать довольно просто, вы частично ошибаетесь. Но сначала я вам расскажу о простой конструкцией вставки картинки в HTML, а затем перейдём к более детальному рассмотрению данной темы.

Простой пример вставки картинки в HTML

<document HTML>
<html>
<head>
<title> Вставка картинки в HTML </title>
</head>
<body>
 <img src="сюда вставляем путь, где размещена наша картинка, в нашем случае мы можем прописать http://mein-arbeit.narod.ru/pic/gold.gif" alt="здесь мы указываем короткое описание картинки, в нашем случае мы можем написать - золото"> 
</body>
</html>

Видите, всё достаточно просто: пишем тег <IMG> и указываем путь, где лежит наш файл с картинкой. Но теперь возникает вопрос, как картинка будет выглядеть на сайте. Действительно, это очень важный вопрос.

Высота и ширина картинки в HTML

Теперь давайте разложим всё по полочкам. Для тега IMG есть дополнительные атрибуты, которые могут указать высоту и ширину картинки - это height - высота, width - ширина. Записываются они так:
<img src="путь к файлу" height="100" width="100" alt="описание картинки">
Высота и ширина всегда указываются в пикселях, учтите это! Но что делать, если наша картинка больше и выходит из этих параметров? Тут вам делать ничего не надо, потому что картинка сожмётся сама. А если она будет меньше указанных размеров, то она растянется. Учтите это, потому что это отразится на качестве картинки! С размерами и как вставлять картинки, мы немного разобрались, теперь давайте перейдём к вопросу, как расположить картинку на страничке.

Размещение картинки на web-страничке

Надеюсь, вы заметили, что я тег <IMG> поместил между тегом и ? Это я сделал специально, чтобы можно было, подставляя атрибуты с параметрами в этот тег, помещать нашу картинку, куда угодно, но это лишь полумера, потому что наша картинка будет находиться всегда вне текста. Чтобы поместить картинку слева от текста или справа, надо будет воспользоваться атрибутом align.

Пример размещения картинке на страничке

Привет всем, здесь размещена картинка,
<img src="путь к файлу" height="100" width="100" align="bottom" alt="описание картинки">
где она сейчас, ты увидишь сам, подставляя в атрибут align разные параметры, bottom, left, middle или right! 
Не забудьте вставить основные теги, а этот пример разместить между тегами body!

Подставляя в атрибут align эти параметры, вы убедитесь, что картинка гуляет по тексту: то находясь сверху, то находясь слева или справа, а то и посередине. Для более точного размещения картинки вам будет нужно заняться разметкой web-страничкой, воспользовавшись таблицами, или прибегнуть к изучению CSS!

Эта короткая статья очень поможет вам понять, как вставлять картинки в HTML. Но хочу дать вам в заключении маленький совет. Если не хотите замарачиваться с размерами своих картинок, изначально создавайте ваши картинки, рисунки с нужными размерами пикселей. Современные графические редакторы позволяют это делать без труда. Фото можно тоже отредактировать или же изначально сделать снимок, задав пиксельные параметры. В статье Инструменты - программы для создания профессиональных web-страниц, и сайта я рассказал о таких редакторах. И ещё забыл упомянуть! Старайтесь сохранять свои картинки в форматах GIF, JPG, PNG. Картинки, сохранённые в других графических форматах, могут не поддерживаться и не отображаться в браузерах других пользователей! В следующей статье я вам расскажу более подробно о таблицах.

С уважением, Администратор!

предыдущая следующая
Список статей по теме...