Перечислите все атрибуты тега
FONT
Лабораторная работа №2
Форматирование HTML-документа
Цель работы научить студентов:
форматированию фрагментов
HTML-документа,
работе с гиперссылками и с изображениями
в HTML-документах,
использованию шрифтового оформления.
1. Форматирование шрифта
HTML допускает два подхода
к шрифтовому выделению фрагментов
текста. С одной стороны, можно
прямо указать, что шрифт на
некотором участке текста должен
быть жирным, наклонным или подчеркнутым,
то есть изменить физический стиль
текста. С другой стороны, можно пометить
некоторый фрагмент текста как имеющий
некоторый отличный от нормального логический стиль,
оставив интерпретацию этого стиля броузеру.
Поясним это на примерах.
1.1. Физические
стили
Под физическом стилем принято понимать
прямое указание броузеру на модификацию
текущего шрифта с использованием различных
начертаний для выделения текстовой информации
в документах. Вот короткий список стилей,
поддерживаемых большинством броузеров:
underline (подчеркивание)
mono spaced (type writer - с использованием фиксированных шрифтов)
Вы можете комбинировать различные
виды стилей, например жирный и наклонный.
Стиль |
Элемент или тег |
Результат |
bold |
<B> Этот текст жирный </B> |
Этот текст жирный |
italic |
<I> Этот текст наклонный </I> |
Этот текст наклонный
|
mono
spaced |
<TT> Этот текст с моноширинным
шрифтом </TT> |
Этот текст с моноширинным шрифтом |
underline |
<U>Этот текст с подчеркиванием
</U> |
Этот текст с
подчеркиванием |
Комбинирование стилей позволяет
вам отображать в одной строке несколько
элементов различными стилями, например:
<b>Жизнь</b> – <i>это
<b>песня!</b></i>
Жизнь – это песня!
Таким образом, все, что находится
между метками <B> и </B>, будет написано жирным шрифтом.
Текст между метками <I> и </I> будет написан наклонным шрифтом.
Текст между метками <U> и </U> будет написан с подчеркиванием.
Несколько особняком стоит пара
меток <TT> и </TT>. Текст, размещенный между этими
метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную
ширину символа.
Дополнительные стили:
Стиль |
Элемент или тег |
Результат |
Big |
Этот текст <BIG> большой </BIG> |
Этот текст большой |
Small |
Этот текст <SMALL> маленький
</SMALL> |
Этот текст маленький
|
Sub |
Этот текст <SUB> подстрочник
</SUB> |
Этот текст подстрочник |
Sup |
Этот текст <SUP> надстрочник
</SUP> |
Этот текст надстрочник |
Теперь рассмотрим один пример
с использованием этих тегов.
<html>
<body>
<p>Формула воды H2O. В
данном параграфе формула набрана
без использования
тега <sub></p>
<p>Формула воды H<sub>2</sub>O.
В данном параграфе формула набрана с
использованием тега <sub>.
Формула выглядит более привычно.</p>
<p>2^4=16. В данном параграфе
формула набрана без использования
тега
<sub></p>
<p>2<sup>4</sup>=16. В данном
параграфе формула набрана с использованием
тега <sub>. Формула выглядит
более привычно.</p>
</body>
</html>
Результат работы выглядит как
на рисунке.
1.2. Логические
стили
При использовании логических
стилей автор документа не может знать
заранее, что увидит на экране читатель.
Разные браузеры толкуют одни и те же метки
логических стилей по-разному. Некоторые
браузеры игнорируют некоторые метки
вообще и показывают нормальный текст
вместо выделенного логическим стилем.
Вот самые распространенные логические
стили.
<EM> ... </EM>
От английского emphasis — акцент, т.е.
курсив .
<STRONG> ...
</STRONG>
От английского strong emphasis — сильный
акцент, т.е. полужирный.
<CODE> ... </CODE>
Рекомендуется использовать
для фрагментов исходных текстов.
<SAMP> ... </SAMP>
От английского sample — образец.
Рекомендуется использовать для демонстрации
образцов сообщений, выводимых на экран
программами.
<KBD> ... </KBD>
От английского keyboard — клавиатура.
Рекомендуется использовать для указания
того, что нужно ввести с клавиатуры.
<VAR> ... </VAR>
От английского variable — переменная.
Рекомендуется использовать для написания
имен переменных, этот шрифт также напоминает
курсив.
Подытожим наши знания о логических
и физических стилях с помощью
примера
3.1. Заодно Вы сможете увидеть, как Ваш
браузер показывает те или иные логические
стили. Пример 3-1:
<HTML> <HEAD> <TITLE>Пример
3.1 </TITLE> </HEAD>
<BODY> <CENTER> <H1>Шрифтовое
выделение фрагментов текста</H1>
<HR>
<P>Теперь мы знаем, что фрагменты
текста можно выделять
<BR> <B>жирным</B> или
<BR> <I>наклонным</I> шрифтом
или
<BR> <U> с подчеркиванием
</U> шрифтом.
<BR> Кроме того, можно включать
в текст фрагменты
с фиксированной шириной символа
<TT>(имитация пишущей
машинки)</TT> <HR>
<P>Кроме того, существует
ряд логических стилей:
<P><EM>EM - от английского
emphasis - акцент,
то же самое, что курсив </EM><BR>
<STRONG>STRONG - от английского
strong emphasis - сильный акцент,
то же самое, что полужирный
</STRONG><BR>
<CODE>CODE - для фрагментов
исходных текстов</CODE><BR>
<SAMP>SAMP - от английского
sample - образец </SAMP><BR>
<KBD>KBD - от английского
keyboard - клавиатура</KBD><BR>
<VAR>VAR - от английского
variable - переменная </VAR> <HR>
</CENTER></BODY>
</HTML>
|
Результат этой программы:
2.Тело документа
Теги (метки) <BODY> и </BODY> содержат основное тело документа.
Тело документа может содержать параметры
в виде атрибутов. Основные атрибуты метки <BODY>:
bgcolor Определяет цвет фона документа. Синтаксис
цвета см. ниже.
text Определяет цвет текста.
link Определяет цвет ключевых слов для гипертекстовых
ссылок.
vlink Определяет цвет использованных гипертекстовых
ссылок.
alink Определяет цвет гипертекстовой ссылки
в момент нажатия на нее.
background Определяет изображение, служащее фоном,
т.е. рисунок обоя.
Цвета в HTML указываются с помощью
шестнадцатеричной системы кодирования.
Эта система основана на трех компонентах
— красном (Red), зеленом (Green) и синем (Blue),
отсюда и ее название — RGB, по первым буквам
названий этих цветов. Каждый из компонентов
соответствует шестнадцатеричному числу
от 00 до FF (0 и 255 в десятичной системе счисления).
Эти три значения затем объединяются в
одно значение, которому предшествует
знак #, например #800080, что соответствует
фиолетовому цвету. Поскольку немногие
могут определить цвет по его шестнадцатеричному
коду, в HTML можно использовать английские
стандартные названия цветов, которые
перечислены вместе с их шестнадцатеричными
значениями в нижней табл.
Названия цветов и значения #RGB
Названия |
коды |
Названия |
коды |
| |
Black (черный) |
"#000000" |
|
Green (зеленый) |
"#008000" |
| |
Silver (серебристый) |
"#C0C0C0" |
|
Lime (лимонный) |
"#00FF00" |
| |
Gray (серый) |
"#808080" |
|
Olive (олифковый) |
"#808000" |
| |
White (белый) |
"#FFFFFF" |
|
Yellow (желтый) |
"#FFFF00" |
| |
Maroon (темнобордовый) |
"#800000" |
|
Navy (темносиний) |
"#000080" |
| |
Red (красный) |
"#FF0000" |
|
Blue (синий) |
"#0000FF" |
| |
Purple (фиолетовый) |
"#800080" |
|
Teal (Зеленоголубой) |
"#008080" |
| |
Fuchsia (розовый, фуксия) |
"#FF00FF" |
|
Aqua (светлосиний) |
"#00FFFF" |
Пример: <body bgcolor
= white text = black
link = red vlink = maroon
alink = fuschia background
= "face.jpg">
При
определении цветов для документа HTML вы
можете использовать либо названия цветов,
либо их коды. Например, следующие строки
идентичны:
<BODY
BGCOLOR=”#FFFFFF”>
<BODY BGCOLOR=”WHITE”>
3.HR - горизонтальные линии
Горизонтальные линии можно
использовать, чтобы указать на изменение
темы.
Закрывающие метки в элементах HR запрещены. Допустимые атрибуты: ALIGN, SIZE и WIDTH.
Атрибут
Назначение
align С помощью этого атрибута можно
задать выравнивание линии по левому краю (align=left), по правому краю (align=right) или по центру (align=center). По умолчанию, линия выравнивается
по центру.
width Длину линии можно указать в
пикселях (например, width=100) или в процентном отношении
(например, width="50%") к ширине окна броузера.
Если используются проценты, добавьте
знак процента к числу. По умолчанию установлено
100%.
size Высота линии в пикселях, этот
атрибут может принять значения в виде
целых чисел, например, 4, или 8, или 16 и т.д.
color
Для указания цвета разделительной
линии можно использовать шестнадцатеричное
значение RGB или стандартное
название цвета.
Горизонтальные
линии следует использовать в тех случаях,
когда требуется жесткое разделение текста.
Основные принципы использования линий
заключаются в том, что они никогда не
должны располагаться между заголовком
и последующим текстом. Их также не следует
использовать для создания пустот в документе.
Пустые места, не заполненные текстом,
играют важную роль в оформлении страниц.
Конечно, излишек пустых мест на страницах
портит общий вид документа; однако если
свободного места совсем нет, то страницы
выглядят переполненными.
<HR ALIGN=CENTER
WIDTH=50% SIZE=5 COLOR=NAVY>
В нижнем примере приведена
небольшая коллекция горизонтальных линий.
<html> <head> <title>Пример
4</title> </head>
<body> <H1 ALIGN=CENTER>Коллекция
горизонтальных линий</H1>
<HR SIZE=2 WIDTH=100% COLOR=red>
<BR>
<HR SIZE=4 WIDTH=50% COLOR=green>
<BR>
<HR SIZE=8 WIDTH=25% COLOR=blue>
<BR>
<HR SIZE=16 WIDTH=12% COLOR=black> <BR>
</body>
</html> |
Результат данного фрагмента
программы приведен ниже:
Коллекция горизонтальных линий
4. Добавление изображений
в документ HTML
Поместить изображение в документ HTML
очень просто. Введите этот тег в то место
документа HTML, где вы хотите поместить
изображение. Затем замените имя файла на URL рисунка.
<IMG SRC=”имя файла”>
Здесь SRC обязательный атрибут. Указывает
путь к изображению – файлу формата GIF,
JPEG или PNG.
По умолчанию, броузер отобразит
это изображение в указанном месте, справа
от текста или другого объекта, который
непосредственно предшествует изображению.
Посмотрите на пример, приведенный
ниже. Он показывает одно и то же изображение
три раза. Каждый раз изображение отображается
в строке, поэтому броузер располагает
его справа от предшествующего текста.
<HTML> <HEAD> <TITLE> Использование
тега IMG </TITLE> </HEAD>
<BODY> <Р> <IMG SRC=”dog.gif”>
Этот текст идет сразу же после рисунка.
<Р> Этот
текст разорван <IMG SRC=”dog.gif”> рисунком.
<Р> В этом случае рисунок появляется после текста.
<IMG SRC=” dog.gif”>
</BODY> </HTML>
Выравнивание
текста с изображениями в строке осуществляется
атрибутом ALIGN. По умолчанию при помещении
изображения в строке текст выравнивается
по нижней части изображения. Возможно,
вы захотите изменить такое выравнивание,
поскольку при этом остается слишком много
пустого места на странице. Эту настройку
можно изменить с помощью атрибута align в теге <img>. В табл.
приведены значения, которые можно присвоить
этому атрибуту.