Html форматирование

Содержание

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

Этот текст будет жирным

Этот текст курсив

Этот текст _{подстрочный} и ^{надстрочный}

Редактор кода »

HTML элементы форматирования

В предыдущей главе вы узнали о HTML атрибутах стилей.

HTML также определяет специальные элементы для определения текста с особым значением.

Для вывода форматирования HTML использует элементы,  и , шрифт полужирный и курсив.

Элементы форматирования предназначены для отображения специальных видов текста:

 — Жирный текст
 — Важный текст
 — текст Курсив (наклонный)
 — текст Акцентирует внимание (наклонный)
 — Маркерованный текст
 — Небольшой текст
<del> — Удаленный (зачеркнутый) текст
<ins> — Вставленный (добавить) текст
 — Подстрочный текст
 — Надстрочный текст

HTML элементы `` и ``

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

HTML элемент , определяет строгий текст, с добавлением семантического значения «важности».

HTML элементы `` и ``

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

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

Примечание: В браузере на дисплее элементы выглядят:  также как , и  также как . Однако, есть разница в значении этих тегов:  и 

определяет текс жирным и курсивным, а  и  означает, что текст имеет «важность».

HTML элемент ``

Элемент , определяет текст небольшим:

HTML элемент ``

Элемент , определяет текст маркированным или выделенным:

HTML элемент `<del>`

Элемент <del>, определяет текст ~~удаленным~~ (удалить).

HTML элемент `<ins>`

Элемент <ins>, определяет текст вставленным (добавленный).

HTML элемент ``

Элемент , определяет _{подстрочный} текст.

HTML элемент ``

Элемент , определяет ^{надстрочный} текст.

HTML Упражнения

HTML элементы форматирования текста

Тег	Описание
<b>	Определяет жирный текст
<em>	Определяет подчеркнутый текст
<i>	Определяет курсивный текст
<small>	Определяет небольшой текст
<strong>	Определяет важный текст
<sub>	Определяет подстрочный текст
<sup>	Определяет надстрочный текст
<ins>	Определяет вставленный текст
<del>	Определяет удаленный текст
<mark>	Определяет маркированный/выделенный текст

Форматирование текста | Справочник HTML

Элементы, предназначенные для оформления и смыслового выделения текста — подчеркивания, изменения шрифта, выделения курсивом, цитирования и т.д.:

<basefont>: Предназначен для задания шрифта, размера и цвета текста по умолчанию.
: Выделяет текст жирным шрифтом.
<blink>: Мигающий текст.
<big>: Отображает текст увеличенным шрифтом (относительно текущего).
<cite>: Оформляет текст как цитату или ссылку на источник.
<code>: Предназначен для отображения программного кода.
: Позволяет изменять цвет, размер и тип шрифта текста.
: Выделяет текст курсивом.
: Используется для смыслового выделения текста (курсивом).
<kbd>: Выделяет текст, который предлагается набрать на клавиатуре.
<marquee>: Сдвигающийся по экрану текст.
: Усиленное логическое ударение (обычно отображается жирным шрифтом).
: Выделяет текст подчеркнутым.
<s>: Выделяет текст перечеркнутым.
<strike>: Зачёркивание текста.
<samp>: Используется для отображения текста, который является результатом вывода компьютерной программы.
: Отображает текст уменьшенным шрифтом (относительно текущего).
: Отображает текст со сдвигом вверх (верхний индекс).
: Отображает текст со сдвигом вниз (нижний индекс).
<tt>: Отображает текст моноширинным шрифтом.
<var>: Используется для обозначения в тексте переменных.

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

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

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

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

(от англ. bold – жирный) – элемент разметки ‘b’, сформированный данным тегом, отображает свое содержимое полужирным шрифтом; в HTML 5 он обозначает стилистическое усиление своего содержимого, например, ключевых слов, которые выделяются в типографике полужирным начертанием;
(от англ. italic – курсивный) – элемент разметки ‘i’, сформированный данным тегом, отображает свое содержимое курсивом; в HTML 5 он обозначает дополнительное выделение своего содержимого, например, иностранных слов, технических терминов, вставок рукописного текста, короче того, что выделяется курсивом в типографике;

(от англ. unarticulated – невнятный) – содержимое элемента разметки ‘u’, сформированного данным тегом, отображается подчеркнутым; в HTML 5 он в основном используется для стилистического выделения слов с орфографическими ошибками или имен собственных в китайском языке;
<s> (от англ. strike out – зачеркнутый) – содержимое элемента разметки ‘s’, сформированного данным тегом, отображается ~~зачеркнутым~~; в HTML 5 он используется для текста, который потерял свою актуальность, например, для старой цены продукта;
(от англ. subscript – нижний индекс) – элемент разметки ‘sub’, сформированный данным тегом, отображает свое содержимое в виде _{нижнего индекса};
(от англ. superscript – верхний индекс) – элемент разметки ‘sup’, сформированный данным тегом, отображает свое содержимое в виде ^{верхнего индекса}.

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы физической разметки</title>
</head>
<body>
	<b>Я &ndash; просто жирный текст.</b> <br>
	<i>Я &ndash; курсивный.</i> <br>
	<u>Я &ndash; подчеркнутый.</u> <br>	
	<s>Я &ndash; зачеркнутый.</s> <br>
	А вот это выражение похоже на странную формулу:<br>
	a<sup>верхний индекс</sup> + b<sub>нижний индекс</sub>.<br><br>
	Для изменения внешнего вида используйте не нас, а стили CSS!
</body>
</html>

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

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

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

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

(от англ. emphasis – акцент) – элемент разметки ’em’, сформированный данным тегом, предназначен для акцентирования внимания на фрагменте текста (обращает внимание на его важность) и отображает свое содержимое курсивом;
(от англ. strong – сильный) – элемент разметки ‘strong’, сформированный данным тегом, предназначен для еще большего акцентирования текста (делает его еще более важным) и отображает свое содержимое полужирным шрифтом;
<cite> (от англ. cite – цитировать) – элемент разметки ‘cite’, сформированный данным тегом, предназначен для выделения сносок на другой материал и отображает свое содержимое курсивом;
<code> (от англ. code – код) – элемент разметки ‘code’, сформированный данным тегом, предназначен для выделения текста программного кода и отображает свое содержимое моноширинным шрифтом;
<kbd> (от англ. keyboard – клавиатура) – элемент разметки ‘kbd’, сформированный данным тегом, предназначен для выделения текста, который должен быть введен с клавиатуры или используется для названия клавиш клавиатуры; элемент отображает свое содержимое моноширинным шрифтом;
<var> (от англ. variable – переменная) – элемент разметки ‘var’, сформированный данным тегом, предназначен для выделения переменных компьютерных программ и отображает свое содержимое курсивом;
<samp> (от англ. sample – пример, образец) – элемент разметки ‘samp’, сформированный данным тегом, предназначен для выделения текста, который является результатом вывода компьютерной программы или скрипта, и отображает свое содержимое моноширинным шрифтом;
<dfn> (от англ. definition – определение) – элемент разметки ‘dfn’, сформированный данным тегом, предназначен для выделения терминов, которые встречаются в тексте впервые, и отображает свое содержимое курсивом;
<abbr> (от англ. abbreviation – аббревиатура) – элемент разметки ‘abbr’, сформированный данным тегом, предназначен для выделения аббревиатур и обычно используется с атрибутом title, содержащим расшифровку аббревиатуры; текст данного элемента браузерами никак не выделяется, сохраняя исходное форматирование;
<q> (от англ. quote – цитата, кавычки) – элемент разметки ‘q’, сформированный данным тегом, предназначен для выделения в тексте небольших цитат и отображает свое содержимое в кавычках;
<ins> (от англ. inserted – вставленный) – элемент разметки ‘ins’, сформированный данным тегом, предназначен для выделения текста, который был добавлен в новую версию документа, и отображает свое содержимое подчеркнутым;
<del> (от англ. deleted – удаленный) – элемент разметки ‘del’, сформированный данным тегом, предназначен для выделения текста, который был удален в новой версии документа, и отображает свое содержимое ~~зачеркнутым~~;
(от англ. small – маленький) – элемент разметки ‘small’, сформированный данным тегом, предназначен для выделения текста, который можно отнести к надписям мелким шрифтом или пометкам, как, например, второстепенная информация в конце юридических документов об отказе от ответственности или же информации о лицензии; элемент отображает свое содержимое моноширинным шрифтом уменьшенного размера;
<time> (от англ. time – время) – элемент разметки ‘time’, сформированный данным тегом, предназначен для создания контейнера, содержимое которого помечается как дата, время или дата и время; обычно содержимое элемента ‘time’ представляет собой дату и время в удобочитаемом для пользователей формате; браузеры никак не выделяют содержимое элемента ‘time’.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы логической разметки</title>
</head>
<body>
<p>	
	<dfn>PHP</dfn> &ndash; скриптовый язык общего назначения.   
	<br> Узнайте, как расшифровывается аббревиатура 
	<em><abbr title="Hypertext Preprocessor">PHP</abbr></em>, 
	наведя на нее курсор. <br>
	Хотя первоначально аббревиатура <em>PHP</em> означала 
	<em><del>Personal Home Page Tools</del></em>, <br>теперь ее стоит 
	расшифровывать как <strong><ins>Hypertext Preprocessor</ins></strong>. <br>
</p>
<p>	
	Давайте посмотрим на фрагмент кода <em>PHP</em>: 
	<code> echo "Всем привет от PHP!";</code>. <br>
	Как сказал автор кода на своей страничке  <cite>http://www.fdpppdf.com</cite>: 
	<br> <q>Великий код!</q>. <br>
</p>
<p>	
	Для запуска кода нажмите на клавиатуре <kbd>'ALT'+'SHIFT'+'Поехали!'</kbd>.<br>
	На экран будет выведено приветствие: "<samp>Всем привет от PHP!</samp>". <br>
	Убедились? Оператор <var>echo</var> &ndash; это сила! <br>
</p>	
	<small>Все права на пример защищены марсианским законодательством.</small>
</body>
</html>

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

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

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

<address> (от англ. address – адрес) – элемент разметки ‘address’, сформированный данным парным тегом, предназначен для выделения информации об авторе, например, ссылка на его ресурс, адрес и т.д.; элемент отображает свое содержимое курсивом, а браузеры отображают как блочный элемент.
<blockquote> (от англ. blockquote – блок с цитатой) – элемент разметки ‘blockquote’, сформированный данным парным тегом, предназначен для выделения длинных цитат, в отличие от элемента ‘q’, при помощи которого выделяются небольшие цитаты; браузеры отображают элемент как блочный.

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


<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы 'address' и 'blockquote'</title>
</head>
<body>
	<h4>Бернард Шоу</h4>
	
	<blockquote>
		Мир настолько сгнил, что даже влюбиться в кого-то — <br>
		это самый большой риск, который мы можем себе позволить. <br>
		Нас сжимает изнутри от вероятности, что это окажется не <br>
		взаимно или агрессивно воспринято. Люди разучились любить, <br>
		миром правят потребительские отношения.
	</blockquote>
	
	<address>Связаться с автором цитаты не получится.</address>
</body>
</html>

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

Основы html. Часть 1. Форматирование

Начинаю серию небольших уроков для знакомства с основами html. В первом уроке познакомимся с форматированием текста.

Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

Любая веб-страница является текстовым документом, в котором содержится текст самой страницы и специальные команды, подсказывающие браузеру, как нужно отображать отдельные фрагменты текста. Эти специальные команды называются теги. Теги пишутся только английскими буквами и заключаются в угловые скобки < >. Теги бывают открывающие (начало действия команды браузеру) и закрывающие (соответсвенно окончание действия). В закрывающем теге ставится слеш перед названием </>. Сейчас на практике Вы поймете, о чем идет речь.

Как я говорил, html-страница является текстовым документом, значит для ее создания вполне подойдет простой блокнот. Открывайте блокнот и пишем вот такую комбинацию тегов

