ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
บทความวิกิฮาวนี้จะแนะนำวิธีการเว้นวรรคและขึ้นบรรทัดใหม่ (line break) ใน HTML ปกติถึงจะกด spacebar กี่ทีก็เท่ากับเว้นวรรคแค่ครั้งเดียวใน HTML อยู่ดี เพราะงั้นต้องใช้แท็ก HTML ถึงจะเว้นวรรคห่างๆ ได้
ขั้นตอน
ดาวน์โหลดบทความ
-
เว้นวรรคแบบ non-breaking. ปกติ HTML จะเว้นวรรคทีเดียวระหว่างคำ ไม่ว่าคุณจะกด spacebar ไปกี่ทีก็ตาม เพราะงั้นถ้าอยากเว้นวรรคห่างๆ ก็ต้องพิมพ์ บริเวณที่อยากได้เว้นวรรคห่างหน่อย [1] X แหล่งข้อมูลอ้างอิง
- เช่น พิมพ์ สวัสดี ชาวโลก! แล้วจะกลายเป็นเว้นวรรคห่างๆ ระหว่าง "สวัสดี" กับ "ชาวโลก!"
- แบบนี้เรียก non-breaking space เพราะจะไม่มี line break คือไม่ขึ้นบรรทัดใหม่บริเวณนั้น แต่ข้อเสียคือถ้าใช้อักขระนี้เยอะไป เบราว์เซอร์จะมีปัญหาการขึ้นบรรทัดใหม่ ทำให้รกตา อ่านไม่สะดวก [2] X แหล่งข้อมูลอ้างอิง
- หรือพิมพ์   เพื่อบังคับเว้นวรรคก็ได้
-
เว้นวรรคแบบกำหนดความห่างได้. คุณเว้นวรรคห่างๆ ได้ด้วยหนึ่งในตัวเลือกต่อไปนี้ [3] X แหล่งข้อมูลอ้างอิง
- เว้นวรรค 2 ครั้ง - พิมพ์  
- เว้นวรรค 4 ครั้ง - พิมพ์  
- เว้นวรรคเหมือนกด Tab - พิมพ์
-
ย่อหน้าด้วย CSS. padding หรือ margin ของ CSS ใช้กำหนดว่าจะให้เบราว์เซอร์แสดงข้อมูลยังไงโดยตรง เพราะงั้นจะออกมาเป๊ะกว่าใช้แท็ก [4] X แหล่งข้อมูลอ้างอิง
- ในหัวข้อ <head></head>
ของเอกสาร HTML ให้พิมพ์โค้ดต่อไปนี้ลงไป
<style>p.indent{ padding-left: 1.8em }</style> - ทีนี้กลับไปที่ body ของเอกสาร HTML ต่อไปพอจะย่อหน้าเข้าไป ก็ให้ใส่ตรงกลางระหว่างแท็ก
<p class="indent"></p> - ถ้าอยากกำหนดขนาดของย่อหน้า ให้เปลี่ยนเลข "1.8" ในโค้ด CSS ตามสะดวก แต่อย่าลืมเก็บ "em" ที่ต่อท้ายไว้ เพราะเป็นหน่วยวัดความยาวที่สัมพันธ์กับขนาดฟอนต์ [5] X แหล่งข้อมูลอ้างอิง
- ในหัวข้อ <head></head>
ของเอกสาร HTML ให้พิมพ์โค้ดต่อไปนี้ลงไป
-
ขึ้นบรรทัดใหม่. พิมพ์ <br> ต่อท้ายบรรทัดข้อความ เพื่อบังคับให้ข้อความที่จะตามมา ไปโผล่ในบรรทัดใหม่ด้านล่าง ส่วนถ้าพิมพ์ <br> หน้าข้อความ ก็เท่ากับเว้นระยะห่างระหว่างบรรทัดนั้นกับอีกบรรทัดข้างบน
- เช่น พิมพ์ ช้างมีหูมีตา<br>มีงาหางยาว ข้อความ "ช้างมีหูมีตา" กับ "มีงาหางยาว" ก็จะไปอยู่คนละบรรทัดกัน
- ถ้าอยากเพิ่มความห่าง ให้พิมพ์แท็กเส้นตั้ง <br>
-
กำหนดย่อหน้าตามต้องการ. ถ้ามีข้อความก้อนหนึ่งที่อยากกำหนดเป็นย่อหน้าเดียวกัน ก็ให้พิมพ์ <p> หน้าย่อหน้า และ </p> ปิดท้าย เพื่อให้ได้ข้อความที่แยกจากข้อความอื่นๆ ในหน้านั้นที่ไม่ได้กำหนดฟอร์แมต
- เบราว์เซอร์ส่วนใหญ่จะแยกย่อหน้าต่างๆ โดยใช้ blank line หรือบรรทัดว่าง 1 บรรทัด ซึ่งบางทีก็คลาดเคลื่อน ไม่เป็นระเบียบได้เหมือนกัน [6] X แหล่งข้อมูลอ้างอิง
-
ใช้ข้อความที่จัดฟอร์แมตมาแล้วกำหนดช่องว่าง. ถ้าตั้งฟอร์แมตข้อความไว้แต่แรก ไม่ว่าพิมพ์เว้นวรรคยังไง ก็จะขึ้นในหน้า HTML นั้น (เช่น พิมพ์ 4 เว้นวรรค ก็จะมีเว้นวรรค 4 ครั้งตามนั้น) คุณกำหนดฟอร์แมตข้อความไว้ก่อนได้โดยพิมพ์ <pre> หน้าข้อความที่จะใช้ แล้วพิมพ์ </pre> ปิดท้าย [7] X แหล่งข้อมูลอ้างอิง
- ต่อไปพอกด ↵ Enter ก็ข้อความที่กำหนดฟอร์แมตไว้ก็จะขึ้นบรรทัดใหม่
โฆษณา
เคล็ดลับ
- CSS นั้นใช้กำหนดรูปแบบเนื้อหาในหน้าเว็บได้ง่ายและมีประสิทธิภาพกว่า รวมถึงการเว้นวรรคด้วย
- non-breaking space
นั้นเป็นตัวอย่างของ character entity หรือก็คือโค้ดที่อ้างอิงถึงอักขระที่คุณพิมพ์ด้วยคีย์บอร์ดตามปกติไม่ได้ - ถ้าเว้นวรรคแล้วมีสัญลักษณ์แปลกๆ โผล่มาในเบราว์เซอร์ แสดงว่าเป็นข้อมูลพิเศษ ฟอร์แมตเฉพาะ word processor ซึ่งแสดงผลในเบราว์เซอร์ไม่ได้ ป้องกันได้โดยใช้ plaintext editor อย่าง Notepad หรือ TextEdit
โฆษณา
คำเตือน
- ย้ำว่าควรเขียนโค้ด HTML ใน code editor เป็นไฟล์ plain text ไม่ใช่ไฟล์ของ word processor
- อักขระ HTML แทน Tab ↹
	บางทีก็ไม่ได้แสดงผลตามที่คิด ปกติเอกสาร HTML ทั่วไปจะไม่มี tab stop เพราะงั้นใส่อักขระ tab ไปก็ไม่ส่งผลอะไร
โฆษณา
ข้อมูลอ้างอิง
- ↑ http://www.amp-what.com/unicode/search/space
- ↑ http://hea-www.harvard.edu/~fine/Tech/html-sentences.html
- ↑ http://hea-www.harvard.edu/~fine/Tech/html-sentences.html
- ↑ http://stackoverflow.com/questions/1571648/html-tab-space-instead-of-multiple-non-breaking-spaces-nbsp
- ↑ https://www.w3.org/WAI/GL/css2em.htm
- ↑ https://www.w3.org/TR/html5/grouping-content.html#the-p-element
- ↑ https://www.w3.org/TR/html401/struct/text.html#edef-PRE
โฆษณา
