Теги для текста css: Теги strong и b, важность и выделение — Разметка текста — HTML Academy

Разное 

HTML-теги для работы с текстом

<h2>, <h3>, <h4>, <h5>, <H5>, <H6>.

Всего 6 видов заголовков — от h2 до H6. Тегу h2 соответствует самый большой заголовок, тегу H6 — самый маленький. Закрывающий тег обязателен.

Атрибуты:

align — Выравнивает заголовок в соответствии со следующими значениями:

center — По центру.

left — По левому краю.

right — По правому краю.

title — Всплывающая подсказка.

Пример:


……..


А это уже заголовок в теге <H6>

Тег <p> создает новый параграф.

Атрибуты:

align — Выравнивает параграф относительно одной из сторон документа.

left — выравнивание по правому краю (По умолчанию ).

right — выравнивание по правому краю.

center — выравнивание по центру.

justify — выравнивание по ширине.

title — Всплывающая подсказка.

Пример:

Первый параграф.

Второй параграф.

Контейнер <b> </b> выделяет текст жирным шрифтом.

Аналогичный тег — <strong> </strong>, он тоже выделяет текст жирным. Но его не рекомендуется использовать больше 1-2 раз на странице — при большом количестве тегов <strong> на странице поисковые системы могут воспринять это как спам.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Это текст выделенный жирным шрифтом..

Контейнер <strong> </strong> выделяет текст жирным шрифтом.

Рекомендуется использовать этот тег для выделения наиболее значимого ключевого слова (или словосочетания) для акцентирования на нем внимая посковых систем.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Эта страница посвящена HTML-тегам для работы с текстом. Главная мысль страницы выделена тегом <strong>.

Тег <hr> добавляет в документ горизонтальную линию.

Закрывающий тег не обязателен.

Атрибуты:

size — Устанавливает толщину линии.

width — Устанавливает ширину линии в пикселах или процентах.

noshade — Создает линию без тени.

color — Задает линии определенный цвет.

Пример:

<hr noshade=»noshade» color=»#00FF33″ />.

Тег <br /> переводит текст на новую строку.

Закрывающий тег не обязателен.

Пример:

Очень длинный текст, который нужно разбить на две строки.

Очень длинный текст,
но уже разбитый на две строки вставкой тега <br /> после слова «текст,».

Контейнер <nobr> </nobr> запрещает перевод строки.

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

Пример:

Очень длинный текст, который не переносится на две строки и заключен в контейнер <nobr> </nobr>.

Контейнер <sub> </sub> делает подиндекс.

Набираем формулу H<sub>2</sub>0. Результат в примере.

Пример:

H2O.

Контейнер <sup> </sup> делает надиндекс.

Набираем формулу X<sup>2</sup> = 4. Результат в примере.

Пример:

X2 = 4.

Контейнер <big> </big> выводит более крупный, чем окружающий текст.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Это более крупный текст.

Контейнер <small> </small> выводит более мелкий, чем окружающий текст.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Это более мелкий текст.

Контейнер <i> </i> выделяет текст курсивом.

Вместо него рекомендован Контейнер <em> </em>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <i> </i>.

Контейнер <em> </em> выделяет текст курсивом.

Рекомендован вместо контейнера <i> </i>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <em> </em>.

Тег <s> делает текст зачеркнутым.

Закрывающий тэг </s> обязателен. Не ркомендован для использования.

Пример:

Это текст заключенный в контейнер <s> </s>.

Тег <tt> выделяет текст моноширинным шрифтом.

Закрывающий тэг </tt> обязателен.

Вместо него рекомендован контейнер <kbd> </kbd>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <tt> </tt>.

Тег <kbd> выделяет текст моноширинным шрифтом.

Закрывающий тэг </kbd> обязателен.

Рекомендован вместо контейнера <tt> </tt>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <kbd> </kbd>.

Контейнер <u> </u> делает текст подчеркнутым.

Не рекомендован для использования.

Пример:

Это простой текст.

Это текст заключенный в контейнер <u> </u>.

Тег <font> определяет цвет, размер и выводимый шрифт.

Закрывающий тег </font> обязателен.

color — определяет цвет текста.

face — определяет гарнитуру шрифта.

size — определяет размер текста в пределах от 1 до 7, где 1 — самый мелкий шрифт. По умолчанию равен 3.

Пример:

<font color=»#0000CC» face=»Verdana» size=»5″></font>.

<font color=»#CA0000″ face=»Times New Roman» size=»2″></font>.

Тег <pre> предварительно отформатированный текст.

Преформатированный текст отображается моношириным шрифтом.

<pre>предварительно отформатированный текст, 
с сохранением последовательно поставленных пробелов.</pre>

.

Тег <marquee> заставляет текст перемещаться из стороны в сторону.

Закрывающий тег </marquee> обязателен.

Атрибуты:

behavior — Определяет вид движения.

alternate — Колебательные движения налево и направо.

scroll — Перемещение текста в направлении, указанном в direction. Достигнув края экрана, надпись появляется снова с противоположной стороны.

slide — Схоже с scroll, но текст перемещается только один раз и останавливается.

direction — Определяет направление движения.

down — Движение вниз.

left — Движение справа налево (по умолчанию).

right — Движение слева направо.

up — Движение вверх.

Пример:

<marquee behavior=»alternate» direction=»right»></marquee>

Тег <q> предназначен для включения в документ короткой цитаты.

Закрывающий тег </q> обязателен.

<q>Цитата</q>.

Цитата.

Тег <blockquote> предназначен для включения в документ длинной цитаты.

Закрывающий тег </blockquote> обязателен. Тег <blockquote> создает отступы с обеих сторон и отделяется от остального текста пустыми строками.

Какой-то текст,

здесь цитата

и текст продолжается.

Контейнер <address> </address> применяют для указания сведений об авторе.

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

Пример:

Информация об авторе!

.

Тег <cite> используется для цитат.

Закрывающий тег </cite> обязателен. Обычно отображается курсивом.

Пример:

Какой-то текст, (здесь цитата) и текст продолжается.

Контейнер <code> </code> применяют для выделения программного кода, отображаемого на странице.

Oтображается моноширинным шрифтом.

Пример:

Таким образом отобразится текст в контейнере <code> </code>.

Выравнивание текста | CSS | CodeBasics

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

Заголовок, расположенный по центру

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

CSS позволяет выровнять текст, используя свойство text-align с 4 основными значениями:

  • left — по левому краю. Используется по умолчанию
  • center — по центру
  • right — по правому краю
  • justify — по ширине
<p>Текст по левому краю</p>
<p>Текст по центру</p>
<p>Текст по правому краю</p>
<p>Текст с выравниванием по ширине. Используется редко, так как оставляет неравномерные пробелы между словами</p>

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.justify {
  text-align: justify;
}

Текст по левому краю

Текст по центру

Текст по правому краю

Текст с выравниванием по ширине. Используется редко, так как оставляет неравномерные пробелы между словами. Такой приём часто используется в книжной вёрстке, так как не создаются «рваные края» в тексте

Задание

Добавьте в редактор параграф с классом important и выровняйте его по центру. Стили укажите в теге <style>

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

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

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

Прочитал урок — ничего не понятно 🙄

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

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

Полезное

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

CSS — Happy Coding

tutorialhtmlcss

  • CSS
  • Синтаксис CSS
  • Селекторы элементов
  • Селекторы ID
  • Селекторы классов
  • Внешние таблицы стилей
  • Встроенные стили
  • Каскадный
  • Узнать больше
  • Практика

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

Вы видели несколько примеров тегов, которые вы можете использовать, например,

тег абзаца , тег заголовка

и тег изображения . Вы знаете, как искать новые теги, читая W3Schools и Mozilla Developer Network, чтобы найти другие теги, и вы можете использовать все эти знания для написания HTML-страницы.

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

, сообщающий браузеру, что содержимое является абзацем, или тег

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

Это может показаться противоречием, но подумайте об этом следующим образом: тег

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

Браузер имеет некоторые настройки по умолчанию, но эти настройки не очень интересны.

Если вы хотите, чтобы ваш контент выглядел интереснее, используйте CSS.

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

Начнем с HTML-страницы без стилей, без CSS:

 

<голова>
Моя первая веб-страница

<тело>
 
Удачного программирования
 

Привет, мир!

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

Редактор кода ?

См. Pen от Happy Coding (@KevinWorkman) на CodePen.

Если вы хотите стилизовать эту HTML-страницу, вы можете использовать CSS, добавив тег