#18 Секреты, как просто работать с HTML на своем сайтe

Видеоурок, как пользоваться представленной на этой странице информацией:

Прямая ссылка на видео: http://www.youtube.com/watch?v=ouTAnt7DOkU&feature=youtu.be

Иногда, чтобы визуально доработать страницу, необходимо знать хотя бы основы HTML. Сделать текст жирным, увеличить шрифт и так далее... Сегодня мы подобрали для Вас основные элементы, которые могут Вам сильно пригодиться.

В колонке слева - пример HTML-кода, который нужно скопировать, отредактировать (вставить туда Ваш текст или картинку) и вставить в нужное Вам место на странице сайта.

В правой колонке - описание того, как будет отображаться на Вашей странице код из примера слева, и наглядный пример.

Редактирование текста:

Код HTML	Отображение на странице
<s>ВАШ ТЕКСТ</s>	зачёркнутый шрифт
<u>ВАШ ТЕКСТ</u>	подчёркнутый шрифт
<b>ВАШ ТЕКСТ</b>	жирный шрифт
<big>ВАШ ТЕКСТ</big>	Увеличенный шрифт
<small>ВАШ ТЕКСТ</small>	уменьшенный шрифт
<i>ВАШ ТЕКСТ</i>	Наклонный шрифт
<b><i>ВАШ ТЕКСТ</i></b>	наклонный жирный шрифт
<u><b><i>ВАШ ТЕКСТ</i></b></u>	наклонный жирный подчеркнутый шрифт
<span style="border-bottom: 3px dotted lime;">ВАШ ТЕКСТ</span>	Текст, подчеркнутый точечным пунктиром
<span style="border-bottom: double red;">ВАШ ТЕКСТ</span>	Текст, подчеркнутый двойной чертой
<span style="border-bottom: 2px dashed red;">ВАШ ТЕКСТ</span>	Текст, подчеркнутый пунктиром
<font face="Monotype Corsiva">ВАШ ТЕКСТ</font>	Шрифт этого текста «Monotype Corsiva»
<font color="FF0000">ВАШ ТЕКСТ</font>	Задаём цвет текста таблица цветов
<span style="background-color:blue; color:white; padding:3px;">ВАШ ТЕКСТ</span>	Цветной текст с цветным фоном
<span style="border:2px solid red; padding:3px;"><span style="color:blue;">ВАШ ТЕКСТ</span></span>	Синий текст в красной рамке
<font size="+6" face="Monotype Corsiva" color="#0000FF">БУКВИЦА</font> <i>ОСНОВНОЙ ТЕКСТ…</i>	Выделяем буквицу
<p title="ПОЯСНИТЕЛЬНЫЙ ТЕКСТ">ОСНОВНОЙ ТЕКСТ</p>	Подведите курсор к этому тексту
<marquee>ВАШ ТЕКСТ</marquee>	Ваша бегущая строка
<marquee scrollamount="20">ВАШ ТЕКСТ</marquee>	цифра управляет скоростью
<marquee direction="right">ВАШ ТЕКСТ</marquee>	Меняем направление движения
<marquee height="50" direction="up">ВАШ ТЕКСТ</marquee>	Движение текста вверх, цифра задаёт высоту
<marquee height="50" direction="down">ВАШ ТЕКСТ</marquee>	Движение текста вниз, цифра задаёт высоту
<marquee bgcolor="aqua">ВАШ ТЕКСТ</marquee>	Меняем цвет заливки текста
<marquee onmouseover=this.stop() onmouseout=this.start() >ВАШ ТЕКСТ</marquee>	Останавливаем текст наведением курсора
<span style=text-decoration:blink;>ВАШ ТЕКСТ</span>	Эта фишка не работает в IE

Выравнивание текста:

Будет большой ошибкой, если Ваш текст, та ценная информация, которую Вы хотите донести до посетителей своего сайта, будет выложена в виде большого неотформатированного куска текста. Такой текст читать очень неудобно, и в комментариях к Вашей статье Вы максимум найдёте такое: "Не осилил. Многа букофф".

Чтобы текст был более прост для восприятия, его следует разбить на небольшие смысловые части или параграфы.
В HTML-коде это будет выглядеть так:

<p>Чтобы разбить текст на части, нужно КАЖДЫЙ параграф заключить между тегами, такими же как в этом примере.</p>
Чтобы принудительно перенести текст на новую строчку, используется тег:
</br>

Также для удобства чтения текст необходимо выровнять. Вариантов несколько.

По левому краю:

Текст будет прижат к левому краю страницы.
Правый край строчек
останется неровным.

ВАШ ТЕКСТ

По центру:

Тогда Ваш текст будет выравниваться
относительно центра страницы.
Края строчек будут находиться на одинаковом расстоянии от центра.

ВАШ ТЕКСТ

По правому краю:

Текст будет прижат к правому краю страницы.
Левый край строчек
останется неровным.

ВАШ ТЕКСТ

Линии:

Ещё один широко распространённый элемент оформления текста - линии. Они бывают разной толщины, длины, цвета. Могут быть даже анимированными. Всё зависит от настроения и умения автора. Линиями обычно выделяют важные области контента на странице или отделяют одну смысловую часть текста от другой. Иногда их используют просто для декораций.

Замечу, что цветные линии отображаются на 100% корректно только в IE.

Итак, поехали. Линия обыкновенная:

---

ее код:

<hr>

Линия, выровненная по центру, размером 60% от ширины того блока, где она расположена:

---

<hr align=center width=60%>

По умолчанию отображается толщиной 2 пиксела и с небольшой тенью.

Чтобы убрать тень, нужно это указать в HTML-коде:

---

<hr noshade>

Атрибут "color" задаёт цвет линии, таблица кодировки цветов.

---

<hr color="#FF0000">

---

<hr color="#00B344">

Атрибут "size" задаёт толщину линии в пикселах.

---

<hr size="5" width="60%" align="center" color="blue">

Немножко поколдовав с кодом, можно получить вот такую красоту:

---

<hr color="blue" size="7" style="border: dotted 5pt; border-color: red ">

---

<hr color="red" size="9" style="border: dotted 5pt; border-color: blue ">

---

<hr color="black" size="4" style="border: dashed 5pt; border-color: aqua ">

Также можно найти в интернете линии, специально нарисованные дизайнером. Их уже нужно вставлять как рисунок.

<img src=http://img218.imageshack.us/img218/4139/line014aq3.gif align=center>

Если нужно прижать рисунок к левой кромке записи,
вместо align=center ставьте align=left, к правой align=right.

Собраний таких картинок в сети сейчас превеликое множество, и в большинстве своём они бесплатны.

Наберите в поисковике divider — и вперед!

Таким образом можно вставить любой рисунок, даже анимированый:

Вот код бегущей собаки, например:

<marquee><img src="http://img152.imageshack.us/img152/3619/a53ym3.gif"></marquee>

На этом пока что всё. Изучайте, применяйте, делитесь с друзьями.

Напишите в комментариях, что у Вас получилось, и как Вы применили эти знания.

---

marquee