Оформление текста. От БЕЛОЯР 2.

Среда, 01 Сентября 2021 г. 22:08 + в цитатник

Цитата сообщения БЕЛОЯР_2

Прочитать целиком В свой цитатник или сообщество!

Все теги ставятся в блог copy-paste‘ом
(В режиме «HTML», а не «Визуальный редактор»)

Оформление текста

(рекомендую спец. страничку Tекст):

Перечёркнутый текст: ~~ТЕКСТ~~

Подчёркнутый текст: ТЕКСТ

Полужирный текст: ТЕКСТ

Полужирный крупный: ТЕКСТ

Курсивный текст: ТЕКСТ

Маленький текст: текст

Неразрывный пробел:

Центрирование:
текст (картинка) по центру
<center>ваш текст (картинка) </center>
Выравнивание текста по правому краю поста:
<div align=right> ваш текст </div>
Выравнивание текста по всей ширине поста:
<div align=justify> ваш текст </div>
Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):
<blockquote> текст </blockquote>
Бегущая строка (рекомендую Бегущая строка):
бегущая, как олень, строка
<marquee> ваша бегущая строка</marquee>
Вместо текста можно вставить картинку:

Код этой картинки:
<marquee><img src=АДРЕС_КАРТИНКИ></marquee>
Сноска вверху: ТЕКСТ^сноска
<sup>ваша сноска</sup>
Сноска внизу: ТЕКСТ_сноска
<sub>ваша сноска</sub>
Линия:

её код: <hr>

Ударение:
Cтавим после нужной буквы:
́
«Закрепитель» (фиксирует текст так, как и расположите его в поле поста):

Я
Пишу
Лесенкой!!!

<pre>ваш текст</pre>
РАЗМЕР ШРИФТА:

Уменьшить текст: текст — 2
<font size=-2> уменьшенный текст </font>
Увеличить текст на 1 пункт: текст
<font size=+1> увеличить текст на 1 пункт </font>
Увеличить текст на 2 пункта: текст
<font size=+2> увеличить текст на 2 пункта </font>
Увеличить текст на 3 пункта: текст
<font size=+3> увеличить текст на 3 пункта </font>
Увеличить текст на 4 пункта: текст
<font size=+4> увеличить текст на 4 пункта </font>
ЦВЕТ ШРИФТА:

КРАСНЫЙ: красный текст
<font color=red>красный текст</font>
ЖЁЛТЫЙ: жёлтый текст
<font color=yellow>жёлтый текст</font>
ФИОЛЕТОВЫЙ: фиолетовый текст
<font color=purple>фиолетовый текст</font>
ЗЕЛЁНЫЙ: зёленый текст
<font color=lime>зеленый текст</font>
СИНИЙ: синий текст
<font color=navy>синий текст</font>
ФУКСИЯ: фуксия текст
<font color=fuchsia>фуксия текст</font>

Ссылка: Таблица безопасных цветов

ОФОРМЛЕНИЕ ССЫЛОК

(рекомендую спец. страницу Ссылки):

Как вставить ссылку на веб-страницу:
<a href=АДРЕС_САЙТА> ВАШ ТЕКСТ</a>
Как сделать, чтобы картинка была ссылкой на веб-страницу:
<a href=АДРЕС_САЙТА><img src=АДРЕС_КАРТИНКИ></a>
Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:
<a href=АДРЕС_САЙТА target=_blank>ВАШ ТЕКСТ</a>

Окошечко для вставки кода, типа:
ВАШ КОД
получаем так:
<textarea rows=2 cols=60> ВАШ КОД </textarea>
где rows и cols определяют площадь окна
Такое красивое окошечко с кодом:
<textarea>ВАШ КОД</textarea>
Получаем таким образом:
<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>
Скрыть пост (фрагмент поста) от Яндекса:
<noindex>hidden post</noindex>
Не работает в Google.

Примеры изменения формы курсора для отдельного поста или фрагмента поста. Подведите курсор к «Ваш текст»:

Ваш текст

<div style="cursor: move;"> Ваш текст </div>

Ваш текст

<div style="cursor: help;"> Ваш текст </div>

Делаем кнопку-ссылку на страницу (с картинкой):

Код такой кнопки:
<form action="АДРЕС САЙТА" target="_blank" method="get"><button type="submit"><img src="АДРЕС КАРТИНКИ" align=absMiddle> TEXT</button></form>
СПЕЦСИМВОЛЫ

☎
☏
☏
☚
☚
☛
☛
☜
☜
☝
☞
☞
☟
☟
☀
☁
☂
☃
☄
★
★
☆
☆
☇
☇
☠
☡
☡
☢
☣
☤
☤
☥
☥
☦
☧
☧
☨
☨
☩
☩
☪
ϑ
☫
☬
☬
☭
☭
☮
☯
☸
☺
☻
☻
☼
☼
☽
☽
☾
☾
☿
☿
♀
♁
♁
♂
♃
♃
♄
♄
♅
♅
♆
♆
♇
♇
♈
♉
♊
♋
♌
♍
♎
♏
♐
♑
♒
♓
♔
♔
♕
♕
♖
♖
♗
♗
♘
♘
♙
♙
♚
♚
♛
♛
♜
♜
♝
♝
♞
♞
♟
◻
♠
♠
♡
◽
♢
◾
♣
◿
♤
♤
♥
♥
♦
♦
♧
♧
♨
♩
♩
♪
♪
♫
⒋
♬
♬
♭
♭
♮
♮
♯
♯
♰
♰
♱
♱
♲
♲
✡
卍
卍
↯
↯
✄
✄
✈

ИЗОБРАЖЕНИЯ

Если знаете адрес картинки в сети (URL) вида http://…jpg вам просто надо вставить его в код:
<img src=АДРЕС_КАРТИНКИ>
Чтоб узнать URL картинки, нужно кликнуть на нее правой кнопкой мыши.
В Хроме:

В Internet Explorer — правой кнопкой мыши — Свойства — копируем Адрес (URL)
В Mozilla Firefox — правый клик — Копировать ссылку на изображение
В Opera — правый клик — Копировать адрес изображения

Теперь подробнее:

Код любой картинки в сети в самом простом варианте, без рюшечек:
<img src=http://site/…jpg>

Уникальный адрес (URL) типа http://…jpg выдает картинке фотохостинг (специальный сайт для картинок), куда ее необходимо закачать с вашего компьютера.

По сути, любая картинка, которую вы видите в сети — вебстраничка, имеющая свой уникальный адрес, начинающийся с http://… (посмотреть его можно в свойствах картинки)

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

Запомните: Если вы удаляете картинку с хостинга (например, «фотоальбома жж»), то она исчезнет и из записи в вашем блоге!

Как сделать, чтобы текст «обтекал» картинку?

Легко — картинка слева, текст справа:
добавьте в код картинки:
align=left hspace=20
Код картинки примет вид:
<img src=АДРЕС_КАРТИНКИ align=left hspace=20>
Помни:
align=left – картинка слева, текст справа
align=right — картинка справа, текст слева
hspace=20 — расстояние между текстом и картинкой 20 пиксел по горизонтали
vspace=20 — расстояние между текстом и картинкой 20 пиксел по вертикали
Код картинки с плавным обтеканием текстом справа и снизу (или сверху):
<img src=АДРЕС_КАРТИНКИ align=left hspace=20 vspace=15>
Прекратить обтекание и вернуть текст под картинку можно тэгом <br>
Закрывать не надо, он работает один. <br> выполняет перенос на следующую строку. В блогсервисах и редакторах текста его заменяет нажатие Enter.
<br><br><br> — три пустые строки.

Вставить две и более картинки горизонтально:

<nobr>Текст (картинки)</nobr> — все, заключенное в этот контейнер будет находиться на одной строке. Применять с осторожностью, можно деформировать пост.

Регулируем расстояние меж картинками по-горизонтали

С помощью «неразрывного пробела»:  

Расстояние, равное 8 пробелам будет выглядеть так:
       
Вставляется меж кодов картинок, есс-но

Если надо всплывающую подсказку при наведении курсора на картинку, как здесь: — введите в код картинки

title=»гав-гав»

Чтоб быстро вставить картинку с другого сайта войдите в «Свойства» картинки на этом сайте, скопируйте ее URL и вставьте её в код

Изменить размер картинки можно с помощью атрибутов width (ширина) и height (высота). Вставьте в код картинки, например, width=300 и ваша картинка будет шириной 300 пикселов, высота подгонится пропорционально.