Изучаем НTML

Понедельник, 04 Марта 2013 г. 11:33 + в цитатник

Цитата сообщения _LexIncorp_

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

<p>
<strong>Изучаем HTML, о котором все забыли. Теги. Оформление постов. Ответы на вопросы.</strong><br />
 </p>
<div style="background-color: rgb(245, 245, 245);">
<p style="text-align: left;">
Самое популярное сообщение на лиру, которое набрало больше 10 тысяч цитат, посвящено кодам html. Всё в нем хорошо, да вот только объяснений мало. А ведь с сопроводительной информацией объем можно было бы уменьшить, рассказав какие параметры за что отвечают.<br />
Писать про абсолютно все теги, которые можно использовать - бессмысленно: не хватит места, времени и желания. И, главное, мало кому нужно абсолютно всё.<br />
Ну что же, поехали. Пост написан <a href="http://www.lexincorp.ru/" style="text-decoration: none;" target="_blank">LexIncorp</a>. Цитировать и ссылаться не запрещено.</p>
<hr />
<p style="text-align: left;">
Не отрицая возможности возникновения вопросов, предлагаю следующее. Благо, нововведения лиру это позволяют.<br />
Вы оставляете вопрос в комментарии, ставите галочку "Опубликовать комментарий и ссылку в моем дневнике", ваш вопрос дублируется у вас в блоге. У меня появляется время, я иду к вам и отвечаю у вас на поставленный вопрос по теме поста.<br />
Для чего это? Чтобы не загромождать комментарии тут и чтобы ответы на ваши вопросы были у вас).</p>
<hr />
<p>
<a name="t_top" target="_blank"></a></p>
<p style="text-align: center;">
<big><strong>Оглавление</strong><br />
<a href="#t_more" style="text-decoration: none;" target="_blank">Прячем текст под кат</a><br />
<a href="#t_text" style="text-decoration: none;" target="_blank">Начертание текста</a><br />
<a href="#t_size" style="text-decoration: none;" target="_blank">Размер шрифта</a><br />
<a href="#t_color" style="text-decoration: none;" target="_blank">Цвет текста</a><br />
<a href="#t_garn" style="text-decoration: none;" target="_blank">Гарнитура шрифта</a><br />
<a href="#t_quot" style="text-decoration: none;" target="_blank">Цитаты</a><br />
<a href="#t_list" style="text-decoration: none;" target="_blank">Списки</a><br />
<a href="#t_form" style="text-decoration: none;" target="_blank">Форматирование</a><br />
<a href="#t_marquee" style="text-decoration: none;" target="_blank">Бегущая строка</a><br />
<a href="#t_img" style="text-decoration: none;" target="_blank">Вставка изображений</a><br />
<a href="#t_href" style="text-decoration: none;" target="_blank">Ссылки, баннеры</a><br />
<a href="#t_lines" style="text-decoration: none;" target="_blank">Рамки для текста</a><br />
<a href="#t_textarea" style="text-decoration: none;" target="_blank">Форма для кода</a></big></p>
<p style="text-align: center;">
Прежде чем начать изучение материала, кое-что поясню. Чтобы зайти с улицы в комнату, сначала надо зайти в квартиру, а потом уже в комнату. Также, чтобы выйти на улицу из комнаты, сначала мы выходим из нее, потом из квартиры.<br />
К чему это я? К тому, что первым делом надо закрывать тот тег, который открыли последним. (исключение составляет тег ката).<br />
И еще: не бойтесь экспереминтировать. Html не может убить ваш компьютер и стереть информацию)<br />
</p>
<p>
<a name="t_more" style="text-decoration: none;" target="_blank"></a></p>
<p style="text-align: center;">
<strong><big>Кат</big></strong>.<br />
(Прячем текст, как это сделано с большей частью сообщения)</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;">текст1 [more=далее]текст, который прячем[/more] текст2</textarea><br />
текст1 <acronym title="тут будет ссылка на пост, в котором и поставлен more">далее</acronym> текст2</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Даже если текста 2 нет, закрывающий тег лучше ставить.</p>
<p>
<a name="t_text" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Начертание текста</big></strong>.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><b>Ваш текст</b></textarea><br />
<b>Ваш текст</b></td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><strong>Ваш текст</strong></textarea><br />
<strong>Ваш текст</strong></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Как видите, результат не отличается, но только внешне. А так, это две разных логических структуры.<br />
b(bold) - визуальное выделение текста, Strong - логическое выделение.<br />
Логическое выделение нужно для того, чтобы указывать машинам (поисковым системам), что является главным<br />
в тексте. Собственно, принцип расставления strong и em (о котором на абзац ниже) схож с разбиением текста на абзацы при написании работ.<br />
То есть, каждый сам решает, что следует выделить. Использовать оба тега сразу конечно же не надо.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><i>Ваш текст</i></textarea><br />
<i>Ваш текст</i></td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><em>Ваш текст</em></textarea><br />
<em>Ваш текст</em></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Как видите, результат снова не отличается. Но как и в случае с b/strong, i(italic) - визуальное выделение, em(emphasis) - логическое.<br />
Также для обозначения терминов, которые первый раз используются в тексте можно использовать тег <dfn>Ваш текст</dfn></p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><u>Ваш текст</u></textarea><br />
<u>Ваш текст</u></td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><s>Ваш текст</s></textarea><br />
<s>Ваш текст</s></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
<em>u</em>(underline) - подчекрнутый, <em>s</em>(strike) - зачеркнутый текст. Можно использовать и <strike>Ваш текст</strike><br />
Иногда для наглядности версий текста используют тег <del>Ваш текст</del> для обозначения текста, который был удален. Отображается перечернкутым.<br />
Для добавленного текста используется <ins>Ваш текст</ins>. Отображается подчеркнутым.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><abbr title="Unified Model Language">UML</abbr></textarea><br />
<abbr title="Unified Model Language">UML</abbr></td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><acronym title="Unified Model Language, Универсальный язык моделирования">UML</acronym></textarea><br />
<acronym title="Unified Model Language, Универсальный язык моделирования">UML</acronym></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
<em>abbr</em>(аббревиатура) - сокращенное написание слова или группы слов. <em>acronym</em>(акроним) - устоявшееся сокращение, которое применяется как самостоятельное слово. Но это не запрещает использовать acronym (но не abbr) для описания расшифровки термина.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><sub>Ваш текст</sub></textarea><br />
<sub>Ваш текст</sub> | обычный текст</td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><sup>Ваш текст</sup></textarea><br />
<sup>Ваш текст</sup> | обычный текст</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
<em>sub</em>(subscript) и <em>sup</em>(superscript) - верхний и нижний индекс.<br />
Можно использовать для написания формул (sub) и для обозначения сносок (sup).</p>
<p>
<a name="t_size" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Размер шрифта</big></strong>.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><big>Ваш текст</big></textarea><br />
<big>Ваш текст</big> | обычный размер</td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><small>Ваш текст</small></textarea><br />
<small>Ваш текст</small> | обычный размер</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
big - увеличивает размер шрифта на 1 пункт относительно размера текста документа по умолчанию, small - уменьшает на единицу.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><font size="+1">Ваш текст</font></textarea><br />
<font size="+1">Ваш текст</font> | обычный размер</td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><font size="-1">Ваш текст</font></textarea><br />
<font size="-1">Ваш текст</font> | обычный размер</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Параметр <em>size </em>отвечает за размер шрифта. Значение может быть как относительным ( сколько-то пунктов), так и абсолютным.<br />
Допустимый диапазон: от 1 до 7. По умолчанию размер равен 3. Одинаковые размеры разных шрифтов визуально могут отличаться.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><font size="4">Ваш текст</font></textarea><br />
<font size="4">Ваш текст</font> | обычный размер</td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><font size="2">Ваш текст</font></textarea><br />
<font size="2">Ваш текст</font> | обычный размер</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Как видим, 4 в данном случае эквивалентно +1, а 2 - -1. Как я уже говорил, это связано с стандартным размером равным 3.</p>
<p>
<a name="t_color" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Цвет текста</big></strong>.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><font color="cyan">Ваш текст</font></textarea><br />
<font color="cyan">Ваш текст</font></td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><font color="#00FFFF">Ваш текст</font></textarea><br />
<font color="#00ffff">Ваш текст</font></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Цвет текста можно задать двумя способами: по названию, либо по шестнадцатеричному коду.<br />
Стандартные цвета: black, white, red, green, blue, yellow, magenta, cyan, purple, lime, maroon, auqa, navy, fuchsia.<br />
Вот некоторые коды распространенных цветов.</p>
<table align="center" bgcolor="#ffffff" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
#000000</td>
<td bgcolor="#000000">
   </td>
<td>
#993300</td>
<td bgcolor="#993300">
   </td>
<td>
#333300</td>
<td bgcolor="#333300">
   </td>
<td>
#003300</td>
<td bgcolor="#003300">
   </td>
<td>
#003366</td>
<td bgcolor="#003366">
   </td>
<td>
#000080</td>
<td bgcolor="#000080">
   </td>
<td>
#333399</td>
<td bgcolor="#333399">
   </td>
<td>
#333333</td>
<td bgcolor="#333333">
   </td>
</tr>
<tr>
<td>
#800000</td>
<td bgcolor="#800000">
 </td>
<td>
#FF6600</td>
<td bgcolor="#ff6600">
 </td>
<td>
#808000</td>
<td bgcolor="#808000">
 </td>
<td>
#008000</td>
<td bgcolor="#008000">
 </td>
<td>
#008080</td>
<td bgcolor="#008080">
 </td>
<td>
#0000FF</td>
<td bgcolor="#0000ff">
 </td>
<td>
#666699</td>
<td bgcolor="#666699">
 </td>
<td>
#808080</td>
<td bgcolor="#808080">
 </td>
</tr>
<tr>
<td>
#FF0000</td>
<td bgcolor="#ff0000">
 </td>
<td>
#FF9900</td>
<td bgcolor="#ff9900">
 </td>
