Форматирование текста. HTML.

Здравствуйте уважаемые начинающие веб мастера.

В этой статье мы рассмотрим, как при помощи html тегов, меняется внешний вид текста, его цвет, шрифт, размер, и другие параметры.

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

Но наша задача — познакомиться с языком html, и следуя ей давайте посмотрим, какие теги принимают участие в форматировании текста

Вообще то, многие многие из этих тегов, по версии html 5, считаются уже устаревшими, и вместо них рекомендуется использовать стили, но тем не менее знать их всё равно нужно.

Так как переход на пятую версию произошёл совсем недавно, то Вы непременно с ними столкнётесь, и будете знать, как они работают.

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

<DOCTYPE HTML PUBLIC" —//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/html4/loose.dtd">
<html>>
<head>>
<meta http-equiv=" Content-Type" content=" text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>
  Где искать Бога, и откуда ждать дьявола? Да только в себе самом, и из себя самого! Туточки они оба. А то, небеса-а-а, подземелья.
  Кто дал Баскову погоняло «золотой голос России», а Киркорову «король эстрады»? У нас они всегда были Филя и Петушок — золотой гребешок.
  Почему святые угодники и великомученики подобны звездам на небе, а попса и телеведущие — звезды?
  Журналисты — акулы пера, а питаются только тем, что другие настряпают. Наверное все таки — шакалы, ну кто покруче — гиены. Тоже полезное зверье кстати.
  Когда же во власть будут назначать в приказном порядке? Чтоб у назначаемого одна мысль вертелась в голове — «во попал».
</body>
</html>

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

Начнём с тега

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

Вот так будет отображаться в браузере приведённый выше код, заключённый в тег pre.

<DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head>
<meta http-equiv="Content-Typecontent="text/html; charset=utf-8"> 
<title>Документ без названия</title> 
<body> 
Где искать Бога, и откуда ждать дьявола? Да только в себе самом, и из себя самого! 
Туточки они оба. А то - небеса-а-а, подземелья. Кто дал Баскову погоняло «золотой голос России», а Киркорову «король эстрады»? У нас
они всегда были Филя и Петушок - золотой гребешок. Почему святые угодники и великомученики подобны звездам на небе,
а попса и телеведущие - звезды? Журналисты - акулы пера , а питаются только тем, что другие настряпают.
Наверное все таки - шакалы, ну кто покруче - гиены.
Тоже полезное зверье кстати. Когда же во власть будут назначать в приказном порядке? Чтоб у назначаемого одна
мысль вертелась в голове - «во попал». </body> </html>

Идём дальше

<p></p> — создаёт абзац, блочный элемент. Открывает и закрывает каждый абзац.

Пример его работы Вы видите постоянно. Все абзацы начинающиеся с новой строки на этом сайте (да и на всех других), создаются ‘этим тегом.

<em></em> — преображает прямой текст в курсив, встраиваемый элемент.

Пример:

<p>Где искать Бога, и откуда ждать дьявола? Да только в себе самом,
и из себя самого! <em>Туточки они оба.</em> А то, небеса-а-а, подземелья.

Результат:

Где искать Бога, и откуда ждать дьявола? Да только в себе самом,
и из себя самого! Туточки они оба. А то, небеса-а-а, подземелья.

<strong></strong> — делает текст жирным. Встраиваемый элемент.

Пример:

<p>Почему святые угодники и великомученики <strong>подобны звездам на небе</strong>, а попса и телеведущие — звезды?

Результат:

Почему святые угодники и великомученики подобны звездам на небе, а попса и телеведущие — звезды?

<br> — перенос строки, одиночный тег, вставляется в любой части текста.

Пример

<p>Текст текст<br> текст текст<br> текст текст<br> текст текст</p>

Результат:

Текст текст
текст текст
текст текст
текст текст

<font color=" #" ></font> — окрашивает текст в выбранный цвет, встраиваемый элемент. В значении атрибута color вставляется код цвета. Выбрать можно здесь.

Пример:

<p><font color=" #974528" >текст текст</font><br><font color="#282c97">текст текст</font><br><font color="#25c31e">текст текст</font><br><font color="#d24453">текст текст</font><br></p>

Результат:

текст текст
текст текст
текст текст
текст текст

<sub> — создаёт нижний регистр, встраиваемый элемент
Пример:

<p>H<sub>2</sub>O</p>

Результат:

H2O

<sup> — создаёт верхний регистр, встраиваемый элемент

Пример

<p>348<sup>2</sup></p>

Результат:

3482

line-height — устанавливает межстрочный интервал в тексте. Интервал задаётся во всех мерах длины (em, px, %, pt), где em и % вычисляются от размера шрифта, а px и pt — произвольный размер. Если применить значение normal, то браузер задаст интервал автоматически.

<kbd> — выделяет элемент текста моноширным (телеграфным) шрифтом.

Пример:

        Телеграмма
<kbd>Грузите апельсины бочками тчк Бендер тчк</kbd>

Результат:

        Телеграмма
Грузите апельсины бочками тчк Бендер тчк

<bdo> — задаёт направление текста справа налево. Применяется с атрибутом dir="rtl"

Пример:

<bdo dir=" rtl">А мы пишем справа налево</bdo>

Результат:

А мы пишем справа налево

<big> — увеличивает размер шрифта. Применяется, в основном, для выделения одного слова, или словосочетания в предложении.

<small> — уменьшает размер шрифта.

Пример:

Тигр <big>большой</big>, а кошка <small>маленькая</small>.

Результат:

Тигр большой, а кошка маленькая.

<mark> — выделяет текст жёлтым фоном

Пример:

Обратите внимание на эту <mark>удивительную</mark> вещь.

Результат:

Обратите внимание на эту удивительную вещь.

<u> — создаёт подчёркнутый текст
<s> — создаёт зачёркнутый текст

Пример:

<u>Цвет</u> неба был <s>голубым</s> бирюзовым.

Результат:

Цвет неба был голубым бирюзовым.

<marquee> — создаёт движущийся текст. Подробно об этом в статье Красивая заглавная буква и бегущая строка.

Неужели не осталось вопросов? Спросить


Перекур

— Во время секса мой муж орёт как ненормальный. Мне так неудобно перед соседями!
— А ты бы ему рот прикрывала
— Так не успеваю! Он только войдёт, только увидит и сразу орать!

Геолог спрашивает чабана:
— Отец, скажи, а сколько твои овцы дают за сезон шерсти?
— Белые или черные? — спрашивает чабан.
— Ну, черные.
— Черные — 2 килограмма.
— А белые?
— И белые — 2 килограмма.
— А скажи, отец, сколько им нужно корма в день?
— Черным или белым? — уточняет чабан.
— Ну, черным.
— Черным — 1 килограмм.
— А белым? — не унимается геолог.
— И белым — 1 килограмм.
Геолог в бешенстве:
— Ты что, меня заморачиваешь? Почему все время спрашиваешь черные или белые, ведь результат один и тот же?!!!!
— Ну-у, так черные ж мои… — oтвечает чабан.
(геолог понимающе)
— А-а-а, А белые?
— И белые мои…

Вставляем видео и делаем ему рамочку < < < В раздел > > > Прямая линия HTML

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

4 комментария на «Форматирование текста. HTML.»

  1. stariс говорит:

    Спасибо за отзыв. Не могу утверждать на 100%, но по моему Ваше предположение насчёт картинки верно. Я тоже в своё время поискал красивые шрифты, но в Google Fonts выбор кириллицы небольшой, а другие шрифты,браузеры не видят.

  2. Александр говорит:

    Добрый день!
    Я к сожалению не нашел как можно изменить сам шрифт текста, сделать например текст заголовка не обычным ровным или наклонённым, а более красивым… или это лучше вставить как картинку обработанного текста ?

    п.с. Спасибо вам большое за ваши уроки !! Учиться по ним — одно удовольствие !:)

  3. stariс говорит:

    Привет. Вы, видимо, сами того не подозревая нашли ошибку в коде. В комментарии <—Текст статьи—>, перед закрывающей скобкой, лишний пробел и точка. Уберите их и всё будет нормально. А я код исправлю. Каюсь, моя невнимательность, а Вам спасибо.

  4. Олег говорит:

    Здравствуйте! Скопировал Ваш образец html кода в теме каркас страницы. Сделал все, как написано. В итоге не отображается текст страницы. В notepad начиная с»Текст статьи» и до «Сайдбар» все зеленого цвета. Что может быть не так?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *