ตัดเป็น html HTML และ CSS - วิธีสร้างเส้นแนวนอนและแนวตั้ง วิธีเปลี่ยนสี ความหนา และความกว้างของเส้นแนวนอน

เพื่อเน้นองค์ประกอบที่สำคัญบางอย่างของไซต์ การใช้สไตล์และคุณสมบัติ CSS ทุกประเภทที่มีให้สำหรับสิ่งนี้จะไม่เสียหาย แน่นอน คุณไม่ต้องกังวลกับข้อความมากเกินไปและไฮไลต์ข้อความ เช่น เปลี่ยนพื้นหลังหรือสร้างกรอบข้อความเป็นตัวหนาหรือตัวเอียง แต่วิธีใดวิธีหนึ่งที่นำเสนอนั้นไม่เหมาะสมเสมอไป สมมติว่าคุณมีข้อความที่ต้องแบ่งเนื่องจากลักษณะเฉพาะของโหลดความหมาย นี่คือจุดที่คุณสมบัติ HTML และ CSS เข้ามาช่วยเหลือ

วิธีสร้างบรรทัดในข้อความโดยใช้ CSS

เพื่อดำเนินการตามแผนของเรา เราจะต้องติดต่อ ไฟล์ style.cssโดยเขียนคุณสมบัติที่เกี่ยวข้องไว้ในนั้น ชายแดน- ซึ่งจะทำให้มีบรรทัดปรากฏด้านบน ด้านล่าง หรือด้านใดด้านหนึ่งของข้อความ ในทางกลับกัน มีคุณสมบัติหลายประการที่รับผิดชอบในการแสดงเส้น กล่าวคือ:

- ขอบด้านบน– เส้นแนวนอนที่อยู่เหนือข้อความ

- เส้นขอบขวา– เส้นแนวตั้งที่อยู่ทางด้านขวาของข้อความ

- ขอบล่าง– เส้นแนวนอนอยู่ใต้ข้อความ

- ขอบซ้าย– เส้นแนวตั้งอยู่ทางด้านซ้าย.

วิธีสร้างบรรทัดใน html

การใช้คุณสมบัติ CSS คุณสามารถระบุค่าที่จำเป็นทั้งหมดได้โดยแก้ไขโค้ด HTML ในการดำเนินการนี้คุณต้องไปที่ส่วนผู้ดูแลระบบของไซต์ เลือกสื่อสิ่งพิมพ์ที่เผยแพร่ เปลี่ยนโปรแกรมแก้ไขข้อความเป็นโหมดแก้ไขโค้ด HTML และป้อนคุณสมบัติ CSS สามารถดูตัวอย่างได้ด้านล่าง

คำอธิบายคำสั่งโดยย่อ

- ความกว้าง- ความยาวบรรทัด;

- แข็ง- เส้นทึบ

- จุด- จุดไข่ปลา.

เพื่อความเข้าใจสไตล์ที่ลึกซึ้งยิ่งขึ้น ฉันแนะนำให้อ่านอันนี้

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

วิธีนี้มีข้อดีหลายประการ:

ความเป็นไปได้ที่หลากหลายซึ่งคุณสามารถสร้างได้เกือบทุกบรรทัด

ความง่ายดายในการเปลี่ยนแปลงที่จำเป็นทั้งหมดโดยตรงไปยังโค้ด HTML สิ่งนี้ช่วยลดความยุ่งยากให้กับงานสำหรับผู้สร้างไซต์ที่ไม่มีประสบการณ์อย่างมาก

วิธีสร้างเส้นแนวนอนโดยใช้แท็ก HTML

---

สิ่งแรกที่ฉันอยากจะดึงดูดความสนใจของคุณคือแท็กนี้ แม้ว่าแท็กนี้จะมีรายละเอียดปลีกย่อยและหลักการทั้งหมดของ html แต่ก็ไม่มีแท็กปิด สามารถใช้ได้ทุกที่ในโค้ด html ระหว่างแท็ก และ

.

คุณสมบัติของแท็ก

---

- ความกว้าง– มีหน้าที่รับผิดชอบความยาวของเส้น สามารถระบุเป็นเปอร์เซ็นต์หรือเป็นพิกเซลก็ได้

- ขนาด– ความหนาของเส้น ระบุเป็นพิกเซล

- สี– กำหนดสีของเส้น

- จัดตำแหน่ง– คุณลักษณะที่รับผิดชอบในการจัดแนวเส้น ในทางกลับกันทีมก็เกี่ยวข้องกับเขา

สวัสดีทุกคน! วันนี้ผมจะมาบอกวิธีสร้างเส้นแนวนอนโดยใช้ html

ในความเป็นจริง ความจำเป็นในการสร้างเส้นแนวนอนเกิดขึ้นค่อนข้างบ่อย เช่น เมื่อคุณต้องการแยกส่วนหนึ่งของข้อความออกจากอีกส่วนหนึ่ง

เส้นแนวนอนและแนวตั้งโดยใช้ CSS

ซึ่งสามารถทำได้โดยใช้ css ในการทำเช่นนี้ ฉันใส่ส่วนที่ต้องการของข้อความลงในบล็อกโดยใช้แท็ก div จากนั้นในไฟล์ style.css หรือในโค้ด html โดยตรงที่เราเขียนคุณสมบัติของบล็อกนี้สำหรับเส้นขอบด้านบนหรือด้านล่างโดยใช้ border-top และ ขอบล่าง นี่คือตัวอย่าง:

ในกรณีนี้ ฉันตั้งค่าสไตล์โดยใช้ CSS โดยตรงจากโค้ด html และทำให้เส้นขอบด้านบนทึบและเส้นขอบด้านล่างเป็นจุด

นี่คือลักษณะที่ปรากฏบนหน้า:

เส้นแนวนอนโดยใช้ CSS

วิธีนี้มีข้อดี:

• การตั้งค่าที่หลากหลายที่ให้คุณตั้งค่าเส้นได้เกือบทุกประเภท
• คุณสามารถสร้างเส้นทั้งแนวนอนและแนวตั้งได้ หากต้องการสร้างเส้นแนวตั้ง คุณต้องเปลี่ยนขอบบนเป็นขอบซ้าย และเปลี่ยนขอบล่างเป็นขอบขวา

ข้อเสียรวมถึงความยุ่งยากของโค้ด

อย่างไรก็ตาม เมื่อปรากฏออกมา คุณสามารถแทรกเส้นแนวนอนลงในข้อความโดยใช้ html ได้ คุณไม่จำเป็นต้องเข้า css ด้วยซ้ำ แท็กนี้ใช้สำหรับสิ่งนี้

---

.

เส้นแนวนอนโดยใช้แท็ก html

---

คุณลักษณะแรกของแท็กนี้คือไม่มีแท็กปิดที่จับคู่กัน สามารถใช้ได้ทุกที่ในโค้ด html ระหว่างแท็ก และ

.

แท็กนี้มีคุณลักษณะดังต่อไปนี้:

• ความกว้าง– กำหนดความยาวของเส้นแนวนอนของเราเป็นพิกเซลหรือเปอร์เซ็นต์
• สี– กำหนดสีของเส้น;
• จัดตำแหน่ง– กำหนดการจัดตำแหน่งของเส้นไปที่ขอบขวา – ขวา, ขอบซ้าย – ซ้าย, ตรงกลาง – กึ่งกลาง;
• ขนาด– ความหนาของเส้นเป็นพิกเซล

นี่คือตัวอย่างโค้ด html

ดูเหมือนว่าเหตุใดจึงต้องมีสี่วิธี? ท้ายที่สุดแล้วเกือบทุกคนใช้วิธีการเดียวที่เขาคุ้นเคย ตัวอย่างเช่น ฉันกด Shift และแป้น dash หลายครั้ง ดังนั้นฉันจึงได้เส้นแนวนอน

แต่จะเกิดอะไรขึ้นถ้าสิ่งนี้ส่งผลให้เกิดเส้นประ แต่คุณต้องการเส้นทึบล่ะ?
- เป็นไปได้มากว่าปุ่ม Shift บนแป้นพิมพ์ผิดปกติ วิธีอื่นจะมาช่วยเหลือที่นี่

3.
4.
5.

บางทีวิธีทั่วไปที่สุดในการสร้างบรรทัดใน Word ก็คือการใช้ปุ่มสองสามปุ่มบนคีย์บอร์ด

