ตัวอักษรหนา,ตัวเอียง,ตัวขีดเส้นใต้ |
การใส่สีอักษร |
การใส่ขนาดอักษร |
การใส่รูปแบบอักษร |
การประยุกต์การกำหนดรูปแบบอักษร
หัวข้อแบบรายการ |
กำหนดหัวเรื่อง |
เส้นแบ่งกั้นหน้า |
ตัดคำขึ้นบรรทัดใหม่ |
กำหนดช่องว่างระหว่างข้อความ |
จัดเยื้องย่อหน้าข้อความ |
จัดวางตำแหน่งข้อความ
Line Break : การตัดคำขึ้นบรรทัดใหม่
|
ในบทที่ผ่านมาจากไฟล์ตัวอย่าง จะพบว่าหากพิมพ์ข้อความยาวๆ เมื่อต้องการจะตัดคำขึ้นบรรทัดใหม่ต้องใช้คำสั่ง <br> แทรก ณ ตำแหน่งที่ต้องการให้ขึ้นบรรทัดใหม่ ดังตัวอย่าง
ตัวอย่าง
การเขียนข้อความที่ต้องการตัดคำขึ้นบรรทัดใหม่สามารถทำได้ด้วยการใช้คำสั่ง Break (br) แทรก<br>ตัวอย่างบรรทัดนี้จะถูกตัดลงบรรทัดถัดไป
|
ผลที่ได้
การเขียนข้อความที่ต้องการตัดคำขึ้นบรรทัดใหม่สามารถทำได้ด้วยการใช้คำสั่ง Break (br) แทรก
ตัวอย่างบรรทัดนี้จะถูกตัดลงบรรทัดถัดไป
|
นอกจากนั้นเรายังสามารถแบ่งข้อความในรูปของย่อหน้า (Paragraph) สำหรับกลุ่มข้อความจำนวนมากได้ ด้วยการใช้คำสั่ง <P> ... </P> ผลที่ได้จะแตกต่างจากการใช้คำสั่ง <br> นั่นคือจะมีการเว้นช่องว่างหนึ่งบรรทัดก่อนและหลังย่อหน้า ดังตัวอย่าง
ตัวอย่าง
<P>นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าแรก</P>
<P>นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าที่สอง</P>
ประโยคใหม่ที่ไม่มีคำสั่งกำกับ
|
ผลที่ได้
นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าแรก
นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าที่สอง ประโยคใหม่ที่ไม่มีคำสั่งกำกับ
|
Space between texts : การกำหนดช่องว่างระหว่างข้อความ
|
บราวเซอร์จะไม่สนับสนุนการแสดงผลการเคาะเว้นวรรคมากเกินกว่า 1 เคาะ (จะเว้นวรรค 10 ช่องก็แสดงเพียงช่องเดียว) และการกดปุ่มเยื้องย่อหน้าก็จะแสดงเพียง 1 ช่องว่างเท่านั้น เราสามารถกำหนดให้แสดงช่องว่างได้มากกว่า 1 ช่องว่างได้ด้วยการแทรกอักขระพิเศษลงไปคือ แทน 1 ชุดต่อ 1 ช่องว่างตัวอักษร ดังตัวอย่าง
ตัวอย่าง
การแทรกช่องว่างเกินกว่า 1 ช่องว่าง เช่น นายวันฉลอง เศรษฐบุตร (เว้น 5 ช่อง ระหว่างชื่อ - นามสกุล)
|
ผลที่ได้
การแทรกช่องว่างเกินกว่า 1 ช่องว่าง เช่น นายวันฉลอง เศรษฐบุตร (เว้น 5 ช่อง ระหว่างชื่อ - นามสกุล)
|
Indented Text : การจัดเยื้องย่อหน้าข้อความ
|
ถ้าเราต้องการให้ข้อความมีการเยื้องจากขอบทั้งสองข้างของหน้าเว็บเพจ สามารถใช้คำสั่ง <BLOCKQUOTE> ... </BLOCKQUOTE> ได้ ข้อความที่อยู่ระหว่างคำสั่งดังกล่าวจะเยื้องระยะจากขอบทั้งสองด้านดังตัวอย่าง
ตัวอย่าง
<BLOCKQUOTE> ข้อความนี้ต้องการเยื้องให้ห่างจากขอบทั้งสองข้าง เพื่อให้เกิดกลุ่มข้อความที่ดูสวยงามอ่านง่าย ด้วยการใช้คำสั่ง <BLOCKQUOTE> </BLOCKQUOTE> |
ผลที่ได้
ข้อความนี้ต้องการเยื้องให้ห่างจากขอบทั้งสองข้าง เพื่อให้เกิดกลุ่มข้อความที่ดูสวยงามอ่านง่าย ด้วยการใช้คำสั่ง <BLOCKQUOTE>
|
แต่ถ้าหากต้องการเยื้องย่อหน้าในบรรทัดแรกเพียงบรรทัดเดียว สามารถใช้การแทรกตัวอักษรว่างลงไปเท่ากับจำนวนเคาะวรรคที่ต้องการได้โดยตรง หรือจะกำหนดในคำสั่งย่อหน้า <p style="text-indent: 30"> ก็ได้ (ใช้ได้ดีกับบราวเซอร์ IE บราวเซอร์อื่นอาจไม่แสดงผล) ดังตัวอย่าง
ตัวอย่าง
การเยื้องย่อหน้าด้วยการแทรกอักษรว่างลงไป 6 ชุด (ตัวอักษร)
<p style="text-indent: 30">การเยื้องย่อหน้าด้วยการกำหนดสไตล์ให้กับคำสั่งย่อหน้า ค่าตัวเลข 30 คือหน่วยพิกเซล </p> |
ผลที่ได้
การเยื้องย่อหน้าด้วยการแทรกอักษรว่างลงไป 6 ชุด (ตัวอักษร)
การเยื้องย่อหน้าด้วยการกำหนดสไตล์ให้กับคำสั่งย่อหน้า ค่าตัวเลข 30 คือหน่วยพิกเซล
|
Alignments : การจัดวางตำแหน่งของข้อความ
|
เราสามารถจัดวางตำแหน่งข้อความหรือรูปภาพในหน้าเว็บเพจได้ ทั้งการกำหนดให้ตัวอักษรข้อความหรือรูปภาพชิด ด้านซ้าย/กลาง/ขวาของหน้าเว็บเพจ (ปกติข้อความจะถูกจัดชิดซ้ายอยู่แล้วด้วย)
ด้วยการใช้คำสั่ง <DIV ALIGN="LEFT/CENTER/RIGHT"> ... </DIV> ครอบข้อความ/รูปภาพนั้น
ตัวอย่าง
<DIV ALIGN="LEFT">ข้อความนี้จัดชิดซ้าย</DIV><br>
<DIV ALIGN="CENTER">ข้อความนี้จัดกึ่งกลาง</DIV><br>
<DIV ALIGN="RIGHT">ข้อความนี้จัดชิดขวา</DIV> |
ผลที่ได้
ข้อความนี้จัดชิดซ้าย
ข้อความนี้จัดกึ่งกลาง
ข้อความนี้จัดชิดขวา
|