• ปิรันญ่า
  • ranking : สมาชิกทั่วไป
  • วันที่สร้าง : 2007-01-31
  • จำนวนเรื่อง : 599
  • จำนวนผู้ชม : 243251
  • จำนวนผู้โหวต : 1008
  • ส่ง msg :
เพลงภูมิแผ่นดินนวมินทร์มหาราชา

เพลงภูมิแผ่นดินนวมินทร์มหาราชา

View All
<< เมษายน 2008 >>
อา พฤ
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      



วันจันทร์ ที่ 14 เมษายน 2551
...... เทคนิคการสร้างลิงค์แบบง่ายๆ และการแจก Code ในบล็อกให้คนอื่น Copy ไปใช้
Posted by ปิรันญ่า , ผู้อ่าน : 527 , 13:52:18 น.   | หมวดหมู่ : Blogger เกลอกัน  
พิมพ์หน้านี้


แนะนำการสร้างลิงค์และการแจก Code ในบล็อกค่ะ

 การสร้างลิงค์ในบล็อก

เวลาเขียนเรื่องราวต่างๆ บางครั้งเราก็อยากให้คนอ่านสามาถคลิกลิงค์ในเรื่องไปอ่านรายละเอียดเพิ่มเติมได้ จะเป็นเอนทรี่ในบล็อกเรา บล็อกอื่นๆ หรือเว็บไซด์ที่เราอยากแนะนำ ซึ่งเกี่ยวข้องกับเรื่องที่เรานำเสนอ เราสามารถทำได้ด้วยการสร้างลิงค์ไปยังเว็บเพจนั้นๆ

โดยปกติ เวลาที่เราเขียน url address (เช่น http://www.ชื่อเว็บ.com หรือ .net .go.th .co.th หรือสกุลอะไรก็ตาม) แล้วกด enter หรือกด space bar มันจะกลายร่างเป็นลิงค์ให้เราสามารถคลิกข้าไปยังเว็บนั้นๆได้โดยอัตโนมัติ

 แต่ก็มีบางครั้งที่ขัดข้องทางเทคนิค คือ ลิงค์ไม่ work  ใช่ไหมคะ?

 งั้นลองมาเรียนรู้เกี่ยวกับคำสั่ง html เพื่อสร้างลิงค์กันสักนิดดีไหมคะ

 โครงสร้างคำสั่งที่จะทำให้เกิดลิงค์มี 3 ส่วนค่ะ

  1. คำสั่ง (html tag) 

a href

  1. url address ของเว็บที่จะพาไป เมื่อคลิกตัวหนังสือในข้อ 3  เช่น http://www.oknation.net/blog/manual

  2. ตัวหนังสือที่จะสร้างลิงค์ (จะสร้างลิงค์บนภาพก็ได้ค่ะ)  เช่น "ไปดูคู่มือการทำบล็อก"

สมมติ เราจะสร้างลิงค์ให้ไปดู คู่มือการทำบล็อก ซึ่งมี 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 


อ่านความคิดเห็น

ความคิดเห็นที่ 23
ทิวสน วันที่ : 21/04/2008 เวลา : 00.40 น.
http://www.oknation.net/blog/tewson
ทิวสน ชลนรา

ผมลืมแวะมาได้ไงนี่

เรื่องที่อยากรู้พอดีเลย

ขอบคุณครับ
ความคิดเห็นที่ 22
วิตามินบี วันที่ : 18/04/2008 เวลา : 15.41 น.
http://www.oknation.net/blog/babymind
ความอ่อนน้อมถ่อมตน คืออาภรณ์ประดับกายที่งดงาม


บีแวะมาเยี่ยมอีกรอบค่ะ
เจ้าของบ้านแช่เรื่องซะแล้ว
ความคิดเห็นที่ 21
ย่าดา วันที่ : 18/04/2008 เวลา : 10.03 น.
http://www.oknation.net/blog/dada
วิญญานอิสระโบยบิ http://www.oknation.net/blog/freesoultofly

ย่ามาสมัครเป็นลูกศิษย์ด้วยคน สมัยก่อนก๊อปโค๊ตเป็นดุ้นๆมาใช้เลย แล้วก็เปลี่ยนค่าแบบงูๆปลาๆมาโดยไม่รู้ว่าไอ้คำสั่งต่างๆมันแปลว่าอะไร ได้มาอ่านของอาจารย์แล้วเข้าใจยิ่งขึ้น แต่ก่อนมั่วเอาทั้งนั้นเลยอ่ะ อิอิ
ความคิดเห็นที่ 20
ปิรันญ่า วันที่ : 17/04/2008 เวลา : 20.49 น.
http://www.oknation.net/blog/nanahahe
ฉันเป็นไม้ขีดหนึ่งก้าน จะขอจุดเทียนสักล้านเล่ม...

@;-- เห็นด้วยกะ คห 13 ของคุณบีเหมือนกันค่ะ จะนำเสนอผู้เกี่ยวข้องนะคะ แต่ทั้งนี้ทั้งนั้นต้องขึ้นกับจำนวนความต้องการของสมาชิกด้วยคค่ะว่ามากเพียงไร จะได้จัด class กันถูกนะคะ

@;-- เดี๋ยวคืนนี้มาตอบ คห ทุกคนค่ะ
ขอตัวไปทำธุระต่อก่อนนะคะ
ความคิดเห็นที่ 19
numouse_2007 วันที่ : 16/04/2008 เวลา : 20.14 น.
http://www.oknation.net/blog/numouse
พระธาตุเชิงชุมคู่บ้าน พระตำหนักภูพานคู่เมือง งามลือเลื่องหนองหาน แลตระการปราสาทผึ้ง สวยสุดซึ้งสาวภูไท ถิ่นมั่นใจพุทธธรรม ^_^ เชิญเที่ยวงานแห่ปราสาทผึ้งวันที่ 10 - 14 ตค. 51 นะคะ จ.สกลนครจ้า

อืม น่าสนใจอย่างที่พี่บี คห.13 บอกนะค่ะ
แต่ถึงตอนนั้นนู๋ก็มิรู้ว่าจะว่างไปอีกรึเปล่า เฮ้อ
ความคิดเห็นที่ 18
ครูเจี๊ยบ วันที่ : 16/04/2008 เวลา : 17.17 น.
http://www.oknation.net/blog/baan-koo-kai

เห็นด้วยกะคห 13 ค่ะ
แต่อย่ารอให้ถึงมีทติ้งปีหน้าเลย
นัดใกล้ๆนี่ดีไหมคะ
ความคิดเห็นที่ 17
buppha วันที่ : 15/04/2008 เวลา : 21.20 น.
http://www.oknation.net/blog/supermom

พี่ขา

ขอบคุณที่แนะนำค่ะพี่ หนูขอใช้เวลาสักพักในการเรียนรู้ค่ะ
ความคิดเห็นที่ 16
ครูส้ม วันที่ : 15/04/2008 เวลา : 13.41 น.
http://www.oknation.net/blog/thipjt
http://www.oknation.net/blog/mokara

อาจารย์ขา
ป้าส้มมาsave ไว้เป็นตำราเลยนะคะ

แวะมาสวัสดีปีใหม่ไทยอาจารย์ด้วย
(ขออนุญาตเรียกอาจารย์ตั้งแต่วันรวมพลฯแล้วน่ะ)

ขอให้มีความสุขมากๆทั้งครอบครัวนะคะ
ความคิดเห็นที่ 15
แม่ค้า วันที่ : 15/04/2008 เวลา : 13.04 น.
http://www.oknation.net/blog/jiracafe

ขอบคุณค่ะที่นำเรื่องดีดีมาบอก

แต่ป้ายังทำไรไม่เป็นอยู่ดีอ่ะค่ะ
ความคิดเห็นที่ 14
ความทรงจำเก่าๆ วันที่ : 15/04/2008 เวลา : 12.56 น.
http://www.oknation.net/blog/kontummadha
เพลงชีวิต.....เพลงชีวา...คนธรรมด๊า...ธรรมดา ศ.3 ตค.51นี้ ขอเชิญชมคอนเสิร์ตรวมพลคนคลื่นใจ ครั้งที่2 ( และร่วมประมูลของที่ระลึกจากศิลปิน...เพื่อเด็กดอยอุ้มผาง )

เห็นด้วยกับวิตามินบี..ครับ...
ความคิดเห็นที่ 13
วิตามินบี