คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 13

การกำหนด Link และตำแหน่ง Anchor

1. การเชื่อมโยงไปจุดต่างๆ ในหน้าเว็บเพจปัจจุบัน

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

กำหนดจุดเชื่อมโยงในเนื้อหา
<a name="ชื่อ anchor">...</a>

กำหนดลิงค์เชื่อมโยง ไปตำแหน่ง anchor
<a href="#anchor name" title="คำิอธิบายลิงค์">ลิงค์</a>

tag <a> การแสดงผล
<a name="top">ลองคลิกที่ลิงค์ด้านล่างดูค่ะ และคำว่า Top</a>
<br />
<a href="#html1" title="ไปยังเนื้อหา HTML คืออะไร?">HTML คืออะไร?</a>
<br />
<a href="#html2" title="ไปยังเนื้อหา การสร้างเว็บเพจทำอย่างไร?">การสร้างเว็บเพจทำอย่างไร?</a>
<br> <br> <br>

<a name="html1">HTML คืออะไร?</a><br />
HTML(Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
<br> <br> <br>

<a name="html2">การสร้างเว็บเพจทำอย่างไร?</a><br />
การสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, EditPlus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ในลักษณะ WYSIWYG (What You See Is What You Get)
<br> <br> <br>

<a href="#top" title="กลับไปด้านบน">Top</a><br />
ลองคลิกที่ลิงค์ด้านล่างดูค่ะ และคำว่า Top
HTML คืออะไร?
การสร้างเว็บเพจทำอย่างไร?


HTML คืออะไร?
HTML(Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)


การสร้างเว็บเพจทำอย่างไร?
การสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, EditPlus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ในลักษณะ WYSIWYG (What You See Is What You Get)


Top


2. การเชื่อมโยงไปยังหน้าเว็บเพจอื่นๆ หรือเว็บไซต์ อื่นๆ

<a href="url" target="window name" title="คำิอธิบายลิงค์">

ค่าที่ใช้ใน target
"_blank" เปิดหน้าเว็บเพจในหน้าต่าง Browser ใหม่
"_self" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิม และ Frame เดิม
"_parent" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิม
"_top" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิมแบบเต็มหน้า และยกเลิก frame ทั้งหมด
หรือ จะใส่เป็นชื่อหน้าต่างที่เรากำหนดก็ได้ค่ะ

อาจจะยังไม่เข้าใจวิธีการใช้งาน target เพราะยังไม่ได้ศึกษาเรื่อง Frame ไม่เป็นไรนะคะ ปกติที่ใช้บ่อยๆ มีแค่ _blank เท่านั้นเอง

tag <a> การแสดงผล
<a href="html_chapter08.html" title="บทที่8">chapter8 หน้าต่างเดิม</a>

<a href="html_chapter08.html" title="บทที่8" target="_blank">chapter8 หน้าต่างใหม่</a>

<a href="http://www.google.com" title="Google" target="_blank">google.com</a>

ลองคลิกดูค่ะ
chapter8 หน้าต่างเดิม
chapter8 หน้าต่างใหม่

google.com


การเขียน url อ้างลิงค์ไปเว็บเพจ หรือไฟล์ ต่างๆ ของเว็บไซต์เดียวกัน ทำอย่างไร

สมมติไฟล์ที่ใช้ มีการจัดเก็บอยู่ใน folder ต่างๆ ดังนี้

folder webtutorial
    index.html

    folder html_tutorial
        html_chapter1.html
        html_chapter2.html
        folder images
            img1.jpg
            img2.jpg
            folder images_sub
            img_sub.jpg

    folder css_tutorial
        css_chapter1.html
        css_chapter2.html
        folder images
            pic1.jpg
            pic2.jpg
        folder css
            style.css

ตอนนี้เราทำงานอยู่ที่ไฟล์ html_chapter2.html

1. ต้องการทำลิงค์ไป html_chapter1.html ที่อยู่ใน folder html_tutorial (อยู่ใน folder เดียวกัน) เขียนได้ดังนี้
<a href="html_chapter1.html">Chapter1</a>

2. ต้องการทำลิงค์ไป img1.jpg และ img2 ที่อยู่ใน folder html_tutorial >images เขียนได้ดังนี้
<a href="images/img1.jpg">รูปภาพที่ 1</jpg>
<a href="images/img2.jpg">รูปภาพที่ 2</jpg>

3. ต้องการทำลิงค์ไป img_sub ที่อยู่ใน folder html_tutorial>images>images_sub เขียนได้ดังนี้
<a href="images/images_sub/img_sub.jpg">รูปภาพ</jpg>

4. ต้องการทำลิงค์ไป css_chapter1.html ที่อยู่ใน folder cssl_tutorial เขียนได้ดังนี้
<a href="../css_tutorial/css_chapter1.html">CSS Chpater1</a>

5. ต้องการทำลิงค์ไป pic1.jpg และ pic2.jpg ที่อยู่ใน folder cssl_tutorial>images เขียนได้ดังนี้
<a href="../css_tutorial/images/pic1.jpg">รูปภาพที่ CSS 1</a>
<a href="../css_tutorial/images/pic2.jpg">รูปภาพที่ CSS 2</a>

6. ต้องการทำลิงค์ไป index.html ที่อยู่ใน folder webtutorial เขียนได้ดังนี้
<a href="../index.html">index</a>



การเชื่อมโยงไปยัง email

tag <a> การแสดงผล
<a href="mailto:mail@hotmail.com">contact webmaster</a> ลองคลิกดูค่ะ
contact webmaster



การกำหนดสีให้ลิงค์

กำหนดสีให้ลิงค์ใน tag <body>โดยใช้ attribute link(สีของลิงค์ที่ยังไม่เคยคลิก), alink(สีของลิงค์ขณะคลิก) และ vlink(สีของลิงค์ที่เคยคลิกแล้ว)

Example
<html>
<head>
<title>การกำหนดสีให้ลิงค์</title>
</head>


<body link="red" alink="blue" vlink="orange">

Link ที่ยังไม่คลิกให้เป็นสีแดง , ขณะคลิกเป็นสีน้ำเงิน, เมื่อคลิกแล้วเป็นสีส้ม<br>
<a href="http://www.google.com" target="_blank">google.com</a>
<a href="http://www.pantip.com" target="_blank">pantip.com</a>

</body>
</html>
คลิกที่นี่ เพื่อดูผลลัพธ์

หมายเหตุ : การกำหนด style ให้กลับลิงค์ควรใช้ CSS ซึ่งทำให้เราใส่ลูกเล่นได้มากกว่า ทั้งพื้นหลัง และการขีดเส้นใต้


« Chapter 12
Chapter 14 »