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

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

วิธีการ 1

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

ใช้ HTML 4.01

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

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

โฆษณา

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

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

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

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

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

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

พิมพ์ <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 ได้เลย

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

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

 <!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

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

คุณแก้ไขเอกสาร 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>"

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

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

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

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

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

พิมพ์ 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>

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

 <!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