In html, บทความทั้งหมด

คอร์สออนไลน์ส่วนนี้ ขอกล่าวถึงวิธีการสร้างลิงก์ ด้วยแท็ก <a> และการการแสดงภาพบนเว็บเพจโดยใช้แท็ก <img> ซึ่งทั้ง 2 แท็กนี้ ถือว่าเป็นหัวใจสำคัญไม่แพ้การแสดงข้อความบนเว็บเพจเลย เพราะ หากเว็บเพจไม่มีลิงก์ก็ไม่สามารถเชื่อมโยงไปยังส่วนอื่นๆ ของเว็บไซต์ และถ้าเว็บไซต์ไม่มีภาพ เว็บไซต์ดังกล่าวก็จะไม่มีความน่าสนใจใดๆ เลย

แสดงรูปภาพด้วยแท็ก <img>

รูปภาพถือว่าเป็นหัวใจสำคัญบนเว็บเพจ เพราะการใช้ภาพช่วยทำให้เว็บเพจสวยงาม น่าสนใจ ดึงดูด และช่วยให้การท่องเว็บไซต์สามารถทำได้ง่าย วิธีแทรกรูปภาพลงบนเว็บเพจจะใช้แท็ก <img> โดยกำหนดพาร์ทและชื่อรูปภาพไปที่ Attribute ที่ชื่อว่า src (ย่อมาจากคำว่า source)

ในบางครั้ง รูปภาพอาจไม่สามารถแสดงผลได้ เช่น อินเทอร์เน็ตช้าเกินไป หรือเกิด error ในการนำเอาภาพมาแสดง เราจะต้องกำหนดข้อความที่จะนำมาใช้แทนรูปภาพด้วย โดยกำหนดข้อความลงไปใน alt

นอกจากนั้นเรายังสามารถกำหนด title เพื่อใช้อธิบายเกี่ยวกับรูปภาพ โดยเมื่อผู้ใช้เลื่อนเมาส์ไปยังรูปภาพ ก็จะพบข้อความปรากฎไว้ที่ Title ด้วย

และต่อไปนี้คือตัวอย่างการแสดงรูปภาพบนเว็บเพจ ซึ่งในตัวอย่างได้กำหนดโค้ตให้แสดงรูปภาพอยู่ตรงกลางหน้าจอ

เมื่อเปิดโค้ตบนบราวเซอร์ เราก็จะพบรูปภาพแสดงบนเว็บเพจตามต้องการ ดังรูป

thaidemy-html-56

สร้างลิงก์ด้วยแท็ก <a>

ลิงก์ (Link) คือส่วนประกอบสำคัญของเว็บเพจ เป็นการเชื่อมโยงเว็บเพจเข้าด้วยกันให้กลายเป็นเว็บไซต์ รวมถึงเป็นส่วนสำคัญที่ใช้เชื่อมโยงหลายๆ เว็บไซต์ให้กลายเป็นอินเทอร์เน็ตด้วย

ลิงก์สามารถแบ่งได้เป็น 2 แบบ ดังนี้

  • ลิงก์ระหว่างเว็บเพจ กรณีแรกนี้ หากผู้ใช้คลิกที่ลิงก์ บราวเซอร์ ก็จะแสดงเว็บเพจปลายทางตามต้องการ
  • ลิงก์ไปยังเว็บเพจเดียวกัน กรณีนี้ เมื่อผู้ใช้คลิกที่ลิงก์ บราวเซอร์ก็จะเลื่อนไปเอลิเมนต์ หรือบริเวณที่กำหนด ตัวอย่างเช่น เว็บเพจที่มีข้อมูลยาวๆ เมื่อเรา scroll หน้าจอลงมาด้านล่างก็จะพบลิงก์สำหรับเลื่อนไปยังด้านบน เป็นต้น

แท็ก <a> จะต้องกำหนดแท็กเปิดและแท็กปิด และต้องกำหนดข้อความที่แสดงบนลิงก์ด้วย เช่น <a>คลิกตรงนี้</a> นอกจากนั้น เราก็ต้องกำหนดปลายทางด้วยเสมอ โดยกำหนดค่าลงใน href  เช่น <a href="url">คลิกตรงนี้</a>

ต่อไปนี้เป็นตัวอย่างการสร้างลิงก์อย่างง่ายๆ ด้วยแท็ก <a>

เมื่อนำเอาโค้ตข้างบนไปเปิดบนบราวเซอร์ เราก็จะพบข้อความธรรมดา และพบข้อความที่เป็นลิงก์ ดังรูป

thaidemy-html-57

ลิงก์ไปยังแท็กซึ่งอยู่ในเว็บเพจเดียวกัน

จากที่ผ่านมาเราทราบกันไปแล้วว่า href ที่อยู่ในแท็ก <a> ใช้เพื่อกำหนดปลายทางของลิงก์ แต่สิ่งที่ควรทราบเพิ่มเติม คือ ปลายทางที่เราใช้กับ href นั้นมีอยู่ด้วยกัน 2 แบบ ดังนี้

  • ปลายทางเป็นเว็บเพจอื่นๆ จะกำหนดค่า url ลงไปใน href เช่น <a href=”https://google.com”>google</a>
  • ปลายทางที่อยู่ในเว็บเพจเดียวกัน จะกำหนดค่า id ลงไปใน href เช่น <a href=”#id”>ไปยังแท็กที่กำหนด</a> โดยใส่เครื่องหมาย # ตามด้วยค่า id ของแท็กปลายทาง และเนื่องจาก id ของแต่ละแท็ก จะมีค่าไม่ซ้ำกัน (คล้ายหมายเลขบัตรประชาชนของพวกเรา) ดังนั้นการสร้างลิงก์โดยอ้างอิงกับ id จึง เป็นการสร้างลิงก์ไปยังแท็กที่เราต้องการได้อย่างถูกต้องแน่นอน

ต่อไปนี้คือตัวอย่างการสร้างลิงก์สำหรับลิงก์ไปยังเว็บเพจอื่นๆ และลิงก์ไปยังแท็กอื่นๆ ที่อยู่ในเว็บเพจเดียวกัน

เมื่อทดลองนำเอาโค้ตนี้ไปเปิดบนบราวเซอร์ จะพบกับลิงก์ที่ลิงก์ ซึ่งเมื่อผู้ใช้คลิกที่ข้อความ ไปยังด้านล่าง เว็บเพจก็จะแสดงแท็ก <p id=”my-destination”></p> บนหน้าจอทันที ดังนี้

thaidemy-html-58 thaidemy-html-59

เปิดลิงก์เป็นหน้าต่างใหม่ หรือหน้าเดิม

เมื่อผู้ใช้คลิกที่ลิงก์ เราสามารถกำหนดได้ว่า จะให้ข้อมูลของเว็บเพจปลายทางแทนที่หน้าเว็บเดิม หรือจะให้เปิดเป็นหน้าต่างใหม่ก็ได้ ด้วยการกำหนดค่าลงไปที่ target ซึ่งที่ใช้งานกับ HTML5 มีดังนี้

  • _self เปิดลิงก์แล้วแสดงเนื้อหาในหน้าเว็บเพจปัจจุบัน (ใช้เป็นค่าเริ่มต้น)
  • _blank เปิดลิงก์แท็บใหม่หรือหน้าต่างใหม่ (ขึ้นอยู่กับบราวเซอร์ที่ใช้งาน)
  • Frame Name เปิดลิงก์ไปยังเฟรมที่ต้องการ
จากตัวอย่างโค้ตด้านบน หากเปิดบนบราวเซอร์ เราก็จะพบลิงก์จำนวน 4 ลิงก์ เมื่อผู้ใช้คลิกที่ลิงก์แรก ก็จะปรากฎหน้าเว็บเพจ thaidemy.com ที่เฟรมแรกที่อยู่ด้านซ้ายมือ เนื่องจากเราได้กำหนด  <a href="http://thaidemy.com" target="A"> เมื่อผู้ใช้คลิกลิงก์นี้ เว็บเพจตามที่อยู่ URL ก็จะถูกเปิดไปยังเฟรมที่ชื่อว่า A

thaidemy-html-61 thaidemy-html-62

ถ้าเราไม่ได้กำหนด target ก็จะถือว่าเราได้กำหนดค่า target=”_self” โดยอัตโนมัติ ซึ่งหมายถึง เปิดลิงก์ในหน้าต่างเดิม

นำเอารูปภาพมาทำเป็นลิงก์

การนำเอารูปภาพมาทำเป็นลิงก์นั้น สามารถทำได้ง่ายๆ คือ แค่นำเอาแท็ก <img> มาแทรกลงไปในแท็ก <a></a> ดังตัวอย่างต่อไปนี้

จากโค้ตด้านบน เราได้แทรกแท็ก <img> ไปยังแท็ก <a> เช่น <a href="thaidemy.com"><img src="logo.png"></a>  เมื่อผู้ใช้คลิกที่รูปภาพ ก็จะเปิดเว็บไซต์ thaidemy.com ตามต้องการ

thaidemy-html-63

 

ติดต่อเรา

หากสมาชิกท่านใดพบปัญหา หรือมีข้อสงสัยประการใด สามารถติชม หรือเสนอแนะ มายังเว็บมาสเตอร์ได้ตลอดเวลานะครับ

Not readable? Change text. captcha txt
0

Start typing and press Enter to search