Форматирование текстов

Управление шрифтом. Кроме использования стандартных размеров и начертаний шрифтов можно определять шрифты для каждого фрагмента текста с помощью специальных тегов. Самый простой способ – использование тегов физических стилей.

<b> – полужирный,

<i> – курсив,

<u> – подчеркнутый,

<s> – вычеркнутый,

<tt> – пишущая машинка.

Теги физических стилей являются контейнерными. К одному и тому же фрагменту текста можно применить несколько тегов физических стилей, вкладывая один из них в другой.

С помощью тега <basefont> можно установить основной шрифт, который используется в документе по умолчанию. Этот тег имеет необязательные атрибуты:

color=цвет;

face=”имя шрифта”;

size=число, где число=1,2,…, 7 и определяет размер шрифта (если атрибут size не задан, то по умолчанию устанавливается значение 3);

title=”текст всплывающей подсказки”.

С помощью контейнерного тега <font> можно настроить шрифт для содержащегося в нем текста. Тег <font> имеет такие же атрибуты, как и тег <basefont>. Особенностью атрибута size для тега <font> является то, что с его помощью можно установить не только абсолютный, но и относительный размер шрифта. В последнем случае значение атрибута size представляет собой целое число со знаком “+” или “–“ для указания, на сколько следует увеличить или уменьшить размер шрифта относительно основного.

Кроме того, можно использовать контейнерные теги <big> и <small>. Тег <big> увеличивает на единицу размер шрифта, а тег <small> задает более мелкий шрифт относительно основного шрифта.

Вставка изображений. Вставка на страницу изображения из файла графического формата производится с помощью тега <img> с указанием адреса файла в качестве значения обязательного атрибута src:

Адрес графического файла – это либо URL-адрес, либо имя файла, возможно, с указанием пути. Путь может быть абсолютным или относительным. Если в качестве адреса файла указано просто имя файла, то браузер будет искать его в той же папке, в которой расположен вызывающий его HTML-документ.

В теге можно использовать атрибут, который принимает в качестве значения адрес графического файла. Можно создать два графических файла: один (picture.jpg) содержит изображение, полученное с высоким разрешением, а другой (picturelow.gif) рисунок, полученный с низким разрешением и занимающий меньший объём. Тогда тег

предпишет браузеру сначала загрузить файл picturelow.gif, а затем по мере загрузки страницы заменить его файлом picture.jpg. Этот метод позволяет ускорить формирование страницы в окне браузера.

Чтобы предусмотреть возможность показа документа в режиме отключения загрузки графики, а также в неграфических браузерах, используется атрибут alt. Этот атрибут альтернативного текста принимает в качестве значения текстовую строку, которая будет появляться вместо графического изображения. Обычно в этой строке указывают краткое название изображения и размеры графического файла. Например:

Положение изображения относительно других элементов документа определяется с помощью атрибута выравнивания align, который может принимать следующие значения:

absbottom – выравнивание нижней границы изображения по нижней границе текущей строки;

absmiddle – выравнивание середины изображения по середине текущей строки;

baseline – выравнивание нижней границы изображения по базовой линии текущей строки;

bottom – то же, что и baseline;

top – верхняя граница изображения выравнивается по самому высокому элементу текущей строки;

texttop – верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки;

left – изображение располагается у левого края окна; текст и другие элементы обтекают изображение справа;

right – изображение располагается у правого края окна; текст и другие элементы обтекают изображение слева;

Для прекращения выравнивания изображений, заданного с помощью align=left или align=right, относительно текста используется тег <br> перевода строки с атрибутом clear. Этот атрибут может принимать три значения:

left – для прекращения обтекания текстом элементов выровненных по левому краю;

right – для прекращения обтекания текстом элементов выровненных по правому краю;

all – для прекращения обтекания текстом элементов выровненных либо по левому, либо по правому краю;

По умолчанию изображение встраивается почти вплотную с текстом или другими элементами документа, что может быть некрасиво. Чтобы этого избежать, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов vspace для верхнего и нижнего полей и hspace для боковых полей в теге <img>. Значение этих атрибутов указываются в виде целых чисел, определяющих размеры полей в пикселях. Например:

Работа с таблицами.

Таблицы состоят из четырех основных частей: названия таблицы, заголовков столбцов, ячеек с данными и нижней части. Таблицы заполняются слева направо, ячейка за ячейкой и строка за строкой, начиная с левого верхнего и заканчивая правым нижним углом.

Все теги формирования таблицы являются контейнерными. Основными из них являются следующие:

<table> – контейнер для всех других тегов таблицы;

<td> – контейнер для данных, содержащихся в ячейке таблицы;

<tr> – контейнер для ячеек, составляющих одну строку таблицы;

<th> – контейнер для данных, содержащихся в ячейке, используемый как заголовок столбца;

<thead> – контейнер для набора строк, используемых в качестве заголовка таблицы и располагающихся выше её основной части;

