Форматирование текста
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
Табл. 1. Теги для форматирования текста
Текст
Текст
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.
Пример 1. Жирный курсивный текст
Текст Он словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда — никто не смеет принять его вызов.
Результат данного примера показан на рис. 1.
Рис. 1. Вид курсивного жирного начертания текста
Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).
Пример 2. Создание нижнего индекса
Текст Формула изумруда: Be3Al2(SiO3)6
Результат данного примера показан на рис. 2.
Рис. 2. Нижний индекс в тексте
Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.
Следует отметить, что теги и , также как и являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Теги для текста HTML
Как вставить текст в HTML страницу? Для этого существуют специальные HTML теги для текста.
В HTML существует шесть уровней заголовков. Они добавляются с помощью тэгов — . При этом это заголовок первого уровня, он самый большой.
Пример создания заголовков:
8
9
10
11
12
13
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвёртого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Заголовки никак не зависят друг от друга. Вы можете добавить заголовок любого уровня везде, где это нужно.
Новички иногда не могут разобраться с вопросом — сколько заголовков первого уровня может быть на странице. В интернете я не раз встречал на эту тему неполную и недостоверную информацию. Поэтому я решил подробно рассмотреть этот вопрос.
На работу страницы количество тэгов никак не влияет. Можно их добавлять сколько угодно. А вот поисковые системы отрицательно относятся к тому, что на странице есть больше одного заголовка первого уровня. Поэтому, если Вы собираетесь продвигать свой сайт в поисковых системах, то на каждой странице должен быть только один заголовок первого уровня. Вывод: лучше сразу привыкать к тому, чтобы не ставить больше одного тэга на страницу. Ведь в HTML есть целых шетсь уровней заголовков. При любой вёрстке страницы этого вполне достаточно, чтобы выделить тэг только для одного заголовка.
Абзац
Тэг
создаёт абзац текста. У него есть отступы сверху и снизу для отделения одного абзаца от другого. Кроме того, есть возможность установить отступ первой строки. Всё это регулируется с помощью CSS.
Абзац текста
Тэг
Тэг
это не совсем текстовый тэг. Он производит перевод строки. Если он находится внутри текста, то последующий текст переходит на новую строку. А если он находится между блоками, то он добавляет пустую строку.
Пример перевода строки:
Начало текста
новая строка
Тэг
Тэг это строчный тэг для вставки текста. Обычно он используется тогда, когда нужно выделить часть текста определённым образом.
Для примера выделим часть текста красным цветом.
Начало текста красный текст продолжение текста
Нужная часть текста находится внутри тэга . Чтобы она была красной, тэгу установлен атрибут style, который задаёт стили. Так как работа со стилями описывается в учебнике CSS, здесь я не буду объяснять, как работает этот атрибут. Просто добавьте его в тэг, как написано в примере.
Тэг
Тэг используется для особых видов текста, в которых важно сохранить форматирование. Текст внутри этого тэга отображается на странице именно так, как он выглядит в коде страницы. В нём сохраняются все пробелы и переносы строки. Текст отображается моноширинным шрифтом, но это можно изменить с помощью стилей.
текст текст после пробелов следующая строка следующая строкаВыделение текста
В HTML есть тэги для выделения текста. Тэги и создают жирный шрифт. Хотя эти тэги имеют некоторые различия, на странице они обычно выглядят одинаково. Тэги и выделяют текст курсивом. Существует тэг , который делает текст подчёркнутым, но использование его нежелательно.
Пример выделения текста:
Жирный шрифт Жирный шрифт Курсивный шрифт Курсивный шрифтТекст можно выделять с помощью стилей. Каждый сам решает, как выделять текст, с помощью тэгов или стилей.
Другие тэги
Мы рассмотрели специальные HTML теги для текста. Но текст могут содержать и многие другие тэги, которые добавляют контент на страницу. Можно даже вставить текст вне каких-либо тэгов, он всё равно отобразится на экране. Но на практике так никто не делает, потому что вне тэгов текстом нельзя управлять. Поэтому весь текст конечно должен находиться внутри тэгов. А когда Вы изучите CSS, Вы сможете определять внешний вид текста.
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2024 © basecourse.ru Все права защищены
Как написать текст в html
Написать в поддержку
Помощь онлайн
Проверить домен
Войти Валюта:
HTML: форматирование текста
09 июня
73026
Комментариев: 0
Рассмотрим несколько важных моментов форматирования текста в HTML:
- Работа со шрифтом. Выделим несколько ключевых тегов для работы со шрифтом:
- и 一 выделение текста.
- и 一 курсив.
- 一 подчеркнутый текст.
- и 一 надстрочный индекс.
Содержание:
Текст в браузере:
Создание блока с отступом. За создание блока с отступом отвечает тег . например:
Текст в браузере:
- Цвет, стиль и размер шрифта. Данные параметры задаются тегом , имеющим несколько атрибутов: color = (цвет шрифта), size = (размер шрифта), face = (перечень названий шрифтов). Для того, чтобы изменить размер шрифта, воспользуйтесь атрибутом size тега . Чтобы поменять цвет шрифта, воспользуйтесь атрибутом color тега . Чтобы добавить шрифт, нужен атрибут face тега .
Текст в браузере:
- Переход на следующую строку и выравнивание текста. Переход на следующую строк гарантирует тег тег
. Например:
Текст в браузере:
Также рекомендуем почитать:
Как подключить CSS к HTML HTML: создание кнопок HTML: построение графиков и диаграмм HTML: создание заголовков HTML: создание переключателей и чекбоксов HTML: добавление метатегов HTML: создание меток
- Блог
- Хостинг, домены, мировые новости, обзоры ПО
- Рейтинги, обзоры, отзывы
- Наши новости, акции, нововведения
- Руководства, статьи, инструкции
- RSS
Популярное в категории
Июнь
79938
Июнь
73026
Октябрь
57152
Март
44955
Сентябрь
38825
Текст в html
Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.
Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.
Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.
Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.
Строчные элементы обрамляются тегами . .
Для обрамления элементов блочного типа используется пара
.
Браузеры обрамляют div-блоки разрывами строки.
Блок не может располагаться внутри блока .
Пример
Блоки Первый блок текста Второй блок текста Основные теги форматирования текста
|
. |
Абзац. |
. |
Заголовок первого уровня. |
. |
Заголовок второго уровня. |
| . | |
. |
Заголовок шестого уровня. |
| Переход на новую строку. | |
. |
Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes. |
| Горизонтальная разделительная линия. | |
. |
Текст фиксированной ширины с сохранением всех пробелов и переносов. |
Пример
Заголовки и абзацы Заголовок
первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Тест абзаца
Создайте текстовый файл, как в примере. Сохраните его с расширением html.
Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.
Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать Notepad++ или PhpStorm.
Выделение в тексте
| . | Полужирный шрифт. |
| . | Курсив. |
| . | Подчеркнутый текст. |
| Перечеркнутый текст. | |
| . | Надстрочный текст. |
| . | Подстрочный текст. |
Пример
Текст может быть полужирным. Текст может быть курсивом.
Текст можно подчеркнуть. Текст можно зачеркнуть.
Текст может быть надстрочным. Текст может быть подстрочным.Текст может быть полужирным. Текст может быть курсивом.
Текст можно зачеркнуть.
Текст может быть надстрочным . Текст может быть подстрочным.
Цитаты, переменные, адреса
|
. |
Служит для предоставления автором документа контактной информации, чтобы желающие могли связаться с автором материала. Обычно отображается курсивом. Блочный элемент. |
|
Выделение цитат. Блочный элемент. |
| . | Выделение цитат. Обычно отображается курсивом. |
. |
Вывод текста шрифтом фиксированной ширины. Применяется, как правило, для вывода небольшого куска программного кода (для больших листингов используется тег ). |
| . | Выделение важных фрагментов текста. Обычно отображается курсивом. |
| . | Вывод текста шрифтом фиксированной ширины. |
| . | Вывод текста шрифтом фиксированной ширины. |
| . | Сильное выделение важных фрагментов текста. Обычно отображается полужирным шрифтом. |
| . | Используется для отметки имен переменных. Обычно отображается курсивом. |