Интерлиньяж – это вертикальный интервал между строками текст . Он измеряется от базовой линии одной строки текста до базовой линии строки над ней. Базовая линия – это невидимая линия, на которой находится нижний край большинства букв.

Значение по умолчанию для автоинтерлиньяжа равно 120% от гарнитуры шрифта (например, для шрифта в 10 пунктов интерлиньяж равен 12 пунктам). Когда используется автоинтерлиньяж, значение интерлиньяжа отображается в скобках в меню «Интерлиньяж» палитры «Символ». Чтобы изменить значение автоинтерлиньяжа по умолчанию, выберите в меню палитры «Абзац» пункт «Выравнивание» и задайте процентное значение от 0 до 500.

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

Примечание.

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

Смещение базовой линии

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

Настройка кернинга и трекинга

Кернинг - это увеличение·или уменьшение·интервала между определенными парами символов. Трекинг - это увеличение·или уменьшение·интервала между символами в выделенном тексте или во всем блоке текста.

Примечание.

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

Кернинг текста можно выполнять автоматически, используя функции метрического или оптического кернинга. При метрическом кернинге (называемом также автокернингом ) используются пары литер, которые включены в большинство шрифтов. Шрифты содержат применяемые в процессе кернинга сведения об интервале между буквами в конкретных парах. Вот некоторые из этих пар: «LA», «P.», «To», «Tr», «Ta», «Tu», «Te», «Ty», «Wa», «WA», «We», «Wo», «Ya» и «Yo». Метрический кернинг применяется по умолчанию, поэтому к конкретным парам букв кернинг применяется автоматически во время импорта или ввода.

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


A. Исходный текст B. Текст после применения оптического кернинга C. Текст после установки вручную значения кернинга между буквами «W» и «a» D. Текст после применения трекинга E. Совмещение кернинга и трекинга

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

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

Трекинг и кернинг измеряются в 1/1000 эм. Эта единица измерения равна ширине самой широкой буквы шрифта и позволяет задать размер относительно текущей гарнитуры. Для шрифта размером 6 пунктов 1 эм равна 6 пунктам. Для шрифта размером 10 пунктов 1 эм равна 10 пунктам. Кернинг и трекинг строго пропорциональны текущему размеру гарнитуры шрифта.

Примечание.

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

Настройка кернинга

Выполните любое из следующих действий:

  • Чтобы для выделенных символов использовались сведения о кернинге, встроенные в шрифт, выберите для параметра «Кернинг» в палитре «Символ» значение «Автоматический» или «Метрический».

    Чтобы автоматически настроить интервал между выделенными символами с учетом их формы, выберите для параметра «Кернинг» в палитре «Символ» значение «Оптический».

    Чтобы настроить кернинг вручную, поместите точку ввода между двумя символами и установите нужное значение параметра «Кернинг» в палитре «Символ». (Примечание. Если выделен фрагмент текста, произвести кернинг текста вручную невозможно. Вместо этого воспользуйтесь автоматическим трекингом.)

    Совет . Чтобы уменьшить или увеличить кернинг между двумя символами, используйте комбинацию клавиш «Alt»+«Стрелка влево/вправо» (Windows) или «Option»+«Стрелка влево/вправо» (Mac OS).

    Чтобы отключить кернинг для выделенных символов, установите для параметра «Кернинг» в палитре «Символ» значение «0» (ноль).

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

HTML страница и ее структура, определяемая основными тегами

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

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

В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот . Конечно же, это не единственное средство для написания кода, но на этом этапе вам нужен именно он.

Пример структуры документа:

Рассмотрим HTML теги, определяющие структуру страницы

  • - обязательные, определяют HTML документ.
  • - определяют секцию со служебной информацией, содержат инструкции для поисковиков, для браузеров, скрипты.
  • - определяют основной заголовок web - страницы.
  • - обязательные, определяют видимую часть документа.
  • - определяют заголовок 3-го уровня.
  • - определяют параграф. Смотрите урок HTML параграфы
Структура HTML документа | Пишем код страницы

Последовательность действий следующая:

1. Пишeм в Блокноте код HTML страницы:

4. Открываем IE (Internet Explorer) или другой установленный по умолчанию браузер. В его меню пробуем найти и открыть сохраненный на компьютере файл index.html . Найти и открыть файл в любом браузере можно также в окошке, которое появится после набора на клавиатуре комбинации из двух клавиш: Ctrl и O - удерживаем Ctrl и после этого жмем латинскую букву O .

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

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

Правильная структура HTML 4.01

Такой должна быть начальная структура HTML страницы :





HTML структура документа

Самостоятельно добавьте параграфы, заголовок и посмотрите, что вышло. Не забывайте после каждого сохранения документа обновлять содержимое окна браузера нажатием кнопки в Mozilla Firefox или кнопки в Internet Explorer, или F5, чтобы изменения вступали в силу.

У вас все получилось? - Значит вы были внимательны и все сделали правильно.

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

Тег

Тег — cтрочный элемент-контейнер, который применяется для вставки в него небольших фрагментов программного кода, например, в веб-документе, представляющем учебное пособие по программированию. Браузеры отображают такой код моноширинным шрифтом (например, Courier New). Если использовать ero совместно с элементом

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

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

Пример: использования элементов и
  • Попробуй сам »

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

If (document.getElementsByClassName) { x = document.getElementsByClassName("pagination") if (x.length>y) { x.style.visibility = "hidden"; }

Внутри элемента «pre» браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.

if (document.getElementsByClassName) { x = document.getElementsByClassName("pagination") if (x.length>y) { x.style.visibility = "hidden"; }

Теги и

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

Пример: элементы и
  • Попробуй сам »

Текст, который пользователь должен ввести с клавиатуры поместите в
элемент-контейнер «kbd».

Введите текст: Это — текст, вводимый с клавиатуры

Это — текст, который помещен в контейнер «samp»

Тег

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

Пример: элементы
  • Попробуй сам »

Кинетическая энергия тела:

Кинетическая энергия тела:

Wк = mv2/2

Задачи Итоговое задание

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

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

Переменная
  • Реши сам »

Используя html-элементы обозначте в приведенном уравнении литеру y как переменную.

Переменная

Уравнение параболы y = Nx2

Переменная

Уравнение параболы y = Nx2

Предварительно отформатированный текст
  • Реши сам »

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

И переводится, как «язык разметки гипертекста». Гипертекст – это специальный метод навигации по интернет-страницам, реализованный в виде гипертекстовых ссылок. Нажимая по этим ссылкам, вы можете с легкость перемещаться по структуре сайта. Переходы при этом происходят не линейно, т.е. у вас всегда есть возможность переходить на любую страницу сайта, ссылка на которую видна в данный момент.

Под разметкой понимаются некоторые правила и свойства, которыми наделены элементы страницы. Они реализованы в виде так называемых тегов. Например, чтобы указать, что определенный текст на странице должен располагаться по ее центру, его можно пометить с помощью тега center. Увидеть HTML-код конкретной страницы можно через его контекстное меню. Например, для доступа к этому коду в браузере Firefox необходимо нажать правой кнопкой в пределах страницы и выбрать пункт «Исходный код страницы».

Как работает HTML-код?HTML-код представляет собой набор коротких тегов, с содержащимися в них элементами страницы. Весь этот код хранится в файле с расширением.html или.htm. При открытии такого файла в браузере код интерпретируется им, а в окне программы выдается страница в готовом виде. Зная язык разметки HTML, создать собственную страницу может практически любой человек.Какие бывают теги?Теги представляют собой отдельные конструкции внутри HTML-кода. Это обычный текст заключенный внутрь угловых скобок «». Теги вы можете увидеть в HTML-коде практически любой страницы. Сами по себе теги на страницах не отображаются, на них выводится конкретный элемент, который закодирован с помощью тегов. Например, если на странице присутствует картинка, значит ее HTML код содержит в себе тег img.Ограничения HTMLНесмотря на то что HTML код позволяет построить довольно качественную гипертекстовую страницу, он имеет свои ограничения. Страницы, содержащие исключительно такой код являются статичными, т.е. в них отсутствует динамика, специальные эффекты и другие возможности. Но они могут быть привнесены с помощью других языков, например Java Script. Подавляющее большинство современных сайтов создаются с использованием дополнительных языков, которые делают их более живыми и интерактивными.

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

Пример 1. Исходный код веб-страницы

Пример веб-страницы Заголовок

Первый абзац.

Второй абзац.

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Элемент (жарг. доктайп) предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях - современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

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

Открывающий тег определяет начало HTML-документа, внутри него хранится «голова» ( ) и «тело» документа ( ).

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

Элемент является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

Пример веб-страницы

Элемент определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страниц в браузере

Элемент является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в быть не должно. Но допустимо добавлять разные текстовые символы, например, так: Adobe™ Photoshop® .

Закрывающий тег показывает, что «голова» документа завершена.

«Тело» документа предназначено для размещения элементов и содержимого веб-страницы.

Заголовок

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

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