ใบความรู้ที่ 2.5 body section
- 1. ใบความรู้ที่ 2.5
ส่วนเนื้อหาของเว็บเพจ (Body)
Body เป็นส่วนที่แสดงเนื้อหาที่จะแสดงทางหน้าจอทั้งหมด โดยมีส่วนประกอบของเว็บเพจ
ได้แก่ ข้อความ ตาราง ลิสต์ รูปภาพ ลิงค์ วีดีโอ และอื่นๆ เป็นต้น ซึงเราสามารถกาหนดคุณสมบัติ
่
ให้กับ Body โดยผ่าน attribute ต่าง ๆ คือ
bgcolor="สี" คือ การกาหนดสีพื้นหลังในหน้าเว็บเพจ
text="สี" คือ การกาหนดสีตัวอักษร
background="url" คือ การกาหนดพื้นหลังเป็นรูปภาพ
bgproperties="fixed" คือ การกาหนดให้รูปพื้นหลังไม่เลื่อนตาม scrollbar
topmargin="number" คือ การกาหนดระยะของเนื้อหาให้ห่างจากขอบด้านบน
leftmargin="number" คือ การกาหนดระยะของเนื้อหาให้ห่างจากขอบด้านซ้าย
******************************
1. การกาหนดสีพื้น background กับสีตัวอักษรที่ใช้ในหน้าเว็บเพจ (ทดลองเปลี่ยน
สีพื้นหลัง background กับสีตัวอักษร ดูค่ะ)
คาสั่ง Tag คือ <body bgcolor="สี" text="สี">...</body>
อธิบายคาสั่ง : กาหนดให้หน้าเว็บเพจมี background เป็นสีดา และตัวอักษรเป็นสีขาว
<html>
<head>
<title> เว็บเพจแรกที่เขียนด้วยภาษา HTML By KruSmo </title>
</head>
<body bgcolor="black" text="white">
สวัสดีค่ะ ยินดีต้อนสู่เว็บเพจแรกของเราค่ะ
</body>
</html>
- 2. 2. การกาหนดพื้นหลังเป็นรูปภาพ
ถ้าไม่ต้องการให้รูปภาพเลื่อนตาม scrollbar ให้กาหนด attribute bgproperties="fixed"
คาสั่ง Tag คือ <body background="url ของรูปภาพ" bgproperties="fixed">... </body>
อธิบายคาสั่ง : background แบบให้รูปพื้นหลังเลื่อนตาม scrollbar (ลองเลื่อน scrollbar ดูค่ะ)
<br> คือ การขึ้นบรรทัดใหม่
<html>
<head>
<title> เว็บเพจแรกที่เขียนด้วยภาษา HTML By KruSmo </title>
</head>
<body background “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>
3. การจัดระยะของเนื้อหาให้ห่างจากขอบแต่ละด้าน
คาสั่ง Tag คือ <body topmargin="number" leftmargin="number">...</body>
<html>
<head>
<title> เว็บเพจแรกที่เขียนด้วยภาษา HTML By KruSmo </title>
</head>
<body topmargin="50" leftmargin="50">
สวัสดีค่ะ ยินดีต้อนสู่เว็บเพจแรกของเราค่ะ <br>
สวัสดีค่ะ ข้อความตรงนี้จะเว้นระยะห่างจากด้านบน และด้านซ้าย <br>
</body>
</html>
