Графика в HTML, или как заполнить html-страницу графическими образами.
Какая книга без картинки станет интересна ребёнку? Верно, никакая. Дети всегда любят рассматривать безумное количество ярких рисунков и картинок. А мы – взрослые? Мы – те же дети. И мы также любим смотреть на нечто красивое и яркое. Вы сами не раз могли убедиться в том, что визуальные образы воспринимать намного интереснее и легче. А посмотрите на бесчисленное множество сайтов. Разве Вы найдёте хоть один сайт без графики? Конечно же, нет. Графика в HTML – это одна из главных составляющих успеха любого ресурса, которая делает его оригинальным и единственным в своём роде. Однако с применением графики, также как и с форматированием текста, нужно быть очень аккуратным. Её переизбыток ни к чему хорошему привести не сможет. Чувство меры должно быть во всём. Иначе, Вы просто перегрузите html-документ, и тогда его открытие станет очень длительным процессом. К тому же, присутствие чрезмерного количества графических элементов станет отрывать внимание клиентов от основной сути ресурса (если, конечно, его суть не есть сама графика). Поэтому добавляйте графические элементы с чувством меры и только там, где они действительно необходимы, и будет Вам успех!
В главе об атрибутах тега BODY мы уже касались темы применения графики в качестве фонового элемента в документе html. В данной статье мы будем говорить об использовании графических образов на самой странице.
Чтобы добавить какой-либо образ Вам будет необходимо воспользоваться тегом < IMG>. У этого тега есть свой неизменный атрибут SRC. Данный атрибут направляет браузер к файлу, который содержит нужный рисунок. Так, для добавления в какую-то часть html -документа рисунка, например, под именем logo.jpg (в том случае, когда и рисунок, и документ размещены в одной и той же папке) необходимо на том же месте записать следующий код html:
В случае же расположения рисунка и документа в разных папках необходимо направить браузер по пути к этому рисунку относительно документа. Допустим, html-документ находится в папке под именем site, и здесь же находится ещё одна папка images, как раз – таки и содержащая требуемую нам картинку logo.jpg, тогда для её добавления необходимо записать так:
Кроме этого неизменного атрибута (атрибут SRC) тег < IMG> имеет ещё ряд атрибутов, которые являются необязательными. Разберём их детальнее:
width — ширина рисунка в пикселях или процентах;
height — высота рисунка в пикселях или процентах.
При применении данных атрибутов браузер сначала определит и подготовит место под предполагаемый для загрузки графический элемент, затем создаст модель документа, воспроизведёт текстовый материал и лишь потом загрузит сам рисунок. При всём этом браузер уложит рисунок в прямоугольник выделенной величины, даже при том условии, что само изображение в реалии много больше, или меньше. Браузер рисунок сожмёт или растянет. А если не воспользоваться данными атрибутами, тогда браузер немедля загрузит рисунок, а уже следом за ним с небольшой задержкой – текст и другие элементы страницы. Параметры величины рисунков можно указывать и в пикселях (тогда они будут неизменными), и в процентах (величина рисунков будет определяться разрешением экрана клиента). К примеру:
Либо
Если Вы отключите в параметрах браузера отображение рисунков, тогда можно вводить не рисунок, а альтернативный текст, поясняющий что за рисунок там должен находиться. Добиться этого можно, используя атрибут alt, например:
В данной ситуации браузер сразу займёт место в документе для рисунка, однако отображать будет не сам рисунок, а текст, который Вы впишите в атрибут alt, точнее в его значение (опять же – это возможно лишь при отключении демонстрации самого рисунка, иначе он заслонит собой вставленный Вами текст).
Используя уже известный Вам атрибут align, Вы сможете регулировать расположение графических образов сравнительно с другими частями, составляющими Ваш html-документ. Этот атрибут имеет некоторое количество значений, однако нам в настоящее время необходимо ознакомится только с двумя:
left — графические образы размещаются у левого края документа, а текст и остальные его части обтекают рисунок справа;
right — графические образы размещаются у правого края документа, а текст и остальные его части обтекают рисунок слева.
Приведём такой пример:
Данный html-код в браузере прочитается таким образом:
Это пример картинки.
Вот этот html-код:
Будет выведен браузером так:
Это моя аватарка.
Если Вы не хотите, чтобы текст обтекал рисунок, тогда необходимо воспользоваться тегом < BR> . Он уже известен Вам из предыдущей главы о преобразовании текста. У этого тега имеется следующий атрибут clear, включающий следующие значения:
left — прекратить обтекание текстом рисунков, расположенных по левому краю;
right — прекратить обтекание текстом рисунков, расположенных по правому краю;
all — прекратить обтекание текстом рисунков, расположенных и по левому, и по правому краю.
По умолчанию графические образы добавляются в документ очень плотно ко всем его составляющим. Если Вам этот вариант не нравится, тогда возможно установить незаполненные пространства вокруг рисунка. Сделать такое можно воспользовавшись атрибутами тега IMG:
vspace — основывает верхнее и нижнее пространства;
hspace — основывает боковые пространства (слева и справа).
Эти атрибуты имеют пиксельные значения. Так, дополнив последний пример:
получим:
Это моя аватарка.
Любой графический образ Вы можете окаймить чёрным цветом, вставить в рамку, применив атрибут border. Его значение записывается в пикселях и характеризует толщину рамки. К примеру, следующий код:
Браузером он отобразится таким образом:
Итак, на этом мы заканчиваем разговор о графике в HTML и способствующих её появлению в html-документах тегах, их атрибутах и атрибутивных значениях. Далее Вы узнаете, как формируются ссылки в HTML и как преобразовать их в графические гиперссылки.
