คำสั่ง Html

เกี่ยวกับข้อความ

ข้อความ คำสั่ง Html ผลลัพธ์
การขึ้นบรรทัดใหม่ การขึ้น<br>บรรทัดใหม่ การขึ้น
บรรทัดใหม่
เว้นช่องว่างเว้นช่องว่าง เว้นช่องว่าง “&nbsp;” เว้นช่องว่าง เว้นช่องว่าง เว้นช่องว่าง
การตีเส้น การตีเส้น<hr> การตีเส้น
ตัวเอียง <i>ตัวเอียง</i> ตัวเอียง
ตัวหนา <b>ตัวหนา</b> ตัวหนา
ขีดเส้นใต้ <u>ขีดเส้นใต้</u> ขีดเส้นใต้
สีตัวอักษร <font color=“red”>สีแดง</font> สีแดง
ขนาดตัวอักษร <font size=“5”>ขนาดตัวอักษร</font> ขนาดตัวอักษร
ใส่สีพื้นหลัง <h5 style=”background-color:lightBlue;”>Hello World</h5></td>
Hello World
ลำดับหัวข้อย่อย <ol>
<li>ข้อย่อยลำดับที่ 1</li>
<li>ข้อย่อยลำดับที่ 2</li>
<li>ข้อย่อยลำดับที่ 3</li>
</ol>

  1. ข้อย่อยลำดับที่ 1
  2. ข้อย่อยลำดับที่ 2
  3. ข้อย่อยลำดับที่ 3
การจัดรูปแบบข้อความ <…align=”center”…>
<…align=”left”…>
<…align=”right”…>
align=”center” = กึ่งกลาง
align=”left” = ชิดซ้าย
align=”right” = ชิดขวา

รูปภาพ

ข้อความ คำสั่ง Html ผลลัพธ์
แทรกรูปภาพ <img src=“/wp-content/uploads/2020/09/cropped-chulabhorn_graduate_institute_logo-2-300×69.png” width=”xxx” height=”yyy”>


หมายเหตุ xxx = ความสูง, yyy = ความกว้าง

เกี่ยวกับตาราง


คำสั่ง Html ผลลัพธ์
<table border=”1″ width=100%>
<caption>ชื่อตาราง</caption>
<tr>
<td> Row 1, col 1 </td>
<td> Row 1, col 2 </td>
<td> Row 1, col 3 </td>
</tr>
<tr>
<td> Row 2, col 1 </td>
<td> Row 2, col 2 </td>
<td> Row 2, col 3 </td>
</tr>
</table>
ชื่อตาราง
Row 1, col 1 Row 1, col 2 Row 1, col 3
Row 2, col 1 Row 2, col 2 Row 2, col 3

เกี่ยวกับตารางใช้ colspan


คำสั่ง Html ผลลัพธ์
<table border = 1 width=100%>
<caption>ตารางแสดงจำนวนคนในอาชีพต่างๆ</caption>
<tr align=center>
<td colspan=”2″>รับราชการ</td>
<td colspan=”2″>รับจ้าง</td>
<td colspan=”2″>พนักงานบริษัท</td>
</tr>
<tr align=center>
<td>ชาย</td>
<td>หญิง</td>
<td>ชาย</td>
<td>หญิง</td>
<td>ชาย</td>
<td>หญิง</td>
</tr>
<tr align=center>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
ตารางแสดงจำนวนคนในอาชีพต่างๆ
รับราชการ รับจ้าง พนักงานบริษัท
ชาย หญิง ชาย หญิง ชาย หญิง
82 85 78 82 77 81

เกี่ยวกับตารางใช้ rowspan


คำสั่ง Html ผลลัพธ์
<table border=1 width=100%>
<tr align=center>
<td>หัวข้อ</td>
<td>หัวข้อย่อย</td>
</tr>
<tr align=center>
<td rowspan=”2″>1</td>
<td>1.1</td>
</tr>
<tr align=center>
<td>1.2</td>
</tr>
<tr align=center>
<td>2</td>
<td>2.1</td>
</tr>
</table>
หัวข้อ หัวข้อย่อย
1 1.1
1.2
2 2.1

การสร้างลิ้งค์เชื่อมโยง

ข้อความ คำสั่ง Html ผลลัพธ์
การลิงค์ภายในเว็บไซต์ (Web Page/File) <A HERF=chapter3.htm>คลิกที่นี่</A> คลิกที่นี่
การลิงค์ไปยังเว็บไซต์อื่น (URL/Website) <A HERF=http://www.google.co.th>คลิก google</A> คลิก google

คำสั่ง CSS ใน Html

คำสั่ง CSS ใน Html จะใช้ในรูปแบบ Format ดังนี้ <div class=“xxxx”>……………</div>

คำสั่งหัวข้อความ

ข้อความระดับ คำสั่ง Html ผลลัพธ์
ระดับ 1 <div class=”h1″> ข้อความ Heading ระดับ 1 </div>
 ข้อความ Heading ระดับ 1  
ระดับ 2 <div class=”h2″> ข้อความ Heading ระดับ 2 </div>
 ข้อความ Heading ระดับ 2  
ระดับ 3 <div class=”h3″> ข้อความ Heading ระดับ 3 </div>
 ข้อความ Heading ระดับ 3  
ระดับ 4 <div class=”h4″> ข้อความ Heading ระดับ 4 </div>
 ข้อความ Heading ระดับ 4  
