Menu

HTML5

html5 คืออะไร แล้วต่างจาก html เวอร์ชั่นก่อนหน้ายังไง ? มาดูกัน
html5 มันพัฒนามาจาก html4 ซึ่งเขาได้เพิ่มฟิจเจอร์ให้มันสามารถทำงานได้มีประสิทธิภาพมากยิ่งขึ้น เช่น มีการเพิ่มแท็กใหม่ๆ เพื่อให้นักพัฒนาได้พัฒนาแอพพลิเคชั่นได้เร็วขึ้น เป็นต้น

ตัวอย่าง tag ของ HTML5


<ABBR> แสดงตัวย่อ
ตัวอย่างคำสั่ง

<p>ขอต้อนรับเข้าสู่…<abbr title=”กรุงเทพมหานคร”>กรุงเทพฯ</abbr></p>

ตัวอย่างผลลัพธ์
ขอต้อนรับเข้าสู่…กรุงเทพฯ


<BDO> กำหนดทิศทางการอ่าน-เขียนข้อความ
ตัวอย่างคำสั่ง

<bdo dir=” ltr “>แสดงข้อความจากซ้ายไปขวา</bdo><br>
<bdo dir=” rtl “>แสองข้อความจากขวาไปซ้าย</bdo>

ตัวอย่างผลลัพธ์
แสดงข้อความจากซ้ายไปขวา
แสองข้อความจากขวาไปซ้าย


<CANVAS> สำหรับวาดรูปกราฟิก
ตัวอย่างคำสั่ง

<canvas id=”square”></canvas>
<script>
var canvas=document.getElementById(‘square’);
var ctx=canvas.getContext(‘2d’);
ctx.fillStyle=’#FF0000′;
ctx.fillRect(0,0,200,200);
</script>

ตัวอย่างผลลัพธ์

<CAPTION> กำหนดคำอธิบายตาราง
ตัวอย่างคำสั่ง

<table border>
<caption>ใส่คำอธิบายตารางที่นี่</caption>
<tr>
<th>เดือน</th>
<th>รายได้</th>
<th>เงินเก็บ</th>
</tr>

<tr>
<td>มกราคม</td>
<td>30,000</td>
<td>10,000</td>
</tr>

<tr>
<td>กุมภาพันธ์</td>
<td>40,000</td>
<td>20,000</td>
</tr>

<tr>
<td>มีนาคม</td>
<td>50,000</td>
<td>30,000</td>
</tr>

</table>

ตัวอย่างผลลัพธ์

ใส่คำอธิบายตารางที่นี่
เดือน รายได้ เงินเก็บ
มกราคม 30,000 10,000
กุมภาพันธ์ 40,000 20,000
มีนาคม 50,000 30,000


<CITE> แสดงข้อความอ้างอิง
ตัวอย่างคำสั่ง

ม้าโทรจัน (อังกฤษ: Trojan horse) หมายถึง โปรแกรมคอมพิวเตอร์ที่ถูกบรรจุเข้าไปในคอมพิวเตอร์ เพื่อลอบเก็บข้อมูลของคอมพิวเตอร์เครื่องนั้น เช่น ข้อมูลชื่อผู้ใช้ รหัสผ่าน เลขที่บัญชีธนาคาร หมายเลขบัตรเครดิต
<cite>อ้างอิงจาก https://th.wikipedia.org/wiki/ม้าโทรจัน_(คอมพิวเตอร์)</cite>

ตัวอย่างผลลัพธ์
ม้าโทรจัน (อังกฤษ: Trojan horse) หมายถึง โปรแกรมคอมพิวเตอร์ที่ถูกบรรจุเข้าไปในคอมพิวเตอร์ เพื่อลอบเก็บข้อมูลของคอมพิวเตอร์เครื่องนั้น เช่น ข้อมูลชื่อผู้ใช้ รหัสผ่าน เลขที่บัญชีธนาคาร หมายเลขบัตรเครดิต
อ้างอิงจาก https://th.wikipedia.org/wiki/ม้าโทรจัน_(คอมพิวเตอร์)


