Из этой статьи вы узнаете, как добавить горизонтальную линию в HTML. Горизонтальную линию можно использовать для разделения контента на сайте. Код для создания линии достаточно прост. Тем не менее в HTML 4.01 можно изменить дизайн линии с помощью внутренних команд. В HTML5 для стилизации линии придется использовать CSS. [1] X Источник информации
Шаги
-
Откройте существующий или создайте новый документ HTML. Документы HTML можно редактировать в текстовом редакторе, таком как «Блокнот», или в специализированном редакторе кода, таком как «Adobe Dreamweaver». Выполните следующие действия, чтобы открыть HTML-документ в выбранной программе:
- Откройте Блокнот или другой текстовый редактор/редактор кода.
- Откройте меню Файл .
- Нажмите Открыть .
- Выберите файл HTML.
- Нажмите Открыть
-
Выберите место, в которое нужно вставить линию. Пролистайте вниз, пока не найдете строку, над которой должна появиться линия, а затем переместите курсор непосредственно в начало этой строки, щелкнув мышью в ее крайней левой части.
-
Добавьте пустую строку. Дважды нажмите ↵ Enter , чтобы опустить вниз текст, перед которым нужно вставить линию, после чего поместите курсор на пустую строку.
-
Добавьте тег <hr>. Введите <hr> в пустое место в начале строки. Тег <hr> позволяет нарисовать горизонтальную линию через всю страницу.
-
Переместите курсор после тега «hr» на новую строку, нажав ↵ Enter . Теперь тег <hr> должен находиться в отдельной строке.
-
Добавьте атрибуты к горизонтальной линии (необязательно). Добавьте такие атрибуты, как длина, толщина, цвет и выравнивание. Заключите их в фигурные скобки сразу после «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"> ).
-
Сохраните HTML-файл. Чтобы сохранить текстовый файл в виде документа HTML, необходимо изменить расширение файла (.txt, .docx) на «.html». Выполните следующие действия, чтобы сохранить HTML-документ:
- Откройте меню Файл .
- Нажмите Сохранить как .
- Введите имя для файла в поле «Имя файла».
- Добавьте .html после имени файла.
- Нажмите Сохранить .
-
Проверьте свой HTML-документ. Чтобы проверить HTML-файл, щелкните по нему правой кнопкой мыши и выберите «Открыть с помощью». Затем выберите веб-браузер. Там, где вы вставили тег «hr», должна появиться сплошная линия. HTML-код будет выглядеть примерно так: [3] X Источник информации
<!DOCTYPE html> < html > < body > < h1 > Заголовок </ h1 > < hr size = "6" width = "50%" align = "left" color = "green" > < p1 > Данная строка должна быть отделена от заголовка линией. </ p1 > </ body > </ html >
Реклама
-
Откройте существующий или создайте новый документ HTML. Документы HTML можно редактировать в текстовом редакторе, таком как Блокнот, или в специализированном редакторе кода, таком как Adobe Dreamweaver. Выполните следующие действия, чтобы открыть HTML-документ в выбранной программе:
- Откройте Блокнот или другой текстовый редактор/редактор кода.
- Откройте меню Файл .
- Нажмите Открыть .
- Выберите файл HTML.
- Нажмите Открыть
-
Добавьте заголовок в HTML-документ. Если в HTML-документе еще нет заголовка, выполните следующие действия, чтобы его добавить. Заголовок должен идти после тега <html> и перед тегом <body>.
- Введите <head> в верхней части документа.
- Дважды нажмите ↵ Enter , чтобы добавить две новые строки.
- Введите </head> , чтобы закрыть заголовок.
-
Введите <style type="text/css"> внутри заголовка. Тег «style» помещается между двумя тегами заголовка для создания места, где с помощью кода CSS можно будет изменять дизайн HTML.
- В качестве альтернативного способа можно использовать внешнюю таблицу стилей. Прочтите статью « Как вставить файл CSS в HTML » , чтобы узнать, как связать внешний файл CSS с файлом HTML.
-
Введите hr { . Это тег CSS для стилизации горизонтальной линии. Добавьте его после тега «style» в заголовке или во внешнем файле CSS.
-
Добавьте стили 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>.
-
Введите <hr> в любом месте тела HTML-документа, чтобы добавить горизонтальную линию. Настройки стиля CSS будут применяться после каждого использования тега <hr> в HTML-документе. [4] X Источник информации Ваш код должен выглядеть примерно следующим образом:
<!DOCTYPE html> < html > < head > < style type = "text/css" > hr { width : 50 % ; height : 20 px ; background-color : red ; margin-right : auto ; margin-left : auto ; margin-top : 5 px ; margin-bottom : 5 px ; border-width : 2 px ; border-color : green ; } </ style > </ head > < body > < h1 > Заголовок </ h1 > < hr > < p1 > Данная строка должна быть отделена от заголовка горизонтальной линией </ p1 > </ body > </ html >
Реклама
Источники
Реклама