Тег code
В тег code принято заключать программный код любых языков, который вы хотите разместить в тексте своей HTML страницы.
Имейте ввиду, что теги внутри code будут работать как теги. Чтобы браузер не воспринимал их как команду, следует заменить все угловые скобки на специальные символы HTML < и > или воспользоваться нестандартным тегом xmp .
Текст, размещенный внутри тега code , по умолчанию станет моноширинным (это значит, что длина всех букв будет одинакова). Это поведение можно изменить с помощью CSS свойства font-family .
Пример
Давайте посмотрим способ применения тега code :
Зачем нужен HTML тег code?
Дорогие друзья! Сегодня мы поговорим о HTML теге code. При написании конкретно этой статьи или любых других обучающих материалов, периодически необходимо вставлять куски HTML, CSS кода и вообще любого программного кода.
Думаю, вы уже догадались для чего нужен HTML тег code. Через него мы сообщаем браузеру: «Все что будет помещено внутри контейнера «code», просим отобразить как текст.»
В противном случае браузер не поймет где настоящий код, а где демонстрационный и не покажет ничего. Поскольку все теги на странице браузер воспринимает как команды для вывода контента. Иными словами с помощью HTML тега code в окне браузера выводятся именно сами теги для демонстрации HTML-кода.
Рассмотрим ниже пример вывода тегов на странице:
Фрагмент HTML-кода
Это заголовок.
Это параграф.
Смотрим на результат данного примера:
Угловые скобки следует заменить на специальные символы &.. и делать перенос каждой строки тегами br или p.
По умолчанию браузеры показывают содержимое HTML тега code моноширинным шрифтом. Это уменьшенный шрифт с фиксированным размером.
Так выглядет в браузере по умолчанию:
Теперь переопределим внешний вид кода внутри тега code. Зададим для элемента font-family: verdana; или любой другой шрифт.
Заданный стиль в браузере:
Стоит добавить, что HTML тег code – это фразовый тег, принадлежащий к компьютерному коду, поддерживается всеми основными браузерами и не устарел после появления HTML5. А так же поддерживает глобальные атрибуты и атрибуты событий в HTML. Ну вот пожалуй и все, что надо знать про этот тег. Всем пока. Удачи в обучении.
Создано 31.08.2017 11:20:20
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.
HTML тег
HTML тег предназначен для выделения текста, который представляет из себя программный код или различные формулы, например часть кода какого-нибудь языка программирования, которую вы хотели бы описать.
Большинство браузеров по умолчанию будет отображать содержимое элемента моноширинным шрифтом, т.е. с фиксированной шириной символов уменьшенного размера, к таким шрифтам относится например Courier, но этот стиль можно переопределить с помощью CSS.
Атрибуты
Стиль по умолчанию
code
Пример
Программный кодРезультат данного примера в окне браузера:
Атрибуты
Как добавить стиль к тегу ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега :
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега :
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега :
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.