<tbody> – контейнер для набора строк основной части таблицы, располагающейся ниже её заголовка;

<tfoot> – контейнер для набора строк, располагающихся ниже основной части таблицы; здесь обычно находятся пояснительные подписи и примечания;

<caption> – контейнер для названия таблицы;

<col> – контейнер для задания параметров выравнивания столбцов;

<colgroup> – контейнер для группы столбцов.

Для формирования таблицы тег <table> обязателен. Остальные теги используются по желанию. В большинстве случаев можно обойтись тегами <tr> для строк и <td> для ячеек.

Параметры таблицы. Для управления структурой и внешним видом таблицы, выравниванием данных в ней используются атрибуты и специальные теги.

Толщина и цвет рамок. Чтобы отобразить рамки, в теге <table> следует использовать атрибут border, принимающий в качестве значения число, определяющее толщину внешней рамки таблицы в пикселях. Если атрибут не указан или его значение равно 0, то рамки не отображаются. Допускается не указывать значение атрибута, и тогда рамка будет иметь толщину 1 пиксель.

Цвет рамки определяется следующими атрибутами:

bordercolor – цвет всей рамки;

bordercolordark – цвет нижней и правой частей внешней рамки таблицы; цвет верхней и левой частей рамки ячейки;

bordercolorlight – цвет верхней и левой частей рамки таблицы; цвет нижней и правой частей рамки ячейки.

Перечисленные теги применимы также к тегам <tr>, <td>, <th>. В этом случае они задают цвет рамок ячеек.

Расстояние между ячейками и отступы внутри ячеек. По умолчанию расстояние между рамками смежных ячеек таблицы устанавливается равным 2 пикселям. Чтобы задать требуемое значение, в теге <table> можно использовать атрибут cellspacing, принимающий целочисленные значения. Для задания отступов сверху и с боков внутри ячеек используется атрибут cellpadding, принимающий целочисленные значения, определяющие ширину отступа в пикселях. По умолчанию ширина отступов равна 1.

Расширение ячеек. Сложные по структуре таблицы получаются путем расширения ячеек, которое можно производить как по вертикале, так и по горизонтали. Для этой цели в тегах <td> и <th> служат атрибуты:

colspan – расширение ячеек по горизонтали (столбцам);

rowspan – расширение ячеек по вертикали (строкам).

Атрибуты принимают целочисленные значения, которые указывают, на сколько ячеек требуется расширить данную ячейку.

Размеры таблицы. Размеры таблицы можно регулировать с помощью атрибутов width и height тега <table>. Их значения задаются в пикселях или процентах.

Если атрибуты width и height не указаны, то при отображении таблицы браузер автоматически вычисляет ее размеры в зависимости от многих параметров, таких как размер шрифта, размеры окна просмотра, заданных значений других атрибутов тегов таблицы. Алгоритмы представления таблиц в различных браузерах могут отличаться друг от друга, что при прочих равных условиях сказывается на результатах отображения в окне просмотра.

Если атрибуты width и width указаны, то их значения будут использованы браузером как рекомендуемые. Браузер может попытаться выдержать данные размеры, изменив, например, размеры ячеек или расположение текста в них.

В теге <table> можно использовать атрибут cols для указания количества столбцов таблицы. Указание данного атрибута информирует браузер о структуре таблицы и ускоряет процесс её отображения.

Выравнивание. Горизонтальное выравнивание таблицы относительно окна браузера производится с помощью атрибута align тега <table>. Если использовать атрибут со значениями left или right, то можно организовать обтекание таблицы текстом и даже графическими изображениями соответственно справа и слева, подобно тому, как это делается с графическими изображениями.

Использование атрибута align в других тегах таблицы позволяет выровнять по горизонтали содержимое ячеек. Заданное выравнивание действует только на одну ячейку или группу ячеек в зависимости от того, в каком теге используется этот атрибут.

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

baseline – по базовой линии;

bottom – по нижнему краю;

middle – по середине (значение по умолчанию);

top – по верхнему краю.

Для задания параметров выравнивания группы столбцов таблицы используется контейнерный тег <colgroup> и обычный тег <col>. Эти теги записываются после тега <table> и перед первым тегом <tr>.

Теги <colgroup> и <col> имеют следующие атрибуты:

align – горизонтальное center, left и right.

span – количество смежных столбцов, имеющих одинаковые параметры выравнивания; значение по умолчанию равно 1;

valign – вертикальное выравнивание содержимого ячеек; принимает значения baseline, bottom, middle и top.

width – ширина столбца.

Таблица 1.1 Параметры оформления таблиц

2 Порядок выполнения работы:

2.1 Создать текстовый документ в приложении Блокнот и сохранить с расширением.html или.htm.

2.2 В соответствии с приложение А оформить HTML документ.

2.3 При создании разметки документа использовать таблицу с размерами ячейки равным 250×166, вертикальное выравнивание по верхнему краю, горизонтальное по левому краю.

2.4 Для каждой специальности использовать соответствующее изображение, например

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: