Руководство по программированию на HTML

HTML 1. Web-страницы. Основные понятия Web-страница является элементарной частью Всемирной Паутины World Wide Web, www. WWW, в свою очередь, одна из возможностей компьютерной сети Internet, связывающей компьютеры по всему миру. Вся информация www хранится в виде отдельных документов. В основе каждого такого документа лежит текст, который может быть оформлен различными шрифтами, стилями и т. п. В тексте могут быть помещены иллюстрации, таблицы, видео-клипы, также возможно добавление фоновой

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

Содержимое web-страниц часто называют гипертекстом. Набор страниц, объединнных общей тематикой, называется сайтом web site. Обычно весь сайт целиком хранится на одном компьютере сети, называемом web-сервером. Довольно часто серверы содержат несколько сайтов. У каждого объекта, к которому можно получить доступ через

Internet в частности, у сайтов и отдельных web-страниц имеется свой адрес в сети, который называется иначе унифицированным адресом ресурса Uniform Resource Locator, URL. Рассмотрим пример адреса для web-сайта httpwww.uni-vologda.ac.ru сайт ВГПУ. Первая часть адреса http название протокола, по которому нужно производить передачу данных по Сети. Протокол набор правил, которые определяют, в каком виде данные должны передаваться по сети.

Для разных видов данных используются разные протоколы. В случае web-страниц применяется протокол передачи гипертекста HyperText Tranfer Protocol, HTTP. Для передачи произвольных файлов по Сети используется протокол передачи файлов File Transfer Protocol, FTP. Существуют и другие протоколы Gopher,

Telnet и т. д За именем протокола в адресе следует собственно адрес, который лучше читать справа налево. Часть ru означает, что сайт находится в России, она называется доменом группа сайтов первого уровня. Домен 1-ого уровня может быть географическим ru Россия, us США, uk Великобритания, ger Германия, ua Украина и т. п. или тематическими com коммерческий сайт, edu образование, gov правительство, net сетевые службы, mil военное дело и оборона и т. п

Внутри домена первого уровня находится домен второго уровня, в нашем случае ac это значит, что сайт имеет отношение к образованию и науке. В принципе возможны домены третьего и более высоких уровней. Слева в адресе содержится название самого сайта uni-vologda. Иногда, для того чтобы подчеркнуть то, что адрес относится к Всемирной Паутине, добавляют часть www. Для просмотра web-страниц используются специальные программы,

называемые браузерами web browser. Они позволяют загружать из Сети для просмотра страницы с заданным адресом и переходить от документа к другому по гиперссылкам. Наиболее известными являются браузеры Netscape Navigator фирмы Netscape и Internet Explorer фирмы Microsoft. 2. Понятие языка HTML Наша цель состоит в том, чтобы научиться создавать собственные страницы для

WWW. Для этого придтся познакомиться с правилами, в соответствии с которыми страницы хранятся на диске компьютера. Любая страница представлена в виде отдельного текстового файла, который можно создать любым текстовым редактором. Так как страница может содержать не только текст, но и множество других элементов шрифтовое оформление текста, иллюстрации и т. п то в текст встраиваются специальные управляющие конструкции, называемые тегами. Весь набор правил, по которым нужно создавать файл с web-страницей и записывать

отдельные теги, называется языком разметки гипертекста HyperText Markup Language, HTML. Браузеры при открытии файла в формате HTML способны расшифровать теги и показать страницу в свом окне так, как она была задумана создателем. В операционной системе Windows файлы web страниц должны иметь расширения htm или html. При обучении правилам HTML нет необходимости помещать наши страницы на действующий сайт в

Internet, достаточно хранить их в виде файлов на конкретной рабочей станции или на сервере локальной сети. 3. Структура файла в формате HTML В первую очередь нам потребуется создать файл с расширением htm или html и открыть его для редактирования в текстовом редакторе работая под Windows, можно использовать стандартную программу Блокнот. Текст для HTML-документа набирается в том виде, в котором его должен показать браузер, а при выделения

фрагментов, которые предназначены для разметки документа тегов, используются угловые скобки знаки больше и меньше, например BODY . Любой документ HTML начинается с открывающего тега HTML и заканчивается соответствующим ему закрывающим тегом html . Закрывающий тег отличается от закрывающего наличием косой черты перед названием тега. В языке HTML нет различий между большими и малыми буквами при записи тегов, однако принято записывать

открывающий тег большими буквами, а закрывающий малыми. Часть документа, которая находится в пределах от открывающего до соответствующего ему закрывающего тега, называется контейнером to contain содержать что-либо. Теги, у которых есть закрывающий и открывающий варианты записи называются парными, а те, которые используются только в одном виде например, тег BR , называются непарными.

Весь файл web-страницы это по сути дела один большой контейнер HTML так как начинается с HTML и заканчивается html . Внутри контейнера HTML последовательно записываются два контейнера 1. HEAD head заголовок документа. Внутри этого контейнера записываются параметры, общие для всей страницы. Для примера можно поместить сюда контейнер TITLE , позволяющий поместить текст для отображения в заголовке

окна браузера. 2. BODY body тело документа. Этот контейнер содержит вс то, что должен показать браузер внутри своего окна при открытии документа. Если документ содержит только текст, то этот текст нужно записывать именно здесь, если есть другие элементы графика, таблицы, ссылки и т. д то они вставляются в текст с помощью тегов, которые будут рассмотрены позже. Рассмотрим простейший пример текста, который может быть использован в качестве

HTML-документа HTML HEAD TITLE Самая простая web-страница title head BODY То, что вы сейчас читаете в окне браузера, записано в контейнере BODY внутри HTML-файла. body html 4. Способы оформления текста в HTML В первую очередь, отметим несколько особенностей поведения большинства браузеров при отображении текста, набранного внутри контейнера BODY. 1. Пробелы между словами в количестве более одного заменяются

одним пробелом 2. Символы перехода на новую строку игнорируются, а точнее заменяются пробелом. Браузер выполняет перевод строки автоматически в тот момент, когда строчка достигает правого края окна. 3. Если есть необходимость вставить в каком-либо месте в тексте принудительный перевод на новую строку, то можно использовать непарный тег BR . Он разрывает текущую строку, а текст, следующий за этим местом в HTML-файле, продолжает с новой строки. 4. Кроме тега разрыва строки имеется тег начала нового абзаца,

P от слова paragraph абзац. Отличие его от BR состоит в том, что тег абзаца кроме разрыва строки вставляет новую пустую строку. Обычно он используется как непарный, хотя не запрещено ставить в конце абзаца закрывающий тег p . 5. Если нужно сохранить все пробелы и символы перевода строки, которые записаны в HTML-файле, то соответствующую часть текста можно поместить в контейнер PRE pre . 4.1. Логические стили для оформления текста

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

Ниже перечислены некоторые стили. 1. Контейнер H1 h1 . Сюда помещают те фразы, которые служат заголовками первого уровня, то есть, наиболее важные заголовки например названия глав в книге. Внешне они чаще всего выглядят как текст увеличенного размера и полужирного начертания. Кроме этого контейнера есть и контейнеры H2, H3, H6, позволяющие использовать ещ пять уровней заголовков.

2. ADDRESS address . Этот контейнер позволяет особо оформить адрес почтовый, адрес сайта, электронной почты и т. д 3. Контейнеры STRONG усиленное выделение и EM от англ. emphasis акцент. Сюда помещают текст, содержащий важные мысли, термины и т. п. Стиль STRONG обычно отображается браузерами с использованием полужирного начертания, а EM курсивом. 4. Для записи текстов программ и текста, введнного с клавиатуры, можно использовать три

контейнера CODE код программы, SAMP sample пример и KBD keyboard клавиатура. Все они могут отображаться по-разному, но общее у них использование моноширинного шрифта например, Courier, все буквы в котором имеют одинаковую ширину. Такой шрифт позволяет разным строчкам не смещаться относительно друг друга, символы с одинаковым номером в строке всегда находятся на одной вертикальной прямой.

5. Возможно выделение текста с помощью уменьшенного и увеличенного шрифтов, для этого применяются контейнеры BIG и SMALL. 6. Если фрагмент текста должен быть показан как верхний индекс, то для его выделения используется контейнер SUP, а для нижнего индекса SUB. Например, для того, чтобы записать yx2, потребуется в HTML-текст поместить такую строчку yx SUP 2 sup . 4.2. Физические стили В отличие от логических, эти стили не оформляют текст по его назначению, а указывают

внешний вид символов, отображаемых браузером 1. Курсив. Текст, который должен быть выделен курсивом, помещается в контейнер I i . 2. Полужирный контейнер B b . 3. Подчркнутый U u . 4. Зачркнутый S s . 5. Шрифт пишущей машинки моноширинный TT tt . Если требуется применить к тексту сразу два физических стиля, то можно один контейнер вложить

в другой, например B I Полужирный курсив i b . 4.3. Горизонтальное выравнивание текста По умолчанию браузеры выравнивают текст по левому краю окна. Иногда, тем не менее, требуется поместить фрагмент текста по центру или по правому краю окна. В первом случае для центрирования текста или других объектов достаточно поместить фрагмент внутрь контейнера CENTER. Если нужно указать левое или правое выравнивание, то можно использовать дополнительные возможности

тега P , например P ALIGNRIGHT Правое выравнивание p . Здесь дополнительный элемент ALIGN тега P называется атрибутом, а RIGHT значением атрибута. Вообще говоря, теги могут содержать несколько атрибутов, разделнных пробелами, бывают атрибуты без значений например FRAME SRCf1.html NORESIZE , в этом теге есть атрибут NORESIZE, для которого не требуется значение.

Кроме значения RIGHT у атрибута ALIGN есть, очевидно, и значение LEFT. Установленное в теге P выравнивание будет действовать на протяжении всего абзаца, до тех пор, пока не встретится тег p или следующий тег P . Атрибут ALIGN поддерживается не только для тега абзаца, но и для тегов всех шести заголовков H1 , H6 , в результате заголовок будет выровнен по вашему желанию.

Его действие распространяется только до соответствующего закрывающего тега h1 , h6 . 4.4. Управление размером шрифта На нашем уровне владения языком HTML возможно управление размером букв только с использованием заголовков разного уровня, однако существует возможность указывать размер шрифта явным образом. В HTML размер текста задатся целым числом от 1 до 7 1 самый мелкий,

7 самый крупный. По умолчанию основной текст страницы имеет размер 3. Для того чтобы задать другой основной размер, нужно использовать тег BASEFONT . В атрибуте SIZE этого тега указывается новый размер основного шрифта. Такой размер будет установлен для текста, находящегося после тега BASEFONT . Пример BASEFONT SIZE5 Это текст размера 5.

При необходимости можно для части текста заказать другой размер шрифта с помощью тега FONT у которого также есть атрибут SIZE. Этот тег может использоваться и как парный тогда размер будет применн до закрывающего тега font , и как непарный размер применяется до следующего тега FONT или BASEFONT . Отличие тега FONT от BASEFONT состоит в следующем в атрибуте SIZE тега FONT можно указывать увеличение или уменьшение размера шрифта относительно размера основного

текста страницы. Для этого используются знаки и Например, запись FONT SIZE2 значит установить размер шрифта на 2 больше основного, а FONT SIZE-1 означает на 1 меньше. 4.5. Управление цветом и гарнитурой шрифта Кроме размера шрифта тег FONT позволяет задать цвет символов и выбрать гарнитуру то есть способ начертания букв из числа установленных в операционной системе вариантов.

Для этого используются атрибуты COLOR и FACE. В качестве значения для атрибута COLOR можно указывать 1. Одно из стандартных названий цвета в кавычках, а именно BLACK, NAVY, SILVER, BLUE, MAROON, PURPLE, RED, FUCHSIA, GREEN, TEAL, LIME, AQUA, OLIVE, GRAY, YELLOW, WHITE 2. Числовой код цвета, состоящий из интенсивностей трх цветов красного, зелного и синего.

Он задатся в следующем виде COLORRRGGBB, где вместо букв RR, GG и BB нужно записывать количество красной, зелной и синей краски соответственно. Эти количества записываются в виде шестнадцатеричных чисел от 00 до FF в десятичной системе это интервал от 0 до 255. Например, если нужно получить оранжевый цвет текста, можно указать COLORFF8000. В качестве значений для атрибута

FACE в кавычках указывают название шрифта, например FACEArial Cyr. Пример использования известных нам атрибутов тега FONT FONT FACEDecor SIZE5 COLORNavy ТЕКСТ font . 4.6. Управление разбиением текста на строки Как нам уже известно, браузер автоматически переносит текст на новую строку, как только текст достигнет правого края окна.

Для того чтобы досрочно сделать перенос строки мы можем использовать теги BR или P . В некоторых случаях предпочтительнее позволить тексту выйти за пределы видимой части окна, чем позволить ему оказаться в разных строках. Чтобы запретить автоматический переход на новую строку нужно поместить соответствующий фрагмент текста в контейнер NOBR. Внутри этого контейнера можно указать те места, в которых вс-таки можно перейти на новую строку,

это делается с помощью тега WBR . Пример использования NOBR и WBR NOBR Этот текст не может быть разбит браузером на строки автоматически. Мы разрешим ему сделать перенос только после этого предложения. WBR А этот фрагмент также запрещено разрывать nobr . 4.7. Вставка специальных символов в документ HTML

Некоторые символы невозможно показать в окне браузера, просто набрав их в текстовом редакторе. К ним относятся, например знаки и , поскольку их браузер считает символами начала и конца тегов. Если вс-таки возникла необходимость показать такие специальные символы, то их заменяют такой последовательностью сначала пишут знак амперсанда , затем буквенное обозначение спецсимвола, а в конце точку с запятой. Для знаков и используются буквенные обозначения lt и gt less than больше, чем greater than больше,

чем . Например если нужно показать в браузере A B, то в тексте HTML будем записывать A B. Понятно, что символ также невозможно записать напрямую, вместо этого записывают . Для записи двойной кавычки используется код quot. Существует много специальных символов, которые невозможно набрать с клавиатуры в частности, буквы из других алфавитов, их коды можно найти в справочной литературе.

5. Списки Довольно часто в тексте html-документа приходится перечислять какие-либо объекты или давать определения понятий. В таких случаях можно пользоваться средствами HTML для организации списков. Списки существуют не только в языке HTML, но и во многих текстовых редакторах. В HTML имеется 3 вида списков 1. Нумерованный список. Каждый элемент такого списка имеет номер, который браузер проставит автоматически.

По умолчанию первый элемент списка имеет номер 1, второй 2 и т.д. Для вставки нумерованного списка нам потребуется контейнер OL ordered list нумерованный список, внутри которого можно перечислять элементы списка. Перед тем как записывать очередной элемент списка, нужно вставлять непарный тег LI list item элемент списка. Общая структура списка имеет такой вид

OL LI Первый элемент LI Второй элемент LI Последний элемент ol Простейший пример нумерованного списка на web-странице можно найти в файле ListsOL1.html. Для нумерованных списков возможна настройка способа нумерации элементов. Кроме арабских цифр можно использовать римские, а также большие или малые латинские буквы. Для указания способа нумерации используется атрибут

TYPE тега OL . Этот атрибут может принимать одно из четырх значений 1 арабские цифры, i или I римские цифры, a малые латинские буквы, A большие латинские буквы. Пример использования атрибута TYPE имеется в файле ListsOL2.html. При необходимости можно начинать нумерацию элементов списка не с 1, а с произвольного номера. Чтобы указать начальный номер в списке, используют атрибут

START тега OL , например OL TYPE1 START5 первый номер 5. Этот атрибут работает только в случае нумерации арабскими цифрами. 2. Маркированный список. Иногда нумерация бывает не важна, но выделить для читателя отдельные элементы списка необходимо. В этом случае перед каждым элементом списка ставится небольшой значок маркер, обычно это круг, квадрат и т. п. Такие списки создаются с помощью контейнера

UL unordered list ненумерованный список, внутри которого также как для нумерованных списков перечисляются элементы с помощью тегов LI . Тип маркера указывается в атрибуте TYPE тега UL . Возможно 3 вида маркеров DISC круг, CIRCLE окружность, SQUARE квадрат. При необходимости можно заказать для отдельного элемента списка маркер, отличающийся от других. Для этого атрибут TYPE нужно применять в теге

LI перед соответствующим элементом списка. Примеры маркированных списков находятся в файле ListsUL.html. 3. Списки определений. Этот вариант применяется в том случае, когда каждый элемент списка состоит из двух частей термина понятия и т. п. и его определения расшифровки. Для вставки списка определений используется контейнер DL definition list список определений. Каждый элемент записывается с использованием двух тегов

DT Термин DD Его определение. Пример списка определений можно найти в файле ListsDL.html. 6. Гипертекстовые ссылки Главная особенность web-страниц состоит в том, что любая из них может позволить перейти к другой странице, находящейся на том же компьютере или в Интернет. Выглядит это следующим образом фрагмент документа текст, картинка или другой объект выделяется особым образом при просмотре страницы можно, щлкнув мышью по этому фрагменту заставить браузер загрузить

другую страницу, адрес которой записывается в тексте HTML-документа. По этой причине содержимое страниц называется гипертекстом. Для выделения фрагмента, являющегося ссылкой, используется контейнер A от слова anchor якорь. Наиболее важный атрибут тега A это HREF, в качестве значения которого записывается адрес страницы, на которую нужно перейти.

Ниже приведн пример вставки гиперссылки A HREFhttpuni-vologda.ac.ru Щлкните сюда, чтобы перейти на главную страницу web-сайта ВГПУ a В качестве адреса в атрибуте HREF записывается либо полный URL сайта или страницы, либо имя файла, содержащего страницу, если она лежит на том же компьютере, что и исходная. Если страница лежит на том же компьютере, в том же каталоге, что и просматриваемая, то в

HREF достаточно указать имя файла. Если же она лежит в другом каталоге, то вместо имени протокола пишут file, а затем полный путь к файлу и его имя. Примеры HREFmain.html, HREFfilecWebPagesBookcontents.htm. Иногда страницы могут оказаться довольно большими, и для поиска нужной информации потребуется много времени. В таких случаях разумно делать ссылки в пределах одного документа.

Пусть, например, в формате HTML опубликована целая книга, тогда е содержание можно выполнить в виде ссылок, щлкнув по нужной ссылке можно быстро перейти к началу интересующей нас главы или части книги. Чтобы сделать ссылку в пределах одного документа потребуется два шага 1. Отмечаем то место в документе, на которое позже сделаем ссылку устанавливаем якорь. Для этого вставляем в нужное место тег A с атрибутом

NAME. В качестве значения этого атрибута записываем в кавычках имя для того места, которое мы хотим отметить лучше латинскими буквами. В дальнейшем браузер по имени будет искать позицию, на которую указывала ссылка. Тег a можно поставить сразу за открывающим тегом контейнер в этом случае будет пустым, а можно поместить перед закрывающим тегом какой-либо фрагмент документа, с ним и будет связано имя, указанное в атрибуте NAME. Пример A NAMEChapter15 2. При добавлении ссылки на якорь, установленный в п.

1, в атрибуте HREF в кавычках пишут знак , за которым следует имя якоря, например A HREFChapter15 Глава 15 a . 7. Использование графики в HTML-документах Для того чтобы способы помещения иллюстраций на web-страницы были более понятны, эта часть была оформлена в html-формате см. файлы GraphicsGraphics.html и GraphicsGraphics2.html. 8. Управление видом документа в целом

Здесь мы рассмотрим возможности тега BODY для настройки цветов, используемых в документе, а также фоновых изображений. Вс это задатся с помощью различных атрибутов тега. 1. Атрибут TEXT задат цвет для всего текста документа, используемый по умолчанию. Цвет, как уже говорилось, может задаваться как названием red, yellow, teal и т. п так и числовым кодом RRGGBB. 2. Атрибут LINK позволяет установить цвет для текстовых гиперссылок.

3. VLINK цвет просмотренных текстовых гиперссылок. 4. BGCOLOR цвет фона всей страницы. 5. В атрибуте BACKGROUND указывается URL графического файла, который будет использован в качестве фонового изображения. Если размеры рисунка меньше размеров страницы, то он будет автоматически размножен браузером. 9. Таблицы 9.1. Основные теги Иногда на web-странице требуется отображать какие-либо данные в виде

таблиц. Как нам уже известно, для вставки объектов, более сложных чем обычный текст, требуется использовать специальные теги например IMG , OL и т. п Это правило касается также и таблиц вс то, что должно быть показано в виде таблицы, помещается в контейнер TABLE. Рассмотрим подробнее содержимое контейнера TABLE 1. У таблицы может быть название, которое располагается ниже или выше самой таблицы.

Для вставки названия сразу после тега TABLE записывают контейнер CAPTION , внутри которого пишут название таблицы. Расположение названия выше или ниже таблицы указывается с помощью атрибута ALIGN тега CAPTION, значениями которого могут быть TOP сверху или BOTTOM снизу. Пример TABLE CAPTION ALIGNBOTTOM Таблица 1 caption table 2. Данные для самой таблицы записываются после

CAPTION , если таковой имеется. Таблица состоит из строк, а каждая строка состоит из отдельных ячеек, поэтому данные записываются в следующем виде TR Содержимое первой строки tr TR Содержимое второй строки tr TR Содержимое третьей строки tr Контейнер TR table row строка таблицы содержит данные для одной строки, а именно TD Ячейка 1 td TD Ячейка 2 td TD Ячейка 3 td Контейнер

TD table data данные таблицы содержит тест, графику или другие объекты, которые нужно поместить в конкретную ячейку. Если ячейка содержит текст, который является заголовком столбцы, то его можно выделить особо, используя вместо TD контейнер TH table header заголовок таблицы. Если какая-то ячейка должна выглядеть пустой, то в не нужно записать хотя бы пробел, в противном случае браузер автоматически удалит е со страницы. Простейший пример таблицы можно найти в файле

TablesT1.html. 9.2. Настройка размеров таблицы В примере T1.html, как нетрудно заметить, таблица выглядит непривычно, поскольку у не отсутствуют линии сетки. Для того чтобы их добавить, нужно указать атрибут BORDER в теге TABLE . Если дать этому атрибуту значение натуральное число, то таким способом будет установлена толщина внешней границы в точках, например TABLE BORDER12 .

Для установки ширины таблицы имеется атрибут WIDTH тега TABLE , в котором можно указать ширину двумя способами 1. Абсолютный в точках, размер таблицы не зависит от размеров окна браузера или настроек экрана. Пример TABLE WIDTH600 . 2. Относительный в процентах от ширины окна, например TABLE WIDTH80 . Кроме ширины всей таблицы можно настраивать ширину отдельных ячеек, используя атрибут

WIDTH тегов TD и TH . Ширина указывается либо в точках, либо в процентах от ширины таблицы. В теге TABLE можно настроить толщину внутренних линий сетки, используя атрибут CELLSPACING, значением которого является толщина в точках. Кроме того, возможна настройка размера отступов от линий сетки до содержимого ячейки также в точках, для этого используется атрибут CELLPADDING тега TABLE .

Пример таблицы с настройками различных размеров находится в файле TablesT2.html. 9.3. Настройка цвета фона для таблицы В HTML имеется возможность использовать в качестве цвета фона для ячеек таблицы цвет, отличающийся от фонового цвета всего документа. Для этого используется атрибут BGCOLOR, который можно использовать в теге TABLE фон для всей таблицы,

TR для одной строки, TD и TH для отдельной ячейки. Значение цвета задатся в уже известном нам виде указывается либо одно из стандартных названий, либо интенсивности трх составляющих цвета в виде RRGGBB. Пример таблицы с настройками цветов фона имеется в файле TablesT3.html. 9.4. Настройка вида содержимого ячеек таблицы

В примерах T1.html T3.html текст внутри ячеек всегда выровнен по левому краю. Изменить горизонтальное выравнивание можно при помощи атрибута ALIGN в тегах TR , TH и TD для строки или отдельной ячейки, соответственно. Значениями этого атрибута могут быть LEFT, RIGHT и CENTER. Кроме горизонтального выравнивания можно указать вертикальное выравнивание содержимого отдельных

ячеек. Для этого в теге TD или TH указывается атрибут VALIGN, значениями которого могут являться TOP, MIDDLE и BOTTOM. Пример использования атрибутов ALIGN и VALIGN можно найти в файле TablesT4.html. При помещении текста в ячейки таблицы происходит автоматический переход на новую строку. Если текст в какой-либо ячейке разрывать нельзя, то в соответствующем теге

TH или TD следует указывать атрибут NOWRAP не требует значения. Очевидно, что засчет этого возможно увеличение ширины соответствующего столбца. 9.5. Слияние нескольких ячеек Иногда соседние ячейки таблицы содержат одинаковые данные, в этом случае имеет смысл объединить их. Для того чтобы слить несколько соседних ячеек строки в одну, используют атрибут COLSPAN тега TD или TH , значением которого является число ячеек, подлежащих слиянию.

После такого контейнера пропускают несколько контейнеров TD или TH , поскольку данные объединнной ячейки уже записаны. В файле TablesT5.html приведн пример слияния двух ячеек с фамилией и именем в одну. Аналогичным образом можно объединить смежные ячейки в одном столбце. Для этого в теге TD или TH , соответствующем самой верхней из объединяемых ячеек, записывается атрибут

ROWSPAN, значением которого является количество объединяемых ячеек. В последующих строках теги TD или TH , соответствующие объединнной ячейке, не пишутся. Пример такого объединения ячеек приведн в файле TablesT6.html. При необходимости можно объединить прямоугольную область, состоящую из ячеек нескольких соседних строк и столбцов. Для этого потребуется одновременно использовать атрибуты

COLSPAN и ROWSPAN в одном теге TD или TH . Пример находится в TablesT7.html. 10. Фреймы 10.1. Основные сведения В этой части мы рассмотрим такую возможность языка HTML, как разбиение окна браузера на несколько частей, в которых отображаются разные HTML-документы. Окно браузера всегда разбиваются на прямоугольные кадры традиионно, они называются по-английски, фреймами. Внешне разбиение напоминает таблицу кадры выстраиваются в несколько строк, каждая

из которых содержит несколько прямоугольных ячеек, содержащих отдельные HTML-документы. Пример, который содержит 6 различных фреймов, можно увидеть в FramesF1.html. Для того чтобы разбить документ на несколько прямоугольников, вместо контейнера BODY нам потребуется записать контейнер FRAMESET набор фреймов. В теге FRAMESET нужно указать на сколько строк и столбцов разбивается вс окно браузера.

Это делается с помощью атрибутов ROWS строки и COLS столбцы. Заметим, что в этих атрибутах недостаточно указать количество строк и столбцов, требуются также их размеры, например в процентах от размеров окна. В примере FramesF1.html это сделано так FRAMESET ROWS50,50 COLS33,33,34 вс окно разбивается на две одинаковые строки и на три почти одинаковых столбца. Внутри контейнера

