- •1.1. Представление информации в сети Интернет
- •1.2. Структура html-документа
- •1.3. Форматирование html-документа
- •1.3.1. Настройка внешнего вида страницы
- •1.3.2. Форматирование символов в html-документе
- •1.4. Форматирование абзацев в html-документе
- •Лабораторная работа №2 «Графика в html-документе»
- •2.1. Графические изображения для web
- •2.2. Вставка рисунков в html-документ
- •2.3. Горизонтальная линия
- •Лабораторная работа №3 «Гиперссылки в html-документе»
- •3.1. Гиперссылки в html-документе
- •3.2. Создание гиперссылки
- •Лабораторная работа №4 «Таблицы в html-документе»
- •4.1. Направления использования таблиц в html
- •4.2. Создание таблицы
- •Лабораторная работа №5 «Формы в html-документе»
- •5.1. Понятие формы
- •5.2. Создание формы
- •Лабораторная работа №6 «Каскадные таблицы стилей»
- •6.1. Назначение каскадных таблиц стилей
- •6.2. Способы задания css
- •6.3. Классы стилей
- •6.4. Способы задания классов стилей
- •Лабораторная работа №7 «Позиционирование элементов»
- •7.1. Позиционирование
- •7.2. Слои
1.3. Форматирование html-документа
К форматированию документа можно отнести изменение внешнего вида документа: форматирование страницы, разбиение текста на абзацы, выделение заголовков, форматирование символов и др.
1.3.1. Настройка внешнего вида страницы
Задавая параметры у тега <BODY>, можно изменять внешний вид всей web-странички.
Тег <BODY> может иметь следующие параметры:
bgcolor – задает цвет фона страницы;
text – задает цвет текста всей страницы по умолчанию;
link, vlink, alink – задает цвет ссылки, еще не посещенной, уже посещенной, активной (в момент нажатия на нее) соответственно;
background – задает фоновый рисунок страницы;
leftmargin , rightmargin, topmargin, bottommargin – задают левое, правое, верхнее и нижнее поля страницы соответственно (в пикселях, px).
Задание цвета фона и текста странички
Цвет можно задавать тремя способами:
Через английский эквивалент названия цвета. Например, <BODY bgcolor=″red″>
Через RGB-формат ″#XXXXXX″, где X – это число от 0 до F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F), первая пара цифр отвечает за насыщенность красного цвета, вторая пара – за насыщенность зеленого, третья пара – синего. Например, <BODY bgcolor=″#FF0000″>
Через RGB-формат rgb(Х,Х,Х), где Х – это число от 0 до 255, первая цифра отвечает за насыщенность красного цвета, вторая – за насыщенность зеленого, третья – синего. Например, <BODY bgcolor=rgb(255,0,0)>
Для задания цвета фона и текста используйте параметры тега <BODY> – bgcolor и text:
<BODY bgcolor=″#D2B48C″ text=″darkgreen″>
Примечание. Основные оттенки цветов web-палитры можно посмотреть в Приложении 1 «Web-палитра цветов».
Задание фонового рисунка
Фон страницы можно сделать не одним цветом, а текстурой. Текстура – это небольшое изображение, которым «мостят» фон, т. е. оно многократно копируется как по вертикали, так и по горизонтали. Для создания текстур обычно применяют специальные графические редакторы, в которых есть инструменты создания текстур – текстуризаторы. Однако можно создать текстуру с помощью простых редакторов и инструментов, соблюдая следующие правила:
Рисунок не должен быть очень контрастным, т. е. пестрым.
Рисунок либо не должен обрываться на границе, либо его границы должны «сшиваться».
Если рисунок яркий, то шрифт документа должен быть темным, и наоборот.
Размер «плитки» текстуры выбирайте в пределах от 3х3 до 5х5 см.
Текстурный рисунок должен быть сохранен в формате GIF или JPG, после чего в параметре background тега <BODY> нужно указать путь к фоновому рисунку:
Путь к рисунку указывается в зависимости от его расположения:
если рисунок лежит в том же каталоге (директории, папке), в которой лежит и HTML-документ, то путь к ней будет выглядеть так: <BODY background=″fon.gif″>
если рисунок лежит в поддиректории (например, “images”), то путь к ней будет выглядеть так: <BODY background=″images/fon.gif″>
если рисунок лежит на уровень выше, а документ находится в поддиректории, то путь к ней будет выглядеть так: <BODY background=″../fon.gif″>
если рисунок лежит на другом сайте, то путь прописывается полностью:
<BODY background=″http://www.mypage/images/fon.gif″>
Задание полей странички
Поля страницы (отступы текста от границ окна браузера) задаются через параметры leftmargin, rightmargin, topmargin, bottommargin. Значения этих параметров указываются в пикселях. Например, <BODY leftmagin=″100″ topmargin=″40″>
Задание 1.2. Отформатируйте вашу первую страничку. После выполнения каждого пункта просмотрите изменения странички в браузере.
Задайте желтовато-коричневый цвет фона и темно-зеленый цвет текста. Используйте параметры тега <BODY> – bgcolor и text, для задания цвета фона используйте английский эквивалент названия цвета, а для цвета текста – RGB-формат;
В графическом редакторе «Paint» создайте простейший фоновый рисунок. Сохраните его в папку, где находится ваша страничка под именем fon.jpg. Для тега <BODY> задайте параметр background.
Установите поля страницы: левое – 100 пикселей, правое – 80 пикселей, верхнее и нижнее – 50 пикселей.