HTML – код для текста

Приветствую вас друзья на блоге Moiinteresy.ru!


Сегодня статья называется HTML-код для текста. Каждый нормальный блоггер работая над очередной статьей всегда стремится свою статью оформить так, чтобы она не только была написана человеческим языком, но и имела визуальный привлекательный вид. В чем же состоит суть HTML кода для текста мы и рассмотрим в данной статье.
HTML - код для текста

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

HTML – код для текста


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

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

Сразу хочу вас предупредить, что все HTML-коды для текста которые будут применены в этой статье рабочие их можно скопировать, отредактировать (т.е. нужно вставить свой текст или картинку) под себя и применить у себя на странице с текстом (т.е. вставит в нужное место своего контента, обязательно код вставляется в редакторе “ТЕКСТ”).

НАЧНЕМ НАШУ СТАТЬЮ С ТЕКСТОВОГО КОДА

Делаем линию:

<hr>

Пример линии ниже:


еще линия

<hr align=center width=60%>

пример линии:


ещё линия

<hr noshade>

пример линии:


еще линия

<hr size=5 color="#FF00FF">

пример линии:


еще линия

<hr color="#00B344">

пример линии:


еще линия

<hr noshade  align="center" width="3" size="50">

пример линии:


еще код

<hr color="black" size="3" style="border: dashed 4pt; border-color: aqua ">

пример полученного:


еще код

<p align=center style=color:blue;>~~~~~~~~~~~~~~~~~~~~~~~~</p>

пример:

~~~~~~~~~~~~~~~~~~~~~~~~

Перенос по строке вниз

<br/>

 

Выравнивание текста HTML-кодом

 
Исходный код для выравнивания текста по левому краю

<p style="text-align: left;"><span style="color: #008000;">Текст выровнен по левому краю</span></p>

Пример выравнивания текста по левому краю:

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

Исходный код для выравнивания текста по центру краю

<p style="text-align: center;"><span style="color: #ff00ff;">Текст выровнен по центру краю</span></p>

Пример выравнивания текста по центру:

Текст выровнен по центру краю

Исходный код для выравнивания текста по правому краю

<p style="text-align: right;"><span style="color: #008000;">Текст выровнен по правому краю</span></p>

Пример выравнивания текста по правому краю:

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

 

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

 

Текст зачеркнутый по середине

<s>Текст зачеркнутый по середине</s>

Текст подчеркнутый снизу

<u>Текст подчеркнутый снизу</u>

Текст выделенный жирным

<b>Текст выделенный жирным</b>

Маленький шрифт текста

<samp>Маленький шрифт текста</samp>

Увеличенный шрифт текста

<big>Увеличенный шрифт текста</big>

Шрифт текста курсивом

<i>Шрифт текста курсивом</i>

Шрифт текста выделенный жирным курсивом

<b><i>Шрифт текста выделенный жирным курсивом</i></b>

Шрифт текста выделенный жирным курсивом и подчеркнутый

<u><b><i>Шрифт текста выделенный жирным курсивом и подчеркнутый</i></b></u>

Уменьшенный шрифт текста

<small>Уменьшенный шрифт текста</small>

Сноска вверху текста sup

Сноска вверху текста <sup>sup</sup>

Сноска внизу текстаsub

Сноска внизу текста<sub>sub</sub>

 
 

Меняем вид шрифта с помощью текстового кода:

 

Вот как сделать шрифт этого текста Monotype Corsiva
 

<span style="font-family: Monotype Corsiva;">Вот как сделать шрифт этого текста Monotype Corsiva</span>

 
Цвет текста — красный
 

<font color="FF0000">Цвет текста — красный</font>

 
Шрифт Monotype Corsiva красного цвета
 

<font face="Monotype Corsiva" size="+2" color="FF0000">Шрифт Monotype Corsiva красного цвета</font>

 
Зеленый текст в красной рамке
 

<span style="border:2px solid red; padding:3px;"><span style="color:green;">Зеленый текст в красной рамке</span></span>

 
Цветной текст с цветным фоном
 

<span style="color: #ff0000;"><span style="color: #ff0000;"><span style="background-color: yellow; color: blue; padding: 3px;">Цветной текст с цветным фоном</span></span> </span>

 
Цветной текст с цветным фоном в цветной рамке
 

<span style="background-color: yellow; color: blue; padding: 3px; border: 3px solid red;">Цветной текст с цветным фоном в цветной рамке</span>

 
Текст, подчеркнутый красным пунктиром
 

<span style="border-bottom: 2px dashed red;">Текст, подчеркнутый красным пунктиром</span>

 
Текст, подчеркнутый зелеными точками
 

<span style="border-bottom: 3px dotted lime;">Текст, подчеркнутый зелеными точками</span>

 
Текст, подчеркнутый двойной красной чертой
 

<span style="border-bottom: double red;">Текст, подчеркнутый двойной красной чертой</span>

 
Текст, окаймленный разноцветным пунктиром
 

<span style="border-style:dashed;border-top-color:blue;border-bottom-color:red;padding:5px;">Текст, окаймленный разноцветным пунктиром</span>

 
Текст в двойной рамке без фона
 

<span style="border-style: double; padding:3px;">Текст в двойной рамке без фона</span>

 
Цветной текст в двойной цветной рамке
 

<span style="border-style: double; color: green; padding:3px;"><span style="color:blue;">Цветной текст в двойной цветной рамке</span></span>

 
Ваш текст в объемной 3D-рамке
 

<span style="border-width:thick; border-style:groove; padding:4px; border-color:#FF3300"> Ваш текст в объемной 3D-рамке</span>

 
 


 

Блоггеру на заметку:

Тег span (строчный), который применяется во всех приведенных выше примерах можно заменять на div (блочный элемент). Рассмотрим на примере таблицы расположенной выше):

Ваш текст в объемной 3D-рамке

 

Размер блока div задается атрибутами:

div style=width:200px; height:50px;

где width:200px; — ширина блока 200 пикселей,

height:50px; – высота блока 50 пикселей

В итоге получаем:

Ваш текст в объемной 3D-рамке

 

<div style="width:200px; height:50px; border-width:thick; border-style:groove; padding:4px; border-color:#FF3300"> Ваш текст в объемной 3D-рамке </div>

 


 

Воспользуйтесь сервисами для подбора цвета:

№ 1№ 2№ 3

 


 

А вот всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к тексту):

Ваш очень офигенный текст

<p style="line-height: 1.5em;" title="А вот всплывающее окошко с пояснением к тексту"><b>Ваш очень офигенный текст</b></p>

 

Изменение расстояния между словами

 

<div style="word-spacing: 20px;">Изменение расстояния между словами</div>

 

Расстояние между словами еще больше

 

<div style="word-spacing: 40px;">Расстояние между словами еще больше</div>

 

Изменение расстояния между буквами

 

<div style="letter-spacing: 10px;">Изменение расстояния между буквами</div>

 

Можно приподнять фразу на 5 пикселей над текстом

 

<p style="line-height: 1.5em;">Можно приподнять <span style="position: relative; top: -5px;">фразу</span> на 5 пикселей над текстом</p>

 

Можно опустить фразу на 5 пикселей ниже текста

 

<p style="line-height: 1.5em;">Можно опустить <span style="position: relative; bottom: -5px;">фразу</span> на 5 пикселей ниже текста</p>

 
Выделяем цитату в тексте.
 
Пример: Еще Владимир Высоцкий говорил:
 

Не потеряй веру в тумане, да и себя не потеряй!

 

<div style="font-size: 92%; color: #000080; background-color: #f0f0ff; border: #000080 1px solid; padding: 2px 4px 4px 3px;">Не потеряй веру в тумане, да и себя не потеряй!</div>

 
Текст на фоне картинки:
 

Томас Эдисон сказал: «У меня не было рабочих дней и дней отдыха. Я просто делал и получал от этого удовольствие».

 

<div style="font-size: 15px; font-weight: bold; font-family: Georgia; color: red; padding: 8px; background-image: url('https://moiinteresy.ru/wp-content/uploads/2013/05/background-image-2.gif');">Томас Эдисон сказал: «У меня не было рабочих дней и дней отдыха. Я просто делал и получал от этого удовольствие».</div>

 
Лучше взять небольшую картинку — она будет автоматически повторяться, пока будет продолжаться текст. С помощью атрибута width и height в % или px (пикселах) задаем необходимый нам размер фоновой области

 


 
А вот эффект с подсветкой текста (наведите курсор на текст):
может работать не везде
 
А вот эффект с подсветкой текста
 

<font onmouseover="style.backgroundColor='pink'; style.cursor='hand'" onMouseOut="style.backgroundColor='silver';">А вот эффект с подсветкой текста</font>

 


 
Можно поместить текст в таблицу состоящую из двух колонок:
 

