วิชาการโปรแกรมดว้ ยภาษา HTML 3901 - 1002 ครูนรศิ รา ทองยศ วิทยาลยั อาชวี ศกึ ษาธนบุรี
ภาษา HTML - 2ความรเู้ บอื้ งต้นเก่ยี วกับภาษา 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 - 3 <HTML> <HEAD> <TITLE> ส่วนหวั ของเอกสาร </TITLE> </HEAD> <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>
ภาษา HTML - 4 <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\"> informationtechnology</font> <br> <font face=\"AngsanaUPC\" color=\"green\"> informationtechnology</font> <br> </body> </html> 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>
ภาษา HTML - 5 2.4 การกาหนดข้อความขดี เสน้ ใต้ รูปแบบ <U>…</U> 2.5 การกาหนดข้อความตัวขีดเส้นทบั รปู แบบ <S>…</S> หรือ <STRIKE>…</STRIKE>3. การจดั รูปแบบเอกสาร 3.1 การกาหนดหัวขอ้ ใช้ในการกาหนดขนาดใหก้ ับขอ้ ความที่เป็นหัวเรอ่ื งในเอกสารที่มหี ัวข้อเปน็ ปลีกย่อย สามารถแยกเป็นลาดับของหัวเรอ่ื งไดอ้ ย่างชัดเจน รปู แบบ <hx>…</hx>ตัวอยา่ ง <html> <head> <title> Education Technology </title> </head> <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>
ภาษา HTML - 6 คุณเป็นคนน่ารกั คุณเป็นคนนา่ รัก เชื่อหรอื ไม่ <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 <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>
ภาษา HTML - 7<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><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>
ภาษา HTML - 8</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> 4.2 การแสดงรายการแบบเมนูลิสต์ ใช้แสดงรายการข้อมูลแบบแจกแจงเป็นข้อๆ ทีไ่ ม่ซับซอ้ น มลี ักษณะคลา้ ยกบั คาสัง่ <UL> รูปแบบ
ภาษา HTML - 9 <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 - 10 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> คอมพวิ เตอร์ธุรกจิ
ภาษา HTML - 11 <Li> บญั ชี </font> </body> </html> 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>
ภาษา HTML - 12</body></html>5. การใสร่ ูปภาพ 5.1 การใสร่ ูปภาพในเอกสาร เชน่ GIF, JPEG เป็นตน้ รูปแบบ <IMG SRC = “url”> <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 = “ช่ือไฟล์รปู ภาพ”>
ภาษา HTML - 13 <BODY BGCOLOR = “ชื่อสี / รหัสสี”> กาหนดสีพื้นหลังของเว็บ6. การสรา้ งตาราง 6.1 การสร้างตาราง ใช้ในการสร้างตารางข้อมูล โดยจะมีคาสั่งท่ีใช้ร่วมกันคือ คาสั่ง <TR> ในการสร้างแถวเซลล์ข้อมูล, คาส่ัง <TD> ในการสรา้ งเซลลข์ อ้ มลู , คาสั่ง <TH> ในการสร้างหวั ตาราง รปู แบบ <TABLE>…</TABLE> <table bgcolor = “color”> … </table> กาหนดสพี ้ืนในตาราง <table border = “pixels”> … </table> กาหนดขนาดของขอบตาราง <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>
ภาษา HTML - 14 <td>ข้อมลู </td> </tr> <tr> <td>ข้อมูล</td> <td>ข้อมลู </td> <td>ข้อมูล</td> </tr> </table> </body> </html> 6.2 กาหนดข้อความกากับตาราง ใช้แสดงคาอธิบายหรือข้อความประกอบตารางไวบ้ นส่วนบนหรือส่วนล่างของตารางข้อมลู รูปแบบ <caption align = “top / bottom / left / right”> ก า ห น ดตาแหนง่ ของคาอธิบายตารางตัวอย่าง <html> <head> <title> Table Tags </title> </head> <body> <table border> <caption align=\"top\">ตารางรายรบั รายจา่ ยประจาเดอื น</caption> <tr> <th>เดือน</th> <th>มกราคม</th> <th>กมุ ภาพนั ธ์</th> <th>มนี าคม</th> </tr>
ภาษา HTML - 15 <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 การสร้างแถวของตาราง เป็นการสรา้ งแถวเซลล์ขอ้ มลู เพอ่ื ไว้สรา้ งเซลล์ขอ้ มูลและการสร้างหัวเรอ่ื งของตาราง รปู แบบ <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\">
ภาษา HTML - 16 <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> กาหนดตาแหนง่ ของข้อความในตารางตามแนวตั้ง <th bgcolor = “color”> … </th> กาหนดสพี ืน้ ของตาราง <th height = “pixels / %”> … </th> ก าห น ด ค วาม สู งขอ งตาราง <th width = “pixels / %”> … </th> กาหนดความกว้างของตาราง <th rowspan = “number”> … </th> กาห นด การรวม ช่อ งเซลล์ในแนวตง้ั
ภาษา HTML - 17 <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>
ภาษา HTML - 18 <tr> <td rowspan=\"2\">Mhz</td> <td>450</td> <td>500</td> <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>
ภาษา HTML - 19 <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 คือสีพื้น หลงั ของเอกสาร รปู แบบ <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>
ภาษา HTML - 20
Search
Read the Text Version
- 1 - 20
Pages:
