Материал: Создание простейших web-документов. методические указания к выполнению лабораторной работы. Кострюков С.А., Пешков В.В
–ALIGN="BOTTOM" – выравнивается нижняя граница изображения и основание текстовой строки;
–ALIGN="MIDDLE" – выравнивается середина изображения и середина текстовой строки;
–ALIGN="TOP" – выравнивается верхняя граница изображения и верхний обрез текстовой строки.
Также возможно использование изображения, обтекаемого текстом, для чего также служит атрибут ALIGN=:
–ALIGN="LEFT" – рисунок размещается у левого края страницы, а текст абзаца – справа от него;
–ALIGN="RIGHT" – рисунок размещается у правого края страницы, а текст абзаца – слева от него.
В этом случае следует располагать тег <IMG> в самом начале абзаца.
Рекомендуется, чтобы между рисунком и текстом присутствовал некоторый отступ, как по горизонтали, так и по вертикали. Его величину можно задать с помощью атрибутов HSPACE= (по горизонтали) и VSPACE= (по вертикали). Размеры отступов задаются в пикселах.
При создании web-страниц с рисунками следует иметь в виду, что ряд пользователей может отключить в своих браузерах функцию просмотра изображений (например, для ускорения загрузки страниц или уменьшения трафика). Таких пользователей можно ознакомить с содержанием рисунка при помощи альтернативного текста. Этот текст задается с помощью атрибута ALT= и выводится вместо рисунка, если он почему-то не может быть выведен.
Поскольку рисунок задается как текстовый элемент, то он может быть помещен внутрь другого текстового элемента, например, задающего ссылку (тег <А>). В этом случае рисунок становится изображением-ссылкой. При выводе документа на экран такой рисунок отличается синей рамкой и изменением формы указателя мыши при наведении на него.
Также изображение может быть использовано в качестве фонового рисунка web-страницы. При выводе такой страницы на экран рабочая область окна заполняется этим рисунком по-
11
следовательно (как паркетом), считая от верхнего левого угла окна. Фоновый рисунок можно задать при помощи атрибута BACKGROUND= в теге <BODY>. Его значение – абсолютный или относительный адрес URL файла с изображением.
<BODY BACKGROUND="sky.gif" TEXT="BROWN">
Форматирование текста
Управление форматированием текста не является основной задачей языка HTML, и поэтому теги, выполняющие эту задачу, начиная с версии 4.0 рассматриваются как устаревшие и их использование не рекомендуется, их функцию сейчас выполняют каскадные таблицы стилей – Cascading Style Sheets (CSS). Однако теги HTML по-прежнему предоставляют удобный способ управления видом документа на экране и поддерживаются браузерами.
Управлять параметрами шрифта позволяет парный тег <FONT>. В него обязательно должен входить хотя бы один из атрибутов: COLOR=, FACE= или SIZE=.
<FONT SIZE="6">
Атрибут COLOR= определяет цвет текста, который обычно задается текстовым значением (например, COLOR="GREEN") или шестнадцатеричным кодом, в котором последовательные байты означают интенсивность красной, зеленой и синей компонент цвета. Например, COLOR="#00FF00" даст такой же результат, что и COLOR="GREEN". Атрибут FACE= определяет гарнитуру шрифта. Его значение сравнивается с именами всех шрифтов, установленных в системе. Атрибут SIZE= задаѐт размер шрифта (в относительных единицах от 1 до 7). Для атрибута SIZE= можно задавать значение со знаком (плюс или минус), что будет означать увеличение или уменьшение размера шрифта относительно текущего значения.
В предыдущих версиях HTML параметры шрифта, используемые по умолчанию, задавались с помощью непарного тега <BASEFONT>, который помещался один раз внутри элемента BODY с теми же атрибутами, что и тег <FONT>. В на-
12
стоящее время тег <BASEFONT> не поддерживается браузера-
ми, кроме Internet Explorer.
Внешний вид символов задается при помощи парных тегов <В> (полужирный), <I> (курсив), <U> (подчеркнутый), <S> (вычеркнутый). Их использование не рекомендуется. Вместо них следует применять теги, описывающие функциональные особенности текста, например, вместо
<В>Внимание!</В>
лучше написать
<STRONG>Внимание!</STRONG>
Так, для отображения цитат служит парный тег <СIТЕ> (выводятся курсивом), аналогами курсивного и полужирного начертаний являются парные теги <ЕМ> (выделение) и <STRONG> (сильное выделение). Также язык HTML содержит набор тегов для описания работы компьютерных программ. Для этого служат парные теги <CODE> (исходный текст программы), <KBD> (текст, вводимый с клавиатуры), <SAMP> (пример вывода программы) и <VAR> (программные переменные). Для вывода соответствующих элементов используется моноширинный шрифт. Кроме того, переменные выводятся курсивом, а клавиатурный ввод (в некоторых браузерах) – полужирным шрифтом.
Списки
Наиболее популярные виды списков, поддерживаемые языком HTML, это упорядоченные списки, неупорядоченные списки и списки определений. Все виды списков представляют собой блочные элементы.
Упорядоченные (нумерованные) списки создаются при помощи парных тегов <OL> и </OL>, а неупорядоченные (маркированные) – при помощи парных тегов <UL> и </UL>. Открывающие теги могут включать атрибуты, задающие вид маркера (в случае неупорядоченного списка) и вид и последовательность нумерации (для упорядоченного). Например, атрибут ТУРЕ="I" задаѐт римскую нумерацию элементов списка, а ТУРЕ="1" – арабскую. Разрешается вложение списков друг в друга. Каждый
13
элемент списка задаѐтся при помощи парного тега <LI>, закрывающий тег </LI> здесь можно опускать.
Список определений создается с помощью парного тега <DL>. Список включает элементы двух типов: определяемые термины (задаются парным тегом <DT>) и определения (задаются парным тегом <DD>). Закрывающие теги (</DT> и </DD>) здесь можно опускать. Как правило, определяемые термины и определения чередуются, хотя жѐстко это не зафиксировано. Определения выводятся на экран с отступом от левого края. Пример подобного списка:
Создание таблиц
Для представления больших объемов структурированных данных наиболее удобны такие объекты, как таблицы. Также многие web-дизайнеры часто применяют их для точного размещения элементов страниц.
Таблица в HTML создается с помощью парного тега <TABLE>. В ней может присутствовать заголовок, определяемый парным тегом <CAPTION>. Строки таблицы задаются парными тегами <TR> (однако закрывающие теги </TR> можно опускать).
В каждой строке таблицы содержатся ячейки, которые могут быть двух разных типов: ячейки в заголовках столбцов и строк (задаются парным тегом <ТН>), и обычные ячейки (задаются парным тегом <TD>). Как и для строк, закрывающие теги для ячеек (</ТН> и </TD>) можно опускать. Например, пустая таблица из двух строк и двух столбцов задаѐтся следующим образом:
14
В каждой ячейке таблицы может находиться произвольный текст, включая любые теги HTML, допустимые в «теле» страницы. Например, ячейка может содержать вложенную таблицу или рисунок.
Когда таблица отображается на экране монитора, происходит ее автоматическое форматирование с подбором размеров ячеек в соответствии с объемом размещаемых данных и заданными атрибутами. Атрибуты элементов предоставляют широкий выбор разнообразных способов оформления таблиц. На рис. 1 приведен краткий перечень допустимых атрибутов.
Рис. 1
Вывод нескольких документов на одной странице
Язык HTML даѐт возможность вывести в рамках одной web-страницы сразу несколько документов. Для этого webстраница разбивается на несколько частей, которые называются фреймами. Разбиение страницы описывается специальной конструкцией HTML, в которой вместо тела документа (элемент BODY) находится описание фреймов. Оно задаѐтся парным тегом <FRAMESET>. Элемент BODY в такой странице отсутствует, а при наличии – игнорируется браузером.
Открывающий тег <FRAMESET> обязательно содержит атрибут COLS= или ROWS=, который определяет способ разбиения окна. В первом случае окно разбивается вертикальными линиями (т.е. на колонки), во втором – горизонтальными.
15