Բովանդակություն

• Քայլեր
• Մեթոդ 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> պիտակը: Մուտքագրեք ժամ> դեպի տողի սկզբի դատարկ տարածություն: Պիտակ ժամ> թույլ է տալիս հորիզոնական գիծ գծել ամբողջ էջի վրա:
5. 5 «Hr» պիտակից հետո կուրսորը տեղափոխեք նոր տող ՝ սեղմելով Մուտքագրեք. Այժմ պիտակը ժամ> պետք է լինի առանձին տողում:
6. 6 Ավելացրեք հատկանիշներ հորիզոնական գծին (ըստ ցանկության): Ավելացրեք այնպիսի հատկանիշներ, ինչպիսիք են երկարությունը, հաստությունը, գույնը և հավասարեցումը: Փակեք դրանք գանգուր ամրակներով «ժամից» անմիջապես հետո: Բազմաթիվ հատկանիշներ ավելացնելու համար դրանք առանձնացրեք բացատով:
   • Մուտքագրեք hr size = "#">փոխել գծի հաստությունը: Փոխարինեք «#» - ը թվային հաստության արժեքով (օրինակ ՝ size = "10"):
   • Մուտքագրեք hr width = "#">փոխել գծի լայնությունը: Փոխարինեք «#» - ը պիքսելների քանակով կամ էջի լայնության տոկոսով (օրինակ ՝ width = "200" կամ width = "75%"):
   • Մուտքագրեք hr color = "#">փոխել տողի գույնը: «#» - ը փոխարինեք գույնի կամ դրա տասնվեցերորդ ծածկագրի անունով (օրինակ ՝ գույն = «կարմիր» կամ գույն = «# FF0000»):
   • Մուտքագրեք hr align = "#">գիծը հավասարեցնելու համար: «#» - ը փոխարինեք «աջ» (աջ), «ձախ» (ձախ) կամ «կենտրոն» (կենտրոն) (օրինակ, hr width = "50%" align = "center">).
7. 7 Պահպանեք HTML ֆայլը: Տեքստային ֆայլը որպես HTML փաստաթուղթ պահելու համար դուք պետք է փոխեք ֆայլի ընդլայնումը (.txt, .docx) «.html» - ի: Հետևեք այս քայլերին ՝ ձեր HTML փաստաթուղթը պահպանելու համար.
   • Բացեք ընտրացանկը Ֆայլ.
   • Կտտացրեք Պահպանել որպես.
   • Մուտքագրեք ֆայլի անունը Ֆայլի անուն դաշտում:
   • Ավելացնել .html ֆայլի անունից հետո:
   • Կտտացրեք Պահել.
8. 8 Ստուգեք ձեր HTML փաստաթուղթը: HTML ֆայլը ստուգելու համար աջ սեղմեք դրա վրա և ընտրեք Բացել հետ: Այնուհետեւ ընտրեք ձեր վեբ դիտարկիչը: Այն վայրում, որտեղ տեղադրեցիք «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> պիտակից և մարմնի> պիտակից առաջ:
   • Մուտքագրեք գլուխ> փաստաթղթի վերևում:
   • Կրկնակի թակել Մուտքագրեքավելացնել երկու նոր տող:
   • Մուտքագրեք / գլուխ>տիտղոսը փակելու համար:
3. 3 Մուտքագրեք style type = "text / css"> վերնագրի ներսում: Ոճի պիտակը տեղադրվում է երկու վերնագրի պիտակների միջև ՝ ստեղծելու մի վայր, որտեղ կարող եք օգտագործել CSS- ը ՝ HTML դիզայնը փոփոխելու համար:
   • Այլապես, կարող եք օգտագործել արտաքին ոճի թերթ: Կարդացեք հոդվածը «Ինչպես տեղադրել CSS ֆայլ HTML- ում»Սովորելու համար, թե ինչպես միացնել արտաքին CSS ֆայլը HTML ֆայլին:
4. 4 Մուտքագրեք ժամ {. Սա CSS պիտակն է ՝ հորիզոնական գիծը ոճավորելու համար: Ավելացրեք այն «ոճ» պիտակից հետո ձեր վերնագրում կամ արտաքին CSS ֆայլում:
5. 5 Ավելացրեք CSS ոճեր hr> պիտակի համար: Նրանք պետք է գան «hr {» պիտակից հետո: Հորիզոնական գիծը կարող է ձևավորվել տարբեր ձևերով: Ստորև ներկայացնում ենք դրանցից մի քանիսը:
   • Մուտքագրեք լայնություն ՝ ## px;գծի լայնությունը կարգավորելու համար: Փոխարինեք «##» - ը գծի լայնությամբ պիքսելներով: Պիքսելների (px) փոխարեն կարող եք օգտագործել տոկոսը (%):
   • Մուտքագրեք բարձրություն ՝ ## px;գծի քաշը կարգավորելու համար: Փոխարինեք «##» - ը գծի լայնությամբ պիքսելներով:
   • Մուտքագրեք Ֆոնի գույնը: ##;գծի գույնը նշելու համար: «##» - ը փոխարինեք գույնի անունով կամ հեշով (#), որին հաջորդում է տասնվեցական գույնի ծածկագիրը:
   • Մուտքագրեք լուսանցք-աջ ՝ ## px;աջ եզրից նշելու համար պիքսելների քանակը: «##» - ը փոխարինեք պիքսելների թվային թվով կամ «ավտո» կոդով: Մուտքագրեք «auto» ՝ գիծը ձախ կամ կենտրոն հավասարեցնելու համար:
   • Մուտքագրեք լուսանցք-ձախ ՝ ## px;ձախ եզրից պիքսելների թիվը նշելու համար: «##» - ը փոխարինեք պիքսելների թվային թվով կամ «ավտո» կոդով: Մուտքագրեք «auto» ՝ գիծը աջ կամ կենտրոն հավասարեցնելու համար:
   • Մուտքագրեք margin-top: ## px; գծի վերևի լցոնումը նշելու համար: «##» - ը փոխարինեք պիքսելներով լիցքավորմանը համապատասխան թվով:
   • Մուտքագրեք լուսանցք-ներքև ՝ ## px;գծի ներքևի ծածկը նշելու համար: «##» - ը փոխարինեք պիքսելներով լիցքավորմանը համապատասխան թվով:
   • Մուտքագրեք եզրագծի լայնություն ՝ ## px;գծի շուրջ տուփ նկարել (ըստ ցանկության): «##» - ը փոխարինեք պիքսելներով եզրագծի լայնությանը համապատասխան թվով:
   • Մուտքագրեք սահման-գույն: ##;սահմանի գույնը նշելու համար (ըստ ցանկության): «##» - ը փոխարինեք գույնի անունով կամ հեշով (#), որին հաջորդում է տասնվեցական գույնի ծածկագիրը:
6. 6 Մուտքագրեք } ոճի ատրիբուտներից հետո լրացնել hr> պիտակի ոճավորումը:
7. 7 Մուտքագրեք ժամ> HTML փաստաթղթի մարմնի ցանկացած կետում `հորիզոնական գիծ ավելացնելու համար: CSS ոճի կարգավորումները կկիրառվեն ամեն անգամ, երբ hr> պիտակը օգտագործում եք ձեր HTML փաստաթղթում: Ձեր ծածկագիրը պետք է ունենա այսպիսի տեսք.

   ! DOCTYPE html> html> գլուխ> style type = "text / css"> ժ {լայնություն `50%; բարձրություն `20px; ֆոնի գույնը `կարմիր; լուսանցք-աջ ՝ ավտոմատ; լուսանցք-ձախ ՝ ավտոմատ; margin-top: 5px; լուսանցք-ներքև ՝ 5 պիքս; եզրագծի լայնությունը `2px; եզրագիծը `կանաչ; } / style> / head> body> h1> Վերնագիր / h1> hr> p1> Այս տողը պետք է բաժանել վերնագրից հորիզոնական գծով / p1> / body> / html>