Разбор простого примера на языке 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-документ.
