Як додати горизонтальну лінію в html

З цієї статті ви дізнаєтеся, як додати горизонтальну лінію в HTML. Горизонтальну лінію можна використовувати для розділення контенту на сайті. Код для створення лінії досить простий. Проте в HTML 4.01 можна змінити дизайн лінії за допомогою внутрішніх команд. У HTML5 для стилізації лінії доведеться використовувати CSS.

кроки

Метод 1 з 2:

Робота в HTML 4.01

1. Відкрийте існуючий або створіть новий документ HTML. Документи HTML можна редагувати в текстовому редакторі, такому як «Блокнот», або в спеціалізованому редакторі коду, такому як «Adobe Dreamweaver». Виконайте наступні дії, щоб відкрити HTML-документ у вибраній програмі:

Відкрийте Блокнот або інший текстовий редактор / редактор коду.
Відкрийте меню файл.
натисніть відкрити.
Виберіть файл HTML.
натисніть відкрити

2. Виберіть місце, в яке потрібно вставити лінію. Прокрутіть вниз, поки не знайдете рядок, над якою повинна з`явитися лінія, а потім проведіть курсор безпосередньо в початок цього рядка, клацнувши мишею в її крайній лівій частині.

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

4. додайте тег
. Введіть в порожнє місце на початку рядка. тег
дозволяє намалювати горизонтальну лінію через всю сторінку.

5. Перемістіть курсор після тега «hr» на новий рядок, натиснувши ↵ Enter. тепер тег
повинен знаходитися в окремому рядку.

6. Додайте атрибути до горизонтальної лінії (необов`язково). Додайте такі атрибути, як довжина, товщина, колір і вирівнювання. Укладіть їх в фігурні дужки відразу після «hr». Щоб додати кілька атрибутів, розділіть їх пропуском.

Введіть , щоб змінити товщину лінії. Замініть «#» числовим значенням товщини (наприклад, size ="10").

Введіть , щоб змінити ширину лінії. Замініть «#» кількістю пікселів або процентним відношенням до ширини сторінки (наприклад, width ="200" або width ="75%").

Введіть , щоб змінити колір лінії. Замініть «#» назвою кольору або його шістнадцятковим кодом (наприклад, color ="red" або color ="# FF0000").

Введіть , щоб вирівняти лінію. Замініть «#» на «right» (по правому краю), «left» (по лівому краю) або «center» (по центру) (наприклад, ).

7. Збережіть HTML-файл. Щоб зберегти текстовий файл у вигляді документа HTML, необхідно змінити розширення файлу (.txt, .docx) на «.html ». Виконайте наступні дії, щоб зберегти HTML-документ:

Відкрийте меню файл.

натисніть Зберегти як.

Введіть ім`я для файлу в поле «Ім`я файлу».

додайте .html після імені файлу.

натисніть зберегти.

8. Перевірте свій HTML-документ. Щоб перевірити HTML-файл, клацніть по ньому правою кнопкою миші і виберіть "Відкрити за допомогою». Потім виберіть веб-браузер. Там, де ви вставили тег «hr», повинна з`явитися суцільна лінія. HTML-код буде виглядати приблизно так:

Тема size ="6" width ="50%" align ="left" color ="green">Цей рядок повинна бути відокремлена від заголовка лінією.

Метод 2 з 2:

Робота в CSS / HTML5

1. Відкрийте існуючий або створіть новий документ HTML. Документи HTML можна редагувати в текстовому редакторі, такому як Блокнот, або в спеціалізованому редакторі коду, такому як Adobe Dreamweaver. Виконайте наступні дії, щоб відкрити HTML-документ у вибраній програмі:

Відкрийте Блокнот або інший текстовий редактор / редактор коду.
Відкрийте меню файл.
натисніть відкрити.
Виберіть файл HTML.
натисніть відкрити

2. Додайте заголовок в HTML-документ. Якщо в HTML-документі ще немає заголовка, виконайте наступні дії, щоб додати. Заголовок повинен йти після тега і перед тегом .

Введіть у верхній частині документа.

двічі натисніть ↵ Enter, щоб додати два нові рядки.

Введіть , щоб закрити заголовок.

3. Введіть всередині заголовка. Тег «style» поміщається між двома тегами заголовка для створення місця, де за допомогою коду CSS можна буде змінювати дизайн HTML.

В якості альтернативного способу можна використовувати зовнішню таблицю стилів. прочитайте статтю «Як вставити файл CSS в HTML», щоб дізнатися, як зв`язати зовнішній файл CSS з файлом HTML.

4. Введіть hr {.Це тег CSS для стилізації горизонтальної лінії. Додайте його після тега «style» в заголовку або в зовнішньому файлі CSS.

5. Додайте стилі CSS для тега
.Вони повинні йти після тега «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: ##-, щоб вказати колір рамки (необов`язково). Замініть «##» назвою кольору або гратами (#), після якої буде йти шістнадцятковий код кольору.

6. Введіть } після атрибутів стилю, щоб завершити настройку стилю для тега
.

7. Введіть в будь-якому місці тіла HTML-документа, щоб додати горизонтальну лінію. Налаштування стилю CSS будуть застосовуватися після кожного використання тега

в HTML-документі.Ваш код повинен виглядати приблизно так:

 type ="text / css">hr {width: 50% -height: 20px-background-color: red-margin-right: auto-margin-left: auto-margin-top: 5px-margin-bottom: 5px-border-width: 2px-border-color : green-}Заголовок
Цей рядок повинна бути відокремлена від заголовка горизонтальною лінією