Лекции.ИНФО


Управление стилем шрифта на 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Е>









Читайте также:

Последнее изменение этой страницы: 2016-03-22; Просмотров: 125;


lektsia.info 2017 год. Все права принадлежат их авторам! Главная