FRAMESET перечисляются HTML-документы, которые нужно поместить в кадры слева направо, сверху вниз. Это делается с помощью последовательных тегов FRAME . Самый важный атрибут тега FRAME это SRC, значением которого является URL документа, помещаемого в этот фрейм, например FRAME SRC1.html . Размеры фреймов в теге FRAMESET можно указывать не только в процентах.

Можно также указать из в частях, например FRAMESET ROWS, 2 COLS2 3 по высоте окно условно разбито на 3 части, первая строка кадров занимает две из них, вторая одну, по ширине имеется 6 условных частей, столбцы занимают, соответственно, 2, 1 и 3 части. Другой вариант указание размеров в точках, например COLS300,100,400. Возможно и смешанное указание размеров точки проценты, точки части, части проценты.

Можно, например, записать COLS200,30,70, что означает первый столбец всегда имеет ширину 200 точек, независимо от размеров окна, второй занимает 30 от оставшейся части ширины окна, а третий 70 от этого остатка. Примеры документов, использующих различные способы указания размеров, находятся в файлах FramesF2.html и FramesF3.html. 10.2. Управление внешним видом фреймов Внешний вид фреймов настраивается с помощью атрибутов тегов

FRAME и FRAMESET . Ниже перечисляются эти атрибуты и объясняется их назначение 1. BORDERCOLOR для FRAME и FRAMESET . Управляет цветом границы одного фрейма или всего набора фреймов. Значением является либо название стандартного цвета, либо числовой код RRGGBB. 2. BORDER для FRAMESET . Задат ширину всех границ, отделяющих фреймы друг от друга. Значение нужно указывать в точках. 3. NORESIZE для

FRAME . Этот атрибут не требует значения. Если он присутствует, то пользователь не может перемещать мышью границу соответствующего фрейма. 4. MARGINHEIGHT и MARGINWIDTH для FRAME . Позволяют указать в точках размеры отступов от горизонтальной и вертикальной границы фрейма до содержимого HTML-документа, лежащего внутри этого фрейма. 5. SCROLLING для FRAME . Когда документ HTML не помещается целиком в отведнный ему фрейм, для возможности

просмотра появляются полосы прокрутки фрейма. В атрибуте SCROLLING можно указать, показывать ли полосы прокрутки всегда значение YES, только когда документ не помещается во фрейм AUTO, или не показывать никогда NO. Примеры использования этих атрибутов есть в файлах FramesF4.html, FramesF5.html и FramesF6.html. 10.3.

Вложенные фреймы При желании можно добиться того, чтобы какой-либо фрейм вместо обычного HTML-документа содержал бы, в свою очередь, набор фреймов. Для этого достаточно вместо тега FRAME поместить контейнер FRAMESET , в который вложены теги FRAME . Пример такой раскладки фреймов можно увидеть в файле FramesF7.html. 10.3. Гиперссылки и фреймы HTML позволяет управлять работой гиперссылок так, чтобы документ,

на который указывает ссылка открывался не в целом окне, а только в одном фрейме см. пример FramesF8.html. Для того чтобы ссылки работали именно так, нужно выполнить два действия 1. Фрейму, в который в дальнейшем нужно помещать документ, найденный по ссылке, дают имя. Для этого используют атрибут NAME тега FRAME , например FRAME NAMEright . 2. При вставке ссылки в HTML-документ другого фрейма в теге

A указывают атрибут TARGET цель, значением его является имя фрейма, в который нужно поместить HTML-документ, указанный в HREF, например A HREF1.html TARGETright 1.html a . Кроме имн, которые можно давать собственным фреймам, существуют и стандартные имена, заранее известные браузеру, а именно self позволяет открывать документ по ссылке в том же фрейме, где находилась ссылка top открывает документ во вс окно, где находилась ссылка, разрушая при этом всю

структуру фреймов parent в родительском фрейме это не совсем то же самое, что top, поскольку фреймы бывают вложенными вся структура родительского фрейма разрушается blank в новом окне браузера старое окно содержащее ссылку при этом не уничтожается.