แนะนำการสร้างลิงค์และการแจก Code ในบล็อกค่ะ การสร้างลิงค์ในบล็อก เวลาเขียนเรื่องราวต่างๆ บางครั้งเราก็อยากให้คนอ่านสามาถคลิกลิงค์ในเรื่องไปอ่านรายละเอียดเพิ่มเติมได้ จะเป็นเอนทรี่ในบล็อกเรา บล็อกอื่นๆ หรือเว็บไซด์ที่เราอยากแนะนำ ซึ่งเกี่ยวข้องกับเรื่องที่เรานำเสนอ เราสามารถทำได้ด้วยการสร้างลิงค์ไปยังเว็บเพจนั้นๆ โดยปกติ เวลาที่เราเขียน url address (เช่น http://www.ชื่อเว็บ.com หรือ .net .go.th .co.th หรือสกุลอะไรก็ตาม) แล้วกด enter หรือกด space bar มันจะกลายร่างเป็นลิงค์ให้เราสามารถคลิกข้าไปยังเว็บนั้นๆได้โดยอัตโนมัติ แต่ก็มีบางครั้งที่ขัดข้องทางเทคนิค คือ ลิงค์ไม่ work ใช่ไหมคะ? งั้นลองมาเรียนรู้เกี่ยวกับคำสั่ง html เพื่อสร้างลิงค์กันสักนิดดีไหมคะ โครงสร้างคำสั่งที่จะทำให้เกิดลิงค์มี 3 ส่วนค่ะ - คำสั่ง (html tag)
- url address ของเว็บที่จะพาไป เมื่อคลิกตัวหนังสือในข้อ 3 เช่น http://www.oknation.net/blog/manual
- ตัวหนังสือที่จะสร้างลิงค์ (จะสร้างลิงค์บนภาพก็ได้ค่ะ) เช่น "ไปดูคู่มือการทำบล็อก"
สมมติ เราจะสร้างลิงค์ให้ไปดู คู่มือการทำบล็อก ซึ่งมี url adddress เป็น www.oknation.net/blog/manual นะคะ HTML จะต้องเขียนอย่างนี้ค่ะ <a href="http://www.oknation.net/blog/manual">ไปดูคู่มือการทำบล็อก</a> ซึ่งเมื่อใส่ลิงค์ให้กับคำว่า "ไปดูคู่มือการทำบล็อก" แล้วจะมองเห็นอย่างนี้ค่ะ ไปดูคู่มือการทำบล็อก การสร้างลิงค์ไปเปิดในหน้าต่างใหม่ (ไม่ทับหน้าที่กำลังเปิดอ่านอยู่) ถ้าจะกำหนดให้ เวลาคลิกแล้วเปิดหน้าต่างใหม่ ก็ให้เพิ่ม code นี้เข้าไปค่ะ target="_blank" โดยวางไว้ท้าย url address อย่างนี้ค่ะ <a href="http://www.oknation.net/blog/manual" target="_blank">ไปดูคู่มือการทำบล็อก</a> ถ้าเขียนอย่างนี้แล้ว เวลาคลิกลิงค์ ลิงค์นั้นจะพาไปยังที่อยู่บนเว็บที่ระบุไว้ใน code โดยเปิดหน้าต่างใหม่ให้ด้วยค่ะ
การแจก Code ในบล็อก เวลาที่เราใส่ object เช่น window media player, slide ฯลฯ หรือแนะนำลูกเล่นในการตกแต่งบล็อกให้คนอื่น เราจะต้องนำทั้งตัวอย่างและ code สำหรับให้คน copy ไปใช้งานได้ การใส่ object นั้นก็เพียงเอา code ของ object ไปวาง แต่การแจก code นี้จะยากกว่าตรงที่ ต้องแสดง code ให้คนอื่นเห็น ซึ่งจากพิมพ์ลงไปธรรมดาๆไม่ได้ค่ะ เพราะคอมพิวเตอร์เห็นภาษาคำสั่งเมื่อไหร่ก็จะอ่านคำสั่งนั้นแล้วปฏิบัติตาม ดังมีบล็อกเกอร์หลายๆท่านสงสัยว่าจะลง Code ในบล็อกอย่างไร คนอื่นจึงจะ Copy ไปเผยแพร่ต่อได้ เพราะลองเอา Code แปะแล้ว โพสไปกลับกลายเป็น object ซะนี่ ที่เป็นอย่างนั้นเพราะ โปรแกรมเขาอ่าน Code แล้วแปลงร่างให้เสร็จเรียบร้อยเลย ถ้าเราไม่บอกเขาก่อนว่า "เฮ่ย ต่อไปนี้เป็น Code นะเฟ้ย อย่าแปลงเด็ดขาด" โปรแกรมก็จะรู้และแสดง Code ให้เราอย่างที่ต้องการค่ะ (เพราะโปรแกรมรู้แล้วว่าเป็น Text ธรรมดาเท่านั้น ไม่ต้องอ่านหรือประมวลผลตามคำสั่งนั้น) เราจึงต้องรู้ว่าจะเขียน Code อย่างไรให้คอมพิวเตอร์เห็นเป็น text ทั่วๆไป และไม่ให้ทำตามคำสั่งนั้น แต่ให้แสดง Code ทั้งหมดเฉยๆ ตัวอย่างคำสั่งที่ใช้กำกับ เพื่อให้โปรแกรมอ่านค่าและแสดง Code แทน ตัว Object หรือให้เห็น Code เป็น Text ธรรมดาๆ (ไม่เอาคำสั่งนั้นไปประมวลผล) ได้แก่ คำสั่ง pre, textarea สมมติเรามี HTML Code สำหรับการสร้างลิงค์ให้คนสามารถคลิกไปหน้าหลักของ oknation ได้ (ตามตัวอย่างในเรื่องข้างต้น) แต่เราจะนำมาแสดงในบล็อกให้เห็น code ทั้งชุด แบบนี้ <a href="http://www.oknation.net">นี่คือลิงค์ไปหน้าหลัก oknation</a> เราก็ต้องเขียน html code กำกับทั้งหัวและท้ายของ Code ชุด คือใช้ คำสั่งเปิดและปิด Tag เช่น คำสั่ง pre คำสั่งเปิดTag <pre> คำสั่งปิดTag </pre> วิธีเขียน เริ่มด้วยคำสั่งเปิด Tag ตามด้วย HTML Code ที่ต้องการแสดงหน้าบล็อก ปิดท้ายด้วยคำสั่งปิด Tag ตัวอย่างการเขียน Code ให้เห็นเป็น text <pre><a href="http://www.oknation.net">นี่คือลิงค์ไปหน้าหลัก oknation</a></pre> ซึ่งจะเห็นในบล็อกอย่างนี้ค่ะ (ไม่มีส่วนที่มีคำสั่ง pre ทั้งหัวและท้าย) <a href="http://www.oknation.net">นี่คือลิงค์ไปหน้าหลัก oknation</a>
การเจก Code ในกรอบ Textarea
บางทีการแยกให้เห็นชัดๆว่า ข้อความส่วนไหนเป็นเนื้อหา หรือเป็น Code ก็จะช่วยผู้อ่านให้เห็นภาพและใช้งานได้สะดวกยิ่งขึ้น เช่นใช้คำสั่ง textarea คำสั่ง Textarea คำสั่งเปิด Tag คือ <textarea> คำสั่งปิด Tag คือ </textarea> วิธีเขียน
ตัวอย่าง การเขียน Code ใฟ้เป็น text ในกรอบที่กำหนด <textarea><pre><a href="http://www.oknation.net">นี่คือลิงค์ไปหน้าหลัก oknation</a></pre></textarea> การกำหนดขนาดกรอบของ textarea เราสามารถกำหนดขนาดพื้นที่สำหรับ textarea ได้ด้วยการกำหนดความกว้างของแนวตั้งและแนวนอนได้ เช่น <textarea rows="2" cols="20"><pre><a href="http://www.oknation.net">นี่คือลิงค์ไปหน้าแรก oknation</a></pre></textarea> ซึ่งจะมองเห็นทางหน้าบล็อกมีขนาดกว้าง 20 pixels และมี 2 แถว อย่างนี้ค่ะ การกำหนดสีพื้นหลัง (background) ของ Textarea เราสามารถใส่สีพื้นหลังในกรอบ textarea ได้ด้วยการกำหนด textarea style สำหรับ สีพื้นหลัง ดังนี้ เช่น <textarea style="color: red; background-color: lightyellow" rows="2" cols="20"><pre><a href="http://www.oknation.net">นี่คือลิงค์ไปหน้าแรก oknation</a></pre></textarea>
การใส่ textarea ไว้ในตาราง นอกจากนี้เรายังสามารถนำ text เหล่านี้ไปใส่ไว้ในตาราง (Table) ได้ด้วยค่ะ โดยการสร้างตารางก่อนแล้วนำ code ที่เตรียมไว้ก่อนหน้านี้ (เช่นในตัวอย่างข้างบน) มาใส่ในตาราง หลังจากนั้นจะตบแต่งตาราง จัดวางให้ดูดีอย่างไรก็ตามแต่ค่ะ การใช้ html สร้างตาราง ให้ใช้คำสั่ง Table สังเกตุ Code ต่อไปนี้ให้ดีค่ะ เปรียบเทียบกับ Code ข้างบน ส่วนที่เพิ่มมาทั้งหัวและท้ายคือ html code ของตารางที่เราสร้างมาแบบง่ายๆค่ะ <table><tbody><tr><td><textarea style="color: red; background-color: lightyellow" rows="2" cols="20"><pre><a href="http://www.oknation.net">นี่คือลิงค์ไปหน้าแรก oknation</a></pre></textarea></td></tr></tbody></table>
ดูวิธีสร้างตารางเพิ่มเติมได้ในเรื่อง ขอบคุณที่เข้ามาอ่าน และแสดงความคิดเห็นค่ะ ปิรันญ่า 14 เมษายน 2551 อัพเดท 17 เมษายน 2551 เริ่มด้วยคำสั่งเปิด Tag ตามด้วย HTML Code ที่ต้องการแสดงหน้าบล็อก ปิดท้ายด้วยคำสั่งปิด Tag |