Любая вебстраница начинается с тега <html>, чтобы браузер знал, как ее обрабатывать. Как видите, заканчиваться страница должна закрывающим </html>. Также обязательные теги <head> </head> (голова) и <body> </body> (тело) вебстраницы. В логове размещается различная нужная служебная информация, а между тегами <body> </body> собственно контент страницы. Теперь посмотрим, как это выглядит в браузере. Для этого сначала сохраним то, что написано в блокноте: Файл — Сохранить как, выбираете куда желаете сохранить и произвольное имя (у меня proba). Обязательно укажите после точки расширение файла html, иначе страница сохранится как текстовый документ, а не веб-страница.

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

Как видим, у нас пустая белая страница, ведь между тегами <body> </body> пока ничего нет. Но прежде добавим в голову вот такую комбинацию

<head>
<title>Моя первая страница</title>
</head>

Сохраняем блокнот (нажмите Ctrl + S) и обновите окно браузера. Заметили, что появилось название страницы?

Теперь займемся наполнением содержания страницы. Возьмите произвольный текст, скопируйте и вставьте его между тегами <body> </body>. У меня получилось вот так:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

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

 Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

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

Сохраняем, обновляем браузер. Есть абзацы. Сделаем заголовок страницы. Напишем его между тегами <h2> </h2> (от англ. heading — заголовок). Цифры можно использовать от 1 до 6 (1 — самый большой шрифт, 6 — самой маленький. )

<h2> html — это просто</h2>
 Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

По умолчанию браузер выравнивает текст по левому краю. Если нужно указать выравнивание, то используют признак align=. В нашем коде это будет выглядеть так:

<h2> html — это просто</h2>
 Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

Не забываем сохранять блокнот и обновлять браузер. Видим, что теперь первый абзац выравнился по центру. Для выравнивания по правому краю используйте значение «right», по ширине страницы — «justify». Признак align можно применять заголовкам, изображениям и т.д.

Теперь выделим жирным какую-нибудь фразу. В этом поможет тег . Не забывайте ставить закрывающий .

<h2> html — это просто</h2>
 Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

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

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

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

правильно 
 правильно 
 не правильно

Чтобы не запутаться, рекомендую при верстке добавлять теги блоками: открывающий — закрывающий, и уже внутри такого блока вставлять текст или другие блоки тегов.

Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

Теперь выделим жирным какую-нибудь фразу. В этом поможет тег . Не забывайте ставить закрывающий .

правильно 
 правильно 
 не правильно

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

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
 Ненумерованный список 
<ul>
<li>пункт 1 </li>
<li>пункт 2 </li>
<li>пункт 2 </li>
</ul>
</body>
</html>

Знакомимся с новыми тегами: <ul> </ul> — показывает ненумерованный список, <li> </li> отмечает один пункт списка.

По умолчанию браузер отображает каждый пункт списка черной точкой. Это можно изменить, добавив тегу <ul> признак type=» «. В кавычках укажите «circle», «disc» или «square»

Ненумерованный список 
<ul type=»circle»>
<li>пункт 1 </li>
<li>пункт 2 </li>
<li>пункт 2 </li>
</ul>

Если нужно построить пронумерованный список, то вместо тега <ul> используют <ol>

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
 Пронумерованный список 
<ol>
<li>пункт 1 </li>
<li>пункт 2 </li>
<li>пункт 3 </li>
</ol>
</body>
</html>

Иногда возникает необходимость прервать пронумерованный список, например для комментариев, а затем продолжить его. Чтобы указать браузеру, с какой цифры начинать список используйте признак start=» «. В ковычках укажите с какой цифры должен начинаться список.

Пронумерованный список с разрывом 
<ol>
<li>пункт 1 </li>
<li>пункт 2 </li>
</ol>
Примечание
<ol start=»3″>
<li>пункт 3</li>
<li>пункт 4 </li>
</ol>

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

Тегом можно указать не только тип, но и размер шрифта. Для этого применяют тег . В кавычках укажите размер шрифта, от 1 до 7, либо на сколько единиц его увеличить или уменьшить (+1 … +7; -1 … -7). Признаки размера и типа шрифта можно писать в одном теге .

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
Это текст написан шрифтом по умолчанию
Это текст написан шрифтом Book Antiqua 
Это текст написан шрифтом по умолчанию, размер 5 
Это текст написан шрифтом Book Antiqua, размер 5 
</body>
</html>

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

Я Вам показал лишь малую часть возможностей языка html. Изучить его в совершенстве Вам поможет Базовый курс по обучению языку HTML и CSS

Наверх

HTML-форматирование

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

Полужирный текст
Все, что появляется внутри тегов … отображается жирным шрифтом, как показано ниже−

<!DOCTYPE html> <html> <head> <title>Жирный текст пример</title> </head> <body> Следующее слово использует жирный шрифт. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Жирный текст пример</title>

</head>

<body>

Следующее слово использует жирный шрифт.

</body>

</html>

В результате будет получено —

Курсив
Все, что появляется внутри … элемент отображается курсивом, как показано ниже −

<!DOCTYPE html> <html> <head> <title>Пример текста курсив</title> </head> <body> Следующее слово напечатано курсивным шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Пример текста курсив</title>

</head>

<body>

Следующее слово напечатано курсивным шрифтом.

</body>

</html>

В результате будет получено —

Подчеркнутый текст
Все, что появляется внутри тегов … отображается с подчеркиванием, как показано ниже −

<!DOCTYPE html> <html> <head> <title>Подчеркивание текста</title> </head> <body> Следующее слово подчеркнуто. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Подчеркивание текста</title>

</head>

<body>

Следующее слово подчеркнуто.

</body>

</html>

В результате будет получено —

Перечеркнутый текст
Все, что появляется внутри тегов <strike>…</strike> отображается перечеркнутым, перечеркивание представляет собой тонкую линию по тексту, как показано ниже −

<!DOCTYPE html> <html> <head> <title>Перечеркнутый тект</title> </head> <body> Следующее слово написано <strike>перечеркнутым</strike> шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Перечеркнутый тект</title>

</head>

<body>

Следующее слово написано <strike>перечеркнутым</strike> шрифтом.

</body>

</html>

В результате будет получено —

Моноширинный шрифт
Содержание внутри тега <tt>…</tt> пишется моноширинным шрифтом. Большинство шрифтов известны как шрифты переменной ширины, потому что разные буквы имеют разную ширину (например, буква » m «шире, чем буква «i»). В моноширинном шрифте, однако, каждая буква имеет одинаковую ширину.

<!DOCTYPE html> <html> <head> <title>Моноширинный шрифт</title> </head> <body> Следующее слово написано <tt>моноширинным</tt> шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Моноширинный шрифт</title>

</head>

<body>

Следующее слово написано <tt>моноширинным</tt> шрифтом.

</body>

</html>

В результате будет получено —

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

<!DOCTYPE html> <html> <head> <title>Надстрочный текст</title> </head> <body> Следующее слово написано надстрочным шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Надстрочный текст</title>

</head>

<body>

Следующее слово написано надстрочным шрифтом.

</body>

</html>

В результате будет получено —

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

<!DOCTYPE html> <html> <head> <title>Подстрочный текст</title> </head> <body> Следующее слово написаноподстрочным шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Подстрочный текст</title>

</head>

<body>

Следующее слово написаноподстрочным шрифтом.

</body>

</html>

В результате будет получено —

Вставляемый текст
Все, что появляется внутри тегов <ins>…</ins> будет отображено как вставленный текст.

<!DOCTYPE html> <html> <head> <title>Вставленный тект</title> </head> <body> Я хочу <del>пирожок</del> <ins>морожено</ins> </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Вставленный тект</title>

</head>

<body>

Я хочу <del>пирожок</del> <ins>морожено</ins>

</body>

</html>

В результате будет получено —

Удаленный текст
Все, что появляется внутри тегов <del>…</del> отображается как удаленный текст.

<!DOCTYPE html> <html> <head> <title>Вставленный тект</title> </head> <body> Я хочу <del>пирожок</del> <ins>морожено</ins> </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Вставленный тект</title>

