Мобильный LiveInternet Оформление поста | Василий_Веселов

Авторизация

Дневник Василий_Веселов Лента друзей - Дневник - Полная версия

Оформление поста 13-02-2011 08:12 к комментариям - к полной версии - понравилось!

Некоторые неудобства есть, но скопировать код и вставить в пост гораздо лучше, чем стучать по клавишам:)

<b>Ваш текст</b>   
<strong>Ваш текст</strong>  
<i>Ваш текст</i>   
<em>Ваш текст</em>  
<u>Ваш текст</u>  
<s>Ваш текст</s>  
<sub>Ваш текст</sub>  
<sup>Ваш текст</sup>   

Размер шрифта.
<big>Ваш текст</big>
<small>Ваш текст</small>
<font size="+1">Ваш текст</font>
<font size="-1">Ваш текст</font>
<font size="4">Ваш текст</font>
<font size="2">Ваш текст</font>

Цвет текста.
<font color="cyan">Ваш текст</font> 
black, white, red, green, blue, yellow, magenta, cyan, purple, lime, maroon, auqa, navy, fuchsia.
<font color="#00FFFF">Ваш текст</font> 

Гарнитура шрифта.
<font face="Arial">Ваш текст</font>
<font face="MS Mincho, Verdana">Ваш текст</font>   
Arial, Comic Sans MS, Courier New, Georgia, Tahoma, Times New Roman, Verdana.

Цитаты.
<cite>Ваш текст</cite>  
<q>Ваш текст</q>  "Ваш текст"
<blockquote>Ваш текст</blockquote>  

Списки.
<ul><li>пункт 1</li><li>пункт 2</li></ul>         * пункт 1
                                                                      * пункт 2
<ol><li>пункт 1</li><li>пункт 2</li></ol>        1. пункт 1
   					                             2. пункт 2
Форматирование.
span и div.
Текст1<span style="padding-left: 10px;">Текст2</span>   Текст1 Текст2  
margin-top, margin-right, margin-bottom, margin-left и padding-top, padding-right, padding-bottom, padding-left
Текст1<div style="padding-left: 10px;">Текст2</div>   Текст1
							                             Текст2
<br />  Новая строка
<hr />  Горизонтальная линия ____________________
<p>Ваш текст</p>   p - задание абзацев,  
<p align="left | center | right | justify">...</p> 
<pre>Ваш текст</pre>  pre - блок предварительно форматированного текста. 
<p style="text-align: center;">Ваш текст</p>  центр
<p style="text-indent: 20;">Ваш текст</p>  отступ

Теги h1 .. h6. заголовки
<h1>Ваш текст</h1> 

Бегущая строка - marquee.
<marquee hspace="3" height="50" bgcolor="#ffff99" width="300" vspace="3" style="text-align: center; color: magenta;" behavior="alternate" direction="down" loop="2" scrollamount="10" scrolldelay="100" truespeed=""> а я бегу 1 раз вниз и 1 раз вверх</marquee>

behavior - Задает тип движения содержимого контейнера. Значения: behavior="alternate | scroll | slide"
alternate - содержимое перемещается между правым и левым краем элемента.
scroll - перемещается в направлении, заданным параметром direction, затем скрывается за пределами области, после чего начинает движение с начала.
slide - содержимое перемещается в направлении, заданным параметром direction, доходит до края области и останавливается.
bgcolor - Цвет фона. Подробнее о цветах было выше.
direction - Указывает направление движения содержимого контейнера. Значения: direction="down | left | right | up"
height и width - высота и ширина области прокрутки.
hspace и vspace - горизонтальные и вертикальные поля вокруг содержимого.
loop - задает, сколько раз будет прокручиваться содержимое (натуральное число). -1 - бесконечное повторение.
scrollamount - скорость движения содержимого (в пикселах).
scrolldelay - величина задержки в миллисекундах между движениями.
truespeed - отменяет встроенный ограничитель скорости при низких значениях параметра scrolldelay.

Вставка изображений.
<img height="62" border="0" align="center" width="100" alt="текст, который виден без картинки" title="Текст при наведении на картинку" src="http://img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg" />

<img src="http://img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_S"/> <a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg" target=_blank border="0">[показать]</a> основнfz часть 

src (source) - адрес, где расположено изображение.
height и width - размеры показываемого изображения. Никто не запрещает растянуть или уменьшить изображение. В оригинальном размере картинку всегда можно увидеть, нажав "открыть изображение". Ну и пользователю она будет загружаться вся, т.е. сделав кодом из картинки 1000*800 маленькую 100*80 вы ничего не улучшите - грузиться она будет так же долго и съест столько же трафика.
alt (alternative) - альтернативный текст изображения, который виден при просмотре без отображения картинок (когда экономят трафик).
title - текст, видимый при наведении мышкой на картинку.
align - знакомый нам параметр выравнивания. Как я уже говорил в разделе про абзацы и строки, выравнивание будет действовать только внутри абзаца. Представьте, что каждый абзац - это строка в таблице. Ну так вот если вставить картинку в первую строку, та станет высотой не меньше картинки, но не залезет на вторую. Поэтому следите за тем, куда вставляете их)
hspace и vspace - задают отступ от изображения до окружающего контента
border - толщина рамки вокруг изображения.

Ссылки.
<a target="_blank" title="Это ссылка на картинку из примера про картинки, откроется она в новом окне" href="http://img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg">анкор</a> анкор

href - адрес, куда нужно перейти
title - текст, появляющийся в качестве подсказки при наведении на ссылку
target - параметр отвечающий за то, где открывать ссылку - в том же окне или новом.
Если target не задан, то открывается в том же окне (эквивалент _self). Из возможных значений нас интересует еще и _blank - открытие в новом окне/вкладке.
анкор - анкором называют текстовую часть ссылки.
На самом деле, вместо этого слова мы могли бы туда поставить код картинки из предыдущего примера и ... получить баннер - кликабельную картинку.
Ну а также, мы теперь можем сделать из баннера просто картинку, убрав код, отвечающий за ссылку.

Рамки для обрамления текста.
<div style="border:1px dashed black;">Ваш текст</div>
dotted dashed solid double groove ridge inset outset

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

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

Дневник Оформление поста | Василий_Веселов - Василий_Веселов | Лента друзей Василий_Веселов / Полная версия Добавить в друзья Страницы: раньше»