Компьютерные информационные технологии

А. А. Гордич

Д. Г. Кисляк

 

 

КОМПЬЮТЕРНЫЕ ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ

Создание Web-документов

с помощью HTML

 

	Минск 2008

Частный институт управления и предпринимательства

 

 

А. А. Гордич

Д. Г. Кисляк

 

КОМПЬЮТЕРНЫЕ ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ

Создание Web-документов

с помощью HTML

Учебно-методическое пособие

 

 

Минск 2008

УДК 681.322.062

ББК 32.98

Г 68

Рекомендовано к изданию редакционно-издательским советом
Частного института управления и предпринимательства

 

Авторы:

заведующий кафедрой информационных процессов и технологий
Частного института управления и предпринимательства
кандидат технических наук, доцент А. А. Гордич;

старший преподаватель кафедры информационных процессов
и технологий Частного института управления и предпринимательства
Д. Г. Кисляк

 

Рецензенты:

заведующий кафедрой вычислительной техники Белорусского государственного аграрного технического университета
кандидат технических наук, доцент Ю. Н. Силкович;

исполняющий обязанности начальника кафедры правовой информатики Академии МВД Республики Беларусь кандидат технических наук,
доцент Н. М. Бобович

 

Рассмотрено и одобрено
на заседании кафедры информационных процессов и технологий,
протокол № 4 от 21 ноября 2007 г.

Гордич, А. А.

Г 68 Компьютерные информационные технологии. Создание Web-доку-ментов с помощью HTML: учебно-метод. пособие / А. А. Гордич,
Д. Г. Кисляк.– Минск: Частн. ин-т упр. и предпр., 2008.– 63 с.

ISBN 978-985-6786-90-0.

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

Предназначено для студентов дневной и заочной форм обучения Частного института управления и предпринимательства.

 

УДК 681.322.062

ББК 32.98

ã Гордич А. А., Кисляк Д. Г., 2008

ISBN 978-985-6786-90-0 ã Частный институт управления и предпринимательства, 2008

Оглавление

1. Глобальная компьютерная сеть «Интернет». 4

1.1. Назначение и виды компьютерных сетей. 4

1.2. Основные понятия Интернет. 5

1.3. Адресация компьютеров в сети «Интернет». 6

1.4. Информационные системы Интернет. 10

1.5. Гипертекстовая информационная система WWW... 10

1.6. URL-адреса и браузеры.. 11

2. Создание Web-страниц. 13

2.1. Основные понятия HTML. 13

2.2. Структура HTML-документа. 15

2.3. Создание и редактирование Web-страниц. 16

3. Работа с текстом.. 18

3.1. Создание текстовых заголовков. 18

3.2. Абзацы текста. 20

3.3. Форматирование текста. 21

3.4. Списки. 23

3.5. Бегущая строка. 26

3.6. Специальные символы.. 26

4. Графические объекты.. 27

4.1. Поддерживаемые форматы графических объектов. 27

4.2. Размещение изображений на Web-страницах. 28

4.3. Горизонтальные линии. 29

5. Таблицы.. 30

5.1. Создание таблиц. 30

5.2. Заголовки и форматирование таблиц. 32

6. Гиперссылки. 33

6.1. Назначение и виды гиперссылок. 33

6.2. Гиперссылки на другие Web-страницы.. 34

6.3. Переходы по гиперссылкам в пределах Web-страницы.. 35

6.4. Графические гиперссылки. 37

6.5. Гиперссылки на адреса электронной почты.. 39

7. Фреймы.. 40

7.1. Понятие и типы фреймов. 40

7.2. Создание фреймов. 40

8. Публикация Web-документов. 43

9. Контрольные задания. 45

 

Приложение............................................................................................... 53

Литература.............................................................................................. 62

Основные понятия Интернет

Интернет в настоящее время является самой крупной и наиболее популярной в мире глобальной сетью. Сеть «Интернет» появилась на ос-нове сети ARPANET, созданной в США в 1969 г. Она включала четыре крупных компьютера, по заказу Министерства обороны расположенных в различных местах страны. Цель проекта ARPANET – исследование методов сохранения работоспособности информационной сети в случае ядерной войны. Была поставлена задача так связать географически удаленные компьютеры, чтобы разрушение одного из узлов сети не нарушало бы работу всей системы.

Для того чтобы компьютеры сети ARPANET могли обмениваться сообщениями, необходимо было выработать единый набор правил, определяющих их способ взаимодействия. Такой набор правил и соглашений, используемый при передаче данных между компьютерами в сети, называется протоколом. Для сети ARPANET был разработан протокол NCP (Network Control Program). Проект ARPANET был успешно реализован и стал той основой, на которой стала развиваться глобальная сеть «Интернет». В исследованиях проекта ARPANET принимали участие ученые университетов и научных центров, которые быстро оценили преимущества работы в информационных сетях. Начался бурный процесс создания локальных и распределённых сетей. Однако этот процесс протекал стихийно и осложнялся тем, что различные соединяемые сети базировались на разных аппаратных платформах, использовали разные программное обеспечение и протоколы передачи данных.

Чтобы решить проблемы обмена данными между различными компьютерами, были разработаны протоколы ТСР и IP. Протокол ТСР (Transmision Control Protocol) – протокол управления передачей, протокол IP (Internet Protocol) – межсетевой протокол. Протоколы ТСР и IP настолько тесно связаны, что их указывают под одним названием – протоколы ТСР/IP. Механизм работы межсетевых протоколов TCP/IP подобен действиям почтовой службы.

На основе протоколов ТСР/IP началось интенсивное соединение самых разных компьютеров и сетей. Так, в начале 80-х годов прошлого столетия образовалась всемирная сеть, которая получила название «Интернет».

Интернет (Internet) – это глобальная компьютерная сеть, представляющая собой всемирное объединение неоднородных компью-терных сетей (региональных, локальных и отдельных компьютеров), образующих единое информационное пространство благодаря исполь-зованию стандартных протоколов передачи данных. Интернет – это не просто глобальная сеть, это объединение огромного количества сетей планетарного масштаба, это всемирная «сеть сетей». Интернет не принадлежит какому-то отдельному частному лицу, организации или государству.

Направления развития сети «Интернет» определяет общественная организация ISOC (Internet SOCiety – общество Интернет), состоящая из специалистов разных стран мира. ISOC является координирующим органом Интернет. Эта организация выбирает совет по архитектуре Интернет IAB (Internet Architecture Board), который принимает решения о функционировании сети. Инженерными проблемами Интернет занимается группа IETF (Internet Engineering Task Force).

Гипертекстовая информационная система WWW

Самым удобным, интересным и эффективным ресурсом Интернета является в настоящее время гипертекстовая информационная система WWW (World Wide Web) – «всемирная паутина».

WWW – это гипертекстовая информационная система, содер-жащая связанные между собой документы, которые могут созда-ваться в различных программных средах и находиться в любом из компьютеров сети «Интернет».

Интернет и «всемирная паутина WWW» – не одно и то же. Интернет включает в себя компьютеры, линии связи, программное обеспечение и данные, находящиеся в компьютерах сети. «Всемирная паутина WWW» – это только одна из возможностей Интернета.

WWW – информационная система, реализованная в рамках глобаль-ной сети «Интернет».

Гипертекстовые документы, содержащиеся во «всемирной паутине WWW», называются Web-документами. Гипертекстовый документ – это текстовый документ, содержащий гиперссылки. Гиперссылки позво-ляют указать:

1) другие части данного документа;

2) другие документы;

3) объекты нетекстового формата (звук, графику, видео).

В качестве гиперссылок могут выступать: текст и графические изображения. Щелчок по гиперссылке приводит к переходу к тому документу (или его части), на который указывает гиперссылка.

Web-документы бывают двух видов: Web-страницы и Web-сайты.

Web-страница – это основная единица передаваемой по «всемирной паутине» информации. Web-страница может иметь любую «длину». Это значит, что часто на экране монитора нельзя целиком увидеть всю страницу. Web-страница хранится в виде отдельного файла с расширением.html или.htm. Файлы Web-страниц хранятся на специальных компь-ютерах, называемых Web-серверами. Web-сервером может служить любой подключенный к сети Интернет компьютер, на котором установлено специальное программное обеспечение, такое как Microsoft Internet Information Services или Apache. Web-сервер должен быть постоянно подключен к сети Интернет или большую часть суток.

Группа тематически взаимосвязанных Web-страниц называется Web-сайтом или Web-узлом. Сайт может содержать произвольное коли-чество Web-страниц. Доступ на каждый сайт всегда производится через главную (часто говорят домашнюю или стартовую) страницу.

Сайты, обеспечивающие удобный доступ к разным ресурсам Интернета (электронной почте и др.), называются порталами. Например, TUT.BY – белорусский портал, MAIL.RU – российский портал.

URL-адреса и браузеры

Каждая Web-страница представляет собой файл, находящийся на одном из дисковых устройств Web-сервера. Следовательно, чтобы по-лучить доступ к какой-либо странице, необходимо знать адрес файла, содержащего эту страницу. Для этих целей используются так называемые унифицированные указатели ресурсов или URL-адреса (Uniform Resource Locator – универсальный указатель ресурсов).

URL-адрес представляет собой стандартизованную строку симво-лов, указывающую местонахождение документа в сети Интернет.

Структура URL-адреса имеет вид:

СОЗДАНИЕ WEB-СТРАНИЦ

Основные понятия HTML

Основным инструментом создания Web-страниц является язык разметки гипертекста HTML (Hyper Text Markup Language). Этот язык позволяет готовить Web-страницу с помощью любых текстовых редак-торов, например, можно использовать текстовый редактор БЛОКНОТ или текстовый процессор MS Word. Просмотр созданной Web-страницы осуществляется с помощью браузера.

Web-страницы, созданные с помощью языка разметки гипертекста, называют также HTML-документами.

Для размещения на Web-странице различных объектов (текста, изображений, таблиц и др.) используются команды языка HTML, на-зываемые тегами. Другими словами, тег – это специальная инструкция, определяющая размещение объектов на Web-странице. HTML-код состоит из совокупности тегов. Каждый тег имеет своё имя.

Для правильного оформления HTML-кода необходимо соблюдать следующие правила написания тегов:

1. Имя каждого тега обязательно заключается в угловые скобки, т.е. <имя тега>. Таким образом он отличается от остального текста и браузер воспринимает его как команду.

2. Некоторые теги могут иметь дополнительные параметры, называемые атрибутами тега, которые дополняют команду. Атрибуты,
к примеру, могут уточнять цвет, размер, положение объекта и т.д. Атрибут записывается внутри угловых скобок через пробел после самого тега. После атрибута ставится знак равенства и в кавычках указывается значение атрибута. Если атрибутов несколько, то они разделяются пробелами. Порядок следования атрибутов не имеет значения.

3. Теги бывают парными и одинарными. Структура парного тега имеет вид:

<имя тега> … </имя тега>.

открывающий тег закрывающий тег

Между открывающим и закрывающим тегами записываются текст или другие теги. Атрибуты записываются только в открывающем теге. Одинарные теги не содержат закрывающего тега.

4. Если один тег оказался вложенным в другой, то всегда первым закрывается тот тег, который открыли последним.

Например, – <тег1> <тег2> <тег3>... </тег3> </тег2> </тег1>.

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

<Имя тега атрибут1="значение" атрибут2="значение" …>

…

</Имя тега>

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

Язык HTML содержит больше 100 тегов. Основные теги приведены в табл. П 1 приложения. Во втором столбце этой таблицы указываются имя тега и его назначение. Если тег имеет атрибуты, то имена атрибутов выбираются из третьего столбца таблицы. В четвёртом столбце табл. П 1 указываются значения атрибутов. Рассмотрим несколько примеров, поясняющих применение тегов языка HTML. Для создания основного раздела Web-страницы с фоном жёлтого цвета записывается следующий парный тег:

<BODY BGCOLOR="YELLOW"> … </BODY>.

цвет фона жёлтый

Код цвета выбирается из табл. П 2 приложения. В этой таблице приведены шестнадцатеричные и именные коды основных цветов. Вместо именного кода цвета можно записывать шестнадцатеричный код, т.е

<BODY BGCOLOR="FFFF00"> … </BODY>.

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

<BODY BGCOLOR="SILVER" TEXT="RED"> … </BODY>

или

<BODY TEXT="FF0000" BGCOLOR="C0C0C0"> … </BODY>.

Порядок следования атрибутов (BGCOLOR и TEXT), как уже отмечалось, значения не имеет.

С помощью тега

<HR SIZE="10" COLOR="BLUE">

на странице размещается горизонтальная линия синего цвета (BLUE) толщиной (SIZE) 10 пикселей.

Структура HTML-документа

HTML-документ состоит из двух частей: заголовка и основного раздела. Для описания документа и его частей используются теги языка HTML. Структура HTML-документа имеет вид:

<HTML>

<HEAD>

Параметры страницы Заголовок

</HEAD> ("голова")

<BODY>

Текст страницы Основной раздел

</BODY> ("тело")

</HTML>.

Парный тег <HTML> … </HTML> информирует браузер о том, что внутри него находится гипертекстовый документ. Заголовок Web-стра-ницы ("голова") задаётся парным тегом <HEAD> … </HEAD>, а основной раздел ("тело") – парным тегом <BODY> … </BODY>. Три перечисленных тега являются обязательными, поскольку определяют структуру Web-стра-ницы.

Заголовок документа предназначен для общего описания документа. Важно понимать, что заголовок в документе может быть только один. Информация, находящаяся в этом разделе документа, является служебной и необходима браузеру. Например, имя заголовка Web-страницы фор-мируется с помощью парного тега <TITLE> … </TITLE>. Имя заголовка Web-страницы отображается в строке заголовка браузера. Также название страницы, заданное с помощью <TITLE> … </TITLE>, будет исполь-зоваться поисковыми системами Интернет.

Внутри основного раздела располагаются все остальные теги оформления Web-страницы. Открывающий тег <BODY> может содержать атрибуты, определяющие для всего документа следующие параметры:
цвет фона, фоновый рисунок, цвет текста, цвета гиперссылок и т.д.
(см. табл. П 1).

РАБОТА С ТЕКСТОМ

Абзацы текста

Для создания абзаца текста используется парный тег <Р>... </P>. Между открывающим <Р> и закрывающим </P> тегами записывается текст. Выравнивание абзаца задается с помощью атрибута ALIGN. Раз-личные способы выравнивания приведены на рис. 3.3.

 

Рис. 3.3. Различные способы выравнивания

HTML-код, соответствующий рис. 3.3, имеет вид:

<HTML>

<HEAD>

<TITLE>Способы выравнивания</TITLE>

</HEAD>

<BODY>

<P ALIGN = "LEFT"> Абзац выровнен по левому краю </P>

<P ALIGN = "RIGHT"> Абзац выровнен по правому краю </P>

<P ALIGN = "CENTER"> Абзац выровнен по центру </P>

</BODY>

</HTML>

Если необходимо в пределах абзаца перевести курсор на следующую строку, то для этой цели используется одинарный тег <BR>. Текст, следующий за тегом <BR>, будет отображаться с новой строки.

Тег <BR> часто используется для добавления рисунка в текст с новой строки.

Форматирование текста

Форматирование текста – это процедура оформления его внешнего вида, которая предполагает изменение всех характеристик шрифта.

Парный тег <FONT> … </FONT> используется для изменения рисунка, размера и цвета шрифта.

Рисунок (гарнитура) и цвет шрифта изменяются с помощью соответственно атрибутов FACE и COLOR. Запись тега

<FONT FACE = "Arial" COLOR = "RED"> ФОРМАТИРОВАНИЕ </FONT>

означает, что слово ФОРМАТИРОВАНИЕ будет отображаться красным цветом (RED) и гарнитурой Arial.

Размер шрифта устанавливается с помощью атрибута SIZE. В зна-чении атрибута указывается номер от 1 (самый маленький шрифт) до 7 (самый большой шрифт). Соответствие номера размеру шрифта в пунктах приведено в табл. 3.1.

Таблица 3.1

Номер и размер шрифта

Номер шрифта	Размер в пунктах

 

Запись тега

<FONT FACE="Tahoma" COLOR="GREEN" SIZE="5"> ПРИМЕР </FONT>

означает, что слово ПРИМЕР будет отображаться зеленым цветом (GREEN), гарнитурой Tahoma и размером 18 пунктов.

Для изменения начертания символов используются следующие парные теги:

- <B>... </B> – полужирный шрифт;

- <I>... </I> – курсив;

- <U>... </U> – подчеркивание;

- <STRIKE>... </ STRIKE> – перечеркивание;

- <STRONG>... </ STRONG> – усиленное выделение.

Запишем несколько примеров, демонстрирующих применение при-веденных тегов. Тег вида:

<B> <I> ФАКУЛЬТЕТ МЕНЕДЖМЕНТА </I> </B>

означает, что предложение ФАКУЛЬТЕТ МЕНЕДЖМЕНТА будет отображаться полужирным курсивом.

Если мы хотим, чтобы предложение УЧЕТНО-ЭКОНОМИЧЕСКИЙ ФАКУЛЬТЕТ отображалось полужирным курсивом с подчеркиванием, то необходимо записать следующую совокупность тегов:

 

<B> <I> <U> УЧЕТНО-ЭКОНОМИЧЕСКИЙ ФАКУЛЬТЕТ </U> </I> </B>

 

На рис. 3.4 показана Web-страница, где демонстрируются различные способы начертания текста.

 

Рис. 3.4. Различные способы начертания текста

Для того чтобы получить приведенную на рис. 3.4 Web-страницу, необходимо ввести следующий код:

<HTML>

<HEAD>

<TITLE> Способы начертания текста</TITLE>

</HEAD>

<BODY>

<CENTER>

<P>

обычный текст

<BR>

<B>полужирное начертание</B>

<BR>

<I>начертание курсивом</I>

<BR>

<U>подчёркнутый текст</U>

<BR>

<STRIKE>перечёркнутый текст</STRIKE>

<BR>

<STRONG>текст с усиленным выделением</STRONG>

</P>

</CENTER>

</BODY>

</HTML>

Здесь создан один абзац, а для перевода текста на новую строку используется одинарный тег <BR>. Выравнивание всех элементов Web-страницы по центру осуществляется с помощью парного тега <CENTER> … </CENTER>.

Списки

Для выделения логических элементов текста и усиления зрительного эффекта используются списки. В Web-страницах применяются нуме-
рованные и маркированные списки, отличаются они лишь способом оформления. Перед каждым пунктом маркированных списков ставятся графические элементы (точки, ромбики и другие маркеры). Пунктам нумерованных списков предшествуют цифры или буквы.

Нумерованные списки

Для создания нумерованного списка используется комбинация двух парных тегов. Тег <OL> … </OL> определяет начало и конец нуме-рованного списка, а отдельные пункты списка задаются с помощью тега <LI> … </LI>.

Пункты нумерованного списка могут быть обозначены арабскими цифрами, большими или маленькими римскими цифрами, прописными или строчными буквами латинского алфавита.

По умолчанию все элементы нумерованного списка задаются араб-скими цифрами (1, 2, 3 и т.д.). Для изменения типа нумерации служит атрибут TYPE тега <OL>. Атрибут TYPE может принимать следующие значения:

- TYPE="1" – арабские цифры;

- TYPE="I" – римские большие цифры;

- TYPE="i" – римские маленькие цифры;

- TYPE="A" – прописные буквы латинского алфавита;

- TYPE="a" – строчные буквы латинского алфавита.

Список, нумерованный прописными латинскими буквами, показан на рис. 3.5.

Рис. 3.5. Нумерованный список

HTML-код, соответствующий приведенной на рис. 3.5 странице, должен выглядеть следующим образом:

<HTML>

<HEAD>

<TITLE> Нумерованный список</TITLE>

</HEAD>

<BODY>

<P> <B> Филиалы ЧИУП: </B> </P>

<OL TYPE="A">

<LI> Борисов </LI>

<LI> Молодечно </LI>

<LI> Бобруйск </LI>

<LI> Светлогорск </LI>

</OL>

</BODY>

</HTML>

Маркированные списки

Маркированные списки формируются с помощью комбинации двух парных тегов. Отдельные пункты списка задаются с помощью тега <LI> … </LI>, а начало и конец маркированного списка определяются с помощью тега <UL> … </UL>.

Пункты маркированного списка могут быть обозначены с помощью трёх различных маркеров: закрашенного кружка, незакрашенного кружка, закрашенного квадрата.

По умолчанию все элементы маркированного списка обозначаются
с помощью закрашенного кружка. Для изменения типа маркеров служит атрибут TYPE тега <UL>. Атрибут TYPE может принимать следующие значения:

- TYPE="disc" – закрашенный кружок;

- TYPE="circle" – незакрашенный кружок;

- TYPE="square" – закрашенный квадрат.

Список, маркированный закрашенными квадратами, показан на
рис. 3.6.

Рис. 3.6. Маркированный список

HTML-код, соответствующий приведенной на рис. 3.6 странице, дол-жен выглядеть следующим образом:

<HTML>

<HEAD>

<TITLE> Маркированный список</TITLE>

</HEAD>

<BODY>

<P> <B> Факультеты ЧИУП: </B> </P>

<UL TYPE="square">

<LI> Факультет менеджмента </LI>

<LI> Учетно-экономический факультет </LI>

<LI> Юридический факультет </LI>

<LI>Отделение заочного обучения </LI>

</UL>

</BODY>

</HTML>

Бегущая строка

Бегущая строка – это анимационный эффект, при котором строка текста перемещается по странице. Текст может перемещаться как влево, так и вправо. Для создания бегущей строки используется парный тег:

<MARQUEE> … </MARQUEE>.

Между открывающим и закрывающим тегами записывается текст бегущей строки. Атрибуты тега, приведенные в табл. П 1, задают пара-метры перемещения текста. Запись тега в виде:

<MARQUEE DIRECTION = "RIGHT" LOOP ="INFINITE"

HEIGHT = "6O" BGCOLOR = "YELLOW">

ПОСТУПАЙТЕ В ЧИУП

</MARQUEE>

означает, что предложение ПОСТУПАЙТЕ В ЧИУП является бегущей строкой высотой (HEIGHT) 60 пикселей, перемещаемой вправо (RIGHT) бесконечное число раз (INFINITE) на желтом фоне (YELLOW).

Специальные символы

Для добавления в текст специальных символов используется числовой или именной код. В обоих случаях код символа начинается с символа амперсанда (&), за которым следует числовой или именной код (сокра-щенное имя).

Коды некоторых специальных символов приведены в табл. 3.2. Добавляется специальный символ как обычный текст. Например, если необходимо в абзаце текста сформировать предложение:

Охраняемый торговый знак — ®,

то следует записать

<Р> Охраняемый торговый знак &#151 &#174 </Р>.

Таблица 3.2

Коды специальных символов

Символ	Числовой код	Именной код	Описание
	&#160	&nbsp	Неразрывный пробел
"	&#34	&quot	Прямые двойные кавычки
&	&#38	&amp	Амперсанд
?	&#8364	&euro	Евро
£	&#163	&pound	Фунт стерлингов
¢	&#162	&cent	Цент
§	&#167	&sect	Параграф
©	&#169	&copy	Авторское право
®	&#174	&reg	Охраняемый торговый знак
™	&#8482	&trade	Знак торговой марки
º	&#176	&deg	Градус
|	&#124		Вертикальная черта
—	&#151		Длинное тире

 

ГРАФИЧЕСКИЕ ОБЪЕКТЫ

Горизонтальные линии

Размещение на Web-странице горизонтальных линий осуществляется с помощью одинарного тега <HR>. С помощью атрибутов SIZE, WIDTH,COLOR и ALIGN изменяются соответственно толщина, ширина, цвет и способ выравнивания линий.

Рассмотрим несколько примеров, поясняющих размещение гори-зонтальных линий:

1. <HR> - горизонтальная линия на всю страницу толщиной 2 пикселя.

2. <HR COLOR = "GREEN" SIZE = "15"

WIDTH = "200" ALIGN="RIGHT"> – горизонтальная линия зеленого цвета толщиной 15 пикселей, шириной 200 пикселей и вырав-ниванием по правому краю.

3. <HR COLOR = "BLUE" SIZE = "25"> – горизонтальная линия синего цвета на всю страницу толщиной 25 пикселей.

4. <HR COLOR = "RED" SIZE = "20"

WIDTH = "300" ALIGN = "LEFT"> – горизонтальная линия красного цвета толщиной 20 пикселей, шириной 300 пикселей и выравниванием по левому краю.

Отображение линий для четырех записанных примеров показано на рис. 4.2.

 

Рис. 4.2. Линии на Web-странице

ТАБЛИЦЫ

Создание таблиц

Создание таблицы осуществляется с помощью парного тега <TABLE> … </TABLE >. Этот тег создает таблицу в том месте, где он добавлен
в коде HTML.

Любая таблица состоит из строк, а строки – из ячеек. Для фор-мирования строк и ячеек таблицы используются следующие теги:

<TR>... </TR> – новая строка;

<TH>... </TH> – ячейка заголовка;

<TD>... </TD> – обычная ячейка таблицы.

Эти теги записываются внутри парного тега <TABLE> … </TABLE >.

Формирование таблицы происходит по строкам – вначале задается одна строка и в ней указывается необходимое количество ячеек, затем вторая строка и т.д.

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

<HTML>

<HEAD>

<TITLE> Страница с таблицей </TITLE>

</HEAD>

<BODY>

<TABLE BORDER="1">

<TR>

<TH> Автомобили </TH> <TH> Цена </TH>

</TR>

<TR>

<TD> Форд </TD> <TD> 5000 </TD>

</TR>

<TR>

<TD> Гольф </TD> <TD> 6000 </TD>

</TR>

</TABLE >

</BODY>

</HTML>

 

Рис. 5.1. Страница с таблицей

Текст в ячейках заголовков таблицы (рис. 5.1) отображается полу-жирным шрифтом с выравниванием по центру ячейки, а в обычных ячейках текст не выделяется и выравнивается по левому краю.

Следует отметить, что в HTML-коде приведенной страницы тег <TABLE> содержит атрибут BORDER со значением "1". Это означает, что в таблице, приведенной на рис. 5.1, толщина внешней границы равна
1 пикселю. Если записать

<TABLE BORDER = "6"> … </TABLE >,

то толщина внешней границы будет равна 6 пикселям. Чтобы границы таблицы не отображались, необходимо атрибуту BORDER присвоить значение, равное 0, или просто этот атрибут опустить.

ГИПЕРССЫЛКИ

Графические гиперссылки

Графические гиперссылки создаются с помощью парного тега <A>…</A>. Внутри этого тега записывается одинарный тег размещения изображения <IMG>, а именно:

<A HREF="Адрес"> <IMG SRC="Адрес графического файла"> </A>.

адрес перехода по гиперссылке графическая гиперссылка

Для того чтобы изображение (файл Институт.jpg), показанное на рис. 6.6, было графической гиперссылкой на Web-страницу Образова-ние.htm, необходимо записать следующий код:

<HTML>

<HEAD>

<TITLE> Графическая гиперссылка </TITLE>

</HEAD>

<BODY>

<P ALIGN = "CENTER">

<A HREF=" Образование.htm ">

<IMG SRC = " Институт.jpg " HEIGHT = "250" WIDTH = "350">

</A>

</Р>

</BODY>

</HTML>

Здесь высота (HEIGHT) графической гиперссылки установлена равной
250 пикселей, а ширина (WIDTH) – 350 пикселей. Если Web-страница будет открыта в Internet Explorer, то графическая гиперссылка будет выделена рамкой (рис. 6.6).

Если необходимо, чтобы изображение (рис. 6.6) было графической гиперссылкой на Web-сайт ЧИУП, то следует записать:

<A HREF="http://www.imb.by">

<IMG SRC = " Институт.jpg " HEIGHT = "250" WIDTH = "350">

</A>

Рис. 6.6. Графическая гиперссылка

Фреймы

Понятие и типы фреймов

Фреймы (называемые часто рамками) делят пространство Web-страницы на независимые разделы, в которых могут отображаться данные из нескольких HTML-документов. Наборы фреймов (рамок) создаются
в HTML-документе особого рода, структура которого отличается от обычной. Вместо основного раздела (тела документа), задаваемого тегами <BODY> … </BODY>, используется раздел, обозначенный парным тегом <FRAMESET> … </FRAMESET>.

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

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

Прежде чем принять решение об использовании фреймов на стра-ницах своего сайта, необходимо чётко понимать их достоинства и не-достатки.

Достоинства фреймов заключаются в следующем:

1. Можно в пределах одного окна одновременно отображать инфор-мацию из различных источников.

2. Используя фреймы, можно постоянно отображать какую-нибудь информацию (например, логотип), не включая ее в каждую страницу сайта.

3. Можно гибко построить навигацию (переходы) по сайту.

Отметим недостатки фреймов:

1. Рабочая область Web-страницы уменьшается.

2. При низком разрешении экрана монитора уменьшаются физии-ческие размеры фреймов и в рабочее окно выводится меньший объём информации.

3. Некоторые поисковые системы и каталоги пока отказываются регистрировать страницы, использующие фреймы.

Создание фреймов

Для создания Web-страницы, разделённой на фреймы, нужно воспользоваться тегами <FRAMESET> и <FRAME>.

С помощью парного тега <FRAMESET> … </FRAMESET> форми-руется набор фреймов, которые делят страницу на строки и столбцы,
а также задаются различные настройки их отображения в окне браузера. Для этих целей используются различные атрибуты данного тега.

Тег <FRAMESET> обязательно должен содержать атрибуты COLS (набор вертикальных рамок) или (и) ROWS (набор горизонтальных рамок), определяющие способ разбиения документа. В случае использования атрибута COLS страница разбивается на вертикальные области (фреймы),
а в случае использования ROWS – на горизонтальные. Если заданы оба атрибута, то создается сетка фреймов. Значения этих атрибутов – это перечисленные через запятую размеры отдельных фреймов. Значения атрибутов COLS и ROWS могут быть заданы в пикселях или в процентах от общей площади окна. Например:

<FRAMESET COLS="60%, 40%">,

где первая вертикальная рамка составляет 60%, а вторая – 40% от общей площади окна.

Послед­няя область может быть указана с помощью символа «*», определяющего, что ей выделяется все оставшееся пространство. Запись тега

<FRAMESET ROWS="40%, 40%,*">

означает, что создаются три горизонтальных фрейма, два из которых занимают по 40% общей площади окна, а третий – 20%.

Атрибут BORDER тега <FRAMESET> даёт возможность изменять толщину линий, обрамляющих фрейм. По умолчанию браузер заключает фрейм в рамку, равную 6 пикселям.

Установки атрибутов COLS и ROWS сами по себе не создают рамки. Для создания индивидуальной рамки используется одинарный тег <FRAME>, который записывается внутри парного тега <FRAMESET> … </FRAMESET>. Количество тегов <FRAME> должно соответствовать числу рамок, заданному с помощью атрибутов COLS и ROWS.

Тег <FRAME>, в свою очередь, должен содержать обязательный атрибут SRC, с помощью которого указывается, какой документ перво-начально загружается в соответствующую область. Значение этого атри-бута – это адрес нужного документа.

Среди прочих атрибутов следует отметить атрибут NAME, с по-мощью которого можно задать «имя» созданной области. Для загрузки
в рамку с именем Фокус текста из файла text.htm следует записать следующий тег:

<FRAME SRC=" text.htm " NAME=" Фокус ">.

Имя созданной области можно использовать для загрузки новых документов в эту область. Для этого в тег <А>, определяющий гипер-ссылку, необходимо добавить атрибут TARGET (цель), значение которого совпадает с ранее определенным именем области. При переходе по данной гиперссылке новый документ загрузится в указанный фрейм.

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

Пользователь может перемещать границы фрейма, задавая новые размеры областей, чтобы лучше рассмотреть определенный фрагмент данных. Для запрещения изменения границ фрейма применяется атрибут NORESIZE. Если фреймы лишены видимых границ, это автоматически влечет запрет и на изменение их размеров. Для скрытия границ фрейма служит атрибут FRAMEBORDER. Цвет границ можно изменить при помощи атрибута BORDERCOLOR.

По умолчанию браузер отображает фреймы с полосой чистого пространства (полями) между текстом и границей фрейма, равной
10 пикселям. Атрибут MARGINWIDTH позволяет задавать ширину левого и правого полей, а атрибут MARGINHEIGHT – высоту верхнего и нижнего полей. Задавая величины полей, надо использовать оба атрибута, так как браузер может автоматически сократить размеры тех полей, которые не были указаны, до наименьшего значения. Пример Web-страницы, создан-ной с использованием фреймов, можно увидеть на рис. 7.1.

 

Рис. 7.1. Пример Web-страницы с использованием фреймов

HTML-код страницы, представленной на рис. 7.1, имеет вид:

<HTML>

<HEAD>

<TITLE>Фреймы</TITLE>

</HEAD>

<FRAMESET FRAMEBORDER="YES" ROWS="50,*">

<FRAME SCROLLING="YES" NORESIZE

SRC="Страница 1.htm" NAME="1">

<FRAMESET COLS="150,*">

<FRAME SCROLLING="YES" NORESIZE

SRC="Страница 2.htm" NAME="2">

<FRAME SCROLLING="YES" NORESIZE

SRC="Страница 3.htm" NAME="3">

</FRAMESET>

</FRAMESET>

</HTML>

В приведенном примере стр