скачать рефераты
  RSS    

Меню

Быстрый поиск

скачать рефераты

скачать рефератыРеферат: Руководство по программированию на HTML

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

5. Списки

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

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

<OL>

<LI>Первый элемент

<LI>Второй элемент

<LI>Последний элемент

</ol>

Простейший пример нумерованного списка на web-странице можно найти в файле Lists\OL1.html.

Для нумерованных списков возможна настройка способа нумерации элементов. Кроме арабских цифр можно использовать римские, а также большие или малые латинские буквы. Для указания способа нумерации используется атрибут TYPE тега <OL>. Этот атрибут может принимать одно из четырёх значений: 1 — арабские цифры, i или I — римские цифры, a — малые латинские буквы, A — большие латинские буквы. Пример использования атрибута TYPE имеется в файле Lists\OL2.html.

При необходимости можно начинать нумерацию элементов списка не с 1, а с произвольного номера. Чтобы указать начальный номер в списке, используют атрибут START тега <OL>, например: <OL TYPE=1 START=5> (первый номер — 5). Этот атрибут работает только в случае нумерации арабскими цифрами.

2. Маркированный список. Иногда нумерация бывает не важна, но выделить для читателя отдельные элементы списка необходимо. В этом случае перед каждым элементом списка ставится небольшой значок (маркер), обычно это круг, квадрат и т. п. Такие списки создаются с помощью контейнера UL (unordered list — ненумерованный список), внутри которого также как для нумерованных списков перечисляются элементы с помощью тегов <LI>.

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

Примеры маркированных списков находятся в файле Lists\UL.html.

3. Списки определений. Этот вариант применяется в том случае, когда каждый элемент списка состоит из двух частей: термина (понятия и т. п.) и его определения (расшифровки). Для вставки списка определений используется контейнер DL (definition list — список определений). Каждый элемент записывается с использованием двух тегов: <DT>Термин<DD>Его определение. Пример списка определений можно найти в файле Lists\DL.html.

6. Гипертекстовые ссылки

Главная особенность web-страниц состоит в том, что любая из них может позволить перейти к другой странице, находящейся на том же компьютере или в Интернет. Выглядит это следующим образом: фрагмент документа (текст, картинка или другой объект) выделяется особым образом; при просмотре страницы можно, щёлкнув мышью по этому фрагменту заставить браузер загрузить другую страницу, адрес которой записывается в тексте HTML-документа. По этой причине содержимое страниц называется гипертекстом.

Для выделения фрагмента, являющегося ссылкой, используется контейнер <A> (от слова anchor — якорь). Наиболее важный атрибут тега <A> — это HREF, в качестве значения которого записывается адрес страницы, на которую нужно перейти. Ниже приведён пример вставки гиперссылки:

<A HREF="http://uni-vologda.ac.ru">Щёлкните сюда, чтобы перейти на главную страницу web-сайта ВГПУ</a>

В качестве адреса в атрибуте HREF записывается либо полный URL сайта или страницы, либо имя файла, содержащего страницу, если она лежит на том же компьютере, что и исходная. Если страница лежит на том же компьютере, в том же каталоге, что и просматриваемая, то в HREF достаточно указать имя файла. Если же она лежит в другом каталоге, то вместо имени протокола пишут «file://», а затем — полный путь к файлу и его имя.

Примеры: HREF="main.html", HREF="file://c:\WebPages\Book\contents.htm".

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

Чтобы сделать ссылку в пределах одного документа потребуется два шага:

1.   Отмечаем то место в документе, на которое позже сделаем ссылку (устанавливаем «якорь»). Для этого вставляем в нужное место тег <A> с атрибутом NAME. В качестве значения этого атрибута записываем в кавычках имя для того места, которое мы хотим отметить (лучше латинскими буквами). В дальнейшем браузер по имени будет искать позицию, на которую указывала ссылка. Тег </a> можно поставить сразу за открывающим тегом (контейнер в этом случае будет пустым), а можно поместить перед закрывающим тегом какой-либо фрагмент документа, с ним и будет связано имя, указанное в атрибуте NAME. Пример: <A NAME="Chapter15">

2.   При добавлении ссылки на «якорь», установленный в п. 1, в атрибуте HREF в кавы­ч­ках пишут знак «#», за которым следует имя якоря, например: <A HREF="#Chapter15">Глава 15</a>.

