Работаем с графикой в разметке HTML

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

Те, кто уже интересовался языком разметки HTML, знает, что каждому изображению на сайте присваивается свой код, который позволяет браузеру безошибочно осуществить его поиск. Вставка картинки, кроме традиционного тега IMG, всегда сопровождается атрибутом SRC, и эта часть кода выглядит примерно так: < img src= “logo.jpg”>. В случае, когда картинка сразу на страницу не выводиться, а ждет обращения к ней в одной из папок, находящейся в памяти компьютера, то в коде обязательно указывается путь, по которому ее можно было бы найти. Как уже упоминалось выше, большое значение имеет объем изображения, который принято измерять в пикселях и регулировать его можно меняя высоту и ширину картинки, то есть, чем большее ее размер, тем больше она потребует для себя памяти. При построении сайта обычно сначала формируется его макет, в этом случае картинки располагается в специально отведенных для них прямоугольниках, предварительно сжимаясь до необходимых размеров. Когда браузеру не удается загрузить ту или иную картинку в месте, где ее планировалось раскрыть, пишется ее код.

Чтобы ваша веб-страница выглядела эстетично и привлекательно необходимо постараться, чтобы текст органично обтекал изображение и не было неоправданных разрывов. С этой целью используются теги right и left, с помощью которых задается, с какой стороны текста будет размещаться графика. В некоторых традиционных случаях, например, при вставке аватара, картинку принято располагать в верхнем левом углу страницы, а для обычного веб-сайта изображение можно разместить в любом месте по своему усмотрению. Чтобы вставленная картинка не сливалась с текстом, можно воспользоваться атрибутами hspase и vspace, которые позволят вам создать вертикальные и горизонтальные отступы.