Горизонтальні та вертикальні лінії у HTML. Горизонтальні лінії Зробити лінію в css

При створенні сторінки HTML оформлення відіграє важливу роль. Особливо коли ми говоримо про різні символи та декоративне оформлення: ці дрібниці допомагають зробити «мову» вашої сторінки доступнішою і яснішою, до того ж істотно змінюють її сприйняття і зовнішній вигляд в цілому. Одним з найважливіших елементів для оформлення є горизонтальна лінія, і далі ми докладніше дізнаємося, як з нею працювати і як зробити горизонтальну лінію в HTML.

Якою буває горизонтальна лінія і для чого вона потрібна

Горизонтальна лінія в HTML - це елемент оформлення сторінки, що виконує ряд функцій:

1. Декоративна. Допомагає додати сторінці привабливості.
2. Роздільна. Сприяє ефективному відділенню різної за змістом інформації.
3. Видільна або підкреслююча. Приверне увагу гостей сторінки до необхідної та найважливішої інформації.

Саме горизонтальна лінія вважається найдоступнішим способом реалізації цілого ряду функцій. Створити її дуже просто, а зовні вона виглядає дуже вигідно. Шляхом нехитрих змін html-коду ви зможете регулювати:

• довжину;
• ширину;
• колірні характеристики;
• вирівнювання по тому чи іншому краю.

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

Створюємо горизонтальну лінію в HTML

Задати лінію можна за допомогою простого тегу – hr у трикутних дужках. Він є скороченням від Horisontal Rule і задає класичні зовнішні параметри. Відрізняється від багатьох інших тим, що не потребує закриває тегу і здатний існувати самостійно. Змінити зовнішні характеристики елемента можна за допомогою додаткових значень у тезі:

1. Довжина. Якщо ви не хочете, щоб довжина лінії поширювалася на всю сторінку, то можна задати бажаний розмір у пікселях або відсотках. Робиться це за допомогою додаткового слова «width» у тегу та числового показника довжини, вказаного після знака «=» у лапках.

Виглядає так. Наприклад, якщо нам потрібна довжина, що становить 100 пікселів, задаємо такий тег: hr width="100"

1. Вирівнювання. Вирівнювання можливе по лівому або правому краю, а ще по центру. Ця характеристика діє тільки в тому випадку, якщо ви вже задали параметр width, тому що лінію завдовжки на всю сторінку неможливо вирівняти. Для вирівнювання задаємо додатковий атрибут у тег «align» і додаємо до нього напрямок: center – для центрального, left – для лівого та right – для правого вирівнювання.

Готовий тег у такому разі виглядатиме так. Наприклад, якщо нам потрібно задати центральне вирівнювання для горизонтальної лінії довжиною 150 пікселів, то готовий тег буде виглядати так: hr align = "center" width = "150".

Зверніть увагу, що align, показник для вирівнювання, ставиться на 1 місце, незважаючи на те, що атрибут залежить від показника довжини width.

1. Ширина. На вибір можна також вказувати ширину, створюючи жирне або тонке підкреслення. Цей критерій ні від чого не залежить і може бути використаний як самостійний без вказівки довжини чи вирівнювання. Для нього ми використовуємо атрибут size у тэзі та числовий показник, що дорівнює бажаній ширині в пікселях. Число вказується в лапках після атрибуту size та символу =.

Таким чином, якщо нам потрібно створити лінію шириною 15 пікселів, необхідно створити наступний тег: hr size="15".

1. Колір. Задається також як незалежний показник. Для його зміни використовується атрибут color у поєднанні з назвою кольору у формі коду або англійською мовою. Колір вказується в лапках після символу =.

Таким чином, тег для стандартної лінії білого кольору можна написати двома способами: hr color="#FFFFFF" або hr color="white"

Чорний колір можна створити, використовуючи код #000000.

1. Прибрати тінь. Якщо вам необхідний елемент, що не містить тінь, то в тэзі слід використовувати атрибут noshade. Він може бути використаний самостійно або у поєднанні з іншими елементами. Тег для стандартної лінії з його використанням виглядатиме таким чином: hr noshade

Створення горизонтальної лінії за допомогою відео

А якщо ви бажаєте отримати інформацію в більш наочному форматі, зверніться до наступного відео, де докладно описуються можливості роботи з горизонтальною лінією.

Визначивши необхідні розміри горизонтальної лінії, можна оформити сторінки сайту таким чином, щоб інформація була структурована і візуально грамотно оформлена. Це допомагає відвідувачам легше сприймати подану інформацію та виділяти ваш сайт серед інших.

Здавалося б, навіщо можуть знадобитися чотири способи? Адже практично кожна людина використовує один спосіб, до якого він звик. Наприклад, натиснув на Shift і клавішу «тире» кілька разів, от і вийшла горизонтальна лінія.

А що якщо при цьому виходить пунктирна лінія, а потрібна суцільна?
- Швидше за все, на клавіатурі кнопка Shift несправна. Тут прийдуть на допомогу інші методи.

3.
4.
5.

Мабуть, найзвичніший спосіб зробити лінію у Ворді – це використовувати пару-трійку клавіш на клавіатурі.

I Тонка, товста, подвійна, пунктирна лінія за допомогою клавіатури

Нижче наведено малюнок клавіатури з англійською, але без російської розкладки, проте це не має значення, бо нас цікавить лише три клавіші: Shift, тире та Enter.

Мал. 1. Три клавіші на клавіатурі: Shift, тире та Enter для безперервної горизонтальної лінії у Ворді

За допомогою цих трьох клавіш можна намалювати безперервну горизонтальну лінію Word: пунктирну або суцільну, тонку або товсту, довгу або коротку.

1) При натисканні кілька разів на клавішу «-» (тире) у редакторі Word одержуємо пунктирну лінію будь-якої довжини.

Щоб зробити тонкудовгу лінію на всю ширину сторінки:

• Знаходимо на клавіатурі клавішу «тире» (праворуч від клавіші «нуль», у зеленій рамці на рис. 1).
• З нового (!) рядка Word кілька разів натискаємо на цю клавішу: —
• І потім натиснути на клавішу "Enter" (). Декілька надрукованих тире раптом перетворяться на безперервну горизонтальну тонку лінію на всю ширину сторінки.

2) При одночасному натисканні Shift та «-» (тире) друкується НЕ тире, а підкреслення _________. Таким чином, можна зробити безперервну лінію довільної довжини в будь-якому місці документа.

Мал. 2. Тонка та товста горизонтальна лінія у Word

Тепер друкуємо товстугоризонтальну лінію на всю ширину сторінки:

• Знову знаходимо цю клавішу «тире», а також клавішу Shift (ліворуч або праворуч, кому як подобається). Натисніть Shift, тримайте та не відпускайте.
• І тепер із нового (!) рядка кілька разів (наприклад, 3-4 рази) натисніть на тирі (при цьому не відпускаючи Shift): ___. Відпустіть Shift.
• Тепер натисніть клавішу Enter. Ви побачите товсту горизонтальну суцільну лінію.

Підіб'ємо деякі підсумки у вигляді таблиці:

(Клікніть, щоб збільшити) Лінії в Word за допомогою клавіатури

­­­­­­­­­­­­­­­­­­­­­

II Лінія в Word за допомогою таблиці

Горизонтальну лінію можна отримати, якщо використовувати таблицю з однієї клітини (1×1), в якій забарвлена ​​(буде видимою) тільки верхня або нижня межа, а три сторони таблиці мають незафарбовані межі (вони будуть невидимими).

Ставимо курсор у місце, де має бути лінія. У верхньому меню Word натискаємо:

• Вставка (1 на рис. 3),
• Таблиця (2 на рис. 3),
• Одна клітка (3 на рис. 3).

Мал. 3. Як у Ворді вставити таблицю 1х1 (з однієї клітини)

В результаті вийде таблиця з однієї великої клітини (1х1):

Залишилось у таблиці 1х1 із трьох сторін прибрати кордони. Для цього

• переходимо у вкладку «Головна» (1 на рис. 4),
• далі поряд із «Шрифт» знаходимо «Абзац» та кордони (2 на рис. 4),
• прибираємо всі кордони, клікнувши «Немає кордону» (3 на рис. 4),
• виділяємо "Верхня межа" або "Нижня межа" (4 на рис. 4).

Мал. 4. Як у таблиці Ворд прибрати виділення кордонів (зробити межі невидимими)

Наочно я це показую у відео (наприкінці статті).

До речі, на рис. 3 видно, що є спосіб простіший. Можна поставити курсор на початок рядка в Word і натиснути «Горизонтальна лінія» (5 на рис. 4):

III Лінія в Word за допомогою малювання

Вставка (1 на рис. 5) – Фігури (2 на рис. 5) – це ще один спосіб отримати у Ворд горизонтальну лінію.

Щоб лінія була строго горизонтальна, слід тримати натиснутою клавішу Shift і одночасно малювати лінію.

Мал. 5. Як намалювати лінію у Word

IV Лінія у Ворді за допомогою екранної клавіатури

Щоб знайти екранну клавіатуру, в Пошук вводимо фразу «екранна клавіатура», докладніше для Windows 7 і Windows 8 .

Для Windows 10 можна також знайти екранну клавіатуру шляхом введення в рядок Пошуку слів «екранна клавіатура».

Мал. 6. Екранна клавіатура

Горизонтальну лінію створюватимемо так само, як у першому варіанті зі звичайною клавіатурою. На екранній клавіатурі знадобиться три кнопки: тире, Shift та Enter.

1 Тире та Enter

З нового рядка Word кілька разів клацаємо по тирі (1 на рис. 6) і тиснемо на Enter. Вийде тонка горизонтальна лінія.

2 Shift, тире та Enter

З нового рядка Word клік спочатку Shift (2 на рис. 6), потім Тіре (1 на рис. 6). Вийде підкреслення. Так повторимо ще 2 рази, а потім натиснемо на Enter. В результаті побачимо товсту горизонтальну лінію.

Горизонтальні лініїформуються непарним (закриває тега не потрібно) тегом

До речі можна також використовувати властивості стилів блоків

Подібні поради

Як записати диск для автомагнітоли, щоб потім не виникло проблем

Як перейти на Теле2 зі збереженням номера з МТС, Мегафон та Білайн

Народжений, щоб бігти: огляд смартфона Sony XPERIA Go Інформація про тип гучномовців та аудіотехнології, що підтримуються пристроєм

Як перевстановити Windows на ноутбук Asus?

Захист та попередження про небезпеку

1 емулятор ліцензії windows 7 x64