Авторизация

Дневник Я-Мышка Лента друзей - Дневник - Полная версия

HTML - Text 17-10-2011 16:02 к комментариям - к полной версии - понравилось!

Это цитата сообщения merlinwebdesigner Оригинальное сообщение

HTML - Text

HTML TAGS ДЛЯ ОФОРМЛЕНИЯ ТЕКСТА

Оформляем Текст...

~~Your text~~	<s>Your text</s>
Your text	<u>Your text</u>
Your text	<b>Your text</b>
`Your text`	<samp>Your text</samp>
Your text	<big>Your text</big>
Your text	<i>Your text</i>
*Your text*	<b><i>Your text</i></b>
*Your text*	<u><b><i>Your text</i></b></u>
Your text	<small>Your text</small>
TEXT^sup	TEXT<sup>sup</sup>
TEXT_sub	TEXT<sub>sub</sub>

Your text

Your text

Your text

Супермелкий шрифт. Например: Я тебя люблю Или: Я тебя люблю
<font style="font-size:7pt;">ТЕКСТ</font> Минимальное значение font-size:1pt (самый мелкий)
Аналогично делается суперкрупный шрифт.

Меняем вид шрифта:
Your very intresting text
<font face="Monotype Corsiva">ТЕКСТ</font>
Your very intresting text
<font color="FF0000">ТЕКСТ</font>

typetester.org – полезный сайт для желающих поэкспериментировать с текстом

Your very intresting text

СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ

Синий текст подчеркнут красной линией

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

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

Посмотреть сочетаемость цветов

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

<span style="background-color:dodgerblue; color:white; 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:#FF5730"> Ваш текст в объемной 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:#FF5730"> Ваш текст </div>

Аббревиатура: HTML

<acronym title="Hiper Text Markup Language">HTML</acronym>

Так называемый «спойлерный» текст, проявляющийся при его выделении. Типа:
"А убийцей в том кино был дворецкий"
<span style="background-color:#FFFFFF; color:#FFFFFF">спойлерный текст</span>

«буквица»: В некотором царстве…
<font size="+4" face="Monotype Corsiva" color="#0000FF">В</font> <i>некотором царстве…</i>

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

Ваш креативный текст

<p title="Пояснительный текст">Основной текст</p>

Текст «наоборот»:
Повернуть текст задом-наперед
<bdo dir="rtl">Повернуть текст задом-наперед</bdo>

Расстояние между словами

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

Больше расстояние между словами

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

Расстояние между буквами

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

А в данном случае, задано расстояние между строками по вертикали пятьдесят пикселов

<div style="line-height:50px;">Расстояние между строками</div>

Невидимый фрагмент записи (интересно, что невидим даже в OperaMini, хотя мобильные браузеры игнорируют многие стилевые настройки):

<div style="visibility: hidden;">Невидимый фрагмент записи</div>

Еще способ скрыть текст:

<!– Ваша служебная невидимая пометка –>

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

Приподнять <span style="position: relative; top:-5px;">фразу</span>

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

Опустить <span style="position: relative; bottom:-5px;">фразу</span>

Повернуть текст на 90 градусов (работает только в IE):

Раз, два, три, четыре, пять, шесть, семь

<span style=writing-mode:tb-rl;>Текст</span>

Следующий трюк, напротив, работает только в Opera и Mozilla FF:

Раз, два, три, четыре, пять, шесть

<span style=text-decoration:blink;>TEXT</span>

Выделение цитаты в тексте.
Пример:
Еще поэт-романтик Новалис писал в Средние Века:

Любимая! Ты – аббревиатура Вселенной.

<div style="border-right: #000080 1px solid; padding-right: 4px; border-top: #000080 1px solid; padding-left: 3px; font-size: 92%; padding-bottom: 4px; border-left: #000080 1px solid; color: #000080; padding-top: 2px; border-bottom: #000080 1px solid; background-color: #f0f0ff"> ТЕКСТ ЦИТАТЫ</div>

Написать текст, имея фоном картинку:

/img527.imageshack.us/img527/7710/black41hj8.gif"" target="_blank">http://img527.imageshack.us/img527/7710/black41hj8.gif");"> Светить всегда, светить везде – до дней последних донца! Светить – и никаких гвоздей!

<div style="font-size: 15px; font-weight: bold; font-family: Georgia; color: white; padding: 8px; background-image:url("URL картинки");"> ТЕКСТ</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>

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