เส้นประบาง หนา สองเส้นโดยใช้แป้นพิมพ์

ด้านล่างนี้เป็นรูปภาพของแป้นพิมพ์ที่มีรูปแบบภาษาอังกฤษ แต่ไม่มีรูปแบบภาษารัสเซีย แต่ก็ไม่สำคัญเพราะเราสนใจเพียงสามปุ่มเท่านั้น: Shift, dash และ Enter

ข้าว. 1. สามปุ่มบนแป้นพิมพ์: Shift, dash และ Enter สำหรับเส้นแนวนอนต่อเนื่องใน Word

ด้วยปุ่มทั้งสามนี้ คุณสามารถวาดเส้นแนวนอนต่อเนื่องใน Word ได้: จุดหรือทึบ บางหรือหนา ยาวหรือสั้น

1) เมื่อคุณกดปุ่ม “-” (เส้นประ) หลายครั้งในโปรแกรมแก้ไข Word คุณจะได้เส้นประที่มีความยาวเท่าใดก็ได้

ทำ บางเส้นยาวพาดผ่านความกว้างทั้งหมดของหน้า:

• เราพบปุ่ม "dash" บนแป้นพิมพ์ (ทางด้านขวาของปุ่ม "ศูนย์" ในกรอบสีเขียวในรูปที่ 1)
• จากบรรทัดใหม่ (!) ใน Word ให้กดปุ่มนี้หลายครั้ง: -
• จากนั้นกดปุ่ม "Enter" () ขีดกลางที่พิมพ์ออกมาบางส่วนจะกลายเป็นเส้นบางๆ แนวนอนต่อเนื่องตลอดความกว้างของหน้า

2) เมื่อคุณกด Shift และ "-" (เส้นประ) พร้อมกัน จะไม่พิมพ์เส้นประ แต่เป็นขีดล่าง _________ วิธีนี้จะทำให้คุณสามารถสร้างเส้นต่อเนื่องตามความยาวใดก็ได้ในเอกสาร

ข้าว. 2. เส้นแนวนอนบางและหนาใน Word

ตอนนี้เรามาพิมพ์ อ้วนเส้นแนวนอนพาดผ่านความกว้างทั้งหมดของหน้า:

• เราพบปุ่ม "เส้นประ" เดียวกันอีกครั้ง เช่นเดียวกับปุ่ม Shift (ทางซ้ายหรือทางขวาตามที่คุณต้องการ) กด Shift ค้างไว้แล้วอย่าปล่อย
• และตอนนี้จากบรรทัดใหม่ (!) ให้คลิกที่เส้นประหลาย ๆ ครั้ง (เช่น 3-4 ครั้ง) (โดยที่ไม่ปล่อย Shift): ___ ปล่อยกะ
• ตอนนี้กดปุ่ม Enter คุณจะเห็นเส้นทึบแนวนอนหนาๆ

มาสรุปผลลัพธ์บางส่วนในรูปแบบของตาราง:

(คลิกเพื่อดูภาพขยาย) บรรทัดใน Word โดยใช้แป้นพิมพ์

­­­­­­­­­­­­­­­­­­­­­

II บรรทัดใน Word โดยใช้ตาราง

เส้นแนวนอนสามารถรับได้โดยใช้ตารางของเซลล์หนึ่งเซลล์ (1x1) ซึ่งมีการลงสีเฉพาะเส้นขอบด้านบนหรือด้านล่างเท่านั้น (จะมองเห็นได้) และอีกสามด้านของตารางมีเส้นขอบที่ไม่มีสี (จะมองไม่เห็น) .

วางเคอร์เซอร์ในตำแหน่งที่ควรจะเป็นบรรทัด ในเมนูด้านบนของ Word คลิก:

• เม็ดมีด (1 ในรูปที่ 3)
• ตาราง (2 ในรูปที่ 3)
• หนึ่งเซลล์ (3 ในรูปที่ 3)

ข้าว. 3. วิธีแทรกตาราง 1x1 (จากเซลล์เดียว) ใน Word

ผลลัพธ์จะเป็นตารางของเซลล์ขนาดใหญ่หนึ่งเซลล์ (1x1):

สิ่งที่เหลืออยู่คือการลบเส้นขอบออกจากสามด้านในตาราง 1x1 สำหรับสิ่งนี้

• ไปที่แท็บ "หน้าแรก" (1 ในรูปที่ 4)
• ถัดจาก "แบบอักษร" เราจะพบ "ย่อหน้า" และเส้นขอบ (2 ในรูปที่ 4)
• ลบเส้นขอบทั้งหมดโดยคลิก "ไม่มีเส้นขอบ" (3 ในรูปที่ 4)
• เลือก “ขอบบน” หรือ “ขอบล่าง” (4 ในรูปที่ 4)

ข้าว. 4. วิธีลบการเลือกเส้นขอบออกจากตาราง Word (ทำให้มองไม่เห็นเส้นขอบ)

ฉันแสดงสิ่งนี้อย่างชัดเจนในวิดีโอ (ท้ายบทความ)

โดยวิธีการในรูป 3 เป็นที่ชัดเจนว่ามีวิธีที่ง่ายกว่า คุณสามารถวางเคอร์เซอร์ไว้ที่จุดเริ่มต้นของบรรทัดใน Word แล้วคลิก "เส้นแนวนอน" (5 ในรูปที่ 4):

III บรรทัดใน Word โดยใช้รูปวาด

แทรก (1 ในรูปที่ 5) - รูปร่าง (2 ในรูปที่ 5) - นี่เป็นอีกวิธีหนึ่งในการรับเส้นแนวนอนใน Word

หากต้องการให้เส้นอยู่ในแนวนอนอย่างเคร่งครัด ให้กดปุ่ม Shift ค้างไว้แล้วลากเส้นไปพร้อมๆ กัน

ข้าว. 5. วิธีวาดเส้นใน Word

IV Line ใน Word โดยใช้แป้นพิมพ์บนหน้าจอ

หากต้องการค้นหาแป้นพิมพ์บนหน้าจอ ให้ป้อนวลี “แป้นพิมพ์บนหน้าจอ” ในการค้นหา รายละเอียดเพิ่มเติมสำหรับ Windows 7 และสำหรับ Windows 8

สำหรับ Windows 10 คุณสามารถค้นหาแป้นพิมพ์บนหน้าจอได้โดยพิมพ์ “แป้นพิมพ์บนหน้าจอ” ลงในแถบค้นหา

ข้าว. 6. แป้นพิมพ์บนหน้าจอ

เราจะสร้างเส้นแนวนอนในลักษณะเดียวกับในตัวเลือกแรกด้วยแป้นพิมพ์ธรรมดา คุณจะต้องมีปุ่มสามปุ่มบนแป้นพิมพ์บนหน้าจอ: ขีดกลาง Shift และ Enter

1 ขีดแล้วเข้า

จากบรรทัดใหม่ใน Word ให้คลิกที่เส้นประ (1 ในรูปที่ 6) หลายครั้งแล้วกด Enter คุณจะได้เส้นแนวนอนบางๆ

2 Shift, ขีดกลาง และ Enter

จากบรรทัดใหม่ใน Word ขั้นแรกให้คลิก Shift (2 ในรูปที่ 6) จากนั้นคลิก Dash (1 ในรูปที่ 6) คุณจะได้รับขีดเส้นใต้ เราจะทำซ้ำอีก 2 ครั้ง จากนั้นกด Enter ส่งผลให้เราจะเห็นเส้นแนวนอนหนาๆ

โดยทั่วไปแล้ว เส้นแนวนอนจะใช้ในการตกแต่งหน้า HTML ของเว็บไซต์ ทำให้ดูน่าสนใจยิ่งขึ้น แต่ยังสามารถแยกแยะข้อมูลออกจากส่วนที่ติดกันด้วยภาพได้ เพิ่มความสะดวกสบายให้กับผู้อ่านเมื่อศึกษาข้อมูล โดยพื้นฐานแล้ว วาดเส้นแนวนอนตรงจุดที่คุณต้องการแค่นั้นเอง

วิธีการวาดเส้นแนวนอน?

มีแท็กพิเศษสำหรับการวาดเส้นแนวนอนในรูปแบบ HTML

---

- และเขาก็เป็น แท็กบล็อกนั่นคือสร้างตัวแบ่งบรรทัดก่อนและหลังตัวมันเอง ดังนั้นบรรทัดจะจบลงที่บรรทัดแยกกันเสมอ ดังนั้นจึงสามารถระบุได้ภายในแท็กที่อาจมีองค์ประกอบบล็อกเท่านั้น หรือ

- แต่ฉันอยู่ที่นี่

---

ไม่สามารถมีเนื้อหาได้เนื่องจากไม่มีแท็กปิด หมายความว่าว่างเปล่า

ตัวอย่างการวาดเส้นแนวนอนในรูปแบบ HTML

---

ย่อหน้า

ย่อหน้า

---

ย่อหน้า

ผลลัพธ์ในเบราว์เซอร์

ย่อหน้า

ย่อหน้า

ย่อหน้า

อย่างที่คุณเห็น เส้นกลายเป็นเส้นบางมาก ไม่สวย และถูกลากจนเต็มความกว้างที่มีอยู่ ดังนั้นตอนนี้เราจะเรียนรู้วิธีเปลี่ยนเส้นเพื่อให้ดูน่าดึงดูดยิ่งขึ้น

จะเปลี่ยนสี ความหนา และความกว้างของเส้นแนวนอนได้อย่างไร?

ใน HTML เวอร์ชันเก่า แท็ก

---

มีคุณสมบัติพิเศษที่คุณสามารถเปลี่ยนสี ความหนา และความกว้างของเส้นแนวนอนได้ ได้แก่ สี ขนาด และความกว้าง ตามลำดับ แต่ในเวอร์ชันใหม่ พวกเขาละทิ้งไปเพื่อสนับสนุน Cascading Style Sheets (CSS) ดังนั้น ดังที่คุณอาจเดาได้ เราจะใช้แอตทริบิวต์สไตล์ที่เราชื่นชอบอีกครั้ง ไวยากรณ์ทั่วไปคือ:

---

style="พื้นหลัง:สี">- สีของเส้น (หรือมากกว่าพื้นหลัง)

---

สไตล์ = "ความสูง: ขนาด" >- ความหนาของเส้น

---

สไตล์ = "ความกว้าง: ขนาด" >- ความกว้างของเส้น

---

สไตล์= "พื้นหลัง:สี; ความสูง:ขนาด; ความกว้าง:ขนาด"> - หรือคุณสามารถระบุพารามิเตอร์ทั้งหมดพร้อมกันได้ เพียงอย่าลืมเครื่องหมายอัฒภาค (;)

