ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    • ฟอนต์ THSarabunNew
    • ฟอนต์ Sarabun
    • ฟอนต์ Mali
    • ฟอนต์ Trirong
    • ฟอนต์ Maitree
    • ฟอนต์ Taviraj
    • ฟอนต์ Kodchasan
    • ฟอนต์ ChakraPetch
แกะโค้ด

ลำดับตอนที่ #1 : เรียนรู้ คำสั่งภาษา Html

  • อัปเดตล่าสุด 30 ก.ค. 54


 คำสั่งพื้นฐาน
< !-- ข้อความ --> คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ
<br> คำสั่งขึ้นบรรทัดใหม่
<p> ข้อความ </p> คำสั่งย่อหน้าใหม่
<hr width="50%" size = "3"> คำสั่ง ตีเส้น, กำหนดขนาดเส้น
&nbsp; คำสั่ง เพิ่มช่องว่าง
<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> 


ผลลัพธ์ที่ได้ 

การสร้างตาราง
หัวเรื่อง 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 
 

 ขนาดของตาราง
กำหนดความกว้างและความสูงของตาราง 
<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) 
<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


ตารางซ้อนตาราง 
<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


คำอธิบาย 
การทำตารางซ้อนตาราง มักจะใช้ในกรณีเพื่อ อธิบายรายละเอียดเพิ่มเติม ของข้อมูล 

 
การตกแต่งตาราง ใช้คำสั่ง Width และ Height เป็นคำสั่งในการกำหนดขนาดของตาราง เปรียบเทียบกับ จอภาพ เช่น กำหนด width="50%" หมายถึง กำหนดความกว้างของตารางให้มีขนาด 50 % เมื่อวัดตามความกว้างของจอภาพ เป็นต้น

โดยปกติเราจะกำหนดอย่างใดอย่างหนึ่ง เช่น <TABLE width="50%" > 

คำสั่งเสริมเพิ่มเติม 
- rowspan 
เป็นคำสั่งในการกำหนดความสูงของแถวในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)
- colspan 
เป็นคำสั่งในการกำหนดความกว้างของคอลัมภ์ในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)


 



ติดตามเรื่องนี้
เก็บเข้าคอลเล็กชัน

ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

loading
กำลังโหลด...

อีบุ๊ก ดูทั้งหมด

loading
กำลังโหลด...

1ความคิดเห็น

กำลังโหลด...

1ความคิดเห็น

กำลังโหลด...
×
แทรกรูปจากแกลเลอรี่ - Dek-D.com
L o a d i n g . . .
x
เรียงตาม:
ใหม่ล่าสุด
ใหม่ล่าสุด
เก่าที่สุด
ที่กำหนดไว้
*การลบรูปจาก Gallery จะส่งผลให้ภาพที่เคยถูกนำไปใช้ถูกลบไปด้วย

< Back
แทรกรูปโดย URL
กรุณาใส่ URL ที่ขึ้นต้นด้วย
http:// หรือ https://
กำลังโหลด...
ไม่สามารถโหลดรูปภาพนี้ได้
*เมื่อแทรกรูปเป็นการยืนยันว่ารูปที่ใช้เป็นของตัวเอง หรือได้รับอนุญาตจากเจ้าของ และลงเครดิตเจ้าของรูปแล้วเท่านั้น
< Back
สร้างโฟลเดอร์ใหม่
< Back
ครอปรูปภาพ
Picture
px
px
ครอปรูปภาพ
Picture