<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ikapeng.com &#187; editor</title>
	<atom:link href="http://www.ikapeng.com/tag/editor/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ikapeng.com</link>
	<description>:Knowledge,Entertain,Nonsensical,Sports,Download &#38; all Share at Here !!!</description>
	<lastBuildDate>Wed, 28 Jul 2010 09:33:04 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>ทำความรู้จัก HTML</title>
		<link>http://www.ikapeng.com/%e0%b8%97%e0%b8%b3%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b8%a3%e0%b8%b9%e0%b9%89%e0%b8%88%e0%b8%b1%e0%b8%81-html.html</link>
		<comments>http://www.ikapeng.com/%e0%b8%97%e0%b8%b3%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b8%a3%e0%b8%b9%e0%b9%89%e0%b8%88%e0%b8%b1%e0%b8%81-html.html#comments</comments>
		<pubDate>Sat, 06 Feb 2010 04:36:59 +0000</pubDate>
		<dc:creator>ikapeng</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[editor]]></category>
		<category><![CDATA[HyperText Markup Language]]></category>
		<category><![CDATA[Web Browser]]></category>

		<guid isPermaLink="false">http://www.ikapeng.com/?p=79</guid>
		<description><![CDATA[วันนี้เรามาทำความรู้จักกับภาษา HTML กันนะคับ
HTML ย่อมาจาก HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง มีโครงสร้างการเขียนโดยใช้แท็ก (Tag) ควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมเว็บเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล
ภาษา HTML เป็นภาษาที่ถูกกำหนดให้เป็นมาตรฐานในการเขียนโฮมเพจ ดังนั้นการศึกษาถึงโครงสร้างของภาษา HTML จึงถือเป็นพื้นฐานที่สำคัญ ในการต่อยอดเพื่อเขียนภาษาคอมพิวเตอร์อื่น ๆ ที่ทำงานผ่านเว็บเบราเซอร์ หรือการพัฒนา Web Application ต่าง ๆ ใครที่คิดว่าจะเมินภาษา HTML เพราะสามารถสร้างโฮมเพจ หรือเว็บเพจโดยอาศัย โปรแกรมช่วยสร้าง ประเภท WYSIWYG (What &#8211; You -See -Is &#8211; What &#8211; You &#8211; Get) เช่น Dreamweaver Frontpag ฯลฯ [...]]]></description>
			<content:encoded><![CDATA[<p>วันนี้เรามาทำความรู้จักกับภาษา HTML กันนะคับ</p>
<p><span style="color: #008000;"><strong>HTML</strong></span> ย่อมาจาก <strong><span style="color: #008000;">H</span>yper<span style="color: #008000;">T</span>ext <span style="color: #008000;">M</span>arkup <span style="color: #008000;">L</span>anguage</strong> เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง มีโครงสร้างการเขียนโดยใช้แท็ก (<em><strong>Tag</strong></em>) ควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมเว็บเบราเซอร์ แต่ละ <em><strong>Tag</strong></em> อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล</p>
<p>ภาษา <strong>HTML</strong> เป็นภาษาที่ถูกกำหนดให้เป็นมาตรฐานในการเขียนโฮมเพจ ดังนั้นการศึกษาถึงโครงสร้างของภาษา <strong>HTML</strong> จึงถือเป็นพื้นฐานที่สำคัญ ในการต่อยอดเพื่อเขียนภาษาคอมพิวเตอร์อื่น ๆ ที่ทำงานผ่านเว็บเบราเซอร์ หรือการพัฒนา <strong>Web Application</strong> ต่าง ๆ ใครที่คิดว่าจะเมินภาษา <strong>HTML</strong> เพราะสามารถสร้างโฮมเพจ หรือเว็บเพจโดยอาศัย โปรแกรมช่วยสร้าง ประเภท <strong>WYSIWYG</strong> (What &#8211; You -See -Is &#8211; What &#8211; You &#8211; Get) เช่น <strong>Dreamweaver Frontpag</strong> ฯลฯ เีพียงอย่างเดียว คงไม่สามารถต่อยอดความรู้ในการพัฒนาโฮมเพจ โดยใช้ภาษา PHP หรือ ASP ได้ ซึ่งในอนาคตสำหรับคนทำเว็บแล้ว ภาษาสคริปต์ <a href="/category/knowledge/php"><strong>PHP</strong></a> หรือ ASP เป็นสิ่งจำเป็นทีเดียวในการพัฒนา Web Application</p>
<blockquote><p>ก่อนที่เราจะเริ่มลงมือเขียน <strong>HTML </strong>เราต้องเตรียมเครื่องมือที่จำเป็นต้องใช้ในการเขียน homepage เบื้องต้น ซึ่งคงต้องมีอย่างน้อยที่สุด 2 อย่าง คือ</p>
<p>1. <strong><span style="color: #008000;">Editer </span></strong>สำหรับใช้เขียนภาษา <em><strong>HTML</strong></em> ซึ่งในที่นี้เพื่อความสะดวกที่สุด ขอแนะนำให้ใช้ <em><strong>Notepad</strong></em> ซึ่งมีติดเครื่องมาอยู่แล้วเมื่อลงวินโดวน์ หรือหากใครจะดาวน์โหลดโปรแกรม <em><strong>Editplus</strong></em> มาใช้ก็ได้ เพราะโปรแกรมตัวนี้สามารถแบ่งแยกสีของ <em><span style="color: #008000;">Tag</span></em> ได้ ซึ่งในอนาคตหากจะเขียน<strong> PHP</strong> โปรแกรมตัวนี้ก็ช่วยให้เขียนโปรแกรมได้ง่ายกว่า <em><strong>Notepad</strong></em> เยอะเลยคับ เพิ่มเติมนิดนึงคับถ้ายังไม่เข้าใจเรื่องของ Tag ต่างๆเท่าใดนักก็แนะนำเป็น Macromedia Dreamweaver ก็ได้นะคับ ใช้งานได้ง่ายทีเดียว</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-80" title="editor" src="http://www.ikapeng.com/wp-content/uploads/2010/02/editor.jpg" alt="" width="179" height="149" /></p>
<p>2. <strong><span style="color: #008000;">Web Browser</span></strong> สำหรับใช้แสดงผลของโฮมเพจ สำหรับเว็บเบราเซอร์ <span id="more-79"></span>ปัจจุบันมีให้เลือกหลายตัวมากเลยคับ ไม่ว่าจะเป็น <em><span style="color: #008000;">Mozilla Firefox,Netscape, Opera, Neoplanet และ Internet Explorer</span></em> หรือที่เรียกย่อ ๆ ว่า IE  แล้วล่าสุดผลงานของ <strong><span style="color: #0000ff;">Google</span></strong> คือ <span style="color: #008000;"><em>Google Chorme</em></span> ซึ่งแต่ละตัวก็มีหน้าตาแตกต่างกันไป แต่ที่อยากจะแนะนำให้ใช้ก็คือ IE เพราะว่าเจ้าตัวนี้จะถูกติดตั้งมาพร้อมกับวินโดว์อีกเช่นกัน ไม่ต้องไปเสียเวลาดาวน์โหลดเพิ่ม หรือชอบตัวไหนหาโหลดมาติดตั้งใช้งานได้เลยคับ</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-81" title="browser" src="http://www.ikapeng.com/wp-content/uploads/2010/02/browser.jpg" alt="" width="327" height="146" /></p>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.ikapeng.com/%e0%b8%97%e0%b8%b3%e0%b8%84%e0%b8%a7%e0%b8%b2%e0%b8%a1%e0%b8%a3%e0%b8%b9%e0%b9%89%e0%b8%88%e0%b8%b1%e0%b8%81-html.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>ใช้งาน vi editor เบื้องต้น</title>
		<link>http://www.ikapeng.com/%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%87%e0%b8%b2%e0%b8%99-vi-editor-%e0%b9%80%e0%b8%9a%e0%b8%b7%e0%b9%89%e0%b8%ad%e0%b8%87%e0%b8%95%e0%b9%89%e0%b8%99.html</link>
		<comments>http://www.ikapeng.com/%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%87%e0%b8%b2%e0%b8%99-vi-editor-%e0%b9%80%e0%b8%9a%e0%b8%b7%e0%b9%89%e0%b8%ad%e0%b8%87%e0%b8%95%e0%b9%89%e0%b8%99.html#comments</comments>
		<pubDate>Sat, 30 Jan 2010 01:52:50 +0000</pubDate>
		<dc:creator>ikapeng</dc:creator>
				<category><![CDATA[Linux]]></category>
		<category><![CDATA[editor]]></category>
		<category><![CDATA[vi]]></category>
		<category><![CDATA[vi editor]]></category>

		<guid isPermaLink="false">http://www.ikapeng.com/?p=9</guid>
		<description><![CDATA[ใช้งาน vi editor เบื้องต้น
สำหรับคนที่พัฒนาระบบงานบน Linux หรือ Unix และเป็นผู้ที่ไม่ชอบย้ายมือออกจากคีย์บอร์ดนั้น ขอแนะนำให้ใ้ช้ Vi Editor แล้วท่านจะไม่ผิดหวัง เนื่องจาก vi นั้นถูกออกแบบมาให้ใช้งาน โดยที่ไม่จำเป็นต้องเอามือออกจากคีย์บอร์ดเลย ไม่เพียงเท่านั้น 10 นิ้วของท่าน จะไม่หลุดออกแป้น a s d f space j k l : เลย แม้แต่ลูกศรขึ้นลง ก็ไม่ได้ใช้ ตัวเลข ก็ไม่ได้ใช้ อยากรู้แล้วใช้ไหมครับ ว่ามันทำงานอย่างไร
vi ประกอบด้วย 2 Mode คือ

Mode command ไว้สำหรับใช้คำสั่ง Mode นี้ เพียงกด Esc ก็จะเข้าสู่ Mode command อัตโนมัติ (คิดอะไรไม่ออก กด Esc ลูกเดียว)
Mode การพิมพ์ [...]]]></description>
			<content:encoded><![CDATA[<p>ใช้งาน vi editor เบื้องต้น</p>
<p>สำหรับคนที่พัฒนาระบบงานบน Linux หรือ Unix และเป็นผู้ที่ไม่ชอบย้ายมือออกจากคีย์บอร์ดนั้น ขอแนะนำให้ใ้ช้ Vi Editor แล้วท่านจะไม่ผิดหวัง เนื่องจาก vi นั้นถูกออกแบบมาให้ใช้งาน โดยที่ไม่จำเป็นต้องเอามือออกจากคีย์บอร์ดเลย ไม่เพียงเท่านั้น 10 นิ้วของท่าน จะไม่หลุดออกแป้น a s d f space j k l : เลย แม้แต่ลูกศรขึ้นลง ก็ไม่ได้ใช้ ตัวเลข ก็ไม่ได้ใช้ อยากรู้แล้วใช้ไหมครับ ว่ามันทำงานอย่างไร</p>
<p>vi ประกอบด้วย 2 Mode คือ</p>
<ol>
<li>Mode command ไว้สำหรับใช้คำสั่ง Mode นี้ เพียงกด Esc ก็จะเข้าสู่ Mode command อัตโนมัติ (คิดอะไรไม่ออก กด Esc ลูกเดียว)</li>
<li>Mode การพิมพ์ ไว้สำหรับเพิ่มข้อมูล เลื่อน Cursor ต่าง ๆ แต่เราต้องใช้ Command ก่อน เช่น หากต้องการเพิ่มอักษร ต้องสั่ง I (Insert) เสียก่อน และเมื่อพิมพ์จะเป็นการแทรกข้อความอัตโนมัติ</li>
</ol>
<p>ผมขอแนะนำเทคนิคที่ใช้กันบ่อย ๆ นะครับ</p>
<p><img class="aligncenter size-full wp-image-10" title="vi-editor" src="http://www.ikapeng.com/wp-content/uploads/2010/01/vi-editor.gif" alt="vi-editor" width="400" height="283" /></p>
<p><a href="http://picasaweb.google.com/siamhostdd/Thaiopensource/photo#5199908202355045122"></a></p>
<p>รูปแสดงแผนผังการใช้งาน VI Editor แบบไม่ยกนิ้วกันเลยครับผม</p>
<p><strong>การเลื่อนทิศทาง (</strong><strong>Motivation) </strong><br />
สังเกตุนะครับ มือจะไม่ขยับไปใช้ ลูกศร ขึ้นลง เลย ทำให้ทำงานได้เร็วขึ้น</p>
<ul>
<li>h      = เลื่อนไปทางซ้าย</li>
<li>l      = เลื่อนไปทางขวา</li>
<li>j      = เลื่อนลง</li>
<li>k      = เลื่อนขึ้น</li>
<li>หาก พิมพ์ 8l      = เลื่อนไปทางขวา      8 ตัวอักษร</li>
<li>w      , W = เลื่อนไปทางขวา      1 คำ เช่น <span style="text-decoration: line-through;">t</span>his is test เมื่อกด w จะเลื่อน Cursor      ไป 1 word Cursor จะไปยืนอยู่ที่ this      <span style="text-decoration: line-through;">i</span>s test เป็นต้น</li>
<li>{      = เลื่อนไปยังต้น      Paragraph</li>
<li>}      = เลื่อนไปยังท้าย      Paragraph</li>
<li>:หมายเลขบรรทัด =      เลื่อนไปยังบรรทัดที่ต้องการ เช่น :10 หมายถึงไปบรรทัดที่ 10      เป็นต้น</li>
<li>$      = ไปตัวอักษรท้ายสุดของบรรทัด</li>
<li>0      = ไปตัวอักษรตัวแรกสุด      ของบรรทัด</li>
</ul>
<p><strong>การกระทำการ (</strong><strong>Operator</strong>)</p>
<ul>
<li>i      = เพิ่มตัวอักษร      (insert) ใช้งาน      โดยพิมพ์ i แล้วพิมพ์ต่อได้เลย</li>
<li>I      = เพิ่มตัวอักษรต้นบรรทัด</li>
<li>x      = ลบตัวษรทีละ 1 ตัว</li>
<li>10x      = ลบตัวอักษร 10      ตัว</li>
<li>dw      = ลบทั้งคำ</li>
<li>dd      = ลบทั้งบรรทัด</li>
<li>yy      = yank หมายถึง Copy      ทั้งบรรทัด</li>
<li>p      = วาง (Paste)      วางบรรทัดล่างจาก Cursor      อยู่</li>
<li>P      = วาง (Paste)      วางแทรกบรรทัดปัจจุบัน</li>
</ul>
<p><strong>การจัดการเกี่ยวกับไฟล์</strong></p>
<ul>
<li>:w      ชื่อไฟล์ = save      ไฟล ์ด้วยชื่อที่กำหนด</li>
<li>:wq      = save ไฟล์      และออกจาก vi (Quit)</li>
<li>:q!      = ออกจาก vi      โดยไม่ Save</li>
<li>:set
<ul>
<li>set       nu = สั่งให้ vi       แสดงหมายเลขบรรทัด</li>
<li>set       ic = สั่งให้เวลา Search       ไม่ดูการค้น       ตัวเล็ก ตัวใหญ่ ใด ๆ (Ignore Case)</li>
<li>set       nu ic สั่งให้ทำงานทั้ง       2 แบบ</li>
</ul>
</li>
</ul>
<p>ลอง Telnet แล้วไปของพิมพ์เล่น ๆ ดูนะครับ ทางด้านบนนั้น เป็นเพียงแค่ความสามารถเพียงนิดเดียวของ Vi ครับ หวังว่าหลายคนที่มองหา Editor ฟรี ๆ ความสามารถสูง ๆ ที่พร้อมใช้ังานอยู่ใน Server อยู่แล้วครับ</p>
<p>*** จำไม่ได้แล้วคับว่าเอามาจากเว็บไหน ยังไงก็ขอบคุณต้นฉบับนะคับ <img src='http://www.ikapeng.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.ikapeng.com/%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%87%e0%b8%b2%e0%b8%99-vi-editor-%e0%b9%80%e0%b8%9a%e0%b8%b7%e0%b9%89%e0%b8%ad%e0%b8%87%e0%b8%95%e0%b9%89%e0%b8%99.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->
