Как добавить горизонтальную линию в HTML

Из этой статьи вы узнаете, как добавить горизонтальную линию в HTML. Горизонтальную линию можно использовать для разделения контента на сайте. Код для создания линии достаточно прост. Тем не менее в HTML 4.01 можно изменить дизайн линии с помощью внутренних команд. В HTML5 для стилизации линии придется использовать CSS.^{[1]XИсточник информации}

Метод 1

Метод 1 из 2:

Работа в HTML 4.01

Загрузить PDF

1
Откройте существующий или создайте новый документ HTML. Документы HTML можно редактировать в текстовом редакторе, таком как «Блокнот», или в специализированном редакторе кода, таком как «Adobe Dreamweaver». Выполните следующие действия, чтобы открыть HTML-документ в выбранной программе:
- Откройте Блокнот или другой текстовый редактор/редактор кода.
- Откройте меню Файл.
- Нажмите Открыть.
- Выберите файл HTML.
- Нажмите Открыть
Пролистайте вниз, пока не найдете строку, над которой должна появиться линия, а затем переместите курсор непосредственно в начало этой строки, щелкнув мышью в ее крайней левой части.
Дважды нажмите ↵ Enter, чтобы опустить вниз текст, перед которым нужно вставить линию, после чего поместите курсор на пустую строку.
Введите <hr> в пустое место в начале строки. Тег <hr> позволяет нарисовать горизонтальную линию через всю страницу.
Теперь тег <hr> должен находиться в отдельной строке.
6
Добавьте атрибуты к горизонтальной линии (необязательно). Добавьте такие атрибуты, как длина, толщина, цвет и выравнивание. Заключите их в фигурные скобки сразу после «hr». Чтобы добавить несколько атрибутов, разделите их пробелом.^{[2]XИсточник информации}
- Введите <hr size="#">, чтобы изменить толщину линии. Замените «#» числовым значением толщины (например, size="10").
- Введите <hr width="#">, чтобы изменить ширину линии. Замените «#» количеством пикселей или процентным отношением к ширине страницы (например, width="200" или width="75%").
- Введите <hr color="#">, чтобы изменить цвет линии. Замените «#» названием цвета или его шестнадцатеричным кодом (например, color="red" или color="# FF0000").
- Введите <hr align="#">, чтобы выровнять линию. Замените «#» на «right» (по правому краю), «left» (по левому краю) или «center» (по центру) (например, <hr width="50%" align="center">).
7
Сохраните HTML-файл. Чтобы сохранить текстовый файл в виде документа HTML, необходимо изменить расширение файла (.txt, .docx) на «.html». Выполните следующие действия, чтобы сохранить HTML-документ:
- Откройте меню Файл.
- Нажмите Сохранить как.
- Введите имя для файла в поле «Имя файла».
- Добавьте .html после имени файла.
- Нажмите Сохранить.
8
Проверьте свой HTML-документ. Чтобы проверить HTML-файл, щелкните по нему правой кнопкой мыши и выберите «Открыть с помощью». Затем выберите веб-браузер. Там, где вы вставили тег «hr», должна появиться сплошная линия. HTML-код будет выглядеть примерно так:^{[3]XИсточник информации}
Реклама

Метод 2

Метод 2 из 2:

Работа в CSS/HTML5

Загрузить PDF

1
Откройте существующий или создайте новый документ HTML. Документы HTML можно редактировать в текстовом редакторе, таком как Блокнот, или в специализированном редакторе кода, таком как Adobe Dreamweaver. Выполните следующие действия, чтобы открыть HTML-документ в выбранной программе:
- Откройте Блокнот или другой текстовый редактор/редактор кода.
- Откройте меню Файл.
- Нажмите Открыть.
- Выберите файл HTML.
- Нажмите Открыть
2
Добавьте заголовок в HTML-документ. Если в HTML-документе еще нет заголовка, выполните следующие действия, чтобы его добавить. Заголовок должен идти после тега <html> и перед тегом <body>.
- Введите <head> в верхней части документа.
- Дважды нажмите ↵ Enter, чтобы добавить две новые строки.
- Введите </head>, чтобы закрыть заголовок.
3
Введите <style type="text/css"> внутри заголовка. Тег «style» помещается между двумя тегами заголовка для создания места, где с помощью кода CSS можно будет изменять дизайн HTML.
- В качестве альтернативного способа можно использовать внешнюю таблицу стилей. Прочтите статью «Как вставить файл CSS в HTML», чтобы узнать, как связать внешний файл CSS с файлом HTML.
Это тег CSS для стилизации горизонтальной линии. Добавьте его после тега «style» в заголовке или во внешнем файле CSS.
5
Добавьте стили CSS для тега <hr>. Они должны идти после тега «hr {». Горизонтальную линию можно оформить множеством способов. Ниже приведены несколько из них.
- Введите width: ##px;, чтобы настроить ширину линии. Замените «##» значением ширины линии в пикселях. Вместо пикселей (px) можно использовать процентное отношение (%).
- Введите height: ##px;, чтобы настроить толщину линии. Замените «##» значением толщины линии в пикселях.
- Введите background-color: ##;, чтобы указать цвет линии. Замените «##» названием цвета или решеткой (#), после которой будет идти шестнадцатеричный код цвета.
- Введите margin-right: ##px;, чтобы указать количество пикселей от правого края. Замените «##» числовым количеством пикселей или кодом «auto». Введите «auto», чтобы выровнять линию по левому краю или по центру.
- Введите margin-left: ##px;, чтобы указать количество пикселей от левого края. Замените «##» числовым количеством пикселей или кодом «auto». Введите «auto», чтобы выровнять линию по правому краю или по центру.
- Введите margin-top: ##px; , чтобы указать верхний отступ для линии. Замените «##» числом, соответствующим ширине отступа в пикселях.
- Введите margin-bottom: ##px;, чтобы указать нижний отступ для линии. Замените «##» числом, соответствующим ширине отступа в пикселях.
- Введите border-width: ##px;, чтобы нарисовать рамку вокруг линии (необязательно). Замените «##» числом, соответствующим толщине рамки в пикселях.
- Введите border-color: ##;, чтобы указать цвет рамки (необязательно). Замените «##» названием цвета или решеткой (#), после которой будет идти шестнадцатеричный код цвета.
Введите } после атрибутов стиля, чтобы завершить настройку стиля для тега <hr>.
7
Введите <hr> в любом месте тела HTML-документа, чтобы добавить горизонтальную линию. Настройки стиля CSS будут применяться после каждого использования тега <hr> в HTML-документе.^{[4]XИсточник информации} Ваш код должен выглядеть примерно следующим образом:
Реклама