Файл: Учебнометодическое пособие для студентов прикладных и экономических специальностей Киров 2005 ббк 32. 973. 26018. 1я73 В19 Печатается по решению редакционноиздательского совета Вятского государственного гуманитарного университета.pdf

Глава 2. Форматирование HTML-документа
19
• <TT>TT> - текст отображается шрифтом фиксированной ширины (чаще всего шрифт Courier)
•
<BIG>BIG> - текст отображается больше
, чем основной шрифт
•
<SMALL>SMALL> - текст отображается меньше
, чем основной шрифт
• <SUB>SUB> - нижний индекс
• <SUP>SUP> - верхний индекс
Упражнение 2.10
Создайте HTML-документ physical.html и добавьте на страничку текст с использованием описанных выше тэгов физического форматирования:
При использовании тэгов начертания текст может быть
<B>полужирнымB>, <I>курсивнымI> и <U>подчеркнутымU>.
Также можно сделать <B><I>полужирный курсивI>B>,
<U><B>полужирный подчеркнутыйB>U> и даже
<B><I><U>полужирный подчеркнутый курсив!U>I>B>. Кроме того, текст можно <S>зачеркнуть.S>!
Просмотрите результат в окне браузера.
Примечание. Обратите внимание, что при использовании комбинации
парных тэгов следует быть внимательней с порядком их расположения.
Последовательность закрывающих тэгов должна быть «зеркальной» по
отношению к последовательности открывающих тэгов. То есть, если первым
из открывающих тэгов стоит , а затем , то сначала следует
написать тэг , а затем уже .
Упражнение 2.11
Создайте HTML- документ
formula.html и добавьте в него химическую формулу воды – H
2
O и математическую формулу кубической функции – y=x
3
(рис. 2.3).
Рис. 2.3. Использование тэгов нижнего и верхнего индексов
• Для создания верхнего и нижнего индексов используйте соответствующие тэги ^{и _{.
• Результат просмотрите в окне браузера.}}

20
Глава 2. Форматирование HTML-документа
Работа со шрифтом
Некоторые тэги вообще не имеет смысла применять без атрибутов. К таким тэгам можно отнести тэг <FONT>FONT>. Тэг применяется при работе со шрифтом и имеет следующие параметры:
• size – задает размер шрифта (задается в пунктах; по умолчанию размер шрифта принят равным 3);
• face – задает тип шрифта. Очень аккуратно используйте этот атрибут, так как заданный шрифт должен присутствовать на компьютере пользователя - в противном случае браузер подставит шрифт, определенный по умолчанию (как правило, это Times New Roman). Применяйте шрифты, в наличии которых вы уверены, иначе пользователь увидит текст иначе, чем вы. К стандартным шрифтам можно отнести шрифты, поставляемые с Windows 95/98, MS Office;
• color – задает цвет шрифта. Способы задания цвета были рассмотрены в разделе «Настройка внешнего вида страницы».
Упражнение 2.12
Работа с размером шрифта. Создайте HTML-документ font.html и добавьте текст в тело странички:
<FONT size="1">УвеличиваемFONT>
<FONT size="3">размерFONT>
<FONT size="5">символовFONT>
<FONT size="6">текстаFONT>
Просмотрите страничку в окне браузера.
Упражнение 2.13
Работа с цветом шрифта. Добавьте текст в тело странички font.html и просмотрите ее в окне браузера: красный - стой!
желтый - внимание!
зеленый - иди!
Задание 2.4
Создайте HTML-документ rainbow.html и внесите в него текст:
Каждый охотник желает знать
,
где сидит фазан.
Каждое слово окрасьте в соответствующий цвет радуги.

Глава 2. Форматирование HTML-документа
21
Специальные символы
Некоторые символы невозможно просто набрать с клавиатуры: это буквы алфавитов части европейских языков, математические и некоторые другие символы. Некоторые символы, введенные в HTML-документ, могут быть неверно поняты браузером: например, символы «<» и «>» используются браузером для указания тэгов и, возможно, могут быть интерпретированы только так.
Вместо символов этой группы необходимо использовать замену.
Например,
Символ
Замена
< &lt
> &gt
Примечание. Более полную таблицу специальных символов можно
посмотреть в приложении к методическому пособию.
Упражнение 2.14
Создайте HTML-документ symbols.html с заголовком «Использование замены спецсимволов».
В тело документа внесите текст, используя замены символам < и >:
Тэг &ltBR&gt используется для принудительного переноса строк.
Текст, заключенный между парными тэгами &ltBLOCKQUOTE&gt и
&lt/BLOCKQUOTE&gt, будет иметь отступ от левого края окна браузера.
Посмотрите результат в окне браузера.
Задание 2.5
Создайте HTML-документ functions.html, содержащий следующие формулы (для специальных символов <,>,
α,β,
≠
используйте замену):
Функции сокращенного умножения:
а
2
-b
2
=(a+b)(a-b)
(a+b)
2
=a
2
+2ab+b
2
Логарифмы:
Запись log
a
b=х означает, что a
x
=b; здесь a>0, b>0, a
≠
2
Тригонометрия:
sin(
α
+
β
)=sin
α
*cos
β
+cos
α
*sin
β
Создание бегущей строки
Текст абзаца можно сделать «движущимся», т. е. оформить его в виде бегущей строки. Для этого используйте тэг <MARQUEE>..MARQUEE>
Тэг имеет следующие параметры:
• bgcolor – задает цвет фона;

22
Глава 2. Форматирование HTML-документа
• height – задает высоту фоновой полосы (в пикселях или процентах от высоты окна бруазера);
• width – ширина полосы бегущей строки (в пикселях или процентах от ширины окна браузера;
• direction – задает направление бегущей строки:
− left – справа налево (это значение используется по умолчанию),
− right – слева направо,
− up – снизу вверх,
− down – сверху вниз.
• behavior – управляет поведением бегущей строки:
− scroll – дойдя до края, строка уходит из поля зрения, затем появляется с противоположной стороны,
− slide – строка, достигнув края окна, останавливается,
− alternate – строка, достигнув противоположного края окна, меняет свое направление.
• hspace, vspace – задает горизонтальный и вертикальный соответственно отступы у бегущей строки (в пикселях);
• loop – задает количество переходов строки по экрану;
• scrollamount – задает скорость движения строки (в пикселях в секунду);
• scrolldelay – определяет временной интервал (в миллисекундах) между шагами.
Упражнение 2.14
Добавьте в начало вашей странички бегущую строку «Всем привет! Меня зовут…».
• Для этого заключите текст строки между тэгами и

<MARQUEE>Всем привет! Меня зовут…MARQUEE>
• Отформатируйте строку: измените размер шрифта, начертание, цвет текста.
• Изменяя значения атрибутов тэга , измените поведение бегущей строки: при достижении границы окна она должна менять направление, увеличьте скорость перемещения строки.
Задание 2.6
Создайте страничку hello.html с бегущей строкой «Привет!», которая двигается в различных направлениях, подобно бильярдному шарику, отталкиваясь от края окна браузера и меняя свое направление.
Примечание. Используйте вложенную конструкцию > с
различными направлениями.

Глава 2. Форматирование HTML-документа
23
Списки
Очень важный элемент web-страничек – это списки. Они бывают:
нумерованными, например:
Повышение квалификации:
1. Кадровик.
2. Секретарь.
3. Заведующий магазинами.
4. Маркетолог.
маркированными, например:
Предлагаем стоматологические услуги:
• протезирование зубов;
• удаление зубов без боли;
• рентген;
• детский прием.
смешанными, т. е. сочетать в себе элементы того и другого списка.
В нумерованном списке (Оrdered List) каждому элементу предшествует его порядковый номер. Для организации нумерованного списка используются следующие тэги:
<OL> - открывает нумерованный список
<LI> - задает элемент списка (List Item)
OL> - закрывает список
Тэг

имеет два параметра:
• start – задает число, с которого начинается нумерация (по умолчанию с 1);
• type – задает тип нумерации (по умолчанию арабская нумерация
1,2,3,…):
− type=“i” – нумерацияримскими малыми (i, ii, iii, …);
− type=“I” – нумерация римскими заглавными (I,II,III,…);
− type=“a” – нумерация английскими малыми (a, b, c, …);
− type=“A” – нумерация английскими заглавными (A, B, C,…).
В маркированном списке (Unordered List) каждому элементу списка предшествует маркер. Для создания маркированного списка используют следующие тэги:
<UL> - открывает список
<LI> - задает элемент списка
UL> - закрывает список
Тэг

тоже имеет параметр type, с помощью которого можно задавать вид маркера:
− type="circle" – в списке используется маркер °;
− type="square" - в списке используется маркер ƒ;
− type="disc" – в списке используется маркер • (этот маркер используется по умолчанию).

24
Глава 2. Форматирование HTML-документа
Упражнение 2.15
Создайте HTML-документ orderedlist.html и добавьте в него нумерованный список, указанный в примере:
Повышение квалификации

1. Кадровик.


2. Секретарь.
3. 
   
4. Заведующий магазинами.


5. Маркетолог.
6. 
   

• Просмотрите результат в окне браузера.
• C помощью параметра type задайте нумерацию римскими заглавными:

• Просмотрите результат в окне браузера: нумерация сменилась на заглавные римские цифры.
Упражнение 2.16
Создайте HTML-документ unorderedlist.html и добавьте в него маркированный список, указанный в примере:
Предлагаем стоматологические услуги:

• протезирование зубов;


• удаление зубов без боли;


• рентген;


• детский прием.

• Просмотрите результат в окне браузера.
• C помощью параметра type измените стандартный вид маркера на квадратик ƒ:

• Просмотрите результат в окне браузера: маркер с кружка «•» сменился на квадратик «ƒ».
Упражнение 2.17
Создайте HTML-документ kurs.html и добавьте в него смешанный список: во внешнем нумерованном списке используйте нумерацию заглавными римскими цифрами, во вложенном маркированном – маркер «диск» -
•
(см. рис. 2.12):
Изучение курса HTML включает в себя:

1. Введение в HTML


2. Структура HTML-документа


3. Форматирование HTML-документа

Глава 2. Форматирование HTML-документа
25

• Настройка внешнего вида страницы


• Форматирование абзацев


• Форматирование символов


• Списки

Вставка рисунков в HTML-документа

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

Ссылки

Фреймы

Формы

Каскадные таблицы стилей (CSS)

Классы

Слои и позиционирование

Просмотрите результат в окне браузера (рис. 2.4).
Рис. 2.4. Смешанный список в HTML
Задание 2.7
Создайте HTML-документ about.html и перечислите ваши увлечения, используя маркированный список, и дисциплины, которые вы изучаете в университете, используя нумерованный список. Отформатируйте текст: задайте цвет, тип шрифта, начертание, размер шрифта. В конце документа добавьте строчку:
© Иванов И.И. 2005г
Для вставки специального символа
© используйте замену на соответствующий код или имя.

26
Глава 2. Форматирование HTML-документа
Задание 2.8
Измените HTML-документ kurs.html, созданный в упр. 2.17: в скобочках у каждого пройденного раздела напишите примеры изученных тэгов
(используйте замену для символов «<» и «>»). Например,

Структура HTML документа (тэги &ltHTML&gt, &ltBODY&gt,
&ltHEAD&gt и другие)

Результат в окне браузера (рис. 2.5).
Рис. 2.5. Пример пункта списка с указанием изученных тэгов
Вопросы для повторения
1. С помощью параметров какого тэга можно настроить внешний вид всей web-странички? Перечислите эти параметры.
2. С помощью какого тэга можно форматировать абзац? Какие параметры имеет данный тэг?
3. С помощью какого тэга можно создать встроенный заголовок? Сколько уровней имеет встроенный заголовок?
4. В каких случаях нужно применять тэг
? тэг

? тэг
?
5. Чем логическое форматирование символов отличается от физического форматирования?
6. С помощью какого тэга можно управлять цветом, размером, типом шрифта? Какие параметры нужно при этом использовать?
7. Какими тремя способами можно задавать цвет?
8. Что такое специальные символы?
9. Какие виды списков вы знаете? С помощью каких тэгов они задаются?
Контрольное задание
Создайте HTML-документ formatting.html по образцу (см. рис. 2.6).
Страничка должна иметь левое и верхнее поля, фоновый рисунок и название, перечисление оформлено в виде списка.

Глава 2. Форматирование HTML-документа
27
Глава 2. Форматирование HTML-документа
27
Рис. 2.6. Образец HTML-документа formatting.html

28
Глава 3. Графика в HTML-документе
Глава 3. Графика в HTML-документе
Использование рисунков
Большинство браузеров могут вместе с текстом показывать рисунки форматов gif (*.gif), jpg, jpeg (*.jpg), png (*.png) или bmp (*.bmp) .
Поскольку каждый рисунок занимает много времени на отображение на экране (что замедляет загрузку всей странички), не рекомендуется включать слишком большое количество или чрезмерно большие по размеру рисунки в ваш HTML-документ.
Вставка рисунков
Для вставки картинки используется непарный тэг .

src – обязательный параметр тэга , в котором указывается путь к картинке. Если картинка находится в той же папке, что и web-страничка, то достаточно написать имя файла.
Примечание. Подробнее о формировании пути к рисунку смотрите в
предыдущей главе в пункте «Задание фонового рисунка».
Упражнение 3.1
Создайте новый HTML-документ
picture.html с названием странички
«Вставка рисунков в HTML-документ» и разместите на нем рисунок.
Для этого:
• Добавьте в тело странички абзац с текстом, комментирующим, что изображено на рисунке. Например:
Перед вами изображена цапля
• Затем, используя тэг , добавьте на страничку рисунок:
Рис. 3.1. Рисунок, добавленный в HTML-документ

• Посмотрите результат в окне браузера (рис. 3.1)
Дополнительные параметры графических изображений
Тэг имеет дополнительные параметры, с использованием которых можно форматировать рисунок:

Глава 3. Графика в HTML-документе
29
• width – задает ширину рисунка;
• height – задает высоту рисунка;
• align – задает положение рисунка относительно абзаца, внутри которого помещен рисунок. Данный тэг может принимать значения:
− top
–
вывод рисунка на уровне самого высокого элемента абзаца;
− middle
–
вывод рисунка по центру строки абзаца;
− center
–
вывод рисунка по центру строки абзаца;
− bottom
–
вывод рисунка на уровне самого низкого элемента абзаца;
− left – вывод рисунка слева от абзаца;
− right – вывод рисунка справа от абзаца.
• hspace, vspace – задает горизонтальный и вертикальный отступы текста от изображения (задается в пикселях);
• border – задает границу картинки (измеряется в пикселях, по умолчанию border=1, отсутствие границы – border=0);
• alt – задает альтернативный текст картинки.
Упражнение 3.2
Уменьшите размеры рисунка, который вы поместили в HTML-документе
picture.html в упр. 3.1.
Для этого:
• У тэга добавьте параметры width и height с нужными значениями. Например,
width=50 height=100>
• Будьте осторожны – при изменении размеров соблюдайте пропорции!
Преимущества и недостатки уменьшения размеров
изображений средствами HTML
В уменьшении размеров рисунка средствами HTML есть плюсы и минусы.
Минусы уменьшения размеров рисунка при помощи HTML:
• рисунок сохраняет свои реальные размеры и, соответственно, его
«вес» не изменится, даже если вы сделаете огромный рисунок, который «весит» 1
Мб, размером с почтовую марку. А следовательно и вес странички будет большим;
• картинка потеряет много деталей, что в некоторых случаях превращает ее в нечто непонятное.
Плюсы уменьшения размеров рисунка при помощи HTML:
• рисунок можно вписать в дизайн, уменьшив его размер, а при копировании на локальный диск он сохранит свои размеры.