HTML коды для сайта

Понедельник, 23 Июля 2012 г. 10:19 + в цитатник

HTML коды для сайта

Text

~~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-size:1pt (самый мелкий)
Аналогично делается суперкрупный шрифт.

Меняем вид шрифта:
Your very intresting text

Your very intresting text

На заметку: 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>

Сервисы для подбора цвета:
№ 1 | № 2 | № 3

Аббревиатура: 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>

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

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

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


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

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


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

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

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

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

Ситком устроен по-другому, нежели фильм, где стиль игры более реалистичный. Обычно на съемках 95% ситкомов есть живая публика, аудитория, смех которой и звучит за кадром. Это преувеличенный стиль игры, голоса должны передавать больше эмоций и быть просто громче; много не вполне естественной мимики и жестов.

Надеюсь Вам понравилось? Cadmii

Серия сообщений "Скрипты и HTML коды":
Для сайта.Для дневника. Для рамок.Для флеш. Для плееров. Для видео. Разное.
Часть 1 - Советы по ведению дневника от L-Day
Часть 2 - HTML коды для сайта
Часть 3 - Как защитить свои посты от плагиата
Часть 4 - Как заполнить мета теги для каждой статьи своего сайта
...
Часть 7 - Кнопка с подсветкой и пояснением. Код
Часть 8 - Новый Код для You Tabe
Часть 9 - HTML коды в картинках. Юмор.

Рубрики:

Как вести дневник

рекомендации, коды, пособие для дневника, прочее.

Метки: HTML коды для сайта

Процитировано 210 раз
Понравилось: 56 пользователям

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] 2 [Новые]

zahariya обратиться по имени Понедельник, 23 Июля 2012 г. 10:35 (ссылка)

Cadmii, ....приветик!!! Это для меня?????))))))))))))

Ответить С цитатой В цитатник

Понедельник, 23 Июля 2012 г. 10:40ссылка

Cadmii

Приветик!!! Где же ты пропадала......Я скучала!!!!!!Ты ушла по английски!!!!!!!
Конечно для тебя эти кодики..........учись!!!!
К сожалению мы с тобой сегодня общаться не сможем днем, только вечером. Сегодня я занята крупными делами- поеду к дочери поливать цветы, она в отъезде .

Ответить С цитатой В цитатник Обратиться по имени

Супер_Гарнюня обратиться по имени Понедельник, 23 Июля 2012 г. 10:40 (ссылка)

Cadmii, Я только началась немного разбираться в кодах. Мне так нравиться!!!!!!!!!!!!

Ответить С цитатой В цитатник

Понедельник, 23 Июля 2012 г. 10:42ссылка

Cadmii

Да!!Да!!! Даже гордость появляется, когда с любым кодом можешь общаться на ТЫ!

Ответить С цитатой В цитатник Обратиться по имени

Понедельник, 23 Июля 2012 г. 10:45ссылка

Супер_Гарнюня

Cadmii, Как приятно, когда, родственная душа тебя понимает!!!!!

Генератор плееров

Ответить С цитатой В цитатник Обратиться по имени

Понедельник, 23 Июля 2012 г. 10:46ссылка

Cadmii

И я такого мнения!!! Цемки!!!!

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 24 Июля 2012 г. 10:17ссылка

Дениза

А я читаю про эти коды, и никак не могу понять, что нажимать и как ими пользоваться. Ну просто китайская грамота для меня. Ой, видимо не осилю их к сожалению, а на практике показать некому((((.

Ответить С цитатой В цитатник Обратиться по имени

Вторник, 24 Июля 2012 г. 10:26ссылка

Cadmii

Для начала скопируйте код который хотите оформить. Вставьте код в текст сообщения. Там где написано например "пояснительный текст" вставьте свои слова. Нажмите на окошко "Источник" справа вверху окна рамки. Увидите результат . Не понравится, сделайте по другому. Не бойтесь. Хуже не будет. Ничего плохого не произойдет. Запись всегда можно удалить. Самое главное чтобы все буквы кода были без пробелов. Просто внимательно смотрите тот код который взяли. Есть пробел-ставьте,нет пробела-значит его нет. Кавычки, тире,точка- здесь все имеет значение. Просто внимательно смотрите сначала на код. Вы все увидите!!!! Все получится!!!

Ответить С цитатой В цитатник Обратиться по имени

zahariya обратиться по имени Понедельник, 23 Июля 2012 г. 10:47 (ссылка)

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