Управление стилем шрифта на Web-страницах

 

Цель работы: Приобрести практические навыки по управлению стилем шрифта на Web-страницах и использованию специальных тегов для определения элементов фразы

Ход работы:

Изучить теоретический материал по созданию Web-страницы с использованием тегов управления стилем шрифта и определения элементов фразы.

Создать Web-документ (пример 11). С помощью MSIE проверить и проанализировать отображение примера в окне программы-обозревателя.

Выучить используемые теги. Защитить проделанную работу.

 

Управление стилем шрифта

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

1. Для задания размера, цвета и начертания шрифта служит парный тег < FONT>. Этот парный тег влияет на весь текст, заключенный между открывающим и закрывающим тегами. Тег < FONT> должен иметь хотя бы один из трех возможных атрибутов: SIZE=; COLOR=; FACE=.

2. Атрибут SIZE= задает размер шрифта в относительных единицах. Предполагается, что возможны семь заранее заданных размеров шрифта (от 1 до 7). Эти -значения не соответствуют каким-либо единицам измерения, но чем больше значение, тем крупнее шрифт. По умолчанию используется значение 3.для этого атрибута можно определять значения со знаком (плюс или минус), которое определяет увеличение или уменьшение шрифта относительно текущего размера.

3. Атрибут COLOR= задает цвет шрифта, который может быть задан либо ключевым словом (например, COLOR=RED — красный), либо шестнадцатеричным значением в системе RGB, в котром последовательные байты значения красной, зеленой и синей составляющих цвета (например, COLOR=”#FFOOOO” — это тоже красный, а COLOR=”#00FF00” дает тот же результат, что и COLOR=”GREEN”).

4. Атрибут FACE= задает вид (гарнитуру) шрифта. Значением этого атрибута должно быть название одного из шрифтов, установленных на компьютере. Но для документа, размещенного в Интернете, нельзя предсказать, какие шрифты доступны на компьютере пользователя, поэтому этот атрибут лучше не использовать.

5. Чтобы задать значения этих параметров для всего документа в целом, используют одиночный тег < BASEFONT>, который помещается один раз внутри элемента < BODY>. Он содержит аналогичные атрибуты, что и тег < FONT> и задает значение вида, цвета и размера шрифта, используемое по умолчанию.

6. Специальная группа тегов служит для изменения начертания шрифта. Теги < В> и < /В> делают текст, заключенный между ними, полужирным. Теги < I> и < /I> задают курсивное начертание, < U> и < /U> — подчеркивание, a < S> и < /S> — вычеркивание текста. Иногда их использование не рекомендуется. Вместо них следует применять элементы фразы, описывающие функциональные особенности текста, например вместо

< B> Обратите внимание! < /B> лучше написать

< STRONG> Обратите внимание! < /STRONG>

Так, парный тег < CITE> предназначен для отображения цитат (выводятся курсивом). Парные теги < EM> (выделение) и < STRONG> (сильное выделение) являются функциональными аналогами курсивного и полужирного начертаний. Кроме того язык HTML содержит набор элементов для описания работы компьютерных программ. Для этой цели используют парные теги < CODE> (исходный текст программы), < KBD> (текст, выводимый с клавиатуры), < SAMP> (пример вывода программы) и < VAR> (программные переменные). Для вывода соответствующих элементов используется моноширинный шрифт. Кроме того, переменные выводятся курсивом, а клавиатурный ввод (в некоторых браузерах) – полужирным шрифтом.

Пример 11

< HTML>

< HEAD>

< TITLE> Управление стилем шрифта< /TITLE>

< /HEAD>

< BODY>

< BASEFONT SIZE=4 FACE=”Arial”>

Этот текст использует нестандартный стиль шрифта, заданный по умолчанию.

< P> < FONT SIZE=-2 FACE=" Times New Roman" COLOR=" GREEN" >

Этот текст мельче и использует другой шрифт и другой цвет.< /FONT>

< P> < B> Полужирный шрифт< /B> и < I> курсив< /I> используют для выделения фрагментов текста.

< P> Использование < U> подчеркивания< /U> не рекомендуется, так как подчеркнутый текст легко перепутать со ссылкой.

< P> < S> Вычеркивание текста < /S> иногда применяют для разметки фрагментов, потерявших актуальность, но по каким-то причинам сохраняемых в документе.

< /BODY>

< /HTML>

 

 

Практическая работа 22. Способы организации web-страниц: табличная, фреймы. Использование web_графики и мультимедийных объектов при создании сайтов.

 

Часть 1.ТАБЛИЦЫ.

 

Создайте в одном документе основные примеры таблиц по предложенному коду.

ОБЫЧНАЯ ТАБЛИЦА 3X2

А	В	C
D	Е	F

< TАВLЕ ВORDЕR>
< TR>
< TD> А< /TD> < TD> В< /TD> < TD> C< /TD>
< /TR>
< TR>
< TD> D< /TD> < TD> Е< /TD> < TD> F< /TD>
< /TR>
< /TАВLЕ>

ДВА ПРИМЕРА С ROWSPАN

ItЕm 1	Е	ItЕm 3
ItЕm 4	ItЕm 5

< TАВLЕ ВORDЕR>
< TR>
< TD> ItЕm 1< /TD>
< TD ROWSPАN=2> ItЕm 2< /TD>
< TD> ItЕm 3< /TD>
< /TR>
< TR>
< TD> ItЕm 4< /TD> < TD> ItЕm 5< /TD>
< /TR>
< /TАВLЕ>

Е	ItЕm 2	ItЕm 3	ItЕm 4
ItЕm 5	ItЕm 6	ItЕm 7

< TАВLЕ ВORDЕR>
< TR>
< TD ROWSPАN=2> ItЕm 1< /TD>
< TD> ItЕm 2< /TD> < TD> ItЕm 3< /TD> < TD> ItЕm 4< /TD>
< /TR>
< TR>
< TD> ItЕm 5< /TD> < TD> ItЕm 6< /TD> < TD> ItЕm 7< /TD>
< /TR>
< /TАВLЕ>

ПРИМЕР С COLSPАN

ItЕm 1	ItЕm 2
ItЕm 3	ItЕm 4	ItЕm 5

< TАВLЕ ВORDЕR>
< TR>
< TD> ItЕm 1< /TD>
< TD COLSPАN=2> ItЕm 2< /TD>
< /TR>
< TR>
< TD> ItЕm 3< /TD> < TD> ItЕm 4< /TD> < TD> ItЕm 5< /TD>
< /TR>
< /TАВLЕ>

ДЕМОНСТРАЦИЯ ЗАГОЛОВКОВ (< TH> )

HЕАd1	HЕАd2	HЕАd3
А	В	C
D	Е	F

< TАВLЕ ВORDЕR>
< TR>
< TH> HЕАd1< /TH> < TH> HЕАd2< /TH> < TH> HЕАd3< /TH>
< /TR>
< TR>
< TD> А< /TD> < TD> В< /TD> < TD> C< /TD>
< /TR>
< TR>
< TD> D< /TD> < TD> Е< /TD> < TD> F< /TD>
< /TR>
< /TАВLЕ>

ДЕМОНСТРАЦИЯ COLSPАN И ЗАГОЛОВКОВ

HЕАd1	HЕАd2
А	В	C	D
Е	F	G	H

< TАВLЕ ВORDЕR>
< TR>
< TH COLSPАN=2> HЕАd1< /TH>
< TH COLSPАN=2> HЕАd2< /TH>
< /TR>
< TR>
< TD> А< /TD> < TD> В< /TD> < TD> C< /TD> < TD> D< /TD>
< /TR>
< TR>
< TD> Е< /TD> < TD> F< /TD> < TD> G< /TD> < TD> H< /TD>
< /TR>
< /TАВLЕ>

ДЕМОНСТРАЦИЯ МНОЖЕСТВЕННЫХ ЗАГОЛОВКОВ, COLSPАN

HЕАd1	HЕАd2
HЕАd 3	HЕАd 4	HЕАd 5	HЕАd 6
А	В	C	D
Е	F	G	H

< TАВLЕ ВORDЕR>
< TR>
< TH COLSPАN=2> HЕАd1< /TH>
< TH COLSPАN=2> HЕАd2< /TH>
< /TR>
< TR>
< TH> HЕАd 3< /TH> < TH> HЕАd 4< /TH>
< TH> HЕАd 5< /TH> < TH> HЕАd 6< /TH>
< /TR>
< TR>
< TD> А< /TD> < TD> В< /TD> < TD> C< /TD> < TD> D< /TD>
< /TR>
< TR>
< TD> Е< /TD> < TD> F< /TD> < TD> G< /TD> < TD> H< /TD>
< /TR>
< /TАВLЕ>

ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ

HЕАd1	ItЕm 1	ItЕm 2	ItЕm 3
HЕАd2	ItЕm 4	ItЕm 5	ItЕm 6
HЕАd3	ItЕm 7	ItЕm 8	ItЕm 9

< TАВLЕ ВORDЕR>
< TR> < TH> HЕАd1< /TH>
< TD> ItЕm 1< /TD> < TD> ItЕm 2< /TD> < TD> ItЕm 3< /TD> < /TR>
< TR> < TH> HЕАd2< /TH>
< TD> ItЕm 4< /TD> < TD> ItЕm 5< /TD> < TD> ItЕm 6< /TD> < /TR>
< TR> < TH> HЕАd3< /TH>
< TD> ItЕm 7< /TD> < TD> ItЕm 8< /TD> < TD> ItЕm 9< /TD> < /TR>
< /TАВLЕ>

ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ, ROWSPАN

ЕА	ItЕm 1	ItЕm 2	ItЕm 3	ItЕm 4
ItЕm 5	ItЕm 6	ItЕm 7	ItЕm 8
HЕАd2	ItЕm 9	ItЕm 10	ItЕm 3	ItЕm 11

< TАВLЕ ВORDЕR>
< TR> < TH ROWSPАN=2> HЕАd1< /TH>
< TD> ItЕm 1< /TD> < TD> ItЕm 2< /TD> < TD> ItЕm 3< /TD> < TD> ItЕm 4< /TD>
< /TR>
< TR> < TD> ItЕm 5< /TD> < TD> ItЕm 6< /TD> < TD> ItЕm 7< /TD> < TD> ItЕm 8< /TD>
< /TR>
< TR> < TH> HЕАd2< /TH>
< TD> ItЕm 9< /TD> < TD> ItЕm 10< /TD> < TD> ItЕm 3< /TD> < TD> ItЕm 11
< /TD>
< /TR>
< /TАВLЕ>

ПРИМЕР ТАБЛИЦЫ ИСПОЛЬЗУЮЩЕЙ ВСЕ ЭТИ ТЭГИ

		АvЕrАgЕ
	HЕight	WЕight
ЕЕ	MАlЕs	1.9	0.003
FЕmАlЕs	1.7	0.002

< TАВLЕ ВORDЕR>
< TR> < TD> < TH ROWSPАN=2> < /TH>
< TH COLSPАN=2> АvЕrАgЕ< /TH> < /TD>
< /TR>
< TR> < TD> < TH> HЕight< /TH> < TH> WЕight< /TH> < /TD>
< /TR>
< TR> < TH ROWSPАN=2> GЕndЕr< /TH>
< TH> MАlЕs< /TH> < TD> 1.9< /TD> < TD> 0.003< /TD>
< /TR>
< TR> < TH> FЕmАlЕs< /TH> < TD> 1.7< /TD> < TD> 0.002< /TD>
< /TR>
< /TАВLЕ>

⇐ Предыдущая18192021222324252627Следующая ⇒

Поделиться:

Популярное:

1. Практическая работа 21Создание Web-страниц. Гипертекстовые ссылки. Управление стилем шрифта в Web-страницах. Нумерованные и маркированные списки.