Рисунки (практические сведения о языке html)

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

Картинка не вставляется непосредственно в текст страницы. Просто ставится указание браузеру, где картинка лежит, как ее зовут и как ее на экране разместить Тег, задающий местоположение рисунка, называется  IMG (image, изображение). Понятно, что у него должен быть, по меньшей мере, один параметр –  адрес рисунка. Этот параметр называется SRC (source, источник):

<IMG SRC"krolik.gif"> - на этом месте будет показан файл, krolik.gif, rjnjhsq лежит в текущей директории;

<IMG SRC="http://levin.rinet.ru/krolik.gif"> - загружается рисунок krolik.gif, положенный в интернете на сайте levin.rinet.ru.

Как видите, те же два вида адресации - абсолютная и относительная. Здесь возможны и все описанные выше варианты адресов с выходом из директорий (../) и заходом в поддиректории.

Закрывающий тег не предусмотрен.

Другой важный момент - расположение картинки на странице и обтекание ее текстом. По умолчанию картинка располагается в центре экрана, и текст ее не обтекает (остается сверху и снизу). Но если использовать параметр ALIGN (вы­равнивание), то начнет обтекать как миленький:

<IMG SRC="Picture.jpg" ALIGN="LEFT"> - картинка располагается у левого края экрана, и текст обтекает ее справа.

<IMG SRC="Picture.jpg" ALIGN="RIGHT"> - картинка располагается у правого края, а текст обтекает ее, соответственно, слева.

Чтобы обтекающий текст не лез прямо на рисунок, можно задать для рисунка вертикальные и горизонтальные поля при помощи атрибутов VSPACE (vertical space - вертикальные поля) и HSPACE (horizontal space -горизонтальные поля), указав их размеры в пикселях:

<IMG SRC="Picture.jpg" ALIGN="RIGHT" VSPACE="10" HSPACE="10">

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

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

Графические файлы обычно самая «тяжелая» часть веб-страницы, именно они дольше всего грузятся. Иногда загрузка остальной части странички не идет до тех пор, пока весь рисунок не перекачается. Гуляющий по интернету сидит как дурак и ждет, пока загрузится картинка, которая еще не известно, нужна ли для чего путного! Запросто может плюнуть и уйти. И уж во всяком случае начи­нает злиться - на веб-мастера, который ему такую свинью подложил.

А когда заданы высота (height) и ширина (width) рисунка, браузер изобра­жает на экране пустую рамку соответствующего размера и грузит рисунок па­раллельно с остальными частями документа. Гуляющий по Интернету сидит как умный, читает быстро загрузившийся текст и поглядывает между делом, скоро ли загрузится рисунок. Чувствуете разницу?

Итак:

<IMG SRC="Picture.gif" WIDTH="600" HEIGHT="440"> - ширина рисунка 600 то­чек, высота 440;

<IMG SRC="Picture.gif" WIDTH ="600"> - ширина 600 точек, а высота будет подобрана автоматически так, чтобы сохранились пропорции рисунка.

Кончено, размеры стоит брать не с потолка, а из самого рисунка. В свойст­вах графического файла на странице Сводка есть кнопка Дополнительно, которая докажет вам параметры рисунка, в числе которых будут и геометрические раз­меры. Если в этой сводке ничего нет (не все форматы графики позволяют эту информацию сохранять в самом файле), то вам поможет какая-нибудь програм­ма просмотра графики или Adobe Photoshop. А хороший HTML-редактор вставляет картинку прямо с ее геометрическими размерами.

Вы, конечно, можете менять параметры WIDTH и HEIGHT по своему усмотрению. Большой рисунок сжать, а маленький растянуть. Но большого смысла в этом нет. Почему?

Если рисунок маленький, то, растянув его, вы просто получите более грубое изображение, ухудшенного качества. А если рисунок большой, то поставьте вы ему ширину хоть 10 точек и высоту 5, он все равно целиком будет грузиться в компьютер читателя - всеми своими многочисленными килобайтами. Так что гут никого обмануть не удастся. Большие рисунки надо делать маленькими и легкими в графическом редакторе - до того как вставлять на страничку и вы­ставлять в Сеть.

Впрочем, формат JPG - штука непредсказуемая. Иногда оказывается, что, уменьшив рисунок вдвое, а потом вдвое же и растянув (при помощи атрибутов WDTH и HEIGHT), получаешь меньший файл при лучшем качестве изображения, чем при действии строго по теории. Те, кто не ваяет веб-страницы десятками каждый день, могут позволить себе такую роскошь - немного повозиться и прове­рить, в каком варианте данная фотография выглядит лучше и занимает меньше места: уменьшенная и снова увеличенная или сделанная точно в размер и ужа­тая Фотошопом или программой ImageReady.

А если нам необходимо, чтобы рисунок занимал определенную часть экра­на? Тогда все это нам не поможет. Ширина 600 пикселей для 14" монитора - это практически весь экран, а для 21" - меньше половины. Какой уж тут дизайн!

Тут нам поможет другой способ задания размеров рисунка - в процентах:

 <IMG SRC-"Picture.gif" WIDTH="50%" HEIGHT="100%">

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

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

Сделать это не так уж легко по той простой причине, что размеры картинки мы более или менее зафиксировали, а вот размеры шрифта в браузере пользователя могут меняться непредсказуемым образом, в зависимости от разрешения  экрана и выбранного шрифта. У одного очень крупный шрифт, и тогда! наш фрагмент целиком обтекает картинку, продолжение автоматически оказываться ниже. У другого, наоборот, шрифт мелкий, и тогда не только нужный абзац, но и несколько следующих стоят возле картинки. Как это дело побороть?!

Ну, во-первых, можно поставить картинку и текст в таблицу. Скажем, в левую ячейку таблицы ставится картинка, в правую - сопроводительный текст. А весь последующий текст пойдет за таблицей.

Но кроме «во-первых», есть еще «во-вторых»! У тегов BR (строка) и Р (абзац) есть особый атрибут CLEAR (освободить).

Поставив в конце нужного нам текстового фрагмента: <BR CLEAR=all> или <Р CLEAR= all>, мы тем самым объясняем браузеру, что следующая строка или абзац освобождаются от обязательства обтекать картинку. И должны стоять уже под ней.

Еще один момент: альтернативный текст на рисунке. Многие люди, у кото­рых медленная связь, отключают в браузере вывод картинок. У них виден просто пустой квадратик на месте рисунка. Но вы можете в параметре ALT ввести альтернативный текст, который они будут в этом квадратике созерцать:

< IMG SRC="Cloud.gif" WIDTH="210" HEIGHT="125" ALT="Белое облако, летящее над  землей с востока на запад.">.

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

А вот сам этот альтернативный текст, наоборот, кавычек содержать не дол­жен, иначе браузер решит, что текст окончен. Вместо кавычек пользуйтесь или апострофами ('текст'), или кавычками-елочками («текст»), которые вводятся на цифровой клавиатуре: Alt-0171 - открывающая, Alt-0187 - закрывающая. В HTML- редакторе можно будет сделать для них макрокоманду.

Вернемся к параметрам тега IMG. То, что вы вводите в параметре  ALT, появляется и во всплывающей подсказке Internet Explorer, когда на рисунок наводится мышка.

Зато если вы примените атрибут TITLE (название), то всплывающую под­сказку увидят все, в любых браузерах!

Кстати, TITLE можно использовать не только в картинках, но в других тегах, самых разнообразных. Тогда у вас и текстовый абзац будет сопровождаться всплывающим названием, и таблица или даже отдельная ячейка таблицы, и фрагмент текста, выделенный, скажем, полужирным шрифтом!..

Еще один атрибут рисунка, который может вам пригодиться, - BORDER (рамка):

BORDER="4" - рисуется рамка толщиной 4 точки;

BORDER="0" - рамки не будет. Вы можете спросить: зачем нам вводить нуле­вую рамку, если в большинстве браузеров рамка вокруг рисунка и так не пока­зывается, если в теге не прописан атрибут BORDER. Но только до тех пор, пока вы не сделаете рисунок гиперссылкой! После этого вокруг него появится синяя рамка... Вот и задушите ее, задав толщину равной нулю.

Рисунок можно сделать гиперссылкой так же, как делается гиперссылкой обычный текст. Просто вставьте тег IMG в контейнер А, вот и станет он гиперссылкой:

<А HREF-"index.html''><IMG SRC="knopka_nazad.gif" ALT="назад!" ></А>

Несколько мелких хитростей, связанных с рисунками

·         Для рисунков формата GIF можно в графическом редакторе какой-то из цветов сделать прозрачным. Так вы сможете получать изображения произволь­ной формы. Например, сделали красивый заголовок страницы, положили на прозрачный фон - и ничего, кроме заголовка, в браузере не видно, как будто он и впрямь положен прямо на страницу.

·       Чтобы сделать горизонтальную линейку из рисунка (например, с цвето­выми переливами или с фактурой какого-нибудь материала), нет необходимости заготавливать файл шириной 800 точек или более. Вы можете, сделать его со­веем крошечным (например, высотой 10 точек и шириной 1), а потом просто за­дать для него нужную вам ширину (WIDTH), например, 100 %.

·         Есть и другой способ создания абзацного отступа: создать пустой рисунок размером 1x1 пик­сель и вставлять в начало каждого абзаца, задав ему необходимую ширину:

<IM6 SRC="lxl.gif" ALIGN=LEFT WIDTH="60" HEIGHT='1'>- абзацный отступ ши­риной 60 пикселей: Рисунок такой почти ничего не весит, а значит, при загрузке из Сети не отнимает времени. Загрузится он всего один раз, даже если вы вста­вили его на странице в сотне мест.

·         Если вам хочется поставить рисунок не у края страницы, не по центру, а где-то еще, поставьте его в одну из ячеек таблицы, у которой выключены гра­ницы (то есть сама таблица не видна).

Литература:

А.Левин. Самоучитель полезных программ.Питер. 2008