Команды языка (теги) заключаются в угловые скобки. Как правило, теги парные. Первый тег открывает описание команды, определяет ее начало, второй, отличающийся от первого наличием косой черты "/" перед ключевым словом (именем тега) - закрывает его. Тег должен открывать программу, а тег - закрывать ее.

Заголовок программы

Между парой тегов располагается имя HTML-документа. Это имя браузер использует в заголовке окна Windows, в котором показывает документ. Пример описания заголовка отображен на рисунке 1.1.

Рисунок 1.1 – Пример заголовка HTML-страницы

Тело программы

Между тегами и располагаются команды, следуя которым браузер выводит информацию в окно документа.

Форматирование текста

Для форматирования текста используются различные теги, позволяющие задавать параметры для текста. Форматирование текста позволяет создавать более интересные  и индивидуальные WEB-документы, с параметрами задаваемыми разработчиком.

Заголовки

Заголовки являются важной частью документа. Они разделяют информацию на отдельные логические части и поэтому существенно улучшают ее восприятие.

Заголовки бывают разные по значению, или по уровню. В HTML-документе поддерживаются заголовки шести уровней при помощи конструкции:

Текст заголовка

Здесь в качестве n следует использовать одну из цифр 1-6, обозначающую уровень заголовка.

Заголовки выделяются браузером при показе HTML-документа размером шрифта и жирностью.

Горизонтальная линия

Линия - простейший графический элемент, который умеет строить браузер. Горизонтальная линия задается тегом

        У тега

1. size - толщина линии. Задается в абсолютных единицах измерения   (cm- сантиметры, mm- миллиметры, px-пиксели, pt-пункты);
2. color – цвет линии.

Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) элементов документа на экране.

Абзац

Задается абзац тегами

и

Пример:

Красная строка используется

Принудительный разрыв строки

Команда
заставляет браузер продолжить вывод абзаца с новой строки. Тег
используется одиночно, без парного тега.

Пример:

Разрыв строки не используется

Разрыв строки используется

Вопросы для самопроверки

1. Что такое HTML?
2. Что такое тег?
3. Назовите основные теги HTML – документа.

Тема 1.2. Организация текста внутри HTML-документа

Содержание программы

Теги маркированных списков, нумерованных списков, теги для списков определений, вложенные списки

Методические указания

Маркированный список

Каждый элемент этого списка браузер предваряет меткой в начале строки, а сами строки смещает вправо.

Команда UL, задающая маркированный список имеет следующую структуру, представленную в таблице2:

Таблица2.  Структура команды для создания маркированных списков

Примечание. Конечный тег является необязательным.

Вид метки, которую браузер помещает перед каждым элементом списка, настраивается при помощи атрибута type. Этот атрибут может отсутствовать или принимать одно из трех значений:

Нумерованный список

В нумерованных списках каждый элемент снабжен номером, вид и начальное значение которого настраивается специальным атрибутом.

Нумерованный список задается при помощи команды

. Описание структуры команды представлена в таблице3.

Таблица 3.  Структура команды для создания нумерованных списков

Описание команды	Пример
первый элемент списка     второй элемент списка    . . .     последний элемент списка	Один    Два    . . .     N

Замечание. Конечный тег является необязательным.

Вид номера определяется значением атрибута type.

Начальный тег:	Вид номера на экране:
	Нумерация выполняется арабскими цифрами (1, 2, 3, ...).
	Нумерация выполняется арабскими цифрами (1, 2, 3, ...).
	Нумерация выполняется прописными буквами (A, B, C, ...).
	Нумерация выполняется строчными буквами (a, b, c, ...).
	Нумерация выполняется большими римскими цифрами (I, II, III, IV, ...).
	Нумерация выполняется малыми римскими цифрами (i, ii, iii, iv, ...).

Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута start = n. Число n задает начальное значение нумерации. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, 4 означает D или IV).

Пример:

4. четвертый пункт
5. Пятый пункт
6. пункт n

Списки определений

