Съдържание

• Стъпки
• Метод 1 от 2: Работа в HTML 4.01
• Метод 2 от 2: Работа в CSS / HTML5

Тази статия ще ви покаже как да добавите хоризонтална линия в HTML. Хоризонталната линия може да се използва за отделяне на съдържание в сайта. Кодът за създаване на реда е доста прост. Въпреки това, в HTML 4.01 е възможно да се промени дизайна на ред с помощта на вътрешни команди. В HTML5 ще трябва да използвате CSS за оформяне на линията.

Стъпки

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

1. 1 Отворете съществуващ или създайте нов HTML документ. HTML документите могат да се редактират с текстов редактор като Notepad или специализиран редактор на кодове като Adobe Dreamweaver. Следвайте тези стъпки, за да отворите HTML документ в избраната от вас програма:
   • Отворете Notepad или друг редактор на текст / код.
   • Отворете менюто Файл.
   • Кликнете върху Отворено.
   • Изберете HTML файла.
   • Кликнете върху Отворено
2. 2 Изберете мястото, където искате да вмъкнете реда. Превъртете надолу, докато намерите реда, над който трябва да се появи линията, след което преместете курсора директно в началото на този ред, като щракнете върху най -лявата част на този ред.
3. 3 Добавете празен ред. Двойно почукване Въведетеза да преместите надолу текста, преди който искате да вмъкнете ред, и след това поставете курсора на празен ред.
4. 4 Добавяне на маркер hr>. Въведете hr> към празното място в началото на реда. Етикет hr> ви позволява да нарисувате хоризонтална линия по цялата страница.
5. 5 Преместете курсора след маркера "hr" на нов ред, като натиснете Въведете. Сега етикетът hr> трябва да бъде на отделен ред.
6. 6 Добавете атрибути към хоризонталната линия (по избор). Добавете атрибути като дължина, дебелина, цвят и подравняване. Затворете ги в къдрави скоби веднага след "hr". За да добавите няколко атрибута, разделете ги с интервал.
   • Въведете hr size = "#">за промяна на дебелината на линията. Заменете "#" с числова стойност на дебелината (например size = "10").
   • Въведете hr width = "#">за да промените ширината на линията. Заменете "#" с броя пиксели или процент от ширината на страницата (например width = "200" или width = "75%").
   • Въведете hr color = "#">за да промените цвета на линията. Заменете "#" с името на цвета или неговия шестнадесетичен код (например color = "red" или color = "# FF0000").
   • Въведете hr align = "#">за подравняване на линията. Заменете „#“ с „вдясно“ (вдясно), „вляво“ (вляво) или „в центъра“ (в центъра) (например, hr width = "50%" align = "center">).
7. 7 Запазете HTML файла. За да запазите текстов файл като HTML документ, трябва да промените разширението на файла (.txt, .docx) на „.html“. Следвайте тези стъпки, за да запазите вашия HTML документ:
   • Отворете менюто Файл.
   • Кликнете върху Запази като.
   • Въведете име за файла в полето Име на файл.
   • Добавяне .html след името на файла.
   • Кликнете върху Запазване.
8. 8 Проверете вашия HTML документ. За да проверите HTML файла, щракнете с десния бутон върху него и изберете Open With. След това изберете вашия уеб браузър. Трябва да се появи плътна линия, където сте поставили маркера "hr". HTML кодът ще изглежда така:

   ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Този ред трябва да бъде отделен от заглавието с ред . / P1> / body> / html>

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

1. 1 Отворете съществуващ или създайте нов HTML документ. HTML документите могат да бъдат редактирани с текстов редактор като Notepad или специализиран код редактор като Adobe Dreamweaver. Следвайте тези стъпки, за да отворите HTML документ в избраната от вас програма:
   • Отворете Notepad или друг редактор на текст / код.
   • Отворете менюто Файл.
   • Кликнете върху Отворено.
   • Изберете HTML файла.
   • Кликнете върху Отворено
2. 2 Добавете заглавие към вашия HTML документ. Ако вашият HTML документ все още няма заглавие, следвайте тези стъпки, за да го добавите. Заглавието трябва да върви след html> tag и преди body> tag.
   • Въведете глава> в горната част на документа.
   • Двойно почукване Въведетеза да добавите два нови реда.
   • Въведете / глава>за затваряне на заглавието.
3. 3 Въведете style type = "text / css"> вътре в заглавката. Етикетът за стил се поставя между двата маркера за заглавие, за да се създаде място, където можете да използвате CSS за промяна на HTML дизайна.
   • Като алтернатива можете да използвате външен стилов лист. Прочети статията "Как да вмъкнете CSS файл в HTML»За да научите как да свържете външен CSS файл с HTML файл.
4. 4 Въведете час {. Това е CSS етикетът за оформяне на хоризонталната линия. Добавете го след маркера „style“ във вашата заглавка или външен CSS файл.
5. 5 Добавете CSS стилове за маркер hr>. Те трябва да идват след маркера "hr {". Хоризонталната линия може да бъде оформена по различни начини. По -долу са някои от тях.
   • Въведете ширина: ## px;за да регулирате ширината на линията. Заменете „##“ с ширината на линията в пиксели. Вместо пиксели (px), можете да използвате процент (%).
   • Въведете височина: ## px;за да регулирате теглото на линията. Заменете „##“ с ширината на линията в пиксели.
   • Въведете Цвят на фона: ##;за да зададете цвета на линията. Заменете „##“ с име на цвят или хеш (#), последвано от шестнадесетичен цветен код.
   • Въведете margin-right: ## px;за да зададете броя на пикселите от десния ръб. Заменете „##“ с числов брой пиксели или кода „автоматично“. Въведете „auto“, за да подравните линията вляво или в центъра.
   • Въведете margin-left: ## px;за да зададете броя на пикселите от левия ръб. Заменете „##“ с числов брой пиксели или кода „автоматично“. Въведете „auto“, за да подравните линията надясно или в центъра.
   • Въведете margin-top: ## px; за да посочите горната подложка за реда. Заменете „##“ с число, съответстващо на подложката в пиксели.
   • Въведете margin-bottom: ## px;за да посочите долната подложка за реда. Заменете „##“ с число, съответстващо на подложката в пиксели.
   • Въведете border-width: ## px;да нарисувате кутия около линията (по избор). Заменете „##“ с число, съответстващо на ширината на рамката в пиксели.
   • Въведете border-color: ##;за да посочите цвета на рамката (по избор). Заменете „##“ с име на цвят или хеш (#), последвано от шестнадесетичен цветен код.
6. 6 Въведете } след атрибутите на стила, за да завършите оформянето на маркера hr>.
7. 7 Въведете hr> навсякъде в тялото на HTML документа, за да добавите хоризонтална линия. Настройките за CSS стил ще се прилагат всеки път, когато използвате маркер hr> във вашия HTML документ. Вашият код трябва да изглежда така:

   ! DOCTYPE html> html> head> style type = "text / css"> hr {width: 50%; височина: 20px; цвят на фона: червен; margin-right: auto; margin-left: auto; margin-top: 5px; margin-bottom: 5px; border-width: 2px; цвят на границата: зелен; } / style> / head> body> h1> Heading / h1> hr> p1> Този ред трябва да бъде отделен от заглавието с хоризонтална линия / p1> / body> / html>