Основным средством передачи информации в интернете является безусловно текст. В предыдущих статьях я про атрибуты тега BODY, а также показал как на практике изменять цвета фона, текста, ссылок и т.п., соответственно ты уже умеешь вставить текст на html-страницу (если забыл, то он вставляется между тегами и ).

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

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

С чего начинать форматирование в HTML

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

И так, представим ты открыл текстовый редактор и набераешь в нем свой текст, сделал все необходимые форматирования (выделил что-то жирным или курсивом), или что-то другое, потом берешь и копируешь полученный результат в код html. После, ты открываешь html-документ в браузере, но не видишь всего того форматирования, что делал до копирования и сохранения. Куда же оно все исчезло? Ответ простой: текстовый редактор для форматирования текста использует собственные спецсимволы-теги, которые попросту скрыты от глаз.

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

Теги форматирования в HTML

Если отформатировал текст, то его можно быстро вставить в html-страницу при помощи тегов

 и 

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

Теги можно использовать не только один, а сколько угодно, где-то даже дополняя друг друга. Можно просто вкладывать один тег в другой. Приведу пример:

10 м² — это площадь мой комнаты.

результат будет выглядеть следующим образом:

10 м 2 — это площадь мой комнаты.

Для выделения обзаца, или располодить текст блоком, используют тег

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

Создаем свой абзац.

Создаем второй абзац.

Данный код на html-странице будет выглядеть следующим образом:

Создаем свой абзац.

Создаем второй абзац.

Кстати, закрывать абзац тегом

В данном теге есть важный атрибут align, у которого можно выставлять следующие значения: center, left, right и justify. Атрибут помогает выровнить наш текст в теге

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

Текст по центру

расположит наш текст по центру, на выходе получится следующее:

Текст по центру

Кстате, по умолчанию, текст расположен по левому краю, поэтому атрибут left можно не использовать для этих целей:

на html-странице это будет выглядеть вот так:выровнит текст по левому краю

Выравнивание текста по левому краю (по умолчанию)

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

Наша первая строка.
Наша вторая строка.

на странице будет следующий вид:

Наша первая строка.
Наша вторая строка.

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

Существует еще тег

• width — ширина полосы;
• align — выравнивание;
• size — толщина полосы;
• color — цвет полосы;
• noshade — атрибут без значений для создания черной полосы без тени.

html-код на примере будет следующим (попробуй сами на примере узнать что получится):

Ширина и толщина задается как в пикселях, так и в процентах, кому как удобнее и для какой цели нужно.

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

• align — выравнивание заголовка;
• title — всплывающая подсказка заголовка (когда наведешь курсор на него).

Приведу просто пример HTML-кода заголовков:

Заголовок 4 размера

на странице мы увидем следующее:

Заголовок 4 размера

Если вы хотите изменять шрифт текста и его размер, в HTML-коде применяется тег . У данного тега имеются следующие атрибуты:

• color — цвет шрифта;
• face — гарнитура шрифта;
• size — размер шрифта. Может иметь значения от 1 до 6, а также от +1 до +6 и от -1 до -6. По умолчанию размер шрифта установлен 3. Если указать , то текст, находящийся между данным тегом, будет выводится увеличенным на 1, относительно другого текста. Ну и наоборот - при -1 уменьшенным на 1.

Создать список в HTML можно используя теги (список с нумерацией) и (список с маркировкой). Элементы в списке должны выделяться . Как элемент списка начинается с новой строки. В тегах списках есть свой атрибут type. Для начала разберем значения этого атрибта в теге :

• 1 — нумерация арабскими цифрами (по умолчанию);
• A — большими латинскими буквами по алфавиту;
• a — маленькими латинскими буквами;
• I — большими римскими цифрами;
• i — маленькими римскими цифрами.

Приведу HTML-код для примера:

1. Элемент 1.
2. Элемент 2.
3. Элемент 3.

на странице будет вот так:

Тег

имеет атрибут type вот с такими значениями:
• disc — закрашенный кружок (по умолчанию);
• circle — незакрашенный кружок;
• square — закрашенный квадратик.

HTML-код тега

на примере:
• Элемент 1.
• Элемент 2.
• Элемент 3.

На странице мы увидим следующие:

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

Давай, для закрепления данного материала я приведу тебе пример html-кода, и ты сам разберись, что он означает:

B

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

Дата публикации: 15 мая, 2012

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

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

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

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

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

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

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

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

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

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

Формула изумруда: Be₃Al₂(SiO₃)₆

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



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

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

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

Приведем описание тегов физического форматирования. Часть из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако они продолжают поддерживаться браузерами.

Тег

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

Это полужирный шрифт.

Рис. 1.2. Примеры физического форматирования текста (браузером Netscape)

Тег

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

Выделение курсивом

Тег

Тег отображает текст моноширинным шрифтом. Для большинства случаев вместо этого тега лучше использовать теги , или . Пример:

Это моноширинный шрифт.

Тег

Тег отображает текст подчеркнутым. Отмененный тег. Вместо него рекомендуется использовать теги или . Например:

Пример подчеркивания текста.

Теги и

Теги и отображают текст, перечеркнутый горизонтальной линией. Отмененный тег. Вместо него следует использовать тег . Например:

Пример зачеркнутого текста.

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

....

Тег

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

Шрифт большего размера.

Тег

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

Шрифт меньшего размера.

Тег

Тег _{сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов. Например:}

Пример шрифта для _{нижнего} индекса.

Тег

Тег ^{сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для задания степеней чисел в математике. Например:}

Пример шрифта для ^{верхнего} индекса.

Тег

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

Тег

Тег-контейнер является аналогом тега уровня блока

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

Браузер 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. Отображение примера с тегом (браузером Netscape)

Текст внутри ячейки таблицы

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

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

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

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

Важный фрагмент текста

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

Акцентированный фрагмент

Тег используется для подсветки фрагмента текста.

Подсвеченный фрагмент

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

Текст жирным шрифтом

Тег используется для написания текста курсивом. Используйте тег только если характер выделения не подходит под другой тег форматирования текста по смыслу.

Текст курсивом

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

Перечеркнутый текст

Тег используется для написания текста шрифтом меньшего размера.

Текст меньшего размера

Тег используется для создания текста нижнего индекса.

_{Текст нижнего индекса}

Тег используется для создания текста верхнего индекса.

^{Текст верхнего индекса}

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

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

Теги устанавливающие суть содержимого

Теги указывают, что содержимое является заголовком (подзаголовком).

- заголовок наиболее высокого уровня,

- наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.

Заголовок

Тег указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега курсивом.

Термин

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

Короткая цитата

Тег моноширинным шрифтом.

Результат вывода компьютерной программы

Тег указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега моноширинным шрифтом.

Клавиатурный ввод

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

Переменная компьютерной программы

Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.

Полужирный или жирный текст

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

Пример

С помощью тега b делаем жирный шрифт.

С помощью тега strong делаем текст жирным.

Получим следующий результат:

Курсив - наклонный текст или шрифт

Сделать в HTML курсивом текст можно с помощь двух тегов ... и ... . Все, что находится в тегах курсива ... и ... отображается в HTML наклонным текстом (шрифтом), как показано ниже:

Пример

С помощью тега i делаем наклонный текст или шрифт.

С помощью тега em делаем текст курсивом.

Получим следующий результат:

Подчеркнутый текст

Подчеркнуть текст в HTML можно с помощь тега ... ... отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:

Пример

С помощью тега u делаем подчеркнутый текст или слово.

Получим следующий результат:

Зачеркнутый текст

Зачеркнуть текст в HTML можно с помощь тега ... . Все, что находится внутри тега ... отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:

Пример

С помощью тега strike делаем зачеркнутый текст.

Получим следующий результат:

Моноширинный шрифт

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

Пример

С помощью тега tt делаем моноширинный шрифт.

Получим следующий результат:

Верхний индекс

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

Пример

С помощью тега sup делаем верхний^индекс или степень числа, например, 2³.

Получим следующий результат:

Нижний индекс

Содержимое тега _... отображается в HTML в нижнем индексе. Тег нижнего индекса _{в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты.}

Пример

С помощью тега sub делаем нижний_индекс.

Получим следующий результат:

Вставленный текст

Содержимое внутри тега ... отображается в HTML как вставленный текст.

Пример

Хочу зарабатывать много очень много денег.

Получим следующий результат:

Удаленный текст

Содержимое внутри тега ... отображается в HTML как удаленный текст.

Пример

Хочу зарабатывать много очень много денег.

Получим следующий результат:

Большой текст

Содержимое тега ... отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже:

Пример

С помощью тега big делаем текст больше.

Получим следующий результат:

Маленький текст

Содержимое внутри тега ... отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:

Пример

С помощью тега small делаем текст меньше.

Получим следующий результат:

Группировка элементов и содержимого страницы в HTML

Элементы

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

Например, Вы можете поместить все ссылки на странице в тег

, чтобы указать, что все элементы в этом теге

относятся к меню. Затем Вы можете задать стиль тегу

, чтобы элементы отображались с использованием специального набора правил стиля (CSS).

Пример с тегом

ГЛАВНАЯ / О НАС / КОНТАКТЫ

Название статьи

Содержимое страницы...

Получим следующий результат:




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

Пример с тегом

Группировки элементов с помощью тега span.

Получим следующий результат:

Эти теги обычно используются с CSS , чтобы Вы могли задать стиль к секции страницы.