С использованием
описанных тегов вы можете создать простой
HTML-документ. Однако, следующие разделы
позволят вам существенно улучшить внешний
вид ваших документов и опишут новые возможности
HTML-языка.
1.4.
Тег FONT
Для управления внешним видом текста
в HTML служит элемент FONT. Элемент FONT является
контейнером, который открывается тегом < FONT > и закрывается тегом
</FONT>. Если в открывающем теге не указаны
атрибуты, то элемент font не будет оказывать
никакого воздействия.
Элемент
FONT можно использовать внутри любого текста.
С помощью атрибутов face (гарнитура), size (размер) и COLOR (цвет)
можно радикально изменить внешний вида
текста в документах.
FACE позволяет выбрать шрифт,
который вы хотите использовать при отображении
вашего документа. Параметр атрибута face — название шрифта.
Название, указанное в атрибуте, должно
точно совпадать с названием шрифта на
компьютере пользователя — в противном
случае броузер игнорирует этот атрибут
и использует шрифт, заданный пользователем
по умолчанию. Прописные и строчные буквы
в названии шрифта игнорируются, а пробелы
являются обязательными. Ниже показано,
как задать определенный шрифт.
<HTML> <HEAD> <TITLE>Выбор
типа шрифта</TITLE> </HEAD>
<BODY>
<FONT FACE=”Arial”>Здесь выбран
другой тип шрифта</FONT>
</BODY>
</HTML>
Но для документа, размещенного в Интернете,
нельзя предсказать, какие шрифты доступны
на компьютере пользователя, поэтому в
атрибуте face можно указать несколько
названий шрифтов через запятую. Броузер
просматривает список шрифтов слева направо
и использует первый подходящий шрифт.
Ниже используется несколько типа
шрифтов.
<HTML> <HEAD> <TITLE>Пример
выбора шрифта</TITLE> </HEAD>
<BODY>
<FONT FACE=”Verdana”,
“Arial”, “Helvetica”> Это пример выбора шрифта.
</FONT>
</BODY>
</HTML>
В этом примере указан в качестве основного
варианта шрифт Verdana, но кроме того перечислены
также допустимые шрифты Arial и Helvetica.
Чтобы задать значения
параметров шрифта для всего документа
в целом, используют одиночный тег <BASEFONT>. Он содержит аналогичные атрибуты
и задает значение вида, цвета и размера
шрифта, используемое по умолчанию.
SIZE позволяет указать высоту знаков
текста. Размер шрифта указывается в условных
единицах от 1 до 7. Эти значения не соответствуют
каким-либо единицам измерения, но чем
больше значение, тем крупнее шрифт. По
умолчанию используется значение 3. Атрибут
size можно использовать двумя различными
способами: указать абсолютный размер
шрифта, например SIZE=5, или относительный
размер, например SIZE=+2. Второй способ чаще
применяется в том случае, если был указан
основной шрифт basefont.
Приведенный ниже пример показывает
эффект установки абсолютного размера
шрифта:
Фрагмент HTML программы |
Результат на экране |
<font sіze=1> sіze=1 </font> <br>
<font sіze=2> sіze=2 </font> <br>
<font sіze=6> sіze=6 </font> <br>
<font sіze=7> sіze=7 </font> <br> |
sіze=1
sіze=2
….
sіze=6
sіze=7 |
Следующий пример показывает эффект
относительного размера шрифта при базовом
размере шрифта, равном 3:
sіze=-2 sіze=-1 sіze=+1 sіze=+2
sіze=+3 sіze=+4 |
COLOR задает цвет текста таким же образом,
как и название шрифта или его размер.
Атрибут color воспринимает
либо шестнадцатеричное значение RGB-формата
(например, #FF0000 – красный), либо стандартные
названия цветов (например, RED — это тоже
красный).
Цвет указывается в RGB-формате
(Red-Green-Blue) посредством указания размерности
каждой компоненты цвета в шестнадцатиричном
формате. Например, белый цвет обозначается
"000000", черный - "FFFFFF", синий -
"0000FF" и т.п.
<FONT COLOR="#FF0000">
Красный </FONT>
<FONT COLOR="#00FF00">
Зеленый </FONT>
<FONT COLOR="#0000FF">
Синий </FONT>
Красный Зеленый Синий
Ниже приведен более полный
пример с использованием этого атрибута.
<HTML>
<HEAD>
<TITLE>Пример выбора цвета</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”#FF0000”>
Этот текст имеет красный цвет</FONT><BR>
<FONT COLOR= “GREEN”>Этот
текст имеет зеленый цвет</ FONT><BR
>
</BODY> </HTML>
Попробуйте использовать различные
цвета и типы шрифтов для различных фрагментов
текста, как указано в следующем примере.
<HTML>
<HEAD> <TITLE> Управление
стилем шрифта </TITLE>
</HEAD>
<BODY>
<BASEFONT
SIZE=5 FACE="Arial"> <HR>
Этот текст использует пятый
размер шрифта Arial, заданного по
умолчанию.
<HR>
<P> <FONT SIZE= 2
FACE="Times New Roman" COLOR="GREEN">
Этот текст мельче
и использует шрифт Times New Roman и другой –
зеленый
цвeт. </FONT>
<HR>
</BODY>
</HTML> |
Результат этого фрагмента на
экране:
1.5 Специальные
теги HTML
Следующие теги позволят
сделать ваш HTML-документ более функциональным.
Тег адреса <ADDRESS> используется для выделения автора документа
и его адреса (например, e-mail). Синтаксис:
<ADDRESS> Адрес-автора </ADDRESS>
Escape-последовательности. Некоторые
символы являются управляющими символами
в HTML и не могут напрямую использоваться
в документе в явном виде. Для их отображения используются
символьные элементы CER (Character Entity Reference)
или escape-последовательности.
Для представления символа "<"
в теле документе HTML используется < , а для символа ">" используется > . Символьный элемент отображается
в виде:
&имя_символа;
или
#номер_символа;
Например, знак меньше (<) изображается
в виде: < или <.
Преимущество использования
имени вместо номера состоит в том, что
имя легче запомнить. Недостаток состоит
в том, что не все браузеры поддерживают
самые новые имена объектов, в то время
как поддержка номеров объектов реализована
очень хорошо почти во всех браузерах.
Обратите внимание, что символьные объекты
зависят от регистра символов.
Следующий пример позволит поэкспериментировать
с символьными объектами.
<html>
<body>
<p>Это символьный
объект: �</p>
<p>
Попробуйте заменить
номер (000) на другой номер (например, 169),
сохраните измененный текст и перезагрузите
страницу в браузере, чтобы увидеть
результат.
</p>
</body>
</html>
Неразрывный
пробел. Наиболее часто используемым
символьным объектом является неразрывный
пробел –  . Обычно браузер удаляет лишние
пробелы и вместо нескольких использует
один, если необходимо вставить в текст
пробелы, используется символьный объект  . Еще одно частое применение
неразрывного пробела заполнение пустых
ячеек в таблице, так большинство браузеров
отображает ячейки, в которых ничего нет
некрасиво.
Таблица наиболее часто
используемых символьных объектов
Результат |
Описание |
Имя объекта |
Номер объекта |
| |
неразрывный пробел |
|
  |
< |
меньше |
< |
< |
> |
больше |
> |
> |
& |
амперсанд |
& |
& |
" |
двойная кавычка |
" |
" |
¢ |
цент |
¢ |
¢ |
£ |
фунт стерлингов |
£ |
£ |
¥ |
йена |
¥ |
¥ |
§ |
параграф |
§ |
§ |
© |
авторское право |
© |
© |
® |
зарегистрированная торговая
марка |
® |
® |
× |
умножение |
× |
× |
÷ |
деление |
÷ |
÷ |
Полный список символьных объектов HTML
можно посмотреть в приложении данного
пособия или в справочниках объектов
HTML.
Одной
из особенностей является замена символов
во 2-ой части символьной таблицы (после
127-ого символа) на escape-последовательности
для передачи текстовых файлов с национальными
языками по 7-битным каналам.
Внимание! Escape-последовательности
чувствительны к регистру: НЕЛЬЗЯ использовать
< вместо < .
Задания
Упражнение
1
1. Откройте программу
Блокнот (Notepad).
2. Наберите текст:
<Hl> Здравствуйте, друзья </Hl>.
3. Сохраните текст
под именем l.htm в своей папке
и закройте Блокнот.
4. Теперь найдите
файл l.htm в своей папке и двойным щелчком
по нему активизируйте броузер с Вашими
данными. Теперь измените вид документа,
для этого:
5. Вернитесь в
исходный текст с помощью команд
Вид – В виде HTML из броузера.
Откроется Блокнот,
измените текст:
<H2> Здравствуйте,
друзья </H2>
и сохраните его
под прежним именем l.htm.
7. Вернитесь к броузеру
через Панель задач и нажмите на панели
инструментов кнопку Обновить.
Размер символов в надписи изменится.
8. Вернитесь к
Блокноту, измените текст:
<Hl>Здравствуйте,
друзья</Hl>
<H2> Здравствуйте, друзья </H2>
<H3>Здравствуйте,
друзья </H3>
и сохраните его под прежним именем l.htm в своей папке.
9. Вернитесь к броузеру
и нажмите на панели инструментов
кнопку Обновить.
10. Поэкспериментируйте,
оформляя текст с помощью других
тегов.
Упражнение 2
1. Создайте на диске отдельную
папку для своей будущей web-страницы. Вы
можете назвать ее своим именем (фамилией).
Например, D:\Askarova.
2. Запустите Блокнот.
3. Наберите текст HTML, в
который включите все теги, что
мы разобрали. Между тегами <BODY>
и </BODY> напишите несколько слов
о себе.
4. В меню Файл (File) выполните
команду Сохранить как. В диалоговом окне
Сохранения файла найдите созданную папку,
укажите в поле Тип файла Все
файлы и сохраните файл, назвав его своим
именем (фамилией), и указав расширение
HTM. Например, D:\ASKAROVA\Alia.HTM
5. Закройте Блокнот. Вы
уже создали реальный электронный документ.
Можете посмотреть, что у Вас получилось.
Для этого:
6. Откройте папку D:\ASKAROVA и загрузите файл Alia.HTM, при этом активизируется
броузер Internet Explorer с Вашим файлом.
В меню Вид выполните команду В виде HTML. Откроется Блокнот с исходным текстом, как в упражнении 1. Измените некоторые теги или их атрибуты, а также вставленные в них тексты по Вашему усмотрению, далее сохраните исходный файл.
Затем перейдите в броузер щелчком по имени файла на Панели задач и нажмите кнопку Обновить. Снова перейдите
в исходный текст и т.д. Обратите внимание
на то, что если вы не забыли указать название
в теге TITLE, то оно отразилось в верхней строке броузера.
Упражнение 3
Подготовьте HTML-документ,
содержащий информацию о своем вузе так,
чтобы размещенная информация имела несколько
уровней вложенности.
Упражнение 4
Составьте HTML-документ
с информацией о своей студенческой группе.
При этом используйте теги параграфов,
перевода строки и горизонтальных линий.
Упражнение 5
Подготовьте HTML-документ
для размещения на web-странице Вашего расписания
занятий.
Каждый день недели
оформляйте как новый параграф и отделяйте
друг от друга с помощью горизонтальной
линии.
Текст снабжайте
комментариями для служебного пользования
(например, время начала и окончания пары,
Фамилия, И.О. преподавателя).
Упражнение 6
Создайте объявление в виде
HTML-документа о предстоящем заседании
студсовета. Посмотрев текст объявления
с помощью программы Іnternet Explorer измените
и оформите его по вашему усмотрению. Окончательный
вариант работы сохраните на диске.
Контрольные вопросы
Что такое Web-страница и какие существуют способы ее создания?
Дайте определения терминам
языка HTML – тег (метка), гиперссылка.
Почему для разработки Web-страниц
используется специальный язык разметки гипертекста?
Какова общая структура документа
HTML?
Какие теги должны присутствовать
в HTML-файле обязательно? Какова логическая
структура Web-документа?
Почему нельзя использовать
текстовый процессор Word для разработки Web-документов?
С помощью каких известных вам программ можно создавать Web-документы в коде HTML?
С помощью каких программ можно просматривать Web-документы?
Как создается абзац в языке
HTML?
Укажите способы изменения размеров
букв в HTML-документе.
Как проводится горизонтальная линия в языке HTML?