<td>
#99CC00</td>
<td bgcolor="#99cc00">
 </td>
<td>
#339966</td>
<td bgcolor="#339966">
 </td>
<td>
#33CCCC</td>
<td bgcolor="#33cccc">
 </td>
<td>
#3366FF</td>
<td bgcolor="#3366ff">
 </td>
<td>
#800080</td>
<td bgcolor="#800080">
 </td>
<td>
#969696</td>
<td bgcolor="#969696">
 </td>
</tr>
<tr>
<td>
#FF00FF</td>
<td bgcolor="#ff00ff">
 </td>
<td>
#FFCC00</td>
<td bgcolor="#ffcc00">
 </td>
<td>
#FFFF00</td>
<td bgcolor="#ffff00">
 </td>
<td>
#00FF00</td>
<td bgcolor="#00ff00">
 </td>
<td>
#00FFFF</td>
<td bgcolor="#00ffff">
 </td>
<td>
#00CCFF</td>
<td bgcolor="#00ccff">
 </td>
<td>
#993366</td>
<td bgcolor="#993366">
 </td>
<td>
#C0C0C0</td>
<td bgcolor="#c0c0c0">
 </td>
</tr>
<tr>
<td>
#FF99CC</td>
<td bgcolor="#ff99cc">
 </td>
<td>
#FFCC99</td>
<td bgcolor="#ffcc99">
 </td>
<td>
#FFFF99</td>
<td bgcolor="#ffff99">
 </td>
<td>
#CCFFCC</td>
<td bgcolor="#ccffcc">
 </td>
<td>
#CCFFFF</td>
<td bgcolor="#ccffff">
 </td>
<td>
#99CCFF</td>
<td bgcolor="#99ccff">
 </td>
<td>
#CC99FF</td>
<td bgcolor="#cc99ff">
 </td>
<td>
#FFFFFF</td>
<td>
  </td>
</tr>
<tr>
<td>
#9999FF</td>
<td bgcolor="#9999ff">
 </td>
<td>
#993366</td>
<td bgcolor="#993366">
 </td>
<td>
#FFFFCC</td>
<td bgcolor="#ffffcc">
 </td>
<td>
#CCFFFF</td>
<td bgcolor="#ccffff">
 </td>
<td>
#660066</td>
<td bgcolor="#660066">
 </td>
<td>
#FF8080</td>
<td bgcolor="#ff8080">
 </td>
<td>
#0066CC</td>
<td bgcolor="#0066cc">
 </td>
<td>
#CCCCFF</td>
<td bgcolor="#ccccff">
 </td>
</tr>
<tr>
<td>
#000080</td>
<td bgcolor="#000080">
 </td>
<td>
#FF00FF</td>
<td bgcolor="#ff00ff">
 </td>
<td>
#FFFF00</td>
<td bgcolor="#ffff00">
 </td>
<td>
#00FFFF</td>
<td bgcolor="#00ffff">
 </td>
<td>
#800080</td>
<td bgcolor="#800080">
 </td>
<td>
#800000</td>
<td bgcolor="#800000">
 </td>
<td>
#008080</td>
<td bgcolor="#008080">
 </td>
<td>
#0000FF</td>
<td bgcolor="#0000ff">
 </td>
</tr>
</tbody>
</table>
<p>
<a name="t_garn" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Гарнитура шрифта</big></strong>.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><font face="Arial">Ваш текст</font></textarea><br />
<font face="Arial">Ваш текст</font></td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><font face="MS Mincho, Verdana">Ваш текст</font></textarea><br />
<font face="MS Mincho, Verdana">Ваш текст</font></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Некоторые часто используемые шрифты: Arial, Comic Sans MS, Courier New, Georgia, Tahoma, Times New Roman, Verdana.<br />
Как видите, в параметре face можно указать несколько шрифтов через запятую.<br />
Если первый шрифт не найдет браузером, будет использован следующий из списка.</p>
<a name="t_quot" target="_blank"></a>
<p style="text-align: center;">
<strong><big>Цитаты</big></strong>.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: left;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><cite>Ваш текст</cite></textarea><br />
<cite>Ваш текст</cite></td>
<td style="text-align: left;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><q>Ваш текст</q></textarea><br />
<q>Ваш текст</q></td>
</tr>
</tbody>
</table>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><blockquote>Ваш текст</blockquote></textarea><br />
<blockquote style="text-align: left;">
Ваш текст</blockquote>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
<em>cite </em>используется для логического выделения цитат. Текст браузером внутри тега выделяется курсивом.<br />
<em>q </em>выделяет текст кавычками. Все браузеры (кроме некоторых версий IE) подставляют кавычки корректно.<br />
<em>blockquote</em>: текст отображается как выровненный блок с отступами слева и справа (около 40 пикселей), а также с отбивкой сверху и снизу.</p>
<p>
<a name="t_list" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Списки</big></strong>.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><ul><li>пункт 1</li><li>пункт 2</li></ul></textarea><br />
<ul>
<li style="text-align: left;">
пункт 1</li>
<li style="text-align: left;">
пункт 2</li>
</ul>
</td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><ol><li>пункт 1</li><li>пункт 2</li></ol></textarea><br />
<ol>
<li style="text-align: left;">
пункт 1</li>
<li style="text-align: left;">
пункт 2</li>
</ol>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Для конструирования списков сначала определяется их тип: нумерованный(тег <em>ol</em> ) или маркированный(тег <em>ul</em> ), а потом описываются элементы (тег <em>li</em> ).<br />
Вложенные списки имеют место быть, но на лиру не поддерживаются. Но есть небольшая хитрость)</p>
<p>
<a name="t_form" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Форматирование</big>.<br />
span и div</strong>.<br />
тег <em>span </em>можно использовать внутри других тегов для задания элементам стилей, отличных от общего.<br />
тег <em>div </em>является блочным элементом и предназначен для выделения фрагмента с целью изменения вида содержимого.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: left;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;">Текст1<span style="padding-left: 10px;">Текст2</span></textarea><br />
Текст1<span style="padding-left: 10px;">Текст2</span></td>
<td style="text-align: left;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;">Текст1<div style="padding-left: 10px;">Текст2</div></textarea><br />
Текст1
<div style="padding-left: 10px;">
Текст2</div>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Для задания отступов используется свойство css style и некоторые его параметры:<br />
<em>margin </em>- отступы блока относительно остальных элементов. <em>padding </em>- отступы внутри блока для текста, чтобы он не прилипал к границам<br />
Так как CSS для написания постов изучать смысла нет, можно ограничиться заданием отдельных границ:<br />
<em>margin-top, margin-right, margin-bottom, margin-left</em> и <em>padding-top, padding-right, padding-bottom, padding-left</em><br />
Как раз левое поле и задано в приведенном коде. Значение - в пикселах.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><br></textarea><br />
Новая строка<br />
 </td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><hr></textarea><br />
Горизонтальная линия
<hr />
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Когда вы работаете в расширенном редакторе, по нажатию Enter происходит не переход на новую строку, а в новый абзац. В связи с этим возникают<br />
проблемы с, например, картинками в тексте. Выравнивание действует только внутри абзаца. Поэтому, следует делать переходы на новые строки,<br />
а не создавать абзацы. Новая строка в расширенном редакторе - Shift+Enter или же просто <br> в коде.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><p>Ваш текст</p></textarea><br />
<p style="text-align: left;">
Ваш текст</p>
</td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><pre>Ваш текст</pre></textarea><br />
<pre style="text-align: left;">

Ваш текст</pre>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
p - задание абзацев, pre - блок предварительно форматированного текста.<br />
Внутри pre запрещено использование изображение и тегов для изменения шрифта.<br />
Важным свойстров абзаца (p) является выравнивание - <em>align</em>. <p align="left | center | right | justify">...</p> - соответсвенно используем 1 из параметров.<br />
justify - выравнивание по ширине.<br />
<br />
  текст внутри обоих этих тегов можно выравнять. Делается это при помощи свойства CSS - text-align.<br />
Также есть параметр text-indent, задающий отсуп первой строки текста в блоке.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><p style="text-align: center;">Ваш текст</p></textarea><br />
<p style="text-align: center;">
Ваш текст</p>
</td>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><p style="text-indent: 20;">Ваш текст</p></textarea><br />
<p style="text-indent: 20px; text-align: left;">
Ваш текст</p>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
<strong>Теги h1 .. h6</strong>.<br />
задают заголовки 6 разных уровней (1 - самый большой). Являются блочными элементами. Есть свойство align.<br />
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><h1>Ваш текст</h1></textarea></p>
<p>
<a name="t_marquee" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Бегущая строка</big> - marquee</strong>.<br />
<textarea cols="55" readonly="readonly" rows="5" style="text-align: center;"><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></textarea></p>
<center>
<marquee behavior="alternate" bgcolor="#ffff99" direction="down" height="50" hspace="3" loop="2" scrollamount="10" scrolldelay="100" style="text-align: center; color: magenta;" truespeed="" vspace="3" width="300"> а я бегу 1 раз вниз и 1 раз вверх</marquee><br />
(вы могли не видеть, как она пробежала лишь 1 раз)</center>
<p>
<strong>Параметры</strong>:<br />
(конечно же необязательно<br />
<em>behavior </em>- Задает тип движения содержимого контейнера. Значения: behavior="alternate | scroll | slide"<br />
<em>alternate </em>- содержимое перемещается между правым и левым краем элемента.<br />
<em>scroll </em>- перемещается в направлении, заданным параметром direction, затем скрывается за пределами области, после чего начинает движение с начала.<br />
<em>slide </em>- содержимое перемещается в направлении, заданным параметром direction, доходит до края области и останавливается.<br />
<em>bgcolor </em>- Цвет фона. Подробнее о цветах было <a href="#t_colors" style="text-decoration: none;" target="_blank">выше</a>.<br />
<em>direction </em>- Указывает направление движения содержимого контейнера. Значения: direction="down | left | right | up"<br />
<em>height </em>и <em>width </em>- высота и ширина области прокрутки.<br />
<em>hspace </em>и <em>vspace </em>- горизонтальные и вертикальные поля вокруг содержимого.<br />
<em>loop </em>- задает, сколько раз будет прокручиваться содержимое (натуральное число). -1 - бесконечное повторение.<br />
<em>scrollamount </em>- скорость движения содержимого (в пикселах).<br />
<em>scrolldelay </em>- величина задержки в миллисекундах между движениями.<br />
<em>truespeed </em>- отменяет встроенный ограничитель скорости при низких значениях параметра scrolldelay.</p>
<p>
<a name="t_img" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Вставка изображений</big></strong>.<br />
<textarea cols="55" readonly="readonly" rows="4" style="text-align: center;"><img height="62" border="0" align="center" width="100" alt="текст, который виден без картинки" title="Текст при наведении на картинку" src="//img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg" /></textarea><br />
<img align="center" alt="текст, который виден без картинки" border="0" height="62" src="//img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg" title="Текст при наведении на картинку" width="100" /><br />
Естесвенно основной частью является <img src="//img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg"><br />
Собственно, чтобы показать картинку нам хватит и этого кода.</p>
<p style="text-align: left;">
<em>src </em>(source) - адрес, где расположено изображение.<br />
<em>height </em>и <em>width </em>- размеры показываемого изображения. Никто не запрещает растянуть или уменьшить изображение. В оригинальном размере картинку всегда можно увидеть, нажав "открыть изображение". Ну и пользователю она будет загружаться вся, т.е. сделав кодом из картинки 1000*800 маленькую 100*80 вы ничего не улучшите - грузиться она будет так же долго и съест столько же трафика.<br />
<em>alt </em>(alternative) - альтернативный текст изображения, который виден при просмотре без отображения картинок (когда экономят трафик).<br />
<em>title </em>- текст, видимый при наведении мышкой на картинку.<br />
<em>align </em>- знакомый нам параметр выравнивания. Как я уже говорил в разделе про абзацы и строки, выравнивание будет действовать только внутри абзаца. Представьте, что каждый абзац - это строка в таблице. Ну так вот если вставить картинку в первую строку, та станет высотой не меньше картинки, но не залезет на вторую. Поэтому следите за тем, куда вставляете их)<br />
<em>hspace </em>и <em>vspace </em>- задают отступ от изображения до окружающего контента<br />
<em>border</em> - толщина рамки вокруг изображения.</p>
<p>
<a name="t_href" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Ссылки</big></strong>.<br />
<textarea cols="55" readonly="readonly" rows="4" style="text-align: center;"><a target="_blank" title="Это ссылка на картинку из примера про картинки, откроется она в новом окне" href="//img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg">анкор</a></textarea><br />
<a href="//img-fotki.yandex.ru/get/3310/lexincorp.be/0_1e172_a5664669_XS.jpg" target="_blank" title="Это ссылка на картинку из примера про картинки, откроется она в новом окне">анкор</a></p>
<p style="text-align: left;">
<em>href </em>- адрес, куда нужно перейти<br />
<em>title </em>- текст, появляющийся в качестве подсказки при наведении на ссылку<br />
<em>target </em>- параметр отвечающий за то, где открывать ссылку - в том же окне или новом.<br />
Если target не задан, то открывается в том же окне (эквивалент <em>_self</em> ). Из возможных значений нас интересует еще и <em>_blank</em> - открытие в новом окне/вкладке.<br />
<em>анкор</em> - анкором называют текстовую часть ссылки.<br />
На самом деле, вместо этого слова мы могли бы туда поставить код картинки из предыдущего примера и ... получить <strong>баннер </strong>- кликабельную картинку.<br />
Ну а также, мы теперь можем сделать из баннера просто картинку, убрав код, отвечающий за ссылку.</p>
<p>
<a name="t_lines" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Рамки</big> для обрамления текста</strong>.</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="1" style="text-align: center;"><div style="border:1px dashed black;">Ваш текст</div></textarea><br />
<div style="border: 1px dashed blue;">
Ваш текст</div>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
Для задания вида рамки используется атрибут <em>border</em>, который задается для стиля блока <em>div</em>.<br />
Сначала задается толщина рамки, затем тип, потом цвет. Таблица цветов и стандартные имена уже приводились.<br />
Возможные типы рамок:</p>
br /
<table align="center">
<tbody>
<tr>
<td>
<div style="border: 3px dotted blue; width: 100px; text-align: center;">
dotted</div>
</td>
<td>
<div style="border: 3px dashed blue; width: 100px; text-align: center;">
dashed</div>
</td>
<td>
<div style="border: 3px solid blue; width: 100px; text-align: center;">
solid</div>
</td>
<td>
<div style="border: 3px double blue; width: 100px; text-align: center;">
double</div>
</td>
</tr>
<tr>
<td>
<div style="border: 3px groove blue; width: 100px; text-align: center;">
groove</div>
</td>
<td>
<div style="border: 3px ridge blue; width: 100px; text-align: center;">
ridge</div>
</td>
<td>
<div style="border: 3px inset blue; width: 100px; text-align: center;">
inset</div>
</td>
<td>
<div style="border: 3px outset blue; width: 100px; text-align: center;">
outset</div>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
И конечно же никто не запрещает использовать в стиле div другие атрибуты.<br />
Например, padding и margin, речь о которых шла <a href="#t_form" style="text-decoration: none;" target="_blank">выше</a>.</p>
<p>
<a name="t_textarea" target="_blank"></a><a href="#t_top" style="text-decoration: none;" target="_blank">К оглавлению</a>.</p>
<p style="text-align: center;">
<strong><big>Форма</big> для текста</strong>.<br />
Они-то и использовались везде)</p>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;">
<textarea cols="55" readonly="readonly" rows="2" style="text-align: center;"><textarea style="text-align: center;" readonly="readonly" cols="45" rows="2">Ваш текст</textarea></textarea><br />
<textarea cols="45" readonly="readonly" rows="2" style="text-align: center;">Ваш текст</textarea></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
<em>textarea </em>- область с текстом. <em>rows </em>- количество строк, <em>cols </em>- кол-во столбцов (символов в строке)<br />
<em>readonly </em>- чтобы случайно пользователь не изменил код и не перезагружал страничку.<br />
также есть параметр <em>disabled</em>, запрещающий выделять и копировать код из <em>textarea</em>.</p>
<p>
<big><a href="#t_top" style="text-decoration: none;" target="_blank">Наверх</a></big></p>
<p style="text-align: center;">
Lexincorp.ru: <a href="http://www.lexincorp.ru/post87803605/" style="text-decoration: none;" target="_blank">Всё самое интересное и полезное</a><br />
</p>
</div>

Серия сообщений "Всё про Лиру":
Часть 1 - Как добавить сообщение в свой дневник?
Часть 2 - Без заголовка
...
Часть 4 - Сделать текст с прокруткой во флейме
Часть 5 - Главная шпаргалка - копилочка...
Часть 6 - Изучаем НTML
Часть 7 - Как делать схемы
Часть 8 - Огромная HTML-Шпаргалочка
...
Часть 10 - Фон для сообщений.
Часть 11 - ВОТ ТАК ПОМОГАЛОЧКА.
Часть 12 - Новое Оформление дневника для Лирушников.