- •Введение
- •1. Элементы языка html
- •Теги форматирования текста
- •Гиперссылки
- •Встраивание графических изображений
- •Создание таблиц
- •2. Каскадные таблицы стилей
- •Селекторы элементов
- •Селекторы классов
- •Селекторы идентификаторов
- •Единицы измерения, принятые в каскадных таблицах стилей
- •Внешние каскадные таблицы стилей
- •Задание цвета в каскадных таблицах стилей
- •3. Формы
- •Элементы управления формы
- •4. Разработка Web-сайта электронного магазина Планирование сайта
- •Задачи и информационное содержание сайта
- •Макеты страниц
- •Макет страницы можно выполнить с помощью обычного текстового редактора. На рис. 4.4 представлен результат такой работы.
- •Логическая структура сайта
- •Обозреватель преобразует данный html-код к следующему виду:
- •Для формирования стиля заголовка страницы воспользуемся селектором класса:
- •Для формирования стиля нижней части страницы воспользуемся селектором класса:
- •Заключение
- •Список литературы
Теги форматирования текста
В языке HTML имеется группа парных тегов <h1>, <h2>. . . <h6>, с помощью которых задается размер символов текста. Тегу <h1> соответствует наиболее крупный размер символов, тег <h2> определяет размер символов поменьше и т.д.
Для форматирования заголовков обычно выбирают теги <h1> и <h2>.
Рис. 1.1. Заголовок главной страницы и ее название
Для центрирования заголовка его можно поместить между парой тегов <center> </center>. Другой способ – это использовать теги заголовка вместе с атрибутом align, который может принимать следующие значения:
“left” для выравнивания по левому краю;
“right” для выравнивания по правому краю;
“justify“ для выравнивания по ширине;
“center” для выравнивания по центру.
Если атрибут align не используется, то текст выравнивается по левому краю.
Кроме того, заголовок можно оформить полужирным шрифтом, тогда его следует поместить между тегами <b> и </b>, а чтобы выделить заголовок курсивом нужно использовать теги <i> и </i>.
Отредактируем нашу первую страницу, изброженную на рис. 1.1, добавив в текст HTML-документа некоторые из рассмотренных тегов:
<html>
<head>
<h2 align="center"><i>Магазин «КНИГА»</i></h2>
<title>ЗАО «Знания – сила»</title >
</head>
<body>
</body>
</html>
После обработки обозревателем обновленного текста HTML-документа, страница примет вид, показанный на рис. 1.2.
Рис. 1.2. Отформатированный заголовок страницы
Обычно в текстовых редакторах, используемых для подготовки HTML-документа, для организации нового абзаца используется клавиша ENTER, с помощью которой в текст вставляются невидимые управляющие символы. Обозреватель эти управляющие символы игнорирует. Например, если в HTML-документе записать следующий текст:
Магазин КНИГА
Электроника и компьютерная техника
то в окне обозревателя он отобразится следующим образом:
Магазин КНИГА Электроника и компьютерная техника
Для разделения абзацев используются парный тег <p>, а для перевода строки - одиночный тег <br>, который ставится в конце абзаца. С тегом <p> обычно используются атрибуты, в том числе и уже рассмотренный выше атрибут align.
Таким образом, чтобы обозреватель, в рассмотренном выше случае, отобразил текст в две строки его в текстовом редакторе следует записать, например, так:
Магазин КНИГА<br>
Электроника и компьютерная техника
Другой способ отобразить текст в обозревателе так, как он выглядит в текстовом редакторе, состоит в использовании специальный тега-контейнера <pre>. В этом случае всегда будет использоваться моноширинный шрифт.
Кроме рассмотренных разделителей текста существуют и другие. Например, очень полезным является парный тег <div>. Обычно его используют для обрамления некоторого фрагмента текста с целью наделения этого фрагмента некоторыми определенными стилевыми свойствами.
Например, для того чтобы все текстовые элементы некоторого фрагмента документа отображать красным цветом, можно использовать тег <div> с соответствующим атрибутом:
<div style=”color: red”)
фрагмент документа
</div>
К группе разделителей можно причислить и одиночный тег <hr>, который позволяет прочертить горизонтальную линию в окне обозревателя. Этот тег используется с атрибутами. Например, тег
<hr width=”80%”>
выводит в окно обозревателя горизонтальную линию, которая займет 80% от полной ширины окна. Атрибуты тега <hr> представлены в таблице 1.1.
Таблица 1.1.
Параметры тэга <hr> |
Назначение |
align |
Выравнивает по краю или центру; имеет значения left, center, right |
width |
Устанавливает длину линии в пикселях или процентах от ширины окна браузера |
size |
Устанавливает толщину линии в пикселях |
noshade |
Отменяет рельефность линии |
color |
Указывает цвет линии. Используется формат RGB или стандартное имя |
Тег <font> является парным и служит для задания атрибутов шрифта текста. Например, для задания гарнитуры шрифта используется атрибут face, а атрибут size используется для задания размера шрифта в условных единицах от 1 до 7. По умолчанию применяется размер, равный 3. Атрибут color задает цвет шрифта с помощью строковой константы (black, red, green, blue, pink и др.) или числа. Число указывается в 16-ричной системе счисления, описывает цвет в палитре RGB (red, green, blue). При этом два первых разряда определяют интенсивность красного цвета, два следующих – соответственно, зеленого и синего.
Примеры:
<font face=”Courier New”>текст, имеющий шрифт Courier New</font>
<font color=”blue” > слова синего цвета</font>
<font color=#00FF00 size=4>слова зеленого цвета, 4-го размера </font>
Цвет текста в документе и цвет указателей ссылок можно задать также, используя соответствующие атрибуты тега <body>. Кроме того, с помощью тега <body> задается фон страницы. В таблице 1.2. даны атрибуты тэга <body>
Таблица 1.2.
Название |
Значение |
Назначение |
bgcolor |
число или строковая константа |
Определяет цвет фона страницы |
background |
url |
Образ из графического файла как фон страницы |
text |
число или строковая константа |
Определяет цвет текста на странице |
link |
число или строковая константа |
Определяет цвет еще не просмотренной ссылки |
alink |
число или строковая константа |
Определяет цвет активной ссылки |
vlink |
число или строковая константа |
Определяет цвет посещенных ссылок |
Вот еще некоторые теги для форматирования текста:
<u></u> - подчеркнутый шрифт;
<s></s> - перечеркнутый шрифт;
<sub></sub> - шрифт в верхнем индексе;
<sup></sup> - шрифт в нижнем индексе;