© J.Shaffer 1928

<div align=right><cite title="Информация">© АВТОР</cite></div>

“Тег-закрепитель” (фиксирует текст так, как и расположите его в поле поста):

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

<pre>ваш текст</pre>
Есть особенность. Текст, заключенный в тег pre отобразится в окне браузера так называемым "моноширинным" шрифтом. Обычно в качестве такого шрифта используется Courier New. Если вас это не устраивает, воспользуйтесь встроенными стилями и назначьте свой шрифт:

C
     Днем
               Рождения!

<pre style="font-family:'Arial Black'">ваш текст</pre>

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

Первые ситкомы, как правило, снимались в студии, перед публикой, поэтому для них характерен закадровый смех.

Ситком устроен по-другому, нежели фильм, где стиль игры более реалистичный. Обычно на съемках 95% ситкомов есть живая публика, аудитория, смех которой и звучит за кадром. Это преувеличенный стиль игры, голоса должны передавать больше эмоций и быть просто громче; много не вполне естественной мимики и жестов.
<p style="padding-right: 15px; margin-top: 0px; float: left; margin-bottom: 3px; width: 30%; color: blue;">Текст внутри</p> Обтекающий текст

Быстро написать так: Мои поздравления!!!
Можно ЗДЕСЬ

Facebook | Yandex.ru | Twitter | WordPress

[256x24]

Рубрики:

Советы Любознательному. Дело техники. Жизнь, после смерти..? Бесплатные Online Сервисы Photoshop Для Вас Женщины!

Серия сообщений "Теги HTML":
Часть 1 - Бесплатные библиотеки, огромный выбор.
Часть 2 - В помощь работе с HTML кодами (тегами)
...
Часть 8 - Основные Теги (немного отвлечемся)
Часть 9 - 20 примеров возможностей HTML5
Часть 10 - HTML - Text
Часть 11 - HTML - Безопасные цвета
Часть 12 - HTML - Таблица кодов цветов и коды в RGB
...
Часть 25 - Сервисы для CSS Разработчиков #3 (Free OnLine Service)
Часть 26 - Приложения для Web Дизайнеров (Free OnLine Service)
Часть 27 - Инструменты для подбора цвета

вверх^ к полной версии понравилось! в evernote

Комментарии (1):

merlinwebdesigner 18-10-2011-06:44 удалить

Неплохая помощь в оформление постов.)

Обратиться - Ответить - К полной версии

Комментарии (1): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник HTML - Text | Я-Мышка - Дневник Я-Мышка | Лента друзей Я-Мышка / Полная версия Добавить в друзья Страницы: раньше»

HTML TAGS ДЛЯ ОФОРМЛЕНИЯ ТЕКСТА

Оформляем Текст...

Меняем вид шрифта:
Your very intresting text
<font face="Monotype Corsiva">ТЕКСТ</font>
Your very intresting text
<font color="FF0000">ТЕКСТ</font>

typetester.org – полезный сайт для желающих поэкспериментировать с текстом

Посмотреть сочетаемость цветов

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

Рамку на всю ширину поста.

Размеры блока div задаются атрибутами:
div style=width:200px; height:50px;
где width:200px; – ширина блока 200 пикселей,
height:50px; - высота блока 50 пикселей

Получим:

Аббревиатура: HTML

Так называемый «спойлерный» текст, проявляющийся при его выделении. Типа:
"А убийцей в том кино был дворецкий"
<span style="background-color:#FFFFFF; color:#FFFFFF">спойлерный текст</span>

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

Ваш креативный текст

Текст «наоборот»:
Повернуть текст задом-наперед
<bdo dir="rtl">Повернуть текст задом-наперед</bdo>

Расстояние между словами

Больше расстояние между словами

Расстояние между буквами

А в данном случае, задано расстояние между строками по вертикали пятьдесят пикселов

Невидимый фрагмент записи (интересно, что невидим даже в OperaMini, хотя мобильные браузеры игнорируют многие стилевые настройки):

Еще способ скрыть текст:

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

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

Повернуть текст на 90 градусов (работает только в IE):

Раз, два, три, четыре, пять, шесть, семь

Следующий трюк, напротив, работает только в Opera и Mozilla FF:

Раз, два, три, четыре, пять, шесть

Выделение цитаты в тексте.
Пример:
Еще поэт-романтик Новалис писал в Средние Века:

Написать текст, имея фоном картинку: