คำสั่ง Html
เกี่ยวกับข้อความ
ข้อความ | คำสั่ง Html | ผลลัพธ์ |
การขึ้นบรรทัดใหม่ | การขึ้น<br>บรรทัดใหม่ | การขึ้น บรรทัดใหม่ |
เว้นช่องว่างเว้นช่องว่าง | เว้นช่องว่าง “ ” เว้นช่องว่าง | เว้นช่องว่าง เว้นช่องว่าง |
การตีเส้น | การตีเส้น<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> |
|
การจัดรูปแบบข้อความ |
<…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> |
|
เกี่ยวกับตารางใช้ 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> |
|
เกี่ยวกับตารางใช้ 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> |
|
การสร้างลิ้งค์เชื่อมโยง
ข้อความ | คำสั่ง 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>
ข้อความนี้จัดชิดซ้าย
<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> |
|
คำสั่ง Html | ผลลัพธ์ | ||||
<table class=”inline”> <tr> <td> หัวข้อ 1 </td> <td> หัวข้อ 2 </td> </tr> <tr> <td> ข้อความ 1 </td> <td> ข้อความ 2 </td> </tr> </table> |
|
ความกว้างของตาราง
คำสั่ง Html | ผลลัพธ์ | ||||
<table class=”inline wd1″> <tr> <th> หัวข้อ 1 </th> <th> หัวข้อ 2 </th> </tr> <tr> <td> Text 1 </td> <td> Text 2 </td> </tr> </table> |
|
||||
<table class=”inline wd2″> <tr> <th> หัวข้อ 1 </th> <th> หัวข้อ 2 </th> </tr> <tr> <td> Text 1 </td> <td> Text 2 </td> </tr> </table> |
|
||||
<table class=”inline wd3″> <tr> <th> หัวข้อ 1 </th> <th> หัวข้อ 2 </th> </tr> <tr> <td> Text 1 </td> <td> Text 2 </td> </tr> </table> |
|
ข้อความ | คำสั่ง 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 |