Иногда, чтобы визуально доработать страницу, необходимо знать хотя бы основы HTML. Сделать текст жирным, увеличить шрифт и так далее... Сегодня мы подобрали для Вас основные элементы, которые могут Вам сильно пригодиться.
В колонке слева - пример HTML-кода, который нужно скопировать, отредактировать (вставить туда Ваш текст или картинку) и вставить в нужное Вам место на странице сайта.
В правой колонке - описание того, как будет отображаться на Вашей странице код из примера слева, и наглядный пример.
| Код HTML | Отображение на странице |
|---|---|
| подчёркнутый шрифт | |
| жирный шрифт | |
| Увеличенный шрифт | |
| уменьшенный шрифт | |
| Наклонный шрифт | |
| наклонный жирный шрифт | |
| наклонный жирный подчеркнутый шрифт | |
| Текст, подчеркнутый точечным пунктиром | |
| Текст, подчеркнутый двойной чертой | |
| Текст, подчеркнутый пунктиром | |
| Шрифт этого текста |
|
| Задаём цвет текста | |
| Цветной текст с цветным фоном | |
| Синий текст в красной рамке | |
| Выделяем буквицу | |
|
Подведите курсор к этому тексту |
|
| Ваша бегущая строка | |
| цифра управляет скоростью | |
| Меняем направление движения | |
| Движение текста вверх, цифра задаёт высоту | |
| Движение текста вниз, цифра задаёт высоту | |
| Меняем цвет заливки текста | |
| Останавливаем текст наведением курсора | |
| Эта фишка не работает в IE |
Будет большой ошибкой, если Ваш текст, та ценная информация, которую Вы хотите донести до посетителей своего сайта, будет выложена в виде большого неотформатированного куска текста. Такой текст читать очень неудобно, и в комментариях к Вашей статье Вы максимум найдёте такое: "Не осилил. Многа букофф".
Чтобы текст был более прост для восприятия, его следует разбить на небольшие смысловые части или параграфы.
В HTML-коде это будет выглядеть так:
Чтобы принудительно перенести текст на новую строчку, используется тег:
Также для удобства чтения текст необходимо выровнять. Вариантов несколько.
По левому краю:
Текст будет прижат к левому краю страницы.
Правый край строчек
останется неровным.
ВАШ ТЕКСТ
По центру:
Тогда Ваш текст будет выравниваться
относительно центра страницы.
Края строчек будут находиться на одинаковом расстоянии от центра.
ВАШ ТЕКСТ
По правому краю:
Текст будет прижат к правому краю страницы.
Левый край строчек
останется неровным.
ВАШ ТЕКСТ
Ещё один широко распространённый элемент оформления текста - линии. Они бывают разной толщины, длины, цвета. Могут быть даже анимированными. Всё зависит от настроения и умения автора. Линиями обычно выделяют важные области контента на странице или отделяют одну смысловую часть текста от другой. Иногда их используют просто для декораций.
Замечу, что цветные линии отображаются на 100% корректно только в IE.
Итак, поехали. Линия обыкновенная:
ее код:
Линия, выровненная по центру, размером 60% от ширины того блока, где она расположена:
По умолчанию отображается толщиной 2 пиксела и с небольшой тенью.
Чтобы убрать тень, нужно это указать в HTML-коде:
Атрибут "color" задаёт цвет линии, .
Атрибут "size" задаёт толщину линии в пикселах.
Немножко поколдовав с кодом, можно получить вот такую красоту:
Также можно найти в интернете линии, специально нарисованные дизайнером. Их уже нужно вставлять как рисунок.
Если нужно прижать рисунок к левой кромке записи,
вместо align=center ставьте align=left, к правой align=right.
Собраний таких картинок в сети сейчас превеликое множество, и в большинстве своём они бесплатны.
Наберите в поисковике divider - и вперед!
Таким образом можно вставить любой рисунок, даже анимированый:
Вот код бегущей собаки, например:
На этом пока что всё. Изучайте, применяйте, делитесь с друзьями.
(с) Евгений Ходченков.
Ссылка на закуску: Учебник HTML и справочник - http://htmlbook.ru/