1473
.pdfДополнительно введен специальный параметр для вертикального выравнивания - VALIGN, принимающий значения TOP или
BOTTOM.
Основным тэгом, применяемым при создании таблиц, является тэг <TABLE>. Он может использоваться с рядом параметров, каждый из которых допустимо не указывать. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в тэге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Браузеры
Netscape и MS Internet Explorer разрешают кроме перечисленных выше пяти параметров использовать параметры HEIGHT и BGCOLOR. Рассмотрим назначение общеупотребительных параметров тэга <TABLE>.
Параметр BORDER управляет изображением рамки вокруг каждой ячейки, которые дают линии сетки таблицы и рамку вокруг всей таблицы. Для добавления в таблицу рамок необходимо добавить в тэг <TABLE> параметр BORDER, который может иметь численное значение, которое определяет толщину рамки вокруг таблицы в пикселях, если оно отсутствует, то оно принимается =1.
Форма записи параметра: CELLSPACING=num, где num - численное значение параметра в пикселях, которое не может быть опущено. Величина num определяет расстояние между смежными ячейками. По умолчанию значение равны двум. Все указанные параметры тэга <TABLE> действуют независимо друг от друга.
Пример:
для создания определенной структуры ячейки таблицы применяют следующие тэги
<TABLE CELLPADDING="30" CELLSPACING="10" BORDER="1">
<CAPTION ALIGN="center" VALIGN="top">
Заголовок таблицы
</CAPTION>
</TABLE>
Для принудительного указания ширины и высоты
используются параметры WIDTH (ширина таблицы) и HEIGHT (высота таблицы). Форма записи: WIDTH=num или HEIGHT=num%, где num - численное значение ширины всей таблицы в пикселях или процентах от всего размера окна.
20
Параметр ALIGN определяет горизонтальное расположение таблицы в области просмотра. Допустимые значения - LEFT (выравнивание влево) и RIGHT (выравнивание вправо). По умолчанию таблица выровнена по левому краю. Присутствие этого параметра в тэге <TABLE> разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию рисунков.
Пример:
выравнивание заголовка и таблицы по центру области просмотра
<TABLE CELLPADDING="6" CELLSPACING="7" border="3" HEIGHT="250" WIDTH="150" ALIGN="center">
<CAPTION ALIGN="center" VALIGN="top">
Заголовок таблицы
</CAPTION> </TABLE>
Параметры выравнивания содержимого ячеек - ALIGN и VALIGN. Могут применяться в кодах <TR>, <TD> и <TH>. Параметр горизонтального выравнивания ALIGN может принимать значения LEFT, RIGHT и CENTER (по умолчанию). Параметр вертикального выравнивания VALIGN может принимать значения TOP (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (посередине), BASELINE (по базовой линии).
Задание параметров выравнивания на уровне кода <TR> определяет выравнивание для всех ячеек данной строки, при этом в каждой ячейке строки могут быть определены свои параметры, переопределяющие действие параметров, заданных в <TR>.
Пример:
выровнять разными способами текст в ячейках в таблице (результат выполнения браузером рисунок 5) .
<HTML> <HEAD> <TITLE>ВЫРАВНИВАНИЕ ТЕКСТА</TITLE> </HEAD> <BODY>
<TABLE CELLPADDING="6" CELLSPACING="7" border="3" HEIGHT="250" WIDTH="450" ALIGN="center">
<CAPTION ALIGN="center" VALIGN="top">
Заголовок таблицы </CAPTION>
<TR ALIGN="center" VALIGN="middle">
21
<TD>Фамилия преподавателя</TD> <TD>Название дисциплины</TD> </TR>
<TR ALIGN="left" VALIGN="bottom"> <TD> Буракова Л.А.</.</TD> <TD>История</TD> </TR>
<TR ALIGN="right" VALIGN="top"> <TD>Шувалова К.А.</TD> <TD>Высшая математика</TD> </TR>
</TABLE> </BODY></HTML>
Рисунок 5 – Пример оформления таблицы с параметрами форматирования
Параметры WIDTH и HEIGHT позволяют изменить размер ячейки применяться в кодах <TD> и <TH>. Их синтаксис аналогичен синтаксису этих параметров для тэга <TABLE>.
Значение параметров определяет ширину или высоту ячейки, для которой записаны данные параметры. Значения могут задаваться в пикселях или в процентах от размеров всей таблицы. MS Internet
22
Explorer разрешает задавать значение WIDTH только в пикселах.
Для задания цвета фона и сетки таблицы используют специальные тэги. В первом случае ключевое слово BGCOLOR вставляется в тэг <TABLE>, а во втором для изменения цвета сетки таблицы применяется ключевое слово BORDERCOLOR. Важно обратить внимание на то, чтобы цвета фона таблицы и текста в ней не совпадали
Пример:
задать цвет фона таблицы желтый а цвет рамки красный
<TABLE BORDER BGCOLOR=Yellow BORDERCOLOR=red > </TABLE>
ЗАДАНИЕ 4.
1.Создайте таблицу 4х3, по следующим требованиям:
•рамка толщиной 10 пикселов;
•заголовок вверху таблицы, выровненный по правому краю;
•отступы в 3 пикселя между рамкой ячейки и текстом внутри ячейки;
2. Выровняйте заголовок вашей таблицы по левому краю и поместите его вниз таблицы;
3. Измените расстояния:
•между смежными ячейками;
•между текстом в ячейке и рамкой;
4.Измените ширину и высоту вашей таблицы;
5.Выровняйте таблицу по правому краю окна браузера;
6.Выровняйте текст в первом столбце по правому краю;
7.Объедините в вашей таблице два столбца в третьей строке;
8.Измените цвет фона вашей таблицы на красный;
9.Измените цвет сетки вашей таблицы на синий;
10.Вставьте в последнюю ячейку таблицу 2х3.
11.Результат сохранить в файле 4.htm.
Ссылки
Одним из важнейших понятий для HTML-документов являются ссылки. Само название – HTML, язык разметки гипертекста, указывает на принцип организации таких документов. Ссылки являются единственной возможностью перейти от одного документа к другому.
23
Гипертекстовый документ - это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому.
Ссылка состоит из двух частей. Первая из них - это то, что пользователь видит на Web-странице; она называется указатель ссылки. Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адрес). Когда пользователь щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом.
Указатели бывают двух типов - текстовые и графические. Текстовые указатели представляют собой слово или несколько
слов, выделенных на экране подчеркиванием. Цвет текстового указателя может регулироваться автором и установками программы просмотра.
Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который будет ссылка. Оба действия выполняются при помощи тэга <A>. Тэг <A> имеет единственный параметр HREF, значением которого является URL-адрес. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг </A>:
<A HREF=URL-адрес>Текстовый указатель ссылки</A>
При создании таких ссылок не нужно указывать адрес документа, на который осуществляется ссылка, можно просто указать название нужного HTML-документа. Важно, чтобы главный документ и документ, на который происходит ссылка, находились в одном месте. Если они находятся в разных директориях, то путь к файлу обязательно указывается. Необходимо учитывать, чтобы текст ссылки давал представление о том документе, в который попадут пользователи, после ее активизации.
Действие ссылки можно проверить, щелкнув на ней и посмотрев, попали ли пользователь в нужный документ. При наведении стрелки мыши на ссылку, браузер покажет полный URL того документа, который пользователь хочет посетить.
Пример:
<A HREF="Параметры тэга BODY.html"> Щелкните </A>
Чтобы сослаться на любое место в WWW, необходим полный URL документа, а не только путь и имя файла. Тем не менее, ссылка выглядит так же.
24
Когда пользователь ссылается на другой документ в Web, URL всегда начинается с HTTP://. Таким образом, браузер узнает, что искать следует документ в WWW, а не файл на пользовательском Web-узле. Остальная часть URL состоит из пути в Интернет к нужному узлу и имени файла документа. Можно копировать URL из адресной строки браузера в HTML-файл стандартным способом через буфер обмена.
При указании параметров тэга <BODY> с помощью ключевых слов можно изменить цвет ссылки. Параметры, управляющие цветом ссылки следующие:
LINK – определяет цвет еще не просмотренной ссылки, то есть ссылки, которая еще не использовалась <BODY LINK=Blue>;
ALINK - определяет цвет активной ссылки, этот цвет отображается при нажатии на нее<BODY ALINK=Yellow>;
VLINK – определяет цвет уже просмотренной ссылки <BODY VLINK=Red>.
Пример:
Изменить цвет уже просмотренной ссылки - на зеленый.
<HTML> <HEAD> <TITLE> щелкните</TITLE > </HEAD >
<BODY LINK="#0000ff" ALINK="#008000" VLINK="#ff0000"> <H3>Приглашение на ярмарку</H3>
Приглашение можно просмотреть здесь. <A HREF="tekst1.html"> щелкните </A>
В качестве средства ссылок на другие WWW-страницы можно использовать не только текст, но и изображения, рисунки и пиктограммы (кроме фоновых рисунков). Щелкнув мышью на любом месте изображения, пользователь переходит на соответствующий документ.
Тэг <A> остается тем же, а вместо текста вводится тэг <IMG>.
Пример:
<A HREF=My_doc.html><IMG SRC=map.gif></A>
Любая часть изображения, находящегося в файле map.gif будет работать как указатель ссылки на документ My_doc.html.
Когда пользователь щелкает мышью на ссылке, указывающей на другую Web-страницу, она выводится непосредственно в окне браузера.
25
Для задания фона Web-страницы используются тег <BODY> и
его параметры Background и Bgcolor.
Пример:
<BODY background="cat.jpg">
используется в качестве фона картинка, в данном случае cat.jpg.
<BODY bgcolor="aqua">
заполнение фона указанным цветом, в данном случае цвет aqua.
ЗАДАНИЕ 5.
1.Создайте HTML-документ, который будет содержать ссылку на документ;
2.Измените цвет еще не просмотренных ссылок на красный, а активных ссылок на желтый;
3.Создайте HTML-документ с графической ссылкой на документ с текстом, а из документа с текстом сделайте ссылку на первоначальный документ;
4.Измените цвет рамки вокруг просмотренной графической ссылки на фиолетовый;
5.Создайте список, состоящий из ссылок на различные документы;
Фреймы
Язык HTML позволяет разбить окно программы браузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами. Как правило, фреймы используются для облегчения навигации по сайту, создания навигационного меню. Элементы для создания фреймов и работы с ними:- FRAMESET. Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице
-FRAME определяет фрейм и его свойства внутри FRAMESET-структуры
-NOFRAMES определяет что показывать, если браузер не поддерживает фреймы
Примечания: Необходимо внимательно следить, чтобы все вышеперечисленные элементы находились вне элемента BODY. Фреймы к телу документа никоим образом не относятся!
26
Для создания фреймов используют особый документ html структура которого отличается от обычной. Такой документ не содержит раздела «тела» документа и, на самом деле, не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов, заключенное между тегами <frameset> и < / frameset>. В этом описании указывают размеры и порядок размещения областей в окне браузера, а также задают документы, которые должны загружаться в каждую из этих областей.
Тег <frameset> должен содержать обязательный атрибут COLS= или ROWS=, определяющий способ разбиения окна. При использовании атрибута cols = окно делится на области вертикальными линиями, а при использовании атрибута rows= — горизонтальными. Если заданы оба эти атрибута, в окне создается сетка из подобластей.
Значения этих атрибутов определяют высоту (или ширину) областей окна. Параметры для каждого столбца (строки) задают через запятую в пикселях или в процентах (символ «%»). В качестве последнего параметра можно использовать символ "звездочка" (*). Под такой фрейм выделяется все остающееся свободное пространство.
Между тегами <frameset> и </frameset> располагают дополнительные теги, указывающие назначение созданных областей. Для этой цели можно использовать вложенные теги <frameset>, задающие дополнительное разбиение окна, или одиночные теги <frame>, определяющие документы, загружаемые в отдельные области. Число элементов, вложенных между тегами <frameset> и < / frameset>, должно соответствовать числу созданных областей
Тег <frame> должен содержать обязательный атрибут SRC=, определяющий документ, который будет загружен в данную область. Дополнительные атрибуты позволяют управлять рамками между отдельными фреймами и некоторыми другими свойствами.
27
Пример: создание двух форм, одна из которых разбита на две части , вторая содержит девять областей в каждой из которой раскрыты самостоятельные документы.
Рисунок 6 – Пример использования фреймов
ЗАДАНИЕ 6.
1.Создайте HTML-документ, в результате открытия которого страница будет содержать ранее созданные документы (из предыдущих заданий).
2.Создайте HTML-документ, в результате открытия который будет содержать ссылку на документ.Измените цвет еще не
28
просмотренных ссылок на красный, а активных ссылок на желтый;
3.Создайте страницу разбитую на пополам. В правой части разместить текстовый документ, в левой части электронную таблицу (документ и электронная таблица должны быть созданы за раннее) содержащую несколько документов (текстовый документ, электронною таблицу).
ГЛОССАРИЙ
Web документ – см. Документ Web
Web-сайт – см. Сайт
Атрибут – это параметр, который используется для описания свойств тэга. Наборы допустимых атрибутов индивидуальны для каждого тэга.
Браузер (броузер, Web –браузер) – программы чтения
(интерпретации) гипертекста, кроме этого данные программы могут воспроизводить звук и видео, устанавливать соединения с другими компьютерами сети и посылать запросы на документы Web, организовывать и поддерживать
Гипертекст – это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылка на другие документы.
Документ Web (документ WWW) – документ на языке HTML, они составляют основу Всемирной паутины, содержат гипертекст, позволяющий пользователю, указав на выделенное слово или фразу получить доступ к данным, перейти в другую часть данного документа, связанны с данным гиперссылкой.
Разметка – это вставка в текст специальных кодов, которые определяют то, как итоговый гипертекстовый документ должен отображаться специальной программой – браузером. Разметка используется для определения формата или стиля, который будет
29