เชือ่ มโยงเว็บเพจด้วยลงิ ค์(Link) ครูนรศิ รา ทองยศ
Contents การสร้างลิงค์ <a> 12 ใช้ภาพเป็นลิงค์ <img>3 การลิงคไ์ ปไฟล์อ่ืนๆทไ่ี มใ่ ชเ่ อกสาร HTML4 การสรา้ งลงิ ค์เพ่อื ส่งอีเมลล์5 กาหนดสีของลงิ ค์6 การสรา้ งลงิ ค์แบบ rollover
การสร้างลิงค์ <a> ตัวอยำ่ ง <body> รปู แบบของคำสงั่ แทก็ <a> มดี งั นี้ <body> <a href=“ <a href=“ชือ่ ไฟล์หรอื ตำแหนง่ ของหนำ้ เวบ็ เพจ\"> http://www.google.com\"> ข้อควำมอะไรก็ได้ </a> google </body> </a> </body>ส่วนเช่อื มโยงหรอื ค่ำของ href=“…” นัน้ สำมำรถเชื่อมโยงขอ้ มลู ได้ 3 วิธีดว้ ยกนั • กำรเชือ่ มโยงข้อมูลภำยในหนำ้ เว็บเพจเดียวกนั • กำรเชอื่ มโยงขอ้ มลู ในหนำ้ เว็บเพจอืน่ • กำรเชือ่ มโยงขอ้ มลู ในเว็บไซต์อ่ืน
การเชอ่ื มโยงข้อมลู ภายในเวบ็ เพจเดยี วกัน <body> <a href=\"#entertain\">entertain</a> <a href=\"#family\">Family</a> <a href=\"#computer\">Computer</a> <br><br><br> <hr> <a name=\"entertain\">This is entertain</a><br><br><br><br><br><br> <a name=\"family\">This is family</a><br><br><br><br><br><br> <a name=\"computer\">This is computer</a><br><br><br><br><br><br><br> </body>การคลิกที่ ลิงค์ ซ่งึ ได้ต้ังคา่ ของ href ไวเ้ ปน็ “#ชื่อของแทก็ ” <a> ท่เี ปน็เปา้ หมาย จะกระโดดไปยังจุดเชือ่ มโยงทม่ี ีชอ่ื ตรงกับค่า ช่ือของแท็ก
การเช่ือมโยงขอ้ มลู ภายในเว็บเพจเดยี วกนั กดตรงนี ้ กดตรงนี ้ขอ้ มูลทง้ั หมดทม่ี ใี นหนา้ เว็บเพจ Orjix
การเช่ือมโยงขอ้ มูลไปหนา้ เว็บเพจอื่น แตอ่ ยูใ่ นเว็บไซตเ์ ดียวกัน เราสามารถเชอ่ื มโยงขอ้ มูลไปยงั เว็บเพจอนื่ ใดด้ งั นี้เริ่มจากสร้างหน้าเว็บเพจไว้ใน directory หลงั จากน้ันเขยี นโค้ดเชื่อมโยงดงั น้ีเดยี วกัน <body>ในตวั อยา่ งนี้ เราได้สรา้ งไฟล์ html ขึ้นมาสามไฟล์ <a href=\"page2.html\">คือ first_html, page2 และ page3 go to page2โดยวางไว้ใน desktop เหมือนกัน </a><hr> <a href=\"page3.html\"> go to page3 </a> </body>ผลทไ่ี ดค้ อื ในตัวอย่าง เรากดลิงค์ทช่ี ื่อ ว่า go to page2 ซึ่ง กดลงิ คน์ ี้ เช่ือมโยงไปที่ page2.html เชน่ เดียวกนั กบั ลิงค์ go to First_html.html page3 ซ่ึงเชอื่ มโยงไปท่ี page3.html Orjix
การเชื่อมโยงขอ้ มูลไปหน้าเวบ็ เพจอ่นื แต่อยู่ในเวบ็ ไซต์เดียวกนั ในกรณที ีไ่ ฟล์ html ของเราอยคู่ นละ directory เราจะใช้วธิ ีเชื่อมโยงคล้ายกับวิธเี ดิม เพียงแต่เปลีย่ นการอ้างถงึ ไฟลป์ ลายทางใหม่ เช่น สิง่ ที่เราตอ้ งทาเพ่มิ ก็คอื เปล่ยี นการอ้างถงึ ไฟล์ปลายทางใหม่เรานาไฟล์ page2 กับ page3 ไปไว้ใน <body>Folder ‘next page’ <a href=“ next page/page2.html\"> go to page2 </a><hr> <a href=“ next page/page3.html\"> go to page3 </a> </body>
ทาความเข้าใจกับ relative path names การอา้ งถงึ directory แบบ hierachy อ้างถึง directory สงู กวา่ ด้วย “../ชอ่ื ไฟล์” A อา้ งถึง directory ต่ากว่าด้วย “ชือ่ folder/ชอื่ ไฟล์”BCDEF จาก B → E เชือ่ มโยงโดยใช้ E/page.html จาก B → A เช่ือมโยงโดยใช้ ../page.html จาก B → C เชื่อมโยงโดยใช้ ../C/page.html จาก D → F เชอื่ มโยงโดยใช้ ../B/F/page.html
การเชื่อมโยงขอ้ มลู ไปเวบ็ ไซต์อน่ื เราสามารถเช่ือมโยงข้อมูลไปท่เี ว็บไซตอ์ นื่ ไดโ้ ดยการระบุ url ของ เวบ็ เพจท่ตี ้องการไวภ้ ายในแท็ก <a href=“…”> ดังน้ี<body> กดลงิ ค์นี้ <a href=“http://www.google.com\"> google </a> <a href=“http://www.yahoo.com\"> yahoo </a></body>*โดยปรกตจิ ะเปดิ เว็บเพจใหมใ่ นbrowser เดมิ แต่เราสามารถกาหนดให้เปดิ ในหนา้ browser ใหมไ่ ด้ดงั นี้<a href=“…”target=“_blank”>……….</a>
ใชภ้ าพเปน็ ลิงค์ เพอื่ ทาใหเ้ ว็บเพจดูน่าสนใจ เราอาจใชภ้ าพเป็ นลงิ คแ์ ทนการใชข้ อ้ ความ แบบเกา่ ไดโ้ ดย การเช่อื มโยงกับไฟลร์ ูป <img src=“ชื่อและตาแหน่งของรปู \"/> เช่น <img src=\"spring09.gif\"/> โดยที่แท็ก <img> จะต้องอยู่ภายใต้แทก็ <body>จากนนั้ เราจะเชอื่ มโยงไปยังเว็บเพจอน่ื โดยใสแ่ ทก็ <img> ไวภ้ ายใต้แท็ก<a href=“…”> ดังเช่นตัวอยา่ งน้ี<body> กดทร่ี ูปภาพนี้ <a href=\"http://www.google.com\"> <img src=\"spring09.gif\"/> </a></body>เราจะเช่อื มโยงไปยงั เว็บ google.com โดยใชร้ ูปภาพ spring09.gifแทนขอ้ ความ ดังนน้ั เม่อื เราคลิกทีร่ ูปภาพจะเปน็ การเชอ่ื มโยงไปท่เี วบ็ เพจhttp://www.google.com
การลงิ ค์ไปยังไฟลอ์ ื่นๆ ที่ไม่ใช่เอกสาร HTML ไฟลร์ ูปภาพ ไฟล์โปรแกรม ไฟล์ซิป(zip) ไฟล์เสยี ง หรอื ไฟลม์ ลั ตมิ เี ดีย มีลกั ษณะการใช้งานคล้ายกบั ลงิ คอ์ ่นื ๆ หากเป็นรูป browser กจ็ ะเปิดใหโ้ ดยอตั โนมัติ สว่ นไฟล์ อืน่ ๆเราจะพบกบั หน้าจอสาหรับดาวนโ์ หลดวิธีการเรียกใช้ <a href=“ชอ่ื ไฟลอ์ น่ื ๆ”> เชน่ <body> <a href=\"2547097.jpg\">image</a><hr> <a href=\"Retro Avatars.zip\">zip file</a><hr> <a href=“[Soulciety_sub]PERSONA -Trinity Soul -01[Th][1280x720 XviD][7269C185].avi\">video</a> </body>
การลงิ คไ์ ปยังไฟล์อนื่ ๆ ท่ไี มใ่ ชเ่ อกสาร HTML ตวั อยา่ งการเช่อื มโยงไปยงั ไฟล์อน่ื ๆ
การสร้างลิงค์เพ่ือส่ง Email <a href=“mailto: [email protected]”>ขอ้ ความ</a> เช่น <bถoาd้ เyรา>ตอ้ งการใหผ้ ูเ้ ยยี่ มชมเว็บเพจของเราสามารถตดิ ต่อกบั เราได ้ ให้ <aเรhาrสeรfา้=ง“ลงิmคaท์ iชี่ltไีo้ ป:ยrงั aอ_เี มtลaล_แ์ pอoดoเดmรส@ดhงั oนtี้ mail.com\">To. P' bank</a> </body> จะไดห้ นา้ เว็บเพจแบบน้ี
การสร้างลิงค์เพ่ือส่ง Email คลกิ ทลี่ ิงคน์ ี้ จะเป็นการเปดิ หน้าตา่ ง ของ microsoft outlook ซง่ึ เปน็ โปรแกรมทใ่ี ชใ้ นการส่ง อีเมลล์ข้นึ มา
กาหนดสขี องลงิ ค์ โดยปรกตลิ งิ คใ์ นเว็บเพจจะใชข้ อ้ ความขดี เสน้ ใตท้ มี่ สี ตี ่างไปจาก ขอ้ ความธรรมดา เพอ่ื ใหผ้ ูใ้ ชส้ งั เกตง่าย สขี องลงิ คจ์ ะตา่ งกนั ไปตาม สถานะดงั นี้ • สขี องลิงคท์ ีย่ ังไมเ่ คยถูกคลกิ (Hyperlink) : link • สีของลงิ ค์ที่เคยถกู คลิกไปแล้ว (Visited link) : vlink • สีของลิงคท์ ี่กาลังถกู คลกิ (Active link) : alink โดย attribute เหล่านีเ้ ราจะใสไ่ ว้ภายใต้แท็ก <body><body link=\"green\" vlink=\"blue\" alink=\"red\"> ลงิ คท์ ย่ี งั ไม่ถกู คลกิ <a href=\"#\">normal link</a><br> <br> ลงิ คท์ ถ่ี ูกคลกิ แลว้ <a href=\"#\">visited link</a><br> <br> ลงิ คท์ กี่ าลงั ถูกคลกิ <a href=\"#\">active link</a></body>
การสร้างลิงคแ์ บบ rollover ในสว่ นนจี้ ะเปน็ การเพ่ิมลูกเล่นใหก้ บั รูปภาพ โดยเมอื่ เรานาเมา้ ส์ไปวางไว้ บนรปู ภาพ รปู ก็จะเปลยี่ นไปเปน็ อีกรปู หนึง่ และเมอ่ื นาเม้าส์ออกก็จะ กลบั มาเปน็ รปู เดมิ การทางานในสว่ นนเี้ ราต้องเขียนคาส่ังของ script เพิม่ เติมในส่วนทเ่ี รียกว่า Event handler หรือคาส่งั ตอบสนองเหตุการณ์ Attribute ที่ใช้คือ onmouseover และ onmouseout โดยประกาศไว้ภายใตแ้ ทก็ <a> Onmouseover : คาสัง่ ทางานเมื่อวานเมา้ ส์เหนอื วตั ถุ Onmouseout : คาส่ังทางานเมอื่ เลื่อนเมา้ ส์ออกนอกวตั ถุตวั อยา่ ง <body> <a href=\"#\" onmouseover=\"pic.src='after.jpg'\" กำหนดใหเ้ ปลย่ี นรปู ภำพเม่ือวำงเม้ำเหนือ onmouseout=\"pic.src='before.jpg'\"> รูปเดมิ <img id=\"pic\" src=\"before.jpg\"/> กำwหนwดwร.rปู เปล่ยี นรูปภำพเม่อื เลอื่ นเมำ้ ส์ </a><br><br> ออoกngre </body> กำหaนn.ดcรoปู ภำยเริ่มตน้ m
การสรา้ งลิงคแ์ บบ rollover นำเมำ้ สไ์ ปวำงบนรูป onmouseoverbefore.jpg After.jpg เล่ือนเมำ้ ส์ออกจำกรปู onmouseout*ข้อควรระวัง* หำกเรำไมใ่ ส่ attribute ‘onmouseout’เวลำเรำเลอ่ื นเม้ำส์ออกจำกรปู รปู จะไมเ่ ปล่ยี นกลบั เป็นรปู เดมิ
เจอกันใหม่หวั ข้อหนำ้
Search
Read the Text Version
- 1 - 18
Pages:
