ลำดับตอนที่ #1
คืนค่าการตั้งค่าทั้งหมด
คุณแน่ใจว่าต้องการคืนค่าการตั้งค่าทั้งหมด ?
ลำดับตอนที่ #1 : เรียนรู้ คำสั่งภาษา Html
คำสั่งพื้นฐาน
รูปแบบตัวอักษร
| < !-- ข้อความ --> | คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ |
| <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> | ตัวอักษรแบบพิมพ์ดีด |
| จุดเชื่อมโยงข้อมูล | |
| <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> | สร้างลิงค์มายังอีเมล |
| การแสดงผลแบบรายการแบบมีหมายเลขกำกับ | |
| <OL value = "1" > <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"> เป็นต้น |
| การสร้างตาราง | |||||
| <TABLE BORDER = "2" > <CAPTION> การสร้างตาราง </CAPTION> <TR> <TH> หัวเรื่อง 1 </TH> <TH> หัวเรื่อง 2 </TH> </TR> <TR> <TD> ข้อมูล 1 </TD> <TD> ข้อมูล 2 </TD> </TR> </TABLE> ผลลัพธ์ที่ได้
| การสร้างตาราง ใช้คำสั่ง <TABLE> เป็นเริ่มและปิดท้ายด้วย </TABLE> ส่วน BORDER เป็นคำสั่งย่อยเพื่อใช้ กำหนดขนาดของเส้นตาราง ถ้ากำหนด = "0" จะหมายถึงไม่มีเส้น - คำสั่ง <CAPTION> และ< /CAPTION> เป็นคำสั่งแสดงข้อความอธิบายชื่อตาราง - คำสั่ง <TR> และ< /TR> เป็นคำสั่งเพื่อกำหนดแถวในตาราง - คำสั่ง <TH> และ< /TH> เป็นคำสั่งเพื่อกำหนดหัวเรื่อง ผลลัพธ์ที่ได้คือตัวอักษรจะหนากว่าปกติ (ดูตัวอย่างประกอบ) - คำสั่ง <TD> และ< /TD> เป็นคำสั่งแสดงข้อมูลปกติ ความหมายของคำสั่ง Table - TR หมายถึง Table Row - 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> ผลลัพธ์ที่ได้
กำหนดความสูงของแถว (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> ผลลัพธ์ที่ได้
กำหนดความกว้างของคอลัมภ์ (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> ผลลัพธ์ที่ได้
ตารางซ้อนตาราง <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> ผลลัพธ์ที่ได้
คำอธิบาย การทำตารางซ้อนตาราง มักจะใช้ในกรณีเพื่อ อธิบายรายละเอียดเพิ่มเติม ของข้อมูล | การตกแต่งตาราง ใช้คำสั่ง Width และ Height เป็นคำสั่งในการกำหนดขนาดของตาราง เปรียบเทียบกับ จอภาพ เช่น กำหนด width="50%" หมายถึง กำหนดความกว้างของตารางให้มีขนาด 50 % เมื่อวัดตามความกว้างของจอภาพ เป็นต้น โดยปกติเราจะกำหนดอย่างใดอย่างหนึ่ง เช่น <TABLE width="50%" > คำสั่งเสริมเพิ่มเติม - rowspan เป็นคำสั่งในการกำหนดความสูงของแถวในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ) - colspan เป็นคำสั่งในการกำหนดความกว้างของคอลัมภ์ในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ) | |||||||||||||||||||||||
เก็บเข้าคอลเล็กชัน
ความคิดเห็น