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

Відеоролик: Как добавить видео на веб-страницу (Основы HTML и CSS)

Зміст

кроки
Метод 1 з 2: Робота в HTML 4.01
Метод 2 з 2: Робота в CSS / HTML5

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

кроки

Метод 1 з 2: Робота в HTML 4.01

1 Відкрийте існуючий або створіть новий документ HTML. Документи HTML можна редагувати в текстовому редакторі, такому як «Блокнот», або в спеціалізованому редакторі коду, такому як «Adobe Dreamweaver». Виконайте наступні дії, щоб відкрити HTML-документ у вибраній програмі:
- Відкрийте Блокнот або інший текстовий редактор / редактор коду.
- Відкрийте меню файл.
- натисніть відкрити.
- Виберіть файл HTML.
- натисніть відкрити
2 Виберіть місце, в яке потрібно вставити лінію. Прокрутіть вниз, поки не знайдете рядок, над якою повинна з'явитися лінія, а потім проведіть курсор безпосередньо в початок цього рядка, клацнувши мишею в її крайній лівій частині.
3 Додайте порожній рядок. двічі натисніть ↵ Enter, Щоб опустити вниз текст, перед яким потрібно вставити лінію, після чого помістіть курсор на порожній рядок.
4 Додайте тег hr>. Введіть hr> в порожнє місце на початку рядка. тег hr> дозволяє намалювати горизонтальну лінію через всю сторінку.
5 Перемістіть курсор після тега «hr» на новий рядок, натиснувши ↵ Enter. тепер тег hr> повинен знаходитися в окремому рядку.
6 Додайте атрибути до горизонтальної лінії (необов'язково). Додайте такі атрибути, як довжина, товщина, колір і вирівнювання. Укладіть їх в фігурні дужки відразу після «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">).
7 Збережіть HTML-файл. Щоб зберегти текстовий файл у вигляді документа HTML, необхідно змінити розширення файлу (.txt, .docx) на «.html». Виконайте наступні дії, щоб зберегти HTML-документ:
- Відкрийте меню файл.
- натисніть Зберегти як.
- Введіть ім'я для файлу в поле «Ім'я файлу».
- додайте .html після імені файлу.
- натисніть зберегти.
8 Перевірте свій HTML-документ. Щоб перевірити HTML-файл, клацніть по ньому правою кнопкою миші і виберіть "Відкрити за допомогою». Потім виберіть веб-браузер. Там, де ви вставили тег «hr», повинна з'явитися суцільна лінія. HTML-код буде виглядати приблизно так:

Метод 2 з 2: Робота в CSS / HTML5

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.
4 Введіть hr {. Це тег 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: ##;, Щоб вказати колір рамки (необов'язково). Замініть «##» назвою кольору або гратами (#), після якої буде йти шістнадцятковий код кольору.
6 Введіть } після атрибутів стилю, щоб завершити настройку стилю для тега hr>.
7 Введіть hr> в будь-якому місці тіла HTML-документа, щоб додати горизонтальну лінію. Налаштування стилю CSS будуть застосовуватися після кожного використання тега hr> в HTML-документі. Ваш код повинен виглядати приблизно так: