StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
05.10.2015
13:57
21133
пока нет
Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу, как сделать горизонтальную линию в HTML.
С помощью горизонтальной линии можно аккуратно выделить меню, название заголовка, подчеркнуть комментарий. А бывает, смотришь на страничку, и чего-то не хватает, добавляешь горизонтальную линию – и вид странички значительно улучшается!
Поэтому, не стоит пропускать этот урок, если он вам показался примитивным и слишком простым. Я думаю, вы на практике сами все увидите и останетесь довольными, что не пропустили этот урок.
Чтобы создать горизонтальную линию в HTML, существует специальный тег:
<hr>
Закрывающий тег не нужен.
Пример:
<html> <head> <title>Горизонтальная линия</title> </head> <body> <hr> </body> </html>
Результат:
Атрибуты горизонтальной линии <hr>
○ ширина горизонтальной линии
Чтобы регулировать ширину, достаточно прописать к тегу «HR» атрибут «width» с размерами. Размеры задаются в пикселях (px) либо в процентах (%):
<hr width="300px">
Или так:
<hr width="20%">
Результат:
○ толщина горизонтальной линии
Чтобы задать толщину горизонтальной линии, достаточно прописать к тегу «HR» атрибут «size» с размером:
<hr size="8">
Результат:
○ выравнивание горизонтальной линии
Чтобы выровнять горизонтальную линию по центру, справа или слева, достаточно прописать к тегу «HR» атрибут «align» с такими значениями:
"right" – вправо;
"center" – по центру;
"left" – слева (по умолчанию).
Пример:
<hr width="300px" align="right"> <hr width="300px" align="center"> <hr width="300px" align="left">
Результат:
○ отменить объемность горизонтальной линии
Чтобы отменить объемность горизонтальной линии, достаточно прописать к тегу «HR» «NoShade»:
<hr NoShade>
Результат:
○ цвет горизонтальной линии
Чтобы задать цвет горизонтальной линии, пропишите к тегу «HR» атрибут «color» с кодом цвета (кодировку цветов мы еще не изучали, но вскоре будем):
<hr color="#cc0000">
Результат:
На сегодня это все! Жду вас на следующем уроке. Удачи! 