Здравствуйте уважаемые начинающие веб мастера.
В этой статье мы рассмотрим, как при помощи html тегов, меняется внешний вид текста, его цвет, шрифт, размер, и другие параметры.
В основном, функция форматирования текста возложена и осуществляется при помощи текстовых редакторов. В них такой набор шрифтов и их расцветок, а так-же расцветок фона, и других различных прибамбасов, который даже представить трудно.
Но наша задача — познакомиться с языком html, и следуя ей давайте посмотрим, какие теги принимают участие в форматировании текста
Вообще то, многие многие из этих тегов, по версии html 5, считаются уже устаревшими, и вместо них рекомендуется использовать стили, но тем не менее знать их всё равно нужно.
Так как переход на пятую версию произошёл совсем недавно, то Вы непременно с ними столкнётесь, и будете знать, как они работают.
Для этого знакомства нам потребуется какой нибудь текст, который нужно вставить в каркас страницы.
" 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-Type" content="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
Спасибо за отзыв. Не могу утверждать на 100%, но по моему Ваше предположение насчёт картинки верно. Я тоже в своё время поискал красивые шрифты, но в Google Fonts выбор кириллицы небольшой, а другие шрифты,браузеры не видят.
Добрый день!
Я к сожалению не нашел как можно изменить сам шрифт текста, сделать например текст заголовка не обычным ровным или наклонённым, а более красивым… или это лучше вставить как картинку обработанного текста ?
п.с. Спасибо вам большое за ваши уроки !! Учиться по ним — одно удовольствие !:)
Привет. Вы, видимо, сами того не подозревая нашли ошибку в коде. В комментарии <—Текст статьи—>, перед закрывающей скобкой, лишний пробел и точка. Уберите их и всё будет нормально. А я код исправлю. Каюсь, моя невнимательность, а Вам спасибо.
Здравствуйте! Скопировал Ваш образец html кода в теме каркас страницы. Сделал все, как написано. В итоге не отображается текст страницы. В notepad начиная с»Текст статьи» и до «Сайдбар» все зеленого цвета. Что может быть не так?