Html красный текст: Атрибут face | htmlbook.ru

HTML теги для текста. Как вставить текст в HTML

Главная > Учебник HTML >

Заголовки

Как вставить текст в HTML страницу? Для этого существуют специальные HTML теги для текста.

В HTML существует шесть уровней заголовков. Они добавляются с помощью тэгов <h2> — <h6>. При этом <h2> это заголовок первого уровня, он самый большой.

Пример создания заголовков:

+

<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<h4>Заголовок третьего уровня</h4>
<h5>Заголовок четвёртого уровня</h5>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

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

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

На работу страницы количество тэгов <h2> никак не влияет. Можно их добавлять сколько угодно. А вот поисковые системы отрицательно относятся к тому, что на странице есть больше одного заголовка первого уровня. Поэтому, если Вы собираетесь продвигать свой сайт в поисковых системах, то на каждой странице должен быть только один заголовок первого уровня. Вывод: лучше сразу привыкать к тому, чтобы не ставить больше одного тэга <h2> на страницу. Ведь в HTML есть целых шетсь уровней заголовков. При любой вёрстке страницы этого вполне достаточно, чтобы выделить тэг <h2> только для одного заголовка.

Абзац

Тэг <p> создаёт абзац текста. У него есть отступы сверху и снизу для отделения одного абзаца от другого. Кроме того, есть возможность установить отступ первой строки. Всё это регулируется с помощью CSS.

<p>Абзац текста</p>

Тэг <br>

Тэг <br> это не совсем текстовый тэг. Он производит перевод строки. Если он находится внутри текста, то последующий текст переходит на новую строку. А если он находится между блоками, то он добавляет пустую строку.

Пример перевода строки:

<p>Начало текста<br>новая строка</p>

Тэг <span>

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

Для примера выделим часть текста красным цветом.

<p>Начало текста <span>красный текст</span>
продолжение текста</p>

Нужная часть текста находится внутри тэга <span>. Чтобы она была красной, тэгу установлен атрибут style, который задаёт стили. Так как работа со стилями описывается в учебнике CSS, здесь я не буду объяснять, как работает этот атрибут. Просто добавьте его в тэг, как написано в примере.

Тэг <pre>

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

<pre>текст       текст после пробелов
следующая строка
следующая строка</pre>

Выделение текста

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

Пример выделения текста:

<b>Жирный шрифт</b>
<strong>Жирный шрифт</strong>
<i>Курсивный шрифт</i>
<em>Курсивный шрифт</em>

Текст можно выделять с помощью стилей.

Другие тэги

Мы рассмотрели специальные HTML теги для текста. Но текст могут содержать и многие другие тэги, которые добавляют контент на страницу. Можно даже вставить текст вне каких-либо тэгов, он всё равно отобразится на экране. Но на практике так никто не делает, потому что вне тэгов текстом нельзя управлять. Поэтому весь текст конечно должен находиться внутри тэгов. А когда Вы изучите CSS, Вы сможете определять внешний вид текста.

htmlka — Справочник по html

Все теги ставятся в блог copy-paste‘ом
(В режиме «HTML», а не «Визуальный редактор»)

Оформление текста
(рекомендую спец. страничку Tекст):

Перечёркнутый текст: ТЕКСТ
<s> ваш текст </s>
Подчёркнутый текст: ТЕКСТ
<u> ваш текст </u>
Полужирный текст: ТЕКСТ
<b> ваш текст </b>
Полужирный крупный: ТЕКСТ
<big> ваш текст </big>
Курсивный текст: ТЕКСТ
<i> ваш текст </i>
Маленький текст: текст
<small> ваш текст </small>
Неразрывный пробел:
&nbsp;
Центрирование:

<center>ваш текст (картинка) </center>
Выравнивание текста по правому краю поста:
<div align=right> ваш текст </div>
Выравнивание текста по всей ширине поста:
<div align=justify> ваш текст </div>
Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):
<blockquote> текст </blockquote>
Бегущая строка (рекомендую Бегущая строка):

<marquee> ваша бегущая строка</marquee>
Вместо текста можно вставить картинку:

Сноска вверху: ТЕКСТ^сноска
^{ваша сноска}

Сноска внизу: ТЕКСТ_сноска
_{ваша сноска}

Линия:

ее код: <hr>
Ударение:
Cтавим после нужной буквы:
&#769;
«Закрепитель» (фиксирует текст так, как и расположите его в поле поста):

Я
  Пешу
       Лесинкой!!!

<pre>ваш текст</pre>

РАЗМЕР ШРИФТА:

Уменьшить текст: текст — 2
<font size=-2> уменьшенный текст </font>

Увеличить текст на 2 пункта: текст

<font size=+2> увеличить текст на 2 пункта </font>

Увеличить текст на 3 пункта: текст

<font size=+3> увеличить текст на 3 пункта </font>

Увеличить текст на 4 пункта: текст

<font size=+4> увеличить текст на 4 пункта </font>

ЦВЕТ ШРИФТА:

КРАСНЫЙ: красный текст
<font color=red> красный текст </font>
ЖЕЛТЫЙ: желтый текст
<font color=yellow> желтый текст </font>
ФИОЛЕТОВЫЙ: фиолетовый текст
<font color=purple> фиолетовый текст </font>

Таблица «базовых» цветов (вводим «Имя» или «Код»):

Оформление ссылок
(рекомендую спец. страницу Ссылки):

Как вставить ссылку на веб-страницу:
<a href=АДРЕС_САЙТА> ВАШ ТЕКСТ</a>

Спец. теги ЖЖ:

Элементарный жж-кат (с “Read more”):
<lj-cut> ТЕКСТ </lj-cut>
Друзья, для тегов ЖЖ я завел отдельную страницу:
htmlka.com/livejournal
На нее также можно зайти, кликнув на Livejournal вверху справа в сайдбаре.

Публикация картинок

Раздел о публикации картинок перемещен на страницу: htmlka.com/pictures
Она же в сайдбаре вверху сбоку в разделе Страницы: Изображения.

Окошечко для вставки кода, типа:
ВАШ КОД
получаем так:
<textarea rows=2 cols=60> ВАШ КОД </textarea>
где rows и cols определяют площадь окна

Такое красивое окошечко с кодом:

<textarea>ВАШ КОД</textarea>

Получаем таким образом:

<textarea style=border-right: black 2px solid; border-top: black 2px solid; background-color:dodgerblue; color:white; border-left: black 2px solid; border-bottom: black 2px solid; width: 100%;>КОДЫ </textarea>

Кнопка-ссылка на веб-страничку
Например, на эту:

<form action=https://htmlka. com target=_blank method=get><input type=submit value=htmlka></form>

Некоторые спецсимволы:

Если вы видите это: ★, ☠, ☭ — есть смысл посмотреть «Прочие» спецсимволы HTML, пока редко включаемые в официальные таблицы спецсимволов.

Разное
• Советы по работе с html
• Хитрости в ЖЖ и не только

Кнопка на этот сайт:
код для вставки этой кнопки себе:
<a href=https://htmlka.com/ target=_blank><img src=https://htmlka.com/wp-content/uploads/2009/07/butto.png border=0 alt=htmlka.com title=htmlka.com /></a>

Жирный красный текст — HTML и CSS — Форумы SitePoint

valarcher 7 октября 2008 г., 15:28

1

Привет. Есть ли код CSS для полужирного красного текста?

Я хочу текст

НЕ текст

спасибо! — Вал

рпкамп 7 октября 2008 г. , 15:33

2

Нет, вы можете сделать либо

<тип стиля="текст/CSS">
 span.bold-красный {
    красный цвет;
    вес шрифта: полужирный;
}

Небольшой текст
 

или

Некоторый текст
 

Хотя я согласен <сильный красный> было бы неплохо

SoMBrA 7 октября 2008 г., 15:33

3

Это недопустимый HTML, вы можете использовать теги со свойствами (

РайанРиз 7 октября 2008 г., 16:10

4

Лучше всего использовать семантическую разметку. Хотя специально используется для выделения текста, для этого следует использовать тег

.

Если вы хотите сделать его жирным и красным, вы можете сделать это.

 
Текст
 

И CSS для этого

 p.treeHugger
{
красный цвет;
font-weight:bold /*Вы можете сделать 700, 800 или 900 вместо полужирного, чтобы вы могли выбрать уровень жирности*/
}
 

scripting_semantics 7 октября 2008 г., 22:09

5

валархер:

Привет. Есть ли код CSS для жирного красного текста?

Мне нужен <сильный красный>текст

НЕ текст

спасибо! — Вал

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

 
...
.пловцы {
красный цвет;
вес шрифта: полужирный;
}
 

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

валархер 11 октября 2008 г., 15:13

6

Привет — нет, это не абзац, иногда в середине предложений мне нужен жирный красный текст, например. «Бесплатная доставка [выделено красным] в континентальной части США»

Думаю, я буду придерживаться сильного, span я использую для желтого блика, не хочу путать мой pb (peabrain)

спасибо! — Вал

scripting_semantics 11 октября 2008 г. , 15:55

7

валархер:

Привет — нет, это не абзац, иногда в середине предложений мне нужен жирный красный текст, например. «Бесплатная доставка [выделено красным] в континентальной части США»

Думаю, я буду придерживаться сильного, спан, который я использую для желтого блика, не хочу путать мой pb (peabrain)

спасибо! — Вал

Помните, что тег strong предназначен для сильного выделения текста. Если это не то, что вы пытаетесь передать с помощью сильного тега, то диапазон будет наиболее подходящим.

ежг 11 октября 2008 г., 16:39

8

Вы всегда можете переопределить strong в CSS

 strong {
     красный цвет;
}
 

или вы можете переопределить strong для определенных разделов

 . content сильный {
     красный цвет;
}
 

 <дел>
     
это выделено красным