Текст в HTML . Основы HTML
Текст в HTML
HTML – Это язык разметки , мы познакомились как написать первую страницу — html , рассмотрели структуру html – страницы , узнали как можно подключить таблицы стилей – css , разделить страницу на блоки , сейчас можно перейти к изучению основных тегов – html , с помощью которых можно форматировать html – страницу , отдельные символы , целые блоки .
С помощью html – тегов можно отформатировать текст в html – страницы , визуально теги не отображаются на странице , мы видим только текст . И чтобы выделить текст полужирным или курсивным начертанием . Можно выделить часть текста или целый блок другим цветом , приходится использовать специальные теги , которые помогают нам это сделать . Каждый тег играет свою роль . Рассмотрим основные теги которые часто могут применяться для форматирования текста.
Полужирный текст в HTML
Тег <b> и тег <strong> – Парные теги , с помощью этих тегов текст можно выделить полужирным шрифтом , подчеркнуть важность текста.
Приоритет имеет парный тег <strong>.
Полужирный текст
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Полужирный текст</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
b,strong {
font-size: 1.2em; /*Размер шрифта b,strong*/
}
</style>
</head>
<body>
<h2>Полужирный текст в HTML</h2>
<b>Полужирный шрифт .</b><br />
<strong>Важный фрагмент текста .</strong>
</body>
</html>Открыть пример в новом окне
Полужирный текст
Полужирный текст
Наклонный текст в HTML
Тег <i> и тег <em> – Парные теги , выделяет текст наклоном (курсивом) .
Наклонный текст
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Наклонный текст</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
i,em {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h2>Наклонный текст в HTML</h2>
<i>Текст выделенный курсивом .</i><br />
<em>Текст также выделенный курсивом .</em>
</body>
</html>Открыть пример в новом окне
Наклонный текст
Наклонный текст
Подчеркнутый текст в HTML
Тег <u> – Парный тег , отображает текст подчеркнутым.
Подчеркнутый текст
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Подчеркнутый текст</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
u {
font-size: 1.
2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h2>Подчеркнутый текст в HTML</h2>
<u>Подчеркнутый текст .</u>
</body>
</html>
2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h2>Подчеркнутый текст в HTML</h2>
<u>Подчеркнутый текст .</u>
</body>
</html>Открыть пример в новом окне
Подчеркнутый текст
Подчеркнутый текст
Перечеркнутый текст в HTML
Тег <u> – Парный тег , отображает текст подчеркнутым.
Перечеркнутый текст
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Перечеркнутый текст</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
del,ins {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h2>Перечеркнутый текст в HTML</h2>
<del>Старый текст</del><br />
<ins>Старый текст заменили новым . </ins>
</body>
</html>
Открыть пример в новом окне
Перечеркнутый текст
Перечеркнутый текст
Текст меньшего размера в HTML
Парный тег <small> – помогает сделать текст меньшего размера .
Текст меньшего размера
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Текст меньшего размера</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
p {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h2>Текст меньшего размера в HTML</h2>
<p>Текст <small>меньшего</small> размера</p>
</body>
</html>Открыть пример в новом окне
Текст меньшего размера
Текст меньшего размера
Создание нижних и верхних индексов
Парный тег <sub> сдвигает текст ниже уровня строки и делает текст меньше основного текста .
Парный тег <sup> сдвигает текст выше уровня строки и делает текст меньше основного текста .
Создание нижних и верхних индексов
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Создание нижних и верхних индексов</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
p {
font-size: 1.2em; /*Размер шрифта*/
}
</style>
</head>
<body>
<h2>Создание нижних и верхних индексов</h2>
<p>Формула воды H<sub>2</sub>O<br />
Единица измерения площади — м<sup>2</sup></p>
</body>
</html> Открыть пример в новом окне
Создание нижних и верхних индексов
Создание нижних и верхних индексов
Скрытый текст тег — <details>
<details> Элемент представляет собой виджет раскрытия , из которого пользователь может получить дополнительную информацию или элементы управления.
По умолчанию содержимое элемента не отображается, для изменения статуса применяется атрибут open.
Тег <details> используется для хранения информации, которую можно скрыть или показать по требованию пользователя.
Рассмотрим несколько примеров с использование этого тега при написание html – страниц с подключением стилей css .
Текст скрыт при загрузке страницы
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Скрытый текст</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
details{
width: 400px;
font-size: 1.2em;
}
</style>
</head>
<body>
<h2>Текст скрыт при загрузке страницы</h2>
<p><details>
<summary>Развернуть или свернуть текст</summary>
Скрытый текст</p>
</details>
</body>
</html>Открыть пример в новом окне
Текст скрыт при загрузке страницы
Текст скрыт при загрузке страницы
Текст открыт при загрузке страницы
С тегом <details> можно использовать атрибут open , данный логический атрибут указывает , пользователю , что при загрузке html – страницы текст будет открыт .
По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.
Текст открыт при загрузке страницы
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Текст открыт при загрузке</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
details{
width: 400px;
font-size: 1.2em;
}
</style>
</head>
<body>
<h2>Текст открыт при загрузке страницы</h2>
<p><details open>
<summary>Развернуть или свернуть текст</summary>
Скрытый текст</p>
</details>
</body>
</html> Открыть пример в новом окне
Текст открыт при загрузке страницы
Текст открыт при загрузке страницы
Тег <details> в рамке
Рассмотрим пример с подключение стилей css , чтобы тексту придать более лучший вид .
Тег <details> в рамке
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Тег details в рамке</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
details {
border: 1px solid #aaa; /* Бордюр ширина , цвет*/
border-radius: 4px; /* Бордюр закругление углов*/
padding: .5em .5em 0; /* Отступы внутри блока */
}
summary { /* Стиль скрытого текста*/
font-weight: bold; /* Жирность шрифта*/
margin: -.5em -.5em 0; /* Отступы снаружи блока */
padding: .5em; /* Отступы внутри блока */
}
</style>
</head>
<body>
<h2>Тег details в рамке</h2>
<p><details>
<summary>Посмотреть скрытый текст</summary>
<p>Скрытый текст</p>
</details></p>
</details>
</body>
</html>Открыть пример в новом окне
Тег details в рамке
Тег details в рамке
Добавление своих значков
Добавление своих значков
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Добавление своих значков</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
details {
border: 1px solid #aaa; /* Бордюр ширина , цвет*/
border-radius: 4px; /* Бордюр закругление углов*/
padding: . 5em .5em 0; /* Отступы внутри блока */
}
summary { /* Стиль скрытого текста*/
font-weight: bold; /* Жирность шрифта*/
margin: -.5em -.5em 0; /* Отступы снаружи блока */
padding: .5em; /* Отступы внутри блока */
}
summary {
display: block; /*Расположение блоком*/
}
summary::-webkit-details-marker {
display: none; /*Скрываем маркер*/
}
summary::before {
content: '\2B02'; /*Маркер при скрытом блоке*/
padding-right: 0.5em;
}
details[open] > summary::before {
content: '\2B07'; /*Маркер при раскрытом блоке*/
}
</style>
</head>
<body>
<h2>Добавление своих значков</h2>
<p><details>
<summary>Посмотреть скрытый текст</summary>
<p>Скрытый текст</p>
</details></p>
</details>
</body>
</html> 
5em .5em 0; /* Отступы внутри блока */
}
summary { /* Стиль скрытого текста*/
font-weight: bold; /* Жирность шрифта*/
margin: -.5em -.5em 0; /* Отступы снаружи блока */
padding: .5em; /* Отступы внутри блока */
}
summary {
display: block; /*Расположение блоком*/
}
summary::-webkit-details-marker {
display: none; /*Скрываем маркер*/
}
summary::before {
content: '\2B02'; /*Маркер при скрытом блоке*/
padding-right: 0.5em;
}
details[open] > summary::before {
content: '\2B07'; /*Маркер при раскрытом блоке*/
}
</style>
</head>
<body>
<h2>Добавление своих значков</h2>
<p><details>
<summary>Посмотреть скрытый текст</summary>
<p>Скрытый текст</p>
</details></p>
</details>
</body>
</html>Открыть пример в новом окне
Добавление своих значков
Добавление своих значков
Цвет текста
Тег <span> – парный тег , в отличие от тега <div> отличается тем , что тег <div> является блочным тегом , а помощью тега <span> можно выделить одно слово в тексте или несколько слов :
Выделение текста цвета
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Выделение текста цвета</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
h2 {
color: blue;
}
p {
font-size: 1. 2em; /*Размер шрифта*/
}
span { /*Стиль для всех элементов SPAN */
font-size: 13pt; /* Размер шрифта */
color: blue; /*Цвет шрифта */
font-family: "Arial"; /* Название шрифта */
font-weight: bold; /*Жирность шрифта */
}
.text-color { /* Стиль для класса .text-color*/
font: 1em Georgia, Times, serif; /*Размер, Название шрифта */
color: #c80404; /*Цвет шрифта */
font-weight: bold; /*Жирность шрифта */
}
</style>
</head>
<body>
<h2>Цвет текста</h2>
<p>С помощью элемента <span>SPAN</span> можно выделить важное <span>слово</span> внутри абзаца .</p>
<p>Можно выделить одно <span>слово</span> в тексте или <span>несколько слов</span>.</p>
</body>
</html> 
Открыть пример в новом окне
Выделение текста цвета
Выделение текста цвета
HTML-теги для текста
Всем доброго времени суток.
На связи Алексей Гулынин. В прошлой статье мы с вами разобрали структуру HTML-документа. Теперь настала очередь разобраться с тем, как редактировать текст на странице, например, выделить текст курсивом или сделать его жирным, изменить размер текста. Создадим страницу, с которой мы будем экспериментировать:
<html> <head> <meta charset="utf-8"/> <title>Редактирование вида текста</title> </head> <body> <p>Я начал изучать HTML. И это круто.</p> </body> </html>
Здесь сразу обращаем внимание, что появилось два новых тега <meta> и <p>. Строка <meta charset=»utf-8″> задает кодировку нашей страницы (в данном случае это utf-8). Это нужно для того, чтобы открыв документ, мы обнаружили в нем тот текст, который набирали, а не иероглифы. Обращаю ваше внимание на то, что кодировка документа также должна быть в utf-8. Для этого необходимо в редакторе Notepad++ сверху выбрать «Кодировки» — «Кодировать в UTF-8 (без BOM)».
Тег <p> — это тег абзаца.
Открыв данную страницу в браузере, мы увидим, что вывелся наш текст без форматирования внешнего вида.
Давайте теперь разберемся как сделать текст жирным, курсивом, подчеркнутым, также разберем их комбинацию.
<b></b>
— текст, заключенный между этими тегами будет жирным.
<i></i>
— текст, заключенный между этими тегами будет курсивным.
<u></u>
— текст, заключенный между этими тегами будет подчеркнутым.
Давайте изменим нашу страницу, добавив следующие строки:
<html> <head> <meta charset="utf-8"/> <title>Редактирование вида текста</title> </head> <body> <p>Я начал изучать HTML. И это круто.</p> <b>Жирный текст</b> <i>Курсивный текст</i> <u>Подчеркнутый текст</u> </body> </html>
Давайте теперь сделаем текст одновременно и жирным, и курсивным:
<b><i>Жирный курсивный текст</i></b>
Давайте теперь напишем следующий код и посмотрим, что получится:
<b><i>Жирный курсивный текст</b></i>
Разница сразу в глаза не бросается, но здесь мы закрываем тег <b>, не закрыв тег <i>, т.
е. не соблюдаем принцип вложенности тегов. Современные браузеры выведут информацию нормально, но старые браузеры нет. Поэтому всегда соблюдайте принцип вложенности тегов.
Давайте теперь разберем, как изменить цвет, размер и шрифт текста на странице. Добавим следующий код:
<html> <head> <meta charset="utf-8"/> <title>Редактирование вида текста</title> </head> <body> <p>Я начал изучать HTML. И это круто.</p> <b>Жирный текст</b> <i>Курсивный текст</i> <u>Подчеркнутый текст</u> <b><i>Жирный курсивный текст</i></b> <p> <font color="red" size="30px"> <b><i>Красный жирный текст размером 30px</i></b> </font> </p> </body> </html>
Тег <font> и его атрибуты color и size как раз и отвечают за цвет текста и его размер.
В данной статье вы узнали про HTML-теги для текста.
Настало время для домашнего задания: попробуйте поиграть с различными вариантами стилизации текста на странице. Также найдите в интернете другие атрибуты у тега font.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
Опубликовано от Алексей Гулынин Оставить комментарий
Следующая статья >
| Комментарии: |
Двойное подчеркивание в HTML с примерами кода
Двойное подчеркивание в HTML с примерами кода
В этой статье мы рассмотрим несколько различных примеров решения проблемы двойного подчеркивания в HTML.
Я хочу, чтобы
дю { строка оформления текста: подчеркивание; стиль оформления текста: двойной; }этот материал был подчеркнут дважды.
Существует множество реальных примеров, показывающих, как решить проблему с двойным подчеркиванием в Html.
Какой тег используется для двойного подчеркивания в HTML?
Тег представляет текст, который не артикулирован и оформлен иначе, чем обычный текст, например слова с ошибками или имена собственные в тексте на китайском языке. Содержимое внутри обычно отображается с подчеркиванием. Вы можете изменить это с помощью CSS (см. пример ниже).
Как добавить подчеркивание в HTML?
Тег в HTML означает подчеркивание и используется для подчеркивания текста, заключенного в тег . Этот тег обычно используется для подчеркивания слов с ошибками.19-июль 2022 г.
Что такое тег HTML для подчеркивания?
: Элемент нечеткой аннотации (подчеркивание). HTML-элемент представляет собой фрагмент встроенного текста, который должен отображаться таким образом, чтобы указать, что он имеет нетекстовую аннотацию.
По умолчанию это отображается как простое сплошное подчеркивание, но его можно изменить с помощью CSS.14-Sept-2022
Как изменить стиль подчеркивания в HTML?
Измените подчеркивание на точки с помощью свойства стиля border-bottom a { text-decoration: none; нижняя граница: 1px с точками; }. Измените цвет подчеркивания, набрав { text-decoration: none; нижняя граница: 1px сплошной красный; }.12 марта 2021
Как выделить жирным шрифтом и подчеркнуть текст в HTML?
Элементы форматирования HTML
- — Жирный текст.
- — Важный текст.
- — Курсив.
- — Подчеркнутый текст.
- — Выделенный текст.
- — Меньший текст.
-
— Удален текст. - — Вставленный текст.
Как подчеркнуть текст?
Самый быстрый способ подчеркнуть текст — нажать Ctrl+U и начать печатать. Если вы хотите прекратить подчеркивание, снова нажмите Ctrl+U.
Вы также можете подчеркнуть текст и пробелы несколькими другими способами. Что ты хочешь делать?
Как подчеркнуть абзац в HTML CSS?
Для подчеркивания текста в html используйте тег или атрибут стиля. Просто оберните подчеркиваемый текст внутри тега или при использовании атрибута стиля установите для свойства text-decoration значение подчеркивания.
Как сделать подчеркивание в CSS?
оформление текста: надчеркивание;
- h3 { text-decoration: line-through;
- h4 {украшение текста: подчеркивание;
- h5 { text-decoration: underline overline;
Как нарисовать линию в HTML?
Добавить горизонтальную линию в разметку очень просто, просто добавьте:
. Браузеры рисуют линию по всей ширине контейнера, которая может быть всем телом или дочерним элементом.09-Jan-2021
Как подчеркнуть изображение в HTML?
Сначала вам нужно будет идентифицировать изображение в файле HTML, затем перейти к файлу CSS, вызвать свой идентификатор и в скобках сказать ‘text-decoration: underline;’ .
html — Какой тег следует/можно использовать для подчеркивания текста?
Задавать вопрос
спросил
Изменено 4 года, 10 месяцев назад
Просмотрено 2к раз
Прежде всего, я понимаю, что стили в HTML должны обрабатываться CSS, и я не хочу это менять.
Мне просто нужен сплошной тег, который я могу использовать для подчеркивания, тег означает для подчеркнутого текста или такой, который имеет смысл использовать как таковой. Затем я могу стилизовать его с помощью CSS.
Где же этот ярлык?
Почему сильное , b , em , i и т. д. совершенно нормально (и часто автостилизуется в браузерах), но подчеркнутое является запретным плодом?
Я бы не хотел писать
подчеркнутый текст ИЛИ некоторый текст
когда я могу просто использовать
привет
и стиль?
- html
- семантическая разметка
- подчеркивание
1
Элемент u предназначался для подчеркивания, начиная с HTML 3.
2. HTML 4.01 не одобряет его, «объявив его устаревшим», а HTML5 предлагает неясным образом переопределить его значение. Тем не менее, на самом деле он работает во всех браузерах, и будет продолжать работать, и имеет точный эффект подчеркивания.
Следует ли подчеркивать что-либо, кроме ссылок на веб-страницах, — это другой вопрос. Так же и вопрос, следует ли вам думать с точки зрения логической структуры, а не визуального рендеринга.
2
Подчеркивание текста — плохая идея, потому что оно должно быть зарезервировано исключительно для ссылок. Пользователи обычно ожидают, что смогут отслеживать подчеркнутый текст и что-то произойдет.
Тем не менее, есть одно главное исключение, о котором я могу думать:
Цена:12,34£9,87£!
Большинство, если не все браузеры отобразят новую цену там с подчеркиванием, и люди поймут, что это вставка.
2
Я думаю, что лучше подойти ко всей проблеме, если мы попытаемся понять, чего пытаются достичь разработчики спецификаций HTML.
В первые дни HTML был практически единственным инструментом для создания гипертекстовых документов, поэтому он пытался предоставить все необходимое. По мере роста Интернета вскоре стало очевидно, что это комплексное решение не масштабируется. Смешивание контента и презентации не давало полного контроля ни над тем, ни над другим. Итак, было сделано два шага:
- Создан новый язык для работы с визуальными элементами
- Сам HTML был очищен, чтобы сосредоточиться на определении содержимого
Проблема с подчеркиванием в том, что оно само по себе не имеет никакого значения. Он будет иметь значение, если вы назначите его в контексте вашего приложения (например, вы можете решить, что подчеркнутый текст будет использоваться для авторов книг в каталоге вашей онлайн-библиотеки). Поэтому, когда ребята из W3C создали HTML-теги для нескольких типов контента (заголовки, аббревиатуры, даты…), они просто не подумали о подчеркивании: оно намеренно выходило за рамки языка.
Нет тега HTML для «подчеркивания» по той же причине, по которой нет тега для «красного круга» или «текста Comic-Sans в верхнем регистре».
Конечно, на самом деле есть тег , но подчеркивание — это только предложение, потому что важной частью является семантика — например, печать крупным шрифтом.
2
Это не запрещено, но лучше не использовать его, так как тег подчеркивания устарел в HTML 4 http://www.w3.org/TR/REC-html40/present/graphics.html#edef-U, поэтому не будет подтверждать.
6
Подчеркивание элемента — это скорее вопрос стиля. Так что лучше дать класс типа «underline_style» и в CSS дать правильные правила.
3
Элемент u вы все еще можете использовать для подчеркивания, но поскольку он сложнее, чем b , i , strong и em , вам потребуется CSS для его стилизации в деталях.