Картинки в HTML. Параметры картинок в HTML.

Сегодня в Интернете сложно встретить сайт, который бы вовсе не содержал картинок. Иногда они могут быть весьма профессионально замаскированы, так что у обычного посетителя даже не возникнет подозрения, что перед ним вставленная на страницу картинка. Но они могут быть выражены и абсолютно явно. Скажем для сайта о фотографии изображения — самый главный элемент. Как бы то ни было, картинки в больших или меньших количествах нужны любому сайту. О том, как их вставить на свою страницу, и как затем настроить по своему вкусу, я сейчас и расскажу. И как обычно, вначале тег:

<IMG> — одиночный тег, размещающий картинку на HTML-странице. Всегда имеет обязательный параметр — src.

src — обязательный параметр тега <img>, указывающий браузеру адрес изображения-источника.

Таким образом, чтобы вставить картинку kartinka.jpg, находящуюся в папке "papka" на поле html-страницы, расположенной в этой же папке, нужно написать:

<img src="kartinka.jpg">

В данном случае мы указали только полное название (включающее расширение) файла-картинки. Еще раз обращаю ваше внимание на то, что это допустимо только в одном случае: когда HTML-страница и картинка находятся в одной папке. Если же это не так, необходимо прописывать полный адрес файла-источника. Например так:

<img src="file:///D:/Сайты/Супермегасайт/Изображения/kartinka.jpg">

Или этак:

<img src="http://www.superpupersite.ru/files/images/kartinka.jpg">,

в зависимости от того, где именно находится сама картинка.

Поменять размеры картинки в HTML можно при помощи уже знакомых вам параметров width и height. Поскольку с ними вы уже встречались я не буду повторно их описывать. Напомню лишь, что функции этих параметров аналогичны для любых тегов.

Установить рамку вокруг картинки в языке HTML можно при помощи параметров border и bordercolor, с которыми вы также уже сталкивались. По сути это те же самые параметры, обладающие точь-в-точь такими же свойствами. В силу этого я считаю не имеющим смысла и их повторное описание.

Однако по поводу рамки вокруг картинки в HTML пару слов сказать все же надо. Дело в том, что если изображение выступает в качестве ссылки , то по умолчанию вокруг него отображается рамка. И вы наверное, уже сами догадались как ее можно убрать. Правильно, нужно всего лишь задать в теге <img> параметр border с нулевым значением.

На этом промежуточном этапе расшифруем пока еще не очень длинный тег:

<img src="kartinka.jpg" width="50%" height="20px" border="1" bordercolor="00ff00">

Тег загружает на HTML-страницу картинку шириной в 50% от ширины родительского элемента и высотой в 20 пикселей. Картинка будет окружено рамкой, толщина которой — 1 пиксел, а цвет — зеленый. И я еще раз делаю акцент на том, что width="50%" означает 50% от ширины родительского элемента (например, ячейки, в которой находится изображение), а вовсе не 50% от первоначальной ширины файла-источника. Таким образом, если ваше изображение находится непосредственно в теле страницы, а width="100%", то по ширине картинка растянется на все окно браузера. Если же не только width="100%", но и height="100%", то картинка и вовсе займет собой всю площадь HTML-страницы.

Добавим к картинке поля по горизонтали и по вертикали.

hspace — параметр тега <img>, предназначенный для добавления пустых полей по бокам картинки. Параметр принимает числовые значения в пикселах.

vspace — параметр тега <img>, предназначенный для добавления пустых полей сверху и снизу картинки. Параметр принимает числовые значения в пикселах.

Таким образом, если картинка соседствует с другим элементом, можно этими параметрами регулировать относительное расположение этих элементов. В частности, если картинка находится в тексте (т.е. имеет место так называемое обтекание картинки), то поля помогут избежать набегание текста на края изображения. Следующий параметр уже немного знаком вам из материала о тегах форматирвания текста. Но у него также есть несколько индивидуальных особенностей, проявляющихся при использовании с тегом картинок.

align — параметр тега <img>, позволяющий выровнять картинку на HTML-странице: либо по отношению к краям страницы, либо по отношению к тексту на странице.

У параметра есть по крайней мере пять значений, но самыми распространенными являются два: left и right.

left — значение параметра align тега <img>, выравнивающее картинку по левому краю HTML-страницы. При этом возникает обтекание справа — последующий текст начинается не снизу картинки, а обтекает ее по правой стороне.

right — значение параметра align тега <img>, выравнивающее картинку по правому краю HTML-страницы. При этом возникает обтекание слева.

Обтекание картинок незаменимо в веб-дизайне. Оно помогает разнообразить HTML-страницу — привнести в нее динамики. Особенно эффектно оно смотрится вначале статьи.

Бывают ситуации, когда посетитель не сразу может понять, что за картинка перед ним. Например, увидев «Черный Квадрат» Малевича, пользователь не может быть уверен, что перед ним именно произведение искусства, а не просто черный квадрат. Тут ему может помочь всплывающая подсказка. Наведя указатель мыши на картинку, посетитель мгновенно получит необходимое пояснение.

А прикрепить к картинке всплывающую подсказку, используя HTML, на самом деле очень просто. Для этого есть специальный параметр title. Только не путайте его с тегом <title>, который предназначен совсем для других целей.

title — параметр тега <img>, предназначенный для присвоения картинке индивидуального наименования, которое впоследствии отображается во всплывающей подсказке.

title принимает параметры в виде текста. Например:

<img src="megapicture.jpg" width="100px" height="20px" title="Супер-пупер-эксклюзив. Больше нет ни у кого">

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

Вот вы и научились добавлять и настраивать картинки на HTML-страницу. Но давайте теперь подумаем о тех немногочисленных, но не менее значимых пользователях которые сидят в Интернете с выключенной графикой.

Предположим, вы разместили на своем сайте фотографию прекрасной девушки, одетой лишь отчасти, естественно. Но посетитель — вот сволочь — взял и выключил изображения в своем браузере. Всё — тема осталась нераскрытой, суть ускользнула от посетителя, он сидит и смотрит в свой монитор без всякого смысла — картина Репина «Приплыли» одним словом.

Но возможен и другой вариант развития событий. Скажем, вы заранее добавили к вашей замечательной картинке так называемый альтернативный текст. Этот тот текст, что видит пользователь вместо картинок, когда те отключены. В этом случае перед глазами вашего посетителя появится надпись: "Эх, ты! Такое пропустил...". И вот тогда посетитель немедленно одумается и тут же включит показ изображений в своем браузере — даже в ущерб экономии собственного трафика. Ну, я немного утрирую конечно. Но в целом ситуация близка к реальной.

alt — параметр тега <img>, добавляющий к картинке альтернативный текст, который заменяет картинку в случае, когда она не отображена.

Теперь, после того, как вы узнали о картинках в HTML практически все, расшифруем длинный тег:

<img src="picture.gif" width="100px" height="20px" border="1" bordercolor="ff0000" hspace="15" vspace="25" align="left" title="Моя машина" alt="Здесь показана Ferrari">

Этот тег загружает на HTML-страницу картинку «picture.gif» в сто пикселов шириной и в двадцать пикселов высотой. Картинка будет окружена рамкой в один пиксел. Цвет рамки — красный. Горизонтальные поля рядом с картинкой составят по 15 пикселов с каждой стороны. Вертикальные поля — по 25 пикселов. Картинка будет выровнена по левому краю HTML-страницы, и возникнет обтекание текстом справа. При наведении курсора на картинку появится всплывающая подсказка: «Это моя машина». А если картинка по какой-либо причине не будет отображена на странице, то на ее месте появится текст: «Здесь показана Ferrari».