7. Использование графики в HTML-документах

Для того чтобы способы помещения иллюстраций на web-страницы были более понятны, эта часть была оформлена в html-формате (см. файлы Graphics\Graphics.html и Graphics\Graphics2.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 ALIGN=BOTTOM>Таблица 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 — заголовок таблицы). Если какая-то ячейка должна выглядеть пустой, то в неё нужно записать хотя бы пробел, в противном случае браузер автоматически удалит её со страницы.

Простейший пример таблицы можно найти в файле Tables\T1.html.

9.2. Настройка размеров таблицы

В примере T1.html, как нетрудно заметить, таблица выглядит непривычно, поскольку у неё отсутствуют линии сетки. Для того чтобы их добавить, нужно указать атрибут BORDER в теге <TABLE>. Если дать этому атрибуту значение (натуральное число), то таким способом будет установлена толщина внешней границы в точках, например: <TABLE BORDER=12>.

Для установки ширины таблицы имеется атрибут WIDTH тега <TABLE>, в котором можно указать ширину двумя способами:

1.            Абсолютный — в точках, размер таблицы не зависит от размеров окна браузера или настроек экрана. Пример: <TABLE WIDTH=600>.

2.            Относительный — в процентах от ширины окна, например: <TABLE WIDTH=80%>.

Кроме ширины всей таблицы можно настраивать ширину отдельных ячеек, используя атрибут WIDTH тегов <TD> и <TH>. Ширина указывается либо в точках, либо в процентах (от ширины таблицы).

В теге <TABLE> можно настроить толщину внутренних линий сетки, используя атрибут CELLSPACING, значением которого является толщина в точках. Кроме того, возможна настройка размера отступов от линий сетки до содержимого ячейки (также в точках), для этого используется атрибут CELLPADDING тега <TABLE>.

Пример таблицы с настройками различных размеров находится в файле Tables\T2.html.

9.3. Настройка цвета фона для таблицы

В HTML имеется возможность использовать в качестве цвета фона для ячеек таблицы цвет, отличающийся от фонового цвета всего документа. Для этого используется атрибут BGCOLOR, который можно использовать в теге <TABLE> (фон для всей таблицы), <TR> (для одной строки), <TD> и <TH> (для отдельной ячейки). Значение цвета задаётся в уже известном нам виде: указывается либо одно из стандартных названий, либо интенсивности трёх составляющих цвета в виде #RRGGBB. Пример таблицы с настройками цветов фона имеется в файле Tables\T3.html.

9.4. Настройка вида содержимого ячеек таблицы

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

Кроме горизонтального выравнивания можно указать вертикальное выравнивание содержимого отдельных ячеек. Для этого в теге <TD> или <TH> указывается атрибут VALIGN, значениями которого могут являться TOP, MIDDLE и BOTTOM.

Пример использования атрибутов ALIGN и VALIGN можно найти в файле Tables\T4.html.

При помещении текста в ячейки таблицы происходит автоматический переход на новую строку. Если текст в какой-либо ячейке разрывать нельзя, то в соответствующем теге <TH> или <TD> следует указывать атрибут NOWRAP (не требует значения). Очевидно, что засчет этого возможно увеличение ширины соответствующего столбца.

9.5. Слияние нескольких ячеек

Иногда соседние ячейки таблицы содержат одинаковые данные, в этом случае имеет смысл объединить их. Для того чтобы слить несколько соседних ячеек строки в одну, используют атрибут COLSPAN тега <TD> (или <TH>), значением которого является число ячеек, подлежащих слиянию. После такого контейнера пропускают несколько контейнеров <TD> (или <TH>), поскольку данные объединённой ячейки уже записаны. В файле Tables\T5.html приведён пример слияния двух ячеек с фамилией и именем в одну.

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

При необходимости можно объединить прямоугольную область, состоящую из ячеек нескольких соседних строк и столбцов. Для этого потребуется одновременно использовать атрибуты COLSPAN и ROWSPAN в одном теге <TD> (или <TH>). Пример находится в Tables\T7.html.

10. Фреймы

10.1. Основные сведения

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

Окно браузера всегда разбиваются на прямоугольные кадры (традиионно, они называются по-английски, фреймами). Внешне разбиение напоминает таблицу: кадры выстраиваются в несколько «строк», каждая из которых содержит несколько прямоугольных ячеек, содержащих отдельные HTML-документы. Пример, который содержит 6 различных фреймов, можно увидеть в Frames\F1.html.

Для того чтобы разбить документ на несколько прямоугольников, вместо контейнера BODY нам потребуется записать контейнер FRAMESET (набор фреймов). В теге <FRAMESET> нужно указать на сколько «строк» и «столбцов» разбивается всё окно браузера. Это делается с помощью атрибутов ROWS (строки) и COLS (столбцы). Заметим, что в этих атрибутах недостаточно указать количество строк и столбцов, требуются также их размеры, например в процентах от размеров окна. В примере Frames\F1.html это сделано так: <FRAMESET ROWS="50%,50%" COLS="33%,33%,34%"> (всё окно разбивается на две одинаковые “строки” и на три почти одинаковых столбца).

Внутри контейнера FRAMESET перечисляются HTML-документы, которые нужно поместить в кадры (слева направо, сверху вниз). Это делается с помощью последовательных тегов <FRAME>. Самый важный атрибут тега <FRAME> — это SRC, значением которого является URL документа, помещаемого в этот фрейм, например: <FRAME SRC=”1.html”>.

Размеры фреймов в теге <FRAMESET> можно указывать не только в процентах. Можно также указать из в частях, например <FRAMESET ROWS="*, 2*" COLS="2*, *, 3*"> (по высоте окно условно разбито на 3 части, первая “строка” кадров занимает две из них, вторая — одну, по ширине имеется 6 условных частей, “столбцы” занимают, соответственно, 2, 1 и  3 части).

Другой вариант — указание размеров в точках, например: COLS=”300,100,400”. Возможно и смешанное указание размеров (точки — проценты, точки — части, части — проценты). Можно, например, записать: COLS=”200,30%,70%”, что означает: первый «столбец» всегда имеет ширину 200 точек, независимо от размеров окна, второй занимает 30% от оставшейся части ширины окна, а третий — 70% от этого остатка. Примеры документов, использующих различные способы указания размеров, находятся в файлах Frames\F2.html и Frames\F3.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).

Примеры использования этих атрибутов есть в файлах Frames\F4.html, Frames\F5.html и Frames\F6.html.

10.3. Вложенные фреймы

При желании можно добиться того, чтобы какой-либо фрейм вместо обычного HTML-документа содержал бы, в свою очередь, набор фреймов. Для этого достаточно вместо тега <FRAME> поместить контейнер <FRAMESET>, в который вложены теги <FRAME>. Пример такой раскладки фреймов можно увидеть в файле Frames\F7.html.

10.3. Гиперссылки и фреймы

HTML позволяет управлять работой гиперссылок так, чтобы документ, на который указывает ссылка открывался не в целом окне, а только в одном фрейме (см. пример Frames\F8.html).

Для того чтобы ссылки работали именно так, нужно выполнить два действия:

1.    Фрейму, в который в дальнейшем нужно помещать документ, найденный по ссылке, дают имя. Для этого используют атрибут NAME тега <FRAME>, например: <FRAME NAME=”right”>.

2.    При вставке ссылки в HTML-документ другого фрейма в теге <A> указывают атрибут TARGET (цель), значением его является имя фрейма, в который нужно поместить HTML-документ, указанный в HREF, например: <A HREF=”1.html” TARGET=”right”> 1.html </a>.

Кроме имён, которые можно давать собственным фреймам, существуют и стандартные имена, заранее известные браузеру, а именно:

«_self» — позволяет открывать документ по ссылке в том же фрейме, где находилась ссылка

«_top» — открывает документ во всё окно, где находилась ссылка, разрушая при этом всю структуру фреймов

«_parent» — в родительском фрейме; это не совсем то же самое, что _top, поскольку фреймы бывают вложенными; вся структура родительского фрейма разрушается

«_blank» — в новом окне браузера; старое окно (содержащее ссылку) при этом не уничтожается.


Страницы: 1, 2


Новости

Быстрый поиск

Группа вКонтакте: новости

Пока нет

Новости в Twitter и Facebook

  скачать рефераты              скачать рефераты

Новости

скачать рефераты

Обратная связь

Поиск
Обратная связь
Реклама и размещение статей на сайте
© 2010.