ใบงานที่6 การปฎิบัติเรื่อง html
1. HTML คืออะไร??
ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup language หมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlink
คำสั่งพื้นฐาน
ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup language หมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlink
2.รูปแบบการใช้คำสั่ง
คำสั่งพื้นฐาน
< !-- ข้อความ --> คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ
<br> คำสั่งขึ้นบรรทัดใหม่
<p> ข้อความ </p> คำสั่งย่อหน้าใหม่
<hr width = "50%" size = "3"> คำสั่ง ตีเส้น, กำหนดขนาดเส้น
คำสั่ง เพิ่มช่องว่าง
<IMG SRC = "PHOTO.GIF"> คำสั่งแสดงรูปภาพชื่อ Photo.gif
<CENTER> ข้อความ </CENTER> คำสั่งจัดให้ข้อความอยู่กึ่งกลาง
<HTML> </HTML> คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม
<HEAD> </HEAD> คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย <TITLE> อยู่ภายใน
<TITLE> </TITLE> คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar
<BODY> </BODY> คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวปบราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น
รูปแบบตัวอักษร
<br> คำสั่งขึ้นบรรทัดใหม่
<p> ข้อความ </p> คำสั่งย่อหน้าใหม่
<hr width = "50%" size = "3"> คำสั่ง ตีเส้น, กำหนดขนาดเส้น
คำสั่ง เพิ่มช่องว่าง
<IMG SRC = "PHOTO.GIF"> คำสั่งแสดงรูปภาพชื่อ Photo.gif
<CENTER> ข้อความ </CENTER> คำสั่งจัดให้ข้อความอยู่กึ่งกลาง
<HTML> </HTML> คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม
<HEAD> </HEAD> คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย <TITLE> อยู่ภายใน
<TITLE> </TITLE> คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar
<BODY> </BODY> คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวปบราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น
รูปแบบตัวอักษร
<font size = "3"> ข้อความ </font> ขนาดตัวอักษร
<font color = "red"> ข้อความ </font> สีตัวอักษร
<font face = "Arial"> ข้อความ </font> รูปแบบตัวอักษร
<besefont size = "2"> ข้อความ </font> กำหนดค่าเริ่มต้นของขนาดตัวอักษร
<b> ข้อความ </b> ตัวอักษรหนา
<i> ข้อความ </i> ตัวอักษรเอน
<u> ข้อความ </u> ขีดเส้นใต้ตัวอักษร
<tt> ข้อความ </tt> ตัวอักษรแบบพิมพ์ดีด
หมายเหตุ เราสามารถใช้คำสั่งกำหนดรูปแบบตัวอักษร หลายๆรูปแบบได้ เช่น
<font face = "Arial" size = "3" color = "red"> ข้อความ </font> เป็นต้น
จุดเชื่อมโยงข้อมูล
<font color = "red"> ข้อความ </font> สีตัวอักษร
<font face = "Arial"> ข้อความ </font> รูปแบบตัวอักษร
<besefont size = "2"> ข้อความ </font> กำหนดค่าเริ่มต้นของขนาดตัวอักษร
<b> ข้อความ </b> ตัวอักษรหนา
<i> ข้อความ </i> ตัวอักษรเอน
<u> ข้อความ </u> ขีดเส้นใต้ตัวอักษร
<tt> ข้อความ </tt> ตัวอักษรแบบพิมพ์ดีด
หมายเหตุ เราสามารถใช้คำสั่งกำหนดรูปแบบตัวอักษร หลายๆรูปแบบได้ เช่น
<font face = "Arial" size = "3" color = "red"> ข้อความ </font> เป็นต้น
จุดเชื่อมโยงข้อมูล
<a href ="#news"> Hot News </a> ,
<a name ="news"> กำหนดจุดเชื่อมชื่อ news ส่วน "a name" คือตำแหน่งที่ลิงค์ไป (เอกสารเดียวกัน)
<a href ="news.html"> Hot News </a> สร้างลิงค์ไปยังเอกสารชื่อ "news.html"
<a href ="http://www.thai.com"> Thai </a> สร้างลิงค์ไปยังเวปไซท์อื่น
<a href ="http://www.thai.com" target = "_blank" > Thai </a> สร้างลิงค์ไปยังเวปไซท์อื่น และเปิดหน้าต่างใหม่
<a href ="http://www.thai.com"> <img src = "photo.gif"> </a> สร้างลิงค์โดยใช้รูปภาพชื่อ photo.gif เป็นตัวเชื่อม
<a href ="mailto:yo@mail.com"> Email </a> สร้างลิงค์มายังอีเมล
การแสดงผลแบบรายการแบบมีหมายเลขกำกับ
<a name ="news"> กำหนดจุดเชื่อมชื่อ news ส่วน "a name" คือตำแหน่งที่ลิงค์ไป (เอกสารเดียวกัน)
<a href ="news.html"> Hot News </a> สร้างลิงค์ไปยังเอกสารชื่อ "news.html"
<a href ="http://www.thai.com"> Thai </a> สร้างลิงค์ไปยังเวปไซท์อื่น
<a href ="http://www.thai.com" target = "_blank" > Thai </a> สร้างลิงค์ไปยังเวปไซท์อื่น และเปิดหน้าต่างใหม่
<a href ="http://www.thai.com"> <img src = "photo.gif"> </a> สร้างลิงค์โดยใช้รูปภาพชื่อ photo.gif เป็นตัวเชื่อม
<a href ="mailto:yo@mail.com"> Email </a> สร้างลิงค์มายังอีเมล
การแสดงผลแบบรายการแบบมีหมายเลขกำกับ
<OL value = "1" >
<LI> รายการที่ 1
<LI> รายการที่ 2
</OL>
การแสดงผลแบบรายการ ใช้คำสั่ง <OL> เป็นเริ่มและปิดท้ายด้วย </OL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการได้หลายแบบเช่น เรียงลำดับ 1,2,3... หรือ I,II,III... หรือ A,B,C,... ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <OL value = "A"> เป็นต้น
การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ
<LI> รายการที่ 1
<LI> รายการที่ 2
</OL>
การแสดงผลแบบรายการ ใช้คำสั่ง <OL> เป็นเริ่มและปิดท้ายด้วย </OL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการได้หลายแบบเช่น เรียงลำดับ 1,2,3... หรือ I,II,III... หรือ A,B,C,... ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <OL value = "A"> เป็นต้น
การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ
<UL type = "square">
<LI> รายการที่ 1
<LI> รายการที่ 2
</UL>
การแสดงผลแบบรายการ ใช้คำสั่ง <UL> เป็นเริ่มและปิดท้ายด้วย </UL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการ ที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการแบบต่างๆ ดังต่อไปนี้
- รูปวงกลมทึบ "disc"
- รูปวงกลมโปร่ง "circle"
- รูปสี่เหลี่ยม "square"
ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <UL type = "square"> เป็นต้น
การสร้างตาราง
<LI> รายการที่ 1
<LI> รายการที่ 2
</UL>
การแสดงผลแบบรายการ ใช้คำสั่ง <UL> เป็นเริ่มและปิดท้ายด้วย </UL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการ ที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการแบบต่างๆ ดังต่อไปนี้
- รูปวงกลมทึบ "disc"
- รูปวงกลมโปร่ง "circle"
- รูปสี่เหลี่ยม "square"
ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <UL type = "square"> เป็นต้น
การสร้างตาราง
<TABLE BORDER = "2" >
<CAPTION> การสร้างตาราง </CAPTION>
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
การสร้างตารางหัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
การสร้างตาราง ใช้คำสั่ง <TABLE> เป็นเริ่มและปิดท้ายด้วย </TABLE> ส่วน BORDER เป็นคำสั่งย่อยเพื่อใช้ กำหนดขนาดของเส้นตาราง ถ้ากำหนด = "0" จะหมายถึงไม่มีเส้น
- คำสั่ง <CAPTION> และ< /CAPTION> เป็นคำสั่งแสดงข้อความอธิบายชื่อตาราง
- คำสั่ง <TR> และ< /TR> เป็นคำสั่งเพื่อกำหนดแถวในตาราง
- คำสั่ง <TH> และ< /TH> เป็นคำสั่งเพื่อกำหนดหัวเรื่อง ผลลัพธ์ที่ได้คือตัวอักษรจะหนากว่าปกติ (ดูตัวอย่างประกอบ)
- คำสั่ง <TD> และ< /TD> เป็นคำสั่งแสดงข้อมูลปกติ
ความหมายของคำสั่ง Table
<CAPTION> การสร้างตาราง </CAPTION>
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
การสร้างตารางหัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
การสร้างตาราง ใช้คำสั่ง <TABLE> เป็นเริ่มและปิดท้ายด้วย </TABLE> ส่วน BORDER เป็นคำสั่งย่อยเพื่อใช้ กำหนดขนาดของเส้นตาราง ถ้ากำหนด = "0" จะหมายถึงไม่มีเส้น
- คำสั่ง <CAPTION> และ< /CAPTION> เป็นคำสั่งแสดงข้อความอธิบายชื่อตาราง
- คำสั่ง <TR> และ< /TR> เป็นคำสั่งเพื่อกำหนดแถวในตาราง
- คำสั่ง <TH> และ< /TH> เป็นคำสั่งเพื่อกำหนดหัวเรื่อง ผลลัพธ์ที่ได้คือตัวอักษรจะหนากว่าปกติ (ดูตัวอย่างประกอบ)
- คำสั่ง <TD> และ< /TD> เป็นคำสั่งแสดงข้อมูลปกติ
ความหมายของคำสั่ง Table
- TR หมายถึง Table Row
- TH หมายถึง Table Head
- TD หมายถึง Table Data
ขนาดของตาราง
- TH หมายถึง Table Head
- TD หมายถึง Table Data
ขนาดของตาราง
กำหนดความกว้างและความสูงของตาราง
<TABLE width = "50%" height = "60%" >
<CAPTION> ขนาดของตาราง </CAPTION>
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
การตกแต่งตารางหัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
กำหนดความสูงของแถว (row)
<TABLE width = "50%" height = "60%" >
<CAPTION> ขนาดของตาราง </CAPTION>
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
การตกแต่งตารางหัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
กำหนดความสูงของแถว (row)
<TABLE width = "50%">
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD rowspan = "2" > ข้อมูล 2 </TD> </TR>
<TR> <TD> ข้อมูล 3 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
ข้อมูล 3
กำหนดความกว้างของคอลัมภ์ (column)
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD rowspan = "2" > ข้อมูล 2 </TD> </TR>
<TR> <TD> ข้อมูล 3 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
ข้อมูล 3
กำหนดความกว้างของคอลัมภ์ (column)
<TABLE width = "50%">
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
<TR> <TD colspan = "2" > ข้อมูล 3 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
ข้อมูล 3
ตารางซ้อนตาราง
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
<TR> <TD colspan = "2" > ข้อมูล 3 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
ข้อมูล 3
ตารางซ้อนตาราง
<TABLE width = "50%">
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
<TR> <TD> ข้อมูล 3 </TD>
<TABLE width = "50%">
<TR> <TD> ข้อมูล 4 </TD>
<TD> ข้อมูล 5 </TD> </TR>
</TABLE>
</TABLE>
ผลลัพธ์ที่ได้
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
ข้อมูล 3
ข้อมูล 4 ข้อมูล 5
คำอธิบาย
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
<TR> <TD> ข้อมูล 3 </TD>
<TABLE width = "50%">
<TR> <TD> ข้อมูล 4 </TD>
<TD> ข้อมูล 5 </TD> </TR>
</TABLE>
</TABLE>
ผลลัพธ์ที่ได้
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
ข้อมูล 3
ข้อมูล 4 ข้อมูล 5
คำอธิบาย
การทำตารางซ้อนตาราง มักจะใช้ในกรณีเพื่อ อธิบายรายละเอียดเพิ่มเติม ของข้อมูล
การตกแต่งตาราง ใช้คำสั่ง Width และ Height เป็นคำสั่งในการกำหนดขนาดของตาราง เปรียบเทียบกับ จอภาพ เช่น กำหนด Width = "50%" หมายถึง กำหนดความกว้างของตารางให้มีขนาด 50 % เมื่อวัดตามความกว้างของจอภาพ เป็นต้น
โดยปกติเราจะกำหนดอย่างใดอย่างหนึ่ง เช่น <TABLE width = "50%" >
คำสั่งเสริมเพิ่มเติม
การตกแต่งตาราง ใช้คำสั่ง Width และ Height เป็นคำสั่งในการกำหนดขนาดของตาราง เปรียบเทียบกับ จอภาพ เช่น กำหนด Width = "50%" หมายถึง กำหนดความกว้างของตารางให้มีขนาด 50 % เมื่อวัดตามความกว้างของจอภาพ เป็นต้น
โดยปกติเราจะกำหนดอย่างใดอย่างหนึ่ง เช่น <TABLE width = "50%" >
คำสั่งเสริมเพิ่มเติม
- rowspan
เป็นคำสั่งในการกำหนดความสูงของแถวในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)
- colspan
เป็นคำสั่งในการกำหนดความกว้างของคอลัมภ์ในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)
สีกับตาราง
เป็นคำสั่งในการกำหนดความสูงของแถวในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)
- colspan
เป็นคำสั่งในการกำหนดความกว้างของคอลัมภ์ในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)
สีกับตาราง
สีฉากหลังของตาราง
<TABLE width = "50%" bgcolor = "red" >
<CAPTION> สีฉากหลังของตาราง </CAPTION>
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
สีฉากหลังของตารางหัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
กำหนดสีแต่ละช่องในตาราง
<TABLE width = "50%">
<TR> <TH bgcolor = "brown" > หัวเรื่อง 1 </TH>
<TH bgcolor = "white"> หัวเรื่อง 2 </TH> </TR>
<TR> <TD bgcolor = "green" > ข้อมูล 1 </TD>
<TD bgcolor = "blue" > ข้อมูล 2 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
คำอธิบาย
ถ้าต้องการใส่สีกรอบของตาราง สามารถเพิ่มคำ ดังนี้ <TABLE bgcolor = "red">
เราสามารถกำหนดสีของ background ของตารางได้ โดยสามารถกำหนดได้ทั้งตาราง หรือ กำหนดเป็นแต่ละช่องได้
คำสั่งเสริมเพิ่มเติม
<TABLE width = "50%" bgcolor = "red" >
<CAPTION> สีฉากหลังของตาราง </CAPTION>
<TR> <TH> หัวเรื่อง 1 </TH>
<TH> หัวเรื่อง 2 </TH> </TR>
<TR> <TD> ข้อมูล 1 </TD>
<TD> ข้อมูล 2 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
สีฉากหลังของตารางหัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
กำหนดสีแต่ละช่องในตาราง
<TABLE width = "50%">
<TR> <TH bgcolor = "brown" > หัวเรื่อง 1 </TH>
<TH bgcolor = "white"> หัวเรื่อง 2 </TH> </TR>
<TR> <TD bgcolor = "green" > ข้อมูล 1 </TD>
<TD bgcolor = "blue" > ข้อมูล 2 </TD> </TR>
</TABLE>
ผลลัพธ์ที่ได้
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1 ข้อมูล 2
คำอธิบาย
ถ้าต้องการใส่สีกรอบของตาราง สามารถเพิ่มคำ ดังนี้ <TABLE bgcolor = "red">
เราสามารถกำหนดสีของ background ของตารางได้ โดยสามารถกำหนดได้ทั้งตาราง หรือ กำหนดเป็นแต่ละช่องได้
คำสั่งเสริมเพิ่มเติม
- bgcolor
เป็นคำสั่งในการกำหนดสีในตาราง เป็นคำสั่งเสริมของคำสั่ง <Table> และสามารถใช้งานร่วมกับคำสั่ง <TH> หรือ <TD> ได้ด้วย (ดูตัวอย่างประกอบ)
การกำหนดสีสามารถกำหนดเป็นรหัสสีได้ ซึ่งสามารถตรวจสอบได้จาก ตารางสี ตัวอย่างเช่น
<TD bgcolor = " #3232CD" >
หมายถึงสี Medium Bule เป็นต้น
แบ่งพื้นที่จอภาพ
เป็นคำสั่งในการกำหนดสีในตาราง เป็นคำสั่งเสริมของคำสั่ง <Table> และสามารถใช้งานร่วมกับคำสั่ง <TH> หรือ <TD> ได้ด้วย (ดูตัวอย่างประกอบ)
การกำหนดสีสามารถกำหนดเป็นรหัสสีได้ ซึ่งสามารถตรวจสอบได้จาก ตารางสี ตัวอย่างเช่น
<TD bgcolor = " #3232CD" >
หมายถึงสี Medium Bule เป็นต้น
แบ่งพื้นที่จอภาพ
<FRAMESET COLS or ROWS = "80%,*" >
<FRAME SRC = "URL" หรือ ไฟล์รูปภาพ >
<FRAME SRC = "URL" หรือ ไฟล์รูปภาพ >
</FRAMESET>
แบ่งจอภาพในแนวตั้ง
<FRAMESET COLS = "80%,*" >
<FRAME SRC = "main.html" >
<FRAME SRC = "menu.gif" >
</FRAMESET>
80%
20%
คำอธิบาย
<FRAME SRC = "URL" หรือ ไฟล์รูปภาพ >
<FRAME SRC = "URL" หรือ ไฟล์รูปภาพ >
</FRAMESET>
แบ่งจอภาพในแนวตั้ง
<FRAMESET COLS = "80%,*" >
<FRAME SRC = "main.html" >
<FRAME SRC = "menu.gif" >
</FRAMESET>
80%
20%
คำอธิบาย
แบ่งหน้าจอเป็น 2 ส่วน ในแนวตั้ง ส่วนทางซ้ายมีพื้นที่ 80% ของหน้าจอทั้งหมด ส่วนทางขวาคือพื้นที่ที่เหลือ (20%) จอทางขวาจะมีรูปภาพชื่อ menu.gif
แบ่งจอภาพในแนวนอน
<FRAMESET ROWS = "80%,*" >
<FRAME SRC = "main.html" >
<FRAME SRC = "menu.gif" >
</FRAMESET>
20%
80%
คำอธิบาย
แบ่งจอภาพในแนวนอน
<FRAMESET ROWS = "80%,*" >
<FRAME SRC = "main.html" >
<FRAME SRC = "menu.gif" >
</FRAMESET>
20%
80%
คำอธิบาย
แบ่งหน้าจอเป็น 2 ส่วน ในแนวนอน ด้านบนพื้นที่ 20% ส่วนด้านล่างมีพื้นที่ 80%
แบ่งจอภาพในแนวตั้งและแนวนอน
<FRAMESET ROWS = "15%,*" >
<FRAME SRC = "top.html" >
<FRAMESET COLS = "20%,80%" >
<FRAME SRC = "left.html" >
<FRAME SRC = "right.html" >
</FRAMESET>
</FRAMESET>
15%
20%
80%
คำอธิบาย
แบ่งจอภาพในแนวตั้งและแนวนอน
<FRAMESET ROWS = "15%,*" >
<FRAME SRC = "top.html" >
<FRAMESET COLS = "20%,80%" >
<FRAME SRC = "left.html" >
<FRAME SRC = "right.html" >
</FRAMESET>
</FRAMESET>
15%
20%
80%
คำอธิบาย
แบ่งหน้าจอทั้งหมดเป็น 3 ส่วน ด้านบนพื้นที่ 15% ส่วนด้านล่างมีพื้นที่ 85% ในพื้นที่ด้านล่างแบ่งออกเป็น 2 ส่วนด้านซ้าย 20% ด้านขวา 80% (เหมือนกับเวปเพจที่ท่านเห็นอยู่นี้)
ความคิดเห็น
แสดงความคิดเห็น