ชอ่ื วิชา การสรา งเว็บเพจดว ยภาษาเอชทีเอ็มแอล หนวยท่ี 4 ชือ่ หนว ย การเช่อื มโยง LINK รหสั วชิ า 20901-2004 ชื่อเรอื่ ง การสรา งลงิ ค / การลงิ คไ ปยงั ไฟล / การสรา งลิงคเ พ่อื สงอีเมล / การสรา งลงิ คไปยงั เว็บไซตภายนอก 1. สาระสำคญั เว็บเพจจำนวนนับลา นในอนิ เตอรเน็ต จะไมมีประโยชนเ ลยหากขาดการเชื่อมโยงถงึ กนั โดยลงิ ค (Link) ซึ่งชว ย ใหผ ูใชสามารถทอ งอนิ เตอรเ นต็ โดยการคลิก เพ่ือเปล่ยี นไปดหู นา เว็บตาง ๆ ซึ่งอาจจะอยูหนาเดียวกัน หรือหนา ใหม หรอื เวบ็ ไซตอ ่นื กไ็ ด นอกจากนี้เรายงั สามารถเชอ่ื มโยงผา นภาพกไ็ ด 2. สมรรถนะประจำหนว ย 1. การสรา งลงิ ค 2. การลิงคไ ปยงั ไฟล 3. การสรางลิงคเ พอื่ สง อเี มล 4. การสรางลิงคไ ปยงั เว็บไซตภายนอก 3. จุดประสงคการเรียนรู 1. สามารถแสดงความรูค วามเขาใจเกยี่ วกับหลักการออกแบบเว็บเพจ 2. บอกขั้นตอนในการสรา งลงิ ค 3. สามารถแสดงความรใู นการสรา งลงิ คเพอ่ื สงอเี มล 4. สาระการเรียนรู 1. การสรา งลงิ ค 2. การลงิ คไปยงั ไฟล 3. การสรางลงิ คเพ่อื สง อเี มล 4. การสรา งลงิ คไปยังเวบ็ ไซตภายนอก
ใบความรู หนวยที่ 4 ช่ือวชิ า การสรา งเวบ็ เพจดวยภาษาเอชทีเอม็ แอล รหัสวชิ า 20901-2004 ชื่อหนวย การเชือ่ มโยง LINK สัปดาหท ่ี 8-10 ชื่อเรือ่ ง การสรา งลงิ ค / การลิงคไปยงั ไฟล / การสรางลิงคเพอ่ื สงอเี มล / การสรา งลงิ คไ ปยังเว็บไซตภ ายนอก การสรา งลงิ ค การเชื่อมโยงหนาเว็บเพจ คือการกำหนดสวนของขอความที่ตองการ หรือรูปภาพที่ไดเลือกไวเพื่อเปนจุด เชื่อมโยงไปยังเนือ้ หาจุดอืน่ ๆ ซึ่งเนื้อหาที่เชื่อมโยงไปนัน้ อาจจะอยูภ ายในหนาเดียวกันหรืออยูคนละหนาก็ได หรือ อาจอยูคนละเว็บไซตกไ็ ด การเชื่อมโยงหนา เว็บเพจจะประกอบดว ยสว นประกอบ สำคญั 2 สว น คือ 1. จดุ ท่ีใชส ำหรบั เช่อื มโยง (Link) เปน สวนท่ีใชเปนจดุ เช่ือมโยงไปยงั เปาหมายปลายทางอาจเปน รูปภาพหรือ ขอ ความกไ็ ด 2. เปาหมาย (Target) เปนสวนปลายทางหรือจุดที่ตองการใหเชื่อมโยงมาถึง จะอยูสวนใดของเอกสารก็ได แลว แตผ เู ขียนโปรแกรมกำหนด รปู แบบคำสัง่ ของแทก็ a (Anchor) มีดงั น้ี การสรางลงิ ก <a> a ช่ือแท็ก href ชอ่ื แอตทรบิ ิวต อยภู ายในแท็ก <body>...</body> ตำแหนงแท็ก <a href=\"ชื่อไฟล\">ขอความท่ีปรากฏบนหนาเวบ็ </a> รูปแบบในการใชง าน ชื่อไฟลห รอื ตำแหนง ของเวบ็ เพจท่ีตอ งการเช่อื มโยง คาทีก่ ำหนดใหใ ช การสรา งลิงกสามารถสรางการเช่ือมโยงขอ มูลได 3 วิธี คอื 1. การเชอ่ื มโยงขอมลู ภายในหนาเว็บเดยี วกัน 2. การเชอื่ มโยงขอมูลในเว็บเพจหนา อน่ื 3. การเชื่อมโยงขอมูลในเวบ็ ไซตท่อี ่ืน 1. การเชื่อมโยงขอ มูลภายในเว็บหนาเดียวกนั หากเรามขี อ มูลภายในเว็บเพจเดียวกนั ทตี่ องการเชื่อมโยง โดยเมื่อมีการคลกิ ทล่ี งิ กใหเลื่อนขนึ้ บนหรอื ลงลางไป ท่ีตำแหนง ขอมูลน้ันอยู ใหเราใชคำสั่งดังนี้ ชอ่ื แอตทรบิ ิวต name ตำแหนงแอตทริ บวิ ต อยภู ายในแท็กเปด <a...> รูปแบบในการใชง าน <a href=\"jump\">...</a> (สรางจดุ ปลายทางช่ือ jump) <a href=\"#jump\">...</a> (เชื่อมโยงไปจุดปลายทางชือ่ jump) คาทกี่ ำหนดใหใช ชอ่ื จุดปลายทาง ทไ่ี มซ้ำชอื่ อื่นท่อี ยูใ นเวบ็ หนาเดียวกนั
ตัวอยา งการเขยี นโปรแกรมเชอ่ื มโยงขอ มูลภายในเว็บเพจ <body> <b>รายชือ่ เวบ็ ไซตท ี่นาสนใจ</b> คลิกเมาสเ พือ่ ไปสวนท่ีคณุ สนใจ<br> <!-- กำหนด Link กระโดดไปยังจดุ เชื่อมตาง ในเว็บเพจ --> <a href=\"#entertain\">เว็บไซตที่เกย่ี วกบั ความบันเทิง</a> <br> <a href=\"#family\">เวบ็ ไซตสำหรับครอบครวั และเดก็ </a> <br> <a href=\"#computer\">เว็บไซตด า นคอมพวิ เตอร< /a> <br> <hr> <!-- กำหนดชุดเชอ่ื ม --> <a name=\"entertain\">เว็บไซตท ีเ่ กี่ยวกับความบันเทงิ </a><br>...เน้อื หาเกีย่ วกบั ความบันเทิง <a name=\"family\">เวบ็ ไซตส ำหรับครอบครวั และเด็ก </a><br>... เน้อื หาเกี่ยวกบั ครอบครัวและเด็ก <a name=\"computer\">เว็บไซตดานคอมพิวเตอร </a><br>... เน้อื หาดา นคอมพิวเตอร </body> เมื่อเราดูผลลัพธท ีไ่ ดใ นบราวเซอร เมื่อคลิกท่ีลงิ กท ี่กำหนด จะกระโดดไปยังสว นที่ถกู ตั้งชือ่ เปนจดุ หมาย ปลายทาง (Target) การแสดงผล ภาพแสดงผลลพั ธ การเขียนโปรแกรมเช่อื มโยงขอ มูลภายในเว็บเพจ เมื่อคลิกที่ลิงก เว็บไซตจะเกิดการกระโดดไปที่จุดเชื่อมโยง โดยหนาเว็บจะเลื่อนขึ้นหรือลง ไปที่ตำแหนงจุด ปลายทางนั้น การเชื่อมโยงขอมูลในเวบ็ เพจหนาอื่น แตยังอยูภ ายในเว็บไซตเ ดียวกนั เราสามารถเชื่อมโยงเวบ็ เพจของ เรากับเว็บเพจหนา อื่นทอ่ี ยใู นเว็บไซตเดยี วกนั เชน ถาเรามเี วบ็ เพจอยู 3 หนา ท่ีตอ งการใหมกี ารเช่ือมโยงถงึ กนั ดังน้ี
ตวั อยา งการเชื่อมโยงกับเวบ็ เพจหนาอื่น ตัวอยา งตอไปนเ้ี ปนการใชล ิงกเชอื่ มโยงขอ มลู ในเว็บเพจหนาอ่นื โดยมีเวบ็ เพจเริม่ ตน คือ \"home.html\" ไปยัง หนาเวบ็ เพจอื่นดงั ตอไปนี้ เว็บเพจ \"page1.html\" ในไดเรกทอรี \"webpage\" ที่เปนไดเรกทอรขี องไดเรกทอรี project ที่เวบ็ เพจ \"home.html\" ถูกเกบ็ อยู เว็บเพจ \"page2.html\" และ \"page3.html\" ในไดเรกทอรเี ดียวกับเว็บเพจ \"home.html\" ตัวอยา งการเขียนโปรแกรมเช่อื มโยงกบั หนา เว็บเพจอื่น ที่ไฟล \"home.html\" <body> <a href=\"project/page1.html\">วิธีสรา งกำลงั ใจใหตวั เอง </a> <br> <a href=\"project/page2.html\">เพมิ่ สีสันใหช ีวิตโรยดวยกลีบกุหลาบย่งิ ขน้ึ </a> <br> </body> ในการกำหนดคาการเช่อื มโยงในแอตทริบิวต href เราจะใชว ธิ ีกำหนดการเชอื่ มโยงแบบ Relative Path Names ซงึ่ เปนวิธที ่นี ยิ มใชในการอา งองิ ไฟลเ็ วบ็ เพจ ไฟลเอกสาร ไฟลใหดาวนโหลดทเี่ ก็บอยูในเวบ็ ไซตเดียวกนั ตัวอยา งการเขยี นโปรแกรมเช่ือมโยงกับหนาเว็บเพจอ่ืน ท่ีไฟล \"page1.html\" <body> <a href=\"../home.html\">หนา เร่ิมตน </a> <br> <a href=\"page1.html\">วธิ สี รางกำลังใจใหต ัวเอง </a> <br> <a href=\"./page2.html\">เพ่ิมสีสนั ใหช วี ติ โรยดว ยกลบี กหุ ลาบยง่ิ ขน้ึ </a> <br> </body> จากโคด <a href=\"../home.html\">หนาเรม่ิ ตน </a> <br> จะสงั เกตไดวา จะมีการใช จุดสองจุดมาอา ง พาธของที่เก็บเว็บ ในทนี่ ้ี \"..\" (จดุ สองจดุ ) หมายถึงใหข นึ้ ไปอกี ไดเรกทอรหี นึง่ แลว อางองิ ไปยงั ไฟลเ วบ็ เพจช่อื วา \"home.html\" สวน จุดหนง่ึ คร้งั \".\" หมายถึงการอยูทไี่ ดเรกทอร่ปี จจบุ นั แลวลิงคไ ปยังไฟลที่ตอ งการคอื \"page2.html\"
การเช่ือมโยงขอมลู ในเว็บไซตท่อี ื่น เราสามารถเช่ือมโยงขอ มลู กบั เว็บไซตอ่ืนไดโ ดยการระบุ URL ของเวบ็ เพจที่ตองการในแทก็ <a href...> โดยมีรูปแบบ ดังน้ี <a href=\"URL ของเว็บไซตท ี่ตองการเช่อื มโยง\"> เชน <a href=\"http://www.microsoft.com\">...</a> เปน ตน ตัวอยา งการเช่อื มโยงไปยงั เวบ็ ไซตอ ่นื <body> <b>รายชื่อเวบ็ ไซตที่นาสนใจ</b> คลิกเมาสเ พอ่ื ไปสว นท่ีคณุ สนใจ<br> <a href=\"http://www.mtv.com\">MTV Online www.mtv.com </a> <br> <a href=\"http://www.discovery.com\">Discovery Channel www.discovery.com </a> <br> <a href=\"http://www.microsoft.com\">Microsoft Corporation www.microsoft.com </a> <br> </body> การเปดหนา เว็บเพ็จโดยใชแ อตทรบิ วิ ต target ช่อื แอตทรบิ วิ ต target ตำแหนง แท็ก อยภู ายในแทก็ เปด <a...> รปู แบบในการใชง าน <a href=\"http://www.google.com\" target=\"...\" >...</a> คาท่กี ำหนดใหใช _blank, _self, _parent, _top คา ทกี่ ำหนดใหใช ความหมาย _blank เปด หนาเว็บเพจในหนาตาง Browser ใหม _self เปดหนา เว็บเพจในหนา ตา ง Browser เดมิ และ Frame เดมิ _parent เปด หนา เวบ็ เพจในหนา ตาง Browser เดมิ _top เปดหนา เว็บเพจในหนา ตา ง Browser เดิมแบบเต็มหนา และยกเลิก frame ทั้งหมด หรอื จะใสเปนช่อื หนา ตางทีเ่ รากำหนด
การเชือ่ มโยงขอมูลโดยใชภ าพในการลิงค <img> เพือ่ ทำใหเ ว็บเพจดนู าสนใจ เราอาจใชภ าพ (Image) เปนลงิ ก เชือ่ มกบั เวบ็ เพจอื่นแทนการใชขอความธรรมดา การใชภาพเปนลงิ กเชื่อมไปยังเว็บเพจอื่นนั้นทำไดโดยการใชคำส่ัง ชอื่ แท็ก img ช่อื แอตทรบิ วิ ต src ตำแหนงแท็ก อยภู ายในแท็ก <a>...</a> รูปแบบในการใชงาน <img src=\"รปู ภาพท่ใี ชในการเช่ือมโยง Link\"> คาท่กี ำหนดใหใ ช ชอ่ื รปู ภาพทใ่ี ชเ ปน สัญลักษณในการเช่ือมโยง ตวั อยางการใชภ าพเปน จุดเชอ่ื มโยง <body> <b>คลกิ เมา สทีร่ ปู เพื่อไปยังเว็บไซตท ีต่ องการ</b><br> <a href=\"http://www.google.com\"><img src=\"google.jpg\"></a><br> <a href=\"http://www.facebook.com\"><img src=\"facebook.jpg\"></a><br> </body> เมื่อคลิกท่รี ปู ภาพ จะเปด หนา เว็บตามท่ตี องการ
ใบความรู หนว ยท่ี 4 ชอื่ วิชา การสรางเวบ็ เพจดวยภาษาเอชทเี อม็ แอล รหสั วชิ า 20901-2004 ชื่อหนวย การเช่ือมโยง LINK สัปดาหที่ 8-10 ชือ่ เร่อื ง การสรางลงิ ค / การลงิ คไ ปยังไฟล / การสรา งลงิ คเ พ่อื สงอเี มล / การสรางลงิ คไปยังเวบ็ ไซตภายนอก การสรางลงิ คไปยงั ไฟล Download การเชือ่ มโยงแบบดาวนโหลดนน้ั เมื่อผูใชทำการคลกิ เลือกลิงคก ็จะปรากฏหนา ตา งสำหรบั ดาวนโหลด โดยมกี าร กำหนด Tag ดังนี้ <a href= “FileName”>Text/ImageLink</a> FileName คือ ช่อื ไฟลทตี่ องการใหด าวนโ หลด โดยระบเุ ปน path/filename.extention ตวั อยา ง การสรางลิงคไปยงั ไฟล Download <html> <head> <title>การสรา งลงิ คไปยงั ไฟล Download</title> </head> <body> การสรางลิงคไ ปยังไฟล Download <br><br> <a href= “Unit_1.docx\">ดาวโหลดใบงาน หนว ยที่ 1 เรื่องความรทู วั่ ไปเกย่ี วภาษา HTML</a> </body> </html> ผลลัพธของโปรแกรม
ใบความรู หนว ยท่ี 4 ช่อื วิชา การสรางเวบ็ เพจดว ยภาษาเอชทเี อ็มแอล รหัสวชิ า 20901-2004 ชือ่ หนว ย การเช่ือมโยง LINK สปั ดาหที่ 8-10 ชื่อเร่ือง การสรา งลงิ ค / การลงิ คไปยังไฟล / การสรา งลิงคเ พอ่ื สงอีเมล / การสรางลงิ คไ ปยังเวบ็ ไซตภายนอก การสรางลงิ คเ พ่ือสง อเี มล การเชื่อมโยงแบบอเี มล การเชือ่ มโยงแบบอกี เมล เม่อื เราคลิกแลวจะปรากฏหนา ตางสำหรบั สงอีเมล โดยเราสามารถกำหนด รายละเอยี ดตาง ๆ ของการสง อเี มลไ ดดงั นี้ <a href= “mailto:EmailAddress?Subject=SubjectText&CC=CCEmail&BCC=BCCEmail& body=Message Text”>Text/ImageLink</a> EmailAddress คือ ชื่ออเี มลท่ีเราตองการใหสง SubjectText คอื หัวขออเี มล CCEmail คอื อีเมลสำเนาทีเ่ ราตองการใหส ง ถึง BCC คือ อีเมลส ำเนาท่ตี อ งการใหตอบกลบั Message Text คือ ขอความในอเี มล Text/ImageLink คอื ขอ ความหรอื รูปภาพทีต่ องการทำลงิ ค ตัวอยาง การเชื่อมโยงแบบอเี มล <html> <head> <title>การสรา งลงิ คเ พ่อื สง อีเมล</title> </head> <body> <a href= \"mailto:[email protected]?Subject=Subject&CC=CCEmail& BCC=BCCEmail&body=Message Text\">สง E-mail ถงึ ครโู กศล แกว รตั น< /a> </body> </html> ผลลัพธ
Search
Read the Text Version
- 1 - 9
Pages:
