Главная » Разное

Способы форматирования документов html

Содержание
  1. Форматирование текста
  2. WEB-дизайн
  3. Форматирование текста
  4. Заголовки
  5. Синтаксис:
  6. Атрибуты:
  7. Пример:
  8. Абзацы
  9. Синтаксис:
  10. Атрибуты:
  11. Примеры:
  12. Прерывание строки
  13. Пример:
  14. Результат:
  15. Начертание текста
  16. Пример:
  17. Результат:
  18. Установка параметров шрифта
  19. Синтаксис:
  20. Атрибуты:
  21. Пример:
  22. Результат:
  23. Пример:
  24. Результат:
  25. Атрибуты:
  26. Пример:
  27. Пример:
  28. Преформатируемый текст
  29. Пример:
  30. Результат:
  31. Тэги логического форматирования
  32. Пример:
  33. Результат:
  34. HTML :: Физическое и логическое форматирование html-документа
  35. Физическое форматирование html-документа
  36. Логическое форматирование html-документа

Форматирование текста

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 1. Теги для форматирования текста

Код HTML Описание Пример
Текст Жирное начертание текста Текст
Текст Курсивное начертание текста Текст
Текст Верхний индекс e=mc 2
Текст Нижний индекс H2O
Текст пишется как есть, включая все пробелы
Текст Курсивный текст Текст
Текст Жирное начертание текста Текст

Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

Результат данного примера показан на рис. 1.

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

Результат данного примера показан на рис. 2.

Рис. 2. Нижний индекс в тексте

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

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

Источник

WEB-дизайн

для тех, кто начинает создавать сайты

Форматирование текста

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

Существует две группы тегов форматирования текста:

  • Тэги физического форматирования
  • Тэги логического форматирования

Физическое форматирование документа (визуальное) позволяет создавать различные виды выделения части текста по смысловому признаку. Тэги физического форматирования прямо указывают браузеру на модификацию текущего шрифта.

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

Заголовки

Для удобства документ разделяют заголовками разделов с помощью тегов и , где n может принимать значение от 1 до 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом — размером и толщиной букв. Заголовок первого уровня должен быть выделен тэгом

Синтаксис:

где n — число от 1 до 6, определяющее уровень заголовка.

Атрибуты:

  • align=»left|center|right|justify» — способ выравнивания заголовка:
    • left — выравнивание по левому краю.
    • center — выравнивание по центру.
    • right — выравнивание по правому краю.
    • justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

Пример:

Абзацы

Абзацы (параграфы) располагаются между тэгами

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

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

Чтобы сохранить удобочитаемость в исходном коде HTML-файла, рекомендуется абзацы отделять пустыми строками.

Синтаксис:

Атрибуты:

  • align=»left|center|right|justify» — способ выравнивания текста.

Примеры:

Прерывание строки

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

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

Очень удобно при публикации стихов.

Пример:

Результат:

Однажды в студеную зимнюю пору
Сижу за решеткой в темнице сырой.
Гляжу — поднимается медленно в гору
Вскормленный в неволе орел молодой.

Начертание текста

Начертание текста определяется следующими тэгами:

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

Пример:

Результат:

Из теоремы Пифагора следует:
c 2 =a 2 +b 2

Допускается совместное использование тегов задания стиля:

Однако не допускается перекрещивание стилей:

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

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

Установка параметров шрифта

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

Синтаксис:

Атрибуты:

  • color =»цвет» — устанавливает цвет текста.
  • face =»шрифт1, шрифт2. » — задает гарнитуры шрифтов, использующихся для текста. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки.
  • size =»число» — задает размер шрифта в условных единицах от 1 до 7. Размер может задаваться абсолютным или относительным значением от базового размера шрифта в документе. При относительном задании размера число n может принимать значения от 1 до 7 со знаками плюс (+) — увеличение или минус (-) — уменьшение размера шрифта на n пунктов по отношению к базовому размеру шрифта в документе. По умолчанию базовый размер шрифта в документе считается равным 3 в абсолютных значения.

Пример:

Результат:

Пример:

Результат:

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

Атрибуты:

  • size=»число» — размер шрифта число n может принимать значения от 1 до 7.
  • color=»цвет » — цвет шрифта.
  • face=»шрифт» — гарнитура шрифта.

Пример:

Тэги BIG и SMALL, изменяют относительной размер шрифта на одну единицу отсчета от базы.

Пример:

Преформатируемый текст

— между этими тэгами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа «курьер».

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

Пример:

Результат:

Тэги логического форматирования

Тэг Описание
Используется для определений, например для термина, встречающегося в тексте впервые (по умолчанию наклонный шрифт).
Простое выделение слов (англ. emphasis — акцент). Обычно выводится курсивом
G Особое выделение текста (сильное выделение, от англ. strong emphasis — сильный акцент.). Обычно выводится полужирным. Является альтернативой тега физического форматирования .
Выделение заголовков книг, фильмов, цитат и т.п.
Выделение программных кодов, исходных текстов программ и т.п. Изображается шрифтом фиксированной ширины.
Выделения текста, вводимого пользователем с клавиатуры (от англ. keyboard — клавиатура). По умолчанию моноширинной шрифт. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.
Используется для машинных сообщений (от английского sample — образец). Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. Изображается шрифтом фиксированной ширины.
Используется для написания имен переменных в фрагменте кода программы (от англ. variable — переменная). По умолчанию курсив.
Используется для описания аббревиатуры (сокращенное название, которое читается по буквам).
Используется для описания акронима (сокращенное название, которое читается как слово). Закрывающийся тэг обязателен. Пример: ВУЗ

Эти тэги можно применять с атрибутом title=»текст» , который описывает содержимое элемента в виде всплывающей подсказки и появляется при наведении курсора на элемент. Вид подсказки зависит от браузера, настроек операционной системы.

Пример:

Результат:

Этот текст имеет сильное выделение. А этот текст простое выделение.

Источник

HTML :: Физическое и логическое форматирование html-документа

Физическое форматирование html-документа

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

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

Приведем описание тегов, которые в предыдущих версиях HTML можно было смело отнести к тегам физического форматирования:

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

Использование перечисленных элементов разметки показано в примере №1 .

Пример №1. Использование элементов физической разметки

Как видим, указанные теги вполне можно было бы использовать для физической разметки документа. Тем более, что сами названия явно указывают на предназначение элементов: italic, bold, underline и т.д. Однако все это пережитки старых версий, и применять какие-либо теги только лишь для изменения внешнего вида текста крайне не рекомендуется. Ведь в HTML 5 все теги имеют логическую нагрузку, хотя отношение некоторых из них к логическим и выглядит несколько натянутым. Однако в любом случае, теперь HTML 5 практически полностью используется в веб-программировании, как инструмент логической разметки документа, а за внешний вид отвечает CSS .

Логическое форматирование html-документа

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

Приведем описание тегов логического форматирования:

Все перечисленные элементы также формируются соответствующими парными тегами и отображаются браузерами как строчные элементы (см. пример №2 ).

Пример №2. Использование элементов логической разметки

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

В завершение пункта отдельно приведем описание еще двух элементов логической разметки документа:

Использование данных элементов показано в примере №3 .

Пример №3. Использование элементов «address» и «blockquote»

Источник

Читайте также:  Способы земледелия передней азии
Оцените статью
Разные способы
© 2024 Разные способы.
Внимание! Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению.