Photoshop 4-5 - учебный курс

         

Разбор простого примера на языке HTML


На следующих нескольких страницах я собираюсь разобрать простой пример на языке HTML, начиная с заголовка и кончая использованием изображений и созданием гиперссылок. Все теги будут описываться именно в том порядке, в каком Web-ресурсы будут появляться на странице Web-узла. Это, разумеется, не означает, что не может быть иных вариантов организации страницы, - просто я избрал именно такой вариант. Данный пример очень прост и очевиден.

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

ЗАМЕЧАНИЕ Чтобы увидеть Web-страницу, описанную в разбираемом примере HTML, откройте файл Test.htm, располагающийся в папке \CHAP14 \ WEB сопроводительного компакт-диска.

<HTML>

Этот тег появляется в начале каждого HTML-документа1. Он указывает броузеру, что документ содержит описание Web-страницы, и потребуется определенное время, чтобы прочитать описание и отобразить страницу на экране. Соответствующий закрывающий тег, </HTML>, обязательно должен являться самым последним тегом документа.

<HEAD>

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

<TITLE>

Данный тег описывает заголовок, который будет отображаться в строке заголовка броузера. Я использовал заголовок "Teach Yourself Photoshop in 14 Days".

</TITLE>

Это закрывающий тег заголовка Web-страницы. Обратите внимание на обратную косую черту.

</HEAD>

Это закрывающий тег раздела служебной информации, начинающегося с тега <HEAD>.

<BODY>

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




Имеется целый ряд параметров, которые можно задать в разделе <BODY>, но я остановлюсь только на двух из них.

<BODY BACKGROUND="file name">


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

ЗАМЕЧАНИЕ При использовании одного из тегов, описывающих фон Web-страницы, он будет заменять собой тег <BODY>. Одновременное применение нескольких тегов, начинающихся с ключевого слова BODY, не допускается.

<BODY BGCOLOR="#...">

Если вы хотите отказаться от фонового рисунка и залить фон страницы однородным цветом, используйте данный тег со следующими параметрами, задающими цвет:

FFFFFF = белый;

000000 = черный;

0000FF = синий;

336666 = зеленый.

В вашем распоряжении на самом деле имеется гораздо больше цветовых оттенков, чем приведено выше. Обратитесь по адресу http://www.stardot.com/~lukeseem/hexed.html или http://www.physics.purdue.edu/~sbc/color.html за полным списком доступных цветов и шестнадцатеричными значениями RGB.

<IMG SRC="file name">


Этот тег позволяет помещать на Web-страницу изображения. Проследите, чтобы изображения все время находились в одной и той же папке диска. Если вы переместите файлы изображений, броузер не сможет их найти.

Между ключевыми словами IMG и SRC могут быть добавлены некоторые параметры, управляющие положением изображения на экране:

IMG align=left SRC
- выравнивает изображение по левому краю окна броузера;

IMG align=center SRC
- выравнивает изображение по центру окна броузера;

IMG SRC
- выравнивает изображение по правому краю окна броузера;

IMG Vspase=
- этот параметр позволяет указать вертикальное положение изображения. Для этого просто введите число после знака равенства. Поэкспериментируйте и добейтесь нужного положения;

IMG Hspace=
- этот параметр позволяет управлять горизонтальным положением изображения. Просто введите нужное число после знака равенства.



<br>


Этот тег означает конец строки. Обратите внимание на то, что Internet Explorer и Netscape Navigator по-разному реагируют на данный тег. Перед публикацией HTML-документа не забудьте просмотреть изображение Web-страницы с помощью броузеров обоих типов. Разумеется, данный совет касается и любых других ситуаций. Всегда просматривайте страницу в обоих броузерах.

<hr>


Этот тег создает горизонтальную линейку. Высоту и ширину линейки можно задавать следующим образом:

<hr width=300>


Число означает количество пикселей.

<H1> <H2> <H3> <H4> <H5> <H6>


Это теги заголовков. Заголовок самого верхнего уровня задается тегом <H1>, а самого нижнего уровня - тегом <H6>. Ниже приводятся соответствующие закрывающие теги заголовков:

</H1> </H2> </H3> </H4> </H5> </H6>

<a HREF="http://www.-.com"> </a>


Это - сердце Web-документа; именно такие вещи и делают "Всемирную паутину" действительно всемирной. С помощью приведенной записи формируются гиперссылки на другие документы, разбросанные по Web-узлам. Адрес, или код универсального идентификатора ресурсов - URL, узла, с которым вы хотите установить связь, указывается в кавычках, как показано выше. Элемент интерфейса Web-страницы, который будет представлять эту гиперссылку, указывается между угловой скобкой, следующей за адресом, и закрывающим тегом </a>. Рассмотрите внимательно следующие примеры гиперссылок, связанных с текстовой строкой и графическим изображением кнопки:

<a href="http://www.-.com"><H3> The World of Photoshop</H3></a>

<a href="http://www.-.com"><img src="button.jpg" border=0></a>


Обратите внимание на добавленный мною параметр border=0. Он удаляет раздражающие синие рамки, которые окружают обычно элементы интерфейса, связанные с гиперссылками. Можно также указать в данном параметре численные значения, которые позволят сделать синие рамки какого угодно размера.

</BODY>


Этот тег обозначает конец основной части HTML-документа. Соответствующий открывающий тег был приведен выше в начале раздела.

</HTML>


Этот тег закрывает HTML-документ.


Содержание раздела