html текст, выравнивание текста html, теги html текст
В этом разделе рассмотрим теги форматирования текста в HTML. Начнем освоение с методов создания заголовков и списков, а затем перейдем к приемам связывания текста ссылками. Вся эта информация позволит тебе создать приятный для чтения текст, имеющий правильный внешний вид. Ведь без правильно отформатированного текста и осмысленных связей любая попытка создать качественный сайт будет крайне сложной.
Содержание:
Немного истории. Изначально Интернет состоял только из текста и ссылок, и когда он стал живой, красочной, визуальной средой (таким, каким является сейчас), то для большинства его тогдашних пользователей это стало трагедией. Изобретение Тима Бернерса-Ли предназначалось для обмена информацией между его коллегами – учеными и не имело графического интерфейса. Но, несмотря на появление Интернета, насыщенного визуальным содержимым и современными средствами интерактивного общения, текст и ссылки остаются самой важной составляющей любого качественного сайта. Поэтому, при создании сайта, следует отнестись с особым вниманием к осмысленному использованию текста и ссылок.
Заголовки
Ну что, приступим? Заголовок – я думаю, нет необходимости объяснять, что это такое к тому же название говорит само за себя. В HTML заголовки обозначаются тегами < h2 > < /h2> . . . . .< h6 > < /h6 >, всего их шесть. Посмотрим на примере – прописываем код.
<h2>Самый крупный заголовок</h2> <h4>Заголовок среднего размера</h4> <h6>Самый маленький заголовок</h6>
В браузере получаем.
Заголовок среднего размера
Самый маленький заголовок
С размерами думаю все ясно, но как быть с расположением на странице? Для этого существует атрибут align, который имеет несколько значений:
- left — выравнивает по левому краю,
- center — элемент располагается по центру,
- right — выравнивает по правому краю,
- justify — выравнивает по ширине.
Пишем HTML — код.
<h2 align="left">Самый крупный заголовок</h2> <h4 align="center">Заголовок среднего размера</h4> <h6 align="right">Самый маленький заголовок</h6>
В браузере отображается.
Заголовок среднего размера
Самый маленький заголовок
Выделяем абзац
С заголовками разобрались переходим к выделению абзаца. Абзац в языке HTML обозначается тегом < p > < /p >, он так же имеет атрибут выравнивания align. А разрыв строки тегом < br >.
В HTML пишется:
<p>Первый абзац текста .................................. <br> .......................................................................... конец абзаца.</p> <p>Второй абзац текста ................................... <br> .......................................................................... конец абзаца.</p> <p>N - ый абзац текста .................................... <br> .......................................................................... конец абзаца.</p>
В браузере видим:
Первый абзац текста ……………………………………
…………………………………………………………………. конец абзаца.
Второй абзац текста …………………………………….
…………………………………………………………………. конец абзаца.
N — ый абзац текста ……………………………………..
…………………………………………………………………. конец абзаца.
Задаем вид, цвет и размер шрифта
Идем далее — тег < font > < /font > определяет вид, цвет и размер шрифта текста. У этого тега имеются свои атрибуты, которые имеют сопределенные значения:
- face — определяет наименование шрифта ( Arial, Verdana, Georgia и т.д.),
- size — размер букв от 1 (наименьший) до 7 (наибольший),
- color — обозначает цвет текста ( Red, Black — FF0000, 000000 ).
Пишем пример HTML-кода — шрифт: Georgia, размер: 4, цвет: синий.
<font face="georgia" size="4" color="blue"><p>Копирайт - это создание своего текста, которого нет ни в одном уголке интернета. Не сомневаюсь, что вы уже догадались, что копирайтинг - работа удаленная. Отсюда большой, и самый главный плюс - работа дома или в любой удобной обстановке. Заработок копирайтера пропорционально зависит от количества времени, затраченного на написание той или иной статьи. Поэтому он колеблется. Скажу прямо, у востребованного заказчиками копирайтера, заработок хороший.</p></font>
В браузере видим:
Копирайт — это создание своего текста, которого нет ни в одном уголке интернета. Не сомневаюсь, что вы уже догадались, что копирайтинг — работа удаленная. Отсюда большой, и самый главный плюс — работа дома или в любой удобной обстановке. Заработок копирайтера пропорционально зависит от количества времени, затраченного на написание той или иной статьи. Поэтому он колеблется. Скажу прямо, у востребованного заказчиками копирайтера, заработок хороший.
Теги выделения текста
Для выделения отдельных слов, а так же словосочетаний и даже определенных участков текста используются следующие теги:
- < strong > < /strong > — оформляет текст жирным шрифтом,
- < em > < /em > — оформление текста курсивом,
- < u > < /u > — оформление текста подчеркиванием,
- < strike > < /strike > — перечеркивает текст,
- < sup > < /sup > — оформление текста верхним индексом ( м< sup >2< /sup > — м 2 ),
- < sub > < /sub > — оформление текста нижним индексом ( H< sub >2< /sub >O — h3O ),
- < tt > < /tt > — оформление текста моноширным шрифтом (печатная машинка),
- < blink > < /blink > — мигающий текст (вот так),
- < blockquote > < /blockquote > — с помощью этого тега можно выделить цитату.
Разделение текста горизонтальной линией
Для разделения текста горизонтальной линией применяется тег < hr >. Тег имеет атрибуты:
- size — определяет толщину линии в пикселах,
- width — определяет длину линии в пикселах или процентах от ширины окна браузера,
- align — выравнивание горизонтальной линии, может принимать следующие значения: left, center, right,
- color
- noshade — определяет способ закраски линии как сплошной, атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.
Пишем пример HTML-кода:
<hr size="5" color="red" align="center">
Браузер отображает:
Списки
Так же для форматирования текста в HTML применяются списки. Обозначаются они тегами:
- < ol > < /ol > — нумерованный список,
- start — определяет первое число, с которого начинается нумерация пунктов (только целые числа),
- type — определяет стиль нумерации пунктов, может иметь значения:
- «A» — заглавные буквы A, B, C …
- «a» — строчные буквы a, b, c …
- «I» — большие римские цифры I, II, III …
- «i» — маленькие римские цифры i, ii, iii …
- «1» — арабские цифры 1, 2, 3 …
Пишем пример:
<ol type="A" start="1"> <li> Пункт первый </li> <li> Пункт второй </li> <li> Пункт третий </li> </ol>
Браузер покажет:
- Пункт первый
- Пункт второй
- Пункт третий
Тег < ul > < /ul > — создает маркированый, неупорядоченный список, между начальным и конечным тегами должны присутствовать один или несколько элементов < li >, обозначающих отдельные пункты списка. В маркированном списке значения атрибута type такие:
- disc — закрашенный кружок,
- circle — незакрашенный кружок,
- square — закрашенный квадратик.
Пишем пример:
<ul type="circle"> <li> Пункт первый </li> <li> Пункт второй </li> <li> Пункт третий </li> </ul>
Браузер покажет:
- Пункт первый
- Пункт второй
- Пункт третий
Этого для начала вполне достаточно, а теперь перейдем далее к тегам включения ссылок.
Служебные теги с параметрами / К оглавлению / Ссылки в HTMLHTML Основные теги
В языке HTML всё, что вы напишите в HTML-документе, будет выведено на экран браузера сплошным текстом, то есть браузер игнорирует переводы строк, а также несколько набранных вами подряд пробелов заменяются одним.
Теги — это управляющие команды, которые были придуманы для того, чтобы отформатировать текст, т.е. теги говорят браузеру о том, как именно нужно вывести на экран часть текста, заключенную в теги. Для создания тега между угловыми скобками вводится HTML-код, который предназначен только для браузеров. Посетители сайта не видят теги.
Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды).
Например, тег <em> предназначен для акцентирования текста, браузеры отображают такой текст курсивным начертанием. Когда браузер обнаруживает этот тег, он переключается на форматирование курсивным шрифтом текста, следующего за тегом.
Рассмотрим пример:
Этот текст обычный. <em> Этот текст курсивный.
Тег <em> называют начальным или открывающим тегом, что означает включение браузером определенной команды (в данном случае написание курсивным шрифтом). У большинства тегов есть пара в виде закрывающего тега, который отключает команду.
Закрывающий тег выглядит так же, как начальный, но начинается с слэша. Итак, конечный тег для выделения курсивным шрифтом — </em>.
Рассмотрим пример:
Этот текст обычный. <em>Внимание! Курсив. </em> Это снова обычный шрифт.
Как вы успели заметить, браузер последовательно анализирует HTML – документ в поисках команд (тегов) и применяет или отключает разные параметры форматирования текста. Браузер отформатированный текст (все, что не является тегом) отображает в своем окне.
| Процесс вставки тегов в обычный неформатированный текст называется разметкой HTML-документа, а теги — знаками разметки. При написании тегов не учитывается регистр букв, тег может быть прописан как строчными, так и прописными буквами, но всё же рекомендуется применение прописных букв. |
Ниже приведены примеры основных тегов HTML, с объяснением их использования, а также примеры их применения в HTML-документе.
Заголовки
Существует специальный тег для указания заголовков в HTML. Есть 6 уровней заголовков в HTML, начиная от <h2> для наиболее важных объявлений, до <h6> для наименее важных.
Вот они:
Пример HTML:
Попробуй сам<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
HTML абзацы
С помощью HTML тэга <p> Вы можете определить абзац.
Абзацы используются для логической группировки текста. Перед и после текста абзаца браузер автоматически отступает одну строчку.
Пример HTML:
Попробуй сам<p>Это абзац</p>
<p>Это другой абзац</p>
<p>Это третий абзац</p>
HTML ссылки
С помощью HTML тэга <a> создаются ссылки.
Ссылки используются для связывания HTML документов друг с другом. Нажав на ссылку пользователь будет перемещен на другой HTML документ, url которого указан в атрибуте href.
Атрибут href задает адрес документа, на который следует перейти.
Атрибуты используются для предоставления дополнительной информации о HTML-элементах.
Вставка изображений
С помощью HTML тэга <img> Вы можете вставить в HTML документ произвольное изображение.
Ширина и высота картинки может задаваться с помощью атрибутов width и height.
Пример HTML:
Попробуй сам
<img src="images/orange.jpg" alt="Апельсин">
| Обратите внимание: HTML-атрибуты будут подробно рассмотрены далее в данном учебнике. |
Основные теги для текста — СайтоСтроение
С помощью HTML-верстки можно назначить стиль, цвет, размер и другие параметры, которые предназначены для форматирования текста. Чтобы научиться определять положение и вид контента, нужно знать основные теги для текста. Кроме создания HTML-страниц вручную, знания об основных текстовых тегах будут полезны при изменениях в коде, если задачу невозможно реализовать с помощью визуального редактора html.
Изменение цвета
Чтобы изменить цвет, нужно указать атрибут и в кавычках после значка # написать соответствующее значение цвета. Например, #000000. Прежде всего можно изменять цвета текста и фона страницы. Для этого нужно в теге body указать следующее:
<body text=»#336699″ bgcolor=»#FFFF66″>
Это обозначает, что вся страница будет желтой с текстом синего цвета. Чтобы выделить цветом часть предложения или слово, нужно в тексте около нужной фразы указать тег font с атрибутом color и закрыть его в конце:
<body text=»#336699″ bgcolor=»#FFFF66″>
…Пример<font color=»#FF0000″>произвольного</font>текста…
</body>
После этого выбранный текст станет красного цвета, а остальной текст останется синим.
Изменение шрифта
Существует несколько способов изменения шрифта:
- Изменение типа шрифта. Возможно с помощью тега font и его атрибута face:
- Изменение стиля шрифта. По стилю текст может быть жирным, курсивом и моноширинным (символы одинаковой ширины):
- Для жирного шрифта: <b>текст</b> или <strong>текст</strong>
- Для курсива: <i>текст</i>
- Для моноширинного шрифта: <tt>текст</tt>
- Изменение вида шрифта. Шрифты могут быть подчеркнутыми и перечеркнутыми, стоять в верхнем и нижнем индексе, а также отображаться заглавными или строчными буквами. Всё это можно реализовать с помощью тегов:
- Подчеркнутый шрифт: <u>текст</u>
- Перечеркнутый шрифт: <s>текст</s>
- Верхний индекс: <sup>текст</sup>
- Нижний индекс: <sub>текст</sub>
- Все заглавные буквы: <big>текст</big>
- Все строчные буквы: <small>текст</small>
- Размер шрифта. Размер шрифта можно изменять с помощью тега font и ещё одного (последнего) атрибута для этого тега — size:
<font size=»+4″ (+3,+2,+1,0,-1,-2)>Пример текста</font>
<font face=»arial,impact»>текст со шрифтом</font>
Типы шрифтов указываются через запятую для того, что если первый не поддерживается компьютером пользователя, то применяется второй шрифт.
Можно совмещать стили шрифта:
<b><i>жирный курсив</i></b>
Здесь важно соблюдать вложенность тегов.
В скобках указаны возможные изменения размеров шрифта.
Заголовки и параграфы
Заголовки в тексте бывают шести уровней, самый большой размер 1-го уровня (h2). Чтобы обозначить заголовок 2-го уровня используется тег h3 и т.д. до H6:
<h3>Новый заголовок</h3>
В интернете принято для перехода на новую строчку используют теги параграфа p. Текст заключенный в параграф можно позиционировать по центру, левому, правому или по обоим краям:
- Центрирование текста: <p align=»center»>текст</p>
- По левому краю: <p align=»left»>текст</p>
- По правому краю: <p align=»right»>текст</p>
- По обоим краям: <p align=»justify»>текст</p>
Чтобы выровнять текст по какому-нибудь краю без перехода на новую строчку, применяют тег div. Например:
<div align=»right»>текст</div>
Элемент div может включать в себя параграфы <div><p></p></div>. Запрещено включать параграфы в параграфы <p><p></p></p> , а также div в параграфы <p><div></div></p>
О том, как заключать текст в таблицу вы узнаете в следующей статье. Кстати, кроме тегов, к тексту удобно применять специальные стили CSS для текста.
{social}| Тег | Описание |
|---|---|
| !, A | |
| <!—…—> | Добавляет комментарий в код документа |
| <!DOCTYPE> | Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа) |
| <a> | Предназначен для создания ссылок |
| <abbr> | Указывает, что текст является аббревиатурой |
| <acronym> | Указывает, что текст является акронимом |
| <address> | Предназначен для хранения контактной информации автора |
| <applet> | Используется для вставки на страницу апплетов — небольших программ на языке Java |
| <area> | Определяет активные области изображения, которые являются ссылками |
| <article> | Задаёт содержание сайта вроде новости, статьи, записи блога, форума и др. |
| <aside> | Представляет собой раздел, который имеет косвенное отношение к содержимому страницы |
| <audio> | Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице |
| B | |
| <b> | Устанавливает жирное начертание шрифта |
| <base> | Определяет адрес или способ открытия всех ссылок странице по умолчанию |
| <basefont> | Задаёт шрифт, размер и цвет текста по умолчанию |
| <bdi> | Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста |
| <bdo> | Устанавливает направление вывода текста: слева направо или справа налево |
| <bgsound> | Определяет музыкальный файл, который будет проигрываться на веб-странице |
| <big> | Увеличивает размер шрифта на единицу по сравнению с обычным текстом |
| <blockquote> | Предназначен для выделения длинных цитат внутри документа |
| <body> | Предназначен для хранения содержимого веб-страницы, отображаемого в окне браузера |
| <blink> | Устанавливает мигание текста |
| <br> | Устанавливает перевод строки в том месте, где он находится |
| <button> | Создаёт на веб-странице кнопку |
| C | |
| <canvas> | Создаёт область, в которой при помощи JavaScript можно рисовать и выводить изображения |
| <caption> | Создаёт заголовок к таблице |
| <center> | |
| <cite> | Представляет название произведения (книги, статьи, поэмы, песни и др.) |
| <code> | Предназначен для отображения текста программного код |
| <col> | Задаёт ширину и другие характеристики одной или нескольких колонок таблицы |
| <colgroup> | Группирует колонки таблицы для изменения их параметров |
| <command> | Создаёт команду в виде переключателя, флажка или обычной кнопки |
| <comment> | Добавляет комментарий в код документа |
| D | |
| <data> | Представляет содержимое в машиночитаемом виде, предназначенное для автоматизированных систем |
| <datalist> | Создаёт список вариантов, которые можно выбирать при наборе в текстовом поле |
| <dd> | Указывает термин в списке описаний |
| <del> | Используется для выделения текста, который был удалён в новой версии документа |
| <details> | спользуется для хранения информации, которую можно скрыть или показать по требованию пользователя |
| <dfn> | Выделяет термин в документе |
| <dialog> | Показывает диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт |
| <dir> | Создаёт список, содержащий названия директорий |
| <div> | Универсальный блочный элемент |
| <dl> | Создаёт список описаний |
| <dt> | Определяет термин в списке описаний |
| E, F | |
| <em> | Предназначен для акцентирования текста |
| <embed> | Используется для загрузки и отображения объектов |
| <fieldset> | Группирует элементы формы |
| <figcaption> | Содержит описание для элемента <figure> |
| <figure> | Используется для группирования любых элементов, например, изображений и подписей к ним |
| <font> | Изменяет характеристики шрифта, такие как размер, цвет и гарнитура |
| <footer> | Определяет «подвал» сайта или раздела |
| <form> | Устанавливает форму на веб-странице |
| <frame> | Определяет свойства отдельного фрейма, на которые делится окно браузера |
| <frameset> | Задаёт структуру фреймов на веб-странице |
| H | |
| <h2> | Заголовок первого уровня |
| <h3> | Заголовок второго уровня |
| <h4> | Заголовок третьего уровня |
| <h5> | Заголовок четветого уровня |
| <h5> | Заголовок пятого уровня |
| <h6> | Заголовок шестого уровня |
| <head> | Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными |
| <header> | Определяет «шапку» сайта или раздела |
| <hgroup> | Используется для группирования заголовков веб-страницы или раздела |
| <hr> | Рисует горизонтальную линию |
| <html> | Является контейнером, который заключает в себе всё содержимое веб-страницы |
| I | |
| <i> | Устанавливает курсивное начертание шрифта |
| <iframe> | Создаёт встроенный фрейм на странице |
| <img> | Отображает на веб-странице изображение |
| <input> | Позволяет создавать разные элементы интерфейса |
| <ins> | Предназначен для выделения текста, который был добавлен в новую версию документа |
| K, L | |
| <kbd> | Используется для обозначения текста, который набирается на клавиатуре или для названия клавиш |
| <keygen> | Используется для генерации пары ключей — закрытого и открытого (для форм) |
| <label> | Устанавливает связь между определённой меткой и элементом формы |
| <legend> | Создаёт заголовок группы элементов формы |
| <li> | Определяет отдельный пункт списка |
| <link> | Устанавливает связь с внешним документом вроде файла со стилями |
| M | |
| <main> | Элемент main предназначен для основного содержимого документа |
| <map> | Служит контейнером для элементов <area>, которые определяют активные области для карт-изображений |
| <marquee> | Создаёт бегущую строку на странице |
| <mark> | Помечает текст как выделенный |
| <menu> | Отображает список меню |
| <menuitem> | Задаёт команду, которую пользователь может вызывать через контекстное меню |
| <meta> | Определяет данные, которые используются для хранения информации, предназначенной для браузеров и поисковых систем |
| <meter> | Используется для вывода значения в некотором известном диапазоне |
| N | |
| <nav> | Группирует ссылки навигации по сайту |
| <nobr> | Уведомляет браузер отображать текст без переносов |
| <noembed> | Предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами |
| <noindex> | Запрещает поисковой системе Яндекс индексировать текст |
| <noframes> | Содержимое элемента отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать |
| <noscript> | Показывает своё содержимое, если браузер не поддерживает работу со скриптами |
| O | |
| <object> | Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает |
| <ol> | Устанавливает нумерованный (упорядоченный) список |
| <optgroup> | Объединяет элементы <option> в одну группу |
| <option> | Определяет отдельные пункты списка, создаваемого с помощью <select> |
| <output> | Определяет область для вывода, преимущественно с помощью скриптов |
| P | |
| <p> | Определяет текстовый абзац |
| <param> | Передаёт значения параметров Java-апплетам или объектам веб-страницы |
| <picture> | Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img> |
| <plaintext> | Отображает содержимое контейнера «как есть» со всеми тегами |
| <pre> | Определяет блок предварительно форматированного текста |
| <progress> | Используется для отображения прогресса завершённости задачи |
| Q, R | |
| <q> | Используется для выделения в тексте цитат |
| <rp> | Используется для вывода текста в браузерах, которые не поддерживают элемент <ruby> |
| <rt> | Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby> |
| <rtc> | В основном применяется в качестве описательной части или аннотации для иероглифов |
| <ruby> | Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста |
| S | |
| <s> | Используется для содержимого, которое уже не является точным или актуальным |
| <samp> | Используется для отображения текста, который является результатом вывода компьютерной программы |
| <script> | Предназначен для описания скриптов |
| <section> | Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. |
| <select> | Создаёт раскрывающийся список |
| <small> | Используется для сносок и комментариев, написанных обычно мелким текстом |
| <source> | Вставляет медийный файл для элементов <audio>, <video> и <picture> |
| <spacer> | Создаёт пустое пространство по вертикали или горизонтали |
| <span> | Универсальный строчный элемент |
| <strike> | Отображает текст как перечёркнутый |
| <strong> | Выделяет важный текст |
| <style> | Определяет стили элементов веб-страницы |
| <sub> | Отображает шрифт в виде нижнего индекса |
| <summary> | Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации |
| <sup> | Отображает шрифт в виде верхнего индекса |
| T | |
| <table> | Создаёт таблицу |
| <tbody> | Предназначен для хранения одной или нескольких строк таблицы |
| <td> | Предназначен для создания одной ячейки таблицы |
| <template> | Задаёт шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты |
| <textarea> | Создаёт поле для многострочного текста |
| <tfoot> | Предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы |
| <th> | Создаёт одну ячейку таблицы, которая обозначается как заголовочная |
| <thead> | Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы |
| <time> | Помечает текст внутри элемента как дату, время или оба значения |
| <title> | Определяет заголовок документа |
| <tr> | Служит контейнером для создания строки таблицы |
| <track> | Позволяет авторам указать текстовую дорожку для медийных элементов (<video> и <audio>) |
| <tt> | Отображает текст моноширинным шрифтом |
| U, V, W, X | |
| <u> | Используется для разметки текста, который должен отличаться стилистически от обычного текста |
| <ul> | Устанавливает маркированный (неупорядоченный) список |
| <var> | Используется для выделения переменных из компьютерных программ |
| <video> | Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице |
| <wbr> | Указывает браузеру место, где допускается делать перенос строки в тексте |
| <xmp> | Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины |
HTML — Фразовые теги для текста / ProgLang
Фразовые теги для текста были выделены для определенных целей, хотя они отображаются аналогично другим базовым тегам типа <b>, <i>, <pre> и <tt>, которые Вы видели в предыдущей главе. В этом уроке мы рассмотрим все важные в HTML теги для текста, поэтому давайте начнем.
Наклонный текст
Все, что расположено в теге <em>…</em>, отображается как наклонный текст. С помощью тега наклонного текста в HTML выделяют текст, на котором хотят акцентрировать внимание читателя.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример наклонного текста в HTML</title>
</head>
<body>
<p>В следующем слове <em>применяется</em> наклонный шрифт.</p>
</body>
</html>
Получим следующий результат:
Выделенный текст
Все, что расположено в теге <mark>…</mark>, выделяется желтым фоном. С помощью этого тега можно в HTML выделить текст, который нуждается во внимании читателя.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример выделенного текста в HTML</title>
</head>
<body>
<p>Следующее слово <mark>выделено</mark> желтым фоном.</p>
</body>
</html>
Получим следующий результат:
Жирный текст
Все, что расположено в теге <strong>…</strong>, отображается жирным текстом. С помощью этого тега можно в HTML выделить текст жирным шрифтом, тем самым указав на важные слова в тексте.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример жирного текста в HTML</title>
</head>
<body>
<p>Следующее слово <strong>выделено</strong> жирным шрифтом.</p>
</body>
</html>
Получим следующий результат:
Текст аббревиатура
Вы можете создавать аббревиатуры с помощью тега <abbr>…</abbr>, помещая в его текст. Если присутствует атрибут title, то он должен содержать полное описание и ничего больше.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример аббревиатуры в HTML</title>
</head>
<body>
<p>Вы изучаете <abbr title = "HyperText Markup Language">HTML</abbr>.</p>
</body>
</html>
Получим следующий результат:
Элемент сокращения
Элемент <acronym> позволяет указать, что текст заключенный между тегами <acronym>…</acronym>, является сокращением (аббревиатурой).
В настоящее время основные браузеры не меняют внешний вид содержимого элемента <acronym>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример сокращения в HTML</title>
</head>
<body>
<p>Вы изучаете <acronym>HTML</acronym>.</p>
</body>
</html>
Получим следующий результат:
Направление текста
Тег <bdo> — используется для переопределения текущего направления текста и имеет двунаправленное переопределение. В предыдущем уроке мы рассматривали похожий атрибут dir, который позволяет указать браузеру направление потока текста.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример направления текста в HTML</title>
</head>
<body>
<p>Текст слево направо.</p>
<p><bdo dir = "rtl">Текст справа налево.</bdo></p>
</body>
</html>
Получим следующий результат:
Специальные условия
Тег <dfn> — позволяет указать, что Вы вводите специальный термин, он еще называется в HTML элемент определения. Его использование похоже на курсивный шрифт в середине абзаца.
Как правило, Вы должны использовать элемент <dfn> при первом вводе ключевого слова. Последние версии браузеров отображают содержимое элемента <dfn> курсивом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример специального условия в HTML</title>
</head>
<body>
<p>Следующее слово <dfn>специальное</dfn> условие.</p>
</body>
</html>
Получим следующий результат:
Цитата в тексте
Если Вы хотите процитировать отрывок из другого источника, то должны поместить его между тегами <blockquote>…</blockquote>.
Текст внутри тега цитаты <blockquote> обычно имеет отступы от левого и правого краев окружающего текста и иногда использует курсивный шрифт.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример оформления цитаты в HTML</title>
</head>
<body>
<p>Ниже представлен текст цитаты:</p>
<blockquote>Этот текст заключен в тег цитаты.</blockquote>
</body>
</html>
Получим следующий результат:
Короткие цитаты или двойный кавычки в HTML
Тег цитаты <q>…</q> используется, когда Вы хотите добавить в HTML двойную кавычку в предложение.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример двойных кавычек в HTML</title>
</head>
<body>
<p>Следующий текст <q>помещен в двойные кавычки</q>.</p>
</body>
</html>
Получим следующий результат:
Цитирование в HTML
Если Вы цитируете текст, то можете указать источник, размещающий его между открывающим тегом <cite> и закрывающим тегом </cite>.
Как правило, в публикации для печати содержимое тега цитирования <cite> отображается по-умолчанию курсивом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример цитирования в HTML</title>
</head>
<body>
<p>Следующий текст <cite>будет процитирован</cite>.</p>
</body>
</html>
Получим следующий результат:
Программный код
Любой код программирования, который Вы хотите отобразить на веб-странице, должен быть помещен внутри тегов <code>…</code>. Обычно содержимое тега <code> представлено в моноширинном шрифте, как и программный код в большинстве книг по программированию.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример программного кода в HTML</title>
</head>
<body>
<p>Узнайте программный код: <code>h2, h3, h4 { font-size: 20px; } </code>.</p>
</body>
</html>
Получим следующий результат:
Клавиатурный текст
Когда Вы пишите о компьютерах и хотите сообщить читателю, что нужно нажать какую-либо клавишу, то можете использовать элемент <kbd>…</kbd>, чтобы указать, что следует нажать или вводить. Как правило, отображается моноширинным шрифтом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример клавиатурного текста в HTML</title>
</head>
<body>
<p>Нажмите сочетание клавиш <kbd>CTRL+F5</kbd>, чтобы обновить веб-страницу и очистить кеш.</p>
</body>
</html>
Получим следующий результат:
Переменные программирования
Тег <var> указывает, что содержимое этого элемента является переменной, часто используется вместе с элементами <pre> и <code>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример переменных в HTML</title>
</head>
<body>
<p><code>document.write("<var>name</var>")</code></p>
</body>
</html>
Получим следующий результат:
Результат программы
Тег <samp>…</samp> указывает, что содержимое этого элемента является результатом выполнения программы, приложения, скрипта и т.д. Опять же, он используется при оформлении программирования или кодирования.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример результата программы в HTML</title>
</head>
<body>
<p>В результате программа выведит на экран сообщение <samp>Hello World!</samp></p>
</body>
</html>
Получим следующий результат:
Текст адреса
Тег <address>…</address> используется для размещения адреса.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример текста адреса в HTML</title>
</head>
<body>
<address>141411, г.Москва, ул.Пахучкина, д.8</address>
</body>
</html>
Получим следующий результат: