Munuบทเรียนการเขียนเว็บด้วยภาษา html
บทที่ 4 สร้าง link สู่หน้าอื่น
สร้าง link สู่หน้าอื่น
ขอต้อนรับสู่วันที่ 4 วันนี้คุณจะเรียนเพียงสิ่งเดียว คือการสร้าง link หรือตัวเชื่อมที่เมื่อคลิ๊กแล้ว จะไปสู่หน้าหรือเว็บอื่นๆ ซึ่งมีรูปแบบคำสั่งคล้ายๆกับที่ผ่านมา เมื่อคุณเรียนรู้บทนี้แล้ว คุณจะสามารถสร้าง link ไว้ในหน้าต่างๆ ได้มากเท่าที่คุณต้องการ
ตัวอย่างต่อไปนี้เป็นตัวอย่างการสร้าง link เพื่อไปยังหน้าหลัก ซึ่งคุณจะเห็น link นี้อยู่ข้างบนสุดเหนือหัวข้อบทเรียน ซึ่งสร้างขึ้นจาก…
<A HREF=”http://www.pjohnpong.webs.com” title=”กดที่นี่เพื่อกลับสู่หน้าหลัก”>กลับหน้าหลัก</A>
และนี่เป็นคำอธิบายส่วนต่างๆ
# A มาจากคำว่า Anchor (แปลว่า หลัก,สมอเรือ) ซึ่งเป็นตัวเริ่มของการสร้าง link
# HREF มาจากคำว่า Hypertext REFerence ซึ่งเป็นตัวบอก Browser ว่าจะให้ไปที่ใด
# http://www.pjohnpong.webs.com เป็นที่อยู่ของ link ซึ่งให้สังเกตว่าอยู่หลังเครื่องหมายเท่ากับและมีเครื่องหมายคำพูดหุ้ม เพราะที่อยู่นี้เป็นคุณสมบัติ(attribute)ของคำสั่ง A
# กลับหน้าหลัก เป็นตัวหนังสือที่คุณเห็นในหน้าจอ ซึ่งเป็น link ให้ผู้ใช้ได้คลิ๊ก ซึ่งคุณอาจเขียนอะไรก็ได้ เพื่ออธิบาย link นั้น
# title=”กดที่นี่เพื่อกลับสู่หน้าหลัก” เมื่อผู้ใช้ลากเมาส์มาวางบน link นี้ จะมีตัวหนังสือขึ้นในกรอบเล็กๆว่า “กดที่นี่เพื่อกลับสู่หน้าหลัก” ซึ่งนี่คือหน้าที่ของคุณสมบัติที่ชื่อว่า title
# /A และใช้คำสั่งปิด เพื่อจบคำสั่งสร้าง link ทั้งหมด คุณสามารถทดสอบดูได้กับ link ข้างบนสุดครับ เมื่อลากเมาส์มาวางบน link คุณจะเห็นที่อยู่ของ link ซึ่งขึ้นมาที่ด้านล่างซ้ายของ Browser ซึ่งปกติแล้วจะขึ้นว่า “Done”
จะเขียนอะไรดีสำหรับ link ?
มีหลายแห่งที่สอนเรื่องนี้ต่างกัน บางพวกก็ว่า คุณควรจะเขียนให้ชัดเจน ซึ่งมีการใช้ข้อความว่า “กดที่นี่สำหรับ…” หรือ “นี่เป็น link ไปสู่…” อีกพวกหนึ่งคิดว่า link นั้นเป็นสีน้ำเงิน(หรือจะเป็นสีอื่นๆ) ชัดเจนอยู่แล้ว ก็ควรจะใช้คำอื่นๆมากกว่า
ซึ่งผมก็ไม่ค่อยเชื่อทั้งสองพวกนักหรอกครับ ผมคิดว่าผู้ที่อ่านเว็บควรจะท่องไปในหน้าต่างๆได้ง่าย และสะดวกด้วยทุกๆตัวช่วยในหน้านั้น แต่คุณสร้างหน้าของคุณขึ้นมาเอง ก็แล้วแต่คุณที่จะตัดสินใจครับ
link ส่ง E-mail จากหน้าของคุณ
เราเรียกคำสั่งนี้ว่า mailto: ซึ่งจะเขียนแทนที่ลงไปในที่อยู่ของตัวอย่างข้างบน ซึ่งรูปแบบนี้จะให้ข้อความสีฟ้าบนหน้าจอ ซึ่งผู้อ่านสามารถคลิ๊กเพื่อส่ง e-mail ได้
<A HREF=”mailto:programs4u@hotmail.com”>กดที่นี่เพื่อเขียน e-mail ส่งให้ผม</A>
สังเกตได้ใช่มั้ยครับ ว่าเหมือนกันกับ link ธรรมดาทุกอย่าง ยกเว้น “mailto:” เข้ามาแทนที่ “http://” และที่อยู่ของ e-mail เข้ามาแทนที่อยู่ของเว็บ ซึ่งคุณยังคงต้องใช้ <A> เพื่อปิดคำสั่ง และโปรดสังเกตว่า ไม่มีการเว้นวรรคระหว่างเครื่องหมาย : กับที่อยู่ e-mail …นี่เป็นผลของคำสั่ง HTML ในบรรทัดข้างบนนี้
