ТЕГ - НГЛУ им. Н.А. Добролюбова
реклама
Глава 1. Язык гипертекста HTML В настоящее время Всемирная паутина (World Wide Web или более кратко WWW ) является фактически синонимом сети Интернет. У большой части людей посещение сайтов отождествляется с Интернетом, хотя это один из сервисов данной сети, но наиболее востребованный. С помощью Всемирной паутины мы находим необходимые документы, просматриваем новости, слушаем музыку и т.д. При этом по сравнению с Интернет в целом WWW является довольно молодым изобретением (новым сервисом сети). В 1990-м году сотрудник CERN (Европейская лаборатория ядерной физики) Тим Беренс-Ли изложим основополагающие принципы WWW. Это и послужило точкой отсчета развития Всемирной паутинны. Все компьютеры, вовлеченные в сеть Интернет, имеют уникальные номера, что позволяет им обмениваться между собой информацией. Уникальный номер компьютера по-другому называется IP-адресом, который состоит из четырех чисел, разделенных точками (точки исключительно для удобства восприятия — на самом деле это всего лишь 32-битная последовательность), например: 107.53.12.01. По IPадресу в Интернете можно найти любой компьютер. Всемирная паутина организована таким образом, что часть компьютеров подключенных к сети предоставляет информацию (звук, текст, видео и т.д.), а другие компьютеры как раз и обращаются к ним за этими данными. Компьютеры, которые предоставляют свои ресурсы во Всемирной паутине, называются Web-серверами. Очевидно, когда пользователи получают запрашиваемую информацию с Webсерверов, то должны иметь возможность ее просматривать на своем компьютере. Для этого существуют специальные программы, которые называются браузерами. В переводе слово браузер означает просмотрщик или обозреватель. То, что мы наблюдаем в окне браузера называется Web-страницами. Основным ресурсом Всемирной паутины являются Web-сайты, которые реализованы на Web-серверах (хотя сайты крупных организаций нередко обслуживают несколько серверов). Браузеры также являются важной составляющей сети Интернет. Обмен сведениями между Web-сайтами и браузерами пользовательских компьютеров и составляет работу во Всемирной паутине. Понятно, что роль браузера в таком информационном обмене значительна. На протяжении недолгой истории службы WWW популярность переходила от одного браузера к другому. Так, в конце 90-х годов компания Microsoft не относилась к сети Интернет серьезно. И длительное время большой популярностью пользовался браузер Netscape. Преимущества этой программы по сравнению с другими имеющимися тогда на рынке были весьма значительны, и казалось, что подобная ситуация будет продолжаться всегда. Обнаружим стратегическую ошибку в плане недооценки Интернет, компания Microsoft бросила значительные ресурсы на создание и совершенствование своего браузера, и в настоящее время Internet Explorer используется подавляющим большинством пользователей сети. Браузеры позволяют практически мгновенно просмотреть информацию с Webсайтов, расположенных по всему миру и найти необходимые пользователю сведения. Чтобы представить информацию на Web-серверах для глобального использования, нужен универсальный язык, который понимали бы все браузеры. И таким языком, является HTML - язык разметки гипертекста (Hypertext Markup Language). HTML предоставляет средства для: публикации электронных документов с заголовками, текстом, таблицами, списками и фотографиями; получения электронной гипертекстовой ссылке. информации с помощью щелчка мыши на В этой главе мы рассмотрим технологию создания Интернет-страниц с помощью только языка разметки гипертекста HTML. В последующих главах книги, будут использованы другие (более сложные) ресурсы разработки Web-сайтов, которые позволят вам сделать создаваемые страницы более интересными и функциональными. Основная идея языка HTML заключается в добавлении к содержательной информации дополнительных слов (тегов), которые понимает программа браузер. Формально тег - ключевое слово, заключенное в угловые скобки (“<” и “>”). В целом теги определяют структуру документа. Приведем несколько примеров тегов: <HTML> - информирует браузер о том, что последующий текст является информацией на языке разметки гипертекста; <H1> - заголовок первого уровня; <UL> - создание списка элементов. Большинство тегов парные. Так, например, начало оформления заголовка третьего уровня (номер уровня определяет размер шрифта заголовка) начинается с тега <H3>. После размещения самого заголовка в тексте HTML-файла должен располагаться тег </H3>. Наклонная черта (слэш) является признаком того, что данный тег завершающий. В данном случае если завершающий тег не указать, то браузер так и будет отображать последующий текст в формате заголовка третьего уровня. ПРИМЕЧАНИЕ Пропуск закрывающих тегов приводит к искажению страницы в окне браузера. Однако в отличие от традиционных языков программирования такое нарушение синтаксиса не приводит к остановке отображения информации в окне браузера. Хотя HTML называется языком, однако по своим функциям он существенно отличается традиционных языков программирования. ПРИМЕЧАНИЕ Теги не чувствительны к регистру, но для определенного единообразия и стиля программисты придерживаются больших или строчных букв. Некоторые теги могут иметь параметры. Параметры указываются после имени тега через пробел в формате параметр=”значение”. Если параметров несколько, то они указываются через пробел. Теги могут вкладываться друг в друга. При такой вложенности необходимо внимательно указывать и закрывающие теги. Создание HTML-файла в Блокноте В этом разделе мы начнем первые практические действия. А именно разберем технические шаги, направленные на создание Web-страниц. Для этого можно использовать различные редакторы. И если вы в любой поисковой системе (Rambler, Yandex и т.д.) укажите в строке поиска “редактор HTML”, то получите массу предложений. Например, один из бесплатных редакторов HTML-кода можно скачать с сайта http://www.chami.com/html-kit. Заметным плюсом этой и подобных программ является проверка кода. Однако в принципе для создания страниц можно вполне использовать приложение Блокнот, которое является стандартным компонентом Windows. В этом случае ничего перекачивать не требуется, и в последующем тексте мы и будем использовать данное приложение. Может возникнуть вопрос – надо ли подключаться к сети Интернет для последующей практической работы с примерами, приведенными в книге. Нет, подключаться не требуется. Фактически в этом случае мы не скачиваем созданные страницы с Web-сервера, а разрабатываем их прямо на своем компьютере. Таким образом, в этом случае по сравнению с реальной работой в Интернете исчезает только процесс передачи файлов. ПРИМЕЧАНИЕ В реальной ситуации происходит сначала закачка HTML-файлов из сети Интернет, и только потом отображение их содержимого в окне браузера. Итак, откроем программу Блокнот (Пуск Программы Стандартные Блокнот). Наша задача сейчас - создать первый HTML-файл и просмотреть его в окне браузера. Поэтому в указанном редакторе напишем текст, приведенный на листинге 1.1. Сам текст мы далее прокомментируем, а пока отметим важный момент, связанный с сохранением файла. HTML-файлы имеют расширение .htm или .html. Вариант четырехбуквенного расширения является более современным и в настоящее время является доминирующим. Поэтому, последующие файлы необходимо сохранять с обязательным расширением .html. Предварительно лучше создать специальную папку, где и будут размещаться ваши HTML-файлы. ПРИМЕЧАНИЕ В приложении Блокнот в окне сохранения файла необходимо обязательно в качестве типа сохраняемого файла выбрать вариант – Все файлы. Таким образом, набрав информацию, представленную на листинге 1.1, в окне редактора Блокнот сохраним ее в файле ris1_1.html. После этого следует открыть браузер Internet Explorer (Пуск Программы Internet Explorer) и с помощью меню ФайлОткрыть просмотреть только что сохраненный файл. Можно также поступить по-другому - в адресной строке указать местоположение файла. На своем компьютере я выбрал в качестве имени и полного пути файла G:\Piter\Glava1\ris1_1.html. СОВЕТ Можно предложить более удобный способ открытия Web-страницы в окне браузера. Для этого достаточно лишь дважды щелкнуть по пиктограмме HTMLфайла. В этом случае мы используем то, что операционная система файлы с расширением html автоматически открывает в приложении Internet Explorer. В результате выполнения описанной последовательности шагов вы должны увидеть страницу подобную представленной на рис. 1.1. Листинг 1.1. Файл, формирующий Web-страницу на рис. 1.1 <HTML> <!-- Файл для формирования страницы на рис. 1.1 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE></HEAD> <BODY> Пример первой страницы на языке разметки гипертекста HTML </BODY> </HTML> Рис. 1.1 Теперь разберем строки программного кода на листинге 1.1. В первой строке тег <HTML> сообщает браузеру о том, что от данного тега до появления закрывающего тега </HTML> располагается текст на языке HTML. В тексте HTML-файла можно размещать комментарии (они являются атрибутом любого языка программирования). Для комментариев используются: <!-- - тег, определяющий начало комментария; --> - тег, фиксирующий завершение комментария. Комментарии в окне браузера отображаться не будут, но зато помогут вашим коллегам разобраться в разработанных вами Web-страницах. Каждый файл на языке HTML разделяется на две части: заголовочную часть (находится между тегами <HEAD> и </HEAD>); тело документа (располагается между тегами <BODY> и </BODY>). В заголовочной части можно разместить текст, который будет отображаться в верхней части окна браузера (в заголовке окна). Это реализуется с помощью тега <TITLE> (завершение названия заголовка определяет соответствующий завершающий тег </TITLE>). Длина заголовка должна быть не более 60 символов – в противном случае он не будет полностью виден в браузерах на компьютерах пользователей. В заголовочной части важную роль играет тег <META>, который позволяет задать описание страницы и ключевые слова для поисковых машин. Вернемся к листингу 1.1 в теле документа (BODY) формируется текстовая строка, которая отображается в окне браузера. В данном случае мы не указываем размер шрифта и цвет букв (тогда данные параметры устанавливаются браузером по умолчанию). На листинге 1.2 приведен несколько измененный вариант файла, который приводит к странице, представленной на рис. 1.2. Здесь использован атрибут bgcolor тега BODY, который определяет цвет фона страницы. В качестве значения данного атрибут указан цвет lightcoral (светло-коралловый). ПРИМЕЧАНИЕ Названия всех цветов можно найти в разнообразной справочной информации по HTML имеющейся в сети Интернет. Приведем несколько названий, которые в дальнейшем тексте будем использовать: lightgreen (светло-зеленый), pink (розовый), papayawhip (дыни), orchid (орхидеи), gray (серый), azure (лазурный), yellow (желтый), indigo (индиго), greenyellow (желто-зеленый), honeydew (свежего меда). Вместо названий цветов можно использовать их шестнадцатеричные коды. Важно отметить, что все цвета образуются смешением трех базовых цветов - красного, зеленого и синего (RGB-цвета). ПРИМЕЧАНИЕ Для представления числовой информации в вычислительной технике принято использовать шестнадцатеричную систему счисления. Эта система счисления с основанием 16 и в отличие от знакомой нам десятичной системы счисления для обозначения цифр использует 16 знаков (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Так, цифра F в шестнадцатеричной системе соответствует числу 15 в десятичной. Для обозначения интенсивности каждого из трех базовых цветов составляющих композиционный цвет используются две шестнадцатеричные цифры. Таким образом, в записи цвета первые две цифры представляют интенсивность красного в смешанном цвете, следующие две отвечают за интенсивность зеленого, а последние два учитывают синий цвет. Наиболее яркому оттенку цвета соответствует максимальное число FF. Соответственно, самому бледному (точнее отсутствию данного цвета совсем) - 00. Например, можно установить цвет фона следующим образом: bgcolor="#F08080". Это будет также светло-коралловый оттенок, с которым мы уже встречались. Кроме определения цвета, в тексте листинга 1.2 использовано еще создание заголовка третьего уровня - <H3>. На рис. 1.2 он выделяется относительно остального текста размером шрифта и отступом по вертикали. Листинг 1.2. Файл, формирующий Web-страницу на рис. 1.2 <HTML> <!-- Файл для формирования страницы на рис. 1.2 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY bgcolor="lightcoral"> <H3>Пример </H3> Вторая страница на языке разметки гипертекста HTML </BODY> </HTML> Рис.1.2 У тега BODY имеется еще ряд параметров: background – позволяет задать фоновый рисунок для документа, путем указания URL-адреса файла с изображением; alink – определяет цвет активной ссылки; link – устанавливает цвет еще не просмотренной ссылки; vlink – определяет цвет уде просмотренной ссылки; text – устанавливает цвет текста. Например, <BODY alink=”#FF7755” link=”#000000” vlink=”#000080” text==”#555555”> Таким образом, можно считать первые практические шаги в плане знакомства с технологией создания Web-страниц сделанными. Далее мы рассмотрим различные возможности языка разметки HTML. Форматирование текста В известном всем приложении Microsoft Word для форматирования текста используются заголовки и абзацы (параграфы) текста. Аналогично на Web-страницах можно оформить текст в виде заголовков различного уровня и параграфов. Для выделения названий разделов и подразделов на странице используются теги заголовков. Этих уровней шесть и для них отводятся теги от <H1> до <H6>. Размер шрифта заголовков последовательно уменьшается от <H1> до <H6>, но при этом абсолютные размеры букв подбираются браузером самостоятельно. На листинге 1.3 представлено содержимое файла, который позволяет оформить страницу, так как показано на рис. 1.3. Что касается тегов заголовков, то о них мы уже говорили. Кроме заголовков здесь использован тег для организации параграфа <P>. Закрывающий тег (<P>) часто не используется, а сам параграф продолжается до тех пор, пока не встретится тег, определяющий новый параграф (как раз, этот момент присутствует в нашем примере). Кроме этого, в рассмотренных тегах использован атрибут align, с помощью которого можно выровнять фрагмент по правому краю (right), левому (left) или по центру (center). Листинг 1.3. Файл, формирующий страницу на рис. 1.3 <HTML> <!-- Файл для формирования страницы на рис. 1.3 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY> <H1 align=right>Пример заголовка 1-го уровня</H1> <H2 align=center>Пример заголовка 2-го уровня</H2> <P align=left> Пример 1-го параграфа текста <P align=center> Пример 2-го параграфа текста </BODY> </HTML> Рис. 1.3. Традиционно параграфы с большим объемом текста оформляются, используя выравнивание по ширине текста. Для этого у атрибута align следует установить значение justify. Демонстрация такого форматирования текста показана на рис. 1.4 (текст соответствующего HTML-файла представлен на листинге 1.4). Листинг 1.4. Файл, формирующий Web-страницу на рис. 1.4 <HTML> <!-- Файл для формирования страницы на рис. 1.4 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY> <P align=justify> Разрабатываемая далее книга Microsoft Excel будет включать несколько листов данных и несколько листов управления. Исходная ситуация такова — мы располагаем рядом клиентов (заказчиков), которые обращаются к нам по поводу ремонта проданной им техники (ремонт в течение гарантийного срока является вполне нормальным делом). </BODY> Рис. 1.4. Из опыта работы с текстовым редактором мы знаем, что фрагменты текста можно выделять жирным шрифтом, курсивом и подчеркиванием. Для этого в языке гипертекста HTML имеются соответствующие теги (закрывающие не указываем, так как они отличаются от открывающих только наклонной чертой): <STRONG> – выделение фрагмента жирным шрифтом; <EM> – выделение курсивом фрагмента текста; <U> – подчеркивание текста. Описанные возможности продемонстрируем на примере создания страницы показанной на рис. 1.5. Для этого нам понадобится сформировать HTML-файл представленный на листинге 1.5. Листинг 1.5. Файл, формирующий Web-страницу на рис. 1.5 <HTML> <!-- Файл для формирования страницы на рис. 1.5 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY> <P align=justify> Разрабатываемая далее <U>книга <EM>Microsoft Excel</EM></U> будет включать несколько листов данных и несколько <STRONG>листов управления</STRONG>. </BODY> </HTML> Рис. 1.5. Для форматирования можно использовать также следующие теги: <SMALL> - обеспечивает уменьшение фрагмента текста; <S> - отражает текст в перечеркнутом виде; <BIG> - для увеличения размера букв текста; <TT> - при представлении текста в стиле, используемого в пишущих машинках. Эти теги проиллюстрированы на рис. 1.6 (текст соответствующего HTML-файла представлен на листинге 1.6). Листинг 1.6. Файл, формирующий страницу на рис. 1.6 <HTML> <!-- Файл для формирования страницы на рис. 1.6 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY> <P align=justify> <BIG> Разрабатываемая</BIG> далее <SMALL>книга</SMALL> Microsoft Excel <S>будет</S> включать несколько листов данных и несколько листов управления. <TT>Исходная ситуация такова — мы располагаем рядом клиентов (заказчиков), которые обращаются к нам по поводу ремонта проданной им техники (ремонт в течение гарантийного срока является вполне нормальным делом).</TT> </BODY> </HTML> Рис. 1.6 Для форматирования текста на странице используются еще ряд тегов. Так тег <BR> используется, если необходимо обеспечить вывод следующей информации с новой строки. Важно, что параграф в этом случае не прерывается. На листинге 1.7 приведен пример внесения в текст трех переводов строк. Результат на странице (рис. 1.7) показывает влияние действия тега <BR>. Листинг 1.7. Файл, формирующий страницу на рис. 1.7 <HTML> <!-- Файл для формирования страницы на рис. 1.7 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY> Разрабатываемая далее <BR>книга Microsoft Excel<BR> будет включать несколько листов данных и<BR> несколько листов управления </BODY> </HTML> Рис. 1.7 Для создания оформления на странице часто пользуются тегом <HR> , который обеспечивает на странице горизонтальную линию. У данного тега имеются атрибуты: size – позволяет задать толщину линии в пикселях; color – служит для указания цвета линии; align – задает выравнивание линии; NOSHADE – присутствие этого параметра отменяет рельефность линии; width - определяет длину линии. На листинге 1.8 приведен файл с использованием горизонтальных линий, а результат в окне браузера показан на рис. 1.8. Листинг 1.8. Файл, формирующий страницу на рис. 1.8 <HTML> <!-- Файл для формирования страницы на рис. 1.8 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY> <HR size=15 width=100% color=orchid> <H1 align=center>NHL</H1> <HR size=1 width=50% align=center> </BODY> </HTML> Рис. 1.8 Иногда на страницу в окне браузера требуется специальные символы. Для этого можно использовать так называемые &-последовательности (они должны вводиться только маленькими буквами). Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-тегов, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью Esc-последовательностей. Браузер показывает на экране символ "<", когда встречает в тексте последовательность &lt; (по первым буквам английских слов less than — меньше, чем). Знак ">" кодируется последовательностью &gt; (по первым буквам английских слов greater than — больше, чем). Символ "&" (амперсанд) кодируется последовательностью &amp;, а двойные кавычки (") кодируются последовательностью &quot; . ПРИМЕЧАНИЕ Точка с запятой — обязательный элемент Esc-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). На листинге 1.9 приведен файл обеспечивающий страницу представленную на рис.1.9. Здесь использовали последовательность &nbsp; для обозначения неразрывного пробела. Листинг 1.9. Файл, формирующий страницу на рис. 1.9 <HTML> <!-- Файл для формирования страницы на рис. 1.9 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY> <HR size=5 width=100% color=orchid> &lt;H1&gt;&nbsp;&nbsp;&nbsp;- &nbsp;&nbsp;&nbsp; заголовок первого уровня </BODY> </HTML> Рис. 1.9 Для форматирования текста можно использовать тег <FONT>, который позволяет легко изменить цвет и размер букв текста. Для этого у тега <FONT> имеется ряд атрибутов. Один из них color, позволяющий задать цвет. Для задания цвета можно поступить двумя способами - использовать либо его название, либо шестнадцатеричный код. Синтаксис этого действия аналогичен установке цвета фона окна браузера. Размер шрифта в условных единицах (от 1 до 7) задается с помощью атрибута size. Размер, используемый Web-браузером по умолчанию, принято приравнивать к 3. С помощью знаков "+" или "-" можно управлять изменением размера шрифта относительно основного шрифта. Для задания типа шрифта используется атрибут face. Можно указать как один, так и несколько типов, разделяя их запятыми. Список шрифтов просматривается слева направо. Указанное название должно точно соответствовать названию типа шрифта. Если шрифт не найден на компьютере пользователя, то используется шрифт по умолчанию. На листинге 1.10 приведен текст HTML-файла, который демонстрирует на странице (рис. 1.10) использование тега FONT. ПРИМЕЧАНИЕ Не стоит использовать редкие шрифты. Рекомендуется применять Times New Roman и Arial. Листинг 1.10. Файл, формирующий страницу на рис. 1.10 <HTML> <!-- Файл для формирования страницы на рис. 1.10 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY> <P align=justify> Разрабатываемая <FONT size="+2" face="Arial"> далее </FONT>книга <FONT size="+1" color="red">Microsoft Excel</FONT> будет включать несколько листов данных и несколько <FONT size="-2">листов управления</FONT>. </BODY> </HTML> Рис. 1.10. Изображения Встроить изображение в Web-страницу очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и использовать тег <IMG> в HTML-файле. ПРИМЕЧАНИЕ Использование больших по размеру графических файлов проводит к увеличению времени загрузки Web-страницы. Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-файле. В этом случае строка в HTML-файле будет следующая: <IMG src="picture.gif"> У тега <IMG> несколько параметров: src – для указания URL-адреса файла (имя файла и при необходимости его местоположение); border – определяет толщину рамки вокруг изображения; height – высота изображения; width – ширина изображения; align – позволяет указать расположение изображения относительно текста или других элементов Web-страницы; hspace – позволяет указать отступ от изображения до текста по горизонтали; vspace – позволяет указать отступ от изображения до текста по вертикали; alt – позволяет задать строку текста, которая будет выводиться на месте появления изображения до его загрузки или при отключенной графике, текстовая информация, которая появляется при наведении курсора мыши на изображение. На рис. 1.11 показана страница с изображением. Для этого нам потребуется создать HTML-файл, представленный на листинге 1.11. ПРИМЕЧАНИЕ Значения width и height могут отличаться от реальных размеров изображения. В подобной ситуации Web-браузер выполнит необходимое преобразование. Листинг 1.11. Файл, формирующий страницу на рис. 1.11 <HTML> <!-- Файл для формирования страницы на рис. 1.11 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY> Пример страницы с картинкой <BR> <IMG src="1.jpg" border=1 height=100 alt="НГЛУ им.Н.А.Добролюбова"> </BODY> </HTML> В данном случае предполагается, что файл с изображением имеет имя 1.jpg и располагается в одной папке вместе с HTML-файлом. Мы установили рамку вокруг рисунка толщиной в один пиксель, а для высоты изображения выбрали 100 пикселей. В тексте на листинге 1.11 мы использовали тег <BR> для перевода строки при выводе информации. При выводе изображения для того, чтобы пропорции рисунка не нарушались следует указывать только один из двух параметров - height или width. Так, в рассмотренном примере мы указали высоту (height), после чего ширина изображения будет подбираться браузером автоматически. Рис. 1.11 Значения параметров height и width часто указываются не в пикселях, а в процентах от габаритов окна браузера. В этом случае абсолютные размеры изображения изменяются, а для указания такой единицы измерения используется символ процента: <IMG src="1.jpg" border=1 height=10%>. Таким образом, можно создавать изображения на переднем плане страницы. Разумеется, требуется не просто размещать изображения на странице, а располагать их в определенном месте. Необходимые для этого ресурсы мы рассмотрим в последующих главах. А пока разберем - каким образом можно разместить изображение на заднем плане страницы (фон страницы). Для этого предназначен атрибут background тега <BODY>, в качестве значения которого следует указать имя файла. В следующей конструкции для заднего фона используется файл 3.jpg: <BODY background="3.jpg">. Если фоновое изображение небольшого размера, то браузер его размножает (самостоятельно использует его как блок для укладки всей поверхности страницы). На листинге 1.12 приведен текст HTML-файла, который обеспечивает формирование Web-страницы представленной на рис. 1.12. Листинг 1.12. Файл, формирующий страницу на рис. 1.12 <HTML> <!-- Файл для формирования страницы на рис. 1.12 --> <HEAD><TITLE> Пример страницы с фоном и картинкой</TITLE> </HEAD> <BODY background="3.jpg"> <IMG src="1.jpg" border=1 height=100 alt="НГЛУ им.Н.А.Добролюбова"> </BODY> </HTML> Рис. 1.12 ПРИМЕЧАНИЕ Для фоновых изображений лучше подбирать без резких переходов. Часто графические файлы размещают в отдельных папках внутри папки, где располагается сам HTML-файл. В этом случае следует указать в параметре src не просто имя файла, а еще и папку. Например, если изображения в примере на листинге 1.12 перенести во вложенную папку image, то строки тегов, где производится обращение к файлам изменятся: <BODY background="image/3.jpg"> <IMG src="image/1.jpg" border=1 height=100 alt="НГЛУ им.Н.А.Добролюбова">. Гиперссылки Самая важная функциональность языка разметки HTML заключается в возможности создавать ссылки на другие документы. Это наиболее заметное отличие содержания сайтов от печатных изданий. Благодаря гиперссылкам сайты, расположенные в сети Интернет, связаны в единое информационное пространство, которое по праву называется Всемирной Паутиной. Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который можно только читать, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи практически всех популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к другому заранее назначенному документу или фрагменту документа. Для формирования на странице гиперссылок существует тег A (он и называется якорем). Ключевым атрибутом тега А является href. Его значение необходимо установить на URL-адрес необходимого документа находящегося на том же компьютере либо на другом расположенном в сети Интернет. Внешне при наведении курсора мыши на гиперссылку в окне браузера курсор мыши изменяется, а при щелчке по гиперссылке происходит открытие необходимого документа, либо в текущем окне, либо в новом окне браузера. ПРИМЕЧАНИЕ В современных браузерах гиперссылки по умолчанию отображаются с подчеркиванием, а также выделяются ярко-синим цветом. Если подвести к гиперссылке указатель мыши, он превращается в “ладонь руки”. В таком состоянии можно щелкнуть мышью, чтобы переместиться к другому ресурсу. На листинге 1.13 приведен пример использования в качестве гиперссылки фрагмента текста. Здесь между тегами <A> и </A> располагается текст, который и превращается в якорь при наведении на него курсора мыши. В данном случае мы установили гиперссылки на ранее разработанные документы в начале главы. Учитывая, что все рассматриваемые файлы располагаются в одном каталоге, кроме имени файла больше ничего указывать не требуется. Результат отображения страницы с гиперссылками в окне браузера приведен на рис. 1.13. Листинг 1.13. Файл, формирующий Web-страницу на рис. 1.13 <HTML> <!-- Файл для формирования страницы на рис. 1.13 --> <HEAD> <TITLE> Гиперссылки </TITLE> </HEAD> <BODY> <H2>Пример использования якорей </H2> Щелкните на названии любой гиперссылки, чтобы перейти к соответствующей странице: <BR> 1 гиперссылка <A HREF="ris1_1.html"> Откройте первую страницу </A> <BR> 2 гиперссылка <A HREF="ris1_2.html"> Откройте вторую страницу </A> </BODY> </HTML> Рис.1.13. Кроме текста в качестве якоря для гиперссылки можно использовать и изображения. В этом случае между тегами <A> и </A> следует разместить уже знакомый нам тег <IMG> с установкой на конкретный графический файл. Теперь при щелчке по изображению будет происходить переход на необходимый документ. На листинге 1.14 (соответствующий результат в окне браузера на рис. 1.14) приведен пример гиперссылки на изображении. Он отличается от предыдущего наличием на странице рисунков вместо текстовой информации. Листинг 1.14. Файл, формирующий страницу на рис. 1.14 <HTML> <!-- Файл для формирования страницы на рис. 1.14 --> <HEAD> <TITLE> Гиперссылки </TITLE> </HEAD> <BODY> <H2> Пример использования якорей </H2> <BR> 1-я гиперссылка: <A href="ris1_1.html"> <IMG src="5.jpg" border=0 width=150 alt="НГЛУ им.Н.А.Добролюбова"></A> 2-я гиперссылка: <A href="ris1_2.html"> <IMG src="7.jpg" border=0 width=150 alt="НГЛУ им.Н.А.Добролюбова"></A> </BODY> </HTML> По умолчанию гиперссылка открывается в том же окне браузера, что и содержащая ее страничка. В общем-то, это считается правилом хорошего дизайнерского тона, потому что пользователь всегда может принудительно открыть ссылку в новом окне. ПРИМЕЧАНИЕ В Internet Explorer для открытия следующей страницы в новом окне нужно просто щелкнуть по ссылке, удерживая нажатой клавишу Shift; кроме того, практически во всех браузерах по щелчку правой кнопкой мыши по ссылке открывается контекстное меню, в котором есть функция «открыть в новом окне». Тем не менее, бывают ситуации, когда независимо от действий пользователя ссылку нужно обязательно открыть в новом окне. Для этого существует специальный атрибут target, который и задает окно для открытия ссылки. Если в нашем примере необходимо обеспечить открытие в новом окне, то следует оформит гиперссылку следующим образом: <A href="ris2.html" target=_blank> <IMG src="7.jpg" border=0 width=150 alt="НГЛУ им.Н.А.Добролюбова"></A> Рис. 1.14 Гиперссылки можно устанавливать и на ресурсы, расположенные на других сайтах в сети Интернет. Если Вы хотите использовать ссылку на определенную страницу в Интернете (находящуюся на другом компьютере), то можно в качестве значения параметра href указать адрес этой страницы. Например, это может выглядеть следующим образом - <A href="http://www.nnov.ru/wokr.html"</A>. Здесь мы использовали так называемый абсолютный URL-адрес, который содержит обозначение протокола, доменный адрес компьютера, а также имя файла. Имя файла может отсутствовать. Тогда загружается Web-страница заданная на сервере в качестве страницы по умолчанию. При относительном URL-адресе путь определяется с учетом местоположения Webстраницы, на которой находится гиперссылка. В этом случае если необходимая Webстраница находится в той же папке, что и Web-страница содержащая ссылку, то URLадрес может содержать только имя файла. Якоря могут ссылаться на адреса электронной почты, и если щелкнуть на такой ссылке, то начнет загружаться используемая по умолчанию программа для работы с электронной почтой, которая автоматически подготовит форму создания нового письма на заданный по ссылке адрес. Ссылки на электронный адрес выглядят следующим образом - <A HREF = "mailto: электронный адрес"> отправить письмо… </A>. Например, <A HREF="mailto:ivan@rambler.ru"> электронной почты</A>. Мой адрес Можно также указать гиперссылку на документ, созданный в одном из приложений (например, в Microsoft Word или в Microsoft Excel). В этом случае при щелчке по подобной гиперссылке вам будет предложено открыть рассматриваемый файл в соответствующем приложении либо сохранить файл на диске. На листинге 1.15 показан пример с гиперссылками на документ Microsoft Word и книгу Microsoft Excel. Листинг 1.15. Файл cо ссылками на документы Microsoft Word и Microsoft Excel <HTML> <HEAD> <TITLE> Гиперссылки </TITLE> </HEAD> <BODY> <H2> <U> Пример использования якорей </U></H2> <P> Щелкните на названии любой строки, выделяемой якорем, чтобы перейти к соответствующему файлу <P> 1 гиперссылка <A href="metod.doc"> Откройте файл с методическими указаниями </A> <P> 2 гиперссылка <A href="student.xls"> Файл с электронной таблицей</A> </BODY> </HTML> Списки Для перечня названий на странице удобно использовать элементы, которые называются списками. В этом случае от нас требуется только перечисление необходимых названий, а соответствующее оформление производится автоматически браузером. Существуют два вида списков: маркированные или неупорядоченные; нумерованные или упорядоченные. Маркированные списки используются тогда, когда порядок следования элементов не столь важен. Они позволяют представить информацию более наглядно, разбив ее на отдельные компоненты. Страница с перечнями значений оформленными подобным образом воспринимается легче. Элементы неупорядоченных списков просто помечаются маркерами. Для начала неупорядоченного списка используется тег <UL>, соответственно, для его завершения тег </UL>. Каждый элемент неупорядоченного списка вводится тегом <LI>. Последующий за ним текст отражается в качестве элемента списка. В данном случае закрывающий тег </LI> для элемента списка не является обязательным. А вот завершение самого списка должно быть отмечено, как уже говорилось, тегом </UL>. На листинге 1.16 приведен пример использования простого маркированного списка, а на рис.1.15 соответствующая страница представлена в окне браузера. Рис. 1.15. Листинг 1.16. Файл, демонстрирующий использование неупорядоченного списка <HTML> <!-- Файл для формирования страницы на рис. 1.15 --> <HEAD><TITLE> Пример страницы гипертекста</TITLE> </HEAD> <BODY> <H3>Параметры тега IMG </H3> <UL> <LI>src – для указания имени файла и при необходимости пути к нему; <LI>border – толщина рамки вокруг изображении; <LI> height – высота изображения; <LI> width – ширина изображения; <LI> alt – текстовая информация. </UL> </BODY></HTML> Аналогичным образом можно создавать и вложенные списки (листинг 1.17). В этом случае браузер самостоятельно пиктограммами помечает элементы списков разного уровня (рис. 1.16). Листинг 1.17. Файл, демонстрирующий использование вложенных списков <HTML> <!-- Файл для формирования страницы на рис.1.16 --> <HEAD> <TITLE> Вложенные списки </TITLE> </HEAD> <BODY> <UL> <LI> МОСКВА </LI> <UL><LI> Шатура </LI> <LI> Красногорск </LI> <LI> Химки </LI> </UL> <LI> НИЖНИЙ НОВГОРОД </LI> <UL> <LI> Кстово </LI> <LI> Бор </LI> </UL> </UL> </BODY> </HTML> Тег <UL> имеет параметр type, который позволяет задать значок, которым помечаются строки списка. Данный параметр может принимать следующие значения: disk – выводит значки в форме кружков с заливкой; circle – выводит значки в форме кружков без заливки; square – выводит значки в форме квадрата с заливкой. Рис.1.16 Упорядоченные списки начинаются и заканчиваются соответственно с помощью тегов <OL> и </OL>. Пример Web-страницы на данную тему показан на рис.1.17. Здесь значение параметра TYPE определяет - какая нумерация элементов списка будет производиться. Здесь возможны варианты как в виде букв (больших или маленьких) так и в виде цифр, которые могут быть римскими или арабскими. Например, в нашем случае используется автоматическая нумерация и римскими и арабскими цифрами. Если бы нам понадобилось задать нумерацию в виде букв, то тогда упорядоченный список следовало определить следующим образом: <OL TYPE="a"> У тега <OL> имеется еще один параметр - <start>, который позволяет задать номер, с которого будет начинаться нумерация строк. Текст HTML-файла для обеспечения результата представленного на рис. 1.17 приведен на листинге 1.18. Листинг 1.18. Файл, демонстрирующий использование упорядоченных списков <HTML> <!-- Файл для формирования страницы на рис. 1.17 --> <HEAD><TITLE> Упорядоченные списки </TITLE> </HEAD> <BODY> <OL TYPE="I"> <LI> МОСКВА </LI> <OL TYPE="1"> <LI> Шатура </LI> <LI> Химки </LI> <LI> Красногорск </LI> </OL> <LI> НИЖНИЙ НОВГОРОД </LI> <OL TYPE="1"> <LI> Кстово </LI> <LI> Бор </LI> </OL> </OL> </BODY> </HTML> Рис.1.17. Существует несколько способов организации списков. Так, c тегов <DL> и. </DL> можно организовать список определений. Список определений несколько отличается от других видов списков. Вместо тегов <LI> в списках определений используются теги <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Рассмотрим использование этих тегов на примере (листинг 1.19 и страница в окне браузера на рис.1.18). Листинг 1.19. Файл, демонстрирующий использование списков определений <HTML> <!-- Файл для формирования страницы на рис. 1.18 --> <HEAD><TITLE> Списки определений</TITLE> </HEAD> <BODY> <DL> <DT>Конфигуратор <DD>Режим работы системы 1C:Предприятие, в котором разработчик можеет создавать конфигурации для решения прикланных задач автоматизации деятельности предприятия. <DT>Режим работы 1C:Предприятие <DD>Режим работы системы 1C:Предприятие, в котором пользователь работает с прикладным решением, созданным на основании одной из имеющихся конфигураций. </DL> </BODY> </HTML> Рис.1.18. Как вы уже заметили - браузеры игнорируют обыкновенные пробелы и символы конца строки. Однако, иногда требуется сохранить на странице оригинальное форматирование (фрагмент должен выглядеть так, как он выглядит в текстовом редакторе). Для того, чтобы это обеспечить имеются теги <PRE> и </PRE> (от английского preformatted — предварительно форматированный). В этом случае информация выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц. Листинг 1.20. Файл, демонстрирующий использование тега <PRE> <HTML> <!-- Файл для формирования страницы на рис. 1.19 --> <HEAD><TITLE> Списки определений</TITLE> </HEAD> <BODY> <PRE> ХОККЕЙ ДИНАМО САЛАВАТ ЮЛАЕВ АМУР ФУТБОЛ ЗЕНИТ КРЫЛЬЯ СОВЕТОВ </PRE> </BODY> </HTML> Рис.1.19. Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем. На листинге 1.21 и рис.1.20 приведен пример подобного форматирования. Листинг 1.21. Файл, демонстрирующий использование тега <BLOCKQUOTE> <HTML> <!-- Файл для формирования страницы на рис. 1.20 --> <HEAD><TITLE> Тег BLOCKQUOTE</TITLE> </HEAD> <BODY> СПИСОК УЧАСТНИКОВ <BLOCKQUOTE> <EM>ДИНАМО, САЛАВАТ ЮЛАЕВ, АМУР</EM> </BLOCKQUOTE> Место проведения <BLOCKQUOTE> <EM>Москва 10 04 2008</EM> </BLOCKQUOTE> </BODY> </HTML> Рис.1.20. Таблицы Другой способ оформления информации на странице – использование таблиц. На рис.1.21 приведена таблица фамилий сотрудников, а на листинге 1.22 текст соответствующего HTML-файла. Листинг 1.22. Файл создания простой таблицы <HTML> <!-- Файл для формирования страницы на рис. 1.21 --> <HEAD> <TITLE> Пример использования таблицы </TITLE> </HEAD> <BODY> <TABLE border=3 align =center width =70%> <CAPTION> Список сотрудников</CAPTION> <TR> <TH> Отдел быта </TH> <TR> <TD> Петров О.В. </TD> <TH> Транспортный отдел </TH> <TD> Борисов А.Л. </TD> </TR> </TR> <TR> <TD> Орлова П.В. </TD> <TR> <TD> Орлова П.В. </TD> </TR> <TD> Викторов Д.Л. </TD> </TR> </TABLE> </BODY> </HTML> Рис. 1.21. Все теги и содержание таблицы должны размещаться между тегами <TABLE> и </TABLE>. Тег открывающий таблицу имеет несколько атрибутов. Так, с помощью атрибута border можно задать толщину рамки в пикселях. Если вы хотите сделать рамку невидимой, то следует указать значение border=0. Горизонтальное выравнивание (таблицы в целом) определяется атрибутом align. Атрибут width задает ширину таблицы, с помощью его вы можете задать ширину количеством пикселей или в процентах относительно ширины окна браузера. В рассматриваемом примере на листинге 1.22 ширина таблицы задается равной 70 процентам от ширины окна браузера. В строке <CAPTION> Список сотрудников </CAPTION> задается заголовок таблицы. Этот текст выводится непосредственно над таблицей. Тег строки таблицы <TR> выполняет форматирование ячеек отдельной строки таблицы. Таким образом, в строку попадают все ячейки, перечисленные между тегами <TR> и </TR>. Самым мелким объектом таблицы является ячейка данных. Существуют два типа ячеек: для формирования раздела заголовка: <TH>…</TH> ; для формирования основного содержания таблицы: <TD>…</TD>. Отличие этих элементов в том, что для заголовка автоматически выполняется выделение содержимого ячеек жирным шрифтом. Таким образом, пример приведенный на листинге 1.22 является хорошей базой для оформления простых таблиц. Рассмотрим теперь чуть более сложные ситуации, где требуется объединение ячеек. Необходимо создать таблицу, показанную на рис. 1.22. Для этого нам потребуется подготовить соответствующий HTML-файл (листинг 1.23). Здесь используется возможность увеличения размера некоторых ячеек по сравнению с остальными. В рассмотренном примере мы объединили две ячейки в одну с помощью атрибута colspan: <TD align="center" colspan="2"> Этому параметру присваивается объединяемых ячеек. числовое значение определяющее число Рис.1.22 Листинг 1.23. Файл, использующий объединение ячеек в таблице <HTML> <!-- Файл для формирования страницы на рис. 1.22 --> <HEAD> <TITLE> Пример использования таблицы </TITLE> </HEAD> <BODY> <TABLE border="1" align ="center" width ="70%"> <CAPTION> Список лиц</CAPTION> <TR> <TH> Филиалы </TH> <TH> Руководитель </TH> <TH> Ответственный за рекламу </TH> </TR> <TR> <TD> Верхневолжский </TR> <TR><TD> Заречный <TR> <TD> Нагорный </TD> </TD><TD> Петров О.В. </TD> <TD align="center" colspan="2"> Орлова П.В. </TD> </TR> </TD> <TD> Федоров О.В. </TD> </TABLE> </BODY> </HTML> <TD> Борисов А.Л. </TD> <TD> Козлова П.В. </TD> </TR> Рассмотрим еще один пример на данную тему – необходимо обеспечить форматирование таблицы с объединением ячеек по вертикали (рис. 1.23). Для этого следует использовать еще один атрибут – rowspan, которому присваивается числовое значение определяющее число объединяемых ячеек. Рис.1.23 Листинг 1.24. Файл, использующий объединение ячеек по вертикали <HTML> <!-- Файл для формирования страницы на рис. 1.23 --> <HEAD> <TITLE> Пример использования таблицы </TITLE> </HEAD> <BODY> <TABLE border="1" align ="center" width ="70%"> <CAPTION> Список лиц</CAPTION> <TR> <TH> Сотрудники </TH><TH> Отдел</TH> <TH> Должность </TH> </TR> <TR> <TD> Петров О.В. </TR> </TD><TD> Отдел сбыта </TD> <TR><TD rowspan="2" > Орлова П.В. </TD> <TD> Зав. лабораторией </TD> <TD> Отдел автоматизации </TD> <TD> программист </TD> </TR> <TR> <TD> Информационный отдел </TD> <TD> ведущий программист программист </TD> </TR> </TABLE> </BODY> </HTML> В наших примерах мы использовали заголовки у создаваемых таблиц. Тег <CAPTION> может включать атрибут align. Допустимые значения: <CAPTION align=TOP> (заголовок помещается над таблицей) и <CAPTION align=BOTTOM> (заголовок помещается под таблицей). У таблицы имеется еще два важных атрибута: cellspacing - устанавливает расстояние между рамками ячеек таблицы в пикселях (например, cellspacing=2); cellpadding - устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, cellpadding=10). Для иллюстрации этих атрибутов приведем пример Web-страницы представленной на рис. 1.24. Рис.1.24 Листинг 1.25. Файл, формирующий страницу на рис. 1.24 <HTML> <!-- Файл для формирования страницы на рис. 1.24 --> <HEAD> <TITLE> Пример использования таблицы </TITLE> </HEAD> <BODY> <TABLE border="1" align ="center" width ="90%" cellspacing=5 cellpadding=10> <CAPTION> Список лиц</CAPTION> <TR> <TH> Сотрудники </TH> <TH> Отдел</TH> <TH> Должность </TH> </TR> <TR> <TD> Петров О.В. </TR> </TD><TD> Отдел сбыта </TD> <TR><TD rowspan="2" > Орлова П.В. </TD> <TD> Отдел автоматизации </TD> <TD> программист </TD> </TR> <TR> <TD> Информационный отдел </TD> <TD> ведущий программист программист </TD> </TR> </TABLE> </BODY> </HTML> <TD> Зав. лабораторией </TD> Рассмотрим еще ряд деталей, связанных с оформлением таблицы. В примере на рис. 1.21 мы уже столкнулись с ситуацией, когда одна из ячеек таблицы пуста. В этом случае вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект &nbsp; (неразрывающий пробел). Ячейка попрежнему будет пустой, а рамка вокруг нее будет. Тег <TR> может включать ряд атрибутов, которые далее мы прокомментируем. Атрибут align позволяет установить выравнивание текста в ячейках строки. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align=rigth (выравнивание вправо). Атрибут valign устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: valign=top (выравнивание по верхнему краю), valign=middle (выравнивание по центру), valign=bottom (выравнивание по нижнему краю). Эти же атрибуты можно использовать и для тега <TD>, в этом случае форматирование относится к конкретной ячейке. При необходимости с помощью атрибутов width и height можно установить соответственно ширину и высоту ячеек в пикселях. Внутренние гиперссылки Ранее мы рассматривали связывание различных Web-страниц с помощью текстовых и графических якорей. Однако, если страница большая, то удобно организовывать гиперссылки на разделы страницы (это так называемые внутренние гиперссылки). Внутренняя гиперссылка также вставляется при помощи тега <A> с одним отличием – параметр href содержит имя указателя, а не URL-адрес. Рассмотрим следующий пример на эту тему. Листинг 1.26. Файл, демонстрирующий использование внутренних гиперссылок <HTML> <HEAD><TITLE> Добавление внутренних гиперссылок </TITLE> </HEAD><BODY> <A NAME="1C"> </A> <P> <FONT size="+2" face="Arial"> КОНЦЕПЦИЯ СИСТЕМЫ 1С:ПРЕДПРИЯТИЕ<P> 1С:Предприятие является универсальной системой автоматизации деятельности предприятия ( занимающегося как торговлей так и производством). При этом 1С:Предприятие может быть использована для автоматизации самых разных участков работы. Основной особенностью системы 1С:Предприятие является возможность ее конфигурирования для каждого варианта использования (программу можно настроить для “себя”). И функционирование системы делится на 2 процесса – конфигурирование (создание вида или варианта использования программы) и исполнение (собственно работа с программой 1С:Предприятие ). На этапе конфигурирования можно создавать различные виды объектов… <A HREF="#1C"> </BODY> </HTML> Перейти к концепции системы 1С:ПРЕДПРИЯТИЕ</A> Здесь в строке <A NAME="1C"> вводится внутренняя гиперссылка, а далее по тексту обеспечивается возможность перехода по данной гиперссылке с помощью тега: <A HREF="#1C">. Вы можете также создавать гиперссылки на закладки расположенные других страницах, указывая ссылку в виде HREF="имя_страницы.html#имя_ссылки”. Создание карт гиперссылок Ранее мы рассматривали создание гиперссылок при наведении курсора мыши на изображение. В этом случае на рисунке появляется одна гиперссылка (один якорь). В ряде ситуаций на комбинированном изображении требуется обеспечить две или более различных гиперссылок. Например, в изображении может присутствовать фирменные знаки различных организаций, и при щелчке по одному из знаков происходит переход на сайт соответствующей фирмы. Это называется картой ссылок. Рассмотрим – каким образом в качестве якоря гиперссылок использовать отдельные части изображения, называемые горячими точками. В примере, приведенном на рис.1.27, тег <MAP> создает карту ссылок и присваивает ей имя, по которому на нее можно ссылаться. Листинг 1.27. Файл создания карт гиперссылок <HTML> <!-- Файл для формирования страницы на рис. 1.25 --> <HEAD><TITLE> Пример использования карт гиперссылок </TITLE> </HEAD> <BODY> <MAP name="NGLU"> <AREA href="history.html" shape="rect" coords="1,1,100,200" alt="История университета"> <AREA href="structure.html" shape="rect" coords="100,1,200,200" alt="Структура университета"> </MAP> <IMG src="18.jpg" width="200" height="200" usemap="#NGLU"> </BODY> </HTML> Все элементы карты ссылок располагаются между тегами <MAP> и </MAP>. Обязательным атрибутом тега <MAP> является атрибут name: <MAP name="NGLU"> Далее в строке …usemap="#NGLU"> используется имя элемента для формирования ссылок на карту. Горячие точки на изображении вводятся элементами <AREA>. Каждый тег <AREA> должен содержать следующие атрибуты: href – адрес гиперссылки для данной области, shape и coords определяют тип геометрической фигуры горячей области и ее координаты. Рис.1.25 В строках <area href="history.html" shape="rect" coords="1,1,100,200" alt="История университета"> создается горячая область в форме прямоугольника, координаты которого задаются в атрибуте cords. Координаты создаются при помощи координатных пар, состоящих из двух чисел, определяющих положение по оси x и y. Ось x располагается горизонтально и начинается с левого верхнего угла, а ось y направлена вниз из этой же точки. Для определения прямоугольной горячей области достаточно задать координаты левого верхнего и правого нижнего углов прямоугольника. В записи первые два числа – это координаты левого угла, а следующие два числа координаты правого угла. В рассматриваемом примере мы создаем для данной картинки две различные гиперссылки. Кроме прямоугольника существуют другие фигуры для формирования областей гиперссылок. Например, <area href="str1.html" shape="poly" coords="1,1, 50,1,200,100,100,100">. В этом случае мы задаем прямоугольник произвольной формы, координаты которого определяются в атрибуте cords простым перечислением координат всех вершин многоугольника. Еще один вариант фигуры можно задать следующим образом: <area href="str1.html" shape="circle" coords="50,60, 30">. В этом случае в качестве области на экране формируется круг, а в качестве координат задаются координаты центра круга и его радиус. Чтобы связать с картой ссылок графическое изображение, Вы должны включить атрибут usemap следующим образом: <IMG src="18.jpg" width="200" height="200" usemap="#NGLU">. У тега <AREA> имеется еще один востребованный на практике параметр – target.Он указывает – куда будет загружен документ при переходе по ссылке. Возможные значения для указанного параметра мы рассмотрим в этой главе при изучении фреймов. ТЕГ <META> Для поиска информации в Web используются поисковые системы, которые исследуют сайты по ссылкам на их страницах и запоминают информацию, идентифицирующую каждую страницу. Поэтому в HTML-файлах должна присутствовать информация именно для поисковых систем, которая позволяет классифицировать данную страницу. Тегом, который помогает поисковым системам классифицировать страницу, является <META>. У этого тега два обязательных атрибута: name – для идентификации самого тега; content – для перечисления данных, предназначенных для поисковых систем. Первый из них, name, используется для уточнения самого тега <META>. В другом атрибуте content задаются данные, предназначенные для поисковых систем. В следующих строках используется элемент META с атрибутом name принимающим значение keywords: <META name =”keywords” content =”Excel, VBA, офисные решения”>. В данном случае используется значение keywords и далее перечисляются слова характеризующие тематику условного сайта. Эти ключевые слова используются поисковыми системами при поиске в Web. Если часть из указанных вами слов будет присутствовать в строке поиска, заданной на клиентском компьютере, то ваш сайт попадает в список найденных сайтов. Возможен другой вариант использования тега <META>: <META NAME=”discription” CONTENT=”Сайт c примерами использующими VBA и Excel”>. Здесь вместо списка ключевых слов приводится краткое описание вашего сайта. Это описание используется поисковыми системами для классификации вашего сайта. Многие поисковые механизмы постоянно сканируют Интернет в поисках HTMLфайлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей. Кроме того, тег <META> позволяет запретить или разрешить индексацию Webстраницы поисковыми машинами. В этом случае в качестве значения NAME следует указать robots. Теперь в параметре content указывается комбинация следующих значений: index – индексация разрешена; noindex – индексация запрещена; follow – разрешено переходить по ссылкам, которые находятся на этой Webстранице; nofollow – запрещено переходить по ссылкам; all – комбинация index плюс nofollow; none – комбинация noindex плюс nofollow. В следующем примере тега индексация и переход по ссылкам разрешены: <META name=”robots” content=”index,follow”> Другой пример позволяет запретить индесацию и переход по ссылкам: <META name=”robots” content=”noindex,nofollow”> Другая группа META-инструкций определяет эквиваленты команд протокола передачи гипертекстов. Разберем несколько примеров: <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251"> Эта META-инструкция дает браузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows/1251. Следующая META-инструкция абсолютно аналогична предыдущей, только в качестве кодировки указана КОИ-8. <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=koi8-r"> Для автоматической перезагрузки страницы через заданный промежуток времени следует воспользоваться свойством refresh: <META HTTP-EQUIV="refresh” content=”30”> В данном примере страница будет перезагружена через 30 секунд. Если необходимо переместить пользователя сразу на другую страницу, то можно указать URL-адрес в параметре url: <META HTTP-EQUIV="refresh” content=”0” url=”New address”> Фреймы Ранее рассмотренные страницы имели возможность ссылаться друг на друга, но не могли воспроизводиться браузером одновременно. Одновременно отобразить несколько страниц можно с помощью тега <FRAMESET>. Для этого в нашей странице содержащей фреймы располагается строка <FRAMESET cols="200,*"> Эта запись сообщает браузеру, что в документе будут располагаться фреймы, описание которых приводится между тегами <FRAMESET> и </FRAMESET>. При этом параметр cols определяет положение фреймов в окне браузера. Значение, присваиваемое этому атрибуту, задает ширину фрейма в пикселях или в процентах относительно ширины окна браузера. В приводимом на листинге 1.28 (соответствующая Web-страница на рис. 1.26) примере объявляются два фрейма. Первый из них начинается с левой стороны и имеет ширину 200 пикселей. Второй фрейм занимает все оставшееся пространство (для этого используется символ звездочка). ПРИМЕЧАНИЕ Основное отличие файла с фреймами от обычного HTML-файла – отсутствие раздела BODY и отсутствие содержимого страницы. Содержание файла с фреймами составляет фреймовую структуру. Вместо тега <BODY> применяется парный тег <FRAMESET>. Каждое окно описывается тегом <FRAME>. После распределения экранного пространства необходимо задать файлы, которые будут выводиться во фреймах. Делается это с помощью тега <FRAME name ="name1" src="ris1_11.html"> Здесь в атрибуте src указывается адрес выводимой в данный фрейм страницы. Атрибут name используется для идентификации фрейма. Это можно использовать в гиперссылках для указания фрейма в который нужно загружать целевую страницу. Например, гиперссылка <A href=”primer.html” target=”v1”> будет вызывать загрузку файла primer.html во фрейм со значением v1 у атрибута name. Листинг 1.28. Файл создания карт гиперссылок <HTML><HEAD></HEAD><BODY> <FRAMESET cols="200,*"> <FRAME name ="name1" src="ris1_11.html"> <FRAME name ="name2" src="ris1_12.html"> </FRAMESET>><BODY></html> Рис.1.26 Тег <FRAMESET> имеет следующие параметры: rows – описывает разбиение на строки (размеры могут быть указаны в пикселях или в процентах, например <FRAMESET rows=”20%, 80%”> ; Cols – описывает разбиение на столбцы; Border – задает толщину границы между фреймами в пикселах (например, <FRAMESET border=1 rows=”20%, 80%”> Bordercolor – задает цвет границы между фреймами (например, <FRAMESET border=1 Bordercolor=green rows=”20%, 80%”> Frameborder – задает включение или отключение показа границы между фреймами, имеет два значения – yes (граница отображается, данное значение усанвливается по умолчанию) и no (граница не отображается); Framespacing – задает расстояние между фреймами в пикселях. Тег <FRAME> для описания одиночных фреймов имеет следующие параметры: Src – задает URL-адрес документа, который должен быть загружен во фрейм; Name – задает уникальное имя фрейма; Scrolling – запрещает либо разрешает отображение полос прокрутки во фрейме (может принимать следующие значения: Auto – полосы отображаются, только если содержимое не помещается во фрейме (данное значение установлено по умолчанию); Yes – полосы отображаются в любом случае; No – полосы не отображаются в любом случае Marginidth – задает расстояние в пикселях между границей фрейма и его содержимым по горизонтали; Marginheigth - задает расстояние в пикселях между границей фрейма и его содержимым по вертикали; Frameborder – задает включение или отключение показа границы между фреймами, имеет два значения ( yes – граница отображается и no – граница не видна); NORESIZE – отключает возможность изменения размеров фрейма пользователем. По умолчанию любой пользователь может изменить размер фрейма путем перемещения границы. Теги <SPAN> и <DIV> В последующих главах мы будем использовать теги <DIV> и <SPAN>. Эти теги не выполняют заметных визуальных эффектов при отображении. Однако рассматриваемые теги помогают задать оформление отдельных блоков. Отличие этих тегов друг от друга заключается в переводе строки (для тега <DIV>) и отсутствии перевода (для тега <SPAN>). На листинге 1.29 и рис.1.27 приведен демонсрирущий использование этих тегов. Листинг 1.29. Файл демонстрирующий теги <DIV> и <SPAN> <HTML> <HEAD><TITLE> Пример тегов div и span</TITLE> </HEAD> <BODY> <H3 align="center"> div и span </h3> Пример тега <strong>div</strong><div> &#160;&#160;&#160;Заголовки являются простым средством разметки текста, а именно изменения размера текста в зависимости от уровня заголовка. </div>Далее приводится пример тега <strong>span</strong> <span>Обычно используется 6 уровней заголовков (начиная от Н1 до Н6) для выделения новых разделов и подразделов страницы. </span>Завершение примеров по рассматриваемым тегам.</BODY> </HTML> Рис.1.27