Интересной разновидностью списков являются списки определений. Как можно догадаться из названия, первоначально эти списки были введены для более наглядного представления определений терминов.

Список определений задается внутри HTMLэлемента DL (для его задания используются парные теги

и

). Каждый элемент списка определений состоит из двух частей: из термина (элемент DT) и определения термина (элемент DD). Пример текста HTML-документа, содержащего список определений, приведен ниже.

Пример: Список определений

HTML

Широко используемый язык гипертекстовой разметки

WWW

От англ. World Wide Web, глобальная сеть из соединенных между собой гипертекстовых документов

Как можно видеть браузер по-разному отображает сами термины и определения этих терминов, причем делает это так, что сразу понятно, где определение, а где термин.



Список определений




Все особенности использования закрывающих тегов и аналогичны особенностям использования тега , то есть, несмотря на то что эти теги определены, использовать их совершенно не обязательно.

Вложенные списки

Элемент любого списка сам может быть списком. Уровень вложенности не ограничен, это позволяет использовать списки для отображения сложных иерархических структур.

 Вопросы для самопроверки:

1. Назовите теги маркированных списков.

2. Назовите теги нумерованных списков.

3. Назовите теги списков определений.

Тема 1.3.  Цветовая гамма HTML – документа

Содержание программы

HTML-метки, определяющие цветовую гамму.
Список атрибутов внутри метки . Цвет фона.

Методические указания

Цвет фона и цвет шрифта

Цвета для фона и шрифта на всем протяжении документа можно задать при помощи атрибутов bgcolor и text в теге , например:

....     bgcolor=aqua text=black>

Это означает, что в документе заданы черные символы (black) на бирюзовом фоне (aqua).

Атрибуты цветов, заданные в теге действуют до парного тега , то есть до конца документа. Цвет фона можно задать только один раз, а цвет шрифта можно менять внутри документа много раз при помощи команды .... Установка цвета в этой команде выполняется при помощи атрибута color, например:

....       ....     ....     ....

Заданы цвета для всего документа   Задан новый цвет шрифта (коричневый) Восстановлен цвет шрифта (черный)

Данным кодом можно назначить абсолютно любой оттенок. Если у цвета или оттенка есть название, то вместо цифр и букв можно написать слово, например красный #FF0000 или "red". Вот, к примеру, часто встречающиеся цвета: (#FF0000 - это нули 0000, а не буквы OOOO, не путайте)

Белый #FFFFFF White

Черный #000000 Black

Голубой #0000FF Blue

Зеленый #00FF00 Green

Желтый #FFFF00 Yellow

Оранжевый #FFA500 Orange

Красный #FF0000 Red

В HTML действует общее важное правило: конструкции языка могут быть вложенными, то есть, внутри одной команды могут располагаться другие. Указания вложенной команды могут изменять указания внешних команд, но когда вложенная команда заканчивается, восстанавливаются полномочия внешней инструкции.

Вопросы для самопроверки:

1. Каким тегом задается цвет фона документа?

2. Каким тегом задается цвет текста в документе?

Тема 1.4. Графика

Содержание программы

Параметры  и  форматы графических файлов.
Изображение в HTML документе.

Методические указания

Для создания более интересных интерфейсов WEB-страниц используются различные изображения. Браузеры распознают различные форматы изображений, самыми распространенными из них являются  два графических формата GIF и JPG.

Программирование картинки

Картинку можно помещать в документ почти так же, как текстовый символ при помощи команды . Команда не имеет парного закрывающего тега, но имеет много атрибутов.

Атрибут src = имя файла

Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда - браузер отобразить на экране графический файл img1.gif из текущего каталога. Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог PIC, который является подкаталогом для каталога с программами (html-файлами). Тогда команда вывода графики будет иметь вид:

Атрибут alt = "текст надписи"

Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt: . Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию.

Атрибуты width = n и height = m

Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка. Если атрибуты не заданы, картинка рисуется в естественных размерах. Когда размеры прямоугольника не совпадают с размерами картинки, браузер производит масштабирование картинки, подгоняя ее под указанные величины.

 Атрибут border = n

Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов.
При отсутствии атрибута, или при значении n = 0 рамка не рисуется.

Атрибут align

Этот атрибут позволяет определять положение иллюстрации по отношению к соседним элементам документа. Используются следующие значения атрибута:

align=top - вертикальное выравнивание по верхнему краю;

align=middle - вертикальное выравнивание по центру;

align=bottom - вертикальное выравнивание по нижнему краю;

align=left - горизонтальное выравнивание по левому краю;

align=right - горизонтальное выравнивание по правому краю.

Фоновые изображения

Используя атрибут bgcolor команды BODY, можно выкрасить фон документа в один из 16-ти основных цветов, или использовать более сложные цвета, задавая их в виде шестнадцатеричных чисел. Вместо одноцветной заливки в качестве фона документа можно использовать картинку. Эта картинка будет, повторяясь, укладываться в экранное поле наподобие паркетных плиточек. Чтобы "паркет" смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации, так же важно, чтобы фон оставался фоном, а не переходил на передний план восприятия, не отвлекал внимание пользователя от главных элементов документа, не мешал читать текст.

Фоновая картинка задается в команде BODY атрибутом background:

Пример:

Вопросы для самопроверки:

1. Назовите тег вставки иллюстрации в документ?

2. Перечислите основные атрибуты тега вставки иллюстрации.

3. Назовите принцип  вставки фонового изображения в документ.

Тема 1.5. Таблицы

Содержание программы

Как устроена таблица, метки таблицы в HTML.
Атрибуты таблицы.

Методические указания

В практическом HTML-программировании таблицы незаменимы для создания левых и правых полей страницы, выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга, а так же  для отображения на экране табличного материала.

Таблица представляет собой прямоугольник, расчерченный на клетки. Если на клетки смотреть по вертикали, то они образуют столбцы, если по горизонтали - строки. Каждая строка и столбец в таблице может иметь свой заголовок. Заголовки записываются в первой строке и первом столбце. В общем случае таблицы используют для хранения информации с двумя характерными признаками. Значения одного признака расписано в заголовках строк, другого - в заголовках столбцов. А в каждую клетку таблицы заносят значение, одновременно обладающее признаком строки и столбца, на пересечении которых она расположена.

Программирование таблицы

Таблица задается командой 

... .Внутри этих тэгов задаются строки командами ... , внутри строк задаются клетки (ячейки) командами ... . Таким образом, по строкам, описывается вся структура таблицы. На рисунке ниже изображена структура построение таблиц в HTML-документах.



Структура таблицы

Пример:

(1,1) (1,2) (2,1) (2,2) (3,1) (3,2)

Атрибуты команды TABLE:

Атрибут:	Назначение:
align= (left, right)	Выравнивание по горизонтали.
width= (число или процент)	Ширина таблицы.
cellpadding= (число)	Расстояние между содержимым  ячейки и рамкой.
cellspacing= (число)	Расстояние между ячейками таблицы.
bgcolor= (цвет)	Цвет фона таблицы.
background= (файл)	Фоновая картинка.
border= (число)	Ширина линий рамки.
bordercolor= (цвет)	Цвет линий рамки.
bordercolordark= (цвет)	Цвет рамки (снизу и справа).
bordercolorlight= (цвет)	Светлый цвет рамки (сверху и слева).

Атрибуты команды TR

HTML-таблица состоит из строк, каждая из которых задается командой

описание ячеек табличной строки . Варьируя атрибутами команды TR, можно установить те или иные свойства одновременно для всех ячеек строки.

Атрибут:	Назначение:
align= (left, center, right)	Выравнивание по горизонтали.
valign=(top, center,bottom, baseline)	Выравнивание по вертикали.
bgcolor= (цвет)	Цвет фона.
bordercolor= (цвет)	Цвет линий рамки.
bordercolordark= (цвет)	Цвет рамки (снизу и справа).
bordercolorlight= (цвет)	Светлый цвет рамки (сверху и слева).

Атрибуты команды TD (TH)

Каждая табличная строка состоит из ячеек, которые последовательно описываются командами TD (обычная ячейка) и (или) TH (ячейка-заголовок):

описание содержимого ячейки

описание содержимого ячейки

Содержимое обычной ячейки по умолчанию горизонтально выравнивается по левому краю, а ячейки-заголовка - по центру. Кроме того, текст в ячейке-заголовке выделяется полужирным шрифтом. Команды TD и TH имеют следующие атрибуты:

Атрибут:	Назначение:
align= (left, center, right)	Выравнивание по горизонтали.
valign=(top, center,bottom, baseline)	Выравнивание по вертикали.
width= (число или процент)	Ширина ячейки.
bgcolor= (цвет)	Цвет фона.
background= (файл)	Фоновая картинка.
bordercolor= (цвет)	Цвет линий рамки.
bordercolordark= (цвет)	Цвет рамки (снизу и справа).
bordercolorlight= (цвет)	Светлый цвет рамки (сверху и слева).
nowrap	Выключение автоматического разрыва строк.
colspan= (число)	Ширина большой ячейки (в столбцах (объединение)).
rowspan= (число)	Высота большой ячейки (в строках (объединение)).

Таблицы, вложенные друг в друга

Используя таблицы, можно выровнять информационные блоки на экране и разместить их в соответствии с дизайн-проектом документа. Метод вложенных таблиц позволяет создавать более интересные интерфейсы WEB-страниц.

Пример кода создания вложенных таблиц:

        

                

        

        

                

	Вас приветствует "Красный уголок"
выбери тему:	звери птицы рыбы

Результат исполнения кода представлен на рисунке



Пример использования вложенных таблиц для оформления HTML-страниц

Вопросы для самоконтроля:

1. Назовите тег таблицы и основные атрибуты.

2. Назовите атрибуты строк.

3. Назовите атрибуты ячеек.

Тема 1.6.  Гипертекстовый документ

Содержание программы

Способы организации гипертекстовых документов. Текстовые ссылки. Изображения-ссылки.

Методические указания

Для навигации по сайту используются ссылки. Для перехода по ссылке необходимо щелкнуть по ней мышкой, для возврата из ссылки необходимо использовать навигационную кнопку браузера "Назад" ("Back"). Если ссылки образуют вложенную цепочку, то кнопки "Назад" ("Back") и "Вперед" ("Forward") можно использовать для движения по пройденному ссылочному пути в обе стороны. Они работают как традиционные операции "откатка" и "накатка" в большинстве прикладных программ.

Для задания гипертекстового перехода внутри документа используют две команды . Первая команда с атрибутом href является источником перехода, вторая с атрибутом name - приемником.

Общий вид программы	Комментарий
... текст   ...   ...   ...   ...	Задание перехода по метке На экран выводится ссылка: текст Метка. Сюда браузер приходит по ссылке. На экране ничего не отображается.

Для организации перехода внутри документа нужно выбрать имя для метки. Имя должно быть уникальным в HTML-программе, т.е. других меток с таким именем в программе быть не должно, т.к. для одинаковых меток браузер выполняет переход на самую первую метку в программе. Имя может заключаться в кавычки. Имя может состоять из любых символов. В том случае, когда имя содержит пробелы или ключевые символы HTML, кавычки обязательны.

Запрограммировать переход по метке можно согласно примеру:

текст,
где:

# - ключевой символ;

метка - выбранное имя для метки;

текст - запись, которая будет выглядеть на экране браузера как ссылка.

Установить тег с меткой в нужном месте HTML-программы можно следующим образом: перед фрагментом HTML-программы, на который должен выполниться переход записать команду-метку: .

 При этом имя метки должно быть то же самое, что и в команде, задающей переход, парный тег может быть опущен.

Переход к другому документу

Для того, чтобы браузер загрузил в свое окно новый HTML-документ, необходимо прописать в программе ссылку при помощи команды с атрибутом href=имя_файла.

