Компьютеры-и-электроника

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

  • Работа в HTML 4.01
  • Работа в CSS/HTML5
  • Источники

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

Работа в HTML 4.01

Откройте существующий или создайте новый документ HTML.

Документы HTML можно редактировать в текстовом редакторе, таком как «Блокнот», или в специализированном редакторе кода, таком как «Adobe Dreamweaver». Выполните следующие действия, чтобы открыть HTML-документ в выбранной программе:
  • Откройте Блокнот или другой текстовый редактор/редактор кода.
  • Откройте меню Файл.
  • Нажмите Открыть.
  • Выберите файл HTML.
  • Нажмите Открыть

Выберите место, в которое нужно вставить линию.

Пролистайте вниз, пока не найдете строку, над которой должна появиться линия, а затем переместите курсор непосредственно в начало этой строки, щелкнув мышью в ее крайней левой части.

Добавьте пустую строку.

Дважды нажмите ↵ Enter, чтобы опустить вниз текст, перед которым нужно вставить линию, после чего поместите курсор на пустую строку.

Добавьте тег <hr>.

Введите <hr> в пустое место в начале строки. Тег <hr> позволяет нарисовать горизонтальную линию через всю страницу. Переместите курсор после тега «hr» на новую строку, нажав ↵ Enter. Теперь тег <hr> должен находиться в отдельной строке.

Добавьте атрибуты к горизонтальной линии (необязательно).

Добавьте такие атрибуты, как длина, толщина, цвет и выравнивание. Заключите их в фигурные скобки сразу после «hr». Чтобы добавить несколько атрибутов, разделите их пробелом.
  • Введите <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-код будет выглядеть примерно так:
    <!DOCTYPE html> <html> <body> <h1>Заголовок</h1> <hr size="6" width="50%" align="left" color="green"> <p1>Данная строка должна быть отделена от заголовка линией.</p1> </body> </html>
.......

Полный текст новости доступен на источнике

Продолжить читать на источнике ➔

Популярные статьи в разделе: Компьютеры-и-электроника

Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как установить недостающий плагин в Firefox
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как выбраться из стула в главном меню Call of Duty Black Ops
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как сделать машиниму в World of Warcraft
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как узнать, является ли сайт законным
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как получить череп IWHBYD в Halo 3
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как сделать Opera браузером по умолчанию
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как удалить Windows. old
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как подключить компьютер к MAC
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как проверить ключ продукта Windows
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как запустить программу из командной строки
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как найти контакты в Gmail
Иконка предмета
Компьютеры-и-электроника, 15.11.2019 14:18
Как стать бета тестером
У тебя есть свой ответ?
Как добавить горизонтальную линию в HTML...
Отправлено

Популярные статьи сегодня

Категория
Стиль-и-уход-за-собой, 17.11.2019 16:06
Категория
Стиль-и-уход-за-собой, 17.11.2019 16:06
Категория
Искусство-и-развлечения, 17.11.2019 16:06
Категория
Компьютеры-и-электроника, 17.11.2019 16:06
У тебя есть свой ответ?
Как добавить горизонтальную линию в HTML...
Отправлено