Основные принципы создания HTML-документов

Принципы создания HTML-документов

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

Теги позволяют изменять размеры, начертания и цвета символов, определять положение текста на странице, вставлять графические изображения, анимации, звуки и видеофрагменты, менять цвет фона и т.д. Однако самая важная функция – это то, что с их помощью можно вставлять гиперссылки на страницы, в том числе и в форме графических объектов.

Поскольку HTML-страница представляет собой специально размеченный текстовый документ, для ее создания и редактирования можно использовать простейший текстовый редактор (типа Блокнот), который создаст документ без управляющих символов форматирования текста.

Для создания Web-страницы, требуется запустить Блокнот из Windows командой Пуск-Программы-Стандартные-Блокнот или из Internet Explorer с помощью команды Вид - В виде HTML. Сохраним файл под именем index.htm, данное имя всегда присваивается стартовой странице, расширение файла .htm указывает на формат Web-страницы.

Минимальный вариант Web-страницы:

Заголовок в окне браузера

Основное содержание страницы

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

Любая Web-страница содержит теги двух категорий:

• которые описывают общие свойства документа (заголовок, имя автора документа);
• которые определяют, как отобразится браузером тело документа в целом.

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

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

Кодировка страниц

Чтобы посетители сайта увидели нормальные русские буквы, а не набор иероглифов, необходимо вставить в контейнер нужную кодировку. В Windows русский язык поддерживается следующими кодировками: Windows-1251, UTF-8, ISO-8859-5, KOI-8R. Русскую кодировку страницы выбираем следующим образом:

Уровни заголовков

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

В HTML различают 6 уровней заголовков, пронумерованных с 1 по 6 (заголовок 1 уровня является заголовком высшего уровня). В отличии от нормального текста, заголовки выделяют шрифтом, т.е. размером и толщиной букв. Заголовок самого верхнего уровня имеет значение "1".

Общий вид заголовка:

Заголовок x-го уровня ,

где x - цифра от 1 до 6, которая определяет уровень заголовка.

Параграф

При работе с текстами в языке HTML используется большое количество тегов, которые можно разделить по способу форматирования на 2 группы. К первой группе будут отнесены теги, используемые при форматировании абзацев (фрагментов текста), а ко второй группе отнесут теги, используемые для форматирования отдельного символа в тексте.

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

Тег определяется параграф внутри документа. Обычно браузер окружает параграф пустыми строками (1,5 интервала).

Синтаксис:

Текст абзаца

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

Абзац

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

В данном теге используется атрибут ALIGN:

Текст, выровненный по центру!!!

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

Разрыв строки

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

Расширить возможности тега можно с помощью дополнительного параметра.

Этот параметр переводит строку и размещает следующую, начиная с чистой левой (left), правой (right) или обоих (all) границ окна браузера.

Неразрывная строка

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

Чтобы разбить данную строку на 2 , но в строго отведенном месте, необходимо вставить тег .

Например:

Данная строка является самой длинной строкой документа, которая не позволяет браузеру какого-либо разбиения кроме указанного переноса .

Форматирование шрифта

Для выбора шрифта используют атрибут FACE, в значении которого указывают название шрифта (Arial, Tahoma и др.) либо слова: serif - с засечками, san_serif - без засечек, cursive – курсив, monospace – моноширинный.

Например:

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

Размер шрифта

Размер шрифта изменяют с помощью тега:

Его используют для определения размера шрифта от самого маленького (1) до самого большого (7). Можно непосредственно указывать размер шрифта цифрой, или же его смещение относительно базового значения (по умолчанию 3) в положительную или отрицательную сторону. Символы «+» или «-« в записи будут указывать на соотношение данного размера шрифта с размером базового шрифта документа. Базовое значение изменяют с помощью тега:

Цвет шрифта

Цвет шрифта меняют с помощью тега:

Цвет указывают в RGB-формате (Red-Green-Blue), отмечая размерность каждой компоненты цвета в шестнадцатеричном формате. Например, цвет обозначается черный - "000000", белый - "FFFFFF" и т.п.

Физические и логические стили

Для описания отдельных слов или предложений используются специальные стили: логический и физический. Физический стиль определяет некоторый участок текста, автором задается стиль написания текста в исходном HTML-документе, логический же стиль определяет текст согласно заданному значению описывая шрифт.

Физические стили бывают:

полужирный шрифт

крупный шрифт

мелкий шрифт

нижний индекс

верхний индекс

(телетайп) моноширинный шрифт

курсив

курсив

зачеркнутый шрифт

подчеркивание

Логические стили бывают:

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