Теги, применяемые для форматирования шрифта. Форматирование текста в HTML, HTML теги для редактирования текста
Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.
Тег
Тег отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо тега использовать тег логического форматирования . Например:
Это полужирный шрифт.
Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)
Тег
Тег отображает текст курсивом. Для большинства случаев вместо этого тега рекомендуется использовать теги , , или , поскольку последние лучше отражают назначение выделяемого текста. Например:
Выделение курсивом
Тег
Тег отображает текст моноширинным шрифтом. Для
большинства случаев вместо этого тега лучше использовать теги ,
или . Пример:
Это моноширинный шрифт.
Тег
Тег отображает текст подчеркнутым. Отмененный тег. Вместо него рекомендуется использовать теги или . Например:
Пример подчеркивания текста.
Теги и
Теги и отображают текст, перечеркнутый
горизонтальной линией. Отмененный тег. Вместо него следует использовать тег
. Например:
Пример зачеркнутого
текста.
В настоящее время тег поддерживается не всеми
браузерами, поэтому пока рекомендуется использовать в сочетании
с тегом . А именно, внутрь тега-контейнера можно вложить
пару тегов
....
Тег
Тег выводит текст шрифтом большего (чем непомеченная
часть текста) размера. Вместо данного элемента лучше использовать
или теги заголовков, например,
Шрифт большего размера.
Тег
Тег выводит текст шрифтом меньшего размера. Поскольку в HTML нет тега, противоположного по действию тегу , то для этих целей можно применять тег . Большинство браузеров поддерживают вложенные теги , однако использовать такой подход не рекомендуется. Например:
Шрифт меньшего размера.
Тег
Тег сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:
Пример шрифта для нижнего индекса.
Тег
Тег сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:
Пример шрифта для верхнего индекса.
Тег
Тег
Тег
Тег-контейнер является аналогом тега уровня
блока Браузер Microsoft Internet Explorer дополнительно разрешает
использование следующих параметров тега: DIR, DATAFLD, DATAFORMATAS, DATASRC.
Описание параметров можно найти во второй части книги. Рис. 1.3.
Использование вложенных тегов форматирования
текста
Теги форматирования могут быть вложенными друг в друга.
При этом нужно внимательно следить, чтобы один контейнер находился целиком в
другом контейнере. На рис. 1.3 показан пример использования вложения элемента
курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода: Это полужирный шрифт. Это курсив. А здесь текст полужирный и курсивный Тег
Тег указывает параметры шрифта. Он относится
к тегам физического форматирования уровня текста. Назначение параметров шрифта непосредственно в тексте документа
нарушает основную идею разделения содержательной части документа и описания
формы представления документа. Поэтому в спецификации HTML 4.0 данный тег, а
также тег Несмотря на эти грозные предупреждения, видимо, для самых
простых документов физическое форматирование можно считать допустимым. Кроме
того, начинать обучение основам форматирования проще всего именно с правил непосредственного
указания форматов элементов. До стилевого оформления начинающий разработчик
должен еще дорасти. Тег относится к последовательным элементам,
поэтому не может включать в себя элементы уровня блока, например, Или Для тега могут задаваться следующие параметры: FACE, SIZE
и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных
параметров: POINT-SIZE и WEIGHT, описание которых опускаем. Параметр FACE служит для указания типа шрифта, которым
программа просмотра пользователя будет выводить текст (если такой шрифт
имеется на компьютере). Значением данного параметра служит название шрифта,
которое должно в точности совпадать с названием шрифта, имеющего у пользователя.
Если такого шрифта не будет найдено, то данное указание будет проигнорировано
и будет использован шрифт, установленный по умолчанию. Можно указать как один, так и несколько названий шрифтов,
разделяя их запятыми. Это весьма полезное свойство, так как в разных системах
могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным
качеством является задание предпочтения использования шрифтов. Список шрифтов
просматривается слева направо. Если на компьютере пользователя нет шрифта,
указанного в списке первым, то делается попытка найти следующий шрифт и
т. д. Приведем пример использования параметра FACE: Пример задания названия шрифта. На рис. 1.4 показано отображение примера браузером
Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana,
при его отсутствии будет использован шрифт Arial и т. д. Рис. 1.4.
Отображение примера браузером Netscape
Этот параметр служит для указания размеров шрифта в
условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой
программы просмотра. Принято считать, что размер "нормального"
шрифта соответствует значению 3. Настройки размеров шрифта, используемых по умолчанию, а
также величины абсолютного изменения размеров шрифта, зависят от браузеров.
На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты,
используемые по умолчанию. Размер шрифта указывается как абсолютной величиной (SIZE=2),
так и относительной (SIZE=+1). Последний способ часто используется в сочетании
с заданием базового размера шрифта с помощью тега Примечание
При указании размеров шрифтов записи типа "2"
и "+2" (в отличие от большинства языков программирования, в которых
унарный знак "+" можно опускать) дают принципиально разный результат.
Приведем пример, в котором использованы различные способы
назначения размеров шрифтов. Отображение примера показано на рис. 1.6. Рис. 1.5.
Окно настройки параметров шрифтов браузера
Netscape
Рис. 1.6.
Назначение размеров шрифтов
Шрифт размера 1 Шрифт размера 2 Шрифт размера 3 Шрифт размера 4 Шрифт размера 5 Шрифт размера 6 Шрифт размера 7 Этот параметр устанавливает цвет шрифта, который может
задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример
документа с разноцветным текстом. Текст зеленого цвета Текст красного цвета Тег Тег Примечание
Тег Заметим, что для тега В качестве параметров могут использоваться точно такие
же параметры, что и для тега , а именно:
FACE, SIZE и COLOR. Назначение и правила записи параметров
аналогичны. Примечание
Браузер Netscape не допускает применение параметра
FACE тега Приведем пример использования тега Текст, записанный шрифтом по умолчанию. Шрифт размера 2. Шрифт размера 4. Текст после таблицы В приведенном примере дважды переопределяется размер шрифта,
используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается
равным 2, далее - 4. Обратите внимание на отображение данного примера (рис.
1.7). Видно, что для таблиц назначение тега Рис. 1.7.
Отображение примера с тегом Текст в HTML-документах форматируют с помощью соответствующих тегов. В таблице приведены теги, используемые для форматирования символов, и заданный ими эффект. Кроме этого можно определять различные параметры шрифта. В частности, с помощью тега
...
задают гарнитуру шрифта, размер и цвет шрифта. Этот тег одинарный, действует на весь текст, размещенный внутри контейнера.
Tahoma
,
Arial Black
1
...
7
Текст
,
Текст
Для оформления сайта обычно используют набор цветов, который называют . Он состоит из 216 элементов. Особенностью "безопасных" цветов является то, что они не меняются в случае отображения различными браузерами или на разных мониторах, т. е. эта палитра обеспечивает точную передачу на разных мониторах того, что задумал веб-дизайнер. Если любая из трех составляющих шестнадцатеричного значения отличается от 00
, 33
, 66
, 99
, СС
или FF
, то цвет не является безопасным. Значения атрибутов SIZE
и COLOR
можно записывать без кавычек, но лучше всё делать по правилам. Есть и другие теги, которые можно применять для изменения параметров текста: HTML- текст
представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения. Теги для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family). Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри тега Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Теги Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег Им обозначаются подзаголовки тега Показывает подзаголовки тега Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em
/ 0.83em
/ 0.67em
, верхний и нижний отступ по умолчанию 1.33em
/ 1.67em
/ 2.33em
соответственно. Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность. Отображает шрифт курсивом, придавая тексту значимость. Отображает шрифт курсивом. Уменьшает размер шрифта на единицу по отношению к обычному тексту. Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста. Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер. Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер. Выделяет текст в новой версии документа, подчёркивая его. Перечёркивает текст. Используется для выделения текста, удаленного из документа. Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом. Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом. Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом. Выделяет имена переменных, отображая курсивом. Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются. Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title , она появляется при наведении курсора мыши на текст. Используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально. Выделяет цитаты внутри документа, выделяя его отступами и переносами строк. Используется для выделения коротких цитат. Браузерами заключается в кавычки. Применяется для выделения цитат, названий произведений, сносок на другие документы. Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em , при этом отступы соседних абзацев «схлопываются». Переносит текст на следующую строку, создавая разрыв строки. Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии. Здравствуйте, уважаемые друзья! Ну, что вы готовы продолжать изучение нелегкого с первого взгляда языка HTML. Думаю, что «да». Потому что в итоге, после нескольких уроков по изучению основ построения сайта своими руками, вы начинаете ориентироваться в этом непростом лабиринте знаков, тегов, атрибутов и так далее. Материал сегодняшней темы я посвятил очень важному элементу оформлению текстов — html теги форматирования текста. Совсем недавно мы познакомились с тем, как при создании сайта необходимо использовать . Cегодня мы подробно рассмотрим, каким образом нужно проводить форматирование и редактирование текста в html. HTML форматирование текста, нам обязательно понадобится, именно тогда, когда вы на собственном сайте, постараетесь обратить внимание своих пользователей на какие-либо важные моменты. Что-то подчеркнуть, выделить, исправить, в конце концов. То есть, вариантов использования html тегов форматирования текстов масса, и в любом случае они вам будут нужны. Вернее, умение пользоваться тегами html. Напомню вам о том, что такое HTML теги. Теги - это специальные пометки в html разметке документа, которыми обозначается начало и конец элементов html документа. Элементы html документа могут не содержать никакого текста, в этом случае применяется, например, тег перевода строк Сегодня мы с вами рассмотрим основные html теги форматирования текста, при помощи которых производится создание и редактирование текста в html. HTML теги абзаца в тексте парные , но закрывающий тег не является обязательным. Для того, чтобы сделать в html новый абзац, достаточно поместить перед началом абзаца В этом случае абзацы текста будут разделены между собой пустой строкой. Тег принудительного перевода строк Посмотрим пример html кода форматирования текста по абзацам и выравнивания по сторонам. А вот так, этот html документ будет выглядеть в браузере Эта группа тегов является парной. Теги применяются при логическом выделении названий: книги, статьи, цитирование. Тегами выделяются какие-либо определения. Тегами и , как правило, выделяются наиболее важные фрагменты в тексте. Пример html кода для выделения текстов курсивом В браузере наш текст будет выглядеть следующим образом. Теги и , также являются парными тегами. Оба тега используются одинаково, но специалисты рекомендуют применять тег . В html документе это будет выглядеть следующим образом И, соответственно, в браузере вы увидите текст, выделенный жирным шрифтом. Они как и теги жирного шрифта, являются парными. Теги и , и вновь специалисты рекомендуют для подчеркивания текста использовать один из тегов, а именно: Пример html кода для подчеркнутого текста Вот, как выглядит конечный результат в браузере. Напомню вам, что моноширный шрифт - это вид шрифта, у которого все знаки одинаковой ширины. Для форматирования в html документе моноширного шрифта применяются парные теги: ; и Рассмотрим форматирование моноширного текста на примере: И, соответственно в вашем браузере будет наблюдаться следующая картинка Для вывода различных математических, физических или химических значений и формул, очень часто мы сталкиваемся с необходимостью указания индекса, например, формула воды H 2 O. И, если в редакторе Word нам в помощь панель инструментов, то при составлении текстового html документа потребуются теги форматирования. Тегами мы выведем индекс шрифтом меньшего размера и ниже уровня строки. Тегами мы выведем индекс шрифтом меньшего размера, наоборот, выше уровня строки. Например, код: Вывод на экране браузера Теги являются парными и в них заключаются основные параметры html шрифта текста: Название шрифта:
face. Названий может применяться, через запятую, несколько. При этом, если указанный по порядку шрифт не найден на ПК пользователя, браузер осуществляет поиск следующего. Размер шрифта
: size. Указывается от одного до 7-ми в условных единицах. HTML шрифт текста по умолчанию равен 3. Цвет шрифта в
html
: color. По умолчанию всегда чёрный. Для ввода цвета шрифта в html документ, существует два варианта: Таблица цветов html и кодов, как пример, вот здесь: goo.gl/1i4vZ. Вы можете набрать в поисковике запрос «таблицы цветов html» и выбрать таблицу, которая вам понравится. Пример применения тега html font Следующий текст мы видим в окне браузера, и радуемся тому, что у нас всё получилось. Ну, вот, например, понадобилось вам создать текст жирным
красным
курсивом
. Для этой операции мы должны попробовать применить теги форматирования: strong, font и em. А как это сделать? Первое важное условие совместного использования тегов форматирования - соблюдение порядка вложенности html тегов. Открытый первым тег, закрывается последним. Пример последовательности: В итоге, в окне браузера мы видим то, что сделали На этом, пожалуй, и закончим работу с основными html тегами форматирования текста html документов. Надеюсь, что вам теперь понятен метод работы с тегами html и этот материал не окажется лишним, при создании вами своего сайта. Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд». Html-теги для текста – это теги, которые меняют оформление заключенного в них контента. Эта идея пришла из печатных издательств. Редакторы на полях помечали, что является заголовком, как оформить список. Так же и теги. Они указывают, какой стиль должен быть у элемента. Каждый тег имеет вид: <Название тега> Элемент – это совокупность тега и его содержимого. Многие из них требуют закрывающего тега: Особенно это касается текстовых тегов. Закрывающий показывает, когда следует прекратить оформление или закончить блок, таблицу, заголовок и т.д. Некоторые элементы не требуют закрытия В таких случаях отсутствует содержимое и браузер просто размещает на экране заданный объект. В первом случае это рисунок, во втором линия. Закрывающий используется, когда в элементе есть содержимое: текст и/или другие теги. Знает, для чего предназначен каждый тег и как поведет себя «обернутое» в элемент содержимое. Первоначально разметка позволяла и оформлять страницы, и указывать логическое назначение блоков. Новая версия HTML 5.0 нацелена на логическую разметку. Таким образом определяются тематические разделы на странице. При этом подходе и поисковым машинам, и людям легче ориентироваться в коде. Все оформление выполняется в стилистических таблицах в виде правил. Назначая каждому элементу класс или идентификатор, верстальщик указывает свойства стиля и устанавливает его значение. Хранение стилей в отдельном файле позволяет выполнить единое оформление для всех страниц сайта. Но самый большой плюс заключается в легкости изменения дизайна всего ресурса. Изменяя одно значение для фона, верстальщик получает новый бэкграунд на всех страницах, где это правило использовалось. При продвижении сайта важную роль играет его валидность: «правильность» кода и соответствие его стандартам. Так как в настоящее время распространены два стандарта HTML – 4 и 5, то используются различные виды объявления типа документа: Каждый документ должен ссылаться на правила и соблюдать их. Используются только те элементы, которые разрешены стандартом. В связи с этим в новом стандарте указываются теги, которые считаются устаревшими. Их использование не рекомендуется. К ним относится большая часть тегов, предназначенных исключительно для форматирования контента. Проверить валидность сайта можно на официальном сайте W3C – организации, где создаются стандарты. Их можно разделить на оформительские и логические. Последние меняют стиль, но при этом показывают и назначение блока контента. Например, цитаты или машинный код. Рассмотрим все элементы, которые позволяют оформить текстовую часть сайта. Абзац. Контент, помеченный этим тегом начинается с новой строки. Между ними ставится отступ. Не требует закрывающего тега, новый абзац начинается при появлении любого блочного элемента.
.
Текст внутри ячейки
таблицы 
Теги для форматирования текста
Тег HTML
Эффект
Пример
Текст
Написание текста жирным шрифтом
Текст
Текст
Жирное начертание текста
Текст
Текст
Написание текста курсивом
Текст
Текст
Выделение важных фрагментов текста (текст отображается курсивом)
Текст
Текст
Подчёркивание текста
Текст
Текст
Перечёркивание текста
Текст
Текст
Верхний индекс
100 м 2
Текст
Нижний индекс
H 2 SO 4
Пример:
Результат:
Tahoma
, Arial Black
Пример:
Результат:
1
, 2
, 3
, 4
, 5
, 6
, 7
Результат:
Текст
, Текст
Teкст
- создание перечеркнутого текста. Текст будут перечеркнуты горизонтальной линией.Теги для HTML текста
1. Теги заголовков
...
должны использоваться только для выделения заголовков нового раздела или подраздела. При использовании заголовков необходимо учитывать их иерархию, т.е. за
должен следовать
и т.д. Также не допускается вложение других тегов в теги
...
.
1.1. Тег
должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка 2em
0.67em
.
1.2. Тег
. Размер шрифта в браузере равен 1.5em
, верхний и нижний отступ по умолчанию 0.83em
.
1.3. Тег
. Размер шрифта в браузере равен 1.17em
, верхний и нижний отступ по умолчанию 1em
.
1.4. Теги
,
,
Для всех тегов доступны .2. Теги для форматирования текста
2.1. Тег
Для тега доступны .2.2. Тег
Для тега доступны .2.3. Тег
Для тега доступны .2.4. Тег
Для тега доступны .2.5. Тег
Для тега доступны .2.6. Тег
Для тега доступны .2.7. Тег
Для тега доступны .2.8. Тег
2.9. Тег
Для тега доступны следующие атрибуты: cite , datetime .3. Теги для ввода «компьютерного» текста
3.1. Тег
Для тега доступны .3.2. Тег
Для тега доступны .3.3. Тег
Для тега доступны .3.4. Тег
Для тега доступны .3.5. Тег
Для тега доступны .4. Теги для оформления цитат и определений
4.1. Тег
Для тега доступны .4.2. Тег
Для тега доступен атрибут dir .4.3. Тег
4.4. Тег
Для тега доступен атрибут cite .4.5. Тег
Для тега доступны .4.6. Тег
Для тега доступен атрибут title .5. Абзацы, средства переноса текста
5.1. Тег
Для тега доступны .5.2. Тег
Для тега доступны .5.3. Тег
Для тега доступны .
, без указания закрывающего тега. Либо элементы html документа, могут содержать атрибуты, которые указывают на какое-либо свойство текста, например, теги html font, указывают на размеры шрифта.Теги форматирования текста в html документе: классификация
HTML теги разделения на абзац и переноса строк
. После него текст начинается с новой строки.
HTML теги для выделения текста курсивом
Теги, отвечающие за жирный шрифт html
Теги, отвечающие за подчеркивание текста html
HTML теги для создания моноширного шрифта
Теги для вывода индексов (верхних и нижних) в тексте
Тег html font и его основные параметры
Как совместно использовать html теги форматирования текста
Теги и элементы
Примеры элементов:Header
Парадигма оформления современных сайтов
Валидация страницы
Теги форматирования текста html
- Вывод символов, которые помечаются как программный код. Оформляется моноширинным текстом уменьшенного размера (все символы имеют одинаковую ширину).
-
- Логическое выделение структуры заголовков контента. Текст между открывающим и закрывающим тегами помечается жирным и имеет нестандартный размер. Главный заголовок H1 имеет самый большой шрифт, h6 - самый маленький.
Используется для оформления текста так, как он был указан при верстке. По умолчанию в HTML любое количество подряд идущих пробелов трансформируются в один, а обычные переносы не учитываются. Элемент pre учитывает положение символов.>
- Выделение цитат, текст отображается в кавычках.
- Зачеркивает текст. Аналог сокращенного элемента. Не рекомендуется использовать. Аналог CSS text-decoration со значением line-through.