การจัดรูปแบบเอกสาร
การจัดรูปแบบของเอกสาร HTML โดยโปรแกรม notepad จะไม่เหมือนกับการจัดในเอกสารื่น เช่น เอกสาร Microsoft word คือ เมื่อต้องการขึ้นบรรทัดใหม่ ในเอกสาร Microsoft word จะใช้ ปุ่ม Enter แต่ในเอกสาร HTML การใช้โปรแกรม notepad เมื่อใช้ปุ่ม Enter ข้อความในเอกสารก็จะเรียงต่อกันไปเรื่อย ๆ ไม่ทำการขึ้นบรรทัดใหม่ให้ เนื่องจากภาษา HTML ไม่สามารถรับรู้ได้ว่าจะมีการขึ้นบรรทัดใหม่ ดังนั้น จึงต้องมีคำสั่งสำหรับสั่งการให้ขึ้นบรรทัดใหม่ จะให้ผลเสมือนการกด Enter บนคีย์บอร์ด ของเอกสาร Microsoft word ทั่งไป
ในการจัดย่อหน้า และการเว้นวรรคก็ตามในภาษา HTML เช่นเดียวกัน จำเป็นต้องมีคำสั่งสำหรับการจัดรูปแบบเอกสาร HTML ด้วย เช่น การสั่งให้มีการเว้นวรรคของข้อความ ภาษา HTML จะสามารถรับรู้การเว้นวรรคไดเพียง 1 วรรคเท่านัน
เพื่อให้การจัดรูปแบบเอกสาร HTML เรียบร้อย เป็นระเบียบและสวยงาม จึงจำเป็นในการเรียนรู้คำสั่งสำหรับการจัดรูปแบบหน้าเอกสาร
3.1 การขึ้นบรรทัดใหม่ (Break)
คำสั่งแรกในการจัดรูปแบบเอกสาร ในภาษา HTML คือ การขึ้นบรรทัดใหม่ จะใช้คำสั่ง <br> จะให้ผลเสมือนการกด Enter บนคีย์บอร์ด
คำสั่ง <br> ส่วนใหญ่มักนิยมจะวางไว้ในตำแหน่งสุดท้ายของประโยค โดยต้องการให้แสดงผลประโยคใหม่ในบรรทัดต่อมา คำสั่ง <br> จะเป็นคำสั่งที่ไม่ต้องมีคำสั่งปิด (Single Tag)
ทดสอบการใช้คำสั่งขึ้นบรรทัดใหม่ ด้วยคำสั่ง <br>
<html>
<head><title> โฮมเพจของข้าพเจ้า </title>
</head>
<body>
<font face=angsananew size=5 color=blue>การจัดรูปแบบเอกสาร</font><br>
<font size=3 color=9900ff>คำสั่งที่ใช้สำหรับขึ้นบรรทัดใหม่ จะใช้คำสั่ง br <br>
คำสั่ง br ส่วนใหญ่มักนิยมจะวางไว้ในตำแหน่งสุดท้ายของประโยค โดยต้องการให้แสดงผลประโยคใหม่ในบรรทัดต่อมา
</font>
<p> <font size=4 color=6600ff>การจัดย่อหน้าในเอกสาร HTML จะคำสั่งที่ ซึ่งเป็นคำสั่งที่สั่งให้โปรแกรมเว็บเบราเซอร์ขึ้นย่อหน้าใหม่ (paragraph) โดยใชคำสั่ง p </FONT>
<p><dd><FONT size=3>ในการจัดย่อหน้านั้นจะมีคำสั่งที่กำหนดให้ข้อความมีการเยื้องของบรรทัด จะใช้คำสั่ง dd จะใช้ร่วมกับ คำสั่ง br หรือ p ก็ได้ (--> ใช้คำสั่ง dd ต่อท้ายคำสั่ง p)</FONT>
</body>
</html>
3.2 การจัดย่อหน้า
การจัดย่อหน้าในเอกสาร HTML จะใช้คำสั่ง <p> เป็นคำสั่งที่สั่งให้โปรแกรมเว็บเบราเซอร์ขึ้นย่อหน้าใหม่ (paragraph)
คำสั่ง <p> จะเป็นการจัดเอกสารขึ้นบรรทัดใหม่เช่นเดียวกับการใช้คำสั่ง <br> แต่จะแตกต่างที่ช่องว่างระหว่างบรรทัดมากกว่าคำสั่ง <br>
และสามารถกำหนดหารเยื้องของข้อความในบรรทัดโดยใช้คำสั่ง <dd> วางหน้าข้อความที่ต้องการให้เยื้องหน้า หรือใช้ร่วมกับและมีการจัดย่อหน้า คำสั่ง <br> หรือคำสั่ง <p> ได้
ทดสอบการจัดย่อหน้า
ตัวอย่าง
<html>
<head><title> โฮมเพจของข้าพเจ้า </title>
</head>
<body>
<font face=angsananew size=5 color=blue>การจัดรูปแบบเอกสาร</font><br>
<font size=3 color=9900ff>คำสั่งที่ใช้สำหรับขึ้นบรรทัดใหม่ จะใช้คำสั่ง br <br>
คำสั่ง br ส่วนใหญ่มักนิยมจะวางไว้ในตำแหน่งสุดท้ายของประโยค โดยต้องการให้แสดงผลประโยคใหม่ในบรรทัดต่อมา
</font>
<p> <font size=4 color=6600ff>การจัดย่อหน้าในเอกสาร HTML จะคำสั่งที่ ซึ่งเป็นคำสั่งที่สั่งให้โปรแกรมเว็บเบราเซอร์ขึ้นย่อหน้าใหม่ (paragraph) โดยใชคำสั่ง p </FONT>
<p><dd><FONT size=3>ในการจัดย่อหน้านั้นจะมีคำสั่งที่กำหนดให้ข้อความมีการเยื้องของบรรทัด จะใช้คำสั่ง dd จะใช้ร่วมกับ คำสั่ง br หรือ p ก็ได้ (--> ใช้คำสั่ง dd ต่อท้ายคำสั่ง p)</FONT>
</body>
</html>
3.3 การจัดตำแหน่งในหน้าเอกสาร
การใส่ข้อความ หรือรูปภาพในหน้าเอกสาร HTML นั้น หากไม่มีการจัดหน้าเอกสาร ข้อความหรือรูปภาพต่าง ๆ จะชิดด้านซ้ายตลอด ดังนั้น เพื่อความเป็นระเบียบและความสวยงามของเอกสารจึงต้องจัดตำแน่งของข้อความ หรือรูปภาพตามความเหมาะสม
การจัดตำแหน่งของเอกสารเพื่อการแสดงผลทางจอภาพ จะใช้คำสั่ง <p> และตามด้วยคุณสมบัติ (attribute) align ดังนี้
<p align="left/right/center"> ข้อความ/รูปภาพ </p>
การที่จะให้ข้อความหรือรูปภาพอยู่ชิดซ้าย กึ่งกลางและชิดขวานั้น จะต้องมีคุณสมบัติ (attribute) การจัดตำแหน่งของการแสดงผล ดังนี้
align = "left" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางซ้าย
align = "right" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางขวา
align = "center" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ตรงกลาง
ทดสอบการจัดตำแหน่ง
<html>
<head><title> โฮมเพจของข้าพเจ้า </title>
</head>
<body>
<font face=angsananew size=5 color=blue>การจัดตำแหน่งในหน้าเอกสาร</font><br>
<font size=3 color=9966ff>คำสั่งที่ใช้จัดตำแหน่งของเอกสารเพื่อการแสดงผลทางจอภาพ จะใช้คำสั่ง p และจะตามด้วยคุณสมบัติ (attribute) align <br>
ตำแหน่งที่จะทำการแสดงผล คือ<p></font>
<font size=4color=6600ff>
<p align=left>การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางซ้าย</p>
<p align=center>การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ตรงกลาง</p>
<p align=right>การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางขวา</p>
</font>
</body>
</html>
ในการจัดตำแหน่งการแสดงผลข้อความหรือรูปภาพให้อยู่กึ่งกลางของจอภาพ สามารถกำหนดด้วยคำสั่ง center ได้ จะแสดงผลเช่นเดียวกับคำสั่ง <p align="center"> เขียนคำสั่งดังนี้
<center>..ข้อความ/รูปภาพ..</center>
3.4 การเว้นวรรค
เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติเบราเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียวแม้ว่าจะเคาะหลายครั้ง ก็ตาม คำสั่งที่ใช้ในการเว้นวรรค คือ
คำสั่ง ซึ่งเป็นหนึ่งในจำนวนรหัสใช้แทนอักษรพิเศษ ในภาษา HTML ใช้ประโยชน์สำหรับแทนตัวอักษรที่มีความหมายพิเศษ เช่น <, > อักษรพวกนี้จะไม่สามารถเขียนลงไปตรงๆ เพื่อให้ browser แสดง ทั้งนี้เพราะ browser จะรับรู้ว่าเป็น Tag ซึ่งอาจทำให้การแปลผิดพลาดได้
ตัวอย่าง รหัสใช้แทนอักษรพิเศษอื่นๆ เช่น
< ใช้แทนตัว < (less than)
> ใช้แทนตัว > (greater than)
& ใช้แทนตัว & (ampersand)
ทดสอบการใช้คำสั่งเว้นวรรค
<html>
<head><title> โฮมเพจของข้าพเจ้า </title>
</head>
<body>
<font face=angsananew size=5 color=9900ff>การเว้นวรรค</font><br>
<font size=3 color=9900ff>เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติเบราเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar
เพียงช่องเดียวแม้ว่าจะเคาะหลายครั้ง ก็ตาม คำสั่งที่ใช้ในการเว้นวรรค คือ </font>
<p>คำสั่ง ( ) ซึ่งจะเป็นหนึ่งในจำนวนรหัสใช้แทนอักษรพิเศษ ในภาษา HTML (------> เว้นวรรคจำนวน 6 วรรค)
</body>
</html>
3.5 เส้นคั่นในแนวนอน
ในการจัดรูปแบบเอกสาร นั้น เรายังสามารถนำเส้นมาช่วยตกแต่งเอกสารได้โยกำหนดให้เป็นเส้นคั่นในหน้าเอกสาร HTML เส้นที่จะใช้คือ เส้นขีดคั่นแนวนอน (Horizontal rule) ซึ่งอาจใช้เป็นเส้นแบ่งเนื้อหาระหว่างบท หรือเป็นเส้นขีดคั่นเพื่อความสวยงามและเป็นระเบียบของเนื้อหา ได้
คำสั่งที่ใช้กำหนดเส้นคั่น จะเป็นคำสั่งที่ไม่ต้องมีคำสั่งปิด (Single Tag) คือคำสั่ง <hr> โดยคำสั่ง <hr> จะมีคุณสมบัติของคำสั่ง (Attribute) หลายตัว ดังนี้
width เป็นการกำหนดความยาวของเส้น มีหน่วยเป็น Pixel หรือ % ก็ได้
align เป็น การจัดวางตำแหน่งของเส้น
size เป็นการกำหนดขนาดความหนาของเส้นกำหนดเป็น pixel
noshade ไม่ต้องแสดงเป็นแบบ 3 มิติ
color เป็นการระบุสีของเส้น
ตัวอย่าง
<hr width="60 %">
<hr width="80">
<hr width="n" align="left/right/center" size="ขนาด (n)" noshade color="สี">
ทดสอบการใส่เส้นคั่นแนวนอน
<html>
<head><title> โฮมเพจของข้าพเจ้า </title>
</head>
<body><p align=center>
<font face=angsananew size=6 color=660066>เส้นคั่นในแนวนอน</font></p><br>
<font size=3 color=9900ff>การจัดรูปแบบเอกสารที่ผ่านมาแล้วนั้น การใช้เส้นคั่นหน้าเอกสาร HTML สามารถช่วยในการตกแต่งเอกสารได้
สำหรับเส้นขีดคั่นทางแนวนอน (Horizontal rule) อาจใช้เป็นเส้นแบ่งเนื้อหาระหว่างบท หรือเป็นเส้นขีดคั่นเพื่อความสวยงามและเป็นระเบียบของเนื้อหา ตัวอย่างเส้นคั่นแนวนอน
<p> <hr><br>เส้นคั่นไม่ได้กำหนดคุณสมบัติ<br>
<hr width=80% size=3> <br>เส้นคั่นกำหนดคุณสมบัติ กว้าง 80% ขนาด 3<br>
<hr width=50% size=5 color=770088> <br>เส้นคั่นกำหนดคุณสมบัติ กว้าง 50% ขนาด 5 สี 770088<br>
<hr width=50% size=10 color=ff0088> <br>เส้นคั่นกำหนดคุณสมบัติ กว้าง 50% ขนาด 10 สี ff0088<br>
</body>
</html>