Общий вид программы	Комментарий
... текст   ...	Выполнить файл "имя_файла". На экран выводится ссылка: текст При щелчке пользователя на ссылке браузер строит на экране документ по программе, заданной в файле "имя_файла".
На рисунке представлена структура перехода по гиперссылке от одной странице к другой.



Структура перехода по гиперссылке

Переход к метке другого документа

        Существует метод для объединения задач передачи управления в другую часть документа и передачи управления в другую программу (HTML-файл). Этот метод заключается в передачи управления из одного документа к метке внутри другого.

Общий вид программы	Комментарий
Первый HTML-файл     ...   Текст     ... Второй HTML-файл      ...       ...	Приступить к показу фрагмента с меткой "метка" в файле "имя_файла". На экран выводится ссылка: текст При щелчке пользователя на ссылке браузер строит на экране документ по программе, заданной в файле "имя_файла", начиная с фрагмента с меткой "метка"

        На рисунке представлена структура перехода к метке другого HTML документа.



Структура перехода к метке HTML-документа

Иллюстрация как ссылка

Возможен вариант, когда картинка будет играть роль гиперссылки. Для этого достаточно вложить команду IMG внутрь команды A: Картинка ведет себя так же, как текст. Курсор при попадании на картинку-ссылку меняет свою форму. Мышиный щелчок по картинке заставляет браузер выполнять переход. Отличие только в том, что картинка-ссылка не подчеркивается, как текст, и не выделяется цветом, а обрамляется в рамочку.

Вопросы для самоконтроля:

1. Как делается переход внутри документа?

2. Как создать ссылку на отдельный документ?

3. Как сделать иллюстрацию ссылкой?

Раздел 2. Веб-дизайн

Тема 2.1. Дополнительные  возможности создания веб-страниц

Содержание программы

Назначение CSS. Базовые понятия CSS. Виды стилей

Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде.

CSS - это сокращение от Cascading Style Sheets - в переводе Каскадные таблицы стилей. 

Основные преимущества CSS :

• управление дизайном любого количества документов с помощью одной таблицы стилей;
• более точный дизайн страниц, поддерживаемый всеми браузерами;
• разделение документа на две составляющие: структура и дизайн, благодаря чему исходный код становится чистым и легко читаемым;
• новые расширенные возможности по сравнению с обычным html.

Синтаксис и принцип работы CSS

Как и любой другой язык программирования, CSS имеет строго определенный синтаксис, т.е. правила по которым создаются таблицы стилей. Запомните, в CSS в отличие от HTML нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей здесь является правило, которое определяет, как будет выглядеть тот или иной элемент в документе.

Рассмотрим структуру правила:



Как видно из рисунка выше, сначала записывается так называемый селектор, показывающий к какому html тегу(тегам) применяется то или иное свойство.

Далее, непосредственно за селектором, пишется блок объявления стилей, который обязательно заключается в фигурные скобки.

Каждое объявление в свою очередь состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой (см. рисунок) причем после последнего объявления точку с запятой можно не ставить.

Виды стилей:

А) Встраиваемые стили

Встраиваемые стили определяются в HTML-теге и оказывают влияние только на этот тег.

Пример применения стиля к абзацу

Текст этого абзаца будет отображаться шрифтом Comic

sans ms размером 17 пунктов

Б) Подключаемые стили

Подключаемые стили, которые также называют внутренними стилями, применяются ко всей веб-странице. Для этого служит тег




Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета





В) Связываемые стили

Связываемые, или внешние, стили применяются к документам всего веб-сайта. Создайте с помощью любого текстового редактора документ, содержащий только определения стилей, и сохраните его в файле с расширением .css. Созданные таким образом списки можно применить к любой веб-странице.

Тогда в каждом документе, который мы хотим подключить, в голове документа (между тегами и ) необходимо прописать строчку:

Эта строка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.

Попробуйте сами:

Откройте Блокнот (или другой редактор) и создайте с помощью него два файла находящихся в одной папке: CSS файл - style.css и HTML файл - index.htm . Файлы примерно следующего содержания:

