วิธีการ ใส่เส้นนอนใน HTML

บทความวิกิฮาวนี้จะแนะนำวิธีการสร้างเส้นนอนใน HTML เส้นนอนนี้ใช้แบ่งเนื้อหาในเว็บไซต์ออกจากกันให้เห็นเด่นชัด โค้ดที่ใช้สร้างเส้นนี้ก็ไม่ซับซ้อนอะไร ถ้าเป็น HTML 4.01 ต้องเขียนโค้ดเป็นบรรทัด ถ้าเป็น HTML5 ให้ใช้ CSS สร้างเส้นแทน ^{[1]
X
แหล่งข้อมูลอ้างอิง}

วิธีการ 1

วิธีการ 1 ของ 2:

ใช้ HTML 4.01

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/18\/658928-1-1.jpg\/v4-460px-658928-1-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/18\/658928-1-1.jpg\/v4-728px-658928-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

คุณแก้ไขเอกสาร HTML ได้ด้วย text editor อย่าง Notepad หรือใช้ code editor อย่าง Adobe Dreamweaver ก็ได้ ให้ทำตามขั้นตอนต่อไปนี้ เพื่อเปิดเอกสาร HTML ในโปรแกรมที่ถนัด

โฆษณา

เปิด Notepad หรือ text editor/code editor ที่ถนัด
คลิกเมนู File
คลิก Open
เลือกไฟล์ HTML
คลิก Open

เลือกจุดที่จะใส่เส้น. เลื่อนลงไปยังบรรทัดเหนือจุดที่จะใส่เส้นนอน แล้วคลิกทางซ้ายสุดของบรรทัด เพื่อให้เคอร์เซอร์โผล่มาก่อนจุดที่จะใส่เส้นนอนพอดี

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cf\/658928-2-1.jpg\/v4-460px-658928-2-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cf\/658928-2-1.jpg\/v4-728px-658928-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

เว้นที่ว่าง. กด ↵ Enter 2 ครั้ง เพื่อเลื่อนข้อความเหนือจุดที่จะใส่เส้นนอนลงไปข้างล่าง แล้วเลื่อนเคอร์เซอร์ขึ้นไปตรงพื้นที่ว่างนั้น

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0b\/658928-3-1.jpg\/v4-460px-658928-3-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0b\/658928-3-1.jpg\/v4-728px-658928-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ใส่แท็ก "<hr>". พิมพ์ <hr> ตรงที่ว่าง ก่อนเริ่มบรรทัด แท็ก <hr> ใช้สร้างเส้นนอนตัดผ่านกลางหน้า

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/73\/658928-4-1.jpg\/v4-460px-658928-4-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/73\/658928-4-1.jpg\/v4-728px-658928-4-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ขยับบรรทัดหน้าแท็ก "hr" ไปเป็นบรรทัดใหม่. โดยกด ↵ Enter ตอนนี้แท็ก <hr> ก็จะอยู่ในบรรทัดของตัวเอง

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c0\/658928-5-1.jpg\/v4-460px-658928-5-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c0\/658928-5-1.jpg\/v4-728px-658928-5-1.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

กำหนด attributes ให้เส้นนอน (ไม่จำเป็น). คุณกำหนด attributes หรือคุณสมบัติ ให้เส้นนอนได้ เช่น ความยาว ความกว้าง สี และการปรับแนว (alignment) ให้ใส่โค้ดต่อไปนี้ตามหลัง "hr" ในวงเล็บแหลมๆ จะกำหนดมากกว่า 1 attribute ในวงเล็บก็ได้ โดยเว้นวรรคเพื่อแยกจากกัน ^{[2]
X
แหล่งข้อมูลอ้างอิง}

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f3\/658928-6-1.jpg\/v4-460px-658928-6-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/658928-6-1.jpg\/v4-728px-658928-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

พิมพ์ <hr size="#"> เพื่อกำหนดความหนาของเส้น โดยเปลี่ยน # เป็นค่าความหนา (เช่น size="10")
พิมพ์ <hr width="#"> เพื่อกำหนดความกว้างของเส้น โดยเปลี่ยน # เป็นค่าความกว้างแบบพิกเซล หรือเปอร์เซ็นต์ความกว้างของหน้า (เช่น width="200" หรือ width="75%")
พิมพ์ <hr color="#"> เพื่อกำหนดสีของเส้น โดยเปลี่ยน # เป็นชื่อสีหรือโค้ด hexadecimal (เช่น color="red" หรือ color="#FF0000")
พิมพ์ <hr align="#"> เพื่อ align หรือปรับแนวเส้น โดยเปลี่ยน # เป็น "right" (ขวา), "left" (ซ้าย) หรือ "center" (ตรงกลาง) (เช่น <hr width="50%" align="center"> )

