Проектирование, разработка и внедрение веб-узла Управления пенсионного фонда РФ в городе Кизел по Пермскому краю

Тег <DT>...</DT> этот тег  помечает текст термина в списке определений <DL>. Атрибуты <DT>: class="Стилевой класс";  id="Имя"; lang="Код языка". Блочный одинарный тег. Обязательных атрибутов не имеет.

Тег <DD>...</DD> этот тег  помечает текст определения в  списке определений <DL>.

Атрибуты <DD>: class="Стилевой класс";  id="Имя"; lang="Код языка"; style="Определение встроенного стиля". Блочный одинарный тег. Обязательных атрибутов не имеет.

Тег <OL>...</OL> используется для создания нумерованного списка. Атрибуты <OL>:

class="Стилевой класс";  id="Имя"; lang="Код языка"; start="Начальный номер"; type="A|a|I|i|1".

Блочный парный тег. Обязательных атрибутов не имеет.

Тег <LI>...</LI> метка. Помечает позицию списка. Атрибуты <LI>: class="Стилевой класс";  id="Имя"; lang="Код языка"; style="Определение  встроенного стиля"; type="A|a|I|i|1|disc|circle|square";

value="Номер". Встроенный  одинарный тег. Обязательных атрибутов  не имеет. 

Тег <UL>...</UL> используется для создания маркированного списка.

Атрибуты <UL>: class="Стилевой класс";  id="Имя"; lang="Код  языка"; style="Определение встроенного стиля";  type="disc|circle|square". Блочный парный тег. Обязательных атрибутов не имеет.

Таблицы

Тег <TABLE>...</TABLE> данный тег помещает на Web-страницу таблицу. Атрибуты <TABLE>: align="left|center|right"; bgcolor="Цвет"; border="Толщина границы в пикселах"; cellpadding="Расстояние между содержимым ячейки и ее краев"; cellspacing="Расстояние между ячейками таблицы"; cols="Количество колонок";  height="Высота"; width="Ширина". Блочный парный тег. Обязательных атрибутов не имеет, за исключением атрибута datapagesize, который обязателен при привязке таблицы к данным.

Тег <CAPTION>...</CAPTION> заголовок  таблицы. Атрибуты <CAPTION>:

align="bottom|center|left|right|top"; Атрибуты <CAPTION>: accesskey="Клавиша-ускоритель"; class="Стилевой класс"; contenteditable="inherit|true|false"; dir="ltr|rtl";  id="Имя"; lang="Код языка"; language="JScript|javascript|vbs|vbscript|XML|Код языка скрипта"; style="Определение встроенного стиля";  tabindex="Порядковый номер в последовательности"; title="Текст подсказки"; valign="top|bottom". Встроенный парный тег. Обязательных атрибутов не имеет.

Тег <TH>...</TH> обозначает заголовок таблицы. Атрибуты как  у TD, только содержимое выравнивается  по центру.

Тег <MULTICOL>...</MULTICOL> вывод текста в несколько столбцов. Атрибуты <MULTICOL>...</MULTICOL>:

COLS="n" (n - количество  столбцов); GUTTER="m" (m - расстояние  между столбцами).

Графика, объекты, мультимедиа, сценарий

Тег <OBJECT>...</OBJECT> размещает  модуль на Web-странице. Применяется  внутренний тег <PARAM>. Атрибуты <OBJECT>...</OBJECT>:BORDER=num - Ширина рамки в пикселях; CLASSID=URL - URL модуля для загрузки из Internet, если у пользователя этот модуль не инсталирова;. DATA=URL - URL файла, содержащего данные объекта. HEIGHT=num - Высота кадра, выраженная в единицах, которые установлены в атрибуте UNITS; HSPACE=num - Ширина левого и правого полей в пикселях; ID=name - Имя встроенного объекта. TYPE=type - MIME-тип встроенного объекта, определяющий модуль, который необходимо загрузить; VSPACE=num - Ширина верхнего и нижнего полей в пикселях; WIDTH=num - Ширина фрейма, выраженная в единицах, которые установлены в атрибуте UNITS; UNITS=value Значение PIXELS - Единицами измерения служат пиксели; Значение EN - Единицами измерения служит половина размера шрифта.

Формы

Тег < FORM >...</ FORM >. Атрибуты FORM: ACTION - обязательный атрибут - определяет местонахождение определяемых форм; METHOD - определяет место передачи формы; METHOD=POST; METHOD=GET - (по умолчанию); ENCTYPE - определяет кодировку для передачи обработчику по умолчанию; ENCTYPE=application/x-www-form-urlencoded.

Фреймы

Тег <FRAMESET>...</FRAMESET> определяет состав и размеры кадров на экране. Атрибуты FRAMESET:  COLS - определяет размеры и количество вертикальных окон;  ROWS - определяет размеры и количество горизонтальных окон.

Теги <FRAME>...</FRAME> располагаются  внутри <FRAMESET>

Атрибуты FRAME: SRC - адрес HTML-документа;<FRAME SRC="MyDocument.html">;NAME - задает имя  кадра;FRAMEBORDER - отражение рамки фрейма (0 - выключена).

Для загрузки в нужном окне HTML-документа по гиперссылке из другого окна используют атрибут TARGET в теге <A HREF>.

Параметр TARGET - задает кадр, выделяемый по умолчанию для отображения  гипертекста Атрибуты: NORESIZE - включает режим, при котором пользователь не может изменить размеры данного кадра;  SCROLLING - линейка прокрутки; SCROLLING=YES - создается линейка прокрутки; SCROLLING=NO - линейка прокрутки не создается;  MARGINHEIGHT; MARGINWIDTH толщина граничной линии между кадрами в пикселях.

CSS

Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.

Подключение таблиц стилей

Для осуществления этой задачи мы можем воспользоваться одним  из 3-х предлагаемых методов:

• inline-описание или описания, встроенное в тег:

<p style="color:red; text-align:center;">

Этот текст переопределен стилем

</p>

При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <font>.

• описание в секции заголовка :

Его действие распространяется на всю  страничку. Определение стилей происходит при помощи классов, которые представляют собой списки с определением всех необходимых параметров оформления.

При использовании этого метода описание стилей необходимо разместить в секции заголовка:

<head> ....

<style type="text/css">

<!--

.header {

text-align :center;

font-size : 27pt;}

.red {color : red; }

-->

</style>

</head>

Теперь эти стили можно применять  в любом месте html-кода. Для этого  используется следующая конструкция:

<p class=header>Этот текст написан  стилем header<p>

<p class=red>Этот текст написан красным цветом<p>

Теперь весь текст, заключенный  в теги <p></p>, будет выглядеть  так, как определено данным стилем. Это очень удобно и позволяет  легко адаптировать уже существующие странички к использованию стилей. Кроме того, это несколько уменьшает объем файла за счет отсутствия лишних атрибутов class.

• вынесение описания стилей во внешний файл:

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

Для внедрение внешнего файла для  начала создается стилевой файл с  описанием всех нужных нам классов (mystyle.css):

.header { text-align : center; font-size : 27pt;}

.red { color :red; }

p { text-align : center; font-size : 12pt;}

А потом ссылка на него внедряется в документ при помощи тега <link>:

<head> .... <link rel="stylesheet" type="text/css"

href="css/mystyle.css" title="MyStyleSheet"> .... </head>

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

Примечания :

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

/* Этот текст является комментарием */

Свойства и атрибуты

Расположение и границы - Данный раздел содержит список свойст CSS, которые применяются для описания поведения расположения и границ объекта

• border - Задает все свойства границ элемента страницы в один прием.
• border-bottom - Задает все свойства нижней границы элемента страницы за один прием.
• border-bottom-color - Задает цвет нижней границы элемента страницы.
• border-bottom-style - Задает тип нижней границы элемента страницы.
• border-bottom-width - Задает толщину нижней границы элемента страницы.
• border-collapse - Задает, будут ли границы ячеек и общая граница таблицы сливаться в одну или нет.
• border-color - Задает цвет всех границ элемента страницы.
• border-left - Задает все свойства левой границы элемента страницы за один прием.
• border-left-color - Задает цвет левой границы элемента страницы.
• border-left-style - Задает тип левой границы элемента страницы.
• border-left-width - Задает толщину левой границы элемента страницы.
• border-right - Задает все свойства правой границы элемента страницы за один прием.
• border-right-color - Задает цвет правой границы элемента страницы.
• border-right-style - Задает тип правой границы элемента страницы.
• border-right-width - Задает толщину правой границы элемента страницы.
• border-spacing - Задает расстояние между границами соседних ячеек таблицы.
• border-style - Задает тип сразу всех границ элемента страницы в один прием.
• border-top - Задает все свойства верхней границы элемента страницы за один прием.
• border-top-color - Задает цвет верхней границы элемента страницы.
• border-top-style - Задает тип верхней границы элемента страницы.
• border-top-width - Задает толщину верхней границы элемента страницы.
• border-width - Задает толщину всех границ элемента страницы.
• box-sizing - Используется для изменения заданной по умолчанию блочной модели CSS для вычисления высоты и ширины элемента.
• clear - Определяет, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено значение параметра float для этого элемента, свойство clear отменяет его действие для указанных сторон.
• empty-cells - Определяет как будут показываться границы и фон ячеек таблицы, у которых нет видимого контента.
• float - Определяет обтекание элемента другими слева или справа вместо помещения под ним.
• margin - Задает ширины полей между элементами страницы и его соседями.
• margin-bottom - Задает нижнее поле между элементом страницы и его соседями снизу.
• margin-left - Задает левое поле между элементом страницы и его соседями слева.
• margin-right - Задает правое поле между элементом страницы и его соседями справа.
• margin-top - Задает верхнее поле между элементом страницы и его соседями сверху.
• padding - Задает отступы между элементом страницы и его границами.
• padding-bottom - Задает отступ между элементом страницы и нижней границей.
• padding-left - Задает расстояние между элементом страницы и левой границей.
• padding-right - Задает расстояние между элементом страницы и правой границей.
• padding-top - Задает расстояние между элементом страницы и верхней границей.
• table-layout - Позволяет "зафиксировать" значения ширины ячеек таблицы.

Цвет и фон - Данный раздел содержит список свойств CSS, которые применяются для описания цвета и фона объектов.

• background - Задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position и background-repeat.
• background-attachment - Данный атрибут позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы.
• background-color - Задает фоновый цвет Web-страницы или ее элемента.
• background-image - Задает фоновый рисунок Web-страницы или ее элемента.
• background-position - Задает местонахождение фонового рисунка. Это комбинированный атрибут, заменяющий атрибуты background-position-x иbackground-position-y.
• background-position-x - Задает горизонтальную координату фонового рисунка.
• background-position-y - Задает вертикальную координату фонового рисунка.
• background-repeat - Устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе.
• color - Определяет цвет элемента.
• moz-background-clip - Определяет зону отображения фона, который может быть задан в виде рисунка или цвета.

Шрифт и Текст - Данный раздел содержит список свойств CSS, применимых для стилей шрифта, визуализации и форматирования текста.

• caption-side - Определяет положение заголовка таблицы относительно самой таблицы.
• content - Устанавливает сгенерированное содержимое для вставки до или после элемента.
• counter-increment - Увеличивает значение счетчика на заданное значение.
• counter-reset - Сбрасывает значение счетчика до заданного значения.
• direction - Устанавливает порядок чтения объекта.
• font - Устанавливает комбинацию отдельных свойств шрифта объекта. Или устанавливает один или более из шести предпочитаемых пользователем шрифтов.
• font-family - Устанавливает шрифт, применяющийся для отображения текста в объекте.
• font-size - Устанавливает значение размера шрифта, применяющегося для текста в объекте.
• font-size-adjust - Определяет коэффициент сжатия для размера шрифта.
• font-stretch - Задает расстояние между символами текста.
• font-style - Задает стиль (начертание) шрифта текста: italic, normal или oblique.
• font-variant - Устанавливает отображение строчных букв текста.
• font-weight - Задает параметры насыщенности шрифта.
• ime-mode - Задает состояние Редактора Способа Ввода (Input Method Editor - IME).
• quotes - Определяет как браузер должен отображать цитаты.
• layout-flow - Задает направление текста в объекте.
• layout-grid - Задает свойства сетки документа, применяемой для документов на арабских и азиатских языках, чтобы определить как будут отображаться текстовые символы на Web-странице.
• layout-grid-char - Задает интервал между символами в сетке, использующийся при отображении текстового содержимого элемента.
• layout-grid-line - Задает интервал между вертикальными столбцами символов, использующийся при отображении текстового содержимого элемента.
• layout-grid-mode - Задает нужный тип сетки для разметки содержимого элемента.
• layout-grid-type - Задает тип сетки, использующийся при отображении текстового содержимого элемента.
• letter-spacing - Это свойство позволяет задать интервал между символами текста в объекте.
• line-break - Задает правила разрыва или переноса строки в таких языках как японский, китайский и корейский.
• line-height - Это свойство позволяет задать межстрочный интервал в объекте.
• ruby-align - Это свойство позволяет задать позицию текста ruby относительно основы (объекта rt).
• ruby-overhang - Это свойство определяет позицию текста ruby относительно основы (объекта rt) и других элементов на странице.
• ruby-position - Это свойство отвечает за вертикальное позиционирование текста ruby относительно основы (объекта rt).
• text-align - Задает выравнивание текста в объекте.
• text-align-last - Задает выравнивание последней строки текста в объекте.
• text-autospace - Позволяет задавать пустой интервал между символами текста.
• text-decoration - Задает значение, которое показывает, где текст в объекте будет мигающим или, где будет подчеркнутым (надчеркнутым, зачеркнутым).
• text-decoration-blink - Задает значение, которое показывает, где текст в объекте будет мигающим.
• text-decoration-line-through - Задает значение, которое показывает, где текст в объекте будет зачеркнут.
• text-decoration-none - Устанавливает, задано ли в объекте для свойства textDecoration значение none.
• text-decoration-overline - Задает значение, которое показывает, где текст в объекте будет надчеркнут.
• text-decoration-underline - Задает значение, которое показывает, где текст в объекте будет подчеркнут.
• text-indent - Задает отступ для первой строки текста в объекте.
• text-justify - Задает какой тип выравнивания по ширине будет использован.
• text-kashida-space - Задает пропорции размера символа по отношению к размерам пробелов в выровненной по ширине строке текста.
• text-overflow - Дает возможность показывать многоточие (...) вместо части текста, которая не умещается в строку.
• text-rendering - Задает настройки для оптимизации различных параметров отображения текста.
• text-transform - Задает как будет отображаться текст в объекте.
• text-shadow - Задает список эффектов тени, которые применяются к тексту.
• text-underline-position - Задает отображение линии подчеркивания текста, которая определяется через свойство textDecoration для объекта.
• unicode-bidi - Задает уровень вложенности, принимая во внимание двунаправленный алгоритм в тексте (когда есть минимум 2 языка, один из которых читается слева-направо, а другой справа-налево).
• vertical-align - Задает вертикальное выравнивание объекта.
• white-space - Задает количество пробелов между словами, а также как должны быть установлены переносы строк.
• word-break - Задает поведение слов на странице. Особенно полезно при разметке документа на нескольких языках.
• word-spacing - Задает дополнительные пробелы между словами в объекте.
• word-wrap - Задает где применять перенос строки, если слово слишком длинное, и текст выходит за границы объекта.
• writing-mode - Задает направление символов в строке и порядок следования самих строк.