Основные правила набора текста

Выбор шрифта при разработке сайта. Требования к шрифтам сайта в соответствии со стандартами W3C. Тэги форматирования. Маркированные и нумерованные списки, различные виды маркировки списков. Язык разметки гипертекста HTML. Правила построенияHTML –документа.

Ответ:

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

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

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

тексты должны быть легкими, читаемыми, без обилия длинных слов и оборотов, написанные живым языком, но без фамильярности;

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

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

Требования к шрифтам сайта в соответствии со стандартами W3C.

выравнивание текста по левому краю увеличивает скорость чтения, т. к. ровный левый край помогает найти начало новой строки.

Длина строки. Основываясь на предположении, что человеческий глаз в определенный момент времени может сфокусироваться примерно на 7,5 см строки текста, считается, что длина в 9 или 10 слов увеличивает скорость чтения и восприятие материала. Однако скорость чтения и предпочтения пользователей — не одно и тоже. При верстке текста сначала определитесь, что важнее — скорость или удобство чтения. Если важна скорость выполнения задач пользователем, тогда длинные строки повысят темп чтения текста. Однако, если важнее удобство работы, используйте небольшую длину строки

Интерлиньяж (межстрочный пробел, высота строки). Установка интерлиньяжа больше значения по умолчанию, примерно в 1.3em от обычного значения (т. е. 130%), значительно улучшит удобочитаемость. Высота строки связана с ее длиной. Чем больше длина строки, тем больше должен быть интерлиньяж.

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

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

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

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

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

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

Тэги форматирования. Маркированные и нумерованные списки, различные виды маркировки списков.

HTML имеет 6 уровней заголовков разделов страницы, имеющих номера от 1 до 6. Заголовок высшего уровня имеет номер 1. Отличаются заголовки от текста и между собой толщиной и высотой букв, в заголовке <H1> самые крупные символы. Тэги <H1>..</H1>, <H2>..</H2>,..., <H6>..</H6>.

Абзацы в тексте выделяются тэгами <P>..</P>. При просмотре браузером абзацы отделяются друг от друга пустой строкой. Надо заметить, что в существующих версиях HTML закрывающий тэг </P> не используется. Но все-таки рекомендуется его употреблять, так как он может быть введен в последующих версиях. К ошибке это не приведет - браузер просто проигнорирует все незнакомые тэги. А вам потом не придется переделывать свои документы. В версии HTML+ предлагается использовать закрывающий тэг </P>.

И заголовки, и абзацы по умолчанию выключены влево (т.е. прижаты к левому краю окна). Атрибут ALIGN позволяет выключить текст по центру или вправо. Синтаксис: <P ALIGN=RIGHT>, может принимать значения LEFT (влево), CENTER (по центру), RIGHT (вправо).

Аналогично форматируются и заголовки: <H1 ALIGN=RIGHT>.. </H1> и т.д.
Еще один полезный способ выравнивания по центру, это использование тэгов <CENTER>..<CENTER>. Они позволяют отформатировать сразу несколько заголовков и абзацев.

Чтобы перейти на новую строку, не прерывая абзаца (т.е., чтобы не вставлять пустую строку между абзацами), применяется тэг <BR>. Закрывающего тэга у него нет.

Тэг <HR> описывает горизонтальную линию.

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

В языке HTML предусмотрен специальный набор тэгов для представления информации в виде списков. Списки являются одним из наиболее часто употребляемых форм представления данных как в электронных документах, так и в печатных. Возможность организации списковых структур имеется во многих текстовых редакторах, в частности, мощный текстовый процессор Microsoft Word обладает удобными средствами форматирования списков различного вида. Бывают: нумерованные списки; маркированные списки; многоуровневые списки; списки определений

Одним из типов списков, реализованных в языке HTML, является маркированный список. Иначе списки такого типа называют ненумерованными или неупорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тэга <UL>, с помощью которого и организуются списки такого типа в HTML-документах (UL — Unordered List, неупорядоченный список).

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

Для создания маркированного списка необходимо использовать тэг-контейнер <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому здесь нет необходимости использовать тэги абзаца <P> или принудительного перевода строки <BR>.

Каждый элемент списка должен начинаться тэгом <LI> (LI — List Item, элемент списка). Тэг <LI> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.

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

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

Другим типом списков, реализованных в языке HTML, является нумерованный список. Иначе списки такого типа называют упорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тэга <OL>, с помощью которого и организуются списки такого типа в HTML-документах (OL — Ordered List, упорядоченный список).

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

TYPE = А — задает маркеры в виде прописных латинских букв;

TYPE = а — задает маркеры в виде строчных латинских букв;

TYPE = I — задает маркеры в виде больших римских цифр;

TYPE = i — задает маркеры в виде маленьких римских цифр;

TYPE = 1 — задает маркеры в виде арабских цифр.

По умолчанию всегда используется значение TYPE = 1, т. е. нумерация при помощи арабских цифр. Это касается и вложенных нумерованных списков. Здесь, в отличие от маркированных списков, браузеры по умолчанию не делают различной нумерацию на различных уровнях вложенности списков. Заметим, что после номера элемента списка всегда дополнительно выводится знак "точка". Параметр TYPE с теми же значениями может употребляться для указания вила нумерации отдельных элементов списка. Для этого параметр TYPE с соответствующим значением разрешено указывать в тэге элемента списка <LI>.

Язык разметки гипертекста HTML. Правила построения HTML –документа.

(от англ. Hypertext Markup Language — «язык разметки гипертекста») — это стандартный язык разметки документов во Всемирной паутине. Все веб-страницы создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, удобном для человека.

Вместе с XML, HTML обычно причисляют к «языкам разметки текста». На самом деле роль этих двух языков, как и самого формата под названием «просто текст» («plain text»), выходит далеко за рамки обработки текстовой информации.

Изучение любого компьютерного языка начинается со знакомства с его основными строительными блоками — операторами, выражениями, переменными. С этой точки Зрения язык HTML крайне прост, чтобы не сказать — примитивен: кроме обычного текста, HTML-файл содержит лишь один тип управляющих конструкций, так называемые теги (tags)

Язык HTML представляет из себя множество команд- тегов, открывающих <...>, и закрывающих </...> действия соответствующие данным командам. Это могут быть команды создания каких-либо элементов страницы, как например встроенная таблица или изображение. Текст заключенный между тегами, при выводе на экран с помощью браузера подчиняется правилам свойственным для данных тегов(как например размер или цвет). Некоторые из тегов не требуют закрытия, и прекращают свое действие с появлением аналогичных открывающих команд. (Например строка в списке прерывается там, где дана команда создания следующей строки списка.) Учтите, что "лишний" закрывающий тег не испортит ваших трудов. Браузеры вообще все непонятные для них команды пропускают мимо ушей, что для нас- Чайников весьма важно. Поэтому я, рекомендую вам закрывать теги явным образом - это облегчит чтение ваших документов.
Теги могут быть вложены друг в друга, для придания тексту сразу нескольких свойств. В этом случае, порядок закрытия тегов должен быть строго противоположен порядку их открывания. Например если вы сначала объявили текст жирным шрифтом, а потом еще и курсивом, то закрывать следует сначала внутренний тег (курсив) и только затем болд, а чтобы сделать последнее слово в примере только в италике (без bold) вам придется снова открывать и закрывать тег <I>:
<B>Текст<I> вышеописанного </I></B> <I> примера.</I>