Як дадаць гарызантальную лінію ў HTML

Відэа: Полное руководство по Google Forms - универсальный инструмент для опросов и сбора данных онлайн!

Задаволены

крокі
Метад 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-дакуменце. Ваш код павінен выглядаць прыкладна наступным чынам: