คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Quick List


HTML Element ทั้งหมด

หน้านี้เป็น Quick List รายการ HTML Element ทั้งหมดที่เรียงลำดับตามตัวอักษร เวลาที่เราจำ attribute ไม่ได้ หรืออยากดูตัวอย่างการนำไปใช้้ ก็ให้มาค้นหาจากหน้านี้นะคะ หวังว่าจะเป็นประโยชน์ และได้ใช้กันบ่อยๆ (เพราะใช้เวลารวบรวมนานมาก)

ในบทเรียนสอน HTML นั้น enjoyday ไม่ได้นำเสนอ Element ทั้งหมด เนื่องจากบาง tag ไม่ค่อยถูกนำมาใช้ เมื่อต้องการไปยังเนื้อหาของ Element ใดๆ ให้คลิกที่ตัวเลขบทเรียน ทางด้านขวา ซึ่งแยกเป็นเรื่อง HTML | CSS | XHTML ไว้ให้แล้วค่ะ

tag ล้าสมัย หมายถึง tag ที่ถูกเอาออกจากมาตรฐานของ HTML/XHTML แบบ Strict ซึ่งสามารถใช้ tag อื่น หรือใช้ style sheet เขียนแทนได้

Element Description & Attribute Style Sheet Chapter
HTML CSS XHTML
<!-- ... --> ข้อความหมายเหตุ (comment)   3    
<!DOCTYPE ...> ประกาศ doctype บอกชนิดและหมายเลขรุ่น HTML ที่ใช้   3   4
<a> กำหนดจุดลิงค์ และตำแหน่ง anchor
- href="URL ที่จะลิงค์ไป"
- name="ชื่อ anchor"
- target="_blank" | "_parent" | "_self" | "_top" | "window name"
- title="คำอธิบายลิงค์"


a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
13 15, 25  
<abbr> กำหนดอักษรย่อหรือคำย่อ   10    
<acronym> กำหนดอักษรย่อหรือคำย่อ (เมื่อเอาmouse ชี้จะปรากฏคำเต็มในแถบอธิบาย)   10    
<address> กำหนดที่อยู่ผู้สร้างเว็บเพจ (ตัวเอียง)   10    
<applet>
*tag ล้าสมัย ใช้ <object> แทน
ใช้เรียก Java applet เข้ามาทำงานในเว็บเบราเซอร์        
<area> กำหนดพื้นที่เป็นลิงค์ใน image map        
<b> กำหนดข้อความเป็นตัวหนา font-weight:normal | bold | bolder | lighter | number

p, div { font-weight:bold; }
10 8  
<base> กำหนดและเปลี่ยน URL พื้นฐาน (base URL) ของหน้าเว็บเพจ ใช้ร่วมกับ relative URL อื่นๆ ในเว็บเพจ
- href ="URL"
- target="_blank" | "_parent" | "_self" | "_top" | "window name"
       
<basefont>
*tag ล้าสมัย ใช้ style sheet แทน
ใช้กำหนดเปลี่ยนแปลงรูปแบบตัวอักษรพื้นฐาน (base font)
face="ชนิดตัวอักษร"
size="number"
color="สี"
font-family:ชนิดตัวอักษร
font-size:number
color:สี
  8  
<bdo> กำหนดทิศทางข้อความ (ซ้ายไปขวา/ขวาไปซ้าย) direction:ltr | rtl 10 9  
<bgsound> กำหนดเสียงเพลง หรือเสียงประกอบให้กับหน้าเว็บเพจ
src= "URL"
loop = "infinite" | "number" จำนวนครั้ง
       
<big> กำหนดข้อความให้มีขนาดใหญ่ขึ้นจากขนาดปัจจุบันขึ้น 1 ระดับ   10    
<blink> กำหนดข้อความกระพริบ (เฉพาะ Netscape,Firefox) text-decoration:none | underline | overline | line-through | blink

