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

kupi

Приветствую вас друзья на блоге 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

Спасибо Вам за то, что поделились статьей в социальных сетях!

 

 
561
 
RSS-рассылка
введите свой e-mail: Нажимая на кнопку, я даю согласие на обработку персональных данных
 
 

HTMLHTML-кодкод

About The Author

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

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

  1. Сергей Москвитин

    Друзья наконец то исправил статью и немного добавил нового кода. Теперь для подсветки кода использовал плагин. Надеюсь, что теперь код слетать не будет.Успехов Вам в вашем творчесте.

    Ответить
  2. Мариша

    Сергей, благодарна за материал. Все очень доступно и понятно написано, а главное - вовремя найдено мной во всемирной паутине!

    Ответить
    • Сергей Москвитин

      Я рад, что вам понравилась моя статья "HTML - код для текста". Но вот после некоторых изменений на блоге стали неправильно отображаться некоторые коды, но возможно в ближайшее время я их исправлю. Заходите в гости на мой блог http://moiinteresy.ru буду рад.

      Ответить
      • Сергей Гвоздев дед

        17 июня 2017 года. Пожалуй, уже все коды отображаются не правильно. Например:

        <div align=left> Текст выровнен по правому краю </div>

        И таких примеров масса. Даже зло берёт.

      • Сергей Москвитин

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

  3. Наталья

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

    Ответить
  4. Евгений Ванин

    Сергей огромное спасибо за фишки с кодом , у меня как раз проблемма с оформлением текста на блоге , всё корявинькое . Теперь буду редактировать и доводить до ума при помощи ваших кодов . Ещё раз огромное спасибо .

    Ответить
    • Сергей Москвитин

      Евгений я рад, что вам понравилась статья "HTML — код для текста". Берите и применяйте для этого я собрал эти коды и написал статью. Буду рад вас видеть в гостях на блоге. Подписывайтесь на обновления блога я еще готовлю порцию интересных на мой взгляд кодов. Как соберу напишу еще статью.

      Ответить
  5. Антон Куклинский

    Ну вы тут очень постарались, Сергей! Прямо экспресс-курс по html выдали в одной статье! Причем бесплатно. 😀 Очень полезно для начинающих! Да и сам кое-что для себя усвоил. 🙂
    Но лично я давно пишу статьи через Windows Live Writer, поэтому редко вручную редактирую код, только в исключительных случаях. Я считаю, что если разработчики создают спец. программы для облегчения нашей работы, то нужно этим пользоваться.

    Ответить
    • Сергей Москвитин

      Да Антон я как-то попробовал да мне что-то не пошло. Я как-то привык все ручками. Но наверное надо еще раз попробовать.

      Ответить
      • Антон Куклинский

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

      • Сергей Москвитин

        Антон ты это правильно сказал. Главное получать удовольствие от самого процесса. Мне просто пока нравится копаться и в коде поста и в кодах движка, тем. Я ведь пока начинаю процесс изучения блогосферы. Мне все хочется самому попробовать ручками. Я так привык в жизни. Да и гражданская специальность наложила отпечаток. Лучше самого себя никто не сделает. И чтобы в дальнейшем кому-то, что-то доверить надо знать самому. А для этого надо все пощупать своими ручками.

  6. Валерий

    Хорошая подборка и все в одном месте! Действительно, такую шпаргалку надо держать под рукой

    Ответить
    • Сергей Москвитин

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

      Ответить
      • Сергей Москвитин

        Спасибо Валера. Рад тебя видеть на блоге. Я у тебя бываю часто.

    • админ

      С точки зрения SEO все нормально. Многие продвинутые блогеры используют разные HTML — коды для текста. Эта статья по запросу HTML — код для текста находится в поисковой выдаче Яндекса на 7 позиции, а неделю назад была где-то в 30. Я думаю во всем должна быть золотая середина.

      Ответить
    • админ

      Да Сергей пользуйтесь. Подписывайтесь на обновления будут еще разные шпаргалки.

      Ответить
  7. Александр

    Сергей,я давно страдаю незнанием таких мелочей,а html пока не когда учить.
    Статья очень помогла.Целый час я все копировал и сразу опробовал на своём сайте.
    Большего всего понравилось "Делаем линию: — ",до этого я делал так-------- 🙂 Еще не знал,но давно хотел узнать, как по левому или правому краю текст расположить.Думаю это и к банерам подойдет.Хотя 3Д ранки не подошли...А жаль 🙁
    Теперь в закладки эту статью и не раз еще вернусь посмотреть.
    Еще можно добавить как картинки,кнопки,счетчики или банера расположить в один ряд - БАННЕРБАННЕР
    пример у меня на странице ttp://razvivaysyasam.ru/uprazhneniya 🙂
    Да,Сергей,там в двух местах элементов в тегах не хватает " (люди копировать будут и не поймут,почему не получилось)

    Ответить
    • админ

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

      Ответить
      • Александр

        Странно, я один,но скопировал и вставил в прошлом комментарии попробую еще раз: код для выравнивания текста по правому краю — не хватает < (Не хватает треугольника закрывающего в конце,а второй я уже и сам найти не могу,но точно помню что был и причем такой же косяк.
        Может ты уже исправил? 😉

      • админ

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

Leave a Reply

Your email address will not be published.