Html основные принципы разметки

2. Принципы гипертекстовой разметки

HTML является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL-кодами (тегами).

Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки («»). Простейший вариант тега — имя, заключенное в угловые скобки, например, или . Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега.

Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:

Эта запись означает следующее: таблица шириной 570 пикселов, выравнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пиксела, ширина бордюра 16 пикселов.

Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL (Uniform Resource Locator, унифицированный указатель ресурса), других документов в качестве значения атрибута HREF.

Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив закрывающая пара представляет собой , для тега заголовка <ТIТLЕ>закрывающей парой будет ). Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию скобок «begin/end» в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п. Теги определяют область действия правил интерпретации текстовых документов.

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

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

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

Для краткости и образности мы будем в ряде случаев вместо словосочетания «элемент разметки» применять термин «контейнер».

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

Следует отметить, что в литературе кроме термина «контейнер» еще используется и термин «элемент». Следует быть внимательным, чтобы не путать контейнер (например, BODY) и тег (BODY), используемый при формировании контейнера.

Кроме тегов, элементами HTML являются CER (Character Entity Reference), они предназначены для представления специальных символов в документе HTML, которые могут быть неверно обработаны браузером. Предположим, создается документ HTML, речь в котором идет об элементах данного языка. Если указать имя тега просто в документе, браузер может воспринять его как непосредственно старт-тег. Для вывода таких символов и используется CER.

Например, чтобы представить символ «» — на >. То есть, если указать в тексте HTML строку , она будет выглядеть на экране как текст .

Может возникнуть вопрос: как быть с символами ««, «&» и со специальными символами, типа знака ударения? Можно выводить их, используя соответствующие CER, например для «&» это будет &, и т. д.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отметим, что значения атрибутов CONTENT и CHARSET заносят в одни кавычки.

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

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

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

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

Параграф

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

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

Не смотря на то, что действующие версии 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-документе, логический же стиль определяет текст согласно заданному значению описывая шрифт.

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

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

Источник