การจัดรูปแบบเอกสาร
การจัดรูปแบบของเอกสาร 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)
3.2 การจัดย่อหน้า
การจัดย่อหน้าในเอกสาร HTML จะใช้คำสั่ง <p> เป็นคำสั่งที่สั่งให้โปรแกรมเว็บเบราเซอร์ขึ้นย่อหน้าใหม่ (paragraph)
คำสั่ง <p> จะเป็นการจัดเอกสารขึ้นบรรทัดใหม่เช่นเดียวกับการใช้คำสั่ง <br> แต่จะแตกต่างที่ช่องว่างระหว่างบรรทัดมากกว่าคำสั่ง<br> และสามารถกำหนดหารเยื้องของข้อความในบรรทัดโดยใช้คำสั่ง<dd> วางหน้าข้อความที่ต้องการให้เยื้องหน้า หรือใช้ร่วมกับและมีการจัดย่อหน้า คำสั่ง <br> หรือคำสั่ง <p> ได้
3.3 การจัดตำแหน่งในหน้าเอกสาร
การใส่ข้อความ หรือรูปภาพในหน้าเอกสาร HTML นั้น หากไม่มีการจัดหน้าเอกสาร ข้อความหรือรูปภาพต่าง ๆ จะชิดด้านซ้ายตลอด ดังนั้น เพื่อความเป็นระเบียบและความสวยงามของเอกสารจึงต้องจัดตำแน่งของข้อความ หรือรูปภาพตามความเหมาะสม
การจัดตำแหน่งของเอกสารเพื่อการแสดงผลทางจอภาพ จะใช้คำสั่ง <p> และตามด้วยคุณสมบัติ (attribute) align ดังนี้
<p align="left/right/center"> ข้อความ/รูปภาพ </p>
การที่จะให้ข้อความหรือรูปภาพอยู่ชิดซ้าย กึ่งกลางและชิดขวานั้น จะต้องมีคุณสมบัติ (attribute) การจัดตำแหน่งของการแสดงผล ดังนี้
align = "left" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางซ้าย
align = "right" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางขวา
align = "center" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ตรงกลาง
ทดสอบการจัดตำแหน่ง
ในการจัดตำแหน่งการแสดงผลข้อความหรือรูปภาพให้อยู่กึ่งกลางของจอภาพ สามารถกำหนดด้วยคำสั่ง center ได้ จะแสดงผลเช่นเดียวกับคำสั่ง <p align="center"> เขียนคำสั่งดังนี้
<center>..ข้อความ/รูปภาพ..</center>
3.4 การเว้นวรรค
เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติเบราเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียวแม้ว่าจะเคาะหลายครั้ง ก็ตาม คำสั่งที่ใช้ในการเว้นวรรค คือ
คำสั่ง ซึ่งเป็นหนึ่งในจำนวนรหัสใช้แทนอักษรพิเศษ ในภาษา HTML ใช้ประโยชน์สำหรับแทนตัวอักษรที่มีความหมายพิเศษ เช่น <, > อักษรพวกนี้จะไม่สามารถเขียนลงไปตรงๆ เพื่อให้ browserแสดง ทั้งนี้เพราะ browser จะรับรู้ว่าเป็น Tag ซึ่งอาจทำให้การแปลผิดพลาดได้
ตัวอย่าง รหัสใช้แทนอักษรพิเศษอื่นๆ เช่น
< ใช้แทนตัว < (less than)
> ใช้แทนตัว > (greater than)
& ใช้แทนตัว & (ampersand)
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="สี">
ไม่มีความคิดเห็น:
แสดงความคิดเห็น