Вставка изображения
Файл с рисунком должен быть в том же каталоге, что и страничка, которую вы разрабатываете. Можно также создать для графики поддиректорию Images. Второй способ предпочтительней, так как количество файлов с изображениями со временем растет, и разобраться в них становится все сложнее. Отыщите у себя на диске или в INTERNET любой файл с расширением *.jpg и поместите его в IMAGES. Допустим, он называется foto.jpg.
Для вставки изображения в Web-страницу используется тэг <IMG>. Он тоже имеет несколько параметров, и закрывать его совсем не обязательно (как и тэг <BR>).
Вот что получится при вставке изображения:
<HTML>
<HEAD>
<TITLE>Музыка</TITLE>
</HEAD>
<BODY>
Музыка без границ<BR>
<IMG SRC=”Images/foto.jpg”><BR>
Создано Евгением Ковалевым
</BODY>
</HTML>
Заметим, что с помощью параметра SRC мы задаем расположение файла изображения. Так, Images/foto.jpg означает, что источник (source) изображения расположен в каталоге Images в файле под именем foto.jpg. (На самом деле, прописав вместо этого пути нечто вроде http://www.some.com/image/foto1.jpg, можно вставить в свой документ картинку из чужого сайта, правда так никто обычно не делает, ибо этот сайт в любую минуту может быть отключен или перегружен.)
У тэга <IMG> есть еще несколько интересных параметров. WIDTH (ширина в пикселах), HEIGHT (высота), BORDER (окантовка). Строка <IMG WITH = 200 HEIGHT = 100 BORDER = 0 SPC = "Images/foto.jpg"> заставит броузер вывести ваш файл в картинку высотой 100 и шириной 200 пикселов без окантовки. На самом деле WIDTH и HEIGHT обычно задаются в соответствии с реальным размером изображения. Конечно же, броузер может определить размеру рисунка самостоятельно, но дело в том, что пользователь получает страницу не всю сразу, а по частям. Вначале передается сам HTML файл, а за ним вдогонку ползут по мировым сетям картинки. И пока изображение находится в пути, ваша система не знает, какого размера оставить для него место на экране. Если вы заранее предупредите ее об этом, прописав параметры WIDTH и HEIGHT, броузер с самого начала сможет определить, на что рассчитывать. Не забудьте только при замене картинки переназначить ее параметры, иначе иллюстрации, растянутые или сжатые в произвольном направлении, будут походить на карикатуры.
HTML-код более сложной страницы для второго файла выглядит так:
<HTML>
<HEAD>
<TITLE>Группы</TITLE>
</HEAD>
<BODY>
<FONT SIZE=4 COLOR=”BLUE”>Мои любимые музыкальные группы</FONT><BR>
<IMG SRC=”Images/music.jpg”><BR>
Вопли Видоплясова<BR>
Алиса<BR>
Кино<BR>
Аквариум<BR><BR>
<FONT SIZE=2>Создано Евгением Ковалевым</FONT>
</BODY>
</HTML>
Если же вы особо цените одну из групп, ее название можно выделить полужирным шрифтом (<B>Кино</B> (Bold – жирный)) или курсивом (<I>Аквариум</I> (Italic – наклонный)).
Кроме того, любую фразу можно отцентровать:
<CENTRE>Мои любимые музыкальные группы</CENTRE>
Это выглядит так:
<HTML>
<HEAD>
<TITLE>Группы</TITLE>
</HEAD>
<BODY>
<CENTRE><FONT SIZE=4 COLOR=”BLUE”>Мои любимые музыкальные группы</FONT><BR></CENTRE>
<IMG SRC=”Images/music.jpg”><BR>
Вопли Видоплясова<BR>
Алиса<BR>
<B>Кино</B><BR>
<I>Аквариум</I><BR><BR>
<FONT SIZE=2>Создано Евгением Ковалевым</FONT>
</BODY>
</HTML>
Как видим, тэги, словно матрешки. Вкладываются друг в друга. Это очень ценное их качество.
Например, строка
<CENTER><FONT COLOR=”BLUE”><B><I>… </I></B></FONT></CENTER> позволяет расположить текст по центру (<CENTER>, набрав его синим (BLUE) полужирным (<B>) наклонным (<I>) шрифтом. Надо только вовремя закрыть тэг. Ведь если, например, оставить открытым тэг <B>, то весь текст до конца документа будет полужирным.