การสร้างเวบ็ เพจด้วยภาษา สาํ หรับนักเรียนระดบั ชัน้ มัธยมศกึ ษาตอนต้น
คาํ นํา หนงั สือ ภาษา HTML เลม่ นีจ้ ดั ทําขนึ ้ เพ่ือเป็นสือ่ การเรียนการสอนสาํ หรับนกั เรียน ระดบั ชนั้ มธั ยมศกึ ษาตอนต้น ใช้เป็นคมู่ ือสาํ หรับการสร้างเวบ็ ไซต์ด้วยภาษา เอชทีเอม็ แอล เบือ้ งต้น ข้าพเจ้าหวงั วา่ หนงั สอื เลม่ นีจ้ ะเป็นประโยชน์สําหรับผ้ทู ี่สนใจในการสร้างเวบ็ ไซต์ ด้วย ภาษาเอชทเี อม็ แอล ระดบั เบอื ้ งต้น นายยรุ นนั ท์ ศรีสรุ ะ
สารบัญ 1 2 1. โครงสร้างภาษา HTML 3 2. การกาํ หนดตวั อกั ษร 6 3. การจดั รูปแบบเอกสาร 9 4. การกาํ หนดหัวข้อเร่ือง 10 5. การใส่รูปภาพ 15 6. การสร้างตาราง 7. การเชื่อมโยงเวบ็ เพจ
ความรู้เบื้องต้นเกยี่ วกบั ภาษา HTML 1. โครงสร้างภาษา HTML HTML ยอ่ มาจากคาํ ว่า Hyper Text 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> <BODY> ส่วนของเน้ือหาในเอกสาร </BODY> </HTML> 1
คาํ สงั่ หลกั <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> 2.2 การกาํ หนดขอ้ ความแบบตวั หนา ใชก้ าํ หนดขอ้ ความท่ีอยภู่ ายในคาํ สง่ั ใหแ้ สดงผลดว้ ย ตวั อกั ษรตวั หนา รูปแบบ <b>…</b> 2
ตวั อยา่ ง <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> <body> <h1>Test Heading if x=1</h1> <h2>Test Heading if x=2 </h2> </body> </html> 3
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 <p align=\"right\"> ประโยคที่ 2 Paragraph Test Right <p align=\"center\"> ประโยคท่ี 3 Paragraph Test Center <p align=\"left\"> ประโยคท่ี 4 Paragraph Test Left </body> </html> 4
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> <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> 5
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> รูปแบบ <MENU> ขอ้ ความส่วนหวั <LI> ขอ้ ความยอ่ ย </MENU> 4.3 การแสดงรายการแบบใชต้ วั เลข เป็ นการแสดงรายการแบบแจกแจงเป็ นขอ้ ๆ โดยใช้ หมายเลขกาํ กบั ในการเรียงลาํ ดบั โดยสร้างรายการจากคาํ สั่ง <LI> และยงั สามารถกาํ หนดรูปแบบ ของหมายเลขกาํ กบั ไดด้ ว้ ยใหเ้ ป็นเลขอารบิก, เลขโรมนั หรือตวั อกั ษร 6
รูปแบบ <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> 4.4 การใส่เคร่ืองหมายหน้าหัวขอ้ เป็ นการแสดงรายการโดยใช้เครื่องหมายในแต่ละ รายการยอ่ ย รูปแบบ <UL type = “option”> <LI> ขอ้ ความยอ่ ย </UL> 7
ตวั อยา่ ง <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> 4.5 การแสดงรายการโดยกาํ หนดหัวขอ้ ใช้แสดงรายการแบบให้คาํ นิยาม โดยแบ่ง องคป์ ระกอบเป็น 2 ส่วน ส่วนที่อยบู่ นคือหวั ขอ้ โดยใชค้ าํ สง่ั <DT> ส่วนท่ีอยดู่ า้ นล่างคือคาํ อธิบาย ใช้คาํ สั่ง <DD> โดยหากจะให้ ส่วนหัวขอ้ อยู่ทางซ้าย แลว้ คาํ อธิบายอยู่ทางขวาก็ให้ใช้ attribute COMPACT ในกรณีที่รายการเป็นขอ้ ความส้นั ๆ รูปแบบ <DL> ขอ้ ความส่วนหวั <DT> หวั ขอ้ <DD> คาํ อธิบาย </DL> 8
ตวั อยา่ ง <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”> <IMG align = “top / middle / bottom / left / right”> การกาํ หนดตาํ แหน่งใหก้ บั รูปภาพ <IMG width = “pixels”> การกาํ หนดความกวา้ งรูปภาพ <IMG height = “pixels”> การกาํ หนดความสูงของรูปภาพ <IMG border = “number”> การกาํ หนดช่องวา่ งแนวนอนระหวา่ งรูปภาพกบั ขอ้ ความ <IMG vspace = “number”> การกาํ หนดช่องวา่ งแนวต้งั ระหวา่ งรูปภาพกบั ขอ้ ความ 9
ตวั อยา่ ง <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> กาํ หนดขนาดของขอบตาราง <table width = “pixels / %>” … </table> กาํ หนดความกวา้ งของตาราง ตวั อยา่ ง <html> <head> <title> Table Tags </title> </head> <body> <table> <tr> 10
<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> <head> <title> Table Tags </title> </head> <body> <table border> <caption align=\"top\">ตารางรายรับรายจ่ายประจาํ เดือน</caption> <tr> <th>เดือน</th> <th>มกราคม</th> <th>กมุ ภาพนั ธ<์ /th> 11
<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 การสร้างแถวของตาราง เป็นการสร้างแถวเซลลข์ อ้ มูล เพื่อไวส้ ร้างเซลลข์ อ้ มูล และการสร้างหวั เรื่องของตาราง รูปแบบ <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> 12
<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> กาํ หนดการรวมช่องเซลลใ์ นแนวต้งั <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> กาํ หนดความกวา้ งของตาราง 13
<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> <td>550</td> </tr> <tr> <td>600</td> <td>700</td> <td>750</td> </tr> </table> </body> </html> 14
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 คือสีพ้ืนหลงั ของเอกสาร รูปแบบ <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> 15
เอกสารอา้ งอิง เวบ็ ไซต์ http://korawees.yolasite.com/ 16
Search
Read the Text Version
- 1 - 19
Pages:
