- •Создание документов в формате html введение
- •Структура html-документа
- •Эти теги сообщают браузеру, что текст между ними следует интерпретировать как текст html.
- •Создание заголовков
- •Ввод текста и иной информации
- •Стилевое оформление текста
- •Отображение специальных символов
- •Управление цветом
- •Включение списков в web-документы
- •Создание таблиц
- •Создание гиперссылок
- •Включение изображений в html-документы
- •Желаю удачи! вопросы для самоконтроля
- •Литература
Стилевое оформление текста
Изменить внешний вид страницы (отформатировать текст) можно при помощи тегов, приведенных в таблице 3.
Таблица 3.
|
Тег |
Назначение |
|
<B>…</B> |
Заключенный в теги текст отображается жирным шрифтом. |
|
<BIG>…</BIG> |
Заключенный в теги текст будет отображаться шрифтом большего размера. |
|
<I>…</I> |
Заключенный в теги текст будет отображаться в курсивном начертании. |
|
<SMALL>…</SMALL> |
Включает и отключает использование мелкого шрифта. |
|
<STRIKE>…</STRIKE> |
Включает и отключает вывод зачеркнутого текста. |
|
<SUB>…</SUB> |
Заключенный в теги текст будет смещен вниз (нижний индекс). |
|
<SUP>…</SUP> |
Заключенный в теги текст будет смещен вверх (верхний индекс). |
|
<TT>…</TT> |
Телетайпный текст. |
|
<U>…</U> |
Стиль с подчеркиванием текста. |
Отображение специальных символов
Иногда могут возникнуть проблемы при попытке отобразить некоторые символы на Web-странице. Такие символы, как &, “, <, >, = и пр., используются при написание некоторых тегов. Другие символы не содержатся в обычном алфавите.
Существуют стандарты HTML, устанавливающие определенный набор тегов, представляющих эти символы (табл.4).
Таблица 4.
|
Символ |
Тег HTML |
Описание |
|
< > & “ § |
< > & " © ® § |
Меньше Больше Амперсант Знак кавычек Знак авторского права Зарегистрированная торговая марка Знак параграфа |
Более полный список всех символов, которые можно отобразить на Web-странице, приведен на узле:
http://www.uni-passau.de/~ramsch/iso8859-1.html
Задание 4.
Отформатируйте ваш документ на ваше усмотрение. Сохраните изменения. Вернитесь в Internet Explorer и выполните команду: Обновить.
Управление цветом
Возможность менять цвет любого фрагмента отображаемой информации – один из самых замечательных способов придать тексту индивидуальность. Сделать это можно при помощи соответствующих тегов (см. табл. 5).
Таблица 5.
|
ЭЛЕМЕНТ |
СООТВЕТСТВУЮЩИЙ ТЕГ И АТРИБУТ |
|
Фон документа |
<body bgcolor=цвет> |
|
Весь текст документа |
<body text= цвет> |
|
Активные гиперссылки |
<body alink= цвет> |
|
Посещенные гиперссылки |
<body vlink= цвет> |
|
Обычные гиперссылки |
<body link= цвет> |
|
Небольшой фрагмент текста |
<font color= цвет> |
|
Цвет фона таблицы, строки, ячейки и ячейки заголовка соответственно |
<table bgcolor= цвет> <tr bgcolor= цвет> <td bgcolor= цвет> <th bgcolor= цвет> |
|
Обрамление таблицы |
<table bordercolor= цвет> <table bordercolorlight= цвет> - светлый цвет для создания эффекта тени рамки. <table bordercolordark= цвет> - темный цвет для создания эффекта тени рамки. (то же самое для <tr>, <td>, <th>). |
Имя цвета можно написать словом (например, red - красный), а можно при помощи шестнадцатеричных кодов цветов (#FF0000 – красный).
Шестнадцатеричные коды.
Механизм задания цвета основан на описании цветов с помощью модели RGB (red – красный, green – зеленый, blue - синий). Определенные цвета задаются шестнадцатеричной комбинацией из шести знаков, показывающей компьютеру, как следует смешать красный, зеленый и синий для получения нужного цвета. Шестнадцатеричные цифры – это цифры от 0 до 9 и буквы от А до F. Смешивая различные по степени насыщенности оттенки этих цветов, можно получить огромное количество вариантов для выбора.
Каждому из основных цветов – красному, зеленому и синему – соответствует два знака кода.
В таблице 6 приведены основные цвета и соответствующие им шестнадцатеричные коды.
Таблица 6.
|
Цвет |
Значение |
Название |
|
ярко-красный |
#FF0000 |
Red |
|
ярко-зеленый |
#00FF00 |
Lime |
|
ярко-синий |
#0000FF |
Blue |
|
желтый |
#FFFF00 |
Yellow |
|
малиновый |
#FF00FF |
Fuchsia |
|
бирюзовый |
#00FFFF |
Aqua |
|
Белый |
#FFFFFF |
White |
|
Черный |
#000000 |
Black |
|
Серебристый |
#C0C0C0 |
Silver |
|
Серый |
#808080 |
Gray |
|
Оранжево-розовый |
#800000 |
Maroon |
|
Пурпурный |
#800080 |
Purple |
|
Зеленый |
#008000 |
Green |
|
Оливковый |
#808000 |
Olive |
|
Темно-синий |
#008080 |
Navy |
|
Чайный |
#000080 |
Teal |
|
Розовый |
#FFC0CB |
Pink |
|
Морской волны |
#2E8B57 |
Seagreen |
Задание 5.
Откройте ваш HTML-файл. Измените цветовую гамму документа. Сохраните изменения. Вернитесь в Internet Explorer и выполните команду: Обновить.
Фоновые изображения.
Вы можете задавать не только стандартные цвета, но и фоновые рисунки. При правильном применении эта графика дает интересный эффект Фоновые узоры состоят из крошечных изображений в формате .GIF, покрывающих весь фон. Текст и изображения, естественно, располагаются поверх фона.
Фоновые изображения задаются так же, как и цвета фона, только для этого применяется ключевое слово BACKGROUND. Просто введите в тег <BODY> ключевое слово BACKGROUND=”имя файла”, и браузер автоматически загрузит фоновое изображение.
Прежде, чем вы начнете экспериментировать с фоновые цветами и узорами, обратите внимание на некоторые нюансы.
Часто непродуманное использование фоновых цветов и изображений делает страницу абсолютно нечитаемой. Старайтесь применять только светлые тона и легкие узор. Проверьте каждую страницу и убедитесь, что ее можно прочесть.
Кроме того, использование фоновых узоров может существенно увеличить время загрузки страницы. Желательно, чтобы фоновый узор занимал не более 10 Кбайт.