การจัดรูปแบบเอกสาร
การจัดรูปแบบของเอกสาร
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="สี">
ไม่มีความคิดเห็น:
แสดงความคิดเห็น