index.htm









Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразится высотой всего лишь 14 пикселей и будет голубого цвета





style.css

h1{color:blue;font-size:14px}

Вопросы для самоконтроля:

1. Что такая CSS?

2. Что показывает селектор?

3. Перечислите виды стилей.

Тема 2.2.  Свойства CSS

Содержание программы

Разъяснение значений свойств. Свойства шрифта.
Свойства текста.  Свойства цвета и фона.

Методические указания

Шрифт в CSS

За шрифты в CSS отвечают следующие свойства:

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

 Свойство FONT-FAMILY

Данное свойство определяет гарнитуру шрифта. Вообще FONT-FAMILY с англ. означает семейство шрифта. Шрифты по тем или иным признакам, объединяются в семейства. Три основных семейства: 
Serif - шрифты с характерными "засечками", наиболее яркий представитель - "Times New Roman";
Sans-serif - шрифты рубленые, без засечек, например Arial или Verdana ;
Monospace - моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как "Courier New";

 Если в названии шрифта встречаются пробелы, то его следует заключать в кавычки" .

h1 {font-family: verdana, arial, sans-serif;}
p {font-family: "Times New Roman", serif;}

Т.е. в начале пишется самый приоритетный шрифт, затем менее приоритетный, а затем желательно писать имя семейства.
h1 {font-family: verdana, arial, sans-serif;} означает, что все заголовки первого уровня будут отображаться шрифтом verdana. Если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial, а если и его нет, то браузер подставит любой доступный шрифт из семейства serif .

Свойство FONT-STYLE

Данное свойство задает стиль шрифта. Может принимать три значения:

• normal - обычный;
• italic - курсивный;
• oblique - наклонный;

h1{font-family: verdana, arial, sans-serif;font-style:normal;}
h2{font-family: verdana, arial, sans-serif; font-style:italic ;}
h3{font-family: verdana, arial, sans-serif;font-style:oblique;}

Свойство FONT-VARIANT

Это свойство используется для выбора варианта написания букв нижнего регистра. Может принимать два значения:

normal - значение по умолчанию, текст отображается обычным образом.
small-caps - буквы нижнего регистра отображаются как уменьшенные заглавные.



Т.е. как видите большие(заглавные буквы) остаются без изменений, а маленькие - представляют собой полную копию заглавных букв, только слегка меньшего размера.

По умолчанию (т.е. если вообще не записывать это свойство) текст будет отображаться обычным начертанием.

Пример записи стиля:

h1{font-family: verdana, arial, sans-serif; font-variant:small-caps; }
h2{font-family: verdana, arial, sans-serif;}

Свойство FONT-WEIGHT

Это свойство определяет насыщенность шрифта, т.е. с его помощью можно сделать шрифт жирным. Основные значения: normal - обычный и bold - жирный. Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900. Для справки: 400 равносильно normal, а 700 - bold . Но не советую вам пользоваться числами!

P {font-family: arial, verdana, sans-serif;}

Свойство FONT-SIZE

C его помощью можно регулировать размер шрифта. В качестве единиц измерения лучше всего использовать пикселы, т.к. это универсальный способ и во всех браузерах вы увидите одинаковый результат, а это самое главное.

Давайте прикольнемся над заголовками:

h1 {font-family: arial, verdana, sans-serif; font-size: 18px;}
h2{font-family: arial, verdana, sans-serif;font-size: 36px;color: red; }

Текст в CSS

Свойства CSS отвечающие за форматирование текста.

• text-align
• text-decoration
• text-indent
• text-transform
• letter-spacing
• word-spacing

Свойство TEXT-ALIGN

Свойство выравнивания текста, аналогичное атрибуту ALIGN используемому в html. Может принимать четыре значения:

left - выравнивание по левому краю(значение по умолчанию);
right - выравнивание по правому краю;
center - выравнивание по центру;
justify - выравнивание по ширине(по правому и левому краям одновременно).

Тут все очень просто, ну вот например:

h1{ text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}
p {text-align:justify;} 

Свойство TEXT- DECORATION

Позволяет оформлять текст определенным образом. Рассмотрим четыре основных значения данного свойства:

none - значение по умолчанию. Дополнительного оформления не происходит;
underline - текст подчеркивается снизу;
overline - текст надчеркивается сверху;
line-through - текст перечеркивается;

h1 {text-align:center; text-decoration:underline;}
h2 {text-align:center;text-decoration:overline;}
h3 {text-align:center; text-decoration:line-through;}

Свойство TEXT-INDENT

Это свойство пригодится нам для создания отступов первой строки, другими словами абзацев. Значение лучше задавать в пикселах, это универсальный способ.

h1{text-align:center;}
p {text-indent: 40px;}

Однако можно задать и в процентах от общей длины базовой строки(строки без отступа)

h1{text-align:center;}
p {text-indent: 20%;}

Свойство TEXT-TRANSFORM

C помощью этого свойства, можно видоизменять текст, а именно менять большие буквы на маленькие или наоборот. Может иметь такие значения:

capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например:"создайте сайт сейчас" станет "Создайте Сайт Сейчас".
Частенько это свойство используется при написании рекламных текстов, это больше привлекает внимания!

uppercase - делает из всех букв заглавные. Например: "текст в css " станет " ТЕКСТ В CSS "

lowercase - делает из всех букв маленькие. Например: "TRANSFORM" cтанет "transform".

none - не производит смены регистра; это значение используется по умолчанию.

Свойство LETTER-SPACING

C помощью этого свойства можно изменять расстояние между буквами. Значение лучше указывать в пикселях.

h1 { letter-spacing: 10px;}
p{ letter-spacing :4px; }

В примере выше для заголовков установлен интервал между буквами в 10 px, а для параграфов в 4px;

Свойство WORD-SPACING

Позволяет изменять расстояние между словами. Значение также лучше задавать в пикселах.

h1 { word-spacing: 20px;}
p{ word-spacing :10px; }

Цвет и фон в CSS

Цвета в CSS указываются так же, как и в html. Т.е. можно указывать шестнадцатиричное значение, например #ff3355, либо же название цвета (red, green, blue и др.)

Основными свойствами цвета и фона в CSS являются:

• color
• background-color
• background-image

Свойство COLOR

Задает основной цвет(цвет переднего плана) того или иного элемента. Например, если мы хотим сделать цвет всех заголовков первого уровня красным, а цвет текста параграфов зеленым, то таблица стилей будет выглядеть так:

H1 {color: red ;}
P {color: green ;}

Свойство BACKGROUND-COLOR

Задает фоновый цвет элемента. В отличие от html, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы (т.е. имеющих атрибут bgcolor ) в CSS , фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др. Тут главное правильно определить что нам нужно.

Ну вот например, чтобы изменить фоновый цвет всей страницы, нужно задать это свойство элементу BODY - т.к. именно он отвечает за тело документа, т.е. за всю страницу.

BODY {background-color : #FFEE8C ;}
H1 {color: red ;background-color :blue ;}
P {color: green ;}

Свойство BACKGROUND-IMAGE

Данное свойство используется для задания фонового изображения

BODY {background-color : #FFEE8C ;background-image : url(smile.png) ;}
H1 {color: red ;background-color :blue ;}
P {color: green ;}

Как видите, в качестве значения свойства, указывается путь к изображению, но немного не так как в html. В начале пишется URL а затем сразу, без пробелов в круглых скобках положение картинки. Если она находится в той же папке, то пишем просто название картинки, как в примере выше. Если допустим в подпапке img , то пишем так url(img/smile.png).

Фоновое изображение в CSS можно задавать для любого элемента, не только для таблиц и всей страницы.

Вопросы для самоконтроля:

1. Назовите основные свойства шрифта.

2. Назовите основные свойства текста

3. Назовите основные свойства цвета и фона.

Тема 2.3. Модель форматирования CSS

Содержание программы

Поля и отступы. Блочные элементы. Плавающие элементы.

Поля и отступы

Поле (margin) - Это расстояние от внешней границы элемента до границы окна браузера или же элемента родителя, т.е. границы того блока в который вложен наш элемент.

Отступом (padding) - Называют расстояние от внутренней границы элемента до его содержания текста, картинок таблиц.

На рисунке наглядно показаны эти расстояния, а так же место занимаемое бордюром (border) про него тоже не следует забывать.

Расстояния margin и padding указываются:

• px - В пикселях или любых других допустимых CSS единицах измерения.
• % - В процентах.
• auto - Размер полей и отступов автоматически рассчитывается браузером

margin: 5px 40px 20px 1px; - четыре значения.
Первое значение - Устанавливает поле от верхней границы элемента. 
Второе значение - Устанавливает поле от правой границы элемента. 
Третье значение - Устанавливает поле от нижней границы элемента. 
Четвёртое значение - Устанавливает поле от левой границы элемента.



Дочерние свойства margin и padding.

Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.

У margin зто:

• margin-top - Поле от верхней границы элемента родителя,
• margin-left - Поле от левой границы элемента родителя,
• margin-right - Поле от правой границы элемента родителя,
• margin-bottom - Поле от нижней границы элемента родителя.

И у padding соответственно:

• padding-top - Отступ от верхней границы элемента до его содержания,
• padding-left - Отступ от левой границы элемента до его содержания,
• padding-right - Отступ от правой границы элемента до его содержания,
• padding-bottom - Отступ от нижней границы элемента до его содержания.

Блочные и плавающие  элементы

Как и любой блочный элемент, контент  тега 

 начнется с новой строки. Содержимое нескольких тегов 

 будет расположено вертикально, друг под другом. Допустим, что мы хотим получить веб - страницу следующего вида:



Добавим следующий html - код для размещения пяти контейеров:

top

left

content

right

bottom

В таблицу стилей добавим соответствующие стили для каждого контейнера:

#top { height: 20px; width:412px; border: 3px double black}

#left { height: 200px; width:50px; border: 3px double black; }

#content { height: 200px; width:300px; border: 3px double black; }

#bottom { height: 20px; width:412px; border: 3px double black; }

Для наглядности, для каждого контейнера указаны параметры отрисовки его границ. В результате получим следующее:



Очевидно, что размещение контейнеров, используемое по умолчанию, не подходит для наших целей.

Для управления размещением элементов используется атрибут стиля float, принимающий следующие значения:

• left – элемент выравнивается по левому краю родителя, остальные элементы "обтекают" указанный по правой стороне;
• right – элемент выравнивается по правому краю родителя, остальные элементы "обтекают" указанный по левой стороне;
• none – обтекание элемента не указано;
• inherit – значение наследуется от родителя.

Для того чтобы элементы расположились по горизонтали один за другим, необходимо задать одно и то же значение float для следующих друг за другом элементов.

Для размещения блоков ниже выровненных по горизонтали, необходимо использовать атрибут стиля clear, явно указывающий на то, что данный блок должен располагаться ниже предшествующих ему контейнеров.

Атрибут clear может принимать следующие значения:

• left – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно left;
• right – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно right;
• both – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно left или right;
• none – отмена свойств атрибута clear;
• inherit –значение наследуется от родителя.

Изменим стили контейнеров из предыдущего примера следующим образом:

#top { height: 20px; width:412px; border: 3px double black}

#left { height: 200px; width:50px; border: 3px double black; float: left}

#content { height: 200px; width:300px; border: 3px double black; float:left}

#right { height: 200px; width:50px; border: 3px double black; float:left}

#bottom { height: 20px; width:412px; border: 3px double black; clear: left}

Этого достаточно для того, чтобы получить желаемый результат.

Вопросы для самоконтроля:

1. Назовите основные свойства полей.

2. Назовите основные свойства отступов.

3 Назовите тег блочного элемента и его свойства.