<DATALIST> แสดงคำช่วยเหลือเมื่อกรอกข้อมูล
ตัวอย่างคำสั่ง

<form action=”frmTarget.php” method=”get”>
<input list=”language” name=”language” >
<datalist id=”language” >
<option value=”ASP.net” >
<option value=”PHP” >
<option value=”Python” >
<option value=”Javascript” >
</datalist>
</form>

ตัวอย่างผลลัพธ์





<DEL> แสดงข้อความขีดฆ่า
ตัวอย่างคำสั่ง

<p>โทรศัพท์ที่ฉันใช้คือ <del>Samsung</del> iPhones</p>

ตัวอย่างผลลัพธ์

โทรศัพท์ที่ฉันใช้คือ Samsung iPhones


<DETAILS> กำหนดรายละเอียดเพิ่มเติม
ตัวอย่างคำสั่ง

<details>
<summary>Computer</summary>
<p>คอมพิวเตอร์จัดเป็นเครื่องอิเล็กทรอนิกส์ ที่สร้างขึ้นเพื่อประมวลผลแทนมนุษย์</p>
</details>

ตัวอย่างผลลัพธ์

Computer

คอมพิวเตอร์จัดเป็นเครื่องอิเล็กทรอนิกส์ ที่สร้างขึ้นเพื่อประมวลผลแทนมนุษย์


<FIELDSET> จัดกลุ่มฟิวส์ให้กับฟอร์ม
ตัวอย่างคำสั่ง

<form>
<fieldset>
<legend>กรอกข้อมูล</legend>
ชือ: <input type=”text” name=”name”> <input type=”submit” value=”ส่งข้อมูล”>
</fieldset>
</form>

ตัวอย่างผลลัพธ์

กรอกข้อมูล

ชือ:


<METER> เครื่องมือวัดข้อมูล
ตัวอย่างคำสั่ง

<meter min=”0″ max=”10″ value=”1″>value:1-10</meter>
<meter value=”0.8″>80%</meter>

ตัวอย่างผลลัพธ์
value:1-10
80%


<OPTION> แสดงตัวเลือกในลิส
ตัวอย่างคำสั่ง

<select>
<option value=”php”>php</option>
<option value=”sql”>mysql</option>
<option value=”javascript”>javascript</option>
</select>

ตัวอย่างผลลัพธ์


<PROGRESS> แสดงความคืบหน้าการทำงาน
ตัวอย่างคำสั่ง

<progress value=”45″ max=”100″></progress>

ตัวอย่างผลลัพธ์


<SUB> แสดงข้อความตัวห้อย
ตัวอย่างคำสั่ง

<p>ข้อความปกติ <sub>ข้อความตัวห้อย</sub></p>

ตัวอย่างผลลัพธ์

ข้อความปกติ ข้อความตัวห้อย


<SUP> แสดงข้อความตัวยก
ตัวอย่างคำสั่ง

<p>ข้อความปกติ <sup>ข้อความตัวห้อย</sup></p>

ตัวอย่างผลลัพธ์

ข้อความปกติ ข้อความตัวห้อย


<TBODY> กำหนดขอบเขตข้อมูลในตาราง
ตัวอย่างคำสั่ง

<table>
<tfoot>
<tr><td>รวม</td> <td>30</td></tr>
</tfoot>
<tbody>
<tr><td>มกราคม</td> <td>10</td></tr>
<tr><td>กุมภาพันธ์</td> <td>20</td></tr>
</tbody>
<thead>
<tr><th>เดือน</th> <th>ยอดขาย</th></tr>
</thead>
</table>

ตัวอย่างผลลัพธ์

รวม 30
มกราคม 10
กุมภาพันธ์ 20
เดือน ยอดขาย