วันศุกร์ที่ 7 มีนาคม พ.ศ. 2551

การ Link ไปยังเว็บไซต์อื่น

เป็นยังไงกันบ้าง สบายดีไหมครับ มาต่อจากคราวที่แล้วกันดีกว่า วันนี้ผมจะมาแนะนำเรื่องการใส่ Links ไปยังเว็บไซต์อื่นๆด้วยคำสั่ง <a>...</a>


โดยปกติแล้วนักท่องเว็บทั้งหลายคงจะไม่มีใครไม่รู้จัก Links ลิงค์นั่นก็คือส่วนที่เราสามารถคลิกแล้ว เว็บบราวเซอร์จะเปิดเว็บเพจหรือเว็บไซต์ที่กำหนดไว้ขึ้นมา โดยวิธีการสร้างลิงค์มีหลายรูปแบบ แต่หลักๆเลยก็คือคำสั่ง <a>...</a> โดยรูปแบบการใช้จะอยู่ใน TAG <body>...</body> โดยมีแอทริบริวต์ href (น่าจะย่อมาจาก Hyperlink Reference เดาเอานะข้าน้อยไม่ขอยืนยัน)

โดยรูปแบบการใช้จะเป็นแบบนี้ เอ่อ สมมุติว่าเราจะทำลิงค์จากเว็บไซต์ของเราไปยังหน้าแรกของกูเกิ้ล.คอมก็จะเป็น

<body>
<a href="http://www.google.com">google</a>
</body>

เมื่อเซฟแล้วเปิดออกมาก็จะเห็นเป็น Link แบบนี้
google

โดย <a href="http://www.google.com"> จะเป็นส่วนเปิดแท็กการสร้างลิงค์ และเว็บเพจปลายทางที่เรากำหนด(อย่าลืมใส่โปรโตคอล http:// นะไม่งั้นจะไม่ไปนะ)และส่วนต่อมา

google</a> จะเป็นชื่อลิงค์ที่ปรากฏให้เราเห็นในที่นี้ผมใส่ว่า google เฉยๆ และ </a> ก็เป็นตัวปิดคำสั่งนี้

เป็นไงบ้างครับง่ายใช่ไหม ซึ่งในส่วนของ google เราสามารถเอาไปประยุกต์ใช้เป็นรูปภาพ Link ไปยังเว็บไซต์กูเกิ้ลแทนก็ได้เช่น ผมจะให้รูปเจ้าหัวหอมลิงค์ไปยังกูเกิ้ลก็จะใส้โค้ทว่า

<body>
<a href="http://www.google.com">
<img src="ลิงค์รูปภาพ http://อะไรก็ว่าปาย"></img>
</a>
</body>

ผลลัพธ์ที่ออกมาก็จะเป็น


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

งงไหมเอ่ย พอดีอธิบายแบบบ้านๆอ่ะครับ ถ้าสงสัยตรงไหน ก็คอมเมนท์เอาไว้นะครับผมรับประกันว่าจะมาตอบให้อย่างแน่นอน(แต่ไม่แน่ใจว่านานแค่ไหนน้า-*-) คราวหน้าเราจะมาจัดรูปแบบการวางตำแหน่ง ไม่ว่าจะเป็นรูปภาพ ตัวอักษร หรือ Link ต่างๆกันนะครับ ค่อยๆเป็นค่อยๆไปกันน้า วันนี้ขอตัวล่ะคร๊าบบ

อ่อลืมไป เรื่องจานสีตกลงผมหาไม่เจอแล้ว แต่ไปเจอ addon ตัวหนึ่งของ Firefox ก็ใช้ง่ายดีนะครับ ยังไงก็ลองเข้าไปโหลดได้ในเรื่อง
ค่าสี RGB (<--- เอามาลองทำลิงค์ซะเลย)
นะครับใส่ไว้ให้แล้ว อุอุ