</head>

<body>

Я хочу <del>пирожок</del> <ins>морожено</ins>

</body>

</html>

В результате будет получено —

Большой текст
Содержание внутри тегов <big>…</big> отображается более крупным размером шрифта, по сравнению с остальным текстом вокруг.

<!DOCTYPE html> <html> <head> <title>Увеличенный текст</title> </head> <body> Следующее слово будет напечатано <big>увеличенным</big> шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Увеличенный текст</title>

</head>

<body>

Следующее слово будет напечатано <big>увеличенным</big> шрифтом.

</body>

</html>

В результате будет получено —

Уменьшенный текст
Содержание внутри тегов … отображается меньшим размером шрифта, чем остальной текст вокруг −

<!DOCTYPE html> <html> <head> <title>Уменьшенный текст</title> </head> <body> Следующее слово напечатано мелким шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Уменьшенный текст</title>

</head>

<body>

Следующее слово напечатано мелким шрифтом.

</body>

</html>

В результате будет получено —

Группировка Содержимого
<div> и  элементы позволяют сгруппировать несколько элементов, чтобы создать разделы или подразделы, страницы. Например, можно поместить все сноски на странице в элемент <div> , чтобы указать, что все элементы в этом элементе связаны с сносками. Затем можно прикрепить стиль к этому элементу <div>, чтобы он отображался с помощью специального набора правил стиля.

<!DOCTYPE html> <html> <head> <title>Пример тега Div</title> </head> <body> <div id = «menu» align = «middle» > <a href = «/index.html»&gtГЛАВНАЯ</a> | <a href = «/about/contac.html»>КОНТАКТЫ</a> | <a href = «/about/index.htm»>О НАС</a> </div> <div id = «content» align = «left» bgcolor = «white»> <h5>Содержание статей</h5> Фактическое содержание….. </div> </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Пример тега Div</title>

</head>

<body>

<a href = «/index.html»&gtГЛАВНАЯ</a> |

<a href = «/about/contac.html»>КОНТАКТЫ</a> |

</div>

<h5>Содержание статей</h5>

Фактическое содержание…..

</div>

</body>

</html>

В результате будет получено —

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

<!DOCTYPE html> <html> <head> <title>Тег Span</title> </head> <body> »Это пример тега span и тега div вместе с CSS </body> </html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

»Это пример тега span

и тега div вместе с CSS

</body>

</html>

В результате будет получено —

Форматирование текста HTML уроки для начинающих академия

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

Этот текст выделен полужирным шрифтом

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

Это _{под строкой} и ^{над строкой}

Элементы форматирования HTML

В предыдущей главе вы узнали о атрибуте стиляHTML.

HTML также определяет специальные элементы для определения текста с особым смыслом.

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

Элементы форматирования были разработаны для отображения специальных типов текста:

 — Жирный текст
 — Важный текст
 — Курсив текста
 — Подчеркнутый текст
 — Помеченный текст
 — Мелкий текст
<del> — Удаленный текст
<ins> — Вставленный текст
 — Текст подстрочного текста
 — Текст сценария

HTML и элементы

HTML  элемент определяет полужир ный текст, без какой-либо дополнительной важности.

Пример

Этот текст выделен полужирным шрифтом

 элемент HTML определяет жирный текст с добавленной семантической важный.

Пример

This text is strong

Элементы HTML и

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

Пример

This text is italic

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

Пример

This text is emphasized

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

HTML элемент

 элемент HTML опред

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

Здравствуйте уважаемые начинающие веб мастера.

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

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

Но наша задача — познакомиться с языком html, и следуя ей давайте посмотрим, какие теги принимают участие в форматировании текста

Вообще то, многие многие из этих тегов, по версии html 5, считаются уже устаревшими, и вместо них рекомендуется использовать стили, но тем не менее знать их всё равно нужно.

Так как переход на пятую версию произошёл совсем недавно, то Вы непременно с ними столкнётесь, и будете знать, как они работают.

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

<DOCTYPE HTML PUBLIC» —//W3C//DTD HTML 4.01 Transitional//EN»
» http://www.w3.org/TR/html4/loose.dtd»>
<html>>
<head>>
<meta http-equiv=» Content-Type» content=» text/html; charset=utf-8″>
<title>Документ без названия</title>
</head>
<body>
 Где искать Бога, и откуда ждать дьявола? Да только в себе самом, и из себя самого! Туточки они оба. А то, небеса-а-а, подземелья.
 Кто дал Баскову погоняло «золотой голос России», а Киркорову «король эстрады»? У нас они всегда были Филя и Петушок — золотой гребешок.
 Почему святые угодники и великомученики подобны звездам на небе, а попса и телеведущие — звезды?
 Журналисты — акулы пера, а питаются только тем, что другие настряпают. Наверное все таки — шакалы, ну кто покруче — гиены. Тоже полезное зверье кстати.
 Когда же во власть будут назначать в приказном порядке? Чтоб у назначаемого одна мысль вертелась в голове — «во попал».
</body>
</html>

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

Начнём с тега

<pre></pre> — предварительно форматированный текст.

Вот так будет отображаться в браузере приведённый выше код, заключённый в тег pre.

<DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Документ без названия</title> 
<body> 
Где искать Бога, и откуда ждать дьявола? Да только в себе самом, и из себя самого! 
Туточки они оба. А то - небеса-а-а, подземелья. 
Кто дал Баскову погоняло «золотой голос России», а Киркорову «король эстрады»? У нас 
они всегда были Филя и Петушок - золотой гребешок. 
Почему святые угодники и великомученики подобны звездам на небе, 
а попса и телеведущие - звезды? 
Журналисты - акулы пера , а питаются только тем, что другие настряпают. 
Наверное все таки - шакалы, ну кто покруче - гиены. 
Тоже полезное зверье кстати. 
Когда же во власть будут назначать в приказном порядке? Чтоб у назначаемого одна
мысль вертелась в голове - «во попал». 
</body> 
</html>

Идём дальше

— создаёт абзац, блочный элемент. Открывает и закрывает каждый абзац.

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

— преображает прямой текст в курсив, встраиваемый элемент.

Пример:

Где искать Бога, и откуда ждать дьявола? Да только в себе самом,
и из себя самого! Туточки они оба. А то, небеса-а-а, подземелья.

Результат:

Где искать Бога, и откуда ждать дьявола? Да только в себе самом,
и из себя самого! Туточки они оба. А то, небеса-а-а, подземелья.

— делает текст жирным. Встраиваемый элемент.

Пример:

Почему святые угодники и великомученики подобны звездам на небе, а попса и телеведущие — звезды?

Результат:

Почему святые угодники и великомученики подобны звездам на небе, а попса и телеведущие — звезды?

— перенос строки, одиночный тег, вставляется в любой части текста.

Пример

Текст текст текст текст текст текст текст текст

Результат:

Текст текст
текст текст
текст текст
текст текст

— окрашивает текст в выбранный цвет, встраиваемый элемент. В значении атрибута color вставляется код цвета. Выбрать можно здесь.

Пример:

текст текст текст текст текст текст текст текст

Результат:

текст текст
текст текст
текст текст
текст текст

— создаёт нижний регистр, встраиваемый элемент
Пример:

H2O

Результат:

H₂O

— создаёт верхний регистр, встраиваемый элемент

Пример

3482

Результат:

348²

line-height — устанавливает межстрочный интервал в тексте. Интервал задаётся во всех мерах длины (em, px, %, pt), где em и % вычисляются от размера шрифта, а px и pt — произвольный размер. Если применить значение normal, то браузер задаст интервал автоматически.

<kbd> — выделяет элемент текста моноширным (телеграфным) шрифтом.

Пример:

Телеграмма
<kbd>Грузите апельсины бочками тчк Бендер тчк</kbd>

Результат:

Телеграмма
Грузите апельсины бочками тчк Бендер тчк

<bdo> — задаёт направление текста справа налево. Применяется с атрибутом dir=»rtl»

Пример:

<bdo dir=» rtl»>А мы пишем справа налево</bdo>

Результат:

А мы пишем справа налево

<big> — увеличивает размер шрифта. Применяется, в основном, для выделения одного слова, или словосочетания в предложении.

— уменьшает размер шрифта.

Пример:

Тигр <big>большой</big>, а кошка маленькая.

Результат:

Тигр большой, а кошка маленькая.

— выделяет текст жёлтым фоном

Пример:

Обратите внимание на эту удивительную вещь.

Результат:

Обратите внимание на эту удивительную вещь.

— создаёт подчёркнутый текст
<s> — создаёт зачёркнутый текст

Пример:

Цвет неба был <s>голубым</s> бирюзовым.

Результат:

Цвет неба был ~~голубым~~ бирюзовым.

<marquee> — создаёт движущийся текст. Подробно об этом в статье Красивая заглавная буква и бегущая строка.

Перемена

— Во время секса мой муж орёт как ненормальный. Мне так неудобно перед соседями!
— А ты бы ему рот прикрывала
— Так не успеваю! Он только войдёт, только увидит и сразу орать!

Геолог спрашивает чабана:
— Отец, скажи, а сколько твои овцы дают за сезон шерсти?
— Белые или черные? — спрашивает чабан.
— Ну, черные.
— Черные — 2 килограмма.
— А белые?
— И белые — 2 килограмма.
— А скажи, отец, сколько им нужно корма в день?
— Черным или белым? — уточняет чабан.
— Ну, черным.
— Черным — 1 килограмм.
— А белым? — не унимается геолог.
— И белым — 1 килограмм.
Геолог в бешенстве:
— Ты что, меня заморачиваешь? Почему все время спрашиваешь черные или белые, ведь результат один и тот же?!!!!
— Ну-у, так черные ж мои… — oтвечает чабан.
(геолог понимающе)
— А-а-а, А белые?
— И белые мои…

Как добавить на сайт музыку или голосовое приветствие < < < В раздел > > > Прямая линия HTML

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Html форматирование – GitHub — WEACOMRU/html-formatting: Форматирование html-разметки. Основное назначение функции

HTML Форматирование

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

HTML элементы форматирования

HTML элементы `<b>` и `<strong>`

HTML элементы `<i>` и `<em>`

HTML элемент `<small>`

HTML элемент `<mark>`

HTML элемент `<del>`

HTML элемент `<ins>`

HTML элемент `<sub>`

HTML элемент `<sup>`

HTML Упражнения

HTML элементы форматирования текста

Форматирование текста | Справочник HTML

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

Основы html. Часть 1. Форматирование

HTML-форматирование

Форматирование текста HTML уроки для начинающих академия

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

Элементы форматирования HTML

HTML < b > и < strong > элементы

Пример

Пример

Элементы HTML <i> и <EM>

Пример

Пример

HTML <small> элемент

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

Добавить комментарий Отменить ответ

Рубрики

Html форматирование – GitHub — WEACOMRU/html-formatting: Форматирование html-разметки. Основное назначение функции

HTML Форматирование

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

HTML элементы форматирования

HTML элементы <b> и <strong>

HTML элементы <i> и <em>

HTML элемент <small>

HTML элемент <mark>

HTML элемент <del>

HTML элемент <ins>

HTML элемент <sub>

HTML элемент <sup>

HTML Упражнения

HTML элементы форматирования текста

Форматирование текста | Справочник HTML

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

Основы html. Часть 1. Форматирование

HTML-форматирование

Форматирование текста HTML уроки для начинающих академия

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

Элементы форматирования HTML

HTML < b > и < strong > элементы

Пример

Пример

Элементы HTML <i> и <EM>

Пример

Пример

HTML <small> элемент

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

Добавить комментарий Отменить ответ

Рубрики

HTML элементы `<b>` и `<strong>`

HTML элементы `<i>` и `<em>`

HTML элемент `<small>`

HTML элемент `<mark>`

HTML элемент `<del>`

HTML элемент `<ins>`

HTML элемент `<sub>`

HTML элемент `<sup>`