Differences

This shows you the differences between the selected revision and the current version of the page.


html:start 2008/08/03 09:02 html:start 2010/05/21 10:44 current
Line 1: Line 1:
====== ภาษา HTML ====== ====== ภาษา HTML ======
-HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล ของเว็บได้ด้วย +HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้าง 
 +การเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมเบราว์เซอร์แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผลของเว็บได้ด้วย เริ่มแรก HTML ถูกกำหนดมาตรฐานขึ้นโดย IETF (Internet Engineering Task Force) ต่อมา HTML รุ่น 3.2 ได้ถูกส่งมอบให้กับ W3C (World Wide Web Consortium) ซึ่งเป็นการร่วมมือระหว่างสถาบัน MIT (Massachusetts Institute of Technology) ประเทศสหรัฐฯ, Institut National de Recherche en infomatique et en Automatique ประเทศฝรั่งเศล และมหาวิทยาลัย Keio ประเทศญี่ปุ่น
HTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language) โดยตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว ทำให้บริการ WWW เติบโตขยายตัวอย่างกว้างขวางตามไปด้วย HTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language) โดยตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว ทำให้บริการ WWW เติบโตขยายตัวอย่างกว้างขวางตามไปด้วย
-**Tag** +ถึงแม้ว่าจะมีองค์กรกลางขึ้นมาเพื่อกำหนดมาตรฐานนี้ แต่บริษัทผู้ผลิตเบราว์เซอร์ที่ได้รับความนิยมมาก เช่น Netscape เริ่มใส่คำสั่งพิเศษต่างๆ ให้กับเบราว์เซอร์ของตนเอง เช่นแท็ก <Blink>, <Multicol> เป็นต้น รวมทั้งค่าย Microsoft ก็ได้ทำการใส่คำสั่งพิเศษขึ้นมาเหมือนกัน ทำให้เกิดปัญหาการแสดงผลคำสั่ง HTML ผ่านเบราว์เซอร์แต่ละค่าย เนื่องจากคำสั่งไม่สนับสนุนกันและกัน ดังนั้นในการเขียน HTML ก็ควรจะใช้ tag มาตราฐาน จะดีที่สุด 
 + 
 +ไฟล์เอกสาร HTML เป็นไฟล์ข้อความรูปแบบหนึ่ง (Text File) ที่เก็บชุดคำสั่ง HTML การสร้างเอกสาร HTML จึงสามารถใช้ Text Editor ตัวใดก็ได้ เช่น NotePad หรือ WordPad ส่วนขยายของไฟล์ HTML มี 2 ระบบ คือ .htm และ .html การเลือกใช้ส่วนขยายใด จำเป็นต้องตรวจสอบค่ากำหนดจากเครื่องบริการเก็บ (Web Server) หรือผู้ให้บริการ (ISP) ก่อน มิฉะนั้นอาจจะทำให้เอกสารเว็บเมื่อโหลดเข้าสู่ระบบแล้ว จะไม่สามารถเรียกดูบนเบราว์เซอร์ได้ 
 + 
 +===== Tag =====
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
Line 12: Line 17:
  * **Tag เปิด/ปิด** เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>, <BLINK>…</BLINK> เป็นต้น   * **Tag เปิด/ปิด** เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>, <BLINK>…</BLINK> เป็นต้น
-**Attributes** +===== Attributes =====
Attributes เป็นส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป และมีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น Attributes เป็นส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป และมีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น
Line 18: Line 23:
เช่น Attributes ของ Tag เกี่ยวกับการจัดพารากราฟ คือ <P> ประกอบด้วย เช่น Attributes ของ Tag เกี่ยวกับการจัดพารากราฟ คือ <P> ประกอบด้วย
-ALIGN="Left/Right/Center/Justify"  +  ALIGN="Left/Right/Center/Justify" 
สามารถเขียนได้ดังนี้ สามารถเขียนได้ดังนี้
-<P ALIGN="Left">...</P>+  <P ALIGN="Left">...</P>
หรือ หรือ
-<P ALIGN="Right">...</P>+  <P ALIGN="Right">...</P>
หรือ หรือ
-<P ALIGN="Center">...</P+  <P ALIGN="Center">...</P>
- +
-===== กำหนดแบบอักษรให้กับเอกสารเว็บ ===== +
- +
-<font face="แบบอักษร">...</font> เช่น <font face="Tahoma">...</font> +
- +
-  * ฟอนต์มาตรฐานสำหรับเอกสารเว็บ ควรประกอบด้วย Tahoma, MS Sans Serif, Thonburi แต่การระบุด้วย CSS ให้ระบุเป็น Tahoma, "MS Sans Serif", Thonburi  +
- +
-===== กำหนดสีให้กับข้อความ ===== +
- +
-<font color="ชื่อสี หรือ [[web:color-code|รหัสสีฐาน 16]]">...</font> เช่น +
- +
-===== การกำหนดตัวอักษรให้มีความหนา ===== +
- +
-<B>...</B>  +
- +
-ใช้กำหนดข้อความที่อยู่ภายในคำสั่ง ให้แสดงผลด้วยตัวอักษรแบบตัวหนา (bold) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น +
- +
-===== การกำหนดตัวอักษรให้มีการเอน ===== +
- +
-<I>...</I>  +
-  +
-ใช้กำหนดข้อความที่อยู่ภายในคำสั่งให้แสดงผลด้วยตัวอักษรแบบเอน (Italic) +
- +
-===== การกำหนดขนาดของตัวอักษร =====  +
- +
-<FONT SIZE="ค่ากำหนดขนาดของตัวอักษร">...</FONT>  +
- +
-การกำหนดขนาดของตัวอักษรในเว็บเพจนั้น ขนาดของตัวอักษรกำหนดได้  1 - 7  +
- +
-====== การขึ้นบรรทัดใหม่ ====== +
- +
-โดยปกติแล้ว ภาษา HTML จะไม่สามารถรับรู้ได้ว่าจะมีการขึ้นบรรทัดใหม่ ดังนั้นการขึ้นบรรทัดใหม่บนเว็บเพจ ต้องใช้คำสั่ง <BR>  +
- +
-===== ตาราง ===== +
- +
-โครงสร้างตารางโดยทั่วไปจะประกอบไปด้วยแถวและคอลัมน์ โดยช่องข้อมูลที่อยู่ในแนวนอนเดียวกันก็คือแถว และช่องข้อมูลที่อยู่ตรงกันในแนวตั้งก็คือ คอลัมน์นั่นเอง +
- +
-  <TABLE> +
-    <CAPTION>.........</CAPTION> +
-        <TR> +
-              <TH>.........</TH> +
-              <TH>.........</TH> +
-        </TR> +
-        <TR> +
-                <TD>.........</TD> +
-                <TD>.........</TD> +
-        </TR> +
-        <TR> +
-                <TD>.........</TD> +
-                <TD>.........</TD> +
-        </TR> +
-  <TABLE> +
-  +
-โดย +
- +
-<TABLE> กำหนดการสร้างตาราง และมีคำสั่งปิดคือ </TABLE>  +
-<CAPTION> เป็นการกำหนดคำ หรือข้อความอธิบายตาราง และมีคำสั่งปิดคือ </CAPTION>  +
-<TR> (Table Row) เป็นการกำหนดแถวของตาราง และมีคำสั่งปิดคือ </TR>  +
-<TH> (Table Head) เป็นการกำหนดหัวเรื่องในคอลัมน์ และมีคำสั่งปิดคือ </TH>  +
-<TD> (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิดคือ </TD> +
-  
-  
 +----
 +**ผู้เขียน**
 +  * บุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี

Personal Tools
Creative Commons License
STKS Online Learning โดย http://stks.or.th/wiki อนุญาตให้ใช้ได้ตาม สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน 3.0 ประเทศไทย.