ระดับ 5 <div class=”h5″> ข้อความ Heading ระดับ 5 </div>
 ข้อความ Heading ระดับ 5  

คำสั่งย่อหน้าข้อความ

ระดับย่อหน้า คำสั่ง Html ผลลัพธ์
ระดับ 1 <div class=”level1″> ย่อหน้าข้อความ ระดับ 1 </div>
 ย่อหน้าข้อความ ระดับ 1  
ระดับ 2 <div class=”level2″> ย่อหน้าข้อความ ระดับ 2 </div>
 ย่อหน้าข้อความ ระดับ 2  
ระดับ 3 <div class=”level3″> ย่อหน้าข้อความ ระดับ 3 </div>
 ย่อหน้าข้อความ ระดับ 3  
ระดับ 4 <div class=”level4″> ย่อหน้าข้อความ ระดับ 4 </div>
 ย่อหน้าข้อความ ระดับ 4  
ระดับ 5 <div class=”level5″> ย่อหน้าข้อความ ระดับ 5 </div>
 ย่อหน้าข้อความ ระดับ 5  

คำสั่งจัดข้อความ

<DIV ALIGN=”LEFT”>ข้อความนี้จัดชิดซ้าย</DIV>
ข้อความนี้จัดชิดซ้าย


<DIV ALIGN=”CENTER”>ข้อความนี้จัดกึ่งกลาง</DIV>
ข้อความนี้จัดกึ่งกลาง


<DIV ALIGN=”RIGHT”>ข้อความนี้จัดชิดขวา</DIV>
ข้อความนี้จัดชิดขวา



เกี่ยวกับตาราง

คำสั่ง Html ผลลัพธ์
<table class=”inline”>
<tr>
<th> หัวข้อ 1 </th>
<th> หัวข้อ 2 </th>
</tr>
<tr>
<td> ข้อความ 1 </td>
<td> ข้อความ 2 </td>
</tr>
</table>
หัวข้อ 1 หัวข้อ 2
ข้อความ 1 ข้อความ 2

คำสั่ง Html ผลลัพธ์
<table class=”inline”>
<tr>
<td> หัวข้อ 1 </td>
<td> หัวข้อ 2 </td>
</tr>
<tr>
<td> ข้อความ 1 </td>
<td> ข้อความ 2 </td>
</tr>
</table>
หัวข้อ 1 หัวข้อ 2
ข้อความ 1 ข้อความ 2

ความกว้างของตาราง

คำสั่ง Html ผลลัพธ์
<table class=”inline wd1″>
<tr>
<th> หัวข้อ 1 </th>
<th> หัวข้อ 2 </th>
</tr>
<tr>
<td> Text 1 </td>
<td> Text 2 </td>
</tr>
</table>
หัวข้อ 1 หัวข้อ 2
Text 1 Text 2
<table class=”inline wd2″>
<tr>
<th> หัวข้อ 1 </th>
<th> หัวข้อ 2 </th>
</tr>
<tr>
<td> Text 1 </td>
<td> Text 2 </td>
</tr>
</table>
หัวข้อ 1 หัวข้อ 2
Text 1 Text 2
<table class=”inline wd3″>
<tr>
<th> หัวข้อ 1 </th>
<th> หัวข้อ 2 </th>
</tr>
<tr>
<td> Text 1 </td>
<td> Text 2 </td>
</tr>
</table>
หัวข้อ 1 หัวข้อ 2
Text 1 Text 2

ข้อความ คำสั่ง Html ผลลัพธ์
ลำดับหัวข้อย่อย <ol>
<div class=”li”>ข้อย่อยลำดับที่ 1</div>

<div class=”level1″>
<div class=”li1″>ข้อย่อยลำดับที่ 1.1</div>
</div>
</ol>

    ข้อย่อยลำดับที่ 1

    ข้อย่อยลำดับที่ 1.1

รูปแสดง Icon ลิ้งค์ Link

ข้อความ คำสั่ง Html ผลลัพธ์
การลิงค์ไปยังเว็บไซต์อื่น (URL/Website) <A HERF=http://www.google.co.th class=”media mediafile urlextern”คลิก google</A> คลิก google
การลิงค์ไปยังไฟล์ PDF (URL/Website) <A HERF=คู่มือ.pdf class=”media mediafile mf_pdf”คลิก PDF</A> คลิก PDF
การลิงค์ไปยังไฟล์ Word (URL/Website) <A HERF=คู่มือ.docx class=”media mediafile mf_word”คลิก Word</A> คลิก Word
การลิงค์ไปยังไฟล์ Excel (URL/Website) <A HERF=คู่มือ.xlsx class=”media mediafile mf_excel”คลิก Excel</A> คลิก Excel
การลิงค์ไปยังไฟล์ Powerpoint (URL/Website) <A HERF=คู่มือ.pptx class=”media mediafile mf_ppt”คลิก Powerpoint</A> คลิก Powerpoint
การลิงค์ไปยังไฟล์ Zip (URL/Website) <A HERF=คู่มือ.zip class=”media mediafile zip”คลิก Zip</A> คลิก Zip
การลิงค์ไปยังไฟล์ Youtube (URL/Website) <A HERF=Link Youtube class=”media mediafile mf_you”คลิก Youtube</A> คลิก Youtube