- •Содержания web-сайта
- •Порядок выполнения лабораторной работы.
- •Краткие теоретические сведения
- •Структура документа. Основной набор тэгов.
- •Форматирование текста Для форматирования текста html-документов предусмотрена целая группа тегов, которую можно условно разделить на тэги логического и физического форматирования.
- •Разделение на абзацы
- •Перевод строки
- •Специальные символы
- •Организация ссылок
- •Правила записи ссылок
- •Внутренние ссылки
- •Графические изображения
Графические изображения
Фоновые изображения.
Разработчики WEB-страниц могут управлять цветом фона документа, а также указывать изображения используемые в качестве фонового. Обычно в качестве фонового берется небольшое изображение, для загрузки которого по сети не требуется значительного времени. Другим часто используемым вариантом является фоновое изображение в виде бледного рельефного логотипа. Такая графика ясно идентифицирует сайт и не мешает восприятию материала. Например:
<BODY BACKGROUND = backgrd2.png BGCOLOR = GRAY>
Одновременное задание параметров BACKGROUND и BGCOLOR не обязательно. Любой из них, равно как и оба вместе, могут отсутствовать. Может показаться, что указание фонового цвета излишне при задании фонового изображения. На практике рекомендуют всегда указывать цвет фона документа, если задается фоновое изображение. Т. к. при загрузке документа, прежде всего, отображается текстовая часть, а на следующем проходе будут загружаться изображения, в том числе и изображение, используемое в качестве фонового. До момента загрузки и отображения фонового изображения цвет фона будет определяться значением параметра BGCOLOR или устанавливаться по умолчанию. Опыт работы с HTML-документами, получаемыми по сети, показывает, что до загрузки фонового изображения порой проходит достаточное количество времени, в течение которого пользователь знакомиться с уже загруженным текстом. При появлении фонового изображения меняется гамма цветов документа. Чтобы предотвратить резкое изменение цветов, следует задавать значение цвета фона близким к цветам фонового изображения.
Встраивание изображений в HTML-документы.
Для встраивания изображений в HTML-документ используют тэг <IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения:
При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания задается значением параметра ALIGN тэга <IMG>. Возможные значения этого параметра приведены в таблице 1.
Таблица 1. Значения параметра ALIGN
Тэг/атрибут |
Описание |
TOP |
Верхняя граница изображения выравнивается по самому высокому элементу текущей строки |
TEXTTOP |
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки |
MIDDLE |
Выравнивание середины изображения по базовой линии текущей строки |
ABSMIDDLE |
Выравнивание середины изображения по середине текущей строки |
BASELINE или BOTTOM |
Выравнивание нижней границы изображения по базовой линии текущей строки |
ABSBOTTOM |
Выравнивание нижней границы изображения по нижней границе текущей строки |
LEFT |
Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны |
RIGHT |
Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны |
Все значения параметров выравнивания изображений условно делят на две группы по их принципу действия. К одной группе относят два значения параметра — LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое «плавающее» изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст, размещаемый рядом с изображением, может занимать несколько строчек. К другой группе значений параметров относятся все остальные. При их использовании изображение встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Например:
<HTML>
<HEAD>
<TITLE>Встраивание изображений</title></head>
<BODY>
Выравнивание изображений <IMG SRC = final.gif ALIGN=top > по верхнему краю
<P>
Выравнивание изображений по <IMG SRC = final.gif ALIGN=baseline > базовой линии
</BODY>
</HTML>
В этом примере изображения используются как элемент строки.
Приведем пример плавающего изображения:
<HTML>
<HEAD>
<TITLE>Встраивание изображений - как плавающих элементов строки</title></head>
<BODY>
<IMG SRC =final.gif ALIGN=right>
<P ALIGN=JUSTIFY>
(Здесь идет текст абзаца)
<IMG SRC =final.gif ALIGN=left>
<P ALIGN=JUSTIFY>
(Здесь идет текст абзаца)
</BODY>
</HTML>
Если в документе используются плавающие изображения, выровненные со значением RIGHT и LEFT, то имеется возможность принудительного прекращения обтекания в заданном месте текста. Это обеспечивается применением тэга принудительного прерывания строки <BR>с параметром CLEAR. В качестве значений параметра CLEAR можно использовать следующие: LEFT, RIGHT или ALL. Так для приведенного выше примера в нужном месте текста можно разместить строку:
<BR CLEAR=ALL>
Текст, следующий далее, будет размещаться ниже изображения с новой строки.
Тэг встраивания изображений имеет два необязательных параметра, указывающих размеры изображений при отображении — WIDTH и HEIGHT. Значения параметров могут указываться как в пикселях, так и в процентах от размеров окна просмотра. Значения ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры при загрузке изображений выполняют его перемасштабирование. Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр буде вычисляться автоматически из условия сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения. Если не требуется решать задачу изменения размеров изображения, рекомендуется указывать их реальные размеры в пикселях с помощью параметров WIDTH и HEIGHT. Указание действительных размеров:
позволяет читателю, работающему в режиме отключения загрузки изображений, иметь представление о размерах иллюстраций по пустому прямоугольнику, выдаваемому на экран вместо изображения (если размеры не будут указаны, то браузер не зная их, выведет маленькую пиктограмму и форматирование страницы будет нарушено);
позволяет ускорить верстку документа на экране. Обычно браузеры должны загрузить все встроенные изображения прежде, чем отформатировать текст на экране. Указание размеров встроенных изображений позволяет выполнить форматирование документа до полной загрузки файлов с изображениями.
Например:
<HTML>
<HEAD>
<TITLE>Масштабирование изображений</title></head>
<BODY>
<IMG SRC =final.gif WIDTH=300>
<IMG SRC =final.gif WIDTH=500>
<IMG SRC =final.gif WIDTH=100>
</BODY>
</HTML>
Отделение изображения от текста
Для тэга <IMG> можно задавать параметры HSPACE и VSPACE, значения которых определяют отступы от изображения, оставляемые пустыми, по горизонтали и по вертикали соответственно.
Рамки вокруг изображений
Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тэга <IMG>. В качестве значения параметра используется число, означающее толщину рамки в пикселях. По умолчанию рамка вокруг изображения не рисуется. Исключением является только случай, когда изображение является ссылкой. В этом случае браузеры заключают изображение в рамку синего цвета. Избежать появления рамки можно указав значение BORDER=0.
Альтернативный текст
Параметр тэга <IMG> ALT определяет альтернативный текст. Его указание дает возможность пользователям неграфических браузеров или пользователям, работающим в режиме отключения загрузки изображений, получить некоторую текстовую информацию о встроенных изображениях. При отключенном изображении вместо них на экране появится альтернативный текст, определенный значением параметра ALT. Значение этого параметра имеет смысл и для случаев, когда загрузка изображений выполняется. Поскольку загрузка изображений выполняется на втором проходе после отображения текстовой информации, то изначально на экране на месте изображения появится альтернативный текст, который по мере загрузки будет сменяться изображением. Современные браузеры будут также отображать альтернативный текст в качестве подсказки при помещении курсора мыши в область изображения.
Использование изображений в качестве ссылки
Для обеспечения работы изображения в качестве ссылки на другие ресурсы достаточно включить изображение внутрь тэга контейнера <A>.
Например:
<HTML>
<HEAD>
<TITLE> Рамки вокруг изображений и альтернативный текст</title></head>
<BODY>
<IMG SRC=ctxlogo.gif ALT="Это пирамида" BORDER=10 ALIGN=LEFT HSPACE=40 VSPACE=20>
<P ALIGN=CENTER>
Отделение изображения от текста
<P ALIGN =JUSTIFY>
(Здесь идет текст абзаца)
<P AliGN=center>
Рамки вокруг изображений
<P AliGN=justify>
(Здесь идет текст абзаца)
<P AliGN=center>
Альтернативный текст
<P AliGN=justify>
(Здесь идет текст абзаца)
<P AliGN=center>
<A HREF=text.htm> <IMG SRC=ctxlogo.gif ALT="Это ссылка" ALIGN=left BORDER=0></A>
Использование изображений в качестве ссылки
<P AliGN=justify>
(Здесь идет текст абзаца)
</BODY></HTML>
Таблицы
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Каждая таблица должна начинаться тэгом <TABLE> и заканчивается тэгом </TABLE>. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей.
Строка таблицы: <TR>...</TR>
Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.
Ячейка таблицы: <TD>...</TD>
Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
Заголовок таблицы: <TH>...</TH>
Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.
Подпись: <CAPTION>...</CAPTION>
Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы — будет поставлена подпись. По умолчанию подпись всегда центрирована в рамках ширины таблицы. Браузер Microsoft Internet Explorer предоставляет дополнительные возможности для выбора расположения заголовка. Параметр ALIGN допускает значения LEFT, RIGHT, CENTER. Отметим, что это один из редких случаев, когда широко распространенный параметр ALIGN может использоваться для горизонтального и вертикального выравнивания. Однако двойное использование в одном заголовке параметра ALIGN недопустимо. Поэтому дополнительно введен специальный параметр для вертикального выравнивания — VALIGN, принимающий значения TOP и BOTTOM. Например, для заголовка, располагаемого внизу таблицы с выравниванием влево, описание имеет вид:
<CAPTION ALIGN=Left VALIGN=bottom> Заголовок таблицы </caption>
Параметры тэга <TABLE>
Основным тэгом, применяемым при создании таблиц, является тэг <TABLE>. Набор допустимых параметров зависит от браузера. Согласно спецификации HTML в тэге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Браузеры Netscape и Microsoft Internet Explorer разрешают кроме перечисленных пяти параметров использовать параметры: HEIGHT и BGCOLOR.
Параметр BORDER
Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.
Параметр ALIGN
Если атрибут ALIGN присутствует внутри тэгов <TABLE> и </TABLE>, то он определяет горизонтальное расположение таблицы в области просмотра. По умолчанию ALIGN=left. Заметим, что среди допустимых значений нет типичного значения для параметра выравнивания — CENTER. Это обусловлено тем, что присутствие параметра ALIGN в тэге <TABLE> не только определяет месторасположение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию картинок. Обтекание таблицы с двух сторон не предусмотрено. Для более точного управления обтеканием следует использовать тэг <BR> с параметром CLEAR так же, как это выполняется для <IMG>. Если параметр ALIGN опущен, то место слева и/или справа таблицы всегда будет пустым независимо от ее ширины. Если таблица не требует обтекания текстом, то можно добиться ее расположения по центру окна просмотра. Для этого необходимо все описание таблицы поместить внутри тэгов <CENTER> и </CENTER>.
Форматирование данных внутри таблицы
Каждую отдельную ячейку таблицы можно рассматривать как область для независимого форматирования. Все правила, которые действуют для управления отображением текста, могут использоваться для форматирования текста внутри ячейки. Внутри ячейки допустимо использование практически всех элементов HTML, которые могут появляться внутри тела документа <BODY>. Область действия тэгов, заданных внутри отдельной ячейки, ограничивается пределами этой ячейки независимо от наличия завершающего тэга. Например, если внутри ячейки определен цвет текста — <FONT COLOR=RED>, то даже при отсутствии завершающего кода </FONT> или расположения его через несколько ячеек или стоик таблицы, текст следующей ячейки будет отражен цветом по умолчанию.
Параметры выравнивания содержимого ячеек — ALIGN и VALIGN. Могут применяться в кодах <TR>, <TD> и <TH>. Параметр горизонтального выравнивания ALIGN может принимать значения LEFT, RIGHT и CENTER (по умолчанию LEFT для <TD> и CENTER для <TH>). Параметр вертикального выравнивания VALIGN может принимать значения TOP (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (посередине), BASELINE (по базовой линии). По умолчанию — MIDDLE. Выравнивание по базовой линии обеспечивает привязку текста отдельной строки во всех ячейках к единой линии. Задание параметров выравнивания на уровне кода <TR> определяет выравнивание для всех ячеек данной строки, при этом в каждой отдельной ячейки строки могут быть определены свои параметры, переопределяющие действие параметров, заданных в <TR>.
Параметр NOWRAP отключает возможность автоматического разбиения текста ячейки на строки. Может применяться в кодах <TR>, <TD> и <TH>. Следует избегать неоправданного применения этого параметра, так как это может значительно сократить возможности динамического изменения размеров таблиц и ухудшить их восприятие. В большинстве случаев достаточно применить NOWRAP для отдельных ячеек. Перенос слов осуществляется только по разделителям между словами (пробелами), и в ряде случаев для запрещения разрыва текста в отдельных местах следует вместо символа пробела задавать код неразрывного пробела (NonBreaking Space). Например, текст 650 км или Иванов И.И. рекомендуют записывать так: 650 км и Иванов И.И.
Параметры WIDTH и HEIGHT могут применяться в кодах <TD> и <TH>. Их значение определяет ширину и высоту ячейки, для которой записаны данные параметры. Значения могут задаваться в пикселях или в процентах от размеров всей таблицы. Microsoft Internet Explorer разрешает задавать значение WIDTH только в пикселях. Задание ширины, для какой либо одной ячейки, влияет на ширину всей колонки, в которой расположена эта ячейка, а задание высоты влияет на всю строку. Если в колонке значение ширины указано в нескольких ячейках, то выбирается максимальное значение. Те же свойства характерны и для строк.
В сложных таблицах объединяют несколько смежных ячеек по горизонтали и/или по вертикали в одну. Данная возможность реализуется с помощью параметров COLSPAN (COLumn SPANning) и ROWSPAN (ROW SPANning).
Пример таблицы
<TABLE BORDER=5>
<CAPTION ALIGN=bottom> Таблица №1 </CAPTION>
<TR><TD ROWSPAN=2></TD><TH COLSPAN=2>Среднее значение</TH></TR>
<TR><TH>Рост</TH><TH>Вес</TH></TR>
<TR><TD>Мужчины</TD><TD ALIGN=center>174</TD><TD ALIGN=center>78</TD></TR>
<TR><TD>Женщины</TD><TD ALIGN=center>165</TD><TD ALIGN=center>56</TD></TR>
</TABLE>
Вложенные таблицы
Отдельные ячейки таблицы могут содержать практически любые тэги языка и данные, разрешенные в разделе <BODY>. В том числе, внутри одной ячейки таблицы может быть расположена другая таблица. Не все браузеры, поддерживающие таблицы, правильно отображают сложные таблицы.