Коды для текста html: HTML теги для оформления текста | Справочник HTML CSS

HTML теги для оформления текста | Справочник HTML CSS

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

В данной статье перечислены только те теги, которые рекомендованы для использования актуальной спецификацией html5.

Структура

h2, h3, h4, h5, h5, h6 — блочные теги предназначены для указания заголовков. Заголовков в html есть 6 уровней, от h2 (первый уровень) до h6 (последний уровень), каждый визуально выделен жирным шрифтом и его соответствующим размером. Заголовки должны описывать содержание, это положительно влияет на оптимизацию сайта. Хорошей практикой считается указывать только один заголовок первого уровня h2, остальных может быть несколько. Заголовки должны указываться по иерархии, на первом уровне заголовок h2 дальше подзаголовок h3 и так далее

p — абзац. Блочный тег, разделяет текст на отдельные абзацы, в конце добавляется отступ

Примеры: https://codepen.io/Yury_P/pen/WNGLgdW

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

b — визуально выделяет текст жирным начертанием

strong — отображает текст жирным начертанием, логически указывает на важность текста. Может быть использован для выделения ключевых слов для оптимизации поиска

i — задает курсивное начертание текста

em — задает курсивное начертание текста, логически указывает на важность текста

u — подчеркивает текст снизу

pre — сохраняет форматирование текста (не удаляет пробелы и переносы строк)

sup — текст отображается как верхний индекс

sub — текст отображается как нижний индекс

small — уменьшает текст на условную единицу

address — внутри указывается адрес (физический адрес, телефон, почта), обычно отображается курсивным шрифтом

mark — отображает текст как выделенный

abbr — оборачивает аббревиатуру (сокращение), в атрибуте title указывается ее расшифровка, которая показывается при наведении

kbd — отображает название клавиш или текст набранный пользователем, обычно отображается моноширинным шрифтом

dfn — внутри пишется название нового термина, далее идет его пояснение, обычно отображается курсивным шрифтом

ins — выделяет новый текст, который был добавлен при обновлении содержания, обычно отображается как подчеркнутый текст

del — выделяет старый текст, который был удален при обновлении содержания, обычно отображается как зачеркнутый текст

s — зачеркивает текст

Примеры: https://codepen. io/dmitryvalak/pen/zYKXjaV

Цитаты

q — отображает текст как цитату, обрамляет его кавычками

blockquote — отображает текст как цитату. По сравнению с тегом используется для длинных цитат, оформляется отступами

cite — выделяет цитату на материал из другого источника, обычно отображается курсивным шрифтом

Примеры: https://codepen.io/dmitryvalak/pen/yLarjoq

Списки

ul — маркированный список. Каждый элемент списка оборачивается тегами li

ol — нумерованный список. Каждый элемент списка оборачивается тегами li

dl — список терминов. Внутри используются теги: dt — название термина, dd — описание термина

Примеры: https://codepen.io/Yury_P/pen/mdrgZQb

Отображение кода

code — оборачивает программный код, обычно отображается моноширинным шрифтом, не учитывает переносы строк и дополнительные пробелы

var — оборачивает переменную из программного кода, обычно отображается моноширинным шрифтом

samp — оборачивает текст, которые является результатом вывода скрипта или программы, обычно отображается моноширинным шрифтом

Примеры: https://codepen. io/Yury_P/pen/yLaGxPB

Другие теги

span — строчный тег. Сам по себе не имеет никакого логического или визуального смысла. Часто используется внутри абзаца (

) для выделения части текста. Если часть текста нужно стилизовать по другому, ее можно обернуть в span, указать класс и в css добавить нужные стили

br — переносит текст на новую строку

wbr — указывает где можно сделать перенос слова

hr — вставляет горизонтальную полосу

bdo — задает направление текста, в атрибуте dir указывается направление: rtl — справа на лево, ltr — слева направо

bdi — запрещает изменение направления текста, по аналогии с bdo направление указывается в атрибуте dir, по умолчанию значение auto

Примеры: https://codepen.io/Yury_P/pen/rNMoZrL

HTML теги для форматирования текста

❮ Назад Вперед ❯

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

Рассмотрим подробно теги форматирования и объясним нюансы их применения.

Теги <h2>-<h6> используются для структурирования HTML заголовков. В HTML используются 6 уровней заголовков, от <h2> до <h6>. <h2> используется для обозначения самого важного, а <h6> наименее важного заголовков.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы </title>
  </head>
  <body>
    <h2>Заголовок первого уровня</h2>
    <h3>Заголовок второго уровня</h3>
    <h4>Заголовок третьего уровня</h4>
    <h5>Заголовок четвертого уровня</h5>
    <h5>Заголовок пятого уровня</h5>
    <h6>Заголовок шестого уровня</h6>
  </body>
</html>

Попробуйте сами!

Результат

HTML теги <b> и <strong> задают полужирное начертание шрифта.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Мы использовали тег &lt;strong&gt;, чтобы выделить <strong> этот важный фрагмент текста</strong>.</p>
  </body>
</html>

Попробуйте сами!

Результат

Теги <i> и <em> задают курсивное начертание шрифта. Тег <i> текст является элементом физической разметки, то есть вложенный текст отличается только визуально и не воспринимается как важный браузерами и поисковыми машинами. Тег <em> экспрессивно-эмоционально выделяет фрагмент текста.

Пример

<!DOCTYPE html>
<html>
  <body>
    <p>Это обычный абзац</p>
    <p>Важный фрагмент текста выделяется <em>курсивным начертанием</em></p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <pre> используется для включения в HTML-документ предварительно отформатированного текста. Во вложенном в тег тексте сохраняются все пробелы и разрывы строк (как известно, браузеры по умолчанию любое количество идущих подряд пробелов показывают как один).

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <pre>Крошка сын
               к отцу пришёл,
               и спросила кроха:
               — Что такое 
                хорошо
                и что такое 
                плохо? —</pre>
  </body>
</html>

Попробуйте сами!

Результат

Как вы заметили, все пробелы и переносы строк сохранены в браузере.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Изучайте язык гипертекстовой разметки HTML на сайте <mark>W3Docs.com</mark>.</p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <small> определяет размер шрифта текста на один размер меньше, чем у родительского элемента. В HTML5 тег используется для хранения информации об авторских правах, а также определения мелкого, либо юридического шрифта.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Использование тега SMALL</title>
  </head>
  <body>
    <p>Процентная ставка всего 10%*</p>
    <small>* - в день</small> /
  </body>
</html>

Попробуйте сами!

Результат

Тег <del> выделяет часть текста, которая была удалена из документа.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Мой любимый цвет <del>зеленый</del> <ins>синий</ins>!</p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <s> используется для определения текста, который больше не актуален.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p><s>Я учусь в школе</s></p>
    <p>Я учусь в институте.</p>
  </body>
</html>

Попробуйте сами!

Результат

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

Тег <ins> используется для определения части текста, которая была добавлена в документ. Содержимое тега в браузере отображается как подчеркнутый текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Ее любимые цветы <del>фиалки</del> <ins>подснежники</ins>․</p>
  </body>
</html>

Попробуйте сами!

Результат

В тег <u> заключается текст, который стилистически отличается от остального текста, например, слова с орфографическими ошибками или текст на другом языке.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <p>Здесь мы использовали <u>элемент &lt;u&gt;</u>.</p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <sub> используется для определения текста с нижним индексом. Тег выравнивает элемент как подстрочный. Тег <sup> используется для определения текста в верхнем индексе.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Формула воды -H<sub>2</sub>O,  а формула спирта - C<sub>2</sub>H<sub>5</sub>ОН </p>
    <p>E = mc<sup>2</sup>, где E — энергия объекта, m — его масса, c — скорость света в вакууме. </p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <dfn> используется для выделения термина, который упоминается впервые. В браузере содержимое тега выделяется курсивом.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p><dfn>HTML</dfn> (от англ.  HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML</p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <p> определяет абзац в тексте. Друг от друга абзацы отделяются пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Это первый абзац</p>
    <p>Это второй абзац</p>
  </body>
</html>

Попробуйте сами!

Результат

Тег <br> устанавливает перевод строки, то есть все написанное после него, будет перенесено на новую строку. В отличие от тега <p> перед строкой пустой отступ не добавляется.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h2>Пример использования тега &lt;br&gt;</h2>
    <p> Внутри абзаца мы можем вставить тег &lt;br /&gt;, <br /> чтобы перенести часть текста на другую строку в случае необходимости.</p>
  </body>
</html>

Попробуйте сами!

Результат

В HTML5 тег <hr> используется для тематического разделения контента на странице. В предыдущих версиях HTML он использовался для создания горизонтальной линии на странице, визуально разделяя контент. В новой версии он приобрел смысловую нагрузку и определяет не только визуальный, но и тематический разрыв контента.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <h2>Футбол</h2>
    <p>Командный вид спорта, в котором целью является забить мяч в ворота соперника. </p>
    <hr>
    <h2>Баскетбол</h2>
    <p>Спортивная командная игра с мячом, в которой мяч забрасывают руками в корзину (кольцо) соперника.</p>
  </body>
</html>

Попробуйте сами!

Результат

HTML-кодов

• Фоновые коды HTML
• Коды фонового изображения
• Растянуть фоновое изображение
• Коды фоновой музыки
• Фиксированный фоновый код

• Код изображения HTML
• HTML границы изображения
• HTML-коды ссылок на изображения

• Цвет HTML
• Цветовые коды HTML
• Имена цветов HTML
• Цвет текста
• Цветовые коды фона
• Цвета поля для комментариев
• Коробка прокрутки Цвет

• Текст HTML
• HTML полужирный
• Коды шрифтов HTML
• Цветовые коды шрифта HTML
• Коды размера шрифта HTML
• Коды стиля шрифта HTML
• Коды текстовых полей HTML
• Цветовые коды текста HTML

• HTML-таблицы
• HTML-коды таблиц
• Фон таблицы HTML
• Цвет фона таблицы
• Граница таблицы HTML
• Цвет таблицы HTML
• Текст таблицы HTML

HTML-ссылки

• Основная ссылка
• HTML-коды ссылок
• Открыть ссылку в новом окне
• Всплывающее окно
• HTML-ссылка на изображение
• Ссылка электронной почты в формате HTML
• О HTML-ссылках
• CSS Hover-ссылки

• Свиток
• Коробка с цветными свитками
• Коробка для прокрутки с рамками
• Коробки для прокрутки изображений
• Горизонтальная прокрутка
• Вертикальная спираль
• Скрыть полосы прокрутки
• Позиция прокрутки деления

• Коды полей комментариев
• Рамки поля для комментариев
• Цвета поля для комментариев
• Картинки для комментариев
• Добавить комментарии к веб-сайту
• Полосы прокрутки HTML
• Скрыть полосы прокрутки

• Коды выделения CSS
• Коды выделения HTML
• Прокручиваемый текст
• Прокрутка изображений
• HTML Остановить бегущую строку
• Маркировка замедления и ускорения
• Бегущая строка (версия JavaScript)

Коды окон

• Коды закрытия окон
• Открыть ссылку в новом окне
• Коды всплывающих окон
• Полосы прокрутки HTML

Коды музыки/видео

• Создать музыкальный плейлист
• Создать музыкальный плейлист в WordPress
• Музыкальные коды HTML
• Коды фоновой музыки
• Коды HTML-видео

• Коды форм HTML
• Ввод текста HTML
• HTML-форма для отправки по электронной почте
• Почтовая форма
• Кнопка HTML
• Радиокнопка HTML

Фреймы

• Коды HTML-фреймов
• Шаблоны HTML-фреймов
• Примеры HTML-фреймов

Дополнительные HTML-коды

• Contenteditable
• Коды границ HTML
• HTML-код для цветов
• Коды комментариев HTML
• HTML-коды курсора
• Код списка HTML
• Мета-код обновления HTML
• HTML-коды перенаправления
• Перенаправление по времени

Генераторы HTML

• Онлайн-редактор HTML
• Генератор HTML-кода
• Генератор HTML-таблиц
• Генератор шатров
• Генератор музыкальных кодов
• Генератор HTML-текста
• Генератор текстовых полей

Справочник по HTML

• Учебник HTML

  Бесплатный учебник по HTML, который объясняет, как кодировать в HTML.

  В этом руководстве объясняется, что такое элементы и атрибуты HTML и как их использовать.

  Я объясняю основы, например, что вам нужно для написания HTML и как создать свою первую веб-страницу.

  Затем я расскажу о других темах HTML, включая таблицы, добавление цвета, изображения, формы, карты изображений, iframe, метатеги и многое другое.

  Я также объясняю разницу между HTML и CSS (и когда использовать каждый из них).

  Перейти к учебнику HTML

• HTML-теги

  Полный список всех элементов HTML.

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

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

  Перейти к тегам HTML

• Свойства CSS

  Полный список свойств CSS.

  Алфавитный список свойств CSS в соответствии со спецификациями W3C.

  CSS означает каскадные таблицы стилей. CSS — это стандартный способ оформления веб-страниц.

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

  Перейти к свойствам CSS

21 базовый HTML-код, который должен знать каждый, кто не является разработчиком

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

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

К счастью, последние два с половиной года, проведенные здесь, превратили меня в своего рода программиста… не создавать веб-сайт или что-то в этом роде).

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

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

 Получите обратную связь с веб-сайтом в режиме реального времени

21 Основы HTML, которые должен знать каждый, кто не является разработчиком. Как показано ниже, существует шесть различных типов. Чтобы создать заголовок, просто поместите текст в теги заголовков по вашему выбору:

2. Абзацы

Каким может быть хороший заголовок без абзаца, раскрывающего суть сообщения? Чтобы получить абзац, подобный тому, который вы сейчас читаете, просто оберните текст тегами

, как в примере ниже, и не забудьте закрыть его тегом

!

Эй, я параграф!

Эй, я параграф!

3. Ссылки

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

.

Давайте посетим замечательный веб-сайт IMPACT!

Это чудесным образом превращается в: Давайте посетим удивительный веб-сайт IMPACT!

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

4. Изображения

Это забавно. Изображения делают все лучше, и они делают ваш контент более привлекательным для читателя. Вставьте изображение следующим образом:

Тег изображения пуст, поскольку содержит только атрибуты, поэтому его не нужно закрывать. Перечисленные выше атрибуты включают «src» или URL-адрес изображения. Я также включил замещающий текст изображения (важный для целей SEO) и некоторые свойства стиля (ширину и высоту).

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

5. Разрыв строки

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

Поместите разрыв строки под этим предложением.


Поместите разрыв строки над этим предложением.

Поместите разрыв строки под этим предложением

Поместите разрыв строки над этим предложением.

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

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

6. Смелый и сильный

Чтобы сделать что-то смелое, есть два рабочих элемента кода. Однако мои разработчики говорят мне, что используется гораздо чаще, чем . Не забудьте закрыть тег !

Выделите жирным шрифтом все предложение!
Или только жирным шрифтом одно слово!

Выделите жирным шрифтом целое предложение!
Или только жирным шрифтом одним словом!

7. Курсив и выделение

Курсив и выделение текста аналогичны полужирному и усиленному тексту. Есть два элемента кода, но один используется чаще, чем другой. В этом случае будет работать, но чаще используется .

Это предложение очень красивое.

Это очень красивое предложение.

8. Подчеркнуто

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

Смотрите, мы можем подчеркнуть!

Смотри, мы умеем подчеркивать!

9.

Упорядоченные списки

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

Вот кодовое предложение для упорядоченного списка.

— это весь «упорядоченный список», а
1. — это «элемент списка». Вы можете включить столько элементов списка, сколько вам нужно.

   10. Неупорядоченные списки

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

   11. Надстрочный индекс

   Чтобы вставить в текст формат надстрочного индекса, заключите текст, который должен отображаться с надстрочным индексом, в теги ^. Вы получите ^{примерно так.}

   Товарные знаки должны быть указаны в верхнем индексе^TM.

   Торговые марки должны быть написаны в верхнем индексе ^TM .

   12.

   Подстрочный индекс

   Если вы умеете делать надстрочные индексы, вы должны знать, как подстрочные индексы. Просто используйте теги , чтобы получить текст _{, подобный этому.}

   Иногда цитаты пишутся в нижнем индексе.

   Иногда, _{упоминаний} пишутся в нижнем индексе.

   13. Горизонтальная линия

   Хотите разбить разделы страницы или статьи? Попробуйте горизонтальную линию! Просто используйте пустой элемент (не нужно его закрывать),

   ---

   .

   Вставьте горизонтальную черту между мной и предложением 2.
   

   ---

   
   Привет, я предложение 2.

    

   Вставьте горизонтальную черту между мной и предложением 2.

   ---

   Привет, я предложение 2.

   14. Выделенный или выделенный текст

   Держу пари, вы не знали, что можно выделить текст с помощью HTML-кода, не так ли? Это так здорово и так легко. Оберните текст, который нужно выделить, в теги , чтобы получить крутую выделенную функцию .

   Выделите только самые важные заметки.

   Выделите только самых важных заметок .

   15. Удаленный (перечеркнутый) текст

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

   Покормить собаку.
   Написать статью в блог.
   Приготовить ужин.

   Покормить собаку.
   Напишите мою статью в блоге.
   Приготовить ужин.

   16. Короткие и длинные цитаты

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

   Весь этот текст будет заключен в кавычки, как и остальные примеры.

   
   Я цитирую это, потому что говорю это вслух.

   Весь этот текст будет заключен в кавычки, как и в остальных примерах.
   Я цитирую это, потому что говорю это вслух.

   17. Установка определенного шрифта

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

   Не забывайте о мелких деталях, таких как знак равенства, кавычки и точка с запятой. Посмотрите примеры ниже.

   Я хочу изменить этот заголовок на шрифт Georgia.

   Я хочу изменить этот абзац на шрифт Verdana.

   Я хочу изменить этот заголовок на шрифт Georgia.

   Я хочу изменить этот абзац на шрифт Verdana.

   18. Установка определенного цвета текста

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

   Сегодня небо действительно синее.

   
   

   Огонь красновато-оранжевый.

   Сегодня небо действительно голубое.

   Огонь красновато-оранжевый.

   19. Установка определенного размера текста

   Опять же, здесь используется та же базовая логика кода, но используется элемент «размер шрифта». Укажите размеры шрифта в пикселях или px.

   Сделайте этот абзац размером 36 шрифта.

   
   

   Сделайте этот абзац размером 12 шрифта.

   Сделайте шрифт этого абзаца размером 36.

   Сделайте этот абзац шрифтом 12 размера.

   20. Настройка специального выравнивания текста

   По левому краю, по центру, по правому краю или по ширине. Как вам ваш текст? Сделайте это так, как вам нравится, с помощью «выравнивания текста».

   Этот абзац должен быть выровнен по центру.

   
   

   Этот абзац должен быть выровнен по правому краю.

   Этот абзац должен располагаться по центру.

   Этот абзац должен быть выровнен по правому краю.

   21. Столы

   Самое лучшее я оставил напоследок! Ну, я не знаю, лучший ли он, но я думаю, что это чертовски круто. HTML-код для создания таблицы может оказаться довольно сложным, но если вы освоите основы, у вас не должно возникнуть особых проблем.

   Ниже я покажу вам, как создать простую таблицу.

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

   No related posts.