текст левой колонки

текст правой колонки
<table width=100%>
<tr><td width=50%>
текст левой колонки
<td width=50%>
текст правой колонки
</table>

 


 
А вот таким образом можно указать автора под скопированным текстом (цитатой) с всплывающей доп. информацией при наведении курсора и это будет наверное правильно

Как пример:

© С.Москвитин

 

<div style="line-height: 1.5em;" align="right"><strong><cite title="Блог Сергея Москвитина Moiinteresy.ru">© С.Москвитин</cite></strong></div>

 


 

А так выглядит тег-закрепитель (он фиксирует текст в порядке его расположения в поле поста):

 
Всех
            с 
                    Праздником!

 

<pre style="font-family: 'Arial Black';"> 
Всех
            с 
                    Праздником!</pre>

 


 
А вот еще текст, который обтекает другим текстом:

А у нас уже лето… Повсюду светит яркое солнце, и стоит жара.

А в Питере – снова идет дождь; можно смело босиком бегать по лужам, подставляя ладони брызгам, переливчатым, как алмаз. Улыбнись случайному прохожему и он ответит тебе тем же.

 

<p style="padding-right: 15px; margin-top: 0px; float: left; margin-bottom: 3px; width: 40%; color: red; text-align: justify;">А у нас уже лето… Повсюду светит яркое солнце, и стоит жара.</p>
<p style="text-align: justify;">А в Питере – снова идет дождь; можно смело босиком бегать по лужам, подставляя ладони брызгам, переливчатым, как алмаз. Улыбнись случайному прохожему и он ответит тебе тем же.</p>

 


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

 
А сейчас для подсветки кода я использую плагин
 
Вот еще окшко, только цветное:
 

 
А вот КОД для ее изготовления:
 

<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://moiinteresy.ru" target="_blank" method="get"><input type="submit" value="МОЙ БЛОГ"></form>

 


 
Для того чтобы вы могли быстро написать цветной текст вот так:     МОИ      ПОЗДРАВЛЕНИЯ!!!

Перейдите на специальный

 
На сегодня все. В статье про HTML – код для текста мы рассмотрели ряд кодов с помощью которых вы можете сделать ваш текст привлекательным.  В следующей статье я поделюсь с вами    еще фишками с помощью, которых вы сможете экспериментировать над  украшением и оформлением вашего текста. 

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

С вами был ваш коллега и помощник Сергей Москвитин!


И еще одно изречение..
изречение-html

 
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (Пока оценок нет)
Загрузка...
  label, ,

Об Авторе

Автор и администратор этого сайта. С 1974 года Радиолюбитель, Радионаблюдатель, Радиохулиган, Закончил ТРТИ, Командир группы Комсомольского оперативного отряда, Начальник техбюро по изготовлению Магнитофона Ростов 105 - 113, Служба безопасности, Полковник таможенной службы. С 2012 года - Интернет, ЮТУБ, блоггинг, маркетинг, инфобизнес, безопасность.

28 комментариев

  1. Сергей МосквитинАвтор 20 июня 2017
  2. Сергей МосквитинАвтор 18 июня 2017
  3. Сергей Гвоздев дед 17 июня 2017
  4. Максим 11 декабря 2015
  5. Сергей МосквитинАвтор 11 декабря 2015
  6. Максим 11 декабря 2015
  7. Сергей МосквитинАвтор 17 октября 2015
  8. Мариша 17 октября 2015
  9. Сергей МосквитинАвтор 23 августа 2014
  10. Наталья 23 августа 2014
  11. Сергей Москвитин 27 июня 2013
  12. Евгений Ванин 26 июня 2013
  13. Сергей Москвитин 26 июня 2013
  14. Антон Куклинский 26 июня 2013
  15. Сергей Москвитин 26 июня 2013
  16. Антон Куклинский 26 июня 2013
  17. Сергей Москвитин 7 июня 2013
  18. Валерий 7 июня 2013
  19. Сергей Москвитин 5 июня 2013
  20. Валерий 5 июня 2013
  21. админ 26 мая 2013
  22. Андрей 26 мая 2013
  23. админ 10 мая 2013
  24. Александр 10 мая 2013
  25. админ 10 мая 2013
  26. админ 10 мая 2013
  27. Сергей Гвоздев дед 10 мая 2013
  28. Александр 10 мая 2013

Оставить комментарий

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

Subscribe without commenting