เนื้อหา

• ขั้นตอน
• วิธีที่ 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 เพิ่มแอตทริบิวต์ให้กับเส้นแนวนอน (ไม่บังคับ) เพิ่มแอตทริบิวต์ เช่น ความยาว ความหนา สี และการจัดตำแหน่ง ใส่เหล็กจัดฟันทันทีหลัง "ชม." หากต้องการเพิ่มแอตทริบิวต์หลายรายการ ให้คั่นด้วยการเว้นวรรค
   • เข้า ขนาดชั่วโมง = "#">เพื่อเปลี่ยนความหนาของเส้น แทนที่ "#" ด้วยค่าความหนาที่เป็นตัวเลข (เช่น size = "10")
   • เข้า hr width = "#">เพื่อเปลี่ยนความกว้างของเส้น แทนที่ "#" ด้วยจำนวนพิกเซลหรือเปอร์เซ็นต์ของความกว้างของหน้า (เช่น width = "200" หรือ width = "75%")
   • เข้า ชั่วโมงสี = "#">เพื่อเปลี่ยนสีเส้น แทนที่ "#" ด้วยชื่อของสีหรือรหัสฐานสิบหก (เช่น color = "red" หรือ color = "# FF0000")
   • เข้า hr align = "#">เพื่อจัดแนวเส้น แทนที่ "#" ด้วย "right" (ขวา), "left" (ซ้าย) หรือ "center" (กลาง) (เช่น 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> และก่อนแท็ก body>
   • เข้า หัว> ที่ด้านบนของเอกสาร
   • แตะสองครั้ง ↵ ป้อนเพื่อเพิ่มสองบรรทัดใหม่
   • เข้า / หัว>เพื่อปิดชื่อเรื่อง
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;เพื่อปรับน้ำหนักเส้น แทนที่ "##" ด้วยความกว้างของบรรทัดเป็นพิกเซล
   • เข้า สีพื้นหลัง: ##;เพื่อระบุสีเส้น แทนที่ ## ด้วยชื่อสีหรือแฮช (#) ตามด้วยรหัสสีฐานสิบหก
   • เข้า ระยะขอบขวา: ## px;เพื่อระบุจำนวนพิกเซลจากขอบด้านขวา แทนที่ "##" ด้วยจำนวนพิกเซลหรือรหัส "auto" ป้อน "อัตโนมัติ" เพื่อจัดแนวเส้นไปทางซ้ายหรือตรงกลาง
   • เข้า ระยะขอบซ้าย: ## px;เพื่อระบุจำนวนพิกเซลจากขอบด้านซ้าย แทนที่ "##" ด้วยจำนวนพิกเซลหรือรหัส "auto" ป้อน "อัตโนมัติ" เพื่อจัดแนวเส้นให้ชิดขวาหรือตรงกลาง
   • เข้า ระยะขอบบน: ## px; เพื่อระบุการเติมด้านบนสำหรับบรรทัด แทนที่ "##" ด้วยตัวเลขที่สอดคล้องกับช่องว่างภายในเป็นพิกเซล
   • เข้า ระยะขอบล่าง: ## px;เพื่อระบุช่องว่างภายในด้านล่างสำหรับบรรทัด แทนที่ "##" ด้วยตัวเลขที่สอดคล้องกับช่องว่างภายในเป็นพิกเซล
   • เข้า ความกว้างของเส้นขอบ: ## px;เพื่อวาดกล่องรอบเส้น (ไม่บังคับ) แทนที่ "##" ด้วยตัวเลขที่สอดคล้องกับความกว้างของเส้นขอบเป็นพิกเซล
   • เข้า เส้นขอบสี: ##;เพื่อระบุสีเส้นขอบ (ไม่บังคับ) แทนที่ ## ด้วยชื่อสีหรือแฮช (#) ตามด้วยรหัสสีฐานสิบหก
6. 6 เข้า } หลังจากแอตทริบิวต์ style เพื่อทำให้การจัดสไตล์สำหรับแท็ก hr> เสร็จสมบูรณ์
7. 7 เข้า ชั่วโมง> ที่ใดก็ได้ในเนื้อหาของเอกสาร HTML เพื่อเพิ่มเส้นแนวนอน การตั้งค่าสไตล์ CSS จะถูกนำไปใช้ทุกครั้งที่คุณใช้แท็ก hr> ในเอกสาร HTML ของคุณ รหัสของคุณควรมีลักษณะดังนี้:

   ! DOCTYPE html> html> หัว> ประเภทสไตล์ = "ข้อความ / css"> ชม {ความกว้าง: 50%; ความสูง: 20px; พื้นหลังสี: สีแดง; ระยะขอบขวา: อัตโนมัติ; ระยะขอบซ้าย: อัตโนมัติ; ขอบบน: 5px; ระยะขอบล่าง: 5px; ความกว้างของเส้นขอบ: 2px; ขอบสี: สีเขียว; } / style> / head> body> h1> Heading / h1> hr> p1> บรรทัดนี้ควรแยกจากส่วนหัวด้วยเส้นแนวนอน / p1> / body> / html>