การกำหนด 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.htmlfolder 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
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>
<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 ซึ่งทำให้เราใส่ลูกเล่นได้มากกว่า ทั้งพื้นหลัง และการขีดเส้นใต้ Update Story at Wednesday, May 29, 2013 In Category HTML Story HTML การกำหนด Link และตำแหน่ง Anchor การเชื่อมโยงไปจุดต่างๆ ในหน้าเว็บเพจปัจจุบัน
