Vsevidno.ru

Даже если текста 2 нет, закрывающий тег лучше ставить.

К оглавлению.

Начертание текста.

<b>Ваш текст</b> Ваш текст

<strong>Ваш текст</strong> Ваш текст

Как видите, результат не отличается, но только внешне. А так, это две разных логических структуры.

b(bold) - визуальное выделение текста, Strong - логическое выделение.

Логическое выделение нужно для того, чтобы указывать машинам (поисковым системам), что является главным

в тексте. Собственно, принцип расставления strong и em (о котором на абзац ниже) схож с разбиением текста на абзацы при написании работ.

То есть, каждый сам решает, что следует выделить. Использовать оба тега сразу конечно же не надо.

<i>Ваш текст</i> Ваш текст

<em>Ваш текст</em> Ваш текст

Как видите, результат снова не отличается. Но как и в случае с b/strong, i(italic) - визуальное выделение, em(emphasis) - логическое.

Также для обозначения терминов, которые первый раз используются в тексте можно использовать тег <dfn>Ваш текст</dfn>

<u>Ваш текст</u> Ваш текст

<s>Ваш текст</s> Ваш текст

u(underline) - подчекрнутый, s(strike) - зачеркнутый текст. Можно использовать и <strike>Ваш текст</strike>

Иногда для наглядности версий текста используют тег <del>Ваш текст</del> для обозначения текста, который был удален. Отображается перечернкутым.

Для добавленного текста используется <ins>Ваш текст</ins>. Отображается подчеркнутым.

<abbr title="Unified Model Language">UML</abbr> UML

<acronym title="Unified Model Language, Универсальный язык моделирования">UML</acronym> UML

abbr(аббревиатура) - сокращенное написание слова или группы слов. acronym(акроним) - устоявшееся сокращение, которое применяется как самостоятельное слово. Но это не запрещает использовать acronym (но не abbr) для описания расшифровки термина.

<sub>Ваш текст</sub> Ваш текст | обычный текст

<sup>Ваш текст</sup> Ваш текст | обычный текст

sub(subscript) и sup(superscript) - верхний и нижний индекс.

Можно использовать для написания формул (sub) и для обозначения сносок (sup).

К оглавлению.

Размер шрифта.

<big>Ваш текст</big> Ваш текст | обычный размер

<small>Ваш текст</small> Ваш текст | обычный размер

big - увеличивает размер шрифта на 1 пункт относительно размера текста документа по умолчанию, small - уменьшает на единицу.

<font size="+1">Ваш текст</font> Ваш текст | обычный размер

<font size="-1">Ваш текст</font> Ваш текст | обычный размер

Параметр size отвечает за размер шрифта. Значение может быть как относительным ( сколько-то пунктов), так и абсолютным.

Допустимый диапазон: от 1 до 7. По умолчанию размер равен 3. Одинаковые размеры разных шрифтов визуально могут отличаться.

<font size="4">Ваш текст</font> Ваш текст | обычный размер

<font size="2">Ваш текст</font> Ваш текст | обычный размер

Как видим, 4 в данном случае эквивалентно +1, а 2 - -1. Как я уже говорил, это связано с стандартным размером равным 3.

К оглавлению.

Цвет текста.

<font color="cyan">Ваш текст</font> Ваш текст

<font color="#00FFFF">Ваш текст</font> Ваш текст

Цвет текста можно задать двумя способами: по названию, либо по шестнадцатеричному коду.

Стандартные цвета: black, white, red, green, blue, yellow, magenta, cyan, purple, lime, maroon, auqa, navy, fuchsia.

Вот некоторые коды распространенных цветов.

#000000

#993300

#333300

#003300

#003366

#000080

#333399

#333333

#800000

#FF6600

#808000

#008000

#008080

#0000FF

#666699

#808080

#FF0000

#FF9900

#99CC00

#339966

#33CCCC

#3366FF

#800080

#969696

#FF00FF

#FFCC00

#FFFF00

#00FF00

#00FFFF

#00CCFF

#993366

#C0C0C0

#FF99CC

#FFCC99

#FFFF99

#CCFFCC

#CCFFFF

#99CCFF

#CC99FF

#FFFFFF

#9999FF

#993366

#FFFFCC

#CCFFFF

#660066

#FF8080

#0066CC

#CCCCFF

#000080

#FF00FF

#FFFF00

#00FFFF

#800080

#800000

#008080

#0000FF

К оглавлению.

Гарнитура шрифта.

<font face="Arial">Ваш текст</font> Ваш текст

<font face="MS Mincho, Verdana">Ваш текст</font> Ваш текст

Некоторые часто используемые шрифты: Arial, Comic Sans MS, Courier New, Georgia, Tahoma, Times New Roman, Verdana.

Как видите, в параметре face можно указать несколько шрифтов через запятую.

Если первый шрифт не найдет браузером, будет использован следующий из списка.

Цитаты.

<cite>Ваш текст</cite> Ваш текст

<q>Ваш текст</q> Ваш текст

<blockquote>Ваш текст</blockquote> Ваш текст

cite используется для логического выделения цитат. Текст браузером внутри тега выделяется курсивом.

q выделяет текст кавычками. Все браузеры (кроме некоторых версий IE) подставляют кавычки корректно.

blockquote: текст отображается как выровненный блок с отступами слева и справа (около 40 пикселей), а также с отбивкой сверху и снизу.

К оглавлению.

Списки.

<ul><li>пункт 1</li><li>пункт 2</li></ul> пункт 1 пункт 2

<ol><li>пункт 1</li><li>пункт 2</li></ol> пункт 1 пункт 2

Для конструирования списков сначала определяется их тип: нумерованный(тег ol) или маркированный(тег ul), а потом описываются элементы (тег li).

Вложенные списки имеют место быть, но на лиру не поддерживаются. Но есть небольшая хитрость)

К оглавлению.

Форматирование.

span и div.

тег span можно использовать внутри других тегов для задания элементам стилей, отличных от общего.

тег div является блочным элементом и предназначен для выделения фрагмента с целью изменения вида содержимого.

Текст1<span style="padding-left: 10px;">Текст2</span> Текст1Текст2

Текст1<div style="padding-left: 10px;">Текст2</div> Текст1 Текст2

Для задания отступов используется свойство css style и некоторые его параметры:

margin - отступы блока относительно остальных элементов. padding - отступы внутри блока для текста, чтобы он не прилипал к границам

Так как CSS для написания постов изучать смысла нет, можно ограничиться заданием отдельных границ:

margin-top, margin-right, margin-bottom, margin-left и padding-top, padding-right, padding-bottom, padding-left

Как раз левое поле и задано в приведенном коде. Значение - в пикселах.

<br> Новая строка

<hr> Горизонтальная линия

Когда вы работаете в расширенном редакторе, по нажатию Enter происходит не переход на новую строку, а в новый абзац. В связи с этим возникают

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

а не создавать абзацы. Новая строка в расширенном редакторе - Shift+Enter или же просто <br> в коде.

<p>Ваш текст</p> Ваш текст

<pre>Ваш текст</pre> Ваш текст

p - задание абзацев, pre - блок предварительно форматированного текста.

Внутри pre запрещено использование изображение и тегов для изменения шрифта.

Важным свойстров абзаца (p) является выравнивание - align. <p align="left | center | right | justify">...</p> - соответсвенно используем 1 из параметров.

justify - выравнивание по ширине.

  текст внутри обоих этих тегов можно выравнять. Делается это при помощи свойства CSS - text-align.

Также есть параметр text-indent, задающий отсуп первой строки текста в блоке.

<p style="text-align: center;">Ваш текст</p> Ваш текст

<p style="text-indent: 20;">Ваш текст</p> Ваш текст

Теги h1 .. h6.

задают заголовки 6 разных уровней (1 - самый большой). Являются блочными элементами. Есть свойство align.

<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="<noindex><a title="http://www.liveinternet.ru/click?http://img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg"" rel="nofollow" href="http://vsevidno.ru/vision/link/aHR0cDovL3d3dy5saXZlaW50ZXJuZXQucnUvY2xpY2s/aHR0cDovL2ltZy1mb3RraS55YW5kZXgucnUvZ2V0LzMzMTAvbGV4aW5jb3JwLmJlLzBfMWUxNzJfYTU2NjQ2NjlfWFMuanBnJnF1b3Q7" target="_blank">http://img-fotki.yandex.ru/get/3310...69_XS.jpg"</a></noindex> />

Естесвенно основной частью является <img src="http://img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg">

Собственно, чтобы показать картинку нам хватит и этого кода.

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> Ваш текст

Для задания вида рамки используется атрибут border, который задается для стиля блока div.

Сначала задается толщина рамки, затем тип, потом цвет. Таблица цветов и стандартные имена уже приводились.

Возможные типы рамок:

dotted	dashed	solid	double
groove	ridge	inset	outset

И конечно же никто не запрещает использовать в стиле div другие атрибуты.

Например, padding и margin, речь о которых шла выше.

К оглавлению.

Форма для текста.

Они-то и использовались везде)

<textarea style="text-align: center;" readonly="readonly" cols="45" rows="2">Ваш текст</textarea> Ваш текст

textarea - область с текстом. rows - количество строк, cols - кол-во столбцов (символов в строке)

readonly - чтобы случайно пользователь не изменил код и не перезагружал страничку.

также есть параметр disabled, запрещающий выделять и копировать код из textarea.

Наверх

Lexincorp.ru: Всё самое интересное и полезное

Последние новости