Выберите тему, которая интересует вас больше всего,
кликните на соответствующее изображение
#18 Секреты, как просто работать с HTML на своем сайтe
Видеоурок, как пользоваться представленной на этой странице информацией:
Прямая ссылка на видео:
Иногда, чтобы визуально доработать страницу, необходимо знать хотя бы основы HTML. Сделать текст жирным, увеличить шрифт и так далее... Сегодня мы подобрали для Вас основные элементы, которые могут Вам сильно пригодиться.
В колонке слева - пример HTML-кода, который нужно скопировать, отредактировать (вставить туда Ваш текст или картинку) и вставить в нужное Вам место на странице сайта.
В правой колонке - описание того, как будет отображаться на Вашей странице код из примера слева, и наглядный пример.
Редактирование текста:
Код HTML | Отображение на странице |
---|---|
подчёркнутый шрифт | |
жирный шрифт | |
Увеличенный шрифт | |
уменьшенный шрифт | |
Наклонный шрифт | |
наклонный жирный шрифт | |
наклонный жирный подчеркнутый шрифт | |
Текст, подчеркнутый точечным пунктиром | |
Текст, подчеркнутый двойной чертой | |
Текст, подчеркнутый пунктиром | |
Шрифт этого текста «Monotype Corsiva» | |
Задаём цвет текста |
|
Цветной текст с цветным фоном | |
Синий текст в красной рамке | |
Выделяем буквицу | |
Подведите курсор к этому тексту |
|
Ваша бегущая строка | |
цифра управляет скоростью | |
Меняем направление движения | |
Движение текста вверх, цифра задаёт высоту | |
Движение текста вниз, цифра задаёт высоту | |
Меняем цвет заливки текста | |
Останавливаем текст наведением курсора | |
Эта фишка не работает в IE |
Выравнивание текста:
Будет большой ошибкой, если Ваш текст, та ценная информация, которую Вы хотите донести до посетителей своего сайта, будет выложена в виде большого неотформатированного куска текста. Такой текст читать очень неудобно, и в комментариях к Вашей статье Вы максимум найдёте такое: "Не осилил. Многа букофф".
Чтобы текст был более прост для восприятия, его следует разбить на небольшие смысловые части или параграфы.
В HTML-коде это будет выглядеть так:
Чтобы принудительно перенести текст на новую строчку, используется тег:
Также для удобства чтения текст необходимо выровнять. Вариантов несколько.
По левому краю:
Текст будет прижат к левому краю страницы.
Правый край строчек
останется неровным.
ВАШ ТЕКСТ
По центру:
Тогда Ваш текст будет выравниваться
относительно центра страницы.
Края строчек будут находиться на одинаковом расстоянии от центра.
ВАШ ТЕКСТ
По правому краю:
Текст будет прижат к правому краю страницы.
Левый край строчек
останется неровным.
ВАШ ТЕКСТ
Линии:
Ещё один широко распространённый элемент оформления текста - линии. Они бывают разной толщины, длины, цвета. Могут быть даже анимированными. Всё зависит от настроения и умения автора. Линиями обычно выделяют важные области контента на странице или отделяют одну смысловую часть текста от другой. Иногда их используют просто для декораций.
Замечу, что цветные линии отображаются на 100% корректно только в IE.
Итак, поехали. Линия обыкновенная:
ее код:
Линия, выровненная по центру, размером 60% от ширины того блока, где она расположена:
По умолчанию отображается толщиной 2 пиксела и с небольшой тенью.
Чтобы убрать тень, нужно это указать в HTML-коде:
Атрибут "color" задаёт цвет линии,
Атрибут "size" задаёт толщину линии в пикселах.
Немножко поколдовав с кодом, можно получить вот такую красоту:
Также можно найти в интернете линии, специально нарисованные дизайнером. Их уже нужно вставлять как рисунок.
Если нужно прижать рисунок к левой кромке записи,
вместо align=center ставьте align=left, к правой align=right.
Собраний таких картинок в сети сейчас превеликое множество, и в большинстве своём они бесплатны.
Наберите в поисковике divider — и вперед!
Таким образом можно вставить любой рисунок, даже анимированый:
Вот код бегущей собаки, например:
На этом пока что всё. Изучайте, применяйте, делитесь с друзьями.
Напишите в комментариях, что у Вас получилось, и как Вы применили эти знания.
marquee
Похожие статьи
-
28.04.2014 Выпуск # 91 Сайт своими руками … от Nethouse -
24.04.2014 Выпуск # 90 Два способа проверки изображений на уникальность -
19.04.2014 Выпуск # 89 Фрилансер, боишься очередного дедлайна? -
11.04.2014 Выпуск # 88 Бизнес без рекламы как дитя без мамы -
31.03.2014 Выпуск # 87 Секрет удобного хранения информации – Evernote -
14.03.2014 Выпуск # 86 Удобный подсчет символов и знаков в тексте онлайн -
09.03.2014 Выпуск # 85 Сделайте подарок своим близким с помощью Animoto -
24.02.2014 Выпуск # 84 Конвертируем видео за 3 минуты -
18.02.2014 Выпуск # 83 Мой блокнот — Evernote -
27.01.2014 Выпуск # 82 Создай свой веб-офис в облаках