Теги html для текста: HTML теги для текста | Impuls-Web.ru – Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

Содержание

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>

Браузер покажет:

  1. Пункт первый
  2. Пункт второй
  3. Пункт третий

Тег < ul > < /ul > — создает маркированый, неупорядоченный список, между начальным и конечным тегами должны присутствовать один или несколько элементов < li >, обозначающих отдельные пункты списка. В маркированном списке значения атрибута type такие:

  • disc — закрашенный кружок,
  • circle — незакрашенный кружок,
  • square — закрашенный квадратик.

Пишем пример:

<ul type="circle">
<li> Пункт первый </li>
<li> Пункт второй </li>
<li> Пункт третий </li>
</ul>

Браузер покажет:

  • Пункт первый
  • Пункт второй
  • Пункт третий

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

Служебные теги с параметрами / К оглавлению / Ссылки в HTML

HTML Основные теги



В языке 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>

После этого выбранный текст станет красного цвета, а остальной текст останется синим.

Изменение шрифта

Существует несколько способов изменения шрифта:

  1. Изменение типа шрифта. Возможно с помощью тега font и его атрибута face:
  2. <font face="arial,impact">текст со шрифтом</font>

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

  3. Изменение стиля шрифта. По стилю текст может быть жирным, курсивом и моноширинным (символы одинаковой ширины):  
    • Для жирного шрифта: <b>текст</b> или <strong>текст</strong>
    • Для курсива: <i>текст</i>
    • Для моноширинного шрифта: <tt>текст</tt>
  4. Можно совмещать стили шрифта:

    <b><i>жирный курсив</i></b>

    Здесь важно соблюдать вложенность тегов.

  5. Изменение вида шрифта. Шрифты могут быть подчеркнутыми и перечеркнутыми, стоять в верхнем и нижнем индексе, а также отображаться заглавными или строчными буквами. Всё это можно реализовать с помощью тегов:
    • Подчеркнутый шрифт: <u>текст</u>
    • Перечеркнутый шрифт: <s>текст</s>
    • Верхний индекс: <sup>текст</sup>
    • Нижний индекс: <sub>текст</sub>
    • Все заглавные буквы: <big>текст</big>
    • Все строчные буквы: <small>текст</small>
  6. Размер шрифта. Размер шрифта можно изменять с помощью тега font и ещё одного (последнего) атрибута для этого тега - size:

    <font size="+4" (+3,+2,+1,0,-1,-2)>Пример текста</font>

В скобках указаны возможные изменения размеров шрифта.

Заголовки и параграфы

Заголовки в тексте бывают шести уровней, самый большой размер 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}

Справочник HTML | HTML теги

Все Блочные Строчные Новые HTML5 Нестандартные Не поддерживаемые в HTML5

Тег Описание
!, 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>

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

Поделитесь:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *