บทที่3

**กลับบทเรียน**
**บทที่ 3 : ใส่ภาพและลิงค์ ** ..**:: การใส่รูปภาพ**  รูปแบบแท็กการใส่รูปภาพ ชื่อภาพ "> || **รูปแบบการใส่รูปภาพ **
 * การทำเว็บเพจในหนึ่งหน้า นอกจากจะมีข้อความแล้วยังต้องประกอบด้วยรูปภาพเพื่อเพิ่มความน่าสนใจให้กับเว็บเพจ นอกจากนี้แล้วรูปภาพยังสามารถสื่อความหมายได้ชัดเจนกว่าข้อความ ดังคำกล่าวที่ว่า "หนึ่งภาพแทนพันตัวอักษร" การใส่รูปภาพในเอกสาร ****HTML นั้นคุณจะต้องเตรียมรูปภาพไว้ก่อนค่ะ โดยใช้แท็กสำหรับแสดงผลรูปภาพดังนี้ค่ะ **
 *  ** **
 *  ** **

 ** ** ....การใส่รูปภาพ.... ** **


 *  **


 * <img src = " ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">lilies.jpg ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">"> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ความกว้าง width="ตัวเลขระบุความกว้าง"
 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ** ||
 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">สำหรับแท็กการใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้้ ไม่ว่าจะเป็นขนาดความกว้าง ความสูงของรูปภาพว่าเราต้องการให้แสดงขนาดกว้างและสูง เท่าไหร่ ซึ่งหากเราไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของภาพต้นฉบับ นอกจากนี้เรายังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ความสูง height="ตัวเลขระบุความสูง"

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ"

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ตัวอย่าง **<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"><img src = " ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">lilies.jpg ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">" width=" ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">200 ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">" height=" ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">150 ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">" border=" ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">1 ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">"> ** <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">จากตัวอย่าง จะแสดงภาพขนาด 200x150 px. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และ่มีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด **<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">border=" ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">0 ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">" **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> (หากต้องการใ้ห้ขอบมีความหนามาก ระบุตัวเลขให้มาก) ||

|| **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">:: การเชื่อมโยง (ลิงค์) ** <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">การเชื่อมโยงนี้ สามารถแบ่งได้ทั้ง 4 ประเภท คือ
 * **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">เป็นที่ทราบกันดีอยู่แล้วนะค่ะ ในเว็บไซต์หนึ่ง ๆ จะมีหน้าเพจมากกว่าหนึ่งหน้า อย่างเช่นจากหน้าโฮมเพจก็สามารถคลิกเพื่อเข้าไปดูข้อมูลในหน้าอื่น ๆ ได้ ซึงเราเรียกว่าการเชื่อมโยงเว็บเพจ หรือ การลิงค์ ซึ่งก่อนที่เราจะทำการลิงค์หน้าเว็บเพจ เราจะต้องมีเว็บเพจอย่างน้อย ****<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">2 หน้าขึ้นไปค่ะ ซึ่งการเชื่อมโยงนี้นอกจากเชื่อมโยงเว็บเพจเข้าโดยกันแล้ว ยังมีการเชื่อมโยงอีกหลายรูปแบบค่ะ ซึ่งการเชื่อมโยงกันนี้เอง ทำให้เกิดเป็นเครือข่ายอินเตอร์เน็ต ที่เราสามารถเข้าไปหาข้อมูลต่าง ๆ ได้ ไม่ว่าข้อมูลนั้นจะอยู่อีกฝั่งของซีกโลกก็ตาม **
 * **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">เป็นที่ทราบกันดีอยู่แล้วนะค่ะ ในเว็บไซต์หนึ่ง ๆ จะมีหน้าเพจมากกว่าหนึ่งหน้า อย่างเช่นจากหน้าโฮมเพจก็สามารถคลิกเพื่อเข้าไปดูข้อมูลในหน้าอื่น ๆ ได้ ซึงเราเรียกว่าการเชื่อมโยงเว็บเพจ หรือ การลิงค์ ซึ่งก่อนที่เราจะทำการลิงค์หน้าเว็บเพจ เราจะต้องมีเว็บเพจอย่างน้อย ****<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">2 หน้าขึ้นไปค่ะ ซึ่งการเชื่อมโยงนี้นอกจากเชื่อมโยงเว็บเพจเข้าโดยกันแล้ว ยังมีการเชื่อมโยงอีกหลายรูปแบบค่ะ ซึ่งการเชื่อมโยงกันนี้เอง ทำให้เกิดเป็นเครือข่ายอินเตอร์เน็ต ที่เราสามารถเข้าไปหาข้อมูลต่าง ๆ ได้ ไม่ว่าข้อมูลนั้นจะอยู่อีกฝั่งของซีกโลกก็ตาม **

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> 1. <span style="font-family: 'Angsana New',serif; font-size: 16pt;"> [|การเชื่อมโยงระหว่างเว็บเพจ] <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;"><a href=" <span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">ไฟล์เว็บเพจ <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;">"> <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">...สิ่งที่จะลิงค์... <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;"></a>

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> 2. <span style="font-family: 'Angsana New',serif; font-size: 16pt;"> [|การเชื่อมโยงนอกเว็บไซต] <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">์ <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;"><a href=" <span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">URL <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;">"> <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">...สิ่งที่จะลิงค์... <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;"></a>

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> 3. <span style="font-family: 'Angsana New',serif; font-size: 16pt;"> [|การเชื่อมโยงภายในหน้าเว็บเพจ] <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;"><a name=" <span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">กำหนดชื่อปลายทาง <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;">"></a>

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> และ <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;"><a href=" <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"># <span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">ชื่อปลายทาง <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;">"> <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">..สิ่งที่จะลิงค์... <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;"></a>

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> 4. <span style="font-family: 'Angsana New',serif; font-size: 16pt;"> [|การเชื่อมโยงแบบอีเมล] <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">์ <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;"><a href=" <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">mailto: <span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">E-mail address ที่ต้องการส่งถึง <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;">"> <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">..สิ่งที่จะลิงค์. <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;"></a> <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ในการเชื่อมโยง (ลิงค์) เราสามารถที่จะลิงค์โดยใช้รูปภาพ หรือข้อความก็ได้ โดยเมืื่่อรูปภาพหรือข้อความถูกลิงค์ เมื่อเราทดสอบ ผ่านเว็บบราวเซอร์ สัญลักษณ์เมาส์ของเราจะเปลี่ยนจากภาพลูกศร เป็นภาพมือแทน เมื่อเมาส์ถูกเลื่อนไปอยู่บริเวณที่เราได้ลิงค์ไว้ || **<span style="color: red; font-family: 'Angsana New',serif; font-size: 16pt;">รูปแบบการเชื่อมโยงระหว่างเว็บเพจ ** ||
 * **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">....การเชื่อมโยงระหว่างเว็บเพจ.... **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">  **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"><a href=" ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">index.html ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">"> **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">คลิ๊กที่นี้เพื่อกลับไปหน้าแรก **<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"></a> ****<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ****<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!- **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;">- <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ลิงค์โดยใช้ข้อความ **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;">-> **


 * <span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"> <a href=" ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">index.html ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">"> **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"><img src="home.gif"> **<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"></a> ****<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!-- **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ลิงค์โดยใช้รูปภาพ **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;">-> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ** ||
 * **<span style="color: red; font-family: 'Angsana New',serif; font-size: 16pt;">รูปแบบการเชื่อมโยงนอกเว็บไซต์ ** ||
 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ** **

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ** ** <span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">....การเชื่อมโยงนอกเว็บไซต์.... **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!-- **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ลิงค์โดยใช้ข้อความ **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;">-> **


 * <span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"><a href=" ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">http://www.nextstepdev.com ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">"> **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ลิงค์มาที่เว็บไซต์ Nextstepdev.com **<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"></a> ****<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!-- **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ลิงค์โดยใช้รูปภาพ **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"> -> **


 * <span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"> <a href=" ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">http://www.nextstepdev.com ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">"> **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"><img src="nextstpdev.gif"> **<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"></a> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ** ||
 * **<span style="color: red; font-family: 'Angsana New',serif; font-size: 16pt;">การเชื่อมโยงภายในหน้าเว็บเพจ ** ||
 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">สำหรับเว็บบ้างเว็บที่มีข้อมูลในแต่ละหน้าเยอะ ๆ ต้องเลื่อนลงไปด้านล่างมาก ๆ ซึ่ง วิธีการแก้ไขปัญหาเหล่านี้ ก็คือการเพิ่มลิงค์เพื่อลิงค์เอกสารในหน้านั้น โดยเราอาจแบ่งตามหัวข้อย่อย ๆ ก็ได้ค่ะ (เหมือนการลิงค์ในหน้านี้ค่ะ) ซึ่งอาจจะมองว่าเป็นในลักษณะของเมนูย่อยก็ได้ค่ะ นอกจากนี้ ก็สามารถใช้ในกรณีที่ลงไปดูข้อมูลด้านล่างแล้วอยากจะเลื่อนมาที่ด้านบนของเว็บ ในส่วนท้ายเพจ เราก็อาจทำลิงค์ ให้คลิ๊กเพื่อ go to top ได้อย่างรวดเร็วค่ะ คงเคยจะเห็นกันมาบ้างแล้วนะค่ะ (ก็เหมือนการลิงค์ในหน้านี้อีกน่ะแหละค่ะ) ||
 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ** **

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ** **

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ** ** <span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">....การเชื่อมโยงภายในหน้าเว็บเพจ โดยคลิ๊กที่ด้านล่าง แล้วเลื่อนขึ้นมาด้านบน.... **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!-- **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">กำหนดชื่อปลายทาง เขียนโค้ดส่วนนี้ไว้บริเวณด้านบนของเพจ **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;">-> **


 * <span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;"><a name=" ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">top ****<span style="color: #cc0000; font-family: 'Angsana New',serif; font-size: 16pt;">"></a> **
 * <span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!-- **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ช่วงระหว่างนี้ต้องมีข้อมูลเยอะ ๆ เกินหนึ่งหน้าเพจสกรีนจึงจะเห็นผลการทำงาน **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;">-> **
 * <span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!-- **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ลิงค์โดยใช้ข้อความ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;">-> **


 * <span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"><a href=" ****<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"># ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">top ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">"> **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">Go to Top **<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"></a> ****<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!-- **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ลิงค์โดยใช้รูปภาพ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;">-> **


 * <span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"> <a href=" ****<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"># ****<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">top ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">"> **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"><img src="top.gif"> **<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"></a> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ** ||
 * **<span style="color: red; font-family: 'Angsana New',serif; font-size: 16pt;">การเชื่อมโยงแบบอีเมล์ ** ||
 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">สำหรับการเชื่อมโยงแบบนี้ มักจะเห็นบ่อยในเว็บเพจซึ่งเป็นส่วนลิงค์สำหรับให้ผู้เยี่ยมชมส่งเมล์มายังผู้ดูแลเว็บไซต์ โดยใช้ E-mail ตามที่ผู้เขียนเว็บได้ระบุไว้ในแท็กสำหรับลิงค์ การลิงค์แบบนี้นั้นเมื่อผู้ใช้งานคลิ๊กที่ลิงค์ จะมีการเชื่อมโยงไปยังโปรแกรม Microsofe outlook ซึ่งเป็นโปรแกรมสำหรับส่งเมล์ตัวหนึ่ง โดยที่ช่อง address To (ปลายทาง) จะปรากฏ E-mail Address ที่ระบุไว้ที่แท็กลิงค์ปรากฏอยู่ ||


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">....การเชื่อมโยงแบบอีเมล์.... **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">  **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!-- **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ลิงค์โดยใช้ข้อความ **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;">-> **


 * <span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"><a href=" ****<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">mailto: **<span style="font-family: 'Angsana New',serif; font-size: 16pt;">**mail@domain.com** **<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">"> **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ลิงค์เมล์ส่งเมล์ไปที่ <span style="font-family: 'Angsana New',serif; font-size: 16pt;"> mail@domain.com <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน **<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"></a> ****<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">  **


 * <span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!-- **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ลิงค์โดยใช้รูปภาพ **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"> -> **


 * <span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"> <a href=" ****<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">mailto: **<span style="font-family: 'Angsana New',serif; font-size: 16pt;">**mail@domain.com** **<span style="color: #ff6600; font-family: 'Angsana New',serif; font-size: 16pt;">อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน ****<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;">"> **<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"><img src="contact.gif"> **<span style="color: #0099cc; font-family: 'Angsana New',serif; font-size: 16pt;"></a> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> **


 * <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;"> ** ||
 * || **<span style="color: red; font-family: 'Angsana New',serif; font-size: 16pt;">Tip HTML ** ||
 * **<span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;">เทคนิคการเชื่อมโยงแบบอีเมล์ **
 * **<span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;">เทคนิคการเชื่อมโยงแบบอีเมล์ **

