คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 5

ส่วนเนื้อหาของเว็บเพจ (Body)

Body เป็นส่วนที่แสดงเนื้อหาที่จะแสดงทางหน้าจอทั้งหมด มีส่วนประกอบ ได้แก่ ข้อความ ตาราง ลิสต์ รูป ภาพ ลิงค์ เป็นต้น

เราสามารถกำหนดคุณสมบัติให้กับ Body โดยผ่าน attribute ต่าง ๆ ได้แก่
- bgcolor="สี" กำหนดสีพื้นหลังในหน้าเว็บเพจ
- text="สี" กำหนดสีตัวอักษร
- background="url" กำหนดพื้นหลังเป็นรูปภาพ
- bgproperties="fixed" กำหนดให้รูปพื้นหลังไม่เลื่อนตาม scrollbar
- topmargin="number" กำหนดระยะของเนื้อหาให้ห่างจากขอบด้านบน
- leftmargin="number" กำหนดระยะของเนื้อหาให้ห่างจากขอบด้านซ้าย

การกำหนดสีพื้น background กับสีตัวอักษรที่ใช้ในหน้าเว็บเพจ
<body bgcolor="สี" text="สี">...<body>
Exampleกำหนดให้หน้าเว็บเพจมี background เป็นสีดำ และตัวอักษรเป็นสีขาว
<html>
<body bgcolor="black" text="white">
สวัสดีค่ะ
</body>
</html>
คลิกที่นี่ เพื่อดูผลลัพธ์ ทดลองเปลี่ยนสี background กับสีตัวอักษร ดูค่ะ

Output
สวัสดีค่ะ
กำหนดพื้นหลังเป็นรูปภาพ
ถ้าไม่ต้องการให้รูปภาพเลื่อนตาม scrollbar ให้กำหนด attribute bgproperties="fixed"
<body background="url ของรูปภาพ" bgproperties="fixed">... </body>
Example
<html>
<body background="../images/bg2.gif" bgproperties="fixed">
A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>
J<br>K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>
S<br>T<br>U<br>V<br>W<br>X<br>Y<br>Z<br>
A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>
J<br>K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>
S<br>T<br>U<br>V<br>W<br>X<br>Y<br>Z<br>
</body>
</html>
คลิกที่นี่ เพื่อดูผลลัพธ์ background แบบให้รูปพื้นหลังเลื่อนตาม scrollbar (ลองเลื่อน scrollbar ดูค่ะ)
คลิกที่นี่ เพื่อดูผลลัพธ์ background แบบไม่ให้รูปพื้นหลังเลื่อนตาม scrollbar


การจัดระยะของเนื้อหาให้ห่างจากขอบแต่ละด้าน
<body topmargin="number" leftmargin="number">...</body>
Exampleข้อความจะถูกแสดงโดยเว้นระยะห่างจากขอบด้านบน 50 และด้านซ้าย 50
<html>
<body topmargin="50" leftmargin="50">
สวัสดีค่ะ ข้อความตรงนี้จะเว้นระยะห่างจากด้านบน และด้านซ้าย
</body>
</html>
คลิกที่นี่ เพื่อดูผลลัพธ์ ลองปรับตัวเลขค่า margin ใหม่ดูค่ะ

Output
สวัสดีค่ะ ข้อความตรงนี้จะเว้นระยะห่างจากด้านบน และด้านซ้าย
หมายเหตุ : เมื่อเราเรียนรู้การใช้งาน CSS แล้ว เราจะใช้ style sheet กำหนดลักษณะพื้นหลัง และตัวอักษรที่ใช้ในหน้าเว็บเพจ แทนการกำหนดค่าผ่าน Attribute ของ <body> แบบนี้


« Chapter 4
Chapter 6 »