สามารถระบุสีด้วยชื่อเป็นภาษาอังกฤษหรือตามรหัส HEX ของสีที่นำหน้าด้วยแฮช (#) คุณรู้เรื่องนี้แล้วตั้งแต่บทเรียนเป็นต้นไป เปลี่ยนสีข้อความและพื้นหลัง.

แต่เราจะพูดคุยเพิ่มเติมเกี่ยวกับการปรับขนาด ตามที่คุณจำได้จาก บทเรียนเกี่ยวกับการเปลี่ยนแบบอักษรมีหน่วยการวัดประมาณสิบหน่วยใน CSS แต่ ความกว้างของเส้นสามารถระบุเป็นพิกเซล (px) และเปอร์เซ็นต์ (%) เท่านั้น และ ความหนาโดยทั่วไปจะมีหน่วยเป็นพิกเซลเท่านั้น หากคุณใส่หน่วยการวัดอื่น ก็จะไม่เกิดข้อผิดพลาด แต่เบราว์เซอร์จะเพิกเฉยต่อหน่วยเหล่านั้น

หากคุณระบุขนาดเป็นพิกเซล ความหนาและความกว้างของเส้นจะขึ้นอยู่กับความละเอียดของจอภาพที่ไซต์ของคุณดูอยู่ (ยิ่งความละเอียดของหน้าจอสูง เส้นก็จะบางและแคบลง)

อย่างที่ฉันบอกไปแล้วว่าสามารถระบุได้เฉพาะความกว้างของเส้นเป็นเปอร์เซ็นต์ ขนาดเปอร์เซ็นต์จะขึ้นอยู่กับขนาดขององค์ประกอบคอนเทนเนอร์หลักซึ่งมีแท็กอยู่เสมอ

---

- ในกรณีนี้ มิติของพาเรนต์จะถือเป็น 100% เช่น ถ้าเราวางแท็ก

---

สไตล์ = "ความกว้าง: 50%" >องค์ประกอบภายใน

ไม่ว่าเราจะเปลี่ยนขนาดหน้าต่างเบราว์เซอร์หรือความละเอียดของจอภาพอย่างไร ความกว้างของเส้นจะเป็นครึ่งหนึ่งของความกว้างของบล็อกเสมอ

.

ตัวอย่างการเปลี่ยนสี ความหนา และความกว้างของเส้นแนวนอน

---

---

---

---

ผลลัพธ์ในเบราว์เซอร์

การเปลี่ยนตำแหน่งของเส้นแนวนอน

เมื่อคุณเปลี่ยนความกว้างของเส้นแนวนอน คุณจะเห็นได้อย่างชัดเจนว่าเบราว์เซอร์จะวางไว้ตรงกลางเสมอ หากคุณต้องการเปลี่ยนตำแหน่งก็แค่ใช้ด้านใน

---

จัดแอตทริบิวต์ให้สอดคล้องกับค่าต่อไปนี้:

• ศูนย์- เส้นถูกจัดชิดตรงกลาง (ค่าเริ่มต้น)
• ซ้าย- กดไปทางขอบด้านซ้าย
• ขวา- กดไปที่ขอบด้านขวา

ตัวอย่างการจัดแนวเส้นแนวนอน

---

---

---

ผลลัพธ์ในเบราว์เซอร์

จะถอดกรอบรอบเส้นได้อย่างไร?

ดูตัวอย่างแรกของบทเรียนนี้ คุณคิดว่าเส้นเหล่านี้มีสีอะไร? แต่นั่นไม่เป็นความจริง มีความโปร่งใส เช่นเดียวกับองค์ประกอบของหน้าใดๆ ที่ไม่ได้ระบุสีพื้นหลัง! ไม่เชื่อฉันเหรอ? จากนั้นดูตัวอย่างที่เราเปลี่ยนสีของเส้น สำหรับอันแรก เราไม่ได้ตั้งค่าสี แต่เพิ่มขนาดเท่านั้น และเส้นนี้ไม่โปร่งใสใช่ไหม ดังนั้น!

ตอนนี้ฉันจะอธิบาย ตามค่าเริ่มต้น เบราว์เซอร์จะวาดเฟรมรอบๆ เส้น ซึ่งสร้างเอฟเฟกต์สามมิติ ดังนั้น เมื่อเราไม่เพิ่มความหนาของเส้นแนวนอน เบราว์เซอร์จะแสดงเฉพาะเฟรมเหล่านี้ เนื่องจากความหนาของเส้นคือ 0px

หากต้องการลบเส้นขอบรอบๆ เส้น ซึ่งมักจะทำให้เสียรูปลักษณ์ เราจะใช้แอตทริบิวต์ style อีกครั้ง และเขียนไว้ดังนี้:

---

การบ้าน.

1. สร้างบทความ ส่วน และหัวข้อย่อย วางไว้ตรงกลาง
2. ตั้งค่าแบบอักษรเป็น Arial สำหรับทั้งหน้าและ Courier สำหรับส่วนหัว
3. ปล่อยให้ขนาดตัวอักษรบนทั้งหน้าเป็น 85% ของขนาดเบราว์เซอร์เริ่มต้น และส่วนหัวมีขนาดตัวอักษรบนหน้า 145%, 125% และ 110% ตามลำดับ
4. เขียนย่อหน้าใต้หัวข้อแรก ข้อความยาวๆ ใต้หัวข้อที่สอง และบทกวีใต้หัวข้อที่สาม และให้บทกวีอยู่ตรงกลางหน้า
5. คำสามคำที่เป็นตัวหนาในเครื่องหมายคำพูด
6. ใต้ชื่อบทความ ให้วาดเส้นสีแดงแนวนอนหนา 3 พิกเซลตลอดความกว้างของหน้า
7. ที่ด้านบนและด้านล่างของบทกวี ให้วาดเส้นสีดำขนาด 1 พิกเซล ปล่อยให้ความกว้างของเส้นบนสุดประมาณเท่ากับความกว้างของข้อและด้านล่าง - ครึ่งหนึ่ง
8. ลบเฟรมที่ไม่จำเป็นออกจากบรรทัด