เหตุ

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

tutorialdd1

มีดีอะไรที่ต้องกล่าวถึง

คือบางที่ผมจะศึกษาจาก E-book หรือหนังสือ ที่มีอยู่แล้ว แต่กรณีที่ไม่ได้พกติดตัว และนึกไม่ออก จำ syntax ไม่ได้ ก็จะได้แหล่งความรู้ในเว็บไซต์นี้แหละ เป็นแหล่งอ้างอิง  เว็บไซต์นี้จะมี systax เกือบทั้งหมดของภาษานั้น ๆ (ที่มีในเว็บ) ไว้ให้เรา พร้อมทั้งคำอธิบาย และที่เด็ดกว่านั้น มีตัวอย่างให้ดู และสามารถแก้ไขโค๊ด และดูการเปลี่ยนแปลงได้เลย เหมาะกับคนที่อยากหัดเขียน แต่อาจจะยังไม่รู้เรื่อง server หรือไม่รู้จะเริ่มยังไง

ก็ลองเข้าเว็บนี้ดูครับ  ผมเข้าครั้งแรกยังชอบเลย เคยพยายามจะทำตัว editor ที่สามารถพิมพ์แล้วแก้ไขโค๊ดได้เลย แต่แล้วก็ไม่สำเร็จ และยังไม่มีเวลาพอจะไปค้นหาวิธี    แต่คิดว่าอนาคตจะต้องทำแบบนี้เหมือนกัน

พาทัวร์ของดีกันสักหน่อย

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

1. ไปที่เว็บไซต์ก่อนเลยครับที่ w3shools.com

2. ผมขอพาทัวร์เรื่อง HTML ก่อนละกัน ก็เลือกไปที่หัวข้อดังกล่าว แล้วคลิก   HTML ได้เลย

tutorialdd2

3. จะมีเมนูการเรียนด้านซ้ายมือ ทั้ง Basic และ Advance เลย แต่ผมไม่เืลือก (จะบอกทำไมเนี่ยยย)  พอดีชอบเรียนแบบตัวอย่างอ่ะนะ พอไม่เข้าใจตรงไหนในตัวอย่างก็จะมาหารายละเอียดตัวที่เราอยากรู้เพิ่มเิติมอ่ะนะ เลยขอแนะนำกับตัวอย่างละกัน  เผื่อใครเห็นแล้วทำได้เลย จะภูมิใจ โอ้ววว ฉันก็ทำได้หรือนี่ อาจจะเกิดแรงบันดาลใจอยากเป็นโปรแกรมเมอร์ก็ได้นะ ใครจะไปรู้ อ่ะ วกกลับมา ก็ให้เลื่อนหน้าต่าง(scroll bar) ลงมาตรงตัวอย่างแล้วเลือก HTML Examples เลยจ้า

tutorialdd1-3

4. และก็มาดูที่โซนตรงกลางกัน จะมีหัวข้อย่อยเพื่อให้เราศึกษา และเล่นกัน โอ้วว เยอะนะเนี่ยยย  ก็ขอลองเล่นอันแรกเลยละกันครับ  คลิก A very simple HTML document ดูสิว่ามันง่ายจริงเปล่า

tutorialdd1-4

5. ก็จะมีหน้าต่างขึ้นมาใหม่ครับ อันนี้แหละ เล่นโล้ดดด  ขออธิบายก่อนเล่นหน่อยนะ

5.1 โซนนี้ไว้สำหรับให้เราพิมพ์อะไรก็ได้ที่อยากพิมพ์ (โค๊ดครับโค๊ด) เฉพาะ HTML Code นะครับ ใครจะลอง php นะ่ ไม่ได้นะครับ(ลองมาแล้วววว) เพราะมันไม่ได้ ฮา

5.2 พอพิำมพ์โค๊ดเสร็จ ก็คลิกปุ่ม Edit and Click Me ได้เลยครับ (ไม่คลิกไม่เห็นผลลัพธ์นะ)

5.3 โซนนี้ไว้ดูผลลัพธ์ฝีมือเราครับ

tutorialdd1-5

6. งั้นลอง Simple ๆ กันหน่อยนะ  โดยการทำทำขั้นตอนที่ 5 ทุกประการ

tutorialdd1-6

เป็นไงล่ะ ผลงานอิอิ แค่นี้ก็สุขใจแล้ววว บางคนอาจจะแปลกใจว่าทำไมของผมตัวใหญ๋ ใหญ่จัง  ไม่ต้องแปลกใจครับ ผมใช้ syntax บางตัวช่วยให้มันใหญ่ขึ้นนั่นเอง   นั่นก็คือ tag <h1>ตัวอักษรที่เราต้องการให้เป็น</h1> ลอง ๆ ดูครับ

ก็หวังว่าคงจะมีประโยชน์กับน้อง ๆ บางคนที่พึ่งเริ่มศึกษาบ้าง ไม่มากก็น้อย (สำนวนโบร๊าณ โบราณ ) มีไรสอบถาม ก็ฝากไว้ที่ลาน แสดงความคิดเห็น ได้เลยนะ ขอตัวไปลุยงานต่อล่ะ อิอิ

ก่อนไป

ขอบคุณ w3shools.com มากมายครับ ที่นำเสนอข้อมูลที่ดี ๆ ไว้ให้เราศึกษากัน