<span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;">จากโค้ดการเชื่อมโยงแบบอีเมล์ จะเห็นได้ว่าสามารถใช้แบบลิงค์ข้อความ หรือลิงค์รูปภาพก็ได้ แต่ที่อยากแนะนำ คือ ควรจะเป็นลิงค์แบบรูปภาพมากกว่า เพราะการลิงค์แบบรูปภาพจะสร้างความปลอดภัยให้กับอีเมล์มากกว่าค่ะ <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;">คงเคยจะเจอมาบ้างนะค่ะ ที่ในวันหนึ่ง ๆ อีเมล์ของเรามีเมล์ที่เราไม่เคยติดต่อเลย มีเมล์แปลก ๆ เช่นเมล์โฆษณา เชิญชวนซื้อของต่าง ๆ หรือเมล์ขยะที่เรียกว่า Junk Mail แล้วเคยคิดไหมค่ะว่า ผู้ที่ส่งอีเมล์มาหาเรานั้น ได้ที่อยู่อีเมล์เรามาจากไหน คำตอบก็คือ จะมีพวกทำธุรกิจหาอีเมล์ไปขายให้กับผู้สนใจ สำหรับเอาอีเมล์ไปใช้โฆษณาประชาสัมพันธ์ธุรกิจค่ะ ซึ่งเจ้าพวกหาอีเมล์นี้เค้าไม่เข้ามาหาทีละเว็บหรอกค่ะ แต่พวกนี้จะใช้โปรแกรม โดยโปรแกรมจะไปกวาดหาอีเมล์ในเว็บต่าง ๆ อัตโนมัติ ซึ่งรูปแบบของการทำงานก็คือ หาจากข้อความที่ เป็นรูปแบบ <span style="font-family: 'Angsana New',serif; font-size: 16pt;"> xxx@xxxx.xxx <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;">อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน ซึ่งหากเราเขียนโค้ดลิงค์เมล์ของเราแบบข้อความ โปรแกรมกวาดเมล์ก็จะได้อีเมล์ของเราไปค่ะ ทีนี้ล่ะค่ะ คุณที่เป็นคนดูแลเว็บ วัน ๆ ก็จะได้เมล์ขยะมาเป็นร้อย ๆ เลยล่ะค่ะ <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">ข้อหลีกเลี่ยงปัญหานี้ก็คือ ไม่ควรใส่รูปแบบ <span style="font-family: 'Angsana New',serif; font-size: 16pt;"> xxx@xxxx.xxx <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน บนหน้าเว็บค่ะ แต่ควรสร้างข้อความ <span style="font-family: 'Angsana New',serif; font-size: 16pt;"> xxx@xxxx.xxx  <span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน เป็นภาพกราฟิค แล้วใช้วิธีลิงค์แบบรูปภาพค่ะ และขอแนะนำอีกสักนิดค่ะ สำหรับคนที่ชอบใช้งานเว็บบอร์ด แสดงความคิดเห็นตามเว็บต่าง ๆ คุณเป็นผู้ที่มีโอกาสโดนโปรแกรมกวาดอีเมล์กวาดอีเมล์ไปเยอะขึ้นค่ะ แต่ก็ไม่ได้หมายความว่าจะให้คุณเลิกแสดงความคิดเห็นค่ะ คุณก็ยังแสดงความคิดเห็นได้ตามปกติค่ะ แต่เวลาใส่อีเมล์ ควรใส่ลักษณะนี้แทนค่ะ xxx(@)xxxx.xxx
 * <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;">การลิงค์เอกสารอื่น ๆ **

<span style="color: black; font-family: 'Angsana New',serif; font-size: 16pt;">การลิงค์เอกสารอื่น ๆ เช่นการลิงไฟล์ .pdf การลิงค์เอกสารสำหรับให้ดาวนโหลดต่าง ๆ สามารถลิงค์ได้เหมือนรูปแบบที่ 1 เหมือนการลิงค์เชื่อมโยงระหว่างเว็บเพจ เีพียงแค่คุณต้องระบุไฟล์ที่ต้องการเชื่อมโยงให้ถูกต้องค่ะ เช่นใส่ชื่อเป็น filename.pdf หรือ filename.doc การลิงค์แบบนี้ สำหรับไฟล์ .doc บราวเซอร์ยุคหลัง ๆ จะแสดงเนื้อไฟล์ ส่วนสำหรับ .pdf ในเครื่องจะเปิดดูไฟล์ ต้องลงโปรแกรม Adobe Reader ไว้ด้วยค่ะ ไม่งั้นจะไม่สามารถดูไฟล์ได้ และสำหรับเอกสารที่ต้องการให้ดาวน์โหลด ก็อาจเตรียมไฟล์เป็นไฟล์สกุล .zip เวลาดาวน์โหลด บราวเซอร์จะได้เรียกให้มีการเซฟไฟล์อัตโนมัติค่ะ
 * <span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;">แท็ก ****<span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;"> Comment หรือ หมายเหตุ **

<span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;">จะเห็นว่าในโค้ดของบทความนี้ มีแท็ก **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;"><!-- **<span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;">........ **<span style="color: #cc9900; font-family: 'Angsana New',serif; font-size: 16pt;">-> **<span style="color: #555555; font-family: 'Angsana New',serif; font-size: 16pt;">อยู่ แท็กนี้เป็นแท็ก Comment ในภาษา html โดยข้อความที่ปรากฏอยู่ในแท็กนี้ จะไม่แสดงผลออกทางเว็บบราวเซอร์ค่ะ ||