Изображения
До настоящего момента мы работали только исключительно с текстом. Теперь рассмотрим, каким образом можно включать изображения в Web-страницы. Далее на листинге 8 приводится текст файла с включением изображения в окно браузера.
Листинг 8.
<HTML> <HEAD>
<TITLE> Включение изображений </TITLE> </HEAD>
<BODY BGCOLOR="#CDCDCD"> <CENTER>
<H1> ИЗОБРАЖЕНИЕ </H1>
<IMG SRC="рис1.jpg" BORDER="1" HEIGHT="250" WIDTH="350"
ALT = “Место фотографии”>
</BODY> </HTML>
В строке <BODY BGCOLOR="#CDCDCD"> добавляется фон. Здесь задается заливка экрана некоторым цветом – в данном случае серым. Цвет фона можно задать одним из двух методов: либо указать цвет по названию (таких названий более 100 ,например navy – темно-синий, а crimson - малиновый), либо использовать шестнадцатиричный код того цвета, который мы хотим использовать. Когда мы указываем название цвета, то используется следующий синтаксис :
<BODY BGCOLOR="navy">
Поясним теперь числовое задание цвета. Все цвета образуются смешением красного, зеленого и синего цвета. Первые два символа (после решетки) представляют интенсивность красного в данном цвете фона, следующие два отвечают за интенсивность зеленого, а последние два представляют синий цвет. Значение 00 для этих символов соответствует наиболее бледному оттенку, который может принимать данный цвет, а FF – самому яркому. В соответствии с таким форматом записи значению #FF0000 будет соответствовать самый яркий красный цвет.
В строке <IMG SRC="рис1.jpg" BORDER="1" HEIGHT="250" WIDTH="350"> задается изображение на странице. Тег <IMG> позволяет задавать местоположение файла. Имя и путь к файлу задается в атрибуте SRC. Если файл с изображением (рис1.jpg) находится в той же папке, что и HTML-файл, то достаточно указать просто его имя. Если файл с изображением находится в другом каталоге, то требуется указать его полный путь. Например, это может выглядеть следующим образом:
<IMG SRC= "C:\Информатика\рис1.jpg" BORDER="1" HEIGHT="250" WIDTH="350">.
Если файл располагается во вложенной папке (относительно папки, где располагается HTML-документ), то следует оформить тег следующим образом:
<IMG SRC="Новая папка/рис1.jpg" BORDER="1" HEIGHT="250"
WIDTH="350" ALT = “Место фотографии”>
В теге IMG существует атрибут BORDER=х, который обозначает наличие границ. Если х=1, то толщина рамки будет равна 1 пикселю, если х=2, то толщина - 2 пикселя и т.д.
Параметр HEIGHT задает высоту изображения в пикселях, а WIDTH – ширину изображения. Следует не забывать включать атрибуты HEIGHT и WIDTH в Ваши файлы. Еще одним важным атрибутом изображения является ALT. Он предназначен для тех браузеров, у которых отключен режим отображения изображений. Такие браузеры будут отображать на том месте экрана, где должно быть изображение, значение атрибута ALT. Это дает пользователю хоть какое-то представление о том, что за изображение должно было бы присутствовать на странице.
Вы можете также использовать в качестве фона не цвет, а рисунки (фоновые изображения). В этом случае необходимо заменить строку <BODY BGCOLOR="#CDCDCD"> на строку с графическим объектом, содержащим фоновое изображение. Так, может быть использована следующая конструкция <BODY BACKGROUND = "C:/информатика/рис2.jpg">. В этом случае атрибут BACKGROUND устанавливается значением имени файла с графическим изображением.
На рис.6 показано, к каким изменениям в окне браузера приведет включение фонового рисунка. Изображение, используемое в качестве фонового, не обязательно должно быть большого размера. Браузер укладывает этим изображением всю поверхность фона по горизонтали и вертикали, как кафельной плиткой. Фоновые изображения могут придать Вашим страницам приятный вид.
Рис.6.
Старайтесь не пользоваться изображениями с резкими переходами цвета, поскольку они будут отвлекать внимание пользователя. Пример на рис.6 как раз не отвечает данным требованиям.