span {text-decoration:blink }
10 9  
<blockquote> กำหนดข้อความหรือเนื้อหาที่หยิบยกมาจากแหล่งอื่น   10    
<body> เป็นส่วนที่แสดงเนื้อหาที่จะแสดงทางหน้าจอทั้งหมด
กำหนดลักษณะให้พื้นหลัง สีตัวอักษร ระยะห่างจากขอบ
- bgcolor="สี" กำหนดสีพื้นหลังในหน้าเว็บเพจ
- text="สี" กำหนดสีตัวอักษร
- background="url" กำหนดพื้นหลังเป็นรูปภาพ
- bgproperties="fixed" กำหนดให้รูปพื้นหลังไม่เลื่อนตาม scrollbar
- topmargin="number" กำหนดระยะของเนื้อหาให้ห่างจากขอบด้านบน
- leftmargin="number" กำหนดระยะของเนื้อหาให้ห่างจากขอบด้านซ้าย
- link="สี" กำหนดสีของลิงค์
- vlink="สี" กำหนดสีของลิงค์ที่คลิกแล้ว
- alink="สี" กำหนดสีของลิงค์ขณะคลิก
body {
background: #9E9E9E;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color: #5C5C5C;
margin: 0;
}

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

5, 13 8, 10, 15  
<br> ขึ้นบรรทัดใหม่
- clear="left" | "right" | "all" | "none"
clear:left | right | both | none 8    
<button>

ปุ่ม
- type="button" | "submit" | "reset"
- name="ชื่อปุ่ม"
- value="ค่าที่จะส่งให้ form"
- disabled กำหนดให้ปุ่มใช้งานไม่ได้
- accesskey="char" shortcut key
- tabindex="number" tab order

       
<caption> ใช้แสดงคำอธิบาย และข้อความประกอบตาราง
valign = "top" | "bottom" | "left" | "right"
  12    
<center>
*tag ล้าสมัย ให้ใช้ stye sheet แทน
จัดตำแหน่งของวัตถุให้อยู่ตรงกลาง text-align:left | center | right | justify

p {text-align:center }
  9  
<cite> กำหนดแหล่งอ้างอิง (citation) (ตัวเอียง)   10    
<code> กำหนดข้อความเป็น source code โปรแกรม (แสดงผลด้วยความกว้างอักษรคงตัว)   10    
<col> กำหนดคุณสมบัติให้คอลัมน์ใดๆ (Firefox ไม่สนับสนุน)
- span="number"
- align ="left" | "center" | "right" | "justify"
- width="number"
- bgcolor="สี"
  12    
<comment> ข้อความหมายเหตุ (comment) (เฉพาะ IE)        
<dd> แสดงผลลิสต์รายการแบบให้คำนิยาม ใช้ร่วมกับ <dl>,<dt>
  11    
<del> กำหนดข้อความที่ลบออกไป (ขีดฆ่า) text-decoration:none | underline | overline | line-through | blink

span {text-decoration:line-through }
10 9  
<dfn> กำหนดข้อความเป็นการนิยามศัพท์ (ตัวเอียง)   10    
<dir>
*tag ล้าสมัย ให้ใช้ <ul> แทน
 ใช้แสดงลิสต์รายการแจกแจงเป็นข้อๆ ใช้ร่วมกับ <li>        
<div> กำหนดรูปแบบหรือลักษณะข้อความ แบ่งสัดส่วนเนื้อหา
- align = "left" | "center" | "right" | "justify"
div {
font-size: 90%;
font-family: "Courier New", Courier, monospace;
color:#003399;
background-color: #E9F3F3
border: #AAC9EC 1px solid;
padding: 4px;
margin-top:5px;
margin-bottom:20px;
}
8    
<dl> แสดงผลลิสต์รายการแบบให้คำนิยาม ใช้ร่วมกับ <dt>,<dd>
  11    
<dt> แสดงผลลิสต์รายการแบบให้คำนิยาม ใช้ร่วมกับ <dl>,<dd>
  11    
<em> เน้นข้อความ (ตัวเอียง) font-style:normal | italic |
oblique

p,div { font-style:italic }
10    
<embed>
*tag ล้าสมัย ให้ใช้ <object> แทน
ใช้แสดงการทำงานของโปรแกรม plug-in โดยนำไปผนวกกับเอกสาร HTML
- src="url"   url ของไฟล์ที่จะให้เล่น
- width="no"   กำหนดขนาดความกว้างของตัว player
- height="no"  กำหนดขนาดความสูงของตัว player
- align="top | middle | bottom | left | right"   จัดวางตำแหน่งให้กับวัตถุ ที่อยู่ข้างๆ ตัว player
- name="ชื่อ"   ชื่ออ้างอิงของวัตถุ
- autostart="true | false"  
- loop="true | false | number"  
- playcount="no"  จำนวนรอบที่ให้เล่น (เฉพาะ IE)
- hidden="true | false"   ให้ซ่อน หรือแสดงตัว player
- volume="0 ถึง 100" volume ของเสียง (ใช้ได้เฉพาะ Netscape)
  17    
<fieldset> ใช้จัดกลุ่มฟิลด์ป้อนข้อมูลใน Form ทำให้เป็นระเบียบ   15 19  
<font>
*tag ล้าสมัย ให้ใช้ style sheet แทน
กำหนดชนิด ขนาด และสีให้ตัวอักษร
face="ชนิดตัวอักษร"
size="number"
color="สี"
font-family:ชนิดตัวอักษร
font-size:number
color:สี

p,div { font-family: sans-serif, Arial;
font-size:16px;
color:#FF0033;
}
9 8  
<form> ใช้สร้างแบบฟอร์ม
- name="ชื่อของ Form"
- method="get | post"
- target="_blank | _self | _parent" หน้าต่างที่จะให้ผลของ Script แสดงผล
  15 19  
<frame> Frame แต่ละหน้าต่าง
- noresize กำหนดไม่ให้ผู้ใช้ปรับขนาด Frame ได้
- frameborder="yes | no"  แสดง/ไม่แสดงกรอบของ frame
- marginheight="number" กำหนดระยะห่าง frame จากขอบหน้าต่างแนวตั้ง
- marginwidth="number" กำหนดระยะห่าง frame จากขอบหน้าต่างแนวนอน
- scrolling="yes | no | auto" แสดงตัวเลื่อนหรือไม่
  16    
<frameset> Frame set
- cols แบ่ง Frame แนวตั้ง
- rows แบ่ง Frame แนวนอน
  16    
<h1> ถึง <h6> กำหนดหัวเรื่อง
align = "left | center | right | justify"
  7    
<head> ใช้กำหนดรายละเอียดต่างๆ เกี่ยวกับเว็บเพจ   3    
<hr> เส้นคั่น
- width="number | %" ความยาวของเส้นคั่น
- size="number" ความหนาของเส้นคั่น มีค่าเป็น 1 ถึง 7 และ -1 ถึง -7
- align="left | center | right" ตำแหน่งที่จัดวาง
- color="สี" สีของเส้นคั่น
- noshade กำหนดให้เป็นเส้นทึบ
  7    
<html> เริ่มต้นเว็บเอกสารเว็บเพจ กำหนดขอบเขตของเว็บเพจ   3    
<i> กำหนดข้อความเป็นตัวเอียง font-style:normal | italic |
oblique

p,div { font-style:italic }
10 8  
<iframe> การสร้างชุดของ Frame จะใช้ tag <frameset> และกำหนด Frame แต่ละหน้าด้วย tag <frame> มี attribute สำหรับปรับแต่ง Frame ได้แก่

- noresize กำหนดไม่ให้ผู้ใช้ปรับขนาด Frame ได้
- frameborder="yes | no"  ปกติจะมีกรอบของ frame คั่นระหว่าง frame อยู่ แต่ถ้าไม่ต้องการให้เห็น กำหนดค่าเป็น "no"
- marginheight="number"   กำหนดระยะห่าง frame จากขอบหน้าต่างแนวตั้ง
- marginwidth="number"  กำหนดระยะห่าง frame จากขอบหน้าต่างแนวนอน
- scrolling="yes | no | auto"   ถ้าหน้าเว็บเพจยาวจะมีตัวเลื่อนโดยอัตโนมัติ ค่าปกติ"auto" ถ้าไม่ต้อง การให้มีตัวเลื่อน ให้กำหนดเป็น "no"
  16    
<img> แสดงรูปภาพ
- src="ไฟล์รูปภาพ"
- alt="คำอธิบายรูปภาพ"
- width="number" ความกว้างของรูป
- height="number" ความสูงของรูป
- align = "top" | "middle" | "bottom" จัดวางตำแหน่งรูปภาพกับข้อความ
- border="number" ขนาดกรอบของรูป
- vspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวตั้ง
- hspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวนอน
  14 18  
<input> ใช้สร้างฟิลด์ป้อนข้อมูลแบบต่างๆ ใน Form
- type="text" | "checkbox" | "radio" | "password" | "hidden" | "submit" | "reset" | "button" | "file" | "image"
- name="ชื่อช่องกรอกข้อมูล"
- value="ข้อมูล"
- size="number"
- maxlength="number"
- checked ให้ฟิลด์ป้อนข้อมูลแบบ checkbox | radio ถูกเลือก
- disabled lock ไม่ให้ฟิลด์ป้อนข้อมูลใช้งานได้
- readonly ให้ฟิลด์ป้อนข้อมูลอ่านได้อย่างเดียว กรอกข้อมูลไม่ได้
  15 19  
<ins> กำหนดข้อความที่เพิ่มเข้ามา ใช้คู่กับ <del>   10    
<isindex>
*tag ล้าสมัย ให้ใช้ <form> แทน
ใช้สร้างแบบ form แบบมีฟิลด์ป้อนข้อมูลฟิลด์เดียว
- prompt="ข้อความหน้า textbox"
       
<kbd> กำหนดข้อความที่พิมพ์จากคีย์บอร์ด (แสดงผลด้วยความกว้างอักษรคงตัว)   10    
<label> ข้อความประกอบฟิลด์ป้อนข้อมูล
- for="ชื่อ label"
    19  
<legend> ใช้แสดงคำอธิบายกลุ่มฟิลด์ป้อนข้อมูล
- align = "top" | "bottom" | "left" | "center" | "right"
  15    
<li> ใช้แสดงข้อมูล 1 แถวรายการ (list item)
- type="disc" | "circle" | "square"
  11 13  
<link> ใช้กำหนดความสัมพันธ์ระหว่างเว็บเพจกับข้อมูลภายนอกเพื่อนำมาใช้งานในเว็บเพจ
- rel = "stylesheet" | "next" | "previous" |"section" | "subsection" |"contents"
- type = "MIME Type ของ link resource"
- href = "url ของไฟล์ที่ต้องการ link ไป"
- src = "ไฟล์ที่ต้องการแทรก"
  4    
<listing>
*tag ล้าสมัย ให้ใช้ <pre> แทน
แสดงข้อมูลรายการคอมพิวเตอร์แบบต่างๆ เช่น source code program (แสดงผลด้วยความกว้างอักษรคงตัว)   10    
<map> ใช้สร้าง image map        
<marquee> ใช้แสดงข้อความตัวอักษรวิ่งภายในกรอบ (ใช้ได้เฉพาะ IE)
- width="number"
- height="number"
- direction="left" | "right"
- behavior="scroll" | "slide" | "alternate"ลักษณะการวิ่ง
- scrolldelay="millisecond"
- scrollamount="number" ให้เคลื่อนที่ครั้งละกี่ pixel
- loop="number" | "infinite"
- bgcolor="สีพื้นหลัง"
- hspace="number"
- vspace="number"
       
<menu>
*tag ล้าสมัย ให้ใช้ <ul> แทน
ใช้แสดงข้อมูลแบบแจกแจงเป็นข้อๆ        
<meta> ใช้กําหนดคุณสมบัติให้เว็บเพจ เช่น กําหนดคําสําคัญสําหรับ search engine, กําหนดชุดตัวอักษร เป็นต้น   4    
<multicol>

ใช้แสดงเนื้อหาแบบหลายคอลัมน์ (multi column)
- cols="number" จำนวนคอลัมน์
- gutter="number" ระยะห่างระหว่างคอลัมน์
- width="number" ความกว้างของคอลัมน์
(ใช้ได้เฉพาะ Netscape)

       
<nobr> ใช้ยกเลิกการตัดคำขึ้นบรรทัดใหม่โดยอัตโนมัติ white-space:normal | nowrap      
<noembed> ใช้แสดงข้อความในเว็บเบราเซอร์ที่ไม่สนับสนุนการทำงานของโปรแกรมประเภท plug-in ที่ใช้ใน ไม่รู้จัก <embed>   17    
<noframe> ใช้แสดงข้อความในเว็บเบราเซอร์ที่ไม่สนับสนุนการแสดง frame ไม่รู้จัก <frame>,<frameset>   16    
<noscrip> ใช้แสดงข้อความในเว็บเบราเซอร์ที่ไม่สนับสนุนการทำงานของ script ไม่รู้จักคำสั่ง <script>        
<object> ใช้กำหนดเพื่อเรียกใช้และแสดงผลการทำงานของ object ชนิดต่างๆ เช่น ภาพกราฟฟิก, ไฟล์เอกสาร, ActiveX ได้ โดย object แต่ละชนิดจะมีวิธีเรียกใช้ที่แตกต่างกัน   17    
<ol> แสดงผลลิสต์รายการแบบมีลำดับ (ordered list)
- type="1" | "A" | "a" | "I" | "i" ลักษณะลำดับ
- start="" เริ่มรายการจากตัวเลข หรือตัวอักษรใด
list-style-type:none | disc | circle | square | decimal |
decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha

<ul style="list-style-type:decimal">
11 13  
<option> ใช้แสดงตัวเลือกใน listbox ใช้ร่วมกับ <select>
- value="ค่าของตัวเลือก"
- selected ให้ตัวเลือกนี้ถูกเลือก
  15    
<p> แสดงข้อความในลักษณะพารากราฟ (paragraph)
- align="left" | "center" | "right" | "justify"
  8    
<param> - name
- value
       
<plaintext>
*tag ล้าสมัย ให้ใช้ <pre> แทน
กำหนดให้เว็บเบราเซอร์ไม่สนใจตีความคำสั่ง HTML ใดๆ ให้แสดงออกมาเป็นข้อความธรรมดา        
<pre> กำหนดข้อความที่จัดรูปไว้ก่อน (แสดงผลด้วยความกว้างอักษรคงตัว)   10    
<q> กำหนดคำพูดที่ยกมาแบบสั้น (ใน Firefox จะเติมเครื่องหมายคำพูดใ้ห้)   10    
<s>
*tag ล้าสมัย ให้ใช้ <del> แทน
กำหนดข้อความขีดฆ่า   10    
<samp> กำหนดข้อความเป็นตัวอย่าง computer code (แสดงผลด้วยความกว้างอักษรคงตัว)   10    
<script> คำสั่ง script
- type="text/javascript" | "text/vbscript"
- src="url ของ scrip"
- language="javascript" | "vbscript"
  4    
<select> ลิสต์
- name="ชื่อลิสต์"
- size = จำนวนตัวเลือกที่ให้มองเห็น
- multiple = ให้ผู้ใช้งานเลือกหลายตัวเลือกได้ โดยกดปุ่ม Ctrl
- disabled lock ไม่ให้ฟิลด์ป้อนข้อมูลใช้งานได้
- readonly ให้ฟิลด์ป้อนข้อมูลอ่านได้อย่างเดียว กรอกข้อมูลไม่ได้
  15 19  
<small> กำหนดข้อความให้มีขนาดเล็กลง   10    
<spacer> กำหนดระยะช่องว่าง
- type="horizontal" | "vertival" | "block"
- align="left" | "right"
- size="number" ขนาดช่องว่าง
- width (type"block")
- height (type"block")
       
<span>  จัดแต่ง ข้อความสั้นๆ (inline)   8    
<strike>
*tag ล้าสมัย ให้ใช้ <del> แทน
กำหนดข้อความขีดฆ่า   10    
<strong> เน้นหนักข้อความ (ตัวหนา)    10    
<style> คําสั่งสําหรับสร้าง style sheet ที่ใช้ในเอกสาร
- type = "MIME Type"
- media = "Media Type"
  4    
<sub>  กำหนดข้อความตัวห้อย   10    
<sup> กำหนดข้อความตัวยก   10    
<table>  ตาราง
- align="left" | "center" | "right"   จัดตำแหน่งของตาราง
- border="number"   กำหนดความหนาของเส้นขอบตาราง
- bordercolor="สี"   สีของเส้นขอบ
- width="number"   กำหนดความกว้างให้ตาราง
- bgcolor="สี"   กำหนดสี background
- cellspacing="number"   กำหนดช่องว่างภายใน cell
- cellpadding="number"   กำหนดระยะห่างระหว่าง cell
  12 14  
<tbody> กำหนดส่วน body ของตาราง   12    
<td> สำหรับข้อมูลในแต่ละ cell ของตาราง
- align="left" | "center" | "right" จัดตำแหน่งของข้อความใน cell แนวนอน
- valign= "top" | "middle" | "bottom" | "baseline"  จัดตำแหน่งของข้อความใน cell แนวตั้ง
- width="ความกว้างของคอลัมน์"
- height="ความสูงของแถว"
- colspan="number"   จำนวนคอลัมน์ที่จะให้รวมเป็นคอลัมน์เดียวกัน
- rowspan="number"   จำนวนแถวที่จะให้รวมแถวเป็นแถวเีดียวกัน
- bgcolor="สี"   กำหนดสี background ให้ cell
  12    
<textarea> ฟิลด์ป้อนข้อมูลแบบหลายบรรทัด
- name="ชื่อ textarea"
- cols="number" ความกว้าง
- rows="number" จำนวนแถว
- wrap="off" | "physical" | "virtual" การกำหนดการตัดคำหรือขึ้นบรรทัดใหม่ให้ข้อความที่ยาวต่อเนื่องกันมากๆ
- disabled lock ไม่ให้ฟิลด์ป้อนข้อมูลใช้งานได้
- readonly ให้ฟิลด์ป้อนข้อมูลอ่านได้อย่างเดียว กรอกข้อมูลไม่ได้
  15 19  
<tfoot> กำหนดส่วน footer ของตาราง
- align="left" | "center" | "right"
- valign="top" | "middle" | "bottom"
  12    
<th> กำหนดข้อความที่เป็นหัวคอลัมน์ จะเป็นตัวหนา
- align="left" | "center" | "right" จัดตำแหน่งของข้อความใน cell แนวนอน
- valign= "top" | "middle" | "bottom" | "baseline"  จัดตำแหน่งของข้อความใน cell แนวตั้ง
- width="ความกว้างของคอลัมน์"
- height="ความสูงของแถว"
- colspan="number"   จำนวนคอลัมน์ที่จะให้รวมเป็นคอลัมน์เดียวกัน
- rowspan="number"   จำนวนแถวที่จะให้รวมแถวเป็นแถวเีดียวกัน
- bgcolor="สี"   กำหนดสี background ให้ cell
  12    
<thead> กำหนดส่วน head ของตาราง
- align = "left" | "center" | "right"
- valign = "top" | "middle" | "bottom"
  12    
<title> กำหนดชื่อเว็บเพจ เป็นข้อความที่จะแสดงอยู่ที่ title bar   3    
<tr> กำหนดแถวของตาราง
- align="left" | "center" | "right" จัดตำแหน่งของข้อความใน cell แนวนอนทั้งแถว
- valign= "top" | "middle" | "bottom" | "baseline"  จัดตำแหน่งของข้อความใน cell แนวตั้งทั้งแถว
- bgcolor ="สี" กำหนดสี background ให้ทั้งแถว
  12    
<tt> กำหนดข้อความแบบ teletype text ให้มีความกว้างคงตัว   10    
<u>
*tag ล้าสมัย ให้ใช้ style sheet แทน
กำหนดข้อความขีดเส้นใต้ text-decoration:none | underline | overline | line-through | blink

span {text-decoration:underline }
10 9  
<ul> แสดงผลลิสต์รายการแบบไม่มีลำดับ (unordered list)
- type = " disc | circle | square"
list-style-type:none | disc | circle | square | decimal |
decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha

<ul style="list-style-type:square">
11 13  
<var> กำหนดข้อความเป็นตัวแปร variable   10    
<wbr> กำหนดให้ตัดบรรทัดใหม่ ใช้คู่กับ <nobr> ที่กำหนดให้ข้อความไม่มีการตัดบรรทัด        
<xmp>
*tag ล้าสมัย ให้ใช้ <pre> แทน
กำหนดข้อความที่จัดรูปไว้ก่อน   10