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

Не забудьте нажать на кнопку «ВКонтакте» или «Фейсбук» и поделитесь этой статьей в социальных сетях!

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

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

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

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

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

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

Код HTML Отображение на странице
зачёркнутый шрифт
подчёркнутый шрифт
жирный шрифт
Увеличенный шрифт
уменьшенный шрифт
Наклонный шрифт
наклонный жирный шрифт
наклонный жирный подчеркнутый шрифт
Текст, подчеркнутый точечным пунктиром
Текст, подчеркнутый двойной чертой
Текст, подчеркнутый пунктиром
Шрифт этого текста «Monotype Corsiva»
Задаём цвет текста таблица цветов
Цветной текст с цветным фоном
Синий текст в красной рамке
Выделяем буквицу

Подведите курсор к этому тексту

Ваша бегущая строка
цифра управляет скоростью
Меняем направление движения
Движение текста вверх, цифра задаёт высоту
Движение текста вниз, цифра задаёт высоту
Меняем цвет заливки текста
Останавливаем текст наведением курсора
Эта фишка не работает в IE

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

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

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


Чтобы принудительно перенести текст на новую строчку, используется тег:

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

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

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

ВАШ ТЕКСТ

По центру:

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

ВАШ ТЕКСТ

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

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

ВАШ ТЕКСТ

Линии:

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

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

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


ее код:

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


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

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


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



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


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




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

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

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

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

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

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

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

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


marquee