Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10

05.10.2015


13:57


8270


пока нет


Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10

Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу, как сделать горизонтальную линию в HTML.
С помощью горизонтальной линии можно аккуратно выделить меню, название заголовка, подчеркнуть комментарий. А бывает, смотришь на страничку, и чего-то не хватает, добавляешь горизонтальную линию – и вид странички значительно улучшается!
Поэтому, не стоит пропускать этот урок, если он вам показался примитивным и слишком простым. Я думаю, вы на практике сами все увидите и останетесь довольными, что не пропустили этот урок.
Чтобы создать горизонтальную линию в HTML, существует специальный тег:

<hr>

Закрывающий тег не нужен.

Пример:

<html>
<head>
<title>Горизонтальная линия</title>
</head>
<body>
<hr>
</body>
</html>

Результат:

Как сделать горизонтальную линию HTML. Основы 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">

Результат:

Как сделать горизонтальную линию HTML. выравнивание горизонтальной линии

○ отменить объемность горизонтальной линии

Чтобы отменить объемность горизонтальной линии, достаточно прописать к тегу «HR» «NoShade»:

<hr NoShade>

Результат:

отменить объемность горизонтальной линии

○ цвет горизонтальной линии

Чтобы задать цвет горизонтальной линии, пропишите к тегу «HR» атрибут «color» с кодом цвета (кодировку цветов мы еще не изучали, но вскоре будем):

<hr color="#cc0000">

Результат:

Как сделать горизонтальную линию HTML. Основы HTML для начинающих

На сегодня это все! Жду вас на следующем уроке. Удачи! :coffe:



Случайные записи:

  1. Шрифты в CSS. Основы CSS для начинающих. Урок №6
  2. Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10
  3. Нам 1 годик! С Днем Рождения StepkinBlog.ru!!!
  4. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  5. Подключение. Основы bootstrap 3 для начинающих. Урок №2

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245