ความร้เู บ้อื งต้นเกย่ี วกบั ภาษา HTML1. โครงสร้างภาษา HTML HTML ย่อมาจากคาว่า HyperText Markup Language เป็นภาษาท่ีใช้สาหรับสรา้ งเว็บเพจ โดยคาสั่งในภาษา HTML จะทาหน้าท่ีควบคุมการแสดงผลของข้อมูลในเว็บเพจ ซึ่งเราสามารถ ควบคุมไดท้ ้ังสีสัน รูปภาพ ตลอดจนตาแหน่งของส่ิงต่างๆ ที่อยู่บนเวบ็ เพจ คาสั่งที่ใช้ควบคุมการแสดงผลใน HTML นั้นถูกเรียกว่าแท็ก (Tag) ซ่ึงมีอยู่มากมายหลายสิบชนิด แต่ละแท็กก็มีหน้าท่ีแตกต่างกันออกไป เช่น บางแท็กใช้สาหรับกาหนดให้แสดงรูปภาพ บางแท็กใชส้ าหรบั กาหนดสีฟอนตห์ รือขนาดใหก้ ับตวั อกั ษร การเขียนภาษา HTML นั้นมีส่วนประกอบหลักอยู่ 2 ส่วน คือ ส่วนท่ีเป็นเนือ้ หา และสว่ นทเี่ ป็นคาสง่ั Tag แบ่งออกเป็น 2 ประเภทคอื 1. แท็กเดีย่ ว คือ คาสั่งท่ีมคี าสง่ั เพียงอย่างเดยี ว ซ่ึงสามารถใช้และสน้ิ สดุ คาส่ังได้ดว้ ยตัวของมนั เอง เชน่ ขอ้ ความ... <br> <hr> <! – ขอ้ ความ -> 2. แท็กคู่ คือ คาส่ังท่ีต้องมีสว่ นเร่ิมต้นและส่วนจุดจบของคาสั่งนั้นๆ โดยแท็กท่ีเป็นสว่ นจบน้ันจะมีเคร่ืองหมาย (/) ติดเอาไว้ เชน่ <html> ส่วนของเนือ้ หา ... </html> <center> ข้อความ... </center> <p> ข้อความ... </p> ถา้ หากมีการใช้แท็กคู่หลายๆ คาสง่ั เช่น คาสั่งตัวขีดเส้นใต้ <U> …</U> และตามด้วย คาส่ังตัวเอียง <I>…</I> จะต้องปิดคาสั่งตัวเอียงก่อน แล้วจึงจะมาปดิ คาส่งั ตวั หนา <I> <U> ขอ้ ความ... </U> </I> โครงสร้างหลัก <HTML> <HEAD> <TITLE> สว่ นหัวของเอกสาร </TITLE> </HEAD>
ภาษา HTML - 2 <BODY> ส่วนของเนือ้ หาในเอกสาร </BODY> </HTML> คาสั่งหลัก <HTML>…</HTML> เป็นคาส่ังที่ไว้กาหนดจุดเร่ิมต้นและจุดจบของเอกสาร คาสั่งหลัก <HEAD>…</HEAD> เป็นคาส่ังท่ีทาหน้าท่ีกาหนดส่วนหัวเร่ือง โดยภายใน คาสั่งนจี้ ะประกอบไปด้วย คาส่ังหลัก <TITLE>…</TITLE> เป็นคาสั่งท่ีใช้กาหนดข้อความท่ีต้องการให้ขึน้ อยใู่ นส่วนของ Title Bar โดยสามารถพิมพ์ได้ยาว 64 ตัวอกั ษร คาส่ังหลัก <BODY>…</BODY> เป็นคาสั่งที่ใช้ในการกาหนดรูปแบบของเอกสาร ทง้ั หมดวา่ จะใหม้ ีลกั ษณะอย่างไร2. การกาหนดตัวอักษร 2.1 การกาหนดรปู แบบตวั อักษร ในข้อความท่อี ยภู่ ายใน เชน่ ฟอนต์ สี และขนาดตัวอกั ษร รปู แบบ <font face = “text”> … </font> กาหนดแบบอกั ษร <font size = “number”> … </font> กาหนดขนาดตัวอักษร <font color = “color”> … </font> กาหนดสตี ัวอกั ษรตวั อยา่ ง <html> <head> <title> Font Web page </title> </head> <body> <font size=\"3\"> INFORMATION TECNOLOGY </font> <br> <font color=\"blue\"> information technology</font> <br> <font face=\"JasmineUPC\"> information technology</font> <br> <font size=\"5\" color=\"#0000ff\"> information technology</font> <br> <font face=\"AngsanaUPC\" color=\"green\"> information technology</font><br> </body> </html>
ภาษา HTML - 3 2.2 การกาหนดข้อความแบบตวั หนา ใช้กาหนดข้อความทีอ่ ยภู่ ายในคาสั่งให้แสดงผลด้วยตัวอกั ษรตวั หนา รปู แบบ <b>…</b>ตัวอยา่ ง <html> <head> <title>Bold Tag</title> </head> <body> <font size=\"4\"> Normal Text <br> <b> Bold Text</b> </font> </body> </html> 2.3 การกาหนดขอ้ ความแบบตัวเอยี ง รูปแบบ <I>…</I> 2.4 การกาหนดขอ้ ความขีดเส้นใต้ รปู แบบ <U>…</U> 2.5 การกาหนดขอ้ ความตัวขดี เส้นทบั รูปแบบ <S>…</S> หรือ <STRIKE>…</STRIKE>3. การจดั รปู แบบเอกสาร 3.1 การกาหนดหัวข้อ ใช้ในการกาหนดขนาดใหก้ บั ข้อความทเี่ ป็นหัวเรือ่ งในเอกสารทมี่ ีหวั ขอ้ เป็นปลีกย่อย สามารถแยกเป็นลาดบั ของหวั เรอื่ งได้อยา่ งชัดเจน รปู แบบ <hx>…</hx>ตวั อยา่ ง <html> <head> <title> Education Technology </title> </head>
ภาษา HTML - 4 <body> <h1>Test Heading if x=1</h1> <h2>Test Heading if x=2 </h2> </body> </html> 3.2 การกาหนดจดุ สนิ้ สดุ บรรทดั ใชใ้ นการกาหนดจุดส้ินสดุ บรรทดั และขึน้บรรทัดใหม่ คาสั่งน้ีเหมอื นการกด Enter บนคยี ์บอร์ด รูปแบบ ...<br>ตวั อย่าง <html> <head> <title> Break Rule Tag </title> </head> <body> คณุ เปน็ คนน่ารัก คณุ เป็นคนน่ารกั เชือ่ หรอื ไม่ <br> แนน่ อนทสี่ ดุ <br> </body> </html> 3.3 การขนึ้ ยอ่ หน้าใหม่ ใช้แสดงข้อความในลกั ษณะพารากราฟ หรือยอ่ หน้าในเวบ็ เพจ และยังสามารถใช้ในการขนึ้ บรรทัดใหมค่ รั้งละ 2 บรรทดั รปู แบบ <p>…</p> <p align = “left/center/right”>…</p>ตวั อย่าง <html> <head> <title> Paragraph Tag </title> </head> <body> <p> ประโยคที่ 1 Test Normal
ภาษา HTML - 5 <p align=\"right\"> ประโยคท่ี 2 Paragraph Test Right <p align=\"center\"> ประโยคท่ี 3 Paragraph Test Center <p align=\"left\"> ประโยคที่ 4 Paragraph Test Left </body> </html> 3.4 แสดงข้อความแบบจัดกงึ่ กลาง ใชแ้ สดงข้อความหรือรูปภาพ ใชจ้ ดั กงึ่ กลางเวบ็ เพจ รปู แบบ <center>…</center>ตวั อย่าง <html> <head> <title> Paragraph Tag </title> </head> <body> Test Normal Message <center> Test Center Message </center> </body> </html> 3.5 การแสดงเส้นค่นั ทางแนวนอน ใช้แสดงเสน้ ค่ันแนวนอน โดยใชใ้ นการแบ่งเนอื้ หาหรอื คนั่ เพอ่ื ความสวยงามและความเปน็ ระเบียบของเนื้อหา รูปแบบ <hr> <hr align = “left/center/right”> กาหนดตาแหน่งเส้น <hr width = “pixels or %”> กาหนดความยาวเส้น <hr size = “pixels”> กาหนดขนาดเส้น <hr noshade> กาหนดลักษณะเส้นตัวอยา่ ง <html> <head> <title> Horizontal Rule Tag </title> </head> <body> <hr>
ภาษา HTML - 6 <hr width=\"100%\"> <hr width=\"300\"> Rajabhat Thepsatri<hr size=\"3\" color =\"blue\"> <hr align=\"right\" color = \"red\"> <hr align=\"center\" width=\"75% size=\"3\"> <hr noshade> </body> </html>4. การกาหนดหัวขอ้ เร่ือง 4.1 การแสดงรายการแบบไม่มีเลขลาดบั ใชแ้ สดงรายการขอ้ มลู แบบแจกแจงเปน็ขอ้ ๆ โดยไมม่ เี ลขลาดับ จะมีสัญลักษณ์นาหน้าขอ้ มูลแต่ละหวั ขอ้ แทน โดยใช้คาสง่ั <LI>ในการสร้างหัวข้อแตล่ ะหลายรายการ รปู แบบ <UL> ข้อความสว่ นหัว <LI> ข้อความยอ่ ย <LI> ขอ้ ความยอ่ ย </UL>ตัวอยา่ ง <html> <head> <title>Unnorder List Tag</title> </head> <body> Microsoft Office Program <ul> <li> Microsoft Word <li> Microsoft Excel <li> Microsoft Power Point </ul> </body> </html>
ภาษา HTML - 7 4.2 การแสดงรายการแบบเมนูลิสต์ ใช้แสดงรายการข้อมูลแบบแจกแจงเป็นข้อๆ ทีไ่ ม่ซับซ้อน มีลักษณะคลา้ ยกับคาส่ัง <UL> รปู แบบ <MENU> ขอ้ ความสว่ นหัว <LI> ขอ้ ความย่อย </MENU> 4.3 การแสดงรายการแบบใช้ตัวเลข เป็นการแสดงรายการแบบแจกแจงเป็นข้อๆ โดยใช้หมายเลขกากับในการเรียงลาดับ โดยสร้างรายการจากคาสั่ง <LI> และยังสามารถกาหนดรูปแบบของหมายเลขกากับได้ด้วยให้เป็นเลขอารบิก, เลขโรมัน หรือตัวอกั ษร รูปแบบ <OL TYPE = “1 / a / A / i / I” start = “number”>ขอ้ ความสว่ นหวั <LI> ข้อความยอ่ ย </OL>ตัวอย่าง <html> <head> <title>Order List Tag</title> </head> <body> <h1>Order List</h1> <ol> <li>Item One<li>Item Two<li>Item Three </ol> <ol type=\"A\" start=\"5\"> <li>Item Four<li>Item Five <ol type=\"i\"> <li>Item Six<li>Item Seven </ol></ol> </body> </html>
ภาษา HTML - 8 4.4 การใส่เคร่ืองหมายหน้าหัวขอ้ เป็นการแสดงรายการโดยใช้เครื่องหมายในแตล่ ะ รายการยอ่ ย รูปแบบ <UL type = “option”> <LI> ข้อความย่อย </UL>ตัวอยา่ ง <html> <head> <title> การทาเคร่อื งหมายหนา้ หวั ขอ้ </title> </head> <BODY bgcolor=white> <font face=\"ms sans serif\" size=3> สาขาท่เี ปิดสอน 3 สาขาดงั น้ี <BR> แบบ Disc <br> <UL Type=\"Disc\"> <Li> คอมพิวเตอรธ์ รุ กจิ <Li> บัญชี </UL> แบบ Square <br> <UL Type=\"square\"> <Li> คอมพวิ เตอรธ์ รุ กจิ <Li> บัญชี </UL> แบบ Circle<br> <UL Type=\"Circle\"> <Li> คอมพิวเตอรธ์ ุรกจิ <Li> บญั ชี </font> </body> </html>
ภาษา HTML - 9 4.5 การแสดงรายการโดยกาหนดหัวข้อ ใช้แสดงรายการแบบให้คานิยามโดยแบ่ง องค์ประกอบเป็น 2 ส่วน ส่วนท่ีอยู่บนคือหัวข้อ โดยใช้คาส่ัง<DT> สว่ นที่อยูด่ ้านล่างคอื คาอธิบายใช้คาสัง่ <DD> โดยหากจะให้ ส่วนหวั ข้ออยู่ทางซ้ายแลว้ คาอธบิ ายอยทู่ างขวาก็ใหใ้ ช้ attribute COMPACT ในกรณีท่รี ายการเป็นขอ้ ความส้ันๆ รูปแบบ <DL> ข้อความส่วนหัว <DT> หวั ข้อ <DD> คาอธบิ าย </DL>ตัวอยา่ ง <html> <head> <title>Definition Tag</title> </head> <body> <h1> Domain Name</h1> <dl> <dt>com<dd>องคก์ ารเอกชน <dt>edu<dd>สถาบันการศกึ ษา </dl> <p> <dl compact> <dt>org<dd>องคก์ รไม่แสวงผลกาไร <dt>gov<dd>องคก์ ารของรฐั </dl> </body> </html>5. การใสร่ ูปภาพ 5.1 การใส่รูปภาพในเอกสาร เชน่ GIF, JPEG เปน็ ต้น รูปแบบ <IMG SRC = “url”>
ภาษา HTML - 10 <IMG align = “top / middle / bottom / left / right”> การกาหนดตาแหน่งให้กับรูปภาพ <IMG width = “pixels”> การกาหนดความกวา้ งรปู ภาพ <IMG height = “pixels”> การกาหนดความสูงของรูปภาพ <IMG border = “number”> การกาหนดช่องว่างแนวนอนระหว่างรูปภาพกับขอ้ ความ <IMG vspace = “number”> การกาหนดช่องว่างแนวต้ังระหว่างรูปภาพกับขอ้ ความตวั อย่าง <html> <head> <title> Image Tags</title> </head> <body> <img src=\"love.jpg\" width=\"100\" height=\"80\"> <p><p> <img src=\"love.jpg\" align=\"top\" hspace=\"2\">TEST IMAGE TAG </body> </html> 5.2 การทาพน้ื ฉากหลัง เปน็ การนารปู ภาพมาทาเป็น background รูปแบบ <BODY BACKGROUND = “ชื่อไฟลร์ ูปภาพ”> <BODY BGCOLOR = “ชือ่ สี / รหัสส”ี > กาหนดสีพื้นหลังของเว็บ6. การสรา้ งตาราง 6.1 การสรา้ งตาราง ใช้ในการสร้างตารางข้อมลู โดยจะมคี าส่งั ท่ีใชร้ ่วมกันคือ คาส่ัง<TR> ในการสร้างแถวเซลล์ข้อมูล, คาสั่ง <TD> ในการสร้างเซลล์ข้อมูล, คาสั่ง <TH> ในการสรา้ งหวั ตาราง รูปแบบ <TABLE>…</TABLE> <table bgcolor = “color”> … </table> กาหนดสีพ้ืนในตาราง <table border = “pixels”> … </table> กาหนดขนาดของขอบตาราง
ภาษา HTML - 11 <table width = “pixels / %>” … </table> กาหนดความกว้างของตารางตวั อย่าง <html> <head> <title> Table Tags </title> </head> <body> <table> <tr> <th>หวั ขอ้ ที่ 1</th> <th>หวั ขอ้ ท่ี 2 </th> <th>หัวขอ้ ที่ 3 </th> </tr> <tr> <td>ขอ้ มูล</td> <td>ข้อมูล</td> <td>ขอ้ มลู </td> </tr> <tr> <td>ข้อมลู </td> <td>ขอ้ มูล</td> <td>ขอ้ มูล</td> </tr> </table> </body> </html> 6.2 กาหนดข้อความกากับตาราง ใช้แสดงคาอธิบายหรอื ข้อความประกอบตารางไว้บนสว่ นบนหรือส่วนล่างของตารางข้อมูล รูปแบบ <caption align = “top / bottom / left / right”> กาหนดตาแหน่งของคาอธิบายตาราง
ภาษา HTML - 12ตัวอย่าง <html> <head> <title> Table Tags </title> </head> <body> <table border> <caption align=\"top\">ตารางรายรบั รายจ่ายประจาเดือน</caption> <tr> <th>เดือน</th> <th>มกราคม</th> <th>กมุ ภาพันธ์</th> <th>มนี าคม</th> </tr> <tr> <td>รายรับ</td> <td>25000</td> <td>23000</td> <td>24500</td> </tr> <tr> <td>รายจา่ ย</td> <td>21000</td> <td>22500</td> <td>23100</td> </tr> </table> </body> </html> 6.3 การสร้างแถวของตาราง เป็นการสร้างแถวเซลล์ข้อมูล เพื่อไว้สร้างเซลล์ขอ้ มูลและการสรา้ งหัวเรือ่ งของตาราง รปู แบบ
ภาษา HTML - 13 <tr align = “left / center / right”> … </tr> กาหนดตาแหน่งของขอ้ ความ <tr bgcolor = “color”> … </tr> กาหนดสีพื้นหลงั ในตารางตวั อยา่ ง <html> <head> <title> Table Tags </title> </head> <body> <table border> <tr align=\"center\" bgcolor=\"lightblue\"> <th>สินคา้ </th> <th>โทรทัศน์</th> <th>วทิ ยุ</th> <th>ตู้เย็น</th> </tr> <tr align=\"right\" bgcolor=\"orange\"> <td>ราคา</td> <td>7000</td> <td>1750</td> <td>9500</td> </tr> </table> </body> </html> 6.4 การสรา้ งหัวเรอ่ื งของตาราง เป็นการสรา้ งเซลล์ หัวตาราง ซึง่ ทาหน้าที่กากับเซลล์ขอ้ มลู ในแนวคอลมั น์ท่กี าหนด รูปแบบ <th align = “left / right / center / justify / char”> …</th> กาหนดตาแหนง่ ของ ข้อความในตารางตามแนวนอน <th valign = “top / middle / bottom / baseline”> … </th>กาหนดตาแหน่งของขอ้ ความในตารางตามแนวตั้ง
ภาษา HTML - 14 <th bgcolor = “color”> … </th> กาหนดสพี นื้ ของตาราง <th height = “pixels / %”> … </th> กาหนดความสูงของตาราง <th width = “pixels / %”> … </th> กาหนดความกวา้ งของตาราง <th rowspan = “number”> … </th> กาหนดการรวมชอ่ งเซลล์ในแนวตั้ง <th colspan = “number”> … </th> กาหนดการรวมช่องเซลลใ์ นแนวนอน 6.5 การสร้างเซลล์ข้อมลู ใช้สร้างเซลลข์ อ้ มูลเพ่ือใชใ้ นการแสดงขอ้ มูลรายละเอยี ดตา่ งๆ ของเอกสาร รปู แบบ <td align = “left / right / center / justify / char”> …</td> กาหนดตาแหน่งของ ขอ้ ความในตารางตามแนวนอน <td valign = “top / middle / bottom / baseline”> … </td>กาหนดตาแหน่งของข้อความในตารางตามแนวต้งั <td bgcolor = “color”> … </td> กาหนดสพี ื้นของตาราง <td height = “pixels / %”> … </td> กาหนดความสูงของตาราง <td width = “pixels / %”> … </td> กาหนดความกว้างของตาราง <td rowspan = “number”> … </td> กาหนดการรวมชอ่ งเซลลใ์ นแนวตัง้ <td colspan = “number”> … </td> กาหนดการรวมช่องเซลลใ์ นแนวนอนตวั อย่าง <html> <head> <title> Table Tags </title> </head> <body> <table border> <tr> <th colspan=\"2\" bgcolor=\"#ffffe0\">CPU</th> <th colspan=\"2\">RAM</th> </tr> <tr> <td rowspan=\"2\">Mhz</td> <td>450</td> <td>500</td>
ภาษา HTML - 15 <td>550</td> </tr> <tr> <td>600</td> <td>700</td> <td>750</td> </tr> </table> </body> </html>7. การเช่อื มโยงเวบ็ เพจ 7.1 การสร้างจุดเชือ่ มโยง ทาหนา้ ทก่ี าหนดข้อความหรือรปู ภาพที่อยูภ่ ายในให้ทาหน้าที่เปน็ จดุ เชือ่ มโยงไปยงั เว็บเพจอ่นื ๆ หรอื ขอ้ มลู ชนิดต่างๆ รูปแบบ <a href = “ช่อื รปู ภาพหรอื ขอ้ ความ”>…</a>ตัวอยา่ ง <html> <head> <title> Image Tags</title> </head> <body> <a href=\"test.html\">Click Here</a><br> <br> <a href=\"love.jpg\"><img src=\"love.jpg\"></a> </body> </html> 7.2 การกาหนดสีให้จุดเชอื่ มโยง เป็นการกาหนดสอี ักษรทจี่ ุดเชอื่ มโยง โดย 7.2.1 link คอื สจี ดุ เช่ือมโยงทยี่ งั ไมไ่ ดท้ าการคลิก 7.2.2 vlink คอื สีจุดเชื่อมโยงท่ไี ปยงั เป้าหมายแล้ว 7.2.3 alink คอื สจี ดุ เชอ่ื มโยงทไี่ ปอยู่ขณะนน้ั นอกจากนย้ี ังมี text คือสีตวั หนังสือธรรมดา และ bgcolor คือสพี ื้นหลงั ของเอกสาร
ภาษา HTML - 16 รปู แบบ <BODY TAG = “color”>ตัวอย่าง <html> <head> <title> Image Tags</title> </head> <body bgcolor=\"black\" text=\"write\" link=\"yellow\" vlink=\"lime\" alink=\"aqua\"> <a href=\"page06c.html\">Click Here</a><br><br> <a href=\"page06d.html\">Click Here</a> </body> </html>
Search
Read the Text Version
- 1 - 16
Pages:
