บทเรียนออนไลน์ คุณครูอิทธิวิธิ สินศิริ

1.11 การตีเส้นแนวนอน (Horizontal Line) ด้วยแท็ก <hr>

นอกจากการกำหนดรูปแบบคำสั่งๆ ให้กับเอกสาร HTML แล้ว เราก็ยังสามารถทำการ
ตีเส้นเพื่อแยกเอกสารออกเป็นส่วนๆ เพื่อให้ดูสวยงามมากขึ้น โดยใช้แท็กคำสั่งดังนี้

รูปแบบ

<hr>

สำหรับคำสั่งนี้ไม่มีแท็กปิด ในกรณีที่ใช้แท็กปกติ<hr> เราจะได้เส้นแบบเต็มความกว้าง
ของหน้าต่างเบราว์เซอร์ขณะนั้น แต่ถ้าต้องการกำหนดรูปแบบการตีเส้น เราจะต้องใช้คำสั่งเสริมในการกำหนด
ความหนา, ความยาว, การจัดวางตำแหน่ง, และการกำหนดเส้นทึบให้กับเส้นโดยใช้รูปแบบ ดังนี้

รูปแบบ

โดยที่

Size	เป็นการกำหนดความหนาให้กับเส้น ขนาดปกติคือ 2 พิกเซล (pixels)
Width	เป็นการกำหนดความยาวให้กับเส้นเป็นพิกเซล หรืออาจจะระบุเป็นตัวเลข % ของความกว้าง ของหน้าต่างเบราว์เซอร์ขณะนั้นก็ได้ แต่หากไม่ระบุตัวเลขใดๆ จะได้ความยาวของเส้น เต็มตามความกว้างของหน้าต่างเบราว์เซอร์
Align	เป็นการกำหนดตำแหน่งการจัดวาง (Position) ของเส้น ประกอบด้วย Left กำหนดการจัดวางตำแหน่งของเส้นชิดซ้ายบรรทัด Center กำหนดการจัดวางตำแหน่งของเส้นกึ่งกลางบรรทัด right กำหนดการจัดวางตำแหน่งของเส้นชิดขวาบรรทัด
noshade	เป็นการกำหนดให้แสดงเส้นทึบไม่มีการแลเงาของเส้น
color	เป็นการกำหนดสีให้กับเส้น

ตัวอย่างการใช้คำสั่งการตีเส้นในเอกสารร่วมกับคำสั่งการจัดรูปแบบเอกสาร

<!DOCTYPE html>
<html>
<head>
<title> Horizotal line Tag</title>
</head>
<body>
        <h3> <center> รายชื่อหนังสือ </center> </h3>
        <hr size=3 width=50% align=center>
     <pre>
           รหัสวิชา               ชื่อวิชา                                        ราคาปก
             20204         โปรแกรมมัลติมีเดีย                                 125
             20203         โปรแกรมตารางคำนวณ                             95
             20202        โปรแกรมกราฟิก                                     140
             20201         โปรแกรมประมวลผลคำ                             95
    </pre>
    <hr size=2 width=300 align=center noshade>

</body>
</html>

ผลที่ได้บนเว็บเบราว์เซอร์