Test Code

ลำดับตอนที่ #2 : ลำดับตอนที่ 2

สำหรับ html นิจะไม่ได้สอนทุกส่วนนะคะ แต่นิจะสอนแค่ส่วนที่สำคัญเท่านั้น (เพราะนิขี้เกียจ ฮาๆๆ)
ถ้าใครยังไม่ได้อ่านตอนที่ 18 ควรจะเข้าไปอ่านตอนนั้นก่อนจะมาอ่านตอนนี้นะคะ
เพราะถ้าไม่อ่านก็อาจจะงงได้ค่ะ
สำหรับความหมายของ นิขอข้ามนะคะ เพราะมันอาจจะทำให้สับสนได้ค่ะ

มาพูดถึงโครงสร้างของ HTML กันเลยดีกว่า
HTML จะประกอบด้วย Tag ต่างๆ ชึ่ง Tag พวกนี้จะควบคุมการแสดงผลของส่วนของเนื้อหา
(หวังว่าคงจะจำบทเรียนเกี่ยวกับ selector ที่นิได้สอนไปแล้วได้นะคะ
ในตอนนั้นจะมี selector ที่เป็น tag html ด้วย ชึ่งมันก็คือตัวนี้นั้นแหละ)
หรือบางที tag ตัวนั้นอาจจะมี Attribute เพิ่มเข้ามาเพื่อกำหนดรูปแบบเพิ่มเติมเข้าไปด้วย
ชึ่ง attribute ตัวนั้นอาจจะเป็นตัวกำหนด style, id, class หรือ title ก็ได้

ในตอนนี้ นิจะอธิบายแค่ tag ที่คนส่วนมากเค้าชอบใช้กันก่อนนะคะ 
ชึ่งเราสามารถเอาแท็กพวกนี้ไปใส่ในส่วนเนื้อหาของไอดีหรือบทความก็ได้
(มันก็คือ element ตัวใหม่ที่เราเพิ่มเข้าไปใหม่ เข้าไปอ่านในตอนที่แล้วก็จะรู้ว่ามันคือส่วนไหน)

+ ส่วนประกอบของ HTML
รูปแบบทั่วไปของ HTML จะเป็นแบบนี้

Tag เริ่ม (อาจจะมี attribute เพิ่มเข้าไปด้วย) + content + Tag ปิด

- Tag คือคําสั่งที่ใช้ในภาษา HTML อยู่ในเครื่องหมาย < และ >
ชึ่งแท็กนี้จะใช้สําหรับจัดรูปแบบข้อความ,ภาพ,เนื้อหาหรือวัตถุอื่นๆ.
 tag ในภาษา HTML ส่วนมาก จะมี tag เปิด และ tag ปิด เช่น
<h1>.......</h1>, <div>.....</div>
ชึ่ง <h1> และ <div> เป็นแท็กเปิด
ส่วน </h1> และ </div> เป็นแท็กปิด

- Attribute คือส่วนขยายของ tag ใช้สําหรับจัดรูปแบบเพิ่มเติม เช่น การจัดวาง,สไตล์,class,id..
ค่าของ attribute จะอยู่ในเครื่องหมาย "..." เช่น
<p align="center">เนื้อหา</p>  (เนื้อหาจะอยู่ตรงกลาง)
<div class="mr">.....</div>   (คลาส mr จะเป็นส่วนขยายของ div)

Start tag *	Element content	End tag *
<p>	This is a paragraph	</p>
<a href="default.htm" >	This is a link	</a>
<br />

มาดุแท็กที่ใช้กันบ่อยๆเลยนะคะ (ดูตามตารางนะคะ ขี้เกียจ ฮาๆๆ)

Element	Description & Attribute	Style Sheet	Chapter
			HTML	CSS	XHTML
<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
<blockquote>	กำหนดข้อความหรือเนื้อหาที่หยิบยกมาจากแหล่งอื่น		10
<br>	ขึ้นบรรทัดใหม่ - clear="left" | "right" | "all" | "none"	clear:left | right | both | none	8
<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
<h1> ถึง <h6>	กำหนดหัวเรื่อง align = "left | center | right | justify"		7
<hr>	เส้นคั่น - width="number | %" ความยาวของเส้นคั่น - size="number" ความหนาของเส้นคั่น มีค่าเป็น 1 ถึง 7 และ -1 ถึง -7 - align="left | center | right" ตำแหน่งที่จัดวาง - color="สี" สีของเส้นคั่น - noshade กำหนดให้เป็นเส้นทึบ		7
<img>	แสดงรูปภาพ - src="ไฟล์รูปภาพ" - alt="คำอธิบายรูปภาพ" - width="number" ความกว้างของรูป - height="number" ความสูงของรูป - align = "top" | "middle" | "bottom" จัดวางตำแหน่งรูปภาพกับข้อความ - border="number" ขนาดกรอบของรูป - vspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวตั้ง - hspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวนอน		14	18
<li>	ใช้แสดงข้อมูล 1 แถวรายการ (list item) - type="disc" | "circle" | "square"		11	13
<p>	แสดงข้อความในลักษณะพารากราฟ (paragraph) - align="left" | "center" | "right" | "justify"		8
<script>	คำสั่ง script - type="text/javascript" | "text/vbscript" - src="url ของ scrip" - language="javascript" | "vbscript"		4
<span>	จัดแต่ง ข้อความสั้นๆ (inline)		8
<style>	คําสั่งสําหรับสร้าง style sheet ที่ใช้ในเอกสาร - type = "MIME Type" - media = "Media Type"		4
<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
<tr>	กำหนดแถวของตาราง - align="left" | "center" | "right" จัดตำแหน่งของข้อความใน cell แนวนอนทั้งแถว - valign= "top" | "middle" | "bottom" | "baseline"  จัดตำแหน่งของข้อความใน cell แนวตั้งทั้งแถว - bgcolor ="สี" กำหนดสี background ให้ทั้งแถว		12
<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

}{Bonheur