จากบทเรียนที่ผ่านมาเราได้ศึกษาคำสั่งเกี่ยวกับตัวอักษรมาแล้ว และพบว่า มีเฉพาะคำสั่ง <Hx> ... </Hx> เท่านั้นที่มีการตัดคำหรือข้อความขึ้นบรรทัดใหม่ ซึ่งในความเป็นจริงนั้น การป้อนข้อความในหน้าเว็บเพจ จะต้องมีการตัดคำขึ้นบรรทัดใหม่ เพื่อให้เกิดความสวยงาม น่าอ่าน และเพื่อการเน้นข้อความสำคัญ และเพื่อให้มีความน่าสนใจยิ่งขึ้นก็จำเป็นจะต้องมีการแทรกภาพเข้าไปด้วย
ในบทที่ผ่านมาจากไฟล์ตัวอย่าง จะพบว่าหากพิมพ์ข้อความยาวๆ เมื่อต้องการจะตัดคำขึ้นบรรทัดใหม่ต้องใช้คำสั่งหยุดการแสดงผล (Break) คำสั่งคือ <br>
ตัวอย่าง Break (br) แทรก<br>ตัวอย่างบรรทัดนี้จะถูกตัดลงบรรทัดถัดไป
ผลที่ได้ Break (br) แทรก
นอกจากนั้นเรายังสามารถแบ่งข้อความในรูปของย่อหน้า (Paragraph) สำหรับกลุ่มข้อความจำนวนมากได้ ด้วยการใช้คำสั่ง <P> ... </P> ผลที่ได้จะแตกต่างจากการใช้คำสั่ง <br> นั่นคือจะมีการเว้นช่องว่างหนึ่งบรรทัดก่อนและหลังย่อหน้า ดังตัวอย่าง
ตัวอย่าง
ผลที่ได้ นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าแรก
นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าที่สอง
ประโยคใหม่ที่ไม่มีคำสั่งกำกับ
บราวเซอร์จะไม่สนับสนุนการแสดงผลการเคาะเว้นวรรค มากเกินกว่า 1 เคาะ (จะเว้นวรรคด้วยการเคาะ 10 ช่องก็แสดงเพียงช่องเดียว) และการกดปุ่มเยื้องย่อหน้าก็จะแสดงเพียง 1 ช่องว่างเท่านั้น เราสามารถกำหนดให้แสดงช่องว่างได้มากกว่า 1 ช่องว่างได้ด้วยการแทรกอักขระพิเศษลงไปคือ
ตัวอย่าง (เว้น 5 ช่อง ระหว่างชื่อ - นามสกุล)
ผลที่ได้ (เว้น 5 ช่อง ระหว่างชื่อ - นามสกุล)
ถ้าเราต้องการให้ข้อความมีการเยื้องจากขอบทั้งสองข้างของหน้าเว็บเพจ สามารถใช้คำสั่ง <BLOCKQUOTE> ... </BLOCKQUOTE> ได้ ข้อความที่อยู่ระหว่างคำสั่งดังกล่าวจะเยื้องระยะจากขอบทั้งสองด้านดังตัวอย่าง
ตัวอย่าง
ผลที่ได้ ข้อความนี้ต้องการเยื้องให้ห่างจากขอบทั้งสองข้าง เพื่อให้เกิดกลุ่มข้อความที่ดูสวยงามอ่านง่าย ด้วยการใช้คำสั่ง <BLOCKQUOTE>
แต่ถ้าหากเราต้องการเยื้องย่อหน้าในบรรทัดแรก เพียงบรรทัดเดียว ก็สามารถใช้การแทรกตัวอักษรว่างลงไป เท่ากับจำนวนเคาะวรรค ที่ต้องการได้โดยตรง หรือ จะกำหนดในคำสั่งย่อหน้า <p style="text-indent: 30"> ก็ได้ (ใช้ได้ดีกับบราวเซอร์ IE บราวเซอร์อื่นอาจไม่แสดงผล ต้องทดสอบดู) ดังตัวอย่าง
ตัวอย่าง
ผลที่ได้ การเยื้องย่อหน้าด้วยการกำหนดสไตล์ให้กับคำสั่งย่อหน้า ค่าตัวเลข 30 คือหน่วยพิกเซล
เราสามารถจัดวางตำแหน่งข้อความในหน้าเว็บเพจได้ ทั้งการกำหนดให้ตัวอักษรข้อความชิดด้าน ซ้าย/กลาง/ขวา ของหน้าเว็บเพจ (ปกติข้อความจะถูกจัดชิดซ้ายอยู่แล้วด้วย) <DIV ALIGN="LEFT/CENTER/RIGHT"> ... </DIV> ครอบข้อความนั้น
ตัวอย่าง
ผลที่ได้ ข้อความนี้จัดกึ่งกลาง
ข้อความนี้จัดชิดขวา
ในบางครั้งการป้อนข้อความในหน้าเว็บเพจ เราอาจมีความต้องการในการจัดข้อความย่อย เพื่อการอธิบาย หรือแยกความสำคัญให้เห็นแตกต่างชัดเจน การทำหัวข้อย่อยในภาษา HTML ก็สามารถทำได้ โดยแบ่งออกเป็น 2 รูปแบบดังนี้
หัวข้อย่อยแบบเรียงลำดับ (Order List) เป็นการกำหนดความสำคัญของหัวข้อย่อยที่ต่อเนื่องกันเป็นลำดับข้อ 1, 2, 3,... จะมีรูปแบบคำสั่งดังนี้
รูปแบบคำสั่ง การแสดงผล
<OL>
ข้อย่อยลำดับที่ 1
ข้อย่อยลำดับที่ 2
ข้อย่อยลำดับที่ 3
Type ต่อจากคำสั่ง OL ดังนี้
รูปแบบคำสั่ง การแสดงผล
<OL TYPE="A">
ข้อย่อยลำดับที่ 1
ข้อย่อยลำดับที่ 2
TYPE="1" หรือไม่ระบุ
การเรียงลำดับเป็นตัวเลข 1, 2, 3, 4,...
หัวข้อย่อยแบบไม่เรียงลำดับ (Unorder List) เป็นการสร้างหัวข้อย่อยชนิดไม่เรียงลำดับความสำคัญในแต่ละข้อ ในเอกสารทั่วๆ ไปจะเรียกว่า Bullet ซึ่งจะมีรูปแบบคำสั่งและรูปแบบตามตัวอย่าง
รูปแบบคำสั่ง การแสดงผล
<UL TYPE="disc">
ข้อย่อยที่ 1
ข้อย่อยที่ 2
<UL>Disc Bullet </LI>Square Bullet </LI>Circle Bullet </LI>
รูปแบบของบุลเล็ตจะเป็นวงกลมทึบ
รูปแบบของบุลเล็ตจะเป็นสี่เหลี่ยมทึบ
รูปแบบของบุลเล็ตจะเป็นวงกลมโปร่ง
เมื่อมีการบรรจุข้อความ/รูปภาพลงในเว็บเพจจำนวนมาก บางครั้งเราก็มีความจำเป็นอยากแบ่งเนื้อหาออกเป็นส่วนๆ ด้วยเส้นกั้นตามแนวนอน เราสามารถใช้คำสั่ง <HR> แทรกในตำแหน่งที่แบ่งเนื้อหานั้น
รูปแบบคำสั่ง การแสดงผล
<BODY>
เนื้อหาส่วนที่ 1
เรายังสามารถกำหนดคุณสมบัติของเส้นได้เพิ่มเติม เช่น กำหนดความยาว ความหนา สี และการวางตำแหน่งของเส้นได้ ด้วยการแทรกคุณสมบัติลงไปหลังคำสั่ง <HR> ดังตัวอย่าง
กำหนดความกว้างเป็นเปอร์เซนต์ กำหนดความกว้างเป็นพิกเซล กำหนดความหนาของเส้น (หน่วยพิกเซล)กำหนด shade สีของเส้นให้ทึบ กำหนดสีของเส้นตามต้องการ กำหนดตำแหน่งของเส้นชิดด้านซ้าย กำหนดตำแหน่งของเส้นกึ่งกลาง กำหนดตำแหน่งของเส้นชิดด้านขวา
ในบทนี้ เราได้เรียนรู้คำสั่งพื้ฐาน คำสั่งที่เกี่ยวกับการจัดรูปแบบเนื้อหาในส่วน Body การกำหนดสีพื้นหลัง ข้อความ รวมทั้งการแสดงผลของข้อความเป็นหัวข้อย่อย เพื่อสร้างความสวยงามและน่าสนใจให้กับเว็บเพจ การจัดแบ่งข้อความเป็นส่วนๆ ด้วยเส้นกั้น ซึ่งบรรดาคำสั่งที่ผ่านมาสามารถทำให้คุณออกแบบเว็บเพจง่ายๆ พื้นฐานได้แล้ว
TAGS
รายละเอียด
<P> ... </P>
คำสั่งกำหนดรูปแบบข้อความเป็นย่อหน้า
(Paragraph)
<Div align="x"> ... </Div>
คำสั่งกำหนดรูปแบบการวางข้อความในหน้าเพจ โดยกำหนดตำแหน่งด้วย Align="x " ซึ่งค่า x มีค่าเป็น Left, Center, Right ปกติถ้าไม่กำหนดค่า Left (ซ้าย) จะเป็นค่าปริยาย (default)
<OL> ... </OL>
การจัดเรียงลำดับหัวข้อย่อย ต้องใช้ร่วมกับคำสั่งหัวข้อ <LI> ... </LI>
<UL> ... </UL>
การจัดเรียงหัวข้อย่อยแบบไม่เรียงลำดับ ต้องใช้ร่วมกับคำสั่งหัวข้อ <LI> ... </LI>
<LI> ... </LI>
รายการหัวข้อย่อย
<HR>
การสร้างเส้นกั้นหน้าเว็บเพจตามแนวนอน
Line Break : การตัดคำขึ้นบรรทัดใหม่