- •Разработка электронного портала
- •Введение
- •Практическая работа №1 Тема: html. Основные положения
- •Структура документа
- •Комментарии
- •Тэги тела документа
- •Центрирование элементов документа
- •Пронумерованные списки
- •Непронумерованные списки.
- •Вложенные списки
- •Список определений
- •Гипертекстовые ссылки
- •Структура ссылок в html-документе
- •Ссылки на точки внутри документа
- •Задание
- •Практическая работа № 3 Тема: Графика внутри html-документа
- •Фоновые рисунки
- •Задание стандартных цветов
- •Горизонтальная линия
- •Добавление стилей в ваш html-документ
- •Основные атрибуты таблицы
- •Вложенные таблицы
- •Задание
- •Практическая работа № 5 Тема: Фреймы
- •Синтаксис фрэймов
- •Планирование фрэймов и взаимодействия между фрэймами
- •Зарезервированные имена фрэймов
- •Тэги формы
- •Меню выбора в формах
- •Отправление файлов при помощи форм
- •Задание
- •Практическая работа № 7. Тема: Введение в JavaScript
- •Примеры программирования на JavaScript:
- •Задание
- •Контрольные вопросы
- •Темы для индивидуальных работ
- •Литература
- •ПрИложение Названия и коды цветов для html
- •Примечания
Фоновые рисунки
Большинство броузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов.
Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:
<BODY BACKGROUND="picture.gif">
Задание стандартных цветов
Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:
<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX">
где каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:
bgcolor -цвет фона документа;
text - цвет простого текста документа;
link - цвет ссылки.
Цвет задается шестизначным числом в шестнадцатиричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF – белому (см. Приложение). Например:
<BODY BGCOLOR="#FFFFFF" TEXT = "#000000" LINK="#9690CC">
Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.
Горизонтальная линия
Используя тэг <HR> вы можете разделить текст горизонтальной чертой.
Формат тэга:
<HR SIZE=number WIDTH = number|percent ALIGN = left|right|center NOSHADE>
Параметры тэга:
SIZE - толщина линии в пикселах;
WIDTH - ширина линии в пикселах или процентах от ширина окна броузера;
ALIGN - расположение на экране (слева | по центру | справа);
NOSHADE - по умолчанию линия представлена в 3D виде с тенью;
NOSHADE позволяет представить линию просто однотонной темной полоской.
Добавление стилей в ваш html-документ
HTML позволяет использовать различные стили шрифтов для выделения текстовой информации в ваших документах. Вот короткий список стилей, поддерживаемых большинством броузеров:
Таблица 2. Стили
Стиль |
Описание |
Элемент или тэг |
Bold |
жирный |
<B> Этот текст жирный </B> |
Italic |
наклонный |
<I> Этот текст наклонный </I> |
Mono spaced |
type writer - с использованием фиксированных шрифтов |
<TT> Этот текст с непроп. шрифтом </TT> |
Big |
большой |
Этот текст <BIG> большой </BIG> |
Small |
маленький |
Этот текст <SMALL> маленький </SMALL> |
Sub |
подстрочник |
Этот текст <SUB> подстрочник </SUB> |
Sup |
надстрочник |
Этот текст <SUP> надстрочник </SUP> |
Вы можете комбинировать различные виды стилей.
Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:
<b>Жизнь</b> - <i>это <b>песня!</b></i>
Внимание! Добавление большого количества стилей и их комбинаций приводит к затруднению чтения текста!
Размер шрифта <FONT SIZE>
Вы можете изменять размер шрифта при помощи тэга:
<FONT SIZE=+|- n>
Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга:
<BASEFONT SIZE=n>
Например:
<p>и
<font SIZE=+1>з</font><font SIZE=+2>м</font>
<font SIZE=+3>е</font><font SIZE=+4>н</font>
<font SIZE=+3>е</font><font SIZE=+2>н</font>
<font SIZE=+1>и</font>е
</p>
Цвет шрифта <FONT SIZE>
Вы можете изменить цвет шрифта при помощи тэга:
<FONT COLOR="#xxxxxx>
<FONT COLOR="#FF0000">
Красный </FONT>
<FONT COLOR="#00FF00">
Зеленый </FONT>
<FONT COLOR="#0000FF">
Синий </FONT>
Задание
Продумайте оформление страниц своего сайта в едином стиле и цветовой гамме. Оформите титульный лист с использованием фоновых рисунков, цветными шрифтами различных размеров. Поместите картинку на страницу содержания.
Практическая работа № 4.
Тема: Таблицы
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Основные тэги таблицы
Таблица: <TABLE>...</TABLE>
Это основные тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом BORDER.
Строка таблицы: <TR>...</TR>
Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.
Ячейка таблицы: <TD>...</TD>
Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
Заголовок таблицы: <TH>...</TH>
Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.
Подпись: <CAPTION>...</CAPTION>
Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.