Основные HTML теги форматирования текста — выделение текста жирным и курсивом; параметры размера, цвета и шрифта; абзац и теги заголовков. Теги форматирования текста в HTML: как создать текст красиво и понятно
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
Код HTML | Описание | Пример |
---|---|---|
Текст | Жирное начертание текста | Текст |
Текст | Курсивное начертание текста | Текст |
Текст | Верхний индекс | e=mc 2 |
Текст | Нижний индекс | H 2 O |
Текст |
Текст пишется как есть, включая все пробелы | Текст |
Текст | Курсивный текст | Текст |
Текст | Жирное начертание текста | Текст |
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.
Пример 1. Жирный курсивный текст
Он словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда - никто не смеет принять его вызов.
Результат данного примера показан на рис. 1.
Рис. 1. Вид курсивного жирного начертания текста
Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).
Пример 2. Создание нижнего индекса
Формула изумруда: Be3 Al2(SiO3)6
Результат данного примера показан на рис. 2.
Рис. 2. Нижний индекс в тексте
Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.
Следует отметить, что теги и , также как и являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
Подсвеченный участок текста;
- жирный шрифт;
- курсив, наклонный шрифт;
- зачеркнутый текст;
- текст меньшего размера;
- верхний индекс;
- нижний индекс;
- предварительно отформатированный текст;
- термин;
- заголовки;
- короткая внутристрочная цитата;
- цитата;
- сноска на название материала;
- программный код;
- результат вывода компьютерной программы;
- клавиатурный ввод;
- переменная компьютерной программы.
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.
Теги выделения фрагментов текста
Тег используется для выделения важных участков текста. Браузеры обычно отображают текст внутри тега жирным шрифтом. - тег логического выделения. Используя его, вы указываете на важность текста в выделенной области.
Важный фрагмент текста
Тег используется для акцентирования внимания, "подчеркивания" фрагмента текста. Браузеры обычно отображают текст внутри тега курсивом. - тег логического выделения.
Акцентированный фрагмент
Тег используется для подсветки фрагмента текста.
Подсвеченный фрагмент
Тег используется для написания текста жирным шрифтом. Тег физического форматирования, не придает выделенным участком логический вес. Используйте тег только если характер выделения не подходит под другой тег форматирования текста по смыслу.
Текст жирным шрифтом
Тег используется для написания текста курсивом. Используйте тег только если характер выделения не подходит под другой тег форматирования текста по смыслу.
Текст курсивом
Тег используется для указания некорректности, неактуальности выделенного фрагмента. Текст внутри тега выводится перечеркнутым.
Перечеркнутый текст
Тег используется для написания текста шрифтом меньшего размера.
Текст меньшего размера
Тег используется для создания текста нижнего индекса.
Текст нижнего индекса
Тег используется для создания текста верхнего индекса.
Текст верхнего индекса
Тег указывает, что текст внутри должен быть выведен в том формате, в котором он был написан в редакторе: с учетом количества пробелов между словами и сохранением позиции строк.
Предварительно отформатированный текст
Теги устанавливающие суть содержимого
Теги указывают, что содержимое является заголовком (подзаголовком).
- заголовок наиболее высокого уровня,
- наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.
Заголовок
Тег указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега курсивом.
Термин
Тег используется для указания на короткий процитированный участок внутри строки текста. Браузеры обычно выводят содержимое тега в кавычках.
Короткая цитата
Тег моноширинным шрифтом.
Результат вывода компьютерной программы
Тег указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега моноширинным шрифтом.
Клавиатурный ввод
Тег указывает, что содержимое является переменной компьютерной программы. Браузеры обычно отображают текст внутри тега курсивом.
Переменная компьютерной программы
ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА
На большинстве сайтов информация представлена в форме текста. Даже на сайтах, посвященных музыке, фото или живописи, текст присутствует в виде всякого рода пояснений. А текст мы привыкли видеть оформленным так, чтобы его было удобно читать: с полями, абзацами, заголовками и пр., т.е. отформатированным. Но, дело в том, что если мы поместим в тело HTML-документа прекрасно оформленный текст (например, скопируем готовый документ из Word-a), и посмотрим это творение в окне браузера, то увидим просто набор предложений, довольно неудобных для чтения. Объяснить браузеру, как он должен показывать людям наш текст, нужно при помощи тегов.
Начнем с того, о чем я уже упоминал. Предположим, что у нас есть прекрасно оформленный в каком-либо текстовом редакторе документ, и мы хотим в таком виде его показать. Для этого существует тег-контейнер ...
. Весь текст, помещенный в этот тег, выводится браузером "как есть", со всеми элементами форматирования. Казалось бы, что еще нужно? Но не все так просто. Во-первых, сохраняются только признаки форматирования: пробелы, перенос строки, табуляция и т.д. А если у нас в документе красивые заголовки, выделенные особо значимые куски текста и пр.? И, во-вторых, браузер не сможет оптимизировать преформатированный текст под разрешение экрана нашего читателя, т.к. будет поставлен в жесткие условия тега
..., а это доставит неудобства этому самому читателю. А мы этого не хотим, потому что и писали то все это именно для этого конкретного человека. Так, что одним тегом не обойтись, нужно идти дальше.
Из всех элементов, применяемых для форматирования текста, браузеры безо всяких подсказок понимают только один: пробел. Причем, только один пробел. Поэтому, если Вы хотите написать что-то с красной строки, Вам придется употребить специальный, так называемый, символьный объект или, по другому, эскейп-последовательность: знак неразрывного пробела . Сколько таких последовательностей поставите, столько пробелов сделает браузер. Еще этот знак удобно употреблять в случаях, когда нужно обозначить, что в этом месте рвать строку нежелательно. Браузер ведь сам определяет, в зависимости от разрешения экрана и шрифтов, применяемых хозяином, где заканчивается одна строка и начинается другая. И если, например, фраза "Мой вес 73 кг" будет выглядеть таким образом: "Мой вес 73
кг" - это будет как-то не очень... Поэтому в окне редактора ее стоит написать так "Мой вес 73 кг". Эскейп-последовытельности существуют для всех символов из второй половины ASCII-таблицы, и при желании Вы их найдете в спецификации HTML-4, которую я Вам советовал скачать. Но все нам употреблять не придется, а вот некоторые, например, заменяющие угловые скобки < и > (< и >), иногда приходится.
Тег-контейнер - тег параграфа. Закрывающий элемент не обязателен, но если он отсутствует, браузер не оставляет после абзаца пустую строку. Браузеры выделяют текст, помещенный в этот тег, пустыми строчками. Имеет один параметр: ALIGN= , который может принимать значения:
- LEFT - выравнивание по левому краю,
- CENTER - выравнивание по центру,
- RIGHT - выравнивание по правому краю и
- JUSTIFY - выравнивание по ширине
По умолчанию принимается выравнивание по левому краю. Пример использования этого тега - следующий абзац. Он написан внутри тега :
Тег принудительного перевода строки
. Говорит браузеру, в каком месте необходимо прервать строку и начать новую. Закрывающей части не имеет. Используется, как и тег , для разделения абзацев, но в отличие от него не оставляет пустой строки. Использование этого тега в HTML аналогично использованию клавиши ENTER в Word-e. Имеет один параметр CLEAR, прекращающий обтекание рисунка. О его использовании - в статье о применении графики.
Тег, запрещающий перевод строки -
Теги заголовков -
. Теги контейнеры. Текст, помещенный в них, выводится как заголовок. Имеет параметр выравнивания по горизонтали, аналогичный с тегом
Закрывающая часть обязательна. Примеры:
Заголовок первого уровня.
Заголовок второго уровня с выравниванием по центру.
Заголовок шестого уровня с выравниванием по правому краю.
Тег горизонтальной линии
. Рисует горизонтальную линию. Имеет параметры
- ALIGN - выравнивания со значениями LEFT, RIGHT или CENTER.
- WIDTH - устанавливает длину линии в пикселях или процентах от окна браузера.
- SIZE - устанавливает ширину линии в пикселях.
- NOSHADE - отменяет рельефность линии.
- COLOR - указывает цвет линии в формате RGB или стандартном имени.
Ну, например:
Эта линия нарисована тегом с такими параметрами:
.
Тегов, которые употребляются для форматирования текста, довольно много. Часть из них рекомендовано употреблять в таблицах стилей, другая часть отмечены в спецификации HTML-4.0, как устаревшие и их не рекомендуют применять, т.к. браузеры новых версий могут прекратить их поддержку. Рассмотренных нами достаточно, чтобы оформить документ довольно симпатично. В следующей статье я расскажу о применении тегов форматирования шрифтов, а пока у Вас есть время потренироваться в употреблении того, о чем шла речь в этой статье.
ТЕГИ, ПРИМЕНЯЕМЫЕ ДЛЯ ФОРМАТИРОВАНИЯ ШРИФТА.
Для правильного и симпатичного отображения информации на Вашей страничке Вам потребуется не только правильно расставить абзацы, в нужном месте перевести строку, и пр., но и расставить акценты внутри текста, т.е., что-то выделить жирным шрифтом, что-то написать другим цветом, что-то подчеркнуть и т.д. На все эти случаи в языке HTML существуют соответствующие теги. Рассмотрим некоторые из них, наиболее часто употребляемые. Нет необходимости описывать здесь все теги подряд, т.к. освоив употребление нескольких, Вы без труда сможете пользоваться остальными.
- ... - выделяет текст, помещенный внутрь, жирным шрифтом.
- ... - выделяет текст, помещенный внутрь, наклонным шрифтом.
- ... - выделяет текст, помещенный внутрь, подчеркиванием.
- ... - более крупный шрифт.
- ...
- более мелкий шрифт.
Небольшой комментарий - Для форматирования шрифтов можно применять теги физического форматирования и теги логического форматирования. Их отличие в том, что теги физического форматирования дают браузеру конкретное указание, каким шрифтом печатать текст, а теги логического форматирования указывают ему лишь на то, что текст должен отличаться от обычного в ту или иную сторону. Например, вместо тегов ... и ... можно употребить тег -
, который имеет параметры
FACE - задает тип шрифта,
SIZE - задает размер шрифта,
COLOR - задает цвет шрифта.
Например, эта фраза написана внутри тега: .
Спецификация HTML-4.0 рекомендует употреблять теги логического форматирования, как более лояльные к пользователю. В некоторых случаях употребление тегов физического форматирования может не привести к желаемому результату. Например, в случае с вышеприведенной фразой, браузер покажет ее шрифтом, установленным по умолчанию, если на машине пользователя нет шрифта Comic Sans MS. В редакторе SNK Visual HTML Workshop теги логического форматирования Вы найдете нажав кнопку "Стили", а теги физического форматирования - нажав кнопку "Шрифт". - ... - сильно выделенный текст.
· <РRE>... - уже знакомый нам тег.
· Все, помещенное в него, сохраняет форматирование на уровне
· текста, но выводится моноширинным текстом (Что это такое,
· Вы видите на этом примере).
Этого, наверно, достаточно. Как видите, особого разнообразия не наблюдается (мой браузер, например, показывает текст, помещенный в теги ..., <РRE>..., ... совершенно одинаково), но вполне достаточно, чтобы выполнить страничку в соответствии с Вашим вкусом.
ТЕГИ СПИСКОВ
Для предоставления информации на страницах сайтов в виде списков в языке HTML предусмотрен специальный набор тегов. Они дают возможность составлять:
a. Нумерованые или упорядоченные списки.
b. Компактные или маркированные списки.
c. Списки определений.
d. Списки меню.
a.Нумерованные списки
. Пример применения этого тега у Вас перед глазами.
Тег имеет параметры:
- A - задает маркеры в виде заглавных латинских букв.
- a - задает маркеры в виде строчных латинских букв.
- I - задает маркеры в виде больших римских цифр.
- i - задает маркеры в виде маленьких римских цифр.
- 1 - задает маркеры в виде арабских цифр.
По умолчанию принимается значение 1, т. е. нумерация ведется арабскими цифрами.
- COMPACT - в настоящее время не рекомендуется к употреблению.
- START - позволяет начать нумерацию списка не с единицы. Принимает значение порядкового номера элемента, с которого Вы хотите начать нумерацию.
Синтаксис записи:
В качестве примера составим еще один нумерованный список. HTML-код его выглядит так:
- Летние месяцы года:
- Июнь
- Июль
- Август
На странице сайта это будет выглядеть так:
Летние месяцы года:
VIII. Август
b.Маркированные списки создаются при помощи тега-контейнера . Тег имеет параметры:
- TYPE - задает тип маркера, которым отмечается список. Этот параметр может принимать значения:
- = disc - маркеры отображаются закрашенными кружками.
- = circle - маркеры отображаются не закрашенными кружками.
- = square - маркеры отображаются закрашенными квадратами.
Параметр type можно употреблять как для всего списка, так и для каждого элемента в отдельности.
- Парметр COMPACT - в настоящее время не рекомендуется к употреблению.
Каждый элемент списка внутри этого тега помещается в тег-контейнер
Кроме того есть недокументированная возможность выводить в качестве маркеров выводить всяческие симпатичные штучки.
Замечу попутно, что язак HTML имеет еще множество неизученных возможностей и комбинаций кодов. Так что экспериментируйте, фантазируйте, дерзайте, одним словом - и у Вас могут получиться уникальные вещи!
c.Списки определений
создаются при помощи тега-контейнера . . .
. Внутри контейнера определяемый термин помечается тегом
<Р> - початок нового абзаца; його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю абзаца без відступу у першому рядку.
- наступний за цим тегом текст буде наведено у новому рядку без пропуску порожнього рядка.
- буде проведена горизонтальна лінія.
<В> текст В> - товстий шрифт тексту, що є між тегами. |
<І> текст !> - шрифт-курсив.
текст - підкреслений шрифт.
текст - нижній індекс, наприклад у Н 2 О.
текст - верхній індекс, наприклад, 1° вулиця, а 2 .
текст - великий шрифт.
текст - малий шрифт.
<ЕМ> текст ЕМ> - виокремлений курсивом текст (тег І).
<В> <І> текст !>В> - товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів.
Окремим типом абзаца є заголовок. Є шість видів заголовків, які відрізняються розмірами символів: Теги
Результат на екрані
Заголовок 1.
Заголовок 2.
Заголовок 3. Заголовок 4. Заголовок 5.
Заголовок 6.
Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:
Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега
.... Текст в середині цього тега оформляють засобами табуляції. Броузер такий текст пере-форматовувати не буде. Теги для створення таблиць з рамками тут не розглядатимемо.
"5. Тег задання параметрів шрифта FONT. Щоб задати назву конкретного шрифта, його розмір і колір використовують парний тег FONT з параметрами FACE, SIZE та COLOR, наприклад,
текст
Якщо на комп"ютері клієнта встановлено шрифт Decor, то він буде застосований до даного тексту, інакше броузер застосує шрифт Arbat чи Kudriashov, інакше - деякий свій стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифта можуть бути від 1 до 7. Розмір 3 вважається стандартним, він орієнтовно
відповідає 10 пікселям. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифта, число +2 означає, що розмір шрифта має бути на дві одиниці більший, ніж стандартний, тобто п"ятий, число -2 означатиме перший розмір шрифта - на дві одиниці менший, ніж стандартний.
Колір тексту буде червоний. Основні кольори мають такі назви:
black - чорний green - зелений
navy - темносиній teal - бірюзовий
silver - сірий lime - яскраво-зелений
blue - синій aqua - блакитний
maroon - малиновий olive - темно-зелений
purple- бузковий gray - темно-сірий
red - червоний yellow - жовтий
fushsia - рожевий white - білий
Завдання 1. Створіть свою особисту Web-сторінку. Викличіть Notepad чи деякий Web-редактор. Введіть текст про себе за наведеним нижче зразком і збережіть його у файлі filel.htm:
Це Web-сторінка Світлани МарущакН2>
Я вчуся на першому курсі на факультеті прикладної математики Державного yHiBepcHTeTy"JIbBiBCbKa політехніка " !>. Мені 17 років. Мої улюблені предмети: інформатика, математика, англійська мова, історія. Я люблю слухати хорошу музику, читати пригодницькі романи, подорожувати влітку, кататися на гірських лижах взимку, ходити на дискотеку в любу пору року, інколи читати конспекти.