เซฟไฟล์ HTML. เพื่อเซฟไฟล์ text เป็นเอกสาร HTML ให้เปลี่ยนนามสกุลไฟล์ (file extension เช่น .txt, .docx) เป็น ".html" ทำตามขั้นตอนต่อไปนี้ เพื่อเซฟเอกสาร HTML ได้เลย

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/658928-7-1.jpg\/v4-460px-658928-7-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/658928-7-1.jpg\/v4-728px-658928-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

คลิกเมนู File
คลิก Save As
พิมพ์ชื่อไฟล์ข้าง "File name"
พิมพ์ .html ท้ายชื่อไฟล์
คลิก Save

ทดสอบ HTML. ทดสอบไฟล์ HTML คลิกขวาที่ไฟล์ แล้วเลือก Open with จากนั้นเลือกเบราว์เซอร์ จะมีเส้นทึบโผล่มาตรงจุดที่ใส่แท็ก "hr" ไว้ โค้ด HTML ที่ได้จะออกมาหน้าตาประมาณนี้ ^{[3]
X
แหล่งข้อมูลอ้างอิง}

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/658928-8-1.jpg\/v4-460px-658928-8-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/658928-8-1.jpg\/v4-728px-658928-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
นี่คือ Heading </ 
 h1 
 > 
 < 
 hr 
 size 
 = 
 "6" 
 width 
 = 
 "50%" 
 align 
 = 
 "left" 
 color 
 = 
 "green" 
 > 
 < 
 p1 
 > 
นี่คือย่อหน้าข้อความที่แยกจาก heading ชัดเจน โดยคั่นด้วยเส้นนอน </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >

วิธีการ 2

วิธีการ 2 ของ 2:

ใช้Using CSS/HTML5

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

คุณแก้ไขเอกสาร HTML ได้ด้วย text editor อย่าง Notepad หรือใช้ code editor อย่าง Adobe Dreamweaver ก็ได้ ให้ทำตามขั้นตอนต่อไปนี้ เพื่อเปิดเอกสาร HTML ในโปรแกรมที่ถนัด

เปิด Notepad หรือ text editor/code editor ที่ถนัด
คลิกเมนู File
คลิก Open
เลือกไฟล์ HTML
คลิก Open

ใส่ head ของเอกสาร HTML. ถ้าเอกสาร HTML ยังไม่มี head ให้ทำตามขั้นตอนต่อไปนี้เพื่อใส่ head โดย head จะต่อท้ายแท็ก "<html>" และนำหน้าแท็ก "<body>"

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/658928-10-1.jpg\/v4-460px-658928-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/658928-10-1.jpg\/v4-728px-658928-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

พิมพ์ <head> ทางด้านบนของเอกสาร
กด ↵ Enter 2 ครั้งเพื่อเพิ่มบรรทัดใหม่ 2 บรรทัด
พิมพ์ </head> เพื่อปิด head

พิมพ์ <style type="text/css"> ใน head. แท็ก style จะอยู่ระหว่างแท็ก head 2 แท็ก ใช้สร้างพื้นที่สำหรับใส่โค้ด CSS เพื่อกำหนดสไตล์ของ HTML

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ca\/658928-11-1.jpg\/v4-460px-658928-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/658928-11-1.jpg\/v4-728px-658928-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

หรือใช้ style sheet จากแหล่งอื่นก็ได้ ลองอ่าน " How to Add a CSS File to HTML " ดู ว่าจะลิงค์ไฟล์ CSS จากแหล่งอื่น กับไฟล์ HTML ของตัวเองยังไง

พิมพ์ hr { . ที่เป็นแท็ก CSS สำหรับกำหนดสไตล์ของเส้นนอน ให้พิมพ์ต่อท้ายแท็ก style ใน head หรือในไฟล์ CSS จากแหล่งอื่น

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/658928-12-1.jpg\/v4-460px-658928-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/658928-12-1.jpg\/v4-728px-658928-12-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ใช้ CSS กำหนดสไตล์ให้แท็ก "<hr>". โดยต่อท้ายแท็ก "hr {" คุณกำหนดสไตล์ให้เส้นนอนได้หลายแบบ ต่อไปนี้เป็นแค่ตัวอย่างบางส่วนเท่านั้น

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/658928-13-1.jpg\/v4-460px-658928-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/658928-13-1.jpg\/v4-728px-658928-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

พิมพ์ width: ##px; เพื่อกำหนดความกว้างของเส้น โดยเปลี่ยน ## เป็นเลขพิกเซลกำหนดความกว้างของเส้น หรือใช้เลขเปอร์เซ็นต์ (%) แทนพิกเซล (px) ก็ได้
พิมพ์ height: ##px; เพื่อกำหนดความหนาของเส้น โดยเปลี่ยน ## เป็นเลขพิกเซลกำหนดความหนาของเส้น
พิมพ์ background-color: ##; เพื่อกำหนดสีของเส้น โดยเปลี่ยน ## เป็นชื่อสีหรือเครื่องหมายสี่เหลี่ยม (#) ตามด้วยโค้ดสีแบบ hexadecimal
พิมพ์ margin-right: ##px; เพื่อกำหนดเลขพิกเซลจากขอบขวา โดยเปลี่ยน ## เป็นเลข หรือพิกเซล หรือ "auto" ให้พิมพ์ "auto" เพื่อ align ปรับแนวเส้นชิดซ้ายหรือตรงกลาง
พิมพ์ margin-left: ##px; เพื่อกำหนดเลขพิกเซลจากขอบซ้าย โดยเปลี่ยน ## เป็นเลข หรือพิกเซล หรือ "auto" ให้พิมพ์ "auto" เพื่อ align ปรับแนวเส้นชิดขวาหรือตรงกลาง
พิมพ์ margin-top: ##px; เพื่อกำหนด margin ด้านบนของเส้น โดยเปลี่ยน ## เป็นเลข หรือพิกเซลกำหนดความหนาของ margin
พิมพ์ margin-bottom: ##px; เพื่อกำหนด margin ด้านล่างของเส้น โดยเปลี่ยน ## เป็นเลขพิกเซลกำหนดความหนาของ margin
พิมพ์ border-width: ##px; เพื่อกำหนดเส้นกรอบรอบเส้น (ไม่จำเป็น) โดยเปลี่ยน ## เป็นเลขพิกเซลกำหนดความหนาของกรอบ
พิมพ์ border-color: ##; เพื่อกำหนดสีกรอบ (ไม่จำเป็น) โดยเปลี่ยน ## เป็นชื่อสี หรือเครื่องหมายสี่เหลี่ยม (#) ตามด้วยโค้ดสีแบบ hexadecimal

พิมพ์ } ต่อท้าย style settings. เพื่อปิด style settings ของแท็ก <hr>

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/658928-14-1.jpg\/v4-460px-658928-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/658928-14-1.jpg\/v4-728px-658928-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

พิมพ์ <hr> ตรงไหนก็ได้ใน body หรือเนื้อหาของเอกสาร HTML. เพื่อใส่เส้นนอนในเอกสาร HTML ของคุณ style settings ของ CSS จะมีผลทุกครั้งที่ใช้แท็ก <hr> ใน HTML ^{[4]
X
แหล่งข้อมูลอ้างอิง} โค้ดที่ได้จะออกมาหน้าตาประมาณนี้

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/658928-15-1.jpg\/v4-460px-658928-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/658928-15-1.jpg\/v4-728px-658928-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 type 
 = 
 "text/css" 
 > 
 hr 
 { 
 width 
 : 
 50 
 % 
 ; 
 height 
 : 
 20 
 px 
 ; 
 background-color 
 : 
 red 
 ; 
 margin-right 
 : 
 auto 
 ; 
 margin-left 
 : 
 auto 
 ; 
 margin-top 
 : 
 5 
 px 
 ; 
 margin-bottom 
 : 
 5 
 px 
 ; 
 border-width 
 : 
 2 
 px 
 ; 
 border-color 
 : 
 green 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
นี่คือ heading </ 
 h1 
 > 
 < 
 hr 
 > 
 < 
 p1 
 > 
นี่คือย่อหน้าข้อความที่แยกจาก heading ชัดเจน โดยคั่นด้วยเส้นนอน </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >

[1]

[2]

[3]

[4]

เข้าสู่ระบบ

วิธีการ ใส่เส้นนอนใน HTML

ขั้นตอน

ใช้ HTML 4.01

ใช้Using CSS/HTML5

บทความวิกิฮาวอื่น ๆ ที่่เกี่ยวข้อง

ข้อมูลอ้างอิง

เกี่ยวกับวิกิฮาวนี้

บทความนี้เป็นประโยชน์กับคุณไหม

บทความที่เกี่ยวข้อง

บทความฮาว-ทูที่โดดเด่น

บทความฮาวทูที่ติดเทรนด์

บทความฮาว-ทูที่โดดเด่น

บทความฮาว-ทูที่โดดเด่น

บทความฮาว-ทูที่โดดเด่น

บทความฮาว-ทูที่โดดเด่น

Explore Categories