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

kupi

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

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

labelHTML, HTML-код, код

Об Авторе

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

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

  1. Сергей МосквитинАвтор 20 июня 2017 Ответ
  2. Максим 11 декабря 2015 Ответ
    • Сергей МосквитинАвтор 11 декабря 2015 Ответ
      • Максим 11 декабря 2015 Ответ
  3. Мариша 17 октября 2015 Ответ
    • Сергей МосквитинАвтор 17 октября 2015 Ответ
        • Сергей МосквитинАвтор 18 июня 2017 Ответ
  4. Наталья 23 августа 2014 Ответ
    • Сергей Москвитин 27 июня 2013 Ответ
    • Сергей Москвитин 26 июня 2013 Ответ
      • Антон Куклинский 26 июня 2013 Ответ
        • Сергей Москвитин 26 июня 2013 Ответ
  5. Валерий 5 июня 2013 Ответ
    • Сергей Москвитин 5 июня 2013 Ответ
      • Валерий 7 июня 2013 Ответ
        • Сергей Москвитин 7 июня 2013 Ответ
  6. Андрей 26 мая 2013 Ответ
    • админ 26 мая 2013 Ответ
    • админ 10 мая 2013 Ответ
    • админ 10 мая 2013 Ответ
        • админ 10 мая 2013 Ответ

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

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