สร้างลิงก์ (Links) หน้าก่อน หน้าถัดไป HTML Links ลิงก์มีอยู่ทุกเว็บทั่วโลก ทำหน้าที่เมื่อถูกคลิกแล้วเบราว์เซอร์จะเปิดหน้าเว็บตามที่ได้ระบุ URL ไว้ ไฮเปอร์ลิงก์ (Hyperlinks) HTML Links เราเรียกว่า ไฮเปอร์ลิงก์ (Hyperlinks) เราสามารถคลิกลิงก์แล้วเบราว์เซอร์จะเปิดหน้าใหม่ตาม URL ของลิงก์นั้น ถ้าคุณเอาเมาส์ไปวางไว้บนลิงก์ เมาส์จะเปลี่ยนรูปจากลูกศรเป็นมือเล็กๆ แทน ลิงก์ไม่จำเป็นต้องเป็นข้อความเท่านั้น สามารถเป็นได้ทั้งรูปภาพ หรือ Element อะไรก็ได้ Syntax การสร้างลิงก์เราใช้ Tag <a> <a href="url">...ข้อความลิงก์...</a> ตัวอย่าง ลองเขียนโค้ด Attribute href ระบุจุดหมายปลายทางของลิงก์ (http://www.code-th.com/) ข้อความลิงก์ (This is link) คือส่วนที่มองเห็นบนหน้าจอเบราว์เซอร์ คลิกบนลิงก์ก็จะทำให้เบราว์เซอร์เปิดหน้าเว็บใหม่ตาม URL ที่ระบุไว้ เมื่อใดก็ตามที่คุณสร้างลิงก์ ไปยังเป้าหมายที่เป็นโฟลเดอร์ (ไม่ใช่หน้าเอกสาร หรือไฟล์ html) ควรจะปิดท้ายที่อยู่นั้น ด้วยเครื่องหมาย forward slash (/) ด้วยเสมอ เนื่องจาก ถ้าไม่มีเครื่องหมายสแล็ชนี้แล้ว จะทำให้เว็บเซิร์ฟเวอร์นั้น เกิดค่า hit เพิ่มขึ้นอีกหนึ่งครั้ง เป็นผลให้เซิร์ฟเวอร์ต้องทำงานมากขึ้น และยังทำให้ ข้อมูลสถิติผิดพลาดไป Local Links Local Links คือ ลิงก์ที่มีเป้าหมายในเว็บไซต์ตัวเอง สามารถระบุโฟลเดอร์ได้เลย (โดนไม่ต้องมี http://www....) ตัวอย่าง ลองเขียนโค้ด สีของลิงก์ ค่าเริ่มต้นของทุกๆเบราว์เซอร์ คือ ลิงก์ที่ยังไม่เคยคลิก ขีดเส้นใต้และสีฟ้า ลิงก์ที่เคยคลิกแล้ว ขีดเส้นใต้และสีม่วง ระหว่างกดลิงก์ ขีดเส้นใต้และสีแดง คุณสามารถเปลี่ยนแปลงค่าได้โดยใช้ CSS ตัวอย่าง ลองเขียนโค้ด Attribute: target Attribute target เอาไว้ระบุเจาะจงว่าจะเปิดหน้าเว็บที่ไหน โดยใส่ค่าได้เพียงค่าเดียว ดังตัวอย่างต่อไปนี้ _blank - เปิดในหน้าต่างใหม่หรือในแทปใหม่ _self - เปิดในหน้าต่างเดิมและเฟรมเดิม (ค่าเริ่มต้น) _parent - เปิดในหน้าต่างเดิม _top - เปิดในหน้าต่างเดิมแบบเต็มหน้าและยกเลิกเฟรมทั้งหมด ชื่อเฟรม - เปิดในเฟรมทีระบุชื่อ ตัวอย่าง ลองเขียนโค้ด ทำรูปให้เป็นลิงก์ ตัวอย่าง ลองเขียนโค้ด เบราว์เซอร์ IE บางเวอร์ชั่นอาจแสดงกรอบรูปเมื่อรูปกลายเป็นลิงก์ แก้ได้โดยกำหนดค่าใน style="border:0;" สร้างบุ๊คมาร์ค (Create a Bookmark) บุ๊คมาร์คไว้ใช้สำหรับเราต้องการกระโดดไปที่หัวข้อหรือส่วนที่เราสนใจของเว็บไซต์ได้เลย บุ๊คมาร์คจะเป็นประโยชน์มากหากเว็บไซต์ของคุณยาวมาก การสร้างบุ๊คมาร์ค ขั้นแรกคุณต้องกำหนด id ใน Element ก่อน จากนั้นสร้างลิงก์ แล้วกำหนดค่าใน Attribute href เป็น # แล้วตามด้วยชื่อ id ที่เราตั้งไว้ ตัวอย่าง ขั้นตอนแรก กำหนด id ใน Element ก่อน ขั้นตอนที่สอง สร้างลิงก์ในหน้าเดียวกัน แล้วกำหนดค่าใน Attribute href เป็น # แล้วตามด้วยชื่อ id ที่เราตั้งไว้ หรือ ถ้าเกิดลิงก์และบุ๊คมาร์คอยู่คนละหน้า ให้เราใส่ #id ตามหลัง url ลองเขียนโค้ด External Paths ลิงก์ไปยังหน้าเว็บอื่นสามารถทำได้โดยใส่ URL เต็มของเว็บนั้นๆ ตัวอย่าง ลองเขียนโค้ด ลิงก์ไปยังหน้าเว็บตัวเอง สามารถระบุที่อยู่ของไฟวเดอร์และไฟล์ได้เลย ตัวอย่าง ลองเขียนโค้ด ลิงก์ไปยังหน้าเว็บตัวเอง และไฟล์อยู่ไฟวเดอร์เดียวกัน ก็ระบุชื่อไฟล์ได้เลย ลองเขียนโค้ด บทสรุป ใช้ <a> เพื่อสร้างลิงก์ ใช้ Attribute href เพื่อระบุ URL ใช้ Attribute target เพื่อกำหนดวิธีเปิดลิงก์ ใช้ <img> ภายใน <a> เพื่อทำรูปให้เป็นลิงก์ ใช้ Attribute id (id="value") เพื่อกำหนดบุ๊คมาร์ค ใช้ Attribute href (href="#value") เพื่อลิงก์ไปยังบุ๊คมาร์ค หน้าก่อน หน้าถัดไป