4หน่วยที่ การสร้างเวบ็ ไซต์ด้วยโปรแกรมภาษา HTML สาระสําคญั โครงสร้าง และรูปแบบของภาษา HTML จะใช้แท็กเปิ ด และแท็กปิ ดในการควบคุมการ ทาํ งานของโปรแกรม ถา้ ตอ้ งการใหโ้ ปรแกรมทาํ งานอยา่ งไรก็กาํ หนดแอตตริบิวตต์ ามที่ตอ้ งการได้ การเรียนรู้รูปแบบภาษา HTML เปรียบเสมือนกบั การเรียนเขียนเวบ็ ไซต์ข้นั ตน้ ก่อนจะศึกษาการ เขียนเวบ็ ไซตข์ ้นั สูง เวบ็ ไซตส์ ่วนใหญ่มีพ้ืนฐานการเขียนมาจากภาษา HTML การสร้างเวบ็ ไซต์ สามารถพฒั นาไดจ้ าก โปรแกรม Text Editor เช่น Notepad หรือEdit plus ส่วนการแสดงผลจะใช้ โปรแกรมเวบ็ บราวเซอร์ เช่น Internet Explorer หรือGoogle Chrome หรือMozilla Firefox เป็นตน้ จุดประสงค์การเรียนรู้ จุดประสงค์ทว่ั ไป เพ่ือใหม้ ีความรู้ความเขา้ ใจเกี่ยวกบั การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML จุดประสงค์เชิงพฤตกิ รรม 1. อธิบายโครงสร้างภาษา HTML ได้ 2. บอกเครื่องมือท่ีใชส้ ร้างเอกสาร HTML ได้ 3. สามารถวางเลยเ์ อาท์ (Layouts) ดว้ ยตารางได้ 4. อธิบายไฟลร์ ูปภาพแต่ละชนิดที่นาํ มาใชบ้ นเวบ็ ไซตไ์ ด้ 5. อธิบายเก่ียวกบั การจดั การรูปภาพได้ 6. สามารถสร้างตวั อกั ษรเคล่ือนไหวภายในเวบ็ เพจได้ 7. สามารถจดั และตกแต่งขอ้ ความภายในเวบ็ เพจได้ 8. สามารถสร้างการเช่ือมโยงแบบต่าง ๆ ได้
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 82 สาระการเรียนรู้ 4.1 โครงสร้างภาษา HTML 4.2 เคร่ืองมือที่ใชส้ ร้างเอกสาร HTML 4.3 เริ่มตน้ เขียนเวบ็ ไซตด์ ว้ ยภาษา HTML 4.3.1 การวางเลยเ์ อาท์ (Layouts) ดว้ ยตาราง 4.3.2 ไฟลร์ ูปภาพท่ีนิยมมาใชบ้ นเวบ็ ไซต์ 4.3.3 การจดั การรูปภาพ 4.3.4 การสร้างตวั อกั ษรเคล่ือนไหว 4.3.5 การจดั และตกแต่งขอ้ ความ 4.3.6 การสร้างการเช่ือมโยง 4.3.7 กาํ หนดสีตวั อกั ษร และสีการเชื่อมโยง 4.4 บทสรุป
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 83 4หน่วยท่ี การสร้างเวบ็ ไซต์ด้วยโปรแกรมภาษา HTML HTML ยอ่ มาจากคาํ วา่ Hypertext Markup Language เป็ นภาษาหลกั ที่ใชใ้ นการสร้าง เวบ็ ไซต์ โดยคาํ ส่ังในภาษา HTML จะทาํ หนา้ ท่ีควบคุมการแสดงผลของขอ้ มูลในเวบ็ ไซต์ โดย คาํ ส่งั ท่ีใชค้ วบคุมการแสดงผลใน HTML จะเรียกวา่ แทก็ ซ่ึงในแต่ละแทก็ กม็ ีหนา้ ที่แสดงผลตาม รูปแบบของคาํ สั่ง เช่น แท็กในการกาํ หนดลกั ษณะตวั อกั ษร ขนาดตวั อกั ษร การแสดงรูปภาพ การแสดงตาราง เป็นตน้ 4.1 โครงสร้างภาษา HTML HTML เป็ นภาษาหลกั ท่ีใช้ในการเขียนเว็บเพจ โดยใช้แท็ก (Tag) ในการกาํ หนดการ แสดงผล ในรูปแบบข้อความ รูปภาพ หรือภาพเคลื่อนไหว และสามารถเช่ือมโยงข้อมูลไปยงั เอกสารอื่น ๆ ได้ สามารถเปิ ดดูขอ้ มูลภายในได้ และนาํ เอกสารมาแสดงบนหน้าจอในระบบ อินเทอร์เน็ตได้ โดยไม่ตอ้ งผ่านการแปลโปรแกรม (Compile) ซ่ึงสามารถดูผลไดบ้ นโปรแกรม บราวเซอร์ไดเ้ ลย ภาษาคอมพิวเตอร์ทุก ๆ ภาษาจะมีโครงสร้างเฉพาะ ภาษา HTML ก็เช่นกนั โครงสร้างของ ภาษา HTML น้นั เป็ นโครงสร้างท่ีใชง้ านง่าย และเขา้ ใจไดไ้ ม่ยากนกั รูปแบบโครงสร้างของภาษา HTML (จารุนนั ท,์ 2557: 30) ประกอบดว้ ย 2 ส่วนคือ 4.1.1 ส่วนทเ่ี ป็ นข้อมูลทต่ี ้องการแสดง เช่น ขอ้ ความ รูปภาพ เสียง ภาพเคล่ือนไหว เป็นตน้ 4.1.2 ส่วนท่ีเป็ นคําสั่งแท็ก เพื่อกาํ หนดลกั ษณะของขอ้ มูล โดยตอ้ งกาํ หนดเป็ นแทก็ เปิ ด และแทก็ ปิ ด เช่น การวางตาํ แหน่งของขอ้ มูล ขนาดของขอ้ ความ การกาํ หนดสีขอ้ ความ เป็นตน้
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 84 <html> <head> แทก็ เปิ ด <title> หวั ขอ้ เวบ็ เพจ </title> แทก็ ปิ ด </head> <body> ส่วนที่มีเน้ือหา และขอ้ มลู เกี่ยวกบั ภาพ การเชื่อมโยงท่ีปรากฏในเวบ็ เพจ </body> </html> แทก็ ปิ ด การกาํ หนดคาํ สั่งแท็กโดยใชเ้ ครื่องหมายนอ้ ยกวา่ < และเคร่ืองหมายมากกวา่ > ภายใน เครื่องหมายเมื่อพิมพค์ าํ สั่งลงไปหลงั เคร่ืองหมาย < ตอ้ งไม่มีช่องวา่ ง และก่อนเคร่ืองหมาย > ไม่มี ช่องวา่ ง เช่น <html> หรือ <body> เป็ นตน้ แต่หากใชค้ าํ สั่งร่วมกนั หลายคาํ สั่งภายในเครื่องหมาย ตอ้ งมีช่องวา่ ง เพอื่ แบง่ คาํ สง่ั ไดถ้ ูกตอ้ ง เช่น <p align=center> หรือ <hr width=600> เป็นตน้ <html>…..</html> เป็นแทก็ แรกท่ีตอ้ งมีในภาษา HTML เป็นคาํ สั่งกาํ หนดจุดเร่ิมตน้ และจุดสิ้นสุดของไฟล์ HTML <head>…..</head> เป็นส่วนกาํ หนดรายละเอียดหวั เอกสาร HTML โดยใชแ้ ทก็ <title>…..</title> ซ่ึง ขอ้ ความภายในแทก็ น้ีจะเป็นช่ือหวั เร่ืองเวบ็ เพจที่ตอ้ งการ <body>…..</body> เป็นส่วนของเน้ือหาเวบ็ เพจ ประกอบไปดว้ ยขอ้ ความ รูปภาพ ตาราง และการเชื่อมไปยงั เอกสารอ่ืน ๆ ท่ีแสดงผลที่เวบ็ บราวเซอร์ 4.2 เครื่องมอื ทใี่ ช้สร้างเอกสาร HTML ในการสร้างเวบ็ เพจดว้ ย HTML ตอ้ งมีเคร่ืองมือในการเขียน และแกไ้ ขโคด้ เรียกวา่ Text Editor เป็ นโปรแกรมที่ใชส้ ําหรับสร้าง และแกไ้ ขขอ้ ความ เช่น Notepad, EditPlus, eclipse และ Dreamweaver
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 85 รูปที่ 4-1 ตวั อยา่ งการเขียน HTML ดว้ ยโปรแกรม EditPlus 4.3 เร่ิมต้นเขยี นเวบ็ ไซต์ด้วยภาษา HTML จากข้ันตอนการสร้างเว็บไซต์ เม่ือได้ทาํ การกาํ หนดโครงร่างเว็บไซต์ กาํ หนดการ เช่ือมโยงระหวา่ งเวบ็ เพจเรียบร้อยแลว้ ข้นั ตอนต่อไปคือ ออกแบบหนา้ เวบ็ เพจแต่ละหนา้ ซ่ึงในที่น้ี จะใชต้ ารางในการออกแบบหนา้ เวบ็ เพจ 4.3.1 การวางเลย์เอาท์ (Layouts) ด้วยตาราง การนาํ ตารางมาใชใ้ นภาษา HTML ช่วยในการจดั ขอ้ มูล และการจดั แบง่ หนา้ เวบ็ เพจ ออกเป็ นสดั ส่วนแยกจากกนั ในการสร้างตาราง จะใชแ้ ทก็ <table> ในการกาํ หนดขอบเขตของตาราง และใชค้ าํ ส่งั ยอ่ ยกาํ หนดแถว และคอลมั น์ โดยใชแ้ ทก็ <tr> และ <td> รูปแบบ <table> <tr> <td> เน้ือหาในเซลล์ </td> </tr> </table> การสร้างตาราง ควรทาํ ความเขา้ ใจเก่ียวกบั แทก็ คาํ สัง่ และแอตตริบิวตต์ ่าง ๆ ดงั รายละเอียดในตารางท่ี 4-1
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 86 ตารางที่ 4-1 การสร้างตาราง แทก็ คาํ สง่ั (Tag) แอตตริบิวต์ (Tag Attribute) หนา้ ท่ี (Function) <table> จุดเริ่มตน้ ของการสร้างตาราง border= \"ขนาดเส้นขอบ\" กาํ หนดเส้นขอบใหก้ บั ตาราง โดยคา่ ท่ีกาํ หนด จะมีค่าต้งั แต่ 0 ข้ึนไป cellspacing= \"ขนาดช่องวา่ ง\" กาํ หนดช่องวา่ งระหวา่ งเซลลใ์ นตาราง จะมี หน่วยเป็นพกิ เซล cellpadding= \"ขนาดช่องวา่ ง\" กาํ หนดช่องวา่ งระหวา่ งเน้ือหา และเส้นขอบ ภายในเซลล์ มีหน่วยเป็นพกิ เซล width= \"ความกวา้ ง\" กาํ หนดความกวา้ งใหก้ บั ตาราง สามารถ กาํ หนดคา่ ใหเ้ ป็ นพิกเซล หรือกาํ หนดเป็น เปอร์เซ็นต์ bgcolor= \"สีพ้ืนหลงั \" กาํ หนดสีพ้นื หลงั background= \"ช่ือไฟลร์ ูปภาพ\" กาํ หนดภาพพ้ืนหลงั bordercolor= \"สีขอบตาราง\" กาํ หนดสีใหก้ บั เส้นขอบตาราง <tr> กาํ หนดแถวใหก้ บั ตาราง bgcolor= \"สี\" กาํ หนดสีพ้นื หลงั ใหก้ บั เซลลภ์ ายในแถวน้นั ๆ bordercolor= \"สี\" กาํ หนดสีใหก้ บั เส้นขอบตารางเฉพาะแถวน้นั ๆ <th> กาํ หนดหวั ขอ้ ใหก้ บั เซลล์ align= \"ตาํ แหน่ง\" จดั ตาํ แหน่งขอ้ ความในเซลล์ สามารถจดั เป็น left, right และ center rowspan= \"จาํ นวนแถว\" การผสานเซลลใ์ นระดบั แถว colspan= \"จาํ นวนคอลมั น์\" การผสานช่องเซลลใ์ นระดบั คอลมั น์ <td> กาํ หนดขอ้ มูลคอลมั น์ align= \"ตาํ แหน่ง\" จดั ตาํ แหน่งขอ้ มูลภายในเซลล์ สามารถจดั เป็น left, right และcenter valign= \"ตาํ แหน่ง\" จดั ตาํ แหน่งขอ้ ความภายในเซลลต์ ามแนวต้งั สามารถจดั เป็น left, right และcenter
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 87 ตารางที่ 4-1 การสร้างตาราง (ตอ่ ) หนา้ ที่ (Function) แทก็ คาํ สง่ั (Tag) แอตตริบิวต์ (Tag Attribute) ระบุความกวา้ งภายในเซลล์ สามารถกาํ หนดเป็น width= \"ความกวา้ ง\" พกิ เซล หรือเปอร์เซ็นต์ การผสานช่องเซลลข์ อ้ มูลในระดบั แถว rowspan= \"จาํ นวนแถว\" การผสานช่องเซลลข์ อ้ มลู ในระดบั คอลมั น์ colspan= \"จาํ นวนคอลมั น์\" แทก็ ปิ ดของคอลมั น์ </td> </th> แทก็ ปิ ดของการกาํ หนดหวั ขอ้ </tr> </table> แทก็ ปิ ดของแถว แทก็ ปิ ดของตาราง จากการที่ไดเ้ รียนรู้แทก็ คาํ ส่งั และแอตตริบิวตต์ า่ ง ๆ แลว้ กจ็ ะนาํ คาํ สง่ั ต่าง ๆ มา ประยกุ ตอ์ อกแบบหนา้ เวบ็ เพจ ดว้ ยตาราง ส่วนเมนูหลกั ส่วนของ Header ส่วนที่ไวส้ าํ หรับทาํ ตวั อกั ษรเคลื่อนไหว ส่วนลิงคอ์ ื่น ๆ ส่วนของเน้ือหา ส่วนของ Footer รูปที่ 4-2 ออกแบบหนา้ เวบ็ เพจ
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 88 ตัวอย่าง การสร้างเลยเ์ อาท์ (Layouts) ดว้ ยตาราง <html> <head> <title> Webpage </title> </head> <body> <table border=\"1\" width=\"100%\"> <tr> <td colspan=\"3\" align=\"center\" > ส่วนของ Header </td></tr> <tr> <td colspan=\"3\" align=\"right\"> ส่วนท่ีไวส้ าํ หรับทาํ ตวั อกั ษรเคลื่อนไหว</td></tr> <tr> <td> ส่วนเมนูหลกั </td> <td> ส่วนของเน้ือหา </td> <td> ส่วนลิงคอ์ ่ืน ๆ </td></tr> <tr> <td colspan=\"3\" align=\"center\"> ส่วนของ Footer</td></tr> </table> </body> </html> ผลลพั ธ์ รูปที่ 4-3 ผลลพั ธ์การสร้างเลยเ์ อาท์ (Layouts) ดว้ ยตาราง 4.3.2 ไฟล์รูปภาพทนี่ ิยมมาใช้บนเวบ็ ไซต์ ก่อนนาํ รูปภาพมาแสดงบนหน้าเวบ็ ไซต์ เราตอ้ งเตรียมไฟล์รูปภาพท่ีจะใชก้ ่อน โดยควร ทาํ ความเขา้ ใจความแตกต่างระหว่างไฟล์รูปภาพแต่ละชนิด เพ่ือจะไดน้ าํ มาใช้ไดอ้ ย่างเหมาะสม ไฟลท์ ี่นิยมใชง้ านบนเวบ็ ไซตม์ ีดงั น้ี 4.3.2.1 ฟอร์แมต GIF 1)*ถูกพฒั นาโดย CompuServe ในปี 1980 เพอื่ บีบอดั ขอ้ มลู ภาพลายเส้น 2)*มีขอ้ จาํ กดั ใชง้ านอยทู่ ี่ 256 สีเทา่ น้นั (8 บิต) 3)*ใชก้ ารบีบอดั แบบพาเลต(Palette) สีข้ึนใหม่ ทาํ ใหไ้ ม่สูญเสียคุณภาพของ รูปภาพ เพราะไมม่ ีการตดั สีภาพออก แต่เป็นลกั ษณะการแทนสีภาพในแต่ละพิกเซลดว้ ยสีท่ีกาํ หนด ข้ึนใหม่ ฉะน้นั คุณภาพไฟลจ์ ะไม่เสีย
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 89 4)*แสดงรูปภาพโปร่งใส และภาพเคลื่อนไหวได้ รูปท่ี 4-4 ฟอร์แมต GIF (200309-51.gif) ที่มา : http://glitter.kapook.com/content.php?lang=th&id=10118&category_id=183 4.3.2.2 ฟอร์แมต JPEG 1)*ถูกพฒั นาข้ึนโดย Joint Photographic Experts Group เพื่อจุดประสงคใ์ น การบีบอดั ขอ้ มูลของไฟล์รูปภาพ มีจุดเด่นคือหลงั การบีบอดั ยงั สามารถใชส้ ีไดถ้ ึง 16.7 ลา้ นสี ในขณะท่ีฟอร์แมต GIF ใชไ้ ดเ้ พียง 256 สีเท่าน้นั 2)*รองรับขอ้ มูลสีไดม้ ากถึง 16.7 ลา้ นสี 3)*ลกั ษณะการบีบอดั เป็ นการลบขอ้ มลู ส่วนท่ีซ้าํ ซอ้ นกนั มากที่สุดออกจาก ภาพนิ่ง ยงิ่ มีการบีบอดั ขอ้ มลู มากข้ึนเท่าไหร่ คุณภาพกจ็ ะสูญเสียมากข้ึนเทา่ น้นั รูปที่ 4-5 ตวั อยา่ งไฟล์ JPEG (meaw.jpg) 4.3.2.3 ฟอร์แมต PNG 1)*ถูกพฒั นาโดย Thomas Boutell และ Tom Lane วตั ถุประสงค์ เพื่อการ ทาํ งานขา้ มระบบ 2)*บีบอดั ขอ้ มูลไดด้ ีกวา่ ฟอร์แมต GIF 20-30 เปอร์เซ็นต์
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 90 3)*สามารถเลือกการจดั เกบ็ ขอ้ มลู ไดท้ ้งั แบบ 8 บิต 24 บิต และ 32 บิต ต่าง กบั ฟอร์แมต GIF 4)*แสดงผลไดเ้ ร็วกวา่ แบบฟอร์แมต GIF เพราะรูปภาพในฟอร์แมต GIF จะ เร่ิมแสดงผลเม่ือดาวนโ์ หลดขอ้ มลู มาได้ 1 ใน 18 ส่วน ขณะท่ีฟอร์แมต PNG เริ่มแสดงผลเมื่อขอ้ มูล ถูกโหลดเขา้ มา 1 ใน 64 ส่วน 5)*ใชก้ บั รูปภาพโปร่งใสได้ รูปท่ี 4-6 ฟอร์แมต PNG (Computer.png) 4.3.3 การจัดการรูปภาพ การแทรกรูปภาพเพื่อแสดงบนเว็บเพจ ช่วยดึงดูดความสนใจให้แก่ผูเ้ ยี่ยมชมเว็บไซต์ ในส่วนของการแทรกรูปภาพบนเวบ็ เพจ ควรเตรียมรูปภาพใหเ้ รียบร้อย จะใชร้ ูปภาพนามสกุลใด ควรพิจารณาถึงความเหมาะสม อีกท้งั ควรทาํ ความเขา้ ใจเกี่ยวกบั แท็กคาํ สั่ง และแอตตริบิวตต์ ่าง ๆ ดงั รายละเอียดตารางที่ 4-2 ตารางท่ี 4-2 การจดั การรูปภาพ แทก็ คาํ สง่ั (Tag) แอตตริบิวต์ (Tag Attribute) หนา้ ที่ (Function) <img src= “ช่ือไฟลภ์ าพ”> การแทรกรูปภาพ width= \"ค่าตวั เลข\" กาํ หนดความกวา้ งของรูปภาพ height= \"คา่ ตวั เลข\" กาํ หนดความสูงของรูปภาพ alt= \"ขอ้ ความกาํ กบั รูปภาพ\" ระบุขอ้ ความกาํ กบั รูปภาพ align= \"ตาํ แหน่งรูปภาพ\" การจดั ตาํ แหน่งรูปภาพ สามารถกาํ หนด เป็น left, right, middle, top, bottom border= \"ความหนา\" การใส่กรอบใหก้ บั รูปภาพ
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 91 ตัวอย่าง การแทรกรูปภาพ การแทรกรูปภาพในเวบ็ เพจตอ้ งใชแ้ ทก็ <img src= “ชื่อไฟลร์ ูปภาพ” > ซ่ึงไฟลร์ ูปภาพ ควรอยใู่ นไดร์ฟ และโฟลเดอร์น้นั ดว้ ย ดงั ตวั อยา่ ง รูปภาพอยใู่ นโฟลเดอร์ image ฉะน้นั ควรอา้ งชื่อ โฟลเดอร์ก่อน ท่ีจะระบุช่ือไฟลร์ ูปภาพ เช่น <img src=\"image/head.jpg\"> <html> <head> <title> Webpage </title> </head> <body> <table border=\"1\" width=\"100%\"> <tr> <td colspan=\"3\" align=\"center\" > <img src=\"image/head.jpg\"> </td></tr> <tr> <td colspan=\"3\" align=\"right\"> ส่วนท่ีไวส้ าํ หรับทาํ ตวั อกั ษรเคลื่อนไหว </td></tr> <tr> <td> ส่วนเมนูหลกั </td><td> ส่วนของเน้ือหา </td> <td> ส่วนลิงคอ์ ่ืน ๆ </td></tr> <tr> <td colspan=\"3\" align=\"center\"> <img src=\"image/footer.jpg\"></td></tr> </table> </body> </html> ผลลพั ธ์ รูปท่ี 4-7 ตวั อยา่ งการแทรกรูปภาพ
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 92 4.3.4 การสร้างตัวอกั ษรเคลอ่ื นไหว การกาํ หนดให้ตวั อกั ษรเคล่ือนไหวบนหนา้ เวบ็ เพจ โดยการใชค้ าํ ส่งั marquee ดงั น้นั ควร ทาํ ความเขา้ ใจเกี่ยวกบั แทก็ คาํ ส่งั และแอตตริบิวตต์ า่ ง ๆ ดงั รายละเอียดตารางที่ 4-3 ตารางที่ 4-3 การสร้างตวั อกั ษรเคลื่อนไหว แทก็ คาํ ส่งั (Tag) แอตตริบิวต์ (Tag Attribute) หนา้ ที่ (Function) <marquee> แทก็ เปิ ดตวั อกั ษรเคลื่อนไหว behavior กาํ หนดรูปแบบการเคลื่อนไหว มี 3 รูปแบบดงั น้ี scroll เคล่ือนไหวหายไปจากขอบ และ ปรากฏที่ขอบอีกดา้ น ทาํ ซ้าํ เร่ือย ๆ slide เคล่ือนไหวแลว้ หยดุ ท่ีขอบ alternate เคล่ือนไหวกระทบขอบแลว้ เดง้ ไปอีกทาง กลบั ไปกลบั มา direction กาํ หนดทิศทางการเคลื่อนที่ left, right, up และdown width กาํ หนดความกวา้ งของกรอบ height กาํ หนดความสูงของกรอบ hspace กาํ หนดระยะห่างของขอ้ ความท่ี เคลื่อนไหว ทางดา้ นซา้ ยและขวา vspace กาํ หนดระยะห่างของขอ้ ความท่ี เคล่ือนไหว ในแนวบนและล่าง loop กาํ หนดจาํ นวนรอบการเคลื่อนไหว scrollamount=n กาํ หนดระยะในการขยบั ขอ้ ความ (ยง่ิ มาก ขอ้ ความจะขยบั ไปไกลในแต่ละคร้ัง) scrolldelay=n กาํ หนดเวลารอเป็นหน่วย (ยงิ่ มาก ขอ้ ความจะรอนานกวา่ จะขยบั แต่ละคร้ัง) </marquee> แทก็ ปิ ดตวั อกั ษรเคลื่อนไหว
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 93 ตวั อย่าง การสร้างตวั อกั ษรเคล่ือนไหว <html> <head> <title> Webpage </title> </head> <body> <table border=\"1\" width=\"100%\"> <tr> <td colspan=\"3\" align=\"center\" > <img src=\"image/head.jpg\"> </td></tr> <tr> <td colspan=\"3\" align=\"right\"> <marquee behavior=\"alternate\"> ยนิ ดีตอ้ นรับสู่เวบ็ ไซ์ Jewelry </marquee> </td></tr> <tr> <td> ส่วนเมนูหลกั </td><td> ส่วนของเน้ือหา </td> <td> ส่วนลิงคอ์ ื่น ๆ </td></tr> <tr> <td colspan=\"3\" align=\"center\"> <img src=\"image/footer.jpg\"></td></tr> </table> </body> </html> ผลลพั ธ์ รูปที่ 4-8 ตวั อยา่ งการสร้างตวั อกั ษรเคลื่อนไหว
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 94 4.3.5 การจัด และตกแต่งข้อความ การจดั และตกแต่งขอ้ ความใหส้ วยงาม เป็นส่ิงท่ีจาํ เป็นสาํ หรับการเขียนเวบ็ เพจ เพราะช่วย ดึงดูดความสนใจของผใู้ ช้ ฉะน้นั ถา้ ตกแตง่ ขอ้ ความ และสีพ้นื ชดั เจน และเหมาะสม 4.3.5.1 การตกแต่งขอ้ ความดว้ ยแทก็ font เป็นแทก็ ที่ใชก้ าํ หนดตวั อกั ษร และขอ้ ความ ซ่ึงสามารถแสดงไดห้ ลายรูปแบบ ดงั รายละเอียดตารางที่ 4-4 ตารางท่ี 4-4 การตกแตง่ ขอ้ ความดว้ ยแทก็ font แทก็ คาํ สง่ั (Tag) แอตตริบิวต์ (Tag Attribute) หนา้ ท่ี (Function) <font> แทก็ เปิ ดที่ใชก้ าํ หนดตวั อกั ษรและ ขอ้ ความ size=\"5\" กาํ หนดขนาดตวั อกั ษรเป็ น 5 (มีขนาดต้งั แต่ 1-7) color=\"blue\" กาํ หนดตวั อกั ษรเป็นสีน้าํ เงิน face=\"AngsanaUPC\" กาํ หนดรูปแบบตวั อกั ษรเป็ นแบบ AngsanaUPC </font> แทก็ ปิ ดท่ีใชก้ าํ หนดตวั อกั ษรและ ขอ้ ความ
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 95 ตวั อย่าง การตกแต่งขอ้ ความดว้ ยแทก็ font <html> <head> <title> Webpage </title> </head> <body> <font face=\"AngsanaUPC\" size=\"5\" color=\"blue\"> 44/3 ถนนจนั ทคามวถิ ี ตาํ บลตลาด อาํ เภอเมือง จงั หวดั จนั ทบุรี 22000 </font> </body> </html> ผลลพั ธ์ รูปที่ 4-9 ตวั อยา่ งการตกแต่งขอ้ ความดว้ ยแทก็ font 4.3.5.2 การเนน้ คาํ และตวั อกั ษรแบบต่าง ๆ ตวั อกั ษรท่ีเราตอ้ งการตกแต่ง เช่น ตอ้ งการทาํ ใหต้ วั หนา ตวั เอียง ขีดเส้นใต้ หรือ แบบอ่ืน ดงั รายละเอียดตารางที่ 4-5 ตารางท่ี 4-5 การเนน้ คาํ และตวั อกั ษรแบบต่าง ๆ แทก็ คาํ ส่งั (Tag) แอตตริบิวต์ (Tag Attribute) หนา้ ที่ (Function) <b>…</b> - เนน้ ขอ้ ความแบบตวั หนา <i>…</i> - เนน้ ขอ้ ความแบบตวั เอียง <u>…</u> - เนน้ ขอ้ ความแบบขีดเส้นใต้ <s>…</s> - เนน้ ขอ้ ความแบบขีดฆา่ <sup>…</sup> - ตวั อกั ษรยก <sub>…</sub> - ตวั อกั ษรหอ้ ย <hn>…</hn> - รูปแบบขอ้ ความที่เป็นหวั เรื่อง (n มีคา่ ต้งั แต่ 1 ถึง 6)
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 96 ตวั อย่าง การเนน้ คาํ และตวั อกั ษรแบบต่าง ๆ <html> <head> <title> Webpage </title> </head> <body> <h1> <u> ประวตั ิส่วนตวั </u> </h1> <br> <b> ชื่อ-นามสกลุ </b> <i> พรี ญา ดุนขนุ ทด </i> <br> <b> อายุ </b> ไม่ใช่ <s> 40 </s> ปี <br> ตวั อยา่ งการใชต้ วั ยก และตวั หอ้ ย <br> P=I <sup> 2 </sup> R <br> FF <sub> 16 </sub> =255 <sub> 10 </sub> </body> </html> ผลลพั ธ์ รูปที่ 4-10 ตวั อยา่ งการเนน้ คาํ และตวั อกั ษรแบบต่าง ๆ
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 97 4.3.5.3 สร้างเส้นคนั่ การสร้างเส้นคน่ั แนวนอน จะช่วยแบ่งเน้ือหาออกเป็นส่วน ๆ ทาํ ใหอ้ า่ นง่าย ดงั รายละเอียดตารางท่ี 4-6 ตารางท่ี 4-6 สร้างเส้นคนั่ แทก็ คาํ สง่ั (Tag) แอตตริบิวต์ (Tag Attribute) หนา้ ท่ี (Function) <hr> แทก็ เปิ ดเส้นคน่ั width=\"30\" หรือ กาํ หนดความยาวของเส้นคน่ั มี หน่วยแป็นพกิ เซล หรือเปอร์เซ็นต์ width=\"30%\" size=\"3\" กาํ หนดความหนาของเส้นคน่ั มี หน่วยเป็นพกิ เซล noshade=\"noshadde\" กาํ หนดใหเ้ ป็ นเส้นคน่ั สีเดียวกนั ท้งั เส้น หรือเรียกวา่ เส้นคน่ั ทึบ align กาํ หนดตาํ แหน่งของเส้นให้อยู่ center (ก่ึงกลาง), left (ชิดซา้ ย), และ right (ชิดขวา)
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 98 ตวั อย่าง การสร้างเส้นคนั่ <html> <head> <title> Webpage </title> </head> <body> <h1> <u> ประวตั ิส่วนตวั </u> </h1> <br> <b> ช่ือ-นามสกุล </b> <i> พรี ญา ดุนขนุ ทด </i> <br> <hr width=\"50%\" size=\"3\" align =\"left\" > <font face=\"AngsanaUPC\" size=\"5\" color=\"blue\"> 44/3 ถนนจนั ทคามวถิ ี ตาํ บลตลาด อาํ เภอเมือง จงั หวดั จนั ทบุรี 22000 </font> </body> </html> ผลลพั ธ์ เสน้ คน่ั รูปที่ 4-11 ผลลพั ธ์การสร้างเส้นคนั่
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 99 4.3.5.4 การจดั วางเน้ือหาบนหนา้ เวบ็ ไซต์ ในหนา้ เวบ็ เพจแต่ละหนา้ มีขอ้ ความจาํ นวนมาก ตอ้ งมีการจดั ขอ้ ความให้เป็น ระเบียบ ซ่ึงมีคาํ ส่งั ดงั รายละเอียดตารางท่ี 4-7 ตารางท่ี 4-7 จดั วางเน้ือหาบนหนา้ เวบ็ เพจ แทก็ คาํ ส่งั (Tag) แอตตริบิวต์ (Tag Attribute) หนา้ ท่ี (Function) <center>…</center> การจดั ขอ้ ความให้อยกู่ ่ึงกลาง <br> การข้ึนบรรทดั ใหม่ <p> แทก็ เปิ ดการแสดงขอ้ ความเป็ น พารากราฟ align=\"ตาํ แหน่ง\" ตาํ แหน่งของการจดั วางขอ้ ความ ไดแ้ ก่ left (ซา้ ย), center (ตรง กลาง), right (ขวา) และ justify (จดั เตม็ พ้นื ท่ี) </p> แทก็ ปิ ดการแสดงขอ้ ความเป็ น พารากราฟ
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 100 ตวั อย่าง การจดั วางเน้ือหาบนหนา้ เวบ็ เพจ <html> <head> <title> Webpage </title> </head> <body> <center><h1> โครงสร้างของภาษา HTML </h1> </center><br> <font face=\"AngsanaUPC\" size=\"5\" color=\"blue\"> <p align=\"left\"> HTML คือ โปรแกรมภาษาประเภทหน่ึงสาํ หรับแสดงขอ้ ความตา่ ง ๆ ใน รูปแบบขอ้ ความ รูปภาพ หรือภาพเคล่ือนไหว และสามารถเชื่อมโยงขอ้ มูลไปยงั เอกสารอื่น ๆ ได้ ที่มีความสามารถสูงเหนือกวา่ เอกสารทว่ั ไป เพราะสามารถเปิ ดดูขอ้ มูลภายในได้ </p> <p align=\"right\"> ในการสร้างเวบ็ เพจดว้ ย HTML ตอ้ งมีเครื่องมือในการเขียน และแกไ้ ข โคด้ เรียกวา่ Text Editor เป็นโปรแกรมท่ีใชส้ าํ หรับสร้างและแกไ้ ขขอ้ ความ เช่น Notepad EditPlus eclipse และ Dreamweaver </p> </font> </body> </html> ผลลพั ธ์ รูปท่ี 4-12 ผลลพั ธ์การจดั วางเน้ือหาบนหนา้ เวบ็ เพจ
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 101 4.3.5.5 การกาํ หนดสีพ้ืนหลงั ใหก้ บั เวบ็ เพจ เราสามารถใชส้ ี หรือรูปภาพเป็นพ้นื หลงั ในเวบ็ เพจ โดยมีรูปแบบดงั น้ี bgcolor=\"ชื่อของสี\" หรือ bgcolor=\"#คา่ ของสีเป็นเลขฐาน 16\" ตัวอย่าง การกาํ หนดสีพ้นื หลงั ใหก้ บั เวบ็ เพจ <body bgcolor=\"cyan\"> กาํ หนดสีพ้ืนเป็นสีฟ้ าโดยกาํ หนดเป็ นชื่อของสี <body bgcolor=\"#00FFFF\"> กาํ หนดสีพ้ืนเป็นสีฟ้ าโดยกาํ หนดเป็ นเลขฐาน 16 <body background=\"bg01.jpg\"> กาํ หนดสีพ้ืนเป็นรูปภาพ 4.3.5.6 การกาํ หนดสญั ลกั ษณ์ และเลขลาํ ดบั การกาํ หนดสัญลกั ษณ์ และลาํ ดบั เลขเพื่อกาํ หนดเป็ นหวั ขอ้ หลกั หวั ขอ้ ยอ่ ย เพื่อเป็น การแบ่งขอ้ มลู ออกเป็ นหวั ขอ้ ทาํ ใหเ้ อกสารดูเป็นระเบียบ และดึงดูดความสนใจไดม้ ากข้ึน 4.3.5.6.1 การกาํ หนดสัญลกั ษณ์หนา้ หวั ขอ้ เป็นการกาํ หนดสัญลกั ษณ์ให้ขอ้ ความของแตล่ ะรายการแบบไม่มีหมายเลข (UL –Unorder List) ซ่ึงมีสัญลกั ษณ์ 3 ชนิด 1) วงกลมทึบ ( disc) 2) วงกลมโปร่ง ( circle) 3) สี่เหล่ียมทึบ ( square) ตารางที่ 4-8 การกาํ หนดสญั ลกั ษณ์ แบบไมม่ ีหมายเลข แทก็ คาํ สง่ั (Tag) แอตตริบิวต์ (Tag Attribute) หนา้ ท่ี (Function) <ul > เปิ ดแทก็ สัญลกั ษณ์หนา้ หวั ขอ้ type=\"ชนิดของสัญลกั ษณ์\" มี 3 ชนิด คือ disc, circle, square <li>…</li> แทก็ สาํ หรับขอ้ มลู ในลาํ ดบั </ul> ปิ ดแทก็ สัญลกั ษณ์หนา้ หวั ขอ้
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 102 ตัวอย่าง การกาํ หนดสัญลกั ษณ์หนา้ หวั ขอ้ <html> <head> <title> Webpage </title> </head> <body> <ul type= \"square\"> สถานศึกษาในอาชีวศึกษาจงั หวดั จนั ทบุรี <li>วทิ ยาลยั เทคนิคจนั ทบุรี </li> <li>วทิ ยาลยั สารพดั ช่างจนั ทบุรี</li> <li>วทิ ยาลยั การอาชีพนายายอาม </li> <li>วทิ ยาลยั การอาชีพสอยดาว </li> </ul> </body> </html> ผลลพั ธ์ รูปที่ 4-13 ตวั อยา่ งการกาํ หนดสญั ลกั ษณ์หนา้ หวั ขอ้
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 103 4.3.5.6.2 กาํ หนดหมายเลขหนา้ หวั ขอ้ (OL –Ordered List) เป็นการกาํ หนดเลขลาํ ดบั หนา้ ขอ้ ความแต่ละรายการ ท่ีไม่มีสัญลกั ษณ์หนา้ ขอ้ ความ แต่เป็น ตวั เลขอารบิก ตวั เลขโรมนั หรือตวั อกั ษร มีลกั ษณะดงั น้ี 1) แสดงเป็นตวั อกั ษรพิมพใ์ หญ่ (\"A\") 2) แสดงเป็นตกั อกั ษรพิมพเ์ ล็ก (\"a \") 3) แสดงตวั เลขโรมนั ตวั พิมพใ์ หญ่ (\"I\") 4) แสดงตวั เลขโรมนั ตวั พมิ พใ์ หญ่ (\"i\") 5) แสดงเป็นตวั เลข (\"1\") ตารางท่ี 4-9 กาํ หนดสัญลกั ษณ์แบบหมายเลข แทก็ คาํ สง่ั (Tag) แอตตริบิวต์ (Tag Attribute) หนา้ ท่ี (Function) <ol> แทก็ เปิ ดกาํ หนดหมายเลขหนา้ หวั ขอ้ type=\"ชนิดหมายเลขหนา้ หวั ขอ้ \" มี 5 ชนิด คือ\"A\", \"a \", \"I\",\"i\",\"1\" <li>…</li> แทก็ สาํ หรับขอ้ มลู ในลาํ ดบั </ol> แทก็ ปิ ดกาํ หนดหมายเลขหนา้ หวั ขอ้
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 104 ตวั อย่าง กาํ หนดหมายเลขหนา้ หวั ขอ้ <html> <head> <title> Webpage </title> </head> <body> <ol type= \"1\"> สถานศึกษาในอาชีวศึกษาจงั หวดั จนั ทบุรี <li>วทิ ยาลยั เทคนิคจนั ทบุรี </li> <li>วทิ ยาลยั สารพดั ช่างจนั ทบุรี</li> <li>วทิ ยาลยั การอาชีพนายายอาม </li> <li>วทิ ยาลยั การอาชีพสอยดาว </li> </ol> </body> </html> ผลลพั ธ์ รูปที่ 4-14 ตวั อยา่ งการกาํ หนดหมายเลขหนา้ หวั ขอ้ 4.3.6 การสร้างการเช่ือมโยง การเช่ือมโยงหน้าเวบ็ เพจ เป็ นการกาํ หนดส่วนของขอ้ ความ รูปภาพ หรือสัญลกั ษณ์ไว้ เป็ นจุดเชื่อมโยง ไปยงั เอกสารต่าง ๆ ขอ้ ความที่เป็ นตวั เช่ือมโยงจะปรากฏตวั อกั ษรเป็ นสีน้าํ เงิน และขีดเส้นใต้ หรืออาจเช่ือมโยงดว้ ยรูปภาพ เมื่อเล่ือนเมาส์ช้ีบริเวณขอ้ ความหรือรูปภาพท่ีมีการ เชื่อมโยงจะเป็ นรูปนิ้วมือ
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 105 รูปท่ี 4-15 ตวั อยา่ งการสร้างการเช่ือมโยง การเชื่อมโยงขอ้ มูลสามารถแบ่งได้ 3 วธิ ี คือ 4.3.6.1 การเช่ือมโยงขอ้ มลู ภายในเวบ็ เพจหนา้ เดียวกนั ในกรณีการเช่ือมโยงแบบน้ี จะใช้ในกรณีหน้าเวบ็ เพจที่ยาว ตอ้ งมีการเลื่อนข้ึน บน หรือลงล่างไปท่ีตาํ แหน่งขอ้ มูลน้ันอยู่ ซ่ึงการสร้างการเชื่อมโยงเพื่อให้ผูใ้ ช้งานสามารถ เช่ือมโยงไปยงั จุดท่ีกาํ หนดไว้ ซ่ึงมีข้นั ตอนดงั น้ี 1) สร้างจุดปลายทางก่อน โดยกาํ หนดใหแ้ อตตริบิวต์ name ของ <a> มี ค่าเป็น address (หรือต้งั ชื่อท่ีตอ้ งการ) 2) กาํ หนดการเช่ือมโยงตามปกติแตเ่ ปล่ียนการอา้ งอิงปลายทางใหอ้ ยใู่ น รูปแบบ #address ตัวอย่าง การเชื่อมโยงขอ้ มลู ภายในเวบ็ เพจหนา้ เดียวกนั <body> ท่ีอย:ู่ <a href= \" #address \" > คลิกเลย </a> กาํ หนดการเช่ือมโยงไป ……….. ยงั จุดหมายปลายทาง <!--ช่วงระหวา่ งน้ีตอ้ งมีขอ้ มูลเยอะ ๆ เกินหน่ึงหนา้ จึงจะเห็นผลการทาํ งาน-> ……….. <a name= \" address \" > [email protected] </a> สร้างจุดปลายทาง </body>
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 106 4.3.6.2 การเช่ือมโยงขอ้ มลู ในเวบ็ เพจหนา้ อ่ืน ภายในเวบ็ ไซตเ์ ดียวกนั การเช่ือมโยงไปยงั เวบ็ เพจอ่ืนภายในเวบ็ ไซตเ์ ดียวกนั ควรเกบ็ รายชื่อไฟลไ์ วใน ไดร์ฟและโฟลเดอร์เดียวกนั เพ่อื สะดวกในการคน้ หา รูปแบบของคาํ สง่ั การเช่ือมโยงไปยงั เวบ็ เพจ อื่น ดงั น้ี <a href= \" ชื่อไฟลป์ ลายทางที่ตอ้ งการเชื่อมโยง \" > ขอ้ ความ </a> ตวั อย่าง การเช่ือมโยงขอ้ มูลในเวบ็ เพจหนา้ อ่ืนภายในเวบ็ ไซตเ์ ดียวกนั <html> <head> <title> การเชื่อมโยงไปยงั เวบ็ เพจอ่ืน </title> </head> <body> <a href= \"people.html\"> บุคลากร </a> <a href= \"contect.html\"> ติดต่อเรา </a> </body> </html> 4.3.6.3 การเช่ือมโยงขอ้ มูลไปยงั เวบ็ ไซตอ์ ื่น การเชื่อมโยงไปยงั เว็บไซต์อื่น ท่ีอยู่นอกเว็บไซต์ของเราที่สร้างข้ึนน่ันเอง สามารถเชื่อมโยงไปยงั เวบ็ ไซตต์ ่าง ๆ เช่น เช่ือมโยงไปยงั เวบ็ ไซตท์ ่ีเราตอ้ งการ ซ่ึงมีรูปแบบของ คาํ สง่ั การเช่ือมโยงไปยงั เวบ็ ไซตอ์ ื่นดงั น้ี <a href=\"http://ช่ือเวบ็ ไซตท์ ่ีตอ้ งการเชื่อมโยง\"> ขอ้ ความ </a> ตัวอย่าง การเชื่อมโยงขอ้ มูลไปยงั เวบ็ ไซตอ์ ื่น <html> <head> <title> การเช่ือมโยงไปยงั เวบ็ ไซตอ์ ่ืน </title> </head> <body> <a href= \"http://www.google.com\"> คน้ หาขอ้ มลู </a> <a href= \"http://www.technicchan.ac.th\"> วทิ ยาลยั เทคนิคจนั ทบุรี </a> </body> </html>
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 107 1) การเช่ือมโยงไปยงั e-mail การเชื่อมโยงไปยงั e-mail address เป็นการอาํ นวยความสะดวกใหก้ บั ผใู้ ช้ ในกรณีที่ตอ้ งการส่งจดหมาย ติดต่อสอบถาม ซ่ึงมีรูปแบบการใชค้ าํ สง่ั ดงั น้ี <a href=\"mailto: email address\"> ขอ้ ความ </a> ตัวอย่าง การเช่ือมโยงไปยงั e-mail <html> <head> <title> การเชื่อมโยงไปยงั e-mail </title> </head> <body> <a href= \"mailto:[email protected]\"> ติดต่อสอบถาม </a> </body> </html> 2) การเช่ือมโยงเพ่ือดาวนโ์ หลดไฟล์ การเช่ือมโยงเพ่ือดาวน์โหลด เป็นการอาํ นวยความสะดวกใหก้ บั ผเู้ ขา้ ใช้ งานเวบ็ ไซตเ์ รา กรณีท่ีตอ้ งการดาวน์โหลดเอกสาร มีรูปแบบการใชค้ าํ ส่งั ดงั น้ี <a href=\"ชื่อไฟลด์ าวน์โหลด\"> ขอ้ ความ </a> ตวั อย่าง การเช่ือมโยงเพ่ือดาวน์โหลดไฟล์ <html> <head> <title> การเชื่อมโยงเพื่อดาวน์โหลดไฟล์ </title> </head> <body> <a href= \"data.pdf\"> ดาวน์โหลดเอกสาร </a> </body> </html> 3) การเชื่อมโยงโดยใชร้ ูปภาพ การสร้างการเช่ือมโยงโดยใช้รูปภาพ ทาํ ให้เว็บเพจดูน่าสนใจ และ สื่อความหมายไดด้ ียิง่ ข้ึน จุดสังเกตเมื่อเราเล่ือนเมาส์ผา่ นที่รูปภาพที่สร้างการเชื่อมโยง จะมีรูปมือ ซ่ึงจะเช่ือมโยงไปยงั ตาํ แหน่งอ่ืน ท่ีกาํ หนดไว้ ซ่ึงมีรูปแบบดงั น้ี <a href=\"ตาํ แหน่งท่ีเชื่อมโยง\"> <img src=\"ช่ือสกลุ ไฟลร์ ูปภาพ\" alt=\"คาํ อธิบาย\"> </a>
หน่วยที่ 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 108 ตัวอย่าง การเชื่อมโยงโดยใชร้ ูปภาพ <html> <head> <title> การเชื่อมโยงโดยใชร้ ูปภาพ </title> </head> <body> <a href= \"http://www.google.com\"> <img src=\"pic1.png\" alt=\"การคน้ หาขอ้ มูล\"> </a> <a href= \" data.pdf \"> <img src=\"pic2.png\" alt=\"ดาวน์โหลดเอกสาร\"> </a> </body> </html> 4.3.7 กาํ หนดสีตัวอกั ษร และสีการเช่ือมโยง การกาํ หนดสีตวั อกั ษร และสีการเชื่อมโยงท่ีแสดงในเวบ็ เพจ จะใชข้ อ้ ความขีดเส้นใต้ ท่ีมีสี แตกต่างจากขอ้ ความธรรมดา เพอ่ื สงั เกตไดง้ ่าย ซ่ึงมีความแตกตา่ งกนั ไปตามสถานะ ดงั น้ี 4.3.7.1 สีของลิงคท์ ี่ยงั ไมเ่ คยถูกคลิก (link) 4.3.7.2 สีของลิงคท์ ี่เคยถูกคลิกไปแลว้ (vlink) 4.3.7.3 สีของลิงคต์ อนถูกคลิก (alink) ตวั อย่าง กาํ หนดสีตวั อกั ษร และสีการเช่ือมโยง <html> <head> <title> การกาํ หนดสีตวั อกั ษร และสีการเช่ือมโยง </title> </head> <body link=\"green\" vlink=\"pink\" alink=\"red\"> <a href= \"http://www.google.com\"> การคน้ หาขอ้ มูล </a> <a href= \" data.pdf \"> ดาวน์โหลดเอกสาร</a> </body> </html> ผลลพั ธ์ รูปท่ี 4-16 ตวั อยา่ งการกาํ หนดสีตวั อกั ษร และสีการเช่ือมโยง
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 109 4.4 บทสรุป HTML ยอ่ มาจากคาํ วา่ Hypertext Markup Language เป็ นภาษาหลกั ท่ีใชใ้ นการสร้าง เวบ็ ไซต์ โดยคาํ ส่ังในภาษา HTML จะทาํ หนา้ ที่ควบคุมการแสดงผลของขอ้ มูลในเวบ็ ไซต์ โดย คาํ สั่งที่ใชค้ วบคุมการแสดงผลใน HTML จะเรียกวา่ แท็ก ซ่ึงในแต่ละแทก็ ก็มีหนา้ ท่ีแสดงผล ตามรูปแบบของคาํ สง่ั ซ่ึงในการทาํ ใหเ้ วบ็ ไซตใ์ หน้ ่าสนใจ ตอ้ งมีการใชแ้ ทก็ สาํ หรับจดั และตกแต่ง ขอ้ ความใหส้ วยงาม มีสีพ้ืนชดั เจนเหมาะสม มีการเนน้ คาํ เนน้ ตวั อกั ษร และมีแท็กในการแทรก รูปภาพ การจดั วางเลยเ์ อาทใ์ ห้เป็ นระบบระเบียบ และรวมไปถึงการเช่ือมโยงหนา้ เวบ็ เพจ ใหส้ ามารถเชื่อมโยงไปยงั หนา้ ต่าง ๆ ไดอ้ ีกดว้ ย
หน่วยท่ี 4 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมภาษา HTML 110 บรรณานุกรม กงั วาน อศั วไชยวศิน และอรพนิ ประวตั ิบริสุทธ์ิ.**คู่มอื สร้างเวบ็ ไซต์ด้วย HTML5 CSS3&Java Script ฉบับสมบูรณ์.**กรุงเทพฯ*:*โปรวชิ นั่ ,*2556. จารุนนั ท*์ *เรืองกิจวณิชกลุ .**การสร้างเวบ็ ไซต์.**กรุงเทพฯ*:*ศนู ยส์ ่งเสริมวชิ าการ,*2557. บญั ชา ปะสีละเตสงั .**สร้างเวบ็ ไซต์ด้วย HTML5 ร่วมกบั CSS3 และJQuery.**กรุงเทพฯ*:* ซีเอด็ ยเู คชนั่ ,*2556. ปริญญา เสงี่ยมจิตร์.**พฒั นาเวบ็ ไซต์ให้เหนือช้ันด้วย HTML5 & CSS3.**กรุงเทพฯ*:* ซีเอด็ ยเู คชนั่ ,*2555. ผศ.ดร.วฤษาย์ ร่มสายหยดุ .**พฒั นาเวบ็ ไซต์ด้วย HTML5 ฉบับมืออาชีพ.**กรุงเทพฯ*:* ซีเอด็ ยเู คชนั่ ,*2556. ฝ่ ายตาํ ราวชิ าการคอมพิวเตอร์.**การสร้างเวบ็ เพจ HTML.**กรุงเทพฯ*:*ซีเอด็ ยเู คชนั่ ,*2555. เริงชยั **เรืองกิจวณิชกุล*และจารุนนั ท*์ *เรืองกิจวณิชกลุ .**การสร้างเวบ็ เพจด้วย HTML.** กรุงเทพฯ *:*ศูนยส์ ่งเสริมวชิ าการ,*2555. ศุภชยั **สมพานิช.**HTML 5 with CSS3 and jQuery.**กรุงเทพฯ*:*บริษทั ไอดีซีพรีเมียร์ จาํ กดั , 2556. Fabricatorz LLC.**ฟอร์แมต PNG.**[ออนไลน์] 2550.**[สืบคน้ วนั ที่ 25 กรกฎาคม 2557].** จาก https://openclipart.org/detail/4714/a-new-computer Kapook.**ฟอร์แมต GIF.**[ออนไลน์].**[สืบคน้ วนั ท่ี 25 กรกฎาคม 2557].**จาก http://glitter.kapook.com/content.php?lang=th&id=10118&category_id=183
Search
Read the Text Version
- 1 - 30
Pages:
