1.3. Упражнения
Упражнение 1. В качестве примера совместного использования свойств текста и шрифтов получить эффект назначения стилей от HTML-кода страницы, содержащей блочные и строчные элементы с различными значениями параметров форматирования.
<HTML>
<HEAD>
<ТIТLЕ>Свойства шрифтов и текста</ТIТLЕ>
</HEAD>
<BODY>
<Р style="font-family:Helvetica Cyr; font-size:12pt; font-style:italic">
Абзац, который воспроизведен курсивным шрифтом Helvetica, имеющим размер 12pt.
<Р style="font-family:Helvetica Cyr; font-size:larger; font-variant:small-caps">
Этот абзац воспроизводится шрифтом Helvetica, имеющим размер larger и начертание small-caps.
<Р style="font-weight:bold">
Это пример набора формулы, имеющей верхний и нижний индексы: S
<SPAN style="vertical-align:sub">
result </SPAN> = Ax
<SPAN style="vertical-align:super"> 2</SPAN>.
<P style="font-weight:bold; text-indent:12mm">
Данный абзац имеет отступ 12 мм, текст отображается полужирным шрифтом
<SPAN style="letter-spacing:3pt">
Times New Roman </SPAN>,
причем название шрифта набрано с разрядкой – межсимвольным расстоянием 3pt.
<Р style="font-size:large; line-height:9pt">
Этот абзац демонстрирует стилевые возможности по отображению « нaexaвшиx» строк.
Размер шрифта large, межстрочный интервал 9pt.
<P>
<BR><BR>
<Р style="font-size:12pt; text-indent:-15mm;
line-height:20pt; margin-left:15mm">
Данный абзац имеет межстрочный интервал 2Opt и отображается шрифтом 12pt.
Первая строка имеет «выстyп» 15 мм.
Чтобы этот «выстyп» поместился в окно браузера, для блока Р задано левое поле 15 мм. </BODY> </HTML>
Выводы. Мы познакомились с приемами совместного использования свойств текста и шрифтов средствами языка HTML для представления данных., научились применять стилевые свойства текста и изменять их вид при помощи атрибутов тегов HTML.
Упражнение 2.. Создание фонового рисунка
<HTML>
<HEAD>
<ТIТLЕ>Фоновый рисунок</ТIТLЕ>
<STYLE type="text/css”>
H1{color:red}
BODY {background-image:url(telecom.jpg); background-color:yellow;
background-repeat:no-repeat}
</STYLE> </HEAD> <BODY>
<H1>Пример фонового изображения</Н1>
</BODY> </HTML>
Выводы. Мы познакомились с приемами совместного использования свойств текста с одним фоновым изображением средствами языка HTML, научились применять стилевые свойства текста и изменять их вид при помощи атрибутов тегов HTML.
Упражнение 3.. Пример задания обтекания текстом
<HTML>
<HEAD>
<ТIТLЕ>Свойства float и clear</TITLE> <STYLE type="text/css”>
#figl {float:left; margin-right:3mm; margin-top:3mm}
#podpis {clear:both} </STYLE>
</HEAD>
<BODY>
<Р>
Значительно более совершенная модель персонального компьютера была разработана в 1976 г. двумя молодыми американцами Стивом Возняком и Стивом Джобсом. </Р>
<А href="applehist.html" title="История компьютеров Apple">
<IMG SRC="apple.gif" ID="figl"></A>
<Р> Свой компьютер они назвали Apple и быстро развернули его производство и продажу. Через пару лет количество заказчиков на ПК стало исчисляться сотнями и тысячами. </Р>
<Р ID="podpis"><I>Koпьютep Apple II</I>
Персональные компьютеры быстро совершенствовались. В 1976 г. для них была разработана операционная система СР/М. Эта система позволила запускать одни и те же программы на различных моделях 8-разрядных компьютеров. </Р>
</BODY> </HTML>
Выводы. Мы рассмотрели форматирование страницы, на которой размещен рисунок и задание обтекания рисунка. Здесь в листе стилей задано обтекание изображения (идентификатор ID="figl"), причем зазор между текстом и границами рисунка определяется свойствами margin-right и margin-top. Обтекание для подрисуночной подписи (ID="podpis") отменяется свойством clear:both. Строка подписи при этом располагается ниже изображения.