More Related Content
Similar to การสร้างลิงค์ (20)
การสร้างลิงค์
- 2. การเชื่อมโยงหน้าเว็บเพ็จ การเชื่อมโยงหน้าเว็บเพ็จ คือการกำหนดส่วนของข้อความ รูปภาพ หรือสัญลักษณ์ ไว้เป็นจุดเชื่อมโยงเพื่อเชื่อมโยง (Link) ไปยังเอกสาร ที่อยู่ในตำแหน่งอื่น ๆ เช่น หน้าเดียวกัน หน้าอื่น ๆเว็บเพ็จหรือเว็บไซด์อื่น ๆ การเชื่อมโยงหน้าเว็บเพ็จได้นั้นจะต้องมีการกำหนดจุดที่ใช้ เชื่อมโยงซึ่งอาจจะเป็นรูปภาพหรือสัญลักษณ์ก็ได้ นอกจากนี้จะต้องมีการกำหนดเป้าหมาย (Target) ปลายทางที่ต้องการเชื่อมโยงไปถึงซึ่งจะอยู่ ตำแหน่งใดจะต้องกำหนดโดยผู้เขียนโปรแกรม HTML สามารถเชื่อมโยง (LINK) ไปยังตำแหน่งต่าง ๆ ได้ เพื่ออำนวยความสะดวกในการใช้งาน ทำให้ค้นหาข้อมูลได้ง่าย เราสามารถ เชื่อมโยงไปยังเอกสารที่อยู่หน้าเดียวกัน เอกสารที่อยู่คนละหน้า ไปยังเว็บเพ็จหรือเว็บไซด์อื่น ๆ ข้อดีของการเชื่อมโยงคือทำให้เราไม่ต้องเลื่อนหน้า เอกสารบ่อย ๆ เมื่อสนใจข้อมูลหัวข้อใดก็ทำการคลิกที่ตำแหน่ง Hyperlink ก็สามารถเชื่อมโยงไปยังหัวข้อที่ต้องการได้ 2
- 3. 3 1. การเชื่อมโยงเว็บเพจ สามารถทำได้ 3 ลักษณะ 1.การเชื่อมโยงภายใน เว็บเพจเดียวกัน 2. การเชื่อมโยงไปยังเว็บเพจอื่น 3. การเชื่อมโยงไปนอก เว็บไซต์
- 5. 5 1.1 การเชื่อมโยงภายใน เว็บเพจเดียวกัน ขั้นตอนแรก กำหนดจุดเป้าหมายในการเชื่อมต่อภายในเว็บเพจเดียวกัน โดยใช้คำสั่ง ชื่อแท็ก: A แอตทริบิวต์ : Name รูปแบบ : <A Name =”ตั้งชื่อจุดเป้าหมาย”>...</A> ขั้นตอนสอง กำหนดจุดเชื่อมโยง โดยใช้คำสั่ง ชื่อแท็ก: A แอตทริบิวต์ : Name รูปแบบ : <A Name =”#ชื่อจุดเชื่อมโยง”>...</A>
- 6. ตัวอย่าง <a href="#inpage"> ลิงค์ในหน้าเดียวกัน1 </a><br> <a href="#inpage2"> ลิงค์ในหน้าเดียวกัน2 </a><br> <a href="#inpage3"> ลิงค์ในหน้าเดียวกัน3 </a><br><br><br><br><br><br><br><br><br> <a name=inpage>ลิงค์ในหน้าเดียวกัน การลิงค์ข้อมูลในหน้าเว็บเพจเดียวกันทำได้โดยการใช้คำสั่ง a name<br> <br>จากผลการรันโปรแกรม จะเห็นว่าเราสามารถคลิกเมาส์ที่บริเวณหัวข้อที่ต้องการแล้วสามารถเชื่อมโยงไปยังรายการที่ต้องการได้ แต่เมื่อเชื่อมโยงไปแล้วเราไม่สามารถกลับมาที่เดิมได้เพราะไม่มีจุดเชื่อมโยงกลับมาที่เดิม วิธีแก้คือให้คลิกที่ปุ่ม Backหรือเลื่อน Scroll Bar ขึ้นด้านบน แต่ถ้าจะให้ดู ดีกว่านี้คือให้เขียนโปรแกรมสร้างจุดเชื่อมโยงขึ้น โดยทำการปรับปรุงโปรแกรมตัวอย่างที่2ดังนี้ <br></a> <a name=inpage2>ลิงค์ในหน้าเดียวกัน<br> ...................................................................................................................<br> ..................................................................................................................<br> </a> <a name=inpage3>ลิงค์ในหน้าเดียวกัน ///////////////////////////////////////////////////////////////////////////////<br> /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////<br> <a href="#top">บน </a> </a> 6
- 7. 7 1.2 การเชื่อมโยงไปยังเว็บเพจอื่น ชื่อแท็ก: A ชื่อแอตทริบิวต์: Href รูปแบบ : <A Href =”ที่อยู่ของเว็บเพจ”>จุดเชื่อมโยง</A> การกำหนด target คือการกำหนดการปรากฏหรือการแสดงหน้าเว็บเพจของจุดเชื่อมโยง Target ที่นิยมใช้ คือ _blank เป็นการเปิดหน้าเว็บเพจที่เชื่อมโยงในในหน้าต่างใหม่ _parent เป็นการเปิดหน้าเว็บเพจที่เชื่อมโยงในหน้าต่างเดิม ตัวอย่าง เช่น <a href="test2.html"target=_blank> ลิงค์ไปหน้าเว็บเพจอื่น </a>
- 8. 8 1.3 การเชื่อมโยงไปนอกเว็บไซต์ ชื่อแท็ก: A ชื่อแอตทริบิวต์: Href รูปแบบ : <A Href =”ชื่อไฟล์หรือเว็บไซต์”>ข้อความ</A>
- 9. 9 2. การเชื่อมโยงด้วยรูปภาพ ชื่อแท็ก: A รูปแบบ : <A Href =”ชื่อไฟล์หรือเว็บเพจ”> <img src=”ชื่อไฟล์รูปภาพ”width=”ความกว้าง” height=”ความสูง” border=”ระยะเส้นขอบ”></A> ตำแหน่งที่ใช้: อยู่ระหว่างแท็ก <Body> ตัวอย่าง เช่น <a href=“http://www.maechaischool.ac.th"target=_blank> โรงเรียนแม่ใจวิทยาคม </a> <a href="http://www.click.com"><img src="images/click.jpg" width="300" height="300" /></a>
- 10. 10 3. กำหนดสีของจุดลิงค์ ชื่อแท็ก: Body รูปแบบ : <Body n = ชื่อสีมาตรฐาน (n หมายถึง Text,Link,VLink,Alink)> Text คือ กำหนดสีตัวอักษรปกติ Link คือ กำหนดสีตัวอักษรก่อนมีการเชื่อมโยง VLink คือ กำหนดสีจุดเชื่อมโยงหลังจากคลิกใช้งานแล้ว ALink คือ กำหนดสีตัวอักษรขณะถูกเลือก ตำแหน่งที่ใช้: อยู่ระหว่างแท็กเปิด <Body>
- 11. 11 4. จุดเชื่อมโยงไปยังอีเมล์แอดเดรส สามารถสร้างจุดเชื่อมโยงไปยังอีเมลแอดเดรสได้โดยกำหนดค่าแอตทริบิวต์Href ในรูปแบบ “mailto: ชื่อแท็ก: A แอตทริบิวต์: Href รูปแบบ : <a href =”mailto:ชื่ออีเมลแอดเดรส”>...</a> <a href=”mailto:schollmanage4@gmail.com”>...</a>
- 12. 12 6. การกำหนดหน้าต่างเป้าหมาย การกำหนดหน้าต่างเป้าหมายได้โดยเพิ่มแอตทริบิวต์ Target เข้าไปในแท็ก A ชื่อแท็ก: A แอตทริบิวต์: Href รูปแบบ : <a href =”ชื่อไฟล์หรือเว็บเพจ Target= ”ชื่อของหน้าต่างเป้าหมาย”>...</a> ตำแหน่งที่ใช้: อยู่ระหว่างแท็ก <A>
